@lightsparkdev/ui 1.0.13 → 1.0.15

package/dist/{chunk-4CC2CDQS.js → chunk-MFI3RQCO.js}

@@ -1,12 +1,18 @@
+import {
+  Modal
+} from "./chunk-MZ3KQKYQ.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
 import {
   Button
-} from "./chunk-4U3AAKMA.js";
+} from "./chunk-G375DUHZ.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  useBreakpoints
+} from "./chunk-JSGRNWSB.js";
 
 // src/components/DataManagerTable/Popover.tsx
 import styled from "@emotion/styled";
@@ -19,6 +25,8 @@ var Popover = ({
   onClear,
   children
 }) => {
+  const breakPoint = useBreakpoints();
+  const isSm = breakPoint.isSm();
   const handleApply = () => {
     onApply();
   };
@@ -30,7 +38,7 @@ var Popover = ({
       onApply();
     }
   };
-  return /* @__PURE__ */ jsx(Container, { show, side, onKeyDownCapture: handleKeyPress, children: /* @__PURE__ */ jsxs(Content, { children: [
+  const content = /* @__PURE__ */ jsxs(Content, { onKeyDownCapture: handleKeyPress, isSm, children: [
     children,
     /* @__PURE__ */ jsxs(Footer, { children: [
       /* @__PURE__ */ jsx(Button, { text: "Clear", onClick: handleClear }),
@@ -39,7 +47,11 @@ var Popover = ({
         /* @__PURE__ */ jsx(Button, { text: "Apply", kind: "primary", onClick: handleApply })
       ] })
     ] })
-  ] }) });
+  ] });
+  if (isSm) {
+    return /* @__PURE__ */ jsx(Modal, { visible: show, onClose: () => setShow(false), smKind: "fullscreen", children: content });
+  }
+  return /* @__PURE__ */ jsx(Container, { show, side, children: content });
 };
 var Container = styled.div`
   position: absolute;
@@ -59,7 +71,7 @@ var Content = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${Spacing.px.xl};
-  padding: ${Spacing.px.lg};
+  padding: ${({ isSm }) => isSm ? "0px" : Spacing.px.lg};
 `;
 var Footer = styled.div`
   display: flex;

package/dist/{chunk-6DCFPU4Z.js → chunk-MLS3KDG2.js}

@@ -1,6 +1,6 @@
 import {
   LabelModerate
-} from "./chunk-XKCJPDD3.js";
+} from "./chunk-TOCKIUUP.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";

package/dist/{chunk-XHATKRJR.js → chunk-MOUKNHUZ.js}

@@ -1,15 +1,15 @@
 import {
   Flex
-} from "./chunk-5SJB7TBQ.js";
+} from "./chunk-RMOWWR6C.js";
 import {
   Icon
-} from "./chunk-DV6LJQJW.js";
+} from "./chunk-NXAP7SVM.js";
 import {
   Link
-} from "./chunk-7VQUG3NG.js";
+} from "./chunk-FD6VC3VV.js";
 import {
   getColor
-} from "./chunk-N4C6SL6K.js";
+} from "./chunk-ZNDP2XLL.js";
 
 // src/components/IconWithCircleBackground.tsx
 import styled from "@emotion/styled";
@@ -20,28 +20,41 @@ function IconWithCircleBackground({
   to,
   onClick,
   darkBg = false,
-  shouldRotate = false
+  shouldRotate = false,
+  noBg = false,
+  disabled = false
 }) {
-  const content = /* @__PURE__ */ jsx(Flex, { center: true, onClick, children: /* @__PURE__ */ jsx(
-    StyledIconWithCircleBackground,
+  const content = /* @__PURE__ */ jsx(
+    Flex,
     {
-      size: iconWidth,
-      darkBg,
-      shouldRotate,
+      center: true,
+      onClick,
+      disabled,
+      as: onClick ? "button" : "div",
+      asButtonType: "button",
       children: /* @__PURE__ */ jsx(
-        Icon,
+        StyledIconWithCircleBackground,
         {
-          name: iconName,
-          width: iconWidth,
-          color: darkBg ? "white" : "grayBlue9"
+          size: iconWidth,
+          darkBg,
+          shouldRotate,
+          noBg,
+          children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: iconName,
+              width: iconWidth,
+              color: darkBg ? "white" : "grayBlue9"
+            }
+          )
         }
       )
     }
-  ) });
-  return to ? /* @__PURE__ */ jsx(Link, { to, children: content }) : content;
+  );
+  return to ? /* @__PURE__ */ jsx("div", { css: { cursor: disabled ? "not-allowed" : void 0 }, children: /* @__PURE__ */ jsx(Link, { to, disabled, children: content }) }) : content;
 }
 var StyledIconWithCircleBackground = styled.div`
