@lightsparkdev/ui 1.0.11 → 1.0.13

package/dist/{chunk-VNJ4NNZJ.js → chunk-W7TFYYYB.js}

@@ -1,6 +1,10 @@
 // src/icons/CircleCheckOutline.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function CircleCheckOutline() {
+function CircleCheckOutline({
+  strokeWidth = "2",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter"
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -13,7 +17,9 @@ function CircleCheckOutline() {
         {
           d: "M6 10L8.5 12.5L13.5 7.5M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z",
           stroke: "currentColor",
-          strokeWidth: "2"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-2ZVOJA73.js → chunk-WB7M3D2W.js}

@@ -1,58 +1,49 @@
-import {
-  Body
-} from "./chunk-YU5VK6IK.js";
-import {
-  Headline
-} from "./chunk-54GVS2VF.js";
 import {
   useLiveRef
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-H2TSUAW4.js";
+} from "./chunk-OBBLAFLK.js";
 import {
   Drawer
-} from "./chunk-AJBJNU3D.js";
+} from "./chunk-MTAHDNQT.js";
 import {
   IconWithCircleBackground
-} from "./chunk-BD3WZIGI.js";
+} from "./chunk-XHATKRJR.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
-import {
-  overflowAutoWithoutScrollbars
-} from "./chunk-CD4D43OU.js";
 import {
   Button,
   ButtonSelector
-} from "./chunk-LQKIJF4I.js";
+} from "./chunk-4U3AAKMA.js";
 import {
   UnstyledButton
-} from "./chunk-7SNXBUCU.js";
+} from "./chunk-ZP6BJB4X.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  setDefaultReactNodesTypography
+} from "./chunk-GLYTFTP5.js";
 import {
   toReactNodes
-} from "./chunk-2I22MYIY.js";
+} from "./chunk-TS7Y6L2D.js";
+import {
+  overflowAutoWithoutScrollbars
+} from "./chunk-4ZUB5ENE.js";
 import {
   Icon
-} from "./chunk-NCLVA6JY.js";
+} from "./chunk-DV6LJQJW.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-YBJVTNAP.js";
-import {
-  headlineSelector
-} from "./chunk-A35Y4ISY.js";
+} from "./chunk-POGNK25N.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
-import {
-  TokenSize
-} from "./chunk-YQP6BIJN.js";
 import {
   bp,
   useBreakpoints
@@ -98,7 +89,9 @@ function Modal({
   buttonLayout = "horizontal",
   extraActions,
   handleBack,
-  appendToElement
+  appendToElement,
+  bottomContent,
+  topLeftIcon
 }) {
   const visibleChangedRef = useRef(false);
   const nodeRef = useRef(null);
@@ -235,19 +228,27 @@ function Modal({
   ] });
   let titleContent = null;
   if (title) {
-    if (typeof title === "string") {
-      titleContent = /* @__PURE__ */ jsx(Headline, { heading: "h4", size: TokenSize.Small, children: title });
-    } else {
-      titleContent = toReactNodes(title);
-    }
+    const defaultTypography = {
+      type: "Headline",
+      heading: "h4",
+      size: "Small"
+    };
+    const titleNodesWithTypography = setDefaultReactNodesTypography(title, {
+      default: defaultTypography
+    });
+    titleContent = /* @__PURE__ */ jsx(ModalTitle, { children: toReactNodes(titleNodesWithTypography) });
   }
   let descriptionContent = null;
   if (description) {
-    if (typeof description === "string") {
-      descriptionContent = /* @__PURE__ */ jsx(Description, { children: /* @__PURE__ */ jsx(Body, { size: "ExtraSmall", content: description }) });
-    } else {
-      descriptionContent = /* @__PURE__ */ jsx(Description, { children: toReactNodes(description) });
-    }
+    const defaultTypography = {
+      type: "Body",
+      size: "ExtraSmall"
+    };
+    const descriptionNodesWithTypography = setDefaultReactNodesTypography(
+      description,
+      { default: defaultTypography }
+    );
+    descriptionContent = /* @__PURE__ */ jsx(ModalDescription, { children: toReactNodes(descriptionNodesWithTypography) });
   }
   let topContentNode = null;
   if (topContent) {
@@ -294,10 +295,11 @@ function Modal({
           children: /* @__PURE__ */ jsxs(ModalContent, { width, ghost, smKind, children: [
             !firstFocusRef && /* @__PURE__ */ jsx(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
             !ghost && /* @__PURE__ */ jsxs(ModalNavigation, { children: [
-              handleBack && /* @__PURE__ */ jsx(BackButton, { onClick: handleBack, children: /* @__PURE__ */ jsx(Icon, { name: "ChevronLeft", width: 16 }) }),
+              handleBack ? /* @__PURE__ */ jsx(BackButton, { onClick: handleBack, children: /* @__PURE__ */ jsx(Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ jsx(Icon, __spreadValues({}, topLeftIcon)) : null,
               !nonDismissable && /* @__PURE__ */ jsx(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx(Icon, { name: "Close", width: 9 }) })
             ] }),
-            /* @__PURE__ */ jsx(ModalContentInner, { ghost, children: modalContent })
+            /* @__PURE__ */ jsx(ModalContentInner, { ghost, children: modalContent }),
+            bottomContent && /* @__PURE__ */ jsx("div", { css: { marginTop: "auto" }, children: bottomContent })
           ] })
         }
       )
@@ -341,7 +343,7 @@ var ModalContainer = styled.div`
   ${(props) => `top: ${props.top}px;`}
 `;
 var contentTopMarginPx = 24;
-var Description = styled.div`
+var ModalDescription = styled.div`
   color: ${({ theme }) => theme.mcNeutral};
   margin-top: ${Spacing.px.sm};
   & + * {
@@ -371,6 +373,12 @@ var ModalButtonColumn = styled.div`
 
   margin-top: ${Spacing.px.lg};
 `;
+var ModalTitle = styled.div`
+  margin: 0;
+  & + *:not(${select(ModalDescription)}) {
+    margin-top: ${contentTopMarginPx}px;
+  }
+`;
 var ModalContent = styled.div`
   pointer-events: auto;
   transition: width 0.25s ease-in;
@@ -382,6 +390,8 @@ var ModalContent = styled.div`
   max-width: 100%;
   max-height: 100%;
   position: absolute;
+  display: flex;
+  flex-direction: column;
 
   ${({ ghost, width }) => `
     ${ghost ? "" : standardBorderRadius(16)}
@@ -390,17 +400,10 @@ var ModalContent = styled.div`
 
   ${({ smKind }) => smKind === "fullscreen" ? bp.sm(`
           width: 100%;
-          height: 100%;
+          height: 100dvh;
         `) : ""}
 
   ${({ ghost }) => ghost ? "" : "padding: 16px 16px 40px;"}
-
-  ${headlineSelector("h4")} {
-    margin: 0;
-    & + *:not(${select(Description)}) {
-      margin-top: ${contentTopMarginPx}px;
-    }
-  }
 `;
 var ModalNavigation = styled.div`
   display: grid;

package/dist/{chunk-QLI53XXX.js → chunk-WBXNDT23.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk-JJC2AUQ3.js";
 import {
   TextButton
-} from "./chunk-N5BFM67M.js";
+} from "./chunk-AM2SAFZ6.js";
 import {
   IconContainer
-} from "./chunk-NCLVA6JY.js";
+} from "./chunk-DV6LJQJW.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-MN4NUSPL.js";
+} from "./chunk-HO7LVJ3R.js";
 
 // src/components/PageSection/PageSectionNav.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-XSE73A6Q.js → chunk-WC32NKES.js}

@@ -1,9 +1,12 @@
 import {
   InfoIconTooltip
-} from "./chunk-NHRJSG5K.js";
+} from "./chunk-BXJM6PXH.js";
+import {
+  Loading
+} from "./chunk-75PYS7WZ.js";
 import {
   ClipboardTextField
-} from "./chunk-V3XAM4BL.js";
+} from "./chunk-NVEDOY6M.js";
 import {
   useClipboard
 } from "./chunk-NFQP7P3D.js";
@@ -11,22 +14,19 @@ import {
   ignoreSSRWarning,
   lineClamp,
   overflowAutoWithoutScrollbars
-} from "./chunk-CD4D43OU.js";
-import {
-  Loading
-} from "./chunk-AQ4L3IR5.js";
+} from "./chunk-4ZUB5ENE.js";
 import {
   Icon
-} from "./chunk-NCLVA6JY.js";
+} from "./chunk-DV6LJQJW.js";
 import {
   standardBorderRadius,
   standardContentInset
-} from "./chunk-YBJVTNAP.js";
+} from "./chunk-POGNK25N.js";
 import {
   Link,
   replaceParams,
   useNavigate
-} from "./chunk-TIX47F5U.js";
+} from "./chunk-7VQUG3NG.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-GUUQ4PSE.cjs → chunk-WDZTASE5.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkOQEP7VDDcjs = require('./chunk-OQEP7VDD.cjs');
+var _chunkD262WAOVcjs = require('./chunk-D262WAOV.cjs');
 
 
-var _chunk7EIZIKLRcjs = require('./chunk-7EIZIKLR.cjs');
+var _chunk6DWDBCUJcjs = require('./chunk-6DWDBCUJ.cjs');
 
 // src/components/ProgressBar.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -41,8 +41,8 @@ function ProgressBar({
 }
 ProgressBar.defaultProps = defaultProps;
 var ProgressBarContainer = _styled2.default.div`
-  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 16)}
-  background-color: ${({ theme }) => _chunk7EIZIKLRcjs.themeOr.call(void 0, theme.c05Neutral, theme.c1Neutral)({ theme })};
+  ${_chunkD262WAOVcjs.standardBorderRadius.call(void 0, 16)}
+  background-color: ${({ theme }) => _chunk6DWDBCUJcjs.themeOr.call(void 0, theme.c05Neutral, theme.c1Neutral)({ theme })};
   box-sizing: border-box;
   display: flex;
   height: ${({ isSm }) => isSm ? "6px" : "16px"};
@@ -51,7 +51,7 @@ var ProgressBarContainer = _styled2.default.div`
   position: relative;
 `;
 var BarBg = _styled2.default.div`
