@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

package/{components → lib/components}/form/SearchInput/index.d.ts

@@ -14,11 +14,12 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
     } & {
         theme?: import("styled-components").DefaultTheme | undefined;
     } & ({} | {
-        children?: import("react").ReactNode;
+        children?: React.ReactNode;
     })) & {
-        as?: string | import("react").ComponentType<any> | undefined;
-        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+        as?: string | React.ComponentType<any> | undefined;
+        forwardedAs?: string | React.ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     serialize?: ((value: string) => string) | undefined;
     deserialize?: ((value: string) => string) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/{components → lib/components}/form/SelectInput/Control.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GroupBase, StylesConfig, ControlProps } from "react-select";
 import { DefaultTheme } from "styled-components";
 export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>["control"]>;

package/{components → lib/components}/form/SelectInput/DropdownIndicator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GroupBase, StylesConfig, DropdownIndicatorProps } from "react-select";
 export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(): NonNullable<StylesConfig<O, M, G>["dropdownIndicator"]>;
 export declare function DropdownIndicator<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: DropdownIndicatorProps<O, M, G>): JSX.Element;

package/{components → lib/components}/form/SelectInput/IndicatorsContainer.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { GroupBase, IndicatorsContainerProps } from "react-select";
 export declare function IndicatorsContainer<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: IndicatorsContainerProps<O, M, G>): JSX.Element;

package/{components → lib/components}/form/SelectInput/MenuList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GroupBase, StylesConfig, MenuListProps } from "react-select";
 import { DefaultTheme } from "styled-components";
 export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>["menuList"]>;

package/{components → lib/components}/layout/Box/index.d.ts

@@ -1,6 +1,6 @@
 import { BaseStyledProps } from "../../styled";
 export declare type BoxProps = BaseStyledProps;
-declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;

package/lib/components/layout/Flex/index.d.ts

@@ -0,0 +1,8 @@
+import { BaseStyledProps } from "../../styled";
+export declare type FlexBoxProps = BaseStyledProps;
+declare const FlexBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    columnGap?: string | number | undefined;
+    rowGap?: string | number | undefined;
+    color?: string | undefined;
+}, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
+export default FlexBox;

package/{components → lib/components}/layout/Popin/index.d.ts

@@ -13,7 +13,7 @@ export declare type PopinHeaderProps = BaseStyledProps & {
 declare const PopinWrapper: {
     ({ children, menuPortalTarget, ...popinProps }: PopinProps): React.ReactElement;
     Header: ({ children, onClose, onBack, ...props }: PopinHeaderProps) => JSX.Element;
-    Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
         columnGap?: string | number | undefined;
         rowGap?: string | number | undefined;
         color?: string | undefined;
@@ -22,13 +22,13 @@ declare const PopinWrapper: {
         flexDirection: string;
         flex: number;
         overflow: string;
-    }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
-    Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
+    Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
         columnGap?: string | number | undefined;
         rowGap?: string | number | undefined;
         color?: string | undefined;
     } & {
         as: string;
-    }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
+    }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
 };
 export default PopinWrapper;

package/{components → lib/components}/layout/Side/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface SideProps {
     onBack?: () => void;
 }

package/{components → lib/components}/layout/Side/index.js

@@ -23,6 +23,8 @@ export const SideWrapper = (props) => {
         let timeout;
         if (queue.length > 1) {
             const [, ...rest] = queue;
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore mismatch between nodejs and dom types
             timeout = setTimeout(() => {
                 setQueue(rest);
                 setDirection("left");

package/{components → lib/components}/loaders/InfiniteLoader/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { SizeProps } from "styled-system";
-declare const Loader: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+declare const Loader: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
 export declare type Props = React.ComponentProps<typeof Loader> & {
     color?: string;
 };

package/{components → lib/components}/loaders/ProgressLoader/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface Props {
     /**
      * Radius of the progress ring.

package/{components → lib/components}/message/Alert/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TextVariants } from "../../../styles/theme";
 declare type AlertType = "info" | "warning" | "error";
 declare type RenderProps = (props: {

package/{components → lib/components}/message/Tip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type TipType = "success" | "warning" | "error";
 export interface TipProps {
     type?: TipType;

package/{components → lib/components}/message/Tooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TippyProps } from "@tippyjs/react";
 declare type Placement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "auto" | "auto-start" | "auto-end";
 export interface Props extends TippyProps {

package/lib/components/navigation/Aside/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { ColorProps, LayoutProps, TypographyProps } from "styled-system";
+export declare type Props = React.PropsWithChildren<{
+    header: React.ReactNode;
+    footer?: React.ReactNode;
+}> & React.ComponentProps<typeof Wrapper>;
+interface ExtraWrapperProps extends ColorProps, LayoutProps, TypographyProps {
+}
+declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    columnGap?: string | number | undefined;
+    rowGap?: string | number | undefined;
+    color?: string | undefined;
+} & ExtraWrapperProps, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
+export default function Aside({ header, footer, children, ...props }: Props): JSX.Element;
+export {};

package/lib/components/navigation/FlowStepper/index.d.ts

@@ -0,0 +1,136 @@
+import React from "react";
+import { Props as StepperProps } from "../progress/Stepper";
+import { FlexBoxProps as FlexProps } from "../../layout/Flex";
+export declare type StepProps = {
+    /**
+     * A specific index, can be used to explicitely order steps.
+     */
+    index?: number;
+    /**
+     * Custom header for this step.
+     */
+    header?: React.ReactNode;
+    /**
+     * Custom footer for this step.
+     */
+    footer?: React.ReactNode;
+    /**
+     * The label of the step.
+     */
+    label: string;
+    /**
+     * Hides the step from the progress stepper.
+     */
+    hidden?: boolean;
+    /**
+     * The step contents.
+     */
+    children: React.ReactNode;
+};
+interface InnerProps {
+    /**
+     * The active index.
+     */
+    activeIndex: number;
+    /**
+     * The total number of steps.
+     */
+    stepsLength: number;
+}
+declare type StepChild = React.ReactElement<StepProps>;
+declare type SectionRenderFunc<ExtraProps> = (props: InnerProps & ExtraProps) => React.ReactNode;
+declare type SectionStepRenderFunc<ExtraProps> = (args: InnerProps & ExtraProps & {
+    children: React.ReactNode;
+}) => React.ReactNode;
+export interface Props<ExtraProps> {
+    /**
+     * The index of the active step.
+     */
+    activeIndex: number;
+    /**
+     * An optional generic header displayed above the stepper.
+     */
+    header?: SectionRenderFunc<ExtraProps>;
+    /**
+     * Custom rendering function to wrap the header (only used if the `header` is defined
+     * on the child for the current step.)
+     */
+    renderStepHeader?: SectionStepRenderFunc<ExtraProps>;
+    /**
+     * An optional generic footer displayed below the body.
+     */
+    footer?: SectionRenderFunc<ExtraProps>;
+    /**
+     * Custom rendering function to wrap the footer (only used if the `footer` is defined
+     * on the child for the current step.)
+     */
+    renderStepFooter?: SectionStepRenderFunc<ExtraProps>;
+    /**
+     * Extra props that are passed to the header and footer render functions.
+     */
+    extraProps?: ExtraProps;
+    /**
+     * Extra props that are passed to the container `Flex` element.
+     */
+    extraContainerProps?: FlexProps;
+    /**
+     * Extra props that are passed to the stepper component.
+     */
+    extraStepperProps?: Partial<StepperProps>;
+    /**
+     * Extra props that are passed to the stepper `Flex` wrapper.
+     */
+    extraStepperContainerProps?: FlexProps;
+    /**
+     * Custom rendering function to wrap children.
+     */
+    renderChildren?: (args: InnerProps & ExtraProps & {
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * A list of children representing each step of the flow.
+     * Each child can have a prop `stepHeader` and/or `stepFooter` that will
+     * associate a custom header/footer to this particular step.
+     * The custom header/footer can be wrapped using the prop renderStepHeader/renderStepFooter.
+     */
+    children: StepChild | StepChild[];
+}
+declare function FlowStepper<ExtraProps>({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }: Props<ExtraProps>): JSX.Element;
+declare namespace FlowStepper {
+    var Step: ({ children }: StepProps) => JSX.Element;
+    var Indexed: typeof FlowStepperIndexed;
+}
+export default FlowStepper;
+export declare type IndexedStepProps = StepProps & {
+    /**
+     * String to identify the step. Must be different from sibling steps's `key` prop.
+     */
+    itemKey: string;
+};
+declare type IndexedStepperChild = React.ReactElement<IndexedStepProps>;
+export declare type IndexedProps<ExtraProps> = Omit<Props<ExtraProps>, "activeIndex" | "children"> & {
+    /**
+     * The key of the active step
+     */
+    activeKey: string;
+    /**
+     * A list of children representing each step of the flow.
+     */
+    children: IndexedStepperChild | IndexedStepperChild[];
+};
+/**
+ * This is a FlowStepper where each child must have an `itemKey: string` prop
+ * and the active step is defined by the `activeKey: string` prop.
+ *
+ * This allows for usages with a lot of steps where dealing with indices could be
+ * painful and error prone (for instance inserting/removing a step somewhere would shift
+ * the indices of the following steps and navigation would be impacted).
+ *
+ * By using string identifiers (`itemKey`) for each step, it's more "human readable"
+ * and less error prone to setup a navigation logic between steps.
+ */
+declare function FlowStepperIndexed<ExtraProps>(props: IndexedProps<ExtraProps>): JSX.Element;
+declare namespace FlowStepperIndexed {
+    var Step: typeof IndexedStep;
+}
+declare function IndexedStep({ children }: IndexedStepProps): JSX.Element;

package/lib/components/navigation/FlowStepper/index.js

@@ -0,0 +1,84 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { isElement } from "react-is";
+import Flex from "../../layout/Flex";
+import { Stepper } from "..";
+function FlowStepper({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }) {
+    const { steps, innerContents, stepFooter, stepHeader } = React.Children.toArray(children).reduce((acc, child, idx) => {
+        var _a;
+        const index = (_a = (isElement(child) && child.props.index)) !== null && _a !== void 0 ? _a : idx;
+        const label = isElement(child) && child.props.label;
+        const hidden = isElement(child) && child.props.hidden;
+        const stepHeader = isElement(child) && child.props.header;
+        const stepFooter = isElement(child) && child.props.footer;
+        if (label && !hidden) {
+            acc.steps[index] = label;
+        }
+        if (index === activeIndex) {
+            acc.innerContents = child;
+            acc.stepFooter = stepFooter;
+            acc.stepHeader = stepHeader;
+        }
+        return acc;
+    }, {
+        steps: [],
+        innerContents: null,
+        stepHeader: null,
+        stepFooter: null,
+    });
+    const renderArgs = Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length });
+    function getSectionContents(renderFunc, stepSection, renderStepFunc) {
+        return stepSection
+            ? renderStepFunc
+                ? renderStepFunc(Object.assign(Object.assign({}, renderArgs), { children: stepSection }))
+                : stepSection
+            : renderFunc && renderFunc(renderArgs);
+    }
+    return (React.createElement(Flex, Object.assign({ flex: 1, flexDirection: "column" }, extraContainerProps),
+        getSectionContents(header, stepHeader, renderStepHeader),
+        React.createElement(Flex, Object.assign({ my: 8, justifyContent: "center" }, extraStepperContainerProps),
+            React.createElement(Stepper, Object.assign({ activeIndex: activeIndex, steps: steps, flex: 1 }, extraStepperProps))),
+        React.createElement(Flex, { flex: 1, flexDirection: "column", position: "relative" }, renderChildren
+            ? renderChildren(Object.assign(Object.assign({}, renderArgs), { children: innerContents }))
+            : innerContents),
+        getSectionContents(footer, stepFooter, renderStepFooter)));
+}
+function Step({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+FlowStepper.Step = Step;
+export default FlowStepper;
+/**
+ * This is a FlowStepper where each child must have an `itemKey: string` prop
+ * and the active step is defined by the `activeKey: string` prop.
+ *
+ * This allows for usages with a lot of steps where dealing with indices could be
+ * painful and error prone (for instance inserting/removing a step somewhere would shift
+ * the indices of the following steps and navigation would be impacted).
+ *
+ * By using string identifiers (`itemKey`) for each step, it's more "human readable"
+ * and less error prone to setup a navigation logic between steps.
+ */
+function FlowStepperIndexed(props) {
+    const { activeKey, children } = props, otherProps = __rest(props, ["activeKey", "children"]);
+    const activeIndex = React.Children.toArray(children).findIndex((child) => {
+        const res = isElement(child) && child.props.itemKey === activeKey;
+        return res;
+    });
+    return (React.createElement(FlowStepper, Object.assign({}, otherProps, { activeIndex: activeIndex }), children));
+}
+function IndexedStep({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+FlowStepperIndexed.Step = IndexedStep;
+FlowStepper.Indexed = FlowStepperIndexed;

package/{components → lib/components}/navigation/progress/ProgressBar/Onboarding.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Step {
     key: string;
     label: string;