@coopdigital/react 0.19.1 → 0.19.3

package/dist/components/Icon/QuestionIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+const QuestionIcon = (_a) => {
+    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    const id = useId();
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "question", 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 0a16 16 0 1 0 16 16A16 16 0 0 0 16 0m0 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14", fill: "currentColor" }), jsx("path", { d: "M15.89 20.32a1.58 1.58 0 0 0-1.14.46 1.5 1.5 0 0 0-.47 1.1 1.3 1.3 0 0 0 .13.6 1.6 1.6 0 0 0 .35.48 1.7 1.7 0 0 0 .51.33 1.6 1.6 0 0 0 .62.12 1.55 1.55 0 0 0 1.11-.47 1.48 1.48 0 0 0 .47-1.1 1.4 1.4 0 0 0-.47-1.08 1.6 1.6 0 0 0-1.11-.44M19.11 9.71A4.3 4.3 0 0 0 17.74 9a5.2 5.2 0 0 0-1.63-.25 5.4 5.4 0 0 0-1.73.25 4.5 4.5 0 0 0-1.38.78 4.3 4.3 0 0 0-1 1.28 5 5 0 0 0-.51 1.71l2.41.23a2.7 2.7 0 0 1 .16-.78 1.9 1.9 0 0 1 .41-.67 2.1 2.1 0 0 1 .64-.46 1.9 1.9 0 0 1 .84-.17 1.78 1.78 0 0 1 1.39.53 1.84 1.84 0 0 1 .49 1.31 1.9 1.9 0 0 1-.27 1 4 4 0 0 1-.65.76l-.9.86a5.4 5.4 0 0 0-.63.68 3.05 3.05 0 0 0-.63 1.39 5.4 5.4 0 0 0-.07.86v.76h2.37v-.52a4 4 0 0 1 .06-.74 1.8 1.8 0 0 1 .21-.56 2.7 2.7 0 0 1 .4-.52c.17-.18.39-.38.65-.61s.59-.52.84-.77a5 5 0 0 0 .63-.77 3.4 3.4 0 0 0 .4-.88 4.2 4.2 0 0 0 .14-1.13 3.8 3.8 0 0 0-.38-1.64 3.6 3.6 0 0 0-.89-1.22", fill: "currentColor" })] })));
+};
+
+export { QuestionIcon };

package/dist/components/Icon/ScooterIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+const ScooterIcon = (_a) => {
+    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    const id = useId();
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "scooter", 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, jsxs("g", { clipPath: "url(#a)", clipRule: "evenodd", fill: "currentColor", fillRule: "evenodd", children: [jsx("path", { d: "M41.292 18.293a1 1 0 0 1 1.414 0C43.88 19.465 44.6 21.014 44.6 22.8c0 3.452-2.747 6.2-6.2 6.2-3.333 0-6.08-2.622-6.2-5.964a1 1 0 1 1 2-.072 4.19 4.19 0 0 0 4.2 4.036c2.348 0 4.2-1.852 4.2-4.2 0-1.214-.48-2.265-1.307-3.093a1 1 0 0 1 0-1.414M1.1 23a9.28 9.28 0 0 1 9.3-9.3 9.28 9.28 0 0 1 9.3 9.3 1 1 0 0 1-1 1H2.1a1 1 0 0 1-1-1m2.067-1h14.466a7.28 7.28 0 0 0-7.233-6.3A7.28 7.28 0 0 0 3.167 22" }), jsx("path", { d: "M34.754 13.161c3.98-1.476 8.72.438 10.545 4.203a1 1 0 1 1-1.8.872c-1.374-2.834-5.032-4.32-8.052-3.199l-.006.003c-.933.339-1.796.939-2.494 1.724a1 1 0 0 1-1.495-1.328c.9-1.014 2.036-1.813 3.302-2.275M10.4 29.3a6.164 6.164 0 0 1-6.2-6.2h2c0 2.348 1.852 4.2 4.2 4.2s4.2-1.852 4.2-4.2h2c0 3.452-2.749 6.2-6.2 6.2", fill: "currentColor" }), jsx("path", { d: "M21.3 1a1 1 0 0 1 1-1h5.1a1 1 0 0 1 .869.503l7.1 12.4a1 1 0 1 1-1.736.994L26.821 2h-4.52a1 1 0 0 1-1-1M8.585 9.2c3.42-.1 6.556-.012 9.806 1.829 2.713 1.52 4.878 4.116 5.858 7.055a1 1 0 0 1-1.898.632c-.82-2.46-2.654-4.663-4.94-5.943l-.004-.003c-2.745-1.555-5.404-1.67-8.778-1.57H8a1 1 0 1 1 0-2z", fill: "currentColor" }), jsx("path", { d: "M45.33 17.434a1 1 0 0 1-.564 1.297l-12.2 4.8-.05.018c-.966.322-1.976.551-3.116.551H2.1a1 1 0 1 1 0-2h27.3c.851 0 1.634-.167 2.459-.44l12.174-4.79a1 1 0 0 1 1.297.564M0 5.7a1 1 0 0 1 1-1h9.9a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1M1.8 10.2a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1M3.2 1a1 1 0 0 1 1-1h7.1a1 1 0 1 1 0 2H4.2a1 1 0 0 1-1-1", fill: "currentColor" })] }), jsx("defs", { children: jsx("clipPath", { id: "a", children: jsx("path", { d: "M0 0h45.4v29.3H0z", fill: "currentColor" }) }) })] })));
+};
+
+export { ScooterIcon };

package/dist/components/Icon/SettingsIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+const SettingsIcon = (_a) => {
+    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    const id = useId();
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "settings", 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 2a14 14 0 0 1 2.13.16v3.57l1.34.47a10.2 10.2 0 0 1 3.27 1.89l1.08.91 1.23-.71 1.86-1.08a14 14 0 0 1 2.14 3.69L27.18 12l-1.18.7.26 1.39a10.6 10.6 0 0 1 0 3.8L26 19.28l1.23.71 1.88 1.09a14.2 14.2 0 0 1-2.14 3.69l-1.86-1.08-1.28-.69-1.07.92a10.6 10.6 0 0 1-3.3 1.9l-1.33.47v3.57A14 14 0 0 1 16 30a14 14 0 0 1-2.13-.16v-3.57l-1.34-.47a10.2 10.2 0 0 1-3.27-1.9L8.18 23 7 23.69l-1.91 1.08A14.1 14.1 0 0 1 3 21.08L4.82 20l1.23-.71-.26-1.39a10.6 10.6 0 0 1 0-3.8l.26-1.39L4.82 12 3 10.92a14.5 14.5 0 0 1 2.08-3.69l1.86 1.08L8.16 9l1.08-.9a10.6 10.6 0 0 1 3.3-1.9l1.33-.47V2.16A14 14 0 0 1 16 2m0 21a7 7 0 1 0-7-7 7 7 0 0 0 7 7m0-23a16 16 0 0 0-3.53.39.76.76 0 0 0-.6.75v3.18a12.7 12.7 0 0 0-3.93 2.26L5.2 5a.75.75 0 0 0-.38-.1.77.77 0 0 0-.57.25 15.9 15.9 0 0 0-3.53 6.1.78.78 0 0 0 .35.91l2.75 1.59a12.3 12.3 0 0 0 0 4.52l-2.75 1.58a.79.79 0 0 0-.35.9 16 16 0 0 0 3.53 6.11.8.8 0 0 0 .57.25.7.7 0 0 0 .38-.11L8 25.42a12.3 12.3 0 0 0 3.92 2.26v3.18a.77.77 0 0 0 .61.75A16.2 16.2 0 0 0 16 32a16 16 0 0 0 3.53-.39.76.76 0 0 0 .6-.75v-3.18a12.5 12.5 0 0 0 3.92-2.26L26.8 27a.79.79 0 0 0 1-.15 16 16 0 0 0 3.53-6.11.8.8 0 0 0-.36-.9l-2.75-1.59a12.8 12.8 0 0 0 0-4.53l2.75-1.59a.78.78 0 0 0 .35-.9 16.1 16.1 0 0 0-3.53-6.1.76.76 0 0 0-.57-.26.73.73 0 0 0-.42.13l-2.75 1.57a12.3 12.3 0 0 0-3.92-2.26V1.14a.77.77 0 0 0-.61-.75A16.2 16.2 0 0 0 16 0m0 21a5 5 0 1 1 5-5 5 5 0 0 1-5 5", fill: "currentColor" })] })));
+};
+
+export { SettingsIcon };

