@instructure/ui-checkbox 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-checkbox
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/Checkbox/v1/CheckboxFacade/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _CheckboxFacade, _SVGIcon, _IconCheckMarkSolid;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -36,25 +36,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 parent: Checkbox
 ---
 **/
-let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_CheckboxFacade = class CheckboxFacade extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class CheckboxFacade extends Component {
+  static displayName = "CheckboxFacade";
+  static componentId = 'CheckboxFacade';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    checked: false,
+    focused: false,
+    hovered: false,
+    size: 'medium',
+    indeterminate: false
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
   renderIcon() {
     if (this.props.indeterminate) {
-      return _SVGIcon || (_SVGIcon = _jsx(SVGIcon, {
+      return _jsx(SVGIcon, {
         viewBox: "0 0 1920 1920",
         inline: false,
         children: _jsx("rect", {
@@ -63,38 +68,33 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
           width: "1640",
           height: "280"
         })
-      }));
+      });
     } else if (this.props.checked) {
-      return _IconCheckMarkSolid || (_IconCheckMarkSolid = _jsx(IconCheckMarkSolid, {
+      return _jsx(IconCheckMarkSolid, {
         inline: false
-      }));
+      });
     } else {
       return null;
     }
   }
   render() {
-    const _this$props3 = this.props,
-      children = _this$props3.children,
-      styles = _this$props3.styles;
+    const {
+      children,
+      styles
+    } = this.props;
     return _jsxs("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.checkboxFacade,
+      css: styles?.checkboxFacade,
       ref: this.handleRef,
       children: [_jsx("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        css: styles?.facade,
         "aria-hidden": "true",
         children: this.renderIcon()
       }), _jsx("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.label,
+        css: styles?.label,
         children: children
       })]
     });
   }
-}, _CheckboxFacade.displayName = "CheckboxFacade", _CheckboxFacade.componentId = 'CheckboxFacade', _CheckboxFacade.allowedProps = allowedProps, _CheckboxFacade.defaultProps = {
-  checked: false,
-  focused: false,
-  hovered: false,
-  size: 'medium',
-  indeterminate: false
-}, _CheckboxFacade)) || _class);
+}) || _class);
 export default CheckboxFacade;
 export { CheckboxFacade };

package/es/Checkbox/v1/CheckboxFacade/styles.js

@@ -33,12 +33,14 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const size = props.size,
-    checked = props.checked,
-    focused = props.focused,
-    hovered = props.hovered,
-    indeterminate = props.indeterminate,
-    invalid = props.invalid;
+  const {
+    size,
+    checked,
+    focused,
+    hovered,
+    indeterminate,
+    invalid
+  } = props;
   const isChecked = checked || indeterminate;
   const sizeVariants = {
     small: {

package/es/Checkbox/v1/CheckboxFacade/theme.js

@@ -28,12 +28,13 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0;
-  const colors = theme.colors,
-    borders = theme.borders,
-    spacing = theme.spacing,
-    typography = theme.typography,
-    themeName = theme.key;
+  const {
+    colors,
+    borders,
+    spacing,
+    typography,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       focusBorderColor: theme['ic-brand-primary'],
@@ -45,31 +46,31 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey3045,
-    errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.red5782,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.white1010,
-    marginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
-    padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
-    checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
-    checkedBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
-    hoverBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
-    focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
-    focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
-    checkedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.grey125125,
-    labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
-    labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    color: colors?.contrasts?.white1010,
+    borderWidth: borders?.widthSmall,
+    borderColor: colors?.contrasts?.grey3045,
+    errorBorderColor: colors?.contrasts?.red5782,
+    borderRadius: borders?.radiusMedium,
+    background: colors?.contrasts?.white1010,
+    marginRight: spacing?.xSmall,
+    padding: spacing?.xxxSmall,
+    checkedBackground: colors?.contrasts?.grey125125,
+    checkedBorderColor: colors?.contrasts?.grey125125,
+    hoverBorderColor: colors?.contrasts?.grey125125,
+    focusBorderColor: colors?.contrasts?.blue4570,
+    focusBorderWidth: borders?.widthMedium,
+    focusBorderStyle: borders?.style,
+    labelColor: colors?.contrasts?.grey125125,
+    checkedLabelColor: colors?.contrasts?.grey125125,
+    labelFontFamily: typography?.fontFamily,
+    labelFontWeight: typography?.fontWeightNormal,
+    labelLineHeight: typography?.lineHeightCondensed,
     facadeSizeSmall: '1rem',
     facadeSizeMedium: '1.25rem',
     facadeSizeLarge: '1.75rem',
-    labelFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    labelFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
+    labelFontSizeSmall: typography?.fontSizeSmall,
+    labelFontSizeMedium: typography?.fontSizeMedium,
+    labelFontSizeLarge: typography?.fontSizeLarge,
     iconSizeSmall: '0.625rem',
     iconSizeMedium: '0.75rem',
     iconSizeLarge: '1rem'

package/es/Checkbox/v1/ToggleFacade/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _ToggleFacade;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -35,72 +35,74 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 parent: Checkbox
 ---
 **/
-let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ToggleFacade = class ToggleFacade extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ToggleFacade extends Component {
+  static displayName = "ToggleFacade";
+  static componentId = 'ToggleFacade';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    checked: false,
+    focused: false,
+    size: 'medium',
+    disabled: false,
+    readOnly: false,
+    labelPlacement: 'end'
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
   renderIcon() {
-    const _this$props3 = this.props,
-      styles = _this$props3.styles,
-      checked = _this$props3.checked;
+    const {
+      styles,
+      checked
+    } = this.props;
     if (checked) {
       return _jsx(IconCheckSolid, {
-        css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
+        css: styles?.iconSVG
       });
     } else {
       return _jsx(IconXSolid, {
-        css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
+        css: styles?.iconSVG
       });
     }
   }
   renderLabel() {
-    const _this$props4 = this.props,
-      children = _this$props4.children,
-      styles = _this$props4.styles;
+    const {
+      children,
+      styles
+    } = this.props;
     return _jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.label,
+      css: styles?.label,
       children: children
     });
   }
   render() {
-    const _this$props5 = this.props,
-      labelPlacement = _this$props5.labelPlacement,
-      styles = _this$props5.styles;
+    const {
+      labelPlacement,
+      styles
+    } = this.props;
     return _jsxs("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.toggleFacade,
+      css: styles?.toggleFacade,
       ref: this.handleRef,
       children: [(labelPlacement === 'top' || labelPlacement === 'start') && this.renderLabel(), _jsx("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        css: styles?.facade,
         "aria-hidden": "true",
         children: _jsx("span", {
-          css: styles === null || styles === void 0 ? void 0 : styles.icon,
+          css: styles?.icon,
           children: _jsx("span", {
-            css: styles === null || styles === void 0 ? void 0 : styles.iconToggle,
+            css: styles?.iconToggle,
             children: this.renderIcon()
           })
         })
       }), labelPlacement === 'end' && this.renderLabel()]
     });
   }
-}, _ToggleFacade.displayName = "ToggleFacade", _ToggleFacade.componentId = 'ToggleFacade', _ToggleFacade.allowedProps = allowedProps, _ToggleFacade.defaultProps = {
-  checked: false,
-  focused: false,
-  size: 'medium',
-  disabled: false,
-  readOnly: false,
-  labelPlacement: 'end'
-}, _ToggleFacade)) || _class);
+}) || _class);
 export default ToggleFacade;
 export { ToggleFacade };

package/es/Checkbox/v1/ToggleFacade/styles.js

@@ -33,12 +33,14 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const disabled = props.disabled,
-    size = props.size,
-    checked = props.checked,
-    focused = props.focused,
-    labelPlacement = props.labelPlacement,
-    invalid = props.invalid;
+  const {
+    disabled,
+    size,
+    checked,
+    focused,
+    labelPlacement,
+    invalid
+  } = props;
   const labelPlacementVariants = {
     start: {
       facade: {

package/es/Checkbox/v1/ToggleFacade/theme.js

@@ -28,52 +28,53 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12;
-  const colors = theme.colors,
-    borders = theme.borders,
-    forms = theme.forms,
-    shadows = theme.shadows,
-    spacing = theme.spacing,
-    typography = theme.typography,
-    themeName = theme.key;
+  const {
+    colors,
+    borders,
+    forms,
+    shadows,
+    spacing,
+    typography,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       focusOutlineColor: theme['ic-brand-primary'],
       labelColor: theme['ic-brand-font-color-dark']
     },
     'canvas-high-contrast': {
-      background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-      borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125
+      background: colors?.contrasts?.grey125125,
+      borderColor: colors?.contrasts?.grey125125
     }
   };
   const componentVariables = {
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
-    errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111,
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey3045,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    color: colors?.contrasts?.white1010,
+    errorBorderColor: colors?.contrasts?.red5782,
+    background: colors?.contrasts?.grey1111,
+    borderColor: colors?.contrasts?.grey3045,
+    borderWidth: borders?.widthSmall,
     borderRadius: '4rem',
-    marginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    marginStart: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    marginVertical: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
-    checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.green4570,
-    uncheckedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
-    checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.green5782,
-    focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.blue4570,
-    focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    toggleBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.white1010,
-    toggleShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth1,
-    toggleSize: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
-    labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey125125,
-    labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
-    labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
-    labelFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    labelFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
-    uncheckedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey5782,
-    checkedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.green5782
+    marginEnd: spacing?.small,
+    marginStart: spacing?.small,
+    marginVertical: spacing?.xSmall,
+    checkedBackground: colors?.contrasts?.green4570,
+    uncheckedIconColor: colors?.contrasts?.grey125125,
+    checkedIconColor: colors?.contrasts?.green5782,
+    focusOutlineColor: colors?.contrasts?.blue4570,
+    focusBorderWidth: borders?.widthMedium,
+    focusBorderStyle: borders?.style,
+    toggleBackground: colors?.contrasts?.white1010,
+    toggleShadow: shadows?.depth1,
+    toggleSize: forms?.inputHeightSmall,
+    labelColor: colors?.contrasts?.grey125125,
+    labelFontFamily: typography?.fontFamily,
+    labelFontWeight: typography?.fontWeightNormal,
+    labelLineHeight: typography?.lineHeightCondensed,
+    labelFontSizeSmall: typography?.fontSizeSmall,
+    labelFontSizeMedium: typography?.fontSizeMedium,
+    labelFontSizeLarge: typography?.fontSizeLarge,
+    uncheckedIconBorderColor: colors?.contrasts?.grey5782,
+    checkedIconBorderColor: colors?.contrasts?.green5782
   };
   return {
     ...componentVariables,