@lightsparkdev/ui 1.1.15 → 1.1.17

package/dist/{chunk-KJSFT7A2.js → chunk-DAIRX6CF.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-YW4BJCOL.js";
 import {
   applyTypography
-} from "./chunk-WDMRNPBD.js";
+} from "./chunk-I3KWQ42J.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-FV26RUHP.cjs → chunk-DBKXHGJD.cjs}

@@ -3,50 +3,50 @@
 var _chunkDCH43ZYZcjs = require('./chunk-DCH43ZYZ.cjs');
 
 
-var _chunkJJ43T5QXcjs = require('./chunk-JJ43T5QX.cjs');
+var _chunk77BSODBDcjs = require('./chunk-77BSODBD.cjs');
 
 
-var _chunkR2FXOHHQcjs = require('./chunk-R2FXOHHQ.cjs');
+var _chunkEUPMY6J3cjs = require('./chunk-EUPMY6J3.cjs');
 
 
-var _chunkFIBJPX3Ucjs = require('./chunk-FIBJPX3U.cjs');
+var _chunkR3FJMSPRcjs = require('./chunk-R3FJMSPR.cjs');
 
 
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
-var _chunkBCJWY2ZAcjs = require('./chunk-BCJWY2ZA.cjs');
 
 
-var _chunkPAG7VG4Ccjs = require('./chunk-PAG7VG4C.cjs');
+var _chunkGJ4EVX5Ncjs = require('./chunk-GJ4EVX5N.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkOIVMDDPCcjs = require('./chunk-OIVMDDPC.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkD3DCZG67cjs = require('./chunk-D3DCZG67.cjs');
+var _chunkCWO637N3cjs = require('./chunk-CWO637N3.cjs');
 
 
-var _chunkXC4APVGIcjs = require('./chunk-XC4APVGI.cjs');
+var _chunkS6OGIIJCcjs = require('./chunk-S6OGIIJC.cjs');
 
 
-var _chunkCF6NXTX7cjs = require('./chunk-CF6NXTX7.cjs');
+var _chunk2MT546OVcjs = require('./chunk-2MT546OV.cjs');
 
 
-var _chunkMLMYJBDVcjs = require('./chunk-MLMYJBDV.cjs');
+var _chunkDSTWBIG7cjs = require('./chunk-DSTWBIG7.cjs');
 
 
 
 
 
-var _chunkQ3N3HXJAcjs = require('./chunk-Q3N3HXJA.cjs');
+var _chunkGSQGDJAVcjs = require('./chunk-GSQGDJAV.cjs');
 
 
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
 
 
-var _chunkRONHCMPDcjs = require('./chunk-RONHCMPD.cjs');
+var _chunkWZIDVP2Ucjs = require('./chunk-WZIDVP2U.cjs');
 
 
 
@@ -224,10 +224,10 @@ function Modal({
   const buttonContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
       var _b = _a, { placement, text } = _b, rest = _chunkYM5JDZDQcjs.__objRest.call(void 0, _b, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBCJWY2ZAcjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGJ4EVX5Ncjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     }),
     displayCancelAbove && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkBCJWY2ZAcjs.Button,
+      _chunkGJ4EVX5Ncjs.Button,
       {
         disabled: cancelDisabled,
         onClick: onClickCancel,
@@ -235,7 +235,7 @@ function Modal({
       }
     ),
     (onSubmit || submitLink) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkBCJWY2ZAcjs.Button,
+      _chunkGJ4EVX5Ncjs.Button,
       {
         kind: "primary",
         disabled: submitDisabled,
@@ -251,7 +251,7 @@ function Modal({
       }
     ),
     displayCancelBelow && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkBCJWY2ZAcjs.Button,
+      _chunkGJ4EVX5Ncjs.Button,
       {
         disabled: cancelDisabled,
         onClick: onClickCancel,
@@ -260,7 +260,7 @@ function Modal({
     ),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
       var _d = _c, { placement, text } = _d, rest = _chunkYM5JDZDQcjs.__objRest.call(void 0, _d, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBCJWY2ZAcjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGJ4EVX5Ncjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     })
   ] });
   let titleContent = null;
@@ -270,10 +270,10 @@ function Modal({
       heading: "h4",
       size: "Small"
     };
-    const titleNodesWithTypography = _chunkD3DCZG67cjs.setDefaultReactNodesTypography.call(void 0, title, {
+    const titleNodesWithTypography = _chunkCWO637N3cjs.setDefaultReactNodesTypography.call(void 0, title, {
       default: defaultTypography
     });
-    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunkXC4APVGIcjs.toReactNodes.call(void 0, titleNodesWithTypography) });
+    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunkS6OGIIJCcjs.toReactNodes.call(void 0, titleNodesWithTypography) });
   }
   let descriptionContent = null;
   if (description) {
@@ -281,23 +281,23 @@ function Modal({
       type: "Body",
       size: "ExtraSmall"
     };
-    const descriptionNodesWithTypography = _chunkD3DCZG67cjs.setDefaultReactNodesTypography.call(void 0, 
+    const descriptionNodesWithTypography = _chunkCWO637N3cjs.setDefaultReactNodesTypography.call(void 0, 
       description,
       { default: defaultTypography }
     );
-    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunkXC4APVGIcjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
+    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunkS6OGIIJCcjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
   }
   let topContentNode = null;
   if (topContent) {
     if (_chunkDCH43ZYZcjs.isReactNode.call(void 0, topContent)) {
       topContentNode = topContent;
     } else {
-      topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR2FXOHHQcjs.IconWithCircleBackground, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, topContent)) });
+      topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEUPMY6J3cjs.IconWithCircleBackground, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, topContent)) });
     }
   }
   const modalContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     progressBar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkJJ43T5QXcjs.ProgressBar,
