reshaped 3.7.3 → 3.8.0-canary.0

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

@@ -1,9 +1,19 @@
 import type React from "react";
 import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
-export type Props = Pick<ViewProps, "padding" | "align" | "justify" | "height" | "maxHeight"> & {
+export type Props = Pick<ViewProps, "align" | "justify" | "height" | "maxHeight"> & {
+    /** Component inline padding */
+    padding?: ViewProps["padding"];
+    /** Component width, literal css value or unit token multiplier */
     width?: G.Responsive<string | number>;
+    /** Component height, literal css value or unit token multiplier */
+    height?: G.Responsive<string | number>;
+    /** Component max height, literal css value or unit token multiplier */
+    maxHeight?: G.Responsive<string | number>;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };

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

@@ -1,20 +1,30 @@
 import type React from "react";
 import type * as G from "../../types/global";
 type WithClose = {
+    /** Hide the close button */
     hideCloseButton: true;
+    /** aria-label attribute for the close button */
     closeAriaLabel?: string;
 };
 type WithoutClose = {
+    /** Show the close button */
     hideCloseButton?: false;
+    /** aria-label attribute for the close button */
     closeAriaLabel: string;
 };
 export type CloseProps = WithClose | WithoutClose;
 export type Props = CloseProps & {
+    /** Component render variant */
     variant?: "media";
+    /** Close button alignment */
     align?: "top" | "center";
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Callback when the component is dismissed */
     onClose?: () => void;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export {};

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

@@ -1,10 +1,16 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Change component to take no space, useful for using it as a border in components like Tabs */
     blank?: boolean;
+    /** Change component to render vertically */
     vertical?: G.Responsive<boolean>;
+    /** Position for rendering children */
     contentPosition?: "start" | "center" | "end";
+    /** Node for inserting text labels or custom components as a part of divider */
     children?: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"hr">;
 };

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

@@ -4,14 +4,17 @@ import type { MenuItemProps } from "../MenuItem";
 import type { FlyoutContentProps } from "../Flyout";
 export type Instance = PopoverInstance;
 export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates"> & {
+    /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
 };
 export type ContentProps = Pick<FlyoutContentProps, "attributes" | "children" | "className">;
 export type ItemProps = Omit<MenuItemProps, "roundedCorners">;
 export type SectionProps = {
+    /** Node for inserting children */
     children: React.ReactNode;
 };
 export type SubMenuProps = {
+    /** Node for inserting children */
     children: React.ReactNode;
 };
 export type SubTriggerProps = Omit<MenuItemProps, "endSlot" | "roundedCorners">;

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

@@ -2,18 +2,28 @@ import type React from "react";
 import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Name of the input element */
     name: string;
+    /** Node for inserting children, can be a render function that receives component state */
     children?: React.ReactNode | ((props: {
         highlighted?: boolean;
     }) => React.ReactNode);
+    /** Callback when the component value is changed */
     onChange?: G.ChangeHandler<File[], React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>>;
+    /** Component height, literal css value or unit token multiplier */
     height?: ViewProps["height"];
+    /** Component variant, headless variant is useful for rendering custom triggers like a Button */
     variant?: "outline" | "headless";
+    /** Change component to render inline making it more compact */
     inline?: boolean;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
+    /** Additional attributes for the input element */
     inputAttributes?: G.Attributes<"input">;
 };
 export type TriggerProps = {
+    /** Node for inserting children */
     children: React.ReactNode;
 };

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

