@lightsparkdev/ui 1.0.2 → 1.0.4

package/dist/components/Drawer.cjs

@@ -84,7 +84,7 @@ __export(Drawer_exports, {
 });
 module.exports = __toCommonJS(Drawer_exports);
 var import_styled16 = __toESM(require("@emotion/styled"), 1);
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/styles/colors.tsx
 var neutral = {
@@ -181,128 +181,15 @@ function hexToRGB(hex) {
   ] : [0, 0, 0];
 }
 
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  tooltip: 193,
-  toast: 200
-};
-
-// src/components/Button.tsx
-var import_react24 = require("@emotion/react");
-var import_styled15 = __toESM(require("@emotion/styled"), 1);
-var import_lodash_es4 = require("lodash-es");
-var import_react25 = require("react");
-
-// src/router.tsx
-var import_lodash_es = require("lodash-es");
-var import_react = require("react");
-var import_react_router_dom = require("react-router-dom");
-
-// src/utils/strings.tsx
-function isString(str) {
-  return typeof str === "string";
-}
-
-// src/router.tsx
-var import_jsx_runtime = require("@emotion/react/jsx-runtime");
-function replaceParams(to, params) {
-  if (params) {
-    let toWithParams = to;
-    Object.entries((0, import_lodash_es.omit)(params, "query")).forEach(([key, value]) => {
-      if (typeof value !== "string") {
-        throw new Error(
-          `Only 'query' may be an object. Route params must be a string, but '${key}' is not.`
-        );
-      }
-      toWithParams = toWithParams.replace(`:${key}`, value);
-    });
-    if (params.query) {
-      let query = params.query;
-      if (typeof query !== "string") {
-        query = Object.entries(params.query).map(([key, value]) => `${key}${value ? `=${value}` : ""}`).join("&");
-      }
-      toWithParams = `${toWithParams}?${query}`;
-    }
-    to = toWithParams;
-  }
-  return to;
-}
-function Link({
-  to,
-  id,
-  externalLink,
-  params,
-  children,
-  css: css6,
-  onClick,
-  className,
-  hash = null,
-  blue = false,
-  newTab = false
-}) {
-  if (!isString(to) && !externalLink && !onClick) {
-    throw new Error(
-      "Link must have either `to` or `externalLink` or `onClick` defined"
-    );
-  }
-  let toStr;
-  if (isString(to)) {
-    toStr = replaceParams(to, params);
-    toStr += hash ? `#${hash}` : "";
-  } else if (externalLink) {
-    const definedExternalLink = externalLink;
-    if (!definedExternalLink.startsWith("http")) {
-      throw new Error("Link's externalLink must start with http");
-    }
-    toStr = definedExternalLink;
-  } else {
-    toStr = "#";
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_router_dom.Link,
-    {
-      to: toStr,
-      id,
-      css: css6,
-      onClick,
-      className,
-      style: { color: blue ? colors.blue43 : "inherit" },
-      target: newTab ? "_blank" : void 0,
-      rel: newTab ? "noopener noreferrer" : void 0,
-      children
-    }
-  );
-}
-
 // src/styles/common.tsx
-var import_react5 = require("@emotion/react");
+var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
 
 // src/styles/breakpoints.tsx
