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

package/lib/_shared/cjs/{Calendar-B-va25n2.cjs → Calendar-CFUNKEyb.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 = require('./index-BLRjGROQ.cjs');
-var index_es = require('./index.es-DlNskPlN.cjs');
-var useMediaQuery = require('./use-media-query-BsUfHjPZ.cjs');
+var index_es = require('./index.es-VcVPUNjD.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var useMediaQuery = require('./use-media-query-DqZqShGX.cjs');
 var index$1 = require('./index-CTlXMLug.cjs');
-var Text = require('./Text-Cr5nmYmx.cjs');
-var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
+var Text = require('./Text-jwsn80lQ.cjs');
+var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
 require('./index-DR8Rkav9.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var Heading = require('./Heading-BEMSkLYR.cjs');
-var BtIconChevronRightMid = require('./BtIconChevronRightMid-eGxk3ae6.cjs');
-var Icon = require('./Icon-CzhyKqMd.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var Heading = require('./Heading-CoiZ2EmD.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
+var Icon = require('./Icon-Dk2XHa7V.cjs');
 
 /**
  * @name addMonths
@@ -558,7 +559,7 @@ function eachDayOfInterval(dirtyInterval, options) {
 var processSelectedRange = function (_a) {
     var range = _a.range, value = _a.value, disabledDates = _a.disabledDates;
     var exisitingRange = range.filter(function (date) { return Boolean(date); });
-    var newRange = filterAttrs.__spreadArray(filterAttrs.__spreadArray([], (exisitingRange.length === 2 ? [] : exisitingRange), true), [
+    var newRange = tslib_es6.__spreadArray(tslib_es6.__spreadArray([], (exisitingRange.length === 2 ? [] : exisitingRange), true), [
         value,
     ], false).sort(compareAsc);
     var isSelectionComplete = newRange.length === 2;
@@ -1120,7 +1121,7 @@ var CalendarDayNumber = React.forwardRef(function (_a, autoFocusRef) {
         onClick: onDayNumberClick(date),
         onMouseEnter: onDayNumberHover(date),
     };
-    return (React.createElement("td", filterAttrs.__assign({ ref: handleRefs, "data-date": date.getTime() }, (shouldRender ? tableCellProps : {}), { role: "gridcell" }), shouldRender && (React.createElement(React.Fragment, null,
+    return (React.createElement("td", tslib_es6.__assign({ ref: handleRefs, "data-date": date.getTime() }, (shouldRender ? tableCellProps : {}), { role: "gridcell" }), shouldRender && (React.createElement(React.Fragment, null,
         React.createElement(VisuallyHidden.VisuallyHidden, null, index.format(date, "MMMM do, yyyy")),
         React.createElement("div", { className: "arc-CalendarDayNumber-buttonOuter" },
             React.createElement("div", { className: "arc-CalendarDayNumber-buttonInner" },
@@ -1328,25 +1329,18 @@ var CalendarDayGrid = function (_a) {
             React.createElement("tbody", { onKeyDown: handleKeyDown }, getWeeksInMonth(month).map(function (week, i) { return (React.createElement("tr", { key: "".concat(month.getTime(), "-week-").concat(i) }, week.map(function (day) { return (React.createElement(CalendarDayNumber, { ref: autoFocusRef, shouldRender: isSameMonth(month, day), key: day.getTime(), date: day, isFocusWithinDayGrid: isFocusWithinDayGrid })); }))); }))))); })));
 };
 
-/**
- * Do not edit directly
- * Generated file
- */
-
-const BtIconChevronLeftMid =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='m7.621 8 2.849 2.852a.673.673 0 0 1-.732 1.097.7.7 0 0 1-.218-.145L6.196 8.476a.673.673 0 0 1 0-.951L9.52 4.197a.67.67 0 0 1 1.146.476c0 .178-.07.349-.196.475z' clip-rule='evenodd'/%3e%3c/svg%3e";
-
 var CalendarNavButton = function (_a) {
     var isDisabled = _a.isDisabled, onClick = _a.onClick, direction = _a.direction, ariaLabel = _a.ariaLabel;
     var icons = {
-        previous: BtIconChevronLeftMid,
-        next: BtIconChevronRightMid.BtIconChevronRightMid,
+        previous: "calendarLeft",
+        next: "calendarRight",
     };
     return (React.createElement("button", { "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick, type: "button", className: index$1.classNames("arc-CalendarNavButton", {
             "arc-CalendarNavButton--previous": direction === "previous",
             "arc-CalendarNavButton--next": direction === "next",
         }) },
-        React.createElement(Icon.Icon, { size: 32, icon: icons[direction] })));
+        React.createElement("div", { className: "arc-CalendarNavButton-icon" },
+            React.createElement(ThemeIcon.ThemeIcon, { icon: icons[direction] }))));
 };
 
 var CalendarDoubleMonthView = function (_a) {
@@ -1455,39 +1449,39 @@ var CalendarMonthYearView = function (_a) {
 };
 
 var showPreviousMonthHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: getFocusDate({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: getFocusDate({
             date: subMonths(state.focusDate, 1),
             minDate: payload.minDate,
         }), displayDate: subMonths(state.displayDate, 1) });
 };
 
 var showNextMonthHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: getFocusDate({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: getFocusDate({
             date: addMonths(state.focusDate, 1),
             maxDate: payload.maxDate,
         }), displayDate: addMonths(state.displayDate, 1) });
 };
 
 var showPreviousDoubleMonthHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: getFocusDate({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: getFocusDate({
             date: subMonths(state.focusDate, 2),
             minDate: payload.minDate,
         }), displayDate: subMonths(state.displayDate, 2) });
 };
 
 var showNextDoubleMonthHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: getFocusDate({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: getFocusDate({
             date: addMonths(state.focusDate, 2),
             maxDate: payload.maxDate,
         }), displayDate: addMonths(state.displayDate, 2) });
 };
 
 var rangeSelectHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: payload.date, highlightedRange: payload.range });
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: payload.date, highlightedRange: payload.range });
 };
 
 var highlightRangeHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { highlightedRange: getHighlightRange({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { highlightedRange: getHighlightRange({
             date: payload.date,
             range: payload.range,
             minDate: payload.minDate,
@@ -1496,15 +1490,15 @@ var highlightRangeHandler = function (payload, state) {
 };
 
 var dayNumberSelectHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: payload });
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: payload });
 };
 
 var dayGridLeaveHandler = function (payload, state) {
     if (payload.selectionType === "range" &&
         payload.range.filter(function (date) { return Boolean(date); }).length === 1) {
-        return filterAttrs.__assign(filterAttrs.__assign({}, state), { highlightedRange: [] });
+        return tslib_es6.__assign(tslib_es6.__assign({}, state), { highlightedRange: [] });
     }
-    return filterAttrs.__assign({}, state);
+    return tslib_es6.__assign({}, state);
 };
 
 var dropDownChangeYearHandler = function (payload, state) {
@@ -1517,16 +1511,16 @@ var dropDownChangeYearHandler = function (payload, state) {
         maxDate: payload.maxDate,
     });
     if (minDate && isBefore(newDisplayDate, minDate)) {
-        return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: focusDate, displayDate: minDate });
+        return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: focusDate, displayDate: minDate });
     }
     if (maxDate && isAfter(newDisplayDate, maxDate)) {
-        return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: focusDate, displayDate: maxDate });
+        return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: focusDate, displayDate: maxDate });
     }
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: focusDate, displayDate: newDisplayDate });
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: focusDate, displayDate: newDisplayDate });
 };
 
 var dropDownChangeMonthHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: getFocusDate({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: getFocusDate({
             date: setMonth(state.focusDate, payload.month),
             minDate: payload.minDate,
             maxDate: payload.maxDate,
@@ -1652,21 +1646,21 @@ var calendarKeydownHandler = function (payload, state) {
     var isNewFocusDateVisible = isWithinInterval(newFocusDate, calendarType === "double"
         ? doubleMonthVisibleRange
         : singleMonthVisibleRange);
-    var commonState = filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: newFocusDate, highlightedRange: newHighlightedRange });
+    var commonState = tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: newFocusDate, highlightedRange: newHighlightedRange });
     if (!isNewFocusDateVisible &&
         !focusDateIsMinOrMax &&
         isNavigatingByYear &&
         calendarType === "double") {
-        return filterAttrs.__assign(filterAttrs.__assign({}, commonState), { displayDate: setYear(displayDate, getYear(newFocusDate)) });
+        return tslib_es6.__assign(tslib_es6.__assign({}, commonState), { displayDate: setYear(displayDate, getYear(newFocusDate)) });
     }
     if (!isNewFocusDateVisible) {
-        return filterAttrs.__assign(filterAttrs.__assign({}, commonState), { displayDate: startOfMonth(newFocusDate) });
+        return tslib_es6.__assign(tslib_es6.__assign({}, commonState), { displayDate: startOfMonth(newFocusDate) });
     }
     return commonState;
 };
 
 var defaultHandler = function (state) {
-    return filterAttrs.__assign({}, state);
+    return tslib_es6.__assign({}, state);
 };
 
 var reducer = function (state, action) {
@@ -1713,7 +1707,7 @@ var CalendarWrapper = function (_a) {
 
 /** Use `Calendar` to clearly present available dates and allowing users to choose a way to enter information. */
 var Calendar = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? "month" : _b, _c = _a.selectionType, selectionType = _c === void 0 ? "single" : _c, _d = _a.autoFocusOnMount, autoFocusOnMount = _d === void 0 ? false : _d, _e = _a.selectedRange, rawSelectedRange = _e === void 0 ? [] : _e, _f = _a.selectedDate, rawSelectedDate = _f === void 0 ? new Date() : _f, rawDisabledDates = _a.disabledDates, rawMinDate = _a.minDate, rawMaxDate = _a.maxDate, onCancelClick = _a.onCancelClick, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, props = filterAttrs.__rest(_a, ["type", "selectionType", "autoFocusOnMount", "selectedRange", "selectedDate", "disabledDates", "minDate", "maxDate", "onCancelClick", "onDateSelect", "onRangeSelect"]);
+    var _b = _a.type, type = _b === void 0 ? "month" : _b, _c = _a.selectionType, selectionType = _c === void 0 ? "single" : _c, _d = _a.autoFocusOnMount, autoFocusOnMount = _d === void 0 ? false : _d, _e = _a.selectedRange, rawSelectedRange = _e === void 0 ? [] : _e, _f = _a.selectedDate, rawSelectedDate = _f === void 0 ? new Date() : _f, rawDisabledDates = _a.disabledDates, rawMinDate = _a.minDate, rawMaxDate = _a.maxDate, onCancelClick = _a.onCancelClick, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, props = tslib_es6.__rest(_a, ["type", "selectionType", "autoFocusOnMount", "selectedRange", "selectedDate", "disabledDates", "minDate", "maxDate", "onCancelClick", "onDateSelect", "onRangeSelect"]);
     var todayDate = dateWithoutTime(new Date());
     var selectedDate = dateWithoutTime(rawSelectedDate);
     var selectedRange = rawSelectedRange
@@ -1871,7 +1865,7 @@ var Calendar = function (_a) {
             },
         });
     };
