@channel.io/bezier-react 1.7.2 → 1.9.0

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

@@ -4,10 +4,10 @@ var DisabledOpacity = require('../../constants/DisabledOpacity.js');
 var ListItem_types = require('./ListItem.types.js');
 var utils = require('./utils.js');
 var Icon = require('../Icon/Icon.js');
-var index = require('../../foundation/Transition/index.js');
 var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
 var Mixins = require('../../foundation/Mixins.js');
 var Typography = require('../../foundation/Typography.js');
+var index = require('../../foundation/Transition/index.js');
 
 const getColorFromColorVariantWithDefaultValue = (variant, defaultValue) => {
   switch (variant) {

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<React.ReactElement> {}\n\nexport interface ModalCloseProps extends\n  ChildrenProps<React.ReactElement> {}\n\nexport interface ModalContentContextValue extends\n  Required<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 ModalContentPropsContextValue extends\n  Required<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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var index = require('../../../foundation/Transition/index.js');
 var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
 var styled = require('styled-components');
-var index = require('../../../foundation/Transition/index.js');
 
 const overlayStyles = {
   open: FoundationStyledComponent.css`

package/dist/cjs/components/Modals/Modal/ModalContent.js

@@ -3,9 +3,10 @@
 var React = require('react');
 var index = require('../../../node_modules/@radix-ui/react-dialog/dist/index.js');
 var ZIndex = require('../../../constants/ZIndex.js');
+var useMergeRefs = require('../../../hooks/useMergeRefs.js');
 var domUtils = require('../../../utils/domUtils.js');
 var typeUtils = require('../../../utils/typeUtils.js');
-var ModalContentContext = require('./ModalContentContext.js');
+var ModalContext = require('./ModalContext.js');
 var ModalHelpers = require('./ModalHelpers.js');
 var Modal_styled = require('./Modal.styled.js');
 
@@ -17,13 +18,17 @@ var Modal_styled = require('./Modal.styled.js');
 const ModalContent = /*#__PURE__*/React.forwardRef(function ModalContent({
   children,
   style,
-  container = domUtils.document.body,
+  container = domUtils.getRootElement(),
   showCloseIcon = false,
   width = 'max-content',
   height = 'fit-content',
   zIndex = ZIndex.ZIndex.Modal,
   ...rest
 }, forwardedRef) {
+  const [contentContainer, setContentContainer] = React.useState();
+  const contentRef = useMergeRefs.default(forwardedRef, React.useCallback(node => {
+    setContentContainer(node ?? undefined);
+  }, []));
   const overlayStyle = React.useMemo(() => ({
     '--bezier-modal-z-index': zIndex
   }), [zIndex]);
@@ -32,7 +37,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef(function ModalContent({
     '--bezier-modal-width': typeUtils.isNumber(width) ? `${width}px` : width,
     '--bezier-modal-height': typeUtils.isNumber(height) ? `${height}px` : height
   }), [style, width, height]);
-  const contextValue = React.useMemo(() => ({
+  const propsContextValue = React.useMemo(() => ({
     showCloseIcon
   }), [showCloseIcon]);
   return /*#__PURE__*/React.createElement(index.Portal, {
@@ -43,11 +48,13 @@ const ModalContent = /*#__PURE__*/React.forwardRef(function ModalContent({
     asChild: true
   }, /*#__PURE__*/React.createElement(Modal_styled.Content, Object.assign({
     "aria-modal": true,
-    ref: forwardedRef,
+    ref: contentRef,
     style: contentStyle
-  }, rest), /*#__PURE__*/React.createElement(Modal_styled.Section, null, /*#__PURE__*/React.createElement(ModalContentContext.ModalContentContextProvider, {
-    value: contextValue
-  }, children), showCloseIcon && /*#__PURE__*/React.createElement(ModalHelpers.ModalClose, null, /*#__PURE__*/React.createElement(Modal_styled.CloseIconButton, null)))))));
+  }, rest), /*#__PURE__*/React.createElement(Modal_styled.Section, null, /*#__PURE__*/React.createElement(ModalContext.ModalContainerContextProvider, {
+    value: contentContainer
+  }, /*#__PURE__*/React.createElement(ModalContext.ModalContentPropsContextProvider, {
+    value: propsContextValue
+  }, children)), showCloseIcon && /*#__PURE__*/React.createElement(ModalHelpers.ModalClose, null, /*#__PURE__*/React.createElement(Modal_styled.CloseIconButton, null)))))));
 });
 
 exports.ModalContent = ModalContent;

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

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","sources":["../../../../../src/components/Modals/Modal/ModalContent.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { document } from '~/src/utils/domUtils'\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport {\n  type ModalContentContextValue,\n  type ModalContentProps,\n} from './Modal.types'\nimport { ModalContentContextProvider } from './ModalContentContext'\nimport { ModalClose } from './ModalHelpers'\n\nimport * as Styled from './Modal.styled'\n\n/**\n * `ModalContent` is a container of the modal content.\n * It creates a portal to render the modal content outside of the DOM tree\n * and renders overlay behind the modal content too.\n */\nexport const ModalContent = forwardRef(function ModalContent({\n  children,\n  style,\n  container = document.body,\n  showCloseIcon = false,\n  width = 'max-content',\n  height = 'fit-content',\n  zIndex = ZIndex.Modal,\n  ...rest\n}: ModalContentProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  const overlayStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-z-index': ModalContentProps['zIndex']\n  } => ({\n    '--bezier-modal-z-index': zIndex,\n  }), [zIndex])\n\n  const contentStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-width': ModalContentProps['width']\n    '--bezier-modal-height': ModalContentProps['height']\n  } => ({\n    ...style,\n    '--bezier-modal-width': isNumber(width) ? `${width}px` : width,\n    '--bezier-modal-height': isNumber(height) ? `${height}px` : height,\n  }), [\n    style,\n    width,\n    height,\n  ])\n\n  const contextValue = useMemo((): ModalContentContextValue => ({\n    showCloseIcon,\n  }), [showCloseIcon])\n\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <Styled.DialogPrimitiveOverlay style={overlayStyle}>\n        <DialogPrimitive.Content asChild>\n          <Styled.Content\n            aria-modal\n            ref={forwardedRef}\n            style={contentStyle}\n            {...rest}\n          >\n            <Styled.Section>\n              <ModalContentContextProvider value={contextValue}>\n                { children }\n              </ModalContentContextProvider>\n\n              { /* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */ }\n              { showCloseIcon && (\n                <ModalClose>\n                  <Styled.CloseIconButton />\n                </ModalClose>\n              ) }\n            </Styled.Section>\n          </Styled.Content>\n        </DialogPrimitive.Content>\n      </Styled.DialogPrimitiveOverlay>\n    </DialogPrimitive.Portal>\n  )\n})\n"],"names":["ModalContent","forwardRef","children","style","container","document","body","showCloseIcon","width","height","zIndex","ZIndex","Modal","rest","forwardedRef","overlayStyle","useMemo","contentStyle","isNumber","contextValue","React","createElement","DialogPrimitive","Styled","asChild","Object","assign","ref","ModalContentContextProvider","value","ModalClose"],"mappings":";;;;;;;;;;;AAoBA;AACA;AACA;AACA;AACA;MACaA,YAAY,gBAAGC,gBAAU,CAAC,SAASD,YAAYA,CAAC;EAC3DE,QAAQ;EACRC,KAAK;EACLC,SAAS,GAAGC,iBAAQ,CAACC,IAAI;AACzBC,EAAAA,aAAa,GAAG,KAAK;AACrBC,EAAAA,KAAK,GAAG,aAAa;AACrBC,EAAAA,MAAM,GAAG,aAAa;EACtBC,MAAM,GAAGC,aAAM,CAACC,KAAK;EACrB,GAAGC,IAAAA;AACc,CAAC,EAAEC,YAAuC,EAAE;AAC7D,EAAA,MAAMC,YAAY,GAAGC,aAAO,CAAC,OAEvB;AACJ,IAAA,wBAAwB,EAAEN,MAAAA;AAC5B,GAAC,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC,CAAA;AAEb,EAAA,MAAMO,YAAY,GAAGD,aAAO,CAAC,OAGvB;AACJ,IAAA,GAAGb,KAAK;IACR,sBAAsB,EAAEe,kBAAQ,CAACV,KAAK,CAAC,GAAI,CAAEA,EAAAA,KAAM,CAAG,EAAA,CAAA,GAAGA,KAAK;IAC9D,uBAAuB,EAAEU,kBAAQ,CAACT,MAAM,CAAC,GAAI,CAAA,EAAEA,MAAO,CAAA,EAAA,CAAG,GAAGA,MAAAA;GAC7D,CAAC,EAAE,CACFN,KAAK,EACLK,KAAK,EACLC,MAAM,CACP,CAAC,CAAA;AAEF,EAAA,MAAMU,YAAY,GAAGH,aAAO,CAAC,OAAiC;AAC5DT,IAAAA,aAAAA;AACF,GAAC,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEpB,EAAA,oBACEa,KAAA,CAAAC,aAAA,CAACC,YAAsB,EAAA;AAAClB,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,eAC3CgB,KAAA,CAAAC,aAAA,CAACE,mCAA6B,EAAA;AAACpB,IAAAA,KAAK,EAAEY,YAAAA;AAAa,GAAA,eACjDK,KAAA,CAAAC,aAAA,CAACC,aAAuB,EAAA;IAACE,OAAO,EAAA,IAAA;GAC9BJ,eAAAA,KAAA,CAAAC,aAAA,CAACE,oBAAc,EAAAE,MAAA,CAAAC,MAAA,CAAA;IACb,YAAU,EAAA,IAAA;AACVC,IAAAA,GAAG,EAAEb,YAAa;AAClBX,IAAAA,KAAK,EAAEc,YAAAA;AAAa,GAAA,EAChBJ,IAAI,CAAA,eAERO,KAAA,CAAAC,aAAA,CAACE,oBAAc,EACbH,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACO,+CAA2B,EAAA;AAACC,IAAAA,KAAK,EAAEV,YAAAA;GAChCjB,EAAAA,QACyB,CAAC,EAG5BK,aAAa,iBACba,KAAA,CAAAC,aAAA,CAACS,uBAAU,EACTV,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACE,4BAAsB,EAAA,IAAE,CACf,CAEA,CACF,CACO,CACI,CACT,CAAC,CAAA;AAE7B,CAAC;;;;"}
+{"version":3,"file":"ModalContent.js","sources":["../../../../../src/components/Modals/Modal/ModalContent.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { getRootElement } from '~/src/utils/domUtils'\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport {\n  type ModalContentProps,\n  type ModalContentPropsContextValue,\n} from './Modal.types'\nimport {\n  ModalContainerContextProvider,\n  ModalContentPropsContextProvider,\n} from './ModalContext'\nimport { ModalClose } from './ModalHelpers'\n\nimport * as Styled from './Modal.styled'\n\n/**\n * `ModalContent` is a container of the modal content.\n * It creates a portal to render the modal content outside of the DOM tree\n * and renders overlay behind the modal content too.\n */\nexport const ModalContent = forwardRef(function ModalContent({\n  children,\n  style,\n  container = getRootElement(),\n  showCloseIcon = false,\n  width = 'max-content',\n  height = 'fit-content',\n  zIndex = ZIndex.Modal,\n  ...rest\n}: ModalContentProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  const [contentContainer, setContentContainer] = useState<HTMLElement>()\n\n  const contentRef = useMergeRefs(\n    forwardedRef,\n    useCallback((node: HTMLElement | null) => {\n      setContentContainer(node ?? undefined)\n    }, []),\n  )\n\n  const overlayStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-z-index': ModalContentProps['zIndex']\n  } => ({\n    '--bezier-modal-z-index': zIndex,\n  }), [zIndex])\n\n  const contentStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-width': ModalContentProps['width']\n    '--bezier-modal-height': ModalContentProps['height']\n  } => ({\n    ...style,\n    '--bezier-modal-width': isNumber(width) ? `${width}px` : width,\n    '--bezier-modal-height': isNumber(height) ? `${height}px` : height,\n  }), [\n    style,\n    width,\n    height,\n  ])\n\n  const propsContextValue = useMemo((): ModalContentPropsContextValue => ({\n    showCloseIcon,\n  }), [showCloseIcon])\n\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <Styled.DialogPrimitiveOverlay style={overlayStyle}>\n        <DialogPrimitive.Content asChild>\n          <Styled.Content\n            aria-modal\n            ref={contentRef}\n            style={contentStyle}\n            {...rest}\n          >\n            <Styled.Section>\n              <ModalContainerContextProvider value={contentContainer}>\n                <ModalContentPropsContextProvider value={propsContextValue}>\n                  { children }\n                </ModalContentPropsContextProvider>\n              </ModalContainerContextProvider>\n\n              { /* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */ }\n              { showCloseIcon && (\n                <ModalClose>\n                  <Styled.CloseIconButton />\n                </ModalClose>\n              ) }\n            </Styled.Section>\n          </Styled.Content>\n        </DialogPrimitive.Content>\n      </Styled.DialogPrimitiveOverlay>\n    </DialogPrimitive.Portal>\n  )\n})\n"],"names":["ModalContent","forwardRef","children","style","container","getRootElement","showCloseIcon","width","height","zIndex","ZIndex","Modal","rest","forwardedRef","contentContainer","setContentContainer","useState","contentRef","useMergeRefs","useCallback","node","undefined","overlayStyle","useMemo","contentStyle","isNumber","propsContextValue","React","createElement","DialogPrimitive","Styled","asChild","Object","assign","ref","ModalContainerContextProvider","value","ModalContentPropsContextProvider","ModalClose"],"mappings":";;;;;;;;;;;;AA0BA;AACA;AACA;AACA;AACA;MACaA,YAAY,gBAAGC,gBAAU,CAAC,SAASD,YAAYA,CAAC;EAC3DE,QAAQ;EACRC,KAAK;EACLC,SAAS,GAAGC,uBAAc,EAAE;AAC5BC,EAAAA,aAAa,GAAG,KAAK;AACrBC,EAAAA,KAAK,GAAG,aAAa;AACrBC,EAAAA,MAAM,GAAG,aAAa;EACtBC,MAAM,GAAGC,aAAM,CAACC,KAAK;EACrB,GAAGC,IAAAA;AACc,CAAC,EAAEC,YAAuC,EAAE;EAC7D,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,cAAQ,EAAe,CAAA;EAEvE,MAAMC,UAAU,GAAGC,oBAAY,CAC7BL,YAAY,EACZM,iBAAW,CAAEC,IAAwB,IAAK;AACxCL,IAAAA,mBAAmB,CAACK,IAAI,IAAIC,SAAS,CAAC,CAAA;GACvC,EAAE,EAAE,CACP,CAAC,CAAA;AAED,EAAA,MAAMC,YAAY,GAAGC,aAAO,CAAC,OAEvB;AACJ,IAAA,wBAAwB,EAAEd,MAAAA;AAC5B,GAAC,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC,CAAA;AAEb,EAAA,MAAMe,YAAY,GAAGD,aAAO,CAAC,OAGvB;AACJ,IAAA,GAAGpB,KAAK;IACR,sBAAsB,EAAEsB,kBAAQ,CAAClB,KAAK,CAAC,GAAI,CAAEA,EAAAA,KAAM,CAAG,EAAA,CAAA,GAAGA,KAAK;IAC9D,uBAAuB,EAAEkB,kBAAQ,CAACjB,MAAM,CAAC,GAAI,CAAA,EAAEA,MAAO,CAAA,EAAA,CAAG,GAAGA,MAAAA;GAC7D,CAAC,EAAE,CACFL,KAAK,EACLI,KAAK,EACLC,MAAM,CACP,CAAC,CAAA;AAEF,EAAA,MAAMkB,iBAAiB,GAAGH,aAAO,CAAC,OAAsC;AACtEjB,IAAAA,aAAAA;AACF,GAAC,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEpB,EAAA,oBACEqB,KAAA,CAAAC,aAAA,CAACC,YAAsB,EAAA;AAACzB,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,eAC3CuB,KAAA,CAAAC,aAAA,CAACE,mCAA6B,EAAA;AAAC3B,IAAAA,KAAK,EAAEmB,YAAAA;AAAa,GAAA,eACjDK,KAAA,CAAAC,aAAA,CAACC,aAAuB,EAAA;IAACE,OAAO,EAAA,IAAA;GAC9BJ,eAAAA,KAAA,CAAAC,aAAA,CAACE,oBAAc,EAAAE,MAAA,CAAAC,MAAA,CAAA;IACb,YAAU,EAAA,IAAA;AACVC,IAAAA,GAAG,EAAEjB,UAAW;AAChBd,IAAAA,KAAK,EAAEqB,YAAAA;AAAa,GAAA,EAChBZ,IAAI,CAAA,eAERe,KAAA,CAAAC,aAAA,CAACE,oBAAc,EACbH,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACO,0CAA6B,EAAA;AAACC,IAAAA,KAAK,EAAEtB,gBAAAA;AAAiB,GAAA,eACrDa,KAAA,CAAAC,aAAA,CAACS,6CAAgC,EAAA;AAACD,IAAAA,KAAK,EAAEV,iBAAAA;GACrCxB,EAAAA,QAC8B,CACL,CAAC,EAG9BI,aAAa,iBACbqB,KAAA,CAAAC,aAAA,CAACU,uBAAU,EACTX,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACE,4BAAsB,EAAA,IAAE,CACf,CAEA,CACF,CACO,CACI,CACT,CAAC,CAAA;AAE7B,CAAC;;;;"}

package/dist/cjs/components/Modals/Modal/ModalContext.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var reactUtils = require('../../../utils/reactUtils.js');
+
+const [ModalContentPropsContextProvider, useModalContentPropsContext] = reactUtils.createContext({
+  showCloseIcon: false
+});
+const [ModalContainerContextProvider, useModalContainerContext] = reactUtils.createContext(undefined);
+
+exports.ModalContainerContextProvider = ModalContainerContextProvider;
+exports.ModalContentPropsContextProvider = ModalContentPropsContextProvider;
+exports.useModalContainerContext = useModalContainerContext;
+exports.useModalContentPropsContext = useModalContentPropsContext;
+//# sourceMappingURL=ModalContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.js","sources":["../../../../../src/components/Modals/Modal/ModalContext.ts"],"sourcesContent":["import { createContext } from '~/src/utils/reactUtils'\n\nimport { type ModalContentPropsContextValue } from './Modal.types'\n\nexport const [\n  ModalContentPropsContextProvider,\n  useModalContentPropsContext,\n] = createContext<ModalContentPropsContextValue>({\n  showCloseIcon: false,\n})\n\nexport const [\n  ModalContainerContextProvider,\n  useModalContainerContext,\n] = createContext<HTMLElement | undefined>(undefined)\n"],"names":["ModalContentPropsContextProvider","useModalContentPropsContext","createContext","showCloseIcon","ModalContainerContextProvider","useModalContainerContext","undefined"],"mappings":";;;;AAIO,MAAM,CACXA,gCAAgC,EAChCC,2BAA2B,CAC5B,GAAGC,wBAAa,CAAgC;AAC/CC,EAAAA,aAAa,EAAE,KAAA;AACjB,CAAC,EAAC;AAEK,MAAM,CACXC,6BAA6B,EAC7BC,wBAAwB,CACzB,GAAGH,wBAAa,CAA0BI,SAAS;;;;;;;"}

package/dist/cjs/components/Modals/Modal/ModalHeader.js

@@ -4,7 +4,7 @@ var React = require('react');
 var index = require('../../../node_modules/@radix-ui/react-dialog/dist/index.js');
 var Text = require('../../Text/Text.js');
 var Modal_types = require('./Modal.types.js');
-var ModalContentContext = require('./ModalContentContext.js');
+var ModalContext = require('./ModalContext.js');
 var Modal_styled = require('./Modal.styled.js');
 var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
 var Typography = require('../../../foundation/Typography.js');
@@ -59,7 +59,7 @@ const ModalHeader = /*#__PURE__*/React.forwardRef(function ModalHeader({
 }, forwardedRef) {
   const {
     showCloseIcon
-  } = ModalContentContext.useModalContentContext();
+  } = ModalContext.useModalContentPropsContext();
   const hasTitleArea = title || showCloseIcon;
   const Hidden = hidden ? VisuallyHidden.VisuallyHidden : React.Fragment;
   return /*#__PURE__*/React.createElement(Hidden, null, /*#__PURE__*/React.createElement(Modal_styled.Header, Object.assign({

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

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../../../src/components/Modals/Modal/ModalHeader.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { Typography } from '~/src/foundation'\n\nimport { Text } from '~/src/components/Text'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport {\n  type ModalHeaderProps,\n  ModalTitleSize,\n} from './Modal.types'\nimport { useModalContentContext } from './ModalContentContext'\n\nimport * as Styled from './Modal.styled'\n\nfunction getTitleTypo(size: ModalTitleSize) {\n  switch (size) {\n    case ModalTitleSize.L:\n      return Typography.Size24\n    case ModalTitleSize.M:\n      return Typography.Size16\n    default:\n      return Typography.Size16\n  }\n}\n\nfunction ModalHeaderTitle({\n  children,\n  size,\n  subtitle,\n}: React.PropsWithChildren<Pick<ModalHeaderProps, 'subtitle'> & { size: NonNullable<ModalHeaderProps['titleSize']> }>) {\n  const hasSubtitle = !!subtitle\n  const titleTypo = getTitleTypo(size)\n\n  return (\n    <DialogPrimitive.Title asChild>\n      { hasSubtitle\n        ? (\n          <Styled.HeadingGroup\n            role=\"group\"\n            aria-roledescription=\"Heading group\"\n          >\n            <Styled.Title typo={titleTypo}>\n              { children }\n            </Styled.Title>\n\n            <Text\n              aria-roledescription=\"subtitle\"\n              as=\"p\"\n              bold\n              color=\"txt-black-dark\"\n              typo={Typography.Size13}\n            >\n              { subtitle }\n            </Text>\n          </Styled.HeadingGroup>\n        )\n        : (\n          <Styled.Title typo={titleTypo}>\n            { children }\n          </Styled.Title>\n        ) }\n    </DialogPrimitive.Title>\n  )\n}\n\n/**\n * `ModalHeader` is a header of the modal content.\n * It renders the accessible title and description of the modal.\n * If you want to hide the title and description, use `hidden` prop.\n */\nexport const ModalHeader = forwardRef(function ModalHeader({\n  title,\n  subtitle,\n  description,\n  titleSize = ModalTitleSize.L,\n  hidden = false,\n  ...rest\n}: ModalHeaderProps, forwardedRef: React.Ref<HTMLElement>) {\n  const { showCloseIcon } = useModalContentContext()\n  const hasTitleArea = title || showCloseIcon\n  const Hidden = hidden ? VisuallyHidden : React.Fragment\n\n  return (\n    <Hidden>\n      <Styled.Header\n        ref={forwardedRef}\n        hidden={hidden}\n        {...rest}\n      >\n        { hasTitleArea && (\n          <Styled.TitleContainer>\n            { title && (\n              <ModalHeaderTitle\n                size={titleSize}\n                subtitle={subtitle}\n              >\n                { title }\n              </ModalHeaderTitle>\n            ) }\n\n            { showCloseIcon && (\n              <Styled.CloseIconButtonSpacer />\n            ) }\n          </Styled.TitleContainer>\n        ) }\n\n        { description && (\n          <DialogPrimitive.Description asChild>\n            <Text\n              as=\"p\"\n              color=\"txt-black-darkest\"\n              typo={Typography.Size15}\n            >\n              { description }\n            </Text>\n          </DialogPrimitive.Description>\n        ) }\n      </Styled.Header>\n    </Hidden>\n  )\n})\n"],"names":["getTitleTypo","size","ModalTitleSize","L","Typography","Size24","M","Size16","ModalHeaderTitle","children","subtitle","hasSubtitle","titleTypo","React","createElement","DialogPrimitive","asChild","Styled","role","typo","Text","as","bold","color","Size13","ModalHeader","forwardRef","title","description","titleSize","hidden","rest","forwardedRef","showCloseIcon","useModalContentContext","hasTitleArea","Hidden","VisuallyHidden","Fragment","Object","assign","ref","Size15"],"mappings":"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"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../../../src/components/Modals/Modal/ModalHeader.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { Typography } from '~/src/foundation'\n\nimport { Text } from '~/src/components/Text'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport {\n  type ModalHeaderProps,\n  ModalTitleSize,\n} from './Modal.types'\nimport { useModalContentPropsContext } from './ModalContext'\n\nimport * as Styled from './Modal.styled'\n\nfunction getTitleTypo(size: ModalTitleSize) {\n  switch (size) {\n    case ModalTitleSize.L:\n      return Typography.Size24\n    case ModalTitleSize.M:\n      return Typography.Size16\n    default:\n      return Typography.Size16\n  }\n}\n\nfunction ModalHeaderTitle({\n  children,\n  size,\n  subtitle,\n}: React.PropsWithChildren<Pick<ModalHeaderProps, 'subtitle'> & { size: NonNullable<ModalHeaderProps['titleSize']> }>) {\n  const hasSubtitle = !!subtitle\n  const titleTypo = getTitleTypo(size)\n\n  return (\n    <DialogPrimitive.Title asChild>\n      { hasSubtitle\n        ? (\n          <Styled.HeadingGroup\n            role=\"group\"\n            aria-roledescription=\"Heading group\"\n          >\n            <Styled.Title typo={titleTypo}>\n              { children }\n            </Styled.Title>\n\n            <Text\n              aria-roledescription=\"subtitle\"\n              as=\"p\"\n              bold\n              color=\"txt-black-dark\"\n              typo={Typography.Size13}\n            >\n              { subtitle }\n            </Text>\n          </Styled.HeadingGroup>\n        )\n        : (\n          <Styled.Title typo={titleTypo}>\n            { children }\n          </Styled.Title>\n        ) }\n    </DialogPrimitive.Title>\n  )\n}\n\n/**\n * `ModalHeader` is a header of the modal content.\n * It renders the accessible title and description of the modal.\n * If you want to hide the title and description, use `hidden` prop.\n */\nexport const ModalHeader = forwardRef(function ModalHeader({\n  title,\n  subtitle,\n  description,\n  titleSize = ModalTitleSize.L,\n  hidden = false,\n  ...rest\n}: ModalHeaderProps, forwardedRef: React.Ref<HTMLElement>) {\n  const { showCloseIcon } = useModalContentPropsContext()\n  const hasTitleArea = title || showCloseIcon\n  const Hidden = hidden ? VisuallyHidden : React.Fragment\n\n  return (\n    <Hidden>\n      <Styled.Header\n        ref={forwardedRef}\n        hidden={hidden}\n        {...rest}\n      >\n        { hasTitleArea && (\n          <Styled.TitleContainer>\n            { title && (\n              <ModalHeaderTitle\n                size={titleSize}\n                subtitle={subtitle}\n              >\n                { title }\n              </ModalHeaderTitle>\n            ) }\n\n            { showCloseIcon && (\n              <Styled.CloseIconButtonSpacer />\n            ) }\n          </Styled.TitleContainer>\n        ) }\n\n        { description && (\n          <DialogPrimitive.Description asChild>\n            <Text\n              as=\"p\"\n              color=\"txt-black-darkest\"\n              typo={Typography.Size15}\n            >\n              { description }\n            </Text>\n          </DialogPrimitive.Description>\n        ) }\n      </Styled.Header>\n    </Hidden>\n  )\n})\n"],"names":["getTitleTypo","size","ModalTitleSize","L","Typography","Size24","M","Size16","ModalHeaderTitle","children","subtitle","hasSubtitle","titleTypo","React","createElement","DialogPrimitive","asChild","Styled","role","typo","Text","as","bold","color","Size13","ModalHeader","forwardRef","title","description","titleSize","hidden","rest","forwardedRef","showCloseIcon","useModalContentPropsContext","hasTitleArea","Hidden","VisuallyHidden","Fragment","Object","assign","ref","Size15"],"mappings":"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"}

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

@@ -10,6 +10,7 @@ var domUtils = require('../../utils/domUtils.js');
 var functionUtils = require('../../utils/functionUtils.js');
 var Overlay_types = require('./Overlay.types.js');
 var Overlay_styled = require('./Overlay.styled.js');
+var ModalContext = require('../Modals/Modal/ModalContext.js');
 
 const CONTAINER_TEST_ID = 'bezier-react-container';
 const WRAPPER_TEST_ID = 'bezier-react-wrapper';
@@ -25,7 +26,7 @@ function Overlay({
   style,
   containerClassName = '',
   containerStyle,
-  container,
+  container: givenContainer,
   target,
   position = Overlay_types.OverlayPosition.LeftCenter,
   marginX = 0,
@@ -38,9 +39,7 @@ function Overlay({
   onTransitionEnd = functionUtils.noop,
   ...rest
 }, forwardedRef) {
-  // NOTE: DOM render 가 필요한지 여부를 결정하는 state
   const [shouldRender, setShouldRender] = React.useState(false);
-  // NOTE: 화면에 실제 표현해야 하는지 여부를 결정하는 state
   const [shouldShow, setShouldShow] = React.useState(false);
   const containerRect = React.useRef(null);
   const targetRect = React.useRef(null);
@@ -48,26 +47,29 @@ function Overlay({
   const containerRef = React.useRef(null);
   const overlayRef = React.useRef(null);
   const mergedRef = useMergeRefs.default(overlayRef, forwardedRef);
+  const defaultContainer = domUtils.getRootElement();
+  const modalContainer = ModalContext.useModalContainerContext();
+  const hasContainer = Boolean(givenContainer || modalContainer);
+  const container = givenContainer ?? modalContainer ?? defaultContainer;
   const handleOverlayForceUpdate = React.useCallback(() => {
     forceUpdate();
   }, []);
   const handleContainerRect = React.useCallback(() => {
-    const containerElement = container || domUtils.getRootElement();
     const {
       width: containerWidth,
       height: containerHeight,
       top: containerTop,
       left: containerLeft
-    } = containerElement.getBoundingClientRect();
+    } = container.getBoundingClientRect();
     containerRect.current = {
       containerWidth,
       containerHeight,
       containerTop,
       containerLeft,
-      scrollTop: container ? container.scrollTop : 0,
-      scrollLeft: container ? container.scrollLeft : 0
+      scrollTop: hasContainer ? container.scrollTop : 0,
+      scrollLeft: hasContainer ? container.scrollLeft : 0
     };
-  }, [container]);
+  }, [container, hasContainer]);
   React.useLayoutEffect(function initContainerRect() {
     if (show) {
       handleContainerRect();
@@ -146,7 +148,7 @@ function Overlay({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   , [as, children, className, containerRect, handleTransitionEnd, keepInContainer, marginX, marginY, mergedRef, position, shouldShow, style, targetRect, testId, withTransition, dummy]);
   const overlay = React.useMemo(() => {
-    if (container) {
+    if (hasContainer) {
       return Content;
     }
     return /*#__PURE__*/React.createElement(Overlay_styled.DefaultContainer, {
@@ -158,7 +160,7 @@ function Overlay({
     }, /*#__PURE__*/React.createElement(Overlay_styled.DefaultWrapper, {
       "data-testid": wrapperTestId
     }, Content));
-  }, [container, containerClassName, show, containerStyle, containerTestId, wrapperTestId, Content]);
+  }, [hasContainer, containerClassName, show, containerStyle, containerTestId, wrapperTestId, Content]);
   React.useEffect(() => {
     handleOverlayForceUpdate();
   }, [children, handleOverlayForceUpdate]);
@@ -196,7 +198,7 @@ function Overlay({
   if (!shouldRender) {
     return null;
   }
-  return /*#__PURE__*/ReactDOM.createPortal(overlay, container || domUtils.getRootElement());
+  return /*#__PURE__*/ReactDOM.createPortal(overlay, container);
 }
 var Overlay$1 = /*#__PURE__*/React.forwardRef(Overlay);
 

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

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react'\n\nimport ReactDOM from 'react-dom'\n\nimport useEventHandler from '~/src/hooks/useEventHandler'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport {\n  document,\n  getRootElement,\n  window,\n} from '~/src/utils/domUtils'\nimport { noop } from '~/src/utils/functionUtils'\n\nimport type OverlayProps from './Overlay.types'\nimport {\n  type ContainerRectAttr,\n  type TargetRectAttr,\n} from './Overlay.types'\nimport { OverlayPosition } from './Overlay.types'\n\nimport * as Styled from './Overlay.styled'\n\nexport const CONTAINER_TEST_ID = 'bezier-react-container'\nexport const WRAPPER_TEST_ID = 'bezier-react-wrapper'\nexport const OVERLAY_TEST_ID = 'bezier-react-overlay'\nexport const ESCAPE_KEY = 'Escape'\n\nfunction Overlay(\n  {\n    as,\n    containerTestId = CONTAINER_TEST_ID,\n    wrapperTestId = WRAPPER_TEST_ID,\n    testId = OVERLAY_TEST_ID,\n    show = false,\n    className = '',\n    style,\n    containerClassName = '',\n    containerStyle,\n    container,\n    target,\n    position = OverlayPosition.LeftCenter,\n    marginX = 0,\n    marginY = 0,\n    keepInContainer = false,\n    withTransition = false,\n    enableClickOutside = false,\n    children,\n    onHide = noop,\n    onTransitionEnd = noop,\n    ...rest\n  }: OverlayProps,\n  forwardedRef: Ref<HTMLDivElement>,\n) {\n  // NOTE: DOM render 가 필요한지 여부를 결정하는 state\n  const [shouldRender, setShouldRender] = useState(false)\n  // NOTE: 화면에 실제 표현해야 하는지 여부를 결정하는 state\n  const [shouldShow, setShouldShow] = useState(false)\n  const containerRect = useRef<ContainerRectAttr | null>(null)\n  const targetRect = useRef<TargetRectAttr | null>(null)\n\n  const [dummy, forceUpdate] = useReducer(x => !x, true)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)\n\n  const handleOverlayForceUpdate = useCallback(() => {\n    forceUpdate()\n  }, [])\n\n  const handleContainerRect = useCallback(() => {\n    const containerElement = container || getRootElement()\n\n    const {\n      width: containerWidth,\n      height: containerHeight,\n      top: containerTop,\n      left: containerLeft,\n    } = containerElement.getBoundingClientRect()\n\n    containerRect.current = {\n      containerWidth,\n      containerHeight,\n      containerTop,\n      containerLeft,\n      scrollTop: container ? container.scrollTop : 0,\n      scrollLeft: container ? container.scrollLeft : 0,\n    }\n  }, [container])\n\n  useLayoutEffect(function initContainerRect() {\n    if (show) {\n      handleContainerRect()\n    }\n  }, [\n    show,\n    handleContainerRect,\n  ])\n\n  const handleTargetRect = useCallback(() => {\n    if (!target) {\n      return\n    }\n    const {\n      width: targetWidth,\n      height: targetHeight,\n      top: targetTop,\n      left: targetLeft,\n    } = target.getBoundingClientRect()\n    const { clientTop, clientLeft } = target\n\n    targetRect.current = {\n      targetWidth,\n      targetHeight,\n      targetTop,\n      targetLeft,\n      clientTop,\n      clientLeft,\n    }\n  }, [target])\n\n  useLayoutEffect(function initTargetRect() {\n    if (show) {\n      handleTargetRect()\n    }\n  }, [\n    show,\n    handleTargetRect,\n  ])\n\n  const handleTransitionEnd = useCallback<React.TransitionEventHandler<HTMLDivElement>>((event) => {\n    onTransitionEnd(event)\n    if (!show) {\n      setShouldRender(false)\n    }\n  }, [\n    show,\n    onTransitionEnd,\n  ])\n\n  const handleBlockMouseWheel = useCallback((event: HTMLElementEventMap['wheel']) => {\n    event.stopPropagation()\n  }, [])\n\n  const handleHideOverlay = useCallback((event: any) => {\n    if (!event.target?.closest(Styled.Overlay)) {\n      onHide()\n\n      if (!enableClickOutside) {\n        event.stopPropagation()\n      }\n    }\n  }, [\n    enableClickOutside,\n    onHide,\n  ])\n\n  const handleKeydown = useCallback((event: HTMLElementEventMap['keyup']) => {\n    if (event.key === ESCAPE_KEY) {\n      onHide()\n    }\n  }, [onHide])\n\n  useEventHandler(document, 'click', handleHideOverlay, show, true)\n  useEventHandler(document, 'keydown', handleKeydown, show)\n  useEventHandler(containerRef.current, 'wheel', handleBlockMouseWheel, show)\n\n  const Content = useMemo(() => (\n    <Styled.Overlay\n      as={as}\n      ref={mergedRef}\n      className={className}\n      show={shouldShow}\n      withTransition={withTransition}\n      style={style}\n      data-testid={testId}\n      containerRect={containerRect.current}\n      targetRect={targetRect.current}\n      overlay={overlayRef.current}\n      position={position}\n      marginX={marginX}\n      marginY={marginY}\n      keepInContainer={keepInContainer}\n      onTransitionEnd={handleTransitionEnd}\n      {...rest}\n    >\n      { children }\n    </Styled.Overlay>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  ), [\n    as,\n    children,\n    className,\n    containerRect,\n    handleTransitionEnd,\n    keepInContainer,\n    marginX,\n    marginY,\n    mergedRef,\n    position,\n    shouldShow,\n    style,\n    targetRect,\n    testId,\n    withTransition,\n    dummy,\n  ])\n\n  const overlay = useMemo(() => {\n    if (container) {\n      return Content\n    }\n\n    return (\n      <Styled.DefaultContainer\n        ref={containerRef}\n        className={containerClassName}\n        show={show}\n        style={containerStyle}\n        data-testid={containerTestId}\n      >\n        <Styled.DefaultWrapper data-testid={wrapperTestId}>\n          { Content }\n        </Styled.DefaultWrapper>\n      </Styled.DefaultContainer>\n    )\n  }, [\n    container,\n    containerClassName,\n    show,\n    containerStyle,\n    containerTestId,\n    wrapperTestId,\n    Content,\n  ])\n\n  useEffect(() => {\n    handleOverlayForceUpdate()\n  }, [\n    children,\n    handleOverlayForceUpdate,\n  ])\n\n  /**\n   * Case 1: show === true\n   * show -> shouldRender -> shouldShow\n   * shouldRender 를 true 로 설정하고, 직후에 shouldShow 를 true 로 설정하여 transition 유발\n   *\n   * Case 2: show === false\n   * show -> shouldShow -> (...) -> shouldRender\n   * shouldShow 를 false 로 설정하고, shouldRender 는 transition 필요 여부에 따라 다르게 결정함\n   *    Case 2-1: withTransition === true\n   *    shouldShow -> onTransitionEnd -> shouldRender\n   *    onTransitionEnd handler 를 이용해 transition 이 끝난 다음 shouldRender 를 false 로 설정\n   *    Case 2-2: withTransition === false\n   *    shouldShow && shouldRender\n   *    transition 을 기다릴 필요가 없으므로 바로 shouldRender 를 false 로 설정\n   */\n  useEffect(() => {\n    if (show) {\n      if (shouldRender) {\n        window.requestAnimationFrame(() => setShouldShow(true))\n      } else {\n        window.requestAnimationFrame(() => setShouldRender(true))\n      }\n    }\n\n    if (!show) {\n      window.requestAnimationFrame(() => setShouldShow(false))\n\n      if (!withTransition) {\n        window.requestAnimationFrame(() => setShouldRender(false))\n      }\n    }\n  }, [\n    show,\n    withTransition,\n    shouldRender,\n    shouldShow,\n  ])\n\n  if (!shouldRender) { return null }\n\n  return ReactDOM.createPortal(\n    overlay,\n    container || getRootElement(),\n  )\n}\n\nexport default forwardRef(Overlay)\n"],"names":["CONTAINER_TEST_ID","WRAPPER_TEST_ID","OVERLAY_TEST_ID","ESCAPE_KEY","Overlay","as","containerTestId","wrapperTestId","testId","show","className","style","containerClassName","containerStyle","container","target","position","OverlayPosition","LeftCenter","marginX","marginY","keepInContainer","withTransition","enableClickOutside","children","onHide","noop","onTransitionEnd","rest","forwardedRef","shouldRender","setShouldRender","useState","shouldShow","setShouldShow","containerRect","useRef","targetRect","dummy","forceUpdate","useReducer","x","containerRef","overlayRef","mergedRef","useMergeRefs","handleOverlayForceUpdate","useCallback","handleContainerRect","containerElement","getRootElement","width","containerWidth","height","containerHeight","top","containerTop","left","containerLeft","getBoundingClientRect","current","scrollTop","scrollLeft","useLayoutEffect","initContainerRect","handleTargetRect","targetWidth","targetHeight","targetTop","targetLeft","clientTop","clientLeft","initTargetRect","handleTransitionEnd","event","handleBlockMouseWheel","stopPropagation","handleHideOverlay","closest","Styled","handleKeydown","key","useEventHandler","document","Content","useMemo","React","createElement","Object","assign","ref","overlay","useEffect","window","requestAnimationFrame","ReactDOM","createPortal","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Overlay.js","sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react'\n\nimport ReactDOM from 'react-dom'\n\nimport useEventHandler from '~/src/hooks/useEventHandler'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport {\n  document,\n  getRootElement,\n  window,\n} from '~/src/utils/domUtils'\nimport { noop } from '~/src/utils/functionUtils'\n\nimport { useModalContainerContext } from '~/src/components/Modals'\n\nimport type OverlayProps from './Overlay.types'\nimport {\n  type ContainerRectAttr,\n  type TargetRectAttr,\n} from './Overlay.types'\nimport { OverlayPosition } from './Overlay.types'\n\nimport * as Styled from './Overlay.styled'\n\nexport const CONTAINER_TEST_ID = 'bezier-react-container'\nexport const WRAPPER_TEST_ID = 'bezier-react-wrapper'\nexport const OVERLAY_TEST_ID = 'bezier-react-overlay'\nexport const ESCAPE_KEY = 'Escape'\n\nfunction Overlay(\n  {\n    as,\n    containerTestId = CONTAINER_TEST_ID,\n    wrapperTestId = WRAPPER_TEST_ID,\n    testId = OVERLAY_TEST_ID,\n    show = false,\n    className = '',\n    style,\n    containerClassName = '',\n    containerStyle,\n    container: givenContainer,\n    target,\n    position = OverlayPosition.LeftCenter,\n    marginX = 0,\n    marginY = 0,\n    keepInContainer = false,\n    withTransition = false,\n    enableClickOutside = false,\n    children,\n    onHide = noop,\n    onTransitionEnd = noop,\n    ...rest\n  }: OverlayProps,\n  forwardedRef: Ref<HTMLDivElement>,\n) {\n  const [shouldRender, setShouldRender] = useState(false)\n  const [shouldShow, setShouldShow] = useState(false)\n\n  const containerRect = useRef<ContainerRectAttr | null>(null)\n  const targetRect = useRef<TargetRectAttr | null>(null)\n\n  const [dummy, forceUpdate] = useReducer(x => !x, true)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)\n\n  const defaultContainer = getRootElement()\n  const modalContainer = useModalContainerContext()\n\n  const hasContainer = Boolean(givenContainer || modalContainer)\n  const container = givenContainer ?? modalContainer ?? defaultContainer\n\n  const handleOverlayForceUpdate = useCallback(() => {\n    forceUpdate()\n  }, [])\n\n  const handleContainerRect = useCallback(() => {\n    const {\n      width: containerWidth,\n      height: containerHeight,\n      top: containerTop,\n      left: containerLeft,\n    } = container.getBoundingClientRect()\n\n    containerRect.current = {\n      containerWidth,\n      containerHeight,\n      containerTop,\n      containerLeft,\n      scrollTop: hasContainer ? container.scrollTop : 0,\n      scrollLeft: hasContainer ? container.scrollLeft : 0,\n    }\n  }, [\n    container,\n    hasContainer,\n  ])\n\n  useLayoutEffect(function initContainerRect() {\n    if (show) {\n      handleContainerRect()\n    }\n  }, [\n    show,\n    handleContainerRect,\n  ])\n\n  const handleTargetRect = useCallback(() => {\n    if (!target) {\n      return\n    }\n    const {\n      width: targetWidth,\n      height: targetHeight,\n      top: targetTop,\n      left: targetLeft,\n    } = target.getBoundingClientRect()\n    const { clientTop, clientLeft } = target\n\n    targetRect.current = {\n      targetWidth,\n      targetHeight,\n      targetTop,\n      targetLeft,\n      clientTop,\n      clientLeft,\n    }\n  }, [target])\n\n  useLayoutEffect(function initTargetRect() {\n    if (show) {\n      handleTargetRect()\n    }\n  }, [\n    show,\n    handleTargetRect,\n  ])\n\n  const handleTransitionEnd = useCallback<React.TransitionEventHandler<HTMLDivElement>>((event) => {\n    onTransitionEnd(event)\n    if (!show) {\n      setShouldRender(false)\n    }\n  }, [\n    show,\n    onTransitionEnd,\n  ])\n\n  const handleBlockMouseWheel = useCallback((event: HTMLElementEventMap['wheel']) => {\n    event.stopPropagation()\n  }, [])\n\n  const handleHideOverlay = useCallback((event: any) => {\n    if (!event.target?.closest(Styled.Overlay)) {\n      onHide()\n\n      if (!enableClickOutside) {\n        event.stopPropagation()\n      }\n    }\n  }, [\n    enableClickOutside,\n    onHide,\n  ])\n\n  const handleKeydown = useCallback((event: HTMLElementEventMap['keyup']) => {\n    if (event.key === ESCAPE_KEY) {\n      onHide()\n    }\n  }, [onHide])\n\n  useEventHandler(document, 'click', handleHideOverlay, show, true)\n  useEventHandler(document, 'keydown', handleKeydown, show)\n  useEventHandler(containerRef.current, 'wheel', handleBlockMouseWheel, show)\n\n  const Content = useMemo(() => (\n    <Styled.Overlay\n      as={as}\n      ref={mergedRef}\n      className={className}\n      show={shouldShow}\n      withTransition={withTransition}\n      style={style}\n      data-testid={testId}\n      containerRect={containerRect.current}\n      targetRect={targetRect.current}\n      overlay={overlayRef.current}\n      position={position}\n      marginX={marginX}\n      marginY={marginY}\n      keepInContainer={keepInContainer}\n      onTransitionEnd={handleTransitionEnd}\n      {...rest}\n    >\n      { children }\n    </Styled.Overlay>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  ), [\n    as,\n    children,\n    className,\n    containerRect,\n    handleTransitionEnd,\n    keepInContainer,\n    marginX,\n    marginY,\n    mergedRef,\n    position,\n    shouldShow,\n    style,\n    targetRect,\n    testId,\n    withTransition,\n    dummy,\n  ])\n\n  const overlay = useMemo(() => {\n    if (hasContainer) {\n      return Content\n    }\n\n    return (\n      <Styled.DefaultContainer\n        ref={containerRef}\n        className={containerClassName}\n        show={show}\n        style={containerStyle}\n        data-testid={containerTestId}\n      >\n        <Styled.DefaultWrapper data-testid={wrapperTestId}>\n          { Content }\n        </Styled.DefaultWrapper>\n      </Styled.DefaultContainer>\n    )\n  }, [\n    hasContainer,\n    containerClassName,\n    show,\n    containerStyle,\n    containerTestId,\n    wrapperTestId,\n    Content,\n  ])\n\n  useEffect(() => {\n    handleOverlayForceUpdate()\n  }, [\n    children,\n    handleOverlayForceUpdate,\n  ])\n\n  /**\n   * Case 1: show === true\n   * show -> shouldRender -> shouldShow\n   * shouldRender 를 true 로 설정하고, 직후에 shouldShow 를 true 로 설정하여 transition 유발\n   *\n   * Case 2: show === false\n   * show -> shouldShow -> (...) -> shouldRender\n   * shouldShow 를 false 로 설정하고, shouldRender 는 transition 필요 여부에 따라 다르게 결정함\n   *    Case 2-1: withTransition === true\n   *    shouldShow -> onTransitionEnd -> shouldRender\n   *    onTransitionEnd handler 를 이용해 transition 이 끝난 다음 shouldRender 를 false 로 설정\n   *    Case 2-2: withTransition === false\n   *    shouldShow && shouldRender\n   *    transition 을 기다릴 필요가 없으므로 바로 shouldRender 를 false 로 설정\n   */\n  useEffect(() => {\n    if (show) {\n      if (shouldRender) {\n        window.requestAnimationFrame(() => setShouldShow(true))\n      } else {\n        window.requestAnimationFrame(() => setShouldRender(true))\n      }\n    }\n\n    if (!show) {\n      window.requestAnimationFrame(() => setShouldShow(false))\n\n      if (!withTransition) {\n        window.requestAnimationFrame(() => setShouldRender(false))\n      }\n    }\n  }, [\n    show,\n    withTransition,\n    shouldRender,\n    shouldShow,\n  ])\n\n  if (!shouldRender) { return null }\n\n  return ReactDOM.createPortal(\n    overlay,\n    container,\n  )\n}\n\nexport default forwardRef(Overlay)\n"],"names":["CONTAINER_TEST_ID","WRAPPER_TEST_ID","OVERLAY_TEST_ID","ESCAPE_KEY","Overlay","as","containerTestId","wrapperTestId","testId","show","className","style","containerClassName","containerStyle","container","givenContainer","target","position","OverlayPosition","LeftCenter","marginX","marginY","keepInContainer","withTransition","enableClickOutside","children","onHide","noop","onTransitionEnd","rest","forwardedRef","shouldRender","setShouldRender","useState","shouldShow","setShouldShow","containerRect","useRef","targetRect","dummy","forceUpdate","useReducer","x","containerRef","overlayRef","mergedRef","useMergeRefs","defaultContainer","getRootElement","modalContainer","useModalContainerContext","hasContainer","Boolean","handleOverlayForceUpdate","useCallback","handleContainerRect","width","containerWidth","height","containerHeight","top","containerTop","left","containerLeft","getBoundingClientRect","current","scrollTop","scrollLeft","useLayoutEffect","initContainerRect","handleTargetRect","targetWidth","targetHeight","targetTop","targetLeft","clientTop","clientLeft","initTargetRect","handleTransitionEnd","event","handleBlockMouseWheel","stopPropagation","handleHideOverlay","closest","Styled","handleKeydown","key","useEventHandler","document","Content","useMemo","React","createElement","Object","assign","ref","overlay","useEffect","window","requestAnimationFrame","ReactDOM","createPortal","forwardRef"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Overlay.types.js","sources":["../../../../src/components/Overlay/Overlay.types.ts"],"sourcesContent":["import type React from 'react'\n\nimport {\n  type AdditionalStylableProps,\n  type AdditionalTestIdProps,\n  type BezierComponentProps,\n  type ChildrenProps,\n} from '~/src/types/ComponentProps'\n\nexport interface ContainerRectAttr {\n  containerWidth: number\n  containerHeight: number\n  containerTop: number\n  containerLeft: number\n  scrollTop: number\n  scrollLeft: number\n}\n\nexport interface TargetRectAttr {\n  targetWidth: number\n  targetHeight: number\n  targetTop: number\n  targetLeft: number\n  clientTop: number\n  clientLeft: number\n}\n\nexport enum OverlayPosition {\n  TopCenter = 'topCenter',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  RightCenter = 'rightCenter',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n  BottomCenter = 'bottomCenter',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  LeftCenter = 'leftCenter',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n  InnerLeftTop = 'innerLeftTop',\n  InnerLeftBottom = 'innerLeftBottom',\n  InnerRightTop = 'innerRightTop',\n  InnerRightBottom = 'innerRightBottom',\n}\n\ninterface OverlayOptions {\n  show?: boolean\n  container?: HTMLElement | null\n  target?: HTMLElement | null\n  position?: OverlayPosition\n  marginX?: number\n  marginY?: number\n  keepInContainer?: boolean\n  withTransition?: boolean\n  enableClickOutside?: boolean\n  onHide?: () => void\n}\n\nexport default interface OverlayProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  AdditionalStylableProps<'container'>,\n  AdditionalTestIdProps<['container', 'wrapper']>,\n  OverlayOptions {}\n"],"names":["OverlayPosition"],"mappings":";;AA2BYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,iBAAA,CAAA,GAAA,iBAAA,CAAA;EAAfA,eAAe,CAAA,eAAA,CAAA,GAAA,eAAA,CAAA;EAAfA,eAAe,CAAA,kBAAA,CAAA,GAAA,kBAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"Overlay.types.js","sources":["../../../../src/components/Overlay/Overlay.types.ts"],"sourcesContent":["import type React from 'react'\n\nimport {\n  type AdditionalStylableProps,\n  type AdditionalTestIdProps,\n  type BezierComponentProps,\n  type ChildrenProps,\n} from '~/src/types/ComponentProps'\n\nexport interface ContainerRectAttr {\n  containerWidth: number\n  containerHeight: number\n  containerTop: number\n  containerLeft: number\n  scrollTop: number\n  scrollLeft: number\n}\n\nexport interface TargetRectAttr {\n  targetWidth: number\n  targetHeight: number\n  targetTop: number\n  targetLeft: number\n  clientTop: number\n  clientLeft: number\n}\n\nexport enum OverlayPosition {\n  TopCenter = 'topCenter',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  RightCenter = 'rightCenter',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n  BottomCenter = 'bottomCenter',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  LeftCenter = 'leftCenter',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n  InnerLeftTop = 'innerLeftTop',\n  InnerLeftBottom = 'innerLeftBottom',\n  InnerRightTop = 'innerRightTop',\n  InnerRightBottom = 'innerRightBottom',\n}\n\ninterface OverlayOptions {\n  show?: boolean\n  /**\n   * Specify a container element to portal the content into.\n   * @note When placed inside a `Modal`, default value is the container element of `Modal`.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n  target?: HTMLElement | null\n  position?: OverlayPosition\n  marginX?: number\n  marginY?: number\n  keepInContainer?: boolean\n  withTransition?: boolean\n  enableClickOutside?: boolean\n  onHide?: () => void\n}\n\nexport default interface OverlayProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  AdditionalStylableProps<'container'>,\n  AdditionalTestIdProps<['container', 'wrapper']>,\n  OverlayOptions {}\n"],"names":["OverlayPosition"],"mappings":";;AA2BYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,iBAAA,CAAA,GAAA,iBAAA,CAAA;EAAfA,eAAe,CAAA,eAAA,CAAA,GAAA,eAAA,CAAA;EAAfA,eAAe,CAAA,kBAAA,CAAA,GAAA,kBAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/Tabs/TabAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabAction.js","sources":["../../../../src/components/Tabs/TabAction.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { OpenInNewIcon } from '@channel.io/bezier-icons'\n\nimport { Typography } from '~/src/foundation'\n\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { useTabListContext } from './TabListContext'\nimport {\n  type TabActionElement,\n  type TabActionProps,\n  TabSize,\n} from './Tabs.types'\n\nimport * as Styled from './TabAction.styled'\n\nconst getTypoBy = (size: TabSize) => {\n  switch (size) {\n    case TabSize.L:\n      return Typography.Size14\n    case TabSize.M:\n    case TabSize.S:\n    default:\n      return Typography.Size13\n  }\n}\n\nconst getIconSizeBy = (size: TabSize) => {\n  switch (size) {\n    case TabSize.L:\n      return IconSize.S\n    default:\n      return IconSize.XS\n  }\n}\n\n/**\n * `TabAction` is a button for more action to open a new link or navigate to a different url.\n * If it has `href` props, it should act as a link.\n */\nexport const TabAction = forwardRef(function TabAction<Link extends string | undefined>({\n  href,\n  children,\n  onClick,\n  ...rest\n}: TabActionProps<Link>, forwardedRef: React.Ref<TabActionElement<Link>>,\n) {\n  const { size } = useTabListContext()\n\n  return (\n    isNil(href) ? (\n      <Styled.ToolbarButton\n        size={size}\n        onClick={onClick}\n        ref={forwardedRef}\n        {...rest}\n      >\n        <Text\n          bold\n          typo={getTypoBy(size)}\n        >\n          { children }\n        </Text>\n      </Styled.ToolbarButton>\n    ) : (\n      <Styled.ToolbarLink\n        size={size}\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        ref={forwardedRef}\n        {...rest}\n      >\n        <Text\n          bold\n          typo={getTypoBy(size)}\n        >\n          { children }\n        </Text>\n        <Styled.LinkIcon\n          source={OpenInNewIcon}\n          size={getIconSizeBy(size)}\n        />\n      </Styled.ToolbarLink>\n    )\n  )\n})\n"],"names":["getTypoBy","size","TabSize","L","Typography","Size14","M","S","Size13","getIconSizeBy","IconSize","XS","TabAction","forwardRef","href","children","onClick","rest","forwardedRef","useTabListContext","isNil","React","createElement","Styled","Object","assign","ref","Text","bold","typo","target","rel","source","OpenInNewIcon"],"mappings":";;;;;;;;;;;;AAoBA,MAAMA,SAAS,GAAIC,IAAa,IAAK;AACnC,EAAA,QAAQA,IAAI;IACV,KAAKC,kBAAO,CAACC,CAAC;MACZ,OAAOC,qBAAU,CAACC,MAAM,CAAA;IAC1B,KAAKH,kBAAO,CAACI,CAAC,CAAA;IACd,KAAKJ,kBAAO,CAACK,CAAC,CAAA;AACd,IAAA;MACE,OAAOH,qBAAU,CAACI,MAAM,CAAA;AAC5B,GAAA;AACF,CAAC,CAAA;AAED,MAAMC,aAAa,GAAIR,IAAa,IAAK;AACvC,EAAA,QAAQA,IAAI;IACV,KAAKC,kBAAO,CAACC,CAAC;MACZ,OAAOO,mBAAQ,CAACH,CAAC,CAAA;AACnB,IAAA;MACE,OAAOG,mBAAQ,CAACC,EAAE,CAAA;AACtB,GAAA;AACF,CAAC,CAAA;;AAED;AACA;AACA;AACA;MACaC,SAAS,gBAAGC,gBAAU,CAAC,SAASD,SAASA,CAAkC;EACtFE,IAAI;EACJC,QAAQ;EACRC,OAAO;EACP,GAAGC,IAAAA;AACiB,CAAC,EAAEC,YAA+C,EACtE;EACA,MAAM;AAAEjB,IAAAA,IAAAA;GAAM,GAAGkB,gCAAiB,EAAE,CAAA;AAEpC,EAAA,OACEC,eAAK,CAACN,IAAI,CAAC,gBACTO,KAAA,CAAAC,aAAA,CAACC,8BAAoB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACnBxB,IAAAA,IAAI,EAAEA,IAAK;AACXe,IAAAA,OAAO,EAAEA,OAAQ;AACjBU,IAAAA,GAAG,EAAER,YAAAA;AAAa,GAAA,EACdD,IAAI,CAERI,eAAAA,KAAA,CAAAC,aAAA,CAACK,YAAI,EAAA;IACHC,IAAI,EAAA,IAAA;IACJC,IAAI,EAAE7B,SAAS,CAACC,IAAI,CAAA;AAAE,GAAA,EAEpBc,QACE,CACc,CAAC,gBAEvBM,KAAA,CAAAC,aAAA,CAACC,4BAAkB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACjBxB,IAAAA,IAAI,EAAEA,IAAK;AACXa,IAAAA,IAAI,EAAEA,IAAK;AACXgB,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;AACzBL,IAAAA,GAAG,EAAER,YAAAA;AAAa,GAAA,EACdD,IAAI,CAERI,eAAAA,KAAA,CAAAC,aAAA,CAACK,YAAI,EAAA;IACHC,IAAI,EAAA,IAAA;IACJC,IAAI,EAAE7B,SAAS,CAACC,IAAI,CAAA;GAElBc,EAAAA,QACE,CAAC,eACPM,KAAA,CAAAC,aAAA,CAACC,yBAAe,EAAA;AACdS,IAAAA,MAAM,EAAEC,yBAAc;IACtBhC,IAAI,EAAEQ,aAAa,CAACR,IAAI,CAAA;AAAE,GAC3B,CACiB,CACrB,CAAA;AAEL,CAAC;;;;"}
+{"version":3,"file":"TabAction.js","sources":["../../../../src/components/Tabs/TabAction.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { OpenInNewIcon } from '@channel.io/bezier-icons'\n\nimport { Typography } from '~/src/foundation'\n\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { useTabListContext } from './TabListContext'\nimport {\n  type TabActionElement,\n  type TabActionProps,\n  TabSize,\n} from './Tabs.types'\n\nimport * as Styled from './TabAction.styled'\n\nconst getTypoBy = (size: TabSize) => {\n  switch (size) {\n    case TabSize.L:\n      return Typography.Size14\n    case TabSize.M:\n    case TabSize.S:\n    default:\n      return Typography.Size13\n  }\n}\n\nconst getIconSizeBy = (size: TabSize) => {\n  switch (size) {\n    case TabSize.L:\n      return IconSize.S\n    default:\n      return IconSize.XS\n  }\n}\n\n/**\n * `TabAction` is a button for more action to open a new link or navigate to a different url.\n * If it has `href` props, it should act as a link.\n */\nexport const TabAction = forwardRef(function TabAction({\n  href,\n  children,\n  onClick,\n  ...rest\n}, forwardedRef,\n) {\n  const { size } = useTabListContext()\n\n  return (\n    isNil(href) ? (\n      <Styled.ToolbarButton\n        size={size}\n        onClick={onClick}\n        ref={forwardedRef}\n        {...rest}\n      >\n        <Text\n          bold\n          typo={getTypoBy(size)}\n        >\n          { children }\n        </Text>\n      </Styled.ToolbarButton>\n    ) : (\n      <Styled.ToolbarLink\n        size={size}\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        ref={forwardedRef}\n        {...rest}\n      >\n        <Text\n          bold\n          typo={getTypoBy(size)}\n        >\n          { children }\n        </Text>\n        <Styled.LinkIcon\n          source={OpenInNewIcon}\n          size={getIconSizeBy(size)}\n        />\n      </Styled.ToolbarLink>\n    )\n  )\n}) as <Link extends string | undefined>(\n  props: TabActionProps<Link> & {\n    ref?: React.ForwardedRef<TabActionElement<Link>>\n  }\n) => JSX.Element\n"],"names":["getTypoBy","size","TabSize","L","Typography","Size14","M","S","Size13","getIconSizeBy","IconSize","XS","TabAction","forwardRef","href","children","onClick","rest","forwardedRef","useTabListContext","isNil","React","createElement","Styled","Object","assign","ref","Text","bold","typo","target","rel","source","OpenInNewIcon"],"mappings":";;;;;;;;;;;;AAoBA,MAAMA,SAAS,GAAIC,IAAa,IAAK;AACnC,EAAA,QAAQA,IAAI;IACV,KAAKC,kBAAO,CAACC,CAAC;MACZ,OAAOC,qBAAU,CAACC,MAAM,CAAA;IAC1B,KAAKH,kBAAO,CAACI,CAAC,CAAA;IACd,KAAKJ,kBAAO,CAACK,CAAC,CAAA;AACd,IAAA;MACE,OAAOH,qBAAU,CAACI,MAAM,CAAA;AAC5B,GAAA;AACF,CAAC,CAAA;AAED,MAAMC,aAAa,GAAIR,IAAa,IAAK;AACvC,EAAA,QAAQA,IAAI;IACV,KAAKC,kBAAO,CAACC,CAAC;MACZ,OAAOO,mBAAQ,CAACH,CAAC,CAAA;AACnB,IAAA;MACE,OAAOG,mBAAQ,CAACC,EAAE,CAAA;AACtB,GAAA;AACF,CAAC,CAAA;;AAED;AACA;AACA;AACA;MACaC,SAAS,gBAAGC,gBAAU,CAAC,SAASD,SAASA,CAAC;EACrDE,IAAI;EACJC,QAAQ;EACRC,OAAO;EACP,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EACb;EACA,MAAM;AAAEjB,IAAAA,IAAAA;GAAM,GAAGkB,gCAAiB,EAAE,CAAA;AAEpC,EAAA,OACEC,eAAK,CAACN,IAAI,CAAC,gBACTO,KAAA,CAAAC,aAAA,CAACC,8BAAoB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACnBxB,IAAAA,IAAI,EAAEA,IAAK;AACXe,IAAAA,OAAO,EAAEA,OAAQ;AACjBU,IAAAA,GAAG,EAAER,YAAAA;AAAa,GAAA,EACdD,IAAI,CAERI,eAAAA,KAAA,CAAAC,aAAA,CAACK,YAAI,EAAA;IACHC,IAAI,EAAA,IAAA;IACJC,IAAI,EAAE7B,SAAS,CAACC,IAAI,CAAA;AAAE,GAAA,EAEpBc,QACE,CACc,CAAC,gBAEvBM,KAAA,CAAAC,aAAA,CAACC,4BAAkB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACjBxB,IAAAA,IAAI,EAAEA,IAAK;AACXa,IAAAA,IAAI,EAAEA,IAAK;AACXgB,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;AACzBL,IAAAA,GAAG,EAAER,YAAAA;AAAa,GAAA,EACdD,IAAI,CAERI,eAAAA,KAAA,CAAAC,aAAA,CAACK,YAAI,EAAA;IACHC,IAAI,EAAA,IAAA;IACJC,IAAI,EAAE7B,SAAS,CAACC,IAAI,CAAA;GAElBc,EAAAA,QACE,CAAC,eACPM,KAAA,CAAAC,aAAA,CAACC,yBAAe,EAAA;AACdS,IAAAA,MAAM,EAAEC,yBAAc;IACtBhC,IAAI,EAAEQ,aAAa,CAACR,IAAI,CAAA;AAAE,GAC3B,CACiB,CACrB,CAAA;AAEL,CAAC;;;;"}

package/dist/cjs/components/Text/Text.styled.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
 var Mixins = require('../../foundation/Mixins.js');
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
 
 function getMargin({
   margintop,

package/dist/cjs/components/Toast/ToastProvider.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ReactDOM = require('react-dom');
+var useIsMounted = require('../../hooks/useIsMounted.js');
 var domUtils = require('../../utils/domUtils.js');
 var Toast_types = require('./Toast.types.js');
 var ToastContainer = require('./ToastContainer.js');
@@ -18,6 +19,7 @@ function ToastProvider({
   autoDismissTimeout = 3000,
   children = []
 }) {
+  const isMounted = useIsMounted.default();
   const toastContextValue = useToastContextValues.default();
   const {
     leftToasts,
@@ -59,7 +61,7 @@ function ToastProvider({
   }))), [autoDismissTimeout, dismiss]);
   return /*#__PURE__*/React.createElement(ToastContext.ToastContextProvider, {
     value: toastContextValue
-  }, children, /*#__PURE__*/ReactDOM.createPortal([createContainer(Toast_types.ToastPlacement.BottomLeft, leftToasts), createContainer(Toast_types.ToastPlacement.BottomRight, rightToasts)], domUtils.getRootElement()));
+  }, children, isMounted && /*#__PURE__*/ReactDOM.createPortal([createContainer(Toast_types.ToastPlacement.BottomLeft, leftToasts), createContainer(Toast_types.ToastPlacement.BottomRight, rightToasts)], domUtils.getRootElement()));
 }
 
 exports.default = ToastProvider;

package/dist/cjs/components/Toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","sources":["../../../../src/components/Toast/ToastProvider.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport { createPortal } from 'react-dom'\n\nimport {\n  TransitionDuration,\n  css,\n} from '~/src/foundation'\n\nimport { getRootElement } from '~/src/utils/domUtils'\n\nimport {\n  ToastPlacement,\n  type ToastProviderProps,\n  type ToastType,\n} from './Toast.types'\nimport ToastContainer from './ToastContainer'\nimport { ToastContextProvider } from './ToastContext'\nimport ToastController from './ToastController'\nimport ToastElement from './ToastElement'\nimport useToastProviderValues from './useToastContextValues'\n\nfunction ToastProvider({\n  autoDismissTimeout = 3000,\n  children = [],\n}: ToastProviderProps) {\n  const toastContextValue = useToastProviderValues()\n  const {\n    leftToasts,\n    rightToasts,\n    dismiss,\n  } = toastContextValue\n\n  const createContainer = useCallback((placement: ToastPlacement, toasts: ToastType[]) => (\n    <ToastContainer\n      key={placement}\n      placement={placement}\n    >\n      { toasts.map(({\n        autoDismiss,\n        content,\n        preset,\n        appearance,\n        icon,\n        actionContent,\n        onClick,\n        id,\n        onDismiss,\n        zIndex,\n        version,\n      }) => (\n        <ToastController\n          key={id}\n          placement={placement}\n          autoDismiss={autoDismiss ?? true}\n          transitionDuration={TransitionDuration.M}\n          actionContent={actionContent}\n          onClick={onClick}\n          autoDismissTimeout={autoDismissTimeout}\n          preset={preset}\n          appearance={appearance}\n          content={content}\n          icon={icon}\n          component={ToastElement}\n          onDismiss={() => dismiss(id, onDismiss)}\n          transform={css``}\n          zIndex={zIndex}\n          version={version}\n        />\n      )) }\n    </ToastContainer>\n  ), [\n    autoDismissTimeout,\n    dismiss,\n  ])\n\n  return (\n    <ToastContextProvider value={toastContextValue}>\n      { children }\n      { createPortal(\n        [\n          createContainer(ToastPlacement.BottomLeft, leftToasts),\n          createContainer(ToastPlacement.BottomRight, rightToasts),\n        ],\n        getRootElement(),\n      ) }\n    </ToastContextProvider>\n  )\n}\n\nexport default ToastProvider\n"],"names":["ToastProvider","autoDismissTimeout","children","toastContextValue","useToastProviderValues","leftToasts","rightToasts","dismiss","createContainer","useCallback","placement","toasts","React","createElement","ToastContainer","key","map","autoDismiss","content","preset","appearance","icon","actionContent","onClick","id","onDismiss","zIndex","version","ToastController","transitionDuration","TransitionDuration","M","component","ToastElement","transform","css","ToastContextProvider","value","createPortal","ToastPlacement","BottomLeft","BottomRight","getRootElement"],"mappings":";;;;;;;;;;;;;;;;AAsBA,SAASA,aAAaA,CAAC;AACrBC,EAAAA,kBAAkB,GAAG,IAAI;AACzBC,EAAAA,QAAQ,GAAG,EAAA;AACO,CAAC,EAAE;AACrB,EAAA,MAAMC,iBAAiB,GAAGC,6BAAsB,EAAE,CAAA;EAClD,MAAM;IACJC,UAAU;IACVC,WAAW;AACXC,IAAAA,OAAAA;AACF,GAAC,GAAGJ,iBAAiB,CAAA;AAErB,EAAA,MAAMK,eAAe,GAAGC,iBAAW,CAAC,CAACC,SAAyB,EAAEC,MAAmB,kBACjFC,KAAA,CAAAC,aAAA,CAACC,sBAAc,EAAA;AACbC,IAAAA,GAAG,EAAEL,SAAU;AACfA,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAEnBC,MAAM,CAACK,GAAG,CAAC,CAAC;IACZC,WAAW;IACXC,OAAO;IACPC,MAAM;IACNC,UAAU;IACVC,IAAI;IACJC,aAAa;IACbC,OAAO;IACPC,EAAE;IACFC,SAAS;IACTC,MAAM;AACNC,IAAAA,OAAAA;AACF,GAAC,kBACCf,KAAA,CAAAC,aAAA,CAACe,uBAAe,EAAA;AACdb,IAAAA,GAAG,EAAES,EAAG;AACRd,IAAAA,SAAS,EAAEA,SAAU;IACrBO,WAAW,EAAEA,WAAW,IAAI,IAAK;IACjCY,kBAAkB,EAAEC,wBAAkB,CAACC,CAAE;AACzCT,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,OAAO,EAAEA,OAAQ;AACjBtB,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCkB,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,UAAU,EAAEA,UAAW;AACvBF,IAAAA,OAAO,EAAEA,OAAQ;AACjBG,IAAAA,IAAI,EAAEA,IAAK;AACXW,IAAAA,SAAS,EAAEC,oBAAa;IACxBR,SAAS,EAAEA,MAAMlB,OAAO,CAACiB,EAAE,EAAEC,SAAS,CAAE;IACxCS,SAAS,EAAEC,6BAAI,CAAE,CAAA;AACjBT,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAAA;GACV,CACF,CACa,CACjB,EAAE,CACD1B,kBAAkB,EAClBM,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACuB,iCAAoB,EAAA;AAACC,IAAAA,KAAK,EAAElC,iBAAAA;AAAkB,GAAA,EAC3CD,QAAQ,eACRoC,qBAAY,CACZ,CACE9B,eAAe,CAAC+B,0BAAc,CAACC,UAAU,EAAEnC,UAAU,CAAC,EACtDG,eAAe,CAAC+B,0BAAc,CAACE,WAAW,EAAEnC,WAAW,CAAC,CACzD,EACDoC,uBAAc,EAChB,CACoB,CAAC,CAAA;AAE3B;;;;"}
+{"version":3,"file":"ToastProvider.js","sources":["../../../../src/components/Toast/ToastProvider.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport { createPortal } from 'react-dom'\n\nimport {\n  TransitionDuration,\n  css,\n} from '~/src/foundation'\n\nimport useIsMounted from '~/src/hooks/useIsMounted'\nimport { getRootElement } from '~/src/utils/domUtils'\n\nimport {\n  ToastPlacement,\n  type ToastProviderProps,\n  type ToastType,\n} from './Toast.types'\nimport ToastContainer from './ToastContainer'\nimport { ToastContextProvider } from './ToastContext'\nimport ToastController from './ToastController'\nimport ToastElement from './ToastElement'\nimport useToastProviderValues from './useToastContextValues'\n\nfunction ToastProvider({\n  autoDismissTimeout = 3000,\n  children = [],\n}: ToastProviderProps) {\n  const isMounted = useIsMounted()\n\n  const toastContextValue = useToastProviderValues()\n  const {\n    leftToasts,\n    rightToasts,\n    dismiss,\n  } = toastContextValue\n\n  const createContainer = useCallback((placement: ToastPlacement, toasts: ToastType[]) => (\n    <ToastContainer\n      key={placement}\n      placement={placement}\n    >\n      { toasts.map(({\n        autoDismiss,\n        content,\n        preset,\n        appearance,\n        icon,\n        actionContent,\n        onClick,\n        id,\n        onDismiss,\n        zIndex,\n        version,\n      }) => (\n        <ToastController\n          key={id}\n          placement={placement}\n          autoDismiss={autoDismiss ?? true}\n          transitionDuration={TransitionDuration.M}\n          actionContent={actionContent}\n          onClick={onClick}\n          autoDismissTimeout={autoDismissTimeout}\n          preset={preset}\n          appearance={appearance}\n          content={content}\n          icon={icon}\n          component={ToastElement}\n          onDismiss={() => dismiss(id, onDismiss)}\n          transform={css``}\n          zIndex={zIndex}\n          version={version}\n        />\n      )) }\n    </ToastContainer>\n  ), [\n    autoDismissTimeout,\n    dismiss,\n  ])\n\n  return (\n    <ToastContextProvider value={toastContextValue}>\n      { children }\n      { isMounted && createPortal(\n        [\n          createContainer(ToastPlacement.BottomLeft, leftToasts),\n          createContainer(ToastPlacement.BottomRight, rightToasts),\n        ],\n        getRootElement(),\n      ) }\n    </ToastContextProvider>\n  )\n}\n\nexport default ToastProvider\n"],"names":["ToastProvider","autoDismissTimeout","children","isMounted","useIsMounted","toastContextValue","useToastProviderValues","leftToasts","rightToasts","dismiss","createContainer","useCallback","placement","toasts","React","createElement","ToastContainer","key","map","autoDismiss","content","preset","appearance","icon","actionContent","onClick","id","onDismiss","zIndex","version","ToastController","transitionDuration","TransitionDuration","M","component","ToastElement","transform","css","ToastContextProvider","value","createPortal","ToastPlacement","BottomLeft","BottomRight","getRootElement"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,SAASA,aAAaA,CAAC;AACrBC,EAAAA,kBAAkB,GAAG,IAAI;AACzBC,EAAAA,QAAQ,GAAG,EAAA;AACO,CAAC,EAAE;AACrB,EAAA,MAAMC,SAAS,GAAGC,oBAAY,EAAE,CAAA;AAEhC,EAAA,MAAMC,iBAAiB,GAAGC,6BAAsB,EAAE,CAAA;EAClD,MAAM;IACJC,UAAU;IACVC,WAAW;AACXC,IAAAA,OAAAA;AACF,GAAC,GAAGJ,iBAAiB,CAAA;AAErB,EAAA,MAAMK,eAAe,GAAGC,iBAAW,CAAC,CAACC,SAAyB,EAAEC,MAAmB,kBACjFC,KAAA,CAAAC,aAAA,CAACC,sBAAc,EAAA;AACbC,IAAAA,GAAG,EAAEL,SAAU;AACfA,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAEnBC,MAAM,CAACK,GAAG,CAAC,CAAC;IACZC,WAAW;IACXC,OAAO;IACPC,MAAM;IACNC,UAAU;IACVC,IAAI;IACJC,aAAa;IACbC,OAAO;IACPC,EAAE;IACFC,SAAS;IACTC,MAAM;AACNC,IAAAA,OAAAA;AACF,GAAC,kBACCf,KAAA,CAAAC,aAAA,CAACe,uBAAe,EAAA;AACdb,IAAAA,GAAG,EAAES,EAAG;AACRd,IAAAA,SAAS,EAAEA,SAAU;IACrBO,WAAW,EAAEA,WAAW,IAAI,IAAK;IACjCY,kBAAkB,EAAEC,wBAAkB,CAACC,CAAE;AACzCT,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,OAAO,EAAEA,OAAQ;AACjBxB,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCoB,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,UAAU,EAAEA,UAAW;AACvBF,IAAAA,OAAO,EAAEA,OAAQ;AACjBG,IAAAA,IAAI,EAAEA,IAAK;AACXW,IAAAA,SAAS,EAAEC,oBAAa;IACxBR,SAAS,EAAEA,MAAMlB,OAAO,CAACiB,EAAE,EAAEC,SAAS,CAAE;IACxCS,SAAS,EAAEC,6BAAI,CAAE,CAAA;AACjBT,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAAA;GACV,CACF,CACa,CACjB,EAAE,CACD5B,kBAAkB,EAClBQ,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACuB,iCAAoB,EAAA;AAACC,IAAAA,KAAK,EAAElC,iBAAAA;AAAkB,GAAA,EAC3CH,QAAQ,EACRC,SAAS,iBAAIqC,qBAAY,CACzB,CACE9B,eAAe,CAAC+B,0BAAc,CAACC,UAAU,EAAEnC,UAAU,CAAC,EACtDG,eAAe,CAAC+B,0BAAc,CAACE,WAAW,EAAEnC,WAAW,CAAC,CACzD,EACDoC,uBAAc,EAChB,CACoB,CAAC,CAAA;AAE3B;;;;"}

package/dist/cjs/components/Toast/ToastService.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var Toast_types = require('./Toast.types.js');
 var v4 = require('../../node_modules/uuid/dist/esm-browser/v4.js');
 
@@ -11,66 +10,65 @@ Notion: https://www.notion.so/channelio/Toast-bc13dfbc81314141909250d9cf02c4c7#8
 */
 
 class ToastService {
-  constructor() {
-    _rollupPluginBabelHelpers.defineProperty(this, "toasts", []);
-    _rollupPluginBabelHelpers.defineProperty(this, "getToasts", () => this.toasts);
-    _rollupPluginBabelHelpers.defineProperty(this, "setToasts", newToasts => {
-      this.toasts = newToasts;
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "has", toastId => {
-      if (!this.toasts.length) {
-        return false;
-      }
-      return this.toasts.reduce((flag, toast) => toast.id === toastId ? true : flag, false);
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "add", (content, options = Toast_types.defaultOptions) => {
-      const newId = v4.default();
-      if (this.has(newId)) {
-        return '';
-      }
-      const newToast = {
-        id: newId,
-        content,
-        version: 0,
-        ...options
-      };
-      const newToasts = [...this.toasts, newToast];
-      this.setToasts(newToasts);
-      return newId;
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "update", (toastId, content, options = {}) => {
-      if (!this.has(toastId)) {
-        return '';
+  toasts = [];
+  getToasts = () => this.toasts;
+  setToasts = newToasts => {
+    this.toasts = newToasts;
+  };
+  has = toastId => {
+    if (!this.toasts.length) {
+      return false;
+    }
+    return this.toasts.reduce((flag, toast) => toast.id === toastId ? true : flag, false);
+  };
+  add = (content, options = Toast_types.defaultOptions) => {
+    const newId = v4.default();
+    if (this.has(newId)) {
+      return '';
+    }
+    const newToast = {
+      id: newId,
+      content,
+      version: 0,
+      ...options
+    };
+    const newToasts = [...this.toasts, newToast];
+    this.setToasts(newToasts);
+    return newId;
+  };
+  update = (toastId, content, options = {}) => {
+    if (!this.has(toastId)) {
+      return '';
+    }
+    const newToasts = this.toasts.map(toast => {
+      if (toast.id === toastId) {
+        return {
+          ...toast,
+          ...options,
+          version: toast?.version != null ? toast.version + 1 : 0,
+          content
+        };
       }
-      const newToasts = this.toasts.map(toast => {
-        if (toast.id === toastId) {
-          return {
-            ...toast,
-            ...options,
-            version: toast?.version != null ? toast.version + 1 : 0,
-            content
-          };
-        }
-        return toast;
-      });
-      this.setToasts(newToasts);
-      return toastId;
+      return toast;
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "remove", id => {
-      if (!this.has(id)) {
-        return false;
-      }
-      const newToasts = this.toasts.filter(toast => toast.id !== id);
-      this.setToasts(newToasts);
-      return true; // remove success
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "removeAll", () => {
-      if (!this.toasts.length) {
-        return;
-      }
-      this.setToasts([]);
-    });
-  }
+    this.setToasts(newToasts);
+    return toastId;
+  };
+  remove = id => {
+    if (!this.has(id)) {
+      return false;
+    }
+    const newToasts = this.toasts.filter(toast => toast.id !== id);
+    this.setToasts(newToasts);
+    return true; // remove success
+  };
+
+  removeAll = () => {
+    if (!this.toasts.length) {
+      return;
+    }
+    this.setToasts([]);
+  };
 }
 var ToastService$1 = ToastService;