@lightsparkdev/ui 1.1.3 → 1.1.4

package/dist/{chunk-HRA7IU4J.cjs → chunk-KX6RGOW5.cjs}

@@ -1,77 +1,74 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkGQGF4LNPcjs = require('./chunk-GQGF4LNP.cjs');
+var _chunkWEJCM37Ecjs = require('./chunk-WEJCM37E.cjs');
 
 
-var _chunkWN65QM5Wcjs = require('./chunk-WN65QM5W.cjs');
+var _chunkKQRGFTDHcjs = require('./chunk-KQRGFTDH.cjs');
 
 
-var _chunk6GF56M42cjs = require('./chunk-6GF56M42.cjs');
+var _chunkT336CT3Zcjs = require('./chunk-T336CT3Z.cjs');
 
 
-var _chunkSH52BJQTcjs = require('./chunk-SH52BJQT.cjs');
+var _chunk4VKLKRK6cjs = require('./chunk-4VKLKRK6.cjs');
 
 
-var _chunkP3TDMHFScjs = require('./chunk-P3TDMHFS.cjs');
+var _chunkGKMKVMMHcjs = require('./chunk-GKMKVMMH.cjs');
 
 
 
-var _chunkO3NYVYX5cjs = require('./chunk-O3NYVYX5.cjs');
+var _chunkZQO2GKVScjs = require('./chunk-ZQO2GKVS.cjs');
 
 
-var _chunk2YBZV2K6cjs = require('./chunk-2YBZV2K6.cjs');
+var _chunkFC2E3OGRcjs = require('./chunk-FC2E3OGR.cjs');
 
 
-var _chunkT4UBZ7NBcjs = require('./chunk-T4UBZ7NB.cjs');
+var _chunkKGBWMBLAcjs = require('./chunk-KGBWMBLA.cjs');
 
 
-var _chunkFCBVJB3Ycjs = require('./chunk-FCBVJB3Y.cjs');
+var _chunkH2PJDRPTcjs = require('./chunk-H2PJDRPT.cjs');
 
 
-var _chunkK57M5KQ5cjs = require('./chunk-K57M5KQ5.cjs');
+var _chunkQCB45DLMcjs = require('./chunk-QCB45DLM.cjs');
 
 
-var _chunkCH2PLO6Fcjs = require('./chunk-CH2PLO6F.cjs');
-
-
-var _chunkD2W2ROKQcjs = require('./chunk-D2W2ROKQ.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunk734KB425cjs = require('./chunk-734KB425.cjs');
+var _chunk6FKIZCM5cjs = require('./chunk-6FKIZCM5.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+var _chunk6IBADE46cjs = require('./chunk-6IBADE46.cjs');
 
 
-var _chunkWX5R7NU7cjs = require('./chunk-WX5R7NU7.cjs');
+var _chunkCH2PLO6Fcjs = require('./chunk-CH2PLO6F.cjs');
 
 
-var _chunkCZJ6JPXBcjs = require('./chunk-CZJ6JPXB.cjs');
+var _chunkZZUD43JKcjs = require('./chunk-ZZUD43JK.cjs');
 
 
-var _chunk5VSTXVUIcjs = require('./chunk-5VSTXVUI.cjs');
+var _chunkW4UIZ5DJcjs = require('./chunk-W4UIZ5DJ.cjs');
 
 
 
 
 
 
-var _chunk545K27C4cjs = require('./chunk-545K27C4.cjs');
+var _chunkMODD4YGEcjs = require('./chunk-MODD4YGE.cjs');
 
 
-var _chunkT3LKI5VGcjs = require('./chunk-T3LKI5VG.cjs');
+var _chunk7KHYVDQ6cjs = require('./chunk-7KHYVDQ6.cjs');
 
 
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
 
 
-var _chunkEGKT7YHPcjs = require('./chunk-EGKT7YHP.cjs');
+var _chunkFFXUPRYTcjs = require('./chunk-FFXUPRYT.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
-var _chunkDRTADBFRcjs = require('./chunk-DRTADBFR.cjs');
+var _chunkIJMYMSSCcjs = require('./chunk-IJMYMSSC.cjs');
 
 
 
@@ -193,6 +190,7 @@ function CardForm({
   forceMarginAfterSubtitle = true,
   afterTitleMargin = 40,
   graphicHeader,
+  statusHeaderProps,
   centeredContent = false,
   contentMarginTop,
   formButtonTopMargin,
@@ -236,12 +234,12 @@ function CardForm({
     },
     [onSubmit, disabled]
   );
-  const formattedDescription = description ? _chunkFCBVJB3Ycjs.toReactNodesWithTypographyMap.call(void 0, 
+  const formattedDescription = description ? _chunk6FKIZCM5cjs.toReactNodesWithTypographyMap.call(void 0, 
     description,
     defaultDescriptionTypographyMap,
     false
   ) : null;
-  const belowFormContentNodes = belowFormContent ? _chunkK57M5KQ5cjs.toReactNodes.call(void 0, belowFormContent) : null;
+  const belowFormContentNodes = belowFormContent ? _chunk6IBADE46cjs.toReactNodes.call(void 0, belowFormContent) : null;
   const CardFormContentTarget = full ? CardFormContentFull : CardFormContent;
   const headerData = [
     aboveHeaderContent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.Fragment, { children: aboveHeaderContent }, "card-form-above-header") : null,
@@ -253,7 +251,7 @@ function CardForm({
         contentMarginTop,
         titleMarginLeft,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkGQGF4LNPcjs.Headline,
+          _chunkWEJCM37Ecjs.Headline,
           {
             content: [
               title,
@@ -290,8 +288,21 @@ function CardForm({
     smDontAdjustWidth
   };
   const Container = full ? CardFormContentFull : CardFormContainer;
+  const statusHeader = _react3.useMemo.call(void 0, 
+    () => statusHeaderProps ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StatusHeader, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, statusHeaderProps)) : null,
+    [statusHeaderProps]
+  );
+  _react3.useEffect.call(void 0, () => {
+    var _a;
+    (_a = document.querySelector("meta[name='theme-color']")) == null ? void 0 : _a.setAttribute("content", statusHeader ? theme.linkLight : theme.bg);
+    return () => {
+      var _a2;
+      (_a2 = document.querySelector("meta[name='theme-color']")) == null ? void 0 : _a2.setAttribute("content", theme.bg);
+    };
+  }, [statusHeader, theme.linkLight, theme.bg]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Container, { paddingBottom, children: [
-    hasChildForm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDiv, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonProps), { children: content })) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk2YBZV2K6cjs.Flex, { column: true, align: "center", height: full ? "100%" : "auto", children: [
+    hasChildForm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDiv, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonProps), { children: content })) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCardFormContainer, { full, statusHeader: !!statusHeader, children: [
+      statusHeader,
       graphicHeader && graphicHeader,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         StyledCardForm,
@@ -300,7 +311,8 @@ function CardForm({
           noValidate: true
         }, commonProps), {
           forceMarginAfterSubtitle,
-          graphicHeader: graphicHeader ? true : false,
+          graphicHeader: !!graphicHeader,
+          statusHeader: !!statusHeader,
           formButtonTopMargin,
           selectMarginTop,
           children: content
@@ -310,6 +322,38 @@ function CardForm({
     belowFormContentNodes && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BelowCardFormContent, { gap: belowFormContentGap, children: belowFormContentNodes })
   ] });
 }
+var StatusHeader = ({ content, onClick }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StatusHeaderContainer, { onClick, children: _chunk6IBADE46cjs.toReactNodes.call(void 0, content) });
+};
+var StatusHeaderContainer = _styled2.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ onClick }) => onClick ? "pointer" : "default"};
+  gap: 2px;
+  width: 100%;
+  min-height: 49px;
+  background-color: ${({ theme }) => theme.linkLight};
+  padding: ${_chunkZUAO4DW3cjs.Spacing.px.xs} ${_chunkZUAO4DW3cjs.Spacing.px.lg};
+
+  ${_chunkKW3JYLRIcjs.bp.minSm(`
+    margin-bottom: ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+    width: fit-content;
+    border-radius: 32px;
+  `)}
+`;
+var StyledCardFormContainer = _styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: ${({ full }) => full ? "100%" : "auto"};
+  background-color: ${({ statusHeader, theme }) => statusHeader ? theme.linkLight : theme.bg};
+  ${_chunkKW3JYLRIcjs.bp.minSm(`
+    background-color: #F9F9F9;
+  `)}
+`;
 var CenteredHeader = _styled2.default.div`
   display: flex;
   flex-direction: column;
@@ -352,7 +396,7 @@ var CardFormButtonRow = _styled2.default.div`
   justify === "center" ? "center" : "left"
 )};
   margin-top: 32px;
-  ${_chunkCZJ6JPXBcjs.ButtonSelector.call(void 0, "* + ")} {
+  ${_chunkKGBWMBLAcjs.ButtonSelector.call(void 0, "* + ")} {
     margin-left: 10px;
   }
 
@@ -363,9 +407,9 @@ var CardFormButtonRow = _styled2.default.div`
 var fieldLabelMarginPx = 12;
 var CardFormFieldLabel = _styled2.default.label`
   display: block;
-  margin-top: ${_chunkO3NYVYX5cjs.inputSpacingPx}px;
+  margin-top: ${_chunkZQO2GKVScjs.inputSpacingPx}px;
   color: ${({ theme }) => theme.text};
-  font-size: ${_chunkWX5R7NU7cjs.pxToRems.call(void 0, 14)};
+  font-size: ${_chunkW4UIZ5DJcjs.pxToRems.call(void 0, 14)};
   font-weight: 700;
   & + * {
     margin-top: ${fieldLabelMarginPx}px;
@@ -378,7 +422,7 @@ var CardFormNearButtonColumn = _styled2.default.div`
   gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
 `;
 function CardFormDataFieldValue({ text }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDataFieldValue, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD2W2ROKQcjs.ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDataFieldValue, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZZUD43JKcjs.ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
 }
 var StyledCardFormDataFieldValue = _styled2.default.div`
   margin-top: 4px;
@@ -419,16 +463,18 @@ var formInset = ({
     padding: ${graphicHeader ? "24px" : "0"};
   `)}
 
-  ${graphicHeader || smDontAdjustWidth ? `width: 100%;` : _chunk545K27C4cjs.standardContentInset.smCSS}
+  ${graphicHeader || smDontAdjustWidth ? `width: 100%;` : _chunkMODD4YGEcjs.standardContentInset.smCSS}
 
   & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
     ${smDontAdjustWidth ? "" : _chunkKW3JYLRIcjs.bp.sm(`
-      width: calc(100% + ${_chunk545K27C4cjs.standardContentInset.smPx * 2}px);
-      margin-left: -${_chunk545K27C4cjs.standardContentInset.smPx}px;
+      padding-right: ${_chunkMODD4YGEcjs.standardContentInset.smPx}px;
+      padding-left: ${_chunkMODD4YGEcjs.standardContentInset.smPx}px;
+      margin-left: -${_chunkMODD4YGEcjs.standardContentInset.smPx}px;
     `)}
 
     ${smDontAdjustWidth ? "" : _chunkKW3JYLRIcjs.bp.minSm(`
-      width: calc(100% + ${paddingX * 2}px);
+      padding-right: ${paddingX}px;
+      padding-left: ${paddingX}px;
       margin-left: -${paddingX}px;
     `)}
   }
@@ -455,8 +501,9 @@ var StyledCardFormStyle = ({
   smBorderWidth,
   forceMarginAfterSubtitle = true,
   graphicHeader,
+  statusHeader,
   formButtonTopMargin = 32,
-  selectMarginTop = _chunkO3NYVYX5cjs.inputSpacingPx,
+  selectMarginTop = _chunkZQO2GKVScjs.inputSpacingPx,
   smDontAdjustWidth = false
 }) => {
   return _react.css`
@@ -475,19 +522,21 @@ var StyledCardFormStyle = ({
     smDontAdjustWidth
   })}
 
-    ${shadow === "soft" ? _chunk545K27C4cjs.standardCardShadow : shadow === "hard" ? _chunk545K27C4cjs.standardCardShadowHard : ""}
+    ${shadow === "soft" ? _chunkMODD4YGEcjs.standardCardShadow : shadow === "hard" ? _chunkMODD4YGEcjs.standardCardShadowHard : ""}
 
     position: relative;
     height: 100%;
     border-style: solid;
     border-width: ${borderWidth}px;
-    border-color: ${_chunkEGKT7YHPcjs.getColor.call(void 0, theme, borderColor)};
-    background-color: ${_chunkEGKT7YHPcjs.getColor.call(void 0, theme, backgroundColor)};
+    border-color: ${_chunkFFXUPRYTcjs.getColor.call(void 0, theme, borderColor)};
+    background-color: ${_chunkFFXUPRYTcjs.getColor.call(void 0, theme, backgroundColor)};
 
     ${_chunkKW3JYLRIcjs.bp.sm(`
       box-shadow: none;
-      background-color: ${_chunkEGKT7YHPcjs.getColor.call(void 0, theme, smBackgroundColor)};
+      background-color: ${_chunkFFXUPRYTcjs.getColor.call(void 0, theme, smBackgroundColor)};
       border-width: ${smBorderWidth}px;
+      border-radius: ${statusHeader ? `${borderRadius}px ${borderRadius}px 0 0` : 0};
+      ${statusHeader ? `box-shadow: 0 -0.5px 0 0px ${_chunkFFXUPRYTcjs.getColor.call(void 0, theme, borderColor)};` : ""}
     `)}
 
     ${_chunkKW3JYLRIcjs.bp.minSm(`
@@ -502,40 +551,40 @@ var StyledCardFormStyle = ({
       margin-top: 40px !important;
     }` : ""}
 
-    ${CardFormButtonRow}, ${_chunk734KB425cjs.StyledButtonRowButton} {
-      ${_chunkCZJ6JPXBcjs.ButtonSelector.call(void 0, )} {
+    ${CardFormButtonRow}, ${_chunkFC2E3OGRcjs.StyledButtonRowButton} {
+      ${_chunkKGBWMBLAcjs.ButtonSelector.call(void 0, )} {
         margin-top: 0;
       }
     }
 
-    ${_chunkWN65QM5Wcjs.StyledSelect}, ${_chunkSH52BJQTcjs.ToggleContainer} {
+    ${_chunkKQRGFTDHcjs.StyledSelect}, ${_chunk4VKLKRK6cjs.ToggleContainer} {
       margin-top: ${selectMarginTop}px;
     }
 
     ${CardFormFieldLabel} {
-      margin-top: ${_chunkO3NYVYX5cjs.inputSpacingPx}px;
+      margin-top: ${_chunkZQO2GKVScjs.inputSpacingPx}px;
 
-      & + ${_chunkWN65QM5Wcjs.StyledSelect} {
+      & + ${_chunkKQRGFTDHcjs.StyledSelect} {
         margin-top: ${fieldLabelMarginPx}px;
       }
     }
 
-    ${_chunk6GF56M42cjs.TextInputHalfRow} > ${_chunkWN65QM5Wcjs.StyledSelect} {
+    ${_chunkT336CT3Zcjs.TextInputHalfRow} > ${_chunkKQRGFTDHcjs.StyledSelect} {
       margin-top: 0;
     }
 
-    ${_chunk5VSTXVUIcjs.LoadingWrapper} {
+    ${_chunkH2PJDRPTcjs.LoadingWrapper} {
       margin: 32px 0;
       * + * {
         margin-top: 0;
       }
     }
 
-    ${_chunkCZJ6JPXBcjs.ButtonSelector.call(void 0, )} ${_chunk5VSTXVUIcjs.LoadingWrapper} {
+    ${_chunkKGBWMBLAcjs.ButtonSelector.call(void 0, )} ${_chunkH2PJDRPTcjs.LoadingWrapper} {
       margin: 0;
     }
 
-    ${_chunkP3TDMHFScjs.StyledFileInput} {
+    ${_chunkGKMKVMMHcjs.StyledFileInput} {
       margin-top: 16px;
     }
 
@@ -544,8 +593,8 @@ var StyledCardFormStyle = ({
         margin-top: 24px;
       }
 
-      & > ${_chunkCZJ6JPXBcjs.ButtonSelector.call(void 0, )}, & > ${_chunk6VA4SAHQcjs.select.call(void 0, CardFormNearButtonColumn)} {
-        ${formButtonTopMargin !== void 0 ? `margin-top: ${formButtonTopMargin}px;` : _chunkO3NYVYX5cjs.formButtonTopMarginStyle}
+      & > ${_chunkKGBWMBLAcjs.ButtonSelector.call(void 0, )}, & > ${_chunk6VA4SAHQcjs.select.call(void 0, CardFormNearButtonColumn)} {
+        ${formButtonTopMargin !== void 0 ? `margin-top: ${formButtonTopMargin}px;` : _chunkZQO2GKVScjs.formButtonTopMarginStyle}
       }
     }
   `;
@@ -573,9 +622,9 @@ function CardFormTextWithLink({
   to
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: { marginTop: "16px", fontWeight: "600" }, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: _chunk545K27C4cjs.mcBold, children: text }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: _chunkMODD4YGEcjs.mcBold, children: text }),
     " ",
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT3LKI5VGcjs.Link, { to, children: toText })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7KHYVDQ6cjs.Link, { to, children: toText })
   ] });
 }
 function CardFormCheckboxParagraph({
@@ -584,7 +633,7 @@ function CardFormCheckboxParagraph({
   checked
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCardFormCheckboxParagraph, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT4UBZ7NBcjs.Checkbox, { checked, onChange, alignItems: "flex-start" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQCB45DLMcjs.Checkbox, { checked, onChange, alignItems: "flex-start" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormCheckboxParagraphText, { onClick: () => onChange(!checked), children })
   ] });
 }
@@ -604,7 +653,7 @@ var CardFormOption = ({
 ] });
 var StyledCardFormOption = _styled2.default.div`
   border: ${({ theme, selected }) => `${selected ? `2px solid ${theme.info}` : `1px solid ${theme.c1Neutral}`}`};
-  ${_chunk545K27C4cjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkMODD4YGEcjs.standardBorderRadius.call(void 0, 8)}
   cursor: pointer;
   margin-top: 10px;
   padding: ${({ selected }) => selected ? "15px" : "16px"};
@@ -613,7 +662,7 @@ var CardFormOptionLabel = _styled2.default.div`
   font-weight: bold;
 `;
 var CardFormOptionDescription = _styled2.default.p`
