reshaped 3.1.4 → 3.1.6

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type * as T from "./Actionable.types";
-declare const Actionable: React.ForwardRefExoticComponent<T.Props & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const Actionable: React.ForwardRefExoticComponent<T.Props & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default Actionable;

package/dist/components/Actionable/Actionable.js

@@ -5,8 +5,8 @@ import { classNames } from "../../utilities/helpers.js";
 import * as keys from "../../constants/keys.js";
 import s from "./Actionable.module.css";
 const Actionable = forwardRef((props, ref) => {
-    const { children, href, onClick, type, disabled, insetFocus, borderRadius, as, fullWidth, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], fullWidth && s["--full-width"]);
+    const { children, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, fullWidth, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], disableFocusRing && s["--disabled-focus-ring"], fullWidth && s["--full-width"]);
     const rootAttributes = { ...attributes };
     const hasClickHandler = onClick || attributes?.onClick;
     const hasFocusHandler = attributes?.onFocus || attributes?.onBlur;

package/dist/components/Actionable/Actionable.module.css

@@ -1 +1 @@
-@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.root:focus{outline:none}.root:focus-visible{box-shadow:var(--rs-focus-shadow);outline:none;z-index:var(--rs-z-index-raised)}.root.--inset:focus-visible{box-shadow:var(--rs-focus-inset-shadow)}.root.--radius-inherit:focus-visible{box-shadow:none}.root.--radius-inherit:focus-visible>*{box-shadow:var(--rs-focus-shadow)}.root.--radius-inherit.--inset:focus-visible>*{box-shadow:var(--rs-focus-inset-shadow)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}
+@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.root:focus{outline:none}.root:focus-visible{box-shadow:var(--rs-focus-shadow);outline:none;z-index:var(--rs-z-index-raised)}.root.--inset:focus-visible{box-shadow:var(--rs-focus-inset-shadow)}.root.--disabled-focus-ring:focus-visible{box-shadow:none}.root.--radius-inherit:focus-visible{box-shadow:none}.root.--radius-inherit:focus-visible>*{box-shadow:var(--rs-focus-shadow)}.root.--radius-inherit.--inset:focus-visible>*{box-shadow:var(--rs-focus-inset-shadow)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}

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

@@ -8,6 +8,7 @@ export type Props = {
     disabled?: boolean;
     fullWidth?: boolean;
     insetFocus?: boolean;
+    disableFocusRing?: boolean;
     borderRadius?: "inherit";
     as?: keyof JSX.IntrinsicElements;
     className?: G.ClassName;

package/dist/components/Autocomplete/Autocomplete.js

@@ -19,7 +19,11 @@ const Autocomplete = (props) => {
     const [active, setActive] = React.useState(false);
     const hasChildren = !!React.Children.toArray(children).filter(Boolean).length;
     const lockedRef = React.useRef(false);
-    const handleOpen = React.useCallback(() => setActive(true), []);
+    const handleOpen = React.useCallback(() => {
+        if (lockedRef.current)
+            return;
+        setActive(true);
+    }, []);
     const handleClose = () => setActive(false);
     useHotkeys({
         [keys.BACKSPACE]: () => onBackspaceRef.current?.(),
@@ -28,9 +32,11 @@ const Autocomplete = (props) => {
         disabled: !onBackspaceRef.current,
     });
     useHotkeys({
-        [keys.DOWN]: () => handleOpen(),
+        [keys.DOWN]: () => {
+            handleOpen();
+        },
         [keys.ENTER]: () => {
-            const el = getActiveElement();
+            const el = getActiveElement(inputRef.current);
             el?.click();
         },
     }, [handleOpen], { ref: inputRef, preventDefault: true });
@@ -50,7 +56,7 @@ const Autocomplete = (props) => {
         onInput?.({ value: e.currentTarget.value, name, event: e });
         textFieldProps.inputAttributes?.onInput?.(e);
     };
-    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: !lockedRef.current && hasChildren && active, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: hasChildren && active, 
+    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: hasChildren && active, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: hasChildren && active, 
                         // Ignoring the type check since TS can't infer the correct html element type
                         attributes: { ...textFieldProps.attributes, ref }, inputAttributes: {
                             ...textFieldProps.inputAttributes,

package/dist/components/Button/Button.js

@@ -27,7 +27,7 @@ const Button = forwardRef((props, ref) => {
         });
         return (_jsx(Icon, { className: iconClassName, svg: (position === "start" ? icon : endIcon), size: iconSize, autoWidth: true }));
     };
-    return (_jsxs(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: { ...attributes, "data-rs-aligner-target": true }, type: type, onClick: onClick, href: href, ref: ref, as: as, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { size: "small", color: "inherit" }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
+    return (_jsxs(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: { ...attributes, "data-rs-aligner-target": true }, type: type, onClick: onClick, href: href, ref: ref, as: as, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { color: "inherit" }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
 });
 Button.Group = ButtonGroup;
 Button.Aligner = ButtonAligner;

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

@@ -9,7 +9,7 @@ declare const Card: React.ForwardRefExoticComponent<{
     href?: string;
     as?: keyof 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" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "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"> & {
+    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>;
     }) | undefined)) | undefined;
 } & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

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

@@ -11,7 +11,7 @@ declare const _default: {
         href?: string;
         as?: keyof 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" | "className" | "aria-orientation" | "role" | "hidden" | "color" | "content" | "disabled" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "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"> & {
+        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" | "className" | "aria-orientation" | "role" | "hidden" | "color" | "content" | "disabled" | "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>;
         }) | undefined)) | undefined;
     } & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

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

