@channel.io/bezier-react 1.4.0 → 1.6.0

package/dist/esm/components/Modals/Modal/ModalHelpers.mjs

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { Trigger as $5d3850c4d0b4e6c7$export$41fb9f06171c75f4, Close as $5d3850c4d0b4e6c7$export$f39c2d165cd861fe } from '../../../node_modules/@radix-ui/react-dialog/dist/index.module.mjs';
+
+/**
+ * `ModalTrigger` is a button that opens the modal. **It doesn't render any DOM node.**
+ * It passes the handler that opens the modal and accessibility properties to the children.
+ *
+ * It **must** be placed outside of the `ModalContent`.
+ */
+function ModalTrigger({
+  children
+}) {
+  return /*#__PURE__*/React__default.createElement($5d3850c4d0b4e6c7$export$41fb9f06171c75f4, {
+    asChild: true
+  }, children);
+}
+
+/**
+ * `ModalClose` is a button that closes the modal. **It doesn't render any DOM node.**
+ * It passes the handler that closes the modal to the children.
+ */
+function ModalClose({
+  children
+}) {
+  return /*#__PURE__*/React__default.createElement($5d3850c4d0b4e6c7$export$f39c2d165cd861fe, {
+    asChild: true
+  }, children);
+}
+
+export { ModalClose, ModalTrigger };
+//# sourceMappingURL=ModalHelpers.mjs.map

package/dist/esm/components/Modals/Modal/ModalHelpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHelpers.mjs","sources":["../../../../../src/components/Modals/Modal/ModalHelpers.tsx"],"sourcesContent":["import React from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport {\n  type ModalCloseProps,\n  type ModalTriggerProps,\n} from './Modal.types'\n\n/**\n * `ModalTrigger` is a button that opens the modal. **It doesn't render any DOM node.**\n * It passes the handler that opens the modal and accessibility properties to the children.\n *\n * It **must** be placed outside of the `ModalContent`.\n */\nexport function ModalTrigger({ children }: ModalTriggerProps) {\n  return (\n    <DialogPrimitive.Trigger asChild>\n      { children }\n    </DialogPrimitive.Trigger>\n  )\n}\n\n/**\n * `ModalClose` is a button that closes the modal. **It doesn't render any DOM node.**\n * It passes the handler that closes the modal to the children.\n */\nexport function ModalClose({ children }: ModalCloseProps) {\n  return (\n    <DialogPrimitive.Close asChild>\n      { children }\n    </DialogPrimitive.Close>\n  )\n}\n"],"names":["ModalTrigger","children","React","createElement","DialogPrimitive","asChild","ModalClose"],"mappings":";;;AASA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAYA,CAAC;AAAEC,EAAAA,QAAAA;AAA4B,CAAC,EAAE;AAC5D,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,yCAAuB,EAAA;IAACC,OAAO,EAAA,IAAA;AAAA,GAAA,EAC5BJ,QACqB,CAAC,CAAA;AAE9B,CAAA;;AAEA;AACA;AACA;AACA;AACO,SAASK,UAAUA,CAAC;AAAEL,EAAAA,QAAAA;AAA0B,CAAC,EAAE;AACxD,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,yCAAqB,EAAA;IAACC,OAAO,EAAA,IAAA;AAAA,GAAA,EAC1BJ,QACmB,CAAC,CAAA;AAE5B;;;;"}

package/dist/esm/components/Navigator/NavGroup/NavGroup.mjs

@@ -0,0 +1,71 @@
+import React__default, { memo, useCallback } from 'react';
+import { ChevronSmallDownIcon, ChevronSmallRightIcon } from '@channel.io/bezier-icons';
+import { noop } from '../../../utils/functionUtils.mjs';
+import { isNil } from '../../../utils/typeUtils.mjs';
+import Text from '../../Text/Text.mjs';
+import { Wrapper, Item, LeftIconWrapper, ChevronWrapper, RightContentWrapper, ChildrenWrapper } from './NavGroup.styled.mjs';
+import LegacyIcon from '../../LegacyIcon/LegacyIcon.mjs';
+import { IconSize } from '../../Icon/Icon.types.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
+import { isIconName } from '../../LegacyIcon/utils.mjs';
+import { Typography } from '../../../foundation/Typography.mjs';
+
+const NAV_GROUP_TEST_ID = 'bezier-react-nav-group';
+const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-react-nav-group-left-icon';
+function NavGroup({
+  as,
+  testId = NAV_GROUP_TEST_ID,
+  name,
+  style,
+  className,
+  interpolation,
+  children,
+  content,
+  rightContent,
+  leftIcon,
+  open,
+  active,
+  onClick = noop
+}) {
+  const handleClickItem = useCallback(e => {
+    onClick(e, name);
+  }, [name, onClick]);
+  const hasChildren = !isNil(children);
+  const chevronIconSource = open ? ChevronSmallDownIcon : ChevronSmallRightIcon;
+  const showLeftIcon = isIconName(leftIcon);
+  const ariaName = `${name}Menu`;
+  return /*#__PURE__*/React__default.createElement(Wrapper, {
+    role: "none"
+  }, /*#__PURE__*/React__default.createElement(Item, {
+    as: as,
+    active: active,
+    style: style,
+    className: className,
+    interpolation: interpolation,
+    onClick: handleClickItem,
+    "data-testid": testId,
+    role: "menuitem",
+    "aria-haspopup": hasChildren,
+    "aria-expanded": open,
+    "aria-controls": ariaName
+  }, /*#__PURE__*/React__default.createElement(LeftIconWrapper, null, showLeftIcon && /*#__PURE__*/React__default.createElement(LegacyIcon, {
+    testId: NAV_GROUP_LEFT_ICON_TEST_ID,
+    name: leftIcon,
+    size: IconSize.S,
+    color: active ? 'bgtxt-blue-normal' : 'txt-black-dark'
+  })), /*#__PURE__*/React__default.createElement(Text, {
+    typo: Typography.Size14,
+    truncated: true
+  }, content), hasChildren && /*#__PURE__*/React__default.createElement(ChevronWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
+    source: chevronIconSource,
+    size: IconSize.S,
+    color: "txt-black-dark"
+  })), rightContent && /*#__PURE__*/React__default.createElement(RightContentWrapper, null, rightContent)), open && /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
+    role: "menu",
+    id: ariaName
+  }, open && children));
+}
+var NavGroup$1 = /*#__PURE__*/memo(NavGroup);
+
+export { NAV_GROUP_LEFT_ICON_TEST_ID, NAV_GROUP_TEST_ID, NavGroup$1 as default };
+//# sourceMappingURL=NavGroup.mjs.map

