@iress-oss/ids-components 0.0.1-dev.9 → 5.13.1

package/dist/src/components/Tag/components/TagListInput/TagListInput.types.d.ts

@@ -0,0 +1,45 @@
+import { IressInputProps } from '../../../Input';
+export interface TagListInputProps extends IressInputProps<string> {
+    /**
+     * You can completely replace the delete button to provide your own functionality
+     * When this is provided, `onTagDelete`, `onTagDeleteAll` and `onTagDeleteButtonBlur` will not be called.
+     */
+    deleteButton?: React.ReactNode;
+    /**
+     * Emitted when a tag is deleted
+     */
+    onTagDelete?: (label: string) => void;
+    /**
+     * Emitted when the combined tag delete button is clicked
+     */
+    onTagDeleteAll?: (label: string) => void;
+    /**
+     * Emitted when a tag's delete button is blurred
+     */
+    onTagDeleteButtonBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Text displayed next to tag count in tag when tag limit is exceeded
+     * @default options selected
+     */
+    selectedOptionsTagText?: string;
+    /**
+     * If you would like to override the styles for the tag list input,
+     * you can pass in a CSS module here with the following keys.
+     */
+    styles?: {
+        tagListInput?: string;
+        tagListInput__element?: string;
+        tagListInput__items?: string;
+        tagListInput__itemsInner?: string;
+    };
+    /**
+     * Tags to display in the tag list input
+     * This is usually the label key in an array of `LabelValue[]` pairs
+     */
+    tags?: string[];
+    /**
+     * Limit of tags to display before shortening to `selectedOptionsTagText`
+     * @default 5
+     */
+    tagLimit?: number;
+}

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

@@ -0,0 +1,4 @@
+export * from './Tag.types';
+export * from './Tag';
+export * from './TagInput/TagInput.types';
+export * from './TagInput/TagInput';

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

@@ -0,0 +1,2 @@
+import { TextWithEnums } from './Text.types';
+export declare const IressText: TextWithEnums;

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

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { TextElement, TextMode, TextVariant, TextAlign, HeadingLevel } from '../../enums';
+import { IressHTMLAttributes } from '../../interfaces';
+import { HeadingLevels, TextAligns, TextModes, TextVariants } from '../../main';
+export interface IressTextProps extends IressHTMLAttributes<HTMLElement> {
+    /**
+     * The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+     */
+    children?: ReactNode | string;
+    /**
+     * Text alignment.
+     */
+    align?: TextAlign | TextAligns;
+    /**
+     * The HTML element that should be rendered.
+     * @default TextElement.Div
+     */
+    element?: TextElement | HeadingLevel | TextElements | HeadingLevels;
+    /**
+     * Allows control of the text color.
+     *
+     * **Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+     */
+    mode?: TextMode | TextModes;
+    /**
+     * Removes bottom margin from last child of the text element if true.
+     */
+    noGutter?: boolean;
+    /**
+     * The typographic style to be rendered.
+     */
+    variant?: TextVariant | TextVariants;
+}
+export declare const TEXT_ELEMENTS: readonly ["p", "div", "span", "h1", "h2", "h3", "h4", "h5", "h6", "code", "blockquote", "caption", "cite", "small"];
+export type TextElements = (typeof TEXT_ELEMENTS)[number];
+export interface TextWithEnums extends React.FC<IressTextProps> {
+    /** @deprecated IressText.Mode is now deprecated and will be removed in a future version. Please use the value directly instead. */
+    Mode: typeof TextMode;
+    /** @deprecated IressText.Element is now deprecated and will be removed in a future version. Please use the value directly instead. */
+    Element: typeof TextElement;
+    /** @deprecated IressText.Align is now deprecated and will be removed in a future version. Please use the value directly instead. */
+    Align: typeof TextAlign;
+    /** @deprecated IressText.Variant is now deprecated and will be removed in a future version. Please use the value directly instead. */
+    Variant: typeof TextVariant;
+}

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

@@ -0,0 +1,2 @@
+export * from './Text.types';
+export * from './Text';

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

@@ -0,0 +1,3 @@
+import { IressToastProps, ToastWithEnums } from './Toast.types';
+export declare const Toast: ({ heading, headingLevel, headingText, status, actions, content, dismissible, onClose, children, "data-testid": dataTestId, className, ...restProps }: IressToastProps, ref: React.Ref<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const IressToast: ToastWithEnums;

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

@@ -0,0 +1,94 @@
+import { default as React } from 'react';
+import { IressHTMLAttributes } from '../../../interfaces';
+import { HeadingLevel } from '../../../enums';
+interface ToastHeadingProps<T = HTMLDivElement> extends IressHTMLAttributes<T> {
+    /**
+     * The heading area of the toast. You can pass react component such as `<IressText>Error</IressText>`.
+     * If a string is provided, it will default to a `<h2 />` element.
+     */
+    heading?: React.ReactNode;
+}
+interface ToastCloseButtonProps<T = HTMLDivElement> extends IressHTMLAttributes<T> {
+    /**
+     * A boolean to show hide the dismiss close button on the top right of the corner.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Click event on the close button of the toast.
+     */
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+}
+interface ToastActionProps<T = HTMLDivElement> extends IressHTMLAttributes<T> {
+    /**
+     * Buttons and controls for the toast.
+     */
+    actions?: React.ReactNode;
+}
+interface ToastContentProps extends ToastHeadingProps, ToastCloseButtonProps, ToastActionProps {
+    /**
+     * The toast message.
+     */
+    children?: React.ReactNode;
+    /**
+     * The content of the toast message.
+     * @deprecated use children instead.
+     */
+    content?: string;
+    /**
+     * System status of Toast
+     */
+    status: ToastStatus;
+}
+export interface IressToastProps extends IressHTMLAttributes<HTMLDivElement>, ToastContentProps {
+    /**
+     * The toast message.
+     */
+    children?: React.ReactNode;
+    /**
+     * The content of the toast message.
+     * @deprecated use children instead.
+     */
+    content?: string;
+    /**
+     * Heading level for the Toast heading. Will be ignored if headingText is not supplied.
+     * @default h2
+     * @deprecated Use `heading` instead.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text for Toast heading. If not supplied, heading will not be displayed.
+     * @deprecated Use `heading` instead.
+     */
+    headingText?: string;
+    /**
+     * The amount of time, in milliseconds, the toast is displayed on screen without
+     * the users interaction. Will fall back to timeout prop on parent toaster and then
+     * the default time of 6000ms. If set to 0, the toast will not auto dismiss.
+     * @default 6000
+     */
+    timeout?: number;
+}
+export interface IressToastAnimatedProps extends IressToastProps {
+    /**
+     * The animation of the toast. If not provided, it will simply fade in and out.
+     */
+    animation?: ToastAnimation;
+    /**
+     * Called when the element timed out.
+     */
+    onTimeout?: () => void;
+}
+export type ToastActionComponent = React.FC<ToastActionProps>;
+export type ToastCloseButtonComponent = React.FC<ToastCloseButtonProps>;
+export type ToastContentComponent = React.FC<ToastContentProps>;
+export type ToastWithEnums = React.ForwardRefExoticComponent<IressToastProps & React.RefAttributes<HTMLDivElement>> & {
+    /** @deprecated IressToast.HeadingLevel is now deprecated and will be removed in a future version. Please use the value directly. **/
+    HeadingLevel: typeof HeadingLevel;
+};
+export type NewToast = Omit<IressToastProps, 'status'>;
+export declare const TOAST_STATUS: readonly ["success", "error", "info"];
+export type ToastStatus = (typeof TOAST_STATUS)[number];
+export declare const TOAST_ANIMATION: readonly ["start-x", "end-x", "start-y", "end-y"];
+export type ToastAnimation = (typeof TOAST_ANIMATION)[number];
+export {};

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

@@ -0,0 +1,2 @@
+import { IressToastAnimatedProps } from './Toast.types';
+export declare const IressToastAnimated: ({ animation, className, onClose, onTimeout, timeout, ...restProps }: IressToastAnimatedProps) => false | import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { ToastStatus } from './Toast.types';
+interface ToastIconProps {
+    status: ToastStatus;
+}
+export declare const ToastIcon: React.FC<ToastIconProps>;
+export {};

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

@@ -0,0 +1,2 @@
+import { IressToasterProps } from './Toaster.types';
+export declare const IressToaster: ({ container, position, toasts, }: IressToasterProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,37 @@
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
+import { IressToastProps, ToastAnimation } from './Toast/Toast.types';
+import { FloatingUIContainer } from '../../types';
+export type ToastItem = IressToastProps & {
+    id: string;
+    content?: React.ReactNode;
+};
+export interface IressToasterOptions {
+    /**
+     * The position on the screen where the toast will appear.
+     * @default bottom-end
+     */
+    position?: ToasterPosition | ToasterPositions;
+    /**
+     * The container element to render the toaster into.
+     * By default, the toaster will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+}
+export interface IressToasterProps extends React.HTMLAttributes<HTMLDivElement>, IressToasterOptions {
+    toasts?: ToastItem[];
+}
+export interface IressToasterProviderProps extends PropsWithChildren, IressToasterOptions {
+}
+/** @deprecated IressToaster.Position is now deprecated and will be removed in a future version. Please use the value directly. **/
+export declare enum ToasterPosition {
+    BottomStart = "bottom-start",
+    BottomCenter = "bottom-center",
+    BottomEnd = "bottom-end",
+    TopStart = "top-start",
+    TopCenter = "top-center",
+    TopEnd = "top-end"
+}
+export declare const TOASTER_POSITION: readonly ["bottom-center", "bottom-end", "bottom-start", "top-center", "top-end", "top-start"];
+export type ToasterPositions = (typeof TOASTER_POSITION)[number];
+export declare const TOAST_POSITION_ANIMATION_MATRIX: Record<ToasterPosition, ToastAnimation>;
+export declare const TOASTER_ARIA_ATTRIBUTES: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

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

@@ -0,0 +1,11 @@
+import { IressToasterOptions, IressToasterProviderProps } from './Toaster.types';
+import { IressToastProps } from './Toast/Toast.types';
+interface ToasterContextValue {
+    show: (toast: IressToastProps) => void;
+    close: (id: string) => void;
+    options: IressToasterOptions;
+    setOptions: (options: IressToasterOptions) => void;
+}
+export declare const ToasterContext: import('react').Context<ToasterContextValue | undefined>;
+export declare const IressToasterProvider: ({ children, ...defaultOptions }: IressToasterProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+import { NewToast } from '../Toast/Toast.types';
+import { ToasterPositions } from '../Toaster.types';
+export declare const useToaster: (position?: ToasterPositions) => {
+    success: (toast: NewToast) => void;
+    error: (toast: NewToast) => void;
+    info: (toast: NewToast) => void;
+    close: (id: string) => void;
+    options: import('../Toaster.types').IressToasterOptions;
+};

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

@@ -0,0 +1,5 @@
+export * from './Toast/Toast.types';
+export * from './Toaster.types';
+export * from './Toast/Toast';
+export * from './ToasterProvider';
+export * from './hooks/useToaster';

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

@@ -0,0 +1,2 @@
+import { ToggleWithEnums } from './Toggle.types';
+export declare const IressToggle: ToggleWithEnums;

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

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { IressHTMLAttributes } from '../../interfaces';
+export interface ToggleProps extends Omit<IressHTMLAttributes, 'onChange'> {
+    /**
+     * Sets the checked state of the Toggle.
+     */
+    checked?: boolean;
+    /**
+     * 	Provides the label for the Toggle.
+     */
+    children: ReactNode;
+    /**
+     * Hides the label if true (label will still be read out by screen readers).
+     */
+    hiddenLabel?: boolean;
+    /**
+     * Determines the layout of the label with respect to the control.
+     */
+    layout?: ToggleLayout | ToggleLayouts;
+    /**
+     * Emitted when the checked state changes.
+     */
+    onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export interface ToggleLabelProps extends IressHTMLAttributes {
+    /**
+     * Hides the label if true (label will still be read out by screen readers)
+     */
+    hiddenLabel?: boolean;
+}
+/**
+ * @deprecated The ToggleLayout enum will be removed in future versions of IDS. Please use the ToggleLayouts type instead.
+ */
+export declare enum ToggleLayout {
+    Inline = "inline",
+    InlineBetween = "inline-between",
+    InlineReverse = "inline-reverse",
+    Stack = "stack"
+}
+export declare const TOGGLE_LAYOUTS: readonly ["inline", "inline-between", "inline-reverse", "stack"];
+export type ToggleLayouts = (typeof TOGGLE_LAYOUTS)[number];
+export interface ToggleWithEnums extends React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLDivElement>> {
+    /** @deprecated The IressToggle.Layout enum will be removed in future versions of IDS. Please use the value directly instead. */
+    Layout: typeof ToggleLayout;
+}

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

@@ -0,0 +1,2 @@
+export * from './Toggle.types';
+export * from './Toggle';

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

@@ -0,0 +1,2 @@
+import { TooltipWithEnums } from './Tooltip.types';
+export declare const IressTooltip: TooltipWithEnums;

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

@@ -0,0 +1,33 @@
+import { FloatingUIAligns } from '../../main';
+import { FloatingUIAlign } from '../../enums';
+import { IressHTMLAttributes } from '../../interfaces';
+import { ReactNode } from 'react';
+export interface IressTooltipProps extends IressHTMLAttributes {
+    /**
+     * Sets the alignment of the popover relative to the activator element.
+     * @default top
+     */
+    align?: FloatingUIAlign | FloatingUIAligns;
+    /**
+     * The element to add a tooltip to.
+     */
+    children: ReactNode;
+    /**
+     * Sets the tooltip display delay in milliseconds.
+     * @default 500
+     */
+    delay?: number;
+    /**
+     * Only used for internal testing.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Sets the tooltip text. Can accept a string or an array of strings - if given an array, will output each string on a new line.
+     */
+    tooltipText: string | string[];
+}
+export interface TooltipWithEnums extends React.FC<IressTooltipProps> {
+    /** @deprecated IressTooltip.Align is now deprecated and will be removed in a future version. Please use the GutterSizes type instead. */
+    Align: typeof FloatingUIAlign;
+}

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

@@ -0,0 +1,2 @@
+export * from './Tooltip.types';
+export * from './Tooltip';

package/dist/src/components/ValidationMessage/ValidationBase/ValidationBase.d.ts

@@ -0,0 +1,2 @@
+import { ValidationBaseProps } from './ValidationBase.types';
+export declare const ValidationBase: ({ as: BaseTag, children, className, prefix, status, visiblePrefix, ...restProps }: ValidationBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ValidationMessage/ValidationBase/ValidationBase.types.d.ts

@@ -0,0 +1,27 @@
+import { IressAnchorHTMLAttributes, SystemValidationStatus, SystemValidationStatuses } from '../../../main';
+import { ElementType, ReactNode } from 'react';
+export type ValidationBaseProps<T = ElementType, U = IressAnchorHTMLAttributes<T>> = Omit<U, 'prefix'> & {
+    /**
+     * The base tag of the label.
+     * @default label
+     */
+    as?: T;
+    /**
+     * Validation content (what went wrong, what went right).
+     */
+    children?: ReactNode;
+    /**
+     * Prefix to the validation message. Will be `status` prop if nothing is provided.
+     */
+    prefix?: ReactNode;
+    /**
+     * Whether message is danger, warning, success or info.
+     * **Note**: danger is translated to Error when used as the prefix.
+     * @default danger
+     **/
+    status?: SystemValidationStatus | SystemValidationStatuses;
+    /**
+     * If set to true, the prefix will be visually displayed (default is only available to screen readers)
+     */
+    visiblePrefix?: boolean;
+};

package/dist/src/components/ValidationMessage/ValidationLink/ValidationLink.d.ts

@@ -0,0 +1,2 @@
+import { IressValidationLinkProps } from './ValidationLink.types';
+export declare const IressValidationLink: ({ linkToTarget, ...props }: IressValidationLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ValidationMessage/ValidationLink/ValidationLink.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { ValidationBaseProps } from '../ValidationBase/ValidationBase.types';
+export interface IressValidationLinkProps extends Omit<ValidationBaseProps<'a'>, 'as'> {
+    /**
+     * Validation content (what went wrong, what went right).
+     */
+    children?: ReactNode;
+    /**
+     * ID of element the message is describing. If nothing is supplied a link will not render.
+     */
+    linkToTarget: string;
+}

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

@@ -0,0 +1,2 @@
+import { ValidationMessageWithEnums } from './ValidationMessage.types';
+export declare const IressValidationMessage: ValidationMessageWithEnums;

package/dist/src/components/ValidationMessage/ValidationMessage.types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ValidationBaseProps } from './ValidationBase/ValidationBase.types';
+import { IressHTMLAttributes, SystemValidationStatus } from '../../main';
+export interface IressValidationMessageProps extends Omit<ValidationBaseProps<'div', IressHTMLAttributes<'div'>>, 'as'> {
+    /**
+     * Validation content (what went wrong, what went right).
+     */
+    children?: ReactNode;
+}
+export interface ValidationMessageWithEnums extends React.FC<IressValidationMessageProps> {
+    /** @deprecated IressValidationMessage.Status enum is now deprecated and will be removed in a future version. Please use the SystemValidationStatuses type instead. **/
+    Status: typeof SystemValidationStatus;
+}

package/dist/src/components/ValidationMessage/ValidationSummary/ValidationSummary.d.ts

@@ -0,0 +1,2 @@
+import { IressValidationSummaryProps } from './ValidationSummary.types';
+export declare const IressValidationSummary: ({ messages, linkToTarget, prefix, visiblePrefix, status, className, "data-testid": dataTestId, ...restProps }: IressValidationSummaryProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/ValidationMessage/ValidationSummary/ValidationSummary.types.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { IressHTMLAttributes, ValidationMessageObj } from '../../../interfaces';
+import { SystemValidationStatus } from '../../../enums';
+import { SystemValidationStatuses } from '../../../main';
+export interface IressValidationSummaryProps extends Omit<IressHTMLAttributes<HTMLUListElement>, 'prefix'> {
+    /**
+     * ValidationMessage Array containing the `id` of the field and the validation message
+     **/
+    messages: ValidationMessageObj[];
+    /**
+     * Renders validation messages as links pointing at the field it relates to, specified as a string
+     * Only works when used with the `messages` prop.
+     */
+    linkToTarget?: string;
+    /**
+     * Prefix to all validation messages. Will be `status` prop if nothing is provided.
+     */
+    prefix?: ReactNode;
+    /**
+     * Status for all child ValidationMessage components
+     */
+    status?: SystemValidationStatus | SystemValidationStatuses;
+    /**
+     * If set to true, the prefix will be visually displayed (default is only available to screen readers)
+     */
+    visiblePrefix?: boolean;
+}

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

@@ -0,0 +1,6 @@
+export * from './ValidationMessage';
+export * from './ValidationMessage.types';
+export * from './ValidationLink/ValidationLink';
+export * from './ValidationLink/ValidationLink.types';
+export * from './ValidationSummary/ValidationSummary';
+export * from './ValidationSummary/ValidationSummary.types';

package/dist/src/constants.d.ts

@@ -0,0 +1,123 @@
+/**
+ * Breakpoints are the points at which the layout of a page will change in response to the size of the viewport.
+ */
+export declare const BREAKPOINT_DETAILS: {
+    /**
+     * Extra small breakpoint, for mobile devices
+     */
+    xs: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        minScreenWidth: string;
+        maxScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+    /**
+     * Small breakpoint, for larger mobile devices and tablets
+     */
+    sm: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        minScreenWidth: string;
+        maxScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+    /**
+     * Medium breakpoint for tablets and small desktops
+     */
+    md: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        minScreenWidth: string;
+        maxScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+    /**
+     * Large breakpoint for desktops
+     */
+    lg: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        minScreenWidth: string;
+        maxScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+    /**
+     * Extra large breakpoint for large desktops
+     */
+    xl: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        minScreenWidth: string;
+        maxScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+    /**
+     * Extra extra large breakpoint for extra large desktops (32inch)
+     */
+    xxl: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        minScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+};
+export declare const BREAKPOINTS: (keyof typeof BREAKPOINT_DETAILS)[];
+export declare const CSS_IDS_VERSION: string;
+export declare const DISPLAY_MODES: readonly ["inline", "overlay"];
+export declare const FLOATING_UI_ALIGNS: readonly ["auto", "bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end", "left-start", "left", "left-end", "right-start", "right", "right-end"];
+export declare const FOCUSABLE_QUERY_SELECTOR = "button, a[href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+export declare const FORM_ELEMENT_WIDTHS: readonly ["2", "4", "6", "8", "10", "12", "16", "25perc", "50perc", "75perc", "100perc"];
+/**
+ * The grid size is the base unit of the grid system.
+ */
+export declare const GRID_SIZE = 12;
+export declare const GUTTER_SIZES: readonly ["none", "xs", "sm", "md", "lg", "xl"];
+export declare const HEADING_LEVELS: readonly ["h2", "h3", "h4", "h5", "h6"];
+export declare const HORIZONTAL_ALIGNS: readonly ["around", "between", "center", "evenly", "left", "right"];
+export declare const LOGGER_LEVELS: readonly ["log", "warn", "error"];
+export declare const PADDING_SIZES: readonly ["none", "sm", "md", "lg"];
+export declare const SYSTEM_VALIDATION_STATUSES: readonly ["danger", "info", "success", "warning"];
+export declare const TEXT_ALIGNS: readonly ["inherit", "left", "center", "right", "justify"];
+export declare const TEXT_MODES: readonly ["danger", "info", "muted", "primary", "success", "warning", "positive", "negative"];
+export declare const TEXT_VARIANTS: readonly ["blockquote", "body", "bold", "code", "display", "display1", "display2", "display3", "display4", "h1", "h2", "h3", "h4", "h5", "h6", "italic", "lead", "small", "cite", "caption"];
+export declare const VERTICAL_ALIGNS: readonly ["top", "middle", "bottom", "stretch"];
+/**
+ * The z-index determines the stacking order of elements. Elements with a higher z-index always sit in front of elements with a lower z-index. Each index has been mapped to the appropriate elevation(s).
+ */
+export declare const Z_INDEX: {
+    /**
+     * The default z-index used for most elements. Can be combined with raised and floating elevations.
+     */
+    '000': number;
+    /**
+     * Used for IressNavbar. Can be combined with overflow elevation.
+     */
+    100: number;
+    /**
+     * Used for IressPopover. Can be combined with floating elevation.
+     */
+    200: number;
+    /**
+     * Used for IressSlideout. Can be combined with floating elevation.
+     */
+    300: number;
+    /**
+     * Used for IressModal. Can be combined with floating elevation.
+     */
+    400: number;
+    /**
+     * Used for IressToast. Can be combined with floating elevation.
+     */
+    500: number;
+    /**
+     * Used for IressTooltip. Can be combined with floating elevation.
+     */
+    600: number;
+};