@lightsparkdev/ui 1.0.6 → 1.0.8

package/dist/chunk-KW3JYLRI.cjs

@@ -0,0 +1,233 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/styles/breakpoints.tsx
+var _react = require('@emotion/react');
+var _lodashes = require('lodash-es');
+var _react3 = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var Breakpoints = /* @__PURE__ */ ((Breakpoints2) => {
+  Breakpoints2["sm"] = "sm";
+  Breakpoints2["md"] = "md";
+  Breakpoints2["lg"] = "lg";
+  return Breakpoints2;
+})(Breakpoints || {});
+var breakpoints = {
+  ["sm" /* sm */]: 640,
+  ["md" /* md */]: 834,
+  ["lg" /* lg */]: 1200
+};
+var BreakpointRanges = /* @__PURE__ */ ((BreakpointRanges2) => {
+  BreakpointRanges2["sm"] = "sm";
+  BreakpointRanges2["lg"] = "lg";
+  BreakpointRanges2["minSmMaxMd"] = "minSmMaxMd";
+  BreakpointRanges2["minMdMaxLg"] = "minMdMaxLg";
+  BreakpointRanges2["minSmMaxLg"] = "minSmMaxLg";
+  BreakpointRanges2["maxLg"] = "maxLg";
+  BreakpointRanges2["maxMd"] = "maxMd";
+  BreakpointRanges2["minSm"] = "minSm";
+  BreakpointRanges2["minMd"] = "minMd";
+  return BreakpointRanges2;
+})(BreakpointRanges || {});
+var breakpointFn = (mq) => (style) => `@media ${mq} { ${style} }`;
+var bp = {
+  key: Breakpoints,
+  ["sm" /* sm */]: breakpointFn(`(max-width:${breakpoints.sm}px)`),
+  ["lg" /* lg */]: breakpointFn(`(min-width:${breakpoints.lg}px)`),
+  ["minSmMaxLg" /* minSmMaxLg */]: breakpointFn(
+    `(min-width:${breakpoints.sm + 1}px) and (max-width:${breakpoints.lg - 1}px)`
+  ),
+  ["minSmMaxMd" /* minSmMaxMd */]: breakpointFn(
+    `(min-width:${breakpoints.sm + 1}px) and (max-width:${breakpoints.md - 1}px)`
+  ),
+  ["minMdMaxLg" /* minMdMaxLg */]: breakpointFn(
+    `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 1}px)`
+  ),
+  ["maxLg" /* maxLg */]: breakpointFn(`(max-width:${breakpoints.lg - 1}px)`),
+  ["maxMd" /* maxMd */]: breakpointFn(`(max-width:${breakpoints.md - 1}px)`),
+  ["minSm" /* minSm */]: breakpointFn(`(min-width:${breakpoints.sm + 1}px)`),
+  ["minMd" /* minMd */]: breakpointFn(`(min-width:${breakpoints.md + 1}px)`),
+  current: function(assertBp) {
+    const currentBp = (
+      /* window is undefined in first server side render for Next apps: */
+      typeof window === "undefined" ? "sm" /* sm */ : window.getComputedStyle(document.body, ":before").content.replace(/"/g, "")
+    );
+    if (assertBp) {
+      return inRange(
+        currentBp,
+        assertBp
+      );
+    }
+    return currentBp;
+  },
+  switch: (smVal, minSmMaxMdVal, minMdMaxLgVal, lgVal) => {
+    const currentBp = bp.current();
+    if (currentBp === "sm" /* sm */) {
+      return smVal;
+    } else if (currentBp === "minSmMaxMd" /* minSmMaxMd */) {
+      return minSmMaxMdVal;
+    } else if (currentBp === "minMdMaxLg" /* minMdMaxLg */) {
+      return minMdMaxLgVal;
+    }
+    return lgVal;
+  },
+  isSm: () => bp.current("sm" /* sm */),
+  isMinSm: () => bp.current("minSm" /* minSm */),
+  isMinSmMaxMd: () => bp.current("minSmMaxMd" /* minSmMaxMd */),
+  isMinMdMaxLg: () => bp.current("minMdMaxLg" /* minMdMaxLg */),
+  isLg: () => bp.current("lg" /* lg */)
+};
+function inRange(currentBp, assertBp) {
+  const isSm = currentBp === "sm" /* sm */;
+  const isMinSmMaxMd = currentBp === "minSmMaxMd" /* minSmMaxMd */;
+  const isMinMdMaxLg = currentBp === "minMdMaxLg" /* minMdMaxLg */;
+  const isLg = currentBp === "lg" /* lg */;
+  if (assertBp) {
+    switch (assertBp) {
+      case "sm" /* sm */:
+        return isSm;
+      case "minSmMaxMd" /* minSmMaxMd */:
+        return isMinSmMaxMd;
+      case "minMdMaxLg" /* minMdMaxLg */:
+        return isMinMdMaxLg;
+      case "lg" /* lg */:
+        return isLg;
+      case "minSmMaxLg" /* minSmMaxLg */:
+        return isMinSmMaxMd || isMinMdMaxLg;
+      case "maxLg" /* maxLg */:
+        return isSm || isMinSmMaxMd || isMinMdMaxLg;
+      case "maxMd" /* maxMd */:
+        return isSm || isMinSmMaxMd;
+      case "minSm" /* minSm */:
+        return isMinSmMaxMd || isMinMdMaxLg || isLg;
+      case "minMd" /* minMd */:
+        return isMinMdMaxLg || isLg;
+      default:
+        return false;
+    }
+  }
+  return false;
+}
+function useBreakpoints() {
+  const [currentBp, setCurrentBp] = _react3.useState.call(void 0, bp.current());
+  _react3.useLayoutEffect.call(void 0, () => {
+    const handleResize = () => {
+      const newBp = bp.current();
+      if (newBp !== currentBp) {
+        setCurrentBp(newBp);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("deviceorientation", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("deviceorientation", handleResize);
+    };
+  });
+  return bp;
+}
+function useScreenWidth() {
+  const [screenWidth, setScreenWidth] = _react3.useState.call(void 0, window.innerWidth);
+  _react3.useLayoutEffect.call(void 0, () => {
+    const handleResize = _lodashes.debounce.call(void 0, () => {
+      setScreenWidth(window.innerWidth);
+    }, 200);
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("deviceorientation", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("deviceorientation", handleResize);
+    };
+  });
+  return screenWidth;
+}
+var DisplayBreakpoint = ({
+  sm,
+  minSmMaxMd,
+  minMdMaxLg,
+  lg,
+  maxLg,
+  maxMd,
+  minSm,
+  minMd,
+  cssStr,
+  children
+}) => {
+  const breakpoint = (() => {
+    switch (true) {
+      case sm:
+        return bp.sm;
+      case minSmMaxMd:
+        return bp.minSmMaxMd;
+      case minMdMaxLg:
+        return bp.minMdMaxLg;
+      case lg:
+        return bp.lg;
+      case maxLg:
+        return bp.maxLg;
+      case maxMd:
+        return bp.maxMd;
+      case minSm:
+        return bp.minSm;
+      case minMd:
+        return bp.minMd;
+      default:
+        return bp.sm;
+    }
+  })();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      css: _react.css`
+        display: none;
+        ${breakpoint(`display: block; ${cssStr}`)}
+      `,
+      children
+    }
+  );
+};
+function Breakpoint({
+  sm,
+  minSmMaxMd,
+  minMdMaxLg,
+  lg,
+  maxLg,
+  maxMd,
+  minSm,
+  minMd,
+  children
+}) {
+  const bp2 = useBreakpoints();
+  const shouldRender = (() => {
+    switch (true) {
+      case sm:
+        return bp2.current("sm" /* sm */);
+      case minSmMaxMd:
+        return bp2.current("minSmMaxMd" /* minSmMaxMd */);
+      case minMdMaxLg:
+        return bp2.current("minMdMaxLg" /* minMdMaxLg */);
+      case lg:
+        return bp2.current("lg" /* lg */);
+      case maxLg:
+        return bp2.current("maxLg" /* maxLg */);
+      case maxMd:
+        return bp2.current("maxMd" /* maxMd */);
+      case minSm:
+        return bp2.current("minSm" /* minSm */);
+      case minMd:
+        return bp2.current("minMd" /* minMd */);
+      default:
+        return bp2.current("sm" /* sm */);
+    }
+  })();
+  return shouldRender ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.Fragment, { children }) : null;
+}
+
+
+
+
+
+
+
+
+
+exports.Breakpoints = Breakpoints; exports.BreakpointRanges = BreakpointRanges; exports.bp = bp; exports.useBreakpoints = useBreakpoints; exports.useScreenWidth = useScreenWidth; exports.DisplayBreakpoint = DisplayBreakpoint; exports.Breakpoint = Breakpoint;

package/dist/chunk-LIVPDWXD.cjs

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkMT2C62EDcjs = require('./chunk-MT2C62ED.cjs');
+
+
+var _chunkBY47I7ZPcjs = require('./chunk-BY47I7ZP.cjs');
+
+
+var _chunkWTHHP7G2cjs = require('./chunk-WTHHP7G2.cjs');
+
+// src/components/IconWithCircleBackground.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function IconWithCircleBackground({
+  iconName = "WarningSign"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMT2C62EDcjs.Flex, { center: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledIconWithCircleBackground, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBY47I7ZPcjs.Icon, { name: iconName, width: 40, color: "grayBlue9" }) }) });
+}
+var StyledIconWithCircleBackground = _styled2.default.div`
+  background-color: ${({ theme }) => _chunkWTHHP7G2cjs.getColor.call(void 0, theme, "grayBlue94")};
+  border-radius: 50%;
+  padding: 20px;
+`;
+
+
+
+exports.IconWithCircleBackground = IconWithCircleBackground;

package/dist/chunk-LKKJVJCG.cjs

@@ -0,0 +1,63 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+
+
+
+
+
+
+exports.__spreadValues = __spreadValues; exports.__spreadProps = __spreadProps; exports.__objRest = __objRest; exports.__export = __export; exports.__async = __async;

package/dist/chunk-LLJZ3BRG.cjs

@@ -0,0 +1,50 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/SecurityKey.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function SecurityKey() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 12 13",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "rect",
+          {
+            x: "0.5625",
+            y: "3.3125",
+            width: "8.25",
+            height: "6.375",
+            rx: "0.9375",
+            stroke: "currentColor",
+            strokeWidth: "1.125"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M8.8125 4.8125H10.5C11.0178 4.8125 11.4375 5.23223 11.4375 5.75V7.25C11.4375 7.76777 11.0178 8.1875 10.5 8.1875H8.8125V4.8125Z",
+            stroke: "currentColor",
+            strokeWidth: "1.125"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "rect",
+          {
+            x: "3.75",
+            y: "5.75",
+            width: "2.25",
+            height: "1.5",
+            rx: "0.75",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+
+exports.SecurityKey = SecurityKey;

package/dist/chunk-LLVW7HU4.cjs

@@ -0,0 +1,62 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
+
+
+var _chunkAZRC3MXCcjs = require('./chunk-AZRC3MXC.cjs');
+
+
+var _chunkG5HBO2FIcjs = require('./chunk-G5HBO2FI.cjs');
+
+
+var _chunkZBBVZQKJcjs = require('./chunk-ZBBVZQKJ.cjs');
+
+// src/components/typography/Headline.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var headlineElements = ["h1", "h2", "h3", "h4", "h5", "h6"];
+var Headline = ({
+  block = false,
+  children,
+  color,
+  content,
+  display,
+  heading = "h1",
+  hideOverflow = false,
+  id,
+  size = "Medium"
+}) => {
+  let reactNodes = children || null;
+  if (content) {
+    reactNodes = _chunkAZRC3MXCcjs.toNonTypographicReactNodes.call(void 0, content);
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledHeadline,
+    {
+      as: heading,
+      block,
+      colorProp: color,
+      displayProp: display,
+      hideOverflow,
+      id,
+      size,
+      children: reactNodes
+    }
+  );
+};
+var StyledHeadline = _styled2.default.span`
+  ${({ theme, size, colorProp }) => _chunkZBBVZQKJcjs.applyTypography.call(void 0, theme, "Headline", size, colorProp)}
+  ${_chunkG5HBO2FIcjs.typographyStyles}
+`;
+function headlineSelector(heading) {
+  return `${heading}${_chunk6VA4SAHQcjs.select.call(void 0, StyledHeadline)}`;
+}
+var ALL_HEADLINE_SELECTORS = headlineElements.map(headlineSelector).join(",");
+
+
+
+
+
+
+
+exports.headlineElements = headlineElements; exports.Headline = Headline; exports.StyledHeadline = StyledHeadline; exports.headlineSelector = headlineSelector; exports.ALL_HEADLINE_SELECTORS = ALL_HEADLINE_SELECTORS;

package/dist/chunk-LU2G6KCN.cjs

@@ -0,0 +1,41 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/DotGrid1x3Horizontal.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function DotGrid1x3Horizontal() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { id: "dot-grid-1x3-horizontal, menu, drag, grab", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { id: "Icon", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M4.00001 6.66663H1.33334V9.33329H4.00001V6.66663Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M9.33334 6.66663H6.66668V9.33329H9.33334V6.66663Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M14.6667 6.66663H12V9.33329H14.6667V6.66663Z",
+            fill: "currentColor"
+          }
+        )
+      ] }) })
+    }
+  );
+}
+
+
+
+exports.DotGrid1x3Horizontal = DotGrid1x3Horizontal;

package/dist/chunk-LZ24FX6C.cjs

@@ -0,0 +1,67 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+
+
+var _chunkPYL3O7AFcjs = require('./chunk-PYL3O7AF.cjs');
+
+
+
+var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+
+// src/components/Tooltip.tsx
+var _css = require('@emotion/css');
+var _react = require('@emotion/react');
+var _react3 = require('react'); var _react4 = _interopRequireDefault(_react3);
+var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
+var _reacttooltip = require('react-tooltip');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Tooltip(props) {
+  const nodeRef = _react3.useRef.call(void 0, null);
+  const [nodeReady, setNodeReady] = _react4.default.useState(false);
+  _react3.useEffect.call(void 0, () => {
+    if (!nodeRef.current) {
+      nodeRef.current = document.createElement("div");
+      document.body.appendChild(nodeRef.current);
+    }
+    setNodeReady(true);
+    return () => {
+      if (nodeRef.current) {
+        document.body.removeChild(nodeRef.current);
+        nodeRef.current = null;
+      }
+    };
+  }, []);
+  const theme = _react.useTheme.call(void 0, );
+  return nodeReady && nodeRef.current ? _reactdom2.default.createPortal(
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reacttooltip.Tooltip,
+      _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, props), {
+        id: props.id || "",
+        content: props.content || "",
+        noArrow: true,
+        border: "0.05rem solid rgba(0, 0, 0, 0.1)",
+        className: styles({ theme }),
+        variant: "light"
+      })
+    ),
+    nodeRef.current
+  ) : null;
+}
+var styles = ({ theme }) => _css.css`
+  font-size: "10px";
+  color: ${theme.c8Neutral} !important;
+  border-radius: 8px !important;
+  padding: 16px !important;
+  z-index: ${_chunkZU72XWNEcjs.z.tooltip};
+  ${_chunkPYL3O7AFcjs.overlaySurface.call(void 0, { theme, important: true })};
+
+  max-width: 260px;
+  box-shadow:
+    0px 1px 4px 0px rgba(0, 0, 0, 0.1),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.08) !important;
+`;
+
+
+
+exports.Tooltip = Tooltip;

package/dist/{chunk-EHH4M2LZ.js → chunk-MBZSVLKB.js}

