@coopdigital/react 1.12.0 → 1.13.1

package/dist/components/SkipNav/SkipNav.d.ts

@@ -1,24 +1,25 @@
-import type { HTMLAttributes, JSX, Ref } from "react";
+import { HTMLAttributes, JSX, Ref } from "react";
+//#region src/components/SkipNav/SkipNav.d.ts
 interface SkipNavLink {
-    href: string;
-    label: string;
+  href: string;
+  label: string;
 }
-export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify whether the SkipNav is visible immediately or only when tabbing. Useful for testing purposes only. */
-    isVisible?: boolean;
-    /** **(Optional)** Specify links to show in the SkipNav.
-     * Each item needs a `href` and `label`. Defaults to a single link anchored to `#main`. */
-    links?: SkipNavLink[];
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLDivElement>;
+interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify whether the SkipNav is visible immediately or only when tabbing. Useful for testing purposes only. */
+  isVisible?: boolean;
+  /** **(Optional)** Specify links to show in the SkipNav.
+   * Each item needs a `href` and `label`. Defaults to a single link anchored to `#main`. */
+  links?: SkipNavLink[];
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
 }
 declare const SkipNav: {
-    ({ className, isVisible, links, ref, ...props }: SkipNavProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ className, isVisible, links, ref, ...props }: SkipNavProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default SkipNav;
-export { SkipNav };
+//#endregion
+export { SkipNav, SkipNav as default, SkipNavProps };

package/dist/components/SkipNav/SkipNav.js

@@ -1,22 +1,29 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-
-const defaultLinks = [{ href: "#main", label: "Skip to main content" }];
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SkipNav/SkipNav.tsx
+const defaultLinks = [{
+	href: "#main",
+	label: "Skip to main content"
+}];
 const SkipNav = ({ className, isVisible = false, links = defaultLinks, ref, ...props }) => {
-    const componentProps = {
-        className: clsx("coop-skip-nav", className),
-        ...props,
-    };
-    const navLinks = links.length > 0 ? links : defaultLinks;
-    return (jsx("nav", { ...componentProps, ref: ref, children: jsx("ul", { children: navLinks.map((link) => {
-                const linkProps = {
-                    "data-visible": isVisible,
-                    href: link.href,
-                    label: link.label,
-                };
-                return (jsx("li", { children: jsx("a", { ...linkProps, children: link.label }) }, link.href));
-            }) }) }));
+	const componentProps = {
+		className: clsx("coop-skip-nav", className),
+		...props
+	};
+	const navLinks = links.length > 0 ? links : defaultLinks;
+	return /* @__PURE__ */ jsx("nav", {
+		...componentProps,
+		ref,
+		children: /* @__PURE__ */ jsx("ul", { children: navLinks.map((link) => {
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+				"data-visible": isVisible,
+				href: link.href,
+				label: link.label,
+				children: link.label
+			}) }, link.href);
+		}) })
+	});
 };
 SkipNav.slot = { name: "SkipNav" };
-
+//#endregion
 export { SkipNav, SkipNav as default };

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

@@ -1,4 +1,2 @@
-import SkipNav from "./SkipNav";
-export default SkipNav;
-export { SkipNav };
-export * from "./SkipNav";
+import { SkipNav, SkipNavProps } from "./SkipNav.js";
+export { SkipNav, SkipNav as default, SkipNavProps };

package/dist/components/SkipNav/index.js

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

package/dist/components/Squircle/Squircle.d.ts

