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

package/dist/src/patterns/Form/FormValidationSummary/FormValidationSummary.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { IressValidationSummaryProps } from '../../../components/ValidationMessage';
+import { IressAlertProps } from '../../../components/Alert';
+export type IressFormValidationSummaryProps = Omit<IressValidationSummaryProps, 'messages'> & Omit<IressAlertProps, 'defaultDismissed' | 'dismissed' | 'onDismiss' | 'status'> & {
+    /**
+     * The content to use as the summary. If provided, this will override the default validation messages.
+     * This is useful if you want to provide a custom summary message or if you want to
+     * use a different validation mechanism that does not rely on the form context.
+     */
+    children?: ReactNode;
+};
+/**
+ * Validation summary messages based on the form context from react-hook-form
+ */
+export declare const IressFormValidationSummary: ({ actions, children, "data-testid": testId, footer, heading, itemStyle, icon, srOnly, variant, ...restProps }: IressFormValidationSummaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/patterns/Form/HookForm/HookForm.d.ts

@@ -0,0 +1,174 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { DefaultValues, FieldValues, SubmitErrorHandler, useFieldArray, useForm, useFormContext, UseFormProps, UseFormReturn, useWatch } from 'react-hook-form';
+import { IressStyledProps } from '../../../types';
+export interface IressHookFormProps<T extends FieldValues, TContext = object> extends Omit<IressStyledProps<'form'>, 'defaultChecked' | 'defaultValue' | 'onSubmit' | 'onError'> {
+    /**
+     * The content of the alert section.
+     * @default <IressFormValidationSummary srOnly />
+     */
+    alert?: ReactNode;
+    /**
+     * The content of the form, usually multiple `IressFormField` or `IressFormFieldset` components.
+     */
+    children?: ReactNode;
+    /**
+     * React hook form instance.
+     */
+    form: UseFormReturn<T, TContext>;
+    /**
+     * Emitted when any field has an error.
+     * Called after the first submit if any errors are recorded, and from then on when any value changes.
+     *
+     * @see https://react-hook-form.com/docs/useform/handlesubmit
+     */
+    onError?: SubmitErrorHandler<T>;
+    /**
+     * Handler for when the submit method on the form is called after validation is passed.
+     *
+     * @see https://react-hook-form.com/docs/useform/handlesubmit
+     */
+    onSubmit?: (data: T) => void;
+    /**
+     * Emitted when the form state is valid.
+     *
+     * @see https://react-hook-form.com/docs/useform/formstate
+     */
+    onValidChange?: (isValid: boolean) => void;
+    /**
+     * If set to `true`, the summary will only update when the form is submitted, not on every field change.
+     * This is useful for performance reasons, especially in large forms.
+     * @default false
+     */
+    updateErrorSummaryOnSubmit?: boolean;
+}
+/**
+ * The form reference allows you to access the `react-hook-form` methods and element, as well as dynamically submit or reset the form.
+ * This is useful for cases where you need to programmatically control the form, such as submitting it from a button outside the form.
+ * @param T - The type of the form values.
+ */
+export interface FormRef<T extends FieldValues> {
+    /**
+     * The `react-hook-form` instance, which provides methods to interact with the form.
+     * This includes methods like `reset`, `setValue`, `getValues`, etc.
+     * @see https://react-hook-form.com/docs/useform
+     */
+    api: UseFormReturn<T>;
+    /**
+     * The HTML form element, which can be used to access the DOM element directly.
+     */
+    element?: HTMLFormElement;
+    /**
+     * Resets the form to its initial state or to the provided values.
+     * This will clear all fields and errors, and set the form values to the default values.
+     * If no values are provided, it will reset to the default values defined in the form.
+     * @param values - The values to reset the form to. If not provided, it will reset to the default values defined in the form.
+     */
+    reset: (values?: DefaultValues<T>) => void;
+    /**
+     * Submits the form programmatically.
+     * This will trigger the form validation and call the `onSubmit` handler if the form is valid.
+     */
+    submit: () => void;
+}
+/**
+ * Common form pattern props, pretty much adding commentary to UseFormProps from `react-hook-form`.
+ */
+export interface FormPatternProps<T extends FieldValues, TContext = object> extends Partial<Omit<UseFormProps<T, TContext>, 'disabled' | 'errors' | 'shouldFocusError'>> {
+    /**
+     * This context object is mutable and will be injected into the `resolver`'s second argument (eg. [Yup](https://github.com/jquense/yup) validation's context object).
+     * @see https://react-hook-form.com/docs/useform#context
+     */
+    context?: UseFormProps<T, TContext>['context'];
+    /**
+     * Display all validation errors or one at a time.
+     * @see https://react-hook-form.com/docs/useform#criteriaMode
+     */
+    criteriaMode?: UseFormProps<T, TContext>['criteriaMode'];
+    /**
+     * Default values to be passed through when an input is unset.
+     * @see https://react-hook-form.com/docs/useform#defaultValues
+     */
+    defaultValues?: DefaultValues<T>;
+    /**
+     * Delay error from appearing instantly.
+     * @see https://react-hook-form.com/docs/useform#delayError
+     */
+    delayError?: UseFormProps<T, TContext>['delayError'];
+    /**
+     * Configure the validation strategy **before** a user submits the form the first time.
+     * @see https://react-hook-form.com/docs/useform#mode
+     * @default 'onSubmit'
+     */
+    mode?: UseFormProps<T, TContext>['mode'];
+    /**
+     * Progressive Enhancement only applicable for SSR framework.
+     * @see https://react-hook-form.com/docs/useform
+     */
+    progressive?: UseFormProps<T, TContext>['progressive'];
+    /**
+     * This property is related to value update behaviors.
+     * @see https://react-hook-form.com/docs/useform#resetOptions
+     */
+    resetOptions?: UseFormProps<T, TContext>['resetOptions'];
+    /**
+     * This function allows you to use any external validation library such as Yup, Zod, Joi, Vest, Ajv and many others.
+     * @see https://react-hook-form.com/docs/useform#resolver
+     */
+    resolver?: UseFormProps<T, TContext>['resolver'];
+    /**
+     * Configure validation strategy when inputs with errors get re-validated **after** a user submits the form the first time.
+     * @see https://react-hook-form.com/docs/useform#reValidateMode
+     * @default 'onChange'
+     */
+    reValidateMode?: UseFormProps<T, TContext>['reValidateMode'];
+    /**
+     * This config will enable browser native validation. It will also enable CSS selectors :valid and:invalid making styling inputs easier.
+     * @see https://react-hook-form.com/docs/useform#shouldUseNativeValidation
+     */
+    shouldUseNativeValidation?: UseFormProps<T, TContext>['shouldUseNativeValidation'];
+    /**
+     * By default, an input value will be retained when input is removed. However, you can set `shouldUnregister` to `true` to `unregister` input during unmount.
+     * @see https://react-hook-form.com/docs/useform#shouldUnregister
+     */
+    shouldUnregister?: UseFormProps<T, TContext>['shouldUnregister'];
+    /**
+     * The values prop will react to changes and update the form values, which is useful when your form needs to be updated by external state or server data.
+     * @see https://react-hook-form.com/docs/useform#values
+     */
+    values?: UseFormProps<T, TContext>['values'];
+}
+/**
+ * This interface allows us to expose the methods from `react-hook-form` that are used in `IressHookForm`.
+ * This is used by consumers with more complex forms that need to access the form methods directly, and ensure it is using the same version of `react-hook-form` as `IressHookForm` and `IressForm`.
+ */
+export interface HookFormExports {
+    /**
+     * Allows you to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc.
+     * This is useful when you have a form with a list of items that can be added or removed dynamically, such as a list of addresses or phone numbers.
+     * @see https://react-hook-form.com/docs/usefieldarray
+     */
+    useFieldArray: typeof useFieldArray;
+    /**
+     * Allows you to use the methods from `react-hook-form` in a nested component of `IressForm`.
+     * This is useful when you want more control over the form, such as submitting it programmatically or resetting it, without having to set a ref.
+     * @see https://react-hook-form.com/docs/useform
+     */
+    useForm: typeof useForm;
+    /**
+     * Allows you to use the form context from `react-hook-form` in a nested component of `IressForm`.
+     * This is useful when you need to access the form context in a component that is not a direct child of `IressForm`.
+     * @see https://react-hook-form.com/docs/useformcontext
+     */
+    useFormContext: typeof useFormContext;
+    /**
+     * Allows you watch changes to other form fields in an IressForm.
+     * This is useful when you need to conditionally render fields based on the value of another field.
+     * @see https://react-hook-form.com/docs/usewatch
+     */
+    useWatch: typeof useWatch;
+}
+declare const ForwardedHookForm: <T extends FieldValues, TContext = object>(props: IressHookFormProps<T, TContext> & {
+    ref?: Ref<FormRef<T>>;
+}) => ReactElement;
+export declare const IressHookForm: typeof ForwardedHookForm & HookFormExports;
+export {};

package/dist/src/patterns/Form/components/LongForm.d.ts

@@ -0,0 +1,53 @@
+import { FieldValues, UseFormProps } from 'react-hook-form';
+import { ReactElement, ReactNode, Ref } from 'react';
+import { FormPatternProps, FormRef, IressHookFormProps } from '../HookForm/HookForm';
+import { IressPanelProps } from '../../../components/Panel';
+export interface LongFormProps<T extends FieldValues, TContext = object> extends Omit<IressHookFormProps<T, TContext>, 'form'>, FormPatternProps<T, TContext> {
+    /**
+     * The actions to be displayed at the top right of the form.
+     */
+    actions: ReactNode;
+    /**
+     * Footer to be displayed at the bottom of the form.
+     * This can be used for additional information, links, or actions that are relevant to the form but not part of the main content.
+     */
+    footer?: ReactNode;
+    /**
+     * Title displayed at the top of the form, usually the purpose of the form.
+     */
+    heading: ReactNode;
+    /**
+     * Configure the validation strategy **before** a user submits the form the first time.
+     * For long forms, it is recommended to use `onBlur` to avoid overwhelming the user with validation errors.
+     * This means that validation will occur when the user leaves a field, rather than on every change.
+     * @see https://react-hook-form.com/docs/useform#mode
+     * @default 'onBlur'
+     */
+    mode?: UseFormProps<T, TContext>['mode'];
+    /**
+     * Style the panel that wraps the form fields.
+     * @default { bg: "alt" }
+     */
+    panelStyle?: IressPanelProps;
+    /**
+     * Use `pattern="long"` for the following use cases:
+     * - Forms that are used for data entry, such as creating or updating large datasets.
+     * - Forms that are longer than the viewport (usually more than 8-9 fields).
+     */
+    pattern?: 'long';
+    /**
+     * Configure the validation strategy **after** a user submits the form the first time.
+     * During this phase, it is recommended to use `onChange` to provide immediate feedback on field changes so users can correct errors as they go.
+     * @see https://react-hook-form.com/docs/useform#reValidateMode
+     * @default 'onChange'
+     */
+    reValidateMode?: UseFormProps<T, TContext>['reValidateMode'];
+    /**
+     * If set to `true`, the form will have a sticky header that remains at the top of the viewport when scrolling.
+     * This is useful for long forms where you want the header to always be visible.
+     */
+    sticky?: boolean;
+}
+export declare const LongForm: <T extends FieldValues, TContext = object>(props: LongFormProps<T, TContext> & {
+    ref?: Ref<FormRef<T>>;
+}) => ReactElement;

package/dist/src/patterns/Form/components/ShortForm.d.ts

@@ -0,0 +1,36 @@
+import { FieldValues, UseFormProps } from 'react-hook-form';
+import { ReactElement, ReactNode, Ref } from 'react';
+import { FormPatternProps, FormRef, IressHookFormProps } from '../HookForm/HookForm';
+export interface ShortFormProps<T extends FieldValues, TContext = object> extends Omit<IressHookFormProps<T, TContext>, 'form'>, FormPatternProps<T, TContext> {
+    /**
+     * The actions to be displayed at the bottom left of the form.
+     */
+    actions?: ReactNode;
+    /**
+     * Title displayed at the top of the form, usually the purpose of the form.
+     */
+    heading?: ReactNode;
+    /**
+     * Configure the validation strategy **before** a user submits the form the first time.
+     * For short forms, it is recommended to use `onSubmit`, as the data is normally familiar to the user (eg. login).
+     * @see https://react-hook-form.com/docs/useform#mode
+     * @default 'onSubmit'
+     */
+    mode?: UseFormProps<T, TContext>['mode'];
+    /**
+     * Use `pattern="short"` for the following use cases:
+     * - Login forms, or similar forms that requires data familiar to the users
+     * - Forms that fit the length of a single screen (less than 8-9 fields)
+     */
+    pattern?: 'short';
+    /**
+     * Configure the validation strategy **after** a user submits the form the first time.
+     * During this phase, it is recommended to use `onChange` to provide immediate feedback on field changes so users can correct errors as they go.
+     * @see https://react-hook-form.com/docs/useform#reValidateMode
+     * @default 'onChange'
+     */
+    reValidateMode?: UseFormProps<T, TContext>['reValidateMode'];
+}
+export declare const ShortForm: <T extends FieldValues, TContext = object>(props: ShortFormProps<T, TContext> & {
+    ref?: Ref<FormRef<T>>;
+}) => ReactElement;

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

@@ -0,0 +1,6 @@
+export * from './Form';
+export * from './FormField/FormField';
+export * from './FormField/FormFieldset';
+export * from './FormValidationSummary/FormValidationSummary';
+export { IressHookForm } from './HookForm/HookForm';
+export type { IressHookFormProps, FormRef } from './HookForm/HookForm';

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

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

package/dist/src/patterns/Form/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

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

@@ -0,0 +1,185 @@
+export declare const loading: import('../../styled-system/types').SlotRecipeRuntimeFn<"overlay" | "message" | "root" | "critical", {
+    error: {
+        true: {
+            root: {
+                bg: "colour.system.danger.surface";
+                color: "colour.system.danger.text";
+            };
+        };
+    };
+    instant: {
+        true: {};
+    };
+    loaded: {
+        true: {};
+    };
+    pattern: {
+        component: {
+            root: {
+                position: "relative";
+                opacity: number;
+                transition: "[opacity 0.3s ease-in-out]";
+            };
+            message: {
+                position: "absolute";
+                top: "[50%]";
+                left: "[50%]";
+                transform: "translate(-50%, -50%)";
+                width: "[fit-content]";
+                px: "spacing.200";
+                py: "spacing.100";
+                textStyle: "typography.body.sm";
+                bg: "colour.neutral.20";
+                color: "colour.neutral.70";
+                border: "divider";
+                borderRadius: "radius.system.badge";
+                opacity: number;
+                transition: "[opacity 0.3s ease-in-out]";
+                zIndex: "100";
+            };
+            overlay: {
+                position: "absolute";
+                inset: "[0]";
+                opacity: number;
+                bg: "colour.neutral.10";
+                transition: "[opacity 0.3s ease-in-out]";
+                zIndex: "100";
+            };
+        };
+        default: {
+            root: {
+                position: "absolute";
+                top: "[0]";
+                left: "[50%]";
+                transform: "translateX(-50%)";
+                opacity: number;
+                transition: "[opacity 0.3s ease-in-out]";
+                zIndex: "600";
+            };
+            message: {
+                px: "spacing.400";
+                py: "spacing.200";
+                bg: "colour.neutral.20";
+                color: "colour.neutral.70";
+                border: "divider";
+                borderTopWidth: "0";
+                borderRadius: "radius.system.badge";
+                transition: "[transform 0.3s ease-in-out]";
+                transform: "translateY(-100%)";
+            };
+        };
+        long: {
+            root: {
+                borderRadius: "radius.system.layout";
+                bg: "colour.neutral.20";
+                mx: "auto";
+                opacity: number;
+                transition: "[opacity 0.3s ease-in-out]";
+                width: "overlay.sm";
+            };
+            message: {
+                p: "spacing.1200";
+            };
+        };
+        page: {
+            root: {
+                position: "relative";
+                opacity: number;
+                transition: "[opacity 0.2s linear]";
+            };
+            critical: {
+                opacity: number;
+                transition: "[opacity 0.2s linear]";
+                position: "absolute";
+                top: "spacing.000";
+                left: "spacing.000";
+            };
+            message: {
+                opacity: number;
+                transition: "[opacity 0.2s linear]";
+            };
+        };
+        'start-up': {
+            root: {
+                display: "flex";
+                flexDirection: "column";
+                alignItems: "center";
+                justifyContent: "center";
+                opacity: number;
+                transition: "[opacity 0.3s ease-in-out]";
+                position: "fixed";
+                top: "[0]";
+                left: "[0]";
+                right: "[0]";
+                bottom: "[0]";
+                zIndex: "600";
+                bg: "colour.neutral.10";
+            };
+            message: {
+                width: "overlay.sm";
+                maxWidth: "[75vw]";
+                opacity: number;
+                transition: "[opacity 0.3s ease-in-out]";
+            };
+        };
+        validate: {
+            root: {
+                position: "relative";
+            };
+            message: {
+                position: "absolute";
+                left: "spacing.000";
+                width: "[max-content]";
+                color: "colour.neutral.70";
+                padding: "spacing.200";
+                bg: "colour.neutral.10";
+                textStyle: "typography.body.md";
+                animationStyle: "loading-fade-next";
+                display: "inline-grid";
+            };
+        };
+    };
+    position: {
+        bottom: {
+            message: {
+                top: "[100%]";
+            };
+        };
+        top: {
+            message: {
+                bottom: "[100%]";
+            };
+        };
+        right: {
+            message: {
+                position: "static";
+            };
+        };
+    };
+    showCritical: {
+        true: {};
+    };
+    showIndicator: {
+        true: {};
+    };
+    showMessage: {
+        true: {};
+    };
+}>;
+export declare const loadingList: import('../../styled-system/types').SlotRecipeRuntimeFn<"svg" | "circle" | "marker" | "dots" | "root" | "item" | "tick", {
+    finished: {
+        true: {
+            svg: {
+                strokeWidth: number;
+                color: "colour.system.success.fill";
+                stroke: "colour.system.success.onFill";
+                strokeMiterlimit: number;
+                animation: "loadingItemFill 0.4s ease-in-out 0.4s forwards, loadingItemScale 0.3s ease-in-out 0.9s both";
+            };
+            item: {
+                opacity: number;
+                filter: "[grayscale(1)]";
+            };
+        };
+    };
+}>;

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

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import { IressHTMLAttributes } from '../../../interfaces';
+import { IressStyledProps } from '../../../types';
 declare const templates: {
     chart: import("react/jsx-runtime").JSX.Element;
 };
-export interface ComponentLoadingProps extends IressHTMLAttributes {
+export interface ComponentLoadingProps extends IressStyledProps {
     /**
      * The chart that is being loaded for the first time or being refreshed/updated.
      */

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { IressHTMLAttributes } from '../../../interfaces';
-export interface DefaultLoadingProps extends IressHTMLAttributes {
+import { IressStyledProps } from '../../../types';
+export interface DefaultLoadingProps extends IressStyledProps {
     /**
      * Message to display when the loading time is longer than expected.
      * @default 'This is taking longer than expected...'

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

@@ -1,7 +1,7 @@
-import { IressProgressProps } from '../../../components/Progress/Progress.types';
 import { ReactNode } from 'react';
-import { IressHTMLAttributes } from '../../../interfaces';
-export interface LongLoadingProps extends IressHTMLAttributes {
+import { IressProgressProps } from '../../../components/Progress';
+import { IressStyledProps } from '../../../types';
+export interface LongLoadingProps extends IressStyledProps {
     /**
      * The children are displayed while loading. This will be displayed above the progress bar and checklist.
      */
@@ -40,7 +40,7 @@ export interface LongLoadingProps extends IressHTMLAttributes {
      * 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, 'className' | 'min' | 'max' | 'sectionTitle' | 'value'>) => ReactNode;
+    renderProgress?: (props: Pick<IressProgressProps, 'max' | 'sectionTitle' | 'value'>) => ReactNode;
     /**
      * Set the timeouts for showing the progress bar and message.
      */

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-import { IressHTMLAttributes } from '../../../interfaces';
+import { IressStyledProps } from '../../../types';
 declare const templates: {
     page: () => import("react/jsx-runtime").JSX.Element;
     form: () => import("react/jsx-runtime").JSX.Element;
     dashboard: () => import("react/jsx-runtime").JSX.Element;
 };
-export interface PageLoadingProps extends Omit<IressHTMLAttributes, 'children'> {
+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.
      */

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

@@ -1,7 +1,7 @@
-import { IressProgressProps } from '../../../components/Progress/Progress.types';
 import { ReactNode } from 'react';
-import { IressHTMLAttributes } from '../../../interfaces';
-export interface StartUpLoadingProps extends IressHTMLAttributes {
+import { IressProgressProps } from '../../../components/Progress';
+import { IressStyledProps } from '../../../types';
+export interface StartUpLoadingProps extends Omit<IressStyledProps, 'color'> {
     /**
      * Message to display when the loading time is longer than expected.
      * @default 'One moment please...'
@@ -32,12 +32,12 @@ export interface StartUpLoadingProps extends IressHTMLAttributes {
     /**
      * 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['value'];
+    progress?: IressProgressProps<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, 'className' | 'min' | 'max' | 'sectionTitle' | 'value'>) => ReactNode;
+    renderProgress?: (props: Pick<IressProgressProps<undefined>, 'max' | 'sectionTitle' | 'value'>) => ReactNode;
     /**
      * Only screen readers will see this message, it is changed to the `children` message after the delay.
      * @default 'Loading...'

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

@@ -1,7 +1,7 @@
 import { IressButtonProps } from '../../../components/Button';
 import { ReactNode } from 'react';
-import { IressHTMLAttributes } from '../../../interfaces';
-export interface ValidateLoadingProps extends IressHTMLAttributes {
+import { IressStyledProps } from '../../../types';
+export interface ValidateLoadingProps extends IressStyledProps {
     /**
      * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
      */
@@ -28,11 +28,11 @@ export interface ValidateLoadingProps extends IressHTMLAttributes {
      * This is a render prop that allows you to override the default button rendering.
      * This is useful if you want to use a different button component or if you want to add additional props to the button.
      */
-    renderButton?: (props: Pick<IressButtonProps, 'className' | 'loading'>) => ReactNode;
+    renderButton?: (props: Pick<IressButtonProps, 'loading'>) => ReactNode;
     /**
      * The time in milliseconds before the loading message is displayed.
      * @default 2500
      */
     timeout?: number;
 }
-export declare const ValidateLoading: ({ children, className, loading, 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 | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/src/patterns/Loading/hooks/useEstimatedProgressValue.d.ts

@@ -1,4 +1,4 @@
-import { IressProgressProps } from '../../../components/Progress/Progress.types';
+import { IressProgressProps } from '../../../components/Progress';
 /**
  * This hook is used to calculate the estimated progress of a loading component, allowing you to show an animated progress bar even when real progress is not available.
  *
@@ -8,4 +8,4 @@ import { IressProgressProps } from '../../../components/Progress/Progress.types'
  * @param latestMessageTimecode - The latest timecode of the message list. It helps us determine if still in progress, particularly when its higher than the estimated finish time.
  * @returns A number value that represents the current progress of the loading component.
  */
-export declare const useEstimatedProgressValue: (estimatedFinishTime: number, isLoaded?: boolean, progress?: IressProgressProps["value"], latestMessageTimecode?: number) => number;
+export declare const useEstimatedProgressValue: (estimatedFinishTime: number, isLoaded?: boolean, progress?: IressProgressProps<undefined>["value"], latestMessageTimecode?: number) => number;

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

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

package/dist/src/patterns/Loading/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/styled-system/css/css.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import type { SystemStyleObject } from '../types/index';
+
+type Styles = SystemStyleObject | undefined | null | false
+
+interface CssRawFunction {
+  (styles: Styles): SystemStyleObject
+  (styles: Styles[]): SystemStyleObject
+  (...styles: Array<Styles | Styles[]>): SystemStyleObject
+  (styles: Styles): SystemStyleObject
+}
+
+interface CssFunction {
+  (styles: Styles): string
+  (styles: Styles[]): string
+  (...styles: Array<Styles | Styles[]>): string
+  (styles: Styles): string
+
+  raw: CssRawFunction
+}
+
+export declare const css: CssFunction;

package/dist/src/styled-system/css/cva.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import type { RecipeCreatorFn } from '../types/recipe';
+
+export declare const cva: RecipeCreatorFn
+
+export type { RecipeVariant, RecipeVariantProps } from '../types/recipe';