@primer/components 32.0.2-rc.859381a1 → 32.1.0-rc.6f5d2b00

package/docs/content/Checkbox.md

@@ -0,0 +1,118 @@
+---
+title: Checkbox
+description: Use checkboxes to toggle between checked and unchecked states in a list or as a standalone form field
+status: Alpha
+source: https://github.com/primer/react/blob/main/src/Checklist.tsx
+storybook: '/react/storybook?path=/story/forms-checkbox--default'
+---
+
+import {ComponentChecklist} from '../src/component-checklist'
+
+## Default example
+
+The `Checkbox` component can be used in controlled and uncontrolled modes.
+
+```jsx live
+<>
+  <Box as="form" sx={{p: 3, pt: 0, display: 'flex', alignItems: 'center'}}>
+    <Checkbox id="default-checkbox" />
+    <Text as="label" htmlFor="default-checkbox" sx={{fontSize: 2, fontWeight: 'bold', marginLeft: 1}}>
+      Default checkbox
+    </Text>
+  </Box>
+  <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'center'}}>
+    <Checkbox id="always-checked-checkbox" checked={true} />
+    <Text as="label" htmlFor="always-checked-checkbox" sx={{fontSize: 2, fontWeight: 'bold', marginLeft: 1}}>
+      Always checked
+    </Text>
+  </Box>
+  <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'center'}}>
+    <Checkbox id="always-unchecked-checkbox" checked={false} />
+    <Text as="label" htmlFor="always-unchecked-checkbox" sx={{fontSize: 2, fontWeight: 'bold', marginLeft: 1}}>
+      Always unchecked
+    </Text>
+  </Box>
+
+  <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'center'}}>
+    <Checkbox id="inactive-checkbox" checked={true} disabled />
+    <Text as="label" htmlFor="inactive-checkbox" sx={{fontSize: 2, fontWeight: 'bold', marginLeft: 1}}>
+      Inactive
+    </Text>
+  </Box>
+</>
+```
+
+<Note variant="warning">
+Checkbox components should always be accompanied by a corresponding label to improve support for assistive technologies.
+</Note>
+
+## Indeterminate example
+
+An `indeterminate` checkbox state should be used if the input value is neither true nor false. This can be useful in situations where you are required to display an incomplete state, or one that is dependent on other input selections to determine a value.
+
+```jsx live
+<>
+  <Box as="form" sx={{p: 3, pt: 0, pb: 1, display: 'flex', alignItems: 'center'}}>
+    <Checkbox id="indeterminate-checkbox" onChange={() => {}} indeterminate={true} />
+    <Text as="label" sx={{fontSize: 2, fontWeight: 'bold', marginLeft: 1}} htmlFor="controlled-checkbox">
+      <Text sx={{display: 'block'}}>Default checkbox</Text>
+    </Text>
+  </Box>
+  <Box key={`sub-checkbox-0`} as="form" sx={{p: 1, pl: 6, display: 'flex', alignItems: 'center'}}>
+    <Checkbox id={`sub-checkbox-0`} checked={true} onChange={() => {}} />
+    <Text as="label" sx={{fontSize: 2, fontWeight: 'bold', marginLeft: 1}} htmlFor={`sub-checkbox-0`}>
+      <Text sx={{display: 'block'}}>Checkbox 1</Text>
+    </Text>
+  </Box>
+  <Box key={`sub-checkbox-1`} as="form" sx={{p: 1, pl: 6, display: 'flex', alignItems: 'center'}}>
+    <Checkbox id={`sub-checkbox-1`} checked={false} onChange={() => {}} />
+    <Text as="label" sx={{fontSize: 2, fontWeight: 'bold', marginLeft: 1}} htmlFor={`sub-checkbox-1`}>
+      <Text sx={{display: 'block'}}>Checkbox 2</Text>
+    </Text>
+  </Box>
+  <Box key={`sub-checkbox-2`} as="form" sx={{p: 1, pl: 6, display: 'flex', alignItems: 'center'}}>
+    <Checkbox id={`sub-checkbox-2`} checked={false} onChange={() => {}} />
+    <Text as="label" sx={{fontSize: 2, fontWeight: 'bold', marginLeft: 1}} htmlFor={`sub-checkbox-2`}>
+      <Text sx={{display: 'block'}}>Checkbox 3</Text>
+    </Text>
+  </Box>
+  <Box key={`sub-checkbox-3`} as="form" sx={{p: 1, pl: 6, display: 'flex', alignItems: 'center'}}>
+    <Checkbox id={`sub-checkbox-3`} checked={false} onChange={() => {}} />
+    <Text as="label" sx={{fontSize: 2, fontWeight: 'bold', marginLeft: 1}} htmlFor={`sub-checkbox-3`}>
+      <Text sx={{display: 'block'}}>Checkbox 4</Text>
+    </Text>
+  </Box>
+</>
+```
+
+## Component props
+
+Native `<input>` attributes are forwarded to the underlying React `input` component and are not listed below.
+
+| Name           | Type        |  Default  | Description                                                                                                                                             |
+| :------------- | :---------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| checked        | Boolean     | undefined | Optional. Modifies true/false value of the native checkbox                                                                                              |
+| defaultChecked | Boolean     | undefined | Optional. Checks the input by default in uncontrolled mode                                                                                              |
+| onChange       | ChangeEvent | undefined | Optional. A callback function that is triggered when the checked state has been changed.                                                                |
+| disabled       | Boolean     | undefined | Optional. Modifies the native disabled state of the native checkbox                                                                                     |
+| indeterminate  | Boolean     | undefined | Optional. Applies an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate) state to the checkbox |
+
+## Component status
+
+<ComponentChecklist
+items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
+    usedInProduction: false,
+    usageExamplesDocumented: false,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>

