@arc-ui/components 12.0.0-beta.5 → 12.0.0-beta.8

package/dist/_shared/cjs/{index-df60851b.js → Surface-4bc47dcb.js}

@@ -1,69 +1,12 @@
 'use strict';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-exports.__assign = function() {
-  exports.__assign = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-      return t;
-  };
-  return exports.__assign.apply(this, arguments);
-};
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
+var React = require('react');
 
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-              t[p[i]] = s[p[i]];
-      }
-  return t;
-}
-
-function __spreadArray(to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-      if (ar || !(i in from)) {
-          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-          ar[i] = from[i];
-      }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var dataAttrRe = /^(data-.*)$/;
-var filterDataAttrs = function (props) {
-    var filteredProps = {};
-    for (var prop in props) {
-        if (Object.prototype.hasOwnProperty.call(props, prop) &&
-            dataAttrRe.test(prop)) {
-            filteredProps[prop] = props[prop];
-        }
-    }
-    return filteredProps;
-};
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var camelcase$1 = {exports: {}};
 
@@ -181,7 +124,52 @@ camelcase$1.exports.default = camelCase;
 
 var camelcase = camelcase$1.exports;
 
-exports.__rest = __rest;
-exports.__spreadArray = __spreadArray;
+var defaultContext = { surface: "light" };
+var Context = React.createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `Surface` to compose content using the Arc system.
+ */
+var Surface = function (_a) {
+    var _b;
+    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, isTransparent = _a.isTransparent, props = index_es.__rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical", "isTransparent"]);
+    var surface = "light";
+    if (background === "dark-black" ||
+        background === "dark-brand-01" ||
+        background === "dark-brand-02" ||
+        background === "dark-neutral-01" ||
+        background === "dark-neutral-02") {
+        surface = "dark";
+    }
+    return (React__default["default"].createElement(Provider, { value: { surface: surface } },
+        React__default["default"].createElement("div", index_es.__assign({ "data-testid": "arc-surface", className: index.classNames((_b = {
+                    "arc-Surface": true
+                },
+                _b["arc-Surface--".concat(background && camelcase(background), "Background")] = background,
+                _b["arc-Surface--growVertically"] = growVertically,
+                _b["arc-Surface--padding".concat(padding)] = padding,
+                _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
+                _b["arc-Surface--paddingVertical".concat(paddingVertical)] = paddingVertical,
+                _b["arc-Surface--isTransparent"] = isTransparent,
+                _b)) }, index_es.filterDataAttrs(props)), children)));
+};
+var backgroundsShared = [
+    "dark-black",
+    "dark-brand-01",
+    "dark-brand-02",
+    "dark-neutral-01",
+    "dark-neutral-02",
+    "light-brand-01",
+    "light-brand-02",
+    "light-neutral-01",
+    "light-neutral-02",
+    "light-white",
+];
+var backgrounds = index_es.__spreadArray([], backgroundsShared, true);
+var backgroundsBT = index_es.__spreadArray([], backgroundsShared, true);
+
+exports.Context = Context;
+exports.Surface = Surface;
+exports.backgrounds = backgrounds;
+exports.backgroundsBT = backgroundsBT;
 exports.camelcase = camelcase;
-exports.filterDataAttrs = filterDataAttrs;

package/dist/_shared/cjs/Tabs-ba44ea49.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var index_es = require('./index.es-b404d2c5.js');
+var React = require('react');
+var index = require('./index-1e7a1fce.js');
+var Icon = require('./Icon-859c6c00.js');
+var Surface = require('./Surface-4bc47dcb.js');
+var index$1 = require('./index-9947ac13.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Tab = function (_a) {
+    var label = _a.label, value = _a.value, icon = _a.icon, iconActive = _a.iconActive, props = index_es.__rest(_a, ["label", "value", "icon", "iconActive"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement(index.$69cb30bb0017df05$export$41fb9f06171c75f4, index_es.__assign({ className: index$1.classNames("arc-Tab-trigger", {
+            "arc-Tab-trigger--onDarkSurface": surface === "dark",
+            "arc-Tab-trigger--hasIcon": icon || iconActive
+        }), value: value }, index_es.filterDataAttrs(props)),
+        icon && (React__default["default"].createElement("div", { className: "arc-Tab-triggerIcon", "data-testid": "arc-Tab-TriggerIcon" },
+            React__default["default"].createElement(Icon.Icon, { icon: icon }))),
+        iconActive && (React__default["default"].createElement("div", { className: "arc-Tab-triggerIcon arc-Tab-triggerIcon--active", "data-testid": "arc-Tab-TriggerIconActive" },
+            React__default["default"].createElement(Icon.Icon, { icon: iconActive }))),
+        React__default["default"].createElement("span", { className: "arc-Tab-triggerText" }, label)));
+};
+
+var TabContent = function (_a) {
+    var children = _a.children, value = _a.value, props = index_es.__rest(_a, ["children", "value"]);
+    return (React__default["default"].createElement(index.$69cb30bb0017df05$export$7c6e2c02157bb7d2, index_es.__assign({ className: "arc-Tab-content", value: value }, index_es.filterDataAttrs(props)), children));
+};
+
+var TabsList = function (_a) {
+    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel; _a.overflowGradient; var props = index_es.__rest(_a, ["children", "type", "isJustified", "ariaLabel", "overflowGradient"]);
+    var _b = React.useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
+    var _c = React.useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
+    var surface = React.useContext(Surface.Context).surface;
+    var tabsRef = React.useRef(null);
+    var checkOverflow = function () {
+        if (tabsRef.current) {
+            setRightOverflow(tabsRef.current.scrollLeft + tabsRef.current.clientWidth <
+                tabsRef.current.scrollWidth);
+            setLeftOverflow(tabsRef.current.scrollLeft > 0);
+        }
+    };
+    var handleScroll = function () {
+        checkOverflow();
+    };
+    React.useEffect(function () {
+        var list = tabsRef.current;
+        checkOverflow();
+        if (list) {
+            list.addEventListener("scroll", handleScroll);
+        }
+        return function () {
+            if (list) {
+                list.removeEventListener("scroll", handleScroll);
+            }
+        };
+    });
+    var state = "";
+    if (type === "standard") {
+        if (leftOverflow && rightOverflow) {
+            state = "both";
+        }
+        else if (leftOverflow) {
+            state = "left";
+        }
+        else {
+            state = "right";
+        }
+    }
+    return (React__default["default"].createElement("span", { className: "arc-TabsList-wrapper" },
+        React__default["default"].createElement(index.$69cb30bb0017df05$export$54c2e3dc7acea9f5, index_es.__assign({ className: index$1.classNames("arc-Tabs", index_es.suffixModifier("arc-TabsList--overflow", state), {
+                "arc-Tabs--contained": type === "contained",
+                "arc-Tabs--isJustified": isJustified,
+                "arc-Tabs--onDarkSurface": surface === "dark"
+            }), ref: tabsRef, "aria-label": ariaLabel }, index_es.filterDataAttrs(props)), children)));
+};
+
+/** 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 = index_es.__rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
+    return (React__default["default"].createElement(index.$69cb30bb0017df05$export$be92b6f5f03c0fe9, index_es.__assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, index_es.filterDataAttrs(props)), children));
+};
+Tabs.Tab = Tab;
+Tabs.List = TabsList;
+Tabs.Content = TabContent;
+
+exports.Tabs = Tabs;

package/dist/_shared/cjs/{Text-1c1110a4.js → Text-f6be8fdd.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
-var index$1 = require('./index-9947ac13.js');
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-c8a34402.js');
-var Surface = require('./Surface-8599dbe4.js');
+var Surface = require('./Surface-4bc47dcb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,18 +14,19 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 var Text = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = index.__rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone"]);
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, _h = _a.elementType, elementType = _h === void 0 ? "span" : _h, props = index_es.__rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("span", index.__assign({ id: id, className: index$1.classNames((_b = {
+    var Element = elementType;
+    return (React__default["default"].createElement(Element, index_es.__assign({ id: id, className: index.classNames((_b = {
                 "arc-Text": true
             },
-            _b[suffixModifier.suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b[index_es.suffixModifier("arc-Text--align", align)] = align !== "left",
             _b["arc-Text--inline"] = isInline,
             _b["arc-Text--measured"] = isMeasured,
             _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
             _b["arc-Text--".concat(tone)] = tone !== "default",
             _b["arc-Text--onDarkSurface"] = surface === "dark",
-            _b)) }, index.filterDataAttrs(props)), children));
+            _b)) }, index_es.filterDataAttrs(props)), children));
 };
 
 exports.Text = Text;

package/dist/_shared/cjs/{TextInput-762e2309.js → TextInput-9d9a53ac.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
-var index$1 = require('./index-9947ac13.js');
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
 var React = require('react');
-var FormControl = require('./FormControl-88d48f42.js');
-var Surface = require('./Surface-8599dbe4.js');
-var VisuallyHidden = require('./VisuallyHidden-b0de4c7b.js');
-var Icon = require('./Icon-0ec0c1fb.js');
+var FormControl = require('./FormControl-fa7bb586.js');
+var Surface = require('./Surface-4bc47dcb.js');
+var VisuallyHidden = require('./VisuallyHidden-821078c9.js');
+var ThemeIcon = require('./ThemeIcon-6b10d20a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,7 +41,7 @@ var useNumericInput = function (props) {
 
 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, autoComplete = _a.autoComplete, props = index.__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 _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 = index_es.__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({
@@ -61,7 +61,7 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
         m: 32,
         l: 40
     };
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames((_b = {
                 "arc-TextInput": true,
                 "arc-TextInput--withAdditionalControl": showPassword || iconButton,
                 "arc-TextInput--alignRight": inputAlignment === "right",
@@ -73,17 +73,17 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
                 "arc-TextInput--withSuffix": suffix
             },
             _b["arc-TextInput--size".concat(inputSize && inputSize.toUpperCase())] = inputSize && inputSize !== "m",
-            _b)) }, index.filterDataAttrs(props)),
+            _b)) }, index_es.filterDataAttrs(props)),
         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", index.__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)),
+                React__default["default"].createElement("input", index_es.__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();
                             iconButton.onClick();
                         } },
-                        React__default["default"].createElement(Icon.Icon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
+                        React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
                 suffix && !showPassword ? (React__default["default"].createElement("span", { className: "arc-TextInput-suffix", "aria-hidden": true }, suffix)) : null,
                 showPassword && (React__default["default"].createElement("div", { className: "arc-TextInput-additionalControl" },
                     React__default["default"].createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
@@ -96,8 +96,8 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
 /**
  * Use `TextInput` to allow users to enter short form text.
  */
-var TextInput = React.forwardRef(function (props, ref) { return React__default["default"].createElement(TextInputComponent, index.__assign({ ref: ref }, props)); });
-var TextInputWithPlaceHolder = React.forwardRef(function (props, ref) { return React__default["default"].createElement(TextInputComponent, index.__assign({ ref: ref }, props)); });
+var TextInput = React.forwardRef(function (props, ref) { return React__default["default"].createElement(TextInputComponent, index_es.__assign({ ref: ref }, props)); });
+var TextInputWithPlaceHolder = React.forwardRef(function (props, ref) { return React__default["default"].createElement(TextInputComponent, index_es.__assign({ ref: ref }, props)); });
 
 exports.TextInput = TextInput;
 exports.TextInputWithPlaceHolder = TextInputWithPlaceHolder;

package/dist/_shared/cjs/{ThemeIcon-ee814862.js → ThemeIcon-6b10d20a.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
-var index$1 = require('./index-9947ac13.js');
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-c8a34402.js');
-var Surface = require('./Surface-8599dbe4.js');
+var Surface = require('./Surface-4bc47dcb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,16 +11,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ThemeIcon = function (_a) {
     var _b;
-    var size = _a.size, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, props = index.__rest(_a, ["size", "icon", "color"]);
+    var size = _a.size, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, props = index_es.__rest(_a, ["size", "icon", "color"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("span", index.__assign({ style: {
+    return (React__default["default"].createElement("span", index_es.__assign({ style: {
             height: size,
             width: size
-        }, className: index$1.classNames("arc-ThemeIcon", "arc-ThemeIcon--".concat(icon), (_b = {
+        }, className: index.classNames("arc-ThemeIcon", "arc-ThemeIcon--".concat(icon), (_b = {
                 "arc-ThemeIcon--onDarkSurface": surface === "dark"
             },
-            _b[suffixModifier.suffixModifier("arc-ThemeIcon--color", color)] = color !== "auto",
-            _b)) }, index.filterDataAttrs(props))));
+            _b[index_es.suffixModifier("arc-ThemeIcon--color", color)] = color !== "auto",
+            _b)) }, index_es.filterDataAttrs(props))));
 };
 
 exports.ThemeIcon = ThemeIcon;

package/dist/_shared/cjs/{Toast-d06a89e0.js → Toast-a33b5a2e.js}

@@ -1,15 +1,14 @@
 'use strict';
 
-var index$5 = require('./index-df60851b.js');
+var index_es = require('./index.es-b404d2c5.js');
 var React = require('react');
-var index = require('./index-3dd54df1.js');
+var index = require('./index-76f7dd53.js');
 var ReactDOM = require('react-dom');
-var index$2 = require('./index-0c6319ec.js');
-var index$1 = require('./index-039a9d35.js');
-var index$4 = require('./index-996dec94.js');
-var index$3 = require('./index-3d629205.js');
-var index$6 = require('./index-9947ac13.js');
-var ThemeIcon = require('./ThemeIcon-ee814862.js');
+var index$2 = require('./index-dbc843d3.js');
+var index$1 = require('./index-2bf59363.js');
+var index$3 = require('./index-527f962b.js');
+var index$4 = require('./index-9947ac13.js');
+var ThemeIcon = require('./ThemeIcon-6b10d20a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -490,7 +489,7 @@ const $054eb8030ebde76e$export$6192c2425ecfd989 = /*#__PURE__*/ React.forwardRef
 const $054eb8030ebde76e$var$FocusProxy = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const { __scopeToast: __scopeToast , onFocusFromOutsideViewport: onFocusFromOutsideViewport , ...proxyProps } = props;
     const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$FOCUS_PROXY_NAME, __scopeToast);
-    return /*#__PURE__*/ React.createElement(index$3.$ea1ef594cf570d83$export$439d29a4e110a164, index._extends({
+    return /*#__PURE__*/ React.createElement(index$1.$ea1ef594cf570d83$export$439d29a4e110a164, index._extends({
         "aria-hidden": true,
         tabIndex: 0
     }, proxyProps, {
@@ -521,7 +520,7 @@ const $054eb8030ebde76e$export$8d8dc7d5f743331b = /*#__PURE__*/ React.forwardRef
         defaultProp: defaultOpen,
         onChange: onOpenChange
     });
-    return /*#__PURE__*/ React.createElement(index$4.$921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+    return /*#__PURE__*/ React.createElement(index$3.$921a889cee6df7e8$export$99c2b779aa4e8b8b, {
         present: forceMount || open
     }, /*#__PURE__*/ React.createElement($054eb8030ebde76e$var$ToastImpl, index._extends({
         open: open
@@ -782,7 +781,7 @@ $054eb8030ebde76e$var$ToastImpl.propTypes = {
     }, []);
     return isAnnounced ? null : /*#__PURE__*/ React.createElement($f1701beae083dbae$export$602eac185826482c, {
         asChild: true
-    }, /*#__PURE__*/ React.createElement(index$3.$ea1ef594cf570d83$export$439d29a4e110a164, announceProps, renderAnnounceText && /*#__PURE__*/ React.createElement(React.Fragment, null, context.label, " ", children)));
+    }, /*#__PURE__*/ React.createElement(index$1.$ea1ef594cf570d83$export$439d29a4e110a164, announceProps, renderAnnounceText && /*#__PURE__*/ React.createElement(React.Fragment, null, context.label, " ", children)));
 };
 const $054eb8030ebde76e$export$16d42d7c29b95a4 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const { __scopeToast: __scopeToast , ...titleProps } = props;
@@ -931,7 +930,7 @@ const $054eb8030ebde76e$export$e19cd5f9376f8cee = $054eb8030ebde76e$export$3019f
 const $054eb8030ebde76e$export$f39c2d165cd861fe = $054eb8030ebde76e$export$811e70f61c205839;
 
 var ToastNotification = function (_a) {
-    var link = _a.link, title = _a.title, isOpen = _a.isOpen, onOpenChange = _a.onOpenChange, _b = _a.isStatusIconVisible, isStatusIconVisible = _b === void 0 ? true : _b, _c = _a.isCloseButtonVisible, isCloseButtonVisible = _c === void 0 ? true : _c, _d = _a.status, status = _d === void 0 ? "general" : _d, props = index$5.__rest(_a, ["link", "title", "isOpen", "onOpenChange", "isStatusIconVisible", "isCloseButtonVisible", "status"]);
+    var link = _a.link, title = _a.title, isOpen = _a.isOpen, onOpenChange = _a.onOpenChange, _b = _a.isStatusIconVisible, isStatusIconVisible = _b === void 0 ? true : _b, _c = _a.isCloseButtonVisible, isCloseButtonVisible = _c === void 0 ? true : _c, _d = _a.status, status = _d === void 0 ? "general" : _d, props = index_es.__rest(_a, ["link", "title", "isOpen", "onOpenChange", "isStatusIconVisible", "isCloseButtonVisible", "status"]);
     var statusIcons = {
         general: "toastGeneral",
         error: "toastError",
@@ -942,24 +941,24 @@ var ToastNotification = function (_a) {
         event.preventDefault();
         handler();
     }; };
-    return (React__default["default"].createElement($054eb8030ebde76e$export$be92b6f5f03c0fe9, index$5.__assign({ className: "arc-Toast-root", open: isOpen, onOpenChange: onOpenChange }, index$5.filterDataAttrs(props)),
-        React__default["default"].createElement("div", { "data-testid": "toast-notification-wrapper", className: index$6.classNames("arc-Toast", "arc-Toast-status--".concat(status)) },
+    return (React__default["default"].createElement($054eb8030ebde76e$export$be92b6f5f03c0fe9, index_es.__assign({ className: "arc-Toast-root", open: isOpen, onOpenChange: onOpenChange }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { "data-testid": "toast-notification-wrapper", className: index$4.classNames("arc-Toast", "arc-Toast-status--".concat(status)) },
             isStatusIconVisible && (React__default["default"].createElement("div", { "data-testid": "status-icon", className: "arc-Toast-icon" },
                 React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 24, icon: statusIcons[status] }))),
             React__default["default"].createElement($054eb8030ebde76e$export$f99233281efd08a0, { className: "arc-Toast-title" },
                 React__default["default"].createElement("span", null, title)),
             link && (React__default["default"].createElement($054eb8030ebde76e$export$e19cd5f9376f8cee, { className: "arc-Toast-action", asChild: true, altText: link.text },
-                React__default["default"].createElement("a", index$5.__assign({ className: "arc-Toast-link", href: link.href, "aria-label": link.ariaLabel }, (link.onClick && { onClick: handleLinkClick(link.onClick) })), link.text))),
+                React__default["default"].createElement("a", index_es.__assign({ className: "arc-Toast-link", href: link.href, "aria-label": link.ariaLabel }, (link.onClick && { onClick: handleLinkClick(link.onClick) })), link.text))),
             isCloseButtonVisible && !link && (React__default["default"].createElement($054eb8030ebde76e$export$f39c2d165cd861fe, { className: "arc-Toast-dismiss", "aria-label": "Close" },
                 React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: "toastDismiss", size: 24 }))))));
 };
 
 /** 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 = index$5.__rest(_a, ["children", "colorScheme"]);
+    var children = _a.children, _b = _a.colorScheme, colorScheme = _b === void 0 ? "default" : _b, props = index_es.__rest(_a, ["children", "colorScheme"]);
     return (React__default["default"].createElement($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", duration: 6000 },
         React__default["default"].createElement($054eb8030ebde76e$export$d5c6c08dc2d3ca7, { asChild: true, className: "arc-Toast-viewport" },
-            React__default["default"].createElement("div", index$5.__assign({ className: "arc-Toast-pathway--".concat(colorScheme) }, index$5.filterDataAttrs(props)), children))));
+            React__default["default"].createElement("div", index_es.__assign({ className: "arc-Toast-pathway--".concat(colorScheme) }, index_es.filterDataAttrs(props)), children))));
 };
 Toast.Notification = ToastNotification;
 

package/dist/_shared/cjs/{UniversalHeader-f6d9c63a.js → UniversalHeader-114ac8f5.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
+var index_es = require('./index.es-b404d2c5.js');
 var React = require('react');
-var Surface = require('./Surface-8599dbe4.js');
+var Surface = require('./Surface-4bc47dcb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,16 +12,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Use `UniversalHeader` to display a group-level page header.
  */
 var UniversalHeader = function (_a) {
-    var children = _a.children, ContentSlot = _a.ContentSlot, props = index.__rest(_a, ["children", "ContentSlot"]);
-    return (React__default["default"].createElement("nav", index.__assign({ className: "arc-UniversalHeader" }, index.filterDataAttrs(props)),
+    var children = _a.children, ContentSlot = _a.ContentSlot, props = index_es.__rest(_a, ["children", "ContentSlot"]);
+    return (React__default["default"].createElement("nav", index_es.__assign({ className: "arc-UniversalHeader", "aria-label": "universial navigation" }, index_es.filterDataAttrs(props)),
         React__default["default"].createElement(Surface.Surface, { background: "light-neutral-02" },
             React__default["default"].createElement("ul", { className: "arc-UniversalHeader-items" },
                 children,
                 ContentSlot && (React__default["default"].createElement("li", { className: "arc-UniversalHeader-contentSlot" }, ContentSlot))))));
 };
 var UniversalHeaderItem = function (_a) {
-    var children = _a.children, href = _a.href, props = index.__rest(_a, ["children", "href"]);
-    return (React__default["default"].createElement("li", index.__assign({}, index.filterDataAttrs(props)),
+    var children = _a.children, href = _a.href, props = index_es.__rest(_a, ["children", "href"]);
+    return (React__default["default"].createElement("li", index_es.__assign({}, index_es.filterDataAttrs(props)),
         React__default["default"].createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
 };
 UniversalHeader.Item = UniversalHeaderItem;

package/dist/_shared/cjs/{VerticalSpace-e128ec68.js → VerticalSpace-3908ae62.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
-var index$1 = require('./index-9947ac13.js');
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,8 +13,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(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, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = index.__rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = index_es.__rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames((_b = {
                 "arc-VerticalSpace": true
             },
             _b["arc-VerticalSpace--size".concat(size)] = size,
@@ -23,7 +23,7 @@ var VerticalSpace = function (_a) {
             _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL && sizeL,
             _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL && sizeXL,
             _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
-            _b)) }, index.filterDataAttrs(props))));
+            _b)) }, index_es.filterDataAttrs(props))));
 };
 
 exports.VerticalSpace = VerticalSpace;

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var index_es = require('./index.es-b404d2c5.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -10,8 +11,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
  */
 var VisuallyHidden = function (_a) {
-    var children = _a.children;
-    return (React__default["default"].createElement("span", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
+    var children = _a.children, props = index_es.__rest(_a, ["children"]);
+    return (React__default["default"].createElement("span", index_es.__assign({ "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, index_es.filterDataAttrs(props)), children));
 };
 
 exports.VisuallyHidden = VisuallyHidden;

package/dist/_shared/cjs/{component-df82bc05.js → component-ae4b7058.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-df60851b.js');
+var index_es = require('./index.es-b404d2c5.js');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -321,12 +321,12 @@ function innerCreateMedium(defaults, middleware) {
 function createSidecarMedium(options) {
     if (options === void 0) { options = {}; }
     var medium = innerCreateMedium(null);
-    medium.options = index.__assign({ async: true, ssr: false }, options);
+    medium.options = index_es.__assign({ async: true, ssr: false }, options);
     return medium;
 }
 
 var SideCar = function (_a) {
-    var sideCar = _a.sideCar, rest = index.__rest(_a, ["sideCar"]);
+    var sideCar = _a.sideCar, rest = index_es.__rest(_a, ["sideCar"]);
     if (!sideCar) {
         throw new Error('Sidecar: please provide `sideCar` property to import the right car');
     }
@@ -334,7 +334,7 @@ var SideCar = function (_a) {
     if (!Target) {
         throw new Error('Sidecar medium not found');
     }
-    return React__namespace.createElement(Target, index.__assign({}, rest));
+    return React__namespace.createElement(Target, index_es.__assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {