@lightsparkdev/ui 1.1.0 → 1.1.2

package/dist/chunk-THPYU4LG.js

@@ -0,0 +1,130 @@
+// src/icons/Globe.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Globe({
+  strokeWidth = "0.33",
+  strokeLinecap = "round"
+}) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 213 296", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M131.942 1C131.942 1 1.00484 40.3138 1.00098 148.876C1.00484 256.839 132.045 294.357 132.045 294.357",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M160.942 1C160.942 1 51.2802 40.3138 51.2764 148.876C51.2802 256.839 160.942 294.357 160.942 294.357",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M187.271 1C187.271 1 98.1953 40.3138 98.1914 148.876C98.1953 256.839 187.271 294.357 187.271 294.357",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M213.2 1C213.2 1 144.711 40.3138 144.707 148.876C144.711 256.839 213.2 294.357 213.2 294.357",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M239.136 1C239.136 1 192.024 40.3138 192.021 148.876C192.024 256.839 239.136 294.357 239.136 294.357",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M448.365 1H131.948",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M521.607 39.998H58.8089",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M566.344 93.0469H14.0322",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M579.404 147.68H1.00518",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M579.404 147.676H1.00518",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M588.464 202.3131H13.0322",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M597.524 256.9502H59.8089",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M606.584 294.3873H132.20",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap
+      }
+    )
+  ] });
+}
+
+export {
+  Globe
+};

package/dist/{chunk-KU4X4VPI.js → chunk-TKOYRZ7J.js}

@@ -1,23 +1,30 @@
+import {
+  toReactNodes
+} from "./chunk-E7KQDR6U.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   standardBorderRadius,
   subtext
-} from "./chunk-E46IHC27.js";
+} from "./chunk-HQN2LS2G.js";
 import {
   applyTypography
-} from "./chunk-H2R5LMTF.js";
+} from "./chunk-I6WJCP2T.js";
 import {
   getColor,
+  isBridge,
   themeOr
-} from "./chunk-AM7EMJXN.js";
+} from "./chunk-NF6LGARO.js";
+import {
+  colors
+} from "./chunk-QPO3F72O.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";
+import { Fragment, jsx } from "@emotion/react/jsx-runtime";
 var maxFieldWidth = "100%";
 var fieldWidth = "100%";
 var inputSpacingPx = 24;
@@ -49,15 +56,16 @@ var inputBlockStyle = ({
 `;
 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 textInputBorderColor = ({ theme }) => isBridge(theme) ? colors.gray4 : themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
 var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
 var textInputActiveStyles = ({
   theme,
   paddingLeftPx,
   paddingRightPx,
+  paddingTopPx,
+  paddingBottomPx,
   activeOutline,
   activeOutlineColor
 }) => {
@@ -75,6 +83,8 @@ var textInputActiveStyles = ({
     padding: ${textInputPaddingPx - 1}px;
     ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
     ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+    ${paddingTopPx ? `padding-top: ${paddingTopPx - 1}px;` : ""}
+    ${paddingBottomPx ? `padding-bottom: ${paddingBottomPx - 1}px;` : ""}
   `;
 };
 var defaultTextInputTypography = {
@@ -94,11 +104,12 @@ var textInputStyle = ({
   activeOutline,
   activeOutlineColor,
   typography,
-  borderRadius
+  borderRadius,
+  borderWidth
 }) => {
   var _a;
   return css`
-  border-radius: ${borderRadius === "round" ? "999" : textInputBorderRadiusPx}px;
+  border-radius: ${borderRadius != null ? borderRadius : 8}px;
   background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
   cursor: ${disabled ? "not-allowed" : "auto"};
   box-sizing: border-box;
@@ -113,7 +124,7 @@ var textInputStyle = ({
   ${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-width: ${hasError ? "2" : borderWidth !== void 0 ? borderWidth : "1"}px;
   border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
   line-height: 22px;
   outline: none;
@@ -135,6 +146,8 @@ var textInputStyle = ({
     theme,
     paddingLeftPx,
     paddingRightPx,
+    paddingTopPx,
+    paddingBottomPx,
     activeOutline,
     activeOutlineColor
   })}
@@ -144,6 +157,8 @@ var textInputStyle = ({
     theme,
     paddingLeftPx,
     paddingRightPx,
+    paddingTopPx,
+    paddingBottomPx,
     activeOutline,
     activeOutlineColor
   })}
@@ -178,14 +193,18 @@ var aboveFieldError = ({
 var inputSubtextSeconds = 0.25;
 function InputSubtext({
   text,
+  content,
   hasError = false,
-  tooltipId
+  hasSuccess = false,
+  tooltipId,
+  hideNonErrorsIfBlurred = false,
+  focused = false
 }) {
   const timeoutRef = useRef(null);
   const [subtext2, setSubtext] = useState(text);
   const [visible, setVisible] = useState(Boolean(text));
   useLayoutEffect(() => {
-    if (text) {
+    if (text || content) {
       setSubtext(text);
       setVisible(true);
       if (timeoutRef.current) {
@@ -197,20 +216,34 @@ function InputSubtext({
         setSubtext(void 0);
       }, inputSubtextSeconds * 1e3);
     }
-  }, [text]);
+  }, [text, content]);
   return /* @__PURE__ */ jsx(
     StyledInputSubtext,
     {
-      visible,
+      visible: visible && (hasError || focused || !hideNonErrorsIfBlurred),
       hasError,
+      hasSuccess,
       cursorPointer: Boolean(tooltipId),
-      children: tooltipId ? /* @__PURE__ */ jsx("span", { "data-tooltip-id": tooltipId, children: subtext2 }) : subtext2
+      usingContent: content !== void 0,
+      children: tooltipId ? /* @__PURE__ */ jsx("span", { "data-tooltip-id": tooltipId, children: /* @__PURE__ */ jsx(InputSubtextContent, { text: subtext2, content }) }) : /* @__PURE__ */ jsx(InputSubtextContent, { text: subtext2, content })
     }
   );
 }
+function InputSubtextContent({
+  text,
+  content
+}) {
+  if (content) {
+    return content;
+  }
+  if (typeof text === "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: text });
+  }
+  return toReactNodes(text);
+}
 var StyledInputSubtext = styled.div`
   margin-top: ${({ visible }) => visible ? "8px" : "0px"};
-  margin-left: ${({ visible }) => visible ? "8px" : "0px"};
+  margin-left: ${({ visible, usingContent }) => visible && !usingContent ? "8px" : "0px"};
   font-size: 12px;
   font-size: ${({ visible }) => visible ? "12px" : "0px"};
   opacity: ${({ visible }) => visible ? "1" : "0"};
@@ -219,7 +252,7 @@ var StyledInputSubtext = styled.div`
     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};
+  color: ${({ hasError, hasSuccess, theme }) => hasError ? theme.danger : hasSuccess ? theme.success : theme.text};
   cursor: ${({ cursorPointer }) => cursorPointer ? "pointer" : "auto"};
 `;
 var labelStyle = ({
@@ -257,7 +290,6 @@ export {
   inputBlockStyle,
   textInputPlaceholderColor,
   textInputFontWeight,
-  textInputBorderRadiusPx,
   textInputPaddingPx,
   textInputPadding,
   textInputBorderColor,

package/dist/chunk-TMHOHUIP.js

@@ -0,0 +1,267 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-W7FAWX6T.js";
+
+// src/hooks/useFields.tsx
+import { isValidUmaAddress } from "@uma-sdk/core";
+import { diff } from "deep-object-diff";
+import { isObject } from "lodash-es";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+var defaultMsgs = {
+  email: "Please enter a valid email address.",
+  phone: "Please enter a valid phone number.",
+  postalCode: "Please enter a valid zip code.",
+  state: "Please enter a valid two-letter state abbreviation.",
+  name: "Name must be at least three characters.",
+  code: "Code must be eight characters long.",
+  password: "Password must be at least 12 characters, must contain at least two types of characters: lowercase, uppercase, numbers, special",
+  required: "This field is required.",
+  umaAddress: "Please enter a valid UMA address.",
+  matchesField: "Target field does not match.",
+  clabe: "Please enter a valid CLABE."
+};
+var regexp = {
+  phone: /^[2-9]{1}[0-9]{9}$/,
+  postalCode: /(^\d{5}$)|(^\d{5}-\d{4}$)/,
+  email: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
+  state: /^(A[LKSZRAEP]|C[AOT]|D[EC]|F[LM]|G[AU]|HI|I[ADLN]|K[SY]|LA|M[ADEHINOPST]|N[CDEHJMVY]|O[HKR]|P[ARW]|RI|S[CD]|T[NX]|UT|V[AIT]|W[AIVY])$/,
+  clabe: /^[0-9]{18}$/
+};
+var v = {
+  email: (msg = defaultMsgs.email) => (value) => !regexp.email.test(value) ? msg : false,
+  phone: (msg = defaultMsgs.phone) => (value) => !regexp.phone.test(value) ? msg : false,
+  postalCode: (msg = defaultMsgs.postalCode) => (value) => !regexp.postalCode.test(value) ? msg : false,
+  state: (msg = defaultMsgs.state) => (value) => !regexp.state.test(value) ? msg : false,
+  name: (msg = defaultMsgs.name) => (value) => value.trim().length < 3 ? msg : false,
+  code: (msg = defaultMsgs.code) => (value) => value.trim().length !== 8 ? msg : false,
+  umaAddress: (msg = defaultMsgs.umaAddress) => (value) => !isValidUmaAddress(value) ? msg : false,
+  clabe: (msg = defaultMsgs.clabe) => (value) => !regexp.clabe.test(value) ? msg : false,
+  required: (msg = defaultMsgs.required) => (value) => value.trim() === "" ? msg : false,
+  min: (msg, minLength = 3) => (value) => {
+    const len = typeof minLength === "number" ? minLength : 3;
+    return value.trim().length < len ? msg || `Must be at least ${len} characters long.` : false;
+  },
+  matchesField: (msg = defaultMsgs.matchesField, targetField = "") => (value, fields) => {
+    if (typeof targetField !== "string") {
+      return msg;
+    }
+    return value !== (fields == null ? void 0 : fields[targetField]) ? msg : false;
+  }
+};
+var defaultValidators = {
+  password: [
+    v.required("Password is required."),
+    // This needs to stay as 8 otherwise users with old shorter passwords
+    // can't login.
+    v.min("Password must be at least eight characters.", 8)
+  ],
+  city: [v.required("City is required.")],
+  name: [v.required("Name is required."), v.name()],
+  code: [v.required("Please enter a code."), v.code()],
+  email: [v.required("Email is required."), v.email()],
+  phoneNumber: [v.required("Phone number is required."), v.phone()],
+  multiInput: [v.required("This field is required.")],
+  birthdayDay: [v.min("Day is required.", 1)],
+  birthdayMonth: [v.min("Day is required.", 1)],
+  birthdayYear: [v.min("Day is required.", 4)],
+  postalCode: [v.required("Zip code is required."), v.postalCode()],
+  addressCountryCode: [v.required("Country code is required.")],
+  addressLine1: [v.required("Address is required.")],
+  addressLine2: [],
+  addressCity: [v.required("City is required.")],
+  addressState: [v.required("State is required.")],
+  addressZipCode: [v.required("Zip code is required.")]
+};
+var f = {
+  numeric: (value) => value.replace(/[^0-9]/g, "")
+};
+var defaultFormatters = {
+  birthdayDay: f.numeric,
+  birthdayMonth: f.numeric,
+  birthdayYear: f.numeric
+};
+function getFirstFieldError(fieldName, fieldValue, fields, validatorsArg) {
+  if (typeof validatorsArg === "undefined" || validatorsArg === true) {
+    const validators = defaultValidators[fieldName];
+    if (validators) {
+      for (const validator of validators) {
+        const errorMsg = validator(fieldValue, fields);
+        if (errorMsg) {
+          return errorMsg;
+        }
+      }
+    }
+  } else if (typeof validatorsArg !== "undefined") {
+    if (validatorsArg === false) {
+      return null;
+    }
+    for (const validator of validatorsArg) {
+      const errorMsg = validator(fieldValue, fields);
+      if (errorMsg) {
+        return errorMsg;
+      }
+    }
+  }
+  return null;
+}
+function reduceToUndef(fields) {
+  return Object.keys(fields).reduce(
+    (acc, key) => __spreadProps(__spreadValues({}, acc), { [key]: void 0 }),
+    {}
+  );
+}
+function reduceToFalse(fields) {
+  return Object.keys(fields).reduce(
+    (acc, key) => __spreadProps(__spreadValues({}, acc), { [key]: false }),
+    {}
+  );
+}
+function reduceToFields(fields) {
+  return Object.entries(fields).reduce((acc, [key, fieldValueArg]) => {
+    if (typeof fieldValueArg === "string") {
+      return __spreadProps(__spreadValues({}, acc), { [key]: fieldValueArg });
+    }
+    return __spreadProps(__spreadValues({}, acc), { [key]: fieldValueArg[0] });
+  }, {});
+}
+function useFields(defaultFieldsFn, deps = []) {
+  const defaultFields = useMemo(defaultFieldsFn, deps);
+  const prevDefaultFields = useRef(defaultFields);
+  const [fields, setFields] = useState(reduceToFields(defaultFields));
+  const [fieldErrors, setFieldErrors] = useState(reduceToUndef(defaultFields));
+  const [blurredFields, setBlurredFields] = useState(
+    reduceToFalse(defaultFields)
+  );
+  const checkFieldForError = useCallback(
+    (fieldName, fieldValue) => {
+      const defaultField = defaultFields[fieldName];
+      const customValidators = typeof defaultField === "string" ? void 0 : defaultField[1];
+      const fieldError = getFirstFieldError(
+        fieldName,
+        fieldValue,
+        fields,
+        customValidators
+      );
+      if (blurredFields[fieldName]) {
+        setFieldErrors((currentFieldErrors) => __spreadProps(__spreadValues({}, currentFieldErrors), {
+          [fieldName]: fieldError
+        }));
+      }
+      return fieldError;
+    },
+    [defaultFields, blurredFields, fields]
+  );
+  const checkFieldsForError = useCallback(
+    (fieldsToCheck) => {
+      Object.entries(fieldsToCheck).forEach(([key, value]) => {
+        checkFieldForError(key, value);
+      });
+    },
+    [checkFieldForError]
+  );
+  const setFieldBlurred = useCallback(
+    (fieldName) => {
+      const newBlurredFields = __spreadProps(__spreadValues({}, blurredFields), {
+        [fieldName]: true
+      });
+      setBlurredFields(newBlurredFields);
+    },
+    [blurredFields]
+  );
+  const getSetFieldBlurred = useCallback(
+    (fieldName) => {
+      return () => {
+        setFieldBlurred(fieldName);
+      };
+    },
+    [setFieldBlurred]
+  );
+  const formatValue = useCallback((fieldName, value) => {
+    const formatter = defaultFormatters[fieldName];
+    return formatter ? formatter(value) : value;
+  }, []);
+  const mergeWithFields = useCallback(
+    (updatedFields) => {
+      setFields((latestFields) => {
+        const formatted = Object.entries(updatedFields).reduce(
+          (acc, [key, value]) => {
+            const val = typeof value === "string" ? value : Array.isArray(value) && typeof value[0] === "string" ? value[0] : "";
+            return __spreadProps(__spreadValues({}, acc), {
+              [key]: formatValue(key, val)
+            });
+          },
+          {}
+        );
+        const updated = __spreadValues(__spreadValues({}, latestFields), formatted);
+        const fieldsChanged = JSON.stringify(updated) !== JSON.stringify(latestFields);
+        return fieldsChanged ? updated : latestFields;
+      });
+      checkFieldsForError(updatedFields);
+    },
+    [checkFieldsForError, formatValue]
+  );
+  const allFieldsValid = useMemo(() => {
+    const valid = !Object.entries(fields).some(([fieldName, fieldValue]) => {
+      const defaultField = defaultFields[fieldName];
+      const customValidators = typeof defaultField === "string" ? void 0 : defaultField[1];
+      const firstFieldError = getFirstFieldError(
+        fieldName,
+        fieldValue,
+        fields,
+        customValidators
+      );
+      return firstFieldError;
+    });
+    return valid;
+  }, [fields, defaultFields]);
+  const getUpdateField = useCallback(
+    (fieldName) => {
+      return (newValue) => {
+        mergeWithFields({
+          [fieldName]: formatValue(fieldName, newValue)
+        });
+      };
+    },
+    [mergeWithFields, formatValue]
+  );
+  useEffect(() => {
+    const newFields = {};
+    const diffProps = diff(prevDefaultFields.current, defaultFields);
+    Object.entries(diffProps).forEach(([key, value]) => {
+      if (typeof value === "string") {
+        newFields[key] = value;
+      } else if (isObject(value)) {
+        Object.entries(value).forEach(([arrayKey, arrayValue]) => {
+          if (arrayKey === "0" && typeof arrayValue === "string") {
+            newFields[key] = arrayValue;
+          }
+        });
+      }
+    });
+    if (Object.keys(newFields).length > 0) {
+      mergeWithFields(newFields);
+    }
+    prevDefaultFields.current = defaultFields;
+  }, [defaultFields, mergeWithFields]);
+  useEffect(() => {
+    checkFieldsForError(fields);
+  }, [blurredFields, fields, checkFieldsForError]);
+  return {
+    blurredFields,
+    getUpdateField,
+    allFieldsValid,
+    fieldErrors,
+    /* needs to be a new object to ensure downstream effects are notified on updates: */
+    fields: __spreadValues({}, fields),
+    mergeWithFields,
+    setFieldBlurred,
+    getSetFieldBlurred,
+    setFieldErrors
+  };
+}
+
+export {
+  v,
+  useFields
+};

package/dist/{chunk-2FG7PGPI.js → chunk-TQ2UZZHD.js}

@@ -1,41 +1,41 @@
 import {
   smHeaderLogoMarginLeft
-} from "./chunk-VQVEZVAG.js";
+} from "./chunk-SLEBHXIK.js";
+import {
+  useLiveRef
+} from "./chunk-UDFJ6IWI.js";
 import {
   MultiToggle
-} from "./chunk-UVJK2G3B.js";
+} from "./chunk-PSB345GM.js";
 import {
   Toggle
-} from "./chunk-FXDEUNPF.js";
+} from "./chunk-R2AGQ3JJ.js";
 import {
   Button
-} from "./chunk-U6EBWLCK.js";
+} from "./chunk-ADV4UT4X.js";
 import {
   UnstyledButton
-} from "./chunk-Z6I64NIF.js";
+} from "./chunk-BJP4OTMN.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-DJOYSVI3.js";
+} from "./chunk-JWFDHULW.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardFocusOutline
-} from "./chunk-E46IHC27.js";
+} from "./chunk-HQN2LS2G.js";
 import {
   Link
-} from "./chunk-5HDXWO2E.js";
+} from "./chunk-YIEDSI2X.js";
 import {
   themeOr
-} from "./chunk-AM7EMJXN.js";
+} from "./chunk-NF6LGARO.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
-import {
-  useLiveRef
-} from "./chunk-UDFJ6IWI.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-DSRVIFSU.cjs → chunk-TXKJAPBD.cjs}

