@arc-ui/components 13.0.0 → 13.2.0

package/lib/TypographyCard/TypographyCard.mjs

@@ -1,38 +1,62 @@
 'use client';
-import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import { _ as __rest, a as __assign, b as __spreadArray } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useContext, useState } 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 { T as Text } from '../_shared/esm/Text-BAzOkkzN.mjs';
 import { H as Heading } from '../_shared/esm/Heading-Da-o0d5x.mjs';
 import { C as Context } from '../_shared/esm/Surface-C69KVzkY.mjs';
 import { C as CardHeading } from '../_shared/esm/CardHeading-CV14vmox.mjs';
 import { C as CardFooter } from '../_shared/esm/CardFooter-DX3Ym8M6.mjs';
 import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-BLWB02I7.mjs';
-import '../_shared/esm/index-Spae4j7j.mjs';
+import { C as ConditionalWrapper } from '../_shared/esm/ConditionalWrapper-CbEvXHTj.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
 import '../_shared/esm/SemanticHeading-DpEBq7pG.mjs';
 import '../_shared/esm/ThemeIcon-B0n6cKRb.mjs';
 import '../_shared/esm/index-Cr6KeQLU.mjs';
 
 /** Use `TypographyCard` for content that benefits from larger and energetic typography. */
 var TypographyCard = function (_a) {
-    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.labelLevel, labelLevel = _g === void 0 ? "3" : _g, _h = _a.headingWordWrap, headingWordWrap = _h === void 0 ? false : _h, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "headingSize", "linkData", "pathway", "buttonIcon", "headingLevel", "labelLevel", "headingWordWrap"]);
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, text = _a.text, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.labelLevel, labelLevel = _g === void 0 ? "3" : _g, _h = _a.headingWordWrap, headingWordWrap = _h === void 0 ? false : _h, preserveAspectRatios = _a.preserveAspectRatios, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "text", "minHeight", "headingSize", "linkData", "pathway", "buttonIcon", "headingLevel", "labelLevel", "headingWordWrap", "preserveAspectRatios"]);
     var surface = useContext(Context).surface;
     var _j = useState(false), showHoverState = _j[0], setShowHoverState = _j[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     var isDarkPathway = pathway === "dark";
-    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-TypographyCard", {
-            "arc-TypographyCard--outlined": showHoverState,
-            "arc-TypographyCard--darkPathway": isDarkPathway,
-            "arc-TypographyCard--lightPathway": !isDarkPathway,
-            "arc-TypographyCard--onDarkSurface": surface === "dark",
-        }) }, filterAttrs(props)),
-        React__default.createElement("div", { className: "arc-TypographyCard-contentContainer" },
-            label && (React__default.createElement("div", { className: "arc-TypographyCard-label" },
-                React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
-                React__default.createElement(VerticalSpace, { size: "16" }))),
-            React__default.createElement(CardHeading, { size: headingSize, linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap })),
-        React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
+    var CardText = function (_a) {
+        var text = _a.text;
+        var paragraphs = text.split(/\\n|\n/).filter(function (p) { return p.trim(); });
+        return paragraphs.map(function (paragraph, index) { return (React__default.createElement("div", { key: "informationcard-text-".concat(index) },
+            index > 0 && React__default.createElement(VerticalSpace, { size: "8" }),
+            React__default.createElement(Text, null, paragraph))); });
+    };
+    var aspectRatioClassNames = preserveAspectRatios
+        ? Object.entries(preserveAspectRatios)
+            .filter(function (_a) {
+            var value = _a[1];
+            return value;
+        })
+            .map(function (_a) {
+            var breakpoint = _a[0], ratio = _a[1];
+            return "arc-TypographyCard--preserveAspectRatio-".concat(breakpoint, "-").concat(ratio);
+        })
+        : [];
+    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(preserveAspectRatios), wrapper: function (children) { return (React__default.createElement("div", { className: "arc-TypographyCard--preserveAspectRatioWrapper" }, children)); } },
+        React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames.apply(void 0, __spreadArray(__spreadArray(["arc-TypographyCard"], aspectRatioClassNames, false), [{
+                    "arc-TypographyCard--outlined": showHoverState,
+                    "arc-TypographyCard--darkPathway": isDarkPathway,
+                    "arc-TypographyCard--lightPathway": !isDarkPathway,
+                    "arc-TypographyCard--onDarkSurface": surface === "dark",
+                }], false)) }, filterAttrs(props)),
+            React__default.createElement("div", { className: "arc-TypographyCard-contentContainer" },
+                label && (React__default.createElement("div", { className: "arc-TypographyCard-label" },
+                    React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
+                    React__default.createElement(VerticalSpace, { size: "16" }))),
+                React__default.createElement(CardHeading, { size: headingSize, linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap }),
+                text && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(VerticalSpace, { size: "16" }),
+                    React__default.createElement(CardText, { text: text })))),
+            React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState }))));
 };
 
 export { TypographyCard };

package/lib/TypographyCard/styles.css

@@ -1 +1 @@
-.arc-v13-0-0 .arc .arc-TypographyCard{border-radius:var(--card-border-radius-s);box-shadow:0 0 1px var(--card-border-weight-s) var(--card-colors-light-border-default);color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;overflow:hidden;padding:var(--card-padding-s);position:relative;transition:outline 0.2s ease-in-out}.arc-v13-0-0 .arc .arc-TypographyCard-contentContainer{display:flex;flex:1 1 auto;flex-direction:column;margin-bottom:24px}.arc-v13-0-0 .arc .arc-TypographyCard-label{color:var(--card-colors-light-text-support)}.arc-v13-0-0 .arc .arc-TypographyCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-border-hover)}.arc-v13-0-0 .arc .arc-TypographyCard--outlined:not(.arc-TypographyCard--darkPathway) .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc-v13-0-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined .arc-CardHeading{color:var(--card-colors-dark-text-hover)}.arc-v13-0-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined{box-shadow:0 0 0 2px var(--card-colors-dark-border-hover)}.arc-v13-0-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined[focus-within]{box-shadow:0 0 0 2px transparent}.arc-v13-0-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined:focus-within{box-shadow:0 0 0 2px transparent}.arc-v13-0-0 .arc .arc-TypographyCard--outlined[focus-within]{box-shadow:0 0 0 1px var(--card-colors-light-border-default);outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-0-0 .arc .arc-TypographyCard--outlined:focus-within{box-shadow:0 0 0 1px var(--card-colors-light-border-default);outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-0-0 .arc .arc-TypographyCard--lightPathway{background:var(--card-colors-light-bg-emphasis)}.arc-v13-0-0 .arc .arc-TypographyCard--darkPathway{background:var(--card-colors-dark-bg-emphasis);box-shadow:0 0 0 1px transparent;color:var(--card-colors-dark-text-default)}.arc-v13-0-0 .arc .arc-TypographyCard--darkPathway .arc-TypographyCard-label{color:var(--card-colors-dark-text-support)}.arc-v13-0-0 .arc .arc-TypographyCard--onDarkSurface.arc-TypographyCard--outlined[focus-within]{box-shadow:0 0 0 1px transparent;outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-0-0 .arc .arc-TypographyCard--onDarkSurface.arc-TypographyCard--outlined:focus-within{box-shadow:0 0 0 1px transparent;outline-color:var(--focus-colors-dark-border-subtle)}@media (min-width:636px){.arc-v13-0-0 .arc .arc-TypographyCard{padding:var(--card-padding-m)}}
+.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatioWrapper{container-type:inline-size;--arc-typographycard-aspect-ratio-3-4:calc(100cqw * 4 / 3);--arc-typographycard-aspect-ratio-10-16:calc(100cqw * 16 / 10)}.arc-v13-2-0 .arc .arc-TypographyCard{border-radius:var(--card-border-radius-s);box-shadow:0 0 1px var(--card-border-weight-s) var(--card-colors-light-border-default);color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;overflow:hidden;padding:var(--card-padding-s);position:relative;transition:outline 0.2s ease-in-out}.arc-v13-2-0 .arc .arc-TypographyCard-contentContainer{display:flex;flex:1 1 auto;flex-direction:column;margin-bottom:24px}.arc-v13-2-0 .arc .arc-TypographyCard-label{color:var(--card-colors-light-text-support)}.arc-v13-2-0 .arc .arc-TypographyCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-border-hover)}.arc-v13-2-0 .arc .arc-TypographyCard--outlined:not(.arc-TypographyCard--darkPathway) .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc-v13-2-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined .arc-CardHeading{color:var(--card-colors-dark-text-hover)}.arc-v13-2-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined{box-shadow:0 0 0 2px var(--card-colors-dark-border-hover)}.arc-v13-2-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined[\:has\(\%0A\%20\%20\%20\%20\:focus-visible\%0A\%20\%20\)]{box-shadow:0 0 0 2px transparent}.arc-v13-2-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined:has(:focus-visible){box-shadow:0 0 0 2px transparent}.arc-v13-2-0 .arc .arc-TypographyCard--outlined[\:has\(\:focus-visible\)]{box-shadow:0 0 0 1px var(--card-colors-light-border-default);outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-2-0 .arc .arc-TypographyCard--outlined:has(:focus-visible){box-shadow:0 0 0 1px var(--card-colors-light-border-default);outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-2-0 .arc .arc-TypographyCard--lightPathway{background:var(--card-colors-light-bg-emphasis)}.arc-v13-2-0 .arc .arc-TypographyCard--darkPathway{background:var(--card-colors-dark-bg-emphasis);box-shadow:0 0 0 1px transparent;color:var(--card-colors-dark-text-default)}.arc-v13-2-0 .arc .arc-TypographyCard--darkPathway .arc-TypographyCard-label{color:var(--card-colors-dark-text-support)}.arc-v13-2-0 .arc .arc-TypographyCard--onDarkSurface.arc-TypographyCard--outlined[\:has\(\%0A\%20\%20\%20\%20\:focus-visible\%0A\%20\%20\)]{box-shadow:0 0 0 1px transparent;outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-2-0 .arc .arc-TypographyCard--onDarkSurface.arc-TypographyCard--outlined:has(:focus-visible){box-shadow:0 0 0 1px transparent;outline-color:var(--focus-colors-dark-border-subtle)}@media (min-width:636px){.arc-v13-2-0 .arc .arc-TypographyCard{padding:var(--card-padding-m)}}.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-xs-3-4{min-height:var(--arc-typographycard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-xs-10-16{min-height:var(--arc-typographycard-aspect-ratio-10-16)}@media (min-width:636px){.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-s-3-4{min-height:var(--arc-typographycard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-s-10-16{min-height:var(--arc-typographycard-aspect-ratio-10-16)}}@media (min-width:768px){.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-m-3-4{min-height:var(--arc-typographycard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-m-10-16{min-height:var(--arc-typographycard-aspect-ratio-10-16)}}@media (min-width:1024px){.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-l-3-4{min-height:var(--arc-typographycard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-l-10-16{min-height:var(--arc-typographycard-aspect-ratio-10-16)}}@media (min-width:1280px){.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-xl-3-4{min-height:var(--arc-typographycard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-xl-10-16{min-height:var(--arc-typographycard-aspect-ratio-10-16)}}@media (min-width:1440px){.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-xxl-3-4{min-height:var(--arc-typographycard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-xxl-10-16{min-height:var(--arc-typographycard-aspect-ratio-10-16)}}@media (min-width:1920px){.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-xxxl-3-4{min-height:var(--arc-typographycard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-TypographyCard--preserveAspectRatio-xxxl-10-16{min-height:var(--arc-typographycard-aspect-ratio-10-16)}}

package/lib/UniversalHeader/UniversalHeader.cjs

@@ -4,19 +4,21 @@ 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 Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
-require('../_shared/cjs/index-DR8Rkav9.cjs');
+var Section = require('../_shared/cjs/Section-BorWFfNe.cjs');
 
 /**
  * Use `UniversalHeader` to display a group-level page header.
  */
 var UniversalHeader = function (_a) {
-    var children = _a.children, ContentSlot = _a.ContentSlot, props = tslib_es6.__rest(_a, ["children", "ContentSlot"]);
-    return (React.createElement("nav", tslib_es6.__assign({ className: "arc-UniversalHeader", "aria-label": "universial navigation" }, filterAttrs.filterAttrs(props)),
-        React.createElement(Surface.Surface, { background: "light-neutral-02" },
-            React.createElement("ul", { className: "arc-UniversalHeader-items" },
-                children,
-                ContentSlot && (React.createElement("li", { className: "arc-UniversalHeader-contentSlot" }, ContentSlot))))));
+    var children = _a.children, ContentSlot = _a.ContentSlot, _b = _a.isPill, isPill = _b === void 0 ? false : _b, _c = _a.isExtended, isExtended = _c === void 0 ? false : _c, _d = _a.isFluid, isFluid = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["children", "ContentSlot", "isPill", "isExtended", "isFluid"]);
+    return (React.createElement("nav", tslib_es6.__assign({ className: index.classNames("arc-UniversalHeader", {
+            "arc-UniversalHeader--pill": isPill,
+        }), "aria-label": "universial navigation" }, filterAttrs.filterAttrs(props)),
+        React.createElement(Section.Section, { isFullWidth: isFluid, isExtended: isExtended },
+            React.createElement("div", { className: "arc-UniversalHeader-content" },
+                React.createElement("ul", { className: "arc-UniversalHeader-items" },
+                    children,
+                    ContentSlot && (React.createElement("li", { className: "arc-UniversalHeader-contentSlot" }, ContentSlot)))))));
 };
 var UniversalHeaderItem = function (_a) {
     var children = _a.children, href = _a.href, _b = _a.isActive, isActive = _b === void 0 ? false : _b, props = tslib_es6.__rest(_a, ["children", "href", "isActive"]);

package/lib/UniversalHeader/UniversalHeader.mjs

@@ -2,19 +2,21 @@ import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mj
 import React__default 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 { S as Surface } from '../_shared/esm/Surface-C69KVzkY.mjs';
-import '../_shared/esm/index-Spae4j7j.mjs';
+import { S as Section } from '../_shared/esm/Section-COc1l3mp.mjs';
 
 /**
  * Use `UniversalHeader` to display a group-level page header.
  */
 var UniversalHeader = function (_a) {
-    var children = _a.children, ContentSlot = _a.ContentSlot, props = __rest(_a, ["children", "ContentSlot"]);
-    return (React__default.createElement("nav", __assign({ className: "arc-UniversalHeader", "aria-label": "universial navigation" }, filterAttrs(props)),
-        React__default.createElement(Surface, { background: "light-neutral-02" },
-            React__default.createElement("ul", { className: "arc-UniversalHeader-items" },
-                children,
-                ContentSlot && (React__default.createElement("li", { className: "arc-UniversalHeader-contentSlot" }, ContentSlot))))));
+    var children = _a.children, ContentSlot = _a.ContentSlot, _b = _a.isPill, isPill = _b === void 0 ? false : _b, _c = _a.isExtended, isExtended = _c === void 0 ? false : _c, _d = _a.isFluid, isFluid = _d === void 0 ? false : _d, props = __rest(_a, ["children", "ContentSlot", "isPill", "isExtended", "isFluid"]);
+    return (React__default.createElement("nav", __assign({ className: classNames("arc-UniversalHeader", {
+            "arc-UniversalHeader--pill": isPill,
+        }), "aria-label": "universial navigation" }, filterAttrs(props)),
+        React__default.createElement(Section, { isFullWidth: isFluid, isExtended: isExtended },
+            React__default.createElement("div", { className: "arc-UniversalHeader-content" },
+                React__default.createElement("ul", { className: "arc-UniversalHeader-items" },
+                    children,
+                    ContentSlot && (React__default.createElement("li", { className: "arc-UniversalHeader-contentSlot" }, ContentSlot)))))));
 };
 var UniversalHeaderItem = function (_a) {
     var children = _a.children, href = _a.href, _b = _a.isActive, isActive = _b === void 0 ? false : _b, props = __rest(_a, ["children", "href", "isActive"]);

package/lib/UniversalHeader/styles.css

@@ -1 +1 @@
-.arc-v13-0-0 .arc .arc-UniversalHeader{color:var(--universal-header-colors-light-text-default);position:relative}.arc-v13-0-0 .arc .arc-UniversalHeader::after,.arc-v13-0-0 .arc .arc-UniversalHeader::before{bottom:0;content:"";pointer-events:none;position:absolute;top:0}.arc-v13-0-0 .arc .arc-UniversalHeader::after{background-image:linear-gradient(to right,rgba(240,240,240,0),rgba(240,240,240,1) 100%);right:0;width:24px}.arc-v13-0-0 .arc .arc-UniversalHeader::before{background-image:linear-gradient(to left,rgba(240,240,240,0),rgba(240,240,240,1) 100%);left:0;width:16px}@media (min-width:636px){.arc-v13-0-0 .arc .arc-UniversalHeader::before{width:24px}}.arc-v13-0-0 .arc .arc-UniversalHeader-items{align-items:center;display:flex;list-style:none;margin:0 auto;max-width:620px;overflow-x:auto;padding-left:0;padding-right:var(--universal-header-padding-m)}@media (min-width:636px){.arc-v13-0-0 .arc .arc-UniversalHeader-items{max-width:1008px;padding-left:var(--universal-header-padding-m);padding-right:var(--universal-header-padding-m)}}@media (min-width:1024px){.arc-v13-0-0 .arc .arc-UniversalHeader-items{max-width:1280px;padding-left:var(--universal-header-padding-xl);padding-right:var(--universal-header-padding-xl)}}.arc-v13-0-0 .arc .arc-UniversalHeader-link{color:inherit;display:block;font:var(--sem-type-body-reg-xs);padding-top:calc(4px * 2);padding-bottom:calc(4px * 2);padding-left:calc(4px * 4);padding-right:calc(4px * 4);text-decoration:none;white-space:nowrap}.arc-v13-0-0 .arc .arc-UniversalHeader-link: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-UniversalHeader-link:hover{color:var(--universal-header-colors-light-text-hover);text-decoration:underline}.arc-v13-0-0 .arc .arc-UniversalHeader-link--isActive{background-color:var(--header-menu-colors-light-fg-default);color:var(--header-menu-colors-light-text-default-alt)}.arc-v13-0-0 .arc .arc-UniversalHeader-link--isActive:hover{color:var(--header-menu-colors-light-text-default-alt)}.arc-v13-0-0 .arc .arc-UniversalHeader-contentSlot{margin-left:auto}
+.arc-v13-2-0 .arc .arc-UniversalHeader{background:white;color:var(--universal-header-colors-light-text-default);position:relative}.arc-v13-2-0 .arc .arc-UniversalHeader--pill{background:transparent}.arc-v13-2-0 .arc .arc-UniversalHeader-content{padding:8px 8px 8px 0}.arc-v13-2-0 .arc .arc-UniversalHeader--pill .arc-UniversalHeader-content{background:white;border-radius:0 0 24px 24px;margin:0 -8px;padding:8px 16px 8px 8px}.arc-v13-2-0 .arc .arc-UniversalHeader-items{align-items:center;display:flex;gap:8px;list-style:none;margin:0;overflow-x:auto;padding:4px 0}.arc-v13-2-0 .arc .arc-UniversalHeader-link{border-radius:100px;color:inherit;display:block;font:var(--sem-type-body-reg-xs);padding:4px 12px;text-decoration:none;white-space:nowrap}.arc-v13-2-0 .arc .arc-UniversalHeader-link: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-2-0 .arc .arc-UniversalHeader-link:hover{color:var(--universal-header-colors-light-text-hover);text-decoration:none}.arc-v13-2-0 .arc .arc-UniversalHeader-link--isActive{background-color:var(--universal-header-colors-light-bg-default);color:var(--universal-header-colors-light-fg-default)}.arc-v13-2-0 .arc .arc-UniversalHeader-contentSlot{margin-left:auto}@media (min-width:636px){.arc-v13-2-0 .arc .arc-UniversalHeader-content{padding:8px 12px 8px 0}.arc-v13-2-0 .arc .arc-UniversalHeader--pill .arc-UniversalHeader-content{margin:0 -16px;padding:8px 24px 8px 16px}}@media (min-width:1440px){.arc-v13-2-0 .arc .arc-UniversalHeader--pill .arc-UniversalHeader-content{margin:0 -24px;padding:8px 32px 8px 24px}}

package/lib/VerticalSpace/styles.css

@@ -1 +1 @@
-.arc-v13-0-0 .arc .arc-VerticalSpace--size4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-0-0 .arc .arc-VerticalSpace--size4.arc-VerticalSpace--debugVisible::after{content:"Space 4";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1);top:calc(calc(0px - var(--vertical-space-size-4)) * 1)}.arc-v13-0-0 .arc .arc-VerticalSpace--size8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-0-0 .arc .arc-VerticalSpace--size8.arc-VerticalSpace--debugVisible::after{content:"Space 8";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-0-0 .arc .arc-VerticalSpace--size12.arc-VerticalSpace--debugVisible::after{content:"Space 12";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-0-0 .arc .arc-VerticalSpace--size16.arc-VerticalSpace--debugVisible::after{content:"Space 16";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-0-0 .arc .arc-VerticalSpace--size20.arc-VerticalSpace--debugVisible::after{content:"Space 20";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-0-0 .arc .arc-VerticalSpace--size24.arc-VerticalSpace--debugVisible::after{content:"Space 24";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-0-0 .arc .arc-VerticalSpace--size28.arc-VerticalSpace--debugVisible::after{content:"Space 28";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-0-0 .arc .arc-VerticalSpace--size32.arc-VerticalSpace--debugVisible::after{content:"Space 32";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-0-0 .arc .arc-VerticalSpace--size40.arc-VerticalSpace--debugVisible::after{content:"Space 40";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-0-0 .arc .arc-VerticalSpace--size48.arc-VerticalSpace--debugVisible::after{content:"Space 48";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-0-0 .arc .arc-VerticalSpace--size64.arc-VerticalSpace--debugVisible::after{content:"Space 64";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-0-0 .arc .arc-VerticalSpace--size96.arc-VerticalSpace--debugVisible::after{content:"Space 96";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--size128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-0-0 .arc .arc-VerticalSpace--size128.arc-VerticalSpace--debugVisible::after{content:"Space 128";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}@media (min-width:636px){.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS4.arc-VerticalSpace--debugVisible::after{content:"Space 4 S";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1px);top:calc(calc(0px - var(--vertical-space-size-4)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS8.arc-VerticalSpace--debugVisible::after{content:"Space 8 S";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS12.arc-VerticalSpace--debugVisible::after{content:"Space 12 S";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS16.arc-VerticalSpace--debugVisible::after{content:"Space 16 S";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS20.arc-VerticalSpace--debugVisible::after{content:"Space 20 S";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS24.arc-VerticalSpace--debugVisible::after{content:"Space 24 S";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS28.arc-VerticalSpace--debugVisible::after{content:"Space 28 S";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS32.arc-VerticalSpace--debugVisible::after{content:"Space 32 S";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS40.arc-VerticalSpace--debugVisible::after{content:"Space 40 S";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS48.arc-VerticalSpace--debugVisible::after{content:"Space 48 S";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS64.arc-VerticalSpace--debugVisible::after{content:"Space 64 S";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS96.arc-VerticalSpace--debugVisible::after{content:"Space 96 S";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeS128.arc-VerticalSpace--debugVisible::after{content:"Space 128 S";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}}@media (min-width:768px){.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM4.arc-VerticalSpace--debugVisible::after{content:"Space 4 M";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1px);top:calc(calc(0px - var(--vertical-space-size-4)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM8.arc-VerticalSpace--debugVisible::after{content:"Space 8 M";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM12.arc-VerticalSpace--debugVisible::after{content:"Space 12 M";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM16.arc-VerticalSpace--debugVisible::after{content:"Space 16 M";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM20.arc-VerticalSpace--debugVisible::after{content:"Space 20 M";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM24.arc-VerticalSpace--debugVisible::after{content:"Space 24 M";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM28.arc-VerticalSpace--debugVisible::after{content:"Space 28 M";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM32.arc-VerticalSpace--debugVisible::after{content:"Space 32 M";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM40.arc-VerticalSpace--debugVisible::after{content:"Space 40 M";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM48.arc-VerticalSpace--debugVisible::after{content:"Space 48 M";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM64.arc-VerticalSpace--debugVisible::after{content:"Space 64 M";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM96.arc-VerticalSpace--debugVisible::after{content:"Space 96 M";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeM128.arc-VerticalSpace--debugVisible::after{content:"Space 128 M";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}}@media (min-width:1024px){.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL4.arc-VerticalSpace--debugVisible::after{content:"Space 4 L";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1px);top:calc(calc(0px - var(--vertical-space-size-4)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL8.arc-VerticalSpace--debugVisible::after{content:"Space 8 L";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL12.arc-VerticalSpace--debugVisible::after{content:"Space 12 L";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL16.arc-VerticalSpace--debugVisible::after{content:"Space 16 L";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL20.arc-VerticalSpace--debugVisible::after{content:"Space 20 L";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL24.arc-VerticalSpace--debugVisible::after{content:"Space 24 L";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL28.arc-VerticalSpace--debugVisible::after{content:"Space 28 L";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL32.arc-VerticalSpace--debugVisible::after{content:"Space 32 L";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL40.arc-VerticalSpace--debugVisible::after{content:"Space 40 L";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL48.arc-VerticalSpace--debugVisible::after{content:"Space 48 L";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL64.arc-VerticalSpace--debugVisible::after{content:"Space 64 L";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL96.arc-VerticalSpace--debugVisible::after{content:"Space 96 L";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeL128.arc-VerticalSpace--debugVisible::after{content:"Space 128 L";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}}@media (min-width:1280px){.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL4.arc-VerticalSpace--debugVisible::after{content:"Space 4 XL";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1px);top:calc(calc(0px - var(--vertical-space-size-4)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL8.arc-VerticalSpace--debugVisible::after{content:"Space 8 XL";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL12.arc-VerticalSpace--debugVisible::after{content:"Space 12 XL";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL16.arc-VerticalSpace--debugVisible::after{content:"Space 16 XL";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL20.arc-VerticalSpace--debugVisible::after{content:"Space 20 XL";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL24.arc-VerticalSpace--debugVisible::after{content:"Space 24 XL";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL28.arc-VerticalSpace--debugVisible::after{content:"Space 28 XL";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL32.arc-VerticalSpace--debugVisible::after{content:"Space 32 XL";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL40.arc-VerticalSpace--debugVisible::after{content:"Space 40 XL";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL48.arc-VerticalSpace--debugVisible::after{content:"Space 48 XL";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL64.arc-VerticalSpace--debugVisible::after{content:"Space 64 XL";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL96.arc-VerticalSpace--debugVisible::after{content:"Space 96 XL";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXL128.arc-VerticalSpace--debugVisible::after{content:"Space 128 XL";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}}@media (min-width:1440px){.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL4.arc-VerticalSpace--debugVisible::after{content:"Space 4 XXL";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1px);top:calc(calc(0px - var(--vertical-space-size-4)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL8.arc-VerticalSpace--debugVisible::after{content:"Space 8 XXL";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL12.arc-VerticalSpace--debugVisible::after{content:"Space 12 XXL";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL16.arc-VerticalSpace--debugVisible::after{content:"Space 16 XXL";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL20.arc-VerticalSpace--debugVisible::after{content:"Space 20 XXL";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL24.arc-VerticalSpace--debugVisible::after{content:"Space 24 XXL";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL28.arc-VerticalSpace--debugVisible::after{content:"Space 28 XXL";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL32.arc-VerticalSpace--debugVisible::after{content:"Space 32 XXL";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL40.arc-VerticalSpace--debugVisible::after{content:"Space 40 XXL";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL48.arc-VerticalSpace--debugVisible::after{content:"Space 48 XXL";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL64.arc-VerticalSpace--debugVisible::after{content:"Space 64 XXL";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL96.arc-VerticalSpace--debugVisible::after{content:"Space 96 XXL";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-0-0 .arc .arc-VerticalSpace--sizeXXL128.arc-VerticalSpace--debugVisible::after{content:"Space 128 XXL";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}}.arc-v13-0-0 .arc .arc-VerticalSpace--debugVisible{position:relative}.arc-v13-0-0 .arc .arc-VerticalSpace--debugVisible::after{align-items:center;background-color:rgba(var(--arc-debug-rgb),0.5);color:inherit;content:"Space";display:flex;height:var(--vertical-space-size-24);justify-content:center;left:0;outline:1px dashed rgba(var(--arc-debug-rgb),1);outline-offset:-1px;position:absolute;right:0;top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-0-0 .arc *+.arc-VerticalSpace.arc-VerticalSpace--debugVisible::after{top:0}
+.arc-v13-2-0 .arc .arc-VerticalSpace--size4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-2-0 .arc .arc-VerticalSpace--size4.arc-VerticalSpace--debugVisible::after{content:"Space 4";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1);top:calc(calc(0px - var(--vertical-space-size-4)) * 1)}.arc-v13-2-0 .arc .arc-VerticalSpace--size8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-2-0 .arc .arc-VerticalSpace--size8.arc-VerticalSpace--debugVisible::after{content:"Space 8";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-2-0 .arc .arc-VerticalSpace--size12.arc-VerticalSpace--debugVisible::after{content:"Space 12";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-2-0 .arc .arc-VerticalSpace--size16.arc-VerticalSpace--debugVisible::after{content:"Space 16";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-2-0 .arc .arc-VerticalSpace--size20.arc-VerticalSpace--debugVisible::after{content:"Space 20";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-2-0 .arc .arc-VerticalSpace--size24.arc-VerticalSpace--debugVisible::after{content:"Space 24";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-2-0 .arc .arc-VerticalSpace--size28.arc-VerticalSpace--debugVisible::after{content:"Space 28";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-2-0 .arc .arc-VerticalSpace--size32.arc-VerticalSpace--debugVisible::after{content:"Space 32";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-2-0 .arc .arc-VerticalSpace--size40.arc-VerticalSpace--debugVisible::after{content:"Space 40";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-2-0 .arc .arc-VerticalSpace--size48.arc-VerticalSpace--debugVisible::after{content:"Space 48";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-2-0 .arc .arc-VerticalSpace--size64.arc-VerticalSpace--debugVisible::after{content:"Space 64";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-2-0 .arc .arc-VerticalSpace--size96.arc-VerticalSpace--debugVisible::after{content:"Space 96";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--size128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-2-0 .arc .arc-VerticalSpace--size128.arc-VerticalSpace--debugVisible::after{content:"Space 128";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}@media (min-width:636px){.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS4.arc-VerticalSpace--debugVisible::after{content:"Space 4 S";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1px);top:calc(calc(0px - var(--vertical-space-size-4)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS8.arc-VerticalSpace--debugVisible::after{content:"Space 8 S";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS12.arc-VerticalSpace--debugVisible::after{content:"Space 12 S";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS16.arc-VerticalSpace--debugVisible::after{content:"Space 16 S";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS20.arc-VerticalSpace--debugVisible::after{content:"Space 20 S";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS24.arc-VerticalSpace--debugVisible::after{content:"Space 24 S";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS28.arc-VerticalSpace--debugVisible::after{content:"Space 28 S";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS32.arc-VerticalSpace--debugVisible::after{content:"Space 32 S";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS40.arc-VerticalSpace--debugVisible::after{content:"Space 40 S";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS48.arc-VerticalSpace--debugVisible::after{content:"Space 48 S";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS64.arc-VerticalSpace--debugVisible::after{content:"Space 64 S";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS96.arc-VerticalSpace--debugVisible::after{content:"Space 96 S";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeS128.arc-VerticalSpace--debugVisible::after{content:"Space 128 S";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}}@media (min-width:768px){.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM4.arc-VerticalSpace--debugVisible::after{content:"Space 4 M";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1px);top:calc(calc(0px - var(--vertical-space-size-4)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM8.arc-VerticalSpace--debugVisible::after{content:"Space 8 M";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM12.arc-VerticalSpace--debugVisible::after{content:"Space 12 M";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM16.arc-VerticalSpace--debugVisible::after{content:"Space 16 M";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM20.arc-VerticalSpace--debugVisible::after{content:"Space 20 M";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM24.arc-VerticalSpace--debugVisible::after{content:"Space 24 M";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM28.arc-VerticalSpace--debugVisible::after{content:"Space 28 M";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM32.arc-VerticalSpace--debugVisible::after{content:"Space 32 M";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM40.arc-VerticalSpace--debugVisible::after{content:"Space 40 M";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM48.arc-VerticalSpace--debugVisible::after{content:"Space 48 M";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM64.arc-VerticalSpace--debugVisible::after{content:"Space 64 M";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM96.arc-VerticalSpace--debugVisible::after{content:"Space 96 M";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeM128.arc-VerticalSpace--debugVisible::after{content:"Space 128 M";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}}@media (min-width:1024px){.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL4.arc-VerticalSpace--debugVisible::after{content:"Space 4 L";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1px);top:calc(calc(0px - var(--vertical-space-size-4)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL8.arc-VerticalSpace--debugVisible::after{content:"Space 8 L";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL12.arc-VerticalSpace--debugVisible::after{content:"Space 12 L";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL16.arc-VerticalSpace--debugVisible::after{content:"Space 16 L";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL20.arc-VerticalSpace--debugVisible::after{content:"Space 20 L";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL24.arc-VerticalSpace--debugVisible::after{content:"Space 24 L";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL28.arc-VerticalSpace--debugVisible::after{content:"Space 28 L";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL32.arc-VerticalSpace--debugVisible::after{content:"Space 32 L";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL40.arc-VerticalSpace--debugVisible::after{content:"Space 40 L";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL48.arc-VerticalSpace--debugVisible::after{content:"Space 48 L";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL64.arc-VerticalSpace--debugVisible::after{content:"Space 64 L";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL96.arc-VerticalSpace--debugVisible::after{content:"Space 96 L";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeL128.arc-VerticalSpace--debugVisible::after{content:"Space 128 L";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}}@media (min-width:1280px){.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL4.arc-VerticalSpace--debugVisible::after{content:"Space 4 XL";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1px);top:calc(calc(0px - var(--vertical-space-size-4)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL8.arc-VerticalSpace--debugVisible::after{content:"Space 8 XL";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL12.arc-VerticalSpace--debugVisible::after{content:"Space 12 XL";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL16.arc-VerticalSpace--debugVisible::after{content:"Space 16 XL";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL20.arc-VerticalSpace--debugVisible::after{content:"Space 20 XL";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL24.arc-VerticalSpace--debugVisible::after{content:"Space 24 XL";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL28.arc-VerticalSpace--debugVisible::after{content:"Space 28 XL";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL32.arc-VerticalSpace--debugVisible::after{content:"Space 32 XL";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL40.arc-VerticalSpace--debugVisible::after{content:"Space 40 XL";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL48.arc-VerticalSpace--debugVisible::after{content:"Space 48 XL";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL64.arc-VerticalSpace--debugVisible::after{content:"Space 64 XL";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL96.arc-VerticalSpace--debugVisible::after{content:"Space 96 XL";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXL128.arc-VerticalSpace--debugVisible::after{content:"Space 128 XL";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}}@media (min-width:1440px){.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL4{padding-bottom:var(--vertical-space-size-4)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL4.arc-VerticalSpace--debugVisible::after{content:"Space 4 XXL";height:var(--vertical-space-size-4);top:calc((0px - var(--vertical-space-size-4)) * 1px);top:calc(calc(0px - var(--vertical-space-size-4)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL8{padding-bottom:var(--vertical-space-size-8)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL8.arc-VerticalSpace--debugVisible::after{content:"Space 8 XXL";height:var(--vertical-space-size-8);top:calc((0px - var(--vertical-space-size-8)) * 1px);top:calc(calc(0px - var(--vertical-space-size-8)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL12{padding-bottom:var(--vertical-space-size-12)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL12.arc-VerticalSpace--debugVisible::after{content:"Space 12 XXL";height:var(--vertical-space-size-12);top:calc((0px - var(--vertical-space-size-12)) * 1px);top:calc(calc(0px - var(--vertical-space-size-12)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL16{padding-bottom:var(--vertical-space-size-16)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL16.arc-VerticalSpace--debugVisible::after{content:"Space 16 XXL";height:var(--vertical-space-size-16);top:calc((0px - var(--vertical-space-size-16)) * 1px);top:calc(calc(0px - var(--vertical-space-size-16)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL20{padding-bottom:var(--vertical-space-size-20)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL20.arc-VerticalSpace--debugVisible::after{content:"Space 20 XXL";height:var(--vertical-space-size-20);top:calc((0px - var(--vertical-space-size-20)) * 1px);top:calc(calc(0px - var(--vertical-space-size-20)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL24{padding-bottom:var(--vertical-space-size-24)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL24.arc-VerticalSpace--debugVisible::after{content:"Space 24 XXL";height:var(--vertical-space-size-24);top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL28{padding-bottom:var(--vertical-space-size-28)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL28.arc-VerticalSpace--debugVisible::after{content:"Space 28 XXL";height:var(--vertical-space-size-28);top:calc((0px - var(--vertical-space-size-28)) * 1px);top:calc(calc(0px - var(--vertical-space-size-28)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL32{padding-bottom:var(--vertical-space-size-32)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL32.arc-VerticalSpace--debugVisible::after{content:"Space 32 XXL";height:var(--vertical-space-size-32);top:calc((0px - var(--vertical-space-size-32)) * 1px);top:calc(calc(0px - var(--vertical-space-size-32)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL40{padding-bottom:var(--vertical-space-size-40)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL40.arc-VerticalSpace--debugVisible::after{content:"Space 40 XXL";height:var(--vertical-space-size-40);top:calc((0px - var(--vertical-space-size-40)) * 1px);top:calc(calc(0px - var(--vertical-space-size-40)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL48{padding-bottom:var(--vertical-space-size-48)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL48.arc-VerticalSpace--debugVisible::after{content:"Space 48 XXL";height:var(--vertical-space-size-48);top:calc((0px - var(--vertical-space-size-48)) * 1px);top:calc(calc(0px - var(--vertical-space-size-48)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL64{padding-bottom:var(--vertical-space-size-64)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL64.arc-VerticalSpace--debugVisible::after{content:"Space 64 XXL";height:var(--vertical-space-size-64);top:calc((0px - var(--vertical-space-size-64)) * 1px);top:calc(calc(0px - var(--vertical-space-size-64)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL96{padding-bottom:var(--vertical-space-size-96)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL96.arc-VerticalSpace--debugVisible::after{content:"Space 96 XXL";height:var(--vertical-space-size-96);top:calc((0px - var(--vertical-space-size-96)) * 1px);top:calc(calc(0px - var(--vertical-space-size-96)) * 1px)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL128{padding-bottom:var(--vertical-space-size-128)}.arc-v13-2-0 .arc .arc-VerticalSpace--sizeXXL128.arc-VerticalSpace--debugVisible::after{content:"Space 128 XXL";height:var(--vertical-space-size-128);top:calc((0px - var(--vertical-space-size-128)) * 1px);top:calc(calc(0px - var(--vertical-space-size-128)) * 1px)}}.arc-v13-2-0 .arc .arc-VerticalSpace--debugVisible{position:relative}.arc-v13-2-0 .arc .arc-VerticalSpace--debugVisible::after{align-items:center;background-color:rgba(var(--arc-debug-rgb),0.5);color:inherit;content:"Space";display:flex;height:var(--vertical-space-size-24);justify-content:center;left:0;outline:1px dashed rgba(var(--arc-debug-rgb),1);outline-offset:-1px;position:absolute;right:0;top:calc((0px - var(--vertical-space-size-24)) * 1px);top:calc(calc(0px - var(--vertical-space-size-24)) * 1px)}.arc-v13-2-0 .arc *+.arc-VerticalSpace.arc-VerticalSpace--debugVisible::after{top:0}

package/lib/VideoPlayer/styles.css

@@ -1 +1 @@
-.arc-v13-0-0 .arc .arc-VideoPlayer{height:100%;width:100%}.arc-v13-0-0 .arc .arc-VideoPlayer-wrapper{aspect-ratio:16/9;overflow:hidden;width:100%}.arc-v13-0-0 .arc .arc-VideoPlayer-wrapper--borderRadius{border-radius:var(--video-player-border-radius)}.arc-v13-0-0 .arc .arc-VideoPlayer iframe{border:none;height:100%;width:100%}.arc-v13-0-0 .arc .arc-VideoPlayer-iconContainer{align-items:center;background:var(--video-player-color-icon-bg);border-radius:50%;display:flex;height:var(--video-player-size-icon-m);justify-content:center;transition:0.4s ease opacity;width:var(--video-player-size-icon-m)}.arc-v13-0-0 .arc .arc-VideoPlayer-icon{color:var(--video-player-color-icon-fg);height:var(--video-player-size-icon-s);width:var(--video-player-size-icon-s)}.arc-v13-0-0 .arc .arc-VideoPlayer-transcriptSectionHeading{display:inline}
+.arc-v13-2-0 .arc .arc-VideoPlayer{height:100%;width:100%}.arc-v13-2-0 .arc .arc-VideoPlayer-wrapper{aspect-ratio:16/9;overflow:hidden;width:100%}.arc-v13-2-0 .arc .arc-VideoPlayer-wrapper--borderRadius{border-radius:var(--video-player-border-radius)}.arc-v13-2-0 .arc .arc-VideoPlayer iframe{border:none;height:100%;width:100%}.arc-v13-2-0 .arc .arc-VideoPlayer-iconContainer{align-items:center;background:var(--video-player-color-icon-bg);border-radius:50%;display:flex;height:var(--video-player-size-icon-m);justify-content:center;transition:0.4s ease opacity;width:var(--video-player-size-icon-m)}.arc-v13-2-0 .arc .arc-VideoPlayer-icon{color:var(--video-player-color-icon-fg);height:var(--video-player-size-icon-s);width:var(--video-player-size-icon-s)}.arc-v13-2-0 .arc .arc-VideoPlayer-transcriptSectionHeading{display:inline}

package/lib/Visible/styles.css

@@ -1 +1 @@
-.arc-v13-0-0 .arc .arc-Visible{display:none;min-height:inherit}.arc-v13-0-0 .arc .arc-Visible--xs{display:block}@media (min-width:636px){.arc-v13-0-0 .arc .arc-Visible--xs{display:none}.arc-v13-0-0 .arc .arc-Visible--s{display:block}}@media (min-width:768px){.arc-v13-0-0 .arc .arc-Visible--s{display:none}.arc-v13-0-0 .arc .arc-Visible--m{display:block}}@media (min-width:1024px){.arc-v13-0-0 .arc .arc-Visible--m{display:none}.arc-v13-0-0 .arc .arc-Visible--l{display:block}}@media (min-width:1280px){.arc-v13-0-0 .arc .arc-Visible--l{display:none}.arc-v13-0-0 .arc .arc-Visible--xl{display:block}}@media (min-width:1440px){.arc-v13-0-0 .arc .arc-Visible--xl{display:none}.arc-v13-0-0 .arc .arc-Visible--xxl{display:block}}
+.arc-v13-2-0 .arc .arc-Visible{display:none;min-height:inherit}.arc-v13-2-0 .arc .arc-Visible--xs{display:block}@media (min-width:636px){.arc-v13-2-0 .arc .arc-Visible--xs{display:none}.arc-v13-2-0 .arc .arc-Visible--s{display:block}}@media (min-width:768px){.arc-v13-2-0 .arc .arc-Visible--s{display:none}.arc-v13-2-0 .arc .arc-Visible--m{display:block}}@media (min-width:1024px){.arc-v13-2-0 .arc .arc-Visible--m{display:none}.arc-v13-2-0 .arc .arc-Visible--l{display:block}}@media (min-width:1280px){.arc-v13-2-0 .arc .arc-Visible--l{display:none}.arc-v13-2-0 .arc .arc-Visible--xl{display:block}}@media (min-width:1440px){.arc-v13-2-0 .arc .arc-Visible--xl{display:none}.arc-v13-2-0 .arc .arc-Visible--xxl{display:block}}

package/lib/VisuallyHidden/styles.css

@@ -1 +1 @@
-.arc-v13-0-0 .arc .arc-VisuallyHidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;word-wrap:"normal"}
+.arc-v13-2-0 .arc .arc-VisuallyHidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;word-wrap:"normal"}

package/lib/_shared/cjs/{Calendar-CdLn9iv6.cjs → Calendar-B-DmNni2.cjs}

@@ -3,7 +3,7 @@
 var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-BLRjGROQ.cjs');
-var index_es = require('./index.es-BAsay4oe.cjs');
+var index_es = require('./index.es-D5DdMrn2.cjs');
 var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 var useMediaQuery = require('./use-media-query-BJV2IbHi.cjs');
 var index$1 = require('./index-CTlXMLug.cjs');

package/lib/_shared/cjs/{Popover-BtvRErpC.cjs → Popover-BxuQPltF.cjs}

@@ -12,7 +12,7 @@ var Surface = require('./Surface-DIU5ciDT.cjs');
  * 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, minHeight = _a.minHeight, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, _f = _a.constrainToViewport, constrainToViewport = _f === void 0 ? true : _f, side = _a.side, _g = _a.sideOffset, sideOffset = _g === void 0 ? 0 : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, _j = _a.hideWhenDetached, hideWhenDetached = _j === void 0 ? false : _j, _k = _a.useBespokeTrigger, useBespokeTrigger = _k === void 0 ? false : _k, _l = _a.isFluidToViewport, isFluidToViewport = _l === void 0 ? false : _l, _m = _a.contentMargin, contentMargin = _m === void 0 ? false : _m, _o = _a.isFullBleed, isFullBleed = _o === void 0 ? false : _o, props = tslib_es6.__rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "minHeight", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "constrainToViewport", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger", "isFluidToViewport", "contentMargin", "isFullBleed"]);
+    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, minHeight = _a.minHeight, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, _f = _a.constrainToViewport, constrainToViewport = _f === void 0 ? true : _f, side = _a.side, _g = _a.sideOffset, sideOffset = _g === void 0 ? 0 : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, _j = _a.hideWhenDetached, hideWhenDetached = _j === void 0 ? false : _j, _k = _a.useBespokeTrigger, useBespokeTrigger = _k === void 0 ? false : _k, _l = _a.isFluidToViewport, isFluidToViewport = _l === void 0 ? false : _l, _m = _a.contentMargin, contentMargin = _m === void 0 ? false : _m, _o = _a.isFullBleed, isFullBleed = _o === void 0 ? false : _o, className = _a.className, props = tslib_es6.__rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "minHeight", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "constrainToViewport", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger", "isFluidToViewport", "contentMargin", "isFullBleed", "className"]);
     var _p = index.useThemeElement(), themeElement = _p[0], setThemeElement = _p[1];
     var alignOffsetDefault = align === "center" ? 0 : -16;
     return (React.createElement("div", tslib_es6.__assign({ className: "arc-Popover" }, filterAttrs.filterAttrs(props)),
@@ -21,7 +21,7 @@ var Popover = function (_a) {
             React.createElement("div", { ref: setThemeElement },
                 React.createElement(index$1.Portal, { container: themeElement },
                     React.createElement("div", { "data-cy": "z-index", style: { position: "absolute", zIndex: zIndex } },
-                        React.createElement(index$1.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.createElement(index$1.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, className: className },
                             React.createElement(Surface.Surface, { isTransparent: true, background: background === "light" ? "light-white" : "dark-black" },
                                 React.createElement("div", { className: index$2.classNames("arc-Popover-content", {
                                         "arc-Popover-content--dark": background === "dark",

package/lib/_shared/cjs/SemanticButton-Be0gsNLA.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+
+/**
+ * Use `SemanticHeading` to render accessible headings that preserve correct
+ * document hierarchy.
+ */
+var SemanticButton = function (_a) {
+    var children = _a.children, className = _a.className, props = tslib_es6.__rest(_a, ["children", "className"]);
+    return (React.createElement("button", tslib_es6.__assign({ className: index.classNames("arc-SemanticButton", className) }, props), children));
+};
+
+exports.SemanticButton = SemanticButton;

package/lib/_shared/cjs/SemanticLink-DYO9HLGa.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+
+/**
+ * Use `SemanticHeading` to render accessible headings that preserve correct
+ * document hierarchy.
+ */
+var SemanticLink = function (_a) {
+    var children = _a.children, className = _a.className, props = tslib_es6.__rest(_a, ["children", "className"]);
+    return (React.createElement("a", tslib_es6.__assign({ className: index.classNames("arc-SemanticLink", className) }, props), children));
+};
+
+exports.SemanticLink = SemanticLink;

package/lib/_shared/cjs/{TemplateBanner-DyXBKuMw.cjs → TemplateBanner-DfzDwiVT.cjs}

@@ -3,7 +3,9 @@
 var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
+var debounce = require('./debounce-uPMetQ6J.cjs');
 var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var arcBreakpoints = require('./arc-breakpoints-C3HREhvT.cjs');
 var VerticalSpace = require('./VerticalSpace-DLQUYsvc.cjs');
 var Box = require('./Box-Va2g7Gdp.cjs');
 var Heading = require('./Heading-BYBmZkmS.cjs');
@@ -23,7 +25,7 @@ var BannerRow = function (_a) {
 
 /** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
 var TemplateBanner = function (_a) {
-    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.headingWordWrap, headingWordWrap = _l === void 0 ? false : _l, _m = _a.type, type = _m === void 0 ? "light" : _m, props = tslib_es6.__rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "headingWordWrap", "type"]);
+    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, contentRatios = _a.contentRatios, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.headingWordWrap, headingWordWrap = _l === void 0 ? false : _l, _m = _a.type, type = _m === void 0 ? "light" : _m, props = tslib_es6.__rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "contentRatios", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "headingWordWrap", "type"]);
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -49,6 +51,30 @@ var TemplateBanner = function (_a) {
             ? "".concat(minHeightXL, "px")
             : "auto",
     };
+    var _o = React.useState("1/1"), contentRatiosPerBreakpoint = _o[0], setContentRatios = _o[1];
+    var checkContentRatio = debounce.debounce(function () {
+        if (contentRatios) {
+            for (var _i = 0, _a = Object.entries(arcBreakpoints.ArcBreakpoints); _i < _a.length; _i++) {
+                var _b = _a[_i], key = _b[0], value = _b[1];
+                if (window.innerWidth > value) {
+                    var ratio = contentRatios === null || contentRatios === void 0 ? void 0 : contentRatios[key];
+                    if (ratio) {
+                        setContentRatios(ratio);
+                        return;
+                    }
+                }
+            }
+        }
+        setContentRatios(contentRatio);
+    }, 100);
+    React.useEffect(function () {
+        checkContentRatio();
+        window.addEventListener("resize", checkContentRatio);
+        return function () {
+            window.removeEventListener("resize", checkContentRatio);
+            checkContentRatio.cancel();
+        };
+    }, [contentRatios, checkContentRatio]);
     return (React.createElement("div", tslib_es6.__assign({ style: templateBannerStyles, className: index.classNames("arc-TemplateBanner arc-TemplateBanner-background--".concat(type), {
             "arc-TemplateBanner--elevation": isElevated,
             "arc-TemplateBanner--minHeightM": minHeightM,
@@ -60,8 +86,10 @@ var TemplateBanner = function (_a) {
                 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",
-                        }, xs: 12, order: { xs: isContained && isReversed ? 1 : 0, m: 0 }, m: img ? columnWithImgWidths[contentRatio] : 12 },
+                            xs: !img || contentRatiosPerBreakpoint === "1/0"
+                                ? "center"
+                                : "start",
+                        }, xs: 12, order: { xs: isContained && isReversed ? 1 : 0, m: 0 }, m: img ? columnWithImgWidths[contentRatiosPerBreakpoint] : 12 },
                         React.createElement("div", { className: index.classNames("arc-TemplateBanner-content", {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
@@ -75,9 +103,11 @@ var TemplateBanner = function (_a) {
                             children && (React.createElement("span", null,
                                 React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
                                 children)))),
-                    img && contentRatio !== "1/0" && (React.createElement(GridRow.GridCol, tslib_es6.__assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"
+                    img && contentRatiosPerBreakpoint !== "1/0" && (React.createElement(GridRow.GridCol, tslib_es6.__assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"
                             ? { m: imageAlignment[img.alignment || "center"] }
-                            : undefined, xs: 12 }, (contentRatio === "2/3" && img ? { m: 4 } : { m: 6 })),
+                            : undefined, xs: 12 }, (contentRatiosPerBreakpoint === "2/3" && img
+                        ? { m: 4 }
+                        : { m: 6 })),
                         React.createElement(BannerImage.BannerImage, tslib_es6.__assign({ ariaHidden: true }, img)))))))));
 };
 

package/lib/_shared/cjs/{TextInput-C_K2PLf5.cjs → TextInput-CLkhL2KT.cjs}

@@ -62,7 +62,7 @@ var InputIcon = function (_a) {
             "arc-TextInput-inputIcon": true,
             "arc-TextInput-inputIcon--isReadOnly": isReadOnly,
             "arc-TextInput-inputIcon--isDisabled": isDisabled,
-        }), disabled: isReadOnly || isDisabled, "aria-label": isButton.label, onFocus: isButton.onFocus, onClick: function (e) {
+        }), disabled: isReadOnly || isDisabled, "aria-label": isButton.label, onFocus: isButton.onFocus, onKeyDown: isButton.onKeyDown, onClick: function (e) {
             var _a;
             e.preventDefault();
             (_a = isButton.onClick) === null || _a === void 0 ? void 0 : _a.call(isButton);
@@ -73,19 +73,42 @@ var InputIcon = function (_a) {
 
 var TrailingSlot = function (_a) {
     var _b;
-    var trailingSlot = _a.trailingSlot, showPassword = _a.showPassword, isPasswordVisible = _a.isPasswordVisible, onTogglePassword = _a.onTogglePassword, isLoading = _a.isLoading, clearButton = _a.clearButton, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _c = _a.size, size = _c === void 0 ? "m" : _c;
+    var id = _a.id, trailingSlot = _a.trailingSlot, showPassword = _a.showPassword, isPasswordVisible = _a.isPasswordVisible, onTogglePassword = _a.onTogglePassword, isLoading = _a.isLoading, clearButton = _a.clearButton, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _c = _a.size, size = _c === void 0 ? "m" : _c, inputRef = _a.inputRef;
     var spinnerSizeMap = {
         s: 16,
         m: 24,
         l: 24,
     };
     var spinnerSize = spinnerSizeMap[size];
-    return (React.createElement("span", { className: "arc-TextInput-trailingSlot" },
+    var focusInput = function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    var clearInput = function () {
+        var _a;
+        if (inputRef.current) {
+            inputRef.current.value = "";
+            inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+        (_a = clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick) === null || _a === void 0 ? void 0 : _a.call(clearButton);
+    };
+    var onClearButtonKeydown = function () {
+        clearInput();
+        focusInput();
+    };
+    return (React.createElement("span", { className: "arc-TextInput-trailingSlot", id: "trailingslot-".concat(id) },
         trailingSlot && !showPassword && !isLoading && !clearButton && (React.createElement(React.Fragment, null, trailingSlot)),
         (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick) && !showPassword && !isLoading && (React.createElement(InputIcon, { themeIcon: "textInputClear", isReadOnly: isReadOnly, isDisabled: isDisabled, tooltip: {
                 title: (_b = clearButton.tooltipLabel) !== null && _b !== void 0 ? _b : "Clear",
                 side: "bottom",
-            }, isButton: { onClick: clearButton.onClick, label: "Clear Input" }, size: size })),
+            }, isButton: {
+                onClick: function () {
+                    clearInput();
+                    focusInput();
+                },
+                label: "Clear Input",
+                onKeyDown: onClearButtonKeydown,
+            }, size: size })),
         showPassword && !isLoading && (React.createElement(React.Fragment, null,
             React.createElement(InputIcon, { isDisabled: isDisabled, isReadOnly: isReadOnly, themeIcon: isPasswordVisible
                     ? "textInputShowPassword"
@@ -114,6 +137,16 @@ var TextInputComponent = function (_a) {
     var _b;
     var ref = _a.ref, _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, leadingSlot = _a.leadingSlot, trailingSlot = _a.trailingSlot, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, isErrorAlert = _a.isErrorAlert, prefix = _a.prefix, suffix = _a.suffix, clearButton = _a.clearButton, props = tslib_es6.__rest(_a, ["ref", "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", "leadingSlot", "trailingSlot", "inputAlignment", "width", "autoComplete", "isLoading", "isErrorAlert", "prefix", "suffix", "clearButton"]);
     var _l = React.useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
+    var inputRef = React.useRef(null);
+    var setInputRef = function (node) {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    };
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
         pattern: pattern,
@@ -145,11 +178,11 @@ var TextInputComponent = function (_a) {
             React.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width, marginTop: hideLabel ? 0 : undefined } },
                 prefix && (React.createElement("span", { className: "arc-TextInput-prefix arc-TextInput-affixes", "aria-hidden": true }, prefix)),
                 leadingSlot && (React.createElement("span", { className: "arc-TextInput-leadingSlot" }, leadingSlot)),
-                React.createElement("input", tslib_es6.__assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, 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)),
+                React.createElement("input", tslib_es6.__assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: setInputRef, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
                 (trailingSlot ||
                     showPassword ||
                     isLoading ||
-                    (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick)) && (React.createElement(TrailingSlot, { showPassword: showPassword, isReadOnly: isReadOnly, isLoading: isLoading, clearButton: clearButton, trailingSlot: trailingSlot, isPasswordVisible: showPasswordToggle, onTogglePassword: function () { return setShowPasswordToggle(function (prev) { return !prev; }); }, size: size, isDisabled: isDisabled })),
+                    (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick)) && (React.createElement(TrailingSlot, { id: id, showPassword: showPassword, isReadOnly: isReadOnly, isLoading: isLoading, clearButton: clearButton, trailingSlot: trailingSlot, isPasswordVisible: showPasswordToggle, onTogglePassword: function () { return setShowPasswordToggle(function (prev) { return !prev; }); }, size: size, isDisabled: isDisabled, inputRef: inputRef })),
                 suffix && (React.createElement("span", { className: "arc-TextInput-suffix arc-TextInput-affixes", "aria-hidden": true }, suffix))))));
 };
 /**

package/lib/_shared/cjs/{arc-breakpoints-uADxN-b4.cjs → arc-breakpoints-C3HREhvT.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index_es = require('./index.es-BAsay4oe.cjs');
+var index_es = require('./index.es-D5DdMrn2.cjs');
 
 /**
  * Provides an object of breakpoints for responsive designs.