@channel.io/bezier-react 2.6.2 → 3.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, useCallback, useMemo, useState } from 'react'\n\nimport { CancelIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { getZIndexClassName } from '~/src/types/props-helpers'\nimport { createContext } from '~/src/utils/react'\nimport { cssDimension } from '~/src/utils/style'\nimport { isNil, isNumber } from '~/src/utils/type'\n\nimport {\n  AlphaDialogPrimitive,\n  AlphaDialogPrimitiveClose,\n  AlphaDialogPrimitiveContent,\n  AlphaDialogPrimitiveDescription,\n  AlphaDialogPrimitiveOverlay,\n  AlphaDialogPrimitivePortal,\n  type AlphaDialogPrimitiveProps,\n  AlphaDialogPrimitiveTitle,\n  AlphaDialogPrimitiveTrigger,\n} from '~/src/components/AlphaDialogPrimitive'\nimport { Button } from '~/src/components/Button'\nimport { Text } from '~/src/components/Text'\nimport { ThemeProvider, useThemeName } from '~/src/components/ThemeProvider'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\nimport { useRootElement } from '~/src/components/WindowProvider'\n\nimport {\n  type ModalBodyProps,\n  type ModalCloseProps,\n  type ModalContentProps,\n  type ModalContentPropsContextValue,\n  type ModalFooterProps,\n  type ModalHeaderProps,\n  type ModalProps,\n  type ModalTitleSize,\n  type ModalTriggerProps,\n} from './Modal.types'\n\nimport styles from './Modal.module.scss'\n\nconst [ModalContainerContextProvider, useModalContainerContext] = createContext<\n  HTMLElement | undefined\n>(undefined)\n\nexport { useModalContainerContext }\n\nconst [ModalContentPropsContextProvider, useModalContentPropsContext] =\n  createContext<ModalContentPropsContextValue>({\n    showCloseIcon: false,\n  })\n\n/**\n * `Modal` is a dialog that appears on top of the page.\n *\n * `Modal` is a context of the Modal-related components. It doesn't render any DOM node.\n * It controls the visibility of the entire component and provides\n * handlers and accessibility properties to Modal-related components.\n * @example\n *\n * ```tsx\n * // Anatomy of the Modal\n * <Modal>\n *  <ModalTrigger />\n *  <ModalContent>\n *    <ModalHeader />\n *    <ModalBody />\n *    <ModalFooter />\n *  </ModalContent>\n * </Modal>\n * ```\n */\nexport function Modal({\n  children,\n  show,\n  defaultShow,\n  onShow,\n  onHide,\n}: ModalProps) {\n  const onOpenChange = useCallback<\n    NonNullable<AlphaDialogPrimitiveProps['onOpenChange']>\n  >(\n    (open) => {\n      const callback = open ? onShow : onHide\n      callback?.()\n    },\n    [onShow, onHide]\n  )\n\n  return (\n    <AlphaDialogPrimitive\n      open={show}\n      defaultOpen={defaultShow}\n      onOpenChange={onOpenChange}\n    >\n      {children}\n    </AlphaDialogPrimitive>\n  )\n}\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<HTMLDivElement, ModalContentProps>(\n  function ModalContent(\n    {\n      children,\n      style,\n      className,\n      container: givenContainer,\n      showCloseIcon = false,\n      preventHideOnOutsideClick = false,\n      width = 'max-content',\n      height = 'fit-content',\n      zIndex = 'modal',\n      collisionPadding = { top: 40, bottom: 40 },\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const rootElement = useRootElement()\n    const container = givenContainer ?? rootElement\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 = (() => {\n      const padding = (() => {\n        if (isNumber(collisionPadding)) {\n          return `${collisionPadding}px`\n        }\n\n        const { top, right, bottom, left } = {\n          top: 0,\n          right: 0,\n          bottom: 0,\n          left: 0,\n          ...collisionPadding,\n        }\n\n        return `${top}px ${right}px ${bottom}px ${left}px`\n      })()\n\n      return {\n        '--b-modal-collision-padding': padding,\n      } as React.CSSProperties\n    })()\n\n    const propsContextValue = useMemo(\n      (): ModalContentPropsContextValue => ({\n        showCloseIcon,\n      }),\n      [showCloseIcon]\n    )\n\n    return (\n      <AlphaDialogPrimitivePortal container={container}>\n        <ThemeProvider themeName={useThemeName()}>\n          <AlphaDialogPrimitiveOverlay\n            style={overlayStyle}\n            className={classNames(\n              styles.ModalOverlay,\n              getZIndexClassName(zIndex)\n            )}\n          >\n            <AlphaDialogPrimitiveContent\n              asChild\n              onPointerDownOutside={(e) => {\n                if (preventHideOnOutsideClick) {\n                  e.preventDefault()\n                }\n              }}\n              onInteractOutside={(e) => {\n                if (preventHideOnOutsideClick) {\n                  e.preventDefault()\n                }\n              }}\n            >\n              <div\n                aria-modal=\"true\"\n                ref={contentRef}\n                style={\n                  {\n                    '--b-modal-width': cssDimension(width),\n                    '--b-modal-height': cssDimension(height),\n                    ...style,\n                  } as React.CSSProperties\n                }\n                className={classNames(styles.ModalContent, className)}\n                {...rest}\n              >\n                <section className={styles.ModalSection}>\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                    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n                    <ModalClose>\n                      <Button\n                        className={styles.CloseIconButton}\n                        size=\"m\"\n                        leftContent={CancelIcon}\n                        colorVariant=\"monochrome-dark\"\n                        styleVariant=\"tertiary\"\n                      />\n                    </ModalClose>\n                  )}\n                </section>\n              </div>\n            </AlphaDialogPrimitiveContent>\n          </AlphaDialogPrimitiveOverlay>\n        </ThemeProvider>\n      </AlphaDialogPrimitivePortal>\n    )\n  }\n)\n\nfunction getTitleTypo(size: ModalTitleSize) {\n  return (\n    {\n      l: '24',\n      m: '16',\n    } as const\n  )[size]\n}\n\nfunction ModalHeaderTitle({\n  children,\n  size,\n  subtitle,\n}: React.PropsWithChildren<\n  Pick<ModalHeaderProps, 'subtitle'> & {\n    size: NonNullable<ModalHeaderProps['titleSize']>\n  }\n>) {\n  const Title = (\n    <Text\n      className={styles.Title}\n      as=\"h2\"\n      typo={getTitleTypo(size)}\n      bold\n      color=\"txt-black-darkest\"\n    >\n      {children}\n    </Text>\n  )\n\n  return (\n    <AlphaDialogPrimitiveTitle asChild>\n      {!isNil(subtitle) ? (\n        <hgroup\n          className={styles.HeadingGroup}\n          role=\"group\"\n          aria-roledescription=\"Heading group\"\n        >\n          {Title}\n\n          <Text\n            aria-roledescription=\"subtitle\"\n            as=\"p\"\n            bold\n            color=\"txt-black-dark\"\n            typo=\"13\"\n          >\n            {subtitle}\n          </Text>\n        </hgroup>\n      ) : (\n        Title\n      )}\n    </AlphaDialogPrimitiveTitle>\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<HTMLElement, ModalHeaderProps>(\n  function ModalHeader(\n    {\n      className,\n      title,\n      subtitle,\n      description,\n      titleSize = 'l',\n      hidden = false,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const { showCloseIcon } = useModalContentPropsContext()\n    const hasTitleArea = title || showCloseIcon\n    const Hidden = hidden ? VisuallyHidden : React.Fragment\n\n    return (\n      <Hidden>\n        <header\n          ref={forwardedRef}\n          className={classNames(\n            styles.ModalHeader,\n            hidden && styles.hidden,\n            className\n          )}\n          {...rest}\n        >\n          {hasTitleArea && (\n            <div className={styles.TitleContainer}>\n              {title && (\n                <ModalHeaderTitle\n                  size={titleSize}\n                  subtitle={subtitle}\n                >\n                  {title}\n                </ModalHeaderTitle>\n              )}\n\n              {showCloseIcon && (\n                <Button\n                  className={styles.CloseIconButtonSpacer}\n                  as=\"div\"\n                  size=\"m\"\n                />\n              )}\n            </div>\n          )}\n\n          {description && (\n            <AlphaDialogPrimitiveDescription asChild>\n              <Text\n                as=\"p\"\n                color=\"txt-black-darkest\"\n                typo=\"15\"\n              >\n                {description}\n              </Text>\n            </AlphaDialogPrimitiveDescription>\n          )}\n        </header>\n      </Hidden>\n    )\n  }\n)\n\n/**\n * `ModalBody` is a simple wrapper of the main modal content.\n */\nexport const ModalBody = forwardRef(function ModalBody(\n  { children, className, ...rest }: ModalBodyProps,\n  forwardedRef: React.Ref<HTMLDivElement>\n) {\n  return (\n    <div\n      ref={forwardedRef}\n      className={classNames(styles.ModalBody, className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n})\n\n/**\n * `ModalFooter` is a simple wrapper of the footer of the modal content.\n * Usually, it contains the action buttons of the modal.\n */\nexport const ModalFooter = forwardRef<HTMLElement, ModalFooterProps>(\n  function ModalFooter(\n    { className, leftContent, rightContent, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <footer\n        ref={forwardedRef}\n        className={classNames(styles.ModalFooter, className)}\n        {...rest}\n      >\n        {leftContent && (\n          <div className={styles.FooterLeftContent}>{leftContent}</div>\n        )}\n\n        {rightContent && (\n          <div className={styles.FooterRightContent}>{rightContent}</div>\n        )}\n      </footer>\n    )\n  }\n)\n\n/**\n * `ModalTrigger` is a button that opens the modal. **It doesn't render any DOM node.**\n * It passes the handler that opens the modal and accessibility properties to the children.\n *\n * It **must** be placed outside of the `ModalContent`.\n */\nexport function ModalTrigger({ children }: ModalTriggerProps) {\n  return (\n    <AlphaDialogPrimitiveTrigger asChild>\n      {children}\n    </AlphaDialogPrimitiveTrigger>\n  )\n}\n\n/**\n * `ModalClose` is a button that closes the modal. **It doesn't render any DOM node.**\n * It passes the handler that closes the modal to the children.\n */\nexport function ModalClose({ children }: ModalCloseProps) {\n  return (\n    <AlphaDialogPrimitiveClose asChild>{children}</AlphaDialogPrimitiveClose>\n  )\n}\n"],"names":["ModalContainerContextProvider","useModalContainerContext","createContext","undefined","ModalContentPropsContextProvider","useModalContentPropsContext","showCloseIcon","Modal","children","show","defaultShow","onShow","onHide","onOpenChange","useCallback","open","callback","React","createElement","AlphaDialogPrimitive","defaultOpen","ModalContent","forwardRef","style","className","container","givenContainer","preventHideOnOutsideClick","width","height","zIndex","collisionPadding","top","bottom","rest","forwardedRef","rootElement","useRootElement","contentContainer","setContentContainer","useState","contentRef","useMergeRefs","node","overlayStyle","padding","isNumber","right","left","propsContextValue","useMemo","AlphaDialogPrimitivePortal","ThemeProvider","themeName","useThemeName","AlphaDialogPrimitiveOverlay","classNames","styles","ModalOverlay","getZIndexClassName","AlphaDialogPrimitiveContent","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","Object","assign","ref","cssDimension","ModalSection","value","ModalClose","Button","CloseIconButton","size","leftContent","CancelIcon","colorVariant","styleVariant","getTitleTypo","l","m","ModalHeaderTitle","subtitle","Title","Text","as","typo","bold","color","AlphaDialogPrimitiveTitle","isNil","HeadingGroup","role","ModalHeader","title","description","titleSize","hidden","hasTitleArea","Hidden","VisuallyHidden","Fragment","TitleContainer","CloseIconButtonSpacer","AlphaDialogPrimitiveDescription","ModalBody","ModalFooter","rightContent","FooterLeftContent","FooterRightContent","ModalTrigger","AlphaDialogPrimitiveTrigger","AlphaDialogPrimitiveClose"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport * as React from 'react'\n\nimport { CancelIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { getZIndexClassName } from '~/src/types/props-helpers'\nimport { createContext } from '~/src/utils/react'\nimport { cssDimension } from '~/src/utils/style'\nimport { isNil, isNumber } from '~/src/utils/type'\n\nimport {\n  AlphaDialogPrimitive,\n  AlphaDialogPrimitiveClose,\n  AlphaDialogPrimitiveContent,\n  AlphaDialogPrimitiveDescription,\n  AlphaDialogPrimitiveOverlay,\n  AlphaDialogPrimitivePortal,\n  type AlphaDialogPrimitiveProps,\n  AlphaDialogPrimitiveTitle,\n  AlphaDialogPrimitiveTrigger,\n} from '~/src/components/AlphaDialogPrimitive'\nimport { Button } from '~/src/components/Button'\nimport { Text } from '~/src/components/Text'\nimport { ThemeProvider, useThemeName } from '~/src/components/ThemeProvider'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\nimport { useRootElement } from '~/src/components/WindowProvider'\n\nimport {\n  type ModalBodyProps,\n  type ModalCloseProps,\n  type ModalContentProps,\n  type ModalContentPropsContextValue,\n  type ModalFooterProps,\n  type ModalHeaderProps,\n  type ModalProps,\n  type ModalTitleSize,\n  type ModalTriggerProps,\n} from './Modal.types'\n\nimport styles from './Modal.module.scss'\n\nconst [ModalContainerContextProvider, useModalContainerContext] = createContext<\n  HTMLElement | undefined\n>(undefined)\n\nexport { useModalContainerContext }\n\nconst [ModalContentPropsContextProvider, useModalContentPropsContext] =\n  createContext<ModalContentPropsContextValue>({\n    showCloseIcon: false,\n  })\n\n/**\n * `Modal` is a dialog that appears on top of the page.\n *\n * `Modal` is a context of the Modal-related components. It doesn't render any DOM node.\n * It controls the visibility of the entire component and provides\n * handlers and accessibility properties to Modal-related components.\n * @example\n *\n * ```tsx\n * // Anatomy of the Modal\n * <Modal>\n *  <ModalTrigger />\n *  <ModalContent>\n *    <ModalHeader />\n *    <ModalBody />\n *    <ModalFooter />\n *  </ModalContent>\n * </Modal>\n * ```\n */\nexport function Modal({\n  children,\n  show,\n  defaultShow,\n  onShow,\n  onHide,\n}: ModalProps) {\n  const onOpenChange = useCallback<\n    NonNullable<AlphaDialogPrimitiveProps['onOpenChange']>\n  >(\n    (open) => {\n      const callback = open ? onShow : onHide\n      callback?.()\n    },\n    [onShow, onHide]\n  )\n\n  return (\n    <AlphaDialogPrimitive\n      open={show}\n      defaultOpen={defaultShow}\n      onOpenChange={onOpenChange}\n    >\n      {children}\n    </AlphaDialogPrimitive>\n  )\n}\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<HTMLDivElement, ModalContentProps>(\n  function ModalContent(\n    {\n      children,\n      style,\n      className,\n      container: givenContainer,\n      showCloseIcon = false,\n      preventHideOnOutsideClick = false,\n      width = 'max-content',\n      height = 'fit-content',\n      zIndex = 'modal',\n      collisionPadding = { top: 40, bottom: 40 },\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const rootElement = useRootElement()\n    const container = givenContainer ?? rootElement\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 = (() => {\n      const padding = (() => {\n        if (isNumber(collisionPadding)) {\n          return `${collisionPadding}px`\n        }\n\n        const { top, right, bottom, left } = {\n          top: 0,\n          right: 0,\n          bottom: 0,\n          left: 0,\n          ...collisionPadding,\n        }\n\n        return `${top}px ${right}px ${bottom}px ${left}px`\n      })()\n\n      return {\n        '--b-modal-collision-padding': padding,\n      } as React.CSSProperties\n    })()\n\n    const propsContextValue = useMemo(\n      (): ModalContentPropsContextValue => ({\n        showCloseIcon,\n      }),\n      [showCloseIcon]\n    )\n\n    return (\n      <AlphaDialogPrimitivePortal container={container}>\n        <ThemeProvider themeName={useThemeName()}>\n          <AlphaDialogPrimitiveOverlay\n            style={overlayStyle}\n            className={classNames(\n              styles.ModalOverlay,\n              getZIndexClassName(zIndex)\n            )}\n          >\n            <AlphaDialogPrimitiveContent\n              asChild\n              onPointerDownOutside={(e) => {\n                if (preventHideOnOutsideClick) {\n                  e.preventDefault()\n                }\n              }}\n              onInteractOutside={(e) => {\n                if (preventHideOnOutsideClick) {\n                  e.preventDefault()\n                }\n              }}\n            >\n              <div\n                aria-modal=\"true\"\n                ref={contentRef}\n                style={\n                  {\n                    '--b-modal-width': cssDimension(width),\n                    '--b-modal-height': cssDimension(height),\n                    ...style,\n                  } as React.CSSProperties\n                }\n                className={classNames(styles.ModalContent, className)}\n                {...rest}\n              >\n                <section className={styles.ModalSection}>\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                    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n                    <ModalClose>\n                      <Button\n                        className={styles.CloseIconButton}\n                        size=\"m\"\n                        leftContent={CancelIcon}\n                        colorVariant=\"monochrome-dark\"\n                        styleVariant=\"tertiary\"\n                      />\n                    </ModalClose>\n                  )}\n                </section>\n              </div>\n            </AlphaDialogPrimitiveContent>\n          </AlphaDialogPrimitiveOverlay>\n        </ThemeProvider>\n      </AlphaDialogPrimitivePortal>\n    )\n  }\n)\n\nfunction getTitleTypo(size: ModalTitleSize) {\n  return (\n    {\n      l: '24',\n      m: '16',\n    } as const\n  )[size]\n}\n\nfunction ModalHeaderTitle({\n  children,\n  size,\n  subtitle,\n}: React.PropsWithChildren<\n  Pick<ModalHeaderProps, 'subtitle'> & {\n    size: NonNullable<ModalHeaderProps['titleSize']>\n  }\n>) {\n  const Title = (\n    <Text\n      className={styles.Title}\n      as=\"h2\"\n      typo={getTitleTypo(size)}\n      bold\n      color=\"txt-black-darkest\"\n    >\n      {children}\n    </Text>\n  )\n\n  return (\n    <AlphaDialogPrimitiveTitle asChild>\n      {!isNil(subtitle) ? (\n        <hgroup\n          className={styles.HeadingGroup}\n          role=\"group\"\n          aria-roledescription=\"Heading group\"\n        >\n          {Title}\n\n          <Text\n            aria-roledescription=\"subtitle\"\n            as=\"p\"\n            bold\n            color=\"txt-black-dark\"\n            typo=\"13\"\n          >\n            {subtitle}\n          </Text>\n        </hgroup>\n      ) : (\n        Title\n      )}\n    </AlphaDialogPrimitiveTitle>\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<HTMLElement, ModalHeaderProps>(\n  function ModalHeader(\n    {\n      className,\n      title,\n      subtitle,\n      description,\n      titleSize = 'l',\n      hidden = false,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const { showCloseIcon } = useModalContentPropsContext()\n    const hasTitleArea = title || showCloseIcon\n    const Hidden = hidden ? VisuallyHidden : React.Fragment\n\n    return (\n      <Hidden>\n        <header\n          ref={forwardedRef}\n          className={classNames(\n            styles.ModalHeader,\n            hidden && styles.hidden,\n            className\n          )}\n          {...rest}\n        >\n          {hasTitleArea && (\n            <div className={styles.TitleContainer}>\n              {title && (\n                <ModalHeaderTitle\n                  size={titleSize}\n                  subtitle={subtitle}\n                >\n                  {title}\n                </ModalHeaderTitle>\n              )}\n\n              {showCloseIcon && (\n                <Button\n                  className={styles.CloseIconButtonSpacer}\n                  as=\"div\"\n                  size=\"m\"\n                />\n              )}\n            </div>\n          )}\n\n          {description && (\n            <AlphaDialogPrimitiveDescription asChild>\n              <Text\n                as=\"p\"\n                color=\"txt-black-darkest\"\n                typo=\"15\"\n              >\n                {description}\n              </Text>\n            </AlphaDialogPrimitiveDescription>\n          )}\n        </header>\n      </Hidden>\n    )\n  }\n)\n\n/**\n * `ModalBody` is a simple wrapper of the main modal content.\n */\nexport const ModalBody = forwardRef(function ModalBody(\n  { children, className, ...rest }: ModalBodyProps,\n  forwardedRef: React.Ref<HTMLDivElement>\n) {\n  return (\n    <div\n      ref={forwardedRef}\n      className={classNames(styles.ModalBody, className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n})\n\n/**\n * `ModalFooter` is a simple wrapper of the footer of the modal content.\n * Usually, it contains the action buttons of the modal.\n */\nexport const ModalFooter = forwardRef<HTMLElement, ModalFooterProps>(\n  function ModalFooter(\n    { className, leftContent, rightContent, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <footer\n        ref={forwardedRef}\n        className={classNames(styles.ModalFooter, className)}\n        {...rest}\n      >\n        {leftContent && (\n          <div className={styles.FooterLeftContent}>{leftContent}</div>\n        )}\n\n        {rightContent && (\n          <div className={styles.FooterRightContent}>{rightContent}</div>\n        )}\n      </footer>\n    )\n  }\n)\n\n/**\n * `ModalTrigger` is a button that opens the modal. **It doesn't render any DOM node.**\n * It passes the handler that opens the modal and accessibility properties to the children.\n *\n * It **must** be placed outside of the `ModalContent`.\n */\nexport function ModalTrigger({ children }: ModalTriggerProps) {\n  return (\n    <AlphaDialogPrimitiveTrigger asChild>\n      {children}\n    </AlphaDialogPrimitiveTrigger>\n  )\n}\n\n/**\n * `ModalClose` is a button that closes the modal. **It doesn't render any DOM node.**\n * It passes the handler that closes the modal to the children.\n */\nexport function ModalClose({ children }: ModalCloseProps) {\n  return (\n    <AlphaDialogPrimitiveClose asChild>{children}</AlphaDialogPrimitiveClose>\n  )\n}\n"],"names":["ModalContainerContextProvider","useModalContainerContext","createContext","undefined","ModalContentPropsContextProvider","useModalContentPropsContext","showCloseIcon","Modal","children","show","defaultShow","onShow","onHide","onOpenChange","useCallback","open","callback","_jsx","AlphaDialogPrimitive","defaultOpen","ModalContent","forwardRef","style","className","container","givenContainer","preventHideOnOutsideClick","width","height","zIndex","collisionPadding","top","bottom","rest","forwardedRef","rootElement","useRootElement","contentContainer","setContentContainer","useState","contentRef","useMergeRefs","node","overlayStyle","padding","isNumber","right","left","propsContextValue","useMemo","AlphaDialogPrimitivePortal","ThemeProvider","themeName","useThemeName","AlphaDialogPrimitiveOverlay","classNames","styles","ModalOverlay","getZIndexClassName","AlphaDialogPrimitiveContent","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","ref","cssDimension","_jsxs","ModalSection","value","ModalClose","Button","CloseIconButton","size","leftContent","CancelIcon","colorVariant","styleVariant","getTitleTypo","l","m","ModalHeaderTitle","subtitle","Title","Text","as","typo","bold","color","AlphaDialogPrimitiveTitle","isNil","HeadingGroup","role","ModalHeader","title","description","titleSize","hidden","hasTitleArea","Hidden","VisuallyHidden","React","Fragment","TitleContainer","CloseIconButtonSpacer","AlphaDialogPrimitiveDescription","ModalBody","ModalFooter","rightContent","FooterLeftContent","FooterRightContent","ModalTrigger","AlphaDialogPrimitiveTrigger","AlphaDialogPrimitiveClose"],"mappings":"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"}

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

@@ -2,10 +2,11 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var type = require('../../utils/type.js');
 var NavItem_module = require('../NavItem/NavItem.module.scss.js');
 var NavGroup_module = require('./NavGroup.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var BaseButton = require('../BaseButton/BaseButton.js');
 var Icon = require('../Icon/Icon.js');
 var Text = require('../Text/Text.js');
@@ -30,41 +31,49 @@ const NavGroup = /*#__PURE__*/React.forwardRef(function NavGroup({
   const hasChildren = !type.isNil(children);
   const chevronIconSource = open ? bezierIcons.ChevronSmallDownIcon : bezierIcons.ChevronSmallRightIcon;
   const ariaName = `${name}Menu`;
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/jsxRuntime.jsxs("li", {
     className: NavItem_module.default.Wrapper,
-    role: "none"
-  }, /*#__PURE__*/React.createElement(BaseButton.BaseButton, Object.assign({
-    ref: forwardedRef,
-    className: index.default(NavItem_module.default.Item, active && NavItem_module.default.active, className),
-    role: "menuitem",
-    "aria-haspopup": hasChildren,
-    "aria-expanded": open,
-    "aria-controls": ariaName,
-    onClick: handleClickItem,
-    "data-testid": NAV_GROUP_TEST_ID
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: NavItem_module.default.LeftIconWrapper
-  }, /*#__PURE__*/React.createElement(Icon.Icon, {
-    source: leftContent,
-    size: "s",
-    color: active ? 'bgtxt-blue-normal' : 'txt-black-dark',
-    "data-testid": NAV_GROUP_LEFT_ICON_TEST_ID
-  })), /*#__PURE__*/React.createElement(Text.Text, {
-    typo: "14",
-    truncated: true
-  }, content), hasChildren && /*#__PURE__*/React.createElement("div", {
-    className: NavGroup_module.default.ChevronWrapper
-  }, /*#__PURE__*/React.createElement(Icon.Icon, {
-    source: chevronIconSource,
-    size: "s",
-    color: "txt-black-dark"
-  })), rightContent && /*#__PURE__*/React.createElement("div", {
-    className: NavItem_module.default.RightContentWrapper
-  }, rightContent)), open && /*#__PURE__*/React.createElement("ul", {
-    className: NavGroup_module.default.ChildrenWrapper,
-    role: "menu",
-    id: ariaName
-  }, open && children));
+    role: "none",
+    children: [/*#__PURE__*/jsxRuntime.jsxs(BaseButton.BaseButton, {
+      ref: forwardedRef,
+      className: index.default(NavItem_module.default.Item, active && NavItem_module.default.active, className),
+      role: "menuitem",
+      "aria-haspopup": hasChildren,
+      "aria-expanded": open,
+      "aria-controls": ariaName,
+      onClick: handleClickItem,
+      "data-testid": NAV_GROUP_TEST_ID,
+      ...rest,
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: NavItem_module.default.LeftIconWrapper,
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          source: leftContent,
+          size: "s",
+          color: active ? 'bgtxt-blue-normal' : 'txt-black-dark',
+          "data-testid": NAV_GROUP_LEFT_ICON_TEST_ID
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+        typo: "14",
+        truncated: true,
+        children: content
+      }), hasChildren && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: NavGroup_module.default.ChevronWrapper,
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          source: chevronIconSource,
+          size: "s",
+          color: "txt-black-dark"
+        })
+      }), rightContent && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: NavItem_module.default.RightContentWrapper,
+        children: rightContent
+      })]
+    }), open && /*#__PURE__*/jsxRuntime.jsx("ul", {
+      className: NavGroup_module.default.ChildrenWrapper,
+      role: "menu",
+      id: ariaName,
+      children: open && children
+    })]
+  });
 });
 
 exports.NAV_GROUP_LEFT_ICON_TEST_ID = NAV_GROUP_LEFT_ICON_TEST_ID;

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

