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

package/src/Checkbox/v2/props.ts

@@ -0,0 +1,132 @@
+/*
+ * 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 { FormMessage } from '@instructure/ui-form-field/latest'
+import type {
+  CheckboxFacadeTheme,
+  OtherHTMLAttributes,
+  ToggleFacadeTheme
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+
+type CheckboxOwnProps = {
+  label: React.ReactNode
+  id?: string
+  value?: string | number
+  /**
+   * Array of objects with shape: `{
+   *   text: ReactNode,
+   *   type: One of: ['newError', 'error', 'hint', 'success', 'screenreader-only']
+   *   }`
+   */
+  messages?: FormMessage[]
+  /* whether to set the input to checked or not on initial render */
+  defaultChecked?: boolean
+  /**
+   * whether the input is checked or not (must be accompanied by an `onChange` prop)
+   */
+  checked?: boolean // TODO: controllable(PropTypes.bool, 'onChange', 'defaultChecked')
+  /**
+   * when used with the `checked` prop, the component will not control its own state
+   */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
+  onMouseOver?: (e: React.MouseEvent<HTMLInputElement>) => void
+  onMouseOut?: (e: React.MouseEvent<HTMLInputElement>) => void
+  /**
+   * Whether or not to disable the checkbox
+   */
+  disabled?: boolean
+  /**
+   * Works just like disabled but keeps the same styles as if it were active
+   */
+  readOnly?: boolean
+  /**
+   * Visual state showing that child checkboxes are a combination of checked and unchecked
+   */
+  indeterminate?: boolean
+  size?: 'small' | 'medium' | 'large'
+  variant?: 'simple' | 'toggle'
+  inline?: boolean
+  labelPlacement?: 'top' | 'start' | 'end'
+  isRequired?: boolean
+  /**
+   * A function that provides a reference to the actual underlying input element
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
+}
+
+type PropKeys = keyof CheckboxOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type CheckboxProps = CheckboxOwnProps &
+  WithStyleProps<CheckboxFacadeTheme | ToggleFacadeTheme, CheckboxStyle> &
+  OtherHTMLAttributes<CheckboxOwnProps> &
+  WithDeterministicIdProps
+
+type CheckboxStyle = ComponentStyle<
+  | 'checkbox'
+  | 'input'
+  | 'control'
+  | 'container'
+  | 'requiredInvalid'
+  | 'indentedError'
+  | 'indentedToggleError'
+>
+const allowedProps: AllowedPropKeys = [
+  'label',
+  'id',
+  'value',
+  'messages',
+  'defaultChecked',
+  'checked',
+  'onChange',
+  'onKeyDown',
+  'onFocus',
+  'onBlur',
+  'onMouseOver',
+  'onMouseOut',
+  'disabled',
+  'readOnly',
+  'indeterminate',
+  'size',
+  'variant',
+  'inline',
+  'labelPlacement',
+  'isRequired',
+  'inputRef'
+]
+
+type CheckboxState = {
+  focused: boolean
+  hovered: boolean
+  checked?: boolean
+}
+
+export type { CheckboxProps, CheckboxStyle, CheckboxState }
+export { allowedProps }

package/src/Checkbox/v2/styles.ts

@@ -0,0 +1,118 @@
+/*
+ * 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 { CheckboxProps, CheckboxStyle } from './props'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+
+/**
+ * ---
+ * 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: NewComponentTypes['Checkbox'],
+  props: CheckboxProps
+): CheckboxStyle => {
+  const { inline, size, variant } = props
+
+  // 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[size as keyof typeof 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/src/CheckboxGroup/{index.tsx → v1/index.tsx}

@@ -24,7 +24,7 @@
 
 import { Children, Component } from 'react'
 
-import { FormFieldGroup } from '@instructure/ui-form-field'
+import { FormFieldGroup } from '@instructure/ui-form-field/v11_6'
 import {
   matchComponentTypes,
   safeCloneElement,
@@ -33,7 +33,7 @@ import {
   withDeterministicId
 } from '@instructure/ui-react-utils'
 
-import { Checkbox } from '../Checkbox'
+import { Checkbox } from '../../Checkbox/v1'
 
 import { allowedProps } from './props'
 import type {

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

@@ -23,12 +23,12 @@
  */
 
 import { type InputHTMLAttributes } from 'react'
