@appquality/unguess-design-system 2.8.6 → 2.8.12

package/build/stories/dropdowns/multiselect/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { MultiselectArgs } from "./_types";
+/**
+ * Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
+ * <hr>
+ * Used for this:
+    - To choose multiple items from a list of options
+    - To filter through a set of data by typing
+ */
+declare const Multiselect: (props: MultiselectArgs) => JSX.Element;
+export { Multiselect };

package/build/stories/dropdowns/multiselect/index.stories.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { MultiselectArgs } from "./_types";
+import { MenuArgs } from "../menu/_types";
+import { DropdownArgs } from "../select/_types";
+interface IItem {
+    label: string;
+    value: string;
+}
+interface MenuStoryArgs {
+    dropdown: DropdownArgs;
+    menu: MenuArgs;
+    items: Array<IItem>;
+    select: MultiselectArgs;
+    validation?: "success" | "warning" | "error";
+    hasHelpText?: boolean;
+}
+export declare const Default: Story<MenuStoryArgs>;
+export declare const Validation: Story<MenuStoryArgs>;
+declare const _default: ComponentMeta<(props: MultiselectArgs) => JSX.Element>;
+export default _default;

package/build/stories/dropdowns/select/_types.d.ts

@@ -0,0 +1,33 @@
+import { IDropdownProps, ISelectProps, IMessageProps } from "@zendeskgarden/react-dropdowns";
+export interface DropdownArgs extends IDropdownProps {
+    /** Opens the dropdown */
+    isOpen?: boolean;
+    /** Identifies the currently selected item */
+    selectedItem?: any;
+    /** Identifies the currently selected items */
+    selectedItems?: any[];
+    /** Highlights an element at a selected index */
+    highlightedIndex?: number;
+    /** Sets the value of the input element*/
+    inputValue?: string;
+}
+export interface SelectArgs extends ISelectProps {
+    /** Applies compact styling */
+    isCompact?: boolean;
+    /** Removes borders and padding */
+    isBare?: boolean;
+    /** Indicates that the element is not interactive */
+    disabled?: boolean;
+    /** Applies inset `box-shadow` styling on focus */
+    focusInset?: boolean;
+    /** Defines the element's validation state */
+    validation?: 'success' | 'warning' | 'error';
+    /** Defines the icon rendered before the element's content */
+    start?: any;
+    /** Sets the style of dropdown item*/
+    isPrimary?: boolean;
+}
+export interface MessageArgs extends IMessageProps {
+    /** Applies styles based on validation state */
+    validation?: 'success' | 'warning' | 'error';
+}

package/build/stories/dropdowns/select/index.d.ts

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from "react";
+import { SelectArgs, DropdownArgs, MessageArgs } from "./_types";
+/**
+ * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
+ * <hr>
+ * Used for this:
+    - To make a selection from a list of options
+ * Not for this:
+    - To filter a large list of options, use Autocomplete instead
+    - To make multiple selections from a list, use Multiselect instead
+    - To select from a list on mobile, use a native Select instead
+ */
+declare const Select: (props: SelectArgs) => JSX.Element;
+declare const Dropdown: (props: PropsWithChildren<DropdownArgs>) => JSX.Element;
+declare const Message: (props: MessageArgs) => JSX.Element;
+export { Select, Dropdown, Message };

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { DropdownArgs, SelectArgs } from "./_types";
+import { MenuArgs } from "../menu/_types";
+interface IItem {
+    label: string;
+    value: string;
+}
+interface MenuStoryArgs {
+    dropdown: DropdownArgs;
+    menu: MenuArgs;
+    items: Array<IItem>;
+    select: SelectArgs;
+    validation?: "success" | "warning" | "error";
+    hasHelpText?: boolean;
+}
+export declare const Default: Story<MenuStoryArgs>;
+export declare const Validation: Story<MenuStoryArgs>;
+declare const _default: ComponentMeta<(props: import("react").PropsWithChildren<DropdownArgs>) => JSX.Element>;
+export default _default;

