@simplybusiness/mobius 10.4.2 → 10.4.4

package/dist/types/components/Progress/Progress.d.ts

@@ -17,8 +17,8 @@ export interface ProgressProps extends Omit<AriaProgressBarProps, "label">, DOMP
     maxValue?: number;
     valueFormatter?: (value: number, minValue: number, maxValue: number) => string;
 }
-declare const Progress: {
-    ({ ref, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+declare function Progress({ ref, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace Progress {
+    var displayName: string;
+}
 export { Progress };

package/dist/types/components/Radio/Radio.d.ts

@@ -51,8 +51,8 @@ export interface RadioProps extends DOMProps, AriaRadioProps, RefAttributes<Radi
      */
     orientation?: "horizontal" | "vertical";
 }
-declare const Radio: {
-    ({ ref, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Radio({ ref, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Radio {
+    var displayName: string;
+}
 export { Radio };

package/dist/types/components/Radio/RadioGroup.d.ts

@@ -30,8 +30,8 @@ export interface RadioGroupProps extends DOMProps, Validation, RefAttributes<Rad
     value?: string;
     name?: string;
 }
-declare const RadioGroup: {
-    ({ ref, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function RadioGroup({ ref, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioGroup {
+    var displayName: string;
+}
 export { RadioGroup };

package/dist/types/components/SVG/SVG.d.ts

@@ -9,8 +9,8 @@ export interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {
     "aria-hidden"?: boolean | "true" | "false";
     "aria-labelledby"?: string;
 }
-declare const SVG: {
-    ({ ref, ...props }: SVGProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function SVG({ ref, ...props }: SVGProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SVG {
+    var displayName: string;
+}
 export { SVG };

package/dist/types/components/Segment/Segment.d.ts

@@ -11,8 +11,8 @@ export interface SegmentProps extends DOMProps, RefAttributes<SegmentElementType
     inverted?: boolean;
     children?: ReactNode;
 }
-declare const Segment: {
-    ({ ref, ...props }: SegmentProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Segment({ ref, ...props }: SegmentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Segment {
+    var displayName: string;
+}
 export { Segment };

package/dist/types/components/Segment/SegmentGroup.d.ts

@@ -6,8 +6,8 @@ export interface SegmentGroupProps extends DOMProps {
     gap?: "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "size-xxl";
     children?: ReactNode;
 }
-declare const SegmentGroup: {
-    (props: SegmentGroupProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function SegmentGroup(props: SegmentGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SegmentGroup {
+    var displayName: string;
+}
 export { SegmentGroup };

package/dist/types/components/Select/Select.d.ts

@@ -15,8 +15,8 @@ export interface SelectProps extends UseLabelProps, Validation, DOMProps, RefAtt
     "aria-describedby"?: string;
     isDisabled?: boolean;
 }
-declare const Select: {
-    ({ ref, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Select({ ref, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Select {
+    var displayName: string;
+}
 export { Select };

package/dist/types/components/Stack/Stack.d.ts

@@ -13,7 +13,7 @@ export interface StackProps extends DOMProps, RefAttributes<StackElementType> {
     elementType?: React.ElementType;
 }
 export type StackRef = Ref<StackElementType>;
-export declare const Stack: {
-    ({ ref, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function Stack({ ref, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Stack {
+    var displayName: string;
+}

package/dist/types/components/Switch/Switch.d.ts

@@ -9,8 +9,8 @@ export interface SwitchProps extends DOMProps, RefAttributes<SwitchElementType>
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
 }
-declare const Switch: {
-    ({ ref, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Switch({ ref, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Switch {
+    var displayName: string;
+}
 export { Switch };

package/dist/types/components/Table/Body.d.ts

@@ -4,8 +4,8 @@ export interface BodyProps extends RefAttributes<HTMLTableSectionElement> {
     className?: string;
 }
 export type BodyRef = Ref<HTMLTableSectionElement>;
-declare const Body: {
-    ({ ref, ...props }: BodyProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Body({ ref, ...props }: BodyProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Body {
+    var displayName: string;
+}
 export { Body };

package/dist/types/components/Table/Cell.d.ts

@@ -6,8 +6,8 @@ export interface CellProps extends RefAttributes<HTMLTableCellElement> {
     rowSpan?: number;
 }
 export type CellRef = Ref<HTMLTableCellElement>;
-declare const Cell: {
-    ({ ref, ...props }: CellProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Cell({ ref, ...props }: CellProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Cell {
+    var displayName: string;
+}
 export { Cell };

package/dist/types/components/Table/Foot.d.ts

@@ -4,8 +4,8 @@ export interface FootProps extends RefAttributes<HTMLTableSectionElement> {
     className?: string;
 }
 export type FootRef = Ref<HTMLTableSectionElement>;
-declare const Foot: {
-    ({ ref, ...props }: FootProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Foot({ ref, ...props }: FootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Foot {
+    var displayName: string;
+}
 export { Foot };

package/dist/types/components/Table/Head.d.ts

@@ -4,8 +4,8 @@ export interface HeadProps extends RefAttributes<HTMLTableSectionElement> {
     className?: string;
 }
 export type HeadRef = Ref<HTMLTableSectionElement>;
-declare const Head: {
-    ({ ref, ...props }: HeadProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Head({ ref, ...props }: HeadProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Head {
+    var displayName: string;
+}
 export { Head };

package/dist/types/components/Table/HeaderCell.d.ts

@@ -7,8 +7,8 @@ export interface HeaderCellProps extends RefAttributes<HTMLTableCellElement> {
     scope?: "col" | "row" | "colgroup" | "rowgroup";
 }
 export type HeaderCellRef = Ref<HTMLTableCellElement>;
-declare const HeaderCell: {
-    ({ ref, scope, ...props }: HeaderCellProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function HeaderCell({ ref, scope, ...props }: HeaderCellProps): import("react/jsx-runtime").JSX.Element;
+declare namespace HeaderCell {
+    var displayName: string;
+}
 export { HeaderCell };

package/dist/types/components/Table/Row.d.ts

@@ -4,8 +4,8 @@ export interface RowProps extends RefAttributes<HTMLTableRowElement> {
     className?: string;
 }
 export type RowRef = Ref<HTMLTableRowElement>;
-declare const Row: {
-    ({ ref, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Row({ ref, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Row {
+    var displayName: string;
+}
 export { Row };

package/dist/types/components/Table/Table.d.ts

@@ -7,8 +7,8 @@ export interface TableProps extends DOMProps, RefAttributes<TableElementType> {
     className?: string;
 }
 export type TableRef = Ref<TableElementType>;
-declare const Table: {
-    ({ ref, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Table({ ref, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Table {
+    var displayName: string;
+}
 export { Table };

package/dist/types/components/Text/Text.d.ts

@@ -17,8 +17,8 @@ export interface TextProps extends DOMProps, RefAttributes<TextElementType> {
     style?: React.CSSProperties;
 }
 export declare const getElementType: (variant: TextVariantType | undefined, elementType: ElementType | undefined) => ElementType;
-declare const Text: {
-    ({ ref, elementType, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Text({ ref, elementType, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Text {
+    var displayName: string;
+}
 export { Text };

package/dist/types/components/TextArea/TextArea.d.ts

@@ -7,8 +7,8 @@ export interface TextAreaProps extends UseTextFieldProps, DOMProps, RefAttribute
     className?: string;
     errorMessage?: string;
 }
-declare const TextArea: {
-    ({ ref, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function TextArea({ ref, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TextArea {
+    var displayName: string;
+}
 export { TextArea };

package/dist/types/components/TextAreaInput/TextAreaInput.d.ts

@@ -10,8 +10,8 @@ export interface TextAreaInputProps extends DOMProps, InteractionStateProps, Ref
     isReadOnly?: boolean;
     isRequired?: boolean;
 }
-declare const TextAreaInput: {
-    ({ ref, ...props }: TextAreaInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function TextAreaInput({ ref, ...props }: TextAreaInputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TextAreaInput {
+    var displayName: string;
+}
 export { TextAreaInput };

package/dist/types/components/TextField/TextField.d.ts

@@ -15,8 +15,5 @@ export interface TextFieldProps extends DOMProps, FocusEvents, UseTextFieldProps
     suffixOutside?: ReactElement;
 }
 export type TextFieldRef = Ref<TextFieldElementType>;
-declare const TextField: {
-    ({ ref, ...props }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const TextField: import("react").MemoExoticComponent<({ ref, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element>;
 export { TextField };

package/dist/types/components/TextField/adornmentWithClassName.d.ts

@@ -1,2 +1,4 @@
 import type { ReactElement } from "react";
-export declare const adornmentWithClassName: (component?: ReactElement, validationClasses?: string, className?: string) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export declare const adornmentWithClassName: (component?: ReactElement, validationClasses?: string, className?: string) => ReactElement<{
+    className?: string;
+}, string | import("react").JSXElementConstructor<any>> | null;

package/dist/types/components/TextOrHTML/TextOrHTML.d.ts

@@ -13,8 +13,8 @@ export interface TextOrHTMLProps extends Omit<TextProps, "children">, RefAttribu
     /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */
     autoDetect?: boolean;
 }
-declare const TextOrHTML: {
-    ({ ref, text, htmlClassName, htmlElementType, textWrapper, autoDetect, ...textProps }: TextOrHTMLProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function TextOrHTML({ ref, text, htmlClassName, htmlElementType, textWrapper, autoDetect, ...textProps }: TextOrHTMLProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TextOrHTML {
+    var displayName: string;
+}
 export { TextOrHTML };

package/dist/types/components/Title/Title.d.ts

@@ -10,8 +10,8 @@ export interface TitleProps extends DOMProps, RefAttributes<TitleElementType> {
     title: string;
     description: string;
 }
-declare const Title: {
-    ({ ref, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Title({ ref, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Title {
+    var displayName: string;
+}
 export { Title };

package/dist/types/components/Toast/ToastOptionsDoc.d.ts

@@ -1,9 +1,5 @@
 import type { ToastOptions } from "./types";
-/**
- * Documentation-only component for ToastOptions.
- * Exists solely to provide ArgTypes for the toast() function options.
- */
-export declare const ToastOptionsDoc: {
-    (_props: ToastOptions): null;
-    displayName: string;
-};
+export declare function ToastOptionsDoc(_props: ToastOptions): null;
+export declare namespace ToastOptionsDoc {
+    var displayName: string;
+}

package/dist/types/components/Toast/Toaster.d.ts

@@ -13,7 +13,7 @@ export interface ToasterProps {
     /** Gap between toasts in pixels */
     gap?: number;
 }
-export declare const Toaster: {
-    ({ position, closeButton, expand, duration, visibleToasts, gap, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function Toaster({ position, closeButton, expand, duration, visibleToasts, gap }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Toaster {
+    var displayName: string;
+}

package/dist/types/hooks/useButton/useButton.d.ts

@@ -12,10 +12,9 @@ export interface UseButtonProps {
     name?: string | undefined;
     value?: string | undefined;
 }
-export declare function useButton({ elementType, type, isDisabled, href, target, rel, role, name, value, onClick, onPress, }: UseButtonProps): {
+export declare function useButton({ elementType, type, isDisabled, href, target, rel, role, name, value, onClick, onPress }: UseButtonProps): {
     buttonProps: {
-        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-        type: "reset" | "submit" | "button";
+        type: "button" | "reset" | "submit";
         role?: undefined;
         href: string | undefined;
         target: string | undefined;
@@ -25,10 +24,10 @@ export declare function useButton({ elementType, type, isDisabled, href, target,
         "aria-disabled": true | undefined;
         name: string | undefined;
         value: string | undefined;
-    } | {
         onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-        role: string | undefined;
+    } | {
         type?: undefined;
+        role: string | undefined;
         href: string | undefined;
         target: string | undefined;
         rel: string | undefined;
@@ -37,5 +36,6 @@ export declare function useButton({ elementType, type, isDisabled, href, target,
         "aria-disabled": true | undefined;
         name: string | undefined;
         value: string | undefined;
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     };
 };

package/dist/types/hooks/useLabel/useLabel.d.ts

@@ -19,7 +19,7 @@ export type LabellingProps = {
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
 };
-export declare function useLabel({ id: providedId, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, labelElementType, }: UseLabelProps): {
+export declare function useLabel({ id: providedId, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, labelElementType }: UseLabelProps): {
     labelProps: {
         id?: string | undefined;
     } & LabelHTMLAttributes<HTMLLabelElement>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "10.4.2",
+  "version": "10.4.4",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -47,12 +47,12 @@
     "turbo:build": "yarn build:esm && yarn build:cjs && yarn build:types",
     "build:esm": "build-package esm",
     "build:cjs": "build-package cjs",
-    "build:types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
+    "build:types": "tsgo --emitDeclarationOnly --project tsconfig.build.json",
     "lint": "eslint . --cache",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "check-types": "tsc --noEmit --pretty",
+    "check-types": "tsgo --pretty",
     "size": "turbo run turbo:size --",
     "turbo:size": "yarn workspace @simplybusiness/bundle-checker start",
     "lint:css": "lint-css",
@@ -68,8 +68,8 @@
     "@eslint/js": "^9.39.3",
     "@react-types/progress": "^3.5.18",
     "@simplybusiness/build-scripts": "^3.0.0",
-    "@simplybusiness/eslint-config": "^2.0.5",
-    "@simplybusiness/eslint-plugin": "^1.3.1",
+    "@simplybusiness/eslint-config": "^2.0.6",
+    "@simplybusiness/eslint-plugin": "^1.3.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -78,8 +78,9 @@
     "@types/node": "^25.3.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.56.1",
-    "@typescript-eslint/parser": "^8.56.1",
+    "@typescript-eslint/eslint-plugin": "^8.59.0",
+    "@typescript-eslint/parser": "^8.59.0",
+    "@typescript/native-preview": "7.0.0-dev.20260421.2",
     "@vitest/coverage-v8": "^4.0.18",
     "csstype": "^3.2.3",
     "eslint": "^9.39.3",
@@ -88,7 +89,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
@@ -96,10 +97,9 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.19",
     "@loadable/component": "^5.16.7",
-    "@simplybusiness/icons": "^5.1.0",
-    "@simplybusiness/mobius-hooks": "^0.2.0",
+    "@simplybusiness/icons": "^5.1.1",
+    "@simplybusiness/mobius-hooks": "^0.2.1",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "react-accessible-dropdown-menu-hook": "^4.0.1",

package/src/components/Box/Box.test.tsx

@@ -1,6 +1,5 @@
 import { createRef } from "react";
 import { render } from "@testing-library/react";
-import type { CSSProperties } from "react";
 import { Box } from ".";
 
 const CLASS_NAME = "mobius-box";
@@ -221,7 +220,7 @@ describe("Box", () => {
 
     it("does not remove prop padding when style padding is undefined", () => {
       const { container } = render(
-        <Box padding={50} style={{ padding: undefined } as CSSProperties} />,
+        <Box padding={50} style={{ padding: undefined }} />,
       );
 
       expect(container.firstChild).toHaveStyle({ padding: "50px" });

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -31,13 +31,9 @@ const Breadcrumbs = ({ ref, ...props }: BreadcrumbsProps) => {
     <nav ref={ref} {...otherProps} {...navProps} className={classes}>
       <ul>
         {childArray.map((child, i) =>
-          cloneElement(
-            child as ReactElement,
-            {
-              key: i,
-              isCurrent: i === childArray.length - 1,
-            } as { key: number; isCurrent: boolean },
-          ),
+          cloneElement(child as ReactElement<{ isCurrent?: boolean }>, {
+            isCurrent: i === childArray.length - 1,
+          }),
         )}
       </ul>
     </nav>

package/src/components/Button/Button.stories.tsx

@@ -5,7 +5,7 @@ import type { ButtonProps } from "./Button";
 import { Button } from "./Button";
 import { Icon } from "../Icon";
 import { excludeControls } from "../../utils";
-// eslint-disable-next-line no-restricted-imports -- story-only styles
+
 import "./Button.story.styles.css";
 
 type StoryType = StoryObj<typeof Button>;

package/src/components/Combobox/Combobox.tsx

@@ -7,7 +7,7 @@ import { useBreakpoint } from "../../hooks";
 import { TextField } from "../TextField";
 import { VisuallyHidden } from "../VisuallyHidden";
 import { Listbox } from "./Listbox"; // Import Listbox component
-import type { ComboboxOption, ComboboxProps, ComboboxRef } from "./types";
+import type { ComboboxOption, ComboboxProps } from "./types";
 import { useComboboxHighlight } from "./useComboboxHighlight";
 import { useComboboxOptions } from "./useComboboxOptions";
 import { getOptionLabel, getOptionValue, isOptionGroup } from "./utils";
@@ -406,6 +406,4 @@ const ComboboxInner = <T extends ComboboxOption>({
   );
 };
 
-export const Combobox = ComboboxInner as <T extends ComboboxOption>(
-  props: ComboboxProps<T> & { ref?: ComboboxRef },
-) => React.JSX.Element;
+export const Combobox = ComboboxInner;

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -7,7 +7,7 @@ import { DropdownMenu } from ".";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { Icon } from "../Icon";
-// eslint-disable-next-line no-restricted-imports -- story-only styles
+
 import "./DropdownMenu.story.styles.css";
 
 type StoryType = StoryObj<typeof DropdownMenu>;

package/src/components/DropdownMenu/Item.tsx

@@ -39,12 +39,9 @@ const Item = ({ ref, ...props }: ItemProps) => {
             (child.props as { className?: string }).className,
             classes,
           );
-          return cloneElement(
-            child as ReactElement,
-            {
-              className: childClasses,
-            } as { className: string },
-          );
+          return cloneElement(child as ReactElement<{ className?: string }>, {
+            className: childClasses,
+          });
         }
 
         return <span className={classes}>{child}</span>;

package/src/components/Grid/Grid.stories.tsx

@@ -6,7 +6,7 @@ import { Box } from "../Box";
 import { Flex } from "../Flex";
 import type { GridItem } from "./Item";
 import { sizeOptions } from "../../utils";
-// eslint-disable-next-line no-restricted-imports -- story-only styles
+
 import "./Grid.story.styles.css";
 
 type StoryType = StoryObj<typeof Grid>;

package/src/components/Popover/Arrow.tsx

@@ -0,0 +1,25 @@
+import type { CSSProperties, Ref } from "react";
+
+interface ArrowProps {
+  ref?: Ref<SVGSVGElement>;
+  width?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export const Arrow = ({ ref, width = 20, className, style }: ArrowProps) => {
+  const height = width / 2;
+  return (
+    <svg
+      ref={ref}
+      className={className}
+      aria-hidden="true"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      style={style}
+    >
+      <path d={`M0,0 H${width} L${width / 2},${height} Z`} />
+    </svg>
+  );
+};