@channel.io/bezier-react 1.4.0 → 1.6.0

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModalContent.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var ModalContent = require('../Modal/ModalContent.js');
+
+/* eslint-disable no-restricted-imports */
+/**
+ * `ConfirmModalContent` is a container of the modal content.
+ * It creates a portal to render the modal content outside of the DOM tree
+ * and renders overlay behind the modal content too.
+ */
+const ConfirmModalContent = /*#__PURE__*/React.forwardRef(function ConfirmModalContent({
+  children,
+  ...rest
+}, forwardedRef) {
+  return /*#__PURE__*/React.createElement(ModalContent.ModalContent, Object.assign({
+    role: "alertdialog",
+    ref: forwardedRef,
+    showCloseIcon: false
+  }, rest), children);
+});
+
+exports.ConfirmModalContent = ConfirmModalContent;
+//# sourceMappingURL=ConfirmModalContent.js.map

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModalContent.js","sources":["../../../../../src/components/Modals/ConfirmModal/ConfirmModalContent.tsx"],"sourcesContent":["/* eslint-disable no-restricted-imports */\nimport React, { forwardRef } from 'react'\n\nimport { ModalContent } from '../Modal'\n\nimport { type ConfirmModalContentProps } from './ConfirmModal.types'\n\n/**\n * `ConfirmModalContent` 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 ConfirmModalContent = forwardRef(function ConfirmModalContent({\n  children,\n  ...rest\n}: ConfirmModalContentProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  return (\n    <ModalContent\n      role=\"alertdialog\"\n      ref={forwardedRef}\n      showCloseIcon={false}\n      {...rest}\n    >\n      { children }\n    </ModalContent>\n  )\n})\n"],"names":["ConfirmModalContent","forwardRef","children","rest","forwardedRef","React","createElement","ModalContent","Object","assign","role","ref","showCloseIcon"],"mappings":";;;;;AAAA;AAOA;AACA;AACA;AACA;AACA;MACaA,mBAAmB,gBAAGC,gBAAU,CAAC,SAASD,mBAAmBA,CAAC;EACzEE,QAAQ;EACR,GAAGC,IAAAA;AACqB,CAAC,EAAEC,YAAuC,EAAE;EACpE,oBACEC,KAAA,CAAAC,aAAA,CAACC,yBAAY,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACXC,IAAAA,IAAI,EAAC,aAAa;AAClBC,IAAAA,GAAG,EAAEP,YAAa;AAClBQ,IAAAA,aAAa,EAAE,KAAA;GACXT,EAAAA,IAAI,CAEND,EAAAA,QACU,CAAC,CAAA;AAEnB,CAAC;;;;"}

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModalFooter.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var ModalFooter = require('../Modal/ModalFooter.js');
+
+/* eslint-disable no-restricted-imports */
+/**
+ * `ConfirmModalFooter` is a simple wrapper of the footer of the modal content.
+ * Usually, it contains the action buttons of the modal.
+ */
+const ConfirmModalFooter = /*#__PURE__*/React.forwardRef(function ConfirmModalFooter(props, forwardedRef) {
+  return /*#__PURE__*/React.createElement(ModalFooter.ModalFooter, Object.assign({
+    ref: forwardedRef
+  }, props));
+});
+
+exports.ConfirmModalFooter = ConfirmModalFooter;
+//# sourceMappingURL=ConfirmModalFooter.js.map

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModalFooter.js","sources":["../../../../../src/components/Modals/ConfirmModal/ConfirmModalFooter.tsx"],"sourcesContent":["/* eslint-disable no-restricted-imports */\nimport React, { forwardRef } from 'react'\n\nimport { ModalFooter } from '../Modal'\n\nimport { type ConfirmModalFooterProps } from './ConfirmModal.types'\n\n/**\n * `ConfirmModalFooter` is a simple wrapper of the footer of the modal content.\n * Usually, it contains the action buttons of the modal.\n */\nexport const ConfirmModalFooter = forwardRef(function ConfirmModalFooter(\n  props: ConfirmModalFooterProps,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  return (\n    <ModalFooter\n      ref={forwardedRef}\n      {...props}\n    />\n  )\n})\n"],"names":["ConfirmModalFooter","forwardRef","props","forwardedRef","React","createElement","ModalFooter","Object","assign","ref"],"mappings":";;;;;AAAA;AAOA;AACA;AACA;AACA;AACO,MAAMA,kBAAkB,gBAAGC,gBAAU,CAAC,SAASD,kBAAkBA,CACtEE,KAA8B,EAC9BC,YAAuC,EACvC;EACA,oBACEC,KAAA,CAAAC,aAAA,CAACC,uBAAW,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACVC,IAAAA,GAAG,EAAEN,YAAAA;GACDD,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC;;;;"}

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModalHeader.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var ModalHeader = require('../Modal/ModalHeader.js');
+var Modal_types = require('../Modal/Modal.types.js');
+
+/* eslint-disable no-restricted-imports */
+/**
+ * `ConfirmModalHeader` is a header of the modal content.
+ * It renders the accessible title and description of the modal.
+ */
+const ConfirmModalHeader = /*#__PURE__*/React.forwardRef(function ConfirmModalHeader(props, forwardedRef) {
+  return /*#__PURE__*/React.createElement(ModalHeader.ModalHeader, Object.assign({
+    ref: forwardedRef,
+    subtitle: null,
+    titleSize: Modal_types.ModalTitleSize.M
+  }, props));
+});
+
+exports.ConfirmModalHeader = ConfirmModalHeader;
+//# sourceMappingURL=ConfirmModalHeader.js.map

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModalHeader.js","sources":["../../../../../src/components/Modals/ConfirmModal/ConfirmModalHeader.tsx"],"sourcesContent":["/* eslint-disable no-restricted-imports */\nimport React, { forwardRef } from 'react'\n\nimport {\n  ModalHeader,\n  ModalTitleSize,\n} from '../Modal'\n\nimport { type ConfirmModalHeaderProps } from './ConfirmModal.types'\n\n/**\n * `ConfirmModalHeader` is a header of the modal content.\n * It renders the accessible title and description of the modal.\n */\nexport const ConfirmModalHeader = forwardRef(function ConfirmModalHeader(\n  props: ConfirmModalHeaderProps,\n  forwardedRef: React.Ref<HTMLElement>,\n) {\n  return (\n    <ModalHeader\n      ref={forwardedRef}\n      subtitle={null}\n      titleSize={ModalTitleSize.M}\n      {...props}\n    />\n  )\n})\n"],"names":["ConfirmModalHeader","forwardRef","props","forwardedRef","React","createElement","ModalHeader","Object","assign","ref","subtitle","titleSize","ModalTitleSize","M"],"mappings":";;;;;;AAAA;AAUA;AACA;AACA;AACA;AACO,MAAMA,kBAAkB,gBAAGC,gBAAU,CAAC,SAASD,kBAAkBA,CACtEE,KAA8B,EAC9BC,YAAoC,EACpC;EACA,oBACEC,KAAA,CAAAC,aAAA,CAACC,uBAAW,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACVC,IAAAA,GAAG,EAAEN,YAAa;AAClBO,IAAAA,QAAQ,EAAE,IAAK;IACfC,SAAS,EAAEC,0BAAc,CAACC,CAAAA;GACtBX,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC;;;;"}

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModalHelpers.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var ModalHelpers = require('../Modal/ModalHelpers.js');
+
+/* eslint-disable no-restricted-imports */
+/**
+ * `ConfirmModalTrigger` is a button that opens the modal. **It doesn't render any DOM node.**
+ * It passes the handler that opens the modal and accessibility properties to the children.
+ *
+ * It **must** be placed outside of the `ConfirmModalContent`.
+ */
+function ConfirmModalTrigger({
+  children
+}) {
+  return /*#__PURE__*/React.createElement(ModalHelpers.ModalTrigger, null, children);
+}
+
+/**
+ * `ConfirmModalClose` is a button that closes the modal. **It doesn't render any DOM node.**
+ * It passes the handler that closes the modal to the children.
+ */
+function ConfirmModalClose({
+  children
+}) {
+  return /*#__PURE__*/React.createElement(ModalHelpers.ModalClose, null, children);
+}
+
+exports.ConfirmModalClose = ConfirmModalClose;
+exports.ConfirmModalTrigger = ConfirmModalTrigger;
+//# sourceMappingURL=ConfirmModalHelpers.js.map

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModalHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModalHelpers.js","sources":["../../../../../src/components/Modals/ConfirmModal/ConfirmModalHelpers.tsx"],"sourcesContent":["/* eslint-disable no-restricted-imports */\nimport React from 'react'\n\nimport {\n  ModalClose,\n  ModalTrigger,\n} from '../Modal'\n\nimport {\n  type ConfirmModalCloseProps,\n  type ConfirmModalTriggerProps,\n} from './ConfirmModal.types'\n\n/**\n * `ConfirmModalTrigger` 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 `ConfirmModalContent`.\n */\nexport function ConfirmModalTrigger({ children }: ConfirmModalTriggerProps) {\n  return (\n    <ModalTrigger>\n      { children }\n    </ModalTrigger>\n  )\n}\n\n/**\n * `ConfirmModalClose` 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 ConfirmModalClose({ children }: ConfirmModalCloseProps) {\n  return (\n    <ModalClose>\n      { children }\n    </ModalClose>\n  )\n}\n"],"names":["ConfirmModalTrigger","children","React","createElement","ModalTrigger","ConfirmModalClose","ModalClose"],"mappings":";;;;;AAAA;AAaA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,mBAAmBA,CAAC;AAAEC,EAAAA,QAAAA;AAAmC,CAAC,EAAE;AAC1E,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,yBAAY,EAAA,IAAA,EACTH,QACU,CAAC,CAAA;AAEnB,CAAA;;AAEA;AACA;AACA;AACA;AACO,SAASI,iBAAiBA,CAAC;AAAEJ,EAAAA,QAAAA;AAAiC,CAAC,EAAE;AACtE,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACG,uBAAU,EAAA,IAAA,EACPL,QACQ,CAAC,CAAA;AAEjB;;;;;"}

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var React = require('react');
+var index_module = require('../../../node_modules/@radix-ui/react-dialog/dist/index.module.js');
+var functionUtils = require('../../../utils/functionUtils.js');
+
+/**
+ * `Modal` is a dialog that appears on top of the page.
+ *
+ * `Modal` is a context of the Modal-related components. It doesn't render any DOM node.
+ * It controls the visibility of the entire component and provides
+ * handlers and accessibility properties to Modal-related components.
+ *
+ * @example
+ *
+ * ```tsx
+ * // Anatomy of the Modal
+ * <Modal>
+ *  <ModalTrigger />
+ *  <ModalContent>
+ *    <ModalHeader />
+ *    <ModalBody />
+ *    <ModalFooter />
+ *  </ModalContent>
+ * </Modal>
+ * ```
+ */
+function Modal({
+  children,
+  show,
+  defaultShow,
+  onShow = functionUtils.noop,
+  onHide = functionUtils.noop
+}) {
+  const onOpenChange = React.useCallback(open => {
+    const callback = open ? onShow : onHide;
+    callback();
+  }, [onShow, onHide]);
+  return /*#__PURE__*/React.createElement(index_module.Root, {
+    open: show,
+    defaultOpen: defaultShow,
+    onOpenChange: onOpenChange
+  }, children);
+}
+
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modals/Modal/Modal.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport { type ModalProps } from './Modal.types'\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 *\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 = noop,\n  onHide = noop,\n}: ModalProps) {\n  const onOpenChange = useCallback<NonNullable<DialogPrimitive.DialogProps['onOpenChange']>>((open) => {\n    const callback = open ? onShow : onHide\n    callback()\n  }, [\n    onShow,\n    onHide,\n  ])\n\n  return (\n    <DialogPrimitive.Root\n      open={show}\n      defaultOpen={defaultShow}\n      onOpenChange={onOpenChange}\n    >\n      { children }\n    </DialogPrimitive.Root>\n  )\n}\n\n"],"names":["Modal","children","show","defaultShow","onShow","noop","onHide","onOpenChange","useCallback","open","callback","React","createElement","DialogPrimitive","defaultOpen"],"mappings":";;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,KAAKA,CAAC;EACpBC,QAAQ;EACRC,IAAI;EACJC,WAAW;AACXC,EAAAA,MAAM,GAAGC,kBAAI;AACbC,EAAAA,MAAM,GAAGD,kBAAAA;AACC,CAAC,EAAE;AACb,EAAA,MAAME,YAAY,GAAGC,iBAAW,CAA4DC,IAAI,IAAK;AACnG,IAAA,MAAMC,QAAQ,GAAGD,IAAI,GAAGL,MAAM,GAAGE,MAAM,CAAA;AACvCI,IAAAA,QAAQ,EAAE,CAAA;AACZ,GAAC,EAAE,CACDN,MAAM,EACNE,MAAM,CACP,CAAC,CAAA;AAEF,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACC,iBAAoB,EAAA;AACnBJ,IAAAA,IAAI,EAAEP,IAAK;AACXY,IAAAA,WAAW,EAAEX,WAAY;AACzBI,IAAAA,YAAY,EAAEA,YAAAA;AAAa,GAAA,EAEzBN,QACkB,CAAC,CAAA;AAE3B;;;;"}

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

