carbon-react 152.2.0 → 153.0.0-beta.1

package/lib/__internal__/fieldset/fieldset.style.d.ts

@@ -1,14 +1,14 @@
-declare type StyledFieldsetProps = {
+type StyledFieldsetProps = {
     width?: string;
 };
 declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, StyledFieldsetProps, never>;
-declare type StyledLegendContentProps = {
+type StyledLegendContentProps = {
     isRequired?: boolean;
     isOptional?: boolean;
     isDisabled?: boolean;
 };
 declare const StyledLegendContent: import("styled-components").StyledComponent<"span", any, StyledLegendContentProps, never>;
-export declare type StyledLegendProps = {
+export type StyledLegendProps = {
     inline?: boolean;
     width?: number;
     align?: "left" | "right";

package/lib/__internal__/fieldset/fieldset.style.js

@@ -12,6 +12,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledFieldset = exports.StyledFieldset = _styledComponents.default.fieldset`
   margin: 0;
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
   border: none;
   padding: 0;

package/lib/__internal__/focus-trap/focus-trap-utils.d.ts

@@ -1,4 +1,4 @@
-declare type CustomRefObject<T> = {
+type CustomRefObject<T> = {
     current?: T | null;
 };
 declare const defaultFocusableSelectors = "button:not([disabled]), [href], input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";

package/lib/__internal__/focus-trap/focus-trap.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export declare const TAB_GUARD_TOP = "tab-guard-top";
 export declare const TAB_GUARD_BOTTOM = "tab-guard-bottom";
-export declare type CustomRefObject<T> = {
+export type CustomRefObject<T> = {
     current?: T | null;
 };
 export interface FocusTrapProps {

package/lib/__internal__/form-field/form-field.component.js

@@ -12,7 +12,7 @@ var _fieldHelp = _interopRequireDefault(require("../field-help"));
 var _tags = _interopRequireDefault(require("../utils/helpers/tags/tags"));
 var _tab = _interopRequireDefault(require("../../components/tabs/tab/__internal__/tab.context"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+var _utils = require("../../style/utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -70,7 +70,7 @@ const FormField = ({
     setWarning,
     setInfo
   } = (0, _react.useContext)(_tab.default);
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const isMounted = (0, _react.useRef)(false);
   (0, _react.useLayoutEffect)(() => {
     isMounted.current = true;

package/lib/__internal__/form-field/form-field.style.js

@@ -10,6 +10,7 @@ var _themes = require("../../style/themes");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const FormFieldStyle = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   & + & {
     margin-top: 16px;
   }

package/lib/__internal__/input/input-presentation.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { BorderRadiusType } from "../../components/box/box.component";
 import { ValidationProps } from "../validations";
-export declare type Sizes = "small" | "medium" | "large";
+export type Sizes = "small" | "medium" | "large";
 export interface CommonInputPresentationProps extends ValidationProps {
     children: React.ReactNode;
     /** If true, the component will be disabled */

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
 export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "size" | "readOnly" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/lib/__internal__/input/input.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { BorderRadiusType } from "../../components/box/box.component";
-export declare type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
+export type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
     /** The id of the element that describe the input. */

package/lib/__internal__/popover/popover.component.d.ts

@@ -1,6 +1,6 @@
 import React, { MutableRefObject } from "react";
 import { Placement, Middleware } from "@floating-ui/dom";
-declare type CustomRefObject<T> = {
+type CustomRefObject<T> = {
     current?: T | null;
 };
 export interface PopoverProps {

package/lib/__internal__/popover/popover.style.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare type StyledPopoverContentProps = {
+type StyledPopoverContentProps = {
     isOpen?: boolean;
 };
 export declare const StyledPopoverContent: import("styled-components").StyledComponent<"div", any, StyledPopoverContentProps, never>;

package/lib/__internal__/validations/validation-icon.component.d.ts

@@ -17,7 +17,7 @@ export interface ValidationProps {
      */
     warning?: boolean | string;
 }
-declare type TooltipPositions = "top" | "bottom" | "left" | "right";
+type TooltipPositions = "top" | "bottom" | "left" | "right";
 export interface ValidationIconProps extends ValidationProps, Pick<MarginProps, "mr" | "ml"> {
     /** A small string to indicate the size of the icon */
     size?: "small" | "medium" | "large";

package/lib/__internal__/validations/validation-icon.style.d.ts

@@ -1,5 +1,5 @@
 import { ValidationIconProps } from "./validation-icon.component";
-declare type ValidationType = "error" | "warning" | "info";
+type ValidationType = "error" | "warning" | "info";
 declare const ValidationIconStyle: import("styled-components").StyledComponent<"span", any, ValidationIconProps & {
     validationType: ValidationType;
 }, never>;

package/lib/components/accordion/accordion-group/accordion-group.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-declare type AccordionGroupChild = React.ReactElement | boolean | null | undefined | AccordionGroupChildArray;
+type AccordionGroupChild = React.ReactElement | boolean | null | undefined | AccordionGroupChildArray;
 interface AccordionGroupChildArray extends Array<AccordionGroupChild> {
 }
 export interface AccordionGroupProps extends MarginProps, TagProps {

package/lib/components/accordion/accordion.style.js

@@ -81,8 +81,8 @@ const StyledAccordionIcon = exports.StyledAccordionIcon = (0, _styledComponents.
   isExpanded,
   iconAlign
 }) => {
-  return isExpanded && (iconAlign === "right" ? "transform: rotate(180deg)" : "transform: rotate(-180deg)");
-}};
+  return isExpanded && (iconAlign === "right" ? "transform: rotate(180deg);" : "transform: rotate(-180deg);");
+}}
 
   color: var(--colorsActionMinor500);
 `;

package/lib/components/action-popover/__internal__/action-popover-utils.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare type ReactItem = React.ReactChild | React.ReactFragment | React.ReactPortal;
+type ReactItem = React.ReactChild | React.ReactFragment | React.ReactPortal;
 export declare const getItems: (children: React.ReactNode | React.ReactNode[]) => ReactItem[];
 export declare const isItemDisabled: (item: ReactItem) => boolean;
 export declare const findFirstFocusableItem: (items: ReactItem[]) => number;

package/lib/components/action-popover/__internal__/action-popover.context.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-export declare type Alignment = "left" | "right";
-declare type ActionPopoverContextType = {
+export type Alignment = "left" | "right";
+type ActionPopoverContextType = {
     setOpenPopover: (isOpen: boolean) => void;
     focusButton: () => void;
     submenuPosition: Alignment;

package/lib/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { ButtonIconPosition, ButtonTypes, SizeOptions } from "../../button/button.component";
 import { IconType } from "../../icon";
-export declare type ActionPopoverMenuButtonAria = {
+export type ActionPopoverMenuButtonAria = {
     "aria-haspopup": string;
     "aria-label"?: string;
     "aria-labelledby"?: string;

package/lib/components/action-popover/action-popover.component.d.ts

@@ -40,7 +40,7 @@ export interface ActionPopoverProps extends MarginProps, TagProps {
     /** Prop to specify an aria-describedby for the component */
     "aria-describedby"?: string;
 }
-export declare type ActionPopoverHandle = {
+export type ActionPopoverHandle = {
     focusButton: () => void;
 } | null;
 export declare const ActionPopover: React.ForwardRefExoticComponent<ActionPopoverProps & React.RefAttributes<ActionPopoverHandle>>;

package/lib/components/action-popover/action-popover.style.d.ts

@@ -2,7 +2,7 @@
 declare const Menu: import("styled-components").StyledComponent<"ul", any, {
     isOpen?: boolean | undefined;
 }, never>;
-declare type StyledMenuItemProps = {
+type StyledMenuItemProps = {
     isDisabled: boolean;
     horizontalAlignment?: "left" | "right";
     submenuPosition?: "left" | "right";

package/lib/components/badge/badge.style.d.ts

@@ -7,7 +7,7 @@ interface StyledBadgeProps {
     isHovered?: boolean;
 }
 declare const StyledBadge: import("styled-components").StyledComponent<"span", any, {
-    as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> | undefined;
+    as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>> | undefined;
 } & StyledBadgeProps, "as">;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };

package/lib/components/batch-selection/__internal__/batch-selection.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type BatchSelectionContextType = {
+export type BatchSelectionContextType = {
     batchSelectionDisabled: boolean;
 };
 declare const BatchSelectionContext: React.Context<BatchSelectionContextType>;

package/lib/components/box/box.component.d.ts

@@ -3,12 +3,12 @@ import { SpaceProps, LayoutProps, FlexboxProps, PositionProps, GridProps } from
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { Gap } from "style/utils/box-gap";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export declare type OverflowWrap = "break-word" | "anywhere";
-export declare type ScrollVariant = "light" | "dark";
-export declare type BoxSizing = "content-box" | "border-box";
-declare type DesignTokensType = keyof typeof DesignTokens;
-declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
-export declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
+export type OverflowWrap = "break-word" | "anywhere";
+export type ScrollVariant = "light" | "dark";
+export type BoxSizing = "content-box" | "border-box";
+type DesignTokensType = keyof typeof DesignTokens;
+type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
+export type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
 export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, LayoutProps, Omit<PositionProps, "zIndex">, SpaceProps, TagProps {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** Set the ID attribute of the Box component */

package/lib/components/breadcrumbs/__internal__/breadcrumbs.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type BreadcrumbsContextType = {
+export type BreadcrumbsContextType = {
     isDarkBackground: boolean;
 };
 declare const BreadcrumbsContext: React.Context<BreadcrumbsContextType>;

package/lib/components/button/button.component.d.ts

@@ -3,9 +3,9 @@ import { SpaceProps } from "styled-system";
 import { IconType } from "../icon";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipPositions } from "../tooltip/tooltip.config";
-export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "darkBackground" | "gradient-grey" | "gradient-white";
-export declare type SizeOptions = "small" | "medium" | "large";
-export declare type ButtonIconPosition = "before" | "after";
+export type ButtonTypes = "primary" | "secondary" | "tertiary" | "darkBackground" | "gradient-grey" | "gradient-white";
+export type SizeOptions = "small" | "medium" | "large";
+export type ButtonIconPosition = "before" | "after";
 export interface ButtonProps extends SpaceProps, TagProps {
     /**
      * Prop to specify the aria-label attribute of the component
@@ -45,13 +45,13 @@ export interface ButtonProps extends SpaceProps, TagProps {
     /** If provided, the text inside a button will not wrap */
     noWrap?: boolean;
     /** Specify a callback triggered on blur */
-    onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    onBlur?: (ev: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     /** Specify a callback triggered on change */
-    onChange?: (ev: React.ChangeEvent<HTMLButtonElement>) => void;
+    onChange?: (ev: React.FormEvent<HTMLButtonElement | HTMLAnchorElement> | React.ChangeEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     /** Specify a callback triggered on focus */
-    onFocus?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    onFocus?: (ev: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     /** Specify a callback triggered on keyDown */
-    onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     /** onClick handler */
     onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     /** Assigns a size to the button: "small" | "medium" | "large" */
@@ -72,5 +72,5 @@ export interface ButtonProps extends SpaceProps, TagProps {
      */
     className?: string;
 }
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Button;

package/lib/components/button/button.component.js

@@ -108,7 +108,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
   if (subtext) {
     !(size === "large") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "subtext prop has no effect unless the button is large.") : (0, _invariant.default)(false) : void 0;
   }
-  const [internalRef, setInternalRef] = (0, _react.useState)();
+  const [internalRef, setInternalRef] = (0, _react.useState)(null);
   const {
     inSplitButton,
     onChildButtonClick

package/lib/components/button/button.style.js

@@ -30,9 +30,10 @@ function stylingForIconOnly(size) {
       dimension = "40px";
   }
   return `
-  padding: 0px;
-  width: ${dimension};
-  min-height: ${dimension}`;
+    padding: 0px; 
+    width: ${dimension}; 
+    min-height: ${dimension};
+  `;
 }
 function stylingForType({
   iconOnly,
@@ -72,7 +73,7 @@ const StyledButton = _styledComponents.default.button`
     align-items: center;
     cursor: ${disabled ? "not-allowed" : "pointer"};
     display: inline-flex;
-    ${noWrap ? "white-space: nowrap;" : "flex-flow: wrap;"}
+    ${noWrap ? "white-space: nowrap" : "flex-flow: wrap"};
     justify-content: center;
     vertical-align: middle;
     outline-offset: 0;
@@ -101,15 +102,28 @@ const StyledButton = _styledComponents.default.button`
   iconType
 }) => (0, _styledComponents.css)`
     ${_icon.default} {
-      margin-left: ${!iconOnly && iconPosition === "after" ? "var(--spacing100)" : "0px"};
-      margin-right: ${!iconOnly && iconPosition === "before" ? "var(--spacing100)" : "0px"};
-      margin-bottom: ${iconOnly ? "1px" : "0px"};
+      ${iconOnly && (0, _styledComponents.css)`
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 1px;
+      `}
+      ${!iconOnly && (0, _styledComponents.css)`
+        margin-bottom: 0px;
+        ${iconPosition === "after" && `
+          margin-left: var(--spacing100);
+          margin-right: 0px;
+        `}
+        ${iconPosition === "before" && `
+          margin-left: 0px;
+          margin-right: var(--spacing100);
+        `}
+      `}
+
       height: ${additionalIconStyle(iconType)};
       width: 20px;
       svg {
         margin-top: 0;
       }
-      ${iconOnly && "margin-left: auto; margin-right: auto"}
     }
   `}
 `;

package/lib/components/button-minor/button-minor.style.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ButtonMinorProps } from "./button-minor.component";
-declare const StyledButtonMinor: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, ButtonMinorProps, never>;
+declare const StyledButtonMinor: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, ButtonMinorProps, never>;
 export default StyledButtonMinor;

package/lib/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare type ButtonToggleGroupContextType = {
+type ButtonToggleGroupContextType = {
     onButtonClick: (value: string) => void;
     handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     pressedButtonValue?: string;

package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.d.ts

@@ -1,4 +1,4 @@
 import { ButtonToggleGroupProps } from ".";
-declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled" | "labelInline">;
+type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled" | "labelInline">;
 declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupProps, never>;
 export default StyledButtonToggleGroup;

package/lib/components/button-toggle/button-toggle.style.d.ts

@@ -1,5 +1,5 @@
 import { IconType } from "../icon";
-export declare type ButtonToggleIconSizes = "small" | "large";
+export type ButtonToggleIconSizes = "small" | "large";
 export declare const heightConfig: {
     small: number;
     medium: number;

package/lib/components/carbon-provider/__internal__/top-modal.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare type TopModalContextProps = {
+type TopModalContextProps = {
     topModal: HTMLElement | null;
 };
 declare const _default: React.Context<TopModalContextProps>;

package/lib/components/card/card.component.d.ts

@@ -3,8 +3,8 @@ import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { CardContextProps } from "./__internal__/card.context";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-declare type DesignTokensType = keyof typeof DesignTokens;
-declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
+type DesignTokensType = keyof typeof DesignTokens;
+type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface CardProps extends MarginProps, Pick<TagProps, "data-element" | "data-role"> {
     /** Action to be executed when card is clicked or enter pressed.
      * Renders a button when passed and no draggable or href props set

package/lib/components/card/card.config.d.ts

@@ -1,4 +1,4 @@
 export declare const CARD_SPACING: readonly ["small", "medium", "large"];
 export declare const CARD_ALIGNS: readonly ["left", "center", "right"];
-export declare type CardAlign = (typeof CARD_ALIGNS)[number];
-export declare type CardSpacing = (typeof CARD_SPACING)[number];
+export type CardAlign = (typeof CARD_ALIGNS)[number];
+export type CardSpacing = (typeof CARD_SPACING)[number];

package/lib/components/card/card.style.d.ts

@@ -12,8 +12,8 @@ export declare const marginSizes: {
     medium: string;
     large: string;
 };
-declare type DesignTokensType = keyof typeof DesignTokens;
-export declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
+type DesignTokensType = keyof typeof DesignTokens;
+export type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface StyledCardProps extends MarginProps, Pick<CardContextProps, "roundness" | "spacing">, Pick<CardProps, "href" | "onClick"> {
     cardWidth: string;
     interactive: boolean;

package/lib/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -10,7 +10,6 @@ var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/
 var _fieldset = _interopRequireDefault(require("../../../__internal__/fieldset"));
 var _utils = require("../../../style/utils");
 var _tooltipProvider = require("../../../__internal__/tooltip-provider");
-var _formSpacingProvider = _interopRequireDefault(require("../../../__internal__/form-spacing-provider"));
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _validationMessage = _interopRequireDefault(require("../../../__internal__/validation-message/validation-message.component"));
 var _box = _interopRequireDefault(require("../../box"));
@@ -93,9 +92,7 @@ const CheckboxGroup = ({
       error: !!error,
       warning: !!warning
     }
-  }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
-    marginBottom: undefined
-  }, children))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+  }, children)))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
     id: uniqueId,
@@ -123,9 +120,7 @@ const CheckboxGroup = ({
       warning: !!warning,
       info: !!info
     }
-  }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
-    marginBottom: undefined
-  }, children))))));
+  }, children)))));
 };
 exports.CheckboxGroup = CheckboxGroup;
 CheckboxGroup.displayName = "CheckboxGroup";

package/lib/components/checkbox/checkbox.component.js

@@ -13,8 +13,8 @@ var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__intern
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _checkboxGroup = _interopRequireDefault(require("./checkbox-group/__internal__/checkbox-group.context"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
+var _utils = require("../../style/utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -106,7 +106,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
       info: contextInfo || info
     })
   };
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const componentToRender = /*#__PURE__*/_react.default.createElement(_checkbox.default, _extends({
     disabled: disabled,
     labelSpacing: labelSpacing,

package/lib/components/checkbox/checkbox.style.js

@@ -18,6 +18,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledCheckbox = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
   ${({
   disabled,

package/lib/components/content/content.style.d.ts

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
-export declare type AlignOptions = "left" | "center" | "right";
-export declare type VariantOptions = "primary" | "secondary";
+export type AlignOptions = "left" | "center" | "right";
+export type VariantOptions = "primary" | "secondary";
 export interface StyledContentProps extends MarginProps {
     /** Aligns the content (left, center or right) */
     align?: AlignOptions;

package/lib/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { DayPickerProps, Modifiers } from "react-day-picker";
-declare type CustomRefObject<T> = {
+type CustomRefObject<T> = {
     current?: T | null;
 };
 export interface PickerProps extends Omit<DayPickerProps, "mode" | "modifiers"> {

package/lib/components/date/__internal__/weekday/weekday.style.js

@@ -17,7 +17,7 @@ const StyledWeekday = _styledComponents.default.th`
     color: var(--colorsActionMinor500);
     text-transform: uppercase;
     font-size: 12px;
-    //font: var(--typographyDatePickerCalendarDayM) font assets to be updated part of FE-4975
+    //font: var(--typographyDatePickerCalendarDayM); font assets to be updated part of FE-4975
     text-align: center;
     padding: 20px 0 5px;
     box-sizing: border-box;

package/lib/components/date/date.component.js

@@ -15,7 +15,6 @@ var _textbox = _interopRequireDefault(require("../textbox"));
 var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 var _dateRange = _interopRequireDefault(require("../date-range/__internal__/date-range.context"));
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -291,7 +290,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     }
     return value;
   };
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils2.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_date.default, _extends({
     ref: wrapperRef,
     role: "presentation",

package/lib/components/date/date.style.js

@@ -21,6 +21,7 @@ const datePickerWidth = {
   small: "120px"
 };
 const StyledDateInput = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
 
   & ${_inputPresentation.default} {

package/lib/components/date-range/__internal__/date-range.context.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-export declare type InputName = "start" | "end";
-declare type IsBlurBlocked = {
+export type InputName = "start" | "end";
+type IsBlurBlocked = {
     current: boolean;
 };
-declare type SetOpen = null | ((value: boolean) => void);
-export declare type SetInputRefMapValue = {
+type SetOpen = null | ((value: boolean) => void);
+export type SetInputRefMapValue = {
     [id in InputName]?: {
         isBlurBlocked: IsBlurBlocked;
         setOpen: SetOpen;

package/lib/components/date-range/date-range.style.js

@@ -12,6 +12,7 @@ var _inputPresentation = require("../../__internal__/input/input-presentation.st
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledDateRange = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
 
   & ${_date.default} {

package/lib/components/definition-list/__internal__/dl.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type ElementAlignment = "left" | "center" | "right";
+export type ElementAlignment = "left" | "center" | "right";
 export interface DlContextProps {
     /** Render the DefinitionList as a single column */
     asSingleColumn?: boolean;

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

@@ -4,7 +4,7 @@ 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];
-declare type PaddingValues = (typeof PADDING_VALUES)[number];
+type PaddingValues = (typeof PADDING_VALUES)[number];
 export interface ContentPaddingInterface {
     p?: PaddingValues;
     py?: PaddingValues;
@@ -69,7 +69,7 @@ export interface DialogProps extends ModalProps, TagProps {
     /** @private @internal @ignore */
     "data-component"?: string;
 }
-export declare type DialogHandle = {
+export type DialogHandle = {
     /** Programmatically focus on root container of Dialog. */
     focus: () => void;
 } | null;