@cambly/syntax-core 10.31.0 → 10.33.0

package/dist/__chunks/{4OOJZHZM.cjs → XCI3DO6F.cjs}

@@ -1,22 +1,22 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _NLD667Y7cjs = require('./NLD667Y7.cjs');
+var _ZQRUOZFXcjs = require('./ZQRUOZFX.cjs');
 
 
 var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
 
 
-var _5YIEOGTAcjs = require('./5YIEOGTA.cjs');
+var _E32CAKEBcjs = require('./E32CAKEB.cjs');
 
 
 var _THM3NAFOcjs = require('./THM3NAFO.cjs');
 
 
-var _MUYNXIZKcjs = require('./MUYNXIZK.cjs');
+var _5VVFGPW6cjs = require('./5VVFGPW6.cjs');
 
 
-var _OT2MUGKKcjs = require('./OT2MUGKK.cjs');
+var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
 
 // css-module:./Modal.module.css#css-module
 var Modal_module_default = { "backdrop": "_backdrop_17lbk_1", "closeButton": "_closeButton_17lbk_10" };
@@ -51,7 +51,7 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5YIEOGTAcjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HUIHS6RNcjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _THM3NAFOcjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _E32CAKEBcjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HUIHS6RNcjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _THM3NAFOcjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
       className: Modal_module_default.backdrop,
