@janbox/storefront-ui 2.0.14 → 2.0.16

package/dist/lib/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/lib/button/button.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAyB,MAAM,SAAS,CAAC;AAW7D,eAAO,MAAM,MAAM,iCAAkC,WAAW,qDA4N/D,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/lib/button/button.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAyB,MAAM,SAAS,CAAC;AAY7D,eAAO,MAAM,MAAM,iCAAkC,WAAW,qDA+N/D,CAAC"}

package/dist/lib/button/button.js

@@ -12,6 +12,7 @@ import { getColorVar } from "../../theme/palette.js";
 import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.js";
 import { createSxInterpolation, cn } from "../../utils/stylesheet.js";
 import { Icon } from "../icon/icon.js";
+import { Primitive } from "../primitive/primitive.js";
 const Button = ({ children, ref, ..._props }) => {
   const buttonRef = useRef(null);
   const { className } = useRippleEffect(buttonRef);
@@ -156,8 +157,9 @@ const Button = ({ children, ref, ..._props }) => {
           {
             size: getSizeVariantState(size).iconSize,
             ...startIcon,
-            css: {
-              flexShrink: 0
+            sx: {
+              flexShrink: 0,
+              ...startIcon.sx
             },
             sm: {
               size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
@@ -179,8 +181,9 @@ const Button = ({ children, ref, ..._props }) => {
           {
             size: getSizeVariantState(size).iconSize,
             ...endIcon,
-            css: {
-              flexShrink: 0
+            sx: {
+              flexShrink: 0,
+              ...endIcon.sx
             },
             sm: {
               size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
@@ -198,16 +201,17 @@ const Button = ({ children, ref, ..._props }) => {
         ),
         suffix,
         isLoading && /* @__PURE__ */ jsx(
-          "span",
+          Primitive,
           {
             "data-loading": true,
-            css: {
+            sx: {
               position: "absolute",
               inset: 0,
               display: "flex",
               alignItems: "center",
               justifyContent: "center"
             },
+            as: "span",
             children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
           }
         )

package/dist/lib/swiper/swiper/swiper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swiper.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper/swiper.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAyB,MAAM,SAAS,CAAC;AAe7D,eAAO,MAAM,MAAM,wCAAyC,WAAW,qDA6DtE,CAAC"}
+{"version":3,"file":"swiper.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper/swiper.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAyB,MAAM,SAAS,CAAC;AAe7D,eAAO,MAAM,MAAM,wCAAyC,WAAW,qDA+DtE,CAAC"}

package/dist/lib/swiper/swiper/swiper.js

@@ -68,7 +68,7 @@ const Swiper = ({ children, onApi, ref, ..._props }) => {
             children
           }
         ),
-        /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
+        !!emblaApi && /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
           (paging == null ? void 0 : paging.type) === "dots" && /* @__PURE__ */ jsx(SwiperDotsPaging, { api: emblaApi, ...paging }),
           (paging == null ? void 0 : paging.type) === "side-arrows" && /* @__PURE__ */ jsx(SwiperSideArrowsPaging, { api: emblaApi, ...paging })
         ] })

package/dist/lib/swiper/swiper/types.d.ts

@@ -18,7 +18,7 @@ type SwiperDosPaging = ShallowMerge<SwiperDotsPagingProps, {
 type SwiperSideArrowsPaging = ShallowMerge<SwiperSideArrowsPagingProps, {
     type: 'side-arrows';
 }>;
-type SwiperPaging = SwiperDosPaging | SwiperSideArrowsPaging;
+type SwiperPaging = Omit<SwiperDosPaging, 'api'> | Omit<SwiperSideArrowsPaging, 'api'>;
 type SwiperExtendedProps = ToResponsiveProps<SwiperResponsiveProps> & {
     autoplayOptions?: ShallowMerge<AutoplayOptionsType, {
         delay?: number;

package/dist/lib/swiper/swiper/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AAEpD,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,SAAS,GAAG,iBAAiB,CAAC;AAE1C,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG,YAAY,CACjC,qBAAqB,EACrB;IACE,IAAI,EAAE,MAAM,CAAC;CACd,CACF,CAAC;AAEF,KAAK,sBAAsB,GAAG,YAAY,CACxC,2BAA2B,EAC3B;IACE,IAAI,EAAE,aAAa,CAAC;CACrB,CACF,CAAC;AAEF,KAAK,YAAY,GAAG,eAAe,GAAG,sBAAsB,CAAC;AAE7D,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,qBAAqB,CAAC,GAAG;IACpE,eAAe,CAAC,EAAE,YAAY,CAAC,mBAAmB,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxE,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AAEpD,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,SAAS,GAAG,iBAAiB,CAAC;AAE1C,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG,YAAY,CACjC,qBAAqB,EACrB;IACE,IAAI,EAAE,MAAM,CAAC;CACd,CACF,CAAC;AAEF,KAAK,sBAAsB,GAAG,YAAY,CACxC,2BAA2B,EAC3B;IACE,IAAI,EAAE,aAAa,CAAC;CACrB,CACF,CAAC;AAEF,KAAK,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;AAEvF,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,qBAAqB,CAAC,GAAG;IACpE,eAAe,CAAC,EAAE,YAAY,CAAC,mBAAmB,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxE,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC"}

package/dist/lib/swiper/swiper-dots-paging/types.d.ts

@@ -6,7 +6,7 @@ export type SwiperDotsPagingResponsiveProps = {
     offset?: number;
 };
 export type SwiperDotsPagingProps = {
-    api?: SwiperApi;
+    api: SwiperApi;
     color?: ColorVariant;
 } & ToResponsiveProps<SwiperDotsPagingResponsiveProps>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/swiper/swiper-dots-paging/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-dots-paging/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,+BAA+B,GAAG;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,GAAG,iBAAiB,CAAC,+BAA+B,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-dots-paging/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,+BAA+B,GAAG;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,SAAS,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,GAAG,iBAAiB,CAAC,+BAA+B,CAAC,CAAC"}

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.d.ts

@@ -1,5 +1,5 @@
 import { SwiperSideArrowsPagingProps, SwiperSideArrowsPagingResponsiveProps } from './types';
 import { StyledCSS } from '../../../types';
-export declare const SwiperSideArrowsPaging: ({ api, size, offset, color, visibility, sm, md, lg, }: SwiperSideArrowsPagingProps) => import("react/jsx-runtime").JSX.Element;
-export declare const createOverflowStyle: ({ offset, }?: Pick<SwiperSideArrowsPagingResponsiveProps, "offset">) => StyledCSS;
+export declare const SwiperSideArrowsPaging: ({ api, size, offsetX, offsetY, color, visibility, anchorSelector, sm, md, lg, }: SwiperSideArrowsPagingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const createOverflowStyle: ({ offsetX, }?: Pick<SwiperSideArrowsPagingResponsiveProps, "offsetX">) => StyledCSS;
 //# sourceMappingURL=swiper-side-arrows-paging.d.ts.map

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swiper-side-arrows-paging.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,2BAA2B,EAAE,qCAAqC,EAAE,MAAM,SAAS,CAAC;AAC7F,OAAO,EAA8B,SAAS,EAAqB,MAAM,SAAS,CAAC;AAQnF,eAAO,MAAM,sBAAsB,0DAShC,2BAA2B,4CAoJ7B,CAAC;AAoHF,eAAO,MAAM,mBAAmB,iBAE7B,IAAI,CAAC,qCAAqC,EAAE,QAAQ,CAAC,KAAQ,SAM/D,CAAC"}
+{"version":3,"file":"swiper-side-arrows-paging.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,2BAA2B,EAAE,qCAAqC,EAAE,MAAM,SAAS,CAAC;AAC7F,OAAO,EAA8B,SAAS,EAAqB,MAAM,SAAS,CAAC;AAQnF,eAAO,MAAM,sBAAsB,oFAWhC,2BAA2B,4CA4L7B,CAAC;AA2IF,eAAO,MAAM,mBAAmB,kBAE7B,IAAI,CAAC,qCAAqC,EAAE,SAAS,CAAC,KAAQ,SAMhE,CAAC"}

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { useFloating, autoUpdate, offset, size, FloatingPortal } from "@floating-ui/react";
-import { isNil, isNumber } from "lodash-es";
+import { isEmpty, isNumber, isNil } from "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
 import ArrowLeftIcon from "../../../assets/svg/arrow-left.svg.js";
 import { SvgLoader } from "../../../components/svg-loader.js";
@@ -10,9 +10,11 @@ const SWIPER_SIDE_ARROWS_OVERFLOW_VAR = "--swiper-side-arrows-overflow";
 const SwiperSideArrowsPaging = ({
   api,
   size: size$1 = 32,
-  offset: offset$1 = 0,
+  offsetX = "center",
+  offsetY = "center",
   color = "primary",
   visibility = "auto",
+  anchorSelector,
   sm,
   md,
   lg
@@ -20,6 +22,7 @@ const SwiperSideArrowsPaging = ({
   const [canScrollPrev, setCanScrollPrev] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);
   const [isVisible, setIsVisible] = useState(visibility === "always");
+  const [referenceStyle, setReferenceStyle] = useState(anchorSelector ? {} : { top: 0, bottom: 0 });
   const hoverStateRef = useRef({ root: false, floating: false });
   const updateVisibility = useCallback(() => {
     const { root, floating } = hoverStateRef.current;
@@ -27,7 +30,8 @@ const SwiperSideArrowsPaging = ({
   }, []);
   const {
     floatingStyles,
-    refs: { setFloating, setReference }
+    refs: { setFloating, setReference },
+    context
   } = useFloating({
     placement: "top",
     middleware: [
@@ -37,6 +41,7 @@ const SwiperSideArrowsPaging = ({
       })),
       size({
         apply({ elements, rects }) {
+          console.log(elements);
           Object.assign(elements.floating.style, {
             width: `calc(${rects.reference.width}px + var(${SWIPER_SIDE_ARROWS_OVERFLOW_VAR}, 0px) * 2)`,
             height: `${rects.reference.height}px`
@@ -44,7 +49,8 @@ const SwiperSideArrowsPaging = ({
         }
       })
     ],
-    whileElementsMounted: autoUpdate
+    whileElementsMounted: autoUpdate,
+    open: !isEmpty(referenceStyle)
   });
   useEffect(() => {
     const updateScrollState = (emblaApi) => {
@@ -77,6 +83,29 @@ const SwiperSideArrowsPaging = ({
       rootNode.removeEventListener("mouseleave", onRootLeave);
     };
   }, [api, updateVisibility, visibility]);
+  useEffect(() => {
+    if (!anchorSelector || !api) return;
+    const rootNode = api.rootNode();
+    const update = () => {
+      const anchorEl2 = rootNode.querySelector(anchorSelector);
+      if (!anchorEl2) return;
+      const rootRect = rootNode.getBoundingClientRect();
+      const anchorRect = anchorEl2.getBoundingClientRect();
+      setReferenceStyle({
+        top: anchorRect.top - rootRect.top,
+        height: anchorRect.height
+      });
+    };
+    const anchorEl = rootNode.querySelector(anchorSelector);
+    if (anchorEl) {
+      const observer = new ResizeObserver(update);
+      observer.observe(anchorEl);
+      observer.observe(rootNode);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [api, anchorSelector]);
   const onButtonClick = (e) => {
     const direction = e.currentTarget.dataset.direction;
     if (direction === "next") {
@@ -85,7 +114,7 @@ const SwiperSideArrowsPaging = ({
       api == null ? void 0 : api.scrollPrev();
     }
   };
-  const onFloatingMouseEnter = (e) => {
+  const onFloatingMouseEnter = (_e) => {
     if (visibility === "always") return;
     hoverStateRef.current.floating = true;
     updateVisibility();
@@ -103,11 +132,13 @@ const SwiperSideArrowsPaging = ({
         sx: {
           position: "absolute",
           pointerEvents: "none",
-          inset: 0
+          left: 0,
+          right: 0,
+          ...referenceStyle
         }
       }
     ),
-    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
       Primitive,
       {
         style: {
@@ -118,7 +149,7 @@ const SwiperSideArrowsPaging = ({
           display: "flex",
           alignItems: "stretch",
           justifyContent: "space-between",
-          ...createOverflowStyle({ offset: offset$1 }),
+          ...createOverflowStyle({ offsetX }),
           sm: createOverflowStyle(sm),
           md: createOverflowStyle(md),
           lg: createOverflowStyle(lg)
@@ -135,7 +166,8 @@ const SwiperSideArrowsPaging = ({
               disabled: !canScroll,
               direction,
               color,
-              offset: offset$1,
+              offsetX,
+              offsetY,
               size: size$1,
               sm,
               md,
@@ -153,7 +185,8 @@ const SwiperSideArrowsPaging = ({
 const ArrowButton = ({
   direction,
   size: size2,
-  offset: offset2,
+  offsetX,
+  offsetY,
   color,
   visible,
   sm,
@@ -161,7 +194,6 @@ const ArrowButton = ({
   lg,
   ...props
 }) => {
-  const slideOffset = direction === "prev" ? "-100%" : "100%";
   return /* @__PURE__ */ jsx(
     Primitive,
     {
@@ -176,7 +208,6 @@ const ArrowButton = ({
           sx: {
             position: "absolute",
             top: "50%",
-            transform: visible ? "translateY(-50%) translateX(0)" : `translateY(-50%) translateX(${slideOffset})`,
             opacity: visible ? 1 : 0,
             aspectRatio: 1,
             pointerEvents: "auto",
@@ -198,15 +229,15 @@ const ArrowButton = ({
             transition: "opacity 200ms ease, background-color 200ms ease, transform 250ms ease",
             "@media (hover: none) and (pointer: coarse)": {
               opacity: 1,
-              transform: "translateY(-50%)",
               ":disabled": {
                 opacity: 0.5
-              }
+              },
+              ...createArrowButtonStyle({ size: size2, offsetX, offsetY }, direction, true)
             },
-            ...createArrowButtonStyle({ size: size2, offset: offset2 }, direction),
-            sm: createArrowButtonStyle(sm, direction),
-            md: createArrowButtonStyle(md, direction),
-            lg: createArrowButtonStyle(lg, direction)
+            ...createArrowButtonStyle({ size: size2, offsetX, offsetY }, direction, visible),
+            sm: createArrowButtonStyle(sm, direction, visible),
+            md: createArrowButtonStyle(md, direction, visible),
+            lg: createArrowButtonStyle(lg, direction, visible)
           },
           ...props,
           as: "button",
@@ -228,17 +259,38 @@ const ArrowButton = ({
     }
   );
 };
-const createArrowButtonStyle = ({ size: size2, offset: offset2 } = {}, direction) => {
+const createArrowButtonStyle = ({ size: size2, offsetX, offsetY } = {}, direction, visible) => {
   const css = {
     width: size2,
     height: size2
   };
-  if (isNumber(offset2)) {
+  const transforms = [];
+  if (offsetY === "center") {
+    css.top = "50%";
+    transforms.push("translateY(-50%)");
+  } else if (isNumber(offsetY)) {
+    css.top = offsetY;
+  }
+  if (offsetX === "center") {
     if (direction === "prev") {
-      css.left = Math.max(offset2, 0);
+      css.left = 0;
+      transforms.push(visible === false ? "translateX(-100%)" : "translateX(-50%)");
     } else {
-      css.right = Math.max(offset2, 0);
+      css.right = 0;
+      transforms.push(visible === false ? "translateX(100%)" : "translateX(50%)");
     }
+  } else if (isNumber(offsetX)) {
+    if (direction === "prev") {
+      css.left = Math.max(offsetX, 0);
+    } else {
+      css.right = Math.max(offsetX, 0);
+    }
+    if (visible === false) {
+      transforms.push(direction === "prev" ? "translateX(-100%)" : "translateX(100%)");
+    }
+  }
+  if (transforms.length > 0) {
+    css.transform = transforms.join(" ");
   }
   return css;
 };
@@ -251,10 +303,10 @@ const createArrowIconStyle = ({ size: size2 } = {}) => {
   };
 };
 const createOverflowStyle = ({
-  offset: offset2 = 0
+  offsetX = 0
 } = {}) => {
-  return offset2 < 0 ? {
-    [SWIPER_SIDE_ARROWS_OVERFLOW_VAR]: `${-offset2}px`
+  return isNumber(offsetX) && offsetX < 0 ? {
+    [SWIPER_SIDE_ARROWS_OVERFLOW_VAR]: `${-offsetX}px`
   } : {};
 };
 export {

package/dist/lib/swiper/swiper-side-arrows-paging/types.d.ts

@@ -2,12 +2,14 @@ import { ColorVariant, ToResponsiveProps } from '../../../types';
 import { SwiperApi } from '../swiper/types';
 export type SwiperSideArrowsPagingResponsiveProps = {
     size?: number;
-    offset?: number;
+    offsetX?: number | 'center';
+    offsetY?: number | 'center';
 };
 export type SwiperSideArrowsPagingVisibility = 'auto' | 'always';
 export type SwiperSideArrowsPagingProps = {
-    api?: SwiperApi;
+    api: SwiperApi;
     color?: ColorVariant;
     visibility?: SwiperSideArrowsPagingVisibility;
+    anchorSelector?: string;
 } & ToResponsiveProps<SwiperSideArrowsPagingResponsiveProps>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/swiper/swiper-side-arrows-paging/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,qCAAqC,GAAG;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEjE,MAAM,MAAM,2BAA2B,GAAG;IACxC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,gCAAgC,CAAC;CAC/C,GAAG,iBAAiB,CAAC,qCAAqC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,qCAAqC,GAAG;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEjE,MAAM,MAAM,2BAA2B,GAAG;IACxC,GAAG,EAAE,SAAS,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,gCAAgC,CAAC;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,iBAAiB,CAAC,qCAAqC,CAAC,CAAC"}

package/dist/lib/tabs/tab-content/tab-content.d.ts

@@ -1,3 +1,3 @@
 import { TabContentProps } from './types';
-export declare const TabContent: ({ children, ...rest }: TabContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TabContent: ({ children, ...rest }: TabContentProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=tab-content.d.ts.map

package/dist/lib/tabs/tab-content/tab-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-content/tab-content.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAM1C,eAAO,MAAM,UAAU,0BAA2B,eAAe,qDAehE,CAAC"}
+{"version":3,"file":"tab-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-content/tab-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO1C,eAAO,MAAM,UAAU,0BAA2B,eAAe,4CAehE,CAAC"}

package/dist/lib/tabs/tab-content/tab-content.js

@@ -1,13 +1,14 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { flattenChildren } from "../../../utils/index.js";
 import { useTabsContext } from "../tabs/helpers.js";
+import { Primitive } from "../../primitive/primitive.js";
 const TabContent = ({ children, ...rest }) => {
   const { activeIndex } = useTabsContext();
   const flattenedChildren = flattenChildren(children);
   return /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      css: {
+      sx: {
         display: "contents"
       },
       ...rest,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [