@lightsparkdev/ui 1.0.10 → 1.0.12

package/dist/chunk-FC3BTZUR.js

@@ -0,0 +1,158 @@
+import {
+  useClipboard
+} from "./chunk-NFQP7P3D.js";
+import {
+  lineClamp
+} from "./chunk-AV62WHL7.js";
+import {
+  Icon
+} from "./chunk-OFZVJPBJ.js";
+import {
+  applyTypography
+} from "./chunk-XTOBN7SG.js";
+import {
+  elide
+} from "./chunk-EDN2QDCB.js";
+import {
+  getLineHeightNumberForTypographyType
+} from "./chunk-AZSSORPU.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/ClipboardTextField.tsx
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useCallback } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function ClipboardTextField({
+  value,
+  icon,
+  id,
+  stopPropagation,
+  maxLines,
+  elide: elideArgs,
+  wordBreakAll = false,
+  tag = "span",
+  iconSide = "left",
+  iconColor: iconColorProp,
+  typography,
+  clipboardCallbacks
+}) {
+  const theme = useTheme();
+  const { canWriteToClipboard, writeTextToClipboard } = useClipboard(clipboardCallbacks);
+  const addLineClamp = Boolean(maxLines && maxLines > 1);
+  const displayValue = elideArgs ? elide(value, elideArgs) : value;
+  const valueNode = /* @__PURE__ */ jsx(
+    ClipboardTextFieldValue,
+    {
+      wordBreakAll,
+      typography,
+      addLineClamp,
+      maxLines,
+      children: displayValue
+    }
+  );
+  const onClick = useCallback(
+    (event) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+      void writeTextToClipboard(value);
+    },
+    [stopPropagation, value, writeTextToClipboard]
+  );
+  function onKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+      void writeTextToClipboard(value);
+    }
+  }
+  const commonProps = {
+    as: tag,
+    id,
+    addLineClamp,
+    maxLines
+  };
+  const typographyType = (typography == null ? void 0 : typography.type) || "Body";
+  const typographySize = (typography == null ? void 0 : typography.size) || "ExtraSmall";
+  const lineHeight = getLineHeightNumberForTypographyType(
+    typographyType,
+    typographySize,
+    theme
+  );
+  const iconColor = iconColorProp || (typography == null ? void 0 : typography.color) || "inherit";
+  return canWriteToClipboard && value ? /* @__PURE__ */ jsxs(
+    StyledClipboardTextField,
+    __spreadProps(__spreadValues({
+      onClick,
+      role: "button",
+      tabIndex: 0,
+      onKeyDown
+    }, commonProps), {
+      children: [
+        icon && iconSide === "left" ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "Copy",
+            width: lineHeight * 0.7,
+            mr: lineHeight * 0.3,
+            color: iconColor
+          }
+        ) : null,
+        valueNode,
+        icon && iconSide === "right" ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "Copy",
+            width: lineHeight * 0.7,
+            ml: lineHeight * 0.3,
+            color: iconColor
+          }
+        ) : null
+      ]
+    })
+  ) : /* @__PURE__ */ jsx(StyledClipboardTextField, __spreadProps(__spreadValues({}, commonProps), { children: valueNode }));
+}
+var StyledClipboardTextField = styled.span`
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  align-items: center;
+  box-sizing: content-box;
+  cursor: pointer;
+
+  ${({ addLineClamp, maxLines }) => (
+  /* keep the icon on the same line when addLineClamp: */
+  addLineClamp || maxLines === 1 ? "display: inline-flex;" : ""
+)}
+
+  ${({ maxLines }) => maxLines === 1 ? "white-space: nowrap;" : ""}
+`;
+var ClipboardTextFieldValue = styled.span`
+  flex: 1;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  word-break: ${({ wordBreakAll }) => wordBreakAll ? "break-all" : "normal"};
+  vertical-align: middle;
+
+  ${({ addLineClamp, maxLines }) => addLineClamp && maxLines ? `
+        ${lineClamp(maxLines).styles}
+        align-self: baseline;
+      ` : ""}
+
+  ${({ theme, typography }) => applyTypography(
+  theme,
+  (typography == null ? void 0 : typography.type) || "Body",
+  (typography == null ? void 0 : typography.size) || "ExtraSmall",
+  (typography == null ? void 0 : typography.color) || "inherit"
+)}
+`;
+
+export {
+  ClipboardTextField
+};

package/dist/chunk-FDAOZI2M.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/ArrowLeft.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ArrowLeft({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 18 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M16.4744 8.00005L1.52344 8.00005M1.52344 8.00005L7.52344 14.2858M1.52344 8.00005L7.52344 1.71434",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.ArrowLeft = ArrowLeft;

package/dist/chunk-FHSUCKWT.js

@@ -0,0 +1,43 @@
+// src/icons/FramedLetterI.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function FramedLetterI({
+  strokeWidth = "1",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 13 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9.8999 1.5H2.8999C2.34762 1.5 1.8999 1.94772 1.8999 2.5V9.5C1.8999 10.0523 2.34762 10.5 2.8999 10.5H9.8999C10.4522 10.5 10.8999 10.0523 10.8999 9.5V2.5C10.8999 1.94772 10.4522 1.5 9.8999 1.5Z",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6.3999 4V8",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  FramedLetterI
+};

package/dist/chunk-FKTI5NUC.js

@@ -0,0 +1,23 @@
+// src/components/typography/typographyStyles.tsx
+import { css } from "@emotion/react";
+var typographyStyles = ({
+  /* theme, size, colorProp, */
+  block: blockProp,
+  hideOverflow,
+  displayProp,
+  textAlign
+}) => {
+  const displayValue = blockProp || hideOverflow ? "block" : displayProp || null;
+  return css`
+    /* Margins should always be set in parent style contexts eg Article: */
+    margin: 0;
+
+    ${textAlign ? `text-align: ${textAlign};` : ""}
+    ${displayValue ? `display: ${displayValue};` : ""}
+    ${hideOverflow ? "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" : ""}
+  `;
+};
+
+export {
+  typographyStyles
+};

package/dist/chunk-FM64WRDF.js

@@ -0,0 +1,29 @@
+// src/icons/Globus.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Globus({
+  strokeWidth = "2",
+  strokeLinecap = "square"
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M21 12C21 16.9706 16.9706 21 12 21M21 12C21 7.02944 16.9706 3 12 3M21 12H3M12 21C7.02944 21 3 16.9706 3 12M12 21C9.79086 21 8 16.9706 8 12C8 7.02944 9.79086 3 12 3M12 21C14.2091 21 16 16.9706 16 12C16 7.02944 14.2091 3 12 3M12 3C7.02944 3 3 7.02944 3 12",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap
+        }
+      )
+    }
+  );
+}
+
+export {
+  Globus
+};

package/dist/chunk-FOM2WDPQ.cjs

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Remove.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Remove({
+  strokeWidth = "1.5",
+  strokeLinecap = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 17 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M11.0203 5.72973L6.47973 10.2703M11.0203 10.2703L6.47973 5.72973M15.75 8C15.75 11.866 12.616 15 8.75 15C4.88401 15 1.75 11.866 1.75 8C1.75 4.13401 4.88401 1 8.75 1C12.616 1 15.75 4.13401 15.75 8Z",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.Remove = Remove;

package/dist/chunk-FR73DFNG.cjs

@@ -0,0 +1,58 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkOM4IBALUcjs = require('./chunk-OM4IBALU.cjs');
+
+
+var _chunkM355VGZ3cjs = require('./chunk-M355VGZ3.cjs');
+
+
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
+// src/components/QRReader/QRReader.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function QRReader({
+  videoContainerStyle = {},
+  containerStyle = {},
+  videoStyle = {},
+  constraints,
+  scanDelay,
+  className,
+  onResult,
+  videoId
+}) {
+  _chunkM355VGZ3cjs.useQRReader.call(void 0, {
+    constraints,
+    scanDelay,
+    onResult,
+    videoId
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "section", { className, style: containerStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      style: _chunkYM5JDZDQcjs.__spreadValues.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, _chunkOM4IBALUcjs.styles.container), videoContainerStyle),
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "video",
+        {
+          muted: true,
+          id: videoId,
+          style: _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, _chunkOM4IBALUcjs.styles.video), videoStyle), {
+            transform: (constraints == null ? void 0 : constraints.facingMode) === "user" ? "scaleX(-1)" : void 0
+          })
+        }
+      )
+    }
+  ) });
+}
+QRReader.displayName = "QRReader";
+QRReader.defaultProps = {
+  constraints: {
+    facingMode: "user"
+  },
+  videoId: "video",
+  scanDelay: 500
+};
+
+
+
+exports.QRReader = QRReader;

