@lightsparkdev/ui 1.0.3 → 1.0.5

package/dist/{chunk-XDP7GCYE.js → chunk-HNK2KIC7.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-OPV246QW.js";
 import {
   Link
-} from "./chunk-AAFUVYVP.js";
+} from "./chunk-SCIQSZSW.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 
 // src/utils/toNonTypographicReactNodes.tsx
 import { isObject } from "lodash-es";

package/dist/{chunk-BENSR2YW.js → chunk-I3WMJNCP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2NT4RAQ3.js";
 import {
   StyledHeadline
-} from "./chunk-CRTTTIAD.js";
+} from "./chunk-BNHCCR3C.js";
 
 // src/components/documentation/DocsHeadline.tsx
 import React from "react";

package/dist/{chunk-BDZ46Z2I.js → chunk-IH5SIRJL.js}

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

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

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

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

@@ -3,51 +3,51 @@ import {
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-54EOEIEN.js";
+} from "./chunk-3DXU76SI.js";
 import {
-  Flex
-} from "./chunk-IL6J7EBZ.js";
-import {
-  toReactNodes
-} from "./chunk-LIQSJ5R7.js";
+  IconWithCircleBackground
+} from "./chunk-QTPYP3IK.js";
 import {
   Drawer
-} from "./chunk-JNNJVBHF.js";
+} from "./chunk-QBRCVOJ4.js";
+import {
+  toReactNodes
+} from "./chunk-AKGW3FMJ.js";
 import {
   Button,
   ButtonSelector
-} from "./chunk-SLKPLSJU.js";
+} from "./chunk-NK7WH3TK.js";
 import {
   Body
-} from "./chunk-GWHKALYQ.js";
+} from "./chunk-PBLWYVQF.js";
 import {
   Headline,
   headlineSelector
-} from "./chunk-CRTTTIAD.js";
+} from "./chunk-BNHCCR3C.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-TN5UPDZG.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-D4DFISYR.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-PG2W2HVB.js";
-import {
-  getColor
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-YG5BANJH.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-MRGHRTKA.js → chunk-IXAXRBFS.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   toNonTypographicReactNodes
-} from "./chunk-XDP7GCYE.js";
+} from "./chunk-HNK2KIC7.js";
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OPUCWQMK.js";
 
 // src/components/typography/Display.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-QQSV7XJX.js → chunk-JZKGVGBU.js}

@@ -1,6 +1,6 @@
 import {
   StatusIndicator
-} from "./chunk-MWDDIXIP.js";
+} from "./chunk-LH5VFS3E.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";

package/dist/{chunk-XUWFUTR4.js → chunk-KPAVY3UH.js}

@@ -14,7 +14,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -38,10 +37,13 @@ var baseColors = __spreadProps(__spreadValues({}, neutral), {
   blue37: "#21529c",
   blue58: "#28BFFF",
   // less than 50% saturated blue
+  grayBlue5: "#0c0d0f",
   grayBlue9: "#16171A",
+  grayBlue18: "#21283a",
   grayBlue32: "#4F5156",
   grayBlue43: "#686A72",
   grayBlue45: "#676F80",
+  grayBlue57: "#8B8E98",
   grayBlue67: "#9BA7B9",
   grayBlue80: "#C0C9D6",
   grayBlue88: "#DEDFE4",

package/dist/{chunk-I3FI3FNP.js → chunk-LAGOF7IU.js}

@@ -10,10 +10,10 @@ import {
 } from "./chunk-VI6WTKMV.js";
 import {
   rootFontSizePx
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   getFontColor
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 
 // src/components/Icon/Icon.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-MWDDIXIP.js → chunk-LH5VFS3E.js}

@@ -1,6 +1,6 @@
 import {
   pxToRems
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-D4DFISYR.js";
 
 // src/components/StatusIndicator.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-2XUHQWCJ.js → chunk-LKJ7QTWL.js}

@@ -1,18 +1,18 @@
 import {
   TextIconAligner
-} from "./chunk-7YY6BH5O.js";
+} from "./chunk-GMEJR5XX.js";
 import {
   Link
-} from "./chunk-AAFUVYVP.js";
+} from "./chunk-SCIQSZSW.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-TN5UPDZG.js";
 import {
   elide
 } from "./chunk-EDN2QDCB.js";
 import {
   getFocusOutline
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   __spreadProps,
   __spreadValues

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

@@ -1,38 +1,38 @@
 import {
   ToggleContainer
-} from "./chunk-SNFRMD6Z.js";
+} from "./chunk-AXNQ7BDD.js";
 import {
   InputSubtext,
   defaultTextInputTypography,
   inputSpacingPx,
   textInputPlaceholderColor,
   textInputStyle
-} from "./chunk-6CNJ5ZCC.js";
+} from "./chunk-Q76C6FJ5.js";
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OPUCWQMK.js";
 import {
   CheckboxContainer
-} from "./chunk-E4DUADXU.js";
+} from "./chunk-PYAKYQWS.js";
 import {
   Tooltip
-} from "./chunk-RPNTFEXE.js";
+} from "./chunk-H3UUVMZ3.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-TN5UPDZG.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon,
   IconContainer
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 import {
   standardBorderRadius
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   getFontColor
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 import {
   __spreadValues
 } from "./chunk-LOPKRCGI.js";

package/dist/{chunk-BHP5YL2N.js → chunk-N67Y7GWR.js}

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