@coopdigital/react 1.2.6 → 1.4.0

package/dist/components/Button/Button.js

@@ -6,7 +6,7 @@ import React, { useState, useCallback } from 'react';
 import { hasUserBg } from '../../utils/index.js';
 import { LoadingIcon } from '../icons/LoadingIcon.js';
 
-const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size = "md", variant = "solid", ...props }) => {
+const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size, variant = "solid", ...props }) => {
     const element = as !== null && as !== void 0 ? as : (href ? "a" : "button");
     const [isPending, setIsPending] = useState(false);
     const handleClick = useCallback(async (event) => {
@@ -24,7 +24,7 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
         "aria-disabled": isDisabled ? true : undefined,
         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-size": size !== null && size !== void 0 ? size : undefined,
         "data-variant": variant !== "text" ? variant : undefined,
         "data-width": isFullWidth ? "full" : undefined,
         href,

package/dist/components/Checkbox/Checkbox.js

@@ -2,12 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const Checkbox = ({ className, disabled, error = false, id, name, ref, size = "md", ...props }) => {
+const Checkbox = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
     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 !== null && size !== void 0 ? size : undefined,
         disabled,
         id: uid,
         name,

package/dist/components/DatePicker/DatePicker.js

@@ -40,7 +40,7 @@ const Calendar = ({ captionLayout = "label", className, disabled, endMonth, form
             ...formatters,
         }, navLayout: "around", showOutsideDays: showOutsideDays, startMonth: startMonth, weekStartsOn: 1, ...props }));
 };
-const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy", disabled, disabledDates, endDate, error = false, id, initialDate = now, initialSelected = false, mode = "single", name, onChange, onSelect, ref, required = false, size = "md", startDate, ...props }) => {
+const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy", disabled, disabledDates, endDate, error = false, id, initialDate = now, initialSelected = false, mode = "single", name, onChange, onSelect, ref, required = false, size, startDate, ...props }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const uid = useId(id);
     initialDate = getInitialDate(mode, initialDate);

package/dist/components/Fieldset/Fieldset.js

@@ -4,13 +4,13 @@ import { Error } from '../FieldMarkers/Error.js';
 import { Hint } from '../FieldMarkers/Hint.js';
 import { Legend } from '../FieldMarkers/Legend.js';
 
-const Fieldset = ({ children, className, disabled, error = false, hideErrorBar = false, ref, size = "md", ...props }) => {
+const Fieldset = ({ children, className, disabled, error = false, hideErrorBar = false, ref, size, ...props }) => {
     const componentProps = {
         "aria-disabled": disabled,
         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 !== null && size !== void 0 ? size : undefined,
         disabled,
         ...props,
     };

package/dist/components/Radio/Radio.js

@@ -2,12 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const Radio = ({ className, disabled, error = false, id, name, ref, size = "md", ...props }) => {
+const Radio = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
     const uid = useId(id);
     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 !== null && size !== void 0 ? size : undefined,
         disabled,
         id: uid,
         name,

package/dist/components/Searchbox/Searchbox.d.ts

@@ -34,7 +34,7 @@ export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
 export declare const Searchbox: {
     ({ action, children, className, id, label, labelVisible, onSubmit, ref, size, variant, ...props }: SearchboxProps): JSX.Element;
     Button: {
-        ({ children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, id, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
         config: {
             name: string;
         };

package/dist/components/Searchbox/Searchbox.js

@@ -15,12 +15,7 @@ const componentSlots = {
     SearchboxButton: null,
     SearchboxInput: null,
 };
-const defaultButtonText = React.createElement(SearchIcon, {
-    alt: "Search",
-    stroke: "currentColor",
-    width: 24,
-});
-const Searchbox = ({ action, children, className, id, label, labelVisible = false, onSubmit, ref, size = "md", variant = "solid", ...props }) => {
+const Searchbox = ({ action, children, className, id, label, labelVisible = false, onSubmit, ref, size, variant = "solid", ...props }) => {
     const slots = { ...useSlots(componentSlots, children) };
     const [isPending, setIsPending] = useState(false);
     const uid = useId(id);
@@ -43,9 +38,9 @@ const Searchbox = ({ action, children, className, id, label, labelVisible = fals
     const formProps = {
         action: action !== null && action !== void 0 ? action : undefined,
         className: clsx("coop-searchbox", borderClass, className),
-        "data-size": size && size !== "md" ? size : undefined,
+        "data-size": size !== null && size !== void 0 ? size : undefined,
         "data-variant": variant.length && variant !== "solid" ? variant : undefined,
-        id: uid + "-form",
+        id: uid + "__form",
         onSubmit: onSubmit ? handleSubmit : undefined,
         ...props,
     };
@@ -65,9 +60,10 @@ const Searchbox = ({ action, children, className, id, label, labelVisible = fals
     };
     return (jsxs("form", { ...formProps, ref: ref, children: [label && jsx(Field.Label, { ...labelProps, children: label }), jsxs("div", { className: clsx("coop-searchbox--inner"), children: [jsx(Field, { children: slots.SearchboxInput }), slots.SearchboxButton] })] }));
 };
-const SearchboxButton = ({ children, ...props }) => {
+const SearchboxButton = ({ children, id, ...props }) => {
+    const uid = useId(id);
     const buttonProps = {
-        children: children !== null && children !== void 0 ? children : defaultButtonText,
+        children: children !== null && children !== void 0 ? children : (jsx(SearchIcon, { alt: "Search", id: uid + "__icon", stroke: "currentColor", width: "24" })),
         ...props,
     };
     return jsx(Button, { ...buttonProps });

package/dist/components/Select/Select.js

@@ -2,12 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const Select = ({ children, className, disabled, error, id, name, ref, size = "md", ...props }) => {
+const Select = ({ children, className, disabled, error, id, name, ref, size, ...props }) => {
     const uid = useId(id);
     const componentProps = {
         className: clsx("coop-select", "coop-field-element", className),
         "data-error": error !== null && error !== void 0 ? error : undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": size !== null && size !== void 0 ? size : undefined,
         disabled,
         id: uid,
         name,

package/dist/components/TextInput/TextInput.js

@@ -2,14 +2,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, prefixInline = false, ref, size = "md", suffix, suffixInline = false, type = "text", ...props }) => {
+const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, prefixInline = false, ref, size, suffix, suffixInline = false, type = "text", ...props }) => {
     var _a;
     const uid = useId(id);
     const componentProps = {
         "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : 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 === null || size === void 0 ? void 0 : size.length) ? size : undefined,
         disabled,
         id: uid,
         name,

package/dist/components/Textarea/Textarea.js

@@ -10,7 +10,7 @@ const DEBOUNCE_DELAY = 750;
 const charCountMessage = (remaining) => {
     return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
 };
-const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, id, maxLength, name, onChange: userOnChange = undefined, placeholder, ref, rows = 4, size = "md", ...props }) => {
+const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, id, maxLength, name, onChange: userOnChange = undefined, placeholder, ref, rows = 4, size, ...props }) => {
     var _a;
     const uid = useId(id);
     const componentProps = {
@@ -18,7 +18,7 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
         className: clsx("coop-textarea", "coop-field-element", className),
         cols,
         "data-error": error !== null && error !== void 0 ? error : undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": size !== null && size !== void 0 ? size : undefined,
         disabled,
         id: uid,
         maxLength: cutoff ? maxLength : undefined,

package/dist/components/ValidationSummary/ValidationSummary.d.ts

@@ -1,12 +1,20 @@
 import type { HTMLAttributes, JSX, ReactNode, Ref } from "react";
 import React from "react";
 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>;
 }
@@ -41,7 +49,7 @@ interface ValidationSummaryErrorsProps extends HTMLAttributes<HTMLDivElement> {
     errors?: Record<string, FieldError>;
 }
 export declare const ValidationSummary: {
-    ({ autoScroll, children, className, ref, ...props }: ValidationSummaryProps): JSX.Element | null;
+    ({ autoScroll, children, className, forceMount, ref, ...props }: ValidationSummaryProps): JSX.Element | null;
     Heading: {
         ({ as, children, className, }: ValidationSummaryHeadingProps): JSX.Element;
         config: {

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -12,7 +12,7 @@ const componentSlots = {
     ValidationSummaryHeading: null,
     ValidationSummaryPrompt: null,
 };
-const ValidationSummary = ({ autoScroll = true, children, className, ref, ...props }) => {
+const ValidationSummary = ({ autoScroll = true, children, className, forceMount = false, ref, ...props }) => {
     var _a;
     const slots = { ...useSlots(componentSlots, children) };
     const errors = React.isValidElement(slots.ValidationSummaryErrors) &&
@@ -28,7 +28,7 @@ const ValidationSummary = ({ autoScroll = true, children, className, ref, ...pro
             (_b = internalRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [autoScroll, errors, hasErrors]);
-    if (!hasErrors) {
+    if (!hasErrors && !forceMount) {
         return null;
     }
     const componentProps = {

package/dist/components/icons/AccountCircleFilledIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const AccountCircleFilledIcon = ({ 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": "account-circle-filled",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const AccountCircleFilledIcon = ({ 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 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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { AccountCircleFilledIcon };

package/dist/components/icons/AccountCircleIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const AccountCircleIcon = ({ 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": "account-circle",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const AccountCircleIcon = ({ 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 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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { AccountCircleIcon };

package/dist/components/icons/AccountFilledIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const AccountFilledIcon = ({ 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": "account-filled",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const AccountFilledIcon = ({ 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 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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { AccountFilledIcon };

package/dist/components/icons/AccountIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const AccountIcon = ({ 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": "account",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const AccountIcon = ({ 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 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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { AccountIcon };

package/dist/components/icons/AddIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const AddIcon = ({ 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": "add",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const AddIcon = ({ 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: "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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { AddIcon };

package/dist/components/icons/AppsFilledIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const AppsFilledIcon = ({ 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": "apps-filled",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const AppsFilledIcon = ({ 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: "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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { AppsFilledIcon };

package/dist/components/icons/AppsIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const AppsIcon = ({ 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": "apps",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const AppsIcon = ({ 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: "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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { AppsIcon };

package/dist/components/icons/ArrowDownIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const ArrowDownIcon = ({ 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": "arrow-down",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const ArrowDownIcon = ({ 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 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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { ArrowDownIcon };

package/dist/components/icons/ArrowLeftIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const ArrowLeftIcon = ({ 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": "arrow-left",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const ArrowLeftIcon = ({ 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: "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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { ArrowLeftIcon };

package/dist/components/icons/ArrowRightIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const ArrowRightIcon = ({ 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": "arrow-right",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const ArrowRightIcon = ({ 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.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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { ArrowRightIcon };

package/dist/components/icons/ArrowUpIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const ArrowUpIcon = ({ 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": "arrow-up",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const ArrowUpIcon = ({ 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.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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { ArrowUpIcon };

package/dist/components/icons/BackspaceFilledIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const BackspaceFilledIcon = ({ 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": "backspace-filled",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const BackspaceFilledIcon = ({ 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: "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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { BackspaceFilledIcon };

package/dist/components/icons/BackspaceIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const BackspaceIcon = ({ 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": "backspace",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const BackspaceIcon = ({ 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: "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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { BackspaceIcon };

package/dist/components/icons/BasketFilledIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const BasketFilledIcon = ({ 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": "basket-filled",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const BasketFilledIcon = ({ 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.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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { BasketFilledIcon };

package/dist/components/icons/BasketIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const BasketIcon = ({ 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": "basket",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const BasketIcon = ({ 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.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" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" })] }));
 };
 
 export { BasketIcon };

package/dist/components/icons/BellFilledIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const BellFilledIcon = ({ 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": "bell-filled",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const BellFilledIcon = ({ 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: "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" }), jsx("path", { d: "M16 5a9 9 0 0 1 9 9v11H7V14l.012-.463A9 9 0 0 1 16 5Z", strokeWidth: "2" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("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" }), jsx("path", { d: "M16 5a9 9 0 0 1 9 9v11H7V14l.012-.463A9 9 0 0 1 16 5Z", strokeWidth: "2" })] }));
 };
 
 export { BellFilledIcon };

package/dist/components/icons/BellIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const BellIcon = ({ 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": "bell",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const BellIcon = ({ 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 26.999a3 3 0 0 1-6 0zM16 2a3 3 0 0 1 2.946 2.441C23.031 5.7 26 9.503 26 14v10h1a1 1 0 1 1 0 2H5a1 1 0 0 1 0-2h1V14c0-4.497 2.968-8.3 7.052-9.559A3 3 0 0 1 16 2m0 4a8 8 0 0 0-8 8v10h16V14a8 8 0 0 0-8-8" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { d: "M19 26.999a3 3 0 0 1-6 0zM16 2a3 3 0 0 1 2.946 2.441C23.031 5.7 26 9.503 26 14v10h1a1 1 0 1 1 0 2H5a1 1 0 0 1 0-2h1V14c0-4.497 2.968-8.3 7.052-9.559A3 3 0 0 1 16 2m0 4a8 8 0 0 0-8 8v10h16V14a8 8 0 0 0-8-8" })] }));
 };
 
 export { BellIcon };

package/dist/components/icons/BroomIcon.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const BroomIcon = ({ 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": "broom",
         fill: fill !== null && fill !== void 0 ? fill : "currentColor",
@@ -14,7 +14,7 @@ const BroomIcon = ({ 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 2a4 4 0 0 1 4 4v11h6a2 2 0 0 1 2 2v2h.015l1.449 6.57a2 2 0 0 1-1.718 2.416l-.235.014H4.544l-.24-.014a2 2 0 0 1-1.746-2.222l.043-.236L4 21.76V19a2 2 0 0 1 2-2h6V6a4 4 0 0 1 4-4M4.544 28H9v-2a1 1 0 1 1 2 0v2h4v-2a1 1 0 0 1 2 0v2h4v-2a1 1 0 0 1 2 0v2h4.51l-1.102-5H5.757zM6 21h20v-2H6zM16 4a2 2 0 0 0-2 2v11h4V6a2 2 0 0 0-2-2" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { d: "M16 2a4 4 0 0 1 4 4v11h6a2 2 0 0 1 2 2v2h.015l1.449 6.57a2 2 0 0 1-1.718 2.416l-.235.014H4.544l-.24-.014a2 2 0 0 1-1.746-2.222l.043-.236L4 21.76V19a2 2 0 0 1 2-2h6V6a4 4 0 0 1 4-4M4.544 28H9v-2a1 1 0 1 1 2 0v2h4v-2a1 1 0 0 1 2 0v2h4v-2a1 1 0 0 1 2 0v2h4.51l-1.102-5H5.757zM6 21h20v-2H6zM16 4a2 2 0 0 0-2 2v11h4V6a2 2 0 0 0-2-2" })] }));
 };
 
 export { BroomIcon };