@lightsparkdev/ui 1.0.17 → 1.1.1

package/dist/chunk-4HUUCNLQ.cjs

@@ -0,0 +1,63 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+
+// src/styles/themeDefaults/cardForm.tsx
+var cardFormThemeBaseProps = {
+  paddingX: 56,
+  paddingTop: 56,
+  paddingBottom: 56,
+  shadow: "soft",
+  borderRadius: 24,
+  borderWidth: 0,
+  borderColor: "vlcNeutral",
+  textAlign: "left",
+  backgroundColor: "bg",
+  smBackgroundColor: "bg",
+  smBorderWidth: 0,
+  defaultDescriptionTypographyMap: {
+    default: {
+      type: "Body Strong",
+      size: "Small",
+      color: "mcNeutral"
+    },
+    link: {
+      type: "Body Strong",
+      size: "Small",
+      color: "text"
+    }
+  }
+};
+var cardFormThemeBase = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, cardFormThemeBaseProps), {
+  kinds: {
+    primary: {},
+    secondary: {},
+    tertiary: {}
+  }
+});
+var defaultCardFormTheme = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, cardFormThemeBaseProps), {
+  kinds: {
+    primary: {},
+    secondary: {
+      paddingTop: 40,
+      paddingBottom: 40,
+      paddingX: 40,
+      shadow: "none",
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: "vlcNeutral"
+    },
+    tertiary: {
+      paddingTop: 56,
+      paddingBottom: 56,
+      paddingX: 40,
+      shadow: "hard"
+    }
+  }
+});
+
+
+
+
+exports.cardFormThemeBase = cardFormThemeBase; exports.defaultCardFormTheme = defaultCardFormTheme;

package/dist/chunk-4IFDR4TO.cjs

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/CheckmarkGreen.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function CheckmarkGreen({
+  strokeWidth = "4",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 49 49",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          id: "Vector",
+          d: "M6 30.6876L18.5 41L43 8",
+          stroke: "#559057",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.CheckmarkGreen = CheckmarkGreen;

package/dist/chunk-4KGDYJKA.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/central/ChevronRightXs.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ChevronRightXs({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M10 16L13.6464 12.3536C13.8417 12.1583 13.8417 11.8417 13.6464 11.6464L10 8",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.ChevronRightXs = ChevronRightXs;

package/dist/chunk-4LGS7DX5.js

@@ -0,0 +1,327 @@
+import {
+  SingleCodeInput
+} from "./chunk-XW7TPKTP.js";
+import {
+  textInputBorderColor
+} from "./chunk-UH2H3Y7Y.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-W7FAWX6T.js";
+
+// src/components/CodeInput/CodeInput.tsx
+import styled from "@emotion/styled";
+import { isNumber } from "lodash-es";
+import { nanoid } from "nanoid";
+import { createRef, useCallback, useRef, useState } from "react";
+import { isChrome, isMobile, isMobileSafari } from "react-device-detect";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function codeFromInputState(inputState) {
+  return Object.values(inputState).map((input) => input.value).join("");
+}
+function getRef(key, refsObj) {
+  if (key && refsObj && typeof refsObj === "object" && refsObj.current) {
+    const ref = refsObj.current[key];
+    if (ref && typeof ref === "object" && ref.current && ref.current instanceof HTMLInputElement) {
+      return ref.current;
+    }
+  }
+  return null;
+}
+function CodeInput({
+  codeLength = 8,
+  onChange,
+  onSubmit,
+  inputCSS,
+  autoFocus = true,
+  onBlur
+}) {
+  const componentId = useRef(nanoid(5));
+  const inputRefs = useRef({});
+  const autofillValuesRef = useRef("");
+  const getInputId = useCallback((index) => {
+    const idPrefix = `two-factor-input-${componentId.current}-`;
+    return `${idPrefix}-${index}`;
+  }, []);
+  function getInputIndex(id) {
+    return Number.parseInt(id.charAt(id.length - 1), 10);
+  }
+  const firstFieldRefCb = useCallback(
+    (ref) => {
+      if (ref) {
+        inputRefs.current[ref.id] = createRef();
+        inputRefs.current[ref.id].current = ref;
+        if (ref.id === getInputId(0) && autoFocus) {
+          ref.focus();
+        }
+      }
+    },
+    [getInputId, autoFocus]
+  );
+  const [inputState, setInputState] = useState(
+    Array(codeLength).fill(0).reduce((acc, _, i) => {
+      return __spreadProps(__spreadValues({}, acc), {
+        [getInputId(i)]: {
+          value: ""
+        }
+      });
+    }, {})
+  );
+  const onKeyDown = useCallback(
+    (event, inputId) => {
+      const handleKeys = /* @__PURE__ */ new Set([
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "Enter",
+        "Escape",
+        "Backspace",
+        "Delete",
+        "ArrowLeft",
+        "ArrowRight"
+      ]);
+      if (["e", "E", "+", "-", "."].includes(event.key)) {
+        event.preventDefault();
+        return;
+      }
+      if (!handleKeys.has(event.key)) {
+        return;
+      }
+      let replaceEntireState = false;
+      const currentInputIndex = getInputIndex(inputId);
+      const isFirstInput = currentInputIndex === 0;
+      const isLastInput = currentInputIndex === codeLength - 1;
+      const nextInputIndex = isLastInput ? void 0 : currentInputIndex + 1;
+      const prevInputIndex = isFirstInput ? void 0 : currentInputIndex - 1;
+      const nextInputId = isNumber(nextInputIndex) ? getInputId(nextInputIndex) : void 0;
+      const prevInputId = isNumber(prevInputIndex) ? getInputId(prevInputIndex) : void 0;
+      const nextInput = nextInputId ? inputState[nextInputId] : void 0;
+      const prevInput = prevInputId ? inputState[prevInputId] : void 0;
+      const currentInputRef = getRef(inputId, inputRefs);
+      const nextInputRef = getRef(nextInputId, inputRefs);
+      const prevInputRef = getRef(prevInputId, inputRefs);
+      const firstInputRef = getRef(getInputId(0), inputRefs);
+      const lastInputRef = getRef(getInputId(codeLength - 1), inputRefs);
+      if (event.key === "ArrowLeft") {
+        if (firstInputRef && (event.metaKey || event.ctrlKey || event.altKey)) {
+          firstInputRef.focus();
+          return;
+        }
+        if (prevInput && prevInputRef) {
+          prevInputRef.focus();
+          prevInputRef.select();
+        }
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        if (lastInputRef && (event.metaKey || event.ctrlKey || event.altKey)) {
+          lastInputRef.focus();
+          return;
+        }
+        if (nextInput && nextInputRef) {
+          nextInputRef.focus();
+          nextInputRef.select();
+        }
+        return;
+      }
+      if (event.key === "Enter" && onSubmit) {
+        const code2 = codeFromInputState(inputState);
+        onSubmit(code2);
+        return;
+      }
+      if (event.key === "Escape" && currentInputRef) {
+        currentInputRef.blur();
+        return;
+      }
+      if (event.key === "Backspace" && (event.metaKey || event.ctrlKey || event.altKey)) {
+        replaceEntireState = __spreadValues({}, inputState);
+        Object.keys(replaceEntireState).forEach((inputId2) => {
+          const newState2 = replaceEntireState;
+          newState2[inputId2] = __spreadProps(__spreadValues({}, newState2[inputId2]), {
+            value: ""
+          });
+        });
+      }
+      let value = event.key;
+      if (event.key === "Backspace" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+        value = "";
+        if (!isFirstInput && prevInput && prevInputRef) {
+          prevInputRef.focus();
+        }
+      } else if (event.key === "Delete") {
+        value = "";
+        if (!isLastInput && nextInput && nextInputRef) {
+          nextInputRef.focus();
+        }
+      } else if (replaceEntireState) {
+        const lastInputWithValue = Object.entries(replaceEntireState).reverse().find(([, { value: value2 }]) => value2 !== "");
+        if (lastInputWithValue) {
+          const inputId2 = lastInputWithValue[0];
+          const inputRef = getRef(inputId2, inputRefs);
+          inputRef == null ? void 0 : inputRef.focus();
+          inputRef == null ? void 0 : inputRef.select();
+        } else if (firstInputRef) {
+          firstInputRef.focus();
+        }
+      } else if (isLastInput) {
+      } else if (nextInput && nextInputRef) {
+        nextInputRef.focus();
+        nextInputRef.select();
+      }
+      const newState = replaceEntireState ? replaceEntireState : __spreadProps(__spreadValues({}, inputState), {
+        [inputId]: { value }
+      });
+      const code = codeFromInputState(newState);
+      if (onChange) {
+        onChange(code);
+      }
+      setInputState(newState);
+    },
+    [onChange, setInputState, onSubmit, getInputId, inputState, codeLength]
+  );
+  const onPasteCb = useCallback(
+    (event) => {
+      event.preventDefault();
+      const rawText = event.clipboardData.getData("text");
+      const text = rawText == null ? void 0 : rawText.replace(/[\s.]/g, "");
+      if (!text || Number.isNaN(Number.parseInt(text))) {
+        return;
+      }
+      const inputValues = text.split("");
+      const newState = __spreadValues({}, inputState);
+      inputValues.forEach((value, i) => {
+        const inputId = getInputId(i);
+        newState[inputId] = __spreadProps(__spreadValues({}, newState[inputId]), {
+          value
+        });
+      });
+      const firstInputRef = getRef(getInputId(0), inputRefs);
+      const lastInputWithValue = Object.entries(newState).reverse().find(([, { value }]) => value !== "");
+      if (lastInputWithValue) {
+        const inputId = lastInputWithValue[0];
+        const inputRef = getRef(inputId, inputRefs);
+        inputRef == null ? void 0 : inputRef.focus();
+        inputRef == null ? void 0 : inputRef.select();
+      } else if (firstInputRef) {
+        firstInputRef.focus();
+      }
+      const code = codeFromInputState(newState);
+      if (onChange) {
+        onChange(code);
+      }
+      setInputState(newState);
+    },
+    [getInputId, inputState, onChange, setInputState]
+  );
+  const onBlurCb = useCallback(() => {
+    setTimeout(() => {
+      let hasCodeFocused = false;
+      if (inputRefs.current) {
+        Object.values(inputRefs.current).forEach((ref) => {
+          if (ref && ref.current && ref.current === document.activeElement) {
+            hasCodeFocused = true;
+          }
+        });
+        if (!hasCodeFocused && onBlur) {
+          onBlur();
+        }
+      }
+    }, 0);
+  }, [onBlur]);
+  const inputsPerGroup = Math.ceil(codeLength / 2);
+  const inputs = [];
+  for (let i = 0; i < codeLength; i += 1) {
+    const inputId = getInputId(i);
+    inputs.push(
+      /* @__PURE__ */ jsx(
+        SingleCodeInput,
+        {
+          value: inputState[inputId].value,
+          id: inputId,
+          inputRef: firstFieldRefCb,
+          onPaste: onPasteCb,
+          onKeyDown: (event) => onKeyDown(event, inputId),
+          onChange: (event) => {
+            if (isMobileSafari && event.nativeEvent instanceof CustomEvent) {
+              autofillValuesRef.current += event.target.value;
+              if (autofillValuesRef.current.length === codeLength) {
+                const newState = Array(codeLength).fill(0).reduce((acc, _, i2) => {
+                  return __spreadProps(__spreadValues({}, acc), {
+                    [getInputId(i2)]: {
+                      value: autofillValuesRef.current[i2]
+                    }
+                  });
+                }, {});
+                setInputState(newState);
+                if (onSubmit) {
+                  onSubmit(autofillValuesRef.current);
+                }
+                autofillValuesRef.current = "";
+              }
+            } else if (isMobile && isChrome && event.target.value.length === codeLength) {
+              const newState = Array(codeLength).fill(0).reduce((acc, _, i2) => {
+                return __spreadProps(__spreadValues({}, acc), {
+                  [getInputId(i2)]: {
+                    value: event.target.value[i2]
+                  }
+                });
+              }, {});
+              setInputState(newState);
+              if (onSubmit) {
+                onSubmit(event.target.value);
+              }
+            }
+          },
+          type: "number",
+          ariaLabel: `Code input ${i + 1} of ${codeLength}`,
+          cssProp: inputCSS,
+          onBlur: onBlurCb,
+          width: `${(100 / inputsPerGroup).toFixed(2)}%`,
+          max: 9
+        },
+        inputId
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxs(StyledCodeInput, { children: [
+    /* @__PURE__ */ jsx(CodeInputGroup, { children: inputs.slice(0, inputsPerGroup) }),
+    /* @__PURE__ */ jsx(CodeInputGroupSeparator, {}),
+    /* @__PURE__ */ jsx(CodeInputGroup, { children: inputs.slice(inputsPerGroup, inputs.length) })
+  ] });
+}
+var StyledCodeInput = styled.div`
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+`;
+var separatorWidth = 12;
+var separatorMargin = 8;
+var CodeInputGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  width: calc(50% - ${(separatorWidth + separatorMargin * 2) / 2}px);
+`;
+var CodeInputGroupSeparator = styled.div`
+  width: ${separatorWidth}px;
+  height: 4px;
+  background-color: ${textInputBorderColor};
+  border-radius: 2px;
+  margin: 0 ${separatorMargin}px;
+`;
+
+export {
+  CodeInput,
+  StyledCodeInput
+};

package/dist/chunk-4MMW2VJI.js

@@ -0,0 +1,20 @@
+import {
+  GlobalStyles
+} from "./chunk-5257236A.js";
+import {
+  themes
+} from "./chunk-33OPRYWV.js";
+
+// src/components/LightsparkProvider.tsx
+import { ThemeProvider } from "@emotion/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function LightsparkProvider({ children }) {
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: themes.light, children: [
+    /* @__PURE__ */ jsx(GlobalStyles, {}),
+    children
+  ] });
+}
+
+export {
+  LightsparkProvider
+};

package/dist/chunk-4N5EXQIS.cjs

@@ -0,0 +1,123 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkEIK6IX56cjs = require('./chunk-EIK6IX56.cjs');
+
+
+
+var _chunkKS6GHRZIcjs = require('./chunk-KS6GHRZI.cjs');
+
+
+var _chunkU35SY546cjs = require('./chunk-U35SY546.cjs');
+
+
+var _chunkJA7KZV3Qcjs = require('./chunk-JA7KZV3Q.cjs');
+
+
+var _chunkXUEKQQJVcjs = require('./chunk-XUEKQQJV.cjs');
+
+// src/components/Icon/Icon.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Icon({
+  className,
+  name,
+  width,
+  square = false,
+  tutorialStep,
+  id,
+  mr: mrProp = 0,
+  ml: mlProp = 0,
+  mt: mtProp = 0,
+  mb: mbProp = 0,
+  color = void 0,
+  verticalAlign = "middle",
+  iconProps
+}) {
+  const IconComponent = _chunkEIK6IX56cjs.iconMap[name];
+  const w = parseFloat((width / _chunkU35SY546cjs.rootFontSizePx).toFixed(2));
+  const h = square ? w : "auto";
+  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / _chunkU35SY546cjs.rootFontSizePx).toFixed(2))}em` : mrProp;
+  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / _chunkU35SY546cjs.rootFontSizePx).toFixed(2))}em` : mlProp;
+  const mt = typeof mtProp === "number" ? `${parseFloat((mtProp / _chunkU35SY546cjs.rootFontSizePx).toFixed(2))}em` : mtProp;
+  const mb = typeof mbProp === "number" ? `${parseFloat((mbProp / _chunkU35SY546cjs.rootFontSizePx).toFixed(2))}em` : mbProp;
+  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / _chunkU35SY546cjs.rootFontSizePx).toFixed(2));
+  const icon = _react2.default.createElement(IconComponent, iconProps, null);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    IconContainer,
+    {
+      id,
+      className,
+      w,
+      h,
+      square,
+      mr,
+      ml,
+      mt,
+      mb,
+      verticalAlign: va,
+      fontColor: color,
+      "data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
+      children: icon
+    }
+  );
+}
+var IconContainer = _styled2.default.span`
+  pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  ${({ mr, ml, mt, mb, w, h }) => `
+    width: ${w}em;
+    height: ${typeof h === "number" ? `${h}em` : h};
+    /* ensure no shrink in flex containers: */
+    min-width: ${w}em;
+    ${mr ? `margin-right: ${mr};` : ""}
+    ${ml ? `margin-left: ${ml};` : ""}
+    ${mt ? `margin-top: ${mt};` : ""}
+    ${mb ? `margin-bottom: ${mb};` : ""}
+  `}
+
+  vertical-align: ${({ verticalAlign }) => _chunkJA7KZV3Qcjs.isString.call(void 0, verticalAlign) ? verticalAlign : `${verticalAlign}em`};
+
+  ${({ square }) => {
+  return square ? `
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    ` : "";
+}}
+
+  ${({ theme, fontColor }) => {
+  const color = _chunkXUEKQQJVcjs.getFontColor.call(void 0, theme, fontColor, "inherit");
+  return `
+    svg, path {
+      color: ${_chunkXUEKQQJVcjs.getFontColor.call(void 0, theme, fontColor, "inherit")};
+
+      /* 
+        Provide a way for an SVG to invert relative to a specified color for
+        dark mode support. Ideally we would just use filters, which works in
+        Chrome even if the color is not specified, but doesn't work at all for
+        SVG paths in Safari:
+        filter: invert(100%); -webkit-filter: invert(100%);
+
+        Instead we'll need a class for fills and a class for strokes. Icons
+        that need inverted colors should use these classes on their paths.
+      */
+
+      .${_chunkKS6GHRZIcjs.invertFillColor} {
+        fill: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
+      }
+      .${_chunkKS6GHRZIcjs.invertStrokeColor} {
+        stroke: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
+      }
+    }
+  `;
+}}
+`;
+
+
+
+
+exports.Icon = Icon; exports.IconContainer = IconContainer;

package/dist/chunk-4NE7A6PJ.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/central/Bank.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Bank({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M20.2297 8.83298V17.6817M15.6892 17.6817V8.83298M3.77027 8.83298V17.6817M8.31081 17.6817V8.83298M20.5467 17.6817H3.4533C2.9647 17.6817 2.53092 17.9863 2.37642 18.4381L1.99803 19.5442C1.75302 20.2604 2.30012 21 3.07492 21H20.9251C21.6998 21 22.247 20.2604 22.002 19.5442L21.6236 18.4381C21.4691 17.9863 21.0353 17.6817 20.5467 17.6817ZM21.3649 8.83298H2.63514C2.00822 8.83298 1.5 8.33776 1.5 7.72689V7.21615C1.5 6.79885 1.74102 6.41707 2.12328 6.22889L11.4882 1.61883C11.81 1.46039 12.19 1.46039 12.5118 1.61883L21.8767 6.22889C22.259 6.41707 22.5 6.79885 22.5 7.21615V7.72689C22.5 8.33776 21.9918 8.83298 21.3649 8.83298Z",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.Bank = Bank;

package/dist/chunk-4S2OUM3H.js

@@ -0,0 +1,44 @@
+import {
+  getPropDefaultsBase
+} from "./chunk-LEMT5P3Z.js";
+import {
+  typographyStyles
+} from "./chunk-YW4BJCOL.js";
+import {
+  select
+} from "./chunk-YMNSXZ5D.js";
+import {
+  applyTypography
+} from "./chunk-J44WQFQT.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-W7FAWX6T.js";
+
+// src/components/typography/base/Display.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var displayElements = ["h1", "h2", "h3", "h4", "h5", "h6"];
+function DisplayString(props) {
+  const _a = getPropDefaults(props), { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx(StyledDisplay, __spreadProps(__spreadValues({}, rest), { children }));
+}
+function getPropDefaults(props) {
+  return getPropDefaultsBase(props, { as: props.tag || "h1" });
+}
+var StyledDisplay = styled.h1`
+  ${({ theme, size, colorProp }) => applyTypography(theme, "Display", size, colorProp)}
+  ${typographyStyles}
+`;
+function displaySelector(element) {
+  return `${element}${select(StyledDisplay)}`;
+}
+
+export {
+  displayElements,
+  DisplayString,
+  getPropDefaults,
+  StyledDisplay,
+  displaySelector
+};