@@ -1 +1 @@
-{"version":3,"file":"NavGroup.js","sources":["../../../../src/components/NavGroup/NavGroup.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport {\n  ChevronSmallDownIcon,\n  ChevronSmallRightIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\n// eslint-disable-next-line no-restricted-imports\nimport commonStyles from '../NavItem/NavItem.module.scss'\n\nimport type { NavGroupProps } from './NavGroup.types'\n\nimport styles from './NavGroup.module.scss'\n\nexport const NAV_GROUP_TEST_ID = 'bezier-nav-group'\nexport const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-nav-group-left-icon'\n\nexport const NavGroup = forwardRef<HTMLButtonElement, NavGroupProps>(\n  function NavGroup(\n    {\n      name,\n      className,\n      children,\n      content,\n      rightContent,\n      leftContent,\n      open,\n      active,\n      onClick,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const handleClickItem = (e?: React.MouseEvent) => {\n      onClick?.(e, name)\n    }\n\n    const hasChildren = !isNil(children)\n    const chevronIconSource = open\n      ? ChevronSmallDownIcon\n      : ChevronSmallRightIcon\n    const ariaName = `${name}Menu`\n\n    return (\n      <li\n        className={commonStyles.Wrapper}\n        role=\"none\"\n      >\n        <BaseButton\n          ref={forwardedRef}\n          className={classNames(\n            commonStyles.Item,\n            active && commonStyles.active,\n            className\n          )}\n          role=\"menuitem\"\n          aria-haspopup={hasChildren}\n          aria-expanded={open}\n          aria-controls={ariaName}\n          onClick={handleClickItem}\n          data-testid={NAV_GROUP_TEST_ID}\n          {...rest}\n        >\n          <div className={commonStyles.LeftIconWrapper}>\n            <Icon\n              source={leftContent}\n              size=\"s\"\n              color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\n              data-testid={NAV_GROUP_LEFT_ICON_TEST_ID}\n            />\n          </div>\n\n          <Text\n            typo=\"14\"\n            truncated\n          >\n            {content}\n          </Text>\n\n          {hasChildren && (\n            <div className={styles.ChevronWrapper}>\n              <Icon\n                source={chevronIconSource}\n                size=\"s\"\n                color=\"txt-black-dark\"\n              />\n            </div>\n          )}\n\n          {rightContent && (\n            <div className={commonStyles.RightContentWrapper}>\n              {rightContent}\n            </div>\n          )}\n        </BaseButton>\n\n        {open && (\n          <ul\n            className={styles.ChildrenWrapper}\n            role=\"menu\"\n            id={ariaName}\n          >\n            {open && children}\n          </ul>\n        )}\n      </li>\n    )\n  }\n)\n"],"names":["NAV_GROUP_TEST_ID","NAV_GROUP_LEFT_ICON_TEST_ID","NavGroup","forwardRef","name","className","children","content","rightContent","leftContent","open","active","onClick","rest","forwardedRef","handleClickItem","e","hasChildren","isNil","chevronIconSource","ChevronSmallDownIcon","ChevronSmallRightIcon","ariaName","React","createElement","commonStyles","Wrapper","role","BaseButton","Object","assign","ref","classNames","Item","LeftIconWrapper","Icon","source","size","color","Text","typo","truncated","styles","ChevronWrapper","RightContentWrapper","ChildrenWrapper","id"],"mappings":";;;;;;;;;;;;AAuBO,MAAMA,iBAAiB,GAAG;AAC1B,MAAMC,2BAA2B,GAAG;MAE9BC,QAAQ,gBAAGC,gBAAU,CAChC,SAASD,QAAQA,CACf;EACEE,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,YAAY;EACZC,WAAW;EACXC,IAAI;EACJC,MAAM;EACNC,OAAO;EACP,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,eAAe,GAAIC,CAAoB,IAAK;IAChDJ,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,IAAAA,OAAO,CAAGI,CAAC,EAAEZ,IAAI,CAAC;GACnB;AAED,EAAA,MAAMa,WAAW,GAAG,CAACC,UAAK,CAACZ,QAAQ,CAAC;AACpC,EAAA,MAAMa,iBAAiB,GAAGT,IAAI,GAC1BU,gCAAoB,GACpBC,iCAAqB;AACzB,EAAA,MAAMC,QAAQ,GAAG,CAAGlB,EAAAA,IAAI,CAAM,IAAA,CAAA;EAE9B,oBACEmB,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;IACEnB,SAAS,EAAEoB,sBAAY,CAACC,OAAQ;AAChCC,IAAAA,IAAI,EAAC;GAELJ,eAAAA,KAAA,CAAAC,aAAA,CAACI,qBAAU,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACTC,IAAAA,GAAG,EAAEjB,YAAa;AAClBT,IAAAA,SAAS,EAAE2B,aAAU,CACnBP,sBAAY,CAACQ,IAAI,EACjBtB,MAAM,IAAIc,sBAAY,CAACd,MAAM,EAC7BN,SACF,CAAE;AACFsB,IAAAA,IAAI,EAAC,UAAU;AACf,IAAA,eAAA,EAAeV,WAAY;AAC3B,IAAA,eAAA,EAAeP,IAAK;AACpB,IAAA,eAAA,EAAeY,QAAS;AACxBV,IAAAA,OAAO,EAAEG,eAAgB;IACzB,aAAaf,EAAAA;AAAkB,GAAA,EAC3Ba,IAAI,CAAA,eAERU,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKnB,SAAS,EAAEoB,sBAAY,CAACS;AAAgB,GAAA,eAC3CX,KAAA,CAAAC,aAAA,CAACW,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAE3B,WAAY;AACpB4B,IAAAA,IAAI,EAAC,GAAG;AACRC,IAAAA,KAAK,EAAE3B,MAAM,GAAG,mBAAmB,GAAG,gBAAiB;IACvD,aAAaV,EAAAA;AAA4B,GAC1C,CACE,CAAC,eAENsB,KAAA,CAAAC,aAAA,CAACe,SAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,IAAI;IACTC,SAAS,EAAA;AAAA,GAAA,EAERlC,OACG,CAAC,EAENU,WAAW,iBACVM,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKnB,SAAS,EAAEqC,uBAAM,CAACC;AAAe,GAAA,eACpCpB,KAAA,CAAAC,aAAA,CAACW,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEjB,iBAAkB;AAC1BkB,IAAAA,IAAI,EAAC,GAAG;AACRC,IAAAA,KAAK,EAAC;AAAgB,GACvB,CACE,CACN,EAEA9B,YAAY,iBACXe,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKnB,SAAS,EAAEoB,sBAAY,CAACmB;GAC1BpC,EAAAA,YACE,CAEG,CAAC,EAEZE,IAAI,iBACHa,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;IACEnB,SAAS,EAAEqC,uBAAM,CAACG,eAAgB;AAClClB,IAAAA,IAAI,EAAC,MAAM;AACXmB,IAAAA,EAAE,EAAExB;AAAS,GAAA,EAEZZ,IAAI,IAAIJ,QACP,CAEJ,CAAC;AAET,CACF;;;;;;"}
+{"version":3,"file":"NavGroup.js","sources":["../../../../src/components/NavGroup/NavGroup.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport {\n  ChevronSmallDownIcon,\n  ChevronSmallRightIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\n// eslint-disable-next-line no-restricted-imports\nimport commonStyles from '../NavItem/NavItem.module.scss'\n\nimport type { NavGroupProps } from './NavGroup.types'\n\nimport styles from './NavGroup.module.scss'\n\nexport const NAV_GROUP_TEST_ID = 'bezier-nav-group'\nexport const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-nav-group-left-icon'\n\nexport const NavGroup = forwardRef<HTMLButtonElement, NavGroupProps>(\n  function NavGroup(\n    {\n      name,\n      className,\n      children,\n      content,\n      rightContent,\n      leftContent,\n      open,\n      active,\n      onClick,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const handleClickItem = (e?: React.MouseEvent) => {\n      onClick?.(e, name)\n    }\n\n    const hasChildren = !isNil(children)\n    const chevronIconSource = open\n      ? ChevronSmallDownIcon\n      : ChevronSmallRightIcon\n    const ariaName = `${name}Menu`\n\n    return (\n      <li\n        className={commonStyles.Wrapper}\n        role=\"none\"\n      >\n        <BaseButton\n          ref={forwardedRef}\n          className={classNames(\n            commonStyles.Item,\n            active && commonStyles.active,\n            className\n          )}\n          role=\"menuitem\"\n          aria-haspopup={hasChildren}\n          aria-expanded={open}\n          aria-controls={ariaName}\n          onClick={handleClickItem}\n          data-testid={NAV_GROUP_TEST_ID}\n          {...rest}\n        >\n          <div className={commonStyles.LeftIconWrapper}>\n            <Icon\n              source={leftContent}\n              size=\"s\"\n              color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\n              data-testid={NAV_GROUP_LEFT_ICON_TEST_ID}\n            />\n          </div>\n\n          <Text\n            typo=\"14\"\n            truncated\n          >\n            {content}\n          </Text>\n\n          {hasChildren && (\n            <div className={styles.ChevronWrapper}>\n              <Icon\n                source={chevronIconSource}\n                size=\"s\"\n                color=\"txt-black-dark\"\n              />\n            </div>\n          )}\n\n          {rightContent && (\n            <div className={commonStyles.RightContentWrapper}>\n              {rightContent}\n            </div>\n          )}\n        </BaseButton>\n\n        {open && (\n          <ul\n            className={styles.ChildrenWrapper}\n            role=\"menu\"\n            id={ariaName}\n          >\n            {open && children}\n          </ul>\n        )}\n      </li>\n    )\n  }\n)\n"],"names":["NAV_GROUP_TEST_ID","NAV_GROUP_LEFT_ICON_TEST_ID","NavGroup","forwardRef","name","className","children","content","rightContent","leftContent","open","active","onClick","rest","forwardedRef","handleClickItem","e","hasChildren","isNil","chevronIconSource","ChevronSmallDownIcon","ChevronSmallRightIcon","ariaName","_jsxs","commonStyles","Wrapper","role","BaseButton","ref","classNames","Item","_jsx","LeftIconWrapper","Icon","source","size","color","Text","typo","truncated","styles","ChevronWrapper","RightContentWrapper","ChildrenWrapper","id"],"mappings":";;;;;;;;;;;;;AAuBO,MAAMA,iBAAiB,GAAG;AAC1B,MAAMC,2BAA2B,GAAG;MAE9BC,QAAQ,gBAAGC,gBAAU,CAChC,SAASD,QAAQA,CACf;EACEE,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,YAAY;EACZC,WAAW;EACXC,IAAI;EACJC,MAAM;EACNC,OAAO;EACP,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,eAAe,GAAIC,CAAoB,IAAK;IAChDJ,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,IAAAA,OAAO,CAAGI,CAAC,EAAEZ,IAAI,CAAC;GACnB;AAED,EAAA,MAAMa,WAAW,GAAG,CAACC,UAAK,CAACZ,QAAQ,CAAC;AACpC,EAAA,MAAMa,iBAAiB,GAAGT,IAAI,GAC1BU,gCAAoB,GACpBC,iCAAqB;AACzB,EAAA,MAAMC,QAAQ,GAAG,CAAGlB,EAAAA,IAAI,CAAM,IAAA,CAAA;AAE9B,EAAA,oBACEmB,eAAA,CAAA,IAAA,EAAA;IACElB,SAAS,EAAEmB,sBAAY,CAACC,OAAQ;AAChCC,IAAAA,IAAI,EAAC,MAAM;IAAApB,QAAA,EAAA,cAEXiB,eAAA,CAACI,qBAAU,EAAA;AACTC,MAAAA,GAAG,EAAEd,YAAa;AAClBT,MAAAA,SAAS,EAAEwB,aAAU,CACnBL,sBAAY,CAACM,IAAI,EACjBnB,MAAM,IAAIa,sBAAY,CAACb,MAAM,EAC7BN,SACF,CAAE;AACFqB,MAAAA,IAAI,EAAC,UAAU;AACf,MAAA,eAAA,EAAeT,WAAY;AAC3B,MAAA,eAAA,EAAeP,IAAK;AACpB,MAAA,eAAA,EAAeY,QAAS;AACxBV,MAAAA,OAAO,EAAEG,eAAgB;AACzB,MAAA,aAAA,EAAaf,iBAAkB;AAAA,MAAA,GAC3Ba,IAAI;AAAAP,MAAAA,QAAA,gBAERyB,cAAA,CAAA,KAAA,EAAA;QAAK1B,SAAS,EAAEmB,sBAAY,CAACQ,eAAgB;QAAA1B,QAAA,eAC3CyB,cAAA,CAACE,SAAI,EAAA;AACHC,UAAAA,MAAM,EAAEzB,WAAY;AACpB0B,UAAAA,IAAI,EAAC,GAAG;AACRC,UAAAA,KAAK,EAAEzB,MAAM,GAAG,mBAAmB,GAAG,gBAAiB;UACvD,aAAaV,EAAAA;SACd;AAAC,OACC,CAAC,eAEN8B,cAAA,CAACM,SAAI,EAAA;AACHC,QAAAA,IAAI,EAAC,IAAI;QACTC,SAAS,EAAA,IAAA;AAAAjC,QAAAA,QAAA,EAERC;AAAO,OACJ,CAAC,EAENU,WAAW,iBACVc,cAAA,CAAA,KAAA,EAAA;QAAK1B,SAAS,EAAEmC,uBAAM,CAACC,cAAe;QAAAnC,QAAA,eACpCyB,cAAA,CAACE,SAAI,EAAA;AACHC,UAAAA,MAAM,EAAEf,iBAAkB;AAC1BgB,UAAAA,IAAI,EAAC,GAAG;AACRC,UAAAA,KAAK,EAAC;SACP;AAAC,OACC,CACN,EAEA5B,YAAY,iBACXuB,cAAA,CAAA,KAAA,EAAA;QAAK1B,SAAS,EAAEmB,sBAAY,CAACkB,mBAAoB;AAAApC,QAAAA,QAAA,EAC9CE;AAAY,OACV,CACN;AAAA,KACS,CAAC,EAEZE,IAAI,iBACHqB,cAAA,CAAA,IAAA,EAAA;MACE1B,SAAS,EAAEmC,uBAAM,CAACG,eAAgB;AAClCjB,MAAAA,IAAI,EAAC,MAAM;AACXkB,MAAAA,EAAE,EAAEtB,QAAS;MAAAhB,QAAA,EAEZI,IAAI,IAAIJ;AAAQ,KACf,CACL;AAAA,GACC,CAAC;AAET,CACF;;;;;;"}

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

@@ -1,8 +1,9 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var NavItem_module = require('./NavItem.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../Icon/Icon.js');
 var Text = require('../Text/Text.js');
 
@@ -36,31 +37,37 @@ const NavItem = /*#__PURE__*/React.forwardRef(function NavItem({
   const handleClickItem = e => {
     onClick === null || onClick === void 0 || onClick(e, name);
   };
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/jsxRuntime.jsx("li", {
     className: NavItem_module.default.Wrapper,
-    role: "none"
-  }, /*#__PURE__*/React.createElement("a", Object.assign({
-    ref: forwardedRef,
-    style: style,
-    className: index.default(NavItem_module.default.Item, active && NavItem_module.default.active, className),
-    href: href,
-    target: target,
-    role: "menuitem",
-    onClick: handleClickItem,
-    "data-testid": NAV_ITEM_TEST_ID
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: NavItem_module.default.LeftIconWrapper
-  }, leftContent && /*#__PURE__*/React.createElement(Icon.Icon, {
-    "data-testid": NAV_ITEM_LEFT_ICON_TEST_ID,
-    source: leftContent,
-    size: "s",
-    color: active ? 'bgtxt-blue-normal' : 'txt-black-dark'
-  })), /*#__PURE__*/React.createElement(Text.Text, {
-    typo: "14",
-    truncated: true
-  }, content), rightContent && /*#__PURE__*/React.createElement("div", {
-    className: NavItem_module.default.RightContentWrapper
-  }, rightContent)));
+    role: "none",
+    children: /*#__PURE__*/jsxRuntime.jsxs("a", {
+      ref: forwardedRef,
+      style: style,
+      className: index.default(NavItem_module.default.Item, active && NavItem_module.default.active, className),
+      href: href,
+      target: target,
+      role: "menuitem",
+      onClick: handleClickItem,
+      "data-testid": NAV_ITEM_TEST_ID,
+      ...rest,
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: NavItem_module.default.LeftIconWrapper,
+        children: leftContent && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          "data-testid": NAV_ITEM_LEFT_ICON_TEST_ID,
+          source: leftContent,
+          size: "s",
+          color: active ? 'bgtxt-blue-normal' : 'txt-black-dark'
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+        typo: "14",
+        truncated: true,
+        children: content
+      }), rightContent && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: NavItem_module.default.RightContentWrapper,
+        children: rightContent
+      })]
+    })
+  });
 });
 
 exports.NAV_ITEM_LEFT_ICON_TEST_ID = NAV_ITEM_LEFT_ICON_TEST_ID;

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

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../../../../src/components/NavItem/NavItem.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport type { NavItemProps } from './NavItem.types'\n\nimport styles from './NavItem.module.scss'\n\nexport const NAV_ITEM_TEST_ID = 'bezier-nav-item'\nexport const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-nav-item-left-icon'\n\n/**\n * `NavItem` is a component for an item where you can navigate to another link.\n * @example\n * ```tsx\n * <NavItem\n *   name=\"channel\"\n *   content=\"https://channel.io\"\n *   href=\"_parent\"\n * />\n * ```\n */\nexport const NavItem = forwardRef<HTMLAnchorElement, NavItemProps>(\n  function NavItem(\n    {\n      name,\n      style,\n      className,\n      content,\n      href,\n      target = '_self',\n      rightContent,\n      leftContent,\n      active,\n      onClick,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const handleClickItem = (e?: React.MouseEvent) => {\n      onClick?.(e, name)\n    }\n\n    return (\n      <li\n        className={styles.Wrapper}\n        role=\"none\"\n      >\n        <a\n          ref={forwardedRef}\n          style={style}\n          className={classNames(\n            styles.Item,\n            active && styles.active,\n            className\n          )}\n          href={href}\n          target={target}\n          role=\"menuitem\"\n          onClick={handleClickItem}\n          data-testid={NAV_ITEM_TEST_ID}\n          {...rest}\n        >\n          <div className={styles.LeftIconWrapper}>\n            {leftContent && (\n              <Icon\n                data-testid={NAV_ITEM_LEFT_ICON_TEST_ID}\n                source={leftContent}\n                size=\"s\"\n                color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\n              />\n            )}\n          </div>\n\n          <Text\n            typo=\"14\"\n            truncated\n          >\n            {content}\n          </Text>\n\n          {rightContent && (\n            <div className={styles.RightContentWrapper}>{rightContent}</div>\n          )}\n        </a>\n      </li>\n    )\n  }\n)\n"],"names":["NAV_ITEM_TEST_ID","NAV_ITEM_LEFT_ICON_TEST_ID","NavItem","forwardRef","name","style","className","content","href","target","rightContent","leftContent","active","onClick","rest","forwardedRef","handleClickItem","e","React","createElement","styles","Wrapper","role","Object","assign","ref","classNames","Item","LeftIconWrapper","Icon","source","size","color","Text","typo","truncated","RightContentWrapper"],"mappings":";;;;;;;;AAaO,MAAMA,gBAAgB,GAAG;AACzB,MAAMC,0BAA0B,GAAG;;AAE1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,OAAO,gBAAGC,gBAAU,CAC/B,SAASD,OAAOA,CACd;EACEE,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,IAAI;AACJC,EAAAA,MAAM,GAAG,OAAO;EAChBC,YAAY;EACZC,WAAW;EACXC,MAAM;EACNC,OAAO;EACP,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,eAAe,GAAIC,CAAoB,IAAK;IAChDJ,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,IAAAA,OAAO,CAAGI,CAAC,EAAEb,IAAI,CAAC;GACnB;EAED,oBACEc,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;IACEb,SAAS,EAAEc,sBAAM,CAACC,OAAQ;AAC1BC,IAAAA,IAAI,EAAC;AAAM,GAAA,eAEXJ,KAAA,CAAAC,aAAA,CAAAI,GAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEV,YAAa;AAClBV,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEoB,aAAU,CACnBN,sBAAM,CAACO,IAAI,EACXf,MAAM,IAAIQ,sBAAM,CAACR,MAAM,EACvBN,SACF,CAAE;AACFE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfa,IAAAA,IAAI,EAAC,UAAU;AACfT,IAAAA,OAAO,EAAEG,eAAgB;IACzB,aAAahB,EAAAA;AAAiB,GAAA,EAC1Bc,IAAI,CAAA,eAERI,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKb,SAAS,EAAEc,sBAAM,CAACQ;AAAgB,GAAA,EACpCjB,WAAW,iBACVO,KAAA,CAAAC,aAAA,CAACU,SAAI,EAAA;AACH,IAAA,aAAA,EAAa5B,0BAA2B;AACxC6B,IAAAA,MAAM,EAAEnB,WAAY;AACpBoB,IAAAA,IAAI,EAAC,GAAG;AACRC,IAAAA,KAAK,EAAEpB,MAAM,GAAG,mBAAmB,GAAG;AAAiB,GACxD,CAEA,CAAC,eAENM,KAAA,CAAAC,aAAA,CAACc,SAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,IAAI;IACTC,SAAS,EAAA;AAAA,GAAA,EAER5B,OACG,CAAC,EAENG,YAAY,iBACXQ,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKb,SAAS,EAAEc,sBAAM,CAACgB;GAAsB1B,EAAAA,YAAkB,CAEhE,CACD,CAAC;AAET,CACF;;;;;;"}
+{"version":3,"file":"NavItem.js","sources":["../../../../src/components/NavItem/NavItem.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport type { NavItemProps } from './NavItem.types'\n\nimport styles from './NavItem.module.scss'\n\nexport const NAV_ITEM_TEST_ID = 'bezier-nav-item'\nexport const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-nav-item-left-icon'\n\n/**\n * `NavItem` is a component for an item where you can navigate to another link.\n * @example\n * ```tsx\n * <NavItem\n *   name=\"channel\"\n *   content=\"https://channel.io\"\n *   href=\"_parent\"\n * />\n * ```\n */\nexport const NavItem = forwardRef<HTMLAnchorElement, NavItemProps>(\n  function NavItem(\n    {\n      name,\n      style,\n      className,\n      content,\n      href,\n      target = '_self',\n      rightContent,\n      leftContent,\n      active,\n      onClick,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const handleClickItem = (e?: React.MouseEvent) => {\n      onClick?.(e, name)\n    }\n\n    return (\n      <li\n        className={styles.Wrapper}\n        role=\"none\"\n      >\n        <a\n          ref={forwardedRef}\n          style={style}\n          className={classNames(\n            styles.Item,\n            active && styles.active,\n            className\n          )}\n          href={href}\n          target={target}\n          role=\"menuitem\"\n          onClick={handleClickItem}\n          data-testid={NAV_ITEM_TEST_ID}\n          {...rest}\n        >\n          <div className={styles.LeftIconWrapper}>\n            {leftContent && (\n              <Icon\n                data-testid={NAV_ITEM_LEFT_ICON_TEST_ID}\n                source={leftContent}\n                size=\"s\"\n                color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\n              />\n            )}\n          </div>\n\n          <Text\n            typo=\"14\"\n            truncated\n          >\n            {content}\n          </Text>\n\n          {rightContent && (\n            <div className={styles.RightContentWrapper}>{rightContent}</div>\n          )}\n        </a>\n      </li>\n    )\n  }\n)\n"],"names":["NAV_ITEM_TEST_ID","NAV_ITEM_LEFT_ICON_TEST_ID","NavItem","forwardRef","name","style","className","content","href","target","rightContent","leftContent","active","onClick","rest","forwardedRef","handleClickItem","e","_jsx","styles","Wrapper","role","children","_jsxs","ref","classNames","Item","LeftIconWrapper","Icon","source","size","color","Text","typo","truncated","RightContentWrapper"],"mappings":";;;;;;;;;AAaO,MAAMA,gBAAgB,GAAG;AACzB,MAAMC,0BAA0B,GAAG;;AAE1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,OAAO,gBAAGC,gBAAU,CAC/B,SAASD,OAAOA,CACd;EACEE,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,IAAI;AACJC,EAAAA,MAAM,GAAG,OAAO;EAChBC,YAAY;EACZC,WAAW;EACXC,MAAM;EACNC,OAAO;EACP,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,eAAe,GAAIC,CAAoB,IAAK;IAChDJ,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,IAAAA,OAAO,CAAGI,CAAC,EAAEb,IAAI,CAAC;GACnB;AAED,EAAA,oBACEc,cAAA,CAAA,IAAA,EAAA;IACEZ,SAAS,EAAEa,sBAAM,CAACC,OAAQ;AAC1BC,IAAAA,IAAI,EAAC,MAAM;AAAAC,IAAAA,QAAA,eAEXC,eAAA,CAAA,GAAA,EAAA;AACEC,MAAAA,GAAG,EAAET,YAAa;AAClBV,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,SAAS,EAAEmB,aAAU,CACnBN,sBAAM,CAACO,IAAI,EACXd,MAAM,IAAIO,sBAAM,CAACP,MAAM,EACvBN,SACF,CAAE;AACFE,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,MAAM,EAAEA,MAAO;AACfY,MAAAA,IAAI,EAAC,UAAU;AACfR,MAAAA,OAAO,EAAEG,eAAgB;AACzB,MAAA,aAAA,EAAahB,gBAAiB;AAAA,MAAA,GAC1Bc,IAAI;AAAAQ,MAAAA,QAAA,gBAERJ,cAAA,CAAA,KAAA,EAAA;QAAKZ,SAAS,EAAEa,sBAAM,CAACQ,eAAgB;AAAAL,QAAAA,QAAA,EACpCX,WAAW,iBACVO,cAAA,CAACU,SAAI,EAAA;AACH,UAAA,aAAA,EAAa3B,0BAA2B;AACxC4B,UAAAA,MAAM,EAAElB,WAAY;AACpBmB,UAAAA,IAAI,EAAC,GAAG;AACRC,UAAAA,KAAK,EAAEnB,MAAM,GAAG,mBAAmB,GAAG;SACvC;AACF,OACE,CAAC,eAENM,cAAA,CAACc,SAAI,EAAA;AACHC,QAAAA,IAAI,EAAC,IAAI;QACTC,SAAS,EAAA,IAAA;AAAAZ,QAAAA,QAAA,EAERf;AAAO,OACJ,CAAC,EAENG,YAAY,iBACXQ,cAAA,CAAA,KAAA,EAAA;QAAKZ,SAAS,EAAEa,sBAAM,CAACgB,mBAAoB;AAAAb,QAAAA,QAAA,EAAEZ;AAAY,OAAM,CAChE;KACA;AAAC,GACF,CAAC;AAET,CACF;;;;;;"}

