@pingux/astro 2.221.6 → 2.234.0-alpha.0

package/lib/components/Badge/Convenience/SuccessCalloutBadge.js

@@ -1,17 +1,18 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import CheckCircle from '@pingux/mdi-react/CheckCircleIcon';
 import { Badge, Icon } from '../../..';
+import { useGetTheme } from '../../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var SuccessCalloutBadge = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
   return ___EmotionJSX(Badge, _extends({
     ref: ref,
     variant: "successCalloutBadge",
     slots: {
       leftIcon: ___EmotionJSX(Icon, {
-        icon: CheckCircle,
-        size: 15,
-        color: "success.bright"
+        icon: icons.successCalloutBadge,
+        size: "xs"
       })
     }
   }, props));

package/lib/components/Badge/Convenience/WarningCalloutBadge.js

@@ -1,17 +1,18 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import Alert from '@pingux/mdi-react/AlertIcon';
 import { Badge, Icon } from '../../..';
+import { useGetTheme } from '../../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var WarningCalloutBadge = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
   return ___EmotionJSX(Badge, _extends({
     ref: ref,
     variant: "warningCalloutBadge",
     slots: {
       leftIcon: ___EmotionJSX(Icon, {
-        icon: Alert,
-        size: 15,
-        color: "#E86900"
+        icon: icons.warningCalloutBadge,
+        size: "xs"
       })
     }
   }, props));

package/lib/components/Checkbox/CheckboxBase.js

@@ -1,80 +1,131 @@
+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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["checked", "defaultChecked", "sx", "variant", "children"];
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef } from 'react';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { omit } from 'lodash';
-import PropTypes from 'prop-types';
 import { Checkbox as ThemeUICheckbox } from 'theme-ui';
+import useGetTheme from '../../hooks/useGetTheme';
 import Box from '../Box';
+import { AstroIndeterminateCheckboxIcon, OnyxDefaultCheckboxIcon, OnyxIndeterminateCheckboxIcon } from './CheckboxIcons';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var VISUALLY_HIDDEN_INPUT_STYLE = {
+  position: 'absolute',
+  opacity: 0,
+  width: 1,
+  height: 1,
+  overflow: 'hidden'
+};
+
+// Props from react-aria/useField that must not reach a native <input>
+var NON_DOM_PROPS = ['isIndeterminate', 'isFocused', 'isDisabled', 'isReadOnly', 'isRequired', 'defaultSelected', '__css', '__themeKey', 'variant', 'tabIndex', 'sx', 'mr', 'opacity'];
+
+// ─── Astro theme: original ThemeUI implementation ────────────────────────────
+
+// theme-ui's CheckboxProps name is aliased to avoid clashing with our own.
 
 /**
- * Checkbox component from Theme UI, renders a visually hidden input + svg icons for the
- * checked and unchecked states.
+ * Internal props for AstroDefaultCheckbox. theme-ui's exported CheckboxProps
+ * omits the internal `__css`/`__themeKey` keys this component needs to receive.
  */
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var DefaultCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
+
+var AstroDefaultCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUICheckbox, _extends({
-    ref: ref,
+    ref: ref
+  }, _objectSpread({
     __css: {
       top: 0,
       left: 0
     }
-  }, props));
+  }, props)));
+});
+var AstroIndeterminateCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
+  /* eslint-disable no-param-reassign */
+  if (ref && typeof ref !== 'function' && ref.current) ref.current.indeterminate = true;
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(AstroDefaultCheckbox, _extends({
+    ref: ref
+  }, props))), ___EmotionJSX(Box, _extends({
+    as: AstroIndeterminateCheckboxIcon,
+    variant: "variants.box.indeterminateCheckboxIcon",
+    mr: 2
+  }, props, {
+    opacity: 1,
+    tabIndex: -1
+  })));
+});
+
+// ─── Onyx theme: Figma SVG implementation ────────────────────────────────────
+
+var OnyxDefaultCheckbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var checked = _ref.checked,
+    defaultChecked = _ref.defaultChecked,
+    sx = _ref.sx,
+    variant = _ref.variant,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isChecked = checked !== undefined ? checked : defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false;
+  var inputProps = omit(props, NON_DOM_PROPS);
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("input", _extends({
+    ref: ref,
+    type: "checkbox",
+    checked: checked,
+    defaultChecked: defaultChecked,
+    style: VISUALLY_HIDDEN_INPUT_STYLE
+  }, inputProps)), ___EmotionJSX(OnyxDefaultCheckboxIcon, {
+    isChecked: isChecked,
+    variant: variant,
+    sx: sx
+  }), children);
 });