+      _chunk77BSODBDcjs.ProgressBar,
       {
         progressPercentage: progressBar.progressPercentage,
         isSm: progressBar.isSm
@@ -312,7 +312,7 @@ function Modal({
   let content;
   if (smKind === "drawer" && isSm) {
     content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkFIBJPX3Ucjs.Drawer,
+      _chunkR3FJMSPRcjs.Drawer,
       {
         onClose: () => onClickCloseButton(),
         closeButton: drawerCloseButton,
@@ -320,9 +320,9 @@ function Modal({
         handleBack,
         kind: drawerKind != null ? drawerKind : "default",
         padding: drawerPadding !== void 0 ? `${drawerPadding}px` : void 0,
-        top,
         alignBottom: drawerAlignBottom,
         disableTouchMove: drawerDisableTouchMove != null ? drawerDisableTouchMove : false,
+        top,
         children: modalContent
       }
     );
@@ -346,12 +346,12 @@ function Modal({
           },
           role: "dialog",
           ref: modalContainerRef,
-          top: top || (smKind === "default" ? _chunkQ3N3HXJAcjs.standardContentInset.smPx : 0),
+          top: top || (smKind === "default" ? _chunkGSQGDJAVcjs.standardContentInset.smPx : 0),
           children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalContent, { width, ghost, smKind, children: [
             !firstFocusRef && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
             !ghost && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalNavigation, { children: [
-              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMLMYJBDVcjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMLMYJBDVcjs.Icon, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, topLeftIcon)) : null,
-              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMLMYJBDVcjs.Icon, { name: "Close", width: 9 }) })
+              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDSTWBIG7cjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDSTWBIG7cjs.Icon, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, topLeftIcon)) : null,
+              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDSTWBIG7cjs.Icon, { name: "Close", width: 9 }) })
             ] }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContentInner, { ghost, children: modalContent }),
             bottomContent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "auto" }, children: bottomContent })
