@arc-ui/components 12.0.0-beta.9 → 12.0.0

package/lib/ProgressBar/ProgressBar.cjs

@@ -0,0 +1,68 @@
+'use client';
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var Text = require('../_shared/cjs/Text-jwsn80lQ.cjs');
+var Heading = require('../_shared/cjs/Heading-BYBmZkmS.cjs');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-DLQUYsvc.cjs');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-CwYN77IF.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+require('../_shared/cjs/SemanticHeading-C1-fyc3V.cjs');
+
+var PROGRESS_BAR_ICON_MAP = {
+    refresh: "progressBarRefresh",
+    tick: "progressBarSuccess",
+    cross: "progressBarError",
+};
+
+var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
+    var commonProps = {
+        role: "progressbar",
+        "data-testid": "progressbar",
+        "aria-label": ariaLabel,
+        tabIndex: 0,
+    };
+    var indeterminateProps = tslib_es6.__assign(tslib_es6.__assign({}, commonProps), { className: index.classNames("arc-ProgressBar-bar", "arc-ProgressBar-bar--indeterminate") });
+    var determinateProps = tslib_es6.__assign(tslib_es6.__assign({}, commonProps), { className: "arc-ProgressBar-bar", "aria-valuenow": progressValue, style: {
+            transform: "translateX(".concat(-100 + progressValue, "%)"),
+        } });
+    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 = tslib_es6.__rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue"]);
+    var progressValue = Math.min(100, Math.max(0, value));
+    var autoFocusRef = function (canFocus) { return function (el) {
+        canFocus && el && el.focus();
+    }; };
+    return (React.createElement("div", tslib_es6.__assign({ "data-testid": "progress", className: index.classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state)) }, filterAttrs.filterAttrs(props)),
+        React.createElement("div", { className: "arc-ProgressBar-titleDisplayValueContainer" },
+            React.createElement("div", { className: "arc-ProgressBar-titleContainer" },
+                headline && React.createElement(Heading.Heading, { size: "s" }, headline),
+                headline && title && React.createElement(VerticalSpace.VerticalSpace, { size: "4" }),
+                title && React.createElement(Text.Text, null, title)),
+            displayValue && (React.createElement("div", { "data-testid": "display-value", className: "arc-ProgressBar-displayValueContainer" },
+                React.createElement(Text.Text, null, displayValue)))),
+        React.createElement("div", { className: "arc-ProgressBar-container" },
+            React.createElement("div", { className: "arc-ProgressBar-outerBar" },
+                React.createElement("div", tslib_es6.__assign({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
+            description && (React.createElement("div", { className: "arc-ProgressBar-description", role: "status" },
+                React.createElement(Text.Text, { tone: state !== "error" ? "supporting" : "default" }, description))),
+            action && (React.createElement(React.Fragment, null,
+                React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
+                React.createElement("button", { ref: autoFocusRef(action.autofocusOnMount), className: "arc-ProgressBar-actionButton", onClick: action.action },
+                    React.createElement("div", { className: "arc-ProgressBar-actionContainer" },
+                        action.icon && (React.createElement("div", { className: "arc-ProgressBar-actionIcon" },
+                            React.createElement(ThemeIcon.ThemeIcon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))),
+                        React.createElement(Text.Text, null, action.text))))))));
+};
+
+exports.ProgressBar = ProgressBar;

package/lib/ProgressBar/ProgressBar.mjs

@@ -0,0 +1,66 @@
+'use client';
+import { a as __assign, _ as __rest } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import React__default from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { T as Text } from '../_shared/esm/Text-BAzOkkzN.mjs';
+import { H as Heading } from '../_shared/esm/Heading-Da-o0d5x.mjs';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-BLWB02I7.mjs';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-B0n6cKRb.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/Surface-C69KVzkY.mjs';
+import '../_shared/esm/SemanticHeading-DpEBq7pG.mjs';
+
+var PROGRESS_BAR_ICON_MAP = {
+    refresh: "progressBarRefresh",
+    tick: "progressBarSuccess",
+    cross: "progressBarError",
+};
+
+var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
+    var commonProps = {
+        role: "progressbar",
+        "data-testid": "progressbar",
+        "aria-label": ariaLabel,
+        tabIndex: 0,
+    };
+    var indeterminateProps = __assign(__assign({}, commonProps), { className: classNames("arc-ProgressBar-bar", "arc-ProgressBar-bar--indeterminate") });
+    var determinateProps = __assign(__assign({}, commonProps), { className: "arc-ProgressBar-bar", "aria-valuenow": progressValue, style: {
+            transform: "translateX(".concat(-100 + progressValue, "%)"),
+        } });
+    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 progressValue = Math.min(100, Math.max(0, value));
+    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)) }, filterAttrs(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),
+                headline && title && React__default.createElement(VerticalSpace, { size: "4" }),
+                title && React__default.createElement(Text, null, title)),
+            displayValue && (React__default.createElement("div", { "data-testid": "display-value", className: "arc-ProgressBar-displayValueContainer" },
+                React__default.createElement(Text, null, displayValue)))),
+        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", 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", { ref: autoFocusRef(action.autofocusOnMount), className: "arc-ProgressBar-actionButton", onClick: action.action },
+                    React__default.createElement("div", { className: "arc-ProgressBar-actionContainer" },
+                        action.icon && (React__default.createElement("div", { className: "arc-ProgressBar-actionIcon" },
+                            React__default.createElement(ThemeIcon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))),
+                        React__default.createElement(Text, null, action.text))))))));
+};
+
+export { ProgressBar };