@@ -50,16 +50,23 @@ export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
  * Component
  */
 export type Instance = {
+    /** Open the flyout content */
     open: () => void;
+    /** Close the flyout content */
     close: () => void;
+    /** Sync the flyout content position with the trigger element position */
     updatePosition: () => void;
 } | null;
 type WithUncontrolled = {
+    /** Control the content visibility, enables controlled mode */
     active?: never;
+    /** Control the content default visibility, enables uncontrolled mode */
     defaultActive?: boolean;
 };
 type WithControlled = {
+    /** Control the content visibility, enables controlled mode */
     active: boolean;
+    /** Control the content default visibility, enables uncontrolled mode */
     defaultActive?: never;
 };
 export type TriggerAttributes = {
@@ -78,34 +85,61 @@ export type TriggerAttributes = {
     "aria-controls"?: string;
 };
 type BaseProps = {
+    /** Unique id for the flyout content and trigger */
     id?: string;
+    /** Event used for displaying the content */
     triggerType?: "hover" | "click" | "focus";
+    /** Removes the content display delay if another flyout is already active */
     groupTimeouts?: boolean;
+    /** Content position relative to the trigger element */
     position?: Position;
     /**
      * @deprecated Use fallbackPosition={false} instead, will be removed in v4
      */
     forcePosition?: boolean;
+    /** Fallback positions for the content when it doesn't fit into the viewport or container */
     fallbackPositions?: Position[] | false;
+    /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: TrapMode | false;
+    /** Disable the flyout content interactivity */
     disabled?: boolean;
+    /** Disable the flyout content hide animation */
     disableHideAnimation?: boolean;
+    /** Ignore the content hover events and hide it if the triggerType is hover */
     disableContentHover?: boolean;
+    /** Disable the flyout content close on outside click */
     disableCloseOnOutsideClick?: boolean;
+    /** Automatically focus the first focusable element in the content, when false the content container will be focused instead
+     * @default true
+     */
     autoFocus?: boolean;
+    /** Origin coordinates for the content when there is no trigger element */
     originCoordinates?: G.Coordinates;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Callback when the content is opened */
     onOpen?: () => void;
+    /** Callback when the content is closed */
     onClose?: (args: {
         reason?: CloseReason;
     }) => void;
+    /** Content width, literal css value or unit token multiplier */
     width?: Width;
+    /** Gap between the content and the trigger element */
     contentGap?: number;
+    /** Shift the content on the secondary axis, relative to its original position */
     contentShift?: number;
+    /** Additional classname for the content element */
     contentClassName?: string;
+    /** Additional attributes for the content element */
     contentAttributes?: G.Attributes<"div">;
+    /** Ref accessor for the flyout methods */
     instanceRef?: React.Ref<Instance>;
+    /** Container to render the content in using a portal, position is calculated based on the container bounds
+     * @default document.body
+     */
     containerRef?: React.RefObject<HTMLElement | null>;
+    /** Element to focus when the content is opened */
     initialFocusRef?: React.RefObject<HTMLElement | null>;
 };
 export type DefaultProps = Required<{
@@ -116,11 +150,15 @@ export type UncontrolledProps = BaseProps & WithUncontrolled;
 export type ControlledProps = BaseProps & WithControlled;
 export type Props = ControlledProps | UncontrolledProps;
 export type TriggerProps = {
+    /** Node for inserting children, provides attributes for the trigger element */
     children: (attributes: TriggerAttributes) => React.ReactNode;
 };
 export type ContentProps = {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional classname for the content element */
     className?: G.ClassName;
+    /** Additional attributes for the content element */
     attributes?: G.Attributes<"div">;
 };
 export type ContextProps = {

package/dist/components/Flyout/FlyoutContent.js

@@ -94,7 +94,7 @@ const FlyoutContent = (props) => {
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
                 ...styles,
                 "--rs-flyout-gap": contentGap,
-            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: contentAttributes?.style, className: innerClassNames, children: children }) }) }));
+            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...attributes?.style, ...contentAttributes?.style }, className: innerClassNames, children: children }) }) }));
     return _jsx(Portal, { targetRef: containerRef, children: content });
 };
 FlyoutContent.displayName = "Flyout.Content";

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

