@bspk/ui 1.2.0 → 1.3.1

package/dist/components/TimeInput/TimeInput.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { SvgSchedule } from '@bspk/icons/Schedule';
-import { useEffect, useState } from 'react';
 import './time-input.css.js';
+import { SvgSchedule } from '@bspk/icons/Schedule';
+import { FocusTrap } from 'focus-trap-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TimeInputListbox } from './Listbox';
 import { TimeInputSegment } from './Segment';
 import { Button } from '../Button';
 import { Menu } from '../Menu';
+import { Portal } from '../Portal';
 import { useFloating } from '../../hooks/useFloating';
 import { useId } from '../../hooks/useId';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { handleKeyDown } from '../../utils/handleKeyDown';
-export const MINUTE_OPTIONS = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
-export const HOUR_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export const MINUTE_OPTIONS = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
+export const HOUR_OPTIONS = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
 export const MERIDIEM_OPTIONS = ['AM', 'PM'];
 /**
  * An input field that allows a customer to manually type in a specific time or triggers a time picker combobox to
@@ -35,32 +38,76 @@ export function TimeInput({ value, 'aria-label': ariaLabel, disabled, id: idProp
     useEffect(() => {
         setInputValue(`${hours?.toString().padStart(2, '0')}:${minutes?.toString().padStart(2, '0')} ${meridiem || ''}`.trim());
         if (hours !== undefined && minutes === undefined)
-            setMinutes(0);
+            setMinutes('00');
     }, [hours, minutes, meridiem]);
-    const [open, setOpen] = useState(false);
+    const [open, setOpenState] = useState(false);
     const { floatingStyles, elements } = useFloating({
         strategy: 'fixed',
         refWidth: true,
         offsetOptions: 4,
         hide: !open,
     });
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "aria-describedby": ariaErrorMessage || ariaDescribedBy || undefined, "data-aria-label": ariaLabel || undefined, "data-bspk": "time-input", "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-name": name || undefined, "data-open": open || undefined, "data-readonly": readOnly || undefined, "data-size": size || undefined, "data-value": inputValue || undefined, id: id, onClick: () => {
+    const setOpen = useCallback((nextOpen) => {
+        setOpenState(nextOpen);
+        if (!elements.reference || !buttonRef.current)
+            return;
+        // Focus the button when closing the menu
+        if (!nextOpen && open)
+            buttonRef.current.focus();
+        // Focus the hours listbox when opening the menu
+        if (nextOpen && !open)
+            elements.reference.querySelector('[data-scroll-column="hours"]')?.focus();
+    }, [elements?.reference, open]);
+    useOutsideClick({ elements: [elements.floating], callback: () => setOpen(false), disabled: !open });
+    const { hourOptions, minuteOptions, meridiemOptions } = useMemo(() => ({
+        hourOptions: HOUR_OPTIONS.map((h) => ({
+            id: `${id}-hours-${h}`,
+            value: h,
+            label: h.toString().padStart(2, '0'),
+        })),
+        minuteOptions: MINUTE_OPTIONS.map((m) => ({
+            id: `${id}-minutes-${m}`,
+            value: m,
+            label: m.toString().padStart(2, '0'),
+        })),
+        meridiemOptions: MERIDIEM_OPTIONS.map((m) => ({
+            id: `${id}-meridiem-${m}`,
+            value: m,
+            label: m,
+        })),
+    }), [id]);
+    const listBoxRefs = useRef(null);
+    const buttonRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "aria-describedby": ariaErrorMessage || ariaDescribedBy || undefined, "data-aria-label": ariaLabel || undefined, "data-bspk": "time-input", "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-name": name || undefined, "data-open": open || undefined, "data-readonly": readOnly || undefined, "data-size": size || undefined, "data-value": inputValue || undefined, id: id, onClickCapture: () => {
                     elements.reference?.querySelector('[tabIndex]')?.focus();
-                }, onKeyDown: handleKeyDown({ Escape: () => setOpen(false) }), ref: elements.setReference, role: "group", children: [_jsx(TimeInputSegment, { ariaLabel: ariaLabel, defaultValue: hours, disabled: disabled, name: `${name}-hours`, onChange: (next) => setHours(next || undefined), readOnly: readOnly, type: "hours" }), _jsx("span", { "aria-hidden": "true", children: ":" }), _jsx(TimeInputSegment, { ariaLabel: ariaLabel, defaultValue: minutes, disabled: disabled, name: `${name}-minutes`, onChange: (next) => setMinutes(next || undefined), readOnly: readOnly, type: "minutes" }), _jsx(TimeInputSegment, { ariaLabel: ariaLabel, defaultValue: meridiem, disabled: disabled, name: `${name}-meridiem`, onChange: (next) => setMeridiem(next || 'AM'), readOnly: readOnly, type: "meridiem" }), _jsx(Button, { icon: _jsx(SvgSchedule, {}), iconOnly: true, label: `${open ? 'Close' : 'Open'} Time Picker`, onClick: () => {
-                            setOpen(!open);
-                            elements.reference?.focus();
-                        }, variant: "tertiary" })] }), !!open && (_jsx(Menu, { floating: true, innerRef: (node) => {
-                    if (!node)
-                        return;
-                    elements.setFloating(node);
-                    node.querySelector('[data-scroll-column="hours"]')?.focus();
-                }, onOutsideClick: () => {
-                    setOpen(false);
-                }, owner: "time-input", scroll: false, style: { ...floatingStyles }, children: _jsxs("div", { "data-scroll-values": true, children: [_jsx(TimeInputListbox, { onSelect: setHours, options: HOUR_OPTIONS.map((h) => h), selectedValue: hours, type: "hours" }), _jsx(TimeInputListbox, { onSelect: setMinutes, options: MINUTE_OPTIONS, selectedValue: minutes, type: "minutes" }), _jsx(TimeInputListbox, { onSelect: setMeridiem, onTab: (e) => {
-                                e.preventDefault();
-                                setOpen(false);
-                                setTimeout(() => elements.reference?.focus(), 10);
-                                // Focus back on the input after closing
-                            }, options: MERIDIEM_OPTIONS, selectedValue: meridiem, type: "meridiem" })] }) }))] }));
+                }, onKeyDownCapture: handleKeyDown({ Escape: () => setOpen(false) }), ref: (node) => {
+                    elements.setReference(node);
+                }, role: "group", children: [_jsx(TimeInputSegment, { disabled: disabled, name: `${name}-hours`, onChange: (next) => setHours(next || undefined), readOnly: readOnly, type: "hours", value: hours }), _jsx("span", { "aria-hidden": "true", children: ":" }), _jsx(TimeInputSegment, { disabled: disabled, name: `${name}-minutes`, onChange: (next) => setMinutes(next || undefined), readOnly: readOnly, type: "minutes", value: minutes }), _jsx(TimeInputSegment, { disabled: disabled, name: `${name}-meridiem`, onChange: (next) => setMeridiem(next || 'AM'), readOnly: readOnly, type: "meridiem", value: meridiem }), _jsx(Button, { icon: _jsx(SvgSchedule, {}), iconOnly: true, innerRef: (node) => {
+                            buttonRef.current = node;
+                        }, label: `${open ? 'Close' : 'Open'} Time Picker`, onClick: () => setOpen(!open), variant: "tertiary" })] }), !!open && (_jsx(Portal, { children: _jsx(Menu, { innerRef: (node) => {
+                        if (!node)
+                            return;
+                        elements.setFloating(node);
+                    }, label: "Select time", owner: "time-input", style: floatingStyles, children: _jsx(FocusTrap, { focusTrapOptions: {
+                            fallbackFocus: () => listBoxRefs.current.hours,
+                            clickOutsideDeactivates: true,
+                        }, children: _jsxs("div", { "data-scroll-values": true, ref: (node) => {
+                                listBoxRefs.current = {
+                                    hours: node?.querySelector('[data-scroll-column="hours"]'),
+                                    minutes: node?.querySelector('[data-scroll-column="minutes"]'),
+                                    meridiem: node?.querySelector('[data-scroll-column="meridiem"]'),
+                                };
+                                listBoxRefs.current.hours?.focus();
+                            }, children: [_jsx(TimeInputListbox, { onSelect: (next) => {
+                                        setHours(next);
+                                        setTimeout(() => listBoxRefs.current?.minutes?.focus(), 10);
+                                    }, options: hourOptions, selectedValue: hours, type: "hours" }), _jsx(TimeInputListbox, { onSelect: (next) => {
+                                        setMinutes(next);
+                                        setTimeout(() => listBoxRefs.current?.meridiem?.focus(), 10);
+                                    }, options: minuteOptions, selectedValue: minutes, type: "minutes" }), _jsx(TimeInputListbox, { onSelect: (next) => {
+                                        setMeridiem(next);
+                                        setOpen(false);
+                                        setTimeout(() => buttonRef.current?.focus(), 10);
+                                    }, options: meridiemOptions, selectedValue: meridiem, type: "meridiem" })] }) }) }) }))] }));
 }
 //# sourceMappingURL=TimeInput.js.map

package/dist/components/TimeInput/TimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../../src/components/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../../src/components/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/TimeInput/time-input.css

@@ -80,11 +80,11 @@
   outline: 1px solid var(--stroke-neutral-focus);
 }
 
-[data-bspk-owner=time-input][data-bspk=menu] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] {
   overflow: hidden;
   height: 324px;
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -95,7 +95,7 @@
   gap: var(--spacing-sizing-04);
   padding: var(--spacing-sizing-04);
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] {
   padding: 0 var(--spacing-sizing-01);
   display: flex;
   flex-direction: column;
@@ -106,7 +106,7 @@
   align-items: center;
   justify-content: start;
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] span {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span {
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -117,19 +117,20 @@
   font: var(--labels-base);
   line-height: var(--spacing-sizing-10);
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] span[aria-selected] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span[aria-selected=true] {
   background: var(--surface-brand-primary);
   color: var(--foreground-brand-on-primary);
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus {
-  outline: none;
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus {
+  outline: 2px solid var(--stroke-neutral-focus);
+  border-radius: var(--radius-sm);
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active] {
   background: var(--interactions-neutral-hover-opacity);
   outline: 2px solid var(--interactions-neutral-hover-opacity);
   outline-offset: -2px;
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active][aria-selected] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active][aria-selected=true] {
   background: var(--surface-brand-primary);
   color: var(--foreground-brand-on-primary);
 }

package/dist/components/TimeInput/time-input.css.js

@@ -83,11 +83,11 @@ style.appendChild(document.createTextNode(`[data-bspk=time-input] {
   outline: 1px solid var(--stroke-neutral-focus);
 }
 
-[data-bspk-owner=time-input][data-bspk=menu] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] {
   overflow: hidden;
   height: 324px;
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -98,7 +98,7 @@ style.appendChild(document.createTextNode(`[data-bspk=time-input] {
   gap: var(--spacing-sizing-04);
   padding: var(--spacing-sizing-04);
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] {
   padding: 0 var(--spacing-sizing-01);
   display: flex;
   flex-direction: column;
@@ -109,7 +109,7 @@ style.appendChild(document.createTextNode(`[data-bspk=time-input] {
   align-items: center;
   justify-content: start;
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] span {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span {
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -120,19 +120,20 @@ style.appendChild(document.createTextNode(`[data-bspk=time-input] {
   font: var(--labels-base);
   line-height: var(--spacing-sizing-10);
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] span[aria-selected] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span[aria-selected=true] {
   background: var(--surface-brand-primary);
   color: var(--foreground-brand-on-primary);
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus {
-  outline: none;
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus {
+  outline: 2px solid var(--stroke-neutral-focus);
+  border-radius: var(--radius-sm);
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active] {
   background: var(--interactions-neutral-hover-opacity);
   outline: 2px solid var(--interactions-neutral-hover-opacity);
   outline-offset: -2px;
 }
-[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active][aria-selected] {
+[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active][aria-selected=true] {
   background: var(--surface-brand-primary);
   color: var(--foreground-brand-on-primary);
 }

package/dist/components/ToggleOption/ToggleOption.d.ts

@@ -1,10 +1,10 @@
-import { ReactElement } from 'react';
 import './toggle-option.scss';
+import { ReactElement } from 'react';
 import { CommonProps } from '-/types/common';
 export type ToggleOptionControlProps<T extends {
     'aria-label'?: string;
 }> = Omit<T, 'aria-label'> & Pick<ToggleOptionProps, 'description' | 'label'>;
-export type ToggleOptionProps = CommonProps<'disabled'> & {
+export type ToggleOptionProps = CommonProps<'disabled' | 'readOnly'> & {
     /**
      * The label of the option. Also used as the aria-label of the control.
      *
@@ -27,5 +27,5 @@ export type ToggleOptionProps = CommonProps<'disabled'> & {
  * @name ToggleOption
  * @phase Utility
  */
