@iress-oss/ids-components 6.0.0-alpha.0 → 6.0.0-alpha.1

package/dist/patterns/Shadow/index.js

@@ -0,0 +1,4 @@
+import { IressShadow as e } from "./Shadow.js";
+export {
+  e as IressShadow
+};

package/dist/src/components/Alert/Alert.d.ts

@@ -54,5 +54,4 @@ export interface IressAlertProps extends Omit<IressTextProps, 'element'> {
      */
     variant?: 'sidebar' | 'site-wide';
 }
-export declare const ALERT_ICONS: Record<SystemValidationStatuses, IressIconProps['name']>;
 export declare const IressAlert: ({ actions, children, className, defaultDismissed, dismissed: dismissedProp, footer, heading, icon: iconProp, onDismiss, status, variant, ...restProps }: IressAlertProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/Alert/Alert.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const alert: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "children" | "heading" | "action" | "alert" | "icon" | "wrapper" | "dismiss", {
+export declare const alert: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "alert" | "children" | "heading" | "icon" | "wrapper" | "action" | "dismiss", {
     status: {
         danger: {
             alert: {

package/dist/src/components/Autocomplete/Autocomplete.d.ts

@@ -5,7 +5,7 @@ import { ReactNode, SyntheticEvent } from 'react';
 import { InputRef } from '../Input/InputBase/InputBase';
 import { IressSelectMenuProps } from '../RichSelect';
 import { LabelValueMeta } from '../../interfaces';
-import { FormControlValue } from '../../main';
+import { FormControlValue } from '../../types';
 export interface IressAutocompleteProps<T extends FormControlValue = string> extends Omit<IressInputProps<T>, 'children' | 'onChange'>, Omit<AutocompleteSearchHookProps, 'query'>, Pick<IressSelectMenuProps, 'limitMobile' | 'limitDesktop'> {
     /**
      * Always shown on focus, even if the user has not interacted with the input.

package/dist/src/components/Autocomplete/hooks/useAutocompleteSearch.d.ts

@@ -1,4 +1,4 @@
-import { FormattedLabelValueMeta, LabelValueMeta } from '../../../main';
+import { FormattedLabelValueMeta, LabelValueMeta } from '../../../interfaces';
 export interface AutocompleteSearchHookProps {
     /**
      * Time in milliseconds to wait for before performing result search. Only applies to searchable options (function).

package/dist/src/components/Autocomplete/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Autocomplete';
+export * from './Autocomplete.styles';
 export * from './hooks/useAutocompleteSearch';

package/dist/src/components/Checkbox/Checkbox.d.ts

@@ -35,7 +35,9 @@ export interface IressCheckboxProps<T = FormControlValue> extends Omit<IressStyl
     required?: boolean;
     /**
      * Value of the checkbox when used in a checkbox group. The checked state of the checkbox will be overridden based on this value if used inside a checkbox group.
-     * **Note:** The value of the checkbox does not mean if its checked or not, use the checked property for that.
+     * **Note:**
+     * - The value of the checkbox does not mean if its checked or not, use the checked property for that.
+     * - If the value of the checkbox is true/false, and checked is undefined and not inside a CheckboxGroup, it will use this as the checked value. This ensures out-of-the-box compatibility with React Hook Form.
      */
     value?: T;
     /**

package/dist/src/components/Field/Field.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const field: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "label" | "element" | "root" | "hint" | "supplementary" | "labelContainer" | "fieldContainer", {
+export declare const field: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "label" | "hint" | "element" | "root" | "supplementary" | "labelContainer" | "fieldContainer", {
     horizontal: {
         true: {
             root: {
@@ -34,6 +34,13 @@ export declare const field: import('../../styled-system/types').SlotRecipeRuntim
             };
         };
     };
+    hasHint: {
+        true: {
+            label: {
+                mb: "spacing.000";
+            };
+        };
+    };
     hiddenLabel: {
         true: {
             label: {

package/dist/src/components/Field/FieldGroup/FieldGroup.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const fieldGroup: import('../../../styled-system/types').SlotRecipeRuntimeFn<"legend" | "root" | "hint" | "fields", {
+export declare const fieldGroup: import('../../../styled-system/types').SlotRecipeRuntimeFn<"legend" | "hint" | "root" | "fields", {
     hasError: {
         true: {
             root: {

package/dist/src/components/Label/Label.styles.d.ts

@@ -1 +1 @@
-export declare const label: import('../../styled-system/types').SlotRecipeRuntimeFn<"text" | "required" | "root", import('../../styled-system/types').SlotRecipeVariantRecord<"text" | "required" | "root">>;
+export declare const label: import('../../styled-system/types').SlotRecipeRuntimeFn<"text" | "root" | "required", import('../../styled-system/types').SlotRecipeVariantRecord<"text" | "root" | "required">>;

package/dist/src/components/Modal/Modal.styles.d.ts

@@ -13,6 +13,9 @@ export declare const modal: import('../../styled-system/types').SlotRecipeRuntim
                 display: "flex";
                 flexDirection: "column";
                 maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]";
+                '@media (min-height: 600px)': {
+                    maxHeight: "[calc(100vh - (100px * 2))]";
+                };
                 overflow: "clip";
             };
             content: {
@@ -20,6 +23,9 @@ export declare const modal: import('../../styled-system/types').SlotRecipeRuntim
                 overflowX: "hidden";
                 overflowY: "auto";
                 maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]";
+                '@media (min-height: 600px)': {
+                    maxHeight: "[calc(100vh - (100px * 2))]";
+                };
             };
             footer: {
                 flex: "[0]";

package/dist/src/components/Modal/ModalProvider.d.ts

@@ -1,20 +1,5 @@
 import { PropsWithChildren } from 'react';
 import { FloatingUIContainer } from '../../types';
-export interface ModalContextValue {
-    /**
-     * An array of modal IDs that are currently open.
-     */
-    opened: string[];
-    /**
-     * The container element to render the modal into.
-     * By default, the modal will render at the end of the document body.
-     */
-    container?: FloatingUIContainer;
-    /**
-     * Show or hide a modal by ID.
-     */
-    showModal: (id: string, flag?: boolean) => void;
-}
 export interface IressModalProviderProps extends PropsWithChildren {
     /**
      * The container element to render the modal into.
@@ -22,5 +7,4 @@ export interface IressModalProviderProps extends PropsWithChildren {
      */
     container?: FloatingUIContainer;
 }
-export declare const ModalContext: import('react').Context<ModalContextValue | undefined>;
 export declare const IressModalProvider: ({ children, container, }: IressModalProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Modal/hooks/useModal.d.ts

@@ -1,3 +1,20 @@
+import { FloatingUIContainer } from '../../../types';
+export interface ModalContextValue {
+    /**
+     * An array of modal IDs that are currently open.
+     */
+    opened: string[];
+    /**
+     * The container element to render the modal into.
+     * By default, the modal will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * Show or hide a modal by ID.
+     */
+    showModal: (id: string, flag?: boolean) => void;
+}
+export declare const ModalContext: import('react').Context<ModalContextValue | undefined>;
 export declare const useModal: () => {
     showModal: (id: string, flag?: boolean) => void;
 };

package/dist/src/components/Popover/Popover.styles.d.ts

@@ -18,7 +18,7 @@ export declare const popover: import('../../styled-system/types').SlotRecipeRunt
         };
     };
     matchActivatorWidth: {
-        true: {
+        false: {
             content: {
                 maxWidth: "[none]";
             };

package/dist/src/components/Popover/components/NestedPopoverActivator.d.ts

@@ -2,4 +2,4 @@ import { PropsWithChildren } from 'react';
 import { PopoverHookReturn } from '../hooks/usePopover';
 export declare const NestedPopoverActivator: ({ children, parentPopover, }: PropsWithChildren & {
     parentPopover?: PopoverHookReturn;
-}) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}) => string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/src/components/Popover/hooks/usePopover.d.ts

@@ -68,6 +68,10 @@ export interface PopoverHookReturn extends PopoverAriaHookReturn {
      * It is used by other components to manage the aria attributes and keyboard navigation of the items.
      */
     list: MutableRefObject<(HTMLElement | null)[]>;
+    /**
+     * Resets the active index of the popover items, either to the `focusStartIndex` or null
+     */
+    resetActiveIndex: () => void;
     /**
      * Set the current active index of the popover items.
      */

package/dist/src/components/Popover/hooks/usePopoverNavigation.d.ts

@@ -14,7 +14,7 @@ import { IressPopoverProps } from '../Popover';
  */
 export declare const usePopoverNavigation: <RT extends VirtualElement = HTMLButtonElement>(context: FloatingContext<RT>, type?: IressPopoverProps["type"], props?: Partial<UseListNavigationProps>, onNavigate?: (activeIndex: number | null) => void, startIndex?: number) => {
     activeIndex: number | null;
-    list: import('react').MutableRefObject<(HTMLElement | null)[]>;
+    list: import('react').RefObject<(HTMLElement | null)[]>;
     listNav: import('@floating-ui/react').ElementProps;
     setActiveIndex: import('react').Dispatch<import('react').SetStateAction<number | null>>;
 };

package/dist/src/components/Readonly/Readonly.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const readonly: import('../../styled-system/types').SlotRecipeRuntimeFn<"wrapper" | "root" | "addon" | "internal" | "formControl" | "readonly", {
+export declare const readonly: import('../../styled-system/types').SlotRecipeRuntimeFn<"wrapper" | "root" | "addon" | "internal" | "formControl", {
     inline: {
         true: {
             root: {

package/dist/src/components/RichSelect/RichSelect.d.ts

@@ -2,8 +2,11 @@ import { ForwardedRef, ReactElement, ChangeEvent, ReactNode } from 'react';
 import { AutocompleteSearchHookProps } from '../Autocomplete';
 import { IressSelectActivatorProps } from './components/SelectActivator';
 import { SelectHiddenInputRenderProps } from './components/SelectHiddenInput';
-import { ControlledValue, FloatingUIAligns, FormattedLabelValueMeta, IressPopoverProps, LabelValueMeta, PopoverRef, ReactHookFormCompatibleRef } from '../../main';
 import { IressInputProps } from '../Input';
+import { ControlledValue } from '../../hooks';
+import { FormattedLabelValueMeta, LabelValueMeta, ReactHookFormCompatibleRef } from '../../interfaces';
+import { FloatingUIAligns } from '../../types';
+import { IressPopoverProps, PopoverRef } from '../Popover';
 export interface IressRichSelectProps<TMultiple extends boolean = false> extends Omit<AutocompleteSearchHookProps, 'query'>, Omit<IressPopoverProps, 'activator' | 'children' | 'contentClassName' | 'defaultShow' | 'defaultValue' | 'disabledAutoToggle' | 'onChange' | 'matchActivatorWidth' | 'show' | 'width'>, Pick<IressSelectActivatorProps, 'append' | 'prepend' | 'selectedOptionsText'> {
     /**
      * Sets the alignment of the dropdown relative to the activator element.
@@ -90,6 +93,13 @@ export interface IressRichSelectProps<TMultiple extends boolean = false> extends
      * The width of the select.
      */
     width?: IressInputProps['width'];
+    /**
+     * Whether the popover should match the width of the activator element.
+     * When true, the dropdown will have the same width as the select input.
+     * When false, the dropdown will size based on its content.
+     * @default true
+     */
+    matchActivatorWidth?: boolean;
 }
 export interface SelectLabelRenderProps<TMultiple extends boolean = false> {
     /**

package/dist/src/components/RichSelect/SelectBody/SelectBody.d.ts

@@ -1,5 +1,5 @@
-import { IressTextProps } from '../../../main';
 import { ReactNode } from 'react';
+import { IressTextProps } from '../../Text';
 export interface IressSelectBodyProps extends Omit<IressTextProps, 'element'> {
     /**
      * Footer of the select, it will render as fixed (pinned).

package/dist/src/components/RichSelect/SelectMenu/SelectMenu.d.ts

@@ -1,8 +1,8 @@
 import { IressMenuItemProps, IressMenuProps } from '../../Menu';
 import { ReactNode } from 'react';
-import { FormControlValue, LabelValueMeta } from '../../../main';
 import { ControlledValue } from '../../../hooks';
-import { FormattedLabelValueMeta } from '../../../interfaces';
+import { FormattedLabelValueMeta, LabelValueMeta } from '../../../interfaces';
+import { FormControlValue } from '../../../types';
 export interface IressSelectMenuProps<TMultiple extends boolean = false> extends Omit<IressMenuProps<FormControlValue, TMultiple>, 'children' | 'onChange' | 'selected' | 'type'> {
     /**
      * Heading slot. Often used for a title or description.

package/dist/src/components/RichSelect/SelectMenu/SelectMenuItem.d.ts

@@ -1,2 +1,2 @@
 import { IressSelectMenuItemProps } from './SelectMenu';
-export declare const IressSelectMenuItem: ({ className, divider, formattedLabel, hiddenOnMobile, label, meta, value, append, canToggle, onClick, onKeyDown, prepend, role, selected, "data-testid": dataTestId, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, }: IressSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressSelectMenuItem: ({ className, divider, formattedLabel, formattedMeta, hiddenOnMobile, label, meta, value, append, canToggle, onClick, onKeyDown, prepend, role, selected, "data-testid": dataTestId, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, }: IressSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/SelectSearch/SelectSearch.d.ts

@@ -1,3 +1,3 @@
-import { IressInputPopoverProps } from '../../../main';
+import { IressInputPopoverProps } from '../../Popover';
 export type IressSelectSearchProps = Omit<IressInputPopoverProps, 'disabledAutoToggle' | 'displayMode' | 'show' | 'width'>;
 export declare const IressSelectSearch: ({ className, contentClassName, contentStyle, onKeyDown, ...restProps }: IressSelectSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/SelectSearchInput/SelectSearchInput.d.ts

@@ -1,5 +1,4 @@
-import { InputRef } from '../../Input';
-import { IressInputProps } from '../../../main';
+import { InputRef, IressInputProps } from '../../Input';
 export interface IressSelectSearchInputProps extends Omit<IressInputProps, 'rows' | 'width'> {
     /**
      * Content to place inside the input when it has no value.

package/dist/src/components/RichSelect/SelectTags/SelectTags.d.ts

@@ -1,7 +1,7 @@
-import { LabelValueMeta } from '../../../main';
 import { ReactNode } from 'react';
 import { IressTextProps } from '../../Text';
 import { IressSelectActivatorProps } from '../components/SelectActivator';
+import { LabelValueMeta } from '../../../interfaces';
 export interface IressSelectTagsProps extends Omit<IressSelectActivatorProps, 'width'>, Omit<IressTextProps, 'element' | 'width'> {
     /**
      * Append content.

package/dist/src/components/RichSelect/SelectTags/SelectTags.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const selectTags: import('../../../styled-system/types').SlotRecipeRuntimeFn<"tag" | "placeholder" | "root" | "append" | "prepend" | "tagsList", {
+export declare const selectTags: import('../../../styled-system/types').SlotRecipeRuntimeFn<"placeholder" | "tag" | "root" | "append" | "prepend" | "tagsList", {
     showDefaultChevron: {
         true: {
             root: {

package/dist/src/components/RichSelect/components/SelectOptions.d.ts

@@ -4,5 +4,5 @@ interface SelectOptionsProps<TMultiple extends boolean = false> extends Pick<Ire
     shouldShowInstructions?: boolean;
     shouldShowNoResults?: boolean;
 }
-export declare const SelectOptions: <TMultiple extends boolean = false>({ autoHighlight, debouncedQuery, error, initialOptions: initialOptionsProp, loading, minSearchLength, multiSelect, onChange, options, query, renderOptions, results, setQuery, setShow, setValue, show, shouldShowInstructions, shouldShowNoResults, value, }: SelectOptionsProps<TMultiple>) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const SelectOptions: <TMultiple extends boolean = false>({ autoHighlight, debouncedQuery, error, initialOptions: initialOptionsProp, loading, minSearchLength, multiSelect, onChange, options, query, renderOptions, results, setQuery, setShow, setValue, show, shouldShowInstructions, shouldShowNoResults, value, }: SelectOptionsProps<TMultiple>) => string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/src/components/Slideout/SlideoutProvider.d.ts

@@ -7,10 +7,4 @@ export interface IressSlideoutProviderProps extends PropsWithChildren {
      */
     container?: FloatingUIContainer;
 }
-export interface SlideoutContextValue {
-    container?: FloatingUIContainer;
-    opened: string[];
-    showSlideout: (id: string, flag?: boolean) => void;
-}
-export declare const SlideoutContext: import('react').Context<SlideoutContextValue | undefined>;
 export declare const IressSlideoutProvider: ({ children, container, }: IressSlideoutProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Slideout/hooks/useSlideout.d.ts

@@ -1,3 +1,10 @@
+import { FloatingUIContainer } from '../../../types';
+export interface SlideoutContextValue {
+    container?: FloatingUIContainer;
+    opened: string[];
+    showSlideout: (id: string, flag?: boolean) => void;
+}
+export declare const SlideoutContext: import('react').Context<SlideoutContextValue | undefined>;
 export declare const useSlideout: () => {
     showSlideout: (id: string, flag?: boolean) => void;
 };

package/dist/src/components/TabSet/TabSet.d.ts

@@ -1,6 +1,7 @@
 import { TabSetChangedEventDetail } from './TabSetProvider';
 import { ReactNode } from 'react';
 import { FormControlValue, IressStyledProps } from '../../types';
+import { IressCustomiseSlot } from '../../interfaces';
 export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
     /**
      * Content to be displayed inside the IressTabs, usually multiple `IressTab`.
@@ -20,10 +21,18 @@ export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
      * Emitted when a tab changes.
      */
     onChange?: (event: TabSetChangedEventDetail) => void;
+    /**
+     * Custom style for the panel (the area that contains the tab content).
+     */
+    panelStyle?: IressCustomiseSlot;
     /**
      * Set the selected tab for controlled tabs.
      * If the `IressTab` does not have a `value` prop, it will match by index.
      */
     selected?: FormControlValue;
+    /**
+     * Custom style for the tab holder (the area that contains the tabs).
+     */
+    tabHolderStyle?: IressCustomiseSlot;
 }
-export declare const IressTabSet: ({ children, className, defaultSelected, layout, onChange, selected, ...restProps }: IressTabSetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressTabSet: ({ children, className, defaultSelected, layout, onChange, panelStyle, selected, tabHolderStyle, ...restProps }: IressTabSetProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Table/TableFormattedValue/TableFormattedValue.d.ts

@@ -21,6 +21,5 @@ export interface IressTableFormattedValueProps<TRow extends object, TVal = unkno
      */
     value: TVal;
 }
-export declare const TABLE_CELL_FORMATS: readonly ["string", "number", "date", "shortDate", "isoDateTime", "relativeTime", "currency", "percent"];
-export type TableCellFormats = (typeof TABLE_CELL_FORMATS)[number];
-export declare const IressTableFormattedValue: <TRow extends object, TVal = unknown>({ currencyFormatOptions, format, row, value, }: IressTableFormattedValueProps<TRow, TVal>) => string | number | boolean | import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | TVal | null | undefined;
+export type TableCellFormats = 'string' | 'number' | 'date' | 'shortDate' | 'isoDateTime' | 'relativeTime' | 'currency' | 'percent';
+export declare const IressTableFormattedValue: <TRow extends object, TVal = unknown>({ currencyFormatOptions, format, row, value, }: IressTableFormattedValueProps<TRow, TVal>) => string | number | bigint | boolean | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | TVal | null | undefined;

package/dist/src/components/Table/helpers/composeTableColumnDefs.d.ts

@@ -53,4 +53,4 @@ export interface TableColumn<TRow extends object, TVal = never> extends Pick<Ire
      */
     width?: string;
 }
-export declare const composeTableColumnDefs: <TRow extends object, TVal = never>(rows: TRow[], columns?: TableColumn<TRow, TVal>[]) => import('@tanstack/react-table').AccessorFnColumnDef<TRow, TRow[keyof TRow]>[];
+export declare const composeTableColumnDefs: <TRow extends object, TVal = never>(rows: TRow[], columns?: TableColumn<TRow, TVal>[]) => import('@tanstack/table-core').AccessorFnColumnDef<TRow, TRow[keyof TRow]>[];

package/dist/src/components/Tag/TagInput/TagInput.styles.d.ts

@@ -0,0 +1 @@
+export declare const tagInput: import('../../../styled-system/types').SlotRecipeRuntimeFn<"input" | "tag", import('../../../styled-system/types').SlotRecipeVariantRecord<"input" | "tag">>;

package/dist/src/components/Text/Text.d.ts

@@ -1,6 +1,5 @@
 import { IressStyledProps } from '../../types';
-export declare const TEXT_ELEMENTS: readonly ["p", "div", "span", "h1", "h2", "h3", "h4", "h5", "h6", "code", "small", "cite", "caption", "strong", "em", "a", "blockquote", "pre"];
-export type TextElements = (typeof TEXT_ELEMENTS)[number];
+export type TextElements = 'p' | 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'small' | 'cite' | 'caption' | 'strong' | 'em' | 'a' | 'blockquote' | 'pre';
 export type IressTextProps<E extends TextElements = 'div'> = IressStyledProps<E> & {
     /**
      * The HTML element that should be rendered.

package/dist/src/components/Toaster/ToasterProvider.d.ts

@@ -1,6 +1,5 @@
 import { PropsWithChildren } from 'react';
 import { ToasterProps } from './Toaster';
-import { ToasterRegister } from './helpers/toasterRegister';
 export interface IressToasterProviderProps extends Omit<ToasterProps, 'toasts'>, PropsWithChildren {
     /**
      * A unique identifier for the toaster provider.
@@ -8,5 +7,4 @@ export interface IressToasterProviderProps extends Omit<ToasterProps, 'toasts'>,
      */
     id?: string;
 }
-export declare const ToasterContext: import('react').Context<ToasterRegister | undefined>;
 export declare const IressToasterProvider: ({ children, id, position, ...restProps }: IressToasterProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Toaster/components/Toast/Toast.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode, MouseEvent } from 'react';
 import { IressStyledProps } from '../../../../types';
-export declare const TOAST_STATUS: readonly ["success", "error", "info"];
-export type ToastStatus = (typeof TOAST_STATUS)[number];
+export type ToastStatus = 'success' | 'error' | 'info';
 export interface ToastProps extends Omit<IressStyledProps, 'content'> {
     /**
      * Buttons and controls for the toast.

package/dist/src/components/Toaster/hooks/useToaster.d.ts

@@ -2,28 +2,29 @@ import { NewToast, ToasterRegister } from '../helpers/toasterRegister';
 interface ToasterHookReturn {
     /**
      * Show a toast when an error occurs.
-     * @param toast The toast object containing the `content`, `heading`, and other optional properties.
+     * @param toast The toast object containing the `content`, `heading`, and other optional properties. Can also be a string if you want to simply display a message.
      * @return A string representing the ID of the created toast.
      */
-    error: (toast: NewToast) => string;
+    error: (toast: NewToast | string) => string;
     /**
      * Show a toast on a successful operation.
-     * @param toast The toast object containing the `content`, `heading`, and other optional properties.
+     * @param toast The toast object containing the `content`, `heading`, and other optional properties. Can also be a string if you want to simply display a message.
      * @return A string representing the ID of the created toast.
      */
-    success: (toast: NewToast) => string;
+    success: (toast: NewToast | string) => string;
     /**
      * Show a toast to inform the user of an event or action.
-     * @param toast The toast object containing the `content`, `heading`, and other optional properties.
+     * @param toast The toast object containing the `content`, `heading`, and other optional properties. Can also be a string if you want to simply display a message.
      * @return A string representing the ID of the created toast.
      */
-    info: (toast: NewToast) => string;
+    info: (toast: NewToast | string) => string;
     /**
      * Close a toast by its ID.
      * @param toastId The ID of the toast to close.
      */
     close: ToasterRegister['close'];
 }
+export declare const ToasterContext: import('react').Context<ToasterRegister | undefined>;
 /**
  * This hook provides allows you to show and close toasts in your application.
  * @param id Optional ID of the `IressToasterProvider` to use. If not provided, the closest `IressToasterProvider` will be used.

package/dist/src/enums.d.ts

@@ -1,13 +1,4 @@
 export declare enum GlobalCSSClass {
-    SROnly = "iress-sr-only",
-    NoScroll = "iress-no-scroll",
-    Hidden = "iress-hidden",
-    IgnoreStack = "iress-u-stack--ignore",
-    TextAlignBase = "iress--text-align",
-    HiddenMobile = "iress-hidden--mobile",
-    Width = "iress-width",
-    Display = "iress-display",
-    Padding = "iress-p",
     Group = "group",// https://panda-css.com/docs/concepts/conditional-styles#group-selectors
     FormElement = "iress-form-element",
     FormElementInner = "iress-form-element__inner",
@@ -48,6 +39,7 @@ export declare enum GlobalCSSClass {
     Panel = "ids-panel",
     Placeholder = "ids-placeholder",
     Popover = "ids-popover",
+    PopoverContent = "ids-popover__content",
     Progress = "ids-progress",
     Radio = "ids-radio",
     RadioGroup = "ids-radio-group",

package/dist/src/interfaces.d.ts

@@ -97,6 +97,7 @@ export interface LabelValueMeta extends LabelValue {
 }
 export interface FormattedLabelValueMeta extends LabelValueMeta {
     formattedLabel?: React.ReactNode;
+    formattedMeta?: React.ReactNode;
 }
 export interface BreakpointDetail {
     mediaQuery: string;

package/dist/src/main.d.ts

@@ -49,12 +49,12 @@ export * from './components/Tooltip';
 export * from './components/ValidationMessage';
 export * from './patterns/Form';
 export * from './patterns/Loading';
+export * from './patterns/Shadow';
 export * from './constants';
 export * from './enums';
 export * from './interfaces';
 export * from './types';
 export * from './helpers/formatting/toArray';
 export * from './helpers/styling/iressCss';
-export * from './helpers/utility/generateScopedName';
 export * from './hooks';
 export type { ColorToken } from './styled-system/tokens';

package/dist/src/patterns/Form/hooks/useNoDefaultValueInForms.d.ts

@@ -1,4 +1,4 @@
-import { FormControlValue } from '../../../main';
+import { FormControlValue } from '../../../types';
 interface NoDefaultValueInFormsHookProps<T = FormControlValue> {
     component: string;
     defaultValue?: T;

package/dist/src/patterns/Loading/Loading.styles.d.ts

@@ -4,6 +4,7 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
             root: {
                 bg: "colour.system.danger.surface";
                 color: "colour.system.danger.text";
+                opacity: "[1 !important]";
             };
         };
     };

package/dist/src/patterns/Loading/components/PageLoading.d.ts

@@ -10,6 +10,10 @@ export interface PageLoadingProps extends Omit<IressStyledProps, 'children'> {
      * If provided, will switch the skeleton to this template. Use when you have critical content that can be displayed while loading to allow the user to see some content while the rest is loading.
      */
     critical?: ReactNode;
+    /**
+     * An error to display if the loading fails. This will override the skeleton.
+     */
+    error?: ReactNode;
     /**
      * If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
      */
@@ -37,5 +41,5 @@ export interface PageLoadingProps extends Omit<IressStyledProps, 'children'> {
      */
     timeout?: number;
 }
-export declare const PageLoading: ({ className, critical, loaded, screenReaderText, template, timeout, ...restProps }: PageLoadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageLoading: ({ className, critical, error, loaded, screenReaderText, template, timeout, ...restProps }: PageLoadingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/patterns/Loading/components/StartUpLoading.d.ts

@@ -32,17 +32,22 @@ export interface StartUpLoadingProps extends Omit<IressStyledProps, 'color'> {
     /**
      * If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
      */
-    progress?: IressProgressProps<undefined>['value'];
+    progress?: IressProgressProps<number | undefined>['value'];
     /**
      * This is a render prop that allows you to override the default progress rendering.
      * This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
      */
-    renderProgress?: (props: Pick<IressProgressProps<undefined>, 'max' | 'sectionTitle' | 'value'>) => ReactNode;
+    renderProgress?: (props: Pick<IressProgressProps<number | undefined>, 'min' | 'max' | 'sectionTitle' | 'value'>) => ReactNode;
     /**
      * Only screen readers will see this message, it is changed to the `children` message after the delay.
      * @default 'Loading...'
      */
     screenReaderText?: ReactNode;
+    /**
+     * Set the start from timer, useful when stringing multiple loading patterns across different pages (eg. logging via a third-party authentication provider)
+     * @default 0
+     */
+    startFrom?: number;
     /**
      * Set the timeouts for showing the progress bar and message.
      */
@@ -64,4 +69,4 @@ export interface StartUpLoadingProps extends Omit<IressStyledProps, 'color'> {
         progress?: number;
     };
 }
-export declare const StartUpLoading: ({ className, children, "data-testid": dataTestId, estimatedFinishTime, loaded, messageList, progress, renderProgress, screenReaderText, timeout, ...restProps }: StartUpLoadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StartUpLoading: ({ className, children, "data-testid": dataTestId, estimatedFinishTime, loaded, messageList, progress, renderProgress, screenReaderText, startFrom, timeout, ...restProps }: StartUpLoadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/patterns/Loading/components/ValidateLoading.d.ts

@@ -35,4 +35,4 @@ export interface ValidateLoadingProps extends IressStyledProps {
      */
     timeout?: number;
 }
-export declare const ValidateLoading: ({ children, className, loading: loadingProp, message, pattern, position, renderButton, timeout, ...restProps }: ValidateLoadingProps) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const ValidateLoading: ({ children, className, loading: loadingProp, message, pattern, position, renderButton, timeout, ...restProps }: ValidateLoadingProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/src/patterns/Shadow/Shadow.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { IressUnstyledProps } from '../../types';
+export interface IressShadowProps extends IressUnstyledProps {
+    /**
+     * Children to be rendered inside the shadow DOM
+     */
+    children?: ReactNode;
+    /**
+     * Optional array of font URLs to be included in the parent document head.
+     * By default it will include the default fonts from `@iress-oss/ids-tokens`
+     * (e.g., ['https://fonts.googleapis.com/css?family=Roboto']
+     */
+    fontFaceUrls?: string[];
+    /**
+     * If true, the Iress icon stylesheet will not be included in the shadow DOM and the head.
+     */
+    noIcons?: boolean;
+    /**
+     * Optional array of stylesheet contents to be included in the shadow DOM
+     * (e.g. { styleId: '.my-class { color: red; }' })
+     */
+    stylesheetContents?: Record<string, string>;
+    /**
+     * Optional array of stylesheet URLs to be included in the shadow DOM
+     * (e.g., ['https://example.com/style.css'])
+     */
+    stylesheetUrls?: string[];
+}
+/**
+ * This component allows you to encapsulate its children within a Shadow DOM.
+ * It automatically includes the IDS CSS and allows for additional stylesheets
+ * and font faces to be added either to the shadow DOM or the parent document head.
+ */
+export declare const IressShadow: import('react').ForwardRefExoticComponent<IressShadowProps & import('react').RefAttributes<ShadowRoot | null>>;

package/dist/src/patterns/Shadow/index.d.ts

@@ -0,0 +1 @@
+export * from './Shadow';