@@ -2,7 +2,7 @@ import type React from "react";
 import type { PopoverProps, PopoverInstance } from "../Popover";
 import type { FlyoutContentProps } from "../_private/Flyout";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "triggerType" | "contentGap" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "triggerType" | "contentGap" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef"> & {
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu">;
 };
 export type ContentProps = Pick<FlyoutContentProps, "attributes" | "children" | "className">;

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

@@ -9,12 +9,14 @@ export declare const useFormControl: () => {
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
         contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -38,7 +40,6 @@ export declare const useFormControl: () => {
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;

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

@@ -0,0 +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;
+};
+export default Grid;

package/dist/components/Grid/Grid.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/helpers.js";
+import getAlignStyles from "../../styles/align/index.js";
+import getJustifyStyles from "../../styles/justify/index.js";
+import s from "./Grid.module.css";
+const GridItem = (props) => {
+    const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, as: TagName = "div", attributes, } = props;
+    const itemClassNames = classNames(s.item, className);
+    const resolvedColSpan = responsivePropDependency(colSpan, (value) => value && `span ${value}`);
+    const resolvedRowSpan = responsivePropDependency(rowSpan, (value) => value && `span ${value}`);
+    const rootVariables = {
+        ...responsiveVariables("--rs-grid-area", area),
+        ...responsiveVariables("--rs-grid-col-end", resolvedColSpan),
+        // both span and end use the same css variable but end has a higher prioerity
+        ...responsiveVariables("--rs-grid-col-end", colEnd),
+        ...responsiveVariables("--rs-grid-col-start", colStart),
+        ...responsiveVariables("--rs-grid-row-end", resolvedRowSpan),
+        ...responsiveVariables("--rs-grid-row-end", rowEnd),
+        ...responsiveVariables("--rs-grid-row-start", rowStart),
+    };
+    return (_jsx(TagName, { ...attributes, className: itemClassNames, style: rootVariables, children: children }));
+};
+const Grid = (props) => {
+    const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, as: TagName = "div", attributes, } = props;
+    const alignStyles = getAlignStyles(align);
+    const justifyStyles = getJustifyStyles(justify);
+    const resolvedRows = responsivePropDependency(rows, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);
+    const resolvedColumns = responsivePropDependency(columns, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);
+    const resolvedAreas = responsivePropDependency(areas, (value) => value
+        ? `"${value?.join('" "')}"
+	`
+        : undefined);
+    const rootClassNames = classNames(s.root, alignStyles?.classNames, justifyStyles?.classNames, className);
+    const rootVariables = {
+        ...responsiveVariables("--rs-grid-gap", gap),
+        ...responsiveVariables("--rs-grid-rows", resolvedRows),
+        ...responsiveVariables("--rs-grid-columns", resolvedColumns),
+        ...responsiveVariables("--rs-grid-areas", resolvedAreas),
+        ...responsiveVariables("--rs-grid-auto-flow", autoFlow),
+        ...responsiveVariables("--rs-grid-auto-columns", autoColumns),
+        ...responsiveVariables("--rs-grid-auto-rows", autoRows),
+    };
+    return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: children }));
+};
+Grid.Item = GridItem;
+export default Grid;

package/dist/components/Grid/Grid.module.css