package/dist/components/Icon/TickAltIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+const TickAltIcon = (_a) => {
+    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    const id = useId();
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "tick-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: "M12.7 22a1 1 0 0 1-.71-.29L8.3 18a1 1 0 0 1 0-1.42 1 1 0 0 1 1.41 0l3 3 9.41-9.38a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41L13.4 21.69a1 1 0 0 1-.7.31", fill: "currentColor" }), jsx("path", { d: "M16 2A14 14 0 1 1 2 16 14 14 0 0 1 16 2m0-2a16 16 0 1 0 16 16A16 16 0 0 0 16 0", fill: "currentColor" })] })));
+};
+
+export { TickAltIcon };

package/dist/components/Icon/TickIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+const TickIcon = (_a) => {
+    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    const id = useId();
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "tick", 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: "M10.41 26a1 1 0 0 1-.71-.3l-6.42-6.59a1 1 0 0 1 1.44-1.39l5.69 5.85L27.28 6.3a1 1 0 1 1 1.44 1.4l-17.59 18a1 1 0 0 1-.72.3", fill: "currentColor" })] })));
+};
+
+export { TickIcon };

package/dist/components/Icon/VanIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+const VanIcon = (_a) => {
+    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    const id = useId();
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "van", 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.05 3H9.8a1 1 0 0 0-1 1v.2H3.06a1 1 0 0 0-1 .86L.89 12.64a1 1 0 0 0-.89 1v10a1 1 0 0 0 1 1h3a5 5 0 0 0 9.9 0H18a5 5 0 0 0 9.89 0h3.21a1 1 0 0 0 .72-.3 1 1 0 0 0 .18-.72V4a1 1 0 0 0-.95-1M3.91 6.24H8.8v6.38H2.93ZM8.92 27A3 3 0 0 1 6 24.71a2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .24 1.22 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 8.92 27M23 27a3 3 0 0 1-2.89-2.24 2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .23 1.17 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 23 27m4.87-4.29a5 5 0 0 0-9.74 0H13.8a5 5 0 0 0-9.75 0H2v-8h7.8a1 1 0 0 0 1-1V5.05H30v17.61Z", fill: "currentColor" })] })));
+};
+
+export { VanIcon };

package/dist/components/Icon/WarningIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+const WarningIcon = (_a) => {
+    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    const id = useId();
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "warning", 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: "M2.35 28.08 16.06 4.46l13.71 23.62Zm29.32-.7L17.56 3.07A1.73 1.73 0 0 0 16.06 2a1.94 1.94 0 0 0-1.5 1.1L.35 27.38C-.45 28.77.15 30 1.85 30h28.32a1.6 1.6 0 0 0 1.5-2.62", fill: "currentColor" }), jsx("path", { d: "M14.52 24.19A1.44 1.44 0 0 1 15 23.1a1.54 1.54 0 0 1 1.13-.46 1.63 1.63 0 0 1 1.12.44 1.39 1.39 0 0 1 .48 1.07 1.48 1.48 0 0 1-.47 1.1 1.62 1.62 0 0 1-1.74.34 1.6 1.6 0 0 1-.51-.32 1.3 1.3 0 0 1-.35-.48 1.3 1.3 0 0 1-.14-.6m2.8-3h-2.4v-9.71h2.4Z", fill: "currentColor" })] })));
+};
+
+export { WarningIcon };

