carbon-react 152.2.0 → 153.0.0-beta.1

package/esm/components/link/link.style.d.ts

@@ -1,4 +1,4 @@
-declare type Variants = "default" | "negative" | "neutral";
+type Variants = "default" | "negative" | "neutral";
 export interface StyledLinkProps {
     /** The disabled state of the link. */
     disabled?: boolean;

package/esm/components/loader-spinner/loader-spinner.config.d.ts

@@ -1,8 +1,8 @@
 declare const LOADER_SPINNER_VARIANTS: readonly ["action", "neutral", "inverse", "gradient-grey", "gradient-white"];
-declare type LoaderSpinnerVariants = (typeof LOADER_SPINNER_VARIANTS)[number];
+type LoaderSpinnerVariants = (typeof LOADER_SPINNER_VARIANTS)[number];
 declare const LOADER_SPINNER_SIZES: readonly ["extra-small", "small", "medium", "large", "extra-large"];
-declare type LoaderSpinnerSizes = (typeof LOADER_SPINNER_SIZES)[number];
-declare type LoaderSpinnerSizeParams = Record<LoaderSpinnerSizes, {
+type LoaderSpinnerSizes = (typeof LOADER_SPINNER_SIZES)[number];
+type LoaderSpinnerSizeParams = Record<LoaderSpinnerSizes, {
     wrapperDimensions: number;
     strokeWidth: number;
     labelMarginTop?: number;

package/esm/components/loader-spinner/loader-spinner.style.js

@@ -51,7 +51,7 @@ export const StyledSpinnerCircleSvg = styled.svg`
           fill: transparent;
           stroke-width: ${LOADER_SPINNER_SIZE_PARAMS[size].strokeWidth}px;
           stroke: ${calculateColors(false, variant)};
-          ${variant === "inverse" && `stroke-opacity: 0.3`}
+          ${variant === "inverse" && `stroke-opacity: 0.3;`}
           cx: 12px;
           cy: 12px;
           r: 10px;

package/esm/components/menu/__internal__/locators.d.ts

@@ -1,6 +1,6 @@
 export declare const MENU_ITEM = "menu-item";
 export declare const SCROLLABLE_BLOCK = "submenu-scrollable-block";
 export declare const SCROLLABLE_BLOCK_PARENT = "scrollable-block-parent";
-export declare const ALL_CHILDREN_SELECTOR: string;
-export declare const BLOCK_INDEX_SELECTOR: string;
-export declare const MENU_ITEM_CHILDREN_LOCATOR: string;
+export declare const ALL_CHILDREN_SELECTOR = "[data-component='menu-item'], [data-component='scrollable-block-parent']";
+export declare const BLOCK_INDEX_SELECTOR = "[data-component='menu-item'], [data-component='submenu-scrollable-block']";
+export declare const MENU_ITEM_CHILDREN_LOCATOR = "[data-component='menu-item']";

package/esm/components/menu/__internal__/menu.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type MenuType = "light" | "dark" | "white" | "black";
+export type MenuType = "light" | "dark" | "white" | "black";
 export interface MenuContextProps {
     menuType: MenuType;
     openSubmenuId: string | null;

package/esm/components/menu/menu-item/menu-item.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { FlexboxProps, LayoutProps, MaxWidthProps, PaddingProps } from "styled-system";
 import { IconType } from "../../icon";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export declare type VariantType = "default" | "alternate";
+export type VariantType = "default" | "alternate";
 interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWidth" | "minWidth">, FlexboxProps, PaddingProps {
     /** onClick handler */
     onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;

package/esm/components/menu/menu-segment-title/menu-segment-title.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { VariantType } from "../menu-item";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 declare const AS_VALUES: readonly ["h2", "h3", "h4", "h5", "h6"];
-declare type AllowedAsValues = (typeof AS_VALUES)[number];
+type AllowedAsValues = (typeof AS_VALUES)[number];
 export interface MenuTitleProps extends TagProps {
     children?: React.ReactNode;
     text: string;

package/esm/components/message/__internal__/type-icon/type-icon.style.d.ts

@@ -1,5 +1,5 @@
 import { MessageVariant } from "../../message.component";
-declare type TypeIconStyleProps = {
+type TypeIconStyleProps = {
     transparent?: boolean;
     variant: MessageVariant;
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export declare type MessageVariant = "error" | "info" | "success" | "warning" | "neutral";
+export type MessageVariant = "error" | "info" | "success" | "warning" | "neutral";
 export interface MessageProps extends MarginProps, TagProps {
     /** Set the component's content */
     children?: React.ReactNode;

package/esm/components/message/message.style.d.ts

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 import { MessageVariant } from "./message.component";
-declare type MessageStyleProps = {
+type MessageStyleProps = {
     variant?: MessageVariant;
     transparent?: boolean;
     width?: string;

package/esm/components/modal/__internal__/modal-manager.d.ts

@@ -1,5 +1,5 @@
-declare type SetTriggerRefocusFlag = (boolean: boolean) => void;
-export declare type ModalList = {
+type SetTriggerRefocusFlag = (boolean: boolean) => void;
+export type ModalList = {
     modal: HTMLElement;
     setTriggerRefocusFlag?: SetTriggerRefocusFlag;
     topModalOverride?: boolean;

package/esm/components/modal/modal.style.d.ts

@@ -1,4 +1,4 @@
-declare type TransitionProps = {
+type TransitionProps = {
     transitionName: string;
     transitionTime: number;
 };

package/esm/components/multi-action-button/multi-action-button.component.d.ts

@@ -7,7 +7,7 @@ export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProp
     /** Second text child, renders under main text, only when size is "large" */
     subtext?: string;
 }
-export declare type MultiActionButtonHandle = {
+export type MultiActionButtonHandle = {
     /** Programmatically focus the main button */
     focusMainButton: () => void;
 } | null;

package/esm/components/multi-action-button/multi-action-button.style.d.ts

@@ -2,7 +2,7 @@ import { MultiActionButtonProps } from "./multi-action-button.component";
 declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, Pick<MultiActionButtonProps, "width"> & {
     displayed: boolean;
 }, never>;
-declare type StyledButtonChildrenContainerProps = {
+type StyledButtonChildrenContainerProps = {
     align: "left" | "right";
     minWidth: number;
 };

package/esm/components/multi-action-button/multi-action-button.style.js

@@ -14,14 +14,15 @@ const StyledMultiActionButton = styled.div`
   ${({
   width
 }) => width && css`
-    ${computeSizing({
+      ${computeSizing({
   width
 })}
 
-    ${StyledButton} {
-      width: 100%
-      justify-content: space-between;
-    }`}
+      ${StyledButton} {
+        width: 100%;
+        justify-content: space-between;
+      }
+    `}
 
   & > ${StyledButton} {
     margin: 0;

package/esm/components/navigation-bar/__internal__/fixed-navigation-bar.context.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { NavigationBarProps } from "..";
-declare type FixedNavigationBarContextProps = {
+type FixedNavigationBarContextProps = {
     submenuMaxHeight?: string;
 };
 declare const FixedNavigationBarContext: React.Context<FixedNavigationBarContextProps>;

package/esm/components/navigation-bar/navigation-bar.component.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { PaddingProps, FlexboxProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export declare type Position = "sticky" | "fixed";
-export declare type Orientation = "top" | "bottom";
-export declare type NavigationType = "light" | "dark" | "white" | "black";
+export type Position = "sticky" | "fixed";
+export type Orientation = "top" | "bottom";
+export type NavigationType = "light" | "dark" | "white" | "black";
 export interface NavigationBarProps extends PaddingProps, FlexboxProps, TagProps {
     /** Content of the component */
     children?: React.ReactNode;

package/esm/components/navigation-bar/navigation-bar.style.d.ts

@@ -1,6 +1,6 @@
 import { PaddingProps, FlexboxProps } from "styled-system";
 import { Position, Orientation, NavigationType } from "./navigation-bar.component";
-export declare type StyledNavigationBarProps = PaddingProps & FlexboxProps & {
+export type StyledNavigationBarProps = PaddingProps & FlexboxProps & {
     /** Color scheme of navigation component */
     navigationType?: NavigationType;
     /** Defines whether the navigation bar should be positioned fixed or sticky */

package/esm/components/numeral-date/__internal__/numeral-date.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare type NumeralContextType = {
+type NumeralContextType = {
     disableErrorBorder?: boolean;
 };
 declare const _default: React.Context<NumeralContextType>;

package/esm/components/numeral-date/numeral-date.component.d.ts

@@ -83,8 +83,8 @@ export interface NumeralDateProps extends ValidationProps, MarginProps, TagProps
     /** Flag to configure component as optional. */
     isOptional?: boolean;
 }
-export declare type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
-export declare type NumeralDateHandle = {
+export type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
+export type NumeralDateHandle = {
     focus: () => void;
 } | null;
 export declare const NumeralDate: React.ForwardRefExoticComponent<NumeralDateProps & React.RefAttributes<NumeralDateHandle>>;

package/esm/components/numeral-date/numeral-date.component.js

@@ -285,7 +285,8 @@ export const NumeralDate = /*#__PURE__*/forwardRef(({
         info
       }, {
         tooltipPosition: tooltipPosition,
-        tooltipId: validationId
+        tooltipId: validationId,
+        my: 0 // prevents any form spacing being applied
       }))));
     }));
   };

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare type PageSizeOption = {
+type PageSizeOption = {
     id: string;
     name: number;
 };

package/esm/components/pod/pod.config.d.ts

@@ -1,6 +1,6 @@
 export declare const POD_SIZES: readonly ["extra-small", "small", "medium", "large", "extra-large"];
 export declare const POD_ALIGNMENTS: readonly ["left", "center", "right"];
 export declare const POD_VARIANTS: readonly ["primary", "secondary", "tertiary", "tile", "transparent"];
-export declare type PodSize = (typeof POD_SIZES)[number];
-export declare type PodAlignment = (typeof POD_ALIGNMENTS)[number];
-export declare type PodVariant = (typeof POD_VARIANTS)[number];
+export type PodSize = (typeof POD_SIZES)[number];
+export type PodAlignment = (typeof POD_ALIGNMENTS)[number];
+export type PodVariant = (typeof POD_VARIANTS)[number];

package/esm/components/popover-container/popover-container.component.d.ts

@@ -64,7 +64,7 @@ export interface PopoverContainerProps extends PaddingProps, TagProps {
     /** Flag to enable fullWidth Button styles */
     hasFullWidth?: boolean;
 }
-export declare type PopoverContainerHandle = {
+export type PopoverContainerHandle = {
     focusButton: () => void;
 } | null;
 export declare const PopoverContainer: React.ForwardRefExoticComponent<PopoverContainerProps & React.RefAttributes<PopoverContainerHandle>>;

package/esm/components/popover-container/popover-container.style.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
 import { TransitionStatus } from "react-transition-group";
-declare type PopoverContainerWrapperProps = {
+type PopoverContainerWrapperProps = {
     hasFullWidth?: boolean;
 };
 declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerWrapperProps, never>;
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare type PopoverContainerContentStyleProps = {
+type PopoverContainerContentStyleProps = {
     animationState?: TransitionStatus;
     disableAnimation?: boolean;
 };
 declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerContentStyleProps, never>;
-declare type AdditionalIconButtonProps = {
+type AdditionalIconButtonProps = {
     tabIndex?: number;
     id?: string;
 };

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

@@ -2,8 +2,8 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { IconType } from "../icon";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export declare type PortraitShapes = "circle" | "square";
-export declare type PortraitSizes = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
+export type PortraitShapes = "circle" | "square";
+export type PortraitSizes = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
 export interface PortraitProps extends MarginProps, TagProps {
     /** A custom image URL. */
     src?: string;

package/esm/components/portrait/portrait.config.d.ts

@@ -1,7 +1,7 @@
 import { PortraitShapes, PortraitSizes } from "./portrait.component";
 export declare const PORTRAIT_SHAPES: PortraitShapes[];
 export declare const PORTRAIT_SIZES: PortraitSizes[];
-declare type PortraitSizeParams = Record<PortraitSizes, {
+type PortraitSizeParams = Record<PortraitSizes, {
     dimensions: number;
     iconDimensions: number;
 }>;

package/esm/components/portrait/portrait.style.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { PortraitSizes, PortraitShapes } from "./portrait.component";
-declare type StyledPortraitProps = {
+type StyledPortraitProps = {
     backgroundColor?: string;
     foregroundColor?: string;
     darkBackground?: boolean;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export declare type Shapes = "text" | "rectangle" | "rectangle-round" | "circle";
+export type Shapes = "text" | "rectangle" | "rectangle-round" | "circle";
 export interface PreviewProps extends MarginProps, TagProps {
     /** Children content to render in the component. */
     children?: React.ReactNode;

package/esm/components/preview/preview.style.js

@@ -6,13 +6,13 @@ const StyledPreview = styled.div`
 `;
 const shimmer = keyframes`
   0% { 
-    opacity: 0.1 
+    opacity: 0.1;
   }
   70% { 
-    opacity: 1
+    opacity: 1;
   }
   100% { 
-    opacity: 0.1 
+    opacity: 0.1;
   }
 `;
 function getBorderRadius(shape) {
@@ -63,7 +63,7 @@ const StyledPreviewPlaceholder = styled.span`
       animation: ${shimmer} 2s ease infinite;
 
       ${isLastLine && shape === "text" && css`
-        width: calc(${width || getWidth(shape)}*0.8);
+        width: calc(; ${width || getWidth(shape)}*0.8);
       `}
 
       ${shape === "circle" && css`

package/esm/components/profile/profile.config.d.ts

@@ -1,6 +1,6 @@
 export declare const PROFILE_SIZES: readonly ["XS", "S", "M", "ML", "L", "XL", "XXL"];
-declare type AllProfileSizes = typeof PROFILE_SIZES;
-export declare type ProfileSize = AllProfileSizes[number];
+type AllProfileSizes = typeof PROFILE_SIZES;
+export type ProfileSize = AllProfileSizes[number];
 declare const _default: {
     XS: {
         initialSize: string;

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -58,7 +58,7 @@ const StyledProgressBar = styled.span`
 })};
     border-radius: var(--borderRadius400);
     overflow-x: hidden;
-    width: 100%
+    width: 100%;
     min-height: fit-content;
     box-sizing: border-box;
   `}

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

@@ -62,7 +62,7 @@ export interface SearchProps extends ValidationProps, MarginProps, TagProps {
     /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
-export declare type SearchHandle = {
+export type SearchHandle = {
     /** Programmatically focus on root container of Dialog. */
     focus: () => void;
 } | null;

package/esm/components/search/search.component.js

@@ -154,8 +154,7 @@ export const Search = /*#__PURE__*/React.forwardRef(({
     maxWidth: maxWidth,
     searchHasValue: searchHasValue,
     showSearchButton: !!searchButton,
-    variant: variant,
-    mb: 0
+    variant: variant
   }, filterStyledSystemMarginProps(rest), {
     id: id,
     name: name
@@ -180,7 +179,8 @@ export const Search = /*#__PURE__*/React.forwardRef(({
       type: "search",
       ml: 1
     }) : undefined,
-    tooltipPosition: tooltipPosition
+    tooltipPosition: tooltipPosition,
+    my: 0 // prevents any form spacing being applied
   }), searchButton && /*#__PURE__*/React.createElement(StyledSearchButton, null, /*#__PURE__*/React.createElement(Button, _extends({
     "aria-label": searchButtonAriaLabel || searchButtonText,
     size: "medium",

package/esm/components/search/search.style.js

@@ -19,6 +19,7 @@ const StyledSearch = styled.div`
   const darkVariant = variant === "dark";
   const variantColor = darkVariant ? "var(--colorsUtilityYang080)" : "var(--colorsUtilityMajor300)";
   return css`
+      margin-bottom: var(--fieldSpacing);
       ${margin}
       width: ${searchWidth ? `${searchWidth}` : "100%"};
       max-width: ${maxWidth ? `${maxWidth}` : "100%"};

package/esm/components/select/__internal__/select-list/select-list.component.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
-declare type OnSelectData = {
+type OnSelectData = {
     id: string;
     text: string;
     value: string | Record<string, unknown>;
     selectionType: "click" | "navigationKey" | "enterKey";
     selectionConfirmed: boolean;
 };
-export declare type ListPlacement = "top" | "bottom" | "top-start" | "bottom-start" | "top-end" | "bottom-end";
+export type ListPlacement = "top" | "bottom" | "top-start" | "bottom-start" | "top-end" | "bottom-end";
 export interface SelectListProps {
     /** The ID for the parent <div> */
     id?: string;

package/esm/components/select/__internal__/select-list/select-list.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare type SelectListContextProps = {
+type SelectListContextProps = {
     currentOptionsListIndex?: number;
     multiselectValues?: (string | Record<string, unknown>)[];
 };

package/esm/components/select/__internal__/select-textbox/select-textbox.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type SelectTextboxContextProps = {
+export type SelectTextboxContextProps = {
     isInputInSelect?: boolean;
 };
 export declare const SelectTextboxContext: React.Context<SelectTextboxContextProps>;

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import invariant from "invariant";
-import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import { filterOutStyledSystemSpacingProps, filterStyledSystemMarginProps } from "../../../style/utils";
 import SelectTextbox from "../__internal__/select-textbox";
 import guid from "../../../__internal__/utils/helpers/guid";
 import withFilter from "../__internal__/utils/with-filter.hoc";
@@ -12,7 +12,6 @@ import areObjectsEqual from "../__internal__/utils/are-objects-equal";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
-import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
@@ -457,7 +456,7 @@ export const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     listWidth
   };
   const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, selectListProps, children);
-  const marginProps = useFormSpacing(textboxProps);
+  const marginProps = filterStyledSystemMarginProps(textboxProps);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     hasTextCursor: true,
     readOnly: readOnly,

package/esm/components/select/multi-select/multi-select.component.js

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import invariant from "invariant";
-import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import { filterOutStyledSystemSpacingProps, filterStyledSystemMarginProps } from "../../../style/utils";
 import SelectTextbox from "../__internal__/select-textbox";
 import guid from "../../../__internal__/utils/helpers/guid";
 import withFilter from "../__internal__/utils/with-filter.hoc";
@@ -13,7 +13,6 @@ import isExpectedValue from "../__internal__/utils/is-expected-value";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
-import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
@@ -461,7 +460,7 @@ export const MultiSelect = /*#__PURE__*/React.forwardRef(({
     virtualScrollOverscan: virtualScrollOverscan,
     listWidth: listWidth
   }, children);
-  const marginProps = useFormSpacing(textboxProps);
+  const marginProps = filterStyledSystemMarginProps(textboxProps);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
     disabled: disabled,
     readOnly: readOnly,

package/esm/components/select/option/option.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-declare type OptionData = {
+type OptionData = {
     id?: string;
     text?: string;
     value?: string | Record<string, unknown>;

package/esm/components/select/select.style.js

@@ -13,6 +13,7 @@ const StyledSelect = styled.div`
   transparent,
   isOpen
 }) => css`
+    margin-bottom: var(--fieldSpacing);
     ${margin}
 
     position: relative;

package/esm/components/select/simple-select/simple-select.component.js

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import invariant from "invariant";
-import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import { filterOutStyledSystemSpacingProps, filterStyledSystemMarginProps } from "../../../style/utils";
 import StyledSelect from "../select.style";
 import SelectTextbox from "../__internal__/select-textbox";
 import SelectList from "../__internal__/select-list/select-list.component";
@@ -10,7 +10,6 @@ import getNextChildByText from "../__internal__/utils/get-next-child-by-text";
 import isExpectedOption from "../__internal__/utils/is-expected-option";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
-import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
 export const SimpleSelect = /*#__PURE__*/React.forwardRef(({
@@ -326,7 +325,7 @@ export const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     virtualScrollOverscan: virtualScrollOverscan,
     listWidth: listWidth
   }, children);
-  const marginProps = useFormSpacing(props);
+  const marginProps = filterStyledSystemMarginProps(props);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     transparent: transparent,
     disabled: disabled,

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

@@ -2,7 +2,7 @@ import React from "react";
 import { PaddingProps, WidthProps } from "styled-system";
 import { ModalProps } from "../modal";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-declare type CustomRefObject<T> = {
+type CustomRefObject<T> = {
     current?: T | null;
 };
 export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<ModalProps, "topModalOverride" | "restoreFocusOnClose"> {

package/esm/components/sidebar/sidebar.style.d.ts

@@ -1,6 +1,6 @@
 import { PaddingProps } from "styled-system";
 import { SidebarProps } from "./sidebar.component";
-declare type StyledSidebarProps = Pick<SidebarProps, "onCancel" | "position" | "size" | "width">;
+type StyledSidebarProps = Pick<SidebarProps, "onCancel" | "position" | "size" | "width">;
 declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps, never>;
 declare const StyledSidebarContent: import("styled-components").StyledComponent<"div", any, PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
 export { StyledSidebar, StyledSidebarContent };

package/esm/components/simple-color-picker/simple-color-picker.style.d.ts

@@ -1,5 +1,5 @@
 import { ValidationProps } from "../../__internal__/validations";
-declare type Width = string | number;
+type Width = string | number;
 declare const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface StyledColorOptionsProps extends ValidationProps {
     maxWidth: Width;

package/esm/components/split-button/split-button-children.style.d.ts

@@ -1,6 +1,6 @@
 import { ThemeObject } from "../../style/themes/base";
 export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child > * {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) > * {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) > * {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) > * {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
-declare type StyledSplitButtonChildrenContainerProps = {
+type StyledSplitButtonChildrenContainerProps = {
     theme: ThemeObject;
     align: "left" | "right";
     minWidth: number;

package/esm/components/split-button/split-button-toggle.style.d.ts

@@ -1,4 +1,4 @@
-declare type StyledSplitButtonToggleProps = {
+type StyledSplitButtonToggleProps = {
     buttonType: "primary" | "secondary";
     disabled: boolean;
     displayed: boolean;

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

@@ -26,7 +26,7 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
     /** Sets rendering position of menu */
     position?: "left" | "right";
 }
-export declare type SplitButtonHandle = {
+export type SplitButtonHandle = {
     /** Programmatically focus the main button */
     focusMainButton: () => void;
     /** Programmatically focus the toggle button. */

package/esm/components/step-flow/__internal__/step-flow.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type StepFlowContextType = {
+export type StepFlowContextType = {
     validatedCurrentStep?: number;
     totalSteps?: number;
     titleVariant?: "h1" | "h2";

package/esm/components/step-flow/step-flow.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export declare type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 interface StepFlowAriaProps {
     /** Prop to specify the aria-label of the component */
     "aria-label"?: string;
@@ -35,7 +35,7 @@ export interface StepFlowProps extends StepFlowAriaProps, MarginProps, TagProps
     /** function runs when user click dismiss button */
     onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
 }
-export declare type StepFlowHandle = {
+export type StepFlowHandle = {
     /** Programmatically focus on root container of Dialog. */
     focus: () => void;
 } | null;