@lightsparkdev/ui 1.1.0 → 1.1.1

package/dist/{chunk-FCPL3OSG.cjs → chunk-2X7TY7WF.cjs}

@@ -3,44 +3,44 @@
 var _chunkDCH43ZYZcjs = require('./chunk-DCH43ZYZ.cjs');
 
 
-var _chunkXQWHIGTVcjs = require('./chunk-XQWHIGTV.cjs');
+var _chunkJHMM3LEXcjs = require('./chunk-JHMM3LEX.cjs');
 
 
-var _chunkUTDID6QPcjs = require('./chunk-UTDID6QP.cjs');
+var _chunkK52UQVCMcjs = require('./chunk-K52UQVCM.cjs');
 
 
-var _chunkLTV6DUFEcjs = require('./chunk-LTV6DUFE.cjs');
+var _chunkFTJZZWYScjs = require('./chunk-FTJZZWYS.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
+var _chunkVXW4GOMOcjs = require('./chunk-VXW4GOMO.cjs');
 
-var _chunkFOUSEEFHcjs = require('./chunk-FOUSEEFH.cjs');
 
+var _chunkR46DRG52cjs = require('./chunk-R46DRG52.cjs');
 
-var _chunkPMF5K72Fcjs = require('./chunk-PMF5K72F.cjs');
 
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
-var _chunk7H2OXTENcjs = require('./chunk-7H2OXTEN.cjs');
 
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunk4UFYMBJKcjs = require('./chunk-4UFYMBJK.cjs');
+var _chunkSFVPZBMVcjs = require('./chunk-SFVPZBMV.cjs');
 
 
-var _chunkK5JJ5ZJPcjs = require('./chunk-K5JJ5ZJP.cjs');
+var _chunk6OSTNEFIcjs = require('./chunk-6OSTNEFI.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkXQNOVNF4cjs = require('./chunk-XQNOVNF4.cjs');
 
 
-var _chunk6Z6ZBZEJcjs = require('./chunk-6Z6ZBZEJ.cjs');
+var _chunk4N5EXQIScjs = require('./chunk-4N5EXQIS.cjs');
 
 
 
 
 
-var _chunkFPQ2OUYXcjs = require('./chunk-FPQ2OUYX.cjs');
+var _chunkU35SY546cjs = require('./chunk-U35SY546.cjs');
 
 
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
@@ -102,7 +102,10 @@ function Modal({
   handleBack,
   appendToElement,
   bottomContent,
-  topLeftIcon
+  topLeftIcon,
+  drawerKind,
+  drawerPadding,
+  drawerCloseButton = true
 }) {
   const visibleChangedRef = _react.useRef.call(void 0, false);
   const [visibleChanged, setVisibleChanged] = _react.useState.call(void 0, false);
@@ -215,10 +218,10 @@ function Modal({
   const buttonContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
       var _b = _a, { placement, text } = _b, rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _b, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4UFYMBJKcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVXW4GOMOcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     }),
     displayCancelAbove && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk4UFYMBJKcjs.Button,
+      _chunkVXW4GOMOcjs.Button,
       {
         disabled: cancelDisabled,
         onClick: onClickCancel,
@@ -226,7 +229,7 @@ function Modal({
       }
     ),
     (onSubmit || submitLink) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk4UFYMBJKcjs.Button,
+      _chunkVXW4GOMOcjs.Button,
       {
         kind: "primary",
         disabled: submitDisabled,
@@ -242,7 +245,7 @@ function Modal({
       }
     ),
     displayCancelBelow && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk4UFYMBJKcjs.Button,
+      _chunkVXW4GOMOcjs.Button,
       {
         disabled: cancelDisabled,
         onClick: onClickCancel,
@@ -251,7 +254,7 @@ function Modal({
     ),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
       var _d = _c, { placement, text } = _d, rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _d, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4UFYMBJKcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVXW4GOMOcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     })
   ] });
   let titleContent = null;
@@ -261,10 +264,10 @@ function Modal({
       heading: "h4",
       size: "Small"
     };
-    const titleNodesWithTypography = _chunkFOUSEEFHcjs.setDefaultReactNodesTypography.call(void 0, title, {
+    const titleNodesWithTypography = _chunkSFVPZBMVcjs.setDefaultReactNodesTypography.call(void 0, title, {
       default: defaultTypography
     });
-    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunkPMF5K72Fcjs.toReactNodes.call(void 0, titleNodesWithTypography) });
+    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunk6OSTNEFIcjs.toReactNodes.call(void 0, titleNodesWithTypography) });
   }
   let descriptionContent = null;
   if (description) {
@@ -272,23 +275,23 @@ function Modal({
       type: "Body",
       size: "ExtraSmall"
     };
-    const descriptionNodesWithTypography = _chunkFOUSEEFHcjs.setDefaultReactNodesTypography.call(void 0, 
+    const descriptionNodesWithTypography = _chunkSFVPZBMVcjs.setDefaultReactNodesTypography.call(void 0, 
       description,
       { default: defaultTypography }
     );
-    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunkPMF5K72Fcjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
+    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunk6OSTNEFIcjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
   }
   let topContentNode = null;
   if (topContent) {
     if (_chunkDCH43ZYZcjs.isReactNode.call(void 0, topContent)) {
       topContentNode = topContent;
     } else {
-      topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLTV6DUFEcjs.IconWithCircleBackground, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topContent)) });
+      topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkK52UQVCMcjs.IconWithCircleBackground, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topContent)) });
     }
   }
   const modalContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     progressBar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkXQWHIGTVcjs.ProgressBar,
+      _chunkJHMM3LEXcjs.ProgressBar,
       {
         progressPercentage: progressBar.progressPercentage,
         isSm: progressBar.isSm
@@ -303,12 +306,15 @@ function Modal({
   let content;
   if (smKind === "drawer" && isSm) {
     content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkUTDID6QPcjs.Drawer,
+      _chunkFTJZZWYScjs.Drawer,
       {
         onClose: () => onClickCloseButton(),
-        closeButton: true,
+        closeButton: drawerCloseButton,
         nonDismissable,
         handleBack,
+        kind: drawerKind != null ? drawerKind : "default",
+        padding: drawerPadding !== void 0 ? `${drawerPadding}px` : void 0,
+        top,
         children: modalContent
       }
     );
@@ -326,12 +332,12 @@ function Modal({
           },
           role: "dialog",
           ref: modalContainerRef,
-          top: top || (smKind === "default" ? _chunkFPQ2OUYXcjs.standardContentInset.smPx : 0),
+          top: top || (smKind === "default" ? _chunkU35SY546cjs.standardContentInset.smPx : 0),
           children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalContent, { width, ghost, smKind, children: [
             !firstFocusRef && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
             !ghost && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalNavigation, { children: [
-              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6Z6ZBZEJcjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6Z6ZBZEJcjs.Icon, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topLeftIcon)) : null,
-              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6Z6ZBZEJcjs.Icon, { name: "Close", width: 9 }) })
+              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4N5EXQIScjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4N5EXQIScjs.Icon, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topLeftIcon)) : null,
+              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4N5EXQIScjs.Icon, { name: "Close", width: 9 }) })
             ] }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContentInner, { ghost, children: modalContent }),
             bottomContent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "auto" }, children: bottomContent })
@@ -345,7 +351,7 @@ function Modal({
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = _styled2.default.call(void 0, _chunkK5JJ5ZJPcjs.UnstyledButton)`
+var DefaultFocusTarget = _styled2.default.call(void 0, _chunkR46DRG52cjs.UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
@@ -390,7 +396,7 @@ var ModalButtonRow = _styled2.default.div`
   ${_chunkKW3JYLRIcjs.bp.minSm(`display: flex;`)}
   gap: 10px;
 
-  ${_chunk4UFYMBJKcjs.ButtonSelector.call(void 0, )} {
+  ${_chunkVXW4GOMOcjs.ButtonSelector.call(void 0, )} {
     width: 50%;
     ${_chunkKW3JYLRIcjs.bp.sm(`
       width: 100%;
@@ -402,7 +408,7 @@ var ModalButtonColumn = _styled2.default.div`
   flex-direction: column;
   gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
 
-  ${_chunk4UFYMBJKcjs.ButtonSelector.call(void 0, )} {
+  ${_chunkVXW4GOMOcjs.ButtonSelector.call(void 0, )} {
     width: 100%;
   }
 
@@ -418,10 +424,10 @@ var ModalContent = _styled2.default.div`
   pointer-events: auto;
   transition: width 0.25s ease-in;
 
-  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkFPQ2OUYXcjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
+  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkU35SY546cjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
 
-  ${_chunk7H2OXTENcjs.overflowAutoWithoutScrollbars}
-  ${_chunkFPQ2OUYXcjs.standardContentInset.smCSS.styles}
+  ${_chunkXQNOVNF4cjs.overflowAutoWithoutScrollbars}
+  ${_chunkU35SY546cjs.standardContentInset.smCSS.styles}
   max-width: 100%;
   max-height: 100%;
   position: absolute;
@@ -429,7 +435,7 @@ var ModalContent = _styled2.default.div`
   flex-direction: column;
 
   ${({ ghost, smKind, width }) => `
-    ${ghost ? "" : _chunkFPQ2OUYXcjs.standardBorderRadius.call(void 0, 16)}
+    ${ghost ? "" : _chunkU35SY546cjs.standardBorderRadius.call(void 0, 16)}
     width: ${width}px;
   `}
 
@@ -446,14 +452,14 @@ var ModalNavigation = _styled2.default.div`
   grid-auto-flow: column;
   width: 100%;
 `;
-var BackButton = _styled2.default.call(void 0, _chunkK5JJ5ZJPcjs.UnstyledButton)`
-  ${_chunkFPQ2OUYXcjs.standardFocusOutline}
+var BackButton = _styled2.default.call(void 0, _chunkR46DRG52cjs.UnstyledButton)`
+  ${_chunkU35SY546cjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-start;
 `;
-var CloseButton = _styled2.default.call(void 0, _chunkK5JJ5ZJPcjs.UnstyledButton)`
-  ${_chunkFPQ2OUYXcjs.standardFocusOutline}
+var CloseButton = _styled2.default.call(void 0, _chunkR46DRG52cjs.UnstyledButton)`
+  ${_chunkU35SY546cjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-end;

package/dist/{chunk-K33DLKPB.cjs → chunk-2YBZV2K6.cjs}

@@ -5,6 +5,7 @@ var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
 
 // src/components/Flex.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _lodashes = require('lodash-es');
 var _jsxruntime = require('@emotion/react/jsx-runtime');
 function Flex({
   center = false,
@@ -26,7 +27,10 @@ function Flex({
   pt,
   pr,
   pb,
-  pl
+  pl,
+  height,
+  width,
+  position
 }) {
   const justify = justifyProp ? justifyProp : center ? "center" : "stretch";
   const align = alignProp ? alignProp : center ? "center" : "stretch";
@@ -50,7 +54,10 @@ function Flex({
       pr,
       pb,
       pl,
-      gap
+      gap,
+      height,
+      width,
+      position
     }, asButtonProps), {
       children
     })
@@ -99,6 +106,10 @@ var StyledFlex = _styled2.default.div`
   ${({ pr }) => pr && `padding-right: ${pr}px;`}
   ${({ pb }) => pb && `padding-bottom: ${pb}px;`}
   ${({ pl }) => pl && `padding-left: ${pl}px;`}
+
+  ${({ height }) => height && (_lodashes.isNumber.call(void 0, height) ? `height: ${height}px;` : `height: ${height};`)}
+  ${({ width }) => width && (_lodashes.isNumber.call(void 0, width) ? `width: ${width}px;` : `width: ${width};`)}
+  ${({ position }) => position && `position: ${position};`}
 `;
 
 

package/dist/{chunk-AM7EMJXN.js → chunk-33OPRYWV.js}

@@ -1,18 +1,18 @@
-import {
-  buttonsThemeBase,
-  defaultButtonsTheme
-} from "./chunk-FBYK5UPJ.js";
 import {
   cardFormThemeBase,
   defaultCardFormTheme
-} from "./chunk-YIJZVE4P.js";
+} from "./chunk-G6OQNEXP.js";
 import {
   defaultLoadingTheme,
   loadingThemeBase
 } from "./chunk-S5AV3X5O.js";
 import {
   getTypography
-} from "./chunk-FGZFMWJU.js";
+} from "./chunk-J3TUZRIL.js";
+import {
+  buttonsThemeBase,
+  defaultButtonsTheme
+} from "./chunk-FBYK5UPJ.js";
 import {
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
@@ -21,7 +21,7 @@ import {
   darkGradient,
   hcNeutralFromBg,
   isColorKey
-} from "./chunk-YJIIP7IY.js";
+} from "./chunk-WAGTMEWB.js";
 import {
   __spreadProps,
   __spreadValues
@@ -498,14 +498,14 @@ var bridgeBaseSettings = {
   buttons: merge(buttonsThemeBase, {
     defaultTypographyType: "Title",
     defaultSize: "Medium",
-    defaultBorderRadius: 8,
+    defaultBorderRadius: 999,
     defaultPaddingsY: {
-      ExtraSmall: 14,
-      Small: 14,
-      Schmedium: 14,
-      Medium: 14,
-      Mlarge: 14,
-      Large: 14
+      ExtraSmall: 13,
+      Small: 13,
+      Schmedium: 13,
+      Medium: 13,
+      Mlarge: 13,
+      Large: 13
     },
     kinds: {
       primary: {
@@ -590,6 +590,7 @@ var bridgeBaseSettings = {
   cardForm: merge(cardFormThemeBase, {
     backgroundColor: "white",
     smBackgroundColor: "bg",
+    borderRadius: 32,
     defaultDescriptionTypographyMap: {
       default: {
         type: "Body",
@@ -604,16 +605,21 @@ var bridgeBaseSettings = {
     },
     kinds: {
       primary: {
-        paddingY: 56,
+        borderWidth: 1,
+        smBorderWidth: 0,
+        borderColor: "grayBlue94",
+        paddingTop: 24,
+        paddingBottom: 64,
         paddingX: 40,
-        shadow: "hard"
+        shadow: "none"
       },
       secondary: {
         borderWidth: 1,
         smBorderWidth: 0,
         borderColor: "grayBlue94",
-        paddingY: 40,
-        paddingX: 40,
+        paddingTop: 32,
+        paddingBottom: 64,
+        paddingX: 32,
         shadow: "none"
       }
     }
@@ -628,6 +634,7 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   smBg: colors.gray98,
   text: colors.grayBlue9,
   secondary: colors.grayBlue43,
+  tertiary: colors.gray3,
   inputBackground: colors.white,
   danger: colors.red50
 }));
@@ -721,6 +728,7 @@ var isLight = (theme) => [
   "umameDocsLight" /* UmameDocsLight */,
   "umaAuthSdkLight" /* UmaAuthSdkLight */
 ].includes(theme.type);
+var isBridge = (theme) => ["bridgeLight" /* BridgeLight */, "bridgeDark" /* BridgeDark */].includes(theme.type);
 var themeOr = (lightValue, darkValue) => ({ theme }) => {
   return isLight(theme) ? lightValue : darkValue;
 };
@@ -775,6 +783,7 @@ export {
   getBackgroundColor,
   isDark,
   isLight,
+  isBridge,
   themeOr,
   themeOrWithKey,
   ifLight,

package/dist/{chunk-GUQRCSCH.cjs → chunk-355DFDX6.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkCC3VPMH3cjs = require('./chunk-CC3VPMH3.cjs');
+var _chunkJIUGPX3Acjs = require('./chunk-JIUGPX3A.cjs');
 
 
-var _chunk2PI3XHGDcjs = require('./chunk-2PI3XHGD.cjs');
+var _chunk6N7XRYZDcjs = require('./chunk-6N7XRYZD.cjs');
 
 
 
@@ -241,7 +241,7 @@ function CodeInput({
     const inputId = getInputId(i);
     inputs.push(
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkCC3VPMH3cjs.SingleCodeInput,
+        _chunkJIUGPX3Acjs.SingleCodeInput,
         {
           value: inputState[inputId].value,
           id: inputId,
@@ -316,7 +316,7 @@ var CodeInputGroup = _styled2.default.div`
 var CodeInputGroupSeparator = _styled2.default.div`
   width: ${separatorWidth}px;
   height: 4px;
-  background-color: ${_chunk2PI3XHGDcjs.textInputBorderColor};
+  background-color: ${_chunk6N7XRYZDcjs.textInputBorderColor};
   border-radius: 2px;
   margin: 0 ${separatorMargin}px;
 `;

package/dist/{chunk-E5INXIWL.js → chunk-363DAWKZ.js}

@@ -1,15 +1,15 @@
 import {
   Flex
-} from "./chunk-RMOWWR6C.js";
+} from "./chunk-NPKEAEDV.js";
 import {
   Icon
-} from "./chunk-DJOYSVI3.js";
+} from "./chunk-YTKSEJHA.js";
 import {
   Link
-} from "./chunk-5HDXWO2E.js";
+} from "./chunk-PTJ7AVLT.js";
 import {
   getColor
-} from "./chunk-AM7EMJXN.js";
+} from "./chunk-33OPRYWV.js";
 
 // src/components/IconWithCircleBackground.tsx
 import styled from "@emotion/styled";
@@ -22,7 +22,11 @@ function IconWithCircleBackground({
   darkBg = false,
   shouldRotate = false,
   noBg = false,
-  disabled = false
+  disabled = false,
+  bgColor,
+  iconColor,
+  iconStrokeWidth,
+  opaque = false
 }) {
   const content = /* @__PURE__ */ jsx(
     Flex,
@@ -39,12 +43,17 @@ function IconWithCircleBackground({
           darkBg,
           shouldRotate,
           noBg,
+          bgColor,
           children: /* @__PURE__ */ jsx(
             Icon,
             {
               name: iconName,
               width: iconWidth,
-              color: darkBg ? "white" : "grayBlue9"
+              color: iconColor ? iconColor : darkBg ? "white" : "grayBlue9",
+              iconProps: {
+                strokeWidth: iconStrokeWidth,
+                fill: opaque ? "currentColor" : "none"
+              }
             }
           )
         }
@@ -54,7 +63,7 @@ function IconWithCircleBackground({
   return to ? /* @__PURE__ */ jsx("div", { css: { cursor: disabled ? "not-allowed" : void 0 }, children: /* @__PURE__ */ jsx(Link, { to, disabled, children: content }) }) : content;
 }
 var StyledIconWithCircleBackground = styled.div`
-  background: ${({ theme, darkBg, noBg }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : noBg ? "transparent" : getColor(theme, "grayBlue94")};
+  background: ${({ theme, darkBg, noBg, bgColor }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : noBg ? "transparent" : bgColor ? getColor(theme, bgColor) : getColor(theme, "grayBlue94")};
   border-radius: 50%;
   padding: ${({ size }) => getPadding(size)}px;
   display: flex;
@@ -78,6 +87,12 @@ function getPadding(size) {
   if (size === 40) {
     return 20;
   }
+  if (size === 36) {
+    return 14;
+  }
+  if (size === 20) {
+    return 10;
+  }
   return 16;
 }
 

package/dist/{chunk-RLHTMCRJ.cjs → chunk-3AAQPOUS.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk6Z6ZBZEJcjs = require('./chunk-6Z6ZBZEJ.cjs');
+var _chunk4N5EXQIScjs = require('./chunk-4N5EXQIS.cjs');
 
 
-var _chunkHGCI5IAMcjs = require('./chunk-HGCI5IAM.cjs');
+var _chunkXUEKQQJVcjs = require('./chunk-XUEKQQJV.cjs');
 
 
 
@@ -28,7 +28,7 @@ function MultiToggle({
     let content = null;
     if ("name" in optionProps) {
       content = /* @__PURE__ */ _react.createElement.call(void 0, 
-        _chunk6Z6ZBZEJcjs.Icon,
+        _chunk4N5EXQIScjs.Icon,
         _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, optionProps), {
           width: 11,
           key,
@@ -54,7 +54,7 @@ function MultiToggle({
 }
 var StyledMultiToggle = _styled2.default.div`
   border-radius: 999px;
-  background: ${({ theme, bgColor }) => _chunkHGCI5IAMcjs.getColor.call(void 0, theme, bgColor)};
+  background: ${({ theme, bgColor }) => _chunkXUEKQQJVcjs.getColor.call(void 0, theme, bgColor)};
   padding: 2px;
   gap: 2px;
   display: flex;
@@ -64,7 +64,7 @@ var StyledMultiToggleOption = _styled2.default.div`
   cursor: pointer;
   border-radius: 999px;
   padding: 4px;
-  background: ${({ theme, selected, selectedBgColor }) => selected ? _chunkHGCI5IAMcjs.getColor.call(void 0, theme, selectedBgColor) : "transparent"};
+  background: ${({ theme, selected, selectedBgColor }) => selected ? _chunkXUEKQQJVcjs.getColor.call(void 0, theme, selectedBgColor) : "transparent"};
 `;
 
 

package/dist/{chunk-Z6I64NIF.js → chunk-3HIDFTSK.js}

@@ -1,6 +1,6 @@
 import {
   standardFocusOutline
-} from "./chunk-E46IHC27.js";
+} from "./chunk-ANZUTQRP.js";
 
 // src/components/UnstyledButton.tsx
 import styled from "@emotion/styled";

package/dist/chunk-3KRQU3PT.js

@@ -0,0 +1,25 @@
+// src/hooks/useDebounce.tsx
+import { debounce } from "lodash-es";
+import { useEffect, useState } from "react";
+function useDebounce(value, delay = 0, options) {
+  const [current, setCurrent] = useState(value);
+  const jsonOptions = JSON.stringify(options);
+  useEffect(() => {
+    const debounced = debounce(
+      () => {
+        setCurrent(value);
+      },
+      delay,
+      options
+    );
+    debounced();
+    return () => {
+      debounced.cancel();
+    };
+  }, [value, delay, jsonOptions]);
+  return current;
+}
+
+export {
+  useDebounce
+};

package/dist/{chunk-32TB2XVD.js → chunk-3N2BVLZJ.js}

@@ -1,15 +1,15 @@
+import {
+  Button
+} from "./chunk-2OE2VPDJ.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-RKAVKJX6.js";
-import {
-  Button
-} from "./chunk-U6EBWLCK.js";
+} from "./chunk-KKGZ47R3.js";
 import {
   standardContentInset
-} from "./chunk-E46IHC27.js";
+} from "./chunk-ANZUTQRP.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-QFWFZDKI.cjs → chunk-3NO2KSS7.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkEZRJ2DD2cjs = require('./chunk-EZRJ2DD2.cjs');
+var _chunkQOLXSB37cjs = require('./chunk-QOLXSB37.cjs');
 
 
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
@@ -15,7 +15,7 @@ function GradientCardHeader(props) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CardHeaderWrapper, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Gradients, {}),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-      props.status && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEZRJ2DD2cjs.StatusIndicator, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props.status)),
+      props.status && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQOLXSB37cjs.StatusIndicator, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props.status)),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardHeaderTitle, { children: props.title })
     ] }),
     props.children