package/dist/cjs/components/OutlineItem/OutlineItem.js

@@ -2,10 +2,11 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var react = require('../../utils/react.js');
 var type = require('../../utils/type.js');
 var OutlineItem_module = require('./OutlineItem.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../Icon/Icon.js');
 var Text = require('../Text/Text.js');
 
@@ -35,42 +36,51 @@ const OutlineItem = /*#__PURE__*/React.forwardRef(function OutlineItem({
   const isLink = !type.isEmpty(href);
   const Comp = isLink ? 'a' : as !== null && as !== void 0 ? as : 'div';
   const clickable = isLink || clickableProp || !type.isNil(onClick);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Comp, Object.assign({}, isLink && {
-    href,
-    target: '_blank',
-    rel: 'noopener noreferrer'
-  }, {
-    style: {
-      ...style,
-      '--b-outline-item-indent': `${indent}px`
-    },
-    className: index.default(OutlineItem_module.default.OutlineItem, active && OutlineItem_module.default.active, focused && OutlineItem_module.default.focused, clickable && OutlineItem_module.default.clickable, className),
-    ref: forwardedRef,
-    "data-testid": OUTLINE_ITEM_TEST_ID,
-    onClick: onClick
-  }, rest), !disableChevron && /*#__PURE__*/React.createElement("div", {
-    className: OutlineItem_module.default.Chevron
-  }, !type.isNil(children) && /*#__PURE__*/React.createElement(Icon.Icon, {
-    className: OutlineItem_module.default.Icon,
-    source: open ? bezierIcons.ChevronSmallDownIcon : bezierIcons.ChevronSmallRightIcon,
-    size: "s",
-    color: "txt-black-dark"
-  })), leftContent && /*#__PURE__*/React.createElement("div", {
-    className: OutlineItem_module.default.LeftContent
-  }, bezierIcons.isBezierIcon(leftContent) ? /*#__PURE__*/React.createElement(Icon.Icon, {
-    className: OutlineItem_module.default.Icon,
-    size: "s",
-    source: leftContent,
-    color: "txt-black-dark"
-  }) : leftContent), /*#__PURE__*/React.createElement(Text.Text, {
-    className: OutlineItem_module.default.Content,
-    typo: "14",
-    truncated: true
-  }, content), rightContent), /*#__PURE__*/React.createElement(OutlineItemContextProvider, {
-    value: React.useMemo(() => ({
-      indent
-    }), [indent])
-  }, open && children));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Comp, {
+      ...(isLink && {
+        href,
+        target: '_blank',
+        rel: 'noopener noreferrer'
+      }),
+      style: {
+        ...style,
+        '--b-outline-item-indent': `${indent}px`
+      },
+      className: index.default(OutlineItem_module.default.OutlineItem, active && OutlineItem_module.default.active, focused && OutlineItem_module.default.focused, clickable && OutlineItem_module.default.clickable, className),
+      ref: forwardedRef,
+      "data-testid": OUTLINE_ITEM_TEST_ID,
+      onClick: onClick,
+      ...rest,
+      children: [!disableChevron && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: OutlineItem_module.default.Chevron,
+        children: !type.isNil(children) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          className: OutlineItem_module.default.Icon,
+          source: open ? bezierIcons.ChevronSmallDownIcon : bezierIcons.ChevronSmallRightIcon,
+          size: "s",
+          color: "txt-black-dark"
+        })
+      }), leftContent && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: OutlineItem_module.default.LeftContent,
+        children: bezierIcons.isBezierIcon(leftContent) ? /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          className: OutlineItem_module.default.Icon,
+          size: "s",
+          source: leftContent,
+          color: "txt-black-dark"
+        }) : leftContent
+      }), /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+        className: OutlineItem_module.default.Content,
+        typo: "14",
+        truncated: true,
+        children: content
+      }), rightContent]
+    }), /*#__PURE__*/jsxRuntime.jsx(OutlineItemContextProvider, {
+      value: React.useMemo(() => ({
+        indent
+      }), [indent]),
+      children: open && children
+    })]
+  });
 });
 
 exports.OUTLINE_ITEM_TEST_ID = OUTLINE_ITEM_TEST_ID;

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

