@strapi/design-system 1.19.0-typescript.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/AccordionContext.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AccordionSize, AccordionVariant } from './Accordion';
 export interface AccordionContextValue {
     disabled: boolean;
@@ -8,5 +9,5 @@ export interface AccordionContextValue {
     size: AccordionSize;
     variant: AccordionVariant;
 }
-export declare const AccordionContext: import("react").Context<AccordionContextValue>;
+export declare const AccordionContext: React.Context<AccordionContextValue>;
 export declare const useAccordion: () => AccordionContextValue;

package/dist/BaseLink/BaseLink.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { BoxProps } from '../Box';
 export type BaseLinkProps = BoxProps<'a'> & {
     disabled?: boolean;

package/dist/BaseRadio/BaseRadio.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export interface BaseRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
     value: string;

package/dist/BaseRadio/RadioGroup.d.ts

@@ -1,10 +1,10 @@
-import { HTMLAttributes, ChangeEventHandler, ReactNode } from 'react';
+import * as React from 'react';
 export type RadioGroupSize = 'M' | 'L';
-interface RadioGroupProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
+interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
     labelledBy: string;
     name: string;
-    onChange: ChangeEventHandler<HTMLInputElement>;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
     size?: RadioGroupSize;
     value?: string;
 }

package/dist/BaseRadio/context.d.ts

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

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,17 +1,8 @@
-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;
+    label?: string;
 }
 export declare const Breadcrumbs: {
-    ({ children, label, ...props }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, children, ...props }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/{v2/Breadcrumbs → Breadcrumbs}/Crumb.d.ts

@@ -1,4 +1,4 @@
-import { TypographyProps } from '../../Typography';
+import { TypographyProps } from '../Typography';
 export interface CrumbProps extends TypographyProps {
     isCurrent?: boolean;
 }

package/dist/{v2/Breadcrumbs → Breadcrumbs}/CrumbLink.d.ts

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

package/dist/{v2/Breadcrumbs → Breadcrumbs}/CrumbSimpleMenu.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ButtonProps } from '../../Button';
+import * as React from 'react';
+import { ButtonProps } from '../Button';
 export interface CrumbSimpleMenuProps extends ButtonProps {
     'aria-label': string;
     icon?: React.ReactElement;

package/dist/Breadcrumbs/index.d.ts

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

package/dist/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as 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" | "overflow" | "pointerEvents" | "transform" | "position" | "textAlign" | "textTransform" | "zIndex" | "animation" | "transition"> & {

package/dist/Card/CardAction.d.ts

@@ -1,8 +1,55 @@
-import { StackProps } from '../Stack';
+import { FlexProps } from '../Flex';
 export type CardActionPosition = 'end' | 'start';
-export declare const CardAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
-    horizontal: true;
-    spacing: 2;
+export declare const CardAction: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "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?: import("react").ReactNode;
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
-    position: StackProps['position'] | CardActionPosition;
-}, "spacing" | "horizontal">;
+    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;
+} & {
+    direction: string;
+    gap: number;
+} & {
+    position: FlexProps['position'] | CardActionPosition;
+}, "direction" | "gap">;

package/dist/Card/CardContext.d.ts

@@ -1,4 +1,5 @@
-export declare const CardContext: import("react").Context<{
+import * as React from 'react';
+export declare const CardContext: React.Context<{
     id: string;
 }>;
 export declare const useCard: () => {

package/dist/CarouselInput/CarouselInput.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { CarouselProps } from './Carousel';
 import { FieldProps, FieldLabelProps } from '../Field';
 export interface CarouselInputProps extends CarouselProps, Pick<FieldProps, 'hint' | 'error' | 'required'> {
@@ -5,4 +6,4 @@ export interface CarouselInputProps extends CarouselProps, Pick<FieldProps, 'hin
     children: React.ReactNode;
     labelAction?: FieldLabelProps['action'];
 }
-export declare const CarouselInput: import("react").ForwardRefExoticComponent<CarouselInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CarouselInput: React.ForwardRefExoticComponent<CarouselInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Dialog/DialogBody.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export interface DialogBodyProps {
     children: React.ReactNode;
     icon?: React.ReactNode;

package/dist/Dialog/DialogFooter.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export interface DialogFooterProps {
     startAction?: React.ReactNode;
     endAction?: React.ReactNode;

package/dist/Field/Field.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+import * as React from 'react';
 import { BoxProps } from '../Box';
 export interface FieldProps extends BoxProps {
-    children: ReactNode;
+    children: React.ReactNode;
     error?: string | boolean;
-    hint?: ReactNode;
+    hint?: React.ReactNode;
     id?: string;
     name?: string;
     /**
@@ -11,4 +11,4 @@ export interface FieldProps extends BoxProps {
      */
     required?: boolean;
 }
-export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Field/FieldAction.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import * as React from 'react';
 import { FlexProps } from '../Flex';
 export interface FieldActionProps extends FlexProps<'button'> {
     label: string;
-    children: ReactNode;
+    children: React.ReactNode;
 }
-export declare const FieldAction: import("react").ForwardRefExoticComponent<FieldActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const FieldAction: React.ForwardRefExoticComponent<FieldActionProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/Field/FieldContext.d.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
+import * as React from 'react';
 export interface FieldContextValue {
     error?: string | boolean;
-    hint?: ReactNode;
+    hint?: React.ReactNode;
     name?: string;
     id: string;
     required: boolean;
 }
-export declare const FieldContext: import("react").Context<FieldContextValue>;
+export declare const FieldContext: React.Context<FieldContextValue>;
 export declare const useField: () => FieldContextValue;

package/dist/Field/FieldInput.d.ts

@@ -1,14 +1,14 @@
-import { ChangeEventHandler } from 'react';
+import * as React from 'react';
 import { DefaultTheme } from 'styled-components';
 export interface FieldInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     endAction?: React.ReactNode;
     startAction?: React.ReactNode;
     disabled?: boolean;
     size?: keyof DefaultTheme['sizes']['input'];
-    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
-export declare const FieldInput: import("react").ForwardRefExoticComponent<FieldInputProps & import("react").RefAttributes<HTMLInputElement>>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", DefaultTheme, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<import("styled-components").CSSProperties, "cursor" | "display" | "overflow" | "pointerEvents" | "transform" | "position" | "textAlign" | "textTransform" | "zIndex" | "animation" | "transition"> & {
+export declare const FieldInput: React.ForwardRefExoticComponent<FieldInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", DefaultTheme, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<import("styled-components").CSSProperties, "cursor" | "display" | "overflow" | "pointerEvents" | "transform" | "position" | "textAlign" | "textTransform" | "zIndex" | "animation" | "transition"> & {
     _hover?: ((theme: DefaultTheme) => string) | undefined;
     background?: import("../types").DefaultThemeOrCSSProp<"colors", "background">;
     basis?: import("csstype").Property.FlexBasis<string | number> | undefined;
@@ -45,9 +45,9 @@ export declare const InputWrapper: import("styled-components").StyledComponent<"
     borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
     borderStyle?: import("csstype").Property.BorderStyle | undefined;
     borderWidth?: import("csstype").Property.BorderWidth<string | number> | undefined;
-    children?: import("react").ReactNode;
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | 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;

package/dist/Field/FieldLabel.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
+import * as React from 'react';
 import { TypographyProps } from '../Typography';
 export interface FieldLabelProps extends TypographyProps<'label'> {
-    action?: ReactNode;
+    action?: React.ReactNode;
     /**
      * @preserve
      * @deprecated "required" should be given to Field component to share the value across components
      */
     required?: boolean;
 }
-export declare const FieldLabel: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/FocusTrap/FocusTrap.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from 'react';
-export interface FocusTrapProps extends HTMLAttributes<HTMLDivElement> {
+import * as React from 'react';
+export interface FocusTrapProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * A callback called on escape key. Useful to deactivate the focus trap.
      */

package/dist/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { DefaultTheme } from 'styled-components';
 import { BoxProps } from '../Box';
 export interface IconProps extends BoxProps {

package/dist/JSONInput/JSONInput.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { FieldLabelProps, FieldProps } from '../Field';
 import { FlexProps } from '../Flex';
 interface JSONInputProps extends Omit<FlexProps, 'onChange'>, Pick<FieldProps, 'hint' | 'error' | 'required'> {

package/dist/Layout/HeaderLayout.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { TypographyProps } from '../Typography';
 interface BaseHeaderLayoutProps extends TypographyProps {
     navigationAction?: React.ReactNode;

package/dist/Link/Link.d.ts

@@ -1,19 +1,11 @@
 import * as React from 'react';
-import { NavLinkProps } from 'react-router-dom';
-interface SharedLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    disabled?: boolean;
+import { BaseLinkProps } from '../BaseLink';
+export interface LinkProps extends BaseLinkProps {
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
+    /**
+     * @default true
+     */
+    isExternal?: boolean;
 }
-interface ToLinkProps extends SharedLinkProps {
-    to: NavLinkProps['to'];
-    href?: never;
-}
-interface HrefLinkProps extends SharedLinkProps {
-    href: string;
-    to?: never;
-}
-type LinkProps = ToLinkProps | HrefLinkProps;
-declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export { Link };
-export type { LinkProps, SharedLinkProps, ToLinkProps, HrefLinkProps };
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/LinkButton/LinkButton.d.ts

@@ -1,23 +1,61 @@
 import * as React from 'react';
-import { NavLinkProps } from 'react-router-dom';
 import { BaseButtonProps } from '../BaseButton';
+import { BaseLinkProps } from '../BaseLink';
 import { VARIANTS, BUTTON_SIZES } from '../Button/constants';
-interface SharedLinkButtonProps extends BaseButtonProps {
+interface SharedLinkProps extends BaseLinkProps {
     disabled?: boolean;
     endIcon?: React.ReactNode;
     size?: (typeof BUTTON_SIZES)[number];
     startIcon?: React.ReactNode;
     variant?: (typeof VARIANTS)[number];
 }
-interface ToLinkButtonProps extends SharedLinkButtonProps {
-    to: NavLinkProps['to'];
-    href?: never;
-}
-interface HrefLinkButtonProps extends SharedLinkButtonProps {
-    href: string;
-    to?: never;
-}
-type LinkButtonProps = ToLinkButtonProps | HrefLinkButtonProps;
-declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & React.RefAttributes<HTMLAnchorElement>>;
-export { LinkButton };
-export type { LinkButtonProps, SharedLinkButtonProps, ToLinkButtonProps, HrefLinkButtonProps };
+export type LinkButtonProps = SharedLinkProps & BaseButtonProps;
+export declare const LinkButton: React.ForwardRefExoticComponent<SharedLinkProps & 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<HTMLAnchorElement>>;
+export {};

package/dist/MainNav/MainNav.d.ts

@@ -1,5 +1,5 @@
 import { FlexProps } from '../Flex';
-export interface MainNavProps extends FlexProps {
+export interface MainNavProps extends FlexProps<'nav'> {
     condensed?: boolean;
 }
 export declare const MainNav: ({ condensed, ...props }: MainNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/MainNav/MainNavContext.d.ts

@@ -1,2 +1,3 @@
-export declare const MainNavContext: import("react").Context<boolean>;
+import * as React from 'react';
+export declare const MainNavContext: React.Context<boolean>;
 export declare const useMainNav: () => boolean;

package/dist/MainNav/NavBrand.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
-export interface NavBrandProps {
-    icon?: React.ReactNode;
+import * as React from 'react';
+import { BaseLinkProps } from '../BaseLink';
+export interface NavBrandProps extends BaseLinkProps {
+    icon: React.ReactNode;
     title: string;
     to?: string;
     workplace: string;
 }
-export declare const NavBrand: ({ workplace, title, icon, to }: NavBrandProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavBrand: React.ForwardRefExoticComponent<NavBrandProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/MainNav/NavCondense.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-export interface NavCondenseWrapperProps {
-    children: React.ReactNode;
+import { FlexProps } from '../Flex';
+export interface NavCondenseProps extends FlexProps<'button'> {
+    children: string;
 }
-export declare const NavCondense: ({ children, ...props }: NavCondenseWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavCondense: ({ children, ...props }: NavCondenseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/MainNav/NavFooter.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export interface NavFooterProps {
     children: React.ReactNode;
 }

package/dist/MainNav/NavLink.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-import { LinkProps } from 'react-router-dom';
-export interface NavLinkProps extends LinkProps {
-    badgeAriaLabel: string;
-    badgeContent: string | number;
-    children: React.ReactNode;
+import * as React from 'react';
+import { BaseLinkProps } from '../BaseLink';
+export interface NavLinkProps extends BaseLinkProps {
+    badgeAriaLabel?: string;
+    badgeContent?: string | number;
+    children: string;
     icon: React.ReactNode;
 }
-export declare const NavLink: ({ children, icon, badgeContent, badgeAriaLabel, ...props }: NavLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/MainNav/NavSection.d.ts

@@ -1,11 +1,9 @@
+import * as React from 'react';
 import { FlexProps } from '../Flex';
-export interface NavSectionProps extends FlexProps {
+export interface NavSectionProps extends FlexProps<'ul'> {
+    children: React.ReactNode;
     label: string;
     horizontal?: boolean;
-    /**
-     * @preserve
-     * @deprecated Use gap instead;
-     */
-    spacing?: FlexProps['gap'];
+    spacing?: number;
 }
-export declare const NavSection: ({ label, children, spacing, horizontal, ...props }: NavSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavSection: ({ label, children, horizontal, spacing, ...props }: NavSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/MainNav/NavSections.d.ts

@@ -1,10 +1,8 @@
+import * as React from 'react';
 import { FlexProps } from '../Flex';
-export interface NavSectionsProps extends FlexProps {
+export interface NavSectionsProps extends FlexProps<'ul'> {
+    children: React.ReactNode;
+    spacing?: number;
     horizontal?: boolean;
-    /**
-     * @preserve
-     * @deprecated Use gap instead;
-     */
-    spacing?: FlexProps['gap'];
 }
 export declare const NavSections: ({ children, spacing, horizontal, ...props }: NavSectionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/MainNav/NavUser.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 import { BoxProps } from '../Box';
 export interface NavUserProps extends BoxProps {
-    initials: string;
+    children: React.ReactNode;
+    initials?: React.ReactNode;
     src?: string;
 }
-export declare const NavUser: React.ForwardRefExoticComponent<NavUserProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const NavUser: React.ForwardRefExoticComponent<NavUserProps & React.RefAttributes<any>>;

package/dist/ModalLayout/ModalContext.d.ts

@@ -1,2 +1,3 @@
-export declare const ModalContext: import("react").Context<() => void>;
+import * as React from 'react';
+export declare const ModalContext: React.Context<() => void>;
 export declare const useModal: () => () => void;

package/dist/NumberInput/NumberInput.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { FieldInputProps, FieldProps, FieldLabelProps } from '../Field';
 export interface NumberInputProps extends Omit<FieldInputProps, 'id' | 'name' | 'onChange' | 'value'>, Pick<FieldProps, 'hint' | 'error' | 'id' | 'name'> {
     label?: string;

package/dist/Pagination/PaginationContext.d.ts

@@ -1,6 +1,7 @@
+import * as React from 'react';
 export interface PaginationContextValue {
     activePage: number;
     pageCount: number;
 }
-export declare const PaginationContext: import("react").Context<PaginationContextValue>;
+export declare const PaginationContext: React.Context<PaginationContextValue>;
 export declare const usePagination: () => PaginationContextValue;