@pingux/astro 2.221.6 → 2.234.1-alpha.0

package/lib/cjs/components/Checkbox/CheckboxIcons.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OnyxUncheckedIcon = exports.OnyxIndeterminateCheckboxIcon = exports.OnyxDefaultCheckboxIcon = exports.OnyxCheckedIcon = exports.AstroIndeterminateCheckboxIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _lodash = require("lodash");
+var _Box = _interopRequireDefault(require("../Box"));
+var _react2 = require("@emotion/react");
+var _excluded = ["children"];
+/** Renders a Box component pre-configured as an `<svg>` element. */
+var BoxAsSvg = function BoxAsSvg(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    as: "svg"
+  }, props), children);
+};
+
+// These are valid DOM/SVG attributes that should not be inherited by icon elements
+// when spread from a parent checkbox component's prop bag.
+var OMITTED_PROPS = ['id', 'aria-checked', 'data-testid', 'onFocus'];
+var AstroIndeterminateCheckboxIcon = exports.AstroIndeterminateCheckboxIcon = function AstroIndeterminateCheckboxIcon(props) {
+  return (0, _react2.jsx)(BoxAsSvg, (0, _extends2["default"])({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "checkbox-icon-title",
+    "data-testid": "checkbox-icon-indeterminate"
+  }, (0, _lodash.omit)(props, OMITTED_PROPS)), (0, _react2.jsx)("title", {
+    id: "checkbox-icon-title"
+  }, "Indeterminate Checkbox Icon"), (0, _react2.jsx)("rect", {
+    x: "3.5",
+    y: "3.5",
+    width: "17",
+    height: "17",
+    rx: "1.5",
+    id: "indeterminate-checkbox-icon-wrapper"
+  }), (0, _react2.jsx)("rect", {
+    x: "6.5",
+    y: "11",
+    width: "11",
+    height: "2",
+    fill: "white"
+  }));
+};
+var OnyxCheckedIcon = exports.OnyxCheckedIcon = function OnyxCheckedIcon() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)("rect", {
+    id: "checked-bg",
+    width: "16",
+    height: "16",
+    rx: "4",
+    fill: "currentColor"
+  }), (0, _react2.jsx)("path", {
+    d: "M7.10536 11.7932L7.08774 11.8108L2.6879 7.41096L4.12057 5.97829L7.10542 8.96313L11.8794 4.18912L13.3121 5.62179L7.12304 11.8109L7.10536 11.7932Z",
+    fill: "white"
+  }));
+};
+var OnyxUncheckedIcon = exports.OnyxUncheckedIcon = function OnyxUncheckedIcon() {
+  return (
+    // Dark mode overrides this fill via theme variant CSS on rect[id="unchecked-bg"]
+    (0, _react2.jsx)("rect", {
+      id: "unchecked-bg",
+      x: "0.5",
+      y: "0.5",
+      width: "15",
+      height: "15",
+      rx: "3.5",
+      fill: "white",
+      stroke: "currentColor"
+    })
+  );
+};
+var OnyxIndeterminateCheckboxIcon = exports.OnyxIndeterminateCheckboxIcon = function OnyxIndeterminateCheckboxIcon(props) {
+  return (0, _react2.jsx)(BoxAsSvg, (0, _extends2["default"])({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "checkbox-icon-title",
+    "data-testid": "checkbox-icon-indeterminate"
+  }, (0, _lodash.omit)(props, OMITTED_PROPS)), (0, _react2.jsx)("title", {
+    id: "checkbox-icon-title"
+  }, "Indeterminate Checkbox Icon"), (0, _react2.jsx)("rect", {
+    id: "indeterminate-checkbox-icon-wrapper",
+    width: "16",
+    height: "16",
+    rx: "4",
+    fill: "currentColor",
+    stroke: "currentColor"
+  }), (0, _react2.jsx)("rect", {
+    x: "4",
+    y: "7",
+    width: "8",
+    height: "2",
+    fill: "white"
+  }));
+};
+var OnyxDefaultCheckboxIcon = exports.OnyxDefaultCheckboxIcon = function OnyxDefaultCheckboxIcon(_ref2) {
+  var isChecked = _ref2.isChecked,
+    variant = _ref2.variant,
+    sx = _ref2.sx;
+  return (0, _react2.jsx)(BoxAsSvg, {
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    __themeKey: "forms",
+    variant: variant || 'checkbox',
+    sx: sx,
+    __css: {
+      mr: 2,
+      borderRadius: 4,
+      flexShrink: 0
+    },
+    tabIndex: -1
+  }, isChecked ? (0, _react2.jsx)(OnyxCheckedIcon, null) : (0, _react2.jsx)(OnyxUncheckedIcon, null));
+};

