@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.10

package/dist/Switch/Switch.esm.js

@@ -1,63 +1,16 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
-import React__default, { useState, forwardRef, useRef, createElement, useEffect, useContext } from 'react';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
+import React__default, { forwardRef, useState, useRef, createElement, useEffect, useContext } from 'react';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import { _ as _extends } from '../_shared/esm/extends-8cc61aad.js';
-import { g as $9f79659886946c16$export$e5c5a5f917a5871c, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $71cd76cc60e0454e$export$6f32135080cb4c3, d as $8927f6f2acc4f386$export$250ffa63cdc0d034, e as $e42e1063c40fb3ef$export$b9ecd428b558ff10, i as $010c2913dbd2fe3d$export$5cae361ad82dce8b } from '../_shared/esm/index.module-50b2c98a.js';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
-import { F as FormControl } from '../_shared/esm/FormControl-433228f5.js';
-import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-43cd9138.js';
-import { T as Text } from '../_shared/esm/Text-14f586ac.js';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-eab5a4d0.js';
+import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, d as $71cd76cc60e0454e$export$6f32135080cb4c3, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, b as $e42e1063c40fb3ef$export$b9ecd428b558ff10 } from '../_shared/esm/index-7f23bb37.js';
+import { a as $010c2913dbd2fe3d$export$5cae361ad82dce8b, $ as $db6c3485150b8e66$export$1ab7ae714698c4b8 } from '../_shared/esm/index-6bdce6c5.js';
+import { C as Context } from '../_shared/esm/Surface-201aa0d6.js';
+import { F as FormControl } from '../_shared/esm/FormControl-350bb1c8.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-4b6b7468.js';
+import { T as Text } from '../_shared/esm/Text-dc3f9cb5.js';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-69de5351.js';
 import 'react-dom';
-import '../_shared/esm/DisclosureMini-bf95a9db.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
-
-function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
-    const [size, setSize] = useState(undefined);
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
-        if (element) {
-            // provide size as early as possible
-            setSize({
-                width: element.offsetWidth,
-                height: element.offsetHeight
-            });
-            const resizeObserver = new ResizeObserver((entries)=>{
-                if (!Array.isArray(entries)) return;
-                 // Since we only observe the one element, we don't need to loop over the
-                // array
-                if (!entries.length) return;
-                const entry = entries[0];
-                let width;
-                let height;
-                if ('borderBoxSize' in entry) {
-                    const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
-                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
-                    width = borderSize['inlineSize'];
-                    height = borderSize['blockSize'];
-                } else {
-                    // for browsers that don't support `borderBoxSize`
-                    // we calculate it ourselves to get the correct border box.
-                    width = element.offsetWidth;
-                    height = element.offsetHeight;
-                }
-                setSize({
-                    width: width,
-                    height: height
-                });
-            });
-            resizeObserver.observe(element, {
-                box: 'border-box'
-            });
-            return ()=>resizeObserver.unobserve(element)
-            ;
-        } else // We only want to reset to `undefined` when the element becomes `null`,
-        // not if it changes to another element.
-        setSize(undefined);
-    }, [
-        element
-    ]);
-    return size;
-}
+import '../_shared/esm/DisclosureMini-9caa350c.js';
+import '../_shared/esm/VisuallyHidden-59f004f5.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Switch
@@ -173,18 +126,18 @@ function $6be4966fd9bbc698$var$getState(checked) {
 const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
 const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
 
-/** Use `Switch` to toggle between checked and not checked. */
+/** Use `Switch` to allow users to immediately toggle between two states. */
 var Switch = function (_a) {
-    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "statusText", "hideLabel"]);
+    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d, ariaLabel = _a.ariaLabel, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "statusText", "hideLabel", "ariaLabel"]);
     var surface = useContext(Context).surface;
