@lightsparkdev/ui 1.0.10 → 1.0.11

package/dist/{chunk-GU4QMN7Z.cjs → chunk-GUUQ4PSE.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkDIMJISMHcjs = require('./chunk-DIMJISMH.cjs');
+var _chunkOQEP7VDDcjs = require('./chunk-OQEP7VDD.cjs');
 
 
-var _chunkWKRK5OVEcjs = require('./chunk-WKRK5OVE.cjs');
+var _chunk7EIZIKLRcjs = require('./chunk-7EIZIKLR.cjs');
 
 // src/components/ProgressBar.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -41,8 +41,8 @@ function ProgressBar({
 }
 ProgressBar.defaultProps = defaultProps;
 var ProgressBarContainer = _styled2.default.div`
-  ${_chunkDIMJISMHcjs.standardBorderRadius.call(void 0, 16)}
-  background-color: ${({ theme }) => _chunkWKRK5OVEcjs.themeOr.call(void 0, theme.c05Neutral, theme.c1Neutral)({ theme })};
+  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 16)}
+  background-color: ${({ theme }) => _chunk7EIZIKLRcjs.themeOr.call(void 0, theme.c05Neutral, theme.c1Neutral)({ theme })};
   box-sizing: border-box;
   display: flex;
   height: ${({ isSm }) => isSm ? "6px" : "16px"};
@@ -51,7 +51,7 @@ var ProgressBarContainer = _styled2.default.div`
   position: relative;
 `;
 var BarBg = _styled2.default.div`
-  ${_chunkDIMJISMHcjs.standardBorderRadius.call(void 0, 16)}
+  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 16)}
   width: ${({ percentage }) => 100 / percentage * 100}%;
   height: 100%;
 
@@ -65,7 +65,7 @@ var BarBg = _styled2.default.div`
   )`};
 `;
 var Bar = _styled2.default.div`
-  ${_chunkDIMJISMHcjs.standardBorderRadius.call(void 0, 16)}
+  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 16)}
   overflow: hidden;
   box-sizing: border-box;
   display: inline-block;

package/dist/{chunk-WKNYSBTF.cjs → chunk-GXP5ES4C.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkYHJTGE2Ycjs = require('./chunk-YHJTGE2Y.cjs');
+var _chunkQWWNVICKcjs = require('./chunk-QWWNVICK.cjs');
 
 // src/components/CardForm/CardFormCodeInput.tsx
 var _react = require('@emotion/react');
@@ -12,7 +12,7 @@ function CardFormCodeInput({
   onBlur
 }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkYHJTGE2Ycjs.CodeInput,
+    _chunkQWWNVICKcjs.CodeInput,
     {
       codeLength: 6,
       onSubmit,

package/dist/{chunk-625AYCBC.js → chunk-H2TSUAW4.js}

@@ -1,9 +1,9 @@
 import {
   standardBorderRadius
-} from "./chunk-YZM4ALKD.js";
+} from "./chunk-YBJVTNAP.js";
 import {
   themeOr
-} from "./chunk-O42E7NAG.js";
+} from "./chunk-HYUF4RXZ.js";
 
 // src/components/ProgressBar.tsx
 import styled from "@emotion/styled";

package/dist/chunk-HEPQ6OV4.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk36SDWEWYcjs = require('./chunk-36SDWEWY.cjs');
+
+
+
+var _chunk5YAHKBG6cjs = require('./chunk-5YAHKBG6.cjs');
+
+
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
+// src/components/typography/Headline.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Headline(props) {
+  const propsWithDefaults = _chunk5YAHKBG6cjs.getPropDefaults.call(void 0, props);
+  let reactNodes = props.children || null;
+  if (props.content) {
+    reactNodes = _chunk36SDWEWYcjs.toReactNodes.call(void 0, props.content);
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5YAHKBG6cjs.StyledHeadline, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
+}
+
+
+
+exports.Headline = Headline;

package/dist/{chunk-LU5EBFVL.js → chunk-HF5DZZF7.js}

@@ -1,46 +1,46 @@
 import {
   StyledSelect
-} from "./chunk-72JQQKA7.js";
+} from "./chunk-MNMGIPSQ.js";
 import {
   Headline
-} from "./chunk-IGNDJHKO.js";
+} from "./chunk-54GVS2VF.js";
 import {
   StyledFileInput
-} from "./chunk-NSA4FO4B.js";
+} from "./chunk-GEFRH7G5.js";
 import {
   ClipboardTextField
-} from "./chunk-SAI5MDK3.js";
+} from "./chunk-V3XAM4BL.js";
 import {
   TextInputHalfRow
-} from "./chunk-G3FLE2PL.js";
+} from "./chunk-KIE5GR5E.js";
 import {
   ToggleContainer
-} from "./chunk-5YKEHMNB.js";
+} from "./chunk-CBEPI4BG.js";
 import {
   formButtonTopMarginStyle,
   inputSpacingPx
-} from "./chunk-AXHFR6HR.js";
+} from "./chunk-UGHP4KVZ.js";
 import {
   StyledButtonRow
-} from "./chunk-2F2YMUL5.js";
+} from "./chunk-2GSZZKB2.js";
 import {
   pxToRems
-} from "./chunk-HEXTPM3C.js";
+} from "./chunk-CD4D43OU.js";
 import {
   ButtonSelector
-} from "./chunk-2C73WWPT.js";
+} from "./chunk-LQKIJF4I.js";
 import {
   LoadingWrapper
-} from "./chunk-FFOE2R32.js";
+} from "./chunk-AQ4L3IR5.js";
 import {
   Checkbox
-} from "./chunk-7H74ZBRC.js";
+} from "./chunk-S2VMVARY.js";
 import {
   toReactNodesWithTypographyMap
-} from "./chunk-VVA3TL2D.js";
+} from "./chunk-JZ2MJO3Z.js";
 import {
   toReactNodes
-} from "./chunk-XSMF72UT.js";
+} from "./chunk-2I22MYIY.js";
 import {
   icon
 } from "./chunk-G5IVQ4O3.js";
