@appquality/unguess-design-system 2.4.0 → 2.5.1

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

@@ -14,4 +14,6 @@ export interface AvatarArgs extends IAvatarProps {
     status?: 'available' | 'away';
     /** Sets the badge text and applies active styling */
     badge?: string | number;
+    /** Sets the avatar type */
+    avatarType?: 'icon' | 'image' | 'text';
 }

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

@@ -1,11 +1,8 @@
 /// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { AvatarArgs } from "./_types";
-interface AvatarProps extends AvatarArgs {
-    type: 'icon' | 'image' | 'text';
-}
-export declare const Default: Story<AvatarProps>;
-export declare const Square: Story<AvatarProps>;
+export declare const Default: Story<AvatarArgs>;
+export declare const Square: Story<AvatarArgs>;
 declare const _default: ComponentMeta<{
     (props: AvatarArgs): JSX.Element;
     Text: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,5 @@
+import { TagArgs } from "../tags/_types";
+export interface CounterArgs extends TagArgs {
+    status: "progress" | "completed" | "incoming" | "functional" | "experiential";
+    counter: number;
+}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { CounterArgs } from "./_types";
+/**
+ * Counter let users categorize content using a keyword.
+ */
+declare const Counter: {
+    (props: CounterArgs): JSX.Element;
+    Avatar: {
+        (props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
+        displayName: string;
+    };
+};
+export { Counter };

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { CounterArgs } from "./_types";
+interface TagStoryProps extends CounterArgs {
+    hasAvatar: boolean;
+}
+export declare const Default: Story<TagStoryProps>;
+declare const _default: ComponentMeta<{
+    (props: CounterArgs): JSX.Element;
+    Avatar: {
+        (props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
+        displayName: string;
+    };
+}>;
+export default _default;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { MultiselectArgs } from "./_types";
-import { MenuArgs } from "../../menu/_types";
+import { MenuArgs } from "../menu/_types";
 import { DropdownArgs } from "../select/_types";
 interface IItem {
     label: string;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+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
@@ -11,6 +11,6 @@ import { SelectArgs, DropdownArgs, MessageArgs } from "./_types";
     - To select from a list on mobile, use a native Select instead
  */
 declare const Select: (props: SelectArgs) => JSX.Element;
-declare const Dropdown: (props: DropdownArgs) => 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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { DropdownArgs, SelectArgs } from "./_types";
-import { MenuArgs } from "../../menu/_types";
+import { MenuArgs } from "../menu/_types";
 interface IItem {
     label: string;
     value: string;
@@ -16,5 +16,5 @@ interface MenuStoryArgs {
 }
 export declare const Default: Story<MenuStoryArgs>;
 export declare const Validation: Story<MenuStoryArgs>;
-declare const _default: ComponentMeta<(props: DropdownArgs) => JSX.Element>;
+declare const _default: ComponentMeta<(props: import("react").PropsWithChildren<DropdownArgs>) => 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/login-form/_types.d.ts

@@ -12,6 +12,10 @@ export interface LoginFormArgs {
     errors: FormikErrors<any>;
     touched: FormikTouched<any>;
     initialValues: LoginFields;
+    title: string;
+    buttonText: string;
+    placeholderEmail: string;
+    placeholderPassword: string;
 }
 export interface LoginFields {
     email: string;

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

@@ -0,0 +1,9 @@
+import { ImgHTMLAttributes } from 'react';
+export interface LogoArgs extends ImgHTMLAttributes<HTMLImageElement> {
+    /** Specifies the kind of logo */
+    type: 'vertical' | 'horizontal' | 'icon';
+    /** Specifies the css class */
+    className?: string;
+    /** Sets the image dimension */
+    size?: number;
+}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { LogoArgs } from './_types';
+/**
+ * A Logo is a visual way to represent a brand logo.
+ * <hr>
+ * Used for this:
+ *  - To visually represent a brand or product
+ *
+ * Not for this:
+ *  - To visually represent a common image
+ */
+declare const Logo: (props: LogoArgs) => JSX.Element;
+export { Logo };

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

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

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

@@ -0,0 +1,34 @@
+import { IModalProps } from "@zendeskgarden/react-modals";
+import { KeyboardEvent, MouseEvent } from "react";
+export interface ModalArgs extends IModalProps {
+    /**
+     * Handles close actions. Can be triggered from the backdrop and from the close icon.
+     *
+     * @param {Object} event The DOM event that triggered the close action
+     */
+    onClose?: (event: KeyboardEvent | MouseEvent) => void;
+    /**
+     * Centers the modal on the backdrop
+     */
+    isCentered?: boolean;
+    /**
+     * Animates the modal
+     */
+    isAnimated?: boolean;
+    /**
+     * Defines the DOM element that the modal will attatch to
+     */
+    appendToNode?: Element;
+    /**
+     * Applies large styling
+     */
+    isLarge?: boolean;
+    /**
+     * Directs keyboard focus to the modal on mount
+     */
+    focusOnMount?: boolean;
+    /**
+     * Returns keyboard focus to the element that triggered the modal
+     */
+    restoreFocus?: boolean;
+}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ModalArgs } from "./_types";
+declare const Modal: {
+    (props: ModalArgs): JSX.Element;
+    Header: import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-modals/dist/typings/elements/Header").IHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+};
+declare const FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+export { Modal, FooterItem };

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ModalArgs } from "./_types";
+import { ComponentMeta, Story } from "@storybook/react";
+interface ModalStoryArgs extends ModalArgs {
+    content: string | any;
+    title: string;
+    isDanger?: boolean;
+}
+export declare const Default: Story<ModalStoryArgs>;
+export declare const Danger: Story<ModalStoryArgs>;
+export declare const Large: Story<ModalStoryArgs>;
+export declare const WithCustomContent: Story<ModalStoryArgs>;
+declare const _default: ComponentMeta<{
+    (props: ModalArgs): JSX.Element;
+    Header: import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-modals/dist/typings/elements/Header").IHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+}>;
+export default _default;

package/build/stories/navigation/app-header/_types.d.ts

@@ -0,0 +1,17 @@
+import { BrandItemArgs } from "../header/header-item/_types";
+import { AvatarArgs } from "../../avatar/_types";
+import { HeaderArgs } from "../header/_types";
+export interface AppHeaderArgs extends HeaderArgs {
+    /** Display the changelog trigger item */
+    hasChangelog?: boolean;
+    /** Triggered when the changelog is clicked */
+    onChangelogClick?: () => void;
+    /** Set Brand Item settings */
+    brand?: BrandItemArgs;
+    /** Set Avatar settings */
+    avatar?: AvatarArgs & {
+        onProfileModalToggle?: () => void;
+    };
+    /** Toggle Sidebar */
+    onSidebarMenuToggle?: () => void;
+}

package/build/stories/navigation/app-header/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AppHeaderArgs } from "./_types";
+/**
+ * An Header is a visual way to display general information.
+ * This can include navList Items, modal, profile settings.
+ */
+declare const AppHeader: ({ brand, avatar, ...args }: AppHeaderArgs) => JSX.Element;
+export { AppHeader };

package/build/stories/navigation/app-header/index.stories.d.ts

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

package/build/stories/navigation/body/_types.d.ts

@@ -0,0 +1,5 @@
+import { IBodyProps } from '@zendeskgarden/react-chrome';
+export interface BodyArgs extends IBodyProps {
+    /** Adjusts the body content height to allow space for a footer component */
+    hasFooter?: boolean;
+}

package/build/stories/navigation/body/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BodyArgs } from "./_types";
+/**
+ * A Body defines the main content of an HTML document which displays on the browser
+ */
+declare const Body: (props: BodyArgs) => JSX.Element;
+export { Body };

package/build/stories/navigation/chrome/_types.d.ts

@@ -0,0 +1,7 @@
+import { IChromeProps } from '@zendeskgarden/react-chrome';
+export interface ChromeArgs extends IChromeProps {
+    /** Applies a custom hue to the chrome navigation */
+    hue?: string;
+    /** Prevents fixed positioning from being applied to the `<html>` element */
+    isFluid?: boolean;
+}

package/build/stories/navigation/chrome/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ChromeArgs } from "./_types";
+/**
+ * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
+ * <br>
+ * Used for this:
+    - To give a consistent dashboard and navigation experience
+ */
+declare const Chrome: (props: ChromeArgs) => JSX.Element;
+export { Chrome };

package/build/stories/navigation/content/_types.d.ts

@@ -0,0 +1,2 @@
+export interface ContentArgs {
+}

package/build/stories/navigation/content/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ContentArgs } from "./_types";
+/**
+ * A Content defines the main content of an HTML document which displays on the browser
+ */
+declare const Content: (props: ContentArgs) => JSX.Element;
+export { Content };

package/build/stories/navigation/header/_types.d.ts

@@ -0,0 +1,5 @@
+import { IHeaderProps } from '@zendeskgarden/react-chrome';
+export interface HeaderArgs extends IHeaderProps {
+    /** Displays logo for standlone usage  */
+    isStandalone?: boolean;
+}

package/build/stories/navigation/header/header-item/_types.d.ts

@@ -0,0 +1,32 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from "react";
+import { IHeaderItemProps, IHeaderItemTextProps } from "@zendeskgarden/react-chrome";
+export interface HeaderItemArgs extends IHeaderItemProps {
+    /** Maximizes the width of a flex item in the header */
+    maxX?: boolean;
+    /** Maximizes the height of the item (i.e. contains a search input) */
+    maxY?: boolean;
+    /** Rounds the border radius of the item */
+    isRound?: boolean;
+    /** Applies header logo styles to the item */
+    hasLogo?: boolean;
+}
+export interface BrandItemArgs extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Maximizes the width of a flex item in the header */
+    maxX?: boolean;
+    /** Maximizes the height of the item (i.e. contains a search input) */
+    maxY?: boolean;
+    /** Rounds the border radius of the item */
+    isRound?: boolean;
+    /** Display a brand identity name */
+    brandName?: string;
+    /** Add a descriptive text to the menu item icon*/
+    menuLabel?: string;
+    /** Triggered when the menu item is clicked */
+    toggleMenu?: () => void;
+}
+export interface HeaderItemTextArgs extends IHeaderItemTextProps {
+    /** Hides item text. Text remains accessible to screen readers. */
+    isClipped?: boolean;
+}
+export interface HeaderItemIconArgs extends HTMLAttributes<HTMLDivElement> {
+}

package/build/stories/navigation/header/header-item/brandItem.d.ts

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

package/build/stories/navigation/header/header-item/headerItem.d.ts

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

package/build/stories/navigation/header/header-item/headerItemIcon.d.ts

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

package/build/stories/navigation/header/header-item/headerItemText.d.ts

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

package/build/stories/navigation/header/header-item/index.d.ts

@@ -0,0 +1,5 @@
+import { HeaderItem } from "./headerItem";
+import { HeaderItemText } from "./headerItemText";
+import { HeaderItemIcon } from "./headerItemIcon";
+import { BrandItem } from "./brandItem";
+export { HeaderItem, HeaderItemText, HeaderItemIcon, BrandItem };

package/build/stories/navigation/header/header-item/utils.d.ts

@@ -0,0 +1,13 @@
+import { ThemeProps } from "styled-components";
+import { theme } from "../../../theme";
+/**
+ * Get unitless line height based on the given pixel-valued height and font size.
+ *
+ * @param {string|number} height Desired line height in pixels.
+ * @param {string|number} fontSize Font size (in pixels) of text contained within the line.
+ *
+ * @component
+ */
+declare const getLineHeight: (height: string | number, fontSize: string | number) => number;
+export declare const getNavWidth: (props: ThemeProps<typeof theme>) => string;
+export { getLineHeight };

package/build/stories/navigation/header/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { HeaderArgs } from "./_types";
+/**
+ * An Header is a visual way to display general information.
+ * This can include navList Items, modal, profile settings.
+ */
+declare const Header: {
+    (props: HeaderArgs): JSX.Element;
+    HeaderItem: (props: import("./header-item/_types").HeaderItemArgs) => JSX.Element;
+    HeaderItemText: (props: import("./header-item/_types").HeaderItemTextArgs) => JSX.Element;
+    HeaderItemIcon: (props: import("react").PropsWithChildren<import("./header-item/_types").HeaderItemIconArgs>) => JSX.Element;
+};
+export { Header };

package/build/stories/navigation/main/_types.d.ts

@@ -0,0 +1,2 @@
+export interface MainArgs {
+}

package/build/stories/navigation/main/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { MainArgs } from "./_types";
+/**
+ * A Main defines the main content of an HTML document which displays on the browser
+ */
+declare const Main: (props: MainArgs) => JSX.Element;
+export { Main };

package/build/stories/navigation/nav/_types.d.ts

@@ -0,0 +1,5 @@
+import { INavProps } from "@zendeskgarden/react-chrome";
+export interface NavArgs extends INavProps {
+    /** Expands the nav area to display the item text */
+    isExpanded?: boolean;
+}

package/build/stories/navigation/nav/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { NavArgs } from "./_types";
+/**
+ * The Nav component provides a high-level layout structure and sets a framework for navigating around dashboards.
+ * <br>
+ * Used for this:
+    - To give a consistent dashboard and navigation experience
+ */
+declare const Nav: (props: NavArgs) => JSX.Element;
+export { Nav };

package/build/stories/navigation/nav/nav-item/_types.d.ts

@@ -0,0 +1,29 @@
+import { INavItemProps, INavItemTextProps } from "@zendeskgarden/react-chrome";
+import { HTMLAttributes, PropsWithChildren } from "react";
+import { LabelArgs } from "../../../label/_types";
+export interface NavItemArgs extends INavItemProps {
+    /** Indicates that the item is current in the nav */
+    isCurrent?: boolean;
+    /** Indicates that the item contains a product logo */
+    hasLogo?: boolean;
+    /** Indicates that the item contains the company brandmark */
+    hasBrandmark?: boolean;
+    /** Expands the nav area to display the item text */
+    isExpanded?: boolean;
+}
+export interface NavItemTextArgs extends INavItemTextProps {
+    /** Wraps overflow item text instead of truncating long strings with an ellipsis **/
+    isWrapped?: boolean;
+}
+export interface NavItemIconArgs extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    /** Indicates that the item is current in the nav */
+    isCurrent?: boolean;
+    /** Indicates that the item has a gradient style when selected */
+    isStyled?: boolean;
+}
+export interface NavToggleArgs extends NavItemIconArgs {
+    /** Expands the nav area to display the item text */
+    isExpanded?: boolean;
+}
+export interface NavDividerArgs extends LabelArgs {
+}

