{"version":3,"sources":["../../src/Legacy/TabList/Tab.tsx","../../src/utilities/Clay/Clay.tsx","../../src/utilities/Flex/Flex.tsx","../../src/utils.ts","../../src/Badge/NumberBadge/NumberBadge.tsx","../../src/Badge/NumberBadge/NumberBadge.css.ts","../../src/Legacy/TabList/TabList.tsx","../../src/Legacy/TabList/TabList.css.ts","../../src/Legacy/TabList/TabList.hooks.ts","../../src/Legacy/Tabs/Tabs.tsx"],"names":["vars","forwardRef","match","jsx","Clay","_a","ref","_b","children","className","_hover","_active","_after","_before","_focus","size","width","height","shape","sx","as","native","props","__objRest","__spreadProps","__spreadValues","ClayNameSpace","_Flex","Flex","_FlexCenter","FlexCenter","_FlexColumn","FlexColumn","FlexNameSpace","Children","isValidElement","getValidChildren","child","css","variantMap","numberBadgeCSS","NumberBadge","number","variant","jsxs","iconPositionToFlexDirection","position","LegacyTab","title","active","onClick","disabled","value","badge","icon","iconPosition","numberBadgeVariantMap","cloneElement","useEffect","useRef","getPaddingForSquared","getStyleForUnderLine","segmentCSSBySize","segmentActiveColorByType","type","tabListCSS","background","fullWidth","debounce","useCallback","useState","useTabListIndicatorStyle","activeTab","tabIndicatorStyle","setTabIndicatorStyle","getActiveTabOffset","debouncedSetTabIndicatorStyle","useTabs","setValue","tabRefObject","activeTabRef","setActiveTabRef","activeIndex","tab","handleKeyDown","event","tabKeyList","focusNextTab","nextKey","move","step","len","tabValue","index","segmentTabIndicatorCSS","renderTabIndicator","commonStyle","LegacyTabList","direction","activeValue","onChangeValue","getTabProps","onChangeValueRef","renderTabs","Fragment","tabDirectionMap","LegacyTabs","tabPanelStyle","tabListStyle","activeKey","setActiveKey","getTabPanels","isActive","isPreRender","tabListProps"],"mappings":"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","sourcesContent":["import { vars } from \"@imwebme/clay-token\";\nimport { forwardRef } from \"react\";\nimport { match } from \"ts-pattern\";\nimport type { NumberBadgeProps } from \"../../Badge\";\nimport { NumberBadge } from \"../../Badge\";\nimport { Flex } from \"../../utilities\";\nimport type { LegacyTabProps } from \"./TabList.types\";\n\nconst iconPositionToFlexDirection = (position: LegacyTabProps<string>[\"iconPosition\"]) => {\n  switch (position) {\n    case \"left\":\n      return \"row-reverse\";\n\n    case \"bottom\":\n      return \"column\";\n\n    case \"top\":\n      return \"column-reverse\";\n\n    default:\n      return \"row\";\n  }\n};\n\n/**\n * @deprecated 사용되지 않는 컴포넌트입니다. `Tabs` 컴포넌트를 사용하세요.\n */\nexport const LegacyTab = forwardRef(\n  <T extends string>(\n    {\n      title,\n      active,\n      onClick,\n      disabled,\n      value,\n      badge,\n      icon,\n      iconPosition,\n      variant,\n    }: LegacyTabProps<T>,\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const numberBadgeVariantMap = match(variant)\n      .returnType<NumberBadgeProps[\"variant\"]>()\n      .with(\"squared\", () => (active ? \"primary-inverse\" : \"secondary\"))\n      .with(\"underline\", () => (active ? \"primary\" : \"secondary\"))\n      .otherwise(() => \"primary\");\n\n    return (\n      <Flex\n        ref={ref}\n        as=\"button\"\n        native={{\n          role: \"tab\",\n          id: `clay-tab-${value}`,\n          \"aria-selected\": active,\n          \"aria-disabled\": disabled,\n          \"aria-controls\": `clay-tabpanel-${value}`,\n          tabIndex: -1,\n          onClick,\n          disabled,\n        }}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        cursor=\"pointer\"\n        gap={vars.spacing[1]}\n      >\n        <Flex.Center\n          position=\"relative\"\n          flexDirection={iconPositionToFlexDirection(iconPosition)}\n          gap={vars.spacing[1]}\n        >\n          {title}\n\n          {icon}\n        </Flex.Center>\n\n        {badge && variant && (\n          <NumberBadge\n            sx={{ position: \"relative\" }}\n            variant={numberBadgeVariantMap}\n            number={badge}\n          />\n        )}\n      </Flex>\n    );\n  },\n);\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ComponentPropsWithRef, ElementType, ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { ClayProps } from \"./Clay.types\";\n\nexport type ClayComponent = <C extends ElementType = \"div\">(\n  props: ClayProps<C> & {\n    ref?: ComponentPropsWithRef<C>[\"ref\"];\n  },\n) => ReactElement | null;\n\nconst Clay: ClayComponent = forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      className,\n      _hover,\n      _active,\n      _after,\n      _before,\n      _focus,\n      size,\n      width,\n      height,\n      shape,\n      sx,\n      as,\n      native,\n      ...props\n    }: ClayProps<E>,\n    ref: ComponentPropsWithRef<E>[\"ref\"],\n  ) => {\n    const Element = as || \"div\";\n\n    return (\n      <Element\n        ref={ref}\n        className={className}\n        css={{\n          width: size || width,\n          height: size || height,\n          ...(shape === \"circle\" && {\n            borderRadius: vars.rounded.full,\n          }),\n          \"&:hover\": _hover,\n          \"&:active\": _active,\n          \"&:after\": _after,\n          \"&:before\": _before,\n          \"&:focus\": _focus,\n          ...props,\n          ...sx,\n        }}\n        {...native}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst ClayNameSpace = Object.assign(Clay, { displayName: \"Clay\" });\n\nexport { ClayNameSpace as Clay };\n","import type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { Clay } from \"../Clay\";\nimport type { ClayComponent, ClayProps } from \"../Clay/Clay.types\";\n\nconst _Flex: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    props: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Clay ref={ref} display=\"flex\" {...props} />,\n);\n\nconst Flex = Object.assign(_Flex, { displayName: \"Flex\" });\n\nconst _FlexCenter: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    props: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Flex ref={ref} alignItems=\"center\" justifyContent=\"center\" {...props} />,\n);\n\nconst FlexCenter = Object.assign(_FlexCenter, { displayName: \"Flex.Center\" });\n\nconst _FlexColumn: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    { as = \"div\" as any, ...props }: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Flex ref={ref} as={as} flexDirection=\"column\" {...props} />,\n);\n\nconst FlexColumn = Object.assign(_FlexColumn, { displayName: \"Flex.Column\" });\n\n/**\n * @deprecated Use `Flex.Column` instead\n */\nexport const Stack = FlexColumn;\n\nconst FlexNameSpace = Object.assign(Flex, { Center: FlexCenter, Column: FlexColumn });\n\nexport { FlexNameSpace as Flex };\n","import { Children, isValidElement } from \"react\";\n\n/**\n * Gets only the valid children of a component,\n * and ignores any nullish or falsy child.\n *\n * @param children the children\n */\nexport function getValidChildren(children: React.ReactNode) {\n  return Children.toArray(children).filter((child) =>\n    isValidElement(child),\n  ) as React.ReactElement[];\n}\n","/** @jsxImportSource @emotion/react */\n\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { numberBadgeCSS, variantMap } from \"./NumberBadge.css\";\nimport type { NumberBadgeProps } from \"./NumberBadge.types\";\n\ntype NumberBadgeComponent = <E extends ElementType>(\n  props: NumberBadgeProps<E> & {\n    ref?: ComponentPropsWithRef<E>[\"ref\"];\n  },\n) => JSX.Element | null;\n\nexport const NumberBadge: NumberBadgeComponent = forwardRef(function ClayNumberBadge<\n  E extends ElementType,\n>(\n  { number, as, size = \"medium\", native, sx, variant, className }: NumberBadgeProps<E>,\n  ref: ComponentPropsWithRef<E>[\"ref\"],\n) {\n  const Element = as || \"span\";\n\n  return (\n    <Element\n      ref={ref}\n      className={className}\n      {...native}\n      style={{\n        ...variantMap.variant[variant],\n        ...variantMap.size[size],\n        ...native?.style,\n      }}\n      css={[numberBadgeCSS, sx]}\n    >\n      {number}\n    </Element>\n  );\n});\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const variantMap = {\n  variant: {\n    primary: {\n      \"--background-color\": vars.semantic.color.surfaceInverse,\n      \"--color\": vars.semantic.color.textInverse,\n    },\n    secondary: {\n      \"--background-color\": vars.semantic.color.surfaceSlateSecondary,\n      \"--color\": vars.semantic.color.textSub,\n    },\n    accent: {\n      \"--background-color\": vars.semantic.color.surfaceHighlightPrimary,\n      \"--color\": vars.semantic.color.text,\n    },\n    critical: {\n      \"--background-color\": vars.semantic.color.surfaceCriticalPrimary,\n      \"--color\": vars.semantic.color.text,\n    },\n    \"primary-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.text,\n    },\n    \"secondary-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textSub,\n    },\n    \"accent-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textAccent,\n    },\n    \"critical-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textCritical,\n    },\n  } as Record<string, Record<string, string>>,\n  size: {\n    small: {\n      \"--padding\": `${vars.spacing[\"1\"]} ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"20px\",\n      // label-xsmall\n      \"--font-size\": vars.fontSize[\"2xsmall\"],\n      \"--line-height\": vars.lineHeight[3],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n    medium: {\n      \"--padding\": `${vars.spacing[\"05\"]} ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"20px\",\n      // label-small-bold\n      \"--font-size\": vars.fontSize.xsmall,\n      \"--line-height\": vars.lineHeight[4],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n    large: {\n      \"--padding\": `0 ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"24px\",\n      // label-medium-bold\n      \"--font-size\": vars.fontSize.small,\n      \"--line-height\": vars.lineHeight[\"6\"],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n  } as Record<string, Record<string, string>>,\n};\n\nexport const numberBadgeCSS = css({\n  display: \"inline-block\",\n  verticalAlign: \"middle\",\n  textAlign: \"center\",\n\n  // variant styles\n  backgroundColor: \"var(--background-color)\",\n  color: \"var(--color)\",\n\n  // size styles\n  padding: \"var(--padding)\",\n  minWidth: \"var(--min-width)\",\n  fontSize: \"var(--font-size)\",\n  lineHeight: \"var(--line-height)\",\n  fontWeight: \"var(--font-weight)\",\n\n  \"*:disabled > &\": {\n    backgroundColor: vars.semantic.color.surfaceSub,\n    color: vars.semantic.color.textDisabled,\n  },\n\n  borderRadius: vars.rounded.full,\n});\n","/** @jsxImportSource @emotion/react */\n\nimport type { CSSObject } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { CSSProperties } from \"react\";\nimport { cloneElement, useEffect, useRef } from \"react\";\nimport { Clay, Flex } from \"../../utilities\";\nimport { getValidChildren } from \"../../utils\";\nimport { tabListCSS } from \"./TabList.css\";\nimport { useTabs } from \"./TabList.hooks\";\nimport type { LegacyTabIndicatorStyle, LegacyTabListProps } from \"./TabList.types\";\n\nconst segmentTabIndicatorCSS = (type: LegacyTabListProps<string>[\"type\"]): CSSObject => {\n  switch (type) {\n    case \"raised\":\n      return {\n        backgroundColor: vars.semantic.color.actionSecondary,\n        boxShadow: vars.dropShadow.popover,\n      };\n\n    case \"secondary\":\n      return {\n        backgroundColor: vars.semantic.color.actionElevated,\n      };\n\n    case \"outlined\":\n      return {\n        border: `2px solid ${vars.semantic.color.actionPrimary}`,\n        backgroundColor: \"transparent\",\n      };\n\n    // primary\n    default:\n      return {\n        backgroundColor: vars.semantic.color.focus,\n      };\n  }\n};\n\nconst renderTabIndicator = ({\n  variant,\n  tabIndicatorStyle,\n  type,\n  background,\n}: Pick<LegacyTabListProps<string>, \"variant\" | \"type\" | \"background\"> & {\n  tabIndicatorStyle?: LegacyTabIndicatorStyle;\n}) => {\n  const commonStyle: CSSProperties = {\n    position: \"absolute\",\n    left: tabIndicatorStyle?.left,\n    width: tabIndicatorStyle?.width,\n    height: tabIndicatorStyle?.height,\n    transitionProperty: \"left, width\",\n    transitionTimingFunction: \"ease-out\",\n    ...(tabIndicatorStyle && {\n      transitionDuration: \"0.3s\",\n    }),\n  };\n\n  switch (variant) {\n    case \"segment\":\n      return (\n        <Clay\n          native={{\n            \"data-clay-tabs-indicator\": true,\n          }}\n          {...commonStyle}\n          bottom={background ? vars.spacing[1] : 0}\n          backgroundColor={vars.semantic.color.focus}\n          borderRadius={vars.rounded.small}\n          sx={segmentTabIndicatorCSS(type)}\n        />\n      );\n\n    case \"underline\":\n      return (\n        <Clay\n          native={{\n            \"data-clay-tabs-indicator\": true,\n          }}\n          {...commonStyle}\n          bottom={0}\n          height=\"2px\"\n          backgroundColor={vars.semantic.color.focus}\n          borderRadius=\"50px\"\n        />\n      );\n\n    default:\n      return null;\n  }\n};\n\n/**\n * @deprecated Use `Tabs` instead.\n */\nexport const LegacyTabList = <T extends string>({\n  children,\n  variant,\n  size = \"medium\",\n  direction = \"horizontal\",\n  background,\n  fullWidth,\n  type,\n  activeValue,\n  onChangeValue,\n  sx,\n}: LegacyTabListProps<T>) => {\n  const { getTabProps, setValue, tabIndicatorStyle, value } = useTabs({\n    defaultValue: activeValue ?? (\"0\" as T),\n  });\n\n  useEffect(() => {\n    if (activeValue) setValue(activeValue);\n  }, [activeValue, setValue]);\n\n  const onChangeValueRef = useRef<LegacyTabListProps<T>[\"onChangeValue\"]>();\n  onChangeValueRef.current = onChangeValue;\n  useEffect(() => {\n    onChangeValueRef.current?.(value);\n  }, [value]);\n\n  const renderTabs = () => {\n    const tabs = getValidChildren(children).map((child, index) => {\n      const value = child.props.value ?? index.toString();\n\n      return cloneElement(child, {\n        ...getTabProps(value, index),\n        variant,\n      });\n    });\n\n    return tabs;\n  };\n\n  return (\n    <Flex\n      display={fullWidth ? \"flex\" : \"inline-flex\"}\n      width={fullWidth ? \"100%\" : \"fit-content\"}\n      position=\"relative\"\n      native={{\n        role: \"tablist\",\n      }}\n      flexDirection={direction === \"horizontal\" ? \"row\" : \"column\"}\n      css={[tabListCSS({ variant, size, background, type, fullWidth }), sx]}\n    >\n      {renderTabIndicator({ variant, tabIndicatorStyle, type, background })}\n\n      {renderTabs()}\n    </Flex>\n  );\n};\n","import type { CSSObject } from \"@emotion/react\";\nimport { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { LegacyTabListProps } from \"./TabList.types\";\n\nconst getPaddingForSquared = (size: LegacyTabListProps<string>[\"size\"]) => {\n  switch (size) {\n    case \"small\":\n      return `${vars.spacing[1]} ${vars.spacing[3]}`;\n\n    case \"large\":\n      return `${vars.spacing[3]} ${vars.spacing[4]}`;\n\n    // medium\n    default:\n      return `${vars.spacing[2]} ${vars.spacing[3]}`;\n  }\n};\n\nconst getStyleForUnderLine = (size: LegacyTabListProps<string>[\"size\"]) => {\n  switch (size) {\n    // underline은 small 을 지원하지 않습니다.\n    case \"small\":\n      return {};\n\n    case \"large\":\n      return {\n        gap: vars.spacing[4],\n        ...vars.semantic.typography[\"label-large\"],\n      };\n\n    case \"xlarge\":\n      return {\n        gap: vars.spacing[5],\n        ...vars.semantic.typography[\"label-xlarge-bold\"],\n      };\n\n    case \"2xlarge\":\n      return {\n        gap: vars.spacing[6],\n        ...vars.semantic.typography[\"label-3xlarge-bold\"],\n      };\n\n    // medium\n    default:\n      return {\n        gap: vars.spacing[3],\n        ...vars.semantic.typography[\"label-medium\"],\n      };\n  }\n};\n\nconst segmentCSSBySize = (size: LegacyTabListProps<string>[\"size\"]): CSSObject => {\n  switch (size) {\n    case \"small\":\n      return {\n        paddingTop: vars.spacing[1],\n        paddingBottom: vars.spacing[1],\n        minWidth: \"54px\",\n      };\n\n    case \"large\":\n      return {\n        paddingTop: vars.spacing[\"25\"],\n        paddingBottom: vars.spacing[\"25\"],\n        minWidth: \"64px\",\n      };\n\n    // medium\n    default:\n      return {\n        paddingTop: vars.spacing[\"15\"],\n        paddingBottom: vars.spacing[\"15\"],\n        minWidth: \"60px\",\n      };\n  }\n};\n\nconst segmentActiveColorByType = (type: LegacyTabListProps<string>[\"type\"]) => {\n  switch (type) {\n    case \"raised\":\n      return vars.semantic.color.text;\n\n    case \"outlined\":\n      return vars.semantic.color.textPrimary;\n\n    // primary, secondary\n    default:\n      return vars.semantic.color.textOn;\n  }\n};\n\nexport const tabListCSS = ({\n  variant,\n  size,\n  background,\n  type,\n  fullWidth,\n}: Pick<LegacyTabListProps<string>, \"variant\" | \"size\" | \"background\" | \"type\" | \"fullWidth\">) => {\n  switch (variant) {\n    case \"segment\":\n      return css({\n        backgroundColor: background ? vars.semantic.color.surfaceSub : \"transparent\",\n        padding: background ? vars.spacing[1] : 0,\n        borderRadius: vars.rounded.medium,\n\n        '[role=\"tab\"]': {\n          ...vars.semantic.typography[\"label-medium-bold\"],\n          ...segmentCSSBySize(size),\n\n          paddingLeft: vars.spacing[3],\n          paddingRight: vars.spacing[3],\n          gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n          transition: \"color 0.3s ease-out\",\n          color: vars.semantic.color.textSecondary,\n          flex: fullWidth ? 1 : \"auto\",\n\n          '&:not([aria-disabled=\"true\"])[aria-selected=\"true\"]': {\n            color: segmentActiveColorByType(type),\n          },\n\n          '&:not([aria-selected=\"true\"], :active, [aria-disabled=\"true\"]):hover': {\n            color: vars.semantic.color.textSecondaryHover,\n          },\n        },\n      });\n    case \"squared\":\n      return css({\n        gap: vars.spacing[size === \"large\" ? \"15\" : 1],\n\n        '[role=\"tab\"]': {\n          ...vars.semantic.typography[`label-${size === \"large\" ? \"large\" : \"medium\"}`],\n\n          flex: fullWidth ? 1 : \"auto\",\n\n          padding: getPaddingForSquared(size),\n          gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n          transition: \"background-color 0.3s ease-out\",\n\n          '&:not([aria-disabled=\"true\"])[aria-selected=\"true\"]': {\n            backgroundColor: vars.semantic.color.actionPrimary,\n            color: vars.semantic.color.textInverse,\n          },\n\n          '&:not([aria-disabled=\"true\"], [aria-selected=\"true\"]):active': {\n            backgroundColor: vars.semantic.color.actionSecondaryPressed,\n          },\n\n          '&:not([aria-selected=\"true\"], :active, [aria-disabled=\"true\"]):hover': {\n            backgroundColor: vars.semantic.color.actionSecondaryHover,\n            '& [data-clay-badge-on=\"false\"]': {\n              backgroundColor: vars.semantic.color.actionPrimaryDisabled,\n            },\n          },\n\n          '&[aria-disabled=\"true\"]': {\n            backgroundColor: \"transparent\",\n            color: vars.semantic.color.textDisabled,\n            cursor: \"not-allowed\",\n          },\n\n          borderRadius: vars.rounded[size === \"small\" ? \"small\" : \"medium\"],\n        },\n      });\n    // text tab\n    default:\n      return css({\n        gap: vars.spacing[size === \"medium\" ? 3 : 4],\n\n        ...getStyleForUnderLine(size),\n\n        '[role=\"tab\"]': {\n          flex: fullWidth ? 1 : \"auto\",\n\n          padding: `${vars.spacing[size === \"medium\" ? \"2\" : \"3\"]} 0`,\n          gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n          transition: \"color 0.3s ease-out\",\n          color: vars.semantic.color.textSub,\n\n          '&:not([aria-disabled=\"true\"])[aria-selected=\"true\"]': {\n            color: vars.semantic.color.text,\n          },\n\n          '&:not([aria-selected=\"true\"], :active, [aria-disabled=\"true\"]):hover': {\n            color: vars.semantic.color.text,\n          },\n\n          '&[aria-disabled=\"true\"]': {\n            color: vars.semantic.color.textDisabled,\n            cursor: \"not-allowed\",\n          },\n        },\n      });\n  }\n};\n","import debounce from \"lodash.debounce\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { LegacyTabIndicatorStyle } from \"./TabList.types\";\n\nconst useTabListIndicatorStyle = (activeTab: HTMLElement | null) => {\n  const [tabIndicatorStyle, setTabIndicatorStyle] = useState<LegacyTabIndicatorStyle>();\n\n  const getActiveTabOffset = useCallback(() => {\n    if (!activeTab) return undefined;\n\n    return {\n      width: activeTab.offsetWidth,\n      left: activeTab.offsetLeft,\n      height: activeTab.offsetHeight,\n    };\n  }, [activeTab]);\n\n  useEffect(() => {\n    setTabIndicatorStyle(getActiveTabOffset);\n  }, [getActiveTabOffset]);\n\n  useEffect(() => {\n    const debouncedSetTabIndicatorStyle = debounce(() => {\n      setTabIndicatorStyle(getActiveTabOffset);\n    }, 100);\n\n    window.addEventListener(\"resize\", debouncedSetTabIndicatorStyle);\n\n    return () => {\n      window.removeEventListener(\"resize\", debouncedSetTabIndicatorStyle);\n      debouncedSetTabIndicatorStyle.cancel();\n    };\n  }, [getActiveTabOffset]);\n\n  return tabIndicatorStyle;\n};\n\nexport const useTabs = <T extends string>(props: { defaultValue: T }) => {\n  const [value, setValue] = useState<T>(props?.defaultValue);\n  const tabRefObject = useRef<{ value: T; ref: HTMLElement }[]>([]);\n  const [activeTabRef, setActiveTabRef] = useState<HTMLElement | null>(null);\n  const tabIndicatorStyle = useTabListIndicatorStyle(activeTabRef);\n\n  useEffect(() => {\n    const activeIndex = tabRefObject.current.findIndex((tab) => tab.value === value);\n    setActiveTabRef(tabRefObject.current[activeIndex]?.ref ?? null);\n  }, [value]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const activeIndex = tabRefObject.current.findIndex((tab) => tab.value === value);\n      if (activeIndex === -1) return;\n\n      const activeTab = tabRefObject.current[activeIndex];\n      const isClayTabActive =\n        document.activeElement?.role === \"tab\" &&\n        document.activeElement.id === `clay-tab-${activeTab.value}`;\n\n      if (!isClayTabActive) return;\n\n      const tabKeyList = tabRefObject.current.map((tab) => tab.value);\n\n      const focusNextTab = (nextKey: string) => {\n        document.getElementById(`clay-tab-${nextKey}`)?.focus();\n      };\n\n      const move = (step: number) => {\n        const len = tabKeyList.length;\n        const nextKey = tabKeyList[(((activeIndex + step) % len) + len) % len];\n        setValue(nextKey);\n        focusNextTab(nextKey);\n      };\n\n      switch (event.key) {\n        case \"ArrowLeft\":\n          move(-1);\n          break;\n        case \"ArrowRight\":\n          move(1);\n          break;\n        case \"Home\":\n          focusNextTab(tabKeyList[0]);\n          break;\n        case \"End\":\n          focusNextTab(tabKeyList[tabKeyList.length - 1]);\n          break;\n\n        default:\n          break;\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [value]);\n\n  const getTabProps = (tabValue: T, index: number) => ({\n    key: tabValue,\n    id: tabValue,\n    active: value === tabValue,\n    ref: (ref: HTMLButtonElement) => {\n      tabRefObject.current[index] = { value: tabValue, ref };\n    },\n    onClick: () => {\n      setValue(tabValue);\n    },\n    value,\n  });\n\n  return {\n    value,\n    setValue,\n    getTabProps,\n    tabIndicatorStyle,\n  };\n};\n","/** @jsxImportSource @emotion/react */\n\nimport { Fragment, useEffect, useState } from \"react\";\nimport { match } from \"ts-pattern\";\nimport { Flex } from \"../../utilities\";\nimport { getValidChildren } from \"../../utils\";\nimport { LegacyTabList } from \"../TabList\";\nimport type { LegacyTabsProps } from \"./Tabs.types\";\n\nconst tabDirectionMap = {\n  \"vertical-rl\": \"row-reverse\",\n  \"vertical-lr\": \"row\",\n  horizontal: \"column\",\n} as const;\n\n/** @deprecated Tabs 를 사용해주세요 */\nexport const LegacyTabs = <T extends string>({\n  children,\n  activeValue,\n  size = \"medium\",\n  direction = \"horizontal\",\n  background = false,\n  variant,\n  onChangeValue,\n  tabPanelStyle,\n  tabListStyle,\n  fullWidth = false,\n  type = \"primary\",\n}: LegacyTabsProps<T>) => {\n  const [activeKey, setActiveKey] = useState<T>(activeValue ?? (\"0\" as T));\n\n  useEffect(() => {\n    if (activeValue) setActiveKey(activeValue);\n  }, [activeValue]);\n\n  useEffect(() => {\n    if (onChangeValue) onChangeValue(activeKey);\n  }, [activeKey, onChangeValue]);\n\n  const getTabPanels = () => {\n    const panels = getValidChildren(children).map((child, index) => {\n      const value = child.props.value ?? index.toString();\n      const isActive = value === activeKey;\n      const isPreRender = child.props.preRender;\n\n      if (isActive && child.props.children)\n        return (\n          <div\n            key={value}\n            id={`clay-tabpanel-${value}`}\n            role=\"tabpanel\"\n            aria-labelledby={`tab-${value}`}\n            tabIndex={0}\n            css={tabPanelStyle}\n          >\n            {child.props.children}\n          </div>\n        );\n\n      if (isPreRender)\n        return (\n          <div\n            key={value}\n            id={`clay-tabpanel-${value}`}\n            role=\"tabpanel\"\n            aria-labelledby={`tab-${value}`}\n            aria-hidden\n            tabIndex={-1}\n            css={{ display: \"none\", ...tabPanelStyle }}\n          >\n            {child.props.children}\n          </div>\n        );\n\n      return <Fragment key={value} />;\n    });\n\n    return panels;\n  };\n\n  const tabListProps = match(variant)\n    .with(\"segment\", () => ({ variant, size, fullWidth, background, type }))\n    .otherwise(() => ({ variant, size, fullWidth }));\n\n  return (\n    <Flex flexDirection={tabDirectionMap[direction]}>\n      <LegacyTabList\n        direction={direction === \"horizontal\" ? \"horizontal\" : \"vertical\"}\n        activeValue={activeKey}\n        onChangeValue={setActiveKey}\n        sx={tabListStyle}\n        {...tabListProps}\n      >\n        {children}\n      </LegacyTabList>\n\n      {getTabPanels()}\n    </Flex>\n  );\n};\n"]}