@channel.io/bezier-react 1.6.2 → 1.7.1

package/dist/cjs/components/ListItem/utils.js

@@ -6,22 +6,34 @@ var FoundationStyledComponent = require('../../foundation/FoundationStyledCompon
 function getStyleOfSize(size) {
   switch (size) {
     case ListItem_types.ListItemSize.S:
-      return FoundationStyledComponent.css(["padding:4px 6px;", ";"], ({
+      return FoundationStyledComponent.css`
+        padding: 4px 6px;
+        ${({
         foundation
-      }) => foundation?.rounding.round6);
+      }) => foundation?.rounding.round6};
+      `;
     case ListItem_types.ListItemSize.L:
-      return FoundationStyledComponent.css(["padding:8px 6px;", ";"], ({
+      return FoundationStyledComponent.css`
+        padding: 8px 6px;
+        ${({
         foundation
-      }) => foundation?.rounding.round8);
+      }) => foundation?.rounding.round8};
+      `;
     case ListItem_types.ListItemSize.XL:
-      return FoundationStyledComponent.css(["padding:10px 6px;", ";"], ({
+      return FoundationStyledComponent.css`
+        padding: 10px 6px;
+        ${({
         foundation
-      }) => foundation?.rounding.round12);
+      }) => foundation?.rounding.round12};
+      `;
     case ListItem_types.ListItemSize.M:
     default:
-      return FoundationStyledComponent.css(["padding:6px;", ";"], ({
+      return FoundationStyledComponent.css`
+        padding: 6px;
+        ${({
         foundation
-      }) => foundation?.rounding.round6);
+      }) => foundation?.rounding.round6};
+      `;
   }
 }
 

package/dist/cjs/components/ListItem/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/ListItem/utils.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport { ListItemSize } from './ListItem.types'\n\nexport function getStyleOfSize(size?: ListItemSize) {\n  switch (size) {\n    case ListItemSize.S:\n      return css`\n        padding: 4px 6px;\n        ${({ foundation }) => foundation?.rounding.round6};\n      `\n    case ListItemSize.L:\n      return css`\n        padding: 8px 6px;\n        ${({ foundation }) => foundation?.rounding.round8};\n      `\n    case ListItemSize.XL:\n      return css`\n        padding: 10px 6px;\n        ${({ foundation }) => foundation?.rounding.round12};\n      `\n    case ListItemSize.M:\n    default:\n      return css`\n        padding: 6px;\n        ${({ foundation }) => foundation?.rounding.round6};\n      `\n  }\n}\n"],"names":["getStyleOfSize","size","ListItemSize","S","css","foundation","rounding","round6","L","round8","XL","round12","M"],"mappings":";;;;;AAIO,SAASA,cAAcA,CAACC,IAAmB,EAAE;AAClD,EAAA,QAAQA,IAAI;IACV,KAAKC,2BAAY,CAACC,CAAC;MACjB,OAAOC,6BAAG,4BAEN,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACC,MAAM,CAAA,CAAA;IAErD,KAAKL,2BAAY,CAACM,CAAC;MACjB,OAAOJ,6BAAG,4BAEN,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACG,MAAM,CAAA,CAAA;IAErD,KAAKP,2BAAY,CAACQ,EAAE;MAClB,OAAON,6BAAG,6BAEN,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACK,OAAO,CAAA,CAAA;IAEtD,KAAKT,2BAAY,CAACU,CAAC,CAAA;AACnB,IAAA;MACE,OAAOR,6BAAG,wBAEN,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACC,MAAM,CAAA,CAAA;AAEvD,GAAA;AACF;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/ListItem/utils.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport { ListItemSize } from './ListItem.types'\n\nexport function getStyleOfSize(size?: ListItemSize) {\n  switch (size) {\n    case ListItemSize.S:\n      return css`\n        padding: 4px 6px;\n        ${({ foundation }) => foundation?.rounding.round6};\n      `\n    case ListItemSize.L:\n      return css`\n        padding: 8px 6px;\n        ${({ foundation }) => foundation?.rounding.round8};\n      `\n    case ListItemSize.XL:\n      return css`\n        padding: 10px 6px;\n        ${({ foundation }) => foundation?.rounding.round12};\n      `\n    case ListItemSize.M:\n    default:\n      return css`\n        padding: 6px;\n        ${({ foundation }) => foundation?.rounding.round6};\n      `\n  }\n}\n"],"names":["getStyleOfSize","size","ListItemSize","S","css","foundation","rounding","round6","L","round8","XL","round12","M"],"mappings":";;;;;AAIO,SAASA,cAAcA,CAACC,IAAmB,EAAE;AAClD,EAAA,QAAQA,IAAI;IACV,KAAKC,2BAAY,CAACC,CAAC;AACjB,MAAA,OAAOC,6BAAI,CAAA;AACjB;AACA,QAAA,EAAU,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACC,MAAO,CAAA;AAC1D,MAAO,CAAA,CAAA;IACH,KAAKL,2BAAY,CAACM,CAAC;AACjB,MAAA,OAAOJ,6BAAI,CAAA;AACjB;AACA,QAAA,EAAU,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACG,MAAO,CAAA;AAC1D,MAAO,CAAA,CAAA;IACH,KAAKP,2BAAY,CAACQ,EAAE;AAClB,MAAA,OAAON,6BAAI,CAAA;AACjB;AACA,QAAA,EAAU,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACK,OAAQ,CAAA;AAC3D,MAAO,CAAA,CAAA;IACH,KAAKT,2BAAY,CAACU,CAAC,CAAA;AACnB,IAAA;AACE,MAAA,OAAOR,6BAAI,CAAA;AACjB;AACA,QAAA,EAAU,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACC,MAAO,CAAA;AAC1D,MAAO,CAAA,CAAA;AACL,GAAA;AACF;;;;"}

package/dist/cjs/components/ListMenuTitle/ListMenuTitle.js

@@ -8,17 +8,17 @@ var typeUtils = require('../../utils/typeUtils.js');
 var ListMenuTitle_styled = require('./ListMenuTitle.styled.js');
 
 const SIDEBAR_MENU_TITLE_TEST_ID = 'bezier-react-sidebar-menu-title';
-function ListMenuTitle({
+const ListMenuTitle = /*#__PURE__*/React.forwardRef(function ListMenuTitle({
   as,
   testId = SIDEBAR_MENU_TITLE_TEST_ID,
   content,
   hide = false,
   rightAction = null,
-  onClick = functionUtils.noop,
   onClickAction = functionUtils.noop,
   style,
-  className
-}) {
+  className,
+  ...rest
+}, forwardedRef) {
   const handleClickAction = React.useCallback(ev => {
     ev.stopPropagation();
     onClickAction();
@@ -26,17 +26,18 @@ function ListMenuTitle({
   if (hide) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(ListMenuTitle_styled.Wrapper, {
+  return /*#__PURE__*/React.createElement(ListMenuTitle_styled.Wrapper, Object.assign({}, rest, {
+    ref: forwardedRef,
     "data-testid": testId,
     as: as,
     style: style,
-    className: className,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(ListMenuTitle_styled.TitleWrapper, null, content), !typeUtils.isNil(rightAction) && /*#__PURE__*/React.createElement("div", {
+    className: className
+  }), /*#__PURE__*/React.createElement(ListMenuTitle_styled.TitleWrapper, null, content), !typeUtils.isNil(rightAction) && /*#__PURE__*/React.createElement("div", {
     onClick: handleClickAction
   }, rightAction));
-}
+});
+var ListMenuTitle$1 = ListMenuTitle;
 
 exports.SIDEBAR_MENU_TITLE_TEST_ID = SIDEBAR_MENU_TITLE_TEST_ID;
-exports.default = ListMenuTitle;
+exports.default = ListMenuTitle$1;
 //# sourceMappingURL=ListMenuTitle.js.map

package/dist/cjs/components/ListMenuTitle/ListMenuTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListMenuTitle.js","sources":["../../../../src/components/ListMenuTitle/ListMenuTitle.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport type ListMenuTitleProps from './ListMenuTitle.types'\n\nimport {\n  TitleWrapper,\n  Wrapper,\n} from './ListMenuTitle.styled'\n\nexport const SIDEBAR_MENU_TITLE_TEST_ID = 'bezier-react-sidebar-menu-title'\n\nfunction ListMenuTitle({\n  as,\n  testId = SIDEBAR_MENU_TITLE_TEST_ID,\n  content,\n  hide = false,\n  rightAction = null,\n  onClick = noop,\n  onClickAction = noop,\n  style,\n  className,\n}: ListMenuTitleProps) {\n  const handleClickAction = useCallback((ev: React.MouseEvent<HTMLDivElement>) => {\n    ev.stopPropagation()\n    onClickAction()\n  }, [onClickAction])\n\n  if (hide) {\n    return null\n  }\n\n  return (\n    <Wrapper\n      data-testid={testId}\n      as={as}\n      style={style}\n      className={className}\n      onClick={onClick}\n    >\n      <TitleWrapper>\n        { content }\n      </TitleWrapper>\n      {\n        !isNil(rightAction) && (\n          <div\n            onClick={handleClickAction}\n          >\n            { rightAction }\n          </div>\n        )\n      }\n    </Wrapper>\n  )\n}\n\nexport default ListMenuTitle\n"],"names":["SIDEBAR_MENU_TITLE_TEST_ID","ListMenuTitle","as","testId","content","hide","rightAction","onClick","noop","onClickAction","style","className","handleClickAction","useCallback","ev","stopPropagation","React","createElement","Wrapper","TitleWrapper","isNil"],"mappings":";;;;;;;;;AAYO,MAAMA,0BAA0B,GAAG,kCAAiC;AAE3E,SAASC,aAAaA,CAAC;EACrBC,EAAE;AACFC,EAAAA,MAAM,GAAGH,0BAA0B;EACnCI,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,WAAW,GAAG,IAAI;AAClBC,EAAAA,OAAO,GAAGC,kBAAI;AACdC,EAAAA,aAAa,GAAGD,kBAAI;EACpBE,KAAK;AACLC,EAAAA,SAAAA;AACkB,CAAC,EAAE;AACrB,EAAA,MAAMC,iBAAiB,GAAGC,iBAAW,CAAEC,EAAoC,IAAK;IAC9EA,EAAE,CAACC,eAAe,EAAE,CAAA;AACpBN,IAAAA,aAAa,EAAE,CAAA;AACjB,GAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEnB,EAAA,IAAIJ,IAAI,EAAE;AACR,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,oBACEW,KAAA,CAAAC,aAAA,CAACC,4BAAO,EAAA;AACN,IAAA,aAAA,EAAaf,MAAO;AACpBD,IAAAA,EAAE,EAAEA,EAAG;AACPQ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBJ,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GAAA,eAEjBS,KAAA,CAAAC,aAAA,CAACE,iCAAY,QACTf,OACU,CAAC,EAEb,CAACgB,eAAK,CAACd,WAAW,CAAC,iBACjBU,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEV,IAAAA,OAAO,EAAEK,iBAAAA;GAEPN,EAAAA,WACC,CAGF,CAAC,CAAA;AAEd;;;;;"}
+{"version":3,"file":"ListMenuTitle.js","sources":["../../../../src/components/ListMenuTitle/ListMenuTitle.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport type ListMenuTitleProps from './ListMenuTitle.types'\n\nimport {\n  TitleWrapper,\n  Wrapper,\n} from './ListMenuTitle.styled'\n\nexport const SIDEBAR_MENU_TITLE_TEST_ID = 'bezier-react-sidebar-menu-title'\n\nconst ListMenuTitle = forwardRef<HTMLDivElement, ListMenuTitleProps>(function ListMenuTitle({\n  as,\n  testId = SIDEBAR_MENU_TITLE_TEST_ID,\n  content,\n  hide = false,\n  rightAction = null,\n  onClickAction = noop,\n  style,\n  className,\n  ...rest\n}, forwardedRef) {\n  const handleClickAction = useCallback((ev: React.MouseEvent<HTMLDivElement>) => {\n    ev.stopPropagation()\n    onClickAction()\n  }, [onClickAction])\n\n  if (hide) {\n    return null\n  }\n\n  return (\n    <Wrapper\n      {...rest}\n      ref={forwardedRef}\n      data-testid={testId}\n      as={as}\n      style={style}\n      className={className}\n    >\n      <TitleWrapper>\n        { content }\n      </TitleWrapper>\n      {\n        !isNil(rightAction) && (\n          <div\n            onClick={handleClickAction}\n          >\n            { rightAction }\n          </div>\n        )\n      }\n    </Wrapper>\n  )\n})\n\nexport default ListMenuTitle\n"],"names":["SIDEBAR_MENU_TITLE_TEST_ID","ListMenuTitle","forwardRef","as","testId","content","hide","rightAction","onClickAction","noop","style","className","rest","forwardedRef","handleClickAction","useCallback","ev","stopPropagation","React","createElement","Wrapper","Object","assign","ref","TitleWrapper","isNil","onClick"],"mappings":";;;;;;;;;AAeO,MAAMA,0BAA0B,GAAG,kCAAiC;AAE3E,MAAMC,aAAa,gBAAGC,gBAAU,CAAqC,SAASD,aAAaA,CAAC;EAC1FE,EAAE;AACFC,EAAAA,MAAM,GAAGJ,0BAA0B;EACnCK,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,WAAW,GAAG,IAAI;AAClBC,EAAAA,aAAa,GAAGC,kBAAI;EACpBC,KAAK;EACLC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMC,iBAAiB,GAAGC,iBAAW,CAAEC,EAAoC,IAAK;IAC9EA,EAAE,CAACC,eAAe,EAAE,CAAA;AACpBT,IAAAA,aAAa,EAAE,CAAA;AACjB,GAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEnB,EAAA,IAAIF,IAAI,EAAE;AACR,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;EAEA,oBACEY,KAAA,CAAAC,aAAA,CAACC,4BAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACFV,IAAI,EAAA;AACRW,IAAAA,GAAG,EAAEV,YAAa;AAClB,IAAA,aAAA,EAAaT,MAAO;AACpBD,IAAAA,EAAE,EAAEA,EAAG;AACPO,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,CAAA,eAErBO,KAAA,CAAAC,aAAA,CAACK,iCAAY,QACTnB,OACU,CAAC,EAEb,CAACoB,eAAK,CAAClB,WAAW,CAAC,iBACjBW,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEO,IAAAA,OAAO,EAAEZ,iBAAAA;GAEPP,EAAAA,WACC,CAGF,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA;AAEF,sBAAeN,aAAa;;;;;"}

package/dist/cjs/components/Modals/Modal/Modal.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.js","sources":["../../../../../src/components/Modals/Modal/Modal.types.ts"],"sourcesContent":["import {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type SideContentProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ModalTitleSize {\n  L = 'L',\n  M = 'M',\n}\n\ninterface ModalOptions {\n  /**\n   * The controlled open state of the modal.\n   * Must be used in conjunction with `onShow` and `onHide`.\n   */\n  show?: boolean\n\n  /**\n   * The open state of the modal when it is initially rendered.\n   * Use when you **do not need to control** its open state.\n   */\n  defaultShow?: boolean\n\n  /**\n   * Callback function to be called when the modal is opened.\n   * @default noop\n   */\n  onShow?: () => void\n\n  /**\n   * Callback function to be called when the modal is closed.\n   * @default noop\n   */\n  onHide?: () => void\n}\n\ninterface ModalContentOptions {\n  /**\n   * Specify a container element to portal the content into.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n\n  /**\n   * Show close icon button that closes the modal when clicked.\n   * @default false\n   */\n  showCloseIcon?: boolean\n\n  /**\n   * Width of the modal.\n   * @default 'max-content'\n   */\n  width?: React.CSSProperties['width']\n\n  /**\n   * Height of the modal.\n   * @default 'fit-content'\n   */\n  height?: React.CSSProperties['height']\n\n  /**\n   * z-index of the modal content.\n   * Rather than using this option, Please check modal is positioned in the proper stacking context.\n   * @default ZIndex.Modal\n   */\n  zIndex?: React.CSSProperties['zIndex']\n}\n\ninterface ModalHeaderOptions {\n  /**\n   * An accessible title to be announced when the modal is opened.\n   */\n  title: React.ReactNode\n\n  /**\n   * An accessible subtitle to be announced when the modal is opened.\n   */\n  subtitle?: React.ReactNode\n\n  /**\n   * An accessible description to be announced when the modal is opened.\n   */\n  description?: React.ReactNode\n\n  /**\n   * Size of the title\n   * @default ModalTitleSize.L\n   */\n  titleSize?: ModalTitleSize\n\n  /**\n   * Hides content from the screen in an accessible way.\n   * @default false\n   */\n  hidden?: boolean\n}\n\ntype ModalFooterSideContent = React.ReactNode\n\ninterface ModalFooterOptions extends\n  SideContentProps<ModalFooterSideContent, ModalFooterSideContent> {}\n\nexport interface ModalProps extends\n  ChildrenProps,\n  ModalOptions {}\n\nexport interface ModalContentProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  ModalContentOptions {}\n\nexport interface ModalHeaderProps extends\n  BezierComponentProps,\n  Omit<React.HTMLAttributes<HTMLElement>, keyof ModalHeaderOptions>,\n  ModalHeaderOptions {}\n\nexport interface ModalBodyProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ModalFooterProps extends\n  BezierComponentProps,\n  React.HTMLAttributes<HTMLElement>,\n  ModalFooterOptions {}\n\nexport interface ModalTriggerProps extends\n  ChildrenProps {}\n\nexport interface ModalCloseProps extends\n  ChildrenProps {}\n\nexport interface ModalContentContextValue extends\n  NonNullable<Pick<ModalContentOptions, 'showCloseIcon'>> {}\n"],"names":["ModalTitleSize"],"mappings":";;AAMYA,IAAAA,cAAc,0BAAdA,cAAc,EAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"Modal.types.js","sources":["../../../../../src/components/Modals/Modal/Modal.types.ts"],"sourcesContent":["import {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type SideContentProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ModalTitleSize {\n  L = 'L',\n  M = 'M',\n}\n\ninterface ModalOptions {\n  /**\n   * The controlled open state of the modal.\n   * Must be used in conjunction with `onShow` and `onHide`.\n   */\n  show?: boolean\n\n  /**\n   * The open state of the modal when it is initially rendered.\n   * Use when you **do not need to control** its open state.\n   */\n  defaultShow?: boolean\n\n  /**\n   * Callback function to be called when the modal is opened.\n   * @default noop\n   */\n  onShow?: () => void\n\n  /**\n   * Callback function to be called when the modal is closed.\n   * @default noop\n   */\n  onHide?: () => void\n}\n\ninterface ModalContentOptions {\n  /**\n   * Specify a container element to portal the content into.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n\n  /**\n   * Show close icon button that closes the modal when clicked.\n   * @default false\n   */\n  showCloseIcon?: boolean\n\n  /**\n   * Width of the modal.\n   * @default 'max-content'\n   */\n  width?: React.CSSProperties['width']\n\n  /**\n   * Height of the modal.\n   * @default 'fit-content'\n   */\n  height?: React.CSSProperties['height']\n\n  /**\n   * z-index of the modal content.\n   * Rather than using this option, Please check modal is positioned in the proper stacking context.\n   * @default ZIndex.Modal\n   */\n  zIndex?: React.CSSProperties['zIndex']\n}\n\ninterface ModalHeaderOptions {\n  /**\n   * An accessible title to be announced when the modal is opened.\n   */\n  title: React.ReactNode\n\n  /**\n   * An accessible subtitle to be announced when the modal is opened.\n   */\n  subtitle?: React.ReactNode\n\n  /**\n   * An accessible description to be announced when the modal is opened.\n   */\n  description?: React.ReactNode\n\n  /**\n   * Size of the title\n   * @default ModalTitleSize.L\n   */\n  titleSize?: ModalTitleSize\n\n  /**\n   * Hides content from the screen in an accessible way.\n   * @default false\n   */\n  hidden?: boolean\n}\n\ntype ModalFooterSideContent = React.ReactNode\n\ninterface ModalFooterOptions extends\n  SideContentProps<ModalFooterSideContent, ModalFooterSideContent> {}\n\nexport interface ModalProps extends\n  ChildrenProps,\n  ModalOptions {}\n\nexport interface ModalContentProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  ModalContentOptions {}\n\nexport interface ModalHeaderProps extends\n  BezierComponentProps,\n  Omit<React.HTMLAttributes<HTMLElement>, keyof ModalHeaderOptions>,\n  ModalHeaderOptions {}\n\nexport interface ModalBodyProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ModalFooterProps extends\n  BezierComponentProps,\n  React.HTMLAttributes<HTMLElement>,\n  ModalFooterOptions {}\n\nexport interface ModalTriggerProps extends\n  ChildrenProps<React.ReactElement> {}\n\nexport interface ModalCloseProps extends\n  ChildrenProps<React.ReactElement> {}\n\nexport interface ModalContentContextValue extends\n  NonNullable<Pick<ModalContentOptions, 'showCloseIcon'>> {}\n"],"names":["ModalTitleSize"],"mappings":";;AAMYA,IAAAA,cAAc,0BAAdA,cAAc,EAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/Modals/Modal/ModalAnimation.styled.js

@@ -7,25 +7,71 @@ var styled = require('styled-components');
 var index = require('../../../foundation/Transition/index.js');
 
 const overlayStyles = {
-  open: FoundationStyledComponent.css(["opacity:1;"]),
-  closed: FoundationStyledComponent.css(["opacity:0;"])
+  open: FoundationStyledComponent.css`
+    opacity: 1;
+  `,
+  closed: FoundationStyledComponent.css`
+    opacity: 0;
+  `
 };
-const overlayShow = /*#__PURE__*/styled.keyframes(["from{", "}to{", "}"], overlayStyles.closed, overlayStyles.open);
-const overlayHide = /*#__PURE__*/styled.keyframes(["from{", "}to{", "}"], overlayStyles.open, overlayStyles.closed);
+const overlayShow = styled.keyframes`
+  from {
+    ${overlayStyles.closed}
+  }
+
+  to {
+    ${overlayStyles.open}
+  }
+`;
+const overlayHide = styled.keyframes`
+  from {
+    ${overlayStyles.open}
+  }
+
+  to {
+    ${overlayStyles.closed}
+  }
+`;
 const contentStyles = {
-  open: FoundationStyledComponent.css(["opacity:1;transform:translate(0,0) scale(1);"]),
-  closed: FoundationStyledComponent.css(["opacity:0;transform:translate(0,-2%) scale(0.95);"])
+  open: FoundationStyledComponent.css`
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  `,
+  closed: FoundationStyledComponent.css`
+    opacity: 0;
+    transform: translate(0, -2%) scale(0.95);
+  `
 };
-const contentShow = /*#__PURE__*/styled.keyframes(["from{", "}to{", "}"], contentStyles.closed, contentStyles.open);
-const contentHide = /*#__PURE__*/styled.keyframes(["from{", "}to{", "}"], contentStyles.open, contentStyles.closed);
+const contentShow = styled.keyframes`
+  from {
+    ${contentStyles.closed}
+  }
+
+  to {
+    ${contentStyles.open}
+  }
+`;
+const contentHide = styled.keyframes`
+  from {
+    ${contentStyles.open}
+  }
+
+  to {
+    ${contentStyles.closed}
+  }
+`;
 function modalAnimationGenerator(frames, type) {
   switch (type) {
     case 'show':
-      return FoundationStyledComponent.css(["animation:", " ", "ms cubic-bezier(0.3,0,0,1);"], () => frames, index.TransitionDuration.M);
+      return FoundationStyledComponent.css`
+        animation: ${() => frames} ${index.TransitionDuration.M}ms cubic-bezier(0.3, 0, 0, 1);
+      `;
     case 'hide':
-      return FoundationStyledComponent.css(["animation:", " ", "ms cubic-bezier(0.3,0,0,1);"], () => frames, index.TransitionDuration.S);
+      return FoundationStyledComponent.css`
+        animation: ${() => frames} ${index.TransitionDuration.S}ms cubic-bezier(0.3, 0, 0, 1);
+      `;
     default:
-      return FoundationStyledComponent.css([""]);
+      return FoundationStyledComponent.css``;
   }
 }
 var ModalAnimation = {

package/dist/cjs/components/Modals/Modal/ModalAnimation.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalAnimation.styled.js","sources":["../../../../../src/components/Modals/Modal/ModalAnimation.styled.ts"],"sourcesContent":["import {\n  TransitionDuration,\n  css,\n  keyframes,\n} from '~/src/foundation'\n\nconst overlayStyles = {\n  open: css`\n    opacity: 1;\n  `,\n  closed: css`\n    opacity: 0;\n  `,\n}\n\nconst overlayShow = keyframes`\n  from {\n    ${overlayStyles.closed}\n  }\n\n  to {\n    ${overlayStyles.open}\n  }\n`\n\nconst overlayHide = keyframes`\n  from {\n    ${overlayStyles.open}\n  }\n\n  to {\n    ${overlayStyles.closed}\n  }\n`\n\nconst contentStyles = {\n  open: css`\n    opacity: 1;\n    transform: translate(0, 0) scale(1);\n  `,\n  closed: css`\n    opacity: 0;\n    transform: translate(0, -2%) scale(0.95);\n  `,\n}\n\nconst contentShow = keyframes`\n  from {\n    ${contentStyles.closed}\n  }\n\n  to {\n    ${contentStyles.open}\n  }\n`\n\nconst contentHide = keyframes`\n  from {\n    ${contentStyles.open}\n  }\n\n  to {\n    ${contentStyles.closed}\n  }\n`\n\nfunction modalAnimationGenerator(\n  frames: ReturnType<typeof keyframes>,\n  type: 'show' | 'hide',\n) {\n  switch (type) {\n    case 'show':\n      return css`\n        animation: ${() => frames} ${TransitionDuration.M}ms cubic-bezier(0.3, 0, 0, 1);\n      `\n    case 'hide':\n      return css`\n        animation: ${() => frames} ${TransitionDuration.S}ms cubic-bezier(0.3, 0, 0, 1);\n      `\n    default:\n      return css``\n  }\n}\n\nexport default {\n  overlayShow: modalAnimationGenerator(overlayShow, 'show'),\n  overlayHide: modalAnimationGenerator(overlayHide, 'hide'),\n  contentShow: modalAnimationGenerator(contentShow, 'show'),\n  contentHide: modalAnimationGenerator(contentHide, 'hide'),\n}\n"],"names":["overlayStyles","open","css","closed","overlayShow","keyframes","overlayHide","contentStyles","contentShow","contentHide","modalAnimationGenerator","frames","type","TransitionDuration","M","S"],"mappings":";;;;;;;;AAMA,MAAMA,aAAa,GAAG;EACpBC,IAAI,EAAEC,6BAAG,CAER,CAAA,YAAA,CAAA,CAAA;AACDC,EAAAA,MAAM,EAAED,6BAAG,CAAA,CAAA,YAAA,CAAA,CAAA;AAGb,CAAC,CAAA;AAED,MAAME,WAAW,gBAAGC,gBAAS,CAEvBL,CAAAA,OAAAA,EAAAA,MAAAA,EAAAA,GAAAA,CAAAA,EAAAA,aAAa,CAACG,MAAM,EAIpBH,aAAa,CAACC,IAAI,CAEvB,CAAA;AAED,MAAMK,WAAW,gBAAGD,gBAAS,CAEvBL,CAAAA,OAAAA,EAAAA,MAAAA,EAAAA,GAAAA,CAAAA,EAAAA,aAAa,CAACC,IAAI,EAIlBD,aAAa,CAACG,MAAM,CAEzB,CAAA;AAED,MAAMI,aAAa,GAAG;EACpBN,IAAI,EAAEC,6BAAG,CAGR,CAAA,8CAAA,CAAA,CAAA;AACDC,EAAAA,MAAM,EAAED,6BAAG,CAAA,CAAA,mDAAA,CAAA,CAAA;AAIb,CAAC,CAAA;AAED,MAAMM,WAAW,gBAAGH,gBAAS,CAEvBE,CAAAA,OAAAA,EAAAA,MAAAA,EAAAA,GAAAA,CAAAA,EAAAA,aAAa,CAACJ,MAAM,EAIpBI,aAAa,CAACN,IAAI,CAEvB,CAAA;AAED,MAAMQ,WAAW,gBAAGJ,gBAAS,CAEvBE,CAAAA,OAAAA,EAAAA,MAAAA,EAAAA,GAAAA,CAAAA,EAAAA,aAAa,CAACN,IAAI,EAIlBM,aAAa,CAACJ,MAAM,CAEzB,CAAA;AAED,SAASO,uBAAuBA,CAC9BC,MAAoC,EACpCC,IAAqB,EACrB;AACA,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,MAAM;AACT,MAAA,OAAOV,6BAAG,CACK,CAAA,YAAA,EAAA,GAAA,EAAA,6BAAA,CAAA,EAAA,MAAMS,MAAM,EAAIE,wBAAkB,CAACC,CAAC,CAAA,CAAA;AAErD,IAAA,KAAK,MAAM;AACT,MAAA,OAAOZ,6BAAG,CACK,CAAA,YAAA,EAAA,GAAA,EAAA,6BAAA,CAAA,EAAA,MAAMS,MAAM,EAAIE,wBAAkB,CAACE,CAAC,CAAA,CAAA;AAErD,IAAA;AACE,MAAA,OAAOb,6BAAG,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AACd,GAAA;AACF,CAAA;AAEA,qBAAe;AACbE,EAAAA,WAAW,EAAEM,uBAAuB,CAACN,WAAW,EAAE,MAAM,CAAC;AACzDE,EAAAA,WAAW,EAAEI,uBAAuB,CAACJ,WAAW,EAAE,MAAM,CAAC;AACzDE,EAAAA,WAAW,EAAEE,uBAAuB,CAACF,WAAW,EAAE,MAAM,CAAC;AACzDC,EAAAA,WAAW,EAAEC,uBAAuB,CAACD,WAAW,EAAE,MAAM,CAAA;AAC1D,CAAC;;;;"}
+{"version":3,"file":"ModalAnimation.styled.js","sources":["../../../../../src/components/Modals/Modal/ModalAnimation.styled.ts"],"sourcesContent":["import {\n  TransitionDuration,\n  css,\n  keyframes,\n} from '~/src/foundation'\n\nconst overlayStyles = {\n  open: css`\n    opacity: 1;\n  `,\n  closed: css`\n    opacity: 0;\n  `,\n}\n\nconst overlayShow = keyframes`\n  from {\n    ${overlayStyles.closed}\n  }\n\n  to {\n    ${overlayStyles.open}\n  }\n`\n\nconst overlayHide = keyframes`\n  from {\n    ${overlayStyles.open}\n  }\n\n  to {\n    ${overlayStyles.closed}\n  }\n`\n\nconst contentStyles = {\n  open: css`\n    opacity: 1;\n    transform: translate(0, 0) scale(1);\n  `,\n  closed: css`\n    opacity: 0;\n    transform: translate(0, -2%) scale(0.95);\n  `,\n}\n\nconst contentShow = keyframes`\n  from {\n    ${contentStyles.closed}\n  }\n\n  to {\n    ${contentStyles.open}\n  }\n`\n\nconst contentHide = keyframes`\n  from {\n    ${contentStyles.open}\n  }\n\n  to {\n    ${contentStyles.closed}\n  }\n`\n\nfunction modalAnimationGenerator(\n  frames: ReturnType<typeof keyframes>,\n  type: 'show' | 'hide',\n) {\n  switch (type) {\n    case 'show':\n      return css`\n        animation: ${() => frames} ${TransitionDuration.M}ms cubic-bezier(0.3, 0, 0, 1);\n      `\n    case 'hide':\n      return css`\n        animation: ${() => frames} ${TransitionDuration.S}ms cubic-bezier(0.3, 0, 0, 1);\n      `\n    default:\n      return css``\n  }\n}\n\nexport default {\n  overlayShow: modalAnimationGenerator(overlayShow, 'show'),\n  overlayHide: modalAnimationGenerator(overlayHide, 'hide'),\n  contentShow: modalAnimationGenerator(contentShow, 'show'),\n  contentHide: modalAnimationGenerator(contentHide, 'hide'),\n}\n"],"names":["overlayStyles","open","css","closed","overlayShow","keyframes","overlayHide","contentStyles","contentShow","contentHide","modalAnimationGenerator","frames","type","TransitionDuration","M","S"],"mappings":";;;;;;;;AAMA,MAAMA,aAAa,GAAG;AACpBC,EAAAA,IAAI,EAAEC,6BAAI,CAAA;AACZ;AACA,EAAG,CAAA;AACDC,EAAAA,MAAM,EAAED,6BAAI,CAAA;AACd;AACA,EAAA,CAAA;AACA,CAAC,CAAA;AAED,MAAME,WAAW,GAAGC,gBAAU,CAAA;AAC9B;AACA,IAAML,EAAAA,aAAa,CAACG,MAAO,CAAA;AAC3B;AACA;AACA;AACA,IAAMH,EAAAA,aAAa,CAACC,IAAK,CAAA;AACzB;AACA,CAAC,CAAA;AAED,MAAMK,WAAW,GAAGD,gBAAU,CAAA;AAC9B;AACA,IAAML,EAAAA,aAAa,CAACC,IAAK,CAAA;AACzB;AACA;AACA;AACA,IAAMD,EAAAA,aAAa,CAACG,MAAO,CAAA;AAC3B;AACA,CAAC,CAAA;AAED,MAAMI,aAAa,GAAG;AACpBN,EAAAA,IAAI,EAAEC,6BAAI,CAAA;AACZ;AACA;AACA,EAAG,CAAA;AACDC,EAAAA,MAAM,EAAED,6BAAI,CAAA;AACd;AACA;AACA,EAAA,CAAA;AACA,CAAC,CAAA;AAED,MAAMM,WAAW,GAAGH,gBAAU,CAAA;AAC9B;AACA,IAAME,EAAAA,aAAa,CAACJ,MAAO,CAAA;AAC3B;AACA;AACA;AACA,IAAMI,EAAAA,aAAa,CAACN,IAAK,CAAA;AACzB;AACA,CAAC,CAAA;AAED,MAAMQ,WAAW,GAAGJ,gBAAU,CAAA;AAC9B;AACA,IAAME,EAAAA,aAAa,CAACN,IAAK,CAAA;AACzB;AACA;AACA;AACA,IAAMM,EAAAA,aAAa,CAACJ,MAAO,CAAA;AAC3B;AACA,CAAC,CAAA;AAED,SAASO,uBAAuBA,CAC9BC,MAAoC,EACpCC,IAAqB,EACrB;AACA,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,MAAM;AACT,MAAA,OAAOV,6BAAI,CAAA;AACjB,mBAAA,EAAqB,MAAMS,MAAO,CAAGE,CAAAA,EAAAA,wBAAkB,CAACC,CAAE,CAAA;AAC1D,MAAO,CAAA,CAAA;AACH,IAAA,KAAK,MAAM;AACT,MAAA,OAAOZ,6BAAI,CAAA;AACjB,mBAAA,EAAqB,MAAMS,MAAO,CAAGE,CAAAA,EAAAA,wBAAkB,CAACE,CAAE,CAAA;AAC1D,MAAO,CAAA,CAAA;AACH,IAAA;AACE,MAAA,OAAOb,6BAAI,CAAC,CAAA,CAAA;AAChB,GAAA;AACF,CAAA;AAEA,qBAAe;AACbE,EAAAA,WAAW,EAAEM,uBAAuB,CAACN,WAAW,EAAE,MAAM,CAAC;AACzDE,EAAAA,WAAW,EAAEI,uBAAuB,CAACJ,WAAW,EAAE,MAAM,CAAC;AACzDE,EAAAA,WAAW,EAAEE,uBAAuB,CAACF,WAAW,EAAE,MAAM,CAAC;AACzDC,EAAAA,WAAW,EAAEC,uBAAuB,CAACD,WAAW,EAAE,MAAM,CAAA;AAC1D,CAAC;;;;"}

package/dist/cjs/components/Navigator/NavGroup/NavGroup.js

@@ -8,15 +8,13 @@ var functionUtils = require('../../../utils/functionUtils.js');
 var typeUtils = require('../../../utils/typeUtils.js');
 var Text = require('../../Text/Text.js');
 var NavGroup_styled = require('./NavGroup.styled.js');
-var LegacyIcon = require('../../LegacyIcon/LegacyIcon.js');
-var Icon_types = require('../../Icon/Icon.types.js');
 var Icon = require('../../Icon/Icon.js');
-var utils = require('../../LegacyIcon/utils.js');
+var Icon_types = require('../../Icon/Icon.types.js');
 var Typography = require('../../../foundation/Typography.js');
 
 const NAV_GROUP_TEST_ID = 'bezier-react-nav-group';
 const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-react-nav-group-left-icon';
-function NavGroup({
+const NavGroup = /*#__PURE__*/React.forwardRef(function NavGroup({
   as,
   testId = NAV_GROUP_TEST_ID,
   name,
@@ -29,18 +27,19 @@ function NavGroup({
   leftIcon,
   open,
   active,
-  onClick = functionUtils.noop
-}) {
+  onClick = functionUtils.noop,
+  ...rest
+}, forwardedRef) {
   const handleClickItem = React.useCallback(e => {
     onClick(e, name);
   }, [name, onClick]);
   const hasChildren = !typeUtils.isNil(children);
   const chevronIconSource = open ? bezierIcons.ChevronSmallDownIcon : bezierIcons.ChevronSmallRightIcon;
-  const showLeftIcon = utils.isIconName(leftIcon);
   const ariaName = `${name}Menu`;
   return /*#__PURE__*/React.createElement(NavGroup_styled.Wrapper, {
     role: "none"
-  }, /*#__PURE__*/React.createElement(NavGroup_styled.Item, {
+  }, /*#__PURE__*/React.createElement(NavGroup_styled.Item, Object.assign({}, rest, {
+    ref: forwardedRef,
     as: as,
     active: active,
     style: style,
@@ -52,9 +51,9 @@ function NavGroup({
     "aria-haspopup": hasChildren,
     "aria-expanded": open,
     "aria-controls": ariaName
-  }, /*#__PURE__*/React.createElement(NavGroup_styled.LeftIconWrapper, null, showLeftIcon && /*#__PURE__*/React.createElement(LegacyIcon.default, {
+  }), /*#__PURE__*/React.createElement(NavGroup_styled.LeftIconWrapper, null, /*#__PURE__*/React.createElement(Icon.Icon, {
     testId: NAV_GROUP_LEFT_ICON_TEST_ID,
-    name: leftIcon,
+    source: leftIcon,
     size: Icon_types.IconSize.S,
     color: active ? 'bgtxt-blue-normal' : 'txt-black-dark'
   })), /*#__PURE__*/React.createElement(Text.default, {
@@ -68,7 +67,7 @@ function NavGroup({
     role: "menu",
     id: ariaName
   }, open && children));
-}
+});
 var NavGroup$1 = /*#__PURE__*/React.memo(NavGroup);
 
 exports.NAV_GROUP_LEFT_ICON_TEST_ID = NAV_GROUP_LEFT_ICON_TEST_ID;

package/dist/cjs/components/Navigator/NavGroup/NavGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavGroup.js","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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"}
+{"version":3,"file":"NavGroup.js","sources":["../../../../../src/components/Navigator/NavGroup/NavGroup.tsx"],"sourcesContent":["import React, {\n  forwardRef,\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 { 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\nconst NavGroup = forwardRef<HTMLButtonElement, NavGroupProps>(function 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  ...rest\n}, forwardedRef) {\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 ariaName = `${name}Menu`\n\n  return (\n    <Wrapper role=\"none\">\n      <Item\n        {...rest}\n        ref={forwardedRef}\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          <Icon\n            testId={NAV_GROUP_LEFT_ICON_TEST_ID}\n            source={leftIcon}\n            size={IconSize.S}\n            color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\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","forwardRef","as","testId","name","style","className","interpolation","children","content","rightContent","leftIcon","open","active","onClick","noop","rest","forwardedRef","handleClickItem","useCallback","e","hasChildren","isNil","chevronIconSource","ChevronSmallDownIcon","ChevronSmallRightIcon","ariaName","React","createElement","Wrapper","role","Item","Object","assign","ref","LeftIconWrapper","Icon","source","size","IconSize","S","color","Text","typo","Typography","Size14","truncated","ChevronWrapper","RightContentWrapper","ChildrenWrapper","id","memo"],"mappings":"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"}

package/dist/cjs/components/Navigator/NavItem/NavItem.js

@@ -6,14 +6,13 @@ var React = require('react');
 var functionUtils = require('../../../utils/functionUtils.js');
 var Text = require('../../Text/Text.js');
 var NavItem_styled = require('./NavItem.styled.js');
-var LegacyIcon = require('../../LegacyIcon/LegacyIcon.js');
+var Icon = require('../../Icon/Icon.js');
 var Icon_types = require('../../Icon/Icon.types.js');
-var utils = require('../../LegacyIcon/utils.js');
 var Typography = require('../../../foundation/Typography.js');
 
 const NAV_ITEM_TEST_ID = 'bezier-react-nav-item';
 const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-nav-item-left-icon';
-function NavItem({
+const NavItem = /*#__PURE__*/React.forwardRef(function NavItem({
   as,
   testId = NAV_ITEM_TEST_ID,
   name,
@@ -26,15 +25,16 @@ function NavItem({
   rightContent,
   leftIcon,
   active,
-  onClick = functionUtils.noop
-}) {
+  onClick = functionUtils.noop,
+  ...rest
+}, forwardedRef) {
   const handleClickItem = React.useCallback(e => {
     onClick(e, name);
   }, [name, onClick]);
-  const showLeftIcon = utils.isIconName(leftIcon);
   return /*#__PURE__*/React.createElement(NavItem_styled.Wrapper, {
     role: "none"
-  }, /*#__PURE__*/React.createElement(NavItem_styled.Item, {
+  }, /*#__PURE__*/React.createElement(NavItem_styled.Item, Object.assign({}, rest, {
+    ref: forwardedRef,
     as: as,
     active: active,
     style: style,
@@ -45,16 +45,16 @@ function NavItem({
     href: href,
     target: target,
     role: "menuitem"
-  }, /*#__PURE__*/React.createElement(NavItem_styled.LeftIconWrapper, null, showLeftIcon && /*#__PURE__*/React.createElement(LegacyIcon.default, {
+  }), /*#__PURE__*/React.createElement(NavItem_styled.LeftIconWrapper, null, leftIcon && /*#__PURE__*/React.createElement(Icon.Icon, {
     testId: NAV_ITEM_LEFT_ICON_TEST_ID,
-    name: leftIcon,
+    source: leftIcon,
     size: Icon_types.IconSize.S,
     color: active ? 'bgtxt-blue-normal' : 'txt-black-dark'
   })), /*#__PURE__*/React.createElement(Text.default, {
     typo: Typography.Typography.Size14,
     truncated: true
   }, content), rightContent && /*#__PURE__*/React.createElement(NavItem_styled.RightContentWrapper, null, rightContent)));
-}
+});
 var NavItem$1 = /*#__PURE__*/React.memo(NavItem);
 
 exports.NAV_ITEM_LEFT_ICON_TEST_ID = NAV_ITEM_LEFT_ICON_TEST_ID;

package/dist/cjs/components/Navigator/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","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,kBAAAA;AACE,CAAC,EAAE;AACf,EAAA,MAAMC,eAAe,GAAGC,iBAAW,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,gBAAU,CAACR,QAAQ,CAAC,CAAA;AAEzC,EAAA,oBACES,KAAA,CAAAC,aAAA,CAACC,sBAAO,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,eAClBH,KAAA,CAAAC,aAAA,CAACG,mBAAI,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,KAAA,CAAAC,aAAA,CAACI,8BAAe,EAAA,IAAA,EACZP,YAAY,iBACZE,KAAA,CAAAC,aAAA,CAACK,kBAAU,EAAA;AACTxB,IAAAA,MAAM,EAAEH,0BAA2B;AACnCI,IAAAA,IAAI,EAAEQ,QAAS;IACfgB,IAAI,EAAEC,mBAAQ,CAACC,CAAE;AACjBC,IAAAA,KAAK,EAAElB,MAAM,GAAG,mBAAmB,GAAG,gBAAA;AAAiB,GACxD,CAEY,CAAC,eAElBQ,KAAA,CAAAC,aAAA,CAACU,YAAI,EAAA;IAACC,IAAI,EAAEC,qBAAU,CAACC,MAAO;IAACC,SAAS,EAAA,IAAA;AAAA,GAAA,EACpC5B,OACE,CAAC,EAELG,YAAY,iBACZU,KAAA,CAAAC,aAAA,CAACe,kCAAmB,EAAA,IAAA,EAChB1B,YACiB,CAEnB,CACC,CAAC,CAAA;AAEd,CAAA;AAEA,gBAAe2B,aAAAA,UAAI,CAACrC,OAAO,CAAC;;;;;;"}
+{"version":3,"file":"NavItem.js","sources":["../../../../../src/components/Navigator/NavItem/NavItem.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  memo,\n  useCallback,\n} from 'react'\n\nimport { Typography } from '~/src/foundation'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\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\nconst NavItem = forwardRef<HTMLAnchorElement, NavItemProps>(function 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  ...rest\n}, forwardedRef) {\n  const handleClickItem = useCallback((e?: React.MouseEvent) => {\n    onClick(e, name)\n  }, [\n    name,\n    onClick,\n  ])\n\n  return (\n    <Wrapper role=\"none\">\n      <Item\n        {...rest}\n        ref={forwardedRef}\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          { leftIcon && (\n            <Icon\n              testId={NAV_ITEM_LEFT_ICON_TEST_ID}\n              source={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","forwardRef","as","testId","name","style","className","interpolation","content","href","target","rightContent","leftIcon","active","onClick","noop","rest","forwardedRef","handleClickItem","useCallback","e","React","createElement","Wrapper","role","Item","Object","assign","ref","LeftIconWrapper","Icon","source","size","IconSize","S","color","Text","typo","Typography","Size14","truncated","RightContentWrapper","memo"],"mappings":";;;;;;;;;;;;AAyBO,MAAMA,gBAAgB,GAAG,wBAAuB;AAChD,MAAMC,0BAA0B,GAAG,kCAAiC;AAE3E,MAAMC,OAAO,gBAAGC,gBAAU,CAAkC,SAASD,OAAOA,CAAC;EAC3EE,EAAE;AACFC,EAAAA,MAAM,GAAGL,gBAAgB;EACzBM,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,kBAAI;EACd,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMC,eAAe,GAAGC,iBAAW,CAAEC,CAAoB,IAAK;AAC5DN,IAAAA,OAAO,CAACM,CAAC,EAAEhB,IAAI,CAAC,CAAA;AAClB,GAAC,EAAE,CACDA,IAAI,EACJU,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,oBACEO,KAAA,CAAAC,aAAA,CAACC,sBAAO,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAA;GACZH,eAAAA,KAAA,CAAAC,aAAA,CAACG,mBAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACCX,IAAI,EAAA;AACRY,IAAAA,GAAG,EAAEX,YAAa;AAClBf,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,EAAEI,eAAgB;AACzB,IAAA,aAAA,EAAaf,MAAO;AACpBM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfc,IAAAA,IAAI,EAAC,UAAA;AAAU,GAAA,CAAA,eAEfH,KAAA,CAAAC,aAAA,CAACO,8BAAe,EAAA,IAAA,EACZjB,QAAQ,iBACRS,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACH3B,IAAAA,MAAM,EAAEJ,0BAA2B;AACnCgC,IAAAA,MAAM,EAAEnB,QAAS;IACjBoB,IAAI,EAAEC,mBAAQ,CAACC,CAAE;AACjBC,IAAAA,KAAK,EAAEtB,MAAM,GAAG,mBAAmB,GAAG,gBAAA;AAAiB,GACxD,CAEY,CAAC,eAElBQ,KAAA,CAAAC,aAAA,CAACc,YAAI,EAAA;IAACC,IAAI,EAAEC,qBAAU,CAACC,MAAO;IAACC,SAAS,EAAA,IAAA;AAAA,GAAA,EACpChC,OACE,CAAC,EAELG,YAAY,iBACZU,KAAA,CAAAC,aAAA,CAACmB,kCAAmB,EAAA,IAAA,EAChB9B,YACiB,CAEnB,CACC,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA;AAEF,gBAAe+B,aAAAA,UAAI,CAAC1C,OAAO,CAAC;;;;;;"}

package/dist/cjs/components/Overlay/utils.js

@@ -182,9 +182,13 @@ function getOverlayStyle({
       marginY,
       keepInContainer
     });
-    return FoundationStyledComponent.css(["top:", "px;left:", "px;transform:translateX(", "px) translateY(", "px);"], top, left, translateX, translateY);
+    return FoundationStyledComponent.css`
+      top: ${top}px;
+      left: ${left}px;
+      transform: translateX(${translateX}px) translateY(${translateY}px);
+    `;
   }
-  return FoundationStyledComponent.css([""]);
+  return FoundationStyledComponent.css``;
 }
 
 exports.getOverlayPosition = getOverlayPosition;

package/dist/cjs/components/Overlay/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/Overlay/utils.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport {\n  type ContainerRectAttr,\n  OverlayPosition,\n  type TargetRectAttr,\n} from './Overlay.types'\n\nconst TOP_POSITION_OFFSET = 10\n\ninterface GetOverlayPositionArgs {\n  containerRect: ContainerRectAttr\n  targetRect: TargetRectAttr\n  show: boolean\n}\n\nexport function getOverlayPosition({\n  containerRect,\n  targetRect,\n  show,\n}: GetOverlayPositionArgs) {\n  const { containerTop, containerLeft, scrollTop, scrollLeft } = containerRect\n  const { targetTop, targetLeft, clientTop, clientLeft } = targetRect\n\n  const top = targetTop - clientTop - containerTop + scrollTop\n  const left = targetLeft - clientLeft - containerLeft + scrollLeft\n\n  return {\n    top: show ? top : top - TOP_POSITION_OFFSET,\n    left,\n  }\n}\n\ninterface GetOverlayTranslatationArgs {\n  containerRect: ContainerRectAttr\n  targetRect: TargetRectAttr | null\n  overlay: HTMLElement | null\n  position: OverlayPosition\n  marginX: number\n  marginY: number\n  keepInContainer: boolean\n}\n\nexport function getOverlayTranslation({\n  containerRect,\n  targetRect,\n  overlay,\n  position,\n  marginX,\n  marginY,\n  keepInContainer,\n}: GetOverlayTranslatationArgs) {\n  if (containerRect && targetRect && overlay) {\n    const {\n      containerWidth,\n      containerHeight,\n      containerTop,\n      containerLeft,\n    } = containerRect\n    const { targetWidth, targetHeight, targetTop, targetLeft } = targetRect\n    const { width: overlayWidth, height: overlayHeight } = overlay.getBoundingClientRect()\n\n    let translateX = 0\n    let translateY = 0\n\n    // pre position\n    switch (position) {\n      case OverlayPosition.TopCenter:\n      case OverlayPosition.TopLeft:\n      case OverlayPosition.TopRight:\n        translateY -= (overlayHeight + marginY)\n        translateX += marginX\n        break\n      case OverlayPosition.RightCenter:\n      case OverlayPosition.RightTop:\n      case OverlayPosition.RightBottom:\n        translateX += (targetWidth + marginX)\n        translateY += marginY\n        break\n      case OverlayPosition.BottomCenter:\n      case OverlayPosition.BottomLeft:\n      case OverlayPosition.BottomRight:\n        translateY += (targetHeight + marginY)\n        translateX += marginX\n        break\n      case OverlayPosition.LeftCenter:\n      case OverlayPosition.LeftTop:\n      case OverlayPosition.LeftBottom:\n        translateX -= (overlayWidth + marginX)\n        translateY += marginY\n        break\n    }\n\n    switch (position) {\n      // post position\n      case OverlayPosition.TopCenter:\n      case OverlayPosition.BottomCenter:\n        translateX -= ((overlayWidth / 2) - (targetWidth / 2))\n        break\n      case OverlayPosition.TopRight:\n      case OverlayPosition.BottomRight:\n        translateX -= (overlayWidth - targetWidth)\n        break\n      case OverlayPosition.RightCenter:\n      case OverlayPosition.LeftCenter:\n        translateY -= ((overlayHeight / 2) - (targetHeight / 2))\n        break\n      case OverlayPosition.RightBottom:\n      case OverlayPosition.LeftBottom:\n        translateY -= (overlayHeight - targetHeight)\n        break\n\n      // inner position\n      case OverlayPosition.InnerLeftTop:\n        translateX = marginX\n        translateY = marginY\n        break\n      case OverlayPosition.InnerLeftBottom:\n        translateX = marginX\n        translateY = targetHeight - overlayHeight + marginY\n        break\n      case OverlayPosition.InnerRightTop:\n        translateX = targetWidth - overlayWidth + marginX\n        translateY = marginY\n        break\n      case OverlayPosition.InnerRightBottom:\n        translateX = targetWidth - overlayWidth + marginX\n        translateY = targetHeight - overlayHeight + marginY\n        break\n    }\n\n    if (keepInContainer) {\n      const isOverTop = targetTop + translateY < containerTop\n      const isOverBottom = targetTop + translateY + overlayHeight > containerTop + containerHeight\n      const isOverLeft = targetLeft + translateX < containerLeft\n      const isOverRight = targetLeft + translateX + overlayWidth > containerLeft + containerWidth\n\n      const topSpace = targetTop - containerTop\n      const bottomSpace = (containerTop + containerHeight) - (targetTop + targetHeight)\n      const leftSpace = targetLeft - containerLeft\n      const rightSpace = (containerLeft + containerWidth) - (targetLeft + targetWidth)\n\n      if (isOverTop) {\n        translateY = topSpace > bottomSpace\n          ? translateY\n          : targetHeight - translateY - overlayHeight\n      } else if (isOverBottom) {\n        translateY = bottomSpace > topSpace\n          ? translateY\n          : targetHeight - translateY - overlayHeight\n      }\n      if (isOverLeft) {\n        translateX = leftSpace > rightSpace\n          ? translateX\n          : targetWidth - translateX - overlayWidth\n      } else if (isOverRight) {\n        translateX = rightSpace > leftSpace\n          ? translateX\n          : targetWidth - translateX - overlayWidth\n      }\n    }\n\n    return {\n      translateX: Math.round(translateX),\n      translateY: Math.round(translateY),\n    }\n  }\n  return {\n    translateX: 0,\n    translateY: 0,\n  }\n}\n\ninterface GetOverlayStyleArgs {\n  containerRect: ContainerRectAttr\n  targetRect: TargetRectAttr | null\n  overlay: HTMLElement | null\n  position: OverlayPosition\n  marginX: number\n  marginY: number\n  keepInContainer: boolean\n  show: boolean\n}\n\nexport function getOverlayStyle({\n  containerRect,\n  targetRect,\n  overlay,\n  position,\n  marginX,\n  marginY,\n  keepInContainer,\n  show,\n}: GetOverlayStyleArgs) {\n  if (containerRect && targetRect) {\n    const { top, left } = getOverlayPosition({ containerRect, targetRect, show })\n    const { translateX, translateY } = getOverlayTranslation({\n      containerRect,\n      targetRect,\n      overlay,\n      position,\n      marginX,\n      marginY,\n      keepInContainer,\n    })\n\n    return css`\n      top: ${top}px;\n      left: ${left}px;\n      transform: translateX(${translateX}px) translateY(${translateY}px);\n    `\n  }\n  return css``\n}\n"],"names":["TOP_POSITION_OFFSET","getOverlayPosition","containerRect","targetRect","show","containerTop","containerLeft","scrollTop","scrollLeft","targetTop","targetLeft","clientTop","clientLeft","top","left","getOverlayTranslation","overlay","position","marginX","marginY","keepInContainer","containerWidth","containerHeight","targetWidth","targetHeight","width","overlayWidth","height","overlayHeight","getBoundingClientRect","translateX","translateY","OverlayPosition","TopCenter","TopLeft","TopRight","RightCenter","RightTop","RightBottom","BottomCenter","BottomLeft","BottomRight","LeftCenter","LeftTop","LeftBottom","InnerLeftTop","InnerLeftBottom","InnerRightTop","InnerRightBottom","isOverTop","isOverBottom","isOverLeft","isOverRight","topSpace","bottomSpace","leftSpace","rightSpace","Math","round","getOverlayStyle","css"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/Overlay/utils.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport {\n  type ContainerRectAttr,\n  OverlayPosition,\n  type TargetRectAttr,\n} from './Overlay.types'\n\nconst TOP_POSITION_OFFSET = 10\n\ninterface GetOverlayPositionArgs {\n  containerRect: ContainerRectAttr\n  targetRect: TargetRectAttr\n  show: boolean\n}\n\nexport function getOverlayPosition({\n  containerRect,\n  targetRect,\n  show,\n}: GetOverlayPositionArgs) {\n  const { containerTop, containerLeft, scrollTop, scrollLeft } = containerRect\n  const { targetTop, targetLeft, clientTop, clientLeft } = targetRect\n\n  const top = targetTop - clientTop - containerTop + scrollTop\n  const left = targetLeft - clientLeft - containerLeft + scrollLeft\n\n  return {\n    top: show ? top : top - TOP_POSITION_OFFSET,\n    left,\n  }\n}\n\ninterface GetOverlayTranslatationArgs {\n  containerRect: ContainerRectAttr\n  targetRect: TargetRectAttr | null\n  overlay: HTMLElement | null\n  position: OverlayPosition\n  marginX: number\n  marginY: number\n  keepInContainer: boolean\n}\n\nexport function getOverlayTranslation({\n  containerRect,\n  targetRect,\n  overlay,\n  position,\n  marginX,\n  marginY,\n  keepInContainer,\n}: GetOverlayTranslatationArgs) {\n  if (containerRect && targetRect && overlay) {\n    const {\n      containerWidth,\n      containerHeight,\n      containerTop,\n      containerLeft,\n    } = containerRect\n    const { targetWidth, targetHeight, targetTop, targetLeft } = targetRect\n    const { width: overlayWidth, height: overlayHeight } = overlay.getBoundingClientRect()\n\n    let translateX = 0\n    let translateY = 0\n\n    // pre position\n    switch (position) {\n      case OverlayPosition.TopCenter:\n      case OverlayPosition.TopLeft:\n      case OverlayPosition.TopRight:\n        translateY -= (overlayHeight + marginY)\n        translateX += marginX\n        break\n      case OverlayPosition.RightCenter:\n      case OverlayPosition.RightTop:\n      case OverlayPosition.RightBottom:\n        translateX += (targetWidth + marginX)\n        translateY += marginY\n        break\n      case OverlayPosition.BottomCenter:\n      case OverlayPosition.BottomLeft:\n      case OverlayPosition.BottomRight:\n        translateY += (targetHeight + marginY)\n        translateX += marginX\n        break\n      case OverlayPosition.LeftCenter:\n      case OverlayPosition.LeftTop:\n      case OverlayPosition.LeftBottom:\n        translateX -= (overlayWidth + marginX)\n        translateY += marginY\n        break\n    }\n\n    switch (position) {\n      // post position\n      case OverlayPosition.TopCenter:\n      case OverlayPosition.BottomCenter:\n        translateX -= ((overlayWidth / 2) - (targetWidth / 2))\n        break\n      case OverlayPosition.TopRight:\n      case OverlayPosition.BottomRight:\n        translateX -= (overlayWidth - targetWidth)\n        break\n      case OverlayPosition.RightCenter:\n      case OverlayPosition.LeftCenter:\n        translateY -= ((overlayHeight / 2) - (targetHeight / 2))\n        break\n      case OverlayPosition.RightBottom:\n      case OverlayPosition.LeftBottom:\n        translateY -= (overlayHeight - targetHeight)\n        break\n\n      // inner position\n      case OverlayPosition.InnerLeftTop:\n        translateX = marginX\n        translateY = marginY\n        break\n      case OverlayPosition.InnerLeftBottom:\n        translateX = marginX\n        translateY = targetHeight - overlayHeight + marginY\n        break\n      case OverlayPosition.InnerRightTop:\n        translateX = targetWidth - overlayWidth + marginX\n        translateY = marginY\n        break\n      case OverlayPosition.InnerRightBottom:\n        translateX = targetWidth - overlayWidth + marginX\n        translateY = targetHeight - overlayHeight + marginY\n        break\n    }\n\n    if (keepInContainer) {\n      const isOverTop = targetTop + translateY < containerTop\n      const isOverBottom = targetTop + translateY + overlayHeight > containerTop + containerHeight\n      const isOverLeft = targetLeft + translateX < containerLeft\n      const isOverRight = targetLeft + translateX + overlayWidth > containerLeft + containerWidth\n\n      const topSpace = targetTop - containerTop\n      const bottomSpace = (containerTop + containerHeight) - (targetTop + targetHeight)\n      const leftSpace = targetLeft - containerLeft\n      const rightSpace = (containerLeft + containerWidth) - (targetLeft + targetWidth)\n\n      if (isOverTop) {\n        translateY = topSpace > bottomSpace\n          ? translateY\n          : targetHeight - translateY - overlayHeight\n      } else if (isOverBottom) {\n        translateY = bottomSpace > topSpace\n          ? translateY\n          : targetHeight - translateY - overlayHeight\n      }\n      if (isOverLeft) {\n        translateX = leftSpace > rightSpace\n          ? translateX\n          : targetWidth - translateX - overlayWidth\n      } else if (isOverRight) {\n        translateX = rightSpace > leftSpace\n          ? translateX\n          : targetWidth - translateX - overlayWidth\n      }\n    }\n\n    return {\n      translateX: Math.round(translateX),\n      translateY: Math.round(translateY),\n    }\n  }\n  return {\n    translateX: 0,\n    translateY: 0,\n  }\n}\n\ninterface GetOverlayStyleArgs {\n  containerRect: ContainerRectAttr\n  targetRect: TargetRectAttr | null\n  overlay: HTMLElement | null\n  position: OverlayPosition\n  marginX: number\n  marginY: number\n  keepInContainer: boolean\n  show: boolean\n}\n\nexport function getOverlayStyle({\n  containerRect,\n  targetRect,\n  overlay,\n  position,\n  marginX,\n  marginY,\n  keepInContainer,\n  show,\n}: GetOverlayStyleArgs) {\n  if (containerRect && targetRect) {\n    const { top, left } = getOverlayPosition({ containerRect, targetRect, show })\n    const { translateX, translateY } = getOverlayTranslation({\n      containerRect,\n      targetRect,\n      overlay,\n      position,\n      marginX,\n      marginY,\n      keepInContainer,\n    })\n\n    return css`\n      top: ${top}px;\n      left: ${left}px;\n      transform: translateX(${translateX}px) translateY(${translateY}px);\n    `\n  }\n  return css``\n}\n"],"names":["TOP_POSITION_OFFSET","getOverlayPosition","containerRect","targetRect","show","containerTop","containerLeft","scrollTop","scrollLeft","targetTop","targetLeft","clientTop","clientLeft","top","left","getOverlayTranslation","overlay","position","marginX","marginY","keepInContainer","containerWidth","containerHeight","targetWidth","targetHeight","width","overlayWidth","height","overlayHeight","getBoundingClientRect","translateX","translateY","OverlayPosition","TopCenter","TopLeft","TopRight","RightCenter","RightTop","RightBottom","BottomCenter","BottomLeft","BottomRight","LeftCenter","LeftTop","LeftBottom","InnerLeftTop","InnerLeftBottom","InnerRightTop","InnerRightBottom","isOverTop","isOverBottom","isOverLeft","isOverRight","topSpace","bottomSpace","leftSpace","rightSpace","Math","round","getOverlayStyle","css"],"mappings":"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"}

package/dist/cjs/components/SectionLabel/SectionLabel.js

@@ -7,19 +7,18 @@ var index = require('../../node_modules/classnames/index.js');
 var typeUtils = require('../../utils/typeUtils.js');
 var Button = require('../Button/Button.js');
 var Button_types = require('../Button/Button.types.js');
-var Tooltip = require('../Tooltip/Tooltip.js');
 var SectionLabel_styled = require('./SectionLabel.styled.js');
 var Icon_types = require('../Icon/Icon.types.js');
 var v4 = require('../../node_modules/uuid/dist/esm-browser/v4.js');
-var LegacyIcon = require('../LegacyIcon/LegacyIcon.js');
+var Help = require('../Help/Help.js');
 var Divider = require('../Divider/Divider.js');
+var LegacyIcon = require('../LegacyIcon/LegacyIcon.js');
 var Typography = require('../../foundation/Typography.js');
 
 const SECTION_LABEL_TEST_ID = 'bezier-react-section-label';
 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 !typeUtils.isNil(onClick) ? 'clickable' : undefined;
 }
@@ -58,7 +57,7 @@ function renderSectionLabelActionItem(props, key) {
     onClick: onClick
   });
 }
-function SectionLabel({
+const SectionLabel = /*#__PURE__*/React.forwardRef(function SectionLabel({
   content: givenContent,
   open = true,
   divider = false,
@@ -76,7 +75,7 @@ function SectionLabel({
   rightWrapperClassName,
   rightWrapperInterpolation,
   ...props
-}) {
+}, forwardedRef) {
   const content = React.useMemo(() => /*#__PURE__*/React.createElement(SectionLabel_styled.default.ContentWrapper, {
     className: contentWrapperClassName,
     interpolation: contentWrapperInterpolation,
@@ -115,33 +114,27 @@ function SectionLabel({
       "data-testid": SECTION_LABEL_TEST_RIGHT_CONTENT_ID
     }, items);
   }, [rightContent, rightWrapperClassName, rightWrapperInterpolation]);
-  const helpContent = React.useMemo(() => !typeUtils.isNil(help) && /*#__PURE__*/React.createElement(Tooltip.default, {
-    content: help.tooltipContent,
+  const helpContent = React.useMemo(() => !typeUtils.isNil(help) && /*#__PURE__*/React.createElement(SectionLabel_styled.default.HelpContainer, null, /*#__PURE__*/React.createElement(Help.default, {
     allowHover: true
-  }, /*#__PURE__*/React.createElement(SectionLabel_styled.default.HelpIconWrapper, {
-    "data-testid": SECTION_LABEL_TEST_HELP_CONTENT_ID
-  }, /*#__PURE__*/React.createElement(LegacyIcon.default, {
-    name: help.icon ?? 'help-filled',
-    size: Icon_types.IconSize.XS,
-    color: help.iconColor ?? 'txt-black-dark'
-  }))), [help]);
+  }, help)), [help]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": SECTION_LABEL_TEST_ID
   }, divider && /*#__PURE__*/React.createElement(Divider.default, {
     orientation: "horizontal"
   }), /*#__PURE__*/React.createElement(SectionLabel_styled.default.Wrapper, Object.assign({
+    ref: forwardedRef,
     className: index.default(wrapperClassName, clickableClassName(onClick)),
     onClick: onClick,
     interpolation: wrapperInterpolation
   }, props), leftComponent, content, helpContent, rightComponent), children && /*#__PURE__*/React.createElement(SectionLabel_styled.default.ChildrenWrapper, {
     show: open
   }, children));
-}
+});
+var SectionLabel$1 = SectionLabel;
 
 exports.SECTION_LABEL_TEST_CONTENT_ID = SECTION_LABEL_TEST_CONTENT_ID;
-exports.SECTION_LABEL_TEST_HELP_CONTENT_ID = SECTION_LABEL_TEST_HELP_CONTENT_ID;
 exports.SECTION_LABEL_TEST_ID = SECTION_LABEL_TEST_ID;
 exports.SECTION_LABEL_TEST_LEFT_CONTENT_ID = SECTION_LABEL_TEST_LEFT_CONTENT_ID;
 exports.SECTION_LABEL_TEST_RIGHT_CONTENT_ID = SECTION_LABEL_TEST_RIGHT_CONTENT_ID;
-exports.default = SectionLabel;
+exports.default = SectionLabel$1;
 //# sourceMappingURL=SectionLabel.js.map