@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

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

@@ -1,28 +0,0 @@
-import { InputRef } from '../Input/InputBase/InputBase';
-import { ReactElement, RefAttributes } from 'react';
-import { IressInputProps } from '../Input/Input';
-import { FormControlValue } from '../../types';
-export interface IressInputCurrencyProps<T extends FormControlValue = string | number> extends IressInputProps<T, undefined> {
-    /**
-     * Set input content align to right.
-     */
-    alignRight?: boolean;
-    /**
-     * Set the currency symbol and appended currency code, default is `AUD`.
-     */
-    currencyCode?: string;
-    /**
-     * Pass additional number format options.
-     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
-     */
-    formatOptions?: Omit<Intl.NumberFormatOptions, 'currency'>;
-    /**
-     * Set the region of the currency, default is `en-AU`.
-     */
-    locale?: Intl.LocalesArgument;
-    /**
-     * Set the currency symbol.
-     */
-    withSymbol?: boolean;
-}
-export declare const IressInputCurrency: <T extends FormControlValue = string | number>(props: IressInputCurrencyProps<T> & RefAttributes<InputRef<undefined> | null>) => ReactElement;

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

@@ -1,19 +0,0 @@
-import { ReactNode } from 'react';
-import { LabelBaseProps } from './LabelBase/LabelBase';
-type LabelElement<THtmlFor extends string | undefined = undefined> = THtmlFor extends string ? 'label' : 'strong';
-export type IressLabelProps<THtmlFor extends string | undefined = undefined> = Omit<LabelBaseProps<LabelElement<THtmlFor>>, 'element'> & {
-    /**
-     * Content to be displayed in the label.
-     * This can also include error messages to make sure it makes sense in this context.
-     */
-    children: ReactNode;
-    /**
-     * Used to connect it to the input element, it should be the input's id.
-     * If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
-     *
-     * [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
-     */
-    htmlFor?: THtmlFor;
-};
-export declare const IressLabel: <THtmlFor extends string | undefined = undefined>(props: IressLabelProps<THtmlFor>) => import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,28 +0,0 @@
-import { ReactNode } from 'react';
-import { IressStyledProps } from '../../../types';
-export type LabelBaseProps<E extends 'label' | 'strong' | 'legend' = 'label'> = IressStyledProps<E> & {
-    /**
-     * Content to be appended to the label.
-     * This is not affected by the `hiddenLabel` prop.
-     */
-    append?: ReactNode;
-    /**
-     * Content to be displayed in the label.
-     * This can also include error messages to make sure it makes sense in this context.
-     */
-    children: ReactNode;
-    /**
-     * The base tag of the label.
-     * @default label
-     */
-    element?: E;
-    /**
-     * Visually hides the label text, but still available to screen readers.
-     */
-    hiddenLabel?: boolean;
-    /**
-     * When set to true, the 'required asterisk (*)' is displayed next to the label text.
-     */
-    required?: boolean;
-};
-export declare const LabelBase: <E extends "label" | "strong" | "legend" = "label">({ append, children, className, "data-testid": dataTestId, element, hiddenLabel, required, ...restProps }: LabelBaseProps<E>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,42 +0,0 @@
-import { ReactElement, ReactNode, ElementType, ComponentPropsWithoutRef, MouseEventHandler } from 'react';
-import { ButtonElement, ButtonInstance, ButtonRef } from '../Button';
-import { IressCSSProps, IressTestProps } from '../../interfaces';
-export type IressLinkProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = IressCSSProps & IressTestProps & Omit<ComponentPropsWithoutRef<ButtonElement<C, THref>>, 'element'> & {
-    /**
-     * Sets the active state of the link, usually used to indicate the link has activated a modal, popover or slideout.
-     */
-    active?: boolean;
-    /**
-     * Content for the append slot.
-     */
-    append?: ReactNode;
-    /**
-     * Content is placed between prepend and append if provided. Used to describe the expected intention of this link.
-     */
-    children?: ReactNode;
-    /**
-     * Change the component that will be rendered as the link, used for third-party libraries that require a specific element type.
-     * By default, it will render a button or an anchor tag based on the `href` prop.
-     */
-    element?: C;
-    /**
-     * Contains a URL or a URL fragment that the hyperlink points to.
-     * If this property is set, an anchor tag will be rendered.
-     */
-    href?: THref;
-    /**
-     * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
-     */
-    loading?: boolean | string;
-    /**
-     * Emitted when the menu item is clicked.
-     */
-    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
-    /**
-     * Content for the prepend slot.
-     */
-    prepend?: ReactNode;
-};
-export declare const IressLink: <C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressLinkProps<C, THref> & {
-    ref?: ButtonRef<C, THref>;
-}) => ReactElement;

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

