@janbox/storefront-ui 4.0.6 → 4.0.8

package/dist/lib/lightbox/lightbox.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { times } from "lodash-es";
 import { motion } from "motion/react";
@@ -15,8 +15,8 @@ import { SwiperSlide } from "../swiper/swiper-slide/swiper-slide.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
 import { Primitive } from "../primitive/primitive.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { Image } from "../image/image.js";
-import { mediaQuery } from "../../theme/screens.js";
 import { FloatingClose } from "../floating/floating-close/floating-close.js";
 import { IconButton } from "../icon-button/icon-button.js";
 const LightboxIconButton = (props) => {
@@ -24,7 +24,7 @@ const LightboxIconButton = (props) => {
     IconButton,
     {
       color: "neutral",
-      css: {
+      sx: {
         backgroundColor: "rgba(255, 255, 255, 0.1)",
         color: "white",
         borderRadius: "50%",
@@ -59,9 +59,9 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
     };
   }, [mainApi]);
   return /* @__PURE__ */ jsx(Primitive, { sx: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      css: {
+      sx: {
         position: "relative",
         width: "100%",
         flex: 1,
@@ -73,12 +73,12 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
         paddingBottom: 24,
         paddingLeft: 16,
         paddingRight: 16,
-        [mediaQuery("md")]: { paddingLeft: 32, paddingRight: 32 }
+        md: { paddingLeft: 32, paddingRight: 32 }
       },
       children: /* @__PURE__ */ jsxs(
-        "div",
+        Primitive,
         {
-          css: {
+          sx: {
             position: "relative",
             width: "100%",
             height: "100%",
@@ -86,10 +86,10 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
             paddingBottom: 20,
             paddingLeft: 0,
             paddingRight: 0,
-            [mediaQuery("md")]: { paddingLeft: 20, paddingRight: 20 }
+            md: { paddingLeft: 20, paddingRight: 20 }
           },
           children: [
-            /* @__PURE__ */ jsx("div", { css: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Primitive, { sx: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
               Swiper,
               {
                 options: {
@@ -102,20 +102,20 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
                 },
                 onApi: setMainApi,
                 slidesPerView: 1,
-                css: { width: "100%", height: "100%" },
-                children: times(slides.length).map((index) => /* @__PURE__ */ jsx(SwiperSlide, { children: activeIndex === index && /* @__PURE__ */ jsx(
+                sx: { width: "100%", height: "100%" },
+                children: times(slides.length).map((index) => /* @__PURE__ */ jsx(SwiperSlide, { children: activeIndex === index && /* @__PURE__ */ jsx(Stylesheet, { children: ({ css }) => /* @__PURE__ */ jsx(
                   motion.div,
                   {
-                    css: {
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    exit: { opacity: 0 },
+                    className: css({
                       display: "flex",
                       width: "100%",
                       height: "100%",
                       alignItems: "center",
                       justifyContent: "center"
-                    },
-                    initial: { opacity: 0 },
-                    animate: { opacity: 1 },
-                    exit: { opacity: 0 },
+                    }),
                     children: /* @__PURE__ */ jsxs("div", { ref: contentElementRef, children: [
                       (activeSlide == null ? void 0 : activeSlide.source.type) === "image" && /* @__PURE__ */ jsx(
                         TransformWrapper,
@@ -139,7 +139,7 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
                           ) })
                         }
                       ),
-                      (activeSlide == null ? void 0 : activeSlide.source.type) === "video" && /* @__PURE__ */ jsx("div", { css: { aspectRatio: "16/9", width: "100%" }, children: /* @__PURE__ */ jsx(
+                      (activeSlide == null ? void 0 : activeSlide.source.type) === "video" && /* @__PURE__ */ jsx(Primitive, { sx: { aspectRatio: "16/9", width: "100%" }, children: /* @__PURE__ */ jsx(
                         ReactPlayer,
                         {
                           light: activeSlide.source.thumbnail,
@@ -151,17 +151,29 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
                       ) })
                     ] })
                   }
-                ) }, index))
+                ) }) }, index))
               }
             ) }),
-            slides.length > 1 && /* @__PURE__ */ jsxs("div", { css: { display: "none", [mediaQuery("md")]: { display: "contents" } }, children: [
-              /* @__PURE__ */ jsx("div", { css: { position: "absolute", left: 0, top: "50%", transform: "translateY(-50%) translateX(-50%)" }, children: /* @__PURE__ */ jsx(LightboxIconButton, { size: "sm", onClick: handlePrevious, icon: { source: ArrowLeftIcon } }) }),
-              /* @__PURE__ */ jsx("div", { css: { position: "absolute", right: 0, top: "50%", transform: "translateY(-50%) translateX(50%)" }, children: /* @__PURE__ */ jsx(LightboxIconButton, { size: "sm", onClick: handleNext, icon: { source: ArrowRightIcon } }) })
+            slides.length > 1 && /* @__PURE__ */ jsxs(Primitive, { sx: { display: "none", md: { display: "contents" } }, children: [
+              /* @__PURE__ */ jsx(
+                Primitive,
+                {
+                  sx: { position: "absolute", left: 0, top: "50%", transform: "translateY(-50%) translateX(-50%)" },
+                  children: /* @__PURE__ */ jsx(LightboxIconButton, { size: "sm", onClick: handlePrevious, icon: { source: ArrowLeftIcon } })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Primitive,
+                {
+                  sx: { position: "absolute", right: 0, top: "50%", transform: "translateY(-50%) translateX(50%)" },
+                  children: /* @__PURE__ */ jsx(LightboxIconButton, { size: "sm", onClick: handleNext, icon: { source: ArrowRightIcon } })
+                }
+              )
             ] }),
             /* @__PURE__ */ jsx(
-              "div",
+              Primitive,
               {
-                css: {
+                sx: {
                   position: "absolute",
                   left: -4,
                   top: 0,
@@ -169,7 +181,7 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
                   display: "flex",
                   alignItems: "center",
                   gap: 8,
-                  [mediaQuery("md")]: { left: -10 }
+                  md: { left: -10 }
                 },
                 children: slides.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
                   activeIndex + 1,
@@ -179,9 +191,9 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
               }
             ),
             /* @__PURE__ */ jsxs(
-              "div",
+              Primitive,
               {
-                css: {
+                sx: {
                   position: "absolute",
                   right: -4,
                   top: 0,
@@ -189,10 +201,10 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
                   display: "flex",
                   alignItems: "center",
                   gap: 8,
-                  [mediaQuery("md")]: { right: -10 }
+                  md: { right: -10 }
                 },
                 children: [
-                  slides.length > 1 && /* @__PURE__ */ jsxs("div", { css: { display: "contents", [mediaQuery("md")]: { display: "none" } }, children: [
+                  slides.length > 1 && /* @__PURE__ */ jsxs(Primitive, { sx: { display: "contents", md: { display: "none" } }, children: [
                     /* @__PURE__ */ jsx(LightboxIconButton, { size: "sm", onClick: handlePrevious, icon: { source: ArrowLeftIcon } }),
                     /* @__PURE__ */ jsx(LightboxIconButton, { size: "sm", onClick: handleNext, icon: { source: ArrowRightIcon } })
                   ] }),
@@ -225,9 +237,9 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
               }
             ),
             (activeSlide == null ? void 0 : activeSlide.title) && /* @__PURE__ */ jsx(
-              "div",
+              Primitive,
               {
-                css: {
+                sx: {
                   position: "absolute",
                   bottom: 0,
                   left: "50%",
@@ -271,7 +283,7 @@ const Lightbox = ({ slides, defaultActiveIndex, ...props }) => {
               color: "white"
             }
           },
-          css: { width: "100%", height: "100%" },
+          sx: { width: "100%", height: "100%" },
           children: /* @__PURE__ */ jsx(LightboxContent, { slides, defaultActiveIndex })
         }
       )

package/dist/lib/linear-progress/linear-progress.d.ts

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

package/dist/lib/linear-progress/linear-progress.js

@@ -1,68 +1,67 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { isNil, isNumber } from "lodash-es";
 import { motion } from "motion/react";
 import { getLinearProgressProps } from "./helpers.js";
-import { mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
+import { Primitive } from "../primitive/primitive.js";
 const LinearProgress = (_props) => {
   const { size, color, sm, md, lg, value, variant: _variant, ...props } = getLinearProgressProps(_props);
   const palette = getColorShadesByVariant(color);
   const fallbackVariant = isNil(value) ? "indeterminate" : "determinate";
   const variant = _variant ?? fallbackVariant;
-  const rootInterpolation = [
+  return /* @__PURE__ */ jsxs(
+    Primitive,
     {
-      position: "relative",
-      width: "100%",
-      overflow: "hidden",
-      backgroundColor: palette.light,
-      [`& > *`]: {
-        position: "absolute",
-        height: "100%",
-        backgroundColor: palette.main
-      }
-    },
-    createStyle({ size }),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
-    }
-  ];
-  return /* @__PURE__ */ jsxs("div", { css: rootInterpolation, ...props, children: [
-    variant === "indeterminate" && /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: { left: "-25%", width: "25%" },
-        animate: { left: "100%", width: "50%" },
-        transition: {
-          repeat: Infinity,
-          ease: "linear",
-          duration: 1.5
-        }
-      }
-    ),
-    variant === "determinate" && /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: {
-          width: `${value ?? 0}%`
+      sx: {
+        position: "relative",
+        width: "100%",
+        overflow: "hidden",
+        backgroundColor: palette.light,
+        "*": {
+          position: "absolute",
+          height: "100%",
+          backgroundColor: palette.main
         },
-        animate: { width: `${value ?? 0}%` }
-      }
-    )
-  ] });
+        ...createStyle({ size }),
+        sm: createStyle(sm),
+        md: createStyle(md),
+        lg: createStyle(lg)
+      },
+      ...props,
+      children: [
+        variant === "indeterminate" && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { left: "-25%", width: "25%" },
+            animate: { left: "100%", width: "50%" },
+            transition: {
+              repeat: Infinity,
+              ease: "linear",
+              duration: 1.5
+            }
+          }
+        ),
+        variant === "determinate" && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: {
+              width: `${value ?? 0}%`
+            },
+            animate: { width: `${value ?? 0}%` }
+          }
+        )
+      ]
+    }
+  );
 };
 const createStyle = ({ size } = {}) => {
-  return [
-    {
-      height: size,
-      borderRadius: isNumber(size) ? size / 2 : void 0,
-      [`& > *`]: {
-        borderRadius: isNumber(size) ? size / 2 : void 0
-      }
+  return {
+    height: size,
+    borderRadius: isNumber(size) ? size / 2 : void 0,
+    [`& > *`]: {
+      borderRadius: isNumber(size) ? size / 2 : void 0
     }
-  ];
+  };
 };
 export {
   LinearProgress

package/dist/lib/loading/image-skeleton/image-skeleton.d.ts

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

package/dist/lib/loading/image-skeleton/image-skeleton.js

@@ -1,8 +1,9 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
 import { Primitive } from "../../primitive/primitive.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const ImageSkeleton = (props) => {
   return /* @__PURE__ */ jsx(
     Primitive,
@@ -19,17 +20,21 @@ const ImageSkeleton = (props) => {
         backgroundColor: getColorVar("neutral.200"),
         ...props.sx
       },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(Stylesheet, { children: ({ css }) => /* @__PURE__ */ jsx(
         "svg",
         {
-          css: { width: "25%", height: "25%", color: getColorVar("neutral.400") },
           "aria-hidden": "true",
           xmlns: "http://www.w3.org/2000/svg",
           fill: "currentColor",
           viewBox: "0 0 20 18",
+          className: css({
+            width: "25%",
+            height: "25%",
+            color: getColorVar("neutral.400")
+          }),
           children: /* @__PURE__ */ jsx("path", { d: "M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" })
         }
-      )
+      ) })
     }
   );
 };

package/dist/lib/loading/loading-overlay/loading-overlay.d.ts

@@ -1,2 +1,2 @@
 import { LoadingOverlayProps } from './types';
-export declare const LoadingOverlay: ({ isLoading, iconProps, color, style, size, children, ...props }: LoadingOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LoadingOverlay: ({ isLoading, iconProps, color, style, size, children, ...props }: LoadingOverlayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/loading/loading-overlay/loading-overlay.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { SvgLoader } from "../../../components/svg-loader.js";
 import { animateSpinStyle } from "../../../constants/emotion.js";
 import LoadingIcon from "../../../assets/svg/loading-waiting.svg.js";
@@ -45,7 +45,7 @@ const LoadingOverlay = ({
               cursor: "progress",
               ...iconProps == null ? void 0 : iconProps.sx
             },
-            children: /* @__PURE__ */ jsx(SvgLoader, { source: LoadingIcon, width: size, height: size, css: animateSpinStyle, style: { color: main } })
+            children: /* @__PURE__ */ jsx(SvgLoader, { source: LoadingIcon, width: size, height: size, sx: animateSpinStyle, style: { color: main } })
           }
         )
       ]

package/dist/lib/menu/menu-item/menu-item.d.ts

@@ -1,2 +1,2 @@
 import { MenuItemProps } from './types';
-export declare const MenuItem: ({ ref, ..._props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ ref, ..._props }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/menu/menu-item/menu-item.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { getMenuItemProps } from "./helpers.js";
 import { HTMLDatasetAttributes, Booleanish } from "../../../constants/index.js";
 import { Button } from "../../button/button.js";
@@ -17,7 +17,7 @@ const MenuItem = ({ ref, ..._props }) => {
     Button,
     {
       ...props,
-      css: {
+      sx: {
         justifyContent: "start",
         textAlign: "left",
         width: "100%"

package/dist/lib/multiple-select/multiple-select.d.ts

@@ -1,2 +1,2 @@
 import { MultipleSelectProps } from './types';
-export declare const MultipleSelect: <O extends object = object>({ ref, ...props }: MultipleSelectProps<O>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MultipleSelect: <O extends object = object>({ ref, ...props }: MultipleSelectProps<O>) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/multiple-select/multiple-select.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useId, useCallback, useMemo, useEffect } from "react";
 import { get, isNil, isElement, trimStart } from "lodash-es";
 import { getMultipleSelectProps } from "./helpers.js";
@@ -159,7 +159,7 @@ const MultipleSelect = ({ ref, ...props }) => {
             width: "100%"
           }
         },
-        children: /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: isNil(rowData) ? /* @__PURE__ */ jsx(TextSkeleton, { css: { width: "100%" } }) : getOptionLabel(rowData) })
+        children: /* @__PURE__ */ jsx(Primitive, { sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: isNil(rowData) ? /* @__PURE__ */ jsx(TextSkeleton, { sx: { width: "100%" } }) : getOptionLabel(rowData) })
       }
     );
   };
@@ -245,7 +245,7 @@ const MultipleSelect = ({ ref, ...props }) => {
                       source: ArrowDownIcon,
                       width: 20,
                       height: 20,
-                      css: {
+                      sx: {
                         transition: "transform 150ms",
                         ...isOpen ? { transform: "rotate(-180deg)" } : {}
                       }
@@ -254,24 +254,22 @@ const MultipleSelect = ({ ref, ...props }) => {
                   ...rest,
                   ref,
                   children: /* @__PURE__ */ jsx(
-                    "div",
+                    Primitive,
                     {
-                      css: [
-                        {
-                          flex: 1,
-                          textAlign: "left",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap",
-                          paddingTop: 4,
-                          paddingBottom: 4
-                        },
-                        getTextCss(rest == null ? void 0 : rest.size)
-                      ],
+                      sx: {
+                        flex: 1,
+                        textAlign: "left",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        paddingTop: 4,
+                        paddingBottom: 4,
+                        ...getTextCss(rest == null ? void 0 : rest.size)
+                      },
                       children: selectedValueMap.size > 0 ? /* @__PURE__ */ jsxs(
-                        "div",
+                        Primitive,
                         {
-                          css: {
+                          sx: {
                             display: "flex",
                             gap: 4,
                             ...displayCount > 1 ? { flexWrap: "wrap" } : {}
@@ -281,42 +279,44 @@ const MultipleSelect = ({ ref, ...props }) => {
                               const rowValue = getOptionValue(selectedOption);
                               const rowLabel = getTagLabel(selectedOption) ?? getOptionLabel(selectedOption);
                               return /* @__PURE__ */ jsx(
-                                "div",
+                                Primitive,
                                 {
-                                  css: {
+                                  sx: {
                                     display: "flex",
                                     alignItems: "center",
                                     gap: 8,
                                     overflow: "hidden",
                                     borderRadius: 8,
                                     backgroundColor: getColorVar("neutral.100"),
-                                    paddingLeft: 8,
-                                    paddingRight: 8,
-                                    paddingTop: 4,
-                                    paddingBottom: 4,
+                                    paddingInline: 8,
+                                    paddingBlock: 4,
                                     fontSize: "0.75rem",
                                     lineHeight: "1rem"
                                   },
-                                  children: /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: isElement(rowLabel) ? rowLabel : /* @__PURE__ */ jsx("span", { children: rowLabel }) })
+                                  children: /* @__PURE__ */ jsx(
+                                    Primitive,
+                                    {
+                                      sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                                      children: isElement(rowLabel) ? rowLabel : /* @__PURE__ */ jsx("span", { children: rowLabel })
+                                    }
+                                  )
                                 },
                                 rowValue.toString()
                               );
                             }),
                             displayCount < selectedValueMap.size && /* @__PURE__ */ jsx(
-                              "div",
+                              Primitive,
                               {
-                                css: {
+                                sx: {
                                   borderRadius: 8,
                                   backgroundColor: getColorVar("neutral.100"),
-                                  paddingLeft: 8,
-                                  paddingRight: 8,
-                                  paddingTop: 4,
-                                  paddingBottom: 4,
+                                  paddingInline: 8,
+                                  paddingBlock: 4,
                                   fontSize: "0.75rem",
                                   lineHeight: "1rem",
                                   flexShrink: 0
                                 },
-                                children: /* @__PURE__ */ jsxs("span", { css: { fontWeight: 500 }, children: [
+                                children: /* @__PURE__ */ jsxs(Primitive, { as: "span", sx: { fontWeight: 500 }, children: [
                                   "+",
                                   selectedValueMap.size - displayCount
                                 ] })
@@ -324,17 +324,16 @@ const MultipleSelect = ({ ref, ...props }) => {
                             )
                           ]
                         }
-                      ) : /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400"), display: "block" }, children: placeholder })
+                      ) : /* @__PURE__ */ jsx(Primitive, { as: "span", sx: { color: getColorVar("neutral.400"), display: "block" }, children: placeholder })
                     }
                   )
                 }
               ) }),
               /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsxs(
-                "div",
+                Primitive,
                 {
-                  css: {
-                    paddingTop: 8,
-                    paddingBottom: 8,
+                  sx: {
+                    paddingBlock: 8,
                     border: "1px solid",
                     borderColor: getColorVar("border.default"),
                     borderRadius: 8,
@@ -344,7 +343,7 @@ const MultipleSelect = ({ ref, ...props }) => {
                     backgroundColor: getColorVar("surface.default")
                   },
                   children: [
-                    searchable && /* @__PURE__ */ jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
+                    searchable && /* @__PURE__ */ jsx(Primitive, { sx: { paddingInline: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
                       Input,
                       {
                         size: rest.size,
@@ -361,7 +360,7 @@ const MultipleSelect = ({ ref, ...props }) => {
                       VirtualizedList,
                       {
                         ...listProps,
-                        css: { paddingLeft: 4, paddingRight: 4 },
+                        sx: { paddingInline: 4 },
                         options: {
                           count: displayOptions.length,
                           estimateSize,

package/dist/lib/notifications/notifications.d.ts

@@ -1 +1 @@
-export declare const Notifications: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Notifications: () => import("react/jsx-runtime").JSX.Element;

package/dist/lib/notifications/notifications.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useSyncExternalStore, useRef, useCallback, useEffect } from "react";
 import { FloatingPortal } from "@floating-ui/react";
 import { isNil } from "lodash-es";
@@ -9,9 +9,9 @@ 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 { Stylesheet } from "../stylesheet/stylesheet.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { IconButton } from "../icon-button/icon-button.js";
-import { mediaQuery } from "../../theme/screens.js";
 const Notifications = () => {
   const { entries } = useSyncExternalStore(
     notificationStore.subscribe,
@@ -99,7 +99,7 @@ const Notification = ({ notification }) => {
       }
     });
   }, [startTimer, progressControls]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ css }) => /* @__PURE__ */ jsxs(
     motion.div,
     {
       layout: true,
@@ -107,7 +107,7 @@ const Notification = ({ notification }) => {
       animate: { opacity: 1, x: 0 },
       exit: { opacity: 0, x: 300 },
       transition: { duration: 0.3 },
-      css: {
+      className: css({
         backgroundColor: light,
         outlineColor: main,
         width: 400,
@@ -124,11 +124,11 @@ const Notification = ({ notification }) => {
         padding: 12,
         overflow: "hidden",
         position: "relative",
-        [mediaQuery("md")]: {
+        md: {
           padding: 16,
           width: 440
         }
-      },
+      }),
       drag: "x",
       dragConstraints: { left: 0, right: 0 },
       onMouseEnter: handleMouseEnter,
@@ -227,7 +227,7 @@ const Notification = ({ notification }) => {
         )
       ]
     }
-  );
+  ) });
 };
 export {
   Notifications

package/dist/lib/otp-input/otp-input.d.ts

@@ -1,2 +1,2 @@
 import { OtpInputProps } from './types';
-export declare const OtpInput: ({ length, onFullfilled, onChange, disabled, autoFocus, isLoading, defaultValue, value, error, size, sm, md, lg, }: OtpInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OtpInput: ({ length, onFullfilled, onChange, disabled, autoFocus, isLoading, defaultValue, value, error, size, sm, md, lg, }: OtpInputProps) => import("react/jsx-runtime").JSX.Element;