@channel.io/bezier-react 1.3.0 → 1.4.0

package/build/packages/bezier-icons/dist/react/zoom-out.mjs.js

@@ -0,0 +1,20 @@
+import * as e from 'react';
+import { c as t } from '../utils/index.mjs.js';
+
+var l = t(function (t) {
+  return e.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, t), e.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M4 10c0 3.31 2.691 6 6 6 3.31 0 6-2.69 6-6 0-3.309-2.69-6-6-6-3.309 0-6 2.691-6 6Zm17.707 10.293a1 1 0 0 1-1.414 1.414l-5.396-5.395A7.948 7.948 0 0 1 10 18c-4.41 0-8-3.589-8-8 0-4.41 3.59-8 8-8 4.411 0 8 3.59 8 8a7.948 7.948 0 0 1-1.688 4.897l5.395 5.396ZM14 11H6V9h8v2Z",
+    clipRule: "evenodd"
+  }));
+});
+
+export { l as Z };
+//# sourceMappingURL=zoom-out.mjs.js.map

package/build/packages/bezier-icons/dist/react/zoom-out.mjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-out.mjs.js","sources":["../../../../../../bezier-icons/dist/react/zoom-out.mjs"],"sourcesContent":["import*as e from\"react\";import{c as t}from\"../utils/index.mjs\";var l=t((function(t){return e.createElement(\"svg\",Object.assign({xmlns:\"http://www.w3.org/2000/svg\",width:\"1em\",height:\"1em\",fill:\"none\",viewBox:\"0 0 24 24\"},t),e.createElement(\"path\",{fill:\"currentColor\",fillRule:\"evenodd\",d:\"M4 10c0 3.31 2.691 6 6 6 3.31 0 6-2.69 6-6 0-3.309-2.69-6-6-6-3.309 0-6 2.691-6 6Zm17.707 10.293a1 1 0 0 1-1.414 1.414l-5.396-5.395A7.948 7.948 0 0 1 10 18c-4.41 0-8-3.589-8-8 0-4.41 3.59-8 8-8 4.411 0 8 3.59 8 8a7.948 7.948 0 0 1-1.688 4.897l5.395 5.396ZM14 11H6V9h8v2Z\",clipRule:\"evenodd\"}))}));export{l as Z};\n"],"names":["l","t","e","createElement","Object","assign","xmlns","width","height","fill","viewBox","fillRule","d","clipRule"],"mappings":";;;AAA+D,IAAIA,CAAC,GAACC,CAAC,CAAE,UAASA,CAAC,EAAC;EAAC,OAAOC,CAAC,CAACC,aAAa,CAAC,KAAK,EAACC,MAAM,CAACC,MAAM,CAAC;AAACC,IAAAA,KAAK,EAAC,4BAA4B;AAACC,IAAAA,KAAK,EAAC,KAAK;AAACC,IAAAA,MAAM,EAAC,KAAK;AAACC,IAAAA,IAAI,EAAC,MAAM;AAACC,IAAAA,OAAO,EAAC,WAAA;GAAY,EAACT,CAAC,CAAC,EAACC,CAAC,CAACC,aAAa,CAAC,MAAM,EAAC;AAACM,IAAAA,IAAI,EAAC,cAAc;AAACE,IAAAA,QAAQ,EAAC,SAAS;AAACC,IAAAA,CAAC,EAAC,gRAAgR;AAACC,IAAAA,QAAQ,EAAC,SAAA;AAAS,GAAC,CAAC,CAAC,CAAA;AAAA,CAAC;;;;"}

package/build/packages/bezier-icons/dist/utils/index.mjs.js

@@ -0,0 +1,11 @@
+var n = "__bezier__icon";
+function r(r) {
+  return "function" == typeof r && !0 === r[n];
+}
+function t(r) {
+  var t = r;
+  return t[n] = !0, t;
+}
+
+export { t as c, r as i };
+//# sourceMappingURL=index.mjs.js.map

package/build/packages/bezier-icons/dist/utils/index.mjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs.js","sources":["../../../../../../bezier-icons/dist/utils/index.mjs"],"sourcesContent":["var n=\"__bezier__icon\";function r(r){return\"function\"==typeof r&&!0===r[n]}function t(r){var t=r;return t[n]=!0,t}export{t as c,r as i};\n"],"names":["n","r","t"],"mappings":"AAAA,IAAIA,CAAC,GAAC,gBAAgB,CAAA;AAAC,SAASC,CAAC,CAACA,CAAC,EAAC;EAAC,OAAM,UAAU,IAAE,OAAOA,CAAC,IAAE,CAAC,CAAC,KAAGA,CAAC,CAACD,CAAC,CAAC,CAAA;AAAA,CAAA;AAAC,SAASE,CAAC,CAACD,CAAC,EAAC;EAAC,IAAIC,CAAC,GAACD,CAAC,CAAA;EAAC,OAAOC,CAAC,CAACF,CAAC,CAAC,GAAC,CAAC,CAAC,EAACE,CAAC,CAAA;AAAA;;;;"}

package/build/src/components/Avatars/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,6 @@
 import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
 import e__default, { forwardRef, useCallback, useMemo } from 'react';
-import { M as r } from '../../../../node_modules/@channel.io/bezier-icons/dist/react/more.mjs.js';
+import { M as r } from '../../../../packages/bezier-icons/dist/react/more.mjs.js';
 import { isLastIndex } from '../../../utils/arrayUtils.js';
 import { noop } from '../../../utils/functionUtils.js';
 import { AvatarSize } from '../Avatar/Avatar.types.js';

package/build/src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.js

@@ -1,4 +1,4 @@
-import { C as l } from '../../../../node_modules/@channel.io/bezier-icons/dist/react/check.mjs.js';
+import { C as l } from '../../../../packages/bezier-icons/dist/react/check.mjs.js';
 import 'react';
 import { Root as $e698a72e93240346$export$be92b6f5f03c0fe9 } from '../../../../node_modules/@radix-ui/react-checkbox/dist/index.module.js';
 import { ZIndex } from '../../../constants/ZIndex.js';

package/build/src/components/Forms/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
 import e__default, { forwardRef } from 'react';
-import { C as l } from '../../../../node_modules/@channel.io/bezier-icons/dist/react/check-bold.mjs.js';
-import { H as r } from '../../../../node_modules/@channel.io/bezier-icons/dist/react/hyphen-bold.mjs.js';
+import { C as l } from '../../../../packages/bezier-icons/dist/react/check-bold.mjs.js';
+import { H as r } from '../../../../packages/bezier-icons/dist/react/hyphen-bold.mjs.js';
 import { Indicator as $e698a72e93240346$export$adb584737d712b70 } from '../../../../node_modules/@radix-ui/react-checkbox/dist/index.module.js';
 import useId from '../../../hooks/useId.js';
 import FormFieldSize from '../FormFieldSize.js';

package/build/src/components/Forms/Inputs/Select/Select.js

