@artsy/palette 40.3.0 → 40.4.0

package/dist/elements/FilterSelect/FilterSelect.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { FilterSelectState } from "./Components/FilterSelectContext";
+export declare type FilterSelectProps = Partial<FilterSelectState>;
+export declare const FilterSelect: React.FC<React.PropsWithChildren<FilterSelectProps>>;
+export declare const isBelowTheFoldSelected: (selectedItems: any, resultsSorted: any) => boolean;

package/dist/elements/FilterSelect/FilterSelect.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/FilterSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterSelectChangeState, Items as FilterSelectItems, } from "./Components/FilterSelectContext";
+export * from "./FilterSelect";

package/dist/elements/Flex/Flex.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BoxProps } from "../Box";
+/**
+ * Flex is Box with display: flex
+ */
+export declare type FlexProps = BoxProps;
+/**
+ * Flex is Box with display: flex
+ */
+export declare const Flex: 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;
+}, BoxProps>> & string;

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

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

package/dist/elements/FullBleed/FullBleed.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { BoxProps } from "../Box";
+/** FullBleedProps */
+export declare type FullBleedProps = BoxProps;
+/**
+ * Utility to break out of parent containers
+ */
+export declare const FullBleed: 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/FullBleed/FullBleed.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/FullBleed/index.d.ts

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

package/dist/elements/GridColumns/GridColumns.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { GridColumnProps } from "styled-system";
+import { BoxProps } from "../Box";
+import { CSSGridProps } from "../CSSGrid";
+import { ColumnCell } from "./calculateGridColumn";
+/** GridColumns implements `Box` and the common grid properties */
+export declare type GridColumnsProps = Omit<CSSGridProps, "gridTemplateColumns">;
+/**
+ * A 12-column fluid grid
+ */
+export declare const GridColumns: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof CSSGridProps> & CSSGridProps, never>> & string;
+declare type CellProps = ColumnCell & GridColumnProps & BoxProps;
+/** Column implements `Box` and `gridColumn` */
+export declare type ColumnProps = CellProps & {
+    /** denotes whether or not to break to a new row after column */
+    wrap?: boolean;
+    children?: React.ReactNode;
+};
+/**
+ * A column sits within the GridColumns and spans the columns,
+ * sitting between gutters.
+ */
+export declare const Column: React.FC<React.PropsWithChildren<ColumnProps>>;
+export {};

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

@@ -0,0 +1,23 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const RealWorldExample: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const KitchenSink: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const CustomGutters: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/elements/GridColumns/calculateGridColumn.d.ts

@@ -0,0 +1,23 @@
+/** Number of columns a cell may span */
+export declare type ColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** Column number to begin a cell at */
+export declare type ColumnStart = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface ColumnCell {
+    /** number (between 1 and 12) of columns to span */
+    span?: ColumnSpan | ColumnSpan[];
+    /** number (between 1 and 12) of columns to begin at */
+    start?: ColumnStart | ColumnStart[];
+}
+/** The number of columns */
+export declare const NUMBER_OF_COLUMNS = 12;
+/** Position of the first column, 1-based */
+export declare const FIRST_COLUMN_POSITION = 1;
+/** Position of the last column, 1-based */
+export declare const LAST_COLUMN_POSITION: number;
+/**
+ * Builds a value for `gridColumn` based on the assumptions laid out
+ * by our 12-column grid.
+ */
+export declare const calculateGridColumn: ({ span: columnSpan, start: columnStart, }: ColumnCell) => string[];
+/** Hardcoded list of full-width column spans */
+export declare const GRID_COLUMN_FULL_WIDTHS: string[];

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

@@ -0,0 +1,2 @@
+export { ColumnSpan, ColumnStart } from "./calculateGridColumn";
+export * from "./GridColumns";

package/dist/elements/HTML/HTML.d.ts

@@ -0,0 +1,20 @@
+import React, { HTMLAttributes } from "react";
+import { TextProps } from "../Text";
+/**
+ * HTML
+ */
+export declare type HTMLProps = TextProps & HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement> & ({
+    html: string;
+} | {
+    children: React.ReactNode;
+});
+/**
+ * Sets reasonable defaults for tags that we might encounter in Markdown output.
+ */
+export declare const htmlMixin: import("styled-components").RuleSet<object>;
+/**
+ * Sets reasonable defaults for tags that we might encounter in Markdown output.
+ * If `html` prop is passed; it's set as innerHTML, otherwise contents are wrapped
+ * with default HTML styling.
+ */
+export declare const HTML: React.FC<React.PropsWithChildren<HTMLProps>>;

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

@@ -0,0 +1,17 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Html: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const DefaultHtmlStyling: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

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