-  color: ${_chunkDRTADBFRcjs.colors.gray40};
+  color: ${_chunkIJMYMSSCcjs.colors.gray40};
   margin: 6px 0 0;
 `;
 function resolveCardFormProp(prop, kind, defaultKey, theme) {

package/dist/{chunk-3DNXQ5SN.cjs → chunk-KZ67ZXG2.cjs}

@@ -5,28 +5,28 @@ var _chunk2JKTPKU6cjs = require('./chunk-2JKTPKU6.cjs');
 
 
 
-var _chunkO3NYVYX5cjs = require('./chunk-O3NYVYX5.cjs');
+var _chunkZQO2GKVScjs = require('./chunk-ZQO2GKVS.cjs');
 
 
-var _chunkWX5R7NU7cjs = require('./chunk-WX5R7NU7.cjs');
+var _chunkKGBWMBLAcjs = require('./chunk-KGBWMBLA.cjs');
 
 
-var _chunkCZJ6JPXBcjs = require('./chunk-CZJ6JPXB.cjs');
+var _chunkWLHC2LVQcjs = require('./chunk-WLHC2LVQ.cjs');
 
 
-var _chunkNCVALN33cjs = require('./chunk-NCVALN33.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkW4UIZ5DJcjs = require('./chunk-W4UIZ5DJ.cjs');
 
 
-var _chunkCKSZUZXJcjs = require('./chunk-CKSZUZXJ.cjs');
+var _chunk267QLBXGcjs = require('./chunk-267QLBXG.cjs');
 
 
-var _chunk545K27C4cjs = require('./chunk-545K27C4.cjs');
+var _chunkMODD4YGEcjs = require('./chunk-MODD4YGE.cjs');
 
 
-var _chunkDRTADBFRcjs = require('./chunk-DRTADBFR.cjs');
+var _chunkIJMYMSSCcjs = require('./chunk-IJMYMSSC.cjs');
 
 // src/components/QRReaderButton.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -49,7 +49,7 @@ function QRReaderOverlay({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledQRReaderOverlay, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ScreenContext, { children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, OverlayHeader, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: onClickBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCKSZUZXJcjs.Icon, { name: "ArrowLeft", width: 25 }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: onClickBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk267QLBXGcjs.Icon, { name: "ArrowLeft", width: 25 }) }),
         captureModeTitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: captureModeTitle }) : null
       ] }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -68,7 +68,7 @@ function QRReaderOverlay({
       ),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, OverlayFooter, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: "or" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCZJ6JPXBcjs.Button, { text: "Enter an address", onClick: onClickBack, mt: 12 })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKGBWMBLAcjs.Button, { text: "Enter an address", onClick: onClickBack, mt: 12 })
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -188,12 +188,12 @@ function QRReaderButton({
         onClick: () => setCapturing(true),
         hasError: Boolean(errorMsg),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCKSZUZXJcjs.Icon, { name: "CameraCapture", width: 64 }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk267QLBXGcjs.Icon, { name: "CameraCapture", width: 64 }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "21px" }, children: "Scan QR Code" })
         ]
       }
     ),
-    errorMsg ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkO3NYVYX5cjs.FieldError, { children: errorMsg }) : null
+    errorMsg ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZQO2GKVScjs.FieldError, { children: errorMsg }) : null
   ] });
 }
 var StyledQRReaderOverlay = _styled2.default.div`