package/lib/cjs/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Checkbox';

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -82,6 +82,8 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [isIndeterminate]);
   var _useCheckbox = (0, _reactAria.useCheckbox)(checkboxProps, state, checkboxRef),
     inputProps = _useCheckbox.inputProps;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({}, safeContainerPressProps), props), {}, {
       statusClasses: {
         isIndeterminate: isIndeterminate
@@ -94,7 +96,9 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var helperTextId = (0, _react.useMemo)(function () {
     return (0, _uuid.v4)();
   }, []);
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Box, {
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps, {
+    variant: isOnyx && 'forms.checkboxField.container' || undefined
+  }), (0, _react2.jsx)(_.Box, {
     isRow: true
   }, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     variant: "forms.label.checkbox"

package/lib/cjs/components/CheckboxField/CheckboxField.stories.js

@@ -275,7 +275,7 @@ var Indeterminate = exports.Indeterminate = function Indeterminate() {
   }, [isIndeterminate, subCheckboxes]);
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.CheckboxField, {
     label: "Fruit Salad Recipe",
-    isIndeterminate: isIndeterminate,
+    isIndeterminate: true,
     isSelected: isCompleted,
     onChange: handleParentCheckboxChange
   }), (0, _react2.jsx)(_index.Box, {

package/lib/cjs/components/CheckboxField/CheckboxField.test.js

@@ -17,6 +17,9 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _nextGenDarkMode = _interopRequireDefault(require("../../styles/themeOverrides/nextGenDarkMode"));
+var _nextGen = _interopRequireDefault(require("../../styles/themes/next-gen"));
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
@@ -337,10 +340,43 @@ test('indeterminate checkbox, clicking svg', /*#__PURE__*/(0, _asyncToGenerator2
     }
   }, _callee8);
 })));
-test('controlled indeterminate checkbox retains focus and toggles correctly across keyboard Space presses', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+test.each([['Astro', _theme["default"]], ['Onyx', _nextGen["default"]], ['Onyx dark', _nextGenDarkMode["default"]]])('%s checkbox receives focus when tabbed to', /*#__PURE__*/function () {
+  var _ref0 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9(_themeName, providerTheme) {
+    var input;
+    return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          (0, _testWrapper.render)((0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)("button", {
+            type: "button"
+          }, "Before checkbox"), (0, _react2.jsx)(_["default"], defaultProps)), {
+            providerTheme: providerTheme
+          });
+          input = _testWrapper.screen.getByRole('checkbox');
+          _context9.next = 4;
+          return _userEvent["default"].tab();
+        case 4:
+          expect(_testWrapper.screen.getByRole('button', {
+            name: 'Before checkbox'
+          })).toHaveFocus();
+          _context9.next = 7;
+          return _userEvent["default"].tab();
+        case 7:
+          expect(input).toHaveFocus();
+          expect(input.closest('label')).toHaveClass('is-focused');
+        case 9:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee9);
+  }));
+  return function (_x, _x2) {
+    return _ref0.apply(this, arguments);
+  };
+}());
+test('controlled indeterminate checkbox retains focus and toggles correctly across keyboard Space presses', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
   var onChange, IndeterminateParent, input, input2;
-  return _regeneratorRuntime().wrap(function _callee9$(_context9) {
-    while (1) switch (_context9.prev = _context9.next) {
+  return _regeneratorRuntime().wrap(function _callee0$(_context0) {
+    while (1) switch (_context0.prev = _context0.next) {
       case 0:
         onChange = jest.fn();
         IndeterminateParent = function IndeterminateParent() {
@@ -414,7 +450,7 @@ test('controlled indeterminate checkbox retains focus and toggles correctly acro
         expect(_testWrapper.screen.getByRole('checkbox')).not.toBeChecked();
       case 20:
       case "end":
-        return _context9.stop();
+        return _context0.stop();
     }
-  }, _callee9);
+  }, _callee0);
 })));

package/lib/cjs/components/CheckboxFieldGroup/CheckboxFieldGroup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CheckboxFieldGroupProps } from '../../types/checkboxFieldGroup';
+declare const CheckboxFieldGroup: React.ForwardRefExoticComponent<CheckboxFieldGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default CheckboxFieldGroup;

package/lib/cjs/components/CheckboxFieldGroup/CheckboxFieldGroup.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
+var _ = require("../..");
+var _CheckboxFieldGroupContext = require("../../context/CheckboxFieldGroupContext");
+var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
+var _react2 = require("@emotion/react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var displayName = 'CheckboxFieldGroup';
+var CheckboxFieldGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    errorMessage = props.errorMessage,
+    helperText = props.helperText,
+    hintText = props.hintText,
+    helpHintProps = props.helpHintProps,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    label = props.label,
+    _props$orientation = props.orientation,
+    orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
+    status = props.status;
+  var state = (0, _reactStately.useCheckboxGroupState)(props);
+  var checkboxGroupProps = _objectSpread(_objectSpread({}, props), {}, {
+    description: helperText
+  });
+  var _useCheckboxGroup = (0, _reactAria.useCheckboxGroup)(checkboxGroupProps, state),
+    groupProps = _useCheckboxGroup.groupProps,
+    labelProps = _useCheckboxGroup.labelProps,
+    descriptionProps = _useCheckboxGroup.descriptionProps,
+    errorMessageProps = _useCheckboxGroup.errorMessageProps,
+    isInvalid = _useCheckboxGroup.isInvalid;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      'is-horizontal': orientation === 'horizontal',
+      'is-invalid': isInvalid
+    }),
+    classNames = _useStatusClasses.classNames;
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  var renderedErrorMessage = typeof errorMessage === 'function' ? errorMessage({
+    isInvalid: isInvalid,
+    validationErrors: state.displayValidation.validationErrors,
+    validationDetails: state.displayValidation.validationDetails
+  }) : errorMessage;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    ref: ref,
+    className: classNames,
+    variant: "forms.checkboxFieldGroup.container"
+  }, (0, _pendoID.getPendoID)(displayName), groupProps), label && (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
+    as: "span",
+    variant: "forms.label.checkboxFieldGroup",
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    hintText: hintText,
+    helpHintProps: helpHintProps
+  }, labelProps), label), (0, _react2.jsx)(_.Box, {
+    variant: "forms.checkboxFieldGroup.items",
+    className: orientation === 'horizontal' ? 'is-horizontal' : undefined
+  }, (0, _react2.jsx)(_CheckboxFieldGroupContext.CheckboxFieldGroupContext.Provider, {
+    value: state
+  }, children)), helperText && (0, _react2.jsx)(_.FieldHelperText, (0, _extends2["default"])({
+    status: status
+  }, descriptionProps), helperText), renderedErrorMessage && (0, _react2.jsx)(_.FieldHelperText, (0, _extends2["default"])({
+    status: "error"
+  }, errorMessageProps), renderedErrorMessage));
+});
+CheckboxFieldGroup.displayName = displayName;
+var _default = exports["default"] = CheckboxFieldGroup;

package/lib/cjs/components/CheckboxFieldGroup/CheckboxFieldGroup.mdx

