@coopdigital/react 1.10.1 → 1.11.0

package/dist/components/icons/TickAltFilledIcon.js

@@ -14,7 +14,7 @@ const TickAltFilledIcon = ({ alt, className, fill, id, ref, ...props }) => {
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { clipRule: "evenodd", d: "M16 30c7.732 0 14-6.268 14-14S23.732 2 16 2 2 8.268 2 16s6.268 14 14 14m5.707-17.707a1 1 0 0 0-1.414 0L14 18.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7a1 1 0 0 0 0-1.414", fillRule: "evenodd" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { "clip-rule": "evenodd", d: "M16 30c7.732 0 14-6.268 14-14S23.732 2 16 2 2 8.268 2 16s6.268 14 14 14m5.707-17.707a1 1 0 0 0-1.414 0L14 18.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7a1 1 0 0 0 0-1.414", "fill-rule": "evenodd" })] }));
 };
 
 export { TickAltFilledIcon };

package/dist/components/icons/TickAltIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const TickAltIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const TickAltIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/TickIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const TickIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const TickIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/TruckIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const TruckIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const TruckIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/UserWipeIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const UserWipeIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const UserWipeIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/VoucherFilledIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const VoucherFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const VoucherFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/VoucherIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const VoucherIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const VoucherIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/WarningCircleFilledIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const WarningCircleFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const WarningCircleFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/WarningCircleFilledIcon.js

@@ -14,7 +14,7 @@ const WarningCircleFilledIcon = ({ alt, className, fill, id, ref, ...props }) =>
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { clipRule: "evenodd", d: "M16 2c7.732 0 14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2m0 18a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m0-11.5a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 3 0v-6A1.5 1.5 0 0 0 16 8.5", fillRule: "evenodd" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { "clip-rule": "evenodd", d: "M16 2c7.732 0 14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2m0 18a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m0-11.5a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 3 0v-6A1.5 1.5 0 0 0 16 8.5", "fill-rule": "evenodd" })] }));
 };
 
 export { WarningCircleFilledIcon };

package/dist/components/icons/WarningCircleIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const WarningCircleIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const WarningCircleIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/WarningCircleIcon.js

@@ -14,7 +14,7 @@ const WarningCircleIcon = ({ alt, className, fill, id, ref, ...props }) => {
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { d: "M16 17.5a1.5 1.5 0 0 1-1.5-1.5v-6a1.5 1.5 0 0 1 3 0v6a1.5 1.5 0 0 1-1.5 1.5M16 23a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" }), jsx("path", { clipRule: "evenodd", d: "M16 30C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14m0-2c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12", fillRule: "evenodd" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { d: "M16 17.5a1.5 1.5 0 0 1-1.5-1.5v-6a1.5 1.5 0 0 1 3 0v6a1.5 1.5 0 0 1-1.5 1.5M16 23a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" }), jsx("path", { "clip-rule": "evenodd", d: "M16 30C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14m0-2c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12", "fill-rule": "evenodd" })] }));
 };
 
 export { WarningCircleIcon };

package/dist/components/icons/WarningFilledIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const WarningFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const WarningFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/WarningIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const WarningIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const WarningIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/WifiIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const WifiIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const WifiIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/components/icons/WriteIcon.d.ts

@@ -1,6 +1,6 @@
-import { type SVGProps } from "react";
+import type { JSX, SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const WriteIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export declare const WriteIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
 export {};

package/dist/hooks/useSlots.js

@@ -3,7 +3,7 @@ import React from 'react';
 function isKey(x, k) {
     return k in x;
 }
-// oxlint-disable-next-line typecscript/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 function isLazy(type) {
     return typeof type === "object" && type !== null && "_payload" in type && "_init" in type;
 }

package/dist/types/index.d.ts

@@ -13,4 +13,4 @@ export interface LazyComponent<T extends React.ComponentType<any>> {
     _payload: Promise<LazyPayload<T>> | LazyPayload<T>;
     $$typeof: typeof REACT_LAZY_TYPE;
 }
-export declare const REACT_LAZY_TYPE: unique symbol;
+export declare const REACT_LAZY_TYPE: any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -64,10 +64,10 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.12.1",
     "@playwright/test": "^1.61.1",
-    "@storybook/addon-a11y": "^10.4.6",
-    "@storybook/addon-docs": "^10.4.6",
-    "@storybook/addon-onboarding": "^10.4.6",
-    "@storybook/react-vite": "^10.4.6",
+    "@storybook/addon-a11y": "^10.5.2",
+    "@storybook/addon-docs": "^10.5.2",
+    "@storybook/addon-onboarding": "^10.5.2",
+    "@storybook/react-vite": "^10.5.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.17",
@@ -76,7 +76,7 @@
     "react-dom": "^19.2.7",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.4.6",
+    "storybook": "^10.5.2",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -100,12 +100,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.7.0",
+    "@coopdigital/styles": "^1.8.0",
     "@radix-ui/react-popover": "^1.1.17",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "7f50804d76c04f60394d3ca9d21b0f282180cea5"
+  "gitHead": "ab83f9ddaad7b9c225b945afa6f728ad403f8818"
 }

package/src/components/Card/Card.tsx

@@ -157,7 +157,7 @@ const CardBody = ({ children }: CardBodyProps): JSX.Element => {
   return <>{children}</>
 }
 
-const CardImage = (props: CardImageProps) => {
+const CardImage = (props: CardImageProps): JSX.Element => {
   return <Image {...{ ...props, crop: props.crop ?? "wide" }} />
 }
 

package/src/components/DatePicker/DatePicker.tsx

@@ -23,11 +23,11 @@ import type {
   TDateSingle,
 } from "./datepicker-utils"
 
-import Button from "../Button"
+import { Button } from "../Button"
 import { useField } from "../Field/Field.context"
 import { CalendarIcon, CrossIcon, TickIcon } from "../icons"
-import Popover from "../Popover"
-import TextInput from "../TextInput"
+import { Popover } from "../Popover"
+import { TextInput } from "../TextInput"
 import {
   getDateValues,
   getDefaultMonth,
@@ -338,7 +338,7 @@ const DatePicker = ({
             // jsx-ally throws here because we set autoFocus, but this
             // is not a standard element. Daypicker uses this value to
             // focus the day rather than the nav when it renders.
-            // oxlint-disable-next-line jsx-a11y/no-autofocus
+            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             captionLayout="dropdown"
             //defaultMonth={defaultMonth}

package/src/components/DatePicker/datepicker-utils.ts

@@ -247,7 +247,12 @@ export function getRangeDate(date: DateRange | DateBase, df: string, now: Date):
   return { state: { input }, validated: false }
 }
 
-export const getDateValues = (mode: Mode, selected: DateType, dateFormat: string, now: Date) => {
+export const getDateValues = (
+  mode: Mode,
+  selected: DateType,
+  dateFormat: string,
+  now: Date
+): RDateSingle | RDateMultiple | RDateRange | undefined => {
   if (isSingle(mode, selected)) return getSingleDate(selected, dateFormat, now)
   else if (isMultiple(mode, selected)) return getMultipleDate(selected, dateFormat, now)
   else if (isRange(mode, selected)) return getRangeDate(selected, dateFormat, now)

package/src/components/Expandable/Expandable.tsx

@@ -1,6 +1,6 @@
 import type { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react"
 
-import { clsx } from "clsx"
+import clsx from "clsx"
 
 import { useSlots } from "../../hooks/useSlots"
 import { hasUserBg } from "../../utils"
@@ -54,7 +54,11 @@ const Expandable = ({ children, className, ref, ...props }: ExpandableProps): JS
   )
 }
 
-const ExpandableSummary = ({ children, className, ...props }: ExpandableSummaryProps) => {
+const ExpandableSummary = ({
+  children,
+  className,
+  ...props
+}: ExpandableSummaryProps): JSX.Element => {
   return (
     <summary {...props} className={className}>
       {children}
@@ -63,7 +67,11 @@ const ExpandableSummary = ({ children, className, ...props }: ExpandableSummaryP
   )
 }
 
-const ExpandableContent = ({ children, className, ...props }: ExpandableContentProps) => {
+const ExpandableContent = ({
+  children,
+  className,
+  ...props
+}: ExpandableContentProps): JSX.Element => {
   return (
     <div className={clsx("coop-expandable--content", className)} {...props}>
       {children}

package/src/components/Field/Field.tsx

@@ -1,5 +1,5 @@
 "use client"
-import type { HTMLAttributes, Ref } from "react"
+import type { HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
@@ -46,7 +46,7 @@ const Field = ({
   hideErrorBar = false,
   ref,
   ...props
-}: FieldProps) => {
+}: FieldProps): JSX.Element => {
   const slots = { ...useSlots(componentSlots, children) }
   const hasMarkers = !!(slots.FieldLabel ?? slots.FieldError ?? slots.FieldHint)
 
@@ -119,9 +119,9 @@ const Field = ({
   )
 }
 
-const FieldLabel = (props: LabelProps) => <BaseLabel {...props} />
-const FieldHint = (props: HintProps) => <BaseHint {...props} />
-const FieldError = (props: ErrorProps) => <BaseError {...props} />
+const FieldLabel = (props: LabelProps): JSX.Element => <BaseLabel {...props} />
+const FieldHint = (props: HintProps): JSX.Element => <BaseHint {...props} />
+const FieldError = (props: ErrorProps): JSX.Element => <BaseError {...props} />
 
 Field.slot = { name: "Field" }
 FieldLabel.slot = { name: "FieldLabel" }

package/src/components/FieldMarkers/Label.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { LabelHTMLAttributes, Ref } from "react"
+import { JSX, LabelHTMLAttributes, Ref } from "react"
 
 import { useField } from "../Field/Field.context"
 
@@ -14,7 +14,13 @@ export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   ref?: Ref<HTMLLabelElement>
 }
 
-export const Label = ({ children, className, isVisible = true, ref, ...props }: LabelProps) => {
+export const Label = ({
+  children,
+  className,
+  isVisible = true,
+  ref,
+  ...props
+}: LabelProps): JSX.Element => {
   const field = useField()
   const componentProps = {
     className: clsx("coop-field-label", !isVisible && "sr-only", className),

package/src/components/FieldMarkers/Legend.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { HTMLAttributes, Ref } from "react"
+import { HTMLAttributes, JSX, Ref } from "react"
 
 export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
   /** **(Optional)** Main legend for the fieldset. Accepts any valid JSX or string. */
@@ -12,7 +12,13 @@ export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
   ref?: Ref<HTMLLegendElement>
 }
 
-export const Legend = ({ children, className, isVisible = true, ref, ...props }: LegendProps) => {
+export const Legend = ({
+  children,
+  className,
+  isVisible = true,
+  ref,
+  ...props
+}: LegendProps): JSX.Element => {
   const componentProps = {
     "aria-hidden": true,
     className: clsx("coop-field-label", !isVisible && "sr-only", className),

package/src/components/Fieldset/Fieldset.tsx

@@ -79,9 +79,9 @@ const FieldsetFields = ({
   return <div {...componentProps}>{children}</div>
 }
 
-const FieldsetLegend = (props: LegendProps) => <BaseLegend {...props} />
-const FieldsetHint = (props: HintProps) => <BaseHint {...props} />
-const FieldsetError = (props: ErrorProps) => <BaseError {...props} />
+const FieldsetLegend = (props: LegendProps): JSX.Element => <BaseLegend {...props} />
+const FieldsetHint = (props: HintProps): JSX.Element => <BaseHint {...props} />
+const FieldsetError = (props: ErrorProps): JSX.Element => <BaseError {...props} />
 
 Fieldset.slot = { name: "Fieldset" }
 FieldsetFields.slot = { name: "FieldsetField" }

package/src/components/Logo/Logo.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react"
+import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 export interface LogoProps extends SVGProps<SVGSVGElement> {
@@ -25,7 +25,7 @@ export const Logo = ({
   ref,
   width,
   ...props
-}: LogoProps) => {
+}: LogoProps): JSX.Element => {
   const componentProps = {
     alt,
     className: clsx("coop-logo", className),

package/src/components/Pill/Pill.tsx

@@ -50,7 +50,7 @@ const Pill = ({ as, children, className, href, ref, size, ...props }: PillProps)
   return React.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children)
 }
 
-const PillBadge = ({ children, className }: PillBadgeProps) => {
+const PillBadge = ({ children, className }: PillBadgeProps): JSX.Element => {
   return (
     <span className={clsx("coop-pill--badge", !hasUserBg(className) && "bg-red", className)}>
       {children}

package/src/components/RootSVG/RootSVG.tsx

@@ -1,4 +1,5 @@
-const RootSVG = () => {
+import { JSX } from "react"
+const RootSVG = (): JSX.Element => {
   return (
     <svg
       height="0"

package/src/components/Searchbox/Searchbox.tsx

@@ -118,7 +118,7 @@ const Searchbox = ({
   )
 }
 
-const SearchboxButton = ({ children, ...props }: ButtonProps) => {
+const SearchboxButton = ({ children, ...props }: ButtonProps): JSX.Element => {
   // const uid = useId(id)
   const searchbox = useSearchbox()
   const buttonProps = {
@@ -141,7 +141,7 @@ const SearchboxButton = ({ children, ...props }: ButtonProps) => {
 
 SearchboxButton.displayName = "Searchbox.Button"
 
-const SearchboxInput = (props: TextInputProps) => {
+const SearchboxInput = (props: TextInputProps): JSX.Element => {
   const searchbox = useSearchbox()
 
   return (

package/src/components/Signpost/Signpost.tsx

@@ -8,7 +8,7 @@ import { Image, ImageProps } from "../Image"
 
 export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify a custom element to override default `a`. */
-  // oxlint-disable-next-line typecscript/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** Main content inside the component. It can be any valid JSX or string. */
   children: React.ReactNode

package/src/components/Tag/Tag.tsx

@@ -7,7 +7,7 @@ import { hasUserBg } from "../../../src/utils"
 
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */
-  // oxlint-disable-next-line typecscript/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode

package/src/components/icons/AccountCircleFilledIcon.tsx

@@ -1,5 +1,6 @@
+import type { JSX, SVGProps } from "react"
+
 import clsx from "clsx"
-import { type SVGProps } from "react"
 
 import { useId } from "../../hooks/useId"
 
@@ -7,7 +8,14 @@ interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AccountCircleFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+export const AccountCircleFilledIcon = ({
+  alt,
+  className,
+  fill,
+  id,
+  ref,
+  ...props
+}: IconProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     "aria-labelledby": alt ? uid + "__title" : undefined,

package/src/components/icons/AccountCircleIcon.tsx

@@ -1,5 +1,6 @@
+import type { JSX, SVGProps } from "react"
+
 import clsx from "clsx"
-import { type SVGProps } from "react"
 
 import { useId } from "../../hooks/useId"
 
@@ -7,7 +8,14 @@ interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AccountCircleIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+export const AccountCircleIcon = ({
+  alt,
+  className,
+  fill,
+  id,
+  ref,
+  ...props
+}: IconProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     "aria-labelledby": alt ? uid + "__title" : undefined,

package/src/components/icons/AccountFilledIcon.tsx

@@ -1,5 +1,6 @@
+import type { JSX, SVGProps } from "react"
+
 import clsx from "clsx"
-import { type SVGProps } from "react"
 
 import { useId } from "../../hooks/useId"
 
@@ -7,7 +8,14 @@ interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AccountFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+export const AccountFilledIcon = ({
+  alt,
+  className,
+  fill,
+  id,
+  ref,
+  ...props
+}: IconProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     "aria-labelledby": alt ? uid + "__title" : undefined,

package/src/components/icons/AccountIcon.tsx

@@ -1,5 +1,6 @@
+import type { JSX, SVGProps } from "react"
+
 import clsx from "clsx"
-import { type SVGProps } from "react"
 
 import { useId } from "../../hooks/useId"
 
@@ -7,7 +8,14 @@ interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AccountIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+export const AccountIcon = ({
+  alt,
+  className,
+  fill,
+  id,
+  ref,
+  ...props
+}: IconProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     "aria-labelledby": alt ? uid + "__title" : undefined,

package/src/components/icons/AddIcon.tsx

@@ -1,5 +1,6 @@
+import type { JSX, SVGProps } from "react"
+
 import clsx from "clsx"
-import { type SVGProps } from "react"
 
 import { useId } from "../../hooks/useId"
 
@@ -7,7 +8,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AddIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+export const AddIcon = ({ alt, className, fill, id, ref, ...props }: IconProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     "aria-labelledby": alt ? uid + "__title" : undefined,

package/src/components/icons/AppsFilledIcon.tsx

@@ -1,5 +1,6 @@
+import type { JSX, SVGProps } from "react"
+
 import clsx from "clsx"
-import { type SVGProps } from "react"
 
 import { useId } from "../../hooks/useId"
 
@@ -7,7 +8,14 @@ interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AppsFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+export const AppsFilledIcon = ({
+  alt,
+  className,
+  fill,
+  id,
+  ref,
+  ...props
+}: IconProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     "aria-labelledby": alt ? uid + "__title" : undefined,

package/src/components/icons/AppsIcon.tsx

@@ -1,5 +1,6 @@
+import type { JSX, SVGProps } from "react"
+
 import clsx from "clsx"
-import { type SVGProps } from "react"
 
 import { useId } from "../../hooks/useId"
 
@@ -7,7 +8,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AppsIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+export const AppsIcon = ({ alt, className, fill, id, ref, ...props }: IconProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     "aria-labelledby": alt ? uid + "__title" : undefined,