@arc-ui/components 10.8.1 → 11.1.0

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-33194106.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/BtIconChevronDown2Px-8fb4e2eb.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React$1 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconChevronDown2Px = 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:
+        "M15.99316,23.91406,2.294,10.207A.99989.99989,0,1,1,3.708,8.793l12.28515,12.293L28.292,8.793A.99989.99989,0,1,1,29.70605,10.207Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronDown2Px_2 = BtIconChevronDown2Px;
+
+exports.BtIconChevronDown2Px_2 = BtIconChevronDown2Px_2;

package/dist/_shared/cjs/BtIconChevronRight2Px-a8e40136.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var React$2 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$2);
+
+const React$1 = React__default["default"];
+const BtIconChevronLeft2Px = props =>
+  /*#__PURE__*/ React$1.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronLeft2Px_2 = BtIconChevronLeft2Px;
+
+const React = React__default["default"];
+const BtIconChevronRight2Px = 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:
+        "M9.5,29.99854A1.00025,1.00025,0,0,1,8.793,28.291l12.293-12.28467L8.793,3.7085A.99989.99989,0,0,1,10.207,2.29443l13.707,13.71289L10.207,29.70605A.99827.99827,0,0,1,9.5,29.99854Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronRight2Px_2 = BtIconChevronRight2Px;
+
+exports.BtIconChevronLeft2Px_2 = BtIconChevronLeft2Px_2;
+exports.BtIconChevronRight2Px_2 = BtIconChevronRight2Px_2;

package/dist/_shared/cjs/BtIconChevronRightMid-5a38d855.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React$1 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconChevronRightMid = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M9.04543 8.0002L6.19676 5.1482C6.07077 5.02196 6 4.85089 6 4.67253C6 4.49418 6.07077 4.32311 6.19676 4.19687C6.25906 4.13446 6.33304 4.08495 6.41449 4.05117C6.49594 4.01739 6.58325 4 6.67143 4C6.75961 4 6.84692 4.01739 6.92837 4.05117C7.00982 4.08495 7.0838 4.13446 7.1461 4.19687L10.4701 7.52487C10.5959 7.65108 10.6665 7.82201 10.6665 8.0002C10.6665 8.1784 10.5959 8.34932 10.4701 8.47553L7.1461 11.8035C7.0838 11.8659 7.00982 11.9155 6.92837 11.9492C6.84692 11.983 6.75961 12.0004 6.67143 12.0004C6.58325 12.0004 6.49594 11.983 6.41449 11.9492C6.33304 11.9155 6.25906 11.8659 6.19676 11.8035C6.07077 11.6773 6 11.5062 6 11.3279C6 11.1495 6.07077 10.9784 6.19676 10.8522L9.04543 8.0002Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronRightMid_2 = BtIconChevronRightMid;
+
+exports.BtIconChevronRightMid_2 = BtIconChevronRightMid_2;

package/dist/_shared/cjs/{Button-1743b3ec.d.ts → Button-b3a69953.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { icons } from "@arc-ui/tokens";
 import React from "react";
 import { FC } from "react";
+import { ArcIcon } from "./arc-icon-17594b2f";
 type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
 type Ref = React.Ref<ElementUnion> | null;
 /**
@@ -12,7 +12,7 @@ interface ButtonIconProps {
     /**
      * Icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * Should the icon be a default chevron?
      */
@@ -57,7 +57,7 @@ interface ButtonProps extends ButtonElementProps, LinkElementProps {
     /**
      * Button icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * How should a Button icon be displayed?
      */

package/dist/_shared/cjs/{Button-1743b3ec.js → Button-b3a69953.js}

@@ -1,23 +1,46 @@
 'use strict';
 
 var index = require('./index-78b35bc1.js');
+var React$1 = require('react');
+var BtIconChevronRightMid = require('./BtIconChevronRightMid-5a38d855.js');
 var index$1 = require('./index-45bfb67b.js');
-var React = require('react');
 var suffixModifier = require('./suffix-modifier-edf7851e.js');
-var Icon = require('./Icon-bb5a5fd1.js');
+var Icon = require('./Icon-719d13d4.js');
 var Surface = require('./Surface-d6b8010e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconChevronLeftMid = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M7.62107 8.00023L10.4697 10.8522C10.5957 10.9785 10.6665 11.1495 10.6665 11.3279C10.6665 11.5063 10.5957 11.6773 10.4697 11.8036C10.4074 11.866 10.3335 11.9155 10.252 11.9493C10.1706 11.983 10.0833 12.0004 9.99507 12.0004C9.9069 12.0004 9.81959 11.983 9.73814 11.9493C9.65669 11.9155 9.5827 11.866 9.52041 11.8036L6.19641 8.47556C6.07061 8.34935 5.99998 8.17842 5.99998 8.00023C5.99998 7.82203 6.07061 7.6511 6.19641 7.52489L9.52041 4.19689C9.5827 4.13449 9.65669 4.08498 9.73814 4.0512C9.81959 4.01741 9.9069 4.00003 9.99507 4.00003C10.0832 4.00003 10.1706 4.01741 10.252 4.0512C10.3335 4.08498 10.4074 4.13449 10.4697 4.19689C10.5957 4.32313 10.6665 4.4942 10.6665 4.67256C10.6665 4.85092 10.5957 5.02199 10.4697 5.14823L7.62107 8.00023Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronLeftMid_2 = BtIconChevronLeftMid;
 
 /**
  * Use `Button` to allow users to take actions with clicks and taps.
  */
-var Button = React.forwardRef(function (_a, ref) {
+var Button = React$1.forwardRef(function (_a, ref) {
     var _b;
     var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, props = index.__rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
-    var surface = React.useContext(Surface.Context).surface;
+    var surface = React$1.useContext(Surface.Context).surface;
     var buttonClasses = index$1.classNames((_b = {
             "arc-Button": true,
             "arc-Button--displayBlock": isDisplayBlock
@@ -51,7 +74,7 @@ var ButtonIcon = function (_a) {
     return (React__default["default"].createElement("span", { className: index$1.classNames({
             "arc-Button-icon": true,
             "arc-Button-icon--chevron": isChevron
-        }) }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: "btChevron".concat(isBeforeText ? "Left" : "Right", "Mid") })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
+        }) }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid.BtIconChevronRightMid_2 })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
 };
 
 exports.Button = Button;

package/dist/_shared/cjs/{FormControl-7d8e10fa.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 };