@instructure/ui-checkbox 11.6.0 → 11.6.1-snapshot-129

package/es/Checkbox/v2/index.js

@@ -0,0 +1,289 @@
+var _dec, _dec2, _class, _Checkbox;
+/*
+ * 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 { Component } from 'react';
+import keycode from 'keycode';
+import { FormFieldMessages } from '@instructure/ui-form-field/latest';
+import { createChainedFunction } from '@instructure/ui-utils';
+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/latest';
+import { withStyle } from '@instructure/emotion';
+import { CheckboxFacade } from "./CheckboxFacade/index.js";
+import { ToggleFacade } from "./ToggleFacade/index.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+tags: toggle, switch
+---
+**/
+let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_Checkbox = class Checkbox extends Component {
+  constructor(props) {
+    super(props);
+    this._defaultId = void 0;
+    this._input = null;
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.handleInputRef = el => {
+      this._input = el;
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(el);
+      }
+    };
+    this.handleChange = e => {
+      const _this$props = this.props,
+        onChange = _this$props.onChange,
+        disabled = _this$props.disabled,
+        checked = _this$props.checked,
+        readOnly = _this$props.readOnly;
+      if (disabled || readOnly) {
+        e.preventDefault();
+        return;
+      }
+      if (typeof checked === 'undefined') {
+        this.setState({
+          checked: !this.state.checked
+        });
+      }
+      if (typeof onChange === 'function') {
+        onChange(e);
+      }
+    };
+    this.handleKeyDown = e => {
+      if (this.props.variant === 'toggle' && e.keyCode === keycode.codes.enter) {
+        this._input && this._input.click();
+        e.preventDefault();
+      }
+    };
+    this.handleFocus = () => {
+      this.setState({
+        focused: true
+      });
+    };
+    this.handleBlur = () => {
+      this.setState({
+        focused: false
+      });
+    };
+    this.handleMouseOver = () => {
+      !this.props.disabled && this.setState({
+        hovered: true
+      });
+    };
+    this.handleMouseOut = () => {
+      this.setState({
+        hovered: false
+      });
+    };
+    this.state = {
+      focused: false,
+      hovered: false,
+      checked: typeof props.checked === 'undefined' ? !!props.defaultChecked : void 0
+    };
+    if (typeof props.checked === 'undefined') {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'checked' does not exist on type 'Readonl... Remove this comment to see the full error message
+      this.state.checked = !!props.defaultChecked;
+    }
+    this._defaultId = props.deterministicId();
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    if (this._input) {
+      this._input.indeterminate = this.props.indeterminate;
+    }
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props3;
+    if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
+      this._input.indeterminate = this.props.indeterminate || false;
+    }
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+  }
+  get id() {
+    return this.props.id || this._defaultId;
+  }
+  get checked() {
+    return typeof this.props.checked === 'undefined' ? this.state.checked : this.props.checked;
+  }
+  get focused() {
+    return isActiveElement(this._input);
+  }
+  get isError() {
+    var _this$props$messages;
+    return !!((_this$props$messages = this.props.messages) !== null && _this$props$messages !== void 0 && _this$props$messages.find(m => m.type === 'error' || m.type === 'newError'));
+  }
+  get invalid() {
+    var _this$props$messages2;
+    return !!((_this$props$messages2 = this.props.messages) !== null && _this$props$messages2 !== void 0 && _this$props$messages2.find(m => m.type === 'newError' || m.type === 'error'));
+  }
+  focus() {
+    this._input && this._input.focus();
+  }
+  renderFacade() {
+    const _this$props4 = this.props,
+      size = _this$props4.size,
+      disabled = _this$props4.disabled,
+      variant = _this$props4.variant,
+      label = _this$props4.label,
+      readOnly = _this$props4.readOnly,
+      indeterminate = _this$props4.indeterminate,
+      labelPlacement = _this$props4.labelPlacement,
+      themeOverride = _this$props4.themeOverride,
+      isRequired = _this$props4.isRequired,
+      styles = _this$props4.styles;
+    const _this$state = this.state,
+      hovered = _this$state.hovered,
+      focused = _this$state.focused;
+    error(!(variant === 'simple' && labelPlacement !== 'end'), `[Checkbox] The \`simple\` variant does not support the \`labelPlacement\` property.  Use the \`toggle\` variant instead.`);
+    if (variant === 'toggle') {
+      return _jsxs(ToggleFacade, {
+        disabled: disabled,
+        size: size,
+        hovered: hovered,
+        focused: focused,
+        checked: this.checked,
+        readOnly: readOnly,
+        labelPlacement: labelPlacement,
+        themeOverride: themeOverride,
+        invalid: this.invalid,
+        children: [label, isRequired && label && _jsxs("span", {
+          css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
+          "aria-hidden": true,
+          children: [' ', "*"]
+        })]
+      });
+    } else {
+      return _jsxs(CheckboxFacade, {
+        disabled: disabled,
+        size: size,
+        hovered: hovered,
+        focused: focused,
+        checked: this.checked,
+        readOnly: readOnly,
+        indeterminate: indeterminate,
+        themeOverride: themeOverride,
+        invalid: this.invalid,
+        children: [label, isRequired && label && _jsxs("span", {
+          css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
+          "aria-hidden": true,
+          children: [' ', "*"]
+        })]
+      });
+    }
+  }
+  renderMessages() {
+    const _this$props5 = this.props,
+      messages = _this$props5.messages,
+      styles = _this$props5.styles,
+      variant = _this$props5.variant;
+    return messages && messages.length > 0 ? _jsx(View, {
+      display: "block",
+      margin: "small 0 0",
+      css: this.isError && (variant === 'toggle' ? styles === null || styles === void 0 ? void 0 : styles.indentedToggleError : styles === null || styles === void 0 ? void 0 : styles.indentedError),
+      children: _jsx(FormFieldMessages, {
+        messages: messages
+      })
+    }) : null;
+  }
+  render() {
+    const _this$props6 = this.props,
+      disabled = _this$props6.disabled,
+      readOnly = _this$props6.readOnly,
+      value = _this$props6.value,
+      onKeyDown = _this$props6.onKeyDown,
+      onFocus = _this$props6.onFocus,
+      onBlur = _this$props6.onBlur,
+      onMouseOver = _this$props6.onMouseOver,
+      onMouseOut = _this$props6.onMouseOut,
+      indeterminate = _this$props6.indeterminate,
+      variant = _this$props6.variant,
+      styles = _this$props6.styles,
+      isRequired = _this$props6.isRequired;
+    const props = omitProps(this.props, Checkbox.allowedProps);
+    error(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
+    return _jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.checkbox
+      /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+      onMouseOver: createChainedFunction(onMouseOver, this.handleMouseOver)
+      /* 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", {
+          ...props,
+          id: this.id,
+          value: value,
+          type: "checkbox",
+          ref: this.handleInputRef,
+          required: isRequired,
+          disabled: disabled,
+          readOnly: readOnly,
+          "aria-readonly": readOnly ? true : void 0,
+          "aria-checked": indeterminate ? 'mixed' : void 0,
+          css: styles === null || styles === void 0 ? void 0 : styles.input,
+          onClickCapture: e => {
+            if (readOnly) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          },
+          onChange: this.handleChange,
+          onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
+          onFocus: createChainedFunction(onFocus, this.handleFocus),
+          onBlur: createChainedFunction(onBlur, this.handleBlur),
+          checked: this.checked
+        }), _jsxs("label", {
+          htmlFor: this.id,
+          css: styles === null || styles === void 0 ? void 0 : styles.control,
+          onMouseDown: e => {
+            var _this$_input;
+            e.preventDefault();
+            (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
+          },
+          children: [this.renderFacade(), this.renderMessages()]
+        })]
+      })
+    });
+  }
+}, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.allowedProps = allowedProps, _Checkbox.defaultProps = {
+  size: 'medium',
+  variant: 'simple',
+  disabled: false,
+  inline: false,
+  indeterminate: false,
+  readOnly: false,
+  labelPlacement: 'end'
+}, _Checkbox)) || _class) || _class);
+export default Checkbox;
+export { Checkbox, CheckboxFacade, ToggleFacade };

package/es/Checkbox/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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 = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired', 'inputRef'];
+export { allowedProps };

package/es/Checkbox/v2/styles.js

@@ -0,0 +1,102 @@
+/*
+ * 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} sharedTokens Shared theme token object
+ * @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) => {
+  var _sizeVariants;
+  const inline = props.inline,
+    size = props.size,
+    variant = props.variant;
+
+  // toggleFullWidth calculation based on Toggle facade width (1.625rem * 1.5) and the marginInlineEnd (0.75rem)
+  const toggleFullWidth = `calc(1.625rem * 1.5 + 0.75rem)`;
+  const sizeVariants = {
+    small: {
+      paddingLeft: variant === 'toggle' ? toggleFullWidth : `calc(${componentTheme.gap} + ${componentTheme.controlSizeSm})`
+    },
+    medium: {
+      paddingLeft: variant === 'toggle' ? toggleFullWidth : `calc(${componentTheme.gap} + ${componentTheme.controlSizeMd})`
+    },
+    large: {
+      paddingLeft: variant === 'toggle' ? toggleFullWidth : `calc(${componentTheme.gap} + ${componentTheme.controlSizeLg})`
+    }
+  };
+  const sizeVariant = (_sizeVariants = sizeVariants[size]) !== null && _sizeVariants !== void 0 ? _sizeVariants : sizeVariants.medium;
+  return {
+    requiredInvalid: {
+      color: componentTheme.asteriskColor
+    },
+    indentedError: {
+      paddingLeft: sizeVariant.paddingLeft
+    },
+    indentedToggleError: {
+      paddingLeft: sizeVariant.paddingLeft
+    },
+    checkbox: {
+      label: 'checkbox',
+      position: 'relative',
+      width: '100%',
+      ...(inline && {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        width: 'auto'
+      })
+    },
+    // this container is added to reduce the clickable area of the checkbox to the actual checkbox and label
+    container: {
+      width: 'fit-content'
+    },
+    input: {
+      label: 'checkbox__input',
+      padding: 0,
+      margin: 0,
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      width: 'auto',
+      position: 'absolute',
+      top: 0,
+      insetInlineStart: 0,
+      insetInlineEnd: 'auto',
+      opacity: 0.0001 /* selenium cannot find fully transparent elements */
+    },
+    control: {
+      label: 'checkbox__control',
+      all: 'initial',
+      display: 'block',
+      direction: 'inherit',
+      textAlign: 'start'
+    }
+  };
+};
+export default generateStyle;

