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

package/lib/CardHeading/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-CardHeading{margin:0}.arc-v12-0-0-beta-22 .arc-CardHeading--s{font:var(--sem-type-mobile-semi-s)}.arc-v12-0-0-beta-22 .arc-CardHeading--m{font:var(--sem-type-mobile-semi-m)}.arc-v12-0-0-beta-22 .arc .arc-CardHeading-link{border:none;color:inherit;cursor:pointer;font-family:inherit;font-weight:inherit;outline:none;text-align:left;text-decoration:none;transition:color 0.4s ease}.arc-v12-0-0-beta-22 .arc .arc-CardHeading-link:hover,.arc-v12-0-0-beta-22 .arc .arc-CardHeading-link:focus{color:inherit;outline:none;text-decoration:none}.arc-v12-0-0-beta-22 .arc .arc-CardHeading-link::after{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}@media (min-width:768px){.arc-v12-0-0-beta-22 .arc .arc-CardHeading{font:var(--sem-type-tablet-semi-m)}}@media (min-width:1024px){.arc-v12-0-0-beta-22 .arc .arc-CardHeading{font:var(--sem-type-desktop-semi-m)}}
+.arc-v12-0-0-beta-23 .arc .arc-CardHeading{margin:0}.arc-v12-0-0-beta-23 .arc-CardHeading--s{font:var(--sem-type-mobile-semi-s)}.arc-v12-0-0-beta-23 .arc-CardHeading--m{font:var(--sem-type-mobile-semi-m)}.arc-v12-0-0-beta-23 .arc .arc-CardHeading-link{border:none;color:inherit;cursor:pointer;font-family:inherit;font-weight:inherit;outline:none;text-align:left;text-decoration:none;transition:color 0.4s ease}.arc-v12-0-0-beta-23 .arc .arc-CardHeading-link:hover,.arc-v12-0-0-beta-23 .arc .arc-CardHeading-link:focus{color:inherit;outline:none;text-decoration:none}.arc-v12-0-0-beta-23 .arc .arc-CardHeading-link::after{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}@media (min-width:768px){.arc-v12-0-0-beta-23 .arc .arc-CardHeading{font:var(--sem-type-tablet-semi-m)}}@media (min-width:1024px){.arc-v12-0-0-beta-23 .arc .arc-CardHeading{font:var(--sem-type-desktop-semi-m)}}

package/lib/Carousel/Carousel.cjs

@@ -6,8 +6,7 @@ var index = require('../_shared/cjs/index-CTlXMLug.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
 var useMediaQuery = require('../_shared/cjs/use-media-query-BsUfHjPZ.cjs');
 var ThemeIcon = require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
-var index_es = require('../_shared/cjs/index.es-DlNskPlN.cjs');
-var keynames = require('../_shared/cjs/keynames-Cx13-hWr.cjs');
+var index_es = require('../_shared/cjs/index.es-fkulh7qu.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 require('../_shared/cjs/Surface-BFx1yNsq.cjs');
@@ -1804,6 +1803,13 @@ var CarouselDotButton = function (_a) {
         }), onKeyDown: onKeyDown(scrollSnapIndex), onClick: function () { return onClick(scrollSnapIndex); }, "aria-selected": isSelected, role: "tab", "aria-label": "Show slide ".concat(scrollSnapIndex + 1) }));
 };
 
+var KeyNames;
+(function (KeyNames) {
+    KeyNames["ArrowLeft"] = "ArrowLeft";
+    KeyNames["ArrowRight"] = "ArrowRight";
+    KeyNames["Escape"] = "Escape";
+})(KeyNames || (KeyNames = {}));
+
 var Carousel = function (_a) {
     var children = _a.children, responsive = _a.responsive, _b = _a.itemsToScroll, itemsToScroll = _b === void 0 ? 1 : _b, _c = _a.itemsPerSlide, itemsPerSlide = _c === void 0 ? 1 : _c, _d = _a.withGutter, withGutter = _d === void 0 ? true : _d, _e = _a.loop, loop = _e === void 0 ? false : _e, _f = _a.isPartialVisible, isPartialVisible = _f === void 0 ? false : _f;
     var id = React.useId();
@@ -1848,17 +1854,17 @@ var Carousel = function (_a) {
     }, [emblaApi]);
     var onSlideKeyDown = function (e) {
         var _a;
-        if (e.key === keynames.KeyNames.Escape) {
+        if (e.key === KeyNames.Escape) {
             prevButtonEnabled
                 ? (_a = prevButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus()
                 : setCarouselDotButtonFocusIndex(0);
         }
     };
     var onCarouselDotButtonKeyDown = function (index) { return function (e) {
-        if (e.key === keynames.KeyNames.ArrowLeft) {
+        if (e.key === KeyNames.ArrowLeft) {
             setCarouselDotButtonFocusIndex(index === 0 ? scrollSnaps.length - 1 : index - 1);
         }
-        if (e.key === keynames.KeyNames.ArrowRight) {
+        if (e.key === KeyNames.ArrowRight) {
             setCarouselDotButtonFocusIndex(index + 1 === scrollSnaps.length ? 0 : index + 1);
         }
     }; };

package/lib/Carousel/Carousel.mjs

@@ -4,8 +4,7 @@ import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
 import { a as __assign } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
 import { u as useMediaQuery } from '../_shared/esm/use-media-query-DmKuIDEM.mjs';
 import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
-import { e as ArcSizeBreakpointsXs, d as ArcSizeBreakpointsS, A as ArcSizeBreakpointsM, c as ArcSizeBreakpointsL, b as ArcSizeBreakpointsXl } from '../_shared/esm/index.es-C3WqfFKH.mjs';
-import { K as KeyNames } from '../_shared/esm/keynames-B5whqsjh.mjs';
+import { e as ArcSizeBreakpointsXs, d as ArcSizeBreakpointsS, c as ArcSizeBreakpointsM, b as ArcSizeBreakpointsL, a as ArcSizeBreakpointsXl } from '../_shared/esm/index.es-CtRkzfKP.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
 import '../_shared/esm/Surface-Colbp3Zx.mjs';
@@ -1802,6 +1801,13 @@ var CarouselDotButton = function (_a) {
         }), onKeyDown: onKeyDown(scrollSnapIndex), onClick: function () { return onClick(scrollSnapIndex); }, "aria-selected": isSelected, role: "tab", "aria-label": "Show slide ".concat(scrollSnapIndex + 1) }));
 };
 
