@arc-ui/components 11.4.2 → 11.6.0

package/dist/Surface/Surface.cjs.d.ts

@@ -1 +1 @@
-export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/cjs/Surface-d6b8010e";
+export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/cjs/Surface-6da0a78e";

package/dist/Surface/Surface.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
-require('../_shared/cjs/index-78b35bc1.js');
+var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 require('../_shared/cjs/index-45bfb67b.js');
 require('react');
 

package/dist/Surface/Surface.esm.d.ts

@@ -1 +1 @@
-export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/esm/Surface-bf201530";
+export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/esm/Surface-bb100ef8";

package/dist/Surface/Surface.esm.js

@@ -1,4 +1,4 @@
-export { S as Surface, C as SurfaceContext, b as backgrounds, a as backgroundsBT } from '../_shared/esm/Surface-bf201530.js';
-import '../_shared/esm/index-229fc864.js';
+export { S as Surface, C as SurfaceContext, b as backgrounds, a as backgroundsBT } from '../_shared/esm/Surface-bb100ef8.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';

package/dist/Switch/Switch.cjs.d.ts

@@ -1,9 +1,9 @@
 import { FC } from "react";
 import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
-import { FormControlProps } from "../_shared/cjs/FormControl-d4d9c665";
+import { FormControlProps } from "../_shared/cjs/FormControl-9aaddd54";
 /** Use `Switch` to toggle between checked and not checked. */
 declare const Switch: FC<SwitchProps>;
-interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {
+interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper" | "supplementaryInfo"> {
     /**
      * Hide Label above toggle?
      */

package/dist/Switch/Switch.cjs.js

@@ -5,16 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var index = require('../_shared/cjs/index-45bfb67b.js');
 var index_module = require('../_shared/cjs/index.module-af7c85f2.js');
-var Icon = require('../_shared/cjs/Icon-719d13d4.js');
+var Icon = require('../_shared/cjs/Icon-9ae8dbe1.js');
 var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-bdf06f8c.js');
-var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
-var FormControl = require('../_shared/cjs/FormControl-d4d9c665.js');
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-7aed88ab.js');
-var Text = require('../_shared/cjs/Text-1d3844be.js');
+var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+var FormControl = require('../_shared/cjs/FormControl-9aaddd54.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-86f697e7.js');
+var Text = require('../_shared/cjs/Text-6f2827e6.js');
 require('react-dom');
-require('../_shared/cjs/index-78b35bc1.js');
-require('../_shared/cjs/suffix-modifier-edf7851e.js');
-require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+require('../_shared/cjs/BtIconAlert-637db790.js');
+require('../_shared/cjs/DisclosureMini-067e0319.js');
+require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Switch/Switch.esm.d.ts

@@ -1,9 +1,9 @@
 import { FC } from "react";
 import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
-import { FormControlProps } from "../_shared/esm/FormControl-2cb96de7";
+import { FormControlProps } from "../_shared/esm/FormControl-5e3fdca3";
 /** Use `Switch` to toggle between checked and not checked. */
 declare const Switch: FC<SwitchProps>;
-interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {
+interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper" | "supplementaryInfo"> {
     /**
      * Hide Label above toggle?
      */

package/dist/Switch/Switch.esm.js

@@ -1,16 +1,18 @@
 import React__default, { useState, forwardRef, useRef, createElement, useEffect, useContext } from 'react';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import { g as $9f79659886946c16$export$e5c5a5f917a5871c, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $71cd76cc60e0454e$export$6f32135080cb4c3, d as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, e as $e42e1063c40fb3ef$export$b9ecd428b558ff10, i as $010c2913dbd2fe3d$export$5cae361ad82dce8b } from '../_shared/esm/index.module-599b86dd.js';
-import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
+import { I as Icon } from '../_shared/esm/Icon-fd247973.js';
 import { B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-da97e9ae.js';
-import { C as Context } from '../_shared/esm/Surface-bf201530.js';
-import { F as FormControl } from '../_shared/esm/FormControl-2cb96de7.js';
-import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-3579b20e.js';
-import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
+import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
+import { F as FormControl } from '../_shared/esm/FormControl-5e3fdca3.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-93980c9c.js';
+import { T as Text } from '../_shared/esm/Text-00e9743b.js';
 import 'react-dom';
-import '../_shared/esm/index-229fc864.js';
-import '../_shared/esm/suffix-modifier-f5e28822.js';
-import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';
+import '../_shared/esm/BtIconAlert-55a6ed5c.js';
+import '../_shared/esm/DisclosureMini-022beae3.js';
+import '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
 
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     const [size, setSize] = useState(undefined);

package/dist/Tag/Tag.cjs.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../_shared/cjs/index-78b35bc1.js');
-var React$1 = require('react');
-var index$1 = require('../_shared/cjs/index-45bfb67b.js');
-var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
-var Icon = require('../_shared/cjs/Icon-719d13d4.js');
-require('../_shared/cjs/suffix-modifier-edf7851e.js');
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+var React$2 = require('react');
+var index = require('../_shared/cjs/index-45bfb67b.js');
+var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+var Icon = require('../_shared/cjs/Icon-9ae8dbe1.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$2);
 
-const React = React__default["default"];
+const React$1 = React__default["default"];
 const BtIconCross = props =>
-  /*#__PURE__*/ React.createElement(
+  /*#__PURE__*/ React$1.createElement(
     "svg",
     Object.assign(
       {
@@ -24,13 +24,13 @@ const BtIconCross = props =>
       },
       props
     ),
-    /*#__PURE__*/ React.createElement("defs", null),
-    /*#__PURE__*/ React.createElement("path", {
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.createElement("path", {
       d:
         "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
       fill: "currentColor"
     }),
-    /*#__PURE__*/ React.createElement("path", {
+    /*#__PURE__*/ React$1.createElement("path", {
       d:
         "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
       fill: "currentColor"
@@ -38,24 +38,44 @@ const BtIconCross = props =>
   );
 var BtIconCross_2 = BtIconCross;
 
+const React = React__default["default"];
+const BtIconCrossFill = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossFill_2 = BtIconCrossFill;
+
 /**
  * use `Tag` to promote features and manage filtering.
  */
 var Tag = function (_a) {
-    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = index.__rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
-    var surface = React$1.useContext(Surface.Context).surface;
-    var _b = React$1.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = filterDataAttrs.__rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
+    var surface = React$2.useContext(Surface.Context).surface;
+    var _b = React$2.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
     var onRemoveHandler = function () {
         setIsRemoved(function (p) { return !p; });
         onRemove && onRemove();
     };
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames("arc-Tag", {
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-Tag", {
             "arc-Tag--onDarkSurface": surface === "dark",
             "arc-Tag--isRemovable": isRemovable,
             "arc-Tag--hasIcon": icon,
             "arc-Tag--hasLink": link || onClick,
             "arc-Tag--removed": isRemoved
-        }) }, (isRemoved && { "aria-hidden": true }), index.filterDataAttrs(props)),
+        }) }, (isRemoved && { "aria-hidden": true }), filterDataAttrs.filterDataAttrs(props)),
         link ? (React__default["default"].createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
             icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
                 React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
@@ -67,7 +87,8 @@ var Tag = function (_a) {
                 React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
             React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
         isRemovable && (React__default["default"].createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
-            React__default["default"].createElement(Icon.Icon, { icon: BtIconCross_2, color: "brand", size: 20 })))));
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconCross_2, color: "brand", size: 20 }),
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconCrossFill_2, color: "brand", size: 20 })))));
 };
 
 exports.Tag = Tag;

package/dist/Tag/Tag.esm.js

@@ -1,13 +1,13 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import React__default, { useContext, useState } from 'react';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import { C as Context } from '../_shared/esm/Surface-bf201530.js';
-import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
-import '../_shared/esm/suffix-modifier-f5e28822.js';
+import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
+import { I as Icon } from '../_shared/esm/Icon-fd247973.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';
 
-const React = React__default;
+const React$1 = React__default;
 const BtIconCross = props =>
-  /*#__PURE__*/ React.createElement(
+  /*#__PURE__*/ React$1.createElement(
     "svg",
     Object.assign(
       {
@@ -16,13 +16,13 @@ const BtIconCross = props =>
       },
       props
     ),
-    /*#__PURE__*/ React.createElement("defs", null),
-    /*#__PURE__*/ React.createElement("path", {
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.createElement("path", {
       d:
         "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
       fill: "currentColor"
     }),
-    /*#__PURE__*/ React.createElement("path", {
+    /*#__PURE__*/ React$1.createElement("path", {
       d:
         "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
       fill: "currentColor"
@@ -30,6 +30,26 @@ const BtIconCross = props =>
   );
 var BtIconCross_2 = BtIconCross;
 
+const React = React__default;
+const BtIconCrossFill = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossFill_2 = BtIconCrossFill;
+
 /**
  * use `Tag` to promote features and manage filtering.
  */
@@ -59,7 +79,8 @@ var Tag = function (_a) {
                 React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
             React__default.createElement("div", { className: "arc-Tag-label" }, children))))),
         isRemovable && (React__default.createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
-            React__default.createElement(Icon, { icon: BtIconCross_2, color: "brand", size: 20 })))));
+            React__default.createElement(Icon, { icon: BtIconCross_2, color: "brand", size: 20 }),
+            React__default.createElement(Icon, { icon: BtIconCrossFill_2, color: "brand", size: 20 })))));
 };
 
 export { Tag };

package/dist/Text/Text.cjs.d.ts

@@ -1 +1 @@
-export { Text } from "../_shared/cjs/Text-1d3844be";
+export { Text } from "../_shared/cjs/Text-6f2827e6";

