@coopdigital/react 0.54.0 → 0.56.0

package/README.md

@@ -9,11 +9,11 @@
 <a href="https://www.npmjs.com/package/@coopdigital/react"><img src="https://img.shields.io/npm/v/%40coopdigital%2Freact?color=E85A00" alt="npm version" /></a>
 <img alt="NPM Last Update" src="https://img.shields.io/npm/last-update/%40coopdigital%2Freact?label=published&color=6762F9">
 <img alt="NPM Downloads" src="https://img.shields.io/npm/d18m/%40coopdigital%2Freact?color=819C00">
-<a href="https://static.coop.co.uk/experience-kit-storybook-react"><img src="https://img.shields.io/badge/storybook-react-F85792" alt="storybook" /></a>
+<a href="https://experience.coop.co.uk/react/"><img src="https://img.shields.io/badge/storybook-react-F85792" alt="storybook" /></a>
 
 > React components for the Experience Library design system.
 
-You can see the full range of components and documentation on the [Experience Kit Storybook](https://static.coop.co.uk/experience-kit-storybook-react)
+You can see the full range of components and documentation on the [Experience Kit Storybook](https://experience.coop.co.uk/react/)
 
 ## Getting started
 

package/dist/components/Button/Button.js

@@ -2,7 +2,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default, { useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { hasUserBg } from '../../utils/index.js';
 import { LoadingIcon } from '../icons/LoadingIcon.js';
 
@@ -32,8 +32,8 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
         onClick: onClick ? handleClick : undefined,
         ...props,
     };
-    const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, {})] })) : (children);
-    return React__default.createElement(element, { ...componentProps, ref }, finalChildren);
+    const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, { stroke: "currentColor", strokeWidth: "1px" })] })) : (children);
+    return React.createElement(element, { ...componentProps, ref }, finalChildren);
 };
 
 export { Button, Button as default };

package/dist/components/Card/Card.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default from 'react';
+import React from 'react';
 import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg } from '../../utils/index.js';
 import { ChevronRightIcon } from '../icons/ChevronRightIcon.js';
@@ -35,12 +35,12 @@ const Card = ({ chevron = false, children, className, href, hrefAs, imagePositio
         ...props,
     };
     if (href && slots.CardHeading) {
-        slots.CardHeading = React__default.createElement(linkElement, linkProps, slots.CardHeading);
+        slots.CardHeading = React.createElement(linkElement, linkProps, slots.CardHeading);
     }
-    return (jsxs("article", { ...componentProps, ref: ref, children: [slots.CardImage, slots.CardBadge, React__default.createElement(hasLinkWrapper ? linkElement : "div", hasLinkWrapper ? { href, ...innerProps } : innerProps, jsxs("div", { className: "coop-card--content", children: [slots.CardLabel, slots.CardHeading, slots.CardBody, slots.Children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })))] }));
+    return (jsxs("article", { ...componentProps, ref: ref, children: [slots.CardImage, slots.CardBadge, React.createElement(hasLinkWrapper ? linkElement : "div", hasLinkWrapper ? { href, ...innerProps } : innerProps, jsxs("div", { className: "coop-card--content", children: [slots.CardLabel, slots.CardHeading, slots.CardBody, slots.Children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })))] }));
 };
 const CardHeading = ({ as = "h3", children, className }) => {
-    return React__default.createElement(as, { className: clsx("coop-card--heading", className) }, children);
+    return React.createElement(as, { className: clsx("coop-card--heading", className) }, children);
 };
 const CardLabel = ({ children, className }) => {
     return jsx("span", { className: clsx("coop-card--label", className), children: children });

package/dist/components/DatePicker/DatePicker.d.ts

@@ -26,11 +26,12 @@ export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     error?: boolean;
     /** **(Optional)** Specify the Date Picker id. Will be auto-generated if not set. */
     id?: string;
-    /** **(Optional)** Specify the initial month view for the picker.
+    /** **(Optional)** Specify the initial month view for the picker. Combine with `initialSelected` to pre-select a date.
      *
      * Default: today.
      */
     initialDate?: Date | DateRange;
+    /** **(Optional)** Specify whether the initial date should be pre-selected. */
     initialSelected?: boolean;
     /** **(Optional)** Specify the picker mode. */
     mode?: Mode;

package/dist/components/DatePicker/DatePicker.js

@@ -3,14 +3,15 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useMemo, useReducer, useCallback } from 'react';
+import { DayPicker } from 'react-day-picker';
 import { useId } from '../../hooks/useId.js';
 import { Button } from '../Button/Button.js';
-import { CloseIcon } from '../icons/CloseIcon.js';
+import { CalendarIcon } from '../icons/CalendarIcon.js';
+import { CrossIcon } from '../icons/CrossIcon.js';
 import { TickIcon } from '../icons/TickIcon.js';
 import { Popover } from '../Popover/Popover.js';
 import { TextInput } from '../TextInput/TextInput.js';
 import { getInitialDate, getStartDate, getEndDate, getDefaultMonth, getDateValues, shouldClose, shouldSkipParsing } from './datepicker-utils.js';
-import { DayPicker } from '../../node_modules/react-day-picker/dist/esm/DayPicker.js';
 
 const now = new Date();
 const componentConfig = {
@@ -116,9 +117,9 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
                 return lowerCaseDateFormat;
         }
     };
-    return (jsxs("div", { ...componentProps, children: [jsxs(Popover, { onOpenChange: setOpen, open: state.open, children: [jsxs(Popover.Anchor, { className: "coop-datepicker-inner", children: [jsx(TextInput, { autoComplete: "off", className: "coop-datepicker-input", disabled: disabled, id: uid + componentConfig.fieldSuffix, 
-                                //maxLength={dateFormat.length}
-                                name: name + componentConfig.fieldSuffix, onChange: updateFromInput, placeholder: getPlaceholder(), ref: ref, required: required, size: size, value: (_f = (_e = state === null || state === void 0 ? void 0 : state[mode]) === null || _e === void 0 ? void 0 : _e.input) !== null && _f !== void 0 ? _f : "" }), jsx(Popover.Trigger, { asChild: true, children: jsx(Button, { className: "coop-datepicker-button", disabled: disabled, size: size, children: "Select" }) })] }), jsxs(Popover.Content, { "aria-label": "Date picker", className: "coop-datepicker-calendar", collisionPadding: 16, sideOffset: 4, children: [jsx(Calendar
+    return (jsxs("div", { ...componentProps, children: [jsxs(Popover, { onOpenChange: setOpen, open: state.open, children: [jsx(Popover.Anchor, { className: "coop-datepicker-inner", children: jsx(TextInput, { autoComplete: "off", className: "coop-datepicker-input", disabled: disabled, id: uid + componentConfig.fieldSuffix, 
+                            //maxLength={dateFormat.length}
+                            name: name + componentConfig.fieldSuffix, onChange: updateFromInput, placeholder: getPlaceholder(), ref: ref, required: required, size: size, suffix: jsx(Popover.Trigger, { "aria-label": "Choose date", className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) }), suffixInline: true, value: (_f = (_e = state === null || state === void 0 ? void 0 : state[mode]) === null || _e === void 0 ? void 0 : _e.input) !== null && _f !== void 0 ? _f : "" }) }), jsxs(Popover.Content, { "aria-label": "Date picker", className: "coop-datepicker-calendar bg-white", collisionPadding: 16, sideOffset: 4, children: [jsx(Calendar
                             // jsx-ally throws here because we set autoFocus, but this
                             // is not a standard element. Daypicker uses this value to
                             // focus the day rather than the nav when it renders.
@@ -130,7 +131,7 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
                                 // eslint-disable-next-line jsx-a11y/no-autofocus
                                 autoFocus: true, captionLayout: "dropdown", 
                                 //defaultMonth={defaultMonth}
-                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CloseIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("div", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", role: "status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && jsx("input", { ...valueProps, value: (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : "" }), mode === "multiple" && jsx("input", { ...valueProps, value: (_l = (_k = state.multiple) === null || _k === void 0 ? void 0 : _k.field) !== null && _l !== void 0 ? _l : "" }), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${uid}_start`, name: `${name}_start`, value: (_p = (_o = (_m = state.range) === null || _m === void 0 ? void 0 : _m.field) === null || _o === void 0 ? void 0 : _o.from) !== null && _p !== void 0 ? _p : "" }), jsx("input", { ...baseValueProps, id: `${uid}_end`, name: `${name}_end`, value: (_s = (_r = (_q = state.range) === null || _q === void 0 ? void 0 : _q.field) === null || _r === void 0 ? void 0 : _r.to) !== null && _s !== void 0 ? _s : "" })] }))] }));
+                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CrossIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("div", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", role: "status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && jsx("input", { ...valueProps, value: (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : "" }), mode === "multiple" && jsx("input", { ...valueProps, value: (_l = (_k = state.multiple) === null || _k === void 0 ? void 0 : _k.field) !== null && _l !== void 0 ? _l : "" }), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${uid}_start`, name: `${name}_start`, value: (_p = (_o = (_m = state.range) === null || _m === void 0 ? void 0 : _m.field) === null || _o === void 0 ? void 0 : _o.from) !== null && _p !== void 0 ? _p : "" }), jsx("input", { ...baseValueProps, id: `${uid}_end`, name: `${name}_end`, value: (_s = (_r = (_q = state.range) === null || _q === void 0 ? void 0 : _q.field) === null || _r === void 0 ? void 0 : _r.to) !== null && _s !== void 0 ? _s : "" })] }))] }));
 };
 DatePicker.config = componentConfig;
 

package/dist/components/DatePicker/datepicker-utils.js

@@ -1,8 +1,4 @@
-import { isValid } from '../../node_modules/date-fns/isValid.js';
-import { parse } from '../../node_modules/date-fns/parse.js';
-import { addYears } from '../../node_modules/date-fns/addYears.js';
-import { format } from '../../node_modules/date-fns/format.js';
-import { isBefore } from '../../node_modules/date-fns/isBefore.js';
+import { addYears, isValid, parse, format, isBefore } from 'date-fns';
 
 function isValidDate(date) {
     return !!date && typeof date !== "string" && typeof date !== "number" && isValid(date);

package/dist/components/Expandable/Expandable.js

@@ -21,7 +21,7 @@ const Expandable = ({ children, className, ref, ...props }) => {
     return (jsxs("details", { ...componentProps, ref: ref, children: [slots.ExpandableSummary, slots.ExpandableContent] }));
 };
 const ExpandableSummary = ({ children, className, ...props }) => {
-    return (jsxs("summary", { ...props, className: className, children: [children, jsx(ChevronDownIcon, { className: "coop-expandable--icon", stroke: "currentColor", strokeWidth: 2, width: "12" })] }));
+    return (jsxs("summary", { ...props, className: className, children: [children, jsx(ChevronDownIcon, { className: "coop-expandable--icon", width: "20" })] }));
 };
 const ExpandableContent = ({ children, className, ...props }) => {
     return (jsx("div", { className: clsx("coop-expandable--content", className), ...props, children: children }));

package/dist/components/Field/Field.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX, Ref } from "react";
+import type { HTMLAttributes, Ref } from "react";
 import React from "react";
 import { type ErrorProps } from "../FieldMarkers/Error";
 import { type HintProps } from "../FieldMarkers/Hint";
@@ -19,27 +19,10 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<HTMLDivElement>;
 }
-interface ControlProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Elements inside the form control. */
-    children?: string | React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-}
-export declare const FieldControl: {
-    ({ children, className, ...props }: ControlProps): JSX.Element;
-    config: {
-        name: string;
-    };
-};
-export declare const Field: (({ boxed, children, className, error, hideErrorBar, ref, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element) & {
-    Control: {
-        ({ children, className, ...props }: ControlProps): JSX.Element;
-        config: {
-            name: string;
-        };
-    };
-    Error: {
-        (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
+export declare const Field: {
+    ({ boxed, children, className, error, hideErrorBar, ref, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
+    Label: {
+        (props: LabelProps): import("react/jsx-runtime").JSX.Element;
         config: {
             name: string;
         };
@@ -50,8 +33,8 @@ export declare const Field: (({ boxed, children, className, error, hideErrorBar,
             name: string;
         };
     };
-    Label: {
-        (props: LabelProps): import("react/jsx-runtime").JSX.Element;
+    Error: {
+        (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
         config: {
             name: string;
         };

package/dist/components/Field/Field.js

@@ -1,6 +1,6 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default from 'react';
+import React from 'react';
 import { useId } from '../../hooks/useId.js';
 import { useSlots } from '../../hooks/useSlots.js';
 import { Error } from '../FieldMarkers/Error.js';
@@ -14,7 +14,7 @@ const componentSlots = {
     FieldHint: null,
     FieldLabel: null,
 };
-const Root = ({ boxed = false, children, className, error = false, hideErrorBar = false, ref, ...props }) => {
+const Field = ({ boxed = false, children, className, error = false, hideErrorBar = false, ref, ...props }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const slots = { ...useSlots(componentSlots, children) };
     const hasMarkers = !!((_b = (_a = slots.FieldLabel) !== null && _a !== void 0 ? _a : slots.FieldError) !== null && _b !== void 0 ? _b : slots.FieldHint);
@@ -33,7 +33,7 @@ const Root = ({ boxed = false, children, className, error = false, hideErrorBar
             return true;
         });
     }
-    if (React__default.isValidElement(control)) {
+    if (React.isValidElement(control)) {
         const controlProps = control.props;
         controlId = (_c = controlProps.id) !== null && _c !== void 0 ? _c : controlId;
         controlDisabled = (_d = controlProps.disabled) !== null && _d !== void 0 ? _d : false;
@@ -41,10 +41,10 @@ const Root = ({ boxed = false, children, className, error = false, hideErrorBar
         isInline = (_k = (_j = (_h = control === null || control === void 0 ? void 0 : control.type) === null || _h === void 0 ? void 0 : _h.config) === null || _j === void 0 ? void 0 : _j.isInline) !== null && _k !== void 0 ? _k : false;
         slots.Control = controlProps.id
             ? control
-            : React__default.cloneElement(control, { id: controlId });
+            : React.cloneElement(control, { id: controlId });
     }
-    if (React__default.isValidElement(slots.FieldLabel) && !slots.FieldLabel.props.htmlFor) {
-        slots.FieldLabel = React__default.cloneElement(slots.FieldLabel, {
+    if (React.isValidElement(slots.FieldLabel) && !slots.FieldLabel.props.htmlFor) {
+        slots.FieldLabel = React.cloneElement(slots.FieldLabel, {
             htmlFor: controlId + controlSuffix,
         });
     }
@@ -58,21 +58,14 @@ const Root = ({ boxed = false, children, className, error = false, hideErrorBar
     };
     return (jsxs("div", { ...componentProps, ref: ref, children: [!isInline && hasMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] })), slots.Control && (jsxs("div", { className: "coop-field-control", children: [slots.Control, isInline && hasMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] }))] })), slots.Children] }));
 };
-const FieldControl = ({ children, className, ...props }) => {
-    return (jsx("div", { className: clsx("coop-field-control ", className), ...props, children: children }));
-};
 const FieldLabel = (props) => jsx(Label, { ...props });
 const FieldHint = (props) => jsx(Hint, { ...props });
 const FieldError = (props) => jsx(Error, { ...props });
-FieldControl.config = { name: "FieldControl" };
 FieldLabel.config = { name: "FieldLabel" };
 FieldHint.config = { name: "FieldHint" };
 FieldError.config = { name: "FieldError" };
-const Field = Object.assign(Root, {
-    Control: FieldControl,
-    Error: FieldError,
-    Hint: FieldHint,
-    Label: FieldLabel,
-});
+Field.Label = FieldLabel;
+Field.Hint = FieldHint;
+Field.Error = FieldError;
 
-export { Field, FieldControl, Field as default };
+export { Field, Field as default };

package/dist/components/Field/index.js

@@ -1,5 +1,4 @@
 import { Field } from './Field.js';
-export { FieldControl } from './Field.js';
 
 
 

package/dist/components/Fieldset/Fieldset.d.ts

@@ -21,23 +21,8 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
     /** **(Optional)** Specify the size of the Fieldset and all its descendents. */
     size?: StandardSizes;
 }
-interface FieldsetFieldsProps {
-    /** **(Optional)** Specify whether all descendent Fields should render inside a box. */
-    boxed?: boolean;
-    /** **(Optional)** Form elements inside the Fieldset.Fields container. */
-    children?: string | React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify the CheckboxGroup orientation. */
-    orientation?: "horizontal" | "vertical";
-}
-export declare const FieldsetFields: {
-    ({ boxed, children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
-    config: {
-        name: string;
-    };
-};
-export declare const Fieldset: (({ children, className, disabled, error, hideErrorBar, ref, size, ...props }: FieldsetProps) => JSX.Element) & {
+export declare const Fieldset: {
+    ({ children, className, disabled, error, hideErrorBar, ref, size, ...props }: FieldsetProps): JSX.Element;
     Error: {
         (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
         config: {
@@ -63,4 +48,14 @@ export declare const Fieldset: (({ children, className, disabled, error, hideErr
         };
     };
 };
+interface FieldsetFieldsProps {
+    /** **(Optional)** Specify whether all descendent Fields should render inside a box. */
+    boxed?: boolean;
+    /** **(Optional)** Form elements inside the Fieldset.Fields container. */
+    children?: string | React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the CheckboxGroup orientation. */
+    orientation?: "horizontal" | "vertical";
+}
 export default Fieldset;

package/dist/components/Fieldset/Fieldset.js

@@ -4,7 +4,7 @@ import { Error } from '../FieldMarkers/Error.js';
 import { Hint } from '../FieldMarkers/Hint.js';
 import { Legend } from '../FieldMarkers/Legend.js';
 
-const Root = ({ children, className, disabled, error = false, hideErrorBar = false, ref, size = "md", ...props }) => {
+const Fieldset = ({ children, className, disabled, error = false, hideErrorBar = false, ref, size = "md", ...props }) => {
     const componentProps = {
         "aria-disabled": disabled,
         className: clsx("coop-fieldset", className),
@@ -32,11 +32,9 @@ FieldsetFields.config = { name: "FieldsetField" };
 FieldsetLegend.config = { name: "FieldsetLegend" };
 FieldsetHint.config = { name: "FieldsetHint" };
 FieldsetError.config = { name: "FieldsetError" };
-const Fieldset = Object.assign(Root, {
-    Error: FieldsetError,
-    Fields: FieldsetFields,
-    Hint: FieldsetHint,
-    Legend: FieldsetLegend,
-});
+Fieldset.Error = FieldsetError;
+Fieldset.Fields = FieldsetFields;
+Fieldset.Hint = FieldsetHint;
+Fieldset.Legend = FieldsetLegend;
 
-export { Fieldset, FieldsetFields, Fieldset as default };
+export { Fieldset, Fieldset as default };

package/dist/components/Pill/Pill.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default from 'react';
+import React from 'react';
 import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg } from '../../utils/index.js';
 
@@ -19,7 +19,7 @@ const Pill = ({ as, children, className, href, ref, size = "md", ...props }) =>
     };
     // https://github.com/facebook/react/issues/34775
     // eslint-disable-next-line react-hooks/refs
-    return React__default.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children);
+    return React.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children);
 };
 const PillBadge = ({ children, className }) => {
     return (jsx("span", { className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-red", className), children: children }));

package/dist/components/Popover/Popover.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Root as Root2, Portal, Trigger, Content as Content2, Arrow as Arrow2, Close, Anchor as Anchor2 } from '../../node_modules/@radix-ui/react-popover/dist/index.js';
+import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
 import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg, bgClassToColor } from '../../utils/index.js';
@@ -12,7 +12,7 @@ const componentSlots = {
 const Popover = ({ children, ...props }) => {
     var _a;
     const slots = useSlots(componentSlots, children);
-    return (jsxs(Root2, { ...props, children: [(_a = slots.PopoverAnchor) !== null && _a !== void 0 ? _a : slots.PopoverTrigger, jsx(Portal, { children: slots.PopoverContent })] }));
+    return (jsxs(RadixPopover.Root, { ...props, children: [(_a = slots.PopoverAnchor) !== null && _a !== void 0 ? _a : slots.PopoverTrigger, jsx(RadixPopover.Portal, { children: slots.PopoverContent })] }));
 };
 const PopoverContent = ({ align = "center", alignOffset = 0, asChild = false, avoidCollisions = true, children, className, collisionPadding = 16, ref, side = "bottom", sideOffset = 4, style, ...props }) => {
     const componentProps = {
@@ -31,7 +31,7 @@ const PopoverContent = ({ align = "center", alignOffset = 0, asChild = false, av
         ...style,
         "--popover-bg": `var(--color-${bgClassToColor(componentProps.className)})`,
     };
-    return (jsxs(Content2, { ref: ref, ...componentProps, children: [children, jsx(Arrow2, { className: "coop-popover-arrow" })] }));
+    return (jsxs(RadixPopover.Content, { ref: ref, ...componentProps, children: [children, jsx(RadixPopover.Arrow, { className: "coop-popover-arrow" })] }));
 };
 const PopoverTrigger = ({ asChild = false, children, className, ...props }) => {
     const componentProps = {
@@ -46,7 +46,7 @@ const PopoverTrigger = ({ asChild = false, children, className, ...props }) => {
         className: clsx("coop-popover-trigger", className),
         ...props,
     };
-    return jsx(Trigger, { ...componentProps, children: children });
+    return jsx(RadixPopover.Trigger, { ...componentProps, children: children });
 };
 const PopoverClose = ({ asChild = false, children, className, ...props }) => {
     const componentProps = {
@@ -54,14 +54,14 @@ const PopoverClose = ({ asChild = false, children, className, ...props }) => {
         className: clsx("coop-popover-close", className),
         ...props,
     };
-    return (jsx(Close, { "aria-label": "Close", ...componentProps, children: children }));
+    return (jsx(RadixPopover.Close, { "aria-label": "Close", ...componentProps, children: children }));
 };
 const PopoverAnchor = ({ asChild = false, children, ...props }) => {
     const componentProps = {
         asChild,
         ...props,
     };
-    return jsx(Anchor2, { ...componentProps, children: children });
+    return jsx(RadixPopover.Anchor, { ...componentProps, children: children });
 };
 PopoverTrigger.config = { name: "PopoverTrigger" };
 PopoverContent.config = { name: "PopoverContent" };

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

@@ -21,7 +21,7 @@ export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
     /** **(Optional)** Specify the TextInput name, also used as the URL search parameter. Defaults to `query`. */
     name?: string;
     /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the Searchbox will be in a pending state until the promise is resolved. */
-    onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLElement> | undefined;
     /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
     placeholder?: string;
     /** **(Optional)** Specify a custom React ref for this component. */

package/dist/components/Searchbox/Searchbox.js

@@ -2,7 +2,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default, { useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useId } from '../../hooks/useId.js';
 import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBorder } from '../../utils/index.js';
@@ -15,10 +15,10 @@ const componentSlots = {
     SearchboxButton: null,
     SearchboxInput: null,
 };
-const defaultButtonText = React__default.createElement(SearchIcon, {
+const defaultButtonText = React.createElement(SearchIcon, {
     alt: "Search",
     stroke: "currentColor",
-    strokeWidth: 2,
+    width: 24,
 });
 const Searchbox = ({ action, children, className, id, label, labelVisible = false, onSubmit, ref, size = "md", variant = "solid", ...props }) => {
     const slots = useSlots(componentSlots, children);
@@ -49,11 +49,11 @@ const Searchbox = ({ action, children, className, id, label, labelVisible = fals
         onSubmit: onSubmit ? handleSubmit : undefined,
         ...props,
     };
-    slots.SearchboxButton = React__default.cloneElement(slots.SearchboxButton, {
+    slots.SearchboxButton = React.cloneElement(slots.SearchboxButton, {
         isLoading: isPending,
         size,
     });
-    slots.SearchboxInput = React__default.cloneElement(slots.SearchboxInput, {
+    slots.SearchboxInput = React.cloneElement(slots.SearchboxInput, {
         autoCapitalize: "off",
         id: uid,
         size,

package/dist/components/Signpost/Signpost.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default from 'react';
+import React from 'react';
 import { ChevronRightIcon } from '../icons/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
@@ -10,7 +10,7 @@ const Signpost = ({ as, children, className, headingLevel = "h3", href, image, r
         className: clsx("coop-signpost", className),
         ...props,
     };
-    return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { crop: "wide", ...image }), React__default.createElement(element, { href }, jsxs("div", { className: "coop-signpost--content", children: [React__default.createElement(headingLevel, { className: "coop-signpost--heading" }, children), jsx("span", { "aria-hidden": "true", className: "coop-signpost--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })] }))] }));
+    return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { crop: "wide", ...image }), React.createElement(element, { href }, jsxs("div", { className: "coop-signpost--content", children: [React.createElement(headingLevel, { className: "coop-signpost--heading" }, children), jsx("span", { "aria-hidden": "true", className: "coop-signpost--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })] }))] }));
 };
 
 export { Signpost, Signpost as default };

package/dist/components/Tag/Tag.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React__default from 'react';
+import React from 'react';
 import { hasUserBg } from '../../utils/index.js';
 
 const Tag = ({ as, children, className, href, ref, size = "md", ...props }) => {
@@ -10,7 +10,7 @@ const Tag = ({ as, children, className, href, ref, size = "md", ...props }) => {
         href,
         ...props,
     };
-    return React__default.createElement(element, { ...componentProps, ref }, children);
+    return React.createElement(element, { ...componentProps, ref }, children);
 };
 
 export { Tag, Tag as default };

package/dist/components/TextInput/TextInput.d.ts

@@ -15,17 +15,21 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     placeholder?: string;
     /** **(Optional)** Specify the prefix. It can be any valid JSX or string. */
     prefix?: React.ReactNode;
+    /** **(Optional)** Specify whether the prefix should be rendered inside the input. */
+    prefixInline?: boolean;
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<HTMLInputElement>;
     /** **(Optional)** Specify the TextInput size. */
     size?: StandardSizes;
     /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
     suffix?: React.ReactNode;
+    /** **(Optional)** Specify whether the suffix should be rendered inside the input. */
+    suffixInline?: boolean;
     /** **(Optional)** Specify the TextInput type. */
     type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "week" | "month" | "time";
 }
 export declare const TextInput: {
-    ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, id, name, placeholder, prefix, ref, size, suffix, type, ...props }: TextInputProps): JSX.Element;
+    ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, id, name, placeholder, prefix, prefixInline, ref, size, suffix, suffixInline, type, ...props }: TextInputProps): JSX.Element;
     config: {
         isField: true;
     };

package/dist/components/TextInput/TextInput.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, ref, size = "md", suffix, type = "text", ...props }) => {
+const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, prefixInline = false, ref, size = "md", suffix, suffixInline = false, type = "text", ...props }) => {
     var _a;
     const uid = useId(id);
     const componentProps = {
@@ -17,8 +17,14 @@ const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, e
         type,
         ...props,
     };
+    const prefixProps = prefix
+        ? { className: "coop-text-input--prefix", "data-inline": prefixInline || undefined }
+        : {};
+    const suffixProps = suffix
+        ? { className: "coop-text-input--suffix", "data-inline": suffixInline || undefined }
+        : {};
     //const formItemProps = { "aria-disabled": disabled ? true : undefined }
-    return (jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { className: "coop-text-input--prefix", children: prefix }), jsx("input", { ...componentProps, ref: ref }), suffix && jsx("span", { className: "coop-text-input--suffix", children: suffix })] }));
+    return (jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { ...prefixProps, children: prefix }), jsx("input", { ...componentProps, ref: ref }), suffix && jsx("span", { ...suffixProps, children: suffix })] }));
 };
 TextInput.config = {
     isField: true,

package/dist/components/Textarea/Textarea.js

@@ -1,3 +1,5 @@
+
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useState } from 'react';

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

@@ -0,0 +1,6 @@
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const AccountCircleFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/AccountCircleFilledIcon.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useId } from '../../hooks/useId.js';
+
+const AccountCircleFilledIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
+    const componentProps = {
+        "aria-labelledby": alt ? uid + "-title" : undefined,
+        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" })] }));
+};
+
+export { AccountCircleFilledIcon };

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

@@ -0,0 +1,6 @@
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const AccountCircleIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/AccountCircleIcon.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useId } from '../../hooks/useId.js';
+
+const AccountCircleIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
+    const componentProps = {
+        "aria-labelledby": alt ? uid + "-title" : undefined,
+        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" })] }));
+};
+
+export { AccountCircleIcon };

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

@@ -0,0 +1,6 @@
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const AccountFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};