@artsy/palette 40.3.0-canary.20ffe4c1.0 → 40.4.0

package/dist/Theme.d.ts

@@ -0,0 +1,83 @@
+import React from "react";
+export * from "@artsy/palette-tokens/dist/themes/v3";
+export { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
+interface ThemeProps {
+    children?: React.ReactNode;
+    theme?: "light" | "dark";
+}
+/**
+ * A wrapper component for passing down the Artsy theme context
+ */
+export declare const Theme: React.FC<React.PropsWithChildren<ThemeProps>>;
+/** Returns the current theme */
+export declare const useTheme: <T extends {
+    id: string;
+    name: string;
+    breakpoints: string[] & {
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+    };
+    colors: {
+        black100: string;
+        black60: string;
+        black30: string;
+        black15: string;
+        black10: string;
+        black5: string;
+        white100: string;
+        blue200: string;
+        blue150: string;
+        blue100: string;
+        brand: string;
+        blue15: string;
+        blue10: string;
+        green150: string;
+        green100: string;
+        green10: string;
+        yellow150: string;
+        yellow100: string;
+        yellow10: string;
+        orange150: string;
+        orange100: string;
+        orange10: string;
+        red150: string;
+        red100: string;
+        red50: string;
+        red10: string;
+    };
+    effects: {
+        dropShadow: string;
+        innerShadow: string;
+        flatShadow: string;
+        textShadow: string;
+        overlayGradient: string;
+        fadeRight: string;
+        backdrop: string;
+    };
+    fonts: {
+        sans: string;
+    };
+    mediaQueries: {
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        hover: string;
+    };
+    grid: {
+        breakpoints: {};
+    };
+    space: {
+        0.5: string;
+        1: string;
+        2: string;
+        4: string;
+        6: string;
+        12: string;
+    };
+    textVariants: Record<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "xxs" | "bq", import("@artsy/palette-tokens/dist/typography/v3").TextTreatment>;
+}>() => {
+    theme: T;
+};

package/dist/elements/AutocompleteInput/AutocompleteInput.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import { InputProps } from "../Input";
+import { ResponsiveValue } from "styled-system";
+export interface AutocompleteFooterActions {
+    /** Call to close dropdown */
+    onClose(): void;
+}
+/** Base option type — can be expanded */
+export interface AutocompleteInputOptionType {
+    text: string;
+    value: string;
+}
+export interface AutocompleteInputProps<T extends AutocompleteInputOptionType> extends Omit<InputProps, "onSelect" | "onSubmit"> {
+    /** Optionally enable clamping (default: `false`) */
+    clamp?: boolean;
+    defaultValue?: string;
+    dropdownMaxHeight?: ResponsiveValue<string | number>;
+    loading?: boolean;
+    header?: React.ReactNode;
+    /** Optionally disable flipping (default: `true`) */
+    flip?: boolean;
+    footer?: React.ReactNode | ((dropdownActions: AutocompleteFooterActions) => React.ReactNode);
+    /** Ref to the input; workaround generics */
+    forwardRef?: React.Ref<HTMLInputElement>;
+    /** on <enter> when no option is selected */
+    onSubmit?(query: string): void;
+    /** on <click> or <enter> when an option is selected */
+    onSelect?(option: T, index: number): void;
+    /** on <click> of the 'x' (clear) button */
+    onClear?(): void;
+    /** Callback that runs when options are hidden */
+    onClose?(): void;
+    options: T[];
+    renderOption?(option: T, i: number): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+}
+/** AutocompleteInput */
+export declare const AutocompleteInput: <T extends AutocompleteInputOptionType>({ clamp, defaultValue, dropdownMaxHeight, flip, footer, forwardRef: forwardedRef, header, height, id, loading, onChange, onClear, onClose, onKeyDown, onSelect, onSubmit, options, renderOption, ...rest }: AutocompleteInputProps<T>) => React.JSX.Element;

package/dist/elements/AutocompleteInput/AutocompleteInput.story.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const Demo: () => React.JSX.Element;
+export declare const FilterDemo: () => React.JSX.Element;
+export declare const ProgrammaticFocus: () => React.JSX.Element;

package/dist/elements/AutocompleteInput/AutocompleteInputOption.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ClickableProps } from "../Clickable";
+export interface AutocompleteInputOptionProps extends ClickableProps {
+    selected: boolean;
+}
+export declare const AutocompleteInputOption: React.ForwardRefExoticComponent<AutocompleteInputOptionProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/elements/AutocompleteInput/AutocompleteInputOptionLabel.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { TextProps } from "../Text";
+export interface AutocompleteInputOptionLabelProps extends TextProps {
+    text: string;
+}
+export declare const AutocompleteInputOptionLabel: React.FC<React.PropsWithChildren<AutocompleteInputOptionLabelProps>>;

