@atlaskit/checkbox 12.3.20 → 12.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/checkbox
 
+## 12.4.0
+
+### Minor Changes
+
+- [`0944c0e7eed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0944c0e7eed) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.3.20
 
 ### Patch Changes

package/dist/cjs/checkbox.js

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 
@@ -26,7 +26,7 @@ var _internal = require("./internal");
 var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
 
 /* eslint-disable @repo/internal/styles/no-nested-styles */
-var checkboxStyles = (0, _core.css)({
+var checkboxStyles = (0, _react2.css)({
   width: '100%',
   height: '100%',
   margin: 0,
@@ -174,17 +174,17 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.20"
+    packageVersion: "12.4.0"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // Use isChecked from the state if it is controlled
 
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
-  return (0, _core.jsx)(_internal.Label, {
+  return (0, _react2.jsx)(_internal.Label, {
     isDisabled: isDisabled,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
-  }, (0, _core.jsx)("input", (0, _extends2.default)({}, rest, {
+  }, (0, _react2.jsx)("input", (0, _extends2.default)({}, rest, {
     type: "checkbox",
     ref: mergedRefs,
     disabled: isDisabled,
@@ -198,11 +198,11 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),
     "data-invalid": isInvalid ? 'true' : undefined
-  })), (0, _core.jsx)(_internal.CheckboxIcon, {
+  })), (0, _react2.jsx)(_internal.CheckboxIcon, {
     size: size,
     isIndeterminate: isIndeterminate,
     isChecked: isChecked
-  }), label && (0, _core.jsx)(_internal.LabelText, null, label, isRequired && (0, _core.jsx)(_internal.RequiredIndicator, null)));
+  }), label && (0, _react2.jsx)(_internal.LabelText, null, label, isRequired && (0, _react2.jsx)(_internal.RequiredIndicator, null)));
 }));
 Checkbox.displayName = 'Checkbox';
 var _default = Checkbox;

package/dist/cjs/internal/checkbox-icon.js

@@ -9,14 +9,14 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
 
 /**  @jsx jsx */
 function getIcon(isIndeterminate, isChecked) {
   if (isIndeterminate) {
-    return (0, _core.jsx)("rect", {
+    return (0, _react2.jsx)("rect", {
       fill: "inherit",
       x: "8",
       y: "11",
@@ -27,7 +27,7 @@ function getIcon(isIndeterminate, isChecked) {
   }
 
   if (isChecked) {
-    return (0, _core.jsx)("path", {
+    return (0, _react2.jsx)("path", {
       d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
       fill: "inherit"
     });
@@ -53,14 +53,14 @@ var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var icon = (0, _react.useMemo)(function () {
     return getIcon(isIndeterminate, isChecked);
   }, [isIndeterminate, isChecked]);
-  return (0, _core.jsx)(_svg.default, {
+  return (0, _react2.jsx)(_svg.default, {
     label: "",
     size: size,
     primaryColor: "var(--checkbox-background-color)",
     secondaryColor: "var(--checkbox-tick-color)"
-  }, (0, _core.jsx)("g", {
+  }, (0, _react2.jsx)("g", {
     fillRule: "evenodd"
-  }, (0, _core.jsx)("rect", {
+  }, (0, _react2.jsx)("rect", {
     fill: "currentColor",
     x: "6",
     y: "6",

package/dist/cjs/internal/label-text.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = LabelText;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 /** @jsx jsx */
-var labelTextStyles = (0, _core.css)({
+var labelTextStyles = (0, _react.css)({
   alignSelf: 'center',
   gridArea: '1 / 2 / 2 / 3'
 });
 
 function LabelText(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     css: labelTextStyles
   }, children);
 }

package/dist/cjs/internal/label.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Label;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -18,7 +18,7 @@ var _constants = require("./constants");
 var _theme = _interopRequireDefault(require("./theme"));
 
 /** @jsx jsx */
-var labelStyles = (0, _core.css)({
+var labelStyles = (0, _react.css)({
   display: 'grid',
   gap: '0 4px',
   gridAutoColumns: '1fr',
@@ -28,12 +28,12 @@ var labelStyles = (0, _core.css)({
   cursor: 'default',
   fontFamily: _constants.fontFamily
 });
-var disabledStyles = (0, _core.css)({
+var disabledStyles = (0, _react.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N80, ")"),
   cursor: 'not-allowed'
 });
 var themeStyles = {
-  light: (0, _core.css)({
+  light: (0, _react.css)({
     /**
      * Background
      */
@@ -65,7 +65,7 @@ var themeStyles = {
     '--local-tick-disabled': _theme.default.light.tickColor.disabledAndChecked,
     '--local-tick-rest': 'transparent'
   }),
-  dark: (0, _core.css)({
+  dark: (0, _react.css)({
     /**
      * Background
      */
@@ -110,7 +110,7 @@ function Label(_ref) {
       mode = _useGlobalTheme.mode;
 
   return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    (0, _core.jsx)("label", {
+    (0, _react.jsx)("label", {
       css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
       "data-testid": testId,
       "data-disabled": isDisabled || undefined,

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

@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = RequiredIndicator;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("./constants");
 
 /** @jsx jsx */
-var requiredIndicatorStyles = (0, _core.css)({
+var requiredIndicatorStyles = (0, _react.css)({
   paddingLeft: _constants.gridSize * 0.25,
   color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
 });
 
 function RequiredIndicator() {
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": true
   }, "*");

package/dist/cjs/version.json

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

package/dist/es2019/checkbox.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /**  @jsx jsx */
 import { forwardRef, memo, useCallback, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
@@ -148,7 +148,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.20"
+    packageVersion: "12.4.0"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled

package/dist/es2019/internal/checkbox-icon.js

@@ -1,6 +1,6 @@
 /**  @jsx jsx */
 import { memo, useMemo } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import PrimitiveSVGIcon from '@atlaskit/icon/svg';
 
 function getIcon(isIndeterminate, isChecked) {

package/dist/es2019/internal/label-text.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 const labelTextStyles = css({
   alignSelf: 'center',
   gridArea: '1 / 2 / 2 / 3'

package/dist/es2019/internal/label.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N80, N900 } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily } from './constants';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
 import { gridSize } from './constants';
 const requiredIndicatorStyles = css({

package/dist/es2019/version.json

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

package/dist/esm/checkbox.js

@@ -5,7 +5,7 @@ var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIn
 
 /**  @jsx jsx */
 import { forwardRef, memo, useCallback, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
@@ -159,7 +159,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.20"
+    packageVersion: "12.4.0"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled

package/dist/esm/internal/checkbox-icon.js

@@ -1,6 +1,6 @@
 /**  @jsx jsx */
 import { memo, useMemo } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import PrimitiveSVGIcon from '@atlaskit/icon/svg';
 
 function getIcon(isIndeterminate, isChecked) {

package/dist/esm/internal/label-text.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 var labelTextStyles = css({
   alignSelf: 'center',
   gridArea: '1 / 2 / 2 / 3'

package/dist/esm/internal/label.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N80, N900 } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily } from './constants';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
 import { gridSize } from './constants';
 var requiredIndicatorStyles = css({

package/dist/esm/version.json

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

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

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

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

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

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

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export default function RequiredIndicator(): JSX.Element;
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export default function RequiredIndicator(): jsx.JSX.Element;

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

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

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

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

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

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export default function RequiredIndicator(): JSX.Element;
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export default function RequiredIndicator(): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "12.3.20",
+  "version": "12.4.0",
   "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/"
@@ -35,11 +35,11 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -47,8 +47,8 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/form": "^8.5.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/form": "^8.6.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/checkbox"
+## API Report File for "@atlaskit/checkbox".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />