@atlaskit/checkbox 17.3.3 → 17.3.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/checkbox
 
+## 17.3.5
+
+### Patch Changes
+
+- [`03f794ce20f2f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/03f794ce20f2f) -
+  Clean up and removal of the `platform-checkbox-atomic-styles` feature gate.
+
+## 17.3.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.3.3
 
 ### Patch Changes

package/codemods/migrations/remove-imports.tsx

@@ -1,6 +1,9 @@
 import { createRemoveImportsFor } from '../utils';
 
-export const removeThemeImports: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRemoveImportsFor({
+export const removeThemeImports: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveImportsFor({
 	importsToRemove: ['ComponentTokens', 'ThemeFn'],
 	packagePath: '@atlaskit/checkbox/types',
 	comment: `This file uses exports used to help theme @atlaskit/checkbox which

package/codemods/migrations/remove-props.tsx

@@ -1,8 +1,14 @@
 import { createRemoveFuncFor } from '../utils';
 
-export const removeFullWidth: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'isFullWidth');
+export const removeFullWidth: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'isFullWidth');
 
-export const removeOverrides: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRemoveFuncFor(
+export const removeOverrides: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor(
 	'@atlaskit/checkbox',
 	'Checkbox',
 	'overrides',
@@ -13,7 +19,10 @@ export const removeOverrides: (j: import("jscodeshift/src/core").JSCodeshift, so
   of Checkbox will have likely changed.`,
 );
 
-export const removeTheme: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRemoveFuncFor(
+export const removeTheme: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor(
 	'@atlaskit/checkbox',
 	'Checkbox',
 	'theme',
@@ -24,4 +33,7 @@ export const removeTheme: (j: import("jscodeshift/src/core").JSCodeshift, source
   The appearance of Checkbox will have likely changed.`,
 );
 
-export const removeSize: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'size');
+export const removeSize: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'size');

package/codemods/migrations/rename-import.tsx

@@ -4,19 +4,28 @@ import { createRenameImportFor } from '../utils';
 // there are a lot of possible things to fix. Having searched on SourceTree
 // these are the only things that need to be fixed
 
-export const renameTypeImport: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRenameImportFor({
+export const renameTypeImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
 	componentName: 'CheckboxProps',
 	oldPackagePath: '@atlaskit/checkbox/types',
 	newPackagePath: '@atlaskit/checkbox',
 });
 
-export const renameDeepTypeImport: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRenameImportFor({
+export const renameDeepTypeImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
 	componentName: 'CheckboxProps',
 	oldPackagePath: '@atlaskit/checkbox/dist/cjs/types',
 	newPackagePath: '@atlaskit/checkbox',
 });
 
