@janbox/storefront-ui 4.0.3 → 4.0.5

package/dist/lib/accordion/accordion-content/accordion-content.js

@@ -3,8 +3,8 @@ import { useRef } from "react";
 import { motion } from "motion/react";
 import { getAccordionContentProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
-import { useAccordionGroupContext } from "../accordion-group/helpers.js";
 import { Stylesheet } from "../../stylesheet/stylesheet.js";
+import { useAccordionGroupContext } from "../accordion-group/helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
 const AccordionContent = ({ children, ref, ..._props }) => {
   const { accordionContentProps: accordionContentPropsByGroup = {} } = useAccordionGroupContext();

package/dist/lib/cascader/cascader-floating-content.js

@@ -213,7 +213,7 @@ const CascaderFloatingContent = ({
               css: {
                 color: getColorVar("neutral.500"),
                 transition: "color 150ms",
-                "&:hover": { color: getColorVar("primary.600") }
+                ":hover": { color: getColorVar("primary.600") }
               },
               children: "All"
             }
@@ -234,7 +234,7 @@ const CascaderFloatingContent = ({
                       color: idx === expandedOptions.length - 1 ? getColorVar("primary.600") : getColorVar("neutral.600"),
                       fontWeight: idx === expandedOptions.length - 1 ? 500 : void 0,
                       transition: "color 150ms",
-                      "&:hover": { color: getColorVar("primary.600") }
+                      ":hover": { color: getColorVar("primary.600") }
                     },
                     children: opt.breadcrumbLabel ?? opt.label
                   }

package/dist/lib/dialog/dialog-footer/dialog-footer.d.ts

@@ -1,2 +1,2 @@
 import { DialogFooterProps } from './types';
-export declare const DialogFooter: (props: DialogFooterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogFooter: ({ sx, ...props }: DialogFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/dialog/dialog-footer/dialog-footer.js

@@ -1,20 +1,20 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
-const DialogFooter = (props) => {
+import { jsx } from "react/jsx-runtime";
+import { Primitive } from "../../primitive/primitive.js";
+const DialogFooter = ({ sx, ...props }) => {
   return /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      css: {
+      sx: {
         display: "flex",
         justifyContent: "flex-end",
-        gap: "0.5rem",
-        paddingTop: "0.5rem",
-        paddingBottom: "0.5rem",
-        paddingLeft: "1rem",
-        paddingRight: "1rem",
+        gap: 8,
+        paddingTop: 8,
+        paddingBottom: 8,
+        paddingLeft: 16,
+        paddingRight: 16,
         position: "relative",
-        [mediaQuery("sm")]: { paddingLeft: "1.25rem", paddingRight: "1.25rem" }
+        ...sx,
+        sm: { paddingLeft: 20, paddingRight: 20, ...sx == null ? void 0 : sx.sm }
       },
       ...props
     }

package/dist/lib/dialog/dialog-footer/types.d.ts

@@ -1,3 +1,3 @@
-import { HTMLAttributes } from 'react';
-export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
-}
+import { PrimitiveProps } from '../../primitive';
+import { JSX } from 'react';
+export type DialogFooterProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;

package/dist/lib/link/link.js

@@ -1,14 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { ClassNames } from "@emotion/react";
 import { isNil } from "lodash-es";
 import { Link as Link$1 } from "react-router";
 import { getLinkProps } from "./helpers.js";
 import { Booleanish } from "../../constants/index.js";
 import "react";
-import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { createUnderlineEffect } from "../../utils/stylesheet.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 const Link = ({ children, ref, ..._props }) => {
   const { sx, textVariant, sm, md, lg, to, underline = false, className, ...rest } = getLinkProps(_props);
   const onClick = (e) => {
@@ -21,10 +20,10 @@ const Link = ({ children, ref, ..._props }) => {
     }
     (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
   };
-  return /* @__PURE__ */ jsx(ClassNames, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
     Link$1,
     {
-      to: to ?? "#",
+      to: to ?? "",
       className: cx(
         className,
         css({
@@ -34,15 +33,15 @@ const Link = ({ children, ref, ..._props }) => {
           ...underline ? createUnderlineEffect() : {},
           ...createStyle({ textVariant }),
           ...sx,
-          [mediaQuery("sm")]: {
+          sm: {
             ...createStyle(sm),
             ...sx == null ? void 0 : sx.sm
           },
-          [mediaQuery("md")]: {
+          md: {
             ...createStyle(md),
             ...sx == null ? void 0 : sx.md
           },
-          [mediaQuery("lg")]: {
+          lg: {
             ...createStyle(lg),
             ...sx == null ? void 0 : sx.lg
           }

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

@@ -1,5 +1,4 @@
 import { JSX } from 'react';
-import { EmblaCarouselType } from 'embla-carousel';
 import { AutoplayOptionsType } from 'embla-carousel-autoplay';
 import { default as useEmblaCarousel } from 'embla-carousel-react';
 import { ShallowMerge, ToResponsiveProps } from '../../../types';
@@ -7,7 +6,7 @@ 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 = EmblaCarouselType;
+export type SwiperApi = NonNullable<ReturnType<typeof useEmblaCarousel>[1]>;
 export type SwiperResponsiveProps = {
     slidesPerView?: number | 'auto';
     spaceBetween?: number;

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

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { motion } from "motion/react";
-import { useTabsContext } from "../tabs/helpers.js";
 import { Stylesheet } from "../../stylesheet/stylesheet.js";
+import { useTabsContext } from "../tabs/helpers.js";
 const TabIndicator = () => {
   const { activeIndex, tabIndicatorProps } = useTabsContext();
   const indicatorEl = useRef(null);

package/dist/theme/provider.d.ts

@@ -1,13 +1,10 @@
-import { FloatingPortal } from '@floating-ui/react';
-import { ComponentProps, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { Theme } from '.';
-type PortalContainer = ComponentProps<typeof FloatingPortal>['root'];
 export type ThemeProviderProps = PropsWithChildren<{
     theme: Theme;
     locale?: string;
-    root?: PortalContainer;
+    root?: HTMLElement;
 }>;
-export declare const usePortalContainer: () => HTMLElement | ShadowRoot | import('react').MutableRefObject<HTMLElement | ShadowRoot | null> | null | undefined;
+export declare const usePortalContainer: () => HTMLElement | null;
 export declare const useTheme: () => Theme;
 export declare const ThemeProvider: ({ theme, children, locale, root }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/theme/provider.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Global } from "@emotion/react";
-import { useContext, createContext } from "react";
+import { CacheProvider, Global } from "@emotion/react";
+import createCache from "@emotion/cache";
+import { useState, useContext, createContext } from "react";
 import { getColorVar } from "./palette.js";
 import { flatten } from "flat";
 import { flatMap } from "lodash-es";
+import { prefixer } from "stylis";
 import { getTypographyVar } from "./typography.js";
 import { LocaleContext, FALLBACK_LOCALE } from "../i18n/index.js";
 const usePortalContainer = () => {
@@ -19,10 +21,11 @@ const useTheme = () => {
 const ThemeContext = createContext(null);
 const PortalContainerContext = createContext(null);
 const ThemeProvider = ({ theme, children, locale = FALLBACK_LOCALE, root }) => {
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsxs(PortalContainerContext.Provider, { value: root ?? null, children: [
+  const [emotionCache] = useState(() => createCache({ key: "jb", container: root, stylisPlugins: [prefixer] }));
+  return /* @__PURE__ */ jsx(CacheProvider, { value: emotionCache, children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsxs(PortalContainerContext.Provider, { value: root ?? null, children: [
     /* @__PURE__ */ jsx(Global, { styles: createGlobalStyle(theme) }),
     /* @__PURE__ */ jsx(LocaleContext.Provider, { value: locale, children })
-  ] }) });
+  ] }) }) });
 };
 const createGlobalStyle = ({ palette, typography }) => {
   const flattenPalette = flatten(palette);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "4.0.3",
+  "version": "4.0.5",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [
@@ -53,12 +53,13 @@
     "access": "restricted"
   },
   "peerDependencies": {
-    "@emotion/react": "*",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "react-router": ">=7.0.0"
   },
   "dependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
     "@floating-ui/react": "^0.27.13",
     "@floating-ui/react-dom": "^2.1.8",
     "@tanstack/react-virtual": "^3.10.9",
@@ -78,7 +79,8 @@
     "react-date-range": "^2.0.1",
     "react-error-boundary": "^6.1.2",
     "react-player": "^3.3.3",
-    "react-zoom-pan-pinch": "^3.7.0"
+    "react-zoom-pan-pinch": "^3.7.0",
+    "stylis": "^4.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.24.0",
@@ -90,6 +92,7 @@
     "@types/react": "^19.1.8",
     "@types/react-date-range": "^1.4.10",
     "@types/react-dom": "^19.1.6",
+    "@types/stylis": "^4.2.7",
     "csstype": "^3.1.3",
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.8",