package/dist/elements/AutocompleteInput/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./AutocompleteInput";
+export * from "./AutocompleteInputOption";
+export * from "./AutocompleteInputOptionLabel";

package/dist/elements/Avatar/Avatar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { FlexProps } from "../Flex";
+import { ImageProps } from "../Image";
+export interface AvatarProps extends FlexProps, Partial<ImageProps> {
+    /** If an image is missing, show initials instead */
+    initials?: string;
+    /** The size of the Avatar */
+    size?: "xxs" | "xs" | "sm" | "md";
+}
+/** An circular Avatar component containing an image or initials */
+export declare const Avatar: React.FC<React.PropsWithChildren<AvatarProps>>;

package/dist/elements/Avatar/Avatar.story.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Sizes: () => React.JSX.Element;
+export declare const WithImage: () => React.JSX.Element;
+export declare const WithBrokenImage: () => React.JSX.Element;

package/dist/elements/Avatar/index.d.ts

@@ -0,0 +1 @@
+export * from "./Avatar";

package/dist/elements/Banner/Banner.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { FlexProps } from "../Flex";
+export declare type BannerVariant = keyof typeof BANNER_VARIANTS;
+export interface BannerProps extends FlexProps {
+    variant?: BannerVariant;
+    dismissable?: boolean;
+    onClose?: () => void;
+}
+/** A banner */
+export declare const Banner: React.FC<React.PropsWithChildren<BannerProps>>;
+export declare const BANNER_VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+        color: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        color: string;
+    };
+    error: {
+        backgroundColor: string;
+        color: string;
+    };
+    brand: {
+        backgroundColor: string;
+        color: string;
+    };
+};

package/dist/elements/Banner/Banner.story.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/dist/elements/Banner/index.d.ts

@@ -0,0 +1 @@
+export * from "./Banner";

package/dist/elements/BaseTabs/BaseTab.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { TextProps } from "../Text";
+/**
+ * Utilize as="a" or as={Component} to alter functionality
+ */
+export declare type BaseTabProps<C extends React.ComponentType<React.PropsWithChildren<unknown>> = any> = TextProps & {
+    active?: boolean;
+    focus?: boolean;
+    hover?: boolean;
+} & React.ComponentPropsWithoutRef<C> & {
+    as?: C;
+};
+/**
+ * Extends `Text`. Should always be nested within a `BaseTabs` container.
+ *
+ * Use the `as` prop to alter behavior.
+ * E.g.: `<BaseTab as={RouterLink} to="/foo">Foo</BaseTab>`
+ * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`
+ */
+export declare const BaseTab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "gap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textTransform" | "top" | "verticalAlign" | "width" | "zIndex" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "lineClamp" | "margin" | "overflow" | "padding" | "bg" | "borderX" | "borderY" | "size" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "textColor" | "variant" | "hyphenate" | "overflowEllipsis"> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    variant?: import("styled-system").ResponsiveValue<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    textColor?: import("styled-system").ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue200" | "blue150" | "blue100" | "brand" | "blue15" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red50" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    lineClamp?: number | undefined;
+} & import("..").BoxProps & {
+    hyphenate?: boolean | undefined;
+    overflowEllipsis?: boolean | undefined;
+    textTransform?: import("styled-system").ResponsiveValue<import("../Text").TextTransform, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    lineClamp?: import("styled-system").ResponsiveValue<number, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+}, BaseTabProps<any>>> & string;

package/dist/elements/BaseTabs/BaseTabs.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { BoxProps } from "../Box";
+/** Extends `Box` */
+export declare type BaseTabsProps = BoxProps & {
+    /**
+     * Enable if tabs should fill the width of the container
+     * (as opposed to left-align)
+     */
+    fill?: boolean;
+    children: React.ReactNode;
+};
+/** Extends `Box`, provides configurable gutter */
+export declare const BaseTabs: React.ForwardRefExoticComponent<BaseTabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/elements/BaseTabs/BaseTabs.story.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _BaseTab: () => React.JSX.Element;
+export declare const Default: () => React.JSX.Element;
+export declare const AsA: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const AsClickable: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const AsRouterLink: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const Overflowing: () => React.JSX.Element;
+export declare const Fill: () => React.JSX.Element;
+export declare const BreakingOutOfContainerMargin: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const NestedChildren: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/elements/BaseTabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./BaseTab";
+export * from "./BaseTabs";

package/dist/elements/BaseTabs/tokens.d.ts

@@ -0,0 +1,6 @@
+export declare const STATES: {
+    default: import("styled-components").RuleSet<object>;
+    active: import("styled-components").RuleSet<object>;
+    focus: import("styled-components").RuleSet<object>;
+    hover: import("styled-components").RuleSet<object>;
+};

