@arc-ui/components 11.22.0 → 11.24.0

package/dist/_shared/cjs/{TextInput-5da70ec2.js → TextInput-8d139489.js}

@@ -3,9 +3,9 @@
 var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var FormControl = require('./FormControl-5f3b6ce4.js');
+var FormControl = require('./FormControl-68258ce1.js');
 var Surface = require('./Surface-038db6e1.js');
-var VisuallyHidden = require('./VisuallyHidden-e2c8b291.js');
+var VisuallyHidden = require('./VisuallyHidden-b0de4c7b.js');
 var Icon = require('./Icon-b46897a3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -39,12 +39,9 @@ var useNumericInput = function (props) {
     return { inputMode: inputMode, pattern: pattern, type: type };
 };
 
-/**
- * Use `TextInput` to allow custom user text entry with a keyboard.
- */
 var TextInputComponent = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _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, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, props = filterDataAttrs.__rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width"]);
+    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _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, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, autoComplete = _a.autoComplete, props = filterDataAttrs.__rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete"]);
     var surface = React.useContext(Surface.Context).surface;
     var _m = React.useState(false), showPasswordToggle = _m[0], setShowPasswordToggle = _m[1];
     var inferredInputProps = useNumericInput({
@@ -80,7 +77,7 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
         React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
             React__default["default"].createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width } },
                 prefix && (React__default["default"].createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
-                React__default["default"].createElement("input", filterDataAttrs.__assign({ placeholder: placeholder, "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("input", filterDataAttrs.__assign({ placeholder: placeholder, "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, autoComplete: autoComplete }, inferredInputProps)),
                 iconButton && !showPassword && (React__default["default"].createElement("div", { className: "arc-TextInput-additionalControl" },
                     React__default["default"].createElement("button", { ref: iconButton.ref, className: "arc-TextInput-iconButton", disabled: isReadOnly || isDisabled, "aria-label": iconButton.label, onFocus: iconButton.onFocus, onClick: function (e) {
                             e.preventDefault();
@@ -96,6 +93,9 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
                                 ? "Your password is shown"
                                 : "Your password is hidden")))))))));
 });
+/**
+ * Use `TextInput` to allow users to enter short form text.
+ */
 var TextInput = React.forwardRef(function (props, ref) { return React__default["default"].createElement(TextInputComponent, filterDataAttrs.__assign({ ref: ref }, props)); });
 var TextInputWithPlaceHolder = React.forwardRef(function (props, ref) { return React__default["default"].createElement(TextInputComponent, filterDataAttrs.__assign({ ref: ref }, props)); });
 

package/dist/_shared/cjs/{Toast-7a20d1b9.js → Toast-26207fef.js}

@@ -958,7 +958,7 @@ var ToastNotification = function (_a) {
                 React__default["default"].createElement(Icon.Icon, { icon: BtIconCrossAlt2Px_esm.BtIconCrossAlt2Px, size: 24 }))))));
 };
 
-/** Use `Toast` to display temporary messages at the bottom of the viewport. */
+/** Use `Toast` to display temporary messages at the bottom of the screen. */
 var Toast = function (_a) {
     var children = _a.children, _b = _a.colorScheme, colorScheme = _b === void 0 ? "default" : _b, props = filterDataAttrs.__rest(_a, ["children", "colorScheme"]);
     return (React__default["default"].createElement($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", duration: 6000 },

package/dist/_shared/cjs/{VisuallyHidden-e2c8b291.js → VisuallyHidden-b0de4c7b.js}

@@ -7,7 +7,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
- * Provides text for screen readers that is visually hidden.
+ * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
  */
 var VisuallyHidden = function (_a) {
     var children = _a.children;

package/dist/_shared/esm/{Avatar-d01e2b7b.js → Avatar-320313f0.js}

@@ -47,6 +47,7 @@ var AvatarContent = function (_a) {
     return React__default.createElement(Icon, { size: iconSize[size], icon: BtIconUser });
 };
 
+/** Use `Avatar` to visually represent a user. */
 var Avatar = function (_a) {
     var img = _a.img, initials = _a.initials, href = _a.href, title = _a.title, ariaLabel = _a.ariaLabel, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["img", "initials", "href", "title", "ariaLabel", "onClick", "size"]);
     var wrapperAttrs = __assign({ className: classNames("arc-Avatar", "arc-Avatar--".concat(size), {

package/dist/_shared/esm/{Button-3f294e64.js → Button-a7d134c6.js}

@@ -8,7 +8,7 @@ import { I as Icon } from './Icon-15799695.js';
 import { C as Context } from './Surface-0ca6817d.js';
 
 /**
- * Use `Button` to allow users to take actions with clicks and taps.
+ * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
  */
 var Button = forwardRef(function (_a, ref) {
     var _b;

package/dist/_shared/esm/{Calendar-753ef6f1.js → Calendar-ea232839.js}

@@ -3,7 +3,7 @@ import { u as useMediaQuery, A as ArcBreakpointM } from './use-media-query-4c807
 import { b as __spreadArray, a as __assign } from './filter-data-attrs-ea8f4ed4.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import { T as Text } from './Text-14f586ac.js';
-import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';
+import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
 import { S as Surface } from './Surface-0ca6817d.js';
 import { H as Heading } from './Heading-d16e0e53.js';
 import { B as BtIconChevronLeftMid } from './BtIconChevronLeftMid.esm-1ed8330b.js';
@@ -3620,7 +3620,7 @@ var CalendarNavButton = function (_a) {
         previous: BtIconChevronLeftMid,
         next: BtIconChevronRightMid
     };
-    return (React__default.createElement("button", { "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick, className: classNames("arc-CalendarNavButton", {
+    return (React__default.createElement("button", { "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick, type: "button", className: classNames("arc-CalendarNavButton", {
             "arc-CalendarNavButton--previous": direction === "previous",
             "arc-CalendarNavButton--next": direction === "next"
         }) },
@@ -3896,7 +3896,7 @@ var reducer = function (state, action) {
 var CalendarFooter = function (_a) {
     var onCancelClick = _a.onCancelClick;
     return (React__default.createElement("div", { className: "arc-CalendarFooter" },
-        React__default.createElement("button", { className: "arc-CalendarFooter-button", onClick: onCancelClick }, "Cancel")));
+        React__default.createElement("button", { type: "button", className: "arc-CalendarFooter-button", onClick: onCancelClick }, "Cancel")));
 };
 
 var CalendarWrapper = function (_a) {
@@ -3906,6 +3906,7 @@ var CalendarWrapper = function (_a) {
             React__default.createElement("div", { className: "arc-CalendarWrapper-inner" }, children))));
 };
 
+/** Use `Calendar` to clearly present available dates and allowing users to choose a way to enter information. */
 var Calendar = function (_a) {
     var _b = _a.type, type = _b === void 0 ? "month" : _b, _c = _a.selectionType, selectionType = _c === void 0 ? "single" : _c, _d = _a.autoFocusOnMount, autoFocusOnMount = _d === void 0 ? false : _d, _e = _a.selectedRange, rawSelectedRange = _e === void 0 ? [] : _e, _f = _a.selectedDate, rawSelectedDate = _f === void 0 ? new Date() : _f, rawDisabledDates = _a.disabledDates, rawMinDate = _a.minDate, rawMaxDate = _a.maxDate, onCancelClick = _a.onCancelClick, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect;
     var todayDate = dateWithoutTime(new Date());

package/dist/_shared/esm/{Checkbox-0e051546.js → Checkbox-588619c7.js}

@@ -3,7 +3,7 @@ import React__default, { forwardRef, useContext } from 'react';
 import { B as BtIconTickAlt2Px } from './BtIconTickAlt2Px.esm-0bc2ded0.js';
 import { B as BtIconAlert } from './BtIconAlert.esm-a4608d47.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { C as Context, u as useAriaDescribedby } from './FormControl-cc99cde0.js';
+import { C as Context, u as useAriaDescribedby } from './FormControl-8e836656.js';
 import { C as Context$1 } from './Surface-0ca6817d.js';
 
 /**
@@ -38,7 +38,7 @@ var Checkbox = forwardRef(function (_a, ref) {
         React__default.createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
                 "arc-Checkbox-label--top": checkboxAlignment === "top"
             }) },
-            React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
+            React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
             React__default.createElement("span", { className: "arc-Checkbox-box" },
                 React__default.createElement(BtIconTickAlt2Px, null)),
             React__default.createElement("span", __assign({}, (checkboxAlignment === "top" && {

package/dist/_shared/esm/{DisclosureMini-ec17b008.js → DisclosureMini-56719716.js}

@@ -6,8 +6,7 @@ import { T as Text } from './Text-14f586ac.js';
 import { C as Context } from './Surface-0ca6817d.js';
 
 /**
- * Use `DisclosureMini` to display content that is only visible when toggled into
- * an "open" state.
+ * Use `DisclosureMini` to show and hide sections of content.
  */
 var DisclosureMini = function (_a) {
     var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);

package/dist/_shared/esm/{Filter-ad254e3d.js → Filter-258ba675.js}

@@ -2,6 +2,7 @@ import { _ as __rest, a as __assign, f as filterDataAttrs, b as __spreadArray }
 import React__default, { useContext, useState, useEffect } from 'react';
 import { C as Context } from './Surface-0ca6817d.js';
 import { c as classNames } from './index-2e73c2e9.js';
+import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
 
 var FilterControl = function (_a) {
     var children = _a.children, onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b;
@@ -15,7 +16,10 @@ var FilterControl = function (_a) {
             "arc-FilterControl--onDarkSurface": surface === "dark",
             "arc-FilterControl--selected": selected
         }), onClick: onClickHandler, tabIndex: 0, "aria-pressed": selected },
-        React__default.createElement("div", { className: "arc-FilterControl-text" }, children)));
+        React__default.createElement("div", { className: "arc-FilterControl-text" },
+            React__default.createElement(VisuallyHidden, null, "Filter by"),
+            " ",
+            children)));
 };
 
 var FilterControls = function (_a) {
@@ -48,7 +52,7 @@ var FilterItems = function (_a) {
             : children))) : (React__default.createElement("div", { "aria-live": "assertive" }, error));
 };
 
-/** use `Filter` for interactive elements that filter and categorise page content. */
+/** Use `Filter` to filter and categorise page content. */
 var Filter = function (_a) {
     var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = __rest(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
     var _c = useState([]), selectedControls = _c[0], setSelectedControls = _c[1];

package/dist/_shared/esm/{FormControl-cc99cde0.js → FormControl-8e836656.js}

@@ -3,8 +3,8 @@ import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { createContext, useContext } from 'react';
 import { B as BtIconAlert } from './BtIconAlert.esm-a4608d47.js';
 import { C as Context$1 } from './Surface-0ca6817d.js';
-import { D as DisclosureMini } from './DisclosureMini-ec17b008.js';
-import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';
+import { D as DisclosureMini } from './DisclosureMini-56719716.js';
+import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.

package/dist/_shared/esm/Grid-07dbf4bd.js

@@ -0,0 +1,39 @@
+import { a as __assign, f as filterDataAttrs, _ as __rest } from './filter-data-attrs-ea8f4ed4.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
+
+var BREAKPOINTS = ["xs", "s", "m", "l", "xl"];
+
+var Col = function (props) {
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Grid-col", BREAKPOINTS.reduce(function (acc, bp) {
+            var _a;
+            var _b, _c;
+            var sizeValue = props === null || props === void 0 ? void 0 : props[bp];
+            var orderValue = (_b = props.order) === null || _b === void 0 ? void 0 : _b[bp];
+            var offsetValue = (_c = props.offset) === null || _c === void 0 ? void 0 : _c[bp];
+            return __assign(__assign({}, acc), (_a = {}, _a["arc-Grid-col--".concat(bp).concat(sizeValue)] = sizeValue !== undefined, _a["arc-Grid-order--".concat(bp).concat(orderValue)] = orderValue !== undefined, _a["arc-Grid-offset--".concat(bp).concat(offsetValue)] = offsetValue !== undefined, _a));
+        }, {})) }, filterDataAttrs(props)), props.children));
+};
+
+var Row = function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "normal" : _c, _d = _a.justify, justify = _d === void 0 ? "normal" : _d, children = _a.children, props = __rest(_a, ["direction", "align", "justify", "children"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Grid-row", "".concat(suffixModifier("arc-Grid-row--direction", direction)), "".concat(suffixModifier("arc-Grid-row--justify", justify)), "".concat(suffixModifier("arc-Grid-row--align", align))) }, filterDataAttrs(props)), children));
+};
+
+/**
+ * Use `Grid` to compose layouts on a 12-column grid.
+ */
+var Grid = function (_a) {
+    var children = _a.children, isFluid = _a.isFluid, isDebugVisible = _a.isDebugVisible, isGutterless = _a.isGutterless, props = __rest(_a, ["children", "isFluid", "isDebugVisible", "isGutterless"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Grid", {
+            "arc-Grid--fluid": isFluid,
+            "arc-Grid--debugVisible": isDebugVisible,
+            "arc-Grid--gutterless": isGutterless
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-Grid-inner" }, children)));
+};
+Grid.Row = Row;
+Grid.Col = Col;
+
+export { Grid as G };

package/dist/_shared/esm/{ProgressStepper-74d48612.js → ProgressStepper-6c811282.js}

@@ -3,7 +3,7 @@ import React__default, { useContext } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
 import { I as Icon } from './Icon-15799695.js';
 import { C as Context } from './Surface-0ca6817d.js';
-import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';
+import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
 
 var Error = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("g", { "clip-path": "url(#a)" },
@@ -70,13 +70,13 @@ var ProgressStepperItem = function (_a) {
             status !== "todo" && (React__default.createElement(VisuallyHidden, null,
                 capitaliseFirstLetter(status),
                 ":")),
-            titleHref ? (React__default.createElement("a", { href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
+            titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
             React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
             stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
 };
 
-/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+/** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
 var ProgressStepper = function (_a) {
     var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable"]);
     var items = React__default.Children.toArray(children);

package/dist/_shared/esm/{RadioGroup-362be63f.js → RadioGroup-6c8f8454.js}

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
-import { F as FormControl } from './FormControl-cc99cde0.js';
+import { F as FormControl } from './FormControl-8e836656.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import { C as Context } from './Surface-0ca6817d.js';
 
@@ -30,7 +30,7 @@ var RadioButton = forwardRef(function (_a, ref) {
         React__default.createElement("label", { className: classNames("arc-RadioButton-label", {
                 "arc-RadioButton-label--alignTop": radioButtonAlignment === "top"
             }), htmlFor: id, id: idLabel },
-            React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
+            React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value, "aria-checked": checked }),
             React__default.createElement("span", { className: classNames({
                     "arc-RadioButton-label--marginTop": radioButtonAlignment === "top"
                 }) },

package/dist/_shared/esm/{SiteHeader.rehydrator-65c8cf71.js → SiteHeader.rehydrator-8ad7651b.js}

@@ -7,7 +7,7 @@ import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 import { a as BtIconChevronRight2Px, B as BtIconChevronLeft2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
 import { S as Surface } from './Surface-0ca6817d.js';
 import { B as BrandLogo } from './BrandLogo-1af78f76.js';
-import { B as Button } from './Button-3f294e64.js';
+import { B as Button } from './Button-a7d134c6.js';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
 import { T as Text } from './Text-14f586ac.js';
 

package/dist/_shared/esm/{SiteHeaderV2-c74b811b.js → SiteHeaderV2-a7c1b1cb.js}

@@ -8,7 +8,7 @@ import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.js';
 import { C as ConditionalWrapper } from './ConditionalWrapper-59be8f35.js';
 import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
-import { B as Button } from './Button-3f294e64.js';
+import { B as Button } from './Button-a7d134c6.js';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
 import { T as Text } from './Text-14f586ac.js';
 import { I as Icon } from './Icon-15799695.js';

package/dist/_shared/esm/{Tabs-a85af483.js → Tabs-9485cab6.js}

@@ -464,6 +464,7 @@ var TabsList = function (_a) {
             React__default.createElement(Icon, { icon: BtIconArrowRightFill, size: 40, color: "brand" })))));
 };
 
+/** Use `Tabs` to allow users to navigate between different sections of relevant content. */
 var Tabs = function (_a) {
     var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
     return (React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs(props)), children));

package/dist/_shared/esm/{Tag-664b85c8.js → Tag-cb35d57b.js}

@@ -43,10 +43,10 @@ const BtIconCrossFill = (props) =>
   );
 
 /**
- * use `Tag` to promote features and manage filtering.
+ * 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 = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, title = _a.title, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove", "title"]);
     var surface = useContext(Context).surface;
     var _b = useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
     var onRemoveHandler = function () {
@@ -63,13 +63,13 @@ var Tag = function (_a) {
         link ? (React__default.createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
             icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
                 React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement(React__default.Fragment, null, onClick ? (React__default.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
+            React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React__default.createElement(React__default.Fragment, null, onClick ? (React__default.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
             icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
                 React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
+            React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React__default.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
             icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
                 React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default.createElement("div", { className: "arc-Tag-label" }, children))))),
+            React__default.createElement("div", { className: "arc-Tag-label", title: title }, 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, color: "brand", size: 20 }),
             React__default.createElement(Icon, { icon: BtIconCrossFill, color: "brand", size: 20 })))));

package/dist/_shared/esm/{TextInput-1d1c5fd6.js → TextInput-c0388103.js}

@@ -1,9 +1,9 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { forwardRef, useContext, useState } from 'react';
-import { u as useAriaDescribedby, F as FormControl } from './FormControl-cc99cde0.js';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-8e836656.js';
 import { C as Context } from './Surface-0ca6817d.js';
-import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';
+import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
 import { I as Icon } from './Icon-15799695.js';
 
 /**
@@ -33,12 +33,9 @@ var useNumericInput = function (props) {
     return { inputMode: inputMode, pattern: pattern, type: type };
 };
 
-/**
- * Use `TextInput` to allow custom user text entry with a keyboard.
- */
 var TextInputComponent = forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _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, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width"]);
+    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _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, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, autoComplete = _a.autoComplete, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete"]);
     var surface = useContext(Context).surface;
     var _m = useState(false), showPasswordToggle = _m[0], setShowPasswordToggle = _m[1];
     var inferredInputProps = useNumericInput({
@@ -74,7 +71,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
         React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
             React__default.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width } },
                 prefix && (React__default.createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
-                React__default.createElement("input", __assign({ placeholder: placeholder, "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("input", __assign({ placeholder: placeholder, "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, autoComplete: autoComplete }, inferredInputProps)),
                 iconButton && !showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
                     React__default.createElement("button", { ref: iconButton.ref, className: "arc-TextInput-iconButton", disabled: isReadOnly || isDisabled, "aria-label": iconButton.label, onFocus: iconButton.onFocus, onClick: function (e) {
                             e.preventDefault();
@@ -90,6 +87,9 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                                 ? "Your password is shown"
                                 : "Your password is hidden")))))))));
 });
+/**
+ * Use `TextInput` to allow users to enter short form text.
+ */
 var TextInput = forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
 var TextInputWithPlaceHolder = forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
 

package/dist/_shared/esm/{Toast-7a232e15.js → Toast-fcbfc194.js}

@@ -951,7 +951,7 @@ var ToastNotification = function (_a) {
                 React__default.createElement(Icon, { icon: BtIconCrossAlt2Px, size: 24 }))))));
 };
 
-/** Use `Toast` to display temporary messages at the bottom of the viewport. */
+/** Use `Toast` to display temporary messages at the bottom of the screen. */
 var Toast = function (_a) {
     var children = _a.children, _b = _a.colorScheme, colorScheme = _b === void 0 ? "default" : _b, props = __rest(_a, ["children", "colorScheme"]);
     return (React__default.createElement($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", duration: 6000 },

package/dist/_shared/esm/{VisuallyHidden-b9eebf71.js → VisuallyHidden-06692fd3.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
 
 /**
- * Provides text for screen readers that is visually hidden.
+ * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
  */
 var VisuallyHidden = function (_a) {
     var children = _a.children;