@coopdigital/react 0.19.5 → 0.19.7

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -2,11 +2,11 @@ import type { HTMLAttributes, JSX, ReactNode } from "react";
 export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Main content inside the banner. It can be any valid JSX or string. */
     children?: string | ReactNode;
-    /** **(Optional)** Additional CSS classes to be applied to the component. */
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** Main title of the banner, rendered as a `h2`. */
+    /** Specify the main title of the banner, rendered as a `h2`. */
     heading: string;
-    /** **(Optional)** Specify which banner variant to use. */
+    /** **(Optional)** Specify the AlertBanner variant. */
     variant?: "black" | "default";
 }
 export declare const AlertBanner: ({ children, className, heading, variant, ...props }: AlertBannerProps) => JSX.Element;

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,9 +1,10 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 
 const AlertBanner = (_a) => {
-    var { children, className = "", heading, variant = "default" } = _a, props = __rest(_a, ["children", "className", "heading", "variant"]);
-    const componentProps = Object.assign({ className: `coop-alert-banner ${className}`, "data-variant": variant }, props);
+    var { children, className, heading, variant = "default" } = _a, props = __rest(_a, ["children", "className", "heading", "variant"]);
+    const componentProps = Object.assign({ className: clsx("coop-alert-banner", className), "data-variant": variant }, props);
     return (jsx("aside", Object.assign({}, componentProps, { children: jsxs("div", { className: "coop-alert-banner--inner", children: [jsx("h2", { id: "coop-alert-banner--headline", children: heading }), children] }) })));
 };
 

package/dist/components/Author/Author.d.ts

@@ -1,15 +1,15 @@
 import type { HTMLAttributes, JSX } from "react";
 import { ImageProps } from "../Image";
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Specify the content author. */
+    /** **(Optional)** Specify the Author name. */
     author?: string;
-    /** **(Optional)** Additional CSS classes to be applied to the component. */
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** **(Optional)** Specify the date. Refer to Experience Library guidance on date formats. We advise using the following format (dd mmmm yyyy) eg: 1 January 2000.   */
+    /** **(Optional)** Specify the date. Refer to Experience Library guidance on date formats. We advise using the following format (dd mmmm yyyy) eg: 1 January 2000.  */
     date?: string;
     /** **(Optional)** Specify the text that will prefix the date, e.g. "Published". */
     datePrefix?: string;
-    /** **(Optional)** Specify Image properties of the Author avatar. */
+    /** **(Optional)** Specify properties of the Author Image. */
     image?: ImageProps;
 }
 export declare const Author: ({ author, className, date, datePrefix, image, ...props }: AuthorProps) => JSX.Element;

package/dist/components/Author/Author.js

@@ -1,14 +1,15 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { Image } from '../Image/Image.js';
 
 const Author = (_a) => {
-    var { author = "Co-op team", className = "", date, datePrefix = "", image = {
+    var { author = "Co-op team", className, date, datePrefix = "", image = {
         alt: "",
         src: "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg",
     } } = _a, props = __rest(_a, ["author", "className", "date", "datePrefix", "image"]);
     const imageProps = Object.assign({ width: "56px" }, image);
-    const componentProps = Object.assign({ className: `coop-author ${className}` }, props);
+    const componentProps = Object.assign({ className: clsx("coop-author", className) }, props);
     return (jsxs("div", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), jsxs("div", { className: "coop-author--content", children: [jsxs("span", { children: [datePrefix ? datePrefix + " " : "", date] }), jsxs("span", { children: ["by ", author] })] })] })));
 };
 

package/dist/components/Button/Button.d.ts

@@ -1,27 +1,27 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
 import React from "react";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** **(Optional)** Specifies the custom element to override default `a` or `button`. */
+    /** **(Optional)** Specify a custom element to override default `a` or `button`. */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
-    /** **(Optional)** Represents the content inside the Button component. It can be any valid JSX or string. */
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
     children?: React.ReactNode;
-    /** **(Optional)** Receives any className to be applied to Button component. */
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** **(Optional)** Specifies the URL that the Button component will link to when clicked. */
+    /** **(Optional)** Specify the URL that the Button component will link to when clicked. */
     href?: string;
