carbon-react 128.0.0 → 128.1.2

package/README.md

@@ -4,7 +4,7 @@ Carbon is a [React](https://react.dev/) component library developed by Sage.
 
 ## Getting started
 
-Our [getting started guide](https://carbon.sage.com/?path=/story/getting-started-installation--page) provides instructions on how to install and use the Carbon library.
+Our [getting started guide](https://carbon.sage.com/?path=/docs/getting-started-installation--docs) provides instructions on how to install and use the Carbon library.
 
 ## Examples
 

package/esm/__spec_helper__/test-utils.d.ts

@@ -1,12 +1,8 @@
-/// <reference types="react" />
-import { ReactWrapper, ShallowWrapper } from "enzyme";
+import { ReactWrapper } from "enzyme";
 import { LayoutProps, FlexboxProps, BackgroundProps, PositionProps, GridProps } from "styled-system";
-import { ReactTestRendererJSON } from "react-test-renderer";
 import { mockMatchMedia } from "./mock-match-media";
 declare const toCSSCase: (str: string) => string;
-declare const assertStyleMatch: <Props>(styleSpec: {
-    [key: string]: string | number | undefined;
-}, component: HTMLElement | ReactWrapper<Props, {}, import("react").Component<{}, {}, any>> | ShallowWrapper<Props, {}, import("react").Component<{}, {}, any>> | ReactTestRendererJSON | ReactTestRendererJSON[] | null, opts?: jest.Options) => void;
+declare const assertStyleMatch: any;
 declare const makeArrayKeys: (n: number) => number[];
 declare const keyboard: Record<string, () => void>;
 declare const simulate: {
@@ -14,10 +10,10 @@ declare const simulate: {
         shiftKey: boolean;
     } | undefined) => void>;
 };
-declare const listFrom: (wrapper: ReactWrapper) => ReactWrapper<import("enzyme").HTMLAttributes, any, import("react").Component<{}, {}, any>>;
-declare const childrenFrom: (node: ReactWrapper) => ReactWrapper<any, any, import("react").Component<{}, {}, any>>;
+declare const listFrom: (wrapper: ReactWrapper) => ReactWrapper;
+declare const childrenFrom: (node: ReactWrapper) => ReactWrapper;
 declare const hoverList: (wrapper: ReactWrapper) => (item: number) => void;
-declare const click: (wrapper: ReactWrapper) => ReactWrapper<{}, {}, import("react").Component<{}, {}, any>>;
+declare const click: unknown;
 declare const selectedItemOf: (wrapper: ReactWrapper) => number;
 declare const assertKeyboardTraversal: ({ num, nonSelectables, }: {
     num: number;

package/esm/__spec_helper__/test-utils.js

@@ -11,6 +11,8 @@ const humpToDash = (acc, char) => `${acc}${isUpper(char) ? `-${char.toLowerCase(
 const toCSSCase = str => {
   return str.split("").reduce(humpToDash, "");
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const assertStyleMatch = (styleSpec, component, opts) => {
   Object.entries(styleSpec).forEach(([attr, value]) => {
     expect(component).toHaveStyleRule(toCSSCase(attr), value, opts);

package/esm/components/alert/alert.component.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { DialogProps } from "../dialog";
-export declare const Alert: ({ children, size, topModalOverride, ...rest }: DialogProps) => React.JSX.Element;
+export declare const Alert: ({ children, size, topModalOverride, closeButtonDataProps, ...rest }: DialogProps) => React.JSX.Element;
 export default Alert;

package/esm/components/alert/alert.component.js

@@ -6,11 +6,13 @@ export const Alert = ({
   children,
   size = "extra-small",
   topModalOverride,
+  closeButtonDataProps,
   ...rest
 }) => /*#__PURE__*/React.createElement(Dialog, _extends({
   "data-component": "alert",
   role: "alertdialog",
   size: size,
-  topModalOverride: topModalOverride
+  topModalOverride: topModalOverride,
+  closeButtonDataProps: closeButtonDataProps
 }, rest), children);
 export default Alert;

package/esm/components/button-minor/button-minor.component.d.ts

@@ -5,7 +5,7 @@ export interface ButtonMinorProps extends ButtonProps {
     isInPassword?: boolean;
 }
 export declare const ButtonMinor: {
-    ({ buttonType: buttonTypeProp, size: sizeProp, iconPosition: iconPositionProp, fullWidth: fullWidthProp, ...rest }: ButtonMinorProps): React.JSX.Element;
+    ({ buttonType: buttonTypeProp, disabled, destructive, size: sizeProp, iconPosition: iconPositionProp, fullWidth: fullWidthProp, ...rest }: ButtonMinorProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonMinor;

package/esm/components/button-minor/button-minor.component.js

@@ -5,6 +5,8 @@ import StyledButtonMinor from "./button-minor.style";
 import { ButtonBarContext } from "../button-bar/button-bar.component";
 export const ButtonMinor = ({
   buttonType: buttonTypeProp = "secondary",
+  disabled = false,
+  destructive = false,
   size: sizeProp = "medium",
   iconPosition: iconPositionProp = "before",
   fullWidth: fullWidthProp = false,
@@ -25,7 +27,9 @@ export const ButtonMinor = ({
     size: size,
     fullWidth: fullWidth,
     iconPosition: iconPosition,
-    buttonType: buttonType
+    buttonType: buttonType,
+    disabled: disabled,
+    destructive: destructive
   }, rest));
 };
 ButtonMinor.displayName = "ButtonMinor";

package/esm/components/checkbox/{checkbox-group.component.d.ts → checkbox-group/checkbox-group.component.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import { ValidationProps } from "../../__internal__/validations";
+import { ValidationProps } from "../../../__internal__/validations";
 export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** The content for the CheckboxGroup Legend */
     legend?: string;

package/esm/components/checkbox/{checkbox-group.component.js → checkbox-group/checkbox-group.component.js}

@@ -1,16 +1,16 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import StyledCheckboxGroup, { StyledHintText } from "./checkbox-group.style";
-import Fieldset from "../../__internal__/fieldset";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import FormSpacingProvider from "../../__internal__/form-spacing-provider";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
-import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
-import Box from "../../components/box";
-import { ErrorBorder } from "../../components/textbox/textbox.style";
+import Fieldset from "../../../__internal__/fieldset";
+import { filterStyledSystemMarginProps } from "../../../style/utils";
+import { TooltipProvider } from "../../../__internal__/tooltip-provider";
+import FormSpacingProvider from "../../../__internal__/form-spacing-provider";
+import { NewValidationContext } from "../../carbon-provider/carbon-provider.component";
+import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
+import Box from "../../box";
+import { ErrorBorder } from "../../textbox/textbox.style";
 export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
 export const CheckboxGroup = props => {
   const {

package/esm/components/checkbox/{checkbox-group.style.js → checkbox-group/checkbox-group.style.js}

@@ -1,9 +1,9 @@
 import styled, { css } from "styled-components";
-import StyledFormField from "../../__internal__/form-field/form-field.style";
-import StyledIcon from "../icon/icon.style";
-import CheckboxStyle from "./checkbox.style";
-import { StyledLabelContainer } from "../../__internal__/label/label.style";
-import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
+import StyledFormField from "../../../__internal__/form-field/form-field.style";
+import StyledIcon from "../../icon/icon.style";
+import CheckboxStyle from "../checkbox.style";
+import { StyledLabelContainer } from "../../../__internal__/label/label.style";
+import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
 export const StyledHintText = styled.div`
   margin-top: -4px;
   margin-bottom: 8px;

package/esm/components/checkbox/checkbox.component.js

@@ -6,7 +6,7 @@ import CheckableInput from "../../__internal__/checkable-input/checkable-input.c
 import CheckboxSvg from "./checkbox-svg.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import { CheckboxGroupContext } from "./checkbox-group.component";
+import { CheckboxGroupContext } from "./checkbox-group/checkbox-group.component";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";

package/esm/components/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-export { default as CheckboxGroup } from "./checkbox-group.component";
-export type { CheckboxGroupProps } from "./checkbox-group.component";
+export { default as CheckboxGroup } from "./checkbox-group/checkbox-group.component";
+export type { CheckboxGroupProps } from "./checkbox-group/checkbox-group.component";
 export { default as Checkbox } from "./checkbox.component";
 export type { CheckboxProps } from "./checkbox.component";

package/esm/components/checkbox/index.js

@@ -1,2 +1,2 @@
-export { default as CheckboxGroup } from "./checkbox-group.component";
+export { default as CheckboxGroup } from "./checkbox-group/checkbox-group.component";
 export { default as Checkbox } from "./checkbox.component";

package/esm/components/definition-list/{dd.component.js → dd/dd.component.js}

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
-import { StyledDd } from "./definition-list.style";
-import DlContext from "./__internal__/dl.context";
+import { StyledDd } from "../definition-list.style";
+import DlContext from "../__internal__/dl.context";
 const Dd = ({
   children,
   ...rest

package/esm/components/definition-list/dl.component.js

@@ -10,16 +10,18 @@ const Dl = ({
   ddTextAlign = "left",
   asSingleColumn = false,
   ...rest
-}) => /*#__PURE__*/React.createElement(StyledDl, _extends({
-  w: w,
-  "data-component": "dl",
-  asSingleColumn: asSingleColumn
-}, rest), /*#__PURE__*/React.createElement(DlContext.Provider, {
-  value: {
-    asSingleColumn,
-    dtTextAlign,
-    ddTextAlign
-  }
-}, children));
+}) => {
+  return /*#__PURE__*/React.createElement(StyledDl, _extends({
+    w: w,
+    "data-component": "dl",
+    asSingleColumn: asSingleColumn
+  }, rest), /*#__PURE__*/React.createElement(DlContext.Provider, {
+    value: {
+      asSingleColumn,
+      dtTextAlign,
+      ddTextAlign
+    }
+  }, children));
+};
 Dl.displayName = "Dl";
 export default Dl;

package/esm/components/definition-list/{dt.component.js → dt/dt.component.js}

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
-import { StyledDt } from "./definition-list.style";
-import DlContext from "./__internal__/dl.context";
+import { StyledDt } from "../definition-list.style";
+import DlContext from "../__internal__/dl.context";
 const Dt = ({
   children,
   ...rest

package/esm/components/definition-list/index.d.ts

@@ -1,6 +1,6 @@
 export type { DlProps } from "./dl.component";
 export { default as Dl } from "./dl.component";
-export type { DtProps } from "./dt.component";
-export { default as Dt } from "./dt.component";
-export type { DdProps } from "./dd.component";
-export { default as Dd } from "./dd.component";
+export type { DtProps } from "./dt/dt.component";
+export { default as Dt } from "./dt/dt.component";
+export type { DdProps } from "./dd/dd.component";
+export { default as Dd } from "./dd/dd.component";

package/esm/components/definition-list/index.js

@@ -1,3 +1,3 @@
 export { default as Dl } from "./dl.component";
-export { default as Dt } from "./dt.component";
-export { default as Dd } from "./dd.component";
+export { default as Dt } from "./dt/dt.component";
+export { default as Dd } from "./dd/dd.component";

package/esm/components/dialog/dialog.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ModalProps } from "../modal";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { DialogSizes } from "./dialog.config";
 import { CustomRefObject } from "../../__internal__/focus-trap";
 declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
@@ -46,6 +46,8 @@ export interface DialogProps extends ModalProps, TagProps {
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Determines if the close icon is shown */
     showCloseIcon?: boolean;
+    /** Data tag prop bag for close Button */
+    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Size of dialog, default size is 750px */
     size?: DialogSizes;
     /** Subtitle displayed at top of dialog */

package/esm/components/dialog/dialog.component.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
 import Heading from "../heading";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 import { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent } from "./dialog.style";
 import { TOP_MARGIN } from "./dialog.config";
@@ -36,6 +37,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
   greyBackground = false,
   focusableContainers,
   topModalOverride,
+  closeButtonDataProps,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -110,12 +112,14 @@ const Dialog = /*#__PURE__*/forwardRef(({
   }, [centerDialog, open, height]);
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
-    return /*#__PURE__*/React.createElement(IconButton, {
-      "data-element": "close",
+    return /*#__PURE__*/React.createElement(IconButton, _extends({
       "aria-label": locale.dialog.ariaLabels.close(),
       onClick: onCancel,
       disabled: disableClose
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, tagComponent("close", {
+      "data-element": "close",
+      ...closeButtonDataProps
+    })), /*#__PURE__*/React.createElement(Icon, {
       type: "close"
     }));
   };
@@ -193,6 +197,10 @@ if (process.env.NODE_ENV !== "production") {
     "bespokeFocusTrap": PropTypes.func,
     "children": PropTypes.node,
     "className": PropTypes.string,
+    "closeButtonDataProps": PropTypes.shape({
+      "data-element": PropTypes.string,
+      "data-role": PropTypes.string
+    }),
     "contentPadding": PropTypes.shape({
       "p": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
       "px": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),

package/esm/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { ModalProps } from "../modal";
 import { CustomRefObject } from "../../__internal__/focus-trap";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface DialogFullScreenProps extends ModalProps {
     /** Prop to specify the aria-describedby property of the DialogFullscreen component */
     "aria-describedby"?: string;
@@ -39,6 +40,8 @@ export interface DialogFullScreenProps extends ModalProps {
     pagesStyling?: boolean;
     /** Determines if the close icon is shown */
     showCloseIcon?: boolean;
+    /** Data tag prop bag for close Button */
+    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Subtitle displayed at top of dialog */
     subtitle?: string;
     /** Title displayed at top of dialog */
@@ -52,5 +55,5 @@ export interface DialogFullScreenProps extends ModalProps {
     /** A custom close event handler */
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const DialogFullScreen: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disableAutoFocus, focusFirstElement, bespokeFocusTrap, open, children, title, subtitle, pagesStyling, headerChildren, showCloseIcon, disableContentPadding, disableEscKey, onCancel, contentRef, help, role, focusableContainers, focusableSelectors, topModalOverride, ...rest }: DialogFullScreenProps) => React.JSX.Element;
+export declare const DialogFullScreen: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disableAutoFocus, focusFirstElement, bespokeFocusTrap, open, children, title, subtitle, pagesStyling, headerChildren, showCloseIcon, disableContentPadding, disableEscKey, onCancel, contentRef, help, role, focusableContainers, focusableSelectors, topModalOverride, closeButtonDataProps, ...rest }: DialogFullScreenProps) => React.JSX.Element;
 export default DialogFullScreen;

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -13,6 +13,7 @@ import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 export const DialogFullScreen = ({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
@@ -36,6 +37,7 @@ export const DialogFullScreen = ({
   focusableContainers,
   focusableSelectors,
   topModalOverride,
+  closeButtonDataProps,
   ...rest
 }) => {
   const locale = useLocale();
@@ -51,11 +53,13 @@ export const DialogFullScreen = ({
   const isTopModal = useModalAria(dialogRef);
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
-    return /*#__PURE__*/React.createElement(IconButton, {
-      "data-element": "close",
+    return /*#__PURE__*/React.createElement(IconButton, _extends({
       "aria-label": locale.dialogFullScreen.ariaLabels.close(),
       onClick: onCancel
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, tagComponent("close", {
+      "data-element": "close",
+      ...closeButtonDataProps
+    })), /*#__PURE__*/React.createElement(Icon, {
       type: "close"
     }));
   };

package/esm/components/draggable/{internal → __internal__}/drop-target.component.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import { useDrop } from "react-dnd";
-import { StyledDraggableContainer } from "../draggable-item.style";
+import { StyledDraggableContainer } from "../draggable-item/draggable-item.style";
 const DropTarget = ({
   children,
   getOrder,

package/esm/components/draggable/draggable-container.component.js

@@ -5,8 +5,8 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-import DraggableItem from "./draggable-item.component";
-import DropTarget from "./internal/drop-target.component";
+import DraggableItem from "./draggable-item/draggable-item.component";
+import DropTarget from "./__internal__/drop-target.component";
 const DraggableContainer = ({
   children,
   getOrder,

package/esm/components/draggable/{draggable-item.component.js → draggable-item/draggable-item.component.js}

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import { useDrop, useDrag } from "react-dnd";
-import { filterStyledSystemPaddingProps } from "../../style/utils";
+import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import { StyledDraggableItem, StyledIcon } from "./draggable-item.style";
 const DraggableItem = ({
   id,

package/{lib/components/draggable → esm/components/draggable/draggable-item}/draggable-item.style.d.ts

@@ -5,5 +5,5 @@ interface StyledDraggableItemProps extends PaddingProps {
     isDragging?: boolean;
 }
 declare const StyledDraggableItem: import("styled-components").StyledComponent<"div", any, StyledDraggableItemProps, never>;
-declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };

package/esm/components/draggable/{draggable-item.style.js → draggable-item/draggable-item.style.js}

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { padding, margin } from "styled-system";
-import { baseTheme } from "../../style/themes";
-import Icon from "../icon";
+import { baseTheme } from "../../../style/themes";
+import Icon from "../../icon";
 const StyledDraggableContainer = styled.div`
   ${margin}
 `;

package/esm/components/draggable/index.d.ts

@@ -1,4 +1,4 @@
 export { default as DraggableContainer } from "./draggable-container.component";
 export type { DraggableContainerProps } from "./draggable-container.component";
-export { default as DraggableItem } from "./draggable-item.component";
-export type { DraggableItemProps } from "./draggable-item.component";
+export { default as DraggableItem } from "./draggable-item/draggable-item.component";
+export type { DraggableItemProps } from "./draggable-item/draggable-item.component";

package/esm/components/draggable/index.js

@@ -1,2 +1,2 @@
 export { default as DraggableContainer } from "./draggable-container.component";
-export { default as DraggableItem } from "./draggable-item.component";
+export { default as DraggableItem } from "./draggable-item/draggable-item.component";

package/esm/components/duelling-picklist/picklist-placeholder/picklist-placeholder.component.js

@@ -3,7 +3,9 @@ import PropTypes from "prop-types";
 import { StyledPicklistPlaceholder } from "../duelling-picklist.style";
 export const PicklistPlaceholder = ({
   text
-}) => /*#__PURE__*/React.createElement(StyledPicklistPlaceholder, {
-  "data-element": "picklist-placeholder"
-}, text);
+}) => {
+  return /*#__PURE__*/React.createElement(StyledPicklistPlaceholder, {
+    "data-element": "picklist-placeholder"
+  }, text);
+};
 export default PicklistPlaceholder;

package/esm/components/flat-table/flat-table-header/flat-table-header.component.d.ts

@@ -23,9 +23,6 @@ export interface FlatTableHeaderProps extends PaddingProps {
 }
 export declare const FlatTableHeader: {
     ({ align, children, colspan, rowspan, width, py, px, id, ...rest }: FlatTableHeaderProps): React.JSX.Element;
-    defaultProps: {
-        align: string;
-    };
     displayName: string;
 };
 export default FlatTableHeader;

package/esm/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -6,7 +6,7 @@ import { FlatTableThemeContext } from "../flat-table.component";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useTableCell from "../__internal__/use-table-cell";
 export const FlatTableHeader = ({
-  align,
+  align = "left",
   children,
   colspan,
   rowspan,
@@ -47,8 +47,5 @@ export const FlatTableHeader = ({
     id: internalId.current
   }), /*#__PURE__*/React.createElement("div", null, children));
 };
-FlatTableHeader.defaultProps = {
-  align: "left"
-};
 FlatTableHeader.displayName = "FlatTableHeader";
 export default FlatTableHeader;

package/esm/components/flat-table/sort/sort.component.d.ts

@@ -7,5 +7,5 @@ export interface SortProps {
     /** Sets the content of `FlatTableSortHeader` */
     children?: React.ReactNode;
 }
-declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
+export declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
 export default Sort;

package/esm/components/flat-table/sort/sort.component.js

@@ -4,7 +4,7 @@ import Event from "../../../__internal__/utils/helpers/events";
 import { StyledSort, StyledSpaceHolder, StyledSortIcon } from "./sort.style";
 import guid from "../../../__internal__/utils/helpers/guid";
 import { FlatTableThemeContext } from "../flat-table.component";
-const Sort = ({
+export const Sort = ({
   children,
   onClick,
   sortType

package/esm/components/hr/hr.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MarginProps } from "styled-system";
 export interface HrProps extends MarginProps {
     /** Breakpoint for adaptive left and right margins (below the breakpoint they go to 0).

package/esm/components/link/link.component.js

@@ -3,7 +3,6 @@ import React, { useContext, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import Icon from "../icon";
 import MenuContext from "../menu/menu.context";
-import Event from "../../__internal__/utils/helpers/events";
 import { StyledLink, StyledContent } from "./link.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useLocale from "../../hooks/__internal__/useLocale";
@@ -34,20 +33,6 @@ const Link = /*#__PURE__*/React.forwardRef(({
   const {
     inMenu
   } = useContext(MenuContext);
-  const handleOnKeyDown = ev => {
-    if (onKeyDown) {
-      onKeyDown(ev);
-    }
-
-    // return early if there is no onClick or there is a href prop
-    // or the event is not an enter key
-    if (href || !Event.isEnterKey(ev) && !Event.isSpaceKey(ev)) {
-      return;
-    }
-    if (onClick) {
-      onClick(ev);
-    }
-  };
   const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
@@ -66,7 +51,7 @@ const Link = /*#__PURE__*/React.forwardRef(({
     }, {});
   }, [rest]);
   const componentProps = {
-    onKeyDown: handleOnKeyDown,
+    onKeyDown,
     onMouseDown,
     onClick,
     disabled,

package/esm/components/modal/__internal__/modal-manager.js

@@ -2,8 +2,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
     _classCallCheck(this, ModalManagerInstance);

package/esm/components/number/number.component.js

@@ -3,6 +3,7 @@ import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import Textbox from "../textbox";
 import Logger from "../../__internal__/utils/logger";
+import { ALIGN_DEFAULT, LABEL_VALIDATION_DEFAULT, LABEL_WIDTH_DEFAULT, SIZE_DEFAULT } from "../textbox/textbox.component";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 function isValidNumber(value) {
@@ -15,6 +16,10 @@ const Number = /*#__PURE__*/React.forwardRef(({
   onKeyDown,
   value,
   inputRef,
+  align = ALIGN_DEFAULT,
+  labelWidth = LABEL_WIDTH_DEFAULT,
+  size = SIZE_DEFAULT,
+  validationOnLabel = LABEL_VALIDATION_DEFAULT,
   ...rest
 }, ref) => {
   const selectionStart = useRef(null);
@@ -47,7 +52,11 @@ const Number = /*#__PURE__*/React.forwardRef(({
     onChange: handleOnChange,
     onKeyDown: handleKeyDown,
     ref: ref,
-    inputRef: inputRef
+    inputRef: inputRef,
+    align: align,
+    labelWidth: labelWidth,
+    size: size,
+    validationOnLabel: validationOnLabel
   }));
 });
 if (process.env.NODE_ENV !== "production") {

package/esm/components/pager/__internal__/pager-navigation.component.d.ts

@@ -16,7 +16,7 @@ export interface PagerNavigationProps {
     /** Callback function for last link */
     onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** onPagination Callback triggered when a change is triggered */
-    onPagination: (pageSize: number, currentPage: number, origin: string) => void;
+    onPagination: (currentPage: number, pageSize: number, origin: string) => void;
     /** Should the `First` and `Last` navigation buttons be shown */
     showFirstAndLastButtons?: boolean;
     /** Should the `Next` and `Previous` navigation buttons be shown */

package/esm/components/pager/pager.component.d.ts

@@ -4,8 +4,8 @@ declare type PageSizeOption = {
     name: number;
 };
 export interface PagerProps {
-    /** Function called when pager changes (PageSize, Current Page) */
-    onPagination: (pageSize: number, currentPage: number, origin: string) => void;
+    /** Function called when pager changes (Current page, Page size, Origin component) */
+    onPagination: (currentPage: number, pageSize: number, origin: string) => void;
     /** Callback function for next link */
     onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** Callback function for first link */