@teamturing/react-kit 2.19.7 → 2.19.9

package/dist/core/Pill/index.d.ts

@@ -1,17 +1,19 @@
 import { ComponentType, ElementType, HTMLAttributes, ReactNode, SVGProps, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { ResponsiveValue } from 'styled-system';
 import { SxProp } from '../../utils/styled-system';
+type PillSizeType = 'm';
+type PillVariantType = 'outlined' | 'secondary';
 type Props = {
     /**
      * 크기를 정의합니다.
      * 반응형 디자인이 적용됩니다.
      */
-    size?: ResponsiveValue<'m'>;
+    size?: ResponsiveValue<PillSizeType>;
     /**
      * 색을 정의합니다.
      * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
      */
-    variant?: ResponsiveValue<'outlined'>;
+    variant?: ResponsiveValue<PillVariantType>;
     /**
      *
      */
@@ -43,7 +45,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
      * 색을 정의합니다.
      * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
      */
-    variant?: ResponsiveValue<"outlined"> | undefined;
+    variant?: ResponsiveValue<PillVariantType> | undefined;
     /**
      *
      */

package/dist/index.js

@@ -1554,6 +1554,19 @@ const SvgCaretUp = props => /*#__PURE__*/React__namespace.createElement("svg", _
   d: "m12.708 8.294 5.999 5.997c.63.63.184 1.707-.707 1.707H6.003c-.891 0-1.337-1.077-.707-1.707l5.998-5.997a1 1 0 0 1 1.414 0Z"
 }));
 
+const SvgCart = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M7.248 5.9a6.69 6.69 0 0 1 .643-1.574C8.617 3.066 9.885 2 11.871 2c1.987 0 3.255 1.066 3.98 2.326.291.506.5 1.047.644 1.574h2.437a1 1 0 0 1 .998.938l.808 12.937a2 2 0 0 1-1.996 2.125H5a2 2 0 0 1-1.996-2.125l.809-12.937A1 1 0 0 1 4.81 5.9h2.437Zm1.888 0c.087-.233.191-.46.315-.676.474-.823 1.207-1.424 2.42-1.424 1.214 0 1.946.6 2.42 1.424.124.215.228.443.315.676h-5.47Z",
+  clipRule: "evenodd"
+}));
+
 const SvgChatBubble = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -1728,6 +1741,25 @@ const SvgChevronDown = props => /*#__PURE__*/React__namespace.createElement("svg
   clipRule: "evenodd"
 }));
 
+const SvgChevronDownTwo = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M20.221 3.37a1.346 1.346 0 0 1-.396.954l-6.75 6.75a1.35 1.35 0 0 1-1.91 0l-6.75-6.75a1.35 1.35 0 1 1 1.91-1.908l5.796 5.795 5.795-5.795a1.35 1.35 0 0 1 2.305.954Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M20.221 13.37a1.346 1.346 0 0 1-.396.955l-6.75 6.75a1.35 1.35 0 0 1-1.91 0l-6.75-6.75a1.35 1.35 0 1 1 1.91-1.909l5.796 5.795 5.795-5.794a1.35 1.35 0 0 1 2.305.954Z",
+  clipRule: "evenodd",
+  opacity: 0.6
+}));
+
 const SvgChevronLeft = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -4232,6 +4264,7 @@ var icons = /*#__PURE__*/Object.freeze({
   CaretLeftIcon: SvgCaretLeft,
   CaretRightIcon: SvgCaretRight,
   CaretUpIcon: SvgCaretUp,
+  CartIcon: SvgCart,
   ChatBubbleBadgeColorIcon: SvgChatBubbleBadgeColor,
   ChatBubbleCorrectColorIcon: SvgChatBubbleCorrectColor,
   ChatBubbleCorrectIcon: SvgChatBubbleCorrect,
@@ -4243,6 +4276,7 @@ var icons = /*#__PURE__*/Object.freeze({
   CheckInCircleIcon: SvgCheckInCircle,
   CheckInCircleLineIcon: SvgCheckInCircleLine,
   ChevronDownIcon: SvgChevronDown,
+  ChevronDownTwoIcon: SvgChevronDownTwo,
   ChevronLeftIcon: SvgChevronLeft,
   ChevronRightIcon: SvgChevronRight,
   ChevronRightTwoIcon: SvgChevronRightTwo,
@@ -4397,11 +4431,67 @@ var icons = /*#__PURE__*/Object.freeze({
   YoutubeIcon: SvgYoutube
 });
 
+/**
+ * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
+ */
+const forcePixelValue = value => {
+  return typeof value === 'string' ? value : `${value}px`;
+};
+
+const isArray = value => Array.isArray(value);
+
+const isFunction = value => typeof value === 'function';
+
+const isNullable = value => value === null || value === undefined;
+
 /**
  * 아무 행위도 하지 않는 함수입니다.
  */
 function noop$2() {}
 
+const scrollIntoView = ({
+  childrenRef,
+  scrollContainerRef,
+  options = {
+    behavior: 'smooth',
+    direction: 'vertical',
+    offset: 0
+  }
+}) => {
+  if (!isNullable(scrollContainerRef)) {
+    const startSide = options.direction === 'vertical' ? 'top' : 'left';
+    const endSide = options.direction === 'vertical' ? 'bottom' : 'right';
+    const scrollSide = options.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+    const {
+      [startSide]: childrenStart,
+      [endSide]: childrenEnd
+    } = childrenRef.getBoundingClientRect();
+    const {
+      [startSide]: scrollContainerStart,
+      [endSide]: scrollContainerEnd
+    } = scrollContainerRef.getBoundingClientRect();
+    const isChildrenStartAboveScrollContainer = childrenStart < scrollContainerStart;
+    const isChildrenBottomBelowScrollContainer = childrenEnd > scrollContainerEnd;
+    if (isChildrenStartAboveScrollContainer) {
+      const scrollDistance = childrenStart - scrollContainerStart + scrollContainerRef[scrollSide] - (options.offset || 0);
+      scrollContainerRef.scrollTo({
+        behavior: options.behavior,
+        [startSide]: scrollDistance
+      });
+    } else if (isChildrenBottomBelowScrollContainer) {
+      const scrollDistance = childrenEnd - scrollContainerEnd + scrollContainerRef[scrollSide] + (options.offset || 0);
+      scrollContainerRef.scrollTo({
+        behavior: options.behavior,
+        [startSide]: scrollDistance
+      });
+    }
+  } else {
+    childrenRef.scrollIntoView({
+      behavior: options.behavior
+    });
+  }
+};
+
 var reactIs = {exports: {}};
 
 var reactIs_production_min = {};
@@ -4743,15 +4833,6 @@ if (process.env.NODE_ENV === 'production') {
 }
 var reactIsExports = reactIs.exports;
 
-/**
- * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
- */
-const forcePixelValue = value => {
-  return typeof value === 'string' ? value : `${value}px`;
-};
-
-const isNullable = value => value === null || value === undefined;
-
 const device = {
   deviceDesktop: 1280,
   deviceTablet: 900,
@@ -5375,10 +5456,6 @@ const typography = {
   }
 };
 
-const isArray = value => Array.isArray(value);
-
-const isFunction = value => typeof value === 'function';
-
 const View = styled__default.default.div`
   ${compose(layout$1, color$2, flexbox, background, border, position, shadow$1)}
   ${sx}
@@ -22306,6 +22383,27 @@ const BasePill = styled__default.default(UnstyledButton)`
           color: theme.colors['icon/disabled']
         }
       } : {})
+    },
+    secondary: {
+      'backgroundColor': theme.colors['bg/secondary'],
+      'color': theme.colors['text/primary'],
+      '& svg': {
+        color: theme.colors['icon/primary']
+      },
+      '&:hover': {
+        backgroundColor: theme.colors['bg/secondary/hovered']
+      },
+      '&:active': {
+        backgroundColor: theme.colors['bg/secondary/pressed']
+      },
+      ...(disabled ? {
+        'cursor': 'not-allowed',
+        'backgroundColor': theme.colors['bg/disabled'],
+        'color': theme.colors['text/disabled'],
+        '& svg': {
+          color: theme.colors['icon/disabled']
+        }
+      } : {})
     }
   }
 })}
@@ -23161,49 +23259,6 @@ const useResize = resizeCallback => {
   }, []);
 };
 
-const scrollIntoView = ({
-  childrenRef,
-  scrollContainerRef,
-  options = {
-    behavior: 'smooth',
-    direction: 'vertical',
-    offset: 0
-  }
-}) => {
-  if (!isNullable(scrollContainerRef)) {
-    const startSide = options.direction === 'vertical' ? 'top' : 'left';
-    const endSide = options.direction === 'vertical' ? 'bottom' : 'right';
-    const scrollSide = options.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
-    const {
-      [startSide]: childrenStart,
-      [endSide]: childrenEnd
-    } = childrenRef.getBoundingClientRect();
-    const {
-      [startSide]: scrollContainerStart,
-      [endSide]: scrollContainerEnd
-    } = scrollContainerRef.getBoundingClientRect();
-    const isChildrenStartAboveScrollContainer = childrenStart < scrollContainerStart;
-    const isChildrenBottomBelowScrollContainer = childrenEnd > scrollContainerEnd;
-    if (isChildrenStartAboveScrollContainer) {
-      const scrollDistance = childrenStart - scrollContainerStart + scrollContainerRef[scrollSide] - (options.offset || 0);
-      scrollContainerRef.scrollTo({
-        behavior: options.behavior,
-        [startSide]: scrollDistance
-      });
-    } else if (isChildrenBottomBelowScrollContainer) {
-      const scrollDistance = childrenEnd - scrollContainerEnd + scrollContainerRef[scrollSide] + (options.offset || 0);
-      scrollContainerRef.scrollTo({
-        behavior: options.behavior,
-        [startSide]: scrollDistance
-      });
-    }
-  } else {
-    childrenRef.scrollIntoView({
-      behavior: options.behavior
-    });
-  }
-};
-
 const TabItem = ({
   children,
   leadingIcon: LeadingIcon,

package/esm/core/ActionList/ActionListItem.js

@@ -1,11 +1,11 @@
 import { useContext, useCallback } from 'react';
 import SvgCheck from '../../packages/icons/esm/Check.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import { noop } from '../../packages/utils/esm/noop.js';
 import { r as reactIsExports } from '../../node_modules/react-is/index.js';
 import styled, { css } from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
-import { isNullable } from '../../utils/isNullable.js';
 import { sx } from '../../utils/styled-system/index.js';
 import Grid from '../Grid/index.js';
 import StyledIcon from '../StyledIcon/index.js';

package/esm/core/ActionList/ActionListSectionHeader.js

@@ -1,5 +1,5 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import styled from 'styled-components';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 

package/esm/core/Avatar/index.js

@@ -1,7 +1,7 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import Image from '../Image/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';

package/esm/core/Breadcrumbs/BreadcrumbsItem.js

@@ -1,6 +1,6 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { useRef, useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import Tooltip from '../Tooltip/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 

package/esm/core/Breadcrumbs/index.js

@@ -1,6 +1,6 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { Children, useState } from 'react';
 import styled from 'styled-components';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import BreadcrumbsItem from './BreadcrumbsItem.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 

package/esm/core/Checkbox/index.js

@@ -1,8 +1,8 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
 import useSafeLayoutEffect from '../../hook/useSafeLayoutEffect.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 

package/esm/core/CounterBadge/index.js

@@ -1,6 +1,6 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';

package/esm/core/Datagrid/DatagridBody.js

@@ -1,5 +1,5 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import styled from 'styled-components';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 

package/esm/core/Datagrid/DatagridHeader.js

@@ -1,6 +1,6 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { r as reactIsExports } from '../../node_modules/react-is/index.js';
 import styled from 'styled-components';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import View from '../View/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';

package/esm/core/Datagrid/DatagridSubheader.js

@@ -1,5 +1,5 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import styled from 'styled-components';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 

package/esm/core/Datagrid/index.js

@@ -1,6 +1,6 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import styled from 'styled-components';
 import useRelocation from '../../hook/useRelocation.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import DatagridBody from './DatagridBody.js';
 import DatagridCell from './DatagridCell.js';

package/esm/core/DescriptionList/index.js

@@ -1,4 +1,4 @@
-import { isNullable } from '../../utils/isNullable.js';
+import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import Grid from '../Grid/index.js';
 import ItemList from '../ItemList/index.js';
 import StyledIcon from '../StyledIcon/index.js';

package/esm/core/DialogHandler/index.js

@@ -1,6 +1,6 @@
+import { isFunction } from '../../packages/utils/esm/isFunction.js';
 import { Children, cloneElement } from 'react';
 import useDialogHandler from '../../hook/useDialogHandler.js';
-import { isFunction } from '../../utils/isFunction.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
 const DialogHandler = ({

package/esm/core/FormControl/FormControlLabel.js

@@ -1,6 +1,6 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { useContext } from 'react';
 import styled from 'styled-components';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import View from '../View/index.js';
 import { FormControlContext } from './index.js';

package/esm/core/Grid/index.js

@@ -1,11 +1,11 @@
 import space from '../../packages/token-studio/esm/token/space/index.js';
 import '../../packages/token-studio/esm/token/typography/index.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { isArray } from '../../packages/utils/esm/isArray.js';
+import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
-import { isArray } from '../../utils/isArray.js';
-import { isNullable } from '../../utils/isNullable.js';
 import View from '../View/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';

package/esm/core/Overlay/index.js

@@ -1,7 +1,7 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 import { maxHeight } from '../../node_modules/styled-system/dist/index.esm.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';

package/esm/core/OverlayPopper/index.js

@@ -1,11 +1,11 @@
 import { useFloating } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 import space from '../../packages/token-studio/esm/token/space/index.js';
 import '../../packages/token-studio/esm/token/typography/index.js';
+import { isFunction } from '../../packages/utils/esm/isFunction.js';
 import { Children, cloneElement } from 'react';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import useFocusZone from '../../hook/useFocusZone.js';
 import useToggleHandler from '../../hook/useToggleHandler.js';
-import { isFunction } from '../../utils/isFunction.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import { offset, flip, shift } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';

package/esm/core/OverlaySelectInput/index.js

@@ -1,12 +1,12 @@
 import { forwardRef } from 'react';
 import SvgChevronDown from '../../packages/icons/esm/ChevronDown.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { isFunction } from '../../packages/utils/esm/isFunction.js';
+import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import { noop } from '../../packages/utils/esm/noop.js';
 import { r as reactIsExports } from '../../node_modules/react-is/index.js';
 import styled, { css } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
-import { isFunction } from '../../utils/isFunction.js';
-import { isNullable } from '../../utils/isNullable.js';
 import Overlay from '../Overlay/index.js';
 import OverlayPopper from '../OverlayPopper/index.js';
 import StyledIcon from '../StyledIcon/index.js';

package/esm/core/Pagination/index.js

@@ -1,10 +1,10 @@
 import { useCallback, Fragment } from 'react';
 import SvgChevronLeft from '../../packages/icons/esm/ChevronLeft.js';
 import SvgChevronRight from '../../packages/icons/esm/ChevronRight.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { noop } from '../../packages/utils/esm/noop.js';
 import styled, { css } from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import UnstyledButton from '../_UnstyledButton.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';

package/esm/core/Pill/index.js

@@ -1,10 +1,10 @@
 import { forwardRef, useCallback } from 'react';
 import SvgClose from '../../packages/icons/esm/Close.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import { r as reactIsExports } from '../../node_modules/react-is/index.js';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
-import { isNullable } from '../../utils/isNullable.js';
 import { sx } from '../../utils/styled-system/index.js';
 import UnstyledButton from '../_UnstyledButton.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -168,6 +168,27 @@ const BasePill = styled(UnstyledButton)`
           color: theme.colors['icon/disabled']
         }
       } : {})
+    },
+    secondary: {
+      'backgroundColor': theme.colors['bg/secondary'],
+      'color': theme.colors['text/primary'],
+      '& svg': {
+        color: theme.colors['icon/primary']
+      },
+      '&:hover': {
+        backgroundColor: theme.colors['bg/secondary/hovered']
+      },
+      '&:active': {
+        backgroundColor: theme.colors['bg/secondary/pressed']
+      },
+      ...(disabled ? {
+        'cursor': 'not-allowed',
+        'backgroundColor': theme.colors['bg/disabled'],
+        'color': theme.colors['text/disabled'],
+        '& svg': {
+          color: theme.colors['icon/disabled']
+        }
+      } : {})
     }
   }
 })}

