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

package/dist/_shared/esm/{Surface-0ca6817d.js → Surface-71d21a9e.js}

@@ -1,4 +1,4 @@
-import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { b as __spreadArray, _ as __rest, a as __assign, c as camelcase, f as filterDataAttrs } from './index-288c66b5.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { createContext } from 'react';
 
@@ -12,18 +12,18 @@ 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, props = __rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical"]);
     var surface = "light";
-    if (background === "black" ||
-        background === "brand" ||
-        background === "brand-flat" ||
-        background === "dark" ||
-        background === "darker") {
+    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.createElement(Provider, { value: { surface: surface } },
         React__default.createElement("div", __assign({ "data-testid": "arc-surface", className: classNames((_b = {
                     "arc-Surface": true
                 },
-                _b["arc-Surface--".concat(background && camelCase(background), "Background")] = background,
+                _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,
@@ -31,16 +31,16 @@ var Surface = function (_a) {
                 _b)) }, filterDataAttrs(props)), children)));
 };
 var backgroundsShared = [
-    "black",
-    "brand",
-    "brand-flat",
-    "dark",
-    "darker",
-    "coral",
-    "turquoise",
-    "light",
-    "lighter",
-    "white",
+    "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 = __spreadArray([], backgroundsShared, true);
 var backgroundsBT = __spreadArray([], backgroundsShared, true);

package/dist/_shared/esm/{Tabs-39d24a7d.js → Tabs-21ac7dfe.js}

@@ -1,19 +1,14 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import React__default, { useContext, createContext, forwardRef, createElement, useRef, useState, useEffect, useCallback } from 'react';
-import { _ as _extends } from './extends-8cc61aad.js';
-import { c as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, d as $71cd76cc60e0454e$export$6f32135080cb4c3, $ as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, b as $8927f6f2acc4f386$export$250ffa63cdc0d034, g as $e42e1063c40fb3ef$export$b9ecd428b558ff10, e as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-87a828b8.js';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-65264b4e.js';
-import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-3147c5b0.js';
-import { I as Icon } from './Icon-9ecaaeab.js';
-import { C as Context } from './Surface-0ca6817d.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import React__default, { forwardRef, createElement, useRef, useState, useEffect, useCallback, useContext } from 'react';
+import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, _ as _extends, b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, a as $71cd76cc60e0454e$export$6f32135080cb4c3, f as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, e as $8927f6f2acc4f386$export$250ffa63cdc0d034, d as $e42e1063c40fb3ef$export$b9ecd428b558ff10 } from './index-cace3545.js';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-f97466e9.js';
+import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-7740883c.js';
+import { $ as $f631663db3294ace$export$b39126d51d94e6f3 } from './index-a624de47.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-fa93ec97.js';
+import { I as Icon } from './Icon-512f834f.js';
+import { C as Context } from './Surface-71d21a9e.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
-
-const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext(undefined);
-/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
-    const globalDir = useContext($f631663db3294ace$var$DirectionContext);
-    return localDir || globalDir || 'ltr';
-}
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
 
 const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
 const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
@@ -451,6 +446,7 @@ var TabsList = function (_a) {
             React__default.createElement(ThemeIcon, { icon: "tabsNext", 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-2513c185.js

@@ -0,0 +1,38 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import React__default, { useState } from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { I as Icon } from './Icon-512f834f.js';
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
+
+/**
+ * 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, 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--isRemovable": isRemovable,
+            "arc-Tag--hasIcon": icon,
+            "arc-Tag--hasLink": link || onClick,
+            "arc-Tag--removed": isRemoved
+        }) }, (isRemoved && { "aria-hidden": true }), filterDataAttrs(props)),
+        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", 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", 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", 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(ThemeIcon, { icon: "tagRemove", color: "brand", size: 20 }),
+            React__default.createElement(ThemeIcon, { icon: "tagRemoveInteractive", color: "brand", size: 20 })))));
+};
+
+export { Tag as T };

package/dist/_shared/esm/{Text-14f586ac.js → Text-a46fb76b.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
-import { C as Context } from './Surface-0ca6817d.js';
+import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
+import { C as Context } from './Surface-71d21a9e.js';
 
 /**
  * Use `Text` to display text.

package/dist/_shared/esm/TextInput-94c7b1a4.js

@@ -0,0 +1,96 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.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-d873f7fa.js';
+import { C as Context } from './Surface-71d21a9e.js';
+import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
+import { I as Icon } from './Icon-512f834f.js';
+
+/**
+ * Infer the correct inputMode, pattern and type if specifying a `number` type.
+ */
+var useNumericInput = function (props) {
+    var type = props.type === "number" ? "text" : props.type;
+    var inputMode = props.inputMode;
+    if (!props.inputMode) {
+        if (props.type === "email") {
+            inputMode = "email";
+        }
+        else if (props.type === "number") {
+            inputMode = "numeric";
+        }
+        else if (props.type === "tel") {
+            inputMode = "tel";
+        }
+        else if (props.type === "url") {
+            inputMode = "url";
+        }
+    }
+    var pattern = props.pattern;
+    if (!props.pattern && props.type === "number") {
+        pattern = "[0-9]*";
+    }
+    return { inputMode: inputMode, pattern: pattern, type: type };
+};
+
+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, 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({
+        inputMode: inputMode,
+        pattern: pattern,
+        type: showPasswordToggle ? "text" : type
+    });
+    // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
+    var ariaDescribedby = useAriaDescribedby({
+        errorMessage: errorMessage,
+        id: id,
+        helper: helper,
+        disclosureText: disclosureText
+    }).ariaDescribedby;
+    var buttonIconSize = {
+        s: 24,
+        m: 32,
+        l: 40
+    };
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {
+                "arc-TextInput": true,
+                "arc-TextInput--withAdditionalControl": showPassword || iconButton,
+                "arc-TextInput--alignRight": inputAlignment === "right",
+                "arc-TextInput--withPasswordToggle": showPassword,
+                "arc-TextInput--isDisabled": isDisabled,
+                "arc-TextInput--invalid": errorMessage,
+                "arc-TextInput--onDarkSurface": surface === "dark",
+                "arc-TextInput--withPrefix": prefix,
+                "arc-TextInput--withSuffix": suffix
+            },
+            _b["arc-TextInput--size".concat(inputSize && inputSize.toUpperCase())] = inputSize && inputSize !== "m",
+            _b)) }, filterDataAttrs(props)),
+        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, 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();
+                            iconButton.onClick();
+                        } },
+                        React__default.createElement(Icon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
+                suffix && !showPassword ? (React__default.createElement("span", { className: "arc-TextInput-suffix", "aria-hidden": true }, suffix)) : null,
+                showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
+                    React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
+                    React__default.createElement(VisuallyHidden, null,
+                        React__default.createElement("div", { "aria-live": "polite" },
+                            React__default.createElement("p", null, showPasswordToggle
+                                ? "Your password is shown"
+                                : "Your password is hidden")))))))));
+});
+/**
+ * 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)); });
+
+export { TextInputWithPlaceHolder as T, TextInput as a };

package/dist/_shared/esm/{ThemeIcon-eab5a4d0.js → ThemeIcon-c2dc41a6.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
-import { C as Context } from './Surface-0ca6817d.js';
+import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
+import { C as Context } from './Surface-71d21a9e.js';
 
 var ThemeIcon = function (_a) {
     var _b;

package/dist/_shared/esm/{Toast-dce2d01e.js → Toast-de6ca2f3.js}

@@ -1,32 +1,270 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import React__default, { forwardRef, createElement, useState, useRef, useCallback, useEffect, useMemo, Fragment } from 'react';
-import { _ as _extends } from './extends-8cc61aad.js';
-import { createPortal } from 'react-dom';
-import { b as $8927f6f2acc4f386$export$250ffa63cdc0d034, c as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, $ as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, g as $e42e1063c40fb3ef$export$b9ecd428b558ff10, h as $9f79659886946c16$export$e5c5a5f917a5871c, d as $71cd76cc60e0454e$export$6f32135080cb4c3, e as $921a889cee6df7e8$export$99c2b779aa4e8b8b, i as $8927f6f2acc4f386$export$6d1a0317bde7de7f } from './index-87a828b8.js';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-65264b4e.js';
-import { b as $5cb92bef7577960e$export$aecb2ddcb55c95be, c as $5cb92bef7577960e$export$be92b6f5f03c0fe9, $ as $f1701beae083dbae$export$602eac185826482c } from './index-4f8d3888.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import React__default, { forwardRef, useContext, useState, useEffect, createElement, useRef, createContext, useCallback, useMemo, Fragment } from 'react';
+import { b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, e as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, d as $e42e1063c40fb3ef$export$b9ecd428b558ff10, f as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, g as $8927f6f2acc4f386$export$6d1a0317bde7de7f, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, h as $9f79659886946c16$export$e5c5a5f917a5871c, a as $71cd76cc60e0454e$export$6f32135080cb4c3 } from './index-cace3545.js';
+import ReactDOM__default, { createPortal } from 'react-dom';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-f97466e9.js';
+import { $ as $addc16e1bbe58fd0$export$3a72a57244d6e765 } from './index-6028d797.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-fa93ec97.js';
+import { $ as $ea1ef594cf570d83$export$439d29a4e110a164 } from './index-5113ed53.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
 
-const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
-    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({}, props, {
-        ref: forwardedRef,
+const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
+const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
+const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
+let $5cb92bef7577960e$var$originalBodyPointerEvents;
+const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ createContext({
+    layers: new Set(),
+    layersWithOutsidePointerEventsDisabled: new Set(),
+    branches: new Set()
+});
+const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    var _node$ownerDocument;
+    const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
+    const context = useContext($5cb92bef7577960e$var$DismissableLayerContext);
+    const [node1, setNode] = useState(null);
+    const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
+    const [, force] = useState({});
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setNode(node)
+    );
+    const layers = Array.from(context.layers);
+    const [highestLayerWithOutsidePointerEventsDisabled] = [
+        ...context.layersWithOutsidePointerEventsDisabled
+    ].slice(-1); // prettier-ignore
+    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
+    const index = node1 ? layers.indexOf(node1) : -1;
+    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+    const pointerDownOutside = $5cb92bef7577960e$var$usePointerDownOutside((event)=>{
+        const target = event.target;
+        const isPointerDownOnBranch = [
+            ...context.branches
+        ].some((branch)=>branch.contains(target)
+        );
+        if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+        onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event);
+        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
+        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
+    }, ownerDocument);
+    const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{
+        const target = event.target;
+        const isFocusInBranch = [
+            ...context.branches
+        ].some((branch)=>branch.contains(target)
+        );
+        if (isFocusInBranch) return;
+        onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event);
+        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
+        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
+    }, ownerDocument);
+    $addc16e1bbe58fd0$export$3a72a57244d6e765((event)=>{
+        const isHighestLayer = index === context.layers.size - 1;
+        if (!isHighestLayer) return;
+        onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
+        if (!event.defaultPrevented && onDismiss) {
+            event.preventDefault();
+            onDismiss();
+        }
+    }, ownerDocument);
+    useEffect(()=>{
+        if (!node1) return;
+        if (disableOutsidePointerEvents) {
+            if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+                $5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+                ownerDocument.body.style.pointerEvents = 'none';
+            }
+            context.layersWithOutsidePointerEventsDisabled.add(node1);
+        }
+        context.layers.add(node1);
+        $5cb92bef7577960e$var$dispatchUpdate();
+        return ()=>{
+            if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
+        };
+    }, [
+        node1,
+        ownerDocument,
+        disableOutsidePointerEvents,
+        context
+    ]);
+    /**
+   * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
+   * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
+   * and add it to the end again so the layering order wouldn't be _creation order_.
+   * We only want them to be removed from context stacks when unmounted.
+   */ useEffect(()=>{
+        return ()=>{
+            if (!node1) return;
+            context.layers.delete(node1);
+            context.layersWithOutsidePointerEventsDisabled.delete(node1);
+            $5cb92bef7577960e$var$dispatchUpdate();
+        };
+    }, [
+        node1,
+        context
+    ]);
+    useEffect(()=>{
+        const handleUpdate = ()=>force({})
+        ;
+        document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate);
+        return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
+        ;
+    }, []);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, layerProps, {
+        ref: composedRefs,
         style: {
-            // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
-            position: 'absolute',
-            border: 0,
-            width: 1,
-            height: 1,
-            padding: 0,
-            margin: -1,
-            overflow: 'hidden',
-            clip: 'rect(0, 0, 0, 0)',
-            whiteSpace: 'nowrap',
-            wordWrap: 'normal',
+            pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
             ...props.style
+        },
+        onFocusCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
+    }));
+});
+const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const context = useContext($5cb92bef7577960e$var$DismissableLayerContext);
+    const ref = useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
+    useEffect(()=>{
+        const node = ref.current;
+        if (node) {
+            context.branches.add(node);
+            return ()=>{
+                context.branches.delete(node);
+            };
         }
+    }, [
+        context.branches
+    ]);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, props, {
+        ref: composedRefs
     }));
 });
