@coopdigital/react 0.55.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';
 
@@ -33,7 +33,7 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
         ...props,
     };
     const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, { stroke: "currentColor", strokeWidth: "1px" })] })) : (children);
-    return React__default.createElement(element, { ...componentProps, ref }, finalChildren);
+    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.js

@@ -3,6 +3,7 @@
 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 { CalendarIcon } from '../icons/CalendarIcon.js';
@@ -11,7 +12,6 @@ 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 = {

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/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.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,7 +15,7 @@ const componentSlots = {
     SearchboxButton: null,
     SearchboxInput: null,
 };
-const defaultButtonText = React__default.createElement(SearchIcon, {
+const defaultButtonText = React.createElement(SearchIcon, {
     alt: "Search",
     stroke: "currentColor",
     width: 24,
@@ -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/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/hooks/useSlots.js

@@ -1,11 +1,11 @@
-import React__default from 'react';
+import React from 'react';
 
 function isKey(x, k) {
     return k in x;
 }
 function getSlotName(node) {
     var _a, _b, _c;
-    if (React__default.isValidElement(node) &&
+    if (React.isValidElement(node) &&
         node.type &&
         typeof node.type !== "string" &&
         typeof node.type !== "symbol") {
@@ -14,7 +14,7 @@ function getSlotName(node) {
     return false;
 }
 function useSlots(componentSlots, children, options) {
-    return React__default.Children.toArray(children).reduce((slots, child) => {
+    return React.Children.toArray(children).reduce((slots, child) => {
         var _a;
         const slotName = getSlotName(child);
         if (child && slotName && isKey(componentSlots, slotName)) {

package/dist/index.js

@@ -5,8 +5,8 @@ export { Card } from './components/Card/Card.js';
 export { Checkbox } from './components/Checkbox/Checkbox.js';
 export { DatePicker } from './components/DatePicker/DatePicker.js';
 export { Expandable } from './components/Expandable/Expandable.js';
-export { Field, FieldControl } from './components/Field/Field.js';
-export { Fieldset, FieldsetFields } from './components/Fieldset/Fieldset.js';
+export { Field } from './components/Field/Field.js';
+export { Fieldset } from './components/Fieldset/Fieldset.js';
 export { Flourish } from './components/Flourish/Flourish.js';
 export { Form } from './components/Form/Form.js';
 export { Image } from './components/Image/Image.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -59,20 +59,20 @@
   "description": "React components for the Experience Library design system",
   "devDependencies": {
     "@axe-core/playwright": "^4.11.1",
-    "@playwright/test": "^1.58.1",
-    "@storybook/addon-a11y": "^10.2.7",
-    "@storybook/addon-docs": "^10.2.7",
-    "@storybook/addon-onboarding": "^10.2.7",
-    "@storybook/react-vite": "^10.2.7",
+    "@playwright/test": "^1.58.2",
+    "@storybook/addon-a11y": "^10.2.16",
+    "@storybook/addon-docs": "^10.2.16",
+    "@storybook/addon-onboarding": "^10.2.16",
+    "@storybook/react-vite": "^10.2.16",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.13",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "resize-observer-polyfill": "^1.5.1",
-    "serve": "^14.2.5",
-    "storybook": "^10.2.7",
+    "serve": "^14.2.6",
+    "storybook": "^10.2.16",
     "storybook-addon-tag-badges": "^3.0.6"
   },
   "peerDependencies": {
@@ -83,10 +83,10 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.46.0",
+    "@coopdigital/styles": "^0.46.1",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "react-day-picker": "^9.12.0"
   },
-  "gitHead": "a893acdaff1f6dc817bb01d77988b1bd9dd85ad1"
+  "gitHead": "fc079482ba56be244f761f526c2b79a5da2d3bb0"
 }

package/src/components/Field/Field.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, HTMLProps, JSX, Ref } from "react"
+import type { HTMLAttributes, HTMLProps, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
@@ -35,7 +35,7 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   ref?: Ref<HTMLDivElement>
 }
 
-const Root = ({
+export const Field = ({
   boxed = false,
   children,
   className,
@@ -116,40 +116,16 @@ const Root = ({
     </div>
   )
 }
-
-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 const FieldControl = ({ children, className, ...props }: ControlProps): JSX.Element => {
-  return (
-    <div className={clsx("coop-field-control ", className)} {...props}>
-      {children}
-    </div>
-  )
-}
-
 const FieldLabel = (props: LabelProps) => <BaseLabel {...props} />
 const FieldHint = (props: HintProps) => <BaseHint {...props} />
 const FieldError = (props: ErrorProps) => <BaseError {...props} />
 
-FieldControl.config = { name: "FieldControl" }
 FieldLabel.config = { name: "FieldLabel" }
 FieldHint.config = { name: "FieldHint" }
 FieldError.config = { name: "FieldError" }
 
-export const Field = Object.assign(Root, {
-  Control: FieldControl,
-  Error: FieldError,
-  Hint: FieldHint,
-  Label: FieldLabel,
-})
-
-// Field.Label = FieldLabel
-// Field.Hint = FieldHint
-// Field.Error = FieldError
+Field.Label = FieldLabel
+Field.Hint = FieldHint
+Field.Error = FieldError
 
 export default Field

package/src/components/Fieldset/Fieldset.tsx

@@ -24,7 +24,7 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
   /** **(Optional)** Specify the size of the Fieldset and all its descendents. */
   size?: StandardSizes
 }
-const Root = ({
+export const Fieldset = ({
   children,
   className,
   disabled,
@@ -62,7 +62,7 @@ interface FieldsetFieldsProps {
   orientation?: "horizontal" | "vertical"
 }
 
-export const FieldsetFields = ({
+const FieldsetFields = ({
   boxed = false,
   children,
   className,
@@ -88,11 +88,9 @@ FieldsetLegend.config = { name: "FieldsetLegend" }
 FieldsetHint.config = { name: "FieldsetHint" }
 FieldsetError.config = { name: "FieldsetError" }
 
-export 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 default Fieldset

package/src/components/Textarea/Textarea.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import type { ChangeEvent, JSX, Ref, TextareaHTMLAttributes } from "react"
 
 import clsx from "clsx"