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

package/lib/_shared/esm/{Calendar-CjqPM7ta.mjs → Calendar-Bd2_eT1Y.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-DCvYtQfu.mjs';
+import { A as ArcSizeBreakpointsM } from './index.es-C3WqfFKH.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';

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

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { a as $69cb30bb0017df05$export$be92b6f5f03c0fe9, b as $69cb30bb0017df05$export$7c6e2c02157bb7d2, c as $69cb30bb0017df05$export$54c2e3dc7acea9f5 } from './index-BDWwJ5x2.mjs';
-import { d as debounce } from './debounce-mCD9-ufA.mjs';
+import { d as debounce } from './debounce-D_Nx5go6.mjs';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 
 /** Use `ContentSwitcher` to allow users to navigate between different sections of relevant content. */
@@ -12,8 +12,8 @@ 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, tabIndex: -1 },
+    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 = __rest(_a, ["children", "value", "hidden", "forceMount"]);
+    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, __assign({ className: "arc-ContentSwitcherContent", value: value, tabIndex: -1, forceMount: forceMount ? true : undefined, hidden: hidden }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-ContentSwitcherContent-wrapper" }, children)));
 };
 

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

@@ -2,7 +2,7 @@ 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 { i as isBefore, a as isAfter, c as compareAsc, C as Calendar } from './Calendar-CjqPM7ta.mjs';
+import { i as isBefore, a as isAfter, c as compareAsc, C as Calendar } from './Calendar-Bd2_eT1Y.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-Dk7qNGoh.mjs';

package/lib/_shared/esm/Hidden-DsrAaC0z.mjs

@@ -0,0 +1,17 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import React__default from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+
+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 = __rest(_a, ["children", "xs", "s", "m", "l", "xl", "xxl"]);
+    return (React__default.createElement("div", __assign({ className: classNames({
+            "arc-Hidden--xs": xs,
+            "arc-Hidden--s": s,
+            "arc-Hidden--m": m,
+            "arc-Hidden--l": l,
+            "arc-Hidden--xl": xl,
+            "arc-Hidden--xxl": xxl,
+        }) }, filterAttrs(props)), children));
+};
+
+export { Hidden as H };

package/lib/_shared/esm/Link-Biyg9qBH.mjs

@@ -0,0 +1,46 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import React__default, { useContext } from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { C as Context } from './Surface-Colbp3Zx.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
+import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
+
+/**
+ * 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 = __rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
+    var surface = useContext(Context).surface;
+    var isExternalLink = target === "_blank";
+    var textArray = children.split(" ");
+    var firstText = textArray.slice(0, -1).join(" ");
+    var lastWord = textArray[textArray.length - 1];
+    var commonProps = {
+        id: id,
+        onClick: onClick,
+        className: classNames("arc-Link", "arc-Link--".concat(size), {
+            "arc-Link--onDarkSurface": surface === "dark",
+            "arc-Link--onLightSurface": surface !== "dark",
+            "arc-Link--isImplied": isImplied,
+        }),
+    };
+    var elementProps = {
+        a: __assign(__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
+        button: __assign({}, commonProps),
+        span: __assign({}, commonProps),
+    };
+    var LinkElement = isButton ? "button" : href ? "a" : "span";
+    return (React__default.createElement(LinkElement, __assign({}, elementProps[LinkElement], filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-Link-wrapper" },
+            React__default.createElement(VisuallyHidden, null,
+                screenReaderText || children,
+                isExternalLink && " (Opens in new window)"),
+            firstText && (React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
+                firstText,
+                "\u00A0")),
+            React__default.createElement("span", { className: "arc-Link-iconWrapper" },
+                React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
+                isExternalLink && (React__default.createElement(ThemeIcon, { icon: "linkExternal", size: size === "s" ? 20 : 24 }))))));
+};
+
+export { Link as L };

package/lib/_shared/esm/Popover-8FfvgL4c.mjs

@@ -0,0 +1,29 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import React__default from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { R as Root2, A as Anchor2, T as Trigger, P as Portal, C as Content2, a as PopoverArrow } from './index-CxrL7jIX.mjs';
+import { e as useThemeElement } from './index-Bz2JQq34.mjs';
+import { S as Surface } from './Surface-Colbp3Zx.mjs';
+
+/** Use `Popover` to display content in a portal, triggered by a button. */
+var Popover = function (_a) {
+    var align = _a.align, ariaLabel = _a.ariaLabel, alignOffset = _a.alignOffset, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, content = _a.content, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 452 : _e, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, side = _a.side, _f = _a.sideOffset, sideOffset = _f === void 0 ? 0 : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.hideWhenDetached, hideWhenDetached = _h === void 0 ? false : _h, _j = _a.useBespokeTrigger, useBespokeTrigger = _j === void 0 ? false : _j, props = __rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger"]);
+    var _k = useThemeElement(), themeElement = _k[0], setThemeElement = _k[1];
+    var alignOffsetDefault = align === "center" ? 0 : -16;
+    return (React__default.createElement("div", __assign({ className: "arc-Popover" }, filterAttrs(props)),
+        React__default.createElement(Root2, { open: open, onOpenChange: onOpenChange },
+            useBespokeTrigger ? (React__default.createElement(Anchor2, { className: "arc-Popover-anchor" }, children)) : (React__default.createElement(Trigger, { "aria-label": ariaLabel, asChild: asChild, className: "arc-Popover-trigger" }, children)),
+            React__default.createElement("div", { ref: setThemeElement },
+                React__default.createElement(Portal, { container: themeElement },
+                    React__default.createElement("div", { "data-cy": "z-index", style: { position: "absolute", zIndex: zIndex } },
+                        React__default.createElement(Content2, { side: side, sideOffset: sideOffset, align: align, hideWhenDetached: hideWhenDetached, alignOffset: alignOffset !== null && alignOffset !== void 0 ? alignOffset : alignOffsetDefault, onOpenAutoFocus: onOpenAutoFocus, onCloseAutoFocus: onCloseAutoFocus, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onFocusOutside: onFocusOutside, onInteractOutside: onInteractOutside },
+                            React__default.createElement(Surface, { isTransparent: true, background: background === "light" ? "light-white" : "dark-black" },
+                                React__default.createElement("div", { className: classNames("arc-Popover-content", {
+                                        "arc-Popover-content--dark": background === "dark",
+                                        "arc-Popover-content--brand": background === "brand",
+                                    }), style: { maxWidth: maxWidth }, "aria-labelledby": "popover-content" },
+                                    content && React__default.createElement("div", { id: "popover-content" }, content),
+                                    arrow && (React__default.createElement(PopoverArrow, { className: "arc-Popover-arrow" })))))))))));
+};
+
+export { Popover as P };

