@arc-ui/components 11.2.0 → 11.4.0

package/dist/Button/Button.cjs.d.ts

@@ -1 +1 @@
-export { Button } from "../_shared/cjs/Button-b3a69953";
+export { Button } from "../_shared/cjs/Button-1af6868c";

package/dist/Button/Button.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../_shared/cjs/Button-b3a69953.js');
+var Button = require('../_shared/cjs/Button-1af6868c.js');
 require('../_shared/cjs/index-78b35bc1.js');
 require('react');
 require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');

package/dist/Button/Button.esm.d.ts

@@ -1 +1 @@
-export { Button } from "../_shared/esm/Button-69439f8f";
+export { Button } from "../_shared/esm/Button-10700df4";

package/dist/Button/Button.esm.js

@@ -1,4 +1,4 @@
-export { B as Button } from '../_shared/esm/Button-69439f8f.js';
+export { B as Button } from '../_shared/esm/Button-10700df4.js';
 import '../_shared/esm/index-229fc864.js';
 import 'react';
 import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';

package/dist/Card/Card.cjs.js

@@ -120,7 +120,7 @@ var CardLink = function (_a) {
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, index.filterDataAttrs(linkData)),
         React__default["default"].createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React__default["default"].createElement("span", { className: "arc-Card-linkIcon" },
-            React__default["default"].createElement(Icon.Icon, { testId: "cardIcon", icon: BtIconChevronRightMid.BtIconChevronRightMid_2, size: 16 })))));
+            React__default["default"].createElement(Icon.Icon, { testId: "cardIcon", icon: BtIconChevronRightMid.BtIconChevronRightMid_2, size: 24 })))));
 };
 
 exports.Card = Card;

package/dist/Card/Card.esm.js

@@ -112,7 +112,7 @@ var CardLink = function (_a) {
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs(linkData)),
         React__default.createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React__default.createElement("span", { className: "arc-Card-linkIcon" },
-            React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 16 })))));
+            React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 24 })))));
 };
 
 export { Card };