package/build/stories/navigation/nav/nav-item/index.d.ts

@@ -0,0 +1,7 @@
+import { NavItem } from "./navItem";
+import { NavItemIcon } from "./navItemIcon";
+import { NavItemText } from "./navItemText";
+import { NavToggle } from "./navToggle";
+import { NavDivider } from "./navDivider";
+import { NavItemProject } from "./navItemProject";
+export { NavItem, NavItemIcon, NavItemText, NavToggle, NavDivider, NavItemProject };

package/build/stories/navigation/nav/nav-item/navDivider.d.ts

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

package/build/stories/navigation/nav/nav-item/navItem.d.ts

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

package/build/stories/navigation/nav/nav-item/navItemIcon.d.ts

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

package/build/stories/navigation/nav/nav-item/navItemProject.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { NavItemArgs } from "./_types";
+declare const NavItemProject: {
+    (props: NavItemArgs): JSX.Element;
+    Title: (props: import("./_types").NavItemTextArgs) => JSX.Element;
+    SubTitle: import("styled-components").StyledComponent<(props: import("./_types").NavItemTextArgs) => JSX.Element, any, NavItemArgs, never>;
+};
+export { NavItemProject };

package/build/stories/navigation/nav/nav-item/navItemText.d.ts

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

package/build/stories/navigation/nav/nav-item/navToggle.d.ts

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

