@arc-ui/components 11.5.0 → 11.7.0

package/dist/ProgressStepper/ProgressStepper.cjs.js

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+var React$3 = require('react');
+var index = require('../_shared/cjs/index-45bfb67b.js');
+var BtIconAlert = require('../_shared/cjs/BtIconAlert-637db790.js');
+var Icon = require('../_shared/cjs/Icon-e1dd45eb.js');
+var Surface = require('../_shared/cjs/Surface-b7c51b2b.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-86f697e7.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$3);
+
+const React$2 = React__default["default"];
+const BtIconTickVariant = props =>
+  /*#__PURE__*/ React$2.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$2.createElement("defs", null),
+    /*#__PURE__*/ React$2.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;
+
+const React$1 = React__default["default"];
+const BtIconCrossAlt = 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:
+        "M16.70709,16.02l4.48236-4.49365a.4996.4996,0,1,0-.707-.70606l-4.481,4.49225-4.481-4.49225a.4996.4996,0,1,0-.707.70606L15.29584,16.02l-4.48236,4.49365a.4996.4996,0,1,0,.707.70606l4.481-4.49225,4.481,4.49225a.4996.4996,0,1,0,.707-.70606Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossAlt_2 = BtIconCrossAlt;
+
+const React = React__default["default"];
+const BtIconCircle = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M9 16C9 19.87 12.13 23 16 23C19.87 23 23 19.87 23 16C23 12.13 19.87 9 16 9C12.13 9 9 12.13 9 16ZM16 7C11.03 7 7 11.03 7 16C7 20.97 11.03 25 16 25C20.97 25 25 20.97 25 16C25 11.03 20.97 7 16 7Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCircle_2 = BtIconCircle;
+
+var ProgressStepperItem = function (_a) {
+    var _b, _c;
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _d = _a.direction, direction = _d === void 0 ? "horizontal" : _d, _e = _a.status, status = _e === void 0 ? "todo" : _e, _f = _a.size, size = _f === void 0 ? "large" : _f, _g = _a.position, position = _g === void 0 ? "middle" : _g, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, isExpandable = _a.isExpandable, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = filterDataAttrs.__rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "position", "isFluid", "ariaLabel", "onClick", "previousStep", "isExpandable", "stepContent", "isStepContentHidden"]);
+    var surface = React$3.useContext(Surface.Context).surface;
+    var statusIcons = {
+        completed: BtIconTickVariant_2,
+        current: BtIconCircle_2,
+        warning: BtIconAlert.BtIconAlert_2,
+        error: BtIconCrossAlt_2
+    };
+    var onClickHandler = function (event) {
+        event.preventDefault();
+        onClick && onClick();
+    };
+    var capitaliseFirstLetter = function (word) {
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    };
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-ProgressStepperItem", (_b = {
+                "arc-ProgressStepperItem--vertical": direction === "vertical",
+                "arc-ProgressStepperItem--isFluid": isFluid,
+                "arc-ProgressStepperItem--onDarkSurface": surface === "dark",
+                "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
+            },
+            _b["arc-ProgressStepperItem--".concat(status)] = status !== "todo",
+            _b["arc-ProgressStepperItem--".concat(size)] = size === "small",
+            _b)) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { className: index.classNames("arc-ProgressStepperItem-iconSection", (_c = {},
+                _c["arc-ProgressStepperItem-iconSection--".concat(position)] = position !== "middle",
+                _c)) },
+            React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailBefore" }),
+            React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-iconWrapper" }, statusIcons[status] === undefined ? (React__default["default"].createElement("div", { style: {
+                    width: size === "small" ? "16px" : "32px",
+                    height: size === "small" ? "16px" : "32px"
+                } })) : (React__default["default"].createElement(Icon.Icon, { size: size === "small" ? 16 : 32, icon: statusIcons[status] }))),
+            React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailAfter" })),
+        React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-textSection" },
+            status !== "todo" && (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                capitaliseFirstLetter(status),
+                ":")),
+            titleHref ? (React__default["default"].createElement("a", { href: titleHref, "aria-label": ariaLabel, className: "arc-ProgressStepperItem-title", onClick: onClickHandler }, title)) : (React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
+            React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            isExpandable && direction === "vertical" && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-nodeItem" },
+                    React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-keyline" }),
+                    stepContent && !isStepContentHidden && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                        React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8" }),
+                        stepContent))))))));
+};
+
+/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+var ProgressStepper = function (_a) {
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, props = filterDataAttrs.__rest(_a, ["children", "size", "isFluid", "direction", "isExpandable"]);
+    var items = React__default["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["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-ProgressStepper", {
+            "arc-ProgressStepper--vertical": direction === "vertical"
+        }) }, filterDataAttrs.filterDataAttrs(props)), items.map(function (item, index) {
+        var currentPosition = index === 0
+            ? "first"
+            : index === React__default["default"].Children.count(children) - 1
+                ? "last"
+                : undefined;
+        return (React__default["default"].createElement(React__default["default"].Fragment, { key: "StepperItem-".concat(index) },
+            React__default["default"].createElement(ProgressStepperItem, filterDataAttrs.__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, position: currentPosition, previousStep: getStepStatus(items[index - 1]) }, filterDataAttrs.filterDataAttrs(item.props)))));
+    })));
+};
+ProgressStepper.Item = ProgressStepperItem;
+
+exports.ProgressStepper = ProgressStepper;

package/dist/ProgressStepper/ProgressStepper.esm.d.ts

@@ -0,0 +1,89 @@
+import { FC, ReactNode } from "react";
+type ProgressStatus = "completed" | "current" | "warning" | "error" | "todo";
+declare const ProgressStepperItem: FC<ProgressStepperItemProps>;
+interface ProgressStepperItemProps {
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    title: string;
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    titleHref?: string;
+    /**
+     * Text to override `linkTitle` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Execute a function on title click `<ProgressStepper.Item />`
+     */
+    onClick?: () => void;
+    /**
+     * Determine a sub title for `<ProgressStepper.Item />`
+     */
+    subTitle?: string;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the position of the step `<ProgressStepper.Item />`
+     */
+    position?: "first" | "middle" | "last";
+    /**
+     * Determine a status for `<ProgressStepper.Item />`
+     */
+    status?: ProgressStatus;
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item /> should be Fluid`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine the context `<ProgressStepper.Item /> should b`
+     */
+    previousStep?: ProgressStatus;
+    /**
+     * Determine if `<ProgressStepper.Item /> should have expandable content`
+     */
+    isExpandable?: boolean;
+    /**
+     * Determine what content to display in `<ProgressStepper.Item />. To use this option isExpandable must be `true``
+     */
+    stepContent?: ReactNode;
+    /**
+     * Determine if `stepContent` is hidden
+     */
+    isStepContentHidden?: boolean;
+}
+/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+declare const ProgressStepper: FC<ProgressStepperProps> & {
+    Item: typeof ProgressStepperItem;
+};
+interface ProgressStepperProps {
+    /**
+     * Children of `<ProgressStepper />` should only contain `<ProgressStepper.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item />` should be Fluid. Only appliciable for `horizontal direction.`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine if `<ProgressStepper.Item />` should be able to expand. This only is appliciable when direction is set to vertical
+     */
+    isExpandable?: boolean;
+}
+export { ProgressStepper };

package/dist/ProgressStepper/ProgressStepper.esm.js

@@ -0,0 +1,144 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import React__default, { useContext } from 'react';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import { B as BtIconAlert_2 } from '../_shared/esm/BtIconAlert-55a6ed5c.js';
+import { I as Icon } from '../_shared/esm/Icon-c1af47bc.js';
+import { C as Context } from '../_shared/esm/Surface-dde51789.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-93980c9c.js';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';
+
+const React$2 = React__default;
+const BtIconTickVariant = props =>
+  /*#__PURE__*/ React$2.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$2.createElement("defs", null),
+    /*#__PURE__*/ React$2.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;
+
+const React$1 = React__default;
+const BtIconCrossAlt = 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:
+        "M16.70709,16.02l4.48236-4.49365a.4996.4996,0,1,0-.707-.70606l-4.481,4.49225-4.481-4.49225a.4996.4996,0,1,0-.707.70606L15.29584,16.02l-4.48236,4.49365a.4996.4996,0,1,0,.707.70606l4.481-4.49225,4.481,4.49225a.4996.4996,0,1,0,.707-.70606Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossAlt_2 = BtIconCrossAlt;
+
+const React = React__default;
+const BtIconCircle = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M9 16C9 19.87 12.13 23 16 23C19.87 23 23 19.87 23 16C23 12.13 19.87 9 16 9C12.13 9 9 12.13 9 16ZM16 7C11.03 7 7 11.03 7 16C7 20.97 11.03 25 16 25C20.97 25 25 20.97 25 16C25 11.03 20.97 7 16 7Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCircle_2 = BtIconCircle;
+
+var ProgressStepperItem = function (_a) {
+    var _b, _c;
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _d = _a.direction, direction = _d === void 0 ? "horizontal" : _d, _e = _a.status, status = _e === void 0 ? "todo" : _e, _f = _a.size, size = _f === void 0 ? "large" : _f, _g = _a.position, position = _g === void 0 ? "middle" : _g, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, isExpandable = _a.isExpandable, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "position", "isFluid", "ariaLabel", "onClick", "previousStep", "isExpandable", "stepContent", "isStepContentHidden"]);
+    var surface = useContext(Context).surface;
+    var statusIcons = {
+        completed: BtIconTickVariant_2,
+        current: BtIconCircle_2,
+        warning: BtIconAlert_2,
+        error: BtIconCrossAlt_2
+    };
+    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", (_b = {
+                "arc-ProgressStepperItem--vertical": direction === "vertical",
+                "arc-ProgressStepperItem--isFluid": isFluid,
+                "arc-ProgressStepperItem--onDarkSurface": surface === "dark",
+                "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
+            },
+            _b["arc-ProgressStepperItem--".concat(status)] = status !== "todo",
+            _b["arc-ProgressStepperItem--".concat(size)] = size === "small",
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: classNames("arc-ProgressStepperItem-iconSection", (_c = {},
+                _c["arc-ProgressStepperItem-iconSection--".concat(position)] = position !== "middle",
+                _c)) },
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailBefore" }),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper" }, statusIcons[status] === undefined ? (React__default.createElement("div", { style: {
+                    width: size === "small" ? "16px" : "32px",
+                    height: size === "small" ? "16px" : "32px"
+                } })) : (React__default.createElement(Icon, { size: size === "small" ? 16 : 32, icon: statusIcons[status] }))),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailAfter" })),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
+            status !== "todo" && (React__default.createElement(VisuallyHidden, null,
+                capitaliseFirstLetter(status),
+                ":")),
+            titleHref ? (React__default.createElement("a", { href: titleHref, "aria-label": ariaLabel, className: "arc-ProgressStepperItem-title", onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            isExpandable && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" },
+                    React__default.createElement("div", { className: "arc-ProgressStepperItem-keyline" }),
+                    stepContent && !isStepContentHidden && (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(VerticalSpace, { size: "8" }),
+                        stepContent))))))));
+};
+
+/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+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) {
+        var currentPosition = index === 0
+            ? "first"
+            : index === React__default.Children.count(children) - 1
+                ? "last"
+                : undefined;
+        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, position: currentPosition, previousStep: getStepStatus(items[index - 1]) }, filterDataAttrs(item.props)))));
+    })));
+};
+ProgressStepper.Item = ProgressStepperItem;
+
+export { ProgressStepper };

package/dist/ProgressStepper/package.json

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

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

@@ -1,85 +1 @@
-/// <reference types="react" />
-import React from "react";
-import { FC } from "react";
-import { FormControlProps } from "../_shared/cjs/FormControl-42360ae8";
-/**
- * Radio Button component.
- */
-declare const RadioButton: FC<RadioButtonProps>;
-interface RadioButtonProps {
-    /**
-     * ID for the Radio Button.
-     */
-    id: string;
-    /**
-     * Should the RadioButton be disabled?
-     */
-    isDisabled?: boolean;
-    /**
-     * Helper text for the RadioButton, shown below the label.
-     */
-    helper?: string;
-    /**
-     * Label for the RadioButton.
-     */
-    label: string;
-    /**
-     * Current value (controlled).
-     */
-    value: string;
-}
-type EventType = React.ChangeEvent<HTMLInputElement>;
-/**
- * Use `RadioGroup` to wrap and control radio buttons and apply default values
- */
-declare const RadioGroup: FC<RadioGroupProps> & {
-    RadioButton: typeof RadioButton;
-};
-interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helperUnderLabel"> {
-    /**
-     * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
-     */
-    children?: React.ReactNode;
-    /**
-     * Value of the RadioButton that should be checked by default.
-     */
-    checkedValue: string;
-    /**
-     * Should all controls be disabled?
-     */
-    isDisabled?: boolean;
-    /**
-     * Helper message for the RadioGroup.
-     */
-    helper?: string;
-    /**
-     * ID for the RadioGroup.
-     */
-    id: string;
-    /**
-     * Label for the RadioGroup.
-     */
-    label: string;
-    /**
-     * Label size for the RadioGroup
-     */
-    labelSize?: "s" | "l";
-    /**
-     * Name for the RadioGroup.
-     */
-    name: string;
-    /**
-     * Function to call when the RadioGroup loses focus.
-     */
-    onBlur?: (e: EventType) => void;
-    /**
-     * Callback function to update the RadioGroup's controlled `checkedValue` prop,
-     * for example `e => setCheckedValue(e.target.value)`.
-     */
-    onChange?: (event: EventType) => void;
-    /**
-     * Size of the RadioGroup.
-     */
-    size?: "s" | "l";
-}
-export { RadioGroup };
+export { RadioGroup } from "../_shared/cjs/RadioGroup-8e17de70";

package/dist/RadioGroup/RadioGroup.cjs.js

@@ -2,77 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
-var React = require('react');
-var FormControl = require('../_shared/cjs/FormControl-42360ae8.js');
-var index = require('../_shared/cjs/index-45bfb67b.js');
-var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+var RadioGroup = require('../_shared/cjs/RadioGroup-8e17de70.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('react');
+require('../_shared/cjs/FormControl-78b007b7.js');
+require('../_shared/cjs/index-45bfb67b.js');
 require('../_shared/cjs/BtIconAlert-637db790.js');
-require('../_shared/cjs/DisclosureMini-5af13d3c.js');
+require('../_shared/cjs/Surface-b7c51b2b.js');
+require('../_shared/cjs/DisclosureMini-2a10006e.js');
 require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
-require('../_shared/cjs/Text-6f2827e6.js');
+require('../_shared/cjs/Text-555a29a4.js');
 require('../_shared/cjs/suffix-modifier-1ee2da04.js');
-require('../_shared/cjs/VerticalSpace-86f697e7.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var RadioContext = React.createContext({});
-var Provider = RadioContext.Provider;
-var useRadioContext = function () {
-    var context = React.useContext(RadioContext);
-    return context;
-};
-
-/**
- * Radio Button component.
- */
-var RadioButton = React.forwardRef(function (_a, ref) {
-    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = filterDataAttrs.__rest(_a, ["helper", "id", "isDisabled", "label", "value"]);
-    var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, checkedValue = _b.checkedValue, labelSize = _b.labelSize, name = _b.name, size = _b.size;
-    var surface = React.useContext(Surface.Context).surface;
-    var idLabel = "".concat(id, "-label");
-    var checked = checkedValue === value ? true : false;
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames({
-            "arc-RadioButton": true,
-            "arc-RadioButton--disabled": isDisabled || groupDisabled,
-            "arc-RadioButton--small": size === "s",
-            "arc-RadioButton--smallLabel": labelSize === "s",
-            "arc-RadioButton--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
-            React__default["default"].createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
-            React__default["default"].createElement("span", null,
-                label,
-                helper && React__default["default"].createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
-});
-
-/**
- * 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, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = filterDataAttrs.__rest(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
-    React.useEffect(function () {
-        React__default["default"].Children.map(children, function (item) {
-            if (item && item.type !== RadioButton) {
-                throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
-            }
-        });
-    }, [children]);
-    return (React__default["default"].createElement(Provider, { value: {
-            blurEvent: onBlur,
-            changeEvent: onChange,
-            groupDisabled: isDisabled,
-            checkedValue: checkedValue,
-            labelSize: labelSize,
-            name: name,
-            size: size
-        } },
-        React__default["default"].createElement("div", filterDataAttrs.__assign({ className: "arc-RadioGroup" }, filterDataAttrs.filterDataAttrs(props)),
-            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;
-
-exports.RadioGroup = RadioGroup;
+exports.RadioGroup = RadioGroup.RadioGroup;

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

@@ -1,85 +1 @@
-/// <reference types="react" />
-import React from "react";
-import { FC } from "react";
-import { FormControlProps } from "../_shared/esm/FormControl-0744f93f";
-/**
- * Radio Button component.
- */
-declare const RadioButton: FC<RadioButtonProps>;
-interface RadioButtonProps {
-    /**
-     * ID for the Radio Button.
-     */
-    id: string;
-    /**
-     * Should the RadioButton be disabled?
-     */
-    isDisabled?: boolean;
-    /**
-     * Helper text for the RadioButton, shown below the label.
-     */
-    helper?: string;
-    /**
-     * Label for the RadioButton.
-     */
-    label: string;
-    /**
-     * Current value (controlled).
-     */
-    value: string;
-}
-type EventType = React.ChangeEvent<HTMLInputElement>;
-/**
- * Use `RadioGroup` to wrap and control radio buttons and apply default values
- */
-declare const RadioGroup: FC<RadioGroupProps> & {
-    RadioButton: typeof RadioButton;
-};
-interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helperUnderLabel"> {
-    /**
-     * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
-     */
-    children?: React.ReactNode;
-    /**
-     * Value of the RadioButton that should be checked by default.
-     */
-    checkedValue: string;
-    /**
-     * Should all controls be disabled?
-     */
-    isDisabled?: boolean;
-    /**
-     * Helper message for the RadioGroup.
-     */
-    helper?: string;
-    /**
-     * ID for the RadioGroup.
-     */
-    id: string;
-    /**
-     * Label for the RadioGroup.
-     */
-    label: string;
-    /**
-     * Label size for the RadioGroup
-     */
-    labelSize?: "s" | "l";
-    /**
-     * Name for the RadioGroup.
-     */
-    name: string;
-    /**
-     * Function to call when the RadioGroup loses focus.
-     */
-    onBlur?: (e: EventType) => void;
-    /**
-     * Callback function to update the RadioGroup's controlled `checkedValue` prop,
-     * for example `e => setCheckedValue(e.target.value)`.
-     */
-    onChange?: (event: EventType) => void;
-    /**
-     * Size of the RadioGroup.
-     */
-    size?: "s" | "l";
-}
-export { RadioGroup };
+export { RadioGroup } from "../_shared/esm/RadioGroup-65b8c8bf";