-var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
-  console.log('🚀 ~ IndeterminateCheckboxIcon ~ props:', props);
-  return ___EmotionJSX("svg", _extends({
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "checkbox-icon-title",
-    "data-testid": "checkbox-icon-indeterminate"
-  }, omit(props, 'id', 'aria-checked', 'data-testid', 'onFocus')), ___EmotionJSX("title", {
-    id: "checkbox-icon-title"
-  }, "Indeterminate Checkbox Icon"), ___EmotionJSX("rect", {
-    x: "3.5",
-    y: "3.5",
-    width: "17",
-    height: "17",
-    rx: "1.5",
-    id: "indeterminate-checkbox-icon-wrapper"
-  }), ___EmotionJSX("rect", {
-    x: "6.5",
-    y: "11",
-    width: "11",
-    height: "2",
-    fill: "white"
-  }));
-};
-IndeterminateCheckboxIcon.propTypes = {
-  // TODO: [Astro 3.0.0] Remove this boolean in favor of the proper naming convention - isDisabled
-  // eslint-disable-next-line react/boolean-prop-naming
-  disabled: PropTypes.bool,
-  isDisabled: PropTypes.bool
-};
 
 /**
  * Renders a visually hidden default checkbox since the Theme UI checkbox does not support
  * indeterminism. This allows us to have the necessary ARIA attributes and visual presentation.
  */
-var IndeterminateCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
+var OnyxIndeterminateCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context;
   /* eslint-disable no-param-reassign */
-  if (ref !== null && ref !== void 0 && ref.current) ref.current.indeterminate = true;
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(DefaultCheckbox, _extends({
-    ref: ref
-  }, props))), ___EmotionJSX(Box, _extends({
-    as: IndeterminateCheckboxIcon,
+  if (ref && typeof ref !== 'function' && ref.current) ref.current.indeterminate = true;
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("input", _extends({
+    ref: ref,
+    type: "checkbox",
+    style: VISUALLY_HIDDEN_INPUT_STYLE
+  }, omit(props, _concatInstanceProperty(_context = []).call(_context, NON_DOM_PROPS, ['isIndeterminate'])))), ___EmotionJSX(Box, _extends({
+    as: OnyxIndeterminateCheckboxIcon,
     variant: "variants.box.indeterminateCheckboxIcon",
     mr: 2
   }, props, {
-    opacity: 1,
     tabIndex: -1
   })));
 });