package/esm/core/Select/SelectOption.js

@@ -1,5 +1,5 @@
+import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import styled from 'styled-components';
-import { isNullable } from '../../utils/isNullable.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
 const SelectOption = ({

package/esm/core/Select/index.js

@@ -1,11 +1,11 @@
 import { forwardRef, useState } from 'react';
 import SvgChevronDown from '../../packages/icons/esm/ChevronDown.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { isFunction } from '../../packages/utils/esm/isFunction.js';
+import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import { r as reactIsExports } from '../../node_modules/react-is/index.js';
 import styled, { css } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
-import { isFunction } from '../../utils/isFunction.js';
-import { isNullable } from '../../utils/isNullable.js';
 import StyledIcon from '../StyledIcon/index.js';
 import View from '../View/index.js';
 import SelectOption from './SelectOption.js';

package/esm/core/Stack/index.js

@@ -1,9 +1,9 @@
 import space from '../../packages/token-studio/esm/token/space/index.js';
 import '../../packages/token-studio/esm/token/typography/index.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import View from '../View/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';

package/esm/core/Tab/TabItem.js

@@ -1,8 +1,8 @@
 import typography from '../../packages/token-studio/esm/token/typography/index.js';
+import { scrollIntoView } from '../../packages/utils/esm/scrollIntoView.js';
 import { useRef, useContext } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
-import { scrollIntoView } from '../../utils/scrollIntoView.js';
 import View from '../View/index.js';
 import UnstyledButton from '../_UnstyledButton.js';
 import { TabContext } from './index.js';

package/esm/core/Tab/index.js

@@ -4,9 +4,9 @@ import SvgChevronRight from '../../packages/icons/esm/ChevronRight.js';
 import elevation from '../../packages/token-studio/esm/token/elevation/index.js';
 import gradient from '../../packages/token-studio/esm/token/gradient/index.js';
 import '../../packages/token-studio/esm/token/typography/index.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import throttle from '../../node_modules/lodash.throttle/index.js';
 import useResize from '../../hook/useResize.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import IconButton from '../IconButton/index.js';
 import View from '../View/index.js';
 import TabItem from './TabItem.js';

package/esm/core/TextInput/TextInputTrailingAction.js

@@ -1,6 +1,6 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import UnstyledButton from '../_UnstyledButton.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';

package/esm/core/TextInput/index.js

@@ -1,12 +1,12 @@
 import color from '../../packages/token-studio/esm/token/color/index.js';
 import '../../packages/token-studio/esm/token/typography/index.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { isFunction } from '../../packages/utils/esm/isFunction.js';
+import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import { forwardRef, cloneElement } from 'react';
 import { r as reactIsExports } from '../../node_modules/react-is/index.js';
 import styled, { css } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
-import { isFunction } from '../../utils/isFunction.js';
-import { isNullable } from '../../utils/isNullable.js';
 import View from '../View/index.js';
 import TextInputTrailingAction from './TextInputTrailingAction.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';

package/esm/core/Textarea/index.js

@@ -1,8 +1,8 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { isFunction } from '../../packages/utils/esm/isFunction.js';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
-import { isFunction } from '../../utils/isFunction.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
 const Textarea = /*#__PURE__*/forwardRef(({

package/esm/core/Tooltip/index.js

@@ -1,5 +1,5 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import styled, { keyframes } from 'styled-components';
-import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 

package/esm/packages/icons/esm/Cart.js

@@ -0,0 +1,17 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgCart = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M7.248 5.9a6.69 6.69 0 0 1 .643-1.574C8.617 3.066 9.885 2 11.871 2c1.987 0 3.255 1.066 3.98 2.326.291.506.5 1.047.644 1.574h2.437a1 1 0 0 1 .998.938l.808 12.937a2 2 0 0 1-1.996 2.125H5a2 2 0 0 1-1.996-2.125l.809-12.937A1 1 0 0 1 4.81 5.9h2.437Zm1.888 0c.087-.233.191-.46.315-.676.474-.823 1.207-1.424 2.42-1.424 1.214 0 1.946.6 2.42 1.424.124.215.228.443.315.676h-5.47Z",
+  clipRule: "evenodd"
+}));
+
+export { SvgCart as default };

package/esm/packages/icons/esm/ChevronDownTwo.js

@@ -0,0 +1,23 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgChevronDownTwo = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M20.221 3.37a1.346 1.346 0 0 1-.396.954l-6.75 6.75a1.35 1.35 0 0 1-1.91 0l-6.75-6.75a1.35 1.35 0 1 1 1.91-1.908l5.796 5.795 5.795-5.795a1.35 1.35 0 0 1 2.305.954Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M20.221 13.37a1.346 1.346 0 0 1-.396.955l-6.75 6.75a1.35 1.35 0 0 1-1.91 0l-6.75-6.75a1.35 1.35 0 1 1 1.91-1.909l5.796 5.795 5.795-5.794a1.35 1.35 0 0 1 2.305.954Z",
+  clipRule: "evenodd",
+  opacity: 0.6
+}));
+
+export { SvgChevronDownTwo as default };

