@atlaskit/checkbox 17.3.3 → 17.3.5

package/dist/es2019/checkbox.compiled.css

@@ -1,72 +1,13 @@
 
 ._19itglyw{border:none}
-._19op11so+svg rect:first-of-type{transition:stroke .2s ease-in-out}
-._1dk71nfn._1dk71nfn:focus+svg{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#2684ff)}
-._1ef78r4n._1ef78r4n:checked:focus+svg{border-radius:var(--ds-radius-small,.25rem)}
-._1h6r8r4n._1h6r8r4n:focus+svg{border-radius:var(--ds-radius-small,.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}
-._smzg1nfn._smzg1nfn:checked:focus+svg{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#2684ff)}._10oaq2ws:checked[data-invalid]+svg{--checkbox-border-color:var(--local-border-checked-invalid)}
-._10y313gf:disabled+svg{cursor:not-allowed}
-._12ji1r31{outline-color:currentColor}
+._nd5lfibj{grid-area:1/1/2/2}._12ji1r31{outline-color:currentColor}
 ._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
-._12sr13gf:disabled[data-invalid]+svg{cursor:not-allowed}
 ._12y31o36{outline-width:medium}
-._13wo93zu+svg{--checkbox-background-color:var(--local-background)}
-._141bmz2b:disabled:active+svg{--checkbox-background-color:var(--local-background-disabled)}
-._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{pointer-events:none}
-._18qu1ps2:indeterminate+svg{--checkbox-background-color:var(--local-background-checked)}
-._1adw13gf:disabled:hover+svg{cursor:not-allowed}
-._1ah9199y:hover+svg{--checkbox-border-color:var(--local-border-hover)}
-._1bok170n:checked+svg{--checkbox-border-color:var(--local-border-checked)}
 ._1bsb1osq{width:100%}
-._1efy1diq:disabled:hover+svg{--checkbox-border-color:var(--local-border-disabled)}
-._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)}
-._1jbnglyw:disabled[data-invalid]+svg{pointer-events:none}
-._1jiz1diq:disabled:active+svg{--checkbox-border-color:var(--local-border-disabled)}
-._1log17cl:indeterminate+svg{--checkbox-tick-color:var(--local-tick-checked)}
-._1mhr17cl:checked+svg{--checkbox-tick-color:var(--local-tick-checked)}
-._1niqglyw:disabled:focus+svg{pointer-events:none}
-._1oav1diq:disabled[data-invalid]+svg{--checkbox-border-color:var(--local-border-disabled)}
 ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
-._1vv91diq:disabled:indeterminate+svg{--checkbox-border-color:var(--local-border-disabled)}
-._1wt913gf:disabled:active+svg{cursor:not-allowed}
-._255gmz2b:disabled:focus+svg{--checkbox-background-color:var(--local-background-disabled)}
-._32hzmz2b:disabled:indeterminate+svg{--checkbox-background-color:var(--local-background-disabled)}
 ._4t3i1osq{height:100%}
-._693jglyw:disabled:active+svg{pointer-events:none}
 ._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{--checkbox-border-color:var(--local-border-disabled)}
-._cl9tglyw:disabled:hover+svg{pointer-events:none}
-._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)}
-._jj67mz2b:disabled:hover+svg{--checkbox-background-color:var(--local-background-disabled)}
-._l71j1i6y._l71j1i6y:checked:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
-._q5a61gyf+svg{--checkbox-border-color:var(--local-border)}
-._qq8613gf:disabled:focus+svg{cursor:not-allowed}
 ._r06hglyw{-webkit-appearance:none;appearance:none}