@@ -1 +1 @@
-{"version":3,"file":"OutlineItem.js","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, useMemo } from 'react'\n\nimport {\n  ChevronSmallDownIcon,\n  ChevronSmallRightIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isEmpty, isNil } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  type OutlineItemContextProps,\n  type OutlineItemProps,\n} from './OutlineItem.types'\n\nimport styles from './OutlineItem.module.scss'\n\nconst [OutlineItemContextProvider, useOutlineItemContext] = createContext<\n  OutlineItemContextProps | undefined\n>(undefined)\n\nconst DEFAULT_INDENT = 16\n\nexport const OUTLINE_ITEM_TEST_ID = 'bezier-outline-item'\n\nexport const OutlineItem = forwardRef<\n  HTMLDivElement & HTMLAnchorElement,\n  OutlineItemProps\n>(function OutlineItem(\n  {\n    children,\n    style,\n    className,\n    as,\n    open = false,\n    disableChevron = false,\n    active = false,\n    focused = false,\n    clickable: clickableProp = false,\n    leftContent,\n    content,\n    rightContent,\n    href,\n    onClick,\n    ...rest\n  },\n  forwardedRef\n) {\n  const context = useOutlineItemContext()\n  const isRoot = isNil(context)\n  const indent = isRoot ? 0 : context.indent + DEFAULT_INDENT\n\n  const isLink = !isEmpty(href)\n  const Comp = isLink ? 'a' : ((as ?? 'div') as 'div')\n  const clickable = isLink || clickableProp || !isNil(onClick)\n\n  return (\n    <>\n      <Comp\n        {...(isLink && {\n          href,\n          target: '_blank',\n          rel: 'noopener noreferrer',\n        })}\n        style={\n          {\n            ...style,\n            '--b-outline-item-indent': `${indent}px`,\n          } as React.CSSProperties\n        }\n        className={classNames(\n          styles.OutlineItem,\n          active && styles.active,\n          focused && styles.focused,\n          clickable && styles.clickable,\n          className\n        )}\n        ref={forwardedRef}\n        data-testid={OUTLINE_ITEM_TEST_ID}\n        onClick={onClick}\n        {...rest}\n      >\n        {!disableChevron && (\n          <div className={styles.Chevron}>\n            {!isNil(children) && (\n              <Icon\n                className={styles.Icon}\n                source={open ? ChevronSmallDownIcon : ChevronSmallRightIcon}\n                size=\"s\"\n                color=\"txt-black-dark\"\n              />\n            )}\n          </div>\n        )}\n\n        {leftContent && (\n          <div className={styles.LeftContent}>\n            {isBezierIcon(leftContent) ? (\n              <Icon\n                className={styles.Icon}\n                size=\"s\"\n                source={leftContent}\n                color=\"txt-black-dark\"\n              />\n            ) : (\n              leftContent\n            )}\n          </div>\n        )}\n\n        <Text\n          className={styles.Content}\n          typo=\"14\"\n          truncated\n        >\n          {content}\n        </Text>\n\n        {rightContent}\n      </Comp>\n\n      <OutlineItemContextProvider value={useMemo(() => ({ indent }), [indent])}>\n        {open && children}\n      </OutlineItemContextProvider>\n    </>\n  )\n})\n"],"names":["OutlineItemContextProvider","useOutlineItemContext","createContext","undefined","DEFAULT_INDENT","OUTLINE_ITEM_TEST_ID","OutlineItem","forwardRef","children","style","className","as","open","disableChevron","active","focused","clickable","clickableProp","leftContent","content","rightContent","href","onClick","rest","forwardedRef","context","isRoot","isNil","indent","isLink","isEmpty","Comp","React","createElement","Fragment","Object","assign","target","rel","classNames","styles","ref","Chevron","Icon","source","ChevronSmallDownIcon","ChevronSmallRightIcon","size","color","LeftContent","isBezierIcon","Text","Content","typo","truncated","value","useMemo"],"mappings":"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"}
+{"version":3,"file":"OutlineItem.js","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, useMemo } from 'react'\nimport * as React from 'react'\n\nimport {\n  ChevronSmallDownIcon,\n  ChevronSmallRightIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isEmpty, isNil } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  type OutlineItemContextProps,\n  type OutlineItemProps,\n} from './OutlineItem.types'\n\nimport styles from './OutlineItem.module.scss'\n\nconst [OutlineItemContextProvider, useOutlineItemContext] = createContext<\n  OutlineItemContextProps | undefined\n>(undefined)\n\nconst DEFAULT_INDENT = 16\n\nexport const OUTLINE_ITEM_TEST_ID = 'bezier-outline-item'\n\nexport const OutlineItem = forwardRef<\n  HTMLDivElement & HTMLAnchorElement,\n  OutlineItemProps\n>(function OutlineItem(\n  {\n    children,\n    style,\n    className,\n    as,\n    open = false,\n    disableChevron = false,\n    active = false,\n    focused = false,\n    clickable: clickableProp = false,\n    leftContent,\n    content,\n    rightContent,\n    href,\n    onClick,\n    ...rest\n  },\n  forwardedRef\n) {\n  const context = useOutlineItemContext()\n  const isRoot = isNil(context)\n  const indent = isRoot ? 0 : context.indent + DEFAULT_INDENT\n\n  const isLink = !isEmpty(href)\n  const Comp = isLink ? 'a' : ((as ?? 'div') as 'div')\n  const clickable = isLink || clickableProp || !isNil(onClick)\n\n  return (\n    <>\n      <Comp\n        {...(isLink && {\n          href,\n          target: '_blank',\n          rel: 'noopener noreferrer',\n        })}\n        style={\n          {\n            ...style,\n            '--b-outline-item-indent': `${indent}px`,\n          } as React.CSSProperties\n        }\n        className={classNames(\n          styles.OutlineItem,\n          active && styles.active,\n          focused && styles.focused,\n          clickable && styles.clickable,\n          className\n        )}\n        ref={forwardedRef}\n        data-testid={OUTLINE_ITEM_TEST_ID}\n        onClick={onClick}\n        {...rest}\n      >\n        {!disableChevron && (\n          <div className={styles.Chevron}>\n            {!isNil(children) && (\n              <Icon\n                className={styles.Icon}\n                source={open ? ChevronSmallDownIcon : ChevronSmallRightIcon}\n                size=\"s\"\n                color=\"txt-black-dark\"\n              />\n            )}\n          </div>\n        )}\n\n        {leftContent && (\n          <div className={styles.LeftContent}>\n            {isBezierIcon(leftContent) ? (\n              <Icon\n                className={styles.Icon}\n                size=\"s\"\n                source={leftContent}\n                color=\"txt-black-dark\"\n              />\n            ) : (\n              leftContent\n            )}\n          </div>\n        )}\n\n        <Text\n          className={styles.Content}\n          typo=\"14\"\n          truncated\n        >\n          {content}\n        </Text>\n\n        {rightContent}\n      </Comp>\n\n      <OutlineItemContextProvider value={useMemo(() => ({ indent }), [indent])}>\n        {open && children}\n      </OutlineItemContextProvider>\n    </>\n  )\n})\n"],"names":["OutlineItemContextProvider","useOutlineItemContext","createContext","undefined","DEFAULT_INDENT","OUTLINE_ITEM_TEST_ID","OutlineItem","forwardRef","children","style","className","as","open","disableChevron","active","focused","clickable","clickableProp","leftContent","content","rightContent","href","onClick","rest","forwardedRef","context","isRoot","isNil","indent","isLink","isEmpty","Comp","_jsxs","_Fragment","target","rel","classNames","styles","ref","_jsx","Chevron","Icon","source","ChevronSmallDownIcon","ChevronSmallRightIcon","size","color","LeftContent","isBezierIcon","Text","Content","typo","truncated","value","useMemo"],"mappings":"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"}

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

