@janbox/storefront-ui 2.0.12 → 2.0.14

package/dist/index.js

@@ -82,7 +82,6 @@ import { StarRating } from "./lib/star-rating/star-rating.js";
 import { Step } from "./lib/stepper/step.js";
 import { Stepper } from "./lib/stepper/stepper.js";
 import { Swiper } from "./lib/swiper/swiper/swiper.js";
-import { SwiperDotsPaging } from "./lib/swiper/swiper-dots-paging/swiper-dots-paging.js";
 import { SwiperSlide } from "./lib/swiper/swiper-slide/swiper-slide.js";
 import { Switch } from "./lib/switch/switch.js";
 import { Tab } from "./lib/tabs/tab/tab.js";
@@ -228,7 +227,6 @@ export {
   Step,
   Stepper,
   Swiper,
-  SwiperDotsPaging,
   SwiperSlide,
   Switch,
   Tab,

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

@@ -1,4 +1,3 @@
 export * from './swiper';
 export * from './swiper-slide';
-export * from './swiper-dots-paging';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/swiper/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/swiper/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

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":"AAWA,OAAO,EAAE,WAAW,EAAyB,MAAM,SAAS,CAAC;AAW7D,eAAO,MAAM,MAAM,wCAAyC,WAAW,qDAmEtE,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,qDA6DtE,CAAC"}

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

@@ -1,16 +1,18 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, Suspense } from "react";
+import { useEffect, Suspense, lazy } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import Autoplay from "embla-carousel-autoplay";
 import useEmblaCarousel from "embla-carousel-react";
 import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
 import { isNumber } from "lodash-es";
 import { getSwiperProps } from "./helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
-import { SwiperDotsPaging } from "../swiper-dots-paging/swiper-dots-paging.js";
 import { Primitive } from "../../primitive/primitive.js";
+const SwiperDotsPaging = lazy(
+  () => import("../swiper-dots-paging/index.js").then((module) => ({ default: module.SwiperDotsPaging }))
+);
+const SwiperSideArrowsPaging = lazy(
+  () => import("../swiper-side-arrows-paging/index.js").then((module) => ({ default: module.SwiperSideArrowsPaging }))
+);
 const SWIPER_SLIDE_GAP_VAR_NAME = "--slice-gap";
 const SWIPER_SLIDE_GAP_VAR = `var(${SWIPER_SLIDE_GAP_VAR_NAME}, 0px)`;
 const Swiper = ({ children, onApi, ref, ..._props }) => {
@@ -26,65 +28,64 @@ const Swiper = ({ children, onApi, ref, ..._props }) => {
     emblaApi && (onApi == null ? void 0 : onApi(emblaApi));
   }, [emblaApi]);
   const mergedRefs = useMergeRefs([emblaRef, ref]);
