"use client";
import{d as T,e as x,i as S,k as z,o as h}from"./chunk-CLTGASR6.js";import{a as $,d as P,m as l}from"./chunk-3CHPBNY2.js";import{forwardRef as A,useRef as N}from"react";import B from"clsx";import{forwardRef as H}from"react";import D from"clsx";var R=$("EulTabs",["active","disabled","focusVisible","isSelected","item","root","selected","sizeSmall","sizeMedium","sizeLarge"]),n=e=>x("EulTabs",{root:["root",e.isSelected&&"isSelected"],tab:["item",e.size&&`size${P(e.size)}`,e.selected&&"selected",e.active&&"active",e.disabled&&"disabled",e.focusVisible&&"focusVisible"]}),o=R;import{css as W}from"@emotion/react";var w=l("button")(({theme:e})=>W`
    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;

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

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

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

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

    &.${o.selected}, &.${o.active}, &:hover {
      color: ${e.palette.teal[1e3]};
    }
  `);import{jsx as E}from"react/jsx-runtime";var C=H(({className:e,size:t,tabIndex:s,...i},a)=>{let{children:p,selected:c}=i,{ariaAttributes:d,classes:r,getRootProps:f,handleKeyDown:b,handleOnClick:m}=z(i,a),y=n({...r,size:t});return E(w,{...f(),...d,"aria-selected":c,className:D(e,y.tab),onClick:m,onKeyDown:b,ref:a,role:"tab",tabIndex:s,children:p})});C.displayName="Tab";var u=C;import{css as L}from"@emotion/react";var v=l("div",{shouldForwardProp:e=>e!=="width"&&e!=="left"})(({left:e,theme:t,width:s})=>L`
    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: ${s}px;
      height: 1px;
      background: ${t.palette.teal[700]};
      opacity: 0;
      transition: ${t.transitions.create(["opacity","left"])};
      content: "";
    }

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