@@ -2,12 +2,13 @@
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var useEventHandler = require('../../hooks/useEventHandler.js');
 var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
 var useMergeRefs = require('../../hooks/useMergeRefs.js');
 var utils = require('./utils.js');
 var Overlay_module = require('./Overlay.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var WindowProvider = require('../WindowProvider/WindowProvider.js');
 var Modal = require('../Modal/Modal.js');
 var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
@@ -169,35 +170,40 @@ const Overlay = /*#__PURE__*/React.forwardRef(function Overlay({
   if (!shouldRender) {
     return null;
   }
-  const Content = /*#__PURE__*/React.createElement(ThemeProvider.ThemeProvider, {
-    themeName: themeName
-  }, /*#__PURE__*/React.createElement("div", Object.assign({
-    className: index.default(Overlay_module.default.Overlay, !shouldShow && Overlay_module.default.hidden, withTransition && Overlay_module.default.transition, className),
-    style: {
-      ...style,
-      ...utils.getOverlayStyle({
-        containerRect: containerRect.current,
-        targetRect: targetRect.current,
-        overlay: overlayRef.current,
-        position,
-        marginX,
-        marginY,
-        keepInContainer,
-        show: shouldShow
-      })
-    },
-    ref: mergedRef,
-    "data-testid": OVERLAY_TEST_ID,
-    onTransitionEnd: handleTransitionEnd
-  }, rest), children));
-  return /*#__PURE__*/ReactDOM.createPortal(hasContainer ? Content : /*#__PURE__*/React.createElement("div", {
+  const Content = /*#__PURE__*/jsxRuntime.jsx(ThemeProvider.ThemeProvider, {
+    themeName: themeName,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: index.default(Overlay_module.default.Overlay, !shouldShow && Overlay_module.default.hidden, withTransition && Overlay_module.default.transition, className),
+      style: {
+        ...style,
+        ...utils.getOverlayStyle({
+          containerRect: containerRect.current,
+          targetRect: targetRect.current,
+          overlay: overlayRef.current,
+          position,
+          marginX,
+          marginY,
+          keepInContainer,
+          show: shouldShow
+        })
+      },
+      ref: mergedRef,
+      "data-testid": OVERLAY_TEST_ID,
+      onTransitionEnd: handleTransitionEnd,
+      ...rest,
+      children: children
+    })
+  });
+  return /*#__PURE__*/ReactDOM.createPortal(hasContainer ? Content : /*#__PURE__*/jsxRuntime.jsx("div", {
     style: containerStyle,
     className: index.default(Overlay_module.default.OverlayContainer, !show && Overlay_module.default.hidden, containerClassName),
     ref: containerRef,
-    "data-testid": CONTAINER_TEST_ID
-  }, /*#__PURE__*/React.createElement("div", {
-    className: Overlay_module.default.OverlayWrapper
-  }, Content)), container);
+    "data-testid": CONTAINER_TEST_ID,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: Overlay_module.default.OverlayWrapper,
+      children: Content
+    })
+  }), container);
 });
 
 exports.CONTAINER_TEST_ID = CONTAINER_TEST_ID;