"use client";
import{d as P,e as h,k as w,o as z}from"./chunk-CLTGASR6.js";import{a as x,d as S,m as s}from"./chunk-3CHPBNY2.js";import{p as r}from"./chunk-KEPQUAOX.js";import{forwardRef as L,useRef as U}from"react";import N from"clsx";import{forwardRef as V}from"react";import D from"clsx";var R=x("EulSegmentedControl",["active","disabled","fullWidth","focusVisible","inner","isSelected","item","root","selected","sizeSmall","sizeMedium","sizeLarge"]),m=e=>h("EulSegmentedControl",{inner:["inner",e.isSelected&&"isSelected"],item:["item",e.size&&`size${S(e.size)}`,e.selected&&"selected",e.active&&"active",e.disabled&&"disabled",e.focusVisible&&"focusVisible"],root:["root",e.size&&`size${S(e.size)}`,e.fullWidth&&"fullWidth"]}),o=R;var I=s("button")(({theme:e})=>r`
    display: flex;
    flex-direction: row;
    gap: ${e.spacing(1)};
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: ${e.spacing(1,3)};
    color: ${e.palette.background[800]};
    font-size: ${e.typography.body2.fontSize};
    line-height: ${e.typography.body2.lineHeight};
    white-space: nowrap;
    background-color: transparent;
    border: none;
    cursor: pointer;
    isolation: isolate;

    &.${o.sizeLarge} {
      gap: ${e.spacing(2)};
      padding: ${e.spacing(2,4)};
      font-size: ${e.typography.body1.fontSize};
      line-height: ${e.typography.body1.lineHeight};
    }

    &:hover,
    &.${o.selected}, &.${o.active} {
      color: ${e.palette.text.primary};
    }
  `);import{jsx as E}from"react/jsx-runtime";var k=V(({size:e,tabIndex:t,...i},n)=>{let{children:l,className:a,selected:d}=i,{ariaAttributes:f,classes:p,getRootProps:g,handleKeyDown:u,handleOnClick:c}=w(i,n),y=m({...p,selected:d,size:e});return E(I,{...g(),...f,"aria-selected":d,className:D(a,y.root),onClick:c,onKeyDown:u,ref:n,tabIndex:t,children:l})});k.displayName="SegmentedItem";var C=k;var v=s("div")(({theme:e})=>r`
    display: inline-flex;
    max-width: 100%;
    padding: ${e.spacing(2)};
    background: ${e.palette.background[200]};
    border-radius: ${e.spacing(10)};
    outline: 1px solid ${e.palette.background[400]};
    outline-offset: -1px;

    &.${o.fullWidth} {
      width: 100%;
    }

    &.${o.sizeSmall} {
      padding: ${e.spacing(1)};
    }
  `),W=s("div",{shouldForwardProp:e=>!["isSelected","selectedPosition","size"].includes(String(e))})(({selectedPosition:e,theme:t})=>r`
    position: relative;
    display: flex;
    gap: ${t.spacing(1)};
    align-items: center;
    width: 100%;
    overflow: auto hidden;
    white-space: nowrap;
    scrollbar-width: none;

    &:before {
      position: absolute;
      top: 0;
      left: ${e.left}px;
      width: ${e.width}px;
      height: 100%;
      background: ${t.palette.background[600]};
      border: ${e.width>0&&`1px solid ${t.palette.tealOpaque[100]}`};
      border-radius: ${t.spacing(5.5)};
      opacity: 0;
      transition: ${t.transitions.create(["opacity","top","left"])};
      content: "";

      .${o.isSelected}& {
        opacity: 1;
      }
    }
  `);import{jsx as O}from"react/jsx-runtime";var b=L(({children:e,className:t,fullWidth:i,onChange:n,size:l,value:a,...d},f)=>{let p=U(null),g=P(d),{children:u,selectedPosition:c}=z({childDisplayName:"SegmentedItem",children:e,innerRef:p,onChange:n,size:l,value:a}),$=m({fullWidth:i,isSelected:typeof a<"u",selectedPosition:c,size:l});return O(v,{...g,className:N(t,$.root),ref:f,children:O(W,{className:N($.inner),ref:p,selectedPosition:c,children:u})})});b.displayName="SegmentedControl";b.defaultProps={size:"small"};var A=Object.assign(b,{Item:C}),M=A;export{o as a,M as b};