@@ -365,7 +365,7 @@ function Modal({
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = _styled2.default.call(void 0, _chunkPAG7VG4Ccjs.UnstyledButton)`
+var DefaultFocusTarget = _styled2.default.call(void 0, _chunkOIVMDDPCcjs.UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
@@ -377,8 +377,8 @@ var ModalOverlay = _styled2.default.div`
   left: 0;
   z-index: ${_chunkZU72XWNEcjs.z.modalOverlay};
   width: 100vw;
-  height: 100vh;
-  background: ${({ overlayBackground, theme }) => overlayBackground ? _chunkRONHCMPDcjs.getColor.call(void 0, theme, overlayBackground) : "rgba(0, 0, 0, 0.5)"};
+  height: 100dvh;
+  background: ${({ overlayBackground, theme }) => overlayBackground ? _chunkWZIDVP2Ucjs.getColor.call(void 0, theme, overlayBackground) : "rgba(0, 0, 0, 0.5)"};
 `;
 var ModalContainer = _styled2.default.div`
   pointer-events: none;
@@ -413,7 +413,7 @@ var ModalButtonRow = _styled2.default.div`
   `)}
   gap: 10px;
 
-  ${_chunkBCJWY2ZAcjs.ButtonSelector.call(void 0, )} {
+  ${_chunkGJ4EVX5Ncjs.ButtonSelector.call(void 0, )} {
     width: 50%;
     ${_chunkKW3JYLRIcjs.bp.sm(`
       width: 100%;
@@ -425,7 +425,7 @@ var ModalButtonColumn = _styled2.default.div`
   flex-direction: column;
   gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
 
-  ${_chunkBCJWY2ZAcjs.ButtonSelector.call(void 0, )} {
+  ${_chunkGJ4EVX5Ncjs.ButtonSelector.call(void 0, )} {
     width: 100%;
   }
 
@@ -441,10 +441,10 @@ var ModalContent = _styled2.default.div`
   pointer-events: auto;
   transition: width 0.25s ease-in;
 
-  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkQ3N3HXJAcjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
+  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkGSQGDJAVcjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
 
-  ${_chunkCF6NXTX7cjs.overflowAutoWithoutScrollbars}
-  ${_chunkQ3N3HXJAcjs.standardContentInset.smCSS.styles}
+  ${_chunk2MT546OVcjs.overflowAutoWithoutScrollbars}
+  ${_chunkGSQGDJAVcjs.standardContentInset.smCSS.styles}
   max-width: 100%;
   max-height: 100%;
   position: absolute;
@@ -452,7 +452,7 @@ var ModalContent = _styled2.default.div`
   flex-direction: column;
 
   ${({ ghost, smKind, width }) => `
-    ${ghost ? "" : _chunkQ3N3HXJAcjs.standardBorderRadius.call(void 0, 16)}
+    ${ghost ? "" : _chunkGSQGDJAVcjs.standardBorderRadius.call(void 0, 16)}
     width: ${width}px;
   `}
 
@@ -469,14 +469,14 @@ var ModalNavigation = _styled2.default.div`
   grid-auto-flow: column;
   width: 100%;
 `;
-var BackButton = _styled2.default.call(void 0, _chunkPAG7VG4Ccjs.UnstyledButton)`
-  ${_chunkQ3N3HXJAcjs.standardFocusOutline}
+var BackButton = _styled2.default.call(void 0, _chunkOIVMDDPCcjs.UnstyledButton)`
+  ${_chunkGSQGDJAVcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-start;
 `;
-var CloseButton = _styled2.default.call(void 0, _chunkPAG7VG4Ccjs.UnstyledButton)`
-  ${_chunkQ3N3HXJAcjs.standardFocusOutline}
+var CloseButton = _styled2.default.call(void 0, _chunkOIVMDDPCcjs.UnstyledButton)`
+  ${_chunkGSQGDJAVcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-end;

package/dist/{chunk-PT6V3EKA.js → chunk-DGR27Y2A.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-6FPEWTKF.js";
+} from "./chunk-2C4XFGJH.js";
 import {
   StyledOverline,
   getPropDefaults
-} from "./chunk-3PYLKB4C.js";
+} from "./chunk-QGZXH6TR.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-57DDNCLC.cjs → chunk-DGYYYJWB.cjs}

@@ -1,18 +1,18 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkJGWE5RBUcjs = require('./chunk-JGWE5RBU.cjs');
+var _chunkSVUKJUSHcjs = require('./chunk-SVUKJUSH.cjs');
 
 
-var _chunkCF6NXTX7cjs = require('./chunk-CF6NXTX7.cjs');
+var _chunk2MT546OVcjs = require('./chunk-2MT546OV.cjs');
 
 
-var _chunkQ3N3HXJAcjs = require('./chunk-Q3N3HXJA.cjs');
+var _chunkGSQGDJAVcjs = require('./chunk-GSQGDJAV.cjs');
 
 
-var _chunkRONHCMPDcjs = require('./chunk-RONHCMPD.cjs');
+var _chunkWZIDVP2Ucjs = require('./chunk-WZIDVP2U.cjs');
 
 
-var _chunkJFPLNGMQcjs = require('./chunk-JFPLNGMQ.cjs');
+var _chunkWRQU4F3Ncjs = require('./chunk-WRQU4F3N.cjs');
 
 
 
@@ -55,7 +55,7 @@ var backgroundColor = "#2d2d2d";
 var InlineCode = _styled2.default.span`
   font-family: "Roboto Mono", monospace;
   background-color: #2d2d2d;
-  border: 1px solid ${_chunkRONHCMPDcjs.themeOr.call(void 0, _chunkJFPLNGMQcjs.colors.gray90, _chunkJFPLNGMQcjs.colors.gray20)};
+  border: 1px solid ${_chunkWZIDVP2Ucjs.themeOr.call(void 0, _chunkWRQU4F3Ncjs.colors.gray90, _chunkWRQU4F3Ncjs.colors.gray20)};
   border-radius: 3px;
   line-height: 24px;
   padding: 0 4px;
@@ -99,9 +99,9 @@ var codeSelectStyles = {
   }),
   option: (styles, state) => _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, styles), {
     cursor: "pointer",
-    backgroundColor: state.isSelected ? _chunkJFPLNGMQcjs.colors.gray25 : backgroundColor,
+    backgroundColor: state.isSelected ? _chunkWRQU4F3Ncjs.colors.gray25 : backgroundColor,
     "&:hover": {
-      backgroundColor: _chunkJFPLNGMQcjs.colors.gray25
+      backgroundColor: _chunkWRQU4F3Ncjs.colors.gray25
     }
   }),
   singleValue: (styles) => _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, styles), {
@@ -152,7 +152,7 @@ var CodeBlock = ({
               styles: codeSelectStyles
             }
           ) }) : null,
-          withCopyButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJGWE5RBUcjs.CopyToClipboardButton, { value: children }) : null
+          withCopyButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSVUKJUSHcjs.CopyToClipboardButton, { value: children }) : null
         ]
       }
     )
@@ -166,7 +166,7 @@ var StyledCodeBlock = _styled2.default.div``;
 var CodeBlockHeader = _styled2.default.div`
   align-items: center;
   background-color: #2d2d2d;
-  border-bottom: 1px solid ${_chunkJFPLNGMQcjs.colors.gray25};
+  border-bottom: 1px solid ${_chunkWRQU4F3Ncjs.colors.gray25};
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   color: #ffffff;
@@ -176,11 +176,11 @@ var CodeBlockHeader = _styled2.default.div`
   padding: 16px 20px;
 `;
 var CodeBlockContainer = _styled2.default.pre`
-  ${_chunkCF6NXTX7cjs.overflowAutoWithoutScrollbars}
+  ${_chunk2MT546OVcjs.overflowAutoWithoutScrollbars}
   &[class*="language-"] {
     padding: 20px;
     font-weight: 500;
-    ${_chunkQ3N3HXJAcjs.standardBorderRadius.call(void 0, 8)}
+    ${_chunkGSQGDJAVcjs.standardBorderRadius.call(void 0, 8)}
     ${(props) => props.hasHeader ? `border-top-left-radius: 0;
             border-top-right-radius: 0;
             margin-top: 0;` : ""}

package/dist/{chunk-43UWBE5K.cjs → chunk-DKSYVSJY.cjs}

@@ -6,7 +6,7 @@ var _chunkU6XO2EF4cjs = require('./chunk-U6XO2EF4.cjs');
 var _chunkB2MHM6CYcjs = require('./chunk-B2MHM6CY.cjs');
 
 
-var _chunkFB4N2YNLcjs = require('./chunk-FB4N2YNL.cjs');
+var _chunkEFUO4VCAcjs = require('./chunk-EFUO4VCA.cjs');
 
 
 
@@ -24,7 +24,7 @@ function getPropDefaults(props) {
   return _chunkU6XO2EF4cjs.getPropDefaultsBase.call(void 0, props, { as: props.tag || "span" });
 }
 var StyledBtn = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkFB4N2YNLcjs.applyTypography.call(void 0, theme, "Btn", size, colorProp)}
+  ${({ theme, size, colorProp }) => _chunkEFUO4VCAcjs.applyTypography.call(void 0, theme, "Btn", size, colorProp)}
   ${_chunkB2MHM6CYcjs.typographyStyles}
 `;
 

package/dist/{chunk-TNJJ2ANO.cjs → chunk-DLJDS3PP.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 
-var _chunkCF6NXTX7cjs = require('./chunk-CF6NXTX7.cjs');
+var _chunk2MT546OVcjs = require('./chunk-2MT546OV.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
@@ -68,46 +68,46 @@ var baseHeading = ({ mt, mb, mtSm, mbSm, theme }) => _react.css`
     margin-bottom: ${mbSm}px;
   `)}
 `;
-var firstChildStyles = _chunkCF6NXTX7cjs.firstChild.call(void 0, `margin-top: 0;`);
+var firstChildStyles = _chunk2MT546OVcjs.firstChild.call(void 0, `margin-top: 0;`);
 var headings = {
   h1: _styled2.default.h1`
     ${(props) => baseHeading(props)}
     ${firstChildStyles}
 
-    font-size: ${_chunkCF6NXTX7cjs.pxToRems.call(void 0, defaultHeadingSizes.h1.size)};
+    font-size: ${_chunk2MT546OVcjs.pxToRems.call(void 0, defaultHeadingSizes.h1.size)};
     font-weight: ${({ light }) => light ? 400 : 800}};
     ${_chunkKW3JYLRIcjs.bp.sm(`
-      font-size: ${_chunkCF6NXTX7cjs.pxToRems.call(void 0, defaultHeadingSizes.h1.sizeSm)};
+      font-size: ${_chunk2MT546OVcjs.pxToRems.call(void 0, defaultHeadingSizes.h1.sizeSm)};
     `)}
   `,
   h2: _styled2.default.h2`
     ${(props) => baseHeading(props)}
     ${firstChildStyles}
 
-    font-size: ${_chunkCF6NXTX7cjs.pxToRems.call(void 0, defaultHeadingSizes.h2.size)};
+    font-size: ${_chunk2MT546OVcjs.pxToRems.call(void 0, defaultHeadingSizes.h2.size)};
     font-weight: ${({ light }) => light ? 400 : 700}};
     ${_chunkKW3JYLRIcjs.bp.sm(`
-      font-size: ${_chunkCF6NXTX7cjs.pxToRems.call(void 0, defaultHeadingSizes.h2.sizeSm)};
+      font-size: ${_chunk2MT546OVcjs.pxToRems.call(void 0, defaultHeadingSizes.h2.sizeSm)};
     `)}
   `,
   h3: _styled2.default.h3`
     ${(props) => baseHeading(props)}
     ${firstChildStyles}
 
-    font-size: ${_chunkCF6NXTX7cjs.pxToRems.call(void 0, defaultHeadingSizes.h3.size)};
+    font-size: ${_chunk2MT546OVcjs.pxToRems.call(void 0, defaultHeadingSizes.h3.size)};
     font-weight: ${({ light }) => light ? 400 : 700}};
     ${_chunkKW3JYLRIcjs.bp.sm(`
-      font-size: ${_chunkCF6NXTX7cjs.pxToRems.call(void 0, defaultHeadingSizes.h3.sizeSm)};
+      font-size: ${_chunk2MT546OVcjs.pxToRems.call(void 0, defaultHeadingSizes.h3.sizeSm)};
     `)}
   `,
   h4: _styled2.default.h4`
     ${(props) => baseHeading(props)}
     ${firstChildStyles}
 
-    font-size: ${_chunkCF6NXTX7cjs.pxToRems.call(void 0, defaultHeadingSizes.h4.size)};
+    font-size: ${_chunk2MT546OVcjs.pxToRems.call(void 0, defaultHeadingSizes.h4.size)};
     font-weight: ${({ light }) => light ? 400 : 600}};
     ${_chunkKW3JYLRIcjs.bp.sm(`
-      font-size: ${_chunkCF6NXTX7cjs.pxToRems.call(void 0, defaultHeadingSizes.h4.sizeSm)};
+      font-size: ${_chunk2MT546OVcjs.pxToRems.call(void 0, defaultHeadingSizes.h4.sizeSm)};
     `)}
   `
 };

