@uniformdev/design-system 20.8.2-alpha.31 → 20.9.1-alpha.16

package/dist/esm/index.js

@@ -1563,6 +1563,9 @@ function useShortcut({
   const handle = useCallback(
     (e) => {
       if (disabled2) {
+        if (disabled2 === "silent") {
+          return;
+        }
         toast.info(`Shortcut ${getFormattedShortcut(shortcut).join("")} is currently disabled`);
         return;
       }
@@ -6481,7 +6484,7 @@ var ChipContainer = css45`
 `;
 var ChipText = css45`
   align-self: center;
-  line-height: 1;
+  line-height: 1.1;
   text-wrap: nowrap;
 `;
 var ChipIcon = css45`
@@ -7637,7 +7640,7 @@ var DragHandle = forwardRef15(
 
 // src/components/Drawer/Drawer.tsx
 import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
-import React15, { createContext as createContext4, useContext as useContext4, useEffect as useEffect5, useRef as useRef5, useState as useState8 } from "react";
+import React15, { createContext as createContext4, useContext as useContext4, useEffect as useEffect5, useRef as useRef4, useState as useState8 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -7748,7 +7751,7 @@ var drawerWrapperOverlayStyles = css54`
 `;
 
 // src/components/Drawer/DrawerProvider.tsx
-import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useRef as useRef4, useState as useState7 } from "react";
+import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useId, useState as useState7 } from "react";
 import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
 var DrawerContext = createContext3({
   providerId: "",
@@ -7767,7 +7770,7 @@ function renderDrawerId(drawer) {
 }
 var DrawerProvider = ({ children }) => {
   const [drawersRegistry, setDrawersRegistry] = useState7([]);
-  const providerId = useRef4(crypto.randomUUID());
+  const providerId = useId();
   const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState7(void 0);
   useShortcut({
     handler: () => {
@@ -7849,7 +7852,7 @@ var DrawerProvider = ({ children }) => {
         drawersRegistry,
         registerDrawer,
         unregisterDrawer,
-        providerId: providerId.current,
+        providerId,
         drawerTakeoverStackId,
         registerTakeoverStackId,
         unregisterTakeoverStackId
@@ -7888,7 +7891,7 @@ var Drawer = React15.forwardRef(
     const { stackId: inheritedStackId } = useCurrentDrawer();
     const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
-    const resolvedStickyStackIdRef = useRef5((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
+    const resolvedStickyStackIdRef = useRef4((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
     return resolvedStickyStackIdRef.current ? /* @__PURE__ */ jsx68(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ jsxs43(DrawerProvider, { children: [
       /* @__PURE__ */ jsx68(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ jsx68(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
@@ -7909,7 +7912,7 @@ var DrawerInner = ({
   testId = "side-dialog"
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
-  const closeButtonRef = useRef5(null);
+  const closeButtonRef = useRef4(null);
   const [rendererElement, setRendererElement] = useState8(null);
   useEffect5(() => {
     registerDrawer({
@@ -9136,15 +9139,15 @@ import {
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef6, useState as useState11 } from "react";
 
 // src/utils/useDebouncedCallback.ts
-import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef6 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef5 } from "react";
 function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
-  const timeout = useRef6();
-  const waitTimeout = useRef6();
-  const cb = useRef6(callback);
-  const lastCall = useRef6();
+  const timeout = useRef5();
+  const waitTimeout = useRef5();
+  const cb = useRef5(callback);
+  const lastCall = useRef5();
   const clear = () => {
     if (timeout.current) {
       clearTimeout(timeout.current);
@@ -9226,8 +9229,8 @@ var KeyValueInput = ({
   onFocusChange
 }) => {
   const [isDragging, setIsDragging] = useState11(false);
-  const popoverStoresMap = useRef7({});
-  const lastRowFirstInputRef = useRef7(null);
+  const popoverStoresMap = useRef6({});
+  const lastRowFirstInputRef = useRef6(null);
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -10165,7 +10168,7 @@ var LoadingIcon = ({ height, width, ...props }) => {
 // src/components/Modal/Modal.tsx
 import { PortalContext } from "@ariakit/react";
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
-import React17, { useEffect as useEffect12, useRef as useRef8 } from "react";
+import React17, { useEffect as useEffect12, useRef as useRef7 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css75 } from "@emotion/react";
@@ -10269,8 +10272,8 @@ var Modal = React17.forwardRef(
     disableBodyScroll = false,
     ...modalProps
   }, ref) => {
-    const mouseDownInsideModal = useRef8(false);
-    const dialogRef = useRef8(null);
+    const mouseDownInsideModal = useRef7(false);
+    const dialogRef = useRef7(null);
     const size = {
       sm: modalSizeSmall,
       md: modalSizeMedium,
@@ -10661,8 +10664,8 @@ var ObjectGridItemCardCover = (props) => {
     ) });
   }
   if ("icon" in props && props.icon) {
-    const { icon, iconColor } = props;
-    return /* @__PURE__ */ jsx101("div", { css: CoverContainer, children: /* @__PURE__ */ jsxs67("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", ...props, children: [
+    const { icon, iconColor, ...rest } = props;
+    return /* @__PURE__ */ jsx101("div", { css: CoverContainer, children: /* @__PURE__ */ jsxs67("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", ...rest, children: [
       /* @__PURE__ */ jsx101(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
       /* @__PURE__ */ jsx101(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
     ] }) });
@@ -10712,7 +10715,7 @@ var ObjectGridItemCoverButton = ({
 };
 
 // src/components/Objects/ObjectGridItemHeading.tsx
-import { useEffect as useEffect13, useRef as useRef9, useState as useState12 } from "react";
+import { useEffect as useEffect13, useRef as useRef8, useState as useState12 } from "react";
 
 // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
 import { css as css79 } from "@emotion/react";
@@ -10739,7 +10742,7 @@ var ObjectGridItemHeading2 = ({
   ...props
 }) => {
   const [hasTruncation, setHasTruncation] = useState12(false);
-  const headingRef = useRef9(null);
+  const headingRef = useRef8(null);
   const onStopPropagation = (e) => {
     e.stopPropagation();
   };
@@ -10985,13 +10988,21 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
             css: [
               ObjectListItemContentWrapper,
               `${cq(minContainerQueryWidth)} {
-            grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+            grid-template-columns: ${cover ? "minmax(0, auto)" : ""} minmax(0, 1fr) minmax(0, auto);
           }`
             ],
             children: [
-              /* @__PURE__ */ jsx106(HorizontalRhythm, { gap: "sm", align: "center", children: cover }),
+              cover ? /* @__PURE__ */ jsx106(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
               /* @__PURE__ */ jsxs71(VerticalRhythm, { gap: "0", justify: renderAs === "multi" ? "flex-start" : "center", children: [
-                /* @__PURE__ */ jsx106(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: header2 }),
+                /* @__PURE__ */ jsx106(
+                  HorizontalRhythm,
+                  {
+                    gap: "xs",
+                    align: renderAs === "multi" ? "flex-start" : "center",
+                    "data-testid": "title",
+                    children: header2
+                  }
+                ),
                 renderAs === "multi" ? props.children : null
               ] }),
               /* @__PURE__ */ jsx106(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
@@ -12601,7 +12612,7 @@ import {
   FOCUS_COMMAND,
   PASTE_COMMAND
 } from "lexical";
-import { useCallback as useCallback8, useEffect as useEffect16, useRef as useRef10, useState as useState15 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect16, useRef as useRef9, useState as useState15 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -12951,7 +12962,7 @@ function LinkNodePlugin({
   };
   const [editor] = useLexicalComposerContext3();
   const [linkPopoverState, setLinkPopoverState] = useState15();
-  const linkPopoverElRef = useRef10(null);
+  const linkPopoverElRef = useRef9(null);
   const [isEditorFocused, setIsEditorFocused] = useState15(false);
   const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState15(false);
   useEffect16(() => {
@@ -13202,7 +13213,7 @@ import {
   OUTDENT_CONTENT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useEffect as useEffect17, useRef as useRef11 } from "react";
+import { useEffect as useEffect17, useRef as useRef10 } from "react";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -13257,7 +13268,7 @@ function $indentOverTab(selection) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext4();
-  const isInListItemNode = useRef11(false);
+  const isInListItemNode = useRef10(false);
   useEffect17(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
@@ -13669,7 +13680,7 @@ import {
 } from "@lexical/table";
 import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
-import { useCallback as useCallback10, useEffect as useEffect19, useMemo as useMemo6, useRef as useRef12, useState as useState17 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect19, useMemo as useMemo6, useRef as useRef11, useState as useState17 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment16, jsx as jsx125, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
@@ -13696,10 +13707,10 @@ var fixedGetDOMCellFromTarget = (node) => {
   return null;
 };
 function TableCellResizer({ editor, positioningAnchorEl }) {
-  const targetRef = useRef12(null);
-  const resizerRef = useRef12(null);
-  const tableRectRef = useRef12(null);
-  const mouseStartPosRef = useRef12(null);
+  const targetRef = useRef11(null);
+  const resizerRef = useRef11(null);
+  const tableRectRef = useRef11(null);
+  const mouseStartPosRef = useRef11(null);
   const [mouseCurrentPos, updateMouseCurrentPos] = useState17(null);
   const [activeCell, updateActiveCell] = useState17(null);
   const [isMouseDown, updateIsMouseDown] = useState17(false);
@@ -15285,7 +15296,7 @@ var ProgressListItem = ({
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css101 } from "@emotion/react";
 import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
-import { useCallback as useCallback12, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef13, useState as useState21 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef12, useState as useState21 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 import { css as css100 } from "@emotion/react";
@@ -15473,7 +15484,7 @@ var SegmentedControl = ({
   currentBackgroundColor = "white",
   ...props
 }) => {
-  const wrapperRef = useRef13(null);
+  const wrapperRef = useRef12(null);
   const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState21(false);
   const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState21(false);
   const onOptionChange = useCallback12(
@@ -15534,6 +15545,7 @@ var SegmentedControl = ({
           }
           const text = option.label ? option.label : option.icon ? null : String(option.value);
           const isDisabled = disabled2 || option.disabled;
+          const isChecked = option.value === value;
           return /* @__PURE__ */ jsx134(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx134(
             "div",
             {
@@ -15543,7 +15555,7 @@ var SegmentedControl = ({
                 "label",
                 {
                   css: [
-                    segmentedControlLabelStyles(option.value === value, isDisabled),
+                    segmentedControlLabelStyles(isChecked, isDisabled),
                     sizeStyles,
                     isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                   ],
@@ -15555,7 +15567,7 @@ var SegmentedControl = ({
                         type: "radio",
                         name,
                         value: index,
-                        checked: option.value === value,
+                        checked: isChecked,
                         onChange: onOptionChange,
                         disabled: isDisabled
                       }
@@ -15626,7 +15638,7 @@ var Skeleton = ({
 );
 
 // src/components/Spinner/Spinner.tsx
-import { useEffect as useEffect25, useRef as useRef14 } from "react";
+import { useEffect as useEffect25, useRef as useRef13 } from "react";
 
 // src/components/Spinner/Spinner.styles.ts
 import { css as css103 } from "@emotion/react";
@@ -16066,7 +16078,7 @@ var Spinner = ({
   label,
   isPaused
 }) => {
-  const ref = useRef14(null);
+  const ref = useRef13(null);
   useEffect25(() => {
     var _a, _b, _c;
     (_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");

package/dist/index.d.mts

@@ -384,8 +384,12 @@ type UseShortcutOptions = {
     doNotPreventDefault?: boolean;
     /** Whether the shortcut will activate with a form field in focus */
     activeWhenEditing?: boolean;
-    /** When true, the shortcut is disabled. The result will also reflect this state, which may disable attached menus, buttons, etc */
-    disabled?: boolean;
+    /**
+     * When true or 'silent', the shortcut is disabled. When undefined or false, it is enabled.
+     * The result will also reflect this state, which may disable attached menus, buttons, etc
+     * 'silent' will not show a toast notification when the shortcut is invoked while disabled.
+     */
+    disabled?: boolean | 'silent';
 };
 type ShortcutReference = {
     shortcut: string;

package/dist/index.d.ts

@@ -384,8 +384,12 @@ type UseShortcutOptions = {
     doNotPreventDefault?: boolean;
     /** Whether the shortcut will activate with a form field in focus */
     activeWhenEditing?: boolean;
-    /** When true, the shortcut is disabled. The result will also reflect this state, which may disable attached menus, buttons, etc */
-    disabled?: boolean;
+    /**
+     * When true or 'silent', the shortcut is disabled. When undefined or false, it is enabled.
+     * The result will also reflect this state, which may disable attached menus, buttons, etc
+     * 'silent' will not show a toast notification when the shortcut is invoked while disabled.
+     */
+    disabled?: boolean | 'silent';
 };
 type ShortcutReference = {
     shortcut: string;

package/dist/index.js

@@ -3253,6 +3253,9 @@ function useShortcut({
   const handle = (0, import_react14.useCallback)(
     (e) => {
       if (disabled2) {
+        if (disabled2 === "silent") {
+          return;
+        }
         import_react_toastify.toast.info(`Shortcut ${getFormattedShortcut(shortcut).join("")} is currently disabled`);
         return;
       }
@@ -8253,7 +8256,7 @@ var ChipContainer = import_react67.css`
 `;
 var ChipText = import_react67.css`
   align-self: center;
-  line-height: 1;
+  line-height: 1.1;
   text-wrap: nowrap;
 `;
 var ChipIcon = import_react67.css`
@@ -9556,7 +9559,7 @@ function renderDrawerId(drawer) {
 }
 var DrawerProvider = ({ children }) => {
   const [drawersRegistry, setDrawersRegistry] = (0, import_react81.useState)([]);
-  const providerId = (0, import_react81.useRef)(crypto.randomUUID());
+  const providerId = (0, import_react81.useId)();
   const [drawerTakeoverStackId, setDrawerTakeoverStackId] = (0, import_react81.useState)(void 0);
   useShortcut({
     handler: () => {
@@ -9638,7 +9641,7 @@ var DrawerProvider = ({ children }) => {
         drawersRegistry,
         registerDrawer,
         unregisterDrawer,
-        providerId: providerId.current,
+        providerId,
         drawerTakeoverStackId,
         registerTakeoverStackId,
         unregisterTakeoverStackId
@@ -12524,8 +12527,8 @@ var ObjectGridItemCardCover = (props) => {
     ) });
   }
   if ("icon" in props && props.icon) {
-    const { icon, iconColor } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", ...props, children: [
+    const { icon, iconColor, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
       /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
     ] }) });
@@ -12860,13 +12863,21 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
             css: [
               ObjectListItemContentWrapper,
               `${cq(minContainerQueryWidth)} {
-            grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+            grid-template-columns: ${cover ? "minmax(0, auto)" : ""} minmax(0, 1fr) minmax(0, auto);
           }`
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }),
+              cover ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(VerticalRhythm, { gap: "0", justify: renderAs === "multi" ? "flex-start" : "center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: header2 }),
+                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                  HorizontalRhythm,
+                  {
+                    gap: "xs",
+                    align: renderAs === "multi" ? "flex-start" : "center",
+                    "data-testid": "title",
+                    children: header2
+                  }
+                ),
                 renderAs === "multi" ? props.children : null
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
@@ -17379,6 +17390,7 @@ var SegmentedControl = ({
           }
           const text = option.label ? option.label : option.icon ? null : String(option.value);
           const isDisabled = disabled2 || option.disabled;
+          const isChecked = option.value === value;
           return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
             "div",
             {
@@ -17388,7 +17400,7 @@ var SegmentedControl = ({
                 "label",
                 {
                   css: [
-                    segmentedControlLabelStyles(option.value === value, isDisabled),
+                    segmentedControlLabelStyles(isChecked, isDisabled),
                     sizeStyles,
                     isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                   ],
@@ -17400,7 +17412,7 @@ var SegmentedControl = ({
                         type: "radio",
                         name,
                         value: index,
-                        checked: option.value === value,
+                        checked: isChecked,
                         onChange: onOptionChange,
                         disabled: isDisabled
                       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.8.2-alpha.31+dc19eea5f9",
+  "version": "20.9.1-alpha.16+5d93781920",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -26,8 +26,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^20.8.2-alpha.31+dc19eea5f9",
-    "@uniformdev/richtext": "^20.8.2-alpha.31+dc19eea5f9",
+    "@uniformdev/canvas": "^20.9.1-alpha.16+5d93781920",
+    "@uniformdev/richtext": "^20.9.1-alpha.16+5d93781920",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.47",
@@ -55,7 +55,7 @@
     "@lexical/table": "0.25.0",
     "@lexical/utils": "0.25.0",
     "@monaco-editor/react": "4.6.0",
-    "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.2.1/react-icons-all-files-5.2.1.tgz",
+    "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.5.0/react-icons-all-files-5.5.0.tgz",
     "fast-equals": "^5.0.1",
     "lexical": "0.25.0",
     "monaco-editor": "0.50.0",
@@ -68,8 +68,8 @@
     "zod-to-json-schema": "3.21.4"
   },
   "peerDependencies": {
-    "react": ">=17 || 17 || 18",
-    "react-dom": ">=17"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "files": [
     "/dist"
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dc19eea5f979ff3b4526db1dd75a2e1e0f4f43f7"
+  "gitHead": "5d937819205e0fe171a5b51f2e204cddc910cbf3"
 }