package/dist/chunk-FTTZSNVV.cjs

@@ -0,0 +1,163 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkSP3BMGMUcjs = require('./chunk-SP3BMGMU.cjs');
+
+
+var _chunkGMVP3EYXcjs = require('./chunk-GMVP3EYX.cjs');
+
+
+var _chunkAIJ4JHXBcjs = require('./chunk-AIJ4JHXB.cjs');
+
+
+var _chunkRROZ5XYPcjs = require('./chunk-RROZ5XYP.cjs');
+
+
+var _chunkJBCEOOZScjs = require('./chunk-JBCEOOZS.cjs');
+
+// src/components/Pill.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _react = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Pill({
+  text,
+  onDeleteMouseDown,
+  onDeleteMouseUp,
+  onDeleteFromKeyboard,
+  icon,
+  loading = false,
+  cursor = "text",
+  isEditing = false,
+  onChangeTextInput = () => {
+  },
+  onFocusTextInput = () => {
+  },
+  onClickPillBody = () => {
+  },
+  onBlurTextInput = () => {
+  }
+}) {
+  const textInputRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (isEditing && textInputRef.current) {
+      textInputRef.current.focus();
+    }
+  }, [isEditing]);
+  function handleOnDeleteMouseDown(event) {
+    if (onDeleteMouseDown) {
+      event.stopPropagation();
+      onDeleteMouseDown(event);
+    }
+  }
+  function handleOnDeleteKeyDown(event) {
+    if (onDeleteFromKeyboard) {
+      event.stopPropagation();
+      if (event.key === "Enter") {
+        onDeleteFromKeyboard();
+      }
+    }
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    StyledPill,
+    {
+      hasIcon: Boolean(icon || loading || onDeleteMouseDown),
+      cursor,
+      onClick: (event) => {
+        if (onClickPillBody) {
+          event.stopPropagation();
+          onClickPillBody();
+        }
+      },
+      children: [
+        isEditing ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          PillInput,
+          {
+            value: text,
+            onChange: (event) => onChangeTextInput(event.target.value),
+            onFocus: onFocusTextInput,
+            onBlur: onBlurTextInput,
+            ref: textInputRef
+          }
+        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PillText, { children: text }),
+        (icon || loading || onDeleteMouseDown) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          PillIconContainer,
+          {
+            hasIconInset: Boolean(icon && !loading && !onDeleteMouseDown),
+            children: [
+              loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSP3BMGMUcjs.Loading, { size: 16.1, center: false, ml: 5 }),
+              !loading && onDeleteMouseDown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkGMVP3EYXcjs.UnstyledButton,
+                {
+                  onMouseDown: handleOnDeleteMouseDown,
+                  onKeyDown: handleOnDeleteKeyDown,
+                  type: "button",
+                  css: {
+                    display: "flex",
+                    padding: "10px",
+                    marginRight: "-10px"
+                  },
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: "DeleteIcon", width: 16.1 })
+                }
+              ),
+              !loading && icon && !onDeleteMouseDown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: icon, width: 16.1, color: "white" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var PillText = _styled2.default.div`
+  /* For mobile ensure empty values don't prevent div from having height: */
+  height: 1.2rem;
+  min-width: 100px;
+  max-width: 210px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 600;
+`;
+var StyledPill = _styled2.default.div`
+  * + & {
+    margin-top: 16px;
+  }
+  background-color: ${({ theme }) => theme.c05Neutral};
+  color: ${({ theme }) => theme.text};
+  padding: 12px 18px;
+  ${({ hasIcon }) => hasIcon && `padding-right: 48px;`}
+  border-radius: 2em;
+  display: flex;
+  align-items: center;
+  cursor: ${({ cursor }) => cursor};
+  position: relative;
+`;
+var PillIconContainer = _styled2.default.div`
+  ${_chunkAIJ4JHXBcjs.flexCenter}
+  ${({ hasIconInset }) => hasIconInset ? `
+    background-color: ${_chunkJBCEOOZScjs.colors.blue43};
+    padding: 8px;
+    right: 4px;
+    top: 3.5px;` : `right: 18px;`}
+  border-radius: 50%;
+  margin-left: 12px;
+  position: absolute;
+`;
+var PillInput = _styled2.default.input`
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: ${({ theme }) => theme.text};
+  font-weight: 600;
+  font-size: 1rem;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-width: 210px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-family: ${({ theme }) => theme.typography.fontFamilies.main};
+`;
+
+
+
+exports.Pill = Pill;

