@kaizen/components 1.57.1 → 1.58.0

package/dist/types/BrandMoment/BrandMoment.d.ts

@@ -2,8 +2,23 @@ import { ReactNode, ReactElement, HTMLAttributes } from "react";
 import { SceneProps } from "../Illustration";
 import { ButtonProps } from "../__actions__/v2";
 import { OverrideClassName } from "../types/OverrideClassName";
-export type BrandMomentProps = {
+type DeprecatedMoodProps = {
+    /** @deprecated Use `variant` instead */
     mood: "informative" | "positive" | "negative";
+    variant?: never;
+};
+type VariantProps = {
+    /**
+     * If you are transitioning from `mood`:
+     * - `informative` remains as `informative`
+     * - `positive` should be `success`
+     * - `negative` should be `warning`
+     */
+    variant: "informative" | "success" | "warning";
+    /** @deprecated Use `variant` instead */
+    mood?: never;
+};
+export type BrandMomentProps = {
     illustration: ReactElement<SceneProps>;
     header: ReactNode;
     body?: ReactNode;
@@ -15,12 +30,13 @@ export type BrandMomentProps = {
         body?: ReactNode;
         footer?: ReactNode;
     };
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>> & (DeprecatedMoodProps | VariantProps);
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061589/Brand+Moment Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-brand-moment--docs Storybook}
  */
 export declare const BrandMoment: {
-    ({ mood, illustration, header, body, primaryAction, secondaryAction, text, classNameOverride, ...restProps }: BrandMomentProps): JSX.Element;
+    ({ mood, variant, illustration, header, body, primaryAction, secondaryAction, text, classNameOverride, ...restProps }: BrandMomentProps): JSX.Element;
     displayName: string;
 };
+export {};

package/dist/types/Card/Card.d.ts

@@ -1,26 +1,39 @@
 import React, { HTMLAttributes } from "react";
 import { OverrideClassName } from "../types/OverrideClassName";
 export type CardVariants = "default" | "informative" | "positive" | "cautionary" | "destructive" | "assertive" | "highlight";
-export type CardProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {
+export type CardColors = "blue" | "green" | "gray" | "orange" | "purple" | "red" | "white" | "yellow";
+export type CardProps = {
     children?: React.ReactNode;
     /**
      * HTML elements that are allowed on Card.
      */
     tag?: "div" | "article" | "header" | "main" | "section" | "li";
-    /**
-     * determines the card background colour on the card. It should match to the type of content being conveyed.
-     */
-    variant?: CardVariants;
     /**
      * Adds a larger box shadow to to the card container.
      */
     isElevated?: boolean;
-};
+    /**
+     * If you are transitioning from `variant`:
+     * - `assertive` should be `orange`
+     * - `cautionary` should be `yellow`
+     * - `default` should be `white` OR you can remove the prop
+     * - `destructive` should be `red`
+     * - `highlight` should be `purple`
+     * - `informative` should be `blue`
+     * - `positive` should be `green`
+     * @default white
+     */
+    color?: CardColors;
+    /**
+     * @deprecated Please use color instead
+     */
+    variant?: CardVariants;
+} & OverrideClassName<Omit<HTMLAttributes<HTMLElement>, "color">>;
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094938/Card Guidance} |
  * {@link https://cultureamp.design/?path=/story/components-card--docs Storybook}
  */
 export declare const Card: {
-    ({ children, tag, variant, isElevated, classNameOverride, ...props }: CardProps): JSX.Element;
+    ({ children, tag, variant, color, isElevated, classNameOverride, ...props }: CardProps): JSX.Element;
     displayName: string;
 };

package/dist/types/EmptyState/EmptyState.d.ts

@@ -2,13 +2,22 @@ import React, { HTMLAttributes } from "react";
 import { HeadingProps } from "../Heading";
 import { AnimatedSceneProps } from "../Illustration";
 import { OverrideClassName } from "../types/OverrideClassName";
-type IllustrationType = "positive" | "neutral" | "negative" | "informative" | "action";
-type LayoutContextType = "sidebarAndContent" | "contentOnly";
 export type EmptyStateProps = {
     children?: React.ReactNode;
     id?: string;
-    illustrationType?: IllustrationType;
-    layoutContext?: LayoutContextType;
+    /** @deprecated Use `variant` instead */
+    illustrationType?: "positive" | "informative" | "negative" | "action" | "neutral";
+    /**
+     * If you are transitioning from `illustrationType`:
+     * - `positive` should be `success`
+     * - `informative` remains as `informative`
+     * - `negative` should be `warning`
+     * - `action` should be `warning`
+     * - `neutral` should be `expert-advice`
+     * @default informative
+     */
+    variant?: "success" | "warning" | "informative" | "expert-advice";
+    layoutContext?: "sidebarAndContent" | "contentOnly";
     bodyText: string | React.ReactNode;
     straightCorners?: boolean;
     headingProps?: HeadingProps;
@@ -18,7 +27,6 @@ export type EmptyStateProps = {
  * {@link https://cultureamp.design/?path=/docs/components-empty-state--docs Storybook}
  */
 export declare const EmptyState: {
-    ({ children, id, illustrationType, layoutContext, headingProps, bodyText, straightCorners, isAnimated, loop, classNameOverride, ...props }: EmptyStateProps): JSX.Element;
+    ({ children, id, illustrationType, variant, layoutContext, headingProps, bodyText, straightCorners, isAnimated, loop, classNameOverride, ...props }: EmptyStateProps): JSX.Element;
     displayName: string;
 };
-export {};

package/dist/types/Modal/ConfirmationModal/ConfirmationModal.d.ts

@@ -1,15 +1,13 @@
 import React, { HTMLAttributes } from "react";
-export type ConfirmationModalProps = {
+type Mood = "positive" | "informative" | "negative" | "cautionary" | "assertive";
+type Variant = "success" | "informative" | "warning" | "cautionary";
+type BaseConfirmationModalProps = {
     isOpen: boolean;
     unpadded?: boolean;
     /**
      * To display the Prominent variation of the modal types
      */
     isProminent?: boolean;
-    /**
-     * Defines the modal type or mood
-     */
-    mood: Mood;
     title: string;
     onConfirm?: () => void;
     onDismiss: () => void;
@@ -29,13 +27,33 @@ export type ConfirmationModalProps = {
     automationId?: string;
     children: React.ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
-type Mood = "positive" | "informative" | "negative" | "cautionary" | "assertive";
+type ConfirmationModalMoods = {
+    /**
+     * @deprecated Please use `variant` instead
+     */
+    mood: Mood;
+    variant?: never;
+};
+type ConfirmationModalVariants = {
+    /**
+     * @deprecated Please use `variant` instead
+     */
+    mood?: never;
+    /**
+     * If you are transitioning from Moods:
+     * - `positive` should be `success`
+     * - `negative` should be `warning`
+     * - `assertive` should be `cautionary`
+     */
+    variant: Variant;
+};
+export type ConfirmationModalProps = BaseConfirmationModalProps & (ConfirmationModalMoods | ConfirmationModalVariants);
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}
  */
 export declare const ConfirmationModal: {
-    ({ isOpen, isProminent, unpadded, mood, title, onConfirm, onAfterLeave, onAfterEnter, confirmLabel, dismissLabel, confirmWorking, onDismiss: propsOnDismiss, children, ...props }: ConfirmationModalProps): JSX.Element;
+    ({ isOpen, isProminent, unpadded, mood, variant, title, onConfirm, onAfterLeave, onAfterEnter, confirmLabel, dismissLabel, confirmWorking, onDismiss: propsOnDismiss, children, ...props }: ConfirmationModalProps): JSX.Element;
     displayName: string;
 };
 export {};

package/dist/types/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.d.ts

@@ -12,6 +12,9 @@ export type ModalFooterProps = {
     variant?: ActionsVariantProps;
     unpadded?: boolean;
     actions: ButtonProps[];
+    /**
+     * @deprecated we are no longer supporting different appearances for ModalFooter, instead there will only be a single default appearance set by the Button.
+     */
     appearance?: "primary" | "destructive";
     /**
      * @deprecated Please use data-testid

package/dist/types/Modal/InputEditModal/InputEditModal.d.ts

@@ -2,7 +2,10 @@ import React, { HTMLAttributes } from "react";
 export type InputEditModalProps = {
     isOpen: boolean;
     unpadded?: boolean;
-    mood: "positive" | "destructive";
+    /**
+     * @deprecated we are no longer supporting different moods for InputModal, instead there will only be a single default variant set by the component.
+     */
+    mood?: "positive" | "destructive";
     title: string;
     onSubmit: () => void;
     onSecondaryAction?: () => void;

package/dist/types/Notification/GlobalNotification/GlobalNotification.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
-import { NotificationType } from "../types";
 import { OverrideClassName } from "../../types/OverrideClassName";
-export type GlobalNotificationProps = OverrideClassName<{
-    type: NotificationType;
+import { GenericNotificationType, GenericNotificationVariant } from "../subcomponents/GenericNotification";
+export type GlobalNotificationBase = OverrideClassName<{
     children: React.ReactNode;
     onHide?: () => void;
     persistent?: boolean;
 }>;
+export type GlobalNotificationProps = GlobalNotificationBase & (GenericNotificationType | GenericNotificationVariant);
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060757/Global+Notification Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-notifications-global-notification--docs Storybook}

package/dist/types/Notification/InlineNotification/InlineNotification.d.ts

@@ -1,9 +1,8 @@
 import React from "react";
 import { HeadingProps } from "../../Heading";
 import { OverrideClassName } from "../../types/OverrideClassName";
-import { NotificationType } from "../types";
-export type InlineNotificationProps = OverrideClassName<{
-    type: NotificationType;
+import { GenericNotificationType, GenericNotificationVariant } from "../subcomponents/GenericNotification";
+export type InlineNotificationBase = OverrideClassName<{
     children?: React.ReactNode;
     /** @default false */
     persistent?: boolean;
@@ -15,6 +14,7 @@ export type InlineNotificationProps = OverrideClassName<{
     headingProps?: HeadingProps;
     isSubtle?: boolean;
 }>;
+export type InlineNotificationProps = InlineNotificationBase & (GenericNotificationType | GenericNotificationVariant);
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093392/Inline+Notification Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-notifications-inline-notification--docs Storybook}

package/dist/types/Notification/ToastNotification/ToastNotification/ToastNotification.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-import { ToastNotificationObj } from "../types";
-export type ToastNotificationProps = Omit<ToastNotificationObj, "id" | "message" | "persistent"> & {
+import { GenericNotificationType, GenericNotificationVariant } from "../../subcomponents/GenericNotification";
+import { ToastNotificationObjBase } from "../types";
+export type ToastNotificationProps = Omit<ToastNotificationObjBase, "id" | "message" | "persistent"> & {
     children: React.ReactNode;
     id?: string;
     /**
@@ -9,8 +10,8 @@ export type ToastNotificationProps = Omit<ToastNotificationObj, "id" | "message"
      * @default false
      */
     hideCloseIcon?: boolean;
-};
+} & (GenericNotificationType | GenericNotificationVariant);
 export declare const ToastNotification: {
-    ({ id: propsId, hideCloseIcon, type, title, onHide, children, ...restProps }: ToastNotificationProps): null;
+    ({ id: propsId, hideCloseIcon, title, onHide, children, ...restProps }: ToastNotificationProps): null;
     displayName: string;
 };

package/dist/types/Notification/ToastNotification/context/ToastNotificationContext.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-import { ToastNotificationObj } from "../types";
-type ToastNotificationObjOptionalId = Omit<ToastNotificationObj, "id"> & {
+import { GenericNotificationType, GenericNotificationVariant } from "../../subcomponents/GenericNotification";
+import { ToastNotificationObj, ToastNotificationObjBase } from "../types";
+type ToastNotificationObjOptionalId = Omit<ToastNotificationObjBase, "id"> & {
     id?: string;
-};
+} & (GenericNotificationType | GenericNotificationVariant);
 export type ToastNotificationContextValue = {
     notifications: ToastNotificationObj[];
     addToastNotification: (notification: ToastNotificationObjOptionalId) => void;

package/dist/types/Notification/ToastNotification/types.d.ts

@@ -1,8 +1,7 @@
 import { DataAttributes } from "../../types/DataAttributes";
-import { NotificationType } from "../types";
-export type ToastNotificationObj = {
+import { GenericNotificationType, GenericNotificationVariant } from "../subcomponents/GenericNotification";
+export type ToastNotificationObjBase = {
     id: string;
-    type: NotificationType;
     title: string;
     message: React.ReactNode;
     onHide?: () => void;
@@ -12,3 +11,4 @@ export type ToastNotificationObj = {
      */
     persistent?: boolean;
 } & DataAttributes;
+export type ToastNotificationObj = ToastNotificationObjBase & (GenericNotificationType | GenericNotificationVariant);

package/dist/types/Notification/subcomponents/GenericNotification/GenericNotification.d.ts

@@ -1,9 +1,8 @@
 import React, { HTMLAttributes } from "react";
 import { HeadingProps } from "../../../Heading";
-import { NotificationType } from "../../types";
+import { NotificationType, NotificationVariant } from "../../types";
 import { OverrideClassName } from "../../../types/OverrideClassName";
-export type GenericNotificationProps = {
-    type: NotificationType;
+type GenericNotificationBase = {
     style: "global" | "inline" | "toast";
     children?: React.ReactNode;
     title?: string;
@@ -13,7 +12,28 @@ export type GenericNotificationProps = {
     forceMultiline?: boolean;
     headingProps?: HeadingProps;
 } & Omit<OverrideClassName<HTMLAttributes<HTMLDivElement>>, "style">;
+export type GenericNotificationType = {
+    /**
+     * @deprecated Please use `variant` instead
+     */
+    type: NotificationType;
+    variant?: never;
+};
+export type GenericNotificationVariant = {
+    /**
+     * @deprecated Please use `variant` instead
+     */
+    type?: never;
+    /**
+     * If you are transitioning from `type`:
+     * - `positive` should be `success`
+     * - `negative` should be `warning`
+     */
+    variant: NotificationVariant;
+};
+export type GenericNotificationProps = GenericNotificationBase & (GenericNotificationType | GenericNotificationVariant);
 export declare const GenericNotification: {
-    ({ type, style, children, title, persistent, onHide, noBottomMargin, forceMultiline, headingProps, classNameOverride, ...restProps }: GenericNotificationProps): JSX.Element | null;
+    ({ type, variant, style, children, title, persistent, onHide, noBottomMargin, forceMultiline, headingProps, classNameOverride, ...restProps }: GenericNotificationProps): JSX.Element | null;
     displayName: string;
 };
+export {};

package/dist/types/Notification/subcomponents/NotificationIcon/NotificationIcon.d.ts

@@ -1,8 +1,15 @@
-import { NotificationType } from "../../types";
-export type NotificationIconProps = {
+import { NotificationType, NotificationVariant } from "../../types";
+export type NotificationIconTypeProps = {
     type: NotificationType;
 };
-export declare const NotificationIcon: {
-    ({ type, }: NotificationIconProps): JSX.Element;
+export declare const NotificationIconType: {
+    ({ type, }: NotificationIconTypeProps): JSX.Element;
+    displayName: string;
+};
+export type NotificationIconVariantProps = {
+    variant: NotificationVariant;
+};
+export declare const NotificationIconVariant: {
+    ({ variant, }: NotificationIconVariantProps): JSX.Element;
     displayName: string;
 };

package/dist/types/Notification/types.d.ts

@@ -1 +1,2 @@
-export type NotificationType = "positive" | "informative" | "cautionary" | "negative" | "security";
+export type NotificationType = "cautionary" | "informative" | "negative" | "positive" | "security";
+export type NotificationVariant = "cautionary" | "informative" | "success" | "security" | "warning";

package/dist/types/ProgressBar/ProgressBar.d.ts

@@ -1,24 +1,43 @@
 import { HTMLAttributes } from "react";
 import { OverrideClassName } from "../types/OverrideClassName";
-export type ProgressBarProps = {
+export type ProgressBarMood = {
+    /**
+     * @deprecated Use `color` prop instead
+     */
+    mood: "positive" | "informative" | "negative" | "cautionary";
+    color?: never;
+};
+export type ProgressBarColor = {
+    /**
+     * @deprecated Use `color` prop instead
+     */
+    mood?: never;
+    /**
+     * If transitioning from `mood`:
+     * - `cautionary` -> `yellow`
+     * - `informative` -> `blue`
+     * - `negative` -> `red`
+     * - `positive` -> `green`
+     */
+    color: "blue" | "green" | "red" | "yellow";
+};
+export type ProgressBarBaseProps = {
     /** A value that represents completed progress */
     value: number;
     /** A value that sets the maximum progress that can be achieved */
     max: number;
     /** Adds an animated state to indicate loading progress */
     isAnimating: boolean;
-    mood: Mood;
     subtext?: string;
     label?: string;
     isReversed: boolean;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
-type Mood = "positive" | "informative" | "negative" | "cautionary";
+} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "color">>;
+export type ProgressBarProps = ProgressBarBaseProps & (ProgressBarMood | ProgressBarColor);
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896891/Progress+Bar Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-progress-bar--docs Storybook}
  */
 export declare const ProgressBar: {
-    ({ value, max, isAnimating, mood, subtext, label, classNameOverride, isReversed, ...restProps }: ProgressBarProps): JSX.Element;
+    ({ value, max, isAnimating, mood, color, subtext, label, classNameOverride, isReversed, ...restProps }: ProgressBarProps): JSX.Element;
     displayName: string;
 };
-export {};

package/dist/types/Tile/subcomponents/GenericTile/GenericTile.d.ts

@@ -2,7 +2,6 @@ import React, { HTMLAttributes } from "react";
 import { AllowedHeadingTags } from "../../../Heading";
 import { GenericButtonProps } from "../../../__actions__/Button/v1/GenericButton";
 import { OverrideClassName } from "../../../types/OverrideClassName";
-import { Moods } from "./types";
 export type TileAction = {
     label: string;
     onClick?: GenericButtonProps["onClick"];
@@ -25,10 +24,18 @@ export type GenericTileProps = {
     titleTag?: AllowedHeadingTags;
     metadata?: string;
     information?: TileInformation | React.ReactNode;
-    mood?: Moods;
+    /** @deprecated Use `variant` instead */
+    mood?: "positive" | "informative" | "cautionary" | "assertive" | "negative" | "prominent";
+    /**
+     * If you are transitioning from `mood`:
+     * - `prominent` should be `expert-advice`
+     * - all else should be `default`
+     * @default default
+     */
+    variant?: "default" | "expert-advice";
     footer: React.ReactNode;
 } & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "title">>;
 export declare const GenericTile: {
-    ({ children, title, titleTag, metadata, information, mood, footer, classNameOverride, ...restProps }: GenericTileProps): JSX.Element;
+    ({ children, title, titleTag, metadata, information, mood, variant, footer, classNameOverride, ...restProps }: GenericTileProps): JSX.Element;
     displayName: string;
 };

package/dist/types/Well/Well.d.ts

@@ -1,9 +1,13 @@
 import React, { HTMLAttributes } from "react";
 import { OverrideClassName } from "../types/OverrideClassName";
-import { WellBorderStyleType, WellVariantType } from "./types";
+import { WellBorderStyleType, WellVariantType, WellColors } from "./types";
 export type WellProps = {
     children?: React.ReactNode;
+    /** @deprecated This will not fallback to `default` variant. `default` can be used but must be explicitly passed to the Well component. It is recommended to use `color` prop and `gray` value if you need a gray background. */
     variant?: WellVariantType;
+    /** @default `white` */
+    color?: WellColors;
+    /** @default `solid` */
     borderStyle?: WellBorderStyleType;
     noMargin?: boolean;
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
@@ -12,6 +16,6 @@ export type WellProps = {
  * {@link https://cultureamp.design/?path=/docs/components-well--docs Storybook}
  */
 export declare const Well: {
-    ({ children, variant, borderStyle, noMargin, classNameOverride, ...restProps }: WellProps): JSX.Element;
+    ({ children, variant, color, borderStyle, noMargin, classNameOverride, ...restProps }: WellProps): JSX.Element;
     displayName: string;
 };

package/dist/types/Well/types.d.ts

@@ -1,4 +1,8 @@
+/** @deprecated */
 export declare const variantTypes: readonly ["positive", "negative", "informative", "cautionary", "default", "assertive", "prominent"];
+/** @deprecated use `WellColors` and `color` prop instead  */
 export type WellVariantType = (typeof variantTypes)[number];
+export declare const wellColors: readonly ["white", "gray", "blue", "yellow", "orange", "red", "green", "purple"];
+export type WellColors = (typeof wellColors)[number];
 export declare const borderStyleTypes: readonly ["solid", "dashed", "none"];
 export type WellBorderStyleType = (typeof borderStyleTypes)[number];

package/dist/types/{GuidanceBlock → __containers__/GuidanceBlock/v1}/GuidanceBlock.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { HeadingProps } from "../Heading";
-import { SceneProps, SpotProps } from "../Illustration";
-import { ButtonProps } from "../__actions__/v2";
-import { TooltipProps } from "../__overlays__/Tooltip/v1";
+import { HeadingProps } from "../../../Heading";
+import { SceneProps, SpotProps } from "../../../Illustration";
+import { ButtonProps } from "../../../__actions__/v2";
+import { TooltipProps } from "../../../__overlays__/Tooltip/v1";
 import { VariantType } from "./types";
 export type ActionProps = ButtonProps & {
     tooltip?: TooltipProps;

package/dist/types/__containers__/GuidanceBlock/v2/GuidanceBlock.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import { HeadingProps } from "../../../Heading";
+import { SceneProps, SpotProps } from "../../../Illustration";
+import { ButtonProps } from "../../../__actions__/v2";
+import { TooltipProps } from "../../../__overlays__/Tooltip/v1";
+export type ActionProps = ButtonProps & {
+    tooltip?: TooltipProps;
+};
+type LayoutType = "default" | "inline" | "stacked";
+type IllustrationType = "spot" | "scene";
+type TextAlignment = "center" | "left";
+type GuidanceBlockActions = {
+    primary: ActionProps;
+    secondary?: ActionProps;
+    dismiss?: {
+        onClick: () => void;
+    };
+};
+type BaseGuidanceBlockProps = {
+    layout?: LayoutType;
+    illustration: React.ReactElement<SpotProps | SceneProps>;
+    illustrationType?: IllustrationType;
+    smallScreenTextAlignment?: TextAlignment;
+    actions?: GuidanceBlockActions;
+    secondaryDismiss?: boolean;
+    /**
+     * If you are migrating from the KAIO v1:
+     * - `prominent` is now `expert-advice`
+     * - All other variants are removed in favour of `default`
+     */
+    variant?: "default" | "expert-advice";
+    withActionButtonArrow?: boolean;
+    noMaxWidth?: boolean;
+};
+type GuidanceBlockWithText = {
+    text: {
+        title: string;
+        titleTag?: HeadingProps["tag"];
+        description: string | React.ReactNode;
+    };
+} & BaseGuidanceBlockProps;
+type GuidanceBlockPropsWithContent = {
+    content: React.ReactElement;
+} & BaseGuidanceBlockProps;
+export type GuidanceBlockProps = GuidanceBlockWithText | GuidanceBlockPropsWithContent;
+export type GuidanceBlockState = {
+    hidden: boolean;
+    removed: boolean;
+    mediaQueryLayout: string;
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
+ */
+export declare const GuidanceBlock: {
+    ({ layout, variant, withActionButtonArrow, noMaxWidth, illustrationType, smallScreenTextAlignment, actions, illustration, secondaryDismiss, ...restProps }: GuidanceBlockProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/types/__containers__/GuidanceBlock/v2/index.d.ts

@@ -0,0 +1 @@
+export * from "./GuidanceBlock";

package/dist/types/__containers__/v1.d.ts

@@ -0,0 +1 @@
+export * from "./GuidanceBlock/v1";

package/dist/types/__containers__/v2.d.ts

@@ -0,0 +1 @@
+export * from "./GuidanceBlock/v2";

package/dist/types/index.d.ts

@@ -20,7 +20,6 @@ export * from "./ErrorPage";
 export * from "./FieldGroup";
 export * from "./FieldMessage";
 export * from "./Filter";
-export * from "./GuidanceBlock";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./Illustration";
@@ -61,3 +60,4 @@ export * from "./Workflow";
 export * from "./__overlays__/Tooltip/v1";
 export * from "./__actions__/Menu/v1";
 export * from "./__actions__/Button/v1";
+export * from "./__containers__/GuidanceBlock/v1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.57.1",
+  "version": "1.58.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -13,6 +13,8 @@
     "url": "git+https://github.com/cultureamp/kaizen-design-system.git"
   },
   "files": [
+    "bin",
+    "codemods",
     "future",
     "v1",
     "v2",
@@ -28,6 +30,9 @@
   "sideEffects": [
     "styles.css"
   ],
+  "bin": {
+    "kaizen-codemod": "./bin/codemod.sh"
+  },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.1",
     "@headlessui/react": "<=1.5.0",
@@ -76,6 +81,7 @@
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "use-debounce": "^10.0.1",
+    "tsx": "^4.16.2",
     "uuid": "^10.0.0",
     "@kaizen/hosted-assets": "2.0.3"
   },
@@ -99,9 +105,8 @@
     "svgo": "^3.3.2",
     "ts-jest": "^29.2.3",
     "tslib": "^2.6.3",
-    "tsx": "^4.16.2",
-    "@kaizen/package-bundler": "1.1.3",
-    "@kaizen/design-tokens": "10.5.1"
+    "@kaizen/design-tokens": "10.5.1",
+    "@kaizen/package-bundler": "1.1.3"
   },
   "devDependenciesComments": {
     "postcss": "Installed in root",
@@ -111,7 +116,16 @@
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",
     "react": "^18.3.1",
-    "react-intl": "^6.6.8"
+    "react-intl": "^6.6.8",
+    "typescript": "^5.5.4"
+  },
+  "peerDependenciesComments": {
+    "typescript": "Used for codemods"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "scripts": {
     "clean": "rm -rf dist",