@janbox/storefront-ui 4.0.7 → 4.0.8

package/dist/lib/dialog/dialog/dialog.js

@@ -1,8 +1,9 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { getDialogProps, getDialogSizeInNumber } from "./helpers.js";
 import { FLOATING_Z_INDEX } from "../../../theme/index.js";
 import { Floating } from "../../floating/floating/floating.js";
 import { FloatingContent } from "../../floating/floating-content/floating-content.js";
+import { Primitive } from "../../primitive/primitive.js";
 import { getColorVar } from "../../../theme/palette.js";
 import { mediaQuery } from "../../../theme/screens.js";
 const Dialog = (_props) => {
@@ -31,7 +32,7 @@ const Dialog = (_props) => {
               zIndex: FLOATING_Z_INDEX
             }
           },
-          css: {
+          sx: {
             maxHeight: "100%",
             maxWidth: "100%",
             overflow: "hidden",
@@ -40,9 +41,9 @@ const Dialog = (_props) => {
           },
           children: [
             /* @__PURE__ */ jsx(
-              "div",
+              Primitive,
               {
-                css: {
+                sx: {
                   backdropFilter: "blur(2px)",
                   position: "fixed",
                   inset: 0,
@@ -52,33 +53,29 @@ const Dialog = (_props) => {
               }
             ),
             /* @__PURE__ */ jsx(
-              "div",
+              Primitive,
               {
-                css: [
-                  {
-                    width: getDialogSizeInNumber(size),
-                    backgroundColor: getColorVar("surface.default"),
-                    maxWidth: "100%",
-                    overflow: "hidden",
-                    display: "flex",
-                    flexDirection: "column",
-                    borderRadius: "0.5rem",
-                    paddingTop: "0.5rem",
-                    paddingBottom: "0.5rem",
-                    position: "relative"
+                sx: {
+                  width: getDialogSizeInNumber(size),
+                  backgroundColor: getColorVar("surface.default"),
+                  maxWidth: "100%",
+                  overflow: "hidden",
+                  display: "flex",
+                  flexDirection: "column",
+                  borderRadius: "0.5rem",
+                  paddingTop: "0.5rem",
+                  paddingBottom: "0.5rem",
+                  position: "relative",
+                  sm: {
+                    width: getDialogSizeInNumber(sm == null ? void 0 : sm.size)
                   },
-                  {
-                    [mediaQuery("sm")]: {
-                      width: getDialogSizeInNumber(sm == null ? void 0 : sm.size)
-                    },
-                    [mediaQuery("md")]: {
-                      width: getDialogSizeInNumber(md == null ? void 0 : md.size)
-                    },
-                    [mediaQuery("lg")]: {
-                      width: getDialogSizeInNumber(lg == null ? void 0 : lg.size)
-                    }
+                  md: {
+                    width: getDialogSizeInNumber(md == null ? void 0 : md.size)
+                  },
+                  lg: {
+                    width: getDialogSizeInNumber(lg == null ? void 0 : lg.size)
                   }
-                ],
+                },
                 children
               }
             )

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

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

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

@@ -1,23 +1,22 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ScrollView } from "../../../components/scroll-view.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
 const DialogBody = (props) => {
+  var _a;
   return /* @__PURE__ */ jsx(
     ScrollView,
     {
-      css: {
+      ...props,
+      sx: {
         flex: "1 1 0%",
         paddingTop: "0.5rem",
         paddingBottom: "0.5rem",
         overflow: "auto",
-        "&:first-of-type": { paddingTop: "0.75rem" },
-        "&:last-of-type": { paddingBottom: "0.75rem" },
-        paddingLeft: "1rem",
-        paddingRight: "1rem",
-        [mediaQuery("sm")]: { paddingLeft: "1.25rem", paddingRight: "1.25rem" }
-      },
-      ...props
+        "&:first-of-type": { paddingTop: 12 },
+        "&:last-of-type": { paddingBottom: 12 },
+        paddingInline: 16,
+        ...props.sx,
+        md: { paddingInline: 20, ...(_a = props.sx) == null ? void 0 : _a.md }
+      }
     }
   );
 };

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

@@ -1,3 +1,2 @@
-import { ScrollViewProps } from '../../../components';
-import { ShallowMerge } from '../../../types';
-export type DialogBodyProps = ShallowMerge<ScrollViewProps, {}>;
+import { ScrollViewProps } from '../../../components/scroll-view';
+export type DialogBodyProps = ScrollViewProps;

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

@@ -1 +1 @@
-export declare const DialogClose: ({ event, reason, ref, ...props }: import('../../floating').FloatingCloseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogClose: ({ event, reason, ref, ...props }: import('../../floating').FloatingCloseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -10,11 +10,10 @@ const DialogFooter = ({ sx, ...props }) => {
         gap: 8,
         paddingTop: 8,
         paddingBottom: 8,
-        paddingLeft: 16,
-        paddingRight: 16,
+        paddingInline: 16,
         position: "relative",
         ...sx,
-        sm: { paddingLeft: 20, paddingRight: 20, ...sx == null ? void 0 : sx.sm }
+        md: { paddingInline: 20, gap: 12, ...sx == null ? void 0 : sx.md }
       },
       ...props
     }

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

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

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

@@ -1,46 +1,43 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import CloseIcon from "../../../assets/svg/times-close-delete.svg.js";
-import { mediaQuery } from "../../../theme/screens.js";
+import "lodash-es";
 import "../../../theme/palette.js";
 import { getTypographyVar } from "../../../theme/typography.js";
 import { DialogClose } from "../dialog-close/dialog-close.js";
+import { Primitive } from "../../primitive/primitive.js";
 import { IconButton } from "../../icon-button/icon-button.js";
 const DialogHeader = ({ children, closeable = true, ...props }) => {
   return /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
-      css: [
-        {
-          paddingTop: "0.5rem",
-          paddingBottom: "0.5rem",
-          paddingLeft: "1rem",
-          paddingRight: "1rem",
-          gap: "0.5rem",
-          position: "relative",
-          fontSize: getTypographyVar("lg").fontSize,
-          lineHeight: getTypographyVar("lg").lineHeight,
-          fontWeight: 500,
-          [mediaQuery("sm")]: {
-            paddingLeft: "1.25rem",
-            paddingRight: "1.25rem",
-            fontSize: getTypographyVar("xl").fontSize,
-            lineHeight: getTypographyVar("xl").lineHeight
-          }
-        },
-        closeable && { paddingRight: "3rem" }
-      ],
       ...props,
+      sx: {
+        paddingLeft: 16,
+        paddingRight: closeable ? 48 : 20,
+        paddingBlock: 8,
+        gap: 8,
+        position: "relative",
+        fontSize: getTypographyVar("lg").fontSize,
+        lineHeight: getTypographyVar("lg").lineHeight,
+        fontWeight: 500,
+        md: {
+          paddingLeft: 20,
+          paddingRight: closeable ? 52 : 20,
+          fontSize: getTypographyVar("xl").fontSize,
+          lineHeight: getTypographyVar("xl").lineHeight
+        }
+      },
       children: [
         children,
         closeable && /* @__PURE__ */ jsx(DialogClose, { children: /* @__PURE__ */ jsx(
-          "div",
+          Primitive,
           {
-            css: {
+            sx: {
               position: "absolute",
-              right: "0.5rem",
+              right: 8,
               top: "50%",
               transform: "translateY(-50%)",
-              [mediaQuery("sm")]: { right: "0.75rem" }
+              md: { right: 12 }
             },
             children: /* @__PURE__ */ jsx(
               IconButton,

package/dist/lib/drawer/drawer/drawer.d.ts

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

package/dist/lib/drawer/drawer/drawer.js

@@ -1,9 +1,11 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { motion } from "motion/react";
 import { FLOATING_Z_INDEX } from "../../../theme/index.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";
 const Drawer = ({ children, placement = "left", ...props }) => {
   const initial = useMemo(() => {
     switch (placement) {
@@ -44,7 +46,7 @@ const Drawer = ({ children, placement = "left", ...props }) => {
               zIndex: FLOATING_Z_INDEX
             }
           },
-          css: {
+          sx: {
             maxHeight: "100%",
             maxWidth: "100%",
             overflow: "hidden",
@@ -53,9 +55,9 @@ const Drawer = ({ children, placement = "left", ...props }) => {
           },
           children: [
             /* @__PURE__ */ jsx(
-              "div",
+              Primitive,
               {
-                css: {
+                sx: {
                   position: "fixed",
                   top: 0,
                   right: 0,
@@ -66,29 +68,40 @@ const Drawer = ({ children, placement = "left", ...props }) => {
                 }
               }
             ),
-            /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                initial,
-                animate,
-                exit: initial,
-                transition: {
-                  duration: 0.2,
-                  ease: "easeInOut"
-                },
-                css: [
-                  {
-                    position: "fixed",
-                    backgroundColor: "white"
+            /* @__PURE__ */ jsx(Stylesheet, { children: ({ css }) => {
+              const placementStyle = (() => {
+                switch (placement) {
+                  case "left":
+                    return { top: 0, bottom: 0, left: 0 };
+                  case "right":
+                    return { top: 0, bottom: 0, right: 0 };
+                  case "top":
+                    return { left: 0, right: 0, top: 0 };
+                  case "bottom":
+                    return { left: 0, right: 0, bottom: 0 };
+                  default:
+                    return {};
+                }
+              })();
+              return /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial,
+                  animate,
+                  exit: initial,
+                  transition: {
+                    duration: 0.2,
+                    ease: "easeInOut"
                   },
-                  placement === "left" && { top: 0, bottom: 0, left: 0 },
-                  placement === "right" && { top: 0, bottom: 0, right: 0 },
-                  placement === "top" && { left: 0, right: 0, top: 0 },
-                  placement === "bottom" && { left: 0, right: 0, bottom: 0 }
-                ],
-                children
-              }
-            )
+                  className: css({
+                    position: "fixed",
+                    backgroundColor: "white",
+                    ...placementStyle
+                  }),
+                  children
+                }
+              );
+            } })
           ]
         }
       )

package/dist/lib/drawer/drawer-close/drawer-close.d.ts

@@ -1 +1 @@
-export declare const DrawerClose: ({ event, reason, ref, ...props }: import('../../floating').FloatingCloseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DrawerClose: ({ event, reason, ref, ...props }: import('../../floating').FloatingCloseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/filter-panel/checkbox-filter-panel.d.ts

@@ -1,2 +1,2 @@
 import { CheckboxFilterPanelProps } from './types';
-export declare const CheckboxFilterPanel: ({ value, options, inputSearchProps: _inputSearchProps, onChange, queryParam, name, listProps, }: CheckboxFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CheckboxFilterPanel: ({ value, options, inputSearchProps: _inputSearchProps, onChange, queryParam, name, listProps, }: CheckboxFilterPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/filter-panel/checkbox-filter-panel.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { trimStart } from "lodash-es";
 import { VirtualizedList } from "../../components/virtualized-list.js";
@@ -96,7 +96,7 @@ const CheckboxFilterPanel = ({
           maxHeight: ROW_HEIGHT * DISPLAY_ROW_COUNT,
           ...listProps == null ? void 0 : listProps.style
         },
-        css: { paddingLeft: 8, paddingRight: 8 },
+        sx: { paddingInline: 8 },
         ...listProps
       }
     )

package/dist/lib/filter-panel/filter-panel.d.ts

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

package/dist/lib/filter-panel/filter-panel.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { isValidElement } from "react";
 import { useToggle } from "../../hooks/use-toggle/index.js";
 import { CheckboxFilterPanel } from "./checkbox-filter-panel.js";
@@ -7,23 +7,38 @@ import { InputTextFilterPanel } from "./input-text-filter-panel.js";
 import { RadioFilterPanel } from "./radio-filter-panel.js";
 import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
 import { Collapse } from "../collapse/collapse.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Icon } from "../icon/icon.js";
 const FilterPanel = ({ label, defaultOpen = true, ...props }) => {
   const [open, toggle] = useToggle(defaultOpen);
-  return /* @__PURE__ */ jsxs("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    /* @__PURE__ */ jsxs("button", { css: { display: "flex", alignItems: "center", gap: 8, textAlign: "left" }, onClick: toggle, children: [
-      /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: 500 }, children: isValidElement(label) ? label : /* @__PURE__ */ jsx("span", { children: label }) }),
-      /* @__PURE__ */ jsx(
-        Icon,
-        {
-          css: {
-            transition: "transform 150ms",
-            ...open ? { transform: "rotate(-180deg)" } : {}
-          },
-          source: ArrowDownIcon
-        }
-      )
-    ] }),
+  return /* @__PURE__ */ jsxs(Primitive, { sx: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsxs(
+      Primitive,
+      {
+        role: "button",
+        sx: { display: "flex", alignItems: "center", gap: 8, textAlign: "left" },
+        onClick: toggle,
+        children: [
+          /* @__PURE__ */ jsx(
+            Primitive,
+            {
+              sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: 500 },
+              children: isValidElement(label) ? label : /* @__PURE__ */ jsx("span", { children: label })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              sx: {
+                transition: "transform 150ms",
+                ...open ? { transform: "rotate(-180deg)" } : {}
+              },
+              source: ArrowDownIcon
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(Collapse, { open, children: /* @__PURE__ */ jsxs(Fragment, { children: [
       props.fieldType === "checkbox" && /* @__PURE__ */ jsx(CheckboxFilterPanel, { ...props }),
       props.fieldType === "radio" && /* @__PURE__ */ jsx(RadioFilterPanel, { ...props }),

package/dist/lib/filter-panel/radio-filter-panel.d.ts

@@ -1,2 +1,2 @@
 import { RadioFilterPanelProps } from './types';
-export declare const RadioFilterPanel: ({ options, inputSearchProps: _inputSearchProps, value, onChange, queryParam, fallbackValue, }: RadioFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RadioFilterPanel: ({ options, inputSearchProps: _inputSearchProps, value, onChange, queryParam, fallbackValue, }: RadioFilterPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/filter-panel/radio-filter-panel.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useId, useState, useMemo } from "react";
 import { trimStart, isNil } from "lodash-es";
 import { VirtualizedList } from "../../components/virtualized-list.js";
@@ -61,7 +61,7 @@ const RadioFilterPanel = ({
       }
       onChange == null ? void 0 : onChange(e);
     };
-    return /* @__PURE__ */ jsx("div", { css: { paddingTop: "0.25rem", paddingBottom: "0.25rem" }, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Primitive, { sx: { paddingBlock: 4 }, children: /* @__PURE__ */ jsx(
       RadioButton,
       {
         name: uniqueId,
@@ -77,7 +77,7 @@ const RadioFilterPanel = ({
     /* @__PURE__ */ jsx(
       VirtualizedList,
       {
-        css: { paddingLeft: "0.5rem", paddingRight: "0.5rem" },
+        sx: { paddingInline: 8 },
         options: {
           count: displayOptions.length,
           estimateSize: () => ROW_HEIGHT

package/dist/lib/floating/floating-close/floating-close.d.ts

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

package/dist/lib/floating/floating-close/floating-close.js

@@ -1,7 +1,8 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { useFloatingContext } from "../floating/helpers.js";
+import { Primitive } from "../../primitive/primitive.js";
 const FloatingClose = ({ event = "click", reason, ref, ...props }) => {
   const wrapperRef = useRef(null);
   const {
@@ -19,7 +20,7 @@ const FloatingClose = ({ event = "click", reason, ref, ...props }) => {
       wrapperEl.removeEventListener(event, handleEvent);
     };
   }, [event, onOpenChange, reason]);
-  return /* @__PURE__ */ jsx("div", { css: { display: "contents" }, ...props, ref: mergedRefs });
+  return /* @__PURE__ */ jsx(Primitive, { sx: { display: "contents" }, ...props, ref: mergedRefs });
 };
 export {
   FloatingClose

package/dist/lib/floating/floating-content/floating-content.d.ts

@@ -1,2 +1,2 @@
 import { FloatingContentProps } from './types';
-export declare const FloatingContent: ({ style, floatingPortalProps, floatingFocusManagerProps, floatingOverlayProps, sx, ref, ...props }: FloatingContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FloatingContent: ({ style, floatingPortalProps, floatingFocusManagerProps, floatingOverlayProps, sx, ref, ...props }: FloatingContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,11 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMergeRefs, FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
 import { AnimatePresence, motion } from "motion/react";
 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";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const FloatingContent = ({
   style,
   floatingPortalProps,
@@ -29,7 +29,7 @@ const FloatingContent = ({
         display: (floatingOverlayProps == null ? void 0 : floatingOverlayProps.disabled) ?? true ? "contents" : void 0,
         ...floatingOverlayProps == null ? void 0 : floatingOverlayProps.style
       },
-      children: /* @__PURE__ */ jsx(FloatingFocusManager, { disabled: true, context, ...floatingFocusManagerProps, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(FloatingFocusManager, { disabled: true, context, ...floatingFocusManagerProps, children: /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
         motion.div,
         {
           initial: { opacity: 0 },
@@ -40,12 +40,14 @@ const FloatingContent = ({
             ...style,
             zIndex: FLOATING_Z_INDEX
           },
-          css: createSxInterpolation(sx),
-          ...getFloatingProps(props),
+          ...getFloatingProps({
+            ...props,
+            className: cx(css(sx), props.className)
+          }),
           ref: mergedRefs,
           children: props.children
         }
-      ) })
+      ) }) })
     }
   ) }) });
 };

package/dist/lib/form-label/form-label.d.ts

@@ -1,6 +1,7 @@
 import { JSX } from 'react';
 import { ShallowMerge } from '../../types';
-export type FormLabelProps = ShallowMerge<JSX.IntrinsicElements['div'], {
+import { PrimitiveProps } from '../primitive';
+export type FormLabelProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], {
     required?: boolean;
-}>;
-export declare const FormLabel: ({ required, children, ...props }: FormLabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+}>>;
+export declare const FormLabel: ({ required, children, ...props }: FormLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/form-label/form-label.js

@@ -1,20 +1,22 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { isString } from "lodash-es";
-import { mediaQuery } from "../../theme/screens.js";
 import { getColorVar } from "../../theme/palette.js";
+import { Primitive } from "../primitive/primitive.js";
 const FormLabel = ({ required, children, ...props }) => {
+  var _a;
   return /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
-      css: {
-        marginBottom: "0.375rem",
+      ...props,
+      sx: {
+        marginBottom: 6,
         display: "inline-flex",
-        [mediaQuery("sm")]: { marginBottom: "0.5rem" }
+        ...props.sx,
+        md: { marginBottom: 8, ...(_a = props.sx) == null ? void 0 : _a.md }
       },
-      ...props,
       children: [
         isString(children) ? /* @__PURE__ */ jsx("label", { children }) : children,
-        required && /* @__PURE__ */ jsx("span", { css: { color: getColorVar("red.600") }, children: " *" })
+        required && /* @__PURE__ */ jsx(Primitive, { as: "span", sx: { color: getColorVar("red.600") }, children: " *" })
       ]
     }
   );

package/dist/lib/highlight-words/highlight-words.d.ts

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

package/dist/lib/highlight-words/highlight-words.js

@@ -1,12 +1,13 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { findAll } from "highlight-words-core";
+import { Primitive } from "../primitive/primitive.js";
 const HighlightWords = ({ highlightClassName, ...props }) => {
   const chunks = findAll(props);
   return /* @__PURE__ */ jsx(Fragment, { children: chunks.map((chunk, index) => {
     const { end, highlight, start } = chunk;
     const text = props.textToHighlight.substring(start, end);
-    return /* @__PURE__ */ jsx(Fragment, { children: highlight ? /* @__PURE__ */ jsx("span", { css: { fontWeight: 500 }, className: highlightClassName, children: text }) : text }, index);
+    return /* @__PURE__ */ jsx(Fragment, { children: highlight ? /* @__PURE__ */ jsx(Primitive, { as: "span", sx: { fontWeight: 500 }, className: highlightClassName, children: text }) : text }, index);
   }) });
 };
 export {

package/dist/lib/input/input.js

@@ -194,9 +194,7 @@ const Input = ({ ref, ..._props }) => {
                     ":focus": {
                       outline: "none"
                     },
-                    "::placeholder": {
-                      color: getColorVar("neutral.400")
-                    }
+                    ...rest.sx
                   }
                 }
               ),

package/dist/lib/lightbox/lightbox.d.ts

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