package/dist/chunk-FU4P3SS6.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Sidebar.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Sidebar({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M5 1H13C14.1046 1 15 1.89543 15 3V8M5 1H3.1875H3C1.89543 1 1 1.89543 1 3V13C1 14.1046 1.89543 15 3 15H5M5 1V5V8M5 15H13C14.1046 15 15 14.1046 15 13V8M5 15V8M5 8H15",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.Sidebar = Sidebar;

package/dist/chunk-FYOO7WC6.cjs

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

package/dist/chunk-FZUV52PP.js

@@ -0,0 +1,47 @@
+// src/utils/toReactNodes/nodes.tsx
+import { isObject } from "lodash-es";
+function isLinkNode(node) {
+  return Boolean(node && isObject(node) && "link" in node);
+}
+function isNextLinkNode(node) {
+  return Boolean(node && isObject(node) && "nextLink" in node);
+}
+function isIconNode(node) {
+  return Boolean(node && isObject(node) && "icon" in node);
+}
+function isCurrencyAmountNode(node) {
+  return Boolean(node && isObject(node) && "currencyAmount" in node);
+}
+function isClipboardTextFieldNode(node) {
+  return Boolean(node && isObject(node) && "clipboardTextField" in node);
+}
+function isTextNode(node) {
+  const allowedKeys = ["text", "onClick", "typography"];
+  return Boolean(
+    /* Exclude other nodes by ensuring only text node properties: */
+    node && isObject(node) && /* text is required: */
+    "text" in node && /* ensure the rest of the keys are allowed: */
+    Object.keys(node).every((key) => allowedKeys.includes(key))
+  );
+}
+var link = (link2) => ({ link: link2 });
+var nextLink = (nextLink2) => ({
+  nextLink: nextLink2
+});
+var currencyAmount = (currencyAmount2) => ({ currencyAmount: currencyAmount2 });
+var icon = (icon2) => ({ icon: icon2 });
+var clipboardTextField = (clipboardTextField2) => ({ clipboardTextField: clipboardTextField2 });
+
+export {
+  isLinkNode,
+  isNextLinkNode,
+  isIconNode,
+  isCurrencyAmountNode,
+  isClipboardTextFieldNode,
+  isTextNode,
+  link,
+  nextLink,
+  currencyAmount,
+  icon,
+  clipboardTextField
+};

package/dist/chunk-G3CGGNAN.js

@@ -0,0 +1,50 @@
+// src/icons/SecurityKey.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function SecurityKey({ strokeWidth = "1.125" }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 12 13",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "0.5625",
+            y: "3.3125",
+            width: "8.25",
+            height: "6.375",
+            rx: "0.9375",
+            stroke: "currentColor",
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8.8125 4.8125H10.5C11.0178 4.8125 11.4375 5.23223 11.4375 5.75V7.25C11.4375 7.76777 11.0178 8.1875 10.5 8.1875H8.8125V4.8125Z",
+            stroke: "currentColor",
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "3.75",
+            y: "5.75",
+            width: "2.25",
+            height: "1.5",
+            rx: "0.75",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  SecurityKey
+};