package/dist/{chunk-6S7FGO3F.cjs → chunk-DRDB2LSV.cjs}

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk2J6Q4CBWcjs = require('./chunk-2J6Q4CBW.cjs');
+var _chunkNJAEPGD6cjs = require('./chunk-NJAEPGD6.cjs');
 
 
 
-var _chunkLA7TPJI3cjs = require('./chunk-LA7TPJI3.cjs');
+var _chunkWDTLFMRWcjs = require('./chunk-WDTLFMRW.cjs');
 
 
-var _chunkMLMYJBDVcjs = require('./chunk-MLMYJBDV.cjs');
+var _chunkDSTWBIG7cjs = require('./chunk-DSTWBIG7.cjs');
 
 // src/components/FileInput.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -59,7 +59,7 @@ function FileInput({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledFileInputContainer, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledFileInput, { hasValidFileSet: Boolean(fileName && fileContent), children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: name, children: fileName && fileContent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2J6Q4CBWcjs.Pill,
+        _chunkNJAEPGD6cjs.Pill,
         {
           text: fileName,
           cursor: "pointer",
@@ -67,7 +67,7 @@ function FileInput({
           onDeleteFromKeyboard: handleRemoveFile
         }
       ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMLMYJBDVcjs.Icon, { name: "Upload", width: 26, tutorialStep: 6 }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDSTWBIG7cjs.Icon, { name: "Upload", width: 26, tutorialStep: 6 }),
         "Upload ",
         filePurpose || "",
         " file"
@@ -82,7 +82,7 @@ function FileInput({
         }
       )
     ] }),
-    fileErrorMsg ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLA7TPJI3cjs.InputSubtext, { text: fileErrorMsg, hasError: true }) : null
+    fileErrorMsg ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDTLFMRWcjs.InputSubtext, { text: fileErrorMsg, hasError: true }) : null
   ] });
 }
 var StyledFileInputContainer = _styled2.default.div``;