package/dist/esm/components/Navigator/NavGroup/NavGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavGroup.mjs","sources":["../../../../../src/components/Navigator/NavGroup/NavGroup.tsx"],"sourcesContent":["import React, {\n  memo,\n  useCallback,\n} from 'react'\n\nimport {\n  ChevronSmallDownIcon,\n  ChevronSmallRightIcon,\n} from '@channel.io/bezier-icons'\n\nimport { Typography } from '~/src/foundation'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\nimport {\n  LegacyIcon,\n  isIconName,\n} from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nimport type NavGroupProps from './NavGroup.types'\n\nimport {\n  ChevronWrapper,\n  ChildrenWrapper,\n  Item,\n  LeftIconWrapper,\n  RightContentWrapper,\n  Wrapper,\n} from './NavGroup.styled'\n\nexport const NAV_GROUP_TEST_ID = 'bezier-react-nav-group'\nexport const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-react-nav-group-left-icon'\n\nfunction NavGroup({\n  as,\n  testId = NAV_GROUP_TEST_ID,\n  name,\n  style,\n  className,\n  interpolation,\n  children,\n  content,\n  rightContent,\n  leftIcon,\n  open,\n  active,\n  onClick = noop,\n}: NavGroupProps) {\n  const handleClickItem = useCallback((e?: React.MouseEvent) => {\n    onClick(e, name)\n  }, [\n    name,\n    onClick,\n  ])\n\n  const hasChildren = !isNil(children)\n  const chevronIconSource = open ? ChevronSmallDownIcon : ChevronSmallRightIcon\n  const showLeftIcon = isIconName(leftIcon)\n  const ariaName = `${name}Menu`\n\n  return (\n    <Wrapper role=\"none\">\n      <Item\n        as={as}\n        active={active}\n        style={style}\n        className={className}\n        interpolation={interpolation}\n        onClick={handleClickItem}\n        data-testid={testId}\n        role=\"menuitem\"\n        aria-haspopup={hasChildren}\n        aria-expanded={open}\n        aria-controls={ariaName}\n      >\n        <LeftIconWrapper>\n          { showLeftIcon && (\n            <LegacyIcon\n              testId={NAV_GROUP_LEFT_ICON_TEST_ID}\n              name={leftIcon}\n              size={IconSize.S}\n              color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\n            />\n          ) }\n        </LeftIconWrapper>\n\n        <Text typo={Typography.Size14} truncated>\n          { content }\n        </Text>\n\n        { hasChildren && (\n          <ChevronWrapper>\n            <Icon\n              source={chevronIconSource}\n              size={IconSize.S}\n              color=\"txt-black-dark\"\n            />\n          </ChevronWrapper>\n        ) }\n\n        { rightContent && (\n          <RightContentWrapper>\n            { rightContent }\n          </RightContentWrapper>\n        ) }\n      </Item>\n\n      { open && (\n        <ChildrenWrapper\n          role=\"menu\"\n          id={ariaName}\n        >\n          { open && children }\n        </ChildrenWrapper>\n      ) }\n    </Wrapper>\n  )\n}\n\nexport default memo(NavGroup)\n"],"names":["NAV_GROUP_TEST_ID","NAV_GROUP_LEFT_ICON_TEST_ID","NavGroup","as","testId","name","style","className","interpolation","children","content","rightContent","leftIcon","open","active","onClick","noop","handleClickItem","useCallback","e","hasChildren","isNil","chevronIconSource","ChevronSmallDownIcon","ChevronSmallRightIcon","showLeftIcon","isIconName","ariaName","React","createElement","Wrapper","role","Item","LeftIconWrapper","LegacyIcon","size","IconSize","S","color","Text","typo","Typography","Size14","truncated","ChevronWrapper","Icon","source","RightContentWrapper","ChildrenWrapper","id","memo"],"mappings":"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"}

package/dist/esm/components/Navigator/NavGroup/NavGroup.styled.mjs

@@ -0,0 +1,65 @@
+import { styled as FoundationStyled, css as FoundationCSS } from '../../../foundation/FoundationStyledComponent.mjs';
+
+const LeftIconWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "NavGroupstyled__LeftIconWrapper",
+  componentId: "sc-1s2t8no-0"
+})(["display:flex;align-items:center;min-width:20px;max-width:20px;margin-right:8px;"]);
+const ChevronWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "NavGroupstyled__ChevronWrapper",
+  componentId: "sc-1s2t8no-1"
+})(["display:flex;align-items:center;justify-content:center;min-width:20px;max-width:20px;margin-left:2px;"]);
+const RightContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "NavGroupstyled__RightContentWrapper",
+  componentId: "sc-1s2t8no-2"
+})(["display:flex;flex:1 0 auto;align-items:center;justify-content:flex-end;margin-left:8px;"]);
+const activeItemStyle = FoundationCSS`
+  color: ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-normal']};
+  background-color: ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-lightest']};
+`;
+const nonActiveItemStyle = FoundationCSS`
+  color: ${({
+  foundation
+}) => foundation?.theme?.['txt-black-darkest']};
+
+  &:hover {
+    background-color: ${({
+  foundation
+}) => foundation?.theme?.['bg-black-lighter']};
+  }
+  
+  /*
+    ':focus-visible' Pseudo class는 Safari 15.4 이후 지원하기 때문에,
+    이를 ':hover' 와 ',' 연산자로 연결할 경우 hover, focus-visible 모두 작동하지 않는 이슈가 있음.
+    https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#browser_compatibility
+  */
+  &:focus-visible {
+    background-color: ${({
+  foundation
+}) => foundation?.theme?.['bg-black-lighter']};
+  }
+`;
+const Item = /*#__PURE__*/FoundationStyled.button.withConfig({
+  displayName: "NavGroupstyled__Item",
+  componentId: "sc-1s2t8no-3"
+})(["display:flex;align-items:center;width:100%;height:28px;padding:0 6px;cursor:pointer;background-color:transparent;border:0;outline:0;", " ", " ", ""], ({
+  foundation
+}) => foundation?.rounding?.round6, ({
+  active
+}) => active ? activeItemStyle : nonActiveItemStyle, ({
+  interpolation
+}) => interpolation);
+const ChildrenWrapper = /*#__PURE__*/FoundationStyled.ul.withConfig({
+  displayName: "NavGroupstyled__ChildrenWrapper",
+  componentId: "sc-1s2t8no-4"
+})(["padding:0 0 8px;margin:0;"]);
+const Wrapper = /*#__PURE__*/FoundationStyled.li.withConfig({
+  displayName: "NavGroupstyled__Wrapper",
+  componentId: "sc-1s2t8no-5"
+})(["display:block;"]);
+
+export { ChevronWrapper, ChildrenWrapper, Item, LeftIconWrapper, RightContentWrapper, Wrapper };
+//# sourceMappingURL=NavGroup.styled.mjs.map