package/dist/components/Icon/WriteIcon.js

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

package/dist/components/Icon/index.js

@@ -0,0 +1,40 @@
+export { AddIcon } from './AddIcon.js';
+export { ArrowDownIcon } from './ArrowDownIcon.js';
+export { ArrowLeftIcon } from './ArrowLeftIcon.js';
+export { ArrowRightIcon } from './ArrowRightIcon.js';
+export { ArrowUpIcon } from './ArrowUpIcon.js';
+export { AvatarAltIcon } from './AvatarAltIcon.js';
+export { AvatarIcon } from './AvatarIcon.js';
+export { BasketIcon } from './BasketIcon.js';
+export { CalendarIcon } from './CalendarIcon.js';
+export { ChevronDownIcon } from './ChevronDownIcon.js';
+export { ChevronLeftIcon } from './ChevronLeftIcon.js';
+export { ChevronRightIcon } from './ChevronRightIcon.js';
+export { ChevronUpIcon } from './ChevronUpIcon.js';
+export { ClockIcon } from './ClockIcon.js';
+export { CloseAltIcon } from './CloseAltIcon.js';
+export { CloseIcon } from './CloseIcon.js';
+export { CoopCardIcon } from './CoopCardIcon.js';
+export { CoopIcon } from './CoopIcon.js';
+export { CoopLocationIcon } from './CoopLocationIcon.js';
+export { DownloadIcon } from './DownloadIcon.js';
+export { HomeIcon } from './HomeIcon.js';
+export { InformationIcon } from './InformationIcon.js';
+export { LoadingIcon } from './LoadingIcon.js';
+export { LocationIcon } from './LocationIcon.js';
+export { MailIcon } from './MailIcon.js';
+export { MenuIcon } from './MenuIcon.js';
+export { MessageIcon } from './MessageIcon.js';
+export { MinusIcon } from './MinusIcon.js';
+export { OpenNewIcon } from './OpenNewIcon.js';
+export { PencilIcon } from './PencilIcon.js';
+export { PhoneIcon } from './PhoneIcon.js';
+export { QuestionIcon } from './QuestionIcon.js';
+export { ScooterIcon } from './ScooterIcon.js';
+export { SearchIcon } from './SearchIcon.js';
+export { SettingsIcon } from './SettingsIcon.js';
+export { TickAltIcon } from './TickAltIcon.js';
+export { TickIcon } from './TickIcon.js';
+export { VanIcon } from './VanIcon.js';
+export { WarningIcon } from './WarningIcon.js';
+export { WriteIcon } from './WriteIcon.js';

package/dist/components/Image/Image.d.ts

@@ -11,8 +11,5 @@ export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
     /** **(Optional)** Specifies width of the Image */
     width?: string;
 }
-/**
- * A wrapper around the image HTML tag, to help implement best practices like lazy loading, and assist with cropping and sizing images.
- */
 export declare const Image: ({ alt, crop, height, src, width, ...props }: ImageProps) => JSX.Element;
 export default Image;

package/dist/components/Image/Image.js

@@ -21,9 +21,6 @@ const getContentfulParams = (src, width, height) => {
         width: (_b = url.searchParams.get("w")) !== null && _b !== void 0 ? _b : width,
     };
 };
-/**
- * A wrapper around the image HTML tag, to help implement best practices like lazy loading, and assist with cropping and sizing images.
- */
 const Image = (_a) => {
     var { alt, crop, height, src, width = "640" } = _a, props = __rest(_a, ["alt", "crop", "height", "src", "width"]);
     let params = { height, src, width };

package/dist/components/Pill/Pill.d.ts

@@ -19,8 +19,5 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies what should be the Pill size. */
     size?: "sm" | "md" | "lg" | "xl";
 }
-/**
- * The Pill component is a small, sligtly rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
- */
 export declare const Pill: ({ as, background, badge, badgeBackground, children, className, href, size, ...props }: PillProps) => JSX.Element;
 export default Pill;

package/dist/components/Pill/Pill.js

@@ -4,9 +4,6 @@ import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
 
-/**
- * The Pill component is a small, sligtly rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
- */
 const Pill = (_a) => {
     var { as, background = "tint-grey", badge, badgeBackground = "offers-red", children, className = "", href, size = "md" } = _a, props = __rest(_a, ["as", "background", "badge", "badgeBackground", "children", "className", "href", "size"]);
     let element = href ? "a" : "span";

package/dist/components/SearchBox/SearchBox.d.ts

@@ -27,22 +27,5 @@ export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
     /** **(Optional)** Receives the variant to be applied to SearchBox component. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
 }
-/**
- * SearchBox component allows a person to enter a word or a phrase to find relevant content.
- *
- * The `label` prop is mandatory but not visible by default (it is visible for screen readers). You can make it visible to humans by setting `labelVisible` to true.
- *
- * If you are using a single icon with no text for `button.label`, ensure you pass an `alt` property to the icon for accessibility purposes.
- *
- * You can provide an `action` to submit input like a normal HTML form, or an `onSubmit` callback to handle submissions client-side.
- *
- * **Good to know:** SearchBox requires both `SearchBox` and `Button` css/scss files.
- *
- * ```
- * import "@coopdigital/styles/components/Searchbox.css"
- * import "@coopdigital/styles/components/Button.css"
- *
- * ```
- */
 export declare const SearchBox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchBoxProps) => JSX.Element;
 export default SearchBox;

package/dist/components/SearchBox/SearchBox.js

@@ -8,23 +8,6 @@ const defaultButtonProps = {
     label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
     loadingText: "",
 };
-/**
- * SearchBox component allows a person to enter a word or a phrase to find relevant content.
- *
- * The `label` prop is mandatory but not visible by default (it is visible for screen readers). You can make it visible to humans by setting `labelVisible` to true.
- *
- * If you are using a single icon with no text for `button.label`, ensure you pass an `alt` property to the icon for accessibility purposes.
- *
- * You can provide an `action` to submit input like a normal HTML form, or an `onSubmit` callback to handle submissions client-side.
- *
- * **Good to know:** SearchBox requires both `SearchBox` and `Button` css/scss files.
- *
- * ```
- * import "@coopdigital/styles/components/Searchbox.css"
- * import "@coopdigital/styles/components/Button.css"
- *
- * ```
- */
 const SearchBox = (_a) => {
     var _b, _c;
     var { action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green" } = _a, props = __rest(_a, ["action", "aria-placeholder", "autoCapitalize", "autoComplete", "button", "className", "label", "labelVisible", "name", "onSubmit", "placeholder", "size", "variant"]);

package/dist/components/Signpost/Signpost.d.ts

@@ -15,8 +15,5 @@ export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies the image URL and alt text of the Signpost */
     image?: ImageProps;
 }
-/**
- * Signposts allow you to create links to permanent content you think people are looking for.
- */
 export declare const Signpost: ({ as, children, className, headingLevel, href, image, ...props }: SignpostProps) => JSX.Element;
 export default Signpost;

package/dist/components/Signpost/Signpost.js

@@ -3,9 +3,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Image } from '../Image/Image.js';
 
-/**
- * Signposts allow you to create links to permanent content you think people are looking for.
- */
 const Signpost = (_a) => {
     var { as, children, className = "", headingLevel = "h3", href, image } = _a, props = __rest(_a, ["as", "children", "className", "headingLevel", "href", "image"]);
     let element = "a";

package/dist/components/SkipNav/SkipNav.d.ts

@@ -14,22 +14,5 @@ export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
      * Defaults to a single link anchored to `#main` */
     links?: SkipNavLink[];
 }
-/**
- * The Skip Nav component allows screen reader and keyboard users to go directly to the main content.
- *
- * ### Links
- * Links within the skip navigation component should take the user directly to the main areas of the page. These are usually the:
- * - navigation
- * - main content
- * - footer
- * - search (if applicable)
- *
- *
- * ### Using skip navigation on a page
- * - The skip navigation function should be the first thing that appears on a page when it has loaded and a user presses the tab key.
- * - Pressing the tab key again should then cycle through 'skip to main content', 'skip to navigation' and 'skip to footer' links.
- * - Pressing enter will take the user to the correct part of the page and apply the focus ring to the first interactive element in that section.
- * - If the user tabs through the skip navigation without selecting an option the Co‑op logo should be the next element that has the focus ring applied.
- */
 export declare const SkipNav: ({ className, isVisible, links, ...props }: SkipNavProps) => JSX.Element;
 export default SkipNav;

package/dist/components/SkipNav/SkipNav.js

@@ -2,23 +2,6 @@ import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsx } from 'react/jsx-runtime';
 
 const defaultLinks = [{ href: "#main", label: "Skip to main content" }];
-/**
- * The Skip Nav component allows screen reader and keyboard users to go directly to the main content.
- *
- * ### Links
- * Links within the skip navigation component should take the user directly to the main areas of the page. These are usually the:
- * - navigation
- * - main content
- * - footer
- * - search (if applicable)
- *
- *
- * ### Using skip navigation on a page
- * - The skip navigation function should be the first thing that appears on a page when it has loaded and a user presses the tab key.
- * - Pressing the tab key again should then cycle through 'skip to main content', 'skip to navigation' and 'skip to footer' links.
- * - Pressing enter will take the user to the correct part of the page and apply the focus ring to the first interactive element in that section.
- * - If the user tabs through the skip navigation without selecting an option the Co‑op logo should be the next element that has the focus ring applied.
- */
 const SkipNav = (_a) => {
     var { className = "", isVisible = false, links = defaultLinks } = _a, props = __rest(_a, ["className", "isVisible", "links"]);
     const componentProps = Object.assign({ className: `coop-skip-nav ${className}` }, props);

package/dist/components/Squircle/Squircle.d.ts

@@ -1,6 +1,6 @@
-import type { JSX } from "react";
+import type { HTMLAttributes, JSX } from "react";
 import { CoopBlue, Green, OffersRed } from "../../types/colors";
-export interface SquircleProps {
+export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies the background color of the Squircle. */
     background?: OffersRed | CoopBlue | Green;
     /** **(Optional)** Represents the content inside the Squircle component. It can be any valid JSX or string. */
@@ -10,8 +10,5 @@ export interface SquircleProps {
     /** **(Optional)** Specifies what should be the Squircle size */
     size?: "sm" | "md" | "lg";
 }
-/**
- * Squircle to use on components like Cards, etc.
- */
 export declare const Squircle: ({ background, children, className, size, ...props }: SquircleProps) => JSX.Element;
 export default Squircle;

package/dist/components/Squircle/Squircle.js

@@ -2,9 +2,6 @@ import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsx } from 'react/jsx-runtime';
 import { bgPropToClass } from '../../utils/index.js';
 
-/**
- * Squircle to use on components like Cards, etc.
- */
 const Squircle = (_a) => {
     var { background = "offers-red", children, className, size = "lg" } = _a, props = __rest(_a, ["background", "children", "className", "size"]);
     const componentProps = Object.assign({ className: `coop-squircle ${bgPropToClass(background, className)} ${className !== null && className !== void 0 ? className : ""}`, "data-size": size.length && size !== "lg" ? size : undefined }, props);

package/dist/components/Tag/Tag.d.ts

@@ -13,15 +13,5 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies the URL that the Tag component will link to when clicked. */
     href?: string;
 }
-/**
- * Tag is a simple component that is meant to communicate a brief message such as categories.
- *
- * It has similarities with Pill component but also has differences such as:
- * - Tag doesn't accept a badge option
- * - Tags have more rounded corners compared to Pill
- * - Tags are more compact compared to Pill
- * - Tag components should be used as tags to communicate brief message while Pill component is more versatile and has more styling options
- *
- */
 export declare const Tag: ({ as, background, children, className, href, ...props }: TagProps) => JSX.Element;
 export default Tag;

package/dist/components/Tag/Tag.js

@@ -3,16 +3,6 @@ import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
 
-/**
- * Tag is a simple component that is meant to communicate a brief message such as categories.
- *
- * It has similarities with Pill component but also has differences such as:
- * - Tag doesn't accept a badge option
- * - Tags have more rounded corners compared to Pill
- * - Tags are more compact compared to Pill
- * - Tag components should be used as tags to communicate brief message while Pill component is more versatile and has more styling options
- *
- */
 const Tag = (_a) => {
     var { as, background = "tint-grey", children, className = "", href } = _a, props = __rest(_a, ["as", "background", "children", "className", "href"]);
     let element = href ? "a" : "span";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -10,6 +10,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./Icon": {
+      "types": "./dist/components/Icon/index.d.ts",
+      "default": "./dist/components/Icon/index.js"
     }
   },
   "files": [
@@ -34,6 +38,7 @@
     "test:e2e:ui": "npx playwright test --ui",
     "test:e2e:ci": "npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL",
     "build": "tsx scripts build",
+    "build:docs": "tsx scripts build-docs",
     "build:icons": "tsx scripts build-icons",
     "build:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
     "storybook": "storybook dev -p 6006",
@@ -45,7 +50,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.16.1",
+    "@coopdigital/styles": "^0.16.3",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -70,5 +75,5 @@
   "dependencies": {
     "clsx": "^2.1.1"
   },
-  "gitHead": "8c11cfec54452dacb609b1a61075a2dbc1142ad1"
+  "gitHead": "4b0b52bb134f10067e1c87b0ba9afab3504f5368"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,26 +1,16 @@
 import type { HTMLAttributes, JSX, ReactNode } from "react"
 
 export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Represents the content inside the AlertBanner component. It can be any valid JSX or string. */
+  /** **(Optional)** Main content inside the banner. It can be any valid JSX or string. */
   children?: string | ReactNode
-  /** **(Optional)** Receives any className to be applied to AlertBanner component. */
+  /** **(Optional)** Additional CSS classes to be applied to the component. */
   className?: string
-  /** Specifies the AlertBanner heading. */
+  /** Main title of the banner, rendered as a `h2`. */
   heading: string
-  /** **(Optional)** Specifies the AlertBanner variant. */
+  /** **(Optional)** Specify which banner variant to use. */
   variant?: "black" | "default"
 }
 
-/**
- * The Alert Banner component is used to highlight events that might limit availability of a service we provide.
- * <br />
- * - the service the user is trying to access is experiencing problems
- * - planned system maintenance is coming soon
- * - the user’s login session is about to expire
- * <br />
- * <p>Only use alert notifications when absolutely necessary. Using them too often could make the problem worse.<p/>
- *
- */
 export const AlertBanner = ({
   children,
   className = "",

package/src/components/Author/Author.tsx

@@ -3,22 +3,18 @@ import type { HTMLAttributes, JSX } from "react"
 import { Image, ImageProps } from "../Image"
 
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specifies the content author */
+  /** **(Optional)** Specify the content author. */
   author?: string
-  /** **(Optional)** Receives any className to be applied to Author component. */
+  /** **(Optional)** Additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specifies 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)** Specifies the text that will prefix the date, e.g. "Published" */
+  /** **(Optional)** Specify the text that will prefix the date, e.g. "Published". */
   datePrefix?: string
-  /** **(Optional)** Specifies the image properties of Author */
+  /** **(Optional)** Specify Image properties of the Author avatar. */
   image?: ImageProps
 }
 
-/**
- * Author is a component that can be used inside any article or Card component to communicate respective author and date of publication.
- */
-
 export const Author = ({
   author = "Co-op team",
   className = "",

package/src/components/Button/Button.tsx

@@ -48,9 +48,6 @@ type OnClickHandler =
   | React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
   | ((event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => Promise<void>)
 
-/**
- * The Button component is an interactive element that people can use to take an action.
- */
 export const Button = ({
   as,
   children,

package/src/components/Card/Card.tsx

@@ -58,9 +58,6 @@ function getCardLinkElement(as: CardProps["as"], href?: string) {
   }
 }
 
-/**
- * A Card lets you highlight and link to more in-depth content on another page. The component typically includes a heading, image, and an optional description.
- */
 export const Card = ({
   as,
   background,

package/src/components/Expandable/Expandable.tsx

@@ -16,11 +16,6 @@ export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElemen
   summary: React.ReactNode
 }
 
-/**
- * The Expandable component wraps content in an expandable block using the details/summary HTML elements.
- * It can be used to reveal more context for a specific issue or action.
- */
-
 export const Expandable = ({
   background = "tint-grey",
   children,

package/src/components/Image/Image.tsx

@@ -34,9 +34,6 @@ const getContentfulParams = (src: string, width: string, height: string | undefi
   }
 }
 
-/**
- * A wrapper around the image HTML tag, to help implement best practices like lazy loading, and assist with cropping and sizing images.
- */
 export const Image = ({
   alt,
   crop,

package/src/components/Pill/Pill.tsx

@@ -26,9 +26,6 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   size?: "sm" | "md" | "lg" | "xl"
 }
 
-/**
- * The Pill component is a small, sligtly rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
- */
 export const Pill = ({
   as,
   background = "tint-grey",

package/src/components/SearchBox/SearchBox.tsx

@@ -42,23 +42,6 @@ const defaultButtonProps: SearchBoxProps["button"] = {
   loadingText: "",
 }
 
-/**
- * SearchBox component allows a person to enter a word or a phrase to find relevant content.
- *
- * The `label` prop is mandatory but not visible by default (it is visible for screen readers). You can make it visible to humans by setting `labelVisible` to true.
- *
- * If you are using a single icon with no text for `button.label`, ensure you pass an `alt` property to the icon for accessibility purposes.
- *
- * You can provide an `action` to submit input like a normal HTML form, or an `onSubmit` callback to handle submissions client-side.
- *
- * **Good to know:** SearchBox requires both `SearchBox` and `Button` css/scss files.
- *
- * ```
- * import "@coopdigital/styles/components/Searchbox.css"
- * import "@coopdigital/styles/components/Button.css"
- *
- * ```
- */
 export const SearchBox = ({
   action,
   "aria-placeholder": ariaPlaceholder,

package/src/components/Signpost/Signpost.tsx

@@ -20,10 +20,6 @@ export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   image?: ImageProps
 }
 
-/**
- * Signposts allow you to create links to permanent content you think people are looking for.
- */
-
 export const Signpost = ({
   as,
   children,

package/src/components/SkipNav/SkipNav.tsx

@@ -19,23 +19,6 @@ export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
 
 const defaultLinks = [{ href: "#main", label: "Skip to main content" }]
 
-/**
- * The Skip Nav component allows screen reader and keyboard users to go directly to the main content.
- *
- * ### Links
- * Links within the skip navigation component should take the user directly to the main areas of the page. These are usually the:
- * - navigation
- * - main content
- * - footer
- * - search (if applicable)
- *
- *
- * ### Using skip navigation on a page
- * - The skip navigation function should be the first thing that appears on a page when it has loaded and a user presses the tab key.
- * - Pressing the tab key again should then cycle through 'skip to main content', 'skip to navigation' and 'skip to footer' links.
- * - Pressing enter will take the user to the correct part of the page and apply the focus ring to the first interactive element in that section.
- * - If the user tabs through the skip navigation without selecting an option the Co‑op logo should be the next element that has the focus ring applied.
- */
 export const SkipNav = ({
   className = "",
   isVisible = false,