@kaizen/components 1.24.0 → 1.24.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import React$1, { MouseEvent, FocusEvent, ComponentType, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, CSSProperties, Context, SVGAttributes } from 'react';
+import React$1, { MouseEvent, FocusEvent, ComponentType, ButtonHTMLAttributes, HTMLAttributes, ReactNode, SVGAttributes, InputHTMLAttributes, CSSProperties, Context } from 'react';
 import { DateInputProps, CalendarSingleProps, DisabledDays, DateRange } from '@kaizen/date-picker';
 export { DateRange, DisabledDays } from '@kaizen/date-picker';
 import { FieldMessageStatus } from '@kaizen/draft-form';
@@ -53,7 +53,7 @@ type WorkingProps = {
 type WorkingUndefinedProps = {
     working?: false;
 };
-type BadgeProps = {
+type ButtonBadgeProps = {
     text: string;
     animateChange?: boolean;
     variant?: "default" | "dark" | "active";
@@ -76,7 +76,7 @@ type ButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | Working
     secondary?: boolean;
     /** @default "regular" */
     size?: "small" | "regular";
-    badge?: BadgeProps;
+    badge?: ButtonBadgeProps;
     type?: "submit" | "reset" | "button";
     fullWidth?: boolean;
     iconPosition?: "start" | "end";
@@ -91,6 +91,7 @@ type ButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | Working
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<ButtonRef | undefined>>;
 
 type OverrideClassName<T extends Record<string, any>> = Omit<T, "className"> & {
+    /** Add extra classnames to the component. Try out some Tailwind classes (eg. `!mb-48`) to see! */
     classNameOverride?: string;
 };
 
@@ -781,364 +782,6 @@ declare const FilterBar: {
     };
 };
 
-type InputSearchProps = {
-    id: string;
-    reversed?: boolean;
-    loading?: boolean;
-    secondary?: boolean;
-    onClear?: () => void;
-} & OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue">>;
-declare const InputSearch: {
-    (props: InputSearchProps): JSX.Element;
-    displayName: string;
-};
-
-/**
- * Use this class to set and apply themes, and to access or subscribe to the currently active one.
- * This class fulfills the idea of theming and runtime theme switching by relying on CSS variables,
- * and the ability to update them in JavaScript - a framework agnostic method.
- *
- * It works by converting a Theme interface to a flattened map of CSS variable keys and values, then calling `document.documentElement.style.setProperty(key, value)`.
- */
-declare class ThemeManager<Theme extends Theme$1 = Theme$1> {
-    private themeChangeListeners;
-    private theme;
-    private rootElement;
-    private rootElementId;
-    constructor(theme: Theme, rootElementId?: string, apply?: boolean);
-    getRootElement: () => HTMLElement | null;
-    getRootElementId: () => string;
-    getCurrentTheme: () => Theme;
-    setRootElement: (element: HTMLElement) => void;
-    setRootElementId: (rootElementId: string) => string;
-    setAndApplyTheme: (theme: Theme, force?: boolean) => void;
-    addThemeChangeListener: (listener: (theme: Theme) => void) => void;
-    removeThemeChangeListener: (listener: (theme: Theme) => void) => void;
-    applyCurrentTheme: () => void;
-    private notifyThemeChangeListeners;
-}
-
-/**
- * Use a custom type for CSS properties becauase we should eventually write a more strongly typed version using template literal types.
- * This could definitely be contributed back to the community too. An example starting point here https://github.com/ghoullier/awesome-template-literal-types#css-parser
- * For example:
- * ```ts
- * type Font = {
- *   fontSize: `${number}rem`,
- *
- *  }
- * type HexDigit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F ;
- * type Color = `rgba(${number}, ${number}, ${number}, ${number}) | #${HexDigit}${HexDigit}${HexDigit}` // You get the point
- *
- * ```
- * */
-type KaizenCSSProperties = CSSProperties;
-type Hex = string;
-type TypographyFont = {
-    fontFamily: KaizenCSSProperties["fontFamily"];
-    fontWeight: KaizenCSSProperties["fontWeight"];
-    fontSize: KaizenCSSProperties["fontSize"];
-    lineHeight: KaizenCSSProperties["lineHeight"];
-    letterSpacing: KaizenCSSProperties["letterSpacing"];
-};
-type ThemeKey = "heart" | "custom";
-type Theme = {
-    themeKey: ThemeKey;
-    border: {
-        solid: {
-            borderWidth: KaizenCSSProperties["borderWidth"];
-            borderRadius: KaizenCSSProperties["borderRadius"];
-            borderStyle: KaizenCSSProperties["borderStyle"];
-            borderColor: KaizenCSSProperties["borderColor"];
-        };
-        dashed: {
-            borderWidth: KaizenCSSProperties["borderWidth"];
-            borderRadius: KaizenCSSProperties["borderRadius"];
-            borderStyle: KaizenCSSProperties["borderStyle"];
-        };
-        borderless: {
-            borderWidth: KaizenCSSProperties["borderWidth"];
-            borderRadius: KaizenCSSProperties["borderRadius"];
-            borderStyle: KaizenCSSProperties["borderStyle"];
-            borderColor: KaizenCSSProperties["borderColor"];
-        };
-        focusRing: {
-            borderWidth: KaizenCSSProperties["borderWidth"];
-            borderRadius: KaizenCSSProperties["borderRadius"];
-            borderStyle: KaizenCSSProperties["borderStyle"];
-        };
-    };
-    animation: {
-        easingFunction: {
-            easeInOut: string;
-            easeIn: string;
-            easeOut: string;
-            linear: string;
-            bounceIn: string;
-            bounceOut: string;
-            bounceInOut: string;
-        };
-        duration: {
-            instant: string;
-            immediate: string;
-            rapid: string;
-            fast: string;
-            slow: string;
-            deliberate: string;
-        };
-    };
-    color: {
-        purple: {
-            "100": Hex;
-            "200": Hex;
-            "300": Hex;
-            "400": Hex;
-            "500": Hex;
-            "600": Hex;
-            "700": Hex;
-            "800": Hex;
-        };
-        blue: {
-            "100": Hex;
-            "200": Hex;
-            "300": Hex;
-            "400": Hex;
-            "500": Hex;
-            "600": Hex;
-            "700": Hex;
-        };
-        green: {
-            "100": Hex;
-            "200": Hex;
-            "300": Hex;
-            "400": Hex;
-            "500": Hex;
-            "600": Hex;
-            "700": Hex;
-        };
-        yellow: {
-            "100": Hex;
-            "200": Hex;
-            "300": Hex;
-            "400": Hex;
-            "500": Hex;
-            "600": Hex;
-            "700": Hex;
-        };
-        red: {
-            "100": Hex;
-            "200": Hex;
-            "300": Hex;
-            "400": Hex;
-            "500": Hex;
-            "600": Hex;
-            "700": Hex;
-        };
-        orange: {
-            "100": Hex;
-            "200": Hex;
-            "300": Hex;
-            "400": Hex;
-            "500": Hex;
-            "600": Hex;
-            "700": Hex;
-        };
-        gray: {
-            "100": Hex;
-            "200": Hex;
-            "300": Hex;
-            "400": Hex;
-            "500": Hex;
-            "600": Hex;
-        };
-        white: Hex;
-    };
-    dataViz: {
-        favorable: Hex;
-        unfavorable: Hex;
-    };
-    layout: {
-        contentMaxWidth: string;
-        contentMaxWidthWithSidebar: string;
-        contentSideMargin: string;
-        mobileActionsDrawerHeight: string;
-        navigationBarHeight: string;
-        breakpoints: {
-            medium: string;
-            large: string;
-        };
-    };
-    shadow: {
-        small: {
-            boxShadow: string;
-        };
-        large: {
-            boxShadow: string;
-        };
-    };
-    spacing: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        xxl: string;
-        xxxl: string;
-        xxxxl: string;
-        xxxxxl: string;
-        0: string;
-        1: string;
-        2: string;
-        4: string;
-        6: string;
-        8: string;
-        12: string;
-        16: string;
-        24: string;
-        32: string;
-        40: string;
-        48: string;
-        56: string;
-        64: string;
-        72: string;
-        80: string;
-        96: string;
-        112: string;
-        128: string;
-        160: string;
-        200: string;
-        240: string;
-        280: string;
-        320: string;
-    };
-    typography: {
-        dataLarge: TypographyFont;
-        dataLargeUnits: TypographyFont;
-        dataMedium: TypographyFont;
-        dataMediumUnits: TypographyFont;
-        dataSmall: TypographyFont;
-        dataSmallUnits: TypographyFont;
-        display0: TypographyFont;
-        heading1: TypographyFont;
-        heading2: TypographyFont;
-        heading3: TypographyFont;
-        heading4: TypographyFont;
-        heading5: TypographyFont;
-        heading6: TypographyFont;
-        paragraphIntroLede: TypographyFont;
-        paragraphBody: TypographyFont;
-        paragraphSmall: TypographyFont;
-        paragraphExtraSmall: TypographyFont;
-        paragraphBold: {
-            fontWeight: KaizenCSSProperties["fontWeight"];
-        };
-        buttonPrimary: TypographyFont;
-        buttonSecondary: TypographyFont;
-    };
-};
-type DeepMapObjectLeafs<T, LeafType> = T extends string | number | bigint | boolean | symbol | null | undefined | ((...params: any[]) => any) ? LeafType : T extends Record<any, any> ? {
-    [Key in keyof T]: DeepMapObjectLeafs<T[Key], LeafType>;
-} : T;
-/**
- * Apologies for the complex types.
- * This type represents the Theme type but with every leaf value in the tree mapped strictly to a string, rather than a number or a more complex type such as a string union.
- * The reason for this is to have a more accurate type for the generated hierarchy of design tokens which are represented as CSS custom properties, e.g. `var(--color-purple-800)`.
- */
-type CSSVariableTheme = DeepMapObjectLeafs<Theme, string>;
-
-declare const heartTheme: Theme;
-
-declare const defaultTheme: Theme;
-
-declare const ThemeContext: Context<Theme>;
-/**
- * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
- * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
- */
-declare const ThemeProvider: ({ themeManager, ...props }: {
-    themeManager?: ThemeManager<_kaizen_design_tokens.Theme> | undefined;
-    children: React$1.ReactNode;
-}) => JSX.Element;
-declare const useTheme: () => Theme;
-
-type KaizenProviderProps = {
-    children: React$1.ReactNode;
-    themeManager?: ThemeManager;
-    locale?: string;
-};
-declare const KaizenProvider: {
-    ({ children, themeManager, locale, }: KaizenProviderProps): JSX.Element;
-    displayName: string;
-};
-
-type ProgressStepperProps = {
-    stepName: string;
-    steps: [string, ...string[]];
-    isComplete?: boolean;
-};
-
-type FooterProps = {
-    /** An action to return to a previous step */
-    previousAction?: JSX.Element;
-    /** An action to progress to the next step or submit the form */
-    nextAction?: JSX.Element;
-} & ProgressStepperProps & OverrideClassName<Omit<HTMLAttributes<HTMLElement>, "children">>;
-
-type WorkflowStatus = {
-    /** @default: "statusDraft" */
-    variant?: DefaultTagProps["variant"];
-    content?: string;
-};
-type WorkflowTitlesProps = {
-    workflowName: string;
-    stepName: string;
-    status?: WorkflowStatus;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
-
-type WorkflowActionsProps = {
-    /**
-     * Header actions will render in order of the array.
-     */
-    headerActions?: JSX.Element[];
-} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>;
-
-type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps;
-
-type WorkflowMainProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
-    children: ReactNode;
-};
-
-type WorkflowWrapperProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
-    children: ReactNode;
-};
-
-type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & HeaderProps;
-/**
- * @deprecated Use { Workflow } from `@kaizen/components/future`
- */
-declare const Workflow: (({ stepName, steps, isComplete, workflowName, status, headerActions, children, nextAction, previousAction, classNameOverride, ...restProps }: WorkflowProps) => JSX.Element) & {
-    Header: {
-        ({ workflowName, stepName, status, headerActions, ...restProps }: HeaderProps): JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ steps, stepName, isComplete, previousAction, nextAction, ...restProps }: FooterProps): JSX.Element;
-        displayName: string;
-    };
-    Main: {
-        ({ children, classNameOverride, ...restProps }: WorkflowMainProps): JSX.Element;
-        displayName: string;
-    };
-    ProgressStepper: {
-        ({ stepName, steps, isComplete, ...restprops }: ProgressStepperProps): JSX.Element;
-        displayName: string;
-    };
-    Wrapper: {
-        ({ children, classNameOverride, ...restProps }: WorkflowWrapperProps): JSX.Element;
-        displayName: string;
-    };
-};
-
 type BaseSVGProps = {
     inheritSize?: boolean;
 } & OverrideClassName<SVGAttributes<SVGElement>>;