package/dist/esm/components/Navigator/NavGroup/NavGroup.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavGroup.styled.mjs","sources":["../../../../../src/components/Navigator/NavGroup/NavGroup.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport type { InterpolationProps } from '~/src/types/Foundation'\n\ninterface WrapperProps extends InterpolationProps {\n  active: boolean\n}\n\nexport const LeftIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  min-width: 20px;\n  max-width: 20px;\n  margin-right: 8px;\n`\n\nexport const ChevronWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  max-width: 20px;\n  margin-left: 2px;\n`\n\nexport const RightContentWrapper = styled.div`\n  display: flex;\n  flex: 1 0 auto;\n  align-items: center;\n  justify-content: flex-end;\n  margin-left: 8px;\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`\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n\n  &:hover {\n    background-color: ${({ foundation }) => foundation?.theme?.['bg-black-lighter']};\n  }\n  \n  /*\n    ':focus-visible' Pseudo class는 Safari 15.4 이후 지원하기 때문에,\n    이를 ':hover' 와 ',' 연산자로 연결할 경우 hover, focus-visible 모두 작동하지 않는 이슈가 있음.\n    https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#browser_compatibility\n  */\n  &:focus-visible {\n    background-color: ${({ foundation }) => foundation?.theme?.['bg-black-lighter']};\n  }\n`\n\nexport const Item = styled.button<WrapperProps>`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 28px;\n  padding: 0 6px;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  ${({ foundation }) => foundation?.rounding?.round6}\n\n  ${({ active }) => (active ? activeItemStyle : nonActiveItemStyle)}\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const ChildrenWrapper = styled.ul`\n  padding: 0 0 8px;\n  margin: 0;\n`\n\nexport const Wrapper = styled.li`\n  display: block;\n`\n"],"names":["LeftIconWrapper","styled","div","withConfig","displayName","componentId","ChevronWrapper","RightContentWrapper","activeItemStyle","css","foundation","theme","nonActiveItemStyle","Item","button","rounding","round6","active","interpolation","ChildrenWrapper","ul","Wrapper","li"],"mappings":";;MAWaA,eAAe,gBAAGC,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAMxC,CAAA,CAAA,CAAA,iFAAA,CAAA,EAAA;MAEYC,cAAc,gBAAGL,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAOvC,CAAA,CAAA,CAAA,uGAAA,CAAA,EAAA;MAEYE,mBAAmB,gBAAGN,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAM5C,CAAA,CAAA,CAAA,yFAAA,CAAA,EAAA;AAED,MAAMG,eAAe,GAAGC,aAAI,CAAA;AAC5B,SAAA,EAAW,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAE,CAAA;AACxE,oBAAA,EAAsB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,qBAAqB,CAAE,CAAA;AACrF,CAAC,CAAA;AAED,MAAMC,kBAAkB,GAAGH,aAAI,CAAA;AAC/B,SAAA,EAAW,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAE,CAAA;AACxE;AACA;AACA,sBAAA,EAAwB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAE,CAAA;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAA,EAAwB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAE,CAAA;AACpF;AACA,CAAC,CAAA;MAEYE,IAAI,gBAAGZ,gBAAM,CAACa,MAAM,CAAAX,UAAA,CAAA;EAAAC,WAAA,EAAA,sBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,sIAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAU7B,CAAC;AAAEK,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEK,QAAQ,EAAEC,MAAM,EAEhD,CAAC;AAAEC,EAAAA,MAAAA;AAAO,CAAC,KAAMA,MAAM,GAAGT,eAAe,GAAGI,kBAAmB,EAE/D,CAAC;AAAEM,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYC,eAAe,gBAAGlB,gBAAM,CAACmB,EAAE,CAAAjB,UAAA,CAAA;EAAAC,WAAA,EAAA,iCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAGvC,CAAA,CAAA,CAAA,2BAAA,CAAA,EAAA;MAEYgB,OAAO,gBAAGpB,gBAAM,CAACqB,EAAE,CAAAnB,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAE/B,CAAA,CAAA,CAAA,gBAAA,CAAA;;;;"}

package/dist/esm/components/Navigator/NavItem/NavItem.mjs

@@ -0,0 +1,57 @@
+import React__default, { memo, useCallback } from 'react';
+import { noop } from '../../../utils/functionUtils.mjs';
+import Text from '../../Text/Text.mjs';
+import { Wrapper, Item, LeftIconWrapper, RightContentWrapper } from './NavItem.styled.mjs';
+import LegacyIcon from '../../LegacyIcon/LegacyIcon.mjs';
+import { IconSize } from '../../Icon/Icon.types.mjs';
+import { isIconName } from '../../LegacyIcon/utils.mjs';
+import { Typography } from '../../../foundation/Typography.mjs';
+
+const NAV_ITEM_TEST_ID = 'bezier-react-nav-item';
+const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-nav-item-left-icon';
+function NavItem({
+  as,
+  testId = NAV_ITEM_TEST_ID,
+  name,
+  style,
+  className,
+  interpolation,
+  content,
+  href,
+  target = '_self',
+  rightContent,
+  leftIcon,
+  active,
+  onClick = noop
+}) {
+  const handleClickItem = useCallback(e => {
+    onClick(e, name);
+  }, [name, onClick]);
+  const showLeftIcon = isIconName(leftIcon);
+  return /*#__PURE__*/React__default.createElement(Wrapper, {
+    role: "none"
+  }, /*#__PURE__*/React__default.createElement(Item, {
+    as: as,
+    active: active,
+    style: style,
+    className: className,
+    interpolation: interpolation,
+    onClick: handleClickItem,
+    "data-testid": testId,
+    href: href,
+    target: target,
+    role: "menuitem"
+  }, /*#__PURE__*/React__default.createElement(LeftIconWrapper, null, showLeftIcon && /*#__PURE__*/React__default.createElement(LegacyIcon, {
+    testId: NAV_ITEM_LEFT_ICON_TEST_ID,
+    name: leftIcon,
+    size: IconSize.S,
+    color: active ? 'bgtxt-blue-normal' : 'txt-black-dark'
+  })), /*#__PURE__*/React__default.createElement(Text, {
+    typo: Typography.Size14,
+    truncated: true
+  }, content), rightContent && /*#__PURE__*/React__default.createElement(RightContentWrapper, null, rightContent)));
+}
+var NavItem$1 = /*#__PURE__*/memo(NavItem);
+
+export { NAV_ITEM_LEFT_ICON_TEST_ID, NAV_ITEM_TEST_ID, NavItem$1 as default };
+//# sourceMappingURL=NavItem.mjs.map

