@atlaskit/checkbox 13.3.0 → 13.5.0

package/dist/cjs/checkbox.js

@@ -14,8 +14,9 @@ var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatform
 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", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
 /**  @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%',
@@ -26,6 +27,7 @@ var checkboxStyles = (0, _react2.css)({
   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
@@ -41,74 +43,91 @@ var checkboxStyles = (0, _react2.css)({
     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)'
   },
   '@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',
@@ -146,6 +165,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     value = props.value,
     isRequired = props.isRequired,
     testId = props.testId,
+    xcss = props.xcss,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _useState = (0, _react.useState)(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -163,7 +183,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.3.0"
+    packageVersion: "13.5.0"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
@@ -175,6 +195,11 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
+    // Currently the rule hasn't been updated to enable "allowed" dynamic pass-throughs.
+    // When there is more usage of this pattern we'll update the lint rule.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
   }, (0, _react2.jsx)("input", (0, _extends2.default)({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0

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

@@ -10,6 +10,8 @@ var _react2 = require("@emotion/react");
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
 /**  @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 function getIcon(isIndeterminate, isChecked) {
   if (isIndeterminate) {
     return (0, _react2.jsx)("rect", {

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

@@ -5,7 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 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',

package/dist/cjs/internal/label.js

@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Label;
 var _react = require("@emotion/react");
 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',
@@ -59,8 +63,13 @@ function Label(_ref) {
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label,
-    id = _ref.id;
+    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 -- Ignored via go/DSP-18766
+    className: xcss,
     css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,

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

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = RequiredIndicator;
 var _react = require("@emotion/react");
 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)({
-  paddingLeft: "var(--ds-space-025, 2px)",
-  color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
+  color: "var(--ds-text-danger, ".concat(_colors.R500, ")"),
+  paddingInlineStart: "var(--ds-space-025, 2px)"
 });
 function RequiredIndicator() {
   return (0, _react.jsx)("span", {

package/dist/es2019/checkbox.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**  @jsx jsx */
 import { forwardRef, memo, useCallback, 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';
@@ -16,6 +18,7 @@ const checkboxStyles = css({
   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
@@ -31,74 +34,91 @@ const checkboxStyles = css({
     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)'
   },
   '@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',
@@ -132,6 +152,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     value,
     isRequired,
     testId,
+    xcss,
     ...rest
   } = props;
   const [isCheckedState, setIsCheckedState] = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked);
@@ -147,7 +168,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.3.0"
+    packageVersion: "13.5.0"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);
@@ -159,6 +180,11 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     label: label,
     id: rest.id ? `${rest.id}-label` : undefined,
     testId: testId && `${testId}--checkbox-label`
+    // Currently the rule hasn't been updated to enable "allowed" dynamic pass-throughs.
+    // When there is more usage of this pattern we'll update the lint rule.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
   }, jsx("input", _extends({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0

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

@@ -1,5 +1,7 @@
 /**  @jsx jsx */
 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';
 function getIcon(isIndeterminate, isChecked) {

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

@@ -1,4 +1,8 @@
+/**
+ * @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',

package/dist/es2019/internal/label.js

@@ -1,4 +1,8 @@
+/**
+ * @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';
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 const baseStyles = css({
@@ -52,9 +56,14 @@ export default function Label({
   isDisabled,
   testId,
   label,
-  id
+  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 -- Ignored via go/DSP-18766
+    className: xcss,
     css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,

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

@@ -1,9 +1,13 @@
+/**
+ * @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';
 import { R500 } from '@atlaskit/theme/colors';
 const requiredIndicatorStyles = css({
-  paddingLeft: "var(--ds-space-025, 2px)",
-  color: `var(--ds-text-danger, ${R500})`
+  color: `var(--ds-text-danger, ${R500})`,
+  paddingInlineStart: "var(--ds-space-025, 2px)"
 });
 export default function RequiredIndicator() {
   return jsx("span", {

package/dist/esm/checkbox.js

@@ -1,9 +1,11 @@
 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", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
 /**  @jsx jsx */
 import { forwardRef, memo, useCallback, 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';
@@ -19,6 +21,7 @@ var checkboxStyles = css({
   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
@@ -34,74 +37,91 @@ var checkboxStyles = css({
     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)'
   },
   '@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',
@@ -139,6 +159,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     value = props.value,
     isRequired = props.isRequired,
     testId = props.testId,
+    xcss = props.xcss,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
     _useState2 = _slicedToArray(_useState, 2),
@@ -156,7 +177,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.3.0"
+    packageVersion: "13.5.0"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);
@@ -168,6 +189,11 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
+    // Currently the rule hasn't been updated to enable "allowed" dynamic pass-throughs.
+    // When there is more usage of this pattern we'll update the lint rule.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
   }, jsx("input", _extends({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0

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

@@ -1,5 +1,7 @@
 /**  @jsx jsx */
 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';
 function getIcon(isIndeterminate, isChecked) {

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

@@ -1,4 +1,8 @@
+/**
+ * @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',

package/dist/esm/internal/label.js

@@ -1,4 +1,8 @@
+/**
+ * @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';
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 var baseStyles = css({
@@ -52,8 +56,13 @@ export default function Label(_ref) {
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label,
-    id = _ref.id;
+    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 -- Ignored via go/DSP-18766
+    className: xcss,
     css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,

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

@@ -1,9 +1,13 @@
+/**
+ * @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';
 import { R500 } from '@atlaskit/theme/colors';
 var requiredIndicatorStyles = css({
-  paddingLeft: "var(--ds-space-025, 2px)",
-  color: "var(--ds-text-danger, ".concat(R500, ")")
+  color: "var(--ds-text-danger, ".concat(R500, ")"),
+  paddingInlineStart: "var(--ds-space-025, 2px)"
 });
 export default function RequiredIndicator() {
   return jsx("span", {

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

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

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

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

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

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