-  background: ${({ theme, darkBg }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : getColor(theme, "grayBlue94")};
+  background: ${({ theme, darkBg, noBg }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : noBg ? "transparent" : getColor(theme, "grayBlue94")};
   border-radius: 50%;
   padding: ${({ size }) => getPadding(size)}px;
   display: flex;

package/dist/chunk-MOVTJ54D.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/ChevronDown.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ChevronDown({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 11 6",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M1.5 1L5.5 5L9.5 1",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.ChevronDown = ChevronDown;

package/dist/chunk-MQ5NPZ6A.js

@@ -0,0 +1,28 @@
+// src/icons/MessageBubble.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function MessageBubble() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12.7096 8.125H7.29297M10.2096 11.875H7.29297M2.29297 16.875H13.543C15.8441 16.875 17.7096 15.0095 17.7096 12.7083V7.29167C17.7096 4.99048 15.8441 3.125 13.543 3.125H6.45964C4.15845 3.125 2.29297 4.99048 2.29297 7.29167V16.875Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  MessageBubble
+};

package/dist/{chunk-NNYCLSJV.js → chunk-MS4Y7HXG.js}

@@ -15,7 +15,7 @@ var GRANULARITY_TO_MILLIS = {
   ["days" /* Days */]: DAY
 };
 var MAX_DATE = /* @__PURE__ */ new Date("3000-01-01");
-var MIN_DATE = /* @__PURE__ */ new Date("1900-01-01");
+var MIN_DATE = /* @__PURE__ */ new Date("1970-01-01");
 var subtractTime = (date, value, granularity) => {
   return new Date(date.getTime() - value * GRANULARITY_TO_MILLIS[granularity]);
 };

package/dist/{chunk-KPH4MQZB.cjs → chunk-MSMZV4YO.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkRR7I375Bcjs = require('./chunk-RR7I375B.cjs');
+var _chunkOTRONETAcjs = require('./chunk-OTRONETA.cjs');
 
 
 
@@ -9,29 +9,29 @@ var _chunkRR7I375Bcjs = require('./chunk-RR7I375B.cjs');
 
 
 
-var _chunkSL7GOUXJcjs = require('./chunk-SL7GOUXJ.cjs');
+var _chunkFBWTYGYEcjs = require('./chunk-FBWTYGYE.cjs');
 
 
-var _chunkQTRXP6AUcjs = require('./chunk-QTRXP6AU.cjs');
+var _chunk23ILZ66Fcjs = require('./chunk-23ILZ66F.cjs');
 
 
-var _chunkAKDCK7LTcjs = require('./chunk-AKDCK7LT.cjs');
+var _chunkSWGCDNBIcjs = require('./chunk-SWGCDNBI.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+var _chunkJYUEWB2Ocjs = require('./chunk-JYUEWB2O.cjs');
 
 
-var _chunk3NRRDBJNcjs = require('./chunk-3NRRDBJN.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunkQ2CWG22Bcjs = require('./chunk-Q2CWG22B.cjs');
+var _chunkVXRUJP4Qcjs = require('./chunk-VXRUJP4Q.cjs');
 
 
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
 
-var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
 
 // src/components/DataManagerTable/DateFilter.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -72,7 +72,7 @@ var DateFilter = ({
   }, [state]);
   const updateStateWithCustomRange = (customDateRangeData2) => {
     setCustomDateRangeData(customDateRangeData2);
-    updateFilterState(_chunkYM5JDZDQcjs.__spreadValues.call(void 0, {
+    updateFilterState(_chunkZ6EUSUADcjs.__spreadValues.call(void 0, {
       type: "date" /* DATE */,
       preset: "Custom" /* Custom */,
       isApplied: true,
@@ -92,13 +92,13 @@ var DateFilter = ({
       getRangeData: (data) => {
         const { value, granularity } = data;
         return {
-          start: _chunkSL7GOUXJcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), value, granularity),
+          start: _chunkFBWTYGYEcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), value, granularity),
           end: /* @__PURE__ */ new Date()
         };
       },
       components: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TimeAndGranularity, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk3NRRDBJNcjs.TextInput,
+          _chunkJYUEWB2Ocjs.TextInput,
           {
             placeholder: "60",
             onChange: (value) => {
@@ -112,19 +112,19 @@ var DateFilter = ({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkAKDCK7LTcjs.Select_default,
+          _chunkSWGCDNBIcjs.Select_default,
           {
             defaultValue: {
               value: customDateRangeData == null ? void 0 : customDateRangeData.granularity,
               label: customDateRangeData == null ? void 0 : customDateRangeData.granularity
             },
-            options: Object.values(_chunkSL7GOUXJcjs.TimeGranularity).map((timeGranularity) => ({
+            options: Object.values(_chunkFBWTYGYEcjs.TimeGranularity).map((timeGranularity) => ({
               value: timeGranularity,
               label: timeGranularity
             })),
             onChange: (option) => {
               if (option) {
-                updateStateWithCustomRange(_chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, customDateRangeData), {
+                updateStateWithCustomRange(_chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, customDateRangeData), {
                   granularity: option.value
                 }));
               }
@@ -139,10 +139,10 @@ var DateFilter = ({
       defaultData: { type: "is equal to" /* IsEqualTo */, date: /* @__PURE__ */ new Date() },
       getRangeData: (data) => {
         const { date } = data;
-        return { start: _chunkSL7GOUXJcjs.startOfDay.call(void 0, date), end: _chunkSL7GOUXJcjs.endOfDay.call(void 0, date) };
+        return { start: _chunkFBWTYGYEcjs.startOfDay.call(void 0, date), end: _chunkFBWTYGYEcjs.endOfDay.call(void 0, date) };
       },
       components: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkRR7I375Bcjs.DateWidget,
+        _chunkOTRONETAcjs.DateWidget,
         {
           dateRangeOperation: "is equal to" /* IsEqualTo */,
           onChange: updateStateWithCustomRange,
@@ -154,7 +154,7 @@ var DateFilter = ({
       type: "is between" /* IsBetween */,
       defaultData: {
         type: "is between" /* IsBetween */,
-        start: _chunkSL7GOUXJcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 7, "days" /* Days */),
+        start: _chunkFBWTYGYEcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 7, "days" /* Days */),
         end: /* @__PURE__ */ new Date()
       },
       getRangeData: (data) => {
@@ -162,7 +162,7 @@ var DateFilter = ({
         return { start, end };
       },
       components: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkRR7I375Bcjs.DateWidget,
+        _chunkOTRONETAcjs.DateWidget,
         {
           dateRangeOperation: "is between" /* IsBetween */,
           onChange: updateStateWithCustomRange,
@@ -175,10 +175,10 @@ var DateFilter = ({
       defaultData: { type: "is after" /* IsAfter */, date: /* @__PURE__ */ new Date() },
       getRangeData: (data) => {
         const { date } = data;
-        return { start: date, end: _chunkSL7GOUXJcjs.MAX_DATE };
+        return { start: date, end: _chunkFBWTYGYEcjs.MAX_DATE };
       },
       components: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkRR7I375Bcjs.DateWidget,
+        _chunkOTRONETAcjs.DateWidget,
         {
           dateRangeOperation: "is after" /* IsAfter */,
           onChange: updateStateWithCustomRange,
@@ -191,10 +191,10 @@ var DateFilter = ({
       defaultData: { type: "is before" /* IsBefore */, date: /* @__PURE__ */ new Date() },
       getRangeData: (data) => {
         const { date } = data;
-        return { start: _chunkSL7GOUXJcjs.MIN_DATE, end: date };
+        return { start: _chunkFBWTYGYEcjs.MIN_DATE, end: date };
       },
       components: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkRR7I375Bcjs.DateWidget,
+        _chunkOTRONETAcjs.DateWidget,
         {
           dateRangeOperation: "is before" /* IsBefore */,
           onChange: updateStateWithCustomRange,
@@ -208,27 +208,27 @@ var DateFilter = ({
     let end = void 0;
     switch (preset) {
       case "Last hour" /* LastHour */:
-        start = _chunkSL7GOUXJcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 1, "hours" /* Hours */);
+        start = _chunkFBWTYGYEcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 1, "hours" /* Hours */);
         end = /* @__PURE__ */ new Date();
         break;
       case "Last 12 hours" /* Last12Hours */:
-        start = _chunkSL7GOUXJcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 12, "hours" /* Hours */);
+        start = _chunkFBWTYGYEcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 12, "hours" /* Hours */);
         end = /* @__PURE__ */ new Date();
         break;
       case "Today" /* Today */:
-        start = _chunkSL7GOUXJcjs.startOfDay.call(void 0, /* @__PURE__ */ new Date());
-        end = _chunkSL7GOUXJcjs.endOfDay.call(void 0, /* @__PURE__ */ new Date());
+        start = _chunkFBWTYGYEcjs.startOfDay.call(void 0, /* @__PURE__ */ new Date());
+        end = _chunkFBWTYGYEcjs.endOfDay.call(void 0, /* @__PURE__ */ new Date());
         break;
       case "Last 7 days" /* Last7Days */:
-        start = _chunkSL7GOUXJcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 7, "days" /* Days */);
+        start = _chunkFBWTYGYEcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 7, "days" /* Days */);
         end = /* @__PURE__ */ new Date();
         break;
       case "Last 14 days" /* Last14Days */:
-        start = _chunkSL7GOUXJcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 14, "days" /* Days */);
+        start = _chunkFBWTYGYEcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 14, "days" /* Days */);
         end = /* @__PURE__ */ new Date();
         break;
       case "Last 30 days" /* Last30Days */:
-        start = _chunkSL7GOUXJcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 30, "days" /* Days */);
+        start = _chunkFBWTYGYEcjs.subtractTime.call(void 0, /* @__PURE__ */ new Date(), 30, "days" /* Days */);
         end = /* @__PURE__ */ new Date();
         break;
       default:
@@ -263,10 +263,10 @@ var DateFilter = ({
   const handleSelectCustomRangeOption = (operation) => {
     updateStateWithCustomRange(dateRangeOptions[operation].defaultData);
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQTRXP6AUcjs.Filter, { label: "date", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Container, { children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23ILZ66Fcjs.Filter, { label: "date", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Container, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonsContainer, { children: [
       presets.map((preset) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkQ2CWG22Bcjs.Button,
+        _chunkVXRUJP4Qcjs.Button,
         {
           kind: preset === state.preset ? "primary" : void 0,
           text: preset,
@@ -276,7 +276,7 @@ var DateFilter = ({
         preset
       )),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkQ2CWG22Bcjs.Button,
+        _chunkVXRUJP4Qcjs.Button,
         {
           kind: state.preset === "Custom" /* Custom */ ? "primary" : void 0,
           text: "Custom",
@@ -287,13 +287,13 @@ var DateFilter = ({
     ] }),
     showCustomOptions && customDateRangeData && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkAKDCK7LTcjs.Select_default,
+        _chunkSWGCDNBIcjs.Select_default,
         {
           defaultValue: {
             value: customDateRangeData.type,
             label: `${customDateRangeData.type}`
           },
-          options: Object.values(_chunkSL7GOUXJcjs.DateRangeOperation).map((operation) => ({
+          options: Object.values(_chunkFBWTYGYEcjs.DateRangeOperation).map((operation) => ({
             value: operation,
             label: `${operation}`
           })),

package/dist/chunk-MXIENB2A.js

@@ -0,0 +1,40 @@
+// src/icons/Wallet.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Wallet() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3.75 6.5V17.25C3.75 18.9069 5.09315 20.25 6.75 20.25H19.25C19.8023 20.25 20.25 19.8023 20.25 19.25V9.75C20.25 9.19772 19.8023 8.75 19.25 8.75H16.25M3.75 6.5C3.75 7.74264 4.75736 8.75 6 8.75H16.25M3.75 6.5C3.75 4.98122 4.98122 3.75 6.5 3.75H15.4688C15.9002 3.75 16.25 4.09978 16.25 4.53125V8.75",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "square",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M15.5 15.25C15.9142 15.25 16.25 14.9142 16.25 14.5C16.25 14.0858 15.9142 13.75 15.5 13.75C15.0858 13.75 14.75 14.0858 14.75 14.5C14.75 14.9142 15.0858 15.25 15.5 15.25Z",
+            fill: "currentColor",
+            stroke: "currentColor",
+            strokeWidth: "0.5",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  Wallet
+};

package/dist/{chunk-WB7M3D2W.js → chunk-MZ3KQKYQ.js}

@@ -1,46 +1,46 @@
 import {
-  useLiveRef
-} from "./chunk-NBCCPGA4.js";
+  isReactNode
+} from "./chunk-PEK53X7W.js";
 import {
   ProgressBar
-} from "./chunk-OBBLAFLK.js";
-import {
-  Drawer
-} from "./chunk-MTAHDNQT.js";
+} from "./chunk-OUD2MDVQ.js";
 import {
   IconWithCircleBackground
-} from "./chunk-XHATKRJR.js";
+} from "./chunk-MOUKNHUZ.js";
+import {
+  Drawer
+} from "./chunk-V53MSMR6.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
+import {
+  setDefaultReactNodesTypography
+} from "./chunk-EH4NPXK6.js";
+import {
+  toReactNodes
+} from "./chunk-QZMY2H3H.js";
+import {
+  overflowAutoWithoutScrollbars
+} from "./chunk-E6MPE6H3.js";
 import {
   Button,
   ButtonSelector
-} from "./chunk-4U3AAKMA.js";
+} from "./chunk-G375DUHZ.js";
 import {
   UnstyledButton
-} from "./chunk-ZP6BJB4X.js";
+} from "./chunk-QYJ7HXKC.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
-import {
-  setDefaultReactNodesTypography
-} from "./chunk-GLYTFTP5.js";
-import {
-  toReactNodes
-} from "./chunk-TS7Y6L2D.js";
-import {
-  overflowAutoWithoutScrollbars
-} from "./chunk-4ZUB5ENE.js";
 import {
   Icon
-} from "./chunk-DV6LJQJW.js";
+} from "./chunk-NXAP7SVM.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-POGNK25N.js";
+} from "./chunk-QRFR2JVT.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
@@ -48,14 +48,23 @@ import {
   bp,
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
+import {
+  useLiveRef
+} from "./chunk-UDFJ6IWI.js";
 import {
   __objRest,
   __spreadValues
-} from "./chunk-CWMXXUWU.js";
+} from "./chunk-W7FAWX6T.js";
 
 // src/components/Modal.tsx
 import styled from "@emotion/styled";
-import React, { Fragment, useEffect, useLayoutEffect, useRef } from "react";
+import React, {
+  Fragment,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
 import ReactDOM from "react-dom";
 import { Fragment as Fragment2, jsx, jsxs } from "@emotion/react/jsx-runtime";
 function isSubmitLinkWithHref(submitLink) {
@@ -77,6 +86,7 @@ function Modal({
   submitLoading,
   submitLoadingKind,
   submitText,
+  submitIcon,
   submitLink,
   cancelText = "Cancel",
   firstFocusRef,
@@ -86,6 +96,7 @@ function Modal({
   autoFocus = true,
   width = 460,
   progressBar,
+  buttonOrder,
   buttonLayout = "horizontal",
   extraActions,
   handleBack,
@@ -94,6 +105,7 @@ function Modal({
   topLeftIcon
 }) {
   const visibleChangedRef = useRef(false);
+  const [visibleChanged, setVisibleChanged] = useState(false);
   const nodeRef = useRef(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
   const ref = firstFocusRef || defaultFirstFocusRef;
@@ -106,9 +118,14 @@ function Modal({
   useEffect(() => {
     if (visible !== visibleChangedRef.current) {
       visibleChangedRef.current = visible;
+      setVisibleChanged(true);
     }
   }, [visible]);
-  const visibleChanged = visible !== visibleChangedRef.current;
+  useEffect(() => {
+    if (visibleChanged) {
+      setVisibleChanged(false);
+    }
+  }, [visibleChanged]);
   useEffect(() => {
     prevFocusedElement.current = document.activeElement;
     const elementToAppendTo = appendToElement != null ? appendToElement : document.body;
@@ -179,6 +196,7 @@ function Modal({
   }
   function onSubmitForm(e) {
     e.preventDefault();
+    e.stopPropagation();
     if (!submitDisabled && onSubmit) {
       onSubmit();
     }
@@ -192,12 +210,14 @@ function Modal({
   }
   const linkIsHref = isSubmitLinkWithHref(submitLink);
   const linkIsRoute = !linkIsHref && submitLink;
+  const displayCancelAbove = !!buttonOrder ? buttonOrder === "cancel-first" : !isSm;
+  const displayCancelBelow = !!buttonOrder ? buttonOrder === "submit-first" : isSm;
   const buttonContent = /* @__PURE__ */ jsxs(Fragment2, { children: [
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
       var _b = _a, { placement, text } = _b, rest = __objRest(_b, ["placement", "text"]);
       return /* @__PURE__ */ jsx(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
     }),
-    !isSm && !cancelHidden && /* @__PURE__ */ jsx(
+    displayCancelAbove && !cancelHidden && /* @__PURE__ */ jsx(
       Button,
       {
         disabled: cancelDisabled,
@@ -210,6 +230,7 @@ function Modal({
       {
         kind: "primary",
         disabled: submitDisabled,
+        icon: submitIcon,
         text: submitText != null ? submitText : "Continue",
         loading: submitLoading,
         loadingKind: submitLoadingKind,
@@ -220,7 +241,14 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: cancelText }),
+    displayCancelBelow && !cancelHidden && /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: cancelDisabled,
+        onClick: onClickCancel,
+        text: cancelText
+      }
+    ),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
       var _d = _c, { placement, text } = _d, rest = __objRest(_d, ["placement", "text"]);
       return /* @__PURE__ */ jsx(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
@@ -252,7 +280,11 @@ function Modal({
   }
   let topContentNode = null;
   if (topContent) {
-    topContentNode = /* @__PURE__ */ jsx("div", { css: { marginBottom: Spacing.px.xl }, children: /* @__PURE__ */ jsx(IconWithCircleBackground, __spreadValues({}, topContent)) });
+    if (isReactNode(topContent)) {
+      topContentNode = topContent;
+    } else {
+      topContentNode = /* @__PURE__ */ jsx("div", { css: { marginBottom: Spacing.px.xl }, children: /* @__PURE__ */ jsx(IconWithCircleBackground, __spreadValues({}, topContent)) });
+    }
   }
   const modalContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     progressBar ? /* @__PURE__ */ jsx("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ jsx(
@@ -393,12 +425,13 @@ var ModalContent = styled.div`
   display: flex;
   flex-direction: column;
 
-  ${({ ghost, width }) => `
+  ${({ ghost, smKind, width }) => `
     ${ghost ? "" : standardBorderRadius(16)}
     width: ${width}px;
   `}
 
   ${({ smKind }) => smKind === "fullscreen" ? bp.sm(`
+          border-radius: 0px;
           width: 100%;
           height: 100dvh;
         `) : ""}