-    return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: hideLabel ? "" : label, labelSize: labelSize, requirementStatus: "not-applicable" },
+    return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: "not-applicable" },
         !hideLabel && React__default.createElement(VerticalSpace, { size: "8" }),
         React__default.createElement("div", { className: "arc-Switch-container" },
-            React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, __assign({ id: id, "aria-label": label, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedChange, disabled: isDisabled, className: classNames("arc-Switch", {
+            React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, __assign({ id: id, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedChange, disabled: isDisabled, className: classNames("arc-Switch", {
                     "arc-Switch--large": labelSize === "l",
                     "arc-Switch--isDisabled": isDisabled,
                     "arc-Switch--onDarkSurface": surface === "dark"
-                }) }, filterDataAttrs(props)),
+                }), "aria-label": ariaLabel }, filterDataAttrs(props)),
                 React__default.createElement("div", { className: "arc-Switch-wrapper" },
                     React__default.createElement($6be4966fd9bbc698$export$6521433ed15a34db, { className: "arc-Switch-thumb" },
                         React__default.createElement("div", { className: "arc-Switch-thumbIcon" },

package/dist/Switch/styles.css

@@ -0,0 +1 @@
+.arc .arc-Switch,.arc .arc-Switch-thumb{--arc-switch-height:var(--switch-size-s);--arc-switch-width:48px;--arc-switch-thumb-size:24px}@media (prefers-reduced-motion:no-preference){.arc .arc-Switch-thumb{transition:0.1s cubic-bezier(0.44,0,0.55,0.94) transform}.arc .arc-Switch-thumbIcon{transition:opacity 0.13s cubic-bezier(0.47,0.04,1,1)}}.arc .arc-Switch{background:transparent;border:none;min-height:var(--arc-switch-height);min-width:var(--arc-switch-width);padding:0}.arc .arc-Switch:focus-visible{border-radius:var(--switch-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Switch--onDarkSurface:focus-visible{border-radius:var(--switch-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc .arc-Switch-wrapper{background:var(--switch-colors-light-bg-subtle);border-radius:var(--switch-border-radius-s);box-sizing:content-box;cursor:pointer;display:block;margin-top:-0.5px;padding:0;position:relative}.arc .arc-Switch-thumb{background:transparent;display:block;height:var(--arc-switch-thumb-size);right:0.5px;width:var(--arc-switch-thumb-size);z-index:100}.arc .arc-Switch--large,.arc .arc-Switch--large .arc-Switch-thumb{--arc-switch-height:var(--switch-size-m);--arc-switch-width:64px;--arc-switch-thumb-size:32px}.arc .arc-Switch[data-state="checked"] .arc-Switch-thumb{transform:translateX(calc(var(--arc-switch-width) - var(--arc-switch-thumb-size)))}.arc .arc-Switch-container{align-items:center;display:flex;gap:12px}.arc .arc-Switch-icon{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.arc .arc-Switch-wrapper::after{border:var(--switch-border-weight-s) solid var(--switch-colors-light-border-strong);border-radius:var(--switch-border-radius-s);bottom:0;box-sizing:border-box;content:"";left:0;position:absolute;right:0;top:0}.arc .arc-Switch--onDarkSurface .arc-Switch-wrapper{background:var(--switch-colors-dark-bg-subtle)}.arc .arc-Switch--onDarkSurface .arc-Switch-wrapper::after{border-color:var(--switch-colors-dark-border-strong)}.arc .arc-Switch-thumb::after{background:var(--switch-colors-light-bg-strong);border:var(--switch-border-weight-s) solid var(--switch-colors-light-border-strong);border-radius:50%;box-sizing:border-box;content:"";display:block;height:100%;width:100%}.arc .arc-Switch--onDarkSurface .arc-Switch-thumb::after{background:var(--switch-colors-dark-bg-subtle);border-color:var(--switch-colors-dark-border-strong)}.arc .arc-Switch[data-state="checked"] .arc-Switch-thumb::after{border:none;position:relative;transform:scale(0.83)}.arc .arc-Switch[data-state="checked"] .arc-Switch-wrapper{background:var(--switch-colors-light-bg-default)}.arc .arc-Switch[data-state="checked"] .arc-Switch-wrapper::after{border:none}.arc .arc-Switch--onDarkSurface[data-state="checked"] .arc-Switch-wrapper{background:var(--switch-colors-dark-bg-default)}.arc .arc-Switch-thumbIcon{height:100%;opacity:1;position:absolute;width:100%;z-index:1}.arc .arc-Switch-thumb[data-state="unchecked"] .arc-Switch-thumbIcon{opacity:0}.arc .arc-Switch--isDisabled .arc-Switch-wrapper .arc-ThemeIcon{background:var(--switch-colors-light-fg-disabled)}.arc .arc-Switch--onDarkSurface.arc-Switch[data-state="checked"].arc-Switch--isDisabled .arc-Switch-wrapper .arc-ThemeIcon{background:var(--switch-colors-dark-fg-disabled)}.arc .arc-Switch-statusText--isDisabled .arc-Text{color:var(--switch-colors-light-text-disabled)}.arc .arc-Switch-statusText--onDarkSurface.arc-Switch-statusText--isDisabled .arc-Text{color:var(--switch-colors-dark-text-disabled)}.arc .arc-Switch--isDisabled[disabled] .arc-Switch-wrapper{background:var(--switch-colors-light-bg-disabled);cursor:not-allowed}.arc .arc-Switch--isDisabled[disabled] .arc-Switch-wrapper::after{border:var(--switch-border-weight-s) solid var(--switch-colors-light-border-disabled)}.arc .arc-Switch--isDisabled[disabled] .arc-Switch-wrapper .arc-Switch-thumb::after{background:var(--switch-colors-light-bg-disabled);border:var(--switch-border-weight-s) solid var(--switch-colors-light-border-disabled);transform:scale(1)}.arc .arc-Switch--onDarkSurface.arc-Switch--isDisabled[disabled] .arc-Switch-wrapper .arc-Switch-thumb::after{background:var(--switch-colors-dark-bg-disabled);border-color:var(--switch-colors-dark-border-disabled)}.arc .arc-Switch--onDarkSurface.arc-Switch--isDisabled .arc-Switch-wrapper{background:var(--switch-colors-dark-bg-disabled)}.arc .arc-Switch--onDarkSurface.arc-Switch--isDisabled .arc-Switch-wrapper::after{border-color:var(--switch-colors-dark-border-disabled)}

package/dist/Tabs/Tabs.cjs.js

@@ -2,19 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Tabs = require('../_shared/cjs/Tabs-ade6d6b6.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var Tabs = require('../_shared/cjs/Tabs-a587b50f.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
 require('react');
-require('../_shared/cjs/extends-8c5e4b48.js');
-require('../_shared/cjs/index-4aa11039.js');
+require('../_shared/cjs/index-1e7a1fce.js');
+require('../_shared/cjs/index-76f7dd53.js');
 require('react-dom');
-require('../_shared/cjs/index-23b4f49f.js');
-require('../_shared/cjs/index-d75774a9.js');
-require('../_shared/cjs/Icon-a47b6c0a.js');
+require('../_shared/cjs/index-dbc843d3.js');
+require('../_shared/cjs/index-879e71ee.js');
+require('../_shared/cjs/index-527f962b.js');
+require('../_shared/cjs/Icon-5dd78f2b.js');
 require('../_shared/cjs/index-9947ac13.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
-require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/ThemeIcon-9534f091.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
 
 
 

package/dist/Tabs/Tabs.esm.js

@@ -1,13 +1,12 @@
-export { T as Tabs } from '../_shared/esm/Tabs-39d24a7d.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { T as Tabs } from '../_shared/esm/Tabs-ab8e189d.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
 import 'react';
-import '../_shared/esm/extends-8cc61aad.js';
-import '../_shared/esm/index-87a828b8.js';
+import '../_shared/esm/index-b051f161.js';
+import '../_shared/esm/index-7f23bb37.js';
 import 'react-dom';
-import '../_shared/esm/index-65264b4e.js';
-import '../_shared/esm/index-3147c5b0.js';
-import '../_shared/esm/Icon-9ecaaeab.js';
+import '../_shared/esm/index-2403936c.js';
+import '../_shared/esm/index-13458236.js';
+import '../_shared/esm/index-7868cc59.js';
+import '../_shared/esm/Icon-6fef56b3.js';
 import '../_shared/esm/index-2e73c2e9.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
-import '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/ThemeIcon-eab5a4d0.js';
+import '../_shared/esm/Surface-201aa0d6.js';

package/dist/Tabs/styles.css

@@ -0,0 +1 @@
+.arc .arc-Tab-trigger{align-items:center;background:transparent;border:none;border-bottom:var(--tabs-border-weight-m) solid var(--tabs-colors-light-border-subtle);color:var(--tabs-colors-light-text-default);display:flex;font:var(--sem-type-body-reg-s);justify-content:center;min-height:var(--tabs-size-s);padding:0 var(--tabs-padding-l) 0 var(--tabs-padding-m);white-space:nowrap}.arc .arc-Tab-triggerIcon{padding-right:var(--tabs-gap-m)}.arc .arc-Tab-trigger[data-state="active"] .arc-Tab-triggerIcon,.arc .arc-Tab-triggerIcon--active{display:none}.arc .arc-Tab-trigger[data-state="active"]{border-bottom:var(--tabs-border-weight-l) solid var(--tabs-colors-light-border-selected);color:var(--tabs-colors-light-text-selected);font:var(--sem-type-body-bold-s)}.arc .arc-Tab-trigger:hover{color:var(--tabs-colors-light-text-hover);cursor:pointer;text-decoration:underline}.arc .arc-Tab-trigger:focus-visible .arc-Tab-triggerIcon,.arc .arc-Tab-trigger:hover .arc-Tab-triggerIcon{display:none}.arc .arc-Tab-trigger:hover .arc-Tab-triggerIcon--active,.arc .arc-Tab-trigger:focus-visible .arc-Tab-triggerIcon--active{display:block}.arc .arc-Tab-trigger[data-state="active"]:hover{text-decoration:none}.arc .arc-Tab-trigger:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:-2px;text-decoration:underline}.arc .arc-Tab-trigger[data-state="active"]:focus-visible{text-decoration:none}.arc .arc-Tab-trigger[data-state="active"] .arc-Tab-triggerIcon--active{display:block}.arc .arc-Tabs--isJustified .arc-Tab-trigger{flex:1}.arc .arc-Tabs--contained .arc-Tab-trigger{background:var(--tabs-colors-light-bg-subtle);border:var(--tabs-border-weight-m) solid var(--tabs-colors-light-border-subtle);border-left:0;font:var(--sem-type-body-reg-m);min-height:var(--tabs-size-m)}.arc .arc-Tabs--contained .arc-Tab-trigger:first-child{border-left:var(--tabs-border-weight-m) solid var(--tabs-colors-light-border-subtle);border-top-left-radius:var(--tabs-border-radius-s)}.arc .arc-Tabs--contained .arc-Tab-trigger:last-child{border-top-right-radius:var(--tabs-border-radius-s)}.arc .arc-Tabs--contained .arc-Tab-trigger[data-state="active"]{background:var(--tabs-colors-light-bg-default);border-bottom:none}.arc .arc-Tabs--onDarkSurface.arc-Tabs--contained .arc-Tab-trigger{background:var(--tabs-colors-dark-bg-default);border-color:var(--tabs-colors-dark-border-subtle)}.arc .arc-Tabs--onDarkSurface.arc-Tabs--contained .arc-Tab-trigger[data-state="active"]{background:var(--tabs-colors-dark-bg-subtle)}.arc .arc-Tab-triggerIcon .arc-Icon{height:20px;width:20px}.arc .arc-Tabs--contained .arc-Tab-triggerIcon .arc-Icon{height:24px;width:24px}.arc .arc-Tab-trigger--onDarkSurface{border-color:var(--tabs-colors-dark-border-subtle);color:var(--tabs-colors-dark-text-default)}.arc .arc-Tab-trigger--onDarkSurface:hover{color:var(--tabs-colors-dark-text-hover)}.arc .arc-Tab-trigger--onDarkSurface[data-state="active"]{border-color:var(--tabs-colors-dark-border-selected);color:var(--tabs-colors-dark-text-selected)}.arc .arc-Tab-trigger--onDarkSurface.arc-Tab-trigger:focus-visible{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-Tabs--contained .arc-Tab-trigger:first-child:focus-visible{border-top-left-radius:var(--tabs-border-radius-s)}.arc .arc-Tabs--contained .arc-Tab-trigger:last-child:focus-visible{border-top-right-radius:var(--tabs-border-radius-s)}.arc .arc-TabsList--overflowLeft{-webkit-mask:linear-gradient(to left,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 98%,rgba(0,0,0,0) 0%);mask:linear-gradient(to left,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 98%,rgba(0,0,0,0) 0%)}.arc .arc-TabsList--overflowRight{-webkit-mask:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 98%,rgba(0,0,0,0) 0%);mask:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 98%,rgba(0,0,0,0) 0%)}.arc .arc-TabsList--overflowBoth{-webkit-mask:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 98%,rgba(0,0,0,0) 0%);mask:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 98%,rgba(0,0,0,0) 0%)}.arc .arc-Tabs{display:flex;overflow-x:scroll}.arc .arc-Tabs::-webkit-scrollbar{display:none}.arc .arc-Tabs--isJustified.arc-Tabs--contained::after{display:none}.arc .arc-Tabs-root{position:relative}.arc .arc-Tabs-overflowIcon{background:transparent;border:none;border-radius:100%;padding:0;position:absolute;right:0;top:0;width:-moz-fit-content;width:fit-content;z-index:1}.arc .arc-Tabs-overflowIcon:hover .arc-Icon{color:var(--tabs-colors-light-fg-hover)}.arc .arc-Tabs-overflowIcon:active .arc-Icon{color:var(--tabs-colors-light-fg-selected)}.arc .arc-Tabs-overflowIcon:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:-1px}.arc .arc-Tabs-overflowIcon--onDarkSurface:hover .arc-Icon{color:var(--tabs-colors-dark-fg-hover)}.arc .arc-Tabs-overflowIcon--onDarkSurface:active .arc-Icon{color:var(--tabs-colors-dark-fg-selected)}.arc .arc-Tabs-overflowIcon--onDarkSurface:focus-visible{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-Tabs-overflowIcon::after{background:var(--tabs-colors-light-bg-default);bottom:25%;content:"";height:20px;left:25%;position:absolute;width:20px;z-index:-1}.arc .arc-Tabs-overflowIcon--onDarkSurface::after{background:var(--tabs-colors-dark-bg-default)}.arc .arc-Tabs-overflowIcon--left{left:0}.arc .arc-Tabs-overflowIcon--hidden{display:none}.arc .arc-Tabs-overflowIcon:hover{cursor:pointer}.arc .arc-Tabs--contained~.arc-Tab-content[data-state="active"]{background:var(--tabs-colors-light-bg-default);border:var(--tabs-border-weight-m) solid var(--tabs-colors-light-border-subtle);border-radius:0 var(--tabs-border-radius-s) var(--tabs-border-radius-s) var(--tabs-border-radius-s);margin-top:calc(var(--tabs-border-weight-m) * -1);padding:var(--tabs-padding-xl)}.arc .arc-Tabs--onDarkSurface.arc-Tabs--contained~.arc-Tab-content[data-state="active"]{background:var(--tabs-colors-dark-bg-subtle);border-color:var(--tabs-colors-dark-border-subtle)}@media (min-width:636px){.arc .arc-Tabs--contained~.arc-Tab-content[data-state="active"]{padding:var(--tabs-padding-l)}}

package/dist/Tag/Tag.cjs.js

@@ -2,49 +2,83 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var React = require('react');
 var index = require('../_shared/cjs/index-9947ac13.js');
-var Surface = require('../_shared/cjs/Surface-038db6e1.js');
-var Icon = require('../_shared/cjs/Icon-a47b6c0a.js');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-9534f091.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
+var Icon = require('../_shared/cjs/Icon-5dd78f2b.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const BtIconCross = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconCrossFill = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
+      fill: "currentColor",
+    }),
+  );
+
 /**
- * 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 = filterDataAttrs.__rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
-    var surface = React.useContext(Surface.Context).surface;
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, title = _a.title, props = index_es.__rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove", "title"]);
     var _b = React.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
     var onRemoveHandler = function () {
         setIsRemoved(function (p) { return !p; });
         onRemove && onRemove();
     };
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-Tag", {
-            "arc-Tag--onDarkSurface": surface === "dark",
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames("arc-Tag", {
             "arc-Tag--isRemovable": isRemovable,
             "arc-Tag--hasIcon": icon,
             "arc-Tag--hasLink": link || onClick,
             "arc-Tag--removed": isRemoved
-        }) }, (isRemoved && { "aria-hidden": true }), filterDataAttrs.filterDataAttrs(props)),
+        }) }, (isRemoved && { "aria-hidden": true }), index_es.filterDataAttrs(props)),
         link ? (React__default["default"].createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
             icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
                 React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement(React__default["default"].Fragment, null, onClick ? (React__default["default"].createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
+            React__default["default"].createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React__default["default"].createElement(React__default["default"].Fragment, null, onClick ? (React__default["default"].createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
             icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
                 React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
+            React__default["default"].createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React__default["default"].createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
             icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
                 React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
-        isRemovable && (React__default["default"].createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
-            React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: "tagRemove", color: "brand", size: 20 }),
-            React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: "tagRemoveInteractive", color: "brand", size: 20 })))));
+            React__default["default"].createElement("div", { className: "arc-Tag-label", title: title }, children))))),
+        isRemovable && (React__default["default"].createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag", "aria-label": "Remove tag" },
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconCross }),
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconCrossFill })))));
 };
 
 exports.Tag = Tag;

package/dist/Tag/Tag.esm.js

@@ -1,24 +1,58 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
-import React__default, { useContext, useState } from 'react';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
+import React__default, { useState } from 'react';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
-import { I as Icon } from '../_shared/esm/Icon-9ecaaeab.js';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
+import { I as Icon } from '../_shared/esm/Icon-6fef56b3.js';
+import '../_shared/esm/Surface-201aa0d6.js';
+
+const BtIconCross = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconCrossFill = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
+      fill: "currentColor",
+    }),
+  );
 
 /**
- * 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 surface = useContext(Context).surface;
+    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 _b = useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
     var onRemoveHandler = function () {
         setIsRemoved(function (p) { return !p; });
         onRemove && onRemove();
     };
     return (React__default.createElement("div", __assign({ className: classNames("arc-Tag", {
-            "arc-Tag--onDarkSurface": surface === "dark",
             "arc-Tag--isRemovable": isRemovable,
             "arc-Tag--hasIcon": icon,
             "arc-Tag--hasLink": link || onClick,
@@ -27,16 +61,16 @@ 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))))),
-        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(ThemeIcon, { icon: "tagRemove", color: "brand", size: 20 }),
-            React__default.createElement(ThemeIcon, { icon: "tagRemoveInteractive", color: "brand", size: 20 })))));
+            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", "aria-label": "Remove tag" },
+            React__default.createElement(Icon, { icon: BtIconCross }),
+            React__default.createElement(Icon, { icon: BtIconCrossFill })))));
 };
 
 export { Tag };

package/dist/Tag/styles.css

@@ -0,0 +1 @@
+.arc .arc-Tag{align-items:center;background-color:var(--tag-colors-light-bg-default-alt);border:var(--tag-border-weight-s) solid var(--tag-colors-light-border-default-alt);border-radius:var(--tag-border-radius-s);display:flex;height:var(--tag-size-s);white-space:nowrap;width:-moz-fit-content;width:fit-content}.arc .arc-Tag-icon{align-items:center;display:flex;height:var(--tag-size-icon-s);width:auto}.arc .arc-Tag-icon--removable{align-items:center;background-color:transparent;border:0;display:flex;height:var(--tag-size-icon-m,20px);margin-right:var(--tag-padding-xs);padding:0;position:relative;width:var(--tag-size-icon-m,20px)}.arc .arc-Tag-icon--removable .arc-Icon{position:absolute}.arc .arc-Tag-icon--removable .arc-Icon:nth-of-type(2){color:var(--sem-color-fg-primary-light-default);display:none}.arc .arc-Tag-icon--removable:hover .arc-Icon:nth-of-type(1){display:none}.arc .arc-Tag-icon--removable:hover .arc-Icon:nth-of-type(2){display:block}.arc .arc-Tag-label{font:var(--sem-type-interface-semi-xs);padding:0 var(--tag-padding-xs)}.arc .arc-Tag-content{align-items:center;background-color:transparent;border:none;border-radius:var(--tag-border-radius-s);display:flex;padding:0 calc(var(--tag-padding-s) - var(--tag-border-weight-s))}.arc .arc-Tag--hasIcon .arc-Tag-content{padding-left:calc(var(--tag-padding-s) - var(--tag-border-weight-s))}.arc .arc-Tag--isRemovable .arc-Tag-content{border-radius:var(--tag-border-radius-s) 0 0 var(--tag-border-radius-s);padding-right:var(--tag-padding-xs)}.arc .arc-Tag .arc-Tag-content{color:var(--tag-colors-light-text-default);text-decoration:none}.arc .arc-Tag-content:focus-visible{border-radius:var(--tag-border-radius-s);height:calc(var(--tag-size-s) - 2px);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px;text-decoration:underline}.arc .arc-Tag-icon--removable:focus-visible{outline:none}.arc .arc-Tag-icon--removable:focus-visible .arc-Icon:nth-of-type(1){display:none}.arc .arc-Tag-icon--removable:focus-visible .arc-Icon:nth-of-type(2){display:block}.arc .arc-Tag-icon--removable:focus-visible::after{border-radius:100%;content:"";height:20px;outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px;position:absolute;width:20px}.arc .arc-Tag-icon--removable:hover{cursor:pointer}.arc .arc-Tag--hasLink{background:var(--tag-colors-light-bg-default);border-color:var(--tag-colors-light-border-default)}.arc .arc-Tag--haslink:hover{background:var(--tag-colors-light-border-hover);cursor:pointer}.arc .arc-Tag--hasLink .arc-Tag-content:hover{color:var(--tag-colors-light-text-hover);cursor:pointer;text-decoration:underline}.arc .arc-Tag--removed{display:none}

package/dist/Text/Text.cjs.js

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Text = require('../_shared/cjs/Text-606ca3a2.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var Text = require('../_shared/cjs/Text-1b3e4fb6.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
 require('../_shared/cjs/index-9947ac13.js');
 require('react');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
-require('../_shared/cjs/Surface-038db6e1.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
 
 
 

package/dist/Text/Text.esm.js

@@ -1,6 +1,5 @@
-export { T as Text } from '../_shared/esm/Text-14f586ac.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { T as Text } from '../_shared/esm/Text-dc3f9cb5.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
 import '../_shared/esm/index-2e73c2e9.js';
 import 'react';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
-import '../_shared/esm/Surface-0ca6817d.js';
+import '../_shared/esm/Surface-201aa0d6.js';

package/dist/Text/styles.css

@@ -0,0 +1 @@
+.arc .arc-Text{display:block;font:var(--sem-type-body-reg-m);margin:0}.arc .arc-Text--alignCenter{text-align:center}.arc .arc-Text--alignLeft{text-align:left}.arc .arc-Text--alignRight{text-align:right}.arc .arc-Text--inline{display:inline}.arc .arc-Text--measured{max-width:32em}.arc .arc-Text--sizeXS{font:var(--sem-type-body-reg-xs)}.arc .arc-Text--sizeS{font:var(--sem-type-body-reg-s)}.arc .arc-Text--sizeL{font:var(--sem-type-body-reg-l)}/* ! semantic warning: use of muted with supporting class */.arc .arc-Text--muted{color:var(--sem-color-fg-secondary-light-strong)}/* ! semantic warning: use of muted with supporting class */.arc .arc-Text--muted.arc-Text--onDarkSurface{color:var(--sem-color-fg-secondary-dark-strong)}/* ! semantic warning: use of muted with supporting class */.arc .arc-Text--supporting{color:var(--sem-color-fg-secondary-light-muted)}/* ! semantic warning: use of muted with supporting class */.arc .arc-Text--supporting.arc-Text--onDarkSurface{color:var(--sem-color-fg-secondary-dark-muted)}

package/dist/TextArea/TextArea.cjs.js

@@ -2,48 +2,71 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var React = require('react');
 var index = require('../_shared/cjs/index-9947ac13.js');
-var Surface = require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/Base-f5a86eed.js');
-require('../_shared/cjs/Breadcrumbs-f3385e2e.js');
-require('../_shared/cjs/Button-5c958ce9.js');
-require('../_shared/cjs/Card-eb1c20c1.js');
-require('../_shared/cjs/Checkbox-5f14bb0d.js');
-require('../_shared/cjs/Columns-ae4f8cef.js');
-require('../_shared/cjs/Heading-27cba320.js');
-var Text = require('../_shared/cjs/Text-606ca3a2.js');
-require('../_shared/cjs/Filter-1bde635c.js');
-var FormControl = require('../_shared/cjs/FormControl-30f2330f.js');
-require('../_shared/cjs/Group-0429741a.js');
-require('../_shared/cjs/Image-e873b8fc.js');
-require('../_shared/cjs/Poster-499b78da.js');
-require('../_shared/cjs/ProgressStepper-74ee1eec.js');
-require('../_shared/cjs/RadioGroup-9bc96f6a.js');
-require('../_shared/cjs/debounce-123468fb.js');
-require('../_shared/cjs/SiteFooter-0638c27c.js');
-require('../_shared/cjs/SiteHeader.rehydrator-42c4a0e0.js');
-require('../_shared/cjs/Tabs-ade6d6b6.js');
-require('../_shared/cjs/TextInput-a5f72f6f.js');
-require('../_shared/cjs/Toast-6d4021d7.js');
-require('../_shared/cjs/UniversalHeader-5e43d320.js');
-require('../_shared/cjs/ThemeIcon-9534f091.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
+var Surface = require('../_shared/cjs/Surface-ca708a8c.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-c691ea4d.js');
+require('../_shared/cjs/Image-bb696c61.js');
+require('../_shared/cjs/Heading-b4b65724.js');
+require('../_shared/cjs/Breadcrumbs-edf76698.js');
+require('../_shared/cjs/Grid-102905c8.js');
+var Text = require('../_shared/cjs/Text-1b3e4fb6.js');
+require('../_shared/cjs/ContentSwitcher-df2381c9.js');
+require('../_shared/cjs/ContentSwitcherDropdown-91856b98.js');
+require('../_shared/cjs/Button-82df14c9.js');
+require('../_shared/cjs/ButtonV2-0679b44b.js');
+require('../_shared/cjs/Calendar-d2511ee9.js');
+require('../_shared/cjs/Checkbox-d34c19c4.js');
+require('../_shared/cjs/Columns-e5f9406b.js');
+require('../_shared/cjs/DatePicker-3abcf361.js');
+require('../_shared/cjs/Filter-c93d809e.js');
+var FormControl = require('../_shared/cjs/FormControl-09c28bbb.js');
+require('../_shared/cjs/Group-33f84a2f.js');
+require('../_shared/cjs/HeroButton-db55ff2a.js');
+require('../_shared/cjs/MediaCard-158890b3.js');
+require('../_shared/cjs/Poster-11d2f8af.js');
+require('../_shared/cjs/ProgressStepper-65294193.js');
+require('../_shared/cjs/RadioGroup-4fe1c546.js');
+require('../_shared/cjs/debounce-a74c28cf.js');
+require('../_shared/cjs/SiteFooter-e741eb87.js');
+require('../_shared/cjs/SiteHeaderV2-e0ae0718.js');
+require('../_shared/cjs/Tabs-a587b50f.js');
+require('../_shared/cjs/TextInput-5e533805.js');
+require('../_shared/cjs/Toast-e088fa5d.js');
+require('../_shared/cjs/UniversalHeader-de415648.js');
+require('../_shared/cjs/Icon-5dd78f2b.js');
+require('../_shared/cjs/BtIconChevronRight2Px.esm-2e4d117e.js');
 require('../_shared/cjs/handle-link-click-17a44cf4.js');
-require('../_shared/cjs/Icon-a47b6c0a.js');
-require('../_shared/cjs/DisclosureMini-145105a4.js');
-require('../_shared/cjs/VerticalSpace-dc53bb70.js');
-require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
-require('../_shared/cjs/index.es-77def0c9.js');
-require('../_shared/cjs/BrandLogo-aea340c8.js');
-require('../_shared/cjs/Section-59804166.js');
-require('../_shared/cjs/extends-8c5e4b48.js');
-require('../_shared/cjs/index-4aa11039.js');
+require('../_shared/cjs/index-1e7a1fce.js');
+require('../_shared/cjs/index-76f7dd53.js');
 require('react-dom');
-require('../_shared/cjs/index-23b4f49f.js');
-require('../_shared/cjs/index-d75774a9.js');
-require('../_shared/cjs/index-4dd46cbe.js');
+require('../_shared/cjs/index-dbc843d3.js');
+require('../_shared/cjs/index-879e71ee.js');
+require('../_shared/cjs/index-527f962b.js');
+require('../_shared/cjs/index-568ebc78.js');
+require('../_shared/cjs/index-2bf59363.js');
+require('../_shared/cjs/floating-ui.react-dom-08b8b87c.js');
+require('../_shared/cjs/index-ba3141f5.js');
+require('../_shared/cjs/component-aa9fcdbb.js');
+require('../_shared/cjs/ThemeIcon-cf6ddb34.js');
+require('../_shared/cjs/Spinner-0f578e7f.js');
+require('../_shared/cjs/index-28fbfd5b.js');
+require('../_shared/cjs/index.es-0f681622.js');
+require('../_shared/cjs/use-media-query-d34c83b9.js');
+require('../_shared/cjs/BtIconChevronRightMid.esm-3e8d18a9.js');
+require('../_shared/cjs/Combination-06cc56d0.js');
+require('react/jsx-runtime');
+require('../_shared/cjs/DisclosureMini-64a1c682.js');
+require('../_shared/cjs/VerticalSpace-a5cf4d4e.js');
+require('../_shared/cjs/CardHeading-a7d8d472.js');
+require('../_shared/cjs/CardFooter-facb09e6.js');
+require('../_shared/cjs/BtIconArrowRight.esm-6053bb79.js');
+require('../_shared/cjs/BtIconPlayFill.esm-b8997cfc.js');
+require('../_shared/cjs/ConditionalWrapper-bf944594.js');
+require('../_shared/cjs/_commonjsHelpers-56412ec5.js');
+require('../_shared/cjs/BrandLogo-5aef900a.js');
+require('../_shared/cjs/Section-4415d756.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -51,10 +74,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
 var TextArea = React.forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = filterDataAttrs.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText"]);
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, autoComplete = _a.autoComplete, _j = _a.minHeight, minHeight = _j === void 0 ? "116px" : _j, maxHeight = _a.maxHeight, props = index_es.__rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width", "autoComplete", "minHeight", "maxHeight"]);
     var surface = React.useContext(Surface.Context).surface;
     var ourRef = React.useRef(null);
-    var _j = React.useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
+    var _k = React.useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _k[0], setCharacterCount = _k[1];
     var setSmartHeight = function (el) {
         el.style.height = "auto";
         el.style.height = "".concat(parseInt(getComputedStyle(el).getPropertyValue("border-width")) * 2 +
@@ -74,18 +97,20 @@ var TextArea = React.forwardRef(function (_a, ref) {
         onChange && onChange(e);
         setCharacterCount(e.target.value.length);
     };
-    return (React__default["default"].createElement(FormControl.FormControl, filterDataAttrs.__assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
+    return (React__default["default"].createElement(FormControl.FormControl, index_es.__assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
             showCharacterCount && (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(Text.Text, { tone: isDisabled ? "muted" : "default" },
-                React__default["default"].createElement("span", { className: "arc-TextArea-characterCount" },
+                React__default["default"].createElement("span", { className: "arc-TextArea-characterCount", "aria-live": "polite" },
                     characterCount,
                     " / ",
-                    maxLength)))) }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("textarea", { id: id, className: index.classNames("arc-TextArea", {
+                    maxLength,
+                    " characters",
+                    characterCount === maxLength && (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null, "Maximum characters reached")))))) }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement("textarea", index_es.__assign({ id: id, className: index.classNames("arc-TextArea", {
                 "arc-TextArea--noResize": resize !== "manual",
                 "arc-TextArea--onDarkSurface": surface === "dark",
                 "arc-TextArea--invalid": errorMessage
-            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef })));
+            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width, maxHeight: maxHeight, minHeight: minHeight }, "aria-describedby": "".concat(id, "-helper"), autoComplete: autoComplete }, (helper && { "aria-describedby": "".concat(id, "-helper") })))));
 });
 
 exports.TextArea = TextArea;