@janbox/storefront-ui 6.0.4 → 6.0.5

package/dist/lib/icon/icon.js

@@ -1,51 +1,38 @@
 import { jsx } from "react/jsx-runtime";
 import { getIconProps } from "./helpers.js";
-import { SvgLoader } from "../../components/svg-loader.js";
-import { useIsHydrated } from "../../hooks/use-is-hydrated/index.js";
-import { Stylesheet } from "../stylesheet/stylesheet.js";
+import { Primitive } from "../primitive/primitive.js";
 const Icon = ({ children: _children, ref, ..._props }) => {
   var _a, _b, _c;
-  const { size, md, sm, lg, ...props } = getIconProps(_props);
-  const isHydrated = useIsHydrated();
-  const sx = {
-    ...createStyle({ size }),
-    ...props.sx,
-    sm: {
-      ...createStyle(sm),
-      ...(_a = props.sx) == null ? void 0 : _a.sm
-    },
-    md: {
-      ...createStyle(md),
-      ...(_b = props.sx) == null ? void 0 : _b.md
-    },
-    lg: {
-      ...createStyle(lg),
-      ...(_c = props.sx) == null ? void 0 : _c.lg
-    }
-  };
-  if (!isHydrated) {
-    const { source: _source, sx: _sx, ...rest } = props;
-    return /* @__PURE__ */ jsx(Stylesheet, { children: ({ css, cx }) => /* @__PURE__ */ jsx(
-      "svg",
-      {
-        ...rest,
-        ref,
-        className: cx(css(sx), rest.className),
-        "aria-hidden": true,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+  const { size, source, md, sm, lg, ...props } = getIconProps(_props);
+  return /* @__PURE__ */ jsx(
+    Primitive,
+    {
+      as: "span",
+      ...props,
+      ref,
+      dangerouslySetInnerHTML: { __html: source },
+      "aria-hidden": true,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        verticalAlign: "middle",
+        flexShrink: 0,
+        lineHeight: 0,
+        "& svg": { width: "100%", height: "100%" },
+        ...createStyle({ size }),
+        ...props.sx,
+        sm: { ...createStyle(sm), ...(_a = props.sx) == null ? void 0 : _a.sm },
+        md: { ...createStyle(md), ...(_b = props.sx) == null ? void 0 : _b.md },
+        lg: { ...createStyle(lg), ...(_c = props.sx) == null ? void 0 : _c.lg }
       }
-    ) });
-  }
-  return /* @__PURE__ */ jsx(SvgLoader, { ...props, width: void 0, height: void 0, sx, ref });
-};
-const createStyle = ({ size } = {}) => {
-  return {
-    width: size,
-    height: size
-  };
+    }
+  );
 };
+const createStyle = ({ size } = {}) => ({
+  width: size,
+  height: size
+});
 export {
   Icon
 };

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

@@ -1,11 +1,10 @@
 import { JSX } from 'react';
-import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
+import { ShallowMerge, ToResponsiveProps } from '../../types';
+import { PrimitiveProps } from '../primitive';
 export interface IconResponsiveProps {
     size?: number;
 }
-type IconHTMLProps = JSX.IntrinsicElements['svg'];
-export type IconExtendedProps = PropsWithSx<ToResponsiveProps<IconResponsiveProps> & {
+export type IconExtendedProps = ToResponsiveProps<IconResponsiveProps> & {
     source: string;
-}>;
-export type IconProps = ShallowMerge<IconHTMLProps, IconExtendedProps>;
-export {};
+};
+export type IconProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['span'], IconExtendedProps>, 'span'>;

package/package.json

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