@@ -0,0 +1,114 @@
+'use strict';
+
+var index_module = require('../../../node_modules/@radix-ui/react-dialog/dist/index.module.js');
+var styleUtils = require('../../../utils/styleUtils.js');
+var Button = require('../../Button/Button.js');
+var Button_types = require('../../Button/Button.types.js');
+var Text = require('../../Text/Text.js');
+var ModalAnimation_styled = require('./ModalAnimation.styled.js');
+var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
+
+const DialogPrimitiveOverlay = /*#__PURE__*/FoundationStyledComponent.styled(index_module.Overlay).withConfig({
+  displayName: "Modalstyled__DialogPrimitiveOverlay",
+  componentId: "sc-p0ldb5-0"
+})(["position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--bezier-modal-z-index);display:grid;place-items:center;padding:40px 0;overflow-y:auto;background-color:var(--bgtxt-absolute-black-lighter);&[data-state='open']{", "}"], ModalAnimation_styled.default.overlayShow);
+const Content = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Modalstyled__Content",
+  componentId: "sc-p0ldb5-1"
+})(["", " ", " position:relative;box-sizing:border-box;width:var(--bezier-modal-width);min-width:360px;max-width:100vw;height:var(--bezier-modal-height);max-height:100%;overflow:visible;color:var(--bg-grey-darkest);word-break:break-word;&[data-state='open']{", "}&:focus{outline:none;}& [data-component='BezierButton']:focus{box-shadow:0 0 0 3px var(--bgtxt-cobalt-light);}", ""], ({
+  foundation
+}) => foundation?.rounding.round20, ({
+  foundation
+}) => foundation?.elevation.ev4(), ModalAnimation_styled.default.contentShow, ({
+  interpolation
+}) => interpolation);
+const Section = /*#__PURE__*/FoundationStyledComponent.styled.section.withConfig({
+  displayName: "Modalstyled__Section",
+  componentId: "sc-p0ldb5-2"
+})(["display:flex;flex-direction:column;width:100%;height:100%;"]);
+const MODAL_PADDING = 24;
+const HEADER_BODY_GAP = 12;
+const FOOTER_TOP_GAP = 16;
+const Body = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Modalstyled__Body",
+  componentId: "sc-p0ldb5-3"
+})(["flex:1;padding:", "px;", ""], MODAL_PADDING, ({
+  interpolation
+}) => interpolation);
+const Header = /*#__PURE__*/FoundationStyledComponent.styled.header.withConfig({
+  displayName: "Modalstyled__Header",
+  componentId: "sc-p0ldb5-4"
+})(["display:flex;flex-direction:column;padding:", "px ", "px 0 ", "px;", " ", " ", ""], MODAL_PADDING, MODAL_PADDING, MODAL_PADDING, styleUtils.gap(12), ({
+  hidden
+}) => !hidden && FoundationStyledComponent.css`
+    & + ${Body},
+    & + * ${Body} {
+      padding-top: ${HEADER_BODY_GAP}px;
+    }
+  `, ({
+  interpolation
+}) => interpolation);
+const Footer = /*#__PURE__*/FoundationStyledComponent.styled.footer.withConfig({
+  displayName: "Modalstyled__Footer",
+  componentId: "sc-p0ldb5-5"
+})(["display:flex;padding:", "px ", "px ", "px;", " + &,", " + * &{padding-top:0;margin-top:", "px;}", ""], FOOTER_TOP_GAP, MODAL_PADDING, MODAL_PADDING, Body, Body, FOOTER_TOP_GAP - MODAL_PADDING, ({
+  interpolation
+}) => interpolation);
+const TitleContainer = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Modalstyled__TitleContainer",
+  componentId: "sc-p0ldb5-6"
+})(["display:flex;flex-direction:row;width:100%;", ""], styleUtils.gap(6));
+const HeadingGroup = /*#__PURE__*/FoundationStyledComponent.styled.hgroup.withConfig({
+  displayName: "Modalstyled__HeadingGroup",
+  componentId: "sc-p0ldb5-7"
+})(["display:flex;flex:1;flex-direction:column-reverse;", ""], styleUtils.gap(4));
+const Title = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).attrs({
+  forwardedAs: 'h2',
+  bold: true,
+  color: 'txt-black-darkest'
+}).withConfig({
+  displayName: "Modalstyled__Title",
+  componentId: "sc-p0ldb5-8"
+})(["width:100%;"]);
+const CLOSE_ICON_BUTTON_SIZE = Button_types.ButtonSize.M;
+const CLOSE_ICON_BUTTON_MARGIN_X = -6;
+const CLOSE_ICON_BUTTON_MARGIN_Y = -6;
+const CloseIconButton = /*#__PURE__*/FoundationStyledComponent.styled(Button.Button).attrs({
+  size: CLOSE_ICON_BUTTON_SIZE,
+  leftContent: 'cancel',
+  colorVariant: Button_types.ButtonColorVariant.MonochromeDark,
+  styleVariant: Button_types.ButtonStyleVariant.Tertiary
+}).withConfig({
+  displayName: "Modalstyled__CloseIconButton",
+  componentId: "sc-p0ldb5-9"
+})(["position:absolute;top:", "px;right:", "px;"], MODAL_PADDING + CLOSE_ICON_BUTTON_MARGIN_X, MODAL_PADDING + CLOSE_ICON_BUTTON_MARGIN_Y);
+const CloseIconButtonSpacer = /*#__PURE__*/FoundationStyledComponent.styled(Button.Button).attrs({
+  forwardedAs: 'div',
+  size: CLOSE_ICON_BUTTON_SIZE
+}).withConfig({
+  displayName: "Modalstyled__CloseIconButtonSpacer",
+  componentId: "sc-p0ldb5-10"
+})(["margin-top:", "px;margin-right:", "px;pointer-events:none;visibility:hidden;"], CLOSE_ICON_BUTTON_MARGIN_X, CLOSE_ICON_BUTTON_MARGIN_Y);
+const FooterLeftContent = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Modalstyled__FooterLeftContent",
+  componentId: "sc-p0ldb5-11"
+})(["margin-right:auto;"]);
+const FooterRightContent = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Modalstyled__FooterRightContent",
+  componentId: "sc-p0ldb5-12"
+})(["margin-left:auto;"]);
+
+exports.Body = Body;
+exports.CloseIconButton = CloseIconButton;
+exports.CloseIconButtonSpacer = CloseIconButtonSpacer;
+exports.Content = Content;
+exports.DialogPrimitiveOverlay = DialogPrimitiveOverlay;
+exports.Footer = Footer;
+exports.FooterLeftContent = FooterLeftContent;
+exports.FooterRightContent = FooterRightContent;
+exports.Header = Header;
+exports.HeadingGroup = HeadingGroup;
+exports.Section = Section;
+exports.Title = Title;
+exports.TitleContainer = TitleContainer;
+//# sourceMappingURL=Modal.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styled.js","sources":["../../../../../src/components/Modals/Modal/Modal.styled.ts"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { gap } from '~/src/utils/styleUtils'\n\nimport {\n  Button,\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from '~/src/components/Button'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  type ModalBodyProps,\n  type ModalContentProps,\n  type ModalFooterProps,\n  type ModalHeaderProps,\n} from './Modal.types'\n\nimport ModalAnimation from './ModalAnimation.styled'\n\nexport const DialogPrimitiveOverlay = styled(DialogPrimitive.Overlay)`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--bezier-modal-z-index);\n  display: grid;\n  place-items: center;\n  padding: 40px 0;\n  overflow-y: auto;\n  background-color: var(--bgtxt-absolute-black-lighter);\n\n  &[data-state='open'] {\n    ${ModalAnimation.overlayShow}\n  }\n`\n\nexport const Content = styled.div<ModalContentProps>`\n  ${({ foundation }) => foundation?.rounding.round20}\n  ${({ foundation }) => foundation?.elevation.ev4()}\n\n  position: relative;\n  box-sizing: border-box;\n  width: var(--bezier-modal-width);\n  min-width: 360px;\n  max-width: 100vw;\n  height: var(--bezier-modal-height);\n  max-height: 100%;\n  overflow: visible;\n  color: var(--bg-grey-darkest);\n  word-break: break-word;\n\n  &[data-state='open'] {\n    ${ModalAnimation.contentShow}\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  /* NOTE(@ed): to show a focus ring when the modal is mounted */\n  & [data-component='BezierButton']:focus {\n    box-shadow: 0 0 0 3px var(--bgtxt-cobalt-light);\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const Section = styled.section`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n`\n\nconst MODAL_PADDING = 24\nconst HEADER_BODY_GAP = 12\nconst FOOTER_TOP_GAP = 16\n\nexport const Body = styled.div<ModalBodyProps>`\n  flex: 1;\n  padding: ${MODAL_PADDING}px;\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const Header = styled.header<ModalHeaderProps>`\n  display: flex;\n  flex-direction: column;\n  padding: ${MODAL_PADDING}px ${MODAL_PADDING}px 0 ${MODAL_PADDING}px;\n  ${gap(12)}\n\n  /* NOTE(@ed): Support when the ModalBody is used as stand-alone */\n  ${({ hidden }) => !hidden && css`\n    & + ${Body},\n    & + * ${Body} {\n      padding-top: ${HEADER_BODY_GAP}px;\n    }\n  `}\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const Footer = styled.footer<ModalFooterProps>`\n  display: flex;\n  padding: ${FOOTER_TOP_GAP}px ${MODAL_PADDING}px ${MODAL_PADDING}px;\n\n  /* NOTE(@ed): Support when the ModalBody is used as stand-alone */\n  /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */\n  ${Body} + &,\n  ${Body} + * & {\n    padding-top: 0;\n    margin-top: ${FOOTER_TOP_GAP - MODAL_PADDING}px;\n  }\n  /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const TitleContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  ${gap(6)}\n`\n\nexport const HeadingGroup = styled.hgroup`\n  display: flex;\n  flex: 1;\n  flex-direction: column-reverse;\n  ${gap(4)}\n`\n\nexport const Title = styled(Text).attrs({\n  forwardedAs: 'h2',\n  bold: true,\n  color: 'txt-black-darkest',\n})`\n  width: 100%;\n`\n\nconst CLOSE_ICON_BUTTON_SIZE = ButtonSize.M\nconst CLOSE_ICON_BUTTON_MARGIN_X = -6\nconst CLOSE_ICON_BUTTON_MARGIN_Y = -6\n\nexport const CloseIconButton = styled(Button).attrs({\n  size: CLOSE_ICON_BUTTON_SIZE,\n  leftContent: 'cancel',\n  colorVariant: ButtonColorVariant.MonochromeDark,\n  styleVariant: ButtonStyleVariant.Tertiary,\n})`\n  position: absolute;\n  top: ${MODAL_PADDING + CLOSE_ICON_BUTTON_MARGIN_X}px;\n  right: ${MODAL_PADDING + CLOSE_ICON_BUTTON_MARGIN_Y}px;\n`\n\nexport const CloseIconButtonSpacer = styled(Button).attrs({\n  forwardedAs: 'div',\n  size: CLOSE_ICON_BUTTON_SIZE,\n})`\n  margin-top: ${CLOSE_ICON_BUTTON_MARGIN_X}px;\n  margin-right: ${CLOSE_ICON_BUTTON_MARGIN_Y}px;\n  pointer-events: none;\n  visibility: hidden;\n`\n\nexport const FooterLeftContent = styled.div`\n  margin-right: auto;\n`\n\nexport const FooterRightContent = styled.div`\n  margin-left: auto;\n`\n"],"names":["DialogPrimitiveOverlay","styled","DialogPrimitive","withConfig","displayName","componentId","ModalAnimation","overlayShow","Content","div","foundation","rounding","round20","elevation","ev4","contentShow","interpolation","Section","section","MODAL_PADDING","HEADER_BODY_GAP","FOOTER_TOP_GAP","Body","Header","header","gap","hidden","css","Footer","footer","TitleContainer","HeadingGroup","hgroup","Title","Text","attrs","forwardedAs","bold","color","CLOSE_ICON_BUTTON_SIZE","ButtonSize","M","CLOSE_ICON_BUTTON_MARGIN_X","CLOSE_ICON_BUTTON_MARGIN_Y","CloseIconButton","Button","size","leftContent","colorVariant","ButtonColorVariant","MonochromeDark","styleVariant","ButtonStyleVariant","Tertiary","CloseIconButtonSpacer","FooterLeftContent","FooterRightContent"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+'use strict';
+
+let ModalTitleSize = /*#__PURE__*/function (ModalTitleSize) {
+  ModalTitleSize["L"] = "L";
+  ModalTitleSize["M"] = "M";
+  return ModalTitleSize;
+}({});
+
+exports.ModalTitleSize = ModalTitleSize;
+//# sourceMappingURL=Modal.types.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var Modal_styled = require('./Modal.styled.js');
+
+/**
+ * `ModalBody` is a simple wrapper of the main modal content.
+ */
+const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
+  children,
+  ...rest
+}, forwardedRef) {
+  return /*#__PURE__*/React.createElement(Modal_styled.Body, Object.assign({
+    ref: forwardedRef
+  }, rest), children);
+});
+
+exports.ModalBody = ModalBody;
+//# sourceMappingURL=ModalBody.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.js","sources":["../../../../../src/components/Modals/Modal/ModalBody.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { type ModalBodyProps } from './Modal.types'\n\nimport * as Styled from './Modal.styled'\n\n/**\n * `ModalBody` is a simple wrapper of the main modal content.\n */\nexport const ModalBody = forwardRef(function ModalBody({\n  children,\n  ...rest\n}: ModalBodyProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  return (\n    <Styled.Body\n      ref={forwardedRef}\n      {...rest}\n    >\n      { children }\n    </Styled.Body>\n  )\n})\n"],"names":["ModalBody","forwardRef","children","rest","forwardedRef","React","createElement","Styled","Object","assign","ref"],"mappings":";;;;;AAMA;AACA;AACA;MACaA,SAAS,gBAAGC,gBAAU,CAAC,SAASD,SAASA,CAAC;EACrDE,QAAQ;EACR,GAAGC,IAAAA;AACW,CAAC,EAAEC,YAAuC,EAAE;EAC1D,oBACEC,KAAA,CAAAC,aAAA,CAACC,iBAAW,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACVC,IAAAA,GAAG,EAAEN,YAAAA;GACDD,EAAAA,IAAI,CAEND,EAAAA,QACS,CAAC,CAAA;AAElB,CAAC;;;;"}

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

@@ -0,0 +1,54 @@
+'use strict';
+
+var React = require('react');
+var index_module = require('../../../node_modules/@radix-ui/react-dialog/dist/index.module.js');
+var ZIndex = require('../../../constants/ZIndex.js');
+var domUtils = require('../../../utils/domUtils.js');
+var typeUtils = require('../../../utils/typeUtils.js');
+var ModalContentContext = require('./ModalContentContext.js');
+var ModalHelpers = require('./ModalHelpers.js');
+var Modal_styled = require('./Modal.styled.js');
+
+/**
+ * `ModalContent` is a container of the modal content.
+ * It creates a portal to render the modal content outside of the DOM tree
+ * and renders overlay behind the modal content too.
+ */
+const ModalContent = /*#__PURE__*/React.forwardRef(function ModalContent({
+  children,
+  style,
+  container = domUtils.document.body,
+  showCloseIcon = false,
+  width = 'max-content',
+  height = 'fit-content',
+  zIndex = ZIndex.ZIndex.Modal,
+  ...rest
+}, forwardedRef) {
+  const overlayStyle = React.useMemo(() => ({
+    '--bezier-modal-z-index': zIndex
+  }), [zIndex]);
+  const contentStyle = React.useMemo(() => ({
+    ...style,
+    '--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(() => ({
+    showCloseIcon
+  }), [showCloseIcon]);
+  return /*#__PURE__*/React.createElement(index_module.Portal, {
+    container: container
+  }, /*#__PURE__*/React.createElement(Modal_styled.DialogPrimitiveOverlay, {
+    style: overlayStyle
+  }, /*#__PURE__*/React.createElement(index_module.Content, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Modal_styled.Content, Object.assign({
+    "aria-modal": true,
+    ref: forwardedRef,
+    style: contentStyle
+  }, rest), /*#__PURE__*/React.createElement(Modal_styled.Section, null, /*#__PURE__*/React.createElement(ModalContentContext.default.Provider, {
+    value: contextValue
+  }, children), showCloseIcon && /*#__PURE__*/React.createElement(ModalHelpers.ModalClose, null, /*#__PURE__*/React.createElement(Modal_styled.CloseIconButton, null)))))));
+});
+
+exports.ModalContent = ModalContent;
+//# sourceMappingURL=ModalContent.js.map

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

