@coopdigital/react 1.12.0 → 1.13.0

package/dist/components/Textarea/Textarea.js

@@ -1,42 +1,56 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useState } from 'react';
-import { useDebounce } from '../../hooks/useDebounce.js';
-import { useField } from '../Field/Field.context.js';
-
+import { useField } from "../Field/Field.context.js";
+import { useDebounce } from "../../hooks/useDebounce.js";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/Textarea/Textarea.tsx
 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"}`;
+	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, placeholder, ref, rows = 4, size, ...props }) => {
-    var _a;
-    const field = useField();
-    const componentProps = {
-        "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
-        className: clsx("coop-textarea", "coop-field-element", className),
-        cols,
-        "data-error": error !== null && error !== void 0 ? error : undefined,
-        "data-size": size !== null && size !== void 0 ? size : undefined,
-        disabled,
-        id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
-        maxLength: cutoff ? maxLength : undefined,
-        name,
-        placeholder,
-        rows,
-        ...props,
-    };
-    const [remaining, setRemaining] = useState(maxLength);
-    const debouncedRemaining = useDebounce(remaining, DEBOUNCE_DELAY);
-    const showCounter = !disabled && counter && maxLength && remaining != null && debouncedRemaining != null;
-    const handleChange = (e) => {
-        userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(e);
-        if (maxLength && e.target)
-            setRemaining(maxLength - e.target.value.length);
-    };
-    // const formItemProps = { "aria-disabled": disabled ? true : undefined }
-    return (jsxs("div", { className: "coop-textarea-wrapper", children: [jsx("textarea", { ...componentProps, onChange: handleChange, ref: ref }), showCounter && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": true }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
+const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, fit = false, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows = 4, size, ...props }) => {
+	const field = useField();
+	const componentProps = {
+		"aria-placeholder": placeholder ?? ariaPlaceholder ?? void 0,
+		className: clsx("coop-textarea", "coop-field-element", className),
+		cols,
+		"data-error": error ?? void 0,
+		"data-fit": fit || void 0,
+		"data-size": size ?? void 0,
+		disabled,
+		id: id ?? field?.id,
+		maxLength: cutoff ? maxLength : void 0,
+		name,
+		placeholder,
+		rows,
+		...props
+	};
+	const [remaining, setRemaining] = useState(maxLength);
+	const debouncedRemaining = useDebounce(remaining, DEBOUNCE_DELAY);
+	const showCounter = !disabled && counter && maxLength && remaining != null && debouncedRemaining != null;
+	const handleChange = (e) => {
+		userOnChange?.(e);
+		if (maxLength && e.target) setRemaining(maxLength - e.target.value.length);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "coop-textarea-wrapper",
+		children: [/* @__PURE__ */ jsx("textarea", {
+			...componentProps,
+			onChange: handleChange,
+			ref
+		}), showCounter && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("small", {
+			"aria-hidden": "true",
+			className: "coop-textarea-counter",
+			...remaining < 0 && { "data-error": true },
+			children: charCountMessage(remaining)
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			className: "sr-only",
+			children: charCountMessage(debouncedRemaining)
+		})] })]
+	});
 };
 Textarea.slot = { name: "Textarea" };
-
+//#endregion
 export { Textarea, Textarea as default };

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

@@ -1,4 +1,2 @@
-import Textarea from "./Textarea";
-export default Textarea;
-export { Textarea };
-export * from "./Textarea";
+import { Textarea, TextareaProps } from "./Textarea.js";
+export { Textarea, Textarea as default, TextareaProps };

package/dist/components/Textarea/index.js

@@ -0,0 +1,5 @@
+import { Textarea } from "./Textarea.js";
+//#region src/components/Textarea/index.ts
+var Textarea_default = Textarea;
+//#endregion
+export { Textarea, Textarea_default as default };

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

@@ -1,94 +1,94 @@
-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.
-     *
-     * 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>;
+import React, { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#region src/components/ValidationSummary/ValidationSummary.d.ts
+interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(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>;
 }
 interface ValidationSummaryHeadingProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Specify a custom element to use instead of `h2`. */
-    as?: "h2" | "h3" | "h4" | "h5" | "h6";
-    /** **(Optional)** Content inside the Heading.
-     *
-     * Defaults to `There's a problem`.
-     */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
-    className?: string;
+  /** **(Optional)** Specify a custom element to use instead of `h2`. */
+  as?: "h2" | "h3" | "h4" | "h5" | "h6";
+  /** **(Optional)** Content inside the Heading.
+   *
+   * Defaults to `There's a problem`.
+   */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+  className?: string;
 }
 interface ValidationSummaryPromptProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Content inside the Prompt.
-     *
-     * Defaults to `Check the form. You must:`.
-     */
-    children?: React.ReactNode;
+  /** **(Optional)** Content inside the Prompt.
+   *
+   * Defaults to `Check the form. You must:`.
+   */
+  children?: React.ReactNode;
 }
 interface FieldError {
-    message?: string | number;
-    ref?: {
-        focus?: () => void;
-        id?: string;
-    };
-    type?: string | number;
+  message?: string | number;
+  ref?: {
+    focus?: () => void;
+    id?: string;
+  };
+  type?: string | number;
 }
 interface ValidationSummaryErrorsProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Content inside the Errors. */