package/es/CheckboxGroup/{index.js → v1/index.js}

@@ -24,9 +24,9 @@ var _dec, _class, _CheckboxGroup;
  */
 
 import { Children, Component } from 'react';
-import { FormFieldGroup } from '@instructure/ui-form-field';
+import { FormFieldGroup } from '@instructure/ui-form-field/v11_6';
 import { matchComponentTypes, safeCloneElement, pickProps, omitProps, withDeterministicId } from '@instructure/ui-react-utils';
-import { Checkbox } from "../Checkbox/index.js";
+import { Checkbox } from "../../Checkbox/v1/index.js";
 import { allowedProps } from "./props.js";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**

package/es/CheckboxGroup/v2/index.js

@@ -0,0 +1,125 @@
+var _dec, _class, _CheckboxGroup;
+/*
+ * 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 { Children, Component } from 'react';
+import { FormFieldGroup } from '@instructure/ui-form-field/latest';
+import { matchComponentTypes, safeCloneElement, pickProps, omitProps, withDeterministicId } from '@instructure/ui-react-utils';
+import { Checkbox } from "../../Checkbox/v2/index.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+let CheckboxGroup = (_dec = withDeterministicId(), _dec(_class = (_CheckboxGroup = class CheckboxGroup extends Component {
+  constructor(props) {
+    super(props);
+    this._messagesId = void 0;
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.handleChange = e => {
+      const newValue = this.value;
+      if (this.props.disabled || this.props.readOnly) {
+        e.preventDefault();
+        return;
+      }
+      if (e.target.checked) {
+        newValue.push(e.target.value);
+      } else {
+        newValue.splice(newValue.indexOf(e.target.value), 1);
+      }
+      if (typeof this.props.value === 'undefined') {
+        this.setState({
+          value: newValue
+        });
+      }
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(newValue);
+      }
+    };
+    if (typeof props.value === 'undefined') {
+      this.state = {
+        value: props.defaultValue || []
+      };
+    }
+    this._messagesId = props.deterministicId();
+  }
+  get hasMessages() {
+    return this.props.messages && this.props.messages.length > 0;
+  }
+  get value() {
+    return typeof this.props.value === 'undefined' ? [...this.state.value] : [...this.props.value];
+  }
+  renderChildren() {
+    const _this$props = this.props,
+      children = _this$props.children,
+      name = _this$props.name,
+      size = _this$props.size,
+      disabled = _this$props.disabled,
+      readOnly = _this$props.readOnly;
+    return Children.map(children, child => {
+      if (matchComponentTypes(child, [Checkbox])) {
+        return safeCloneElement(child, {
+          key: `${child.props.name}`,
+          name,
+          label: child.props.label,
+          disabled: disabled || child.props.disabled,
+          readOnly: readOnly || child.props.readOnly,
+          size,
+          checked: this.value.indexOf(child.props.value) > -1,
+          onChange: this.handleChange,
+          width: child.props.width || 'auto',
+          'aria-describedby': this.hasMessages ? this._messagesId : void 0
+        });
+      } else {
+        return child;
+      }
+    });
+  }
+  render() {
+    return _jsx(FormFieldGroup, {
+      ...omitProps(this.props, CheckboxGroup.allowedProps),
+      ...pickProps(this.props, FormFieldGroup.allowedProps),
+      description: this.props.description,
+      rowSpacing: "small",
+      vAlign: "top",
+      messagesId: this._messagesId,
+      elementRef: this.handleRef,
+      "data-cid": "CheckboxGroup",
+      children: this.renderChildren()
+    });
+  }
+}, _CheckboxGroup.displayName = "CheckboxGroup", _CheckboxGroup.componentId = 'CheckboxGroup', _CheckboxGroup.allowedProps = allowedProps, _CheckboxGroup.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  size: 'medium',
+  layout: 'stacked',
+  children: null
+}, _CheckboxGroup)) || _class);
+export default CheckboxGroup;
+export { CheckboxGroup };

package/es/CheckboxGroup/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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 = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'size', 'layout'];
+export { allowedProps };

package/es/{index.js → exports/a.js}

@@ -21,5 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Checkbox, CheckboxFacade, ToggleFacade } from "./Checkbox/index.js";
-export { CheckboxGroup } from "./CheckboxGroup/index.js";
+export { Checkbox, CheckboxFacade, ToggleFacade } from "../Checkbox/v1/index.js";
+export { CheckboxGroup } from "../CheckboxGroup/v1/index.js";

package/es/exports/b.js

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+export { Checkbox, CheckboxFacade, ToggleFacade } from "../Checkbox/v2/index.js";
+export { CheckboxGroup } from "../CheckboxGroup/v2/index.js";

package/lib/Checkbox/{CheckboxFacade → v1/CheckboxFacade}/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.CheckboxFacade = void 0;
 var _react = require("react");
 var _SVGIcon2 = require("@instructure/ui-svg-images/lib/SVGIcon");
-var _IconCheckMarkSolid2 = require("@instructure/ui-icons/lib/IconCheckMarkSolid.js");
+var _IconCheckMarkSolid2 = require("@instructure/ui-icons/lib/generated/IconCheckMarkSolid.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -42,7 +42,7 @@ var _dec, _class, _CheckboxFacade, _SVGIcon, _IconCheckMarkSolid;
 parent: Checkbox
 ---
 **/
-let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_CheckboxFacade = class CheckboxFacade extends _react.Component {
+let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_CheckboxFacade = class CheckboxFacade extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;

package/lib/Checkbox/{ToggleFacade → v1/ToggleFacade}/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ToggleFacade = void 0;
 var _react = require("react");
-var _IconCheckSolid = require("@instructure/ui-icons/lib/IconCheckSolid.js");
-var _IconXSolid = require("@instructure/ui-icons/lib/IconXSolid.js");
+var _IconCheckSolid = require("@instructure/ui-icons/lib/generated/IconCheckSolid.js");
+var _IconXSolid = require("@instructure/ui-icons/lib/generated/IconXSolid.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -42,7 +42,7 @@ var _dec, _class, _ToggleFacade;
 parent: Checkbox
 ---
 **/
-let ToggleFacade = exports.ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ToggleFacade = class ToggleFacade extends _react.Component {
+let ToggleFacade = exports.ToggleFacade = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_ToggleFacade = class ToggleFacade extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;