-  const css = [
+  return /* @__PURE__ */ jsxs(
+    Primitive,
     {
-      position: "relative",
-      overflow: "hidden",
-      maxHeight: "100%",
-      maxWidth: "100%"
-    },
-    (options == null ? void 0 : options.axis) === "y" && { height: "100%" },
-    createStyle({ slidesPerView, spaceBetween }),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
-    },
-    createSxInterpolation(sx)
-  ];
-  return /* @__PURE__ */ jsxs("div", { css, ...rest, ref: mergedRefs, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "group",
-        css: {
-          display: "flex",
-          alignItems: "stretch",
-          height: "100%",
-          ...(options == null ? void 0 : options.axis) === "y" ? { height: "100%", flexDirection: "column" } : {}
+      sx: {
+        position: "relative",
+        overflow: "hidden",
+        maxHeight: "100%",
+        maxWidth: "100%",
+        height: (options == null ? void 0 : options.axis) === "y" ? "100%" : void 0,
+        ...createStyle({ slidesPerView, spaceBetween }),
+        ...sx,
+        sm: {
+          ...createStyle(sm),
+          ...sx == null ? void 0 : sx.sm
         },
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx(Suspense, { fallback: null, children: (paging == null ? void 0 : paging.type) === "dots" && /* @__PURE__ */ jsx(
-      Primitive,
-      {
-        sx: {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          display: "flex",
-          justifyContent: "center",
-          bottom: 0,
-          ...paging.sx
+        md: {
+          ...createStyle(md),
+          ...sx == null ? void 0 : sx.md
         },
-        children: /* @__PURE__ */ jsx(SwiperDotsPaging, { api: emblaApi, ...paging.options })
-      }
-    ) })
-  ] });
+        lg: {
+          ...createStyle(lg),
+          ...sx == null ? void 0 : sx.lg
+        }
+      },
+      ...rest,
+      ref: mergedRefs,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "group",
+            css: {
+              display: "flex",
+              alignItems: "stretch",
+              height: "100%",
+              ...(options == null ? void 0 : options.axis) === "y" ? { height: "100%", flexDirection: "column" } : {}
+            },
+            children
+          }
+        ),
+        /* @__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 })
+        ] })
+      ]
+    }
+  );
 };
 const createStyle = ({ slidesPerView, spaceBetween } = {}) => {
-  return [
-    {
-      [`& > [role="group"]`]: {
-        [SWIPER_SLIDE_GAP_VAR_NAME]: isNumber(spaceBetween) ? `${spaceBetween}px` : void 0,
-        gap: SWIPER_SLIDE_GAP_VAR,
-        [`& > *`]: {
-          flexBasis: isNumber(slidesPerView) ? `calc((100% - (${SWIPER_SLIDE_GAP_VAR} * ${slidesPerView - 1})) / ${slidesPerView})` : void 0
-        }
+  return {
+    [`& > [role="group"]`]: {
+      [SWIPER_SLIDE_GAP_VAR_NAME]: isNumber(spaceBetween) ? `${spaceBetween}px` : void 0,
+      gap: SWIPER_SLIDE_GAP_VAR,
+      [`& > *`]: {
+        flexBasis: isNumber(slidesPerView) ? `calc((100% - (${SWIPER_SLIDE_GAP_VAR} * ${slidesPerView - 1})) / ${slidesPerView})` : void 0
       }
     }
-  ];
+  };
 };
 export {
   Swiper

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

@@ -1,27 +1,32 @@
 import { JSX } from 'react';
+import { EmblaCarouselType } from 'embla-carousel';
 import { AutoplayOptionsType } from 'embla-carousel-autoplay';
-import { default as useEmblaCarousel, UseEmblaCarouselType } from 'embla-carousel-react';
-import { SwiperDotsPagingProps } from '../swiper-dots-paging/types';
-import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
+import { default as useEmblaCarousel } from 'embla-carousel-react';
+import { ShallowMerge, ToResponsiveProps } from '../../../types';
+import { SwiperDotsPagingProps } from '../swiper-dots-paging';
+import { SwiperSideArrowsPagingProps } from '../swiper-side-arrows-paging';
+import { PrimitiveProps } from '../../primitive';
 export type SwiperOptions = Parameters<typeof useEmblaCarousel>[0];
-export type SwiperApi = UseEmblaCarouselType[1];
+export type SwiperApi = EmblaCarouselType;
 export type SwiperResponsiveProps = {
     slidesPerView?: number | 'auto';
     spaceBetween?: number;
 };
-type SwiperDosPaging = PropsWithSx<{
+type SwiperDosPaging = ShallowMerge<SwiperDotsPagingProps, {
     type: 'dots';
-    options?: SwiperDotsPagingProps;
 }>;
-type SwiperPaging = SwiperDosPaging;
-type SwiperExtendedProps = PropsWithSx<ToResponsiveProps<SwiperResponsiveProps> & {
+type SwiperSideArrowsPaging = ShallowMerge<SwiperSideArrowsPagingProps, {
+    type: 'side-arrows';
+}>;
+type SwiperPaging = SwiperDosPaging | SwiperSideArrowsPaging;
+type SwiperExtendedProps = ToResponsiveProps<SwiperResponsiveProps> & {
     autoplayOptions?: ShallowMerge<AutoplayOptionsType, {
         delay?: number;
     }>;
     onApi?: (api: SwiperApi) => void;
     options?: Partial<SwiperOptions>;
     paging?: SwiperPaging;
-}>;
-export type SwiperProps = ShallowMerge<JSX.IntrinsicElements['div'], SwiperExtendedProps>;
+};
+export type SwiperProps = ShallowMerge<PrimitiveProps<JSX.IntrinsicElements['div']>, SwiperExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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;AAE5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,gBAAgB,EAAE,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,SAAS,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAEhD,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG,WAAW,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACjC,CAAC,CAAC;AAEH,KAAK,YAAY,GAAG,eAAe,CAAC;AAEpC,KAAK,mBAAmB,GAAG,WAAW,CACpC,iBAAiB,CAAC,qBAAqB,CAAC,GAAG;IACzC,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,CACF,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,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,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"}

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

@@ -1,2 +1,3 @@
 export * from './swiper-dots-paging';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-dots-paging/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-dots-paging/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC"}

package/dist/lib/swiper/swiper-dots-paging/index.js

@@ -0,0 +1,4 @@
+import { SwiperDotsPaging } from "./swiper-dots-paging.js";
+export {
+  SwiperDotsPaging
+};

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

@@ -1,3 +1,3 @@
 import { SwiperDotsPagingProps } from './types';
-export declare const SwiperDotsPaging: ({ api, size, spaceBetween, colorVariant, }: SwiperDotsPagingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SwiperDotsPaging: ({ api, size, spaceBetween, color, offset, sm, md, lg, }: SwiperDotsPagingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=swiper-dots-paging.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"swiper-dots-paging.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-dots-paging/swiper-dots-paging.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAIhD,eAAO,MAAM,gBAAgB,+CAK1B,qBAAqB,qDAuEvB,CAAC"}
+{"version":3,"file":"swiper-dots-paging.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-dots-paging/swiper-dots-paging.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,qBAAqB,EAAmC,MAAM,SAAS,CAAC;AAOjF,eAAO,MAAM,gBAAgB,4DAS1B,qBAAqB,qDAwJvB,CAAC"}

package/dist/lib/swiper/swiper-dots-paging/swiper-dots-paging.js

@@ -1,77 +1,201 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { times } from "lodash-es";
+import { useFloating, autoUpdate, shift, flip, size, FloatingPortal } from "@floating-ui/react";
+import { times, isNumber } from "lodash-es";
 import { motion } from "motion/react";
-import { getColorShadesByVariant } from "../../../utils/index.js";
+import { getColorVar } from "../../../theme/palette.js";
+import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
+import { Primitive } from "../../primitive/primitive.js";
+const SWIPER_DOTS_SIZE_VAR = "--swiper-dots-size";
+const SWIPER_DOTS_OFFSET_VAR = "--swiper-dots-offset";
+const SWIPER_DOTS_SPACING_VAR = "--swiper-dots-spacing";
 const SwiperDotsPaging = ({
   api,
-  size = 12,
+  size: size$1 = 12,
   spaceBetween = 4,
-  colorVariant = "primary"
+  color = "primary",
+  offset = 0,
+  sm,
+  md,
+  lg
 }) => {
   const [inViewIndexes, setInViewIndexes] = useState((api == null ? void 0 : api.slidesInView()) ?? []);
   const [totalSlides, setTotalSlides] = useState((api == null ? void 0 : api.slideNodes().length) ?? 0);
-  const { main, light } = getColorShadesByVariant(colorVariant);
+  const isHydrated = useIsHydrated();
+  const {
+    floatingStyles,
+    refs: { setFloating, setReference }
+  } = useFloating({
+    placement: "bottom",
+    middleware: [
+      shift(),
+      flip(),
+      size({
+        apply({ elements, rects }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`
+          });
+        }
+      })
+    ],
+    whileElementsMounted: autoUpdate
+  });
   useEffect(() => {
-    const checkSlidesInView = () => {
-      setInViewIndexes((api == null ? void 0 : api.slidesInView()) ?? []);
+    const updateSlidesInView = (emblaApi) => {
+      setInViewIndexes(emblaApi.slidesInView());
     };
-    const checkTotalSlides = () => {
-      setTotalSlides((api == null ? void 0 : api.slideNodes().length) ?? 0);
+    const updateTotalSlides = (emblaApi) => {
+      setTotalSlides(emblaApi.slideNodes().length ?? 0);
     };
-    checkSlidesInView();
-    checkTotalSlides();
-    api == null ? void 0 : api.on("slidesInView", checkSlidesInView);
-    api == null ? void 0 : api.on("resize", checkSlidesInView);
-    api == null ? void 0 : api.on("slidesChanged", checkTotalSlides);
+    if (api) {
+      updateSlidesInView(api);
+      updateTotalSlides(api);
+    }
+    api == null ? void 0 : api.on("slidesInView", updateSlidesInView);
+    api == null ? void 0 : api.on("slidesChanged", updateTotalSlides);
     return () => {
-      api == null ? void 0 : api.off("slidesInView", checkSlidesInView);
-      api == null ? void 0 : api.off("resize", checkSlidesInView);
-      api == null ? void 0 : api.off("slidesChanged", checkTotalSlides);
+      api == null ? void 0 : api.off("slidesInView", updateSlidesInView);
+      api == null ? void 0 : api.off("slidesChanged", updateTotalSlides);
     };
   }, [api]);
   const onDotClick = (e) => {
     e.stopPropagation();
-    api == null ? void 0 : api.scrollTo(Number(e.currentTarget.value));
+    api == null ? void 0 : api.scrollTo(Number(e.currentTarget.dataset.index));
   };
   const firstInViewIndex = inViewIndexes.at(0) ?? 0;
-  return /* @__PURE__ */ jsxs("div", { css: { position: "relative", display: "flex", width: "fit-content", gap: spaceBetween, minHeight: size }, children: [
-    times(totalSlides).map((slideIndex) => /* @__PURE__ */ jsx("button", { onClick: onDotClick, value: slideIndex, children: /* @__PURE__ */ jsx(
-      "div",
+  if (!isHydrated) return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Primitive,
       {
-        css: {
-          width: size,
-          height: size,
-          borderColor: main,
-          backgroundColor: light,
-          border: "1px solid",
-          borderRadius: 9999,
-          ...inViewIndexes.includes(slideIndex) ? { visibility: "hidden" } : {}
+        ref: setReference,
+        sx: {
+          position: "absolute",
+          width: "100%",
+          bottom: `calc(var(${SWIPER_DOTS_SIZE_VAR}) + var(${SWIPER_DOTS_OFFSET_VAR}))`,
+          pointerEvents: "none",
+          ...createReferenceStyle({ size: size$1, offset }),
+          sm: createReferenceStyle(sm),
+          md: createReferenceStyle(md),
+          lg: createReferenceStyle(lg)
         }
       }
-    ) }, slideIndex)),
-    /* @__PURE__ */ jsx(
-      motion.div,
+    ),
+    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+      Primitive,
       {
-        initial: {
-          width: 0,
-          left: 0
-        },
-        animate: {
-          width: inViewIndexes.length * size + (inViewIndexes.length - 1) * spaceBetween,
-          left: firstInViewIndex * size + firstInViewIndex * spaceBetween
+        style: {
+          overflow: "hidden",
+          ...floatingStyles
         },
-        css: {
-          backgroundColor: main,
-          position: "absolute",
-          top: 0,
-          bottom: 0,
-          borderRadius: 9999
-        }
+        ref: setFloating,
+        children: /* @__PURE__ */ jsx(
+          Primitive,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              width: "100%"
+            },
+            children: /* @__PURE__ */ jsxs(
+              Primitive,
+              {
+                sx: {
+                  position: "relative",
+                  display: "flex",
+                  width: "fit-content",
+                  maxWidth: "100%",
+                  ...createDotListStyle({ size: size$1, spaceBetween }),
+                  sm: createDotListStyle(sm),
+                  md: createDotListStyle(md),
+                  lg: createDotListStyle(lg),
+                  gap: `var(${SWIPER_DOTS_SPACING_VAR})`
+                },
+                children: [
+                  times(totalSlides).map((slideIndex) => /* @__PURE__ */ jsx(
+                    Primitive,
+                    {
+                      role: "button",
+                      sx: {
+                        width: `var(${SWIPER_DOTS_SIZE_VAR})`,
+                        height: `var(${SWIPER_DOTS_SIZE_VAR})`,
+                        borderRadius: 9999,
+                        position: "relative",
+                        ...inViewIndexes.includes(slideIndex) ? { visibility: "hidden" } : {},
+                        borderWidth: 1,
+                        borderColor: getColorVar(`${color}.600`),
+                        backgroundColor: getColorVar("white")
+                      },
+                      onClick: onDotClick,
+                      "data-index": slideIndex
+                    },
+                    slideIndex
+                  )),
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      initial: {
+                        width: 0,
+                        left: 0
+                      },
+                      animate: {
+                        width: `calc(${inViewIndexes.length} * var(${SWIPER_DOTS_SIZE_VAR}, 0) + ${inViewIndexes.length - 1} * var(${SWIPER_DOTS_SPACING_VAR}, 0))`,
+                        left: `calc(${firstInViewIndex} * var(${SWIPER_DOTS_SIZE_VAR}) + ${firstInViewIndex} * var(${SWIPER_DOTS_SPACING_VAR}))`
+                      },
+                      css: {
+                        position: "absolute",
+                        top: 0,
+                        bottom: 0,
+                        borderRadius: 9999,
+                        backgroundColor: "white",
+                        borderWidth: 1,
+                        borderColor: getColorVar(`${color}.600`),
+                        padding: 1
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            height: "100%",
+                            width: "100%",
+                            borderRadius: 9999,
+                            backgroundColor: getColorVar(`${color}.600`)
+                          }
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
       }
-    )
+    ) })
   ] });
 };
