@atlaskit/checkbox 16.0.0 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/checkbox
 
+## 17.0.0
+
+### Major Changes
+
+- [#117762](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117762)
+  [`424fded960a12`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/424fded960a12) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/checkbox`, you will need to ensure that your bundler is configured
+  to handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 16.0.0
 
 ### Major Changes

package/dist/cjs/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}}

package/dist/cjs/checkbox.js

@@ -1,156 +1,27 @@
+/* checkbox.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./checkbox.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _colors = require("@atlaskit/theme/colors");
 var _internal = require("./internal");
-var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-var checkboxStyles = (0, _react2.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(_colors.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 _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss", "className"];
+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 checkboxStyles = null;
 
 /**
  * __Checkbox__
@@ -179,6 +50,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     isRequired = props.isRequired,
     testId = props.testId,
     xcss = props.xcss,
+    className = props.className,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _useState = (0, _react.useState)(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -196,7 +68,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "16.0.0"
+    packageVersion: "17.0.0"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
@@ -208,7 +80,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       internalRef.current.indeterminate = isIndeterminate;
     }
   }, [isIndeterminate]);
-  return (0, _react2.jsx)(_internal.Label, {
+  return /*#__PURE__*/React.createElement(_internal.Label, {
     isDisabled: isDisabled,
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
@@ -218,7 +90,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: xcss
-  }, (0, _react2.jsx)("input", (0, _extends2.default)({
+  }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0
   }, rest, {
@@ -229,15 +101,19 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     value: value,
     name: name,
     required: isRequired,
-    css: checkboxStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: (0, _runtime.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
-  })), (0, _react2.jsx)(_internal.CheckboxIcon, {
+    "data-invalid": isInvalid ? 'true' : undefined,
+    style: {
+      "--_gqccd2": (0, _runtime.ix)("var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")")))
+    }
+  })), /*#__PURE__*/React.createElement(_internal.CheckboxIcon, {
     isIndeterminate: isIndeterminate,
     isChecked: isChecked
-  }), label && (0, _react2.jsx)(_internal.LabelText, null, label, isRequired && (0, _react2.jsx)(_internal.RequiredIndicator, null)));
+  }), label && /*#__PURE__*/React.createElement(_internal.LabelText, null, label, isRequired && /*#__PURE__*/React.createElement(_internal.RequiredIndicator, null)));
 }));
 Checkbox.displayName = 'Checkbox';
 var _default = exports.default = Checkbox;

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

@@ -1,33 +1,31 @@
+/* checkbox-icon.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+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; }
 function getIcon(isIndeterminate, isChecked) {
   if (isIndeterminate) {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
     if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration')) {
-      return (0, _react2.jsx)("path", {
+      return /*#__PURE__*/React.createElement("path", {
         fillRule: "evenodd",
         clipRule: "evenodd",
         d: "M7.75 12.75H16.25V11.25H7.75V12.75Z",
         fill: "inherit"
       });
     } else {
-      return (0, _react2.jsx)("rect", {
+      return /*#__PURE__*/React.createElement("rect", {
         fill: "inherit",
         x: "8",
         y: "11",
@@ -40,14 +38,14 @@ function getIcon(isIndeterminate, isChecked) {
   if (isChecked) {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
     if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration')) {
-      return (0, _react2.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 (0, _react2.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"
       });
@@ -72,22 +70,22 @@ var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var icon = (0, _react.useMemo)(function () {
     return getIcon(isIndeterminate, isChecked);
   }, [isIndeterminate, isChecked]);
-  return (0, _react2.jsx)(_svg.default, {
+  return /*#__PURE__*/React.createElement(_svg.default, {
     label: "",
     primaryColor: "var(--checkbox-background-color)",
     secondaryColor: "var(--checkbox-tick-color)"
-  }, (0, _react2.jsx)("g", {
+  }, /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd"
   },
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
-  (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? (0, _react2.jsx)("rect", {
+  (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? /*#__PURE__*/React.createElement("rect", {
     fill: "currentColor",
     x: "5.5",
     y: "5.5",
     width: "13",
     height: "13",
     rx: "1.5"
-  }) : (0, _react2.jsx)("rect", {
+  }) : /*#__PURE__*/React.createElement("rect", {
     fill: "currentColor",
     x: "6",
     y: "6",

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

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

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

@@ -1,23 +1,20 @@
+/* label-text.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 = LabelText;
-var _react = require("@emotion/react");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var labelTextStyles = (0, _react.css)({
-  alignSelf: 'center',
-  gridArea: '1 / 2 / 2 / 3'
-});
+require("./label-text.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+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 labelTextStyles = null;
 function LabelText(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)("span", {
-    css: labelTextStyles
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_nd5l11ig _1wpz1h6o"])
   }, children);
 }

package/dist/cjs/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/cjs/internal/label.js

@@ -1,63 +1,21 @@
+/* label.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 = Label;
-var _react = require("@emotion/react");
+require("./label.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 baseStyles = (0, _react.css)({
-  display: 'grid',
-  gridAutoColumns: '1fr',
-  gridAutoRows: 'min-content',
-  color: "var(--ds-text, ".concat(_colors.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 = (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, ")"),
-  cursor: 'not-allowed'
-});
-var labelStyles = (0, _react.css)({
-  /**
-   * Background
-   */
-  '--local-background': "var(--ds-background-input, ".concat(_colors.N10, ")"),
-  '--local-background-active': "var(--ds-background-input-pressed, ".concat(_colors.B50, ")"),
-  '--local-background-checked': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
-  '--local-background-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
-  '--local-background-disabled': "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
-  '--local-background-hover': "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
-  /**
-   * Border
-   */
-  '--local-border': "var(--ds-border-input, ".concat(_colors.N100, ")"),
-  '--local-border-active': "var(--ds-border, ".concat(_colors.B50, ")"),
-  '--local-border-checked': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
-  '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
-  '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
-  '--local-border-disabled': "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
-  '--local-border-focus': "var(--ds-border-focused, ".concat(_colors.B200, ")"),
-  '--local-border-hover': "var(--ds-border-input, ".concat(_colors.N100, ")"),
-  '--local-border-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
-  /**
-   * Tick
-   */
-  '--local-tick-active': "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
-  '--local-tick-checked': "var(--ds-icon-inverse, ".concat(_colors.N10, ")"),
-  '--local-tick-disabled': "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
-  '--local-tick-rest': 'transparent'
-});
+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 baseStyles = null;
+var textLabelLayoutStyles = null;
+var disabledStyles = null;
+var labelStyles = null;
 function Label(_ref) {
   var children = _ref.children,
     isDisabled = _ref.isDisabled,
@@ -65,14 +23,28 @@ function Label(_ref) {
     label = _ref.label,
     id = _ref.id,
     xcss = _ref.xcss;
-  return (0, _react.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: (0, _runtime.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": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
+      "--_1l71759": (0, _runtime.ix)("var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)")),
+      "--_1ynhf1h": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N80, ")")),
+      "--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
+      "--_1cd0fcx": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.B50, ")")),
+      "--_1gcp7nr": (0, _runtime.ix)("var(--ds-background-selected-bold, ".concat(_colors.B400, ")")),
+      "--_14y1fod": (0, _runtime.ix)("var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")),
+      "--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
+      "--_1z08gfx": (0, _runtime.ix)("var(--ds-background-input-hovered, ".concat(_colors.N30, ")")),
+      "--_vnm8xo": (0, _runtime.ix)("var(--ds-border-input, ".concat(_colors.N100, ")")),
+      "--_rczcge": (0, _runtime.ix)("var(--ds-border, ".concat(_colors.B50, ")")),
+      "--_1i4xulb": (0, _runtime.ix)("var(--ds-border-danger, ".concat(_colors.R300, ")")),
+      "--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")")),
+      "--_uq1ko9": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.B400, ")")),
+      "--_jf353p": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.N10, ")")),
+      "--_1xmcmw9": (0, _runtime.ix)("var(--ds-icon-disabled, ".concat(_colors.N70, ")"))
+    }
   }, children);
 }

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

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

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, ")"))
+    }
+  }, "*");
 }