@dxc-technology/halstack-react 14.0.0 → 14.1.0

package/dist/index.d.mts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
+import { ReactNode } from 'react';
+import { SortColumn } from 'react-data-grid';
 import * as styled_components from 'styled-components';
 
 type Space$t = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
@@ -251,77 +253,14 @@ type Props$H = {
 };
 
 type Space$q = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type SVG$g = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type SocialLink = {
-    /**
-     * URL of the page the link goes to.
-     */
-    href: string;
-    /**
-     * Material Symbol name or SVG element as the icon used for the link.
-     */
-    logo: string | SVG$g;
-    /**
-     * Value for the HTML properties title and aria-label.
-     */
-    title: string;
-};
-type BottomLink = {
-    /**
-     * URL of the page the link goes to.
-     */
-    href: string;
-    /**
-     * Text for the link.
-     */
-    text: string;
-};
-type FooterPropsType = {
-    /**
-     * An array of objects representing the links that will be rendered as
-     * icons at the top-right side of the footer.
-     */
-    socialLinks?: SocialLink[];
-    /**
-     * An array of objects representing the links that will be rendered at
-     * the bottom part of the footer.
-     */
-    bottomLinks?: BottomLink[];
-    /**
-     * The text that will be displayed as copyright disclaimer.
-     */
-    copyright?: string;
-    /**
-     * The center section of the footer. Can be used to render custom
-     * content in this area.
-     */
-    children?: React.ReactNode;
-    /**
-     * Size of the top margin to be applied to the footer.
-     */
-    margin?: Space$q;
-    /**
-     * Value of the tabindex for all interactive elements, except those
-     * inside the custom area.
-     */
-    tabIndex?: number;
-    /**
-     * Determines the visual style and layout
-     * - "default": The default mode with full content and styling.
-     * - "reduced": A reduced mode with minimal content and styling.
-     */
-    mode?: "default" | "reduced";
-};
-
-type Space$p = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Margin$l = {
-    top?: Space$p;
-    bottom?: Space$p;
-    left?: Space$p;
-    right?: Space$p;
+    top?: Space$q;
+    bottom?: Space$q;
+    left?: Space$q;
+    right?: Space$q;
 };
 type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
