@lightsparkdev/ui 1.0.17 → 1.1.1

package/dist/chunk-GFFS66UR.js

@@ -1,327 +0,0 @@
-import {
-  SingleCodeInput
-} from "./chunk-3TWHVJOG.js";
-import {
-  textInputBorderColor
-} from "./chunk-GHLNFY6T.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-GGAWK7BG.js

@@ -1,100 +0,0 @@
-import {
-  overflowAutoWithoutScrollbars
-} from "./chunk-MFTEQD6P.js";
-import {
-  Button
-} from "./chunk-CEZHIXNR.js";
-import {
-  standardContentInset
-} from "./chunk-XDL2VYUF.js";
-import {
-  bp
-} from "./chunk-JSGRNWSB.js";
-import {
-  __spreadValues
-} from "./chunk-W7FAWX6T.js";
-
-// src/components/ButtonRow.tsx
-import styled from "@emotion/styled";
-import { jsx } from "@emotion/react/jsx-runtime";
-function ButtonRow({
-  buttons,
-  className,
-  smSticky = true,
-  bottomBorder = true,
-  headerHeight = 0
-}) {
-  return /* @__PURE__ */ jsx(
-    ButtonRowContainer,
-    {
-      smSticky,
-      headerHeight,
-      bottomBorder,
-      children: /* @__PURE__ */ jsx(StyledButtonRow, { className, children: buttons.map(
-        (button, idx) => button === "divider" ? /* @__PURE__ */ jsx(ButtonRowDivider, {}, idx) : /* @__PURE__ */ jsx(Button, __spreadValues({}, button), idx)
-      ) })
-    }
-  );
-}
-var ButtonRowContainer = styled.div`
-  max-width: 100%;
-  ${({ theme }) => bp.sm(`background: ${theme.bg}`)}
-  ${({ headerHeight, smSticky, bottomBorder }) => bp.sm(
-  `
-        ${smSticky ? `
-            display: block;
-            position: sticky;
-            top: ${headerHeight}px;
-            margin-top: 24px;
-            margin-left: -${standardContentInset.smPx}px;
-            width: calc(100% + ${standardContentInset.smPx * 2}px);
-            max-width: calc(100% + ${standardContentInset.smPx * 2}px);
-            z-index: 2;` : `position: relative;`}
-        ${bottomBorder ? `
-            &:before {
-              content: "";
-              box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.09);
-              height: 1px;
-              position: absolute;
-              background: black;
-              bottom: 1px;
-              width: 100%;
-              z-index: 0;
-            }
-          ` : ``}
-        z-index: 2;
-      `
-)}
-`;
-var ButtonRowDivider = styled.div`
-  border-left: 1px #d9d9d9 solid;
-  margin-left: 16px;
-  padding-left: 16px;
-`;
-var StyledButtonRow = styled.div`
-  ${overflowAutoWithoutScrollbars}
-  background: ${({ theme }) => theme.bg};
-  display: flex;
-  position: relative;
-  z-index: 1;
-
-  & button:not(:first-of-type),
-  & a:not(:first-of-type) {
-    margin-left: 8px;
-  }
-
-  & ${ButtonRowDivider} + button,
-  & ${ButtonRowDivider} + a {
-    margin-left: 0;
-  }
-
-  ${bp.sm(`
-    padding: ${standardContentInset.smPx}px;
-  `)}
-`;
-
-export {
-  ButtonRow,
-  ButtonRowContainer,
-  StyledButtonRow
-};

package/dist/chunk-GHLNFY6T.js

@@ -1,274 +0,0 @@
-import {
-  z
-} from "./chunk-55OQPFLF.js";
-import {
-  standardBorderRadius,
-  subtext
-} from "./chunk-XDL2VYUF.js";
-import {
-  applyTypography
-} from "./chunk-TK5AT24W.js";
-import {
-  getColor,
-  themeOr
-} from "./chunk-DJOYSOXT.js";
-
-// src/styles/fields.tsx
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { useLayoutEffect, useRef, useState } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
-var maxFieldWidth = "100%";
-var fieldWidth = "100%";
-var inputSpacingPx = 24;
-var formButtonTopMargin = "32px";
-var formButtonTopMarginStyle = css`
-  margin-top: ${formButtonTopMargin};
-`;
-var standardBorderColor = ({ theme }) => css`
-  border-color: ${themeOr(theme.c1Neutral, theme.mcNeutral)({ theme })};
-`;
-var inputBlockStyle = ({
-  theme,
-  hasValue,
-  hasError
-}) => css`
-  ${subtext({ theme })}
-  ${standardBorderColor({ theme })}
-  ${standardBorderRadius(8)}
-  background-color: ${theme.bg};
-  border-width: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  position: relative;
-  cursor: pointer;
-  padding: 52.5px;
-  ${hasError ? `border-style: solid; border-color: ${theme.danger}; border-width: 2px;` : hasValue ? `border-style: solid; border-color: ${theme.info};` : `border-style: dashed;`}
-`;
-var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
-var textInputFontWeight = 600;
-var textInputBorderRadiusPx = 8;
-var textInputPaddingPx = 12;
-var textInputPadding = `${textInputPaddingPx}px`;
-var textInputBorderColor = ({ theme }) => themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
-var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
-var textInputActiveStyles = ({
-  theme,
-  paddingLeftPx,
-  paddingRightPx,
-  activeOutline,
-  activeOutlineColor
-}) => {
-  if (activeOutline) {
-    const outlineColor = activeOutlineColor ? getColor(theme, activeOutlineColor) : textInputBorderColorFocused({ theme });
-    return css`
-      outline: 2px solid ${outlineColor};
-      outline-offset: 2px;
-      caret-color: ${outlineColor};
-    `;
-  }
-  return css`
-    border-color: ${textInputBorderColorFocused({ theme })};
-    border-width: 2px;
-    padding: ${textInputPaddingPx - 1}px;
-    ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
-    ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
-  `;
-};
-var defaultTextInputTypography = {
-  type: "Body",
-  size: "Small",
-  color: "text"
-};
-var textInputStyle = ({
-  theme,
-  active,
-  disabled,
-  hasError,
-  paddingLeftPx,
-  paddingRightPx,
-  paddingTopPx,
-  paddingBottomPx,
-  activeOutline,
-  activeOutlineColor,
-  typography,
-  borderRadius
-}) => {
-  var _a;
-  return css`
-  border-radius: ${borderRadius === "round" ? "999" : textInputBorderRadiusPx}px;
-  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
-  cursor: ${disabled ? "not-allowed" : "auto"};
-  box-sizing: border-box;
-  font-weight: ${textInputFontWeight};
-
-  position: relative;
-  z-index: ${z.textInput};
-  font-family: ${(_a = theme.typography) == null ? void 0 : _a.fontFamilies.main};
-  padding: ${textInputPaddingPx - (hasError ? 1 : 0)}px;
-  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - (hasError ? 1 : 0)}px;` : ""}
-  ${paddingRightPx ? `padding-right: ${paddingRightPx - (hasError ? 1 : 0)}px;` : ""}
-  ${paddingTopPx ? `padding-top: ${paddingTopPx - (hasError ? 1 : 0)}px;` : ""}
-  ${paddingBottomPx ? `padding-bottom: ${paddingBottomPx - (hasError ? 1 : 0)}px;` : ""}
-  border-style: solid;
-  border-width: ${hasError ? "2" : "1"}px;
-  border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
-  line-height: 22px;
-  outline: none;
-
-  ${applyTypography(
-    theme,
-    (typography == null ? void 0 : typography.type) || defaultTextInputTypography.type,
-    (typography == null ? void 0 : typography.size) || defaultTextInputTypography.size,
-    (typography == null ? void 0 : typography.color) || defaultTextInputTypography.color
-  )}
-
-  width: ${fieldWidth};
-  max-width: ${maxFieldWidth};
-  text-overflow: ellipsis;
-  &:focus,
-  &:active,
-  &:has(:focus) {
-    ${textInputActiveStyles({
-    theme,
-    paddingLeftPx,
-    paddingRightPx,
-    activeOutline,
-    activeOutlineColor
-  })}
-  }
-
-  ${active && textInputActiveStyles({
-    theme,
-    paddingLeftPx,
-    paddingRightPx,
-    activeOutline,
-    activeOutlineColor
-  })}
-
-  &::placeholder {
-    color: ${textInputPlaceholderColor({ theme })};
-  }
-
-  &:focus::placeholder {
-    color: ${textInputPlaceholderColor({ theme })};
-  }
-`;
-};
-var FieldError = styled.div`
-  background-color: rgba(242, 239, 255, 1);
-  padding: 16px 16px 8px;
-  margin-top: -8px;
-  border-radius: 0 0 8px 8px;
-  position: relative;
-  z-index: ${z.fieldError};
-`;
-var aboveFieldError = ({
-  theme,
-  hasError
-}) => css`
-  ${hasError ? "border: none !important" : ""};
-  background-color: ${theme.bg};
-  position: relative;
-  z-index: ${z.fieldError + 1};
-  ${hasError && "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);"}
-`;
-var inputSubtextSeconds = 0.25;
-function InputSubtext({
-  text,
-  hasError = false,
-  tooltipId
-}) {
-  const timeoutRef = useRef(null);
-  const [subtext2, setSubtext] = useState(text);
-  const [visible, setVisible] = useState(Boolean(text));
-  useLayoutEffect(() => {
-    if (text) {
-      setSubtext(text);
-      setVisible(true);
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    } else {
-      setVisible(false);
-      timeoutRef.current = setTimeout(() => {
-        setSubtext(void 0);
-      }, inputSubtextSeconds * 1e3);
-    }
-  }, [text]);
-  return /* @__PURE__ */ jsx(
-    StyledInputSubtext,
-    {
-      visible,
-      hasError,
-      cursorPointer: Boolean(tooltipId),
-      children: tooltipId ? /* @__PURE__ */ jsx("span", { "data-tooltip-id": tooltipId, children: subtext2 }) : subtext2
-    }
-  );
-}
-var StyledInputSubtext = styled.div`
-  margin-top: ${({ visible }) => visible ? "8px" : "0px"};
-  margin-left: ${({ visible }) => visible ? "8px" : "0px"};
-  font-size: 12px;
-  font-size: ${({ visible }) => visible ? "12px" : "0px"};
-  opacity: ${({ visible }) => visible ? "1" : "0"};
-  overflow: hidden;
-  transition:
-    font-size ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
-    opacity ${inputSubtextSeconds * 0.8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
-    margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
-  color: ${({ hasError, theme }) => hasError ? theme.danger : theme.text};
-  cursor: ${({ cursorPointer }) => cursorPointer ? "pointer" : "auto"};
-`;
-var labelStyle = ({
-  theme,
-  hasError
-}) => css`
-  color: ${hasError ? theme.danger : theme.text};
-  font-size: 14px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  & + * {
-    margin-top: 12px;
-  }
-  * ~ & {
-    margin-top: 40px;
-  }
-`;
-var Label = styled.label`
-  ${subtext}
-  ${labelStyle}
-`;
-var LabelDiv = styled.div`
-  ${subtext}
-  ${labelStyle}
-`;
-
-export {
-  maxFieldWidth,
-  fieldWidth,
-  inputSpacingPx,
-  formButtonTopMargin,
-  formButtonTopMarginStyle,
-  standardBorderColor,
-  inputBlockStyle,
-  textInputPlaceholderColor,
-  textInputFontWeight,
-  textInputBorderRadiusPx,
-  textInputPaddingPx,
-  textInputPadding,
-  textInputBorderColor,
-  textInputBorderColorFocused,
-  defaultTextInputTypography,
-  textInputStyle,
-  FieldError,
-  aboveFieldError,
-  InputSubtext,
-  StyledInputSubtext,
-  labelStyle,
-  Label,
-  LabelDiv
-};