@@ -0,0 +1,69 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as CheckboxFieldGroupStories from './CheckboxFieldGroup.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
+
+<Meta of={CheckboxFieldGroupStories} isTemplate />
+
+# CheckboxFieldGroup
+
+`CheckboxFieldGroup` combines a labelled React Aria checkbox group with independently selectable `CheckboxFieldGroupItem` children. Use it when users can choose more than one value from a related set of options.
+
+The group owns the selected string array. Use `defaultValue` for an uncontrolled group, or `value` with `onChange` for a controlled group.
+
+```tsx
+import { CheckboxFieldGroup, CheckboxFieldGroupItem } from '@pingux/astro';
+
+<CheckboxFieldGroup label="Notification channels" defaultValue={['email']}>
+  <CheckboxFieldGroupItem value="email" label="Email" />
+  <CheckboxFieldGroupItem value="sms" label="SMS" />
+  <CheckboxFieldGroupItem value="push" label="Push notification" />
+</CheckboxFieldGroup>;
+```
+
+## Required child API
+
+Every option must be a `CheckboxFieldGroupItem` with a unique string `value` and an accessible `label`. Do not use raw `Checkbox` children: they do not consume the group's React Stately selection context.
+
+### `CheckboxFieldGroup`
+
+The group API includes:
+
+- `label`, `helperText`, and `errorMessage` for field content and validation feedback.
+- `value` / `defaultValue` and `onChange` for controlled or uncontrolled selected string arrays.
+- `orientation` for vertical (default) or horizontal layout.
+- `name` and `form` for native input metadata.
+- `isRequired`, `isDisabled`, `isReadOnly`, and `isInvalid` for validation and interaction state.
+
+### `CheckboxFieldGroupItem`
+
+Each item accepts:
+
+- `value` and `label` for group selection and accessible naming.
+- `helperText` for item-specific description.
+- `isDisabled` and `isReadOnly`, combined with the group state.
+- `isIndeterminate` for a mixed visual presentation; the item value still participates in group selection when toggled.
+- `controlProps` / `checkBoxProps` for the input or checkbox visual primitive.
+- `hasAutoFocus` to focus the item on initial render.
+
+## Accessibility and keyboard behavior
+
+The group uses React Aria's [`useCheckboxGroup`](https://react-spectrum.adobe.com/react-aria/useCheckboxGroup.html) and each child uses [`useCheckboxGroupItem`](https://react-spectrum.adobe.com/react-aria/useCheckboxGroupItem). The wrapper has `role="group"`; its visible label supplies the accessible group name, and helper/error content is connected through generated description and error IDs. Each item remains an independently named checkbox, with group validation and descriptions propagated to its native input.
+
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space', description: 'Toggles the focused checkbox item.' },
+]} screenReaderRows={[
+  'The group uses **`role="group"`** and **`aria-labelledby`** to expose its visible label.',
+  'Each item is a checkbox with its own accessible label and checked state.',
+  'Helper and error content is referenced through **`aria-describedby`** and React Aria validation metadata.',
+]} />
+
+Tab and Shift+Tab move between checkbox items in normal page order. Space toggles the focused item. Disabled items cannot be focused or changed. Read-only items remain focusable so their selection can be inspected, but Space and pointer interaction do not change selection.
+
+## Indeterminate presentation
+
+`isIndeterminate` is a mixed visual/native presentation; it does not create a second selection model. The item's ordinary `value` still participates in the group's selected string array and `onChange` when the item is toggled, so callers should clear or update `isIndeterminate` as appropriate after handling the partial state.
+
+The component inherits the active Astro, Onyx, or Onyx Dark theme's checkbox and field tokens.