-import type { FormMessage } from '@instructure/ui-form-field'
+import type { FormMessage } from '@instructure/ui-form-field/v11_6'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
-import { Checkbox } from '../Checkbox'
-import type { CheckboxProps } from '../Checkbox/props'
+import { Checkbox } from '../../Checkbox/v1'
+import type { CheckboxProps } from '../../Checkbox/v1/props'
 
 type CheckboxChild = React.ComponentElement<CheckboxProps, Checkbox>
 

package/src/CheckboxGroup/v2/README.md

@@ -0,0 +1,111 @@
+---
+describes: CheckboxGroup
+---
+
+A `<CheckboxGroup/>` is a group of [Checkbox](Checkbox) components that share the same name. You can
+set an array `value` for the entire group and it will handle setting the `checked` and `name` props for you.
+The Checkbox components can be rendered vertically or horizontally using the `layout` property.
+
+```js
+---
+type: example
+---
+<FormFieldGroup description={<ScreenReaderContent>CheckboxGroup examples</ScreenReaderContent>}>
+  <CheckboxGroup name="sports"
+    onChange={function (value) { console.log(value) }}
+    defaultValue={['football', 'volleyball']}
+    description="Select your favorite sports"
+  >
+    <Checkbox label="Football" value="football" />
+    <Checkbox label="Basketball" value="basketball" />
+    <Checkbox label="Volleyball" value="volleyball" />
+    <Checkbox label="Other" value="other" />
+  </CheckboxGroup>
+  <CheckboxGroup name="sports" size="small"
+    layout="columns"
+    onChange={function (value) { console.log(value) }}
+    defaultValue={['football', 'volleyball']}
+    description="Select your favorite sports"
+  >
+    <Checkbox label="Football" value="football" />
+    <Checkbox label="Basketball" value="basketball" />
+    <Checkbox label="Volleyball" value="volleyball" />
+    <Checkbox label="Other" value="other" />
+  </CheckboxGroup>
+</FormFieldGroup>
+```
+
+The `toggle` variant with `layout` prop set to `inline` and an error message:
+
+```js
+---
+type: example
+---
+<CheckboxGroup
+  name="sports2"
+  layout="inline"
+  messages={[
+    { text: 'Invalid name', type: 'error' }
+  ]}
+  onChange={function (value) { console.log(value) }}
+  defaultValue={['soccer', 'volleyball']}
+  description="I wish to receive score alerts for"
+>
+  <Checkbox label="Football" value="football" variant="toggle" />
+  <Checkbox label="Basketball" value="basketball" variant="toggle" />
+  <Checkbox label="Volleyball" value="volleyball" variant="toggle" />
+  <Checkbox label="Soccer" value="soccer" variant="toggle" />
+</CheckboxGroup>
+```
+
+You can set disable/readonly on a group and it works much the same way as a RadioInputGroup.
+
+A `disabled` CheckboxGroup:
+
+```js
+---
+type: example
+---
+<CheckboxGroup
+  name="sports4"
+  onChange={function (value) { console.log(value) }}
+  defaultValue={['soccer', 'volleyball']}
+  description="I wish to receive score alerts for"
+  disabled
+>
+  <Checkbox label="Football" value="football" variant="toggle" />
+  <Checkbox label="Basketball" value="basketball" variant="toggle" />
+  <Checkbox label="Volleyball" value="volleyball" variant="toggle" />
+  <Checkbox label="Soccer" value="soccer" variant="toggle" />
+</CheckboxGroup>
+```
+
+### Guidelines
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="yes" title="Do">
+    <Figure.Item>Align to the left side of the label</Figure.Item>
+    <Figure.Item>Use when multiple selections are allowed</Figure.Item>
+    <Figure.Item>Use to save space from toggles</Figure.Item>
+    <Figure.Item>Stack vertically if there is more than two options to select</Figure.Item>
+  </Figure>
+  <Figure recommendation="no" title="Don't">
+    <Figure.Item>Run more than two checkboxes horizontally</Figure.Item>
+  </Figure>
+</Guidelines>
+```
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="a11y" title="Accessibility">
+    <Figure.Item>Ensure CheckboxGroups are labeled correctly so screen readers announce what the group of checkboxes are used for</Figure.Item>
+  </Figure>
+</Guidelines>
+```

package/src/CheckboxGroup/v2/index.tsx

@@ -0,0 +1,157 @@
+/*
+ * 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'
+
+import { allowedProps } from './props'
+import type {
+  CheckboxGroupProps,
+  CheckboxGroupState,
+  CheckboxChild
+} from './props'
+
+/**
+---
+category: components
+---
+**/
+
+@withDeterministicId()
+class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
+  static readonly componentId = 'CheckboxGroup'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    disabled: false,
+    readOnly: false,
+    size: 'medium',
+    layout: 'stacked',
+    children: null
+  }
+
+  constructor(props: CheckboxGroupProps) {
+    super(props)
+
+    if (typeof props.value === 'undefined') {
+      this.state = {
+        value: props.defaultValue || []
+      }
+    }
+
+    this._messagesId = props.deterministicId!()
+  }
+  private readonly _messagesId: string
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  get hasMessages() {
+    return this.props.messages && this.props.messages.length > 0
+  }
+
+  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    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)
+    }
+  }
+
+  get value() {
+    return typeof this.props.value === 'undefined'
+      ? [...this.state.value]
+      : [...this.props.value]
+  }
+
+  renderChildren() {
+    const { children, name, size, disabled, readOnly } = this.props
+
+    return Children.map(children, (child) => {
+      if (matchComponentTypes<CheckboxChild>(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 : undefined
+        })
+      } else {
+        return child
+      }
+    })
+  }
+
+  render() {
+    return (
+      <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"
+      >
+        {this.renderChildren()}
+      </FormFieldGroup>
+    )
+  }
+}
+
+export default CheckboxGroup
+export { CheckboxGroup }

package/src/CheckboxGroup/v2/props.ts

@@ -0,0 +1,77 @@
+/*
+ * 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 InputHTMLAttributes } from 'react'
+import type { FormMessage } from '@instructure/ui-form-field/latest'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+
+import { Checkbox } from '../../Checkbox/v2'
+import type { CheckboxProps } from '../../Checkbox/v2/props'
+
+type CheckboxChild = React.ComponentElement<CheckboxProps, Checkbox>
+
+type CheckboxGroupOwnProps = {
+  children?: CheckboxChild[] // TODO: oneOf([Checkbox])
+  name: string
+  description: React.ReactNode
+  defaultValue?: (string | number)[]
+  value?: (string | number)[] // TODO: controllable(PropTypes.array)
+  onChange?: (value: (string | number)[]) => void
+  disabled?: boolean
+  readOnly?: boolean
+  messages?: FormMessage[]
+  size?: 'small' | 'medium' | 'large'
+  layout?: 'stacked' | 'columns' | 'inline'
+}
+
+type PropKeys = keyof CheckboxGroupOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type CheckboxGroupProps = CheckboxGroupOwnProps &
+  OtherHTMLAttributes<
+    CheckboxGroupOwnProps,
+    InputHTMLAttributes<CheckboxGroupOwnProps & Element>
+  > &
+  WithDeterministicIdProps
+const allowedProps: AllowedPropKeys = [
+  'name',
+  'description',
+  'defaultValue',
+  'value',
+  'onChange',
+  'disabled',
+  'readOnly',
+  'messages',
+  'children',
+  'size',
+  'layout'
+]
+
+type CheckboxGroupState = {
+  value: (string | number)[]
+}
+export type { CheckboxGroupProps, CheckboxGroupState, CheckboxChild }
+export { allowedProps }

package/src/{index.ts → exports/a.ts}

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Checkbox, CheckboxFacade, ToggleFacade } from './Checkbox'
-export { CheckboxGroup } from './CheckboxGroup'
+export { Checkbox, CheckboxFacade, ToggleFacade } from '../Checkbox/v1'
+export { CheckboxGroup } from '../CheckboxGroup/v1'
 
-export type { CheckboxProps } from './Checkbox/props'
-export type { CheckboxFacadeProps } from './Checkbox/CheckboxFacade/props'
-export type { ToggleFacadeProps } from './Checkbox/ToggleFacade/props'
-export type { CheckboxGroupProps } from './CheckboxGroup/props'
+export type { CheckboxProps } from '../Checkbox/v1/props'
+export type { CheckboxFacadeProps } from '../Checkbox/v1/CheckboxFacade/props'
+export type { ToggleFacadeProps } from '../Checkbox/v1/ToggleFacade/props'
+export type { CheckboxGroupProps } from '../CheckboxGroup/v1/props'

package/src/exports/b.ts

@@ -0,0 +1,30 @@
+/*
+ * 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'
+export { CheckboxGroup } from '../CheckboxGroup/v2'
+
+export type { CheckboxProps } from '../Checkbox/v2/props'
+export type { CheckboxFacadeProps } from '../Checkbox/v2/CheckboxFacade/props'
+export type { ToggleFacadeProps } from '../Checkbox/v2/ToggleFacade/props'
+export type { CheckboxGroupProps } from '../CheckboxGroup/v2/props'