reshaped 3.3.9 → 3.3.11

package/dist/components/Actionable/Actionable.types.d.ts

@@ -11,10 +11,10 @@ export type Props = {
     disableFocusRing?: boolean;
     borderRadius?: "inherit";
     stopPropagation?: boolean;
-    as?: keyof JSX.IntrinsicElements;
+    as?: keyof React.JSX.IntrinsicElements;
     className?: G.ClassName;
-    attributes?: G.Attributes<"button"> & Omit<JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
-        ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
+    attributes?: G.Attributes<"button"> & Omit<React.JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
+        ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
     };
 };
 export type Ref = React.Ref<HTMLButtonElement | HTMLAnchorElement>;

package/dist/components/Card/Card.d.ts

@@ -7,10 +7,10 @@ declare const Card: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
     onClick?: import("../Actionable").ActionableProps["onClick"];
     href?: string;
-    as?: keyof JSX.IntrinsicElements | undefined;
+    as?: keyof React.JSX.IntrinsicElements | undefined;
     className?: import("../../types/global").ClassName;
-    attributes?: (import("../../types/global").Attributes<keyof JSX.IntrinsicElements> & ((import("../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "className" | "color" | "hidden" | "content" | "ref" | "children" | "type" | "key" | "value" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
-        ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
+    attributes?: (import("../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "className" | "color" | "hidden" | "content" | "ref" | "children" | "onToggle" | "value" | "type" | "key" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+        ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
     }) | undefined)) | undefined;
 } & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
 export default Card;

package/dist/components/Card/Card.types.d.ts

@@ -2,7 +2,7 @@ import type React from "react";
 import type { ActionableProps } from "../Actionable";
 import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
-export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     padding?: G.Responsive<number>;
     bleed?: G.Responsive<number>;
     selected?: boolean;

package/dist/components/Card/tests/Card.stories.d.ts

@@ -9,10 +9,10 @@ declare const _default: {
         children?: React.ReactNode;
         onClick?: import("../../Actionable").ActionableProps["onClick"];
         href?: string;
-        as?: keyof JSX.IntrinsicElements | undefined;
+        as?: keyof React.JSX.IntrinsicElements | undefined;
         className?: import("../../../types/global").ClassName;
-        attributes?: (import("../../../types/global").Attributes<keyof JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
-            ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
+        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+            ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
         }) | undefined)) | undefined;
     } & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
     parameters: {

package/dist/components/Carousel/Carousel.types.d.ts

@@ -10,7 +10,7 @@ export declare enum ControlType {
 }
 export type ControlProps = {
     type: ControlType;
-    scrollElRef: React.RefObject<HTMLElement>;
+    scrollElRef: React.RefObject<HTMLElement | null>;
     scrollPosition: number;
     onClick: () => void;
     isRTL: boolean;

package/dist/components/Carousel/tests/Carousel.stories.js

@@ -93,7 +93,7 @@ export const bleed = () => (<Example>
 		</Example.Item>
 	</Example>);
 const RefDemo = () => {
-    const carouselRef = React.useRef();
+    const carouselRef = React.useRef(null);
     return (<View gap={3}>
 			<View gap={3} direction="row">
 				<Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -49,7 +49,7 @@ const DropdownMenuItem = (props) => {
 };
 const DropdownMenuSubMenu = (props) => {
     const { children } = props;
-    const dropdownMenuRef = React.useRef();
+    const dropdownMenuRef = React.useRef(null);
     return (_jsx(DropdownMenuSubContext.Provider, { value: dropdownMenuRef, children: _jsx(DropdownMenu, { triggerType: "hover", position: "end-top", contentGap: 0.5, instanceRef: dropdownMenuRef, children: children }) }));
 };
 const DropdownMenuSubTriggerItem = (props) => {

package/dist/components/FormControl/FormControl.context.d.ts

@@ -51,6 +51,10 @@ export declare const useFormControl: () => {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
@@ -268,8 +272,16 @@ export declare const useFormControl: () => {
         onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
         onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+        onBeforeToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+        onTransitionCancel?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRun?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
     } & {
         id: string;
     };

package/dist/components/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
 import type * as T from "./Grid.types";
 declare const Grid: {
-    <As extends keyof JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
-    Item: <As extends keyof JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => import("react/jsx-runtime").JSX.Element;
+    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
+    Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Grid;

package/dist/components/Grid/Grid.types.d.ts

@@ -1,7 +1,8 @@
+import type React from "react";
 import type { Property } from "csstype";
 import type * as G from "../../types/global";
 import type * as TStyles from "../../styles/types";
-export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     gap?: G.Responsive<number>;
     align?: G.Responsive<TStyles.Align>;
     justify?: G.Responsive<TStyles.Justify>;
@@ -16,7 +17,7 @@ export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
     className?: G.ClassName;
     attributes?: G.Attributes<TagName>;
 };
-export type ItemProps<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     area?: string;
     colStart?: G.Responsive<number>;
     colEnd?: G.Responsive<number>;

package/dist/components/Grid/tests/Grid.stories.d.ts

@@ -1,8 +1,8 @@
 declare const _default: {
     title: string;
     component: {
-        <As extends keyof JSX.IntrinsicElements = "div">(props: import("./..").GridProps<As>): import("react").JSX.Element;
-        Item: <As extends keyof JSX.IntrinsicElements = "div">(props: import("./..").GridItemProps<As>) => import("react").JSX.Element;
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridProps<As>): import("react").JSX.Element;
+        Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridItemProps<As>) => import("react").JSX.Element;
     };
     parameters: {
         iframe: {

package/dist/components/Hidden/Hidden.types.d.ts

@@ -3,6 +3,6 @@ import type * as G from "../../types/global";
 export type Props = {
     hide?: G.Responsive<boolean>;
     visibility?: boolean;
-    as?: keyof JSX.IntrinsicElements;
+    as?: keyof React.JSX.IntrinsicElements;
     children: React.ReactNode;
 };

package/dist/components/Modal/Modal.types.d.ts

@@ -32,6 +32,6 @@ export type Props = {
     className?: G.ClassName;
     overlayClassName?: G.ClassName;
     attributes?: G.Attributes<"div"> & {
-        ref?: React.RefObject<HTMLDivElement>;
+        ref?: React.RefObject<HTMLDivElement | null>;
     };
 } & Pick<OverlayProps, "onOpen" | "onAfterOpen" | "onAfterClose" | "active" | "containerRef">;

package/dist/components/Overlay/Overlay.js

@@ -32,7 +32,7 @@ const Overlay = (props) => {
     const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
     const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
     // Check that when close was triggered there were no other overlays / flyouts rendered above it
-    const isDismissible = useIsDismissible(active, contentRef);
+    const isDismissible = useIsDismissible({ active, contentRef, blocking: true });
     const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], containerRef && s["--contained"], className);
     const isInsideContent = (el) => {
         if (!contentRef.current)

package/dist/components/Overlay/Overlay.types.d.ts

@@ -15,7 +15,7 @@ export type Props = {
     onOpen?: () => void;
     onAfterOpen?: () => void;
     disableCloseOnClick?: boolean;
-    containerRef?: React.RefObject<HTMLElement>;
+    containerRef?: React.RefObject<HTMLElement | null>;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Resizable/Resizable.js

@@ -138,7 +138,9 @@ const Resizable = (props) => {
         }
         if (isComponent && child.type === Resizable.Item && child.props) {
             const index = currentHandleIndex;
-            return (_jsx(PrivateResizableItem, { ...child.props, index: currentItemIndex++, ref: (el) => (itemsRef.current[index] = { el, props: child.props }) }));
+            return (_jsx(PrivateResizableItem, { ...child.props, index: currentItemIndex++, ref: (el) => {
+                    itemsRef.current[index] = { el, props: child.props };
+                } }));
         }
         return null;
     });

package/dist/components/Resizable/Resizable.types.d.ts

@@ -15,11 +15,11 @@ export type PrivateItemProps = ItemProps & {
 };
 export type HandleProps = {
     children?: (attributes: {
-        ref: React.RefObject<HTMLButtonElement>;
+        ref: React.RefObject<HTMLButtonElement | null>;
     }) => React.ReactNode;
 };
 export type PrivateHandleProps = HandleProps & {
-    containerRef: React.RefObject<HTMLDivElement>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
     index: number;
     onDrag: (args: UseDragCallbackArgs & {
         index: number;

package/dist/components/ScrollArea/tests/ScrollArea.stories.js

@@ -122,7 +122,7 @@ export const edgeCases = () => {
 			<Example.Item title="dynamic content update">
 				<View gap={4}>
 					<Button onClick={toggle.toggle}>Toggle</Button>
-					<ScrollArea height="100px" scrollbarDisplay="visible" ref={ref}>
+					<ScrollArea height="100px" scrollbarDisplay="visible">
 						<View backgroundColor="neutral-faded" padding={4} width={toggle.active ? "120%" : "90%"}>
 							{toggle.active ? (<React.Fragment>
 									Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem

package/dist/components/Slider/Slider.types.d.ts

@@ -77,6 +77,6 @@ export type ThumbProps = {
     step: NonNullable<BaseProps["step"]>;
     orientation: NonNullable<BaseProps["orientation"]>;
     renderValue?: BaseProps["renderValue"];
-    tooltipRef: React.RefObject<HTMLDivElement>;
+    tooltipRef: React.RefObject<HTMLDivElement | null>;
 };
 export {};

package/dist/components/Tabs/Tabs.types.d.ts

@@ -55,9 +55,9 @@ export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "na
     value?: string;
     setDefaultValue: (value: string) => void;
     id: string;
-    elActiveRef: React.MutableRefObject<HTMLDivElement | null>;
-    elPrevActiveRef: React.MutableRefObject<HTMLDivElement | null>;
-    elScrollableRef: React.MutableRefObject<HTMLDivElement | null>;
+    elActiveRef: React.RefObject<HTMLDivElement | null>;
+    elPrevActiveRef: React.RefObject<HTMLDivElement | null>;
+    elScrollableRef: React.RefObject<HTMLDivElement | null>;
     selection: SelectionState;
     setSelection: React.Dispatch<React.SetStateAction<SelectionState>>;
 };

package/dist/components/Tabs/TabsContext.d.ts

@@ -15,9 +15,9 @@ export declare const useTabs: (value?: string) => {
     size: NonNullable<T.BaseProps["size"]>;
     value?: string;
     setDefaultValue: (value: string) => void;
-    elActiveRef: React.MutableRefObject<HTMLDivElement | null>;
-    elPrevActiveRef: React.MutableRefObject<HTMLDivElement | null>;
-    elScrollableRef: React.MutableRefObject<HTMLDivElement | null>;
+    elActiveRef: React.RefObject<HTMLDivElement | null>;
+    elPrevActiveRef: React.RefObject<HTMLDivElement | null>;
+    elScrollableRef: React.RefObject<HTMLDivElement | null>;
     selection: T.SelectionState;
     setSelection: React.Dispatch<React.SetStateAction<T.SelectionState>>;
 };

package/dist/components/Tabs/TabsItem.js

@@ -42,7 +42,7 @@ const TabsItem = (props, ref) => {
             return;
         // Big enough value to show there are more items and not overlap arrow controls
         const visibilityThreshold = 48;
-        const elItem = findParent(itemRef.current, (el) => el.hasAttribute("data-rs-tabs-item"));
+        const elItem = itemRef.current && findParent(itemRef.current, (el) => el.hasAttribute("data-rs-tabs-item"));
         if (!elItem)
             return;
         const elScrollable = elScrollableRef.current;

package/dist/components/Text/Text.d.ts

@@ -1,3 +1,3 @@
 import type * as T from "./Text.types";
-declare const Text: <As extends keyof JSX.IntrinsicElements>(props: T.Props<As>) => import("react/jsx-runtime").JSX.Element;
+declare const Text: <As extends keyof React.JSX.IntrinsicElements>(props: T.Props<As>) => import("react/jsx-runtime").JSX.Element;
 export default Text;

package/dist/components/Text/Text.types.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
-export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     variant?: G.Responsive<Variant>;
     weight?: G.Responsive<"regular" | "medium" | "bold">;
     color?: "neutral" | "neutral-faded" | "critical" | "warning" | "positive" | "primary" | "disabled";

package/dist/components/Text/tests/Text.stories.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: <As extends keyof JSX.IntrinsicElements>(props: import("./..").TextProps<As>) => import("react").JSX.Element;
+    component: <As extends keyof React.JSX.IntrinsicElements>(props: import("./..").TextProps<As>) => import("react").JSX.Element;
     parameters: {
         iframe: {
             url: string;

package/dist/components/TextField/TextField.js

@@ -12,7 +12,9 @@ const TextFieldSlot = (props) => {
     if (!icon && !slot && !affix)
         return null;
     // In case fragment is used, map over its children instead
-    const renderedSlot = React.isValidElement(slot) && slot.type === React.Fragment ? slot.props.children : slot;
+    const renderedSlot = React.isValidElement(slot) && slot.type === React.Fragment
+        ? slot.props.children
+        : slot;
     const slotNode = slot &&
         React.Children.map(renderedSlot, (child) => (_jsx("div", { className: classNames(s.slot, s[`slot--position-${position}`]), children: child }, "slot")));
     const iconNode = icon && (_jsx("label", { className: s.icon, htmlFor: id, children: _jsx(Icon, { size: responsivePropDependency(size, (size) => {

package/dist/components/Theme/Theme.types.d.ts

@@ -22,10 +22,10 @@ export type Props = {
 };
 export type PrivateProps = Props & {
     scoped?: boolean;
-    scopeRef?: React.RefObject<HTMLDivElement>;
+    scopeRef?: React.RefObject<HTMLDivElement | null>;
 };
 export type GlobalColorModeProps = {
     defaultMode: ColorMode;
-    scopeRef?: React.RefObject<HTMLDivElement>;
+    scopeRef?: React.RefObject<HTMLDivElement | null>;
     children?: React.ReactNode;
 };

package/dist/components/Toast/ToastContainer.js

@@ -13,7 +13,7 @@ const ToastContainer = (props) => {
     const { timeout = "short" } = toastProps;
     const { show, hide, remove } = React.useContext(ToastContext);
     const [toastHeight, setToastHeight] = React.useState();
-    const timeoutRef = React.useRef();
+    const timeoutRef = React.useRef(null);
     const resizingRef = React.useRef(false);
     const wrapperRef = React.useRef(null);
     const visible = status === "entered";

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,3 @@
 import type * as T from "./Tooltip.types";
-declare const Tooltip: (props: T.Props) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
+declare const Tooltip: (props: T.Props) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
 export default Tooltip;

package/dist/components/Tooltip/tests/Tooltip.stories.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: (props: import("./..").TooltipProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;
+    component: (props: import("./..").TooltipProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
     parameters: {
         iframe: {
             url: string;

package/dist/components/View/View.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type * as T from "./View.types";
 declare const View: {
-    <As extends keyof JSX.IntrinsicElements = "div">(props: T.Props<As>): React.ReactNode;
-    Item: <As extends keyof JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => React.ReactNode;
+    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): React.ReactNode;
+    Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => React.ReactNode;
 };
 export default View;

package/dist/components/View/View.js

@@ -124,22 +124,23 @@ const View = (props) => {
     const formattedChildren = React.Children.map(children, (child, index) => {
         if (!child)
             return null;
+        const usedIndex = renderedItemIndex;
         renderedItemIndex += 1;
         if (child.type === Hidden) {
             const { children: hiddenChild, ...hiddenProps } = child.props;
             const key = child.key || index;
-            return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: renderedItemIndex })));
+            return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: usedIndex })));
         }
         if (child.type === React.Fragment && React.Children.count(child.props.children) > 1) {
             return child.props.children.map((child) => {
                 if (!child)
                     return null;
-                const index = renderedItemIndex;
+                const index = usedIndex;
                 renderedItemIndex += 1;
                 return renderItem({ child, index });
             });
         }
-        return renderItem({ child, index: renderedItemIndex });
+        return renderItem({ child, index: usedIndex });
     });
     // Classnames and attributes are written here so we can assign nowrap to the root element based on the children
     const rootClassNames = classNames(s.root, className, radiusStyles?.classNames, bleedStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, maxWidthStyles?.classNames, maxHeightStyles?.classNames, minWidthStyles?.classNames, minHeightStyles?.classNames, borderStyles?.classNames, backgroundColor && s[`--bg-${backgroundColor}`], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&

package/dist/components/View/View.types.d.ts

@@ -3,7 +3,7 @@ import type * as G from "../../types/global";
 import type * as TStyles from "../../styles/types";
 type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
 export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
-export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     children?: React.ReactNode;
     as?: TagName;
     divided?: boolean;
@@ -44,7 +44,7 @@ export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
     className?: G.ClassName;
     attributes?: G.Attributes<TagName>;
 } & Pick<ItemProps, "grow">;
-export type ItemProps<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     order?: G.Responsive<number>;
     columns?: G.Responsive<Columns>;
     grow?: G.Responsive<boolean>;

package/dist/components/View/tests/View.stories.d.ts

@@ -3,8 +3,8 @@ import { type ViewProps } from "./..";
 declare const _default: {
     title: string;
     component: {
-        <As extends keyof JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.ReactNode;
-        Item: <As extends keyof JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>) => React.ReactNode;
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.ReactNode;
+        Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>) => React.ReactNode;
     };
     parameters: {
         iframe: {

package/dist/components/_private/Flyout/Flyout.types.d.ts

@@ -44,7 +44,7 @@ export type Instance = {
     open: () => void;
     close: () => void;
     updatePosition: () => void;
-} | undefined;
+} | null;
 type WithUncontrolled = {
     active?: never;
     defaultActive?: boolean;
@@ -54,7 +54,7 @@ type WithControlled = {
     defaultActive?: never;
 };
 export type TriggerAttributes = {
-    ref: React.RefObject<HTMLButtonElement>;
+    ref: React.RefObject<HTMLButtonElement | null>;
     onBlur?: (e: React.FocusEvent) => void;
     onFocus?: () => void;
     onMouseDown?: () => void;
@@ -93,8 +93,8 @@ type BaseProps = {
     contentClassName?: string;
     contentAttributes?: G.Attributes<"div">;
     instanceRef?: React.Ref<Instance>;
-    containerRef?: React.RefObject<HTMLElement>;
-    initialFocusRef?: React.RefObject<HTMLElement>;
+    containerRef?: React.RefObject<HTMLElement | null>;
+    initialFocusRef?: React.RefObject<HTMLElement | null>;
 };
 export type DefaultProps = Required<{
     position: BaseProps["position"];
@@ -115,8 +115,8 @@ export type ContextProps = {
     id: string;
     flyout: UseFlyoutData;
     width?: Width;
-    triggerElRef?: React.RefObject<HTMLButtonElement>;
-    flyoutElRef: React.RefObject<HTMLDivElement>;
+    triggerElRef?: React.RefObject<HTMLButtonElement | null>;
+    flyoutElRef: React.RefObject<HTMLDivElement | null>;
     handleClose: (options?: {
         closeParents?: boolean;
     }) => void;

package/dist/components/_private/Flyout/FlyoutControlled.js

@@ -37,10 +37,10 @@ const FlyoutRoot = (props) => {
     const isParentTriggerInsideFlyout = !!parentTriggerRef?.current && parentContentRef?.current?.contains(parentTriggerRef.current);
     const tryParentTrigger = !parentContentRef || isParentTriggerInsideFlyout;
     const triggerElRef = (tryParentTrigger && parentTriggerRef) || internalTriggerElRef;
-    const triggerBoundsRef = React.useRef();
+    const triggerBoundsRef = React.useRef(null);
     const flyoutElRef = React.useRef(null);
     const id = useElementId(passedId);
-    const timerRef = React.useRef();
+    const timerRef = React.useRef(null);
     const trapFocusRef = React.useRef(null);
     const lockedRef = React.useRef(false);
     // Check if transition had enough time to start when opening a flyout
@@ -68,7 +68,11 @@ const FlyoutRoot = (props) => {
     const { status, updatePosition, render, hide, remove, show } = flyout;
     const isRendered = status !== "idle";
     // Don't create dismissible queue for hover flyout because they close all together on mouseout
-    const isDismissible = useIsDismissible(isRendered && triggerType !== "hover", flyoutElRef, triggerElRef);
+    const isDismissible = useIsDismissible({
+        active: isRendered && triggerType !== "hover",
+        contentRef: flyoutElRef,
+        triggerRef: triggerElRef,
+    });
     const clearTimer = React.useCallback(() => {
         if (timerRef.current)
             clearTimeout(timerRef.current);
@@ -150,6 +154,8 @@ const FlyoutRoot = (props) => {
     }, [isRendered, handleOpen, handleClose]);
     const handleTriggerMouseDown = React.useCallback(() => {
         const rect = triggerElRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
         triggerBoundsRef.current = rect;
     }, [triggerElRef]);
     const handleContentMouseDown = () => {
@@ -169,7 +175,7 @@ const FlyoutRoot = (props) => {
          * After animation has started, we're sure about the correct bounds
          * so drop the cache to make flyout work when trigger moves around
          */
-        triggerBoundsRef.current = undefined;
+        triggerBoundsRef.current = null;
     }, [resolvedActive]);
     const handleTransitionEnd = React.useCallback((e) => {
         if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")

package/dist/components/_private/Flyout/tests/Flyout.stories.js

@@ -254,7 +254,7 @@ export const testDynamicBounds = () => {
     const [left, setLeft] = React.useState(50);
     const [top, setTop] = React.useState(50);
     const [size, setSize] = React.useState("medium");
-    const flyoutRef = React.useRef();
+    const flyoutRef = React.useRef(null);
     React.useEffect(() => {
         flyoutRef.current?.updatePosition();
     }, [left, top]);

package/dist/components/_private/Flyout/useFlyout.d.ts

@@ -9,9 +9,9 @@ type UseFlyout = (args: {
     contentGap?: number;
     contentShift?: number;
     container?: HTMLElement | null;
-    triggerElRef: React.RefObject<HTMLElement>;
-    flyoutElRef: React.RefObject<HTMLElement>;
-    triggerBounds?: DOMRect | G.Coordinates;
+    triggerElRef: React.RefObject<HTMLElement | null>;
+    flyoutElRef: React.RefObject<HTMLElement | null>;
+    triggerBounds?: DOMRect | G.Coordinates | null;
 }) => Pick<T.State, "styles" | "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;