@@ -1,29 +0,0 @@
-/**
- * The atomic recipe is a function that takes a variant and returns a class name object. It can be used to create a component without JSX (eg. as a utility class).
- *
- * [Learn more](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva)
- */
-export declare const link: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "spinner" | "root" | "append" | "prepend", {
-    active: {
-        true: {
-            root: {
-                borderBottom: "[1px dashed currentColor]";
-            };
-        };
-    };
-    loading: {
-        true: {
-            content: {
-                _groupHover: {
-                    textDecoration: "underline";
-                };
-            };
-            root: {
-                cursor: "not-allowed";
-                filter: "[saturate(0.25)]";
-                opacity: number;
-                boxShadow: "none";
-            };
-        };
-    };
-}>;

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

@@ -1,110 +0,0 @@
-import { Context, ReactNode } from 'react';
-import { ControlledValue } from '../../hooks';
-import { FormControlValue, IressStyledProps } from '../../types';
-export interface IressMenuProps<T = FormControlValue, TMultiple extends boolean = false> extends Omit<IressStyledProps, 'defaultValue' | 'onChange' | 'value'> {
-    /**
-     * If set to true, change event will be fired with the correctly selected value.
-     */
-    changeOnBlur?: boolean;
-    /**
-     * Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
-     */
-    children?: ReactNode;
-    /**
-     * Initially selected values of menu when `role` is listbox.
-     * Used for uncontrolled menus.
-     */
-    defaultSelected?: ControlledValue<T, TMultiple>;
-    /**
-     * If set to true, menu will fill the width of its container.
-     */
-    fluid?: boolean;
-    /**
-     * Unique ID of the menu. If not provided, will be automatically generated.
-     * Used to add aria attributes for accessibility.
-     */
-    id?: string;
-    /**
-     * Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
-     * @default stack
-     */
-    layout?: 'stack' | 'inline' | 'inline-equal-width';
-    /**
-     * If set to true, menu items will contain checkboxes.
-     */
-    multiSelect?: TMultiple;
-    /**
-     * If set to true, menu items will not wrap onto a separate line when space is exceeded.
-     */
-    noWrap?: boolean;
-    /**
-     * Emitted when the menu value changes
-     */
-    onChange?: (value?: ControlledValue<T, TMultiple> | null) => void;
-    /**
-     * Selected values of menu when `role` is listbox.
-     * Used for controlled menus.
-     */
-    selected?: ControlledValue<T, TMultiple>;
-    /**
-     * Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
-     * Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
-     */
-    role?: 'menu' | 'list' | 'listbox';
-}
-export interface MenuContextValue<T = FormControlValue, TMultiple extends boolean = false> {
-    /**
-     * Whether the menu should change the selected value on blur.
-     * This is used by components such as `IressMenuItem` to determine if it should change the selected value on blur.
-     */
-    changeOnBlur?: boolean;
-    /**
-     * Whether the menu supports arrow key navigation.
-     * This is used by components such as `IressMenuItem` to determine if it should react to arrow key navigation.
-     */
-    hasArrowKeyNav?: boolean;
-    /**
-     * Whether the menu is considered composite by Floating UI.
-     * This is used by components such as `IressMenuItem` to determine whether it needs to be wrapped in a CompositeItem component.
-     */
-    isComposite: boolean;
-    /**
-     * Checks if the provided value is selected in the menu.
-     * This is used by components such as `IressMenuItem` to determine if it should be displayed as selected.
-     */
-    isSelected: (value?: T) => boolean;
-    /**
-     * Layout of the menu.
-     * This is used by components such as `IressMenuDivider` to determine how to display itself inside certain layouts.
-     */
-    layout: IressMenuProps<T, TMultiple>['layout'];
-    /**
-     * Whether the menu supports multiple selection.
-     * This is used by components such as `IressMenuItem` to determine if it should display a checkbox.
-     */
-    multiSelect?: boolean;
-    /**
-     * Whether the menu items should not wrap onto a separate line when space is exceeded.
-     * This is used by components such as `IressMenuItem` to avoid wrapping.
-     */
-    noWrap?: boolean;
-    /**
-     * The role of the menu. This is used by components such as `IressMenuItem` to determine which role to use.
-     * - `menu` means that sub-items should be `menuitem`
-     * - `list` means that sub-items should be `listitem`
-     * - `listbox` means that sub-items should be `option`
-     */
-    role?: IressMenuProps<T, TMultiple>['role'];
-    /**
-     * Whether the menu supports selection.
-     * This is used by components such as `IressMenuItem` to determine how it should behave.
-     */
-    supportsSelection: boolean;
-    /**
-     * Toggles the selected value of the menu.
-     * This is used by components such as `IressMenuItem` to change the selected value.
-     */
-    toggle: (value?: T, flag?: boolean) => void;
-}
-export declare const MenuContext: Context<MenuContextValue<FormControlValue, false> | undefined>;
-export declare const IressMenu: <T = FormControlValue, TMultiple extends boolean = false>({ changeOnBlur, className, defaultSelected, fluid, id: idProp, layout, multiSelect, noWrap, onChange, role: roleProp, selected: selectedProp, ...restProps }: IressMenuProps<T, TMultiple>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,121 +0,0 @@
-export declare const menu: import('../../styled-system/types').SlotRecipeRuntimeFn<"text" | "contents" | "root" | "append" | "item" | "checkboxMark", {
-    fluid: {
-        true: {
-            root: {
-                width: "[100%]";
-            };
-        };
-    };
-    hasAppendOrPrepend: {
-        true: {
-            item: {
-                display: "flex";
-                alignItems: "center";
-                gap: "sm";
-            };
-            text: {
-                display: "flex";
-                alignItems: "center";
-                gap: "sm";
-            };
-        };
-    };
-    heading: {
-        true: {
-            text: {
-                pb: "xs";
-                '&:not(:first-child)': {
-                    pt: "md";
-                };
-            };
-        };
-    };
-    insidePopover: {
-        true: {
-            root: {
-                my: "spacing.2";
-                px: "spacing.2";
-            };
-        };
-    };
-    isActiveInPopover: {
-        true: {
-            item: {
-                bg: "colour.primary.surface";
-                color: "colour.primary.text";
-            };
-        };
-    };
-    layout: {
-        stack: {
-            root: {
-                display: "inline-flex";
-                flexWrap: "wrap";
-                flexDirection: "column";
-                rowGap: "spacing.1";
-            };
-        };
-        inline: {
-            root: {
-                display: "inline-flex";
-                columnGap: "spacing.1";
-                flexWrap: "wrap";
-            };
-            item: {
-                alignItems: "center";
-                justifyContent: "center";
-                height: "[100%]";
-            };
-        };
-        'inline-equal-width': {
-            root: {
-                display: "flex";
-                flexDirection: "row";
-                columnGap: "spacing.1";
-                '& > :not(hr)': {
-                    flex: "1";
-                    textAlign: "center";
-                };
-            };
-            item: {
-                alignItems: "center";
-                justifyContent: "center";
-                height: "[100%]";
-                textAlign: "center";
-            };
-            contents: {
-                flex: "1";
-            };
-        };
-    };
-    multiSelect: {
-        true: {};
-    };
-    noWrap: {
-        true: {
-            root: {
-                '& > *': {
-                    maxWidth: "[100%]";
-                };
-            };
-            item: {
-                overflow: "hidden";
-            };
-            text: {
-                overflow: "hidden";
-            };
-            contents: {
-                whiteSpace: "nowrap";
-            };
-        };
-    };
-    selected: {
-        true: {
-            item: {
-                bg: "colour.neutral.20";
-                color: "colour.primary.text";
-                position: "relative";
-            };
-        };
-    };
-}>;

package/dist/src/components/Menu/MenuDivider/MenuDivider.d.ts

@@ -1,3 +0,0 @@
-import { IressDividerProps } from '../../Divider';
-export type IressMenuDividerProps = Omit<IressDividerProps, 'vertical' | 'role'>;
-export declare const IressMenuDivider: ({ className, ...restProps }: IressMenuDividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -1,99 +0,0 @@
-import { ReactNode, MouseEventHandler, KeyboardEventHandler, HTMLAttributes, ReactElement, FocusEventHandler, ElementType, ComponentPropsWithoutRef } from 'react';
-import { ButtonElement, ButtonInstance, ButtonRef } from '../../Button';
-import { FormControlValue } from '../../../types';
-import { PopoverItemHookReturn } from '../../Popover';
-import { IressCSSProps, IressTestProps } from '../../../interfaces';
-export interface MenuItemRenderProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> extends Pick<Partial<PopoverItemHookReturn>, 'id' | 'ref' | 'tabIndex'> {
-    /**
-     * If the item is inside a menu with the role of `listbox` and is selected, this will be set to `true`.
-     */
-    'aria-current'?: HTMLAttributes<ButtonRef<C, THref>>['aria-current'];
-    /**
-     * If the item is inside a menu with the role of `menu` or `listbox` and is selected, this will be set to `true`.
-     */
-    'aria-selected'?: HTMLAttributes<ButtonRef<C, THref>>['aria-selected'];
-    /**
-     * The children to be rendered inside the menu item.
-     */
-    children?: ReactNode;
-    /**
-     * The classes to be applied to the menu item, styled appropriately based on the menu it is inside.
-     */
-    className?: string;
-    /**
-     * Handles the selection of the menu item.
-     */
-    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
-    /**
-     * Handles the selection of the menu item via keyboard.
-     */
-    onKeyDown?: KeyboardEventHandler<ButtonInstance<C, THref>>;
-    /**
-     * The role of the menu item based on the menu it is inside.
-     */
-    role?: HTMLAttributes<ButtonInstance<C, THref>>['role'];
-}
-export type IressMenuItemProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = IressCSSProps & IressTestProps & Omit<ComponentPropsWithoutRef<ButtonElement<C, THref>>, 'element' | 'value'> & {
-    /**
-     * Section after menu item content.
-     */
-    append?: ReactNode;
-    /**
-     * When true, the item can be toggled even in single-select mode.
-     */
-    canToggle?: boolean;
-    /**
-     * The children to be rendered inside the menu item, describing the action.
-     */
-    children?: ReactNode;
-    /**
-     * The class name to be applied to the menu item.
-     */
-    className?: string;
-    /**
-     * Adds a divider after any content.
-     * If you would like to add content before the menu item, use a `<hr />` instead.
-     */
-    divider?: boolean;
-    /**
-     * Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type.
-     * By default, it will render a button or an anchor tag based on the `href` prop.
-     */
-    element?: C;
-    /**
-     * Contains a URL or a URL fragment that the hyperlink points to.
-     * If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
-     */
-    href?: THref;
-    /**
-     * Emitted when the menu item is blurred.
-     */
-    onBlur?: FocusEventHandler<ButtonInstance<C, THref>>;
-    /**
-     * Emitted when the menu item is clicked.
-     */
-    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
-    /**
-     * Emitted when a key is pressed while focused on the menu item.
-     */
-    onKeyDown?: KeyboardEventHandler<ButtonInstance<C, THref>>;
-    /**
-     * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
-     */
-    loading?: boolean | string;
-    /**
-     * Section before menu item content.
-     */
-    prepend?: ReactNode;
-    /**
-     * When true, shows the item in selected state.
-     */
-    selected?: boolean;
-    /**
-     * To be used when menu type is listbox.
-     */
-    value?: FormControlValue;
-};
-export declare const IressMenuItem: <C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressMenuItemProps<C, THref> & {
-    ref?: ButtonRef<C, THref>;
-}) => ReactElement;

package/dist/src/components/Menu/MenuText/MenuText.d.ts

@@ -1,19 +0,0 @@
-import { ReactNode } from 'react';
-import { IressTextProps, TextElements } from '../../Text';
-export type IressMenuTextProps<E extends TextElements = 'div'> = IressTextProps<E> & {
-    /**
-     * Section after menu item content.
-     */
-    append?: ReactNode;
-    /**
-     * Adds a divider after any content.
-     * If you would like to add content before the menu item, use a `<hr />` instead.
-     */
-    divider?: boolean;
-    /**
-     * 	Section before menu item content.
-     */
-    prepend?: ReactNode;
-};
-export declare const IressMenuText: <E extends TextElements = "div">({ append, children, className, "data-testid": dataTestid, divider, element, prepend, role, textStyle, ...restProps }: IressMenuTextProps<E>) => import("react/jsx-runtime").JSX.Element;
-export declare const IressMenuHeading: <E extends TextElements = "h2">({ className, element, textStyle, ...restProps }: IressMenuTextProps<E>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +0,0 @@
-export { IressMenu } from './Menu';
-export type * from './Menu';
-export * from './Menu.styles';
-export * from './MenuDivider/MenuDivider';
-export * from './MenuItem/MenuItem';
-export * from './MenuText/MenuText';

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

@@ -1,74 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import { FloatingUIContainer, IressStyledProps } from '../../types';
-export interface IressModalProps extends IressStyledProps {
-    /**
-     * Text to be displayed inside the modal.
-     */
-    children?: ReactNode;
-    /**
-     * Screenreader text for close button.
-     * @default Close
-     */
-    closeText?: string;
-    /**
-     * The container element to render the modal into.
-     * By default, the modal will render at the end of the document body.
-     */
-    container?: FloatingUIContainer;
-    /**
-     * When set to `true` the modal will be visible by default. Use for uncontrolled modals.
-     */
-    defaultShow?: boolean;
-    /**
-     * When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
-     */
-    disableBackdropClick?: boolean;
-    /**
-     * When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
-     */
-    fixedFooter?: boolean;
-    /**
-     * Panel to place modal controls.
-     */
-    footer?: ReactNode;
-    /**
-     * Sets the heading for the modal.
-     * If passed an element, it will render the element with an id, to ensure its connection to the modal.
-     */
-    heading?: ReactElement | string;
-    /**
-     * Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
-     */
-    id?: string;
-    /**
-     * When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
-     */
-    noCloseButton?: boolean;
-    /**
-     * Emitted when the modal has opened or closed internally. Use for controlled modals.
-     */
-    onShowChange?: (show: boolean) => void;
-    /**
-     * Emitted when the modal has mounted, unmounted, opened or closed. Open and close occur before animation begins.
-     */
-    onStatus?: (status: 'unmounted' | 'initial' | 'open' | 'close') => void;
-    /**
-     * Emitted when the modal has opened.
-     */
-    onEntered?: () => void;
-    /**
-     * Emitted when the modal has closed.
-     */
-    onExited?: () => void;
-    /**
-     * When set to `true` the modal will be visible. Use for controlled modals.
-     */
-    show?: boolean;
-    /**
-     * When set to `true`, the modal will act like a static element when open.
-     * This means it will not lock scroll or focus within the modal.
-     * Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
-     */
-    static?: boolean;
-}
-export declare const IressModal: ({ children, className, closeText, container, "data-testid": dataTestid, defaultShow, disableBackdropClick, fixedFooter, footer, heading: headingProp, noCloseButton, onEntered, onExited, onShowChange, onStatus, onTransitionEnd, show, static: isStatic, style, ...restProps }: IressModalProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,87 +0,0 @@
-/**
- * The atomic recipe is a function that takes a variant and returns a class name object. It can be used to create a component without JSX (eg. as a utility class).
- *
- * [Learn more](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva)
- */
-export declare const modal: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "header" | "content" | "modal" | "backdrop" | "closeButton" | "pushElement", {
-    /**
-     * When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
-     */
-    fixedFooter: {
-        true: {
-            modal: {
-                display: "flex";
-                flexDirection: "column";
-                maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]";
-                '@media (min-height: 600px)': {
-                    maxHeight: "[calc(100vh - (100px * 2))]";
-                };
-                overflow: "clip";
-            };
-            content: {
-                flex: "[1]";
-                overflowX: "hidden";
-                overflowY: "auto";
-                maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]";
-                '@media (min-height: 600px)': {
-                    maxHeight: "[calc(100vh - (100px * 2))]";
-                };
-            };
-            footer: {
-                flex: "[0]";
-            };
-        };
-    };
-    /**
-     * The state of the modal.
-     */
-    status: {
-        initial: {
-            backdrop: {
-                bg: "transparent";
-            };
-            modal: {
-                opacity: number;
-            };
-        };
-        close: {
-            backdrop: {
-                bg: "transparent";
-            };
-            modal: {
-                opacity: number;
-            };
-        };
-        open: {
-            backdrop: {
-                bg: "colour.system.backdrop.fill";
-            };
-            modal: {
-                opacity: number;
-            };
-        };
-        unmounted: {
-            backdrop: {
-                display: "none";
-            };
-            modal: {
-                display: "none";
-            };
-        };
-    };
-    /**
-     * When set to `true`, the modal will act like a static element when open.
-     * This means it will not lock scroll or focus within the modal.
-     * Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
-     */
-    static: {
-        true: {
-            backdrop: {
-                position: "static !important";
-            };
-            modal: {
-                position: "relative";
-            };
-        };
-    };
-}>;