@instructure/ui-checkbox 10.26.1 → 11.0.0

package/CHANGELOG.md

@@ -3,9 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.26.1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1) (2025-10-06)
+# [11.0.0](https://github.com/instructure/instructure-ui/compare/v10.26.0...v11.0.0) (2025-10-06)
 
-**Note:** Version bump only for package @instructure/ui-checkbox
+
+### Features
+
+* **many:** instUI v11 release ([36f5438](https://github.com/instructure/instructure-ui/commit/36f54382669186227ba24798bbf7201ef2f5cd4c))
+
+
+### BREAKING CHANGES
+
+* **many:** InstUI v11 contains the following breaking changes:
+- React 16 and 17 are no longer supported
+- remove `PropTypes` from all packages
+- remove `CodeEditor` component
+- remove `@instui/theme-registry` package
+- remove `@testable`, `@experimental`, `@hack` decorators
+- InstUISettingsProvider's `as` prop is removed
+- `canvas.use()`, `canvasHighContrast.use()` functions are removed
+- `canvasThemeLocal`, `canvasHighContrastThemeLocal` are removed
+- `variables` field on theme objects are removed
+- remove deprecated props from Table: Row's `isStacked`, Body's
+  `isStacked`, `hover`, and `headers`
+- `Table`'s `caption` prop is now required
+- `ui-dom-utils`'s `getComputedStyle` can now return `undefined`
 
 
 

package/es/Checkbox/CheckboxFacade/index.js

@@ -29,7 +29,7 @@ import { IconCheckMarkSolid } from '@instructure/ui-icons';
 import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -89,7 +89,7 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
       })]
     });
   }
-}, _CheckboxFacade.displayName = "CheckboxFacade", _CheckboxFacade.componentId = 'CheckboxFacade', _CheckboxFacade.propTypes = propTypes, _CheckboxFacade.allowedProps = allowedProps, _CheckboxFacade.defaultProps = {
+}, _CheckboxFacade.displayName = "CheckboxFacade", _CheckboxFacade.componentId = 'CheckboxFacade', _CheckboxFacade.allowedProps = allowedProps, _CheckboxFacade.defaultProps = {
   checked: false,
   focused: false,
   hovered: false,

package/es/Checkbox/CheckboxFacade/props.js

@@ -22,15 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  checked: PropTypes.bool,
-  focused: PropTypes.bool,
-  hovered: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  indeterminate: PropTypes.bool,
-  invalid: PropTypes.bool
-};
 const allowedProps = ['children', 'checked', 'focused', 'hovered', 'size', 'indeterminate'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/Checkbox/ToggleFacade/index.js

@@ -28,7 +28,7 @@ import { IconCheckSolid, IconXSolid } from '@instructure/ui-icons';
 import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -94,7 +94,7 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       }), labelPlacement === 'end' && this.renderLabel()]
     });
   }
-}, _ToggleFacade.displayName = "ToggleFacade", _ToggleFacade.componentId = 'ToggleFacade', _ToggleFacade.propTypes = propTypes, _ToggleFacade.allowedProps = allowedProps, _ToggleFacade.defaultProps = {
+}, _ToggleFacade.displayName = "ToggleFacade", _ToggleFacade.componentId = 'ToggleFacade', _ToggleFacade.allowedProps = allowedProps, _ToggleFacade.defaultProps = {
   checked: false,
   focused: false,
   size: 'medium',

package/es/Checkbox/ToggleFacade/props.js

@@ -22,16 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  focused: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  labelPlacement: PropTypes.oneOf(['top', 'start', 'end']),
-  invalid: PropTypes.bool
-};
 const allowedProps = ['children', 'checked', 'disabled', 'readOnly', 'focused', 'size', 'labelPlacement'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/Checkbox/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _Checkbox;
+var _dec, _dec2, _class, _Checkbox;
 /*
  * The MIT License (MIT)
  *
@@ -31,13 +31,12 @@ import { logError as error } from '@instructure/console';
 import { isActiveElement } from '@instructure/ui-dom-utils';
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
-import { testable } from '@instructure/ui-testable';
 import { withStyle } from '@instructure/emotion';
 import { CheckboxFacade } from './CheckboxFacade';
 import { ToggleFacade } from './ToggleFacade';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -45,7 +44,7 @@ category: components
 tags: toggle, switch
 ---
 **/
-let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Checkbox = class Checkbox extends Component {
+let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_Checkbox = class Checkbox extends Component {
   constructor(props) {
     super(props);
     this._defaultId = void 0;
@@ -236,6 +235,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
       onMouseOut: createChainedFunction(onMouseOut, this.handleMouseOut),
       ref: this.handleRef,
+      "data-cid": "Checkbox",
       children: _jsxs("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.container,
         children: [_jsx("input", {
@@ -261,7 +261,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       })
     });
   }
-}, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.propTypes = propTypes, _Checkbox.allowedProps = allowedProps, _Checkbox.defaultProps = {
+}, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.allowedProps = allowedProps, _Checkbox.defaultProps = {
   size: 'medium',
   variant: 'simple',
   disabled: false,
@@ -269,6 +269,6 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   indeterminate: false,
   readOnly: false,
   labelPlacement: 'end'
-}, _Checkbox)) || _class) || _class) || _class);
+}, _Checkbox)) || _class) || _class);
 export default Checkbox;
 export { Checkbox, CheckboxFacade, ToggleFacade };

package/es/Checkbox/props.js

@@ -22,31 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-import { FormPropTypes } from '@instructure/ui-form-field';
-import { controllable } from '@instructure/ui-prop-types';
-const propTypes = {
-  label: PropTypes.node.isRequired,
-  id: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  messages: PropTypes.arrayOf(FormPropTypes.message),
-  defaultChecked: PropTypes.bool,
-  checked: controllable(PropTypes.bool, 'onChange', 'defaultChecked'),
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  indeterminate: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  variant: PropTypes.oneOf(['simple', 'toggle']),
-  inline: PropTypes.bool,
-  labelPlacement: PropTypes.oneOf(['top', 'start', 'end']),
-  isRequired: PropTypes.bool,
-  inputRef: PropTypes.func
-};
 const allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired', 'inputRef'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/CheckboxGroup/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _CheckboxGroup;
+var _dec, _class, _CheckboxGroup;
 /*
  * The MIT License (MIT)
  *
@@ -26,16 +26,15 @@ var _dec, _dec2, _class, _CheckboxGroup;
 import { Children, Component } from 'react';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { matchComponentTypes, safeCloneElement, pickProps, omitProps, withDeterministicId } from '@instructure/ui-react-utils';
-import { testable } from '@instructure/ui-testable';
 import { Checkbox } from '../Checkbox';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
 ---
 **/
-let CheckboxGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = (_CheckboxGroup = class CheckboxGroup extends Component {
+let CheckboxGroup = (_dec = withDeterministicId(), _dec(_class = (_CheckboxGroup = class CheckboxGroup extends Component {
   constructor(props) {
     super(props);
     this._messagesId = void 0;
@@ -111,15 +110,16 @@ let CheckboxGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_cla
       vAlign: "top",
       messagesId: this._messagesId,
       elementRef: this.handleRef,
+      "data-cid": "CheckboxGroup",
       children: this.renderChildren()
     });
   }
-}, _CheckboxGroup.displayName = "CheckboxGroup", _CheckboxGroup.componentId = 'CheckboxGroup', _CheckboxGroup.propTypes = propTypes, _CheckboxGroup.allowedProps = allowedProps, _CheckboxGroup.defaultProps = {
+}, _CheckboxGroup.displayName = "CheckboxGroup", _CheckboxGroup.componentId = 'CheckboxGroup', _CheckboxGroup.allowedProps = allowedProps, _CheckboxGroup.defaultProps = {
   disabled: false,
   readOnly: false,
   size: 'medium',
   layout: 'stacked',
   children: null
-}, _CheckboxGroup)) || _class) || _class);
+}, _CheckboxGroup)) || _class);
 export default CheckboxGroup;
 export { CheckboxGroup };

package/es/CheckboxGroup/props.js

@@ -22,40 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-import { FormPropTypes } from '@instructure/ui-form-field';
-import { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
-import { Checkbox } from '../Checkbox';
-const propTypes = {
-  name: PropTypes.string.isRequired,
-  description: PropTypes.node.isRequired,
-  /**
-   * value to set on initial render
-   */
-  defaultValue: PropTypes.array,
-  /**
-   * the selected values (must be accompanied by an `onChange` prop)
-   */
-  value: controllable(PropTypes.array),
-  /**
-   * when used with the `value` prop, the component will not control its own state
-   */
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  /**
-   * object with shape: `{
-    text: PropTypes.node,
-    type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-      }`
-   */
-  messages: PropTypes.arrayOf(FormPropTypes.message),
-  /**
-   * children of type `Checkbox`
-   */
-  children: ChildrenPropTypes.oneOf([Checkbox]),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  layout: PropTypes.oneOf(['stacked', 'columns', 'inline'])
-};
 const allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'size', 'layout'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/lib/Checkbox/CheckboxFacade/index.js

@@ -95,7 +95,7 @@ let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyle)(_s
       })]
     });
   }
-}, _CheckboxFacade.displayName = "CheckboxFacade", _CheckboxFacade.componentId = 'CheckboxFacade', _CheckboxFacade.propTypes = _props.propTypes, _CheckboxFacade.allowedProps = _props.allowedProps, _CheckboxFacade.defaultProps = {
+}, _CheckboxFacade.displayName = "CheckboxFacade", _CheckboxFacade.componentId = 'CheckboxFacade', _CheckboxFacade.allowedProps = _props.allowedProps, _CheckboxFacade.defaultProps = {
   checked: false,
   focused: false,
   hovered: false,

package/lib/Checkbox/CheckboxFacade/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,13 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  checked: _propTypes.default.bool,
-  focused: _propTypes.default.bool,
-  hovered: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  indeterminate: _propTypes.default.bool,
-  invalid: _propTypes.default.bool
-};
 const allowedProps = exports.allowedProps = ['children', 'checked', 'focused', 'hovered', 'size', 'indeterminate'];

package/lib/Checkbox/ToggleFacade/index.js

@@ -101,7 +101,7 @@ let ToggleFacade = exports.ToggleFacade = (_dec = (0, _emotion.withStyle)(_style
       }), labelPlacement === 'end' && this.renderLabel()]
     });
   }
-}, _ToggleFacade.displayName = "ToggleFacade", _ToggleFacade.componentId = 'ToggleFacade', _ToggleFacade.propTypes = _props.propTypes, _ToggleFacade.allowedProps = _props.allowedProps, _ToggleFacade.defaultProps = {
+}, _ToggleFacade.displayName = "ToggleFacade", _ToggleFacade.componentId = 'ToggleFacade', _ToggleFacade.allowedProps = _props.allowedProps, _ToggleFacade.defaultProps = {
   checked: false,
   focused: false,
   size: 'medium',

package/lib/Checkbox/ToggleFacade/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,14 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  checked: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  focused: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end']),
-  invalid: _propTypes.default.bool
-};
 const allowedProps = exports.allowedProps = ['children', 'checked', 'disabled', 'readOnly', 'focused', 'size', 'labelPlacement'];

package/lib/Checkbox/index.js

@@ -27,7 +27,6 @@ var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _View = require("@instructure/ui-view/lib/View");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
 var _CheckboxFacade = require("./CheckboxFacade");
 var _ToggleFacade = require("./ToggleFacade");
@@ -35,7 +34,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _dec3, _class, _Checkbox;
+var _dec, _dec2, _class, _Checkbox;
 /*
  * The MIT License (MIT)
  *
@@ -65,7 +64,7 @@ category: components
 tags: toggle, switch
 ---
 **/
-let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Checkbox = class Checkbox extends _react.Component {
+let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Checkbox = class Checkbox extends _react.Component {
   constructor(props) {
     super(props);
     this._defaultId = void 0;
@@ -256,6 +255,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
       /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
       onMouseOut: (0, _createChainedFunction.createChainedFunction)(onMouseOut, this.handleMouseOut),
       ref: this.handleRef,
+      "data-cid": "Checkbox",
       children: (0, _jsxRuntime.jsxs)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.container,
         children: [(0, _jsxRuntime.jsx)("input", {
@@ -281,7 +281,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
       })
     });
   }
-}, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.propTypes = _props.propTypes, _Checkbox.allowedProps = _props.allowedProps, _Checkbox.defaultProps = {
+}, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.allowedProps = _props.allowedProps, _Checkbox.defaultProps = {
   size: 'medium',
   variant: 'simple',
   disabled: false,
@@ -289,5 +289,5 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
   indeterminate: false,
   readOnly: false,
   labelPlacement: 'end'
-}, _Checkbox)) || _class) || _class) || _class);
+}, _Checkbox)) || _class) || _class);
 var _default = exports.default = Checkbox;

package/lib/Checkbox/props.js

@@ -1,13 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
-var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -32,27 +28,4 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  label: _propTypes.default.node.isRequired,
-  id: _propTypes.default.string,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-  defaultChecked: _propTypes.default.bool,
-  checked: (0, _controllable.controllable)(_propTypes.default.bool, 'onChange', 'defaultChecked'),
-  onChange: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  onMouseOver: _propTypes.default.func,
-  onMouseOut: _propTypes.default.func,
-  disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  indeterminate: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  variant: _propTypes.default.oneOf(['simple', 'toggle']),
-  inline: _propTypes.default.bool,
-  labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end']),
-  isRequired: _propTypes.default.bool,
-  inputRef: _propTypes.default.func
-};
 const allowedProps = exports.allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired', 'inputRef'];

package/lib/CheckboxGroup/index.js

@@ -11,11 +11,10 @@ var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElemen
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _Checkbox = require("../Checkbox");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _CheckboxGroup;
+var _dec, _class, _CheckboxGroup;
 /*
  * The MIT License (MIT)
  *
@@ -44,7 +43,7 @@ var _dec, _dec2, _class, _CheckboxGroup;
 category: components
 ---
 **/