@@ -94,7 +94,7 @@ var StyledFileInput = _styled2.default.div`
   label {
     display: block;
     cursor: pointer;
-    ${({ theme, hasValidFileSet }) => _chunkLA7TPJI3cjs.inputBlockStyle.call(void 0, { theme, hasValue: hasValidFileSet, hasError: false })}
+    ${({ theme, hasValidFileSet }) => _chunkWDTLFMRWcjs.inputBlockStyle.call(void 0, { theme, hasValue: hasValidFileSet, hasError: false })}
   }
 `;
 

package/dist/{chunk-MLMYJBDV.cjs → chunk-DSTWBIG7.cjs}

@@ -1,19 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkN4YROJKRcjs = require('./chunk-N4YROJKR.cjs');
+var _chunk5OIBCVEDcjs = require('./chunk-5OIBCVED.cjs');
 
 
 
 var _chunkKS6GHRZIcjs = require('./chunk-KS6GHRZI.cjs');
 
 
-var _chunkQ3N3HXJAcjs = require('./chunk-Q3N3HXJA.cjs');
+var _chunkGSQGDJAVcjs = require('./chunk-GSQGDJAV.cjs');
 
 
 var _chunkJA7KZV3Qcjs = require('./chunk-JA7KZV3Q.cjs');
 
 
-var _chunkRONHCMPDcjs = require('./chunk-RONHCMPD.cjs');
+var _chunkWZIDVP2Ucjs = require('./chunk-WZIDVP2U.cjs');
 
 // src/components/Icon/Icon.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -34,14 +34,14 @@ function Icon({
   verticalAlign = "middle",
   iconProps
 }) {
-  const IconComponent = _chunkN4YROJKRcjs.iconMap[name];
-  const w = parseFloat((width / _chunkQ3N3HXJAcjs.rootFontSizePx).toFixed(2));
+  const IconComponent = _chunk5OIBCVEDcjs.iconMap[name];
+  const w = parseFloat((width / _chunkGSQGDJAVcjs.rootFontSizePx).toFixed(2));
   const h = square ? w : "auto";
-  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / _chunkQ3N3HXJAcjs.rootFontSizePx).toFixed(2))}em` : mrProp;
-  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / _chunkQ3N3HXJAcjs.rootFontSizePx).toFixed(2))}em` : mlProp;
-  const mt = typeof mtProp === "number" ? `${parseFloat((mtProp / _chunkQ3N3HXJAcjs.rootFontSizePx).toFixed(2))}em` : mtProp;
-  const mb = typeof mbProp === "number" ? `${parseFloat((mbProp / _chunkQ3N3HXJAcjs.rootFontSizePx).toFixed(2))}em` : mbProp;
-  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / _chunkQ3N3HXJAcjs.rootFontSizePx).toFixed(2));
+  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / _chunkGSQGDJAVcjs.rootFontSizePx).toFixed(2))}em` : mrProp;
+  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / _chunkGSQGDJAVcjs.rootFontSizePx).toFixed(2))}em` : mlProp;
+  const mt = typeof mtProp === "number" ? `${parseFloat((mtProp / _chunkGSQGDJAVcjs.rootFontSizePx).toFixed(2))}em` : mtProp;
+  const mb = typeof mbProp === "number" ? `${parseFloat((mbProp / _chunkGSQGDJAVcjs.rootFontSizePx).toFixed(2))}em` : mbProp;
+  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / _chunkGSQGDJAVcjs.rootFontSizePx).toFixed(2));
   const icon = _react2.default.createElement(IconComponent, iconProps, null);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     IconContainer,
