@janbox/storefront-ui 1.0.10 → 1.0.13

package/dist/components/virtualized-list.d.ts

@@ -2,8 +2,8 @@ import { JSX, Ref } from 'react';
 import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual';
 import { ScrollViewRef } from './scroll-view';
 import { ShallowMerge } from '../types';
-type VirtualizedListOptions = Omit<Parameters<typeof useVirtualizer<HTMLDivElement, HTMLDivElement>>[0], "getScrollElement">;
-type VirtualizedListProps = ShallowMerge<JSX.IntrinsicElements["div"], {
+type VirtualizedListOptions = Omit<Parameters<typeof useVirtualizer<HTMLDivElement, HTMLDivElement>>[0], 'getScrollElement'>;
+type VirtualizedListProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     RowComponent: React.ComponentType<{
         row: VirtualItem;
     }>;

package/dist/components/virtualized-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtualized-list.d.ts","sourceRoot":"","sources":["../../src/components/virtualized-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAU,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,EAAc,aAAa,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,KAAK,sBAAsB,GAAG,IAAI,CAChC,UAAU,CAAC,OAAO,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,EACpE,kBAAkB,CACnB,CAAC;AAEF,KAAK,oBAAoB,GAAG,YAAY,CACtC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,GAAG,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC;IACxD,OAAO,EAAE,sBAAsB,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B,CACF,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAC;AAE1E,eAAO,MAAM,eAAe,6CAKzB,oBAAoB,qDAgDtB,CAAC"}
+{"version":3,"file":"virtualized-list.d.ts","sourceRoot":"","sources":["../../src/components/virtualized-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAU,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,EAAc,aAAa,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,KAAK,sBAAsB,GAAG,IAAI,CAChC,UAAU,CAAC,OAAO,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,EACpE,kBAAkB,CACnB,CAAC;AAEF,KAAK,oBAAoB,GAAG,YAAY,CACtC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,GAAG,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC;IACxD,OAAO,EAAE,sBAAsB,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B,CACF,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAC;AAE1E,eAAO,MAAM,eAAe,6CAA8C,oBAAoB,qDAyC7F,CAAC"}

package/dist/components/virtualized-list.js

@@ -4,12 +4,7 @@ import { useMergeRefs } from "@floating-ui/react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { motion } from "motion/react";
 import { ScrollView } from "./scroll-view.js";
-const VirtualizedList = ({
-  RowComponent,
-  options,
-  ref,
-  ...props
-}) => {
+const VirtualizedList = ({ RowComponent, options, ref, ...props }) => {
   var _a;
   const scrollRef = useRef(null);
   const mergedRefs = useMergeRefs([scrollRef, ref]);
@@ -37,15 +32,7 @@ const VirtualizedList = ({
           style: {
             transform: `translateY(${((_a = items.at(0)) == null ? void 0 : _a.start) ?? 0}px)`
           },
-          children: items.map((virtualRow) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-index": virtualRow.index,
-              ref: virtualizer.measureElement,
-              children: /* @__PURE__ */ jsx(RowComponent, { row: virtualRow })
-            },
-            virtualRow.key
-          ))
+          children: items.map((virtualRow) => /* @__PURE__ */ jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, children: /* @__PURE__ */ jsx(RowComponent, { row: virtualRow }) }, virtualRow.key))
         }
       )
     }

package/dist/hooks/use-is-hydrated/index.d.ts

@@ -0,0 +1,2 @@
+export declare function useIsHydrated(): boolean;
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-is-hydrated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-is-hydrated/index.ts"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,YAQ5B"}

package/dist/hooks/use-is-hydrated/index.js

@@ -0,0 +1,11 @@
+import { useState, useEffect } from "react";
+function useIsHydrated() {
+  const [isHydrated, setIsHydrated] = useState(false);
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+  return isHydrated;
+}
+export {
+  useIsHydrated
+};

package/dist/hooks/use-toggle/index.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare function useToggle(defaultValue?: boolean): [boolean, () => void, Dispatch<SetStateAction<boolean>>];
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAyB,MAAM,OAAO,CAAC;AAExE,wBAAgB,SAAS,CAAC,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAQ1G"}

package/dist/hooks/use-toggle/index.js

@@ -0,0 +1,11 @@
+import { useState, useCallback } from "react";
+function useToggle(defaultValue) {
+  const [value, setValue] = useState(!!defaultValue);
+  const toggle = useCallback(() => {
+    setValue((x) => !x);
+  }, []);
+  return [value, toggle, setValue];
+}
+export {
+  useToggle
+};

package/dist/index.js

@@ -134,7 +134,7 @@ import { getTextCssByVariant, getTextProps } from "./lib/text/helpers.js";
 import { getTextareaProps } from "./lib/textarea/helpers.js";
 import { getUnorderedListProps } from "./lib/unordered-list/unordered-list/helpers.js";
 import { getVideoProps } from "./lib/video/helpers.js";
-import { notificationAtom, useNotifications } from "./lib/notifications/helpers.js";
+import { notificationStore, useNotifications } from "./lib/notifications/helpers.js";
 import { states } from "./lib/stepper/types.js";
 import { useDrawerContext } from "./lib/drawer/drawer/helpers.js";
 import { usePopoverContext } from "./lib/popover/popover/helpers.js";
@@ -285,7 +285,7 @@ export {
   getTextareaProps,
   getUnorderedListProps,
   getVideoProps,
-  notificationAtom,
+  notificationStore,
   states,
   useAccordionContext,
   useAccordionGroupContext,

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

@@ -1,3 +1,3 @@
 import { FilterPanelProps } from './types';
-export declare const FilterPanel: ({ label, defaultOpen, className, ...props }: FilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FilterPanel: ({ label, defaultOpen, ...props }: FilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=filter-panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/filter-panel.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO3C,eAAO,MAAM,WAAW,gDAAwD,gBAAgB,qDAyB/F,CAAC"}
+{"version":3,"file":"filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/filter-panel.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO3C,eAAO,MAAM,WAAW,qCAA6C,gBAAgB,qDA2BpF,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { isValidElement } from "react";
-import { useToggle } from "usehooks-ts";
+import { useToggle } from "../../hooks/use-toggle/index.js";
 import { CheckboxFilterPanel } from "./checkbox-filter-panel.js";
 import { InputRangeFilterPanel } from "./input-range-filter-panel.js";
 import { InputTextFilterPanel } from "./input-text-filter-panel.js";
@@ -8,7 +8,7 @@ import { RadioFilterPanel } from "./radio-filter-panel.js";
 import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
 import { Collapse } from "../collapse/collapse.js";
 import { Icon } from "../icon/icon.js";
-const FilterPanel = ({ label, defaultOpen = true, className, ...props }) => {
+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: [

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

@@ -1 +1 @@
-{"version":3,"file":"floating-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/floating-content/floating-content.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAM/C,eAAO,MAAM,eAAe,8HAyD3B,CAAC"}
+{"version":3,"file":"floating-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/floating-content/floating-content.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAO/C,eAAO,MAAM,eAAe,8HAuC3B,CAAC"}

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

@@ -2,21 +2,15 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
 import { useMergeRefs, FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
 import { AnimatePresence, motion } from "motion/react";
-import { useIsClient } from "usehooks-ts";
 import { useFloatingContext } from "../floating/helpers.js";
 import { FLOATING_Z_INDEX } from "../../../theme/index.js";
+import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
 const FloatingContent = forwardRef(
-  ({
-    style,
-    floatingPortalProps,
-    floatingFocusManagerProps,
-    floatingOverlayProps,
-    ...props
-  }, ref) => {
+  ({ style, floatingPortalProps, floatingFocusManagerProps, floatingOverlayProps, ...props }, ref) => {
     const { getFloatingProps, context } = useFloatingContext();
     const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);
-    const isClient = useIsClient();
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isClient && /* @__PURE__ */ jsx(FloatingPortal, { root: document.body, ...floatingPortalProps, children: /* @__PURE__ */ jsx(
+    const isHydrated = useIsHydrated();
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isHydrated && /* @__PURE__ */ jsx(FloatingPortal, { root: document.body, ...floatingPortalProps, children: /* @__PURE__ */ jsx(
       FloatingOverlay,
       {
         ...floatingOverlayProps,
@@ -24,30 +18,22 @@ const FloatingContent = forwardRef(
           display: (floatingOverlayProps == null ? void 0 : floatingOverlayProps.disabled) ?? true ? "contents" : void 0,
           ...floatingOverlayProps == null ? void 0 : floatingOverlayProps.style
         },
-        children: /* @__PURE__ */ jsx(
-          FloatingFocusManager,
+        children: /* @__PURE__ */ jsx(FloatingFocusManager, { disabled: true, context, ...floatingFocusManagerProps, children: /* @__PURE__ */ jsx(
+          motion.div,
           {
-            disabled: true,
-            context,
-            ...floatingFocusManagerProps,
-            children: /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                initial: { opacity: 0 },
-                animate: { opacity: 1 },
-                exit: { opacity: 0 },
-                style: {
-                  ...context.elements.reference ? context.floatingStyles : {},
-                  ...style,
-                  zIndex: FLOATING_Z_INDEX
-                },
-                ...getFloatingProps(props),
-                ref: mergedRefs,
-                children: props.children
-              }
-            )
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            style: {
+              ...context.elements.reference ? context.floatingStyles : {},
+              ...style,
+              zIndex: FLOATING_Z_INDEX
+            },
+            ...getFloatingProps(props),
+            ref: mergedRefs,
+            children: props.children
           }
-        )
+        ) })
       }
     ) }) });
   }

package/dist/lib/loading/block-skeleton/block-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/block-skeleton/block-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDAItD,CAAC"}
+{"version":3,"file":"block-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/block-skeleton/block-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDAEtD,CAAC"}

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

@@ -1,9 +1,9 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
-import { useTheme } from "@emotion/react";
+import "lodash-es";
+import { getColorVar } from "../../../theme/palette.js";
 const BlockSkeleton = (props) => {
-  const { palette } = useTheme();
-  return /* @__PURE__ */ jsx("div", { css: [animatePulseStyle, { borderRadius: 4, backgroundColor: palette.neutral[200] }], ...props });
+  return /* @__PURE__ */ jsx("div", { css: [animatePulseStyle, { borderRadius: 4, backgroundColor: getColorVar("neutral.200") }], ...props });
 };
 export {
   BlockSkeleton

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

@@ -1 +1 @@
-{"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/image-skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAI7C,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDA8BtD,CAAC"}
+{"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/image-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK7C,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDA4BtD,CAAC"}

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

@@ -1,8 +1,8 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
 import { animatePulseStyle } from "../../../constants/emotion.js";
+import "lodash-es";
+import { getColorVar } from "../../../theme/palette.js";
 const ImageSkeleton = (props) => {
-  const { palette } = useTheme();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -15,14 +15,14 @@ const ImageSkeleton = (props) => {
           width: "100%",
           height: "100%",
           borderRadius: "0.25rem",
-          backgroundColor: palette.neutral[200]
+          backgroundColor: getColorVar("neutral.200")
         }
       ],
       ...props,
       children: /* @__PURE__ */ jsx(
         "svg",
         {
-          css: { width: "25%", height: "25%", color: palette.neutral[400] },
+          css: { width: "25%", height: "25%", color: getColorVar("neutral.400") },
           "aria-hidden": "true",
           xmlns: "http://www.w3.org/2000/svg",
           fill: "currentColor",

package/dist/lib/loading/text-skeleton/text-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/text-skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI5C,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAgBpD,CAAC"}
+{"version":3,"file":"text-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/text-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAK5C,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAcpD,CAAC"}

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

@@ -1,15 +1,15 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
 import { animatePulseStyle } from "../../../constants/emotion.js";
+import "lodash-es";
+import { getColorVar } from "../../../theme/palette.js";
 const TextSkeleton = (props) => {
-  const { palette } = useTheme();
   return /* @__PURE__ */ jsxs("span", { css: { width: "100%", overflow: "hidden", display: "inline-flex", alignItems: "center" }, ...props, children: [
     /* @__PURE__ */ jsx(
       "span",
       {
         css: [
           animatePulseStyle,
-          { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: palette.neutral[200] }
+          { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: getColorVar("neutral.200") }
         ],
         children: " "
       }

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

@@ -10,8 +10,11 @@ export type NotificationEntry = {
 export type NotificationAtomValue = {
     entries: NotificationEntry[];
 };
-export declare const notificationAtom: import('jotai').PrimitiveAtom<NotificationAtomValue> & {
-    init: NotificationAtomValue;
+export declare const notificationStore: {
+    getSnapshot: () => NotificationAtomValue;
+    getServerSnapshot: () => NotificationAtomValue;
+    subscribe: (listener: () => void) => () => boolean;
+    setState: (updater: (prev: NotificationAtomValue) => NotificationAtomValue) => void;
 };
 type PushNotificationTemplate = Omit<NotificationEntry, 'id'>;
 export declare const useNotifications: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/helpers.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;CAE3B,CAAC;AAEH,KAAK,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;AAE9D,eAAO,MAAM,gBAAgB;wBAIxB,CAAC,SAAS,wBAAwB,4CAA4C,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI;CAwBlG,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/helpers.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAC9B,CAAC;AAKF,eAAO,MAAM,iBAAiB;;;0BAGN,MAAM,IAAI;wBAIZ,CAAC,IAAI,EAAE,qBAAqB,KAAK,qBAAqB;CAI3E,CAAC;AAEF,KAAK,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;AAE9D,eAAO,MAAM,gBAAgB;wBAExB,CAAC,SAAS,wBAAwB,4CAA4C,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI;CAqBlG,CAAC"}

package/dist/lib/notifications/helpers.js

@@ -1,31 +1,36 @@
 import { useCallback, useMemo } from "react";
-import { atom, useAtom } from "jotai";
-import { v4 } from "uuid";
 import "lodash-es";
 import "../../theme/palette.js";
 import { ensureArray } from "../../utils/common.js";
-const notificationAtom = atom({
-  entries: []
-});
+let _state = { entries: [] };
+const _listeners = /* @__PURE__ */ new Set();
+const notificationStore = {
+  getSnapshot: () => _state,
+  getServerSnapshot: () => _state,
+  subscribe: (listener) => {
+    _listeners.add(listener);
+    return () => _listeners.delete(listener);
+  },
+  setState: (updater) => {
+    _state = updater(_state);
+    _listeners.forEach((l) => l());
+  }
+};
 const useNotifications = () => {
-  const [, setAtomValue] = useAtom(notificationAtom);
-  const pushNotifications = useCallback(
-    (notifications) => {
-      return setAtomValue((prev) => {
-        return {
-          ...prev,
-          entries: [
-            ...prev.entries,
-            ...ensureArray(notifications).map((notification) => ({
-              ...notification,
-              id: v4()
-            }))
-          ]
-        };
-      });
-    },
-    [setAtomValue]
-  );
+  const pushNotifications = useCallback((notifications) => {
+    return notificationStore.setState((prev) => {
+      return {
+        ...prev,
+        entries: [
+          ...prev.entries,
+          ...ensureArray(notifications).map((notification) => ({
+            ...notification,
+            id: Math.random().toString(36).slice(2)
+          }))
+        ]
+      };
+    });
+  }, []);
   return useMemo(() => {
     return {
       pushNotifications
@@ -33,6 +38,6 @@ const useNotifications = () => {
   }, [pushNotifications]);
 };
 export {
-  notificationAtom,
+  notificationStore,
   useNotifications
 };

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

@@ -1 +1 @@
-{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/notifications.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,aAAa,wDA4BzB,CAAC"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/notifications.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,aAAa,wDAgCzB,CAAC"}

package/dist/lib/notifications/notifications.js

@@ -1,15 +1,19 @@
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
-import { useRef, useCallback, useEffect } from "react";
+import { useSyncExternalStore, useRef, useCallback, useEffect } from "react";
 import { FloatingPortal } from "@floating-ui/react";
-import { useAtomValue, useAtom } from "jotai";
 import { isNil } from "lodash-es";
 import { AnimatePresence, useAnimation, motion } from "motion/react";
-import { notificationAtom } from "./helpers.js";
+import { notificationStore } from "./helpers.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
 import { mediaQuery } from "../../theme/screens.js";
+import { getTypographyVar } from "../../theme/typography.js";
 const Notifications = () => {
-  const { entries } = useAtomValue(notificationAtom);
+  const { entries } = useSyncExternalStore(
+    notificationStore.subscribe,
+    notificationStore.getSnapshot,
+    notificationStore.getServerSnapshot
+  );
   return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -34,18 +38,17 @@ const Notifications = () => {
 };
 const Notification = ({ notification }) => {
   const { main, light } = getColorShadesByVariant(notification.color);
-  const [, setAtomValue] = useAtom(notificationAtom);
   const timerRef = useRef(null);
   const controls = useAnimation();
   const progressControls = useAnimation();
   const startTimeRef = useRef(Date.now());
   const remainingTimeRef = useRef(notification.duration ?? 3e3);
   const removeNotification = useCallback(() => {
-    setAtomValue((prev) => ({
+    notificationStore.setState((prev) => ({
       ...prev,
       entries: prev.entries.filter((n) => n.id !== notification.id)
     }));
-  }, [notification.id, setAtomValue]);
+  }, [notification.id]);
   const clearTimer = useCallback(() => {
     if (isNil(timerRef.current)) return;
     clearTimeout(timerRef.current);
@@ -133,10 +136,13 @@ const Notification = ({ notification }) => {
           "div",
           {
             css: {
-              fontSize: "0.875rem",
-              lineHeight: "1.25rem",
+              fontSize: getTypographyVar("sm").fontSize,
+              lineHeight: getTypographyVar("sm").lineHeight,
               fontWeight: 500,
-              [mediaQuery("sm")]: { fontSize: "1rem", lineHeight: "1.5rem" }
+              [mediaQuery("md")]: {
+                fontSize: getTypographyVar("base").fontSize,
+                lineHeight: getTypographyVar("base").lineHeight
+              }
             },
             children: notification.title ?? /* @__PURE__ */ jsx(Fragment, { children: " " })
           }
@@ -145,9 +151,12 @@ const Notification = ({ notification }) => {
           "div",
           {
             css: {
-              fontSize: "0.75rem",
-              lineHeight: "1rem",
-              [mediaQuery("sm")]: { fontSize: "0.875rem", lineHeight: "1.25rem" }
+              fontSize: getTypographyVar("xs").fontSize,
+              lineHeight: getTypographyVar("xs").lineHeight,
+              [mediaQuery("md")]: {
+                fontSize: getTypographyVar("sm").fontSize,
+                lineHeight: getTypographyVar("sm").lineHeight
+              }
             },
             children: notification.message ?? /* @__PURE__ */ jsx(Fragment, { children: " " })
           }

package/dist/lib/phone-input/phone-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/phone-input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAsD3D,eAAO,MAAM,UAAU,yHA8ItB,CAAC"}
+{"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/phone-input.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAsD3D,eAAO,MAAM,UAAU,yHAqJtB,CAAC"}

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

@@ -1,9 +1,8 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, useState, useRef } from "react";
+import { forwardRef, useState, useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { isNil } from "lodash-es";
 import { phone } from "phone";
-import { useResizeObserver } from "usehooks-ts";
 import countries from "../../assets/json/countries.json.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
@@ -55,16 +54,26 @@ const PhoneInput = forwardRef(
     const inputRef = useRef(null);
     const wrapperRef = useRef(null);
     const mergedRefs = useMergeRefs([ref, wrapperRef]);
+    const [wrapperWidth, setWrapperWidth] = useState(0);
+    useEffect(() => {
+      const resizeObserver = new ResizeObserver((entries) => {
+        var _a2;
+        const domRect = (_a2 = entries.at(0)) == null ? void 0 : _a2.target.getBoundingClientRect();
+        if (domRect) {
+          setWrapperWidth(domRect.width);
+        }
+      });
+      if (wrapperRef.current) {
+        resizeObserver.observe(wrapperRef.current);
+      }
+      return () => resizeObserver.disconnect();
+    }, []);
     const [internalValue, setInternalValue] = useControllableState({
       defaultValue: parsePhoneInputValue(defaultValue) ?? {
         countryCode: (_a = countries.at(0)) == null ? void 0 : _a.code
       },
       value: parsePhoneInputValue(value)
     });
-    const { width: wrapperWidth = 0 } = useResizeObserver({
-      ref: wrapperRef,
-      box: "border-box"
-    });
     const triggerChange = (next) => {
       setInternalValue(next);
       onChange == null ? void 0 : onChange(next);
@@ -89,110 +98,103 @@ const PhoneInput = forwardRef(
       const originalValue = internalValue.nationalNumber ?? "";
       return inputFocused ? originalValue : originalValue.replace(/^(\d{1,3})(\d{0,3})?(\d*)$/, "$1 $2 $3");
     })();
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ...containerProps,
-        css: { display: "flex", flexDirection: "column", width: "100%", ...containerProps == null ? void 0 : containerProps.css },
-        children: [
-          /* @__PURE__ */ jsx(
-            ForwardRefInputMask,
-            {
-              ...props,
-              css: [
-                error && !selectOpen && {
-                  "&::after": { borderColor: getColorVar("red.600") }
+    return /* @__PURE__ */ jsxs("div", { ...containerProps, css: [{ display: "flex", flexDirection: "column", width: "100%" }, containerProps == null ? void 0 : containerProps.css], children: [
+      /* @__PURE__ */ jsx(
+        ForwardRefInputMask,
+        {
+          ...props,
+          css: [
+            error && !selectOpen && {
+              "&::after": { borderColor: getColorVar("red.600") }
+            },
+            inputFocused && {
+              "&::after": { borderColor: getColorVar("primary.600") },
+              boxShadow: `0 0 0 3px ${getColorVar("primary.300")}`
+            },
+            disabled && {
+              backgroundColor: getColorShadesByVariant("neutral").disabledSurface,
+              pointerEvents: "none"
+            },
+            props.css
+          ],
+          ref: mergedRefs,
+          children: /* @__PURE__ */ jsxs("div", { css: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                containerProps: {
+                  css: { width: "fit-content", minWidth: 80 }
                 },
-                inputFocused && {
-                  "&::after": { borderColor: getColorVar("primary.600") },
-                  boxShadow: `0 0 0 3px ${getColorVar("primary.300")}`
+                css: {
+                  paddingRight: 0
                 },
-                disabled && {
-                  backgroundColor: getColorShadesByVariant("neutral").disabledSurface,
-                  pointerEvents: "none"
+                xs: {
+                  outline: {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                  }
                 },
-                props.css
-              ],
-              ref: mergedRefs,
-              children: /* @__PURE__ */ jsxs("div", { css: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
-                /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    containerProps: {
-                      css: { width: "fit-content", minWidth: 80 }
-                    },
-                    css: {
-                      paddingRight: 0
-                    },
-                    xs: {
-                      outline: {
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                        left: 0
-                      }
-                    },
-                    listProps: {
-                      style: {
-                        width: wrapperWidth
-                      }
-                    },
-                    value: internalValue.countryCode ?? null,
-                    onChange: onDialCodeChange,
-                    options: countries,
-                    disabled,
-                    selectedRenderer: SelectedRenderer,
-                    optionLabel: CountryRowLabel,
-                    optionValue: "code",
-                    optionSearchLabel: ["name", "dial_code", "code"],
-                    open: selectOpen,
-                    onOpenChange: setSelectOpen
+                listProps: {
+                  style: {
+                    width: wrapperWidth
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    css: {
-                      borderRight: "1px solid",
-                      borderColor: getColorVar("border.default"),
-                      height: "66.666667%",
-                      marginLeft: 8,
-                      marginRight: 8
-                    }
+                },
+                value: internalValue.countryCode ?? null,
+                onChange: onDialCodeChange,
+                options: countries,
+                disabled,
+                selectedRenderer: SelectedRenderer,
+                optionLabel: CountryRowLabel,
+                optionValue: "code",
+                optionSearchLabel: ["name", "dial_code", "code"],
+                open: selectOpen,
+                onOpenChange: setSelectOpen
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  borderRight: "1px solid",
+                  borderColor: getColorVar("border.default"),
+                  height: "66.666667%",
+                  marginLeft: 8,
+                  marginRight: 8
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: inputDisplayValue,
+                disabled,
+                containerProps: {
+                  css: { flex: 1 }
+                },
+                mainProps: {
+                  style: {
+                    paddingLeft: 0,
+                    boxShadow: "none"
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    value: inputDisplayValue,
-                    disabled,
-                    containerProps: {
-                      css: { flex: 1 }
-                    },
-                    mainProps: {
-                      style: {
-                        paddingLeft: 0,
-                        boxShadow: "none"
-                      }
-                    },
-                    onChange: onNationalNumberChange,
-                    xs: {
-                      css: {
-                        borderWidth: 0
-                      }
-                    },
-                    onFocus: () => setInputFocused(true),
-                    onBlur: () => setInputFocused(false),
-                    ref: inputRef
+                },
+                onChange: onNationalNumberChange,
+                xs: {
+                  css: {
+                    borderWidth: 0
                   }
-                )
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-        ]
-      }
-    );
+                },
+                onFocus: () => setInputFocused(true),
+                onBlur: () => setInputFocused(false),
+                ref: inputRef
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+    ] });
   }
 );
 export {

package/dist/theme/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EAGN,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,wBAAyB,kBAAkB,qDAOpE,CAAC"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,EAAwD,MAAM,gBAAgB,CAAC;AACrG,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,wBAAyB,kBAAkB,qDAOpE,CAAC"}

package/dist/theme/provider.js

@@ -13,18 +13,12 @@ const ThemeProvider = ({ theme, children }) => {
 const createGlobalStyle = ({ palette, typography }) => {
   const flattenPalette = flatten(palette);
   const colorVars = Object.fromEntries(
-    Object.keys(flattenPalette).map((key) => [
-      getColorVar(key, false),
-      flattenPalette[key]
-    ])
+    Object.keys(flattenPalette).map((key) => [getColorVar(key, false), flattenPalette[key]])
   );
   const typographyVars = Object.fromEntries(
     flatMap(
       Object.keys(typography).map((key) => {
-        const typographyVar = getTypographyVar(
-          key,
-          false
-        );
+        const typographyVar = getTypographyVar(key, false);
         const { fontSize, lineHeight } = typography[key];
         return [
           [typographyVar.fontSize, fontSize],

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from '@emotion/serialize';
+import { CSSObject } from '@emotion/react';
 import { Screen } from '../theme';
 import type * as CSS from 'csstype';
 export type Nullable<T> = T | null;

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,MAAM,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC;AAE3D,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAErG,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D;;;;;;GAMG;AAEH,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,CAAC,OAAO,CAAC,GAC/E,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG;KAAG,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS;CAAE,CAAC;AAEvE,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG;IACxD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,MAAM,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC;AAE3D,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAErG,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D;;;;;;GAMG;AAEH,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,CAAC,OAAO,CAAC,GAC/E,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG;KAAG,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS;CAAE,CAAC;AAEvE,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG;IACxD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [
@@ -23,10 +23,6 @@
       "types": "./dist/theme/index.d.ts",
       "default": "./dist/theme/index.js"
     },
-    "./theme/*": {
-      "types": "./dist/theme/*.d.ts",
-      "default": "./dist/theme/*.js"
-    },
     "./hooks": {
       "types": "./dist/hooks/index.d.ts",
       "default": "./dist/hooks/index.js"
@@ -57,9 +53,9 @@
     "access": "restricted"
   },
   "peerDependencies": {
-    "@emotion/react": ">=11.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "@emotion/react": "*",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.13",
@@ -75,7 +71,6 @@
     "flat": "^6.0.1",
     "highlight-words-core": "^1.2.3",
     "html-react-parser": "^5.2.2",
-    "jotai": "^2.12.2",
     "lodash-es": "^4.17.21",
     "motion": "^11.15.0",
     "overlayscrollbars-react": "^0.5.6",
@@ -84,13 +79,9 @@
     "react-i18next": "^14.0.0",
     "react-player": "^3.3.3",
     "react-router": "^7.9.6",
-    "react-zoom-pan-pinch": "^3.7.0",
-    "usehooks-ts": "^3.1.1",
-    "uuid": "^10.0.0"
+    "react-zoom-pan-pinch": "^3.7.0"
   },
   "devDependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/serialize": "^1.3.3",
     "@eslint/js": "^9.24.0",
     "@storybook/builder-vite": "^10.2.14",
     "@storybook/react-vite": "^10.2.14",
@@ -100,7 +91,6 @@
     "@types/react": "^19.1.8",
     "@types/react-date-range": "^1.4.10",
     "@types/react-dom": "^19.1.6",
-    "@types/uuid": "^10.0.0",
     "csstype": "^3.1.3",
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.8",
@@ -111,8 +101,6 @@
     "globals": "^17.4.0",
     "i18next": "^25.8.13",
     "prettier": "^3.8.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
     "sass-embedded": "^1.97.3",
     "storybook": "^10.2.14",
     "type-fest": "^5.2.0",