@atlaskit/checkbox 12.4.0 → 12.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/checkbox
 
+## 12.4.2
+
+### Patch Changes
+
+- [`ed1b0fd2c2d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed1b0fd2c2d) - [ux] Removes redundant whitespace from checkbox when no visual label is applied - eg when an aria-label or id is used instead.
+
+## 12.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.4.0
 
 ### Minor Changes

package/codemods/utils.tsx

@@ -222,94 +222,95 @@ export function addToImport({
     });
 }
 
-export const createRenameFuncFor = (
-  component: string,
-  importName: string,
-  from: string,
-  to: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  const specifier = getNamedSpecifier(j, source, component, importName);
+export const createRenameFuncFor =
+  (component: string, importName: string, from: string, to: string) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    const specifier = getNamedSpecifier(j, source, component, importName);
 
-  if (!specifier) {
-    return;
-  }
+    if (!specifier) {
+      return;
+    }
 
-  source.findJSXElements(specifier).forEach((element) => {
-    getJSXAttributesByName(j, element, from).forEach((attribute) => {
-      j(attribute).replaceWith(
-        j.jsxAttribute(j.jsxIdentifier(to), attribute.node.value),
-      );
+    source.findJSXElements(specifier).forEach((element) => {
+      getJSXAttributesByName(j, element, from).forEach((attribute) => {
+        j(attribute).replaceWith(
+          j.jsxAttribute(j.jsxIdentifier(to), attribute.node.value),
+        );
+      });
     });
-  });
 
-  let variable = hasVariableAssignment(j, source, specifier);
-  if (variable) {
-    variable.find(j.VariableDeclarator).forEach((declarator) => {
-      j(declarator)
-        .find(j.Identifier)
-        .filter((identifier) => identifier.name === 'id')
-        .forEach((ids) => {
-          findIdentifierAndReplaceAttribute(j, source, ids.node.name, from, to);
-        });
-    });
-  }
-};
+    let variable = hasVariableAssignment(j, source, specifier);
+    if (variable) {
+      variable.find(j.VariableDeclarator).forEach((declarator) => {
+        j(declarator)
+          .find(j.Identifier)
+          .filter((identifier) => identifier.name === 'id')
+          .forEach((ids) => {
+            findIdentifierAndReplaceAttribute(
+              j,
+              source,
+              ids.node.name,
+              from,
+              to,
+            );
+          });
+      });
+    }
+  };
 
-export const createRemoveFuncFor = (
-  component: string,
-  importName: string,
-  prop: string,
-  comment?: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  const specifier = getNamedSpecifier(j, source, component, importName);
+export const createRemoveFuncFor =
+  (component: string, importName: string, prop: string, comment?: string) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    const specifier = getNamedSpecifier(j, source, component, importName);
 
-  if (!specifier) {
-    return;
-  }
+    if (!specifier) {
+      return;
+    }
 
-  source.findJSXElements(specifier).forEach((element) => {
-    getJSXAttributesByName(j, element, prop).forEach((attribute) => {
-      j(attribute).remove();
-      if (comment) {
-        addCommentToStartOfFile({ j, base: source, message: comment });
-      }
+    source.findJSXElements(specifier).forEach((element) => {
+      getJSXAttributesByName(j, element, prop).forEach((attribute) => {
+        j(attribute).remove();
+        if (comment) {
+          addCommentToStartOfFile({ j, base: source, message: comment });
+        }
+      });
     });
-  });
-};
-
-export const createRenameImportFor = ({
-  componentName,
-  newComponentName,
-  oldPackagePath,
-  newPackagePath,
-}: {
-  componentName: string;
-  newComponentName?: string;
-  oldPackagePath: string;
-  newPackagePath: string;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  const isUsingName: boolean =
-    source
-      .find(j.ImportDeclaration)
-      .filter((path) => path.node.source.value === oldPackagePath)
-      .find(j.ImportSpecifier)
-      .nodes()
-      .filter(
-        (specifier) =>
-          specifier.imported && specifier.imported.name === componentName,
-      ).length > 0;
-  if (!isUsingName) {
-    return;
-  }
+  };
+
+export const createRenameImportFor =
+  ({
+    componentName,
+    newComponentName,
+    oldPackagePath,
+    newPackagePath,
+  }: {
+    componentName: string;
+    newComponentName?: string;
+    oldPackagePath: string;
+    newPackagePath: string;
+  }) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    const isUsingName: boolean =
+      source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === oldPackagePath)
+        .find(j.ImportSpecifier)
+        .nodes()
+        .filter(
+          (specifier) =>
+            specifier.imported && specifier.imported.name === componentName,
+        ).length > 0;
+    if (!isUsingName) {
+      return;
+    }
 
-  const existingAlias: Nullable<string> =
-    source
-      .find(j.ImportDeclaration)
-      .filter((path) => path.node.source.value === oldPackagePath)
-      .find(j.ImportSpecifier)
-      .nodes()
-      .map(
-        (specifier): Nullable<string> => {
+    const existingAlias: Nullable<string> =
+      source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === oldPackagePath)
+        .find(j.ImportSpecifier)
+        .nodes()
+        .map((specifier): Nullable<string> => {
           if (specifier.imported && specifier.imported.name !== componentName) {
             return null;
           }
@@ -319,81 +320,81 @@ export const createRenameImportFor = ({
           }
 
           return null;
-        },
-      )
-      .filter(Boolean)[0] || null;
+        })
+        .filter(Boolean)[0] || null;
+
+    // Check to see if need to create new package path
+    // Try create an import declaration just before the old import
+    tryCreateImport({
+      j,
+      base: source,
+      relativeToPackage: oldPackagePath,
+      packageName: newPackagePath,
+    });
 
-  // Check to see if need to create new package path
-  // Try create an import declaration just before the old import
-  tryCreateImport({
-    j,
-    base: source,
-    relativeToPackage: oldPackagePath,
-    packageName: newPackagePath,
-  });
+    const newSpecifier: ImportSpecifier | ImportDefaultSpecifier = (() => {
+      // If there's a new name use that
+      if (newComponentName) {
+        return j.importSpecifier(
+          j.identifier(newComponentName),
+          j.identifier(newComponentName),
+        );
+      }
 
-  const newSpecifier: ImportSpecifier | ImportDefaultSpecifier = (() => {
-    // If there's a new name use that
-    if (newComponentName) {
-      return j.importSpecifier(
-        j.identifier(newComponentName),
-        j.identifier(newComponentName),
-      );
-    }
+      if (existingAlias) {
+        return j.importSpecifier(
+          j.identifier(componentName),
+          j.identifier(existingAlias),
+        );
+      }
 
-    if (existingAlias) {
+      // Add specifier
       return j.importSpecifier(
         j.identifier(componentName),
-        j.identifier(existingAlias),
+        j.identifier(componentName),
       );
-    }
-
-    // Add specifier
-    return j.importSpecifier(
-      j.identifier(componentName),
-      j.identifier(componentName),
-    );
-  })();
+    })();
 
-  addToImport({
-    j,
-    base: source,
-    importSpecifier: newSpecifier,
-    packageName: newPackagePath,
-  });
+    addToImport({
+      j,
+      base: source,
+      importSpecifier: newSpecifier,
+      packageName: newPackagePath,
+    });
 
-  // Remove old path
-  source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === oldPackagePath)
-    .remove();
-};
-
-export const createRemoveImportsFor = ({
-  importsToRemove,
-  packagePath,
-  comment,
-}: {
-  importsToRemove: string[];
-  packagePath: string;
-  comment: string;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  const isUsingName: boolean =
+    // Remove old path
     source
       .find(j.ImportDeclaration)
-      .filter((path) => path.node.source.value === packagePath).length > 0;
-  if (!isUsingName) {
-    return;
-  }
+      .filter((path) => path.node.source.value === oldPackagePath)
+      .remove();
+  };
+
+export const createRemoveImportsFor =
+  ({
+    importsToRemove,
+    packagePath,
+    comment,
+  }: {
+    importsToRemove: string[];
+    packagePath: string;
+    comment: string;
+  }) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    const isUsingName: boolean =
+      source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === packagePath).length > 0;
+    if (!isUsingName) {
+      return;
+    }
 
-  const existingAlias: Nullable<string> =
-    source
-      .find(j.ImportDeclaration)
-      .filter((path) => path.node.source.value === packagePath)
-      .find(j.ImportSpecifier)
-      .nodes()
-      .map(
-        (specifier): Nullable<string> => {
+    const existingAlias: Nullable<string> =
+      source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === packagePath)
+        .find(j.ImportSpecifier)
+        .nodes()
+        .map((specifier): Nullable<string> => {
           if (!importsToRemove.includes(specifier.imported.name)) {
             return null;
           }
@@ -406,54 +407,55 @@ export const createRemoveImportsFor = ({
           }
 
           return null;
-        },
-      )
-      .filter(Boolean)[0] || null;
-
-  // Remove imports
-  source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === packagePath)
-    .find(j.ImportSpecifier)
-    .find(j.Identifier)
-    .filter((identifier) => {
-      if (
-        importsToRemove.includes(identifier.value.name) ||
-        identifier.value.name === existingAlias
-      ) {
-        addCommentToStartOfFile({ j, base: source, message: comment });
-        return true;
-      }
-      return false;
-    })
-    .remove();
+        })
+        .filter(Boolean)[0] || null;
 
-  // Remove entire import if it is empty
-  const isEmptyImport =
+    // Remove imports
     source
       .find(j.ImportDeclaration)
       .filter((path) => path.node.source.value === packagePath)
       .find(j.ImportSpecifier)
-      .find(j.Identifier).length === 0;
-  if (isEmptyImport) {
-    source
-      .find(j.ImportDeclaration)
-      .filter((path) => path.node.source.value === packagePath)
+      .find(j.Identifier)
+      .filter((identifier) => {
+        if (
+          importsToRemove.includes(identifier.value.name) ||
+          identifier.value.name === existingAlias
+        ) {
+          addCommentToStartOfFile({ j, base: source, message: comment });
+          return true;
+        }
+        return false;
+      })
       .remove();
-  }
-};
 
-export const createTransformer = (
-  component: string,
-  migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[],
-) => (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
-  const source: Collection<Node> = j(fileInfo.source);
-
-  if (!hasImportDeclaration(j, source, component)) {
-    return fileInfo.source;
-  }
+    // Remove entire import if it is empty
+    const isEmptyImport =
+      source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === packagePath)
+        .find(j.ImportSpecifier)
+        .find(j.Identifier).length === 0;
+    if (isEmptyImport) {
+      source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === packagePath)
+        .remove();
+    }
+  };
+
+export const createTransformer =
+  (
+    component: string,
+    migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[],
+  ) =>
+  (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
+    const source: Collection<Node> = j(fileInfo.source);
+
+    if (!hasImportDeclaration(j, source, component)) {
+      return fileInfo.source;
+    }
 
-  migrates.forEach((tf) => tf(j, source));
+    migrates.forEach((tf) => tf(j, source));
 
-  return source.toSource(options.printOptions || { quote: 'single' });
-};
+    return source.toSource(options.printOptions || { quote: 'single' });
+  };

package/dist/cjs/checkbox.js

@@ -29,7 +29,7 @@ var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIn
 var checkboxStyles = (0, _react2.css)({
   width: '100%',
   height: '100%',
-  margin: 0,
+  margin: "var(--ds-space-0, 0px)",
   appearance: 'none',
   border: 'none',
   gridArea: '1 / 1 / 2 / 2',
@@ -174,7 +174,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.4.0"
+    packageVersion: "12.4.2"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -182,6 +182,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return (0, _react2.jsx)(_internal.Label, {
     isDisabled: isDisabled,
+    label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
   }, (0, _react2.jsx)("input", (0, _extends2.default)({}, rest, {

package/dist/cjs/internal/label.js

@@ -20,13 +20,15 @@ var _theme = _interopRequireDefault(require("./theme"));
 /** @jsx jsx */
 var labelStyles = (0, _react.css)({
   display: 'grid',
-  gap: '0 4px',
   gridAutoColumns: '1fr',
   gridAutoRows: 'min-content',
-  gridTemplateColumns: 'min-content auto',
   color: "var(--ds-text, ".concat(_colors.N900, ")"),
   cursor: 'default',
-  fontFamily: _constants.fontFamily
+  fontFamily: "var(--ds-font-family-sans, ".concat(_constants.fontFamily, ")")
+});
+var textLabelLayoutStyles = (0, _react.css)({
+  gap: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
+  gridTemplateColumns: 'min-content auto'
 });
 var disabledStyles = (0, _react.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N80, ")"),
@@ -104,6 +106,7 @@ function Label(_ref) {
       isDisabled = _ref.isDisabled,
       testId = _ref.testId,
       onClick = _ref.onClick,
+      label = _ref.label,
       id = _ref.id;
 
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
@@ -111,7 +114,7 @@ function Label(_ref) {
 
   return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     (0, _react.jsx)("label", {
-      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
       "data-testid": testId,
       "data-disabled": isDisabled || undefined,
       onClick: onClick,

package/dist/cjs/internal/required-indicator.js

@@ -9,11 +9,9 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _constants = require("./constants");
-
 /** @jsx jsx */
 var requiredIndicatorStyles = (0, _react.css)({
-  paddingLeft: _constants.gridSize * 0.25,
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
 });
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.4.0",
+	"version": "12.4.2",
 	"sideEffects": false
 }

package/dist/es2019/checkbox.js

@@ -11,7 +11,7 @@ import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 const checkboxStyles = css({
   width: '100%',
   height: '100%',
-  margin: 0,
+  margin: "var(--ds-space-0, 0px)",
   appearance: 'none',
   border: 'none',
   gridArea: '1 / 1 / 2 / 2',
@@ -148,7 +148,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.4.0"
+    packageVersion: "12.4.2"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -156,6 +156,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
   const isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
+    label: label,
     id: rest.id ? `${rest.id}-label` : undefined,
     testId: testId && `${testId}--checkbox-label`
   }, jsx("input", _extends({}, rest, {

package/dist/es2019/internal/label.js

@@ -6,13 +6,15 @@ import { fontFamily } from './constants';
 import theme from './theme';
 const labelStyles = css({
   display: 'grid',
-  gap: '0 4px',
   gridAutoColumns: '1fr',
   gridAutoRows: 'min-content',
-  gridTemplateColumns: 'min-content auto',
   color: `var(--ds-text, ${N900})`,
   cursor: 'default',
-  fontFamily: fontFamily
+  fontFamily: `var(--ds-font-family-sans, ${fontFamily})`
+});
+const textLabelLayoutStyles = css({
+  gap: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
+  gridTemplateColumns: 'min-content auto'
 });
 const disabledStyles = css({
   color: `var(--ds-text-disabled, ${N80})`,
@@ -89,6 +91,7 @@ export default function Label({
   isDisabled,
   testId,
   onClick,
+  label,
   id
 }) {
   const {
@@ -96,7 +99,7 @@ export default function Label({
   } = useGlobalTheme();
   return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     jsx("label", {
-      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
       "data-testid": testId,
       "data-disabled": isDisabled || undefined,
       onClick: onClick,

package/dist/es2019/internal/required-indicator.js

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
-import { gridSize } from './constants';
 const requiredIndicatorStyles = css({
-  paddingLeft: gridSize * 0.25,
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: `var(--ds-text-danger, ${R500})`
 });
 export default function RequiredIndicator() {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.4.0",
+	"version": "12.4.2",
 	"sideEffects": false
 }

package/dist/esm/checkbox.js

@@ -14,7 +14,7 @@ import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 var checkboxStyles = css({
   width: '100%',
   height: '100%',
-  margin: 0,
+  margin: "var(--ds-space-0, 0px)",
   appearance: 'none',
   border: 'none',
   gridArea: '1 / 1 / 2 / 2',
@@ -159,7 +159,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.4.0"
+    packageVersion: "12.4.2"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -167,6 +167,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
+    label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
   }, jsx("input", _extends({}, rest, {

package/dist/esm/internal/label.js

@@ -6,13 +6,15 @@ import { fontFamily } from './constants';
 import theme from './theme';
 var labelStyles = css({
   display: 'grid',
-  gap: '0 4px',
   gridAutoColumns: '1fr',
   gridAutoRows: 'min-content',
-  gridTemplateColumns: 'min-content auto',
   color: "var(--ds-text, ".concat(N900, ")"),
   cursor: 'default',
-  fontFamily: fontFamily
+  fontFamily: "var(--ds-font-family-sans, ".concat(fontFamily, ")")
+});
+var textLabelLayoutStyles = css({
+  gap: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
+  gridTemplateColumns: 'min-content auto'
 });
 var disabledStyles = css({
   color: "var(--ds-text-disabled, ".concat(N80, ")"),
@@ -89,6 +91,7 @@ export default function Label(_ref) {
       isDisabled = _ref.isDisabled,
       testId = _ref.testId,
       onClick = _ref.onClick,
+      label = _ref.label,
       id = _ref.id;
 
   var _useGlobalTheme = useGlobalTheme(),
@@ -96,7 +99,7 @@ export default function Label(_ref) {
 
   return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     jsx("label", {
-      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
       "data-testid": testId,
       "data-disabled": isDisabled || undefined,
       onClick: onClick,

package/dist/esm/internal/required-indicator.js

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
-import { gridSize } from './constants';
 var requiredIndicatorStyles = css({
-  paddingLeft: gridSize * 0.25,
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: "var(--ds-text-danger, ".concat(R500, ")")
 });
 export default function RequiredIndicator() {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.4.0",
+	"version": "12.4.2",
 	"sideEffects": false
 }

package/dist/types/internal/label.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, onClick, id, }: LabelProps): jsx.JSX.Element;
+export default function Label({ children, isDisabled, testId, onClick, label, id, }: LabelProps): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "12.4.0",
+  "version": "12.4.2",
   "description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,16 +12,10 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -37,7 +31,7 @@
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -45,9 +39,9 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/form": "^8.6.0",
+    "@atlaskit/form": "^8.7.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.5.0",
@@ -76,6 +70,7 @@
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
+      "design-tokens": "spacing",
       "deprecation": "no-deprecated-imports",
       "styling": [
         "emotion",

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/checkbox".
+## API Report File for "@atlaskit/checkbox"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -14,30 +18,25 @@ import { default as React_2 } from 'react';
 import { RefAttributes } from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
 
-/**
- * __Checkbox__
- *
- * A checkbox an input control that allows a user to select one or more options from a number of choices.
- *
- * - [Examples](https://atlassian.design/components/checkbox/examples)
- * - [Code](https://atlassian.design/components/checkbox/code)
- * - [Usage](https://atlassian.design/components/checkbox/usage)
- */
-declare const Checkbox: MemoExoticComponent<ForwardRefExoticComponent<
-  Omit<
+// @public
+const Checkbox: MemoExoticComponent<
+  ForwardRefExoticComponent<
     Omit<
-      InputHTMLAttributes<HTMLInputElement>,
-      'disabled' | 'required' | 'checked' | 'css'
-    >,
-    keyof OwnProps
-  > &
-    OwnProps &
-    RefAttributes<HTMLInputElement>
->>;
+      Omit<
+        InputHTMLAttributes<HTMLInputElement>,
+        'disabled' | 'required' | 'checked' | 'css'
+      >,
+      keyof OwnProps
+    > &
+      OwnProps &
+      RefAttributes<HTMLInputElement>
+  >
+>;
 export { Checkbox };
 export default Checkbox;
 
-export declare type CheckboxProps = Combine<
+// @public (undocumented)
+export type CheckboxProps = Combine<
   Omit<
     React_2.InputHTMLAttributes<HTMLInputElement>,
     /**
@@ -56,83 +55,32 @@ export declare type CheckboxProps = Combine<
   OwnProps
 >;
 
-declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+// @public (undocumented)
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
 
-/**
- *
- *
- * CHECKBOX PROPTYPES
- *
- *
- */
-declare type OwnProps = {
-  /**
-   * Sets whether the checkbox begins checked.
-   */
+// @public
+type OwnProps = {
   defaultChecked?: boolean;
-  /**
-   * id assigned to input
-   */
   id?: string;
-  /**
-   * Sets whether the checkbox is checked or unchecked.
-   */
   isChecked?: boolean;
-  /**
-   * Sets whether the checkbox is disabled.
-   */
   isDisabled?: boolean;
-  /**
-   * Sets whether the checkbox is indeterminate. This only affects the
-   * style and does not modify the isChecked property.
-   */
   isIndeterminate?: boolean;
-  /**
-   * Marks the field as invalid. Changes style of unchecked component.
-   */
   isInvalid?: boolean;
-  /**
-   * Marks the field as required & changes the label style.
-   */
   isRequired?: boolean;
-  /**
-   * The label to be displayed to the right of the checkbox. The label is part
-   * of the clickable element to select the checkbox.
-   */
   label?: React_2.ReactChild;
-  /**
-   * The name of the submitted field in a checkbox.
-   */
   name?: string;
-  /**
-   * Function that is called whenever the state of the checkbox changes. It will
-   * be called with an object containing the react synthetic event. Use currentTarget to get value, name and checked
-   */
   onChange?: (
     e: React_2.ChangeEvent<HTMLInputElement>,
     analyticsEvent: UIAnalyticsEvent,
   ) => void;
-  /**
-   * The value to be used in the checkbox input. This is the value that will be returned on form submission.
-   */
   value?: number | string;
-  /**
-   * The size of the Checkbox
-   */
   size?: Size;
-  /**
-   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-   * we have generated testid based on the one you pass to the Checkbox component:
-   * - `{testId}--hidden-checkbox` to check if it got changed to checked/unchecked.
-   */
   testId?: string;
-  /**
-   * Additional information to be included in the `context` of analytics events that come from radio
-   */
   analyticsContext?: Record<string, any>;
 };
 
-declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
+// @public (undocumented)
+type Size = 'small' | 'medium' | 'large' | 'xlarge';
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/dist/types-ts4.0/checkbox.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-/**
- * __Checkbox__
- *
- * A checkbox an input control that allows a user to select one or more options from a number of choices.
- *
- * - [Examples](https://atlassian.design/components/checkbox/examples)
- * - [Code](https://atlassian.design/components/checkbox/code)
- * - [Usage](https://atlassian.design/components/checkbox/usage)
- */
-declare const Checkbox: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "disabled" | "required" | "checked" | "css">, keyof import("./types").OwnProps> & import("./types").OwnProps & import("react").RefAttributes<HTMLInputElement>>>;
-export default Checkbox;

package/dist/types-ts4.0/index.d.ts

@@ -1,2 +0,0 @@
-export { default, default as Checkbox } from './checkbox';
-export type { CheckboxProps } from './types';

package/dist/types-ts4.0/internal/checkbox-icon.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { Size } from '../types';
-/**
- * __Checkbox icon__
- *
- * A checkbox icon is the visual representation of checkbox state,
- * which is shown instead of the native input.
- *
- * @internal
- */
-declare const CheckboxIcon: import("react").NamedExoticComponent<{
-    size: Size;
-    isIndeterminate: boolean;
-    isChecked: boolean;
-}>;
-export default CheckboxIcon;

package/dist/types-ts4.0/internal/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const fontFamily: string;
-export declare const gridSize: number;

package/dist/types-ts4.0/internal/index.d.ts

@@ -1,4 +0,0 @@
-export { default as CheckboxIcon } from './checkbox-icon';
-export { default as Label } from './label';
-export { default as LabelText } from './label-text';
-export { default as RequiredIndicator } from './required-indicator';

package/dist/types-ts4.0/internal/label-text.d.ts

@@ -1,4 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { LabelTextProps } from '../types';
-export default function LabelText({ children }: LabelTextProps): jsx.JSX.Element;

package/dist/types-ts4.0/internal/label.d.ts

@@ -1,4 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, onClick, id, }: LabelProps): jsx.JSX.Element;

package/dist/types-ts4.0/internal/required-indicator.d.ts

@@ -1,3 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-export default function RequiredIndicator(): jsx.JSX.Element;

package/dist/types-ts4.0/internal/theme.d.ts

@@ -1,55 +0,0 @@
-declare const theme: {
-    light: {
-        borderColor: {
-            rest: "var(--ds-border-input)";
-            hovered: "var(--ds-border-input)";
-            disabled: "var(--ds-background-disabled)";
-            checked: "var(--ds-background-selected-bold)";
-            active: "var(--ds-border)";
-            invalid: "var(--ds-border-danger)";
-            invalidAndChecked: "var(--ds-border-danger)";
-            focused: "var(--ds-border-focused)";
-            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
-        };
-        boxColor: {
-            rest: "var(--ds-background-input)";
-            hovered: "var(--ds-background-input-hovered)";
-            disabled: "var(--ds-background-disabled)";
-            active: "var(--ds-background-input-pressed)";
-            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
-            checked: "var(--ds-background-selected-bold)";
-        };
-        tickColor: {
-            disabledAndChecked: "var(--ds-icon-disabled)";
-            activeAndChecked: "var(--ds-icon-inverse)";
-            checked: "var(--ds-icon-inverse)";
-        };
-    };
-    dark: {
-        borderColor: {
-            rest: "var(--ds-border-input)";
-            hovered: "var(--ds-border-input)";
-            disabled: "var(--ds-background-disabled)";
-            checked: "var(--ds-background-selected-bold)";
-            active: "var(--ds-border)";
-            invalid: "var(--ds-border-danger)";
-            invalidAndChecked: "var(--ds-border-danger)";
-            focused: "var(--ds-border-focused)";
-            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
-        };
-        boxColor: {
-            rest: "var(--ds-background-input)";
-            hovered: "var(--ds-background-input-hovered)";
-            disabled: "var(--ds-background-disabled)";
-            active: "var(--ds-background-input-pressed)";
-            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
-            checked: "var(--ds-background-selected-bold)";
-        };
-        tickColor: {
-            disabledAndChecked: "var(--ds-icon-disabled)";
-            activeAndChecked: "var(--ds-icon-inverse)";
-            checked: "var(--ds-icon-inverse)";
-        };
-    };
-};
-export default theme;

package/dist/types-ts4.0/types.d.ts

@@ -1,103 +0,0 @@
-import React from 'react';
-import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
-export declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
-/**
- *
- *
- * CHECKBOX PROPTYPES
- *
- *
- */
-export declare type OwnProps = {
-    /**
-     * Sets whether the checkbox begins checked.
-     */
-    defaultChecked?: boolean;
-    /**
-     * id assigned to input
-     */
-    id?: string;
-    /**
-     * Sets whether the checkbox is checked or unchecked.
-     */
-    isChecked?: boolean;
-    /**
-     * Sets whether the checkbox is disabled.
-     */
-    isDisabled?: boolean;
-    /**
-     * Sets whether the checkbox is indeterminate. This only affects the
-     * style and does not modify the isChecked property.
-     */
-    isIndeterminate?: boolean;
-    /**
-     * Marks the field as invalid. Changes style of unchecked component.
-     */
-    isInvalid?: boolean;
-    /**
-     * Marks the field as required & changes the label style.
-     */
-    isRequired?: boolean;
-    /**
-     * The label to be displayed to the right of the checkbox. The label is part
-     * of the clickable element to select the checkbox.
-     */
-    label?: React.ReactChild;
-    /**
-     * The name of the submitted field in a checkbox.
-     */
-    name?: string;
-    /**
-     * Function that is called whenever the state of the checkbox changes. It will
-     * be called with an object containing the react synthetic event. Use currentTarget to get value, name and checked
-     */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
-    /**
-     * The value to be used in the checkbox input. This is the value that will be returned on form submission.
-     */
-    value?: number | string;
-    /**
-     * The size of the Checkbox
-     */
-    size?: Size;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-     * we have generated testid based on the one you pass to the Checkbox component:
-     * - `{testId}--hidden-checkbox` to check if it got changed to checked/unchecked.
-     */
-    testId?: string;
-    /**
-     * Additional information to be included in the `context` of analytics events that come from radio
-     */
-    analyticsContext?: Record<string, any>;
-};
-declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
-export declare type CheckboxProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 
-/**
- * 'disabled', 'required', and 'checked' are omitted so that
- * consumers must handle state using our props.
- *
- * 'css' is added globally to element attributes by emotion.
- * This was causing a bug, making the css prop required in
- * some cases. We explicitly omit it to avoid that.
- *
- * Because 'className' (which the css prop uses internally)
- * is still available, this should not break existing usage.
- */
-'disabled' | 'required' | 'checked' | 'css'>, OwnProps>;
-export interface LabelTextProps extends React.HTMLProps<HTMLSpanElement> {
-    children: React.ReactNode;
-}
-export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
-    isDisabled?: boolean;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-     */
-    testId?: string;
-    /**
-     * Click handler that is conditionally applied for Firefox
-     * as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element
-     */
-    onClick?: React.MouseEventHandler;
-}
-export {};