-._rphw18jz:checked:active+svg{--checkbox-tick-color:var(--local-tick-active)}
-._s9051diq:disabled:focus+svg{--checkbox-border-color:var(--local-border-disabled)}
-._sg1j1vek:checked:active+svg{--checkbox-border-color:var(--local-border-active)}
-._swhgmz2b:disabled[data-invalid]+svg{--checkbox-background-color:var(--local-background-disabled)}
-._t34a1i6y._t34a1i6y:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
-._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{--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{--checkbox-background-color:Canvas}._g68dwc43:checked:hover+svg{--checkbox-background-color:Canvas}._13dk1onz:checked+svg{--checkbox-border-color:CanvasText}._w1el1onz:checked:hover+svg{--checkbox-border-color:CanvasText}._a9yw1onz:checked+svg{--checkbox-tick-color:CanvasText}._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{--checkbox-background-color:Canvas}._e43iwc43:disabled:active+svg{--checkbox-background-color:Canvas}._1tkuwc43:disabled:focus+svg{--checkbox-background-color:Canvas}._1lehwc43:disabled:hover+svg{--checkbox-background-color:Canvas}._b9q3wc43:disabled[data-invalid]+svg{--checkbox-background-color:Canvas}._tu2918qt:disabled+svg{--checkbox-border-color:GrayText}._1uxv18qt:disabled:active+svg{--checkbox-border-color:GrayText}._1ufw18qt:disabled:focus+svg{--checkbox-border-color:GrayText}._opo918qt:disabled:hover+svg{--checkbox-border-color:GrayText}._1e8318qt:disabled[data-invalid]+svg{--checkbox-border-color:GrayText}._1k3d18qt:disabled+svg{--checkbox-tick-color:GrayText}._25yv18qt:disabled:active+svg{--checkbox-tick-color:GrayText}._1igz18qt:disabled:focus+svg{--checkbox-tick-color:GrayText}._c7cc18qt:disabled:hover+svg{--checkbox-tick-color:GrayText}._1swg18qt:disabled[data-invalid]+svg{--checkbox-tick-color:GrayText}}
+._tzy4idpf{opacity:0}

package/dist/es2019/checkbox.js

@@ -6,7 +6,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 /**
  * The input is visually hidden but remains in the DOM for accessibility.
@@ -17,19 +16,6 @@ const checkboxStyles = {
   root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf"
 };
 
-/**
- * Legacy hidden input styles with nested sibling selectors.
- * Used when the `platform-checkbox-atomic-styles` feature gate is disabled.
- * Using `cssMap` to avoid a Compiled bug with the transformed styles.
- * It was using a CSS variable for the outline template string,
- * which broke because of the use of a sibling selector.
- *
- * Related to: https://github.com/atlassian-labs/compiled/pull/1795
- */
-const checkboxStylesLegacy = {
-  root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n _smzg1nfn _1dk71nfn _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"
-};
-
 /**
  * __Checkbox__
  *
@@ -69,7 +55,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox({
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "0.0.0-development"
+    packageVersion: "17.3.4"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);
@@ -83,9 +69,9 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox({
   }, [isIndeterminate]);
   return /*#__PURE__*/React.createElement(Label, {
     isDisabled: isDisabled,
-    isChecked: fg('platform-checkbox-atomic-styles') ? isChecked : undefined,
-    isIndeterminate: fg('platform-checkbox-atomic-styles') ? isIndeterminate : undefined,
-    isInvalid: fg('platform-checkbox-atomic-styles') ? isInvalid : undefined,
+    isChecked: isChecked,
+    isIndeterminate: isIndeterminate,
+    isInvalid: isInvalid,
     label: label,
     id: rest.id ? `${rest.id}-label` : undefined,
     testId: testId && `${testId}--checkbox-label`
@@ -105,7 +91,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox({
     name: name,
     required: isRequired,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([fg('platform-checkbox-atomic-styles') && checkboxStyles.root, !fg('platform-checkbox-atomic-styles') && checkboxStylesLegacy.root, className]),
+    className: ax([checkboxStyles.root, className]),
     onChange: onChangeAnalytics,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && `${testId}--hidden-checkbox`,

package/dist/es2019/internal/checkbox-icon.compiled.css

@@ -10,5 +10,4 @@
 ._1snbe4h9{stroke-width:var(--ds-border-width,1px)}
 ._lcxvglyw{pointer-events:none}
 ._lswu1kgh{fill:var(--checkbox-tick-color,var(--ds-surface,#fff))}
-._lswuvuon{fill:var(--ds-surface,#fff)}
 ._syazmov0{color:var(--checkbox-background-color)}

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

@@ -3,7 +3,6 @@ import "./checkbox-icon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo, useMemo } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 /**
  * Styles for the checkbox icon.
  * CSS custom properties for colors are set by the parent Label element
@@ -13,12 +12,6 @@ const svgStyles = {
   root: "_nd5lfibj _1reo15vq _18m915vq _v5641mn3 _2rko12b0 _1a3742bt _lcxvglyw _syazmov0 _lswu1kgh _1cwg1i6y",
   rect: "_v56411so _1snbe4h9 _1s17hteq"
 };
-
-/**
- * Legacy SVG styles.
- * Used when the `platform-checkbox-atomic-styles` feature gate is disabled.
- */
-const svgStylesLegacy = null;
 function getIcon(isIndeterminate, isChecked) {
   if (isIndeterminate) {
     return /*#__PURE__*/React.createElement("path", {
@@ -53,39 +46,12 @@ const CheckboxIcon = /*#__PURE__*/memo(({
   isChecked
 }) => {
   const icon = useMemo(() => getIcon(isIndeterminate, isChecked), [isIndeterminate, isChecked]);
-  if (fg('platform-checkbox-atomic-styles')) {
-    return /*#__PURE__*/React.createElement("svg", {
-      width: 24,
-      height: 24,
-      viewBox: "0 0 24 24",
-      role: "presentation",
-      className: ax([svgStyles.root])
-    }, /*#__PURE__*/React.createElement("g", {
-      fillRule: "evenodd"
-    }, /*#__PURE__*/React.createElement("rect", {
-      fill: "currentColor",
-      x: "5.5",
-      y: "5.5",
-      width: "13",
-      height: "13",
-      rx: "1.5",
-      className: ax([svgStyles.rect])
-    }), icon));
-  }
-
-  // Legacy rendering with inline style props for CSS variable consumption
   return /*#__PURE__*/React.createElement("svg", {
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      color: 'var(--checkbox-background-color)',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      fill: 'var(--checkbox-tick-color)'
-    },
     role: "presentation",
-    className: ax(["_1reo15vq _18m915vq _lswuvuon _lcxvglyw"])
+    className: ax([svgStyles.root])
   }, /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("rect", {
@@ -94,7 +60,8 @@ const CheckboxIcon = /*#__PURE__*/memo(({
     y: "5.5",
     width: "13",
     height: "13",
-    rx: "1.5"
+    rx: "1.5",
+    className: ax([svgStyles.rect])
   }), icon));
 });
 export default CheckboxIcon;

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

@@ -1,43 +1,23 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"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)}
 ._1c53glyw{--checkbox-outline:none}
-._1dikhh5a{--local-border-checked-hover:var(--ds-background-selected-bold-hovered,#0065ff)}
 ._1e0c11p5{display:grid}
 ._1e9d1j28{--checkbox-tick-color:transparent}
 ._1e9d2sac{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
 ._1e9d5w2r{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
 ._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)}
 ._1qwn1j9a{--checkbox-background-color:var(--ds-background-input,#fff)}
 ._1qwnby5v{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
 ._1qwnjmqp{--checkbox-background-color:var(--ds-background-selected-bold,#1868db)}
-._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)}
 ._f0gr1bqt{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
 ._f0grby5v{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
 ._f0grjmqp{--checkbox-border-color:var(--ds-background-selected-bold,#1868db)}
 ._f0grrsbi{--checkbox-border-color:var(--ds-border-input,#8c8f97)}
-._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)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
-._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}
 ._ljcgdfik:focus-within{--checkbox-outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
 ._1vj51q28:hover{--checkbox-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}

package/dist/es2019/internal/label.js

@@ -1,9 +1,4 @@
 /* label.tsx generated by @compiled/babel-plugin v0.38.1 */
-import "./label.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
-import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 /**
  * Base state styles with CSS custom properties.
  * Pseudo-selectors (:hover, :focus-within, :active) on the label element
@@ -13,6 +8,9 @@ import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from
  * Uses `css` over `cssMap` to work around a bug in Compiled types when
  * using CSS variables in pseudo-selectors.
  */
+import "./label.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 const baseStyles = null;
 const textLabelLayoutStyles = null;
 
@@ -27,15 +25,6 @@ const disabledStyles = null;
 
 // Disabled + Checked/Indeterminate
 const disabledCheckedStyles = null;
-
-/**
- * Legacy label styles with --local-* CSS custom properties.
- * These are consumed by the nested sibling selectors in checkbox.tsx.
- */
-const legacyBaseStyles = null;
-const legacyTextLabelLayoutStyles = null;
-const legacyDisabledStyles = null;
-const legacyLabelStyles = null;
 export default function Label({
   children,
   isDisabled,
@@ -47,16 +36,8 @@ export default function Label({
   id,
   xcss
 }) {
-  if (fg('platform-checkbox-atomic-styles')) {
-    return /*#__PURE__*/React.createElement("label", {
-      className: ax(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "_1qwnby5v _f0grby5v _syaz1tvo _80om13gf _1vj5by5v _q29qby5v _dh4gby5v _cz1uby5v _jom5wc43 _1s0718qt _106f18qt", isDisabled && (isChecked || isIndeterminate) && "_1e9d2sac _9js12sac _zoo92sac", xcss]),
-      "data-testid": testId,
-      "data-disabled": isDisabled || undefined,
-      id: id
-    }, children);
-  }
   return /*#__PURE__*/React.createElement("label", {
-    className: ax(["_11c8fhey _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]),
+    className: ax(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "_1qwnby5v _f0grby5v _syaz1tvo _80om13gf _1vj5by5v _q29qby5v _dh4gby5v _cz1uby5v _jom5wc43 _1s0718qt _106f18qt", isDisabled && (isChecked || isIndeterminate) && "_1e9d2sac _9js12sac _zoo92sac", xcss]),
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,
     id: id

package/dist/esm/checkbox.compiled.css

@@ -1,72 +1,13 @@
 
 ._19itglyw{border:none}
-._19op11so+svg rect:first-of-type{transition:stroke .2s ease-in-out}
-._1dk71nfn._1dk71nfn:focus+svg{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#2684ff)}
-._1ef78r4n._1ef78r4n:checked:focus+svg{border-radius:var(--ds-radius-small,.25rem)}
-._1h6r8r4n._1h6r8r4n:focus+svg{border-radius:var(--ds-radius-small,.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}
-._smzg1nfn._smzg1nfn:checked:focus+svg{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#2684ff)}._10oaq2ws:checked[data-invalid]+svg{--checkbox-border-color:var(--local-border-checked-invalid)}
-._10y313gf:disabled+svg{cursor:not-allowed}
-._12ji1r31{outline-color:currentColor}
+._nd5lfibj{grid-area:1/1/2/2}._12ji1r31{outline-color:currentColor}
 ._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
-._12sr13gf:disabled[data-invalid]+svg{cursor:not-allowed}
 ._12y31o36{outline-width:medium}
-._13wo93zu+svg{--checkbox-background-color:var(--local-background)}
-._141bmz2b:disabled:active+svg{--checkbox-background-color:var(--local-background-disabled)}
-._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{pointer-events:none}
-._18qu1ps2:indeterminate+svg{--checkbox-background-color:var(--local-background-checked)}
-._1adw13gf:disabled:hover+svg{cursor:not-allowed}
-._1ah9199y:hover+svg{--checkbox-border-color:var(--local-border-hover)}
-._1bok170n:checked+svg{--checkbox-border-color:var(--local-border-checked)}
 ._1bsb1osq{width:100%}
-._1efy1diq:disabled:hover+svg{--checkbox-border-color:var(--local-border-disabled)}
-._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)}
-._1jbnglyw:disabled[data-invalid]+svg{pointer-events:none}
-._1jiz1diq:disabled:active+svg{--checkbox-border-color:var(--local-border-disabled)}
-._1log17cl:indeterminate+svg{--checkbox-tick-color:var(--local-tick-checked)}
-._1mhr17cl:checked+svg{--checkbox-tick-color:var(--local-tick-checked)}
-._1niqglyw:disabled:focus+svg{pointer-events:none}
-._1oav1diq:disabled[data-invalid]+svg{--checkbox-border-color:var(--local-border-disabled)}
 ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
-._1vv91diq:disabled:indeterminate+svg{--checkbox-border-color:var(--local-border-disabled)}
-._1wt913gf:disabled:active+svg{cursor:not-allowed}
-._255gmz2b:disabled:focus+svg{--checkbox-background-color:var(--local-background-disabled)}
-._32hzmz2b:disabled:indeterminate+svg{--checkbox-background-color:var(--local-background-disabled)}
 ._4t3i1osq{height:100%}
-._693jglyw:disabled:active+svg{pointer-events:none}
 ._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{--checkbox-border-color:var(--local-border-disabled)}
-._cl9tglyw:disabled:hover+svg{pointer-events:none}
-._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)}
-._jj67mz2b:disabled:hover+svg{--checkbox-background-color:var(--local-background-disabled)}
-._l71j1i6y._l71j1i6y:checked:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
-._q5a61gyf+svg{--checkbox-border-color:var(--local-border)}
-._qq8613gf:disabled:focus+svg{cursor:not-allowed}
 ._r06hglyw{-webkit-appearance:none;appearance:none}
-._rphw18jz:checked:active+svg{--checkbox-tick-color:var(--local-tick-active)}
-._s9051diq:disabled:focus+svg{--checkbox-border-color:var(--local-border-disabled)}
-._sg1j1vek:checked:active+svg{--checkbox-border-color:var(--local-border-active)}
-._swhgmz2b:disabled[data-invalid]+svg{--checkbox-background-color:var(--local-background-disabled)}
-._t34a1i6y._t34a1i6y:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
-._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{--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{--checkbox-background-color:Canvas}._g68dwc43:checked:hover+svg{--checkbox-background-color:Canvas}._13dk1onz:checked+svg{--checkbox-border-color:CanvasText}._w1el1onz:checked:hover+svg{--checkbox-border-color:CanvasText}._a9yw1onz:checked+svg{--checkbox-tick-color:CanvasText}._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{--checkbox-background-color:Canvas}._e43iwc43:disabled:active+svg{--checkbox-background-color:Canvas}._1tkuwc43:disabled:focus+svg{--checkbox-background-color:Canvas}._1lehwc43:disabled:hover+svg{--checkbox-background-color:Canvas}._b9q3wc43:disabled[data-invalid]+svg{--checkbox-background-color:Canvas}._tu2918qt:disabled+svg{--checkbox-border-color:GrayText}._1uxv18qt:disabled:active+svg{--checkbox-border-color:GrayText}._1ufw18qt:disabled:focus+svg{--checkbox-border-color:GrayText}._opo918qt:disabled:hover+svg{--checkbox-border-color:GrayText}._1e8318qt:disabled[data-invalid]+svg{--checkbox-border-color:GrayText}._1k3d18qt:disabled+svg{--checkbox-tick-color:GrayText}._25yv18qt:disabled:active+svg{--checkbox-tick-color:GrayText}._1igz18qt:disabled:focus+svg{--checkbox-tick-color:GrayText}._c7cc18qt:disabled:hover+svg{--checkbox-tick-color:GrayText}._1swg18qt:disabled[data-invalid]+svg{--checkbox-tick-color:GrayText}}
+._tzy4idpf{opacity:0}

package/dist/esm/checkbox.js

@@ -9,7 +9,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 /**
  * The input is visually hidden but remains in the DOM for accessibility.
@@ -20,19 +19,6 @@ var checkboxStyles = {
   root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf"
 };
 
-/**
- * Legacy hidden input styles with nested sibling selectors.
- * Used when the `platform-checkbox-atomic-styles` feature gate is disabled.
- * Using `cssMap` to avoid a Compiled bug with the transformed styles.
- * It was using a CSS variable for the outline template string,
- * which broke because of the use of a sibling selector.
- *
- * Related to: https://github.com/atlassian-labs/compiled/pull/1795
- */
-var checkboxStylesLegacy = {
-  root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n _smzg1nfn _1dk71nfn _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"
-};
-
 /**
  * __Checkbox__
  *
@@ -78,7 +64,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(_ref
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "0.0.0-development"
+    packageVersion: "17.3.4"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);
@@ -92,9 +78,9 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(_ref
   }, [isIndeterminate]);
   return /*#__PURE__*/React.createElement(Label, {
     isDisabled: isDisabled,
-    isChecked: fg('platform-checkbox-atomic-styles') ? isChecked : undefined,
-    isIndeterminate: fg('platform-checkbox-atomic-styles') ? isIndeterminate : undefined,
-    isInvalid: fg('platform-checkbox-atomic-styles') ? isInvalid : undefined,
+    isChecked: isChecked,
+    isIndeterminate: isIndeterminate,
+    isInvalid: isInvalid,
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
@@ -114,7 +100,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(_ref
     name: name,
     required: isRequired,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([fg('platform-checkbox-atomic-styles') && checkboxStyles.root, !fg('platform-checkbox-atomic-styles') && checkboxStylesLegacy.root, className]),
+    className: ax([checkboxStyles.root, className]),
     onChange: onChangeAnalytics,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),

package/dist/esm/internal/checkbox-icon.compiled.css

@@ -10,5 +10,4 @@
 ._1snbe4h9{stroke-width:var(--ds-border-width,1px)}
 ._lcxvglyw{pointer-events:none}
 ._lswu1kgh{fill:var(--checkbox-tick-color,var(--ds-surface,#fff))}
-._lswuvuon{fill:var(--ds-surface,#fff)}
 ._syazmov0{color:var(--checkbox-background-color)}

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

@@ -3,7 +3,6 @@ import "./checkbox-icon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo, useMemo } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 /**
  * Styles for the checkbox icon.
  * CSS custom properties for colors are set by the parent Label element
@@ -13,12 +12,6 @@ var svgStyles = {
   root: "_nd5lfibj _1reo15vq _18m915vq _v5641mn3 _2rko12b0 _1a3742bt _lcxvglyw _syazmov0 _lswu1kgh _1cwg1i6y",
   rect: "_v56411so _1snbe4h9 _1s17hteq"
 };
-
-/**
- * Legacy SVG styles.
- * Used when the `platform-checkbox-atomic-styles` feature gate is disabled.
- */
-var svgStylesLegacy = null;
 function getIcon(isIndeterminate, isChecked) {
   if (isIndeterminate) {
     return /*#__PURE__*/React.createElement("path", {
@@ -54,39 +47,12 @@ var CheckboxIcon = /*#__PURE__*/memo(function (_ref) {
   var icon = useMemo(function () {
     return getIcon(isIndeterminate, isChecked);
   }, [isIndeterminate, isChecked]);
-  if (fg('platform-checkbox-atomic-styles')) {
-    return /*#__PURE__*/React.createElement("svg", {
-      width: 24,
-      height: 24,
-      viewBox: "0 0 24 24",
-      role: "presentation",
-      className: ax([svgStyles.root])
-    }, /*#__PURE__*/React.createElement("g", {
-      fillRule: "evenodd"
-    }, /*#__PURE__*/React.createElement("rect", {
-      fill: "currentColor",
-      x: "5.5",
-      y: "5.5",
-      width: "13",
-      height: "13",
-      rx: "1.5",
-      className: ax([svgStyles.rect])
-    }), icon));
-  }
-
-  // Legacy rendering with inline style props for CSS variable consumption
   return /*#__PURE__*/React.createElement("svg", {
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      color: 'var(--checkbox-background-color)',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      fill: 'var(--checkbox-tick-color)'
-    },
     role: "presentation",
-    className: ax(["_1reo15vq _18m915vq _lswuvuon _lcxvglyw"])
+    className: ax([svgStyles.root])
   }, /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("rect", {
@@ -95,7 +61,8 @@ var CheckboxIcon = /*#__PURE__*/memo(function (_ref) {
     y: "5.5",
     width: "13",
     height: "13",
-    rx: "1.5"
+    rx: "1.5",
+    className: ax([svgStyles.rect])
   }), icon));
 });
 export default CheckboxIcon;

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

@@ -1,44 +1,23 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._zulp1nu5{gap:var(--ds-space-0,0) var(--ds-space-050,4px)}
-._13hr1j28{--local-tick-rest:transparent}
-._18q0snw8{--local-tick-disabled:var(--_1xmcmw9)}
 ._1c53glyw{--checkbox-outline:none}
-._1dik1ehr{--local-border-checked-hover:var(--_14y1fod)}
 ._1e0c11p5{display:grid}
 ._1e9d1j28{--checkbox-tick-color:transparent}
 ._1e9d2sac{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
 ._1e9d5w2r{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
 ._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)}
 ._1qwn1j9a{--checkbox-background-color:var(--ds-background-input,#fff)}
 ._1qwnby5v{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
 ._1qwnjmqp{--checkbox-background-color:var(--ds-background-selected-bold,#1868db)}
-._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)}
 ._f0gr1bqt{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
 ._f0grby5v{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
 ._f0grjmqp{--checkbox-border-color:var(--ds-background-selected-bold,#1868db)}
 ._f0grrsbi{--checkbox-border-color:var(--ds-border-input,#8c8f97)}
-._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)}
 ._syaz1tvo{color:var(--ds-text-disabled,#97a0af)}
-._syaz7wap{color:var(--_1ynhf1h)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
-._syazovqm{color:var(--_5xk3r4)}
 ._umai184x{grid-auto-rows:min-content}
-._yp0j1ehr{--local-background-checked-hover:var(--_14y1fod)}
 ._yv0ey09t{grid-template-columns:min-content auto}
 ._ljcgdfik:focus-within{--checkbox-outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
 ._1vj51q28:hover{--checkbox-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}