@lightsparkdev/ui 1.0.2 → 1.0.4

package/dist/components/ButtonRow.js

@@ -2,30 +2,30 @@ import {
   ButtonRow,
   ButtonRowContainer,
   StyledButtonRow
-} from "../chunk-D73OOC3E.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-WDJMAZFO.js";
+import "../chunk-MNMVZI7D.js";
+import "../chunk-DNGAINGL.js";
+import "../chunk-LGXMGWLV.js";
+import "../chunk-V523QTZQ.js";
+import "../chunk-YRZ3VNBI.js";
+import "../chunk-HPZVUEDJ.js";
+import "../chunk-7COKMITX.js";
+import "../chunk-DIKOS5R6.js";
+import "../chunk-AZOVE32P.js";
+import "../chunk-HVDX4OZJ.js";
+import "../chunk-OMY3WTAU.js";
+import "../chunk-OZQ5WPLN.js";
 import "../chunk-YMNSXZ5D.js";
-import "../chunk-6H7PZJ2A.js";
+import "../chunk-7BSME2ZU.js";
+import "../chunk-4X67A2CS.js";
 import "../chunk-OPV246QW.js";
 import "../chunk-AAFUVYVP.js";
-import "../chunk-VUXU77SU.js";
-import "../chunk-27SFWLPS.js";
-import "../chunk-6JFJDBV2.js";
+import "../chunk-OUHQXQOJ.js";
+import "../chunk-ZS7G6WIG.js";
+import "../chunk-JAPRGAB7.js";
 import "../chunk-55OQPFLF.js";
-import "../chunk-KFX7US6Y.js";
-import "../chunk-KBYU4ZQ3.js";
+import "../chunk-GQVNE3NU.js";
+import "../chunk-TNDSUTUN.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -140,8 +140,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-CZFFMEAS.js";
+import "../chunk-VNQE6KEX.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";

package/dist/components/CardPage.cjs

@@ -3545,6 +3545,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;
@@ -3581,7 +3585,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, {
@@ -3620,6 +3628,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"
@@ -3696,7 +3705,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3704,7 +3716,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 */

package/dist/components/CardPage.js

@@ -5,32 +5,32 @@ import {
   CardPageFullWidth,
   CardPageRightContentInner,
   CardPageSubtitle
-} from "../chunk-LL5YLPNM.js";
-import "../chunk-5H32AOXL.js";
-import "../chunk-D73OOC3E.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-7OJQZEVL.js";
+import "../chunk-BAGRU7JE.js";
+import "../chunk-WDJMAZFO.js";
+import "../chunk-MNMVZI7D.js";
+import "../chunk-DNGAINGL.js";
+import "../chunk-LGXMGWLV.js";
+import "../chunk-V523QTZQ.js";
+import "../chunk-YRZ3VNBI.js";
+import "../chunk-HPZVUEDJ.js";
+import "../chunk-7COKMITX.js";
+import "../chunk-DIKOS5R6.js";
+import "../chunk-AZOVE32P.js";
+import "../chunk-HVDX4OZJ.js";
+import "../chunk-OMY3WTAU.js";
+import "../chunk-OZQ5WPLN.js";
 import "../chunk-YMNSXZ5D.js";
-import "../chunk-6H7PZJ2A.js";
+import "../chunk-7BSME2ZU.js";
+import "../chunk-4X67A2CS.js";
 import "../chunk-OPV246QW.js";
 import "../chunk-AAFUVYVP.js";
-import "../chunk-VUXU77SU.js";
-import "../chunk-27SFWLPS.js";
-import "../chunk-6JFJDBV2.js";
+import "../chunk-OUHQXQOJ.js";
+import "../chunk-ZS7G6WIG.js";
+import "../chunk-JAPRGAB7.js";
 import "../chunk-55OQPFLF.js";
-import "../chunk-KFX7US6Y.js";
-import "../chunk-KBYU4ZQ3.js";
+import "../chunk-GQVNE3NU.js";
+import "../chunk-TNDSUTUN.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -145,8 +145,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-CZFFMEAS.js";
+import "../chunk-VNQE6KEX.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";

package/dist/components/Checkbox.cjs

@@ -53,6 +53,9 @@ __export(Checkbox_exports, {
 module.exports = __toCommonJS(Checkbox_exports);
 var import_styled2 = __toESM(require("@emotion/styled"), 1);
 
+// src/static/images/Checkmark.svg?url
+var Checkmark_default = 'data:image/svg+xml,<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M10.5004 1.84998L5.79662 6.63103C4.99697 7.44383 4.59714 7.85023 4.1003 7.85023C3.60346 7.85023 3.20363 7.44383 2.40398 6.63103L1.5 5.7122" stroke="white" stroke-width="1.90917" stroke-linecap="round"/>%0A</svg>%0A';
+
 // src/styles/common.tsx
 var import_react3 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
@@ -282,9 +285,6 @@ var darkGradientBg = import_react3.css`
   background: ${darkGradient};
 `;
 
-// src/static/images/Checkmark.svg?url
-var Checkmark_default = 'data:image/svg+xml,<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M10.5004 1.84998L5.79662 6.63103C4.99697 7.44383 4.59714 7.85023 4.1003 7.85023C3.60346 7.85023 3.20363 7.44383 2.40398 6.63103L1.5 5.7122" stroke="white" stroke-width="1.90917" stroke-linecap="round"/>%0A</svg>%0A';
-
 // src/components/Checkbox.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 function Checkbox({

package/dist/components/Checkbox.js

@@ -1,9 +1,9 @@
 import {
   Checkbox,
   CheckboxContainer
-} from "../chunk-CZQER3QD.js";
-import "../chunk-7NPHOJXD.js";
-import "../chunk-A4JZESAS.js";
+} from "../chunk-LFD2KVAB.js";
+import "../chunk-CZFFMEAS.js";
+import "../chunk-VNQE6KEX.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";

package/dist/components/CodeBlock.cjs

@@ -3560,6 +3560,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;
@@ -3596,7 +3600,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, {
@@ -3635,6 +3643,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"
@@ -3711,7 +3720,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3719,7 +3731,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 */
@@ -3861,11 +3874,12 @@ var overlaySurfaceBorderColor = ({
 `;
 var overlaySurface = ({
   theme,
-  important = false
+  important = false,
+  border = true
 }) => import_react4.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" : ""};`,
@@ -7829,7 +7843,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/CodeBlock.js

@@ -3,13 +3,13 @@ import {
   InlineCode,
   ProgrammingLanguageOptions,
   StyledCodeBlock
-} from "../chunk-UNULJ3P6.js";
-import "../chunk-SGSLTG65.js";
-import "../chunk-27SFWLPS.js";
-import "../chunk-6JFJDBV2.js";
+} from "../chunk-BRRDPQWW.js";
+import "../chunk-242JGEN4.js";
+import "../chunk-ZS7G6WIG.js";
+import "../chunk-JAPRGAB7.js";
 import "../chunk-55OQPFLF.js";
-import "../chunk-KFX7US6Y.js";
-import "../chunk-KBYU4ZQ3.js";
+import "../chunk-GQVNE3NU.js";
+import "../chunk-TNDSUTUN.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -124,8 +124,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-CZFFMEAS.js";
+import "../chunk-VNQE6KEX.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";

package/dist/components/CodeInput/CodeInput.cjs

@@ -3585,6 +3585,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;
@@ -3621,7 +3625,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, {
@@ -3660,6 +3668,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"
@@ -3736,7 +3745,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3744,7 +3756,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 */
@@ -3937,7 +3950,7 @@ var textInputStyle = ({
   var _a;
   return import_react5.css`
   border-radius: ${textInputBorderRadiusPx}px;
-  background-color: ${disabled ? theme.vlcNeutral : theme.bg};
+  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
   cursor: ${disabled ? "not-allowed" : "auto"};
   box-sizing: border-box;
   font-weight: ${textInputFontWeight};

package/dist/components/CodeInput/CodeInput.js

@@ -1,13 +1,13 @@
 import {
   CodeInput,
   StyledCodeInput
-} from "../../chunk-F6EVBEMN.js";
-import "../../chunk-SRHSJOES.js";
-import "../../chunk-S6AOKANU.js";
-import "../../chunk-VUXU77SU.js";
+} from "../../chunk-2P6TCMZN.js";
+import "../../chunk-TNISOOCF.js";
+import "../../chunk-7RMHMFS2.js";
+import "../../chunk-OUHQXQOJ.js";
 import "../../chunk-55OQPFLF.js";
-import "../../chunk-7NPHOJXD.js";
-import "../../chunk-A4JZESAS.js";
+import "../../chunk-CZFFMEAS.js";
+import "../../chunk-VNQE6KEX.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";

package/dist/components/CodeInput/SingleCodeInput.cjs

@@ -3580,6 +3580,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;
@@ -3616,7 +3620,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, {
@@ -3655,6 +3663,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"
@@ -3731,7 +3740,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3739,7 +3751,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 */
@@ -3932,7 +3945,7 @@ var textInputStyle = ({
   var _a;
   return import_react5.css`
   border-radius: ${textInputBorderRadiusPx}px;
-  background-color: ${disabled ? theme.vlcNeutral : theme.bg};
+  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
   cursor: ${disabled ? "not-allowed" : "auto"};
   box-sizing: border-box;
   font-weight: ${textInputFontWeight};

package/dist/components/CodeInput/SingleCodeInput.js

@@ -1,11 +1,11 @@
 import {
   SingleCodeInput
-} from "../../chunk-SRHSJOES.js";
-import "../../chunk-S6AOKANU.js";
-import "../../chunk-VUXU77SU.js";
+} from "../../chunk-TNISOOCF.js";
+import "../../chunk-7RMHMFS2.js";
+import "../../chunk-OUHQXQOJ.js";
 import "../../chunk-55OQPFLF.js";
-import "../../chunk-7NPHOJXD.js";
-import "../../chunk-A4JZESAS.js";
+import "../../chunk-CZFFMEAS.js";
+import "../../chunk-VNQE6KEX.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";

package/dist/components/Collapsible.cjs

@@ -3527,6 +3527,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;
@@ -3563,7 +3567,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, {
@@ -3602,6 +3610,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"
@@ -3678,7 +3687,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3686,7 +3698,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 */
@@ -3796,6 +3809,68 @@ var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
 
+// src/styles/tokens/spacing.tsx
+var n = {
+  "4xs": 2,
+  "3xs": 4,
+  "2xs": 6,
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  "2xl": 40,
+  "3xl": 48,
+  "4xl": 56,
+  "5xl": 64,
+  "6xl": 72,
+  "7xl": 80,
+  "8xl": 96,
+  "9xl": 112,
+  "10xl": 128,
+  "11xl": 160
+};
+var Spacing = {
+  "4xs": n["4xs"],
+  "3xs": n["3xs"],
+  "2xs": n["2xs"],
+  xs: n.xs,
+  sm: n.sm,
+  md: n.md,
+  lg: n.lg,
+  xl: n.xl,
+  "2xl": n["2xl"],
+  "3xl": n["3xl"],
+  "4xl": n["4xl"],
+  "5xl": n["5xl"],
+  "6xl": n["6xl"],
+  "7xl": n["7xl"],
+  "8xl": n["8xl"],
+  "9xl": n["9xl"],
+  "10xl": n["10xl"],
+  "11xl": n["11xl"],
+  px: {
+    "4xs": `${n["4xs"]}px`,
+    "3xs": `${n["3xs"]}px`,
+    "2xs": `${n["2xs"]}px`,
+    xs: `${n.xs}px`,
+    sm: `${n.sm}px`,
+    md: `${n.md}px`,
+    lg: `${n.lg}px`,
+    xl: `${n.xl}px`,
+    "2xl": `${n["2xl"]}px`,
+    "3xl": `${n["3xl"]}px`,
+    "4xl": `${n["4xl"]}px`,
+    "5xl": `${n["5xl"]}px`,
+    "6xl": `${n["6xl"]}px`,
+    "7xl": `${n["7xl"]}px`,
+    "8xl": `${n["8xl"]}px`,
+    "9xl": `${n["9xl"]}px`,
+    "10xl": `${n["10xl"]}px`,
+    "11xl": `${n["11xl"]}px`
+  }
+};
+
 // src/styles/utils.tsx
 var import_react5 = require("@emotion/react");
 function pxToRems(rems, asNum = false) {
@@ -7747,7 +7822,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 
@@ -7880,9 +7955,9 @@ var CollapsingContainer = import_styled3.default.div`
   }
 `;
 var InnerPadding = import_styled3.default.div`
-  padding: ${"4px" /* 3xs */} 0 ${"4px" /* 3xs */}
-    ${(props) => props.contentIndent ? "16px" /* md */ : "0"};
-  gap: ${"2px" /* 4xs */};
+  padding: ${Spacing.px["3xs"]} 0 ${Spacing.px["3xs"]}
+    ${(props) => props.contentIndent ? Spacing.px.md : "0"};
+  gap: ${Spacing.px["4xs"]};
   display: flex;
   flex-direction: column;
 `;

package/dist/components/Collapsible.js

@@ -3,10 +3,10 @@ import {
   CollapsingContainer,
   StyledCollapsible,
   StyledCollapsibleButton
-} from "../chunk-ZNZAY47J.js";
-import "../chunk-3XSQV5U4.js";
-import "../chunk-KFX7US6Y.js";
-import "../chunk-KBYU4ZQ3.js";
+} from "../chunk-W2N5QUG6.js";
+import "../chunk-E5DUKMCU.js";
+import "../chunk-GQVNE3NU.js";
+import "../chunk-TNDSUTUN.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -121,8 +121,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-CZFFMEAS.js";
+import "../chunk-VNQE6KEX.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";