package/docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -47,6 +47,8 @@
       url: /Breadcrumbs
     - title: Buttons
       url: /Buttons
+    - title: Checkbox
+      url: /Checkbox
     - title: CircleBadge
       url: /CircleBadge
     - title: CircleOcticon

package/lib/Checkbox.d.ts

@@ -0,0 +1,29 @@
+import React, { InputHTMLAttributes } from 'react';
+import { SxProp } from './sx';
+export declare type CheckboxProps = {
+    /**
+     * Apply indeterminate visual appearance to the checkbox
+     */
+    indeterminate?: boolean;
+    /**
+     * Apply inactive visual appearance to the checkbox
+     */
+    disabled?: boolean;
+    /**
+     * Forward a ref to the underlying input element
+     */
+    ref?: React.RefObject<HTMLInputElement>;
+    /**
+     * Indicates whether the checkbox must be checked
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the checkbox validation state
+     */
+    validationStatus?: 'error' | 'success';
+} & InputHTMLAttributes<HTMLInputElement> & SxProp;
+/**
+ * An accessible, native checkbox component
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/lib/Checkbox.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _hooks = require("./hooks");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _sx = _interopRequireDefault(require("./sx"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const StyledCheckbox = _styledComponents.default.input.withConfig({
+  displayName: "Checkbox__StyledCheckbox",
+  componentId: "i51804-0"
+})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, _sx.default);
+/**
+ * An accessible, native checkbox component
+ */
+
+
+const Checkbox = /*#__PURE__*/_react.default.forwardRef(({
+  checked,
+  indeterminate,
+  disabled,
+  sx: sxProp,
+  required,
+  validationStatus,
+  ...rest
+}, ref) => {
+  const checkboxRef = (0, _hooks.useProvidedRefOrCreate)(ref);
+  (0, _react.useLayoutEffect)(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = indeterminate || false;
+    }
+  }, [indeterminate, checked, checkboxRef]);
+  return /*#__PURE__*/_react.default.createElement(StyledCheckbox, _extends({
+    type: "checkbox",
+    disabled: disabled,
+    "aria-disabled": disabled ? 'true' : 'false',
+    ref: ref || checkboxRef,
+    checked: indeterminate ? false : checked,
+    "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false',
+    sx: sxProp,
+    required: required,
+    "aria-required": required ? 'true' : 'false',
+    "aria-invalid": validationStatus === 'error' ? 'true' : 'false'
+  }, rest));
+});
+
+Checkbox.displayName = 'Checkbox';
+var _default = Checkbox;
+exports.default = _default;

package/lib/__tests__/Checkbox.test.d.ts

@@ -0,0 +1,2 @@
+import 'babel-polyfill';
+import '@testing-library/jest-dom';

package/lib/__tests__/Checkbox.test.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+require("@testing-library/jest-dom");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Checkbox', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    (0, _react2.cleanup)();
+  });
+  (0, _testing.behavesAsComponent)({
+    Component: _.Checkbox
+  });
+  (0, _testing.checkExports)('Checkbox', {
+    default: _.Checkbox
+  });
+  it('renders a valid checkbox input', () => {
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, null));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toBeDefined();
+  });
+  it('renders an unchecked checkbox by default', () => {
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, null));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.checked).toEqual(false);
+  });
+  it('renders an active checkbox when checked attribute is passed', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      checked: true,
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.checked).toEqual(true);
+  });
+  it('accepts a change handler that can alter the checkbox state', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.checked).toEqual(false);
+
+    _userEvent.default.click(checkbox);
+
+    expect(handleChange).toHaveBeenCalled();
+    expect(checkbox.checked).toEqual(true);
+
+    _userEvent.default.click(checkbox);
+
+    expect(handleChange).toHaveBeenCalled();
+    expect(checkbox.checked).toEqual(false);
+  });
+  it('renders an indeterminate prop correctly', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      indeterminate: true,
+      checked: true,
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.indeterminate).toEqual(true);
+    expect(checkbox.checked).toEqual(false);
+  });
+  it('renders an inactive checkbox state correctly', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      disabled: true,
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.disabled).toEqual(true);
+    expect(checkbox.checked).toEqual(false);
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true');
+
+    _userEvent.default.click(checkbox);
+
+    expect(checkbox.disabled).toEqual(true);
+    expect(checkbox.checked).toEqual(false);
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true'); // remove disabled attribute and retest
+
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange
+    }));
+    expect(checkbox).toHaveAttribute('aria-disabled', 'false');
+  });
+  it('renders an uncontrolled component correctly', () => {
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      defaultChecked: true
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.checked).toEqual(true);
+
+    _userEvent.default.click(checkbox);
+
+    expect(checkbox.checked).toEqual(false);
+  });
+  it('renders an aria-checked attribute correctly', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      checked: false,
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      checked: true,
+      onChange: handleChange
+    }));
+    expect(checkbox).toHaveAttribute('aria-checked', 'true');
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      indeterminate: true,
+      checked: true,
+      onChange: handleChange
+    }));
+    expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
+  });
+  it('renders an invalid aria state when validation prop indicates an error', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-invalid', 'false');
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange,
+      validationStatus: "success"
+    }));
+    expect(checkbox).toHaveAttribute('aria-invalid', 'false');
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange,
+      validationStatus: "error"
+    }));
+    expect(checkbox).toHaveAttribute('aria-invalid', 'true');
+  });
+  it('renders an aria state indicating the field is required', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-required', 'false');
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange,
+      required: true
+    }));
+    expect(checkbox).toHaveAttribute('aria-required', 'true');
+  });
+});

package/lib/index.d.ts

@@ -115,4 +115,6 @@ export { default as Truncate } from './Truncate';
 export type { TruncateProps } from './Truncate';
 export { default as UnderlineNav } from './UnderlineNav';
 export type { UnderlineNavProps, UnderlineNavLinkProps } from './UnderlineNav';
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
 export { SSRProvider, useSSRSafeId } from './utils/ssr';

package/lib/index.js

@@ -495,6 +495,12 @@ Object.defineProperty(exports, "UnderlineNav", {
     return _UnderlineNav.default;
   }
 });
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.default;
+  }
+});
 Object.defineProperty(exports, "SSRProvider", {
   enumerable: true,
   get: function () {
@@ -636,6 +642,8 @@ var _Truncate = _interopRequireDefault(require("./Truncate"));
 
 var _UnderlineNav = _interopRequireDefault(require("./UnderlineNav"));
 
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
 var _ssr = require("./utils/ssr");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/stories/Checkbox.stories.js

@@ -0,0 +1,227 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Indeterminate = exports.Uncontrolled = exports.Default = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _2 = require("..");
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = {
+  title: 'Forms/Checkbox',
+  component: _2.Checkbox,
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_2.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_2.BaseStyles, null, /*#__PURE__*/_react.default.createElement(_2.Box, {
+      paddingTop: 5
+    }, Story())));
+  }],
+  argTypes: {
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    disabled: {
+      name: 'Disabled',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+exports.default = _default;
+
+const StyledLabel = _styledComponents.default.label.withConfig({
+  displayName: "Checkboxstories__StyledLabel",
+  componentId: "sdupvr-0"
+})(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:16px;", ""], _constants.COMMON);
+
+const StyledSubLabel = (0, _styledComponents.default)(_2.Text).withConfig({
+  displayName: "Checkboxstories__StyledSubLabel",
+  componentId: "sdupvr-1"
+})(["color:", ";font-size:13px;", ""], (0, _constants.get)('colors.fg.muted'), _constants.COMMON);
+
+const Default = args => {
+  const [isChecked, setChecked] = (0, _react.useState)(false);
+
+  const handleChange = event => {
+    setChecked(event.target.checked);
+    (0, _addonActions.action)('Change event triggered');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, _extends({
+    id: "controlled-checkbox",
+    onChange: handleChange,
+    checked: isChecked
+  }, args)), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "controlled-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Default checkbox"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "controlled"))), /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, _extends({
+    id: "always-checked-checkbox",
+    checked: true
+  }, args)), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "always-checked-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Always checked"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "checked=\"true\""))), /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, _extends({
+    id: "always-unchecked-checkbox",
+    checked: false
+  }, args)), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "always-unchecked-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Always unchecked"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "checked=\"false\""))), /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, {
+    id: "disabled-checkbox",
+    disabled: true,
+    checked: false
+  }), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "disabled-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Inactive"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "disabled=\"true\""))));
+};
+
+exports.Default = Default;
+
+const Uncontrolled = args => {
+  const checkboxRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.checked = true;
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, _extends({
+    id: "uncontrolled-checkbox",
+    ref: checkboxRef
+  }, args)), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "uncontrolled-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Uncontrolled checkbox"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "Checked by default")));
+};
+
+exports.Uncontrolled = Uncontrolled;
+Uncontrolled.displayName = "Uncontrolled";
+
+const Indeterminate = args => {
+  const [checkboxes, setCheckboxes] = (0, _react.useState)([false, false, false, false]);
+
+  const handleChange = (_, index) => {
+    const newCheckboxes = [...checkboxes];
+    newCheckboxes[index] = !checkboxes[index];
+    setCheckboxes(newCheckboxes);
+  };
+
+  const handleIndeterminateChange = () => {
+    if (checkboxes.every(checkbox => checkbox)) {
+      return setCheckboxes(checkboxes.map(() => false));
+    }
+
+    const newCheckboxes = checkboxes.map(() => true);
+    setCheckboxes(newCheckboxes);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, {
+    id: "indeterminate-checkbox",
+    checked: checkboxes.every(Boolean),
+    onChange: handleIndeterminateChange,
+    indeterminate: !checkboxes.every(Boolean)
+  }), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "controlled-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Default checkbox"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "controlled"))), checkboxes.map((field, index) => /*#__PURE__*/_react.default.createElement(_2.Box, {
+    key: `sub-checkbox-${index}`,
+    as: "form",
+    sx: {
+      p: 1,
+      pl: 7,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, _extends({
+    id: `sub-checkbox-${index}`,
+    checked: checkboxes[index],
+    onChange: event => handleChange(event, index)
+  }, args)), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: `sub-checkbox-${index}`
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Checkbox ", index + 1)))));
+};
+
+exports.Indeterminate = Indeterminate;