@@ -1,19 +1,20 @@
-import type { HTMLAttributes, JSX, Ref } from "react";
-export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLDivElement>;
-    /** **(Optional)** Specify the Squircle size. */
-    size?: "sm" | "md" | "lg";
+import { HTMLAttributes, JSX, Ref } from "react";
+//#region src/components/Squircle/Squircle.d.ts
+interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+  /** **(Optional)** Specify the Squircle size. */
+  size?: "sm" | "md" | "lg";
 }
 declare const Squircle: {
-    ({ children, className, ref, size, ...props }: SquircleProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ children, className, ref, size, ...props }: SquircleProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default Squircle;
-export { Squircle };
+//#endregion
+export { Squircle, Squircle as default, SquircleProps };

package/dist/components/Squircle/Squircle.js

@@ -1,15 +1,16 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { hasUserBg } from '../../utils/index.js';
-
+import { hasUserBg } from "../../utils/index.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Squircle/Squircle.tsx
 const Squircle = ({ children, className, ref, size = "md", ...props }) => {
-    const componentProps = {
-        className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
-        "data-size": size.length && size !== "md" ? size : undefined,
-        ...props,
-    };
-    return (jsx("figure", { ...componentProps, ref: ref, children: jsx("figcaption", { children: children }) }));
+	return /* @__PURE__ */ jsx("figure", {
+		className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
+		"data-size": size.length && size !== "md" ? size : void 0,
+		...props,
+		ref,
+		children: /* @__PURE__ */ jsx("figcaption", { children })
+	});
 };
 Squircle.slot = { name: "Squircle" };
-
+//#endregion
 export { Squircle, Squircle as default };

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

@@ -1,4 +1,2 @@
-import Squircle from "./Squircle";
-export default Squircle;
-export { Squircle };
-export * from "./Squircle";
+import { Squircle, SquircleProps } from "./Squircle.js";
+export { Squircle, Squircle as default, SquircleProps };

package/dist/components/Squircle/index.js

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

package/dist/components/Tag/Tag.d.ts

@@ -1,24 +1,24 @@
-import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
-import React from "react";
-export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
-    /** **(Optional)** Specify a custom element to override default `a` or `span`. */
-    as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify the URL that the Tag component will link to when clicked. */
-    href?: string;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLElement>;
-    /** **(Optional)** Specify the Tag size. */
-    size?: "sm" | "md";
+import React, { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
+//#region src/components/Tag/Tag.d.ts
+interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
+  /** **(Optional)** Specify a custom element to override default `a` or `span`. */
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify the URL that the Tag component will link to when clicked. */
+  href?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLElement>;
+  /** **(Optional)** Specify the Tag size. */
+  size?: "sm" | "md";
 }
 declare const Tag: {
-    ({ as, children, className, href, ref, size, ...props }: TagProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ as, children, className, href, ref, size, ...props }: TagProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default Tag;
-export { Tag };
+//#endregion
+export { Tag, Tag as default, TagProps };

package/dist/components/Tag/Tag.js

@@ -1,17 +1,20 @@
-import clsx from 'clsx';
-import React from 'react';
-import { hasUserBg } from '../../utils/index.js';
-
+import { hasUserBg } from "../../utils/index.js";
+import clsx from "clsx";
+import React from "react";
+//#region src/components/Tag/Tag.tsx
 const Tag = ({ as, children, className, href, ref, size, ...props }) => {
-    const element = as !== null && as !== void 0 ? as : (href ? "a" : "span");
-    const componentProps = {
-        className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
-        "data-size": (size === null || size === void 0 ? void 0 : size.length) ? size : undefined,
-        href,
-        ...props,
-    };
-    return React.createElement(element, { ...componentProps, ref }, children);
+	const element = as ?? (href ? "a" : "span");
+	const componentProps = {
+		className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
+		"data-size": size?.length ? size : void 0,
+		href,
+		...props
+	};
+	return React.createElement(element, {
+		...componentProps,
+		ref
+	}, children);
 };
 Tag.slot = { name: "Tag" };
-
+//#endregion
 export { Tag, Tag as default };

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

@@ -1,4 +1,2 @@
-import Tag from "./Tag";
-export default Tag;
-export { Tag };
-export * from "./Tag";
+import { Tag, TagProps } from "./Tag.js";
+export { Tag, Tag as default, TagProps };

package/dist/components/Tag/index.js

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

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

@@ -1,38 +1,44 @@
-import type { InputHTMLAttributes, JSX, Ref } from "react";
-import { StandardSizes } from "../../../src/types";
-export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size" | "type"> {
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
-    disabled?: boolean;
-    /** **(Optional)** Specify the TextInput error state. */
-    error?: boolean;
-    /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
-    id?: string;
-    /** Specify the TextInput name. */
-    name: string;
-    /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
-    placeholder?: string;
-    /** **(Optional)** Specify the prefix. It can be any valid JSX or string. */
-    prefix?: React.ReactNode;
-    /** **(Optional)** Specify whether the prefix should be rendered inside the input. */
-    prefixInline?: boolean;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLInputElement>;
-    /** **(Optional)** Specify the TextInput size. */
-    size?: StandardSizes;
-    /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
-    suffix?: React.ReactNode;
-    /** **(Optional)** Specify whether the suffix should be rendered inside the input. */
-    suffixInline?: boolean;
-    /** **(Optional)** Specify the TextInput type. */
-    type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "week" | "month" | "time";
+import { StandardSizes } from "../../types/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+//#region src/components/TextInput/TextInput.d.ts
+interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size" | "type"> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean;
+  /** **(Optional)** Specify the TextInput error state. */
+  error?: boolean;
+  /** **(Optional)** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
+   *
+   * Default: false
+   */
+  fit?: boolean;
+  /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
+  id?: string;
+  /** Specify the TextInput name. */
+  name: string;
+  /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
+  placeholder?: string;
+  /** **(Optional)** Specify the prefix. It can be any valid JSX or string. */
+  prefix?: React.ReactNode;
+  /** **(Optional)** Specify whether the prefix should be rendered inside the input. */
+  prefixInline?: boolean;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLInputElement>;
+  /** **(Optional)** Specify the TextInput size. */
+  size?: StandardSizes;
+  /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
+  suffix?: React.ReactNode;
+  /** **(Optional)** Specify whether the suffix should be rendered inside the input. */
+  suffixInline?: boolean;
+  /** **(Optional)** Specify the TextInput type. */
+  type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "week" | "month" | "time";
 }
 declare const TextInput: {
-    ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, id, name, placeholder, prefix, prefixInline, ref, size, suffix, suffixInline, type, ...props }: TextInputProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, fit, id, name, placeholder, prefix, prefixInline, ref, size, suffix, suffixInline, type, ...props }: TextInputProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default TextInput;
-export { TextInput };
+//#endregion
+export { TextInput, TextInput as default, TextInputProps };

package/dist/components/TextInput/TextInput.js

@@ -1,32 +1,49 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useField } from '../Field/Field.context.js';
-
-const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, prefixInline = false, ref, size, suffix, suffixInline = false, type = "text", ...props }) => {
-    var _a;
-    const field = useField();
-    const componentProps = {
-        "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
-        className: clsx("coop-text-input", "coop-field-element", className),
-        "data-error": error || undefined,
-        "data-size": (size === null || size === void 0 ? void 0 : size.length) ? size : undefined,
-        disabled,
-        id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
-        name,
-        placeholder,
-        type,
-        ...props,
-    };
-    const prefixProps = prefix
-        ? { className: "coop-text-input--prefix", "data-inline": prefixInline || undefined }
-        : {};
-    const suffixProps = suffix
-        ? { className: "coop-text-input--suffix", "data-inline": suffixInline || undefined }
-        : {};
-    //const formItemProps = { "aria-disabled": disabled ? true : undefined }
-    return (jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { ...prefixProps, children: prefix }), jsx("input", { ...componentProps, ref: ref }), suffix && jsx("span", { ...suffixProps, children: suffix })] }));
+import { useField } from "../Field/Field.context.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TextInput/TextInput.tsx
+const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, fit = false, id, name, placeholder, prefix, prefixInline = false, ref, size, suffix, suffixInline = false, type = "text", ...props }) => {
+	const field = useField();
+	const componentProps = {
+		"aria-placeholder": placeholder ?? ariaPlaceholder ?? void 0,
+		className: clsx("coop-text-input", "coop-field-element", className),
+		"data-error": error || void 0,
+		"data-fit": fit || void 0,
+		"data-size": size?.length ? size : void 0,
+		disabled,
+		id: id ?? field?.id,
+		name,
+		placeholder,
+		type,
+		...props
+	};
+	const prefixProps = prefix ? {
+		className: "coop-text-input--prefix",
+		"data-inline": prefixInline || void 0
+	} : {};
+	const suffixProps = suffix ? {
+		className: "coop-text-input--suffix",
+		"data-inline": suffixInline || void 0
+	} : {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "coop-text-input-wrapper",
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				...prefixProps,
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...componentProps,
+				ref
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				...suffixProps,
+				children: suffix
+			})
+		]
+	});
 };
 TextInput.slot = { name: "TextInput" };
-
+//#endregion
 export { TextInput, TextInput as default };

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

@@ -1,4 +1,2 @@
-import TextInput from "./TextInput";
-export default TextInput;
-export { TextInput };
-export * from "./TextInput";
+import { TextInput, TextInputProps } from "./TextInput.js";
+export { TextInput, TextInput as default, TextInputProps };

package/dist/components/TextInput/index.js

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

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

@@ -1,41 +1,47 @@
-import type { JSX, Ref, TextareaHTMLAttributes } from "react";
-import { StandardSizes } from "../../types";
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** Specify the number of columns (characters per row) in the Textarea. Defaults to `30`. */
-    cols?: number;
-    /** **(Optional)** Specify whether to show the character counter underneath the Textarea. */
-    counter?: boolean;
-    /** **(Optional)** Specify whether the Textarea should allow more characters than its `maxLength` value.
-     *
-     * Defaults to `false`, meaning users can enter more characters than the maximum but will be warned if they go over the limit.
-     */
-    cutoff?: boolean;
-    /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
-    disabled?: boolean;
-    /** **(Optional)** Specify the Textarea error state */
-    error?: boolean;
-    /** **(Optional)** Specify the Textarea id. Will be auto-generated if not set. */
-    id?: string;
-    /** **(Optional)** Specify the Textarea maxLength. This is the maximum number of characters users can enter. */
-    maxLength?: number;
-    /** Specify the Textarea name. */
-    name: string;
-    /** **(Optional)** Specify the Textarea placeholder text. Do not use in place of a form label. */
-    placeholder?: string;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLTextAreaElement>;
-    /** **(Optional)** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
-    rows?: number;
-    /** **(Optional)** Specify the Textarea size. */
-    size?: StandardSizes;
+import { StandardSizes } from "../../types/index.js";
+import { JSX, Ref, TextareaHTMLAttributes } from "react";
+//#region src/components/Textarea/Textarea.d.ts
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** Specify the number of columns (characters per row) in the Textarea. Defaults to `30`. */
+  cols?: number;
+  /** **(Optional)** Specify whether to show the character counter underneath the Textarea. */
+  counter?: boolean;
+  /** **(Optional)** Specify whether the Textarea should allow more characters than its `maxLength` value.
+   *
+   * Defaults to `false`, meaning users can enter more characters than the maximum but will be warned if they go over the limit.
+   */
+  cutoff?: boolean;
+  /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+  disabled?: boolean;
+  /** **(Optional)** Specify the Textarea error state */
+  error?: boolean;
+  /** **(Optional)** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
+   *
+   * Default: false
+   */
+  fit?: boolean;
+  /** **(Optional)** Specify the Textarea id. Will be auto-generated if not set. */
+  id?: string;
+  /** **(Optional)** Specify the Textarea maxLength. This is the maximum number of characters users can enter. */
+  maxLength?: number;
+  /** Specify the Textarea name. */
+  name: string;
+  /** **(Optional)** Specify the Textarea placeholder text. Do not use in place of a form label. */
+  placeholder?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLTextAreaElement>;
+  /** **(Optional)** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
+  rows?: number;
+  /** **(Optional)** Specify the Textarea size. */
+  size?: StandardSizes;
 }
 declare const Textarea: {
-    ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, fit, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default Textarea;
-export { Textarea };
+//#endregion
+export { Textarea, Textarea as default, TextareaProps };