@janbox/storefront-ui 6.0.5 → 6.0.6

package/dist/assets/svg/arrow-down.svg.js

@@ -1,4 +1,5 @@
-const ArrowDownIcon = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n</svg>\n';
+import * as React from "react";
+const SvgArrowDown = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
 export {
-  ArrowDownIcon as default
+  SvgArrowDown as default
 };

package/dist/assets/svg/arrow-down2.svg.js

@@ -0,0 +1,4 @@
+const ArrowDownIcon = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n</svg>\n';
+export {
+  ArrowDownIcon as default
+};

package/dist/assets/svg/arrow-left2.svg.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+const SvgArrowLeft = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M15 6L9 12L15 18", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  SvgArrowLeft as default
+};

package/dist/assets/svg/arrow-right2.svg.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+const SvgArrowRight = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  SvgArrowRight as default
+};

package/dist/assets/svg/done-check.svg.js

@@ -1,4 +1,5 @@
-const CheckIcon = '<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n  <path d="M10,18a1,1,0,0,1-.71-.29l-5-5a1,1,0,0,1,1.42-1.42L10,15.59l8.29-8.3a1,1,0,1,1,1.42,1.42l-9,9A1,1,0,0,1,10,18Z"></path>\n</svg>';
+import * as React from "react";
+const SvgDoneCheck = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M10,18a1,1,0,0,1-.71-.29l-5-5a1,1,0,0,1,1.42-1.42L10,15.59l8.29-8.3a1,1,0,1,1,1.42,1.42l-9,9A1,1,0,0,1,10,18Z" }));
 export {
-  CheckIcon as default
+  SvgDoneCheck as default
 };

package/dist/assets/svg/loading-waiting2.svg.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+const SvgLoadingWaiting = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12 17.6201V21.0001", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M8.02001 15.9805L5.64001 18.3605", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M6.38 12H3", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M5.64001 5.63965L8.02001 8.01965", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M12 6V3", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M16.77 7.22965L18.36 5.63965", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M21 12H19.5", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M18.36 18.3597L17.83 17.8297", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  SvgLoadingWaiting as default
+};

package/dist/assets/svg/minus.svg.js

@@ -1,4 +1,5 @@
-const MinusIcon = '<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19,13H5a1,1,0,0,1,0-2H19a1,1,0,0,1,0,2Z"></path></svg>';
+import * as React from "react";
+const SvgMinus = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19,13H5a1,1,0,0,1,0-2H19a1,1,0,0,1,0,2Z" }));
 export {
-  MinusIcon as default
+  SvgMinus as default
 };

package/dist/assets/svg/minus2.svg.js

@@ -0,0 +1,4 @@
+const MinusIcon = '<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19,13H5a1,1,0,0,1,0-2H19a1,1,0,0,1,0,2Z"></path></svg>';
+export {
+  MinusIcon as default
+};

package/dist/components/index.d.ts

@@ -1,3 +1,2 @@
-export * from './svg-loader';
 export * from './scroll-view';
 export * from './virtualized-list';

package/dist/components/index.js

@@ -1,8 +1,6 @@
-import { SvgLoader } from "./svg-loader.js";
 import { VirtualizedList } from "./virtualized-list.js";
 import { ScrollView } from "./scroll-view/scroll-view.js";
 export {
   ScrollView,
-  SvgLoader,
   VirtualizedList
 };

package/dist/components/scroll-view/scroll-view.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 /* empty css                */
-import { Stylesheet } from "../../lib/stylesheet/stylesheet.js";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import { Stylesheet } from "../../lib/stylesheet/stylesheet.js";
 const ScrollView = ({ children, options, sx, ...props }) => {
   return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
     OverlayScrollbarsComponent,

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

@@ -3,8 +3,8 @@ import { useRef } from "react";
 import { motion } from "motion/react";
 import { getAccordionContentProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useAccordionGroupContext } from "../accordion-group/helpers.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { Primitive } from "../../primitive/primitive.js";
 const AccordionContent = ({ children, ref, ..._props }) => {
   const { accordionContentProps: accordionContentPropsByGroup = {} } = useAccordionGroupContext();

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

@@ -15,5 +15,5 @@ type CascaderFloatingContentProps = {
 } & ToResponsiveProps<{
     size?: SizeVariant;
 }>;
-export declare const CascaderFloatingContent: ({ searchable, selectedPath, options, loadOptions, onChange, inputProps, listProps, separator, lazy, size, sm, md, lg, }: CascaderFloatingContentProps) => import("react").JSX.Element;
+export declare const CascaderFloatingContent: ({ searchable, selectedPath, options, loadOptions, onChange, inputProps, listProps, separator, lazy, size, sm, md, lg, }: CascaderFloatingContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,9 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { useRef, useId, useState, useEffect, useMemo, useCallback } from "react";
 import { isString, isNil, trimStart } from "lodash-es";
 import { findOptionPath, isExpandable, hasChildren } from "./helpers.js";
-import ArrowRightIcon from "../../assets/svg/arrow-right.svg.js";
-import CheckIcon from "../../assets/svg/done-check.svg.js";
-import { SvgLoader } from "../../components/svg-loader.js";
+import SvgArrowRight from "../../assets/svg/arrow-right2.svg.js";
+import SvgDoneCheck from "../../assets/svg/done-check.svg.js";
 import { VirtualizedList } from "../../components/virtualized-list.js";
 import { truncateStyle } from "../../constants/emotion.js";
 import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
@@ -309,7 +308,7 @@ const CascaderFloatingContent = ({
         },
         children: isLoading ? /* @__PURE__ */ jsx(TextSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Primitive, { sx: { flex: 1, ...truncateStyle }, children: rowData.label }),
-          isExpandable(rowData) ? /* @__PURE__ */ jsx(SvgLoader, { source: ArrowRightIcon, width: 20, height: 20, sx: { color: getColorVar("neutral.400") } }) : isSelected && /* @__PURE__ */ jsx(SvgLoader, { source: CheckIcon, width: 20, height: 20, sx: { color: getColorVar("primary.600") } })
+          isExpandable(rowData) ? /* @__PURE__ */ jsx(SvgArrowRight, { width: 20, height: 20, css: { color: getColorVar("neutral.400") } }) : isSelected && /* @__PURE__ */ jsx(SvgDoneCheck, { width: 20, height: 20, css: { color: getColorVar("primary.600") } })
         ] })
       },
       `${uniqueId}-option-${rowData.value}`

package/dist/lib/cascader/cascader.d.ts

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

package/dist/lib/cascader/cascader.js

@@ -1,15 +1,14 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useRef } from "react";
 import { isNil } from "lodash-es";
 import { CascaderFloatingContent } from "./cascader-floating-content.js";
 import { getCascaderProps } from "./helpers.js";
-import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
+import SvgArrowDown from "../../assets/svg/arrow-down.svg.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { truncateStyle } from "../../constants/emotion.js";
 import { getSizeVariantState } from "../../utils/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
-import { SvgLoader } from "../../components/svg-loader.js";
 import { Primitive } from "../primitive/primitive.js";
 import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
@@ -106,12 +105,11 @@ const Cascader = ({ ref, ..._props }) => {
                   error: isOpen ? false : error,
                   as: "button",
                   suffix: /* @__PURE__ */ jsx(
-                    SvgLoader,
+                    SvgArrowDown,
                     {
-                      source: ArrowDownIcon,
                       width: 20,
                       height: 20,
-                      sx: {
+                      css: {
                         transition: "transform 150ms",
                         ...isOpen ? { transform: "rotate(-180deg)" } : {}
                       }

package/dist/lib/checkbox/README.md

@@ -60,7 +60,6 @@ const someChecked = selected.length > 0 && !allChecked;
 
 ## Related Components
 
-- [SvgLoader](../svgloader/README.md)
 - [Primitive](../primitive/README.md)
 
 ## Dependencies

package/dist/lib/checkbox/checkbox.js

@@ -1,9 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
-import { SvgLoader } from "../../components/svg-loader.js";
-import CheckIcon from "../../assets/svg/done-check.svg.js";
-import MinusIcon from "../../assets/svg/minus.svg.js";
+import SvgDoneCheck from "../../assets/svg/done-check.svg.js";
+import SvgMinus from "../../assets/svg/minus.svg.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
 import "lodash-es";
 import { getColorVar } from "../../theme/palette.js";
@@ -132,8 +131,8 @@ const Checkbox = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsx(SvgLoader, { "data-checkbox-icon": "checked", width: 18, height: 18, source: CheckIcon }),
-                    /* @__PURE__ */ jsx(SvgLoader, { "data-checkbox-icon": "indeterminate", width: 18, height: 18, source: MinusIcon })
+                    /* @__PURE__ */ jsx(SvgDoneCheck, { "data-checkbox-icon": "checked", width: 18, height: 18 }),
+                    /* @__PURE__ */ jsx(SvgMinus, { "data-checkbox-icon": "indeterminate", width: 18, height: 18 })
                   ]
                 }
               )

package/dist/lib/count-up/count-up.js

@@ -7,9 +7,9 @@ import { useTranslation } from "../../i18n/index.js";
 import "lodash-es";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { getCountUpProps } from "./helpers.js";
 import { getDecimalDigits } from "../../utils/common.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 const CountUp = ({ ref, ..._props }) => {
   const {
     from = 0,

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { motion } from "motion/react";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { Primitive } from "../../primitive/primitive.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { Floating } from "../../floating/floating/floating.js";
 import { FloatingContent } from "../../floating/floating-content/floating-content.js";
 const Drawer = ({ children, placement = "left", ...props }) => {

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

@@ -5,7 +5,7 @@ import { CheckboxFilterPanel } from "./checkbox-filter-panel.js";
 import { PriceRangeFilterPanel } from "./price-range-filter-panel.js";
 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 ArrowDownIcon from "../../assets/svg/arrow-down2.svg.js";
 import { Primitive } from "../primitive/primitive.js";
 import { Icon } from "../icon/icon.js";
 import { Collapse } from "../collapse/collapse.js";

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

@@ -4,8 +4,8 @@ import { motion, AnimatePresence } 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 { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { usePortalContainer } from "../../../theme/provider.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const FloatingContent = ({ preserveTabOrder, focus, overlay, sx, ref, ...props }) => {
   const { getFloatingProps, context } = useFloatingContext();
   const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);

package/dist/lib/icon/README.md

@@ -1,6 +1,6 @@
 # Icon
 
-A responsive SVG icon component that renders raw SVG strings via the SvgLoader component. Supports numeric size control with responsive breakpoint overrides (sm/md/lg) and the sx prop for custom styling.
+A responsive SVG icon component that renders raw SVG strings. Supports numeric size control with responsive breakpoint overrides (sm/md/lg) and the sx prop for custom styling.
 
 ## Import
 
@@ -54,10 +54,6 @@ import SearchIcon from '@/assets/svg/search.svg?raw';
 />
 ```
 
-## Related Components
-
-- [SvgLoader](../svgloader/README.md)
-
 ## Dependencies
 
 - @emotion/react

package/dist/lib/input-number/input-number.js

@@ -4,7 +4,7 @@ import { useMergeRefs } from "@floating-ui/react";
 import { isNil } from "lodash-es";
 import { Input } from "../input/input.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
-import MinusIcon from "../../assets/svg/minus.svg.js";
+import MinusIcon from "../../assets/svg/minus2.svg.js";
 import PlusIcon from "../../assets/svg/plus.svg.js";
 import { IconButton } from "../icon-button/icon-button.js";
 const MAX_FRACTION_DIGITS = 10;

package/dist/lib/lightbox/lightbox.js

@@ -10,10 +10,10 @@ import ZoomPlusIcon from "../../assets/svg/search-add-plus-middle.svg.js";
 import ZoomMinusIcon from "../../assets/svg/search-minus.svg.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
-import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { Primitive } from "../primitive/primitive.js";
 import { Swiper } from "../swiper/swiper/swiper.js";
 import { SwiperSlide } from "../swiper/swiper-slide/swiper-slide.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { Image } from "../image/image.js";
 import { IconButton } from "../icon-button/icon-button.js";
 import { Floating } from "../floating/floating/floating.js";

package/dist/lib/loading/README.md

@@ -50,7 +50,6 @@ import { LoadingOverlay } from '@janbox/storefront-ui';
 ## Related Components
 
 - [Primitive](../primitive/README.md)
-- [SvgLoader](../svgloader/README.md)
 
 ## Dependencies
 

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

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
-import { Stylesheet } from "../../stylesheet/stylesheet.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,

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("react").JSX.Element;
+export declare const LoadingOverlay: ({ isLoading, iconProps, color, style, size, children, ...props }: LoadingOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

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

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

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

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

@@ -1,13 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useRef, useId, useCallback, useMemo, useEffect } from "react";
 import { get, isNil, isElement, trimStart } from "lodash-es";
 import { getMultipleSelectProps } from "./helpers.js";
-import { SvgLoader } from "../../components/svg-loader.js";
 import { VirtualizedList } from "../../components/virtualized-list.js";
 import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
-import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
+import SvgArrowDown from "../../assets/svg/arrow-down.svg.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { ensureArray, matchSearch } from "../../utils/common.js";
@@ -240,12 +239,11 @@ const MultipleSelect = ({ ref, ...props }) => {
                   error: isOpen ? false : error,
                   as: "button",
                   suffix: /* @__PURE__ */ jsx(
-                    SvgLoader,
+                    SvgArrowDown,
                     {
-                      source: ArrowDownIcon,
                       width: 20,
                       height: 20,
-                      sx: {
+                      css: {
                         transition: "transform 150ms",
                         ...isOpen ? { transform: "rotate(-180deg)" } : {}
                       }

package/dist/lib/notifications/notifications.js

@@ -7,9 +7,9 @@ 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 { Stylesheet } from "../stylesheet/stylesheet.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";
 const Notifications = () => {

package/dist/lib/select/select.js

@@ -2,13 +2,12 @@ import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { useRef, useId, useCallback, useMemo, useEffect } from "react";
 import { get, isNil, trimStart } from "lodash-es";
 import { getSelectProps } from "./helpers.js";
-import { SvgLoader } from "../../components/svg-loader.js";
 import { VirtualizedList } from "../../components/virtualized-list.js";
 import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
-import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
-import CheckIcon from "../../assets/svg/done-check.svg.js";
+import SvgArrowDown from "../../assets/svg/arrow-down.svg.js";
+import SvgDoneCheck from "../../assets/svg/done-check.svg.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { ensureArray, matchSearch } from "../../utils/common.js";
@@ -163,7 +162,7 @@ const Select = ({
         },
         children: [
           /* @__PURE__ */ jsx(Primitive, { sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: getOptionLabel(rowData) }),
-          isSelected && /* @__PURE__ */ jsx(SvgLoader, { source: CheckIcon, width: 24, height: 24, sx: { color: getColorVar("primary.600") } })
+          isSelected && /* @__PURE__ */ jsx(SvgDoneCheck, { width: 24, height: 24, css: { color: getColorVar("primary.600") } })
         ]
       }
     );
@@ -245,12 +244,11 @@ const Select = ({
                   error: isOpen ? false : error,
                   as: "button",
                   suffix: /* @__PURE__ */ jsx(
-                    SvgLoader,
+                    SvgArrowDown,
                     {
-                      source: ArrowDownIcon,
                       width: 20,
                       height: 20,
-                      sx: {
+                      css: {
                         transition: "transform 150ms",
                         ...isOpen ? { transform: "rotate(-180deg)" } : {}
                       }

package/dist/lib/star-rating/star-rating.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { getStarRatingProps } from "./helpers.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 const StarRating = (_props) => {
   const { rating, maxRating, size, sm, md, lg, ref, color, sx } = getStarRatingProps(_props);
   const id = useId();

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

@@ -6,8 +6,8 @@ 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 { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { Primitive } from "../../primitive/primitive.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const SWIPER_DOTS_SIZE_VAR = "--swiper-dots-size";
 const SWIPER_DOTS_OFFSET_VAR = "--swiper-dots-offset";
 const SWIPER_DOTS_SPACING_VAR = "--swiper-dots-spacing";

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

@@ -4,8 +4,7 @@ import { useFloating, autoUpdate, offset, size, FloatingPortal } from "@floating
 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 SvgArrowLeft from "../../../assets/svg/arrow-left2.svg.js";
 import { Primitive } from "../../primitive/primitive.js";
 const SWIPER_SIDE_ARROWS_OVERFLOW_VAR = "--swiper-side-arrows-overflow";
 const SwiperSideArrowsPaging = ({
@@ -251,7 +250,7 @@ const ArrowButton = ({
                 md: createArrowIconStyle(md),
                 lg: createArrowIconStyle(lg)
               },
-              children: /* @__PURE__ */ jsx(SvgLoader, { width: void 0, height: void 0, source: ArrowLeftIcon })
+              children: /* @__PURE__ */ jsx(SvgArrowLeft, { width: void 0, height: void 0 })
             }
           )
         }

package/dist/lib/tabs/tab-indicator/tab-indicator.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback } from "react";
 import { motion } from "motion/react";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import "lodash-es";
 import "../../../theme/palette.js";
 import { isNumber } from "../../../utils/common.js";
 import { useTabsContext } from "../tabs/helpers.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const INDICATOR_SIZE_VAR_NAME = "--indicator-size";
 const TabIndicator = ({ size, sm, md, lg, ...props }) => {
   const { activeIndex } = useTabsContext();

package/dist/utils/common.d.ts

@@ -1,4 +1,3 @@
-import { ReactElement } from 'react';
 import { Dict } from '../types';
 export declare const ensureArray: <T>(val: T | T[]) => T[];
 export declare const ensureBoolean: <T extends boolean | string | undefined | null>(val: T) => boolean;
@@ -15,5 +14,4 @@ export declare const getDecimalDigits: (value: number) => number;
 export declare const parseNumber: (text?: string | number, type?: "int" | "float", separator?: string) => number | undefined;
 export declare function omitEmpty<T extends object>(obj?: T): T;
 export declare const getEnumValues: <T extends Dict<string | number>>(enumObject: T) => Array<T[keyof T]>;
-export declare function parseSvgString(source: string, uniqueId?: string): ReactElement<import('react').SVGProps<SVGSVGElement>, "svg"> | null;
 export declare const isNumber: (value: any) => value is number;

package/dist/utils/common.js

@@ -1,6 +1,3 @@
-import { isValidElement } from "react";
-import { parseDocument } from "htmlparser2";
-import { domToReact } from "html-react-parser";
 import { isNil, isBoolean, omitBy, isArray, isString, parseInt } from "lodash-es";
 import { Booleanish } from "../constants/index.js";
 const ensureArray = (val) => {
@@ -62,52 +59,6 @@ function omitEmpty(obj) {
 const getEnumValues = (enumObject) => {
   return Object.keys(enumObject).filter((key) => isNaN(Number(key))).map((key) => enumObject[key]);
 };
-function parseSvgString(source, uniqueId) {
-  const createUniqueId = (originalId) => {
-    return [originalId, uniqueId].filter(Boolean).join("-");
-  };
-  const parsed = domToReact(parseDocument(source).children, {
-    replace(domNode) {
-      if (domNode.type === "tag" && "attribs" in domNode && domNode.attribs) {
-        const el = domNode;
-        if (el.attribs.id) {
-          el.attribs.id = createUniqueId(el.attribs.id);
-        }
-        const urlRefAttrs = [
-          "fill",
-          "stroke",
-          "filter",
-          "clip-path",
-          "mask",
-          "marker-start",
-          "marker-mid",
-          "marker-end",
-          "style"
-        ];
-        for (const attr of urlRefAttrs) {
-          const value = el.attribs[attr];
-          if (!value) continue;
-          if (attr === "style") {
-            const match = value == null ? void 0 : value.match(/url\(#(.+?)\)/);
-            if (match) {
-              el.attribs[attr] = value.replace(match[1], createUniqueId(match[1]));
-            }
-          } else {
-            const match = value == null ? void 0 : value.match(/^url\(#(.+?)\)$/);
-            if (match) {
-              el.attribs[attr] = `url(#${createUniqueId(match[1])})`;
-            }
-          }
-        }
-        return el;
-      }
-      return void 0;
-    },
-    trim: true
-  });
-  const validType = "svg";
-  return isValidElement(parsed) && parsed.type === validType ? parsed : null;
-}
 const isNumber = (value) => typeof value === "number";
 export {
   ensureArray,
@@ -118,6 +69,5 @@ export {
   matchSearch,
   normalizeSearchText,
   omitEmpty,
-  parseNumber,
-  parseSvgString
+  parseNumber
 };

package/dist/utils/index.js

@@ -2,7 +2,7 @@ import { Children, isValidElement, Fragment } from "react";
 import { isString, isNumber, isUndefined, mergeWith, get } from "lodash-es";
 import { getSmallerScreens } from "../theme/screens.js";
 import { getColorVar } from "../theme/palette.js";
-import { ensureArray, ensureBoolean, getDecimalDigits, getEnumValues, isNumber as isNumber2, matchSearch, normalizeSearchText, omitEmpty, parseNumber, parseSvgString } from "./common.js";
+import { ensureArray, ensureBoolean, getDecimalDigits, getEnumValues, isNumber as isNumber2, matchSearch, normalizeSearchText, omitEmpty, parseNumber } from "./common.js";
 import { ArrayParamParser, BooleanParamParser, DateParamParser, EnumParamParser, NumberParamParser, StringParamParser, simplifyQueryParams } from "./query-params.js";
 import { createUnderlineEffect } from "./stylesheet.js";
 const getColorShadesByVariant = (variant) => {
@@ -259,6 +259,5 @@ export {
   normalizeSearchText,
   omitEmpty,
   parseNumber,
-  parseSvgString,
   simplifyQueryParams
 };

package/dist/utils/stylesheet.js

@@ -1,4 +1,3 @@
-import { isNumber } from "lodash-es";
 import { mediaQuery } from "../theme/screens.js";
 import "../theme/palette.js";
 const createSxStyle = (sx = {}) => {
@@ -26,7 +25,7 @@ const createUnderlineEffect = (options = {}) => {
       transitionProperty: "transform",
       transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
       backgroundColor: color,
-      height: isNumber(height) ? `${height}px` : height,
+      height: typeof height === "number" ? `${height}px` : height,
       transitionDuration: `${duration}ms`
     },
     "&:hover::after": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [
@@ -71,8 +71,6 @@
     "embla-carousel-wheel-gestures": "^8.0.2",
     "flat": "^6.0.1",
     "highlight-words-core": "^1.2.3",
-    "html-react-parser": "^5.2.2",
-    "htmlparser2": "^12.0.0",
     "lodash-es": "^4.17.21",
     "motion": "^11.15.0",
     "overlayscrollbars": "^2.16.0",
@@ -112,6 +110,7 @@
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.6",
+    "vite-plugin-svgr": "^5.2.0",
     "vite-tsconfig-paths": "^6.1.1"
   },
   "scripts": {

package/dist/components/svg-loader.d.ts

@@ -1,6 +0,0 @@
-import { JSX } from 'react';
-import { PropsWithSx } from '../types';
-export type SvgLoaderProps = PropsWithSx<JSX.IntrinsicElements['svg'] & {
-    source: string;
-}>;
-export declare const SvgLoader: ({ sx, source, ref, ...props }: SvgLoaderProps) => JSX.Element;

package/dist/components/svg-loader.js

@@ -1,19 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useId, useMemo, cloneElement } from "react";
-import { parseSvgString } from "../utils/common.js";
-import { Stylesheet } from "../lib/stylesheet/stylesheet.js";
-const SvgLoader = ({ sx, source, ref, ...props }) => {
-  const uniqueId = useId();
-  const jsxSvg = useMemo(() => parseSvgString(source, uniqueId), [source, uniqueId]);
-  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => {
-    if (!jsxSvg) return /* @__PURE__ */ jsx(Fragment, {});
-    return cloneElement(jsxSvg, {
-      ...props,
-      className: cx(css(sx), props.className),
-      ref
-    });
-  } });
-};
-export {
-  SvgLoader
-};