@coopdigital/react 1.17.1 → 1.19.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/components/icons/LoadingIcon.js

@@ -11,13 +11,13 @@ const LoadingIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		fill: fill ?? "currentColor",
 		id: uid,
 		role: alt ? "img" : void 0,
-		viewBox: "0 0 28 28",
+		viewBox: "0 0 32 32",
 		...props,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",
 			children: alt
-		}) : null, /* @__PURE__ */ jsx("path", { d: "M13.001.002c.551-.039 1 .414 1 .966l-.005.102c-.052.504-.479.897-.995.94A12 12 0 0 0 2.915 9.375l-.162.414a11.998 11.998 0 0 0 15.425 15.425l.414-.162a12 12 0 0 0 5.131-4.055l.254-.364a12 12 0 0 0 1.98-5.667c.046-.55.49-.999 1.043-.999s1.004.448.964 1a14 14 0 0 1-2.323 6.778l-.296.425a14 14 0 0 1-5.987 4.732l-.483.19a14 14 0 0 1-14.401-2.866l-.373-.36a14 14 0 0 1-3.72-6.662l-.112-.506a14 14 0 0 1 .607-7.606l.19-.482a14 14 0 0 1 4.73-5.988l.426-.295a14 14 0 0 1 6.78-2.325" })]
+		}) : null, /* @__PURE__ */ jsx("path", { d: "M15.01 2.01c.551-.039 1 .414 1 .966l-.005.102c-.052.504-.479.897-.995.94a12 12 0 0 0-10.086 7.365l-.162.414a11.998 11.998 0 0 0 15.425 15.425l.414-.162a12 12 0 0 0 5.131-4.055l.254-.364a12 12 0 0 0 1.98-5.667c.046-.55.49-.999 1.043-.999s1.004.448.964 1a14 14 0 0 1-2.323 6.778l-.296.425a14 14 0 0 1-5.987 4.732l-.483.19a14 14 0 0 1-14.401-2.866l-.373-.36a14 14 0 0 1-3.72-6.662l-.112-.506a14 14 0 0 1 .607-7.606l.19-.482a14 14 0 0 1 4.73-5.988l.426-.295A14 14 0 0 1 15.01 2.01" })]
 	});
 };
 //#endregion

package/dist/components/icons/MessageIcon.js

@@ -17,7 +17,7 @@ const MessageIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",
 			children: alt
-		}) : null, /* @__PURE__ */ jsx("path", { d: "M30 31a1 1 0 0 1-.75-.34l-7.64-8.6H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h28a1 1 0 0 1 .71.29A1 1 0 0 1 31 2v28a1 1 0 0 1-.65.93.8.8 0 0 1-.35.07M3 20.06h19.06a1 1 0 0 1 .75.33l6.19 7V3H3Z" })]
+		}) : null, /* @__PURE__ */ jsx("path", { d: "M4 6v14h16.586a2 2 0 0 1 1.414.586l6 6V6zm26 20.586c0 1.782-2.154 2.674-3.414 1.414l-6-6H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2z" })]
 	});
 };
 //#endregion

package/dist/components/icons/OpenNewIcon.js

@@ -19,8 +19,8 @@ const OpenNewIcon = ({ alt, className, fill, id, ref, ...props }) => {
 				id: uid + "__title",
 				children: alt
 			}) : null,
-			/* @__PURE__ */ jsx("path", { d: "M14.16 18.84a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L30 .59a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.42L14.87 18.55a1 1 0 0 1-.71.29" }),
-			/* @__PURE__ */ jsx("path", { d: "M31 14a1 1 0 0 1-1-1V2H19a1 1 0 0 1 0-2h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1M24 32H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h11.21a1 1 0 0 1 0 2H2v22h22V18.7a1 1 0 0 1 2 0V30a2 2 0 0 1-2 2" })
+			/* @__PURE__ */ jsx("path", { d: "M13.733 7.875a.813.813 0 0 1 0 1.625H4.625v17.875H22.5v-9.181a.813.813 0 0 1 1.625 0v9.181A1.624 1.624 0 0 1 22.5 29H4.625A1.625 1.625 0 0 1 3 27.375V9.5a1.625 1.625 0 0 1 1.625-1.625z" }),
+			/* @__PURE__ */ jsx("path", { d: "M28.188 3a.813.813 0 0 1 .812.813v9.75a.813.813 0 0 1-1.625 0V5.779L15.082 18.072a.815.815 0 0 1-.889.175.814.814 0 0 1-.265-1.329l12.3-12.293h-7.79a.813.813 0 0 1 0-1.625z" })
 		]
 	});
 };

