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

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

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.CheckboxGroup = void 0;
 var _react = require("react");
-var _FormFieldGroup = require("@instructure/ui-form-field/lib/FormFieldGroup");
+var _v11_ = require("@instructure/ui-form-field/v11_6");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 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 _Checkbox = require("../Checkbox");
+var _v = require("../../Checkbox/v1");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _CheckboxGroup;
@@ -92,7 +92,7 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _withDeterministicId.wit
       disabled = _this$props.disabled,
       readOnly = _this$props.readOnly;
     return _react.Children.map(children, child => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Checkbox.Checkbox])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_v.Checkbox])) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
           key: `${child.props.name}`,
           name,
@@ -111,9 +111,9 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _withDeterministicId.wit
     });
   }
   render() {
-    return (0, _jsxRuntime.jsx)(_FormFieldGroup.FormFieldGroup, {
+    return (0, _jsxRuntime.jsx)(_v11_.FormFieldGroup, {
       ...(0, _omitProps.omitProps)(this.props, CheckboxGroup.allowedProps),
-      ...(0, _pickProps.pickProps)(this.props, _FormFieldGroup.FormFieldGroup.allowedProps),
+      ...(0, _pickProps.pickProps)(this.props, _v11_.FormFieldGroup.allowedProps),
       description: this.props.description,
       rowSpacing: "small",
       vAlign: "top",

package/lib/CheckboxGroup/v2/index.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CheckboxGroup = void 0;
+var _react = require("react");
+var _latest = require("@instructure/ui-form-field/latest");
+var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+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 _v = require("../../Checkbox/v2");
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+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.
+ */
+/**
+---
+category: components
+---
+**/
+let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec(_class = (_CheckboxGroup = class CheckboxGroup extends _react.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 _react.Children.map(children, child => {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_v.Checkbox])) {
+        return (0, _safeCloneElement.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 (0, _jsxRuntime.jsx)(_latest.FormFieldGroup, {
+      ...(0, _omitProps.omitProps)(this.props, CheckboxGroup.allowedProps),
+      ...(0, _pickProps.pickProps)(this.props, _latest.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 = _props.allowedProps, _CheckboxGroup.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  size: 'medium',
+  layout: 'stacked',
+  children: null
+}, _CheckboxGroup)) || _class);
+var _default = exports.default = CheckboxGroup;

package/lib/CheckboxGroup/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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 = exports.allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'size', 'layout'];

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

@@ -6,26 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
-    return _Checkbox.Checkbox;
+    return _v.Checkbox;
   }
 });
 Object.defineProperty(exports, "CheckboxFacade", {
   enumerable: true,
   get: function () {
-    return _Checkbox.CheckboxFacade;
+    return _v.CheckboxFacade;
   }
 });
 Object.defineProperty(exports, "CheckboxGroup", {
   enumerable: true,
   get: function () {
-    return _CheckboxGroup.CheckboxGroup;
+    return _v2.CheckboxGroup;
   }
 });
 Object.defineProperty(exports, "ToggleFacade", {
   enumerable: true,
   get: function () {
-    return _Checkbox.ToggleFacade;
+    return _v.ToggleFacade;
   }
 });
-var _Checkbox = require("./Checkbox");
-var _CheckboxGroup = require("./CheckboxGroup");
+var _v = require("../Checkbox/v1");
+var _v2 = require("../CheckboxGroup/v1");

package/lib/exports/b.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _v.Checkbox;
+  }
+});
+Object.defineProperty(exports, "CheckboxFacade", {
+  enumerable: true,
+  get: function () {
+    return _v.CheckboxFacade;
+  }
+});
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _v2.CheckboxGroup;
+  }
+});
+Object.defineProperty(exports, "ToggleFacade", {
+  enumerable: true,
+  get: function () {
+    return _v.ToggleFacade;
+  }
+});
+var _v = require("../Checkbox/v2");
+var _v2 = require("../CheckboxGroup/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,27 +16,27 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "keycode": "^2",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-form-field": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-svg-images": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0",
-    "@instructure/uid": "11.6.0",
-    "@instructure/ui-icons": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-form-field": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-svg-images": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/uid": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -46,17 +46,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Checkbox/{CheckboxFacade → v1/CheckboxFacade}/index.tsx

@@ -27,7 +27,7 @@ import { Component } from 'react'
 import { SVGIcon } from '@instructure/ui-svg-images'
 import { IconCheckMarkSolid } from '@instructure/ui-icons'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Checkbox/{CheckboxFacade → v1/CheckboxFacade}/styles.ts

@@ -87,7 +87,9 @@ const generateStyle = (
       boxSizing: 'border-box',
       flexShrink: 0,
       transition: 'all 0.2s',
-      border: `${componentTheme.borderWidth} solid ${invalid ? componentTheme.errorBorderColor : componentTheme.borderColor}`,
+      border: `${componentTheme.borderWidth} solid ${
+        invalid ? componentTheme.errorBorderColor : componentTheme.borderColor
+      }`,
       borderRadius: componentTheme.borderRadius,
       marginInlineEnd: componentTheme.marginRight,
       marginInlineStart: '0',

package/src/Checkbox/{ToggleFacade → v1/ToggleFacade}/index.tsx

@@ -26,7 +26,7 @@ import { Component } from 'react'
 
 import { IconCheckSolid, IconXSolid } from '@instructure/ui-icons'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Checkbox/{index.tsx → v1/index.tsx}

@@ -25,14 +25,14 @@
 import { Component } from 'react'
 import keycode from 'keycode'
 
-import { FormFieldMessages } from '@instructure/ui-form-field'
+import { FormFieldMessages } from '@instructure/ui-form-field/v11_6'
 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'
+import { View } from '@instructure/ui-view/v11_6'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import { CheckboxFacade } from './CheckboxFacade'
 import { ToggleFacade } from './ToggleFacade'

package/src/Checkbox/{props.ts → v1/props.ts}

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { FormMessage } from '@instructure/ui-form-field'
+import type { FormMessage } from '@instructure/ui-form-field/v11_6'
 import type {
   CheckboxFacadeTheme,
   OtherHTMLAttributes,

package/src/Checkbox/{styles.ts → v1/styles.ts}

@@ -49,7 +49,7 @@ const generateStyle = (
       paddingLeft: componentTheme.checkErrorInsetWidth
     },
     indentedToggleError: {
-      paddingLeft: componentTheme.toggleErrorInsetWidth,
+      paddingLeft: componentTheme.toggleErrorInsetWidth
     },
     checkbox: {
       label: 'checkbox',

package/src/Checkbox/{theme.ts → v1/theme.ts}

@@ -35,7 +35,7 @@ const generateComponentTheme = (theme: Theme): any => {
   const componentVariables: any = {
     requiredInvalidColor: colors?.contrasts?.red5782,
     toggleErrorInsetWidth: `calc(${forms?.inputHeightSmall}*1.5 + ${spacing?.small})`,
-    checkErrorInsetWidth: `calc(1.25em + ${spacing?.xSmall})`,
+    checkErrorInsetWidth: `calc(1.25em + ${spacing?.xSmall})`
   }
 
   return {

package/src/Checkbox/v2/CheckboxFacade/index.tsx

@@ -0,0 +1,113 @@
+/*
+ * 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 {
+  CheckInstUIIcon,
+  MinusInstUIIcon,
+  renderIconWithProps
+} from '@instructure/ui-icons'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { CheckboxFacadeProps } from './props'
+
+/**
+---
+parent: Checkbox
+---
+**/
+@withStyle(generateStyle, 'Checkbox')
+class CheckboxFacade extends Component<CheckboxFacadeProps> {
+  static readonly componentId = 'CheckboxFacade'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    checked: false,
+    disabled: false,
+    readOnly: false,
+    focused: false,
+    hovered: false,
+    size: 'medium',
+    indeterminate: false
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  renderIcon() {
+    const { disabled, readOnly, indeterminate, checked } = this.props
+
+    const getIconColor = () => {
+      if (disabled) {
+        return 'disabledBaseColor'
+      }
+      if (readOnly) {
+        return 'baseColor'
+      }
+      return 'inverseColor'
+    }
+
+    const iconColor = getIconColor()
+
+    if (indeterminate) {
+      return renderIconWithProps(MinusInstUIIcon, 'sm', iconColor)
+    } else if (checked) {
+      return renderIconWithProps(CheckInstUIIcon, 'sm', iconColor)
+    } else {
+      return null
+    }
+  }
+
+  render() {
+    const { children, styles } = this.props
+
+    return (
+      <span css={styles?.checkboxFacade} ref={this.handleRef}>
+        <span css={styles?.facade} aria-hidden="true">
+          {this.renderIcon()}
+        </span>
+        <span css={styles?.label}>{children}</span>
+      </span>
+    )
+  }
+}
+
+export default CheckboxFacade
+export { CheckboxFacade }

package/src/Checkbox/v2/CheckboxFacade/props.ts

@@ -0,0 +1,67 @@
+/*
+ * 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 type { CheckboxFacadeTheme } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+
+type CheckboxFacadeOwnProps = {
+  children: React.ReactNode
+  checked?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  focused?: boolean
+  hovered?: boolean
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * Visual state showing that child checkboxes are a combination of checked and unchecked
+   */
+  indeterminate?: boolean
+  /**
+   * Indicate if the parent component (`Checkbox`) is invalid to set the style accordingly.
+   */
+  invalid?: boolean
+}
+
+type PropKeys = keyof CheckboxFacadeOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type CheckboxFacadeProps = CheckboxFacadeOwnProps &
+  WithStyleProps<CheckboxFacadeTheme, CheckboxFacadeStyle>
+
+type CheckboxFacadeStyle = ComponentStyle<'checkboxFacade' | 'facade' | 'label'>
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'checked',
+  'disabled',
+  'readOnly',
+  'focused',
+  'hovered',
+  'size',
+  'indeterminate',
+  'invalid'
+]
+
+export type { CheckboxFacadeProps, CheckboxFacadeStyle }
+export { allowedProps }