@coopdigital/react 0.53.0 → 0.55.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -58,22 +58,22 @@
   "license": "MIT",
   "description": "React components for the Experience Library design system",
   "devDependencies": {
-    "@axe-core/playwright": "^4.11.0",
+    "@axe-core/playwright": "^4.11.1",
     "@playwright/test": "^1.58.1",
-    "@storybook/addon-a11y": "^10.2.6",
-    "@storybook/addon-docs": "^10.2.6",
-    "@storybook/addon-onboarding": "^10.2.6",
-    "@storybook/react-vite": "^10.2.6",
+    "@storybook/addon-a11y": "^10.2.7",
+    "@storybook/addon-docs": "^10.2.7",
+    "@storybook/addon-onboarding": "^10.2.7",
+    "@storybook/react-vite": "^10.2.7",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.5",
-    "storybook": "^10.2.6",
-    "storybook-addon-tag-badges": "^3.0.5"
+    "storybook": "^10.2.7",
+    "storybook-addon-tag-badges": "^3.0.6"
   },
   "peerDependencies": {
     "react": "^19.1.0",
@@ -83,10 +83,10 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.44.0",
+    "@coopdigital/styles": "^0.46.0",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "react-day-picker": "^9.12.0"
   },
-  "gitHead": "d8324f6ee7c544c37f752b5e6eeb67cffff20237"
+  "gitHead": "a893acdaff1f6dc817bb01d77988b1bd9dd85ad1"
 }

package/src/components/Button/Button.tsx

@@ -5,6 +5,7 @@ import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
+import { hasUserBg } from "../../utils"
 import { LoadingIcon } from "../icons"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -32,16 +33,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify the Button size. */
   size?: "sm" | "md" | "lg"
   /** **(Optional)** Specify the Button variant. */
-  variant?:
-    | "green"
-    | "blue"
-    | "white"
-    | "grey"
-    | "green-ghost"
-    | "blue-ghost"
-    | "white-ghost"
-    | "grey-ghost"
-    | "text"
+  variant?: "solid" | "ghost" | "text"
 }
 
 type OnClickHandler =
