@kaizen/components 1.24.0 → 1.24.2

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';
@@ -44,7 +44,6 @@ type GenericProps = {
     component?: ComponentType<CustomButtonProps>;
     classNameOverride?: string;
 };
-type ButtonType = "submit" | "reset" | "button";
 type WorkingProps = {
     working: true;
     workingLabel: string;
@@ -53,30 +52,23 @@ type WorkingProps = {
 type WorkingUndefinedProps = {
     working?: false;
 };
-type BadgeProps = {
+type ButtonBadgeProps = {
     text: string;
     animateChange?: boolean;
     variant?: "default" | "dark" | "active";
     reversed?: boolean;
 };
-type RenderProps = ButtonProps & {
-    additionalContent?: React$1.ReactNode;
-    iconButton?: boolean;
-    directionalLink?: boolean;
-    paginationLink?: boolean;
-    isActive?: boolean;
-};
 type ButtonRef = {
     focus: () => void;
 };
-type ButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | WorkingUndefinedProps) & {
+type GenericButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | WorkingUndefinedProps) & {
     label: string;
     primary?: boolean;
     destructive?: boolean;
     secondary?: boolean;
     /** @default "regular" */
     size?: "small" | "regular";
-    badge?: BadgeProps;
+    badge?: ButtonBadgeProps;
     type?: "submit" | "reset" | "button";
     fullWidth?: boolean;
     iconPosition?: "start" | "end";
@@ -84,13 +76,80 @@ type ButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | Working
     disabled?: boolean;
 };
 
+type ButtonProps = GenericButtonProps;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}
+ */
+declare const Button: React$1.ForwardRefExoticComponent<GenericButtonProps & React$1.RefAttributes<ButtonRef | undefined>>;
+
+type IconButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | WorkingUndefinedProps) & {
+    label: string;
+    primary?: boolean;
+    destructive?: boolean;
+    secondary?: boolean;
+    /** @default "regular" */
+    size?: "small" | "regular";
+    badge?: ButtonBadgeProps;
+    type?: "submit" | "reset" | "button";
+    fullWidth?: boolean;
+    icon?: JSX.Element;
+    disabled?: boolean;
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
+ */
+declare const IconButton: {
+    (props: IconButtonProps): JSX.Element;
+    defaultProps: {
+        primary: boolean;
+        destructive: boolean;
+        disabled: boolean;
+        reversed: boolean;
+        secondary: boolean;
+    };
+    displayName: string;
+};
+
+type PaginationLinkProps = GenericProps & {
+    pageNumber: number;
+    isActive?: boolean;
+    "aria-label": string;
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082092975/Pagination Guidance} |
+ * {@link https://cultureamp.design/?path=/story/components-buttons-paginationlink--docs Storybook}
+ */
+declare const PaginationLink: {
+    ({ pageNumber, ...restProps }: PaginationLinkProps): JSX.Element;
+    defaultProps: {
+        reversed: boolean;
+        isActive: boolean;
+    };
+    displayName: string;
+};
+
+type DirectionalLinkProps = {
+    label: string;
+    disabled?: boolean;
+    direction: "prev" | "next" | "start" | "end";
+} & GenericProps;
 /**
- * {@link https://cultureamp.design/components/button/ Guidance} |
- * {@link https://cultureamp.design/storybook/?path=/docs/components-button--default-kaizen-site-demo Storybook}
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082092975/Pagination Guidance} |
+ * {@link https://cultureamp.design/?path=/story/components-buttons-directionallink--docs Storybook}
  */
-declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<ButtonRef | undefined>>;
+declare const DirectionalLink: {
+    (props: DirectionalLinkProps): JSX.Element;
+    defaultProps: {
+        reversed: boolean;
+        disabled: boolean;
+    };
+    displayName: string;
+};
 
 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;
 };
 
@@ -586,7 +645,7 @@ declare const FilterMultiSelect: {
         displayName: string;
     };
     LoadMoreButton: {
-        (props: ButtonProps): JSX.Element;
+        (props: GenericButtonProps): JSX.Element;
         displayName: string;
     };
     NoResults: {
@@ -781,378 +840,20 @@ 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;
+type BaseSVGProps = {
+    inheritSize?: boolean;
+} & OverrideClassName<SVGAttributes<SVGElement>>;
+type MeaningfulIcon = {
+    role: "img";
+    "aria-label": string;
+};
+type DecorativeIcon = {
+    role: "presentation";
+    "aria-label"?: never;
 };
+type IconProps = BaseSVGProps & (MeaningfulIcon | DecorativeIcon);
 
-/**
- * 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>>;
-type MeaningfulIcon = {
-    role: "img";
-    "aria-label": string;
-};
-type DecorativeIcon = {
-    role: "presentation";
-    "aria-label"?: never;
-};
-type IconProps = BaseSVGProps & (MeaningfulIcon | DecorativeIcon);
-
-declare const AcademyIcon: (props: IconProps) => JSX.Element;
+declare const AcademyIcon: (props: IconProps) => JSX.Element;
 
 declare const ActionOffIcon: (props: IconProps) => JSX.Element;
 
@@ -1624,4 +1325,362 @@ declare const ZoomInIcon: (props: IconProps) => JSX.Element;
 
 declare const ZoomOutIcon: (props: IconProps) => JSX.Element;
 
-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 };
+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;
+    };
+};
+
+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 ButtonProps, 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, DirectionalLink, type DirectionalLinkProps, 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 GetDateValidationHandlerArgs, GridViewIcon, GuidanceIcon, HamburgerIcon, HeatmapIcon, HeatmapWhiteIcon, HierarchyIcon, HomeIcon, IconButton, type IconButtonProps, 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, PaginationLink, type PaginationLinkProps, ParticipationIcon, ParticipationWhiteIcon, PauseIcon, PauseWhiteIcon, PercentageIcon, PermissionsIcon, PersonIcon, PhotoUploadIcon, PowerIcon, PrintIcon, PrintWhiteIcon, ProcessManagerIcon, PromotionIcon, PromotionWhiteIcon, QuestionIcon, QuestionWhiteIcon, QuestionsIcon, RedoIcon, RefreshIcon, type RemovableFilterTriggerProps, RemoveLinkIcon, 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, WritingIcon, ZoomInIcon, ZoomOutIcon, defaultTheme, getDateValidationHandler, getSelectedOptionKeys, getSelectedOptionLabels, getTruncatedLabels, heartTheme, useDateValidation, useFilterBarContext, useMenuTriggerContext, useSelectionContext, useTheme, validateDate };