-let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_CheckboxGroup = class CheckboxGroup extends _react.Component {
+let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec(_class = (_CheckboxGroup = class CheckboxGroup extends _react.Component {
   constructor(props) {
     super(props);
     this._messagesId = void 0;
@@ -120,14 +119,15 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _withDeterministicId.wit
       vAlign: "top",
       messagesId: this._messagesId,
       elementRef: this.handleRef,
+      "data-cid": "CheckboxGroup",
       children: this.renderChildren()
     });
   }
-}, _CheckboxGroup.displayName = "CheckboxGroup", _CheckboxGroup.componentId = 'CheckboxGroup', _CheckboxGroup.propTypes = _props.propTypes, _CheckboxGroup.allowedProps = _props.allowedProps, _CheckboxGroup.defaultProps = {
+}, _CheckboxGroup.displayName = "CheckboxGroup", _CheckboxGroup.componentId = 'CheckboxGroup', _CheckboxGroup.allowedProps = _props.allowedProps, _CheckboxGroup.defaultProps = {
   disabled: false,
   readOnly: false,
   size: 'medium',
   layout: 'stacked',
   children: null
-}, _CheckboxGroup)) || _class) || _class);
+}, _CheckboxGroup)) || _class);
 var _default = exports.default = CheckboxGroup;

package/lib/CheckboxGroup/props.js

@@ -1,15 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
-var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
-var _Children = require("@instructure/ui-prop-types/lib/Children.js");
-var _Checkbox = require("../Checkbox");
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -34,35 +28,4 @@ var _Checkbox = require("../Checkbox");
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  name: _propTypes.default.string.isRequired,
-  description: _propTypes.default.node.isRequired,
-  /**
-   * value to set on initial render
-   */
-  defaultValue: _propTypes.default.array,
-  /**
-   * the selected values (must be accompanied by an `onChange` prop)
-   */
-  value: (0, _controllable.controllable)(_propTypes.default.array),
-  /**
-   * when used with the `value` prop, the component will not control its own state
-   */
-  onChange: _propTypes.default.func,
-  disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  /**
-   * object with shape: `{
-    text: PropTypes.node,
-    type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-      }`
-   */
-  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-  /**
-   * children of type `Checkbox`
-   */
-  children: _Children.Children.oneOf([_Checkbox.Checkbox]),
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  layout: _propTypes.default.oneOf(['stacked', 'columns', 'inline'])
-};
 const allowedProps = exports.allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'size', 'layout'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "10.26.1",
+  "version": "11.0.0",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,34 +24,31 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1",
-    "@instructure/emotion": "10.26.1",
-    "@instructure/shared-types": "10.26.1",
-    "@instructure/ui-dom-utils": "10.26.1",
-    "@instructure/ui-form-field": "10.26.1",
-    "@instructure/ui-icons": "10.26.1",
-    "@instructure/ui-prop-types": "10.26.1",
-    "@instructure/ui-react-utils": "10.26.1",
-    "@instructure/ui-svg-images": "10.26.1",
-    "@instructure/ui-testable": "10.26.1",
-    "@instructure/ui-utils": "10.26.1",
-    "@instructure/ui-view": "10.26.1",
-    "@instructure/uid": "10.26.1",
-    "keycode": "^2",
-    "prop-types": "^15.8.1"
+    "@instructure/console": "11.0.0",
+    "@instructure/emotion": "11.0.0",
+    "@instructure/shared-types": "11.0.0",
+    "@instructure/ui-dom-utils": "11.0.0",
+    "@instructure/ui-form-field": "11.0.0",
+    "@instructure/ui-icons": "11.0.0",
+    "@instructure/ui-react-utils": "11.0.0",
+    "@instructure/ui-svg-images": "11.0.0",
+    "@instructure/ui-utils": "11.0.0",
+    "@instructure/ui-view": "11.0.0",
+    "@instructure/uid": "11.0.0",
+    "keycode": "^2"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1",
-    "@instructure/ui-babel-preset": "10.26.1",
-    "@instructure/ui-color-utils": "10.26.1",
-    "@instructure/ui-themes": "10.26.1",
+    "@instructure/ui-axe-check": "11.0.0",
+    "@instructure/ui-babel-preset": "11.0.0",
+    "@instructure/ui-color-utils": "11.0.0",
+    "@instructure/ui-themes": "11.0.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18"
+    "react": ">=18 <=19"
   },
   "publishConfig": {
     "access": "public"

package/src/Checkbox/CheckboxFacade/index.tsx

@@ -32,7 +32,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { CheckboxFacadeProps } from './props'
 
 /**
@@ -44,7 +44,6 @@ parent: Checkbox
 class CheckboxFacade extends Component<CheckboxFacadeProps> {
   static readonly componentId = 'CheckboxFacade'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     checked: false,