-type SVG$f = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type SVG$g = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type Option$1 = {
     /**
      * Option display value.
@@ -330,7 +269,7 @@ type Option$1 = {
     /**
      * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
-    icon?: string | SVG$f;
+    icon?: string | SVG$g;
     /**
      * Option inner value.
      */
@@ -349,7 +288,7 @@ type Props$G = {
     /**
      * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
-    icon?: string | SVG$f;
+    icon?: string | SVG$g;
     /**
      * Whether the icon should appear after or before the label.
      */
@@ -380,7 +319,7 @@ type Props$G = {
      * You can pass an object with 'top', 'bottom', 'left' and 'right'
      * properties in order to specify different margin sizes.
      */
-    margin?: Space$p | Margin$l;
+    margin?: Space$q | Margin$l;
     /**
      * Size of the component.
      */
@@ -389,9 +328,14 @@ type Props$G = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Text representing advisory information related to the dropdown's trigger action.
+     * Under the hood, this prop also serves as an accessible label for the component.
+     */
+    title?: string;
 };
 
-type Space$o = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Space$p = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Props$F = {
     /**
      * Whether a contrast line should appear at the bottom of the header.
@@ -415,7 +359,7 @@ type Props$F = {
     /**
      * Size of the bottom margin to be applied to the header.
      */
-    margin?: Space$o;
+    margin?: Space$p;
     /**
      * Value of the tabindex for all interactive elements, except those inside the
      * custom area.
@@ -423,13 +367,76 @@ type Props$F = {
     tabIndex?: number;
 };
 
+type Space$o = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type SVG$f = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type SocialLink = {
+    /**
+     * URL of the page the link goes to.
+     */
+    href: string;
+    /**
+     * Material Symbol name or SVG element as the icon used for the link.
+     */
+    logo: string | SVG$f;
+    /**
+     * Value for the HTML properties title and aria-label.
+     */
+    title: string;
+};
+type BottomLink = {
+    /**
+     * URL of the page the link goes to.
+     */
+    href: string;
+    /**
+     * Text for the link.
+     */
+    text: string;
+};
+type FooterPropsType = {
+    /**
+     * An array of objects representing the links that will be rendered as
+     * icons at the top-right side of the footer.
+     */
+    socialLinks?: SocialLink[];
+    /**
+     * An array of objects representing the links that will be rendered at
+     * the bottom part of the footer.
+     */
+    bottomLinks?: BottomLink[];
+    /**
+     * The text that will be displayed as copyright disclaimer.
+     */
+    copyright?: string;
+    /**
+     * The center section of the footer. Can be used to render custom
+     * content in this area.
+     */
+    children?: React.ReactNode;
+    /**
+     * Size of the top margin to be applied to the footer.
+     */
+    margin?: Space$o;
+    /**
+     * Value of the tabindex for all interactive elements, except those
+     * inside the custom area.
+     */
+    tabIndex?: number;
+    /**
+     * Determines the visual style and layout
+     * - "default": The default mode with full content and styling.
+     * - "reduced": A reduced mode with minimal content and styling.
+     */
+    mode?: "default" | "reduced";
+};
+
 type AppLayoutMainPropsType = {
     /**
      * Everything between the tags will be displayed as the content of the main part of the application.
      */
     children: React.ReactNode;
 };
-type AppLayoutPropsType = {
+type ApplicationLayoutPropsType = {
     /**
      * Text to be placed next to the hamburger button that toggles the
      * visibility of the sidenav.
@@ -454,13 +461,13 @@ type AppLayoutPropsType = {
 };
 
 declare const DxcApplicationLayout: {
-    ({ visibilityToggleLabel, header, sidenav, footer, children, }: AppLayoutPropsType): JSX.Element;
+    ({ visibilityToggleLabel, header, sidenav, footer, children, }: ApplicationLayoutPropsType): JSX.Element;
+    Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
     Header: {
         ({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: Props$F): JSX.Element;
-        Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, }: Props$G) => JSX.Element>) => react_jsx_runtime.JSX.Element;
+        Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element>) => react_jsx_runtime.JSX.Element;
     };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
     SideNav: {
         ({ title, children }: Props$H): JSX.Element;
         Section: ({ children }: SidenavSectionPropsType) => JSX.Element;
@@ -526,43 +533,134 @@ type Props$E = (ContextualProps | NotificationProps) & CommonProps$7;
 
 declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$E) => JSX.Element;
 
-type Spacing$1 = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
+/**
+ * Halstack Color Palette
+ * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
+ */
+declare const CoreColorTokens: {
+    color_black: string;
+    color_white: string;
+    color_transparent: string;
+    color_grey_50: string;
+    color_grey_100: string;
+    color_grey_200: string;
+    color_grey_300: string;
+    color_grey_400: string;
+    color_grey_500: string;
+    color_grey_600: string;
+    color_grey_700: string;
+    color_grey_800: string;
+    color_grey_900: string;
+    color_grey_50_a: string;
+    color_grey_100_a: string;
+    color_grey_200_a: string;
+    color_grey_300_a: string;
+    color_grey_400_a: string;
+    color_grey_500_a: string;
+    color_grey_600_a: string;
+    color_grey_700_a: string;
+    color_grey_800_a: string;
+    color_grey_900_a: string;
+    color_purple_50: string;
+    color_purple_100: string;
+    color_purple_200: string;
+    color_purple_300: string;
+    color_purple_400: string;
+    color_purple_500: string;
+    color_purple_600: string;
+    color_purple_700: string;
+    color_purple_800: string;
+    color_purple_900: string;
+    color_blue_50: string;
+    color_blue_100: string;
+    color_blue_200: string;
+    color_blue_300: string;
+    color_blue_400: string;
+    color_blue_500: string;
+    color_blue_600: string;
+    color_blue_700: string;
+    color_blue_800: string;
+    color_blue_900: string;
+    color_red_50: string;
+    color_red_100: string;
+    color_red_200: string;
+    color_red_300: string;
+    color_red_400: string;
+    color_red_500: string;
+    color_red_600: string;
+    color_red_700: string;
+    color_red_800: string;
+    color_red_900: string;
+    color_green_50: string;
+    color_green_100: string;
+    color_green_200: string;
+    color_green_300: string;
+    color_green_400: string;
+    color_green_500: string;
+    color_green_600: string;
+    color_green_700: string;
+    color_green_800: string;
+    color_green_900: string;
+    color_yellow_50: string;
+    color_yellow_100: string;
+    color_yellow_200: string;
+    color_yellow_300: string;
+    color_yellow_400: string;
+    color_yellow_500: string;
+    color_yellow_600: string;
+    color_yellow_700: string;
+    color_yellow_800: string;
+    color_yellow_900: string;
+    color_orange_50: string;
+    color_orange_100: string;
+    color_orange_200: string;
+    color_orange_300: string;
+    color_orange_400: string;
+    color_orange_500: string;
+    color_orange_600: string;
+    color_orange_700: string;
+    color_orange_800: string;
+    color_orange_900: string;
+};
+type CoreColorTokensType = keyof typeof CoreColorTokens;
+type CoreSpacingTokensType = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "2.5rem" | "3rem" | "3.5rem" | "4rem" | "5rem" | "6rem" | "7rem";
+
 type Props$D = {
     /**
      * Applies the spacing scale to all sides.
      */
-    space?: Spacing$1;
+    space?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the left and right sides.
      */
-    horizontal?: Spacing$1;
+    horizontal?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the top and bottom sides.
      */
-    vertical?: Spacing$1;
+    vertical?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the top side.
      */
-    top?: Spacing$1;
+    top?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the right side.
      */
-    right?: Spacing$1;
+    right?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the bottom side.
      */
-    bottom?: Spacing$1;
+    bottom?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the left side.
      */
-    left?: Spacing$1;
+    left?: CoreSpacingTokensType;
     /**
      * Custom content inside the bleed.
      */
     children: React.ReactNode;
 };
 
-declare function Bleed({ space, horizontal, vertical, top, right, bottom, left, children, }: Props$D): JSX.Element;
+declare const Bleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
 
 type Item$1 = {
     href?: string;
@@ -893,97 +991,6 @@ type Props$x = {
 
 declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
 
-/**
- * Halstack Color Palette
- * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
- */
-declare const CoreColorTokens: {
-    color_black: string;
-    color_white: string;
-    color_transparent: string;
-    color_grey_50: string;
-    color_grey_100: string;
-    color_grey_200: string;
-    color_grey_300: string;
-    color_grey_400: string;
-    color_grey_500: string;
-    color_grey_600: string;
-    color_grey_700: string;
-    color_grey_800: string;
-    color_grey_900: string;
-    color_grey_50_a: string;
-    color_grey_100_a: string;
-    color_grey_200_a: string;
-    color_grey_300_a: string;
-    color_grey_400_a: string;
-    color_grey_500_a: string;
-    color_grey_600_a: string;
-    color_grey_700_a: string;
-    color_grey_800_a: string;
-    color_grey_900_a: string;
-    color_purple_50: string;
-    color_purple_100: string;
-    color_purple_200: string;
-    color_purple_300: string;
-    color_purple_400: string;
-    color_purple_500: string;
-    color_purple_600: string;
-    color_purple_700: string;
-    color_purple_800: string;
-    color_purple_900: string;
-    color_blue_50: string;
-    color_blue_100: string;
-    color_blue_200: string;
-    color_blue_300: string;
-    color_blue_400: string;
-    color_blue_500: string;
-    color_blue_600: string;
-    color_blue_700: string;
-    color_blue_800: string;
-    color_blue_900: string;
-    color_red_50: string;
-    color_red_100: string;
-    color_red_200: string;
-    color_red_300: string;
-    color_red_400: string;
-    color_red_500: string;
-    color_red_600: string;
-    color_red_700: string;
-    color_red_800: string;
-    color_red_900: string;
-    color_green_50: string;
-    color_green_100: string;
-    color_green_200: string;
-    color_green_300: string;
-    color_green_400: string;
-    color_green_500: string;
-    color_green_600: string;
-    color_green_700: string;
-    color_green_800: string;
-    color_green_900: string;
-    color_yellow_50: string;
-    color_yellow_100: string;
-    color_yellow_200: string;
-    color_yellow_300: string;
-    color_yellow_400: string;
-    color_yellow_500: string;
-    color_yellow_600: string;
-    color_yellow_700: string;
-    color_yellow_800: string;
-    color_yellow_900: string;
-    color_orange_50: string;
-    color_orange_100: string;
-    color_orange_200: string;
-    color_orange_300: string;
-    color_orange_400: string;
-    color_orange_500: string;
-    color_orange_600: string;
-    color_orange_700: string;
-    color_orange_800: string;
-    color_orange_900: string;
-};
-type CoreColorTokensType = keyof typeof CoreColorTokens;
-
 type SpacingValues = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Space$j = SpacingValues | {
     top?: SpacingValues;
@@ -1173,14 +1180,59 @@ type Section = {
 };
 type Props$v = {
     /**
-     * Array of items to be displayed in the Contextual menu.
-     * Each item can be a single/simple item, a group item or a section.
+     * Array of items to be displayed in the Contextual menu.
+     * Each item can be a single/simple item, a group item or a section.
+     */
+    items: (Item | GroupItem)[] | Section[];
+};
+
+declare const DxcContextualMenu: ({ items }: Props$v) => react_jsx_runtime.JSX.Element;
+
+type Space$i = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin$h = {
+    top?: Space$i;
+    bottom?: Space$i;
+    left?: Space$i;
+    right?: Space$i;
+};
+type SVG$9 = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type ActionCellsPropsType = {
+    actions: ActionsPropsType;
+};
+type ActionsPropsType = Array<{
+    icon: string | SVG$9;
+    title: string;
+    onClick: () => void;
+    disabled?: boolean;
+    tabIndex?: number;
+    options?: never;
+} | {
+    icon?: never;
+    title: string;
+    onClick: (value?: string) => void;
+    disabled?: boolean;
+    tabIndex?: number;
+    options: Option$1[];
+}>;
+type Props$u = {
+    /**
+     * The center section of the table. Can be used to render custom
+     * content in this area.
+     */
+    children: React.ReactNode;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    items: (Item | GroupItem)[] | Section[];
+    margin?: Space$i | Margin$h;
+    /**
+     * Determines the visual style and layout
+     * - "default": Default table size.
+     * - "reduced": More compact table with less spacing for high density information.
+     */
+    mode?: "default" | "reduced";
 };
 
-declare const DxcContextualMenu: ({ items }: Props$v) => react_jsx_runtime.JSX.Element;
-
 type GridColumn = {
     /**
      * Key that will be rendered from each row in rows.
@@ -1198,6 +1250,10 @@ type GridColumn = {
      * Whether the column is sortable or not.
      */
     sortable?: boolean;
+    /**
+     * Custom criteria for sorting the column.
+     */
+    sortFn?: (_a: ReactNode, _b: ReactNode) => number;
     /**
      * Whether the column is draggable or not.
      */
@@ -1219,13 +1275,13 @@ type GridRow = {
     /**
      * List of rows that will be rendered in each cell based on the key in each column.
      */
-    [key: string]: React.ReactNode | undefined;
+    [key: string]: ReactNode | undefined;
 };
 type HierarchyGridRow = GridRow & {
     childRows?: HierarchyGridRow[] | GridRow[];
 };
 type ExpandableGridRow = GridRow & {
-    expandedContent?: React.ReactNode;
+    expandedContent?: ReactNode;
     expandedContentHeight?: number;
 };
 type ExpandableRows = {
@@ -1273,6 +1329,68 @@ type SelectableGridProps = {
     onSelectRows?: never;
     uniqueRowId?: string;
 };
+type PaginatedProps$1 = {
+    /**
+     * If true, paginator will be displayed.
+     */
+    showPaginator?: true;
+    /**
+     * Number of total items.
+     */
+    totalItems?: number;
+    /**
+     * If true, a select component for navigation between pages will be displayed.
+     */
+    showGoToPage?: boolean;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * An array of numbers representing the items per page options.
+     */
+    itemsPerPageOptions?: number[];
+    /**
+     * This function will be called when the user selects an item per page
+     * option. The value selected will be passed as a parameter.
+     */
+    itemsPerPageFunction?: (value: number) => void;
+    /**
+     * Function called whenever the current page is changed.
+     */
+    onPageChange?: (_page: number) => void;
+};
+type NonPaginatedProps$1 = {
+    /**
+     * If true, paginator will be displayed.
+     */
+    showPaginator: false;
+    /**
+     * Number of total items.
+     */
+    totalItems?: never;
+    /**
+     * If true, a select component for navigation between pages will be displayed.
+     */
+    showGoToPage?: never;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: never;
+    /**
+     * An array of numbers representing the items per page options.
+     */
+    itemsPerPageOptions?: never;
+    /**
+     * This function will be called when the user selects an item per page
+     * option. The value selected will be passed as a parameter.
+     */
+    itemsPerPageFunction?: never;
+    /**
+     * Function called whenever the current page is changed.
+     */
+    onPageChange?: never;
+};
 type CommonProps$6 = {
     columns: GridColumn[];
     /**
@@ -1282,7 +1400,12 @@ type CommonProps$6 = {
     /**
      * Function called whenever a cell is edited.
      */
-    onGridRowsChange?: (rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void;
+    onGridRowsChange?: (_rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void;
+    /**
+     * Function called whenever a column is sorted. Receives the sorted
+     * column and direction, or `undefined` if no sorting is applied.
+     */
+    onSort?: (_sortColumn?: SortColumn) => void;
 };
 type BasicGridProps = {
     rows: GridRow[];
@@ -1291,18 +1414,21 @@ type BasicGridProps = {
      */
     expandable?: false;
 };
-type Props$u = CommonProps$6 & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
+type Props$t = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
 
-declare const DxcDataGrid: ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, }: Props$u) => JSX.Element;
+declare const DxcDataGrid: {
+    ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, }: Props$t): JSX.Element;
+    ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
+};
 
-type Space$i = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$h = {
-    top?: Space$i;
-    bottom?: Space$i;
-    left?: Space$i;
-    right?: Space$i;
+type Space$h = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin$g = {
+    top?: Space$h;
+    bottom?: Space$h;
+    left?: Space$h;
+    right?: Space$h;
 };
-type Props$t = {
+type Props$s = {
     /**
      * Initial value of the input element, only when it is uncontrolled.
      */
@@ -1393,20 +1519,20 @@ type Props$t = {
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    margin?: Space$i | Margin$h;
+    margin?: Space$h | Margin$g;
     /**
      * Size of the component.
      */
-    size?: "medium" | "large" | "fillParent";
+    size?: "small" | "medium" | "large" | "fillParent";
     /**
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
 };
 
-declare const DxcDateInput: react.ForwardRefExoticComponent<Props$t & react.RefAttributes<HTMLDivElement>>;
+declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
 
-type Props$s = {
+type Props$r = {
     /**
      * If true, the close button will be visible.
      */
@@ -1441,9 +1567,9 @@ type Props$s = {
     tabIndex?: number;
 };
 
-declare const DxcDialog: ({ isCloseVisible, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$s) => JSX.Element;
+declare const DxcDialog: ({ isCloseVisible, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$r) => JSX.Element;
 
-type Props$r = {
+type Props$q = {
     /**
      * The divider can be shown in horizontal or vertical.
      */
@@ -1464,16 +1590,16 @@ type Props$r = {
     decorative?: boolean;
 };
 
-declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$r) => JSX.Element;
+declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q) => JSX.Element;
 
-declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, }: Props$G) => JSX.Element;
+declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element;
 
-type Space$h = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$g = {
-    top?: Space$h;
-    bottom?: Space$h;
-    left?: Space$h;
-    right?: Space$h;
+type Space$g = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin$f = {
+    top?: Space$g;
+    bottom?: Space$g;
+    left?: Space$g;
+    right?: Space$g;
 };
 type FileData = {
     /**
@@ -1540,7 +1666,7 @@ type CommonProps$5 = {
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    margin?: Space$h | Margin$g;
+    margin?: Space$g | Margin$f;
     /**
      * Value of the tabindex attribute.
      */
@@ -1574,31 +1700,30 @@ type FileModeProps = CommonProps$5 & {
      */
     dropAreaLabel?: never;
 };
-type Props$q = DropModeProps | FileModeProps;
+type Props$p = DropModeProps | FileModeProps;
 
-declare const DxcFileInput: react.ForwardRefExoticComponent<Props$q & react.RefAttributes<HTMLDivElement>>;
+declare const DxcFileInput: react.ForwardRefExoticComponent<Props$p & react.RefAttributes<HTMLDivElement>>;
 
-type Spaces$1 = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
 type Gap$1 = {
-    rowGap: Spaces$1;
-    columnGap?: Spaces$1;
+    rowGap: CoreSpacingTokensType;
+    columnGap?: CoreSpacingTokensType;
 } | {
-    rowGap?: Spaces$1;
-    columnGap: Spaces$1;
-} | Spaces$1;
+    rowGap?: CoreSpacingTokensType;
+    columnGap: CoreSpacingTokensType;
+} | CoreSpacingTokensType;
 type CommonProps$4 = {
     /**
      * Sets the justify-content CSS property.
      *
      * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
      */
-    justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
+    justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "normal" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
     /**
      * Sets the align-items CSS property.
      *
      * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
      */
-    alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline";
+    alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline" | "normal";
     /**
      * Sets the align-content CSS property.
      *
@@ -1612,7 +1737,7 @@ type CommonProps$4 = {
      */
     alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
 };
-type Props$p = CommonProps$4 & {
+type Props$o = CommonProps$4 & {
     /**
      * Sets the flex-direction CSS property.
      *
@@ -1665,16 +1790,15 @@ type Props$p = CommonProps$4 & {
     children: React.ReactNode;
 };
 
-declare const DxcFlex: ({ direction, wrap, gap, order, grow, shrink, basis, children, ...props }: Props$p) => JSX.Element;
+declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$o) => react_jsx_runtime.JSX.Element;
 
-type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
 type Gap = {
-    rowGap: Spaces;
-    columnGap?: Spaces;
+    rowGap: CoreSpacingTokensType;
+    columnGap?: CoreSpacingTokensType;
 } | {
-    rowGap?: Spaces;
-    columnGap: Spaces;
-} | Spaces;
+    rowGap?: CoreSpacingTokensType;
+    columnGap: CoreSpacingTokensType;
+} | CoreSpacingTokensType;
 type GridCell = {
     start: number | string;
     end: number | string;
@@ -1724,7 +1848,7 @@ type GridItemProps = {
      */
     children: React.ReactNode;
 };
-type Props$o = GridItemProps & {
+type Props$n = GridItemProps & {
     /**
      * Sets the grid-auto-columns CSS property.
      *
@@ -1748,7 +1872,7 @@ type Props$o = GridItemProps & {
      *
      * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
      */
-    gap?: Spaces | Gap;
+    gap?: CoreSpacingTokensType | Gap;
     /**
      * Sets the place-content CSS property.
      *
@@ -1782,18 +1906,18 @@ type Props$o = GridItemProps & {
 };
 
 declare const DxcGrid: {
-    (props: Props$o): JSX.Element;
+    (props: Props$n): react_jsx_runtime.JSX.Element;
     Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
 };
 
-type Space$g = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$f = {
-    top?: Space$g;
-    bottom?: Space$g;
-    left?: Space$g;
-    right?: Space$g;
+type Space$f = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin$e = {
+    top?: Space$f;
+    bottom?: Space$f;
+    left?: Space$f;
+    right?: Space$f;
 };
-type Props$n = {
+type Props$m = {
     /**
      * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
      * The html tag of the heading will be the one specified in the 'as' prop.
@@ -1816,12 +1940,12 @@ type Props$n = {
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    margin?: Space$g | Margin$f;
+    margin?: Space$f | Margin$e;
 };
 
-declare const DxcHeading: ({ level, text, as, weight, margin }: Props$n) => JSX.Element;
+declare const DxcHeading: ({ level, text, as, weight, margin }: Props$m) => JSX.Element;
 
-type Props$m = {
+type Props$l = {
     /**
      * Alternative text description displayed when the specified image is not loaded.
      *
@@ -1887,54 +2011,53 @@ type Props$m = {
     onError?: React.ReactEventHandler<HTMLImageElement>;
 };
 
-declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$m) => react_jsx_runtime.JSX.Element;
+declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$l) => react_jsx_runtime.JSX.Element;
 
-type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-type Props$l = {
+type Props$k = {
     /**
      * Applies the spacing scale to all sides.
      */
-    space?: Spacing;
+    space?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the left and right sides.
      */
-    horizontal?: Spacing;
+    horizontal?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the top and bottom sides.
      */
-    vertical?: Spacing;
+    vertical?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the top side.
      */
-    top?: Spacing;
+    top?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the right side.
      */
-    right?: Spacing;
+    right?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the bottom side.
      */
-    bottom?: Spacing;
+    bottom?: CoreSpacingTokensType;
     /**
      * Applies the spacing scale to the left side.
      */
-    left?: Spacing;
+    left?: CoreSpacingTokensType;
     /**
      * Custom content inside the inset.
      */
     children: React.ReactNode;
 };
 
-declare function Inset({ space, horizontal, vertical, top, right, bottom, left, children, }: Props$l): JSX.Element;
+declare const Inset: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$k) => react_jsx_runtime.JSX.Element;
 
-type Space$f = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$e = {
-    top?: Space$f;
-    bottom?: Space$f;
-    left?: Space$f;
-    right?: Space$f;
+type Space$e = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin$d = {
+    top?: Space$e;
+    bottom?: Space$e;
+    left?: Space$e;
+    right?: Space$e;
 };
-type SVG$9 = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type SVG$8 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type LinkProps = {
     /**
      * If true, the link is disabled.
@@ -1947,7 +2070,7 @@ type LinkProps = {
     /**
      * Material Symbol name or SVG element as the icon that will be placed next to the link text.
      */
-    icon?: string | SVG$9;
+    icon?: string | SVG$8;
     /**
      * Indicates the position of the icon in the component.
      */
@@ -1973,7 +2096,7 @@ type LinkProps = {
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    margin?: Space$f | Margin$e;
+    margin?: Space$e | Margin$d;
     /**
      * Value of the tabindex.
      */
@@ -1982,7 +2105,7 @@ type LinkProps = {
 
 declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
-type SVG$8 = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type SVG$7 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type TabProps$1 = {
     /**
      * Whether the tab is active or not.
@@ -1999,7 +2122,7 @@ type TabProps$1 = {
     /**
      * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
      */
-    icon?: string | SVG$8;
+    icon?: string | SVG$7;
     /**
      * If the value is 'true', an empty badge will appear.
      * If it is 'false', no badge will appear.
@@ -2013,7 +2136,7 @@ type TabProps$1 = {
      */
     children: string;
 };
-type Props$k = {
+type Props$j = {
     /**
      * Whether the icon should appear above or to the left of the label.
      */
@@ -2029,18 +2152,18 @@ type Props$k = {
 };
 
 declare const DxcNavTabs: {
-    ({ iconPosition, tabIndex, children }: Props$k): JSX.Element;
+    ({ iconPosition, tabIndex, children }: Props$j): JSX.Element;
     Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
 };
 
-type Space$e = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$d = {
-    top?: Space$e;
-    bottom?: Space$e;
-    left?: Space$e;
-    right?: Space$e;
+type Space$d = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin$c = {
+    top?: Space$d;
+    bottom?: Space$d;
+    left?: Space$d;
+    right?: Space$d;
 };
-type Props$j = {
+type Props$i = {
     /**
      * Text to be placed above the number.
      */
@@ -2148,7 +2271,7 @@ type Props$j = {
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    margin?: Space$e | Margin$d;
+    margin?: Space$d | Margin$c;
     /**
      * Size of the component.
      */
@@ -2159,9 +2282,9 @@ type Props$j = {
     tabIndex?: number;
 };
 
-declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$j & react.RefAttributes<HTMLDivElement>>;
+declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
 
-type Props$i = {
+type Props$h = {
     /**
      * Number of the current selected page.
      */
@@ -2199,20 +2322,20 @@ type Props$i = {
     tabIndex?: number;
 };
 
-declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$i) => JSX.Element;
+declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
 
 declare const DxcParagraph: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
 
-type Space$d = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$c = {
-    top?: Space$d;
-    bottom?: Space$d;
-    left?: Space$d;
-    right?: Space$d;
+type Space$c = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin$b = {
+    top?: Space$c;
+    bottom?: Space$c;
+    left?: Space$c;
+    right?: Space$c;
 };
-type Props$h = {
+type Props$g = {
     /**
      * Text to be placed above the password input.
      */
@@ -2301,7 +2424,7 @@ type Props$h = {
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    margin?: Space$d | Margin$c;
+    margin?: Space$c | Margin$b;
     /**
      * Size of the component.
      */
@@ -2312,16 +2435,16 @@ type Props$h = {
     tabIndex?: number;
 };
 
-declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$h & react.RefAttributes<HTMLDivElement>>;
+declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
 
-type Space$c = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Size$1 = {
-    top?: Space$c;
-    bottom?: Space$c;
-    left?: Space$c;
-    right?: Space$c;
+    top?: Space$b;
+    bottom?: Space$b;
+    left?: Space$b;
+    right?: Space$b;
 };
-type Props$g = {
+type Props$f = {
     /**
      * Text to be placed above the progress bar.
      */
@@ -2348,10 +2471,10 @@ type Props$g = {
      * an object with 'top', 'bottom', 'left' and 'right' properties
      * in order to specify different margin sizes.
      */
-    margin?: Space$c | Size$1;
+    margin?: Space$b | Size$1;
 };
 
-declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$g) => JSX.Element;
+declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$f) => JSX.Element;
 
 type Link = {
     /**
@@ -2363,7 +2486,7 @@ type Link = {
      */
     links?: Link[];
 };
-type Props$f = {
+type Props$e = {
     /**
      * Title of the quick nav component.
      */
@@ -2374,7 +2497,7 @@ type Props$f = {
     links: Link[];
 };
 
-declare const DxcQuickNav: ({ title, links }: Props$f) => JSX.Element;
+declare const DxcQuickNav: ({ title, links }: Props$e) => JSX.Element;
 
 type RadioOption = {
     /**
@@ -2475,50 +2598,6 @@ type RadioGroupProps = {
 
 declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
 
-type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$b = {
-    top?: Space$b;
-    bottom?: Space$b;
-    left?: Space$b;
-    right?: Space$b;
-};
-type SVG$7 = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type ActionCellsPropsType = {
-    actions: Array<{
-        icon: string | SVG$7;
-        title: string;
-        onClick: () => void;
-        disabled?: boolean;
-        tabIndex?: number;
-        options?: never;
-    } | {
-        icon?: never;
-        title: string;
-        onClick: (value?: string) => void;
-        disabled?: boolean;
-        tabIndex?: number;
-        options: Option$1[];
-    }>;
-};
-type Props$e = {
-    /**
-     * The center section of the table. Can be used to render custom
-     * content in this area.
-     */
-    children: React.ReactNode;
-    /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-     */
-    margin?: Space$b | Margin$b;
-    /**
-     * Determines the visual style and layout
-     * - "default": Default table size.
-     * - "reduced": More compact table with less spacing for high density information.
-     */
-    mode?: "default" | "reduced";
-};
-
 type Space$a = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Margin$a = {
     top?: Space$a;
@@ -3003,7 +3082,7 @@ type Props$8 = {
 declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
 
 declare const DxcTable: {
-    ({ children, margin, mode }: Props$e): JSX.Element;
+    ({ children, margin, mode }: Props$u): JSX.Element;
     ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
 };
 
@@ -3664,7 +3743,7 @@ type Props$2 = {
     children: React.ReactNode;
 };
 
-declare const DxcTooltip: ({ position, label, children }: Props$2) => JSX.Element;
+declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
 
 type Props$1 = {
     as?: keyof HTMLElementTagNameMap;
@@ -3750,14 +3829,6 @@ type Props = {
 
 declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: Props) => JSX.Element;
 
-declare const useToast: () => {
-    default: (toast: DefaultToast) => () => void;
-    success: (toast: SemanticToast) => () => void;
-    warning: (toast: SemanticToast) => () => void;
-    info: (toast: SemanticToast) => () => void;
-    loading: (toast: LoadingToast) => () => void;
-};
-
 declare const componentTokens: {
     accordion: {
         backgroundColor: string;
@@ -4124,6 +4195,16 @@ declare const componentTokens: {
         focusColor: string;
         scrollBarThumbColor: string;
         scrollBarTrackColor: string;
+        actionIconColor: string;
+        disabledActionIconColor: string;
+        hoverActionIconColor: string;
+        focusActionIconColor: string;
+        activeActionIconColor: string;
+        actionBackgroundColor: string;
+        disabledActionBackgroundColor: string;
+        hoverActionBackgroundColor: string;
+        focusActionBorderColor: string;
+        activeActionBackgroundColor: string;
     };
     dateInput: {
         pickerBackgroundColor: string;
@@ -5666,6 +5747,16 @@ declare const HalstackContext: react.Context<DeepPartial<{
         focusColor: string;
         scrollBarThumbColor: string;
         scrollBarTrackColor: string;
+        actionIconColor: string;
+        disabledActionIconColor: string;
+        hoverActionIconColor: string;
+        focusActionIconColor: string;
+        activeActionIconColor: string;
+        actionBackgroundColor: string;
+        disabledActionBackgroundColor: string;
+        hoverActionBackgroundColor: string;
+        focusActionBorderColor: string;
+        activeActionBackgroundColor: string;
     };
     dateInput: {
         pickerBackgroundColor: string;
@@ -6700,4 +6791,12 @@ type HalstackProviderPropsType = {
 };
 declare const HalstackProvider: ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType) => JSX.Element;
 
+declare const useToast: () => {
+    default: (toast: DefaultToast) => () => void;
+    success: (toast: SemanticToast) => () => void;
+    warning: (toast: SemanticToast) => () => void;
+    info: (toast: SemanticToast) => () => void;
+    loading: (toast: Omit<LoadingToast, "loading">) => () => void;
+};
+
 export { DxcAccordion, DxcAccordionGroup, DxcAlert, DxcApplicationLayout, DxcBadge, Bleed as DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, Inset as DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTag, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackContext, HalstackLanguageContext, HalstackProvider, useToast };