@orcestr/ui 0.0.3 → 0.1.0

package/dist/components/Popover/Popover.js

@@ -1,16 +1,19 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useCallback, useEffect, useRef, } from 'react';
+import { cloneElement, Children, forwardRef, isValidElement, useCallback, useContext, useEffect, useRef, } from 'react';
 import { useDisclosure } from '../../hooks/useDisclosure';
 import {} from '../../hooks/useFloatingPosition';
 import { useFloatingLayer } from '../../hooks/useFloatingLayer';
 import { useOutsidePointerDown } from '../../hooks/useOutsidePointerDown';
+import { splitSystemProps } from '../../theme/systemProps';
+import { OrcestrThemeContext } from '../../theme/useTheme';
 import { composeRefs } from '../../utils/composeRefs';
 import { cn } from '../../utils/cn';
-import { useOverlayContext, useOverlayLayerIndex } from '../Overlay/OverlayProvider';
+import { overlayLayerZIndex, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
 import { Portal } from '../Portal/Portal';
-export function Popover({ trigger, children, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, matchTriggerWidth = false, disabled = false, className, testId, }) {
+export function Popover({ trigger, children, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, matchTriggerWidth = false, disabled = false, className, contentStyle, contentRef: externalContentRef, style: contentStyleProp, onOpenAutoFocus, onInteractOutside, testId, ...props }) {
     const overlay = useOverlayContext();
+    const themeContext = useContext(OrcestrThemeContext);
     const disclosure = useDisclosure({ open, defaultOpen, onOpenChange });
     const { open: isOpen, close: closeDisclosure, toggle } = disclosure;
     const previousFocusRef = useRef(null);
@@ -22,12 +25,19 @@ export function Popover({ trigger, children, open, defaultOpen, onOpenChange, si
         collisionPadding,
         matchTriggerWidth,
     });
-    const close = useCallback(() => closeDisclosure(), [closeDisclosure]);
     const layerIndex = useOverlayLayerIndex(present);
-    useOutsidePointerDown([triggerRef, contentRef], isOpen, close);
+    const { systemStyle, restProps } = splitSystemProps(props);
+    const handleOutsidePointerDown = useCallback((event) => {
+        onInteractOutside?.(event);
+        if (event.defaultPrevented)
+            return;
+        closeDisclosure();
+    }, [closeDisclosure, onInteractOutside]);
+    useOutsidePointerDown([triggerRef, contentRef], isOpen, handleOutsidePointerDown);
     useEffect(() => {
         if (!isOpen)
             return;
+        onOpenAutoFocus?.({ preventDefault: () => undefined });
         previousFocusRef.current =
             document.activeElement instanceof HTMLElement ? document.activeElement : null;
         const onKeyDown = (event) => {
@@ -41,7 +51,7 @@ export function Popover({ trigger, children, open, defaultOpen, onOpenChange, si
             document.removeEventListener('keydown', onKeyDown, true);
             previousFocusRef.current?.focus?.();
         };
-    }, [closeDisclosure, isOpen]);
+    }, [closeDisclosure, isOpen, onOpenAutoFocus]);
     const handleTriggerClick = useCallback((event) => {
         if (event.defaultPrevented || disabled)
             return;
@@ -63,11 +73,48 @@ export function Popover({ trigger, children, open, defaultOpen, onOpenChange, si
                     toggle();
                 }
             }, children: trigger }));
-    return (_jsxs(_Fragment, { children: [triggerNode, present ? (_jsx(Portal, { children: _jsx("div", { ref: contentRef, className: cn('oui-popover-content', className), "data-state": state, "data-layer": 'dropdown', "data-testid": testId ? `${testId}-content` : undefined, style: {
+    return (_jsxs(_Fragment, { children: [triggerNode, present ? (_jsx(Portal, { children: _jsx("div", { ref: composeRefs(contentRef, externalContentRef), className: cn('oui-popover-content', className), "data-state": state, "data-layer": 'dropdown', "data-oui-theme": themeContext?.mode, "data-oui-surface": themeContext?.surface, "data-testid": testId ? `${testId}-content` : undefined, style: {
+                        ...themeContext?.cssVariables,
                         ...style,
-                        zIndex: overlay.zIndex.dropdown + layerIndex * 10,
-                    }, children: children }) })) : null] }));
+                        ...systemStyle,
+                        ...contentStyle,
+                        ...contentStyleProp,
+                        zIndex: overlayLayerZIndex(overlay.zIndex, 'dropdown', layerIndex),
+                    }, ...restProps, children: children }) })) : null] }));
+}
+function PopoverRoot({ children, ...props }) {
+    const trigger = findPopoverChild(children, PopoverTrigger);
+    const content = findPopoverChild(children, PopoverContent);
+    if (!trigger || !content)
+        return null;
+    const { children: contentChildren, width, size: _size, ref: contentRef, ...contentProps } = content.props;
+    return (_jsx(Popover, { ...props, ...contentProps, w: width, contentRef: contentRef, trigger: trigger.props.children, children: contentChildren }));
+}
+function PopoverTrigger(_props) {
+    return null;
+}
+const PopoverContent = forwardRef(function PopoverContent(_props, _ref) {
+    return null;
+});
+function findPopoverChild(children, type) {
+    let found = null;
+    Children.forEach(children, (child) => {
+        if (!found && isValidElement(child) && child.type === type) {
+            found = child;
+        }
+    });
+    return found;
 }
+Object.assign(Popover, {
+    Root: PopoverRoot,
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+});
+(function (Popover) {
+    Popover.Root = PopoverRoot;
+    Popover.Trigger = PopoverTrigger;
+    Popover.Content = PopoverContent;
+})(Popover || (Popover = {}));
 function clonePopoverTrigger(trigger, { ref, open, disabled, testId, onClick, }) {
     return cloneElement(trigger, {
         ref: composeRefs(trigger.props.ref, ref),

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -10,6 +10,8 @@ export type ScrollHighlightConfig = {
     maxOpacity?: number;
 };
 export type ScrollAreaProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
+    scrollbars?: 'vertical' | 'horizontal' | 'both';
+    type?: 'auto' | 'always' | 'scroll' | 'hover';
     highlights?: boolean;
     highlightH?: number | string;
     highlightColor?: string;
@@ -22,6 +24,8 @@ export type ScrollAreaProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
     testId?: string;
 };
 export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SystemProps & {
+    scrollbars?: "vertical" | "horizontal" | "both";
+    type?: "auto" | "always" | "scroll" | "hover";
     highlights?: boolean;
     highlightH?: number | string;
     highlightColor?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,wBAAwB,EAChC,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,qBAAqB,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACzD,WAAW,GAAG;IACV,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,UAAU;iBAZF,OAAO;iBACP,MAAM,GAAG,MAAM;qBACX,MAAM;uBACJ,OAAO;qBACT,MAAM;4BACC,MAAM;0BACR,MAAM;mBACb,qBAAqB;sBAClB,qBAAqB;aAC9B,MAAM;kDA4KtB,CAAC"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,wBAAwB,EAChC,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,qBAAqB,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACzD,WAAW,GAAG;IACV,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,UAAU;iBAdF,UAAU,GAAG,YAAY,GAAG,MAAM;WACxC,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO;iBAChC,OAAO;iBACP,MAAM,GAAG,MAAM;qBACX,MAAM;uBACJ,OAAO;qBACT,MAAM;4BACC,MAAM;0BACR,MAAM;mBACb,qBAAqB;sBAClB,qBAAqB;aAC9B,MAAM;kDAuNtB,CAAC"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -4,13 +4,14 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRe
 import { cn } from '../../utils/cn';
 import { splitSystemProps } from '../../theme/systemProps';
 import { BottomHighlight, TopHighlight } from '../Highlight/Highlight';
-export const ScrollArea = forwardRef(function ScrollArea({ className, style, children, highlights = false, highlightH = 32, highlightColor, highlightVisible = true, highlightStart = 0, highlightFadeDistance = 100, highlightMaxOpacity = 1, highlightTop, highlightBottom, testId, ...props }, ref) {
+export const ScrollArea = forwardRef(function ScrollArea({ className, style, children, highlights = false, highlightH = 32, highlightColor, highlightVisible = true, highlightStart = 0, highlightFadeDistance = 100, highlightMaxOpacity = 1, highlightTop, highlightBottom, scrollbars = 'both', type = 'auto', testId, ...props }, ref) {
     const { systemStyle, restProps } = splitSystemProps(props);
     const { onScroll, ...outerProps } = restProps;
     const showHighlights = highlights && highlightVisible;
     const scrollRef = useRef(null);
     const frameRef = useRef(null);
     const [opacity, setOpacity] = useState({ top: 0, bottom: 0 });
+    const [overflow, setOverflow] = useState({ x: false, y: false });
     const topConfig = useMemo(() => normalizeHighlightConfig({
         h: highlightH,
         color: highlightColor,
@@ -46,8 +47,24 @@ export const ScrollArea = forwardRef(function ScrollArea({ className, style, chi
     useImperativeHandle(ref, () => scrollRef.current, []);
     const updateOpacity = useCallback(() => {
         const node = scrollRef.current;
-        if (!node || !showHighlights) {
-            setOpacity({ top: 0, bottom: 0 });
+        if (!node) {
+            setOpacity((current) => current.top === 0 && current.bottom === 0
+                ? current
+                : { top: 0, bottom: 0 });
+            setOverflow((current) => !current.x && !current.y ? current : { x: false, y: false });
+            return;
+        }
+        const nextOverflow = {
+            x: node.scrollWidth > node.clientWidth + 1,
+            y: node.scrollHeight > node.clientHeight + 1,
+        };
+        setOverflow((current) => current.x === nextOverflow.x && current.y === nextOverflow.y
+            ? current
+            : nextOverflow);
+        if (!showHighlights) {
+            setOpacity((current) => current.top === 0 && current.bottom === 0
+                ? current
+                : { top: 0, bottom: 0 });
             return;
         }
         const maxScroll = Math.max(0, node.scrollHeight - node.clientHeight);
@@ -79,6 +96,9 @@ export const ScrollArea = forwardRef(function ScrollArea({ className, style, chi
         const observer = typeof ResizeObserver === 'undefined'
             ? null
             : new ResizeObserver(scheduleUpdate);
+        const mutationObserver = typeof MutationObserver === 'undefined'
+            ? null
+            : new MutationObserver(scheduleUpdate);
         observer?.observe(node);
         Array.from(node.children).forEach((child) => {
             if (child instanceof HTMLElement &&
@@ -86,9 +106,15 @@ export const ScrollArea = forwardRef(function ScrollArea({ className, style, chi
                 observer?.observe(child);
             }
         });
+        mutationObserver?.observe(node, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
         window.addEventListener('resize', scheduleUpdate);
         return () => {
             observer?.disconnect();
+            mutationObserver?.disconnect();
             window.removeEventListener('resize', scheduleUpdate);
             if (frameRef.current !== null) {
                 window.cancelAnimationFrame(frameRef.current);
@@ -96,7 +122,7 @@ export const ScrollArea = forwardRef(function ScrollArea({ className, style, chi
             }
         };
     }, [scheduleUpdate]);
-    return (_jsxs("div", { className: cn('oui-scroll-area', className), "data-testid": testId, style: { ...systemStyle, ...style }, ...outerProps, children: [_jsx("div", { ref: scrollRef, className: 'oui-scroll-area-viewport', "data-testid": testId ? `${testId}-viewport` : undefined, onScroll: (event) => {
+    return (_jsxs("div", { className: cn('oui-scroll-area', className), "data-scrollbars": scrollbars, "data-type": type, "data-overflow-x": overflow.x ? 'true' : undefined, "data-overflow-y": overflow.y ? 'true' : undefined, "data-testid": testId, style: { ...systemStyle, ...style }, ...outerProps, children: [_jsx("div", { ref: scrollRef, className: 'oui-scroll-area-viewport', "data-testid": testId ? `${testId}-viewport` : undefined, onScroll: (event) => {
                     onScroll?.(event);
                     scheduleUpdate();
                 }, children: children }), showHighlights ? (_jsxs("div", { className: 'oui-scroll-area-highlight-overlay', "aria-hidden": 'true', children: [topConfig.visible ? (_jsx(TopHighlight, { h: topConfig.h, color: topConfig.color, style: { opacity: opacity.top } })) : null, bottomConfig.visible ? (_jsx(BottomHighlight, { h: bottomConfig.h, color: bottomConfig.color, style: { opacity: opacity.bottom } })) : null] })) : null] }));

package/dist/components/Section/Section.d.ts

@@ -5,6 +5,8 @@ export type SectionProps = FlexProps & {
     testId?: string;
 };
 export declare const Section: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../..").SystemProps & {
+    as?: import("react").ElementType;
+    asChild?: boolean;
     testId?: string;
 } & {
     sectionColor?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/components/Section/Section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,cAAc,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAaF,eAAO,MAAM,OAAO;;;mBAhBD,MAAM;qBACJ,MAAM,GAAG,MAAM;aACvB,MAAM;kDAuCjB,CAAC"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/components/Section/Section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,cAAc,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAaF,eAAO,MAAM,OAAO;;;;;mBAhBD,MAAM;qBACJ,MAAM,GAAG,MAAM;aACvB,MAAM;kDAuCjB,CAAC"}

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,13 +1,36 @@
+import { type ReactNode } from 'react';
+import type { UiSize } from '../../theme/systemProps';
 export type SegmentedControlItem = {
     value: string;
     label: string;
     disabled?: boolean;
 };
-export declare function SegmentedControl({ value, onValueChange, items, className, testId, }: {
+export declare function SegmentedControl({ value, onValueChange, items, size, className, testId, }: {
     value: string;
     onValueChange: (value: string) => void;
     items: ReadonlyArray<SegmentedControlItem>;
+    size?: UiSize;
     className?: string;
     testId?: string;
 }): import("react/jsx-runtime").JSX.Element;
+type SegmentedRootProps = {
+    value: string;
+    onValueChange: (value: string) => void;
+    children: ReactNode;
+    size?: UiSize;
+    className?: string;
+    testId?: string;
+};
+type SegmentedItemProps = {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode;
+};
+declare function SegmentedRoot({ value, onValueChange, children, size, className, testId, }: SegmentedRootProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedItem(_props: SegmentedItemProps): null;
+export declare namespace SegmentedControl {
+    const Root: typeof SegmentedRoot;
+    const Item: typeof SegmentedItem;
+}
+export {};
 //# sourceMappingURL=SegmentedControl.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,KAAK,EACL,aAAa,EACb,KAAK,EACL,SAAS,EACT,MAAM,GACT,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAkBA"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAGpD,MAAM,MAAM,oBAAoB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,KAAK,EACL,aAAa,EACb,KAAK,EACL,IAAI,EACJ,SAAS,EACT,MAAM,GACT,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAkBA;AAED,KAAK,kBAAkB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,iBAAS,aAAa,CAAC,EACnB,KAAK,EACL,aAAa,EACb,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,MAAM,GACT,EAAE,kBAAkB,2CAsBpB;AAED,iBAAS,aAAa,CAAC,MAAM,EAAE,kBAAkB,QAEhD;AAOD,yBAAiB,gBAAgB,CAAC;IACvB,MAAM,IAAI,sBAAgB,CAAC;IAC3B,MAAM,IAAI,sBAAgB,CAAC;CACrC"}

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,6 +1,32 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
 import { cn } from '../../utils/cn';
-export function SegmentedControl({ value, onValueChange, items, className, testId, }) {
-    return (_jsx("div", { className: cn('oui-segmented', className), "data-testid": testId, children: items.map((item) => (_jsx("button", { type: 'button', className: 'oui-segmented-item', "data-active": value === item.value ? 'true' : undefined, "data-testid": testId ? `${testId}-${item.value}` : undefined, disabled: item.disabled, onClick: () => onValueChange(item.value), children: item.label }, item.value))) }));
+export function SegmentedControl({ value, onValueChange, items, size, className, testId, }) {
+    return (_jsx("div", { className: cn('oui-segmented', className), "data-size": size, "data-testid": testId, children: items.map((item) => (_jsx("button", { type: 'button', className: 'oui-segmented-item', "data-active": value === item.value ? 'true' : undefined, "data-testid": testId ? `${testId}-${item.value}` : undefined, disabled: item.disabled, onClick: () => onValueChange(item.value), children: item.label }, item.value))) }));
 }
+function SegmentedRoot({ value, onValueChange, children, size, className, testId, }) {
+    const items = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child) || child.type !== SegmentedItem)
+            return;
+        const props = child.props;
+        items.push({
+            value: props.value,
+            label: String(props.children ?? ''),
+            disabled: props.disabled,
+        });
+    });
+    return (_jsx(SegmentedControl, { value: value, onValueChange: onValueChange, items: items, size: size, className: className, testId: testId }));
+}
+function SegmentedItem(_props) {
+    return null;
+}
+Object.assign(SegmentedControl, {
+    Root: SegmentedRoot,
+    Item: SegmentedItem,
+});
+(function (SegmentedControl) {
+    SegmentedControl.Root = SegmentedRoot;
+    SegmentedControl.Item = SegmentedItem;
+})(SegmentedControl || (SegmentedControl = {}));

package/dist/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
-import type { UiSize } from '../../theme/systemProps';
+import { type CSSProperties, type ReactNode } from 'react';
+import { type SystemProps, type UiSize } from '../../theme/systemProps';
 export type SelectItem<V extends string = string> = {
     value: V;
     label: ReactNode;
@@ -7,7 +7,7 @@ export type SelectItem<V extends string = string> = {
     triggerLabel?: ReactNode;
     disabled?: boolean;
 };
-export declare function Select<V extends string = string>({ items, value, onValueChange, placeholder, selectedFallbackLabel, clearable, disabled, emptyText, size, maxHeight, onClear, className, showChevron, clearLabel, testId, }: {
+export declare function Select<V extends string = string>({ items, value, onValueChange, placeholder, selectedFallbackLabel, clearable, disabled, emptyText, size, maxHeight, onClear, className, style, showChevron, clearLabel, testId, ...props }: {
     items: ReadonlyArray<SelectItem<V>>;
     value: V | null;
     onValueChange: (value: V | null) => void;
@@ -20,8 +20,40 @@ export declare function Select<V extends string = string>({ items, value, onValu
     maxHeight?: number;
     onClear?: () => void;
     className?: string;
+    style?: CSSProperties;
     showChevron?: boolean;
     clearLabel?: string;
     testId?: string;
-}): import("react/jsx-runtime").JSX.Element;
+} & SystemProps): import("react/jsx-runtime").JSX.Element;
+type SelectRootProps<V extends string = string> = {
+    value: V | null;
+    onValueChange?: (value: V) => void;
+    disabled?: boolean;
+    children: ReactNode;
+};
+type SelectTriggerProps = {
+    placeholder?: string;
+    style?: CSSProperties;
+    width?: number | string;
+    size?: UiSize;
+};
+type SelectContentProps = {
+    children: ReactNode;
+};
+type SelectItemProps<V extends string = string> = {
+    value: V;
+    disabled?: boolean;
+    children: ReactNode;
+};
+declare function SelectRoot<V extends string = string>({ value, onValueChange, disabled, children, }: SelectRootProps<V>): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger(_props: SelectTriggerProps): null;
+declare function SelectContent(_props: SelectContentProps): null;
+declare function SelectItem<V extends string = string>(_props: SelectItemProps<V>): null;
+export declare namespace Select {
+    const Root: typeof SelectRoot;
+    const Trigger: typeof SelectTrigger;
+    const Content: typeof SelectContent;
+    const Item: typeof SelectItem;
+}
+export {};
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAKpD,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAChD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC9C,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,qBAAqB,EACrB,SAAiB,EACjB,QAAgB,EAChB,SAAS,EACT,IAAQ,EACR,SAAe,EACf,OAAO,EACP,SAAS,EACT,WAAkB,EAClB,UAAU,EACV,MAAM,GACT,EAAE;IACC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAoNA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/Select.js

@@ -1,13 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState, Children, isValidElement, } from 'react';
 import { LuCheck, LuChevronsUpDown, LuX } from 'react-icons/lu';
 import { Button } from '../Button/Button';
 import { Popover } from '../Popover/Popover';
+import { splitSystemProps } from '../../theme/systemProps';
 import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { useListNavigation } from '../../hooks/useListNavigation';
 import { useTypeahead } from '../../hooks/useTypeahead';
-export function Select({ items, value, onValueChange, placeholder, selectedFallbackLabel, clearable = false, disabled = false, emptyText, size = 3, maxHeight = 280, onClear, className, showChevron = true, clearLabel, testId, }) {
+export function Select({ items, value, onValueChange, placeholder, selectedFallbackLabel, clearable = false, disabled = false, emptyText, size = 3, maxHeight = 280, onClear, className, style, showChevron = true, clearLabel, testId, ...props }) {
     const { copy } = useOrcestrUiLocale();
     const actualPlaceholder = placeholder ?? copy.common.selectValue;
     const actualEmptyText = emptyText ?? copy.common.noOptions;
@@ -89,11 +90,12 @@ export function Select({ items, value, onValueChange, placeholder, selectedFallb
     const hasSelectedValue = value !== null;
     const canClear = clearable && hasSelectedValue && !disabled;
     const triggerLabel = selected?.triggerLabel ?? selected?.label ?? selectedFallbackLabel ?? null;
+    const { systemStyle } = splitSystemProps(props);
     return (_jsx(Popover, { open: open, onOpenChange: (next) => {
             setOpen(next);
             if (!next)
                 navigation.reset();
-        }, trigger: _jsx(Button, { type: 'button', v: 'surface', size: size, disabled: disabled, fullWidth: true, pressAnimation: 'none', className: 'oui-combobox-trigger', "data-state": open ? 'open' : 'closed', testId: testId, "aria-haspopup": 'listbox', "aria-expanded": open, "aria-controls": listboxId, onKeyDown: handleKeyDown, rightIcon: _jsxs("span", { className: 'oui-combobox-trigger-actions', children: [canClear ? (_jsx("span", { "aria-label": clearLabel ?? copy.common.clear, className: 'oui-combobox-clear', onPointerDown: (event) => {
+        }, trigger: _jsx(Button, { type: 'button', v: 'surface', size: size, disabled: disabled, fullWidth: true, pressAnimation: 'none', className: 'oui-combobox-trigger', "data-state": open ? 'open' : 'closed', testId: testId, style: { ...systemStyle, ...style }, "aria-haspopup": 'listbox', "aria-expanded": open, "aria-controls": listboxId, onKeyDown: handleKeyDown, rightIcon: _jsxs("span", { className: 'oui-combobox-trigger-actions', children: [canClear ? (_jsx("span", { "aria-label": clearLabel ?? copy.common.clear, className: 'oui-combobox-clear', onPointerDown: (event) => {
                             event.preventDefault();
                             event.stopPropagation();
                         }, onClick: (event) => {
@@ -117,6 +119,71 @@ export function Select({ items, value, onValueChange, placeholder, selectedFallb
                     }, children: [_jsx("span", { className: 'oui-combobox-option-main', children: item.label }), isSelected ? (_jsx(LuCheck, { className: 'oui-combobox-check', size: 15 })) : null] }, item.value));
             })) }) }));
 }
+function SelectRoot({ value, onValueChange, disabled, children, }) {
+    const trigger = findChild(children, SelectTrigger);
+    const content = findChild(children, SelectContent);
+    const items = collectSelectItems(content?.props.children);
+    const triggerStyle = {
+        ...trigger?.props.style,
+        width: trigger?.props.width,
+    };
+    return (_jsx(Select, { items: items, value: value, onValueChange: (next) => {
+            if (next !== null)
+                onValueChange?.(next);
+        }, disabled: disabled, placeholder: trigger?.props.placeholder, size: trigger?.props.size, style: triggerStyle }));
+}
+function SelectTrigger(_props) {
+    return null;
+}
+function SelectContent(_props) {
+    return null;
+}
+function SelectItem(_props) {
+    return null;
+}
+function collectSelectItems(children) {
+    const items = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child))
+            return;
+        if (child.type === SelectItem) {
+            const props = child.props;
+            items.push({
+                value: props.value,
+                label: props.children,
+                disabled: props.disabled,
+            });
+        }
+        else {
+            const props = child.props;
+            if (props && 'children' in props) {
+                items.push(...collectSelectItems(props.children));
+            }
+        }
+    });
+    return items;
+}
+function findChild(children, type) {
+    let found = null;
+    Children.forEach(children, (child) => {
+        if (!found && isValidElement(child) && child.type === type) {
+            found = child;
+        }
+    });
+    return found;
+}
+Object.assign(Select, {
+    Root: SelectRoot,
+    Trigger: SelectTrigger,
+    Content: SelectContent,
+    Item: SelectItem,
+});
+(function (Select) {
+    Select.Root = SelectRoot;
+    Select.Trigger = SelectTrigger;
+    Select.Content = SelectContent;
+    Select.Item = SelectItem;
+})(Select || (Select = {}));
 function labelText(item) {
     if (item.searchText)
         return item.searchText;

package/dist/components/Separator/Separator.d.ts

@@ -1,4 +1,6 @@
-export declare function Separator({ orientation, className, testId, }: {
+import type { HTMLAttributes } from 'react';
+import { type SystemProps } from '../../theme/systemProps';
+export declare function Separator({ orientation, className, style, testId, ...props }: HTMLAttributes<HTMLSpanElement> & SystemProps & {
     orientation?: 'horizontal' | 'vertical';
     className?: string;
     testId?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AAEA,wBAAgB,SAAS,CAAC,EACtB,WAA0B,EAC1B,SAAS,EACT,MAAM,GACT,EAAE;IACC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAUA"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,wBAAgB,SAAS,CAAC,EACtB,WAA0B,EAC1B,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,eAAe,CAAC,GAAG,WAAW,GAAG;IAC/C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAaA"}

package/dist/components/Separator/Separator.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { splitSystemProps } from '../../theme/systemProps';
 import { cn } from '../../utils/cn';
-export function Separator({ orientation = 'horizontal', className, testId, }) {
-    return (_jsx("span", { className: cn('oui-separator', className), "data-orientation": orientation, "data-testid": testId, role: 'separator', "aria-orientation": orientation }));
+export function Separator({ orientation = 'horizontal', className, style, testId, ...props }) {
+    const { systemStyle, restProps } = splitSystemProps(props);
+    return (_jsx("span", { className: cn('oui-separator', className), "data-orientation": orientation, "data-testid": testId, role: 'separator', "aria-orientation": orientation, style: { ...systemStyle, ...style }, ...restProps }));
 }

package/dist/components/SpecialModal/SpecialModal.d.ts

@@ -0,0 +1,43 @@
+import { type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from 'react';
+import { type ModalProps } from '../Modal/Modal';
+export type SpecialModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type SpecialModalScroll = 'body' | 'content';
+export type SpecialModalDensity = 'regular' | 'compact';
+export type SpecialModalProps = Omit<ModalProps, 'maxWidth'> & {
+    size?: SpecialModalSize;
+    maxW?: number | string;
+    scroll?: SpecialModalScroll;
+    density?: SpecialModalDensity;
+};
+declare function SpecialModalRoot({ size, maxW, scroll, density, className, contentClassName, children, ...props }: SpecialModalProps): import("react/jsx-runtime").JSX.Element;
+type SpecialModalPartProps = ComponentPropsWithoutRef<'div'> & {
+    testId?: string;
+};
+export type SpecialModalHeaderProps = SpecialModalPartProps & {
+    title?: ReactNode;
+    meta?: ReactNode;
+    actions?: ReactNode;
+};
+type SpecialModalCloseProps = Omit<ComponentPropsWithoutRef<'button'>, 'children'> & {
+    children?: ReactNode;
+};
+declare function SpecialModalClose({ className, children, 'aria-label': ariaLabel, ...props }: SpecialModalCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare const SpecialModal: typeof SpecialModalRoot & {
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        testId?: string;
+    } & {
+        title?: ReactNode;
+        meta?: ReactNode;
+        actions?: ReactNode;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        testId?: string;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        testId?: string;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Close: typeof SpecialModalClose;
+};
+export type SpecialModalContentStyle = CSSProperties;
+export {};
+//# sourceMappingURL=SpecialModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpecialModal.d.ts","sourceRoot":"","sources":["../../../src/components/SpecialModal/SpecialModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,aAAa,EAClB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,CAAC;AAExD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,OAAO,CAAC,EAAE,mBAAmB,CAAC;CACjC,CAAC;AAUF,iBAAS,gBAAgB,CAAC,EACtB,IAAW,EACX,IAAI,EACJ,MAAe,EACf,OAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,iBAAiB,2CAiBnB;AAED,KAAK,qBAAqB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,qBAAqB,GAAG;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AA4DF,KAAK,sBAAsB,GAAG,IAAI,CAC9B,wBAAwB,CAAC,QAAQ,CAAC,EAClC,UAAU,CACb,GAAG;IACA,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAmB,EACjC,GAAG,KAAK,EACX,EAAE,sBAAsB,2CAcxB;AAED,eAAO,MAAM,YAAY;;iBA/FZ,MAAM;;gBAIP,SAAS;eACV,SAAS;kBACN,SAAS;;;iBANV,MAAM;;;iBAAN,MAAM;;;CAoGjB,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,aAAa,CAAC"}

package/dist/components/SpecialModal/SpecialModal.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { LuX } from 'react-icons/lu';
+import { cn } from '../../utils/cn';
+import { Modal } from '../Modal/Modal';
+const sizeMaxWidth = {
+    sm: '420px',
+    md: '640px',
+    lg: '960px',
+    xl: 'min(1480px, calc(100vw - 48px))',
+    full: 'calc(100vw - 48px)',
+};
+function SpecialModalRoot({ size = 'lg', maxW, scroll = 'body', density = 'regular', className, contentClassName, children, ...props }) {
+    return (_jsx(Modal, { ...props, maxWidth: maxW ?? sizeMaxWidth[size], className: cn('oui-special-modal-layer', className), contentClassName: cn('oui-special-modal', `oui-special-modal-size-${size}`, `oui-special-modal-scroll-${scroll}`, `oui-special-modal-density-${density}`, contentClassName), children: children }));
+}
+const SpecialModalHeader = forwardRef(function SpecialModalHeader({ className, title, meta, actions, children, testId, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cn('oui-special-modal-header', className), "data-testid": testId, ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'oui-special-modal-title-wrap', children: [title ? (_jsx("h2", { className: 'oui-special-modal-title', children: title })) : null, meta ? (_jsx("div", { className: 'oui-special-modal-meta', children: meta })) : null] }), actions ? (_jsx("div", { className: 'oui-special-modal-actions', children: actions })) : null] })) }));
+});
+const SpecialModalBody = forwardRef(function SpecialModalBody({ className, testId, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cn('oui-special-modal-body', className), "data-testid": testId, ...props }));
+});
+const SpecialModalFooter = forwardRef(function SpecialModalFooter({ className, testId, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cn('oui-special-modal-footer', className), "data-testid": testId, ...props }));
+});
+function SpecialModalClose({ className, children, 'aria-label': ariaLabel = 'Close', ...props }) {
+    return (_jsx(Modal.Close, { ...props, className: cn('oui-icon-button oui-special-modal-close', className), "aria-label": ariaLabel, "data-size": '2', "data-variant": 'ghost', "data-tone": 'neutral', "data-round": 'true', children: children ?? _jsx(LuX, { size: 18 }) }));
+}
+export const SpecialModal = Object.assign(SpecialModalRoot, {
+    Header: SpecialModalHeader,
+    Body: SpecialModalBody,
+    Footer: SpecialModalFooter,
+    Close: SpecialModalClose,
+});

package/dist/components/Spinner/Spinner.d.ts

@@ -1,7 +1,9 @@
 import type { UiSize } from '../../theme/systemProps';
-export declare function Spinner({ size, className, testId, }: {
+import type { CSSProperties } from 'react';
+export declare function Spinner({ size, className, style, testId, }: {
     size?: UiSize;
     className?: string;
+    style?: CSSProperties;
     testId?: string;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAEpD,wBAAgB,OAAO,CAAC,EACpB,IAAQ,EACR,SAAS,EACT,MAAM,GACT,EAAE;IACC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAEA"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEzC,wBAAgB,OAAO,CAAC,EACpB,IAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,GACT,EAAE;IACC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAEA"}

package/dist/components/Spinner/Spinner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/cn';
-export function Spinner({ size = 2, className, testId, }) {
-    return _jsx("span", { className: cn('oui-spinner', className), "data-size": size, "data-testid": testId });
+export function Spinner({ size = 2, className, style, testId, }) {
+    return _jsx("span", { className: cn('oui-spinner', className), "data-size": size, "data-testid": testId, style: style });
 }