package/esm/packages/icons/esm/index.js

@@ -29,6 +29,7 @@ export { default as CaretDownIcon } from './CaretDown.js';
 export { default as CaretLeftIcon } from './CaretLeft.js';
 export { default as CaretRightIcon } from './CaretRight.js';
 export { default as CaretUpIcon } from './CaretUp.js';
+export { default as CartIcon } from './Cart.js';
 export { default as ChatBubbleIcon } from './ChatBubble.js';
 export { default as ChatBubbleBadgeColorIcon } from './ChatBubbleBadgeColor.js';
 export { default as ChatBubbleCorrectIcon } from './ChatBubbleCorrect.js';
@@ -40,6 +41,7 @@ export { default as CheckInCircleIcon } from './CheckInCircle.js';
 export { default as CheckInCircleColorIcon } from './CheckInCircleColor.js';
 export { default as CheckInCircleLineIcon } from './CheckInCircleLine.js';
 export { default as ChevronDownIcon } from './ChevronDown.js';
+export { default as ChevronDownTwoIcon } from './ChevronDownTwo.js';
 export { default as ChevronLeftIcon } from './ChevronLeft.js';
 export { default as ChevronRightIcon } from './ChevronRight.js';
 export { default as ChevronRightTwoIcon } from './ChevronRightTwo.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.19.7",
+  "version": "2.19.9",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -54,7 +54,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.2",
     "@primer/behaviors": "^1.3.6",
-    "@teamturing/icons": "^1.20.0",
+    "@teamturing/icons": "^1.21.0",
     "@teamturing/token-studio": "^1.1.8",
     "framer-motion": "^10.16.4",
     "lodash.debounce": "^4.0.8",
@@ -62,5 +62,5 @@
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "b4ae7f169a8281f95f95425f817bdf2968d32269"
+  "gitHead": "7f98d8f9387a726f605d7b5505a2df3a72d1e6ff"
 }

package/dist/utils/forcePixelValue.d.ts

@@ -1,6 +0,0 @@
-type CSSPixelValue = number | string;
-/**
- * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
- */
-export declare const forcePixelValue: (value: CSSPixelValue) => string;
-export {};

package/dist/utils/index.d.ts

@@ -1,4 +0,0 @@
-export { forcePixelValue } from './forcePixelValue';
-export { isArray } from './isArray';
-export { isFunction } from './isFunction';
-export { isNullable } from './isNullable';

package/dist/utils/isArray.d.ts

@@ -1 +0,0 @@
-export declare const isArray: (value: any) => value is any[];

package/dist/utils/isFunction.d.ts

@@ -1 +0,0 @@
-export declare const isFunction: (value: any) => value is (...args: any[]) => any;

package/dist/utils/isNullable.d.ts

@@ -1 +0,0 @@
-export declare const isNullable: (value: any) => value is null | undefined;

package/dist/utils/scrollIntoView.d.ts

@@ -1,11 +0,0 @@
-type Options = {
-    behavior?: ScrollBehavior;
-    direction?: 'horizontal' | 'vertical';
-    offset?: number;
-};
-export declare const scrollIntoView: ({ childrenRef, scrollContainerRef, options, }: {
-    childrenRef: HTMLElement;
-    scrollContainerRef?: HTMLElement | undefined;
-    options: Options;
-}) => void;
-export {};