carbon-react 152.2.1 → 153.0.0-beta.1

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

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

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/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.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__/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__/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>;