@coopdigital/react 0.54.0 → 0.55.0

package/dist/components/icons/WifiIcon.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useId } from '../../hooks/useId.js';
+
+const WifiIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
+    const componentProps = {
+        "aria-labelledby": alt ? uid + "-title" : undefined,
+        className: clsx("coop-icon", className),
+        "data-icon": "wifi",
+        fill: fill !== null && fill !== void 0 ? fill : "currentColor",
+        id: uid,
+        role: alt ? "img" : undefined,
+        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 22a2 2 0 1 1 0 4 2 2 0 0 1 0-4m-7.987-4.836c4.419-4.418 11.583-4.418 16.001 0a1.5 1.5 0 0 1-2.12 2.121 8.316 8.316 0 0 0-11.76 0 1.5 1.5 0 1 1-2.12-2.12m-5.552-5.55c7.485-7.485 19.621-7.485 27.106 0a1.5 1.5 0 0 1-2.122 2.12c-6.314-6.313-16.55-6.313-22.863 0a1.5 1.5 0 0 1-2.121-2.12" })] }));
+};
+
+export { WifiIcon };

package/dist/components/icons/WriteIcon.js

@@ -8,13 +8,13 @@ const WriteIcon = ({ alt, className, fill, id, ref, ...props }) => {
         "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "write",
-        fill: fill !== null && fill !== void 0 ? fill : "none",
+        fill: fill !== null && fill !== void 0 ? fill : "currentColor",
         id: uid,
         role: alt ? "img" : undefined,
         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: "M19.67 10.13 17.9 11.9H7a1 1 0 0 1 0-2h12a1 1 0 0 1 .67.23M14.9 14.9l-2 2H7a1 1 0 0 1 0-2ZM20 15.9a1 1 0 0 1-1 1h-1.87l2-2a1 1 0 0 1 .82.59.85.85 0 0 1 .05.41M19 21.9H7a1 1 0 0 1 0-2h12a1 1 0 1 1 0 2", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M24.08 10v20h-22V6h21.73l1.54-1.54a1.9 1.9 0 0 0-1-.44H2.07a2 2 0 0 0-2 2V30a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V8Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M30.62 3.41 28.5 1.29a1 1 0 0 0-1.42 0L22.38 6l-3.9 3.9-5 5-1.33 1.33a1 1 0 0 0-.27.48v.19l-.6 2.57a.8.8 0 0 0 0 .43 1 1 0 0 0 1.19.77l2.74-.67a.64.64 0 0 0 .29-.13.6.6 0 0 0 .19-.14l2.85-2.86 1.4-1.39L30.62 4.82a1 1 0 0 0 0-1.41M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M31.33 2.7 29.21.58a2.06 2.06 0 0 0-2.83 0L11.44 15.52a2.1 2.1 0 0 0-.54 1l-.09.41-.54 2.34a2.18 2.18 0 0 0 .54 1.87 2 2 0 0 0 1.4.58 1.8 1.8 0 0 0 .46-.05l2.75-.67a2.1 2.1 0 0 0 1-.54L31.33 5.53a2 2 0 0 0 0-2.83M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("path", { d: "M19.67 10.13 17.9 11.9H7a1 1 0 0 1 0-2h12a1 1 0 0 1 .67.23M14.9 14.9l-2 2H7a1 1 0 0 1 0-2ZM20 15.9a1 1 0 0 1-1 1h-1.87l2-2a1 1 0 0 1 .82.59.85.85 0 0 1 .05.41M19 21.9H7a1 1 0 0 1 0-2h12a1 1 0 1 1 0 2" }), jsx("path", { d: "M24.08 10v20h-22V6h21.73l1.54-1.54a1.9 1.9 0 0 0-1-.44H2.07a2 2 0 0 0-2 2V30a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V8Z" }), jsx("path", { d: "M30.62 3.41 28.5 1.29a1 1 0 0 0-1.42 0L22.38 6l-3.9 3.9-5 5-1.33 1.33a1 1 0 0 0-.27.48v.19l-.6 2.57a.8.8 0 0 0 0 .43 1 1 0 0 0 1.19.77l2.74-.67a.64.64 0 0 0 .29-.13.6.6 0 0 0 .19-.14l2.85-2.86 1.4-1.39L30.62 4.82a1 1 0 0 0 0-1.41M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z" }), jsx("path", { d: "M31.33 2.7 29.21.58a2.06 2.06 0 0 0-2.83 0L11.44 15.52a2.1 2.1 0 0 0-.54 1l-.09.41-.54 2.34a2.18 2.18 0 0 0 .54 1.87 2 2 0 0 0 1.4.58 1.8 1.8 0 0 0 .46-.05l2.75-.67a2.1 2.1 0 0 0 1-.54L31.33 5.53a2 2 0 0 0 0-2.83M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z" })] }));
 };
 
 export { WriteIcon };

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

