@strapi/design-system 1.18.0 → 2.0.0-beta.0

package/README.md

@@ -9,11 +9,11 @@
 ## Installation
 
 ```sh
-$ yarn add react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom
+$ yarn add react react-dom @strapi/design-system @strapi/icons styled-components
 
 # or
 
-$ npm i react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom
+$ npm i react react-dom @strapi/design-system @strapi/icons styled-components
 ```
 
 ## Getting Started

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { DefaultTheme } from 'styled-components';
+declare const AccordionTypography: import("styled-components").StyledComponent<"span", DefaultTheme, import("../Typography").TypographyProps<"span">, never>;
+type AccordionSize = 'S' | 'M';
+type AccordionVariant = 'primary' | 'secondary';
+interface AccordionProps {
+    children: React.ReactNode;
+    /**
+     * If `true`, the accordion will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If defined, will add a border (borderColor: `danger600`) and display the error message below the component.
+     */
+    error?: string;
+    /**
+     * If `true`, an expanded Accordion will be rendered.
+     */
+    expanded?: boolean;
+    /**
+     * If `false`, the error message won't show.
+     * If the `Accordion` is as child of an `AccordionGroup`, this prop will be set to `false` automatically.
+     * The error message of the `AccordionGroup` will be shown below the group instead of the Accordion itself.
+     */
+    hasErrorMessage?: boolean;
+    /**
+     * The id of the component.
+     */
+    id?: string;
+    /**
+     * The callback invoked after a click event on the `AccordionToggle`.
+     */
+    onToggle?: () => void;
+    /**
+     * Shadow name (see `theme.shadows`)
+     */
+    shadow?: keyof DefaultTheme['shadows'];
+    /**
+     * @preserve
+     * @deprecated use `onToggle` instead
+     * The callback invoked after a click event on the `AccordionToggle`.
+     */
+    toggle?: () => void;
+    /**
+     * Size of the Accordion.
+     */
+    size?: AccordionSize;
+    /**
+     * Color variant for `Accordion`. The "secondary" variant reverses the background colors.
+     * This is useful when you want to display a list and alternate the colors of the accordions.
+     */
+    variant?: AccordionVariant;
+}
+declare const Accordion: ({ children, disabled, error, expanded, hasErrorMessage, id, onToggle, toggle, size, variant, shadow, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionTypography };
+export type { AccordionProps, AccordionSize, AccordionVariant };

package/dist/Accordion/AccordionContent.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from '../Box';
+export type AccordionContentProps = BoxProps;
+export declare const AccordionContent: ({ children, ...props }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Accordion/AccordionContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { AccordionSize, AccordionVariant } from './Accordion';
+export interface AccordionContextValue {
+    disabled: boolean;
+    expanded: boolean;
+    id: string;
+    onToggle?: () => void;
+    toggle?: () => void;
+    size: AccordionSize;
+    variant: AccordionVariant;
+}
+export declare const AccordionContext: React.Context<AccordionContextValue>;
+export declare const useAccordion: () => AccordionContextValue;

package/dist/Accordion/AccordionGroup.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FieldLabelProps } from '../Field';
+export interface AccordionGroupProps {
+    children: React.ReactNode;
+    error?: string;
+    footer?: React.ReactNode;
+    label?: string;
+    labelAction?: FieldLabelProps['action'];
+}
+export declare const AccordionGroup: ({ children, footer, label, labelAction, error }: AccordionGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/AccordionToggle.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+interface AccordionToggleProps {
+    /**
+     * Will render a node to the right of the Accordion component
+     */
+    action?: React.ReactNode;
+    as?: string | React.ComponentType<any>;
+    /**
+     * Show the secondary text of the Accordion component
+     */
+    description?: string;
+    /**
+     * Show the main title of the Accordion component
+     */
+    title: string;
+    /**
+     * Set the position of the toggle icon button
+     */
+    togglePosition?: 'right' | 'left';
+}
+export declare const AccordionToggle: ({ title, description, as, togglePosition, action, ...props }: AccordionToggleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Accordion';
+export * from './AccordionContent';
+export * from './AccordionToggle';
+export * from './AccordionGroup';

package/dist/Accordion/utils.d.ts

@@ -0,0 +1,7 @@
+import { DefaultTheme } from 'styled-components';
+import { AccordionVariant } from './Accordion';
+export declare const getBackground: ({ expanded, disabled, variant, }: {
+    expanded: boolean;
+    disabled: boolean;
+    variant: AccordionVariant;
+}) => keyof DefaultTheme['colors'];

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { BoxProps } from '../Box';
+export type AlertVariant = 'success' | 'danger' | 'default' | 'warning';
+export interface AlertProps extends BoxProps {
+    /**
+     * Render a React element below the body of an `Alert` (Mainly used to render a Link).
+     */
+    action?: React.ReactNode;
+    /**
+     * The body of the `Alert` (Will be rendered under the `Alert` title).
+     */
+    children: React.ReactNode;
+    /**
+     * Accessible label for the close icon button.
+     */
+    closeLabel: string;
+    /**
+     * The callback invoked when click on the close icon button.
+     */
+    onClose: () => void;
+    /**
+     * The title of the `Alert`.
+     */
+    title?: string;
+    /**
+     * Changes the element, as which a component will render (similar to styled-components).
+     */
+    titleAs?: string | React.ComponentType<any>;
+    /**
+     * `Alert` color variant.
+     */
+    variant?: AlertVariant;
+}
+export declare const Alert: ({ title, children, variant, onClose, closeLabel, titleAs, action, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from './Alert';

package/dist/Alert/utils.d.ts

@@ -0,0 +1,10 @@
+import { DefaultTheme } from 'styled-components';
+import type { AlertVariant } from './Alert';
+interface StyledProps {
+    theme: DefaultTheme;
+    variant: AlertVariant;
+}
+export declare const handleBackgroundColor: (variant: AlertVariant) => "primary100" | "danger100" | "success100" | "warning100";
+export declare const handleBorderColor: (variant: AlertVariant) => string;
+export declare const handleIconColor: ({ theme, variant }: StyledProps) => string;
+export {};

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { FlexProps } from '../Flex';
+import { TypographyProps } from '../Typography';
+export interface AvatarProps {
+    /**
+     * Alternative text
+     */
+    alt?: string;
+    /**
+     * Image src of the image preview (displayed on `Avatar` hover).
+     */
+    preview?: boolean | string;
+    /**
+     * Image src of the `Avatar`
+     */
+    src: string;
+}
+export declare const Avatar: ({ src, alt, preview }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export type InitialsProps = Pick<FlexProps, 'background'> & Pick<TypographyProps, 'textColor'> & {
+    children: React.ReactNode;
+};
+export declare const Initials: ({ children, background, textColor }: InitialsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Avatar/AvatarGroup.d.ts

@@ -0,0 +1 @@
+export declare const AvatarGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Flex").FlexProps<"div">, never>;

package/dist/Avatar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const avatarSize = 32;
+export declare const previewSize = 64;

package/dist/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Avatar';
+export * from './AvatarGroup';

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,13 @@
+import { DefaultTheme } from 'styled-components';
+import { FlexProps } from '../Flex';
+export type BadgeSize = 'S' | 'M';
+export interface BadgeProps extends FlexProps {
+    /**
+     * If `true`, it changes the `backgroundColor` to `primary200` and the `textColor` to `primary600`
+     */
+    active?: boolean;
+    backgroundColor?: keyof DefaultTheme['colors'];
+    size?: BadgeSize;
+    textColor?: keyof DefaultTheme['colors'];
+}
+export declare const Badge: ({ active, size, textColor, backgroundColor, children, minWidth, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Badge/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/dist/BaseButton/BaseButton.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { FlexProps } from '../Flex';
+export declare const BaseButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FlexProps<"div">, never>;
+export type BaseButtonProps<TElement extends keyof JSX.IntrinsicElements = 'button'> = FlexProps<TElement>;
+export declare const BaseButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<import("styled-components").CSSProperties, "cursor" | "display" | "overflow" | "pointerEvents" | "transform" | "position" | "textAlign" | "textTransform" | "zIndex" | "animation" | "transition"> & {
+    _hover?: ((theme: import("styled-components").DefaultTheme) => string) | undefined;
+    background?: import("../types").DefaultThemeOrCSSProp<"colors", "background">;
+    basis?: import("csstype").Property.FlexBasis<string | number> | undefined;
+    borderColor?: keyof import("../themes/colors").Colors | undefined;
+    color?: keyof import("../themes/colors").Colors | undefined;
+    flex?: import("csstype").Property.Flex<string | number> | undefined;
+    fontSize?: import("../types").DefaultThemeOrCSSProp<"fontSizes", "fontSize">;
+    grow?: import("csstype").Property.FlexGrow | undefined;
+    hasRadius?: boolean | undefined;
+    hiddenS?: boolean | undefined;
+    hiddenXS?: boolean | undefined;
+    padding?: import("../helpers/handleResponsiveValues").ResponsiveValue<"padding">;
+    paddingBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingBottom">;
+    paddingLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingLeft">;
+    paddingRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingRight">;
+    paddingTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingTop">;
+    marginLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginLeft">;
+    marginBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginBottom">;
+    marginRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginRight">;
+    marginTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginTop">;
+    shadow?: keyof import("../themes/colors").Shadows | undefined;
+    shrink?: import("csstype").Property.FlexShrink | undefined;
+    lineHeight?: import("../types").DefaultThemeOrCSSProp<"lineHeights", "lineHeight">;
+    width?: import("../types").DefaultThemeOrCSSProp<"spaces", "width">;
+    minWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "minWidth">;
+    maxWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxWidth">;
+    height?: import("../types").DefaultThemeOrCSSProp<"spaces", "height">;
+    minHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "minHeight">;
+    maxHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxHeight">;
+    top?: import("../types").DefaultThemeOrCSSProp<"spaces", "top">;
+    left?: import("../types").DefaultThemeOrCSSProp<"spaces", "left">;
+    bottom?: import("../types").DefaultThemeOrCSSProp<"spaces", "bottom">;
+    right?: import("../types").DefaultThemeOrCSSProp<"spaces", "right">;
+    borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
+    borderStyle?: import("csstype").Property.BorderStyle | undefined;
+    borderWidth?: import("csstype").Property.BorderWidth<string | number> | undefined;
+    children?: React.ReactNode;
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+} & {
+    alignItems?: import("csstype").Property.AlignItems | undefined;
+    direction?: import("csstype").Property.FlexDirection | undefined;
+    gap?: any;
+    inline?: boolean | undefined;
+    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    wrap?: import("csstype").Property.FlexWrap | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/BaseButton/index.d.ts

@@ -0,0 +1 @@
+export * from './BaseButton';

package/dist/BaseCheckbox/BaseCheckbox.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export type BaseCheckboxSize = 'S' | 'M';
+export interface CheckboxInputProps {
+    size: BaseCheckboxSize;
+}
+export interface BaseCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'> {
+    /**
+     * If `true`, display the indeterminate state.
+     */
+    indeterminate?: boolean;
+    /**
+     * `Checkbox` input name
+     */
+    name?: string;
+    /**
+     * The callback invoked when click on the `Checkbox`
+     * `(value: Bool) => {}`
+     */
+    onValueChange?: (isChecked: boolean) => void;
+    /**
+     * Set the size of the checkbox
+     */
+    size?: BaseCheckboxSize;
+    value?: boolean;
+}
+export type CheckboxElement = HTMLInputElement;
+export declare const BaseCheckbox: React.ForwardRefExoticComponent<BaseCheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/BaseCheckbox/index.d.ts

@@ -0,0 +1 @@
+export * from './BaseCheckbox';

package/dist/BaseCheckbox/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * TODO: Look into why setting the type to `BaseCheckboxSize` makes the
+ * component in `BaseCheckbox` loose all type information to do with the theme.
+ */
+export declare const getCheckboxSize: ({ size }: {
+    size: any;
+}) => "20px" | "18px";

package/dist/BaseLink/BaseLink.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { BoxProps } from '../Box';
+export type BaseLinkProps = BoxProps<'a'> & {
+    disabled?: boolean;
+    isExternal?: boolean;
+};
+export declare const BaseLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & Pick<import("styled-components").CSSProperties, "cursor" | "display" | "overflow" | "pointerEvents" | "transform" | "position" | "textAlign" | "textTransform" | "zIndex" | "animation" | "transition"> & {
+    _hover?: ((theme: import("styled-components").DefaultTheme) => string) | undefined;
+    background?: import("../types").DefaultThemeOrCSSProp<"colors", "background">;
+    basis?: import("csstype").Property.FlexBasis<string | number> | undefined;
+    borderColor?: keyof import("../themes/colors").Colors | undefined;
+    color?: keyof import("../themes/colors").Colors | undefined;
+    flex?: import("csstype").Property.Flex<string | number> | undefined;
+    fontSize?: import("../types").DefaultThemeOrCSSProp<"fontSizes", "fontSize">;
+    grow?: import("csstype").Property.FlexGrow | undefined;
+    hasRadius?: boolean | undefined;
+    hiddenS?: boolean | undefined;
+    hiddenXS?: boolean | undefined;
+    padding?: import("../helpers/handleResponsiveValues").ResponsiveValue<"padding">;
+    paddingBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingBottom">;
+    paddingLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingLeft">;
+    paddingRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingRight">;
+    paddingTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingTop">;
+    marginLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginLeft">;
+    marginBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginBottom">;
+    marginRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginRight">;
+    marginTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginTop">;
+    shadow?: keyof import("../themes/colors").Shadows | undefined;
+    shrink?: import("csstype").Property.FlexShrink | undefined;
+    lineHeight?: import("../types").DefaultThemeOrCSSProp<"lineHeights", "lineHeight">;
+    width?: import("../types").DefaultThemeOrCSSProp<"spaces", "width">;
+    minWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "minWidth">;
+    maxWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxWidth">;
+    height?: import("../types").DefaultThemeOrCSSProp<"spaces", "height">;
+    minHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "minHeight">;
+    maxHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxHeight">;
+    top?: import("../types").DefaultThemeOrCSSProp<"spaces", "top">;
+    left?: import("../types").DefaultThemeOrCSSProp<"spaces", "left">;
+    bottom?: import("../types").DefaultThemeOrCSSProp<"spaces", "bottom">;
+    right?: import("../types").DefaultThemeOrCSSProp<"spaces", "right">;
+    borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
+    borderStyle?: import("csstype").Property.BorderStyle | undefined;
+    borderWidth?: import("csstype").Property.BorderWidth<string | number> | undefined;
+    children?: React.ReactNode;
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+} & {
+    disabled?: boolean | undefined;
+    isExternal?: boolean | undefined;
+} & React.RefAttributes<HTMLAnchorElement>>;

package/dist/BaseLink/index.d.ts

@@ -0,0 +1 @@
+export * from './BaseLink';

package/dist/BaseRadio/BaseRadio.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface BaseRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    disabled?: boolean;
+    value: string;
+}
+export declare const BaseRadio: React.ForwardRefExoticComponent<BaseRadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/BaseRadio/RadioGroup.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type RadioGroupSize = 'M' | 'L';
+interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    labelledBy: string;
+    name: string;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    size?: RadioGroupSize;
+    value?: string;
+}
+export declare const RadioGroup: ({ children, labelledBy, onChange, value, size, name, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/BaseRadio/context.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { RadioGroupSize } from './RadioGroup';
+export interface RadioContextValue {
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    name: string;
+    size: RadioGroupSize;
+    selected: string;
+}
+export declare const RadioContext: React.Context<RadioContextValue>;

package/dist/BaseRadio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BaseRadio';
+export * from './RadioGroup';

package/dist/BaseRadio/utils.d.ts

@@ -0,0 +1,4 @@
+import { RadioGroupSize } from './RadioGroup';
+export declare const getRadioSize: (size: RadioGroupSize) => "20px" | "18px";
+export declare const getSelectedRadioSize: (size: RadioGroupSize) => "12px" | "10px";
+export declare const getSelectedRadioPosition: () => string;

package/dist/Box/Box.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { CSSProperties, DefaultTheme } from 'styled-components';
+import { ResponsiveValue } from '../helpers/handleResponsiveValues';
+import { DefaultThemeOrCSSProp } from '../types';
+export type BoxProps<TElement extends keyof JSX.IntrinsicElements = 'div'> = React.ComponentPropsWithoutRef<TElement> & Pick<CSSProperties, 'pointerEvents' | 'display' | 'position' | 'zIndex' | 'overflow' | 'cursor' | 'transition' | 'transform' | 'animation' | 'textAlign' | 'textTransform'> & {
+    /**
+     * JavaScript hover handler
+     */
+    _hover?: (theme: DefaultTheme) => string;
+    /**
+     * Background color
+     */
+    background?: DefaultThemeOrCSSProp<'colors', 'background'>;
+    /**
+     * Flex basis
+     */
+    basis?: CSSProperties['flexBasis'];
+    /**
+     * Border color
+     */
+    borderColor?: keyof DefaultTheme['colors'];
+    /**
+     * Text color
+     */
+    color?: keyof DefaultTheme['colors'];
+    /**
+     * Flex
+     */
+    flex?: CSSProperties['flex'];
+    fontSize?: DefaultThemeOrCSSProp<'fontSizes', 'fontSize'>;
+    /**
+     * Flex grow
+     */
+    grow?: CSSProperties['flexGrow'];
+    /**
+     * If `true`, will add a border radius to the `Box`
+     */
+    hasRadius?: boolean;
+    /**
+     * Responsive hiding. If `true`, will the `Box` for tablet size screens.
+     */
+    hiddenS?: boolean;
+    /**
+     * Responsive hiding. If `true`, will the `Box` for mobile size screens.
+     */
+    hiddenXS?: boolean;
+    /**
+     * Padding. Supports responsive values
+     */
+    padding?: ResponsiveValue<'padding'>;
+    /**
+     * Padding bottom. Supports responsive values
+     */
+    paddingBottom?: ResponsiveValue<'paddingBottom'>;
+    /**
+     * Padding left. Supports responsive values
+     */
+    paddingLeft?: ResponsiveValue<'paddingLeft'>;
+    /**
+     * Padding right. Supports responsive values
+     */
+    paddingRight?: ResponsiveValue<'paddingRight'>;
+    /**
+     * Padding top. Supports responsive values
+     */
+    paddingTop?: ResponsiveValue<'paddingTop'>;
+    marginLeft?: ResponsiveValue<'marginLeft'>;
+    marginBottom?: ResponsiveValue<'marginBottom'>;
+    marginRight?: ResponsiveValue<'marginRight'>;
+    marginTop?: ResponsiveValue<'marginTop'>;
+    /**
+     * Shadow name (see `theme.shadows`)
+     */
+    shadow?: keyof DefaultTheme['shadows'];
+    /**
+     * Flex shrink
+     */
+    shrink?: CSSProperties['flexShrink'];
+    lineHeight?: DefaultThemeOrCSSProp<'lineHeights', 'lineHeight'>;
+    width?: DefaultThemeOrCSSProp<'spaces', 'width'>;
+    minWidth?: DefaultThemeOrCSSProp<'spaces', 'minWidth'>;
+    maxWidth?: DefaultThemeOrCSSProp<'spaces', 'maxWidth'>;
+    height?: DefaultThemeOrCSSProp<'spaces', 'height'>;
+    minHeight?: DefaultThemeOrCSSProp<'spaces', 'minHeight'>;
+    maxHeight?: DefaultThemeOrCSSProp<'spaces', 'maxHeight'>;
+    top?: DefaultThemeOrCSSProp<'spaces', 'top'>;
+    left?: DefaultThemeOrCSSProp<'spaces', 'left'>;
+    bottom?: DefaultThemeOrCSSProp<'spaces', 'bottom'>;
+    right?: DefaultThemeOrCSSProp<'spaces', 'right'>;
+    borderRadius?: CSSProperties['borderRadius'];
+    borderStyle?: CSSProperties['borderStyle'];
+    borderWidth?: CSSProperties['borderWidth'];
+    children?: React.ReactNode;
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+};
+export declare const Box: import("styled-components").StyledComponent<"div", DefaultTheme, BoxProps<"div">, never>;

package/dist/Box/index.d.ts

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

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,8 @@
+import { FlexProps } from '../Flex';
+export interface BreadcrumbsProps extends FlexProps {
+    label?: string;
+}
+export declare const Breadcrumbs: {
+    ({ label, children, ...props }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Breadcrumbs/Crumb.d.ts

@@ -0,0 +1,8 @@
+import { TypographyProps } from '../Typography';
+export interface CrumbProps extends TypographyProps {
+    isCurrent?: boolean;
+}
+export declare const Crumb: {
+    ({ children, isCurrent, ...props }: CrumbProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Breadcrumbs/CrumbLink.d.ts

@@ -0,0 +1,5 @@
+import { BaseLinkProps } from '../BaseLink';
+export declare const CrumbLink: {
+    ({ children, ...props }: BaseLinkProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Breadcrumbs/CrumbSimpleMenu.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ButtonProps } from '../Button';
+export interface CrumbSimpleMenuProps extends ButtonProps {
+    'aria-label': string;
+    icon?: React.ReactElement;
+    endIcon?: React.ReactNode;
+}
+export declare const CrumbSimpleMenu: {
+    ({ children, ...props }: CrumbSimpleMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Breadcrumbs/Divider.d.ts

@@ -0,0 +1,4 @@
+export declare const Divider: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Breadcrumbs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Breadcrumbs';
+export * from './Crumb';
+export * from './CrumbLink';
+export * from './CrumbSimpleMenu';