"use client";
import{a as p}from"./chunk-VWS2Q7O3.js";import{d as c,e as n}from"./chunk-CLTGASR6.js";import{a as i,m as l}from"./chunk-3CHPBNY2.js";import{p as t}from"./chunk-KEPQUAOX.js";import{forwardRef as V}from"react";import a from"clsx";var O=i("EulToggle",["checked","disabled","focusVisible","input","readOnly","root","yellow"]),d=o=>n("EulToggle",{input:["input"],root:["root",o.checked&&"checked",o.disabled&&"disabled",o.focusVisible&&"focusVisible",o.readOnly&&"readOnly",o.yellow&&"yellow"],thumb:["thumb"]}),e=O;var u=l("input")`
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
`,g=l("div")(({theme:o})=>t`
    position: relative;
    display: inline-block;
    width: ${o.spacing(8)};
    height: ${o.spacing(5)};
    font-size: 0;
    background-color: ${o.palette.background[200]};
    border-radius: 100px;
    cursor: pointer;
    transition: ${o.transitions.create(["background-color"])};

    &.${e.checked} {
      background-color: ${o.palette.tealOpaque[300]};
    }

    &.${e.checked}.${e.yellow} {
      background-color: ${o.palette.yellowOpaque[300]};
    }

    &:hover {
      background-color: ${o.palette.background[100]};

      &.${e.checked} {
        background-color: ${o.palette.tealOpaque[400]};
      }
      &.${e.checked}.${e.yellow} {
        background-color: ${o.palette.yellowOpaque[400]};
      }
    }

    &.${e.focusVisible} {
      outline: ${o.spacing(.5)} solid ${o.palette.yellow[600]};
      outline-offset: ${o.spacing(.5)};
    }

    &.${e.disabled}, &.${e.disabled}:hover {
      background-color: transparent;
      outline: 1px solid ${o.palette.background[600]};
      cursor: not-allowed;
    }
  `),b=l("span")(({theme:o})=>t`
    position: relative;
    top: 2px;
    left: 2px;
    display: block;
    width: ${o.spacing(4)};
    height: ${o.spacing(4)};
    background-color: ${o.palette.background[700]};
    border-radius: ${o.spacing(4)};
    transition: ${o.transitions.create(["left","background-color"])};

    .${e.checked} & {
      top: 2px;
      left: 14px;
      background-color: ${o.palette.teal[700]};
    }

    .${e.checked}.${e.yellow} & {
      background-color: ${o.palette.yellow[700]};
    }

    .${e.root}:hover & {
      background-color: ${o.palette.background[800]};
    }

    .${e.checked}:hover & {
      background-color: ${o.palette.teal[800]};
    }

    .${e.checked}.${e.yellow}:hover & {
      background-color: ${o.palette.yellow[800]};
    }

    .${e.disabled} &,
    .${e.disabled}:hover & {
      background-color: ${o.palette.background[600]};
    }
  `);import{jsx as $,jsxs as I}from"react/jsx-runtime";var f=V(({className:o,name:k,value:y,yellow:m,...s},w)=>{let{checked:T,disabled:x,focusVisible:h,getInputProps:v,readOnly:C}=p(s),S=c(s),r=d({checked:T,disabled:x,focusVisible:h,readOnly:C,yellow:m});return I(g,{className:a(o,r.root),children:[$(b,{className:a(r.thumb)}),$(u,{className:a(r.input),name:k,value:y,...v(),...S,ref:w})]})});f.displayName="Toggle";var q=f;export{e as a,q as b};