@@ -1,18 +1,18 @@
 import {
   Loading
-} from "./chunk-SIYZ5PZT.js";
+} from "./chunk-RT4SDUU6.js";
 import {
   UnstyledButton
-} from "./chunk-TN5UPDZG.js";
+} from "./chunk-E7RKIBJY.js";
 import {
   flexCenter
-} from "./chunk-D4DFISYR.js";
+} from "./chunk-DNRHVCOE.js";
 import {
   Icon
-} from "./chunk-LAGOF7IU.js";
+} from "./chunk-QQTZ6DZL.js";
 import {
   colors
-} from "./chunk-KPAVY3UH.js";
+} from "./chunk-REL56P3K.js";
 
 // src/components/Pill.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-ILCC45G7.js → chunk-MDAPZY4A.js}

@@ -3,33 +3,33 @@ import {
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-3DXU76SI.js";
+} from "./chunk-TSO4WRU4.js";
 import {
   IconWithCircleBackground
-} from "./chunk-QTPYP3IK.js";
+} from "./chunk-TZN3OW2Q.js";
 import {
   Drawer
-} from "./chunk-QBRCVOJ4.js";
+} from "./chunk-5OIQOVHS.js";
 import {
   toReactNodes
-} from "./chunk-AKGW3FMJ.js";
+} from "./chunk-JZJQOZEN.js";
 import {
   Button,
   ButtonSelector
-} from "./chunk-NK7WH3TK.js";
+} from "./chunk-EJZ3BXS3.js";
 import {
   Body
-} from "./chunk-PBLWYVQF.js";
+} from "./chunk-ZTIL63SE.js";
 import {
   Headline,
   headlineSelector
-} from "./chunk-BNHCCR3C.js";
+} from "./chunk-QU7VRXE6.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   UnstyledButton
-} from "./chunk-TN5UPDZG.js";
+} from "./chunk-E7RKIBJY.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
@@ -38,19 +38,19 @@ import {
 } from "./chunk-E5DUKMCU.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-D4DFISYR.js";
+} from "./chunk-DNRHVCOE.js";
 import {
   Icon
-} from "./chunk-LAGOF7IU.js";
+} from "./chunk-QQTZ6DZL.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-YG5BANJH.js";
+} from "./chunk-APUV4UN4.js";
 import {
   TokenSize
-} from "./chunk-ENBUKLVT.js";
+} from "./chunk-24PXYMSU.js";
 import {
   bp,
   useBreakpoints
@@ -82,6 +82,7 @@ function Modal({
   onSubmit,
   submitDisabled,
   submitLoading,
+  submitLoadingKind,
   submitText,
   submitLink,
   cancelText = "Cancel",
@@ -94,7 +95,8 @@ function Modal({
   progressBar,
   buttonLayout = "horizontal",
   extraActions,
-  handleBack
+  handleBack,
+  appendToElement
 }) {
   const visibleChangedRef = useRef(false);
   const nodeRef = useRef(null);
@@ -114,18 +116,19 @@ function Modal({
   const visibleChanged = visible !== visibleChangedRef.current;
   useEffect(() => {
     prevFocusedElement.current = document.activeElement;
+    const elementToAppendTo = appendToElement != null ? appendToElement : document.body;
     if (!nodeRef.current) {
       nodeRef.current = document.createElement("div");
-      document.body.appendChild(nodeRef.current);
+      elementToAppendTo.appendChild(nodeRef.current);
     }
     setNodeReady(true);
     return () => {
       if (nodeRef.current) {
-        document.body.removeChild(nodeRef.current);
+        elementToAppendTo.removeChild(nodeRef.current);
         nodeRef.current = null;
       }
     };
-  }, []);
+  }, [appendToElement]);
   useEffect(() => {
     const handleOutsideClick = (event) => {
       if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) {
@@ -214,9 +217,10 @@ function Modal({
         disabled: submitDisabled,
         text: submitText != null ? submitText : "Continue",
         loading: submitLoading,
+        loadingKind: submitLoadingKind,
         to: linkIsRoute ? submitLink.to : void 0,
-        href: linkIsHref ? submitLink.href : void 0,
-        hrefFilename: linkIsHref ? submitLink.filename : void 0,
+        externalLink: linkIsHref ? submitLink.href : void 0,
+        filename: linkIsHref ? submitLink.filename : void 0,
         type: submitLink ? "button" : "submit",
         onClick: submitLink ? onSubmit : void 0
       }