@@ -1,40 +1,107 @@
+export { AccountCircleFilledIcon } from "./AccountCircleFilledIcon";
+export { AccountCircleIcon } from "./AccountCircleIcon";
+export { AccountFilledIcon } from "./AccountFilledIcon";
+export { AccountIcon } from "./AccountIcon";
 export { AddIcon } from "./AddIcon";
+export { AppsFilledIcon } from "./AppsFilledIcon";
+export { AppsIcon } from "./AppsIcon";
 export { ArrowDownIcon } from "./ArrowDownIcon";
 export { ArrowLeftIcon } from "./ArrowLeftIcon";
 export { ArrowRightIcon } from "./ArrowRightIcon";
 export { ArrowUpIcon } from "./ArrowUpIcon";
-export { AvatarAltIcon } from "./AvatarAltIcon";
-export { AvatarIcon } from "./AvatarIcon";
+export { BackspaceFilledIcon } from "./BackspaceFilledIcon";
+export { BackspaceIcon } from "./BackspaceIcon";
+export { BasketFilledIcon } from "./BasketFilledIcon";
 export { BasketIcon } from "./BasketIcon";
+export { BellFilledIcon } from "./BellFilledIcon";
+export { BellIcon } from "./BellIcon";
+export { BroomIcon } from "./BroomIcon";
+export { CalendarFilledIcon } from "./CalendarFilledIcon";
 export { CalendarIcon } from "./CalendarIcon";
+export { CashFilledIcon } from "./CashFilledIcon";
+export { CashIcon } from "./CashIcon";
 export { ChevronDownIcon } from "./ChevronDownIcon";
 export { ChevronLeftIcon } from "./ChevronLeftIcon";
 export { ChevronRightIcon } from "./ChevronRightIcon";
 export { ChevronUpIcon } from "./ChevronUpIcon";
+export { CircleBurgerFilledIcon } from "./CircleBurgerFilledIcon";
+export { CircleBurgerIcon } from "./CircleBurgerIcon";
+export { ClipboardFilledIcon } from "./ClipboardFilledIcon";
+export { ClipboardIcon } from "./ClipboardIcon";
+export { ClockFilledIcon } from "./ClockFilledIcon";
 export { ClockIcon } from "./ClockIcon";
+export { CloseAltFilledIcon } from "./CloseAltFilledIcon";
 export { CloseAltIcon } from "./CloseAltIcon";
-export { CloseIcon } from "./CloseIcon";
-export { CoopCardIcon } from "./CoopCardIcon";
-export { CoopIcon } from "./CoopIcon";
-export { CoopLocationIcon } from "./CoopLocationIcon";
+export { CogIcon } from "./CogIcon";
+export { CommunityFilledIcon } from "./CommunityFilledIcon";
+export { CommunityIcon } from "./CommunityIcon";
+export { ComputerIcon } from "./ComputerIcon";
+export { ContactFilledIcon } from "./ContactFilledIcon";
+export { ContactIcon } from "./ContactIcon";
+export { ContactlessFilledIcon } from "./ContactlessFilledIcon";
+export { ContactlessIcon } from "./ContactlessIcon";
+export { CoopLiveIcon } from "./CoopLiveIcon";
+export { CoopLocationFilledIcon } from "./CoopLocationFilledIcon";
+export { CoopLogoIcon } from "./CoopLogoIcon";
+export { CoopMembershipCardFilledIcon } from "./CoopMembershipCardFilledIcon";
+export { CreditCardFilledIcon } from "./CreditCardFilledIcon";
+export { CreditCardIcon } from "./CreditCardIcon";
+export { CrossIcon } from "./CrossIcon";
+export { DocumentIcon } from "./DocumentIcon";
 export { DownloadIcon } from "./DownloadIcon";