package/dist/Text/Text.cjs.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Text = require('../_shared/cjs/Text-1d3844be.js');
-require('../_shared/cjs/index-78b35bc1.js');
+var Text = require('../_shared/cjs/Text-6f2827e6.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 require('../_shared/cjs/index-45bfb67b.js');
 require('react');
-require('../_shared/cjs/suffix-modifier-edf7851e.js');
-require('../_shared/cjs/Surface-d6b8010e.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+require('../_shared/cjs/Surface-6da0a78e.js');
 
 
 

package/dist/Text/Text.esm.d.ts

@@ -1 +1 @@
-export { Text } from "../_shared/esm/Text-6b958ad8";
+export { Text } from "../_shared/esm/Text-00e9743b";

package/dist/Text/Text.esm.js

@@ -1,6 +1,6 @@
-export { T as Text } from '../_shared/esm/Text-6b958ad8.js';
-import '../_shared/esm/index-229fc864.js';
+export { T as Text } from '../_shared/esm/Text-00e9743b.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';
-import '../_shared/esm/suffix-modifier-f5e28822.js';
-import '../_shared/esm/Surface-bf201530.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';
+import '../_shared/esm/Surface-bb100ef8.js';

package/dist/TextArea/TextArea.cjs.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import React from "react";
+import { FormControlProps } from "../_shared/cjs/FormControl-9aaddd54";
+type EventType = React.ChangeEvent<HTMLTextAreaElement>;
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
+    /**
+     * Uncontrolled default value of the TextArea. If the TextArea is controlled
+     * via `value`/`onChange`, `defaultValue` will be ignored.
+     */
+    defaultValue?: string;
+    /**
+     * ID for the TextArea.
+     */
+    id: string;
+    /**
+     * Should the control be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the control be read-only?
+     */
+    isReadOnly?: boolean;
+    /**
+     * Should the control be required?
+     */
+    isRequired?: boolean;
+    /**
+     * Maximum number of characters.
+     */
+    maxLength?: number;
+    /**
+     * Shows the current character count and maxLength. Ignored if maxLength is undefined.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * Name of the input.
+     */
+    name?: string;
+    /**
+     * `none` will prevent any resizing.
+     * `manual` will allow the user to resize the TextArea.
+     * `auto` will resize the text area as needed when the user types.
+     */
+    resize?: "none" | "manual" | "auto";
+    /**
+     * Function to call when the TextArea loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function commonly used to update the TextArea's controlled
+     * `value`, for example `e => setValue(e.target.value)`.
+     */
+    onChange?: (e: EventType) => void;
+    /**
+     * Current value of the TextArea. Must be controlled via an
+     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
+     */
+    value?: string;
+}
+export { TextArea };

package/dist/TextArea/TextArea.cjs.js

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+var React = require('react');
+var index = require('../_shared/cjs/index-45bfb67b.js');
+require('../_shared/cjs/Base-569e4334.js');
+require('../_shared/cjs/Breadcrumbs-8b554370.js');
+var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+require('../_shared/cjs/Button-27512fee.js');
+require('../_shared/cjs/Card-804ab0e5.js');
+require('../_shared/cjs/Checkbox-21d3c4f6.js');
+require('../_shared/cjs/Columns-e90798f8.js');
+require('../_shared/cjs/Heading-d45f6a7f.js');
+var FormControl = require('../_shared/cjs/FormControl-9aaddd54.js');
+require('../_shared/cjs/Filter-f7d2fbda.js');
+require('../_shared/cjs/Group-d83f8c2e.js');
+require('../_shared/cjs/Image-3bf4b4f3.js');
+require('../_shared/cjs/UniversalHeader-cc1d9e5a.js');
+require('../_shared/cjs/Poster-e05bbe13.js');
+require('../_shared/cjs/RadioGroup-81805ef9.js');
+require('../_shared/cjs/SiteFooter-c540b5f1.js');
+require('../_shared/cjs/SiteHeader.rehydrator-f7fa2efe.js');
+var Text = require('../_shared/cjs/Text-6f2827e6.js');
+require('../_shared/cjs/TextInput-33314fc4.js');
+require('../_shared/cjs/debounce-506538c5.js');
+require('../_shared/cjs/BtIconChevronRight2Px-a8e40136.js');
+require('../_shared/cjs/Icon-9ae8dbe1.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+require('../_shared/cjs/handle-link-click-17a44cf4.js');
+require('../_shared/cjs/BtIconChevronLeftMid-df952a3e.js');
+require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+require('../_shared/cjs/BtIconTickAlt2Px-bdf06f8c.js');
+require('../_shared/cjs/BtIconAlert-637db790.js');
+require('../_shared/cjs/DisclosureMini-067e0319.js');
+require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
+require('../_shared/cjs/index.es-77def0c9.js');
+require('../_shared/cjs/BrandLogo-8008f0c4.js');
+require('../_shared/cjs/Curve-b05589d8.js');
+require('../_shared/cjs/Section-48aca5f5.js');
+require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var TextArea = React.forwardRef(function (_a, ref) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = filterDataAttrs.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var ourRef = React.useRef(null);
+    var _j = React.useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
+    var setSmartHeight = function (el) {
+        el.style.height = "auto";
+        el.style.height = "".concat(parseInt(getComputedStyle(el).getPropertyValue("border-width")) *
+            2 +
+            el.scrollHeight, "px");
+    };
+    var getTextAreaRef = function (elementRef) {
+        ourRef.current = elementRef;
+        if (ref && typeof ref === "object") {
+            ref.current = elementRef;
+        }
+        if (ref && typeof ref === "function") {
+            ref(elementRef);
+        }
+    };
+    var handleOnChange = function (e) {
+        resize === "auto" && ourRef.current && setSmartHeight(ourRef.current);
+        onChange && onChange(e);
+        setCharacterCount(e.target.value.length);
+    };
+    return (React__default["default"].createElement(FormControl.FormControl, filterDataAttrs.__assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
+            showCharacterCount && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(Text.Text, { tone: isDisabled ? "muted" : "default" },
+                React__default["default"].createElement("span", { className: "arc-TextArea-characterCount" },
+                    characterCount,
+                    " / ",
+                    maxLength)))) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement("textarea", { id: id, className: index.classNames("arc-TextArea", {
+                "arc-TextArea--noResize": resize !== "manual",
+                "arc-TextArea--onDarkSurface": surface === "dark",
+                "arc-TextArea--invalid": errorMessage
+            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef })));
+});
+
+exports.TextArea = TextArea;

package/dist/TextArea/TextArea.esm.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import React from "react";
+import { FormControlProps } from "../_shared/esm/FormControl-5e3fdca3";
+type EventType = React.ChangeEvent<HTMLTextAreaElement>;
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
+    /**
+     * Uncontrolled default value of the TextArea. If the TextArea is controlled
+     * via `value`/`onChange`, `defaultValue` will be ignored.
+     */
+    defaultValue?: string;
+    /**
+     * ID for the TextArea.
+     */
+    id: string;
+    /**
+     * Should the control be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the control be read-only?
+     */
+    isReadOnly?: boolean;
+    /**
+     * Should the control be required?
+     */
+    isRequired?: boolean;
+    /**
+     * Maximum number of characters.
+     */
+    maxLength?: number;
+    /**
+     * Shows the current character count and maxLength. Ignored if maxLength is undefined.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * Name of the input.
+     */
+    name?: string;
+    /**
+     * `none` will prevent any resizing.
+     * `manual` will allow the user to resize the TextArea.
+     * `auto` will resize the text area as needed when the user types.
+     */
+    resize?: "none" | "manual" | "auto";
+    /**
+     * Function to call when the TextArea loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function commonly used to update the TextArea's controlled
+     * `value`, for example `e => setValue(e.target.value)`.
+     */
+    onChange?: (e: EventType) => void;
+    /**
+     * Current value of the TextArea. Must be controlled via an
+     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
+     */
+    value?: string;
+}
+export { TextArea };

package/dist/TextArea/TextArea.esm.js

@@ -0,0 +1,79 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import React__default, { forwardRef, useContext, useRef, useState } from 'react';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import '../_shared/esm/Base-6c01e0ec.js';
+import '../_shared/esm/Breadcrumbs-04590057.js';
+import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
+import '../_shared/esm/Button-d319fa11.js';
+import '../_shared/esm/Card-e79eb6c8.js';
+import '../_shared/esm/Checkbox-94300d8c.js';
+import '../_shared/esm/Columns-8704515b.js';
+import '../_shared/esm/Heading-b61432fb.js';
+import { F as FormControl } from '../_shared/esm/FormControl-5e3fdca3.js';
+import '../_shared/esm/Filter-41b391e3.js';
+import '../_shared/esm/Group-d62c3f56.js';
+import '../_shared/esm/Image-3596ce55.js';
+import '../_shared/esm/UniversalHeader-7926abde.js';
+import '../_shared/esm/Poster-107d6954.js';
+import '../_shared/esm/RadioGroup-1fd0f389.js';
+import '../_shared/esm/SiteFooter-8075a9bd.js';
+import '../_shared/esm/SiteHeader.rehydrator-4da8ac64.js';
+import { T as Text } from '../_shared/esm/Text-00e9743b.js';
+import '../_shared/esm/TextInput-1631dbc4.js';
+import '../_shared/esm/debounce-e228705f.js';
+import '../_shared/esm/BtIconChevronRight2Px-b8e7b4ad.js';
+import '../_shared/esm/Icon-fd247973.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';
+import '../_shared/esm/handle-link-click-f64f55a2.js';
+import '../_shared/esm/BtIconChevronLeftMid-9f4f3a3d.js';
+import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+import '../_shared/esm/BtIconTickAlt2Px-da97e9ae.js';
+import '../_shared/esm/BtIconAlert-55a6ed5c.js';
+import '../_shared/esm/DisclosureMini-022beae3.js';
+import '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
+import '../_shared/esm/index.es-00cb3bcb.js';
+import '../_shared/esm/BrandLogo-56699561.js';
+import '../_shared/esm/Curve-3e87b1bc.js';
+import '../_shared/esm/Section-b8038d66.js';
+import '../_shared/esm/VisuallyHidden-b9eebf71.js';
+
+var TextArea = forwardRef(function (_a, ref) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText"]);
+    var surface = useContext(Context).surface;
+    var ourRef = useRef(null);
+    var _j = useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
+    var setSmartHeight = function (el) {
+        el.style.height = "auto";
+        el.style.height = "".concat(parseInt(getComputedStyle(el).getPropertyValue("border-width")) *
+            2 +
+            el.scrollHeight, "px");
+    };
+    var getTextAreaRef = function (elementRef) {
+        ourRef.current = elementRef;
+        if (ref && typeof ref === "object") {
+            ref.current = elementRef;
+        }
+        if (ref && typeof ref === "function") {
+            ref(elementRef);
+        }
+    };
+    var handleOnChange = function (e) {
+        resize === "auto" && ourRef.current && setSmartHeight(ourRef.current);
+        onChange && onChange(e);
+        setCharacterCount(e.target.value.length);
+    };
+    return (React__default.createElement(FormControl, __assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
+            showCharacterCount && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Text, { tone: isDisabled ? "muted" : "default" },
+                React__default.createElement("span", { className: "arc-TextArea-characterCount" },
+                    characterCount,
+                    " / ",
+                    maxLength)))) }, filterDataAttrs(props)),
+        React__default.createElement("textarea", { id: id, className: classNames("arc-TextArea", {
+                "arc-TextArea--noResize": resize !== "manual",
+                "arc-TextArea--onDarkSurface": surface === "dark",
+                "arc-TextArea--invalid": errorMessage
+            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef })));
+});
+
+export { TextArea };

package/dist/TextArea/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/textarea",
+  "types": "./TextArea.esm.d.ts",
+  "main": "./TextArea.cjs.js",
+  "module": "./TextArea.esm.js",
+  "private": true
+}