+var KeyNames;
+(function (KeyNames) {
+    KeyNames["ArrowLeft"] = "ArrowLeft";
+    KeyNames["ArrowRight"] = "ArrowRight";
+    KeyNames["Escape"] = "Escape";
+})(KeyNames || (KeyNames = {}));
+
 var Carousel = function (_a) {
     var children = _a.children, responsive = _a.responsive, _b = _a.itemsToScroll, itemsToScroll = _b === void 0 ? 1 : _b, _c = _a.itemsPerSlide, itemsPerSlide = _c === void 0 ? 1 : _c, _d = _a.withGutter, withGutter = _d === void 0 ? true : _d, _e = _a.loop, loop = _e === void 0 ? false : _e, _f = _a.isPartialVisible, isPartialVisible = _f === void 0 ? false : _f;
     var id = useId();

package/lib/Carousel/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-Carousel-container{overflow:hidden}.arc-v12-0-0-beta-22 .arc .arc-Carousel-slider{display:flex}.arc-v12-0-0-beta-22 .arc .arc-Carousel-viewport--gutter{margin:0 -12px}.arc-v12-0-0-beta-22 .arc .arc-Carousel-viewport--gutter .arc-Carousel-slide{padding:0 12px}.arc-v12-0-0-beta-22 .arc .arc-Carousel-navButton{background:#ffffff;border:none;border-radius:50%;box-shadow:0 2px 6px 0 rgba(0,0,0,0.25);color:var(--sem-color-bg-primary-light-default);cursor:pointer;padding:0;width:32px}.arc-v12-0-0-beta-22 .arc .arc-Carousel-nav .arc-Carousel-navButton:first-of-type span{transform:translateX(-1px)}.arc-v12-0-0-beta-22 .arc .arc-Carousel-nav .arc-Carousel-navButton:last-of-type span{transform:translateX(1px)}.arc-v12-0-0-beta-22 .arc .arc-Carousel-navButton:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc .arc-Carousel-navButton--hidden{pointer-events:none;visibility:hidden}.arc-v12-0-0-beta-22 .arc .arc-Carousel-navButtonIcons{display:flex}@media (hover:hover){.arc-v12-0-0-beta-22 .arc .arc-Carousel-navButton:hover{background:#e3e3e3}}.arc-v12-0-0-beta-22 .arc .arc-Carousel-navButton:active{background:#c8c8c8}.arc-v12-0-0-beta-22 .arc .arc-Carousel-nav{align-items:center;display:flex;gap:24px;justify-content:center;margin-top:28px;order:2}.arc-v12-0-0-beta-22 .arc .arc-Carousel-dotContainer{align-items:center;display:flex;gap:20px}.arc-v12-0-0-beta-22 .arc .arc-Carousel-dot{background-color:#d9d9d9;border:none;border-radius:50%;cursor:pointer;height:8px;margin:0;outline:none;padding:0;transition:0.4s ease background-color;width:8px}.arc-v12-0-0-beta-22 .arc .arc-Carousel-dot:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc .arc-Carousel-dot--selected{background-color:#2a2a2a}
+.arc-v12-0-0-beta-23 .arc .arc-Carousel-container{overflow:hidden}.arc-v12-0-0-beta-23 .arc .arc-Carousel-slider{display:flex}.arc-v12-0-0-beta-23 .arc .arc-Carousel-viewport--gutter{margin:0 -12px}.arc-v12-0-0-beta-23 .arc .arc-Carousel-viewport--gutter .arc-Carousel-slide{padding:0 12px}.arc-v12-0-0-beta-23 .arc .arc-Carousel-navButton{background:#ffffff;border:none;border-radius:50%;box-shadow:0 2px 6px 0 rgba(0,0,0,0.25);color:var(--sem-color-bg-primary-light-default);cursor:pointer;padding:0;width:32px}.arc-v12-0-0-beta-23 .arc .arc-Carousel-nav .arc-Carousel-navButton:first-of-type span{transform:translateX(-1px)}.arc-v12-0-0-beta-23 .arc .arc-Carousel-nav .arc-Carousel-navButton:last-of-type span{transform:translateX(1px)}.arc-v12-0-0-beta-23 .arc .arc-Carousel-navButton:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-23 .arc .arc-Carousel-navButton--hidden{pointer-events:none;visibility:hidden}.arc-v12-0-0-beta-23 .arc .arc-Carousel-navButtonIcons{display:flex}@media (hover:hover){.arc-v12-0-0-beta-23 .arc .arc-Carousel-navButton:hover{background:#e3e3e3}}.arc-v12-0-0-beta-23 .arc .arc-Carousel-navButton:active{background:#c8c8c8}.arc-v12-0-0-beta-23 .arc .arc-Carousel-nav{align-items:center;display:flex;gap:24px;justify-content:center;margin-top:28px;order:2}.arc-v12-0-0-beta-23 .arc .arc-Carousel-dotContainer{align-items:center;display:flex;gap:20px}.arc-v12-0-0-beta-23 .arc .arc-Carousel-dot{background-color:#d9d9d9;border:none;border-radius:50%;cursor:pointer;height:8px;margin:0;outline:none;padding:0;transition:0.4s ease background-color;width:8px}.arc-v12-0-0-beta-23 .arc .arc-Carousel-dot:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-23 .arc .arc-Carousel-dot--selected{background-color:#2a2a2a}

package/lib/Checkbox/Checkbox.cjs

@@ -1,19 +1,93 @@
 'use client';
 'use strict';
 
-var Checkbox = require('../_shared/cjs/Checkbox-DfZMjO1Y.cjs');
-require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
-require('react');
-require('../_shared/cjs/index-CTlXMLug.cjs');
-require('../_shared/cjs/FormControl-BPnKQrCm.cjs');
-require('../_shared/cjs/Surface-BFx1yNsq.cjs');
-require('../_shared/cjs/index-DR8Rkav9.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var FormControl = require('../_shared/cjs/FormControl-BPnKQrCm.cjs');
+var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
 require('../_shared/cjs/DisclosureMini-CtvDxVaG.cjs');
 require('../_shared/cjs/Text-Cr5nmYmx.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
-require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
-require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
-
+require('../_shared/cjs/index-DR8Rkav9.cjs');
 
+/**
+ *  Use `Checkbox` to allow users to select individual options.
+ */
+var Checkbox = React.forwardRef(function (_a, ref) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, _h = _a.indeterminate, indeterminate = _h === void 0 ? false : _h, props = filterAttrs.__rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment", "indeterminate"]);
+    var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
+    var surface = React.useContext(Surface.Context).surface;
+    var _j = FormControl.useAriaDescribedby({
+        id: id,
+        errorMessage: errorMessage,
+    }), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError;
+    var internalRef = React.useRef(null);
+    var synchronizeRefs = function (el) {
+        internalRef.current = el;
+        if (typeof ref === "object" && ref !== null) {
+            ref.current = el;
+        }
+        else if (typeof ref === "function") {
+            ref(el);
+        }
+    };
+    React.useEffect(function () {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, checked]);
+    var tickSize = {
+        s: { width: 14, height: 11 },
+        m: { width: 18, height: 14 },
+    };
+    var idLabel = "".concat(id, "-label");
+    var checkedProps = {};
+    if (typeof onChange === "function") {
+        checkedProps.checked = checked;
+    }
+    else if (checked && !onChange) {
+        checkedProps.defaultChecked = true;
+    }
+    if (!checked && onChange) {
+        indeterminate = false;
+    }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
+    return (React.createElement("div", { className: index.classNames({
+            "arc-Checkbox": true,
+            "arc-Checkbox--disabled": isDisabled,
+            "arc-Checkbox--invalid": errorMessage,
+            "arc-Checkbox--small": size === "s",
+            "arc-Checkbox--onDarkSurface": surface === "dark",
+        }) },
+        React.createElement("label", { id: idLabel, htmlFor: id, className: index.classNames("arc-Checkbox-label", {
+                "arc-Checkbox-label--top": checkboxAlignment === "top",
+            }) },
+            React.createElement("input", filterAttrs.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked && !indeterminate
+                    ? "true"
+                    : indeterminate && checked
+                        ? "mixed"
+                        : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: synchronizeRefs, required: isRequired, type: "checkbox", value: value }, filterAttrs.filterAttrs(props))),
+            React.createElement("span", { className: "arc-Checkbox-box" }, indeterminate ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
+                React.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React.createElement("svg", { style: tickSize[size], viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" })))),
+            React.createElement("span", filterAttrs.__assign({}, (checkboxAlignment === "top" && {
+                className: "arc-Checkbox-content--marginTop",
+            })), hideLabel ? (React.createElement(VisuallyHidden.VisuallyHidden, null,
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && (React.createElement("span", { className: "arc-Checkbox-helper" }, helper)))) : (React.createElement(React.Fragment, null,
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && (React.createElement("span", { className: "arc-Checkbox-helper" }, helper)))))),
+        errorMessage && (React.createElement("div", { id: idError, className: "arc-Checkbox-error" },
+            React.createElement("span", { className: "arc-Checkbox-error--icon" },
+                React.createElement(ThemeIcon.ThemeIcon, { icon: "checkboxError" })),
+            errorMessage))));
+});
 
-exports.Checkbox = Checkbox.Checkbox;
+exports.Checkbox = Checkbox;

package/lib/Checkbox/Checkbox.mjs

@@ -1,13 +1,91 @@
 'use client';
-export { C as Checkbox } from '../_shared/esm/Checkbox-CwOHzlQF.mjs';
-import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
-import 'react';
-import '../_shared/esm/index-5C0-U8cc.mjs';
-import '../_shared/esm/FormControl-CWyrVi1u.mjs';
-import '../_shared/esm/Surface-Colbp3Zx.mjs';
-import '../_shared/esm/index-Spae4j7j.mjs';
+import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import React__default, { forwardRef, useContext, useRef, useEffect } from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { C as Context, u as useAriaDescribedby } from '../_shared/esm/FormControl-CWyrVi1u.mjs';
+import { C as Context$1 } from '../_shared/esm/Surface-Colbp3Zx.mjs';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-DqAgoqJo.mjs';
 import '../_shared/esm/DisclosureMini-B9LzsQC2.mjs';
 import '../_shared/esm/Text-CBlnm5CT.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
-import '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
-import '../_shared/esm/VisuallyHidden-DqAgoqJo.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+
+/**
+ *  Use `Checkbox` to allow users to select individual options.
+ */
+var Checkbox = forwardRef(function (_a, ref) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, _h = _a.indeterminate, indeterminate = _h === void 0 ? false : _h, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment", "indeterminate"]);
+    var requirementStatus = useContext(Context).requirementStatus;
+    var surface = useContext(Context$1).surface;
+    var _j = useAriaDescribedby({
+        id: id,
+        errorMessage: errorMessage,
+    }), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError;
+    var internalRef = useRef(null);
+    var synchronizeRefs = function (el) {
+        internalRef.current = el;
+        if (typeof ref === "object" && ref !== null) {
+            ref.current = el;
+        }
+        else if (typeof ref === "function") {
+            ref(el);
+        }
+    };
+    useEffect(function () {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, checked]);
+    var tickSize = {
+        s: { width: 14, height: 11 },
+        m: { width: 18, height: 14 },
+    };
+    var idLabel = "".concat(id, "-label");
+    var checkedProps = {};
+    if (typeof onChange === "function") {
+        checkedProps.checked = checked;
+    }
+    else if (checked && !onChange) {
+        checkedProps.defaultChecked = true;
+    }
+    if (!checked && onChange) {
+        indeterminate = false;
+    }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
+    return (React__default.createElement("div", { className: classNames({
+            "arc-Checkbox": true,
+            "arc-Checkbox--disabled": isDisabled,
+            "arc-Checkbox--invalid": errorMessage,
+            "arc-Checkbox--small": size === "s",
+            "arc-Checkbox--onDarkSurface": surface === "dark",
+        }) },
+        React__default.createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
+                "arc-Checkbox-label--top": checkboxAlignment === "top",
+            }) },
+            React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked && !indeterminate
+                    ? "true"
+                    : indeterminate && checked
+                        ? "mixed"
+                        : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: synchronizeRefs, required: isRequired, type: "checkbox", value: value }, filterAttrs(props))),
+            React__default.createElement("span", { className: "arc-Checkbox-box" }, indeterminate ? (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
+                React__default.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React__default.createElement("svg", { style: tickSize[size], viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React__default.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" })))),
+            React__default.createElement("span", __assign({}, (checkboxAlignment === "top" && {
+                className: "arc-Checkbox-content--marginTop",
+            })), hideLabel ? (React__default.createElement(VisuallyHidden, null,
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React__default.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && (React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper)))) : (React__default.createElement(React__default.Fragment, null,
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React__default.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && (React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper)))))),
+        errorMessage && (React__default.createElement("div", { id: idError, className: "arc-Checkbox-error" },
+            React__default.createElement("span", { className: "arc-Checkbox-error--icon" },
+                React__default.createElement(ThemeIcon, { icon: "checkboxError" })),
+            errorMessage))));
+});
+
+export { Checkbox };

package/lib/Checkbox/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-Checkbox{line-height:1;position:relative}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-box{align-items:center;background:var(--checkbox-colors-light-bg-default);border:var(--checkbox-border-weight) solid var(--checkbox-colors-light-border-default);border-radius:var(--checkbox-border-radius-s);color:var(--checkbox-colors-light-bg-default);display:inline-flex;flex-shrink:0;height:var(--checkbox-size-l);justify-content:center;margin-right:var(--checkbox-gap-l);width:var(--checkbox-size-l)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-label{align-items:center;cursor:pointer;display:inline-flex;font:var(--checkbox-type-input-default-m)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-labelOptional{font:var(--sem-type-label-reg-xs);margin-left:4px}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--disabled .arc-Checkbox-label{cursor:not-allowed}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-box svg{width:100%}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-default);border-color:var(--checkbox-colors-dark-border-default);color:var(--checkbox-colors-dark-bg-default)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-box::after{content:"";display:inline-block;pointer-events:none}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-helper{color:var(--checkbox-colors-light-text-default);display:block;font:var(--sem-type-support-reg-s)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-helper{color:var(--checkbox-colors-dark-text-default)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-error{align-items:flex-start;color:var(--checkbox-colors-light-border-error);display:flex;font:var(--sem-type-body-reg-s);line-height:1.5;margin-top:var(--checkbox-gap-l)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--small .arc-Checkbox-error{margin-top:var(--checkbox-gap-m)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-label--top{align-items:flex-start}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-content--marginTop{margin-top:4px}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--small .arc-Checkbox-content--marginTop{margin-top:2px}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--small .arc-Checkbox-box{border-radius:var(--checkbox-border-radius-xs);height:var(--checkbox-size-s);margin-right:var(--checkbox-gap-m);width:var(--checkbox-size-s)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--small .arc-Checkbox-label{font:var(--checkbox-type-input-default-s)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--small .arc-Checkbox-labelOptional{font:var(--sem-type-label-reg-xxs)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--small .arc-Checkbox-helper{font:var(--checkbox-type-helper-default-s)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-input:checked+.arc-Checkbox-box,.arc-v12-0-0-beta-22 .arc .arc-Checkbox-input:indeterminate+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-active);border:none}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-input[disabled]+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-disabled);border-color:var(--checkbox-colors-light-border-disabled);color:transparent}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-input:focus+.arc-Checkbox-box,.arc-v12-0-0-beta-22 .arc .arc-Checkbox-input:focus-visible+.arc-Checkbox-box{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-error .arc-Checkbox-error--icon{color:currentColor;flex-shrink:0;height:24px;margin-right:4px;width:24px}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface{color:var(--checkbox-colors-dark-text-default)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--disabled{color:var(--checkbox-colors-light-text-disabled)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface.arc-Checkbox--disabled{color:var(--checkbox-colors-dark-text-disabled)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:checked+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-active);border-color:transparent;color:var(--checkbox-colors-dark-fg-default)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:indeterminate+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-active);border-color:transparent;color:var(--checkbox-colors-dark-fg-default)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input[disabled]+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-disabled);border-color:var(--checkbox-colors-dark-border-disabled);color:transparent}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:focus+.arc-Checkbox-box,.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:focus-visible+.arc-Checkbox-box{outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-input[disabled].arc-Checkbox-input:checked+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-disabled);border-color:var(--checkbox-colors-light-border-disabled);color:var(--checkbox-colors-light-fg-disabled)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-input[disabled].arc-Checkbox-input:indeterminate+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-disabled);border-color:var(--checkbox-colors-light-border-disabled);color:var(--checkbox-colors-light-fg-disabled)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input[disabled].arc-Checkbox-input:checked+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-disabled);border-color:var(--checkbox-colors-dark-border-disabled);color:var(--checkbox-colors-dark-fg-disabled)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input[disabled].arc-Checkbox-input:indeterminate+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-disabled);border-color:var(--checkbox-colors-dark-border-disabled);color:var(--checkbox-colors-dark-fg-disabled)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-error{color:var(--form-control-colors-dark-text-error)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox-input:focus:not(:focus-visible)+.arc-Checkbox-box{box-shadow:none;outline:none}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--invalid .arc-Checkbox-input:not(:checked).arc-Checkbox-input:not(:indeterminate)+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-error);border-color:var(--checkbox-colors-light-border-error);color:var(--checkbox-colors-light-bg-error)}.arc-v12-0-0-beta-22 .arc .arc-Checkbox--onDarkSurface.arc-Checkbox--invalid .arc-Checkbox-input:not(:checked).arc-Checkbox-input:not(:indeterminate)+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-error);border-color:var(--checkbox-colors-dark-border-error);color:var(--checkbox-colors-dark-bg-error)}
+.arc-v12-0-0-beta-23 .arc .arc-Checkbox{line-height:0;position:relative}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-box{align-items:center;background:var(--checkbox-colors-light-bg-default);border:var(--checkbox-border-weight) solid var(--checkbox-colors-light-border-default);border-radius:var(--checkbox-border-radius-s);color:var(--checkbox-colors-light-bg-default);display:inline-flex;flex-shrink:0;height:var(--checkbox-size-l);justify-content:center;margin-right:var(--checkbox-gap-l);width:var(--checkbox-size-l)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-label{align-items:center;cursor:pointer;display:inline-flex;font:var(--checkbox-type-input-default-m)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-labelOptional{font:var(--sem-type-label-reg-xs);margin-left:4px}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--disabled .arc-Checkbox-label{cursor:not-allowed}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-box svg{width:100%}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-default);border-color:var(--checkbox-colors-dark-border-default);color:var(--checkbox-colors-dark-bg-default)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-box::after{content:"";display:inline-block;pointer-events:none}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-helper{color:var(--checkbox-colors-light-text-default);display:block;font:var(--sem-type-support-reg-s)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-helper{color:var(--checkbox-colors-dark-text-default)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-error{align-items:flex-start;color:var(--checkbox-colors-light-border-error);display:flex;font:var(--sem-type-body-reg-s);line-height:1.5;margin-top:var(--checkbox-gap-l)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--small .arc-Checkbox-error{margin-top:var(--checkbox-gap-m)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-label--top{align-items:flex-start}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-content--marginTop{margin-top:4px}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--small .arc-Checkbox-content--marginTop{margin-top:2px}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--small .arc-Checkbox-box{border-radius:var(--checkbox-border-radius-xs);height:var(--checkbox-size-s);margin-right:var(--checkbox-gap-m);width:var(--checkbox-size-s)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--small .arc-Checkbox-label{font:var(--checkbox-type-input-default-s)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--small .arc-Checkbox-labelOptional{font:var(--sem-type-label-reg-xxs)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--small .arc-Checkbox-helper{font:var(--checkbox-type-helper-default-s)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-input:checked+.arc-Checkbox-box,.arc-v12-0-0-beta-23 .arc .arc-Checkbox-input:indeterminate+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-active);border:none}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-input[disabled]+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-disabled);border-color:var(--checkbox-colors-light-border-disabled);color:transparent}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-input:focus+.arc-Checkbox-box,.arc-v12-0-0-beta-23 .arc .arc-Checkbox-input:focus-visible+.arc-Checkbox-box{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-error .arc-Checkbox-error--icon{color:currentColor;flex-shrink:0;height:24px;margin-right:4px;width:24px}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface{color:var(--checkbox-colors-dark-text-default)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--disabled{color:var(--checkbox-colors-light-text-disabled)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface.arc-Checkbox--disabled{color:var(--checkbox-colors-dark-text-disabled)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:checked+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-active);border-color:transparent;color:var(--checkbox-colors-dark-fg-default)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:indeterminate+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-active);border-color:transparent;color:var(--checkbox-colors-dark-fg-default)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input[disabled]+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-disabled);border-color:var(--checkbox-colors-dark-border-disabled);color:transparent}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:focus+.arc-Checkbox-box,.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:focus-visible+.arc-Checkbox-box{outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-input[disabled].arc-Checkbox-input:checked+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-disabled);border-color:var(--checkbox-colors-light-border-disabled);color:var(--checkbox-colors-light-fg-disabled)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-input[disabled].arc-Checkbox-input:indeterminate+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-disabled);border-color:var(--checkbox-colors-light-border-disabled);color:var(--checkbox-colors-light-fg-disabled)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input[disabled].arc-Checkbox-input:checked+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-disabled);border-color:var(--checkbox-colors-dark-border-disabled);color:var(--checkbox-colors-dark-fg-disabled)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input[disabled].arc-Checkbox-input:indeterminate+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-disabled);border-color:var(--checkbox-colors-dark-border-disabled);color:var(--checkbox-colors-dark-fg-disabled)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface .arc-Checkbox-error{color:var(--form-control-colors-dark-text-error)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox-input:focus:not(:focus-visible)+.arc-Checkbox-box{box-shadow:none;outline:none}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--invalid .arc-Checkbox-input:not(:checked).arc-Checkbox-input:not(:indeterminate)+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-error);border-color:var(--checkbox-colors-light-border-error);color:var(--checkbox-colors-light-bg-error)}.arc-v12-0-0-beta-23 .arc .arc-Checkbox--onDarkSurface.arc-Checkbox--invalid .arc-Checkbox-input:not(:checked).arc-Checkbox-input:not(:indeterminate)+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-error);border-color:var(--checkbox-colors-dark-border-error);color:var(--checkbox-colors-dark-bg-error)}

