@lightsparkdev/ui 1.0.17 → 1.1.1

package/dist/chunk-23GQNBC7.js

@@ -1,66 +0,0 @@
-import {
-  Icon
-} from "./chunk-BV25DKRW.js";
-import {
-  getColor
-} from "./chunk-DJOYSOXT.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-W7FAWX6T.js";
-
-// src/components/IconToggle.tsx
-import styled from "@emotion/styled";
-import { jsx } from "@emotion/react/jsx-runtime";
-import { createElement } from "@emotion/react";
-function IconToggle({
-  options,
-  selectedOption,
-  onChange,
-  selectedBgColor = "c1Neutral",
-  selectedColor = "hcNeutral",
-  bgColor = "c4Neutral",
-  color = "mcNeutral"
-}) {
-  return /* @__PURE__ */ jsx(StyledIconToggle, { bgColor, children: options.map((_a) => {
-    var _b = _a, { key } = _b, iconProps = __objRest(_b, ["key"]);
-    return /* @__PURE__ */ jsx(
-      StyledIconToggleOption,
-      {
-        onClick: () => onChange(key),
-        selected: key === selectedOption,
-        selectedBgColor,
-        selectedColor,
-        colorProp: color,
-        children: /* @__PURE__ */ createElement(
-          Icon,
-          __spreadProps(__spreadValues({}, iconProps), {
-            key,
-            width: 11,
-            color: key === selectedOption ? selectedColor : color
-          })
-        )
-      },
-      key
-    );
-  }) });
-}
-var StyledIconToggle = styled.div`
-  border-radius: 999px;
-  background: ${({ theme, bgColor }) => getColor(theme, bgColor)};
-  padding: 2px;
-  gap: 2px;
-  display: flex;
-`;
-var StyledIconToggleOption = styled.div`
-  display: flex;
-  cursor: pointer;
-  border-radius: 999px;
-  padding: 4px;
-  background: ${({ theme, selected, selectedBgColor }) => selected ? getColor(theme, selectedBgColor) : "transparent"};
-`;
-
-export {
-  IconToggle
-};

package/dist/chunk-2BGDZDOL.cjs

