@arc-ui/components 11.0.0 → 11.1.0

package/dist/TextInput/TextInput.cjs.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var index = require('../_shared/cjs/index-78b35bc1.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
-var FormControl = require('../_shared/cjs/FormControl-a1b7421b.js');
+var FormControl = require('../_shared/cjs/FormControl-e6b7d7c5.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+require('../_shared/cjs/Text-1d3844be.js');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43,22 +47,37 @@ var useNumericInput = function (props) {
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 var TextInput = React.forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, value = _a.value, props = index.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "pattern", "type", "value"]);
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = index.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText"]);
     var surface = React.useContext(Surface.Context).surface;
-    var inferredInputProps = useNumericInput({ inputMode: inputMode, pattern: pattern, type: type });
+    var _j = React.useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
+    var inferredInputProps = useNumericInput({
+        inputMode: inputMode,
+        pattern: pattern,
+        type: showPasswordToggle ? "text" : type
+    });
     // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
     var ariaDescribedby = FormControl.useAriaDescribedby({
         errorMessage: errorMessage,
         id: id,
-        helper: helper
+        helper: helper,
+        disclosureText: disclosureText
     }).ariaDescribedby;
     return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
             "arc-TextInput": true,
+            "arc-TextInput--withPasswordToggle": showPassword,
             "arc-TextInput--invalid": errorMessage,
             "arc-TextInput--onDarkSurface": surface === "dark"
         }) }, index.filterDataAttrs(props)),
-        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
-            React__default["default"].createElement("input", index.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
+        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+            React__default["default"].createElement("div", { className: "arc-TextInput-inputWrapper" },
+                React__default["default"].createElement("input", index.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
+                showPassword && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
+                    React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                        React__default["default"].createElement("div", { "aria-live": "polite" },
+                            React__default["default"].createElement("p", null, showPasswordToggle
+                                ? "Your password is shown"
+                                : "Your password is hidden")))))))));
 });
 
 exports.TextInput = TextInput;

package/dist/TextInput/TextInput.esm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/esm/FormControl-feedc495";
+import { FormControlProps } from "../_shared/esm/FormControl-84c9ace6";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
@@ -58,6 +58,10 @@ interface TextInputProps extends Omit<FormControlProps, "children" | "elementTyp
      * Validation regex pattern.
      */
     pattern?: string;
+    /**
+     * Enable button to toggle TextInput type from `Selected Type` to `Text`
+     */
+    showPassword?: boolean;
     /**
      * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
      */

package/dist/TextInput/TextInput.esm.js

@@ -1,8 +1,12 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React, { forwardRef, useContext } from 'react';
-import { u as useAriaDescribedby, F as FormControl } from '../_shared/esm/FormControl-feedc495.js';
-import { C as Context } from '../_shared/esm/Surface-d515d212.js';
+import React__default, { forwardRef, useContext, useState } from 'react';
+import { u as useAriaDescribedby, F as FormControl } from '../_shared/esm/FormControl-84c9ace6.js';
+import { C as Context } from '../_shared/esm/Surface-bf201530.js';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import '../_shared/esm/Text-6b958ad8.js';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
 
 /**
  * Infer the correct inputMode, pattern and type if specifying a `number` type.
@@ -35,22 +39,37 @@ var useNumericInput = function (props) {
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 var TextInput = forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, value = _a.value, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "pattern", "type", "value"]);
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText"]);
     var surface = useContext(Context).surface;
-    var inferredInputProps = useNumericInput({ inputMode: inputMode, pattern: pattern, type: type });
+    var _j = useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
+    var inferredInputProps = useNumericInput({
+        inputMode: inputMode,
+        pattern: pattern,
+        type: showPasswordToggle ? "text" : type
+    });
     // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
     var ariaDescribedby = useAriaDescribedby({
         errorMessage: errorMessage,
         id: id,
-        helper: helper
+        helper: helper,
+        disclosureText: disclosureText
     }).ariaDescribedby;
-    return (React.createElement("div", __assign({ className: classNames({
+    return (React__default.createElement("div", __assign({ className: classNames({
             "arc-TextInput": true,
+            "arc-TextInput--withPasswordToggle": showPassword,
             "arc-TextInput--invalid": errorMessage,
             "arc-TextInput--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
-        React.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
-            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
+        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+            React__default.createElement("div", { className: "arc-TextInput-inputWrapper" },
+                React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
+                showPassword && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
+                    React__default.createElement(VisuallyHidden, null,
+                        React__default.createElement("div", { "aria-live": "polite" },
+                            React__default.createElement("p", null, showPasswordToggle
+                                ? "Your password is shown"
+                                : "Your password is hidden")))))))));
 });
 
 export { TextInput };

package/dist/Truncate/Truncate.cjs.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from "react";
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+declare const Truncate: FC<TruncateProps>;
+interface TruncateProps {
+    /**
+     * Content to truncate.
+     */
+    children: ReactNode;
+    /**
+     * Use title to provide extra information about text that is truncated.
+     */
+    title: string;
+    /**
+     * Set max width of visible content within `Truncate`. Default is `100%`.
+     */
+    maxWidth?: number;
+}
+export { Truncate };

package/dist/Truncate/Truncate.cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+var Truncate = function (_a) {
+    var _b = _a.maxWidth, maxWidth = _b === void 0 ? 100 : _b, title = _a.title, children = _a.children;
+    return (React__default["default"].createElement("div", { className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, children));
+};
+
+exports.Truncate = Truncate;

package/dist/Truncate/Truncate.esm.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from "react";
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+declare const Truncate: FC<TruncateProps>;
+interface TruncateProps {
+    /**
+     * Content to truncate.
+     */
+    children: ReactNode;
+    /**
+     * Use title to provide extra information about text that is truncated.
+     */
+    title: string;
+    /**
+     * Set max width of visible content within `Truncate`. Default is `100%`.
+     */
+    maxWidth?: number;
+}
+export { Truncate };

package/dist/Truncate/Truncate.esm.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+var Truncate = function (_a) {
+    var _b = _a.maxWidth, maxWidth = _b === void 0 ? 100 : _b, title = _a.title, children = _a.children;
+    return (React__default.createElement("div", { className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, children));
+};
+
+export { Truncate };

package/dist/Truncate/package.json

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

package/dist/UniversalHeader/UniversalHeader.esm.js

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
-import React, { useEffect } from 'react';
-import { S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import React__default, { useEffect } from 'react';
+import { S as Surface } from '../_shared/esm/Surface-bf201530.js';
 import '../_shared/esm/index-2ae58626.js';
 
 /**
@@ -9,20 +9,20 @@ import '../_shared/esm/index-2ae58626.js';
 var UniversalHeader = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item && item.type !== UniversalHeaderItem) {
                 throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
             }
         });
     }, [children]);
-    return (React.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
-        React.createElement(Surface, { background: "light" },
-            React.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+    return (React__default.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { background: "light" },
+            React__default.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
 };
 var UniversalHeaderItem = function (_a) {
     var children = _a.children, href = _a.href, props = __rest(_a, ["children", "href"]);
-    return (React.createElement("li", __assign({}, filterDataAttrs(props)),
-        React.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
+    return (React__default.createElement("li", __assign({}, filterDataAttrs(props)),
+        React__default.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
 };
 UniversalHeaderItem.displayName = "UniversalHeader.Item";
 UniversalHeader.Item = UniversalHeaderItem;

package/dist/VerticalSpace/VerticalSpace.esm.js

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React from 'react';
+import React__default from 'react';
 
 /**
  * Use `VerticalSpace` to create vertical space between components.
@@ -8,7 +8,7 @@ import React from 'react';
 var VerticalSpace = function (_a) {
     var _b;
     var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = __rest(_a, ["isDebugVisible", "size"]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {
                 "arc-VerticalSpace": true
             },
             _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",

package/dist/VisuallyHidden/VisuallyHidden.cjs.d.ts

@@ -1,12 +1 @@
-import { FC, ReactNode } from "react";
-/**
- * Provides text for screen readers that is visually hidden.
- */
-declare const VisuallyHidden: FC<VisuallyHiddenProps>;
-interface VisuallyHiddenProps {
-    /**
-     * Content to be Visually Hidden.
-     */
-    children?: ReactNode;
-}
-export { VisuallyHidden };
+export { VisuallyHidden } from "../_shared/cjs/VisuallyHidden-e2c8b291";

package/dist/VisuallyHidden/VisuallyHidden.cjs.js

@@ -2,18 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * Provides text for screen readers that is visually hidden.
- */
-var VisuallyHidden = function (_a) {
-    var children = _a.children;
-    return (React__default["default"].createElement("div", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
-};
-
-exports.VisuallyHidden = VisuallyHidden;
+exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;

package/dist/VisuallyHidden/VisuallyHidden.esm.d.ts

@@ -1,12 +1 @@
-import { FC, ReactNode } from "react";
-/**
- * Provides text for screen readers that is visually hidden.
- */
-declare const VisuallyHidden: FC<VisuallyHiddenProps>;
-interface VisuallyHiddenProps {
-    /**
-     * Content to be Visually Hidden.
-     */
-    children?: ReactNode;
-}
-export { VisuallyHidden };
+export { VisuallyHidden } from "../_shared/esm/VisuallyHidden-b9eebf71";

package/dist/VisuallyHidden/VisuallyHidden.esm.js

@@ -1,11 +1,2 @@
-import React from 'react';
-
-/**
- * Provides text for screen readers that is visually hidden.
- */
-var VisuallyHidden = function (_a) {
-    var children = _a.children;
-    return (React.createElement("div", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
-};
-
-export { VisuallyHidden };
+export { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import 'react';

package/dist/_shared/cjs/Base-e2b846fe.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+declare const ArcRootElementContext: React.Context<HTMLElement | null>;
+/**
+ * Use `Base` as the root component of the arc system.
+ */
+declare const Base: FC<BaseProps>;
+interface BaseProps {
+    /**
+     * Brand theme to apply to Base.
+     */
+    brand?: "bt" | null;
+    /**
+     * Content to display inside Base.
+     */
+    children: any;
+}
+export { ArcRootElementContext, Base, BaseProps };

package/dist/_shared/cjs/Base-e2b846fe.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ArcRootElementContext = React.createContext(null);
+/**
+ * Use `Base` as the root component of the arc system.
+ */
+var Base = function (_a) {
+    var _b = _a.brand, brand = _b === void 0 ? "bt" : _b, children = _a.children, props = index.__rest(_a, ["brand", "children"]);
+    var _c = React__default["default"].useState(null), arcRoot = _c[0], setArcRoot = _c[1];
+    return (React__default["default"].createElement("div", index.__assign({ id: "arc-root", ref: setArcRoot, className: "arc".concat(brand ? " arc-".concat(brand) : "") }, index.filterDataAttrs(props)),
+        React__default["default"].createElement(ArcRootElementContext.Provider, { value: arcRoot }, children)));
+};
+
+exports.ArcRootElementContext = ArcRootElementContext;
+exports.Base = Base;

package/dist/_shared/cjs/{FormControl-a1b7421b.d.ts → FormControl-e6b7d7c5.d.ts}

@@ -1,23 +1,54 @@
 /// <reference types="react" />
 import React from "react";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
+/**
+ * Use `FormControlDisclosure` to display content that is only visible when toggled into
+ * an "open" state.
+ */
+declare const FormControlDisclosure: FC<FormControlDisclosureProps>;
+interface FormControlDisclosureProps {
+    /**
+     * Content to display in the FormControlDisclosure.
+     */
+    children: ReactNode;
+    /**
+     * FormControlDisclosure ID.
+     */
+    id?: string;
+    /**
+     * The FormControlDisclosure summary text.
+     */
+    summary: string;
+    /**
+     * On Click handler for FormControlDisclosure summary disclosure.
+     */
+    onClick?: () => void;
+    /**
+     * Disclosure size.
+     */
+    size?: "s" | "l";
+}
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
  */
-declare const useAriaDescribedby: ({ id, idError, idHelper, errorMessage, helper }: {
+declare const useAriaDescribedby: ({ id, idError, idHelper, idDisclosure, errorMessage, helper, disclosureText }: {
     id?: string | undefined;
     idError?: string | undefined;
+    idDisclosure?: string | undefined;
     idHelper?: string | undefined;
     errorMessage?: any;
     helper?: any;
+    disclosureText?: string | undefined;
 }) => {
     ariaDescribedby: undefined;
     idHelper: undefined;
     idError: undefined;
+    idDisclosure: undefined;
 } | {
     ariaDescribedby: string | undefined;
     idError: string;
     idHelper: string;
+    idDisclosure: string;
 };
 type RequirementStatus = "required" | "optional" | "not-applicable";
 declare const Context: React.Context<{
@@ -62,9 +93,26 @@ interface FormControlProps {
      * Label for the FormControl.
      */
     label: string;
+    /**
+     * Determins if the Label should be in a disabled state
+     */
+    isDisabled?: boolean;
     /**
      * Label size.
      */
     labelSize?: "s" | "l";
+    /**
+     *   Use `DisclosureTitle` to display content that is only visible when toggled into
+     * an "open" state. This overrides helper text.
+     */
+    disclosureTitle?: string;
+    /**
+     * Text to display within the disclosure
+     */
+    disclosureText?: string;
+    /**
+     * onClick handler for FormControlDisclosure
+     */
+    onClickDisclosure?: () => void;
 }
-export { useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };
+export { FormControlDisclosure, FormControlDisclosureProps, useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };

package/dist/_shared/cjs/{FormControl-a1b7421b.js → FormControl-e6b7d7c5.js}

@@ -4,6 +4,8 @@ var index = require('./index-78b35bc1.js');
 var index$1 = require('./index-45bfb67b.js');
 var React$1 = require('react');
 var Surface = require('./Surface-d6b8010e.js');
+var Text = require('./Text-1d3844be.js');
+var BtIconChevronRightMid = require('./BtIconChevronRightMid-5a38d855.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,12 +15,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
  */
 var useAriaDescribedby = function (_a) {
-    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, errorMessage = _a.errorMessage, helper = _a.helper;
+    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, _d = _a.idDisclosure, idDisclosure = _d === void 0 ? "".concat(id, "-disclosure") : _d, errorMessage = _a.errorMessage, helper = _a.helper, disclosureText = _a.disclosureText;
     if (!id) {
         return {
             ariaDescribedby: undefined,
             idHelper: undefined,
-            idError: undefined
+            idError: undefined,
+            idDisclosure: undefined
         };
     }
     var ariaDescribedbyArr = [];
@@ -28,8 +31,11 @@ var useAriaDescribedby = function (_a) {
     if (helper) {
         ariaDescribedbyArr.push(idHelper);
     }
+    if (disclosureText) {
+        ariaDescribedbyArr.push(idDisclosure);
+    }
     var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
-    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper };
+    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper, idDisclosure: idDisclosure };
 };
 
 const React = React__default["default"];
@@ -61,6 +67,31 @@ const BtIconAlert = props =>
   );
 var BtIconAlert_2 = BtIconAlert;
 
+/**
+ * Use `FormControlDisclosure` to display content that is only visible when toggled into
+ * an "open" state.
+ */
+var FormControlDisclosure = function (_a) {
+    var children = _a.children, summary = _a.summary, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "l" : _b, id = _a.id, props = index.__rest(_a, ["children", "summary", "onClick", "size", "id"]);
+    var surface = React$1.useContext(Surface.Context).surface;
+    var _c = React$1.useState(false), disclousreState = _c[0], setDisclosureState = _c[1];
+    var handleOnClick = function () {
+        onClick && onClick();
+        setDisclosureState(function (prevState) { return !prevState; });
+    };
+    return (React__default["default"].createElement("details", index.__assign({ className: index$1.classNames({
+            "arc-FormControlDisclosure": true,
+            "arc-FormControlDisclosure--onDarkSurface": surface === "dark"
+        }) }, index.filterDataAttrs(props), { "data-testid": "FormControlDisclosure" }),
+        React__default["default"].createElement("summary", { className: "arc-FormControlDisclosure-summary", onClick: handleOnClick, "aria-expanded": disclousreState },
+            React__default["default"].createElement("span", { className: "arc-FormControlDisclosure-summary-icon" },
+                React__default["default"].createElement(BtIconChevronRightMid.BtIconChevronRightMid_2, null)),
+            React__default["default"].createElement(Text.Text, { size: size === "l" ? "m" : "s" }, summary)),
+        React__default["default"].createElement("div", { className: "arc-FormControlDisclosure-details" },
+            React__default["default"].createElement(Text.Text, { size: size === "l" ? "m" : "s" },
+                React__default["default"].createElement("span", { id: id }, children)))));
+};
+
 var defaultContext = {
     requirementStatus: null
 };
@@ -70,13 +101,14 @@ var Provider = Context.Provider;
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, props = index.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus"]);
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = index.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = React$1.useContext(Surface.Context).surface;
     var _e = useAriaDescribedby({
+        disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper;
+    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper, idDisclosure = _e.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -95,18 +127,18 @@ var FormControl = function (_a) {
     return (React__default["default"].createElement(Provider, { value: { requirementStatus: requirementStatus } },
         React__default["default"].createElement(ElementType, index.__assign({ className: index$1.classNames({
                 "arc-FormControl": true,
+                "arc-FormControl--isDisabled": isDisabled,
                 "arc-FormControl--smallLabel": labelSize === "s",
                 "arc-FormControl--onDarkSurface": surface === "dark"
             }), id: id }, elementProps, index.filterDataAttrs(props)),
             React__default["default"].createElement(LabelType, index.__assign({ className: "arc-FormControl-label" }, labelProps),
                 label,
                 requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
-            helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
             children,
-            errorMessage && (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
+            errorMessage ? (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
                 React__default["default"].createElement("span", { className: "arc-FormControl-error--icon" },
                     React__default["default"].createElement(BtIconAlert_2, null)),
-                errorMessage)))));
+                errorMessage)) : disclosureTitle ? (React__default["default"].createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))));
 };
 
 exports.BtIconAlert_2 = BtIconAlert_2;

package/dist/_shared/cjs/VisuallyHidden-e2c8b291.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+declare const VisuallyHidden: FC<VisuallyHiddenProps>;
+interface VisuallyHiddenProps {
+    /**
+     * Content to be Visually Hidden.
+     */
+    children?: ReactNode;
+}
+export { VisuallyHidden, VisuallyHiddenProps };

package/dist/_shared/cjs/VisuallyHidden-e2c8b291.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+var VisuallyHidden = function (_a) {
+    var children = _a.children;
+    return (React__default["default"].createElement("span", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
+};
+
+exports.VisuallyHidden = VisuallyHidden;

package/dist/_shared/cjs/index-c81c9401.d.ts

@@ -1,4 +1,4 @@
-export * from "./FormControl-a1b7421b";
+export * from "./FormControl-e6b7d7c5";
 export * from "../../Card/Card.cjs";
 export * from "./index.es-77def0c9";
 export * from "../../TextInput/TextInput.cjs";