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

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

@@ -7,7 +7,7 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
     width: {
         '2': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]";
             };
             element: {
                 width: "auto";
@@ -15,7 +15,7 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
         };
         '4': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]";
             };
             element: {
                 width: "auto";
@@ -23,7 +23,7 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
         };
         '6': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]";
             };
             element: {
                 width: "auto";
@@ -31,7 +31,7 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
         };
         '8': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]";
             };
             element: {
                 width: "auto";
@@ -39,7 +39,7 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
         };
         '10': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]";
             };
             element: {
                 width: "auto";
@@ -47,12 +47,12 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
         };
         '12': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]";
             };
         };
         '16': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]";
             };
             element: {
                 width: "auto";

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

@@ -11,7 +11,7 @@ export declare const skeleton: import('../../styled-system/types').RecipeRuntime
         };
         text: {
             width: "[100%]";
-            height: "[spacing.600]";
+            height: "[spacing.6]";
         };
     };
 }>;

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

@@ -2,7 +2,7 @@ export declare const slideout: import('../../styled-system/types').SlotRecipeRun
     position: {
         right: {
             root: {
-                insetInlineEnd: "spacing.000";
+                insetInlineEnd: "spacing.0";
                 borderStartStartRadius: "radius.050";
                 borderEndStartRadius: "radius.050";
                 borderStartEndRadius: "radius.000";
@@ -14,7 +14,7 @@ export declare const slideout: import('../../styled-system/types').SlotRecipeRun
         };
         left: {
             root: {
-                insetInlineStart: "spacing.000";
+                insetInlineStart: "spacing.0";
                 borderStartStartRadius: "radius.000";
                 borderEndStartRadius: "radius.000";
                 borderStartEndRadius: "radius.050";

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/Stack/Stack.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { HorizontalAligns, IressStyledProps, ResponsiveProp } from '../../types';
-import { PositiveSpacingToken } from '../../../theme-preset/tokens/spacing';
+import { PositiveSpacingToken, HorizontalAligns, IressStyledProps, ResponsiveProp } from '../../types';
 export type IressStackProps<E extends keyof React.JSX.IntrinsicElements = 'div'> = IressStyledProps<E> & {
     /**
      * Content to be separated by a gutter.

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/components/Toast/Toast.styles.d.ts

@@ -35,24 +35,24 @@ export declare const toast: import('../../../../styled-system/types').SlotRecipe
         'start-x': {
             root: {
                 insetInlineStart: "[-100%]";
-                ms: "spacing.400";
+                ms: "spacing.4";
             };
         };
         'end-x': {
             root: {
                 insetInlineEnd: "[-100%]";
-                me: "spacing.400";
+                me: "spacing.4";
             };
         };
         'start-y': {
             root: {
-                mt: "spacing.400";
+                mt: "spacing.4";
                 transform: "[translateY(-100%)]";
             };
         };
         'end-y': {
             root: {
-                mb: "spacing.400";
+                mb: "spacing.4";
                 transform: "[translateY(100%)]";
             };
         };

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/components/Toggle/Toggle.d.ts

@@ -2,13 +2,21 @@ import { MouseEvent, ReactNode } from 'react';
 import { IressStyledProps } from '../../types';
 export interface IressToggleProps extends Omit<IressStyledProps, 'onChange'> {
     /**
-     * Sets the checked state of the Toggle.
+     * If true, the toggle on.
+     * Please use this when are rendering the toggle in controlled mode,
+     * meaning it will not change unless you explicitly set the value using `onChange` and `checked`.
      */
     checked?: boolean;
     /**
      * Provides the label for the Toggle.
      */
     children: ReactNode;
+    /**
+     * If true, the toggle will be initially rendered as off.
+     * Please use this when are rendering the toggle in uncontrolled mode,
+     * meaning the value will change automatically when the user interacts with the toggle.
+     */
+    defaultChecked?: boolean;
     /**
      * Hides the label if true (label will still be read out by screen readers).
      */
@@ -22,4 +30,4 @@ export interface IressToggleProps extends Omit<IressStyledProps, 'onChange'> {
      */
     onChange?: (checked: boolean, event: MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const IressToggle: ({ checked: checkedProp, hiddenLabel, children, layout, className, onChange, "data-testid": testid, ...restProps }: IressToggleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressToggle: ({ checked: checkedProp, hiddenLabel, defaultChecked, children, layout, className, onChange, "data-testid": testid, ...restProps }: IressToggleProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -13,8 +13,8 @@ export declare const toggle: import('../../styled-system/types').SlotRecipeRunti
                 flexDirection: "row-reverse";
             };
             label: {
-                marginInlineStart: "spacing.100";
-                marginInlineEnd: "spacing.000";
+                marginInlineStart: "spacing.1";
+                marginInlineEnd: "spacing.0";
             };
         };
         'inline-between': {
@@ -33,7 +33,7 @@ export declare const toggle: import('../../styled-system/types').SlotRecipeRunti
             };
             label: {
                 display: "block";
-                marginBlockEnd: "spacing.100";
+                marginBlockEnd: "spacing.1";
             };
         };
     };
@@ -44,7 +44,7 @@ export declare const toggle: import('../../styled-system/types').SlotRecipeRunti
                 display: "inline-block";
             };
             checkboxMark: {
-                marginInlineEnd: "spacing.100";
+                marginInlineEnd: "spacing.1";
             };
         };
     };

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

@@ -1,9 +1,7 @@
 import { ReactNode } from 'react';
 import { SystemValidationStatus, PaddingSize } from './enums';
-import { FormControlValue, PaddingSizes, ResponsiveProp, SystemValidationStatuses } from './types';
-import { SpacingToken } from './styled-system/tokens';
+import { PositiveSpacingToken, FormControlValue, PaddingSizes, ResponsiveProp, SystemValidationStatuses, SpacingToken } from './types';
 import { UtilityValues } from './styled-system/types/prop-type';
-import { PositiveSpacingToken } from '../theme-preset/tokens/spacing';
 /**
  * This interface is used to ensure that the ref returned by a component is compatible with React Hook Form.
  * It provides the contract for necessary methods to interact with the third-party library, such as `blur` and `focus`.
@@ -97,6 +95,7 @@ export interface LabelValueMeta extends LabelValue {
 }
 export interface FormattedLabelValueMeta extends LabelValueMeta {
     formattedLabel?: React.ReactNode;
+    formattedMeta?: React.ReactNode;
 }
 export interface BreakpointDetail {
     mediaQuery: string;
@@ -206,7 +205,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin
      */
-    m?: ResponsiveProp<UtilityValues['margin']>;
+    m?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
      *
@@ -218,7 +217,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-block
      */
-    my?: ResponsiveProp<UtilityValues['marginBlock']>;
+    my?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
      *
@@ -230,7 +229,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline
      */
-    mx?: ResponsiveProp<UtilityValues['marginInline']>;
+    mx?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
      *
@@ -242,7 +241,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
      */
-    mb?: ResponsiveProp<UtilityValues['marginBottom']>;
+    mb?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
      *
@@ -254,7 +253,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
      */
-    ml?: ResponsiveProp<UtilityValues['marginLeft']>;
+    ml?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
      *
@@ -266,7 +265,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
      */
-    mr?: ResponsiveProp<UtilityValues['marginRight']>;
+    mr?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
      *
@@ -278,7 +277,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
      */
-    mt?: ResponsiveProp<UtilityValues['marginTop']>;
+    mt?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`noGutter`** property is used to remove the bottom margin from the last child of a component.
      * This is useful when you want to avoid extra spacing at the end of a layout.

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]";
             };
         };
     };
@@ -26,8 +27,8 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
                 left: "[50%]";
                 transform: "translate(-50%, -50%)";
                 width: "[fit-content]";
-                px: "spacing.200";
-                py: "spacing.100";
+                px: "spacing.2";
+                py: "spacing.1";
                 textStyle: "typography.body.sm";
                 bg: "colour.neutral.20";
                 color: "colour.neutral.70";
@@ -57,8 +58,8 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
                 zIndex: "600";
             };
             message: {
-                px: "spacing.400";
-                py: "spacing.200";
+                px: "spacing.4";
+                py: "spacing.2";
                 bg: "colour.neutral.20";
                 color: "colour.neutral.70";
                 border: "divider";
@@ -78,7 +79,7 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
                 width: "overlay.sm";
             };
             message: {
-                p: "spacing.1200";
+                p: "spacing.10";
             };
         };
         page: {
@@ -91,8 +92,8 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
                 opacity: number;
                 transition: "[opacity 0.2s linear]";
                 position: "absolute";
-                top: "spacing.000";
-                left: "spacing.000";
+                top: "spacing.0";
+                left: "spacing.0";
             };
             message: {
                 opacity: number;
@@ -128,10 +129,10 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
             };
             message: {
                 position: "absolute";
-                left: "spacing.000";
+                left: "spacing.0";
                 width: "[max-content]";
                 color: "colour.neutral.70";
-                padding: "spacing.200";
+                padding: "spacing.2";
                 bg: "colour.neutral.10";
                 textStyle: "typography.body.md";
                 animationStyle: "loading-fade-next";
@@ -166,7 +167,7 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
         true: {};
     };
 }>;
-export declare const loadingList: import('../../styled-system/types').SlotRecipeRuntimeFn<"svg" | "circle" | "marker" | "dots" | "root" | "item" | "tick", {
+export declare const loadingList: import('../../styled-system/types').SlotRecipeRuntimeFn<"tick" | "svg" | "circle" | "marker" | "dots" | "root" | "item", {
     finished: {
         true: {
             svg: {

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';

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

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;