@vitality-ds/components 5.4.0 → 5.6.0-alpha.2

package/dist/Breadcrumbs/components/Breadcrumb/hooks/useIsOverflowing.js

@@ -10,7 +10,7 @@ var _lodashEs = require("lodash-es");
 var _react = require("react");
 var _logic = require("../logic");
 var useIsOverflowing = function useIsOverflowing() {
-  var overflowContainerRef = (0, _react.useRef)();
+  var overflowContainerRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(undefined),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isOverflowing = _useState2[0],

package/dist/Button/primitives/styles/BaseButton.styles.js

@@ -58,7 +58,9 @@ var _default = exports["default"] = (0, _system.css)({
       critical: {},
       success: {},
       warning: {},
-      info: {}
+      info: {},
+      brand: {},
+      accent: {}
     },
     /**
      * The size of the button
@@ -110,6 +112,14 @@ var _default = exports["default"] = (0, _system.css)({
     color: "info",
     variant: "subtle",
     css: (0, _helpers.getSubtleVariant)("info")
+  }, {
+    color: "brand",
+    variant: "subtle",
+    css: (0, _helpers.getSubtleVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "subtle",
+    css: (0, _helpers.getSubtleVariant)("accent")
   },
   /**
    * OnSurface Variants
@@ -141,6 +151,14 @@ var _default = exports["default"] = (0, _system.css)({
     color: "info",
     variant: "onSurface",
     css: (0, _helpers.getOnSurfaceVariant)("info")
+  }, {
+    color: "brand",
+    variant: "onSurface",
+    css: (0, _helpers.getOnSurfaceVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "onSurface",
+    css: (0, _helpers.getOnSurfaceVariant)("accent")
   },
   /**
    * Ghost Variants
@@ -169,6 +187,14 @@ var _default = exports["default"] = (0, _system.css)({
     color: "info",
     variant: "ghost",
     css: (0, _helpers.getGhostVariant)("info")
+  }, {
+    color: "brand",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("accent")
   },
   /**
    * Link Variants
@@ -197,6 +223,14 @@ var _default = exports["default"] = (0, _system.css)({
     color: "info",
     variant: "link",
     css: (0, _helpers.getLinkVariant)("info")
+  }, {
+    color: "brand",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("accent")
   },
   /**
    * Solid Variants
@@ -225,5 +259,13 @@ var _default = exports["default"] = (0, _system.css)({
     color: "info",
     variant: "solid",
     css: (0, _helpers.getColorVariant)("info")
+  }, {
+    color: "brand",
+    variant: "solid",
+    css: (0, _helpers.getColorVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "solid",
+    css: (0, _helpers.getColorVariant)("accent")
   }]
 });

package/dist/Callout/components/CalloutDescription/styles/BaseCalloutDescription.styles.js

@@ -20,13 +20,20 @@ var _default = exports["default"] = (0, _system.css)({
         fontWeight: "$caption",
         lineHeight: "$caption"
       },
+      blockCompact: {
+        display: "inline"
+      },
       "default": {}
     },
     severity: {
       info: (0, _helpers.getTextColorVariant)("info"),
       critical: (0, _helpers.getTextColorVariant)("critical"),
       success: (0, _helpers.getTextColorVariant)("success"),
-      warning: (0, _helpers.getTextColorVariant)("warning")
+      warning: (0, _helpers.getTextColorVariant)("warning"),
+      accent: (0, _helpers.getTextColorVariant)("accent"),
+      brand: (0, _helpers.getTextColorVariant)("brand"),
+      primary: (0, _helpers.getTextColorVariant)("primary"),
+      neutral: (0, _helpers.getTextColorVariant)("neutral")
     },
     hideTitle: {
       "true": {}
@@ -55,5 +62,21 @@ var _default = exports["default"] = (0, _system.css)({
     size: "compact",
     severity: "warning",
     css: (0, _helpers.getCompactTextColorVariant)("warning")
+  }, {
+    size: "compact",
+    severity: "accent",
+    css: (0, _helpers.getCompactTextColorVariant)("accent")
+  }, {
+    size: "compact",
+    severity: "brand",
+    css: (0, _helpers.getCompactTextColorVariant)("brand")
+  }, {
+    size: "compact",
+    severity: "primary",
+    css: (0, _helpers.getCompactTextColorVariant)("primary")
+  }, {
+    size: "compact",
+    severity: "neutral",
+    css: (0, _helpers.getCompactTextColorVariant)("neutral")
   }]
 });

package/dist/Callout/constants.js

@@ -10,25 +10,57 @@ var DEFAULT_CONTENT = exports.DEFAULT_CONTENT = {
   success: {
     icon: _icons.Completed,
     title: "Success",
+    titleColor: "$colors$success10",
     spinnerColor: "success",
     iconColor: "success"
   },
   info: {
     icon: _icons.Info,
     title: "Information",
+    titleColor: "$colors$info10",
     spinnerColor: "info",
     iconColor: "info"
   },
   warning: {
     icon: _icons.Alert,
     title: "Warning",
+    titleColor: "$colors$warning10",
     spinnerColor: "warning",
     iconColor: "warning"
   },
   critical: {
     icon: _icons.Error,
     title: "Critical",
+    titleColor: "$colors$critical10",
     spinnerColor: "critical",
     iconColor: "critical"
+  },
+  accent: {
+    icon: _icons.Info,
+    title: "Information",
+    titleColor: "$colors$accent10",
+    spinnerColor: "accent",
+    iconColor: "accent"
+  },
+  brand: {
+    icon: _icons.GentuLogo,
+    title: "Brand",
+    titleColor: "$colors$brand10",
+    spinnerColor: "brand",
+    iconColor: "brand"
+  },
+  primary: {
+    icon: _icons.Info,
+    title: "Information",
+    titleColor: "$colors$primary10",
+    spinnerColor: "primary",
+    iconColor: "primary"
+  },
+  neutral: {
+    icon: _icons.Info,
+    title: "Information",
+    titleColor: "$colors$neutral12",
+    spinnerColor: "neutral",
+    iconColor: "lowContrast"
   }
 };

package/dist/Callout/hooks/useCalloutContent.js

@@ -12,18 +12,22 @@ var useCalloutContent = function useCalloutContent(_ref) {
     icon = _ref.icon;
   var _getDefaultContent = (0, _logic.getDefaultContent)(severity),
     defaultTitle = _getDefaultContent.title,
+    titleColor = _getDefaultContent.titleColor,
     defaultIcon = _getDefaultContent.icon,
     iconColor = _getDefaultContent.iconColor,
     spinnerColor = _getDefaultContent.spinnerColor;
-  var iconSize = size === "compact" ? "sm" : "md";
+  var isCompactLayout = size === "compact" || size === "blockCompact";
+  var iconSize = isCompactLayout ? "sm" : "md";
   var titleToDisplay = title || defaultTitle;
   var iconToDisplay = icon || defaultIcon;
   return {
     titleToDisplay: titleToDisplay,
+    titleColor: titleColor,
     iconToDisplay: iconToDisplay,
     iconColor: iconColor,
     spinnerColor: spinnerColor,
-    iconSize: iconSize
+    iconSize: iconSize,
+    isCompactLayout: isCompactLayout
   };
 };
 var _default = exports["default"] = useCalloutContent;

package/dist/Callout/index.js

@@ -33,37 +33,75 @@ function Callout(_ref) {
       icon: icon
     }),
     titleToDisplay = _useCalloutContent.titleToDisplay,
+    titleColor = _useCalloutContent.titleColor,
     iconToDisplay = _useCalloutContent.iconToDisplay,
     iconColor = _useCalloutContent.iconColor,
     spinnerColor = _useCalloutContent.spinnerColor,
-    iconSize = _useCalloutContent.iconSize;
+    iconSize = _useCalloutContent.iconSize,
+    isCompactLayout = _useCalloutContent.isCompactLayout;
   var IconComponent = iconToDisplay;
   var commonButtonProps = {
     color: severity,
     spinnerColor: spinnerColor,
     size: "compact"
   };
+  var getTitleContent = function getTitleContent() {
+    if (hideTitle) {
+      return /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
+        hideTitle: hideTitle,
+        size: size,
+        severity: severity,
+        content: description
+      });
+    }
+    if (size === "compact") {
+      return /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
+        hideTitle: hideTitle,
+        size: size,
+        severity: severity,
+        content: description
+      });
+    }
+    if (size === "blockCompact") {
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        color: titleColor,
+        variant: "display200"
+      }, titleToDisplay), /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
+        hideTitle: hideTitle,
+        size: size,
+        severity: severity,
+        content: description
+      }));
+    }
+    return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      color: titleColor,
+      variant: "display300"
+    }, titleToDisplay);
+  };
+  var getIconContent = function getIconContent() {
+    if (size === "blockCompact") {
+      return /*#__PURE__*/_react["default"].createElement(_styled.BaseCalloutIconContainer, null, /*#__PURE__*/_react["default"].createElement(IconComponent, {
+        size: iconSize,
+        color: iconColor
+      }));
+    }
+    return /*#__PURE__*/_react["default"].createElement(IconComponent, {
+      size: iconSize,
+      color: iconColor
+    });
+  };
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseCallout, {
     role: "alert",
     size: size,
     severity: severity
   }, /*#__PURE__*/_react["default"].createElement(_styled.BaseCalloutTitleContainer, {
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(IconComponent, {
-    size: iconSize,
-    color: iconColor
-  }), hideTitle || size === "compact" ? /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
-    hideTitle: hideTitle,
-    size: size,
+  }, getIconContent(), getTitleContent()), !isCompactLayout && !hideTitle && /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
     severity: severity,
     content: description
-  }) : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    color: severity,
-    variant: "display300"
-  }, titleToDisplay)), size !== "compact" && !hideTitle && /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
-    severity: severity,
-    content: description
-  }), actions && size !== "compact" && /*#__PURE__*/_react["default"].createElement(_styled.BaseCalloutActions, null, secondary && /*#__PURE__*/_react["default"].createElement(_primitives["default"], (0, _extends2["default"])({
+  }), actions && size !== "compact" && /*#__PURE__*/_react["default"].createElement(_styled.BaseCalloutActions, {
+    size: size
+  }, secondary && /*#__PURE__*/_react["default"].createElement(_primitives["default"], (0, _extends2["default"])({
     onClick: secondary.onClick,
     variant: "ghost",
     iconRight: secondary.icon,

package/dist/Callout/styled.js

@@ -4,11 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BaseCalloutTitleContainer = exports.BaseCalloutActions = exports.BaseCallout = void 0;
+exports.BaseCalloutTitleContainer = exports.BaseCalloutIconContainer = exports.BaseCalloutActions = exports.BaseCallout = void 0;
 var _system = require("@vitality-ds/system");
 var _BaseCallout = _interopRequireDefault(require("./styles/BaseCallout.styles"));
 var _BaseCalloutActions = _interopRequireDefault(require("./styles/BaseCalloutActions.styles"));
+var _BaseCalloutIconContainer = _interopRequireDefault(require("./styles/BaseCalloutIconContainer.styles"));
 var _BaseCalloutTitleContainer = _interopRequireDefault(require("./styles/BaseCalloutTitleContainer.styles"));
 var BaseCallout = exports.BaseCallout = (0, _system.styled)("div", _BaseCallout["default"]);
 var BaseCalloutActions = exports.BaseCalloutActions = (0, _system.styled)("div", _BaseCalloutActions["default"]);
+var BaseCalloutIconContainer = exports.BaseCalloutIconContainer = (0, _system.styled)("div", _BaseCalloutIconContainer["default"]);
 var BaseCalloutTitleContainer = exports.BaseCalloutTitleContainer = (0, _system.styled)("div", _BaseCalloutTitleContainer["default"]);

package/dist/Callout/styles/BaseCallout.styles.js

@@ -20,13 +20,21 @@ var _default = exports["default"] = (0, _system.css)({
       info: {},
       warning: {},
       critical: {},
-      success: {}
+      success: {},
+      accent: {},
+      brand: {},
+      primary: {},
+      neutral: {}
     },
     size: {
       compact: {
         backgroundColor: "transparent",
         padding: 0
       },
+      blockCompact: {
+        flexDirection: "row",
+        padding: "$sm"
+      },
       "default": {}
     }
   },
@@ -46,5 +54,53 @@ var _default = exports["default"] = (0, _system.css)({
     size: "default",
     severity: "critical",
     css: (0, _helpers.getColorVariant)("critical")
+  }, {
+    size: "default",
+    severity: "accent",
+    css: (0, _helpers.getColorVariant)("accent")
+  }, {
+    size: "default",
+    severity: "brand",
+    css: (0, _helpers.getColorVariant)("brand")
+  }, {
+    size: "default",
+    severity: "primary",
+    css: (0, _helpers.getColorVariant)("primary")
+  }, {
+    size: "default",
+    severity: "neutral",
+    css: (0, _helpers.getColorVariant)("neutral")
+  }, {
+    size: "blockCompact",
+    severity: "warning",
+    css: (0, _helpers.getColorVariant)("warning")
+  }, {
+    size: "blockCompact",
+    severity: "success",
+    css: (0, _helpers.getColorVariant)("success")
+  }, {
+    size: "blockCompact",
+    severity: "info",
+    css: (0, _helpers.getColorVariant)("info")
+  }, {
+    size: "blockCompact",
+    severity: "critical",
+    css: (0, _helpers.getColorVariant)("critical")
+  }, {
+    size: "blockCompact",
+    severity: "accent",
+    css: (0, _helpers.getColorVariant)("accent")
+  }, {
+    size: "blockCompact",
+    severity: "brand",
+    css: (0, _helpers.getColorVariant)("brand")
+  }, {
+    size: "blockCompact",
+    severity: "primary",
+    css: (0, _helpers.getColorVariant)("primary")
+  }, {
+    size: "blockCompact",
+    severity: "neutral",
+    css: (0, _helpers.getColorVariant)("neutral")
   }]
 });

package/dist/Callout/styles/BaseCalloutActions.styles.js

@@ -10,5 +10,14 @@ var _default = exports["default"] = (0, _system.css)({
   display: "flex",
   flex: 1,
   alignItems: "flex-start",
-  justifyContent: "flex-end"
+  justifyContent: "flex-end",
+  variants: {
+    size: {
+      blockCompact: {
+        flexGrow: 0
+      },
+      compact: {},
+      "default": {}
+    }
+  }
 });

package/dist/Callout/styles/BaseCalloutIconContainer.styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _system = require("@vitality-ds/system");
+// Adjust alignment of inline text with the icon in blockCompact mode
+var _default = exports["default"] = (0, _system.css)({
+  display: "flex",
+  marginTop: "0.15rem"
+});

package/dist/Callout/styles/BaseCalloutTitleContainer.styles.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _system = require("@vitality-ds/system");
+var _styled = require("../../Typography/styled");
+var _styled2 = require("../components/CalloutDescription/styled");
 var _default = exports["default"] = (0, _system.css)({
   display: "flex",
   flex: 1,
@@ -18,6 +22,12 @@ var _default = exports["default"] = (0, _system.css)({
       compact: {
         gap: "$sm"
       },
+      blockCompact: {
+        gap: "$sm",
+        "& div": (0, _defineProperty2["default"])({}, "& > ".concat(_styled.BaseTypography, ", & > ").concat(_styled2.BaseCalloutDescription), {
+          marginRight: "$sm"
+        })
+      },
       "default": {}
     }
   }

package/dist/Form/CheckboxList/index.js

@@ -21,7 +21,8 @@ function CheckboxList(_ref) {
     direction = _ref.direction,
     value = _ref.value,
     checkboxListName = _ref.name,
-    ariaLabelledBy = _ref.ariaLabelledBy;
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    disabled = _ref.disabled;
   var _useCheckedItems = (0, _useCheckedItems2["default"])(value),
     checkedItems = _useCheckedItems.checkedItems,
     setCheckedItems = _useCheckedItems.setCheckedItems;
@@ -37,11 +38,11 @@ function CheckboxList(_ref) {
     var label = _ref2.label,
       id = _ref2.id,
       optionValue = _ref2.value,
-      disabled = _ref2.disabled,
-      name = _ref2.name;
+      name = _ref2.name,
+      optionDisabled = _ref2.disabled;
     return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
       key: optionValue,
-      disabled: disabled,
+      disabled: disabled || optionDisabled,
       label: label,
       id: id,
       value: optionValue,

package/dist/Form/CheckboxList/index.spec.js

@@ -79,4 +79,74 @@ describe("CheckboxList", function () {
     expect(checkbox.at(1).prop("checked")).toEqual(false);
     expect(checkbox.at(1).prop("disabled")).toBeFalsy();
   });
+  it("should disable all checkboxes when disabled prop is true", function () {
+    var wrapper = mount({
+      disabled: true
+    });
+    var checkbox = wrapper.find(_Checkbox["default"]);
+    expect(checkbox).toHaveLength(2);
+    expect(checkbox.at(0).prop("disabled")).toBe(true);
+    expect(checkbox.at(1).prop("disabled")).toBe(true);
+  });
+  it("should disable individual checkboxes via options", function () {
+    var customOptions = [{
+      label: "foo",
+      value: "foo",
+      id: "foo",
+      name: "foo",
+      onChange: function onChange() {
+        return "";
+      },
+      checked: false,
+      disabled: true
+    }, {
+      label: "bar",
+      value: "bar",
+      id: "bar",
+      name: "bar",
+      onChange: function onChange() {
+        return "";
+      },
+      checked: false,
+      disabled: false
+    }];
+    var wrapper = mount({
+      options: customOptions
+    });
+    var checkbox = wrapper.find(_Checkbox["default"]);
+    expect(checkbox).toHaveLength(2);
+    expect(checkbox.at(0).prop("disabled")).toBe(true);
+    expect(checkbox.at(1).prop("disabled")).toBe(false);
+  });
+  it("should disable all checkboxes when both disabled prop and individual option disabled are set", function () {
+    var customOptions = [{
+      label: "foo",
+      value: "foo",
+      id: "foo",
+      name: "foo",
+      onChange: function onChange() {
+        return "";
+      },
+      checked: false,
+      disabled: true
+    }, {
+      label: "bar",
+      value: "bar",
+      id: "bar",
+      name: "bar",
+      onChange: function onChange() {
+        return "";
+      },
+      checked: false,
+      disabled: false
+    }];
+    var wrapper = mount({
+      disabled: true,
+      options: customOptions
+    });
+    var checkbox = wrapper.find(_Checkbox["default"]);
+    expect(checkbox).toHaveLength(2);
+    expect(checkbox.at(0).prop("disabled")).toBe(true);
+    expect(checkbox.at(1).prop("disabled")).toBe(true);
+  });
 });

package/dist/Input/Checkbox/styles/BaseCheckboxText.styles.js

@@ -15,7 +15,8 @@ var _default = exports["default"] = (0, _system.css)({
   variants: {
     disabled: {
       "true": {
-        color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled)
+        color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled),
+        cursor: "not-allowed"
       }
     }
   }

package/dist/Input/DatePicker/logic.js

@@ -32,7 +32,7 @@ var handleOnInteractOutside = exports.handleOnInteractOutside = function handleO
   return function (event) {
     // when we click outside the datepicker, check if it's the input field or the icon button
     var target = event.target;
-    if (allowedElementIds.includes(target === null || target === void 0 ? void 0 : target.id)) {
+    if (target && allowedElementIds.includes(target === null || target === void 0 ? void 0 : target.id)) {
       return;
     }
     setIsOpen(false);

package/dist/Input/RadioButtons/components/RadioButton/styles/BaseRadioButton.styles.js

@@ -31,7 +31,8 @@ var _default = exports["default"] = (0, _system.css)({
     boxShadow: "0 0 0 2px ".concat((0, _system.getColorScaleValueByUseCase)("primary", borders.focusRing))
   },
   "&:disabled": {
-    borderColor: (0, _system.getColorScaleValueByUseCase)("neutral", borders.uiElement_disabled)
+    borderColor: (0, _system.getColorScaleValueByUseCase)("neutral", borders.uiElement_disabled),
+    cursor: "not-allowed"
   },
   "&[data-state='checked']": {
     borderColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid),

package/dist/Input/RadioButtons/components/RadioButton/styles/BaseRadioLabel.styles.js

@@ -16,7 +16,8 @@ var _default = exports["default"] = (0, _system.css)({
   variants: {
     disabled: {
       "true": {
-        color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled)
+        color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled),
+        cursor: "not-allowed"
       }
     }
   }

package/dist/Input/RadioButtons/index.js

@@ -10,8 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _RadioButton = _interopRequireDefault(require("./components/RadioButton"));
 var _styled = require("./styled");
-var _excluded = ["onChange", "options", "direction", "value", "name", "css", "asChild", "as", "style", "className"],
-  _excluded2 = ["id"];
+var _excluded = ["onChange", "options", "direction", "value", "name", "css", "asChild", "as", "style", "className", "disabled"];
 var RadioButtons = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var onChange = _ref.onChange,
     options = _ref.options,
@@ -24,20 +23,27 @@ var RadioButtons = /*#__PURE__*/_react["default"].forwardRef(function (_ref, for
     as = _ref.as,
     style = _ref.style,
     className = _ref.className,
+    disabled = _ref.disabled,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseRadioButtonsContainer, (0, _extends2["default"])({
     onValueChange: onChange,
     orientation: direction,
     value: value,
     name: name,
-    ref: forwardedRef
+    ref: forwardedRef,
+    disabled: disabled
   }, props), options === null || options === void 0 ? void 0 : options.map(function (_ref2) {
     var id = _ref2.id,
-      restProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-    return /*#__PURE__*/_react["default"].createElement(_RadioButton["default"], (0, _extends2["default"])({}, restProps, {
+      optionDisabled = _ref2.disabled,
+      label = _ref2.label,
+      optionValue = _ref2.value;
+    return /*#__PURE__*/_react["default"].createElement(_RadioButton["default"], {
       key: id,
-      id: id
-    }));
+      id: id,
+      label: label,
+      value: optionValue,
+      disabled: disabled || optionDisabled
+    });
   }));
 });
 RadioButtons.displayName = "RadioButtons";