carbon-react 152.2.0 → 153.0.0-beta.1

package/esm/components/switch/switch.component.js

@@ -7,12 +7,12 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import Logger from "../../__internal__/utils/logger";
 import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import StyledSwitch, { ErrorBorder } from "./switch.style";
 import SwitchSlider from "./__internal__/switch-slider.component";
 import guid from "../../__internal__/utils/helpers/guid";
 import HintText from "../../__internal__/hint-text";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 let deprecateUncontrolledWarnTriggered = false;
 export const Switch = /*#__PURE__*/React.forwardRef(({
   autoFocus,
@@ -71,7 +71,7 @@ export const Switch = /*#__PURE__*/React.forwardRef(({
     shouldLabelBeInline = largeScreen;
   }
   const shouldValidationBeOnLabel = labelInline && !reverse ? true : validationOnLabel;
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   const switchStyleProps = {
     "data-component": "switch",
     "data-role": dataRole,

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

@@ -1,7 +1,12 @@
+import { ThemeObject } from "../../style/themes/base";
+import { SwitchProps } from "./switch.component";
+interface StyledSwitchProps extends Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size"> {
+    theme: ThemeObject;
+}
 export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
     reverse: boolean;
     warning: boolean;
     isDarkBackground: boolean;
 }, never>;
-declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, StyledSwitchProps, never>;
 export default StyledSwitch;

package/esm/components/switch/switch.style.js

@@ -34,6 +34,7 @@ const StyledSwitch = styled.div`
   reverse,
   size
 }) => css`
+    margin-bottom: var(--fieldSpacing);
     ${margin}
     ${FieldLineStyle} {
       display: flex;

package/esm/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -382,10 +382,9 @@ const tabTitleStyles = css`
         border-bottom: 0px;
 
         ${!isInSidebar && !error && css`
-          --border-right-value: ${validationRedesignOptIn ? "0px" : "2px"}
-            border-right:
-            ${alternateStyling ? "1px" : "var(--border-right-value)"} solid
-            var(--colorsActionMinor100);
+          --border-right-value: ${validationRedesignOptIn ? "0px" : "2px"};
+          border-right: ${alternateStyling ? "1px" : "var(--border-right-value)"}
+            solid var(--colorsActionMinor100);
         `}
 
         ${!borders && css`

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.d.ts

@@ -1,11 +1,11 @@
 import { TabHeaderProps } from "./tabs-header.component";
-declare type StyledTabsHeaderWrapperProps = Pick<TabHeaderProps, "position" | "isInSidebar">;
+type StyledTabsHeaderWrapperProps = Pick<TabHeaderProps, "position" | "isInSidebar">;
 declare const StyledTabsHeaderWrapper: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderWrapperProps, never>;
-export declare type StyledTabsHeaderListProps = Pick<TabHeaderProps, "align" | "extendedLine" | "noRightBorder" | "isInSidebar" | "position">;
+export type StyledTabsHeaderListProps = Pick<TabHeaderProps, "align" | "extendedLine" | "noRightBorder" | "isInSidebar" | "position">;
 declare const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderListProps, never>;
-declare type StyledVerticalTabsWrapperProps = Pick<TabHeaderProps, "isInSidebar">;
+type StyledVerticalTabsWrapperProps = Pick<TabHeaderProps, "isInSidebar">;
 declare const StyledVerticalTabsWrapper: import("styled-components").StyledComponent<"div", any, StyledVerticalTabsWrapperProps, never>;
-declare type StyledWrapperProps = {
+type StyledWrapperProps = {
     align: string;
     position: string;
     role?: string;
@@ -13,7 +13,7 @@ declare type StyledWrapperProps = {
     noRightBorder?: boolean;
     isInSidebar?: boolean;
 };
-declare type StyledNavigationButtonWrapperProps = {
+type StyledNavigationButtonWrapperProps = {
     position: string;
     visible: boolean;
     size: string;

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -106,10 +106,13 @@ const StyledNavigationButtonWrapper = styled.div`
   visible,
   size
 }) => css`
-    height: ${size === "default" ? "48px" : "56px"}
+    height: ${size === "default" ? "48px" : "56px"};
     z-index: 8;
     display: ${visible ? "block" : "none"};
-    ${position === "right" && `right: 0; position: absolute;`}
+    ${position === "right" && `
+      right: 0;
+      position: absolute;
+    `}
   `}
 `;
 const StyledNavigationButton = styled.button`

package/esm/components/tabs/tab/tab.style.d.ts

@@ -1,6 +1,6 @@
 import { ThemeObject } from "../../../style/themes/base";
 import { TabProps } from ".";
-export declare type StyledTabProps = Pick<TabProps, "position" | "isTabSelected"> & {
+export type StyledTabProps = Pick<TabProps, "position" | "isTabSelected"> & {
     theme?: ThemeObject;
 };
 declare const StyledTab: import("styled-components").StyledComponent<"div", any, Pick<TabProps, "position" | "isTabSelected"> & {

package/esm/components/text-editor/__internal__/plugins/Toolbar/toolbar.style.d.ts

@@ -7,5 +7,5 @@ interface FormattingButtonProps extends ButtonProps {
 declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const FormattingButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const CommandButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const FormattingButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, FormattingButtonProps, never>;
+declare const FormattingButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, FormattingButtonProps, never>;
 export { StyledToolbar, FormattingButtons, CommandButtons, FormattingButton };

package/esm/components/text-editor/text-editor.style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { MarginProps } from "styled-system";
-declare type StyledTextEditorWrapperProps = MarginProps;
+type StyledTextEditorWrapperProps = MarginProps;
 interface StyledWrapperProps {
     error?: string;
     namespace: string;

package/esm/components/text-editor/text-editor.style.js

@@ -6,6 +6,7 @@ export const StyledTextEditor = styled(Box)`
   position: relative;
 `;
 export const StyledTextEditorWrapper = styled.div`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
 `;
 export const StyledWrapper = styled.div`

package/esm/components/textarea/textarea.component.js

@@ -16,8 +16,8 @@ import ErrorBorder from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import HintText from "../../__internal__/hint-text";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 let deprecateUncontrolledWarnTriggered = false;
 let warnBorderRadiusArrayTooLarge = false;
 export const Textarea = /*#__PURE__*/React.forwardRef(({
@@ -213,7 +213,7 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }));
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -243,7 +243,8 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
     isOptional: isOptional,
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    validationRedesignOptIn: validationRedesignOptIn
+    validationRedesignOptIn: validationRedesignOptIn,
+    my: 0 // prevents any form spacing being applied
   }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(HintText, {
     align: labelAlign,
     id: inputHintId,

package/esm/components/textarea/textarea.style.js

@@ -6,6 +6,7 @@ import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-ico
 import BaseTheme from "../../style/themes/base";
 export const DEFAULT_MIN_HEIGHT = 64;
 const StyledTextarea = styled.div`
+  margin-bottom: var(--fieldSpacing);
   ${margin};
 
   ${StyledInput} {
@@ -18,7 +19,7 @@ const StyledTextarea = styled.div`
 
     ${({
   hasIcon
-}) => hasIcon && "padding-right: var(--spacing500)"}
+}) => hasIcon && "padding-right: var(--spacing500);"}
   }
 
   ${({

package/esm/components/textbox/textbox.component.js

@@ -220,7 +220,7 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
     warning: warning
   }), !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
     warning: !!(!error && warning)
-  }), input) : input), characterCount));
+  }), input) : input, characterCount)));
 });
 Textbox.displayName = "Textbox";
 export default Textbox;

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

@@ -3,8 +3,8 @@ import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { SpaceProps, WidthProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { TILE_HIGHLIGHT_VARIANTS } from "./tile.config";
-declare type DesignTokensType = keyof typeof DesignTokens;
-declare type HighlightVariantType = (typeof TILE_HIGHLIGHT_VARIANTS)[number];
+type DesignTokensType = keyof typeof DesignTokens;
+type HighlightVariantType = (typeof TILE_HIGHLIGHT_VARIANTS)[number];
 export interface TileProps extends SpaceProps, WidthProps, TagProps {
     /** Sets the theme of the tile */
     variant?: "tile" | "transparent" | "active" | "grey";

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

@@ -4,8 +4,8 @@ import { ValidationProps } from "../../__internal__/validations";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { Sizes } from "../../__internal__/input/input-presentation.component";
 import { ToggleDataProps } from "./__internal__/time-toggle";
-export declare type ToggleValue = "AM" | "PM";
-export declare type TimeValue = {
+export type ToggleValue = "AM" | "PM";
+export type TimeValue = {
     hours: string;
     minutes: string;
     period?: ToggleValue;
@@ -69,7 +69,7 @@ export interface TimeProps extends TagProps, MarginProps {
     /** Set custom data- attributes on the toggle elements */
     toggleProps?: ToggleDataProps;
 }
-export declare type TimeHandle = {
+export type TimeHandle = {
     /** Programmatically focus the hours input. */
     focusHoursInput: () => void;
     /** Programmatically focus the minutes input. */

package/esm/components/time/time.component.js

@@ -4,6 +4,7 @@ import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 import Fieldset from "../../__internal__/fieldset";
 import Box from "../box";
 import ErrorBorder from "../textbox/textbox.style";
@@ -170,7 +171,7 @@ const Time = /*#__PURE__*/React.forwardRef(({
     isDisabled: disabled,
     name: name,
     id: internalId.current
-  }, rest, tagComponent("time", rest), {
+  }, rest, filterStyledSystemMarginProps(rest), tagComponent("time", rest), {
     "aria-describedby": inputHint ? combinedAriaDescribedBy : ariaDescribedBy
   }), inputHint && /*#__PURE__*/React.createElement(HintText, {
     align: labelAlign,
@@ -204,7 +205,8 @@ const Time = /*#__PURE__*/React.forwardRef(({
     error: !!hoursError,
     warning: !!hoursWarning,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    my: 0 // prevents any form spacing being applied
   }))), /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     flexDirection: "column",
@@ -232,7 +234,8 @@ const Time = /*#__PURE__*/React.forwardRef(({
     error: !!minutesError,
     warning: !!minutesWarning,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    my: 0 // prevents any form spacing being applied
   }))), showToggle && /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     flexDirection: "column",

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-declare type ToastVariants = "error" | "info" | "success" | "warning" | "notice" | "neutral" | "notification";
-declare type AlignOptions = "left" | "center" | "right";
-declare type AlignYOptions = "top" | "center" | "bottom";
+type ToastVariants = "error" | "info" | "success" | "warning" | "notice" | "neutral" | "notification";
+type AlignOptions = "left" | "center" | "right";
+type AlignYOptions = "top" | "center" | "bottom";
 export interface ToastProps extends TagProps {
     /** Sets the horizontal alignment of the component. */
     align?: AlignOptions;

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

@@ -6,8 +6,8 @@ declare const StyledPortal: import("styled-components").StyledComponent<({ child
     alignY?: "center" | "top" | "bottom" | undefined;
     isNotice?: boolean | undefined;
 }, never>;
-declare type ToastVariants = MessageVariant;
-declare type ToastStyleProps = {
+type ToastVariants = MessageVariant;
+type ToastStyleProps = {
     align?: "left" | "center" | "right";
     alignY?: "top" | "center" | "bottom";
     maxWidth?: string;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { TooltipPositions } from "./tooltip.config";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export declare type InputSizes = "small" | "medium" | "large";
+export type InputSizes = "small" | "medium" | "large";
 export interface TooltipProps extends TagProps {
     /** The message to be displayed within the tooltip */
     message: React.ReactNode;

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

@@ -1,2 +1,2 @@
 export declare const TOOLTIP_POSITIONS: string[];
-export declare type TooltipPositions = "top" | "bottom" | "left" | "right";
+export type TooltipPositions = "top" | "bottom" | "left" | "right";

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

@@ -2,7 +2,7 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
-export declare type VariantTypes = (typeof VARIANT_TYPES)[number];
+export type VariantTypes = (typeof VARIANT_TYPES)[number];
 export interface TypographyProps extends SpaceProps, TagProps {
     /** Override the variant component */
     as?: React.ElementType;

package/esm/components/typography/typography.component.js

@@ -4,6 +4,21 @@ import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
 import StyledTypography from "./typography.style";
 export const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+const getAs = variant => {
+  switch (variant) {
+    case "h1-large":
+      return "h1";
+    case "segment-header":
+    case "segment-header-small":
+    case "segment-subheader":
+    case "segment-subheader-alt":
+      return "h5";
+    case "big":
+      return "p";
+    default:
+      return variant;
+  }
+};
 export const Typography = ({
   "data-component": dataComponent,
   variant = "p",
@@ -35,7 +50,7 @@ export const Typography = ({
 }) => {
   return /*#__PURE__*/React.createElement(StyledTypography, _extends({
     variant: variant,
-    as: as,
+    as: as || getAs(variant),
     id: id,
     fontSize: fontSize,
     fontWeight: fontWeight,

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

@@ -1,12 +1,3 @@
-/// <reference types="react" />
 import { TypographyProps } from "./typography.component";
-declare const StyledTypography: import("styled-components").StyledComponent<"span", any, {
-    as: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-    size: string;
-    weight: string;
-    textTransform: string;
-    textDecoration: string;
-    lineHeight: string;
-    defaultMargin: string;
-} & TypographyProps, "textDecoration" | "size" | "as" | "weight" | "textTransform" | "lineHeight" | "defaultMargin">;
+declare const StyledTypography: import("styled-components").StyledComponent<"span", any, TypographyProps, never>;
 export default StyledTypography;

package/esm/components/typography/typography.style.js

@@ -3,21 +3,6 @@ import { space } from "styled-system";
 import styledColor from "../../style/utils/color";
 import baseTheme from "../../style/themes/base";
 import visuallyHidden from "../../style/utils/visually-hidden";
-const getAs = variant => {
-  switch (variant) {
-    case "h1-large":
-      return "h1";
-    case "segment-header":
-    case "segment-header-small":
-    case "segment-subheader":
-    case "segment-subheader-alt":
-      return "h5";
-    case "big":
-      return "p";
-    default:
-      return variant;
-  }
-};
 const getSize = variant => {
   switch (variant) {
     case "h1-large":
@@ -125,67 +110,57 @@ const getDecoration = variant => {
   }
   return "none";
 };
-const StyledTypography = styled.span.attrs(({
-  variant,
-  as,
+const StyledTypography = styled.span`
+  ${({
   fontSize,
   fontWeight,
-  textTransform,
-  lineHeight,
-  textDecoration
-}) => {
-  return {
-    as: as || getAs(variant),
-    size: fontSize || getSize(variant),
-    weight: fontWeight || getWeight(variant),
-    textTransform: textTransform || getTransform(variant),
-    textDecoration: textDecoration || getDecoration(variant),
-    lineHeight: lineHeight || getLineHeight(variant),
-    defaultMargin: variant === "p" ? "0 0 16px" : "0"
-  };
-})`
-  ${({
-  size,
-  weight,
-  textTransform,
-  lineHeight,
-  defaultMargin,
-  textDecoration,
   display,
   variant,
+  lineHeight: lHeight,
   listStyleType,
   whiteSpace,
   wordBreak,
   wordWrap,
   textAlign,
+  textDecoration: decoration,
   textOverflow,
+  textTransform: transform,
   truncate,
   screenReaderOnly
-}) => css`
-    font-style: normal;
-    font-size: ${size};
-    font-weight: ${weight};
-    text-transform: ${textTransform};
-    text-decoration: ${textDecoration};
-    line-height: ${lineHeight};
-    margin: ${defaultMargin};
-    padding: 0;
-    white-space: ${truncate ? "nowrap" : whiteSpace};
-    word-break: ${wordBreak};
-    word-wrap: ${wordWrap};
-    text-align: ${textAlign};
-    text-overflow: ${textOverflow || truncate && "ellipsis"};
-    ${truncate && css`
-      overflow: hidden;
-    `};
-    ${screenReaderOnly && visuallyHidden}
-    ${variant === "sup" && "vertical-align: super;"};
-    ${variant === "sub" && "vertical-align: sub;"};
-    ${display && `display: ${display};`};
-    ${listStyleType && `list-style-type: ${listStyleType};`};
-  `}
+}) => {
+  const size = fontSize || getSize(variant);
+  const weight = fontWeight || getWeight(variant);
+  const textTransform = transform || getTransform(variant);
+  const textDecoration = decoration || getDecoration(variant);
+  const lineHeight = lHeight || getLineHeight(variant);
+  const defaultMargin = variant === "p" ? "0 0 16px" : "0";
+  return css`
+      font-style: normal;
+      font-size: ${size};
+      font-weight: ${weight};
+      text-transform: ${textTransform};
+      text-decoration: ${textDecoration};
+      line-height: ${lineHeight};
+      margin: ${defaultMargin};
+      padding: 0;
+      white-space: ${truncate ? "nowrap" : whiteSpace};
+      word-break: ${wordBreak};
+      word-wrap: ${wordWrap};
+      text-align: ${textAlign};
+      text-overflow: ${textOverflow || truncate && "ellipsis"};
+      ${truncate && `
+        overflow: hidden;
+      `};
+      ${screenReaderOnly && visuallyHidden}
+      ${variant === "sup" && "vertical-align: super;"}
+      ${variant === "sub" && "vertical-align: sub;"}
+      ${display && `display: ${display};`}
+      ${listStyleType && `list-style-type: ${listStyleType};`}
+    `;
+}}
   ${space}
-    ${({
+
+  ${({
   color,
   bg,
   backgroundColor,
@@ -196,6 +171,7 @@ const StyledTypography = styled.span.attrs(({
   backgroundColor,
   ...rest
 })}
+
   ${({
   isDisabled
 }) => isDisabled && css`

package/esm/components/vertical-divider/vertical-divider.component.d.ts

@@ -1,6 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
+type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
 export interface VerticalDividerProps extends SpaceProps, TagProps {
     /** Shorthand for the height attribute */
     h?: number | string;

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

@@ -22,6 +22,6 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
     /** Optional component to render instead of the default div, useful for rendering router link components */
     component?: T;
 }
-declare type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
+type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
 export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>) => React.JSX.Element;
 export default VerticalMenuItem;

package/esm/global.d.ts

@@ -1,4 +1,4 @@
-import { ModalList } from "components/modal/__internal__/modal-manager";
+import { ModalList } from "./components/modal/__internal__/modal-manager";
 
 declare global {
   module "*.png";

package/esm/hooks/__internal__/useChildButtons/useChildButtons.d.ts

@@ -4,7 +4,7 @@ declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonEleme
     showButtons: () => void;
     hideButtons: () => void;
     buttonNode: import("react").RefObject<HTMLDivElement>;
-    handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
+    handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     wrapperProps: {
         "data-element": string;
         role: string;

package/esm/hooks/__internal__/useDebounce/useDebounce.d.ts

@@ -1,4 +1,4 @@
 import { DebouncedFunc } from "lodash";
-declare type Callback = (...args: any[]) => void;
+type Callback = (...args: any[]) => void;
 declare const useDebounce: <T extends Callback>(callback: T, delay: number) => DebouncedFunc<T>;
 export default useDebounce;

package/esm/hooks/__internal__/useFloating/useFloating.d.ts

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

package/esm/hooks/__internal__/useModalManager/useModalManager.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare type UseModalManagerArgs = {
+type UseModalManagerArgs = {
     open: boolean;
     closeModal: (e: KeyboardEvent) => void;
     modalRef: React.RefObject<HTMLElement>;

package/esm/hooks/__internal__/useThrottle/useThrottle.d.ts

@@ -1,4 +1,4 @@
 import { DebouncedFunc } from "lodash";
-declare type Callback = (...args: any[]) => void;
+type Callback = (...args: any[]) => void;
 declare const useThrottle: <T extends Callback>(callback: T, delay: number) => DebouncedFunc<T>;
 export default useThrottle;

package/esm/style/palette/index.d.ts

@@ -1,4 +1,4 @@
-export declare type PaletteFunction = (weight: number | string) => string;
+export type PaletteFunction = (weight: number | string) => string;
 /**
  * Takes a config object of base colors and, for each base, generates functions
  * to lighten and darken it.

package/esm/style/themes/base/base-theme.config.d.ts

@@ -1,5 +1,5 @@
 import { PaletteFunction } from "../../palette";
-export declare type BasePalette = Record<string, string | PaletteFunction> & {
+export type BasePalette = Record<string, string | PaletteFunction> & {
     blackOpacity: PaletteFunction;
     whiteOpacity: PaletteFunction;
     [key: string]: PaletteFunction;

package/esm/style/utils/box-gap.d.ts

@@ -1,5 +1,5 @@
 export declare const GAP_VALUES: number[];
-export declare type AllowedNumericalValues = (typeof GAP_VALUES)[number];
-export declare type Gap = AllowedNumericalValues | string;
+export type AllowedNumericalValues = (typeof GAP_VALUES)[number];
+export type Gap = AllowedNumericalValues | string;
 export declare const getGapValue: (gapValue: number | string) => string;
 export default function gap(gapValue: number | string): string;

package/lib/__internal__/fieldset/fieldset.component.js

@@ -9,9 +9,9 @@ var _fieldset = require("./fieldset.style");
 var _validationIcon = _interopRequireDefault(require("../validations/validation-icon.component"));
 var _newValidation = _interopRequireDefault(require("../../components/carbon-provider/__internal__/new-validation.context"));
 var _inputBehaviour = require("../input-behaviour");
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _help = _interopRequireDefault(require("../../components/help"));
 var _typography = _interopRequireDefault(require("../../components/typography"));
+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; }
@@ -38,7 +38,7 @@ const Fieldset = ({
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const [ref, setRef] = (0, _react.useState)(null);
   const [isFocused, setFocus] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {