@arc-ui/components 12.0.0-beta.22 → 12.0.0-beta.24

package/lib/_shared/cjs/{FormControl-BPnKQrCm.cjs → FormControl-DiERJpGW.cjs}

@@ -1,12 +1,13 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var DisclosureMini = require('./DisclosureMini-CtvDxVaG.cjs');
-var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
-var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var DisclosureMini = require('./DisclosureMini-KEuIc8tE.cjs');
+var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
@@ -45,14 +46,14 @@ var Provider = Context.Provider;
  */
 var FormControl = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.elementType, ElementType = _c === void 0 ? "div" : _c, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, _e = _a.labelPosition, labelPosition = _e === void 0 ? "top" : _e, _f = _a.requirementStatus, requirementStatus = _f === void 0 ? "optional" : _f, _g = _a.helperUnderLabel, helperUnderLabel = _g === void 0 ? false : _g, isDisabled = _a.isDisabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = filterAttrs.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var children = _a.children, _c = _a.elementType, ElementType = _c === void 0 ? "div" : _c, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, _e = _a.labelPosition, labelPosition = _e === void 0 ? "top" : _e, _f = _a.requirementStatus, requirementStatus = _f === void 0 ? "optional" : _f, _g = _a.helperUnderLabel, helperUnderLabel = _g === void 0 ? false : _g, isDisabled = _a.isDisabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _j = _a.isErrorAlert, isErrorAlert = _j === void 0 ? false : _j, props = tslib_es6.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure", "isErrorAlert"]);
     var surface = React.useContext(Surface.Context).surface;