@@ -1,41 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _chunkV5NLYG5Dcjs = require('./chunk-V5NLYG5D.cjs');
-
-
-var _chunkNWNESPGQcjs = require('./chunk-NWNESPGQ.cjs');
-
-// src/components/SecretContainer.tsx
-var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
-var _jsxruntime = require('@emotion/react/jsx-runtime');
-function SecretContainer(props) {
-  return props.secret ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledSecretContainer, { hasSecret: true, success: props.success, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "span",
-      {
-        style: {
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          flex: 1
-        },
-        children: props.secret
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkV5NLYG5Dcjs.CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
-  ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledSecretContainer, { hasSecret: false, children: "There are no tokens associated with this account" });
-}
-var StyledSecretContainer = _styled2.default.div`
-  background-color: ${({ theme, hasSecret, success }) => hasSecret ? success ? theme.success : theme.c05Neutral : theme.bg};
-  ${_chunkNWNESPGQcjs.standardBorderRadius.call(void 0, 8)}
-  padding: 18px 20px;
-  color: ${({ theme, success }) => success ? theme.hcNeutral : theme.text};
-  border: solid 1px
-    ${({ theme, hasSecret }) => hasSecret ? theme.c05Neutral : theme.c1Neutral};
-  display: flex;
-  gap: 4px;
-`;
-
-
-
-exports.SecretContainer = SecretContainer;

package/dist/chunk-2DXEH7CB.cjs

@@ -1,191 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-
-
-
-
-
-
-
-var _chunkE4MOQFMEcjs = require('./chunk-E4MOQFME.cjs');
-
-
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
-
-
-var _chunkXTQV7ZJ6cjs = require('./chunk-XTQV7ZJ6.cjs');
-
-
-
-var _chunkN63HBX3Vcjs = require('./chunk-N63HBX3V.cjs');
-
-
-
-
-var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
-
-// src/components/Select.tsx
-var _react = require('@emotion/react');
-var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
-var _reactselect = require('react-select'); var _reactselect2 = _interopRequireDefault(_reactselect);
-var _jsxruntime = require('@emotion/react/jsx-runtime');
-function Select(_a) {
-  var _b = _a, {
-    zIndex,
-    selectRef,
-    label,
-    openMenuOnFocus = true,
-    tabSelectsValue = false,
-    getOptionStyles,
-    getControlStyles
-  } = _b, rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _b, [
-    "zIndex",
-    "selectRef",
-    "label",
-    "openMenuOnFocus",
-    "tabSelectsValue",
-    "getOptionStyles",
-    "getControlStyles"
-  ]);
-  const theme = _react.useTheme.call(void 0, );
-  const styles = {
-    container: (styles2, state) => {
-      return _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles2), {
-        width: _chunkE4MOQFMEcjs.fieldWidth,
-        maxWidth: _chunkE4MOQFMEcjs.maxFieldWidth,
-        zIndex: _chunkZU72XWNEcjs.z.select
-      });
-    },
-    control: (styles2, state) => {
-      const controlStyles = getControlStyles ? getControlStyles(styles2, state) : {};
-      return _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles2), {
-        transition: "none",
-        padding: state.menuIsOpen || state.isFocused ? `${_chunkE4MOQFMEcjs.textInputPaddingPx - 1}px` : _chunkE4MOQFMEcjs.textInputPadding,
-        boxShadow: "none",
-        background: theme.bg,
-        minHeight: 0,
-        fontSize: 14,
-        borderWidth: state.menuIsOpen || state.isFocused ? "2px" : "1px",
-        "&:hover": {
-          borderColor: state.menuIsOpen ? _chunkE4MOQFMEcjs.textInputBorderColorFocused.call(void 0, { theme }) : _chunkE4MOQFMEcjs.textInputBorderColor.call(void 0, { theme })
-        },
-        borderColor: state.menuIsOpen || state.isFocused ? _chunkE4MOQFMEcjs.textInputBorderColorFocused.call(void 0, { theme }) : _chunkE4MOQFMEcjs.textInputBorderColor.call(void 0, { theme })
-      }), controlStyles);
-    },
-    indicatorsContainer: (styles2) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles2), {
-      padding: "0 8px"
-    }),
-    indicatorSeparator: (styles2) => ({
-      display: "none"
-    }),
-    menu: (styles2, state) => {
-      return _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles2), {
-        overflow: "hidden",
-        border: `2px solid ${theme.lcNeutral}`,
-        backgroundColor: theme.bg,
-        boxShadow: "0px 3px 6px 1px rgba(0,0,0,0.05)",
-        borderColor: theme.hcNeutral,
-        width: "max-content",
-        minWidth: "100%"
-      });
-    },
-    option: (styles2, props) => {
-      const optionStyles = getOptionStyles ? getOptionStyles(styles2, props) : {};
-      return _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles2), {
-        color: props.isFocused ? _chunkN63HBX3Vcjs.getColor.call(void 0, theme, _chunkE4MOQFMEcjs.defaultTextInputTypography.color) : props.isDisabled ? _chunkE4MOQFMEcjs.textInputPlaceholderColor.call(void 0, { theme }) : _chunkN63HBX3Vcjs.getColor.call(void 0, theme, _chunkE4MOQFMEcjs.defaultTextInputTypography.color),
-        fontWeight: 600,
-        cursor: "pointer",
-        backgroundColor: props.isFocused ? _chunkN63HBX3Vcjs.themeOr.call(void 0, theme.c05Neutral, theme.c2Neutral)({ theme }) : theme.bg,
-        WebkitTapHighlightColor: theme.c1Neutral,
-        "&:active": {
-          backgroundColor: _chunkN63HBX3Vcjs.themeOr.call(void 0, 
-            theme.c05Neutral,
-            theme.c5Neutral
-          )({ theme })
-        }
-      }), optionStyles);
-    },
-    menuPortal: (styles2) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles2), {
-      fontSize: 14,
-      zIndex: zIndex || _chunkZU72XWNEcjs.z.selectFocused
-    }),
-    singleValue: (styles2) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles2), {
-      color: theme.text,
-      fontWeight: 600,
-      fontSize: 14
-    }),
-    placeholder: (styles2) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles2), {
-      color: theme.mcNeutral
-    }),
-    valueContainer: (styles2) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles2), {
-      padding: 0
-    }),
-    input: (styles2) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, styles2), {
-      color: theme.text,
-      fontWeight: 600,
-      fontSize: 14
-    })
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledSelect, { children: [
-    label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectLabel, { hasError: false, children: label }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _reactselect2.default,
-      _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, rest), {
-        styles,
-        openMenuOnFocus,
-        tabSelectsValue,
-        menuPortalTarget: document.body,
-        ref: selectRef,
-        components: _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {
-          DropdownIndicator: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTQV7ZJ6cjs.Icon, { name: "Chevron", width: 16 })
-        }, rest.components),
-        theme: (selectTheme) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, selectTheme), {
-          borderRadius: 8,
-          colors: {
-            danger: theme.danger,
-            dangerLight: "#ff8",
-            primary: theme.text,
-            primary75: "#ccc",
-            primary50: "#888",
-            primary25: "#444",
-            neutral0: "#000",
-            neutral5: "#111",
-            neutral10: "#222",
-            neutral20: "#999",
-            neutral30: "#aaa",
-            neutral40: "#bbb",
-            neutral50: "#bbb",
-            neutral60: "#ccc",
-            neutral70: "#ccc",
-            neutral80: "#ddd",
-            neutral90: "#ddd"
-          }
-        })
-      })
-    )
-  ] });
-}
-var SelectLabel = _styled2.default.label`
-  font-size: 10px;
-  position: absolute;
-  z-index: ${_chunkZU72XWNEcjs.z.select + 1};
-  background-color: ${({ theme }) => theme.bg};
-  color: ${({ theme, hasError }) => hasError ? theme.danger : theme.mcNeutral};
-  font-weight: 600;
-  padding: 0px 6px;
-  left: 12px;
-  top: -6px;
-`;
-var StyledSelect = _styled2.default.div`
-  position: relative;
-  & + & {
-    margin-top: 8px;
-  }
-`;
-var Select_default = Select;
-
-
-
-
-
-exports.Select = Select; exports.StyledSelect = StyledSelect; exports.Select_default = Select_default;

package/dist/chunk-2JGQOHD7.js

@@ -1,26 +0,0 @@
-import {
-  toReactNodes
-} from "./chunk-SJ2MVP3F.js";
-import {
-  StyledBodyStrong,
-  getPropDefaults
-} from "./chunk-FOCQSOQL.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-W7FAWX6T.js";
-
-// src/components/typography/BodyStrong.tsx
-import { jsx } from "@emotion/react/jsx-runtime";
-function BodyStrong(props) {
-  const propsWithDefaults = getPropDefaults(props);
-  let reactNodes = props.children || null;
-  if (props.content) {
-    reactNodes = toReactNodes(props.content);
-  }
-  return /* @__PURE__ */ jsx(StyledBodyStrong, __spreadProps(__spreadValues({}, propsWithDefaults), { children: reactNodes }));
-}
-
-export {
-  BodyStrong
-};

package/dist/chunk-2MLGBMRI.cjs

@@ -1,72 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _chunkPIMOLSBMcjs = require('./chunk-PIMOLSBM.cjs');
-
-
-var _chunkJBVSQGPYcjs = require('./chunk-JBVSQGPY.cjs');
-
-
-var _chunkXTQV7ZJ6cjs = require('./chunk-XTQV7ZJ6.cjs');
-
-
-
-var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
-
-// src/components/TextIconAligner.tsx
-var _jsxruntime = require('@emotion/react/jsx-runtime');
-function TextIconAligner({
-  content: contentProp,
-  typography: typographyProp,
-  rightIcon,
-  leftIcon,
-  onClick
-}) {
-  const defaultTypography = {
-    type: (typographyProp == null ? void 0 : typographyProp.type) || "Body",
-    size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
-    color: (typographyProp == null ? void 0 : typographyProp.color) || "text"
-  };
-  const nodesWithTypography = _chunkPIMOLSBMcjs.setDefaultReactNodesTypography.call(void 0, contentProp, {
-    default: defaultTypography,
-    link: _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, defaultTypography), { color: "link" })
-  });
-  const content = _chunkJBVSQGPYcjs.toReactNodes.call(void 0, nodesWithTypography);
-  const leftIconNode = leftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkXTQV7ZJ6cjs.Icon,
-    {
-      name: leftIcon.name,
-      width: leftIcon.width ? leftIcon.width : 12,
-      mr: leftIcon.mr || 6,
-      color: leftIcon.color
-    }
-  ) : null;
-  const rightIconNode = rightIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkXTQV7ZJ6cjs.Icon,
-    {
-      name: rightIcon.name,
-      width: rightIcon.width ? rightIcon.width : 12,
-      ml: rightIcon.ml || 6,
-      color: rightIcon.color
-    }
-  ) : null;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "span",
-    {
-      css: {
-        cursor: onClick ? "pointer" : "inherit",
-        display: "inline-flex",
-        alignItems: "center"
-      },
-      onClick,
-      children: [
-        leftIconNode,
-        content,
-        rightIconNode
-      ]
-    }
-  );
-}
-
-
-
-exports.TextIconAligner = TextIconAligner;

package/dist/chunk-2OU2WKC2.js

@@ -1,291 +0,0 @@
-import {
-  QRReader
-} from "./chunk-TJKJYY5O.js";
-import {
-  FieldError,
-  aboveFieldError,
-  standardBorderColor
-} from "./chunk-GHLNFY6T.js";
-import {
-  pxToRems
-} from "./chunk-MFTEQD6P.js";
-import {
-  Button
-} from "./chunk-CEZHIXNR.js";
-import {
-  UnstyledButton
-} from "./chunk-GT2UW67L.js";
-import {
-  z
-} from "./chunk-55OQPFLF.js";
-import {
-  Icon
-} from "./chunk-BV25DKRW.js";
-import {
-  standardBorderRadius
-} from "./chunk-XDL2VYUF.js";
-import {
-  colors
-} from "./chunk-HU2UCL6I.js";
-
-// src/components/QRReaderButton.tsx
-import styled from "@emotion/styled";
-import { isError } from "@lightsparkdev/core";
-import { useEffect, useRef, useState } from "react";
-import ReactDOM from "react-dom";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-var containerStyle = {};
-var videoContainerStyle = {
-  position: "static",
-  width: "auto",
-  height: "auto",
-  overflow: "initial"
-};
-var videoStyle = {};
-function QRReaderOverlay({
-  captureModeTitle,
-  onClickBack
-}) {
-  return /* @__PURE__ */ jsxs(StyledQRReaderOverlay, { children: [
-    /* @__PURE__ */ jsxs(ScreenContext, { children: [
-      /* @__PURE__ */ jsxs(OverlayHeader, { children: [
-        /* @__PURE__ */ jsx(BackButton, { onClick: onClickBack, children: /* @__PURE__ */ jsx(Icon, { name: "ArrowLeft", width: 25 }) }),
-        captureModeTitle ? /* @__PURE__ */ jsx("div", { children: captureModeTitle }) : null
-      ] }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          css: {
-            position: "absolute",
-            width: "146px",
-            top: "13%",
-            left: "0px",
-            right: "0px",
-            margin: "auto"
-          },
-          children: "Scan a BTC or Lightning QR code"
-        }
-      ),
-      /* @__PURE__ */ jsxs(OverlayFooter, { children: [
-        /* @__PURE__ */ jsx("div", { children: "or" }),
-        /* @__PURE__ */ jsx(Button, { text: "Enter an address", onClick: onClickBack, mt: 12 })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        height: "100%",
-        viewBox: "0 0 1784 623",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fillRule: "evenodd",
-              clipRule: "evenodd",
-              d: "M1784 0H0V623H1784V0ZM774.107 136C756.375 136 742 150.327 742 168V404C742 421.673 756.375 436 774.107 436H1009.89C1027.63 436 1042 421.673 1042 404V168C1042 150.327 1027.63 136 1009.89 136H774.107Z",
-              fill: "black",
-              fillOpacity: "0.5"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              x: "742",
-              y: "136",
-              width: "300",
-              height: "300",
-              rx: "32",
-              stroke: "white",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeDasharray: "4 6"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function QRReaderButton({
-  onResult,
-  onUserDenyAccess,
-  captureModeTitle
-}) {
-  const [capturing, setCapturing] = useState(false);
-  const [errorMsg, setErrorMsg] = useState(null);
-  const nodeRef = useRef(null);
-  useEffect(() => {
-    if (!nodeRef.current) {
-      nodeRef.current = document.createElement("div");
-      document.body.appendChild(nodeRef.current);
-    }
-    return () => {
-      if (nodeRef.current) {
-        document.body.removeChild(nodeRef.current);
-        nodeRef.current = null;
-      }
-    };
-  }, []);
-  useEffect(() => {
-    if (capturing) {
-      document.body.style.overflow = "hidden";
-      document.body.style.overscrollBehavior = "none";
-      document.body.style.touchAction = "none";
-    } else {
-      document.body.style.overflow = "";
-      document.body.style.overscrollBehavior = "";
-      document.body.style.touchAction = "";
-    }
-  }, [capturing]);
-  return /* @__PURE__ */ jsxs(QRReaderButtonContainer, { children: [
-    capturing && nodeRef.current ? (
-      // portal needed to break outside card stacking context and stay above header
-      ReactDOM.createPortal(
-        /* @__PURE__ */ jsxs(QRContainer, { children: [
-          /* @__PURE__ */ jsx(
-            QRReaderOverlay,
-            {
-              captureModeTitle: captureModeTitle || "Scan QR Code",
-              onClickBack: () => setCapturing(false)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            QRReader,
-            {
-              constraints: {
-                facingMode: "environment"
-              },
-              onResult: (result, error) => {
-                if (result) {
-                  setCapturing(false);
-                  onResult(result, error);
-                }
-                if (error) {
-                  if (isError(error)) {
-                    if (error.message.match(/Permission denied/)) {
-                      setErrorMsg(
-                        "You must allow access to your camera to scan QR codes."
-                      );
-                      onUserDenyAccess();
-                    }
-                  }
-                }
-              },
-              containerStyle,
-              videoContainerStyle,
-              videoStyle
-            }
-          )
-        ] }),
-        nodeRef.current
-      )
-    ) : null,
-    /* @__PURE__ */ jsxs(
-      ScanQRButton,
-      {
-        onClick: () => setCapturing(true),
-        hasError: Boolean(errorMsg),
-        children: [
-          /* @__PURE__ */ jsx(Icon, { name: "CameraCapture", width: 64 }),
-          /* @__PURE__ */ jsx("div", { css: { marginTop: "21px" }, children: "Scan QR Code" })
-        ]
-      }
-    ),
-    errorMsg ? /* @__PURE__ */ jsx(FieldError, { children: errorMsg }) : null
-  ] });
-}
-var StyledQRReaderOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  z-index: ${z.qrReaderOverlay};
-  left: 50%;
-  transform: translateX(-50%);
-`;
-var QRContainer = styled.div`
-  // some of these styles aren't applied properly via the provided props, override:
-  video {
-    z-index: ${z.qrReaderVideo} !important;
-    padding: 0 !important;
-    position: fixed !important;
-    width: 100vw !important;
-    height: 100vh !important;
-    left: 50% !important;
-    transform: translateX(-50%) !important;
-    object-fit: cover !important;
-  }
-`;
-var QRReaderButtonContainer = styled.div``;
-var ScanQRButton = styled(UnstyledButton)`
-  ${standardBorderColor}
-  ${aboveFieldError}
-  margin-top: 16px;
-  border-style: solid;
-  border-width: 1px;
-  ${standardBorderRadius(8)}
-  width: 100%;
-  padding: 24px 16px 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: ${({ theme }) => theme.lcNeutral};
-  div:last-of-type {
-    color: ${({ theme }) => theme.c4Neutral};
-    font-weight: 600;
-  }
-`;
-var ScreenContext = styled.div`
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  left: 50%;
-  transform: translateX(-50%);
-  color: ${colors.white};
-  text-align: center;
-`;
-var qrOverlayHeaderHeightPx = 80;
-var BackButton = styled(UnstyledButton)`
-  height: ${qrOverlayHeaderHeightPx}px;
-  width: ${qrOverlayHeaderHeightPx}px;
-  color: ${colors.white};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
-var OverlayHeader = styled.div`
-  position: absolute;
-  top: 0;
-  font-size: ${pxToRems(16)};
-  text-align: center;
-  width: 100%;
-  height: ${qrOverlayHeaderHeightPx}px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-var OverlayFooter = styled.div`
-  padding: 16px 0;
-  position: absolute;
-  height: 32%;
-  max-height: 250px;
-  background: ${colors.black};
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  font-size: ${pxToRems(16)};
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-`;
-
-export {
-  QRReaderButton
-};