package/dist/elements/BorderBox/BorderBox.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BoxProps } from "../Box";
+export declare type BorderBoxProps = BoxProps;
+/**
+ * A `div` that has a common border and padding set by default
+ * @deprecated: Use `Box` along with props e.g. `border="1px solid" borderColor="black10" p={2}`,
+ * as needed.
+ */
+export declare const BorderBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;

package/dist/elements/BorderBox/BorderBoxBase.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+export interface BorderBoxProps extends FlexProps {
+    hover?: boolean;
+}
+/**
+ * A `div` that has a common border and padding set by default
+ * @deprecated: Use `Box`
+ */
+export declare const BorderBoxBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("..").BoxProps> & import("..").BoxProps, BorderBoxProps>> & string;

package/dist/elements/BorderBox/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./BorderBox";
+export { BorderBoxProps } from "./BorderBoxBase";

package/dist/elements/BorderedRadio/BorderedRadio.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { RadioProps } from "../Radio";
+export declare type BorderedRadioProps<T = any> = RadioProps<T>;
+/** A radio button with a border */
+export declare const BorderedRadio: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadioProps<unknown>, BorderedRadioProps<any>>> & string & Omit<(<T>({ children, disabled, hover, focus, error, label, selected, value, size, onSelect, ...rest }: RadioProps<T>) => import("react").JSX.Element), keyof import("react").Component<any, {}, any>>;

package/dist/elements/BorderedRadio/BorderedRadio.story.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/dist/elements/BorderedRadio/index.d.ts

@@ -0,0 +1 @@
+export * from "./BorderedRadio";

package/dist/elements/Box/Box.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridAreaProps, LayoutProps, PositionProps, ResponsiveValue, SpaceProps, TextAlignProps } from "styled-system";
+export interface BoxProps extends BackgroundProps, BorderProps, Omit<ColorProps, "color">, FlexboxProps, GridAreaProps, LayoutProps, PositionProps, SpaceProps, TextAlignProps {
+    gap?: ResponsiveValue<string | number>;
+}
+/**
+ * All the system functions for Box
+ */
+export declare const boxMixin: import("styled-system").styleFn;
+/**
+ * Box is just a `View` or `div` (depending on the platform) with common styled-systems
+ * hooks.
+ */
+export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps>> & string;
+/** Splits out props into valid and invalid BoxProps */
+export declare const splitBoxProps: <U>(props: U) => [BoxProps, Omit<U, keyof BoxProps>];

package/dist/elements/Box/Box.story.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Stack: () => React.JSX.Element;

package/dist/elements/Box/index.d.ts

@@ -0,0 +1 @@
+export * from "./Box";

package/dist/elements/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { BoxProps } from "../Box";
+/** Breadcrumbs extends Box */
+export declare type BreadcrumbsProps = BoxProps;
+/**
+ * A breadcrumb trail consists of a list of links to the parent pages of the
+ * current page in hierarchical order. It helps users find their place within
+ * a website or web application. Breadcrumbs are often placed horizontally
+ * before a page's main content.
+ */
+export declare const Breadcrumbs: React.FC<React.PropsWithChildren<BreadcrumbsProps>>;

package/dist/elements/Breadcrumbs/Breadcrumbs.story.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/dist/elements/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from "./Breadcrumbs";

package/dist/elements/Button/Button.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { ResponsiveValue } from "styled-system";
+import { BoxProps } from "../Box";
+import { ButtonSize, ButtonVariant } from "./types";
+export interface ButtonProps extends BoxProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * @description
+     * The theme of the button. It's possible to pass an array that
+     * behaves accordingly to the media breakpoints ["sm", "md", "lg", "xl"]
+     * @example
+     * "primaryBlack"
+     * "primaryWhite"
+     * ["primaryGray", "secondaryBlack"]
+     * @see {@link ButtonVariant}
+     */
+    variant?: ResponsiveValue<ButtonVariant>;
+    /** Size of the button */
+    size?: ResponsiveValue<ButtonSize>;
+    /** Displays a loader in the button */
+    loading?: boolean;
+    /** Forces hover state */
+    hover?: boolean;
+    /** Forces focus state */
+    focus?: boolean;
+    /** Forces active state */
+    active?: boolean;
+    /** Forces success state */
+    success?: boolean;
+    /** Optional icon slot */
+    Icon?: React.FunctionComponent<React.PropsWithChildren<BoxProps & {
+        fill?: ResponsiveValue<string>;
+    }>>;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const buttonMixin: import("styled-components").RuleSet<object>;