@@ -3,13 +3,13 @@
 var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunk7H2OXTENcjs = require('./chunk-7H2OXTEN.cjs');
+var _chunkXIFHBLNQcjs = require('./chunk-XIFHBLNQ.cjs');
 
 
-var _chunk4UFYMBJKcjs = require('./chunk-4UFYMBJK.cjs');
+var _chunkECFNSLYPcjs = require('./chunk-ECFNSLYP.cjs');
 
 
-var _chunkFPQ2OUYXcjs = require('./chunk-FPQ2OUYX.cjs');
+var _chunkO6BZRC56cjs = require('./chunk-O6BZRC56.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
@@ -36,7 +36,7 @@ function ButtonRow({
       bottomBorder,
       ml,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledButtonRowButton, { className, children: buttons.map(
-        (button, idx) => button === "divider" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonRowDivider, {}, idx) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4UFYMBJKcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, button), idx)
+        (button, idx) => button === "divider" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonRowDivider, {}, idx) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkECFNSLYPcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, button), idx)
       ) })
     }
   );
@@ -52,9 +52,9 @@ var StyledButtonRow = _styled2.default.div`
             position: sticky;
             top: ${headerHeight}px;
             margin-top: 24px;
-            margin-left: -${_chunkFPQ2OUYXcjs.standardContentInset.smPx}px;
-            width: calc(100% + ${_chunkFPQ2OUYXcjs.standardContentInset.smPx * 2}px);
-            max-width: calc(100% + ${_chunkFPQ2OUYXcjs.standardContentInset.smPx * 2}px);
+            margin-left: -${_chunkO6BZRC56cjs.standardContentInset.smPx}px;
+            width: calc(100% + ${_chunkO6BZRC56cjs.standardContentInset.smPx * 2}px);
+            max-width: calc(100% + ${_chunkO6BZRC56cjs.standardContentInset.smPx * 2}px);
             z-index: 2;` : `position: relative;`}
         ${bottomBorder ? `
             &:before {
@@ -78,7 +78,7 @@ var ButtonRowDivider = _styled2.default.div`
   padding-left: 16px;
 `;
 var StyledButtonRowButton = _styled2.default.div`
-  ${_chunk7H2OXTENcjs.overflowAutoWithoutScrollbars}
+  ${_chunkXIFHBLNQcjs.overflowAutoWithoutScrollbars}
   background: ${({ theme }) => theme.bg};
   display: flex;
   position: relative;
@@ -91,7 +91,7 @@ var StyledButtonRowButton = _styled2.default.div`
   }
 
   ${_chunkKW3JYLRIcjs.bp.sm(`
-    padding: ${_chunkFPQ2OUYXcjs.standardContentInset.smPx}px;
+    padding: ${_chunkO6BZRC56cjs.standardContentInset.smPx}px;
   `)}
 `;
 

package/dist/{chunk-Y477LK2G.js → chunk-U5XHY2DK.js}

@@ -1,6 +1,6 @@
 import {
   renderTypography
-} from "./chunk-6H54ZONZ.js";
+} from "./chunk-MSMN63ZY.js";
 import {
   __async
 } from "./chunk-W7FAWX6T.js";