@arc-ui/components 12.0.0-beta.18 → 12.0.0-beta.20

package/lib/_shared/cjs/ProgressStepperOverflow-v-TyS5Sp.cjs

@@ -0,0 +1,142 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var debounce = require('./debounce-BeIT3oyF.cjs');
+var ProgressStepper = require('./ProgressStepper-BL9Y5c4X.cjs');
+
+/** Use `ProgressStepperOverflow` to wrap `ProgressStepperItem`s and allow overflow behaviour. */
+var ProgressStepperOverflow = React.forwardRef(function (_a, stepperRef) {
+    var children = _a.children, onIndexChange = _a.onIndexChange, onLoadStep = _a.onLoadStep, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = filterAttrs.__rest(_a, ["children", "onIndexChange", "onLoadStep", "size", "invertLabelPosition", "offsetLeft"]);
+    var _c = React.useState(onLoadStep ? onLoadStep : 0), activeIndex = _c[0], setActiveIndex = _c[1];
+    var _d = React.useState(0), closestScrolledIndex = _d[0], setClosestScrolledIndex = _d[1];
+    var _e = React.useState(true), lastStepVisible = _e[0], setLastStepVisible = _e[1];
+    var containerRef = React.useRef(null);
+    React.useImperativeHandle(stepperRef, function () { return ({
+        handleStepScroll: handleStepScroll,
+        scrollToStep: scrollToStep,
+        handleViewScroll: handleViewScroll,
+        isLastChildVisible: isLastChildVisible,
+    }); });
+    // Add Horizontal Scroll Event Listener
+    React.useEffect(function () {
+        var _a, _b;
+        var checkClosest = debounce.debounce(function () {
+            var closestIndex = findClosestIndex();
+            setClosestScrolledIndex(closestIndex);
+        }, 100);
+        var checkLastChild = debounce.debounce(function () {
+            var lastVisible = isLastChildVisible();
+            if (lastVisible) {
+                setLastStepVisible(true);
+            }
+            else
+                setLastStepVisible(false);
+        }, 100);
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", checkLastChild);
+        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", checkClosest);
+        return function () {
+            var _a;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", checkClosest);
+            checkLastChild.cancel();
+        };
+    }, []);
+    // Scroll to activeIndex
+    React.useEffect(function () {
+        scrollTo();
+    }, [activeIndex]);
+    // Exposing changes in activeIndex outside of component
+    React.useEffect(function () {
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(closestScrolledIndex);
+        isLastChildVisible();
+    }, [closestScrolledIndex, onIndexChange, lastStepVisible]);
+    // helper functions - start
+    var getProgressStepper = function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.firstChild; };
+    var getStepChildren = function () {
+        var _a;
+        return Array.from(((_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children) || []);
+    };
+    var getLeftRects = function (children) {
+        var container = getProgressStepper();
+        if (!container)
+            return [];
+        var parentRect = container.getBoundingClientRect();
+        return children.map(function (child) {
+            var childRect = child.getBoundingClientRect();
+            return {
+                left: childRect.left - parentRect.left,
+            };
+        });
+    };
+    var indexOfClosest = function (values) {
+        return values.indexOf(Math.min.apply(Math, values));
+    };
+    // helper functions - end
+    var isLastChildVisible = function () {
+        var _a;
+        var steps = getStepChildren();
+        var lastStep = steps[steps.length - 1];
+        var rect = lastStep.getBoundingClientRect();
+        var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        return rect.right <= containerRect.right;
+    };
+    // Used for onScroll function of scrolling without buttons
+    var findClosestIndex = function () {
+        var _a, _b;
+        var children = getStepChildren();
+        var scrolledAmount = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+        // compare the scrolled amount to the intial left edge distance for each step
+        var getScrollDistances = function (children, scrolledAmount) {
+            return getLeftRects(children).map(function (rect) {
+                return Math.abs(scrolledAmount - rect.left);
+            });
+        };
+        var closestIndex = indexOfClosest(getScrollDistances(children, scrolledAmount));
+        return closestIndex;
+    };
+    // Scroll active step to the far left of the page
+    var scrollTo = function () {
+        var _a, _b;
+        var activeStep = (_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children[activeIndex];
+        if (activeStep) {
+            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                left: activeStep.offsetLeft - offsetLeft,
+                behavior: "smooth",
+            });
+        }
+    };
+    var handleStepScroll = function (increment) {
+        // Account for any manual scrolling set closest index to active index
+        setActiveIndex(closestScrolledIndex);
+        var newIndex = closestScrolledIndex + increment;
+        setActiveIndex(newIndex);
+        // If clicking backwards to include half visible step
+        if (closestScrolledIndex + increment === activeIndex) {
+            scrollTo();
+        }
+        if (closestScrolledIndex + increment < 0) {
+            setActiveIndex(0);
+            scrollTo();
+        }
+    };
+    // Used to scroll by Parent width
+    var handleViewScroll = function (direction) {
+        var _a;
+        var clientWidth = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+        var stepper = containerRef.current;
+        if (!stepper)
+            return;
+        stepper.scrollBy({
+            left: direction ? clientWidth : -clientWidth,
+            behavior: "smooth",
+        });
+    };
+    // Used to set a specific step to jump to on a button click
+    var scrollToStep = function (step) {
+        setActiveIndex(step);
+    };
+    return (React.createElement("div", filterAttrs.__assign({ ref: containerRef, className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs.filterAttrs(props)),
+        React.createElement(ProgressStepper.ProgressStepper, { size: size, invertLabelPosition: invertLabelPosition, isFluid: false }, children)));
+});
+
+exports.ProgressStepperOverflow = ProgressStepperOverflow;

package/lib/_shared/cjs/{RadioCardGroupInput-BmntgyWB.cjs → RadioCardGroupInput-CeUM3yPS.cjs}

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var capitaliseFirstLetter = require('./capitalise-first-letter-CdhexpSx.cjs');
 var Surface = require('./Surface-BFx1yNsq.cjs');
-var Icon = require('./Icon-KMACQ1i3.cjs');
+var Icon = require('./Icon-CzhyKqMd.cjs');
 
 var RadioContext = React.createContext({});
 var Provider = RadioContext.Provider;

package/lib/_shared/cjs/{RadioGroupInput-D3trTxB5.cjs → RadioGroupInput-w2qkfsnG.cjs}

@@ -42,11 +42,11 @@ var RadioGroupButton = React.forwardRef(function (_a, ref) {
  */
 var RadioGroupInput = React.forwardRef(function (_a, ref) {
     var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, _b = _a.radioButtonAlignment, radioButtonAlignment = _b === void 0 ? "center" : _b, value = _a.value, props = filterAttrs.__rest(_a, ["helper", "id", "isDisabled", "label", "radioButtonAlignment", "value"]);
-    var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, labelSize = _c.labelSize, name = _c.name, size = _c.size;
+    var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, name = _c.name, size = _c.size;
     var isChecked = checkedValue === value ? true : false;
     var checked = typeof changeEvent !== "function" ? undefined : isChecked;
     var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
-    return (React.createElement(RadioGroupButton, filterAttrs.__assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, labelSize: labelSize, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value }, props)));
+    return (React.createElement(RadioGroupButton, filterAttrs.__assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value }, props)));
 });
 
 exports.Provider = Provider;

package/lib/_shared/cjs/{SiteHeaderV2NavItemWithSubNav-DgoCW2W3.cjs → SiteHeaderV2NavItemWithSubNav-fQPk0gZU.cjs}

@@ -3,12 +3,12 @@
 var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var index_es = require('./index.es-sqSQUWYg.cjs');
+var index_es = require('./index.es-DBEGtWPg.cjs');
 var BtIconChevronRight2Px = require('./BtIconChevronRight2Px-CIRaur2B.cjs');
 var useMediaQuery = require('./use-media-query-BsUfHjPZ.cjs');
-var Icon = require('./Icon-KMACQ1i3.cjs');
+var Icon = require('./Icon-CzhyKqMd.cjs');
 var Surface = require('./Surface-BFx1yNsq.cjs');
-var ButtonV2 = require('./ButtonV2-CRNNZ_nd.cjs');
+var ButtonV2 = require('./ButtonV2-Bta5SVVY.cjs');
 var handleLinkClick = require('./handle-link-click-C7BvOIYa.cjs');
 var BrandLogo = require('./BrandLogo-D5wlIFmm.cjs');
 

package/lib/_shared/cjs/{TemplateBanner-BMi77IGK.cjs → TemplateBanner-CGtTUy81.cjs}

@@ -3,17 +3,25 @@
 var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var index_es = require('./index.es-sqSQUWYg.cjs');
-var useMediaQuery = require('./use-media-query-BsUfHjPZ.cjs');
 var VerticalSpace = require('./VerticalSpace-BJvST6WP.cjs');
 var Box = require('./Box-COPXU1Jf.cjs');
 var Heading = require('./Heading-BEMSkLYR.cjs');
 var GridRow = require('./GridRow-BW2ZGtND.cjs');
+require('./index-DR8Rkav9.cjs');
 var BannerImage = require('./BannerImage-kdAKagG-.cjs');
+var Visible = require('./Visible-Dx__9oZG.cjs');
+
+var BannerRow = function (_a) {
+    var isReversed = _a.isReversed, children = _a.children;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Visible.Visible, { xs: true, s: true },
+            React.createElement(GridRow.GridRow, { "data-testid": "arc-TemplateBanner-gridRow-mobile" }, children)),
+        React.createElement(Visible.Visible, { m: true, l: true, xl: true },
+            React.createElement(GridRow.GridRow, { "data-testid": "arc-TemplateBanner-gridRow-desktop", direction: isReversed ? "row-reverse" : "row" }, children))));
+};
 
 var TemplateBanner = function (_a) {
     var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.alignment, alignment = _c === void 0 ? "center" : _c, additionalTopMargin = _a.additionalTopMargin, _d = _a.minHeight, minHeight = _d === void 0 ? 454 : _d, _e = _a.headingSize, headingSize = _e === void 0 ? "xl" : _e, _f = _a.isReversed, isReversed = _f === void 0 ? false : _f, _g = _a.isElevated, isElevated = _g === void 0 ? false : _g, _h = _a.headingLevel, headingLevel = _h === void 0 ? "2" : _h, _j = _a.type, type = _j === void 0 ? "light" : _j, props = filterAttrs.__rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
-    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")"));
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -26,7 +34,6 @@ var TemplateBanner = function (_a) {
     };
     var isContained = type === "contained";
     var borderWidth = isContained && !isElevated ? "thin" : undefined;