+/* -----------------------------------------------------------------------------------------------*/ /**
+ * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
+ * to mimic layer dismissing behaviour present in OS.
+ * Returns props to pass to the node we want to check for outside events.
+ */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
+    const handlePointerDownOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPointerDownOutside);
+    const isPointerInsideReactTreeRef = useRef(false);
+    const handleClickRef = useRef(()=>{});
+    useEffect(()=>{
+        const handlePointerDown = (event)=>{
+            if (event.target && !isPointerInsideReactTreeRef.current) {
+                const eventDetail = {
+                    originalEvent: event
+                };
+                function handleAndDispatchPointerDownOutsideEvent() {
+                    $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
+                        discrete: true
+                    });
+                }
+                /**
+         * On touch devices, we need to wait for a click event because browsers implement
+         * a ~350ms delay between the time the user stops touching the display and when the
+         * browser executres events. We need to ensure we don't reactivate pointer-events within
+         * this timeframe otherwise the browser may execute events that should have been prevented.
+         *
+         * Additionally, this also lets us deal automatically with cancellations when a click event
+         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
+         *
+         * This is why we also continuously remove the previous listener, because we cannot be
+         * certain that it was raised, and therefore cleaned-up.
+         */ if (event.pointerType === 'touch') {
+                    ownerDocument.removeEventListener('click', handleClickRef.current);
+                    handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
+                    ownerDocument.addEventListener('click', handleClickRef.current, {
+                        once: true
+                    });
+                } else handleAndDispatchPointerDownOutsideEvent();
+            }
+            isPointerInsideReactTreeRef.current = false;
+        };
+        /**
+     * if this hook executes in a component that mounts via a `pointerdown` event, the event
+     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
+     * this by delaying the event listener registration on the document.
+     * This is not React specific, but rather how the DOM works, ie:
+     * ```
+     * button.addEventListener('pointerdown', () => {
+     *   console.log('I will log');
+     *   document.addEventListener('pointerdown', () => {
+     *     console.log('I will also log');
+     *   })
+     * });
+     */ const timerId = window.setTimeout(()=>{
+            ownerDocument.addEventListener('pointerdown', handlePointerDown);
+        }, 0);
+        return ()=>{
+            window.clearTimeout(timerId);
+            ownerDocument.removeEventListener('pointerdown', handlePointerDown);
+            ownerDocument.removeEventListener('click', handleClickRef.current);
+        };
+    }, [
+        ownerDocument,
+        handlePointerDownOutside
+    ]);
+    return {
+        // ensures we check React component tree (not just DOM tree)
+        onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
+    };
+}
+/**
+ * Listens for when focus happens outside a react subtree.
+ * Returns props to pass to the root (node) of the subtree we want to check.
+ */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
+    const handleFocusOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onFocusOutside);
+    const isFocusInsideReactTreeRef = useRef(false);
+    useEffect(()=>{
+        const handleFocus = (event)=>{
+            if (event.target && !isFocusInsideReactTreeRef.current) {
+                const eventDetail = {
+                    originalEvent: event
+                };
+                $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+                    discrete: false
+                });
+            }
+        };
+        ownerDocument.addEventListener('focusin', handleFocus);
+        return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
+        ;
+    }, [
+        ownerDocument,
+        handleFocusOutside
+    ]);
+    return {
+        onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true
+        ,
+        onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
+    };
+}
+function $5cb92bef7577960e$var$dispatchUpdate() {
+    const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE);
+    document.dispatchEvent(event);
+}
+function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete  }) {
+    const target = detail.originalEvent.target;
+    const event = new CustomEvent(name, {
+        bubbles: false,
+        cancelable: true,
+        detail: detail
+    });
+    if (handler) target.addEventListener(name, handler, {
+        once: true
+    });
+    if (discrete) $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event);
+    else target.dispatchEvent(event);
+}
+const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = $5cb92bef7577960e$export$177fb62ff3ec1f22;
+const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb2109db14228;
+
+const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    var _globalThis$document;
+    const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
+    return container ? /*#__PURE__*/ ReactDOM__default.createPortal(/*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, portalProps, {
+        ref: forwardedRef
+    })), container) : null;
+});
 
 /* -------------------------------------------------------------------------------------------------
  * ToastProvider
@@ -709,7 +947,7 @@ var ToastNotification = function (_a) {
                 React__default.createElement(ThemeIcon, { icon: "toastDismiss", 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/{UniversalHeader-b4c1577c.js → UniversalHeader-456ad60c.js}

@@ -1,22 +1,17 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import React__default, { useEffect } from 'react';
-import { S as Surface } from './Surface-0ca6817d.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import React__default from 'react';
+import { S as Surface } from './Surface-71d21a9e.js';
 
 /**
  * Use `UniversalHeader` to display a group-level page header.
  */
 var UniversalHeader = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    useEffect(function () {
-        React__default.Children.map(children, function (item) {
-            if (item && item.type !== UniversalHeaderItem) {
-                throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
-            }
-        });
-    }, [children]);
+    var children = _a.children, ContentSlot = _a.ContentSlot, props = __rest(_a, ["children", "ContentSlot"]);
     return (React__default.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
-        React__default.createElement(Surface, { background: "light" },
-            React__default.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+        React__default.createElement(Surface, { background: "light-neutral-02" },
+            React__default.createElement("ul", { className: "arc-UniversalHeader-items" },
+                children,
+                ContentSlot && (React__default.createElement("li", { className: "arc-UniversalHeader-contentSlot" }, ContentSlot))))));
 };
 var UniversalHeaderItem = function (_a) {
     var children = _a.children, href = _a.href, props = __rest(_a, ["children", "href"]);

package/dist/_shared/esm/{VerticalSpace-43cd9138.js → VerticalSpace-b07cd8e6.js}

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default from 'react';
 

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;

package/dist/_shared/esm/_commonjsHelpers-0109d574.js

@@ -0,0 +1,18 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+export { commonjsGlobal as c, getAugmentedNamespace as g };