package/lib/cjs/components/CheckboxFieldGroup/CheckboxFieldGroup.stories.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Required = exports.ReadOnly = exports.Horizontal = exports.ErrorInvalid = exports.Disabled = exports.Default = exports.Controlled = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _react = require("react");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _CheckboxFieldGroup = _interopRequireDefault(require("./CheckboxFieldGroup.mdx"));
+var _checkboxFieldGroupAttributes = require("./checkboxFieldGroupAttributes");
+var _react2 = require("@emotion/react");
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var items = [{
+  value: 'email',
+  label: 'Email'
+}, {
+  value: 'sms',
+  label: 'SMS'
+}, {
+  value: 'push',
+  label: 'Push notification'
+}];
+var GroupItems = function GroupItems(_ref) {
+  var _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  return (0, _react2.jsx)(React.Fragment, null, (0, _map["default"])(items).call(items, function (item) {
+    return (0, _react2.jsx)(_index.CheckboxFieldGroupItem, {
+      key: item.value,
+      value: item.value,
+      label: item.label,
+      isDisabled: isDisabled
+    });
+  }));
+};
+var _default = exports["default"] = {
+  title: 'Form/CheckboxFieldGroup',
+  component: _index.CheckboxFieldGroup,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(React.Fragment, null, (0, _react2.jsx)(_CheckboxFieldGroup["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
+  argTypes: _objectSpread(_objectSpread({}, _checkboxFieldGroupAttributes.checkboxFieldGroupArgTypes), _checkboxFieldGroupAttributes.checkboxFieldGroupItemArgTypes),
+  args: {
+    label: 'Notification channels',
+    defaultValue: ['email']
+  }
+};
+var Default = exports.Default = function Default(args) {
+  return (0, _react2.jsx)(_index.CheckboxFieldGroup, args, (0, _react2.jsx)(GroupItems, null));
+};
+var Controlled = exports.Controlled = function Controlled() {
+  var _useState = (0, _react.useState)(['email']),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.CheckboxFieldGroup, {
+    label: "Notification channels",
+    value: value,
+    onChange: setValue
+  }, (0, _react2.jsx)(GroupItems, null)), (0, _react2.jsx)(_index.Text, {
+    mt: "sm"
+  }, "Selected values:", ' ', value.join(', ') || 'none'));
+};
+var Disabled = exports.Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.CheckboxFieldGroup, (0, _extends2["default"])({}, args, {
+    label: "Notification channels",
+    isDisabled: true
+  }), (0, _react2.jsx)(GroupItems, {
+    isDisabled: true
+  }));
+};
+var Required = exports.Required = function Required(args) {
+  return (0, _react2.jsx)(_index.CheckboxFieldGroup, (0, _extends2["default"])({}, args, {
+    label: "Notification channels",
+    isRequired: true,
+    defaultValue: []
+  }), (0, _react2.jsx)(GroupItems, null));
+};
+var ErrorInvalid = exports.ErrorInvalid = function ErrorInvalid(args) {
+  return (0, _react2.jsx)(_index.CheckboxFieldGroup, (0, _extends2["default"])({}, args, {
+    label: "Notification channels",
+    isInvalid: true,
+    status: "error",
+    errorMessage: "Choose at least one notification channel.",
+    helperText: "Select every channel where you want to receive updates."
+  }), (0, _react2.jsx)(GroupItems, null));
+};
+var Horizontal = exports.Horizontal = function Horizontal(args) {
+  return (0, _react2.jsx)(_index.CheckboxFieldGroup, (0, _extends2["default"])({}, args, {
+    label: "Notification channels",
+    orientation: "horizontal"
+  }), (0, _react2.jsx)(GroupItems, null));
+};
+var ReadOnly = exports.ReadOnly = function ReadOnly(args) {
+  return (0, _react2.jsx)(_index.CheckboxFieldGroup, (0, _extends2["default"])({}, args, {
+    label: "Notification channels",
+    isReadOnly: true,
+    defaultValue: ['email', 'push']
+  }), (0, _react2.jsx)(GroupItems, null));
+};

package/lib/cjs/components/CheckboxFieldGroup/CheckboxFieldGroup.styles.d.ts

@@ -0,0 +1,8 @@
+import { ThemeUICSSObject } from 'theme-ui';
+type CheckboxFieldGroupStyles = {
+    container: ThemeUICSSObject;
+    items: ThemeUICSSObject;
+    item: ThemeUICSSObject;
+};
+export declare const checkboxFieldGroup: CheckboxFieldGroupStyles;
+export default checkboxFieldGroup;

package/lib/cjs/components/CheckboxFieldGroup/CheckboxFieldGroup.styles.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.checkboxFieldGroup = void 0;
+var checkboxFieldGroup = exports.checkboxFieldGroup = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%'
+  },
+  items: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'xs',
+    width: '100%',
+    '&.is-horizontal': {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      columnGap: 'lg',
+      rowGap: 'xs'
+    }
+  },
+  item: {
+    minWidth: 0,
+    flex: '0 1 auto',
+    '&.is-horizontal': {
+      flex: '0 1 auto'
+    },
+    '&.is-disabled': {
+      opacity: 0.65
+    },
+    '&.is-read-only': {
+      opacity: 0.65
+    }
+  }
+};
+var _default = exports["default"] = checkboxFieldGroup;