@@ -1600,28 +1243,386 @@ declare const UnderlineIcon: (props: IconProps) => JSX.Element;
 
 declare const UndoIcon: (props: IconProps) => JSX.Element;
 
-declare const UserAddIcon: (props: IconProps) => JSX.Element;
+declare const UserAddIcon: (props: IconProps) => JSX.Element;
+
+declare const UserDeleteIcon: (props: IconProps) => JSX.Element;
+
+declare const UserExitIcon: (props: IconProps) => JSX.Element;
+
+declare const UserIcon: (props: IconProps) => JSX.Element;
+
+declare const UserSelectIcon: (props: IconProps) => JSX.Element;
+
+declare const UserSettingsIcon: (props: IconProps) => JSX.Element;
+
+declare const UserUpdateIcon: (props: IconProps) => JSX.Element;
+
+declare const UsersIcon: (props: IconProps) => JSX.Element;
+
+declare const VisibleIcon: (props: IconProps) => JSX.Element;
+
+declare const WritingIcon: (props: IconProps) => JSX.Element;
+
+declare const ZoomInIcon: (props: IconProps) => JSX.Element;
+
+declare const ZoomOutIcon: (props: IconProps) => JSX.Element;
+
+type InputSearchProps = {
+    id: string;
+    reversed?: boolean;
+    loading?: boolean;
+    secondary?: boolean;
+    onClear?: () => void;
+} & OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue">>;
+declare const InputSearch: {
+    (props: InputSearchProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Use this class to set and apply themes, and to access or subscribe to the currently active one.
+ * This class fulfills the idea of theming and runtime theme switching by relying on CSS variables,
+ * and the ability to update them in JavaScript - a framework agnostic method.
+ *
+ * It works by converting a Theme interface to a flattened map of CSS variable keys and values, then calling `document.documentElement.style.setProperty(key, value)`.
+ */
+declare class ThemeManager<Theme extends Theme$1 = Theme$1> {
+    private themeChangeListeners;
+    private theme;
+    private rootElement;
+    private rootElementId;
+    constructor(theme: Theme, rootElementId?: string, apply?: boolean);
+    getRootElement: () => HTMLElement | null;
+    getRootElementId: () => string;
+    getCurrentTheme: () => Theme;
+    setRootElement: (element: HTMLElement) => void;
+    setRootElementId: (rootElementId: string) => string;
+    setAndApplyTheme: (theme: Theme, force?: boolean) => void;
+    addThemeChangeListener: (listener: (theme: Theme) => void) => void;
+    removeThemeChangeListener: (listener: (theme: Theme) => void) => void;
+    applyCurrentTheme: () => void;
+    private notifyThemeChangeListeners;
+}
+
+/**
+ * Use a custom type for CSS properties becauase we should eventually write a more strongly typed version using template literal types.
+ * This could definitely be contributed back to the community too. An example starting point here https://github.com/ghoullier/awesome-template-literal-types#css-parser
+ * For example:
+ * ```ts
+ * type Font = {
+ *   fontSize: `${number}rem`,
+ *
+ *  }
+ * type HexDigit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F ;
+ * type Color = `rgba(${number}, ${number}, ${number}, ${number}) | #${HexDigit}${HexDigit}${HexDigit}` // You get the point
+ *
+ * ```
+ * */
+type KaizenCSSProperties = CSSProperties;
+type Hex = string;
+type TypographyFont = {
+    fontFamily: KaizenCSSProperties["fontFamily"];
+    fontWeight: KaizenCSSProperties["fontWeight"];
+    fontSize: KaizenCSSProperties["fontSize"];
+    lineHeight: KaizenCSSProperties["lineHeight"];
+    letterSpacing: KaizenCSSProperties["letterSpacing"];
+};
+type ThemeKey = "heart" | "custom";
+type Theme = {
+    themeKey: ThemeKey;
+    border: {
+        solid: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+            borderColor: KaizenCSSProperties["borderColor"];
+        };
+        dashed: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+        };
+        borderless: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+            borderColor: KaizenCSSProperties["borderColor"];
+        };
+        focusRing: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+        };
+    };
+    animation: {
+        easingFunction: {
+            easeInOut: string;
+            easeIn: string;
+            easeOut: string;
+            linear: string;
+            bounceIn: string;
+            bounceOut: string;
+            bounceInOut: string;
+        };
+        duration: {
+            instant: string;
+            immediate: string;
+            rapid: string;
+            fast: string;
+            slow: string;
+            deliberate: string;
+        };
+    };
+    color: {
+        purple: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+            "800": Hex;
+        };
+        blue: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        green: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        yellow: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        red: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        orange: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        gray: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+        };
+        white: Hex;
+    };
+    dataViz: {
+        favorable: Hex;
+        unfavorable: Hex;
+    };
+    layout: {
+        contentMaxWidth: string;
+        contentMaxWidthWithSidebar: string;
+        contentSideMargin: string;
+        mobileActionsDrawerHeight: string;
+        navigationBarHeight: string;
+        breakpoints: {
+            medium: string;
+            large: string;
+        };
+    };
+    shadow: {
+        small: {
+            boxShadow: string;
+        };
+        large: {
+            boxShadow: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+        xxxxl: string;
+        xxxxxl: string;
+        0: string;
+        1: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        32: string;
+        40: string;
+        48: string;
+        56: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+        112: string;
+        128: string;
+        160: string;
+        200: string;
+        240: string;
+        280: string;
+        320: string;
+    };
+    typography: {
+        dataLarge: TypographyFont;
+        dataLargeUnits: TypographyFont;
+        dataMedium: TypographyFont;
+        dataMediumUnits: TypographyFont;
+        dataSmall: TypographyFont;
+        dataSmallUnits: TypographyFont;
+        display0: TypographyFont;
+        heading1: TypographyFont;
+        heading2: TypographyFont;
+        heading3: TypographyFont;
+        heading4: TypographyFont;
+        heading5: TypographyFont;
+        heading6: TypographyFont;
+        paragraphIntroLede: TypographyFont;
+        paragraphBody: TypographyFont;
+        paragraphSmall: TypographyFont;
+        paragraphExtraSmall: TypographyFont;
+        paragraphBold: {
+            fontWeight: KaizenCSSProperties["fontWeight"];
+        };
+        buttonPrimary: TypographyFont;
+        buttonSecondary: TypographyFont;
+    };
+};
+type DeepMapObjectLeafs<T, LeafType> = T extends string | number | bigint | boolean | symbol | null | undefined | ((...params: any[]) => any) ? LeafType : T extends Record<any, any> ? {
+    [Key in keyof T]: DeepMapObjectLeafs<T[Key], LeafType>;
+} : T;
+/**
+ * Apologies for the complex types.
+ * This type represents the Theme type but with every leaf value in the tree mapped strictly to a string, rather than a number or a more complex type such as a string union.
+ * The reason for this is to have a more accurate type for the generated hierarchy of design tokens which are represented as CSS custom properties, e.g. `var(--color-purple-800)`.
+ */
+type CSSVariableTheme = DeepMapObjectLeafs<Theme, string>;
+
+declare const heartTheme: Theme;
 