@@ -1,8 +1,8 @@
 import { __rest } from '../../../../../node_modules/tslib/tslib.es6.js';
 import e__default, { forwardRef, useRef, useState, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
-import { C as l$1 } from '../../../../../node_modules/@channel.io/bezier-icons/dist/react/chevron-down.mjs.js';
-import { C as l } from '../../../../../node_modules/@channel.io/bezier-icons/dist/react/chevron-up.mjs.js';
-import { i as r } from '../../../../../node_modules/@channel.io/bezier-icons/dist/utils/index.mjs.js';
+import { C as l$1 } from '../../../../../packages/bezier-icons/dist/react/chevron-down.mjs.js';
+import { C as l } from '../../../../../packages/bezier-icons/dist/react/chevron-up.mjs.js';
+import { i as r } from '../../../../../packages/bezier-icons/dist/utils/index.mjs.js';
 import { ZIndex } from '../../../../constants/ZIndex.js';
 import { noop } from '../../../../utils/functionUtils.js';
 import { isEmpty } from '../../../../utils/typeUtils.js';

package/build/src/components/Forms/Inputs/TextField/TextField.js

@@ -1,6 +1,6 @@
 import { __rest } from '../../../../../node_modules/tslib/tslib.es6.js';
 import e__default, { forwardRef, useState, useMemo, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
-import { C as l } from '../../../../../node_modules/@channel.io/bezier-icons/dist/react/cancel-circle-filled.mjs.js';
+import { C as l } from '../../../../../packages/bezier-icons/dist/react/cancel-circle-filled.mjs.js';
 import { window } from '../../../../utils/domUtils.js';
 import { toString } from '../../../../utils/stringUtils.js';
 import { isNil, isEmpty, isArray } from '../../../../utils/typeUtils.js';

package/build/src/components/Help/Help.js

@@ -1,6 +1,6 @@
 import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
 import e__default from 'react';
-import { H as r } from '../../../node_modules/@channel.io/bezier-icons/dist/react/help-filled.mjs.js';
+import { H as r } from '../../../packages/bezier-icons/dist/react/help-filled.mjs.js';
 import { isEmpty } from '../../utils/typeUtils.js';
 import { Tooltip, Icon } from './Help.styled.js';
 import { IconSize } from '../Icon/Icon.types.js';

package/build/src/components/KeyValueListItem/common/KeyItem/KeyItem.js

@@ -5,7 +5,7 @@ import { TEST_ID_MAP } from '../../KeyValueListItem.const.js';
 import { KeyText, KeyContent } from './KeyItem.styled.js';
 import LegacyIcon from '../../../LegacyIcon/LegacyIcon.js';
 import { IconSize } from '../../../Icon/Icon.types.js';
-import { i as r } from '../../../../../node_modules/@channel.io/bezier-icons/dist/utils/index.mjs.js';
+import { i as r } from '../../../../../packages/bezier-icons/dist/utils/index.mjs.js';
 import { Icon } from '../../../Icon/Icon.js';
 import { isIconName } from '../../../LegacyIcon/utils.js';
 import { Typography } from '../../../../foundation/Typography.js';

package/build/src/components/LegacyIcon/LegacyIcon.js

@@ -1,6 +1,6 @@
 import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
 import e__default, { memo } from 'react';
-import { icons as jc } from '../../../node_modules/@channel.io/bezier-icons/dist/index.mjs.js';
+import { icons as jc } from '../../../packages/bezier-icons/dist/index.mjs.js';
 import { Icon } from '../Icon/Icon.js';
 
 /**

package/build/src/components/LegacyIcon/utils.js

@@ -1,4 +1,4 @@
-import { icons as jc } from '../../../node_modules/@channel.io/bezier-icons/dist/index.mjs.js';
+import { icons as jc } from '../../../packages/bezier-icons/dist/index.mjs.js';
 
 /**
  * @deprecated Please import and use individual icons.

package/build/src/components/LegacySegmentedControl/LegacySegmentedControl.js

@@ -7,7 +7,7 @@ import { range } from '../../utils/numberUtils.js';
 import { isNumber } from '../../utils/typeUtils.js';
 import useFormFieldProps from '../Forms/useFormFieldProps.js';
 import Text from '../Text/Text.js';
-import { SIZE_TO_PADDING, DIVIDER_WIDTH, DIVIDER_SIDE_MARGIN, SIZE_TO_OPTION_TYPOGRAPHY } from './LegacySegmentedControl.const.js';
+import { SIZE_TO_OPTION_TYPOGRAPHY, SIZE_TO_PADDING, DIVIDER_WIDTH, DIVIDER_SIDE_MARGIN } from './LegacySegmentedControl.const.js';
 import { LegacySegmentedControlSize } from './LegacySegmentedControl.types.js';
 import { OptionItemWrapper, DividerContainer, Indicator, IndicatorBox, Wrapper } from './LegacySegmentedControl.styled.js';
 import v4 from '../../../node_modules/uuid/dist/esm-browser/v4.js';

package/build/src/components/ListItem/ListItem.js

@@ -10,7 +10,7 @@ import useAdjacentElementBorderRadius from './useAdjacentElementBorderRadius.js'
 import { LeftContentWrapper, StyledLegacyIcon, StyledIcon, TitleWrapper, Title, DescriptionWrapper, Description, RightContent, ContentWrapper, Wrapper } from './ListItem.styled.js';
 import v4 from '../../../node_modules/uuid/dist/esm-browser/v4.js';
 import { IconSize } from '../Icon/Icon.types.js';
-import { i as r } from '../../../node_modules/@channel.io/bezier-icons/dist/utils/index.mjs.js';
+import { i as r } from '../../../packages/bezier-icons/dist/utils/index.mjs.js';
 import { Typography } from '../../foundation/Typography.js';
 import { isIconName } from '../LegacyIcon/utils.js';
 

package/build/src/components/Navigator/NavGroup/NavGroup.js

@@ -1,6 +1,6 @@
 import e__default, { memo, useCallback } from 'react';
-import { C as l } from '../../../../node_modules/@channel.io/bezier-icons/dist/react/chevron-small-down.mjs.js';
-import { C as l$1 } from '../../../../node_modules/@channel.io/bezier-icons/dist/react/chevron-small-right.mjs.js';
+import { C as l } from '../../../../packages/bezier-icons/dist/react/chevron-small-down.mjs.js';
+import { C as l$1 } from '../../../../packages/bezier-icons/dist/react/chevron-small-right.mjs.js';
 import { noop } from '../../../utils/functionUtils.js';
 import { isNil } from '../../../utils/typeUtils.js';
 import Text from '../../Text/Text.js';

package/build/src/components/OutlineItem/OutlineItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OutlineItem.d.ts","sourceRoot":"","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAA;AAcd,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAA;AAevD,eAAO,MAAM,oBAAoB,8BAA8B,CAAA;AAC/D,eAAO,MAAM,8BAA8B,wCAAwC,CAAA;;AA8RnF,wBAAsC"}
+{"version":3,"file":"OutlineItem.d.ts","sourceRoot":"","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAA;AAed,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAA;AAevD,eAAO,MAAM,oBAAoB,8BAA8B,CAAA;AAC/D,eAAO,MAAM,8BAA8B,wCAAwC,CAAA;;AAsSnF,wBAAsC"}

package/build/src/components/OutlineItem/OutlineItem.js

@@ -1,7 +1,8 @@
 import e__default, { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
-import { C as l } from '../../../node_modules/@channel.io/bezier-icons/dist/react/chevron-small-down.mjs.js';
-import { C as l$1 } from '../../../node_modules/@channel.io/bezier-icons/dist/react/chevron-small-right.mjs.js';
-import { i as r } from '../../../node_modules/@channel.io/bezier-icons/dist/utils/index.mjs.js';
+import { C as l } from '../../../packages/bezier-icons/dist/react/chevron-small-down.mjs.js';
+import { C as l$1 } from '../../../packages/bezier-icons/dist/react/chevron-small-right.mjs.js';
+import { i as r } from '../../../packages/bezier-icons/dist/utils/index.mjs.js';
+import classNames from '../../../node_modules/classnames/index.js';
 import { noop } from '../../utils/functionUtils.js';
 import { isNil } from '../../utils/typeUtils.js';
 import { OutlineItemContext } from './OutlineItemContext.js';
@@ -30,7 +31,7 @@ function OutlineItem({
   focused = false,
   leftContent,
   leftIcon,
-  leftIconColor,
+  leftIconColor = 'txt-black-dark',
   disableChevron = false,
   disableIconActive = false,
   name,
@@ -108,29 +109,30 @@ function OutlineItem({
     if (!isNil(leftContent)) {
       return e__default.createElement(LeftContentWrapper, null, leftContent);
     }
-    if (isIconName(leftIcon)) {
-      return e__default.createElement(LeftContentWrapper, null, e__default.createElement(StyledLegacyIcon, {
+    const isLegacyIcon = isIconName(leftIcon);
+    const isIcon = r(leftIcon);
+    if (isLegacyIcon || isIcon) {
+      const iconProps = {
         testId: leftIconTestId,
-        className: iconClassName,
+        className: classNames(iconClassName, !disableIconActive && active && 'active'),
         interpolation: iconInterpolation,
-        name: leftIcon,
         size: IconSize.S,
-        active: active,
-        disableIconActive: disableIconActive,
         color: leftIconColor
-      }));
-    }
-    if (r(leftIcon)) {
-      return e__default.createElement(LeftContentWrapper, null, e__default.createElement(StyledIcon, {
-        testId: leftIconTestId,
-        className: iconClassName,
-        interpolation: iconInterpolation,
-        source: leftIcon,
-        size: IconSize.S,
-        active: active,
-        disableIconActive: disableIconActive,
-        color: leftIconColor
-      }));
+      };
+      const Icon = (() => {
+        if (isLegacyIcon) {
+          return e__default.createElement(StyledLegacyIcon, Object.assign({}, iconProps, {
+            name: leftIcon
+          }));
+        }
+        if (isIcon) {
+          return e__default.createElement(StyledIcon, Object.assign({}, iconProps, {
+            source: leftIcon
+          }));
+        }
+        return e__default.createElement(e__default.Fragment, null);
+      })();
+      return e__default.createElement(LeftContentWrapper, null, Icon);
     }
     return null;
   }, [active, disableIconActive, iconClassName, iconInterpolation, leftContent, leftIcon, leftIconColor, leftIconTestId]);

package/build/src/components/OutlineItem/OutlineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"OutlineItem.js","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\n\nimport {\n  ChevronSmallDownIcon,\n  ChevronSmallRightIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport { isIconName } from '~/src/components/LegacyIcon'\n\nimport type OutlineItemProps from './OutlineItem.types'\nimport { OutlineItemContext } from './OutlineItemContext'\nimport useOutlineItemContext from './useOutlineItemContext'\n\nimport {\n  ChevronWrapper,\n  ContentWrapper,\n  GroupItemWrapper,\n  LeftContentWrapper,\n  StyledIcon,\n  StyledLegacyIcon,\n} from './OutlineItem.styled'\n\nconst LIST_GROUP_PADDING_LEFT = 16\n\nexport const OUTLINE_ITEM_TEST_ID = 'bezier-react-outline-item'\nexport const OUTLINE_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-outline-item-left-icon'\n\nfunction OutlineItem(\n  {\n    as,\n    testId = OUTLINE_ITEM_TEST_ID,\n    leftIconTestId = OUTLINE_ITEM_LEFT_ICON_TEST_ID,\n    style,\n    className,\n    interpolation,\n    contentClassName,\n    contentInterpolation,\n    iconClassName,\n    iconInterpolation,\n    paddingLeft: givenPaddingLeft,\n    open = false,\n    active: givenActive,\n    focused = false,\n    leftContent,\n    leftIcon,\n    leftIconColor,\n    disableChevron = false,\n    disableIconActive = false,\n    name,\n    href,\n    content = null,\n    rightContent = null,\n    hide = false,\n    onOpen = noop,\n    onClickArrow = noop,\n    /* OptionMenuHost Props */\n    selectedOutlineItemIndex = null,\n    onChangeOption = noop,\n    /* HTMLAttribute props */\n    onClick: givenOnClick = noop,\n    children,\n  }: OutlineItemProps,\n  forwardedRef: React.Ref<HTMLElement>,\n) {\n  const [currentOutlineItemIndex, setCurrentOutlineItemIndex] = useState<number | null>(selectedOutlineItemIndex)\n\n  useEffect(() => {\n    const childs = React.Children.toArray(children)\n    if (isNil(selectedOutlineItemIndex)\n      || (selectedOutlineItemIndex < childs.length && selectedOutlineItemIndex < 0)) {\n      setCurrentOutlineItemIndex(null)\n      return\n    }\n\n    const element = childs[selectedOutlineItemIndex]\n\n    if (React.isValidElement(element) && isNil(element.props.children)) {\n      if (element.props.href) { return }\n\n      setCurrentOutlineItemIndex(selectedOutlineItemIndex)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedOutlineItemIndex])\n\n  useEffect(() => {\n    if (open) {\n      onOpen(name)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open])\n\n  const handleClickItem = useCallback((\n    itemIndex: number,\n    optionKey: string,\n  ) => {\n    onChangeOption(name, optionKey, itemIndex)\n  }, [\n    name,\n    onChangeOption,\n  ])\n\n  const handleClickIcon = useCallback((event?: React.MouseEvent<SVGSVGElement>) => {\n    if (onClickArrow) {\n      event?.stopPropagation()\n      onClickArrow(name)\n    }\n  }, [\n    name,\n    onClickArrow,\n  ])\n\n  const context = useOutlineItemContext({\n    paddingLeft: givenPaddingLeft,\n    active: givenActive,\n    onClick: givenOnClick,\n  }, LIST_GROUP_PADDING_LEFT)\n  const { paddingLeft, active, onClick } = context\n\n  const handleClickGroup = useCallback((event?: React.MouseEvent) => {\n    onClick(event, name)\n  }, [\n    name,\n    onClick,\n  ])\n\n  const chevronComponent = useMemo(() => {\n    if (disableChevron) {\n      return null\n    }\n\n    const chevronSource = open ? ChevronSmallDownIcon : ChevronSmallRightIcon\n    const showChevron = !isNil(children)\n\n    return (\n      <ChevronWrapper>\n        { showChevron && (\n          <StyledIcon\n            source={chevronSource}\n            size={IconSize.XS}\n            onClick={handleClickIcon}\n            color=\"txt-black-darker\"\n          />\n        ) }\n      </ChevronWrapper>\n    )\n  }, [\n    children,\n    disableChevron,\n    handleClickIcon,\n    open,\n  ])\n\n  const leftComponent = useMemo(() => {\n    if (!isNil(leftContent)) {\n      return (\n        <LeftContentWrapper>\n          { leftContent }\n        </LeftContentWrapper>\n      )\n    }\n\n    if (isIconName(leftIcon)) {\n      return (\n        <LeftContentWrapper>\n          <StyledLegacyIcon\n            testId={leftIconTestId}\n            className={iconClassName}\n            interpolation={iconInterpolation}\n            name={leftIcon}\n            size={IconSize.S}\n            active={active}\n            disableIconActive={disableIconActive}\n            color={leftIconColor}\n          />\n        </LeftContentWrapper>\n      )\n    }\n\n    if (isBezierIcon(leftIcon)) {\n      return (\n        <LeftContentWrapper>\n          <StyledIcon\n            testId={leftIconTestId}\n            className={iconClassName}\n            interpolation={iconInterpolation}\n            source={leftIcon}\n            size={IconSize.S}\n            active={active}\n            disableIconActive={disableIconActive}\n            color={leftIconColor}\n          />\n        </LeftContentWrapper>\n      )\n    }\n\n    return null\n  }, [\n    active,\n    disableIconActive,\n    iconClassName,\n    iconInterpolation,\n    leftContent,\n    leftIcon,\n    leftIconColor,\n    leftIconTestId,\n  ])\n\n  const ContentComponent = useMemo(() => (\n    <>\n      { chevronComponent }\n      { leftComponent }\n      <ContentWrapper\n        className={contentClassName}\n        interpolation={contentInterpolation}\n      >\n        { content }\n      </ContentWrapper>\n      { rightContent }\n    </>\n  ),\n  [\n    chevronComponent,\n    leftComponent,\n    contentClassName,\n    contentInterpolation,\n    content,\n    rightContent,\n  ])\n\n  const Items = useMemo(() => (\n    React.Children.map(children, (element, index) => {\n      if (!React.isValidElement(element)) {\n        return element\n      }\n\n      // eslint-disable-next-line react/jsx-no-constructed-context-values\n      const passedContext = {\n        ...context,\n        active: currentOutlineItemIndex === index,\n        onClick: () => handleClickItem(index, element.props.optionKey),\n      }\n\n      return (\n        <OutlineItemContext.Provider value={passedContext}>\n          { element }\n        </OutlineItemContext.Provider>\n      )\n    })\n  ), [\n    children,\n    context,\n    currentOutlineItemIndex,\n    handleClickItem,\n  ])\n\n  if (hide) { return null }\n\n  if (!isNil(href)) {\n    return (\n      <>\n        <GroupItemWrapper\n          ref={forwardedRef as React.Ref<HTMLAnchorElement>}\n          as=\"a\"\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          style={style}\n          className={className}\n          interpolation={interpolation}\n          active={false}\n          focused={focused}\n          currentOutlineItemIndex={currentOutlineItemIndex}\n          paddingLeft={paddingLeft}\n          onClick={handleClickGroup}\n          data-testid={testId}\n          data-active-index={currentOutlineItemIndex}\n        >\n          { ContentComponent }\n        </GroupItemWrapper>\n        { open && (\n          Items\n        ) }\n      </>\n    )\n  }\n\n  return (\n    <>\n      <GroupItemWrapper\n        as={as}\n        ref={forwardedRef}\n        style={style}\n        className={className}\n        interpolation={interpolation}\n        active={active}\n        focused={focused}\n        currentOutlineItemIndex={currentOutlineItemIndex}\n        paddingLeft={paddingLeft}\n        onClick={handleClickGroup}\n        data-testid={testId}\n        data-active-index={currentOutlineItemIndex}\n      >\n        { ContentComponent }\n      </GroupItemWrapper>\n      { open && (\n        Items\n      ) }\n    </>\n  )\n}\n\nexport default forwardRef(OutlineItem)\n"],"names":["LIST_GROUP_PADDING_LEFT","OUTLINE_ITEM_TEST_ID","OUTLINE_ITEM_LEFT_ICON_TEST_ID","OutlineItem","as","testId","leftIconTestId","style","className","interpolation","contentClassName","contentInterpolation","iconClassName","iconInterpolation","paddingLeft","givenPaddingLeft","open","active","givenActive","focused","leftContent","leftIcon","leftIconColor","disableChevron","disableIconActive","name","href","content","rightContent","hide","onOpen","noop","onClickArrow","selectedOutlineItemIndex","onChangeOption","onClick","givenOnClick","children","forwardedRef","currentOutlineItemIndex","setCurrentOutlineItemIndex","useState","useEffect","childs","React","Children","toArray","isNil","length","element","isValidElement","props","handleClickItem","useCallback","itemIndex","optionKey","handleClickIcon","event","stopPropagation","context","useOutlineItemContext","handleClickGroup","chevronComponent","useMemo","chevronSource","ChevronSmallDownIcon","ChevronSmallRightIcon","showChevron","createElement","ChevronWrapper","StyledIcon","source","size","IconSize","XS","color","leftComponent","LeftContentWrapper","isIconName","StyledLegacyIcon","S","isBezierIcon","ContentComponent","Fragment","ContentWrapper","Items","map","index","passedContext","Object","assign","OutlineItemContext","Provider","value","GroupItemWrapper","ref","target","rel","forwardRef"],"mappings":";;;;;;;;;;;;AAiCA,MAAMA,uBAAuB,GAAG,EAAE,CAAA;AAE3B,MAAMC,oBAAoB,GAAG,4BAA2B;AACxD,MAAMC,8BAA8B,GAAG,sCAAqC;AAEnF,SAASC,WAAW,CAClB;EACEC,EAAE;AACFC,EAAAA,MAAM,GAAGJ,oBAAoB;AAC7BK,EAAAA,cAAc,GAAGJ,8BAA8B;EAC/CK,KAAK;EACLC,SAAS;EACTC,aAAa;EACbC,gBAAgB;EAChBC,oBAAoB;EACpBC,aAAa;EACbC,iBAAiB;AACjBC,EAAAA,WAAW,EAAEC,gBAAgB;AAC7BC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,MAAM,EAAEC,WAAW;AACnBC,EAAAA,OAAO,GAAG,KAAK;EACfC,WAAW;EACXC,QAAQ;EACRC,aAAa;AACbC,EAAAA,cAAc,GAAG,KAAK;AACtBC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,IAAI;EACJC,IAAI;AACJC,EAAAA,OAAO,GAAG,IAAI;AACdC,EAAAA,YAAY,GAAG,IAAI;AACnBC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,MAAM,GAAGC,IAAI;AACbC,EAAAA,YAAY,GAAGD,IAAI;AACnB;AACAE,EAAAA,wBAAwB,GAAG,IAAI;AAC/BC,EAAAA,cAAc,GAAGH,IAAI;AACrB;EACAI,OAAO,EAAEC,YAAY,GAAGL,IAAI;AAC5BM,EAAAA,QAAAA;AAAQ,CACS,EACnBC,YAAoC,EAAA;EAEpC,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGC,QAAQ,CAAgBR,wBAAwB,CAAC,CAAA;AAE/GS,EAAAA,SAAS,CAAC,MAAK;IACb,MAAMC,MAAM,GAAGC,UAAK,CAACC,QAAQ,CAACC,OAAO,CAACT,QAAQ,CAAC,CAAA;AAC/C,IAAA,IAAIU,KAAK,CAACd,wBAAwB,CAAC,IAC7BA,wBAAwB,GAAGU,MAAM,CAACK,MAAM,IAAIf,wBAAwB,GAAG,CAAE,EAAE;MAC/EO,0BAA0B,CAAC,IAAI,CAAC,CAAA;AAChC,MAAA,OAAA;AACD,KAAA;AAED,IAAA,MAAMS,OAAO,GAAGN,MAAM,CAACV,wBAAwB,CAAC,CAAA;AAEhD,IAAA,IAAIW,UAAK,CAACM,cAAc,CAACD,OAAO,CAAC,IAAIF,KAAK,CAACE,OAAO,CAACE,KAAK,CAACd,QAAQ,CAAC,EAAE;AAClE,MAAA,IAAIY,OAAO,CAACE,KAAK,CAACzB,IAAI,EAAE;AAAE,QAAA,OAAA;AAAQ,OAAA;MAElCc,0BAA0B,CAACP,wBAAwB,CAAC,CAAA;AACrD,KAAA;AACD;AACF,GAAC,EAAE,CAACA,wBAAwB,CAAC,CAAC,CAAA;AAE9BS,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAI1B,IAAI,EAAE;MACRc,MAAM,CAACL,IAAI,CAAC,CAAA;AACb,KAAA;AACD;AACF,GAAC,EAAE,CAACT,IAAI,CAAC,CAAC,CAAA;EAEV,MAAMoC,eAAe,GAAGC,WAAW,CAAC,CAClCC,SAAiB,EACjBC,SAAiB,KACf;AACFrB,IAAAA,cAAc,CAACT,IAAI,EAAE8B,SAAS,EAAED,SAAS,CAAC,CAAA;AAC5C,GAAC,EAAE,CACD7B,IAAI,EACJS,cAAc,CACf,CAAC,CAAA;AAEF,EAAA,MAAMsB,eAAe,GAAGH,WAAW,CAAEI,KAAuC,IAAI;AAC9E,IAAA,IAAIzB,YAAY,EAAE;AAChByB,MAAAA,KAAK,aAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAALA,KAAK,CAAEC,eAAe,EAAE,CAAA;MACxB1B,YAAY,CAACP,IAAI,CAAC,CAAA;AACnB,KAAA;AACH,GAAC,EAAE,CACDA,IAAI,EACJO,YAAY,CACb,CAAC,CAAA;EAEF,MAAM2B,OAAO,GAAGC,qBAAqB,CAAC;AACpC9C,IAAAA,WAAW,EAAEC,gBAAgB;AAC7BE,IAAAA,MAAM,EAAEC,WAAW;AACnBiB,IAAAA,OAAO,EAAEC,YAAAA;GACV,EAAEpC,uBAAuB,CAAC,CAAA;EAC3B,MAAM;IAAEc,WAAW;IAAEG,MAAM;AAAEkB,IAAAA,OAAAA;AAAO,GAAE,GAAGwB,OAAO,CAAA;AAEhD,EAAA,MAAME,gBAAgB,GAAGR,WAAW,CAAEI,KAAwB,IAAI;AAChEtB,IAAAA,OAAO,CAACsB,KAAK,EAAEhC,IAAI,CAAC,CAAA;AACtB,GAAC,EAAE,CACDA,IAAI,EACJU,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,MAAM2B,gBAAgB,GAAGC,OAAO,CAAC,MAAK;AACpC,IAAA,IAAIxC,cAAc,EAAE;AAClB,MAAA,OAAO,IAAI,CAAA;AACZ,KAAA;AAED,IAAA,MAAMyC,aAAa,GAAGhD,IAAI,GAAGiD,CAAoB,GAAGC,GAAqB,CAAA;AACzE,IAAA,MAAMC,WAAW,GAAG,CAACpB,KAAK,CAACV,QAAQ,CAAC,CAAA;AAEpC,IAAA,OACEO,UAAA,CAAAwB,aAAA,CAACC,cAAc,EAAA,IAAA,EACXF,WAAW,IACXvB,UAAA,CAAAwB,aAAA,CAACE,UAAU,EAAA;AACTC,MAAAA,MAAM,EAAEP,aAAa;MACrBQ,IAAI,EAAEC,QAAQ,CAACC,EAAE;AACjBvC,MAAAA,OAAO,EAAEqB,eAAe;AACxBmB,MAAAA,KAAK,EAAC,kBAAA;AAAkB,KAAA,CAE3B,CACc,CAAA;GAEpB,EAAE,CACDtC,QAAQ,EACRd,cAAc,EACdiC,eAAe,EACfxC,IAAI,CACL,CAAC,CAAA;AAEF,EAAA,MAAM4D,aAAa,GAAGb,OAAO,CAAC,MAAK;AACjC,IAAA,IAAI,CAAChB,KAAK,CAAC3B,WAAW,CAAC,EAAE;MACvB,OACEwB,UAAC,CAAAwB,aAAA,CAAAS,kBAAkB,QACfzD,WAAW,CACM,CAAA;AAExB,KAAA;AAED,IAAA,IAAI0D,UAAU,CAACzD,QAAQ,CAAC,EAAE;AACxB,MAAA,OACEuB,yBAACiC,kBAAkB,EAAA,IAAA,EACjBjC,UAAA,CAAAwB,aAAA,CAACW,gBAAgB,EACf;AAAA1E,QAAAA,MAAM,EAAEC,cAAc;AACtBE,QAAAA,SAAS,EAAEI,aAAa;AACxBH,QAAAA,aAAa,EAAEI,iBAAiB;AAChCY,QAAAA,IAAI,EAAEJ,QAAQ;QACdmD,IAAI,EAAEC,QAAQ,CAACO,CAAC;AAChB/D,QAAAA,MAAM,EAAEA,MAAM;AACdO,QAAAA,iBAAiB,EAAEA,iBAAiB;AACpCmD,QAAAA,KAAK,EAAErD,aAAAA;AACP,OAAA,CAAA,CACiB,CAAA;AAExB,KAAA;AAED,IAAA,IAAI2D,CAAY,CAAC5D,QAAQ,CAAC,EAAE;AAC1B,MAAA,OACEuB,yBAACiC,kBAAkB,EAAA,IAAA,EACjBjC,UAAA,CAAAwB,aAAA,CAACE,UAAU,EACT;AAAAjE,QAAAA,MAAM,EAAEC,cAAc;AACtBE,QAAAA,SAAS,EAAEI,aAAa;AACxBH,QAAAA,aAAa,EAAEI,iBAAiB;AAChC0D,QAAAA,MAAM,EAAElD,QAAQ;QAChBmD,IAAI,EAAEC,QAAQ,CAACO,CAAC;AAChB/D,QAAAA,MAAM,EAAEA,MAAM;AACdO,QAAAA,iBAAiB,EAAEA,iBAAiB;AACpCmD,QAAAA,KAAK,EAAErD,aAAAA;AACP,OAAA,CAAA,CACiB,CAAA;AAExB,KAAA;AAED,IAAA,OAAO,IAAI,CAAA;AACb,GAAC,EAAE,CACDL,MAAM,EACNO,iBAAiB,EACjBZ,aAAa,EACbC,iBAAiB,EACjBO,WAAW,EACXC,QAAQ,EACRC,aAAa,EACbhB,cAAc,CACf,CAAC,CAAA;EAEF,MAAM4E,gBAAgB,GAAGnB,OAAO,CAAC,MAC/BnB,UAAA,CAAAwB,aAAA,CAAAxB,UAAA,CAAAuC,QAAA,EAAA,IAAA,EACIrB,gBAAgB,EAChBc,aAAa,EACfhC,UAAC,CAAAwB,aAAA,CAAAgB,cAAc,EACb;AAAA5E,IAAAA,SAAS,EAAEE,gBAAgB;AAC3BD,IAAAA,aAAa,EAAEE,oBAAAA;GAEb,EAAAgB,OAAO,CACM,EACfC,YAAY,CAEjB,EACD,CACEkC,gBAAgB,EAChBc,aAAa,EACblE,gBAAgB,EAChBC,oBAAoB,EACpBgB,OAAO,EACPC,YAAY,CACb,CAAC,CAAA;AAEF,EAAA,MAAMyD,KAAK,GAAGtB,OAAO,CAAC,MACpBnB,UAAK,CAACC,QAAQ,CAACyC,GAAG,CAACjD,QAAQ,EAAE,CAACY,OAAO,EAAEsC,KAAK,KAAI;AAC9C,IAAA,IAAI,CAAC3C,UAAK,CAACM,cAAc,CAACD,OAAO,CAAC,EAAE;AAClC,MAAA,OAAOA,OAAO,CAAA;AACf,KAAA;AAED;AACA,IAAA,MAAMuC,aAAa,GACdC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAC,MAAA,CAAA,EAAA,EAAA/B,OAAO,CACV,EAAA;MAAA1C,MAAM,EAAEsB,uBAAuB,KAAKgD,KAAK;MACzCpD,OAAO,EAAE,MAAMiB,eAAe,CAACmC,KAAK,EAAEtC,OAAO,CAACE,KAAK,CAACI,SAAS,CAAA;AAAC,KAAA,CAC/D,CAAA;AAED,IAAA,OACEX,UAAA,CAAAwB,aAAA,CAACuB,kBAAkB,CAACC,QAAQ,EAAA;AAACC,MAAAA,KAAK,EAAEL,aAAAA;KAAa,EAC7CvC,OAAO,CACmB,CAAA;GAEjC,CACF,EAAE,CACDZ,QAAQ,EACRsB,OAAO,EACPpB,uBAAuB,EACvBa,eAAe,CAChB,CAAC,CAAA;AAEF,EAAA,IAAIvB,IAAI,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAE,GAAA;AAEzB,EAAA,IAAI,CAACkB,KAAK,CAACrB,IAAI,CAAC,EAAE;AAChB,IAAA,OACEkB,UAAA,CAAAwB,aAAA,CAAAxB,UAAA,CAAAuC,QAAA,EAAA,IAAA,EACEvC,UAAC,CAAAwB,aAAA,CAAA0B,gBAAgB,EACf;AAAAC,MAAAA,GAAG,EAAEzD,YAA4C;AACjDlC,MAAAA,EAAE,EAAC,GAAG;AACNsB,MAAAA,IAAI,EAAEA,IAAI;AACVsE,MAAAA,MAAM,EAAC,QAAQ;AACfC,MAAAA,GAAG,EAAC,qBAAqB;AACzB1F,MAAAA,KAAK,EAAEA,KAAK;AACZC,MAAAA,SAAS,EAAEA,SAAS;AACpBC,MAAAA,aAAa,EAAEA,aAAa;AAC5BQ,MAAAA,MAAM,EAAE,KAAK;AACbE,MAAAA,OAAO,EAAEA,OAAO;AAChBoB,MAAAA,uBAAuB,EAAEA,uBAAuB;AAChDzB,MAAAA,WAAW,EAAEA,WAAW;AACxBqB,MAAAA,OAAO,EAAE0B,gBAAgB;AACZ,MAAA,aAAA,EAAAxD,MAAM;AACA,MAAA,mBAAA,EAAAkC,uBAAAA;AAEjB,KAAA,EAAA2C,gBAAgB,CACD,EACjBlE,IAAI,IACJqE,KACD,CACA,CAAA;AAEN,GAAA;AAED,EAAA,OACEzC,UAAA,CAAAwB,aAAA,CAAAxB,UAAA,CAAAuC,QAAA,EAAA,IAAA,EACEvC,UAAC,CAAAwB,aAAA,CAAA0B,gBAAgB;AACf1F,IAAAA,EAAE,EAAEA,EAAE;AACN2F,IAAAA,GAAG,EAAEzD,YAAY;AACjB/B,IAAAA,KAAK,EAAEA,KAAK;AACZC,IAAAA,SAAS,EAAEA,SAAS;AACpBC,IAAAA,aAAa,EAAEA,aAAa;AAC5BQ,IAAAA,MAAM,EAAEA,MAAM;AACdE,IAAAA,OAAO,EAAEA,OAAO;AAChBoB,IAAAA,uBAAuB,EAAEA,uBAAuB;AAChDzB,IAAAA,WAAW,EAAEA,WAAW;AACxBqB,IAAAA,OAAO,EAAE0B,gBAAgB;AAAA,IAAA,aAAA,EACZxD,MAAM;AACA,IAAA,mBAAA,EAAAkC,uBAAAA;AAEjB,GAAA,EAAA2C,gBAAgB,CACD,EACjBlE,IAAI,IACJqE,KACD,CACA,CAAA;AAEP,CAAA;AAEA,oBAAea,UAAU,CAAC/F,WAAW,CAAC;;;;"}
+{"version":3,"file":"OutlineItem.js","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\n\nimport {\n  ChevronSmallDownIcon,\n  ChevronSmallRightIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport { isIconName } from '~/src/components/LegacyIcon'\n\nimport type OutlineItemProps from './OutlineItem.types'\nimport { OutlineItemContext } from './OutlineItemContext'\nimport useOutlineItemContext from './useOutlineItemContext'\n\nimport {\n  ChevronWrapper,\n  ContentWrapper,\n  GroupItemWrapper,\n  LeftContentWrapper,\n  StyledIcon,\n  StyledLegacyIcon,\n} from './OutlineItem.styled'\n\nconst LIST_GROUP_PADDING_LEFT = 16\n\nexport const OUTLINE_ITEM_TEST_ID = 'bezier-react-outline-item'\nexport const OUTLINE_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-outline-item-left-icon'\n\nfunction OutlineItem(\n  {\n    as,\n    testId = OUTLINE_ITEM_TEST_ID,\n    leftIconTestId = OUTLINE_ITEM_LEFT_ICON_TEST_ID,\n    style,\n    className,\n    interpolation,\n    contentClassName,\n    contentInterpolation,\n    iconClassName,\n    iconInterpolation,\n    paddingLeft: givenPaddingLeft,\n    open = false,\n    active: givenActive,\n    focused = false,\n    leftContent,\n    leftIcon,\n    leftIconColor = 'txt-black-dark',\n    disableChevron = false,\n    disableIconActive = false,\n    name,\n    href,\n    content = null,\n    rightContent = null,\n    hide = false,\n    onOpen = noop,\n    onClickArrow = noop,\n    /* OptionMenuHost Props */\n    selectedOutlineItemIndex = null,\n    onChangeOption = noop,\n    /* HTMLAttribute props */\n    onClick: givenOnClick = noop,\n    children,\n  }: OutlineItemProps,\n  forwardedRef: React.Ref<HTMLElement>,\n) {\n  const [currentOutlineItemIndex, setCurrentOutlineItemIndex] = useState<number | null>(selectedOutlineItemIndex)\n\n  useEffect(() => {\n    const childs = React.Children.toArray(children)\n    if (isNil(selectedOutlineItemIndex)\n      || (selectedOutlineItemIndex < childs.length && selectedOutlineItemIndex < 0)) {\n      setCurrentOutlineItemIndex(null)\n      return\n    }\n\n    const element = childs[selectedOutlineItemIndex]\n\n    if (React.isValidElement(element) && isNil(element.props.children)) {\n      if (element.props.href) { return }\n\n      setCurrentOutlineItemIndex(selectedOutlineItemIndex)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedOutlineItemIndex])\n\n  useEffect(() => {\n    if (open) {\n      onOpen(name)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open])\n\n  const handleClickItem = useCallback((\n    itemIndex: number,\n    optionKey: string,\n  ) => {\n    onChangeOption(name, optionKey, itemIndex)\n  }, [\n    name,\n    onChangeOption,\n  ])\n\n  const handleClickIcon = useCallback((event?: React.MouseEvent<SVGSVGElement>) => {\n    if (onClickArrow) {\n      event?.stopPropagation()\n      onClickArrow(name)\n    }\n  }, [\n    name,\n    onClickArrow,\n  ])\n\n  const context = useOutlineItemContext({\n    paddingLeft: givenPaddingLeft,\n    active: givenActive,\n    onClick: givenOnClick,\n  }, LIST_GROUP_PADDING_LEFT)\n  const { paddingLeft, active, onClick } = context\n\n  const handleClickGroup = useCallback((event?: React.MouseEvent) => {\n    onClick(event, name)\n  }, [\n    name,\n    onClick,\n  ])\n\n  const chevronComponent = useMemo(() => {\n    if (disableChevron) {\n      return null\n    }\n\n    const chevronSource = open ? ChevronSmallDownIcon : ChevronSmallRightIcon\n    const showChevron = !isNil(children)\n\n    return (\n      <ChevronWrapper>\n        { showChevron && (\n          <StyledIcon\n            source={chevronSource}\n            size={IconSize.XS}\n            onClick={handleClickIcon}\n            color=\"txt-black-darker\"\n          />\n        ) }\n      </ChevronWrapper>\n    )\n  }, [\n    children,\n    disableChevron,\n    handleClickIcon,\n    open,\n  ])\n\n  const leftComponent = useMemo(() => {\n    if (!isNil(leftContent)) {\n      return (\n        <LeftContentWrapper>\n          { leftContent }\n        </LeftContentWrapper>\n      )\n    }\n\n    const isLegacyIcon = isIconName(leftIcon)\n    const isIcon = isBezierIcon(leftIcon)\n\n    if (isLegacyIcon || isIcon) {\n      const iconProps = {\n        testId: leftIconTestId,\n        className: classNames(\n          iconClassName,\n          (!disableIconActive && active) && 'active',\n        ),\n        interpolation: iconInterpolation,\n        size: IconSize.S,\n        color: leftIconColor,\n      }\n\n      const Icon = (() => {\n        if (isLegacyIcon) {\n          return (\n            <StyledLegacyIcon\n              {...iconProps}\n              name={leftIcon}\n            />\n          )\n        }\n        if (isIcon) {\n          return (\n            <StyledIcon\n              {...iconProps}\n              source={leftIcon}\n            />\n          )\n        }\n        return <></>\n      })()\n\n      return (\n        <LeftContentWrapper>\n          { Icon }\n        </LeftContentWrapper>\n      )\n    }\n\n    return null\n  }, [\n    active,\n    disableIconActive,\n    iconClassName,\n    iconInterpolation,\n    leftContent,\n    leftIcon,\n    leftIconColor,\n    leftIconTestId,\n  ])\n\n  const ContentComponent = useMemo(() => (\n    <>\n      { chevronComponent }\n      { leftComponent }\n      <ContentWrapper\n        className={contentClassName}\n        interpolation={contentInterpolation}\n      >\n        { content }\n      </ContentWrapper>\n      { rightContent }\n    </>\n  ),\n  [\n    chevronComponent,\n    leftComponent,\n    contentClassName,\n    contentInterpolation,\n    content,\n    rightContent,\n  ])\n\n  const Items = useMemo(() => (\n    React.Children.map(children, (element, index) => {\n      if (!React.isValidElement(element)) {\n        return element\n      }\n\n      // eslint-disable-next-line react/jsx-no-constructed-context-values\n      const passedContext = {\n        ...context,\n        active: currentOutlineItemIndex === index,\n        onClick: () => handleClickItem(index, element.props.optionKey),\n      }\n\n      return (\n        <OutlineItemContext.Provider value={passedContext}>\n          { element }\n        </OutlineItemContext.Provider>\n      )\n    })\n  ), [\n    children,\n    context,\n    currentOutlineItemIndex,\n    handleClickItem,\n  ])\n\n  if (hide) { return null }\n\n  if (!isNil(href)) {\n    return (\n      <>\n        <GroupItemWrapper\n          ref={forwardedRef as React.Ref<HTMLAnchorElement>}\n          as=\"a\"\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          style={style}\n          className={className}\n          interpolation={interpolation}\n          active={false}\n          focused={focused}\n          currentOutlineItemIndex={currentOutlineItemIndex}\n          paddingLeft={paddingLeft}\n          onClick={handleClickGroup}\n          data-testid={testId}\n          data-active-index={currentOutlineItemIndex}\n        >\n          { ContentComponent }\n        </GroupItemWrapper>\n        { open && (\n          Items\n        ) }\n      </>\n    )\n  }\n\n  return (\n    <>\n      <GroupItemWrapper\n        as={as}\n        ref={forwardedRef}\n        style={style}\n        className={className}\n        interpolation={interpolation}\n        active={active}\n        focused={focused}\n        currentOutlineItemIndex={currentOutlineItemIndex}\n        paddingLeft={paddingLeft}\n        onClick={handleClickGroup}\n        data-testid={testId}\n        data-active-index={currentOutlineItemIndex}\n      >\n        { ContentComponent }\n      </GroupItemWrapper>\n      { open && (\n        Items\n      ) }\n    </>\n  )\n}\n\nexport default forwardRef(OutlineItem)\n"],"names":["LIST_GROUP_PADDING_LEFT","OUTLINE_ITEM_TEST_ID","OUTLINE_ITEM_LEFT_ICON_TEST_ID","OutlineItem","as","testId","leftIconTestId","style","className","interpolation","contentClassName","contentInterpolation","iconClassName","iconInterpolation","paddingLeft","givenPaddingLeft","open","active","givenActive","focused","leftContent","leftIcon","leftIconColor","disableChevron","disableIconActive","name","href","content","rightContent","hide","onOpen","noop","onClickArrow","selectedOutlineItemIndex","onChangeOption","onClick","givenOnClick","children","forwardedRef","currentOutlineItemIndex","setCurrentOutlineItemIndex","useState","useEffect","childs","React","Children","toArray","isNil","length","element","isValidElement","props","handleClickItem","useCallback","itemIndex","optionKey","handleClickIcon","event","stopPropagation","context","useOutlineItemContext","handleClickGroup","chevronComponent","useMemo","chevronSource","ChevronSmallDownIcon","ChevronSmallRightIcon","showChevron","createElement","ChevronWrapper","StyledIcon","source","size","IconSize","XS","color","leftComponent","LeftContentWrapper","isLegacyIcon","isIconName","isIcon","isBezierIcon","iconProps","classNames","S","Icon","StyledLegacyIcon","Object","assign","ContentComponent","Fragment","ContentWrapper","Items","map","index","passedContext","OutlineItemContext","Provider","value","GroupItemWrapper","ref","target","rel","forwardRef"],"mappings":"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"}

package/build/src/components/OutlineItem/OutlineItem.styled.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
-import { type ColorProps } from "../../types/ComponentProps";
 import { type InterpolationProps } from "../../types/Foundation";
-import type OutlineItemProps from './OutlineItem.types';
 interface WrapperProps extends InterpolationProps {
     active: boolean;
     focused: boolean;
@@ -17,14 +15,12 @@ export declare const ChevronWrapper: import("styled-components").StyledComponent
 export declare const LeftContentWrapper: import("styled-components").StyledComponent<"div", import("~/src/foundation").Foundation, {
     foundation?: import("~/src/foundation").Foundation | undefined;
 }, never>;
-interface StyledIconProps extends InterpolationProps, ColorProps {
-}
 export declare const StyledLegacyIcon: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ name, ...rest }: import("~/src/components/LegacyIcon").LegacyIconProps) => JSX.Element | null>, import("~/src/foundation").Foundation, {
     foundation?: import("~/src/foundation").Foundation | undefined;
-} & StyledIconProps & Pick<OutlineItemProps, "active" | "disableIconActive">, never>;
+} & InterpolationProps, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("~/src/components/Icon").IconProps & import("react").RefAttributes<SVGSVGElement>>>, import("~/src/foundation").Foundation, {
     foundation?: import("~/src/foundation").Foundation | undefined;
-} & StyledIconProps & Pick<OutlineItemProps, "active" | "disableIconActive">, never>;
+} & InterpolationProps, never>;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("~/src/foundation").Foundation, {
     foundation?: import("~/src/foundation").Foundation | undefined;
 } & InterpolationProps, never>;

package/build/src/components/OutlineItem/OutlineItem.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OutlineItem.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/OutlineItem/OutlineItem.styled.ts"],"names":[],"mappings":";AAMA,OAAO,EAAE,KAAK,UAAU,EAAE,mCAAkC;AAC5D,OAAO,EAAE,KAAK,kBAAkB,EAAE,+BAA8B;AAMhE,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAA;AAEvD,UAAU,YAAa,SAAQ,kBAAkB;IAC/C,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,uBAAuB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACxC;AAmBD,eAAO,MAAM,gBAAgB;;wBAkB5B,CAAA;AAED,eAAO,MAAM,cAAc;;SAM1B,CAAA;AAED,eAAO,MAAM,kBAAkB;;SAI9B,CAAA;AAED,UAAU,eAAgB,SAAQ,kBAAkB,EAAE,UAAU;CAAG;AAEnE,eAAO,MAAM,gBAAgB;;oFAO5B,CAAA;AAED,eAAO,MAAM,UAAU;;oFAOtB,CAAA;AAED,eAAO,MAAM,cAAc;;8BAM1B,CAAA"}
+{"version":3,"file":"OutlineItem.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/OutlineItem/OutlineItem.styled.ts"],"names":[],"mappings":";AAMA,OAAO,EAAE,KAAK,kBAAkB,EAAE,+BAA8B;AAMhE,UAAU,YAAa,SAAQ,kBAAkB;IAC/C,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,uBAAuB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACxC;AAmBD,eAAO,MAAM,gBAAgB;;wBAkB5B,CAAA;AAED,eAAO,MAAM,cAAc;;SAM1B,CAAA;AAED,eAAO,MAAM,kBAAkB;;SAI9B,CAAA;AAED,eAAO,MAAM,gBAAgB;;8BAM5B,CAAA;AAED,eAAO,MAAM,UAAU;;8BAMtB,CAAA;AAED,eAAO,MAAM,cAAc;;8BAM1B,CAAA"}

package/build/src/components/OutlineItem/OutlineItem.styled.js

@@ -81,26 +81,18 @@ const LeftContentWrapper = FoundationStyled.div`
   margin-right: 8px;
 `;
 const StyledLegacyIcon = FoundationStyled(LegacyIcon)`
-  color: ${props => {
-  var _a, _b, _c;
-  if (!props.disableIconActive && props.active) {
-    return (_a = props.foundation) === null || _a === void 0 ? void 0 : _a.theme['bgtxt-blue-normal'];
+  &.active {
+    color: var(--bgtxt-blue-normal);
   }
-  return (_c = (_b = props.foundation) === null || _b === void 0 ? void 0 : _b.theme) === null || _c === void 0 ? void 0 : _c[props.color || 'txt-black-dark'];
-}};
 
   ${({
   interpolation
 }) => interpolation}
 `;
 const StyledIcon = FoundationStyled(Icon)`
-  color: ${props => {
-  var _a, _b, _c;
-  if (!props.disableIconActive && props.active) {
-    return (_a = props.foundation) === null || _a === void 0 ? void 0 : _a.theme['bgtxt-blue-normal'];
+  &.active {
+    color: var(--bgtxt-blue-normal);
   }
-  return (_c = (_b = props.foundation) === null || _b === void 0 ? void 0 : _b.theme) === null || _c === void 0 ? void 0 : _c[props.color || 'txt-black-dark'];
-}};
 
   ${({
   interpolation

package/build/src/components/OutlineItem/OutlineItem.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"OutlineItem.styled.js","sources":["../../../../src/components/OutlineItem/OutlineItem.styled.ts"],"sourcesContent":["import {\n  css,\n  ellipsis,\n  styled,\n} from '~/src/foundation'\n\nimport { type ColorProps } from '~/src/types/ComponentProps'\nimport { type InterpolationProps } from '~/src/types/Foundation'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { Icon } from '~/src/components/Icon'\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\n\nimport type OutlineItemProps from './OutlineItem.types'\n\ninterface WrapperProps extends InterpolationProps {\n  active: boolean\n  focused: boolean\n  paddingLeft: number\n  currentOutlineItemIndex?: number | null\n}\n\nconst FocusedItemStyle = css<WrapperProps>`\n  background-color: ${props => (isNil(props.currentOutlineItemIndex) && props.foundation?.theme?.['bg-black-lighter'])};\n`\n\nconst ActiveItemStyle = css`\n  color: ${({ foundation }) => foundation?.theme?.['bgtxt-blue-normal']};\n  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-blue-lightest']};\n`\n\nconst NonActiveItemStyle = css<WrapperProps>`\n  ${({ focused }) => focused && FocusedItemStyle}\n\n  &:hover {\n    ${FocusedItemStyle}\n  }\n`\n\nexport const GroupItemWrapper = styled.div<WrapperProps>`\n  display: flex;\n  align-items: center;\n  height: 28px;\n  padding: 0 6px;\n  padding-left: ${({ paddingLeft }) => `${paddingLeft}px`};\n  font-size: 14px;\n  font-weight: normal;\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n  text-decoration: none;\n  cursor: pointer;\n  border-radius: 6px;\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'color'])};\n\n  ${({ active }) => (active ? ActiveItemStyle : NonActiveItemStyle)}\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const ChevronWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 100%;\n`\n\nexport const LeftContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: 8px;\n`\n\ninterface StyledIconProps extends InterpolationProps, ColorProps {}\n\nexport const StyledLegacyIcon = styled(LegacyIcon)<StyledIconProps & Pick<OutlineItemProps, 'active' | 'disableIconActive'>>`\n  color: ${props => {\n    if (!props.disableIconActive && props.active) { return props.foundation?.theme['bgtxt-blue-normal'] }\n    return props.foundation?.theme?.[props.color || 'txt-black-dark']\n  }};\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const StyledIcon = styled(Icon)<StyledIconProps & Pick<OutlineItemProps, 'active' | 'disableIconActive'>>`\n  color: ${props => {\n    if (!props.disableIconActive && props.active) { return props.foundation?.theme['bgtxt-blue-normal'] }\n    return props.foundation?.theme?.[props.color || 'txt-black-dark']\n  }};\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const ContentWrapper = styled.div<InterpolationProps>`\n  flex: 1;\n\n  ${ellipsis()}\n\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["FocusedItemStyle","css","props","_a","_b","isNil","currentOutlineItemIndex","foundation","theme","ActiveItemStyle","NonActiveItemStyle","focused","GroupItemWrapper","styled","div","paddingLeft","transition","getTransitionsCSS","active","interpolation","ChevronWrapper","LeftContentWrapper","StyledLegacyIcon","LegacyIcon","disableIconActive","_c","color","StyledIcon","Icon","ContentWrapper","ellipsis"],"mappings":"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"}
+{"version":3,"file":"OutlineItem.styled.js","sources":["../../../../src/components/OutlineItem/OutlineItem.styled.ts"],"sourcesContent":["import {\n  css,\n  ellipsis,\n  styled,\n} from '~/src/foundation'\n\nimport { type InterpolationProps } from '~/src/types/Foundation'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { Icon } from '~/src/components/Icon'\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\n\ninterface WrapperProps extends InterpolationProps {\n  active: boolean\n  focused: boolean\n  paddingLeft: number\n  currentOutlineItemIndex?: number | null\n}\n\nconst FocusedItemStyle = css<WrapperProps>`\n  background-color: ${props => (isNil(props.currentOutlineItemIndex) && props.foundation?.theme?.['bg-black-lighter'])};\n`\n\nconst ActiveItemStyle = css`\n  color: ${({ foundation }) => foundation?.theme?.['bgtxt-blue-normal']};\n  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-blue-lightest']};\n`\n\nconst NonActiveItemStyle = css<WrapperProps>`\n  ${({ focused }) => focused && FocusedItemStyle}\n\n  &:hover {\n    ${FocusedItemStyle}\n  }\n`\n\nexport const GroupItemWrapper = styled.div<WrapperProps>`\n  display: flex;\n  align-items: center;\n  height: 28px;\n  padding: 0 6px;\n  padding-left: ${({ paddingLeft }) => `${paddingLeft}px`};\n  font-size: 14px;\n  font-weight: normal;\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n  text-decoration: none;\n  cursor: pointer;\n  border-radius: 6px;\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'color'])};\n\n  ${({ active }) => (active ? ActiveItemStyle : NonActiveItemStyle)}\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const ChevronWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 100%;\n`\n\nexport const LeftContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: 8px;\n`\n\nexport const StyledLegacyIcon = styled(LegacyIcon)<InterpolationProps>`\n  &.active {\n    color: var(--bgtxt-blue-normal);\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const StyledIcon = styled(Icon)<InterpolationProps>`\n  &.active {\n    color: var(--bgtxt-blue-normal);\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const ContentWrapper = styled.div<InterpolationProps>`\n  flex: 1;\n\n  ${ellipsis()}\n\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["FocusedItemStyle","css","props","_a","_b","isNil","currentOutlineItemIndex","foundation","theme","ActiveItemStyle","NonActiveItemStyle","focused","GroupItemWrapper","styled","div","paddingLeft","transition","getTransitionsCSS","active","interpolation","ChevronWrapper","LeftContentWrapper","StyledLegacyIcon","LegacyIcon","StyledIcon","Icon","ContentWrapper","ellipsis"],"mappings":"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"}

package/build/src/components/SectionLabel/SectionLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/SectionLabel/SectionLabel.tsx"],"names":[],"mappings":";AA6BA,OAAO,KAAK,iBAAiB,MAAM,sBAAsB,CAAA;AAIzD,eAAO,MAAM,qBAAqB,+BAA+B,CAAA;AACjE,eAAO,MAAM,6BAA6B,uCAAuC,CAAA;AACjF,eAAO,MAAM,kCAAkC,4CAA4C,CAAA;AAC3F,eAAO,MAAM,mCAAmC,6CAA6C,CAAA;AAC7F,eAAO,MAAM,kCAAkC,4CAA4C,CAAA;AAyC3F,iBAAS,YAAY,CAAC,EACpB,OAAO,EAAE,YAAY,EACrB,IAAW,EACX,OAAe,EACf,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,oBAAoB,EACpB,uBAAuB,EACvB,2BAA2B,EAC3B,oBAAoB,EACpB,wBAAwB,EACxB,qBAAqB,EACrB,yBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAsHnB;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"SectionLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/SectionLabel/SectionLabel.tsx"],"names":[],"mappings":";AA8BA,OAAO,KAAK,iBAAiB,MAAM,sBAAsB,CAAA;AAIzD,eAAO,MAAM,qBAAqB,+BAA+B,CAAA;AACjE,eAAO,MAAM,6BAA6B,uCAAuC,CAAA;AACjF,eAAO,MAAM,kCAAkC,4CAA4C,CAAA;AAC3F,eAAO,MAAM,mCAAmC,6CAA6C,CAAA;AAC7F,eAAO,MAAM,kCAAkC,4CAA4C,CAAA;AA6C3F,iBAAS,YAAY,CAAC,EACpB,OAAO,EAAE,YAAY,EACrB,IAAW,EACX,OAAe,EACf,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,oBAAoB,EACpB,uBAAuB,EACvB,2BAA2B,EAC3B,oBAAoB,EACpB,wBAAwB,EACxB,qBAAqB,EACrB,yBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAwHnB;AAED,eAAe,YAAY,CAAA"}

package/build/src/components/SectionLabel/SectionLabel.js

@@ -1,5 +1,6 @@
 import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
 import e__default, { useMemo, useCallback } from 'react';
+import classNames from '../../../node_modules/classnames/index.js';
 import { isString, isNumber, isNil, isEmpty, isArray } from '../../utils/typeUtils.js';
 import { Button } from '../Button/Button.js';
 import { ButtonSize, ButtonStyleVariant, ButtonColorVariant } from '../Button/Button.types.js';
@@ -16,6 +17,9 @@ const SECTION_LABEL_TEST_CONTENT_ID = 'bezier-react-section-label-content';
 const SECTION_LABEL_TEST_LEFT_CONTENT_ID = 'bezier-react-section-label-left-content';
 const SECTION_LABEL_TEST_RIGHT_CONTENT_ID = 'bezier-react-section-label-right-content';
 const SECTION_LABEL_TEST_HELP_CONTENT_ID = 'bezier-react-section-label-help-content';
+function clickableClassName(onClick) {
+  return !isNil(onClick) ? 'clickable' : undefined;
+}
 function renderSectionLabelActionItem(props, key) {
   if (!('icon' in props)) {
     return e__default.cloneElement(props, {
@@ -34,7 +38,7 @@ function renderSectionLabelActionItem(props, key) {
      */
     return e__default.createElement(Styled.RightItemWrapper, {
       key: key,
-      clickable: !isNil(onClick),
+      className: clickableClassName(onClick),
       onClick: onClick
     }, e__default.createElement(LegacyIcon, {
       name: icon,
@@ -82,10 +86,10 @@ function SectionLabel(_a) {
   const renderLeftItem = useCallback(item => {
     var _a;
     return 'icon' in item ? e__default.createElement(Styled.LeftIcon, {
+      className: clickableClassName(item.onClick),
       name: item.icon,
       size: IconSize.S,
       color: (_a = item.iconColor) !== null && _a !== void 0 ? _a : 'txt-black-dark',
-      clickable: !isNil(item.onClick),
       onClick: item.onClick
     }) : item;
   }, []);
@@ -130,8 +134,7 @@ function SectionLabel(_a) {
   }, divider && e__default.createElement(Divider, {
     orientation: "horizontal"
   }), e__default.createElement(Styled.Wrapper, Object.assign({
-    className: wrapperClassName,
-    clickable: !isNil(onClick),
+    className: classNames(wrapperClassName, clickableClassName(onClick)),
     onClick: onClick,
     interpolation: wrapperInterpolation
   }, props), leftComponent, content, helpContent, rightComponent), children && e__default.createElement(Styled.ChildrenWrapper, {

package/build/src/components/SectionLabel/SectionLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionLabel.js","sources":["../../../../src/components/SectionLabel/SectionLabel.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { v4 as uuid } from 'uuid'\n\nimport { Typography } from '~/src/foundation'\n\nimport {\n  isArray,\n  isEmpty,\n  isNil,\n  isNumber,\n  isString,\n} from '~/src/utils/typeUtils'\n\nimport {\n  Button,\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from '~/src/components/Button'\nimport { Divider } from '~/src/components/Divider'\nimport { IconSize } from '~/src/components/Icon'\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport { type SectionLabelItemProps } from './SectionLabel.types'\nimport type SectionLabelProps from './SectionLabel.types'\n\nimport Styled from './SectionLabel.styled'\n\nexport const SECTION_LABEL_TEST_ID = 'bezier-react-section-label'\nexport const SECTION_LABEL_TEST_CONTENT_ID = 'bezier-react-section-label-content'\nexport const SECTION_LABEL_TEST_LEFT_CONTENT_ID = 'bezier-react-section-label-left-content'\nexport const SECTION_LABEL_TEST_RIGHT_CONTENT_ID = 'bezier-react-section-label-right-content'\nexport const SECTION_LABEL_TEST_HELP_CONTENT_ID = 'bezier-react-section-label-help-content'\n\nfunction renderSectionLabelActionItem(props: SectionLabelItemProps, key?: string): React.ReactElement {\n  if (!('icon' in props)) {\n    return React.cloneElement(props, { key })\n  }\n\n  const { icon, iconColor, onClick } = props\n\n  if (!isNil(iconColor)) {\n    /*\n     * NOTE: backward compatibility를 위해 iconColor attribute를 지원하지만,\n     * iconColor를 사용할 경우 ButtonColorVariant와 일치하지 않기 때문에 Icon을 사용합니다.\n     */\n    return (\n      <Styled.RightItemWrapper\n        key={key}\n        clickable={!isNil(onClick)}\n        onClick={onClick}\n      >\n        <LegacyIcon\n          name={icon}\n          size={IconSize.XS}\n          color={iconColor}\n        />\n      </Styled.RightItemWrapper>\n    )\n  }\n\n  return (\n    <Button\n      key={key}\n      size={ButtonSize.XS}\n      styleVariant={ButtonStyleVariant.Tertiary}\n      colorVariant={ButtonColorVariant.Monochrome}\n      leftContent={icon}\n      onClick={onClick}\n    />\n  )\n}\n\nfunction SectionLabel({\n  content: givenContent,\n  open = true,\n  divider = false,\n  help,\n  leftContent,\n  rightContent,\n  onClick,\n  children,\n  wrapperClassName,\n  wrapperInterpolation,\n  contentWrapperClassName,\n  contentWrapperInterpolation,\n  leftWrapperClassName,\n  leftWrapperInterpolation,\n  rightWrapperClassName,\n  rightWrapperInterpolation,\n  ...props\n}: SectionLabelProps) {\n  const content = useMemo(() => (\n    <Styled.ContentWrapper\n      className={contentWrapperClassName}\n      interpolation={contentWrapperInterpolation}\n      data-testid={SECTION_LABEL_TEST_CONTENT_ID}\n    >\n      { isString(givenContent) || isNumber(givenContent)\n        ? (\n          <Styled.ContentText bold typo={Typography.Size13}>\n            { givenContent }\n          </Styled.ContentText>\n        ) : givenContent }\n    </Styled.ContentWrapper>\n  ), [\n    givenContent,\n    contentWrapperClassName,\n    contentWrapperInterpolation,\n  ])\n\n  const renderLeftItem = useCallback((item: SectionLabelItemProps) => (\n    'icon' in item\n      ? (\n        <Styled.LeftIcon\n          name={item.icon}\n          size={IconSize.S}\n          color={item.iconColor ?? 'txt-black-dark'}\n          clickable={!isNil(item.onClick)}\n          onClick={item.onClick}\n        />\n      ) : item\n  ), [])\n\n  const leftComponent = useMemo(() => {\n    if (isNil(leftContent)) {\n      return null\n    }\n\n    const item = renderLeftItem(leftContent)\n    const show = !isNil(item)\n\n    return show && (\n      <Styled.LeftContentWrapper\n        className={leftWrapperClassName}\n        interpolation={leftWrapperInterpolation}\n        data-testid={SECTION_LABEL_TEST_LEFT_CONTENT_ID}\n      >\n        { item }\n      </Styled.LeftContentWrapper>\n    )\n  }, [\n    leftContent,\n    leftWrapperClassName,\n    leftWrapperInterpolation,\n    renderLeftItem,\n  ])\n\n  const rightComponent = useMemo(() => {\n    if (isNil(rightContent) || isEmpty(rightContent)) {\n      return null\n    }\n\n    const items = isArray(rightContent)\n      ? rightContent.map((item) => renderSectionLabelActionItem(item, uuid()))\n      : renderSectionLabelActionItem(rightContent)\n\n    return (\n      <Styled.RightContentWrapper\n        className={rightWrapperClassName}\n        interpolation={rightWrapperInterpolation}\n        data-testid={SECTION_LABEL_TEST_RIGHT_CONTENT_ID}\n      >\n        { items }\n      </Styled.RightContentWrapper>\n    )\n  }, [\n    rightContent,\n    rightWrapperClassName,\n    rightWrapperInterpolation,\n  ])\n\n  const helpContent = useMemo(() => !isNil(help) && (\n    <Tooltip\n      content={help.tooltipContent}\n      allowHover\n    >\n      <Styled.HelpIconWrapper data-testid={SECTION_LABEL_TEST_HELP_CONTENT_ID}>\n        <LegacyIcon\n          name={help.icon ?? 'help-filled'}\n          size={IconSize.XS}\n          color={help.iconColor ?? 'txt-black-dark'}\n        />\n      </Styled.HelpIconWrapper>\n    </Tooltip>\n  ), [help])\n\n  return (\n    <div data-testid={SECTION_LABEL_TEST_ID}>\n      { divider && <Divider orientation=\"horizontal\" /> }\n      <Styled.Wrapper\n        className={wrapperClassName}\n        clickable={!isNil(onClick)}\n        onClick={onClick}\n        interpolation={wrapperInterpolation}\n        {...props}\n      >\n        { leftComponent }\n        { content }\n        { helpContent }\n        { rightComponent }\n      </Styled.Wrapper>\n      { children && (\n        <Styled.ChildrenWrapper show={open}>\n          { children }\n        </Styled.ChildrenWrapper>\n      ) }\n    </div>\n  )\n}\n\nexport default SectionLabel\n"],"names":["SECTION_LABEL_TEST_ID","SECTION_LABEL_TEST_CONTENT_ID","SECTION_LABEL_TEST_LEFT_CONTENT_ID","SECTION_LABEL_TEST_RIGHT_CONTENT_ID","SECTION_LABEL_TEST_HELP_CONTENT_ID","renderSectionLabelActionItem","props","key","React","cloneElement","icon","iconColor","onClick","isNil","Styled","RightItemWrapper","clickable","createElement","LegacyIcon","name","size","IconSize","XS","color","Button","ButtonSize","styleVariant","ButtonStyleVariant","Tertiary","colorVariant","ButtonColorVariant","Monochrome","leftContent","SectionLabel","_a","content","givenContent","open","divider","help","rightContent","children","wrapperClassName","wrapperInterpolation","contentWrapperClassName","contentWrapperInterpolation","leftWrapperClassName","leftWrapperInterpolation","rightWrapperClassName","rightWrapperInterpolation","__rest","useMemo","ContentWrapper","className","interpolation","isString","isNumber","ContentText","bold","typo","Typography","Size13","renderLeftItem","useCallback","item","LeftIcon","S","leftComponent","show","LeftContentWrapper","rightComponent","isEmpty","items","isArray","map","uuid","RightContentWrapper","helpContent","Tooltip","tooltipContent","allowHover","HelpIconWrapper","_b","Divider","orientation","Wrapper","Object","assign","ChildrenWrapper"],"mappings":"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"}
+{"version":3,"file":"SectionLabel.js","sources":["../../../../src/components/SectionLabel/SectionLabel.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport classNames from 'classnames'\nimport { v4 as uuid } from 'uuid'\n\nimport { Typography } from '~/src/foundation'\n\nimport {\n  isArray,\n  isEmpty,\n  isNil,\n  isNumber,\n  isString,\n} from '~/src/utils/typeUtils'\n\nimport {\n  Button,\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from '~/src/components/Button'\nimport { Divider } from '~/src/components/Divider'\nimport { IconSize } from '~/src/components/Icon'\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport { type SectionLabelItemProps } from './SectionLabel.types'\nimport type SectionLabelProps from './SectionLabel.types'\n\nimport Styled from './SectionLabel.styled'\n\nexport const SECTION_LABEL_TEST_ID = 'bezier-react-section-label'\nexport const SECTION_LABEL_TEST_CONTENT_ID = 'bezier-react-section-label-content'\nexport const SECTION_LABEL_TEST_LEFT_CONTENT_ID = 'bezier-react-section-label-left-content'\nexport const SECTION_LABEL_TEST_RIGHT_CONTENT_ID = 'bezier-react-section-label-right-content'\nexport const SECTION_LABEL_TEST_HELP_CONTENT_ID = 'bezier-react-section-label-help-content'\n\nfunction clickableClassName(onClick?: React.MouseEventHandler) {\n  return !isNil(onClick) ? 'clickable' : undefined\n}\n\nfunction renderSectionLabelActionItem(props: SectionLabelItemProps, key?: string): React.ReactElement {\n  if (!('icon' in props)) {\n    return React.cloneElement(props, { key })\n  }\n\n  const { icon, iconColor, onClick } = props\n\n  if (!isNil(iconColor)) {\n    /*\n     * NOTE: backward compatibility를 위해 iconColor attribute를 지원하지만,\n     * iconColor를 사용할 경우 ButtonColorVariant와 일치하지 않기 때문에 Icon을 사용합니다.\n     */\n    return (\n      <Styled.RightItemWrapper\n        key={key}\n        className={clickableClassName(onClick)}\n        onClick={onClick}\n      >\n        <LegacyIcon\n          name={icon}\n          size={IconSize.XS}\n          color={iconColor}\n        />\n      </Styled.RightItemWrapper>\n    )\n  }\n\n  return (\n    <Button\n      key={key}\n      size={ButtonSize.XS}\n      styleVariant={ButtonStyleVariant.Tertiary}\n      colorVariant={ButtonColorVariant.Monochrome}\n      leftContent={icon}\n      onClick={onClick}\n    />\n  )\n}\n\nfunction SectionLabel({\n  content: givenContent,\n  open = true,\n  divider = false,\n  help,\n  leftContent,\n  rightContent,\n  onClick,\n  children,\n  wrapperClassName,\n  wrapperInterpolation,\n  contentWrapperClassName,\n  contentWrapperInterpolation,\n  leftWrapperClassName,\n  leftWrapperInterpolation,\n  rightWrapperClassName,\n  rightWrapperInterpolation,\n  ...props\n}: SectionLabelProps) {\n  const content = useMemo(() => (\n    <Styled.ContentWrapper\n      className={contentWrapperClassName}\n      interpolation={contentWrapperInterpolation}\n      data-testid={SECTION_LABEL_TEST_CONTENT_ID}\n    >\n      { isString(givenContent) || isNumber(givenContent)\n        ? (\n          <Styled.ContentText bold typo={Typography.Size13}>\n            { givenContent }\n          </Styled.ContentText>\n        ) : givenContent }\n    </Styled.ContentWrapper>\n  ), [\n    givenContent,\n    contentWrapperClassName,\n    contentWrapperInterpolation,\n  ])\n\n  const renderLeftItem = useCallback((item: SectionLabelItemProps) => (\n    'icon' in item\n      ? (\n        <Styled.LeftIcon\n          className={clickableClassName(item.onClick)}\n          name={item.icon}\n          size={IconSize.S}\n          color={item.iconColor ?? 'txt-black-dark'}\n          onClick={item.onClick}\n        />\n      ) : item\n  ), [])\n\n  const leftComponent = useMemo(() => {\n    if (isNil(leftContent)) {\n      return null\n    }\n\n    const item = renderLeftItem(leftContent)\n    const show = !isNil(item)\n\n    return show && (\n      <Styled.LeftContentWrapper\n        className={leftWrapperClassName}\n        interpolation={leftWrapperInterpolation}\n        data-testid={SECTION_LABEL_TEST_LEFT_CONTENT_ID}\n      >\n        { item }\n      </Styled.LeftContentWrapper>\n    )\n  }, [\n    leftContent,\n    leftWrapperClassName,\n    leftWrapperInterpolation,\n    renderLeftItem,\n  ])\n\n  const rightComponent = useMemo(() => {\n    if (isNil(rightContent) || isEmpty(rightContent)) {\n      return null\n    }\n\n    const items = isArray(rightContent)\n      ? rightContent.map((item) => renderSectionLabelActionItem(item, uuid()))\n      : renderSectionLabelActionItem(rightContent)\n\n    return (\n      <Styled.RightContentWrapper\n        className={rightWrapperClassName}\n        interpolation={rightWrapperInterpolation}\n        data-testid={SECTION_LABEL_TEST_RIGHT_CONTENT_ID}\n      >\n        { items }\n      </Styled.RightContentWrapper>\n    )\n  }, [\n    rightContent,\n    rightWrapperClassName,\n    rightWrapperInterpolation,\n  ])\n\n  const helpContent = useMemo(() => !isNil(help) && (\n    <Tooltip\n      content={help.tooltipContent}\n      allowHover\n    >\n      <Styled.HelpIconWrapper data-testid={SECTION_LABEL_TEST_HELP_CONTENT_ID}>\n        <LegacyIcon\n          name={help.icon ?? 'help-filled'}\n          size={IconSize.XS}\n          color={help.iconColor ?? 'txt-black-dark'}\n        />\n      </Styled.HelpIconWrapper>\n    </Tooltip>\n  ), [help])\n\n  return (\n    <div data-testid={SECTION_LABEL_TEST_ID}>\n      { divider && <Divider orientation=\"horizontal\" /> }\n      <Styled.Wrapper\n        className={classNames(\n          wrapperClassName,\n          clickableClassName(onClick),\n        )}\n        onClick={onClick}\n        interpolation={wrapperInterpolation}\n        {...props}\n      >\n        { leftComponent }\n        { content }\n        { helpContent }\n        { rightComponent }\n      </Styled.Wrapper>\n      { children && (\n        <Styled.ChildrenWrapper show={open}>\n          { children }\n        </Styled.ChildrenWrapper>\n      ) }\n    </div>\n  )\n}\n\nexport default SectionLabel\n"],"names":["SECTION_LABEL_TEST_ID","SECTION_LABEL_TEST_CONTENT_ID","SECTION_LABEL_TEST_LEFT_CONTENT_ID","SECTION_LABEL_TEST_RIGHT_CONTENT_ID","SECTION_LABEL_TEST_HELP_CONTENT_ID","clickableClassName","onClick","isNil","undefined","renderSectionLabelActionItem","props","key","React","cloneElement","icon","iconColor","createElement","Styled","RightItemWrapper","className","LegacyIcon","name","size","IconSize","XS","color","Button","ButtonSize","styleVariant","ButtonStyleVariant","Tertiary","colorVariant","ButtonColorVariant","Monochrome","leftContent","SectionLabel","_a","content","givenContent","open","divider","help","rightContent","children","wrapperClassName","wrapperInterpolation","contentWrapperClassName","contentWrapperInterpolation","leftWrapperClassName","leftWrapperInterpolation","rightWrapperClassName","rightWrapperInterpolation","__rest","useMemo","ContentWrapper","interpolation","isString","isNumber","ContentText","bold","typo","Typography","Size13","renderLeftItem","useCallback","item","LeftIcon","S","leftComponent","show","LeftContentWrapper","rightComponent","isEmpty","items","isArray","map","uuid","RightContentWrapper","helpContent","Tooltip","tooltipContent","allowHover","HelpIconWrapper","_b","Divider","orientation","Wrapper","Object","assign","classNames","ChildrenWrapper"],"mappings":";;;;;;;;;;;;;;AAkCO,MAAMA,qBAAqB,GAAG,6BAA4B;AAC1D,MAAMC,6BAA6B,GAAG,qCAAoC;AAC1E,MAAMC,kCAAkC,GAAG,0CAAyC;AACpF,MAAMC,mCAAmC,GAAG,2CAA0C;AACtF,MAAMC,kCAAkC,GAAG,0CAAyC;AAE3F,SAASC,kBAAkB,CAACC,OAAiC,EAAA;EAC3D,OAAO,CAACC,KAAK,CAACD,OAAO,CAAC,GAAG,WAAW,GAAGE,SAAS,CAAA;AAClD,CAAA;AAEA,SAASC,4BAA4B,CAACC,KAA4B,EAAEC,GAAY,EAAA;AAC9E,EAAA,IAAI,EAAE,MAAM,IAAID,KAAK,CAAC,EAAE;AACtB,IAAA,OAAOE,UAAK,CAACC,YAAY,CAACH,KAAK,EAAE;AAAEC,MAAAA,GAAAA;AAAK,KAAA,CAAC,CAAA;AAC1C,GAAA;EAED,MAAM;IAAEG,IAAI;IAAEC,SAAS;AAAET,IAAAA,OAAAA;AAAO,GAAE,GAAGI,KAAK,CAAA;AAE1C,EAAA,IAAI,CAACH,KAAK,CAACQ,SAAS,CAAC,EAAE;AACrB;;;AAGG;AACH,IAAA,OACEH,UAAC,CAAAI,aAAA,CAAAC,MAAM,CAACC,gBAAgB,EAAA;AACtBP,MAAAA,GAAG,EAAEA,GAAG;AACRQ,MAAAA,SAAS,EAAEd,kBAAkB,CAACC,OAAO,CAAC;AACtCA,MAAAA,OAAO,EAAEA,OAAAA;AAAO,KAAA,EAEhBM,UAAA,CAAAI,aAAA,CAACI,UAAU,EACT;AAAAC,MAAAA,IAAI,EAAEP,IAAI;MACVQ,IAAI,EAAEC,QAAQ,CAACC,EAAE;AACjBC,MAAAA,KAAK,EAAEV,SAAAA;AACP,KAAA,CAAA,CACsB,CAAA;AAE7B,GAAA;AAED,EAAA,OACEH,UAAA,CAAAI,aAAA,CAACU,MAAM,EAAA;AACLf,IAAAA,GAAG,EAAEA,GAAG;IACRW,IAAI,EAAEK,UAAU,CAACH,EAAE;IACnBI,YAAY,EAAEC,kBAAkB,CAACC,QAAQ;IACzCC,YAAY,EAAEC,kBAAkB,CAACC,UAAU;AAC3CC,IAAAA,WAAW,EAAEpB,IAAI;AACjBR,IAAAA,OAAO,EAAEA,OAAAA;AAAO,GAAA,CAChB,CAAA;AAEN,CAAA;AAEA,SAAS6B,YAAY,CAACC,EAkBF,EAAA;EAlBE,IAAA;AACpBC,MAAAA,OAAO,EAAEC,YAAY;AACrBC,MAAAA,IAAI,GAAG,IAAI;AACXC,MAAAA,OAAO,GAAG,KAAK;MACfC,IAAI;MACJP,WAAW;MACXQ,YAAY;MACZpC,OAAO;MACPqC,QAAQ;MACRC,gBAAgB;MAChBC,oBAAoB;MACpBC,uBAAuB;MACvBC,2BAA2B;MAC3BC,oBAAoB;MACpBC,wBAAwB;MACxBC,qBAAqB;AACrBC,MAAAA,yBAAAA;AAAyB,KAAA,GAAAf,EAEP;AADf1B,IAAAA,KAAK,GAAA0C,MAAA,CAAAhB,EAAA,EAjBY,4SAkBrB,CADS,CAAA;AAER,EAAA,MAAMC,OAAO,GAAGgB,OAAO,CAAC,MACtBzC,UAAC,CAAAI,aAAA,CAAAC,MAAM,CAACqC,cAAc;AACpBnC,IAAAA,SAAS,EAAE2B,uBAAuB;AAClCS,IAAAA,aAAa,EAAER,2BAA2B;AAAA,IAAA,aAAA,EAC7B9C,6BAAAA;AAEX,GAAA,EAAAuD,QAAQ,CAAClB,YAAY,CAAC,IAAImB,QAAQ,CAACnB,YAAY,CAAC,GAE9C1B,UAAA,CAAAI,aAAA,CAACC,MAAM,CAACyC,WAAW,EAAC;AAAAC,IAAAA,IAAI,EAAC,IAAA;IAAAC,IAAI,EAAEC,UAAU,CAACC,MAAAA;AAAM,GAAA,EAC5CxB,YAAY,CACK,GACnBA,YAAY,CAErB,EAAE,CACDA,YAAY,EACZQ,uBAAuB,EACvBC,2BAA2B,CAC5B,CAAC,CAAA;AAEF,EAAA,MAAMgB,cAAc,GAAGC,WAAW,CAAEC,IAA2B,IAAI;;IAAC,OAClE,MAAM,IAAIA,IAAI,GAEVrD,UAAC,CAAAI,aAAA,CAAAC,MAAM,CAACiD,QAAQ,EAAA;AACd/C,MAAAA,SAAS,EAAEd,kBAAkB,CAAC4D,IAAI,CAAC3D,OAAO,CAAC;MAC3Ce,IAAI,EAAE4C,IAAI,CAACnD,IAAI;MACfQ,IAAI,EAAEC,QAAQ,CAAC4C,CAAC;AAChB1C,MAAAA,KAAK,EAAE,MAAAwC,IAAI,CAAClD,SAAS,MAAA,IAAA,IAAAqB,EAAA,KAAA,KAAA,CAAA,GAAAA,EAAA,GAAI,gBAAgB;MACzC9B,OAAO,EAAE2D,IAAI,CAAC3D,OAAAA;KACd,CAAA,GACA2D,IAAI,CAAA;GACX,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMG,aAAa,GAAGf,OAAO,CAAC,MAAK;AACjC,IAAA,IAAI9C,KAAK,CAAC2B,WAAW,CAAC,EAAE;AACtB,MAAA,OAAO,IAAI,CAAA;AACZ,KAAA;AAED,IAAA,MAAM+B,IAAI,GAAGF,cAAc,CAAC7B,WAAW,CAAC,CAAA;AACxC,IAAA,MAAMmC,IAAI,GAAG,CAAC9D,KAAK,CAAC0D,IAAI,CAAC,CAAA;IAEzB,OAAOI,IAAI,IACTzD,UAAA,CAAAI,aAAA,CAACC,MAAM,CAACqD,kBAAkB;AACxBnD,MAAAA,SAAS,EAAE6B,oBAAoB;AAC/BO,MAAAA,aAAa,EAAEN,wBAAwB;AAAA,MAAA,aAAA,EAC1B/C,kCAAAA;KAEX,EAAA+D,IAAI,CAET,CAAA;GACF,EAAE,CACD/B,WAAW,EACXc,oBAAoB,EACpBC,wBAAwB,EACxBc,cAAc,CACf,CAAC,CAAA;AAEF,EAAA,MAAMQ,cAAc,GAAGlB,OAAO,CAAC,MAAK;IAClC,IAAI9C,KAAK,CAACmC,YAAY,CAAC,IAAI8B,OAAO,CAAC9B,YAAY,CAAC,EAAE;AAChD,MAAA,OAAO,IAAI,CAAA;AACZ,KAAA;IAED,MAAM+B,KAAK,GAAGC,OAAO,CAAChC,YAAY,CAAC,GAC/BA,YAAY,CAACiC,GAAG,CAAEV,IAAI,IAAKxD,4BAA4B,CAACwD,IAAI,EAAEW,EAAI,EAAE,CAAC,CAAC,GACtEnE,4BAA4B,CAACiC,YAAY,CAAC,CAAA;AAE9C,IAAA,OACE9B,UAAC,CAAAI,aAAA,CAAAC,MAAM,CAAC4D,mBAAmB,EAAA;AACzB1D,MAAAA,SAAS,EAAE+B,qBAAqB;AAChCK,MAAAA,aAAa,EAAEJ,yBAAyB;AAC3B,MAAA,aAAA,EAAAhD,mCAAAA;OAEXsE,KAAK,CACoB,CAAA;GAEhC,EAAE,CACD/B,YAAY,EACZQ,qBAAqB,EACrBC,yBAAyB,CAC1B,CAAC,CAAA;AAEF,EAAA,MAAM2B,WAAW,GAAGzB,OAAO,CAAC,MAAK;;IAAC,OAAA,CAAC9C,KAAK,CAACkC,IAAI,CAAC,IAC5C7B,UAAA,CAAAI,aAAA,CAAC+D,OAAO,EAAA;MACN1C,OAAO,EAAEI,IAAI,CAACuC,cAAc;AAC5BC,MAAAA,UAAU,EAAA,IAAA;KAAA,EAEVrE,UAAA,CAAAI,aAAA,CAACC,MAAM,CAACiE,eAAe,EAAA;AAAA,MAAA,aAAA,EAAc9E,kCAAAA;AAAkC,KAAA,EACrEQ,UAAA,CAAAI,aAAA,CAACI,UAAU,EAAA;AACTC,MAAAA,IAAI,EAAE,CAAAe,EAAA,GAAAK,IAAI,CAAC3B,IAAI,MAAI,IAAA,IAAAsB,EAAA,KAAA,KAAA,CAAA,GAAAA,EAAA,GAAA,aAAa;MAChCd,IAAI,EAAEC,QAAQ,CAACC,EAAE;AACjBC,MAAAA,KAAK,EAAE,CAAA0D,EAAA,GAAA1C,IAAI,CAAC1B,SAAS,MAAA,IAAA,IAAAoE,EAAA,KAAA,KAAA,CAAA,GAAAA,EAAA,GAAI,gBAAA;KAAgB,CACzC,CACqB,CAE5B,CAAA;AAAA,GAAA,EAAE,CAAC1C,IAAI,CAAC,CAAC,CAAA;AAEV,EAAA,OACE7B;mBAAkBZ,qBAAAA;GAAqB,EACnCwC,OAAO,IAAI5B,UAAC,CAAAI,aAAA,CAAAoE,OAAO;AAACC,IAAAA,WAAW,EAAC,YAAA;AAAe,GAAA,CAAA,EACjDzE,UAAC,CAAAI,aAAA,CAAAC,MAAM,CAACqE,OAAO,EACbC,MAAA,CAAAC,MAAA,CAAA;IAAArE,SAAS,EAAEsE,UAAU,CACnB7C,gBAAgB,EAChBvC,kBAAkB,CAACC,OAAO,CAAC,CAC5B;AACDA,IAAAA,OAAO,EAAEA,OAAO;AAChBiD,IAAAA,aAAa,EAAEV,oBAAAA;GAAoB,EAC/BnC,KAAK,CAAA,EAEP0D,aAAa,EACb/B,OAAO,EACPyC,WAAW,EACXP,cAAc,CACD,EACf5B,QAAQ,IACR/B,UAAA,CAAAI,aAAA,CAACC,MAAM,CAACyE,eAAe,EAAC;AAAArB,IAAAA,IAAI,EAAE9B,IAAAA;KAC1BI,QAAQ,CAEb,CACG,CAAA;AAEV;;;;"}

package/build/src/components/SectionLabel/SectionLabel.styled.d.ts

@@ -1,12 +1,9 @@
 /// <reference types="react" />
 import { type InterpolationProps } from "../../types/Foundation";
-interface ClickableElementProps {
-    clickable: boolean;
-}
 declare const _default: {
     LeftIcon: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ name, ...rest }: import("~/src/components/LegacyIcon").LegacyIconProps) => JSX.Element | null>, import("~/src/foundation").Foundation, {
         foundation?: import("~/src/foundation").Foundation | undefined;
-    } & ClickableElementProps, never>;
+    }, never>;
     LeftContentWrapper: import("styled-components").StyledComponent<"div", import("~/src/foundation").Foundation, {
         foundation?: import("~/src/foundation").Foundation | undefined;
     } & InterpolationProps, never>;
@@ -24,7 +21,7 @@ declare const _default: {
     } & InterpolationProps, never>;
     RightItemWrapper: import("styled-components").StyledComponent<"div", import("~/src/foundation").Foundation, {
         foundation?: import("~/src/foundation").Foundation | undefined;
-    } & ClickableElementProps, never>;
+    }, never>;
     ChildrenWrapper: import("styled-components").StyledComponent<"div", import("~/src/foundation").Foundation, {
         foundation?: import("~/src/foundation").Foundation | undefined;
     } & {
@@ -32,7 +29,7 @@ declare const _default: {
     }, never>;
     Wrapper: import("styled-components").StyledComponent<"div", import("~/src/foundation").Foundation, {
         foundation?: import("~/src/foundation").Foundation | undefined;
-    } & ClickableElementProps & InterpolationProps, never>;
+    } & InterpolationProps, never>;
 };
 export default _default;
 //# sourceMappingURL=SectionLabel.styled.d.ts.map

package/build/src/components/SectionLabel/SectionLabel.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionLabel.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/SectionLabel/SectionLabel.styled.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAE,+BAA8B;AAKhE,UAAU,qBAAqB;IAC7B,SAAS,EAAE,OAAO,CAAA;CACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2ED,wBAUC"}
+{"version":3,"file":"SectionLabel.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/SectionLabel/SectionLabel.styled.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,KAAK,kBAAkB,EAAE,+BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EhE,wBAUC"}