@coopdigital/react 0.16.0 → 0.18.0

package/README.md

@@ -33,8 +33,8 @@ npm install @coopdigital/react @coopdigital/styles
 Import the components that you need, along with the main stylesheet and the corresponding component styles:
 ```
 import { Pill } from "@coopdigital/react"
-import "@coopdigital/styles/dist/main.css"
-import "@coopdigital/styles/dist/components/Pill.css"
+import "@coopdigital/styles/main.css"
+import "@coopdigital/styles/components/Pill.css"
 ```
 
 Alternatively if your project uses SASS you can import the source stylesheets:

package/dist/components/Icon/AddIcon.d.ts

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

package/dist/components/Icon/ArrowDownIcon.d.ts

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

package/dist/components/Icon/ArrowLeftIcon.d.ts

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

package/dist/components/Icon/ArrowRightIcon.d.ts

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

package/dist/components/Icon/ArrowUpIcon.d.ts

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

package/dist/components/Icon/AvatarAltIcon.d.ts

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

package/dist/components/Icon/AvatarIcon.d.ts

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

package/dist/components/Icon/BasketIcon.d.ts

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

package/dist/components/Icon/CalendarIcon.d.ts

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

package/dist/components/Icon/ChevronDownIcon.d.ts

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

package/dist/components/Icon/ChevronLeftIcon.d.ts

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

package/dist/components/Icon/ChevronRightIcon.d.ts

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

package/dist/components/Icon/ChevronUpIcon.d.ts

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

package/dist/components/Icon/ClockIcon.d.ts

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

package/dist/components/Icon/CloseAltIcon.d.ts

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

package/dist/components/Icon/CloseIcon.d.ts

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

package/dist/components/Icon/CoopCardIcon.d.ts

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

package/dist/components/Icon/CoopIcon.d.ts

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

package/dist/components/Icon/CoopLocationIcon.d.ts

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

package/dist/components/Icon/DownloadIcon.d.ts

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

package/dist/components/Icon/HomeIcon.d.ts

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

package/dist/components/Icon/InformationIcon.d.ts

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

package/dist/components/Icon/LocationIcon.d.ts

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

package/dist/components/Icon/MailIcon.d.ts

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

package/dist/components/Icon/MenuIcon.d.ts

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

package/dist/components/Icon/MessageIcon.d.ts

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

package/dist/components/Icon/MinusIcon.d.ts

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

package/dist/components/Icon/OpenNewIcon.d.ts

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

package/dist/components/Icon/PencilIcon.d.ts

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

package/dist/components/Icon/PhoneIcon.d.ts

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

package/dist/components/Icon/QuestionIcon.d.ts

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

package/dist/components/Icon/ScooterIcon.d.ts

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

package/dist/components/Icon/SearchIcon.d.ts

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

package/dist/components/Icon/SettingsIcon.d.ts

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

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

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

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

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

package/dist/components/Icon/VanIcon.d.ts

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

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

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

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

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

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

@@ -1,13 +1,39 @@
-import { type SVGProps } from "react";
-export interface IconProps extends SVGProps<SVGSVGElement> {
-    /** **(Optional)** Alt text for the Icon. Will be rendered in a title tag in the SVG. */
-    alt?: string;
-    /** **(Optional)** Additional class names to forward to the Icon. */
-    className?: string;
-    /** The name of the icon to render. See the readme for how to add new icons. */
-    icon?: IconName;
-}
-export declare const Icon: ({ alt, className, icon, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export default Icon;
-export declare const iconNames: readonly ["arrow-right", "chevron", "search"];
-export type IconName = (typeof iconNames)[number];
+export { AddIcon } from "./AddIcon";
+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 { BasketIcon } from "./BasketIcon";
+export { CalendarIcon } from "./CalendarIcon";
+export { ChevronDownIcon } from "./ChevronDownIcon";
+export { ChevronLeftIcon } from "./ChevronLeftIcon";
+export { ChevronRightIcon } from "./ChevronRightIcon";
+export { ChevronUpIcon } from "./ChevronUpIcon";
+export { ClockIcon } from "./ClockIcon";
+export { CloseAltIcon } from "./CloseAltIcon";
+export { CloseIcon } from "./CloseIcon";
+export { CoopCardIcon } from "./CoopCardIcon";
+export { CoopIcon } from "./CoopIcon";
+export { CoopLocationIcon } from "./CoopLocationIcon";
+export { DownloadIcon } from "./DownloadIcon";
+export { HomeIcon } from "./HomeIcon";
+export { InformationIcon } from "./InformationIcon";
+export { LocationIcon } from "./LocationIcon";
+export { MailIcon } from "./MailIcon";
+export { MenuIcon } from "./MenuIcon";
+export { MessageIcon } from "./MessageIcon";
+export { MinusIcon } from "./MinusIcon";
+export { OpenNewIcon } from "./OpenNewIcon";
+export { PencilIcon } from "./PencilIcon";
+export { PhoneIcon } from "./PhoneIcon";
+export { QuestionIcon } from "./QuestionIcon";
+export { ScooterIcon } from "./ScooterIcon";
+export { SearchIcon } from "./SearchIcon";
+export { SettingsIcon } from "./SettingsIcon";
+export { TickAltIcon } from "./TickAltIcon";
+export { TickIcon } from "./TickIcon";
+export { VanIcon } from "./VanIcon";
+export { WarningIcon } from "./WarningIcon";
+export { WriteIcon } from "./WriteIcon";

package/dist/components/RootSVG/RootSVG.d.ts

@@ -1,3 +1,2 @@
-import { JSX } from "react";
-export declare const RootSVG: () => JSX.Element;
+export declare const RootSVG: () => import("react/jsx-runtime").JSX.Element;
 export default RootSVG;

package/dist/components/RootSVG/RootSVG.js

@@ -1,7 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 const RootSVG = () => {
-    return (jsxs("svg", { height: "0", width: "0", xmlns: "http://www.w3.org/2000/svg", children: [jsx("symbol", { fill: "currentColor", id: "arrow-right", viewBox: "0 0 22 20", children: jsx("path", { clipRule: "evenodd", d: "M11.127 1.65a.9.9 0 0 1 1.246-1.3l8.812 8.46a1.65 1.65 0 0 1 0 2.38l-8.812 8.46a.9.9 0 0 1-1.246-1.3l7.76-7.45H1.25a.9.9 0 1 1 0-1.8h17.638z", fill: "currentColor", fillRule: "evenodd" }) }), jsx("symbol", { id: "chevron", viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11a1.6 1.6 0 1 1 2.2-2l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }), jsx("symbol", { fill: "currentColor", id: "search", viewBox: "0 0 24 24", children: jsx("path", { clipRule: "evenodd", d: "M4.65 10.5a5.85 5.85 0 1 1 11.7 0 5.85 5.85 0 0 1-11.7 0m5.85-7.65a7.65 7.65 0 1 0 4.736 13.658l4.378 4.378a.9.9 0 1 0 1.273-1.273l-4.378-4.378A7.65 7.65 0 0 0 10.5 2.85", fill: "currentColor", fillRule: "evenodd" }) }), jsx("defs", { children: jsx("clipPath", { clipPathUnits: "objectBoundingBox", id: "squircle", children: jsx("path", { d: "M0,0.5 C0,0.165,0.165,0,0.5,0 S1,0.165,1,0.5 S0.835,1,0.5,1 S0,0.835,0,0.5" }) }) })] }));
+    return (jsx("svg", { height: "0", width: "0", xmlns: "http://www.w3.org/2000/svg", children: jsx("defs", { children: jsx("clipPath", { clipPathUnits: "objectBoundingBox", id: "squircle", children: jsx("path", { d: "M0,0.5 C0,0.165,0.165,0,0.5,0 S1,0.165,1,0.5 S0.835,1,0.5,1 S0,0.835,0,0.5" }) }) }) }));
 };
 
 export { RootSVG, RootSVG as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -34,6 +34,7 @@
     "test:e2e:ui": "npx playwright test --ui",
     "test:e2e:ci": "npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL",
     "build": "tsx scripts build",
+    "build:icons": "tsx scripts build-icons",
     "build:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
     "storybook": "storybook dev -p 6006",
     "storybook:playwright": "storybook dev -p 9000",
@@ -44,7 +45,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.15.0",
+    "@coopdigital/styles": "^0.15.2",
     "@playwright/test": "^1.51.1",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -66,5 +67,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "802023453505543e6b360e7e390bed6f983abf1a"
+  "gitHead": "0fa78c25e19ac1c1dc6af564c570e94646e71bc4"
 }

package/src/components/Icon/AddIcon.tsx

@@ -0,0 +1,30 @@
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const AddIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{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="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="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/Icon/ArrowDownIcon.tsx

@@ -0,0 +1,27 @@
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ArrowDownIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
+      <path d="M15 28.66V3a1 1 0 0 1 2 0v25.66a1 1 0 0 1-2 0" fill="currentColor" />
+      <path
+        d="M3 17a1 1 0 0 1 .29-.71 1 1 0 0 1 1.42 0L16 27.58l11.29-11.29a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41l-12 12a1 1 0 0 1-1.41 0l-12-12A1 1 0 0 1 3 17"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/Icon/ArrowLeftIcon.tsx

@@ -0,0 +1,27 @@
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ArrowLeftIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
+      <path d="M3.34 17H29a1 1 0 0 0 0-2H3.34a1 1 0 0 0 0 2" fill="currentColor" />
+      <path
+        d="M15 29a1 1 0 0 0 .71-.29 1 1 0 0 0 0-1.42L5.12 16.71a1 1 0 0 1 0-1.42L15.71 4.71a1 1 0 0 0 0-1.42 1 1 0 0 0-1.41 0l-12 12a1 1 0 0 0 0 1.42l12 12a1 1 0 0 0 .7.29"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/Icon/ArrowRightIcon.tsx

@@ -0,0 +1,27 @@
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ArrowRightIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
+      <path d="M28.7 15H3a1 1 0 0 0 0 2h25.7a1 1 0 0 0 0-2" fill="currentColor" />
+      <path
+        d="M17 3a1 1 0 0 0-.7.3 1 1 0 0 0 0 1.4l10.6 10.6a1 1 0 0 1 0 1.4L16.3 27.3a1 1 0 0 0 0 1.4 1 1 0 0 0 1.4 0l12-12a1 1 0 0 0 0-1.4l-12-12A1 1 0 0 0 17 3"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/Icon/ArrowUpIcon.tsx

@@ -0,0 +1,27 @@
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ArrowUpIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
+      <path d="M17 3.34V29a1 1 0 0 1-2 0V3.34a1 1 0 0 1 2 0" fill="currentColor" />
+      <path
+        d="M29 15a1 1 0 0 1-.29.71 1 1 0 0 1-1.42 0L16 4.42 4.71 15.71a1 1 0 0 1-1.42 0 1 1 0 0 1 0-1.41l12-12a1 1 0 0 1 1.41 0l12 12a1 1 0 0 1 .3.7"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/Icon/AvatarAltIcon.tsx

@@ -0,0 +1,34 @@
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const AvatarAltIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
+      <path
+        d="M16 32a16 16 0 1 1 16-16 16 16 0 0 1-16 16m0-30a14 14 0 1 0 14 14A14 14 0 0 0 16 2"
+        fill="currentColor"
+      />
+      <path
+        d="M16 8a5 5 0 1 1-5 5 5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7 7 7 0 0 0-7-7"
+        fill="currentColor"
+      />
+      <path
+        d="M5.64 27.85a.7.7 0 0 1-.19 0 1 1 0 0 1-.79-1.17A10.7 10.7 0 0 1 15.16 18h1.68a10.7 10.7 0 0 1 10.5 8.67 1 1 0 0 1-.79 1.17 1 1 0 0 1-1.17-.84 8.72 8.72 0 0 0-8.54-7h-1.68a8.72 8.72 0 0 0-8.54 7 1 1 0 0 1-.98.85"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}