-declare const UserDeleteIcon: (props: IconProps) => JSX.Element;
+declare const defaultTheme: Theme;
 
-declare const UserExitIcon: (props: IconProps) => JSX.Element;
+declare const ThemeContext: Context<Theme>;
+/**
+ * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
+ * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
+ */
+declare const ThemeProvider: ({ themeManager, ...props }: {
+    themeManager?: ThemeManager<_kaizen_design_tokens.Theme> | undefined;
+    children: React$1.ReactNode;
+}) => JSX.Element;
+declare const useTheme: () => Theme;
 
-declare const UserIcon: (props: IconProps) => JSX.Element;
+type KaizenProviderProps = {
+    children: React$1.ReactNode;
+    themeManager?: ThemeManager;
+    locale?: string;
+};
+declare const KaizenProvider: {
+    ({ children, themeManager, locale, }: KaizenProviderProps): JSX.Element;
+    displayName: string;
+};
 
-declare const UserSelectIcon: (props: IconProps) => JSX.Element;
+type ProgressStepperProps = {
+    stepName: string;
+    steps: [string, ...string[]];
+    isComplete?: boolean;
+};
 
-declare const UserSettingsIcon: (props: IconProps) => JSX.Element;
+type FooterProps = {
+    /** An action to return to a previous step */
+    previousAction?: JSX.Element;
+    /** An action to progress to the next step or submit the form */
+    nextAction?: JSX.Element;
+} & ProgressStepperProps & OverrideClassName<Omit<HTMLAttributes<HTMLElement>, "children">>;
 