+export { EnterStoreIcon } from "./EnterStoreIcon";
+export { ExitStoreIcon } from "./ExitStoreIcon";
+export { EyeFilledIcon } from "./EyeFilledIcon";
+export { EyeIcon } from "./EyeIcon";
+export { EyeStrikeFilledIcon } from "./EyeStrikeFilledIcon";
+export { EyeStrikeIcon } from "./EyeStrikeIcon";
+export { FeedbackFilledIcon } from "./FeedbackFilledIcon";
+export { FeedbackIcon } from "./FeedbackIcon";
+export { FilterIcon } from "./FilterIcon";
+export { GiftCardFilledIcon } from "./GiftCardFilledIcon";
+export { GiftCardIcon } from "./GiftCardIcon";
+export { GiftFilledIcon } from "./GiftFilledIcon";
+export { GiftIcon } from "./GiftIcon";
+export { HelpFilledIcon } from "./HelpFilledIcon";
+export { HelpIcon } from "./HelpIcon";
+export { HomeFilledIcon } from "./HomeFilledIcon";
 export { HomeIcon } from "./HomeIcon";
-export { InformationIcon } from "./InformationIcon";
+export { HowDoIAssistantIcon } from "./HowDoIAssistantIcon";
+export { InfoIcon } from "./InfoIcon";
+export { KebabIcon } from "./KebabIcon";
 export { LoadingIcon } from "./LoadingIcon";
+export { LocationFilledIcon } from "./LocationFilledIcon";
 export { LocationIcon } from "./LocationIcon";
+export { LogoutIcon } from "./LogoutIcon";
 export { MailIcon } from "./MailIcon";
 export { MenuIcon } from "./MenuIcon";
 export { MessageIcon } from "./MessageIcon";
 export { MinusIcon } from "./MinusIcon";
+export { NotesFilledIcon } from "./NotesFilledIcon";
+export { NotesIcon } from "./NotesIcon";
 export { OpenNewIcon } from "./OpenNewIcon";
+export { OwnBagIcon } from "./OwnBagIcon";
+export { PadlockIcon } from "./PadlockIcon";
 export { PencilIcon } from "./PencilIcon";
 export { PhoneIcon } from "./PhoneIcon";
-export { QuestionIcon } from "./QuestionIcon";
+export { PowerIcon } from "./PowerIcon";
+export { SaveFilledIcon } from "./SaveFilledIcon";
+export { SaveIcon } from "./SaveIcon";
 export { ScooterIcon } from "./ScooterIcon";
+export { SearchFilledIcon } from "./SearchFilledIcon";
 export { SearchIcon } from "./SearchIcon";
-export { SettingsIcon } from "./SettingsIcon";
+export { SendIcon } from "./SendIcon";
+export { SpannerIcon } from "./SpannerIcon";
+export { StarFilledIcon } from "./StarFilledIcon";
+export { StarIcon } from "./StarIcon";
+export { TickAltFilledIcon } from "./TickAltFilledIcon";
 export { TickAltIcon } from "./TickAltIcon";
 export { TickIcon } from "./TickIcon";
-export { VanIcon } from "./VanIcon";
+export { TruckIcon } from "./TruckIcon";
+export { UserWipeIcon } from "./UserWipeIcon";
+export { VoucherFilledIcon } from "./VoucherFilledIcon";
+export { VoucherIcon } from "./VoucherIcon";
+export { WarningFilledIcon } from "./WarningFilledIcon";
 export { WarningIcon } from "./WarningIcon";
+export { WifiIcon } from "./WifiIcon";
 export { WriteIcon } from "./WriteIcon";

package/dist/components/icons/index.js

@@ -1,40 +1,107 @@
+export { AccountCircleFilledIcon } from './AccountCircleFilledIcon.js';
+export { AccountCircleIcon } from './AccountCircleIcon.js';
+export { AccountFilledIcon } from './AccountFilledIcon.js';
+export { AccountIcon } from './AccountIcon.js';
 export { AddIcon } from './AddIcon.js';
+export { AppsFilledIcon } from './AppsFilledIcon.js';
+export { AppsIcon } from './AppsIcon.js';
 export { ArrowDownIcon } from './ArrowDownIcon.js';
 export { ArrowLeftIcon } from './ArrowLeftIcon.js';
 export { ArrowRightIcon } from './ArrowRightIcon.js';
 export { ArrowUpIcon } from './ArrowUpIcon.js';
-export { AvatarAltIcon } from './AvatarAltIcon.js';
-export { AvatarIcon } from './AvatarIcon.js';
+export { BackspaceFilledIcon } from './BackspaceFilledIcon.js';
+export { BackspaceIcon } from './BackspaceIcon.js';
+export { BasketFilledIcon } from './BasketFilledIcon.js';
 export { BasketIcon } from './BasketIcon.js';
+export { BellFilledIcon } from './BellFilledIcon.js';
+export { BellIcon } from './BellIcon.js';
+export { BroomIcon } from './BroomIcon.js';
+export { CalendarFilledIcon } from './CalendarFilledIcon.js';
 export { CalendarIcon } from './CalendarIcon.js';
+export { CashFilledIcon } from './CashFilledIcon.js';
+export { CashIcon } from './CashIcon.js';
 export { ChevronDownIcon } from './ChevronDownIcon.js';
 export { ChevronLeftIcon } from './ChevronLeftIcon.js';
 export { ChevronRightIcon } from './ChevronRightIcon.js';
 export { ChevronUpIcon } from './ChevronUpIcon.js';
+export { CircleBurgerFilledIcon } from './CircleBurgerFilledIcon.js';
+export { CircleBurgerIcon } from './CircleBurgerIcon.js';
+export { ClipboardFilledIcon } from './ClipboardFilledIcon.js';
+export { ClipboardIcon } from './ClipboardIcon.js';
+export { ClockFilledIcon } from './ClockFilledIcon.js';
 export { ClockIcon } from './ClockIcon.js';
+export { CloseAltFilledIcon } from './CloseAltFilledIcon.js';
 export { CloseAltIcon } from './CloseAltIcon.js';
-export { CloseIcon } from './CloseIcon.js';
-export { CoopCardIcon } from './CoopCardIcon.js';
-export { CoopIcon } from './CoopIcon.js';
-export { CoopLocationIcon } from './CoopLocationIcon.js';
+export { CogIcon } from './CogIcon.js';
+export { CommunityFilledIcon } from './CommunityFilledIcon.js';
+export { CommunityIcon } from './CommunityIcon.js';
+export { ComputerIcon } from './ComputerIcon.js';
+export { ContactFilledIcon } from './ContactFilledIcon.js';
+export { ContactIcon } from './ContactIcon.js';
+export { ContactlessFilledIcon } from './ContactlessFilledIcon.js';
+export { ContactlessIcon } from './ContactlessIcon.js';
+export { CoopLiveIcon } from './CoopLiveIcon.js';
+export { CoopLocationFilledIcon } from './CoopLocationFilledIcon.js';
+export { CoopLogoIcon } from './CoopLogoIcon.js';
+export { CoopMembershipCardFilledIcon } from './CoopMembershipCardFilledIcon.js';
+export { CreditCardFilledIcon } from './CreditCardFilledIcon.js';
+export { CreditCardIcon } from './CreditCardIcon.js';
+export { CrossIcon } from './CrossIcon.js';
+export { DocumentIcon } from './DocumentIcon.js';
 export { DownloadIcon } from './DownloadIcon.js';
+export { EnterStoreIcon } from './EnterStoreIcon.js';
+export { ExitStoreIcon } from './ExitStoreIcon.js';
+export { EyeFilledIcon } from './EyeFilledIcon.js';
+export { EyeIcon } from './EyeIcon.js';
+export { EyeStrikeFilledIcon } from './EyeStrikeFilledIcon.js';
+export { EyeStrikeIcon } from './EyeStrikeIcon.js';
+export { FeedbackFilledIcon } from './FeedbackFilledIcon.js';
+export { FeedbackIcon } from './FeedbackIcon.js';
+export { FilterIcon } from './FilterIcon.js';
+export { GiftCardFilledIcon } from './GiftCardFilledIcon.js';
+export { GiftCardIcon } from './GiftCardIcon.js';
+export { GiftFilledIcon } from './GiftFilledIcon.js';
+export { GiftIcon } from './GiftIcon.js';
+export { HelpFilledIcon } from './HelpFilledIcon.js';
+export { HelpIcon } from './HelpIcon.js';
+export { HomeFilledIcon } from './HomeFilledIcon.js';
 export { HomeIcon } from './HomeIcon.js';
-export { InformationIcon } from './InformationIcon.js';
+export { HowDoIAssistantIcon } from './HowDoIAssistantIcon.js';
+export { InfoIcon } from './InfoIcon.js';
+export { KebabIcon } from './KebabIcon.js';
 export { LoadingIcon } from './LoadingIcon.js';
+export { LocationFilledIcon } from './LocationFilledIcon.js';
 export { LocationIcon } from './LocationIcon.js';
+export { LogoutIcon } from './LogoutIcon.js';
 export { MailIcon } from './MailIcon.js';
 export { MenuIcon } from './MenuIcon.js';
 export { MessageIcon } from './MessageIcon.js';
 export { MinusIcon } from './MinusIcon.js';
+export { NotesFilledIcon } from './NotesFilledIcon.js';
+export { NotesIcon } from './NotesIcon.js';
 export { OpenNewIcon } from './OpenNewIcon.js';
+export { OwnBagIcon } from './OwnBagIcon.js';
+export { PadlockIcon } from './PadlockIcon.js';
 export { PencilIcon } from './PencilIcon.js';
 export { PhoneIcon } from './PhoneIcon.js';
-export { QuestionIcon } from './QuestionIcon.js';
+export { PowerIcon } from './PowerIcon.js';
+export { SaveFilledIcon } from './SaveFilledIcon.js';
+export { SaveIcon } from './SaveIcon.js';
 export { ScooterIcon } from './ScooterIcon.js';
+export { SearchFilledIcon } from './SearchFilledIcon.js';
 export { SearchIcon } from './SearchIcon.js';
-export { SettingsIcon } from './SettingsIcon.js';
+export { SendIcon } from './SendIcon.js';
+export { SpannerIcon } from './SpannerIcon.js';
+export { StarFilledIcon } from './StarFilledIcon.js';
+export { StarIcon } from './StarIcon.js';
+export { TickAltFilledIcon } from './TickAltFilledIcon.js';
 export { TickAltIcon } from './TickAltIcon.js';
 export { TickIcon } from './TickIcon.js';
-export { VanIcon } from './VanIcon.js';
+export { TruckIcon } from './TruckIcon.js';
+export { UserWipeIcon } from './UserWipeIcon.js';
+export { VoucherFilledIcon } from './VoucherFilledIcon.js';
+export { VoucherIcon } from './VoucherIcon.js';
+export { WarningFilledIcon } from './WarningFilledIcon.js';
 export { WarningIcon } from './WarningIcon.js';
+export { WifiIcon } from './WifiIcon.js';
 export { WriteIcon } from './WriteIcon.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -83,10 +83,10 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.45.0",
+    "@coopdigital/styles": "^0.46.0",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "react-day-picker": "^9.12.0"
   },
-  "gitHead": "d15d7ae0d231bf28986a18a9e097537802f845db"
+  "gitHead": "a893acdaff1f6dc817bb01d77988b1bd9dd85ad1"
 }

package/src/components/Button/Button.tsx

@@ -95,7 +95,7 @@ export const Button = ({
     isPending || isLoading ? (
       <>
         {loadingText}
-        <LoadingIcon />
+        <LoadingIcon stroke={"currentColor"} strokeWidth={"1px"} />
       </>
     ) : (
       children

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}
         >
@@ -331,7 +332,7 @@ export const DatePicker = ({
           />
           <div className="coop-datepicker-actions">
             <Button aria-label="Cancel" className="bg-tint-grey" onClick={resetState} size="sm">
-              Clear <CloseIcon stroke="black" strokeWidth={1} />
+              Clear <CrossIcon stroke="black" strokeWidth={1} />
             </Button>
             <Popover.Close asChild>
               <Button aria-label="Accept" size="sm">

package/src/components/Expandable/Expandable.tsx

@@ -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/Searchbox/Searchbox.tsx

@@ -30,7 +30,7 @@ export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
   /** **(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. */
@@ -49,7 +49,7 @@ const componentSlots = {
 const defaultButtonText = React.createElement(SearchIcon, {
   alt: "Search",
   stroke: "currentColor",
-  strokeWidth: 2,
+  width: 24,
 })
 
 export const Searchbox = ({

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>
   )
 }

package/src/components/icons/AppsFilledIcon.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 AppsFilledIcon = ({ 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": "apps-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="M13 17a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zm13.204.01A2 2 0 0 1 28 19v7l-.01.204a2 2 0 0 1-1.786 1.785L26 28h-7a2 2 0 0 1-1.99-1.796L17 26v-7a2 2 0 0 1 2-2h7zM19 26h7v-7h-7zM13 4a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm13 0a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
+    </svg>
+  )
+}