@coopdigital/react 1.2.6 → 1.4.0

package/dist/components/icons/WarningIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const WarningIcon = ({ alt, className, fill, id, ref, ...props }) => {
     const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? uid + "-title" : undefined,
+        "aria-labelledby": alt ? uid + "__title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "warning",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const WarningIcon = ({ 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: "M14.239 5.27c.755-1.402 2.766-1.402 3.521 0l10.652 19.782c.717 1.332-.248 2.948-1.76 2.948H5.347l-.14-.005a2 2 0 0 1-1.683-2.817l.063-.126zM5.349 26H26.65L16 6.219zm10.65-5a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-8a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { d: "M14.239 5.27c.755-1.402 2.766-1.402 3.521 0l10.652 19.782c.717 1.332-.248 2.948-1.76 2.948H5.347l-.14-.005a2 2 0 0 1-1.683-2.817l.063-.126zM5.349 26H26.65L16 6.219zm10.65-5a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-8a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1" })] }));
 };
 
 export { WarningIcon };

package/dist/components/icons/WifiIcon.js

@@ -5,7 +5,7 @@ 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,
+        "aria-labelledby": alt ? uid + "__title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "wifi",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const WifiIcon = ({ 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 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" })] }));
+    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

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const WriteIcon = ({ alt, className, fill, id, ref, ...props }) => {
     const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? uid + "-title" : undefined,
+        "aria-labelledby": alt ? uid + "__title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "write",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const WriteIcon = ({ 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: "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" })] }));
+    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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.2.6",
+  "version": "1.4.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -67,7 +67,7 @@
     "@storybook/react-vite": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
@@ -84,11 +84,11 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.2.1",
+    "@coopdigital/styles": "^1.3.1",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.0"
   },
-  "gitHead": "9be9996ac210f4c20f42dc23404930e62fea11b1"
+  "gitHead": "1f09d7d3de31cb2a72cbfbb980883feb8b9c2d22"
 }

package/src/components/Button/Button.tsx

@@ -51,7 +51,7 @@ export const Button = ({
   loadingText = "Loading",
   onClick,
   ref,
-  size = "md",
+  size,
   variant = "solid",
   ...props
 }: ButtonProps): JSX.Element => {
@@ -82,7 +82,7 @@ export const Button = ({
       className
     ),
     "data-loading": isLoading || isPending ? true : undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     "data-variant": variant !== "text" ? variant : undefined,
     "data-width": isFullWidth ? "full" : undefined,
     href,

package/src/components/Checkbox/Checkbox.tsx

@@ -32,14 +32,14 @@ export const Checkbox = ({
   id,
   name,
   ref,
-  size = "md",
+  size,
   ...props
 }: CheckboxProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     className: clsx("coop-checkbox", "coop-field-element", className),
     "data-error": error || undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     id: uid,
     name,

package/src/components/DatePicker/DatePicker.tsx

@@ -179,7 +179,7 @@ export const DatePicker = ({
   onSelect,
   ref,
   required = false,
-  size = "md",
+  size,
   startDate,
   ...props
 }: DatePickerProps): JSX.Element => {

package/src/components/Fieldset/Fieldset.tsx

@@ -31,7 +31,7 @@ export const Fieldset = ({
   error = false,
   hideErrorBar = false,
   ref,
-  size = "md",
+  size,
   ...props
 }: FieldsetProps): JSX.Element => {
   const componentProps = {
@@ -39,7 +39,7 @@ export const Fieldset = ({
     className: clsx("coop-fieldset", className),
     "data-error": error || undefined,
     "data-hide-error": hideErrorBar || undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     ...props,
   }

package/src/components/Radio/Radio.tsx

@@ -28,7 +28,7 @@ export const Radio = ({
   id,
   name,
   ref,
-  size = "md",
+  size,
   ...props
 }: RadioProps): JSX.Element => {
   const uid = useId(id)
@@ -36,7 +36,7 @@ export const Radio = ({
   const componentProps = {
     className: clsx("coop-radio", "coop-field-element", className),
     "data-error": error || undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     id: uid,
     name,

package/src/components/Searchbox/Searchbox.tsx

@@ -46,12 +46,6 @@ const componentSlots = {
   SearchboxInput: null,
 }
 
-const defaultButtonText = React.createElement(SearchIcon, {
-  alt: "Search",
-  stroke: "currentColor",
-  width: 24,
-})
-
 export const Searchbox = ({
   action,
   children,
@@ -61,7 +55,7 @@ export const Searchbox = ({
   labelVisible = false,
   onSubmit,
   ref,
-  size = "md",
+  size,
   variant = "solid",
   ...props
 }: SearchboxProps): JSX.Element => {
@@ -95,9 +89,9 @@ export const Searchbox = ({
   const formProps = {
     action: action ?? undefined,
     className: clsx("coop-searchbox", borderClass, className),
-    "data-size": size && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     "data-variant": variant.length && variant !== "solid" ? variant : undefined,
-    id: uid + "-form",
+    id: uid + "__form",
     onSubmit: onSubmit ? handleSubmit : undefined,
     ...props,
   }
@@ -136,9 +130,12 @@ export const Searchbox = ({
   )
 }
 
-const SearchboxButton = ({ children, ...props }: ButtonProps) => {
+const SearchboxButton = ({ children, id, ...props }: ButtonProps) => {
+  const uid = useId(id)
   const buttonProps = {
-    children: children ?? defaultButtonText,
+    children: children ?? (
+      <SearchIcon alt="Search" id={uid + "__icon"} stroke="currentColor" width="24" />
+    ),
     ...props,
   }
 

package/src/components/Select/Select.tsx

@@ -55,14 +55,14 @@ export const Select = ({
   id,
   name,
   ref,
-  size = "md",
+  size,
   ...props
 }: SelectProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     className: clsx("coop-select", "coop-field-element", className),
     "data-error": error ?? undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     id: uid,
     name,

package/src/components/TextInput/TextInput.tsx

@@ -60,7 +60,7 @@ export const TextInput = ({
   prefix,
   prefixInline = false,
   ref,
-  size = "md",
+  size,
   suffix,
   suffixInline = false,
   type = "text",
@@ -72,7 +72,7 @@ export const TextInput = ({
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     className: clsx("coop-text-input", "coop-field-element", className),
     "data-error": error || undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size?.length ? size : undefined,
     disabled,
     id: uid,
     name,

package/src/components/Textarea/Textarea.tsx

@@ -62,7 +62,7 @@ export const Textarea = ({
   placeholder,
   ref,
   rows = 4,
-  size = "md",
+  size,
   ...props
 }: TextareaProps): JSX.Element => {
   const uid = useId(id)
@@ -72,7 +72,7 @@ export const Textarea = ({
     className: clsx("coop-textarea", "coop-field-element", className),
     cols,
     "data-error": error ?? undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     id: uid,
     maxLength: cutoff ? maxLength : undefined,

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -11,12 +11,20 @@ import { useSlots } from "../../hooks/useSlots"
 import { getFieldElement, sanitizeFieldId } from "./validationsummary-utils"
 
 export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors. */
+  /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors.
+   *
+   * Default: true
+   */
   autoScroll?: boolean
   /** **(Optional)** This should be a set of `ValidationSummary.Heading`, `ValidationSummary.Prompt` and `ValidationSummary.Errors` components. */
   children?: ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify if the summary should always render regardless of error state. Use this if you want to control the logic in your own code.
+   *
+   * Default: false
+   */
+  forceMount?: boolean
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }
@@ -66,6 +74,7 @@ export const ValidationSummary = ({
   autoScroll = true,
   children,
   className,
+  forceMount = false,
   ref,
   ...props
 }: ValidationSummaryProps): JSX.Element | null => {
@@ -87,7 +96,7 @@ export const ValidationSummary = ({
     }
   }, [autoScroll, errors, hasErrors])
 
-  if (!hasErrors) {
+  if (!hasErrors && !forceMount) {
     return null
   }
 

package/src/components/icons/AccountCircleFilledIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const AccountCircleFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "account-circle-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const AccountCircleFilledIcon = ({ alt, className, fill, id, ref, ...prop
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const AccountCircleIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "account-circle",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const AccountCircleIcon = ({ alt, className, fill, id, ref, ...props }: I
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const AccountFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "account-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const AccountFilledIcon = ({ alt, className, fill, id, ref, ...props }: I
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const AccountIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "account",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const AccountIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const AddIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "add",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const AddIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const AppsFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "apps-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const AppsFilledIcon = ({ alt, className, fill, id, ref, ...props }: Icon
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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>
   )

package/src/components/icons/AppsIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const AppsIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "apps",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const AppsIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M13.204 17.01A2 2 0 0 1 15 19v7l-.01.204a2 2 0 0 1-1.786 1.785L13 28H6a2 2 0 0 1-1.99-1.796L4 26v-7a2 2 0 0 1 2-2h7zM26 17a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zM6 26h7v-7H6zm7.204-21.99A2 2 0 0 1 15 6v7l-.01.204a2 2 0 0 1-1.786 1.785L13 15H6a2 2 0 0 1-1.99-1.796L4 13V6a2 2 0 0 1 2-2h7zm13 0A2 2 0 0 1 28 6v7l-.01.204a2 2 0 0 1-1.786 1.785L26 15h-7a2 2 0 0 1-1.99-1.796L17 13V6a2 2 0 0 1 2-2h7zM6 13h7V6H6zm13 0h7V6h-7z" />
     </svg>
   )

package/src/components/icons/ArrowDownIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ArrowDownIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "arrow-down",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ArrowDownIcon = ({ alt, className, fill, id, ref, ...props }: IconP
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M16 2a1 1 0 0 1 1 1v23.586l10.293-10.293a1 1 0 1 1 1.414 1.414L17.414 29a2 2 0 0 1-2.828 0L3.293 17.707a1 1 0 1 1 1.414-1.414L15 26.586V3a1 1 0 0 1 1-1" />
     </svg>
   )

package/src/components/icons/ArrowLeftIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ArrowLeftIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "arrow-left",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ArrowLeftIcon = ({ alt, className, fill, id, ref, ...props }: IconP
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M15.707 28.707a1 1 0 0 1-1.414 0L3 17.414a2 2 0 0 1 0-2.828L14.293 3.293a1 1 0 1 1 1.414 1.414L5.414 15H29a1 1 0 1 1 0 2H5.414l10.293 10.293a1 1 0 0 1 0 1.414" />
     </svg>
   )

package/src/components/icons/ArrowRightIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ArrowRightIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "arrow-right",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ArrowRightIcon = ({ alt, className, fill, id, ref, ...props }: Icon
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M16.293 3.293a1 1 0 0 1 1.414 0L29 14.586a2 2 0 0 1 0 2.828L17.707 28.707a1 1 0 1 1-1.414-1.414L26.586 17H3a1 1 0 1 1 0-2h23.586L16.293 4.707a1 1 0 0 1 0-1.414" />
     </svg>
   )

package/src/components/icons/ArrowUpIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ArrowUpIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "arrow-up",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ArrowUpIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M14.586 3a2 2 0 0 1 2.829 0l11.308 11.309a1 1 0 0 1-1.415 1.414L17 5.413V29a1 1 0 0 1-2 0V5.414L4.692 15.723a1 1 0 0 1-1.414-1.415z" />
     </svg>
   )

package/src/components/icons/BackspaceFilledIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const BackspaceFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "backspace-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const BackspaceFilledIcon = ({ alt, className, fill, id, ref, ...props }:
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M27.992 6a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H11.945a2 2 0 0 1-1.415-.586l-7.999-8a2 2 0 0 1 0-2.828l8-8A2 2 0 0 1 11.944 6zm-4.285 5.293a1 1 0 0 0-1.414 0L19 14.586l-3.293-3.293a1 1 0 1 0-1.414 1.414L17.586 16l-3.293 3.293a1 1 0 1 0 1.414 1.414L19 17.414l3.293 3.293a1 1 0 0 0 1.414-1.414L20.414 16l3.293-3.293a1 1 0 0 0 0-1.414" />
     </svg>
   )

package/src/components/icons/BackspaceIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const BackspaceIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "backspace",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const BackspaceIcon = ({ alt, className, fill, id, ref, ...props }: IconP
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M27.991 6a2 2 0 0 1 2 2v16l-.01.204A2 2 0 0 1 27.991 26H11.944l-.198-.01a2 2 0 0 1-1.217-.576l-7.998-8a2 2 0 0 1-.137-2.677l.137-.151 7.998-8c.328-.328.76-.53 1.217-.576l.198-.01zM3.945 16l8 8H27.99V8H11.944zm18.348-4.707a1 1 0 0 1 1.414 1.414L20.414 16l3.293 3.293a1 1 0 1 1-1.414 1.414L19 17.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L17.586 16l-3.293-3.293a1 1 0 1 1 1.414-1.414L19 14.586z" />
     </svg>
   )

package/src/components/icons/BasketFilledIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const BasketFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "basket-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const BasketFilledIcon = ({ alt, className, fill, id, ref, ...props }: Ic
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M19.293 5.293a1 1 0 0 1 1.414 0L26.414 11H28a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-.308l-1.431 9.304A2 2 0 0 1 24.284 28H7.716a2 2 0 0 1-1.977-1.696L4.308 17H4a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h1.586l5.707-5.707a1 1 0 1 1 1.414 1.414L8.414 11h15.172l-4.293-4.293a1 1 0 0 1 0-1.414M16 19a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0v-3a1 1 0 0 0-1-1m-4.514.836a1 1 0 0 0-1.972.328l.5 3a1 1 0 0 0 1.972-.328zm10.178-.822a1 1 0 0 0-1.15.822l-.5 3a1 1 0 0 0 1.972.328l.5-3a1 1 0 0 0-.822-1.15" />
     </svg>
   )

package/src/components/icons/BasketIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const BasketIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "basket",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const BasketIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M19.293 5.293a1 1 0 0 1 1.414 0L26.414 11H28a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-.308l-1.431 9.304a2 2 0 0 1-1.793 1.687l-.184.009H7.716a2 2 0 0 1-1.94-1.516l-.037-.18L4.308 17H4a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h1.586l5.707-5.707a1 1 0 1 1 1.414 1.414L8.414 11h15.172l-4.293-4.293a1 1 0 0 1 0-1.414M7.716 26h16.568l1.385-9H6.33zM16 19a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1m-5.664.014a1 1 0 0 1 1.15.822l.5 3a1 1 0 0 1-1.972.328l-.5-3a1 1 0 0 1 .822-1.15m10.178.822a1 1 0 0 1 1.972.328l-.5 3a1 1 0 0 1-1.972-.328zM4 15h24v-2H4z" />
     </svg>
   )

package/src/components/icons/BellFilledIcon.tsx

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const BellFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "bell-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const BellFilledIcon = ({ alt, className, fill, id, ref, ...props }: Icon
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M27 26a1 1 0 0 0 0-2H5a1 1 0 1 0 0 2zM19 27a3 3 0 1 1-6 0zM13 5a3 3 0 1 1 6 0z" />
       <path d="M16 5a9 9 0 0 1 9 9v11H7V14l.012-.463A9 9 0 0 1 16 5Z" strokeWidth="2" />
     </svg>