@lightsparkdev/ui 1.0.3 → 1.0.5

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 = {
@@ -97,7 +97,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -121,10 +120,13 @@ var baseColors = __spreadProps(__spreadValues({}, neutral), {
   blue37: "#21529c",
   blue58: "#28BFFF",
   // less than 50% saturated blue
+  grayBlue5: "#0c0d0f",
   grayBlue9: "#16171A",
+  grayBlue18: "#21283a",
   grayBlue32: "#4F5156",
   grayBlue43: "#686A72",
   grayBlue45: "#676F80",
+  grayBlue57: "#8B8E98",
   grayBlue67: "#9BA7B9",
   grayBlue80: "#C0C9D6",
   grayBlue88: "#DEDFE4",
@@ -3597,8 +3599,7 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning,
-  inputBackground: colors.white
+  warning: colors.warning
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3610,6 +3611,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;
@@ -3647,7 +3652,10 @@ var darkBaseTheme = {
   warning: colors.warning,
   buttons: defaultButtonsTheme,
   loading: "LoadingSpinner",
-  inputBackground: colors.black
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3763,7 +3771,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3949,6 +3960,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/z-index.tsx
 var z = {
   card: 1,
@@ -3976,10 +4049,10 @@ var z = {
 };
 
 // src/components/Button.tsx
-var import_react24 = require("@emotion/react");
+var import_react25 = require("@emotion/react");
 var import_styled15 = __toESM(require("@emotion/styled"), 1);
 var import_lodash_es4 = require("lodash-es");
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/router.tsx
 var import_lodash_es2 = require("lodash-es");
@@ -8109,6 +8182,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);
 
@@ -8450,7 +8526,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,
@@ -8462,15 +8537,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,
@@ -8575,7 +8651,7 @@ function resolveProps(props, theme) {
   });
 }
 function Button(props) {
-  const theme = (0, import_react24.useTheme)();
+  const theme = (0, import_react25.useTheme)();
   const {
     kind,
     typography,
@@ -8607,34 +8683,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: {
@@ -8645,7 +8721,7 @@ function Button(props) {
         },
         children: [
           iconSide === "left" && currentIcon,
-          text && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          text && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
             "div",
             {
               css: {
@@ -8663,7 +8739,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 = {
@@ -8693,9 +8769,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,
@@ -8703,7 +8779,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,
@@ -8723,7 +8799,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;" : ""}
@@ -8787,14 +8863,14 @@ 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;
@@ -8843,8 +8919,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,
@@ -8852,7 +8928,7 @@ var Drawer = (props) => {
         onClick: handleClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       DrawerContainer,
       {
         isOpen,
@@ -8863,8 +8939,8 @@ var Drawer = (props) => {
         grabbing,
         ref: drawerContainerRef,
         children: [
-          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)(
+          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: props.handleBack,
@@ -8873,7 +8949,7 @@ var Drawer = (props) => {
               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.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
         ]
       }
@@ -8913,10 +8989,11 @@ var DrawerContainer = import_styled16.default.div`
   bottom: 0;
   transform: translateY(${(props) => `${props.totalDeltaY}px`});
   z-index: ${z.modalContainer};
-  border-radius: ${"24px" /* lg */} ${"24px" /* lg */} 0 0;
+  border-radius: ${Spacing.px.lg} ${Spacing.px.lg} 0 0;
   display: flex;
   flex-direction: column;
-  padding: ${"72px" /* 6xl */} ${"32px" /* xl */} ${"40px" /* 2xl */} ${"32px" /* xl */};
+  padding: ${Spacing.px["6xl"]} ${Spacing.px.xl} ${Spacing.px["2xl"]}
+    ${Spacing.px.xl};
   overflow-y: scroll;
 
   // Only smooth transition when not grabbing, otherwise dragging will feel very laggy
@@ -8949,7 +9026,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;
@@ -8963,7 +9040,7 @@ var CloseButtonContainer = import_styled16.default.div`
   right: 20px;
   border-radius: 50%;
   background-color: ${colors.grayBlue94};
-  padding: ${"8px" /* xs */};
+  padding: ${Spacing.px.xs};
   height: 30px;
   width: 30px;
   display: flex;
@@ -8984,7 +9061,7 @@ var BackButtonContainer = import_styled16.default.div`
   top: 20px;
   left: 20px;
   border-radius: 50%;
-  padding: ${"8px" /* xs */};
+  padding: ${Spacing.px.xs};
   height: 30px;
   width: 30px;
   display: flex;

package/dist/components/Drawer.js

@@ -1,30 +1,30 @@
 "use client";
 import {
   Drawer
-} 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";
+} from "../chunk-QBRCVOJ4.js";
+import "../chunk-NK7WH3TK.js";
+import "../chunk-SIYZ5PZT.js";
+import "../chunk-RQLRNKOP.js";
+import "../chunk-GGWFUEDW.js";
+import "../chunk-XLKL3DNK.js";
+import "../chunk-HLZNFEDV.js";
+import "../chunk-ZR2TARGX.js";
+import "../chunk-IXAXRBFS.js";
+import "../chunk-4EV5IUUJ.js";
+import "../chunk-PBLWYVQF.js";
+import "../chunk-QON4D7N2.js";
+import "../chunk-BNHCCR3C.js";
 import "../chunk-YMNSXZ5D.js";
-import "../chunk-XDP7GCYE.js";
+import "../chunk-IH5SIRJL.js";
+import "../chunk-HNK2KIC7.js";
 import "../chunk-OPV246QW.js";
-import "../chunk-AAFUVYVP.js";
-import "../chunk-4C2TISN7.js";
-import "../chunk-RPNTFEXE.js";
-import "../chunk-LTCJ6LNO.js";
+import "../chunk-SCIQSZSW.js";
+import "../chunk-OPUCWQMK.js";
+import "../chunk-H3UUVMZ3.js";
+import "../chunk-TN5UPDZG.js";
 import "../chunk-55OQPFLF.js";
-import "../chunk-3XSQV5U4.js";
-import "../chunk-I3FI3FNP.js";
+import "../chunk-E5DUKMCU.js";
+import "../chunk-LAGOF7IU.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -139,12 +139,12 @@ import "../chunk-VI6WTKMV.js";
 import "../chunk-QW2INB5A.js";
 import "../chunk-JLD7MGLC.js";
 import "../chunk-DW6LFUI2.js";
-import "../chunk-PG2W2HVB.js";
-import "../chunk-IBZBPQMZ.js";
+import "../chunk-YG5BANJH.js";
+import "../chunk-UAUAYQ3C.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";
-import "../chunk-XUWFUTR4.js";
+import "../chunk-KPAVY3UH.js";
 import "../chunk-LOPKRCGI.js";
 export {
   Drawer

package/dist/components/Dropdown.cjs

@@ -71,7 +71,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -95,10 +94,13 @@ var baseColors = __spreadProps(__spreadValues({}, neutral), {
   blue37: "#21529c",
   blue58: "#28BFFF",
   // less than 50% saturated blue
+  grayBlue5: "#0c0d0f",
   grayBlue9: "#16171A",
+  grayBlue18: "#21283a",
   grayBlue32: "#4F5156",
   grayBlue43: "#686A72",
   grayBlue45: "#676F80",
+  grayBlue57: "#8B8E98",
   grayBlue67: "#9BA7B9",
   grayBlue80: "#C0C9D6",
   grayBlue88: "#DEDFE4",
@@ -3595,8 +3597,7 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning,
-  inputBackground: colors.white
+  warning: colors.warning
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3608,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;
@@ -3645,7 +3650,10 @@ var darkBaseTheme = {
   warning: colors.warning,
   buttons: defaultButtonsTheme,
   loading: "LoadingSpinner",
-  inputBackground: colors.black
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3761,7 +3769,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,

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-36cdd0fe.js';
+import { W as WithTheme } from '../themes-37e92940.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-35280bfe.js';
+import { W as WithTheme } from '../themes-832e46b2.js';
 import { IconName } from './Icon/types.js';
 import '@emotion/react';
 import 'react-router-dom';

package/dist/components/Dropdown.js

@@ -1,11 +1,11 @@
 import {
   Dropdown
-} from "../chunk-XM2HQVUK.js";
+} from "../chunk-4IHNUHE3.js";
 import "../chunk-VQVEZVAG.js";
-import "../chunk-AAFUVYVP.js";
-import "../chunk-LTCJ6LNO.js";
+import "../chunk-SCIQSZSW.js";
+import "../chunk-TN5UPDZG.js";
 import "../chunk-55OQPFLF.js";
-import "../chunk-I3FI3FNP.js";
+import "../chunk-LAGOF7IU.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -120,12 +120,12 @@ import "../chunk-VI6WTKMV.js";
 import "../chunk-QW2INB5A.js";
 import "../chunk-JLD7MGLC.js";
 import "../chunk-DW6LFUI2.js";
-import "../chunk-PG2W2HVB.js";
-import "../chunk-IBZBPQMZ.js";
+import "../chunk-YG5BANJH.js";
+import "../chunk-UAUAYQ3C.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";
-import "../chunk-XUWFUTR4.js";
+import "../chunk-KPAVY3UH.js";
 import "../chunk-LOPKRCGI.js";
 export {
   Dropdown

package/dist/components/FileInput.cjs

@@ -170,7 +170,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -194,10 +193,13 @@ var baseColors = __spreadProps(__spreadValues({}, neutral), {
   blue37: "#21529c",
   blue58: "#28BFFF",
   // less than 50% saturated blue
+  grayBlue5: "#0c0d0f",
   grayBlue9: "#16171A",
+  grayBlue18: "#21283a",
   grayBlue32: "#4F5156",
   grayBlue43: "#686A72",
   grayBlue45: "#676F80",
+  grayBlue57: "#8B8E98",
   grayBlue67: "#9BA7B9",
   grayBlue80: "#C0C9D6",
   grayBlue88: "#DEDFE4",
@@ -3518,8 +3520,7 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning,
-  inputBackground: colors.white
+  warning: colors.warning
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3531,6 +3532,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;
@@ -3568,7 +3573,10 @@ var darkBaseTheme = {
   warning: colors.warning,
   buttons: defaultButtonsTheme,
   loading: "LoadingSpinner",
-  inputBackground: colors.black
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3684,7 +3692,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,