@coopdigital/react 1.17.1 → 1.18.0

package/dist/components/Field/Field.js

@@ -1,44 +1,31 @@
 "use client";
 import { getSlotProp } from "../../utils/index.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
-import { useSlots } from "../../hooks/useSlots.js";
 import { FieldContext } from "./Field.context.js";
 import { Error } from "../FieldMarkers/Error.js";
 import { Hint } from "../FieldMarkers/Hint.js";
 import { Label } from "../FieldMarkers/Label.js";
 import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "react";
 //#region src/components/Field/Field.tsx
-const componentSlots = {
-	Children: null,
-	Control: null,
-	FieldError: null,
-	FieldHint: null,
-	FieldLabel: null
-};
 const Field = ({ boxed = false, children, className, error = false, hideErrorBar = false, ref, ...props }) => {
-	const slots = { ...useSlots(componentSlots, children) };
-	const hasMarkers = !!(slots.FieldLabel ?? slots.FieldError ?? slots.FieldHint);
 	const controlProps = {
 		disabled: false,
 		id: useId$1()
 	};
-	if (Array.isArray(slots.Children)) slots.Children = slots.Children.filter((child) => {
+	Array.from([children].flat()).forEach((child) => {
 		if (child && typeof child === "object" && "type" in child) {
 			if (typeof child?.type === "function" && "slot" in child.type) {
 				const { slot } = child.type;
-				slots.Control = child;
-				if (slots.Control.props) {
+				if (slot.field && child.props) {
 					controlProps.inline = slot.inline ?? false;
-					controlProps.disabled = getSlotProp(slots.Control, "disabled") ?? false;
-					controlProps.id = getSlotProp(slots.Control, "id") ?? controlProps.id;
+					controlProps.disabled = getSlotProp(child, "disabled") ?? false;
+					controlProps.id = getSlotProp(child, "id") ?? controlProps.id;
 					controlProps.suffix = slot.suffix ?? void 0;
 				}
-				return false;
 			}
 		}
-		return true;
 	});
 	const componentProps = {
 		...props,
@@ -50,22 +37,10 @@ const Field = ({ boxed = false, children, className, error = false, hideErrorBar
 	};
 	return /* @__PURE__ */ jsx(FieldContext.Provider, {
 		value: { ...controlProps },
-		children: /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsx("div", {
 			...componentProps,
 			ref,
-			children: [
-				!controlProps?.inline && hasMarkers && /* @__PURE__ */ jsxs(Fragment, { children: [
-					slots.FieldLabel,
-					slots.FieldHint,
-					slots.FieldError
-				] }),
-				slots.Control && /* @__PURE__ */ jsxs(Fragment, { children: [slots.Control, controlProps?.inline && hasMarkers && /* @__PURE__ */ jsxs(Fragment, { children: [
-					slots.FieldLabel,
-					slots.FieldHint,
-					slots.FieldError
-				] })] }),
-				slots.Children
-			]
+			children
 		})
 	});
 };

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,21 @@
+import { TextInputProps } from "../TextInput/TextInput.js";
+import "../TextInput/index.js";
+import { JSX } from "react";
+//#region src/components/PasswordInput/PasswordInput.d.ts
+interface PasswordInputProps extends Omit<TextInputProps, "prefix" | "prefixInline" | "suffix" | "suffixInline" | "type"> {
+  /**
+   * **(Optional)** Specify if the show/hide toggle button should be shown.
+   *
+   * Default: false
+   */
+  showToggle?: boolean;
+}
+declare const PasswordInput: {
+  ({ disabled, id, showToggle, size, ...props }: PasswordInputProps): JSX.Element;
+  slot: {
+    field: boolean;
+    name: string;
+  };
+};
+//#endregion
+export { PasswordInput, PasswordInput as default, PasswordInputProps };

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,55 @@
+"use client";
+import { Button } from "../Button/Button.js";
+import { useField } from "../Field/Field.context.js";
+import { TextInput } from "../TextInput/TextInput.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+//#region src/components/PasswordInput/PasswordInput.tsx
+const PasswordInput = ({ disabled, id, showToggle = false, size, ...props }) => {
+	const [isVisible, setIsVisible] = useState(false);
+	const field = useField();
+	const inputId = id ?? field?.id;
+	const buttonId = `${inputId}-toggle`;
+	const toggleVisibility = useCallback(() => {
+		setIsVisible((previous) => !previous);
+	}, []);
+	const input = /* @__PURE__ */ jsx(TextInput, {
+		...props,
+		autoCapitalize: "none",
+		disabled,
+		id: inputId,
+		ref: props.ref,
+		size,
+		spellCheck: "false",
+		type: isVisible ? "text" : "password"
+	});
+	if (!showToggle) return input;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "coop-password-input--wrapper",
+		children: [
+			input,
+			/* @__PURE__ */ jsx("div", {
+				"aria-live": "polite",
+				className: "sr-only",
+				children: isVisible ? "Your password is visible" : "Your password is hidden"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"aria-controls": inputId,
+				"aria-label": isVisible ? "Hide password" : "Show password",
+				className: "bg-tint-grey",
+				disabled,
+				id: buttonId,
+				onClick: toggleVisibility,
+				size,
+				type: "button",
+				children: isVisible ? "Hide" : "Show"
+			})
+		]
+	});
+};
+PasswordInput.slot = {
+	field: true,
+	name: "PasswordInput"
+};
+//#endregion
+export { PasswordInput, PasswordInput as default };

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

@@ -0,0 +1,2 @@
+import { PasswordInput, PasswordInputProps } from "./PasswordInput.js";
+export { PasswordInput, PasswordInput as default, PasswordInputProps };

package/dist/components/PasswordInput/index.js

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

package/dist/components/Select/Select.d.ts

@@ -41,6 +41,7 @@ interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
 declare const Select: {
   ({ children, className, disabled, error, fit, id, name, ref, size, ...props }: SelectProps): JSX.Element;
   slot: {
+    field: boolean;
     name: string;
   };
   OptionGroup: {

package/dist/components/Select/Select.js

@@ -31,7 +31,10 @@ const SelectOption = ({ children, className, ...props }) => {
 		children
 	});
 };
-Select.slot = { name: "Select" };
+Select.slot = {
+	field: true,
+	name: "Select"
+};
 SelectOption.slot = { name: "SelectOption" };
 SelectOptionGroup.slot = { name: "SelectOptionGroup" };
 Select.OptionGroup = SelectOptionGroup;

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

@@ -37,6 +37,7 @@ interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "pr
 declare const TextInput: {
   ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, fit, id, name, placeholder, prefix, prefixInline, ref, size, suffix, suffixInline, type, ...props }: TextInputProps): JSX.Element;
   slot: {
+    field: boolean;
     name: string;
   };
 };

package/dist/components/TextInput/TextInput.js

@@ -47,6 +47,9 @@ const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, e
 		ref
 	});
 };
