@janbox/storefront-ui 4.0.2 → 4.0.4

package/dist/lib/badge/badge.js

@@ -4,11 +4,13 @@ import { useFloating, autoUpdate, offset, hide, useMergeRefs, FloatingPortal } f
 import { getColorShadesByVariant } from "../../utils/index.js";
 import { cloneElement } from "react";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
+import { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
 import { getTypographyVar } from "../../theme/typography.js";
 const Badge = ({ color = "red", content, offset: offset$1 = 0, children }) => {
   var _a;
   const { main, contrast } = getColorShadesByVariant(color);
+  const portalRoot = usePortalContainer();
   const {
     floatingStyles,
     refs: { setFloating, setReference },
@@ -35,7 +37,7 @@ const Badge = ({ color = "red", content, offset: offset$1 = 0, children }) => {
       ...children.props,
       ref: mergedRefs
     }),
-    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
       "div",
       {
         style: {

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/floating/floating-content/floating-content.js

@@ -5,6 +5,7 @@ import { useFloatingContext } from "../floating/helpers.js";
 import { FLOATING_Z_INDEX } from "../../../theme/index.js";
 import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
 import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { usePortalContainer } from "../../../theme/provider.js";
 const FloatingContent = ({
   style,
   floatingPortalProps,
@@ -17,7 +18,10 @@ const FloatingContent = ({
   const { getFloatingProps, context } = useFloatingContext();
   const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);
   const isHydrated = useIsHydrated();
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isHydrated && /* @__PURE__ */ jsx(FloatingPortal, { root: document.body, ...floatingPortalProps, children: /* @__PURE__ */ jsx(
+  const portalRoot = usePortalContainer();
+  const { root = portalRoot, ...portalProps } = floatingPortalProps ?? {};
+  const resolvedRoot = root || void 0;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isHydrated && /* @__PURE__ */ jsx(FloatingPortal, { root: resolvedRoot, ...portalProps, children: /* @__PURE__ */ jsx(
     FloatingOverlay,
     {
       ...floatingOverlayProps,

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/notifications/notifications.js

@@ -7,6 +7,7 @@ import { notificationStore } from "./helpers.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
+import { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { IconButton } from "../icon-button/icon-button.js";
@@ -17,7 +18,8 @@ const Notifications = () => {
     notificationStore.getSnapshot,
     notificationStore.getServerSnapshot
   );
-  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+  const portalRoot = usePortalContainer();
+  return /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
     Primitive,
     {
       sx: {

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

@@ -4,6 +4,7 @@ import { useFloating, autoUpdate, shift, flip, size, FloatingPortal } from "@flo
 import { times, isNumber } from "lodash-es";
 import { motion } from "motion/react";
 import { getColorVar } from "../../../theme/palette.js";
+import { usePortalContainer } from "../../../theme/provider.js";
 import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
 import { Primitive } from "../../primitive/primitive.js";
 const SWIPER_DOTS_SIZE_VAR = "--swiper-dots-size";
@@ -22,6 +23,7 @@ const SwiperDotsPaging = ({
   const [inViewIndexes, setInViewIndexes] = useState((api == null ? void 0 : api.slidesInView()) ?? []);
   const [totalSlides, setTotalSlides] = useState((api == null ? void 0 : api.slideNodes().length) ?? 0);
   const isHydrated = useIsHydrated();
+  const portalRoot = usePortalContainer();
   const {
     floatingStyles,
     refs: { setFloating, setReference }
@@ -81,7 +83,7 @@ const SwiperDotsPaging = ({
         }
       }
     ),
-    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
       Primitive,
       {
         style: {

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

@@ -3,6 +3,7 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import { useFloating, autoUpdate, offset, size, FloatingPortal } from "@floating-ui/react";
 import { isEmpty, isNumber, isNil } from "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
+import { usePortalContainer } from "../../../theme/provider.js";
 import ArrowLeftIcon from "../../../assets/svg/arrow-left.svg.js";
 import { SvgLoader } from "../../../components/svg-loader.js";
 import { Primitive } from "../../primitive/primitive.js";
@@ -23,6 +24,7 @@ const SwiperSideArrowsPaging = ({
   const [canScrollNext, setCanScrollNext] = useState(api.canScrollNext());
   const [isVisible, setIsVisible] = useState(visibility === "always");
   const [referenceStyle, setReferenceStyle] = useState(anchorSelector ? {} : { top: 0, bottom: 0 });
+  const portalRoot = usePortalContainer();
   const hoverStateRef = useRef({ root: false, floating: false });
   const updateVisibility = useCallback(() => {
     const { root, floating } = hoverStateRef.current;
@@ -136,7 +138,7 @@ const SwiperSideArrowsPaging = ({
         }
       }
     ),
-    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
       Primitive,
       {
         style: {

package/dist/lib/tooltip/tooltip.js

@@ -5,6 +5,7 @@ import { isUndefined, get } from "lodash-es";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
 function Tooltip({
   children,
@@ -22,6 +23,7 @@ function Tooltip({
     defaultValue: defaultOpen,
     value: open
   });
+  const portalRoot = usePortalContainer();
   const triggerRef = useRef(null);
   const arrowRef = useRef(null);
   const handleOpenChange = (val, event, reason) => {
@@ -78,7 +80,7 @@ function Tooltip({
         ref: mergedRefs
       })
     ),
-    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsxs(
       Primitive,
       {
         style: {

package/dist/theme/index.js

@@ -1,7 +1,7 @@
 import { breakpoint, containerQuery, getSmallerScreens, mediaQuery, screens } from "./screens.js";
 import { getColorVar, groupedColors, paletteVars, parseColor } from "./palette.js";
 import { getSmallerTypographyVariants, getTypographyVar, typographyVars } from "./typography.js";
-import { ThemeProvider, useTheme } from "./provider.js";
+import { ThemeProvider, usePortalContainer, useTheme } from "./provider.js";
 import { createTheme, defaultTheme } from "./create-theme.js";
 const FLOATING_Z_INDEX = 9999;
 export {
@@ -21,5 +21,6 @@ export {
   parseColor,
   screens,
   typographyVars,
+  usePortalContainer,
   useTheme
 };

package/dist/theme/provider.d.ts

@@ -3,6 +3,8 @@ import { Theme } from '.';
 export type ThemeProviderProps = PropsWithChildren<{
     theme: Theme;
     locale?: string;
+    root?: HTMLElement;
 }>;
+export declare const usePortalContainer: () => HTMLElement | null;
 export declare const useTheme: () => Theme;
-export declare const ThemeProvider: ({ theme, children, locale }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ theme, children, locale, root }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/theme/provider.js

@@ -1,11 +1,15 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Global } from "@emotion/react";
-import { useContext, createContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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 { getTypographyVar } from "./typography.js";
 import { LocaleContext, FALLBACK_LOCALE } from "../i18n/index.js";
+const usePortalContainer = () => {
+  return useContext(PortalContainerContext);
+};
 const useTheme = () => {
   const context = useContext(ThemeContext);
   if (!context) {
@@ -14,11 +18,13 @@ const useTheme = () => {
   return context;
 };
 const ThemeContext = createContext(null);
-const ThemeProvider = ({ theme, children, locale = FALLBACK_LOCALE }) => {
-  return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value: theme, children: [
+const PortalContainerContext = createContext(null);
+const ThemeProvider = ({ theme, children, locale = FALLBACK_LOCALE, root }) => {
+  const [emotionCache] = useState(() => createCache({ key: "jb", container: root }));
+  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);
@@ -304,5 +310,6 @@ const createGlobalStyle = ({ palette, typography }) => {
 };
 export {
   ThemeProvider,
+  usePortalContainer,
   useTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "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",