@arc-ui/components 12.0.0 → 13.0.0

package/lib/Drawer/Drawer.cjs

@@ -4,18 +4,18 @@
 var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index$2 = require('../_shared/cjs/index-CTlXMLug.cjs');
-var index$1 = require('../_shared/cjs/index-D9onmVh5.cjs');
+var index$1 = require('../_shared/cjs/index-BDUrOKEW.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
-var index = require('../_shared/cjs/index-DXNM3D1d.cjs');
+var index = require('../_shared/cjs/index-DlWZZNwu.cjs');
 var ThemeIcon = require('../_shared/cjs/ThemeIcon-CwYN77IF.cjs');
 var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
 var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
 var Heading = require('../_shared/cjs/Heading-BYBmZkmS.cjs');
-var Rule = require('../_shared/cjs/Rule-jmvOpci7.cjs');
-require('../_shared/cjs/Combination-6m6aOXZq.cjs');
+var Rule = require('../_shared/cjs/Rule-essaguo_.cjs');
+require('../_shared/cjs/Combination-Cm62lfyr.cjs');
 require('react/jsx-runtime');
 require('react-dom');
-require('../_shared/cjs/index-BGGFOAAx.cjs');
+require('../_shared/cjs/index-BBDa9gnQ.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 require('../_shared/cjs/SemanticHeading-C1-fyc3V.cjs');
@@ -57,6 +57,17 @@ var Drawer = function (_a) {
         var newHeight = dragRef.current.startH - dragRef.current.deltaY;
         setDrawerHeight(Math.round(newHeight));
     };
+    var onHandleDown = function (e) {
+        if (!contentRef.current)
+            return;
+        dragRef.current.active = true;
+        // record where the pointer was when dragging started
+        dragRef.current.startY = e.clientY;
+        // record inital height of drawer
+        dragRef.current.startH = contentRef.current.clientHeight;
+        // keep moving drawer even if cursor has left pill
+        e.target.setPointerCapture(e.pointerId);
+    };
     var resolveToPx = function (input) {
         // if already a number, assume px
         if (typeof input === "number")
@@ -73,19 +84,24 @@ var Drawer = function (_a) {
         var numericValue = Number(str);
         return Number.isFinite(numericValue) ? numericValue : undefined;
     };
-    var onHandleUpCore = function (e) {
-        if (!dragRef.current.active || !contentRef.current)
+    var onHandleUpCore = function (e, keyboardDeltaY) {
+        if (!contentRef.current)
             return;
+        // if the user scrolls down
         if (dragDownToDismiss && contentRef.current.clientHeight < 100) {
             dragRef.current.active = false;
             dragRef.current.deltaY = 0;
-            e.currentTarget.releasePointerCapture(e.pointerId);
+            if (e instanceof PointerEvent && (e === null || e === void 0 ? void 0 : e.currentTarget)) {
+                e.currentTarget.releasePointerCapture(e.pointerId);
+            }
             setDrawerHeight(undefined);
             onRequestClose();
             return;
         }
         dragRef.current.active = false;
-        e.currentTarget.releasePointerCapture(e.pointerId);
+        if (e instanceof PointerEvent && (e === null || e === void 0 ? void 0 : e.currentTarget)) {
+            e.currentTarget.releasePointerCapture(e.pointerId);
+        }
         var currentHeight = contentRef.current.clientHeight;
         // turn all snapPoints into px values. Order the values.
         var snapsPx = (normalisedSnapPoints !== null && normalisedSnapPoints !== void 0 ? normalisedSnapPoints : [])
@@ -93,9 +109,9 @@ var Drawer = function (_a) {
             .filter(function (value) { return value !== undefined; }) // remove undefined values
             .sort(function (a, b) { return a - b; });
         var targetSnap = undefined;
+        var deltaY = Math.sign(dragRef.current.deltaY);
         if (snapBehaviour === "next") {
-            var deltaY = Math.sign(dragRef.current.deltaY);
-            if (deltaY === -1) {
+            if (deltaY <= -1) {
                 // User scrolled up
                 for (var i = 0; i < snapsPx.length; i++) {
                     if (snapsPx[i] > currentHeight) {
@@ -107,7 +123,7 @@ var Drawer = function (_a) {
                     }
                 }
             }
-            else if (deltaY === 1) {
+            else if (deltaY >= 1) {
                 // User scrolled down
                 for (var i = 0; i < snapsPx.length; i++) {
                     if (snapsPx[i] < currentHeight) {
@@ -148,17 +164,6 @@ var Drawer = function (_a) {
         }
         setDrawerHeight(targetSnap);
     };
-    var onHandleDown = function (e) {
-        if (!contentRef.current)
-            return;
-        dragRef.current.active = true;
-        // record where the pointer was when dragging started
-        dragRef.current.startY = e.clientY;
-        // record inital height of drawer
-        dragRef.current.startH = contentRef.current.clientHeight;
-        // keep moving drawer even if cursor has left pill
-        e.target.setPointerCapture(e.pointerId);
-    };
     return (React.createElement("div", { ref: setThemeElement },
         React.createElement(index$1.Root, { open: isOpen },
             React.createElement(index$1.Portal, { container: themeElement },
@@ -175,29 +180,32 @@ var Drawer = function (_a) {
                                 React.createElement("button", { "aria-label": "close", onClick: onRequestClose, className: "arc-Drawer-closeButton" },
                                     React.createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "drawerClose" })),
                                 draggable && position === "bottom" && (React.createElement("div", { className: "arc-Drawer-dragHandle", onPointerDown: onHandleDown, onPointerUp: onHandleUp, onPointerMove: onHandleMove, onClick: onHandleClick, role: "separator", "aria-label": "Drag to resize the drawer" },
-                                    React.createElement("div", { className: "arc-Drawer-dragHandlePill", "data-testid": "arc-Drawer-dragHandlePill" })))),
+                                    React.createElement("div", { className: "arc-Drawer-dragHandlePill", tabIndex: -1, "data-testid": "arc-Drawer-dragHandlePill" })))),
                             children)))))));
 };
 
 var DrawerHeader = function (_a) {
-    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, isResponsive = _a.isResponsive, props = tslib_es6.__rest(_a, ["title", "isFixed", "isResponsive"]);
+    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, isResponsive = _a.isResponsive, children = _a.children, _c = _a.isFullBleed, isFullBleed = _c === void 0 ? false : _c, _d = _a.titleWordWrap, titleWordWrap = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["title", "isFixed", "isResponsive", "children", "isFullBleed", "titleWordWrap"]);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", tslib_es6.__assign({ className: index$2.classNames("arc-DrawerHeader", {
                 "arc-DrawerHeader--isFixed": isFixed,
+                "arc-DrawerHeader--isFullBleed": isFullBleed,
             }) }, filterAttrs.filterAttrs(props)),
             React.createElement("div", { className: "arc-DrawerHeader-content" },
-                React.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
+                title && !children && (React.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
                     React.createElement(index$1.Title, { asChild: true },
-                        React.createElement(Heading.Heading, { isResponsive: isResponsive, size: "m" }, title)))),
+                        React.createElement(Heading.Heading, { isResponsive: isResponsive, size: "m", isWordWrap: titleWordWrap }, title)))),
+                children && !title && children),
             isFixed && (React.createElement("div", { className: "arc-DrawerHeader-divider" },
                 React.createElement(Rule.Rule, null))))));
 };
 
 var DrawerFooter = function (_a) {
-    var isFixed = _a.isFixed, children = _a.children;
+    var isFixed = _a.isFixed, _b = _a.isFullBleed, isFullBleed = _b === void 0 ? false : _b, children = _a.children;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: index$2.classNames("arc-DrawerFooter", {
                 "arc-DrawerFooter--isFixed": isFixed,
+                "arc-DrawerFooter--isFullBleed": isFullBleed,
             }) },
             isFixed && (React.createElement("div", { className: "arc-DrawerFooter-divider" },
                 React.createElement(Rule.Rule, null))),

package/lib/Drawer/Drawer.mjs

@@ -2,18 +2,18 @@
 import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useRef, useState } from 'react';
 import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
-import { R as Root, P as Portal, O as Overlay, D as Description, C as Content, T as Title } from '../_shared/esm/index-CN4hP3Wu.mjs';
+import { R as Root, P as Portal, O as Overlay, D as Description, C as Content, T as Title } from '../_shared/esm/index-CjeQnMcn.mjs';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
-import { e as useThemeElement } from '../_shared/esm/index-Bz2JQq34.mjs';
+import { e as useThemeElement } from '../_shared/esm/index-DkAfUbDx.mjs';
 import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-B0n6cKRb.mjs';
 import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
 import { S as Surface } from '../_shared/esm/Surface-C69KVzkY.mjs';
 import { H as Heading } from '../_shared/esm/Heading-Da-o0d5x.mjs';
-import { R as Rule } from '../_shared/esm/Rule-I1w3EaZi.mjs';
-import '../_shared/esm/Combination-BQ4XBtF-.mjs';
+import { R as Rule } from '../_shared/esm/Rule-Bz3QPezk.mjs';
+import '../_shared/esm/Combination-BW0YAEZD.mjs';
 import 'react/jsx-runtime';
 import 'react-dom';
-import '../_shared/esm/index-GCEHSsY8.mjs';
+import '../_shared/esm/index-BMmvMegf.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
 import '../_shared/esm/SemanticHeading-DpEBq7pG.mjs';
@@ -55,6 +55,17 @@ var Drawer = function (_a) {
         var newHeight = dragRef.current.startH - dragRef.current.deltaY;
         setDrawerHeight(Math.round(newHeight));
     };
+    var onHandleDown = function (e) {
+        if (!contentRef.current)
+            return;
+        dragRef.current.active = true;
+        // record where the pointer was when dragging started
+        dragRef.current.startY = e.clientY;
+        // record inital height of drawer
+        dragRef.current.startH = contentRef.current.clientHeight;
+        // keep moving drawer even if cursor has left pill
+        e.target.setPointerCapture(e.pointerId);
+    };
     var resolveToPx = function (input) {
         // if already a number, assume px
         if (typeof input === "number")
@@ -71,19 +82,24 @@ var Drawer = function (_a) {
         var numericValue = Number(str);
         return Number.isFinite(numericValue) ? numericValue : undefined;
     };
-    var onHandleUpCore = function (e) {
-        if (!dragRef.current.active || !contentRef.current)
+    var onHandleUpCore = function (e, keyboardDeltaY) {
+        if (!contentRef.current)
             return;
+        // if the user scrolls down
         if (dragDownToDismiss && contentRef.current.clientHeight < 100) {
             dragRef.current.active = false;
             dragRef.current.deltaY = 0;
-            e.currentTarget.releasePointerCapture(e.pointerId);
+            if (e instanceof PointerEvent && (e === null || e === void 0 ? void 0 : e.currentTarget)) {
+                e.currentTarget.releasePointerCapture(e.pointerId);
+            }
             setDrawerHeight(undefined);
             onRequestClose();
             return;
         }
         dragRef.current.active = false;
-        e.currentTarget.releasePointerCapture(e.pointerId);
+        if (e instanceof PointerEvent && (e === null || e === void 0 ? void 0 : e.currentTarget)) {
+            e.currentTarget.releasePointerCapture(e.pointerId);
+        }
         var currentHeight = contentRef.current.clientHeight;
         // turn all snapPoints into px values. Order the values.
         var snapsPx = (normalisedSnapPoints !== null && normalisedSnapPoints !== void 0 ? normalisedSnapPoints : [])
@@ -91,9 +107,9 @@ var Drawer = function (_a) {
             .filter(function (value) { return value !== undefined; }) // remove undefined values
             .sort(function (a, b) { return a - b; });
         var targetSnap = undefined;
+        var deltaY = Math.sign(dragRef.current.deltaY);
         if (snapBehaviour === "next") {
-            var deltaY = Math.sign(dragRef.current.deltaY);
-            if (deltaY === -1) {
+            if (deltaY <= -1) {
                 // User scrolled up
                 for (var i = 0; i < snapsPx.length; i++) {
                     if (snapsPx[i] > currentHeight) {
@@ -105,7 +121,7 @@ var Drawer = function (_a) {
                     }
                 }
             }
-            else if (deltaY === 1) {
+            else if (deltaY >= 1) {
                 // User scrolled down
                 for (var i = 0; i < snapsPx.length; i++) {
                     if (snapsPx[i] < currentHeight) {
@@ -146,17 +162,6 @@ var Drawer = function (_a) {
         }
         setDrawerHeight(targetSnap);
     };
-    var onHandleDown = function (e) {
-        if (!contentRef.current)
-            return;
-        dragRef.current.active = true;
-        // record where the pointer was when dragging started
-        dragRef.current.startY = e.clientY;
-        // record inital height of drawer
-        dragRef.current.startH = contentRef.current.clientHeight;
-        // keep moving drawer even if cursor has left pill
-        e.target.setPointerCapture(e.pointerId);
-    };
     return (React__default.createElement("div", { ref: setThemeElement },
         React__default.createElement(Root, { open: isOpen },
             React__default.createElement(Portal, { container: themeElement },
@@ -173,29 +178,32 @@ var Drawer = function (_a) {
                                 React__default.createElement("button", { "aria-label": "close", onClick: onRequestClose, className: "arc-Drawer-closeButton" },
                                     React__default.createElement(ThemeIcon, { size: 32, icon: "drawerClose" })),
                                 draggable && position === "bottom" && (React__default.createElement("div", { className: "arc-Drawer-dragHandle", onPointerDown: onHandleDown, onPointerUp: onHandleUp, onPointerMove: onHandleMove, onClick: onHandleClick, role: "separator", "aria-label": "Drag to resize the drawer" },
-                                    React__default.createElement("div", { className: "arc-Drawer-dragHandlePill", "data-testid": "arc-Drawer-dragHandlePill" })))),
+                                    React__default.createElement("div", { className: "arc-Drawer-dragHandlePill", tabIndex: -1, "data-testid": "arc-Drawer-dragHandlePill" })))),
                             children)))))));
 };
 
 var DrawerHeader = function (_a) {
-    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, isResponsive = _a.isResponsive, props = __rest(_a, ["title", "isFixed", "isResponsive"]);
+    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, isResponsive = _a.isResponsive, children = _a.children, _c = _a.isFullBleed, isFullBleed = _c === void 0 ? false : _c, _d = _a.titleWordWrap, titleWordWrap = _d === void 0 ? false : _d, props = __rest(_a, ["title", "isFixed", "isResponsive", "children", "isFullBleed", "titleWordWrap"]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", __assign({ className: classNames("arc-DrawerHeader", {
                 "arc-DrawerHeader--isFixed": isFixed,
+                "arc-DrawerHeader--isFullBleed": isFullBleed,
             }) }, filterAttrs(props)),
             React__default.createElement("div", { className: "arc-DrawerHeader-content" },
-                React__default.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
+                title && !children && (React__default.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
                     React__default.createElement(Title, { asChild: true },
-                        React__default.createElement(Heading, { isResponsive: isResponsive, size: "m" }, title)))),
+                        React__default.createElement(Heading, { isResponsive: isResponsive, size: "m", isWordWrap: titleWordWrap }, title)))),
+                children && !title && children),
             isFixed && (React__default.createElement("div", { className: "arc-DrawerHeader-divider" },
                 React__default.createElement(Rule, null))))));
 };
 
 var DrawerFooter = function (_a) {
-    var isFixed = _a.isFixed, children = _a.children;
+    var isFixed = _a.isFixed, _b = _a.isFullBleed, isFullBleed = _b === void 0 ? false : _b, children = _a.children;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: classNames("arc-DrawerFooter", {
                 "arc-DrawerFooter--isFixed": isFixed,
+                "arc-DrawerFooter--isFullBleed": isFullBleed,
             }) },
             isFixed && (React__default.createElement("div", { className: "arc-DrawerFooter-divider" },
                 React__default.createElement(Rule, null))),

package/lib/Drawer/styles.css

@@ -1 +1 @@
-.arc-v12-0-0 .arc .arc-DrawerHeader{background-color:#ffffff;padding:24px 24px 0;position:relative;z-index:3}.arc-v12-0-0 .arc .arc-DrawerHeader--isFixed{left:0;padding:24px;position:sticky;top:0;width:100%}.arc-v12-0-0 .arc .arc-DrawerHeader-content{align-items:baseline;display:flex}.arc-v12-0-0 .arc .arc-DrawerHeader-titleContainer{flex:1 1 auto;margin-right:15px;position:relative}.arc-v12-0-0 .arc .arc-DrawerHeader-divider{bottom:0;left:0;position:absolute;width:100%}.arc-v12-0-0 .arc .arc-DrawerFooter{background-color:#ffffff;margin-top:auto;padding:0 24px 24px}.arc-v12-0-0 .arc .arc-DrawerFooter--isFixed{bottom:0;left:0;padding:24px;position:sticky;width:100%}.arc-v12-0-0 .arc .arc-DrawerFooter-divider{left:0;position:absolute;top:0;width:100%}.arc-v12-0-0 .arc .arc-DrawerContent{grid-area:2/1/2/2;padding:24px;position:relative}.arc-v12-0-0 .arc .arc-DrawerContent--isFullBleed{height:100%;padding:0}.arc-v12-0-0 .arc .arc-DrawerContent-section{overflow-y:scroll}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom .arc-DrawerHeader--isFixed~.arc-DrawerContent{overflow-y:auto}.arc-v12-0-0 .arc .arc-Drawer-overlay{align-items:center;display:flex;height:100%;justify-content:center;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:100}.arc-v12-0-0 .arc .arc-Drawer-overlay--visible{animation:overlay-show 0.3s ease;background-color:var(--overlay-colors-overlay-default)}.arc-v12-0-0 .arc .arc-Drawer-dragHandle{cursor:grab;display:flex;height:40px;justify-content:center;padding-top:16px;position:absolute;top:0;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:4}.arc-v12-0-0 .arc .arc-Drawer-dragHandlePill{background-color:black;border-radius:9999px;height:4px;opacity:0.4;width:44px}.arc-v12-0-0 .arc .arc-Drawer-slider--transition{transition:height 0.3s ease-in-out}.arc-v12-0-0 .arc .arc-Drawer-slider{background:#ffffff;box-shadow:var(--elevation-03);display:flex;flex-direction:column;overflow-y:auto;position:absolute}.arc-v12-0-0 .arc .arc-Drawer-slider--left,.arc-v12-0-0 .arc .arc-Drawer-slider--right{max-width:calc(100dvw - 44px)}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--s{height:362px}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--m{height:462px}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--l{height:100%}.arc-v12-0-0 .arc .arc-Drawer-slider--s{height:100%;width:408px}.arc-v12-0-0 .arc .arc-Drawer-slider--m{height:100%;width:520px}.arc-v12-0-0 .arc .arc-Drawer-slider--l{height:100%;width:612px}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom .arc-Drawer-slider--auto{height:auto}.arc-v12-0-0 .arc .arc-Drawer-slider--left .arc-Drawer-slider--auto,.arc-v12-0-0 .arc .arc-Drawer-slider--right .arc-Drawer-slider--auto{width:auto}.arc-v12-0-0 .arc .arc-Drawer-slider--right{animation:drawer-slide-left 0.3s ease;bottom:0;right:0;top:0}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom{animation:drawer-slide-up 0.3s ease;border-radius:24px 24px 0 0;bottom:0;left:0;max-height:calc(100dvh - 44px);right:0;width:100vw}.arc-v12-0-0 .arc .arc-Drawer-slider--left{animation:drawer-slide-right 0.3s ease;bottom:0;left:0;top:0}.arc-v12-0-0 .arc .arc-Drawer-closeButtonContainer{display:flex;height:32px;justify-content:flex-end;margin-bottom:-32px;padding-right:8px;padding-top:8px;position:sticky;top:0;z-index:4}.arc-v12-0-0 .arc .arc-Drawer-closeButton{background:#ffffff;border:none;border-radius:16px;cursor:pointer;height:32px;margin:0;outline:none;padding:0;z-index:6}.arc-v12-0-0 .arc .arc-Drawer-closeButton:focus-visible{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:-4px}.arc-v12-0-0 .arc .arc-Drawer-actionContainer{display:flex;flex:0 1 auto;flex-wrap:wrap;gap:8px;padding-left:8px}@keyframes overlay-show{from{opacity:1}to{opacity:1}}@keyframes drawer-slide-left{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes drawer-slide-right{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes drawer-slide-up{from{transform:translateY(100%)}to{transform:translateX(0)}}
+.arc-v13-0-0 .arc .arc-DrawerHeader{background-color:#ffffff;padding:24px 24px 0;position:relative;z-index:3}.arc-v13-0-0 .arc .arc-DrawerHeader--isFixed{left:0;padding:24px;position:sticky;top:0;width:100%}.arc-v13-0-0 .arc .arc-DrawerHeader-content{align-items:baseline;display:flex}.arc-v13-0-0 .arc .arc-DrawerHeader--isFullBleed{padding:0}.arc-v13-0-0 .arc .arc-DrawerHeader-titleContainer{flex:1 1 auto;margin-right:15px;position:relative}.arc-v13-0-0 .arc .arc-DrawerHeader-divider{bottom:0;left:0;position:absolute;width:100%}.arc-v13-0-0 .arc .arc-DrawerFooter{background-color:#ffffff;margin-top:auto;padding:0 24px 24px}.arc-v13-0-0 .arc .arc-DrawerFooter--isFixed{bottom:0;left:0;padding:24px;position:sticky;width:100%}.arc-v13-0-0 .arc .arc-DrawerFooter--isFullBleed{padding:0}.arc-v13-0-0 .arc .arc-DrawerFooter-divider{left:0;position:absolute;top:0;width:100%}.arc-v13-0-0 .arc .arc-DrawerContent{grid-area:2/1/2/2;padding:24px;position:relative}.arc-v13-0-0 .arc .arc-DrawerContent--isFullBleed{padding:0}.arc-v13-0-0 .arc .arc-DrawerContent-section{overflow-y:scroll}.arc-v13-0-0 .arc .arc-Drawer-overlay{align-items:center;display:flex;height:100%;justify-content:center;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:100}.arc-v13-0-0 .arc .arc-Drawer-overlay--visible{animation:overlay-show 0.3s ease;background-color:var(--overlay-colors-overlay-default)}.arc-v13-0-0 .arc .arc-Drawer-dragHandle{cursor:grab;display:flex;height:40px;justify-content:center;padding-top:4px;position:fixed;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:4}.arc-v13-0-0 .arc .arc-Drawer-dragHandlePill{background-color:var(--drawer-colors-light-fg-handle);border-radius:9999px;height:2px;outline:3px solid #ffffff;width:60px}.arc-v13-0-0 .arc .arc-Drawer-slider--transition{transition:height 0.3s ease-in-out}.arc-v13-0-0 .arc .arc-Drawer-slider{background:#ffffff;box-shadow:var(--elevation-03);display:flex;flex-direction:column;overflow-y:auto;position:absolute}.arc-v13-0-0 .arc .arc-Drawer-slider--left,.arc-v13-0-0 .arc .arc-Drawer-slider--right{max-width:calc(100dvw - 44px)}.arc-v13-0-0 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--s{height:356px}.arc-v13-0-0 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--m{height:524px}.arc-v13-0-0 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--l{height:100%}.arc-v13-0-0 .arc .arc-Drawer-slider--s{height:100%;width:312px}.arc-v13-0-0 .arc .arc-Drawer-slider--m{height:100%;width:520px}.arc-v13-0-0 .arc .arc-Drawer-slider--l{height:100%;width:728px}.arc-v13-0-0 .arc .arc-Drawer-slider--bottom .arc-Drawer-slider--auto{height:auto}.arc-v13-0-0 .arc .arc-Drawer-slider--left .arc-Drawer-slider--auto,.arc-v13-0-0 .arc .arc-Drawer-slider--right .arc-Drawer-slider--auto{width:auto}.arc-v13-0-0 .arc .arc-Drawer-slider--right{animation:drawer-slide-left 0.3s ease;bottom:0;right:0;top:0}.arc-v13-0-0 .arc .arc-Drawer-slider--bottom{animation:drawer-slide-up 0.3s ease;border-radius:24px 24px 0 0;bottom:0;left:0;max-height:calc(100dvh - 44px);right:0;width:100vw}.arc-v13-0-0 .arc .arc-Drawer-slider--left{animation:drawer-slide-right 0.3s ease;bottom:0;left:0;top:0}.arc-v13-0-0 .arc .arc-Drawer-closeButtonContainer{height:32px;margin-bottom:-32px;position:absolute;right:8px;top:8px;width:32px;z-index:4}.arc-v13-0-0 .arc .arc-Drawer-slider--draggable .arc-Drawer-closeButtonContainer{display:flex;justify-content:flex-end;position:static;width:100%}.arc-v13-0-0 .arc .arc-Drawer-slider[\:has\(.arc-DrawerHeader--isFixed\)] .arc-Drawer-closeButtonContainer{margin-left:auto;position:sticky}.arc-v13-0-0 .arc .arc-Drawer-slider:has(.arc-DrawerHeader--isFixed) .arc-Drawer-closeButtonContainer{margin-left:auto;position:sticky}.arc-v13-0-0 .arc .arc-Drawer-closeButton{background:#ffffff;border:none;border-radius:16px;cursor:pointer;height:32px;margin:0;outline:none;padding:0;z-index:6}.arc-v13-0-0 .arc .arc-Drawer-slider--draggable .arc-Drawer-closeButton{margin-right:8px;margin-top:8px}.arc-v13-0-0 .arc .arc-Drawer-closeButton:focus-visible{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:-2px}.arc-v13-0-0 .arc .arc-Drawer-slider[\:has\(.arc-DrawerHeader--isFixed\)] .arc-Drawer-closeButton{margin-top:0}.arc-v13-0-0 .arc .arc-Drawer-slider:has(.arc-DrawerHeader--isFixed) .arc-Drawer-closeButton{margin-top:0}.arc-v13-0-0 .arc .arc-Drawer-actionContainer{display:flex;flex:0 1 auto;flex-wrap:wrap;gap:8px;padding-left:8px}@keyframes overlay-show{from{opacity:1}to{opacity:1}}@keyframes drawer-slide-left{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes drawer-slide-right{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes drawer-slide-up{from{transform:translateY(100%)}to{transform:translateX(0)}}

package/lib/Elevation/styles.css

@@ -1 +1 @@
-.arc-v12-0-0 .arc .arc-Elevation{background:transparent;border-radius:var(--sem-border-radius-s);max-width:100%;width:-moz-max-content;width:max-content}.arc-v12-0-0 .arc .arc-Elevation--fullWidth{width:100%}.arc-v12-0-0 .arc .arc-Elevation .arc-Elevation{border-radius:0;box-shadow:none}.arc-v12-0-0 .arc .arc-Elevation--levelOne{box-shadow:var(--elevation-01)}.arc-v12-0-0 .arc .arc-Elevation--levelTwo{box-shadow:var(--elevation-02)}.arc-v12-0-0 .arc .arc-Elevation--levelThree{box-shadow:var(--elevation-03)}.arc-v12-0-0 .arc .arc-Elevation--levelFour{box-shadow:var(--elevation-04)}.arc-v12-0-0 .arc .arc-Elevation--levelFive{box-shadow:var(--elevation-05)}
+.arc-v13-0-0 .arc .arc-Elevation{background:transparent;border-radius:var(--sem-border-radius-s);max-width:100%;width:-moz-max-content;width:max-content}.arc-v13-0-0 .arc .arc-Elevation--fullWidth{width:100%}.arc-v13-0-0 .arc .arc-Elevation .arc-Elevation{border-radius:0;box-shadow:none}.arc-v13-0-0 .arc .arc-Elevation--levelOne{box-shadow:var(--elevation-01)}.arc-v13-0-0 .arc .arc-Elevation--levelTwo{box-shadow:var(--elevation-02)}.arc-v13-0-0 .arc .arc-Elevation--levelThree{box-shadow:var(--elevation-03)}.arc-v13-0-0 .arc .arc-Elevation--levelFour{box-shadow:var(--elevation-04)}.arc-v13-0-0 .arc .arc-Elevation--levelFive{box-shadow:var(--elevation-05)}

package/lib/Filter/styles.css

@@ -1 +1 @@
-.arc-v12-0-0 .arc .arc-FilterControls{display:flex;flex-wrap:wrap;gap:var(--filter-gap-l);justify-content:center;margin-bottom:var(--filter-margin-m)}.arc-v12-0-0 .arc .arc-FilterControls--alignLeft{justify-content:left}.arc-v12-0-0 .arc .arc-FilterControls--alignRight{justify-content:right}.arc-v12-0-0 .arc .arc-FilterControl{align-items:center;background:var(--filter-colors-light-bg-default);border:none;border-radius:var(--filter-border-radius-s);display:flex;height:var(--filter-size-s);outline:var(--filter-border-weight-s) solid var(--filter-colors-light-border-default);outline-offset:calc(var(--filter-border-weight-s) * -1);padding:var(--filter-padding-s) var(--filter-padding-m);position:relative;width:-moz-fit-content;width:fit-content}.arc-v12-0-0 .arc .arc-FilterControl-text{color:var(--filter-colors-light-text-default);font:var(--sem-type-interface-semi-xs)}.arc-v12-0-0 .arc .arc-FilterControl--selected .arc-FilterControl-text{color:var(--filter-colors-light-text-default-alt)}.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface .arc-FilterControl-text{color:var(--filter-colors-dark-text-default-alt)}.arc-v12-0-0 .arc .arc-FilterControl:hover{cursor:pointer;outline-color:var(--filter-colors-light-border-hover);outline-offset:calc(var(--filter-border-weight-m) * -1);outline-width:var(--filter-border-weight-m)}.arc-v12-0-0 .arc .arc-FilterControl:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-hover)}.arc-v12-0-0 .arc .arc-FilterControl--selected:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-default-alt)}.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface:hover .arc-FilterControl-text{color:var(--filter-colors-dark-text-hover)}.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected .arc-FilterControl-text,.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-default)}.arc-v12-0-0 .arc .arc-FilterControl--selected{background:var(--filter-colors-light-bg-selected);outline-color:transparent}.arc-v12-0-0 .arc .arc-FilterControl--selected::after,.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected::after{content:none}.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface{background:var(--filter-colors-dark-bg-default);outline-color:var(--filter-colors-dark-border-default)}.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface::after{background:var(--filter-colors-dark-border-default) border-box;border:var(--filter-border-weight-s) solid transparent;border-radius:var(--filter-border-radius-s);bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);-webkit-mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);-webkit-mask:linear-gradient(#ffffff 0 0) padding-box,linear-gradient(#ffffff 0 0);mask:linear-gradient(#ffffff 0 0) padding-box,linear-gradient(#ffffff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;position:absolute;right:0;top:0}.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected{background:var(--filter-colors-dark-bg-selected);color:var(--filter-colors-light-text-default);outline-color:transparent}.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface:hover{outline-color:var(--filter-colors-dark-border-hover)}.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface:hover::after{content:none}.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected:hover{outline-color:var(--filter-colors-dark-border-hover)}.arc-v12-0-0 .arc .arc-FilterControl:focus-visible::before{border:2px solid var(--focus-colors-light-border-subtle);border-radius:var(--filter-border-radius-s);bottom:-3px;content:"";left:-3px;position:absolute;right:-3px;top:-3px}.arc-v12-0-0 .arc .arc-FilterControl--onDarkSurface:focus-visible::before{border-color:var(--focus-colors-dark-border-subtle)}:root{--arc-filter-items-grid-column-width:1fr;--arc-filter-items-grid-gap:16px}.arc-v12-0-0 .arc .arc-FilterItems--grid{display:grid;grid-gap:var(--arc-filter-items-grid-gap)}.arc-v12-0-0 .arc .arc-FilterItems--list{display:grid;grid-gap:var(--arc-filter-items-grid-gap);grid-template-columns:var(--arc-filter-items-grid-column-width)}.arc-v12-0-0 .arc .arc-FilterItems-separator{background-color:var(--sem-color-bg-secondary-dark-strong);height:1px;margin:10px 0}@media (min-width:636px){.arc-v12-0-0 .arc .arc-FilterItems--grid{grid-template-columns:var(--arc-filter-items-grid-column-width)}}@media (min-width:768px){.arc-v12-0-0 .arc .arc-FilterItems--grid{grid-template-columns:repeat(2,var(--arc-filter-items-grid-column-width))}}@media (min-width:1024px){.arc-v12-0-0 .arc .arc-FilterItems--grid{grid-template-columns:repeat(3,var(--arc-filter-items-grid-column-width))}.arc-v12-0-0 .arc .arc-FilterItems-offscreen{clip:rect(1px,1px,1px,1px);height:1px;margin-top:-1px;overflow:hidden;position:relative;width:1px}}.arc-v12-0-0 .arc .arc-Filter-content{display:flex;flex-wrap:wrap}
+.arc-v13-0-0 .arc .arc-FilterControls{display:flex;flex-wrap:wrap;gap:var(--filter-gap-l);justify-content:center;margin-bottom:var(--filter-margin-m)}.arc-v13-0-0 .arc .arc-FilterControls--alignLeft{justify-content:left}.arc-v13-0-0 .arc .arc-FilterControls--alignRight{justify-content:right}.arc-v13-0-0 .arc .arc-FilterControl{align-items:center;background:var(--filter-colors-light-bg-default);border:none;border-radius:var(--filter-border-radius-s);display:flex;height:var(--filter-size-s);outline:var(--filter-border-weight-s) solid var(--filter-colors-light-border-default);outline-offset:calc(var(--filter-border-weight-s) * -1);padding:var(--filter-padding-s) var(--filter-padding-m);position:relative;width:-moz-fit-content;width:fit-content}.arc-v13-0-0 .arc .arc-FilterControl-text{color:var(--filter-colors-light-text-default);font:var(--sem-type-interface-semi-xs)}.arc-v13-0-0 .arc .arc-FilterControl--selected .arc-FilterControl-text{color:var(--filter-colors-light-text-default-alt)}.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface .arc-FilterControl-text{color:var(--filter-colors-dark-text-default-alt)}.arc-v13-0-0 .arc .arc-FilterControl:hover{cursor:pointer;outline-color:var(--filter-colors-light-border-hover);outline-offset:calc(var(--filter-border-weight-m) * -1);outline-width:var(--filter-border-weight-m)}.arc-v13-0-0 .arc .arc-FilterControl:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-hover)}.arc-v13-0-0 .arc .arc-FilterControl--selected:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-default-alt)}.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface:hover .arc-FilterControl-text{color:var(--filter-colors-dark-text-hover)}.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected .arc-FilterControl-text,.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-default)}.arc-v13-0-0 .arc .arc-FilterControl--selected{background:var(--filter-colors-light-bg-selected);outline-color:transparent}.arc-v13-0-0 .arc .arc-FilterControl--selected::after,.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected::after{content:none}.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface{background:var(--filter-colors-dark-bg-default);outline-color:var(--filter-colors-dark-border-default)}.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface::after{background:var(--filter-colors-dark-border-default) border-box;border:var(--filter-border-weight-s) solid transparent;border-radius:var(--filter-border-radius-s);bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);-webkit-mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);-webkit-mask:linear-gradient(#ffffff 0 0) padding-box,linear-gradient(#ffffff 0 0);mask:linear-gradient(#ffffff 0 0) padding-box,linear-gradient(#ffffff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;position:absolute;right:0;top:0}.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected{background:var(--filter-colors-dark-bg-selected);color:var(--filter-colors-light-text-default);outline-color:transparent}.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface:hover{outline-color:var(--filter-colors-dark-border-hover)}.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface:hover::after{content:none}.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected:hover{outline-color:var(--filter-colors-dark-border-hover)}.arc-v13-0-0 .arc .arc-FilterControl:focus-visible::before{border:2px solid var(--focus-colors-light-border-subtle);border-radius:var(--filter-border-radius-s);bottom:-3px;content:"";left:-3px;position:absolute;right:-3px;top:-3px}.arc-v13-0-0 .arc .arc-FilterControl--onDarkSurface:focus-visible::before{border-color:var(--focus-colors-dark-border-subtle)}:root{--arc-filter-items-grid-column-width:1fr;--arc-filter-items-grid-gap:16px}.arc-v13-0-0 .arc .arc-FilterItems--grid{display:grid;grid-gap:var(--arc-filter-items-grid-gap)}.arc-v13-0-0 .arc .arc-FilterItems--list{display:grid;grid-gap:var(--arc-filter-items-grid-gap);grid-template-columns:var(--arc-filter-items-grid-column-width)}.arc-v13-0-0 .arc .arc-FilterItems-separator{background-color:var(--sem-color-bg-secondary-dark-strong);height:1px;margin:10px 0}@media (min-width:636px){.arc-v13-0-0 .arc .arc-FilterItems--grid{grid-template-columns:var(--arc-filter-items-grid-column-width)}}@media (min-width:768px){.arc-v13-0-0 .arc .arc-FilterItems--grid{grid-template-columns:repeat(2,var(--arc-filter-items-grid-column-width))}}@media (min-width:1024px){.arc-v13-0-0 .arc .arc-FilterItems--grid{grid-template-columns:repeat(3,var(--arc-filter-items-grid-column-width))}.arc-v13-0-0 .arc .arc-FilterItems-offscreen{clip:rect(1px,1px,1px,1px);height:1px;margin-top:-1px;overflow:hidden;position:relative;width:1px}}.arc-v13-0-0 .arc .arc-Filter-content{display:flex;flex-wrap:wrap}

package/lib/FormControl/styles.css

@@ -1 +1 @@
-.arc-v12-0-0 .arc .arc-FormControl{border:none;margin:0;padding:0;width:100%}.arc-v12-0-0 .arc .arc-FormControl-label{color:var(--form-control-colors-light-text-default);display:block;font:var(--form-control-type-label-default-l);margin-bottom:var(--form-control-space-gap-m);padding:0}.arc-v12-0-0 .arc .arc-FormControl-labelText--withOptional{margin-right:var(--form-control-space-gap-s)}.arc-v12-0-0 .arc .arc-FormControl--sideLabel{align-items:center;display:flex;flex-direction:row}.arc-v12-0-0 .arc .arc-FormControl--sideLabel .arc-FormControl-label{margin-right:var(--form-control-space-gap-m)}.arc-v12-0-0 .arc .arc-FormControl-helper{color:var(--form-control-colors-light-text-default);font:var(--form-control-type-helper-default-l)}.arc-v12-0-0 .arc .arc-FormControl-error{align-items:flex-start;color:var(--form-control-colors-light-text-error);display:flex;font:var(--form-control-type-helper-default-m)}.arc-v12-0-0 .arc .arc-FormControl-labelOptional{color:var(--form-control-colors-light-text-default);font:var(--form-control-type-optional-default-s)}.arc-v12-0-0 .arc .arc-FormControl-supplementaryInfo{padding-left:var(--form-control-space-gap-m)}.arc-v12-0-0 .arc .arc-FormControl-info{align-items:flex-start;display:flex;justify-content:flex-end}.arc-v12-0-0 .arc .arc-FormControl-info--hasContent{margin-top:var(--form-control-space-gap-m)}.arc-v12-0-0 .arc .arc-FormControl-helperContainer{flex:1 1 auto}.arc-v12-0-0 .arc .arc-FormControl--s .arc-FormControl-label{font:var(--form-control-type-label-default-s)}.arc-v12-0-0 .arc .arc-FormControl--s .arc-FormControl-helper{font:var(--form-control-type-helper-default-s)}.arc-v12-0-0 .arc .arc-FormControl--s .arc-FormControl-labelOptional{font:var(--form-control-type-optional-default-s)}.arc-v12-0-0 .arc .arc-FormControl--m .arc-FormControl-label{font:var(--form-control-type-label-default-m)}.arc-v12-0-0 .arc .arc-FormControl--m .arc-FormControl-labelOptional{font:var(--form-control-type-optional-default-s)}.arc-v12-0-0 .arc .arc-FormControl--m .arc-FormControl-helper{font:var(--form-control-type-helper-default-m)}.arc-v12-0-0 .arc .arc-FormControl .arc-FormControl-helper--underLabel{margin-bottom:var(--form-control-space-gap-m);margin-top:0}.arc-v12-0-0 .arc .arc-FormControl-label--withHelperUnderLabel{margin-bottom:0}.arc-v12-0-0 .arc .arc-FormControl-label[\:has\(\%2B\%20.arc-VerticalSpace\)],.arc-v12-0-0 .arc .arc-FormControl .arc-FormControl-helper--underLabel[\:has\(\%2B\%20.arc-VerticalSpace\)]{margin-bottom:0}.arc-v12-0-0 .arc .arc-FormControl-label:has(+.arc-VerticalSpace),.arc-v12-0-0 .arc .arc-FormControl .arc-FormControl-helper--underLabel:has(+.arc-VerticalSpace){margin-bottom:0}.arc-v12-0-0 .arc .arc-FormControl-label:empty{display:none}.arc-v12-0-0 .arc .arc-FormControl-error .arc-FormControl-error--icon{color:currentColor;content:"";flex-shrink:0;height:var(--form-control-size-icon);margin-right:4px;margin-top:-2px;width:var(--form-control-size-icon)}.arc-v12-0-0 .arc .arc-FormControl--onDarkSurface .arc-FormControl-label,.arc-v12-0-0 .arc .arc-FormControl--onDarkSurface .arc-FormControl-labelOptional,.arc-v12-0-0 .arc .arc-FormControl--onDarkSurface .arc-FormControl-helper{color:var(--form-control-colors-dark-text-default)}.arc-v12-0-0 .arc .arc-FormControl--onDarkSurface .arc-FormControl-error{color:var(--form-control-colors-dark-text-error)}.arc-v12-0-0 .arc .arc-FormControl--isDisabled .arc-FormControl-label,.arc-v12-0-0 .arc .arc-FormControl--isDisabled .arc-FormControl-labelOptional,.arc-v12-0-0 .arc .arc-FormControl--isDisabled .arc-FormControl-helper{color:var(--form-control-colors-light-text-disabled)}.arc-v12-0-0 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-label,.arc-v12-0-0 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-labelOptional,.arc-v12-0-0 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-helper{color:var(--form-control-colors-dark-text-disabled)}
+.arc-v13-0-0 .arc .arc-FormControl{border:none;margin:0;padding:0;width:100%}.arc-v13-0-0 .arc .arc-FormControl-label{color:var(--form-control-colors-light-text-default);display:block;font:var(--form-control-type-label-default-l);margin-bottom:var(--form-control-space-gap-m);padding:0}.arc-v13-0-0 .arc .arc-FormControl-labelText--withOptional{margin-right:var(--form-control-space-gap-s)}.arc-v13-0-0 .arc .arc-FormControl--sideLabel{align-items:center;display:flex;flex-direction:row}.arc-v13-0-0 .arc .arc-FormControl--sideLabel .arc-FormControl-label{margin-right:var(--form-control-space-gap-m)}.arc-v13-0-0 .arc .arc-FormControl-helper{color:var(--form-control-colors-light-text-default);font:var(--form-control-type-helper-default-l)}.arc-v13-0-0 .arc .arc-FormControl-error{align-items:flex-start;color:var(--form-control-colors-light-text-error);display:flex;font:var(--form-control-type-helper-default-m)}.arc-v13-0-0 .arc .arc-FormControl-labelOptional{color:var(--form-control-colors-light-text-default);font:var(--form-control-type-optional-default-s)}.arc-v13-0-0 .arc .arc-FormControl-supplementaryInfo{padding-left:var(--form-control-space-gap-m)}.arc-v13-0-0 .arc .arc-FormControl-info{align-items:flex-start;display:flex;justify-content:flex-end}.arc-v13-0-0 .arc .arc-FormControl-info--hasContent{margin-top:var(--form-control-space-gap-m)}.arc-v13-0-0 .arc .arc-FormControl-helperContainer{flex:1 1 auto}.arc-v13-0-0 .arc .arc-FormControl--s .arc-FormControl-label{font:var(--form-control-type-label-default-s)}.arc-v13-0-0 .arc .arc-FormControl--s .arc-FormControl-helper{font:var(--form-control-type-helper-default-s)}.arc-v13-0-0 .arc .arc-FormControl--s .arc-FormControl-labelOptional{font:var(--form-control-type-optional-default-s)}.arc-v13-0-0 .arc .arc-FormControl--m .arc-FormControl-label{font:var(--form-control-type-label-default-m)}.arc-v13-0-0 .arc .arc-FormControl--m .arc-FormControl-labelOptional{font:var(--form-control-type-optional-default-s)}.arc-v13-0-0 .arc .arc-FormControl--m .arc-FormControl-helper{font:var(--form-control-type-helper-default-m)}.arc-v13-0-0 .arc .arc-FormControl .arc-FormControl-helper--underLabel{margin-bottom:var(--form-control-space-gap-m);margin-top:0}.arc-v13-0-0 .arc .arc-FormControl-label--withHelperUnderLabel{margin-bottom:0}.arc-v13-0-0 .arc .arc-FormControl-label[\:has\(\%2B\%20.arc-VerticalSpace\)],.arc-v13-0-0 .arc .arc-FormControl .arc-FormControl-helper--underLabel[\:has\(\%2B\%20.arc-VerticalSpace\)]{margin-bottom:0}.arc-v13-0-0 .arc .arc-FormControl-label:has(+.arc-VerticalSpace),.arc-v13-0-0 .arc .arc-FormControl .arc-FormControl-helper--underLabel:has(+.arc-VerticalSpace){margin-bottom:0}.arc-v13-0-0 .arc .arc-FormControl-label:empty{display:none}.arc-v13-0-0 .arc .arc-FormControl-error .arc-FormControl-error--icon{color:currentColor;content:"";flex-shrink:0;height:var(--form-control-size-icon);margin-right:4px;margin-top:-2px;width:var(--form-control-size-icon)}.arc-v13-0-0 .arc .arc-FormControl--onDarkSurface .arc-FormControl-label,.arc-v13-0-0 .arc .arc-FormControl--onDarkSurface .arc-FormControl-labelOptional,.arc-v13-0-0 .arc .arc-FormControl--onDarkSurface .arc-FormControl-helper{color:var(--form-control-colors-dark-text-default)}.arc-v13-0-0 .arc .arc-FormControl--onDarkSurface .arc-FormControl-error{color:var(--form-control-colors-dark-text-error)}.arc-v13-0-0 .arc .arc-FormControl--isDisabled .arc-FormControl-label,.arc-v13-0-0 .arc .arc-FormControl--isDisabled .arc-FormControl-labelOptional,.arc-v13-0-0 .arc .arc-FormControl--isDisabled .arc-FormControl-helper{color:var(--form-control-colors-light-text-disabled)}.arc-v13-0-0 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-label,.arc-v13-0-0 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-labelOptional,.arc-v13-0-0 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-helper{color:var(--form-control-colors-dark-text-disabled)}

package/lib/GhostedHeroBanner/GhostedHeroBanner.cjs

@@ -17,13 +17,13 @@ require('../_shared/cjs/Image-MS1rBzbW.cjs');
  *  Use `GhostedHeroBanner` to grab attention and convey the main message or purpose of a webpage
  */
 var GhostedHeroBanner = function (_a) {
-    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, props = tslib_es6.__rest(_a, ["heading", "headingLevel", "label", "text", "img", "children", "fontStyle"]);
+    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, _c = _a.headingWordWrap, headingWordWrap = _c === void 0 ? false : _c, props = tslib_es6.__rest(_a, ["heading", "headingLevel", "label", "text", "img", "children", "fontStyle", "headingWordWrap"]);
     return (React.createElement("div", tslib_es6.__assign({ className: "arc-GhostedHeroBanner" }, filterAttrs.filterAttrs(props)),
         React.createElement("div", { className: "arc-GhostedHeroBanner-content" },
             label && (React.createElement(React.Fragment, null,
                 React.createElement(Heading.Heading, { fontStyle: "overline" }, label),
                 React.createElement(VerticalSpace.VerticalSpace, { size: "8" }))),
-            React.createElement(Heading.Heading, { level: headingLevel, size: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle }, heading),
+            React.createElement(Heading.Heading, { level: headingLevel, size: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle, isWordWrap: headingWordWrap }, heading),
             text && (React.createElement(React.Fragment, null,
                 React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
                 React.createElement("span", { className: "arc-TemplateBanner-text" }, text))),

package/lib/GhostedHeroBanner/GhostedHeroBanner.mjs

@@ -15,13 +15,13 @@ import '../_shared/esm/Image-DLYifxlu.mjs';
  *  Use `GhostedHeroBanner` to grab attention and convey the main message or purpose of a webpage
  */
 var GhostedHeroBanner = function (_a) {
-    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, props = __rest(_a, ["heading", "headingLevel", "label", "text", "img", "children", "fontStyle"]);
+    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, _c = _a.headingWordWrap, headingWordWrap = _c === void 0 ? false : _c, props = __rest(_a, ["heading", "headingLevel", "label", "text", "img", "children", "fontStyle", "headingWordWrap"]);
     return (React__default.createElement("div", __assign({ className: "arc-GhostedHeroBanner" }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-GhostedHeroBanner-content" },
             label && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(Heading, { fontStyle: "overline" }, label),
                 React__default.createElement(VerticalSpace, { size: "8" }))),
-            React__default.createElement(Heading, { level: headingLevel, size: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle }, heading),
+            React__default.createElement(Heading, { level: headingLevel, size: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle, isWordWrap: headingWordWrap }, heading),
             text && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(VerticalSpace, { size: "16" }),
                 React__default.createElement("span", { className: "arc-TemplateBanner-text" }, text))),

package/lib/GhostedHeroBanner/styles.css

@@ -1 +1 @@
-.arc-v12-0-0 .arc .arc-GhostedHeroBanner{display:flex;flex-basis:0;flex-direction:column-reverse;gap:24px;margin:0 auto;max-width:1280px;min-height:268px}.arc-v12-0-0 .arc .arc-GhostedHeroBanner-content{flex:1}.arc-v12-0-0 .arc .arc-GhostedHeroBanner-image{flex:1}@media (min-width:768px){.arc-v12-0-0 .arc .arc-GhostedHeroBanner{align-items:center;flex-direction:row}}@media (min-width:1024px){.arc-v12-0-0 .arc .arc-GhostedHeroBanner{min-height:358px}}@media (min-width:1280px){.arc-v12-0-0 .arc .arc-GhostedHeroBanner{gap:32px;min-height:454px}}
+.arc-v13-0-0 .arc .arc-GhostedHeroBanner{display:flex;flex-basis:0;flex-direction:column-reverse;gap:24px;margin:0 auto;max-width:1280px;min-height:268px}.arc-v13-0-0 .arc .arc-GhostedHeroBanner-content{flex:1}.arc-v13-0-0 .arc .arc-GhostedHeroBanner-image{flex:1}@media (min-width:768px){.arc-v13-0-0 .arc .arc-GhostedHeroBanner{align-items:center;flex-direction:row}}@media (min-width:1024px){.arc-v13-0-0 .arc .arc-GhostedHeroBanner{min-height:358px}}@media (min-width:1280px){.arc-v13-0-0 .arc .arc-GhostedHeroBanner{gap:32px;min-height:454px}}

package/lib/GradientPageBackground/GradientPageBackground.cjs

@@ -5,12 +5,12 @@ var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-CTlXMLug.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
-var useMediaQuery = require('../_shared/cjs/use-media-query-DqZqShGX.cjs');
+var useMediaQuery = require('../_shared/cjs/use-media-query-BJV2IbHi.cjs');
 var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
-var arcBreakpoints = require('../_shared/cjs/arc-breakpoints-Cl4-g1TC.cjs');
+var arcBreakpoints = require('../_shared/cjs/arc-breakpoints-uADxN-b4.cjs');
 var ClientSideVisible = require('../_shared/cjs/ClientSideVisible-BhW-T6kb.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
-require('../_shared/cjs/index.es-Dbvw_3_e.cjs');
+require('../_shared/cjs/index.es-BAsay4oe.cjs');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);

package/lib/GradientPageBackground/GradientPageBackground.mjs

@@ -4,12 +4,12 @@ import * as React from 'react';
 import React__default, { useMemo } from 'react';
 import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
-import { u as useMediaQuery } from '../_shared/esm/use-media-query-BmsMeo2M.mjs';
+import { u as useMediaQuery } from '../_shared/esm/use-media-query-l6Sou0dd.mjs';
 import { S as Surface } from '../_shared/esm/Surface-C69KVzkY.mjs';
-import { a as ARC_MIN_S_BREAKPOINT, b as ARC_MIN_M_BREAKPOINT, c as ARC_MIN_L_BREAKPOINT, d as ARC_MIN_XL_BREAKPOINT, e as ARC_MIN_XXL_BREAKPOINT } from '../_shared/esm/arc-breakpoints-Br78xe-f.mjs';
+import { a as ARC_MIN_S_BREAKPOINT, b as ARC_MIN_M_BREAKPOINT, c as ARC_MIN_L_BREAKPOINT, d as ARC_MIN_XL_BREAKPOINT, e as ARC_MIN_XXL_BREAKPOINT } from '../_shared/esm/arc-breakpoints-ChQgbftE.mjs';
 import { C as ClientSideVisible } from '../_shared/esm/ClientSideVisible-D_iBE-3U.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
-import '../_shared/esm/index.es-f0R-yhhl.mjs';
+import '../_shared/esm/index.es-99J0r2va.mjs';
 
 var ScrimFade = function (_a) {
     var scrimFadeHeight = _a.scrimFadeHeight, scrimFadeSize = _a.scrimFadeSize, scrimFadePosition = _a.scrimFadePosition;

package/lib/GradientPageBackground/styles.css

@@ -1 +1 @@
-.arc-v12-0-0 .arc .arc-GradientPageBackground{overflow:clip;pointer-events:none;position:relative;width:100%}.arc-v12-0-0 .arc .arc-GradientPageBackground--top .arc-GradientPageBackground-svgWrapper{bottom:0;z-index:-2}.arc-v12-0-0 .arc .arc-GradientPageBackground--bottom .arc-GradientPageBackground-svgWrapper{z-index:-1}.arc-v12-0-0 .arc .arc-GradientPageBackground-content{pointer-events:auto;position:relative;z-index:1}.arc-v12-0-0 .arc .arc-GradientPageBackground-scrimFade{bottom:0;content:"";display:block;left:0;max-height:100%;pointer-events:none;position:absolute;right:0;width:100%;z-index:-1}.arc-v12-0-0 .arc .arc-GradientPageBackground-scrimFade--top{top:0;transform:rotate(180deg)}.arc-v12-0-0 .arc .arc-GradientPageBackground-scrimFade--bottom{bottom:-1px}.arc-v12-0-0 .arc .arc-GradientPageBackground .arc-GradientPageBackground-svgWrapper{bottom:0;height:100%;left:50%;pointer-events:none;position:absolute;right:0;top:0;transform:translateX(-50%);width:100%}.arc-v12-0-0 .arc .arc-GradientPageBackground .arc-GradientPageBackground-svgbg{-webkit-backface-visibility:hidden;backface-visibility:hidden;filter:blur(50px);height:calc(100% + 256px);margin:-128px;transform:translate3d(0,0,0);width:calc(100% + 256px)}@media (min-width:1280px){.arc-v12-0-0 .arc .arc-GradientPageBackground .arc-GradientPageBackground-svgWrapper{left:0;transform:translateX(0);width:100%}}
+.arc-v13-0-0 .arc .arc-GradientPageBackground{overflow:clip;pointer-events:none;position:relative;width:100%}.arc-v13-0-0 .arc .arc-GradientPageBackground--top .arc-GradientPageBackground-svgWrapper{bottom:0;z-index:-2}.arc-v13-0-0 .arc .arc-GradientPageBackground--bottom .arc-GradientPageBackground-svgWrapper{z-index:-1}.arc-v13-0-0 .arc .arc-GradientPageBackground-content{pointer-events:auto;position:relative;z-index:1}.arc-v13-0-0 .arc .arc-GradientPageBackground-scrimFade{bottom:0;content:"";display:block;left:0;max-height:100%;pointer-events:none;position:absolute;right:0;width:100%;z-index:-1}.arc-v13-0-0 .arc .arc-GradientPageBackground-scrimFade--top{top:0;transform:rotate(180deg)}.arc-v13-0-0 .arc .arc-GradientPageBackground-scrimFade--bottom{bottom:-1px}.arc-v13-0-0 .arc .arc-GradientPageBackground .arc-GradientPageBackground-svgWrapper{bottom:0;height:100%;left:50%;pointer-events:none;position:absolute;right:0;top:0;transform:translateX(-50%);width:100%}.arc-v13-0-0 .arc .arc-GradientPageBackground .arc-GradientPageBackground-svgbg{-webkit-backface-visibility:hidden;backface-visibility:hidden;filter:blur(50px);height:calc(100% + 256px);margin:-128px;transform:translate3d(0,0,0);width:calc(100% + 256px)}@media (min-width:1280px){.arc-v13-0-0 .arc .arc-GradientPageBackground .arc-GradientPageBackground-svgWrapper{left:0;transform:translateX(0);width:100%}}