@lightsparkdev/ui 1.0.17 → 1.1.1

package/dist/chunk-355DFDX6.cjs

@@ -0,0 +1,327 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkJIUGPX3Acjs = require('./chunk-JIUGPX3A.cjs');
+
+
+var _chunk6N7XRYZDcjs = require('./chunk-6N7XRYZD.cjs');
+
+
+
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+
+// src/components/CodeInput/CodeInput.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _lodashes = require('lodash-es');
+var _nanoid = require('nanoid');
+var _react = require('react');
+var _reactdevicedetect = require('react-device-detect');
+var _jsxruntime = require('@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 = _react.useRef.call(void 0, _nanoid.nanoid.call(void 0, 5));
+  const inputRefs = _react.useRef.call(void 0, {});
+  const autofillValuesRef = _react.useRef.call(void 0, "");
+  const getInputId = _react.useCallback.call(void 0, (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 = _react.useCallback.call(void 0, 
+    (ref) => {
+      if (ref) {
+        inputRefs.current[ref.id] = _react.createRef.call(void 0, );
+        inputRefs.current[ref.id].current = ref;
+        if (ref.id === getInputId(0) && autoFocus) {
+          ref.focus();
+        }
+      }
+    },
+    [getInputId, autoFocus]
+  );
+  const [inputState, setInputState] = _react.useState.call(void 0, 
+    Array(codeLength).fill(0).reduce((acc, _, i) => {
+      return _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, acc), {
+        [getInputId(i)]: {
+          value: ""
+        }
+      });
+    }, {})
+  );
+  const onKeyDown = _react.useCallback.call(void 0, 
+    (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 = _lodashes.isNumber.call(void 0, nextInputIndex) ? getInputId(nextInputIndex) : void 0;
+      const prevInputId = _lodashes.isNumber.call(void 0, 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 = _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, inputState);
+        Object.keys(replaceEntireState).forEach((inputId2) => {
+          const newState2 = replaceEntireState;
+          newState2[inputId2] = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, 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 : _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, inputState), {
+        [inputId]: { value }
+      });
+      const code = codeFromInputState(newState);
+      if (onChange) {
+        onChange(code);
+      }
+      setInputState(newState);
+    },
+    [onChange, setInputState, onSubmit, getInputId, inputState, codeLength]
+  );
+  const onPasteCb = _react.useCallback.call(void 0, 
+    (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 = _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, inputState);
+      inputValues.forEach((value, i) => {
+        const inputId = getInputId(i);
+        newState[inputId] = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, 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 = _react.useCallback.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkJIUGPX3Acjs.SingleCodeInput,
+        {
+          value: inputState[inputId].value,
+          id: inputId,
+          inputRef: firstFieldRefCb,
+          onPaste: onPasteCb,
+          onKeyDown: (event) => onKeyDown(event, inputId),
+          onChange: (event) => {
+            if (_reactdevicedetect.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 _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, acc), {
+                    [getInputId(i2)]: {
+                      value: autofillValuesRef.current[i2]
+                    }
+                  });
+                }, {});
+                setInputState(newState);
+                if (onSubmit) {
+                  onSubmit(autofillValuesRef.current);
+                }
+                autofillValuesRef.current = "";
+              }
+            } else if (_reactdevicedetect.isMobile && _reactdevicedetect.isChrome && event.target.value.length === codeLength) {
+              const newState = Array(codeLength).fill(0).reduce((acc, _, i2) => {
+                return _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, 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__ */ _jsxruntime.jsxs.call(void 0, StyledCodeInput, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeInputGroup, { children: inputs.slice(0, inputsPerGroup) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeInputGroupSeparator, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeInputGroup, { children: inputs.slice(inputsPerGroup, inputs.length) })
+  ] });
+}
+var StyledCodeInput = _styled2.default.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 = _styled2.default.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 = _styled2.default.div`
+  width: ${separatorWidth}px;
+  height: 4px;
+  background-color: ${_chunk6N7XRYZDcjs.textInputBorderColor};
+  border-radius: 2px;
+  margin: 0 ${separatorMargin}px;
+`;
+
+
+
+
+exports.CodeInput = CodeInput; exports.StyledCodeInput = StyledCodeInput;

package/dist/chunk-363DAWKZ.js

@@ -0,0 +1,101 @@
+import {
+  Flex
+} from "./chunk-NPKEAEDV.js";
+import {
+  Icon
+} from "./chunk-YTKSEJHA.js";
+import {
+  Link
+} from "./chunk-PTJ7AVLT.js";
+import {
+  getColor
+} from "./chunk-33OPRYWV.js";
+
+// src/components/IconWithCircleBackground.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function IconWithCircleBackground({
+  iconName = "WarningSign",
+  iconWidth = 40,
+  to,
+  onClick,
+  darkBg = false,
+  shouldRotate = false,
+  noBg = false,
+  disabled = false,
+  bgColor,
+  iconColor,
+  iconStrokeWidth,
+  opaque = false
+}) {
+  const content = /* @__PURE__ */ jsx(
+    Flex,
+    {
+      center: true,
+      onClick,
+      disabled,
+      as: onClick ? "button" : "div",
+      asButtonType: "button",
+      children: /* @__PURE__ */ jsx(
+        StyledIconWithCircleBackground,
+        {
+          size: iconWidth,
+          darkBg,
+          shouldRotate,
+          noBg,
+          bgColor,
+          children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: iconName,
+              width: iconWidth,
+              color: iconColor ? iconColor : darkBg ? "white" : "grayBlue9",
+              iconProps: {
+                strokeWidth: iconStrokeWidth,
+                fill: opaque ? "currentColor" : "none"
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+  return to ? /* @__PURE__ */ jsx("div", { css: { cursor: disabled ? "not-allowed" : void 0 }, children: /* @__PURE__ */ jsx(Link, { to, disabled, children: content }) }) : content;
+}
+var StyledIconWithCircleBackground = styled.div`
+  background: ${({ theme, darkBg, noBg, bgColor }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : noBg ? "transparent" : bgColor ? getColor(theme, bgColor) : getColor(theme, "grayBlue94")};
+  border-radius: 50%;
+  padding: ${({ size }) => getPadding(size)}px;
+  display: flex;
+  justify-content: center;
+  ${({ size }) => `width: ${size + getPadding(size) * 2}px; height: ${size + getPadding(size) * 2}px;`}
+
+  @keyframes IconWithCircleBackgroundRotate {
+    0% {
+      transform: rotate(0);
+    }
+    35% {
+      transform: rotate(360deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  ${({ shouldRotate }) => shouldRotate && `animation: IconWithCircleBackgroundRotate 10s ease infinite;`}
+`;
+function getPadding(size) {
+  if (size === 40) {
+    return 20;
+  }
+  if (size === 36) {
+    return 14;
+  }
+  if (size === 20) {
+    return 10;
+  }
+  return 16;
+}
+
+export {
+  IconWithCircleBackground
+};

package/dist/chunk-3AAQPOUS.cjs

@@ -0,0 +1,72 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk4N5EXQIScjs = require('./chunk-4N5EXQIS.cjs');
+
+
+var _chunkXUEKQQJVcjs = require('./chunk-XUEKQQJV.cjs');
+
+
+
+
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+
+// src/components/MultiToggle.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var _react = require('@emotion/react');
+function MultiToggle({
+  options,
+  selectedOption,
+  onChange,
+  selectedBgColor = "c1Neutral",
+  selectedColor = "hcNeutral",
+  bgColor = "c4Neutral",
+  color = "mcNeutral"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledMultiToggle, { bgColor, children: options.map((_a) => {
+    var _b = _a, { key } = _b, optionProps = _chunkZ6EUSUADcjs.__objRest.call(void 0, _b, ["key"]);
+    let content = null;
+    if ("name" in optionProps) {
+      content = /* @__PURE__ */ _react.createElement.call(void 0, 
+        _chunk4N5EXQIScjs.Icon,
+        _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, optionProps), {
+          width: 11,
+          key,
+          color: key === selectedOption ? selectedColor : color
+        })
+      );
+    } else {
+      content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: { fontSize: "11px", lineHeight: "11px" }, children: optionProps.text });
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      StyledMultiToggleOption,
+      {
+        onClick: () => onChange(key),
+        selected: key === selectedOption,
+        selectedBgColor,
+        selectedColor,
+        colorProp: color,
+        children: content
+      },
+      key
+    );
+  }) });
+}
+var StyledMultiToggle = _styled2.default.div`
+  border-radius: 999px;
+  background: ${({ theme, bgColor }) => _chunkXUEKQQJVcjs.getColor.call(void 0, theme, bgColor)};
+  padding: 2px;
+  gap: 2px;
+  display: flex;
+`;
+var StyledMultiToggleOption = _styled2.default.div`
+  display: flex;
+  cursor: pointer;
+  border-radius: 999px;
+  padding: 4px;
+  background: ${({ theme, selected, selectedBgColor }) => selected ? _chunkXUEKQQJVcjs.getColor.call(void 0, theme, selectedBgColor) : "transparent"};
+`;
+
+
+
+exports.MultiToggle = MultiToggle;

package/dist/chunk-3HIDFTSK.js

@@ -0,0 +1,23 @@
+import {
+  standardFocusOutline
+} from "./chunk-ANZUTQRP.js";
+
+// src/components/UnstyledButton.tsx
+import styled from "@emotion/styled";
+var UnstyledButton = styled.button`
+  ${standardFocusOutline}
+  font-family: ${({ theme }) => theme.typography.fontFamilies.main};
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  /* needed in Safari for some reason */
+  font-size: 1rem;
+  color: inherit;
+  font-weight: inherit;
+`;
+
+export {
+  UnstyledButton
+};

package/dist/chunk-3KRQU3PT.js

@@ -0,0 +1,25 @@
+// src/hooks/useDebounce.tsx
+import { debounce } from "lodash-es";
+import { useEffect, useState } from "react";
+function useDebounce(value, delay = 0, options) {
+  const [current, setCurrent] = useState(value);
+  const jsonOptions = JSON.stringify(options);
+  useEffect(() => {
+    const debounced = debounce(
+      () => {
+        setCurrent(value);
+      },
+      delay,
+      options
+    );
+    debounced();
+    return () => {
+      debounced.cancel();
+    };
+  }, [value, delay, jsonOptions]);
+  return current;
+}
+
+export {
+  useDebounce
+};

package/dist/chunk-3LYNN54X.js

@@ -0,0 +1,32 @@
+// src/icons/central/Loader.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Loader({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.0004 2C12.4146 2.00004 12.7503 2.33585 12.7503 2.75007L12.75 6.25007C12.75 6.66428 12.4141 7.00004 11.9999 7C11.5857 6.99996 11.25 6.66415 11.25 6.24993L11.2503 2.74993C11.2503 2.33572 11.5862 1.99996 12.0004 2ZM4.92919 4.92867C5.22211 4.6358 5.69699 4.63584 5.98985 4.92876L8.46451 7.40385C8.75738 7.69677 8.75734 8.17164 8.46442 8.46451C8.1715 8.75738 7.69663 8.75734 7.40376 8.46442L4.9291 5.98933C4.63623 5.69641 4.63628 5.22154 4.92919 4.92867ZM19.0716 4.92943C19.3645 5.22232 19.3645 5.69719 19.0716 5.99009L16.5967 8.46496C16.3038 8.75785 15.8289 8.75785 15.536 8.46496C15.2431 8.17207 15.2431 7.69719 15.536 7.4043L18.0109 4.92943C18.3038 4.63653 18.7787 4.63653 19.0716 4.92943ZM2 12.0007C2 11.5865 2.33579 11.2507 2.75 11.2507H6.25C6.66421 11.2507 7 11.5865 7 12.0007C7 12.4149 6.66421 12.7507 6.25 12.7507H2.75C2.33579 12.7507 2 12.4149 2 12.0007ZM17 12.0007C17 11.5865 17.3358 11.2507 17.75 11.2507H21.25C21.6642 11.2507 22 11.5865 22 12.0007C22 12.4149 21.6642 12.7507 21.25 12.7507H17.75C17.3358 12.7507 17 12.4149 17 12.0007ZM15.5357 15.5353C15.8286 15.2424 16.3035 15.2424 16.5964 15.5353L19.0713 18.0102C19.3642 18.3031 19.3642 18.778 19.0713 19.0709C18.7784 19.3637 18.3035 19.3637 18.0106 19.0709L15.5357 16.596C15.2429 16.3031 15.2429 15.8282 15.5357 15.5353ZM8.46496 15.536C8.75785 15.8289 8.75785 16.3038 8.46496 16.5967L5.99009 19.0716C5.69719 19.3645 5.22232 19.3645 4.92943 19.0716C4.63653 18.7787 4.63653 18.3038 4.92943 18.0109L7.4043 15.536C7.69719 15.2431 8.17207 15.2431 8.46496 15.536ZM12.0003 17C12.4145 17 12.7503 17.3358 12.7503 17.75V21.25C12.7503 21.6642 12.4145 22 12.0003 22C11.5861 22 11.2503 21.6642 11.2503 21.25V17.75C11.2503 17.3358 11.5861 17 12.0003 17Z",
+          fill: "currentColor",
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+export {
+  Loader
+};

package/dist/chunk-3N2BVLZJ.js

@@ -0,0 +1,102 @@
+import {
+  Button
+} from "./chunk-2OE2VPDJ.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
+import {
+  overflowAutoWithoutScrollbars
+} from "./chunk-KKGZ47R3.js";
+import {
+  standardContentInset
+} from "./chunk-ANZUTQRP.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,
+  ml
+}) {
+  return /* @__PURE__ */ jsx(
+    StyledButtonRow,
+    {
+      smSticky,
+      headerHeight,
+      bottomBorder,
+      ml,
+      children: /* @__PURE__ */ jsx(StyledButtonRowButton, { className, children: buttons.map(
+        (button, idx) => button === "divider" ? /* @__PURE__ */ jsx(ButtonRowDivider, {}, idx) : /* @__PURE__ */ jsx(Button, __spreadValues({}, button), idx)
+      ) })
+    }
+  );
+}
+var StyledButtonRow = styled.div`
+  max-width: 100%;
+  ${({ ml }) => typeof ml !== "undefined" ? `margin-left: ${ml}px;` : ``}
+  ${({ 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 StyledButtonRowButton = styled.div`
+  ${overflowAutoWithoutScrollbars}
+  background: ${({ theme }) => theme.bg};
+  display: flex;
+  position: relative;
+  z-index: 1;
+  gap: ${Spacing.px.xs};
+
+  & ${ButtonRowDivider} + button,
+  & ${ButtonRowDivider} + a {
+    margin-left: 0;
+  }
+
+  ${bp.sm(`
+    padding: ${standardContentInset.smPx}px;
+  `)}
+`;
+
+export {
+  ButtonRow,
+  StyledButtonRow,
+  StyledButtonRowButton
+};