@@ -0,0 +1 @@
+.root{display:grid}[style*="--rs-grid-gap"]{--rs-grid-gap-value:calc(var(--rs-grid-gap) * var(--rs-unit-x1));gap:var(--rs-grid-gap-value);--rs-grid-gap-s:0;--rs-grid-gap-m:var(--rs-grid-gap-s);--rs-grid-gap-l:var(--rs-grid-gap-m);--rs-grid-gap-xl:var(--rs-grid-gap-l);--rs-grid-gap:var(--rs-grid-gap-s)}[style*="--rs-grid-rows"]{grid-template-rows:var(--rs-grid-rows);--rs-grid-rows-s: ;--rs-grid-rows-m:var(--rs-grid-rows-s);--rs-grid-rows-l:var(--rs-grid-rows-m);--rs-grid-rows-xl:var(--rs-grid-rows-l);--rs-grid-rows:var(--rs-grid-rows-s)}[style*="--rs-grid-columns"]{grid-template-columns:var(--rs-grid-columns);--rs-grid-columns-s: ;--rs-grid-columns-m:var(--rs-grid-columns-s);--rs-grid-columns-l:var(--rs-grid-columns-m);--rs-grid-columns-xl:var(--rs-grid-columns-l);--rs-grid-columns:var(--rs-grid-columns-s)}[style*="--rs-grid-areas"]{grid-template-areas:var(--rs-grid-areas);--rs-grid-areas-s: ;--rs-grid-areas-m:var(--rs-grid-areas-s);--rs-grid-areas-l:var(--rs-grid-areas-m);--rs-grid-areas-xl:var(--rs-grid-areas-l);--rs-grid-areas:var(--rs-grid-areas-s)}[style*="--rs-grid-auto-flow"]{grid-auto-flow:var(--rs-grid-auto-flow);--rs-grid-auto-flow-s: ;--rs-grid-auto-flow-m:var(--rs-grid-auto-flow-s);--rs-grid-auto-flow-l:var(--rs-grid-auto-flow-m);--rs-grid-auto-flow-xl:var(--rs-grid-auto-flow-l);--rs-grid-auto-flow:var(--rs-grid-auto-flow-s)}[style*="--rs-grid-auto-columns"]{grid-auto-columns:var(--rs-grid-auto-columns);--rs-grid-auto-columns-s: ;--rs-grid-auto-columns-m:var(--rs-grid-auto-columns-s);--rs-grid-auto-columns-l:var(--rs-grid-auto-columns-m);--rs-grid-auto-columns-xl:var(--rs-grid-auto-columns-l);--rs-grid-auto-columns:var(--rs-grid-auto-columns-s)}[style*="--rs-grid-auto-rows"]{grid-auto-rows:var(--rs-grid-auto-rows);--rs-grid-auto-rows-s: ;--rs-grid-auto-rows-m:var(--rs-grid-auto-rows-s);--rs-grid-auto-rows-l:var(--rs-grid-auto-rows-m);--rs-grid-auto-rows-xl:var(--rs-grid-auto-rows-l);--rs-grid-auto-rows:var(--rs-grid-auto-rows-s)}[style*="--rs-grid-area"]{grid-area:var(--rs-grid-area);--rs-grid-area-s: ;--rs-grid-area-m:var(--rs-grid-area-s);--rs-grid-area-l:var(--rs-grid-area-m);--rs-grid-area-xl:var(--rs-grid-area-l);--rs-grid-area:var(--rs-grid-area-s)}[style*="--rs-grid-col-start"]{grid-column-start:var(--rs-grid-col-start);--rs-grid-col-start-s: ;--rs-grid-col-start-m:var(--rs-grid-col-start-s);--rs-grid-col-start-l:var(--rs-grid-col-start-m);--rs-grid-col-start-xl:var(--rs-grid-col-start-l);--rs-grid-col-start:var(--rs-grid-col-start-s)}[style*="--rs-grid-col-end"]{grid-column-end:var(--rs-grid-col-end);--rs-grid-col-end-s: ;--rs-grid-col-end-m:var(--rs-grid-col-end-s);--rs-grid-col-end-l:var(--rs-grid-col-end-m);--rs-grid-col-end-xl:var(--rs-grid-col-end-l);--rs-grid-col-end:var(--rs-grid-col-end-s)}[style*="--rs-grid-row-start"]{grid-row-start:var(--rs-grid-row-start);--rs-grid-row-start-s: ;--rs-grid-row-start-m:var(--rs-grid-row-start-s);--rs-grid-row-start-l:var(--rs-grid-row-start-m);--rs-grid-row-start-xl:var(--rs-grid-row-start-l);--rs-grid-row-start:var(--rs-grid-row-start-s)}[style*="--rs-grid-row-end"]{grid-row-end:var(--rs-grid-row-end);--rs-grid-row-end-s: ;--rs-grid-row-end-m:var(--rs-grid-row-end-s);--rs-grid-row-end-l:var(--rs-grid-row-end-m);--rs-grid-row-end-xl:var(--rs-grid-row-end-l);--rs-grid-row-end:var(--rs-grid-row-end-s)}@media (--rs-viewport-m ){[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-m)}[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-m)}[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-m)}[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-m)}[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-m)}[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-m)}[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-m)}[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-m)}[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-m)}[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-m)}[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-m)}[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-m)}}@media (--rs-viewport-l ){[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-l)}[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-l)}[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-l)}[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-l)}[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-l)}[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-l)}[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-l)}[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-l)}[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-l)}[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-l)}[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-l)}[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-l)}}@media (--rs-viewport-xl ){[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-xl)}[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-xl)}[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-xl)}[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-xl)}[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-xl)}[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-xl)}[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-xl)}[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-xl)}[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-xl)}[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-xl)}[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-xl)}[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-xl)}}

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