@@ -50,19 +50,26 @@ import {
   standardCardShadow,
   standardCardShadowHard,
   standardContentInset
-} from "./chunk-YZM4ALKD.js";
+} from "./chunk-YBJVTNAP.js";
+import {
+  Link
+} from "./chunk-TIX47F5U.js";
+import {
+  getColor
+} from "./chunk-HYUF4RXZ.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
-import {
-  Link
-} from "./chunk-HJQIDDKT.js";
 import {
   colors
 } from "./chunk-MN4NUSPL.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
 
 // src/components/CardForm/CardForm.tsx
-import { css } from "@emotion/react";
+import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { useCallback } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
@@ -104,24 +111,65 @@ var descriptionTypography = {
     }
   }
 };
-function resolveProps(args) {
-  const isPrimary = args.kind === "primary";
-  const isSecondary = args.kind === "secondary";
-  const isTertiary = args.kind === "tertiary";
-  const paddingY = isPrimary || isTertiary ? 56 : 40;
-  const paddingX = isSecondary || isTertiary ? 40 : 56;
-  const textAlign = args.textAlign || "left";
-  const shadow = isPrimary ? "soft" : isTertiary ? "hard" : "none";
-  const borderRadius = isSecondary ? 8 : 24;
-  const border = isSecondary;
-  return {
+function resolveProps(args, theme) {
+  const paddingY = resolveCardFormProp(void 0, args.kind, "paddingY", theme);
+  const paddingX = resolveCardFormProp(void 0, args.kind, "paddingX", theme);
+  const textAlign = resolveCardFormProp(
+    args.textAlign,
+    args.kind,
+    "textAlign",
+    theme
+  );
+  const shadow = resolveCardFormProp(args.shadow, args.kind, "shadow", theme);
+  const borderRadius = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "borderRadius",
+    theme
+  );
+  const borderWidth = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "borderWidth",
+    theme
+  );
+  const borderColor = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "borderColor",
+    theme
+  );
+  const backgroundColor = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "backgroundColor",
+    theme
+  );
+  const smBackgroundColor = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "smBackgroundColor",
+    theme
+  );
+  const smBorderWidth = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "smBorderWidth",
+    theme
+  );
+  const props = {
     paddingY,
     paddingX,
     shadow,
     borderRadius,
-    border,
-    textAlign
+    borderColor,
+    borderWidth,
+    textAlign,
+    backgroundColor,
+    smBackgroundColor,
+    smBorderWidth
   };
