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

package/dist/_shared/esm/ProgressStepper-189ed0f9.js

@@ -0,0 +1,115 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
+import { I as Icon } from './Icon-512f834f.js';
+
+var Error = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("g", { clipPath: "url(#a)" },
+        React__default.createElement("path", { d: "m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z", fill: "currentColor" })),
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("clipPath", { id: "a" },
+            React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
+
+var Warning = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }),
+    React__default.createElement("path", { d: "M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z", fill: "currentColor", stroke: "currentColor", strokeWidth: ".3" }))); };
+
+var Complete = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("g", { clipPath: "url(#a)" },
+        React__default.createElement("path", { d: "m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z", fill: "currentColor" })),
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("clipPath", { id: "a" },
+            React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
+
+var Current = function () { return (React__default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("rect", { x: "0.666667", y: "0.666667", width: "22.6667", height: "22.6667", rx: "11.3333", stroke: "url(#paint0_linear_1_1050)", strokeWidth: "1.33333" }),
+    React__default.createElement("circle", { cx: "12", cy: "12", r: "7", fill: "currentColor" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("linearGradient", { id: "paint0_linear_1_1050", x1: "36.6036", y1: "-4.31391e-07", x2: "-12.6036", y2: "24", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { stopColor: "#F200F5" }),
+            React__default.createElement("stop", { offset: "1", stopColor: "#1EC8E6" }))))); };
+
+var Todo = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }))); };
+
+// export current step as an icon
+var ProgressStepperItem = function (_a) {
+    // TODO: Revise icons missing in BT theme
+    // const statusIcons: Record<
+    //   Exclude<ProgressStatus, "todo">,
+    //   Extract<
+    //     ThemeIconNames,
+    //     | "progressStepperComplete"
+    //     | "progressStepperCurrent"
+    //     | "progressStepperWarning"
+    //     | "progressStepperError"
+    //   >
+    // > = {
+    //   completed: "progressStepperComplete",
+    //   current: "progressStepperCurrent",
+    //   warning: "progressStepperWarning",
+    //   error: "progressStepperError",
+    // };
+    var _b;
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
+    var statusIcons = {
+        todo: Todo,
+        completed: Complete,
+        current: Current,
+        warning: Warning,
+        error: Error
+    };
+    var onClickHandler = function (event) {
+        event.preventDefault();
+        onClick && onClick();
+    };
+    var capitaliseFirstLetter = function (word) {
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    };
+    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
+                "arc-ProgressStepperItem--vertical": direction === "vertical",
+                "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
+                "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
+            },
+            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" }, statusIcons[status] === undefined ? (React__default.createElement("div", { style: {
+                    width: size === "small" ? "16px" : "24px",
+                    height: size === "small" ? "16px" : "24px"
+                } })) : (React__default.createElement("span", { className: "arc-ProgressStepperItem-statusIcon" },
+                React__default.createElement(Icon, { size: size === "small" ? 16 : 24, icon: statusIcons[status] }))))),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
+            titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
+                title,
+                status !== "todo" ? (React__default.createElement(VisuallyHidden, null,
+                    ":",
+                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden, null, ":To do")))) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" },
+                title,
+                status !== "todo" ? (React__default.createElement(VisuallyHidden, null,
+                    ":",
+                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden, null, ":To do")))),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
+};
+
+/** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
+var ProgressStepper = function (_a) {
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable"]);
+    var items = React__default.Children.toArray(children);
+    var getStepStatus = function (item) {
+        var _a;
+        return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
+    };
+    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepper", {
+            "arc-ProgressStepper--vertical": direction === "vertical"
+        }) }, filterDataAttrs(props)), items.map(function (item, index) { return (React__default.createElement(React__default.Fragment, { key: "StepperItem-".concat(index) },
+        React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterDataAttrs(item.props))))); })));
+};
+ProgressStepper.Item = ProgressStepperItem;
+
+export { ProgressStepper as P };

package/dist/_shared/esm/RadioGroup-8ff17cbb.js

@@ -0,0 +1,78 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
+import { F as FormControl } from './FormControl-d873f7fa.js';
+import { c as classNames } from './index-2e73c2e9.js';
+import { C as Context } from './Surface-71d21a9e.js';
+import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
+
+var RadioContext = createContext({});
+var Provider = RadioContext.Provider;
+var useRadioContext = function () {
+    var context = useContext(RadioContext);
+    return context;
+};
+
+var RadioButton = forwardRef(function (_a, ref) {
+    var id = _a.id, changeEvent = _a.changeEvent, isDisabled = _a.isDisabled, size = _a.size, labelSize = _a.labelSize, checked = _a.checked, defaultChecked = _a.defaultChecked, radioButtonAlignment = _a.radioButtonAlignment, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, label = _a.label, helper = _a.helper, hideLabel = _a.hideLabel, withMargin = _a.withMargin, props = __rest(_a, ["id", "changeEvent", "isDisabled", "size", "labelSize", "checked", "defaultChecked", "radioButtonAlignment", "name", "blurEvent", "value", "label", "helper", "hideLabel", "withMargin"]);
+    var surface = useContext(Context).surface;
+    var idLabel = "".concat(id, "-label");
+    return (React__default.createElement("div", __assign({ className: classNames({
+            "arc-RadioButton": true,
+            "arc-RadioButton--withMargin": withMargin,
+            "arc-RadioButton--withMarginSmall": withMargin && size === "s",
+            "arc-RadioButton--disabled": isDisabled,
+            "arc-RadioButton--small": size === "s",
+            "arc-RadioButton--smallLabel": labelSize === "s",
+            "arc-RadioButton--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("label", { className: classNames("arc-RadioButton-label", {
+                "arc-RadioButton-label--alignTop": radioButtonAlignment === "top"
+            }), htmlFor: id, id: idLabel },
+            React__default.createElement("input", { className: "arc-RadioButton-input", checked: checked, defaultChecked: defaultChecked, disabled: isDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value, "aria-checked": checked }),
+            React__default.createElement("span", { className: classNames({
+                    "arc-RadioButton-label--marginTop": radioButtonAlignment === "top"
+                }) },
+                hideLabel ? React__default.createElement(VisuallyHidden, null, label) : label,
+                helper && React__default.createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
+});
+
+/**
+ * Radio Button component.
+ */
+var RadioButtonGroupInput = forwardRef(function (_a, ref) {
+    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, _b = _a.radioButtonAlignment, radioButtonAlignment = _b === void 0 ? "center" : _b, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "radioButtonAlignment", "value"]);
+    var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, labelSize = _c.labelSize, name = _c.name, size = _c.size;
+    var isChecked = checkedValue === value ? true : false;
+    var checked = typeof changeEvent !== "function" ? undefined : isChecked;
+    var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
+    return (React__default.createElement(RadioButton, __assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, labelSize: labelSize, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value }, props)));
+});
+
+/**
+ * Use `RadioGroup` to wrap and control radio buttons and apply default values
+ */
+var RadioGroup = 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, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "errorMessage", "isRequired", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== RadioButtonGroupInput) {
+                throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement(Provider, { value: {
+            blurEvent: onBlur,
+            changeEvent: onChange,
+            groupDisabled: isDisabled,
+            checkedValue: checkedValue,
+            labelSize: labelSize,
+            name: name,
+            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: isRequired ? "required" : "optional", helperUnderLabel: true, errorMessage: isRequired && checkedValue === "" ? errorMessage : "" },
+                React__default.createElement("span", { className: "arc-RadioGroup-radioButtonContainer" }, children)))));
+};
+RadioGroup.RadioButton = RadioButtonGroupInput;
+
+export { RadioGroup as R, RadioButton as a };

