@artsy/palette 40.3.0 → 40.4.0

package/dist/elements/ResponsiveBox/ResponsiveBox.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { BoxProps } from "../Box";
+/** ResponsiveBoxMaxDimensions */
+export declare type ResponsiveBoxMaxDimensions = {
+    maxWidth: number;
+    maxHeight: number;
+} | {
+    maxWidth: number;
+} | {
+    maxHeight: number;
+} | {
+    maxWidth: "100%";
+};
+export interface ResponsiveBoxAspectDimensions {
+    aspectWidth: number;
+    aspectHeight: number;
+}
+/** ResponsiveBoxProps */
+export declare type ResponsiveBoxProps = Omit<BoxProps, "maxWidth" | "maxHeight"> & ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions;
+/** ResponsiveBox */
+export declare const ResponsiveBox: React.FC<React.PropsWithChildren<ResponsiveBoxProps>>;

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

@@ -0,0 +1,13 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Basic: () => React.JSX.Element;
+export declare const MaxWidth100: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ColumnsWithResponsiveImages: () => React.JSX.Element;

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

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

package/dist/elements/Select/Select.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { BoxProps } from "../Box";
+export interface Option {
+    value: string;
+    text: string;
+}
+export interface SelectProps extends BoxProps, Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onSelect" | "size"> {
+    description?: string;
+    disabled?: boolean;
+    error?: string | boolean;
+    focus?: boolean;
+    hover?: boolean;
+    name?: string;
+    options: Option[];
+    required?: boolean;
+    selected?: string;
+    title?: string;
+    onSelect?: (value: string) => void;
+}
+/** A drop-down select menu */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLElement>>;
+/** Creates a small caret */
+export declare const caretMixin: import("styled-components").RuleSet<object>;

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

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

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

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

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

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

package/dist/elements/Separator/Separator.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BorderProps, ColorProps, SpaceProps, WidthProps } from "styled-system";
+export interface SeparatorProps extends SpaceProps, WidthProps, BorderProps, ColorProps {
+}
+/**
+ * A horizontal divider whose width and spacing can be adjusted
+ */
+export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SeparatorProps>> & string;

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

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

package/dist/elements/Shelf/Shelf.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { BoxProps } from "../Box";
+import { FlexProps } from "../Flex";
+/** ShelfProps */
+export declare type ShelfProps = BoxProps & {
+    alignItems?: FlexProps["alignItems"];
+    showProgress?: boolean;
+    snap?: "none" | "start" | "end" | "center";
+    children: JSX.Element | JSX.Element[];
+    onChange?(index: number): void;
+};
+/**
+ * A Shelf is a new kind of carousel...
+ */
+export declare const Shelf: React.FC<React.PropsWithChildren<ShelfProps>>;

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

@@ -0,0 +1,18 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const DifferingAmounts: () => React.JSX.Element;
+export declare const NavigationButtons: () => React.JSX.Element;
+export declare const ClientSideUpdates: {
+    (): React.JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};

package/dist/elements/Shelf/ShelfNavigation.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ClickableProps } from "../Clickable";
+/** ShelfNavigationProps */
+export interface ShelfNavigationProps extends ClickableProps {
+    hover?: boolean;
+    focus?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Default next button
+ */
+export declare const ShelfNext: React.FC<React.PropsWithChildren<ShelfNavigationProps>>;
+/**
+ * Default previous button
+ */
+export declare const ShelfPrevious: React.FC<React.PropsWithChildren<ShelfNavigationProps>>;

package/dist/elements/Shelf/ShelfScrollBar.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { BoxProps } from "../Box";
+interface ShelfScrollBarProps extends BoxProps {
+    viewport?: HTMLDivElement | null;
+}
+/**
+ * A synthetic scrollbar
+ */
+export declare const ShelfScrollBar: React.FC<React.PropsWithChildren<ShelfScrollBarProps>>;
+interface ScrollState {
+    /** Left most scroll edge */
+    scrollLeft: number;
+    /** Width of the underlying rail */
+    scrollWidth: number;
+    /** Width of the viewport */
+    clientWidth: number;
+}
+export declare const buildScrollBar: ({ trackWidth, scrollLeft, scrollWidth, clientWidth, }: ScrollState & {
+    /** Width of the scrollbar track */
+    trackWidth: number;
+}) => {
+    requiresScrolling: boolean;
+    progress: number;
+    percentageVisible: number;
+    percentageOffset: number;
+    thumbWidth: number;
+    thumbOffset: number;
+};
+export {};

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

@@ -0,0 +1,3 @@
+export * from "./Shelf";
+export * from "./ShelfScrollBar";
+export * from "./ShelfNavigation";

package/dist/elements/Shelf/useClickScroll.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface UseClickScroll {
+    trackRef?: React.MutableRefObject<HTMLElement | null>;
+    thumbRef?: React.MutableRefObject<HTMLElement | null>;
+    viewport?: HTMLElement | null;
+    scrollWidth: number;
+    trackWidth: number;
+}
+export declare const useClickScroll: ({ trackRef, thumbRef, viewport, scrollWidth, trackWidth, }: UseClickScroll) => void;
+export {};

package/dist/elements/Shelf/useDragScroll.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface UseDragScroll {
+    viewport?: HTMLElement | null;
+    thumbRef?: React.MutableRefObject<HTMLElement | null>;
+    scrollWidth: number;
+    trackWidth: number;
+    scrollLeft: number;
+    clientWidth: number;
+}
+export declare const useDragScroll: ({ viewport, thumbRef, scrollWidth, trackWidth, scrollLeft, clientWidth, }: UseDragScroll) => void;
+export {};

package/dist/elements/ShowMore/ShowMore.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ClickableProps } from "../Clickable";
+import { TextProps } from "../Text";
+export interface ShowMoreProps extends ClickableProps, Pick<TextProps, "variant"> {
+    children: React.ReactNode;
+    initial?: number;
+    expanded?: boolean;
+    hideText?: string;
+    showMoreText?: string;
+}
+export declare const INITIAL_ITEMS_TO_SHOW = 6;
+export declare const ShowMore: React.FC<React.PropsWithChildren<ShowMoreProps>>;

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

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

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

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

package/dist/elements/Skeleton/Skeleton.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { BoxProps } from "../Box";
+import { TextProps } from "../Text";
+/** SkeletonProps */
+export declare type SkeletonBoxProps = BoxProps;
+/** A black10 Box */
+export declare const SkeletonBox: import("styled-components/dist/types").IStyledComponentBase<"web", 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;
+}, never>> & string;
+/** SkeletonTextProps */
+export declare type SkeletonTextProps = TextProps;
+/**
+ * Allows you to create boxes the exact dimensions of a given piece of text
+ */
+export declare const SkeletonText: React.FC<React.PropsWithChildren<SkeletonTextProps>>;
+export declare type SkeletonProps = BoxProps;
+/**
+ * Animated wrapper for Skeletons
+ */
+export declare const Skeleton: React.FC<React.PropsWithChildren<SkeletonProps>>;

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

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

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

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

package/dist/elements/Skip/Skip.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ClickableProps } from "../Clickable";
+/**
+ * Either a button or an anchor tag
+ */
+export declare type SkipProps = ClickableProps | (ClickableProps & {
+    as: "a";
+    href: string;
+});
+/**
+ * Skip link or button.
+ * Utilize `as="a"` for an anchor tag to link to landmark IDs.
+ * Used, for example, to skip to content in the nav.
+ * Is visually hidden until focused, which reveals it.
+ */
+export declare const Skip: React.ForwardRefExoticComponent<SkipProps & React.RefAttributes<unknown>>;

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

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

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

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

package/dist/elements/Spacer/Spacer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { BoxProps } from "../../elements/Box";
+export declare type SpacerProps = {
+    x?: BoxProps["ml"];
+    y?: BoxProps["mt"];
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Used to inject space where it's needed.
+ */
+export declare const Spacer: {
+    ({ x, y, ...restProps }: SpacerProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { SpacerProps } from "./Spacer";
+declare const _default: {
+    title: string;
+    component: {
+        ({ x, y, ...restProps }: SpacerProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

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

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

package/dist/elements/Spinner/Spinner.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { ResponsiveValue } from "styled-system";
+import { BoxProps } from "../Box";
+declare const SPINNER_VARIANTS: {
+    readonly small: {
+        readonly width: 12.5;
+        readonly height: 3;
+        readonly top: "calc(50% - 1.5px)";
+        readonly left: "calc(50% - 6.25px)";
+    };
+    readonly medium: {
+        readonly width: 20;
+        readonly height: 4.8;
+        readonly top: "calc(50% - 2.4px)";
+        readonly left: "calc(50% - 10px)";
+    };
+    readonly large: {
+        readonly width: 25;
+        readonly height: 6;
+        readonly top: "calc(50% - 3px)";
+        readonly left: "calc(50% - 12.5px)";
+    };
+};
+export declare type SpinnerSize = keyof typeof SPINNER_VARIANTS;
+export interface SpinnerProps extends Omit<BoxProps, "size" | "width" | "height"> {
+    /** Delay before spinner appears */
+    delay?: number;
+    /** Size of the spinner */
+    size?: ResponsiveValue<SpinnerSize>;
+    /** Color of the spinner */
+    color?: ResponsiveValue<string>;
+}
+/** Generic Spinner component */
+export declare const Spinner: React.FC<React.PropsWithChildren<SpinnerProps>>;
+export {};

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

@@ -0,0 +1,18 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const DefaultSpinner: () => React.JSX.Element;
+export declare const SpinnerWithDelayedShow: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

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

package/dist/elements/Stack/Stack.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { BoxProps } from "../Box";
+import { ResponsiveValue } from "styled-system";
+export declare type StackProps = BoxProps & {
+    gap: ResponsiveValue<string | number>;
+};
+/**
+ * `Stack` is `Box` with` display: flex` and `flex-direction: column`.
+ * `gap` is required
+ */
+export declare const Stack: 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;
+}, StackProps>> & string;

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

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

package/dist/elements/StackableBorderBox/StackableBorderBox.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BorderBoxProps } from "../BorderBox";
+export declare type StackableBorderBoxProps = BorderBoxProps;
+/**
+ * A stackable border box is a BorderBox that shares borders with its siblings.
+ */
+export declare const StackableBorderBox: 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;
+}, never>, BorderBoxProps>> & string;

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

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

package/dist/elements/Stepper/Stepper.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { TabProps, TabsProps } from "../Tabs";
+export interface StepperProps extends TabsProps {
+    /** The step user currently is at (e.g. previous steps completed) */
+    currentStepIndex: number;
+    /** Prevents the tabs from being directly clickable */
+    disableNavigation?: boolean;
+}
+/** Stepper */
+export declare const Stepper: React.FC<React.PropsWithChildren<StepperProps>>;
+/** StepProps */
+export declare type StepProps = TabProps;
+/**
+ * An individual step.
+ * Does nothing on its own; props are dealt with inside of Steps.
+ */
+export declare const Step: React.FC<React.PropsWithChildren<StepProps>>;

package/dist/elements/Stepper/Stepper.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 ChangingCurrentStep: () => React.JSX.Element;

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

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

package/dist/elements/Sup/Sup.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { TextProps } from "../Text";
+export declare type SupProps = TextProps;
+export declare const Sup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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;
+}, "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;
+}, never>> & string;

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

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

package/dist/elements/Swiper/Swiper.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { BoxProps } from "../Box";
+/** SwiperRailProps */
+export declare type SwiperRailProps = BoxProps;
+/** A `SwiperRail` slides back and forth within the viewport */
+export declare const SwiperRail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<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;
+}, {
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+}>> & string;
+/** SwiperCellProps */
+export declare type SwiperCellProps = BoxProps;
+/** A `SwiperCell` wraps a single child in the carousel */
+export declare const SwiperCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<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;
+}, {
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+}>> & string;
+declare type ScrollSnapAlign = "none" | "start" | "end" | "center";
+/** SwiperProps */
+export declare type SwiperProps = BoxProps & {
+    initialIndex?: number;
+    snap?: ScrollSnapAlign;
+    children: React.ReactNode;
+    Rail?: typeof SwiperRail | React.FC<React.PropsWithChildren<SwiperRailProps>>;
+    /**
+     * If providing a custom `Cell` you must forward a ref so
+     * that cell widths can be calculated.
+     */
+    Cell?: React.ForwardRefExoticComponent<SwiperCellProps>;
+    onChange?(index: number): void;
+    onPageCountChange?(count: number): void;
+};
+/**
+ * A `Swiper` is like a `Carousel` but for touch devices. It accepts children
+ * or a series of children that are JSX elements. It presents them in a
+ * horizontal rail and when the width exceeds the width of the viewport, allows
+ * for horitonzal swiping (or scrolling) with the option to snap to elements.
+ */
+export declare const Swiper: React.FC<React.PropsWithChildren<SwiperProps>>;
+export {};