@atlaskit/checkbox 16.0.0 → 17.0.0

package/dist/esm/checkbox.js

@@ -1,150 +1,17 @@
+/* checkbox.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss", "className"];
+import "./checkbox.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { B200 } from '@atlaskit/theme/colors';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-var checkboxStyles = css({
-  width: '100%',
-  height: '100%',
-  margin: "var(--ds-space-0, 0px)",
-  appearance: 'none',
-  border: 'none',
-  gridArea: '1 / 1 / 2 / 2',
-  opacity: 0,
-  outline: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& + svg': {
-    /**
-     *  Change the variables --checkbox-background-color, --checkbox-border-color
-     *  and --checkbox-tick-color according to user interactions.
-     *  All other variables are constant.
-     *  All styles from the input target the sibling svg.
-     */
-    '--checkbox-background-color': 'var(--local-background)',
-    '--checkbox-border-color': 'var(--local-border)',
-    '--checkbox-tick-color': 'var(--local-tick-rest)',
-    color: 'var(--checkbox-background-color)',
-    fill: 'var(--checkbox-tick-color)',
-    gridArea: '1 / 1 / 2 / 2',
-    pointerEvents: 'none',
-    transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    'rect:first-of-type': {
-      stroke: 'var(--checkbox-border-color)',
-      strokeWidth: "var(--ds-border-width, 1px)",
-      transition: 'stroke 0.2s ease-in-out'
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&&:focus + svg, &&:checked:focus + svg': {
-    borderRadius: "var(--ds-border-radius, 0.25rem)",
-    outline: "var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")),
-    outlineOffset: "var(--ds-space-negative-025, -2px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:hover + svg': {
-    '--checkbox-background-color': 'var(--local-background-hover)',
-    '--checkbox-border-color': 'var(--local-border-hover)'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:checked:hover + svg': {
-    '--checkbox-background-color': 'var(--local-background-checked-hover)',
-    '--checkbox-border-color': 'var(--local-border-checked-hover)'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:checked + svg': {
-    '--checkbox-background-color': 'var(--local-background-checked)',
-    '--checkbox-border-color': 'var(--local-border-checked)',
-    '--checkbox-tick-color': 'var(--local-tick-checked)'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&[data-invalid] + svg': {
-    '--checkbox-border-color': 'var(--local-border-invalid)'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:checked[data-invalid] + svg': {
-    '--checkbox-border-color': 'var(--local-border-checked-invalid)'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:active + svg': {
-    '--checkbox-background-color': 'var(--local-background-active)',
-    '--checkbox-border-color': 'var(--local-border-active)'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:checked:active + svg': {
-    '--checkbox-background-color': 'var(--local-background-active)',
-    '--checkbox-border-color': 'var(--local-border-active)',
-    '--checkbox-tick-color': 'var(--local-tick-active)'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
-    '--checkbox-background-color': 'var(--local-background-disabled)',
-    '--checkbox-border-color': 'var(--local-border-disabled)',
-    cursor: 'not-allowed',
-    pointerEvents: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:disabled:checked + svg': {
-    '--checkbox-tick-color': 'var(--local-tick-disabled)'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-19551
-  '&:indeterminate + svg': {
-    '--checkbox-background-color': 'var(--local-background-checked)',
-    '--checkbox-border-color': 'var(--local-border-checked)',
-    '--checkbox-tick-color': 'var(--local-tick-checked)'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-19551
-  '&:disabled:indeterminate + svg': {
-    '--checkbox-background-color': 'var(--local-background-disabled)',
-    '--checkbox-border-color': 'var(--local-border-disabled)',
-    '--checkbox-tick-color': 'var(--local-tick-disabled)'
-  },
-  '@media screen and (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& + svg': {
-      '--checkbox-background-color': 'Canvas',
-      '--checkbox-border-color': 'CanvasText',
-      '--checkbox-tick-color': 'CanvasText'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '&:checked + svg, &:checked:hover + svg': {
-      '--checkbox-background-color': 'Canvas',
-      '--checkbox-border-color': 'CanvasText',
-      '--checkbox-tick-color': 'CanvasText'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&:focus + svg rect:first-of-type': {
-      stroke: 'Highlight'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '&[data-invalid] + svg': {
-      '--checkbox-border-color': 'Highlight'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '&:checked[data-invalid] + svg': {
-      '--checkbox-border-color': 'Highlight'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
-      '--checkbox-background-color': 'Canvas',
-      '--checkbox-border-color': 'GrayText',
-      '--checkbox-tick-color': 'GrayText'
-    }
-  }
-});
-/* eslint-enable @atlaskit/design-system/no-nested-styles */
+var checkboxStyles = null;
 
 /**
  * __Checkbox__
@@ -173,6 +40,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     isRequired = props.isRequired,
     testId = props.testId,
     xcss = props.xcss,
+    className = props.className,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
     _useState2 = _slicedToArray(_useState, 2),
@@ -190,7 +58,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "16.0.0"
+    packageVersion: "17.0.0"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);
@@ -202,7 +70,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
       internalRef.current.indeterminate = isIndeterminate;
     }
   }, [isIndeterminate]);
-  return jsx(Label, {
+  return /*#__PURE__*/React.createElement(Label, {
     isDisabled: isDisabled,
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
@@ -212,7 +80,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: xcss
-  }, jsx("input", _extends({
+  }, /*#__PURE__*/React.createElement("input", _extends({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0
   }, rest, {
@@ -223,15 +91,19 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     value: value,
     name: name,
     required: isRequired,
-    css: checkboxStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax(["_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef7js4s _1h6rjs4s _smzgo41a _1dk7o41a _l71j1i6y _t34a1i6y _y32gkivo _1ah9199y _1frj180l _h78e1g3k _dwvb1ps2 _1bok170n _1mhr17cl _fx2i3rva _10oaq2ws _w12s155b _15y61vek _e6ww155b _sg1j1vek _rphw18jz _y9y9mz2b _141bmz2b _255gmz2b _jj67mz2b _swhgmz2b _axq81diq _1jiz1diq _s9051diq _1efy1diq _1oav1diq _10y313gf _1wt913gf _qq8613gf _1adw13gf _12sr13gf _16jiglyw _693jglyw _1niqglyw _cl9tglyw _1jbnglyw _j1ta1hou _18qu1ps2 _1g52170n _1log17cl _32hzmz2b _1vv91diq _yjhd1hou _w1cowc43 _jdqn1onz _4y4t1onz _lvfrwc43 _g68dwc43 _13dk1onz _w1el1onz _a9yw1onz _1l3g1onz _dcdpgir2 _wobcgir2 _rp9wgir2 _9ebfwc43 _e43iwc43 _1tkuwc43 _1lehwc43 _b9q3wc43 _tu2918qt _1uxv18qt _1ufw18qt _opo918qt _1e8318qt _1k3d18qt _25yv18qt _1igz18qt _c7cc18qt _1swg18qt", className]),
     onChange: onChangeAnalytics,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),
-    "data-invalid": isInvalid ? 'true' : undefined
-  })), jsx(CheckboxIcon, {
+    "data-invalid": isInvalid ? 'true' : undefined,
+    style: {
+      "--_gqccd2": ix("var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")))
+    }
+  })), /*#__PURE__*/React.createElement(CheckboxIcon, {
     isIndeterminate: isIndeterminate,
     isChecked: isChecked
-  }), label && jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, null)));
+  }), label && /*#__PURE__*/React.createElement(LabelText, null, label, isRequired && /*#__PURE__*/React.createElement(RequiredIndicator, null)));
 }));
 Checkbox.displayName = 'Checkbox';
 export default Checkbox;

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

@@ -1,25 +1,21 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* checkbox-icon.tsx generated by @compiled/babel-plugin v0.36.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { memo, useMemo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import PrimitiveSVGIcon from '@atlaskit/icon/svg';
 import { fg } from '@atlaskit/platform-feature-flags';
 function getIcon(isIndeterminate, isChecked) {
   if (isIndeterminate) {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
     if (fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration')) {
-      return jsx("path", {
+      return /*#__PURE__*/React.createElement("path", {
         fillRule: "evenodd",
         clipRule: "evenodd",
         d: "M7.75 12.75H16.25V11.25H7.75V12.75Z",
         fill: "inherit"
       });
     } else {
-      return jsx("rect", {
+      return /*#__PURE__*/React.createElement("rect", {
         fill: "inherit",
         x: "8",
         y: "11",
@@ -32,14 +28,14 @@ function getIcon(isIndeterminate, isChecked) {
   if (isChecked) {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
     if (fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration')) {
-      return jsx("path", {
+      return /*#__PURE__*/React.createElement("path", {
         fillRule: "evenodd",
         clipRule: "evenodd",
         d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
         fill: "inherit"
       });
     } else {
-      return jsx("path", {
+      return /*#__PURE__*/React.createElement("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"
       });
@@ -64,22 +60,22 @@ var CheckboxIcon = /*#__PURE__*/memo(function (_ref) {
   var icon = useMemo(function () {
     return getIcon(isIndeterminate, isChecked);
   }, [isIndeterminate, isChecked]);
-  return jsx(PrimitiveSVGIcon, {
+  return /*#__PURE__*/React.createElement(PrimitiveSVGIcon, {
     label: "",
     primaryColor: "var(--checkbox-background-color)",
     secondaryColor: "var(--checkbox-tick-color)"
-  }, jsx("g", {
+  }, /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd"
   },
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
-  fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? jsx("rect", {
+  fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? /*#__PURE__*/React.createElement("rect", {
     fill: "currentColor",
     x: "5.5",
     y: "5.5",
     width: "13",
     height: "13",
     rx: "1.5"
-  }) : jsx("rect", {
+  }) : /*#__PURE__*/React.createElement("rect", {
     fill: "currentColor",
     x: "6",
     y: "6",

package/dist/esm/internal/label-text.compiled.css

@@ -0,0 +1,2 @@
+
+._nd5l11ig{grid-area:1/2/2/3}._1wpz1h6o{align-self:center}

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

@@ -1,16 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-var labelTextStyles = css({
-  alignSelf: 'center',
-  gridArea: '1 / 2 / 2 / 3'
-});
+/* label-text.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./label-text.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var labelTextStyles = null;
 export default function LabelText(_ref) {
   var children = _ref.children;
-  return jsx("span", {
-    css: labelTextStyles
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_nd5l11ig _1wpz1h6o"])
   }, children);
 }

package/dist/esm/internal/label.compiled.css

@@ -0,0 +1,29 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulp1te3{gap:var(--_1l71759)}
+._13hr1j28{--local-tick-rest:transparent}
+._18q0snw8{--local-tick-disabled:var(--_1xmcmw9)}
+._1dik1ehr{--local-border-checked-hover:var(--_14y1fod)}
+._1e0c11p5{display:grid}
+._1ejihkll{grid-auto-columns:1fr}
+._1esz1j4g{--local-background-checked:var(--_1gcp7nr)}
+._1g1fe69j{--local-border-active:var(--_rczcge)}
+._1j3h1380{--local-border-invalid:var(--_1i4xulb)}
+._1nzs1kc0{--local-background-active:var(--_1cd0fcx)}
+._1rdaeh7q{--local-tick-checked:var(--_jf353p)}
+._1sfg1380{--local-border-checked-invalid:var(--_1i4xulb)}
+._1yjc3zdg{--local-border-focus:var(--_xjqa3d)}
+._80om13gf{cursor:not-allowed}
+._80om73ad{cursor:default}
+._ay2w1ouc{--local-background-disabled:var(--_r5pknd)}
+._d51u12ci{--local-background-hover:var(--_1z08gfx)}
+._eawbxz7c{--local-tick-active:var(--_uq1ko9)}
+._fpdj1ouc{--local-border-disabled:var(--_r5pknd)}
+._h5e31kd8{--local-background:var(--_4mkb4g)}
+._l6wk1j4g{--local-border-checked:var(--_1gcp7nr)}
+._oaj1ddza{--local-border-hover:var(--_vnm8xo)}
+._phftddza{--local-border:var(--_vnm8xo)}
+._syaz7wap{color:var(--_1ynhf1h)}
+._syazovqm{color:var(--_5xk3r4)}
+._umai184x{grid-auto-rows:min-content}
+._yp0j1ehr{--local-background-checked-hover:var(--_14y1fod)}
+._yv0ey09t{grid-template-columns:min-content auto}

package/dist/esm/internal/label.js

@@ -1,56 +1,12 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* label.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./label.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
-var baseStyles = css({
-  display: 'grid',
-  gridAutoColumns: '1fr',
-  gridAutoRows: 'min-content',
-  color: "var(--ds-text, ".concat(N900, ")"),
-  cursor: 'default',
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-});
-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, ")"),
-  cursor: 'not-allowed'
-});
-var labelStyles = css({
-  /**
-   * Background
-   */
-  '--local-background': "var(--ds-background-input, ".concat(N10, ")"),
-  '--local-background-active': "var(--ds-background-input-pressed, ".concat(B50, ")"),
-  '--local-background-checked': "var(--ds-background-selected-bold, ".concat(B400, ")"),
-  '--local-background-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
-  '--local-background-disabled': "var(--ds-background-disabled, ".concat(N20, ")"),
-  '--local-background-hover': "var(--ds-background-input-hovered, ".concat(N30, ")"),
-  /**
-   * Border
-   */
-  '--local-border': "var(--ds-border-input, ".concat(N100, ")"),
-  '--local-border-active': "var(--ds-border, ".concat(B50, ")"),
-  '--local-border-checked': "var(--ds-background-selected-bold, ".concat(B400, ")"),
-  '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
-  '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
-  '--local-border-disabled': "var(--ds-background-disabled, ".concat(N20, ")"),
-  '--local-border-focus': "var(--ds-border-focused, ".concat(B200, ")"),
-  '--local-border-hover': "var(--ds-border-input, ".concat(N100, ")"),
-  '--local-border-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
-  /**
-   * Tick
-   */
-  '--local-tick-active': "var(--ds-icon-inverse, ".concat(B400, ")"),
-  '--local-tick-checked': "var(--ds-icon-inverse, ".concat(N10, ")"),
-  '--local-tick-disabled': "var(--ds-icon-disabled, ".concat(N70, ")"),
-  '--local-tick-rest': 'transparent'
-});
+var baseStyles = null;
+var textLabelLayoutStyles = null;
+var disabledStyles = null;
+var labelStyles = null;
 export default function Label(_ref) {
   var children = _ref.children,
     isDisabled = _ref.isDisabled,
@@ -58,14 +14,28 @@ export default function Label(_ref) {
     label = _ref.label,
     id = _ref.id,
     xcss = _ref.xcss;
-  return jsx("label", {
-    // Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
-    // When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- This rule still fails because of the TS assertion
-    className: xcss,
-    css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
+  return /*#__PURE__*/React.createElement("label", {
+    className: ax(["_11c81oud _1e0c11p5 _1ejihkll _umai184x _syazovqm _80om73ad", label && "_zulp1te3 _yv0ey09t", isDisabled && "_syaz7wap _80om13gf", "_h5e31kd8 _1nzs1kc0 _1esz1j4g _yp0j1ehr _ay2w1ouc _d51u12ci _phftddza _1g1fe69j _l6wk1j4g _1dik1ehr _1sfg1380 _fpdj1ouc _1yjc3zdg _oaj1ddza _1j3h1380 _eawbxz7c _1rdaeh7q _18q0snw8 _13hr1j28", xcss]),
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,
-    id: id
+    id: id,
+    style: {
+      "--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
+      "--_1l71759": ix("var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)")),
+      "--_1ynhf1h": ix("var(--ds-text-disabled, ".concat(N80, ")")),
+      "--_4mkb4g": ix("var(--ds-background-input, ".concat(N10, ")")),
+      "--_1cd0fcx": ix("var(--ds-background-input-pressed, ".concat(B50, ")")),
+      "--_1gcp7nr": ix("var(--ds-background-selected-bold, ".concat(B400, ")")),
+      "--_14y1fod": ix("var(--ds-background-selected-bold-hovered, ".concat(B300, ")")),
+      "--_r5pknd": ix("var(--ds-background-disabled, ".concat(N20, ")")),
+      "--_1z08gfx": ix("var(--ds-background-input-hovered, ".concat(N30, ")")),
+      "--_vnm8xo": ix("var(--ds-border-input, ".concat(N100, ")")),
+      "--_rczcge": ix("var(--ds-border, ".concat(B50, ")")),
+      "--_1i4xulb": ix("var(--ds-border-danger, ".concat(R300, ")")),
+      "--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")")),
+      "--_uq1ko9": ix("var(--ds-icon-inverse, ".concat(B400, ")")),
+      "--_jf353p": ix("var(--ds-icon-inverse, ".concat(N10, ")")),
+      "--_1xmcmw9": ix("var(--ds-icon-disabled, ".concat(N70, ")"))
+    }
   }, children);
 }

package/dist/esm/internal/required-indicator.compiled.css

@@ -0,0 +1,2 @@
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._syaz1ml5{color:var(--_1xw92dq)}

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

@@ -1,20 +1,15 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* required-indicator.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./required-indicator.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { R500 } from '@atlaskit/theme/colors';
-var requiredIndicatorStyles = css({
-  color: "var(--ds-text-danger, ".concat(R500, ")"),
-  paddingInlineStart: "var(--ds-space-025, 2px)"
-});
+var requiredIndicatorStyles = null;
 export default function RequiredIndicator() {
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
-    jsx("span", {
-      css: requiredIndicatorStyles,
-      "aria-hidden": true
-    }, "*")
-  );
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true,
+    className: ax(["_syaz1ml5 _bozgv77o"]),
+    style: {
+      "--_1xw92dq": ix("var(--ds-text-danger, ".concat(R500, ")"))
+    }
+  }, "*");
 }

package/dist/types/checkbox.d.ts

@@ -13,7 +13,7 @@ import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
  * - [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>, "css" | "disabled" | "required" | "checked">, keyof {
+declare const Checkbox: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "disabled" | "required" | "checked" | "css">, keyof {
     defaultChecked?: boolean | undefined;
     id?: string | undefined;
     isChecked?: boolean | undefined;

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

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

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

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

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

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

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

@@ -13,7 +13,7 @@ import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
  * - [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>, "css" | "disabled" | "required" | "checked">, keyof {
+declare const Checkbox: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "disabled" | "required" | "checked" | "css">, keyof {
     defaultChecked?: boolean | undefined;
     id?: string | undefined;
     isChecked?: boolean | undefined;

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "16.0.0",
+	"version": "17.0.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/"
@@ -39,12 +39,12 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/platform-feature-flags": "*",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.2"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -53,16 +53,15 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^21.0.0",
+		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/docs": "*",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/link": "*",
-		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/section-message": "*",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
-		"@compiled/react": "^0.18.2",
 		"@testing-library/react": "^13.4.0",
 		"jscodeshift": "^0.13.0",
 		"react-dom": "^18.2.0",