@@ -219,13 +219,13 @@ var QRContainer = _styled2.default.div`
   }
 `;
 var QRReaderButtonContainer = _styled2.default.div``;
-var ScanQRButton = _styled2.default.call(void 0, _chunkNCVALN33cjs.UnstyledButton)`
-  ${_chunkO3NYVYX5cjs.standardBorderColor}
-  ${_chunkO3NYVYX5cjs.aboveFieldError}
+var ScanQRButton = _styled2.default.call(void 0, _chunkWLHC2LVQcjs.UnstyledButton)`
+  ${_chunkZQO2GKVScjs.standardBorderColor}
+  ${_chunkZQO2GKVScjs.aboveFieldError}
   margin-top: 16px;
   border-style: solid;
   border-width: 1px;
-  ${_chunk545K27C4cjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkMODD4YGEcjs.standardBorderRadius.call(void 0, 8)}
   width: 100%;
   padding: 24px 16px 16px;
   display: flex;
@@ -243,14 +243,14 @@ var ScreenContext = _styled2.default.div`
   height: 100vh;
   left: 50%;
   transform: translateX(-50%);
-  color: ${_chunkDRTADBFRcjs.colors.white};
+  color: ${_chunkIJMYMSSCcjs.colors.white};
   text-align: center;
 `;
 var qrOverlayHeaderHeightPx = 80;