-    /** **(Optional)** Specifies whether the Button should be disabled. This will not actually disable the button, just make it look disabled. Disabled buttons can be bad UX.  */
+    /** **(Optional)** Specify whether the Button should be disabled. This will not actually disable the button, just make it look disabled. Refer to Experience Library guidance on disabled buttons and accessibility.  */
     isDisabled?: boolean;
-    /** **(Optional)** Specifies whether the Button should be full width. */
+    /** **(Optional)** Specify whether the Button should be full width. Refer to Experience Library guidance on full width buttons. */
     isFullWidth?: boolean;
-    /** **(Optional)** Specifies whether the Button is loading. */
+    /** **(Optional)** Force the Button into a loading state. */
     isLoading?: boolean;
-    /** **(Optional)** Specifies loading text to show when the Button is in a pending state */
+    /** **(Optional)** Specify text to show when the Button is in a loading state. */
     loadingText?: string;
     /** **(Optional)** Callback to run when the button is pressed. If this is an async function, it will be awaited and the button will be in a pending state until the promise is resolved. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
-    /** **(Optional)** Specifies the Button size. */
-    size?: "sm" | "md" | "lg" | "xl";
-    /** **(Optional)** Specifies the Button variant. */
+    /** **(Optional)** Specify the Button size. */
+    size?: "sm" | "md" | "lg";
+    /** **(Optional)** Specify the Button variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost" | "text";
 }
 export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, size, variant, ...props }: ButtonProps) => JSX.Element;

package/dist/components/Button/Button.js

@@ -1,10 +1,11 @@
 import { __rest, __awaiter } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React, { useState, useCallback } from 'react';
 import { LoadingIcon } from '../Icon/LoadingIcon.js';
 
 const Button = (_a) => {
-    var { as, children, className = "", href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "green" } = _a, props = __rest(_a, ["as", "children", "className", "href", "isDisabled", "isFullWidth", "isLoading", "loadingText", "onClick", "size", "variant"]);
+    var { as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "green" } = _a, props = __rest(_a, ["as", "children", "className", "href", "isDisabled", "isFullWidth", "isLoading", "loadingText", "onClick", "size", "variant"]);
     let element = href ? "a" : "button";
     if (as) {
         element = as;
@@ -21,7 +22,7 @@ const Button = (_a) => {
             setIsPending(false);
         }
     }), [onClick, isPending]);
-    const componentProps = Object.assign({ "aria-disabled": isDisabled ? true : undefined, "aria-live": "assertive", className: `${variant == "text" ? "coop-link" : "coop-button"} ${className}`, "data-loading": isLoading || isPending ? true : undefined, "data-size": size.length && size !== "md" ? size : undefined, "data-variant": variant !== "text" ? variant : undefined, "data-width": isFullWidth ? "full" : undefined, href, onClick: handleClick }, props);
+    const componentProps = Object.assign({ "aria-disabled": isDisabled ? true : undefined, "aria-live": "assertive", className: clsx(variant == "text" ? "coop-link" : "coop-button", className), "data-loading": isLoading || isPending ? true : undefined, "data-size": size.length && size !== "md" ? size : undefined, "data-variant": variant !== "text" ? variant : undefined, "data-width": isFullWidth ? "full" : undefined, href, onClick: handleClick }, props);
     const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, {})] })) : (children);
     return React.createElement(element, Object.assign({}, componentProps), finalChildren);
 };

package/dist/components/Card/Card.d.ts

@@ -3,35 +3,35 @@ import React from "react";
 import { Lights, Tints } from "../../types/colors";
 import { ImageProps } from "../Image";
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Specifies the custom element to override default `a` */
+    /** **(Optional)** Specify a custom element to override default `a`. */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
-    /** **(Optional)** Specifies the background color of the card. */
+    /** **(Optional)** Specify the Card background color. */
     background?: Tints;
-    /** **(Optional)** Represents the content inside the badge. */
+    /** **(Optional)** Specify text to display inside the badge. */
     badge?: React.ReactNode;
     /** **(Optional)** Specify badge position relative to top right corner. */
     badgePosition?: "inset" | "popout";
-    /** **(Optional)** Specifies if chevron will be visible. */
+    /** **(Optional)** Specify whether chevron is visible. */
     chevron?: boolean;
-    /** **(Optional)** Represents the content inside the Card component. It can be any valid JSX or string. */
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
     children?: React.ReactNode;
-    /** **(Optional)** Receives any className to be applied to Card component. */
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** Specifies the heading of the Card */
+    /** Specify the Card heading. */
     heading: string;
-    /** **(Optional)** Specifies the heading level of the card's heading. */
+    /** **(Optional)** Specify the level of the Card heading. */
     headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
-    /** **(Optional)** Specifies the URL that the Card component will link to when clicked. */
+    /** **(Optional)** Specify the URL that the Card component will link to when clicked. */
     href?: string;
-    /** Specifies the image properties of the Card */
+    /** Specify properties of the Card Image. */
     image: ImageProps;
-    /** **(Optional)** Specifies the position of the image in the Card */
+    /** **(Optional)** Specify the position of the image in the Card. */
     imagePosition?: "left" | "right";
-    /** **(Optional)** Specifies the label of the Card */
+    /** **(Optional)** Specify the Card label. */
     label?: string;
-    /** **(Optional)** Specifies the label background of the Card */
+    /** **(Optional)** Specify the background color of the Card label. */
     labelBackground?: Lights;
-    /** **(Optional)** Specifies the layout of the Card */
+    /** **(Optional)** Specify the layout of the Card. */
     layout?: "vertical" | "horizontal";
 }
 export declare const Card: ({ as, background, badge, badgePosition, chevron, children, className, heading, headingLevel, href, image, imagePosition, label, labelBackground, layout, ...props }: CardProps) => JSX.Element;

package/dist/components/Card/Card.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
+import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
 function getCardLinkElement(as, href) {
@@ -19,11 +20,11 @@ function getCardLinkElement(as, href) {
     };
 }
 const Card = (_a) => {
-    var { as, background, badge, badgePosition = "inset", chevron = false, children, className = "", heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical" } = _a, props = __rest(_a, ["as", "background", "badge", "badgePosition", "chevron", "children", "className", "heading", "headingLevel", "href", "image", "imagePosition", "label", "labelBackground", "layout"]);
+    var { as, background, badge, badgePosition = "inset", chevron = false, children, className, heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical" } = _a, props = __rest(_a, ["as", "background", "badge", "badgePosition", "chevron", "children", "className", "heading", "headingLevel", "href", "image", "imagePosition", "label", "labelBackground", "layout"]);
     const linkElement = getCardLinkElement(as, href);
     const imageProps = Object.assign({ crop: "wide" }, image);
     const componentProps = Object.assign({ className: clsx("coop-card", background && bgPropToClass(background, className), className), "data-badge-pos": badgePosition, "data-image-pos": imagePosition, "data-layout": layout !== "vertical" ? layout : undefined }, props);
-    return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && (jsx("span", { className: clsx("coop-card--label", labelBackground && bgPropToClass(labelBackground, className)), children: label })), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, { className: "coop-card--heading" }, heading)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx("svg", { 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 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) }))] })] })));
+    return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && (jsx("span", { className: clsx("coop-card--label", labelBackground && bgPropToClass(labelBackground, className)), children: label })), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, { className: "coop-card--heading" }, heading)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) }))] })] })));
 };
 
 export { Card, Card as default };

package/dist/components/Expandable/Expandable.d.ts

@@ -1,13 +1,13 @@
 import type { DetailsHTMLAttributes, JSX } from "react";
 import { None, Tints, White } from "../../types/colors";
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
-    /** **(Optional)** Specifies the Expandable background color from the available options. */
+    /** **(Optional)** Specify the Expandable background color. */
     background?: Tints | White | None;
-    /** Represents the content inside the Expandable component, only visible when expanded. It can be any valid JSX or string. */
+    /** Main content inside the component, only visible when it is open. It can be any valid JSX or string. */
     children: React.ReactNode;
-    /** **(Optional)** Receives any className to be applied to Expandable component. */
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** Specifies summary for this component. It can be any valid JSX or string. */
+    /** Specify the summary text to show when the Expandable is not open. */
     summary: React.ReactNode;
 }
 export declare const Expandable: ({ background, children, className, summary, ...props }: ExpandableProps) => JSX.Element;

package/dist/components/Expandable/Expandable.js

@@ -2,11 +2,13 @@ import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { bgPropToClass } from '../../utils/index.js';
+import 'react';
+import { ChevronDownIcon } from '../Icon/ChevronDownIcon.js';
 
 const Expandable = (_a) => {
-    var { background = "tint-grey", children, className = "", summary } = _a, props = __rest(_a, ["background", "children", "className", "summary"]);
+    var { background = "tint-grey", children, className, summary } = _a, props = __rest(_a, ["background", "children", "className", "summary"]);
     const componentProps = Object.assign({ className: clsx("coop-expandable", bgPropToClass(background, className), className) }, props);
-    return (jsxs("details", Object.assign({}, componentProps, { style: { "--background-color": `var(--color-${background})` }, children: [jsxs("summary", { children: [summary, jsx("svg", { fill: "none", height: "24", width: "24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "m20.25 9.75-6.22 6.22a.75.75 0 0 1-1.06 0L6.75 9.75", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })] }), jsx("div", { className: "coop-expandable--content", children: children })] })));
+    return (jsxs("details", Object.assign({}, componentProps, { style: { "--background-color": `var(--color-${background})` }, children: [jsxs("summary", { children: [summary, jsx(ChevronDownIcon, { className: "coop-expandable--icon", stroke: "currentColor", strokeWidth: 2, width: "12" })] }), jsx("div", { className: "coop-expandable--content", children: children })] })));
 };
 
 export { Expandable, Expandable as default };

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

@@ -2,5 +2,5 @@ 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 declare const AddIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/AddIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const AddIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "add", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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" }), jsx("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" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "add", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M24.7 16.72a1 1 0 0 1-.7.28H8a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1 1 1 0 0 1-.3.72", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M16.72 24.7a1 1 0 0 1-.72.3 1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v16a1 1 0 0 1-.28.7", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { AddIcon };

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

@@ -2,5 +2,5 @@ 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 declare const ArrowDownIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/ArrowDownIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const ArrowDownIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "arrow-down", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M15 28.66V3a1 1 0 0 1 2 0v25.66a1 1 0 0 1-2 0", fill: "currentColor" }), jsx("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" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "arrow-down", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M15 28.66V3a1 1 0 0 1 2 0v25.66a1 1 0 0 1-2 0", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { ArrowDownIcon };

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

@@ -2,5 +2,5 @@ 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 declare const ArrowLeftIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/ArrowLeftIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const ArrowLeftIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "arrow-left", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M3.34 17H29a1 1 0 0 0 0-2H3.34a1 1 0 0 0 0 2", fill: "currentColor" }), jsx("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" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "arrow-left", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M3.34 17H29a1 1 0 0 0 0-2H3.34a1 1 0 0 0 0 2", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { ArrowLeftIcon };

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

@@ -2,5 +2,5 @@ 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 declare const ArrowRightIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/ArrowRightIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const ArrowRightIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "arrow-right", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M28.7 15H3a1 1 0 0 0 0 2h25.7a1 1 0 0 0 0-2", fill: "currentColor" }), jsx("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" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "arrow-right", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M28.7 15H3a1 1 0 0 0 0 2h25.7a1 1 0 0 0 0-2", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { ArrowRightIcon };

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

@@ -2,5 +2,5 @@ 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 declare const ArrowUpIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/ArrowUpIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const ArrowUpIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "arrow-up", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M17 3.34V29a1 1 0 0 1-2 0V3.34a1 1 0 0 1 2 0", fill: "currentColor" }), jsx("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" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "arrow-up", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M17 3.34V29a1 1 0 0 1-2 0V3.34a1 1 0 0 1 2 0", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { ArrowUpIcon };

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

@@ -2,5 +2,5 @@ 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 declare const AvatarAltIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/AvatarAltIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const AvatarAltIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "avatar-alt", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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" }), jsx("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" }), jsx("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" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "avatar-alt", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { AvatarAltIcon };

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

@@ -2,5 +2,5 @@ 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 declare const AvatarIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/AvatarIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const AvatarIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "avatar", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M16 31a18.24 18.24 0 0 1-12.64-5.1A1.19 1.19 0 0 1 3 24.86a12.31 12.31 0 0 1 12-10h2a12.31 12.31 0 0 1 12 10 1.19 1.19 0 0 1-.34 1.06A18.24 18.24 0 0 1 16 31M5.42 24.68a15.9 15.9 0 0 0 21.16 0A10 10 0 0 0 17 17.17h-2a10 10 0 0 0-9.58 7.51", fill: "currentColor" }), jsx("path", { d: "M15.94 3.33a5.77 5.77 0 1 1-5.72 5.77 5.75 5.75 0 0 1 5.72-5.77m0-2.31a8.08 8.08 0 1 0 8 8.08 8 8 0 0 0-8-8.08", fill: "currentColor" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "avatar", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M16 31a18.24 18.24 0 0 1-12.64-5.1A1.19 1.19 0 0 1 3 24.86a12.31 12.31 0 0 1 12-10h2a12.31 12.31 0 0 1 12 10 1.19 1.19 0 0 1-.34 1.06A18.24 18.24 0 0 1 16 31M5.42 24.68a15.9 15.9 0 0 0 21.16 0A10 10 0 0 0 17 17.17h-2a10 10 0 0 0-9.58 7.51", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M15.94 3.33a5.77 5.77 0 1 1-5.72 5.77 5.75 5.75 0 0 1 5.72-5.77m0-2.31a8.08 8.08 0 1 0 8 8.08 8 8 0 0 0-8-8.08", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { AvatarIcon };

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

@@ -2,5 +2,5 @@ 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 declare const BasketIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/BasketIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const BasketIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "basket", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M16.07 26a1 1 0 0 0 1-1v-4.08a1 1 0 1 0-2 0V25a1 1 0 0 0 1 1M21.5 26h.17a1 1 0 0 0 1-.85l.68-4.07a1 1 0 0 0-.82-1.18 1 1 0 0 0-1.16.84l-.67 4.07a1 1 0 0 0 .8 1.19M10.43 26h.17a1 1 0 0 0 .82-1.18l-.68-4.07a1 1 0 0 0-1.15-.84 1 1 0 0 0-.82 1.18l.67 4.07a1 1 0 0 0 .99.84", fill: "currentColor" }), jsx("path", { d: "M31 10.7h-3.11l-8.25-8.4a1 1 0 0 0-1.41 0 1 1 0 0 0 0 1.44l6.83 7H6.85l6.8-6.93a1 1 0 0 0 0-1.44 1 1 0 0 0-1.42 0l-8.14 8.25a1 1 0 0 0 0 .08H1a1 1 0 0 0-1 1v5.1a1 1 0 0 0 1 1h1.23l1.88 11.36a1 1 0 0 0 1 .84H27a1 1 0 0 0 1-.84l1.88-11.34H31a1 1 0 0 0 1-1v-5.1a1 1 0 0 0-1-1.02M26.15 28H5.94L4.28 18h23.53ZM30 15.79H2v-3.06h28Z", fill: "currentColor" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "basket", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M16.07 26a1 1 0 0 0 1-1v-4.08a1 1 0 1 0-2 0V25a1 1 0 0 0 1 1M21.5 26h.17a1 1 0 0 0 1-.85l.68-4.07a1 1 0 0 0-.82-1.18 1 1 0 0 0-1.16.84l-.67 4.07a1 1 0 0 0 .8 1.19M10.43 26h.17a1 1 0 0 0 .82-1.18l-.68-4.07a1 1 0 0 0-1.15-.84 1 1 0 0 0-.82 1.18l.67 4.07a1 1 0 0 0 .99.84", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M31 10.7h-3.11l-8.25-8.4a1 1 0 0 0-1.41 0 1 1 0 0 0 0 1.44l6.83 7H6.85l6.8-6.93a1 1 0 0 0 0-1.44 1 1 0 0 0-1.42 0l-8.14 8.25a1 1 0 0 0 0 .08H1a1 1 0 0 0-1 1v5.1a1 1 0 0 0 1 1h1.23l1.88 11.36a1 1 0 0 0 1 .84H27a1 1 0 0 0 1-.84l1.88-11.34H31a1 1 0 0 0 1-1v-5.1a1 1 0 0 0-1-1.02M26.15 28H5.94L4.28 18h23.53ZM30 15.79H2v-3.06h28Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { BasketIcon };

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

@@ -2,5 +2,5 @@ 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 declare const CalendarIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/CalendarIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const CalendarIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "calendar", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M31 2h-4V1a1 1 0 0 0-2 0v1H7V1a1 1 0 0 0-2 0v1H1a1 1 0 0 0-1 1v28a1 1 0 0 0 1 1h30a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m-1 28H2V10h28Zm0-22H2V4h3v1a1 1 0 0 0 2 0V4h18v1a1 1 0 0 0 2 0V4h3Z", fill: "currentColor" }), jsx("path", { d: "M6 23v2a1 1 0 0 0 2 0v-1h7v1a1 1 0 0 0 2 0v-1h7v1a1 1 0 0 0 2 0V15a1 1 0 0 0-2 0v1h-7v-1a1 1 0 0 0-2 0v1H8v-1a1 1 0 0 0-2 0v8m18-1h-7v-4h7Zm-9-4v4H8v-4Z", fill: "currentColor" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "calendar", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M31 2h-4V1a1 1 0 0 0-2 0v1H7V1a1 1 0 0 0-2 0v1H1a1 1 0 0 0-1 1v28a1 1 0 0 0 1 1h30a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m-1 28H2V10h28Zm0-22H2V4h3v1a1 1 0 0 0 2 0V4h18v1a1 1 0 0 0 2 0V4h3Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M6 23v2a1 1 0 0 0 2 0v-1h7v1a1 1 0 0 0 2 0v-1h7v1a1 1 0 0 0 2 0V15a1 1 0 0 0-2 0v1h-7v-1a1 1 0 0 0-2 0v1H8v-1a1 1 0 0 0-2 0v8m18-1h-7v-4h7Zm-9-4v4H8v-4Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { CalendarIcon };

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

@@ -2,5 +2,5 @@ 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 declare const ChevronDownIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/ChevronDownIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const ChevronDownIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "chevron-down", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M31 9a1 1 0 0 0-.29-.71 1 1 0 0 0-1.42 0L16 21.59 2.71 8.3a1 1 0 0 0-1.42 0 1 1 0 0 0 0 1.41l14 14a1 1 0 0 0 1.41 0l14-14A1 1 0 0 0 31 9", fill: "currentColor" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "chevron-down", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M31 9a1 1 0 0 0-.29-.71 1 1 0 0 0-1.42 0L16 21.59 2.71 8.3a1 1 0 0 0-1.42 0 1 1 0 0 0 0 1.41l14 14a1 1 0 0 0 1.41 0l14-14A1 1 0 0 0 31 9", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { ChevronDownIcon };

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

@@ -2,5 +2,5 @@ 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 declare const ChevronLeftIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/ChevronLeftIcon.js

@@ -1,12 +1,13 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
 
 const ChevronLeftIcon = (_a) => {
-    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    var { alt, className, fill } = _a, props = __rest(_a, ["alt", "className", "fill"]);
     const id = useId();
-    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "chevron-left", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
-    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M22.5 30a1 1 0 0 0 .71-.29 1 1 0 0 0 0-1.42L10.91 16 23.2 3.71a1 1 0 0 0 0-1.41 1 1 0 0 0-1.41 0l-13 13a1 1 0 0 0 0 1.41l13 13a1 1 0 0 0 .71.29", fill: "currentColor" })] })));
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: clsx("coop-icon", className), "data-icon": "chevron-left", fill: fill !== null && fill !== void 0 ? fill : "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M22.5 30a1 1 0 0 0 .71-.29 1 1 0 0 0 0-1.42L10.91 16 23.2 3.71a1 1 0 0 0 0-1.41 1 1 0 0 0-1.41 0l-13 13a1 1 0 0 0 0 1.41l13 13a1 1 0 0 0 .71.29", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] })));
 };
 
 export { ChevronLeftIcon };

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

@@ -2,5 +2,5 @@ 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 declare const ChevronRightIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};