package/lib/Columns/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-Columns--regular{--columns-gutter-xs:var(--arc-size-grid-gutter-s);--columns-gutter-s:var(--arc-size-grid-gutter-m);--columns-gutter-m:var(--arc-size-grid-gutter-m);--columns-gutter-l:var(--arc-size-grid-gutter-m);--columns-gutter-xl:var(--arc-size-grid-gutter-l);--columns-gutter-xxl:var(--arc-size-grid-gutter-l);--columns-gutter-xxxl:var(--arc-size-grid-gutter-l)}.arc-v12-0-0-beta-22 .arc .arc-Columns--extended{--columns-gutter-xs:var(--arc-size-grid-gutter-s);--columns-gutter-s:var(--arc-size-grid-gutter-m);--columns-gutter-m:var(--arc-size-grid-gutter-m);--columns-gutter-l:var(--arc-size-grid-gutter-m);--columns-gutter-xl:var(--arc-size-grid-gutter-l);--columns-gutter-xxl:var(--arc-size-grid-gutter-l);--columns-gutter-xxxl:var(--arc-size-grid-gutter-xl)}.arc-v12-0-0-beta-22 .arc .arc-Columns-inner,.arc-v12-0-0-beta-22 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-xs);--arc-columns-count:12;--arc-column-width:calc((100%/var(--arc-columns-count)) - var(--arc-columns-gap));--arc-column-width-with-gap:calc(var(--arc-column-width) + var(--arc-columns-gap));--arc-columns-span-1-width:calc((var(--arc-column-width-with-gap) * 1) - var(--arc-columns-gap));--arc-columns-span-2-width:calc((var(--arc-column-width-with-gap) * 2) - var(--arc-columns-gap));--arc-columns-span-3-width:calc((var(--arc-column-width-with-gap) * 3) - var(--arc-columns-gap));--arc-columns-span-4-width:calc((var(--arc-column-width-with-gap) * 4) - var(--arc-columns-gap));--arc-columns-span-5-width:calc((var(--arc-column-width-with-gap) * 5) - var(--arc-columns-gap));--arc-columns-span-6-width:calc((var(--arc-column-width-with-gap) * 6) - var(--arc-columns-gap));--arc-columns-span-7-width:calc((var(--arc-column-width-with-gap) * 7) - var(--arc-columns-gap));--arc-columns-span-8-width:calc((var(--arc-column-width-with-gap) * 8) - var(--arc-columns-gap));--arc-columns-span-9-width:calc((var(--arc-column-width-with-gap) * 9) - var(--arc-columns-gap));--arc-columns-span-10-width:calc((var(--arc-column-width-with-gap) * 10) - var(--arc-columns-gap));--arc-columns-span-11-width:calc((var(--arc-column-width-with-gap) * 11) - var(--arc-columns-gap));--arc-columns-span-12-width:calc((var(--arc-column-width-with-gap) * 12) - var(--arc-columns-gap))}@media (min-width:636px){.arc-v12-0-0-beta-22 .arc .arc-Columns-inner,.arc-v12-0-0-beta-22 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-s)}}@media (min-width:768px){.arc-v12-0-0-beta-22 .arc .arc-Columns-inner,.arc-v12-0-0-beta-22 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-m)}}@media (min-width:1024px){.arc-v12-0-0-beta-22 .arc .arc-Columns-inner,.arc-v12-0-0-beta-22 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-l)}}@media (min-width:1280px){.arc-v12-0-0-beta-22 .arc .arc-Columns-inner,.arc-v12-0-0-beta-22 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-xl)}}@media (min-width:1440px){.arc-v12-0-0-beta-22 .arc .arc-Columns-inner,.arc-v12-0-0-beta-22 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-xxl)}}@media (min-width:1920px){.arc-v12-0-0-beta-22 .arc .arc-Columns-inner,.arc-v12-0-0-beta-22 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-xxxl)}}.arc-v12-0-0-beta-22 .arc .arc-Columns{padding-top:1px}.arc-v12-0-0-beta-22 .arc .arc-Columns-inner{display:flex;flex-wrap:wrap;margin-left:calc(0px - var(--arc-columns-gap));margin-top:calc(-1px - var(--arc-columns-gap));pointer-events:none}.arc-v12-0-0-beta-22 .arc .arc-Columns-col{margin-left:var(--arc-columns-gap);margin-top:var(--arc-columns-gap);max-width:var(--arc-columns-span-12-width);pointer-events:auto;position:relative;width:100%}.arc-v12-0-0-beta-22 .arc .arc-Columns--gutterless .arc-Columns-inner,.arc-v12-0-0-beta-22 .arc .arc-Columns--gutterless .arc-Columns-col{--arc-columns-gap:0px}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--alignBottom{align-self:flex-end}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--alignCenter{align-self:center}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--alignTop{align-self:flex-start}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--debugVisible::before{align-items:center;background:rgba(207,58,138,0.5);bottom:0;content:"Col";display:flex;justify-content:center;left:0;outline:1px dashed #cf3a8a;outline-offset:-1px;position:absolute;right:0;top:0}.arc-v12-0-0-beta-22 .arc .arc-Columns-col:empty{display:none}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--0,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--0:empty{display:none}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--1,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--2,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--3,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--4,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--5,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--6,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--7,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--8,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--9,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--10,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--11,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--12,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--12:empty{display:block;max-width:100%}@media (min-width:636px){.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s0,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s0:empty{display:none;max-width:0}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s1,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s2,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s3,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s4,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s5,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s6,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s7,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s8,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s9,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s10,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s11,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s12,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--s12:empty{display:block;max-width:100%}}@media (min-width:768px){.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m0,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m0:empty{display:none;max-width:0}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m1,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m2,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m3,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m4,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m5,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m6,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m7,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m8,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m9,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m10,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m11,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m12,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--m12:empty{display:block;max-width:100%}}@media (min-width:1024px){.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l0,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l0:empty{display:none;max-width:0}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l1,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l2,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l3,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l4,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l5,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l6,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l7,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l8,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l9,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l10,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l11,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l12,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--l12:empty{display:block;max-width:100%}}@media (min-width:1280px){.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL0,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL0:empty{display:none;max-width:0}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL1,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL2,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL3,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL4,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL5,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL6,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL7,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL8,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL9,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL10,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL11,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL12,.arc-v12-0-0-beta-22 .arc .arc-Columns-col--xL12:empty{display:block;max-width:100%}}
+.arc-v12-0-0-beta-23 .arc .arc-Columns--regular{--columns-gutter-xs:var(--arc-size-grid-gutter-s);--columns-gutter-s:var(--arc-size-grid-gutter-m);--columns-gutter-m:var(--arc-size-grid-gutter-m);--columns-gutter-l:var(--arc-size-grid-gutter-m);--columns-gutter-xl:var(--arc-size-grid-gutter-l);--columns-gutter-xxl:var(--arc-size-grid-gutter-l);--columns-gutter-xxxl:var(--arc-size-grid-gutter-l)}.arc-v12-0-0-beta-23 .arc .arc-Columns--extended{--columns-gutter-xs:var(--arc-size-grid-gutter-s);--columns-gutter-s:var(--arc-size-grid-gutter-m);--columns-gutter-m:var(--arc-size-grid-gutter-m);--columns-gutter-l:var(--arc-size-grid-gutter-m);--columns-gutter-xl:var(--arc-size-grid-gutter-l);--columns-gutter-xxl:var(--arc-size-grid-gutter-l);--columns-gutter-xxxl:var(--arc-size-grid-gutter-xl)}.arc-v12-0-0-beta-23 .arc .arc-Columns-inner,.arc-v12-0-0-beta-23 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-xs);--arc-columns-count:12;--arc-column-width:calc((100%/var(--arc-columns-count)) - var(--arc-columns-gap));--arc-column-width-with-gap:calc(var(--arc-column-width) + var(--arc-columns-gap));--arc-columns-span-1-width:calc((var(--arc-column-width-with-gap) * 1) - var(--arc-columns-gap));--arc-columns-span-2-width:calc((var(--arc-column-width-with-gap) * 2) - var(--arc-columns-gap));--arc-columns-span-3-width:calc((var(--arc-column-width-with-gap) * 3) - var(--arc-columns-gap));--arc-columns-span-4-width:calc((var(--arc-column-width-with-gap) * 4) - var(--arc-columns-gap));--arc-columns-span-5-width:calc((var(--arc-column-width-with-gap) * 5) - var(--arc-columns-gap));--arc-columns-span-6-width:calc((var(--arc-column-width-with-gap) * 6) - var(--arc-columns-gap));--arc-columns-span-7-width:calc((var(--arc-column-width-with-gap) * 7) - var(--arc-columns-gap));--arc-columns-span-8-width:calc((var(--arc-column-width-with-gap) * 8) - var(--arc-columns-gap));--arc-columns-span-9-width:calc((var(--arc-column-width-with-gap) * 9) - var(--arc-columns-gap));--arc-columns-span-10-width:calc((var(--arc-column-width-with-gap) * 10) - var(--arc-columns-gap));--arc-columns-span-11-width:calc((var(--arc-column-width-with-gap) * 11) - var(--arc-columns-gap));--arc-columns-span-12-width:calc((var(--arc-column-width-with-gap) * 12) - var(--arc-columns-gap))}@media (min-width:636px){.arc-v12-0-0-beta-23 .arc .arc-Columns-inner,.arc-v12-0-0-beta-23 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-s)}}@media (min-width:768px){.arc-v12-0-0-beta-23 .arc .arc-Columns-inner,.arc-v12-0-0-beta-23 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-m)}}@media (min-width:1024px){.arc-v12-0-0-beta-23 .arc .arc-Columns-inner,.arc-v12-0-0-beta-23 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-l)}}@media (min-width:1280px){.arc-v12-0-0-beta-23 .arc .arc-Columns-inner,.arc-v12-0-0-beta-23 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-xl)}}@media (min-width:1440px){.arc-v12-0-0-beta-23 .arc .arc-Columns-inner,.arc-v12-0-0-beta-23 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-xxl)}}@media (min-width:1920px){.arc-v12-0-0-beta-23 .arc .arc-Columns-inner,.arc-v12-0-0-beta-23 .arc .arc-Columns-col{--arc-columns-gap:var(--columns-gutter-xxxl)}}.arc-v12-0-0-beta-23 .arc .arc-Columns{padding-top:1px}.arc-v12-0-0-beta-23 .arc .arc-Columns-inner{display:flex;flex-wrap:wrap;margin-left:calc(0px - var(--arc-columns-gap));margin-top:calc(-1px - var(--arc-columns-gap));pointer-events:none}.arc-v12-0-0-beta-23 .arc .arc-Columns-col{margin-left:var(--arc-columns-gap);margin-top:var(--arc-columns-gap);max-width:var(--arc-columns-span-12-width);pointer-events:auto;position:relative;width:100%}.arc-v12-0-0-beta-23 .arc .arc-Columns--gutterless .arc-Columns-inner,.arc-v12-0-0-beta-23 .arc .arc-Columns--gutterless .arc-Columns-col{--arc-columns-gap:0px}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--alignBottom{align-self:flex-end}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--alignCenter{align-self:center}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--alignTop{align-self:flex-start}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--debugVisible::before{align-items:center;background:rgba(207,58,138,0.5);bottom:0;content:"Col";display:flex;justify-content:center;left:0;outline:1px dashed #cf3a8a;outline-offset:-1px;position:absolute;right:0;top:0}.arc-v12-0-0-beta-23 .arc .arc-Columns-col:empty{display:none}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--0,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--0:empty{display:none}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--1,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--2,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--3,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--4,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--5,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--6,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--7,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--8,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--9,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--10,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--11,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--12,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--12:empty{display:block;max-width:100%}@media (min-width:636px){.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s0,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s0:empty{display:none;max-width:0}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s1,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s2,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s3,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s4,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s5,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s6,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s7,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s8,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s9,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s10,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s11,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s12,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--s12:empty{display:block;max-width:100%}}@media (min-width:768px){.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m0,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m0:empty{display:none;max-width:0}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m1,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m2,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m3,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m4,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m5,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m6,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m7,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m8,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m9,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m10,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m11,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m12,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--m12:empty{display:block;max-width:100%}}@media (min-width:1024px){.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l0,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l0:empty{display:none;max-width:0}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l1,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l2,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l3,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l4,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l5,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l6,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l7,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l8,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l9,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l10,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l11,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l12,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--l12:empty{display:block;max-width:100%}}@media (min-width:1280px){.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL0,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL0:empty{display:none;max-width:0}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL1,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL2,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL3,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL4,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL5,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL6,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL7,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL8,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL9,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL10,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL11,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL12,.arc-v12-0-0-beta-23 .arc .arc-Columns-col--xL12:empty{display:block;max-width:100%}}