-export declare function ToggleOption({ label, description, children, disabled }: ToggleOptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleOption({ label, description, children, disabled, readOnly }: ToggleOptionProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ToggleOption/ToggleOption.js

@@ -6,7 +6,7 @@ import './toggle-option.css.js';
  * @name ToggleOption
  * @phase Utility
  */
-export function ToggleOption({ label, description, children, disabled }) {
-    return (_jsxs("label", { "aria-disabled": !!disabled || undefined, "data-bspk": "toggle-option", children: [_jsx("span", { "data-control": true, children: children }), _jsx("span", { "data-label": true, children: label }), description && _jsx("span", { "data-description": true, children: description })] }));
+export function ToggleOption({ label, description, children, disabled, readOnly }) {
+    return (_jsxs("label", { "aria-disabled": !!disabled || !!readOnly || undefined, "data-bspk": "toggle-option", children: [_jsx("span", { "data-control": true, children: children }), _jsx("span", { "data-label": true, children: label }), description && _jsx("span", { "data-description": true, children: description })] }));
 }
 //# sourceMappingURL=ToggleOption.js.map

package/dist/components/ToggleOption/ToggleOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleOption.js","sourceRoot":"","sources":["../../../src/components/ToggleOption/ToggleOption.tsx"],"names":[],"mappings":";AAEA,OAAO,sBAAsB,CAAC;AAwB9B;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAqB;IACtF,OAAO,CACH,kCAAsB,CAAC,CAAC,QAAQ,IAAI,SAAS,eAAY,eAAe,aACpE,+CAAoB,QAAQ,GAAQ,EACpC,6CAAkB,KAAK,GAAQ,EAC9B,WAAW,IAAI,mDAAwB,WAAW,GAAQ,IACvD,CACX,CAAC;AACN,CAAC"}
+{"version":3,"file":"ToggleOption.js","sourceRoot":"","sources":["../../../src/components/ToggleOption/ToggleOption.tsx"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAC;AAyB9B;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAqB;IAChG,OAAO,CACH,kCAAsB,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,SAAS,eAAY,eAAe,aAClF,+CAAoB,QAAQ,GAAQ,EACpC,6CAAkB,KAAK,GAAQ,EAC9B,WAAW,IAAI,mDAAwB,WAAW,GAAQ,IACvD,CACX,CAAC;AACN,CAAC"}

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

@@ -1,11 +1,12 @@
+import './tooltip.scss';
 import { ReactElement } from 'react';
 import { Placement } from '-/hooks/useFloating';
-import './tooltip.scss';
 export type TooltipTriggerProps = {
     onMouseOver?: () => void;
     onMouseLeave?: () => void;
     onFocus?: () => void;
-    'aria-describedby'?: string;
+    onBlur?: () => void;
+    'aria-labelledby'?: string;
 };
 export type TooltipProps = {
     /**
@@ -49,5 +50,5 @@ export type TooltipProps = {
  * @name Tooltip
  * @phase UXReview
  */
-export declare function Tooltip({ placement, label, children, disabled, showTail, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ placement, label, children, disabled, showTail }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Tooltip/Tooltip.js

@@ -1,14 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './tooltip.css.js';
 import { useRef, useState } from 'react';
 import { Portal } from '../Portal';
 import { useFloating } from '../../hooks/useFloating';
 import { useId } from '../../hooks/useId';
-import './tooltip.css.js';
-const DEFAULT = {
-    placement: 'top',
-    showTail: true,
-    disabled: false,
-};
 /**
  * Brief message that provide additional guidance and helps users perform an action if needed.
  *
@@ -27,7 +22,7 @@ const DEFAULT = {
  * @name Tooltip
  * @phase UXReview
  */
-export function Tooltip({ placement = DEFAULT.placement, label, children, disabled = DEFAULT.disabled, showTail = DEFAULT.showTail, }) {
+export function Tooltip({ placement = 'top', label, children, disabled = false, showTail = true }) {
     const id = useId();
     const [show, setShow] = useState(false);
     const arrowRef = useRef(null);
@@ -37,20 +32,19 @@ export function Tooltip({ placement = DEFAULT.placement, label, children, disabl
         offsetOptions: showTail ? 8 : 4,
         arrowRef,
         hide: !show,
+        refWidth: false,
     });
-    const child = children(disabled
-        ? {}
-        : {
-            onMouseOver: () => setShow(true),
-            onMouseLeave: () => setShow(false),
-            onFocus: () => setShow(true),
-            'aria-describedby': id,
-        });
     if (disabled)
-        return child;
-    return (_jsxs(_Fragment, { children: [child, label && (_jsx(Portal, { children: _jsxs("div", { "data-bspk": "tooltip", "data-placement": middlewareData?.offset?.placement, id: id, ref: (node) => {
+        return children({});
+    return (_jsxs(_Fragment, { children: [children({
+                onMouseOver: () => setShow(true),
+                onMouseLeave: () => setShow(false),
+                onFocus: () => setShow(true),
+                onBlur: () => setShow(false),
+                'aria-labelledby': id,
+            }), label && (_jsx(Portal, { children: _jsxs("div", { "data-bspk": "tooltip", "data-placement": middlewareData?.offset?.placement, id: id, ref: (node) => {
                         elements.setFloating(node);
-                        elements.setReference(document.querySelector(`[aria-describedby="${id}"]`));
+                        elements.setReference(document.querySelector(`[aria-labelledby="${id}"]`));
                     }, role: "tooltip", style: floatingStyles, children: [_jsx("span", { "data-text": true, children: label }), _jsx("span", { "aria-hidden": true, "data-arrow": true, ref: (node) => {
                                 arrowRef.current = node;
                             }, style: {

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,gBAAgB,CAAC;AAExB,MAAM,OAAO,GAAG;IACZ,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;CACT,CAAC;AAkCX;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,OAAO,CAAC,EACpB,SAAS,GAAG,OAAO,CAAC,SAAS,EAC7B,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,OAAO,CAAC,QAAQ,EAC3B,QAAQ,GAAG,OAAO,CAAC,QAAQ,GAChB;IACX,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;QAC7D,SAAS;QACT,QAAQ,EAAE,OAAO;QACjB,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,QAAQ;QACR,IAAI,EAAE,CAAC,IAAI;KACd,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,QAAQ,CAClB,QAAQ;QACJ,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC;YACI,WAAW,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;YAChC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;YAClC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;YAC5B,kBAAkB,EAAE,EAAE;SACzB,CACV,CAAC;IAEF,IAAI,QAAQ;QAAE,OAAO,KAAK,CAAC;IAE3B,OAAO,CACH,8BACK,KAAK,EACL,KAAK,IAAI,CACN,KAAC,MAAM,cACH,4BACc,SAAS,oBACH,cAAc,EAAE,MAAM,EAAE,SAAS,EACjD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;wBACV,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;wBAC3B,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAc,sBAAsB,EAAE,IAAI,CAAC,CAAC,CAAC;oBAC7F,CAAC,EACD,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,cAAc,aAErB,4CAAiB,KAAK,GAAQ,EAC9B,wDAGI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;gCACV,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;4BAC5B,CAAC,EACD,KAAK,EAAE;gCACH,MAAM,EAAE,gCAAgC;gCACxC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gCACzB,IAAI,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;gCAC3E,GAAG,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;6BAC7E,GACH,IACA,GACD,CACZ,IACF,CACN,CAAC;AACN,CAAC"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAgB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAmCtC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAgB;IAC3G,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;QAC7D,SAAS;QACT,QAAQ,EAAE,OAAO;QACjB,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,QAAQ;QACR,IAAI,EAAE,CAAC,IAAI;QACX,QAAQ,EAAE,KAAK;KAClB,CAAC,CAAC;IAEH,IAAI,QAAQ;QAAE,OAAO,QAAQ,CAAC,EAAE,CAAC,CAAC;IAElC,OAAO,CACH,8BACK,QAAQ,CAAC;gBACN,WAAW,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;gBAClC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;gBAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;gBAC5B,iBAAiB,EAAE,EAAE;aACxB,CAAC,EACD,KAAK,IAAI,CACN,KAAC,MAAM,cACH,4BACc,SAAS,oBACH,cAAc,EAAE,MAAM,EAAE,SAAS,EACjD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;wBACV,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;wBAC3B,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAc,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAC;oBAC5F,CAAC,EACD,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,cAAc,aAErB,4CAAiB,KAAK,GAAQ,EAC9B,wDAGI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;gCACV,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;4BAC5B,CAAC,EACD,KAAK,EAAE;gCACH,MAAM,EAAE,gCAAgC;gCACxC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gCACzB,IAAI,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;gCAC3E,GAAG,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;6BAC7E,GACH,IACA,GACD,CACZ,IACF,CACN,CAAC;AACN,CAAC"}

package/dist/components/Tooltip/TooltipExample.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '../Button';
 export const TooltipExample = {
     render: ({ props: state, Component }) => {
-        return (_jsx(_Fragment, { children: _jsx(Component, { ...state, placement: [state.placement].flat()[0] || 'top', children: (triggerProps) => (_jsx(Button, { label: `Hover over me ${'data-variant-value' in state ? `(${state['data-variant-value']})` : ''}`, variant: "secondary", ...triggerProps })) }) }));
+        return (_jsx(_Fragment, { children: _jsx(Component, { ...state, label: `Hover over me ${state.label || ''}`, placement: [state.placement].flat()[0] || 'top', children: (triggerProps) => _jsx(Button, { ...triggerProps, label: "Hover over me", variant: "secondary" }) }) }));
     },
 };
 //# sourceMappingURL=TooltipExample.js.map

package/dist/components/Tooltip/TooltipExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipExample.js","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QACpC,OAAO,CACH,4BACI,KAAC,SAAS,OAAK,KAAK,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YAChE,CAAC,YAAY,EAAE,EAAE,CAAC,CACf,KAAC,MAAM,IACH,KAAK,EAAE,iBAAiB,oBAAoB,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EACjG,OAAO,EAAC,WAAW,KACf,YAAY,GAClB,CACL,GACO,GACb,CACN,CAAC;IACN,CAAC;CACJ,CAAC"}
+{"version":3,"file":"TooltipExample.js","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QACpC,OAAO,CACH,4BACI,KAAC,SAAS,OACF,KAAK,EACT,KAAK,EAAE,iBAAiB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE,EAC3C,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YAE9C,CAAC,YAAY,EAAE,EAAE,CAAC,KAAC,MAAM,OAAK,YAAY,EAAE,KAAK,EAAC,eAAe,EAAC,OAAO,EAAC,WAAW,GAAG,GACjF,GACb,CACN,CAAC;IACN,CAAC;CACJ,CAAC"}

package/dist/components/Tooltip/tooltip.css

@@ -2,7 +2,6 @@
   position: fixed;
   pointer-events: none;
   z-index: var(--z-index-tooltip-popover);
-  width: max-content !important;
   --arrow-size: var(--spacing-sizing-01);
   --arrow-offset: calc(var(--arrow-size) * -2);
   --arrow-color: var(--surface-neutral-inverse);
@@ -19,7 +18,6 @@
   padding: var(--spacing-sizing-01) var(--spacing-sizing-02);
   border: none;
   transition: opacity 0.2s ease-in-out;
-  width: max-content;
 }
 [data-bspk=tooltip] [data-arrow] {
   display: block;

package/dist/components/Tooltip/tooltip.css.js

@@ -5,7 +5,6 @@ style.appendChild(document.createTextNode(`[data-bspk=tooltip] {
   position: fixed;
   pointer-events: none;
   z-index: var(--z-index-tooltip-popover);
-  width: max-content !important;
   --arrow-size: var(--spacing-sizing-01);
   --arrow-offset: calc(var(--arrow-size) * -2);
   --arrow-color: var(--surface-neutral-inverse);
@@ -22,7 +21,6 @@ style.appendChild(document.createTextNode(`[data-bspk=tooltip] {
   padding: var(--spacing-sizing-01) var(--spacing-sizing-02);
   border: none;
   transition: opacity 0.2s ease-in-out;
-  width: max-content;
 }
 [data-bspk=tooltip] [data-arrow] {
   display: block;

package/dist/components/Truncated/Truncated.d.ts

@@ -1,3 +1,4 @@
+import './truncated.scss';
 import { ElementType } from 'react';
 import { ElementConstructorProps } from '-/types/common';
 export type TruncatedProps<As extends ElementType = 'span'> = {

package/dist/components/Truncated/Truncated.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import './truncated.css.js';
 import { Tooltip } from '../Tooltip';
 import { useTruncatedText } from '../../hooks/useTruncatedText';
 /**
@@ -9,14 +10,7 @@ import { useTruncatedText } from '../../hooks/useTruncatedText';
  */
 export function Truncated({ children, label, ...props }) {
     const { setElement, isTruncated } = useTruncatedText();
-    const span = (triggerProps) => (_jsx("span", { ...props, "data-bspk-utility": "truncated", ref: (node) => setElement(node), style: {
-            maxWidth: '100%',
-            ...props.style,
-            display: 'inline-block',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-        }, ...triggerProps, children: children }));
+    const span = (triggerProps) => (_jsx("span", { ...props, "data-bspk-utility": "truncated", ref: (node) => setElement(node), ...triggerProps, role: isTruncated ? 'note' : props.role, children: children }));
     return isTruncated ? _jsx(Tooltip, { label: label || children, children: span }) : span({});
 }
 //# sourceMappingURL=Truncated.js.map

package/dist/components/Truncated/Truncated.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncated.js","sourceRoot":"","sources":["../../../src/components/Truncated/Truncated.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AA4B5D;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAkC,EACvD,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACmD;IAC3D,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEvD,MAAM,IAAI,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAChD,kBACQ,KAAK,uBACS,WAAW,EAC7B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAC/B,KAAK,EAAE;YACH,QAAQ,EAAE,MAAM;YAChB,GAAG,KAAK,CAAC,KAAK;YACd,OAAO,EAAE,cAAc;YACvB,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;YACxB,UAAU,EAAE,QAAQ;SACvB,KACG,YAAY,YAEf,QAAQ,GACN,CACV,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,IAAI,QAAQ,YAAG,IAAI,GAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxF,CAAC"}
+{"version":3,"file":"Truncated.js","sourceRoot":"","sources":["../../../src/components/Truncated/Truncated.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AA4B5D;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAkC,EACvD,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACmD;IAC3D,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEvD,MAAM,IAAI,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAChD,kBACQ,KAAK,uBACS,WAAW,EAC7B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,KAC3B,YAAY,EAChB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,YAEtC,QAAQ,GACN,CACV,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,IAAI,QAAQ,YAAG,IAAI,GAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxF,CAAC"}

package/dist/components/Truncated/truncated.css

@@ -0,0 +1,8 @@
+[data-bspk-utility=truncated] {
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: transparent;
+}

package/dist/components/Truncated/truncated.css.js

@@ -0,0 +1,13 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk-utility=truncated] {
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: transparent;
+}
+`));
+document.head.appendChild(style);

package/dist/components/UIProvider/AriaLiveMessageHandler.d.ts

@@ -0,0 +1,13 @@
+export declare function sendAriaLiveMessage(message: string, live?: 'assertive' | 'polite'): void;
+/**
+ * AriaLiveMessageHandler is a single use component that listens for aria-live messages and displays them to the user.
+ *
+ * We use a custom event to communicate between components and this handler.
+ *
+ * We don't store the message in context to avoid unnecessary re-renders of all components that consume the context. :)
+ *
+ * We queue messages to ensure that they are read by screen readers.
+ *
+ * After the message is read, we clear it after a short delay to allow for subsequent messages to be read.
+ */
+export declare function AriaLiveMessageHandler(): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/UIProvider/AriaLiveMessageHandler.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useEventListener } from '../../hooks/useAddEventListener';
+import { useTimeout } from '../../hooks/useTimeout';
+export function sendAriaLiveMessage(message, live = 'polite') {
+    document.dispatchEvent(new CustomEvent('aria-live', { detail: { message, live } }));
+}
+/**
+ * AriaLiveMessageHandler is a single use component that listens for aria-live messages and displays them to the user.
+ *
+ * We use a custom event to communicate between components and this handler.
+ *
+ * We don't store the message in context to avoid unnecessary re-renders of all components that consume the context. :)
+ *
+ * We queue messages to ensure that they are read by screen readers.
+ *
+ * After the message is read, we clear it after a short delay to allow for subsequent messages to be read.
+ */
+export function AriaLiveMessageHandler() {
+    const [ariaLiveMessage, setAriaLiveMessage] = useState(undefined);
+    const timeout = useTimeout();
+    useEventListener('aria-live', (event) => {
+        const { message, live } = event.detail;
+        // Clear any existing message to ensure that screen readers read the new message
+        setAriaLiveMessage(undefined);
+        timeout.set(() => setAriaLiveMessage({ message, live: live || 'polite' }), 10);
+    }, document);
+    return (ariaLiveMessage && (_jsx("div", { "aria-live": ariaLiveMessage?.live || 'polite', "data-sr-only": true, role: "alert", children: ariaLiveMessage?.message })));
+}
+//# sourceMappingURL=AriaLiveMessageHandler.js.map

package/dist/components/UIProvider/AriaLiveMessageHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AriaLiveMessageHandler.js","sourceRoot":"","sources":["../../../src/components/UIProvider/AriaLiveMessageHandler.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,UAAU,mBAAmB,CAAC,OAAe,EAAE,OAA+B,QAAQ;IACxF,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;AACxF,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,sBAAsB;IAClC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAA8B,SAAS,CAAC,CAAC;IAE/F,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,gBAAgB,CACZ,WAAW,EACX,CAAC,KAAkB,EAAE,EAAE;QACnB,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACvC,gFAAgF;QAChF,kBAAkB,CAAC,SAAS,CAAC,CAAC;QAC9B,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,IAAI,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACnF,CAAC,EACD,QAAQ,CACX,CAAC;IAEF,OAAO,CACH,eAAe,IAAI,CACf,2BAAgB,eAAe,EAAE,IAAI,IAAI,QAAQ,wBAAe,IAAI,EAAC,OAAO,YACvE,eAAe,EAAE,OAAO,GACvB,CACT,CACJ,CAAC;AACN,CAAC"}

package/dist/components/UIProvider/UIProvider.d.ts

@@ -1,10 +1,21 @@
 import { ReactNode } from 'react';
 export type UIProviderProps = {
+    /**
+     * The children elements that will have access to the UI context.
+     *
+     * @required
+     */
     children: ReactNode;
 };
 /**
- * UIProvider is a React context provider that manages the UI state, including theme and responsive state.
+ * UIProvider is a React context provider that manages the UI state.
+ *
+ * UI state includes, theme, setTheme, responsive state, aria live messages
+ *
+ * This provider should wrap the root of your application to ensure that all components have access to the UI context.
  *
  * @name UIProvider
+ *
+ * @phase Utility
  */
 export declare function UIProvider({ children }: UIProviderProps): import("react/jsx-runtime").JSX.Element;