package/lib/ProgressBar/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0 .arc .arc-ProgressBar-container{margin:var(--progress-bar-gap-m) 0 0}.arc-v12-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-v12-0-0 .arc .arc-ProgressBar-description{margin:var(--progress-bar-gap-m) 0 0}.arc-v12-0-0 .arc .arc-ProgressBar-bar{height:100%}.arc-v12-0-0 .arc .arc-ProgressBar-titleDisplayValueContainer{align-items:flex-end;display:flex}.arc-v12-0-0 .arc .arc-ProgressBar-titleContainer{flex:1 1 auto}.arc-v12-0-0 .arc .arc-ProgressBar-displayValueContainer{flex:0 1 auto}.arc-v12-0-0 .arc .arc-ProgressBar-actionContainer{align-items:center;display:flex;gap:4px}.arc-v12-0-0 .arc .arc-ProgressBar-actionButton{background:transparent;border:none;cursor:pointer;font:inherit;margin:0;outline:none;padding:0;position:relative}.arc-v12-0-0 .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-v12-0-0 .arc .arc-ProgressBar-actionButton:focus:not(:focus-visible)::before{box-shadow:none}.arc-v12-0-0 .arc .arc-ProgressBar--loading .arc-ProgressBar-bar{background:var(--progress-bar-colors-light-fg-default)}.arc-v12-0-0 .arc .arc-ProgressBar--loading .arc-ProgressBar-actionButton,.arc-v12-0-0 .arc .arc-ProgressBar--loading .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-default-alt)}@media (hover:hover){.arc-v12-0-0 .arc .arc-ProgressBar--loading .arc-ProgressBar-actionButton:hover,.arc-v12-0-0 .arc .arc-ProgressBar--loading .arc-ProgressBar-actionButton:hover .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-default-alt-hover)}}.arc-v12-0-0 .arc .arc-ProgressBar--error .arc-ProgressBar-bar{background:var(--progress-bar-colors-light-fg-error)}.arc-v12-0-0 .arc .arc-ProgressBar--error .arc-ProgressBar-description,.arc-v12-0-0 .arc .arc-ProgressBar--error .arc-ProgressBar-actionButton,.arc-v12-0-0 .arc .arc-ProgressBar--error .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-error)}@media (hover:hover){.arc-v12-0-0 .arc .arc-ProgressBar--error .arc-ProgressBar-actionButton:hover,.arc-v12-0-0 .arc .arc-ProgressBar--error .arc-ProgressBar-actionButton:hover .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-error-hover)}}.arc-v12-0-0 .arc .arc-ProgressBar--success .arc-ProgressBar-bar{background:var(--progress-bar-colors-light-bg-success)}.arc-v12-0-0 .arc .arc-ProgressBar--success .arc-ProgressBar-actionButton,.arc-v12-0-0 .arc .arc-ProgressBar--success .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-success)}@media (hover:hover){.arc-v12-0-0 .arc .arc-ProgressBar--success .arc-ProgressBar-actionButton:hover,.arc-v12-0-0 .arc .arc-ProgressBar--success .arc-ProgressBar-actionButton:hover .arc-ProgressBar-actionIcon{color:var(--progress-bar-colors-light-text-success-hover)}}.arc-v12-0-0 .arc .arc-ProgressBar--loading .arc-ProgressBar-bar--indeterminate{animation:indeterminate 2s ease infinite;width:calc(100% / 3)}.arc-v12-0-0 .arc .arc-ProgressBar--error .arc-ProgressBar-bar--indeterminate,.arc-v12-0-0 .arc .arc-ProgressBar--success .arc-ProgressBar-bar--indeterminate{width:100%}@keyframes indeterminate{from{transform:translateX(-100%)}to{transform:translateX(calc(300%))}}

