@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

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

@@ -0,0 +1,111 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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; }
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import { useState } from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, CheckboxFieldGroup, CheckboxFieldGroupItem, Text } from '../../index';
+import CheckboxFieldGroupReadme from './CheckboxFieldGroup.mdx';
+import { checkboxFieldGroupArgTypes, checkboxFieldGroupItemArgTypes } from './checkboxFieldGroupAttributes';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+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 ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(items).call(items, function (item) {
+    return ___EmotionJSX(CheckboxFieldGroupItem, {
+      key: item.value,
+      value: item.value,
+      label: item.label,
+      isDisabled: isDisabled
+    });
+  }));
+};
+export default {
+  title: 'Form/CheckboxFieldGroup',
+  component: CheckboxFieldGroup,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CheckboxFieldGroupReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: _objectSpread(_objectSpread({}, checkboxFieldGroupArgTypes), checkboxFieldGroupItemArgTypes),
+  args: {
+    label: 'Notification channels',
+    defaultValue: ['email']
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(CheckboxFieldGroup, args, ___EmotionJSX(GroupItems, null));
+};
+export var Controlled = function Controlled() {
+  var _useState = useState(['email']),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return ___EmotionJSX(Box, null, ___EmotionJSX(CheckboxFieldGroup, {
+    label: "Notification channels",
+    value: value,
+    onChange: setValue
+  }, ___EmotionJSX(GroupItems, null)), ___EmotionJSX(Text, {
+    mt: "sm"
+  }, "Selected values:", ' ', value.join(', ') || 'none'));
+};
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(CheckboxFieldGroup, _extends({}, args, {
+    label: "Notification channels",
+    isDisabled: true
+  }), ___EmotionJSX(GroupItems, {
+    isDisabled: true
+  }));
+};
+export var Required = function Required(args) {
+  return ___EmotionJSX(CheckboxFieldGroup, _extends({}, args, {
+    label: "Notification channels",
+    isRequired: true,
+    defaultValue: []
+  }), ___EmotionJSX(GroupItems, null));
+};
+export var ErrorInvalid = function ErrorInvalid(args) {
+  return ___EmotionJSX(CheckboxFieldGroup, _extends({}, 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."
+  }), ___EmotionJSX(GroupItems, null));
+};
+export var Horizontal = function Horizontal(args) {
+  return ___EmotionJSX(CheckboxFieldGroup, _extends({}, args, {
+    label: "Notification channels",
+    orientation: "horizontal"
+  }), ___EmotionJSX(GroupItems, null));
+};
+export var ReadOnly = function ReadOnly(args) {
+  return ___EmotionJSX(CheckboxFieldGroup, _extends({}, args, {
+    label: "Notification channels",
+    isReadOnly: true,
+    defaultValue: ['email', 'push']
+  }), ___EmotionJSX(GroupItems, null));
+};

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

@@ -0,0 +1,33 @@
+export var 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
+    }
+  }
+};
+export default checkboxFieldGroup;

package/lib/components/CheckboxFieldGroup/CheckboxFieldGroup.test.js

