@lightsparkdev/ui 1.0.1 → 1.0.3

package/dist/{chunk-I5PGTS2V.js → chunk-7FHOKVKJ.js}

@@ -1,29 +1,29 @@
 import {
   toReactNodes
-} from "./chunk-VENBTZHV.js";
+} from "./chunk-LIQSJ5R7.js";
+import {
+  UnstyledButton
+} from "./chunk-LTCJ6LNO.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
-import {
-  UnstyledButton
-} from "./chunk-HGYVPOA7.js";
 import {
   extend,
   flexCenter,
   pxToRems
-} from "./chunk-JXXIU52B.js";
+} from "./chunk-7WDAN3OC.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   standardContentInset
-} from "./chunk-52POF2W4.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   themeOr
-} from "./chunk-ZFDYANKZ.js";
+} from "./chunk-IBZBPQMZ.js";
 import {
   colors
-} from "./chunk-KYTOF4WO.js";
+} from "./chunk-XUWFUTR4.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-UKAPI3BN.js → chunk-7IHNYMFQ.js}

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

package/dist/{chunk-4CYGTH2J.js → chunk-7N2PFDYE.js}

@@ -1,9 +1,9 @@
 import {
   SingleCodeInput
-} from "./chunk-QSVZXM35.js";
+} from "./chunk-PQKVR2BR.js";
 import {
   textInputBorderColor
-} from "./chunk-FEJU2K4L.js";
+} from "./chunk-6CNJ5ZCC.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-JXXIU52B.js → chunk-7WDAN3OC.js}

@@ -1,6 +1,6 @@
 import {
   rootFontSizePx
-} from "./chunk-52POF2W4.js";
+} from "./chunk-PG2W2HVB.js";
 
 // src/styles/utils.tsx
 import { css } from "@emotion/react";

package/dist/{chunk-GKH3ZH4N.js → chunk-7Y2G2JDF.js}

@@ -12,8 +12,8 @@ function Figma() {
       children: /* @__PURE__ */ jsx(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M8.01074 9.04831C8.01074 5.43178 10.9425 2.5 14.5591 2.5L25.7952 2.5C29.4118 2.5 32.3435 5.43178 32.3435 9.04831C32.3435 11.3383 31.1681 13.3537 29.3876 14.5242C31.1681 15.6947 32.3435 17.7102 32.3435 20.0001C32.3435 23.6167 29.4118 26.5485 25.7952 26.5485H25.653C23.9575 26.5485 22.4126 25.9041 21.2496 24.847V30.8806C21.2496 34.5453 18.2412 37.5 14.5944 37.5C10.9868 37.5 8.01074 34.5772 8.01074 30.9517C8.01074 28.6617 9.18619 26.6463 10.9666 25.476C9.18618 24.3055 8.01074 22.2901 8.01074 20.0001C8.01074 17.7102 9.1862 15.6947 10.9667 14.5242C9.18621 13.3537 8.01074 11.3383 8.01074 9.04831ZM14.5591 13.4517C12.1272 13.4517 10.1557 11.4802 10.1557 9.04831C10.1557 6.61641 12.1272 4.64497 14.5591 4.64497L19.1047 4.64497V13.4517H14.5591ZM19.1047 15.5966H14.5591C12.1272 15.5966 10.1557 17.5682 10.1557 20.0001C10.1557 22.4321 12.1272 24.4035 14.5591 24.4035H19.1047V15.5966ZM19.1047 26.5485H14.5591C12.1271 26.5485 10.1557 28.5198 10.1557 30.9517C10.1557 33.3746 12.1535 35.355 14.5944 35.355C17.0746 35.355 19.1047 33.3428 19.1047 30.8806V26.5485ZM25.7952 15.5966L25.653 15.5968C23.2211 15.5968 21.2496 17.5682 21.2496 20.0001C21.2496 22.4321 23.2211 24.4035 25.653 24.4035H25.7952C28.2271 24.4035 30.1986 22.4321 30.1986 20.0001C30.1986 17.5682 28.227 15.5967 25.7952 15.5966C25.7953 15.5966 25.7952 15.5966 25.7952 15.5966ZM25.7952 14.5242V13.4517H21.2496V4.64497H25.7952C28.2271 4.64497 30.1986 6.61641 30.1986 9.04831C30.1986 11.4802 28.2271 13.4517 25.7952 13.4517",
           fill: "black"
         }

package/dist/{chunk-CZH4OCQY.js → chunk-7YY6BH5O.js}

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

package/dist/{chunk-4QVTXKRX.js → chunk-AAFUVYVP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-EDN2QDCB.js";
 import {
   colors
-} from "./chunk-KYTOF4WO.js";
+} from "./chunk-XUWFUTR4.js";
 
 // src/router.tsx
 import { omit } from "lodash-es";

package/dist/chunk-ABSTTY5Q.js

@@ -0,0 +1,7 @@
+// src/hooks/useIsomorphicLayoutEffect.tsx
+import React from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+
+export {
+  useIsomorphicLayoutEffect
+};

package/dist/{chunk-NMJGBK5W.js → chunk-B6S7Y4K7.js}

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

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

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

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

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

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

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

package/dist/{chunk-NEH2HFAW.js → chunk-BSH6WRUZ.js}

@@ -1,13 +1,13 @@
 import {
   Pill
-} from "./chunk-LWYMD7X4.js";
+} from "./chunk-J3YVJWRG.js";
 import {
   InputSubtext,
   inputBlockStyle
-} from "./chunk-FEJU2K4L.js";
+} from "./chunk-6CNJ5ZCC.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-I3FI3FNP.js";
 
 // src/components/FileInput.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-2I6UL3CQ.js → chunk-C4KZC45Y.js}

@@ -3,45 +3,51 @@ import {
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-RVT4NV6Z.js";
+} from "./chunk-54EOEIEN.js";
+import {
+  Flex
+} from "./chunk-IL6J7EBZ.js";
 import {
   toReactNodes
-} from "./chunk-VENBTZHV.js";
+} from "./chunk-LIQSJ5R7.js";
 import {
   Drawer
-} from "./chunk-HXKKG2VQ.js";
+} from "./chunk-JNNJVBHF.js";
 import {
   Button,
   ButtonSelector
-} from "./chunk-GHIYWOAC.js";
+} from "./chunk-SLKPLSJU.js";
+import {
+  Body
+} from "./chunk-GWHKALYQ.js";
 import {
   Headline,
   headlineSelector
-} from "./chunk-4YN25H5H.js";
+} from "./chunk-CRTTTIAD.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
-  Body
-} from "./chunk-POTDIFIX.js";
+  UnstyledButton
+} from "./chunk-LTCJ6LNO.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
-import {
-  UnstyledButton
-} from "./chunk-HGYVPOA7.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-JXXIU52B.js";
+} from "./chunk-7WDAN3OC.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-52POF2W4.js";
+} from "./chunk-PG2W2HVB.js";
+import {
+  getColor
+} from "./chunk-IBZBPQMZ.js";
 import {
   TokenSize
 } from "./chunk-ENBUKLVT.js";
@@ -49,17 +55,38 @@ import {
   bp,
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
+import {
+  __objRest,
+  __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,
@@ -75,13 +102,15 @@ function Modal({
   submitLink,
   cancelText = "Cancel",
   firstFocusRef,
-  smDrawer,
+  smKind = "default",
+  top,
   nonDismissable = false,
   autoFocus = true,
   width = 460,
   progressBar,
   buttonLayout = "horizontal",
-  extraActions
+  extraActions,
+  handleBack
 }) {
   const visibleChangedRef = useRef(false);
   const nodeRef = useRef(null);
@@ -182,8 +211,11 @@ function Modal({
   const linkIsHref = isSubmitLinkWithHref(submitLink);
   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(
+    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}`);
+    }),
+    !isSm && !cancelHidden && /* @__PURE__ */ jsx2(
       Button,
       {
         disabled: cancelDisabled,
@@ -191,7 +223,7 @@ function Modal({
         text: cancelText
       }
     ),
-    onSubmit && /* @__PURE__ */ jsx(
+    (onSubmit || submitLink) && /* @__PURE__ */ jsx2(
       Button,
       {
         kind: "primary",
@@ -205,13 +237,16 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: cancelText }),
-    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((action) => action.content)
+    isSm && !cancelHidden && /* @__PURE__ */ jsx2(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}`);
+    })
   ] });
   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 +254,45 @@ 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 });
+  if (smKind === "drawer" && isSm) {
+    content = /* @__PURE__ */ jsx2(
+      Drawer,
+      {
+        onClose: () => onClickCloseButton(),
+        closeButton: true,
+        nonDismissable,
+        handleBack,
+        children: modalContent
+      }
+    );
   } else {
     content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ModalOverlay, { ref: overlayRef }),
-      /* @__PURE__ */ jsx(
+      !(smKind === "fullscreen" && bp2.isSm()) ? /* @__PURE__ */ jsx2(ModalOverlay, { ref: overlayRef }) : null,
+      /* @__PURE__ */ jsx2(
         ModalContainer,
         {
           "aria-modal": true,
@@ -251,27 +300,31 @@ function Modal({
           tabIndex: -1,
           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 })
+          top: top || (smKind === "default" ? standardContentInset.smPx : 0),
+          children: /* @__PURE__ */ jsxs(ModalContent, { width, ghost, smKind, children: [
+            !firstFocusRef && /* @__PURE__ */ jsx2(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 }) })
+            ] }),
+            /* @__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 +333,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;
@@ -295,17 +348,17 @@ var ModalContainer = styled.div`
   justify-content: center;
   align-items: center;
   color: ${({ theme }) => theme.text};
-  padding-top: ${standardContentInset.smPx}px;
+  ${(props) => `top: ${props.top}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 +370,7 @@ var ModalButtonRow = styled.div`
     `)}
   }
 `;
-var ModalButtonColumn = styled.div`
+var ModalButtonColumn = styled2.div`
   display: flex;
   flex-direction: column;
   gap: ${"12px" /* sm */};
@@ -328,17 +381,23 @@ var ModalButtonColumn = styled.div`
 
   margin-top: ${"24px" /* lg */};
 `;
-var ModalContent = styled.div`
-  ${overflowAutoWithoutScrollbars}
-  ${standardContentInset.smCSS}
-  ${(props) => props.ghost ? "" : standardBorderRadius(16)}
-  ${(props) => props.ghost ? "" : overlaySurface}
+var ModalContent = styled2.div`
   pointer-events: auto;
   transition: width 0.25s ease-in;
-  width: ${(props) => props.width}px;
-  max-width: 100%;
-  max-height: 100%;
-  position: absolute;
+
+  ${({ theme, smKind, ghost }) => ghost ? "" : overlaySurface({ theme, border: smKind !== "fullscreen" })}
+  ${overflowAutoWithoutScrollbars}
+  ${(props) => props.smKind === "fullscreen" && bp.isSm() ? `
+    width: 100%;
+    height: 100%;
+  ` : `
+    ${props.ghost ? "" : standardBorderRadius(16)}
+    ${standardContentInset.smCSS.styles}
+    width: ${props.width}px;
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+  `}
   ${(props) => props.ghost ? "" : "padding: 16px 16px 40px;"}
 
   ${headlineSelector("h4")} { {
@@ -348,18 +407,24 @@ var ModalContent = styled.div`
     }
   }
 `;
-var CloseButtonContainer = styled.div`
-  display: flex;
-  flex-direction: row;
+var ModalNavigation = styled2.div`
+  display: grid;
+  grid-auto-flow: column;
   width: 100%;
-  justify-content: flex-end;
 `;
-var CloseButton = styled(UnstyledButton)`
+var BackButton = styled2(UnstyledButton)`
+  ${standardFocusOutline}
+  width: 24px;
+  height: 24px;
+  justify-self: flex-start;
+`;
+var CloseButton = styled2(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
   height: 24px;
+  justify-self: flex-end;
 `;
-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 +433,6 @@ var ModalContentInner = styled.div`
 `;
 
 export {
-  Modal
+  Modal,
+  IconWithCircleBackground
 };

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

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

package/dist/{chunk-TKERS7F6.js → chunk-DXA3WUSX.js}

@@ -1,9 +1,9 @@
 import {
   CopyToClipboardButton
-} from "./chunk-PK4E5P4Q.js";
+} from "./chunk-X4TGLNCH.js";
 import {
   standardBorderRadius
-} from "./chunk-52POF2W4.js";
+} from "./chunk-PG2W2HVB.js";
 
 // src/components/SecretContainer.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-SW6GFFIG.js → chunk-E4DUADXU.js}

@@ -1,6 +1,6 @@
 import {
   standardLineHeightEms
-} from "./chunk-52POF2W4.js";
+} from "./chunk-PG2W2HVB.js";
 
 // src/components/Checkbox.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-GKBQAEH5.js → chunk-FO7I4E45.js}

@@ -15,7 +15,8 @@ var allowedButtonTypographyTypes = [
 ];
 var buttonsThemeBase = {
   defaultSize: "Small",
-  defaultTypography: "Body Strong",
+  defaultTypographyType: "Body Strong",
+  defaultColor: "text",
   defaultBorderRadius: 32,
   defaultBorderWidth: 1,
   defaultBackgroundColor: "bg",
@@ -39,6 +40,7 @@ var buttonsThemeBase = {
 var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
   kinds: {
     primary: {
+      defaultColor: "bg",
       defaultBorderWidth: 0,
       defaultBackgroundColor: "c9Neutral",
       defaultBorderColor: "c9Neutral",
@@ -66,7 +68,20 @@ var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
       defaultHoverBorderColor: ["gray90", "gray20"]
     },
     blue39: {
-      defaultBorderColor: "blue39"
+      defaultBorderColor: "blue39",
+      defaultColor: "gray98"
+    },
+    blue43: {
+      defaultColor: "white"
+    },
+    green33: {
+      defaultColor: "white"
+    },
+    purple55: {
+      defaultColor: "white"
+    },
+    danger: {
+      defaultColor: "white"
     }
   }
 });