carbon-react 152.7.0 → 153.0.0

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

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

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ export interface TypeIconProps {
     transparent?: boolean;
     variant: MessageVariant;
 }
-export declare type MessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai";
+export type MessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai";
 export interface MessageProps extends MarginProps, TagProps {
     /** Set the component's content */
     children?: React.ReactNode;

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

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

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

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

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

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

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

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

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

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

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

@@ -23,14 +23,15 @@ const StyledMultiActionButton = exports.StyledMultiActionButton = _styledCompone
   ${({
   width
 }) => width && (0, _styledComponents.css)`
-    ${(0, _elementSizing.default)({
+      ${(0, _elementSizing.default)({
   width
 })}
 
-    ${_button.default} {
-      width: 100%
-      justify-content: space-between;
-    }`}
+      ${_button.default} {
+        width: 100%;
+        justify-content: space-between;
+      }
+    `}
 
   & > ${_button.default} {
     margin: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/components/portrait/portrait.style.js

@@ -30,7 +30,6 @@ const StyledCustomImg = exports.StyledCustomImg = _styledComponents.default.img`
 `;
 
 // && is used here to increase the specificity
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const StyledIcon = exports.StyledIcon = (0, _styledComponents.default)(_icon.default)`
   && {
     color: inherit;

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

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

package/lib/components/preview/preview.style.js

@@ -15,13 +15,13 @@ const StyledPreview = exports.StyledPreview = _styledComponents.default.div`
 `;
 const shimmer = (0, _styledComponents.keyframes)`
   0% { 
-    opacity: 0.1 
+    opacity: 0.1;
   }
   70% { 
-    opacity: 1
+    opacity: 1;
   }
   100% { 
-    opacity: 0.1 
+    opacity: 0.1;
   }
 `;
 function getBorderRadius(shape) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -28,7 +28,7 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
     /** Renders the white variant of the secondary split button */
     isWhite?: boolean;
 }
-export declare type SplitButtonHandle = {
+export type SplitButtonHandle = {
     /** Programmatically focus the main button */
     focusMainButton: () => void;
     /** Programmatically focus the toggle button. */

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

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

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

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

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/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/textarea/textarea.style.js

@@ -28,7 +28,7 @@ const StyledTextarea = _styledComponents.default.div`
 
     ${({
   hasIcon
-}) => hasIcon && "padding-right: var(--spacing500)"}
+}) => hasIcon && "padding-right: var(--spacing500);"}
   }
 
   ${({

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/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

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