-declare const UserUpdateIcon: (props: IconProps) => JSX.Element;
+type WorkflowStatus = {
+    /** @default: "statusDraft" */
+    variant?: DefaultTagProps["variant"];
+    content?: string;
+};
+type WorkflowTitlesProps = {
+    workflowName: string;
+    stepName: string;
+    status?: WorkflowStatus;
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
 
-declare const UsersIcon: (props: IconProps) => JSX.Element;
+type WorkflowActionsProps = {
+    /**
+     * Header actions will render in order of the array.
+     */
+    headerActions?: JSX.Element[];
+} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>;
 
-declare const VisibleIcon: (props: IconProps) => JSX.Element;
+type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps;
 
-declare const WritingIcon: (props: IconProps) => JSX.Element;
+type WorkflowMainProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
+    children: ReactNode;
+};
 
-declare const ZoomInIcon: (props: IconProps) => JSX.Element;
+type WorkflowWrapperProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
+    children: ReactNode;
+};
 
-declare const ZoomOutIcon: (props: IconProps) => JSX.Element;
+type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & HeaderProps;
+/**
+ * @deprecated Use { Workflow } from `@kaizen/components/future`
+ */
+declare const Workflow: (({ stepName, steps, isComplete, workflowName, status, headerActions, children, nextAction, previousAction, classNameOverride, ...restProps }: WorkflowProps) => JSX.Element) & {
+    Header: {
+        ({ workflowName, stepName, status, headerActions, ...restProps }: HeaderProps): JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ steps, stepName, isComplete, previousAction, nextAction, ...restProps }: FooterProps): JSX.Element;
+        displayName: string;
+    };
+    Main: {
+        ({ children, classNameOverride, ...restProps }: WorkflowMainProps): JSX.Element;
+        displayName: string;
+    };
+    ProgressStepper: {
+        ({ stepName, steps, isComplete, ...restprops }: ProgressStepperProps): JSX.Element;
+        displayName: string;
+    };
+    Wrapper: {
+        ({ children, classNameOverride, ...restProps }: WorkflowWrapperProps): JSX.Element;
+        displayName: string;
+    };
+};
 