package/dist/Checkbox/Checkbox.cjs.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('../_shared/cjs/index-78b35bc1.js');
-var React$1 = require('react');
-var FormControl = require('../_shared/cjs/FormControl-e6b7d7c5.js');
+var React = require('react');
+var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-bdf06f8c.js');
+var FormControl = require('../_shared/cjs/FormControl-d4d9c665.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
 require('../_shared/cjs/Text-1d3844be.js');
@@ -13,35 +14,15 @@ require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
-
-const React = React__default["default"];
-const BtIconTickVariant = props =>
-  /*#__PURE__*/ React.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
-      },
-      props
-    ),
-    /*#__PURE__*/ React.createElement("defs", null),
-    /*#__PURE__*/ React.createElement("path", {
-      d:
-        "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
-      fill: "currentColor"
-    })
-  );
-var BtIconTickVariant_2 = BtIconTickVariant;
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
-var Checkbox = React$1.forwardRef(function (_a, ref) {
+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, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, value = _a.value, props = index.__rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value"]);
-    var requirementStatus = React$1.useContext(FormControl.Context).requirementStatus;
-    var surface = React$1.useContext(Surface.Context).surface;
+    var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
+    var surface = React.useContext(Surface.Context).surface;
     var _f = FormControl.useAriaDescribedby({
         id: id,
         errorMessage: errorMessage
@@ -67,7 +48,7 @@ var Checkbox = React$1.forwardRef(function (_a, ref) {
         React__default["default"].createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
             React__default["default"].createElement("input", index.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, index.filterDataAttrs(props))),
             React__default["default"].createElement("span", { className: "arc-Checkbox-box" },
-                React__default["default"].createElement(BtIconTickVariant_2, null)),
+                React__default["default"].createElement(BtIconTickAlt2Px.BtIconTickAlt2Px_2, null)),
             React__default["default"].createElement("span", null,
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React__default["default"].createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,

package/dist/Checkbox/Checkbox.esm.js

@@ -1,32 +1,13 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import React__default, { forwardRef, useContext } from 'react';
-import { C as Context, u as useAriaDescribedby, B as BtIconAlert_2 } from '../_shared/esm/FormControl-84c9ace6.js';
+import { B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-da97e9ae.js';
+import { C as Context, u as useAriaDescribedby, B as BtIconAlert_2 } from '../_shared/esm/FormControl-2cb96de7.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import { C as Context$1 } from '../_shared/esm/Surface-bf201530.js';
 import '../_shared/esm/Text-6b958ad8.js';
 import '../_shared/esm/suffix-modifier-f5e28822.js';
 import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
 
-const React = React__default;
-const BtIconTickVariant = props =>
-  /*#__PURE__*/ React.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
-      },
-      props
-    ),
-    /*#__PURE__*/ React.createElement("defs", null),
-    /*#__PURE__*/ React.createElement("path", {
-      d:
-        "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
-      fill: "currentColor"
-    })
-  );
-var BtIconTickVariant_2 = BtIconTickVariant;
-
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
@@ -59,7 +40,7 @@ var Checkbox = forwardRef(function (_a, ref) {
         React__default.createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
             React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
             React__default.createElement("span", { className: "arc-Checkbox-box" },
-                React__default.createElement(BtIconTickVariant_2, null)),
+                React__default.createElement(BtIconTickAlt2Px_2, null)),
             React__default.createElement("span", null,
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React__default.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,

package/dist/FormControl/FormControl.cjs.d.ts

@@ -1 +1 @@
-export { FormControl, FormControlContext } from "../_shared/cjs/FormControl-e6b7d7c5";
+export { FormControl, FormControlContext } from "../_shared/cjs/FormControl-d4d9c665";

package/dist/FormControl/FormControl.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormControl = require('../_shared/cjs/FormControl-e6b7d7c5.js');
+var FormControl = require('../_shared/cjs/FormControl-d4d9c665.js');
 require('../_shared/cjs/index-78b35bc1.js');
 require('../_shared/cjs/index-45bfb67b.js');
 require('react');

package/dist/FormControl/FormControl.esm.d.ts

@@ -1 +1 @@
-export { FormControl, FormControlContext } from "../_shared/esm/FormControl-84c9ace6";
+export { FormControl, FormControlContext } from "../_shared/esm/FormControl-2cb96de7";

package/dist/FormControl/FormControl.esm.js

@@ -1,4 +1,4 @@
-export { F as FormControl, C as FormControlContext } from '../_shared/esm/FormControl-84c9ace6.js';
+export { F as FormControl, C as FormControlContext } from '../_shared/esm/FormControl-2cb96de7.js';
 import '../_shared/esm/index-229fc864.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';

package/dist/ProgressBar/ProgressBar.cjs.d.ts

@@ -0,0 +1,47 @@
+import { FC } from "react";
+type ProgressBarState = "loading" | "error" | "success";
+type ProgressBarIcons = "refresh" | "cross" | "tick";
+declare const ProgressBar: FC<ProgressBarProps>;
+interface ProgressBarProps {
+    /**
+     * Label for screen readers.
+     */
+    ariaLabel: string;
+    /**
+     * Headline for the progress bar.
+     */
+    headline?: string;
+    /**
+     * Title for the progress bar, (e.g. an uploading file's name).
+     */
+    title?: string;
+    /**
+     * Percentage value for the progress bar (negative numbers are rounded to 0, numbers over 100 are rounded to 100).
+     */
+    value?: number;
+    /**
+     * Provide an additional informative description for the progress bar, or brand building slot for secondary messaging which can change over time with progress.
+     */
+    description?: string;
+    /**
+     * Value to display for the progress bar. This is fully customisable, and can be a percentage (15%) Time remaining (1m 15s remaining), proportion of data uploaded/to upload (100KB out of 256KB).
+     */
+    displayValue?: string;
+    /**
+     * State of the progress bar.
+     */
+    state?: ProgressBarState;
+    /**
+     * Sets progress bar to infinitely animate. Use if the progress of a given task cannot be known. The value prop will have no effect if this prop is set to true.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Action for the progress bar.
+     */
+    action?: {
+        text: string;
+        action: () => void;
+        icon?: ProgressBarIcons;
+    };
+}
+export { ProgressBar };

package/dist/ProgressBar/ProgressBar.cjs.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var React$2 = require('react');
+var Text = require('../_shared/cjs/Text-1d3844be.js');
+var Heading = require('../_shared/cjs/Heading-cc38c3ec.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-7aed88ab.js');
+var Icon = require('../_shared/cjs/Icon-719d13d4.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-bdf06f8c.js');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$2);
+
+const React$1 = React__default["default"];
+const BtIconRefresh = props =>
+  /*#__PURE__*/ React$1.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M13.41077,21.99951a.5005.5005,0,0,0-.35743.8501l2.04609,2.08716A8.98732,8.98732,0,0,1,13.15332,7.46631a.50028.50028,0,1,0-.31641-.94922A9.98437,9.98437,0,0,0,15.127,25.93823l.00159.02881c.0011.01.02008.00128.03015.002L13.026,28.16846a.50036.50036,0,0,0,.71875.69629l3.28418-3.38819-3.26074-3.32715A.50106.50106,0,0,0,13.41077,21.99951Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M16.79028,6.04633,16.79,6.04077c-.0011-.01-.02008-.00128-.03015-.00195l2.13275-2.19946a.50036.50036,0,0,0-.71875-.69629L14.88965,6.53125,18.15039,9.8584a.50106.50106,0,0,0,.35742.1499.5005.5005,0,0,0,.35742-.8501L16.7951,7.04657a8.98484,8.98484,0,0,1,2.05646,17.47589.49982.49982,0,1,0,.31641.94824A9.98244,9.98244,0,0,0,16.79028,6.04633Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconRefresh_2 = BtIconRefresh;
+
+const React = React__default["default"];
+const BtIconCrossAlt2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M17.41406,16l3.793-3.793A.99989.99989,0,0,0,19.793,10.793L16,14.58594l-3.793-3.793A.99989.99989,0,0,0,10.793,12.207L14.58594,16l-3.793,3.793A.99989.99989,0,1,0,12.207,21.207L16,17.41406l3.793,3.793A.99989.99989,0,0,0,21.207,19.793Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossAlt2Px_2 = BtIconCrossAlt2Px;
+
+var PROGRESS_BAR_ICON_MAP = {
+    refresh: BtIconRefresh_2,
+    tick: BtIconTickAlt2Px.BtIconTickAlt2Px_2,
+    cross: BtIconCrossAlt2Px_2
+};
+
+var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
+    var commonProps = {
+        role: "progressbar",
+        "data-testid": "progressbar",
+        "aria-label": ariaLabel,
+        tabIndex: 0
+    };
+    var indeterminateProps = index.__assign(index.__assign({}, commonProps), { className: index$1.classNames("arc-ProgressBar-bar", "arc-ProgressBar-bar--indeterminate") });
+    var determinateProps = index.__assign(index.__assign({}, commonProps), { className: "arc-ProgressBar-bar", "aria-valuenow": progressValue, style: {
+            transform: "translateX(".concat(-100 + progressValue, "%)")
+        } });
+    return isIndeterminate ? indeterminateProps : determinateProps;
+};
+
+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;
+    var surface = React$2.useContext(Surface.Context).surface;
+    var progressValue = Math.min(100, Math.max(0, value));
+    return (React__default["default"].createElement("div", { "data-testid": "progress", className: index$1.classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
+            "arc-ProgressBar--onDarkSurface": surface === "dark"
+        }) },
+        React__default["default"].createElement("div", { className: "arc-ProgressBar-titleDisplayValueContainer" },
+            React__default["default"].createElement("div", { className: "arc-ProgressBar-titleContainer" },
+                headline && React__default["default"].createElement(Heading.Heading, { size: "s" }, headline),
+                headline && title && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "4" }),
+                title && React__default["default"].createElement(Text.Text, null, title)),
+            displayValue && (React__default["default"].createElement("div", { "data-testid": "display-value", className: "arc-ProgressBar-displayValueContainer" },
+                React__default["default"].createElement(Text.Text, null, displayValue)))),
+        React__default["default"].createElement("div", { className: "arc-ProgressBar-container" },
+            React__default["default"].createElement("div", { className: "arc-ProgressBar-outerBar" },
+                React__default["default"].createElement("div", index.__assign({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
+            description && (React__default["default"].createElement("div", { className: "arc-ProgressBar-description" },
+                React__default["default"].createElement(Text.Text, { tone: state !== "error" ? "supporting" : "default" }, description))),
+            action && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8" }),
+                React__default["default"].createElement("button", { className: "arc-ProgressBar-actionButton", onClick: action.action },
+                    React__default["default"].createElement("div", { className: "arc-ProgressBar-actionContainer" },
+                        React__default["default"].createElement(Text.Text, null, action.text),
+                        action.icon && (React__default["default"].createElement("div", { className: "arc-ProgressBar-actionIcon" },
+                            React__default["default"].createElement(Icon.Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
+};
+
+exports.ProgressBar = ProgressBar;

package/dist/ProgressBar/ProgressBar.esm.d.ts

@@ -0,0 +1,47 @@
+import { FC } from "react";
+type ProgressBarState = "loading" | "error" | "success";
+type ProgressBarIcons = "refresh" | "cross" | "tick";
+declare const ProgressBar: FC<ProgressBarProps>;
+interface ProgressBarProps {
+    /**
+     * Label for screen readers.
+     */
+    ariaLabel: string;
+    /**
+     * Headline for the progress bar.
+     */
+    headline?: string;
+    /**
+     * Title for the progress bar, (e.g. an uploading file's name).
+     */
+    title?: string;
+    /**
+     * Percentage value for the progress bar (negative numbers are rounded to 0, numbers over 100 are rounded to 100).
+     */
+    value?: number;
+    /**
+     * Provide an additional informative description for the progress bar, or brand building slot for secondary messaging which can change over time with progress.
+     */
+    description?: string;
+    /**
+     * Value to display for the progress bar. This is fully customisable, and can be a percentage (15%) Time remaining (1m 15s remaining), proportion of data uploaded/to upload (100KB out of 256KB).
+     */
+    displayValue?: string;
+    /**
+     * State of the progress bar.
+     */
+    state?: ProgressBarState;
+    /**
+     * Sets progress bar to infinitely animate. Use if the progress of a given task cannot be known. The value prop will have no effect if this prop is set to true.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Action for the progress bar.
+     */
+    action?: {
+        text: string;
+        action: () => void;
+        icon?: ProgressBarIcons;
+    };
+}
+export { ProgressBar };

package/dist/ProgressBar/ProgressBar.esm.js

@@ -0,0 +1,105 @@
+import { a as __assign } from '../_shared/esm/index-229fc864.js';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import React__default, { useContext } from 'react';
+import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
+import { H as Heading } from '../_shared/esm/Heading-eb1e42db.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-3579b20e.js';
+import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
+import { C as Context } from '../_shared/esm/Surface-bf201530.js';
+import { B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-da97e9ae.js';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+
+const React$1 = React__default;
+const BtIconRefresh = props =>
+  /*#__PURE__*/ React$1.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M13.41077,21.99951a.5005.5005,0,0,0-.35743.8501l2.04609,2.08716A8.98732,8.98732,0,0,1,13.15332,7.46631a.50028.50028,0,1,0-.31641-.94922A9.98437,9.98437,0,0,0,15.127,25.93823l.00159.02881c.0011.01.02008.00128.03015.002L13.026,28.16846a.50036.50036,0,0,0,.71875.69629l3.28418-3.38819-3.26074-3.32715A.50106.50106,0,0,0,13.41077,21.99951Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M16.79028,6.04633,16.79,6.04077c-.0011-.01-.02008-.00128-.03015-.00195l2.13275-2.19946a.50036.50036,0,0,0-.71875-.69629L14.88965,6.53125,18.15039,9.8584a.50106.50106,0,0,0,.35742.1499.5005.5005,0,0,0,.35742-.8501L16.7951,7.04657a8.98484,8.98484,0,0,1,2.05646,17.47589.49982.49982,0,1,0,.31641.94824A9.98244,9.98244,0,0,0,16.79028,6.04633Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconRefresh_2 = BtIconRefresh;
+
+const React = React__default;
+const BtIconCrossAlt2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M17.41406,16l3.793-3.793A.99989.99989,0,0,0,19.793,10.793L16,14.58594l-3.793-3.793A.99989.99989,0,0,0,10.793,12.207L14.58594,16l-3.793,3.793A.99989.99989,0,1,0,12.207,21.207L16,17.41406l3.793,3.793A.99989.99989,0,0,0,21.207,19.793Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossAlt2Px_2 = BtIconCrossAlt2Px;
+
+var PROGRESS_BAR_ICON_MAP = {
+    refresh: BtIconRefresh_2,
+    tick: BtIconTickAlt2Px_2,
+    cross: BtIconCrossAlt2Px_2
+};
+
+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;
+};
+
+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;
+    var surface = useContext(Context).surface;
+    var progressValue = Math.min(100, Math.max(0, value));
+    return (React__default.createElement("div", { "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
+            "arc-ProgressBar--onDarkSurface": surface === "dark"
+        }) },
+        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" },
+                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("div", { className: "arc-ProgressBar-actionContainer" },
+                        React__default.createElement(Text, null, action.text),
+                        action.icon && (React__default.createElement("div", { className: "arc-ProgressBar-actionIcon" },
+                            React__default.createElement(Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
+};
+
+export { ProgressBar };

package/dist/ProgressBar/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/progressbar",
+  "types": "./ProgressBar.esm.d.ts",
+  "main": "./ProgressBar.cjs.js",
+  "module": "./ProgressBar.esm.js",
+  "private": true
+}

package/dist/RadioGroup/RadioGroup.cjs.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/cjs/FormControl-e6b7d7c5";
+import { FormControlProps } from "../_shared/cjs/FormControl-d4d9c665";
 /**
  * Radio Button component.
  */
@@ -35,7 +35,7 @@ type EventType = React.ChangeEvent<HTMLInputElement>;
 declare const RadioGroup: FC<RadioGroupProps> & {
     RadioButton: typeof RadioButton;
 };
-interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus"> {
+interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helperUnderLabel"> {
     /**
      * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
      */

package/dist/RadioGroup/RadioGroup.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('../_shared/cjs/index-78b35bc1.js');
 var React = require('react');
-var FormControl = require('../_shared/cjs/FormControl-e6b7d7c5.js');
+var FormControl = require('../_shared/cjs/FormControl-d4d9c665.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
 require('../_shared/cjs/Text-1d3844be.js');
@@ -67,7 +67,7 @@ var RadioGroup = function (_a) {
             size: size
         } },
         React__default["default"].createElement("div", index.__assign({ className: "arc-RadioGroup" }, index.filterDataAttrs(props)),
-            React__default["default"].createElement(FormControl.FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable" }, children))));
+            React__default["default"].createElement(FormControl.FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable", helperUnderLabel: true }, children))));
 };
 RadioButton.displayName = "RadioGroup.RadioButton";
 RadioGroup.RadioButton = RadioButton;

package/dist/RadioGroup/RadioGroup.esm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/esm/FormControl-84c9ace6";
+import { FormControlProps } from "../_shared/esm/FormControl-2cb96de7";
 /**
  * Radio Button component.
  */
@@ -35,7 +35,7 @@ type EventType = React.ChangeEvent<HTMLInputElement>;
 declare const RadioGroup: FC<RadioGroupProps> & {
     RadioButton: typeof RadioButton;
 };
-interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus"> {
+interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helperUnderLabel"> {
     /**
      * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
      */

package/dist/RadioGroup/RadioGroup.esm.js

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
-import { F as FormControl } from '../_shared/esm/FormControl-84c9ace6.js';
+import { F as FormControl } from '../_shared/esm/FormControl-2cb96de7.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import { C as Context } from '../_shared/esm/Surface-bf201530.js';
 import '../_shared/esm/Text-6b958ad8.js';
@@ -59,7 +59,7 @@ var RadioGroup = function (_a) {
             size: size
         } },
         React__default.createElement("div", __assign({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
-            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable" }, children))));
+            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable", helperUnderLabel: true }, children))));
 };
 RadioButton.displayName = "RadioGroup.RadioButton";
 RadioGroup.RadioButton = RadioButton;

package/dist/Select/Select.cjs.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import React from "react";
 import { FocusEvent } from "react";
-import { FormControlProps } from "../_shared/cjs/FormControl-e6b7d7c5";
+import { FormControlProps } from "../_shared/cjs/FormControl-d4d9c665";
 /** Use `Select` to choose from a dropdown list of options. */
 declare const Select: React.FC<SelectProps>;
-interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id"> {
+interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id" | "helperUnderLabel"> {
     name: string;
     label: string;
     placeholder: string;