-    return (React.createElement(ArcCalendarContext.Provider, filterAttrs.__assign({ value: {
+    return (React.createElement(ArcCalendarContext.Provider, tslib_es6.__assign({ value: {
             minDate: minDate,
             maxDate: maxDate,
             focusDate: focusDate,

package/lib/_shared/cjs/{CardFooter-ChphRFHe.cjs → CardFooter-BPtRFaCy.cjs}

@@ -2,25 +2,14 @@
 
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var Icon = require('./Icon-CzhyKqMd.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
 var index$1 = require('./index-BLRjGROQ.cjs');
 
-var ArrowRight = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M18.146 11.646a.5.5 0 0 0 0 .707l3.147 3.147H9.5a.5.5 0 0 0 0 1h11.793l-3.146 3.146a.5.5 0 1 0 .707.707L23.207 16l-4.354-4.354a.5.5 0 0 0-.707 0'/%3e%3c/svg%3e";
-var ArrowRightFill = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M2 16A14 14 0 1 0 16 2 14 14 0 0 0 2 16m16.854-4.354L23.207 16l-4.354 4.354a.5.5 0 0 1-.707-.707l3.147-3.147H9.5a.5.5 0 0 1 0-1h11.793l-3.146-3.146a.5.5 0 0 1 .707-.707'/%3e%3c/svg%3e";
-var Play = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='m20.839 15.04-7.178-4.144a1.107 1.107 0 0 0-1.661.958v8.288a1.105 1.105 0 0 0 1.661.96l7.178-4.145a1.107 1.107 0 0 0 0-1.917m-.5 1.051-7.178 4.145a.1.1 0 0 1-.107 0 .1.1 0 0 1-.054-.094v-8.288a.1.1 0 0 1 .054-.092.1.1 0 0 1 .107 0l7.178 4.143a.1.1 0 0 1 .054.094.1.1 0 0 1-.054.092'/%3e%3c/svg%3e";
-var PlayFill = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m4.839 14.957-7.178 4.145a1.108 1.108 0 0 1-1.661-.96v-8.288a1.107 1.107 0 0 1 1.661-.958l7.178 4.144a1.107 1.107 0 0 1 0 1.917'/%3e%3c/svg%3e";
-
 var CardFooter = function (_a) {
     var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.buttonSize, buttonSize = _c === void 0 ? "m" : _c, _d = _a.isDarkPathway, isDarkPathway = _d === void 0 ? false : _d, _e = _a.showButton, showButton = _e === void 0 ? true : _e, _f = _a.isHovered, isHovered = _f === void 0 ? false : _f;
     var icons = {
-        arrow: {
-            regular: ArrowRight,
-            filled: ArrowRightFill,
-        },
-        play: {
-            regular: Play,
-            filled: PlayFill,
-        },
+        arrow: "cardRight",
+        play: "cardPlay",
     };
     return (React.createElement("div", { className: index.classNames("arc-CardFooter", {
             "arc-CardFooter--darkPathway": isDarkPathway,
@@ -34,9 +23,9 @@ var CardFooter = function (_a) {
                     React.createElement("div", { className: index.classNames("arc-CardFooter-buttonIconRight", {
                             "arc-CardFooter-buttonIconRight--isHovered": isHovered,
                         }) },
-                        React.createElement(Icon.Icon, { icon: icons[buttonIcon].regular })),
+                        React.createElement(ThemeIcon.ThemeIcon, { icon: icons[buttonIcon] })),
                     React.createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
-                        React.createElement(Icon.Icon, { icon: icons[buttonIcon].regular }))))))));
+                        React.createElement(ThemeIcon.ThemeIcon, { icon: icons[buttonIcon] }))))))));
 };
 
 exports.CardFooter = CardFooter;

package/lib/_shared/cjs/{CardHeading-Cl0D1Khp.cjs → CardHeading-1-dcxBUr.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 Heading = require('./Heading-BEMSkLYR.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Heading = require('./Heading-CoiZ2EmD.cjs');
 
 var CardHeading = function (_a) {
     var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d;
-    return (React.createElement(Heading.Heading, { level: headingLevel, size: size }, href ? (React.createElement("a", filterAttrs.__assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs.filterAttrs(linkData)), heading)) : (heading)));
+    return (React.createElement(Heading.Heading, { level: headingLevel, size: size, isWordWrap: false }, href ? (React.createElement("a", tslib_es6.__assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs.filterAttrs(linkData)), heading)) : (heading)));
 };
 
 exports.CardHeading = CardHeading;

package/lib/_shared/cjs/CheckboxIcon-B94mtYCX.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var FormControl = require('./FormControl-DiERJpGW.cjs');
+
+var CheckboxIcon = function (_a) {
+    var id = _a.id, name = _a.name, checked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "m" : _c, value = _a.value, error = _a.error, ariaDescribedBy = _a.ariaDescribedBy, onBlur = _a.onBlur, onChange = _a.onChange, props = tslib_es6.__rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange"]);
+    var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
+    var internalRef = React.useRef(null);
+    var surface = React.useContext(Surface.Context).surface;
+    React.useEffect(function () {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, checked]);
+    var tickSize = {
+        s: 14,
+        m: 18,
+    };
+    var isControlled = typeof checked !== "undefined" && typeof onChange === "function";
+    var checkedProps = isControlled
+        ? { checked: checked }
+        : checked
+            ? { defaultChecked: true }
+            : {};
+    if (!checked && onChange) {
+        indeterminate = false;
+    }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
+    return (React.createElement("label", { htmlFor: id, className: index.classNames({
+            "arc-CheckboxIcon": true,
+            "arc-CheckboxIcon--disabled": isDisabled,
+            "arc-CheckboxIcon--invalid": error,
+            "arc-CheckboxIcon--small": size === "s",
+            "arc-CheckboxIcon--onDarkSurface": surface === "dark",
+        }) },
+        React.createElement("input", tslib_es6.__assign({ "aria-describedby": ariaDescribedBy ? ariaDescribedBy : error ? "id-error" : undefined, "aria-invalid": error, "aria-checked": checked && !indeterminate
+                ? true
+                : indeterminate && checked
+                    ? "mixed"
+                    : false, className: index.classNames("arc-CheckboxIcon-input"), disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: internalRef, required: isRequired, type: "checkbox", value: value }, checkedProps, props)),
+        React.createElement("span", { className: index.classNames("arc-CheckboxIcon-box") }, indeterminate ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
+            React.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React.createElement(ThemeIcon.ThemeIcon, { icon: "checkboxChecked", size: tickSize[size] })))));
+};
+
+exports.CheckboxIcon = CheckboxIcon;

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-bCEzIPN2.cjs → ContentSwitcherList-BgAW2IhJ.cjs}

@@ -1,26 +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 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, 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];
@@ -72,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)),
@@ -83,6 +91,9 @@ var ContentSwitcherList = function (_a) {
                         onClick: function () {
                             return scrollTabIntoView({ current: tabRefs.current[index] });
                         },
+                        onFocus: function () {
+                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                        },
                     });
                 }
                 else {
@@ -97,3 +108,4 @@ var ContentSwitcherList = function (_a) {
 exports.ContentSwitcher = ContentSwitcher;
 exports.ContentSwitcherContent = ContentSwitcherContent;
 exports.ContentSwitcherList = ContentSwitcherList;
+exports.ContentSwitcherTab = ContentSwitcherTab;

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 })),