package/dist/esm/components/Navigator/NavItem/NavItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.mjs","sources":["../../../../../src/components/Navigator/NavItem/NavItem.tsx"],"sourcesContent":["import React, {\n  memo,\n  useCallback,\n} from 'react'\n\nimport { Typography } from '~/src/foundation'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport {\n  LegacyIcon,\n  isIconName,\n} from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nimport type NavItemProps from './NavItem.types'\n\nimport {\n  Item,\n  LeftIconWrapper,\n  RightContentWrapper,\n  Wrapper,\n} from './NavItem.styled'\n\nexport const NAV_ITEM_TEST_ID = 'bezier-react-nav-item'\nexport const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-nav-item-left-icon'\n\nfunction NavItem({\n  as,\n  testId = NAV_ITEM_TEST_ID,\n  name,\n  style,\n  className,\n  interpolation,\n  content,\n  href,\n  target = '_self',\n  rightContent,\n  leftIcon,\n  active,\n  onClick = noop,\n}: NavItemProps) {\n  const handleClickItem = useCallback((e?: React.MouseEvent) => {\n    onClick(e, name)\n  }, [\n    name,\n    onClick,\n  ])\n\n  const showLeftIcon = isIconName(leftIcon)\n\n  return (\n    <Wrapper role=\"none\">\n      <Item\n        as={as}\n        active={active}\n        style={style}\n        className={className}\n        interpolation={interpolation}\n        onClick={handleClickItem}\n        data-testid={testId}\n        href={href}\n        target={target}\n        role=\"menuitem\"\n      >\n        <LeftIconWrapper>\n          { showLeftIcon && (\n            <LegacyIcon\n              testId={NAV_ITEM_LEFT_ICON_TEST_ID}\n              name={leftIcon}\n              size={IconSize.S}\n              color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\n            />\n          ) }\n        </LeftIconWrapper>\n\n        <Text typo={Typography.Size14} truncated>\n          { content }\n        </Text>\n\n        { rightContent && (\n          <RightContentWrapper>\n            { rightContent }\n          </RightContentWrapper>\n        ) }\n      </Item>\n    </Wrapper>\n  )\n}\n\nexport default memo(NavItem)\n"],"names":["NAV_ITEM_TEST_ID","NAV_ITEM_LEFT_ICON_TEST_ID","NavItem","as","testId","name","style","className","interpolation","content","href","target","rightContent","leftIcon","active","onClick","noop","handleClickItem","useCallback","e","showLeftIcon","isIconName","React","createElement","Wrapper","role","Item","LeftIconWrapper","LegacyIcon","size","IconSize","S","color","Text","typo","Typography","Size14","truncated","RightContentWrapper","memo"],"mappings":";;;;;;;;;AAyBO,MAAMA,gBAAgB,GAAG,wBAAuB;AAChD,MAAMC,0BAA0B,GAAG,kCAAiC;AAE3E,SAASC,OAAOA,CAAC;EACfC,EAAE;AACFC,EAAAA,MAAM,GAAGJ,gBAAgB;EACzBK,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,aAAa;EACbC,OAAO;EACPC,IAAI;AACJC,EAAAA,MAAM,GAAG,OAAO;EAChBC,YAAY;EACZC,QAAQ;EACRC,MAAM;AACNC,EAAAA,OAAO,GAAGC,IAAAA;AACE,CAAC,EAAE;AACf,EAAA,MAAMC,eAAe,GAAGC,WAAW,CAAEC,CAAoB,IAAK;AAC5DJ,IAAAA,OAAO,CAACI,CAAC,EAAEd,IAAI,CAAC,CAAA;AAClB,GAAC,EAAE,CACDA,IAAI,EACJU,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,MAAMK,YAAY,GAAGC,UAAU,CAACR,QAAQ,CAAC,CAAA;AAEzC,EAAA,oBACES,cAAA,CAAAC,aAAA,CAACC,OAAO,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,eAClBH,cAAA,CAAAC,aAAA,CAACG,IAAI,EAAA;AACHvB,IAAAA,EAAE,EAAEA,EAAG;AACPW,IAAAA,MAAM,EAAEA,MAAO;AACfR,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BO,IAAAA,OAAO,EAAEE,eAAgB;AACzB,IAAA,aAAA,EAAab,MAAO;AACpBM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfc,IAAAA,IAAI,EAAC,UAAA;AAAU,GAAA,eAEfH,cAAA,CAAAC,aAAA,CAACI,eAAe,EAAA,IAAA,EACZP,YAAY,iBACZE,cAAA,CAAAC,aAAA,CAACK,UAAU,EAAA;AACTxB,IAAAA,MAAM,EAAEH,0BAA2B;AACnCI,IAAAA,IAAI,EAAEQ,QAAS;IACfgB,IAAI,EAAEC,QAAQ,CAACC,CAAE;AACjBC,IAAAA,KAAK,EAAElB,MAAM,GAAG,mBAAmB,GAAG,gBAAA;AAAiB,GACxD,CAEY,CAAC,eAElBQ,cAAA,CAAAC,aAAA,CAACU,IAAI,EAAA;IAACC,IAAI,EAAEC,UAAU,CAACC,MAAO;IAACC,SAAS,EAAA,IAAA;AAAA,GAAA,EACpC5B,OACE,CAAC,EAELG,YAAY,iBACZU,cAAA,CAAAC,aAAA,CAACe,mBAAmB,EAAA,IAAA,EAChB1B,YACiB,CAEnB,CACC,CAAC,CAAA;AAEd,CAAA;AAEA,gBAAe2B,aAAAA,IAAI,CAACrC,OAAO,CAAC;;;;"}

package/dist/esm/components/Navigator/NavItem/NavItem.styled.mjs

@@ -0,0 +1,58 @@
+import { styled as FoundationStyled, css as FoundationCSS } from '../../../foundation/FoundationStyledComponent.mjs';
+
+const LeftIconWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "NavItemstyled__LeftIconWrapper",
+  componentId: "sc-4sgqjd-0"
+})(["display:flex;align-items:center;min-width:20px;max-width:20px;margin-right:8px;"]);
+const RightContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "NavItemstyled__RightContentWrapper",
+  componentId: "sc-4sgqjd-1"
+})(["display:flex;flex:1 0 auto;align-items:center;justify-content:flex-end;margin-left:8px;"]);
+const activeItemStyle = FoundationCSS`
+  color: ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-normal']};
+  background-color: ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-lightest']};
+`;
+const nonActiveItemStyle = FoundationCSS`
+  color: ${({
+  foundation
+}) => foundation?.theme?.['txt-black-darkest']};
+  
+  
+  &:hover {
+    background-color: ${({
+  foundation
+}) => foundation?.theme?.['bg-black-lighter']};
+  }
+  
+  /*
+    ':focus-visible' Pseudo class는 Safari 15.4 이후 지원하기 때문에,
+    이를 ':hover' 와 ',' 연산자로 연결할 경우 hover, focus-visible 모두 작동하지 않는 이슈가 있음.
+    https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#browser_compatibility
+  */
+  &:focus-visible {
+    background-color: ${({
+  foundation
+}) => foundation?.theme?.['bg-black-lighter']};
+  }
+`;
+const Item = /*#__PURE__*/FoundationStyled.a.withConfig({
+  displayName: "NavItemstyled__Item",
+  componentId: "sc-4sgqjd-2"
+})(["display:flex;align-items:center;height:28px;padding:0 6px;text-decoration:none;outline:0;", " ", " ", ""], ({
+  foundation
+}) => foundation?.rounding?.round6, ({
+  active
+}) => active ? activeItemStyle : nonActiveItemStyle, ({
+  interpolation
+}) => interpolation);
+const Wrapper = /*#__PURE__*/FoundationStyled.li.withConfig({
+  displayName: "NavItemstyled__Wrapper",
+  componentId: "sc-4sgqjd-3"
+})(["display:block;"]);
+
+export { Item, LeftIconWrapper, RightContentWrapper, Wrapper };
+//# sourceMappingURL=NavItem.styled.mjs.map