@@ -59,7 +59,7 @@ function Modal({
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _OT2MUGKKcjs.Box_default,
+        _RJ3ZYLJScjs.Box_default,
         {
           "data-testid": dataTestId,
           backgroundColor: "white",
@@ -77,30 +77,30 @@ function Modal({
           width: "100%",
           children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _OT2MUGKKcjs.Box_default,
+              _RJ3ZYLJScjs.Box_default,
               {
                 position: "absolute",
                 dangerouslySetInlineStyle: {
                   __style: { top: 4, right: 4 }
                 },
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _MUYNXIZKcjs.IconButton_default,
+                  _5VVFGPW6cjs.IconButton_default,
                   {
                     accessibilityLabel: accessibilityCloseLabel,
                     color: image ? "primary" : "tertiary",
                     on: image ? "darkBackground" : "lightBackground",
                     onClick: onDismiss,
-                    size: "sm",
+                    size: "md",
                     icon: XIcon
                   }
                 )
               }
             ),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _OT2MUGKKcjs.Box_default, { display: "flex", direction: "column", width: "100%", children: [
-              image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OT2MUGKKcjs.Box_default, { children: image }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OT2MUGKKcjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _NLD667Y7cjs.Heading_default, { as: "h1", size: 600, fontStyle: "serif", children: header }) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _RJ3ZYLJScjs.Box_default, { display: "flex", direction: "column", width: "100%", children: [
+              image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RJ3ZYLJScjs.Box_default, { children: image }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RJ3ZYLJScjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ZQRUOZFXcjs.Heading_default, { as: "h1", size: 600, fontStyle: "serif", children: header }) }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _OT2MUGKKcjs.Box_default,
+                _RJ3ZYLJScjs.Box_default,
                 {
                   height: "100%",
                   overflowY: "auto",
@@ -110,7 +110,7 @@ function Modal({
                 }
               ),
               footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _OT2MUGKKcjs.Box_default,
+                _RJ3ZYLJScjs.Box_default,
                 {
                   display: "flex",
                   direction: "column",
@@ -135,4 +135,4 @@ Modal.displayName = "Modal";
 
 
 exports.Modal = Modal;
-//# sourceMappingURL=4OOJZHZM.cjs.map
+//# sourceMappingURL=XCI3DO6F.cjs.map

package/dist/__chunks/{4OOJZHZM.cjs.map → XCI3DO6F.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACyBxK,cAiKQ,YAjKR;AAdN,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,GAsEiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC1D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU,UAAU,IAAI;AAAA,UACxB,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\n\nconst sizeWidth = {\n  sm: 600,\n  lg: 600,\n} as const;\n\nfunction XIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n    </svg>\n  );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n  const [showModal, setShowModal] = useState(false)\n\n  return (\n    <>\n      {showModal && <Modal\n        header=\"header text\"\n        onDismiss={() => setShowModal(false)}\n        footer={\n          <>\n            <Button\n              text=\"Cancel\"\n              color=\"secondary\"\n              onClick={() => {}}\n            />\n            <Button\n              text=\"Confirm\"\n              onClick={() => {}}\n            />\n          </>\n        }\n      >\n        <Typography>\n          Body text goes here!\n        </Typography>\n      </Modal> }\n    </>\n  )\n  ```\n */\nexport default function Modal({\n  header,\n  children,\n  image,\n  onDismiss,\n  footer,\n  accessibilityCloseLabel = \"close modal\",\n  size = \"sm\",\n  zIndex = 1,\n  \"data-testid\": dataTestId,\n}: {\n  /**\n   * The modal's main content. Should typically take in `Typography`'d text.\n   */\n  children: JSX.Element;\n  /**\n   * The header inside a modal as a string.\n   */\n  header: string;\n  /**\n   * What the X button (or clicking out of the modal area) does.\n   * Typically used for closing the Modal\n   */\n  onDismiss: () => void;\n  /**\n   * The optional image rendered above the Modal.\n   * Image\n   *  * Size should be 600w x 200h\n   *  * Be sure to set width=\"100%\" on the image\n   * If images aren't that sized, should ask design to give another image.\n   */\n  image?: JSX.Element;\n  /**\n   * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n   * * Use Syntax `Button` and pass it into footer.\n   * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n   * * If two(2) buttons, put primary button _second_.\n   *\n      <>\n        <Button\n          text=\"Cancel\"\n          color=\"secondary\"\n          onClick={() => {}}\n        />\n        <Button\n          text=\"Confirm\"\n          onClick={() => {}}\n        />\n      </>\n   */\n  footer?: JSX.Element;\n  /**\n   * The accessibilty text on the close button.\n   * (Sets the aria-label of the button)\n   *\n   *\n   * @defaultValue close modal\n   */\n  accessibilityCloseLabel?: string;\n  /**\n   * The size of the card\n   * * `sm`: 600px (deprecated)\n   * * `lg`: 600px\n   *\n   *\n   * @defaultValue sm\n   * @deprecated\n   */\n  size?: keyof typeof sizeWidth;\n  /**\n   * The z-index for the modal.\n   * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n  /**\n   * Test id for the modal\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={styles.backdrop}\n            role=\"presentation\"\n            onClick={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"white\"\n              rounding=\"md\"\n              display=\"flex\"\n              marginStart={4}\n              marginEnd={4}\n              marginTop={8}\n              marginBottom={8}\n              minWidth={240}\n              maxHeight=\"calc(100vh - 64px)\"\n              maxWidth={sizeWidth[size]}\n              overflow=\"hidden\"\n              position=\"relative\"\n              width=\"100%\"\n            >\n              <Box\n                position=\"absolute\"\n                dangerouslySetInlineStyle={{\n                  __style: { top: 4, right: 4 },\n                }}\n              >\n                <IconButton\n                  accessibilityLabel={accessibilityCloseLabel}\n                  color={image ? \"primary\" : \"tertiary\"}\n                  on={image ? \"darkBackground\" : \"lightBackground\"}\n                  onClick={onDismiss}\n                  size=\"sm\"\n                  icon={XIcon}\n                />\n              </Box>\n\n              <Box display=\"flex\" direction=\"column\" width=\"100%\">\n                {image && <Box>{image}</Box>}\n                <Box padding={6}>\n                  <Heading as=\"h1\" size={600} fontStyle=\"serif\">\n                    {header}\n                  </Heading>\n                </Box>\n                <Box\n                  height=\"100%\"\n                  overflowY=\"auto\"\n                  paddingX={6}\n                  marginBottom={footer ? 0 : 6}\n                >\n                  {children}\n                </Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\n                    padding={6}\n                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n"]}
+{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACyBxK,cAiKQ,YAjKR;AAdN,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,GAsEiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC1D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU,UAAU,IAAI;AAAA,UACxB,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\n\nconst sizeWidth = {\n  sm: 600,\n  lg: 600,\n} as const;\n\nfunction XIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n    </svg>\n  );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n  const [showModal, setShowModal] = useState(false)\n\n  return (\n    <>\n      {showModal && <Modal\n        header=\"header text\"\n        onDismiss={() => setShowModal(false)}\n        footer={\n          <>\n            <Button\n              text=\"Cancel\"\n              color=\"secondary\"\n              onClick={() => {}}\n            />\n            <Button\n              text=\"Confirm\"\n              onClick={() => {}}\n            />\n          </>\n        }\n      >\n        <Typography>\n          Body text goes here!\n        </Typography>\n      </Modal> }\n    </>\n  )\n  ```\n */\nexport default function Modal({\n  header,\n  children,\n  image,\n  onDismiss,\n  footer,\n  accessibilityCloseLabel = \"close modal\",\n  size = \"sm\",\n  zIndex = 1,\n  \"data-testid\": dataTestId,\n}: {\n  /**\n   * The modal's main content. Should typically take in `Typography`'d text.\n   */\n  children: JSX.Element;\n  /**\n   * The header inside a modal as a string.\n   */\n  header: string;\n  /**\n   * What the X button (or clicking out of the modal area) does.\n   * Typically used for closing the Modal\n   */\n  onDismiss: () => void;\n  /**\n   * The optional image rendered above the Modal.\n   * Image\n   *  * Size should be 600w x 200h\n   *  * Be sure to set width=\"100%\" on the image\n   * If images aren't that sized, should ask design to give another image.\n   */\n  image?: JSX.Element;\n  /**\n   * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n   * * Use Syntax `Button` and pass it into footer.\n   * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n   * * If two(2) buttons, put primary button _second_.\n   *\n      <>\n        <Button\n          text=\"Cancel\"\n          color=\"secondary\"\n          onClick={() => {}}\n        />\n        <Button\n          text=\"Confirm\"\n          onClick={() => {}}\n        />\n      </>\n   */\n  footer?: JSX.Element;\n  /**\n   * The accessibilty text on the close button.\n   * (Sets the aria-label of the button)\n   *\n   *\n   * @defaultValue close modal\n   */\n  accessibilityCloseLabel?: string;\n  /**\n   * The size of the card\n   * * `sm`: 600px (deprecated)\n   * * `lg`: 600px\n   *\n   *\n   * @defaultValue sm\n   * @deprecated\n   */\n  size?: keyof typeof sizeWidth;\n  /**\n   * The z-index for the modal.\n   * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n  /**\n   * Test id for the modal\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={styles.backdrop}\n            role=\"presentation\"\n            onClick={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"white\"\n              rounding=\"md\"\n              display=\"flex\"\n              marginStart={4}\n              marginEnd={4}\n              marginTop={8}\n              marginBottom={8}\n              minWidth={240}\n              maxHeight=\"calc(100vh - 64px)\"\n              maxWidth={sizeWidth[size]}\n              overflow=\"hidden\"\n              position=\"relative\"\n              width=\"100%\"\n            >\n              <Box\n                position=\"absolute\"\n                dangerouslySetInlineStyle={{\n                  __style: { top: 4, right: 4 },\n                }}\n              >\n                <IconButton\n                  accessibilityLabel={accessibilityCloseLabel}\n                  color={image ? \"primary\" : \"tertiary\"}\n                  on={image ? \"darkBackground\" : \"lightBackground\"}\n                  onClick={onDismiss}\n                  size=\"md\"\n                  icon={XIcon}\n                />\n              </Box>\n\n              <Box display=\"flex\" direction=\"column\" width=\"100%\">\n                {image && <Box>{image}</Box>}\n                <Box padding={6}>\n                  <Heading as=\"h1\" size={600} fontStyle=\"serif\">\n                    {header}\n                  </Heading>\n                </Box>\n                <Box\n                  height=\"100%\"\n                  overflowY=\"auto\"\n                  paddingX={6}\n                  marginBottom={footer ? 0 : 6}\n                >\n                  {children}\n                </Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\n                    padding={6}\n                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n"]}

package/dist/__chunks/{5VHLZADO.cjs → XCSW34UM.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _QAS3KERZcjs = require('./QAS3KERZ.cjs');
+var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
 
 // src/Typography/Typography.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
@@ -15,21 +15,21 @@ var _jsxruntime = require('react/jsx-runtime');
 function textColor(color) {
   switch (color) {
     case "gray700":
-      return _QAS3KERZcjs.colors_module_default.cambioGray800Color;
+      return _QT6IRCGWcjs.colors_module_default.cambioGray800Color;
     case "white":
-      return _QAS3KERZcjs.colors_module_default.cambioWhiteColor;
+      return _QT6IRCGWcjs.colors_module_default.cambioWhiteColor;
     case "inherit":
-      return _QAS3KERZcjs.colors_module_default.inheritColor;
+      return _QT6IRCGWcjs.colors_module_default.inheritColor;
     case "destructive-primary":
-      return _QAS3KERZcjs.colors_module_default.cambioDestructive900Color;
+      return _QT6IRCGWcjs.colors_module_default.cambioDestructive900Color;
     case "destructive-darkBackground":
-      return _QAS3KERZcjs.colors_module_default.cambioDestructive100Color;
+      return _QT6IRCGWcjs.colors_module_default.cambioDestructive100Color;
     case "success":
-      return _QAS3KERZcjs.colors_module_default.cambioSuccess900Color;
+      return _QT6IRCGWcjs.colors_module_default.cambioSuccess900Color;
     case "success-darkBackground":
-      return _QAS3KERZcjs.colors_module_default.cambioSuccess100Color;
+      return _QT6IRCGWcjs.colors_module_default.cambioSuccess100Color;
     default:
-      return _QAS3KERZcjs.colors_module_default.cambioBlackColor;
+      return _QT6IRCGWcjs.colors_module_default.cambioBlackColor;
   }
 }
 function convertWeight(weight) {
@@ -91,4 +91,4 @@ var Typography_default = Typography;
 
 
 exports.Typography_default = Typography_default;
-//# sourceMappingURL=5VHLZADO.cjs.map
+//# sourceMappingURL=XCSW34UM.cjs.map

package/dist/__chunks/{SOZG53ZB.js → XL37HTXI.js}

@@ -4,10 +4,10 @@ import {
 } from "./KKADUD65.js";
 import {
   Typography_default
-} from "./3GNWH6C7.js";
+} from "./YAM7DAOZ.js";
 import {
   colors_module_default
-} from "./B7PDT66P.js";
+} from "./S6TNP7G5.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -114,4 +114,4 @@ var Checkbox_default = Checkbox;
 export {
   Checkbox_default
 };
-//# sourceMappingURL=SOZG53ZB.js.map
+//# sourceMappingURL=XL37HTXI.js.map

package/dist/__chunks/{3GNWH6C7.js → YAM7DAOZ.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   colors_module_default
-} from "./B7PDT66P.js";
+} from "./S6TNP7G5.js";
 
 // src/Typography/Typography.tsx
 import classNames from "classnames";
@@ -91,4 +91,4 @@ var Typography_default = Typography;
 export {
   Typography_default
 };
-//# sourceMappingURL=3GNWH6C7.js.map
+//# sourceMappingURL=YAM7DAOZ.js.map

package/dist/__chunks/{UIPAXBI7.js → YBOF6XGJ.js}

@@ -13,7 +13,7 @@ import {
 } from "./EB7WKQ35.js";
 import {
   colors_module_default
-} from "./B7PDT66P.js";
+} from "./S6TNP7G5.js";
 
 // src/Dialog/Dialog.tsx
 import React, {
@@ -77,4 +77,4 @@ export {
   DialogContext,
   Dialog_default
 };
-//# sourceMappingURL=UIPAXBI7.js.map
+//# sourceMappingURL=YBOF6XGJ.js.map

package/dist/__chunks/{OQE24UY6.js → YF53K6PE.js}

@@ -7,7 +7,7 @@ import {
 } from "./AVREYFSM.js";
 import {
   Typography_default
-} from "./3GNWH6C7.js";
+} from "./YAM7DAOZ.js";
 
 // src/RichSelect/RichSelectSection.tsx
 import { forwardRef } from "react";
@@ -50,4 +50,4 @@ var RichSelectSection_default = forwardRef(
 export {
   RichSelectSection_default
 };
-//# sourceMappingURL=OQE24UY6.js.map
+//# sourceMappingURL=YF53K6PE.js.map

package/dist/__chunks/{TDPIWHGR.cjs → YJI76DU2.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _GNKVDWTScjs = require('./GNKVDWTS.cjs');
+var _N7WA46RLcjs = require('./N7WA46RL.cjs');
 
 
-var _2IHACTOYcjs = require('./2IHACTOY.cjs');
+var _BNBE2XVMcjs = require('./BNBE2XVM.cjs');
 
 
 var _MF7LLV7Vcjs = require('./MF7LLV7V.cjs');
@@ -100,7 +100,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
   } = props;
   const modal = !children || modalProp;
   const modalNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _GNKVDWTScjs.ModalDialog_default,
+    _N7WA46RLcjs.ModalDialog_default,
     {
       accessibilityLabel,
       accessibilityCloseLabel,
@@ -117,7 +117,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
     {
       placement: _LLFHCGRAcjs.syntaxToReactAriaPlacement.call(void 0, placement),
       onChangeContentVisibility,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _2IHACTOYcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _BNBE2XVMcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
     }
   );
   if (!children)
@@ -141,4 +141,4 @@ var Popover_default = Popover;
 
 
 exports.AriaPopover = AriaPopover; exports.Popover_default = Popover_default;
-//# sourceMappingURL=TDPIWHGR.cjs.map
+//# sourceMappingURL=YJI76DU2.cjs.map

package/dist/__chunks/{NLD667Y7.cjs → ZQRUOZFX.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _5VHLZADOcjs = require('./5VHLZADO.cjs');
+var _XCSW34UMcjs = require('./XCSW34UM.cjs');
 
 // src/Heading/Heading.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -28,7 +28,7 @@ var Heading = ({
   size = 500
 }) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _5VHLZADOcjs.Typography_default,
+    _XCSW34UMcjs.Typography_default,
     {
       align,
       as,
@@ -47,4 +47,4 @@ var Heading_default = Heading;
 
 
 exports.Heading_default = Heading_default;
-//# sourceMappingURL=NLD667Y7.cjs.map
+//# sourceMappingURL=ZQRUOZFX.cjs.map

package/dist/colors/backgroundColor.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _T5EA5RPQcjs = require('../__chunks/T5EA5RPQ.cjs');
-require('../__chunks/DTKTTGU5.cjs');
+var _M3PAAPMIcjs = require('../__chunks/M3PAAPMI.cjs');
+require('../__chunks/KZT53ITQ.cjs');
 require('../__chunks/WFVGNGEP.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.backgroundColor = _T5EA5RPQcjs.backgroundColor;
+exports.backgroundColor = _M3PAAPMIcjs.backgroundColor;
 //# sourceMappingURL=backgroundColor.cjs.map