-var BackButton = _styled2.default.call(void 0, _chunkNCVALN33cjs.UnstyledButton)`
+var BackButton = _styled2.default.call(void 0, _chunkWLHC2LVQcjs.UnstyledButton)`
   height: ${qrOverlayHeaderHeightPx}px;
   width: ${qrOverlayHeaderHeightPx}px;
-  color: ${_chunkDRTADBFRcjs.colors.white};
+  color: ${_chunkIJMYMSSCcjs.colors.white};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -261,7 +261,7 @@ var BackButton = _styled2.default.call(void 0, _chunkNCVALN33cjs.UnstyledButton)
 var OverlayHeader = _styled2.default.div`
   position: absolute;
   top: 0;
-  font-size: ${_chunkWX5R7NU7cjs.pxToRems.call(void 0, 16)};
+  font-size: ${_chunkW4UIZ5DJcjs.pxToRems.call(void 0, 16)};
   text-align: center;
   width: 100%;
   height: ${qrOverlayHeaderHeightPx}px;
@@ -274,11 +274,11 @@ var OverlayFooter = _styled2.default.div`
   position: absolute;
   height: 32%;
   max-height: 250px;
-  background: ${_chunkDRTADBFRcjs.colors.black};
+  background: ${_chunkIJMYMSSCcjs.colors.black};
   bottom: 0;
   left: 0;
   width: 100%;
-  font-size: ${_chunkWX5R7NU7cjs.pxToRems.call(void 0, 16)};
+  font-size: ${_chunkW4UIZ5DJcjs.pxToRems.call(void 0, 16)};
   text-align: center;
   display: flex;
   flex-direction: column;

package/dist/{chunk-M5VEEETG.cjs → chunk-LAC74MPT.cjs}

@@ -6,7 +6,7 @@ var _chunkSFGLEWHWcjs = require('./chunk-SFGLEWHW.cjs');
 var _chunkB2MHM6CYcjs = require('./chunk-B2MHM6CY.cjs');
 
 
-var _chunkWUF4FEGOcjs = require('./chunk-WUF4FEGO.cjs');
+var _chunkDIH23YCLcjs = require('./chunk-DIH23YCL.cjs');
 
 
 
@@ -24,7 +24,7 @@ function getPropDefaults(props) {
   return _chunkSFGLEWHWcjs.getPropDefaultsBase.call(void 0, props, { as: props.tag || "span" });
 }
 var StyledTitle = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkWUF4FEGOcjs.applyTypography.call(void 0, theme, "Title", size, colorProp)}
+  ${({ theme, size, colorProp }) => _chunkDIH23YCLcjs.applyTypography.call(void 0, theme, "Title", size, colorProp)}
   ${_chunkB2MHM6CYcjs.typographyStyles}
 `;
 

package/dist/{chunk-DDUK4VXH.js → chunk-LI2JZLEF.js}

@@ -1,9 +1,9 @@
-import {
-  useNumberInput
-} from "./chunk-IC2ARKW4.js";
 import {
   TextInput
-} from "./chunk-GNNSP254.js";
+} from "./chunk-UZVCEPZZ.js";
+import {
+  useNumberInput
+} from "./chunk-T74FAGM4.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-JGNVFGXJ.js → chunk-LMBUBQE3.js}

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