package/build/stories/forms/checkbox/_types.d.ts

@@ -0,0 +1,8 @@
+import { ICheckboxProps } from "@zendeskgarden/react-forms";
+export interface CheckboxArgs extends ICheckboxProps {
+    /**
+     * Sets the checkbox state to
+     * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)
+     */
+    indeterminate?: boolean;
+}

package/build/stories/forms/checkbox/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CheckboxArgs } from "./_types";
+/**
+   * A Checkbox lets users select and unselect options from a list.
+   * <hr>
+   * Used for this:
+   *  - To let users compare options from a list and select all, any, or none of those items
+   *  - To turn a single option on or off
+   * Not for this:
+   *  - To give the user a mutually exclusive choice, use the Radio component instead
+   *  - To let users activate an option that takes effect immediately, use a Toggle instead
+   **/
+declare const Checkbox: (props: CheckboxArgs) => JSX.Element;
+export { Checkbox };

package/build/stories/forms/checkbox/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { CheckboxArgs } from "./_types";
+export declare const Default: Story<CheckboxArgs>;
+declare const _default: ComponentMeta<(props: CheckboxArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/field/_types.d.ts

@@ -0,0 +1,3 @@
+import { IFieldProps } from "@zendeskgarden/react-forms";
+export interface FieldArgs extends IFieldProps {
+}

package/build/stories/forms/field/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Hint as ZendeskHint } from "@zendeskgarden/react-forms";
+import { FieldArgs } from "./_types";
+/**
+   * A Field is a wrapper for input elements
+   **/
+declare const Field: (props: FieldArgs) => JSX.Element;
+export { Field, ZendeskHint as Hint };

package/build/stories/forms/field/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { FieldArgs } from "./_types";
+export declare const Default: Story<FieldArgs>;
+declare const _default: ComponentMeta<(props: FieldArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/input/_types.d.ts

@@ -0,0 +1,9 @@
+import { IInputProps } from "@zendeskgarden/react-forms";
+export interface InputArgs extends IInputProps {
+    /** Removes borders and padding */
+    isBare?: boolean;
+    /** Applies inset `box-shadow` styling on focus */
+    focusInset?: boolean;
+    /** Applies validation state styling */
+    validation?: 'success' | 'warning' | 'error';
+}

package/build/stories/forms/input/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { InputArgs } from "./_types";
+/**
+   * An Input lets users enter text into a field.
+   * <hr>
+   * Used for this:
+   *  - To let the user enter data into a field
+   *  - To enter multiline text, use a Textarea
+   **/
+declare const Input: (props: InputArgs) => JSX.Element;
+export { Input };

package/build/stories/forms/input/index.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { InputArgs } from "./_types";
+export declare const Default: Story<InputArgs>;
+export declare const Success: Story<InputArgs>;
+export declare const Warning: Story<InputArgs>;
+export declare const Error: Story<InputArgs>;
+declare const _default: ComponentMeta<(props: InputArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/radio/_types.d.ts

@@ -0,0 +1,3 @@
+import { IRadioProps } from "@zendeskgarden/react-forms";
+export interface RadioArgs extends IRadioProps {
+}

package/build/stories/forms/radio/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { RadioArgs } from "./_types";
+/**
+   * Radio buttons let users choose a single option among two or more mutually exclusive options.
+   * <hr>
+   * Used for this:
+   *  - For choices or options that can't occur at the same time
+   *  - To indicate that two or more options are mutually exclusive
+   * Not for this:
+   *  - If the user can choose more than one option at once, use a Checkbox instead
+   *  - To select from a long list of options, use Select instead
+   **/
+declare const Radio: (props: RadioArgs) => JSX.Element;
+export { Radio };

package/build/stories/forms/radio/index.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { RadioArgs } from "./_types";
+export declare const Default: Story<RadioArgs>;
+export declare const Checked: Story<RadioArgs>;
+declare const _default: ComponentMeta<(props: RadioArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/textarea/_types.d.ts

@@ -0,0 +1,15 @@
+import { ITextareaProps } from "@zendeskgarden/react-forms";
+export interface TextareaArgs extends ITextareaProps {
+    /** Removes borders and padding */
+    isBare?: boolean;
+    /** Applies inset `box-shadow` styling on focus */
+    focusInset?: boolean;
+    /** Enables manual vertical resize */
+    isResizable?: boolean;
+    /** Defines the minimum height in rows */
+    minRows?: number;
+    /** Defines the maximum height in rows */
+    maxRows?: number;
+    /** Applies validation state styling */
+    validation?: 'success' | 'warning' | 'error';
+}

package/build/stories/forms/textarea/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TextareaArgs } from "./_types";
+/**
+   * A Textarea is a form control for multi-line text.
+   * <hr>
+   * Used for this:
+   *  - To enter multi-line text
+   **/
+declare const Textarea: (props: TextareaArgs) => JSX.Element;
+export { Textarea };

package/build/stories/forms/textarea/index.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { TextareaArgs } from "./_types";
+export declare const Default: Story<TextareaArgs>;
+export declare const Warning: Story<TextareaArgs>;
+export declare const Resize: Story<TextareaArgs>;
+declare const _default: ComponentMeta<(props: TextareaArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/toggle/_types.d.ts

@@ -0,0 +1,3 @@
+import { IToggleProps } from "@zendeskgarden/react-forms";
+export interface ToggleArgs extends IToggleProps {
+}

package/build/stories/forms/toggle/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ToggleArgs } from "./_types";
+/**
+   * A Toggle lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle is used for activation.
+   * <hr>
+   * Used for this:
+   *  - To see or compare the results of a settings change
+   *  - To activate a mode (such as "dark mode") which takes immediate effect
+   * Not for this:
+   *  - To let users select from a list of settings, use Checkboxes instead
+   **/
+declare const Toggle: (props: ToggleArgs) => JSX.Element;
+export { Toggle };

package/build/stories/forms/toggle/index.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { LabelArgs } from "../../label/_types";
+import { ToggleArgs } from "./_types";
+interface ToggleStoryProps extends ToggleArgs {
+    label: LabelArgs;
+}
+export declare const Default: Story<ToggleStoryProps>;
+declare const _default: ComponentMeta<(props: ToggleArgs) => JSX.Element>;
+export default _default;

package/build/stories/grid/col/_types.d.ts

@@ -0,0 +1,77 @@
+import { IColProps, GRID_NUMBER, BREAKPOINT, ALIGN_SELF, TEXT_ALIGN } from "@zendeskgarden/react-grid";
+export interface ColArgs extends IColProps {
+    /** Sets the total number of grid `columns` that the column spans on all screen sizes */
+    size?: GRID_NUMBER;
+    /** Defines the column size on extra-small screens.
+     *  See [breakpoints](/components/theme-object#default_theme).
+     */
+    xs?: BREAKPOINT;
+    /** Defines the column size on small screens*/
+    sm?: BREAKPOINT;
+    /** Defines the column size on medium screens */
+    md?: BREAKPOINT;
+    /** Defines the column size on large screens */
+    lg?: BREAKPOINT;
+    /** Defines the column size on extra-large screens */
+    xl?: BREAKPOINT;
+    /**
+     * Applies the `align-self` flex item property, overriding `Row alignItems`
+     * vertical alignment on all screen sizes
+     */
+    alignSelf?: ALIGN_SELF;
+    /** Applies the `align-self` flex item property to the column on extra-small screens */
+    alignSelfXs?: ALIGN_SELF;
+    /** Applies the `align-self` flex item property to the column on small screens */
+    alignSelfSm?: ALIGN_SELF;
+    /** Applies the `align-self` flex item property to the column on medium screens */
+    alignSelfMd?: ALIGN_SELF;
+    /** Applies the `align-self` flex item property to the column on large screens */
+    alignSelfLg?: ALIGN_SELF;
+    /** Applies the `align-self` flex item property to the column on extra-large screens */
+    alignSelfXl?: ALIGN_SELF;
+    /**
+     * Applies the RTL-aware `text-align` property to the column on all screen sizes
+     */
+    textAlign?: TEXT_ALIGN;
+    /** Applies the `text-align` property to the column on extra-small screens */
+    textAlignXs?: TEXT_ALIGN;
+    /** Applies the `text-align` property to the column on small screens */
+    textAlignSm?: TEXT_ALIGN;
+    /** Applies the `text-align` property to the column on medium screens */
+    textAlignMd?: TEXT_ALIGN;
+    /** Applies the `text-align` property to the column on large screens */
+    textAlignLg?: TEXT_ALIGN;
+    /** Applies the `text-align` property to the column on extra-large screens */
+    textAlignXl?: TEXT_ALIGN;
+    /**
+     * Offsets the column relative to the total number of `columns` in the
+     * grid on all screen sizes
+     */
+    offset?: GRID_NUMBER;
+    /** Applies offset to the column on extra-small screens */
+    offsetXs?: GRID_NUMBER;
+    /** Applies offset to the column on small screens */
+    offsetSm?: GRID_NUMBER;
+    /** Applies offset to the column on medium screens */
+    offsetMd?: GRID_NUMBER;
+    /** Applies offset to the column on large screens */
+    offsetLg?: GRID_NUMBER;
+    /** Applies offset to the column on extra-large screens */
+    offsetXl?: GRID_NUMBER;
+    /**
+     * Applies the `order` flex item property to the column on all screen sizes. Note that
+     * order modification can introduce accessibility problems by
+     * confusing tab ordering. Rely on semantic DOM ordering whenever possible.
+     */
+    order?: GRID_NUMBER;
+    /** Sets the `order` flex item property of the column on extra-small screens */
+    orderXs?: GRID_NUMBER;
+    /** Sets the `order` flex item property of the column on small screens */
+    orderSm?: GRID_NUMBER;
+    /** Sets the `order` flex item property of the column on medium screens */
+    orderMd?: GRID_NUMBER;
+    /** Sets the `order` flex item property of the column on large screens */
+    orderLg?: GRID_NUMBER;
+    /** Sets the `order` flex item property of the column on extra-large screens */
+    orderXl?: GRID_NUMBER;
+}

package/build/stories/grid/col/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ColArgs } from "./_types";
+declare const Col: (props: ColArgs) => JSX.Element;
+export { Col };

package/build/stories/grid/col/index.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { ColArgs } from "./_types";
+export declare const Basic: Story<(props: ColArgs) => JSX.Element>;
+export declare const Breaks: Story<(props: ColArgs) => JSX.Element>;
+export declare const Offset: Story<(props: ColArgs) => JSX.Element>;
+declare const _default: ComponentMeta<(props: ColArgs) => JSX.Element>;
+export default _default;

package/build/stories/grid/grid/_types.d.ts

@@ -0,0 +1,9 @@
+import { IGridProps, GRID_NUMBER, SPACE } from "@zendeskgarden/react-grid";
+export interface GridArgs extends IGridProps {
+    /** Defines the number of individual columns that the grid contains */
+    columns?: GRID_NUMBER;
+    /** Specifies the grid column gutter width. The value `false` collapses the gutters */
+    gutters?: SPACE;
+    /** Highlights the columns for layout debugging */
+    debug?: boolean;
+}

package/build/stories/grid/grid/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { GridArgs } from './_types';
+/**
+ * The Grid component is a framework for building modular layouts.
+ * <hr>
+ * Used for this:
+    - To structure the layout of a page
+ */
+declare const Grid: (props: GridArgs) => JSX.Element;
+export { Grid };

package/build/stories/grid/grid/index.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { RowStoryArg } from "../row/index.stories";
+import { GridArgs } from "./_types";
+interface GridProps extends GridArgs {
+    rows: Array<RowStoryArg>;
+}
+export declare const Default: Story<GridProps>;
+export declare const EqualColumns: Story<GridProps>;
+export declare const OneWiderColumn: Story<GridProps>;
+declare const _default: ComponentMeta<(props: GridArgs) => JSX.Element>;
+export default _default;

package/build/stories/grid/row/_types.d.ts

@@ -0,0 +1,48 @@
+import { IRowProps, ALIGN_ITEMS, JUSTIFY_CONTENT, WRAP } from "@zendeskgarden/react-grid";
+export interface RowArgs extends IRowProps {
+    /**
+     * Applies the `align-items` flex container property to the row.
+     * This affects vertical `Col` alignment on all screen sizes.
+     */
+    alignItems?: ALIGN_ITEMS;
+    /** Applies the `align-items` flex container property to the row on extra-small screens */
+    alignItemsXs?: ALIGN_ITEMS;
+    /** Applies the `align-items` flex container property to the row on small screens */
+    alignItemsSm?: ALIGN_ITEMS;
+    /** Applies the `align-items` flex container property to the row on medium screens */
+    alignItemsMd?: ALIGN_ITEMS;
+    /** Applies the `align-items` flex container property to the row on large screens */
+    alignItemsLg?: ALIGN_ITEMS;
+    /** Applies the `align-items` flex container property to the row on extra-large screens */
+    alignItemsXl?: ALIGN_ITEMS;
+    /**
+     * Applies the `justify-content` flex container property to the row.
+     * This affects horizontal `Col` alignment on all screen sizes.
+     */
+    justifyContent?: JUSTIFY_CONTENT;
+    /** Applies the `justify-content` flex container property to the row on extra-small screens */
+    justifyContentXs?: JUSTIFY_CONTENT;
+    /** Applies the `justify-content` flex container property to the row on small screens */
+    justifyContentSm?: JUSTIFY_CONTENT;
+    /** Applies the `justify-content` flex container property to the row on medium screens */
+    justifyContentMd?: JUSTIFY_CONTENT;
+    /** Applies the `justify-content` flex container property to the row on large screens */
+    justifyContentLg?: JUSTIFY_CONTENT;
+    /** Applies the `justify-content` flex container property to the row on extra-large screens */
+    justifyContentXl?: JUSTIFY_CONTENT;
+    /**
+     * Applies the `flex-wrap` container property to the row. This affects `Col` wrapping on
+     * all screen sizes.
+     */
+    wrap?: WRAP;
+    /** Applies the `flex-wrap` container property to the row on extra-small screens */
+    wrapXs?: WRAP;
+    /** Applies the `flex-wrap` container property to the row on small screens */
+    wrapSm?: WRAP;
+    /** Applies the `flex-wrap` container property to the row on medium screens */
+    wrapMd?: WRAP;
+    /** Applies the `flex-wrap` container property to the row on large screens */
+    wrapLg?: WRAP;
+    /** Applies the `flex-wrap` container property to the row on extra-large screens */
+    wrapXl?: WRAP;
+}

package/build/stories/grid/row/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { RowArgs } from "./_types";
+declare const Row: (props: RowArgs) => JSX.Element;
+export { Row };

package/build/stories/grid/row/index.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { RowArgs } from "./_types";
+import { ColArgs } from "../col/_types";
+export interface RowStoryArg extends RowArgs {
+    cols: Array<ColArgs>;
+}
+export declare const Basic: Story<RowStoryArg>;
+declare const _default: ComponentMeta<(props: RowArgs) => JSX.Element>;
+export default _default;

package/build/stories/icons/_types.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from "react";
+export interface IconArgs extends SVGProps<SVGSVGElement> {
+    /** Specifies the icon type */
+    type: 'square' | 'triangle' | 'circle';
+    /** Specifies icon size */
+    size?: number;
+}

package/build/stories/icons/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconArgs } from './_types';
+declare const Icon: (props: IconArgs) => JSX.Element;
+export { Icon };

