impact-ui 4.0.6 → 4.0.7-alpha.2

package/dist/hooks/useDraggableResizable.js

@@ -0,0 +1,323 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+const RESIZE_STEP = 8;
+const RESIZE_STEP_LARGE = 32;
+const BOTTOM_VIEWPORT_MARGIN = 24;
+function resolveViewportMargin(input) {
+  if (typeof input === "number") {
+    return { top: input, right: input, bottom: input, left: input };
+  }
+  return {
+    top: (input == null ? void 0 : input.top) ?? 0,
+    right: (input == null ? void 0 : input.right) ?? 0,
+    bottom: (input == null ? void 0 : input.bottom) ?? 0,
+    left: (input == null ? void 0 : input.left) ?? 0
+  };
+}
+function clampNumber(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function safeCapturePointer(target, pointerId) {
+  if (typeof target.setPointerCapture !== "function") return;
+  try {
+    target.setPointerCapture(pointerId);
+  } catch {
+  }
+}
+function safeReleasePointer(target, pointerId) {
+  if (typeof target.releasePointerCapture !== "function") return;
+  try {
+    target.releasePointerCapture(pointerId);
+  } catch {
+  }
+}
+function clampRect(rect, opts) {
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : Infinity;
+  const viewportHeight = typeof window !== "undefined" ? window.innerHeight : Infinity;
+  const { margin } = opts;
+  const boundsWidth = viewportWidth - margin.left - margin.right;
+  const boundsHeight = viewportHeight - margin.top - margin.bottom;
+  const width = clampNumber(rect.width, opts.minWidth, Math.min(opts.maxWidth, boundsWidth));
+  const height = clampNumber(rect.height, opts.minHeight, Math.min(opts.maxHeight, boundsHeight));
+  const x = clampNumber(
+    rect.x,
+    margin.left,
+    Math.max(margin.left, viewportWidth - margin.right - width)
+  );
+  const y = clampNumber(
+    rect.y,
+    margin.top,
+    Math.max(margin.top, viewportHeight - margin.bottom - height)
+  );
+  return { x, y, width, height };
+}
+function useDraggableResizable({
+  initialRect,
+  minWidth = 320,
+  minHeight = 320,
+  maxWidth = Infinity,
+  maxHeight = Infinity,
+  viewportMargin,
+  disabled = false,
+  onChange,
+  onDragEnd,
+  onResizeEnd
+}) {
+  const [rect, setRectState] = useState(initialRect);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const rectRef = useRef(rect);
+  rectRef.current = rect;
+  const savedRectRef = useRef(null);
+  const rafRef = useRef(null);
+  const pendingRectRef = useRef(null);
+  const cleanupRef = useRef(null);
+  const margin = resolveViewportMargin(viewportMargin);
+  const limits = { minWidth, minHeight, maxWidth, maxHeight, margin };
+  const { top: marginTop, right: marginRight, bottom: marginBottom, left: marginLeft } = margin;
+  const commitRect = useCallback(
+    (next) => {
+      const clamped = clampRect(next, limits);
+      pendingRectRef.current = clamped;
+      if (rafRef.current == null) {
+        rafRef.current = requestAnimationFrame(() => {
+          rafRef.current = null;
+          if (pendingRectRef.current) {
+            setRectState(pendingRectRef.current);
+            onChange == null ? void 0 : onChange(pendingRectRef.current);
+          }
+        });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      onChange
+    ]
+  );
+  const setRect = useCallback(
+    (updater) => {
+      const next = typeof updater === "function" ? updater(rectRef.current) : updater;
+      const clamped = clampRect(next, limits);
+      rectRef.current = clamped;
+      setRectState(clamped);
+      onChange == null ? void 0 : onChange(clamped);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      onChange
+    ]
+  );
+  const endInteraction = useCallback(() => {
+    document.body.classList.remove("no-select");
+    const cleanup = cleanupRef.current;
+    cleanupRef.current = null;
+    cleanup == null ? void 0 : cleanup();
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    if (pendingRectRef.current) {
+      setRectState(pendingRectRef.current);
+      onChange == null ? void 0 : onChange(pendingRectRef.current);
+    }
+  }, [onChange]);
+  useEffect(
+    () => () => {
+      var _a;
+      document.body.classList.remove("no-select");
+      (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    },
+    []
+  );
+  const startDrag = useCallback(
+    (e) => {
+      if (disabled) return;
+      const target = e.currentTarget;
+      const pointerId = e.pointerId;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startRect = rectRef.current;
+      safeCapturePointer(target, pointerId);
+      document.body.classList.add("no-select");
+      setIsDragging(true);
+      const onMove = (ev) => {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+        commitRect({ ...startRect, x: startRect.x - 24 + dx, y: startRect.y - 24 + dy });
+      };
+      const onUp = () => {
+        safeReleasePointer(target, pointerId);
+        target.removeEventListener("pointermove", onMove);
+        target.removeEventListener("pointerup", onUp);
+        target.removeEventListener("pointercancel", onUp);
+        setIsDragging(false);
+        endInteraction();
+        onDragEnd == null ? void 0 : onDragEnd(rectRef.current);
+      };
+      target.addEventListener("pointermove", onMove);
+      target.addEventListener("pointerup", onUp);
+      target.addEventListener("pointercancel", onUp);
+      cleanupRef.current = onUp;
+    },
+    [disabled, commitRect, endInteraction, onDragEnd]
+  );
+  const startResize = useCallback(
+    (direction) => (e) => {
+      if (disabled) return;
+      e.stopPropagation();
+      const target = e.currentTarget;
+      const pointerId = e.pointerId;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startRect = rectRef.current;
+      safeCapturePointer(target, pointerId);
+      document.body.classList.add("no-select");
+      setIsResizing(true);
+      const onMove = (ev) => {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+        let { x, y, width, height } = startRect;
+        if (direction.includes("e")) width = startRect.width + dx;
+        if (direction.includes("s")) height = startRect.height + dy;
+        if (direction.includes("w")) {
+          width = startRect.width - dx;
+          x = startRect.x + dx;
+        }
+        if (direction.includes("n")) {
+          height = startRect.height - dy;
+          y = startRect.y + dy;
+        }
+        commitRect({ x, y, width, height });
+      };
+      const onUp = () => {
+        safeReleasePointer(target, pointerId);
+        target.removeEventListener("pointermove", onMove);
+        target.removeEventListener("pointerup", onUp);
+        target.removeEventListener("pointercancel", onUp);
+        setIsResizing(false);
+        endInteraction();
+        onResizeEnd == null ? void 0 : onResizeEnd(rectRef.current);
+      };
+      target.addEventListener("pointermove", onMove);
+      target.addEventListener("pointerup", onUp);
+      target.addEventListener("pointercancel", onUp);
+      cleanupRef.current = onUp;
+    },
+    [disabled, commitRect, endInteraction, onResizeEnd]
+  );
+  const handleResizeKeyDown = useCallback(
+    (direction) => (e) => {
+      if (disabled) return;
+      const step = e.shiftKey ? RESIZE_STEP_LARGE : RESIZE_STEP;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowLeft") dx = -step;
+      else if (e.key === "ArrowRight") dx = step;
+      else if (e.key === "ArrowUp") dy = -step;
+      else if (e.key === "ArrowDown") dy = step;
+      else return;
+      e.preventDefault();
+      const startRect = rectRef.current;
+      let { x, y, width, height } = startRect;
+      if (direction.includes("e")) width += dx;
+      if (direction.includes("s")) height += dy;
+      if (direction.includes("w")) {
+        width -= dx;
+        x += dx;
+      }
+      if (direction.includes("n")) {
+        height -= dy;
+        y += dy;
+      }
+      setRect({ x, y, width, height });
+      onResizeEnd == null ? void 0 : onResizeEnd(rectRef.current);
+    },
+    [disabled, setRect, onResizeEnd]
+  );
+  const dragHandleProps = {
+    onPointerDown: startDrag,
+    onKeyDown: (e) => {
+      if (disabled) return;
+      const step = e.shiftKey ? RESIZE_STEP_LARGE : RESIZE_STEP;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowLeft") dx = -step;
+      else if (e.key === "ArrowRight") dx = step;
+      else if (e.key === "ArrowUp") dy = -step;
+      else if (e.key === "ArrowDown") dy = step;
+      else return;
+      e.preventDefault();
+      setRect((prev) => ({ ...prev, x: prev.x + dx, y: prev.y + dy }));
+    }
+  };
+  const getResizeHandleProps = useCallback(
+    (direction) => ({
+      onPointerDown: startResize(direction),
+      onKeyDown: handleResizeKeyDown(direction),
+      role: "separator",
+      tabIndex: 0,
+      "aria-orientation": direction === "n" || direction === "s" ? "horizontal" : "vertical"
+    }),
+    [startResize, handleResizeKeyDown]
+  );
+  const collapseTo = useCallback(
+    (size, options) => {
+      savedRectRef.current = rectRef.current;
+      setIsCollapsed(true);
+      const m = (options == null ? void 0 : options.viewportMargin) === void 0 ? { top: marginTop, right: marginRight, bottom: marginBottom, left: marginLeft } : resolveViewportMargin(options.viewportMargin);
+      const viewportWidth = typeof window !== "undefined" ? window.innerWidth : size.width;
+      const viewportHeight = typeof window !== "undefined" ? window.innerHeight : size.height;
+      const anchor = (options == null ? void 0 : options.anchor) ?? "bottom-right";
+      const x = anchor.endsWith("right") ? viewportWidth - size.width - m.right : m.left;
+      const y = anchor.startsWith("bottom") ? viewportHeight - size.height - m.bottom : m.top;
+      const clamped = clampRect(
+        { x, y, width: size.width, height: size.height },
+        { minWidth: size.width, minHeight: size.height, maxWidth, maxHeight, margin: m }
+      );
+      rectRef.current = clamped;
+      setRectState(clamped);
+      onChange == null ? void 0 : onChange(clamped);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [maxWidth, maxHeight, marginTop, marginRight, marginBottom, marginLeft, onChange]
+  );
+  const restore = useCallback(() => {
+    if (savedRectRef.current) {
+      setRect(savedRectRef.current);
+      savedRectRef.current = null;
+    }
+    setIsCollapsed(false);
+  }, [setRect]);
+  return {
+    rect,
+    isDragging,
+    isResizing,
+    isCollapsed,
+    setRect,
+    dragHandleProps,
+    getResizeHandleProps,
+    collapseTo,
+    restore
+  };
+}
+export {
+  BOTTOM_VIEWPORT_MARGIN,
+  useDraggableResizable
+};

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Subscribes to a CSS media query via `window.matchMedia` and returns whether it currently
+ * matches. Re-renders when the match state changes (e.g. the viewport crosses the threshold).
+ *
+ * @param query - A valid CSS media query string, e.g. `'(max-width: 768px)'`.
+ * @param defaultMatches - Value returned during SSR / before `window` is available. Defaults to `false`.
+ */
+export declare function useMediaQuery(query: string, defaultMatches?: boolean): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/hooks/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,UAAQ,GAAG,OAAO,CA+B5E"}

package/dist/mcp-component-registry.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "generatedAt": "2026-08-19T14:44:39.025Z",
+  "generatedAt": "2026-09-02T05:50:00.298Z",
   "components": {
     "Menu": {
       "title": "Components/Menu",

package/dist/node_modules/@mui/system/colorManipulator.js

@@ -1,7 +1,7 @@
 import { __exports as colorManipulator } from "../../../_virtual/colorManipulator.js";
 import require$$0 from "@babel/runtime/helpers/interopRequireDefault";
-import require$$1 from "../../../_virtual/index4.js";
-import require$$2 from "../../../_virtual/index5.js";
+import require$$1 from "../../../_virtual/index3.js";
+import require$$2 from "../../../_virtual/index4.js";
 var _interopRequireDefault = require$$0;
 Object.defineProperty(colorManipulator, "__esModule", {
   value: true

package/dist/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as reactIs } from "../../_virtual/index3.js";
+import { __module as reactIs } from "../../_virtual/index5.js";
 import { __require as requireReactIs_production } from "./cjs/react-is.production.js";
 import { __require as requireReactIs_development } from "./cjs/react-is.development.js";
 if (process.env.NODE_ENV === "production") {

package/dist/stories/LocaleDictionaryCollapse.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Collapsible viewer for the shipped locale JSON files.
+ * Used by i18n.mdx so the full dictionaries don't dominate the docs page.
+ */
+export declare function LocaleDictionaryCollapse(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LocaleDictionaryCollapse.d.ts.map

package/dist/stories/LocaleDictionaryCollapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocaleDictionaryCollapse.d.ts","sourceRoot":"","sources":["../../src/stories/LocaleDictionaryCollapse.tsx"],"names":[],"mappings":"AA0BA;;;GAGG;AACH,wBAAgB,wBAAwB,4CAoBvC"}

package/dist/utils/assetBase.d.ts

@@ -1,3 +1,4 @@
+export { DEFAULT_IMPACT_UI_ASSET_BASE } from './assetBaseDefault';
 /**
  * Absolute URL for an asset on the asset CDN.
  *

package/dist/utils/assetBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"assetBase.d.ts","sourceRoot":"","sources":["../../src/utils/assetBase.ts"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAOxD"}
+{"version":3,"file":"assetBase.d.ts","sourceRoot":"","sources":["../../src/utils/assetBase.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,4BAA4B,EAAE,MAAM,oBAAoB,CAAC;AAElE;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAIxD"}

package/dist/utils/assetBase.js

@@ -1,14 +1,11 @@
-const DEFAULT_IMPACT_UI_ASSET_BASE = "https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod";
-function stripTrailingSlashes(s) {
-  return s.replace(/\/+$/, "");
-}
+import { resolveAssetBase } from "./assetBaseDefault.js";
+import { DEFAULT_IMPACT_UI_ASSET_BASE } from "./assetBaseDefault.js";
 function getAssetUrl(relativePath) {
-  const base = stripTrailingSlashes(
-    DEFAULT_IMPACT_UI_ASSET_BASE
-  );
+  const base = resolveAssetBase();
   const path = relativePath.replace(/^\/+/, "");
   return `${base}/${path}`;
 }
 export {
+  DEFAULT_IMPACT_UI_ASSET_BASE,
   getAssetUrl
 };

package/dist/utils/assetBaseDefault.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Single source of truth for the asset origin, shared by runtime code (`assetBase.ts`)
+ * and the Vite/Vitest/Storybook configs that inject `$impact-ui-asset-base` into SCSS.
+ *
+ * Must stay free of `import.meta.env` so Node-side config files can import it.
+ */
+/** Default prod asset origin (GCP-backed static files). Override with `VITE_IMPACT_UI_ASSET_BASE`. */
+export declare const DEFAULT_IMPACT_UI_ASSET_BASE = "https://impact-kit.iaproducts.ai/api/v1/files/uploads/impact-ui/prod";
+/** Returns the configured base without trailing slashes, falling back to the prod default. */
+export declare function resolveAssetBase(fromEnv?: string): string;
+//# sourceMappingURL=assetBaseDefault.d.ts.map

package/dist/utils/assetBaseDefault.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assetBaseDefault.d.ts","sourceRoot":"","sources":["../../src/utils/assetBaseDefault.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,sGAAsG;AACtG,eAAO,MAAM,4BAA4B,yEAC+B,CAAC;AAEzE,8FAA8F;AAC9F,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAIzD"}

package/dist/utils/assetBaseDefault.js

@@ -0,0 +1,9 @@
+const DEFAULT_IMPACT_UI_ASSET_BASE = "https://impact-kit.iaproducts.ai/api/v1/files/uploads/impact-ui/prod";
+function resolveAssetBase(fromEnv) {
+  const base = DEFAULT_IMPACT_UI_ASSET_BASE;
+  return base.replace(/\/+$/, "");
+}
+export {
+  DEFAULT_IMPACT_UI_ASSET_BASE,
+  resolveAssetBase
+};

package/dist/utils/index.d.ts

@@ -10,6 +10,7 @@
  */
 export { getUserAvatarColor, DEFAULT_AVATAR_COLORS } from './avatarColor';
 export { debounce } from './debounce';
+export { getSize, onResize, type ElementSize } from './onResize';
 export { toInnerHTML, type InnerHTML } from './html';
 export { TEXT_FILTER_OPTIONS, NON_TEXT_FILTER_OPTIONS, DATE_FILTER_OPTIONS, convertToOptions, getAllowedColumns, hasDuplicateColumns, isColumnSelectionDuplicate, isViewNameUnique, toSentenceCase, type FilterOption, type ColumnOption, type ColumnDefinition, type FormFilter, type FormValues, type FilterField, type SavedView, } from './helper';
 export { useTextOverflow } from './useTextOverflow';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGrD,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,gBAAgB,EAChB,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,SAAS,GACf,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAGjE,OAAO,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGrD,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,gBAAgB,EAChB,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,SAAS,GACf,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/utils/onResize.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Thin ResizeObserver helper for watching an element's size.
+ * Prefer this over viewport breakpoints when the thing that changes
+ * size is a specific div (e.g. the resizable chatbot panel).
+ */
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+/** Current width/height of an element. */
+export declare function getSize(el: Element): ElementSize;
+/**
+ * Watch an element with ResizeObserver.
+ * Fires immediately with the current size, then on every resize.
+ * Returns an unsubscribe function.
+ *
+ * @example
+ * const stop = onResize(panelEl, ({ width, height }) => {
+ *   console.log(width, height);
+ * });
+ * // later: stop();
+ */
+export declare function onResize(el: Element, callback: (size: ElementSize) => void): () => void;
+//# sourceMappingURL=onResize.d.ts.map

package/dist/utils/onResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onResize.d.ts","sourceRoot":"","sources":["../../src/utils/onResize.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,0CAA0C;AAC1C,wBAAgB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,WAAW,CAGhD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,GAAG,MAAM,IAAI,CAyBvF"}

package/dist/utils/onResize.js

@@ -0,0 +1,28 @@
+function getSize(el) {
+  const { width, height } = el.getBoundingClientRect();
+  return { width, height };
+}
+function onResize(el, callback) {
+  if (typeof ResizeObserver === "undefined") {
+    callback(getSize(el));
+    return () => {
+    };
+  }
+  const observer = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry) return;
+    const box = entry.borderBoxSize[0];
+    callback(
+      box ? { width: box.inlineSize, height: box.blockSize } : { width: entry.contentRect.width, height: entry.contentRect.height }
+    );
+  });
+  observer.observe(el);
+  callback(getSize(el));
+  return () => {
+    observer.disconnect();
+  };
+}
+export {
+  getSize,
+  onResize
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-ui",
-  "version": "4.0.6",
+  "version": "4.0.7-alpha.2",
   "description": "Impact Analytics UI library",
   "type": "module",
   "main": "./dist/components/index.js",
@@ -122,11 +122,10 @@
     "@mui/system": "^5.8.1",
     "@mui/types": "^7.1.3",
     "@mui/x-date-pickers": "^5.0.0-alpha.4",
-    "@storybook/addon-a11y": "^10.2.15",
+    "@storybook/addon-a11y": "10.2.15",
     "@storybook/addon-docs": "10.2.15",
-    "@storybook/addon-vitest": "^10.2.15",
-    "@storybook/react-vite": "^10.2.15",
-    "@storybook/test": "^8.6.15",
+    "@storybook/addon-vitest": "10.2.15",
+    "@storybook/react-vite": "10.2.15",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^14.6.1",