carbon-react 152.2.0 → 153.0.0-beta.1

package/lib/components/switch/switch.component.js

@@ -12,12 +12,12 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _switch = _interopRequireWildcard(require("./switch.style"));
 var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.component"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _hintText = _interopRequireDefault(require("../../__internal__/hint-text"));
+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; }
@@ -80,7 +80,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     shouldLabelBeInline = largeScreen;
   }
   const shouldValidationBeOnLabel = labelInline && !reverse ? true : validationOnLabel;
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const switchStyleProps = {
     "data-component": "switch",
     "data-role": dataRole,

package/lib/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/lib/components/switch/switch.style.js

@@ -43,6 +43,7 @@ const StyledSwitch = _styledComponents.default.div`
   reverse,
   size
 }) => (0, _styledComponents.css)`
+    margin-bottom: var(--fieldSpacing);
     ${_styledSystem.margin}
     ${_formField.FieldLineStyle} {
       display: flex;

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

@@ -391,10 +391,9 @@ const tabTitleStyles = (0, _styledComponents.css)`
         border-bottom: 0px;
 
         ${!isInSidebar && !error && (0, _styledComponents.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 && (0, _styledComponents.css)`

package/lib/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/lib/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -115,10 +115,13 @@ const StyledNavigationButtonWrapper = exports.StyledNavigationButtonWrapper = _s
   visible,
   size
 }) => (0, _styledComponents.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 = exports.StyledNavigationButton = _styledComponents.default.button`

package/lib/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/lib/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/lib/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/lib/components/text-editor/text-editor.style.js

@@ -15,6 +15,7 @@ const StyledTextEditor = exports.StyledTextEditor = (0, _styledComponents.defaul
   position: relative;
 `;
 const StyledTextEditorWrapper = exports.StyledTextEditorWrapper = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
 `;
 const StyledWrapper = exports.StyledWrapper = _styledComponents.default.div`

package/lib/components/textarea/textarea.component.js

@@ -21,8 +21,8 @@ var _textbox = _interopRequireDefault(require("../textbox/textbox.style"));
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
 var _box = _interopRequireDefault(require("../box"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _hintText = _interopRequireDefault(require("../../__internal__/hint-text"));
+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; }
@@ -222,7 +222,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }));
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -252,7 +252,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     isOptional: isOptional,
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    validationRedesignOptIn: validationRedesignOptIn
+    validationRedesignOptIn: validationRedesignOptIn,
+    my: 0 // prevents any form spacing being applied
   }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_hintText.default, {
     align: labelAlign,
     id: inputHintId,

package/lib/components/textarea/textarea.style.js

@@ -15,6 +15,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 DEFAULT_MIN_HEIGHT = exports.DEFAULT_MIN_HEIGHT = 64;
 const StyledTextarea = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin};
 
   ${_input.default} {
@@ -27,7 +28,7 @@ const StyledTextarea = _styledComponents.default.div`
 
     ${({
   hasIcon
-}) => hasIcon && "padding-right: var(--spacing500)"}
+}) => hasIcon && "padding-right: var(--spacing500);"}
   }
 
   ${({

package/lib/components/textbox/textbox.component.js

@@ -229,7 +229,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     warning: warning
   }), !disableErrorBorder && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     warning: !!(!error && warning)
-  }), input) : input), characterCount));
+  }), input) : input, characterCount)));
 });
 Textbox.displayName = "Textbox";
 var _default = exports.default = Textbox;

package/lib/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/lib/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/lib/components/time/time.component.js

@@ -9,6 +9,7 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
+var _utils = require("../../style/utils");
 var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
 var _box = _interopRequireDefault(require("../box"));
 var _textbox = _interopRequireDefault(require("../textbox/textbox.style"));
@@ -179,7 +180,7 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     isDisabled: disabled,
     name: name,
     id: internalId.current
-  }, rest, (0, _tags.default)("time", rest), {
+  }, rest, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _tags.default)("time", rest), {
     "aria-describedby": inputHint ? combinedAriaDescribedBy : ariaDescribedBy
   }), inputHint && /*#__PURE__*/_react.default.createElement(_hintText.default, {
     align: labelAlign,
@@ -213,7 +214,8 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     error: !!hoursError,
     warning: !!hoursWarning,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    my: 0 // prevents any form spacing being applied
   }))), /*#__PURE__*/_react.default.createElement(_box.default, {
     display: "flex",
     flexDirection: "column",
@@ -241,7 +243,8 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     error: !!minutesError,
     warning: !!minutesWarning,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    my: 0 // prevents any form spacing being applied
   }))), showToggle && /*#__PURE__*/_react.default.createElement(_box.default, {
     display: "flex",
     flexDirection: "column",

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/components/typography/typography.component.js

@@ -11,6 +11,21 @@ var _typography = _interopRequireDefault(require("./typography.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const VARIANT_TYPES = exports.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;
+  }
+};
 const Typography = ({
   "data-component": dataComponent,
   variant = "p",
@@ -42,7 +57,7 @@ const Typography = ({
 }) => {
   return /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
     variant: variant,
-    as: as,
+    as: as || getAs(variant),
     id: id,
     fontSize: fontSize,
     fontWeight: fontWeight,

package/lib/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/lib/components/typography/typography.style.js

@@ -12,21 +12,6 @@ var _visuallyHidden = _interopRequireDefault(require("../../style/utils/visually
 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 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":
@@ -134,67 +119,57 @@ const getDecoration = variant => {
   }
   return "none";
 };
-const StyledTypography = _styledComponents.default.span.attrs(({
-  variant,
-  as,
+const StyledTypography = _styledComponents.default.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
-}) => (0, _styledComponents.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 && (0, _styledComponents.css)`
-      overflow: hidden;
-    `};
-    ${screenReaderOnly && _visuallyHidden.default}
-    ${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 (0, _styledComponents.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.default}
+      ${variant === "sup" && "vertical-align: super;"}
+      ${variant === "sub" && "vertical-align: sub;"}
+      ${display && `display: ${display};`}
+      ${listStyleType && `list-style-type: ${listStyleType};`}
+    `;
+}}
   ${_styledSystem.space}
-    ${({
+
+  ${({
   color,
   bg,
   backgroundColor,
@@ -205,6 +180,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
   backgroundColor,
   ...rest
 })}
+
   ${({
   isDisabled
 }) => isDisabled && (0, _styledComponents.css)`

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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;