package/dist/components/icons/PencilIcon.js

@@ -17,7 +17,11 @@ const PencilIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",
 			children: alt
-		}) : null, /* @__PURE__ */ jsx("path", { d: "M31.7 6.12 25.88.3a1 1 0 0 0-1.4 0L1.3 23.47a.86.86 0 0 0-.3.6L0 30.9a1.14 1.14 0 0 0 .3.8.91.91 0 0 0 .7.3h.1l6.82-1a.61.61 0 0 0 .61-.3L31.7 7.52a1 1 0 0 0 0-1.4M7.22 29l-3.57.56L5.08 28a1 1 0 0 0 0-1.42 1 1 0 0 0-1.41.05L2.39 28l.52-3.29 1.91-1.91 4.12 4.52Zm3.14-3.11-4.12-4.54L25.18 2.41l4.41 4.41Z" })]
+		}) : null, /* @__PURE__ */ jsx("path", {
+			clipRule: "evenodd",
+			d: "M21.879 2.707a3 3 0 0 1 4.242 0l3.172 3.172a3 3 0 0 1 0 4.242L10.207 29.207a1 1 0 0 1-.565.283l-5.681.812a2 2 0 0 1-2.263-2.263l.812-5.68a1 1 0 0 1 .283-.566zM6 21.414 10.586 26l-1.558 1.557-3.7.528 1.38-1.378a1 1 0 1 0-1.415-1.414l-1.379 1.379.528-3.701zM27.88 8.707 12 24.586 7.414 20 23.293 4.121a1 1 0 0 1 1.414 0l3.172 3.172a1 1 0 0 1 0 1.414",
+			fillRule: "evenodd"
+		})]
 	});
 };
 //#endregion

package/dist/components/icons/SpannerIcon.js

@@ -11,13 +11,16 @@ const SpannerIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		fill: fill ?? "currentColor",
 		id: uid,
 		role: alt ? "img" : void 0,
-		viewBox: "0 0 24 24",
+		viewBox: "0 0 32 32",
 		...props,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",
 			children: alt
-		}) : null, /* @__PURE__ */ jsx("path", { d: "M13 7.5a5.5 5.5 0 0 0-6.025-5.475l2.482 2.482c.78.78.963 1.79.858 2.603a3.6 3.6 0 0 1-1.054 2.108l-.019.017-.02.02a3.6 3.6 0 0 1-2.108 1.06c-.815.106-1.825-.076-2.607-.858L2.025 6.975A5.5 5.5 0 0 0 7.5 13v2A7.5 7.5 0 0 1 .653 4.435c.26-.577 1.008-.653 1.455-.206l3.813 3.814c.47.47 1.265.347 1.77-.09l.097-.09.04-.042.036-.036c.476-.464.657-1.256.265-1.766l-.086-.098-3.814-3.813c-.447-.447-.371-1.196.206-1.455A7.5 7.5 0 0 1 14.916 8.61c-.051.34.046.689.288.931l7.624 7.624a4 4 0 0 1-5.657 5.657l-7.62-7.619a1.08 1.08 0 0 0-.93-.287A7.4 7.4 0 0 1 7.5 15v-2q.416-.001.82-.062l.167-.021a3.07 3.07 0 0 1 2.479.871l7.619 7.62a2 2 0 0 0 2.83-2.83l-7.626-7.624c-.745-.745-.985-1.755-.85-2.643A5.4 5.4 0 0 0 13 7.5" })]
+		}) : null, /* @__PURE__ */ jsx("path", {
+			d: "M11.5 5a6.5 6.5 0 0 1 6.428 7.46 2.08 2.08 0 0 0 .568 1.787l7.625 7.624a3 3 0 0 1-4.243 4.243l-7.62-7.619a2.08 2.08 0 0 0-1.788-.568 6.5 6.5 0 0 1-6.98-8.902l3.724 3.725c.516.516 1.193.648 1.771.573a2.6 2.6 0 0 0 1.52-.764l.057-.058c.414-.403.69-.95.762-1.519.074-.577-.059-1.253-.574-1.768L9.024 5.489A6.5 6.5 0 0 1 11.5 5Z",
+			strokeWidth: "2"
+		})]
 	});
 };
 //#endregion

package/dist/components/icons/WriteIcon.js

@@ -14,16 +14,14 @@ const WriteIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		viewBox: "0 0 32 32",
 		...props,
 		ref,
-		children: [
-			alt ? /* @__PURE__ */ jsx("title", {
-				id: uid + "__title",
-				children: alt
-			}) : null,
-			/* @__PURE__ */ jsx("path", { d: "M19.67 10.13 17.9 11.9H7a1 1 0 0 1 0-2h12a1 1 0 0 1 .67.23M14.9 14.9l-2 2H7a1 1 0 0 1 0-2ZM20 15.9a1 1 0 0 1-1 1h-1.87l2-2a1 1 0 0 1 .82.59.85.85 0 0 1 .05.41M19 21.9H7a1 1 0 0 1 0-2h12a1 1 0 1 1 0 2" }),
-			/* @__PURE__ */ jsx("path", { d: "M24.08 10v20h-22V6h21.73l1.54-1.54a1.9 1.9 0 0 0-1-.44H2.07a2 2 0 0 0-2 2V30a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V8Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M30.62 3.41 28.5 1.29a1 1 0 0 0-1.42 0L22.38 6l-3.9 3.9-5 5-1.33 1.33a1 1 0 0 0-.27.48v.19l-.6 2.57a.8.8 0 0 0 0 .43 1 1 0 0 0 1.19.77l2.74-.67a.64.64 0 0 0 .29-.13.6.6 0 0 0 .19-.14l2.85-2.86 1.4-1.39L30.62 4.82a1 1 0 0 0 0-1.41M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M31.33 2.7 29.21.58a2.06 2.06 0 0 0-2.83 0L11.44 15.52a2.1 2.1 0 0 0-.54 1l-.09.41-.54 2.34a2.18 2.18 0 0 0 .54 1.87 2 2 0 0 0 1.4.58 1.8 1.8 0 0 0 .46-.05l2.75-.67a2.1 2.1 0 0 0 1-.54L31.33 5.53a2 2 0 0 0 0-2.83M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z" })
-		]
+		children: [alt ? /* @__PURE__ */ jsx("title", {
+			id: uid + "__title",
+			children: alt
+		}) : null, /* @__PURE__ */ jsx("path", {
+			clipRule: "evenodd",
+			d: "M25.586 2a2 2 0 0 1 2.828 0L30 3.585a2 2 0 0 1 0 2.828l-4 4V27a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h18.586zM5 6a1 1 0 0 0-1 1v20a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V12.413L17.413 19H19a1 1 0 1 1 0 2H8a1 1 0 0 1 0-2h3.278l1.001-3H8a1 1 0 0 1 0-2h5.586l3-3H8a1 1 0 0 1 0-2h10.586l3-3zm9.374 10.04-.794 2.38 2.378-.793L28.586 5 27 3.414z",
+			fillRule: "evenodd"
+		})]
 	});
 };
 //#endregion

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.19.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.1",
     "@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": "773b6e1ec18be0a33b2dd40a336f7a6bee54a259"
 }

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/components/icons/LoadingIcon.tsx

@@ -24,13 +24,13 @@ export const LoadingIcon = ({
     fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
-    viewBox: "0 0 28 28",
+    viewBox: "0 0 32 32",
     ...props,
   }
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "__title"}>{alt}</title> : null}
-      <path d="M13.001.002c.551-.039 1 .414 1 .966l-.005.102c-.052.504-.479.897-.995.94A12 12 0 0 0 2.915 9.375l-.162.414a11.998 11.998 0 0 0 15.425 15.425l.414-.162a12 12 0 0 0 5.131-4.055l.254-.364a12 12 0 0 0 1.98-5.667c.046-.55.49-.999 1.043-.999s1.004.448.964 1a14 14 0 0 1-2.323 6.778l-.296.425a14 14 0 0 1-5.987 4.732l-.483.19a14 14 0 0 1-14.401-2.866l-.373-.36a14 14 0 0 1-3.72-6.662l-.112-.506a14 14 0 0 1 .607-7.606l.19-.482a14 14 0 0 1 4.73-5.988l.426-.295a14 14 0 0 1 6.78-2.325" />
+      <path d="M15.01 2.01c.551-.039 1 .414 1 .966l-.005.102c-.052.504-.479.897-.995.94a12 12 0 0 0-10.086 7.365l-.162.414a11.998 11.998 0 0 0 15.425 15.425l.414-.162a12 12 0 0 0 5.131-4.055l.254-.364a12 12 0 0 0 1.98-5.667c.046-.55.49-.999 1.043-.999s1.004.448.964 1a14 14 0 0 1-2.323 6.778l-.296.425a14 14 0 0 1-5.987 4.732l-.483.19a14 14 0 0 1-14.401-2.866l-.373-.36a14 14 0 0 1-3.72-6.662l-.112-.506a14 14 0 0 1 .607-7.606l.19-.482a14 14 0 0 1 4.73-5.988l.426-.295A14 14 0 0 1 15.01 2.01" />
     </svg>
   )
 }

package/src/components/icons/MessageIcon.tsx

@@ -30,7 +30,7 @@ export const MessageIcon = ({
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "__title"}>{alt}</title> : null}
-      <path d="M30 31a1 1 0 0 1-.75-.34l-7.64-8.6H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h28a1 1 0 0 1 .71.29A1 1 0 0 1 31 2v28a1 1 0 0 1-.65.93.8.8 0 0 1-.35.07M3 20.06h19.06a1 1 0 0 1 .75.33l6.19 7V3H3Z" />
+      <path d="M4 6v14h16.586a2 2 0 0 1 1.414.586l6 6V6zm26 20.586c0 1.782-2.154 2.674-3.414 1.414l-6-6H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2z" />
     </svg>
   )
 }

package/src/components/icons/OpenNewIcon.tsx

@@ -30,8 +30,8 @@ export const OpenNewIcon = ({
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "__title"}>{alt}</title> : null}
-      <path d="M14.16 18.84a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L30 .59a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.42L14.87 18.55a1 1 0 0 1-.71.29" />
-      <path d="M31 14a1 1 0 0 1-1-1V2H19a1 1 0 0 1 0-2h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1M24 32H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h11.21a1 1 0 0 1 0 2H2v22h22V18.7a1 1 0 0 1 2 0V30a2 2 0 0 1-2 2" />
+      <path d="M13.733 7.875a.813.813 0 0 1 0 1.625H4.625v17.875H22.5v-9.181a.813.813 0 0 1 1.625 0v9.181A1.624 1.624 0 0 1 22.5 29H4.625A1.625 1.625 0 0 1 3 27.375V9.5a1.625 1.625 0 0 1 1.625-1.625z" />
+      <path d="M28.188 3a.813.813 0 0 1 .812.813v9.75a.813.813 0 0 1-1.625 0V5.779L15.082 18.072a.815.815 0 0 1-.889.175.814.814 0 0 1-.265-1.329l12.3-12.293h-7.79a.813.813 0 0 1 0-1.625z" />
     </svg>
   )
 }

package/src/components/icons/PencilIcon.tsx

@@ -23,7 +23,11 @@ export const PencilIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "__title"}>{alt}</title> : null}
-      <path d="M31.7 6.12 25.88.3a1 1 0 0 0-1.4 0L1.3 23.47a.86.86 0 0 0-.3.6L0 30.9a1.14 1.14 0 0 0 .3.8.91.91 0 0 0 .7.3h.1l6.82-1a.61.61 0 0 0 .61-.3L31.7 7.52a1 1 0 0 0 0-1.4M7.22 29l-3.57.56L5.08 28a1 1 0 0 0 0-1.42 1 1 0 0 0-1.41.05L2.39 28l.52-3.29 1.91-1.91 4.12 4.52Zm3.14-3.11-4.12-4.54L25.18 2.41l4.41 4.41Z" />
+      <path
+        clipRule="evenodd"
+        d="M21.879 2.707a3 3 0 0 1 4.242 0l3.172 3.172a3 3 0 0 1 0 4.242L10.207 29.207a1 1 0 0 1-.565.283l-5.681.812a2 2 0 0 1-2.263-2.263l.812-5.68a1 1 0 0 1 .283-.566zM6 21.414 10.586 26l-1.558 1.557-3.7.528 1.38-1.378a1 1 0 1 0-1.415-1.414l-1.379 1.379.528-3.701zM27.88 8.707 12 24.586 7.414 20 23.293 4.121a1 1 0 0 1 1.414 0l3.172 3.172a1 1 0 0 1 0 1.414"
+        fillRule="evenodd"
+      />
     </svg>
   )
 }

package/src/components/icons/SpannerIcon.tsx

@@ -24,13 +24,16 @@ export const SpannerIcon = ({
     fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
-    viewBox: "0 0 24 24",
+    viewBox: "0 0 32 32",
     ...props,
   }
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "__title"}>{alt}</title> : null}
-      <path d="M13 7.5a5.5 5.5 0 0 0-6.025-5.475l2.482 2.482c.78.78.963 1.79.858 2.603a3.6 3.6 0 0 1-1.054 2.108l-.019.017-.02.02a3.6 3.6 0 0 1-2.108 1.06c-.815.106-1.825-.076-2.607-.858L2.025 6.975A5.5 5.5 0 0 0 7.5 13v2A7.5 7.5 0 0 1 .653 4.435c.26-.577 1.008-.653 1.455-.206l3.813 3.814c.47.47 1.265.347 1.77-.09l.097-.09.04-.042.036-.036c.476-.464.657-1.256.265-1.766l-.086-.098-3.814-3.813c-.447-.447-.371-1.196.206-1.455A7.5 7.5 0 0 1 14.916 8.61c-.051.34.046.689.288.931l7.624 7.624a4 4 0 0 1-5.657 5.657l-7.62-7.619a1.08 1.08 0 0 0-.93-.287A7.4 7.4 0 0 1 7.5 15v-2q.416-.001.82-.062l.167-.021a3.07 3.07 0 0 1 2.479.871l7.619 7.62a2 2 0 0 0 2.83-2.83l-7.626-7.624c-.745-.745-.985-1.755-.85-2.643A5.4 5.4 0 0 0 13 7.5" />
+      <path
+        d="M11.5 5a6.5 6.5 0 0 1 6.428 7.46 2.08 2.08 0 0 0 .568 1.787l7.625 7.624a3 3 0 0 1-4.243 4.243l-7.62-7.619a2.08 2.08 0 0 0-1.788-.568 6.5 6.5 0 0 1-6.98-8.902l3.724 3.725c.516.516 1.193.648 1.771.573a2.6 2.6 0 0 0 1.52-.764l.057-.058c.414-.403.69-.95.762-1.519.074-.577-.059-1.253-.574-1.768L9.024 5.489A6.5 6.5 0 0 1 11.5 5Z"
+        strokeWidth="2"
+      />
     </svg>
   )
 }

package/src/components/icons/WriteIcon.tsx

@@ -23,10 +23,11 @@ export const WriteIcon = ({ alt, className, fill, id, ref, ...props }: IconProps
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "__title"}>{alt}</title> : null}
-      <path d="M19.67 10.13 17.9 11.9H7a1 1 0 0 1 0-2h12a1 1 0 0 1 .67.23M14.9 14.9l-2 2H7a1 1 0 0 1 0-2ZM20 15.9a1 1 0 0 1-1 1h-1.87l2-2a1 1 0 0 1 .82.59.85.85 0 0 1 .05.41M19 21.9H7a1 1 0 0 1 0-2h12a1 1 0 1 1 0 2" />
-      <path d="M24.08 10v20h-22V6h21.73l1.54-1.54a1.9 1.9 0 0 0-1-.44H2.07a2 2 0 0 0-2 2V30a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V8Z" />
-      <path d="M30.62 3.41 28.5 1.29a1 1 0 0 0-1.42 0L22.38 6l-3.9 3.9-5 5-1.33 1.33a1 1 0 0 0-.27.48v.19l-.6 2.57a.8.8 0 0 0 0 .43 1 1 0 0 0 1.19.77l2.74-.67a.64.64 0 0 0 .29-.13.6.6 0 0 0 .19-.14l2.85-2.86 1.4-1.39L30.62 4.82a1 1 0 0 0 0-1.41M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z" />
-      <path d="M31.33 2.7 29.21.58a2.06 2.06 0 0 0-2.83 0L11.44 15.52a2.1 2.1 0 0 0-.54 1l-.09.41-.54 2.34a2.18 2.18 0 0 0 .54 1.87 2 2 0 0 0 1.4.58 1.8 1.8 0 0 0 .46-.05l2.75-.67a2.1 2.1 0 0 0 1-.54L31.33 5.53a2 2 0 0 0 0-2.83M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z" />
+      <path
+        clipRule="evenodd"
+        d="M25.586 2a2 2 0 0 1 2.828 0L30 3.585a2 2 0 0 1 0 2.828l-4 4V27a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h18.586zM5 6a1 1 0 0 0-1 1v20a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V12.413L17.413 19H19a1 1 0 1 1 0 2H8a1 1 0 0 1 0-2h3.278l1.001-3H8a1 1 0 0 1 0-2h5.586l3-3H8a1 1 0 0 1 0-2h10.586l3-3zm9.374 10.04-.794 2.38 2.378-.793L28.586 5 27 3.414z"
+        fillRule="evenodd"
+      />
     </svg>
   )
 }

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"