@shoplflow/base 0.26.7 → 0.26.8

package/dist/index.d.cts

@@ -914,6 +914,13 @@ interface TagOptionProps extends SizeVariantProps<TagSizeVariantType>, StyleVari
 
 declare const Tag: ({ sizeVar, children, rightSource, leftSource, className, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
 
+interface TreeProps extends TreeOptionProps {
+}
+interface TreeOptionProps {
+}
+
+declare const Tree: ({ ...rest }: TreeProps) => react_jsx_runtime.JSX.Element;
+
 declare const IconSizeVariants: {
     readonly XS: "XS";
     readonly S: "S";
@@ -1076,6 +1083,56 @@ declare const Tooltip: {
     Content: ({ content, ...args }: TooltipContentProps) => react_jsx_runtime.JSX.Element;
 };
 
+declare const TabStyleVariants: {
+    readonly NORMAL: "NORMAL";
+    readonly INFO: "INFO";
+};
+declare const TabSizeVariants: {
+    readonly M: "M";
+    readonly L: "L";
+};
+declare type TabStyleVariantType = $Values<typeof TabStyleVariants>;
+declare type TabSizeVariantType = $Values<typeof TabSizeVariants>;
+interface TabsProps extends TabsOptionProps {
+    /**
+     * Tab은 Controlled Component입니다. onChange를 꼭 넘겨주세요
+     * @param tab
+     * @returns
+     */
+    onChange: (tab: string) => void;
+}
+interface TabsOptionProps extends ChildrenProps {
+    initialTab: string;
+}
+interface TabProps extends TabOptionProps {
+    value: string;
+    label: string;
+}
+interface TabOptionProps extends LeftAndRightNodeProps, StyleVariantProps<TabStyleVariantType>, SizeVariantProps<TabSizeVariantType>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    as?: React.ElementType;
+    activeColor?: ColorTokens;
+}
+interface TabStyledProps extends StyleVariantProps<TabStyleVariantType> {
+    as?: React.ElementType;
+    isActive: boolean;
+    isHover: boolean;
+}
+interface TabTextStyledProps extends TabStyledProps {
+    activeColor?: ColorTokens;
+}
+
+declare const Tabs: {
+    ({ children, initialTab, onChange }: TabsProps): react_jsx_runtime.JSX.Element;
+    Tab: ({ value, label, leftSource, rightSource, as, styleVar, sizeVar, onClick, activeColor, ...args }: TabProps) => react_jsx_runtime.JSX.Element;
+};
+
+declare type TabsContextType = {
+    activeTab: string | null;
+    setActiveTab: (tab: string) => void;
+};
+declare const TabsContext: React$1.Context<TabsContextType | null>;
+declare const useTabs: () => TabsContextType;
+
 interface PaginationProps extends PaginationOptionProps, HTMLAttributes<HTMLDivElement> {
 }
 interface PaginationOptionProps extends LeftAndRightNodeProps {
@@ -1122,4 +1179,4 @@ declare const Pagination: {
     SizeSelector: ({ data, pageSize, setPageSize }: PaginationSizeSelectorProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeOptionProps, TreeProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue, useTabs };

package/dist/index.d.ts

@@ -914,6 +914,13 @@ interface TagOptionProps extends SizeVariantProps<TagSizeVariantType>, StyleVari
 
 declare const Tag: ({ sizeVar, children, rightSource, leftSource, className, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
 
+interface TreeProps extends TreeOptionProps {
+}
+interface TreeOptionProps {
+}
+
+declare const Tree: ({ ...rest }: TreeProps) => react_jsx_runtime.JSX.Element;
+
 declare const IconSizeVariants: {
     readonly XS: "XS";
     readonly S: "S";
@@ -1076,6 +1083,56 @@ declare const Tooltip: {
     Content: ({ content, ...args }: TooltipContentProps) => react_jsx_runtime.JSX.Element;
 };
 
+declare const TabStyleVariants: {
+    readonly NORMAL: "NORMAL";
+    readonly INFO: "INFO";
+};
+declare const TabSizeVariants: {
+    readonly M: "M";
+    readonly L: "L";
+};
+declare type TabStyleVariantType = $Values<typeof TabStyleVariants>;
+declare type TabSizeVariantType = $Values<typeof TabSizeVariants>;
+interface TabsProps extends TabsOptionProps {
+    /**
+     * Tab은 Controlled Component입니다. onChange를 꼭 넘겨주세요
+     * @param tab
+     * @returns
+     */
+    onChange: (tab: string) => void;
+}
+interface TabsOptionProps extends ChildrenProps {
+    initialTab: string;
+}
+interface TabProps extends TabOptionProps {
+    value: string;
+    label: string;
+}
+interface TabOptionProps extends LeftAndRightNodeProps, StyleVariantProps<TabStyleVariantType>, SizeVariantProps<TabSizeVariantType>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    as?: React.ElementType;
+    activeColor?: ColorTokens;
+}
+interface TabStyledProps extends StyleVariantProps<TabStyleVariantType> {
+    as?: React.ElementType;
+    isActive: boolean;
+    isHover: boolean;
+}
+interface TabTextStyledProps extends TabStyledProps {
+    activeColor?: ColorTokens;
+}
+
+declare const Tabs: {
+    ({ children, initialTab, onChange }: TabsProps): react_jsx_runtime.JSX.Element;
+    Tab: ({ value, label, leftSource, rightSource, as, styleVar, sizeVar, onClick, activeColor, ...args }: TabProps) => react_jsx_runtime.JSX.Element;
+};
+
+declare type TabsContextType = {
+    activeTab: string | null;
+    setActiveTab: (tab: string) => void;
+};
+declare const TabsContext: React$1.Context<TabsContextType | null>;
+declare const useTabs: () => TabsContextType;
+
 interface PaginationProps extends PaginationOptionProps, HTMLAttributes<HTMLDivElement> {
 }
 interface PaginationOptionProps extends LeftAndRightNodeProps {
@@ -1122,4 +1179,4 @@ declare const Pagination: {
     SizeSelector: ({ data, pageSize, setPageSize }: PaginationSizeSelectorProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeOptionProps, TreeProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue, useTabs };

package/dist/index.js

@@ -1,7 +1,7 @@
 import * as React3 from 'react';
 import React3__default, { forwardRef, useRef, useState, useCallback, useEffect, createContext, useId, useContext, useMemo } from 'react';
 import styled6 from '@emotion/styled';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
@@ -2769,6 +2769,12 @@ var TagSizeVariants = {
   S: "S",
   M: "M"
 };
+var StyledTree = styled6.div``;
+var Tree = (_a) => {
+  var rest = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(StyledTree, __spreadProps(__spreadValues({}, rest), { "data-shoplflow": "Tree", children: "Tree" }));
+};
+var Tree_default = Tree;
 var StyledInput = styled6.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
@@ -3411,6 +3417,263 @@ var Tooltip = (_a) => {
 };
 Tooltip.Content = TooltipContent;
 var Tooltip_default = Tooltip;
+var TabsContext = createContext(null);
+var useTabs = () => {
+  const context = useContext(TabsContext);
+  if (context === null) {
+    throw new Error("useTabs should be used in Tabs");
+  }
+  return context;
+};
+var getHoverTabStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "INFO": {
+      return css`
+        ::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -2px;
+          height: 2px;
+          background: ${colorTokens.neutral500};
+        }
+      `;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+var getWrapperStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "INFO": {
+      return css`
+        padding-inline: 16px;
+      `;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+var getActiveTriggerStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "INFO": {
+      return css`
+        ::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -2px;
+          height: 2px;
+          background: #000;
+        }
+      `;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+var StyledTab = styled6.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 16px;
+  width: fit-content;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+
+  ${({ styleVar }) => styleVar && getWrapperStyleByStyleVar(styleVar)};
+
+  /* hover style */
+  ${({ isActive, isHover, styleVar }) => !isActive && isHover && styleVar && getHoverTabStyleByStyleVar(styleVar)}
+
+  /* active style */
+  ${({ isActive, styleVar }) => isActive && styleVar && getActiveTriggerStyleByStyleVar(styleVar)}
+`;
+var getTextStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "NORMAL": {
+      return css`
+        color: ${colorTokens.neutral400};
+      `;
+    }
+    case "INFO": {
+      return css`
+        color: ${colorTokens.neutral500};
+      `;
+    }
+  }
+};
+var getHoverTextStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "NORMAL": {
+      return css`
+        color: ${colorTokens.neutral500};
+      `;
+    }
+    case "INFO": {
+      return css`
+        color: ${colorTokens.neutral700};
+      `;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+var getActiveTextStyleByStyleVar = (styleVar, activeColor) => {
+  switch (styleVar) {
+    case "NORMAL": {
+      return css`
+        color: ${activeColor ? colorTokens[activeColor] : colorTokens.neutral700};
+      `;
+    }
+    case "INFO": {
+      return css`
+        color: ${colorTokens.neutral700};
+      `;
+    }
+    default: {
+      return css`
+        color: ${colorTokens.primary300};
+      `;
+    }
+  }
+};
+var StyledTabText = styled6(Text_default)`
+  cursor: pointer;
+
+  ${({ styleVar }) => styleVar && getTextStyleByStyleVar(styleVar)};
+
+  /* hover style */
+  ${({ isHover, styleVar, isActive }) => !isActive && isHover && styleVar && getHoverTextStyleByStyleVar(styleVar)}
+
+  /* active style */
+  ${({ isActive, styleVar, activeColor }) => isActive && styleVar && getActiveTextStyleByStyleVar(styleVar, activeColor)}
+`;
+var StyledIndicator = styled6(motion.div)`
+  position: absolute;
+  bottom: -2px;
+  left: 0px;
+  right: 0px;
+  height: 2px;
+  background-color: black;
+  width: 100%;
+`;
+var Indicator = ({ layoutId }) => {
+  return /* @__PURE__ */ jsx(StyledIndicator, { layoutId, transition: { duration: 0.2 } });
+};
+var Tab = (_a) => {
+  var _b = _a, {
+    value,
+    label,
+    leftSource,
+    rightSource,
+    as,
+    styleVar = "NORMAL",
+    sizeVar = "L",
+    onClick,
+    activeColor
+  } = _b, args = __objRest(_b, [
+    "value",
+    "label",
+    "leftSource",
+    "rightSource",
+    "as",
+    "styleVar",
+    "sizeVar",
+    "onClick",
+    "activeColor"
+  ]);
+  const { activeTab, setActiveTab } = useTabs();
+  const [isHover, setIsHover] = useState(false);
+  const isActive = value === activeTab;
+  const hoverHandler = useCallback(() => {
+    setIsHover(true);
+  }, []);
+  const unhoverHandler = useCallback(() => {
+    setIsHover(false);
+  }, []);
+  const clickHandler = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    setActiveTab(value);
+  };
+  let typography = "title1_700";
+  if (styleVar === "INFO") {
+    typography = "body1_700";
+  }
+  if (styleVar === "NORMAL" && sizeVar === "M") {
+    typography = "title2_700";
+  }
+  return /* @__PURE__ */ jsxs(
+    StyledTab,
+    __spreadProps(__spreadValues({
+      isActive,
+      as,
+      onClick: clickHandler,
+      onMouseOver: hoverHandler,
+      onMouseLeave: unhoverHandler,
+      onFocus: hoverHandler,
+      onBlur: unhoverHandler,
+      isHover,
+      styleVar
+    }, args), {
+      children: [
+        leftSource,
+        /* @__PURE__ */ jsx(
+          StyledTabText,
+          {
+            isHover,
+            lineClamp: 2,
+            typography: `${typography}`,
+            isActive,
+            activeColor,
+            styleVar,
+            children: label
+          }
+        ),
+        rightSource,
+        styleVar === "INFO" && isActive && /* @__PURE__ */ jsx(Indicator, { layoutId: "underline" })
+      ]
+    })
+  );
+};
+var Tabs = ({ children, initialTab, onChange }) => {
+  const [activeTab, setActiveTab] = useState(initialTab);
+  useEffect(() => {
+    if (!onChange || !activeTab) {
+      return;
+    }
+    onChange(activeTab);
+  }, [activeTab]);
+  return /* @__PURE__ */ jsx(
+    TabsContext.Provider,
+    {
+      value: {
+        activeTab,
+        setActiveTab
+      },
+      children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children }) })
+    }
+  );
+};
+Tabs.Tab = Tab;
+var Tabs_default = Tabs;
+
+// src/components/Tabs/Tabs.types.ts
+var TabStyleVariants = {
+  NORMAL: "NORMAL",
+  INFO: "INFO"
+};
+var TabSizeVariants = {
+  M: "M",
+  L: "L"
+};
 var PaginationWrapper = styled6.div`
   display: flex;
   align-items: center;
@@ -3581,6 +3844,6 @@ classnames/index.js:
   *)
 */
 
-export { Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MotionStack, MotionStackContainer, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, Tooltip_default as Tooltip, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MotionStack, MotionStackContainer, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, Tooltip_default as Tooltip, Tree_default as Tree, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue, useTabs };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map