@janbox/storefront-ui 2.0.15 → 2.0.17

package/dist/lib/badge/badge.d.ts

@@ -1,3 +1,3 @@
 import { BadgeProps } from './types';
-export declare const Badge: ({ children, ref, ..._props }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ color, content, children }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/lib/badge/badge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,eAAO,MAAM,KAAK,iCAAkC,UAAU,qDAmC7D,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/lib/badge/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAOrC,eAAO,MAAM,KAAK,iCAA0C,UAAU,4CA2DrE,CAAC"}

package/dist/lib/badge/badge.js

@@ -1,39 +1,63 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { isNumber } from "lodash-es";
-import { getBadgeProps } from "./helpers.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { isNil } from "lodash-es";
+import { useFloating, autoUpdate, offset, useMergeRefs, FloatingPortal } from "@floating-ui/react";
 import { getColorShadesByVariant } from "../../utils/index.js";
-const Badge = ({ children, ref, ..._props }) => {
-  const { badgeContent, color = "primary", ...rest } = getBadgeProps(_props);
-  const { main } = getColorShadesByVariant(color);
-  return /* @__PURE__ */ jsxs("div", { css: { position: "relative", display: "inline-block" }, ...rest, ref, children: [
-    /* @__PURE__ */ jsx(
-      "span",
+import { cloneElement } from "react";
+import { FLOATING_Z_INDEX } from "../../theme/index.js";
+import { Primitive } from "../primitive/primitive.js";
+import { getTypographyVar } from "../../theme/typography.js";
+const Badge = ({ color = "red", content, children }) => {
+  const { main, contrast } = getColorShadesByVariant(color);
+  const {
+    floatingStyles,
+    refs: { setFloating, setReference },
+    context
+  } = useFloating({
+    placement: "top-end",
+    middleware: [
+      offset(({ rects }) => ({
+        crossAxis: Math.round(rects.floating.width / 2),
+        mainAxis: -Math.round(rects.floating.height / 2)
+      }))
+    ],
+    whileElementsMounted: autoUpdate,
+    open: !isNil(content)
+  });
+  const mergedRefs = useMergeRefs([setReference, children.props.ref]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloneElement(children, {
+      ...children.props,
+      ref: mergedRefs
+    }),
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+      "div",
       {
-        css: {
-          backgroundColor: main,
-          width: "1.25rem",
-          height: "1.25rem",
-          zIndex: 10,
-          display: "flex",
-          opacity: 1,
-          alignItems: "center",
-          justifyContent: "center",
-          borderRadius: "9999px",
-          borderWidth: "1px",
-          borderStyle: "solid",
-          borderColor: "#FFFFFF",
-          color: "#FFFFFF",
-          fontSize: "0.75rem",
-          lineHeight: "1rem",
-          fontWeight: 400,
-          position: "absolute",
-          top: 0,
-          right: 0
+        style: {
+          zIndex: FLOATING_Z_INDEX,
+          ...floatingStyles
         },
-        children: isNumber(badgeContent) ? badgeContent > 9 ? "9+" : badgeContent : badgeContent
+        ref: setFloating,
+        children: /* @__PURE__ */ jsx(
+          Primitive,
+          {
+            sx: {
+              display: "flex",
+              color: contrast,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: main,
+              fontSize: getTypographyVar("xs").fontSize,
+              lineHeight: 1,
+              padding: 2,
+              minWidth: 20,
+              minHeight: 20,
+              borderRadius: 9999
+            },
+            children: content
+          }
+        )
       }
-    ),
-    children
+    ) })
   ] });
 };
 export {

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

@@ -1,7 +1,12 @@
-import { JSX } from 'react';
-import { ColorVariant, ShallowMerge } from '../../types';
-export type BadgeProps = ShallowMerge<JSX.IntrinsicElements['div'], {
-    badgeContent?: number | string;
+import { ReactElement, Ref } from 'react';
+import { ColorVariant } from '../../types';
+export type BadgeProps<T extends {
+    ref?: Ref<Element>;
+} = {
+    ref?: Ref<Element>;
+}> = {
+    content?: number | string;
     color?: ColorVariant;
-}>;
+    children: ReactElement<T>;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG,YAAY,CACnC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CACF,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CAAE,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CAAE,IAAI;IAClF,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3B,CAAC"}

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, offsetX, offsetY, color, visibility, sm, md, lg, }: SwiperSideArrowsPagingProps) => import("react/jsx-runtime").JSX.Element;
+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,oEAUhC,2BAA2B,4CAqJ7B,CAAC;AA2IF,eAAO,MAAM,mBAAmB,kBAE7B,IAAI,CAAC,qCAAqC,EAAE,SAAS,CAAC,KAAQ,SAMhE,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,4CA0L7B,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 { isNumber, isNil } 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";
@@ -14,13 +14,15 @@ const SwiperSideArrowsPaging = ({
   offsetY = "center",
   color = "primary",
   visibility = "auto",
+  anchorSelector,
   sm,
   md,
   lg
 }) => {
-  const [canScrollPrev, setCanScrollPrev] = useState(false);
-  const [canScrollNext, setCanScrollNext] = useState(false);
+  const [canScrollPrev, setCanScrollPrev] = useState(api.canScrollPrev());
+  const [canScrollNext, setCanScrollNext] = useState(api.canScrollNext());
   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;
@@ -28,7 +30,8 @@ const SwiperSideArrowsPaging = ({
   }, []);
   const {
     floatingStyles,
-    refs: { setFloating, setReference }
+    refs: { setFloating, setReference },
+    context
   } = useFloating({
     placement: "top",
     middleware: [
@@ -38,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`
@@ -45,23 +49,23 @@ const SwiperSideArrowsPaging = ({
         }
       })
     ],
-    whileElementsMounted: autoUpdate
+    whileElementsMounted: autoUpdate,
+    open: !isEmpty(referenceStyle)
   });
   useEffect(() => {
     const updateScrollState = (emblaApi) => {
       setCanScrollPrev(emblaApi.canScrollPrev());
       setCanScrollNext(emblaApi.canScrollNext());
     };
-    if (api) {
-      updateScrollState(api);
-    }
-    api == null ? void 0 : api.on("select", updateScrollState);
+    api.on("select", updateScrollState);
+    api.on("slidesChanged", updateScrollState);
     return () => {
-      api == null ? void 0 : api.off("select", updateScrollState);
+      api.off("select", updateScrollState);
+      api.off("slidesChanged", updateScrollState);
     };
   }, [api]);
   useEffect(() => {
-    if (visibility === "always" || !api) return;
+    if (visibility === "always") return;
     const rootNode = api == null ? void 0 : api.rootNode();
     const onRootEnter = () => {
       hoverStateRef.current.root = true;
@@ -78,15 +82,38 @@ const SwiperSideArrowsPaging = ({
       rootNode.removeEventListener("mouseleave", onRootLeave);
     };
   }, [api, updateVisibility, visibility]);
+  useEffect(() => {
+    if (!anchorSelector) 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") {
-      api == null ? void 0 : api.scrollNext();
+      api.scrollNext();
     } else {
-      api == null ? void 0 : api.scrollPrev();
+      api.scrollPrev();
     }
   };
-  const onFloatingMouseEnter = (e) => {
+  const onFloatingMouseEnter = (_e) => {
     if (visibility === "always") return;
     hoverStateRef.current.floating = true;
     updateVisibility();
@@ -104,11 +131,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: {

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

@@ -7,8 +7,9 @@ export type SwiperSideArrowsPagingResponsiveProps = {
 };
 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,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,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/dist/utils/index.d.ts

@@ -15,6 +15,7 @@ export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     disabledText: string;
     ariaDisabledSurface: string;
     ariaDisabledText: string;
+    contrast: string;
 } | {
     main?: undefined;
     contrastText?: undefined;
@@ -25,6 +26,7 @@ export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     disabledText?: undefined;
     ariaDisabledSurface?: undefined;
     ariaDisabledText?: undefined;
+    contrast?: undefined;
 };
 export declare const mergeComponentProps: <T extends object>(...args: Array<T | object | ((current: T) => T | object)>) => T;
 export declare const flattenChildren: (children: React.ReactNode) => ReactElement[];

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAe,MAAM,EAAqB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAcrD,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;CAyF7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAiB9G,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAYvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,2BAC/D,iBAAiB,CAAC,CAAC,CAAC,SACrB,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG;IAC3D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,uBAAuB,mBAAmB,WASnF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG;IACnF,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,uBAAuB,kBAAkB,WAWjF,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,GAAG;IAC/D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,IAAI,GAAG,MAAM,GAAG,MAAM,uBAAuB,qBAAqB,WAyBvG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAe,MAAM,EAAqB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAerD,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;;;CAgG7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAiB9G,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAYvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,2BAC/D,iBAAiB,CAAC,CAAC,CAAC,SACrB,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG;IAC3D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,uBAAuB,mBAAmB,WASnF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG;IACnF,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,uBAAuB,kBAAkB,WAWjF,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,GAAG;IAC/D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,IAAI,GAAG,MAAM,GAAG,MAAM,uBAAuB,qBAAqB,WAyBvG,CAAC"}

package/dist/utils/index.js

@@ -17,7 +17,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("primary.300"),
         disabledText: getColorVar("primary.500"),
         ariaDisabledSurface: getColorVar("primary.300"),
-        ariaDisabledText: getColorVar("primary.300")
+        ariaDisabledText: getColorVar("primary.300"),
+        contrast: getColorVar("white")
       };
     case "secondary":
       return {
@@ -29,7 +30,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("secondary.300"),
         disabledText: getColorVar("secondary.500"),
         ariaDisabledSurface: getColorVar("secondary.300"),
-        ariaDisabledText: getColorVar("secondary.300")
+        ariaDisabledText: getColorVar("secondary.300"),
+        contrast: getColorVar("white")
       };
     case "green":
       return {
@@ -41,7 +43,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("green.300"),
         disabledText: getColorVar("green.500"),
         ariaDisabledSurface: getColorVar("green.300"),
-        ariaDisabledText: getColorVar("green.300")
+        ariaDisabledText: getColorVar("green.300"),
+        contrast: getColorVar("white")
       };
     case "orange":
       return {
@@ -53,7 +56,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("orange.300"),
         disabledText: getColorVar("orange.500"),
         ariaDisabledSurface: getColorVar("orange.300"),
-        ariaDisabledText: getColorVar("orange.300")
+        ariaDisabledText: getColorVar("orange.300"),
+        contrast: getColorVar("white")
       };
     case "red":
       return {
@@ -65,7 +69,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("red.300"),
         disabledText: getColorVar("red.500"),
         ariaDisabledSurface: getColorVar("red.300"),
-        ariaDisabledText: getColorVar("red.300")
+        ariaDisabledText: getColorVar("red.300"),
+        contrast: getColorVar("white")
       };
     case "blue":
       return {
@@ -77,7 +82,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("blue.300"),
         disabledText: getColorVar("blue.500"),
         ariaDisabledSurface: getColorVar("blue.300"),
-        ariaDisabledText: getColorVar("blue.300")
+        ariaDisabledText: getColorVar("blue.300"),
+        contrast: getColorVar("white")
       };
     case "neutral":
       return {
@@ -89,7 +95,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("neutral.300"),
         disabledText: getColorVar("neutral.500"),
         ariaDisabledSurface: getColorVar("neutral.300"),
-        ariaDisabledText: getColorVar("neutral.300")
+        ariaDisabledText: getColorVar("neutral.300"),
+        contrast: getColorVar("white")
       };
     default:
       return {};

package/package.json

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