@@ -60,7 +52,7 @@ export const Button = ({
   onClick,
   ref,
   size = "md",
-  variant = "green",
+  variant = "solid",
   ...props
 }: ButtonProps): JSX.Element => {
   const element: ButtonProps["as"] = as ?? (href ? "a" : "button")
@@ -85,7 +77,11 @@ export const Button = ({
   const componentProps = {
     "aria-disabled": isDisabled ? true : undefined,
     "aria-live": "assertive" as keyof ButtonHTMLAttributes<HTMLButtonElement>["aria-live"],
-    className: clsx(variant == "text" ? "coop-link" : "coop-button", className),
+    className: clsx(
+      variant == "text" ? "coop-link" : "coop-button",
+      !hasUserBg(className) && variant === "solid" && "bg-teal",
+      className
+    ),
     "data-loading": isLoading || isPending ? true : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     "data-variant": variant !== "text" ? variant : undefined,
@@ -99,7 +95,7 @@ export const Button = ({
     isPending || isLoading ? (
       <>
         {loadingText}
-        <LoadingIcon />
+        <LoadingIcon stroke={"currentColor"} strokeWidth={"1px"} />
       </>
     ) : (
       children

package/src/components/Card/Card.tsx

@@ -4,6 +4,7 @@ import clsx from "clsx"
 import React from "react"
 
 import { useSlots } from "../../hooks/useSlots"
+import { hasUserBg } from "../../utils"
 import { ChevronRightIcon } from "../icons/ChevronRightIcon"
 import { Image, ImageProps } from "../Image"
 
@@ -99,7 +100,7 @@ export const Card = ({
   const hasLinkWrapper = href && !slots.CardHeading
 
   const componentProps = {
-    className: clsx("coop-card", className),
+    className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
     "data-image-pos": imagePosition,
     "data-orientation": orientation !== "vertical" ? orientation : undefined,
     ...props,

package/src/components/DatePicker/DatePicker.tsx

@@ -1,5 +1,5 @@
 "use client"
-import type { FormEvent, InputHTMLAttributes, JSX, Ref } from "react"
+import type { ChangeEvent, InputHTMLAttributes, JSX, Ref } from "react"
 import type {
   DayPickerProps,
   Formatters,
@@ -24,7 +24,7 @@ import type {
 
 import { useId } from "../../hooks/useId"
 import Button from "../Button"
-import { CloseIcon, TickIcon } from "../icons"
+import { CalendarIcon, CrossIcon, TickIcon } from "../icons"
 import Popover from "../Popover"
 import TextInput from "../TextInput"
 import {
@@ -74,12 +74,12 @@ export interface DatePickerProps extends Omit<
   error?: boolean
   /** **(Optional)** Specify the Date Picker id. Will be auto-generated if not set. */
   id?: string
-  /** **(Optional)** Specify the initial month view for the picker.
+  /** **(Optional)** Specify the initial month view for the picker. Combine with `initialSelected` to pre-select a date.
    *
    * Default: today.
    */
   initialDate?: Date | DateRange
-
+  /** **(Optional)** Specify whether the initial date should be pre-selected. */
   initialSelected?: boolean
 
   /** **(Optional)** Specify the picker mode. */
@@ -230,7 +230,7 @@ export const DatePicker = ({
   )
 
   const updateFromInput = useCallback(
-    (e: FormEvent<HTMLInputElement>) => {
+    (e: ChangeEvent<HTMLInputElement>) => {
       if (shouldSkipParsing(e.currentTarget.value)) {
         setState({
           message: undefined,
@@ -299,17 +299,18 @@ export const DatePicker = ({
             ref={ref}
             required={required}
             size={size}
+            suffix={
+              <Popover.Trigger aria-label="Choose date" className="coop-datepicker-trigger">
+                <CalendarIcon width={24} />
+              </Popover.Trigger>
+            }
+            suffixInline={true}
             value={state?.[mode]?.input ?? ""}
           />
-          <Popover.Trigger asChild>
-            <Button className="coop-datepicker-button" disabled={disabled} size={size}>
-              Select
-            </Button>
-          </Popover.Trigger>
         </Popover.Anchor>
         <Popover.Content
           aria-label="Date picker"
-          className="coop-datepicker-calendar"
+          className="coop-datepicker-calendar bg-white"
           collisionPadding={16}
           sideOffset={4}
         >
@@ -330,8 +331,8 @@ export const DatePicker = ({
             {...calendarProps[mode]}
           />
           <div className="coop-datepicker-actions">
-            <Button aria-label="Cancel" onClick={resetState} size="sm" variant="grey">
-              Clear <CloseIcon stroke="black" strokeWidth={1} />
+            <Button aria-label="Cancel" className="bg-tint-grey" onClick={resetState} size="sm">
+              Clear <CrossIcon stroke="black" strokeWidth={1} />
             </Button>
             <Popover.Close asChild>
               <Button aria-label="Accept" size="sm">

package/src/components/Expandable/Expandable.tsx

@@ -3,7 +3,7 @@ import type { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react"
 import { clsx } from "clsx"
 
 import { useSlots } from "../../hooks/useSlots"
-import { bgClassToColor, hasUserBg } from "../../utils"
+import { hasUserBg } from "../../utils"
 import { ChevronDownIcon } from "../icons"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
@@ -47,9 +47,9 @@ export const Expandable = ({
     ...props,
   }
 
-  componentProps.style = {
-    "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
-  }
+  // componentProps.style = {
+  //   "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
+  // }
 
   return (
     <details {...componentProps} ref={ref}>
@@ -63,12 +63,7 @@ const ExpandableSummary = ({ children, className, ...props }: ExpandableSummaryP
   return (
     <summary {...props} className={className}>
       {children}
-      <ChevronDownIcon
-        className="coop-expandable--icon"
-        stroke="currentColor"
-        strokeWidth={2}
-        width="12"
-      />
+      <ChevronDownIcon className="coop-expandable--icon" width="20" />
     </summary>
   )
 }

package/src/components/Pill/Pill.tsx

@@ -62,7 +62,7 @@ export const Pill = ({
 
 const PillBadge = ({ children, className }: PillBadgeProps) => {
   return (
-    <span className={clsx("coop-pill--badge", !hasUserBg(className) && "bg-offer-red", className)}>
+    <span className={clsx("coop-pill--badge", !hasUserBg(className) && "bg-red", className)}>
       {children}
     </span>
   )

package/src/components/Searchbox/Searchbox.tsx

@@ -1,22 +1,20 @@
 "use client"
 
-import type { InputHTMLAttributes, JSX, Ref } from "react"
+import type { FormHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
 import { useId } from "../../hooks/useId"
+import { useSlots } from "../../hooks/useSlots"
 import { StandardSizes } from "../../types"
+import { hasUserBorder } from "../../utils"
 import { Button, type ButtonProps } from "../Button"
 import Field from "../Field"
-import { Label as FieldLabel } from "../FieldMarkers/Label"
 import { SearchIcon } from "../icons"
 import TextInput, { TextInputProps } from "../TextInput"
 
-export interface SearchboxProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "size" | "type"
-> {
+export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
   /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
   action?: string
   /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
@@ -32,7 +30,7 @@ export interface SearchboxProps extends Omit<
   /** **(Optional)** Specify the TextInput name, also used as the URL search parameter. Defaults to `query`. */
   name?: string
   /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the Searchbox will be in a pending state until the promise is resolved. */
-  onSubmit?: React.FormEventHandler<HTMLElement> | undefined
+  onSubmit?: React.SubmitEventHandler<HTMLElement> | undefined
   /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
   placeholder?: string
   /** **(Optional)** Specify a custom React ref for this component. */
@@ -40,46 +38,40 @@ export interface SearchboxProps extends Omit<
   /** **(Optional)** Specify the Searchbox size. */
   size?: StandardSizes
   /** **(Optional)** Specify the Searchbox variant. */
-  variant?:
-    | "green"
-    | "blue"
-    | "white"
-    | "grey"
-    | "green-ghost"
-    | "blue-ghost"
-    | "white-ghost"
-    | "grey-ghost"
+  variant?: "solid" | "ghost"
 }
 
-const defaultButtonProps: SearchboxProps["button"] = {
-  label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
-  loadingText: "",
+const componentSlots = {
+  SearchboxButton: null,
+  SearchboxInput: null,
 }
 
+const defaultButtonText = React.createElement(SearchIcon, {
+  alt: "Search",
+  stroke: "currentColor",
+  width: 24,
+})
+
 export const Searchbox = ({
   action,
-  "aria-placeholder": ariaPlaceholder,
-  autoCapitalize = "off",
-  autoComplete = "off",
-  button = defaultButtonProps,
+  children,
   className,
-
   id,
   label,
   labelVisible = false,
-  name = "query",
   onSubmit,
-  placeholder,
   ref,
   size = "md",
-  variant = "green",
+  variant = "solid",
   ...props
 }: SearchboxProps): JSX.Element => {
+  const slots = useSlots(componentSlots, children)
+
   const [isPending, setIsPending] = useState(false)
   const uid = useId(id)
 
   const handleSubmit = useCallback(
-    async (event: React.FormEvent<HTMLFormElement>) => {
+    async (event: React.SubmitEvent<HTMLFormElement>) => {
       event.preventDefault()
 
       if (isPending || !onSubmit) return
@@ -95,51 +87,69 @@ export const Searchbox = ({
     [onSubmit, isPending]
   )
 
+  let borderClass = ""
+  if (!hasUserBorder(className)) {
+    borderClass = variant === "ghost" ? "border-teal" : "border-grey"
+  }
+
   const formProps = {
     action: action ?? undefined,
-    className: clsx("coop-searchbox", className),
+    className: clsx("coop-searchbox", borderClass, className),
     "data-size": size && size !== "md" ? size : undefined,
-    "data-variant": variant.length && variant !== "green" ? variant : undefined,
-    id: uid,
+    "data-variant": variant.length && variant !== "solid" ? variant : undefined,
+    id: uid + "-form",
     onSubmit: onSubmit ? handleSubmit : undefined,
+    ...props,
   }
 
-  const buttonProps: ButtonProps = {
-    className: button?.className,
-    isLoading: isPending,
-    loadingText: button?.loadingText ?? "",
-    size,
-    variant,
-  }
+  slots.SearchboxButton = React.cloneElement(
+    slots.SearchboxButton as React.ReactElement<ButtonProps>,
+    {
+      isLoading: isPending,
+      size,
+    }
+  )
 
-  const inputProps: TextInputProps = {
-    "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
-    autoCapitalize,
-    autoComplete,
-    id: uid + "--input",
-    name,
-    placeholder,
-    size,
-    type: "search",
-    ...props,
-  }
+  slots.SearchboxInput = React.cloneElement(
+    slots.SearchboxInput as React.ReactElement<TextInputProps>,
+    {
+      autoCapitalize: "off",
+      id: uid,
+      size,
+    }
+  )
 
   const labelProps = {
-    htmlFor: uid + "--input",
+    htmlFor: uid,
     isVisible: labelVisible,
   }
 
   return (
     <form {...formProps} ref={ref}>
-      {label && <FieldLabel {...labelProps}>{label}</FieldLabel>}
-      <div className="coop-searchbox--inner">
-        <Field>
-          <TextInput {...inputProps} />
-        </Field>
-        <Button {...buttonProps}>{button.label}</Button>
+      {label && <Field.Label {...labelProps}>{label}</Field.Label>}
+      <div className={clsx("coop-searchbox--inner")}>
+        <Field>{slots.SearchboxInput}</Field>
+        {slots.SearchboxButton}
       </div>
     </form>
   )
 }
 
+const SearchboxButton = ({ children, ...props }: ButtonProps) => {
+  const buttonProps = {
+    children: children ?? defaultButtonText,
+    ...props,
+  }
+
+  return <Button {...buttonProps} />
+}
+
+const SearchboxInput = (props: TextInputProps) => <TextInput {...props} />
+
+Searchbox.Button = SearchboxButton
+Searchbox.Input = SearchboxInput
+
+SearchboxButton.config = { name: "SearchboxButton" }
+SearchboxInput.config = { isField: true, name: "SearchboxInput" }
+
 export default Searchbox

package/src/components/Squircle/Squircle.tsx

@@ -22,7 +22,7 @@ export const Squircle = ({
   ...props
 }: SquircleProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer-red", className),
+    className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
     "data-size": size.length && size !== "lg" ? size : undefined,
     ...props,
   }

package/src/components/TextInput/TextInput.tsx

@@ -23,12 +23,16 @@ export interface TextInputProps extends Omit<
   placeholder?: string
   /** **(Optional)** Specify the prefix. It can be any valid JSX or string. */
   prefix?: React.ReactNode
+  /** **(Optional)** Specify whether the prefix should be rendered inside the input. */
+  prefixInline?: boolean
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLInputElement>
   /** **(Optional)** Specify the TextInput size. */
   size?: StandardSizes
   /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
   suffix?: React.ReactNode
+  /** **(Optional)** Specify whether the suffix should be rendered inside the input. */
+  suffixInline?: boolean
   /** **(Optional)** Specify the TextInput type. */
   type?:
     | "text"
@@ -54,9 +58,11 @@ export const TextInput = ({
   name,
   placeholder,
   prefix,
+  prefixInline = false,
   ref,
   size = "md",
   suffix,
+  suffixInline = false,
   type = "text",
   ...props
 }: TextInputProps): JSX.Element => {
@@ -74,12 +80,22 @@ export const TextInput = ({
     type,
     ...props,
   }
+
+  const prefixProps = prefix
+    ? { className: "coop-text-input--prefix", "data-inline": prefixInline || undefined }
+    : {}
+
+  const suffixProps = suffix
+    ? { className: "coop-text-input--suffix", "data-inline": suffixInline || undefined }
+    : {}
+
   //const formItemProps = { "aria-disabled": disabled ? true : undefined }
+
   return (
     <div className="coop-text-input-wrapper">
-      {prefix && <span className="coop-text-input--prefix">{prefix}</span>}
+      {prefix && <span {...prefixProps}>{prefix}</span>}
       <input {...componentProps} ref={ref} />
-      {suffix && <span className="coop-text-input--suffix">{suffix}</span>}
+      {suffix && <span {...suffixProps}>{suffix}</span>}
     </div>
   )
 }

package/src/components/icons/AccountCircleFilledIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const AccountCircleFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "account-circle-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M16 2c7.732 0 14 6.268 14 14 0 6.34-4.216 11.695-9.997 13.417l-.034.012-.029.008a14 14 0 0 1-3.453.553l-.037.002h-.022q-.211.007-.424.007L16 30 16 29.999V30q-.216 0-.432-.008h-.017l-.042-.003c-1.19-.04-2.34-.229-3.437-.549l-.035-.01-.075-.023a14 14 0 0 1-1.96-.755l-.06-.027-.011-.006C5.238 26.36 2 21.557 2 16 2 8.268 8.268 2 16 2m0 2C9.373 4 4 9.373 4 16a11.95 11.95 0 0 0 2.256 6.997 12.03 12.03 0 0 1 5.92-4.374 6 6 0 1 1 7.648 0 12.03 12.03 0 0 1 5.918 4.374A11.95 11.95 0 0 0 28 16c0-6.627-5.373-12-12-12" />
+    </svg>
+  )
+}

package/src/components/icons/AccountCircleIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const AccountCircleIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "account-circle",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M16 2c7.732 0 14 6.268 14 14 0 6.378-4.265 11.758-10.099 13.447l-.03.01q-.447.127-.904.227l-.038.007q-.126.027-.251.051l-.099.02a14 14 0 0 1-.558.091l-.09.013a13 13 0 0 1-.559.067l-.203.017-.115.01q-.153.011-.306.02l-.033.001a14 14 0 0 1-1.43 0q-.018 0-.034-.002l-.306-.019-.115-.01q-.102-.007-.203-.017l-.225-.025-.087-.01-.245-.03-.093-.014-.236-.037-.1-.016a15 15 0 0 1-.57-.109l-.039-.008a14 14 0 0 1-.903-.227l-.032-.01C6.264 27.757 2 22.377 2 16 2 8.268 8.268 2 16 2m.001 18a9.99 9.99 0 0 0-8.397 4.57A11.95 11.95 0 0 0 16 28c3.27 0 6.23-1.31 8.393-3.43A9.99 9.99 0 0 0 16 20M16 4C9.373 4 4 9.373 4 16a11.95 11.95 0 0 0 2.256 6.997 12.03 12.03 0 0 1 5.92-4.374 6 6 0 1 1 7.648 0 12.03 12.03 0 0 1 5.918 4.374A11.95 11.95 0 0 0 28 16c0-6.627-5.373-12-12-12m0 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8" />
+    </svg>
+  )
+}

package/src/components/icons/AccountFilledIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const AccountFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "account-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M16 2a7 7 0 0 1 4.055 12.703l.075.027a12.03 12.03 0 0 1 7.514 8.36q.063.252.115.51-.117.18-.24.357a14.05 14.05 0 0 1-7.11 5.334A13.9 13.9 0 0 1 16 30c-4.93 0-9.266-2.55-11.76-6.401a12.02 12.02 0 0 1 7.63-8.87l.074-.026A7 7 0 0 1 16 2" />
+    </svg>
+  )
+}

package/src/components/icons/AccountIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const AccountIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "account",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M16 2a7 7 0 0 1 4.055 12.703 12.03 12.03 0 0 1 7.565 8.304l.04.157q.054.216.099.435-.108.166-.22.329l-.075.105-.155.218-.097.13a14 14 0 0 1-.493.623l-.088.101A13.97 13.97 0 0 1 16 30a13.97 13.97 0 0 1-10.565-4.817l-.156-.18q-.085-.103-.169-.207l-.069-.085a13 13 0 0 1-.255-.331l-.097-.13-.155-.218-.074-.105a14 14 0 0 1-.22-.328q.045-.22.098-.436l.04-.157q.041-.165.089-.328.038-.128.078-.254l.066-.21a12 12 0 0 1 .128-.363 12.03 12.03 0 0 1 7.205-7.148A7 7 0 0 1 16 2m0 14c-4.55 0-8.387 3.04-9.598 7.2A11.98 11.98 0 0 0 16 28c3.926 0 7.407-1.887 9.596-4.802C24.385 19.04 20.55 16 16 16m0-12a5 5 0 1 0 0 10 5 5 0 0 0 0-10" />
+    </svg>
+  )
+}

package/src/components/icons/AddIcon.tsx

@@ -13,7 +13,7 @@ export const AddIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "add",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,14 +22,7 @@ export const AddIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M24.7 16.72a1 1 0 0 1-.7.28H8a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1 1 1 0 0 1-.3.72"
-        fill={fill ?? "currentColor"}
-      />
-      <path
-        d="M16.72 24.7a1 1 0 0 1-.72.3 1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v16a1 1 0 0 1-.28.7"
-        fill={fill ?? "currentColor"}
-      />
+      <path d="M15.957 4a1 1 0 0 1 1 1v10H27a1 1 0 1 1 0 2H16.957v10a1 1 0 0 1-2 0V17H5a1 1 0 1 1 0-2h9.957V5a1 1 0 0 1 1-1" />
     </svg>
   )
 }