@lightsparkdev/ui 1.1.0 → 1.1.2

package/dist/{chunk-6TE5F544.cjs → chunk-3MZK3ZMD.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk5X4RSRIKcjs = require('./chunk-5X4RSRIK.cjs');
+var _chunkMB5LWFQKcjs = require('./chunk-MB5LWFQK.cjs');
 
 
-var _chunk3GKIKZL2cjs = require('./chunk-3GKIKZL2.cjs');
+var _chunkXYPLDDUHcjs = require('./chunk-XYPLDDUH.cjs');
 
 
 var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunk4UFYMBJKcjs = require('./chunk-4UFYMBJK.cjs');
+var _chunkECFNSLYPcjs = require('./chunk-ECFNSLYP.cjs');
 
 
 
@@ -82,7 +82,7 @@ var IdFilter = ({
   };
   const appliedValueButtons = (_a = state.appliedValues) == null ? void 0 : _a.map((value) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk4UFYMBJKcjs.Button,
+      _chunkECFNSLYPcjs.Button,
       {
         kind: "primary",
         size: "ExtraSmall",
@@ -102,8 +102,8 @@ var IdFilter = ({
     );
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5X4RSRIKcjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk3GKIKZL2cjs.TextInput,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMB5LWFQKcjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkXYPLDDUHcjs.TextInput,
       {
         placeholder: placeholder || "",
         onChange: handleChange,

package/dist/{chunk-3LCR3KCY.js → chunk-3PQDAHFL.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-AHC2USPG.js";
+} from "./chunk-E7KQDR6U.js";
 import {
   StyledLabelModerate,
   getPropDefaults
-} from "./chunk-VTCBLFGU.js";
+} from "./chunk-HIT2FCXS.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-H6BLLRT3.cjs → chunk-3RR3ZYXG.cjs}

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkFOUSEEFHcjs = require('./chunk-FOUSEEFH.cjs');
+var _chunkNN6GDACAcjs = require('./chunk-NN6GDACA.cjs');
 
 
-var _chunkPMF5K72Fcjs = require('./chunk-PMF5K72F.cjs');
+var _chunkKOGW3LJCcjs = require('./chunk-KOGW3LJC.cjs');
 
 
 
-var _chunkHGCI5IAMcjs = require('./chunk-HGCI5IAM.cjs');
+var _chunkQI7YHMJZcjs = require('./chunk-QI7YHMJZ.cjs');
 
 
-var _chunkTBZZXLAMcjs = require('./chunk-TBZZXLAM.cjs');
+var _chunkWKRK7DGRcjs = require('./chunk-WKRK7DGR.cjs');
 
 // src/components/PendingValue.tsx
 var _react = require('@emotion/react');
@@ -46,11 +46,11 @@ function PendingValue({
     currencyAmount: defaultTypography,
     clipboardTextField: defaultTypography
   };
-  const nodesWithTypography = _chunkFOUSEEFHcjs.setDefaultReactNodesTypography.call(void 0, 
+  const nodesWithTypography = _chunkNN6GDACAcjs.setDefaultReactNodesTypography.call(void 0, 
     contentProp,
     defaultTypographyMap
   );
-  const content = _chunkPMF5K72Fcjs.toReactNodes.call(void 0, nodesWithTypography);
+  const content = _chunkKOGW3LJCcjs.toReactNodes.call(void 0, nodesWithTypography);
   const contentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     StyledPendingValueContent,
     {
@@ -83,11 +83,11 @@ function PendingValue({
     ),
     fullSizePending ? contentNode : null
   ] });
-  return forceTheme ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.ThemeProvider, { theme: _chunkHGCI5IAMcjs.themes[forceTheme], children: nodes }) : nodes;
+  return forceTheme ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.ThemeProvider, { theme: _chunkQI7YHMJZcjs.themes[forceTheme], children: nodes }) : nodes;
 }
 var StyledPendingValueBgOuter = _styled2.default.div`
   position: relative;
-  height: ${({ typographyType, typographySize, theme }) => _chunkTBZZXLAMcjs.getLineHeightForTypographyType.call(void 0, typographyType, typographySize, theme)};
+  height: ${({ typographyType, typographySize, theme }) => _chunkWKRK7DGRcjs.getLineHeightForTypographyType.call(void 0, typographyType, typographySize, theme)};
 
   ${({ widthProp, hasContent }) => widthProp && !hasContent ? `width: ${widthProp}px;` : "width: 100%;"}
   overflow: hidden;
@@ -113,7 +113,7 @@ var StyledPendingValueContent = _styled2.default.div`
   z-index: 1;
   overflow: hidden;
 
-  height: ${({ typographyType, typographySize, theme }) => _chunkTBZZXLAMcjs.getLineHeightForTypographyType.call(void 0, typographyType, typographySize, theme)};
+  height: ${({ typographyType, typographySize, theme }) => _chunkWKRK7DGRcjs.getLineHeightForTypographyType.call(void 0, typographyType, typographySize, theme)};
 `;
 var vSpacing = 2;
 var StyledPendingValueBg = _styled2.default.div`
@@ -139,9 +139,9 @@ var StyledPendingValueBg = _styled2.default.div`
 
   background: linear-gradient(
     90deg,
-    ${_chunkHGCI5IAMcjs.themeOrWithKey.call(void 0, "c05Neutral", "c25Neutral")} 0%,
-    ${_chunkHGCI5IAMcjs.themeOrWithKey.call(void 0, "c1Neutral", "c3Neutral")} 50%,
-    ${_chunkHGCI5IAMcjs.themeOrWithKey.call(void 0, "c05Neutral", "c25Neutral")} 100%
+    ${_chunkQI7YHMJZcjs.themeOrWithKey.call(void 0, "c05Neutral", "c25Neutral")} 0%,
+    ${_chunkQI7YHMJZcjs.themeOrWithKey.call(void 0, "c1Neutral", "c3Neutral")} 50%,
+    ${_chunkQI7YHMJZcjs.themeOrWithKey.call(void 0, "c05Neutral", "c25Neutral")} 100%
   );
 
   background-size: 200% 100%;

package/dist/{chunk-5D52PRRT.cjs → chunk-3TWK5ORK.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkB2B6IYJHcjs = require('./chunk-B2B6IYJH.cjs');
+var _chunkUCBR2BN2cjs = require('./chunk-UCBR2BN2.cjs');
 
 
 var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
@@ -30,7 +30,7 @@ function Radio({
         onChange: handleRadioClick
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2B6IYJHcjs.Label, { children: option.label })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUCBR2BN2cjs.Label, { children: option.label })
   ] }, option.label)) });
 }
 var RadioContainer = _styled2.default.div`

package/dist/chunk-3VHSE7WI.js

@@ -0,0 +1,27 @@
+// src/icons/LogoMark.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function LogoMark() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 204 128",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("g", { "clip-path": "url(#clip0_3819_118352)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M7.9385 114.229L71.4483 72.9849H-0.000732422L27.671 55.0147H91.1787V13.7721L112.385 0.00062561V46.4003L162.628 13.772L195.622 13.772L132.114 55.0147H203.567L175.895 72.9849H112.385V114.229L91.1787 128V81.5986L40.9328 114.229H7.9385Z",
+            fill: "currentColor"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_3819_118352", children: /* @__PURE__ */ jsx("rect", { width: "203.568", height: "128", fill: "white" }) }) })
+      ]
+    }
+  );
+}
+
+export {
+  LogoMark
+};

package/dist/{chunk-AFNV5FHC.cjs → chunk-42S7PZMX.cjs}

@@ -1,18 +1,18 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk7H2OXTENcjs = require('./chunk-7H2OXTEN.cjs');
+var _chunkXIFHBLNQcjs = require('./chunk-XIFHBLNQ.cjs');
 
 
-var _chunkBL5NDVAZcjs = require('./chunk-BL5NDVAZ.cjs');
+var _chunkXMSQNWZKcjs = require('./chunk-XMSQNWZK.cjs');
 
 
-var _chunkK5JJ5ZJPcjs = require('./chunk-K5JJ5ZJP.cjs');
+var _chunkJRCDVJMMcjs = require('./chunk-JRCDVJMM.cjs');
 
 
-var _chunk6Z6ZBZEJcjs = require('./chunk-6Z6ZBZEJ.cjs');
+var _chunk4JJ5GJLEcjs = require('./chunk-4JJ5GJLE.cjs');
 
 
-var _chunkQYVQII3Icjs = require('./chunk-QYVQII3I.cjs');
+var _chunkGICIJWP3cjs = require('./chunk-GICIJWP3.cjs');
 
 // src/components/Pill.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -83,9 +83,9 @@ function Pill({
           {
             hasIconInset: Boolean(icon && !loading && !onDeleteMouseDown),
             children: [
-              loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBL5NDVAZcjs.Loading, { size: 16.1, center: false, ml: 5 }),
+              loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXMSQNWZKcjs.Loading, { size: 16.1, center: false, ml: 5 }),
               !loading && onDeleteMouseDown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkK5JJ5ZJPcjs.UnstyledButton,
+                _chunkJRCDVJMMcjs.UnstyledButton,
                 {
                   onMouseDown: handleOnDeleteMouseDown,
                   onKeyDown: handleOnDeleteKeyDown,
@@ -95,10 +95,10 @@ function Pill({
                     padding: "10px",
                     marginRight: "-10px"
                   },
-                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6Z6ZBZEJcjs.Icon, { name: "DeleteIcon", width: 16.1 })
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4JJ5GJLEcjs.Icon, { name: "DeleteIcon", width: 16.1 })
                 }
               ),
-              !loading && icon && !onDeleteMouseDown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6Z6ZBZEJcjs.Icon, { name: icon, width: 16.1, color: "white" })
+              !loading && icon && !onDeleteMouseDown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4JJ5GJLEcjs.Icon, { name: icon, width: 16.1, color: "white" })
             ]
           }
         )
@@ -131,9 +131,9 @@ var StyledPill = _styled2.default.div`
   position: relative;
 `;
 var PillIconContainer = _styled2.default.div`
-  ${_chunk7H2OXTENcjs.flexCenter}
+  ${_chunkXIFHBLNQcjs.flexCenter}
   ${({ hasIconInset }) => hasIconInset ? `
-    background-color: ${_chunkQYVQII3Icjs.colors.blue43};
+    background-color: ${_chunkGICIJWP3cjs.colors.blue43};
     padding: 8px;
     right: 4px;
     top: 3.5px;` : `right: 18px;`}

package/dist/{chunk-B2IBAKQN.js → chunk-46K5FH42.js}

@@ -1,6 +1,9 @@
+import {
+  Filter
+} from "./chunk-CSQII7YP.js";
 import {
   DateWidget
-} from "./chunk-G2UHA5JS.js";
+} from "./chunk-C22CRGKP.js";
 import {
   DateRangeOperation,
   MAX_DATE,
@@ -10,21 +13,18 @@ import {
   startOfDay,
   subtractTime
 } from "./chunk-MS4Y7HXG.js";
-import {
-  Filter
-} from "./chunk-C3ZJV5MQ.js";
 import {
   Select_default
-} from "./chunk-Y4T7OW76.js";
+} from "./chunk-ZHKLSHFU.js";
 import {
   TextInput
-} from "./chunk-JU2FTCTN.js";
+} from "./chunk-DFYU5VPB.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
 import {
   Button
-} from "./chunk-U6EBWLCK.js";
+} from "./chunk-ADV4UT4X.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";

package/dist/{chunk-QTV4Q3UB.cjs → chunk-46WVDWMJ.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkPMF5K72Fcjs = require('./chunk-PMF5K72F.cjs');
+var _chunkKOGW3LJCcjs = require('./chunk-KOGW3LJC.cjs');
 
 
 
-var _chunk2L6PVYRNcjs = require('./chunk-2L6PVYRN.cjs');
+var _chunkYYIYLDKBcjs = require('./chunk-YYIYLDKB.cjs');
 
 
 
@@ -13,12 +13,12 @@ var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
 // src/components/typography/Title.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
 function Title(props) {
-  const propsWithDefaults = _chunk2L6PVYRNcjs.getPropDefaults.call(void 0, props);
+  const propsWithDefaults = _chunkYYIYLDKBcjs.getPropDefaults.call(void 0, props);
   let reactNodes = props.children || null;
   if (props.content) {
-    reactNodes = _chunkPMF5K72Fcjs.toReactNodes.call(void 0, props.content);
+    reactNodes = _chunkKOGW3LJCcjs.toReactNodes.call(void 0, props.content);
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2L6PVYRNcjs.StyledTitle, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYYIYLDKBcjs.StyledTitle, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
 }
 
 

package/dist/{chunk-XMTRQXAR.js → chunk-4CGAORBB.js}

@@ -1,7 +1,7 @@
 import {
   firstChild,
   pxToRems
-} from "./chunk-RKAVKJX6.js";
+} from "./chunk-YWNKHN46.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-MYRSWJPJ.js → chunk-4D4LDRA5.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-DJOYSVI3.js";
+} from "./chunk-JWFDHULW.js";
 
 // src/components/Loading.tsx
 import { useTheme } from "@emotion/react";

package/dist/{chunk-I4L4UO26.cjs → chunk-4DJ33XMZ.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk5SPEBEERcjs = require('./chunk-5SPEBEER.cjs');
+var _chunkOBUN65IKcjs = require('./chunk-OBUN65IK.cjs');
 
 
 var _chunkJA7KZV3Qcjs = require('./chunk-JA7KZV3Q.cjs');
 
 
-var _chunkQYVQII3Icjs = require('./chunk-QYVQII3I.cjs');
+var _chunkGICIJWP3cjs = require('./chunk-GICIJWP3.cjs');
 
 // src/router.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -83,10 +83,11 @@ var LinkBase = _react.forwardRef.call(void 0,
     }
     let content = children;
     if (text) {
-      content = typography ? _chunk5SPEBEERcjs.renderTypography.call(void 0, typography.type, {
+      content = typography ? _chunkOBUN65IKcjs.renderTypography.call(void 0, typography.type, {
         size: typography.size,
         color: typography.color,
-        children: text
+        children: text,
+        underline: typography.underline
       }) : text;
     }
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -98,7 +99,7 @@ var LinkBase = _react.forwardRef.call(void 0,
         onClick,
         className,
         download: filename,
-        style: { color: blue ? _chunkQYVQII3Icjs.colors.blue43 : "inherit" },
+        style: { color: blue ? _chunkGICIJWP3cjs.colors.blue43 : "inherit" },
         target: newTab ? "_blank" : void 0,
         rel: newTab ? "noopener noreferrer" : void 0,
         ref,

package/dist/chunk-4IFDR4TO.cjs

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/CheckmarkGreen.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function CheckmarkGreen({
+  strokeWidth = "4",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 49 49",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          id: "Vector",
+          d: "M6 30.6876L18.5 41L43 8",
+          stroke: "#559057",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.CheckmarkGreen = CheckmarkGreen;

package/dist/{chunk-6Z6ZBZEJ.cjs → chunk-4JJ5GJLE.cjs}

@@ -1,19 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk6A6IMQ3Ocjs = require('./chunk-6A6IMQ3O.cjs');
+var _chunkOJ2AC6G4cjs = require('./chunk-OJ2AC6G4.cjs');
 
 
 
 var _chunkKS6GHRZIcjs = require('./chunk-KS6GHRZI.cjs');
 
 
-var _chunkFPQ2OUYXcjs = require('./chunk-FPQ2OUYX.cjs');
+var _chunkO6BZRC56cjs = require('./chunk-O6BZRC56.cjs');
 
 
 var _chunkJA7KZV3Qcjs = require('./chunk-JA7KZV3Q.cjs');
 
 
-var _chunkHGCI5IAMcjs = require('./chunk-HGCI5IAM.cjs');
+var _chunkQI7YHMJZcjs = require('./chunk-QI7YHMJZ.cjs');
 
 // src/components/Icon/Icon.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -34,14 +34,14 @@ function Icon({
   verticalAlign = "middle",
   iconProps
 }) {
-  const IconComponent = _chunk6A6IMQ3Ocjs.iconMap[name];
-  const w = parseFloat((width / _chunkFPQ2OUYXcjs.rootFontSizePx).toFixed(2));
+  const IconComponent = _chunkOJ2AC6G4cjs.iconMap[name];
+  const w = parseFloat((width / _chunkO6BZRC56cjs.rootFontSizePx).toFixed(2));
   const h = square ? w : "auto";
-  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / _chunkFPQ2OUYXcjs.rootFontSizePx).toFixed(2))}em` : mrProp;
-  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / _chunkFPQ2OUYXcjs.rootFontSizePx).toFixed(2))}em` : mlProp;
-  const mt = typeof mtProp === "number" ? `${parseFloat((mtProp / _chunkFPQ2OUYXcjs.rootFontSizePx).toFixed(2))}em` : mtProp;
-  const mb = typeof mbProp === "number" ? `${parseFloat((mbProp / _chunkFPQ2OUYXcjs.rootFontSizePx).toFixed(2))}em` : mbProp;
-  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / _chunkFPQ2OUYXcjs.rootFontSizePx).toFixed(2));
+  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / _chunkO6BZRC56cjs.rootFontSizePx).toFixed(2))}em` : mrProp;
+  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / _chunkO6BZRC56cjs.rootFontSizePx).toFixed(2))}em` : mlProp;
+  const mt = typeof mtProp === "number" ? `${parseFloat((mtProp / _chunkO6BZRC56cjs.rootFontSizePx).toFixed(2))}em` : mtProp;
+  const mb = typeof mbProp === "number" ? `${parseFloat((mbProp / _chunkO6BZRC56cjs.rootFontSizePx).toFixed(2))}em` : mbProp;
+  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / _chunkO6BZRC56cjs.rootFontSizePx).toFixed(2));
   const icon = _react2.default.createElement(IconComponent, iconProps, null);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     IconContainer,
@@ -90,10 +90,10 @@ var IconContainer = _styled2.default.span`
 }}
 
   ${({ theme, fontColor }) => {
-  const color = _chunkHGCI5IAMcjs.getFontColor.call(void 0, theme, fontColor, "inherit");
+  const color = _chunkQI7YHMJZcjs.getFontColor.call(void 0, theme, fontColor, "inherit");
   return `
     svg, path {
-      color: ${_chunkHGCI5IAMcjs.getFontColor.call(void 0, theme, fontColor, "inherit")};
+      color: ${_chunkQI7YHMJZcjs.getFontColor.call(void 0, theme, fontColor, "inherit")};
 
       /* 
         Provide a way for an SVG to invert relative to a specified color for

package/dist/{chunk-WU3OOKRP.js → chunk-5EG6UD4E.js}

@@ -1,9 +1,9 @@
 import {
   GlobalStyles
-} from "./chunk-DFVX2CXQ.js";
+} from "./chunk-QWSLX5OB.js";
 import {
   themes
-} from "./chunk-AM7EMJXN.js";
+} from "./chunk-NF6LGARO.js";
 
 // src/components/LightsparkProvider.tsx
 import { ThemeProvider } from "@emotion/react";

package/dist/{chunk-VE63R7LY.cjs → chunk-5KCSS7WC.cjs}

@@ -1,18 +1,18 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkVGMBQUOTcjs = require('./chunk-VGMBQUOT.cjs');
+var _chunkUGDFDCYDcjs = require('./chunk-UGDFDCYD.cjs');
 
 
-var _chunk7H2OXTENcjs = require('./chunk-7H2OXTEN.cjs');
+var _chunkXIFHBLNQcjs = require('./chunk-XIFHBLNQ.cjs');
 
 
-var _chunkFPQ2OUYXcjs = require('./chunk-FPQ2OUYX.cjs');
+var _chunkO6BZRC56cjs = require('./chunk-O6BZRC56.cjs');
 
 
-var _chunkHGCI5IAMcjs = require('./chunk-HGCI5IAM.cjs');
+var _chunkQI7YHMJZcjs = require('./chunk-QI7YHMJZ.cjs');
 
 
-var _chunkQYVQII3Icjs = require('./chunk-QYVQII3I.cjs');
+var _chunkGICIJWP3cjs = require('./chunk-GICIJWP3.cjs');
 
 
 
@@ -55,7 +55,7 @@ var backgroundColor = "#2d2d2d";
 var InlineCode = _styled2.default.span`
   font-family: "Roboto Mono", monospace;
   background-color: #2d2d2d;
-  border: 1px solid ${_chunkHGCI5IAMcjs.themeOr.call(void 0, _chunkQYVQII3Icjs.colors.gray90, _chunkQYVQII3Icjs.colors.gray20)};
+  border: 1px solid ${_chunkQI7YHMJZcjs.themeOr.call(void 0, _chunkGICIJWP3cjs.colors.gray90, _chunkGICIJWP3cjs.colors.gray20)};
   border-radius: 3px;
   line-height: 24px;
   padding: 0 4px;
@@ -99,9 +99,9 @@ var codeSelectStyles = {
   }),
   option: (styles, state) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles), {
     cursor: "pointer",
-    backgroundColor: state.isSelected ? _chunkQYVQII3Icjs.colors.gray25 : backgroundColor,
+    backgroundColor: state.isSelected ? _chunkGICIJWP3cjs.colors.gray25 : backgroundColor,
     "&:hover": {
-      backgroundColor: _chunkQYVQII3Icjs.colors.gray25
+      backgroundColor: _chunkGICIJWP3cjs.colors.gray25
     }
   }),
   singleValue: (styles) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles), {
@@ -152,7 +152,7 @@ var CodeBlock = ({
               styles: codeSelectStyles
             }
           ) }) : null,
