@lightsparkdev/ui 1.0.12 → 1.0.14

package/dist/{chunk-JVEEX5WK.cjs → chunk-VZRQZIUV.cjs}

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkTETFIMNOcjs = require('./chunk-TETFIMNO.cjs');
+var _chunkNSUGNTKScjs = require('./chunk-NSUGNTKS.cjs');
 
 
-var _chunkCBPXRCT4cjs = require('./chunk-CBPXRCT4.cjs');
+var _chunkKTXJ54RRcjs = require('./chunk-KTXJ54RR.cjs');
 
 
 
-var _chunkC6XJ7ZJFcjs = require('./chunk-C6XJ7ZJF.cjs');
+var _chunkCUOCAP4Wcjs = require('./chunk-CUOCAP4W.cjs');
 
 
-var _chunkSZKZWADNcjs = require('./chunk-SZKZWADN.cjs');
+var _chunkBP7JY5RTcjs = require('./chunk-BP7JY5RT.cjs');
 
 // src/components/PendingValue.tsx
 var _react = require('@emotion/react');
@@ -46,11 +46,11 @@ function PendingValue({
     currencyAmount: defaultTypography,
     clipboardTextField: defaultTypography
   };
-  const nodesWithTypography = _chunkTETFIMNOcjs.setDefaultReactNodesTypography.call(void 0, 
+  const nodesWithTypography = _chunkNSUGNTKScjs.setDefaultReactNodesTypography.call(void 0, 
     contentProp,
     defaultTypographyMap
   );
-  const content = _chunkCBPXRCT4cjs.toReactNodes.call(void 0, nodesWithTypography);
+  const content = _chunkKTXJ54RRcjs.toReactNodes.call(void 0, nodesWithTypography);
   const contentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     StyledPendingValueContent,
     {
@@ -83,11 +83,11 @@ function PendingValue({
     ),
     fullSizePending ? contentNode : null
   ] });
-  return forceTheme ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.ThemeProvider, { theme: _chunkC6XJ7ZJFcjs.themes[forceTheme], children: nodes }) : nodes;
+  return forceTheme ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.ThemeProvider, { theme: _chunkCUOCAP4Wcjs.themes[forceTheme], children: nodes }) : nodes;
 }
 var StyledPendingValueBgOuter = _styled2.default.div`
   position: relative;
-  height: ${({ typographyType, typographySize, theme }) => _chunkSZKZWADNcjs.getLineHeightForTypographyType.call(void 0, typographyType, typographySize, theme)};
+  height: ${({ typographyType, typographySize, theme }) => _chunkBP7JY5RTcjs.getLineHeightForTypographyType.call(void 0, typographyType, typographySize, theme)};
 
   ${({ widthProp, hasContent }) => widthProp && !hasContent ? `width: ${widthProp}px;` : "width: 100%;"}
   overflow: hidden;
@@ -113,7 +113,7 @@ var StyledPendingValueContent = _styled2.default.div`
   z-index: 1;
   overflow: hidden;
 
-  height: ${({ typographyType, typographySize, theme }) => _chunkSZKZWADNcjs.getLineHeightForTypographyType.call(void 0, typographyType, typographySize, theme)};
+  height: ${({ typographyType, typographySize, theme }) => _chunkBP7JY5RTcjs.getLineHeightForTypographyType.call(void 0, typographyType, typographySize, theme)};
 `;
 var vSpacing = 2;
 var StyledPendingValueBg = _styled2.default.div`
@@ -139,9 +139,9 @@ var StyledPendingValueBg = _styled2.default.div`
 
   background: linear-gradient(
     90deg,
-    ${_chunkC6XJ7ZJFcjs.themeOrWithKey.call(void 0, "c05Neutral", "c25Neutral")} 0%,
-    ${_chunkC6XJ7ZJFcjs.themeOrWithKey.call(void 0, "c1Neutral", "c3Neutral")} 50%,
-    ${_chunkC6XJ7ZJFcjs.themeOrWithKey.call(void 0, "c05Neutral", "c25Neutral")} 100%
+    ${_chunkCUOCAP4Wcjs.themeOrWithKey.call(void 0, "c05Neutral", "c25Neutral")} 0%,
+    ${_chunkCUOCAP4Wcjs.themeOrWithKey.call(void 0, "c1Neutral", "c3Neutral")} 50%,
+    ${_chunkCUOCAP4Wcjs.themeOrWithKey.call(void 0, "c05Neutral", "c25Neutral")} 100%
   );
 
   background-size: 200% 100%;

package/dist/{chunk-RHWR2O34.js → chunk-WFPQQOTV.js}

@@ -1,9 +1,9 @@
 import {
   Filter
-} from "./chunk-HRNYKB2C.js";
+} from "./chunk-UNZTDJ63.js";
 import {
   Radio
-} from "./chunk-7LDS4SRD.js";
+} from "./chunk-BD7HXDLN.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-AZALJITU.js → chunk-WHVL4GU5.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-SOGADTSR.js";
+} from "./chunk-3NZOR3KT.js";
 import {
   StyledDisplay,
   getPropDefaults
-} from "./chunk-UCTTDHY6.js";
+} from "./chunk-RUM5LV7O.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-AIJ4JHXB.cjs → chunk-WIIDMFXR.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkSWQDRB3Acjs = require('./chunk-SWQDRB3A.cjs');
+var _chunkRUDXRW4Rcjs = require('./chunk-RUDXRW4R.cjs');
 
 // src/styles/utils.tsx
 var _react = require('@emotion/react');
 function pxToRems(rems, asNum = false) {
-  const value = (rems / _chunkSWQDRB3Acjs.rootFontSizePx).toFixed(6);
+  const value = (rems / _chunkRUDXRW4Rcjs.rootFontSizePx).toFixed(6);
   return asNum ? Number(value) : `${value}rem`;
 }
 function remsToPx(rems, asNum = false) {
-  const value = (_chunkSWQDRB3Acjs.rootFontSizePx * rems).toFixed(6);
+  const value = (_chunkRUDXRW4Rcjs.rootFontSizePx * rems).toFixed(6);
   return asNum ? Number(value) : `${value}px`;
 }
 var extend = (...args) => _react.css.call(void 0, ...args);

package/dist/{chunk-YHCTFSBK.cjs → chunk-WLNH323O.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkHLDOB52Acjs = require('./chunk-HLDOB52A.cjs');
+var _chunk22OKXUZAcjs = require('./chunk-22OKXUZA.cjs');
 
 
 var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunkGLSWZ36Ycjs = require('./chunk-GLSWZ36Y.cjs');
+var _chunkOEJWIKG7cjs = require('./chunk-OEJWIKG7.cjs');
 
 
-var _chunkIBPPT3NUcjs = require('./chunk-IBPPT3NU.cjs');
+var _chunkRSAWZM47cjs = require('./chunk-RSAWZM47.cjs');
 
 
 
@@ -82,7 +82,7 @@ var IdFilter = ({
   };
   const appliedValueButtons = (_a = state.appliedValues) == null ? void 0 : _a.map((value) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkIBPPT3NUcjs.Button,
+      _chunkRSAWZM47cjs.Button,
       {
         kind: "primary",
         size: "ExtraSmall",
@@ -102,8 +102,8 @@ var IdFilter = ({
     );
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHLDOB52Acjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkGLSWZ36Ycjs.TextInput,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22OKXUZAcjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkOEJWIKG7cjs.TextInput,
       {
         placeholder: placeholder || "",
         onChange: handleChange,

package/dist/chunk-WZ7YBRQW.js

@@ -0,0 +1,27 @@
+// src/icons/ChevronRight.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function ChevronRight() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 9 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M1.5 1.33333L7.57742 7.41075C7.90283 7.73617 7.90283 8.26383 7.57742 8.58925L1.5 14.6667",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  ChevronRight
+};

package/dist/{chunk-AL5EN3OS.cjs → chunk-X6FYQTZ6.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkQWXH7CSVcjs = require('./chunk-QWXH7CSV.cjs');
+var _chunkQ4RAJLKPcjs = require('./chunk-Q4RAJLKP.cjs');
 
 
-var _chunkCBPXRCT4cjs = require('./chunk-CBPXRCT4.cjs');
+var _chunkKTXJ54RRcjs = require('./chunk-KTXJ54RR.cjs');
 
 
-var _chunkRROZ5XYPcjs = require('./chunk-RROZ5XYP.cjs');
+var _chunkZFJVBBROcjs = require('./chunk-ZFJVBBRO.cjs');
 
 // src/components/InfoIconTooltip.tsx
 var _react = require('react');
@@ -16,17 +16,17 @@ function InfoIconTooltip({
   content,
   verticalAlign = "middle"
 }) {
-  const contentNodes = _chunkCBPXRCT4cjs.toReactNodes.call(void 0, content);
+  const contentNodes = _chunkKTXJ54RRcjs.toReactNodes.call(void 0, content);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
         "data-tooltip-id": id,
         style: { display: "inline-flex", alignItems: "center", verticalAlign },
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: "Info", width: 12, ml: 4 })
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: "Info", width: 12, ml: 4 })
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWXH7CSVcjs.Tooltip, { id, render: () => contentNodes, clickable: true })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ4RAJLKPcjs.Tooltip, { id, render: () => contentNodes, clickable: true })
   ] });
 }
 

package/dist/{chunk-CIPNSK37.js → chunk-XADWD755.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-55OQPFLF.js";
 import {
   overlaySurface
-} from "./chunk-4H7CTVLY.js";
+} from "./chunk-RNCUEVKR.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-XTOBN7SG.js → chunk-XBZNPA3L.js}

@@ -1,9 +1,9 @@
 import {
   getFontColor
-} from "./chunk-HCKCJR5Y.js";
+} from "./chunk-QNPCRFUV.js";
 import {
   getTypographyString
-} from "./chunk-AZSSORPU.js";
+} from "./chunk-EWNQ3Z3L.js";
 
 // src/styles/typography.tsx
 var applyTypography = (theme, typographyType, size, color = "inherit", applyToAll = true) => {

package/dist/{chunk-24B3POUB.js → chunk-XDZPMJZG.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-OFZVJPBJ.js";
+} from "./chunk-RMZQSXO2.js";
 
 // src/components/Loading.tsx
 import { useTheme } from "@emotion/react";

package/dist/{chunk-Y3PPLR3S.cjs → chunk-XPY4BBIM.cjs}

@@ -1,60 +1,51 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkB5GAL6FTcjs = require('./chunk-B5GAL6FT.cjs');
-
-
 var _chunkGSYM5JMBcjs = require('./chunk-GSYM5JMB.cjs');
 
 
-var _chunkLEM2VWU3cjs = require('./chunk-LEM2VWU3.cjs');
+var _chunkOEDOWIS6cjs = require('./chunk-OEDOWIS6.cjs');
 
 
-var _chunkXAODBL4Dcjs = require('./chunk-XAODBL4D.cjs');
+var _chunkXY4F2W3Jcjs = require('./chunk-XY4F2W3J.cjs');
 
 
-var _chunkZ7RV7ITMcjs = require('./chunk-Z7RV7ITM.cjs');
+var _chunkGMN76DHFcjs = require('./chunk-GMN76DHF.cjs');
 
 
 var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
 
-var _chunkIBPPT3NUcjs = require('./chunk-IBPPT3NU.cjs');
+var _chunkRSAWZM47cjs = require('./chunk-RSAWZM47.cjs');
 
 
-var _chunkGMVP3EYXcjs = require('./chunk-GMVP3EYX.cjs');
+var _chunkXRNCL5CAcjs = require('./chunk-XRNCL5CA.cjs');
 
 
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkTETFIMNOcjs = require('./chunk-TETFIMNO.cjs');
-
+var _chunkNSUGNTKScjs = require('./chunk-NSUGNTKS.cjs');
 
-var _chunkCBPXRCT4cjs = require('./chunk-CBPXRCT4.cjs');
 
+var _chunkKTXJ54RRcjs = require('./chunk-KTXJ54RR.cjs');
 
-var _chunkAIJ4JHXBcjs = require('./chunk-AIJ4JHXB.cjs');
 
+var _chunkWIIDMFXRcjs = require('./chunk-WIIDMFXR.cjs');
 
-var _chunkRROZ5XYPcjs = require('./chunk-RROZ5XYP.cjs');
 
+var _chunkZFJVBBROcjs = require('./chunk-ZFJVBBRO.cjs');
 
 
 
 
-var _chunkSWQDRB3Acjs = require('./chunk-SWQDRB3A.cjs');
 
-
-var _chunkTP3PDGQBcjs = require('./chunk-TP3PDGQB.cjs');
+var _chunkRUDXRW4Rcjs = require('./chunk-RUDXRW4R.cjs');
 
 
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
 
 
-var _chunkSZKZWADNcjs = require('./chunk-SZKZWADN.cjs');
-
-
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
@@ -98,7 +89,9 @@ function Modal({
   buttonLayout = "horizontal",
   extraActions,
   handleBack,
-  appendToElement
+  appendToElement,
+  bottomContent,
+  topLeftIcon
 }) {
   const visibleChangedRef = _react.useRef.call(void 0, false);
   const nodeRef = _react.useRef.call(void 0, null);
@@ -202,10 +195,10 @@ function Modal({
   const buttonContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
       var _b = _a, { placement, text } = _b, rest = _chunkYM5JDZDQcjs.__objRest.call(void 0, _b, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIBPPT3NUcjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRSAWZM47cjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     }),
     !isSm && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkIBPPT3NUcjs.Button,
+      _chunkRSAWZM47cjs.Button,
       {
         disabled: cancelDisabled,
         onClick: onClickCancel,
@@ -213,7 +206,7 @@ function Modal({
       }
     ),
     (onSubmit || submitLink) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkIBPPT3NUcjs.Button,
+      _chunkRSAWZM47cjs.Button,
       {
         kind: "primary",
         disabled: submitDisabled,
@@ -227,10 +220,10 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIBPPT3NUcjs.Button, { onClick: onClose, text: cancelText }),
+    isSm && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRSAWZM47cjs.Button, { onClick: onClose, text: cancelText }),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
       var _d = _c, { placement, text } = _d, rest = _chunkYM5JDZDQcjs.__objRest.call(void 0, _d, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIBPPT3NUcjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRSAWZM47cjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     })
   ] });
   let titleContent = null;
@@ -238,28 +231,32 @@ function Modal({
     const defaultTypography = {
       type: "Headline",
       heading: "h4",
-      size: _chunkSZKZWADNcjs.TokenSize.Small
+      size: "Small"
     };
-    const titleNodesWithTypography = _chunkTETFIMNOcjs.setDefaultReactNodesTypography.call(void 0, title, {
+    const titleNodesWithTypography = _chunkNSUGNTKScjs.setDefaultReactNodesTypography.call(void 0, title, {
       default: defaultTypography
     });
-    titleContent = _chunkCBPXRCT4cjs.toReactNodes.call(void 0, titleNodesWithTypography);
+    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunkKTXJ54RRcjs.toReactNodes.call(void 0, titleNodesWithTypography) });
   }
   let descriptionContent = null;
   if (description) {
-    if (typeof description === "string") {
-      descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB5GAL6FTcjs.Body, { size: "ExtraSmall", content: description }) });
-    } else {
-      descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { children: _chunkCBPXRCT4cjs.toReactNodes.call(void 0, description) });
-    }
+    const defaultTypography = {
+      type: "Body",
+      size: "ExtraSmall"
+    };
+    const descriptionNodesWithTypography = _chunkNSUGNTKScjs.setDefaultReactNodesTypography.call(void 0, 
+      description,
+      { default: defaultTypography }
+    );
+    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunkKTXJ54RRcjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
   }
   let topContentNode = null;
   if (topContent) {
-    topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ7RV7ITMcjs.IconWithCircleBackground, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, topContent)) });
+    topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGMN76DHFcjs.IconWithCircleBackground, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, topContent)) });
   }
   const modalContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     progressBar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkLEM2VWU3cjs.ProgressBar,
+      _chunkOEDOWIS6cjs.ProgressBar,
       {
         progressPercentage: progressBar.progressPercentage,
         isSm: progressBar.isSm
@@ -274,7 +271,7 @@ function Modal({
   let content;
   if (smKind === "drawer" && isSm) {
     content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkXAODBL4Dcjs.Drawer,
+      _chunkXY4F2W3Jcjs.Drawer,
       {
         onClose: () => onClickCloseButton(),
         closeButton: true,
@@ -294,14 +291,15 @@ function Modal({
           tabIndex: -1,
           role: "dialog",
           ref: modalContainerRef,
-          top: top || (smKind === "default" ? _chunkSWQDRB3Acjs.standardContentInset.smPx : 0),
+          top: top || (smKind === "default" ? _chunkRUDXRW4Rcjs.standardContentInset.smPx : 0),
           children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalContent, { width, ghost, smKind, children: [
             !firstFocusRef && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
             !ghost && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalNavigation, { children: [
-              handleBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: "ChevronLeft", width: 16 }) }),
-              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: "Close", width: 9 }) })
+              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, topLeftIcon)) : null,
+              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: "Close", width: 9 }) })
             ] }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContentInner, { ghost, children: modalContent })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContentInner, { ghost, children: modalContent }),
+            bottomContent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "auto" }, children: bottomContent })
           ] })
         }
       )
@@ -312,7 +310,7 @@ function Modal({
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = _styled2.default.call(void 0, _chunkGMVP3EYXcjs.UnstyledButton)`
+var DefaultFocusTarget = _styled2.default.call(void 0, _chunkXRNCL5CAcjs.UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
@@ -345,7 +343,7 @@ var ModalContainer = _styled2.default.div`
   ${(props) => `top: ${props.top}px;`}
 `;
 var contentTopMarginPx = 24;
-var Description = _styled2.default.div`
+var ModalDescription = _styled2.default.div`
   color: ${({ theme }) => theme.mcNeutral};
   margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
   & + * {
@@ -357,7 +355,7 @@ var ModalButtonRow = _styled2.default.div`
   ${_chunkKW3JYLRIcjs.bp.minSm(`display: flex;`)}
   gap: 10px;
 
-  ${_chunkIBPPT3NUcjs.ButtonSelector.call(void 0, )} {
+  ${_chunkRSAWZM47cjs.ButtonSelector.call(void 0, )} {
     width: 50%;
     ${_chunkKW3JYLRIcjs.bp.sm(`
       width: 100%;
@@ -369,56 +367,57 @@ var ModalButtonColumn = _styled2.default.div`
   flex-direction: column;
   gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
 
-  ${_chunkIBPPT3NUcjs.ButtonSelector.call(void 0, )} {
+  ${_chunkRSAWZM47cjs.ButtonSelector.call(void 0, )} {
     width: 100%;
   }
 
   margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.lg};
 `;
+var ModalTitle = _styled2.default.div`
+  margin: 0;
+  & + *:not(${_chunk6VA4SAHQcjs.select.call(void 0, ModalDescription)}) {
+    margin-top: ${contentTopMarginPx}px;
+  }
+`;
 var ModalContent = _styled2.default.div`
   pointer-events: auto;
   transition: width 0.25s ease-in;
 
-  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkSWQDRB3Acjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
+  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkRUDXRW4Rcjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
 
-  ${_chunkAIJ4JHXBcjs.overflowAutoWithoutScrollbars}
-  ${_chunkSWQDRB3Acjs.standardContentInset.smCSS.styles}
+  ${_chunkWIIDMFXRcjs.overflowAutoWithoutScrollbars}
+  ${_chunkRUDXRW4Rcjs.standardContentInset.smCSS.styles}
   max-width: 100%;
   max-height: 100%;
   position: absolute;
+  display: flex;
+  flex-direction: column;
 
   ${({ ghost, width }) => `
-    ${ghost ? "" : _chunkSWQDRB3Acjs.standardBorderRadius.call(void 0, 16)}
+    ${ghost ? "" : _chunkRUDXRW4Rcjs.standardBorderRadius.call(void 0, 16)}
     width: ${width}px;
   `}
 
   ${({ smKind }) => smKind === "fullscreen" ? _chunkKW3JYLRIcjs.bp.sm(`
           width: 100%;
-          height: 100%;
+          height: 100dvh;
         `) : ""}
 
   ${({ ghost }) => ghost ? "" : "padding: 16px 16px 40px;"}
-
-  ${_chunkTP3PDGQBcjs.headlineSelector.call(void 0, "h4")} {
-    margin: 0;
-    & + *:not(${_chunk6VA4SAHQcjs.select.call(void 0, Description)}) {
-      margin-top: ${contentTopMarginPx}px;
-    }
-  }
 `;
 var ModalNavigation = _styled2.default.div`
   display: grid;
   grid-auto-flow: column;
   width: 100%;
 `;
-var BackButton = _styled2.default.call(void 0, _chunkGMVP3EYXcjs.UnstyledButton)`
-  ${_chunkSWQDRB3Acjs.standardFocusOutline}
+var BackButton = _styled2.default.call(void 0, _chunkXRNCL5CAcjs.UnstyledButton)`
+  ${_chunkRUDXRW4Rcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-start;
 `;
-var CloseButton = _styled2.default.call(void 0, _chunkGMVP3EYXcjs.UnstyledButton)`
-  ${_chunkSWQDRB3Acjs.standardFocusOutline}
+var CloseButton = _styled2.default.call(void 0, _chunkXRNCL5CAcjs.UnstyledButton)`
+  ${_chunkRUDXRW4Rcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-end;

package/dist/{chunk-GMVP3EYX.cjs → chunk-XRNCL5CA.cjs}

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkSWQDRB3Acjs = require('./chunk-SWQDRB3A.cjs');
+var _chunkRUDXRW4Rcjs = require('./chunk-RUDXRW4R.cjs');
 
 // src/components/UnstyledButton.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
 var UnstyledButton = _styled2.default.button`
-  ${_chunkSWQDRB3Acjs.standardFocusOutline}
+  ${_chunkRUDXRW4Rcjs.standardFocusOutline}
   font-family: ${({ theme }) => theme.typography.fontFamilies.main};
   appearance: none;
   background: transparent;

package/dist/{chunk-IM5HCKLR.cjs → chunk-XSA2JR7B.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkGMVP3EYXcjs = require('./chunk-GMVP3EYX.cjs');
+var _chunkXRNCL5CAcjs = require('./chunk-XRNCL5CA.cjs');
 
 
-var _chunkQWXH7CSVcjs = require('./chunk-QWXH7CSV.cjs');
+var _chunkQ4RAJLKPcjs = require('./chunk-Q4RAJLKP.cjs');
 
 
-var _chunkRROZ5XYPcjs = require('./chunk-RROZ5XYP.cjs');
+var _chunkZFJVBBROcjs = require('./chunk-ZFJVBBRO.cjs');
 
 
 var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
@@ -45,12 +45,12 @@ var CopyToClipboardButton = (props) => {
         "data-tooltip-id": id,
         children: [
           props.children ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Children, { children: props.children }) : null,
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: icon, width: props.isSm ? 12 : 16 })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: icon, width: props.isSm ? 12 : 16 })
         ]
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkQWXH7CSVcjs.Tooltip,
+      _chunkQ4RAJLKPcjs.Tooltip,
       {
         id,
         place: props.place || "right",
@@ -62,7 +62,7 @@ var CopyToClipboardButton = (props) => {
 var Children = _styled2.default.span`
   margin-right: 4px;
 `;
-var Button = _styled2.default.call(void 0, _chunkGMVP3EYXcjs.UnstyledButton)`
+var Button = _styled2.default.call(void 0, _chunkXRNCL5CAcjs.UnstyledButton)`
   background: rgba(0, 0, 0, 0);
   vertical-align: middle;
   ${({ ml }) => ml ? `margin-left: ${ml}px` : ""};

package/dist/{chunk-TDSGZFCT.js → chunk-XX7OUXWU.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-E5DUKMCU.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-AV62WHL7.js";
+} from "./chunk-A4MP3LYH.js";
 import {
   Icon
-} from "./chunk-OFZVJPBJ.js";
+} from "./chunk-RMZQSXO2.js";
 import {
   standardBorderRadius
-} from "./chunk-4H7CTVLY.js";
+} from "./chunk-RNCUEVKR.js";
 
 // src/components/Collapsible.tsx
 import styled from "@emotion/styled";