package/lib/ProgressStepper/ProgressStepper.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+var ProgressStepper = require('../_shared/cjs/ProgressStepper-DTZQabiV.cjs');
+require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+require('react');
+require('../_shared/cjs/index-CTlXMLug.cjs');
+require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+require('../_shared/cjs/capitalise-first-letter-CdhexpSx.cjs');
+require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
+require('../_shared/cjs/Icon-Dk2XHa7V.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+
+
+
+exports.ProgressStepper = ProgressStepper.ProgressStepper;
+exports.ProgressStepperItem = ProgressStepper.ProgressStepperItem;

package/lib/ProgressStepper/ProgressStepper.mjs

@@ -0,0 +1,12 @@
+'use client';
+export { P as ProgressStepper, a as ProgressStepperItem } from '../_shared/esm/ProgressStepper-CujHLQsm.mjs';
+import '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import 'react';
+import '../_shared/esm/index-5C0-U8cc.mjs';
+import '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import '../_shared/esm/capitalise-first-letter-Cubg2CS1.mjs';
+import '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
+import '../_shared/esm/Icon-CCUbr_AO.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/Surface-C69KVzkY.mjs';

package/lib/ProgressStepper/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0 .arc .arc-ProgressStepperItem{display:flex;flex-direction:column;max-width:164px;min-width:164px}.arc-v12-0-0 .arc .arc-ProgressStepperItem--invertLabelPosition{flex-direction:column-reverse;justify-content:space-between}.arc-v12-0-0 .arc .arc-ProgressStepperItem-iconWrapper{align-self:center;border-radius:100%;flex:0 0 auto;position:relative}.arc-v12-0-0 .arc .arc-ProgressStepperItem-nodeItem{margin-bottom:var(--vertical-space-size-24)}.arc-v12-0-0 .arc .arc-ProgressStepperItem-title{font:var(--sem-type-body-semi-m)}.arc-v12-0-0 .arc .arc-ProgressStepperItem-title--link{cursor:pointer;text-decoration:none}.arc-v12-0-0 .arc .arc-ProgressStepperItem-subTitle{font:var(--sem-type-body-reg-s);font-style:normal}.arc-v12-0-0 .arc .arc-ProgressStepperItem-textSection{padding:var(--stepper-padding-s) var(--stepper-padding-s) 0 0}.arc-v12-0-0 .arc .arc-ProgressStepperItem--invertLabelPosition .arc-ProgressStepperItem-textSection{padding:0 var(--stepper-padding-s) var(--stepper-padding-s) 0}.arc-v12-0-0 .arc .arc-ProgressStepperItem-iconSection{align-items:center;display:flex}.arc-v12-0-0 .arc .arc-ProgressStepperItem .arc-ProgressStepperItem-iconSection::after{background-color:var(--stepper-colors-light-bg-subtle);content:"";display:block;height:1px;width:100%}.arc-v12-0-0 .arc .arc-ProgressStepperItem:last-of-type .arc-ProgressStepperItem-iconSection::after{display:none}.arc-v12-0-0 .arc .arc-ProgressStepperItem-statusIcon{border:var(--stepper-border-weight-s) solid transparent;border-radius:var(--stepper-border-radius);display:block;height:var(--stepper-size-icon-l);width:var(--stepper-size-icon-l)}.arc-v12-0-0 .arc .arc-ProgressStepperItem--hasInteractiveStatus .arc-ProgressStepperItem-title,.arc-v12-0-0 .arc .arc-ProgressStepperItem--hasInteractiveStatus .arc-ProgressStepperItem-subTitle{color:var(--stepper-colors-light-text-default)}.arc-v12-0-0 .arc .arc-ProgressStepperItem--hasInteractiveStatus .arc-ProgressStepperItem-title--link:hover,.arc-v12-0-0 .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-v12-0-0 .arc .arc-ProgressStepperItem--todo .arc-ProgressStepperItem-title,.arc-v12-0-0 .arc .arc-ProgressStepperItem--todo .arc-ProgressStepperItem-subTitle{color:var(--stepper-colors-light-text-subtle)}.arc-v12-0-0 .arc .arc-ProgressStepperItem--completed .arc-ProgressStepperItem-iconSection::after{background-color:var(--stepper-colors-light-bg-default)}.arc-v12-0-0 .arc .arc-ProgressStepperItem--todo .arc-ProgressStepperItem-statusIcon{border-color:var(--stepper-colors-light-border-subtle)}.arc-v12-0-0 .arc .arc-ProgressStepperItem--completed .arc-ProgressStepperItem-iconWrapper,.arc-v12-0-0 .arc .arc-ProgressStepperItem--current .arc-ProgressStepperItem-iconWrapper,.arc-v12-0-0 .arc .arc-ProgressStepperItem--completed .arc-ProgressStepperItem-statusIcon{border-color:var(--stepper-colors-light-border-default);color:var(--stepper-colors-light-border-default)}.arc-v12-0-0 .arc .arc-ProgressStepperItem--current .arc-ProgressStepperItem-iconWrapper{animation:pulse-animation 2s infinite}.arc-v12-0-0 .arc .arc-ProgressStepperItem--error .arc-ProgressStepperItem-iconWrapper,.arc-v12-0-0 .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-v12-0-0 .arc .arc-ProgressStepperItem--warning .arc-ProgressStepperItem-iconWrapper,.arc-v12-0-0 .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-v12-0-0 .arc .arc-ProgressStepperItem--isFluid .arc-ProgressStepperItem::after,.arc-v12-0-0 .arc .arc-ProgressStepperItem--isFluid .arc-ProgressStepperItem-iconSection{width:100%}.arc-v12-0-0 .arc .arc-ProgressStepperItem--isFluid{flex:1 1 0;max-width:100%;min-width:auto}.arc-v12-0-0 .arc .arc-ProgressStepperItem--small .arc-ProgressStepperItem-title{font:var(--sem-type-body-semi-s);font-style:normal}.arc-v12-0-0 .arc .arc-ProgressStepperItem--small .arc-ProgressStepperItem-subTitle{font:var(--sem-type-body-reg-xs);font-style:normal}.arc-v12-0-0 .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-v12-0-0 .arc .arc-ProgressStepperItem--vertical .arc-ProgressStepperItem-iconSection::after{height:100%;width:1px}.arc-v12-0-0 .arc .arc-ProgressStepperItem--vertical .arc-ProgressStepperItem-iconSection{align-items:center;flex:0 1 auto;flex-direction:column}.arc-v12-0-0 .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-v12-0-0 .arc .arc-ProgressStepperItem--vertical .arc-ProgressStepperItem-subTitle{margin-bottom:var(--vertical-space-size-24)}.arc-v12-0-0 .arc .arc-ProgressStepperItem--vertical.arc-ProgressStepperItem--small{min-height:64px}.arc-v12-0-0 .arc .arc-ProgressStepperItem--vertical:last-of-type{min-height:auto}.arc-v12-0-0 .arc .arc-ProgressStepperItem--vertical:last-of-type .arc-ProgressStepperItem-nodeItem{margin-bottom:0;margin-top:var(--vertical-space-size-24)}.arc-v12-0-0 .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-pulse-from)}to{box-shadow:0 0 0 8px var(--stepper-colors-light-pulse-to)}}.arc-v12-0-0 .arc .arc-ProgressStepperItem-statusIcon--small{height:var(--stepper-size-icon-s);width:var(--stepper-size-icon-s)}.arc-v12-0-0 .arc .arc-ProgressStepperItem-statusIconInner::before{background:var(--stepper-colors-light-border-variant) border-box;border:var(--stepper-border-weight-s) 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-v12-0-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-v12-0-0 .arc .arc-ProgressStepper{display:flex}.arc-v12-0-0 .arc .arc-ProgressStepper--vertical{flex-direction:column}

package/lib/ProgressStepperOverflow/ProgressStepperOverflow.cjs

@@ -0,0 +1,152 @@
+'use client';
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var debounce = require('../_shared/cjs/debounce-uPMetQ6J.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var ProgressStepper = require('../_shared/cjs/ProgressStepper-DTZQabiV.cjs');
+require('../_shared/cjs/index-CTlXMLug.cjs');
+require('../_shared/cjs/isSymbol-BGrHFUbV.cjs');
+require('../_shared/cjs/capitalise-first-letter-CdhexpSx.cjs');
+require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
+require('../_shared/cjs/Icon-Dk2XHa7V.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+
+/** Use `ProgressStepperOverflow` to wrap `ProgressStepperItem`s and allow overflow behaviour. */
+var ProgressStepperOverflow = React.forwardRef(function (_a, stepperRef) {
+    var children = _a.children, onIndexChange = _a.onIndexChange, onLoadStep = _a.onLoadStep, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = tslib_es6.__rest(_a, ["children", "onIndexChange", "onLoadStep", "size", "invertLabelPosition", "offsetLeft"]);
+    var _c = React.useState(onLoadStep ? onLoadStep : 0), activeIndex = _c[0], setActiveIndex = _c[1];
+    var _d = React.useState(0), closestScrolledIndex = _d[0], setClosestScrolledIndex = _d[1];
+    var _e = React.useState(true), lastStepVisible = _e[0], setLastStepVisible = _e[1];
+    var containerRef = React.useRef(null);
+    React.useImperativeHandle(stepperRef, function () { return ({
+        handleStepScroll: handleStepScroll,
+        scrollToStep: scrollToStep,
+        handleViewScroll: handleViewScroll,
+        isLastChildVisible: isLastChildVisible,
+    }); });
+    // Add Horizontal Scroll Event Listener
+    React.useEffect(function () {
+        var _a, _b;
+        var checkClosest = debounce.debounce(function () {
+            var closestIndex = findClosestIndex();
+            setClosestScrolledIndex(closestIndex);
+        }, 100);
+        var checkLastChild = debounce.debounce(function () {
+            var lastVisible = isLastChildVisible();
+            if (lastVisible) {
+                setLastStepVisible(true);
+            }
+            else
+                setLastStepVisible(false);
+        }, 100);
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", checkLastChild);
+        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", checkClosest);
+        return function () {
+            var _a;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", checkClosest);
+            checkLastChild.cancel();
+        };
+    }, []);
+    // Scroll to activeIndex
+    React.useEffect(function () {
+        scrollTo();
+    }, [activeIndex]);
+    // Exposing changes in activeIndex outside of component
+    React.useEffect(function () {
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(closestScrolledIndex);
+        isLastChildVisible();
+    }, [closestScrolledIndex, onIndexChange, lastStepVisible]);
+    // helper functions - start
+    var getProgressStepper = function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.firstChild; };
+    var getStepChildren = function () {
+        var _a;
+        return Array.from(((_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children) || []);
+    };
+    var getLeftRects = function (children) {
+        var container = getProgressStepper();
+        if (!container)
+            return [];
+        var parentRect = container.getBoundingClientRect();
+        return children.map(function (child) {
+            var childRect = child.getBoundingClientRect();
+            return {
+                left: childRect.left - parentRect.left,
+            };
+        });
+    };
+    var indexOfClosest = function (values) {
+        return values.indexOf(Math.min.apply(Math, values));
+    };
+    // helper functions - end
+    var isLastChildVisible = function () {
+        var _a;
+        var steps = getStepChildren();
+        var lastStep = steps[steps.length - 1];
+        var rect = lastStep.getBoundingClientRect();
+        var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        return rect.right <= containerRect.right;
+    };
+    // Used for onScroll function of scrolling without buttons
+    var findClosestIndex = function () {
+        var _a, _b;
+        var children = getStepChildren();
+        var scrolledAmount = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+        // compare the scrolled amount to the intial left edge distance for each step
+        var getScrollDistances = function (children, scrolledAmount) {
+            return getLeftRects(children).map(function (rect) {
+                return Math.abs(scrolledAmount - rect.left);
+            });
+        };
+        var closestIndex = indexOfClosest(getScrollDistances(children, scrolledAmount));
+        return closestIndex;
+    };
+    // Scroll active step to the far left of the page
+    var scrollTo = function () {
+        var _a, _b;
+        var activeStep = (_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children[activeIndex];
+        if (activeStep) {
+            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                left: activeStep.offsetLeft - offsetLeft,
+                behavior: "smooth",
+            });
+        }
+    };
+    var handleStepScroll = function (increment) {
+        // Account for any manual scrolling set closest index to active index
+        setActiveIndex(closestScrolledIndex);
+        var newIndex = closestScrolledIndex + increment;
+        setActiveIndex(newIndex);
+        // If clicking backwards to include half visible step
+        if (closestScrolledIndex + increment === activeIndex) {
+            scrollTo();
+        }
+        if (closestScrolledIndex + increment < 0) {
+            setActiveIndex(0);
+            scrollTo();
+        }
+    };
+    // Used to scroll by Parent width
+    var handleViewScroll = function (direction) {
+        var _a;
+        var clientWidth = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+        var stepper = containerRef.current;
+        if (!stepper)
+            return;
+        stepper.scrollBy({
+            left: direction ? clientWidth : -clientWidth,
+            behavior: "smooth",
+        });
+    };
+    // Used to set a specific step to jump to on a button click
+    var scrollToStep = function (step) {
+        setActiveIndex(step);
+    };
+    return (React.createElement("div", tslib_es6.__assign({ ref: containerRef, className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs.filterAttrs(props)),
+        React.createElement(ProgressStepper.ProgressStepper, { size: size, invertLabelPosition: invertLabelPosition, isFluid: false }, children)));
+});
+
+exports.ProgressStepperOverflow = ProgressStepperOverflow;

package/lib/ProgressStepperOverflow/ProgressStepperOverflow.mjs

@@ -0,0 +1,150 @@
+'use client';
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
+import { d as debounce } from '../_shared/esm/debounce-D_Nx5go6.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { P as ProgressStepper } from '../_shared/esm/ProgressStepper-CujHLQsm.mjs';
+import '../_shared/esm/index-5C0-U8cc.mjs';
+import '../_shared/esm/isSymbol-DgWNE2Tm.mjs';
+import '../_shared/esm/capitalise-first-letter-Cubg2CS1.mjs';
+import '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
+import '../_shared/esm/Icon-CCUbr_AO.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/Surface-C69KVzkY.mjs';
+
+/** Use `ProgressStepperOverflow` to wrap `ProgressStepperItem`s and allow overflow behaviour. */
+var ProgressStepperOverflow = forwardRef(function (_a, stepperRef) {
+    var children = _a.children, onIndexChange = _a.onIndexChange, onLoadStep = _a.onLoadStep, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = __rest(_a, ["children", "onIndexChange", "onLoadStep", "size", "invertLabelPosition", "offsetLeft"]);
+    var _c = useState(onLoadStep ? onLoadStep : 0), activeIndex = _c[0], setActiveIndex = _c[1];
+    var _d = useState(0), closestScrolledIndex = _d[0], setClosestScrolledIndex = _d[1];
+    var _e = useState(true), lastStepVisible = _e[0], setLastStepVisible = _e[1];
+    var containerRef = useRef(null);
+    useImperativeHandle(stepperRef, function () { return ({
+        handleStepScroll: handleStepScroll,
+        scrollToStep: scrollToStep,
+        handleViewScroll: handleViewScroll,
+        isLastChildVisible: isLastChildVisible,
+    }); });
+    // Add Horizontal Scroll Event Listener
+    useEffect(function () {
+        var _a, _b;
+        var checkClosest = debounce(function () {
+            var closestIndex = findClosestIndex();
+            setClosestScrolledIndex(closestIndex);
+        }, 100);
+        var checkLastChild = debounce(function () {
+            var lastVisible = isLastChildVisible();
+            if (lastVisible) {
+                setLastStepVisible(true);
+            }
+            else
+                setLastStepVisible(false);
+        }, 100);
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", checkLastChild);
+        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", checkClosest);
+        return function () {
+            var _a;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", checkClosest);
+            checkLastChild.cancel();
+        };
+    }, []);
+    // Scroll to activeIndex
+    useEffect(function () {
+        scrollTo();
+    }, [activeIndex]);
+    // Exposing changes in activeIndex outside of component
+    useEffect(function () {
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(closestScrolledIndex);
+        isLastChildVisible();
+    }, [closestScrolledIndex, onIndexChange, lastStepVisible]);
+    // helper functions - start
+    var getProgressStepper = function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.firstChild; };
+    var getStepChildren = function () {
+        var _a;
+        return Array.from(((_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children) || []);
+    };
+    var getLeftRects = function (children) {
+        var container = getProgressStepper();
+        if (!container)
+            return [];
+        var parentRect = container.getBoundingClientRect();
+        return children.map(function (child) {
+            var childRect = child.getBoundingClientRect();
+            return {
+                left: childRect.left - parentRect.left,
+            };
+        });
+    };
+    var indexOfClosest = function (values) {
+        return values.indexOf(Math.min.apply(Math, values));
+    };
+    // helper functions - end
+    var isLastChildVisible = function () {
+        var _a;
+        var steps = getStepChildren();
+        var lastStep = steps[steps.length - 1];
+        var rect = lastStep.getBoundingClientRect();
+        var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        return rect.right <= containerRect.right;
+    };
+    // Used for onScroll function of scrolling without buttons
+    var findClosestIndex = function () {
+        var _a, _b;
+        var children = getStepChildren();
+        var scrolledAmount = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+        // compare the scrolled amount to the intial left edge distance for each step
+        var getScrollDistances = function (children, scrolledAmount) {
+            return getLeftRects(children).map(function (rect) {
+                return Math.abs(scrolledAmount - rect.left);
+            });
+        };
+        var closestIndex = indexOfClosest(getScrollDistances(children, scrolledAmount));
+        return closestIndex;
+    };
+    // Scroll active step to the far left of the page
+    var scrollTo = function () {
+        var _a, _b;
+        var activeStep = (_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children[activeIndex];
+        if (activeStep) {
+            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                left: activeStep.offsetLeft - offsetLeft,
+                behavior: "smooth",
+            });
+        }
+    };
+    var handleStepScroll = function (increment) {
+        // Account for any manual scrolling set closest index to active index
+        setActiveIndex(closestScrolledIndex);
+        var newIndex = closestScrolledIndex + increment;
+        setActiveIndex(newIndex);
+        // If clicking backwards to include half visible step
+        if (closestScrolledIndex + increment === activeIndex) {
+            scrollTo();
+        }
+        if (closestScrolledIndex + increment < 0) {
+            setActiveIndex(0);
+            scrollTo();
+        }
+    };
+    // Used to scroll by Parent width
+    var handleViewScroll = function (direction) {
+        var _a;
+        var clientWidth = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+        var stepper = containerRef.current;
+        if (!stepper)
+            return;
+        stepper.scrollBy({
+            left: direction ? clientWidth : -clientWidth,
+            behavior: "smooth",
+        });
+    };
+    // Used to set a specific step to jump to on a button click
+    var scrollToStep = function (step) {
+        setActiveIndex(step);
+    };
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs(props)),
+        React__default.createElement(ProgressStepper, { size: size, invertLabelPosition: invertLabelPosition, isFluid: false }, children)));
+});
+
+export { ProgressStepperOverflow };

