@janbox/storefront-ui 2.0.28 → 2.0.29

package/dist/lib/box/box.js

@@ -10,32 +10,16 @@ const Box = ({ children, ref, ..._props }) => {
       ...rest,
       sx: {
         ...container ? containerStyle : {},
-        ...createStyle(sx),
-        sm: createStyle(sx.sm),
-        md: createStyle(sx.md),
-        lg: createStyle(sx.lg)
+        ...sx,
+        sm: { ...sx.sm },
+        md: { ...sx.md },
+        lg: { ...sx.lg }
       },
       ref,
-      children: /* @__PURE__ */ jsx(
-        Primitive,
-        {
-          sx: {
-            width: "100%",
-            height: "100%"
-          },
-          children
-        }
-      )
+      children
     }
   );
 };
-const createStyle = ({ width, height, ...css } = {}) => {
-  return {
-    width,
-    height,
-    "& > *": css
-  };
-};
 export {
   Box
 };

package/dist/lib/flexbox/flexbox/flexbox.d.ts

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

package/dist/lib/flexbox/flexbox/flexbox.js

@@ -1,29 +1,25 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { getFlexboxProps } from "./helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
 import { containerStyle } from "../../../constants/emotion.js";
+import { Primitive } from "../../primitive/primitive.js";
 const Flexbox = ({ children, container, ref, ..._props }) => {
   const { sx = {}, ...rest } = getFlexboxProps(_props);
-  const { sm, md, lg, ...restSx } = sx;
-  const css = [
-    container && containerStyle,
-    createStyle(restSx),
+  return /* @__PURE__ */ jsx(
+    Primitive,
     {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
+      ...rest,
+      sx: {
+        display: "flex",
+        ...container ? containerStyle : {},
+        ...sx,
+        sm: { ...sx.sm },
+        md: { ...sx.md },
+        lg: { ...sx.lg }
+      },
+      ref,
+      children
     }
-  ];
-  return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx("div", { css: { display: "flex", width: "100%", height: "100%" }, children }) });
-};
-const createStyle = (sx = {}) => {
-  const { width, height, ...css } = sx;
-  return {
-    width,
-    height,
-    "& > *": css
-  };
+  );
 };
 export {
   Flexbox

package/dist/lib/grid/grid/grid.d.ts

@@ -1,4 +1,4 @@
 import { GridProps } from './types';
 export declare const GRID_MINIMUM_COLS = 1;
 export declare const GRID_MAXIMUM_COLS = 24;
-export declare const Grid: ({ children, ref, ..._props }: GridProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Grid: ({ children, ref, ..._props }: GridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/grid/grid/grid.js

@@ -1,38 +1,33 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { isNil } from "lodash-es";
 import { getGridProps } from "./helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
 import { containerStyle } from "../../../constants/emotion.js";
+import { Primitive } from "../../primitive/primitive.js";
 const GRID_MINIMUM_COLS = 1;
 const GRID_MAXIMUM_COLS = 24;
 const Grid = ({ children, ref, ..._props }) => {
   const { cols, sm, md, lg, container, sx = {}, ...rest } = getGridProps(_props);
-  const { sm: sxSm, md: sxMd, lg: sxLg, ...sxXs } = sx;
-  const css = [
-    container && containerStyle,
-    createStyle({ cols }, sxXs),
+  return /* @__PURE__ */ jsx(
+    Primitive,
     {
-      [mediaQuery("sm")]: createStyle(sm, sxSm),
-      [mediaQuery("md")]: createStyle(md, sxMd),
-      [mediaQuery("lg")]: createStyle(lg, sxLg)
+      sx: {
+        display: "grid",
+        ...container ? containerStyle : {},
+        ...createStyle({ cols }),
+        ...sx,
+        sm: { ...createStyle(sm), ...sx.sm },
+        md: { ...createStyle(md), ...sx.md },
+        lg: { ...createStyle(lg), ...sx.lg }
+      },
+      ...rest,
+      ref,
+      children
     }
-  ];
-  return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx("div", { css: { display: "grid", width: "100%", height: "100%" }, children }) });
-};
-const createStyle = ({ cols } = {}, sx = {}) => {
-  const { width, height, ...css } = sx;
-  return [
-    {
-      width,
-      height,
-      "& > *": {
-        gridTemplateColumns: isNil(cols) ? void 0 : `repeat(${cols}, minmax(0, 1fr))`,
-        ...css
-      }
-    }
-  ];
+  );
 };
+const createStyle = ({ cols } = {}) => ({
+  gridTemplateColumns: isNil(cols) ? void 0 : `repeat(${cols}, minmax(0, 1fr))`
+});
 export {
   GRID_MAXIMUM_COLS,
   GRID_MINIMUM_COLS,

package/dist/lib/table/table-row/table-row.d.ts

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

package/dist/lib/table/table-row/table-row.js

@@ -1,7 +1,7 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
-const TableRow = ({ sx, children, ...props }) => {
-  return /* @__PURE__ */ jsx("tr", { css: createSxInterpolation(sx), ...props, children });
+import { jsx } from "react/jsx-runtime";
+import { Primitive } from "../../primitive/primitive.js";
+const TableRow = (props) => {
+  return /* @__PURE__ */ jsx(Primitive, { ...props, as: "tr" });
 };
 export {
   TableRow

package/dist/lib/table/table-row/types.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx } from '../../../types';
-export type TableRowProps = PropsWithSx<JSX.IntrinsicElements['tr']>;
+import { PrimitiveProps } from '../../primitive';
+export type TableRowProps = PrimitiveProps<JSX.IntrinsicElements['tr']>;

package/dist/lib/unordered-list/list-item/list-item.d.ts

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

package/dist/lib/unordered-list/list-item/list-item.js

@@ -1,23 +1,21 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { isNil } from "lodash-es";
 import { getListItemProps } from "./helpers.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const ListItem = ({ ref, ..._props }) => {
   const { sx, children, dangerouslySetInnerHTML, ...rest } = getListItemProps(_props);
-  const css = [
-    {
-      display: "inline-flex"
-    },
-    createSxInterpolation(sx)
-  ];
   return /* @__PURE__ */ jsx(
-    "li",
+    Primitive,
     {
-      css,
       suppressContentEditableWarning: true,
       dangerouslySetInnerHTML: isNil(children) ? dangerouslySetInnerHTML : void 0,
       ...rest,
       ref,
+      sx: {
+        display: "inline-flex",
+        ...sx
+      },
+      as: "li",
       children: isNil(dangerouslySetInnerHTML) ? children : null
     }
   );

package/dist/lib/unordered-list/list-item/types.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx } from '../../../types';
-export type ListItemProps = PropsWithSx<JSX.IntrinsicElements['li']>;
+import { PrimitiveProps } from '../../primitive';
+export type ListItemProps = PrimitiveProps<JSX.IntrinsicElements['li']>;

package/package.json

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