@@ -0,0 +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 ModalContentContext 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              <ModalContentContext.Provider value={contextValue}>\n                { children }\n              </ModalContentContext.Provider>\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","ModalContentContext","Provider","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,mBAAsB,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,oBAAuB,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,CAERO,eAAAA,KAAA,CAAAC,aAAA,CAACE,oBAAc,EAAA,IAAA,eACbH,KAAA,CAAAC,aAAA,CAACO,2BAAmB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEX,YAAAA;GACjCjB,EAAAA,QAC0B,CAAC,EAG7BK,aAAa,iBACba,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/ModalContentContext.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const ModalContentContext = /*#__PURE__*/React.createContext({
+  showCloseIcon: false
+});
+var ModalContentContext$1 = ModalContentContext;
+
+exports.default = ModalContentContext$1;
+//# sourceMappingURL=ModalContentContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContentContext.js","sources":["../../../../../src/components/Modals/Modal/ModalContentContext.ts"],"sourcesContent":["import React from 'react'\n\nimport { type ModalContentContextValue } from './Modal.types'\n\nconst ModalContentContext = React.createContext<ModalContentContextValue>({\n  showCloseIcon: false,\n})\n\nexport default ModalContentContext\n"],"names":["ModalContentContext","React","createContext","showCloseIcon"],"mappings":";;;;;;AAIA,MAAMA,mBAAmB,gBAAGC,KAAK,CAACC,aAAa,CAA2B;AACxEC,EAAAA,aAAa,EAAE,KAAA;AACjB,CAAC,CAAC,CAAA;AAEF,4BAAeH,mBAAmB;;;;"}

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var Modal_styled = require('./Modal.styled.js');
+
+/**
+ * `ModalFooter` is a simple wrapper of the footer of the modal content.
+ * Usually, it contains the action buttons of the modal.
+ */
+const ModalFooter = /*#__PURE__*/React.forwardRef(function ModalFooter({
+  leftContent,
+  rightContent,
+  ...rest
+}, forwardedRef) {
+  return /*#__PURE__*/React.createElement(Modal_styled.Footer, Object.assign({
+    ref: forwardedRef
+  }, rest), leftContent && /*#__PURE__*/React.createElement(Modal_styled.FooterLeftContent, null, leftContent), rightContent && /*#__PURE__*/React.createElement(Modal_styled.FooterRightContent, null, rightContent));
+});
+
+exports.ModalFooter = ModalFooter;
+//# sourceMappingURL=ModalFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.js","sources":["../../../../../src/components/Modals/Modal/ModalFooter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { type ModalFooterProps } from './Modal.types'\n\nimport * as Styled from './Modal.styled'\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(function ModalFooter({\n  leftContent,\n  rightContent,\n  ...rest\n}: ModalFooterProps, forwardedRef: React.Ref<HTMLElement>) {\n  return (\n    <Styled.Footer\n      ref={forwardedRef}\n      {...rest}\n    >\n      { leftContent && (\n        <Styled.FooterLeftContent>\n          { leftContent }\n        </Styled.FooterLeftContent>\n      ) }\n\n      { rightContent && (\n        <Styled.FooterRightContent>\n          { rightContent }\n        </Styled.FooterRightContent>\n      ) }\n    </Styled.Footer>\n  )\n})\n"],"names":["ModalFooter","forwardRef","leftContent","rightContent","rest","forwardedRef","React","createElement","Styled","Object","assign","ref"],"mappings":";;;;;AAMA;AACA;AACA;AACA;MACaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CAAC;EACzDE,WAAW;EACXC,YAAY;EACZ,GAAGC,IAAAA;AACa,CAAC,EAAEC,YAAoC,EAAE;EACzD,oBACEC,KAAA,CAAAC,aAAA,CAACC,mBAAa,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACZC,IAAAA,GAAG,EAAEN,YAAAA;GACDD,EAAAA,IAAI,CAENF,EAAAA,WAAW,iBACXI,KAAA,CAAAC,aAAA,CAACC,8BAAwB,EACrBN,IAAAA,EAAAA,WACsB,CAC3B,EAECC,YAAY,iBACZG,KAAA,CAAAC,aAAA,CAACC,+BAAyB,EAAA,IAAA,EACtBL,YACuB,CAEhB,CAAC,CAAA;AAEpB,CAAC;;;;"}

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

@@ -0,0 +1,81 @@
+'use strict';
+
+var React = require('react');
+var index_module = require('../../../node_modules/@radix-ui/react-dialog/dist/index.module.js');
+var Text = require('../../Text/Text.js');
+var Modal_types = require('./Modal.types.js');
+var ModalContentContext = require('./ModalContentContext.js');
+var Modal_styled = require('./Modal.styled.js');
+var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
+var Typography = require('../../../foundation/Typography.js');
+
+function getTitleTypo(size) {
+  switch (size) {
+    case Modal_types.ModalTitleSize.L:
+      return Typography.Typography.Size24;
+    case Modal_types.ModalTitleSize.M:
+      return Typography.Typography.Size16;
+    default:
+      return Typography.Typography.Size16;
+  }
+}
+function ModalHeaderTitle({
+  children,
+  size,
+  subtitle
+}) {
+  const hasSubtitle = !!subtitle;
+  const titleTypo = getTitleTypo(size);
+  return /*#__PURE__*/React.createElement(index_module.Title, {
+    asChild: true
+  }, hasSubtitle ? /*#__PURE__*/React.createElement(Modal_styled.HeadingGroup, {
+    role: "group",
+    "aria-roledescription": "Heading group"
+  }, /*#__PURE__*/React.createElement(Modal_styled.Title, {
+    typo: titleTypo
+  }, children), /*#__PURE__*/React.createElement(Text.default, {
+    "aria-roledescription": "subtitle",
+    as: "p",
+    bold: true,
+    color: "txt-black-dark",
+    typo: Typography.Typography.Size13
+  }, subtitle)) : /*#__PURE__*/React.createElement(Modal_styled.Title, {
+    typo: titleTypo
+  }, children));
+}
+
+/**
+ * `ModalHeader` is a header of the modal content.
+ * It renders the accessible title and description of the modal.
+ * If you want to hide the title and description, use `hidden` prop.
+ */
+const ModalHeader = /*#__PURE__*/React.forwardRef(function ModalHeader({
+  title,
+  subtitle,
+  description,
+  titleSize = Modal_types.ModalTitleSize.L,
+  hidden = false,
+  ...rest
+}, forwardedRef) {
+  const {
+    showCloseIcon
+  } = React.useContext(ModalContentContext.default);
+  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({
+    ref: forwardedRef,
+    hidden: hidden
+  }, rest), hasTitleArea && /*#__PURE__*/React.createElement(Modal_styled.TitleContainer, null, title && /*#__PURE__*/React.createElement(ModalHeaderTitle, {
+    size: titleSize,
+    subtitle: subtitle
+  }, title), showCloseIcon && /*#__PURE__*/React.createElement(Modal_styled.CloseIconButtonSpacer, null)), description && /*#__PURE__*/React.createElement(index_module.Description, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Text.default, {
+    as: "p",
+    color: "txt-black-darkest",
+    typo: Typography.Typography.Size15
+  }, description))));
+});
+
+exports.ModalHeader = ModalHeader;
+//# sourceMappingURL=ModalHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sources":["../../../../../src/components/Modals/Modal/ModalHeader.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useContext,\n} 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 ModalContentContext 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 } = useContext(ModalContentContext)\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","useContext","ModalContentContext","hasTitleArea","Hidden","VisuallyHidden","Fragment","Object","assign","ref","Size15"],"mappings":"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"}