@@ -90,10 +90,10 @@ var IconContainer = _styled2.default.span`
 }}
 
   ${({ theme, fontColor }) => {
-  const color = _chunkRONHCMPDcjs.getFontColor.call(void 0, theme, fontColor, "inherit");
+  const color = _chunkWZIDVP2Ucjs.getFontColor.call(void 0, theme, fontColor, "inherit");
   return `
     svg, path {
-      color: ${_chunkRONHCMPDcjs.getFontColor.call(void 0, theme, fontColor, "inherit")};
+      color: ${_chunkWZIDVP2Ucjs.getFontColor.call(void 0, theme, fontColor, "inherit")};
 
       /* 
         Provide a way for an SVG to invert relative to a specified color for

package/dist/{chunk-KGEROTNP.cjs → chunk-DWRMNIVS.cjs}

@@ -1,9 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk7CWLRTWNcjs = require('./chunk-7CWLRTWN.cjs');
+var _chunkUWFTZSSBcjs = require('./chunk-UWFTZSSB.cjs');
 
 
-var _chunkLA7TPJI3cjs = require('./chunk-LA7TPJI3.cjs');
+var _chunkWDTLFMRWcjs = require('./chunk-WDTLFMRW.cjs');
+
+
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
 
@@ -34,7 +37,8 @@ function CodeInput({
   onSubmit,
   inputCSS,
   autoFocus = true,
-  onBlur
+  onBlur,
+  variant = "default"
 }) {
   const componentId = _react.useRef.call(void 0, _nanoid.nanoid.call(void 0, 5));
   const inputRefs = _react.useRef.call(void 0, {});
@@ -236,12 +240,26 @@ function CodeInput({
     }, 0);
   }, [onBlur]);
   const inputsPerGroup = Math.ceil(codeLength / 2);
+  const onContainerMouseDown = _react.useCallback.call(void 0, 
+    (event) => {
+      var _a, _b;
+      const target = event.target;
+      const isClickingFilledInput = target.tagName === "INPUT" && ((_a = inputState[target.id]) == null ? void 0 : _a.value) !== "";
+      if (!isClickingFilledInput) {
+        event.preventDefault();
+        const firstEmptyIndex = codeFromInputState(inputState).length;
+        const targetIndex = firstEmptyIndex < codeLength ? firstEmptyIndex : codeLength - 1;
+        (_b = getRef(getInputId(targetIndex), inputRefs)) == null ? void 0 : _b.focus();
+      }
+    },
+    [codeLength, getInputId, inputState, inputRefs]
+  );
   const inputs = [];
   for (let i = 0; i < codeLength; i += 1) {
     const inputId = getInputId(i);
     inputs.push(
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk7CWLRTWNcjs.SingleCodeInput,
+        _chunkUWFTZSSBcjs.SingleCodeInput,
         {
           value: inputState[inputId].value,
           id: inputId,
@@ -283,13 +301,17 @@ function CodeInput({
           ariaLabel: `Code input ${i + 1} of ${codeLength}`,
           cssProp: inputCSS,
           onBlur: onBlurCb,
-          width: `${(100 / inputsPerGroup).toFixed(2)}%`,
-          max: 9
+          width: variant === "unified" ? "12px" : `${(100 / inputsPerGroup).toFixed(2)}%`,
+          max: 9,
+          variant
         },
         inputId
       )
     );
   }
+  if (variant === "unified") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedCodeInputContainer, { onMouseDown: onContainerMouseDown, children: inputs });
+  }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCodeInput, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeInputGroup, { children: inputs.slice(0, inputsPerGroup) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeInputGroupSeparator, {}),
@@ -316,10 +338,26 @@ var CodeInputGroup = _styled2.default.div`
 var CodeInputGroupSeparator = _styled2.default.div`
   width: ${separatorWidth}px;
   height: 4px;
-  background-color: ${_chunkLA7TPJI3cjs.textInputBorderColor};
+  background-color: ${_chunkWDTLFMRWcjs.textInputBorderColor};
   border-radius: 2px;
   margin: 0 ${separatorMargin}px;
 `;
+var UnifiedCodeInputContainer = _styled2.default.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+  padding: 12px 24px;
+  border: 0.5px solid ${({ theme }) => theme.border};
+  border-radius: 16px;
+  background-color: ${({ theme }) => theme.bg};
+  width: 100%;
+
+  &:focus-within {
+    border: 2px solid ${({ theme }) => theme.text};
+  }
+`;