@@ -1,17 +1,26 @@
 import type React from "react";
 export type Props = {
+    /** Node for inserting children */
     children: React.ReactNode;
+    /** Component size, to be used together with the other form component sizes */
     size?: "medium" | "large";
+    /** Change component to show an error state and display FormControl.Error */
     hasError?: boolean;
+    /** Change component to show a required indicator */
     required?: boolean;
+    /** Apply disabled styles */
     disabled?: boolean;
+    /** Apply semantic html markup when used for displaying multiple form fields together with a single label */
     group?: boolean;
+    /** Custom id for the form control */
     id?: string;
 };
 export type LabelProps = {
+    /** Node for inserting the label text */
     children: React.ReactNode;
 };
 export type CaptionProps = {
+    /** Node for inserting the caption text */
     children: React.ReactNode;
 };
 export type PrivateCaptionProps = CaptionProps & {

package/dist/components/Grid/Grid.js

@@ -24,7 +24,7 @@ const GridItem = (props) => {
     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, width, height, maxWidth, 
+    const { areas, columns, rows, gap, columnGap, rowGap, align, justify, autoColumns, autoRows, autoFlow, children, className, width, height, maxWidth, 
     // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     as: TagName = "div", attributes, } = props;
@@ -39,6 +39,8 @@ const Grid = (props) => {
     const rootVariables = {
         ...attributes?.style,
         ...responsiveVariables("--rs-grid-gap", gap),
+        ...responsiveVariables("--rs-grid-column-gap", columnGap),
+        ...responsiveVariables("--rs-grid-row-gap", rowGap),
         ...responsiveVariables("--rs-grid-rows", resolvedRows),
         ...responsiveVariables("--rs-grid-columns", resolvedColumns),
         ...responsiveVariables("--rs-grid-areas", resolvedAreas),

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

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

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

@@ -3,33 +3,64 @@ 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 React.JSX.IntrinsicElements = "div"> = {
+    /** Gap between grid items */
     gap?: G.Responsive<number>;
+    /** Horizontal gap between grid items */
+    columnGap?: G.Responsive<number>;
+    /** Vertical gap between grid items */
+    rowGap?: G.Responsive<number>;
+    /** Align grid items vertically */
     align?: G.Responsive<TStyles.Align>;
+    /** Justify grid items horizontally */
     justify?: G.Responsive<TStyles.Justify>;
+    /** Grid template rows */
     rows?: G.Responsive<number | Property.GridTemplateRows>;
+    /** Grid template columns */
     columns?: G.Responsive<number | Property.GridTemplateColumns>;
+    /** Grid areas for template syntax */
     areas?: G.Responsive<string[]>;
+    /** Grid auto flow */
     autoFlow?: G.Responsive<Property.GridAutoFlow>;
+    /** Grid auto columns */
     autoColumns?: G.Responsive<Property.GridAutoColumns>;
+    /** Grid auto rows */
     autoRows?: G.Responsive<Property.GridAutoRows>;
+    /** Maximum width of the grid container, literal css value or unit token multiplier */
     maxWidth?: G.Responsive<string | number>;
+    /** Width of the grid container, literal css value or unit token multiplier */
     width?: G.Responsive<string | number>;
+    /** Height of the grid container, literal css value or unit token multiplier */
     height?: G.Responsive<string | number>;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Custom root element html tag */
     as?: TagName;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
 };
 export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+    /** Grid area for template syntax */
     area?: string;
+    /** Starting column position */
     colStart?: G.Responsive<number>;
+    /** Ending column position */
     colEnd?: G.Responsive<number>;
+    /** Column span value */
     colSpan?: G.Responsive<number>;
+    /** Starting row position */
     rowStart?: G.Responsive<number>;
+    /** Ending row position */
     rowEnd?: G.Responsive<number>;
+    /** Row span value */
     rowSpan?: G.Responsive<number>;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Custom item element html tag */
     as?: TagName;
+    /** Additional classname for the item element */
     className?: G.ClassName;
+    /** Additional attributes for the item element */
     attributes?: G.Attributes<TagName>;
 };

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: {
@@ -35,3 +36,5 @@ export declare const auto: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const as: StoryObj;
+export declare const className: StoryObj;

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

@@ -1,3 +1,4 @@
+import { expect } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Grid from "../index.js";
 import View from "../../View/index.js";
@@ -11,7 +12,7 @@ export default {
     },
 };
 export const base = {
-    name: "gap, align, justify, maxWidth, width, height",
+    name: "gap, columnGap, rowGap, align, justify, maxWidth, width, height",
     render: () => (<Example>
 			<Example.Item title="gap: 2">
 				<Grid gap={2} columns={2}>
@@ -20,6 +21,13 @@ export const base = {
 						</View>))}
 				</Grid>
 			</Example.Item>
+			<Example.Item title="columnGap: 2, rowGap: 4">
+				<Grid columnGap={2} rowGap={4} columns={2}>
+					{[1, 2, 3, 4].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}>
@@ -205,3 +213,33 @@ export const auto = {
 			</Example.Item>
 		</Example>),
 };
+export const as = {
+    name: "as",
+    render: () => (<Grid as="ul">
+			<Grid.Item as="li">Content</Grid.Item>
+		</Grid>),
+    play: ({ canvas }) => {
+        const ul = canvas.getByRole("list");
+        const li = canvas.getByRole("listitem");
+        expect(ul).toBeInTheDocument();
+        expect(li).toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Grid className="test-class" attributes={{ id: "test-id" }}>
+				<Grid.Item className="test-item-class" attributes={{ id: "test-item-id" }}>
+					Content
+				</Grid.Item>
+			</Grid>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const item = root?.firstChild;
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-class");
+        expect(item).toHaveAttribute("id", "test-item-id");
+        expect(item).toHaveClass("test-item-class");
+    },
+};

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

@@ -1,8 +1,12 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Pick at which viewport sizes to hide the children*/
     hide?: G.Responsive<boolean>;
+    /** Use visibility hidden instead of display none */
     visibility?: boolean;
+    /** Custom root element html tag */
     as?: keyof React.JSX.IntrinsicElements;
+    /** Node for inserting children */
     children: React.ReactNode;
 };

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

@@ -1,4 +1,5 @@
 import type React from "react";
 export type Props = {
+    /** Node for inserting children */
     children?: React.ReactNode;
 };

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

@@ -1,8 +1,12 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Node for inserting children */
     children: React.ReactNode;
+    /** Highlight the component, can be used to show when hotkey is pressed */
     active?: boolean;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"span">;
 };

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

@@ -1,10 +1,16 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Icon svg component or node */
     svg: React.ReactElement | React.ComponentType;
+    /** Icon size, literal css value or unit token multiplier */
     size?: G.Responsive<number | string>;
+    /** Icon color, based on the color tokens */
     color?: "neutral" | "neutral-faded" | "positive" | "critical" | "warning" | "primary" | "disabled";
+    /** Use the width of the svg asset instead of providing a square bounding box */
     autoWidth?: boolean;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"span">;
 };

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

@@ -2,22 +2,37 @@ import type React from "react";
 import type * as G from "../../types/global";
 import type * as TStyles from "../../styles/types";
 export type Props = {
+    /** Image URL */
     src?: string;
+    /** Image alt text */
     alt?: string;
+    /** Image width, literal css value or unit token multiplier */
     width?: G.Responsive<string | number>;
+    /** Image height, literal css value or unit token multiplier */
     height?: G.Responsive<string | number>;
+    /** Image max width, literal css value or unit token multiplier */
     maxWidth?: G.Responsive<string | number>;
+    /** Image aspect ratio, width / height */
     aspectRatio?: G.Responsive<number>;
+    /** Image border radius, based on the radius tokens */
     borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large">;
+    /** Image display mode for controlling how it fits into the provided boundaries */
     displayMode?: "cover" | "contain";
+    /** Image on load event */
     onLoad?: (e: React.SyntheticEvent) => void;
+    /** Image on error event */
     onError?: (e: React.SyntheticEvent) => void;
+    /** Image fallback content if the image fails to load or was not provided */
     fallback?: string | React.ReactNode | boolean;
+    /** Image render function, can be used for integrating with Image component in 3rd party frameworks */
     renderImage?: (attributes: Omit<G.Attributes<"img">, "src" | "alt"> & {
         src: string;
         alt: string;
     }) => React.ReactNode;
+    /** Additional attributes for the image element */
     imageAttributes?: G.Attributes<"img">;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div"> & G.Attributes<"img">;
 };

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

@@ -1,7 +1,14 @@
 import type { ActionableProps } from "../Actionable";
 import type { IconProps } from "../Icon";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "stopPropagation"> & {
+    /** Icon at the start position */
     icon?: IconProps["svg"];
+    /** Link color, based on the color tokens
+     * @default "primary"
+     */
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
+    /** Link render variant
+     * @default "underline"
+     */
     variant?: "plain" | "underline";
 };

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

@@ -1,8 +1,13 @@
 import type * as G from "../../types/global";
 export type Props = {
+    /** Component size */
     size?: G.Responsive<"small" | "medium" | "large">;
+    /** Component color, based on the color tokens */
     color?: "primary" | "critical" | "positive" | "inherit";
+    /** aria-label attribute for the root element */
     ariaLabel?: string;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"span">;
 };

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

@@ -4,19 +4,31 @@ import type { ActionableProps, ActionableRef } from "../Actionable";
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as" | "stopPropagation"> & {
+    /** Component color, based on the color tokens */
     color?: "neutral" | "critical" | "primary";
+    /** Icon at the start position */
     icon?: IconProps["svg"];
-    startSlot?: React.ReactNode;
+    /** Node for inserting children */
     children: React.ReactNode;
+    /** Node for inserting content at the start side of the component */
+    startSlot?: React.ReactNode;
+    /** Node for inserting content at the end side of the component */
     endSlot?: React.ReactNode;
+    /** Highlight the component as hovered or focused. For example, when displaying currently focused item in Autocomplete */
     highlighted?: boolean;
+    /** Highlight the component as selected */
     selected?: boolean;
+    /** Component size */
     size?: G.Responsive<Size>;
+    /** Round the corners of the component */
     roundedCorners?: G.Responsive<boolean>;
 };
 export type AlignerProps = {
+    /** Node for inserting children */
     children: React.ReactElement;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type Export = React.ForwardRefExoticComponent<Props & {