@lightsparkdev/ui 1.0.3 → 1.0.5

package/dist/components/Modal.cjs

@@ -84,7 +84,7 @@ __export(Modal_exports, {
 });
 module.exports = __toCommonJS(Modal_exports);
 var import_styled20 = __toESM(require("@emotion/styled"), 1);
-var import_react31 = __toESM(require("react"), 1);
+var import_react32 = __toESM(require("react"), 1);
 var import_react_dom2 = __toESM(require("react-dom"), 1);
 
 // src/hooks/useLiveRef.tsx
@@ -231,7 +231,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -255,10 +254,13 @@ var baseColors = __spreadProps(__spreadValues({}, neutral), {
   blue37: "#21529c",
   blue58: "#28BFFF",
   // less than 50% saturated blue
+  grayBlue5: "#0c0d0f",
   grayBlue9: "#16171A",
+  grayBlue18: "#21283a",
   grayBlue32: "#4F5156",
   grayBlue43: "#686A72",
   grayBlue45: "#676F80",
+  grayBlue57: "#8B8E98",
   grayBlue67: "#9BA7B9",
   grayBlue80: "#C0C9D6",
   grayBlue88: "#DEDFE4",
@@ -3631,8 +3633,7 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning,
-  inputBackground: colors.white
+  warning: colors.warning
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3644,6 +3645,10 @@ var baseTheme = __spreadProps(__spreadValues({}, baseThemeColors), {
   typography: getTypography("Lightspark" /* Lightspark */),
   hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
   buttons: defaultButtonsTheme,
+  badge: {
+    bg: "c05Neutral"
+  },
+  inputBackground: colors.white,
   loading: "LoadingSpinner"
 });
 var lightBaseTheme = baseTheme;
@@ -3681,7 +3686,10 @@ var darkBaseTheme = {
   warning: colors.warning,
   buttons: defaultButtonsTheme,
   loading: "LoadingSpinner",
-  inputBackground: colors.black
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3797,7 +3805,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3989,6 +4000,68 @@ var overlaySurface = ({
 )({ theme })}
 `;
 
+// src/styles/tokens/spacing.tsx
+var n = {
+  "4xs": 2,
+  "3xs": 4,
+  "2xs": 6,
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  "2xl": 40,
+  "3xl": 48,
+  "4xl": 56,
+  "5xl": 64,
+  "6xl": 72,
+  "7xl": 80,
+  "8xl": 96,
+  "9xl": 112,
+  "10xl": 128,
+  "11xl": 160
+};
+var Spacing = {
+  "4xs": n["4xs"],
+  "3xs": n["3xs"],
+  "2xs": n["2xs"],
+  xs: n.xs,
+  sm: n.sm,
+  md: n.md,
+  lg: n.lg,
+  xl: n.xl,
+  "2xl": n["2xl"],
+  "3xl": n["3xl"],
+  "4xl": n["4xl"],
+  "5xl": n["5xl"],
+  "6xl": n["6xl"],
+  "7xl": n["7xl"],
+  "8xl": n["8xl"],
+  "9xl": n["9xl"],
+  "10xl": n["10xl"],
+  "11xl": n["11xl"],
+  px: {
+    "4xs": `${n["4xs"]}px`,
+    "3xs": `${n["3xs"]}px`,
+    "2xs": `${n["2xs"]}px`,
+    xs: `${n.xs}px`,
+    sm: `${n.sm}px`,
+    md: `${n.md}px`,
+    lg: `${n.lg}px`,
+    xl: `${n.xl}px`,
+    "2xl": `${n["2xl"]}px`,
+    "3xl": `${n["3xl"]}px`,
+    "4xl": `${n["4xl"]}px`,
+    "5xl": `${n["5xl"]}px`,
+    "6xl": `${n["6xl"]}px`,
+    "7xl": `${n["7xl"]}px`,
+    "8xl": `${n["8xl"]}px`,
+    "9xl": `${n["9xl"]}px`,
+    "10xl": `${n["10xl"]}px`,
+    "11xl": `${n["11xl"]}px`
+  }
+};
+
 // src/styles/utils.tsx
 var import_react6 = require("@emotion/react");
 function pxToRems(rems, asNum = false) {
@@ -4082,7 +4155,11 @@ function select(component) {
 }
 
 // src/utils/toReactNodes.tsx
-var import_react23 = require("react");
+var import_lodash_es4 = require("lodash-es");
+var import_react24 = require("react");
+
+// src/components/typography/renderTypography.tsx
+var import_react23 = __toESM(require("react"), 1);
 
 // src/components/typography/Body.tsx
 var import_styled3 = __toESM(require("@emotion/styled"), 1);
@@ -8425,7 +8502,6 @@ var StyledTitle = import_styled12.default.span`
 `;
 
 // src/components/typography/renderTypography.tsx
-var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 var typographyMap = {
   Display,
   Headline,
@@ -8437,46 +8513,46 @@ var typographyMap = {
   "Label Strong": LabelStrong,
   Overline,
   Code: Code2,
-  "Code Strong": () => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { children: "Unimplemented" })
+  "Code Strong": Code2
 };
 var renderTypography = (type, props) => {
   const TypographyComponent = typographyMap[type];
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TypographyComponent, __spreadValues({}, props));
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return import_react23.default.createElement(TypographyComponent, rest, children);
 };
 
 // src/utils/toReactNodes.tsx
-var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 function toReactNodes(toReactNodesArg) {
   const toReactNodesArray = Array.isArray(toReactNodesArg) ? toReactNodesArg : [toReactNodesArg];
   const reactNodes = toReactNodesArray.map((node, i) => {
     let content;
     if (!node) {
       return null;
-    } else if (typeof node !== "string" && "typography" in node && node.typography.type && node.typography.props) {
-      content = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react23.Fragment, { children: renderTypography(
+    } else if (typeof node !== "string" && "typography" in node && node.typography.type) {
+      const props = node.typography.props || {};
+      content = /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_react24.Fragment, { children: renderTypography(
         node.typography.type,
-        Object.assign(node.typography.props, {
-          content: node
-        })
+        Object.assign(props, { content: node })
       ) }, `typography-${i}-${node.text.substr(0, 10)}`);
     } else {
       content = toNonTypographicReactNodes(node);
     }
     return content || null;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react23.Fragment, { children: reactNodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_react24.Fragment, { children: reactNodes });
 }
 
 // src/components/Button.tsx
-var import_react27 = require("@emotion/react");
+var import_react28 = require("@emotion/react");
 var import_styled15 = __toESM(require("@emotion/styled"), 1);
-var import_lodash_es4 = require("lodash-es");
-var import_react28 = require("react");
+var import_lodash_es5 = require("lodash-es");
+var import_react29 = require("react");
 
 // src/components/Loading.tsx
-var import_react24 = require("@emotion/react");
+var import_react25 = require("@emotion/react");
 var import_styled13 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
 var defaultProps = {
   size: 60,
   center: true,
@@ -8487,8 +8563,8 @@ function Loading({
   size: size2 = defaultProps.size,
   ml = defaultProps.ml
 }) {
-  const theme = (0, import_react24.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(LoadingWrapper, { center, ml, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Rotate, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: theme.loading, width: size2 }) }) });
+  const theme = (0, import_react25.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(LoadingWrapper, { center, ml, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Rotate, { children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { name: theme.loading, width: size2 }) }) });
 }
 Loading.defaultProps = defaultProps;
 var LoadingWrapper = import_styled13.default.div`
@@ -8527,15 +8603,15 @@ var Rotate = import_styled13.default.div`
 
 // src/components/Tooltip.tsx
 var import_css = require("@emotion/css");
-var import_react25 = require("@emotion/react");
-var import_react26 = __toESM(require("react"), 1);
+var import_react26 = require("@emotion/react");
+var import_react27 = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
 var import_react_tooltip = require("react-tooltip");
-var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 function Tooltip(props) {
-  const nodeRef = (0, import_react26.useRef)(null);
-  const [nodeReady, setNodeReady] = import_react26.default.useState(false);
-  (0, import_react26.useEffect)(() => {
+  const nodeRef = (0, import_react27.useRef)(null);
+  const [nodeReady, setNodeReady] = import_react27.default.useState(false);
+  (0, import_react27.useEffect)(() => {
     if (!nodeRef.current) {
       nodeRef.current = document.createElement("div");
       document.body.appendChild(nodeRef.current);
@@ -8548,9 +8624,9 @@ function Tooltip(props) {
       }
     };
   }, []);
-  const theme = (0, import_react25.useTheme)();
+  const theme = (0, import_react26.useTheme)();
   return nodeReady && nodeRef.current ? import_react_dom.default.createPortal(
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       import_react_tooltip.Tooltip,
       __spreadProps(__spreadValues({}, props), {
         id: props.id || "",
@@ -8595,7 +8671,7 @@ var UnstyledButton = import_styled14.default.button`
 `;
 
 // src/components/Button.tsx
-var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
 var roundPaddingsX = {
   [TokenSize.ExtraSmall]: 10,
   [TokenSize.Small]: 10,
@@ -8700,7 +8776,7 @@ function resolveProps(props, theme) {
   });
 }
 function Button(props) {
-  const theme = (0, import_react27.useTheme)();
+  const theme = (0, import_react28.useTheme)();
   const {
     kind,
     typography,
@@ -8732,34 +8808,34 @@ function Button(props) {
     tooltipText,
     borderRadius
   } = resolveProps(props, theme);
-  const tooltipId = (0, import_react28.useRef)((0, import_lodash_es4.uniqueId)());
+  const tooltipId = (0, import_react29.useRef)((0, import_lodash_es5.uniqueId)());
   const iconSize = size2 === "ExtraSmall" ? 12 : 16;
   let currentIcon = null;
   if (loading) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       ButtonIcon,
       {
         iconSide,
         text,
         typography,
         kind,
-        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Loading, { size: iconSize, center: false })
+        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Loading, { size: iconSize, center: false })
       }
     );
   } else if (icon) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       ButtonIcon,
       {
         iconSide,
         text,
         typography,
         kind,
-        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { name: icon, width: iconSize, color: typography.color })
+        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: icon, width: iconSize, color: typography.color })
       }
     );
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_react28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       "div",
       __spreadProps(__spreadValues({}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
         css: {
@@ -8770,7 +8846,7 @@ function Button(props) {
         },
         children: [
           iconSide === "left" && currentIcon,
-          text && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          text && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
             "div",
             {
               css: {
@@ -8788,7 +8864,7 @@ function Button(props) {
         ]
       })
     ),
-    tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Tooltip, { id: tooltipId.current, content: tooltipText }) : null
+    tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Tooltip, { id: tooltipId.current, content: tooltipText }) : null
   ] });
   const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
@@ -8818,9 +8894,9 @@ function Button(props) {
     zIndex
   };
   if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
   }
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     ButtonHrefLink,
     __spreadProps(__spreadValues({}, commonProps), {
       href,
@@ -8828,7 +8904,7 @@ function Button(props) {
       target: "_blank",
       children: content
     })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
+  ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
 var buttonStyle = ({
   paddingY,
@@ -8848,7 +8924,7 @@ var buttonStyle = ({
   hoverBackgroundColor,
   hoverBorderColor
 }) => {
-  return import_react27.css`
+  return import_react28.css`
     display: inline-flex;
     opacity: ${disabled && !isLoading ? 0.2 : 1};
     ${disabled ? "pointer-events: none;" : ""}
@@ -8916,15 +8992,15 @@ var ButtonSelector = (prepend = "", append = "") => `${prepend}*:is(${select(Sty
 
 // src/components/Drawer.tsx
 var import_styled16 = __toESM(require("@emotion/styled"), 1);
-var import_react29 = require("react");
-var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
+var import_react30 = require("react");
+var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
 var Drawer = (props) => {
-  const [isOpen, setIsOpen] = (0, import_react29.useState)(true);
-  const [lastY, setLastY] = (0, import_react29.useState)(null);
-  const [totalDeltaY, setTotalDeltaY] = (0, import_react29.useState)(0);
-  const [fractionVisible, setFractionVisible] = (0, import_react29.useState)(1);
-  const [grabbing, setGrabbing] = (0, import_react29.useState)(false);
-  const drawerContainerRef = (0, import_react29.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react30.useState)(true);
+  const [lastY, setLastY] = (0, import_react30.useState)(null);
+  const [totalDeltaY, setTotalDeltaY] = (0, import_react30.useState)(0);
+  const [fractionVisible, setFractionVisible] = (0, import_react30.useState)(1);
+  const [grabbing, setGrabbing] = (0, import_react30.useState)(false);
+  const drawerContainerRef = (0, import_react30.useRef)(null);
   const handleClose = () => {
     if (props.nonDismissable) {
       return;
@@ -8973,8 +9049,8 @@ var Drawer = (props) => {
     setTotalDeltaY(0);
     setLastY(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
       Background,
       {
         isOpen,
@@ -8982,7 +9058,7 @@ var Drawer = (props) => {
         onClick: handleClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
       DrawerContainer,
       {
         isOpen,
@@ -8993,8 +9069,8 @@ var Drawer = (props) => {
         grabbing,
         ref: drawerContainerRef,
         children: [
-          props.grabber && !props.nonDismissable && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Grabber, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(GrabberBar, {}) }),
-          props.handleBack && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(BackButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+          props.grabber && !props.nonDismissable && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Grabber, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(GrabberBar, {}) }),
+          props.handleBack && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(BackButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
             Button,
             {
               onClick: props.handleBack,
@@ -9003,7 +9079,7 @@ var Drawer = (props) => {
               size: "Small"
             }
           ) }),
-          props.closeButton && !props.nonDismissable && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(CloseButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(CloseButton, { onClick: handleClose, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { name: "Close", width: 12 }) }) }),
+          props.closeButton && !props.nonDismissable && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(CloseButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(CloseButton, { onClick: handleClose, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { name: "Close", width: 12 }) }) }),
           props.children
         ]
       }
@@ -9043,10 +9119,11 @@ var DrawerContainer = import_styled16.default.div`
   bottom: 0;
   transform: translateY(${(props) => `${props.totalDeltaY}px`});
   z-index: ${z.modalContainer};
-  border-radius: ${"24px" /* lg */} ${"24px" /* lg */} 0 0;
+  border-radius: ${Spacing.px.lg} ${Spacing.px.lg} 0 0;
   display: flex;
   flex-direction: column;
-  padding: ${"72px" /* 6xl */} ${"32px" /* xl */} ${"40px" /* 2xl */} ${"32px" /* xl */};
+  padding: ${Spacing.px["6xl"]} ${Spacing.px.xl} ${Spacing.px["2xl"]}
+    ${Spacing.px.xl};
   overflow-y: scroll;
 
   // Only smooth transition when not grabbing, otherwise dragging will feel very laggy
@@ -9079,7 +9156,7 @@ var Grabber = import_styled16.default.div`
   top: 0;
   left: 0;
   width: 100%;
-  height: ${"24px" /* lg */};
+  height: ${Spacing.px.lg};
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -9093,7 +9170,7 @@ var CloseButtonContainer = import_styled16.default.div`
   right: 20px;
   border-radius: 50%;
   background-color: ${colors.grayBlue94};
-  padding: ${"8px" /* xs */};
+  padding: ${Spacing.px.xs};
   height: 30px;
   width: 30px;
   display: flex;
@@ -9114,7 +9191,7 @@ var BackButtonContainer = import_styled16.default.div`
   top: 20px;
   left: 20px;
   border-radius: 50%;
-  padding: ${"8px" /* xs */};
+  padding: ${Spacing.px.xs};
   height: 30px;
   width: 30px;
   display: flex;
@@ -9128,13 +9205,13 @@ var GrabberBar = import_styled16.default.div`
 `;
 
 // src/components/IconWithCircleBackground.tsx
-var import_styled19 = __toESM(require("@emotion/styled"), 1);
+var import_styled18 = __toESM(require("@emotion/styled"), 1);
 
 // src/components/Flex.tsx
 var import_styled17 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
 function Flex({ center = false, children, as = "div" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(StyledFlex, { center, as, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(StyledFlex, { center, as, children });
 }
 var StyledFlex = import_styled17.default.div`
   display: flex;
@@ -9144,9 +9221,22 @@ var StyledFlex = import_styled17.default.div`
   `}
 `;
 
+// src/components/IconWithCircleBackground.tsx
+var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
+function IconWithCircleBackground({
+  iconName = "WarningSign"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Flex, { center: true, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(StyledIconWithCircleBackground, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Icon, { name: iconName, width: 40, color: "grayBlue9" }) }) });
+}
+var StyledIconWithCircleBackground = import_styled18.default.div`
+  background-color: ${({ theme }) => getColor(theme, "grayBlue94")};
+  border-radius: 50%;
+  padding: 20px;
+`;
+
 // src/components/ProgressBar.tsx
-var import_styled18 = __toESM(require("@emotion/styled"), 1);
-var import_react30 = require("react");
+var import_styled19 = __toESM(require("@emotion/styled"), 1);
+var import_react31 = require("react");
 var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
 var defaultProps2 = {
   isSm: false,
@@ -9158,8 +9248,8 @@ function ProgressBar({
   isSm = defaultProps2.isSm,
   stepDuration = defaultProps2.stepDuration
 }) {
-  const [percentage, setPercentage] = (0, import_react30.useState)(5);
-  (0, import_react30.useEffect)(() => {
+  const [percentage, setPercentage] = (0, import_react31.useState)(5);
+  (0, import_react31.useEffect)(() => {
     if (progressPercentage !== void 0) {
       setPercentage(progressPercentage);
     } else {
@@ -9179,7 +9269,7 @@ function ProgressBar({
   ) }) });
 }
 ProgressBar.defaultProps = defaultProps2;
-var ProgressBarContainer = import_styled18.default.div`
+var ProgressBarContainer = import_styled19.default.div`
   ${standardBorderRadius(16)}
   background-color: ${({ theme }) => themeOr(theme.c05Neutral, theme.c1Neutral)({ theme })};
   box-sizing: border-box;
@@ -9189,7 +9279,7 @@ var ProgressBarContainer = import_styled18.default.div`
   width: 100%;
   position: relative;
 `;
-var BarBg = import_styled18.default.div`
+var BarBg = import_styled19.default.div`
   ${standardBorderRadius(16)}
   width: ${({ percentage }) => 100 / percentage * 100}%;
   height: 100%;
@@ -9203,7 +9293,7 @@ var BarBg = import_styled18.default.div`
     #3f2e7e 115.32%
   )`};
 `;
-var Bar = import_styled18.default.div`
+var Bar = import_styled19.default.div`
   ${standardBorderRadius(16)}
   overflow: hidden;
   box-sizing: border-box;
@@ -9214,21 +9304,8 @@ var Bar = import_styled18.default.div`
     cubic-bezier(0.16, 0.3, 0.18, 1);
 `;
 
-// src/components/IconWithCircleBackground.tsx
-var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
-function IconWithCircleBackground({
-  iconName = "WarningSign"
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Flex, { center: true, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(StyledIconWithCircleBackground, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { name: iconName, width: 40, color: "grayBlue9" }) }) });
-}
-var StyledIconWithCircleBackground = import_styled19.default.div`
-  background-color: ${({ theme }) => getColor(theme, "grayBlue94")};
-  border-radius: 50%;
-  padding: 20px;
-`;
-
 // src/components/Modal.tsx
-var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
 function isSubmitLinkWithHref(submitLink) {
   return Boolean(submitLink && "href" in submitLink);
 }
@@ -9260,23 +9337,23 @@ function Modal({
   extraActions,
   handleBack
 }) {
-  const visibleChangedRef = (0, import_react31.useRef)(false);
-  const nodeRef = (0, import_react31.useRef)(null);
+  const visibleChangedRef = (0, import_react32.useRef)(false);
+  const nodeRef = (0, import_react32.useRef)(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
   const ref = firstFocusRef || defaultFirstFocusRef;
-  const [nodeReady, setNodeReady] = import_react31.default.useState(false);
-  const overlayRef = (0, import_react31.useRef)(null);
-  const prevFocusedElement = (0, import_react31.useRef)();
-  const modalContainerRef = (0, import_react31.useRef)(null);
+  const [nodeReady, setNodeReady] = import_react32.default.useState(false);
+  const overlayRef = (0, import_react32.useRef)(null);
+  const prevFocusedElement = (0, import_react32.useRef)();
+  const modalContainerRef = (0, import_react32.useRef)(null);
   const bp2 = useBreakpoints();
   const isSm = bp2.current("sm" /* sm */);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (visible !== visibleChangedRef.current) {
       visibleChangedRef.current = visible;
     }
   }, [visible]);
   const visibleChanged = visible !== visibleChangedRef.current;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     prevFocusedElement.current = document.activeElement;
     if (!nodeRef.current) {
       nodeRef.current = document.createElement("div");
@@ -9290,7 +9367,7 @@ function Modal({
       }
     };
   }, []);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const handleOutsideClick = (event) => {
       if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) {
         onClose();
@@ -9327,7 +9404,7 @@ function Modal({
       }
     };
   }, [onClose, visible, nonDismissable]);
-  (0, import_react31.useLayoutEffect)(() => {
+  (0, import_react32.useLayoutEffect)(() => {
     if (visible) {
       if (visibleChanged) {
         prevFocusedElement.current = document.activeElement;
@@ -9358,12 +9435,12 @@ function Modal({
   }
   const linkIsHref = isSubmitLinkWithHref(submitLink);
   const linkIsRoute = !linkIsHref && submitLink;
-  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
+  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { 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__ */ (0, import_jsx_runtime137.jsx)(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
     }),
-    !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       Button,
       {
         disabled: cancelDisabled,
@@ -9371,7 +9448,7 @@ function Modal({
         text: cancelText
       }
     ),
-    (onSubmit || submitLink) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    (onSubmit || submitLink) && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       Button,
       {
         kind: "primary",
@@ -9385,16 +9462,16 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Button, { onClick: onClose, text: cancelText }),
+    isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(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 = __objRest(_d, ["placement", "text"]);
-      return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
     })
   ] });
   let titleContent = null;
   if (title) {
     if (typeof title === "string") {
-      titleContent = /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Headline, { heading: "h4", size: TokenSize.Small, children: title });
+      titleContent = /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Headline, { heading: "h4", size: TokenSize.Small, children: title });
     } else {
       titleContent = toReactNodes(title);
     }
@@ -9402,17 +9479,17 @@ function Modal({
   let descriptionContent = null;
   if (description) {
     if (typeof description === "string") {
-      descriptionContent = /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Description, { children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Body, { size: "ExtraSmall", content: description }) });
+      descriptionContent = /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Description, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Body, { size: "ExtraSmall", content: description }) });
     } else {
-      descriptionContent = /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Description, { children: toReactNodes(description) });
+      descriptionContent = /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Description, { children: toReactNodes(description) });
     }
   }
   let topContentNode = null;
   if (topContent) {
-    topContentNode = /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { css: { marginBottom: "32px" /* xl */ }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconWithCircleBackground, __spreadValues({}, topContent)) });
+    topContentNode = /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { css: { marginBottom: Spacing.px.xl }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconWithCircleBackground, __spreadValues({}, topContent)) });
   }
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_react31.Fragment, { children: [
-    progressBar ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_react32.Fragment, { children: [
+    progressBar ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       ProgressBar,
       {
         progressPercentage: progressBar.progressPercentage,
@@ -9423,11 +9500,11 @@ function Modal({
     titleContent,
     descriptionContent,
     children,
-    onSubmit || onCancel || submitLink ? buttonLayout === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ModalButtonColumn, { children: buttonContent }) : null
+    onSubmit || onCancel || submitLink ? buttonLayout === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ModalButtonColumn, { children: buttonContent }) : null
   ] });
   let content;
   if (smKind === "drawer" && isSm) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       Drawer,
       {
         onClose: () => onClickCloseButton(),
@@ -9438,9 +9515,9 @@ function Modal({
       }
     );
   } else {
-    content = /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_react31.Fragment, { children: [
-      !(smKind === "fullscreen" && bp2.isSm()) ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ModalOverlay, { ref: overlayRef }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_react32.Fragment, { children: [
+      !(smKind === "fullscreen" && bp2.isSm()) ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ModalOverlay, { ref: overlayRef }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         ModalContainer,
         {
           "aria-modal": true,
@@ -9449,20 +9526,20 @@ function Modal({
           role: "dialog",
           ref: modalContainerRef,
           top: top || (smKind === "default" ? standardContentInset.smPx : 0),
-          children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(ModalContent, { width, ghost, smKind, children: [
-            !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
-            !ghost && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(ModalNavigation, { children: [
-              handleBack && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(BackButton, { onClick: handleBack, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { name: "ChevronLeft", width: 16 }) }),
-              !nonDismissable && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(CloseButton2, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { name: "Close", width: 9 }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(ModalContent, { width, ghost, smKind, children: [
+            !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+            !ghost && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(ModalNavigation, { children: [
+              handleBack && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BackButton, { onClick: handleBack, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { name: "ChevronLeft", width: 16 }) }),
+              !nonDismissable && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CloseButton2, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { name: "Close", width: 9 }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ModalContentInner, { ghost, children: modalContent })
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ModalContentInner, { ghost, children: modalContent })
           ] })
         }
       )
     ] });
   }
   return visible && nodeReady && nodeRef.current ? import_react_dom2.default.createPortal(
-    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("form", { onSubmit: onSubmitForm, children: content }) : content,
+    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("form", { onSubmit: onSubmitForm, children: content }) : content,
     nodeRef.current
   ) : null;
 }
@@ -9501,13 +9578,13 @@ var ModalContainer = import_styled20.default.div`
 var contentTopMarginPx = 24;
 var Description = import_styled20.default.div`
   color: ${({ theme }) => theme.mcNeutral};
-  margin-top: ${"12px" /* sm */};
+  margin-top: ${Spacing.px.sm};
   & + * {
     margin-top: ${contentTopMarginPx}px;
   }
 `;
 var ModalButtonRow = import_styled20.default.div`
-  margin-top: ${"24px" /* lg */};
+  margin-top: ${Spacing.px.lg};
   ${bp.minSm(`display: flex;`)}
   gap: 10px;
 
@@ -9521,13 +9598,13 @@ var ModalButtonRow = import_styled20.default.div`
 var ModalButtonColumn = import_styled20.default.div`
   display: flex;
   flex-direction: column;
-  gap: ${"12px" /* sm */};
+  gap: ${Spacing.px.sm};
 
   ${ButtonSelector()} {
     width: 100%;
   }
 
-  margin-top: ${"24px" /* lg */};
+  margin-top: ${Spacing.px.lg};
 `;
 var ModalContent = import_styled20.default.div`
   pointer-events: auto;