package/build/stories/icons/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { IconArgs } from "./_types";
+export declare const Default: Story<IconArgs>;
+declare const _default: ComponentMeta<(props: IconArgs) => JSX.Element>;
+export default _default;

package/build/stories/label/_types.d.ts

@@ -0,0 +1,5 @@
+import { ILabelProps } from "@zendeskgarden/react-forms";
+export interface LabelArgs extends ILabelProps {
+    /** Applies regular (non-bold) font weight */
+    isRegular?: boolean;
+}

package/build/stories/label/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LabelArgs } from "./_types";
+/**
+   * A Label is used to specify a title for an input.
+   * <hr>
+   **/
+declare const Label: (props: LabelArgs) => JSX.Element;
+export { Label };

package/build/stories/label/index.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { LabelArgs } from "./_types";
+export declare const Basic: Story<LabelArgs>;
+export declare const Bold: Story<LabelArgs>;
+declare const _default: ComponentMeta<(props: LabelArgs) => JSX.Element>;
+export default _default;

package/build/stories/loaders/progress/_types.d.ts

@@ -0,0 +1,12 @@
+import { IProgressProps } from '@zendeskgarden/react-loaders';
+export interface ProgressArgs extends IProgressProps {
+    /** Sets the progress as a value between 0 and 100 */
+    value?: number;
+    /**
+     * Sets the foreground bar's fill color.
+     * Defaults to the `successHue` [theme](/components/theme-object#colors) value.
+     */
+    color?: string;
+    /** Adjusts the height */
+    size?: 'small' | 'medium' | 'large';
+}