+const createReferenceStyle = ({
+  size: size2,
+  offset
+} = {}) => {
+  return {
+    bottom: size2,
+    marginBottom: offset
+  };
+};
+const createDotListStyle = ({
+  size: size2,
+  spaceBetween
+} = {}) => {
+  const css = {};
+  if (isNumber(size2)) {
+    css[SWIPER_DOTS_SIZE_VAR] = `${size2}px`;
+  }
+  if (isNumber(spaceBetween)) {
+    css[SWIPER_DOTS_SPACING_VAR] = `${spaceBetween}px`;
+  }
+  return css;
+};
 export {
   SwiperDotsPaging
 };

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

@@ -1,9 +1,12 @@
+import { ColorVariant, ToResponsiveProps } from '../../../types';
 import { SwiperApi } from '../swiper/types';
-import { ColorVariant } from '../../../types';
-export type SwiperDotsPagingProps = {
-    api?: SwiperApi;
+export type SwiperDotsPagingResponsiveProps = {
     size?: number;
     spaceBetween?: number;
-    colorVariant?: ColorVariant;
+    offset?: number;
 };
+export type SwiperDotsPagingProps = {
+    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,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,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,CAAC,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,GAAG,iBAAiB,CAAC,+BAA+B,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './swiper-side-arrows-paging';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,6 @@
+import { SwiperSideArrowsPaging } from "./swiper-side-arrows-paging.js";
+import { createOverflowStyle } from "./swiper-side-arrows-paging.js";
+export {
+  SwiperSideArrowsPaging,
+  createOverflowStyle
+};

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

@@ -0,0 +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;
+//# sourceMappingURL=swiper-side-arrows-paging.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,263 @@
+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 { getColorVar } from "../../../theme/palette.js";
+import ArrowLeftIcon from "../../../assets/svg/arrow-left.svg.js";
+import { SvgLoader } from "../../../components/svg-loader.js";
+import { Primitive } from "../../primitive/primitive.js";
+const SWIPER_SIDE_ARROWS_OVERFLOW_VAR = "--swiper-side-arrows-overflow";
+const SwiperSideArrowsPaging = ({
+  api,
+  size: size$1 = 32,
+  offset: offset$1 = 0,
+  color = "primary",
+  visibility = "auto",
+  sm,
+  md,
+  lg
+}) => {
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const [isVisible, setIsVisible] = useState(visibility === "always");
+  const hoverStateRef = useRef({ root: false, floating: false });
+  const updateVisibility = useCallback(() => {
+    const { root, floating } = hoverStateRef.current;
+    setIsVisible(root || floating);
+  }, []);
+  const {
+    floatingStyles,
+    refs: { setFloating, setReference }
+  } = useFloating({
+    placement: "top",
+    middleware: [
+      offset(({ rects }) => ({
+        crossAxis: 0,
+        mainAxis: -rects.reference.height
+      })),
+      size({
+        apply({ elements, rects }) {
+          Object.assign(elements.floating.style, {
+            width: `calc(${rects.reference.width}px + var(${SWIPER_SIDE_ARROWS_OVERFLOW_VAR}, 0px) * 2)`,
+            height: `${rects.reference.height}px`
+          });
+        }
+      })
+    ],
+    whileElementsMounted: autoUpdate
+  });
+  useEffect(() => {
+    const updateScrollState = (emblaApi) => {
+      setCanScrollPrev(emblaApi.canScrollPrev());
+      setCanScrollNext(emblaApi.canScrollNext());
+    };
+    if (api) {
+      updateScrollState(api);
+    }
+    api == null ? void 0 : api.on("select", updateScrollState);
+    return () => {
+      api == null ? void 0 : api.off("select", updateScrollState);
+    };
+  }, [api]);
+  useEffect(() => {
+    if (visibility === "always" || !api) return;
+    const rootNode = api == null ? void 0 : api.rootNode();
+    const onRootEnter = () => {
+      hoverStateRef.current.root = true;
+      updateVisibility();
+    };
+    const onRootLeave = () => {
+      hoverStateRef.current.root = false;
+      updateVisibility();
+    };
+    rootNode.addEventListener("mouseenter", onRootEnter);
+    rootNode.addEventListener("mouseleave", onRootLeave);
+    return () => {
+      rootNode.removeEventListener("mouseenter", onRootEnter);
+      rootNode.removeEventListener("mouseleave", onRootLeave);
+    };
+  }, [api, updateVisibility, visibility]);
+  const onButtonClick = (e) => {
+    const direction = e.currentTarget.dataset.direction;
+    if (direction === "next") {
+      api == null ? void 0 : api.scrollNext();
+    } else {
+      api == null ? void 0 : api.scrollPrev();
+    }
+  };
+  const onFloatingMouseEnter = (e) => {
+    if (visibility === "always") return;
+    hoverStateRef.current.floating = true;
+    updateVisibility();
+  };
+  const onFloatingMouseLeave = (e) => {
+    if (visibility === "always") return;
+    hoverStateRef.current.floating = false;
+    updateVisibility();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Primitive,
+      {
+        ref: setReference,
+        sx: {
+          position: "absolute",
+          pointerEvents: "none",
+          inset: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+      Primitive,
+      {
+        style: {
+          pointerEvents: "none",
+          ...floatingStyles
+        },
+        sx: {
+          display: "flex",
+          alignItems: "stretch",
+          justifyContent: "space-between",
+          ...createOverflowStyle({ offset: offset$1 }),
+          sm: createOverflowStyle(sm),
+          md: createOverflowStyle(md),
+          lg: createOverflowStyle(lg)
+        },
+        onMouseEnter: onFloatingMouseEnter,
+        onMouseLeave: onFloatingMouseLeave,
+        ref: setFloating,
+        children: ["prev", "next"].map((direction) => {
+          const canScroll = direction === "prev" ? canScrollPrev : canScrollNext;
+          return /* @__PURE__ */ jsx(
+            ArrowButton,
+            {
+              "data-direction": direction,
+              disabled: !canScroll,
+              direction,
+              color,
+              offset: offset$1,
+              size: size$1,
+              sm,
+              md,
+              lg,
+              visible: visibility === "always" ? true : isVisible,
+              onClick: onButtonClick
+            },
+            direction
+          );
+        })
+      }
+    ) })
+  ] });
+};
+const ArrowButton = ({
+  direction,
+  size: size2,
+  offset: offset2,
+  color,
+  visible,
+  sm,
+  md,
+  lg,
+  ...props
+}) => {
+  const slideOffset = direction === "prev" ? "-100%" : "100%";
+  return /* @__PURE__ */ jsx(
+    Primitive,
+    {
+      sx: {
+        pointerEvents: "auto",
+        position: "relative",
+        width: `var(${SWIPER_SIDE_ARROWS_OVERFLOW_VAR})`
+      },
+      children: /* @__PURE__ */ jsx(
+        Primitive,
+        {
+          sx: {
+            position: "absolute",
+            top: "50%",
+            transform: visible ? "translateY(-50%) translateX(0)" : `translateY(-50%) translateX(${slideOffset})`,
+            opacity: visible ? 1 : 0,
+            aspectRatio: 1,
+            pointerEvents: "auto",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: getColorVar(`${color}.600`),
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: getColorVar(`${color}.600`),
+            borderRadius: 9999,
+            backgroundColor: getColorVar("white"),
+            ":disabled": {
+              opacity: visible ? 0.5 : 0
+            },
+            ":hover:not(:disabled)": {
+              backgroundColor: getColorVar(`${color}.100`)
+            },
+            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, offset: offset2 }, direction),
+            sm: createArrowButtonStyle(sm, direction),
+            md: createArrowButtonStyle(md, direction),
+            lg: createArrowButtonStyle(lg, direction)
+          },
+          ...props,
+          as: "button",
+          children: /* @__PURE__ */ jsx(
+            Primitive,
+            {
+              sx: {
+                rotate: direction === "next" ? "180deg" : void 0,
+                ...createArrowIconStyle({ size: size2 }),
+                sm: createArrowIconStyle(sm),
+                md: createArrowIconStyle(md),
+                lg: createArrowIconStyle(lg)
+              },
+              children: /* @__PURE__ */ jsx(SvgLoader, { width: void 0, height: void 0, source: ArrowLeftIcon })
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const createArrowButtonStyle = ({ size: size2, offset: offset2 } = {}, direction) => {
+  const css = {
+    width: size2,
+    height: size2
+  };
+  if (isNumber(offset2)) {
+    if (direction === "prev") {
+      css.left = Math.max(offset2, 0);
+    } else {
+      css.right = Math.max(offset2, 0);
+    }
+  }
+  return css;
+};
+const createArrowIconStyle = ({ size: size2 } = {}) => {
+  if (isNil(size2)) return {};
+  const iconSize = Math.round(size2 * 0.625);
+  return {
+    width: iconSize,
+    height: iconSize
+  };
+};
+const createOverflowStyle = ({
+  offset: offset2 = 0
+} = {}) => {
+  return offset2 < 0 ? {
+    [SWIPER_SIDE_ARROWS_OVERFLOW_VAR]: `${-offset2}px`
+  } : {};
+};
+export {
+  SwiperSideArrowsPaging,
+  createOverflowStyle
+};

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

@@ -0,0 +1,13 @@
+import { ColorVariant, ToResponsiveProps } from '../../../types';
+import { SwiperApi } from '../swiper/types';
+export type SwiperSideArrowsPagingResponsiveProps = {
+    size?: number;
+    offset?: number;
+};
+export type SwiperSideArrowsPagingVisibility = 'auto' | 'always';
+export type SwiperSideArrowsPagingProps = {
+    api?: SwiperApi;
+    color?: ColorVariant;
+    visibility?: SwiperSideArrowsPagingVisibility;
+} & ToResponsiveProps<SwiperSideArrowsPagingResponsiveProps>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/package.json

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