@strapi/design-system 1.13.1 → 1.14.0-typescript.1

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { DefaultTheme } from 'styled-components';
+export declare const AccordionTypography: import("styled-components").StyledComponent<"span", DefaultTheme, import("../Typography").TypographyProps<"span">, never>;
+export type AccordionSize = 'S' | 'M';
+export type AccordionVariant = 'primary' | 'secondary';
+export 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;
+}
+export declare const Accordion: ({ children, disabled, error, expanded, hasErrorMessage, id, onToggle, toggle, size, variant, shadow, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

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,12 @@
+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: import("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/__tests__/Avatar.spec.d.ts

@@ -0,0 +1 @@
+export {};

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" | "pointerEvents" | "position" | "textAlign" | "textTransform" | "transform" | "zIndex" | "animation" | "overflow" | "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 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" | "pointerEvents" | "position" | "textAlign" | "textTransform" | "transform" | "zIndex" | "animation" | "overflow" | "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/__tests__/BaseLink.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/BaseLink/index.d.ts

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

package/dist/BaseRadio/BaseRadio.d.ts

@@ -0,0 +1,6 @@
+import 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 { HTMLAttributes, ChangeEventHandler, ReactNode } from 'react';
+export type RadioGroupSize = 'M' | 'L';
+interface RadioGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    labelledBy: string;
+    name: string;
+    onChange: 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 type { ChangeEventHandler } from 'react';
+import type { RadioGroupSize } from './RadioGroup';
+export interface RadioContextValue {
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    name: string;
+    size: RadioGroupSize;
+    selected: string;
+}
+export declare const RadioContext: import("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/__tests__/Box.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Box/index.d.ts

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

package/dist/Breadcrumbs/Breadcrumbs.d.ts

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

package/dist/Breadcrumbs/index.d.ts

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

package/dist/Button/Button.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Variant, ButtonSizes } from './constants';
+import { BaseButtonProps } from '../BaseButton';
+export declare const ButtonWrapper: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<import("styled-components").CSSProperties, "cursor" | "display" | "pointerEvents" | "position" | "textAlign" | "textTransform" | "transform" | "zIndex" | "animation" | "overflow" | "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>>, import("styled-components").DefaultTheme, Required<Pick<ButtonProps, "size" | "variant">>, never>;
+export interface ButtonProps extends BaseButtonProps {
+    endIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    loading?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    size?: ButtonSizes;
+    startIcon?: React.ReactNode;
+    variant?: Variant;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/Button/__tests__/utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Button/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const SUCCESS_LIGHT = "success-light";
+export declare const DANGER_LIGHT = "danger-light";
+export declare const DEFAULT = "default";
+export declare const TERTIARY = "tertiary";
+export declare const SECONDARY = "secondary";
+export declare const DANGER = "danger";
+export declare const SUCCESS = "success";
+export declare const GHOST = "ghost";
+export declare const LIGHT_VARIANTS: readonly ["success-light", "danger-light"];
+export declare const VARIANTS: readonly ["default", "tertiary", "secondary", "danger", "success", "ghost", "success-light", "danger-light"];
+export declare const BUTTON_SIZES: readonly ["S", "M", "L"];
+export type Variant = (typeof VARIANTS)[number];
+export type ButtonSizes = (typeof BUTTON_SIZES)[number];