package/build/stories/loaders/progress/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ProgressArgs } from './_types';
+/**
+ * A Progress loader communicates progress when downloading or uploading content.
+ * <hr>
+ * Used for this:
+ * - To communicate the amount of time left when downloading or uploading content
+ *
+   Not for this:
+    - When the loading time is unknown, use a Spinner instead
+    - When loading page content, use a Skeleton loader instead
+ */
+declare const Progress: (props: ProgressArgs) => JSX.Element;
+export { Progress };

package/build/stories/loaders/progress/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { ProgressArgs } from "./_types";
+export declare const Default: Story<ProgressArgs>;
+declare const _default: ComponentMeta<(props: ProgressArgs) => JSX.Element>;
+export default _default;

package/build/stories/loaders/skeleton/_types.d.ts

@@ -0,0 +1,9 @@
+import { ISkeletonProps } from '@zendeskgarden/react-loaders';
+export interface SkeletonArgs extends ISkeletonProps {
+    /** Sets the width in px or in percentage of the the parent element's width */
+    width?: string;
+    /** Sets the height in px or in percentage of parent element's height if the height is not already inherited by `line-height` */
+    height?: string;
+    /** Inverts the color for use on dark backgrounds */
+    isLight?: boolean;
+}

package/build/stories/loaders/skeleton/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SkeletonArgs } from './_types';
+/**
+ * A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
+ * <hr>
+ * Used for this:
+    - Skeleton is the default loader, used whenever the system can predict the format of the loading content
+    - To progressively load different parts of a page
+    - To avoid large layout shifts
+ 
+ * Not for this:
+   - When the system doesn’t have control over the content that is loading, use a Spinner instead
+   - To indicate that a component (like a button or search input) is busy, use Dots instead
+   - To communicate a typing status, use Inline instead
+ */
+declare const Skeleton: (props: SkeletonArgs) => JSX.Element;
+export { Skeleton };

package/build/stories/loaders/skeleton/index.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { SkeletonArgs } from "./_types";
+export declare const Default: Story<SkeletonArgs>;
+export declare const Light: Story<SkeletonArgs>;
+declare const _default: ComponentMeta<(props: SkeletonArgs) => JSX.Element>;
+export default _default;