@lightsparkdev/ui 1.0.11 → 1.0.13

package/dist/{chunk-4WKQPWLI.cjs → chunk-CH2PLO6F.cjs}

@@ -12,6 +12,9 @@ function isIconNode(node) {
 function isCurrencyAmountNode(node) {
   return Boolean(node && _lodashes.isObject.call(void 0, node) && "currencyAmount" in node);
 }
+function isClipboardTextFieldNode(node) {
+  return Boolean(node && _lodashes.isObject.call(void 0, node) && "clipboardTextField" in node);
+}
 function isTextNode(node) {
   const allowedKeys = ["text", "onClick", "typography"];
   return Boolean(
@@ -27,6 +30,9 @@ var nextLink = (nextLink2) => ({
 });
 var currencyAmount = (currencyAmount2) => ({ currencyAmount: currencyAmount2 });
 var icon = (icon2) => ({ icon: icon2 });
+var clipboardTextField = (clipboardTextField2) => ({ clipboardTextField: clipboardTextField2 });
+
+
 
 
 
@@ -38,4 +44,4 @@ var icon = (icon2) => ({ icon: icon2 });
 
 
 
-exports.isLinkNode = isLinkNode; exports.isNextLinkNode = isNextLinkNode; exports.isIconNode = isIconNode; exports.isCurrencyAmountNode = isCurrencyAmountNode; exports.isTextNode = isTextNode; exports.link = link; exports.nextLink = nextLink; exports.currencyAmount = currencyAmount; exports.icon = icon;
+exports.isLinkNode = isLinkNode; exports.isNextLinkNode = isNextLinkNode; exports.isIconNode = isIconNode; exports.isCurrencyAmountNode = isCurrencyAmountNode; exports.isClipboardTextFieldNode = isClipboardTextFieldNode; exports.isTextNode = isTextNode; exports.link = link; exports.nextLink = nextLink; exports.currencyAmount = currencyAmount; exports.icon = icon; exports.clipboardTextField = clipboardTextField;

package/dist/{chunk-2SLOCUAM.js → chunk-CJRKFPZN.js}

@@ -1,9 +1,9 @@
 import {
   CopyToClipboardButton
-} from "./chunk-TGY3VJCU.js";
+} from "./chunk-JDDFMVO6.js";
 import {
   standardBorderRadius
-} from "./chunk-YBJVTNAP.js";
+} from "./chunk-POGNK25N.js";
 
 // src/components/SecretContainer.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-C5PYKGR6.js → chunk-CMFAVB4T.js}

@@ -4,7 +4,11 @@ import {
 
 // src/icons/ArrowCircle.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-function ArrowCircle() {
+function ArrowCircle({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -19,9 +23,9 @@ function ArrowCircle() {
           {
             className: invertStrokeColor,
             d: "M21 18V9M21 9H12M21 9L9.5 20.5",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin
           }
         )
       ]

package/dist/{chunk-TB376AUW.cjs → chunk-COOUYFZY.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Share.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function Share() {
+function Share({ strokeWidth = "1.5" }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
@@ -13,7 +13,7 @@ function Share() {
         {
           d: "M6.74994 6.95207L10.0833 5.04728M6.74994 9.04727L10.0833 10.9521M14.2499 3.99967C14.2499 5.19629 13.2799 6.16634 12.0833 6.16634C10.8867 6.16634 9.91659 5.19629 9.91659 3.99967C9.91659 2.80305 10.8867 1.83301 12.0833 1.83301C13.2799 1.83301 14.2499 2.80305 14.2499 3.99967ZM14.2499 11.9997C14.2499 13.1963 13.2799 14.1663 12.0833 14.1663C10.8867 14.1663 9.91659 13.1963 9.91659 11.9997C9.91659 10.8031 10.8867 9.83301 12.0833 9.83301C13.2799 9.83301 14.2499 10.8031 14.2499 11.9997ZM6.91659 7.99967C6.91659 9.19627 5.94654 10.1663 4.74992 10.1663C3.5533 10.1663 2.58325 9.19627 2.58325 7.99967C2.58325 6.80307 3.5533 5.83301 4.74992 5.83301C5.94654 5.83301 6.91659 6.80307 6.91659 7.99967Z",
           stroke: "currentColor",
-          strokeWidth: "1.5"
+          strokeWidth
         }
       )
     }

package/dist/{chunk-PF5SD6AF.js → chunk-CPMIR5VM.js}

@@ -1,6 +1,10 @@
 // src/icons/Download.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-function Download() {
+function Download({
+  strokeWidth = "1",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter"
+}) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -15,7 +19,10 @@ function Download() {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M3.75 14C4.16421 14 4.5 14.3358 4.5 14.75V19.5H19.5V14.75C19.5 14.3358 19.8358 14 20.25 14C20.6642 14 21 14.3358 21 14.75V20.25C21 20.6642 20.6642 21 20.25 21H3.75C3.33579 21 3 20.6642 3 20.25V14.75C3 14.3358 3.33579 14 3.75 14Z",
-            fill: "currentColor"
+            fill: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin
           }
         ),
         /* @__PURE__ */ jsx(
@@ -24,7 +31,10 @@ function Download() {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M12 15.75C12.1989 15.75 12.3897 15.671 12.5303 15.5303L16.0303 12.0303C16.3232 11.7374 16.3232 11.2626 16.0303 10.9697C15.7374 10.6768 15.2626 10.6768 14.9697 10.9697L12.75 13.1893V3.75C12.75 3.33579 12.4142 3 12 3C11.5858 3 11.25 3.33579 11.25 3.75V13.1893L9.03033 10.9697C8.73744 10.6768 8.26256 10.6768 7.96967 10.9697C7.67678 11.2626 7.67678 11.7374 7.96967 12.0303L11.4697 15.5303C11.6103 15.671 11.8011 15.75 12 15.75Z",
-            fill: "currentColor"
+            fill: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin
           }
         )
       ]

package/dist/{chunk-N5LIZ3K6.js → chunk-CYP2PSHA.js}

@@ -1,6 +1,10 @@
 // src/icons/MagicWand.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-function MagicWand() {
+function MagicWand({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -14,9 +18,9 @@ function MagicWand() {
           {
             d: "M9 9.99954L1 17.9995L2.5 19.4995L4 20.9995L12 12.9995M9 9.99954L11.2929 7.70665C11.6834 7.31612 12.3166 7.31612 12.7071 7.70665L14.2929 9.29243C14.6834 9.68296 14.6834 10.3161 14.2929 10.7067L12 12.9995M9 9.99954L12 12.9995",
             stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin
           }
         ),
         /* @__PURE__ */ jsx(
@@ -24,8 +28,8 @@ function MagicWand() {
           {
             d: "M9 2.99951C10.3668 4.36635 10.5 4.49951 10.5 4.49951M10.5 2.99951L9 4.49951",
             stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
+            strokeWidth,
+            strokeLinecap
           }
         ),
         /* @__PURE__ */ jsx(
@@ -33,8 +37,8 @@ function MagicWand() {
           {
             d: "M18 8.99969C20.7337 11.7334 21 11.9997 21 11.9997M21 8.99969L18 11.9997",
             stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
+            strokeWidth,
+            strokeLinecap
           }
         ),
         /* @__PURE__ */ jsx(
@@ -42,8 +46,8 @@ function MagicWand() {
           {
             d: "M17.5977 0.999512C16.5971 4.73377 16.4996 5.09759 16.4996 5.09759M19.0977 3.59759L14.9996 2.49951",
             stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
+            strokeWidth,
+            strokeLinecap
           }
         )
       ]

package/dist/{chunk-4CW4UJ5X.cjs → chunk-CZ6BVVYO.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Monitor.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function Monitor() {
+function Monitor({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "svg",
     {
@@ -14,8 +18,8 @@ function Monitor() {
           {
             d: "M4.89258 16.2514H7.99972M11.1069 16.2514H7.99972M7.99972 13.959V16.2514",
             stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
+            strokeWidth,
+            strokeLinecap
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -23,9 +27,9 @@ function Monitor() {
           {
             d: "M3.5 8H5L7 10L9 5L11 7H12.5",
             stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -37,7 +41,7 @@ function Monitor() {
             height: "11.193",
             rx: "2",
             stroke: "currentColor",
-            strokeWidth: "1.5"
+            strokeWidth
           }
         )
       ]

package/dist/{chunk-OQEP7VDD.cjs → chunk-D262WAOV.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk7EIZIKLRcjs = require('./chunk-7EIZIKLR.cjs');
+var _chunk6DWDBCUJcjs = require('./chunk-6DWDBCUJ.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
-var _chunkCFG65CGCcjs = require('./chunk-CFG65CGC.cjs');
+var _chunkJBCEOOZScjs = require('./chunk-JBCEOOZS.cjs');
 
 // src/styles/common.tsx
 var _react = require('@emotion/react');
@@ -109,13 +109,13 @@ var Subtext = _styled2.default.div`
   ${subtext}
 `;
 var darkGradientBg = _react.css`
-  background: ${_chunkCFG65CGCcjs.darkGradient};
+  background: ${_chunkJBCEOOZScjs.darkGradient};
 `;
 var overlaySurfaceBorderColor = ({
   theme,
   important = false
 }) => _react.css`
-  border-color: ${_chunk7EIZIKLRcjs.themeOr.call(void 0, theme.c1Neutral, theme.c3Neutral)({ theme })}
+  border-color: ${_chunk6DWDBCUJcjs.themeOr.call(void 0, theme.c1Neutral, theme.c3Neutral)({ theme })}
     ${important ? "!important" : ""};
 `;
 var overlaySurface = ({
@@ -123,11 +123,11 @@ var overlaySurface = ({
   important = false,
   border = true
 }) => _react.css`
-  background-color: ${_chunk7EIZIKLRcjs.themeOr.call(void 0, theme.bg, theme.c1Neutral)({ theme })}
+  background-color: ${_chunk6DWDBCUJcjs.themeOr.call(void 0, theme.bg, theme.c1Neutral)({ theme })}
     ${important ? "!important" : ""};
   ${border ? `border: 0.5px solid ${important ? "!important" : ""};` : ""}
   ${overlaySurfaceBorderColor({ theme, important })};
-  ${_chunk7EIZIKLRcjs.themeOr.call(void 0, 
+  ${_chunk6DWDBCUJcjs.themeOr.call(void 0, 
   `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,
   ""
 )({ theme })}

package/dist/{chunk-M5QQFZEO.js → chunk-D32VAJQK.js}

@@ -1,29 +1,29 @@
-import {
-  extend,
-  flexCenter,
-  pxToRems
-} from "./chunk-CD4D43OU.js";
 import {
   UnstyledButton
-} from "./chunk-7SNXBUCU.js";
+} from "./chunk-ZP6BJB4X.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   toReactNodes
-} from "./chunk-2I22MYIY.js";
+} from "./chunk-TS7Y6L2D.js";
+import {
+  extend,
+  flexCenter,
+  pxToRems
+} from "./chunk-4ZUB5ENE.js";
 import {
   Icon
-} from "./chunk-NCLVA6JY.js";
+} from "./chunk-DV6LJQJW.js";
 import {
   standardContentInset
-} from "./chunk-YBJVTNAP.js";
+} from "./chunk-POGNK25N.js";
 import {
   themeOr
-} from "./chunk-HYUF4RXZ.js";
+} from "./chunk-N4C6SL6K.js";
 import {
   colors
-} from "./chunk-MN4NUSPL.js";
+} from "./chunk-HO7LVJ3R.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-ZLYJ3AKU.js → chunk-D54SWGNX.js}

@@ -1,6 +1,10 @@
 // src/icons/CaretRight.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function CaretRight() {
+function CaretRight({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -13,9 +17,9 @@ function CaretRight() {
         {
           d: "M7.5 3.33301L13.5774 9.41042C13.9028 9.73584 13.9028 10.2635 13.5774 10.5889L7.5 16.6663",
           stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-OVQKO5XJ.js → chunk-D6NRWNCU.js}

@@ -1,6 +1,6 @@
 import {
   Label
-} from "./chunk-BYSPGS6B.js";
+} from "./chunk-FZCKVTNU.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";

package/dist/chunk-DQ6IZTOT.js

@@ -0,0 +1,43 @@
+// src/icons/Gear.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Gear({
+  strokeWidth = "1.5",
+  strokeLinecap = "butt",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6.6849 3.60254L4.17969 3.02441L3.02344 4.18066L3.60156 6.68587L1.28906 8.22754V9.76921L3.60156 11.3109L3.02344 13.816L4.17969 14.9723L6.6849 14.3942L8.22656 16.7067H9.76823L11.3099 14.3942L13.8151 14.9723L14.9713 13.816L14.3932 11.3109L16.7057 9.76921V8.22754L14.3932 6.68587L14.9713 4.18066L13.8151 3.02441L11.3099 3.60254L9.76823 1.29004H8.22656L6.6849 3.60254Z",
+            stroke: "black",
+            strokeWidth,
+            strokeLinejoin,
+            strokeLinecap
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M11.2904 8.9987C11.2904 10.2644 10.2644 11.2904 8.9987 11.2904C7.73303 11.2904 6.70703 10.2644 6.70703 8.9987C6.70703 7.73303 7.73303 6.70703 8.9987 6.70703C10.2644 6.70703 11.2904 7.73303 11.2904 8.9987Z",
+            stroke: "black",
+            strokeWidth,
+            strokeLinejoin,
+            strokeLinecap
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  Gear
+};

package/dist/{chunk-WW5RAKEC.cjs → chunk-DQ74DHTA.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Dollar.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function Dollar() {
+function Dollar({
+  strokeWidth = "1.125",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
@@ -13,9 +17,9 @@ function Dollar() {
         {
           d: "M7.90922 2.61607H5.00156M5.00156 2.61607H3.57422C2.26039 2.61607 1.19531 3.48552 1.19531 4.55804C1.19531 5.63055 2.26039 6.5 3.57422 6.5H5.00156M5.00156 2.61607V1.0625M5.00156 2.61607V6.5M5.00156 6.5H6.42891C7.74274 6.5 8.80781 7.36945 8.80781 8.44196C8.80781 9.51448 7.74274 10.3839 6.42891 10.3839H5.00156M5.00156 6.5V10.3839M5.00156 10.3839H1.61833M5.00156 10.3839V11.9375",
           stroke: "currentColor",
-          strokeWidth: "1.125",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-WDFOXMFH.js → chunk-DQTVRADP.js}

@@ -1,6 +1,10 @@
 // src/icons/Recycling.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function Recycling() {
+function Recycling({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -13,9 +17,9 @@ function Recycling() {
         {
           d: "M12 9.9987V4.66536C12 3.92898 11.4031 3.33203 10.6667 3.33203H7M12 9.9987L10 7.9987M12 9.9987L14 7.9987M4 5.9987V11.332C4 12.0684 4.59695 12.6654 5.33333 12.6654H9M4 5.9987L6 7.9987M4 5.9987L2 7.9987",
           stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-36RZWQ7S.js → chunk-DSXD2AYT.js}

@@ -1,6 +1,10 @@
 // src/icons/AI.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function AI() {
+function AI({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -14,9 +18,9 @@ function AI() {
         {
           d: "M11.4485 18.5547L10.5 21.875L9.5515 18.5547C9.30635 17.697 8.84672 16.9159 8.21597 16.2852C7.58522 15.6544 6.80416 15.1948 5.9465 14.9497L2.625 14L5.94533 13.0515C6.803 12.8064 7.58405 12.3467 8.2148 11.716C8.84555 11.0852 9.30518 10.3042 9.55033 9.4465L10.5 6.125L11.4485 9.44533C11.6936 10.303 12.1533 11.0841 12.784 11.7148C13.4148 12.3455 14.1958 12.8052 15.0535 13.0503L18.375 14L15.0547 14.9485C14.197 15.1936 13.4159 15.6533 12.7852 16.284C12.1544 16.9148 11.6948 17.6958 11.4497 18.5535L11.4485 18.5547ZM21.3022 10.1675L21 11.375L20.6978 10.1675C20.5249 9.47519 20.167 8.84289 19.6625 8.3382C19.1581 7.83351 18.5259 7.47541 17.8337 7.30217L16.625 7L17.8337 6.69783C18.5259 6.52459 19.1581 6.16649 19.6625 5.6618C20.167 5.15711 20.5249 4.52481 20.6978 3.8325L21 2.625L21.3022 3.8325C21.4752 4.52496 21.8332 5.15735 22.3379 5.66205C22.8426 6.16675 23.475 6.52478 24.1675 6.69783L25.375 7L24.1675 7.30217C23.475 7.47522 22.8426 7.83325 22.3379 8.33795C21.8332 8.84265 21.4752 9.47504 21.3022 10.1675ZM19.7097 23.9948L19.25 25.375L18.7903 23.9948C18.6615 23.6082 18.4444 23.2569 18.1562 22.9688C17.868 22.6806 17.5168 22.4635 17.1302 22.3347L15.75 21.875L17.1302 21.4153C17.5168 21.2865 17.868 21.0694 18.1562 20.7812C18.4444 20.493 18.6615 20.1418 18.7903 19.7552L19.25 18.375L19.7097 19.7552C19.8385 20.1418 20.0556 20.493 20.3438 20.7812C20.6319 21.0694 20.9832 21.2865 21.3698 21.4153L22.75 21.875L21.3698 22.3347C20.9832 22.4635 20.6319 22.6806 20.3438 22.9688C20.0556 23.2569 19.8385 23.6082 19.7097 23.9948Z",
           stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-NCLVA6JY.js → chunk-DV6LJQJW.js}

@@ -1,22 +1,23 @@
 import {
-  icons_exports
-} from "./chunk-XYP5XYVU.js";
+  iconMap
+} from "./chunk-VGRW2DQS.js";
 import {
   invertFillColor,
   invertStrokeColor
 } from "./chunk-VI6WTKMV.js";
 import {
   rootFontSizePx
-} from "./chunk-YBJVTNAP.js";
+} from "./chunk-POGNK25N.js";
 import {
   isString
 } from "./chunk-EDN2QDCB.js";
 import {
   getFontColor
-} from "./chunk-HYUF4RXZ.js";
+} from "./chunk-N4C6SL6K.js";
 
 // src/components/Icon/Icon.tsx
 import styled from "@emotion/styled";
+import React from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
 function Icon({
   className,
@@ -27,13 +28,15 @@ function Icon({
   mr: mrProp = 0,
   ml: mlProp = 0,
   color = void 0,
-  verticalAlign = "middle"
+  verticalAlign = "middle",
+  iconProps
 }) {
-  const IconComponent = icons_exports[name] || null;
+  const IconComponent = iconMap[name];
   const w = parseFloat((width / rootFontSizePx).toFixed(2));
   const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / rootFontSizePx).toFixed(2))}em` : mrProp;
   const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / rootFontSizePx).toFixed(2))}em` : mlProp;
   const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / rootFontSizePx).toFixed(2));
+  const icon = React.createElement(IconComponent, iconProps, null);
   return /* @__PURE__ */ jsx(
     IconContainer,
     {
@@ -45,7 +48,7 @@ function Icon({
       verticalAlign: va,
       fontColor: color,
       "data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
-      children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, {}) : null
+      children: icon
     }
   );
 }
@@ -80,10 +83,10 @@ var IconContainer = styled.span`
       */
 
       .${invertFillColor} {
-        fill: ${fontColor ? theme.hcNeutralFromBg(color) : "currentColor"};
+        fill: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
       }
       .${invertStrokeColor} {
-        stroke: ${fontColor ? theme.hcNeutralFromBg(color) : "currentColor"};
+        stroke: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
       }
     }
   `;

package/dist/{chunk-HA2ITLKV.cjs → chunk-DYWIRRUN.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Restart.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function Restart() {
+function Restart({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
@@ -13,8 +17,9 @@ function Restart() {
         {
           d: "M0.5 7.96429C1.28571 9.53571 2.85714 11.5 6 11.5C9.14286 11.5 10.7143 9.53571 11.5 7.96429M11.5 7.96429H8.75M11.5 7.96429V11.1071M11.5 4.03571C10.7143 2.46429 9.14286 0.5 6 0.5C2.85714 0.5 1.28571 2.46429 0.5 4.03571M0.5 4.03571H3.25M0.5 4.03571V0.892857",
           stroke: "currentColor",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-Q3F7S3R3.cjs → chunk-E36KSEQZ.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkOQEP7VDDcjs = require('./chunk-OQEP7VDD.cjs');
+var _chunkD262WAOVcjs = require('./chunk-D262WAOV.cjs');
 
 // src/styles/utils.tsx
 var _react = require('@emotion/react');
 function pxToRems(rems, asNum = false) {
-  const value = (rems / _chunkOQEP7VDDcjs.rootFontSizePx).toFixed(6);
+  const value = (rems / _chunkD262WAOVcjs.rootFontSizePx).toFixed(6);
   return asNum ? Number(value) : `${value}rem`;
 }
 function remsToPx(rems, asNum = false) {
-  const value = (_chunkOQEP7VDDcjs.rootFontSizePx * rems).toFixed(6);
+  const value = (_chunkD262WAOVcjs.rootFontSizePx * rems).toFixed(6);
   return asNum ? Number(value) : `${value}px`;
 }
 var extend = (...args) => _react.css.call(void 0, ...args);

package/dist/{chunk-JWW7RK4L.cjs → chunk-E4XGOCO2.cjs}

@@ -3,13 +3,13 @@
 var _chunkC6GQCKNTcjs = require('./chunk-C6GQCKNT.cjs');
 
 
-var _chunkUMU7TYANcjs = require('./chunk-UMU7TYAN.cjs');
+var _chunkORWZTMF2cjs = require('./chunk-ORWZTMF2.cjs');
 
 
-var _chunk4HIPKMRHcjs = require('./chunk-4HIPKMRH.cjs');
+var _chunkVUS3VIMScjs = require('./chunk-VUS3VIMS.cjs');
 
 
-var _chunk7EIZIKLRcjs = require('./chunk-7EIZIKLR.cjs');
+var _chunk6DWDBCUJcjs = require('./chunk-6DWDBCUJ.cjs');
 
 // src/components/IconWithCircleBackground.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -18,18 +18,48 @@ function IconWithCircleBackground({
   iconName = "WarningSign",
   iconWidth = 40,
   to,
-  onClick
+  onClick,
+  darkBg = false,
+  shouldRotate = false
 }) {
-  const content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC6GQCKNTcjs.Flex, { center: true, onClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledIconWithCircleBackground, { size: iconWidth, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUMU7TYANcjs.Icon, { name: iconName, width: iconWidth, color: "grayBlue9" }) }) });
-  return to ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4HIPKMRHcjs.Link, { to, children: content }) : content;
+  const content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC6GQCKNTcjs.Flex, { center: true, onClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledIconWithCircleBackground,
+    {
+      size: iconWidth,
+      darkBg,
+      shouldRotate,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkORWZTMF2cjs.Icon,
+        {
+          name: iconName,
+          width: iconWidth,
+          color: darkBg ? "white" : "grayBlue9"
+        }
+      )
+    }
+  ) });
+  return to ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVUS3VIMScjs.Link, { to, children: content }) : content;
 }
 var StyledIconWithCircleBackground = _styled2.default.div`
-  background-color: ${({ theme }) => _chunk7EIZIKLRcjs.getColor.call(void 0, theme, "grayBlue94")};
+  background: ${({ theme, darkBg }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : _chunk6DWDBCUJcjs.getColor.call(void 0, theme, "grayBlue94")};
   border-radius: 50%;
   padding: ${({ size }) => getPadding(size)}px;
   display: flex;
   justify-content: center;
   ${({ size }) => `width: ${size + getPadding(size) * 2}px; height: ${size + getPadding(size) * 2}px;`}
+
+  @keyframes IconWithCircleBackgroundRotate {
+    0% {
+      transform: rotate(0);
+    }
+    35% {
+      transform: rotate(360deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  ${({ shouldRotate }) => shouldRotate && `animation: IconWithCircleBackgroundRotate 10s ease infinite;`}
 `;
 function getPadding(size) {
   if (size === 40) {

package/dist/{chunk-OAU5Z4HG.js → chunk-E572HEDP.js}

@@ -1,6 +1,6 @@
 import {
   textInputStyle
-} from "./chunk-UGHP4KVZ.js";
+} from "./chunk-P2OCWRMQ.js";
 
 // src/components/CodeInput/SingleCodeInput.tsx
 import { css, useTheme } from "@emotion/react";