@lightsparkdev/ui 1.0.1 → 1.0.3

package/dist/components/Drawer.cjs

@@ -147,7 +147,7 @@ var colors = baseColors;
 function isColorKey(key) {
   return key in colors;
 }
-function hcNeutralFromBg(bgHex, defaultHex, altHex) {
+function hcNeutralFromBg(bgHex, defaultHex = colors.black, altHex = colors.white) {
   const bgRGB = hexToRGB(bgHex);
   const hcRGB = hexToRGB(defaultHex);
   if (!bgRGB || !hcRGB)
@@ -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,13 +282,14 @@ 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
 var buttonsThemeBase = {
   defaultSize: "Small",
-  defaultTypography: "Body Strong",
+  defaultTypographyType: "Body Strong",
+  defaultColor: "text",
   defaultBorderRadius: 32,
   defaultBorderWidth: 1,
   defaultBackgroundColor: "bg",
@@ -425,6 +313,7 @@ var buttonsThemeBase = {
 var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
   kinds: {
     primary: {
+      defaultColor: "bg",
       defaultBorderWidth: 0,
       defaultBackgroundColor: "c9Neutral",
       defaultBorderColor: "c9Neutral",
@@ -452,7 +341,20 @@ var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
       defaultHoverBorderColor: ["gray90", "gray20"]
     },
     blue39: {
-      defaultBorderColor: "blue39"
+      defaultBorderColor: "blue39",
+      defaultColor: "gray98"
+    },
+    blue43: {
+      defaultColor: "white"
+    },
+    green33: {
+      defaultColor: "white"
+    },
+    purple55: {
+      defaultColor: "white"
+    },
+    danger: {
+      defaultColor: "white"
     }
   }
 });
@@ -3695,7 +3597,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3743,7 +3646,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3782,6 +3686,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"
@@ -3826,28 +3731,30 @@ var bridgeBaseSettings = {
     code: "Monaco"
   }),
   buttons: (0, import_deepmerge.default)(buttonsThemeBase, {
-    defaultTypography: "Title",
+    defaultTypographyType: "Title",
     defaultSize: "Medium",
     defaultBorderRadius: 8,
     defaultBorderWidth: 0,
+    defaultPaddingsY: {
+      ExtraSmall: 14,
+      Small: 14,
+      Schmedium: 14,
+      Medium: 14,
+      Mlarge: 14,
+      Large: 14
+    },
     kinds: {
       primary: {
+        defaultColor: "bg",
         defaultBackgroundColor: "blue39",
         defaultHoverBackgroundColor: "blue37"
       },
       ghost: {
+        defaultColor: "secondary",
         defaultBackgroundColor: "transparent",
         defaultBorderWidth: 0,
         defaultHoverBackgroundColor: "transparent",
-        defaultHoverBorderColor: "transparent",
-        defaultPaddingsY: {
-          ExtraSmall: 0,
-          Small: 0,
-          Schmedium: 0,
-          Medium: 0,
-          Mlarge: 0,
-          Large: 0
-        }
+        defaultHoverBorderColor: "transparent"
       },
       secondary: {
         defaultBackgroundColor: "transparent",
@@ -3864,7 +3771,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 */
@@ -3939,21 +3847,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;
@@ -3968,7 +3876,7 @@ function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
     smCSS,
     minSmMaxLgCSS,
     lgCSS,
-    css: import_react5.css`
+    css: import_react4.css`
       ${lgCSS}
       ${smCSS}
       ${minSmMaxLgCSS}
@@ -3976,12 +3884,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),
@@ -3999,7 +3907,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 {
@@ -4009,30 +3917,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" : ""};`,
@@ -4040,6 +3949,119 @@ var overlaySurface = ({
 )({ theme })}
 `;
 
+// 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_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 ? "&, & *" : "&";
@@ -4499,8 +4521,8 @@ function ArrowUpRightCircleFill() {
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M20 1.25C30.3553 1.25 38.75 9.64468 38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64468 38.75 1.25 30.3553 1.25 20C1.25 9.64468 9.64468 1.25 20 1.25ZM15.4392 12.4122C14.8869 12.4122 14.4392 12.8599 14.4392 13.4122C14.4392 13.9644 14.8869 14.4122 15.4392 14.4122H24.1736L12.7051 25.8807C12.3146 26.2713 12.3146 26.9044 12.7051 27.2949C13.0956 27.6855 13.7288 27.6855 14.1193 27.2949L25.5879 15.8263V24.5608C25.5879 25.1131 26.0356 25.5608 26.5879 25.5608C27.1402 25.5608 27.5879 25.1131 27.5879 24.5608V13.4122C27.5879 12.8599 27.1402 12.4122 26.5879 12.4122H15.4392Z",
           fill: "black"
         }
@@ -5401,8 +5423,8 @@ function Figma() {
       children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M8.01074 9.04831C8.01074 5.43178 10.9425 2.5 14.5591 2.5L25.7952 2.5C29.4118 2.5 32.3435 5.43178 32.3435 9.04831C32.3435 11.3383 31.1681 13.3537 29.3876 14.5242C31.1681 15.6947 32.3435 17.7102 32.3435 20.0001C32.3435 23.6167 29.4118 26.5485 25.7952 26.5485H25.653C23.9575 26.5485 22.4126 25.9041 21.2496 24.847V30.8806C21.2496 34.5453 18.2412 37.5 14.5944 37.5C10.9868 37.5 8.01074 34.5772 8.01074 30.9517C8.01074 28.6617 9.18619 26.6463 10.9666 25.476C9.18618 24.3055 8.01074 22.2901 8.01074 20.0001C8.01074 17.7102 9.1862 15.6947 10.9667 14.5242C9.18621 13.3537 8.01074 11.3383 8.01074 9.04831ZM14.5591 13.4517C12.1272 13.4517 10.1557 11.4802 10.1557 9.04831C10.1557 6.61641 12.1272 4.64497 14.5591 4.64497L19.1047 4.64497V13.4517H14.5591ZM19.1047 15.5966H14.5591C12.1272 15.5966 10.1557 17.5682 10.1557 20.0001C10.1557 22.4321 12.1272 24.4035 14.5591 24.4035H19.1047V15.5966ZM19.1047 26.5485H14.5591C12.1271 26.5485 10.1557 28.5198 10.1557 30.9517C10.1557 33.3746 12.1535 35.355 14.5944 35.355C17.0746 35.355 19.1047 33.3428 19.1047 30.8806V26.5485ZM25.7952 15.5966L25.653 15.5968C23.2211 15.5968 21.2496 17.5682 21.2496 20.0001C21.2496 22.4321 23.2211 24.4035 25.653 24.4035H25.7952C28.2271 24.4035 30.1986 22.4321 30.1986 20.0001C30.1986 17.5682 28.227 15.5967 25.7952 15.5966C25.7953 15.5966 25.7952 15.5966 25.7952 15.5966ZM25.7952 14.5242V13.4517H21.2496V4.64497H25.7952C28.2271 4.64497 30.1986 6.61641 30.1986 9.04831C30.1986 11.4802 28.2271 13.4517 25.7952 13.4517",
           fill: "black"
         }
@@ -7941,7 +7963,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 
@@ -8151,6 +8173,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`
@@ -8448,22 +8471,6 @@ var renderTypography = (type, props) => {
 
 // src/components/Button.tsx
 var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
-function getDefaultTextColor({ kind }) {
-  switch (kind) {
-    case "blue43":
-    case "green33":
-    case "purple55":
-    case "danger":
-      return "white";
-    case "blue39":
-      return "gray98";
-    case "primary": {
-      return "bg";
-    }
-    default:
-      return "text";
-  }
-}
 var roundPaddingsX = {
   [TokenSize.ExtraSmall]: 10,
   [TokenSize.Small]: 10,
@@ -8486,7 +8493,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;
@@ -8516,12 +8523,14 @@ function resolveProps(props, theme) {
     kind = "secondary",
     size: sizeProp,
     paddingY: paddingYType = "regular",
-    borderRadius
+    borderRadius,
+    typography: typographyProp
   } = _a, rest = __objRest(_a, [
     "kind",
     "size",
     "paddingY",
-    "borderRadius"
+    "borderRadius",
+    "typography"
   ]);
   const size = resolveProp(sizeProp, kind, "defaultSize", theme);
   const defaultPaddingsY = resolveProp(null, kind, "defaultPaddingsY", theme);
@@ -8547,9 +8556,15 @@ function resolveProps(props, theme) {
     kind,
     "defaultHoverBorderColor"
   );
+  const typography = {
+    type: (typographyProp == null ? void 0 : typographyProp.type) || resolveProp(null, kind, "defaultTypographyType", theme),
+    color: (typographyProp == null ? void 0 : typographyProp.color) || resolveProp(null, kind, "defaultColor", theme),
+    size
+  };
   return __spreadProps(__spreadValues({}, rest), {
     kind,
     size,
+    typography,
     paddingY: typeof defaultPaddingY === "number" ? defaultPaddingY : defaultPaddingY[paddingYType],
     borderRadius: resolveProp(borderRadius, kind, "defaultBorderRadius", theme),
     backgroundColor,
@@ -8593,12 +8608,6 @@ function Button(props) {
     borderRadius
   } = resolveProps(props, theme);
   const tooltipId = (0, import_react25.useRef)((0, import_lodash_es4.uniqueId)());
-  const fontColor = (typography == null ? void 0 : typography.color) || getDefaultTextColor({ kind, theme });
-  const buttonTypography = {
-    type: (typography == null ? void 0 : typography.type) || theme.buttons.defaultTypography,
-    size,
-    color: fontColor
-  };
   const iconSize = size === "ExtraSmall" ? 12 : 16;
   let currentIcon = null;
   if (loading) {
@@ -8607,7 +8616,7 @@ function Button(props) {
       {
         iconSide,
         text,
-        typography: buttonTypography,
+        typography,
         kind,
         children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Loading, { size: iconSize, center: false })
       }
@@ -8618,9 +8627,9 @@ function Button(props) {
       {
         iconSide,
         text,
-        typography: buttonTypography,
+        typography,
         kind,
-        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: icon, width: iconSize, color: fontColor })
+        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: icon, width: iconSize, color: typography.color })
       }
     );
   }
@@ -8643,10 +8652,10 @@ function Button(props) {
                 textOverflow: "ellipsis",
                 overflow: "hidden"
               },
-              children: renderTypography(buttonTypography.type, {
+              children: renderTypography(typography.type, {
                 content: text,
-                color: buttonTypography.color,
-                size: buttonTypography.size
+                color: typography.color,
+                size
               })
             }
           ),
@@ -8661,7 +8670,7 @@ function Button(props) {
     id,
     kind,
     type,
-    typography: buttonTypography,
+    typography,
     onClick,
     fullWidth,
     iconSide,
@@ -8787,6 +8796,9 @@ var Drawer = (props) => {
   const [grabbing, setGrabbing] = (0, import_react26.useState)(false);
   const drawerContainerRef = (0, import_react26.useRef)(null);
   const handleClose = () => {
+    if (props.nonDismissable) {
+      return;
+    }
     setIsOpen(false);
     setTimeout(() => {
       props.onClose && props.onClose();
@@ -8796,6 +8808,9 @@ var Drawer = (props) => {
   };
   const handleTouchMove = (event) => {
     var _a, _b;
+    if (props.nonDismissable) {
+      return;
+    }
     if (lastY === null) {
       setLastY(event.touches[0].clientY);
     } else {
@@ -8812,9 +8827,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();
@@ -8842,16 +8863,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_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
         ]
       }
@@ -8884,6 +8906,7 @@ 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;
@@ -8894,6 +8917,7 @@ var DrawerContainer = import_styled16.default.div`
   display: flex;
   flex-direction: column;
   padding: ${"72px" /* 6xl */} ${"32px" /* xl */} ${"40px" /* 2xl */} ${"32px" /* 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;"};
@@ -8940,11 +8964,32 @@ var CloseButtonContainer = import_styled16.default.div`
   border-radius: 50%;
   background-color: ${colors.grayBlue94};
   padding: ${"8px" /* 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: ${"8px" /* xs */};
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+`;
 var GrabberBar = import_styled16.default.div`
   width: 36px;
   height: 5px;