@commercetools-frontend/application-components 23.4.0 → 24.0.0

package/dist/declarations/src/components/detail-pages/custom-form-detail-page/custom-form-detail-page.d.ts

@@ -51,14 +51,14 @@ declare const CustomFormDetailPage: {
             title: string;
             titleSize?: ("big" | "small" | "medium") | undefined;
             truncate?: boolean | undefined;
-            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            subtitle?: string | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     FormPrimaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;
@@ -76,7 +76,7 @@ declare const CustomFormDetailPage: {
     };
     FormSecondaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;

package/dist/declarations/src/components/detail-pages/form-detail-page/form-detail-page.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement, ReactNode, MouseEvent, KeyboardEvent, SyntheticEvent } from 'react';
+import type { TIconProps } from '@commercetools-uikit/design-system';
 type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -77,7 +78,7 @@ type FormDetailPageProps = {
     /**
      * The Icon for the secondary button label
      */
-    iconLeftSecondaryButton?: ReactElement;
+    iconLeftSecondaryButton?: ReactElement<TIconProps>;
 };
 declare const FormDetailPage: {
     ({ hideControls, ...props }: FormDetailPageProps): import("@emotion/react/jsx-runtime").JSX.Element;
@@ -87,7 +88,7 @@ declare const FormDetailPage: {
             title: string;
             titleSize?: ("big" | "small" | "medium") | undefined;
             truncate?: boolean | undefined;
-            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            subtitle?: string | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
@@ -130,9 +131,7 @@ declare const FormDetailPage: {
             defaultMessage: string;
         };
         close: {
-            id: string; /**
-             * Any React node displayed as the content within the page.
-             */
+            id: string;
             defaultMessage: string;
         };
         edit: {

package/dist/declarations/src/components/detail-pages/info-detail-page/info-detail-page.d.ts

@@ -43,7 +43,7 @@ declare const InfoDetailPage: {
             title: string;
             titleSize?: ("big" | "small" | "medium") | undefined;
             truncate?: boolean | undefined;
-            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            subtitle?: string | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/declarations/src/components/detail-pages/tabular-detail-page/tabular-detail-page.d.ts

@@ -53,7 +53,7 @@ declare const TabularDetailPage: {
     displayName: string;
     FormPrimaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;
@@ -71,7 +71,7 @@ declare const TabularDetailPage: {
     };
     FormSecondaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;
@@ -85,9 +85,6 @@ declare const TabularDetailPage: {
             } | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
-        /**
-         * A return route path label.
-         */
         displayName: string;
     };
     FormDeleteButton: {
@@ -111,7 +108,7 @@ declare const TabularDetailPage: {
             title: string;
             titleSize?: ("big" | "small" | "medium") | undefined;
             truncate?: boolean | undefined;
-            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            subtitle?: string | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/declarations/src/components/dialogs/form-dialog/form-dialog.d.ts

@@ -1,4 +1,5 @@
 import type { SyntheticEvent, ReactNode, ReactElement } from 'react';
+import type { TIconProps } from '@commercetools-uikit/design-system';
 type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -25,8 +26,8 @@ export type TFormDialogProps = {
         [key: string]: string;
     };
     getParentSelector?: () => HTMLElement;
-    iconLeftSecondaryButton?: ReactElement;
-    iconLeftPrimaryButton?: ReactElement;
+    iconLeftSecondaryButton?: ReactElement<TIconProps>;
+    iconLeftPrimaryButton?: ReactElement<TIconProps>;
     footerContent?: ReactNode;
 };
 declare const FormDialog: {

package/dist/declarations/src/components/dialogs/internals/dialog-content.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const DialogContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export default DialogContent;

package/dist/declarations/src/components/dialogs/internals/dialog-footer.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement, SyntheticEvent, ReactNode } from 'react';
+import type { TIconProps } from '@commercetools-uikit/design-system';
 type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -18,8 +19,8 @@ type Props = {
         [key: string]: string;
     };
     children?: never;
-    iconLeftSecondaryButton?: ReactElement;
-    iconLeftPrimaryButton?: ReactElement;
+    iconLeftSecondaryButton?: ReactElement<TIconProps>;
+    iconLeftPrimaryButton?: ReactElement<TIconProps>;
     footerContent?: ReactNode;
 };
 declare const DialogFooter: {

package/dist/declarations/src/components/dialogs/internals/dialog.styles.d.ts

@@ -10,10 +10,10 @@ export declare const ClickableDialogContent: import("@emotion/styled").StyledCom
 } & StyleProps, {}, {}>;
 export declare const DialogOverlay: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & Pick<StyleProps, "zIndex">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DialogContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/declarations/src/components/drawer/drawer.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement, ReactNode, SyntheticEvent } from 'react';
 import { type CSSObject } from '@emotion/styled';
+import { type TIconProps } from '@commercetools-uikit/design-system';
 type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -33,14 +34,14 @@ type TDrawerProps = {
     labelSecondaryButton?: Label;
     onPrimaryButtonClick?: (event: SyntheticEvent) => void;
     onSecondaryButtonClick?: (event: SyntheticEvent) => void;
-    iconLeftSecondaryButton?: ReactElement;
+    iconLeftSecondaryButton?: ReactElement<TIconProps>;
 };
 declare function Drawer({ size, hideControls, onPrimaryButtonClick, onSecondaryButtonClick, ...props }: TDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare namespace Drawer {
     var displayName: string;
     var FormPrimaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;
@@ -58,7 +59,7 @@ declare namespace Drawer {
     };
     var FormSecondaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;

package/dist/declarations/src/components/internals/default-form-buttons.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement, SyntheticEvent } from 'react';
+import type { TIconProps } from '@commercetools-uikit/design-system';
 type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -15,14 +16,14 @@ type Props = {
     children?: never;
 };
 type PrimaryButtonProps = {
-    iconLeft?: ReactElement;
+    iconLeft?: ReactElement<TIconProps>;
 } & Props;
 declare const FormPrimaryButton: {
     ({ label, isDisabled, dataAttributes, ...props }: PrimaryButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type SecondaryButtonProps = {
-    iconLeft?: ReactElement;
+    iconLeft?: ReactElement<TIconProps>;
 } & Props;
 declare const FormSecondaryButton: {
     ({ label, isDisabled, dataAttributes, ...props }: SecondaryButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/declarations/src/components/internals/page.styles.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ModalContentWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const PageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/declarations/src/components/internals/tabular-page.d.ts

@@ -10,18 +10,18 @@ declare const ControlsContainter: {
 };
 declare const TabularPageContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const FormControlsContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const CustomViewsSelectorWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const TabularModalPageContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export { ControlsContainter, TabularPageContainer, TabularModalPageContainer, FormControlsContainer, CustomViewsSelectorWrapper, };

package/dist/declarations/src/components/main-pages/custom-form-main-page/custom-form-main-page.d.ts

@@ -42,14 +42,14 @@ declare const CustomFormMainPage: {
             title: string;
             titleSize?: ("big" | "small" | "medium") | undefined;
             truncate?: boolean | undefined;
-            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            subtitle?: string | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     FormPrimaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;
@@ -67,7 +67,7 @@ declare const CustomFormMainPage: {
     };
     FormSecondaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;

package/dist/declarations/src/components/main-pages/form-main-page/form-main-page.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement, ReactNode, SyntheticEvent } from 'react';
+import type { TIconProps } from '@commercetools-uikit/design-system';
 type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -57,7 +58,7 @@ type FormMainPageProps = {
     /**
      * The Icon for the secondary button label
      */
-    iconLeftSecondaryButton?: ReactElement;
+    iconLeftSecondaryButton?: ReactElement<TIconProps>;
     /**
      * This code is used to configure which Custom Views are available for this page.
      */
@@ -79,7 +80,7 @@ declare const FormMainPage: {
             title: string;
             titleSize?: ("big" | "small" | "medium") | undefined;
             truncate?: boolean | undefined;
-            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            subtitle?: string | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
@@ -99,20 +100,22 @@ declare const FormMainPage: {
         };
         save: {
             id: string;
-            defaultMessage: string; /**
-             * The title of the page.
-             */
+            defaultMessage: string;
         };
         update: {
             id: string;
             defaultMessage: string;
         };
         create: {
-            id: string;
+            id: string; /**
+             * The subtitle of the page.
+             */
             defaultMessage: string;
         };
         delete: {
-            id: string;
+            id: string; /**
+             * Replaces the title/subtitle row with a custom one (for special use cases)
+             */
             defaultMessage: string;
         };
         add: {
@@ -120,9 +123,7 @@ declare const FormMainPage: {
             defaultMessage: string;
         };
         remove: {
-            id: string; /**
-             * Determines if the form controls should be rendered.
-             */
+            id: string;
             defaultMessage: string;
         };
         close: {
@@ -143,6 +144,9 @@ declare const FormMainPage: {
         };
         deactivate: {
             id: string;
+            /**
+             * Use this prop to pass `data-` attributes to the primary button
+             */
             defaultMessage: string;
         };
         active: {

package/dist/declarations/src/components/main-pages/info-main-page/info-main-page.d.ts

@@ -29,7 +29,7 @@ declare const InfoMainPage: {
             title: string;
             titleSize?: ("big" | "small" | "medium") | undefined;
             truncate?: boolean | undefined;
-            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            subtitle?: string | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/declarations/src/components/main-pages/internals/main-page.styles.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 export declare const MainPageContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Divider: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, {}>;
 export declare const MainPageContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/declarations/src/components/main-pages/tabular-main-page/tabular-main-page.d.ts

@@ -39,40 +39,40 @@ declare const TabularMainPage: {
     displayName: string;
     FormPrimaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;
                 description?: string | object | undefined;
                 defaultMessage?: string | undefined;
             }) | undefined;
-            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void;
+            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void; /**
+             * The title of the page.
+             */
             isDisabled?: boolean | undefined;
             dataAttributes?: {
                 [key: string]: string;
-            } | undefined; /**
-             * The title of the page.
-             */
+            } | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     FormSecondaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;
                 description?: string | object | undefined;
                 defaultMessage?: string | undefined;
             }) | undefined;
-            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void;
+            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void; /**
+             * The title of the page.
+             */
             isDisabled?: boolean | undefined;
             dataAttributes?: {
                 [key: string]: string;
-            } | undefined; /**
-             * The title of the page.
-             */
+            } | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
@@ -84,13 +84,13 @@ declare const TabularMainPage: {
                 description?: string | object | undefined;
                 defaultMessage?: string | undefined;
             }) | undefined;
-            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void;
+            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void; /**
+             * The title of the page.
+             */
             isDisabled?: boolean | undefined;
             dataAttributes?: {
                 [key: string]: string;
-            } | undefined; /**
-             * The title of the page.
-             */
+            } | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
@@ -100,7 +100,7 @@ declare const TabularMainPage: {
             title: string;
             titleSize?: ("big" | "small" | "medium") | undefined;
             truncate?: boolean | undefined;
-            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            subtitle?: string | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/declarations/src/components/modal-pages/custom-form-modal-page/custom-form-modal-page.d.ts

@@ -38,7 +38,7 @@ declare const CustomFormModalPage: {
     displayName: string;
     FormPrimaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;
@@ -56,7 +56,7 @@ declare const CustomFormModalPage: {
     };
     FormSecondaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;

package/dist/declarations/src/components/modal-pages/form-modal-page/form-modal-page.d.ts

@@ -1,5 +1,6 @@
 import { SyntheticEvent, ReactNode, ReactElement } from 'react';
 import type { CSSObject } from '@emotion/react';
+import type { TIconProps } from '@commercetools-uikit/design-system';
 type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -43,7 +44,7 @@ type Props = {
     onPrimaryButtonClick: (event: SyntheticEvent) => void;
     onSecondaryButtonClick: (event: SyntheticEvent) => void;
     hideControls?: boolean;
-    iconLeftSecondaryButton?: ReactElement;
+    iconLeftSecondaryButton?: ReactElement<TIconProps>;
 };
 declare const FormModalPage: {
     ({ hideControls, ...props }: Props): import("@emotion/react/jsx-runtime").JSX.Element;
@@ -62,9 +63,7 @@ declare const FormModalPage: {
             defaultMessage: string;
         };
         save: {
-            id: string; /**
-             * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
-             */
+            id: string;
             defaultMessage: string;
         };
         update: {

package/dist/declarations/src/components/modal-pages/internals/modal-page.styles.d.ts

@@ -20,7 +20,7 @@ export declare const stylesBySize: {
 };
 export declare const ModalOverlay: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     size: TModalPageSize;
     zIndex?: number | undefined;

package/dist/declarations/src/components/modal-pages/tabular-modal-page/tabular-modal-page.d.ts

@@ -41,7 +41,7 @@ declare const TabularModalPage: {
     displayName: string;
     FormPrimaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;
@@ -59,7 +59,7 @@ declare const TabularModalPage: {
     };
     FormSecondaryButton: {
         ({ label, isDisabled, dataAttributes, ...props }: {
-            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            iconLeft?: ReactElement<import("@commercetools-uikit/design-system").TIconProps, string | import("react").JSXElementConstructor<any>> | undefined;
         } & {
             label?: (string | {
                 id: string;

package/dist/declarations/src/components/modal-pages/utils/modal-page-top-bar.d.ts

@@ -1,7 +1,7 @@
 import { type SyntheticEvent, type ReactElement } from 'react';
 import { type TSecondaryButtonIconProps } from '@commercetools-uikit/secondary-icon-button';
 type TLargeIconWrapperProps = {
-    children: ReactElement;
+    children: ReactElement<TLargeIconWrapperProps>;
     size?: TSecondaryButtonIconProps['size'];
 };
 export declare const LargeIconWrapper: (props: TLargeIconWrapperProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/declarations/src/components/public-page-layout/public-page-layout.styles.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContainerColumn: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContainerColumnWide: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;