package/dist/elements/Button/Button.story.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _States: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const Sizes: () => React.JSX.Element;
+export declare const Variants: () => React.JSX.Element;
+export declare const NativeButtonProps: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithBoxProps: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const Loading: () => React.JSX.Element;
+export declare const As: () => React.JSX.Element;
+export declare const WithIcon: () => React.JSX.Element;
+export declare const ResponsiveSize: () => React.JSX.Element;

package/dist/elements/Button/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Button";
+export * from "./types";
+export { buttonMixin } from "./Button";
+export * from "./tokens";

package/dist/elements/Button/tokens.d.ts

@@ -0,0 +1,22 @@
+import { TextProps } from "../Text";
+import { ButtonSize, ButtonState, ButtonVariant } from "./types";
+export declare const BUTTON_STYLES: Record<ButtonVariant, Record<ButtonState, any>>;
+declare type ButtonVariants = Record<ButtonState, Record<ButtonVariant, any>>;
+/** Inverts the structure of the style object so that we can use responsive values for `variant` */
+export declare const BUTTON_VARIANTS: ButtonVariants;
+/** Available button sizes */
+export declare const BUTTON_SIZES: {
+    readonly small: {
+        readonly height: "30px";
+        readonly borderRadius: "15px";
+        readonly px: "25px";
+    };
+    readonly large: {
+        readonly height: "50px";
+        readonly borderRadius: "25px";
+        readonly px: "25px";
+    };
+};
+/** Text sizes associated with available button sizes */
+export declare const BUTTON_TEXT_SIZES: Record<ButtonSize, TextProps["variant"]>;
+export {};

package/dist/elements/Button/types.d.ts

@@ -0,0 +1,11 @@
+/** Names of button variants */
+export declare const BUTTON_VARIANT_NAMES: readonly ["primaryBlack", "primaryWhite", "primaryBlue", "primaryGray", "secondaryBlack", "secondaryBlue", "secondaryWhite", "secondaryNeutral", "tertiary"];
+/** Name of treatments */
+export declare type ButtonVariant = typeof BUTTON_VARIANT_NAMES[number];
+export declare const BUTTON_STATES: readonly ["default", "hover", "focus", "active", "loading", "disabled", "success"];
+/** Possible states that require styling */
+export declare type ButtonState = typeof BUTTON_STATES[number];
+/** Names of button sizes */
+export declare const BUTTON_SIZE_NAMES: readonly ["small", "large"];
+/** Available sizes */
+export declare type ButtonSize = typeof BUTTON_SIZE_NAMES[number];

package/dist/elements/CSSGrid/CSSGrid.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { GridProps } from "styled-system";
+import { BoxProps } from "../Box";
+/**
+ * All props available to the CSSGrid component
+ */
+export interface CSSGridProps extends GridProps, BoxProps {
+}
+/**
+ * A utility component that encapsulates CSS grid behavior
+ */
+export declare const CSSGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, CSSGridProps>> & string;

package/dist/elements/CSSGrid/CSSGrid.story.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const CssGridWithResponsiveProps: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            chromatic: {
+                delay: number;
+                diffThreshold: number;
+            };
+        };
+    };
+};

package/dist/elements/CSSGrid/index.d.ts

@@ -0,0 +1 @@
+export * from "./CSSGrid";

package/dist/elements/Cards/Card.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ImageProps } from "../Image";
+import { BoxProps } from "../Box";
+export interface CardProps extends BoxProps {
+    image: string | ImageProps | null | undefined;
+    title?: string | null;
+    subtitle?: string | null;
+    status?: string | null;
+    aspectWidth?: number;
+    aspectHeight?: number;
+}
+/**
+ * `Card` is a card with one image one tall image, and text for title
+ * and subtitle at the bottom.
+ */
+export declare const Card: React.FC<React.PropsWithChildren<CardProps>>;

package/dist/elements/Cards/Cards.story.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Single: {
+    (): React.JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                diffThreshold: number;
+            };
+        };
+    };
+};
+export declare const Triptych: {
+    (): React.JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                diffThreshold: number;
+            };
+        };
+    };
+};

package/dist/elements/Cards/TriptychCard.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { ImageProps } from "../Image";
+import { BoxProps } from "../Box";
+declare type Images = ImageProps[] | string[];
+export interface TriptychCardProps extends BoxProps {
+    /** 1, 2, or 3 images */
+    images: Images;
+    title?: string | null;
+    subtitle?: string | null;
+    status?: string | null;
+}
+export declare const isArrayOfStrings: (images: Images) => images is string[];
+/**
+ * `TriptychCard` is a card with a layout one square image on the left,
+ * one tall or two square images on the right, and text for title and subtitle
+ * at the bottom.
+ */
+export declare const TriptychCard: React.FC<React.PropsWithChildren<TriptychCardProps>>;
+export {};

package/dist/elements/Cards/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TriptychCard";
+export * from "./Card";