@@ -0,0 +1,31 @@
+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"> = {
+    gap?: G.Responsive<number>;
+    align?: G.Responsive<TStyles.Align>;
+    justify?: G.Responsive<TStyles.Justify>;
+    rows?: G.Responsive<number | Property.GridTemplateRows>;
+    columns?: G.Responsive<number | Property.GridTemplateColumns>;
+    areas?: G.Responsive<string[]>;
+    autoFlow?: G.Responsive<Property.GridAutoFlow>;
+    autoColumns?: G.Responsive<Property.GridAutoColumns>;
+    autoRows?: G.Responsive<Property.GridAutoRows>;
+    children?: React.ReactNode;
+    as?: TagName;
+    className?: G.ClassName;
+    attributes?: G.Attributes<TagName>;
+};
+export type ItemProps<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+    area?: string;
+    colStart?: G.Responsive<number>;
+    colEnd?: G.Responsive<number>;
+    colSpan?: G.Responsive<number>;
+    rowStart?: G.Responsive<number>;
+    rowEnd?: G.Responsive<number>;
+    rowSpan?: G.Responsive<number>;
+    children?: React.ReactNode;
+    as?: TagName;
+    className?: G.ClassName;
+    attributes?: G.Attributes<TagName>;
+};

package/dist/components/Grid/Grid.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default } from "./Grid";
+export type { Props as GridProps, ItemProps as GridItemProps } from "./Grid.types";

package/dist/components/Grid/index.js

@@ -0,0 +1 @@
+export { default } from "./Grid.js";

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

@@ -0,0 +1,18 @@
+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;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const base: () => import("react").JSX.Element;
+export declare const layout: () => import("react").JSX.Element;
+export declare const itemLayout: () => import("react").JSX.Element;
+export declare const areas: () => import("react").JSX.Element;
+export declare const auto: () => import("react").JSX.Element;

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

@@ -0,0 +1,170 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Grid from "../index.js";
+import View from "../../View/index.js";
+export default {
+    title: "Utilities/Grid",
+    component: Grid,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/grid",
+        },
+    },
+};
+export const base = () => (<Example>
+		<Example.Item title="gap: 2">
+			<Grid gap={2} columns={2}>
+				{[1, 2].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="align: center">
+			<Grid gap={2} columns={2} align="center">
+				<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+					1
+				</View>
+				<View backgroundColor="neutral-faded" borderRadius="medium" padding={8}>
+					2
+				</View>
+			</Grid>
+		</Example.Item>
+		<Example.Item title="justify: center">
+			<Grid gap={2} columns="200px 200px" justify="center">
+				<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+					1
+				</View>
+				<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+					2
+				</View>
+			</Grid>
+		</Example.Item>
+	</Example>);
+export const layout = () => (<Example>
+		<Example.Item title="simple: 2 rows, 3 columns">
+			<Grid gap={4} columns={3} rows={2}>
+				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="columns template, 1fr 2fr 1fr">
+			<Grid gap={4} columns="1fr 2fr 1fr" rows={2}>
+				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="rows template, 1fr 2fr">
+			<Grid gap={4} columns={3} rows="1fr 2fr">
+				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="responsive">
+			<Grid gap={4} columns={{ s: 3, m: "1fr 2fr 1fr" }} rows={{ s: 2, m: "1fr 2fr" }}>
+				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+	</Example>);
+export const itemLayout = () => (<Example>
+		<Example.Item title="column, start 1, end 3">
+			<Grid gap={4} columns={3} rows={2}>
+				<Grid.Item colStart={1} colEnd={3}>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						1
+					</View>
+				</Grid.Item>
+				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="column, start 1, span 2">
+			<Grid gap={4} columns={3} rows={2}>
+				<Grid.Item colStart={1} colSpan={2}>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						1
+					</View>
+				</Grid.Item>
+				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+
+		<Example.Item title="row, start 1, end 3">
+			<Grid gap={4} columns={3} rows={2}>
+				<Grid.Item rowStart={1} rowEnd={3}>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						1
+					</View>
+				</Grid.Item>
+				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+
+		<Example.Item title="row, start 1, span 2">
+			<Grid gap={4} columns={3} rows={2}>
+				<Grid.Item rowStart={1} rowSpan={2}>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						1
+					</View>
+				</Grid.Item>
+				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+
+		<Example.Item title="responsive">
+			<Grid gap={4} columns={3} rows={2}>
+				<Grid.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						1
+					</View>
+				</Grid.Item>
+				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+	</Example>);
+export const areas = () => (<Example>
+		<Example.Item title="simple: 2 rows, 3 columns">
+			<Grid gap={4} rows={2} areas={["a .", "a b"]}>
+				{["a", "b"].map((area) => (<Grid.Item area={area} key={area}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+							{area}
+						</View>
+					</Grid.Item>))}
+			</Grid>
+		</Example.Item>
+	</Example>);
+export const auto = () => (<Example>
+		<Example.Item title="auto flow: column">
+			<Grid gap={4} autoFlow="column" rows={2} columns={2}>
+				{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="auto rows">
+			<Grid gap={4} autoRows="100px" columns={2}>
+				{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="auto columns">
+			<Grid gap={4} autoColumns="100px" autoFlow="column">
+				{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+	</Example>);

package/dist/components/Icon/Icon.module.css

@@ -1 +1 @@
-.root{aspect-ratio:1;display:flex;justify-content:center}.--auto{aspect-ratio:auto;justify-content:flex-start;width:auto}.root svg{display:block;height:100%;min-width:100%}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}
+.root{aspect-ratio:1;display:flex;justify-content:center}.--auto{aspect-ratio:auto;justify-content:flex-start;width:auto}.root svg{display:block;height:100%;min-width:100%;width:auto}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}

package/dist/components/Link/Link.d.ts

@@ -2,5 +2,5 @@ declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Ac
     icon?: import("../Icon").IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";
-} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default Link;

package/dist/components/Loader/Loader.module.css

@@ -1 +1 @@
-@keyframes rs-reshaped-loader{0%{transform:rotate(0deg)}50%{transform:rotate(540deg)}to{transform:rotate(3turn)}}.root{animation:rs-reshaped-loader 2.2s cubic-bezier(.445,.05,.55,.95) infinite;display:block;height:var(--rs-loader-size);position:relative;width:var(--rs-loader-size)}.root:after,.root:before{background:var(--rs-loader-color);border-radius:50%;content:"";height:var(--rs-loader-stroke);position:absolute;top:50%;transform:translateY(-50%);width:var(--rs-loader-stroke);z-index:2}.root:before{left:0}.root:after{right:0}.inner:after,.inner:before{border:var(--rs-loader-stroke) solid var(--rs-loader-color);border-radius:50%;content:"";inset:0;position:absolute}.inner:before{opacity:.28}.inner:after{border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}.--color-inherit{--rs-loader-color:currentcolor}.--color-primary{--rs-loader-color:var(--rs-color-border-primary)}.--color-positive{--rs-loader-color:var(--rs-color-border-positive)}.--color-critical{--rs-loader-color:var(--rs-color-border-critical)}.--size-small{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}@media (--rs-viewport-m ){.--size-small--m{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--m{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}@media (--rs-viewport-l ){.--size-small--l{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--l{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--xl{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}
+@keyframes rs-reshaped-loader{0%{transform:rotate(0deg)}50%{transform:rotate(540deg)}to{transform:rotate(3turn)}}.root{animation:rs-reshaped-loader 2.2s cubic-bezier(.445,.05,.55,.95) infinite;display:block;height:var(--rs-loader-size);position:relative;width:var(--rs-loader-size)}.root:after,.root:before{background:var(--rs-loader-color);border-radius:50%;content:"";height:var(--rs-loader-stroke);position:absolute;top:50%;transform:translateY(-50%);width:var(--rs-loader-stroke);z-index:2}.root:before{left:0}.root:after{right:0}.inner:after,.inner:before{border:var(--rs-loader-stroke) solid var(--rs-loader-color);border-radius:50%;content:"";inset:0;position:absolute}.inner:before{opacity:.28}.inner:after{border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}.--color-inherit{--rs-loader-color:currentcolor}.--color-primary{--rs-loader-color:var(--rs-color-border-primary)}.--color-positive{--rs-loader-color:var(--rs-color-border-positive)}.--color-critical{--rs-loader-color:var(--rs-color-border-critical)}.--size-small{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}@media (--rs-viewport-m ){.--size-small--m{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--m{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--m{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}@media (--rs-viewport-l ){.--size-small--l{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--l{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--l{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--xl{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--xl{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}

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

@@ -1,6 +1,6 @@
 import type * as G from "../../types/global";
 export type Props = {
-    size?: G.Responsive<"small" | "medium">;
+    size?: G.Responsive<"small" | "medium" | "large">;
     color?: "primary" | "critical" | "positive" | "inherit";
     className?: G.ClassName;
     attributes?: G.Attributes<"span">;

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

@@ -10,13 +10,15 @@ export default {
     },
 };
 export const size = () => {
-    const attributes = {};
     return (<Example>
 			<Example.Item title="size: medium">
-				<Loader size="medium" attributes={attributes}/>
+				<Loader size="medium"/>
 			</Example.Item>
 			<Example.Item title="size: small">
-				<Loader size="small" attributes={{ "data-foo": "23" }}/>
+				<Loader size="small"/>
+			</Example.Item>
+			<Example.Item title="size: large">
+				<Loader size="large"/>
 			</Example.Item>
 			<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
 				<Loader size={{ s: "small", m: "medium" }}/>

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

@@ -9,7 +9,7 @@ export default {
     component: Overlay,
     parameters: {
         iframe: {
-            url: "https://reshaped.so/docs/components/overlay",
+            url: "https://reshaped.so/docs/utilities/overlay",
         },
     },
 };

package/dist/components/Popover/Popover.js

@@ -5,14 +5,12 @@ import Dismissible from "../Dismissible/index.js";
 import s from "./Popover.module.css";
 import getPaddingStyles from "../../styles/padding/index.js";
 const Popover = (props) => {
-    const { id, forcePosition, onOpen, onClose, active, defaultActive, children, width, contentGap, variant = "elevated", triggerType = "click", position = "bottom", disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, instanceRef, containerRef, } = props;
+    const { width, variant = "elevated", triggerType = "click", position = "bottom", ...flyoutProps } = props;
     const padding = props.padding ?? (variant === "headless" ? 0 : 4);
     const trapFocusMode = props.trapFocusMode || (triggerType === "hover" ? "content-menu" : undefined);
     const paddingStyles = getPaddingStyles(padding);
     const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], paddingStyles?.classNames);
-    return (
-    // @ts-ignore
-    _jsx(Flyout, { id: id, instanceRef: instanceRef, position: position, forcePosition: forcePosition, onOpen: onOpen, onClose: onClose, trapFocusMode: trapFocusMode, triggerType: triggerType, active: active, defaultActive: defaultActive, width: width, disableHideAnimation: disableHideAnimation, disableContentHover: disableContentHover, disableCloseOnOutsideClick: disableCloseOnOutsideClick, contentGap: contentGap, containerRef: containerRef, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } }, children: children }));
+    return (_jsx(Flyout, { ...flyoutProps, position: position, trapFocusMode: trapFocusMode, triggerType: triggerType, width: width, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } } }));
 };
 const PopoverDismissible = (props) => {
     const { handleClose } = useFlyoutContext();

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

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../_private/Flyout";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "containerRef"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "containerRef" | "initialFocusRef"> & {
     children?: React.ReactNode;
     padding?: number;
     variant?: "elevated" | "headless";