-  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 16)}
+  ${_chunkD262WAOVcjs.standardBorderRadius.call(void 0, 16)}
   width: ${({ percentage }) => 100 / percentage * 100}%;
   height: 100%;
 
@@ -65,7 +65,7 @@ var BarBg = _styled2.default.div`
   )`};
 `;
 var Bar = _styled2.default.div`
-  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 16)}
+  ${_chunkD262WAOVcjs.standardBorderRadius.call(void 0, 16)}
   overflow: hidden;
   box-sizing: border-box;
   display: inline-block;

package/dist/{chunk-WN7T7ZQ2.js → chunk-WF3QCCW3.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-NCLVA6JY.js";
+} from "./chunk-DV6LJQJW.js";
 
 // src/components/ContentTable.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-2WMBDPXZ.cjs → chunk-WHRKM7UL.cjs}

@@ -14,7 +14,19 @@ var cardFormThemeBaseProps = {
   textAlign: "left",
   backgroundColor: "bg",
   smBackgroundColor: "bg",
-  smBorderWidth: 0
+  smBorderWidth: 0,
+  defaultDescriptionTypographyMap: {
+    default: {
+      type: "Body Strong",
+      size: "Small",
+      color: "mcNeutral"
+    },
+    link: {
+      type: "Body Strong",
+      size: "Small",
+      color: "text"
+    }
+  }
 };
 var cardFormThemeBase = _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, cardFormThemeBaseProps), {
   kinds: {

package/dist/{chunk-5XTJZUMA.js → chunk-WKKD3NF6.js}

@@ -1,6 +1,10 @@
 // src/icons/Envelope.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function Envelope() {
+function Envelope({
+  strokeWidth = "3",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -13,9 +17,9 @@ function Envelope() {
         {
           d: "M35.0027 15.417C30.8238 18.5565 25.6293 20.417 20.0002 20.417C14.371 20.417 9.17645 18.5565 4.99773 15.417M4.5835 7.91699H35.4168V32.0837H4.5835V7.91699Z",
           stroke: "currentColor",
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-AZ6KLR75.js → chunk-WWUA7KI6.js}

@@ -1,12 +1,12 @@
 import {
   getPropDefaultsBase
-} from "./chunk-BVEHA6GI.js";
+} from "./chunk-76FQY6HX.js";
 import {
   typographyStyles
-} from "./chunk-X5SBSJ3Z.js";
+} from "./chunk-F3HU3LG5.js";
 import {
   applyTypography
-} from "./chunk-FH6BM3M7.js";
+} from "./chunk-TLFK5GBE.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-PXZZG2CX.js → chunk-WY3ZN7KY.js}

@@ -1,15 +1,15 @@
 import {
   getPropDefaultsBase
-} from "./chunk-BVEHA6GI.js";
+} from "./chunk-76FQY6HX.js";
 import {
   typographyStyles
-} from "./chunk-X5SBSJ3Z.js";
+} from "./chunk-F3HU3LG5.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   applyTypography
-} from "./chunk-FH6BM3M7.js";
+} from "./chunk-TLFK5GBE.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-4EKGRFUQ.js → chunk-WY63TJ7S.js}

@@ -1,6 +1,10 @@
 // src/icons/DollarManrope.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function DollarManrope() {
+function DollarManrope({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -13,9 +17,9 @@ function DollarManrope() {
         {
           d: "M5.00003 2.3291V0.84668M5.00003 15.6709V17.1533M8.53134 4.55273C7.82641 3.66654 6.50905 3.07031 5.00003 3.07031H4.54706C2.54571 3.07031 0.92334 4.25023 0.92334 5.70572V5.81886C0.92334 6.85997 1.73211 7.81163 3.01249 8.27722L6.98757 9.72275C8.26797 10.1883 9.07666 11.14 9.07666 12.1811C9.07666 13.699 7.3847 14.9296 5.29736 14.9296H5.00003C3.49101 14.9296 2.17365 14.3334 1.46872 13.4472",
           stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-ENRGP6TU.cjs → chunk-WYI5QIGG.cjs}

@@ -4,7 +4,11 @@ var _chunkKS6GHRZIcjs = require('./chunk-KS6GHRZI.cjs');
 
 // src/icons/ArrowCircle.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function ArrowCircle() {
+function ArrowCircle({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "svg",
     {
@@ -19,9 +23,9 @@ function ArrowCircle() {
           {
             className: _chunkKS6GHRZIcjs.invertStrokeColor,
             d: "M21 18V9M21 9H12M21 9L9.5 20.5",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin
           }
         )
       ]

package/dist/{chunk-6AC5YUBP.js → chunk-WYYSFYDE.js}

@@ -1,6 +1,10 @@
 // src/icons/ArrowCornerDownRight.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function ArrowCornerDownRight() {
+function ArrowCornerDownRight({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -13,9 +17,9 @@ function ArrowCornerDownRight() {
         {
           d: "M2.66699 3.3335V10.0002H13.3337M13.3337 10.0002L10.667 7.3335M13.3337 10.0002L10.667 12.6668",
           stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/chunk-WZ7YBRQW.js

@@ -0,0 +1,27 @@
+// src/icons/ChevronRight.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function ChevronRight() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 9 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M1.5 1.33333L7.57742 7.41075C7.90283 7.73617 7.90283 8.26383 7.57742 8.58925L1.5 14.6667",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  ChevronRight
+};

package/dist/{chunk-N7NM6ELD.cjs → chunk-XFVRDQH7.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/AI.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function AI() {
+function AI({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "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-XHATKRJR.js

@@ -0,0 +1,73 @@
+import {
+  Flex
+} from "./chunk-5SJB7TBQ.js";
+import {
+  Icon
+} from "./chunk-DV6LJQJW.js";
+import {
+  Link
+} from "./chunk-7VQUG3NG.js";
+import {
+  getColor
+} from "./chunk-N4C6SL6K.js";
+
+// src/components/IconWithCircleBackground.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function IconWithCircleBackground({
+  iconName = "WarningSign",
+  iconWidth = 40,
+  to,
+  onClick,
+  darkBg = false,
+  shouldRotate = false
+}) {
+  const content = /* @__PURE__ */ jsx(Flex, { center: true, onClick, children: /* @__PURE__ */ jsx(
+    StyledIconWithCircleBackground,
+    {
+      size: iconWidth,
+      darkBg,
+      shouldRotate,
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: iconName,
+          width: iconWidth,
+          color: darkBg ? "white" : "grayBlue9"
+        }
+      )
+    }
+  ) });
+  return to ? /* @__PURE__ */ jsx(Link, { to, children: content }) : content;
+}
+var StyledIconWithCircleBackground = styled.div`
+  background: ${({ theme, darkBg }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : getColor(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) {
+    return 20;
+  }
+  return 16;
+}
+
+export {
+  IconWithCircleBackground
+};

package/dist/{chunk-YLERYYWF.js → chunk-XKCJPDD3.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-2I22MYIY.js";
+} from "./chunk-TS7Y6L2D.js";
 import {
   StyledLabelModerate,
   getPropDefaults
-} from "./chunk-AZ6KLR75.js";
+} from "./chunk-WWUA7KI6.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-FDL4732L.cjs → chunk-XNXC2QV2.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkUMU7TYANcjs = require('./chunk-UMU7TYAN.cjs');
+var _chunkORWZTMF2cjs = require('./chunk-ORWZTMF2.cjs');
 
 // src/components/Loading.tsx
 var _react = require('@emotion/react');
@@ -16,7 +16,7 @@ function Loading({
 }) {
   const theme = _react.useTheme.call(void 0, );
   const iconName = resolveLoadingProp(null, kind, "defaultIconName", theme);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingWrapper, { center, ml, mt, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Rotate, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUMU7TYANcjs.Icon, { name: iconName, width: size }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingWrapper, { center, ml, mt, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Rotate, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkORWZTMF2cjs.Icon, { name: iconName, width: size }) }) });
 }
 var LoadingWrapper = _styled2.default.div`
   flex-grow: 1;

package/dist/{chunk-RFJWSKGK.cjs → chunk-XR7TFTV6.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/CentralArrowShareRight.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function CentralArrowShareRight() {
+function CentralArrowShareRight({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+} = {}) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
@@ -14,8 +18,9 @@ function CentralArrowShareRight() {
         {
           d: "M21 9L11.5 0.75V5.5C3 5.5 0.75 8.75 0.75 17.25C2.25 14.25 3 12.5 11.5 12.5V17.25L21 9Z",
           stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }