@arc-ui/components 12.0.0-beta7 → 12.1.0

package/lib/Toast/styles.css

@@ -0,0 +1 @@
+.arc-v12-1-0 .arc .arc-Toast{align-items:center;border-radius:var(--toast-border-radius-s);display:flex;padding:var(--toast-padding-s)}.arc-v12-1-0 .arc .arc-Toast-viewport{bottom:var(--vertical-space-size-40);left:var(--vertical-space-size-20);list-style:none;margin:0;padding:0;position:fixed;width:calc(100% - var(--vertical-space-size-40));z-index:999}.arc-v12-1-0 .arc .arc-Toast-root:nth-of-type(n+1){margin-top:var(--vertical-space-size-12)}.arc-v12-1-0 .arc .arc-Toast-icon{flex:0 0 auto}.arc-v12-1-0 .arc .arc-Toast-title{flex:1 1 auto;margin-left:var(--toast-gap-s)}.arc-v12-1-0 .arc .arc-Toast-dismiss{align-items:center;background-color:transparent;border:none;cursor:pointer;display:flex;margin-left:auto;padding:0;position:relative}.arc-v12-1-0 .arc .arc-Toast-link{margin:0 var(--toast-gap-s)}.arc-v12-1-0 .arc .arc-Toast-root:focus-visible{border-radius:var(--toast-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-1-0 .arc .arc-Toast-dismiss,.arc-v12-1-0 .arc .arc-Toast-link{color:currentColor}.arc-v12-1-0 .arc .arc-Toast-dismiss:hover,.arc-v12-1-0 .arc .arc-Toast-link:hover{color:currentColor}.arc-v12-1-0 .arc .arc-Toast-dismiss:focus-visible,.arc-v12-1-0 .arc .arc-Toast-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-v12-1-0 .arc .arc-Toast-pathway--default .arc-Toast-dismiss:focus-visible,.arc-v12-1-0 .arc .arc-Toast-pathway--default .arc-Toast-link:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-alt)}.arc-v12-1-0 .arc .arc-Toast--onDarkSurface .arc-Toast-root:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle)}.arc-v12-1-0 .arc .arc-Toast-pathway--default .arc-Toast{background:var(--toast-colors-status-light-bg-default);box-shadow:var(--toast-box-shadow-01);color:var(--toast-colors-status-light-text-default-alt)}.arc-v12-1-0 .arc .arc-Toast-pathway--alternative .arc-Toast{background:var(--toast-colors-status-dark-bg-default);box-shadow:var(--toast-box-shadow-01);color:var(--toast-colors-status-dark-text-default)}.arc-v12-1-0 .arc .arc-Toast-pathway--default .arc-Toast-status--general{border:var(--toast-border-weight-s) solid var(--toast-colors-status-light-border-default);color:var(--toast-colors-status-light-text-default-alt)}.arc-v12-1-0 .arc .arc-Toast-pathway--default .arc-Toast-status--error{background:var(--toast-colors-status-light-bg-error);border:var(--toast-border-weight-s) solid var(--toast-colors-status-light-border-error);color:var(--toast-colors-status-light-text-default)}.arc-v12-1-0 .arc .arc-Toast-pathway--default .arc-Toast-status--warning{background:var(--toast-colors-status-light-bg-warning);border:var(--toast-border-weight-s) solid var(--toast-colors-status-light-border-warning);color:var(--toast-colors-status-light-text-default)}.arc-v12-1-0 .arc .arc-Toast-pathway--default .arc-Toast-status--success{background:var(--toast-colors-status-light-bg-success);border:var(--toast-border-weight-s) solid var(--toast-colors-status-light-border-success);color:var(--toast-colors-status-light-text-default)}.arc-v12-1-0 .arc .arc-Toast-pathway--default .arc-Toast-status--error .arc-Toast-icon{color:var(--toast-colors-status-light-fg-error)}.arc-v12-1-0 .arc .arc-Toast-pathway--default .arc-Toast-status--warning .arc-Toast-icon{color:var(--toast-colors-status-light-fg-warning)}.arc-v12-1-0 .arc .arc-Toast-pathway--default .arc-Toast-status--success .arc-Toast-icon{color:var(--toast-colors-status-light-fg-success)}.arc-v12-1-0 .arc .arc-Toast-pathway--alternative .arc-Toast-status--general{border:var(--toast-border-weight-s) solid var(--toast-colors-status-dark-border-default);color:var(--toast-colors-status-dark-text-default)}.arc-v12-1-0 .arc .arc-Toast-pathway--alternative .arc-Toast-status--error{background:var(--toast-colors-status-dark-bg-error);border:var(--toast-border-weight-s) solid var(--toast-colors-status-dark-border-error);color:var(--toast-colors-status-dark-text-default)}.arc-v12-1-0 .arc .arc-Toast-pathway--alternative .arc-Toast-status--warning{background:var(--toast-colors-status-dark-bg-warning);border:var(--toast-border-weight-s) solid var(--toast-colors-status-dark-border-warning);color:var(--toast-colors-status-dark-text-default)}.arc-v12-1-0 .arc .arc-Toast-pathway--alternative .arc-Toast-status--success{background:var(--toast-colors-status-dark-bg-success);border:var(--toast-border-weight-s) solid var(--toast-colors-status-dark-border-success);color:var(--toast-colors-status-dark-text-default)}.arc-v12-1-0 .arc .arc-Toast-pathway--alternative .arc-Toast-status--general .arc-Toast-icon{color:var(--toast-colors-status-dark-fg-default)}.arc-v12-1-0 .arc .arc-Toast-pathway--alternative .arc-Toast-status--error .arc-Toast-icon{color:var(--toast-colors-status-dark-fg-error)}.arc-v12-1-0 .arc .arc-Toast-pathway--alternative .arc-Toast-status--warning .arc-Toast-icon{color:var(--toast-colors-status-dark-fg-warning)}.arc-v12-1-0 .arc .arc-Toast-pathway--alternative .arc-Toast-status--success .arc-Toast-icon{color:var(--toast-colors-status-dark-fg-success)}.arc-v12-1-0 .arc .arc-Toast-root[data-state="open"]{animation:slide-in 150ms cubic-bezier(0.16,1,0.3,1)}.arc-v12-1-0 .arc .arc-Toast-root[data-state="closed"]{animation:hide 100ms ease-in}.arc-v12-1-0 .arc .arc-Toast-root[data-swipe="move"]{transform:translateX(var(--radix-toast-swipe-move-x))}.arc-v12-1-0 .arc .arc-Toast-root[data-swipe="cancel"]{transform:translateX(0);transition:transform 200ms ease-out}.arc-v12-1-0 .arc .arc-Toast-root[data-swipe="end"]{animation:slide-right 100ms ease-out}@media (min-width:404px){.arc-v12-1-0 .arc .arc-Toast-viewport{--arc-toast-viewport-width:384px;left:calc(50% - (var(--arc-toast-viewport-width)/2));max-width:var(--arc-toast-viewport-width);width:100%}}@keyframes hide{from{opacity:1}to{opacity:0}}@keyframes slide-right{from{opacity:1;transform:translateX(var(--radix-toast-swipe-end-x))}to{opacity:0;transform:translateX(calc(var(--radix-toast-swipe-end-x) + 100%))}}@keyframes slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}

package/lib/Tooltip/Tooltip.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var Tooltip = require('../_shared/cjs/Tooltip-CEb7YEP2.cjs');
+require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+require('react');
+require('../_shared/cjs/index-DXNM3D1d.cjs');
+require('react/jsx-runtime');
+require('react-dom');
+require('../_shared/cjs/index-B11wQrRa.cjs');
+require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+require('../_shared/cjs/index-CTlXMLug.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/Icon-Dk2XHa7V.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/Text-jwsn80lQ.cjs');
+
+
+
+exports.Tooltip = Tooltip.Tooltip;

package/lib/Tooltip/Tooltip.mjs

@@ -0,0 +1,15 @@
+'use client';
+export { T as Tooltip } from '../_shared/esm/Tooltip-BpSzN3Tx.mjs';
+import '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import 'react';
+import '../_shared/esm/index-Bz2JQq34.mjs';
+import 'react/jsx-runtime';
+import 'react-dom';
+import '../_shared/esm/index-CWHcEz3_.mjs';
+import '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import '../_shared/esm/Surface-C69KVzkY.mjs';
+import '../_shared/esm/index-5C0-U8cc.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/Icon-CCUbr_AO.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/Text-BAzOkkzN.mjs';

package/lib/Tooltip/styles.css

@@ -0,0 +1 @@
+.arc-v12-1-0 .arc .arc-Tooltip-arrow{background:#434343;border-bottom:1px solid #2a2a2a;border-bottom-right-radius:1px;border-right:1px solid #2a2a2a;fill:none;height:10px;position:relative;transform:translate(0,-52%) rotate(45deg);width:10px}.arc-v12-1-0 .arc .arc-Tooltip-trigger{all:unset;cursor:pointer}.arc-v12-1-0 .arc .arc-Tooltip-content{background:#434343;border:1px solid #2a2a2a;border-radius:5px;box-shadow:var(--elevation-02);padding:4px 8px}.arc-v12-1-0 .arc .arc-Tooltip-trigger:focus{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v12-1-0 .arc .arc-Tooltip-trigger:focus-visible{outline-color:var(--focus-colors-light-border-subtle)}

package/lib/Truncate/Truncate.cjs

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+var Truncate = function (_a) {
+    var _b = _a.maxWidth, maxWidth = _b === void 0 ? "100%" : _b, title = _a.title, children = _a.children, props = tslib_es6.__rest(_a, ["maxWidth", "title", "children"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: "arc-Truncate", style: { maxWidth: maxWidth }, title: title }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.Truncate = Truncate;

package/lib/Truncate/Truncate.mjs

@@ -0,0 +1,12 @@
+'use client';
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import React__default from 'react';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+var Truncate = function (_a) {
+    var _b = _a.maxWidth, maxWidth = _b === void 0 ? "100%" : _b, title = _a.title, children = _a.children, props = __rest(_a, ["maxWidth", "title", "children"]);
+    return (React__default.createElement("div", __assign({ className: "arc-Truncate", style: { maxWidth: maxWidth }, title: title }, filterAttrs(props)), children));
+};
+
+export { Truncate };

package/lib/Truncate/styles.css

@@ -0,0 +1 @@
+.arc-v12-1-0 .arc .arc-Truncate>*,.arc-v12-1-0 .arc .arc-Truncate{display:inherit;overflow:hidden;text-overflow:ellipsis;vertical-align:baseline;vertical-align:initial;white-space:nowrap}

package/lib/TypographyCard/TypographyCard.cjs

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+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 Heading = require('../_shared/cjs/Heading-BYBmZkmS.cjs');
+var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+var CardHeading = require('../_shared/cjs/CardHeading-lGy1u6eD.cjs');
+var CardFooter = require('../_shared/cjs/CardFooter-PoifazZ1.cjs');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-DLQUYsvc.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/SemanticHeading-C1-fyc3V.cjs');
+require('../_shared/cjs/ThemeIcon-CwYN77IF.cjs');
+require('../_shared/cjs/index-BLRjGROQ.cjs');
+
+/** 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, props = tslib_es6.__rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "headingSize", "linkData", "pathway", "buttonIcon", "headingLevel", "labelLevel"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var _h = React.useState(false), showHoverState = _h[0], setShowHoverState = _h[1];
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    var isDarkPathway = pathway === "dark";
+    return (React.createElement("div", tslib_es6.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-TypographyCard", {
+            "arc-TypographyCard--outlined": showHoverState,
+            "arc-TypographyCard--darkPathway": isDarkPathway,
+            "arc-TypographyCard--lightPathway": !isDarkPathway,
+            "arc-TypographyCard--onDarkSurface": surface === "dark",
+        }) }, filterAttrs.filterAttrs(props)),
+        React.createElement("div", { className: "arc-TypographyCard-contentContainer" },
+            label && (React.createElement("div", { className: "arc-TypographyCard-label" },
+                React.createElement(Heading.Heading, { level: labelLevel, fontStyle: "overline" }, label),
+                React.createElement(VerticalSpace.VerticalSpace, { size: "16" }))),
+            React.createElement(CardHeading.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) })),
+        React.createElement(CardFooter.CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
+};
+
+exports.TypographyCard = TypographyCard;

package/lib/TypographyCard/TypographyCard.mjs

@@ -0,0 +1,38 @@
+'use client';
+import { _ as __rest, a as __assign } 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 { 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-CfPEEmBO.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 '../_shared/esm/suffix-modifier-B_pO0UkF.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, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "headingSize", "linkData", "pathway", "buttonIcon", "headingLevel", "labelLevel"]);
+    var surface = useContext(Context).surface;
+    var _h = useState(false), showHoverState = _h[0], setShowHoverState = _h[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) })),
+        React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
+};
+
+export { TypographyCard };

package/lib/TypographyCard/styles.css

@@ -0,0 +1 @@
+.arc-v12-1-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-v12-1-0 .arc .arc-TypographyCard-contentContainer{display:flex;flex:1 1 auto;flex-direction:column;margin-bottom:24px}.arc-v12-1-0 .arc .arc-TypographyCard-label{color:var(--card-colors-light-text-support)}.arc-v12-1-0 .arc .arc-TypographyCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-border-hover)}.arc-v12-1-0 .arc .arc-TypographyCard--outlined:not(.arc-TypographyCard--darkPathway) .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc-v12-1-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined .arc-CardHeading{color:var(--card-colors-dark-text-hover)}.arc-v12-1-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined{box-shadow:0 0 0 2px var(--card-colors-dark-border-hover)}.arc-v12-1-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined[focus-within]{box-shadow:0 0 0 2px transparent}.arc-v12-1-0 .arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined:focus-within{box-shadow:0 0 0 2px transparent}.arc-v12-1-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-v12-1-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-v12-1-0 .arc .arc-TypographyCard--lightPathway{background:var(--card-colors-light-bg-emphasis)}.arc-v12-1-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-v12-1-0 .arc .arc-TypographyCard--darkPathway .arc-TypographyCard-label{color:var(--card-colors-dark-text-support)}.arc-v12-1-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-v12-1-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-v12-1-0 .arc .arc-TypographyCard{padding:var(--card-padding-m)}}

package/lib/UniversalHeader/UniversalHeader.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+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');
+
+/**
+ * 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 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"]);
+    return (React.createElement("li", tslib_es6.__assign({}, filterAttrs.filterAttrs(props)),
+        React.createElement("a", { className: index.classNames({
+                "arc-UniversalHeader-link": true,
+                "arc-UniversalHeader-link--isActive": isActive,
+            }), href: href }, children)));
+};
+
+exports.UniversalHeader = UniversalHeader;
+exports.UniversalHeaderItem = UniversalHeaderItem;

package/lib/UniversalHeader/UniversalHeader.mjs

@@ -0,0 +1,28 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+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';
+
+/**
+ * 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 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"]);
+    return (React__default.createElement("li", __assign({}, filterAttrs(props)),
+        React__default.createElement("a", { className: classNames({
+                "arc-UniversalHeader-link": true,
+                "arc-UniversalHeader-link--isActive": isActive,
+            }), href: href }, children)));
+};
+
+export { UniversalHeader, UniversalHeaderItem };

package/lib/UniversalHeader/styles.css

@@ -0,0 +1 @@
+.arc-v12-1-0 .arc .arc-UniversalHeader{color:var(--universal-header-colors-light-text-default);position:relative}.arc-v12-1-0 .arc .arc-UniversalHeader::after,.arc-v12-1-0 .arc .arc-UniversalHeader::before{bottom:0;content:"";pointer-events:none;position:absolute;top:0}.arc-v12-1-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-v12-1-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-v12-1-0 .arc .arc-UniversalHeader::before{width:24px}}.arc-v12-1-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-v12-1-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-v12-1-0 .arc .arc-UniversalHeader-items{max-width:1280px;padding-left:var(--universal-header-padding-xl);padding-right:var(--universal-header-padding-xl)}}.arc-v12-1-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-v12-1-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-v12-1-0 .arc .arc-UniversalHeader-link:hover{color:var(--universal-header-colors-light-text-hover);text-decoration:underline}.arc-v12-1-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-v12-1-0 .arc .arc-UniversalHeader-link--isActive:hover{color:var(--header-menu-colors-light-text-default-alt)}.arc-v12-1-0 .arc .arc-UniversalHeader-contentSlot{margin-left:auto}

package/lib/VerticalSpace/VerticalSpace.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-DLQUYsvc.cjs');
+require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+require('react');
+require('../_shared/cjs/index-CTlXMLug.cjs');
+require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+
+
+
+exports.VerticalSpace = VerticalSpace.VerticalSpace;

package/lib/VerticalSpace/VerticalSpace.mjs

@@ -0,0 +1,5 @@
+export { V as VerticalSpace } from '../_shared/esm/VerticalSpace-BLWB02I7.mjs';
+import '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import 'react';
+import '../_shared/esm/index-5C0-U8cc.mjs';
+import '../_shared/esm/filter-attrs-v_SweZXP.mjs';

package/lib/VerticalSpace/styles.css

@@ -0,0 +1 @@
+.arc-v12-1-0 .arc .arc-VerticalSpace--size4{padding-bottom:var(--vertical-space-size-4)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size8{padding-bottom:var(--vertical-space-size-8)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size12{padding-bottom:var(--vertical-space-size-12)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size16{padding-bottom:var(--vertical-space-size-16)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size20{padding-bottom:var(--vertical-space-size-20)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size24{padding-bottom:var(--vertical-space-size-24)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size28{padding-bottom:var(--vertical-space-size-28)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size32{padding-bottom:var(--vertical-space-size-32)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size40{padding-bottom:var(--vertical-space-size-40)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size48{padding-bottom:var(--vertical-space-size-48)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size64{padding-bottom:var(--vertical-space-size-64)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size96{padding-bottom:var(--vertical-space-size-96)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--size128{padding-bottom:var(--vertical-space-size-128)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS4{padding-bottom:var(--vertical-space-size-4)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS8{padding-bottom:var(--vertical-space-size-8)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS12{padding-bottom:var(--vertical-space-size-12)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS16{padding-bottom:var(--vertical-space-size-16)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS20{padding-bottom:var(--vertical-space-size-20)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS24{padding-bottom:var(--vertical-space-size-24)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS28{padding-bottom:var(--vertical-space-size-28)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS32{padding-bottom:var(--vertical-space-size-32)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS40{padding-bottom:var(--vertical-space-size-40)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS48{padding-bottom:var(--vertical-space-size-48)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS64{padding-bottom:var(--vertical-space-size-64)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS96{padding-bottom:var(--vertical-space-size-96)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeS128{padding-bottom:var(--vertical-space-size-128)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM4{padding-bottom:var(--vertical-space-size-4)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM8{padding-bottom:var(--vertical-space-size-8)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM12{padding-bottom:var(--vertical-space-size-12)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM16{padding-bottom:var(--vertical-space-size-16)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM20{padding-bottom:var(--vertical-space-size-20)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM24{padding-bottom:var(--vertical-space-size-24)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM28{padding-bottom:var(--vertical-space-size-28)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM32{padding-bottom:var(--vertical-space-size-32)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM40{padding-bottom:var(--vertical-space-size-40)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM48{padding-bottom:var(--vertical-space-size-48)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM64{padding-bottom:var(--vertical-space-size-64)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM96{padding-bottom:var(--vertical-space-size-96)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeM128{padding-bottom:var(--vertical-space-size-128)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL4{padding-bottom:var(--vertical-space-size-4)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL8{padding-bottom:var(--vertical-space-size-8)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL12{padding-bottom:var(--vertical-space-size-12)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL16{padding-bottom:var(--vertical-space-size-16)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL20{padding-bottom:var(--vertical-space-size-20)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL24{padding-bottom:var(--vertical-space-size-24)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL28{padding-bottom:var(--vertical-space-size-28)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL32{padding-bottom:var(--vertical-space-size-32)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL40{padding-bottom:var(--vertical-space-size-40)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL48{padding-bottom:var(--vertical-space-size-48)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL64{padding-bottom:var(--vertical-space-size-64)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL96{padding-bottom:var(--vertical-space-size-96)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeL128{padding-bottom:var(--vertical-space-size-128)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL4{padding-bottom:var(--vertical-space-size-4)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL8{padding-bottom:var(--vertical-space-size-8)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL12{padding-bottom:var(--vertical-space-size-12)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL16{padding-bottom:var(--vertical-space-size-16)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL20{padding-bottom:var(--vertical-space-size-20)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL24{padding-bottom:var(--vertical-space-size-24)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL28{padding-bottom:var(--vertical-space-size-28)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL32{padding-bottom:var(--vertical-space-size-32)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL40{padding-bottom:var(--vertical-space-size-40)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL48{padding-bottom:var(--vertical-space-size-48)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL64{padding-bottom:var(--vertical-space-size-64)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL96{padding-bottom:var(--vertical-space-size-96)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXL128{padding-bottom:var(--vertical-space-size-128)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL4{padding-bottom:var(--vertical-space-size-4)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL8{padding-bottom:var(--vertical-space-size-8)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL12{padding-bottom:var(--vertical-space-size-12)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL16{padding-bottom:var(--vertical-space-size-16)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL20{padding-bottom:var(--vertical-space-size-20)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL24{padding-bottom:var(--vertical-space-size-24)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL28{padding-bottom:var(--vertical-space-size-28)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL32{padding-bottom:var(--vertical-space-size-32)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL40{padding-bottom:var(--vertical-space-size-40)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL48{padding-bottom:var(--vertical-space-size-48)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL64{padding-bottom:var(--vertical-space-size-64)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL96{padding-bottom:var(--vertical-space-size-96)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--sizeXXL128{padding-bottom:var(--vertical-space-size-128)}.arc-v12-1-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-v12-1-0 .arc .arc-VerticalSpace--debugVisible{position:relative}.arc-v12-1-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-v12-1-0 .arc *+.arc-VerticalSpace.arc-VerticalSpace--debugVisible::after{top:0}