@lightsparkdev/ui 1.0.3 → 1.0.4

package/dist/{chunk-4JHXRPRB.js → chunk-W2N5QUG6.js}

@@ -1,12 +1,15 @@
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   standardBorderRadius
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 
 // src/components/Collapsible.tsx
 import styled from "@emotion/styled";
@@ -118,9 +121,9 @@ var CollapsingContainer = styled.div`
   }
 `;
 var InnerPadding = styled.div`
-  padding: ${"4px" /* 3xs */} 0 ${"4px" /* 3xs */}
-    ${(props) => props.contentIndent ? "16px" /* md */ : "0"};
-  gap: ${"2px" /* 4xs */};
+  padding: ${Spacing.px["3xs"]} 0 ${Spacing.px["3xs"]}
+    ${(props) => props.contentIndent ? Spacing.px.md : "0"};
+  gap: ${Spacing.px["4xs"]};
   display: flex;
   flex-direction: column;
 `;

package/dist/{chunk-YIHC25WB.js → chunk-WDJMAZFO.js}

@@ -1,12 +1,12 @@
 import {
   Button
-} from "./chunk-SLKPLSJU.js";
+} from "./chunk-MNMVZI7D.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   standardContentInset
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-C4KZC45Y.js → chunk-XS4MH3QA.js}

@@ -3,51 +3,51 @@ import {
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-54EOEIEN.js";
+} from "./chunk-VXH6GWGE.js";
 import {
-  Flex
-} from "./chunk-IL6J7EBZ.js";
-import {
-  toReactNodes
-} from "./chunk-LIQSJ5R7.js";
+  IconWithCircleBackground
+} from "./chunk-EIFK352Q.js";
 import {
   Drawer
-} from "./chunk-JNNJVBHF.js";
+} from "./chunk-JH53NBOD.js";
+import {
+  toReactNodes
+} from "./chunk-ZO35RX7V.js";
 import {
   Button,
   ButtonSelector
-} from "./chunk-SLKPLSJU.js";
+} from "./chunk-MNMVZI7D.js";
 import {
   Body
-} from "./chunk-GWHKALYQ.js";
+} from "./chunk-HVDX4OZJ.js";
 import {
   Headline,
   headlineSelector
-} from "./chunk-CRTTTIAD.js";
+} from "./chunk-OZQ5WPLN.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-PG2W2HVB.js";
-import {
-  getColor
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   TokenSize
 } from "./chunk-ENBUKLVT.js";
@@ -61,26 +61,10 @@ import {
 } from "./chunk-LOPKRCGI.js";
 
 // src/components/Modal.tsx
-import styled2 from "@emotion/styled";
+import styled from "@emotion/styled";
 import React, { Fragment, useEffect, useLayoutEffect, useRef } from "react";
 import ReactDOM from "react-dom";
-
-// src/components/IconWithCircleBackground.tsx
-import styled from "@emotion/styled";
-import { jsx } from "@emotion/react/jsx-runtime";
-function IconWithCircleBackground({
-  iconName = "WarningSign"
-}) {
-  return /* @__PURE__ */ jsx(Flex, { center: true, children: /* @__PURE__ */ jsx(StyledIconWithCircleBackground, { children: /* @__PURE__ */ jsx(Icon, { name: iconName, width: 40, color: "grayBlue9" }) }) });
-}
-var StyledIconWithCircleBackground = styled.div`
-  background-color: ${({ theme }) => getColor(theme, "grayBlue94")};
-  border-radius: 50%;
-  padding: 20px;
-`;
-
-// src/components/Modal.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment2, jsx, jsxs } from "@emotion/react/jsx-runtime";
 function isSubmitLinkWithHref(submitLink) {
   return Boolean(submitLink && "href" in submitLink);
 }
@@ -213,9 +197,9 @@ function Modal({
   const buttonContent = /* @__PURE__ */ jsxs(Fragment2, { children: [
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
       var _b = _a, { placement, text } = _b, rest = __objRest(_b, ["placement", "text"]);
-      return /* @__PURE__ */ jsx2(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ jsx(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
     }),
-    !isSm && !cancelHidden && /* @__PURE__ */ jsx2(
+    !isSm && !cancelHidden && /* @__PURE__ */ jsx(
       Button,
       {
         disabled: cancelDisabled,
@@ -223,7 +207,7 @@ function Modal({
         text: cancelText
       }
     ),
-    (onSubmit || submitLink) && /* @__PURE__ */ jsx2(
+    (onSubmit || submitLink) && /* @__PURE__ */ jsx(
       Button,
       {
         kind: "primary",
@@ -237,16 +221,16 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ jsx2(Button, { onClick: onClose, text: cancelText }),
+    isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: cancelText }),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
       var _d = _c, { placement, text } = _d, rest = __objRest(_d, ["placement", "text"]);
-      return /* @__PURE__ */ jsx2(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ jsx(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
     })
   ] });
   let titleContent = null;
   if (title) {
     if (typeof title === "string") {
-      titleContent = /* @__PURE__ */ jsx2(Headline, { heading: "h4", size: TokenSize.Small, children: title });
+      titleContent = /* @__PURE__ */ jsx(Headline, { heading: "h4", size: TokenSize.Small, children: title });
     } else {
       titleContent = toReactNodes(title);
     }
@@ -254,17 +238,17 @@ function Modal({
   let descriptionContent = null;
   if (description) {
     if (typeof description === "string") {
-      descriptionContent = /* @__PURE__ */ jsx2(Description, { children: /* @__PURE__ */ jsx2(Body, { size: "ExtraSmall", content: description }) });
+      descriptionContent = /* @__PURE__ */ jsx(Description, { children: /* @__PURE__ */ jsx(Body, { size: "ExtraSmall", content: description }) });
     } else {
-      descriptionContent = /* @__PURE__ */ jsx2(Description, { children: toReactNodes(description) });
+      descriptionContent = /* @__PURE__ */ jsx(Description, { children: toReactNodes(description) });
     }
   }
   let topContentNode = null;
   if (topContent) {
-    topContentNode = /* @__PURE__ */ jsx2("div", { css: { marginBottom: "32px" /* xl */ }, children: /* @__PURE__ */ jsx2(IconWithCircleBackground, __spreadValues({}, topContent)) });
+    topContentNode = /* @__PURE__ */ jsx("div", { css: { marginBottom: Spacing.px.xl }, children: /* @__PURE__ */ jsx(IconWithCircleBackground, __spreadValues({}, topContent)) });
   }
   const modalContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    progressBar ? /* @__PURE__ */ jsx2("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ jsx2(
+    progressBar ? /* @__PURE__ */ jsx("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ jsx(
       ProgressBar,
       {
         progressPercentage: progressBar.progressPercentage,
@@ -275,11 +259,11 @@ function Modal({
     titleContent,
     descriptionContent,
     children,
-    onSubmit || onCancel || submitLink ? buttonLayout === "horizontal" ? /* @__PURE__ */ jsx2(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ jsx2(ModalButtonColumn, { children: buttonContent }) : null
+    onSubmit || onCancel || submitLink ? buttonLayout === "horizontal" ? /* @__PURE__ */ jsx(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ jsx(ModalButtonColumn, { children: buttonContent }) : null
   ] });
   let content;
   if (smKind === "drawer" && isSm) {
-    content = /* @__PURE__ */ jsx2(
+    content = /* @__PURE__ */ jsx(
       Drawer,
       {
         onClose: () => onClickCloseButton(),
@@ -291,8 +275,8 @@ function Modal({
     );
   } else {
     content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      !(smKind === "fullscreen" && bp2.isSm()) ? /* @__PURE__ */ jsx2(ModalOverlay, { ref: overlayRef }) : null,
-      /* @__PURE__ */ jsx2(
+      !(smKind === "fullscreen" && bp2.isSm()) ? /* @__PURE__ */ jsx(ModalOverlay, { ref: overlayRef }) : null,
+      /* @__PURE__ */ jsx(
         ModalContainer,
         {
           "aria-modal": true,
@@ -302,29 +286,29 @@ function Modal({
           ref: modalContainerRef,
           top: top || (smKind === "default" ? standardContentInset.smPx : 0),
           children: /* @__PURE__ */ jsxs(ModalContent, { width, ghost, smKind, children: [
-            !firstFocusRef && /* @__PURE__ */ jsx2(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+            !firstFocusRef && /* @__PURE__ */ jsx(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
             !ghost && /* @__PURE__ */ jsxs(ModalNavigation, { children: [
-              handleBack && /* @__PURE__ */ jsx2(BackButton, { onClick: handleBack, children: /* @__PURE__ */ jsx2(Icon, { name: "ChevronLeft", width: 16 }) }),
-              !nonDismissable && /* @__PURE__ */ jsx2(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx2(Icon, { name: "Close", width: 9 }) })
+              handleBack && /* @__PURE__ */ jsx(BackButton, { onClick: handleBack, children: /* @__PURE__ */ jsx(Icon, { name: "ChevronLeft", width: 16 }) }),
+              !nonDismissable && /* @__PURE__ */ jsx(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx(Icon, { name: "Close", width: 9 }) })
             ] }),
-            /* @__PURE__ */ jsx2(ModalContentInner, { ghost, children: modalContent })
+            /* @__PURE__ */ jsx(ModalContentInner, { ghost, children: modalContent })
           ] })
         }
       )
     ] });
   }
   return visible && nodeReady && nodeRef.current ? ReactDOM.createPortal(
-    onSubmit ? /* @__PURE__ */ jsx2("form", { onSubmit: onSubmitForm, children: content }) : content,
+    onSubmit ? /* @__PURE__ */ jsx("form", { onSubmit: onSubmitForm, children: content }) : content,
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = styled2(UnstyledButton)`
+var DefaultFocusTarget = styled(UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
   height: 0;
 `;
-var ModalOverlay = styled2.div`
+var ModalOverlay = styled.div`
   position: fixed;
   bottom: 0;
   left: 0;
@@ -333,7 +317,7 @@ var ModalOverlay = styled2.div`
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
 `;
-var ModalContainer = styled2.div`
+var ModalContainer = styled.div`
   pointer-events: none;
   position: fixed;
   top: 0;
@@ -351,15 +335,15 @@ var ModalContainer = styled2.div`
   ${(props) => `top: ${props.top}px;`}
 `;
 var contentTopMarginPx = 24;
-var Description = styled2.div`
+var Description = styled.div`
   color: ${({ theme }) => theme.mcNeutral};
-  margin-top: ${"12px" /* sm */};
+  margin-top: ${Spacing.px.sm};
   & + * {
     margin-top: ${contentTopMarginPx}px;
   }
 `;
-var ModalButtonRow = styled2.div`
-  margin-top: ${"24px" /* lg */};
+var ModalButtonRow = styled.div`
+  margin-top: ${Spacing.px.lg};
   ${bp.minSm(`display: flex;`)}
   gap: 10px;
 
@@ -370,18 +354,18 @@ var ModalButtonRow = styled2.div`
     `)}
   }
 `;
-var ModalButtonColumn = styled2.div`
+var ModalButtonColumn = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${"12px" /* sm */};
+  gap: ${Spacing.px.sm};
 
   ${ButtonSelector()} {
     width: 100%;
   }
 
-  margin-top: ${"24px" /* lg */};
+  margin-top: ${Spacing.px.lg};
 `;
-var ModalContent = styled2.div`
+var ModalContent = styled.div`
   pointer-events: auto;
   transition: width 0.25s ease-in;
 
@@ -407,24 +391,24 @@ var ModalContent = styled2.div`
     }
   }
 `;
-var ModalNavigation = styled2.div`
+var ModalNavigation = styled.div`
   display: grid;
   grid-auto-flow: column;
   width: 100%;
 `;
-var BackButton = styled2(UnstyledButton)`
+var BackButton = styled(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-start;
 `;
-var CloseButton = styled2(UnstyledButton)`
+var CloseButton = styled(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-end;
 `;
-var ModalContentInner = styled2.div`
+var ModalContentInner = styled.div`
   ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
   ${(props) => props.ghost ? "" : `${bp.sm(`
     padding-left: 10px;
@@ -433,6 +417,5 @@ var ModalContentInner = styled2.div`
 `;
 
 export {
-  Modal,
-  IconWithCircleBackground
+  Modal
 };

package/dist/{chunk-OKXC33OU.js → chunk-YRFCWL73.js}

@@ -1,6 +1,9 @@
 import {
   Label
-} from "./chunk-BDZ46Z2I.js";
+} from "./chunk-7BSME2ZU.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 
 // src/components/Radio.tsx
 import styled from "@emotion/styled";
@@ -37,7 +40,7 @@ var RadioContainer = styled.div`
 var RadioRow = styled.label`
   display: flex;
   align-items: center;
-  gap: ${"12px" /* sm */};
+  gap: ${Spacing.px.sm};
 `;
 var RadioInput = styled.input``;
 

package/dist/{chunk-GSKTHUQJ.js → chunk-YRZ3VNBI.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-XDP7GCYE.js";
+} from "./chunk-4X67A2CS.js";
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OUHQXQOJ.js";
 
 // src/components/typography/LabelStrong.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-N2NPIZCV.js → chunk-ZCXGHQQF.js}

@@ -1,38 +1,38 @@
 import {
   ToggleContainer
-} from "./chunk-SNFRMD6Z.js";
+} from "./chunk-4BERRPJN.js";
 import {
   InputSubtext,
   defaultTextInputTypography,
   inputSpacingPx,
   textInputPlaceholderColor,
   textInputStyle
-} from "./chunk-6CNJ5ZCC.js";
+} from "./chunk-7RMHMFS2.js";
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OUHQXQOJ.js";
 import {
   CheckboxContainer
-} from "./chunk-E4DUADXU.js";
+} from "./chunk-LFD2KVAB.js";
 import {
   Tooltip
-} from "./chunk-RPNTFEXE.js";
+} from "./chunk-ZS7G6WIG.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon,
   IconContainer
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   standardBorderRadius
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   getFontColor
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   __spreadValues
 } from "./chunk-LOPKRCGI.js";

package/dist/{chunk-LIQSJ5R7.js → chunk-ZO35RX7V.js}

@@ -1,6 +1,6 @@
 import {
   renderTypography
-} from "./chunk-VXKNN4SF.js";
+} from "./chunk-LGXMGWLV.js";
 import {
   isExternalLinkNode,
   isIconNode,
@@ -8,13 +8,14 @@ import {
   isNextLinkNode,
   isTextNode,
   toNonTypographicReactNodes
-} from "./chunk-XDP7GCYE.js";
+} from "./chunk-4X67A2CS.js";
 import {
   __spreadProps,
   __spreadValues
 } from "./chunk-LOPKRCGI.js";
 
 // src/utils/toReactNodes.tsx
+import { isObject } from "lodash-es";
 import { Fragment } from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
 function toReactNodes(toReactNodesArg) {
@@ -23,12 +24,11 @@ function toReactNodes(toReactNodesArg) {
     let content;
     if (!node) {
       return null;
-    } else if (typeof node !== "string" && "typography" in node && node.typography.type && node.typography.props) {
+    } else if (typeof node !== "string" && "typography" in node && node.typography.type) {
+      const props = node.typography.props || {};
       content = /* @__PURE__ */ jsx(Fragment, { children: renderTypography(
         node.typography.type,
-        Object.assign(node.typography.props, {
-          content: node
-        })
+        Object.assign(props, { content: node })
       ) }, `typography-${i}-${node.text.substr(0, 10)}`);
     } else {
       content = toNonTypographicReactNodes(node);
@@ -37,7 +37,7 @@ function toReactNodes(toReactNodesArg) {
   });
   return /* @__PURE__ */ jsx(Fragment, { children: reactNodes });
 }
-function setReactNodesTypography(nodesArg, nodesTypographyMap) {
+function setReactNodesTypography(nodesArg, nodesTypographyMap, replaceExistingTypography = true) {
   const nodes = Array.isArray(nodesArg) ? nodesArg : [nodesArg];
   const nodesWithTypography = nodes.map((node, i) => {
     if (isIconNode(node)) {
@@ -49,28 +49,32 @@ function setReactNodesTypography(nodesArg, nodesTypographyMap) {
           typography: nodesTypographyMap.text
         };
       }
-    } else if (isLinkNode(node)) {
+    } else if (!node) {
+      return node;
+    }
+    const useExistingTypography = !replaceExistingTypography && isObject(node) && "typography" in node ? node.typography : void 0;
+    if (isLinkNode(node)) {
       if (nodesTypographyMap.link) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.link
+          typography: useExistingTypography || nodesTypographyMap.link
         });
       }
     } else if (isExternalLinkNode(node)) {
       if (nodesTypographyMap.externalLink) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.externalLink
+          typography: useExistingTypography || nodesTypographyMap.externalLink
         });
       }
     } else if (isNextLinkNode(node)) {
       if (nodesTypographyMap.nextLink) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.nextLink
+          typography: useExistingTypography || nodesTypographyMap.nextLink
         });
       }
     } else if (isTextNode(node)) {
       if (nodesTypographyMap.text) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.text
+          typography: useExistingTypography || nodesTypographyMap.text
         });
       }
     }
@@ -89,9 +93,13 @@ function toReactNodesWithTypographyMap(nodesArg, nodesTypographyMap) {
   const nodes = toReactNodes(nodesWithTypography);
   return nodes;
 }
+function setDefaultReactNodesTypography(nodesArg, nodesTypographyMap) {
+  return setReactNodesTypography(nodesArg, nodesTypographyMap, false);
+}
 
 export {
   toReactNodes,
   setReactNodesTypography,
-  toReactNodesWithTypographyMap
+  toReactNodesWithTypographyMap,
+  setDefaultReactNodesTypography
 };

package/dist/{chunk-RPNTFEXE.js → chunk-ZS7G6WIG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-55OQPFLF.js";
 import {
   overlaySurface
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   __spreadProps,
   __spreadValues