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

package/dist/_shared/esm/{DisclosureMini-38f4c459.js → DisclosureMini-6292f721.js}

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext, useState } from 'react';
-import { T as Text } from './Text-a46fb76b.js';
-import { C as Context } from './Surface-71d21a9e.js';
-import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
+import { T as Text } from './Text-96d8a35f.js';
+import { C as Context } from './Surface-c425e5e6.js';
+import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
 
 /**
  * Use `DisclosureMini` to show and hide sections of content.

package/dist/_shared/esm/{Filter-49dcf5ce.js → Filter-71e06965.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs, b as __spreadArray } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, b as __spreadArray } from './index.es-5496ec12.js';
 import React__default, { useContext, useState, useEffect } from 'react';
-import { C as Context } from './Surface-71d21a9e.js';
+import { C as Context } from './Surface-c425e5e6.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
+import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
 
 var FilterControl = function (_a) {
     var children = _a.children, onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b;
@@ -23,28 +23,28 @@ var FilterControl = function (_a) {
 };
 
 var FilterControls = function (_a) {
-    var children = _a.children, controlsAlignment = _a.controlsAlignment, props = __rest(_a, ["children", "controlsAlignment"]);
-    return (React__default.createElement("div", __assign({ className: classNames("arc-FilterControls", {
+    var children = _a.children, controlsAlignment = _a.controlsAlignment;
+    return (React__default.createElement("div", { className: classNames("arc-FilterControls", {
             "arc-FilterControls--alignLeft": controlsAlignment === "left",
             "arc-FilterControls--alignRight": controlsAlignment === "right"
-        }) }, filterDataAttrs(props)), children));
+        }) }, children));
 };
 
 var FilterItem = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (React__default.createElement("div", __assign({ className: "arc-FilterItem" }, filterDataAttrs(props)), children));
+    var children = _a.children;
+    return React__default.createElement("div", { className: "arc-FilterItem" }, children);
 };
 
 var FilterItems = function (_a) {
-    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = __rest(_a, ["children", "error", "displayType"]);
+    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b;
     return React__default.Children.toArray(children).length > 0 ? (React__default.createElement("div", null,
         React__default.createElement("div", { className: "arc-FilterItems-offscreen", "aria-live": "assertive" }, React__default.Children.toArray(children).length > 0
             ? "".concat(React__default.Children.toArray(children).length, " records listed.")
             : null),
-        React__default.createElement("div", __assign({ className: classNames("arc-FilterItems", {
+        React__default.createElement("div", { className: classNames("arc-FilterItems", {
                 "arc-FilterItems--list": displayType === "list",
                 "arc-FilterItems--grid": displayType === "grid"
-            }) }, filterDataAttrs(props)), displayType === "list"
+            }) }, displayType === "list"
             ? React__default.Children.toArray(children).map(function (child, index, array) { return (React__default.createElement(React__default.Fragment, { key: index },
                 child,
                 index !== array.length - 1 && (React__default.createElement(React__default.Fragment, null,

package/dist/_shared/esm/{FormControl-d873f7fa.js → FormControl-e0acdf7a.js}

@@ -1,10 +1,10 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { createContext, useContext } from 'react';
-import { C as Context$1 } from './Surface-71d21a9e.js';
-import { D as DisclosureMini } from './DisclosureMini-38f4c459.js';
-import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
-import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
+import { C as Context$1 } from './Surface-c425e5e6.js';
+import { D as DisclosureMini } from './DisclosureMini-6292f721.js';
+import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
+import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.

package/dist/_shared/esm/{Grid-fb9fc522.js → Grid-727d05d6.js}

@@ -1,7 +1,6 @@
-import { a as __assign, f as filterDataAttrs, _ as __rest } from './index-288c66b5.js';
+import { a as __assign, f as filterDataAttrs, _ as __rest, s as suffixModifier } from './index.es-5496ec12.js';
 import React__default from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
 
 var BREAKPOINTS = ["xs", "s", "m", "l", "xl"];
 

package/dist/_shared/esm/{Group-66196f07.js → Group-b1b14ab4.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { C as Context } from './Surface-71d21a9e.js';
+import { C as Context } from './Surface-c425e5e6.js';
 
 /**
  * Use `Group` to arrange flexible items in a row.

package/dist/_shared/esm/{Heading-906c7c7c.js → Heading-0dfbdb24.js}

@@ -1,8 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
-import { C as Context } from './Surface-71d21a9e.js';
+import { C as Context } from './Surface-c425e5e6.js';
 
 /**
  * Use `Heading` to display heading text.

package/dist/_shared/esm/{HeroButton-7ea692bf.js → HeroButton-bb983125.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, c as camelcase, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { I as Icon } from './Icon-512f834f.js';
-import { C as Context } from './Surface-71d21a9e.js';
+import { C as Context, c as camelcase } from './Surface-c425e5e6.js';
+import { I as Icon } from './Icon-428e8061.js';
 import { A as ArcIconEclipse } from './ArcIconEclipse.esm-bb48b82a.js';
 
 const BtIconArrowAltRight = (props) =>

package/dist/_shared/esm/{Icon-512f834f.js → Icon-428e8061.js}

@@ -1,8 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
-import { C as Context } from './Surface-71d21a9e.js';
+import { C as Context } from './Surface-c425e5e6.js';
 
 /**
  * Use `Icon` to display brand iconography.

package/dist/_shared/esm/{Image-57d08939.js → Image-c1dc10b5.js}

@@ -1,7 +1,6 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useState, useEffect } from 'react';
-import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
 
 /**
  * Use `Image` to render a single image, or set of images, with support for

package/dist/_shared/esm/{MediaCard-c12d89ea.js → MediaCard-d83b5561.js}

@@ -1,16 +1,16 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default, { useContext, useState, useEffect, Suspense } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { a as SemSizeBreakpointsS } from './index.es-1b6d33c2.js';
+import { a as SemSizeBreakpointsS } from './index.es-974af4a2.js';
 import { u as useMediaQuery } from './use-media-query-d3622da8.js';
-import { C as CardHeading } from './BtIconArrowRight.esm-6a17d0ce.js';
-import { C as CardFooter } from './CardFooter-c79fb2db.js';
-import { C as ConditionalWrapper } from './ConditionalWrapper-59be8f35.js';
-import { I as Image } from './Image-57d08939.js';
-import { H as Heading } from './Heading-906c7c7c.js';
-import { C as Context, S as Surface } from './Surface-71d21a9e.js';
-import { T as Text } from './Text-a46fb76b.js';
-import { V as VerticalSpace } from './VerticalSpace-b07cd8e6.js';
+import { I as Image } from './Image-c1dc10b5.js';
+import { H as Heading } from './Heading-0dfbdb24.js';
+import { C as Context, S as Surface } from './Surface-c425e5e6.js';
+import { T as Text } from './Text-96d8a35f.js';
+import { V as VerticalSpace } from './VerticalSpace-6a3533db.js';
+import { C as CardHeading } from './CardHeading-4223432d.js';
+import { C as CardFooter } from './CardFooter-e4380cda.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper-b85979de.js';
 
 var VideoPlayer = React__default.lazy(function () {
     return import('../../VideoPlayer/VideoPlayer.esm.js').then(function (_a) {

package/dist/_shared/esm/{Poster-e05a8b45.js → Poster-ac72059a.js}

@@ -1,13 +1,12 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, s as suffixModifier } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default from 'react';
-import { S as Surface } from './Surface-71d21a9e.js';
-import { I as Image } from './Image-57d08939.js';
-import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
+import { S as Surface } from './Surface-c425e5e6.js';
+import { I as Image } from './Image-c1dc10b5.js';
 
 var PosterImage = function (_a) {
     var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
-    return (React__default.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
+    return (React__default.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, filterDataAttrs(props))));
 };
 
 var PosterVideo = function (_a) {

package/dist/_shared/esm/{ProgressStepper-189ed0f9.js → ProgressStepper-e3e7b392.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
-import { I as Icon } from './Icon-512f834f.js';
+import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
+import { I as Icon } from './Icon-428e8061.js';
 
 var Error = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("g", { clipPath: "url(#a)" },
@@ -21,7 +21,7 @@ var Complete = function () { return (React__default.createElement("svg", { fill:
         React__default.createElement("path", { d: "m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z", fill: "currentColor" })),
     React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }),
     React__default.createElement("defs", null,
-        React__default.createElement("clipPath", { id: "a" },
+        React__default.createElement("clipPath", null,
             React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
 
 var Current = function () { return (React__default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },

package/dist/_shared/esm/{RadioGroup-8ff17cbb.js → RadioGroup-0d337240.js}

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
-import { F as FormControl } from './FormControl-d873f7fa.js';
+import { F as FormControl } from './FormControl-e0acdf7a.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { C as Context } from './Surface-71d21a9e.js';
-import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
+import { C as Context } from './Surface-c425e5e6.js';
+import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
 
 var RadioContext = createContext({});
 var Provider = RadioContext.Provider;
@@ -13,10 +13,10 @@ var useRadioContext = function () {
 };
 
 var RadioButton = forwardRef(function (_a, ref) {
-    var id = _a.id, changeEvent = _a.changeEvent, isDisabled = _a.isDisabled, size = _a.size, labelSize = _a.labelSize, checked = _a.checked, defaultChecked = _a.defaultChecked, radioButtonAlignment = _a.radioButtonAlignment, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, label = _a.label, helper = _a.helper, hideLabel = _a.hideLabel, withMargin = _a.withMargin, props = __rest(_a, ["id", "changeEvent", "isDisabled", "size", "labelSize", "checked", "defaultChecked", "radioButtonAlignment", "name", "blurEvent", "value", "label", "helper", "hideLabel", "withMargin"]);
+    var id = _a.id, changeEvent = _a.changeEvent, isDisabled = _a.isDisabled, size = _a.size, labelSize = _a.labelSize, checked = _a.checked, defaultChecked = _a.defaultChecked, radioButtonAlignment = _a.radioButtonAlignment, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, label = _a.label, helper = _a.helper, hideLabel = _a.hideLabel, withMargin = _a.withMargin;
     var surface = useContext(Context).surface;
     var idLabel = "".concat(id, "-label");
-    return (React__default.createElement("div", __assign({ className: classNames({
+    return (React__default.createElement("div", { className: classNames({
             "arc-RadioButton": true,
             "arc-RadioButton--withMargin": withMargin,
             "arc-RadioButton--withMarginSmall": withMargin && size === "s",
@@ -24,7 +24,7 @@ var RadioButton = forwardRef(function (_a, ref) {
             "arc-RadioButton--small": size === "s",
             "arc-RadioButton--smallLabel": labelSize === "s",
             "arc-RadioButton--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props)),
+        }) },
         React__default.createElement("label", { className: classNames("arc-RadioButton-label", {
                 "arc-RadioButton-label--alignTop": radioButtonAlignment === "top"
             }), htmlFor: id, id: idLabel },

package/dist/_shared/esm/{Section-1acbc06a.js → Section-c1dc6e37.js}

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

package/dist/_shared/esm/{SiteFooter-b65497e8.js → SiteFooter-7e924fb4.js}

@@ -1,12 +1,12 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
-import { S as SemSizeBreakpointsM } from './index.es-1b6d33c2.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { S as SemSizeBreakpointsM } from './index.es-974af4a2.js';
 import React__default, { useEffect, Fragment } from 'react';
-import { B as BrandLogo } from './BrandLogo-7ed8aeda.js';
+import { B as BrandLogo } from './BrandLogo-fb863b5b.js';
 import { u as useMediaQuery } from './use-media-query-d3622da8.js';
-import { S as Section } from './Section-1acbc06a.js';
-import { S as Surface } from './Surface-71d21a9e.js';
+import { S as Section } from './Section-c1dc6e37.js';
+import { S as Surface } from './Surface-c425e5e6.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
-import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
+import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
 
 /**
  * Use `SiteFooter` to display information at the bottom of a page.

package/dist/_shared/esm/{SiteHeaderV2-784b3bf8.js → SiteHeaderV2-94b9a407.js}

@@ -1,18 +1,16 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
-import { b as SemSizeBreakpointsL } from './index.es-1b6d33c2.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, s as suffixModifier } from './index.es-5496ec12.js';
+import { b as SemSizeBreakpointsL } from './index.es-974af4a2.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useEffect, Fragment, useRef, useState, createContext, useContext } from 'react';
-import { B as BrandLogo } from './BrandLogo-7ed8aeda.js';
+import { B as BrandLogo } from './BrandLogo-fb863b5b.js';
 import { u as useMediaQuery } from './use-media-query-d3622da8.js';
-import { S as Surface } from './Surface-71d21a9e.js';
-import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+import { S as Surface } from './Surface-c425e5e6.js';
 import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-4764708f.js';
-import './Heading-906c7c7c.js';
-import { C as ConditionalWrapper } from './ConditionalWrapper-59be8f35.js';
-import { B as ButtonV2 } from './ButtonV2-49cd0615.js';
-import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
-import { T as Text } from './Text-a46fb76b.js';
-import { I as Icon } from './Icon-512f834f.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper-b85979de.js';
+import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+import { B as ButtonV2 } from './ButtonV2-f9019e00.js';
+import { T as Text } from './Text-96d8a35f.js';
+import { I as Icon } from './Icon-428e8061.js';
 
 var Item = function (_a) {
     var _b;

package/dist/_shared/esm/Surface-c425e5e6.js

@@ -0,0 +1,164 @@
+import { b as __spreadArray, _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { c as classNames } from './index-2e73c2e9.js';
+import React__default, { createContext } from 'react';
+
+var camelcase$1 = {exports: {}};
+
+const UPPERCASE = /[\p{Lu}]/u;
+const LOWERCASE = /[\p{Ll}]/u;
+const LEADING_CAPITAL = /^[\p{Lu}](?![\p{Lu}])/gu;
+const IDENTIFIER = /([\p{Alpha}\p{N}_]|$)/u;
+const SEPARATORS = /[_.\- ]+/;
+
+const LEADING_SEPARATORS = new RegExp('^' + SEPARATORS.source);
+const SEPARATORS_AND_IDENTIFIER = new RegExp(SEPARATORS.source + IDENTIFIER.source, 'gu');
+const NUMBERS_AND_IDENTIFIER = new RegExp('\\d+' + IDENTIFIER.source, 'gu');
+
+const preserveCamelCase = (string, toLowerCase, toUpperCase) => {
+	let isLastCharLower = false;
+	let isLastCharUpper = false;
+	let isLastLastCharUpper = false;
+
+	for (let i = 0; i < string.length; i++) {
+		const character = string[i];
+
+		if (isLastCharLower && UPPERCASE.test(character)) {
+			string = string.slice(0, i) + '-' + string.slice(i);
+			isLastCharLower = false;
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = true;
+			i++;
+		} else if (isLastCharUpper && isLastLastCharUpper && LOWERCASE.test(character)) {
+			string = string.slice(0, i - 1) + '-' + string.slice(i - 1);
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = false;
+			isLastCharLower = true;
+		} else {
+			isLastCharLower = toLowerCase(character) === character && toUpperCase(character) !== character;
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = toUpperCase(character) === character && toLowerCase(character) !== character;
+		}
+	}
+
+	return string;
+};
+
+const preserveConsecutiveUppercase = (input, toLowerCase) => {
+	LEADING_CAPITAL.lastIndex = 0;
+
+	return input.replace(LEADING_CAPITAL, m1 => toLowerCase(m1));
+};
+
+const postProcess = (input, toUpperCase) => {
+	SEPARATORS_AND_IDENTIFIER.lastIndex = 0;
+	NUMBERS_AND_IDENTIFIER.lastIndex = 0;
+
+	return input.replace(SEPARATORS_AND_IDENTIFIER, (_, identifier) => toUpperCase(identifier))
+		.replace(NUMBERS_AND_IDENTIFIER, m => toUpperCase(m));
+};
+
+const camelCase = (input, options) => {
+	if (!(typeof input === 'string' || Array.isArray(input))) {
+		throw new TypeError('Expected the input to be `string | string[]`');
+	}
+
+	options = {
+		pascalCase: false,
+		preserveConsecutiveUppercase: false,
+		...options
+	};
+
+	if (Array.isArray(input)) {
+		input = input.map(x => x.trim())
+			.filter(x => x.length)
+			.join('-');
+	} else {
+		input = input.trim();
+	}
+
+	if (input.length === 0) {
+		return '';
+	}
+
+	const toLowerCase = options.locale === false ?
+		string => string.toLowerCase() :
+		string => string.toLocaleLowerCase(options.locale);
+	const toUpperCase = options.locale === false ?
+		string => string.toUpperCase() :
+		string => string.toLocaleUpperCase(options.locale);
+
+	if (input.length === 1) {
+		return options.pascalCase ? toUpperCase(input) : toLowerCase(input);
+	}
+
+	const hasUpperCase = input !== toLowerCase(input);
+
+	if (hasUpperCase) {
+		input = preserveCamelCase(input, toLowerCase, toUpperCase);
+	}
+
+	input = input.replace(LEADING_SEPARATORS, '');
+
+	if (options.preserveConsecutiveUppercase) {
+		input = preserveConsecutiveUppercase(input, toLowerCase);
+	} else {
+		input = toLowerCase(input);
+	}
+
+	if (options.pascalCase) {
+		input = toUpperCase(input.charAt(0)) + input.slice(1);
+	}
+
+	return postProcess(input, toUpperCase);
+};
+
+camelcase$1.exports = camelCase;
+// TODO: Remove this for the next major release
+camelcase$1.exports.default = camelCase;
+
+var camelcase = camelcase$1.exports;
+
+var defaultContext = { surface: "light" };
+var Context = 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, props = __rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical"]);
+    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.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--growVertically"] = growVertically,
+                _b["arc-Surface--padding".concat(padding)] = padding,
+                _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
+                _b["arc-Surface--paddingVertical".concat(paddingVertical)] = paddingVertical,
+                _b)) }, 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 = __spreadArray([], backgroundsShared, true);
+var backgroundsBT = __spreadArray([], backgroundsShared, true);
+
+export { Context as C, Surface as S, backgroundsBT as a, backgrounds as b, camelcase as c };

package/dist/_shared/esm/{Tabs-21ac7dfe.js → Tabs-028cee5d.js}

@@ -1,14 +1,13 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.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 { e as $c512c27ab02ef895$export$50c7b4e9d9f19c1, _ as _extends, $ as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, g as $71cd76cc60e0454e$export$6f32135080cb4c3, c as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, b as $e42e1063c40fb3ef$export$b9ecd428b558ff10 } from './index-3a2c1ceb.js';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-61497bd9.js';
+import { $ as $f631663db3294ace$export$b39126d51d94e6f3, a as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-fb8b9df7.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-d083425f.js';
+import { I as Icon } from './Icon-428e8061.js';
+import { C as Context } from './Surface-c425e5e6.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
+import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
 
 const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
 const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
@@ -392,8 +391,8 @@ var Tab = function (_a) {
 };
 
 var TabContent = function (_a) {
-    var children = _a.children, value = _a.value;
-    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-Tab-content", value: value }, children));
+    var children = _a.children, value = _a.value, props = __rest(_a, ["children", "value"]);
+    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, __assign({ className: "arc-Tab-content", value: value }, filterDataAttrs(props)), children));
 };
 
 var TabsList = function (_a) {

package/dist/_shared/esm/{Tag-2513c185.js → Tag-1ae027ee.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.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';
+import { I as Icon } from './Icon-428e8061.js';
+import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
 
 /**
  * Use `Tag` to promote features and manage filtering.
@@ -30,7 +30,7 @@ var Tag = function (_a) {
             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" },
+        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(ThemeIcon, { icon: "tagRemove", color: "brand", size: 20 }),
             React__default.createElement(ThemeIcon, { icon: "tagRemoveInteractive", color: "brand", size: 20 })))));
 };

package/dist/_shared/esm/{Text-a46fb76b.js → Text-96d8a35f.js}

@@ -1,8 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
-import { C as Context } from './Surface-71d21a9e.js';
+import { C as Context } from './Surface-c425e5e6.js';
 
 /**
  * Use `Text` to display text.

package/dist/_shared/esm/{TextInput-94c7b1a4.js → TextInput-8e3b81bf.js}

@@ -1,10 +1,10 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.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';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-e0acdf7a.js';
+import { C as Context } from './Surface-c425e5e6.js';
+import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
+import { I as Icon } from './Icon-428e8061.js';
 
 /**
  * Infer the correct inputMode, pattern and type if specifying a `number` type.

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

@@ -1,8 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
-import { C as Context } from './Surface-71d21a9e.js';
+import { C as Context } from './Surface-c425e5e6.js';
 
 var ThemeIcon = function (_a) {
     var _b;

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

@@ -1,13 +1,12 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.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 { $ as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, b as $e42e1063c40fb3ef$export$b9ecd428b558ff10, c as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, d as $8927f6f2acc4f386$export$6d1a0317bde7de7f, e as $c512c27ab02ef895$export$50c7b4e9d9f19c1, f as $9f79659886946c16$export$e5c5a5f917a5871c, g as $71cd76cc60e0454e$export$6f32135080cb4c3 } from './index-3a2c1ceb.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 { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-61497bd9.js';
+import { $ as $addc16e1bbe58fd0$export$3a72a57244d6e765, a as $ea1ef594cf570d83$export$439d29a4e110a164 } from './index-f6cc48d2.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-d083425f.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
+import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
 
 const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
 const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';

package/dist/_shared/esm/{UniversalHeader-456ad60c.js → UniversalHeader-22ff848b.js}

@@ -1,13 +1,13 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default from 'react';
-import { S as Surface } from './Surface-71d21a9e.js';
+import { S as Surface } from './Surface-c425e5e6.js';
 
 /**
  * Use `UniversalHeader` to display a group-level page header.
  */
 var UniversalHeader = function (_a) {
     var children = _a.children, ContentSlot = _a.ContentSlot, props = __rest(_a, ["children", "ContentSlot"]);
-    return (React__default.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
+    return (React__default.createElement("nav", __assign({ className: "arc-UniversalHeader", "aria-label": "universial navigation" }, filterDataAttrs(props)),
         React__default.createElement(Surface, { background: "light-neutral-02" },
             React__default.createElement("ul", { className: "arc-UniversalHeader-items" },
                 children,