-          withCopyButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVGMBQUOTcjs.CopyToClipboardButton, { value: children }) : null
+          withCopyButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUGDFDCYDcjs.CopyToClipboardButton, { value: children }) : null
         ]
       }
     )
@@ -166,7 +166,7 @@ var StyledCodeBlock = _styled2.default.div``;
 var CodeBlockHeader = _styled2.default.div`
   align-items: center;
   background-color: #2d2d2d;
-  border-bottom: 1px solid ${_chunkQYVQII3Icjs.colors.gray25};
+  border-bottom: 1px solid ${_chunkGICIJWP3cjs.colors.gray25};
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   color: #ffffff;
@@ -176,11 +176,11 @@ var CodeBlockHeader = _styled2.default.div`
   padding: 16px 20px;
 `;
 var CodeBlockContainer = _styled2.default.pre`
-  ${_chunk7H2OXTENcjs.overflowAutoWithoutScrollbars}
+  ${_chunkXIFHBLNQcjs.overflowAutoWithoutScrollbars}
   &[class*="language-"] {
     padding: 20px;
     font-weight: 500;
-    ${_chunkFPQ2OUYXcjs.standardBorderRadius.call(void 0, 8)}
+    ${_chunkO6BZRC56cjs.standardBorderRadius.call(void 0, 8)}
     ${(props) => props.hasHeader ? `border-top-left-radius: 0;
             border-top-right-radius: 0;
             margin-top: 0;` : ""}

package/dist/{chunk-E5INXIWL.js → chunk-5LVXXKFG.js}

@@ -1,15 +1,15 @@
 import {
   Flex
-} from "./chunk-RMOWWR6C.js";
+} from "./chunk-NPKEAEDV.js";
 import {
   Icon
-} from "./chunk-DJOYSVI3.js";
+} from "./chunk-JWFDHULW.js";
 import {
   Link
-} from "./chunk-5HDXWO2E.js";
+} from "./chunk-YIEDSI2X.js";
 import {
   getColor
-} from "./chunk-AM7EMJXN.js";
+} from "./chunk-NF6LGARO.js";
 
 // src/components/IconWithCircleBackground.tsx
 import styled from "@emotion/styled";
@@ -19,10 +19,16 @@ function IconWithCircleBackground({
   iconWidth = 40,
   to,
   onClick,
+  padding,
   darkBg = false,
   shouldRotate = false,
   noBg = false,
-  disabled = false
+  hoverActiveBg = false,
+  disabled = false,
+  bgColor,
+  iconColor,
+  iconStrokeWidth,
+  opaque = false
 }) {
   const content = /* @__PURE__ */ jsx(
     Flex,
@@ -36,15 +42,22 @@ function IconWithCircleBackground({
         StyledIconWithCircleBackground,
         {
           size: iconWidth,
+          padding,
           darkBg,
+          hoverActiveBg,
           shouldRotate,
           noBg,
+          bgColor,
           children: /* @__PURE__ */ jsx(
             Icon,
             {
               name: iconName,
               width: iconWidth,
-              color: darkBg ? "white" : "grayBlue9"
+              color: iconColor ? iconColor : "secondary",
+              iconProps: {
+                strokeWidth: iconStrokeWidth,
+                fill: opaque ? "currentColor" : "none"
+              }
             }
           )
         }
@@ -54,12 +67,20 @@ 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")};
+
+  &:hover {
+    ${({ theme, hoverActiveBg }) => hoverActiveBg ? `background: ${getColor(theme, "grayBlue94")}` : ""};
+  }
+  &:active {
+    ${({ theme, hoverActiveBg }) => hoverActiveBg ? `background: ${getColor(theme, "grayBlue78")}` : ""};
+  }
+
   border-radius: 50%;
-  padding: ${({ size }) => getPadding(size)}px;
+  padding: ${({ size, padding }) => padding != null ? padding : getPadding(size)}px;
   display: flex;
   justify-content: center;
-  ${({ size }) => `width: ${size + getPadding(size) * 2}px; height: ${size + getPadding(size) * 2}px;`}
+  ${({ size, padding }) => `width: ${size + (padding != null ? padding : getPadding(size)) * 2}px; height: ${size + (padding != null ? padding : getPadding(size)) * 2}px;`}
 
   @keyframes IconWithCircleBackgroundRotate {
     0% {
@@ -75,9 +96,18 @@ var StyledIconWithCircleBackground = styled.div`
   ${({ shouldRotate }) => shouldRotate && `animation: IconWithCircleBackgroundRotate 10s ease infinite;`}
 `;
 function getPadding(size) {
+  if (size === 48) {
+    return 38;
+  }
   if (size === 40) {
     return 20;
   }
+  if (size === 36) {
+    return 14;
+  }
+  if (size === 20) {
+    return 10;
+  }
   return 16;
 }
 

package/dist/{chunk-I7JHRFWF.js → chunk-5Q75SIBB.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-YW4BJCOL.js";
 import {
   applyTypography
-} from "./chunk-H2R5LMTF.js";
+} from "./chunk-I6WJCP2T.js";
 import {
   __objRest,
   __spreadProps,