+
+// ─── CheckboxBase: delegates to Onyx or Astro implementation ─────────────────
+
 var CheckboxBase = /*#__PURE__*/forwardRef(function (props, ref) {
-  /* eslint-disable react/prop-types */
-  return props.isIndeterminate ? ___EmotionJSX(IndeterminateCheckbox, _extends({
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
+  if (isOnyx) {
+    return props.isIndeterminate ? ___EmotionJSX(OnyxIndeterminateCheckbox, _extends({
+      ref: ref
+    }, props)) : ___EmotionJSX(OnyxDefaultCheckbox, _extends({
+      ref: ref
+    }, props));
+  }
+  return props.isIndeterminate ? ___EmotionJSX(AstroIndeterminateCheckbox, _extends({
     ref: ref
-  }, props)) : ___EmotionJSX(DefaultCheckbox, _extends({
+  }, props)) : ___EmotionJSX(AstroDefaultCheckbox, _extends({
     ref: ref
   }, props));
 });

package/lib/components/Checkbox/CheckboxIcons.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { omit } from 'lodash';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+/** Renders a Box component pre-configured as an `<svg>` element. */
+var BoxAsSvg = function BoxAsSvg(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX(Box, _extends({
+    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'];
+export var AstroIndeterminateCheckboxIcon = function AstroIndeterminateCheckboxIcon(props) {
+  return ___EmotionJSX(BoxAsSvg, _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "checkbox-icon-title",
+    "data-testid": "checkbox-icon-indeterminate"
+  }, omit(props, OMITTED_PROPS)), ___EmotionJSX("title", {
+    id: "checkbox-icon-title"
+  }, "Indeterminate Checkbox Icon"), ___EmotionJSX("rect", {
+    x: "3.5",
+    y: "3.5",
+    width: "17",
+    height: "17",
+    rx: "1.5",
+    id: "indeterminate-checkbox-icon-wrapper"
+  }), ___EmotionJSX("rect", {
+    x: "6.5",
+    y: "11",
+    width: "11",
+    height: "2",
+    fill: "white"
+  }));
+};
+export var OnyxCheckedIcon = function OnyxCheckedIcon() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("rect", {
+    id: "checked-bg",
+    width: "16",
+    height: "16",
+    rx: "4",
+    fill: "currentColor"
+  }), ___EmotionJSX("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"
+  }));
+};
+export var OnyxUncheckedIcon = function OnyxUncheckedIcon() {
+  return (
+    // Dark mode overrides this fill via theme variant CSS on rect[id="unchecked-bg"]
+    ___EmotionJSX("rect", {
+      id: "unchecked-bg",
+      x: "0.5",
+      y: "0.5",
+      width: "15",
+      height: "15",
+      rx: "3.5",
+      fill: "white",
+      stroke: "currentColor"
+    })
+  );
+};
+export var OnyxIndeterminateCheckboxIcon = function OnyxIndeterminateCheckboxIcon(props) {
+  return ___EmotionJSX(BoxAsSvg, _extends({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "checkbox-icon-title",
+    "data-testid": "checkbox-icon-indeterminate"
+  }, omit(props, OMITTED_PROPS)), ___EmotionJSX("title", {
+    id: "checkbox-icon-title"
+  }, "Indeterminate Checkbox Icon"), ___EmotionJSX("rect", {
+    id: "indeterminate-checkbox-icon-wrapper",
+    width: "16",
+    height: "16",
+    rx: "4",
+    fill: "currentColor",
+    stroke: "currentColor"
+  }), ___EmotionJSX("rect", {
+    x: "4",
+    y: "7",
+    width: "8",
+    height: "2",
+    fill: "white"
+  }));
+};
+export var OnyxDefaultCheckboxIcon = function OnyxDefaultCheckboxIcon(_ref2) {
+  var isChecked = _ref2.isChecked,
+    variant = _ref2.variant,
+    sx = _ref2.sx;
+  return ___EmotionJSX(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 ? ___EmotionJSX(OnyxCheckedIcon, null) : ___EmotionJSX(OnyxUncheckedIcon, null));
+};

package/lib/components/CheckboxField/CheckboxField.js

@@ -18,7 +18,7 @@ import { useToggleState } from 'react-stately';
 import { usePress } from '@react-aria/interactions';
 import { v4 as uuid } from 'uuid';
 import { Box, Checkbox, FieldHelperText, Label } from '../..';
-import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
+import { useField, useGetTheme, useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -72,6 +72,8 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [isIndeterminate]);
   var _useCheckbox = useCheckbox(checkboxProps, state, checkboxRef),
     inputProps = _useCheckbox.inputProps;
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var _useField = useField(_objectSpread(_objectSpread(_objectSpread({}, safeContainerPressProps), props), {}, {
       statusClasses: {
         isIndeterminate: isIndeterminate
@@ -84,7 +86,9 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = useMemo(function () {
     return uuid();
   }, []);
-  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps, {
+    variant: isOnyx && 'forms.checkboxField.container' || undefined
+  }), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Label, _extends({
     variant: "forms.label.checkbox"

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

@@ -265,7 +265,7 @@ export var Indeterminate = function Indeterminate() {
   }, [isIndeterminate, subCheckboxes]);
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CheckboxField, {
     label: "Fruit Salad Recipe",
-    isIndeterminate: isIndeterminate,
+    isIndeterminate: true,
     isSelected: isCompleted,
     onChange: handleParentCheckboxChange
   }), ___EmotionJSX(Box, {

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

@@ -23,6 +23,9 @@ function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try {
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 import React from 'react';
 import userEvent from '@testing-library/user-event';
+import astroTheme from '../../styles/theme';
+import onyxDarkTheme from '../../styles/themeOverrides/nextGenDarkMode';
+import onyxTheme from '../../styles/themes/next-gen';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -334,10 +337,43 @@ test('indeterminate checkbox, clicking svg', /*#__PURE__*/_asyncToGenerator(/*#_
     }
   }, _callee8);
 })));
-test('controlled indeterminate checkbox retains focus and toggles correctly across keyboard Space presses', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+test.each([['Astro', astroTheme], ['Onyx', onyxTheme], ['Onyx dark', onyxDarkTheme]])('%s checkbox receives focus when tabbed to', /*#__PURE__*/function () {
+  var _ref0 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9(_themeName, providerTheme) {
+    var input;
+    return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          render(___EmotionJSX(React.Fragment, null, ___EmotionJSX("button", {
+            type: "button"
+          }, "Before checkbox"), ___EmotionJSX(CheckboxField, defaultProps)), {
+            providerTheme: providerTheme
+          });
+          input = screen.getByRole('checkbox');
+          _context9.next = 4;
+          return userEvent.tab();
+        case 4:
+          expect(screen.getByRole('button', {
+            name: 'Before checkbox'
+          })).toHaveFocus();
+          _context9.next = 7;
+          return userEvent.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__*/_asyncToGenerator(/*#__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() {
@@ -411,7 +447,7 @@ test('controlled indeterminate checkbox retains focus and toggles correctly acro
         expect(screen.getByRole('checkbox')).not.toBeChecked();
       case 20:
       case "end":
-        return _context9.stop();
+        return _context0.stop();
     }
-  }, _callee9);
+  }, _callee0);
 })));

package/lib/components/CheckboxFieldGroup/CheckboxFieldGroup.js

@@ -0,0 +1,79 @@
+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 _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 React, { forwardRef } from 'react';
+import { useCheckboxGroup } from 'react-aria';
+import { useCheckboxGroupState } from 'react-stately';
+import { Box, FieldHelperText, Label } from '../..';
+import { CheckboxFieldGroupContext } from '../../context/CheckboxFieldGroupContext';
+import { usePropWarning, useStatusClasses } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'CheckboxFieldGroup';
+var CheckboxFieldGroup = /*#__PURE__*/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 = useCheckboxGroupState(props);
+  var checkboxGroupProps = _objectSpread(_objectSpread({}, props), {}, {
+    description: helperText
+  });
+  var _useCheckboxGroup = useCheckboxGroup(checkboxGroupProps, state),
+    groupProps = _useCheckboxGroup.groupProps,
+    labelProps = _useCheckboxGroup.labelProps,
+    descriptionProps = _useCheckboxGroup.descriptionProps,
+    errorMessageProps = _useCheckboxGroup.errorMessageProps,
+    isInvalid = _useCheckboxGroup.isInvalid;
+  var _useStatusClasses = useStatusClasses(className, {
+      'is-horizontal': orientation === 'horizontal',
+      'is-invalid': isInvalid
+    }),
+    classNames = _useStatusClasses.classNames;
+  usePropWarning(props, 'disabled', 'isDisabled');
+  var renderedErrorMessage = typeof errorMessage === 'function' ? errorMessage({
+    isInvalid: isInvalid,
+    validationErrors: state.displayValidation.validationErrors,
+    validationDetails: state.displayValidation.validationDetails
+  }) : errorMessage;
+  return ___EmotionJSX(Box, _extends({
+    ref: ref,
+    className: classNames,
+    variant: "forms.checkboxFieldGroup.container"
+  }, getPendoID(displayName), groupProps), label && ___EmotionJSX(Label, _extends({
+    as: "span",
+    variant: "forms.label.checkboxFieldGroup",
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    hintText: hintText,
+    helpHintProps: helpHintProps
+  }, labelProps), label), ___EmotionJSX(Box, {
+    variant: "forms.checkboxFieldGroup.items",
+    className: orientation === 'horizontal' ? 'is-horizontal' : undefined
+  }, ___EmotionJSX(CheckboxFieldGroupContext.Provider, {
+    value: state
+  }, children)), helperText && ___EmotionJSX(FieldHelperText, _extends({
+    status: status
+  }, descriptionProps), helperText), renderedErrorMessage && ___EmotionJSX(FieldHelperText, _extends({
+    status: "error"
+  }, errorMessageProps), renderedErrorMessage));
+});
+CheckboxFieldGroup.displayName = displayName;
+export default CheckboxFieldGroup;

package/lib/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.