-    var _j = useAriaDescribedby({
+    var _k = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id, // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError, idHelper = _j.idHelper, idDisclosure = _j.idDisclosure;
+    }), ariaDescribedby = _k.ariaDescribedby, idError = _k.idError, idHelper = _k.idHelper, idDisclosure = _k.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -72,7 +73,7 @@ var FormControl = function (_a) {
         ? Boolean(errorMessage || disclosureTitle || supplementaryInfo)
         : Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
     return (React.createElement(Provider, { value: { requirementStatus: requirementStatus } },
-        React.createElement(ElementType, filterAttrs.__assign({ className: index.classNames((_b = {
+        React.createElement(ElementType, tslib_es6.__assign({ className: index.classNames((_b = {
                     "arc-FormControl": true,
                     "arc-FormControl--isDisabled": isDisabled,
                     "arc-FormControl--onDarkSurface": surface === "dark",
@@ -81,19 +82,20 @@ var FormControl = function (_a) {
                 _b["arc-FormControl--".concat(labelSize)] = labelSize !== "l",
                 _b)), id: id }, elementProps, filterAttrs.filterAttrs(props)),
             hideLabel === true ? (React.createElement(VisuallyHidden.VisuallyHidden, null,
-                React.createElement(LabelType, filterAttrs.__assign({ className: index.classNames("arc-FormControl-label", {
+                React.createElement(LabelType, tslib_es6.__assign({ className: index.classNames("arc-FormControl-label", {
                         "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
                     }) }, labelProps),
                     label && (React.createElement("span", { className: index.classNames("arc-FormControl-labelText", {
                             "arc-FormControl-labelText--withOptional": requirementStatus === "optional",
                         }) }, label)),
-                    requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))) : (React.createElement(LabelType, filterAttrs.__assign({ className: index.classNames("arc-FormControl-label", {
+                    requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))) : (React.createElement(LabelType, tslib_es6.__assign({ className: index.classNames("arc-FormControl-label", {
                     "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
                 }) }, labelProps),
                 label && (React.createElement("span", { className: index.classNames("arc-FormControl-labelText", {
                         "arc-FormControl-labelText--withOptional": requirementStatus === "optional",
                     }) }, label)),
-                requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))),
+                requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")),
+                LabelType === "legend" && (React.createElement(VisuallyHidden.VisuallyHidden, null, "".concat(errorMessage ? "Error. " + errorMessage : "", ". ").concat(helper))))),
             helperUnderLabel && helper && (React.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)),
             children,
             React.createElement("div", { className: index.classNames("arc-FormControl-info", {
@@ -101,8 +103,9 @@ var FormControl = function (_a) {
                 }) },
                 ((helper && !helperUnderLabel) ||
                     errorMessage ||
-                    disclosureTitle) && (React.createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React.createElement("div", { className: "arc-FormControl-error", id: idError },
+                    disclosureTitle) && (React.createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React.createElement("div", { className: "arc-FormControl-error", id: idError, role: isErrorAlert ? "alert" : undefined },
                     React.createElement("span", { className: "arc-FormControl-error--icon" },
+                        React.createElement(VisuallyHidden.VisuallyHidden, null, "Error."),
                         React.createElement(ThemeIcon.ThemeIcon, { icon: "formControlAlert" })),
                     errorMessage)) : (!helperUnderLabel &&
                     (disclosureTitle ? (React.createElement(DisclosureMini.DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize === "m" ? "l" : labelSize, id: idDisclosure }, disclosureText)) : (helper && (React.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),

package/lib/_shared/cjs/GridRow-l_SePUqV.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
+
+/**
+ * Use `Grid` to compose layouts on a 12-column grid. Aligns with sibling `Section` components.
+ */
+var Grid = function (_a) {
+    var children = _a.children, isFluid = _a.isFluid, isDebugVisible = _a.isDebugVisible, isGutterless = _a.isGutterless, _b = _a.isExtended, isExtended = _b === void 0 ? false : _b, props = tslib_es6.__rest(_a, ["children", "isFluid", "isDebugVisible", "isGutterless", "isExtended"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames("arc-Grid", {
+            "arc-Grid--regular": !isExtended,
+            "arc-Grid--extended": isExtended,
+            "arc-Grid--fluid": isFluid,
+            "arc-Grid--debugVisible": isDebugVisible,
+            "arc-Grid--gutterless": isGutterless,
+        }) }, filterAttrs.filterAttrs(props)),
+        React.createElement("div", { className: "arc-Grid-inner" }, children)));
+};
+
+var BREAKPOINTS = ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];
+
+var GridCol = function (_a) {
+    var order = _a.order, offset = _a.offset, align = _a.align, children = _a.children, props = tslib_es6.__rest(_a, ["order", "offset", "align", "children"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames("arc-Grid-col", BREAKPOINTS.reduce(function (acc, bp) {
+            var _a;
+            var sizeValue = props === null || props === void 0 ? void 0 : props[bp];
+            var orderValue = order === null || order === void 0 ? void 0 : order[bp];
+            var offsetValue = offset === null || offset === void 0 ? void 0 : offset[bp];
+            var alignValue = align === null || align === void 0 ? void 0 : align[bp];
+            return tslib_es6.__assign(tslib_es6.__assign({}, acc), (_a = {}, _a["arc-Grid-col--".concat(bp).concat(sizeValue)] = sizeValue !== undefined, _a["arc-Grid-order--".concat(bp).concat(orderValue)] = orderValue !== undefined, _a["arc-Grid-offset--".concat(bp).concat(offsetValue)] = offsetValue !== undefined, _a["arc-Grid-align--".concat(bp).concat(alignValue)] = alignValue !== undefined, _a));
+        }, {})) }, filterAttrs.filterAttrs(props)), children));
+};
+
+var GridRow = function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "normal" : _c, _d = _a.justify, justify = _d === void 0 ? "normal" : _d, children = _a.children, props = tslib_es6.__rest(_a, ["direction", "align", "justify", "children"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames("arc-Grid-row", "".concat(suffixModifier.suffixModifier("arc-Grid-row--direction", direction)), "".concat(suffixModifier.suffixModifier("arc-Grid-row--justify", justify)), "".concat(suffixModifier.suffixModifier("arc-Grid-row--align", align))) }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.Grid = Grid;
+exports.GridCol = GridCol;
+exports.GridRow = GridRow;

package/lib/_shared/cjs/{Heading-BEMSkLYR.cjs → Heading-CoiZ2EmD.cjs}

@@ -1,24 +1,23 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var index$1 = require('./index-DR8Rkav9.cjs');
 var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var SemanticHeading = require('./SemanticHeading-BPXN_z49.cjs');
 
 /**
  * Use `Heading` to display heading text.
  */
 var Heading = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, _e = _a.color, color = _e === void 0 ? "auto" : _e, children = _a.children, level = _a.level, isInline = _a.isInline, _f = _a.fontStyle, fontStyle = _f === void 0 ? "default" : _f, _g = _a.isResponsive, isResponsive = _g === void 0 ? true : _g, size = _a.size, id = _a.id, props = filterAttrs.__rest(_a, ["align", "casing", "color", "children", "level", "isInline", "fontStyle", "isResponsive", "size", "id"]);
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, _e = _a.color, color = _e === void 0 ? "auto" : _e, children = _a.children, level = _a.level, isInline = _a.isInline, _f = _a.fontStyle, fontStyle = _f === void 0 ? "default" : _f, _g = _a.isResponsive, isResponsive = _g === void 0 ? true : _g, _h = _a.isWordWrap, isWordWrap = _h === void 0 ? true : _h, size = _a.size, id = _a.id, props = tslib_es6.__rest(_a, ["align", "casing", "color", "children", "level", "isInline", "fontStyle", "isResponsive", "isWordWrap", "size", "id"]);
     var surface = React.useContext(Surface.Context).surface;
-    var Element = "span";
-    if (level) {
-        Element = "h".concat(level);
-    }
-    return (React.createElement(Element, filterAttrs.__assign({ id: id, className: index.classNames(" arc-Heading arc-Heading--".concat(index$1.camelcase(fontStyle)), (_b = {
+    return (React.createElement(SemanticHeading.SemanticHeading, tslib_es6.__assign({ id: id, level: level, className: index.classNames("arc-Heading", "arc-Heading--".concat(index$1.camelcase(fontStyle)), (_b = {
+                "arc-Heading--wrap": isWordWrap,
                 "arc-Heading--inline": isInline,
                 "arc-Heading--fixedSize": isResponsive === false
             },

package/lib/_shared/cjs/{Hidden-Vsv1-xWO.cjs → Hidden-BN0Q0NpZ.cjs}

@@ -1,12 +1,13 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 
 var Hidden = function (_a) {
-    var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, xxl = _a.xxl, props = filterAttrs.__rest(_a, ["children", "xs", "s", "m", "l", "xl", "xxl"]);
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames({
+    var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, xxl = _a.xxl, props = tslib_es6.__rest(_a, ["children", "xs", "s", "m", "l", "xl", "xxl"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames({
             "arc-Hidden--xs": xs,
             "arc-Hidden--s": s,
             "arc-Hidden--m": m,

package/lib/_shared/cjs/{Icon-CzhyKqMd.cjs → Icon-Dk2XHa7V.cjs}

@@ -1,20 +1,21 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
 
 /**
  * Use `Icon` to display brand iconography.
  */
 var Icon = function (_a) {
     var _b;
-    var testId = _a.testId, icon = _a.icon, label = _a.label, size = _a.size, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.isInline, isInline = _d === void 0 ? false : _d, props = filterAttrs.__rest(_a, ["testId", "icon", "label", "size", "color", "isInline"]);
+    var testId = _a.testId, icon = _a.icon, label = _a.label, size = _a.size, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.isInline, isInline = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["testId", "icon", "label", "size", "color", "isInline"]);
     var surface = React.useContext(Surface.Context).surface;
     var iconUrl = icon ? "url(\"".concat(icon, "\")") : undefined;
-    return (React.createElement("span", filterAttrs.__assign({ "data-testid": testId, "aria-label": label, role: label ? "img" : undefined, className: index.classNames((_b = {},
+    return (React.createElement("span", tslib_es6.__assign({ "data-testid": testId, "aria-label": label, role: label ? "img" : undefined, className: index.classNames((_b = {},
             _b["arc-Icon"] = true,
             _b["arc-Icon--inline"] = isInline,
             _b[suffixModifier.suffixModifier("arc-Icon--color", color)] = color !== "auto",

package/lib/_shared/cjs/{Image-C1pcrfnN.cjs → Image-CSe0KpDN.cjs}

@@ -1,9 +1,10 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 
 /**
  * Use `Image` to render a single image, or set of images, with support for
@@ -11,7 +12,7 @@ var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
  */
 var Image = function (_a) {
     var _b;
-    var alt = _a.alt, _c = _a.fadeOnLoad, fadeOnLoad = _c === void 0 ? false : _c, _d = _a.anchor, anchor = _d === void 0 ? "C" : _d, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = filterAttrs.__rest(_a, ["alt", "fadeOnLoad", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
+    var alt = _a.alt, _c = _a.fadeOnLoad, fadeOnLoad = _c === void 0 ? false : _c, _d = _a.anchor, anchor = _d === void 0 ? "C" : _d, children = _a.children, fetchPriority = _a.fetchPriority, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = tslib_es6.__rest(_a, ["alt", "fadeOnLoad", "anchor", "children", "fetchPriority", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
     var _e = React.useState(false), visible = _e[0], setVisible = _e[1];
     var imageRef = function (el) {
         if (el) {
@@ -22,21 +23,21 @@ var Image = function (_a) {
         "arc-Image-img--fade": fadeOnLoad,
         "arc-Image-img--fadeVisible": fadeOnLoad && visible,
     };
-    var img = (React.createElement("img", { ref: imageRef, className: index.classNames("arc-Image-img", animationClasses), alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames((_b = {
+    var img = (React.createElement("img", { ref: imageRef, className: index.classNames("arc-Image-img", animationClasses), alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width, fetchPriority: fetchPriority }));
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"
             },
             _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
             _b[suffixModifier.suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
-            _b)), style: filterAttrs.__assign(filterAttrs.__assign(filterAttrs.__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterAttrs.filterAttrs(props)), children ? (React.createElement("picture", null,
+            _b)), style: tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterAttrs.filterAttrs(props)), children ? (React.createElement("picture", null,
         children,
         " ",
         img)) : (React.createElement(React.Fragment, null, img))));
 };
 var ImageSource = function (_a) {
-    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type, props = filterAttrs.__rest(_a, ["height", "media", "srcSet", "sizes", "type"]);
-    return (React.createElement("source", filterAttrs.__assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterAttrs.filterAttrs(props))));
+    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type, props = tslib_es6.__rest(_a, ["height", "media", "srcSet", "sizes", "type"]);
+    return (React.createElement("source", tslib_es6.__assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterAttrs.filterAttrs(props))));
 };
 var fitOptions = ["cover"];
 var loadingOptions = ["eager", "lazy"];

package/lib/_shared/cjs/{Link-7xUgVf1I.cjs → Link-PWpx-rRO.cjs}

@@ -1,17 +1,18 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
-var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
 
 /**
  * Use `Link` to direct users to a new page or piece of information.
  */
 var Link = function (_a) {
-    var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = filterAttrs.__rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
+    var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = tslib_es6.__rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
     var surface = React.useContext(Surface.Context).surface;
     var isExternalLink = target === "_blank";
     var textArray = children.split(" ");
@@ -27,13 +28,15 @@ var Link = function (_a) {
         }),
     };
     var elementProps = {
-        a: filterAttrs.__assign(filterAttrs.__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
-        button: filterAttrs.__assign({}, commonProps),
-        span: filterAttrs.__assign({}, commonProps),
+        a: tslib_es6.__assign(tslib_es6.__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
+        button: tslib_es6.__assign({}, commonProps),
+        span: tslib_es6.__assign({}, commonProps),
     };
     var LinkElement = isButton ? "button" : href ? "a" : "span";
-    return (React.createElement(LinkElement, filterAttrs.__assign({}, elementProps[LinkElement], filterAttrs.filterAttrs(props)),
-        React.createElement("div", { className: "arc-Link-wrapper" },
+    return (React.createElement(LinkElement, tslib_es6.__assign({}, elementProps[LinkElement], filterAttrs.filterAttrs(props)),
+        React.createElement("div", { className: index.classNames("arc-Link-wrapper", {
+                "arc-Link--isButton": isButton,
+            }) },
             React.createElement(VisuallyHidden.VisuallyHidden, null,
                 screenReaderText || children,
                 isExternalLink && " (Opens in new window)"),

package/lib/_shared/cjs/{Popover-C5mmMkYU.cjs → Popover-hpvmhKV8.cjs}

@@ -1,18 +1,19 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index$2 = require('./index-CTlXMLug.cjs');
-var index$1 = require('./index-CaO6cOF0.cjs');
+var index$1 = require('./index-BWfgSvRQ.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 var index = require('./index-DXNM3D1d.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
 
 /** Use `Popover` to display content in a portal, triggered by a button. */
 var Popover = function (_a) {
-    var align = _a.align, ariaLabel = _a.ariaLabel, alignOffset = _a.alignOffset, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, content = _a.content, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 452 : _e, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, side = _a.side, _f = _a.sideOffset, sideOffset = _f === void 0 ? 0 : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.hideWhenDetached, hideWhenDetached = _h === void 0 ? false : _h, _j = _a.useBespokeTrigger, useBespokeTrigger = _j === void 0 ? false : _j, props = filterAttrs.__rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger"]);
-    var _k = index.useThemeElement(), themeElement = _k[0], setThemeElement = _k[1];
+    var align = _a.align, ariaLabel = _a.ariaLabel, alignOffset = _a.alignOffset, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, content = _a.content, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 452 : _e, minHeight = _a.minHeight, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, _f = _a.constrainToViewport, constrainToViewport = _f === void 0 ? true : _f, side = _a.side, _g = _a.sideOffset, sideOffset = _g === void 0 ? 0 : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, _j = _a.hideWhenDetached, hideWhenDetached = _j === void 0 ? false : _j, _k = _a.useBespokeTrigger, useBespokeTrigger = _k === void 0 ? false : _k, props = tslib_es6.__rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "minHeight", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "constrainToViewport", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger"]);
+    var _l = index.useThemeElement(), themeElement = _l[0], setThemeElement = _l[1];
     var alignOffsetDefault = align === "center" ? 0 : -16;
-    return (React.createElement("div", filterAttrs.__assign({ className: "arc-Popover" }, filterAttrs.filterAttrs(props)),
+    return (React.createElement("div", tslib_es6.__assign({ className: "arc-Popover" }, filterAttrs.filterAttrs(props)),
         React.createElement(index$1.Root2, { open: open, onOpenChange: onOpenChange },
             useBespokeTrigger ? (React.createElement(index$1.Anchor2, { className: "arc-Popover-anchor" }, children)) : (React.createElement(index$1.Trigger, { "aria-label": ariaLabel, asChild: asChild, className: "arc-Popover-trigger" }, children)),
             React.createElement("div", { ref: setThemeElement },
@@ -23,7 +24,8 @@ var Popover = function (_a) {
                                 React.createElement("div", { className: index$2.classNames("arc-Popover-content", {
                                         "arc-Popover-content--dark": background === "dark",
                                         "arc-Popover-content--brand": background === "brand",
-                                    }), style: { maxWidth: maxWidth }, "aria-labelledby": "popover-content" },
+                                        "arc-Popover-content--constrainToViewport": constrainToViewport,
+                                    }), style: { maxWidth: maxWidth, minHeight: minHeight }, "aria-labelledby": "popover-content" },
                                     content && React.createElement("div", { id: "popover-content" }, content),
                                     arrow && (React.createElement(index$1.PopoverArrow, { className: "arc-Popover-arrow" })))))))))));
 };

package/lib/_shared/cjs/{ProgressStepper-BL9Y5c4X.cjs → ProgressStepper-DTZQabiV.cjs}

@@ -1,12 +1,144 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var index$1 = require('./index-CqYNiqix.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 var capitaliseFirstLetter = require('./capitalise-first-letter-CdhexpSx.cjs');
-var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
-var Icon = require('./Icon-CzhyKqMd.cjs');
+var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
+var Icon = require('./Icon-Dk2XHa7V.cjs');
+
+var shorterCssColorNames;
+var hasRequiredShorterCssColorNames;
+
+function requireShorterCssColorNames () {
+	if (hasRequiredShorterCssColorNames) return shorterCssColorNames;
+	hasRequiredShorterCssColorNames = 1;
+	shorterCssColorNames = {
+	  aqua: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
+	  azure: /#f0ffff(ff)?(?!\w)/gi,
+	  beige: /#f5f5dc(ff)?(?!\w)/gi,
+	  bisque: /#ffe4c4(ff)?(?!\w)/gi,
+	  black: /#000000(ff)?(?!\w)|#000(f)?(?!\w)/gi,
+	  blue: /#0000ff(ff)?(?!\w)|#00f(f)?(?!\w)/gi,
+	  brown: /#a52a2a(ff)?(?!\w)/gi,
+	  coral: /#ff7f50(ff)?(?!\w)/gi,
+	  cornsilk: /#fff8dc(ff)?(?!\w)/gi,
+	  crimson: /#dc143c(ff)?(?!\w)/gi,
+	  cyan: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
+	  darkblue: /#00008b(ff)?(?!\w)/gi,
+	  darkcyan: /#008b8b(ff)?(?!\w)/gi,
+	  darkgrey: /#a9a9a9(ff)?(?!\w)/gi,
+	  darkred: /#8b0000(ff)?(?!\w)/gi,
+	  deeppink: /#ff1493(ff)?(?!\w)/gi,
+	  dimgrey: /#696969(ff)?(?!\w)/gi,
+	  gold: /#ffd700(ff)?(?!\w)/gi,
+	  green: /#008000(ff)?(?!\w)/gi,
+	  grey: /#808080(ff)?(?!\w)/gi,
+	  honeydew: /#f0fff0(ff)?(?!\w)/gi,
+	  hotpink: /#ff69b4(ff)?(?!\w)/gi,
+	  indigo: /#4b0082(ff)?(?!\w)/gi,
+	  ivory: /#fffff0(ff)?(?!\w)/gi,
+	  khaki: /#f0e68c(ff)?(?!\w)/gi,
+	  lavender: /#e6e6fa(ff)?(?!\w)/gi,
+	  lime: /#00ff00(ff)?(?!\w)|#0f0(f)?(?!\w)/gi,
+	  linen: /#faf0e6(ff)?(?!\w)/gi,
+	  maroon: /#800000(ff)?(?!\w)/gi,
+	  moccasin: /#ffe4b5(ff)?(?!\w)/gi,
+	  navy: /#000080(ff)?(?!\w)/gi,
+	  oldlace: /#fdf5e6(ff)?(?!\w)/gi,
+	  olive: /#808000(ff)?(?!\w)/gi,
+	  orange: /#ffa500(ff)?(?!\w)/gi,
+	  orchid: /#da70d6(ff)?(?!\w)/gi,
+	  peru: /#cd853f(ff)?(?!\w)/gi,
+	  pink: /#ffc0cb(ff)?(?!\w)/gi,
+	  plum: /#dda0dd(ff)?(?!\w)/gi,
+	  purple: /#800080(ff)?(?!\w)/gi,
+	  red: /#ff0000(ff)?(?!\w)|#f00(f)?(?!\w)/gi,
+	  salmon: /#fa8072(ff)?(?!\w)/gi,
+	  seagreen: /#2e8b57(ff)?(?!\w)/gi,
+	  seashell: /#fff5ee(ff)?(?!\w)/gi,
+	  sienna: /#a0522d(ff)?(?!\w)/gi,
+	  silver: /#c0c0c0(ff)?(?!\w)/gi,
+	  skyblue: /#87ceeb(ff)?(?!\w)/gi,
+	  snow: /#fffafa(ff)?(?!\w)/gi,
+	  tan: /#d2b48c(ff)?(?!\w)/gi,
+	  teal: /#008080(ff)?(?!\w)/gi,
+	  thistle: /#d8bfd8(ff)?(?!\w)/gi,
+	  tomato: /#ff6347(ff)?(?!\w)/gi,
+	  violet: /#ee82ee(ff)?(?!\w)/gi,
+	  wheat: /#f5deb3(ff)?(?!\w)/gi,
+	  white: /#ffffff(ff)?(?!\w)|#fff(f)?(?!\w)/gi,
+	};
+	return shorterCssColorNames;
+}
+
+var miniSvgDataUri;
+var hasRequiredMiniSvgDataUri;
+
+function requireMiniSvgDataUri () {
+	if (hasRequiredMiniSvgDataUri) return miniSvgDataUri;
+	hasRequiredMiniSvgDataUri = 1;
+	var shorterNames = requireShorterCssColorNames();
+	var REGEX = {
+	  whitespace: /\s+/g,
+	  urlHexPairs: /%[\dA-F]{2}/g,
+	  quotes: /"/g,
+	};
+
+	function collapseWhitespace(str) {
+	  return str.trim().replace(REGEX.whitespace, ' ');
+	}
+
+	function dataURIPayload(string) {
+	  return encodeURIComponent(string)
+	    .replace(REGEX.urlHexPairs, specialHexEncode);
+	}
+
+	// `#` gets converted to `%23`, so quite a few CSS named colors are shorter than
+	// their equivalent URL-encoded hex codes.
+	function colorCodeToShorterNames(string) {
+	  Object.keys(shorterNames).forEach(function(key) {
+	    if (shorterNames[key].test(string)) {
+	      string = string.replace(shorterNames[key], key);
+	    }
+	  });
+
+	  return string;
+	}
+
+	function specialHexEncode(match) {
+	  switch (match) { // Browsers tolerate these characters, and they're frequent
+	    case '%20': return ' ';
+	    case '%3D': return '=';
+	    case '%3A': return ':';
+	    case '%2F': return '/';
+	    default: return match.toLowerCase(); // compresses better
+	  }
+	}
+
+	function svgToTinyDataUri(svgString) {
+	  if (typeof svgString !== 'string') {
+	    throw new TypeError('Expected a string, but received ' + typeof svgString);
+	  }
+	  // Strip the Byte-Order Mark if the SVG has one
+	  if (svgString.charCodeAt(0) === 0xfeff) { svgString = svgString.slice(1); }
+
+	  var body = colorCodeToShorterNames(collapseWhitespace(svgString))
+	    .replace(REGEX.quotes, "'");
+	  return 'data:image/svg+xml,' + dataURIPayload(body);
+	}
+
+	svgToTinyDataUri.toSrcset = function toSrcset(svgString) {
+	  return svgToTinyDataUri(svgString).replace(/ /g, '%20');
+	};
+
+	miniSvgDataUri = svgToTinyDataUri;
+	return miniSvgDataUri;
+}
+
+var miniSvgDataUriExports = requireMiniSvgDataUri();
+var svgToMiniDataURI = /*@__PURE__*/index.getDefaultExportFromCjs(miniSvgDataUriExports);
 
 var Error = "\n  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <g clipPath=\"url(#a)\">\n      <path\n        d=\"m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"a\">\n        <rect width=\"24\" height=\"24\" rx=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n  ";
 
@@ -18,7 +150,7 @@ var Current = "\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w
 
 var ProgressStepperItem = function (_a) {
     var _b;
-    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, invertLabelPosition = _a.invertLabelPosition, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = filterAttrs.__rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, invertLabelPosition = _a.invertLabelPosition, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = tslib_es6.__rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
     var statusIcons = {
         todo: undefined,
         completed: Complete,
@@ -31,7 +163,7 @@ var ProgressStepperItem = function (_a) {
         onClick && onClick();
     };
     var statusIcon = statusIcons[status];
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
                 "arc-ProgressStepperItem--vertical": direction === "vertical",
                 "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
                 "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
@@ -43,7 +175,7 @@ var ProgressStepperItem = function (_a) {
             React.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
                 React.createElement("span", { className: index.classNames("arc-ProgressStepperItem-statusIcon", {
                         "arc-ProgressStepperItem-statusIcon--small": size === "small",
-                    }) }, status === "todo" ? null : status === "current" ? (React.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React.createElement(Icon.Icon, { icon: statusIcon && index$1.svgToMiniDataURI(statusIcon) }))))),
+                    }) }, status === "todo" ? null : status === "current" ? (React.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React.createElement(Icon.Icon, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))))),
         React.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
             titleHref || onClick ? (React.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: index.classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
                 title,
@@ -61,16 +193,16 @@ var ProgressStepperItem = function (_a) {
 
 /** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
 var ProgressStepper = function (_a) {
-    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, ref = _a.ref, props = filterAttrs.__rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, ref = _a.ref, props = tslib_es6.__rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
     var items = React.Children.toArray(children);
     var getStepStatus = function (item) {
         var _a;
         return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
     };
-    return (React.createElement("div", filterAttrs.__assign({ ref: ref, className: index.classNames("arc-ProgressStepper", {
+    return (React.createElement("div", tslib_es6.__assign({ ref: ref, className: index.classNames("arc-ProgressStepper", {
             "arc-ProgressStepper--vertical": direction === "vertical",
         }) }, filterAttrs.filterAttrs(props)), items.map(function (item, index) { return (React.createElement(React.Fragment, { key: "StepperItem-".concat(index) },
-        React.createElement(ProgressStepperItem, filterAttrs.__assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterAttrs.filterAttrs(item.props))))); })));
+        React.createElement(ProgressStepperItem, tslib_es6.__assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterAttrs.filterAttrs(item.props))))); })));
 };
 
 exports.ProgressStepper = ProgressStepper;

package/lib/_shared/cjs/{Rule-DMQsi2L6.cjs → Rule-jmvOpci7.cjs}

@@ -1,9 +1,10 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
 
 /**
  * Use `Rule` to display a horizontal or vertical rule.
@@ -12,7 +13,7 @@ var Rule = function (_a, props) {
     var _b;
     var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
     var surface = React.useContext(Surface.Context).surface;
-    return (React.createElement("hr", filterAttrs.__assign({ className: index.classNames((_b = {
+    return (React.createElement("hr", tslib_es6.__assign({ className: index.classNames((_b = {
                 "arc-Rule": true
             },
             _b["arc-Rule--".concat(orientation)] = true,

package/lib/_shared/cjs/{Section-wUVdzmGA.cjs → Section-BorWFfNe.cjs}

@@ -1,15 +1,16 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 
 /**
  * Use `Section` to compose content into vertical page layouts.
  */
 var Section = function (_a) {
-    var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.isExtended, isExtended = _d === void 0 ? false : _d, props = filterAttrs.__rest(_a, ["children", "isFullWidth", "isDebugVisible", "isExtended"]);
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames({
+    var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.isExtended, isExtended = _d === void 0 ? false : _d, id = _a.id, props = tslib_es6.__rest(_a, ["children", "isFullWidth", "isDebugVisible", "isExtended", "id"]);
+    return (React.createElement("div", tslib_es6.__assign({ id: id, className: index.classNames({
             "arc-Section": true,
             "arc-Section--regular": !isExtended,
             "arc-Section--extended": isExtended,

package/lib/_shared/cjs/SemanticHeading-BPXN_z49.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+
+var SemanticHeading = function (_a) {
+    var children = _a.children, level = _a.level, className = _a.className, props = tslib_es6.__rest(_a, ["children", "level", "className"]);
+    return React.createElement(level ? "h".concat(level) : "span", tslib_es6.__assign({ className: index.classNames("arc-SemanticHeading", className) }, props), children);
+};
+
+exports.SemanticHeading = SemanticHeading;