@orcestr/ui 0.0.1 → 0.1.0

package/dist/components/CommandPalette/CommandPalette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAGH,KAAK,iBAAiB,EACzB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB,CAAC;AAQF,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAgB,EAChB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,gBAAqB,EACrB,MAAM,GACT,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CA2QA"}
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAGH,KAAK,iBAAiB,EACzB,MAAM,uBAAuB,CAAC;AAQ/B,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB,CAAC;AAQF,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAgB,EAChB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,gBAAqB,EACrB,MAAM,GACT,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAuRA"}

package/dist/components/CommandPalette/CommandPalette.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
-import { LuSearch } from 'react-icons/lu';
+import { LuSearch, LuX } from 'react-icons/lu';
 import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { actionItemSearchText, isActionItemDisabled, } from '../Action/ActionTypes';
 import { ActionConfirmModal } from '../Action/ActionConfirmModal';
 import { Collapse } from '../Collapse/Collapse';
 import { Modal } from '../Modal/Modal';
+import { IconButton } from '../IconButton/IconButton';
 import { Spinner } from '../Spinner/Spinner';
 import { TextField } from '../TextField/TextField';
 export function CommandPalette({ open, onOpenChange, items, recentItems = [], onSelect, title, description, placeholder, emptyText, recentTitle, globalOpenEvents = [], testId, }) {
@@ -145,18 +146,18 @@ export function CommandPalette({ open, onOpenChange, items, recentItems = [], on
             setQuery('');
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Modal, { open: open, onOpenChange: (next) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Modal, { open: open, onOpenChange: (next) => {
                     if (next)
                         onOpenChange(true);
                     else
                         close();
-                }, title: actualTitle, description: actualDescription, maxWidth: 520, testId: testId, children: _jsxs("div", { className: 'oui-command-palette', "data-testid": testId ? `${testId}-panel` : undefined, onKeyDown: handleKeyDown, children: [_jsx(TextField, { autoFocus: true, className: 'oui-command-palette-search', leftSlot: _jsx(LuSearch, { size: 16 }), placeholder: actualPlaceholder, value: query, role: 'combobox', "aria-autocomplete": 'list', "aria-controls": listboxId, "aria-expanded": open, "aria-activedescendant": selectedItem
-                                ? commandOptionId(listboxId, actualSelectedIndex)
-                                : undefined, onChange: (event) => setQuery(event.target.value) }), _jsx("div", { ref: optionsRef, id: listboxId, className: 'oui-command-palette-results', role: 'listbox', "aria-label": copy.common.commandPaletteResults, children: _jsx(Collapse, { open: true, className: 'oui-command-palette-collapse', children: groups.length > 0 ? (groups.map((groupData) => (_jsxs("div", { className: 'oui-command-palette-group', children: [_jsx("div", { className: 'oui-command-palette-group-title', "data-recent": groupData.recent ? 'true' : undefined, children: groupData.group }), _jsx("div", { className: 'oui-command-palette-items', children: groupData.items.map((item) => {
-                                                const index = options.indexOf(item);
-                                                const selected = index === actualSelectedIndex;
-                                                return (_jsxs("button", { id: commandOptionId(listboxId, index), type: 'button', role: 'option', "aria-selected": selected, className: 'oui-command-palette-item', "data-selected": selected ? 'true' : undefined, "data-loading": item.loading ? 'true' : undefined, "data-tone": item.tone, "data-oui-command-index": index, "aria-busy": item.loading ? 'true' : undefined, disabled: isActionItemDisabled(item), onMouseEnter: () => setSelectedIndex(index), onClick: () => selectItem(item), children: [item.icon || item.loading ? (_jsx("span", { className: 'oui-command-palette-item-icon', children: item.loading ? _jsx(Spinner, { size: 1 }) : item.icon })) : null, _jsxs("span", { className: 'oui-command-palette-item-main', children: [_jsx("span", { className: 'oui-command-palette-item-label', children: item.label }), item.description ? (_jsx("span", { className: 'oui-command-palette-item-description', children: item.description })) : null] }), item.shortcut ? (_jsx("span", { className: 'oui-command-palette-shortcut', children: item.shortcut })) : null] }, `${groupData.group}-${item.key}`));
-                                            }) })] }, groupData.group)))) : (_jsx("div", { className: 'oui-command-palette-empty', children: actualEmptyText })) }) })] }) }), _jsx(ActionConfirmModal, { item: confirmItem, open: confirmItem !== null, onCancel: () => setConfirmItem(null), onConfirm: () => {
+                }, maxWidth: 520, testId: testId, children: [_jsxs(Modal.Header, { children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [_jsx("h2", { className: 'oui-modal-title', children: actualTitle }), _jsx("p", { className: 'oui-modal-description', children: actualDescription })] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": copy.common.close, onClick: close })] }), _jsx(Modal.Body, { children: _jsxs("div", { className: 'oui-command-palette', "data-testid": testId ? `${testId}-panel` : undefined, onKeyDown: handleKeyDown, children: [_jsx(TextField, { autoFocus: true, className: 'oui-command-palette-search', leftSlot: _jsx(LuSearch, { size: 16 }), placeholder: actualPlaceholder, value: query, role: 'combobox', "aria-autocomplete": 'list', "aria-controls": listboxId, "aria-expanded": open, "aria-activedescendant": selectedItem
+                                        ? commandOptionId(listboxId, actualSelectedIndex)
+                                        : undefined, onChange: (event) => setQuery(event.target.value) }), _jsx("div", { ref: optionsRef, id: listboxId, className: 'oui-command-palette-results', role: 'listbox', "aria-label": copy.common.commandPaletteResults, children: _jsx(Collapse, { open: true, className: 'oui-command-palette-collapse', children: groups.length > 0 ? (groups.map((groupData) => (_jsxs("div", { className: 'oui-command-palette-group', children: [_jsx("div", { className: 'oui-command-palette-group-title', "data-recent": groupData.recent ? 'true' : undefined, children: groupData.group }), _jsx("div", { className: 'oui-command-palette-items', children: groupData.items.map((item) => {
+                                                        const index = options.indexOf(item);
+                                                        const selected = index === actualSelectedIndex;
+                                                        return (_jsxs("button", { id: commandOptionId(listboxId, index), type: 'button', role: 'option', "aria-selected": selected, className: 'oui-command-palette-item', "data-selected": selected ? 'true' : undefined, "data-loading": item.loading ? 'true' : undefined, "data-tone": item.tone, "data-oui-command-index": index, "aria-busy": item.loading ? 'true' : undefined, disabled: isActionItemDisabled(item), onMouseEnter: () => setSelectedIndex(index), onClick: () => selectItem(item), children: [item.icon || item.loading ? (_jsx("span", { className: 'oui-command-palette-item-icon', children: item.loading ? _jsx(Spinner, { size: 1 }) : item.icon })) : null, _jsxs("span", { className: 'oui-command-palette-item-main', children: [_jsx("span", { className: 'oui-command-palette-item-label', children: item.label }), item.description ? (_jsx("span", { className: 'oui-command-palette-item-description', children: item.description })) : null] }), item.shortcut ? (_jsx("span", { className: 'oui-command-palette-shortcut', children: item.shortcut })) : null] }, `${groupData.group}-${item.key}`));
+                                                    }) })] }, groupData.group)))) : (_jsx("div", { className: 'oui-command-palette-empty', children: actualEmptyText })) }) })] }) })] }), _jsx(ActionConfirmModal, { item: confirmItem, open: confirmItem !== null, onCancel: () => setConfirmItem(null), onConfirm: () => {
                     confirmItem?.onSelect?.();
                     if (confirmItem)
                         onSelect(confirmItem.key);

package/dist/components/ConfirmDialog/ConfirmDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrC,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,yBAAyB,CAAC;AAElD,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACnC,IAAI,EACJ,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CACxD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,IAAgB,EAChB,OAAe,EACf,eAAuB,EACvB,cAAsB,EACtB,mBAAmB,EACnB,QAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,GACX,EAAE,kBAAkB,2CAyDpB"}
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,yBAAyB,CAAC;AAIlD,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACnC,IAAI,EACJ,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CACxD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,IAAgB,EAChB,OAAe,EACf,eAAuB,EACvB,cAAsB,EACtB,mBAAmB,EACnB,QAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,GACX,EAAE,kBAAkB,2CA0EpB"}

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -1,7 +1,10 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LuX } from 'react-icons/lu';
 import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { Button } from '../Button/Button';
+import { Flex } from '../Flex/Flex';
+import { IconButton } from '../IconButton/IconButton';
 import { Modal } from '../Modal/Modal';
 import { Text } from '../Text/Text';
 export function ConfirmDialog({ open, onOpenChange, title, description, message, children, confirmLabel, cancelLabel, tone = 'neutral', loading = false, confirmDisabled = false, cancelDisabled = false, closeOnOverlayClick, maxWidth = 420, testId, onConfirm, onCancel, }) {
@@ -21,5 +24,5 @@ export function ConfirmDialog({ open, onOpenChange, title, description, message,
                 return;
             }
             cancel();
-        }, title: title, description: description, maxWidth: maxWidth, closeOnOverlayClick: closeOnOverlayClick ?? canClose, testId: testId, footer: (_jsxs(_Fragment, { children: [_jsx(Button, { v: 'surface', onClick: cancel, disabled: !canClose, testId: testId ? `${testId}-cancel` : undefined, children: actualCancelLabel }), _jsx(Button, { tone: tone, loading: loading, disabled: confirmDisabled, onClick: onConfirm, testId: testId ? `${testId}-confirm` : undefined, children: actualConfirmLabel })] })), children: [message ? (_jsx(Text, { as: 'p', tone: 'muted', lh: 1.5, children: message })) : null, children] }));
+        }, maxWidth: maxWidth, closeOnOverlayClick: closeOnOverlayClick ?? canClose, testId: testId, children: [title || description ? (_jsxs(Modal.Header, { children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [title ? _jsx("h2", { className: 'oui-modal-title', children: title }) : null, description ? (_jsx("p", { className: 'oui-modal-description', children: description })) : null] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": copy.common.close, disabled: !canClose, onClick: cancel })] })) : null, _jsxs(Modal.Body, { children: [message ? (_jsx(Text, { as: 'p', tone: 'muted', lh: 1.5, children: message })) : null, children] }), _jsx(Modal.Footer, { children: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: cancel, disabled: !canClose, testId: testId ? `${testId}-cancel` : undefined, children: actualCancelLabel }), _jsx(Button, { tone: tone, loading: loading, disabled: confirmDisabled, onClick: onConfirm, testId: testId ? `${testId}-confirm` : undefined, children: actualConfirmLabel })] }) })] }));
 }

package/dist/components/ContextMenu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,UAAU,EACf,KAAK,YAAY,EACpB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AAK3C,wBAAgB,WAAW,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,GACT,EAAE;IACC,QAAQ,EAAE,YAAY,CAAC;QAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;KAAC,CAAC,CAAC;IACtE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CA6EA"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,UAAU,EACf,KAAK,YAAY,EACpB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AAS3C,wBAAgB,WAAW,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,GACT,EAAE;IACC,QAAQ,EAAE,YAAY,CAAC;QAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;KAAC,CAAC,CAAC;IACtE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAiFA"}

package/dist/components/ContextMenu/ContextMenu.js

@@ -4,7 +4,7 @@ import { cloneElement, useCallback, useEffect, useRef, useState, } from 'react';
 import { cn } from '../../utils/cn';
 import { ActionConfirmModal } from '../Action/ActionConfirmModal';
 import { isActionItemDisabled } from '../Action/ActionTypes';
-import { useOverlayContext, useOverlayLayerIndex } from '../Overlay/OverlayProvider';
+import { overlayLayerZIndex, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
 import { Portal } from '../Portal/Portal';
 import { Spinner } from '../Spinner/Spinner';
 export function ContextMenu({ children, items, className, testId, }) {
@@ -47,7 +47,7 @@ export function ContextMenu({ children, items, className, testId, }) {
     return (_jsxs(_Fragment, { children: [trigger, point ? (_jsx(Portal, { children: _jsx("div", { ref: layerRef, className: cn('oui-popover-content oui-menu oui-action-menu-content oui-context-menu-content', className), "data-state": 'opening', "data-layer": 'dropdown', "data-testid": testId, style: {
                         left: point.x,
                         top: point.y,
-                        zIndex: overlay.zIndex.dropdown + layerIndex * 10,
+                        zIndex: overlayLayerZIndex(overlay.zIndex, 'dropdown', layerIndex),
                     }, onClick: (event) => event.stopPropagation(), children: _jsx(ContextMenuContent, { items: items, close: close, requestConfirmation: setConfirmItem, testId: testId ? `${testId}-list` : undefined }) }) })) : null, _jsx(ActionConfirmModal, { item: confirmItem, open: confirmItem !== null, onCancel: () => setConfirmItem(null), onConfirm: () => {
                     confirmItem?.onSelect?.();
                     setConfirmItem(null);

package/dist/components/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,EAQH,KAAK,sBAAsB,EAC9B,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,GAAG,EACH,GAAG,EACH,YAAY,EACZ,WAAW,EACX,SAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,MAAM,EACN,MAAM,GACT,EAAE,eAAe,2CAiIjB"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQzE,OAAO,EAQH,KAAK,sBAAsB,EAC9B,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,GAAG,EACH,GAAG,EACH,YAAY,EACZ,WAAW,EACX,SAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,MAAM,EACN,MAAM,GACT,EAAE,eAAe,2CA2IjB"}

package/dist/components/DatePicker/DatePicker.js

@@ -26,13 +26,21 @@ export function DatePicker({ value, onValueChange, min, max, disabledDate, place
         onValueChange(clampDate(nextValue, min, max));
         setOpen(false);
     };
+    const openCalendar = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (disabled || readOnly)
+            return;
+        setCursorMonth(monthCursorForDate(value));
+        setOpen(true);
+    };
     return (_jsx(Popover, { open: open, onOpenChange: (nextOpen) => {
             if (readOnly && nextOpen)
                 return;
             if (nextOpen)
                 setCursorMonth(monthCursorForDate(value));
             setOpen(nextOpen);
-        }, disabled: disabled || readOnly, matchTriggerWidth: false, sideOffset: 6, testId: testId ? `${testId}-popover` : undefined, trigger: _jsx(TextField, { value: displayValue, placeholder: placeholder, readOnly: true, disabled: disabled, clearable: clearable && Boolean(value) && !readOnly, testId: testId, "aria-label": openCalendarLabel ?? copy.common.openCalendar, onClear: () => onValueChange(''), rightSlot: _jsx("span", { className: 'oui-date-picker-trigger', "aria-hidden": true, children: _jsx(LuCalendarDays, { size: 16 }) }) }), className: 'oui-date-picker-popover', children: _jsxs("div", { className: 'oui-date-picker-panel', children: [_jsxs("div", { className: 'oui-date-picker-head', children: [_jsx(IconButton, { size: 1, v: 'ghost', type: 'button', icon: _jsx(LuChevronLeft, { size: 16 }), "aria-label": previousMonthLabel ?? copy.common.previous, onClick: () => setCursorMonth((current) => shiftMonth(current, -1)) }), _jsx("strong", { children: formatMonthLabel(cursorMonth, actualLocale) }), _jsx(IconButton, { size: 1, v: 'ghost', type: 'button', icon: _jsx(LuChevronRight, { size: 16 }), "aria-label": nextMonthLabel ?? copy.common.next, onClick: () => setCursorMonth((current) => shiftMonth(current, 1)) })] }), _jsx("div", { className: 'oui-date-picker-weekdays', children: weekdays.map((weekday) => (_jsx("span", { children: weekday }, weekday))) }), _jsx("div", { className: 'oui-date-picker-grid', children: monthState.weeks.flatMap((week) => week.map((day) => (_jsx("button", { type: 'button', className: 'oui-date-picker-day', "data-outside": day.outsideMonth ? 'true' : undefined, "data-selected": day.selected ? 'true' : undefined, "data-today": day.today ? 'true' : undefined, disabled: day.disabled, "aria-pressed": day.selected, onClick: () => selectDate(day.date), children: day.day }, day.date)))) }), _jsxs("div", { className: 'oui-date-picker-foot', children: [_jsx(Button, { size: 1, v: 'ghost', type: 'button', onClick: () => selectDate(clampDate(new Date().toISOString().slice(0, 10), min, max)), children: todayLabel ?? copy.dates.today }), clearable ? (_jsx(Button, { size: 1, v: 'ghost', type: 'button', disabled: !value, onClick: () => {
+        }, disabled: disabled || readOnly, matchTriggerWidth: false, sideOffset: 6, testId: testId ? `${testId}-popover` : undefined, trigger: _jsx(TextField, { value: displayValue, placeholder: placeholder, readOnly: true, disabled: disabled, clearable: clearable && Boolean(value) && !readOnly, testId: testId, "aria-label": openCalendarLabel ?? copy.common.openCalendar, onClear: () => onValueChange(''), rightSlot: _jsx("button", { type: 'button', className: 'oui-date-picker-trigger', "aria-label": openCalendarLabel ?? copy.common.openCalendar, disabled: disabled || readOnly, onClick: openCalendar, children: _jsx(LuCalendarDays, { size: 16 }) }) }), className: 'oui-date-picker-popover', children: _jsxs("div", { className: 'oui-date-picker-panel', children: [_jsxs("div", { className: 'oui-date-picker-head', children: [_jsx(IconButton, { size: 1, v: 'ghost', type: 'button', icon: _jsx(LuChevronLeft, { size: 16 }), "aria-label": previousMonthLabel ?? copy.common.previous, onClick: () => setCursorMonth((current) => shiftMonth(current, -1)) }), _jsx("strong", { children: formatMonthLabel(cursorMonth, actualLocale) }), _jsx(IconButton, { size: 1, v: 'ghost', type: 'button', icon: _jsx(LuChevronRight, { size: 16 }), "aria-label": nextMonthLabel ?? copy.common.next, onClick: () => setCursorMonth((current) => shiftMonth(current, 1)) })] }), _jsx("div", { className: 'oui-date-picker-weekdays', children: weekdays.map((weekday) => (_jsx("span", { children: weekday }, weekday))) }), _jsx("div", { className: 'oui-date-picker-grid', children: monthState.weeks.flatMap((week) => week.map((day) => (_jsx("button", { type: 'button', className: 'oui-date-picker-day', "data-outside": day.outsideMonth ? 'true' : undefined, "data-selected": day.selected ? 'true' : undefined, "data-today": day.today ? 'true' : undefined, disabled: day.disabled, "aria-pressed": day.selected, onClick: () => selectDate(day.date), children: day.day }, day.date)))) }), _jsxs("div", { className: 'oui-date-picker-foot', children: [_jsx(Button, { size: 1, v: 'ghost', type: 'button', onClick: () => selectDate(clampDate(new Date().toISOString().slice(0, 10), min, max)), children: todayLabel ?? copy.dates.today }), clearable ? (_jsx(Button, { size: 1, v: 'ghost', type: 'button', disabled: !value, onClick: () => {
                                 onValueChange('');
                                 setOpen(false);
                             }, children: copy.common.clear })) : null] })] }) }));

package/dist/components/Dialog/Dialog.d.ts

@@ -1,2 +1,70 @@
-export { Modal as Dialog, type ModalProps as DialogProps } from '../Modal/Modal';
+import { type CSSProperties, type KeyboardEventHandler, type ReactNode } from 'react';
+import { type ModalProps } from '../Modal/Modal';
+import { type SystemProps } from '../../theme/systemProps';
+export type DialogProps = ModalProps;
+export declare const Dialog: (({ open, onOpenChange, children, maxWidth, minHeight, overlayColor, overlayOpacity, overlayBlur, borderColor, radius, shadow, animationDuration, animation, overlayClassName, overlayStyle, className, contentClassName, contentStyle, onKeyDown, onOpenAutoFocus, closeOnOverlayClick, ariaLabel, ariaLabelledBy, ariaDescribedBy, testId, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    Header: ({ children, className, style }: {
+        children: ReactNode;
+        className?: string;
+        style?: CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, style }: {
+        children: ReactNode;
+        className?: string;
+        style?: CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className, style }: {
+        children: ReactNode;
+        className?: string;
+        style?: CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Close: ({ onClick, ...props }: import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        asChild?: false;
+    }) => import("react/jsx-runtime").JSX.Element;
+} & {
+    Root: typeof DialogRoot;
+    Content: typeof DialogContent;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Close: typeof DialogClose;
+};
+type DialogRootProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+};
+declare function DialogRoot({ open, onOpenChange, children }: DialogRootProps): import("react/jsx-runtime").JSX.Element;
+type DialogContentProps = Omit<ModalProps, 'open' | 'onOpenChange' | 'children' | 'ariaLabelledBy' | 'ariaDescribedBy'> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    onOpenAutoFocus?: (event: {
+        preventDefault: () => void;
+    }) => void;
+    onEscapeKeyDown?: (event: {
+        preventDefault: () => void;
+    }) => void;
+};
+declare function DialogContent({ children, className, style, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element | null;
+type DialogTitleProps = {
+    children: ReactNode;
+} & SystemProps & {
+    className?: string;
+    style?: CSSProperties;
+};
+declare function DialogTitle({ children, className, style, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+type DialogDescriptionProps = {
+    children: ReactNode;
+    size?: number | string;
+} & SystemProps & {
+    className?: string;
+    style?: CSSProperties;
+};
+declare function DialogDescription({ children, className, style, size: _size, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+type DialogCloseProps = {
+    children: ReactNode;
+};
+declare function DialogClose({ children }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/components/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,IAAI,MAAM,EAAE,KAAK,UAAU,IAAI,WAAW,EAAC,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC;AAErC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAMjB,CAAC;AAWH,KAAK,eAAe,GAAG;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAC,EAAE,eAAe,2CAMlE;AAED,KAAK,kBAAkB,GAAG,IAAI,CAC1B,UAAU,EACV,MAAM,GAAG,cAAc,GAAG,UAAU,GAAG,gBAAgB,GAAG,iBAAiB,CAC9E,GAAG;IACA,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,cAAc,EAAE,MAAM,IAAI,CAAA;KAAC,KAAK,IAAI,CAAC;IAChE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,cAAc,EAAE,MAAM,IAAI,CAAA;KAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAC,EAAE,kBAAkB,kDA2BhF;AAED,KAAK,gBAAgB,GAAG;IACpB,QAAQ,EAAE,SAAS,CAAC;CACvB,GAAG,WAAW,GAAG;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,2CAa5E;AAED,KAAK,sBAAsB,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,GAAG,WAAW,GAAG;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EAAE,KAAK,EACX,GAAG,KAAK,EACX,EAAE,sBAAsB,2CAaxB;AAED,KAAK,gBAAgB,GAAG;IACpB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAC,EAAE,gBAAgB,2CAehD"}

package/dist/components/Dialog/Dialog.js

@@ -1 +1,48 @@
-export { Modal as Dialog } from '../Modal/Modal';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId, } from 'react';
+import { Modal } from '../Modal/Modal';
+import { splitSystemProps } from '../../theme/systemProps';
+import { cn } from '../../utils/cn';
+export const Dialog = Object.assign(Modal, {
+    Root: DialogRoot,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Close: DialogClose,
+});
+const DialogContext = createContext(null);
+function DialogRoot({ open, onOpenChange, children }) {
+    return (_jsx(DialogContext.Provider, { value: { open, onOpenChange }, children: children }));
+}
+function DialogContent({ children, className, style, ...props }) {
+    const context = useContext(DialogContext);
+    const titleId = useId();
+    const descriptionId = useId();
+    if (!context)
+        return null;
+    return (_jsx(DialogContext.Provider, { value: {
+            ...context,
+            titleId,
+            descriptionId,
+        }, children: _jsx(Modal, { ...props, open: context.open, onOpenChange: context.onOpenChange, ariaLabelledBy: titleId, ariaDescribedBy: descriptionId, contentClassName: className, contentStyle: style, children: children }) }));
+}
+function DialogTitle({ children, className, style, ...props }) {
+    const context = useContext(DialogContext);
+    const { systemStyle, restProps } = splitSystemProps(props);
+    return (_jsx("h2", { id: context?.titleId, className: cn('oui-modal-title', className), style: { ...systemStyle, ...style }, ...restProps, children: children }));
+}
+function DialogDescription({ children, className, style, size: _size, ...props }) {
+    const context = useContext(DialogContext);
+    const { systemStyle, restProps } = splitSystemProps(props);
+    return (_jsx("p", { id: context?.descriptionId, className: cn('oui-modal-description', className), style: { ...systemStyle, ...style }, ...restProps, children: children }));
+}
+function DialogClose({ children }) {
+    const context = useContext(DialogContext);
+    return (_jsx("span", { onClick: () => context?.onOpenChange(false), onKeyDown: (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                context?.onOpenChange(false);
+            }
+        }, children: children }));
+}

package/dist/components/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,aAAa,EAClB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAiBf,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,IAAc,EACd,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,KAAY,EACZ,SAAiB,EACjB,UAAkB,EAClB,oBAA2B,EAC3B,aAAoB,EACpB,YAAoB,EACpB,eAAsB,EACtB,SAAS,EACT,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,KAAK,EACL,UAAU,EACV,aAAa,EACb,MAAM,GACT,EAAE,WAAW,kDAqHb"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,aAAa,EAClB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAkBf,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,IAAc,EACd,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,KAAY,EACZ,SAAiB,EACjB,UAAkB,EAClB,oBAA2B,EAC3B,aAAoB,EACpB,YAAoB,EACpB,eAAsB,EACtB,SAAS,EACT,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,KAAK,EACL,UAAU,EACV,aAAa,EACb,MAAM,GACT,EAAE,WAAW,kDAqHb"}

package/dist/components/Drawer/Drawer.js

@@ -9,7 +9,7 @@ import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { OrcestrThemeContext } from '../../theme/useTheme';
 import { cn } from '../../utils/cn';
 import { IconButton } from '../IconButton/IconButton';
-import { lockOverlayScroll, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
+import { lockOverlayScroll, overlayLayerZIndex, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
 import { Portal } from '../Portal/Portal';
 export function Drawer({ open, defaultOpen, onOpenChange, side = 'right', size, title, description, children, footer, modal = true, trapFocus = modal, lockScroll = modal, closeOnBackdropClick = true, closeOnEscape = true, showBackdrop = modal, showCloseButton = true, className, panelClassName, bodyClassName, backdropClassName, style, panelStyle, backdropStyle, testId, }) {
     const { copy } = useOrcestrUiLocale();
@@ -22,7 +22,7 @@ export function Drawer({ open, defaultOpen, onOpenChange, side = 'right', size,
     const ease = themeContext?.theme.motion.ease ?? 'cubic-bezier(0.22, 1, 0.36, 1)';
     const { present, state } = usePresence(isOpen, durationMs);
     const layerIndex = useOverlayLayerIndex(present);
-    const zIndex = overlay.zIndex.modal + layerIndex * 20;
+    const zIndex = overlayLayerZIndex(overlay.zIndex, 'modal', layerIndex);
     const panelRef = useRef(null);
     const titleId = useId();
     const descriptionId = useId();

package/dist/components/EntityPicker/EntityPicker.d.ts

@@ -27,6 +27,7 @@ export type EntityPickerProps<T> = {
     disabled?: boolean;
     clearable?: boolean;
     showChevron?: boolean;
+    trigger?: ReactNode;
     size?: UiSize;
     maxHeight?: number;
     closeOnSelect?: boolean;
@@ -37,5 +38,5 @@ export type EntityPickerProps<T> = {
     debounceMs?: number;
     testId?: string;
 };
-export declare function EntityPicker<T>({ loadPage, getEntityId, renderEntity, renderValue, value, onValueChange, placeholder, emptyText, loadingText, errorText, retryLabel, disabled, clearable, showChevron, size, maxHeight, closeOnSelect, isEntitySelected, createAction, optionAction, resetKey, debounceMs, testId, }: EntityPickerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function EntityPicker<T>({ loadPage, getEntityId, renderEntity, renderValue, value, onValueChange, placeholder, emptyText, loadingText, errorText, retryLabel, disabled, clearable, showChevron, trigger, size, maxHeight, closeOnSelect, isEntitySelected, createAction, optionAction, resetKey, debounceMs, testId, }: EntityPickerProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EntityPicker.d.ts.map

package/dist/components/EntityPicker/EntityPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EntityPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EntityPicker/EntityPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAGH,KAAK,eAAe,EACvB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,MAAM,wBAAwB,GAAG;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,CAAC,IAAI;IACtC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACxE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IAC1C,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACrC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,YAAY,CAAC,EAAE,wBAAwB,CAAC,CAAC,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC5B,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAgB,EAChB,SAAgB,EAChB,WAAkB,EAClB,IAAQ,EACR,SAAe,EACf,aAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,MAAM,GACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA8CtB"}
+{"version":3,"file":"EntityPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EntityPicker/EntityPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAGH,KAAK,eAAe,EACvB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,MAAM,wBAAwB,GAAG;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,CAAC,IAAI;IACtC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACxE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IAC1C,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACrC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,YAAY,CAAC,EAAE,wBAAwB,CAAC,CAAC,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC5B,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAgB,EAChB,SAAgB,EAChB,WAAkB,EAClB,OAAO,EACP,IAAQ,EACR,SAAe,EACf,aAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,MAAM,GACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA+CtB"}

package/dist/components/EntityPicker/EntityPicker.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { PaginatedCombobox, } from '../PaginatedCombobox/PaginatedCombobox';
-export function EntityPicker({ loadPage, getEntityId, renderEntity, renderValue, value, onValueChange, placeholder, emptyText, loadingText, errorText, retryLabel, disabled = false, clearable = true, showChevron = true, size = 3, maxHeight = 280, closeOnSelect = true, isEntitySelected, createAction, optionAction, resetKey, debounceMs, testId, }) {
+export function EntityPicker({ loadPage, getEntityId, renderEntity, renderValue, value, onValueChange, placeholder, emptyText, loadingText, errorText, retryLabel, disabled = false, clearable = true, showChevron = true, trigger, size = 3, maxHeight = 280, closeOnSelect = true, isEntitySelected, createAction, optionAction, resetKey, debounceMs, testId, }) {
     const { copy } = useOrcestrUiLocale();
     const searchAction = createAction
         ? {
@@ -13,5 +13,5 @@ export function EntityPicker({ loadPage, getEntityId, renderEntity, renderValue,
             onClick: (search) => createAction.onCreate(search),
         }
         : undefined;
-    return (_jsx(PaginatedCombobox, { loadPage: loadPage, getItemId: getEntityId, renderOption: (item) => (_jsx("div", { className: 'oui-entity-picker-option', children: renderEntity(item) })), renderSelectedLabel: (item) => (_jsx("span", { className: 'oui-entity-picker-value', children: renderValue?.(item) ?? renderEntity(item) })), value: value, onChange: onValueChange, placeholder: placeholder ?? copy.common.selectEntity, emptyText: emptyText ?? copy.common.noOptions, loadingText: loadingText, errorText: errorText, retryLabel: retryLabel, disabled: disabled, clearable: clearable, showChevron: showChevron, size: size, maxHeight: maxHeight, closeOnSelect: closeOnSelect, isItemSelected: isEntitySelected, searchAction: searchAction, optionAction: optionAction, resetKey: resetKey, debounceMs: debounceMs, testId: testId }));
+    return (_jsx(PaginatedCombobox, { loadPage: loadPage, getItemId: getEntityId, renderOption: (item) => (_jsx("div", { className: 'oui-entity-picker-option', children: renderEntity(item) })), renderSelectedLabel: (item) => (_jsx("span", { className: 'oui-entity-picker-value', children: renderValue?.(item) ?? renderEntity(item) })), value: value, onChange: onValueChange, placeholder: placeholder ?? copy.common.selectEntity, emptyText: emptyText ?? copy.common.noOptions, loadingText: loadingText, errorText: errorText, retryLabel: retryLabel, disabled: disabled, clearable: clearable, showChevron: showChevron, trigger: trigger, size: size, maxHeight: maxHeight, closeOnSelect: closeOnSelect, isItemSelected: isEntitySelected, searchAction: searchAction, optionAction: optionAction, resetKey: resetKey, debounceMs: debounceMs, testId: testId }));
 }

package/dist/components/Flex/Flex.d.ts

@@ -1,9 +1,13 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
 import { type SystemProps } from '../../theme/systemProps';
 export type FlexProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
+    as?: ElementType;
+    asChild?: boolean;
     testId?: string;
 };
 export declare const Flex: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SystemProps & {
+    as?: ElementType;
+    asChild?: boolean;
     testId?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Flex.d.ts.map

package/dist/components/Flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAE3E,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACnD,WAAW,GAAG;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,IAAI;aAHA,MAAM;kDAiBrB,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEnB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACnD,WAAW,GAAG;IACV,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,IAAI;SALJ,WAAW;cACN,OAAO;aACR,MAAM;kDA8BrB,CAAC"}

package/dist/components/Flex/Flex.js

@@ -1,8 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, } from 'react';
 import { cn } from '../../utils/cn';
 import { splitSystemProps } from '../../theme/systemProps';
-export const Flex = forwardRef(function Flex({ className, style, testId, ...props }, ref) {
+import { renderSlot } from '../../utils/slot';
+export const Flex = forwardRef(function Flex({ as: Component = 'div', asChild = false, className, style, testId, children, ...props }, ref) {
     const { systemStyle, restProps } = splitSystemProps(props);
-    return (_jsx("div", { ref: ref, className: cn('oui-flex', className), "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps }));
+    const commonProps = {
+        className: cn('oui-flex', className),
+        'data-testid': testId,
+        style: { ...systemStyle, ...style },
+        ...restProps,
+    };
+    if (asChild) {
+        return renderSlot(children, {
+            ...commonProps,
+            ref: ref,
+        });
+    }
+    return (_jsx(Component, { ref: ref, ...commonProps, children: children }));
 });

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

@@ -1,11 +1,18 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import { type SystemProps } from '../../theme/systemProps';
 export type GridProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
-    columns?: string;
+    columns?: GridColumns;
     testId?: string;
 };
+export type GridColumns = number | string | {
+    initial?: number | string;
+    sm?: number | string;
+    md?: number | string;
+    lg?: number | string;
+    xl?: number | string;
+};
 export declare const Grid: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SystemProps & {
-    columns?: string;
+    columns?: GridColumns;
     testId?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAE3E,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACnD,WAAW,GAAG;IACV,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,IAAI;cAJC,MAAM;aACP,MAAM;kDAqBrB,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAGpF,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAE3E,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACnD,WAAW,GAAG;IACV,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,MAAM,MAAM,WAAW,GACjB,MAAM,GACN,MAAM,GACN;IACE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEN,eAAO,MAAM,IAAI;cAfC,WAAW;aACZ,MAAM;kDAiCrB,CAAC"}

package/dist/components/Grid/Grid.js

@@ -4,9 +4,30 @@ import { cn } from '../../utils/cn';
 import { splitSystemProps } from '../../theme/systemProps';
 export const Grid = forwardRef(function Grid({ className, style, columns, testId, ...props }, ref) {
     const { systemStyle, restProps } = splitSystemProps(props);
+    const columnStyle = gridColumnStyle(columns);
     return (_jsx("div", { ref: ref, className: cn('oui-grid', className), "data-testid": testId, style: {
-            gridTemplateColumns: columns,
+            ...columnStyle,
             ...systemStyle,
             ...style,
         }, ...restProps }));
 });
+function gridColumnStyle(columns) {
+    if (columns === undefined)
+        return {};
+    if (typeof columns === 'number' || typeof columns === 'string') {
+        return { '--oui-grid-columns': columnValue(columns) };
+    }
+    return {
+        '--oui-grid-columns': columnValue(columns.initial ?? 1),
+        '--oui-grid-columns-sm': columns.sm ? columnValue(columns.sm) : undefined,
+        '--oui-grid-columns-md': columns.md ? columnValue(columns.md) : undefined,
+        '--oui-grid-columns-lg': columns.lg ? columnValue(columns.lg) : undefined,
+        '--oui-grid-columns-xl': columns.xl ? columnValue(columns.xl) : undefined,
+    };
+}
+function columnValue(value) {
+    const normalized = String(value).trim();
+    if (/^\d+$/.test(normalized))
+        return `repeat(${normalized}, minmax(0, 1fr))`;
+    return normalized;
+}

package/dist/components/IconButton/IconButton.d.ts

@@ -1,25 +1,37 @@
 import { type ButtonHTMLAttributes, type ReactNode } from 'react';
-import { type SystemProps, type Tone, type UiSize } from '../../theme/systemProps';
+import { type SystemProps, type ToneInput, type UiSize } from '../../theme/systemProps';
 import type { ButtonPressAnimation } from '../../theme/themeTypes';
 import type { ButtonVariant } from '../Button/Button';
-export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & SystemProps & {
+export type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & SystemProps & {
     size?: UiSize;
     v?: ButtonVariant;
-    tone?: Tone;
-    icon: ReactNode;
+    tone?: ToneInput;
+    icon?: ReactNode;
     loading?: boolean;
     round?: boolean;
+    badge?: ReactNode;
+    badgeTone?: ToneInput;
+    badgeMax?: number;
+    badgeTestId?: string;
     pressAnimation?: ButtonPressAnimation;
+    asChild?: boolean;
+    children?: ReactNode;
     testId?: string;
 };
-export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & SystemProps & {
+export declare const IconButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & SystemProps & {
     size?: UiSize;
     v?: ButtonVariant;
-    tone?: Tone;
-    icon: ReactNode;
+    tone?: ToneInput;
+    icon?: ReactNode;
     loading?: boolean;
     round?: boolean;
+    badge?: ReactNode;
+    badgeTone?: ToneInput;
+    badgeMax?: number;
+    badgeTestId?: string;
     pressAnimation?: ButtonPressAnimation;
+    asChild?: boolean;
+    children?: ReactNode;
     testId?: string;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/components/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyB,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxF,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,IAAI,EACT,KAAK,MAAM,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAGpD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GACnF,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,aAAa,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,UAAU;WAVR,MAAM;QACT,aAAa;WACV,IAAI;UACL,SAAS;cACL,OAAO;YACT,OAAO;qBACE,oBAAoB;aAC5B,MAAM;qDA+CtB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKH,KAAK,oBAAoB,EAEzB,KAAK,SAAS,EAEjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,MAAM,EAEd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAEjE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAGpD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GACjE,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,aAAa,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAqBN,eAAO,MAAM,UAAU;WAnCR,MAAM;QACT,aAAa;WACV,SAAS;WACT,SAAS;cACN,OAAO;YACT,OAAO;YACP,SAAS;gBACL,SAAS;eACV,MAAM;kBACH,MAAM;qBACH,oBAAoB;cAC3B,OAAO;eACN,SAAS;aACX,MAAM;qDAoGtB,CAAC"}

package/dist/components/IconButton/IconButton.js

@@ -1,13 +1,48 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useContext } from 'react';
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement, useContext, } from 'react';
 import { cn } from '../../utils/cn';
-import { splitSystemProps, } from '../../theme/systemProps';
+import { splitSystemProps, normalizeTone, } from '../../theme/systemProps';
 import { OrcestrThemeContext } from '../../theme/useTheme';
+import { renderSlot } from '../../utils/slot';
 import { Spinner } from '../Spinner/Spinner';
-export const IconButton = forwardRef(function IconButton({ className, style, size = 3, v = 'soft', tone = 'neutral', loading = false, round = true, pressAnimation, testId, icon, disabled, type = 'button', ...props }, ref) {
+function formatBadge(value, max) {
+    if (typeof value !== 'number')
+        return value;
+    return value > max ? `${max}+` : value;
+}
+function withBadge(children, badge) {
+    if (badge === null || badge === undefined || !isValidElement(children)) {
+        return children;
+    }
+    const child = children;
+    return cloneElement(child, undefined, (_jsxs(_Fragment, { children: [child.props.children, badge] })));
+}
+export const IconButton = forwardRef(function IconButton({ className, style, size = 3, v = 'soft', tone = 'neutral', loading = false, round = true, badge, badgeTone = 'danger', badgeMax = 99, badgeTestId, pressAnimation, asChild = false, testId, icon, children, disabled, type = 'button', ...props }, ref) {
     const themeContext = useContext(OrcestrThemeContext);
     const actualPressAnimation = pressAnimation ?? themeContext?.theme.motion.pressAnimation ?? 'soft';
     const { systemStyle, restProps } = splitSystemProps(props);
-    return (_jsx("button", { ref: ref, type: type, className: cn('oui-icon-button', className), "data-size": size, "data-variant": v, "data-tone": tone, "data-round": round ? 'true' : undefined, "data-press-animation": actualPressAnimation, "data-loading": loading ? 'true' : undefined, "data-testid": testId, "aria-busy": loading ? 'true' : undefined, disabled: disabled || loading, style: { ...systemStyle, ...style }, ...restProps, children: loading ? _jsx(Spinner, { size: 1 }) : icon }));
+    const commonProps = {
+        className: cn('oui-icon-button', className),
+        'data-size': size,
+        'data-variant': v,
+        'data-tone': normalizeTone(tone),
+        'data-round': round ? 'true' : undefined,
+        'data-press-animation': actualPressAnimation,
+        'data-loading': loading ? 'true' : undefined,
+        'data-testid': testId,
+        'aria-busy': loading || undefined,
+        style: { ...systemStyle, ...style },
+        ...restProps,
+    };
+    const badgeNode = badge === null || badge === undefined ? null : (_jsx("span", { className: 'oui-icon-button-badge', "data-tone": normalizeTone(badgeTone), "data-testid": badgeTestId, children: formatBadge(badge, badgeMax) }));
+    const content = (_jsxs(_Fragment, { children: [loading ? _jsx(Spinner, { size: 1 }) : icon ?? children, badgeNode] }));
+    if (asChild) {
+        return renderSlot(withBadge(children, badgeNode), {
+            ...commonProps,
+            ref: ref,
+            'aria-disabled': disabled || loading ? true : undefined,
+        });
+    }
+    return (_jsx("button", { ref: ref, type: type, ...commonProps, disabled: disabled || loading, children: content }));
 });