"use client";
import{d as T,e as x,i as S,k as z,o as h}from"./chunk-TERSEXPI.js";import{a as $,d as P,m as l}from"./chunk-QKAMOL6D.js";import{forwardRef as B,useRef as U}from"react";import F from"clsx";import{forwardRef as H}from"react";import D from"clsx";import{useEffect as R,useState as A}from"react";var W=$("EulTabs",["active","disabled","focusVisible","isAnimated","isSelected","item","root","selected","sizeSmall","sizeMedium","sizeLarge"]),n=e=>{let[t,o]=A(!1);return R(()=>{setTimeout(()=>o(!0),1e3)},[]),x("EulTabs",{root:["root",e.isSelected&&"isSelected",t&&"isAnimated"],tab:["item",e.size&&`size${P(e.size)}`,e.selected&&"selected",e.active&&"active",e.disabled&&"disabled",e.focusVisible&&"focusVisible"]})},s=W;import{css as V}from"@emotion/react";var w=l("button")(({theme:e})=>V`
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: ${e.spacing(3)};
    align-items: center;
    margin: ${e.spacing(1.5,0)};
    color: ${e.palette.background[800]};
    background: transparent;
    border: none;
    border-radius: ${e.spacing(1)};
    outline: 0 solid ${e.palette.yellow[600]};
    outline-offset: 4px;
    cursor: pointer;
    isolation: isolate;

    &.${s.sizeSmall} {
      padding: ${e.spacing(2,3)};
      font-size: ${e.typography.body2.fontSize};
      line-height: ${e.typography.body2.lineHeight};
    }

    &.${s.sizeMedium} {
      padding: ${e.spacing(3,4)};
      font-size: ${e.typography.body1.fontSize};
      line-height: ${e.typography.body1.lineHeight};
    }

    &.${s.sizeLarge} {
      padding: ${e.spacing(4,5)};
      font-size: ${e.typography.subtitle3.fontSize};
      line-height: ${e.typography.subtitle3.lineHeight};
    }

    &.${s.focusVisible} {
      outline-width: 2px;
    }

    &.${s.selected}, &.${s.active}, &:hover {
      color: ${e.palette.teal[1e3]};
    }
  `);import{jsx as L}from"react/jsx-runtime";var C=H(({className:e,size:t,tabIndex:o,...i},a)=>{let{children:p,selected:d}=i,{ariaAttributes:c,classes:r,getRootProps:f,handleKeyDown:b,handleOnClick:m}=z(i,a),y=n({...r,size:t});return L(w,{...f(),...c,"aria-selected":d,className:D(e,y.tab),onClick:m,onKeyDown:b,ref:a,role:"tab",tabIndex:o,children:p})});C.displayName="Tab";var u=C;import{css as M}from"@emotion/react";var v=l("div",{shouldForwardProp:e=>e!=="width"&&e!=="left"})(({left:e,theme:t,width:o})=>M`
    position: relative;
    display: flex;
    max-width: 100%;
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: none;

    &:after {
      position: absolute;
      bottom: ${t.spacing(1.5)};
      left: 0;
      z-index: 0;
      width: 100%;
      height: 1px;
      background-color: ${t.palette.background[500]};
      content: "";
    }

    &:before {
      position: absolute;
      bottom: ${t.spacing(1.5)};
      left: ${e}px;
      z-index: 1;
      width: ${o}px;
      height: 1px;
      background: ${t.palette.teal[700]};
      opacity: 0;
      content: "";
    }

    &.${s.isSelected}:before {
      opacity: 1;
    }

    &.${s.isAnimated}:before {
      transition: ${t.transitions.create(["opacity","left","width"])};
    }
  `);import{jsx as O}from"react/jsx-runtime";var g=B(({children:e,className:t,onChange:o,size:i,value:a,...p},d)=>{let c=T(p),r=U(null),f=S(d,r),{children:b,selectedPosition:m}=h({childDisplayName:"Tab",children:e,innerRef:r,onChange:o,size:i,value:a}),k=n({isSelected:typeof a<"u",size:i});return O(v,{...c,...m,className:F(t,k.root),ref:f,role:"tablist",children:b})});g.displayName="Tabs";g.defaultProps={size:"small"};var I=Object.assign(g,{Tab:u}),K=I;export{s as a,K as b};
