@coopdigital/react 1.32.4 → 1.33.0

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

@@ -1,8 +1,8 @@
 import { ImageProps } from "../Image/Image.js";
 import "../Image/index.js";
-import { StandardSizes } from "../../types/index.js";
-import { PictureProps } from "../Picture/Picture.js";
 import "../Picture/index.js";
+import { PictureProps } from "../Picture/Picture.js";
+import { StandardSizes } from "../../types/index.js";
 import React, { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   /** Specify how the Card behaves across screen sizes.

package/dist/components/Card/Card.js

@@ -1,7 +1,7 @@
 import { Image } from "../Image/Image.js";
-import { hasUserBg } from "../../utils/classes.js";
 import Picture_default from "../Picture/index.js";
 import { useSlots } from "../../hooks/useSlots.js";
+import { hasUserBg } from "../../utils/classes.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";

package/dist/components/Combobox/Combobox.d.ts

@@ -1,7 +1,7 @@
-import { StandardSizes } from "../../types/index.js";
 import { ComboboxItem, ComboboxOption } from "./combobox-utils.js";
-import { TextInputProps } from "../TextInput/TextInput.js";
 import "../TextInput/index.js";
+import { TextInputProps } from "../TextInput/TextInput.js";
+import { StandardSizes } from "../../types/index.js";
 import { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, Ref } from "react";
 import { UseComboboxHighlightedIndexChange, UseComboboxInputValueChange, UseComboboxIsOpenChange, UseComboboxStateChange } from "downshift";
 export interface ComboboxSelectEvent {

package/dist/components/Combobox/Combobox.js

@@ -1,14 +1,14 @@
 "use client";
-import { useId as useId$1 } from "../../hooks/useId.js";
-import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
-import { getSlotProp } from "../../utils/slots.js";
-import { useSlots } from "../../hooks/useSlots.js";
-import { getFieldError, useField } from "../Field/Field.context.js";
 import { defaultFilter, defaultIsItemDisabled, defaultItemToString, defaultMaxResultsText, isMatchingText, normalizeOptions, resolveOption, shouldShowSelectionText } from "./combobox-internal.js";
 import { ComboboxContext, useComboboxContext } from "./Combobox.context.js";
+import { getFieldError, useField } from "../Field/Field.context.js";
+import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { useDebounce } from "../../hooks/useDebounce.js";
 import { useFormReset } from "../../hooks/useFormReset.js";
+import { useId as useId$1 } from "../../hooks/useId.js";
+import { useSlots } from "../../hooks/useSlots.js";
+import { getSlotProp } from "../../utils/slots.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";

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

@@ -1,3 +1,3 @@
-import { ComboboxItem, ComboboxOption } from "./combobox-utils.js";
 import { Combobox, ComboboxButton, ComboboxButtonProps, ComboboxControls, ComboboxControlsProps, ComboboxInput, ComboboxInputProps, ComboboxOptions, ComboboxOptionsProps, ComboboxProps, ComboboxSelectEvent } from "./Combobox.js";
+import { ComboboxItem, ComboboxOption } from "./combobox-utils.js";
 export { Combobox, Combobox as default, ComboboxButton, ComboboxButtonProps, ComboboxControls, ComboboxControlsProps, ComboboxInput, ComboboxInputProps, type ComboboxItem, type ComboboxOption, ComboboxOptions, ComboboxOptionsProps, ComboboxProps, ComboboxSelectEvent };

package/dist/components/DateInput/DateInput.d.ts

@@ -1,7 +1,7 @@
-import { StandardSizes } from "../../types/index.js";
+import { DateParts } from "../../validations/date.js";
 import { TextInputProps } from "../TextInput/TextInput.js";
 import "../TextInput/index.js";
-import { DateParts } from "../../validations/date.js";
+import { StandardSizes } from "../../types/index.js";
 import { DateInputMode } from "./dateinput-utils.js";
 import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
 export interface DateInputChangeEvent {

package/dist/components/DateInput/DateInput.js

@@ -1,9 +1,9 @@
 "use client";
-import { useId as useId$1 } from "../../hooks/useId.js";
-import { forEachSlot } from "../../utils/slots.js";
+import { Field } from "../Field/Field.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { useFormReset } from "../../hooks/useFormReset.js";
-import { Field } from "../Field/Field.js";
+import { useId as useId$1 } from "../../hooks/useId.js";
+import { forEachSlot } from "../../utils/slots.js";
 import { formatDateValue, toDateParts, toDateValue } from "../../validations/date-internal.js";
 import { getAutoComplete } from "./dateinput-utils.js";
 import { DateInputContext, useDateInput } from "./DateInput.context.js";

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

@@ -1,3 +1,3 @@
-import { DateInputMode, getAutoComplete } from "./dateinput-utils.js";
 import { DateInput, DateInputChangeEvent, DateInputDay, DateInputMonth, DateInputPartProps, DateInputProps, DateInputYear } from "./DateInput.js";
+import { DateInputMode, getAutoComplete } from "./dateinput-utils.js";
 export { DateInput, DateInput as default, DateInputChangeEvent, DateInputDay, DateInputMode, DateInputMonth, DateInputPartProps, DateInputProps, DateInputYear, getAutoComplete };

package/dist/components/DateInput/index.js

@@ -1,5 +1,5 @@
-import { getAutoComplete } from "./dateinput-utils.js";
 import { DateInput, DateInputDay, DateInputMonth, DateInputYear } from "./DateInput.js";
+import { getAutoComplete } from "./dateinput-utils.js";
 // src/components/DateInput/index.ts
 var DateInput_default = DateInput;
 export { DateInput, DateInputDay, DateInputMonth, DateInputYear, DateInput_default as default, getAutoComplete };

package/dist/components/DatePicker/DatePicker.js

@@ -1,11 +1,11 @@
 "use client";
+import { Button } from "../Button/Button.js";
+import { getFieldError, useField } from "../Field/Field.context.js";
 import { CalendarIcon } from "../icons/CalendarIcon.js";
 import { CrossIcon } from "../icons/CrossIcon.js";
 import { TickIcon } from "../icons/TickIcon.js";
-import { Button } from "../Button/Button.js";
-import { getFieldError, useField } from "../Field/Field.context.js";
-import { TextInput } from "../TextInput/TextInput.js";
 import { Popover } from "../Popover/Popover.js";
+import { TextInput } from "../TextInput/TextInput.js";
 import { getDateValues, getDefaultMonth, getEndDate, getInitialDate, getStartDate, shouldClose, shouldSkipParsing } from "./datepicker-utils.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/DatePicker/datepicker-utils.d.ts

@@ -1,4 +1,4 @@
-import { Mode } from "react-day-picker";
+import "react-day-picker";
 export interface DateRangeStr {
   from?: string;
   to?: string;

package/dist/components/Expandable/Expandable.js

@@ -1,6 +1,6 @@
 import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
-import { hasUserBg } from "../../utils/classes.js";
 import { useSlots } from "../../hooks/useSlots.js";
+import { hasUserBg } from "../../utils/classes.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/Expandable/Expandable.tsx

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

@@ -15,11 +15,16 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   error?: boolean;
   /** Specify whether the Field should show the left-hand error bar if it is in an error state. */
   hideErrorBar?: boolean;
+  /** For Radio and Checkbox, specify whether the control renders on the same row as the label.
+   *
+   * Default: `true`
+   */
+  inline?: boolean;
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
 declare const Field: {
-  ({ boxed, children, className, error: errorProp, hideErrorBar, ref, ...props }: FieldProps): JSX.Element;
+  ({ boxed, children, className, error: errorProp, hideErrorBar, inline, ref, ...props }: FieldProps): JSX.Element;
   slot: {
     name: string;
   };

package/dist/components/Field/Field.js

@@ -1,17 +1,17 @@
 "use client";
-import { useId as useId$1 } from "../../hooks/useId.js";
-import { forEachSlot, getSlotProp } from "../../utils/slots.js";
-import { getMarkerIds } from "../FieldMarkers/fieldmarkers-internal.js";
-import { FieldContext, useField } from "./Field.context.js";
 import { Error } from "../FieldMarkers/Error.js";
+import { getMarkerIds } from "../FieldMarkers/fieldmarkers-internal.js";
 import { Hint } from "../FieldMarkers/Hint.js";
 import { Label } from "../FieldMarkers/Label.js";
 import { useFieldset } from "../Fieldset/Fieldset.context.js";
+import { useId as useId$1 } from "../../hooks/useId.js";
+import { forEachSlot, getSlotProp } from "../../utils/slots.js";
+import { FieldContext, useField } from "./Field.context.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import "react";
 // src/components/Field/Field.tsx
-const Field = ({ boxed = false, children, className, error: errorProp, hideErrorBar = false, ref, ...props }) => {
+const Field = ({ boxed = false, children, className, error: errorProp, hideErrorBar = false, inline, ref, ...props }) => {
 	const internalId = useId$1();
 	const fieldset = useFieldset();
 	const error = errorProp ?? fieldset?.error ?? false;
@@ -33,10 +33,11 @@ const Field = ({ boxed = false, children, className, error: errorProp, hideError
 	const componentProps = {
 		...props,
 		"aria-disabled": controlProps.disabled || void 0,
-		className: clsx("coop-field", controlProps.inline && "coop-field-inline", className),
+		className: clsx("coop-field", className),
 		"data-boxed": boxed || void 0,
 		"data-error": error || void 0,
-		"data-hide-error": hideErrorBar || void 0
+		"data-hide-error": hideErrorBar || void 0,
+		"data-inline": inline ?? controlProps.inline
 	};
 	return /* @__PURE__ */ jsx(FieldContext.Provider, {
 		value: {

package/dist/components/FieldMarkers/Error.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+import { HTMLAttributes, ReactNode, Ref } from "react";
 export interface ErrorProps extends HTMLAttributes<HTMLSpanElement> {
   /** Content inside the component. */
   children?: ReactNode;

package/dist/components/FieldMarkers/Hint.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+import { HTMLAttributes, ReactNode, Ref } from "react";
 export interface HintProps extends HTMLAttributes<HTMLDivElement> {
   /** Content inside the component. */
   children?: ReactNode;

package/dist/components/FieldMarkers/Label.d.ts

@@ -1,4 +1,4 @@
-import { JSX, LabelHTMLAttributes, Ref } from "react";
+import { LabelHTMLAttributes, Ref } from "react";
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   /** Content inside the component. */
   children?: React.ReactNode;

package/dist/components/FieldMarkers/Legend.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, JSX, Ref } from "react";
+import { HTMLAttributes, Ref } from "react";
 export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
   /** Content inside the component. */
   children?: React.ReactNode;

package/dist/components/Fieldset/Fieldset.js

@@ -1,11 +1,11 @@
 "use client";
-import { useId } from "../../hooks/useId.js";
-import { forEachSlot, getSlotProp } from "../../utils/slots.js";
-import { getMarkerIds, joinIds } from "../FieldMarkers/fieldmarkers-internal.js";
 import { Error } from "../FieldMarkers/Error.js";
+import { getMarkerIds, joinIds } from "../FieldMarkers/fieldmarkers-internal.js";
 import { Hint } from "../FieldMarkers/Hint.js";
-import { FieldsetContext, useFieldset } from "./Fieldset.context.js";
 import { Legend } from "../FieldMarkers/Legend.js";
+import { useId } from "../../hooks/useId.js";
+import { forEachSlot, getSlotProp } from "../../utils/slots.js";
+import { FieldsetContext, useFieldset } from "./Fieldset.context.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 // src/components/Fieldset/Fieldset.tsx

package/dist/components/Pill/Pill.js

@@ -1,5 +1,5 @@
-import { hasUserBg } from "../../utils/classes.js";
 import { useSlots } from "../../hooks/useSlots.js";
+import { hasUserBg } from "../../utils/classes.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import React from "react";

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

@@ -1,8 +1,8 @@
-import { StandardSizes } from "../../types/index.js";
-import { ButtonProps } from "../Button/Button.js";
 import "../Button/index.js";
-import { TextInputProps } from "../TextInput/TextInput.js";
+import { ButtonProps } from "../Button/Button.js";
 import "../TextInput/index.js";
+import { TextInputProps } from "../TextInput/TextInput.js";
+import { StandardSizes } from "../../types/index.js";
 import React, { FormHTMLAttributes, JSX, RefObject } from "react";
 export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
   /** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */

package/dist/components/Searchbox/Searchbox.js

@@ -1,13 +1,13 @@
 "use client";
-import { useId as useId$1 } from "../../hooks/useId.js";
-import { SearchIcon } from "../icons/SearchIcon.js";
-import { hasUserBorder } from "../../utils/classes.js";
-import { getSlotProp } from "../../utils/slots.js";
 import { Button } from "../Button/Button.js";
-import { useSlots } from "../../hooks/useSlots.js";
-import TextInput_default from "../TextInput/index.js";
 import { Field, FieldLabel } from "../Field/Field.js";
+import { SearchIcon } from "../icons/SearchIcon.js";
 import { SearchboxContext, useSearchbox } from "./Searchbox.context.js";
+import TextInput_default from "../TextInput/index.js";
+import { useId as useId$1 } from "../../hooks/useId.js";
+import { useSlots } from "../../hooks/useSlots.js";
+import { getSlotProp } from "../../utils/slots.js";
+import { hasUserBorder } from "../../utils/classes.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";

package/dist/components/Signpost/Signpost.js

@@ -1,5 +1,5 @@
-import { Image } from "../Image/Image.js";
 import { ChevronRightIcon } from "../icons/ChevronRightIcon.js";
+import { Image } from "../Image/Image.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -1,8 +1,8 @@
 "use client";
-import { getSlotProp } from "../../utils/slots.js";
-import { useSlots } from "../../hooks/useSlots.js";
 import { getFieldElement, getFieldOrder, getForm, sanitizeFieldId, sortErrorsByFieldOrder } from "./validationsummary-internal.js";
 import { ValidationSummaryContext, useValidationSummary } from "./ValidationSummary.context.js";
+import { useSlots } from "../../hooks/useSlots.js";
+import { getSlotProp } from "../../utils/slots.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";

package/dist/components/ValidationSummary/validationsummary-internal.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import "react";
 export interface FieldError {
   message?: string | number;
   ref?: {

package/dist/hooks/index.js

@@ -1,5 +1,5 @@
-import { useId } from "./useId.js";
-import { useSlots } from "./useSlots.js";
 import { useDebounce } from "./useDebounce.js";
 import { useFormReset } from "./useFormReset.js";
+import { useId } from "./useId.js";
+import { useSlots } from "./useSlots.js";
 export { useDebounce, useFormReset, useId, useSlots };

package/dist/index.d.ts

@@ -1,75 +1,75 @@
 import { AlertBanner, AlertBannerHeading, AlertBannerProps } from "./components/AlertBanner/AlertBanner.js";
 import "./components/AlertBanner/index.js";
 import { Image, ImageProps } from "./components/Image/Image.js";
-import "./components/Image/index.js";
-import { Author, AuthorImage, AuthorImageProps, AuthorMeta, AuthorMetaProps, AuthorProps } from "./components/Author/Author.js";
 import "./components/Author/index.js";
-import { Box, BoxProps } from "./components/Box/Box.js";
+import { Author, AuthorImage, AuthorImageProps, AuthorMeta, AuthorMetaProps, AuthorProps } from "./components/Author/Author.js";
 import "./components/Box/index.js";
-import { Button, ButtonProps } from "./components/Button/Button.js";
+import { Box, BoxProps } from "./components/Box/Box.js";
 import "./components/Button/index.js";
+import { Button, ButtonProps } from "./components/Button/Button.js";
+import "./components/Card/index.js";
 import { Picture, PictureProps } from "./components/Picture/Picture.js";
-import "./components/Picture/index.js";
+import "./components/Checkbox/index.js";
 import { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps } from "./components/Card/Card.js";
-import "./components/Card/index.js";
+import "./components/Combobox/index.js";
 import { Checkbox, CheckboxProps } from "./components/Checkbox/Checkbox.js";
-import "./components/Checkbox/index.js";
+import "./components/DateInput/index.js";
 import { ComboboxItem, ComboboxOption } from "./components/Combobox/combobox-utils.js";
 import { TextInput, TextInputProps } from "./components/TextInput/TextInput.js";
-import "./components/TextInput/index.js";
+import "./components/DatePicker/index.js";
 import { Combobox, ComboboxButton, ComboboxButtonProps, ComboboxControls, ComboboxControlsProps, ComboboxInput, ComboboxInputProps, ComboboxOptions, ComboboxOptionsProps, ComboboxProps, ComboboxSelectEvent } from "./components/Combobox/Combobox.js";
-import "./components/Combobox/index.js";
+import "./components/Dialog/index.js";
 import { DATE_ERROR_MESSAGES, DATE_PARTS, DateErrorCode, DateErrorMessage, DatePart, DateParts, DateValidation, DateValidationError, DateValidationOptions, DateValidationSuccess, validateDate, validateDateParts, validateDob } from "./validations/date.js";
 import { DateInputMode, getAutoComplete } from "./components/DateInput/dateinput-utils.js";
 import { DateInput, DateInputChangeEvent, DateInputDay, DateInputMonth, DateInputPartProps, DateInputProps, DateInputYear } from "./components/DateInput/DateInput.js";
-import "./components/DateInput/index.js";
+import "./components/Expandable/index.js";
 import { DateType, DateTypeStr } from "./components/DatePicker/datepicker-utils.js";
 import { DatePicker, DatePickerProps } from "./components/DatePicker/DatePicker.js";
-import "./components/DatePicker/index.js";
+import "./components/Field/index.js";
 import { Dialog, DialogBody, DialogHeader, DialogProps } from "./components/Dialog/Dialog.js";
-import "./components/Dialog/index.js";
+import "./components/Fieldset/index.js";
 import { Expandable, ExpandableContent, ExpandableProps, ExpandableSummary } from "./components/Expandable/Expandable.js";
-import "./components/Expandable/index.js";
+import "./components/Flourish/index.js";
 import { Field, FieldError, FieldHint, FieldLabel } from "./components/Field/Field.js";
-import "./components/Field/index.js";
+import "./components/Form/index.js";
 import { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps } from "./components/Fieldset/Fieldset.js";
-import "./components/Fieldset/index.js";
+import "./components/Image/index.js";
 import { Flourish, FlourishProps } from "./components/Flourish/Flourish.js";
-import "./components/Flourish/index.js";
+import "./components/LoadingSpinner/index.js";
 import { Form, FormProps } from "./components/Form/Form.js";
-import "./components/Form/index.js";
+import "./components/Logo/index.js";
 import { LoadingSpinner, LoadingSpinnerProps } from "./components/LoadingSpinner/LoadingSpinner.js";
-import "./components/LoadingSpinner/index.js";
+import "./components/PasswordInput/index.js";
 import { Logo, LogoProps } from "./components/Logo/Logo.js";
-import "./components/Logo/index.js";
+import "./components/Picture/index.js";
 import { PasswordInput, PasswordInputProps } from "./components/PasswordInput/PasswordInput.js";
-import "./components/PasswordInput/index.js";
-import { Pill, PillBadge, PillProps } from "./components/Pill/Pill.js";
 import "./components/Pill/index.js";
-import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger } from "./components/Popover/Popover.js";
+import { Pill, PillBadge, PillProps } from "./components/Pill/Pill.js";
 import "./components/Popover/index.js";
-import { Prose, ProseProps } from "./components/Prose/Prose.js";
+import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger } from "./components/Popover/Popover.js";
 import "./components/Prose/index.js";
-import { Radio, RadioProps } from "./components/Radio/Radio.js";
+import { Prose, ProseProps } from "./components/Prose/Prose.js";
 import "./components/Radio/index.js";
-import { RootSVG } from "./components/RootSVG/RootSVG.js";
+import { Radio, RadioProps } from "./components/Radio/Radio.js";
 import "./components/RootSVG/index.js";
-import { Searchbox, SearchboxButton, SearchboxInput, SearchboxProps } from "./components/Searchbox/Searchbox.js";
+import { RootSVG } from "./components/RootSVG/RootSVG.js";
 import "./components/Searchbox/index.js";
-import { Section, SectionProps } from "./components/Section/Section.js";
+import { Searchbox, SearchboxButton, SearchboxInput, SearchboxProps } from "./components/Searchbox/Searchbox.js";
 import "./components/Section/index.js";
-import { Select, SelectOption, SelectOptionGroup, SelectProps } from "./components/Select/Select.js";
+import { Section, SectionProps } from "./components/Section/Section.js";
 import "./components/Select/index.js";
-import { Signpost, SignpostProps } from "./components/Signpost/Signpost.js";
+import { Select, SelectOption, SelectOptionGroup, SelectProps } from "./components/Select/Select.js";
 import "./components/Signpost/index.js";
-import { SkipNav, SkipNavProps } from "./components/SkipNav/SkipNav.js";
+import { Signpost, SignpostProps } from "./components/Signpost/Signpost.js";
 import "./components/SkipNav/index.js";
-import { Squircle, SquircleProps, SquircleSvg, SquircleSvgProps, SquircleText } from "./components/Squircle/Squircle.js";
+import { SkipNav, SkipNavProps } from "./components/SkipNav/SkipNav.js";
 import "./components/Squircle/index.js";
-import { Tag, TagProps } from "./components/Tag/Tag.js";
+import { Squircle, SquircleProps, SquircleSvg, SquircleSvgProps, SquircleText } from "./components/Squircle/Squircle.js";
 import "./components/Tag/index.js";
-import { Textarea, TextareaProps } from "./components/Textarea/Textarea.js";
+import { Tag, TagProps } from "./components/Tag/Tag.js";
 import "./components/Textarea/index.js";
+import { Textarea, TextareaProps } from "./components/Textarea/Textarea.js";
+import "./components/TextInput/index.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps } from "./components/ValidationSummary/ValidationSummary.js";
 import "./components/ValidationSummary/index.js";
 import { Wrapper, WrapperProps } from "./components/Wrapper/Wrapper.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.32.4",
+  "version": "1.33.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -76,12 +76,12 @@
   "description": "React components for the Experience Library design system",
   "devDependencies": {
     "@axe-core/playwright": "^4.14.0",
-    "@playwright/test": "^1.64.1",
-    "@storybook/addon-a11y": "^10.6.5",
-    "@storybook/addon-docs": "^10.6.5",
-    "@storybook/addon-links": "^10.6.5",
-    "@storybook/addon-onboarding": "^10.6.5",
-    "@storybook/react-vite": "^10.6.5",
+    "@playwright/test": "^1.65.0",
+    "@storybook/addon-a11y": "^10.6.6",
+    "@storybook/addon-docs": "^10.6.6",
+    "@storybook/addon-links": "^10.6.6",
+    "@storybook/addon-onboarding": "^10.6.6",
+    "@storybook/react-vite": "^10.6.6",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^19.3.0",
@@ -93,7 +93,7 @@
     "react-hook-form": "^7.91.0",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.6.5",
+    "storybook": "^10.6.6",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -117,7 +117,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.23.3",
+    "@coopdigital/styles": "^1.24.0",
     "@radix-ui/react-popover": "^1.3.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
@@ -126,5 +126,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.2"
   },
-  "gitHead": "d15ec441bc54de13638f749472251ae398878dc2"
+  "gitHead": "5dfe0e7c059ab52fcc2b68b94ea772962a5176cd"
 }

package/src/components/Field/Field.tsx

@@ -27,6 +27,11 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   error?: boolean
   /** Specify whether the Field should show the left-hand error bar if it is in an error state. */
   hideErrorBar?: boolean
+  /** For Radio and Checkbox, specify whether the control renders on the same row as the label.
+   *
+   * Default: `true`
+   */
+  inline?: boolean
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }
@@ -37,6 +42,7 @@ const Field = ({
   className,
   error: errorProp,
   hideErrorBar = false,
+  inline,
   ref,
   ...props
 }: FieldProps): JSX.Element => {
@@ -70,10 +76,11 @@ const Field = ({
   const componentProps = {
     ...props,
     "aria-disabled": controlProps.disabled || undefined,
-    className: clsx("coop-field", controlProps.inline && "coop-field-inline", className),
+    className: clsx("coop-field", className),
     "data-boxed": boxed || undefined,
     "data-error": error || undefined,
     "data-hide-error": hideErrorBar || undefined,
+    "data-inline": inline ?? controlProps.inline,
   }
 
   return (