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

package/lib/_shared/cjs/ClientSideVisible-BhW-T6kb.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+
+var ClientSideVisible = function (_a) {
+    var children = _a.children;
+    var _b = React.useState(false), canRender = _b[0], setCanRender = _b[1];
+    React.useEffect(function () {
+        if (typeof window !== "undefined") {
+            setCanRender(true);
+        }
+    }, [setCanRender]);
+    return (React.createElement("div", { style: { visibility: canRender ? "visible" : "hidden" } }, children));
+};
+
+exports.ClientSideVisible = ClientSideVisible;

package/lib/_shared/cjs/{Combination-B-rSVLfT.cjs → Combination-6m6aOXZq.cjs}

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./index-DXNM3D1d.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var ReactDOM = require('react-dom');
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -941,12 +941,12 @@ function innerCreateMedium(defaults, middleware) {
 function createSidecarMedium(options) {
     if (options === void 0) { options = {}; }
     var medium = innerCreateMedium(null);
-    medium.options = filterAttrs.__assign({ async: true, ssr: false }, options);
+    medium.options = tslib_es6.__assign({ async: true, ssr: false }, options);
     return medium;
 }
 
 var SideCar$1 = function (_a) {
-    var sideCar = _a.sideCar, rest = filterAttrs.__rest(_a, ["sideCar"]);
+    var sideCar = _a.sideCar, rest = tslib_es6.__rest(_a, ["sideCar"]);
     if (!sideCar) {
         throw new Error('Sidecar: please provide `sideCar` property to import the right car');
     }
@@ -954,7 +954,7 @@ var SideCar$1 = function (_a) {
     if (!Target) {
         throw new Error('Sidecar medium not found');
     }
-    return React__namespace.createElement(Target, filterAttrs.__assign({}, rest));
+    return React__namespace.createElement(Target, tslib_es6.__assign({}, rest));
 };
 SideCar$1.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -977,13 +977,13 @@ var RemoveScroll = React__namespace.forwardRef(function (props, parentRef) {
         onWheelCapture: nothing,
         onTouchMoveCapture: nothing,
     }), callbacks = _a[0], setCallbacks = _a[1];
-    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, gapMode = props.gapMode, rest = filterAttrs.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
+    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, gapMode = props.gapMode, rest = tslib_es6.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
     var SideCar = sideCar;
     var containerRef = useMergeRefs([ref, parentRef]);
-    var containerProps = filterAttrs.__assign(filterAttrs.__assign({}, rest), callbacks);
+    var containerProps = tslib_es6.__assign(tslib_es6.__assign({}, rest), callbacks);
     return (React__namespace.createElement(React__namespace.Fragment, null,
         enabled && (React__namespace.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode: gapMode })),
-        forwardProps ? (React__namespace.cloneElement(React__namespace.Children.only(children), filterAttrs.__assign(filterAttrs.__assign({}, containerProps), { ref: containerRef }))) : (React__namespace.createElement(Container, filterAttrs.__assign({}, containerProps, { className: className, ref: containerRef }), children))));
+        forwardProps ? (React__namespace.cloneElement(React__namespace.Children.only(children), tslib_es6.__assign(tslib_es6.__assign({}, containerProps), { ref: containerRef }))) : (React__namespace.createElement(Container, tslib_es6.__assign({}, containerProps, { className: className, ref: containerRef }), children))));
 });
 RemoveScroll.defaultProps = {
     enabled: true,
@@ -1319,7 +1319,7 @@ function RemoveScrollSideCar(props) {
     React__namespace.useEffect(function () {
         if (props.inert) {
             document.body.classList.add("block-interactivity-".concat(id));
-            var allow_1 = filterAttrs.__spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
+            var allow_1 = tslib_es6.__spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
             allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-".concat(id)); });
             return function () {
                 document.body.classList.remove("block-interactivity-".concat(id));
@@ -1449,7 +1449,7 @@ function getOutermostShadowParent(node) {
 
 var SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
 
-var ReactRemoveScroll = React__namespace.forwardRef(function (props, ref) { return (React__namespace.createElement(RemoveScroll, filterAttrs.__assign({}, props, { ref: ref, sideCar: SideCar }))); });
+var ReactRemoveScroll = React__namespace.forwardRef(function (props, ref) { return (React__namespace.createElement(RemoveScroll, tslib_es6.__assign({}, props, { ref: ref, sideCar: SideCar }))); });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 
 exports.DismissableLayer = DismissableLayer;

package/lib/_shared/cjs/{ContentSwitcherDropdown-U5ZTbJTe.cjs → ContentSwitcherDropdown-BtEnzdMw.cjs}

@@ -1,46 +1,57 @@
 '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-C_Rl7v2g.cjs');
-var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+var index$1 = require('./index-CDVpHNP8.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
 var index = require('./index-DXNM3D1d.cjs');
-var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
+var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
 
 // src/get-text-width/get-text-width.ts
 var getTextWidth = (text, font) => {
+  if (typeof document === "undefined") {
+    return 236;
+  }
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d");
   if (context) {
     context.font = getComputedStyle(document.body).font;
     return context.measureText(text).width;
   }
-  return 0;
+  return 236;
 };
 
 var ContentSwitcherDropdown = function (_a) {
-    var defaultValue = _a.defaultValue, tabs = _a.tabs, onValueChange = _a.onValueChange, children = _a.children, _b = _a.isInset, isInset = _b === void 0 ? false : _b, value = _a.value, ariaLabel = _a.ariaLabel, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, width = _a.width, props = filterAttrs.__rest(_a, ["defaultValue", "tabs", "onValueChange", "children", "isInset", "value", "ariaLabel", "isFluid", "width"]);
+    var defaultValue = _a.defaultValue, tabs = _a.tabs, onValueChange = _a.onValueChange, children = _a.children, _b = _a.isInset, isInset = _b === void 0 ? false : _b, value = _a.value, ariaLabel = _a.ariaLabel, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, width = _a.width, props = tslib_es6.__rest(_a, ["defaultValue", "tabs", "onValueChange", "children", "isInset", "value", "ariaLabel", "isFluid", "width"]);
     var initialValue = defaultValue || tabs[0].value;
     var _d = index.useThemeElement(), themeElement = _d[0], setThemeElement = _d[1];
     var _e = React.useState(initialValue), uncontrolledValue = _e[0], setUncontrolledValue = _e[1];
+    var _f = React.useState(236), longestLabelWidth = _f[0], setLongestLabelWidth = _f[1];
+    // compute longest width client side
+    React.useEffect(function () {
+        if (tabs.length === 0)
+            return;
+        var longestLabel = tabs.reduce(function (longest, current) {
+            return current.label.length > longest.length ? current.label : longest;
+        }, "");
+        setLongestLabelWidth(getTextWidth(longestLabel));
+    }, [tabs]);
     var isControlled = typeof value !== "undefined";
     var selectValue = isControlled ? value : uncontrolledValue;
     var onValueChangeHandler = function (value) {
         onValueChange && onValueChange(value);
         setUncontrolledValue(value);
     };
-    var LongestLabelWidth = getTextWidth(tabs.reduce(function (longest, current) {
-        return current.label.length > longest.length ? current.label : longest;
-    }, ""));
     return (React.createElement(React.Fragment, null,
         React.createElement(index$1.Root2, { defaultValue: defaultValue, onValueChange: onValueChangeHandler, value: selectValue },
-            React.createElement("span", filterAttrs.__assign({ className: index$2.classNames("arc-ContentSwitcherDropdown-selectTriggerWrapper", {
+            React.createElement("span", tslib_es6.__assign({ className: index$2.classNames("arc-ContentSwitcherDropdown-selectTriggerWrapper", {
                     "arc-ContentSwitcherDropdown-selectTriggerWrapper--isInset": isInset,
                     "arc-ContentSwitcherDropdown-selectTriggerWrapper--isFluid": isFluid,
                 }), ref: setThemeElement }, (!isFluid && {
                 style: {
-                    width: width ? width : LongestLabelWidth + 84,
+                    width: width ? width : longestLabelWidth + 84,
                 },
             }), filterAttrs.filterAttrs(props)),
                 React.createElement(index$1.Trigger, { className: "arc-ContentSwitcherDropdown-selectTrigger", "aria-label": ariaLabel },
@@ -61,7 +72,7 @@ var ContentSwitcherDropdown = function (_a) {
                 return null;
             }
             var isActive = child.props.value === selectValue;
-            return (React.createElement("div", filterAttrs.__assign({ role: "tabpanel", className: "arc-ContentSwitcherDropdown-content", id: "arc-content-switcher-dropdown-content-".concat(child.props.value), "aria-labelledby": "arc-content-switcher-dropdown-trigger-".concat(child.props.value), "data-state": isActive ? "active" : "inactive", tabIndex: -1, hidden: !isActive }, filterAttrs.filterAttrs(child.props)), child));
+            return (React.createElement("div", tslib_es6.__assign({ role: "tabpanel", className: "arc-ContentSwitcherDropdown-content", id: "arc-content-switcher-dropdown-content-".concat(child.props.value), "aria-labelledby": "arc-content-switcher-dropdown-trigger-".concat(child.props.value), "data-state": isActive ? "active" : "inactive", tabIndex: -1, hidden: !isActive }, filterAttrs.filterAttrs(child.props)), child));
         })));
 };
 var ContentSwitcherDropdownContent = function (_a) {

package/lib/_shared/cjs/{ContentSwitcherList-pcYtuT6L.cjs → ContentSwitcherList-BgAW2IhJ.cjs}

@@ -1,33 +1,34 @@
 '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-BCu-VH8y.cjs');
-var Text = require('./Text-Cr5nmYmx.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Text = require('./Text-jwsn80lQ.cjs');
 var debounce = require('./debounce-uPMetQ6J.cjs');
 var index$1 = require('./index-CTlXMLug.cjs');
 
 /** Use `ContentSwitcher` to allow users to navigate between different sections of relevant content. */
 var ContentSwitcher = function (_a) {
-    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, value = _a.value, props = filterAttrs.__rest(_a, ["children", "defaultValue", "onValueChange", "activationMode", "value"]);
+    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, value = _a.value, props = tslib_es6.__rest(_a, ["children", "defaultValue", "onValueChange", "activationMode", "value"]);
     return (React.createElement("span", { className: "arc-ContentSwitcher" },
-        React.createElement(index.$69cb30bb0017df05$export$be92b6f5f03c0fe9, filterAttrs.__assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode, value: value }, filterAttrs.filterAttrs(props)), children)));
+        React.createElement(index.$69cb30bb0017df05$export$be92b6f5f03c0fe9, tslib_es6.__assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode, value: value }, filterAttrs.filterAttrs(props)), children)));
 };
 
 var ContentSwitcherTab = React.forwardRef(function (_a, ref) {
-    var label = _a.label, value = _a.value, onClick = _a.onClick, props = filterAttrs.__rest(_a, ["label", "value", "onClick"]);
-    return (React.createElement(index.$69cb30bb0017df05$export$41fb9f06171c75f4, filterAttrs.__assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick }, filterAttrs.filterAttrs(props)),
+    var label = _a.label, value = _a.value, onClick = _a.onClick, onFocus = _a.onFocus, props = tslib_es6.__rest(_a, ["label", "value", "onClick", "onFocus"]);
+    return (React.createElement(index.$69cb30bb0017df05$export$41fb9f06171c75f4, tslib_es6.__assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick, onFocus: onFocus }, filterAttrs.filterAttrs(props)),
         React.createElement(Text.Text, { size: "m" }, label)));
 });
 
 var ContentSwitcherContent = function (_a) {
-    var children = _a.children, value = _a.value, _b = _a.hidden, hidden = _b === void 0 ? undefined : _b, _c = _a.forceMount, forceMount = _c === void 0 ? true : _c, props = filterAttrs.__rest(_a, ["children", "value", "hidden", "forceMount"]);
-    return (React.createElement(index.$69cb30bb0017df05$export$7c6e2c02157bb7d2, filterAttrs.__assign({ className: "arc-ContentSwitcherContent", value: value, tabIndex: -1, forceMount: forceMount ? true : undefined, hidden: hidden }, filterAttrs.filterAttrs(props)),
+    var children = _a.children, value = _a.value, _b = _a.hidden, hidden = _b === void 0 ? undefined : _b, _c = _a.forceMount, forceMount = _c === void 0 ? true : _c, props = tslib_es6.__rest(_a, ["children", "value", "hidden", "forceMount"]);
+    return (React.createElement(index.$69cb30bb0017df05$export$7c6e2c02157bb7d2, tslib_es6.__assign({ className: "arc-ContentSwitcherContent", value: value, tabIndex: -1, forceMount: forceMount ? true : undefined, hidden: hidden }, filterAttrs.filterAttrs(props)),
         React.createElement("div", { className: "arc-ContentSwitcherContent-wrapper" }, children)));
 };
 
 var ContentSwitcherList = function (_a) {
-    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, isInset = _a.isInset, props = filterAttrs.__rest(_a, ["children", "type", "isJustified", "ariaLabel", "isInset"]);
+    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, isInset = _a.isInset, props = tslib_es6.__rest(_a, ["children", "type", "isJustified", "ariaLabel", "isInset"]);
     var _b = React.useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
     var _c = React.useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
     var _d = React.useState(0), contentSwitcherListWidth = _d[0], setContentSwitcherListWidth = _d[1];
@@ -79,7 +80,7 @@ var ContentSwitcherList = function (_a) {
     return (React.createElement("span", { className: index$1.classNames("arc-ContentSwitcherList-wrapper", {
             "arc-ContentSwitcherList-wrapper--isInset": isInset,
         }), tabIndex: -1 },
-        React.createElement(index.$69cb30bb0017df05$export$54c2e3dc7acea9f5, filterAttrs.__assign({ className: index$1.classNames("arc-ContentSwitcherList", {
+        React.createElement(index.$69cb30bb0017df05$export$54c2e3dc7acea9f5, tslib_es6.__assign({ className: index$1.classNames("arc-ContentSwitcherList", {
                 "arc-ContentSwitcherList--contained": type === "contained",
                 "arc-ContentSwitcherList--isJustified": isJustified,
             }), ref: listRef, "aria-label": ariaLabel }, filterAttrs.filterAttrs(props)),
@@ -90,6 +91,9 @@ var ContentSwitcherList = function (_a) {
                         onClick: function () {
                             return scrollTabIntoView({ current: tabRefs.current[index] });
                         },
+                        onFocus: function () {
+                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                        },
                     });
                 }
                 else {

package/lib/_shared/cjs/{DisclosureMini-CtvDxVaG.cjs → DisclosureMini-KEuIc8tE.cjs}

@@ -1,24 +1,25 @@
 '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 Text = require('./Text-Cr5nmYmx.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Text = require('./Text-jwsn80lQ.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
 
 /**
  * Use `DisclosureMini` to show and hide sections of content.
  */
 var DisclosureMini = function (_a) {
-    var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = filterAttrs.__rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
+    var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = tslib_es6.__rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
     var surface = React.useContext(Surface.Context).surface;
     var _e = React.useState(false), disclousreState = _e[0], setDisclosureState = _e[1];
     var handleOnClick = function () {
         onClick && onClick();
         setDisclosureState(function (prevState) { return !prevState; });
     };
-    return (React.createElement("details", filterAttrs.__assign({ "data-testid": "DisclosureMini", className: index.classNames("arc-DisclosureMini", {
+    return (React.createElement("details", tslib_es6.__assign({ "data-testid": "DisclosureMini", className: index.classNames("arc-DisclosureMini", {
             "arc-DisclosureMini--onDarkSurface": surface === "dark",
         }), open: isOpen }, filterAttrs.filterAttrs(props)),
         React.createElement("summary", { "data-testid": "DisclosureMiniSummary", className: index.classNames("arc-DisclosureMini-summary arc-DisclosureMini-summary--icon-".concat(iconPosition), {

package/lib/_shared/cjs/{Download-CrIytI74.cjs → Download-NY3tbv9Q.cjs}

@@ -1,14 +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 Text = require('./Text-Cr5nmYmx.cjs');
-var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
-var VerticalSpace = require('./VerticalSpace-BJvST6WP.cjs');
+var Text = require('./Text-jwsn80lQ.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
+var VerticalSpace = require('./VerticalSpace-DLQUYsvc.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
 
 var Download = function (_a) {
     var name = _a.name, onClick = _a.onClick, description = _a.description, href = _a.href, type = _a.type, size = _a.size, _b = _a.icon, icon = _b === void 0 ? "downloadFile" : _b, _c = _a.isCompact, isCompact = _c === void 0 ? false : _c, _d = _a.isFullWidth, isFullWidth = _d === void 0 ? true : _d;
+    var surface = React.useContext(Surface.Context).surface;
     var linkProps = href
         ? {
             href: href,
@@ -19,9 +21,10 @@ var Download = function (_a) {
         : {
             role: "button",
         };
-    return (React.createElement("a", filterAttrs.__assign({}, linkProps, { className: index.classNames("arc-Download", {
+    return (React.createElement("a", tslib_es6.__assign({}, linkProps, { className: index.classNames("arc-Download", {
             "arc-Download--maxContent": !isFullWidth,
             "arc-Download--compact": isCompact,
+            "arc-Download--onDarkSurface": surface === "dark",
         }), "aria-label": name, onClick: onClick }),
         React.createElement("div", { className: "arc-Download-iconContainer" },
             React.createElement(ThemeIcon.ThemeIcon, { size: isCompact ? 40 : 64, icon: icon })),

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-C3OSQIIk.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,12 +28,12 @@ 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)),
+    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,
             }) },