-export { AcademyIcon, ActionOffIcon, ActionOffWhiteIcon, ActionOnIcon, type ActiveFiltersArray, AddIcon, AddLinkIcon, AddWhiteIcon, ArchivedIcon, ArchivedWhiteIcon, ArrowBackwardIcon, ArrowDownIcon, ArrowForwardIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, type BadgeProps, BlankIcon, BoldIcon, BookmarkOffIcon, BookmarkOnIcon, BranchingIcon, BullettedListIcon, Button, type ButtonFormAttributes, type ButtonProps, type ButtonRef, type ButtonType, type CSSVariableTheme, CaMonogramIcon, CameraIcon, CautionIcon, CautionWhiteIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClearButton, type ClearButtonProps, ClearIcon, ClearWhiteIcon, CloseIcon, ClosedIcon, ClosedWhiteIcon, CommentAddIcon, CommentAddWhiteIcon, CommentBankIcon, CommentDisabledIcon, CommentDisabledWhiteIcon, CommentIcon, CommentWhiteIcon, CommunicationsIcon, CompetencyLibraryIcon, ConfigureIcon, ConnectIcon, ConnectLineIcon, type CustomButtonProps, CustomIcon, DashboardIcon, DateEndIcon, DateEndWhiteIcon, type DateRangeFieldValidationMessage, DateRangeIcon, DateRangeWhiteIcon, DateStartIcon, DateStartWhiteIcon, type DateValidationResponse, DecreaseIndentIcon, type DeepMapObjectLeafs, DeltaBareIcon, DeltaBareWhiteIcon, DeltaFlatIcon, DeltaIcon, DeltaNegativeIcon, DeltaPositiveIcon, DeltaWhiteIcon, DemographicsIcon, DepartmentIcon, DraftIcon, DraftWhiteIcon, DragIcon, DuplicateIcon, EditIcon, EffectivenessIcon, EllipsisIcon, EmailIcon, EmptyIcon, EmptyWhiteIcon, EndIcon, EngagementIcon, EngagementWhiteIcon, EqualIcon, EqualWhiteIcon, ErrorPage, type ErrorPageProps, ExclamationIcon, ExclamationOctagonIcon, ExclamationOctagonWhiteIcon, ExclamationWhiteIcon, ExperienceIcon, ExportIcon, ExportWhiteIcon, ExternalLinkIcon, FaceDissatisfiedIcon, FaceDissatisfiedWhiteIcon, FaceNeutralIcon, FaceNeutralWhiteIcon, FaceSatisfiedIcon, FaceSatisfiedWhiteIcon, FaceVeryDissatisfiedIcon, FaceVeryDissatisfiedWhiteIcon, FaceVerySatisfiedIcon, FaceVerySatisfiedWhiteIcon, FactorsIcon, FavoriteOffIcon, FavoriteOnIcon, FeedbackClassifyIcon, FeedbackClassifyWhiteIcon, FeedbackCompletedIcon, FeedbackCompletedWhiteIcon, FeedbackReportIcon, FeedbackReportWhiteIcon, FeedbackReviewIcon, FeedbackReviewWhiteIcon, FeedbackShareIcon, FeedbackShareWhiteIcon, FileIcon, FileWhiteIcon, Filter, type FilterAttributes, FilterBar, type FilterBarContextValue, type FilterBarProps, FilterBarProvider, type FilterBarProviderProps, type FilterBarState, type FilterBarStateFilters, FilterButton, type FilterButtonProps, FilterButtonRemovable, type FilterButtonRemovableProps, type FilterButtonRemovableRefs, FilterContents, type FilterContentsProps, FilterDatePicker, FilterDatePickerField, type FilterDatePickerFieldProps, type FilterDatePickerProps, FilterDateRangePicker, type FilterDateRangePickerProps, type FilterDateSupportedLocales, FilterIcon, type FilterIsUsableWhen, FilterMultiSelect, type FilterMultiSelectProps, type FilterProps, FilterSelect, type FilterSelectProps, type FilterState, type FilterStateEditableAttributes, type FilterTriggerButtonProps, type FilterTriggerRef, type Filters, type FiltersValues, FlagOffIcon, FlagOffWhiteIcon, FlagOnIcon, FullIcon, type GenericProps, type GetDateValidationHandlerArgs, GridViewIcon, GuidanceIcon, HamburgerIcon, HeatmapIcon, HeatmapWhiteIcon, HierarchyIcon, HomeIcon, ImportIcon, ImportWhiteIcon, IncreaseIndentIcon, IndicatorActiveIcon, IndicatorInactiveIcon, InformationIcon, InformationWhiteIcon, InputSearch, type InputSearchProps, InsightIcon, InsightsIcon, type InternalFilterState, InvisibleIcon, ItalicsIcon, type ItemType, KaizenProvider, type KaizenProviderProps, KebabIcon, KioskIcon, KioskWhiteIcon, LaunchIcon, LaunchWhiteIcon, LeaderboardIcon, type ListBoxItems, type ListBoxProps, type ListBoxSectionProps$1 as ListBoxSectionProps, ListViewIcon, LiveIcon, type LoadMoreButtonProps, LockIcon, LockWhiteIcon, LogOutIcon, type MappedFilters, MaximizeIcon, MeatballsIcon, type MenuFooterProps, type MenuLoadingSkeletonProps, MenuTriggerConsumer, MenuTriggerProvider, type MenuTriggerProviderContextType, type MenuTriggerProviderProps, MinimizeIcon, MinusIcon, type MultiSelectItem, type MultiSelectOptionProps, NavigatorIcon, type NoResultsProps, NotificationIcon, NumberedListIcon, NumberedListRtlIcon, OpenIcon, OpenWhiteIcon, OrganizationIcon, ParticipationIcon, ParticipationWhiteIcon, PauseIcon, PauseWhiteIcon, PercentageIcon, PermissionsIcon, PersonIcon, PhotoUploadIcon, PowerIcon, PrintIcon, PrintWhiteIcon, ProcessManagerIcon, PromotionIcon, PromotionWhiteIcon, QuestionIcon, QuestionWhiteIcon, QuestionsIcon, RedoIcon, RefreshIcon, type RemovableFilterTriggerProps, RemoveLinkIcon, type RenderProps, RepeatsIcon, ReportIcon, ReportSharingIcon, RestoreIcon, SaveIcon, SearchIcon, type SearchInputProps, SearchWhiteIcon, SecurityTipIcon, type SelectItem, type SelectItemNode, type SelectOption, type SelectOptionGroup, type SelectOptionGroupNode, type SelectOptionNode, SelectionConsumer, SelectionProvider, type SelectionProviderContextType, type SelectionProviderProps, SendIcon, SendRtlIcon, SettingsIcon, SettingsWhiteIcon, ShareIcon, SkipIcon, SkipWhiteIcon, SortAscendingIcon, SortDescendingIcon, type SourceFiltersState, SpinnerIcon, StarOffIcon, StarOnIcon, StartIcon, SubtractIcon, SubtractWhiteIcon, SuccessIcon, SuccessWhiteIcon, SupportIcon, SurveysIcon, SurveysWhiteIcon, SyncIcon, TagIcon, TasksIcon, TasksWhiteIcon, TemplateIcon, TemplateWhiteIcon, TextAnalyticsIcon, TextAnalyticsWhiteIcon, type Theme, ThemeContext, type ThemeKey, ThemeManager, ThemeProvider, ThumbsDownIcon, ThumbsUpIcon, TimeIcon, TimeWhiteIcon, TranslationIcon, TrashIcon, type TypographyFont, UnattributedIcon, UnattributedWhiteIcon, UnderlineIcon, UndoIcon, type UseDateValidationArgs, type UseDateValidationValue, UserAddIcon, UserDeleteIcon, UserExitIcon, UserIcon, UserSelectIcon, UserSettingsIcon, UserUpdateIcon, UsersIcon, type ValidateDateResponse, type ValidationMessage, type ValueType, VisibleIcon, Workflow, type WorkflowProps, type WorkingProps, type WorkingUndefinedProps, WritingIcon, ZoomInIcon, ZoomOutIcon, defaultTheme, getDateValidationHandler, getSelectedOptionKeys, getSelectedOptionLabels, getTruncatedLabels, heartTheme, useDateValidation, useFilterBarContext, useMenuTriggerContext, useSelectionContext, useTheme, validateDate };
+export { AcademyIcon, ActionOffIcon, ActionOffWhiteIcon, ActionOnIcon, type ActiveFiltersArray, AddIcon, AddLinkIcon, AddWhiteIcon, ArchivedIcon, ArchivedWhiteIcon, ArrowBackwardIcon, ArrowDownIcon, ArrowForwardIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BlankIcon, BoldIcon, BookmarkOffIcon, BookmarkOnIcon, BranchingIcon, BullettedListIcon, Button, type ButtonBadgeProps, type ButtonFormAttributes, type ButtonProps, type ButtonRef, type ButtonType, type CSSVariableTheme, CaMonogramIcon, CameraIcon, CautionIcon, CautionWhiteIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClearButton, type ClearButtonProps, ClearIcon, ClearWhiteIcon, CloseIcon, ClosedIcon, ClosedWhiteIcon, CommentAddIcon, CommentAddWhiteIcon, CommentBankIcon, CommentDisabledIcon, CommentDisabledWhiteIcon, CommentIcon, CommentWhiteIcon, CommunicationsIcon, CompetencyLibraryIcon, ConfigureIcon, ConnectIcon, ConnectLineIcon, type CustomButtonProps, CustomIcon, DashboardIcon, DateEndIcon, DateEndWhiteIcon, type DateRangeFieldValidationMessage, DateRangeIcon, DateRangeWhiteIcon, DateStartIcon, DateStartWhiteIcon, type DateValidationResponse, DecreaseIndentIcon, type DeepMapObjectLeafs, DeltaBareIcon, DeltaBareWhiteIcon, DeltaFlatIcon, DeltaIcon, DeltaNegativeIcon, DeltaPositiveIcon, DeltaWhiteIcon, DemographicsIcon, DepartmentIcon, DraftIcon, DraftWhiteIcon, DragIcon, DuplicateIcon, EditIcon, EffectivenessIcon, EllipsisIcon, EmailIcon, EmptyIcon, EmptyWhiteIcon, EndIcon, EngagementIcon, EngagementWhiteIcon, EqualIcon, EqualWhiteIcon, ErrorPage, type ErrorPageProps, ExclamationIcon, ExclamationOctagonIcon, ExclamationOctagonWhiteIcon, ExclamationWhiteIcon, ExperienceIcon, ExportIcon, ExportWhiteIcon, ExternalLinkIcon, FaceDissatisfiedIcon, FaceDissatisfiedWhiteIcon, FaceNeutralIcon, FaceNeutralWhiteIcon, FaceSatisfiedIcon, FaceSatisfiedWhiteIcon, FaceVeryDissatisfiedIcon, FaceVeryDissatisfiedWhiteIcon, FaceVerySatisfiedIcon, FaceVerySatisfiedWhiteIcon, FactorsIcon, FavoriteOffIcon, FavoriteOnIcon, FeedbackClassifyIcon, FeedbackClassifyWhiteIcon, FeedbackCompletedIcon, FeedbackCompletedWhiteIcon, FeedbackReportIcon, FeedbackReportWhiteIcon, FeedbackReviewIcon, FeedbackReviewWhiteIcon, FeedbackShareIcon, FeedbackShareWhiteIcon, FileIcon, FileWhiteIcon, Filter, type FilterAttributes, FilterBar, type FilterBarContextValue, type FilterBarProps, FilterBarProvider, type FilterBarProviderProps, type FilterBarState, type FilterBarStateFilters, FilterButton, type FilterButtonProps, FilterButtonRemovable, type FilterButtonRemovableProps, type FilterButtonRemovableRefs, FilterContents, type FilterContentsProps, FilterDatePicker, FilterDatePickerField, type FilterDatePickerFieldProps, type FilterDatePickerProps, FilterDateRangePicker, type FilterDateRangePickerProps, type FilterDateSupportedLocales, FilterIcon, type FilterIsUsableWhen, FilterMultiSelect, type FilterMultiSelectProps, type FilterProps, FilterSelect, type FilterSelectProps, type FilterState, type FilterStateEditableAttributes, type FilterTriggerButtonProps, type FilterTriggerRef, type Filters, type FiltersValues, FlagOffIcon, FlagOffWhiteIcon, FlagOnIcon, FullIcon, type GenericProps, type GetDateValidationHandlerArgs, GridViewIcon, GuidanceIcon, HamburgerIcon, HeatmapIcon, HeatmapWhiteIcon, HierarchyIcon, HomeIcon, ImportIcon, ImportWhiteIcon, IncreaseIndentIcon, IndicatorActiveIcon, IndicatorInactiveIcon, InformationIcon, InformationWhiteIcon, InputSearch, type InputSearchProps, InsightIcon, InsightsIcon, type InternalFilterState, InvisibleIcon, ItalicsIcon, type ItemType, KaizenProvider, type KaizenProviderProps, KebabIcon, KioskIcon, KioskWhiteIcon, LaunchIcon, LaunchWhiteIcon, LeaderboardIcon, type ListBoxItems, type ListBoxProps, type ListBoxSectionProps$1 as ListBoxSectionProps, ListViewIcon, LiveIcon, type LoadMoreButtonProps, LockIcon, LockWhiteIcon, LogOutIcon, type MappedFilters, MaximizeIcon, MeatballsIcon, type MenuFooterProps, type MenuLoadingSkeletonProps, MenuTriggerConsumer, MenuTriggerProvider, type MenuTriggerProviderContextType, type MenuTriggerProviderProps, MinimizeIcon, MinusIcon, type MultiSelectItem, type MultiSelectOptionProps, NavigatorIcon, type NoResultsProps, NotificationIcon, NumberedListIcon, NumberedListRtlIcon, OpenIcon, OpenWhiteIcon, OrganizationIcon, ParticipationIcon, ParticipationWhiteIcon, PauseIcon, PauseWhiteIcon, PercentageIcon, PermissionsIcon, PersonIcon, PhotoUploadIcon, PowerIcon, PrintIcon, PrintWhiteIcon, ProcessManagerIcon, PromotionIcon, PromotionWhiteIcon, QuestionIcon, QuestionWhiteIcon, QuestionsIcon, RedoIcon, RefreshIcon, type RemovableFilterTriggerProps, RemoveLinkIcon, type RenderProps, RepeatsIcon, ReportIcon, ReportSharingIcon, RestoreIcon, SaveIcon, SearchIcon, type SearchInputProps, SearchWhiteIcon, SecurityTipIcon, type SelectItem, type SelectItemNode, type SelectOption, type SelectOptionGroup, type SelectOptionGroupNode, type SelectOptionNode, SelectionConsumer, SelectionProvider, type SelectionProviderContextType, type SelectionProviderProps, SendIcon, SendRtlIcon, SettingsIcon, SettingsWhiteIcon, ShareIcon, SkipIcon, SkipWhiteIcon, SortAscendingIcon, SortDescendingIcon, type SourceFiltersState, SpinnerIcon, StarOffIcon, StarOnIcon, StartIcon, SubtractIcon, SubtractWhiteIcon, SuccessIcon, SuccessWhiteIcon, SupportIcon, SurveysIcon, SurveysWhiteIcon, SyncIcon, TagIcon, TasksIcon, TasksWhiteIcon, TemplateIcon, TemplateWhiteIcon, TextAnalyticsIcon, TextAnalyticsWhiteIcon, type Theme, ThemeContext, type ThemeKey, ThemeManager, ThemeProvider, ThumbsDownIcon, ThumbsUpIcon, TimeIcon, TimeWhiteIcon, TranslationIcon, TrashIcon, type TypographyFont, UnattributedIcon, UnattributedWhiteIcon, UnderlineIcon, UndoIcon, type UseDateValidationArgs, type UseDateValidationValue, UserAddIcon, UserDeleteIcon, UserExitIcon, UserIcon, UserSelectIcon, UserSettingsIcon, UserUpdateIcon, UsersIcon, type ValidateDateResponse, type ValidationMessage, type ValueType, VisibleIcon, Workflow, type WorkflowProps, type WorkingProps, type WorkingUndefinedProps, WritingIcon, ZoomInIcon, ZoomOutIcon, defaultTheme, getDateValidationHandler, getSelectedOptionKeys, getSelectedOptionLabels, getTruncatedLabels, heartTheme, useDateValidation, useFilterBarContext, useMenuTriggerContext, useSelectionContext, useTheme, validateDate };