package/dist/esm/components/Navigator/NavItem/NavItem.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.styled.mjs","sources":["../../../../../src/components/Navigator/NavItem/NavItem.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport type { InterpolationProps } from '~/src/types/Foundation'\n\ninterface WrapperProps extends InterpolationProps {\n  active: boolean\n}\n\nexport const LeftIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  min-width: 20px;\n  max-width: 20px;\n  margin-right: 8px;\n`\n\nexport const RightContentWrapper = styled.div`\n  display: flex;\n  flex: 1 0 auto;\n  align-items: center;\n  justify-content: flex-end;\n  margin-left: 8px;\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`\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n  \n  \n  &:hover {\n    background-color: ${({ foundation }) => foundation?.theme?.['bg-black-lighter']};\n  }\n  \n  /*\n    ':focus-visible' Pseudo class는 Safari 15.4 이후 지원하기 때문에,\n    이를 ':hover' 와 ',' 연산자로 연결할 경우 hover, focus-visible 모두 작동하지 않는 이슈가 있음.\n    https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#browser_compatibility\n  */\n  &:focus-visible {\n    background-color: ${({ foundation }) => foundation?.theme?.['bg-black-lighter']};\n  }\n`\n\nexport const Item = styled.a<WrapperProps>`\n  display: flex;\n  align-items: center;\n  height: 28px;\n  padding: 0 6px;\n  text-decoration: none;\n  outline: 0;\n  ${({ foundation }) => foundation?.rounding?.round6}\n\n  ${({ active }) => (active ? activeItemStyle : nonActiveItemStyle)}\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const Wrapper = styled.li`\n  display: block;\n`\n"],"names":["LeftIconWrapper","styled","div","withConfig","displayName","componentId","RightContentWrapper","activeItemStyle","css","foundation","theme","nonActiveItemStyle","Item","a","rounding","round6","active","interpolation","Wrapper","li"],"mappings":";;MAWaA,eAAe,gBAAGC,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAMxC,CAAA,CAAA,CAAA,iFAAA,CAAA,EAAA;MAEYC,mBAAmB,gBAAGL,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAM5C,CAAA,CAAA,CAAA,yFAAA,CAAA,EAAA;AAED,MAAME,eAAe,GAAGC,aAAI,CAAA;AAC5B,SAAA,EAAW,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAE,CAAA;AACxE,oBAAA,EAAsB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,qBAAqB,CAAE,CAAA;AACrF,CAAC,CAAA;AAED,MAAMC,kBAAkB,GAAGH,aAAI,CAAA;AAC/B,SAAA,EAAW,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAE,CAAA;AACxE;AACA;AACA;AACA,sBAAA,EAAwB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAE,CAAA;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAA,EAAwB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAE,CAAA;AACpF;AACA,CAAC,CAAA;MAEYE,IAAI,gBAAGX,gBAAM,CAACY,CAAC,CAAAV,UAAA,CAAA;EAAAC,WAAA,EAAA,qBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2FAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAOxB,CAAC;AAAEI,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEK,QAAQ,EAAEC,MAAM,EAEhD,CAAC;AAAEC,EAAAA,MAAAA;AAAO,CAAC,KAAMA,MAAM,GAAGT,eAAe,GAAGI,kBAAmB,EAE/D,CAAC;AAAEM,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYC,OAAO,gBAAGjB,gBAAM,CAACkB,EAAE,CAAAhB,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAE/B,CAAA,CAAA,CAAA,gBAAA,CAAA;;;;"}

package/dist/esm/components/OutlineItem/OutlineItem.mjs

@@ -0,0 +1,189 @@
+import React__default, { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { isBezierIcon, ChevronSmallDownIcon, ChevronSmallRightIcon } from '@channel.io/bezier-icons';
+import classNames from '../../node_modules/classnames/index.mjs';
+import { noop } from '../../utils/functionUtils.mjs';
+import { isNil } from '../../utils/typeUtils.mjs';
+import { OutlineItemContext } from './OutlineItemContext.mjs';
+import useOutlineItemContext from './useOutlineItemContext.mjs';
+import { ChevronWrapper, StyledIcon, LeftContentWrapper, ContentWrapper, GroupItemWrapper } from './OutlineItem.styled.mjs';
+import { IconSize } from '../Icon/Icon.types.mjs';
+
+const LIST_GROUP_PADDING_LEFT = 16;
+const OUTLINE_ITEM_TEST_ID = 'bezier-react-outline-item';
+const OUTLINE_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-outline-item-left-icon';
+function OutlineItem({
+  as,
+  testId = OUTLINE_ITEM_TEST_ID,
+  leftIconTestId = OUTLINE_ITEM_LEFT_ICON_TEST_ID,
+  style,
+  className,
+  interpolation,
+  contentClassName,
+  contentInterpolation,
+  iconClassName,
+  iconInterpolation,
+  paddingLeft: givenPaddingLeft,
+  open = false,
+  active: givenActive,
+  focused = false,
+  leftContent,
+  leftIcon,
+  leftIconColor = 'txt-black-dark',
+  disableChevron = false,
+  disableIconActive = false,
+  name,
+  href,
+  content = null,
+  rightContent = null,
+  hide = false,
+  onOpen = noop,
+  onClickArrow = noop,
+  /* OptionMenuHost Props */
+  selectedOutlineItemIndex = null,
+  onChangeOption = noop,
+  /* HTMLAttribute props */
+  onClick: givenOnClick = noop,
+  children
+}, forwardedRef) {
+  const [currentOutlineItemIndex, setCurrentOutlineItemIndex] = useState(selectedOutlineItemIndex);
+  useEffect(() => {
+    const childs = React__default.Children.toArray(children);
+    if (isNil(selectedOutlineItemIndex) || selectedOutlineItemIndex < childs.length && selectedOutlineItemIndex < 0) {
+      setCurrentOutlineItemIndex(null);
+      return;
+    }
+    const element = childs[selectedOutlineItemIndex];
+    if ( /*#__PURE__*/React__default.isValidElement(element) && isNil(element.props.children)) {
+      if (element.props.href) {
+        return;
+      }
+      setCurrentOutlineItemIndex(selectedOutlineItemIndex);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedOutlineItemIndex]);
+  useEffect(() => {
+    if (open) {
+      onOpen(name);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  const handleClickItem = useCallback((itemIndex, optionKey) => {
+    onChangeOption(name, optionKey, itemIndex);
+  }, [name, onChangeOption]);
+  const handleClickIcon = useCallback(event => {
+    if (onClickArrow) {
+      event?.stopPropagation();
+      onClickArrow(name);
+    }
+  }, [name, onClickArrow]);
+  const context = useOutlineItemContext({
+    paddingLeft: givenPaddingLeft,
+    active: givenActive,
+    onClick: givenOnClick
+  }, LIST_GROUP_PADDING_LEFT);
+  const {
+    paddingLeft,
+    active,
+    onClick
+  } = context;
+  const handleClickGroup = useCallback(event => {
+    onClick(event, name);
+  }, [name, onClick]);
+  const chevronComponent = useMemo(() => {
+    if (disableChevron) {
+      return null;
+    }
+    const chevronSource = open ? ChevronSmallDownIcon : ChevronSmallRightIcon;
+    const showChevron = !isNil(children);
+    return /*#__PURE__*/React__default.createElement(ChevronWrapper, null, showChevron && /*#__PURE__*/React__default.createElement(StyledIcon, {
+      source: chevronSource,
+      size: IconSize.XS,
+      onClick: handleClickIcon,
+      color: "txt-black-darker"
+    }));
+  }, [children, disableChevron, handleClickIcon, open]);
+  const leftComponent = useMemo(() => {
+    if (!isNil(leftContent)) {
+      return /*#__PURE__*/React__default.createElement(LeftContentWrapper, null, leftContent);
+    }
+    const isIcon = isBezierIcon(leftIcon);
+    if (isIcon) {
+      const iconProps = {
+        testId: leftIconTestId,
+        className: classNames(iconClassName, !disableIconActive && active && 'active'),
+        interpolation: iconInterpolation,
+        size: IconSize.S,
+        color: leftIconColor
+      };
+      const Icon = (() => {
+        if (isIcon) {
+          return /*#__PURE__*/React__default.createElement(StyledIcon, Object.assign({}, iconProps, {
+            source: leftIcon
+          }));
+        }
+        return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+      })();
+      return /*#__PURE__*/React__default.createElement(LeftContentWrapper, null, Icon);
+    }
+    return null;
+  }, [active, disableIconActive, iconClassName, iconInterpolation, leftContent, leftIcon, leftIconColor, leftIconTestId]);
+  const ContentComponent = useMemo(() => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, chevronComponent, leftComponent, /*#__PURE__*/React__default.createElement(ContentWrapper, {
+    className: contentClassName,
+    interpolation: contentInterpolation
+  }, content), rightContent), [chevronComponent, leftComponent, contentClassName, contentInterpolation, content, rightContent]);
+  const Items = useMemo(() => React__default.Children.map(children, (element, index) => {
+    if (! /*#__PURE__*/React__default.isValidElement(element)) {
+      return element;
+    }
+
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    const passedContext = {
+      ...context,
+      active: currentOutlineItemIndex === index,
+      onClick: () => handleClickItem(index, element.props.optionKey)
+    };
+    return /*#__PURE__*/React__default.createElement(OutlineItemContext.Provider, {
+      value: passedContext
+    }, element);
+  }), [children, context, currentOutlineItemIndex, handleClickItem]);
+  if (hide) {
+    return null;
+  }
+  if (!isNil(href)) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(GroupItemWrapper, {
+      ref: forwardedRef,
+      as: "a",
+      href: href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: style,
+      className: className,
+      interpolation: interpolation,
+      active: false,
+      focused: focused,
+      currentOutlineItemIndex: currentOutlineItemIndex,
+      paddingLeft: paddingLeft,
+      onClick: handleClickGroup,
+      "data-testid": testId,
+      "data-active-index": currentOutlineItemIndex
+    }, ContentComponent), open && Items);
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(GroupItemWrapper, {
+    as: as,
+    ref: forwardedRef,
+    style: style,
+    className: className,
+    interpolation: interpolation,
+    active: active,
+    focused: focused,
+    currentOutlineItemIndex: currentOutlineItemIndex,
+    paddingLeft: paddingLeft,
+    onClick: handleClickGroup,
+    "data-testid": testId,
+    "data-active-index": currentOutlineItemIndex
+  }, ContentComponent), open && Items);
+}
+var OutlineItem$1 = /*#__PURE__*/forwardRef(OutlineItem);
+
+export { OUTLINE_ITEM_LEFT_ICON_TEST_ID, OUTLINE_ITEM_TEST_ID, OutlineItem$1 as default };
+//# sourceMappingURL=OutlineItem.mjs.map

package/dist/esm/components/OutlineItem/OutlineItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlineItem.mjs","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'\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} 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 isIcon = isBezierIcon(leftIcon)\n\n    if (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 (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","isIcon","isBezierIcon","iconProps","classNames","S","Icon","Object","assign","Fragment","ContentComponent","ContentWrapper","Items","map","index","passedContext","OutlineItemContext","Provider","value","GroupItemWrapper","ref","target","rel","forwardRef"],"mappings":";;;;;;;;;;AAgCA,MAAMA,uBAAuB,GAAG,EAAE,CAAA;AAE3B,MAAMC,oBAAoB,GAAG,4BAA2B;AACxD,MAAMC,8BAA8B,GAAG,sCAAqC;AAEnF,SAASC,WAAWA,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;AACRC,EAAAA,aAAa,GAAG,gBAAgB;AAChCC,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;AACgB,CAAC,EACnBC,YAAoC,EACpC;EACA,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGC,QAAQ,CAAgBR,wBAAwB,CAAC,CAAA;AAE/GS,EAAAA,SAAS,CAAC,MAAM;IACd,MAAMC,MAAM,GAAGC,cAAK,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;AACF,KAAA;AAEA,IAAA,MAAMS,OAAO,GAAGN,MAAM,CAACV,wBAAwB,CAAC,CAAA;AAEhD,IAAA,kBAAIW,cAAK,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;AAAO,OAAA;MAEjCc,0BAA0B,CAACP,wBAAwB,CAAC,CAAA;AACtD,KAAA;AACA;AACF,GAAC,EAAE,CAACA,wBAAwB,CAAC,CAAC,CAAA;AAE9BS,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAI1B,IAAI,EAAE;MACRc,MAAM,CAACL,IAAI,CAAC,CAAA;AACd,KAAA;AACA;AACF,GAAC,EAAE,CAACT,IAAI,CAAC,CAAC,CAAA;EAEV,MAAMoC,eAAe,GAAGC,WAAW,CAAC,CAClCC,SAAiB,EACjBC,SAAiB,KACd;AACHrB,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,IAAK;AAC/E,IAAA,IAAIzB,YAAY,EAAE;MAChByB,KAAK,EAAEC,eAAe,EAAE,CAAA;MACxB1B,YAAY,CAACP,IAAI,CAAC,CAAA;AACpB,KAAA;AACF,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;AAAQ,GAAC,GAAGwB,OAAO,CAAA;AAEhD,EAAA,MAAME,gBAAgB,GAAGR,WAAW,CAAEI,KAAwB,IAAK;AACjEtB,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,MAAM;AACrC,IAAA,IAAIxC,cAAc,EAAE;AAClB,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;AAEA,IAAA,MAAMyC,aAAa,GAAGhD,IAAI,GAAGiD,oBAAoB,GAAGC,qBAAqB,CAAA;AACzE,IAAA,MAAMC,WAAW,GAAG,CAACpB,KAAK,CAACV,QAAQ,CAAC,CAAA;AAEpC,IAAA,oBACEO,cAAA,CAAAwB,aAAA,CAACC,cAAc,EAAA,IAAA,EACXF,WAAW,iBACXvB,cAAA,CAAAwB,aAAA,CAACE,UAAU,EAAA;AACTC,MAAAA,MAAM,EAAEP,aAAc;MACtBQ,IAAI,EAAEC,QAAQ,CAACC,EAAG;AAClBvC,MAAAA,OAAO,EAAEqB,eAAgB;AACzBmB,MAAAA,KAAK,EAAC,kBAAA;AAAkB,KACzB,CAEW,CAAC,CAAA;GAEpB,EAAE,CACDtC,QAAQ,EACRd,cAAc,EACdiC,eAAe,EACfxC,IAAI,CACL,CAAC,CAAA;AAEF,EAAA,MAAM4D,aAAa,GAAGb,OAAO,CAAC,MAAM;AAClC,IAAA,IAAI,CAAChB,KAAK,CAAC3B,WAAW,CAAC,EAAE;AACvB,MAAA,oBACEwB,cAAA,CAAAwB,aAAA,CAACS,kBAAkB,EAAA,IAAA,EACfzD,WACgB,CAAC,CAAA;AAEzB,KAAA;AAEA,IAAA,MAAM0D,MAAM,GAAGC,YAAY,CAAC1D,QAAQ,CAAC,CAAA;AAErC,IAAA,IAAIyD,MAAM,EAAE;AACV,MAAA,MAAME,SAAS,GAAG;AAChB3E,QAAAA,MAAM,EAAEC,cAAc;QACtBE,SAAS,EAAEyE,UAAU,CACnBrE,aAAa,EACZ,CAACY,iBAAiB,IAAIP,MAAM,IAAK,QACpC,CAAC;AACDR,QAAAA,aAAa,EAAEI,iBAAiB;QAChC2D,IAAI,EAAEC,QAAQ,CAACS,CAAC;AAChBP,QAAAA,KAAK,EAAErD,aAAAA;OACR,CAAA;MAED,MAAM6D,IAAI,GAAG,CAAC,MAAM;AAClB,QAAA,IAAIL,MAAM,EAAE;UACV,oBACElC,cAAA,CAAAwB,aAAA,CAACE,UAAU,EAAAc,MAAA,CAAAC,MAAA,CAAA,EAAA,EACLL,SAAS,EAAA;AACbT,YAAAA,MAAM,EAAElD,QAAAA;AAAS,WAAA,CAClB,CAAC,CAAA;AAEN,SAAA;QACA,oBAAOuB,cAAA,CAAAwB,aAAA,CAAAxB,cAAA,CAAA0C,QAAA,MAAI,CAAC,CAAA;AACd,OAAC,GAAG,CAAA;AAEJ,MAAA,oBACE1C,cAAA,CAAAwB,aAAA,CAACS,kBAAkB,EAAA,IAAA,EACfM,IACgB,CAAC,CAAA;AAEzB,KAAA;AAEA,IAAA,OAAO,IAAI,CAAA;AACb,GAAC,EAAE,CACDlE,MAAM,EACNO,iBAAiB,EACjBZ,aAAa,EACbC,iBAAiB,EACjBO,WAAW,EACXC,QAAQ,EACRC,aAAa,EACbhB,cAAc,CACf,CAAC,CAAA;EAEF,MAAMiF,gBAAgB,GAAGxB,OAAO,CAAC,mBAC/BnB,cAAA,CAAAwB,aAAA,CAAAxB,cAAA,CAAA0C,QAAA,EAAA,IAAA,EACIxB,gBAAgB,EAChBc,aAAa,eACfhC,cAAA,CAAAwB,aAAA,CAACoB,cAAc,EAAA;AACbhF,IAAAA,SAAS,EAAEE,gBAAiB;AAC5BD,IAAAA,aAAa,EAAEE,oBAAAA;AAAqB,GAAA,EAElCgB,OACY,CAAC,EACfC,YACF,CACH,EACD,CACEkC,gBAAgB,EAChBc,aAAa,EACblE,gBAAgB,EAChBC,oBAAoB,EACpBgB,OAAO,EACPC,YAAY,CACb,CAAC,CAAA;AAEF,EAAA,MAAM6D,KAAK,GAAG1B,OAAO,CAAC,MACpBnB,cAAK,CAACC,QAAQ,CAAC6C,GAAG,CAACrD,QAAQ,EAAE,CAACY,OAAO,EAAE0C,KAAK,KAAK;AAC/C,IAAA,IAAI,eAAC/C,cAAK,CAACM,cAAc,CAACD,OAAO,CAAC,EAAE;AAClC,MAAA,OAAOA,OAAO,CAAA;AAChB,KAAA;;AAEA;AACA,IAAA,MAAM2C,aAAa,GAAG;AACpB,MAAA,GAAGjC,OAAO;MACV1C,MAAM,EAAEsB,uBAAuB,KAAKoD,KAAK;MACzCxD,OAAO,EAAEA,MAAMiB,eAAe,CAACuC,KAAK,EAAE1C,OAAO,CAACE,KAAK,CAACI,SAAS,CAAA;KAC9D,CAAA;AAED,IAAA,oBACEX,cAAA,CAAAwB,aAAA,CAACyB,kBAAkB,CAACC,QAAQ,EAAA;AAACC,MAAAA,KAAK,EAAEH,aAAAA;AAAc,KAAA,EAC9C3C,OACyB,CAAC,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;AAAC,GAAA;AAExB,EAAA,IAAI,CAACkB,KAAK,CAACrB,IAAI,CAAC,EAAE;AAChB,IAAA,oBACEkB,cAAA,CAAAwB,aAAA,CAAAxB,cAAA,CAAA0C,QAAA,EAAA,IAAA,eACE1C,cAAA,CAAAwB,aAAA,CAAC4B,gBAAgB,EAAA;AACfC,MAAAA,GAAG,EAAE3D,YAA6C;AAClDlC,MAAAA,EAAE,EAAC,GAAG;AACNsB,MAAAA,IAAI,EAAEA,IAAK;AACXwE,MAAAA,MAAM,EAAC,QAAQ;AACfC,MAAAA,GAAG,EAAC,qBAAqB;AACzB5F,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,aAAa,EAAEA,aAAc;AAC7BQ,MAAAA,MAAM,EAAE,KAAM;AACdE,MAAAA,OAAO,EAAEA,OAAQ;AACjBoB,MAAAA,uBAAuB,EAAEA,uBAAwB;AACjDzB,MAAAA,WAAW,EAAEA,WAAY;AACzBqB,MAAAA,OAAO,EAAE0B,gBAAiB;AAC1B,MAAA,aAAA,EAAaxD,MAAO;MACpB,mBAAmBkC,EAAAA,uBAAAA;AAAwB,KAAA,EAEzCgD,gBACc,CAAC,EACjBvE,IAAI,IACJyE,KAEF,CAAC,CAAA;AAEP,GAAA;AAEA,EAAA,oBACE7C,cAAA,CAAAwB,aAAA,CAAAxB,cAAA,CAAA0C,QAAA,EAAA,IAAA,eACE1C,cAAA,CAAAwB,aAAA,CAAC4B,gBAAgB,EAAA;AACf5F,IAAAA,EAAE,EAAEA,EAAG;AACP6F,IAAAA,GAAG,EAAE3D,YAAa;AAClB/B,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BQ,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,OAAO,EAAEA,OAAQ;AACjBoB,IAAAA,uBAAuB,EAAEA,uBAAwB;AACjDzB,IAAAA,WAAW,EAAEA,WAAY;AACzBqB,IAAAA,OAAO,EAAE0B,gBAAiB;AAC1B,IAAA,aAAA,EAAaxD,MAAO;IACpB,mBAAmBkC,EAAAA,uBAAAA;AAAwB,GAAA,EAEzCgD,gBACc,CAAC,EACjBvE,IAAI,IACJyE,KAEF,CAAC,CAAA;AAEP,CAAA;AAEA,oBAAeW,aAAAA,UAAU,CAACjG,WAAW,CAAC;;;;"}

package/dist/esm/components/OutlineItem/OutlineItem.styled.mjs

@@ -0,0 +1,62 @@
+import { isNil } from '../../utils/typeUtils.mjs';
+import { Icon } from '../Icon/Icon.mjs';
+import { css as FoundationCSS, styled as FoundationStyled } from '../../foundation/FoundationStyledComponent.mjs';
+import { ellipsis } from '../../foundation/Mixins.mjs';
+
+const FocusedItemStyle = FoundationCSS`
+  background-color: ${props => isNil(props.currentOutlineItemIndex) && props.foundation?.theme?.['bg-black-lighter']};
+`;
+const ActiveItemStyle = FoundationCSS`
+  color: ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-normal']};
+  background-color: ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-lightest']};
+`;
+const NonActiveItemStyle = FoundationCSS`
+  ${({
+  focused
+}) => focused && FocusedItemStyle}
+
+  &:hover {
+    ${FocusedItemStyle}
+  }
+`;
+const GroupItemWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "OutlineItemstyled__GroupItemWrapper",
+  componentId: "sc-11qetcc-0"
+})(["display:flex;align-items:center;height:28px;padding:0 6px;padding-left:", ";font-size:14px;font-weight:normal;color:", ";text-decoration:none;cursor:pointer;border-radius:6px;", ";", " ", ""], ({
+  paddingLeft
+}) => `${paddingLeft}px`, ({
+  foundation
+}) => foundation?.theme?.['txt-black-darkest'], ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['background-color', 'color']), ({
+  active
+}) => active ? ActiveItemStyle : NonActiveItemStyle, ({
+  interpolation
+}) => interpolation);
+const ChevronWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "OutlineItemstyled__ChevronWrapper",
+  componentId: "sc-11qetcc-1"
+})(["display:flex;align-items:center;justify-content:center;width:16px;height:100%;"]);
+const LeftContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "OutlineItemstyled__LeftContentWrapper",
+  componentId: "sc-11qetcc-2"
+})(["display:flex;align-items:center;margin-right:8px;"]);
+const StyledIcon = /*#__PURE__*/FoundationStyled(Icon).withConfig({
+  displayName: "OutlineItemstyled__StyledIcon",
+  componentId: "sc-11qetcc-3"
+})(["&.active{color:var(--bgtxt-blue-normal);}", ""], ({
+  interpolation
+}) => interpolation);
+const ContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "OutlineItemstyled__ContentWrapper",
+  componentId: "sc-11qetcc-4"
+})(["flex:1;", " ", ""], ellipsis(), ({
+  interpolation
+}) => interpolation);
+
+export { ChevronWrapper, ContentWrapper, GroupItemWrapper, LeftContentWrapper, StyledIcon };
+//# sourceMappingURL=OutlineItem.styled.mjs.map

package/dist/esm/components/OutlineItem/OutlineItem.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlineItem.styled.mjs","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'\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 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","isNil","currentOutlineItemIndex","foundation","theme","ActiveItemStyle","NonActiveItemStyle","focused","GroupItemWrapper","styled","div","withConfig","displayName","componentId","paddingLeft","transition","getTransitionsCSS","active","interpolation","ChevronWrapper","LeftContentWrapper","StyledIcon","Icon","ContentWrapper","ellipsis"],"mappings":";;;;;AAkBA,MAAMA,gBAAgB,GAAGC,aAAkB,CAAA;AAC3C,oBAAA,EAAsBC,KAAK,IAAKC,KAAK,CAACD,KAAK,CAACE,uBAAuB,CAAC,IAAIF,KAAK,CAACG,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAG,CAAA;AACvH,CAAC,CAAA;AAED,MAAMC,eAAe,GAAGN,aAAI,CAAA;AAC5B,SAAA,EAAW,CAAC;AAAEI,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAE,CAAA;AACxE,oBAAA,EAAsB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,qBAAqB,CAAE,CAAA;AACrF,CAAC,CAAA;AAED,MAAME,kBAAkB,GAAGP,aAAkB,CAAA;AAC7C,EAAA,EAAI,CAAC;AAAEQ,EAAAA,OAAAA;AAAQ,CAAC,KAAKA,OAAO,IAAIT,gBAAiB,CAAA;AACjD;AACA;AACA,IAAA,EAAMA,gBAAiB,CAAA;AACvB;AACA,CAAC,CAAA;MAEYU,gBAAgB,gBAAGC,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yEAAA,EAAA,2CAAA,EAAA,yDAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAKxB,CAAC;AAAEC,EAAAA,WAAAA;AAAY,CAAC,KAAM,CAAA,EAAEA,WAAY,CAAA,EAAA,CAAG,EAG9C,CAAC;AAAEX,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAC,EAKnE,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEY,UAAU,EAAEC,iBAAiB,CAAC,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC,EAE5F,CAAC;AAAEC,EAAAA,MAAAA;AAAO,CAAC,KAAMA,MAAM,GAAGZ,eAAe,GAAGC,kBAAmB,EAE/D,CAAC;AAAEY,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYC,cAAc,gBAAGV,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAMvC,CAAA,CAAA,CAAA,gFAAA,CAAA,EAAA;MAEYO,kBAAkB,gBAAGX,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,uCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAI3C,CAAA,CAAA,CAAA,mDAAA,CAAA,EAAA;AAEM,MAAMQ,UAAU,gBAAGZ,gBAAM,CAACa,IAAI,CAAC,CAAAX,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2CAAA,EAAA,EAAA,CAAA,EAKlC,CAAC;AAAEK,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYK,cAAc,gBAAGd,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,SAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAGpCW,QAAQ,EAAE,EAEV,CAAC;AAAEN,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa;;;;"}