-    var direction = isReversed && isMinWidthArcBreakpointM ? "row-reverse" : "row";
     var columnWithImgWidths = {
         "1/0": 12,
         "2/3": 8,
@@ -37,7 +44,7 @@ var TemplateBanner = function (_a) {
         }) }, filterAttrs.filterAttrs(props)),
         React.createElement(Box.Box, { isBorderRadius: true, "data-testid": "arc-TemplateBanner-box", borderWidth: borderWidth, surface: backgrounds[type], isSurfaceTransparent: !isContained },
             React.createElement(GridRow.Grid, { isGutterless: true, isFluid: true },
-                React.createElement(GridRow.GridRow, { "data-testid": "arc-TemplateBanner-gridRow", direction: direction },
+                React.createElement(BannerRow, { "data-testid": "arc-TemplateBanner-gridRow", isReversed: isReversed },
                     React.createElement(GridRow.GridCol, { "data-testid": "arc-TemplateBanner-contentCol", align: {
                             m: alignment === "start" ? "start" : "center",
                             xs: !img || contentRatio === "1/0" ? "center" : "start",
@@ -46,7 +53,7 @@ var TemplateBanner = function (_a) {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
                             label && (React.createElement(React.Fragment, null,
-                                React.createElement(Heading.Heading, { size: "xxs" }, label.toUpperCase()),
+                                React.createElement(Heading.Heading, { level: "3", fontStyle: "overline" }, label),
                                 React.createElement(VerticalSpace.VerticalSpace, { size: "8" }))),
                             React.createElement(Heading.Heading, { level: headingLevel, size: headingSize }, heading),
                             text && (React.createElement(React.Fragment, null,

package/lib/_shared/cjs/{TextInput-DT4hi02U.cjs → TextInput-ByySubi5.cjs}

@@ -3,7 +3,7 @@
 var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var FormControl = require('./FormControl-D3-JbAVb.cjs');
+var FormControl = require('./FormControl-BPnKQrCm.cjs');
 var Surface = require('./Surface-BFx1yNsq.cjs');
 var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
 var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
@@ -38,9 +38,9 @@ var useNumericInput = function (props) {
 
 var TextInputComponent = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, props = filterAttrs.__rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
+    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, props = filterAttrs.__rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
     var surface = React.useContext(Surface.Context).surface;
-    var _m = React.useState(false), showPasswordToggle = _m[0], setShowPasswordToggle = _m[1];
+    var _l = React.useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
         pattern: pattern,
@@ -74,9 +74,9 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
                 "arc-TextInput--withPrefix": prefix,
                 "arc-TextInput--withSuffix": suffix
             },
-            _b["arc-TextInput--size".concat(inputSize && inputSize.toUpperCase())] = inputSize && inputSize !== "m",
+            _b["arc-TextInput--size".concat(size && size.toUpperCase())] = size && size !== "m",
             _b)) }, filterAttrs.filterAttrs(props)),
-        React.createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+        React.createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: size, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
             React.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width, marginTop: hideLabel ? 0 : undefined } },
                 prefix && (React.createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
                 React.createElement("input", filterAttrs.__assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled || isLoading, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
@@ -85,7 +85,7 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
                             e.preventDefault();
                             iconButton.onClick();
                         } },
-                        React.createElement(ThemeIcon.ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
+                        React.createElement(ThemeIcon.ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[size] })))),
                 suffix && !showPassword ? (React.createElement("span", { className: "arc-TextInput-suffix", "aria-hidden": true }, suffix)) : null,
                 showPassword && (React.createElement("div", { className: "arc-TextInput-additionalControl" },
                     React.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
@@ -95,7 +95,7 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
                                 ? "Your password is shown"
                                 : "Your password is hidden"))))),
                 isLoading && (React.createElement("span", { className: "arc-TextInput-spinner" },
-                    React.createElement(Spinner.Spinner, { size: spinnerSize[inputSize] })))))));
+                    React.createElement(Spinner.Spinner, { size: spinnerSize[size] })))))));
 });
 /**
  * Use `TextInput` to allow users to enter short form text.

package/lib/_shared/cjs/Visible-Dx__9oZG.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+
+var Visible = function (_a) {
+    var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, props = filterAttrs.__rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
+    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames("arc-Visible", {
+            "arc-Visible--xs": xs,
+            "arc-Visible--s": s,
+            "arc-Visible--m": m,
+            "arc-Visible--l": l,
+            "arc-Visible--xl": xl,
+        }) }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.Visible = Visible;

package/lib/_shared/cjs/{index.es-sqSQUWYg.cjs → index.es-DBEGtWPg.cjs}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 19 May 2025 14:54:16 GMT
+ * Generated on Mon, 21 Jul 2025 12:02:37 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";

package/lib/_shared/esm/{Avatar-B8aoUhmE.mjs → Avatar-Fb1E5MA9.mjs}

@@ -2,6 +2,7 @@ import { a as __assign, _ as __rest, f as filterAttrs } from './filter-attrs-B6C
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { C as ConditionalWrapper } from './ConditionalWrapper-WoJxFYwS.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
 import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
 import { I as Image } from './Image-Dl8oH1Rn.mjs';
 import { H as Heading } from './Heading-CxHWefi7.mjs';
@@ -35,7 +36,9 @@ var Avatar = function (_a) {
     var wrapperAttrs = __assign({ className: classNames("arc-Avatar", "arc-Avatar--".concat(size), {
             "arc-Avatar--img": Boolean(img),
         }) }, filterAttrs(props));
-    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", __assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return React__default.createElement("div", __assign({}, wrapperAttrs), children); } },
+    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", __assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", __assign({}, wrapperAttrs), children),
+            ariaLabel && React__default.createElement(VisuallyHidden, null, ariaLabel))); } },
         React__default.createElement(AvatarContent, { size: size, img: img, initials: initials })));
 };
 

package/lib/_shared/esm/{Button-9L4AksQP.mjs → Button-BxuM3_gz.mjs}

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6C
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { C as Context } from './Surface-Colbp3Zx.mjs';
 import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
 

package/lib/_shared/esm/{ButtonV2-2U4PvnpS.mjs → ButtonV2-DwYBAojW.mjs}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { C as Context } from './Surface-Colbp3Zx.mjs';
 import { S as Spinner } from './Spinner-Cd7LiPTy.mjs';
 
@@ -28,7 +28,7 @@ var ButtonV2 = forwardRef(function (_a, ref) {
             case "compact":
             case "secondary":
             case "tertiary":
-                return surface === "light" ? "gradient" : "auto";
+                return "brand-alt";
             default:
                 return "auto";
         }

package/lib/_shared/esm/{Calendar-L6u3D8xb.mjs → Calendar-CjqPM7ta.mjs}

@@ -1,7 +1,7 @@
 import { b as __spreadArray, a as __assign, _ as __rest, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { createContext, forwardRef, useContext, useCallback, useRef, useState, useReducer, useEffect } from 'react';
 import { r as requiredArgs, t as toDate, b as toInteger, _ as _typeof, g as getDefaultOptions, f as format } from './index-Cr6KeQLU.mjs';
-import { A as ArcSizeBreakpointsM } from './index.es-C3WGtwrW.mjs';
+import { A as ArcSizeBreakpointsM } from './index.es-DCvYtQfu.mjs';
 import { u as useMediaQuery } from './use-media-query-DmKuIDEM.mjs';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { T as Text } from './Text-CBlnm5CT.mjs';
@@ -10,7 +10,7 @@ import './index-Spae4j7j.mjs';
 import { S as Surface } from './Surface-Colbp3Zx.mjs';
 import { H as Heading } from './Heading-CxHWefi7.mjs';
 import { B as BtIconChevronRightMid } from './BtIconChevronRightMid-DE4lmVaG.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 
 /**
  * @name addMonths
@@ -1132,7 +1132,7 @@ var CalendarDayNumber = forwardRef(function (_a, autoFocusRef) {
  */
 
 const BtIconChevronDownMid =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='m16 18.09 5.704-5.696a1.347 1.347 0 0 1 2.296.949 1.34 1.34 0 0 1-.393.95L16.95 20.94a1.347 1.347 0 0 1-1.902 0l-6.656-6.648A1.342 1.342 0 0 1 9.345 12c.356 0 .699.142.951.393z' clip-rule='evenodd'/%3e%3c/svg%3e";
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16 18.09 5.704-5.696a1.347 1.347 0 0 1 2.296.949 1.34 1.34 0 0 1-.393.95L16.95 20.94a1.347 1.347 0 0 1-1.902 0l-6.656-6.648A1.342 1.342 0 0 1 9.345 12c.356 0 .699.142.951.393z'/%3e%3c/svg%3e";
 
 var CalendarDateSelect = function (_a) {
     var ariaLabel = _a.ariaLabel, onChange = _a.onChange, name = _a.name, value = _a.value, displayValue = _a.displayValue, options = _a.options;

package/lib/_shared/esm/{CardFooter-CgDDDI7Z.mjs → CardFooter-fsAY4cc6.mjs}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { i as isDate, f as format } from './index-Cr6KeQLU.mjs';
 
 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";

package/lib/_shared/esm/{Checkbox-NxnK40uZ.mjs → Checkbox-CwOHzlQF.mjs}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { forwardRef, useContext, useRef, useEffect } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { C as Context, u as useAriaDescribedby } from './FormControl-B9fp1ilz.mjs';
+import { C as Context, u as useAriaDescribedby } from './FormControl-CWyrVi1u.mjs';
 import { C as Context$1 } from './Surface-Colbp3Zx.mjs';
 import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
 import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';

package/lib/_shared/esm/{ComboBox-DUTrEu0N.mjs → ComboBox-CRlJjeev.mjs}

@@ -2,10 +2,10 @@ import { b as __spreadArray, a as __assign, _ as __rest, f as filterAttrs } from
 import React__default, { forwardRef, useId, useRef, useReducer } from 'react';
 import { R as Root2, A as Anchor2, P as Portal, C as Content2 } from './index-CxrL7jIX.mjs';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { u as useAriaDescribedby, F as FormControl } from './FormControl-B9fp1ilz.mjs';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-CWyrVi1u.mjs';
 import { e as useThemeElement } from './index-Bz2JQq34.mjs';
 import { B as Box } from './Box-BYm_GTct.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
 
 /**

package/lib/_shared/esm/{ContentSwitcherDropdown-dktkyAjY.mjs → ContentSwitcherDropdown-BCkuAfwC.mjs}

@@ -59,7 +59,7 @@ var ContentSwitcherDropdown = function (_a) {
                 return null;
             }
             var isActive = child.props.value === selectValue;
-            return (React__default.createElement("div", __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: 0, hidden: !isActive }, filterAttrs(child.props)), child));
+            return (React__default.createElement("div", __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(child.props)), child));
         })));
 };
 var ContentSwitcherDropdownContent = function (_a) {

package/lib/_shared/esm/{ContentSwitcherList-OnZoE86O.mjs → ContentSwitcherList-DKPD9GfN.mjs}

@@ -13,7 +13,7 @@ var ContentSwitcher = function (_a) {
 
 var ContentSwitcherContent = function (_a) {
     var children = _a.children, value = _a.value;
-    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value },
+    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value, tabIndex: -1 },
         React__default.createElement("div", { className: "arc-ContentSwitcherContent-wrapper" }, children)));
 };
 
@@ -64,11 +64,12 @@ var ContentSwitcherList = function (_a) {
                 list.removeEventListener("scroll", checkOverflow);
             }
             window.removeEventListener("resize", updateLayout);
+            handleResize.cancel();
         };
     }, [children, checkOverflow, handleResize]);
     return (React__default.createElement("span", { className: classNames("arc-ContentSwitcherList-wrapper", {
             "arc-ContentSwitcherList-wrapper--isInset": isInset,
-        }) },
+        }), tabIndex: -1 },
         React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign({ className: classNames("arc-ContentSwitcherList", {
                 "arc-ContentSwitcherList--contained": type === "contained",
                 "arc-ContentSwitcherList--isJustified": isJustified,

package/lib/_shared/esm/{DatePicker-CccSfg17.mjs → DatePicker-3sYJ3wGn.mjs}

@@ -2,10 +2,10 @@ import { b as __spreadArray, _ as __rest, a as __assign, f as filterAttrs } from
 import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { R as Root2, A as Anchor2, P as Portal, C as Content2 } from './index-CxrL7jIX.mjs';
-import { C as Calendar, i as isBefore, a as isAfter, c as compareAsc } from './Calendar-L6u3D8xb.mjs';
+import { i as isBefore, a as isAfter, c as compareAsc, C as Calendar } from './Calendar-CjqPM7ta.mjs';
 import { r as requiredArgs, t as toDate, a as isValid, f as format } from './index-Cr6KeQLU.mjs';
 import { e as useThemeElement } from './index-Bz2JQq34.mjs';
-import { a as TextInputWithPlaceHolder } from './TextInput-Vp_cBbpQ.mjs';
+import { a as TextInputWithPlaceHolder } from './TextInput-Dk7qNGoh.mjs';
 
 /**
  * @name startOfDay
@@ -138,11 +138,43 @@ var convertRangeStringToDates = function (value) {
         : []), true);
 };
 
+function validateRangeOnBlur(_a) {
+    var value = _a.value, minDate = _a.minDate, maxDate = _a.maxDate, disabledDates = _a.disabledDates, previousValidValue = _a.previousValidValue, dispatchChangeEvent = _a.dispatchChangeEvent, blurEvent = _a.blurEvent;
+    if (!isRangeValid(value))
+        return;
+    var _b = convertRangeStringToDates(value), start = _b[0], end = _b[1];
+    var isStartBeforeMin = minDate && isBefore(start, minDate);
+    var isEndAfterMax = maxDate && isAfter(end, maxDate);
+    var isStartDisabled = isDisabledDate(disabledDates, start);
+    var isEndDisabled = isDisabledDate(disabledDates, end);
+    if (isStartBeforeMin && isEndAfterMax) {
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(minDate), " - ").concat(formatDate(maxDate)));
+    }
+    if (isStartBeforeMin) {
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(minDate), " - ").concat(formatDate(end)));
+    }
+    if (isEndAfterMax) {
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(start), " - ").concat(formatDate(maxDate)));
+    }
+    if (isStartDisabled || isEndDisabled) {
+        var _c = previousValidValue
+            ? convertRangeStringToDates(previousValidValue)
+            : [], prevStart = _c[0], prevEnd = _c[1];
+        return dispatchChangeEvent(blurEvent, prevStart && prevEnd
+            ? "".concat(formatDate(prevStart), " - ").concat(formatDate(prevEnd))
+            : "");
+    }
+    if (isAfter(start, end)) {
+        var _d = [start, end].sort(compareAsc), orderedStart = _d[0], orderedEnd = _d[1];
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(orderedStart), " - ").concat(formatDate(orderedEnd)));
+    }
+}
+
 /**
  * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
  */
 var DatePicker = forwardRef(function (_a, ref) {
-    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, labelSize = _a.labelSize, inputSize = _a.inputSize, _b = _a.value, value = _b === void 0 ? "" : _b, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, _d = _a.selectionType, selectionType = _d === void 0 ? "single" : _d, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "labelSize", "inputSize", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
+    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, size = _a.size, _b = _a.value, value = _b === void 0 ? "" : _b, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, _d = _a.selectionType, selectionType = _d === void 0 ? "single" : _d, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "size", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
     var _e = useThemeElement(), themeElement = _e[0], setThemeElement = _e[1];
     var _f = useState("Choose date"), ariaLabel = _f[0], setAriaLabel = _f[1];
     var _g = useState(false), showCalendar = _g[0], setShowCalendar = _g[1];
@@ -216,32 +248,15 @@ var DatePicker = forwardRef(function (_a, ref) {
         }
     };
     var handleRangeSelectionBlur = function (e) {
-        if (isRangeValid(value) && selectionType === "range") {
-            var _a = convertRangeStringToDates(value), start = _a[0], end = _a[1];
-            var isStartDateBeforeMinDate = minDate && isBefore(start, minDate);
-            var isEndDateAfterMaxDate = maxDate && isAfter(end, maxDate);
-            var isStartDateDisabled = isDisabledDate(disabledDates, start);
-            var isEndDateDisabled = isDisabledDate(disabledDates, end);
-            if (isStartDateBeforeMinDate && isEndDateAfterMaxDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(maxDate)));
-            }
-            if (isStartDateBeforeMinDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(end)));
-            }
-            if (isEndDateAfterMaxDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(start), " - ").concat(formatDate(maxDate)));
-            }
-            if (isStartDateDisabled || isEndDateDisabled) {
-                var _b = previousValidValue.current
-                    ? convertRangeStringToDates(previousValidValue.current)
-                    : [], start_1 = _b[0], end_1 = _b[1];
-                return dispatchChangeEvent(e, start_1 && end_1 ? "".concat(formatDate(start_1), " - ").concat(formatDate(end_1)) : "");
-            }
-            if (isAfter(start, end)) {
-                var _c = [start, end].sort(compareAsc), orderedStart = _c[0], orderedEnd = _c[1];
-                return dispatchChangeEvent(e, "".concat(formatDate(orderedStart), " - ").concat(formatDate(orderedEnd)));
-            }
-        }
+        validateRangeOnBlur({
+            value: value,
+            minDate: minDate,
+            maxDate: maxDate,
+            disabledDates: disabledDates,
+            previousValidValue: previousValidValue.current,
+            dispatchChangeEvent: dispatchChangeEvent,
+            blurEvent: e,
+        });
     };
     var handleBlur = function (e) {
         onBlur && onBlur(e);
@@ -298,7 +313,7 @@ var DatePicker = forwardRef(function (_a, ref) {
                 icon: "datePickerCalendar",
                 label: ariaLabel,
                 ref: buttonRef,
-            }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, labelSize: labelSize, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, inputSize: inputSize }, props, filterAttrs(props))),
+            }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, size: size }, props, filterAttrs(props))),
         React__default.createElement(Root2, __assign({ open: showCalendar, onOpenChange: handleCalendarOpenChange }, filterAttrs(props)),
             React__default.createElement(Anchor2, null),
             React__default.createElement(Portal, { container: themeElement },
@@ -306,4 +321,4 @@ var DatePicker = forwardRef(function (_a, ref) {
                     React__default.createElement(Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: selectionType, selectedDate: convertDateStringToDate(value), selectedRange: convertRangeStringToDates(value), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, onRangeSelect: handleRangeSelect }))))));
 });
 
-export { DATE_FORMAT as D, parseDateString as a, isDateValid as b, DatePicker as c, isRangeValid as i, parseRangeString as p };
+export { DATE_FORMAT as D, isRangeValid as a, parseDateString as b, convertRangeStringToDates as c, DatePicker as d, formatDate as f, isDateValid as i, parseRangeString as p, validateRangeOnBlur as v };