package/lib/ProgressStepperOverflow/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0 .arc .arc-ProgressStepperOverflow{-ms-overflow-style:none;overflow-x:scroll;padding:24px 0;position:relative;scrollbar-width:none}.arc-v12-0-0 .arc .arc-ProgressStepperOverflow::-webkit-scrollbar{display:none}

package/lib/RadioCardGroup/RadioCardGroup.cjs

@@ -0,0 +1,82 @@
+'use client';
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var FormControl = require('../_shared/cjs/FormControl-TtboqHRx.cjs');
+var capitaliseFirstLetter = require('../_shared/cjs/capitalise-first-letter-CdhexpSx.cjs');
+var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+var Icon = require('../_shared/cjs/Icon-Dk2XHa7V.cjs');
+require('../_shared/cjs/DisclosureMini-Cy7hNc90.cjs');
+require('../_shared/cjs/Text-jwsn80lQ.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/ThemeIcon-CwYN77IF.cjs');
+require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
+
+var RadioContext = React.createContext({});
+var Provider = RadioContext.Provider;
+var useRadioContext = function () {
+    var context = React.useContext(RadioContext);
+    return context;
+};
+
+/**
+ * Use `RadioCardGroup` to wrap and control `RadioCard` buttons and apply default values
+ */
+var RadioCardGroup = function (_a) {
+    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, errorMessage = _a.errorMessage, _c = _a.isRequired, isRequired = _c === void 0 ? true : _c, helper = _a.helper, _d = _a.helperUnderLabel, helperUnderLabel = _d === void 0 ? true : _d, label = _a.label, _e = _a.labelSize, labelSize = _e === void 0 ? "l" : _e, _f = _a.hideLabel, hideLabel = _f === void 0 ? false : _f, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _g = _a.layout, layout = _g === void 0 ? "column" : _g, isFluid = _a.isFluid, width = _a.width, props = tslib_es6.__rest(_a, ["children", "checkedValue", "isDisabled", "id", "errorMessage", "isRequired", "helper", "helperUnderLabel", "label", "labelSize", "hideLabel", "name", "onBlur", "onChange", "layout", "isFluid", "width"]);
+    return (React.createElement(Provider, { value: {
+            blurEvent: onBlur,
+            changeEvent: onChange,
+            groupDisabled: isDisabled,
+            checkedValue: checkedValue,
+            name: name,
+        } },
+        React.createElement("div", tslib_es6.__assign({ className: "arc-RadioCardGroup--form" }, filterAttrs.filterAttrs(props)),
+            React.createElement(FormControl.FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, isDisabled: isDisabled, requirementStatus: isRequired ? "required" : "optional", helperUnderLabel: helperUnderLabel, errorMessage: isRequired && checkedValue === "" ? errorMessage : "", hideLabel: hideLabel },
+                React.createElement("span", { style: { width: width }, className: index.classNames("arc-RadioCardGroup", {
+                        "arc-RadioCardGroup--row": layout === "row",
+                        "arc-RadioCardGroup--isConstrained": !isFluid,
+                    }) }, children)))));
+};
+
+var RadioCard = React.forwardRef(function (_a, ref) {
+    var id = _a.id, icon = _a.icon, label = _a.label, support = _a.support, isDisabled = _a.isDisabled, checked = _a.checked, defaultChecked = _a.defaultChecked, changeEvent = _a.changeEvent, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, children = _a.children, _b = _a.controlLocation, controlLocation = _b === void 0 ? "right" : _b, _c = _a.hideButton, hideButton = _c === void 0 ? false : _c;
+    var surface = React.useContext(Surface.Context).surface;
+    var idLabel = "".concat(id, "-label");
+    return (React.createElement("div", { className: index.classNames("arc-RadioCard", {
+            "arc-RadioCard--isDisabled": isDisabled,
+            "arc-RadioCard--onDarkSurface": surface === "dark",
+            "arc-RadioCard--isSelected": checked,
+        }) },
+        React.createElement("label", { id: idLabel, htmlFor: id },
+            React.createElement("input", { className: "arc-RadioCard-input", id: id, checked: checked, defaultChecked: defaultChecked, disabled: isDisabled, onChange: changeEvent, onBlur: blurEvent, name: name, ref: ref, type: "radio", value: value, "aria-checked": checked }),
+            React.createElement("div", { className: "arc-RadioCard-inner arc-RadioCard--control".concat(capitaliseFirstLetter.capitaliseFirstLetter(controlLocation)) },
+                icon && (React.createElement("div", { className: "arc-RadioCard-icon" },
+                    React.createElement(Icon.Icon, { icon: icon, size: 24 }))),
+                React.createElement("div", { className: "arc-RadioCard-content" },
+                    React.createElement("span", { className: "arc-RadioCard-label" }, label),
+                    support && (React.createElement("span", { className: "arc-RadioCard-support" }, support))),
+                children && (React.createElement("div", { className: "arc-RadioCard-customContent" }, children)),
+                !hideButton && (React.createElement("div", { className: index.classNames("arc-RadioCard-radioIcon", {
+                        "arc-RadioCard-radioIcon--isSelected": checked,
+                    }) }))))));
+});
+
+/**
+ * Radio Card component.
+ */
+var RadioCardGroupInput = React.forwardRef(function (_a, ref) {
+    var icon = _a.icon, support = _a.support, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, children = _a.children, controlLocation = _a.controlLocation, hideButton = _a.hideButton, props = tslib_es6.__rest(_a, ["icon", "support", "id", "isDisabled", "label", "value", "children", "controlLocation", "hideButton"]);
+    var _b = useRadioContext(), name = _b.name, changeEvent = _b.changeEvent, checkedValue = _b.checkedValue, groupDisabled = _b.groupDisabled;
+    var isChecked = checkedValue === value ? true : false;
+    var checked = typeof changeEvent !== "function" ? undefined : isChecked;
+    var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
+    return (React.createElement(RadioCard, tslib_es6.__assign({ icon: icon, ref: ref, id: id, support: support, label: label, name: name, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, value: value, isDisabled: isDisabled || groupDisabled, controlLocation: controlLocation, hideButton: hideButton }, props), children));
+});
+
+exports.RadioCardGroup = RadioCardGroup;
+exports.RadioCardGroupInput = RadioCardGroupInput;