@@ -0,0 +1,481 @@
+import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "label"];
+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 _context9, _context0; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(t), !0)).call(_context9, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context0 = ownKeys(Object(t))).call(_context0, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
+function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
+function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
+function _regeneratorAsync(n, e, r, t, o) { var a = _regeneratorAsyncGen(n, e, r, t, o); return a.next().then(function (n) { return n.done ? n.value : a.next(); }); }
+function _regeneratorAsyncGen(r, e, t, o, n) { return new _regeneratorAsyncIterator(_regenerator().w(r, e, t, o), n || _Promise); }
+function _regeneratorAsyncIterator(t, e) { function n(r, o, i, f) { try { var c = t[r](o), u = c.value; return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) { n("next", t, i, f); }, function (t) { n("throw", t, i, f); }) : e.resolve(u).then(function (t) { c.value = t, i(c); }, function (t) { return n("throw", t, i, f); }); } catch (t) { f(t); } } var r; this.next || (_regeneratorDefine2(_regeneratorAsyncIterator.prototype), _regeneratorDefine2(_regeneratorAsyncIterator.prototype, "function" == typeof _Symbol && _Symbol$asyncIterator || "@asyncIterator", function () { return this; })), _regeneratorDefine2(this, "_invoke", function (t, o, i) { function f() { return new e(function (e, r) { n(t, i, e, r); }); } return r = r ? r.then(f, f) : f(); }, !0); }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof _Symbol ? _Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = _Object$create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: _bindInstanceProperty(d).call(d, e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = _Object$getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(c); function f(e) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = _Object$create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function _OverloadYield(e, d) { this.v = e, this.k = d; }
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
+import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
+import _Object$getPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/get-prototype-of";
+import _Object$setPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/set-prototype-of";
+import _Symbol$asyncIterator from "@babel/runtime-corejs3/core-js-stable/symbol/async-iterator";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _Symbol$iterator from "@babel/runtime-corejs3/core-js-stable/symbol/iterator";
+import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { Box } from '../../index';
+import { act, fireEvent, render, screen, within } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { CheckboxFieldGroup, CheckboxFieldGroupItem } from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var groupLabel = 'Pets';
+var values = ['dogs', 'cats', 'dragons'];
+var longLabel = 'A very long label that wraps within the available group width';
+var defaultItems = _mapInstanceProperty(values).call(values, function (value) {
+  return {
+    value: value,
+    label: value
+  };
+});
+beforeEach(function () {
+  jest.useRealTimers();
+});
+afterEach(function () {
+  jest.useRealTimers();
+});
+var renderGroup = function renderGroup() {
+  var groupProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var itemConfigs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultItems;
+  var options = arguments.length > 2 ? arguments[2] : undefined;
+  return render(___EmotionJSX(CheckboxFieldGroup, _extends({
+    label: groupLabel
+  }, groupProps), _mapInstanceProperty(itemConfigs).call(itemConfigs, function (_ref) {
+    var value = _ref.value,
+      label = _ref.label,
+      itemProps = _objectWithoutProperties(_ref, _excluded);
+    return ___EmotionJSX(CheckboxFieldGroupItem, _extends({
+      key: value,
+      value: value,
+      label: label
+    }, itemProps));
+  })), options);
+};
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(CheckboxFieldGroup, _extends({
+      label: groupLabel
+    }, props), ___EmotionJSX(CheckboxFieldGroupItem, {
+      value: values[0],
+      label: "Dogs"
+    }));
+  }
+});
+test.each([['default', {}], ['required', {
+  isRequired: true
+}], ['helper and error', {
+  helperText: 'Select at least one pet',
+  errorMessage: 'A pet selection is required',
+  isInvalid: true
+}], ['disabled', {
+  isDisabled: true
+}], ['read-only', {
+  isReadOnly: true
+}], ['horizontal', {
+  orientation: 'horizontal'
+}]])('has no accessibility violations for the %s state', /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_state, groupProps) {
+    var _renderGroup, container;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _renderGroup = renderGroup(groupProps), container = _renderGroup.container;
+          _context.t0 = expect;
+          _context.next = 4;
+          return axe(container);
+        case 4:
+          _context.t1 = _context.sent;
+          (0, _context.t0)(_context.t1).toHaveNoViolations();
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function (_x, _x2) {
+    return _ref2.apply(this, arguments);
+  };
+}());
+test('renders a labelled group and individually labelled checkbox items', function () {
+  renderGroup();
+  var group = screen.getByRole('group', {
+    name: groupLabel
+  });
+  var groupLabelElement = screen.getByText(groupLabel);
+  expect(group).toHaveAttribute('aria-labelledby', groupLabelElement.id);
+  expect(screen.getByRole('checkbox', {
+    name: 'dogs'
+  })).toBeInTheDocument();
+  expect(screen.getByRole('checkbox', {
+    name: 'cats'
+  })).toBeInTheDocument();
+});
+test('toggles multiple items and reports the next selected array', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+  var onChange, checkboxes;
+  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+    while (1) switch (_context2.prev = _context2.next) {
+      case 0:
+        onChange = jest.fn();
+        renderGroup({
+          onChange: onChange
+        });
+        checkboxes = screen.getAllByRole('checkbox');
+        _context2.next = 5;
+        return userEvent.click(checkboxes[0]);
+      case 5:
+        _context2.next = 7;
+        return userEvent.click(checkboxes[1]);
+      case 7:
+        _context2.next = 9;
+        return userEvent.click(checkboxes[0]);
+      case 9:
+        expect(onChange).toHaveBeenNthCalledWith(1, [values[0]]);
+        expect(onChange).toHaveBeenNthCalledWith(2, [values[0], values[1]]);
+        expect(onChange).toHaveBeenNthCalledWith(3, [values[1]]);
+        expect(checkboxes[0]).not.toBeChecked();
+        expect(checkboxes[1]).toBeChecked();
+      case 14:
+      case "end":
+        return _context2.stop();
+    }
+  }, _callee2);
+})));
+test('supports controlled selection without changing until the value prop changes', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+  var onChange, checkboxes;
+  return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+    while (1) switch (_context3.prev = _context3.next) {
+      case 0:
+        onChange = jest.fn();
+        renderGroup({
+          value: [values[0]],
+          onChange: onChange
+        });
+        checkboxes = screen.getAllByRole('checkbox');
+        expect(checkboxes[0]).toBeChecked();
+        _context3.next = 6;
+        return userEvent.click(checkboxes[1]);
+      case 6:
+        expect(onChange).toHaveBeenCalledWith([values[0], values[1]]);
+        expect(checkboxes[0]).toBeChecked();
+        expect(checkboxes[1]).not.toBeChecked();
+      case 9:
+      case "end":
+        return _context3.stop();
+    }
+  }, _callee3);
+})));
+test('supports an uncontrolled default selection', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+  var checkboxes;
+  return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+    while (1) switch (_context4.prev = _context4.next) {
+      case 0:
+        renderGroup({
+          defaultValue: [values[0]]
+        });
+        checkboxes = screen.getAllByRole('checkbox');
+        expect(checkboxes[0]).toBeChecked();
+        _context4.next = 5;
+        return userEvent.click(checkboxes[1]);
+      case 5:
+        expect(checkboxes[0]).toBeChecked();
+        expect(checkboxes[1]).toBeChecked();
+      case 7:
+      case "end":
+        return _context4.stop();
+    }
+  }, _callee4);
+})));
+test('disabled group and items ignore clicks and Space without changing selection', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+  var groupOnChange, _renderGroup2, unmount, groupCheckboxes, groupItem, itemOnChange, _renderGroup3, container, itemCheckboxes, itemContainer;
+  return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+    while (1) switch (_context5.prev = _context5.next) {
+      case 0:
+        groupOnChange = jest.fn();
+        _renderGroup2 = renderGroup({
+          defaultValue: [values[0]],
+          isDisabled: true,
+          onChange: groupOnChange
+        }), unmount = _renderGroup2.unmount;
+        groupCheckboxes = screen.getAllByRole('checkbox');
+        _forEachInstanceProperty(groupCheckboxes).call(groupCheckboxes, function (checkbox) {
+          return expect(checkbox).toBeDisabled();
+        });
+        groupItem = groupCheckboxes[0].closest('[data-pendo-id="CheckboxFieldGroupItem"]');
+        expect(groupItem).toHaveStyleRule('opacity', '0.65', {
+          target: '.is-disabled'
+        });
+        _context5.next = 8;
+        return userEvent.click(groupCheckboxes[0]);
+      case 8:
+        _context5.next = 10;
+        return userEvent.type(groupCheckboxes[0], '{space}');
+      case 10:
+        expect(groupCheckboxes[0]).toBeChecked();
+        expect(groupOnChange).not.toHaveBeenCalled();
+        unmount();
+        itemOnChange = jest.fn();
+        _renderGroup3 = renderGroup({
+          defaultValue: [values[1]],
+          onChange: itemOnChange
+        }, [defaultItems[0], _objectSpread(_objectSpread({}, defaultItems[1]), {}, {
+          isDisabled: true
+        })]), container = _renderGroup3.container;
+        itemCheckboxes = within(container).getAllByRole('checkbox');
+        expect(itemCheckboxes[0]).toBeEnabled();
+        expect(itemCheckboxes[1]).toBeDisabled();
+        itemContainer = itemCheckboxes[1].closest('[data-pendo-id="CheckboxFieldGroupItem"]');
+        expect(itemContainer).toHaveStyleRule('opacity', '0.65', {
+          target: '.is-disabled'
+        });
+        // The base Astro theme resolves space.md to 15px; the rule is serialized on
+        // the label's emotion class as a `div` descendant rule.
+        expect(itemContainer.querySelector('label')).toHaveStyleRule('margin-right', '15px', {
+          target: 'div'
+        });
+        expect(itemCheckboxes[1]).toBeChecked();
+        _context5.next = 24;
+        return userEvent.click(itemCheckboxes[1]);
+      case 24:
+        _context5.next = 26;
+        return userEvent.type(itemCheckboxes[1], '{space}');
+      case 26:
+        expect(itemCheckboxes[1]).toBeChecked();
+        expect(itemOnChange).not.toHaveBeenCalled();
+      case 28:
+      case "end":
+        return _context5.stop();
+    }
+  }, _callee5);
+})));
+test('keeps a read-only group focusable without changing selection or invoking onChange', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+  var onChange, checkboxes, readOnlyItem;
+  return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+    while (1) switch (_context6.prev = _context6.next) {
+      case 0:
+        onChange = jest.fn();
+        renderGroup({
+          isReadOnly: true,
+          onChange: onChange
+        });
+        checkboxes = screen.getAllByRole('checkbox');
+        expect(screen.getByRole('group', {
+          name: groupLabel
+        })).toBeInTheDocument();
+        expect(checkboxes[0]).toHaveAttribute('aria-readonly', 'true');
+        readOnlyItem = checkboxes[0].closest('[data-pendo-id="CheckboxFieldGroupItem"]');
+        expect(readOnlyItem).toHaveStyleRule('opacity', '0.65', {
+          target: '.is-read-only'
+        });
+        _context6.next = 9;
+        return userEvent.tab();
+      case 9:
+        expect(checkboxes[0]).toHaveFocus();
+        _context6.next = 12;
+        return userEvent.click(checkboxes[0]);
+      case 12:
+        _context6.next = 14;
+        return userEvent.type(checkboxes[0], '{space}');
+      case 14:
+        expect(checkboxes[0]).not.toBeChecked();
+        expect(onChange).not.toHaveBeenCalled();
+        _context6.next = 18;
+        return userEvent.tab();
+      case 18:
+        expect(checkboxes[1]).toHaveFocus();
+        _context6.next = 21;
+        return userEvent.tab({
+          shift: true
+        });
+      case 21:
+        expect(checkboxes[0]).toHaveFocus();
+      case 22:
+      case "end":
+        return _context6.stop();
+    }
+  }, _callee6);
+})));
+test('exposes required and invalid semantics and associates helper and error messages', function () {
+  var _group$getAttribute;
+  var helperText = 'Select at least one pet';
+  var errorMessage = 'A pet selection is required';
+  renderGroup({
+    helperText: helperText,
+    errorMessage: errorMessage,
+    isInvalid: true,
+    isRequired: true
+  });
+  var group = screen.getByRole('group', {
+    name: new RegExp(groupLabel)
+  });
+  var helper = screen.getByText(helperText);
+  var error = screen.getByText(errorMessage);
+  var describedBy = ((_group$getAttribute = group.getAttribute('aria-describedby')) === null || _group$getAttribute === void 0 ? void 0 : _group$getAttribute.split(' ')) || [];
+  var checkboxes = screen.getAllByRole('checkbox');
+  expect(checkboxes).toHaveLength(defaultItems.length);
+  _forEachInstanceProperty(checkboxes).call(checkboxes, function (checkbox) {
+    var _checkbox$getAttribut;
+    expect(checkbox).toBeRequired();
+    expect(checkbox).toHaveAttribute('aria-invalid', 'true');
+    expect((_checkbox$getAttribut = checkbox.getAttribute('aria-describedby')) === null || _checkbox$getAttribut === void 0 ? void 0 : _checkbox$getAttribut.split(' ')).toEqual(expect.arrayContaining([helper.id, error.id]));
+  });
+  expect(describedBy).toEqual(expect.arrayContaining([helper.id, error.id]));
+});
+test('associates item helper text with its checkbox', function () {
+  var _checkbox$getAttribut2;
+  var itemHelper = 'Dogs are friendly';
+  renderGroup({}, [_objectSpread(_objectSpread({}, defaultItems[0]), {}, {
+    helperText: itemHelper
+  })]);
+  var checkbox = screen.getByRole('checkbox', {
+    name: values[0]
+  });
+  var helper = screen.getByText(itemHelper);
+  expect((_checkbox$getAttribut2 = checkbox.getAttribute('aria-describedby')) === null || _checkbox$getAttribut2 === void 0 ? void 0 : _checkbox$getAttribut2.split(' ')).toContain(helper.id);
+});
+test('uses native validity for an empty required group and selected checkbox', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+  var form, checkboxes, initialFormValidity;
+  return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+    while (1) switch (_context7.prev = _context7.next) {
+      case 0:
+        render(___EmotionJSX("form", {
+          "aria-label": "Pet form"
+        }, ___EmotionJSX(CheckboxFieldGroup, {
+          label: groupLabel,
+          isRequired: true,
+          validationBehavior: "native"
+        }, _mapInstanceProperty(defaultItems).call(defaultItems, function (_ref9) {
+          var value = _ref9.value,
+            label = _ref9.label;
+          return ___EmotionJSX(CheckboxFieldGroupItem, {
+            key: value,
+            value: value,
+            label: label
+          });
+        }))));
+        form = screen.getByRole('form', {
+          name: 'Pet form'
+        });
+        checkboxes = screen.getAllByRole('checkbox'); // checkValidity dispatches native invalid events that update React Aria validation state.
+        initialFormValidity = false;
+        act(function () {
+          initialFormValidity = form.checkValidity();
+        });
+        expect(initialFormValidity).toBe(false);
+        expect(checkboxes[0].validity.valid).toBe(false);
+
+        /* eslint-disable-next-line testing-library/no-unnecessary-act */
+        act(function () {
+          fireEvent.click(checkboxes[0]);
+        });
+        expect(checkboxes[0]).toBeChecked();
+        // React Aria applies native required to each item; only the selected input is valid.
+        expect(checkboxes[0].validity.valid).toBe(true);
+      case 10:
+      case "end":
+        return _context7.stop();
+    }
+  }, _callee7);
+})));
+test('supports horizontal and vertical layout classes and long labels', function () {
+  var _renderGroup4 = renderGroup({
+      orientation: 'vertical'
+    }),
+    container = _renderGroup4.container;
+  var verticalGroup = within(container).getByRole('group', {
+    name: groupLabel
+  });
+  var verticalItems = verticalGroup.children[1];
+  expect(verticalGroup).not.toHaveClass('is-horizontal');
+  expect(verticalItems).not.toHaveClass('is-horizontal');
+  expect(verticalItems).toHaveStyleRule('flex-direction', 'column');
+  expect(verticalItems).toHaveStyleRule('gap', '5px');
+  var _render = render(___EmotionJSX(Box, {
+      "data-testid": "constrained-group-container",
+      sx: {
+        width: '100%',
+        maxWidth: '240px',
+        overflowX: 'hidden'
+      }
+    }, ___EmotionJSX(CheckboxFieldGroup, {
+      label: groupLabel,
+      orientation: "horizontal"
+    }, ___EmotionJSX(CheckboxFieldGroupItem, {
+      value: values[0],
+      label: longLabel
+    }), ___EmotionJSX(CheckboxFieldGroupItem, {
+      value: values[1],
+      label: values[1]
+    })))),
+    horizontalContainer = _render.container;
+  var horizontalGroup = within(horizontalContainer).getByRole('group', {
+    name: groupLabel
+  });
+  var constrainedContainer = horizontalGroup.parentElement;
+  var horizontalItems = horizontalGroup.children[1];
+  var longLabelElement = within(horizontalGroup).getByText(longLabel);
+  expect(constrainedContainer).toHaveStyleRule('width', '100%');
+  expect(constrainedContainer).toHaveStyleRule('max-width', '240px');
+  expect(constrainedContainer).toHaveStyleRule('overflow-x', 'hidden');
+  expect(horizontalGroup).toHaveClass('is-horizontal');
+  expect(horizontalGroup).toHaveStyleRule('width', '100%');
+  expect(horizontalItems).toBeInTheDocument();
+  expect(horizontalItems).toHaveClass('is-horizontal');
+  expect(horizontalItems).toHaveStyleRule('width', '100%');
+  expect(horizontalItems).toHaveStyleRule('flex-wrap', 'wrap', {
+    target: '.is-horizontal'
+  });
+  expect(longLabelElement).toHaveStyleRule('max-width', '100%');
+  expect(longLabelElement).toHaveStyleRule('flex-wrap', 'wrap');
+  expect(horizontalItems.scrollWidth).toBeLessThanOrEqual(horizontalItems.clientWidth);
+});
+test('supports keyboard Space toggling through the real checkbox input', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+  var checkbox;
+  return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+    while (1) switch (_context8.prev = _context8.next) {
+      case 0:
+        renderGroup();
+        checkbox = screen.getAllByRole('checkbox')[0];
+        _context8.next = 4;
+        return userEvent.tab();
+      case 4:
+        expect(checkbox).toHaveFocus();
+        _context8.next = 7;
+        return userEvent.type(checkbox, '{space}');
+      case 7:
+        expect(checkbox).toBeChecked();
+      case 8:
+      case "end":
+        return _context8.stop();
+    }
+  }, _callee8);
+})));
+test('renders group and item contents inside the expected group subtree', function () {
+  var _renderGroup5 = renderGroup(),
+    container = _renderGroup5.container;
+  var group = within(container).getByRole('group', {
+    name: groupLabel
+  });
+  expect(within(group).getAllByRole('checkbox')).toHaveLength(defaultItems.length);
+});