@atlaskit/checkbox 15.4.0 → 17.0.0

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

@@ -1,27 +1,24 @@
+/* required-indicator.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = RequiredIndicator;
-var _react = require("@emotion/react");
+require("./required-indicator.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _colors = require("@atlaskit/theme/colors");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var requiredIndicatorStyles = (0, _react.css)({
-  color: "var(--ds-text-danger, ".concat(_colors.R500, ")"),
-  paddingInlineStart: "var(--ds-space-025, 2px)"
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var requiredIndicatorStyles = null;
 function RequiredIndicator() {
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
-    (0, _react.jsx)("span", {
-      css: requiredIndicatorStyles,
-      "aria-hidden": true
-    }, "*")
-  );
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true,
+    className: (0, _runtime.ax)(["_syaz1ml5 _bozgv77o"]),
+    style: {
+      "--_1xw92dq": (0, _runtime.ix)("var(--ds-text-danger, ".concat(_colors.R500, ")"))
+    }
+  }, "*");
 }

package/dist/es2019/checkbox.compiled.css

@@ -0,0 +1,53 @@
+
+._19itglyw{border:none}
+._19op11so+svg rect:first-of-type{transition:stroke .2s ease-in-out}
+._1ef7js4s._1ef7js4s:checked:focus+svg, ._1h6rjs4s._1h6rjs4s:focus+svg{border-radius:var(--ds-border-radius,.25rem)}
+._9bg71mn3+svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
+._nd5lfibj{grid-area:1/1/2/2}
+._r050fibj+svg{grid-area:1/1/2/2}
+._smzgj3jf._smzgj3jf:checked:focus+svg, ._1dk7j3jf._1dk7j3jf:focus+svg{outline:var(--ds-border-width-outline,2px) solid var(--ds-border-focused,#2684ff)}._10oaq2ws:checked[data-invalid]+svg{--checkbox-border-color:var(--local-border-checked-invalid)}
+._10y313gf:disabled+svg, ._1wt913gf:disabled:active+svg, ._qq8613gf:disabled:focus+svg, ._1adw13gf:disabled:hover+svg, ._12sr13gf:disabled[data-invalid]+svg{cursor:not-allowed}
+._12ji1r31{outline-color:currentColor}
+._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
+._12y31o36{outline-width:medium}
+._13wo93zu+svg{--checkbox-background-color:var(--local-background)}
+._15y61vek:active+svg{--checkbox-border-color:var(--local-border-active)}
+._1610e4h9+svg rect:first-of-type{stroke-width:var(--ds-border-width,1px)}
+._16jiglyw:disabled+svg, ._693jglyw:disabled:active+svg, ._1niqglyw:disabled:focus+svg, ._cl9tglyw:disabled:hover+svg, ._1jbnglyw:disabled[data-invalid]+svg{pointer-events:none}
+._18qu1ps2:indeterminate+svg{--checkbox-background-color:var(--local-background-checked)}
+._1ah9199y:hover+svg{--checkbox-border-color:var(--local-border-hover)}
+._1bok170n:checked+svg{--checkbox-border-color:var(--local-border-checked)}
+._1bsb1osq{width:100%}
+._1fo21cni+svg{fill:var(--checkbox-tick-color)}
+._1frj180l:checked:hover+svg{--checkbox-background-color:var(--local-background-checked-hover)}
+._1g52170n:indeterminate+svg{--checkbox-border-color:var(--local-border-checked)}
+._1log17cl:indeterminate+svg{--checkbox-tick-color:var(--local-tick-checked)}
+._1mhr17cl:checked+svg{--checkbox-tick-color:var(--local-tick-checked)}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1qu2glyw{outline-style:none}
+._1vv91diq:disabled:indeterminate+svg{--checkbox-border-color:var(--local-border-disabled)}
+._32hzmz2b:disabled:indeterminate+svg{--checkbox-background-color:var(--local-background-disabled)}
+._4t3i1osq{height:100%}
+._6rthze3t{margin-block-end:var(--ds-space-0,0)}
+._8gq114p8+svg{--checkbox-tick-color:var(--local-tick-rest)}
+._a30fhteq+svg rect:first-of-type{stroke:var(--checkbox-border-color)}
+._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
+._axq81diq:disabled+svg, ._1jiz1diq:disabled:active+svg, ._s9051diq:disabled:focus+svg, ._1efy1diq:disabled:hover+svg, ._1oav1diq:disabled[data-invalid]+svg{--checkbox-border-color:var(--local-border-disabled)}
+._dwvb1ps2:checked+svg{--checkbox-background-color:var(--local-background-checked)}
+._e6ww155b:checked:active+svg{--checkbox-background-color:var(--local-background-active)}
+._eyedglyw+svg{pointer-events:none}
+._fx2i3rva[data-invalid]+svg{--checkbox-border-color:var(--local-border-invalid)}
+._h78e1g3k:checked:hover+svg{--checkbox-border-color:var(--local-border-checked-hover)}
+._j1ta1hou:disabled:checked+svg{--checkbox-tick-color:var(--local-tick-disabled)}
+._l71j1i6y._l71j1i6y:checked:focus+svg, ._t34a1i6y._t34a1i6y:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
+._q5a61gyf+svg{--checkbox-border-color:var(--local-border)}
+._r06hglyw{-webkit-appearance:none;appearance:none}
+._rphw18jz:checked:active+svg{--checkbox-tick-color:var(--local-tick-active)}
+._sg1j1vek:checked:active+svg{--checkbox-border-color:var(--local-border-active)}
+._tzy4idpf{opacity:0}
+._w12s155b:active+svg{--checkbox-background-color:var(--local-background-active)}
+._wje2mov0+svg{color:var(--checkbox-background-color)}
+._y32gkivo:hover+svg{--checkbox-background-color:var(--local-background-hover)}
+._y9y9mz2b:disabled+svg, ._141bmz2b:disabled:active+svg, ._255gmz2b:disabled:focus+svg, ._jj67mz2b:disabled:hover+svg, ._swhgmz2b:disabled[data-invalid]+svg{--checkbox-background-color:var(--local-background-disabled)}
+._yjhd1hou:disabled:indeterminate+svg{--checkbox-tick-color:var(--local-tick-disabled)}
+@media screen and (forced-colors:active){._w1cowc43+svg{--checkbox-background-color:Canvas}._jdqn1onz+svg{--checkbox-border-color:CanvasText}._4y4t1onz+svg{--checkbox-tick-color:CanvasText}._lvfrwc43:checked+svg, ._g68dwc43:checked:hover+svg{--checkbox-background-color:Canvas}._13dk1onz:checked+svg, ._w1el1onz:checked:hover+svg{--checkbox-border-color:CanvasText}._a9yw1onz:checked+svg, ._1l3g1onz:checked:hover+svg{--checkbox-tick-color:CanvasText}._dcdpgir2:focus+svg rect:first-of-type{stroke:Highlight}._wobcgir2[data-invalid]+svg{--checkbox-border-color:Highlight}._rp9wgir2:checked[data-invalid]+svg{--checkbox-border-color:Highlight}._9ebfwc43:disabled+svg, ._e43iwc43:disabled:active+svg, ._1tkuwc43:disabled:focus+svg, ._1lehwc43:disabled:hover+svg, ._b9q3wc43:disabled[data-invalid]+svg{--checkbox-background-color:Canvas}._tu2918qt:disabled+svg, ._1uxv18qt:disabled:active+svg, ._1ufw18qt:disabled:focus+svg, ._opo918qt:disabled:hover+svg, ._1e8318qt:disabled[data-invalid]+svg{--checkbox-border-color:GrayText}._1k3d18qt:disabled+svg, ._25yv18qt:disabled:active+svg, ._1igz18qt:disabled:focus+svg, ._c7cc18qt:disabled:hover+svg, ._1swg18qt:disabled[data-invalid]+svg{--checkbox-tick-color:GrayText}}

package/dist/es2019/checkbox.js

@@ -1,147 +1,14 @@
+/* checkbox.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+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 */
-const 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)"} solid ${`var(--ds-border-focused, ${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 */
+const checkboxStyles = null;
 
 /**
  * __Checkbox__
@@ -167,6 +34,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     isRequired,
     testId,
     xcss,
+    className,
     ...rest
   } = props;
   const [isCheckedState, setIsCheckedState] = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked);
@@ -182,7 +50,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "15.4.0"
+    packageVersion: "17.0.0"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);
@@ -194,7 +62,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
       internalRef.current.indeterminate = isIndeterminate;
     }
   }, [isIndeterminate]);
-  return jsx(Label, {
+  return /*#__PURE__*/React.createElement(Label, {
     isDisabled: isDisabled,
     label: label,
     id: rest.id ? `${rest.id}-label` : undefined,
@@ -204,7 +72,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     // 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, {
@@ -215,15 +83,16 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     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 _smzgj3jf _1dk7j3jf _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 && `${testId}--hidden-checkbox`,
     "data-invalid": isInvalid ? 'true' : undefined
-  })), jsx(CheckboxIcon, {
+  })), /*#__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/es2019/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"
       });
@@ -63,22 +59,22 @@ const CheckboxIcon = /*#__PURE__*/memo(({
   isChecked
 }) => {
   const icon = useMemo(() => 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/es2019/internal/label-text.compiled.css

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

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

@@ -1,17 +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';
-const 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";
+const labelTextStyles = null;
 export default function LabelText({
   children
 }) {
-  return jsx("span", {
-    css: labelTextStyles
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_nd5l11ig _1wpz1h6o"])
   }, children);
 }

package/dist/es2019/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)}
+._zulp1nu5{gap:var(--ds-space-0,0) var(--ds-space-050,4px)}
+._13hr1j28{--local-tick-rest:transparent}
+._18q015t7{--local-tick-disabled:var(--ds-icon-disabled,#a5adba)}
+._1dikhh5a{--local-border-checked-hover:var(--ds-background-selected-bold-hovered,#0065ff)}
+._1e0c11p5{display:grid}
+._1ejihkll{grid-auto-columns:1fr}
+._1eszzyvw{--local-background-checked:var(--ds-background-selected-bold,#0052cc)}
+._1g1funzk{--local-border-active:var(--ds-border,#deebff)}
+._1j3h1q3k{--local-border-invalid:var(--ds-border-danger,#ff5630)}
+._1nzs11d3{--local-background-active:var(--ds-background-input-pressed,#deebff)}
+._1rda1qbb{--local-tick-checked:var(--ds-icon-inverse,#fafbfc)}
+._1sfg1q3k{--local-border-checked-invalid:var(--ds-border-danger,#ff5630)}
+._1yjc194a{--local-border-focus:var(--ds-border-focused,#2684ff)}
+._80om13gf{cursor:not-allowed}
+._80om73ad{cursor:default}
+._ay2w1y1w{--local-background-disabled:var(--ds-background-disabled,#f4f5f7)}
+._d51u10ko{--local-background-hover:var(--ds-background-input-hovered,#ebecf0)}
+._eawb1dzn{--local-tick-active:var(--ds-icon-inverse,#0052cc)}
+._fpdj1y1w{--local-border-disabled:var(--ds-background-disabled,#f4f5f7)}
+._h5e3mag2{--local-background:var(--ds-background-input,#fafbfc)}
+._l6wkzyvw{--local-border-checked:var(--ds-background-selected-bold,#0052cc)}
+._oaj11fmg{--local-border-hover:var(--ds-border-input,#7a869a)}
+._phft1fmg{--local-border:var(--ds-border-input,#7a869a)}
+._syaz1tvo{color:var(--ds-text-disabled,#97a0af)}
+._syazj3m3{color:var(--ds-text,#091e42)}
+._umai184x{grid-auto-rows:min-content}
+._yp0jhh5a{--local-background-checked-hover:var(--ds-background-selected-bold-hovered,#0065ff)}
+._yv0ey09t{grid-template-columns:min-content auto}

package/dist/es2019/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';
-const baseStyles = css({
-  display: 'grid',
-  gridAutoColumns: '1fr',
-  gridAutoRows: 'min-content',
-  color: `var(--ds-text, ${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)"
-});
-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})`,
-  cursor: 'not-allowed'
-});
-const labelStyles = css({
-  /**
-   * Background
-   */
-  '--local-background': `var(--ds-background-input, ${N10})`,
-  '--local-background-active': `var(--ds-background-input-pressed, ${B50})`,
-  '--local-background-checked': `var(--ds-background-selected-bold, ${B400})`,
-  '--local-background-checked-hover': `var(--ds-background-selected-bold-hovered, ${B300})`,
-  '--local-background-disabled': `var(--ds-background-disabled, ${N20})`,
-  '--local-background-hover': `var(--ds-background-input-hovered, ${N30})`,
-  /**
-   * Border
-   */
-  '--local-border': `var(--ds-border-input, ${N100})`,
-  '--local-border-active': `var(--ds-border, ${B50})`,
-  '--local-border-checked': `var(--ds-background-selected-bold, ${B400})`,
-  '--local-border-checked-hover': `var(--ds-background-selected-bold-hovered, ${B300})`,
-  '--local-border-checked-invalid': `var(--ds-border-danger, ${R300})`,
-  '--local-border-disabled': `var(--ds-background-disabled, ${N20})`,
-  '--local-border-focus': `var(--ds-border-focused, ${B200})`,
-  '--local-border-hover': `var(--ds-border-input, ${N100})`,
-  '--local-border-invalid': `var(--ds-border-danger, ${R300})`,
-  /**
-   * Tick
-   */
-  '--local-tick-active': `var(--ds-icon-inverse, ${B400})`,
-  '--local-tick-checked': `var(--ds-icon-inverse, ${N10})`,
-  '--local-tick-disabled': `var(--ds-icon-disabled, ${N70})`,
-  '--local-tick-rest': 'transparent'
-});
+const baseStyles = null;
+const textLabelLayoutStyles = null;
+const disabledStyles = null;
+const labelStyles = null;
 export default function Label({
   children,
   isDisabled,
@@ -59,12 +15,8 @@ export default function Label({
   id,
   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 _syazj3m3 _80om73ad", label && "_zulp1nu5 _yv0ey09t", isDisabled && "_syaz1tvo _80om13gf", "_h5e3mag2 _1nzs11d3 _1eszzyvw _yp0jhh5a _ay2w1y1w _d51u10ko _phft1fmg _1g1funzk _l6wkzyvw _1dikhh5a _1sfg1q3k _fpdj1y1w _1yjc194a _oaj11fmg _1j3h1q3k _eawb1dzn _1rda1qbb _18q015t7 _13hr1j28", xcss]),
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,
     id: id

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

@@ -0,0 +1,2 @@
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._syaz1gtz{color:var(--ds-text-danger,#bf2600)}

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

@@ -1,20 +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';
+/* 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';
-const requiredIndicatorStyles = css({
-  color: `var(--ds-text-danger, ${R500})`,
-  paddingInlineStart: "var(--ds-space-025, 2px)"
-});
+const 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(["_syaz1gtz _bozgv77o"])
+  }, "*");
 }

package/dist/esm/checkbox.compiled.css

@@ -0,0 +1,53 @@
+
+._19itglyw{border:none}
+._19op11so+svg rect:first-of-type{transition:stroke .2s ease-in-out}
+._1ef7js4s._1ef7js4s:checked:focus+svg, ._1h6rjs4s._1h6rjs4s:focus+svg{border-radius:var(--ds-border-radius,.25rem)}
+._9bg71mn3+svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
+._nd5lfibj{grid-area:1/1/2/2}
+._r050fibj+svg{grid-area:1/1/2/2}
+._smzgo41a._smzgo41a:checked:focus+svg, ._1dk7o41a._1dk7o41a:focus+svg{outline:var(--_gqccd2)}._10oaq2ws:checked[data-invalid]+svg{--checkbox-border-color:var(--local-border-checked-invalid)}
+._10y313gf:disabled+svg, ._1wt913gf:disabled:active+svg, ._qq8613gf:disabled:focus+svg, ._1adw13gf:disabled:hover+svg, ._12sr13gf:disabled[data-invalid]+svg{cursor:not-allowed}
+._12ji1r31{outline-color:currentColor}
+._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
+._12y31o36{outline-width:medium}
+._13wo93zu+svg{--checkbox-background-color:var(--local-background)}
+._15y61vek:active+svg{--checkbox-border-color:var(--local-border-active)}
+._1610e4h9+svg rect:first-of-type{stroke-width:var(--ds-border-width,1px)}
+._16jiglyw:disabled+svg, ._693jglyw:disabled:active+svg, ._1niqglyw:disabled:focus+svg, ._cl9tglyw:disabled:hover+svg, ._1jbnglyw:disabled[data-invalid]+svg{pointer-events:none}
+._18qu1ps2:indeterminate+svg{--checkbox-background-color:var(--local-background-checked)}
+._1ah9199y:hover+svg{--checkbox-border-color:var(--local-border-hover)}
+._1bok170n:checked+svg{--checkbox-border-color:var(--local-border-checked)}
+._1bsb1osq{width:100%}
+._1fo21cni+svg{fill:var(--checkbox-tick-color)}
+._1frj180l:checked:hover+svg{--checkbox-background-color:var(--local-background-checked-hover)}
+._1g52170n:indeterminate+svg{--checkbox-border-color:var(--local-border-checked)}
+._1log17cl:indeterminate+svg{--checkbox-tick-color:var(--local-tick-checked)}
+._1mhr17cl:checked+svg{--checkbox-tick-color:var(--local-tick-checked)}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1qu2glyw{outline-style:none}
+._1vv91diq:disabled:indeterminate+svg{--checkbox-border-color:var(--local-border-disabled)}
+._32hzmz2b:disabled:indeterminate+svg{--checkbox-background-color:var(--local-background-disabled)}
+._4t3i1osq{height:100%}
+._6rthze3t{margin-block-end:var(--ds-space-0,0)}
+._8gq114p8+svg{--checkbox-tick-color:var(--local-tick-rest)}
+._a30fhteq+svg rect:first-of-type{stroke:var(--checkbox-border-color)}
+._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
+._axq81diq:disabled+svg, ._1jiz1diq:disabled:active+svg, ._s9051diq:disabled:focus+svg, ._1efy1diq:disabled:hover+svg, ._1oav1diq:disabled[data-invalid]+svg{--checkbox-border-color:var(--local-border-disabled)}
+._dwvb1ps2:checked+svg{--checkbox-background-color:var(--local-background-checked)}
+._e6ww155b:checked:active+svg{--checkbox-background-color:var(--local-background-active)}
+._eyedglyw+svg{pointer-events:none}
+._fx2i3rva[data-invalid]+svg{--checkbox-border-color:var(--local-border-invalid)}
+._h78e1g3k:checked:hover+svg{--checkbox-border-color:var(--local-border-checked-hover)}
+._j1ta1hou:disabled:checked+svg{--checkbox-tick-color:var(--local-tick-disabled)}
+._l71j1i6y._l71j1i6y:checked:focus+svg, ._t34a1i6y._t34a1i6y:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
+._q5a61gyf+svg{--checkbox-border-color:var(--local-border)}
+._r06hglyw{-webkit-appearance:none;appearance:none}
+._rphw18jz:checked:active+svg{--checkbox-tick-color:var(--local-tick-active)}
+._sg1j1vek:checked:active+svg{--checkbox-border-color:var(--local-border-active)}
+._tzy4idpf{opacity:0}
+._w12s155b:active+svg{--checkbox-background-color:var(--local-background-active)}
+._wje2mov0+svg{color:var(--checkbox-background-color)}
+._y32gkivo:hover+svg{--checkbox-background-color:var(--local-background-hover)}
+._y9y9mz2b:disabled+svg, ._141bmz2b:disabled:active+svg, ._255gmz2b:disabled:focus+svg, ._jj67mz2b:disabled:hover+svg, ._swhgmz2b:disabled[data-invalid]+svg{--checkbox-background-color:var(--local-background-disabled)}
+._yjhd1hou:disabled:indeterminate+svg{--checkbox-tick-color:var(--local-tick-disabled)}
+@media screen and (forced-colors:active){._w1cowc43+svg{--checkbox-background-color:Canvas}._jdqn1onz+svg{--checkbox-border-color:CanvasText}._4y4t1onz+svg{--checkbox-tick-color:CanvasText}._lvfrwc43:checked+svg, ._g68dwc43:checked:hover+svg{--checkbox-background-color:Canvas}._13dk1onz:checked+svg, ._w1el1onz:checked:hover+svg{--checkbox-border-color:CanvasText}._a9yw1onz:checked+svg, ._1l3g1onz:checked:hover+svg{--checkbox-tick-color:CanvasText}._dcdpgir2:focus+svg rect:first-of-type{stroke:Highlight}._wobcgir2[data-invalid]+svg{--checkbox-border-color:Highlight}._rp9wgir2:checked[data-invalid]+svg{--checkbox-border-color:Highlight}._9ebfwc43:disabled+svg, ._e43iwc43:disabled:active+svg, ._1tkuwc43:disabled:focus+svg, ._1lehwc43:disabled:hover+svg, ._b9q3wc43:disabled[data-invalid]+svg{--checkbox-background-color:Canvas}._tu2918qt:disabled+svg, ._1uxv18qt:disabled:active+svg, ._1ufw18qt:disabled:focus+svg, ._opo918qt:disabled:hover+svg, ._1e8318qt:disabled[data-invalid]+svg{--checkbox-border-color:GrayText}._1k3d18qt:disabled+svg, ._25yv18qt:disabled:active+svg, ._1igz18qt:disabled:focus+svg, ._c7cc18qt:disabled:hover+svg, ._1swg18qt:disabled[data-invalid]+svg{--checkbox-tick-color:GrayText}}