package/dist/elements/HorizontalOverflow/HorizontalOverflow.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BoxProps } from "../Box";
+export declare type HorizontalOverflowProps = BoxProps & {
+    children: React.ReactNode;
+};
+export declare const HorizontalOverflow: React.ForwardRefExoticComponent<BoxProps & {
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

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

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

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

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

package/dist/elements/Image/Image.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { BorderRadiusProps, HeightProps, MaxHeightProps, SpaceProps, WidthProps } from "styled-system";
+export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "width" | "height">, SpaceProps, WidthProps, HeightProps, MaxHeightProps, BorderRadiusProps {
+    /** Flag for if image should be lazy loaded */
+    lazyLoad?: boolean;
+    /** Flag indicating that right clicks should be prevented */
+    preventRightClick?: boolean;
+    /** Currently, this is used by clients for BlurHash data,
+        decoded and represented as a data URL */
+    placeHolderURL?: string;
+}
+export declare const BaseImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("../CleanTag").TagProps & React.RefAttributes<any>, "ref"> & {
+    ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+}, ImageProps>> & string & Omit<React.ForwardRefExoticComponent<import("../CleanTag").TagProps & React.RefAttributes<any>>, keyof React.Component<any, {}, any>>;
+/** A web-only Image component. */
+export declare const Image: ({ lazyLoad, preventRightClick, ...rest }: ImageProps) => React.JSX.Element;

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

@@ -0,0 +1,35 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ImageWSrcSet: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ImageLazyLoad: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ImageLazyLoadSrcSet: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ImageLazyLoadSrcSetPlaceHolderURL: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/elements/Image/LazyImage.d.ts

@@ -0,0 +1,15 @@
+import React, { CSSProperties } from "react";
+import { BorderRadiusProps, HeightProps, WidthProps } from "styled-system";
+import { ImageProps } from "./Image";
+interface LazyImageProps extends ImageProps, WidthProps, HeightProps, BorderRadiusProps {
+    /** Eagerly load the image instead of lazy loading it */
+    preload?: boolean;
+    style?: CSSProperties;
+    /** The image component to render when preload is true */
+    imageComponent?: any;
+    onContextMenu?: (e: any) => void;
+    onError?: (event: React.SyntheticEvent<any, Event>) => void;
+}
+/** LazyImage */
+export declare const LazyImage: React.FC<React.PropsWithChildren<LazyImageProps>>;
+export {};

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

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

package/dist/elements/Input/Input.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { BoxProps } from "../Box";
+export interface InputProps extends BoxProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "width" | "height" | "capture"> {
+    active?: boolean;
+    description?: string;
+    disabled?: boolean;
+    error?: string | boolean;
+    focus?: boolean;
+    hover?: boolean;
+    required?: boolean;
+    title?: string;
+    labelOffset?: number;
+    showCounter?: boolean;
+}
+/** Input component */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { State } from "./types";
+export declare const INPUT_STATES: Record<State, any>;

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

@@ -0,0 +1 @@
+export declare type State = "active" | "default" | "disabled" | "error" | "focus" | "hover" | "completed";

package/dist/elements/Join/Join.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+interface JoinProps {
+    separator: React.ReactElement<any>;
+}
+/**
+ * `Join` is a higher order component that renders a separator component
+ * between each of `Join`'s direct children.
+ *
+ * @example
+ *
+ *  <Join separator={<SomeComponent/>}>
+ *    <child1/>
+ *    <child2/>
+ *    <child3/>
+ *  </Join>
+ *
+ * which renders
+ *
+ * <child1/>
+ * <SomeComponent/>
+ * <child2/>
+ * <SomeComponent/>
+ * <child3/>
+ */
+export declare const Join: React.FC<React.PropsWithChildren<JoinProps>>;
+export {};

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

@@ -0,0 +1,24 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithMultipleComponents: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithOneComponent: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithSomeOfTheChildrenEmpty: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithNestedChildren: () => React.JSX.Element;

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

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

package/dist/elements/Label/Label.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { BoxProps } from "../Box";
+export declare const LABEL_VARIANTS: {
+    light: {
+        backgroundColor: string;
+        color: string;
+    };
+    dark: {
+        backgroundColor: string;
+        color: string;
+    };
+    brand: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare type LabelVariant = keyof typeof LABEL_VARIANTS;
+export interface LabelProps extends BoxProps {
+    variant?: LabelVariant;
+    children: React.ReactNode;
+}
+export declare const Label: React.FC<React.PropsWithChildren<LabelProps>>;

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

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

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

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

package/dist/elements/LabeledInput/LabeledInput.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { InputProps } from "../Input";
+export interface LabeledInputProps extends InputProps {
+    label: React.ReactNode;
+    variant?: "suffix" | "prefix";
+}
+/** Input with a right-aligned or left-aligned label */
+export declare const LabeledInput: React.ForwardRefExoticComponent<LabeledInputProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

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

package/dist/elements/Link/Link.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ResponsiveValue } from "styled-system";
+import { BoxProps } from "../Box";
+export interface LinkProps extends BoxProps {
+    textDecoration?: ResponsiveValue<string>;
+}
+/**
+ * Basic <a> tag styled with additional LinkProps
+ *
+ * Tip: If working on Force, please use <Link as={RouterLink}>.
+
+ */
+export declare const Link: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, LinkProps>> & string;

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

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

package/dist/elements/Marquee/Marquee.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { BoxProps } from "../Box";
+declare const VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+        color: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+        color: string;
+    };
+    brand: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export interface MarqueeProps extends BoxProps {
+    variant?: keyof typeof VARIANTS;
+    speed?: string;
+    color?: string;
+    marqueeText: string;
+    divider?: boolean;
+}
+export declare const Marquee: React.FC<React.PropsWithChildren<MarqueeProps>>;
+export {};

package/dist/elements/Marquee/Marquee.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/Marquee/index.d.ts

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

package/dist/elements/Message/Message.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { FlexProps } from "../Flex";
+export declare const MESSAGE_VARIANTS: {
+    default: {
+        backgroundColor: string;
+        color: string;
+    };
+    info: {
+        backgroundColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        color: string;
+    };
+    alert: {
+        backgroundColor: string;
+        color: string;
+    };
+    warning: {
+        backgroundColor: string;
+        color: string;
+    };
+    error: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare type MessageVariant = keyof typeof MESSAGE_VARIANTS;
+export interface MessageProps extends FlexProps {
+    children?: React.ReactNode;
+    title?: string;
+    variant?: MessageVariant;
+}
+/**
+ * `Message` is used for in-line communication. These should fill the allotted
+ * container or space they are placed and key for temporal messages and
+ * comments within flows. Additionally, they can be used to highlight particular
+ * messaging within a specific section of a page or screen.
+ */
+export declare const Message: React.FC<React.PropsWithChildren<MessageProps>>;

package/dist/elements/Message/Message.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/Message/index.d.ts

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

package/dist/elements/Modal/ModalBase.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { ZIndexProps } from "styled-system";
+import { FlexProps } from "../Flex";
+/** BaseModal */
+export declare type ModalBaseProps = React.HTMLAttributes<HTMLDivElement> & FlexProps & ZIndexProps & {
+    children?: React.ReactNode;
+    dialogProps?: FlexProps;
+    onClose?(): void;
+};
+/**
+ * It seems we've landed on this value as the 'top'
+ */
+export declare const DEFAULT_MODAL_Z_INDEX = 9999;
+/**
+ * BaseModal
+ * Low-level modal that has no opinions about layout/overlay
+ * Modals content using a portal, locks scroll.
+ */
+export declare const ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>>;
+export declare const _ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>>;

package/dist/elements/Modal/ModalBase.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 DeferredFocusables: () => React.JSX.Element;
+export declare const Fullscreen: () => React.JSX.Element;
+export declare const Scrolling: () => React.JSX.Element;

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

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

package/dist/elements/ModalDialog/ModalDialog.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ModalBaseProps } from "../Modal";
+import { ModalDialogContentProps } from "./ModalDialogContent";
+export declare type ModalDialogProps = Omit<ModalBaseProps, "title"> & ModalDialogContentProps & {
+    leftPanel?: React.ReactNode;
+    rightPanel?: React.ReactNode;
+};
+export declare const ModalDialog: React.FC<React.PropsWithChildren<ModalDialogProps>>;

package/dist/elements/ModalDialog/ModalDialog.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/ModalDialog/ModalDialogContent.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from "react";
+import { ClickableProps } from "../Clickable";
+import { BoxProps } from "../Box";
+export interface ModalDialogContentProps extends BoxProps, Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    hasLogo?: boolean;
+    leftPanel?: React.ReactNode;
+    onClose: () => void;
+    rightPanel?: React.ReactNode;
+    title?: React.ReactNode;
+    header?: React.ReactNode;
+}
+export declare const ModalDialogContent: React.FC<React.PropsWithChildren<ModalDialogContentProps>>;
+export declare type ModalCloseProps = ClickableProps;
+export declare const ModalClose: FC<React.PropsWithChildren<ModalCloseProps>>;

package/dist/elements/ModalDialog/ModalDialogContent.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/ModalDialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ModalDialog";
+export * from "./ModalDialogContent";

package/dist/elements/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { BoxProps } from "../Box";
+import { Option } from "../Select";
+export interface MultiSelectProps extends BoxProps {
+    complete?: boolean;
+    description?: string;
+    disabled?: boolean;
+    error?: string | boolean;
+    focus?: boolean;
+    hover?: boolean;
+    name?: string;
+    options: Option[];
+    required?: boolean;
+    title?: string;
+    onSelect?: (selection: Option[]) => void;
+    visible?: boolean;
+}
+/** A drop-down multi-select menu */
+export declare const MultiSelect: React.FC<React.PropsWithChildren<MultiSelectProps>>;