package/lib/_shared/esm/{ProgressStepperOverflow-B9ba8ljs.mjs → ProgressStepperOverflow-fPkLltVO.mjs}

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
-import { d as debounce } from './debounce-mCD9-ufA.mjs';
+import { d as debounce } from './debounce-D_Nx5go6.mjs';
 import { P as ProgressStepper } from './ProgressStepper-CLBtBNy2.mjs';
 
 /** Use `ProgressStepperOverflow` to wrap `ProgressStepperItem`s and allow overflow behaviour. */

package/lib/_shared/esm/{SiteHeaderV2NavItemWithSubNav-BMoBdUxK.mjs → SiteHeaderV2NavItemWithSubNav-CxGwdV6u.mjs}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { createContext, useState, useRef, useEffect, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { c as ArcSizeBreakpointsL } from './index.es-DCvYtQfu.mjs';
+import { c as ArcSizeBreakpointsL } from './index.es-C3WqfFKH.mjs';
 import { a as BtIconChevronRight2Px, B as BtIconChevronLeft2Px } from './BtIconChevronRight2Px-DzWb16fR.mjs';
 import { u as useMediaQuery } from './use-media-query-DmKuIDEM.mjs';
 import { I as Icon } from './Icon-CcPOJcQm.mjs';

package/lib/_shared/esm/{TemplateBanner-Up6cR-3_.mjs → TemplateBanner-DeHjliNP.mjs}

@@ -7,19 +7,19 @@ import { H as Heading } from './Heading-CxHWefi7.mjs';
 import { b as GridRow, G as Grid, a as GridCol } from './GridRow-Ddt5CtFn.mjs';
 import './index-Spae4j7j.mjs';
 import { B as BannerImage } from './BannerImage-BTsixvUH.mjs';
-import { V as Visible } from './Visible-C-jVXUWp.mjs';
+import { V as Visible } from './Visible-B13QJn7R.mjs';
 
 var BannerRow = function (_a) {
     var isReversed = _a.isReversed, children = _a.children;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Visible, { xs: true, s: true },
             React__default.createElement(GridRow, { "data-testid": "arc-TemplateBanner-gridRow-mobile" }, children)),
-        React__default.createElement(Visible, { m: true, l: true, xl: true },
+        React__default.createElement(Visible, { m: true, l: true, xl: true, xxl: true },
             React__default.createElement(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 = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
+    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, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _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 = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -37,8 +37,19 @@ var TemplateBanner = function (_a) {
         "2/3": 8,
         "1/1": 6,
     };
-    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-TemplateBanner arc-TemplateBanner-background--".concat(type), {
+    var templateBannerStyles = {
+        "--template-banner-min-height": "".concat(minHeight, "px"),
+        "--template-banner-min-height-m": minHeightM ? "".concat(minHeightM, "px") : "auto",
+        "--template-banner-min-height-l": minHeightL ? "".concat(minHeightL, "px") : "auto",
+        "--template-banner-min-height-xl": minHeightXL
+            ? "".concat(minHeightXL, "px")
+            : "auto",
+    };
+    return (React__default.createElement("div", __assign({ style: templateBannerStyles, className: classNames("arc-TemplateBanner arc-TemplateBanner-background--".concat(type), {
             "arc-TemplateBanner--elevation": isElevated,
+            "arc-TemplateBanner--minHeightM": minHeightM,
+            "arc-TemplateBanner--minHeightL": minHeightL,
+            "arc-TemplateBanner--minHeightXL": minHeightXL,
         }) }, filterAttrs(props)),
         React__default.createElement(Box, { isBorderRadius: true, "data-testid": "arc-TemplateBanner-box", borderWidth: borderWidth, surface: backgrounds[type], isSurfaceTransparent: !isContained },
             React__default.createElement(Grid, { isGutterless: true, isFluid: true },