@lightsparkdev/ui 1.0.2 → 1.0.3

package/dist/components/Drawer.cjs

@@ -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
@@ -3710,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),
@@ -3758,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, {
@@ -3797,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"
@@ -3881,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 */
@@ -3956,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;
@@ -3985,7 +3876,7 @@ function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
     smCSS,
     minSmMaxLgCSS,
     lgCSS,
-    css: import_react5.css`
+    css: import_react4.css`
       ${lgCSS}
       ${smCSS}
       ${minSmMaxLgCSS}
@@ -3993,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),
@@ -4016,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 {
@@ -4026,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" : ""};`,
@@ -4057,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 ? "&, & *" : "&";
@@ -7958,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")};
 
       /* 
@@ -8168,6 +8173,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`
@@ -8487,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;
@@ -8790,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();
@@ -8799,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 {
@@ -8815,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();
@@ -8845,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
         ]
       }
@@ -8887,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;
@@ -8897,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;"};
@@ -8943,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;

package/dist/components/Drawer.d.cts

@@ -5,6 +5,8 @@ interface Props {
     onClose?: () => void;
     grabber?: boolean;
     closeButton?: boolean;
+    nonDismissable?: boolean;
+    handleBack?: (() => void) | undefined;
 }
 declare const Drawer: (props: Props) => _emotion_react_jsx_runtime.JSX.Element;
 

package/dist/components/Drawer.d.ts

@@ -5,6 +5,8 @@ interface Props {
     onClose?: () => void;
     grabber?: boolean;
     closeButton?: boolean;
+    nonDismissable?: boolean;
+    handleBack?: (() => void) | undefined;
 }
 declare const Drawer: (props: Props) => _emotion_react_jsx_runtime.JSX.Element;
 

package/dist/components/Drawer.js

@@ -1,30 +1,30 @@
 "use client";
 import {
   Drawer
-} from "../chunk-467PLJO3.js";
-import "../chunk-EV6PGQPM.js";
-import "../chunk-DCFB5MJ7.js";
-import "../chunk-BMSSV6NX.js";
-import "../chunk-SKXCT2FQ.js";
-import "../chunk-56QJRFP2.js";
-import "../chunk-CZCPVHVB.js";
-import "../chunk-UBYBILLK.js";
-import "../chunk-GNVEN6UE.js";
-import "../chunk-HRZNVE2K.js";
-import "../chunk-CMQELZES.js";
-import "../chunk-TM3C4LEG.js";
-import "../chunk-HP4VPMN7.js";
-import "../chunk-PNSZAJL7.js";
+} from "../chunk-JNNJVBHF.js";
+import "../chunk-SLKPLSJU.js";
+import "../chunk-VXKNN4SF.js";
+import "../chunk-5TTLUOJ5.js";
+import "../chunk-BDZ46Z2I.js";
+import "../chunk-B6S7Y4K7.js";
+import "../chunk-GSKTHUQJ.js";
+import "../chunk-WGKUDRZ7.js";
+import "../chunk-2AGBCGOW.js";
+import "../chunk-MRGHRTKA.js";
+import "../chunk-35PJW7RT.js";
+import "../chunk-GWHKALYQ.js";
+import "../chunk-WTMJTGW4.js";
+import "../chunk-CRTTTIAD.js";
 import "../chunk-YMNSXZ5D.js";
-import "../chunk-6H7PZJ2A.js";
+import "../chunk-XDP7GCYE.js";
 import "../chunk-OPV246QW.js";
 import "../chunk-AAFUVYVP.js";
-import "../chunk-VUXU77SU.js";
-import "../chunk-27SFWLPS.js";
-import "../chunk-6JFJDBV2.js";
+import "../chunk-4C2TISN7.js";
+import "../chunk-RPNTFEXE.js";
+import "../chunk-LTCJ6LNO.js";
 import "../chunk-55OQPFLF.js";
 import "../chunk-3XSQV5U4.js";
-import "../chunk-KBYU4ZQ3.js";
+import "../chunk-I3FI3FNP.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -139,8 +139,8 @@ import "../chunk-VI6WTKMV.js";
 import "../chunk-QW2INB5A.js";
 import "../chunk-JLD7MGLC.js";
 import "../chunk-DW6LFUI2.js";
-import "../chunk-7NPHOJXD.js";
-import "../chunk-A4JZESAS.js";
+import "../chunk-PG2W2HVB.js";
+import "../chunk-IBZBPQMZ.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";

package/dist/components/Dropdown.cjs

@@ -3595,7 +3595,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),
@@ -3643,7 +3644,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, {
@@ -3682,6 +3684,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"
@@ -3766,7 +3769,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 */
@@ -3908,11 +3912,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" : ""};`,
@@ -7834,7 +7839,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 

package/dist/components/Dropdown.d.cts

@@ -3,7 +3,7 @@ import { CSSInterpolation } from '@emotion/css';
 import { CSSObject } from '@emotion/styled';
 import { ReactNode, RefObject } from 'react';
 import { ExternalLink, RouteParams, RouteHash } from '../router.cjs';
-import { W as WithTheme } from '../buttons-b7f56076.js';
+import { W as WithTheme } from '../buttons-36cdd0fe.js';
 import { IconName } from './Icon/types.cjs';
 import '@emotion/react';
 import 'react-router-dom';

package/dist/components/Dropdown.d.ts

@@ -3,7 +3,7 @@ import { CSSInterpolation } from '@emotion/css';
 import { CSSObject } from '@emotion/styled';
 import { ReactNode, RefObject } from 'react';
 import { ExternalLink, RouteParams, RouteHash } from '../router.js';
-import { W as WithTheme } from '../buttons-e4eb84a2.js';
+import { W as WithTheme } from '../buttons-35280bfe.js';
 import { IconName } from './Icon/types.js';
 import '@emotion/react';
 import 'react-router-dom';