package/dist/_shared/esm/{Section-73781b56.js → Section-1acbc06a.js}

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default from 'react';
 

package/dist/_shared/esm/{SiteFooter-d21da7ab.js → SiteFooter-ef6f0cdc.js}

@@ -1,11 +1,12 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import { u as useMediaQuery, A as ArcBreakpointM } from './index.es-00cb3bcb.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { S as SemSizeBreakpointsM } from './index.es-3139cf9e.js';
 import React__default, { useEffect, Fragment } from 'react';
-import { B as BrandLogo } from './BrandLogo-1af78f76.js';
-import { S as Section } from './Section-73781b56.js';
-import { S as Surface } from './Surface-0ca6817d.js';
+import { B as BrandLogo } from './BrandLogo-7ed8aeda.js';
+import { u as useMediaQuery } from './use-media-query-d3622da8.js';
+import { S as Section } from './Section-1acbc06a.js';
+import { S as Surface } from './Surface-71d21a9e.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
-import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
 
 /**
  * Use `SiteFooter` to display information at the bottom of a page.
@@ -21,7 +22,7 @@ var SiteFooter = function (_a) {
     }, [children]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
-            React__default.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
+            React__default.createElement(Surface, { background: "dark-brand-01", paddingVertical: "24" },
                 (siteName || main) && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(Section, null,
                         siteName && (React__default.createElement("div", { className: "arc-SiteFooter-name" }, siteName)),
@@ -37,7 +38,7 @@ var SiteFooter = function (_a) {
 };
 var SiteFooterItemGroup = function (_a) {
     var children = _a.children, title = _a.title;
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsM, ")"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem && item.type !== Fragment) {