-    errors?: Record<string, FieldError>;
+  /** **(Optional)** Content inside the Errors. */
+  errors?: Record<string, FieldError>;
 }
 declare const ValidationSummary: {
-    ({ autoScroll, children, className, forceMount, ref, ...props }: ValidationSummaryProps): JSX.Element | null;
+  ({ autoScroll, children, className, forceMount, ref, ...props }: ValidationSummaryProps): JSX.Element | null;
+  slot: {
+    name: string;
+  };
+  Heading: {
+    ({ as, children, className }: ValidationSummaryHeadingProps): JSX.Element;
     slot: {
-        name: string;
-    };
-    Heading: {
-        ({ as, children, className, }: ValidationSummaryHeadingProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+      name: string;
     };
-    Prompt: {
-        ({ children, }: ValidationSummaryPromptProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+  };
+  Prompt: {
+    ({ children }: ValidationSummaryPromptProps): JSX.Element;
+    slot: {
+      name: string;
     };
-    Errors: {
-        ({ errors }: ValidationSummaryErrorsProps): JSX.Element | null;
-        slot: {
-            name: string;
-        };
+  };
+  Errors: {
+    ({ errors }: ValidationSummaryErrorsProps): JSX.Element | null;
+    slot: {
+      name: string;
     };
+  };
 };
 declare const ValidationSummaryHeading: {
-    ({ as, children, className, }: ValidationSummaryHeadingProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ as, children, className }: ValidationSummaryHeadingProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
 declare const ValidationSummaryPrompt: {
-    ({ children, }: ValidationSummaryPromptProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ children }: ValidationSummaryPromptProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
 declare const ValidationSummaryErrors: {
-    ({ errors }: ValidationSummaryErrorsProps): JSX.Element | null;
-    slot: {
-        name: string;
-    };
+  ({ errors }: ValidationSummaryErrorsProps): JSX.Element | null;
+  slot: {
+    name: string;
+  };
 };
-export default ValidationSummary;
-export { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, };
+//#endregion
+export { ValidationSummary, ValidationSummary as default, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -1,71 +1,81 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import mergeRefs from 'merge-refs';
-import React, { useRef, useEffect } from 'react';
-import { useSlots } from '../../hooks/useSlots.js';
-import { sanitizeFieldId, getFieldElement } from './validationsummary-utils.js';
-
+import { useSlots } from "../../hooks/useSlots.js";
+import { getFieldElement, sanitizeFieldId } from "./validationsummary-utils.js";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from "react";
+import mergeRefs from "merge-refs";
+//#region src/components/ValidationSummary/ValidationSummary.tsx
 const componentSlots = {
-    Children: null,
-    ValidationSummaryErrors: null,
-    ValidationSummaryHeading: null,
-    ValidationSummaryPrompt: null,
+	Children: null,
+	ValidationSummaryErrors: null,
+	ValidationSummaryHeading: null,
+	ValidationSummaryPrompt: null
 };
 const ValidationSummary = ({ autoScroll = true, children, className, forceMount = false, ref, ...props }) => {
-    var _a;
-    const slots = { ...useSlots(componentSlots, children) };
-    const errors = React.isValidElement(slots.ValidationSummaryErrors) &&
-        Object.keys((_a = slots.ValidationSummaryErrors.props.errors) !== null && _a !== void 0 ? _a : {});
-    const hasErrors = Object.keys(errors).length > 0;
-    const internalRef = useRef(null);
-    useEffect(() => {
-        var _a, _b;
-        if (hasErrors && autoScroll) {
-            const form = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.closest("form");
-            if (typeof (form === null || form === void 0 ? void 0 : form.scrollIntoView) === "function")
-                form.scrollIntoView({ behavior: "smooth" });
-            (_b = internalRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-    }, [autoScroll, errors, hasErrors]);
-    if (!hasErrors && !forceMount) {
-        return null;
-    }
-    const componentProps = {
-        className: clsx("coop-validation-summary ", className),
-        ...props,
-    };
-    return (jsxs("div", { ...componentProps, "aria-live": "assertive", ref: mergeRefs(internalRef, ref), role: "alert", tabIndex: -1, children: [slots.ValidationSummaryHeading, slots.ValidationSummaryPrompt, slots.ValidationSummaryErrors, slots.Children] }));
+	const slots = { ...useSlots(componentSlots, children) };
+	const errors = React.isValidElement(slots.ValidationSummaryErrors) && Object.keys(slots.ValidationSummaryErrors.props.errors ?? {});
+	const hasErrors = Object.keys(errors).length > 0;
+	const internalRef = useRef(null);
+	useEffect(() => {
+		if (hasErrors && autoScroll) {
+			const form = internalRef.current?.closest("form");
+			if (typeof form?.scrollIntoView === "function") form.scrollIntoView({ behavior: "smooth" });
+			internalRef.current?.focus();
+		}
+	}, [
+		autoScroll,
+		errors,
+		hasErrors
+	]);
+	if (!hasErrors && !forceMount) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("coop-validation-summary ", className),
+		...props,
+		"aria-live": "assertive",
+		ref: mergeRefs(internalRef, ref),
+		role: "alert",
+		tabIndex: -1,
+		children: [
+			slots.ValidationSummaryHeading,
+			slots.ValidationSummaryPrompt,
+			slots.ValidationSummaryErrors,
+			slots.Children
+		]
+	});
 };
-const ValidationSummaryHeading = ({ as = "h2", children = "There's a problem", className, }) => {
-    return React.createElement(as, { className: clsx("coop-validation-summary--heading", className) }, children);
+const ValidationSummaryHeading = ({ as = "h2", children = "There's a problem", className }) => {
+	return React.createElement(as, { className: clsx("coop-validation-summary--heading", className) }, children);
 };
-const ValidationSummaryPrompt = ({ children = "Check the form. You must:", }) => {
-    return jsx(Fragment, { children: children });
+const ValidationSummaryPrompt = ({ children = "Check the form. You must:" }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children });
 };
-const focusable = ["INPUT", "TEXTAREA", "SELECT"];
+const focusable = [
+	"INPUT",
+	"TEXTAREA",
+	"SELECT"
+];
 const ValidationSummaryErrors = ({ errors }) => {
-    var _a;
-    const errorsArray = (_a = (errors && Object.entries(errors))) !== null && _a !== void 0 ? _a : [];
-    return errorsArray.length ? (jsx("div", { className: "coop-validation-summary--errors", children: jsx("ul", { children: errorsArray.map(([field, error]) => {
-                var _a;
-                const id = ((_a = error.ref) === null || _a === void 0 ? void 0 : _a.id) ? sanitizeFieldId(error.ref.id) : undefined;
-                return (jsx("li", { children: jsx("a", { href: "#", onClick: (e) => {
-                            var _a;
-                            e.preventDefault();
-                            const el = getFieldElement(field, id);
-                            if (el) {
-                                if (typeof el.scrollIntoView === "function")
-                                    el.scrollIntoView();
-                                if (focusable.includes(el.nodeName)) {
-                                    el.focus();
-                                }
-                                else {
-                                    (_a = el.querySelector("input")) === null || _a === void 0 ? void 0 : _a.focus();
-                                }
-                            }
-                        }, children: error.message }) }, field));
-            }) }) })) : null;
+	const errorsArray = (errors && Object.entries(errors)) ?? [];
+	return errorsArray.length ? /* @__PURE__ */ jsx("div", {
+		className: "coop-validation-summary--errors",
+		children: /* @__PURE__ */ jsx("ul", { children: errorsArray.map(([field, error]) => {
+			const id = error.ref?.id ? sanitizeFieldId(error.ref.id) : void 0;
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+				href: "#",
+				onClick: (e) => {
+					e.preventDefault();
+					const el = getFieldElement(field, id);
+					if (el) {
+						if (typeof el.scrollIntoView === "function") el.scrollIntoView();
+						if (focusable.includes(el.nodeName)) el.focus();
+						else el.querySelector("input")?.focus();
+					}
+				},
+				children: error.message
+			}) }, field);
+		}) })
+	}) : null;
 };
 ValidationSummary.slot = { name: "ValidationSummary" };
 ValidationSummaryHeading.slot = { name: "ValidationSummaryHeading" };
@@ -74,5 +84,5 @@ ValidationSummaryErrors.slot = { name: "ValidationSummaryErrors" };
 ValidationSummary.Heading = ValidationSummaryHeading;
 ValidationSummary.Prompt = ValidationSummaryPrompt;
 ValidationSummary.Errors = ValidationSummaryErrors;
-
-export { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummary as default };
+//#endregion
+export { ValidationSummary, ValidationSummary as default, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt };

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

@@ -1,4 +1,2 @@
-import ValidationSummary from "./ValidationSummary";
-export default ValidationSummary;
-export { ValidationSummary };
-export * from "./ValidationSummary";
+import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps } from "./ValidationSummary.js";
+export { ValidationSummary, ValidationSummary as default, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };

package/dist/components/ValidationSummary/index.js

@@ -0,0 +1,5 @@
+import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt } from "./ValidationSummary.js";
+//#region src/components/ValidationSummary/index.ts
+var ValidationSummary_default = ValidationSummary;
+//#endregion
+export { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummary_default as default };

package/dist/components/ValidationSummary/validationsummary-utils.js

@@ -1,13 +1,10 @@
-const sanitizeFieldId = (id) => ((id === null || id === void 0 ? void 0 : id.startsWith("#")) ? id.slice(1) : id);
+//#region src/components/ValidationSummary/validationsummary-utils.ts
+const sanitizeFieldId = (id) => id?.startsWith("#") ? id.slice(1) : id;
 const getFieldElement = (field, id) => {
-    var _a, _b, _c;
-    if (id) {
-        const safeId = sanitizeFieldId(id);
-        return ((_a = document.querySelector(`#${safeId}`)) !== null && _a !== void 0 ? _a : document.querySelector(`[name=${safeId}]`));
-    }
-    else {
-        return ((_c = (_b = document.querySelector(`[name=${field}_display]`)) !== null && _b !== void 0 ? _b : document.querySelector(`#${field}`)) !== null && _c !== void 0 ? _c : document.querySelector(`[name=${field}]`));
-    }
+	if (id) {
+		const safeId = sanitizeFieldId(id);
+		return document.querySelector(`#${safeId}`) ?? document.querySelector(`[name=${safeId}]`);
+	} else return document.querySelector(`[name=${field}_display]`) ?? document.querySelector(`#${field}`) ?? document.querySelector(`[name=${field}]`);
 };
-
+//#endregion
 export { getFieldElement, sanitizeFieldId };

package/dist/components/icons/AccountCircleFilledIcon.d.ts

@@ -1,6 +1,8 @@
-import type { JSX, SVGProps } from "react";
+import { JSX, SVGProps } from "react";
+//#region src/components/icons/AccountCircleFilledIcon.d.ts
 interface IconProps extends SVGProps<SVGSVGElement> {
-    alt?: string;
+  alt?: string;
 }
-export declare const AccountCircleFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
-export {};
+declare const AccountCircleFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
+//#endregion
+export { AccountCircleFilledIcon };

package/dist/components/icons/AccountCircleFilledIcon.js

@@ -1,20 +1,24 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useId } from '../../hooks/useId.js';
-
+import { useId } from "../../hooks/useId.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/icons/AccountCircleFilledIcon.tsx
 const AccountCircleFilledIcon = ({ alt, className, fill, id, ref, ...props }) => {
-    const uid = useId(id);
-    const componentProps = {
-        "aria-labelledby": alt ? uid + "__title" : undefined,
-        className: clsx("coop-icon", className),
-        "data-icon": "account-circle-filled",
-        fill: fill !== null && fill !== void 0 ? fill : "currentColor",
-        id: uid,
-        role: alt ? "img" : undefined,
-        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" })] }));
+	const uid = useId(id);
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-labelledby": alt ? uid + "__title" : void 0,
+		className: clsx("coop-icon", className),
+		"data-icon": "account-circle-filled",
+		fill: fill ?? "currentColor",
+		id: uid,
+		role: alt ? "img" : void 0,
+		viewBox: "0 0 32 32",
+		...props,
+		ref,
+		children: [alt ? /* @__PURE__ */ jsx("title", {
+			id: uid + "__title",
+			children: alt
+		}) : null, /* @__PURE__ */ 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" })]
+	});
 };
-
+//#endregion
 export { AccountCircleFilledIcon };

package/dist/components/icons/AccountCircleIcon.d.ts

@@ -1,6 +1,8 @@
-import type { JSX, SVGProps } from "react";
+import { JSX, SVGProps } from "react";
+//#region src/components/icons/AccountCircleIcon.d.ts
 interface IconProps extends SVGProps<SVGSVGElement> {
-    alt?: string;
+  alt?: string;
 }
-export declare const AccountCircleIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
-export {};
+declare const AccountCircleIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
+//#endregion
+export { AccountCircleIcon };

package/dist/components/icons/AccountCircleIcon.js

@@ -1,20 +1,24 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useId } from '../../hooks/useId.js';
-
+import { useId } from "../../hooks/useId.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/icons/AccountCircleIcon.tsx
 const AccountCircleIcon = ({ alt, className, fill, id, ref, ...props }) => {
-    const uid = useId(id);
-    const componentProps = {
-        "aria-labelledby": alt ? uid + "__title" : undefined,
-        className: clsx("coop-icon", className),
-        "data-icon": "account-circle",
-        fill: fill !== null && fill !== void 0 ? fill : "currentColor",
-        id: uid,
-        role: alt ? "img" : undefined,
-        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" })] }));
+	const uid = useId(id);
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-labelledby": alt ? uid + "__title" : void 0,
+		className: clsx("coop-icon", className),
+		"data-icon": "account-circle",
+		fill: fill ?? "currentColor",
+		id: uid,
+		role: alt ? "img" : void 0,
+		viewBox: "0 0 32 32",
+		...props,
+		ref,
+		children: [alt ? /* @__PURE__ */ jsx("title", {
+			id: uid + "__title",
+			children: alt
+		}) : null, /* @__PURE__ */ 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" })]
+	});
 };
-
+//#endregion
 export { AccountCircleIcon };

package/dist/components/icons/AccountFilledIcon.d.ts

@@ -1,6 +1,8 @@
-import type { JSX, SVGProps } from "react";
+import { JSX, SVGProps } from "react";
+//#region src/components/icons/AccountFilledIcon.d.ts
 interface IconProps extends SVGProps<SVGSVGElement> {
-    alt?: string;
+  alt?: string;
 }
-export declare const AccountFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
-export {};
+declare const AccountFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => JSX.Element;
+//#endregion
+export { AccountFilledIcon };