@shoplflow/base 0.25.1 → 0.25.3

package/dist/index.cjs

@@ -396,6 +396,7 @@ exports.colorTokens = {
   primary300,
   primary400
 };
+var spacing02 = "var(--spacing02)";
 var spacing04 = "var(--spacing04)";
 var spacing06 = "var(--spacing06)";
 var spacing08 = "var(--spacing08)";
@@ -407,6 +408,7 @@ var spacing30 = "var(--spacing30)";
 var spacing32 = "var(--spacing32)";
 var spacing40 = "var(--spacing40)";
 exports.spacingTokens = {
+  spacing02,
   spacing04,
   spacing06,
   spacing08,
@@ -443,6 +445,8 @@ var body3_400 = ".body3_400";
 var body3_500 = ".body3_500";
 var caption_700 = ".caption_700";
 var caption_400 = ".caption_400";
+var paragraph1 = ".paragraph1";
+var paragraph2 = ".paragraph2";
 exports.typographyTokens = {
   heading1_700,
   heading1_400,
@@ -464,7 +468,9 @@ exports.typographyTokens = {
   body3_400,
   body3_500,
   caption_700,
-  caption_400
+  caption_400,
+  paragraph1,
+  paragraph2
 };
 
 // src/components/Stack/Stack.styled.ts
@@ -790,10 +796,36 @@ var ModalFooter = ({ children }) => {
 };
 ModalFooter[exports.MODAL_FOOTER_KEY] = true;
 var ModalFooter_default = ModalFooter;
-var ScrollArea = (_a) => {
+var ScrollArea = React2.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Scrollbars__default.default, __spreadProps(__spreadValues({ autoHide: true, autoHideTimeout: 1e3, autoHideDuration: 200 }, rest), { "data-shoplflow": "ScrollArea", children }));
-};
+  const scrollRef = React2.useRef(null);
+  const mergeRef = utils.useMergeRefs(scrollRef, ref);
+  const [windowWidth, setWindowWidth] = React2.useState(window.innerWidth);
+  const [windowHeight, setWindowHeight] = React2.useState(window.innerHeight);
+  const onResize = React2.useCallback(() => {
+    setWindowWidth(window.innerWidth);
+    setWindowHeight(window.innerHeight);
+  }, []);
+  React2.useEffect(() => {
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [onResize]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Boolean(windowWidth) && Boolean(windowHeight) && /* @__PURE__ */ jsxRuntime.jsx(
+    Scrollbars__default.default,
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+      ref: mergeRef
+    }, rest), {
+      autoHide: true,
+      autoHideTimeout: 1e3,
+      autoHideDuration: 200
+    }), rest), {
+      "data-shoplflow": "ScrollArea",
+      children
+    })
+  ) });
+});
 exports.ScrollArea = ScrollArea;
 var ModalBody = ({
   children,
@@ -1695,7 +1727,7 @@ function mergeRefs(...refs) {
     });
   };
 }
-function useMergeRefs(...refs) {
+function useMergeRefs2(...refs) {
   return React2.useMemo(() => mergeRefs(...refs), refs);
 }
 var Popper = ({
@@ -1731,7 +1763,7 @@ exports.PopperTrigger = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, isOpen = false } = _b, rest = __objRest(_b, ["children", "isOpen"]);
     const { setReference, setIsOpen } = usePopper();
-    const refs = useMergeRefs(ref, setReference);
+    const refs = useMergeRefs2(ref, setReference);
     React2.useEffect(() => {
       setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
@@ -1742,7 +1774,7 @@ exports.PopperPortal = React2.forwardRef(
   ({ children, animation: initialAnimation }, ref) => {
     const { floatingStyles, setFloating, isOpen } = usePopper();
     const animation = initialAnimation != null ? initialAnimation : fadeInOut;
-    const refs = useMergeRefs(ref, setFloating);
+    const refs = useMergeRefs2(ref, setFloating);
     if (!isOpen) {
       return null;
     }
@@ -2758,7 +2790,7 @@ var Input = React2.forwardRef(
     const [isHovered, setIsHovered] = React2.useState(false);
     const uniqueId = React2.useId();
     const inputRef = React2__namespace.default.useRef(null);
-    const refs = useMergeRefs(ref, inputRef);
+    const refs = useMergeRefs2(ref, inputRef);
     const convertToString = React2.useCallback((value2) => {
       if (typeof value2 !== "number") {
         return typeof value2 === "string" ? value2 : value2.join("");