@instructure/ui-checkbox 11.7.8 → 11.7.9-pr-snapshot-1792147648392

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.9-pr-snapshot-1792147648392](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-pr-snapshot-1792147648392) (2026-10-16)
+
+### Build System
+
+* **many:** replace babel with swc ([7e36c54](https://github.com/instructure/instructure-ui/commit/7e36c54d240b4fa483801c03ab18e7f860f561e2))
+
+### BREAKING CHANGES
+
+* **many:** `@instructure/ui-babel-preset` and
+  `@instructure/browserslist-config-instui` are removed and will no longer be
+  published. Packages depend on `@swc/helpers` instead of `@babel/runtime`.
+
+
 ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
 
 ### Bug Fixes

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

@@ -1,28 +1,5 @@
-var _dec, _class;
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Component } from 'react';
 import { SVGIcon } from '@instructure/ui-svg-images';
 import { IconCheckMarkSolid } from '@instructure/ui-icons';
@@ -30,71 +7,77 @@ import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles.js';
 import generateComponentTheme from './theme.js';
 import { allowedProps } from './props.js';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/**
----
-parent: Checkbox
----
-**/
-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() {
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.();
-  }
-  renderIcon() {
-    if (this.props.indeterminate) {
-      return _jsx(SVGIcon, {
-        viewBox: "0 0 1920 1920",
-        inline: false,
-        children: _jsx("rect", {
-          x: "140",
-          y: "820",
-          width: "1640",
-          height: "280"
-        })
-      });
-    } else if (this.props.checked) {
-      return _jsx(IconCheckMarkSolid, {
-        inline: false
-      });
-    } else {
-      return null;
+class CheckboxFacade extends Component {
+    static{
+        this.displayName = 'CheckboxFacade';
+    }
+    static{
+        this.componentId = 'CheckboxFacade';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            checked: false,
+            focused: false,
+            hovered: false,
+            size: 'medium',
+            indeterminate: false
+        };
+    }
+    componentDidMount() {
+        this.props.makeStyles?.();
+    }
+    componentDidUpdate() {
+        this.props.makeStyles?.();
+    }
+    renderIcon() {
+        if (this.props.indeterminate) {
+            return /*#__PURE__*/ _jsx(SVGIcon, {
+                viewBox: "0 0 1920 1920",
+                inline: false,
+                children: /*#__PURE__*/ _jsx("rect", {
+                    x: "140",
+                    y: "820",
+                    width: "1640",
+                    height: "280"
+                })
+            });
+        } else if (this.props.checked) {
+            return /*#__PURE__*/ _jsx(IconCheckMarkSolid, {
+                inline: false
+            });
+        } else {
+            return null;
+        }
+    }
+    render() {
+        const { children, styles } = this.props;
+        return /*#__PURE__*/ _jsxs("span", {
+            css: styles?.checkboxFacade,
+            ref: this.handleRef,
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    css: styles?.facade,
+                    "aria-hidden": "true",
+                    children: this.renderIcon()
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    css: styles?.label,
+                    children: children
+                })
+            ]
+        });
+    }
+    constructor(...args){
+        super(...args), this.ref = null, this.handleRef = (el)=>{
+            this.ref = el;
+        };
     }
-  }
-  render() {
-    const {
-      children,
-      styles
-    } = this.props;
-    return _jsxs("span", {
-      css: styles?.checkboxFacade,
-      ref: this.handleRef,
-      children: [_jsx("span", {
-        css: styles?.facade,
-        "aria-hidden": "true",
-        children: this.renderIcon()
-      }), _jsx("span", {
-        css: styles?.label,
-        children: children
-      })]
-    });
-  }
-}) || _class);
+}
+CheckboxFacade = _ts_decorate([
+    withStyle(generateStyle, generateComponentTheme)
+], CheckboxFacade);
 export default CheckboxFacade;
-export { CheckboxFacade };
+export { CheckboxFacade };

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

@@ -1,26 +1,9 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-const allowedProps = ['children', 'checked', 'focused', 'hovered', 'size', 'indeterminate'];
-export { allowedProps };
+const allowedProps = [
+    'children',
+    'checked',
+    'focused',
+    'hovered',
+    'size',
+    'indeterminate'
+];
+export { allowedProps };

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

@@ -1,142 +1,101 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * private: true
- * ---
- * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
- */
-const generateStyle = (componentTheme, props) => {
-  const {
-    size,
-    checked,
-    focused,
-    hovered,
-    indeterminate,
-    invalid
-  } = props;
-  const isChecked = checked || indeterminate;
-  const sizeVariants = {
-    small: {
-      label: {
-        fontSize: componentTheme.labelFontSizeSmall
-      },
-      facade: {
-        fontSize: componentTheme.iconSizeSmall,
-        width: componentTheme.facadeSizeSmall,
-        height: componentTheme.facadeSizeSmall
-      }
-    },
-    medium: {
-      label: {
-        fontSize: componentTheme.labelFontSizeMedium
-      },
-      facade: {
-        fontSize: componentTheme.iconSizeMedium,
-        width: componentTheme.facadeSizeMedium,
-        height: componentTheme.facadeSizeMedium
-      }
-    },
-    large: {
-      label: {
-        fontSize: componentTheme.labelFontSizeLarge
-      },
-      facade: {
-        fontSize: componentTheme.iconSizeLarge,
-        width: componentTheme.facadeSizeLarge,
-        height: componentTheme.facadeSizeLarge
-      }
-    }
-  };
-  return {
-    checkboxFacade: {
-      label: 'checkboxFacade',
-      display: 'flex',
-      alignItems: 'flex-start'
-    },
-    facade: {
-      label: 'checkboxFacade__facade',
-      color: componentTheme.color,
-      background: componentTheme.background,
-      position: 'relative',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      boxSizing: 'border-box',
-      flexShrink: 0,
-      transition: 'all 0.2s',
-      border: `${componentTheme.borderWidth} solid ${invalid ? componentTheme.errorBorderColor : componentTheme.borderColor}`,
-      borderRadius: componentTheme.borderRadius,
-      marginInlineEnd: componentTheme.marginRight,
-      marginInlineStart: '0',
-      padding: componentTheme.padding,
-      ...sizeVariants[size].facade,
-      '&::before': {
-        content: '""',
-        position: 'absolute',
-        top: '-0.3125rem',
-        bottom: '-0.3125rem',
-        left: '-0.3125rem',
-        right: '-0.3125rem',
-        boxSizing: 'border-box',
-        borderRadius: `calc(${componentTheme.borderRadius} * 1.5)`,
-        border: `${componentTheme.focusBorderWidth} ${componentTheme.focusBorderStyle} ${componentTheme.focusBorderColor}`,
-        transition: 'all 0.2s',
-        transform: 'scale(0.75)',
-        opacity: 0,
-        pointerEvents: 'none',
-        ...(focused && {
-          transform: 'scale(1)',
-          opacity: 1
-        })
-      },
-      ...(isChecked && {
-        background: componentTheme.checkedBackground,
-        borderColor: componentTheme.checkedBorderColor
-      }),
-      ...(hovered && {
-        borderColor: componentTheme.hoverBorderColor
-      })
-    },
-    label: {
-      label: 'checkboxFacade__label',
-      flex: '1 1 auto',
-      minWidth: '0.0625rem',
-      color: componentTheme.labelColor,
-      fontFamily: componentTheme.labelFontFamily,
-      fontWeight: componentTheme.labelFontWeight,
-      lineHeight: componentTheme.labelLineHeight,
-      ...sizeVariants[size].label,
-      ...(isChecked && {
-        color: componentTheme.checkedLabelColor
-      })
-    }
-  };
+const generateStyle = (componentTheme, props)=>{
+    const { size, checked, focused, hovered, indeterminate, invalid } = props;
+    const isChecked = checked || indeterminate;
+    const sizeVariants = {
+        small: {
+            label: {
+                fontSize: componentTheme.labelFontSizeSmall
+            },
+            facade: {
+                fontSize: componentTheme.iconSizeSmall,
+                width: componentTheme.facadeSizeSmall,
+                height: componentTheme.facadeSizeSmall
+            }
+        },
+        medium: {
+            label: {
+                fontSize: componentTheme.labelFontSizeMedium
+            },
+            facade: {
+                fontSize: componentTheme.iconSizeMedium,
+                width: componentTheme.facadeSizeMedium,
+                height: componentTheme.facadeSizeMedium
+            }
+        },
+        large: {
+            label: {
+                fontSize: componentTheme.labelFontSizeLarge
+            },
+            facade: {
+                fontSize: componentTheme.iconSizeLarge,
+                width: componentTheme.facadeSizeLarge,
+                height: componentTheme.facadeSizeLarge
+            }
+        }
+    };
+    return {
+        checkboxFacade: {
+            label: 'checkboxFacade',
+            display: 'flex',
+            alignItems: 'flex-start'
+        },
+        facade: {
+            label: 'checkboxFacade__facade',
+            color: componentTheme.color,
+            background: componentTheme.background,
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxSizing: 'border-box',
+            flexShrink: 0,
+            transition: 'all 0.2s',
+            border: `${componentTheme.borderWidth} solid ${invalid ? componentTheme.errorBorderColor : componentTheme.borderColor}`,
+            borderRadius: componentTheme.borderRadius,
+            marginInlineEnd: componentTheme.marginRight,
+            marginInlineStart: '0',
+            padding: componentTheme.padding,
+            ...sizeVariants[size].facade,
+            '&::before': {
+                content: '""',
+                position: 'absolute',
+                top: '-0.3125rem',
+                bottom: '-0.3125rem',
+                left: '-0.3125rem',
+                right: '-0.3125rem',
+                boxSizing: 'border-box',
+                borderRadius: `calc(${componentTheme.borderRadius} * 1.5)`,
+                border: `${componentTheme.focusBorderWidth} ${componentTheme.focusBorderStyle} ${componentTheme.focusBorderColor}`,
+                transition: 'all 0.2s',
+                transform: 'scale(0.75)',
+                opacity: 0,
+                pointerEvents: 'none',
+                ...focused && {
+                    transform: 'scale(1)',
+                    opacity: 1
+                }
+            },
+            ...isChecked && {
+                background: componentTheme.checkedBackground,
+                borderColor: componentTheme.checkedBorderColor
+            },
+            ...hovered && {
+                borderColor: componentTheme.hoverBorderColor
+            }
+        },
+        label: {
+            label: 'checkboxFacade__label',
+            flex: '1 1 auto',
+            minWidth: '0.0625rem',
+            color: componentTheme.labelColor,
+            fontFamily: componentTheme.labelFontFamily,
+            fontWeight: componentTheme.labelFontWeight,
+            lineHeight: componentTheme.labelLineHeight,
+            ...sizeVariants[size].label,
+            ...isChecked && {
+                color: componentTheme.checkedLabelColor
+            }
+        }
+    };
 };
-export default generateStyle;
+export default generateStyle;

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

@@ -1,83 +1,48 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = theme => {
-  const {
-    colors,
-    borders,
-    spacing,
-    typography,
-    key: themeName
-  } = theme;
-  const themeSpecificStyle = {
-    canvas: {
-      focusBorderColor: theme['ic-brand-primary'],
-      labelColor: theme['ic-brand-font-color-dark'],
-      checkedLabelColor: theme['ic-brand-font-color-dark'],
-      checkedBackground: theme['ic-brand-font-color-dark'],
-      checkedBorderColor: theme['ic-brand-font-color-dark'],
-      hoverBorderColor: theme['ic-brand-font-color-dark']
-    }
-  };
-  const componentVariables = {
-    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?.fontSizeSmall,
-    labelFontSizeMedium: typography?.fontSizeMedium,
-    labelFontSizeLarge: typography?.fontSizeLarge,
-    iconSizeSmall: '0.625rem',
-    iconSizeMedium: '0.75rem',
-    iconSizeLarge: '1rem'
-  };
-  return {
-    ...componentVariables,
-    ...themeSpecificStyle[themeName]
-  };
+const generateComponentTheme = (theme)=>{
+    const { colors, borders, spacing, typography, key: themeName } = theme;
+    const themeSpecificStyle = {
+        canvas: {
+            focusBorderColor: theme['ic-brand-primary'],
+            labelColor: theme['ic-brand-font-color-dark'],
+            checkedLabelColor: theme['ic-brand-font-color-dark'],
+            checkedBackground: theme['ic-brand-font-color-dark'],
+            checkedBorderColor: theme['ic-brand-font-color-dark'],
+            hoverBorderColor: theme['ic-brand-font-color-dark']
+        }
+    };
+    const componentVariables = {
+        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?.fontSizeSmall,
+        labelFontSizeMedium: typography?.fontSizeMedium,
+        labelFontSizeLarge: typography?.fontSizeLarge,
+        iconSizeSmall: '0.625rem',
+        iconSizeMedium: '0.75rem',
+        iconSizeLarge: '1rem'
+    };
+    return {
+        ...componentVariables,
+        ...themeSpecificStyle[themeName]
+    };
 };
-export default generateComponentTheme;
+export default generateComponentTheme;