package/build/stories/navigation/sidebar/_types.d.ts

@@ -0,0 +1,15 @@
+import { NavArgs } from "../nav/_types";
+export interface SidebarArgs extends NavArgs {
+    projects?: Array<ProjectItem>;
+    currentRoute?: string;
+    homeItemLabel?: string;
+    dividerLabel?: string;
+    tokens?: string;
+    isExpanded?: boolean;
+    onToggleMenu?: () => void;
+}
+export interface ProjectItem {
+    id: string;
+    title: string;
+    campaigns: string;
+}

package/build/stories/navigation/sidebar/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SidebarArgs } from "./_types";
+/**
+ * The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
+ * <br>
+ * Used for this:
+    - To give a consistent dashboard and navigation experience
+ */
+declare const Sidebar: (props: SidebarArgs) => JSX.Element;
+export { Sidebar };

package/build/stories/navigation/sidebar/index.stories.d.ts

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SidebarArgs } from "../navigation/sidebar/_types";
+import { AppHeaderArgs } from "../navigation/app-header/_types";
+export interface PageTemplatesArgs {
+    sidebar?: SidebarArgs;
+    header?: AppHeaderArgs;
+}
+export declare const PageTemplate: ({ sidebar, header, ...args }: PageTemplatesArgs) => JSX.Element;

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

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

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

@@ -1,5 +1,5 @@
-import { ITableProps, IRowProps, ICellProps, IHeaderCellProps } from "@zendeskgarden/react-tables";
-import { SIZE } from "@zendeskgarden/react-tables/dist/typings/styled";
+import { ITableProps, IRowProps, ICellProps, IHeaderCellProps, ISortableCellProps } from "@zendeskgarden/react-tables";
+import { SIZE, SORT } from "@zendeskgarden/react-tables/dist/typings/styled";
 export interface TableProps extends ITableProps {
     /** Sets the table size */
     size?: SIZE;
@@ -52,3 +52,11 @@ export interface HeadArgs extends ICellProps {
     /** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
     width?: string | number;
 }
+export interface SortableCellArgs extends ISortableCellProps {
+    /** Sets the sort order */
+    sort?: SORT;
+    /** Sets the width of the cell */
+    width?: string | number;
+    /** Passes props to the cell */
+    cellProps?: any;
+}