-TextInput.slot = { name: "TextInput" };
+TextInput.slot = {
+	field: true,
+	name: "TextInput"
+};
 //#endregion
 export { TextInput, TextInput as default };

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

@@ -40,6 +40,7 @@ interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
 declare const Textarea: {
   ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, fit, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps): JSX.Element;
   slot: {
+    field: boolean;
     name: string;
   };
 };

package/dist/components/Textarea/Textarea.js

@@ -51,6 +51,9 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
 		})] })]
 	});
 };
-Textarea.slot = { name: "Textarea" };
+Textarea.slot = {
+	field: true,
+	name: "Textarea"
+};
 //#endregion
 export { Textarea, Textarea as default };

package/dist/index.d.ts

@@ -12,11 +12,13 @@ import { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend,
 import { Flourish, FlourishProps } from "./components/Flourish/Flourish.js";
 import { Form, FormProps } from "./components/Form/Form.js";
 import { LoadingSpinner, LoadingSpinnerProps } from "./components/LoadingSpinner/LoadingSpinner.js";
+import { Logo, LogoProps } from "./components/Logo/Logo.js";
+import { TextInput, TextInputProps } from "./components/TextInput/TextInput.js";
+import { PasswordInput, PasswordInputProps } from "./components/PasswordInput/PasswordInput.js";
 import { Pill, PillBadge, PillProps } from "./components/Pill/Pill.js";
 import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger } from "./components/Popover/Popover.js";
 import { Radio, RadioProps } from "./components/Radio/Radio.js";
 import { RootSVG } from "./components/RootSVG/RootSVG.js";
-import { TextInput, TextInputProps } from "./components/TextInput/TextInput.js";
 import { Searchbox, SearchboxButton, SearchboxInput, SearchboxProps } from "./components/Searchbox/Searchbox.js";
 import { Select, SelectOption, SelectOptionGroup, SelectProps } from "./components/Select/Select.js";
 import { Signpost, SignpostProps } from "./components/Signpost/Signpost.js";
@@ -25,4 +27,4 @@ import { Squircle, SquircleProps } from "./components/Squircle/Squircle.js";
 import { Tag, TagProps } from "./components/Tag/Tag.js";
 import { Textarea, TextareaProps } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps } from "./components/ValidationSummary/ValidationSummary.js";
-export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Button, ButtonProps, Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, CardProps, Checkbox, CheckboxProps, DatePicker, DatePickerProps, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };
+export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Button, ButtonProps, Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, CardProps, Checkbox, CheckboxProps, DatePicker, DatePickerProps, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };

package/dist/index.js

@@ -14,6 +14,8 @@ import { Field, FieldError, FieldHint, FieldLabel } from "./components/Field/Fie
 import { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend } from "./components/Fieldset/Fieldset.js";
 import { Flourish } from "./components/Flourish/Flourish.js";
 import { Form } from "./components/Form/Form.js";
+import { Logo } from "./components/Logo/Logo.js";
+import { PasswordInput } from "./components/PasswordInput/PasswordInput.js";
 import { Pill, PillBadge } from "./components/Pill/Pill.js";
 import { Radio } from "./components/Radio/Radio.js";
 import { RootSVG } from "./components/RootSVG/RootSVG.js";
@@ -25,4 +27,4 @@ import { Squircle } from "./components/Squircle/Squircle.js";
 import { Tag } from "./components/Tag/Tag.js";
 import { Textarea } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt } from "./components/ValidationSummary/ValidationSummary.js";
-export { AlertBanner, AlertBannerHeading, Author, Button, Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, Checkbox, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt };
+export { AlertBanner, AlertBannerHeading, Author, Button, Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, Checkbox, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -63,12 +63,12 @@
   "license": "MIT",
   "description": "React components for the Experience Library design system",
   "devDependencies": {
-    "@axe-core/playwright": "^4.12.1",
+    "@axe-core/playwright": "^4.13.0",
     "@playwright/test": "^1.62.1",
-    "@storybook/addon-a11y": "^10.5.7",
-    "@storybook/addon-docs": "^10.5.7",
-    "@storybook/addon-onboarding": "^10.5.7",
-    "@storybook/react-vite": "^10.5.7",
+    "@storybook/addon-a11y": "^10.5.8",
+    "@storybook/addon-docs": "^10.5.8",
+    "@storybook/addon-onboarding": "^10.5.8",
+    "@storybook/react-vite": "^10.5.8",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.18",
@@ -78,7 +78,7 @@
     "react-dom": "^19.2.8",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.5.7",
+    "storybook": "^10.5.8",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -102,12 +102,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.12.3",
+    "@coopdigital/styles": "^1.13.0",
     "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "797e4ee819a4ec42723fa1537cce1369763b6eb7"
+  "gitHead": "f8498869d526396c1119c13f1d5afbb083344547"
 }

package/src/components/Field/Field.context.ts

@@ -9,7 +9,6 @@ export interface FieldConfig {
 }
 
 export interface FieldContextValue {
-  // register: ({ control, inline, suffix, uid }: FieldConfig) => void
   disabled?: boolean
   id?: string
   inline?: boolean

package/src/components/Field/Field.tsx

@@ -5,7 +5,6 @@ import clsx from "clsx"
 import React from "react"
 
 import { useId } from "../../hooks/useId"
-import { useSlots } from "../../hooks/useSlots"
 import { SlotConfig } from "../../types"
 import { getSlotProp } from "../../utils"
 import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
@@ -13,14 +12,6 @@ import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
 import { Label as BaseLabel, type LabelProps } from "../FieldMarkers/Label"
 import { FieldConfig, FieldContext } from "./Field.context"
 
-const componentSlots = {
-  Children: null,
-  Control: null,
-  FieldError: null,
-  FieldHint: null,
-  FieldLabel: null,
-}
-
 interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify whether the Field should render inside a box. */
   boxed?: boolean
@@ -47,9 +38,6 @@ const Field = ({
   ref,
   ...props
 }: FieldProps): JSX.Element => {
-  const slots = { ...useSlots(componentSlots, children) }
-  const hasMarkers = !!(slots.FieldLabel ?? slots.FieldError ?? slots.FieldHint)
-
   const internalId = useId()
 
   const controlProps: FieldConfig = {
@@ -57,30 +45,19 @@ const Field = ({
     id: internalId,
   }
 
-  if (Array.isArray(slots.Children)) {
-    slots.Children = slots.Children.filter((child: React.ReactNode) => {
-      //resolveComponentName(child)
-
-      if (child && typeof child === "object" && "type" in child) {
-        if (typeof child?.type === "function" && "slot" in child.type) {
-          const { slot } = child.type as { slot: SlotConfig }
-
-          slots.Control = child
-
-          if (slots.Control.props) {
-            controlProps.inline = slot.inline ?? false
-            controlProps.disabled = getSlotProp<boolean>(slots.Control, "disabled") ?? false
-            controlProps.id = getSlotProp<string>(slots.Control, "id") ?? controlProps.id
-            controlProps.suffix = slot.suffix ?? undefined
-          }
-
-          return false
+  Array.from([children].flat()).forEach((child: React.ReactNode) => {
+    if (child && typeof child === "object" && "type" in child) {
+      if (typeof child?.type === "function" && "slot" in child.type) {
+        const { slot } = child.type as { slot: SlotConfig }
+        if (slot.field && child.props) {
+          controlProps.inline = slot.inline ?? false
+          controlProps.disabled = getSlotProp<boolean>(child, "disabled") ?? false
+          controlProps.id = getSlotProp<string>(child, "id") ?? controlProps.id
+          controlProps.suffix = slot.suffix ?? undefined
         }
       }
-
-      return true
-    })
-  }
+    }
+  })
 
   const componentProps = {
     ...props,
@@ -94,26 +71,7 @@ const Field = ({
   return (
     <FieldContext.Provider value={{ ...controlProps }}>
       <div {...componentProps} ref={ref}>
-        {!controlProps?.inline && hasMarkers && (
-          <>
-            {slots.FieldLabel}
-            {slots.FieldHint}
-            {slots.FieldError}
-          </>
-        )}
-        {slots.Control && (
-          <>
-            {slots.Control}
-            {controlProps?.inline && hasMarkers && (
-              <>
-                {slots.FieldLabel}
-                {slots.FieldHint}
-                {slots.FieldError}
-              </>
-            )}
-          </>
-        )}
-        {slots.Children}
+        {children}
       </div>
     </FieldContext.Provider>
   )

package/src/components/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,80 @@
+"use client"
+import type { JSX } from "react"
+
+import { useCallback, useState } from "react"
+
+import { Button } from "../Button"
+import { useField } from "../Field/Field.context"
+import { TextInput, type TextInputProps } from "../TextInput"
+
+export interface PasswordInputProps extends Omit<
+  TextInputProps,
+  "prefix" | "prefixInline" | "suffix" | "suffixInline" | "type"
+> {
+  /**
+   * **(Optional)** Specify if the show/hide toggle button should be shown.
+   *
+   * Default: false
+   */
+  showToggle?: boolean
+}
+
+const PasswordInput = ({
+  disabled,
+  id,
+  showToggle = false,
+  size,
+  ...props
+}: PasswordInputProps): JSX.Element => {
+  const [isVisible, setIsVisible] = useState(false)
+  const field = useField()
+  const inputId = id ?? field?.id
+  const buttonId = `${inputId}-toggle`
+
+  const toggleVisibility = useCallback(() => {
+    setIsVisible((previous) => !previous)
+  }, [])
+
+  const input = (
+    <TextInput
+      {...props}
+      autoCapitalize="none"
+      disabled={disabled}
+      id={inputId}
+      ref={props.ref}
+      size={size}
+      spellCheck="false"
+      type={isVisible ? "text" : "password"}
+    />
+  )
+
+  if (!showToggle) {
+    return input
+  }
+
+  return (
+    <div className="coop-password-input--wrapper">
+      {input}
+      <div aria-live="polite" className="sr-only">
+        {isVisible ? "Your password is visible" : "Your password is hidden"}
+      </div>
+      <Button
+        aria-controls={inputId}
+        aria-label={isVisible ? "Hide password" : "Show password"}
+        className="bg-tint-grey"
+        disabled={disabled}
+        id={buttonId}
+        onClick={toggleVisibility}
+        size={size}
+        type="button" //type button prevents it from submitting the form accidentally when used with a keyboard.
+      >
+        {isVisible ? "Hide" : "Show"}
+      </Button>
+    </div>
+  )
+}
+
+PasswordInput.slot = { field: true, name: "PasswordInput" }
+
+export default PasswordInput
+export { PasswordInput }

package/src/components/PasswordInput/index.ts

@@ -0,0 +1,5 @@
+import PasswordInput from "./PasswordInput"
+
+export default PasswordInput
+export { PasswordInput }
+export * from "./PasswordInput"

package/src/components/Select/Select.tsx

@@ -97,7 +97,7 @@ const SelectOption = ({ children, className, ...props }: SelectOptionProps): JSX
   )
 }
 
-Select.slot = { name: "Select" }
+Select.slot = { field: true, name: "Select" }
 SelectOption.slot = { name: "SelectOption" }
 SelectOptionGroup.slot = { name: "SelectOptionGroup" }
 

package/src/components/TextInput/TextInput.tsx

@@ -97,8 +97,6 @@ const TextInput = ({
     ? { className: "coop-text-input--suffix", "data-inline": suffixInline || undefined }
     : {}
 
-  //const formItemProps = { "aria-disabled": disabled ? true : undefined }
-
   return prefix || suffix ? (
     <div className="coop-text-input-wrapper">
       {prefix && <span {...prefixProps}>{prefix}</span>}
@@ -110,7 +108,7 @@ const TextInput = ({
   )
 }
 
-TextInput.slot = { name: "TextInput" }
+TextInput.slot = { field: true, name: "TextInput" }
 
 export default TextInput
 export { TextInput }

package/src/components/Textarea/Textarea.tsx

@@ -120,7 +120,7 @@ const Textarea = ({
   )
 }
 
-Textarea.slot = { name: "Textarea" }
+Textarea.slot = { field: true, name: "Textarea" }
 
 export default Textarea
 export { Textarea }

package/src/index.ts

@@ -12,6 +12,8 @@ export * from "./components/Flourish/Flourish"
 export * from "./components/Form/Form"
 export * from "./components/Image/Image"
 export * from "./components/LoadingSpinner/LoadingSpinner"
+export * from "./components/Logo/Logo"
+export * from "./components/PasswordInput/PasswordInput"
 export * from "./components/Pill/Pill"
 export * from "./components/Popover/Popover"
 export * from "./components/Radio/Radio"