+  return props;
 }
 function CardForm({
   children,
@@ -136,10 +184,26 @@ function CardForm({
   hasChildForm,
   wide = false,
   kind = "primary",
+  shadow: shadowProp,
   textAlign: textAlignProp,
   belowFormContent
 }) {
-  const { paddingY, paddingX, shadow, borderRadius, border, textAlign } = resolveProps({ kind, textAlign: textAlignProp });
+  const theme = useTheme();
+  const {
+    paddingY,
+    paddingX,
+    shadow,
+    borderRadius,
+    borderWidth,
+    borderColor,
+    textAlign,
+    backgroundColor,
+    smBackgroundColor,
+    smBorderWidth
+  } = resolveProps(
+    { kind, textAlign: textAlignProp, shadow: shadowProp },
+    theme
+  );
   const onSubmitForm = useCallback(
     (e) => {
       e.preventDefault();
@@ -169,34 +233,21 @@ function CardForm({
     formattedDescription && /* @__PURE__ */ jsx(CardFormSubtitle, { children: formattedDescription }),
     children
   ] });
+  const commonProps = {
+    wide,
+    shadow,
+    borderRadius,
+    borderWidth,
+    borderColor,
+    textAlign,
+    paddingX,
+    paddingY,
+    backgroundColor,
+    smBackgroundColor,
+    smBorderWidth
+  };
   return /* @__PURE__ */ jsxs(CardFormContainer, { children: [
-    hasChildForm ? /* @__PURE__ */ jsx(
-      StyledCardFormDiv,
-      {
-        wide,
-        shadow,
-        borderRadius,
-        border,
-        textAlign,
-        paddingY,
-        paddingX,
-        children: content
-      }
-    ) : /* @__PURE__ */ jsx(
-      StyledCardForm,
-      {
-        wide,
-        onSubmit: onSubmitForm,
-        shadow,
-        borderRadius,
-        border,
-        textAlign,
-        paddingY,
-        paddingX,
-        noValidate: true,
-        children: content
-      }
-    ),
+    hasChildForm ? /* @__PURE__ */ jsx(StyledCardFormDiv, __spreadProps(__spreadValues({}, commonProps), { children: content })) : /* @__PURE__ */ jsx(StyledCardForm, __spreadProps(__spreadValues({ onSubmit: onSubmitForm, noValidate: true }, commonProps), { children: content })),
     /* @__PURE__ */ jsx(BelowCardFormContent, { children: belowFormContentNodes })
   ] });
 }
@@ -308,22 +359,30 @@ var StyledCardFormStyle = ({
   wide,
   shadow,
   borderRadius,
-  border,
+  borderWidth,
+  borderColor,
   textAlign,
   paddingX,
-  paddingY
+  paddingY,
+  backgroundColor,
+  smBackgroundColor,
+  smBorderWidth
 }) => {
   return css`
     ${formInset({ wide, paddingX, paddingY })}
     ${shadow === "soft" ? standardCardShadow : shadow === "hard" ? standardCardShadowHard : ""}
 
-    background-color: ${theme.bg};
     position: relative;
     height: 100%;
-    ${border ? `border: 1px solid ${theme.vlcNeutral};` : ""}
+    border-style: solid;
+    border-width: ${borderWidth}px;
+    border-color: ${getColor(theme, borderColor)};
+    background-color: ${getColor(theme, backgroundColor)};
 
     ${bp.sm(`
       box-shadow: none;
+      background-color: ${getColor(theme, smBackgroundColor)};
+      border-width: ${smBorderWidth}px;
     `)}
 
     ${bp.minSm(`
@@ -448,6 +507,14 @@ var CardFormOptionDescription = styled.p`
   color: ${colors.gray40};
   margin: 6px 0 0;
 `;
+function resolveCardFormProp(prop, kind, defaultKey, theme) {
+  var _a;
+  return (
+    /** props may be unset for a given kind but theme defaults always exist,
+     * so this will always resolve a value: */
+    prop || ((_a = theme.cardForm.kinds[kind]) == null ? void 0 : _a[defaultKey]) || theme.cardForm[defaultKey]
+  );
+}
 
 export {
   CardForm,

package/dist/{chunk-DYOWCUZ3.cjs → chunk-HHHQDM7Q.cjs}

@@ -2,11 +2,11 @@
 
 
 
-var _chunkDIMJISMHcjs = require('./chunk-DIMJISMH.cjs');
+var _chunkOQEP7VDDcjs = require('./chunk-OQEP7VDD.cjs');
 
 
 
-var _chunkWKRK5OVEcjs = require('./chunk-WKRK5OVE.cjs');
+var _chunk7EIZIKLRcjs = require('./chunk-7EIZIKLR.cjs');
 
 // src/components/Table/TableEmptyState.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -27,12 +27,12 @@ var TableEmptyState = (props) => {
 };
 var StyledTableEmptyState = _styled2.default.div`
   position: relative;
-  ${_chunkDIMJISMHcjs.standardContentInset.css}
+  ${_chunkOQEP7VDDcjs.standardContentInset.css}
 `;
 var TableEmptyStateLine = _styled2.default.div`
   background: linear-gradient(
     90deg,
-    ${({ theme }) => _chunkWKRK5OVEcjs.isDark.call(void 0, theme) ? theme.c1Neutral : theme.c05Neutral} 0%,
+    ${({ theme }) => _chunk7EIZIKLRcjs.isDark.call(void 0, theme) ? theme.c1Neutral : theme.c05Neutral} 0%,
     rgba(242, 242, 242, 0) 100%
   );
   height: 16px;
@@ -53,12 +53,12 @@ var TableEmptyStateCardContainer = _styled2.default.div`
   width: 100%;
 `;
 var TableEmptyStateCard = _styled2.default.div`
-  ${_chunkDIMJISMHcjs.standardCardShadow}
-  ${_chunkDIMJISMHcjs.standardBorderRadius.call(void 0, 16)}
+  ${_chunkOQEP7VDDcjs.standardCardShadow}
+  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 16)}
   padding: 32px;
   width: 320px;
   max-width: 100%;
-  ${({ theme }) => _chunkWKRK5OVEcjs.themeOr.call(void 0, `background-color: ${theme.bg}`, "transparent")({ theme })};
+  ${({ theme }) => _chunk7EIZIKLRcjs.themeOr.call(void 0, `background-color: ${theme.bg}`, "transparent")({ theme })};
 `;
 var TableEmptyStateCardTitle = _styled2.default.p`
   font-weight: bold;

package/dist/{chunk-I7MVMRCX.js → chunk-HLLTNMEO.js}

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

package/dist/{chunk-Z64EONUS.cjs → chunk-HRPJHMJB.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkSMVLBX2Dcjs = require('./chunk-SMVLBX2D.cjs');
+var _chunkRSPUYVQMcjs = require('./chunk-RSPUYVQM.cjs');
 
 
-var _chunk7JJQGMWTcjs = require('./chunk-7JJQGMWT.cjs');
+var _chunkDHL27UIKcjs = require('./chunk-DHL27UIK.cjs');
 
 
 
@@ -22,8 +22,8 @@ var BooleanFilter = ({
   state,
   label
 }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSMVLBX2Dcjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk7JJQGMWTcjs.Radio,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRSPUYVQMcjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkDHL27UIKcjs.Radio,
     {
       radioOptions: [
         { label: "Yes" /* YES */ },

package/dist/{chunk-OVL3XQUI.cjs → chunk-HXWE42OU.cjs}

@@ -5,25 +5,25 @@ var _chunkRFO3GG6Rcjs = require('./chunk-RFO3GG6R.cjs');
 
 
 
-var _chunkJPRA3J5Ccjs = require('./chunk-JPRA3J5C.cjs');
+var _chunkBCPM2M3Ycjs = require('./chunk-BCPM2M3Y.cjs');
 
 
-var _chunk6IU4OQOCcjs = require('./chunk-6IU4OQOC.cjs');
+var _chunkQ3F7S3R3cjs = require('./chunk-Q3F7S3R3.cjs');
 
 
-var _chunk7LOKZM7Vcjs = require('./chunk-7LOKZM7V.cjs');
+var _chunkAPQWRIH6cjs = require('./chunk-APQWRIH6.cjs');
 
 
-var _chunk4EK5RAZScjs = require('./chunk-4EK5RAZS.cjs');
+var _chunkWVBMQP6Ocjs = require('./chunk-WVBMQP6O.cjs');
 
 
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkJMIYMECJcjs = require('./chunk-JMIYMECJ.cjs');
+var _chunkUMU7TYANcjs = require('./chunk-UMU7TYAN.cjs');
 
 
-var _chunkDIMJISMHcjs = require('./chunk-DIMJISMH.cjs');
+var _chunkOQEP7VDDcjs = require('./chunk-OQEP7VDD.cjs');
 
 
 var _chunkCFG65CGCcjs = require('./chunk-CFG65CGC.cjs');
@@ -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, _chunkJMIYMECJcjs.Icon, { name: "ArrowLeft", width: 25 }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: onClickBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUMU7TYANcjs.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, _chunk7LOKZM7Vcjs.Button, { text: "Enter an address", onClick: onClickBack, mt: 12 })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAPQWRIH6cjs.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, _chunkJMIYMECJcjs.Icon, { name: "CameraCapture", width: 64 }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUMU7TYANcjs.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, _chunkJPRA3J5Ccjs.FieldError, { children: errorMsg }) : null
+    errorMsg ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBCPM2M3Ycjs.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, _chunk4EK5RAZScjs.UnstyledButton)`
-  ${_chunkJPRA3J5Ccjs.standardBorderColor}
-  ${_chunkJPRA3J5Ccjs.aboveFieldError}
+var ScanQRButton = _styled2.default.call(void 0, _chunkWVBMQP6Ocjs.UnstyledButton)`
+  ${_chunkBCPM2M3Ycjs.standardBorderColor}
+  ${_chunkBCPM2M3Ycjs.aboveFieldError}
   margin-top: 16px;
   border-style: solid;
   border-width: 1px;
-  ${_chunkDIMJISMHcjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 8)}
   width: 100%;
   padding: 24px 16px 16px;
   display: flex;
@@ -247,7 +247,7 @@ var ScreenContext = _styled2.default.div`
   text-align: center;
 `;
 var qrOverlayHeaderHeightPx = 80;
-var BackButton = _styled2.default.call(void 0, _chunk4EK5RAZScjs.UnstyledButton)`
+var BackButton = _styled2.default.call(void 0, _chunkWVBMQP6Ocjs.UnstyledButton)`
   height: ${qrOverlayHeaderHeightPx}px;
   width: ${qrOverlayHeaderHeightPx}px;
   color: ${_chunkCFG65CGCcjs.colors.white};
@@ -261,7 +261,7 @@ var BackButton = _styled2.default.call(void 0, _chunk4EK5RAZScjs.UnstyledButton)
 var OverlayHeader = _styled2.default.div`
   position: absolute;
   top: 0;
-  font-size: ${_chunk6IU4OQOCcjs.pxToRems.call(void 0, 16)};
+  font-size: ${_chunkQ3F7S3R3cjs.pxToRems.call(void 0, 16)};
   text-align: center;
   width: 100%;
   height: ${qrOverlayHeaderHeightPx}px;
@@ -278,7 +278,7 @@ var OverlayFooter = _styled2.default.div`
   bottom: 0;
   left: 0;
   width: 100%;
-  font-size: ${_chunk6IU4OQOCcjs.pxToRems.call(void 0, 16)};
+  font-size: ${_chunkQ3F7S3R3cjs.pxToRems.call(void 0, 16)};
   text-align: center;
   display: flex;
   flex-direction: column;