-var import_react2 = require("@emotion/react");
-var import_lodash_es2 = require("lodash-es");
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
+var import_react = require("@emotion/react");
+var import_lodash_es = require("lodash-es");
+var import_react2 = require("react");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
 var Breakpoints = /* @__PURE__ */ ((Breakpoints2) => {
   Breakpoints2["sm"] = "sm";
   Breakpoints2["md"] = "md";
@@ -395,7 +282,7 @@ function inRange(currentBp, assertBp) {
 }
 
 // src/styles/themes.tsx
-var import_react4 = require("@emotion/react");
+var import_react3 = require("@emotion/react");
 var import_deepmerge = __toESM(require("deepmerge"), 1);
 
 // src/styles/buttons.tsx
@@ -3722,6 +3609,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;
@@ -3758,7 +3649,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, {
@@ -3797,6 +3692,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"
@@ -3873,7 +3769,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3881,7 +3780,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 */
@@ -3956,21 +3856,21 @@ var themeOr = (lightValue, darkValue) => ({ theme }) => {
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
-  const smCSS = import_react5.css`
+  const smCSS = import_react4.css`
     ${bp.sm(`
       margin-left: auto;
       margin-right: auto;
       width: calc(100% - ${smPx * 2}px);
     `)}
   `;
-  const minSmMaxLgCSS = import_react5.css`
+  const minSmMaxLgCSS = import_react4.css`
     ${bp.minSmMaxLg(`
       margin-left: auto;
       margin-right: auto;
       width: calc(100% - ${minSmMaxLgPx * 2}px);
     `)}
   `;
-  const lgCSS = import_react5.css`
+  const lgCSS = import_react4.css`
     ${bp.lg(`
       margin-left: auto;
       margin-right: auto;
@@ -3985,7 +3885,7 @@ function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
     smCSS,
     minSmMaxLgCSS,
     lgCSS,
-    css: import_react5.css`
+    css: import_react4.css`
       ${lgCSS}
       ${smCSS}
       ${minSmMaxLgCSS}
@@ -3993,12 +3893,12 @@ function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
   };
 }
 var standardContentInset = buildStandardContentInset(16, 24, 32);
-var standardCardShadow = import_react5.css`
+var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
     0px 8px 24px 0px rgba(0, 0, 0, 0.04);
 `;
-var standardCardShadowHard = import_react5.css`
+var standardCardShadowHard = import_react4.css`
   box-shadow:
     0px 24px 24px -12px rgba(0, 0, 0, 0.06),
     0px 12px 12px -6px rgba(0, 0, 0, 0.06),
@@ -4016,7 +3916,7 @@ var getFocusOutline = ({
   onBgHex
 }) => `${onBgHex ? theme.hcNeutralFromBg(onBgHex) : theme.hcNeutral} dashed 1px`;
 var outlineOffset = "-2px";
-var standardFocusOutline = ({ theme }) => import_react5.css`
+var standardFocusOutline = ({ theme }) => import_react4.css`
   &,
   & a,
   & button {
@@ -4026,30 +3926,31 @@ var standardFocusOutline = ({ theme }) => import_react5.css`
     }
   }
 `;
-var subtext = ({ theme }) => import_react5.css`
+var subtext = ({ theme }) => import_react4.css`
   color: ${theme.c6Neutral};
   font-weight: 600;
 `;
 var Subtext = import_styled.default.div`
   ${subtext}
 `;
-var darkGradientBg = import_react5.css`
+var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
 var overlaySurfaceBorderColor = ({
   theme,
   important = false
-}) => import_react5.css`
+}) => import_react4.css`
   border-color: ${themeOr(theme.c1Neutral, theme.c3Neutral)({ theme })}
     ${important ? "!important" : ""};
 `;
 var overlaySurface = ({
   theme,
-  important = false
-}) => import_react5.css`
-  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
+  important = false,
+  border = true
+}) => import_react4.css`
+  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" : ""};`,
@@ -4057,6 +3958,181 @@ 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/z-index.tsx
+var z = {
+  card: 1,
+  fieldError: 1,
+  textInput: 2,
+  select: 3,
+  selectFocused: 4,
+  walletActionPreviewTopGradient: 1,
+  headerContainer: 99,
+  smBanner: 99,
+  headerTop: 100,
+  navMenu: 100,
+  smNavMenu: 100,
+  navAction: 101,
+  smNavAction: 100,
+  // keep under navDropdown
+  notificationBanner: 170,
+  qrReaderVideo: 180,
+  qrReaderOverlay: 181,
+  modalOverlay: 190,
+  modalContainer: 191,
+  dropdown: 192,
+  tooltip: 193,
+  toast: 200
+};
+
+// src/components/Button.tsx
+var import_react25 = require("@emotion/react");
+var import_styled15 = __toESM(require("@emotion/styled"), 1);
+var import_lodash_es4 = require("lodash-es");
+var import_react26 = require("react");
+
+// src/router.tsx
+var import_lodash_es2 = require("lodash-es");
+var import_react5 = require("react");
+var import_react_router_dom = require("react-router-dom");
+
+// src/utils/strings.tsx
+function isString(str) {
+  return typeof str === "string";
+}
+
+// src/router.tsx
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
+function replaceParams(to, params) {
+  if (params) {
+    let toWithParams = to;
+    Object.entries((0, import_lodash_es2.omit)(params, "query")).forEach(([key, value]) => {
+      if (typeof value !== "string") {
+        throw new Error(
+          `Only 'query' may be an object. Route params must be a string, but '${key}' is not.`
+        );
+      }
+      toWithParams = toWithParams.replace(`:${key}`, value);
+    });
+    if (params.query) {
+      let query = params.query;
+      if (typeof query !== "string") {
+        query = Object.entries(params.query).map(([key, value]) => `${key}${value ? `=${value}` : ""}`).join("&");
+      }
+      toWithParams = `${toWithParams}?${query}`;
+    }
+    to = toWithParams;
+  }
+  return to;
+}
+function Link({
+  to,
+  id,
+  externalLink,
+  params,
+  children,
+  css: css6,
+  onClick,
+  className,
+  hash = null,
+  blue = false,
+  newTab = false
+}) {
+  if (!isString(to) && !externalLink && !onClick) {
+    throw new Error(
+      "Link must have either `to` or `externalLink` or `onClick` defined"
+    );
+  }
+  let toStr;
+  if (isString(to)) {
+    toStr = replaceParams(to, params);
+    toStr += hash ? `#${hash}` : "";
+  } else if (externalLink) {
+    const definedExternalLink = externalLink;
+    if (!definedExternalLink.startsWith("http")) {
+      throw new Error("Link's externalLink must start with http");
+    }
+    toStr = definedExternalLink;
+  } else {
+    toStr = "#";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_router_dom.Link,
+    {
+      to: toStr,
+      id,
+      css: css6,
+      onClick,
+      className,
+      style: { color: blue ? colors.blue43 : "inherit" },
+      target: newTab ? "_blank" : void 0,
+      rel: newTab ? "noopener noreferrer" : void 0,
+      children
+    }
+  );
+}
+
 // src/styles/typography.tsx
 var applyTypography = (theme, typographyType, size, color = "inherit", applyToAll = true) => {
   const selector = applyToAll ? "&, & *" : "&";
@@ -7958,7 +8034,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 
@@ -8104,6 +8180,9 @@ var UnstyledButton = import_styled4.default.button`
   font-weight: inherit;
 `;
 
+// src/components/typography/renderTypography.tsx
+var import_react24 = __toESM(require("react"), 1);
+
 // src/components/typography/Body.tsx
 var import_styled5 = __toESM(require("@emotion/styled"), 1);
 
@@ -8168,6 +8247,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`
@@ -8444,7 +8524,6 @@ var StyledTitle = import_styled14.default.span`
 `;
 
 // src/components/typography/renderTypography.tsx
-var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var typographyMap = {
   Display,
   Headline,
@@ -8456,15 +8535,16 @@ var typographyMap = {
   "Label Strong": LabelStrong,
   Overline,
   Code: Code2,
-  "Code Strong": () => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { children: "Unimplemented" })
+  "Code Strong": Code2
 };
 var renderTypography = (type, props) => {
   const TypographyComponent = typographyMap[type];
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TypographyComponent, __spreadValues({}, props));
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return import_react24.default.createElement(TypographyComponent, rest, children);
 };
 
 // src/components/Button.tsx
-var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var roundPaddingsX = {
   [TokenSize.ExtraSmall]: 10,
   [TokenSize.Small]: 10,
@@ -8487,7 +8567,7 @@ function getPaddingX(size, kind, isRound) {
 function getPadding({ paddingY, kind, size, iconSide, isRound }) {
   const paddingX = getPaddingX(size, 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;
@@ -8569,7 +8649,7 @@ function resolveProps(props, theme) {
   });
 }
 function Button(props) {
-  const theme = (0, import_react24.useTheme)();
+  const theme = (0, import_react25.useTheme)();
   const {
     kind,
     typography,
@@ -8601,34 +8681,34 @@ function Button(props) {
     tooltipText,
     borderRadius
   } = resolveProps(props, theme);
-  const tooltipId = (0, import_react25.useRef)((0, import_lodash_es4.uniqueId)());
+  const tooltipId = (0, import_react26.useRef)((0, import_lodash_es4.uniqueId)());
   const iconSize = size === "ExtraSmall" ? 12 : 16;
   let currentIcon = null;
   if (loading) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       ButtonIcon,
       {
         iconSide,
         text,
         typography,
         kind,
-        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Loading, { size: iconSize, center: false })
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Loading, { size: iconSize, center: false })
       }
     );
   } else if (icon) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       ButtonIcon,
       {
         iconSide,
         text,
         typography,
         kind,
-        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: icon, width: iconSize, color: typography.color })
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: icon, width: iconSize, color: typography.color })
       }
     );
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
       "div",
       __spreadProps(__spreadValues({}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
         css: {
@@ -8639,7 +8719,7 @@ function Button(props) {
         },
         children: [
           iconSide === "left" && currentIcon,
-          text && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          text && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
             "div",
             {
               css: {
@@ -8657,7 +8737,7 @@ function Button(props) {
         ]
       })
     ),
-    tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Tooltip, { id: tooltipId.current, content: tooltipText }) : null
+    tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { id: tooltipId.current, content: tooltipText }) : null
   ] });
   const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
@@ -8687,9 +8767,9 @@ function Button(props) {
     zIndex
   };
   if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
   }
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     ButtonHrefLink,
     __spreadProps(__spreadValues({}, commonProps), {
       href,
@@ -8697,7 +8777,7 @@ function Button(props) {
       target: "_blank",
       children: content
     })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
+  ) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
 var buttonStyle = ({
   paddingY,
@@ -8717,7 +8797,7 @@ var buttonStyle = ({
   hoverBackgroundColor,
   hoverBorderColor
 }) => {
-  return import_react24.css`
+  return import_react25.css`
     display: inline-flex;
     opacity: ${disabled && !isLoading ? 0.2 : 1};
     ${disabled ? "pointer-events: none;" : ""}
@@ -8781,15 +8861,18 @@ var ButtonHrefLink = import_styled15.default.a`
 `;
 
 // src/components/Drawer.tsx
-var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
 var Drawer = (props) => {
-  const [isOpen, setIsOpen] = (0, import_react26.useState)(true);
-  const [lastY, setLastY] = (0, import_react26.useState)(null);
-  const [totalDeltaY, setTotalDeltaY] = (0, import_react26.useState)(0);
-  const [fractionVisible, setFractionVisible] = (0, import_react26.useState)(1);
-  const [grabbing, setGrabbing] = (0, import_react26.useState)(false);
-  const drawerContainerRef = (0, import_react26.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react27.useState)(true);
+  const [lastY, setLastY] = (0, import_react27.useState)(null);
+  const [totalDeltaY, setTotalDeltaY] = (0, import_react27.useState)(0);
+  const [fractionVisible, setFractionVisible] = (0, import_react27.useState)(1);
+  const [grabbing, setGrabbing] = (0, import_react27.useState)(false);
+  const drawerContainerRef = (0, import_react27.useRef)(null);
   const handleClose = () => {
+    if (props.nonDismissable) {
+      return;
+    }
     setIsOpen(false);
     setTimeout(() => {
       props.onClose && props.onClose();
@@ -8799,6 +8882,9 @@ var Drawer = (props) => {
   };
   const handleTouchMove = (event) => {
     var _a, _b;
+    if (props.nonDismissable) {
+      return;
+    }
     if (lastY === null) {
       setLastY(event.touches[0].clientY);
     } else {
@@ -8815,9 +8901,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();
@@ -8825,8 +8917,8 @@ var Drawer = (props) => {
     setTotalDeltaY(0);
     setLastY(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       Background,
       {
         isOpen,
@@ -8834,7 +8926,7 @@ var Drawer = (props) => {
         onClick: handleClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       DrawerContainer,
       {
         isOpen,
@@ -8845,16 +8937,17 @@ var Drawer = (props) => {
         grabbing,
         ref: drawerContainerRef,
         children: [
-          props.grabber && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Grabber, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(GrabberBar, {}) }),
-          props.closeButton && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(CloseButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          props.grabber && !props.nonDismissable && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Grabber, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(GrabberBar, {}) }),
+          props.handleBack && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(BackButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime131.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_runtime131.jsx)(CloseButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(CloseButton, { onClick: handleClose, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: "Close", width: 12 }) }) }),
           props.children
         ]
       }
@@ -8887,16 +8980,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;"};
@@ -8928,7 +9024,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;
@@ -8942,12 +9038,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;