@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.10

package/dist/ProgressBar/ProgressBar.esm.js

@@ -1,12 +1,11 @@
-import { a as __assign, _ as __rest, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import { a as __assign, _ as __rest, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import React__default, { useContext } from 'react';
-import { T as Text } from '../_shared/esm/Text-14f586ac.js';
-import { H as Heading } from '../_shared/esm/Heading-d16e0e53.js';
-import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-43cd9138.js';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
+import React__default from 'react';
+import { T as Text } from '../_shared/esm/Text-dc3f9cb5.js';
+import { H as Heading } from '../_shared/esm/Heading-e83f0d49.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-4b6b7468.js';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-69de5351.js';
+import '../_shared/esm/Surface-201aa0d6.js';
 
 var PROGRESS_BAR_ICON_MAP = {
     refresh: "progressBarRefresh",
@@ -28,13 +27,16 @@ var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
     return isIndeterminate ? indeterminateProps : determinateProps;
 };
 
+/**
+ * Use `ProgressBar` to show the progress of a specific task within a page.
+ */
 var ProgressBar = function (_a) {
     var _b = _a.state, state = _b === void 0 ? "loading" : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, _d = _a.isIndeterminate, isIndeterminate = _d === void 0 ? false : _d, headline = _a.headline, ariaLabel = _a.ariaLabel, action = _a.action, title = _a.title, description = _a.description, displayValue = _a.displayValue, props = __rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue"]);
-    var surface = useContext(Context).surface;
     var progressValue = Math.min(100, Math.max(0, value));
-    return (React__default.createElement("div", __assign({ "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
-            "arc-ProgressBar--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props)),
+    var autoFocusRef = function (canFocus) { return function (el) {
+        canFocus && el && el.focus();
+    }; };
+    return (React__default.createElement("div", __assign({ "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state)) }, filterDataAttrs(props)),
         React__default.createElement("div", { className: "arc-ProgressBar-titleDisplayValueContainer" },
             React__default.createElement("div", { className: "arc-ProgressBar-titleContainer" },
                 headline && React__default.createElement(Heading, { size: "s" }, headline),
@@ -45,11 +47,11 @@ var ProgressBar = function (_a) {
         React__default.createElement("div", { className: "arc-ProgressBar-container" },
             React__default.createElement("div", { className: "arc-ProgressBar-outerBar" },
                 React__default.createElement("div", __assign({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
-            description && (React__default.createElement("div", { className: "arc-ProgressBar-description" },
+            description && (React__default.createElement("div", { className: "arc-ProgressBar-description", role: "status" },
                 React__default.createElement(Text, { tone: state !== "error" ? "supporting" : "default" }, description))),
             action && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(VerticalSpace, { size: "8" }),
-                React__default.createElement("button", { className: "arc-ProgressBar-actionButton", onClick: action.action },
+                React__default.createElement("button", { ref: autoFocusRef(action.autofocusOnMount), className: "arc-ProgressBar-actionButton", onClick: action.action },
                     React__default.createElement("div", { className: "arc-ProgressBar-actionContainer" },
                         React__default.createElement(Text, null, action.text),
                         action.icon && (React__default.createElement("div", { className: "arc-ProgressBar-actionIcon" },

package/dist/ProgressBar/styles.css

@@ -0,0 +1 @@
+.arc .arc-ProgressBar-container{margin:var(--progress-bar-gap-m) 0 0}.arc .arc-ProgressBar-outerBar{background:var(--progress-bar-colors-light-bg-default-alt);border-radius:20px;height:var(--progress-bar-size-s);overflow:hidden}.arc .arc-ProgressBar-description{margin:var(--progress-bar-gap-m) 0 0}.arc .arc-ProgressBar-bar{height:100%}.arc .arc-ProgressBar-titleDisplayValueContainer{align-items:flex-end;display:flex}.arc .arc-ProgressBar-titleContainer{flex:1 1 auto}.arc .arc-ProgressBar-displayValueContainer{flex:0 1 auto}.arc .arc-ProgressBar-actionContainer{align-items:center;display:flex}.arc .arc-ProgressBar-actionButton{background:transparent;border:none;cursor:pointer;font:inherit;margin:0;outline:none;padding:0;position:relative}.arc .arc-ProgressBar-actionButton:focus-visible::before{border-radius:10px;bottom:calc(0px - 4px);box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-light-border-subtle);content:"";left:calc(0px - 4px);position:absolute;right:calc(0px - 4px);top:calc(0px - 4px)}.arc .arc-ProgressBar-actionButton:focus:not(:focus-visible)::before{box-shadow:none}.arc .arc-ProgressBar--loading .arc-ProgressBar-bar{background:var(--progress-bar-colors-light-fg-default)}.arc .arc-ProgressBar--loading .arc-ProgressBar-actionButton,.arc .arc-ProgressBar--loading .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-default-alt)}@media (hover:hover){.arc .arc-ProgressBar--loading .arc-ProgressBar-actionButton:hover,.arc .arc-ProgressBar--loading .arc-ProgressBar-actionButton:hover .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-default-alt-hover)}}.arc .arc-ProgressBar--error .arc-ProgressBar-bar{background:var(--progress-bar-colors-light-fg-error)}.arc .arc-ProgressBar--error .arc-ProgressBar-description,.arc .arc-ProgressBar--error .arc-ProgressBar-actionButton,.arc .arc-ProgressBar--error .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-error)}@media (hover:hover){.arc .arc-ProgressBar--error .arc-ProgressBar-actionButton:hover,.arc .arc-ProgressBar--error .arc-ProgressBar-actionButton:hover .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-error-hover)}}.arc .arc-ProgressBar--success .arc-ProgressBar-bar{background:var(--progress-bar-colors-light-bg-success)}.arc .arc-ProgressBar--success .arc-ProgressBar-actionButton,.arc .arc-ProgressBar--success .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-success)}@media (hover:hover){.arc .arc-ProgressBar--success .arc-ProgressBar-actionButton:hover,.arc .arc-ProgressBar--success .arc-ProgressBar-actionButton:hover .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-success-hover)}}.arc .arc-ProgressBar--loading .arc-ProgressBar-bar--indeterminate{animation:indeterminate 2s ease infinite;width:calc(100% / 3)}.arc .arc-ProgressBar--error .arc-ProgressBar-bar--indeterminate,.arc .arc-ProgressBar--success .arc-ProgressBar-bar--indeterminate{width:100%}@keyframes indeterminate{from{transform:translateX(-100%)}to{transform:translateX(calc(300%))}}

package/dist/ProgressStepper/ProgressStepper.cjs.js

@@ -2,15 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ProgressStepper = require('../_shared/cjs/ProgressStepper-74ee1eec.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var ProgressStepper = require('../_shared/cjs/ProgressStepper-65294193.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
 require('react');
 require('../_shared/cjs/index-9947ac13.js');
-require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/VerticalSpace-dc53bb70.js');
-require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
-require('../_shared/cjs/ThemeIcon-9534f091.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
+require('../_shared/cjs/VisuallyHidden-c691ea4d.js');
+require('../_shared/cjs/Icon-5dd78f2b.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
 
 
 

package/dist/ProgressStepper/ProgressStepper.esm.js

@@ -1,9 +1,7 @@
-export { P as ProgressStepper } from '../_shared/esm/ProgressStepper-5de34269.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { P as ProgressStepper } from '../_shared/esm/ProgressStepper-9bb4706f.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
 import 'react';
 import '../_shared/esm/index-2e73c2e9.js';
-import '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/VerticalSpace-43cd9138.js';
-import '../_shared/esm/VisuallyHidden-b9eebf71.js';
-import '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
+import '../_shared/esm/VisuallyHidden-59f004f5.js';
+import '../_shared/esm/Icon-6fef56b3.js';
+import '../_shared/esm/Surface-201aa0d6.js';

package/dist/ProgressStepper/styles.css

@@ -0,0 +1 @@
+.arc .arc-ProgressStepperItem{max-width:164px;min-width:164px}.arc .arc-ProgressStepperItem-iconWrapper{align-self:center;border-radius:100%;flex:0 0 auto;position:relative}.arc .arc-ProgressStepperItem-nodeItem{margin-bottom:var(--vertical-space-size-24)}.arc .arc-ProgressStepperItem-title{font:var(--sem-type-body-semi-m)}.arc .arc-ProgressStepperItem-title--link{cursor:pointer;text-decoration:none}.arc .arc-ProgressStepperItem-subTitle{font:var(--sem-type-body-reg-s);font-style:normal}.arc .arc-ProgressStepperItem-textSection{padding:var(--stepper-padding-s) var(--stepper-padding-s) 0 0}.arc .arc-ProgressStepperItem-iconSection{align-items:center;display:flex}.arc .arc-ProgressStepperItem .arc-ProgressStepperItem-iconSection::after{background-color:var(--stepper-colors-light-bg-subtle);content:"";display:block;height:1px;width:100%}.arc .arc-ProgressStepperItem:last-of-type .arc-ProgressStepperItem-iconSection::after{display:none}.arc .arc-ProgressStepperItem-statusIcon{border:var(--stepper-border-weight-m) solid transparent;border-radius:var(--stepper-border-radius);display:block;height:var(--stepper-size-icon-l);width:var(--stepper-size-icon-l)}.arc .arc-ProgressStepperItem--hasInteractiveStatus .arc-ProgressStepperItem-title,.arc .arc-ProgressStepperItem--hasInteractiveStatus .arc-ProgressStepperItem-subTitle{color:var(--stepper-colors-light-text-default)}.arc .arc-ProgressStepperItem--hasInteractiveStatus .arc-ProgressStepperItem-title--link:hover,.arc .arc-ProgressStepperItem--todo .arc-ProgressStepperItem-title--link:hover{color:var(--stepper-colors-light-text-hover);-webkit-text-decoration:var(--sem-underline);text-decoration:var(--sem-underline)}.arc .arc-ProgressStepperItem--todo .arc-ProgressStepperItem-title,.arc .arc-ProgressStepperItem--todo .arc-ProgressStepperItem-subTitle{color:var(--stepper-colors-light-text-subtle)}.arc .arc-ProgressStepperItem--completed .arc-ProgressStepperItem-iconSection::after{background-color:var(--stepper-colors-light-bg-default)}.arc .arc-ProgressStepperItem--todo .arc-ProgressStepperItem-statusIcon{border-color:var(--stepper-colors-light-border-subtle)}.arc .arc-ProgressStepperItem--completed .arc-ProgressStepperItem-iconWrapper,.arc .arc-ProgressStepperItem--current .arc-ProgressStepperItem-iconWrapper,.arc .arc-ProgressStepperItem--completed .arc-ProgressStepperItem-statusIcon{border-color:var(--stepper-colors-light-border-default);color:var(--stepper-colors-light-border-default)}.arc .arc-ProgressStepperItem--current .arc-ProgressStepperItem-iconWrapper{animation:pulse-animation 2s infinite}.arc .arc-ProgressStepperItem--error .arc-ProgressStepperItem-iconWrapper,.arc .arc-ProgressStepperItem--error .arc-ProgressStepperItem-statusIcon{background-color:var(--stepper-colors-light-bg-error-subtle);border-color:var(--stepper-colors-light-border-error);color:var(--stepper-colors-light-border-error)}.arc .arc-ProgressStepperItem--warning .arc-ProgressStepperItem-iconWrapper,.arc .arc-ProgressStepperItem--warning .arc-ProgressStepperItem-statusIcon{background-color:var(--stepper-colors-light-bg-warning-subtle);border-color:var(--stepper-colors-light-border-warning);color:var(--stepper-colors-light-border-warning)}.arc .arc-ProgressStepperItem--isFluid .arc-ProgressStepperItem::after,.arc .arc-ProgressStepperItem--isFluid .arc-ProgressStepperItem-iconSection{width:100%}.arc .arc-ProgressStepperItem--isFluid{flex:1 1 0;max-width:100%;min-width:auto}.arc .arc-ProgressStepperItem--small .arc-ProgressStepperItem-title{font:var(--sem-type-body-semi-s);font-style:normal}.arc .arc-ProgressStepperItem--small .arc-ProgressStepperItem-subTitle{font:var(--sem-type-body-reg-xs);font-style:normal}.arc .arc-ProgressStepperItem--vertical{align-items:stretch;display:flex;flex-direction:row;justify-content:flex-start;max-width:100%;min-height:68px;min-width:auto}.arc .arc-ProgressStepperItem--vertical .arc-ProgressStepperItem-iconSection::after{height:100%;width:1px}.arc .arc-ProgressStepperItem--vertical .arc-ProgressStepperItem-iconSection{align-items:center;flex:0 1 auto;flex-direction:column}.arc .arc-ProgressStepperItem--vertical .arc-ProgressStepperItem-textSection{flex:1 1 auto;margin-top:-4px;padding:0 0 0 var(--vertical-space-size-16);width:100%}.arc .arc-ProgressStepperItem--vertical .arc-ProgressStepperItem-subTitle{margin-bottom:var(--vertical-space-size-24)}.arc .arc-ProgressStepperItem--vertical.arc-ProgressStepperItem--small{min-height:64px}.arc .arc-ProgressStepperItem--vertical:last-of-type{min-height:auto}.arc .arc-ProgressStepperItem--vertical:last-of-type .arc-ProgressStepperItem-nodeItem{margin-bottom:0;margin-top:var(--vertical-space-size-24)}.arc .arc-ProgressStepperItem--vertical:last-of-type .arc-ProgressStepperItem-subTitle{margin-bottom:0}@keyframes pulse-animation{from{box-shadow:0 0 0 0 var(--stepper-colors-light-pluse-from)}to{box-shadow:0 0 0 8px var(--stepper-colors-light-pluse-to)}}.arc .arc-ProgressStepperItem-statusIcon--small{height:var(--stepper-size-icon-s);width:var(--stepper-size-icon-s)}.arc .arc-ProgressStepperItem-statusIconInner::before{background:var(--stepper-colors-light-border-variant) border-box;border:var(--stepper-border-weight-m) solid transparent;border-radius:var(--stepper-border-radius);bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);-webkit-mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);-webkit-mask:linear-gradient(#ffffff 0 0) padding-box,linear-gradient(#ffffff 0 0);mask:linear-gradient(#ffffff 0 0) padding-box,linear-gradient(#ffffff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;position:absolute;right:0;top:0}.arc .arc-ProgressStepperItem-statusIconInner::after{background:var(--stepper-colors-light-fg-variant);border-radius:1000px;content:"";height:100%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0.5);width:100%}.arc .arc-ProgressStepper{display:flex}.arc .arc-ProgressStepper--vertical{flex-direction:column}

package/dist/RadioGroup/RadioGroup.cjs.js

@@ -2,17 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var RadioGroup = require('../_shared/cjs/RadioGroup-9bc96f6a.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var RadioGroup = require('../_shared/cjs/RadioGroup-4fe1c546.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
 require('react');
-require('../_shared/cjs/FormControl-30f2330f.js');
+require('../_shared/cjs/FormControl-09c28bbb.js');
 require('../_shared/cjs/index-9947ac13.js');
-require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/DisclosureMini-145105a4.js');
-require('../_shared/cjs/Text-606ca3a2.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
-require('../_shared/cjs/ThemeIcon-9534f091.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
+require('../_shared/cjs/DisclosureMini-64a1c682.js');
+require('../_shared/cjs/Text-1b3e4fb6.js');
+require('../_shared/cjs/ThemeIcon-cf6ddb34.js');
+require('../_shared/cjs/VisuallyHidden-c691ea4d.js');
 
 
 
+exports.RadioButton = RadioGroup.RadioButton;
 exports.RadioGroup = RadioGroup.RadioGroup;

package/dist/RadioGroup/RadioGroup.esm.js

@@ -1,10 +1,10 @@
-export { R as RadioGroup } from '../_shared/esm/RadioGroup-002a32ba.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { a as RadioButton, R as RadioGroup } from '../_shared/esm/RadioGroup-84c7ca35.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
 import 'react';
-import '../_shared/esm/FormControl-433228f5.js';
+import '../_shared/esm/FormControl-350bb1c8.js';
 import '../_shared/esm/index-2e73c2e9.js';
-import '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/DisclosureMini-bf95a9db.js';
-import '../_shared/esm/Text-14f586ac.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
-import '../_shared/esm/ThemeIcon-eab5a4d0.js';
+import '../_shared/esm/Surface-201aa0d6.js';
+import '../_shared/esm/DisclosureMini-9caa350c.js';
+import '../_shared/esm/Text-dc3f9cb5.js';
+import '../_shared/esm/ThemeIcon-69de5351.js';
+import '../_shared/esm/VisuallyHidden-59f004f5.js';

package/dist/RadioGroup/styles.css

@@ -0,0 +1 @@
+.arc .arc-RadioButton{line-height:0}.arc .arc-RadioButton--withMargin,.arc .arc-RadioButton--withMarginSmall{margin-top:var(--radio-gap-m)}.arc .arc-RadioButton-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--radio-colors-light-bg-default);border:var(--radio-border-weight-s) solid var(--radio-colors-light-border-default);border-radius:100%;cursor:pointer;display:block;margin-bottom:0;margin-left:0;margin-right:8px;margin-top:0;min-height:var(--radio-size-xl);min-width:var(--radio-size-xl)}.arc .arc-RadioButton-label{align-items:center;cursor:pointer;display:inline-flex;font:var(--radio-type-label-m)}.arc .arc-RadioButton-label--alignTop{align-items:flex-start}.arc .arc-RadioButton-label--marginTop{margin-top:4px}.arc .arc-RadioButton--small .arc-RadioButton-label--marginTop{margin-top:2px}.arc .arc-RadioButton-helper{display:block;font:var(--sem-type-support-reg-s)}.arc .arc-RadioButton--disabled .arc-RadioButton-input,.arc .arc-RadioButton--disabled .arc-RadioButton-label{cursor:not-allowed}.arc .arc-RadioButton--small .arc-RadioButton-label{font:var(--radio-type-label-s)}.arc .arc-RadioButton--small .arc-RadioButton-helper{font:var(--sem-type-support-reg-xs)}.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input{background:var(--radio-colors-dark-bg-default);border-color:var(--radio-colors-dark-border-default)}.arc .arc-RadioButton--small .arc-RadioButton-input{min-height:var(--radio-size-l);min-width:var(--radio-size-l)}.arc .arc-RadioButton-input:checked{background:var(--radio-colors-light-fg-default);box-shadow:inset 0 0 0 6px var(--radio-colors-light-bg-default)}.arc .arc-RadioButton-input:focus,.arc .arc-RadioButton-input:focus-visible{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-light-border-subtle),inset 0 0 0 6px var(--radio-colors-light-bg-default);outline:var(--focus-border-weight-s) solid transparent}.arc .arc-RadioButton--small .arc-RadioButton-input:checked{background:var(--radio-colors-light-fg-default);box-shadow:inset 0 0 0 4px var(--radio-colors-light-bg-default)}.arc .arc-RadioButton--small .arc-RadioButton-input:focus,.arc .arc-RadioButton--small .arc-RadioButton-input:focus-visible{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-light-border-subtle),inset 0 0 0 4px var(--radio-colors-light-bg-default);outline:var(--focus-border-weight-s) solid transparent}.arc .arc-RadioButton-input:focus:not(:focus-visible){box-shadow:inset 0 0 0 6px var(--radio-colors-light-bg-default)}.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input:checked{background:var(--radio-colors-dark-fg-default);box-shadow:inset 0 0 0 6px var(--radio-colors-dark-bg-default)}.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input:focus,.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input:focus-visible{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-dark-border-subtle),inset 0 0 0 6px var(--radio-colors-dark-bg-default)}.arc .arc-RadioButton--onDarkSurface.arc-RadioButton--small .arc-RadioButton-input:checked{box-shadow:inset 0 0 0 4px var(--radio-colors-dark-bg-default)}.arc .arc-RadioButton--onDarkSurface.arc-RadioButton--small .arc-RadioButton-input:focus,.arc .arc-RadioButton--onDarkSurface.arc-RadioButton--small .arc-RadioButton-input:focus-visible{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-dark-border-subtle),inset 0 0 0 4px var(--radio-colors-dark-bg-default)}.arc .arc-RadioButton--small .arc-RadioButton-input:focus:not(:focus-visible){box-shadow:inset 0 0 0 4px var(--radio-colors-light-bg-default)}.arc .arc-RadioButton--disabled{color:var(--radio-colors-light-text-disabled)}.arc .arc-RadioButton-input[disabled]{background:var(--radio-colors-light-bg-disabled);border-color:var(--radio-colors-light-border-disabled)}.arc .arc-RadioButton-input[disabled]:checked{background:var(--radio-colors-light-fg-disabled);box-shadow:inset 0 0 0 6px var(--radio-colors-light-bg-disabled)}.arc .arc-RadioButton-input[disabled]:focus,.arc .arc-RadioButton-input[disabled]:focus-visible{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-light-border-subtle),inset 0 0 0 6px var(--radio-colors-light-bg-disabled)}.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input:focus:not(:focus-visible){box-shadow:inset 0 0 0 6px var(--radio-colors-dark-bg-default)}.arc .arc-RadioButton--onDarkSurface.arc-RadioButton--small .arc-RadioButton-input:focus:not(:focus-visible){box-shadow:inset 0 0 0 4px var(--radio-colors-dark-bg-default)}.arc .arc-RadioButton--onDarkSurface.arc-RadioButton--disabled{color:var(--radio-colors-dark-text-disabled)}.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input[disabled]{background:var(--radio-colors-dark-bg-disabled);border-color:var(--radio-colors-dark-border-disabled)}.arc .arc-RadioButton--small .arc-RadioButton-input[disabled]:checked{box-shadow:inset 0 0 0 4px var(--radio-colors-light-bg-disabled)}.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input[disabled]:checked{background:var(--radio-colors-dark-fg-disabled);box-shadow:inset 0 0 0 6px var(--radio-colors-dark-bg-disabled)}.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input[disabled]:focus,.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input[disabled]:focus-visible{background:var(--radio-colors-dark-bg-disabled);box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-dark-border-subtle),inset 0 0 0 4px var(--radio-colors-dark-bg-disabled)}.arc .arc-RadioButton--small .arc-RadioButton-input[disabled]:focus,.arc .arc-RadioButton--small .arc-RadioButton-input[disabled]:focus-visible{background:var(--radio-colors-light-bg-disabled);box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-light-border-subtle),inset 0 0 0 4px var(--radio-colors-light-bg-disabled)}.arc .arc-RadioButton--small .arc-RadioButton-input[disabled]:checked:focus,.arc .arc-RadioButton--small .arc-RadioButton-input[disabled]:checked:focus-visible{background:var(--radio-colors-light-fg-disabled);box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-light-border-subtle),inset 0 0 0 4px var(--radio-colors-light-bg-disabled)}.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input[disabled]:checked:focus,.arc .arc-RadioButton--onDarkSurface .arc-RadioButton-input[disabled]:checked:focus-visible{background:var(--radio-colors-dark-fg-disabled);box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-dark-border-subtle),inset 0 0 0 6px var(--radio-colors-dark-bg-disabled)}.arc .arc-RadioButton--onDarkSurface.arc-RadioButton--small .arc-RadioButton-input[disabled]:checked{box-shadow:inset 0 0 0 4px var(--radio-colors-dark-bg-disabled)}.arc .arc-RadioButton--onDarkSurface.arc-RadioButton--small .arc-RadioButton-input[disabled]:focus,.arc .arc-RadioButton--onDarkSurface.arc-RadioButton--small .arc-RadioButton-input[disabled]:focus-visible{background:var(--radio-colors-dark-bg-disabled);box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-dark-border-subtle),inset 0 0 0 4px var(--radio-colors-dark-bg-disabled)}.arc .arc-RadioButton--onDarkSurface.arc-RadioButton--small .arc-RadioButton-input[disabled]:checked:focus,.arc .arc-RadioButton--onDarkSurface.arc-RadioButton--small .arc-RadioButton-input[disabled]:checked:focus-visible{background:var(--radio-colors-dark-fg-disabled);box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-dark-border-subtle),inset 0 0 0 4px var(--radio-colors-dark-bg-disabled)}.arc .arc-RadioGroup-radioButtonContainer .arc-RadioButton--withMargin:first-child{margin-top:0}.arc .arc-RadioGroup-error{align-items:center;color:#da020f;display:flex;line-height:1.5;margin-top:12px}.arc .arc-RadioGroup-error .arc-RadioGroup-error--icon{color:currentColor;flex-shrink:0;height:24px;margin-right:4px;width:24px}.arc .arc-RadioGroup--onDarkSurface .arc-RadioGroup-error{color:#fa9590}

package/dist/Rule/Rule.cjs.js

@@ -2,18 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var React = require('react');
+var index = require('../_shared/cjs/index-9947ac13.js');
+var Surface = require('../_shared/cjs/Surface-ca708a8c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
- * Use `Rule` to display a horizontal rule.
+ * Use `Rule` to display a horizontal or vertical rule.
  */
-var Rule = function (props) {
-    return React__default["default"].createElement("hr", filterDataAttrs.__assign({ className: "arc-Rule" }, filterDataAttrs.filterDataAttrs(props)));
+var Rule = function (_a, props) {
+    var _b;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("hr", index_es.__assign({ className: index.classNames((_b = {
+                "arc-Rule": true
+            },
+            _b["arc-Rule--".concat(orientation)] = true,
+            _b["arc-Rule--onDarkSurface"] = surface === "dark",
+            _b)) }, index_es.filterDataAttrs(props))));
 };
 
 exports.Rule = Rule;

package/dist/Rule/Rule.esm.js

@@ -1,11 +1,21 @@
-import { a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
-import React__default from 'react';
+import { a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
+import React__default, { useContext } from 'react';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { C as Context } from '../_shared/esm/Surface-201aa0d6.js';
 
 /**
- * Use `Rule` to display a horizontal rule.
+ * Use `Rule` to display a horizontal or vertical rule.
  */
-var Rule = function (props) {
-    return React__default.createElement("hr", __assign({ className: "arc-Rule" }, filterDataAttrs(props)));
+var Rule = function (_a, props) {
+    var _b;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var surface = useContext(Context).surface;
+    return (React__default.createElement("hr", __assign({ className: classNames((_b = {
+                "arc-Rule": true
+            },
+            _b["arc-Rule--".concat(orientation)] = true,
+            _b["arc-Rule--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props))));
 };
 
 export { Rule };

package/dist/Rule/styles.css

@@ -0,0 +1 @@
+.arc .arc-Rule{background-color:var(--rule-colors-light-border-subtle);border:0;color:var(--rule-colors-light-border-subtle)}.arc .arc-Rule--horizontal{height:var(--rule-border-weight-s);margin-bottom:0;margin-top:0}.arc .arc-Rule--vertical{height:100%;margin-left:0;margin-right:0;width:var(--rule-border-weight-s)}.arc .arc-Rule--onDarkSurface{background-color:var(--rule-colors-dark-border-subtle);color:var(--rule-colors-dark-border-subtle)}

package/dist/ScrollToTop/ScrollToTop.cjs.js

@@ -2,23 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var index = require('../_shared/cjs/index-9947ac13.js');
 var React = require('react');
-var debounce = require('../_shared/cjs/debounce-123468fb.js');
-var Surface = require('../_shared/cjs/Surface-038db6e1.js');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-9534f091.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
+var debounce = require('../_shared/cjs/debounce-a74c28cf.js');
+var Surface = require('../_shared/cjs/Surface-ca708a8c.js');
+var Icon = require('../_shared/cjs/Icon-5dd78f2b.js');
+require('../_shared/cjs/_commonjsHelpers-56412ec5.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const BtIconArrowAltUp = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M20.35352,13.14648,16,8.793l-4.35352,4.35352a.49995.49995,0,0,0,.707.707L15.5,10.707V22.5a.5.5,0,0,0,1,0V10.707l3.14648,3.14648a.49995.49995,0,0,0,.707-.707Z",
+      fill: "currentColor",
+    }),
+  );
+
 /**
  * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
  */
 var ScrollToTop = function (_a) {
-    var _b = _a.appear, appear = _b === void 0 ? "always" : _b, _c = _a.isFixed, isFixed = _c === void 0 ? true : _c, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, props = filterDataAttrs.__rest(_a, ["appear", "isFixed", "fill", "zIndex"]);
+    var _b = _a.appear, appear = _b === void 0 ? "always" : _b, _c = _a.isFixed, isFixed = _c === void 0 ? true : _c, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, props = index_es.__rest(_a, ["appear", "isFixed", "fill", "zIndex"]);
     var _f = React.useState(false), hasScrolled = _f[0], setHasScrolled = _f[1];
     var surface = React.useContext(Surface.Context).surface;
     React.useEffect(function () {
@@ -34,17 +51,17 @@ var ScrollToTop = function (_a) {
             behavior: "smooth"
         });
     };
-    return (React__default["default"].createElement("button", filterDataAttrs.__assign({ onClick: onClick, style: {
+    return (React__default["default"].createElement("button", index_es.__assign({ onClick: onClick, style: {
             zIndex: zIndex
         }, className: index.classNames("arc-ScrollToTop", "arc-ScrollToTop--".concat(fill), {
             "arc-ScrollToTop--fixed": isFixed,
             "arc-ScrollToTop--onDarkSurface": surface === "dark",
             "arc-ScrollToTop--visible": appear === "always" || (appear === "afterScroll" && hasScrolled)
-        }) }, filterDataAttrs.filterDataAttrs(props)),
+        }) }, index_es.filterDataAttrs(props)),
         React__default["default"].createElement("div", { className: "arc-ScrollToTop-textWrapper" },
-            React__default["default"].createElement("span", { className: "arc-ScrollToTop-text" }, "Scroll to top")),
+            React__default["default"].createElement("span", { className: "arc-ScrollToTop-text" }, "Back to top")),
         React__default["default"].createElement("span", { className: "arc-ScrollToTop-iconContainer" },
-            React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 44, icon: "scrollToTop" }))));
+            React__default["default"].createElement(Icon.Icon, { size: 44, icon: BtIconArrowAltUp }))));
 };
 
 exports.ScrollToTop = ScrollToTop;

package/dist/ScrollToTop/ScrollToTop.esm.js

@@ -1,10 +1,27 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
 import React__default, { useState, useContext, useEffect } from 'react';
-import { d as debounce_1 } from '../_shared/esm/debounce-6fed6b84.js';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
+import { d as debounce_1 } from '../_shared/esm/debounce-c8e41002.js';
+import { C as Context } from '../_shared/esm/Surface-201aa0d6.js';
+import { I as Icon } from '../_shared/esm/Icon-6fef56b3.js';
+import '../_shared/esm/_commonjsHelpers-0109d574.js';
+
+const BtIconArrowAltUp = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M20.35352,13.14648,16,8.793l-4.35352,4.35352a.49995.49995,0,0,0,.707.707L15.5,10.707V22.5a.5.5,0,0,0,1,0V10.707l3.14648,3.14648a.49995.49995,0,0,0,.707-.707Z",
+      fill: "currentColor",
+    }),
+  );
 
 /**
  * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
@@ -34,9 +51,9 @@ var ScrollToTop = function (_a) {
             "arc-ScrollToTop--visible": appear === "always" || (appear === "afterScroll" && hasScrolled)
         }) }, filterDataAttrs(props)),
         React__default.createElement("div", { className: "arc-ScrollToTop-textWrapper" },
-            React__default.createElement("span", { className: "arc-ScrollToTop-text" }, "Scroll to top")),
+            React__default.createElement("span", { className: "arc-ScrollToTop-text" }, "Back to top")),
         React__default.createElement("span", { className: "arc-ScrollToTop-iconContainer" },
-            React__default.createElement(ThemeIcon, { size: 44, icon: "scrollToTop" }))));
+            React__default.createElement(Icon, { size: 44, icon: BtIconArrowAltUp }))));
 };
 
 export { ScrollToTop };

package/dist/ScrollToTop/styles.css

@@ -0,0 +1 @@
+.arc .arc-ScrollToTop{align-items:center;border-radius:var(--backtotop-border-radius-m);box-shadow:var(--elevation-02);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:center;margin:0;overflow:hidden;padding:0;visibility:hidden}.arc .arc-ScrollToTop--visible{visibility:visible}.arc .arc-ScrollToTop--fixed{bottom:20px;position:fixed;right:20px}.arc .arc-ScrollToTop-textWrapper{width:0}.arc .arc-ScrollToTop-text{display:block;padding-left:var(--backtotop-padding-m);text-align:left;white-space:nowrap}@media (hover:hover){.arc .arc-ScrollToTop:hover .arc-ScrollToTop-textWrapper{width:auto}}.arc .arc-ScrollToTop:focus-visible .arc-ScrollToTop-textWrapper,.arc .arc-ScrollToTop:active .arc-ScrollToTop-textWrapper{width:auto}.arc .arc-ScrollToTop--solid{background-color:var(--backtotop-colors-light-bg-default);border:var(--backtotop-border-weight-m) solid var(--backtotop-colors-light-border-strong);color:var(--backtotop-colors-light-text-default-alt)}.arc .arc-ScrollToTop--solid .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-light-bg-default)}@media (hover:hover){.arc .arc-ScrollToTop--solid:hover,.arc .arc-ScrollToTop--solid:hover .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-light-bg-hover)}}.arc .arc-ScrollToTop:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-ScrollToTop--solid:focus-visible{background-color:var(--backtotop-colors-light-bg-selected)}.arc .arc-ScrollToTop--solid:focus-visible .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-light-bg-selected)}.arc .arc-ScrollToTop--solid:active,.arc .arc-ScrollToTop--solid:active .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-light-bg-selected)}.arc .arc-ScrollToTop--outlined{background-color:var(--backtotop-colors-light-bg-strong);border:var(--backtotop-border-weight-m) solid var(--backtotop-colors-light-border-default);color:var(--backtotop-colors-light-text-default)}.arc .arc-ScrollToTop--outlined .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-light-bg-strong)}.arc .arc-ScrollToTop--outlined:active{background-color:var(--backtotop-colors-light-bg-subtle);border-color:var(--backtotop-colors-light-border-selected)}.arc .arc-ScrollToTop--outlined:active .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-light-bg-subtle)}.arc .arc-ScrollToTop--onDarkSurface{box-shadow:var(--elevation-02)}.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--solid{background-color:var(--backtotop-colors-dark-bg-default);border-color:var(--backtotop-colors-dark-border-strong);color:var(--backtotop-colors-dark-fg-default)}.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--solid .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-dark-bg-default)}@media (hover:hover){.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--solid:hover,.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--solid:hover .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-dark-bg-hover)}}.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--solid:focus-visible{background-color:var(--backtotop-colors-dark-bg-selected);border:var(--backtotop-border-weight-m) solid var(--backtotop-colors-dark-border-focus)}.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--solid:focus-visible .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-dark-bg-selected)}.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--solid:active,.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--solid:active .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-dark-bg-selected)}.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--outlined{background-color:var(--backtotop-colors-dark-bg-strong);border-color:var(--backtotop-colors-dark-border-default);color:var(--backtotop-colors-dark-text-default-alt)}.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--outlined .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-dark-bg-strong)}/* ! selected token being used in hover */@media (hover:hover){.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--outlined:hover{background-color:var(--backtotop-colors-dark-bg-strong);border-color:var(--backtotop-colors-dark-border-hover)}.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--outlined:hover .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-dark-bg-strong)}}.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--outlined:focus-visible{border:var(--backtotop-border-weight-m) solid var(--backtotop-colors-dark-border-focus)}/* ! hover tokens used on active state */.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--outlined:active{background-color:var(--backtotop-colors-dark-bg-subtle);border-color:var(--backtotop-colors-dark-border-selected)}.arc .arc-ScrollToTop--onDarkSurface.arc-ScrollToTop--outlined:active .arc-ScrollToTop-iconContainer{background-color:var(--backtotop-colors-dark-bg-subtle)}

package/dist/Section/Section.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Section = require('../_shared/cjs/Section-59804166.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var Section = require('../_shared/cjs/Section-4415d756.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
 require('../_shared/cjs/index-9947ac13.js');
 require('react');
 

package/dist/Section/Section.esm.js

@@ -1,4 +1,4 @@
-export { S as Section } from '../_shared/esm/Section-73781b56.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { S as Section } from '../_shared/esm/Section-3ab74edb.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
 import '../_shared/esm/index-2e73c2e9.js';
 import 'react';

package/dist/Section/styles.css

@@ -0,0 +1 @@
+.arc .arc-Section{margin-left:auto;margin-right:auto;max-width:var(--arc-size-section-width-s);padding-left:var(--arc-size-section-margin-s);padding-right:var(--arc-size-section-margin-s);position:relative;width:100%}@media (min-width:636px){.arc .arc-Section{max-width:var(--arc-size-section-width-m);padding-left:var(--arc-size-section-margin-m);padding-right:var(--arc-size-section-margin-m)}}@media (min-width:1024px){.arc .arc-Section{max-width:var(--arc-size-section-width-l);padding-left:var(--arc-size-section-margin-l);padding-right:var(--arc-size-section-margin-l)}}.arc .arc-Section--fullWidth{max-width:100%}.arc .arc-Section--debugVisible::after{align-items:center;background:rgba(207,58,138,0.5);bottom:0;content:"Section";display:flex;justify-content:center;left:0;outline:1px dashed #cf3a8a;outline-offset:-1px;position:absolute;right:0;top:0}