@lightsparkdev/ui 1.0.2 → 1.0.4

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
@@ -3643,6 +3643,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;
@@ -3679,7 +3683,11 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3718,6 +3726,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3794,7 +3803,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3802,7 +3814,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */
@@ -3972,11 +3985,12 @@ var overlaySurfaceBorderColor = ({
 `;
 var overlaySurface = ({
   theme,
-  important = false
+  important = false,
+  border = true
 }) => import_react5.css`
-  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
+  background-color: ${themeOr(theme.bg, theme.c1Neutral)({ theme })}
     ${important ? "!important" : ""};
-  border: 0.5px solid ${important ? "!important" : ""};
+  ${border ? `border: 0.5px solid ${important ? "!important" : ""};` : ""}
   ${overlaySurfaceBorderColor({ theme, important })};
   ${themeOr(
   `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,
@@ -3984,6 +3998,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) {
@@ -4077,7 +4153,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);
@@ -7988,7 +8068,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 
@@ -8143,6 +8223,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`
@@ -8419,7 +8500,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,
@@ -8431,46 +8511,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,
@@ -8481,8 +8561,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`
@@ -8521,15 +8601,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);
@@ -8542,9 +8622,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 || "",
@@ -8589,7 +8669,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,
@@ -8612,7 +8692,7 @@ function getPaddingX(size2, kind, isRound) {
 function getPadding({ paddingY, kind, size: size2, iconSide, isRound }) {
   const paddingX = getPaddingX(size2, kind, isRound);
   const paddingForIcon = 0;
-  return `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
+  return kind === "ghost" ? 0 : `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
 }
 function resolveBackgroundColorKey(theme, kind, defaultKey) {
   var _a;
@@ -8694,7 +8774,7 @@ function resolveProps(props, theme) {
   });
 }
 function Button(props) {
-  const theme = (0, import_react27.useTheme)();
+  const theme = (0, import_react28.useTheme)();
   const {
     kind,
     typography,
@@ -8726,34 +8806,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: {
@@ -8764,7 +8844,7 @@ function Button(props) {
         },
         children: [
           iconSide === "left" && currentIcon,
-          text && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          text && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
             "div",
             {
               css: {
@@ -8782,7 +8862,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 = {
@@ -8812,9 +8892,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,
@@ -8822,7 +8902,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,
@@ -8842,7 +8922,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;" : ""}
@@ -8910,16 +8990,19 @@ 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;
+    }
     setIsOpen(false);
     setTimeout(() => {
       props.onClose && props.onClose();
@@ -8929,6 +9012,9 @@ var Drawer = (props) => {
   };
   const handleTouchMove = (event) => {
     var _a, _b;
+    if (props.nonDismissable) {
+      return;
+    }
     if (lastY === null) {
       setLastY(event.touches[0].clientY);
     } else {
@@ -8945,9 +9031,15 @@ var Drawer = (props) => {
     }
   };
   const handleTouchStart = () => {
+    if (props.nonDismissable) {
+      return;
+    }
     setGrabbing(true);
   };
   const handleTouchEnd = () => {
+    if (props.nonDismissable) {
+      return;
+    }
     setGrabbing(false);
     if (fractionVisible < 0.8) {
       handleClose();
@@ -8955,8 +9047,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,
@@ -8964,7 +9056,7 @@ var Drawer = (props) => {
         onClick: handleClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
       DrawerContainer,
       {
         isOpen,
@@ -8975,16 +9067,17 @@ var Drawer = (props) => {
         grabbing,
         ref: drawerContainerRef,
         children: [
-          props.grabber && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Grabber, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(GrabberBar, {}) }),
-          props.closeButton && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(CloseButtonContainer, { 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: handleClose,
-              icon: "Close",
+              onClick: props.handleBack,
+              icon: "ChevronLeft",
               kind: "ghost",
-              size: "ExtraSmall"
+              size: "Small"
             }
           ) }),
+          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
         ]
       }
@@ -9017,16 +9110,19 @@ var Background = import_styled16.default.div`
 `;
 var DrawerContainer = import_styled16.default.div`
   position: fixed;
+  max-height: 100dvh;
   width: 100%;
   background-color: ${({ theme }) => theme.bg};
   right: 0;
   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
   ${(props) => props.grabbing && props.isOpen ? "" : "transition: transform 0.3s ease-in-out;"};
@@ -9058,7 +9154,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;
@@ -9072,12 +9168,33 @@ 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;
+  align-items: center;
 
   * > * {
     line-height: 14px;
   }
 `;
+var CloseButton = (0, import_styled16.default)(UnstyledButton)`
+  ${standardFocusOutline}
+  width: 24px;
+  height: 24px;
+  justify-self: flex-end;
+`;
+var BackButtonContainer = import_styled16.default.div`
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  border-radius: 50%;
+  padding: ${Spacing.px.xs};
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+`;
 var GrabberBar = import_styled16.default.div`
   width: 36px;
   height: 5px;
@@ -9086,13 +9203,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;
@@ -9102,9 +9219,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,
@@ -9116,8 +9246,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 {
@@ -9137,7 +9267,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;
@@ -9147,7 +9277,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%;
@@ -9161,7 +9291,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;
@@ -9172,21 +9302,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);
 }
@@ -9208,31 +9325,33 @@ function Modal({
   submitLink,
   cancelText = "Cancel",
   firstFocusRef,
-  smDrawer,
+  smKind = "default",
+  top,
   nonDismissable = false,
   autoFocus = true,
   width = 460,
   progressBar,
   buttonLayout = "horizontal",
-  extraActions
+  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");
@@ -9246,7 +9365,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();
@@ -9283,7 +9402,7 @@ function Modal({
       }
     };
   }, [onClose, visible, nonDismissable]);
-  (0, import_react31.useLayoutEffect)(() => {
+  (0, import_react32.useLayoutEffect)(() => {
     if (visible) {
       if (visibleChanged) {
         prevFocusedElement.current = document.activeElement;
@@ -9314,9 +9433,12 @@ function Modal({
   }
   const linkIsHref = isSubmitLinkWithHref(submitLink);
   const linkIsRoute = !linkIsHref && submitLink;
-  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
-    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((action) => action.content),
-    !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  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_runtime136.jsx)(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
+    }),
+    !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       Button,
       {
         disabled: cancelDisabled,
@@ -9324,7 +9446,7 @@ function Modal({
         text: cancelText
       }
     ),
-    (onSubmit || submitLink) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    (onSubmit || submitLink) && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       Button,
       {
         kind: "primary",
@@ -9338,13 +9460,16 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Button, { onClick: onClose, text: cancelText }),
-    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((action) => action.content)
+    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_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);
     }
@@ -9352,17 +9477,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,
@@ -9373,15 +9498,24 @@ 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 (smDrawer && isSm) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Drawer, { onClose: () => onClickCloseButton(), closeButton: true, children: modalContent });
+  if (smKind === "drawer" && isSm) {
+    content = /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+      Drawer,
+      {
+        onClose: () => onClickCloseButton(),
+        closeButton: true,
+        nonDismissable,
+        handleBack,
+        children: modalContent
+      }
+    );
   } else {
-    content = /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_react31.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ModalOverlay, { ref: overlayRef }),
-      /* @__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,
@@ -9389,17 +9523,21 @@ function Modal({
           tabIndex: -1,
           role: "dialog",
           ref: modalContainerRef,
-          children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(ModalContent, { width, ghost, children: [
-            !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
-            !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(CloseButtonContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { name: "Close", width: 9 }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ModalContentInner, { ghost, children: modalContent })
+          top: top || (smKind === "default" ? standardContentInset.smPx : 0),
+          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_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;
 }
@@ -9433,18 +9571,18 @@ var ModalContainer = import_styled20.default.div`
   justify-content: center;
   align-items: center;
   color: ${({ theme }) => theme.text};
-  padding-top: ${standardContentInset.smPx}px;
+  ${(props) => `top: ${props.top}px;`}
 `;
 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;
 
@@ -9458,25 +9596,31 @@ 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`
-  ${overflowAutoWithoutScrollbars}
-  ${standardContentInset.smCSS}
-  ${(props) => props.ghost ? "" : standardBorderRadius(16)}
-  ${(props) => props.ghost ? "" : overlaySurface}
   pointer-events: auto;
   transition: width 0.25s ease-in;
-  width: ${(props) => props.width}px;
-  max-width: 100%;
-  max-height: 100%;
-  position: absolute;
+
+  ${({ theme, smKind, ghost }) => ghost ? "" : overlaySurface({ theme, border: smKind !== "fullscreen" })}
+  ${overflowAutoWithoutScrollbars}
+  ${(props) => props.smKind === "fullscreen" && bp.isSm() ? `
+    width: 100%;
+    height: 100%;
+  ` : `
+    ${props.ghost ? "" : standardBorderRadius(16)}
+    ${standardContentInset.smCSS.styles}
+    width: ${props.width}px;
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+  `}
   ${(props) => props.ghost ? "" : "padding: 16px 16px 40px;"}
 
   ${headlineSelector("h4")} { {
@@ -9486,16 +9630,22 @@ var ModalContent = import_styled20.default.div`
     }
   }
 `;
-var CloseButtonContainer2 = import_styled20.default.div`
-  display: flex;
-  flex-direction: row;
+var ModalNavigation = import_styled20.default.div`
+  display: grid;
+  grid-auto-flow: column;
   width: 100%;
-  justify-content: flex-end;
 `;
-var CloseButton = (0, import_styled20.default)(UnstyledButton)`
+var BackButton = (0, import_styled20.default)(UnstyledButton)`
+  ${standardFocusOutline}
+  width: 24px;
+  height: 24px;
+  justify-self: flex-start;
+`;
+var CloseButton2 = (0, import_styled20.default)(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
   height: 24px;
+  justify-self: flex-end;
 `;
 var ModalContentInner = import_styled20.default.div`
   ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}