-export const renameCheckboxWithoutAnalyticsImport: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRenameImportFor({
+export const renameCheckboxWithoutAnalyticsImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
 	componentName: 'CheckboxWithoutAnalytics',
 	newComponentName: 'Checkbox',
 	oldPackagePath: '@atlaskit/checkbox/Checkbox',

package/codemods/migrations/rename-input-ref-to-ref.tsx

@@ -1,8 +1,6 @@
 import { createRenameFuncFor } from '../utils';
 
-export const renameInputRef: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRenameFuncFor(
-	'@atlaskit/checkbox',
-	'Checkbox',
-	'inputRef',
-	'ref',
-);
+export const renameInputRef: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameFuncFor('@atlaskit/checkbox', 'Checkbox', 'inputRef', 'ref');

package/codemods/utils.tsx

@@ -20,7 +20,7 @@ export function getNamedSpecifier(
 	source: any,
 	specifier: string,
 	importName: string,
-) {
+): any {
 	const specifiers = source
 		.find(j.ImportDeclaration)
 		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
@@ -61,7 +61,11 @@ export function getJSXAttributesByName(
 		});
 }
 
-export function hasImportDeclaration(j: core.JSCodeshift, source: any, importPath: string) {
+export function hasImportDeclaration(
+	j: core.JSCodeshift,
+	source: any,
+	importPath: string,
+): boolean {
 	const imports = source
 		.find(j.ImportDeclaration)
 		.filter(
@@ -78,7 +82,7 @@ export function findIdentifierAndReplaceAttribute(
 	identifierName: string,
 	searchAttr: string,
 	replaceWithAttr: string,
-) {
+): void {
 	source
 		.find(j.JSXElement)
 		.find(j.JSXOpeningElement)
@@ -136,7 +140,7 @@ export function addCommentToStartOfFile({
 	j: core.JSCodeshift;
 	base: Collection<Node>;
 	message: string;
-}) {
+}): void {
 	addCommentBefore({
 		j,
 		target: base.find(j.Program),
@@ -152,7 +156,7 @@ export function addCommentBefore({
 	j: core.JSCodeshift;
 	target: Collection<Program> | Collection<ImportDeclaration>;
 	message: string;
-}) {
+}): void {
 	const content: string = ` TODO: (from codemod) ${clean(message)} `;
 	target.forEach((path: ASTPath<Program | ImportDeclaration>) => {
 		path.value.comments = path.value.comments || [];
@@ -178,7 +182,7 @@ export function tryCreateImport({
 	base: Collection<any>;
 	relativeToPackage: string;
 	packageName: string;
-}) {
+}): void {
 	const exists: boolean =
 		base.find(j.ImportDeclaration).filter((path) => path.value.source.value === packageName)
 			.length > 0;
@@ -203,7 +207,7 @@ export function addToImport({
 	base: Collection<any>;
 	importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
 	packageName: string;
-}) {
+}): void {
 	base
 		.find(j.ImportDeclaration)
 		.filter((path) => path.value.source.value === packageName)
@@ -223,7 +227,12 @@ export function addToImport({
 		});
 }
 
-export const createRenameFuncFor =
+export const createRenameFuncFor: (
+	component: string,
+	importName: string,
+	from: string,
+	to: string,
+) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	(component: string, importName: string, from: string, to: string) =>
 	(j: core.JSCodeshift, source: Collection<Node>) => {
 		const specifier = getNamedSpecifier(j, source, component, importName);
@@ -253,7 +262,12 @@ export const createRenameFuncFor =
 		}
 	};
 
-export const createRemoveFuncFor =
+export const createRemoveFuncFor: (
+	component: string,
+	importName: string,
+	prop: string,
+	comment?: string,
+) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	(component: string, importName: string, prop: string, comment?: string) =>
 	(j: core.JSCodeshift, source: Collection<Node>) => {
 		const specifier =
@@ -274,7 +288,17 @@ export const createRemoveFuncFor =
 		});
 	};
 
-export const createRenameImportFor =
+export const createRenameImportFor: ({
+	componentName,
+	newComponentName,
+	oldPackagePath,
+	newPackagePath,
+}: {
+	componentName: string;
+	newComponentName?: string;
+	oldPackagePath: string;
+	newPackagePath: string;
+}) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	({
 		componentName,
 		newComponentName,
@@ -355,7 +379,15 @@ export const createRenameImportFor =
 			.remove();
 	};
 
-export const createRemoveImportsFor =
+export const createRemoveImportsFor: ({
+	importsToRemove,
+	packagePath,
+	comment,
+}: {
+	importsToRemove: string[];
+	packagePath: string;
+	comment: string;
+}) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	({
 		importsToRemove,
 		packagePath,
@@ -425,16 +457,21 @@ export const createRemoveImportsFor =
 		}
 	};
 
-export const createTransformer =
+export const createTransformer: (
+	component: string,
+	migrates: {
+		(j: core.JSCodeshift, source: Collection<Node>): void;
+	}[],
+) => (fileInfo: FileInfo, { jscodeshift }: API, options: Options) => string =
 	(component: string, migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[]) =>
-	(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
-		const source: Collection<Node> = j(fileInfo.source);
+	(fileInfo: FileInfo, { jscodeshift }: API, options: Options) => {
+		const source: Collection<Node> = jscodeshift(fileInfo.source);
 
-		if (!hasImportDeclaration(j, source, component)) {
+		if (!hasImportDeclaration(jscodeshift, source, component)) {
 			return fileInfo.source;
 		}
 
-		migrates.forEach((tf) => tf(j, source));
+		migrates.forEach((tf) => tf(jscodeshift, source));
 
 		return source.toSource(options.printOptions || { quote: 'single' });
 	};

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

@@ -16,7 +16,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _internal = require("./internal");
 var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss", "className"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -29,19 +28,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__
  *
@@ -87,7 +73,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "0.0.0-development"
+    packageVersion: "17.3.4"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
@@ -101,9 +87,9 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
   }, [isIndeterminate]);
   return /*#__PURE__*/React.createElement(_internal.Label, {
     isDisabled: isDisabled,
-    isChecked: (0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles') ? isChecked : undefined,
-    isIndeterminate: (0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles') ? isIndeterminate : undefined,
-    isInvalid: (0, _platformFeatureFlags.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")
@@ -123,7 +109,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     name: name,
     required: isRequired,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles') && checkboxStyles.root, !(0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles') && checkboxStylesLegacy.root, className]),
+    className: (0, _runtime.ax)([checkboxStyles.root, className]),
     onChange: onChangeAnalytics,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),

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

@@ -10,7 +10,6 @@ require("./checkbox-icon.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Styles for the checkbox icon.
@@ -21,12 +20,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", {
@@ -62,39 +55,12 @@ var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var icon = (0, _react.useMemo)(function () {
     return getIcon(isIndeterminate, isChecked);
   }, [isIndeterminate, isChecked]);
-  if ((0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles')) {
-    return /*#__PURE__*/React.createElement("svg", {
-      width: 24,
-      height: 24,
-      viewBox: "0 0 24 24",
-      role: "presentation",
-      className: (0, _runtime.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: (0, _runtime.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: (0, _runtime.ax)(["_1reo15vq _18m915vq _lswuvuon _lcxvglyw"])
+    className: (0, _runtime.ax)([svgStyles.root])
   }, /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("rect", {
@@ -103,7 +69,8 @@ var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     y: "5.5",
     width: "13",
     height: "13",
-    rx: "1.5"
+    rx: "1.5",
+    className: (0, _runtime.ax)([svgStyles.rect])
   }), icon));
 });
 var _default = exports.default = CheckboxIcon;

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

package/dist/cjs/internal/label.js

@@ -1,4 +1,13 @@
 /* label.tsx generated by @compiled/babel-plugin v0.38.1 */
+/**
+ * Base state styles with CSS custom properties.
+ * Pseudo-selectors (:hover, :focus-within, :active) on the label element
+ * update CSS variables that cascade to the CheckboxIcon.
+ * This avoids nested sibling selectors.
+ *
+ * Uses `css` over `cssMap` to work around a bug in Compiled types when
+ * using CSS variables in pseudo-selectors.
+ */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -9,18 +18,7 @@ exports.default = Label;
 require("./label.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
- * Base state styles with CSS custom properties.
- * Pseudo-selectors (:hover, :focus-within, :active) on the label element
- * update CSS variables that cascade to the CheckboxIcon.
- * This avoids nested sibling selectors.
- *
- * Uses `css` over `cssMap` to work around a bug in Compiled types when
- * using CSS variables in pseudo-selectors.
- */
 var baseStyles = null;
 var textLabelLayoutStyles = null;
 
@@ -35,15 +33,6 @@ var disabledStyles = null;
 
 // Disabled + Checked/Indeterminate
 var disabledCheckedStyles = null;
-
-/**
- * Legacy label styles with --local-* CSS custom properties.
- * These are consumed by the nested sibling selectors in checkbox.tsx.
- */
-var legacyBaseStyles = null;
-var legacyTextLabelLayoutStyles = null;
-var legacyDisabledStyles = null;
-var legacyLabelStyles = null;
 function Label(_ref) {
   var children = _ref.children,
     isDisabled = _ref.isDisabled,
@@ -54,35 +43,10 @@ function Label(_ref) {
     label = _ref.label,
     id = _ref.id,
     xcss = _ref.xcss;
-  if ((0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles')) {
-    return /*#__PURE__*/React.createElement("label", {
-      className: (0, _runtime.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: (0, _runtime.ax)(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _syazovqm _80om73ad", label && "_zulp1nu5 _yv0ey09t", isDisabled && "_syaz7wap _80om13gf", "_h5e31kd8 _1nzs1kc0 _1esz1j4g _yp0j1ehr _ay2w1ouc _d51u12ci _phftddza _1g1fe69j _l6wk1j4g _1dik1ehr _1sfg1380 _fpdj1ouc _1yjc3zdg _oaj1ddza _1j3h1380 _eawbxz7c _1rdaeh7q _18q0snw8 _13hr1j28", xcss]),
+    className: (0, _runtime.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,
-    style: {
-      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
-      "--_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, ")"))
-    }
+    id: id
   }, children);
 }