@lightsparkdev/ui 1.0.0 → 1.0.2

package/dist/{chunk-4YN25H5H.js → chunk-PNSZAJL7.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   toNonTypographicReactNodes
-} from "./chunk-QBJ57KNQ.js";
+} from "./chunk-6H7PZJ2A.js";
 import {
   applyTypography
-} from "./chunk-WIFHFWAN.js";
+} from "./chunk-VUXU77SU.js";
 
 // src/components/typography/Headline.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-CB2PBQ2G.js → chunk-RSAYBOK5.js}

@@ -1,13 +1,13 @@
 import {
   LabelModerate
-} from "./chunk-NMJGBK5W.js";
+} from "./chunk-56QJRFP2.js";
 import {
   standardBorderRadius
-} from "./chunk-52POF2W4.js";
+} from "./chunk-7NPHOJXD.js";
 import {
   getColor,
   isLight
-} from "./chunk-ZFDYANKZ.js";
+} from "./chunk-A4JZESAS.js";
 
 // src/components/Badge.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-FEJU2K4L.js → chunk-S6AOKANU.js}

@@ -1,16 +1,16 @@
 import {
   applyTypography
-} from "./chunk-WIFHFWAN.js";
+} from "./chunk-VUXU77SU.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   standardBorderRadius,
   subtext
-} from "./chunk-52POF2W4.js";
+} from "./chunk-7NPHOJXD.js";
 import {
   themeOr
-} from "./chunk-ZFDYANKZ.js";
+} from "./chunk-A4JZESAS.js";
 
 // src/styles/fields.tsx
 import { css } from "@emotion/react";

package/dist/{chunk-PK4E5P4Q.js → chunk-SGSLTG65.js}

@@ -1,12 +1,12 @@
 import {
   Tooltip
-} from "./chunk-3A6TEYT3.js";
+} from "./chunk-27SFWLPS.js";
 import {
   UnstyledButton
-} from "./chunk-HGYVPOA7.js";
+} from "./chunk-6JFJDBV2.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-KBYU4ZQ3.js";
 import {
   __async
 } from "./chunk-LOPKRCGI.js";

package/dist/{chunk-3TKO2L4T.js → chunk-SKXCT2FQ.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-QBJ57KNQ.js";
+} from "./chunk-6H7PZJ2A.js";
 import {
   applyTypography
-} from "./chunk-WIFHFWAN.js";
+} from "./chunk-VUXU77SU.js";
 
 // src/components/typography/Label.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-QSVZXM35.js → chunk-SRHSJOES.js}

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

package/dist/{chunk-MO5PIHUX.js → chunk-TM2NGRD2.js}

@@ -1,6 +1,6 @@
 import {
   Label
-} from "./chunk-3TKO2L4T.js";
+} from "./chunk-SKXCT2FQ.js";
 
 // src/components/Radio.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-POTDIFIX.js → chunk-TM3C4LEG.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-QBJ57KNQ.js";
+} from "./chunk-6H7PZJ2A.js";
 import {
   applyTypography
-} from "./chunk-WIFHFWAN.js";
+} from "./chunk-VUXU77SU.js";
 
 // src/components/typography/Body.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-LWYMD7X4.js → chunk-TVLELY54.js}

@@ -1,18 +1,18 @@
 import {
   Loading
-} from "./chunk-54WKLEUU.js";
+} from "./chunk-BMSSV6NX.js";
 import {
   UnstyledButton
-} from "./chunk-HGYVPOA7.js";
+} from "./chunk-6JFJDBV2.js";
 import {
   flexCenter
-} from "./chunk-JXXIU52B.js";
+} from "./chunk-KFX7US6Y.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-KBYU4ZQ3.js";
 import {
   colors
-} from "./chunk-KYTOF4WO.js";
+} from "./chunk-XUWFUTR4.js";
 
 // src/components/Pill.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-AHIR5UAO.js → chunk-UBYBILLK.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-QBJ57KNQ.js";
+} from "./chunk-6H7PZJ2A.js";
 import {
   applyTypography
-} from "./chunk-WIFHFWAN.js";
+} from "./chunk-VUXU77SU.js";
 
 // src/components/typography/Overline.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-3BMKXP5E.js → chunk-UNULJ3P6.js}

@@ -1,18 +1,18 @@
 import {
   CopyToClipboardButton
-} from "./chunk-PK4E5P4Q.js";
+} from "./chunk-SGSLTG65.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-JXXIU52B.js";
+} from "./chunk-KFX7US6Y.js";
 import {
   standardBorderRadius
-} from "./chunk-52POF2W4.js";
+} from "./chunk-7NPHOJXD.js";
 import {
   themeOr
-} from "./chunk-ZFDYANKZ.js";
+} from "./chunk-A4JZESAS.js";
 import {
   colors
-} from "./chunk-KYTOF4WO.js";
+} from "./chunk-XUWFUTR4.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-VENBTZHV.js → chunk-UVGBD7XM.js}

@@ -1,6 +1,6 @@
 import {
   renderTypography
-} from "./chunk-44UNWWP3.js";
+} from "./chunk-DCFB5MJ7.js";
 import {
   isExternalLinkNode,
   isIconNode,
@@ -8,7 +8,7 @@ import {
   isNextLinkNode,
   isTextNode,
   toNonTypographicReactNodes
-} from "./chunk-QBJ57KNQ.js";
+} from "./chunk-6H7PZJ2A.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-WIFHFWAN.js → chunk-VUXU77SU.js}

@@ -1,6 +1,6 @@
 import {
   getFontColor
-} from "./chunk-ZFDYANKZ.js";
+} from "./chunk-A4JZESAS.js";
 import {
   getTypographyString
 } from "./chunk-ENBUKLVT.js";

package/dist/{chunk-UKAPI3BN.js → chunk-VYTN6ASZ.js}

@@ -4,10 +4,10 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-52POF2W4.js";
+} from "./chunk-7NPHOJXD.js";
 import {
   useThemeBg
-} from "./chunk-ZFDYANKZ.js";
+} from "./chunk-A4JZESAS.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-UA3XC7J6.js → chunk-W3BAJ3HT.js}

@@ -3,46 +3,46 @@ import {
 } from "./chunk-JJC2AUQ3.js";
 import {
   TextButton
-} from "./chunk-YYPRW5VJ.js";
+} from "./chunk-HZ63YB4Y.js";
 import {
   toReactNodes
-} from "./chunk-VENBTZHV.js";
+} from "./chunk-UVGBD7XM.js";
 import {
   Dropdown
-} from "./chunk-5GVDRJLI.js";
+} from "./chunk-GGEAODIA.js";
 import {
   standardBorderColor
-} from "./chunk-FEJU2K4L.js";
+} from "./chunk-S6AOKANU.js";
 import {
   Badge,
   badgeVPadding
-} from "./chunk-CB2PBQ2G.js";
+} from "./chunk-RSAYBOK5.js";
 import {
   Heading,
   headingWithDefaults
-} from "./chunk-BPZ7AV7W.js";
+} from "./chunk-5H32AOXL.js";
 import {
   Loading
-} from "./chunk-54WKLEUU.js";
+} from "./chunk-BMSSV6NX.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   UnstyledButton
-} from "./chunk-HGYVPOA7.js";
+} from "./chunk-6JFJDBV2.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-KBYU4ZQ3.js";
 import {
   standardBorderRadius,
   standardLineHeightEms
-} from "./chunk-52POF2W4.js";
+} from "./chunk-7NPHOJXD.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-KYTOF4WO.js";
+} from "./chunk-XUWFUTR4.js";
 import {
   __spreadValues
 } from "./chunk-LOPKRCGI.js";

package/dist/{chunk-SMDDRU6V.js → chunk-WV5AB4ZB.js}

@@ -3,45 +3,51 @@ import {
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-RVT4NV6Z.js";
+} from "./chunk-XUVCOSIE.js";
+import {
+  Flex
+} from "./chunk-IL6J7EBZ.js";
 import {
   toReactNodes
-} from "./chunk-VENBTZHV.js";
+} from "./chunk-UVGBD7XM.js";
 import {
   Drawer
-} from "./chunk-LXK52GLU.js";
+} from "./chunk-467PLJO3.js";
 import {
   Button,
   ButtonSelector
-} from "./chunk-GHIYWOAC.js";
+} from "./chunk-EV6PGQPM.js";
+import {
+  Body
+} from "./chunk-TM3C4LEG.js";
 import {
   Headline,
   headlineSelector
-} from "./chunk-4YN25H5H.js";
+} from "./chunk-PNSZAJL7.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
-  Body
-} from "./chunk-POTDIFIX.js";
+  UnstyledButton
+} from "./chunk-6JFJDBV2.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
-import {
-  UnstyledButton
-} from "./chunk-HGYVPOA7.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-JXXIU52B.js";
+} from "./chunk-KFX7US6Y.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-KBYU4ZQ3.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-52POF2W4.js";
+} from "./chunk-7NPHOJXD.js";
+import {
+  getColor
+} from "./chunk-A4JZESAS.js";
 import {
   TokenSize
 } from "./chunk-ENBUKLVT.js";
@@ -49,17 +55,37 @@ import {
   bp,
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
+import {
+  __spreadValues
+} from "./chunk-LOPKRCGI.js";
 
 // src/components/Modal.tsx
-import styled from "@emotion/styled";
+import styled2 from "@emotion/styled";
 import React, { Fragment, useEffect, useLayoutEffect, useRef } from "react";
 import ReactDOM from "react-dom";
-import { Fragment as Fragment2, jsx, jsxs } from "@emotion/react/jsx-runtime";
+
+// 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";
 function isSubmitLinkWithHref(submitLink) {
   return Boolean(submitLink && "href" in submitLink);
 }
 function Modal({
   visible,
+  topContent,
   title,
   description,
   children,
@@ -183,7 +209,7 @@ function Modal({
   const linkIsRoute = !linkIsHref && submitLink;
   const buttonContent = /* @__PURE__ */ jsxs(Fragment2, { children: [
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((action) => action.content),
-    !isSm && !cancelHidden && /* @__PURE__ */ jsx(
+    !isSm && !cancelHidden && /* @__PURE__ */ jsx2(
       Button,
       {
         disabled: cancelDisabled,
@@ -191,7 +217,7 @@ function Modal({
         text: cancelText
       }
     ),
-    onSubmit && /* @__PURE__ */ jsx(
+    (onSubmit || submitLink) && /* @__PURE__ */ jsx2(
       Button,
       {
         kind: "primary",
@@ -205,13 +231,13 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: cancelText }),
+    isSm && !cancelHidden && /* @__PURE__ */ jsx2(Button, { onClick: onClose, text: cancelText }),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((action) => action.content)
   ] });
   let titleContent = null;
   if (title) {
     if (typeof title === "string") {
-      titleContent = /* @__PURE__ */ jsx(Headline, { heading: "h4", size: TokenSize.Small, children: title });
+      titleContent = /* @__PURE__ */ jsx2(Headline, { heading: "h4", size: TokenSize.Small, children: title });
     } else {
       titleContent = toReactNodes(title);
     }
@@ -219,31 +245,36 @@ function Modal({
   let descriptionContent = null;
   if (description) {
     if (typeof description === "string") {
-      descriptionContent = /* @__PURE__ */ jsx(Description, { children: /* @__PURE__ */ jsx(Body, { size: "ExtraSmall", content: description }) });
+      descriptionContent = /* @__PURE__ */ jsx2(Description, { children: /* @__PURE__ */ jsx2(Body, { size: "ExtraSmall", content: description }) });
     } else {
-      descriptionContent = /* @__PURE__ */ jsx(Description, { children: toReactNodes(description) });
+      descriptionContent = /* @__PURE__ */ jsx2(Description, { children: toReactNodes(description) });
     }
   }
+  let topContentNode = null;
+  if (topContent) {
+    topContentNode = /* @__PURE__ */ jsx2("div", { css: { marginBottom: "32px" /* xl */ }, children: /* @__PURE__ */ jsx2(IconWithCircleBackground, __spreadValues({}, topContent)) });
+  }
   const modalContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    progressBar ? /* @__PURE__ */ jsx("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ jsx(
+    progressBar ? /* @__PURE__ */ jsx2("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ jsx2(
       ProgressBar,
       {
         progressPercentage: progressBar.progressPercentage,
         isSm: progressBar.isSm
       }
     ) }) : null,
+    topContentNode,
     titleContent,
     descriptionContent,
     children,
-    onSubmit || onCancel ? buttonLayout === "horizontal" ? /* @__PURE__ */ jsx(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ jsx(ModalButtonColumn, { children: buttonContent }) : null
+    onSubmit || onCancel || submitLink ? buttonLayout === "horizontal" ? /* @__PURE__ */ jsx2(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ jsx2(ModalButtonColumn, { children: buttonContent }) : null
   ] });
   let content;
   if (smDrawer && isSm) {
-    content = /* @__PURE__ */ jsx(Drawer, { onClose: () => onClickCloseButton(), closeButton: true, children: modalContent });
+    content = /* @__PURE__ */ jsx2(Drawer, { onClose: () => onClickCloseButton(), closeButton: true, children: modalContent });
   } else {
     content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ModalOverlay, { ref: overlayRef }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(ModalOverlay, { ref: overlayRef }),
+      /* @__PURE__ */ jsx2(
         ModalContainer,
         {
           "aria-modal": true,
@@ -252,26 +283,26 @@ function Modal({
           role: "dialog",
           ref: modalContainerRef,
           children: /* @__PURE__ */ jsxs(ModalContent, { width, ghost, children: [
-            !firstFocusRef && /* @__PURE__ */ jsx(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
-            !(nonDismissable || ghost) && /* @__PURE__ */ jsx(CloseButtonContainer, { children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx(Icon, { name: "Close", width: 9 }) }) }),
-            /* @__PURE__ */ jsx(ModalContentInner, { ghost, children: modalContent })
+            !firstFocusRef && /* @__PURE__ */ jsx2(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+            !(nonDismissable || ghost) && /* @__PURE__ */ jsx2(CloseButtonContainer, { children: /* @__PURE__ */ jsx2(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx2(Icon, { name: "Close", width: 9 }) }) }),
+            /* @__PURE__ */ jsx2(ModalContentInner, { ghost, children: modalContent })
           ] })
         }
       )
     ] });
   }
   return visible && nodeReady && nodeRef.current ? ReactDOM.createPortal(
-    onSubmit ? /* @__PURE__ */ jsx("form", { onSubmit: onSubmitForm, children: content }) : content,
+    onSubmit ? /* @__PURE__ */ jsx2("form", { onSubmit: onSubmitForm, children: content }) : content,
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = styled(UnstyledButton)`
+var DefaultFocusTarget = styled2(UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
   height: 0;
 `;
-var ModalOverlay = styled.div`
+var ModalOverlay = styled2.div`
   position: fixed;
   bottom: 0;
   left: 0;
@@ -280,7 +311,7 @@ var ModalOverlay = styled.div`
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
 `;
-var ModalContainer = styled.div`
+var ModalContainer = styled2.div`
   pointer-events: none;
   position: fixed;
   top: 0;
@@ -298,14 +329,14 @@ var ModalContainer = styled.div`
   padding-top: ${standardContentInset.smPx}px;
 `;
 var contentTopMarginPx = 24;
-var Description = styled.div`
+var Description = styled2.div`
   color: ${({ theme }) => theme.mcNeutral};
   margin-top: ${"12px" /* sm */};
   & + * {
     margin-top: ${contentTopMarginPx}px;
   }
 `;
-var ModalButtonRow = styled.div`
+var ModalButtonRow = styled2.div`
   margin-top: ${"24px" /* lg */};
   ${bp.minSm(`display: flex;`)}
   gap: 10px;
@@ -317,7 +348,7 @@ var ModalButtonRow = styled.div`
     `)}
   }
 `;
-var ModalButtonColumn = styled.div`
+var ModalButtonColumn = styled2.div`
   display: flex;
   flex-direction: column;
   gap: ${"12px" /* sm */};
@@ -328,7 +359,7 @@ var ModalButtonColumn = styled.div`
 
   margin-top: ${"24px" /* lg */};
 `;
-var ModalContent = styled.div`
+var ModalContent = styled2.div`
   ${overflowAutoWithoutScrollbars}
   ${standardContentInset.smCSS}
   ${(props) => props.ghost ? "" : standardBorderRadius(16)}
@@ -348,18 +379,18 @@ var ModalContent = styled.div`
     }
   }
 `;
-var CloseButtonContainer = styled.div`
+var CloseButtonContainer = styled2.div`
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: flex-end;
 `;
-var CloseButton = styled(UnstyledButton)`
+var CloseButton = styled2(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
   height: 24px;
 `;
-var ModalContentInner = styled.div`
+var ModalContentInner = styled2.div`
   ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
   ${(props) => props.ghost ? "" : `${bp.sm(`
     padding-left: 10px;
@@ -368,5 +399,6 @@ var ModalContentInner = styled.div`
 `;
 
 export {
-  Modal
+  Modal,
+  IconWithCircleBackground
 };

package/dist/{chunk-CZH4OCQY.js → chunk-XP3BAAUO.js}

@@ -1,9 +1,9 @@
 import {
   renderTypography
-} from "./chunk-44UNWWP3.js";
+} from "./chunk-DCFB5MJ7.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-KBYU4ZQ3.js";
 
 // src/components/TextIconAligner.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";

package/dist/{chunk-RVT4NV6Z.js → chunk-XUVCOSIE.js}

@@ -1,9 +1,9 @@
 import {
   standardBorderRadius
-} from "./chunk-52POF2W4.js";
+} from "./chunk-7NPHOJXD.js";
 import {
   themeOr
-} from "./chunk-ZFDYANKZ.js";
+} from "./chunk-A4JZESAS.js";
 
 // src/components/ProgressBar.tsx
 import styled from "@emotion/styled";

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

@@ -64,7 +64,7 @@ var colors = baseColors;
 function isColorKey(key) {
   return key in colors;
 }
-function hcNeutralFromBg(bgHex, defaultHex, altHex) {
+function hcNeutralFromBg(bgHex, defaultHex = colors.black, altHex = colors.white) {
   const bgRGB = hexToRGB(bgHex);
   const hcRGB = hexToRGB(defaultHex);
   if (!bgRGB || !hcRGB)

package/dist/{chunk-RHHYOFN6.js → chunk-YRYVSAWS.js}

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

package/dist/{chunk-KBL7GU4S.js → chunk-ZNZAY47J.js}

@@ -1,12 +1,12 @@
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-JXXIU52B.js";
+} from "./chunk-KFX7US6Y.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-KBYU4ZQ3.js";
 import {
   standardBorderRadius
-} from "./chunk-52POF2W4.js";
+} from "./chunk-7NPHOJXD.js";
 
 // src/components/Collapsible.tsx
 import styled from "@emotion/styled";