@atlaskit/ds-explorations - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

CHANGELOG.md

 # @atlaskit/ds-explorations
 
+## 4.1.0
+
+### Minor Changes
+
+- [#109764](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109764)
+  [`1a7a3be1e63f7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1a7a3be1e63f7) -
+  Change the InteractionSurface background styles' internal psuedo-selector (no expected difference
+  to specificity or anything)
+
 ## 4.0.1
@@ -4,0 +13,0 @@

dist/cjs/components/interaction-surface.partial.js

@@ -17,3 +17,3 @@ "use strict";
   cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '~ *': {
@@ -57,3 +57,3 @@ position: 'relative',
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::20a64bcc5ec33a2c6ae1165f4a723310>>
+ * @codegen <<SignedSource::5ab510545ffee62181b873849498c57e>>
  * @codegenId interactions
@@ -66,3 +66,3 @@ * @codegenCommand yarn codegen-styles
   'accent.lime.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtlest-pressed, #B3DF72)"
@@ -72,3 +72,3 @@ }
   'accent.lime.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtler-pressed, #94C748)"
@@ -78,3 +78,3 @@ }
   'accent.lime.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtle-pressed, #D3F1A7)"
@@ -84,3 +84,3 @@ }
   'accent.lime.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-bolder-pressed, #37471F)"
@@ -90,3 +90,3 @@ }
   'accent.red.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FD9891)"
@@ -96,3 +96,3 @@ }
   'accent.red.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #F87168)"
@@ -102,3 +102,3 @@ }
   'accent.red.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtle-pressed, #FFD5D2)"
@@ -108,3 +108,3 @@ }
   'accent.red.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-bolder-pressed, #5D1F1A)"
@@ -114,3 +114,3 @@ }
   'accent.orange.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtlest-pressed, #FEC195)"
@@ -120,3 +120,3 @@ }
   'accent.orange.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtler-pressed, #FEA362)"
@@ -126,3 +126,3 @@ }
   'accent.orange.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtle-pressed, #FEDEC8)"
@@ -132,3 +132,3 @@ }
   'accent.orange.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-bolder-pressed, #702E00)"
@@ -138,3 +138,3 @@ }
   'accent.yellow.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
@@ -144,3 +144,3 @@ }
   'accent.yellow.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"
@@ -150,3 +150,3 @@ }
   'accent.yellow.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtle-pressed, #CF9F02)"
@@ -156,3 +156,3 @@ }
   'accent.yellow.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"
@@ -162,3 +162,3 @@ }
   'accent.green.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtlest-pressed, #7EE2B8)"
@@ -168,3 +168,3 @@ }
   'accent.green.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #4BCE97)"
@@ -174,3 +174,3 @@ }
   'accent.green.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtle-pressed, #BAF3DB)"
@@ -180,3 +180,3 @@ }
   'accent.green.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-bolder-pressed, #164B35)"
@@ -186,3 +186,3 @@ }
   'accent.teal.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtlest-pressed, #9DD9EE)"
@@ -192,3 +192,3 @@ }
   'accent.teal.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtler-pressed, #6CC3E0)"
@@ -198,3 +198,3 @@ }
   'accent.teal.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtle-pressed, #C6EDFB)"
@@ -204,3 +204,3 @@ }
   'accent.teal.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-bolder-pressed, #164555)"
@@ -210,3 +210,3 @@ }
   'accent.blue.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtlest-pressed, #85B8FF)"
@@ -216,3 +216,3 @@ }
   'accent.blue.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtler-pressed, #579DFF)"
@@ -222,3 +222,3 @@ }
   'accent.blue.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtle-pressed, #CCE0FF)"
@@ -228,3 +228,3 @@ }
   'accent.blue.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-bolder-pressed, #09326C)"
@@ -234,3 +234,3 @@ }
   'accent.purple.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtlest-pressed, #B8ACF6)"
@@ -240,3 +240,3 @@ }
   'accent.purple.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtler-pressed, #9F8FEF)"
@@ -246,3 +246,3 @@ }
   'accent.purple.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtle-pressed, #DFD8FD)"
@@ -252,3 +252,3 @@ }
   'accent.purple.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-bolder-pressed, #352C63)"
@@ -258,3 +258,3 @@ }
   'accent.magenta.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"
@@ -264,3 +264,3 @@ }
   'accent.magenta.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"
@@ -270,3 +270,3 @@ }
   'accent.magenta.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtle-pressed, #FDD0EC)"
@@ -276,3 +276,3 @@ }
   'accent.magenta.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)"
@@ -282,3 +282,3 @@ }
   'accent.gray.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtlest-pressed, #B3B9C4)"
@@ -288,3 +288,3 @@ }
   'accent.gray.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtler-pressed, #8590A2)"
@@ -294,3 +294,3 @@ }
   'accent.gray.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)"
@@ -300,3 +300,3 @@ }
   'accent.gray.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-bolder-pressed, #2C3E5D)"
@@ -306,3 +306,3 @@ }
   input: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
@@ -312,3 +312,3 @@ }
   'inverse.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
@@ -318,3 +318,3 @@ }
   neutral: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
@@ -324,3 +324,3 @@ }
   'neutral.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
@@ -330,3 +330,3 @@ }
   'neutral.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
@@ -336,3 +336,3 @@ }
   selected: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
@@ -342,3 +342,3 @@ }
   'selected.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
@@ -348,3 +348,3 @@ }
   'brand.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-subtlest-pressed, #85B8FF)"
@@ -354,3 +354,3 @@ }
   'brand.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
@@ -360,3 +360,3 @@ }
   'brand.boldest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-boldest-pressed, #0055CC)"
@@ -366,3 +366,3 @@ }
   danger: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-danger-pressed, #FD9891)"
@@ -372,3 +372,3 @@ }
   'danger.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
@@ -378,3 +378,3 @@ }
   warning: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-warning-pressed, #F5CD47)"
@@ -384,3 +384,3 @@ }
   'warning.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-warning-bold-pressed, #CF9F02)"
@@ -390,3 +390,3 @@ }
   success: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-success-pressed, #7EE2B8)"
@@ -396,3 +396,3 @@ }
   'success.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-success-bold-pressed, #164B35)"
@@ -402,3 +402,3 @@ }
   discovery: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-discovery-pressed, #B8ACF6)"
@@ -408,3 +408,3 @@ }
   'discovery.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-discovery-bold-pressed, #352C63)"
@@ -414,3 +414,3 @@ }
   information: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-information-pressed, #85B8FF)"
@@ -420,3 +420,3 @@ }
   'information.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-information-bold-pressed, #09326C)"
@@ -426,3 +426,3 @@ }
   'elevation.surface': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
@@ -432,3 +432,3 @@ }
   'elevation.surface.overlay': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
@@ -438,3 +438,3 @@ }
   'elevation.surface.raised': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
@@ -446,3 +446,3 @@ }
   'accent.lime.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
@@ -452,3 +452,3 @@ }
   'accent.lime.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtler-hovered, #B3DF72)"
@@ -458,3 +458,3 @@ }
   'accent.lime.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtle-hovered, #B3DF72)"
@@ -464,3 +464,3 @@ }
   'accent.lime.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)"
@@ -470,3 +470,3 @@ }
   'accent.red.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtlest-hovered, #FFD5D2)"
@@ -476,3 +476,3 @@ }
   'accent.red.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtler-hovered, #FD9891)"
@@ -482,3 +482,3 @@ }
   'accent.red.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtle-hovered, #FD9891)"
@@ -488,3 +488,3 @@ }
   'accent.red.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-bolder-hovered, #AE2E24)"
@@ -494,3 +494,3 @@ }
   'accent.orange.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtlest-hovered, #FEDEC8)"
@@ -500,3 +500,3 @@ }
   'accent.orange.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtler-hovered, #FEC195)"
@@ -506,3 +506,3 @@ }
   'accent.orange.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtle-hovered, #FEC195)"
@@ -512,3 +512,3 @@ }
   'accent.orange.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-bolder-hovered, #A54800)"
@@ -518,3 +518,3 @@ }
   'accent.yellow.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)"
@@ -524,3 +524,3 @@ }
   'accent.yellow.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtler-hovered, #F5CD47)"
@@ -530,3 +530,3 @@ }
   'accent.yellow.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtle-hovered, #E2B203)"
@@ -536,3 +536,3 @@ }
   'accent.yellow.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
@@ -542,3 +542,3 @@ }
   'accent.green.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)"
@@ -548,3 +548,3 @@ }
   'accent.green.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtler-hovered, #7EE2B8)"
@@ -554,3 +554,3 @@ }
   'accent.green.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtle-hovered, #7EE2B8)"
@@ -560,3 +560,3 @@ }
   'accent.green.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-bolder-hovered, #216E4E)"
@@ -566,3 +566,3 @@ }
   'accent.teal.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtlest-hovered, #C6EDFB)"
@@ -572,3 +572,3 @@ }
   'accent.teal.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtler-hovered, #9DD9EE)"
@@ -578,3 +578,3 @@ }
   'accent.teal.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtle-hovered, #9DD9EE)"
@@ -584,3 +584,3 @@ }
   'accent.teal.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-bolder-hovered, #206A83)"
@@ -590,3 +590,3 @@ }
   'accent.blue.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtlest-hovered, #CCE0FF)"
@@ -596,3 +596,3 @@ }
   'accent.blue.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtler-hovered, #85B8FF)"
@@ -602,3 +602,3 @@ }
   'accent.blue.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtle-hovered, #85B8FF)"
@@ -608,3 +608,3 @@ }
   'accent.blue.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-bolder-hovered, #0055CC)"
@@ -614,3 +614,3 @@ }
   'accent.purple.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtlest-hovered, #DFD8FD)"
@@ -620,3 +620,3 @@ }
   'accent.purple.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtler-hovered, #B8ACF6)"
@@ -626,3 +626,3 @@ }
   'accent.purple.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtle-hovered, #B8ACF6)"
@@ -632,3 +632,3 @@ }
   'accent.purple.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)"
@@ -638,3 +638,3 @@ }
   'accent.magenta.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)"
@@ -644,3 +644,3 @@ }
   'accent.magenta.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtler-hovered, #F797D2)"
@@ -650,3 +650,3 @@ }
   'accent.magenta.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtle-hovered, #F797D2)"
@@ -656,3 +656,3 @@ }
   'accent.magenta.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
@@ -662,3 +662,3 @@ }
   'accent.gray.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DCDFE4)"
@@ -668,3 +668,3 @@ }
   'accent.gray.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtler-hovered, #B3B9C4)"
@@ -674,3 +674,3 @@ }
   'accent.gray.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)"
@@ -680,3 +680,3 @@ }
   'accent.gray.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-bolder-hovered, #44546F)"
@@ -686,3 +686,3 @@ }
   input: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
@@ -692,3 +692,3 @@ }
   'inverse.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
@@ -698,3 +698,3 @@ }
   neutral: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
@@ -704,3 +704,3 @@ }
   'neutral.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
@@ -710,3 +710,3 @@ }
   'neutral.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
@@ -716,3 +716,3 @@ }
   selected: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
@@ -722,3 +722,3 @@ }
   'selected.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
@@ -728,3 +728,3 @@ }
   'brand.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-subtlest-hovered, #CCE0FF)"
@@ -734,3 +734,3 @@ }
   'brand.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
@@ -740,3 +740,3 @@ }
   'brand.boldest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-boldest-hovered, #09326C)"
@@ -746,3 +746,3 @@ }
   danger: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
@@ -752,3 +752,3 @@ }
   'danger.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2E24)"
@@ -758,3 +758,3 @@ }
   warning: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
@@ -764,3 +764,3 @@ }
   'warning.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-warning-bold-hovered, #E2B203)"
@@ -770,3 +770,3 @@ }
   success: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-success-hovered, #BAF3DB)"
@@ -776,3 +776,3 @@ }
   'success.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-success-bold-hovered, #216E4E)"
@@ -782,3 +782,3 @@ }
   discovery: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-discovery-hovered, #DFD8FD)"
@@ -788,3 +788,3 @@ }
   'discovery.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-discovery-bold-hovered, #5E4DB2)"
@@ -794,3 +794,3 @@ }
   information: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-information-hovered, #CCE0FF)"
@@ -800,3 +800,3 @@ }
   'information.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-information-bold-hovered, #0055CC)"
@@ -806,3 +806,3 @@ }
   'elevation.surface': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
@@ -812,3 +812,3 @@ }
   'elevation.surface.overlay': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
@@ -818,3 +818,3 @@ }
   'elevation.surface.raised': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
@@ -821,0 +821,0 @@ }

dist/es2019/components/interaction-surface.partial.js

@@ -10,3 +10,3 @@ /** @jsx jsx */
   cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '~ *': {
@@ -52,3 +52,3 @@ position: 'relative',
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::20a64bcc5ec33a2c6ae1165f4a723310>>
+ * @codegen <<SignedSource::5ab510545ffee62181b873849498c57e>>
  * @codegenId interactions
@@ -61,3 +61,3 @@ * @codegenCommand yarn codegen-styles
   'accent.lime.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtlest-pressed, #B3DF72)"
@@ -67,3 +67,3 @@ }
   'accent.lime.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtler-pressed, #94C748)"
@@ -73,3 +73,3 @@ }
   'accent.lime.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtle-pressed, #D3F1A7)"
@@ -79,3 +79,3 @@ }
   'accent.lime.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-bolder-pressed, #37471F)"
@@ -85,3 +85,3 @@ }
   'accent.red.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FD9891)"
@@ -91,3 +91,3 @@ }
   'accent.red.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #F87168)"
@@ -97,3 +97,3 @@ }
   'accent.red.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtle-pressed, #FFD5D2)"
@@ -103,3 +103,3 @@ }
   'accent.red.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-bolder-pressed, #5D1F1A)"
@@ -109,3 +109,3 @@ }
   'accent.orange.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtlest-pressed, #FEC195)"
@@ -115,3 +115,3 @@ }
   'accent.orange.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtler-pressed, #FEA362)"
@@ -121,3 +121,3 @@ }
   'accent.orange.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtle-pressed, #FEDEC8)"
@@ -127,3 +127,3 @@ }
   'accent.orange.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-bolder-pressed, #702E00)"
@@ -133,3 +133,3 @@ }
   'accent.yellow.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
@@ -139,3 +139,3 @@ }
   'accent.yellow.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"
@@ -145,3 +145,3 @@ }
   'accent.yellow.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtle-pressed, #CF9F02)"
@@ -151,3 +151,3 @@ }
   'accent.yellow.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"
@@ -157,3 +157,3 @@ }
   'accent.green.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtlest-pressed, #7EE2B8)"
@@ -163,3 +163,3 @@ }
   'accent.green.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #4BCE97)"
@@ -169,3 +169,3 @@ }
   'accent.green.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtle-pressed, #BAF3DB)"
@@ -175,3 +175,3 @@ }
   'accent.green.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-bolder-pressed, #164B35)"
@@ -181,3 +181,3 @@ }
   'accent.teal.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtlest-pressed, #9DD9EE)"
@@ -187,3 +187,3 @@ }
   'accent.teal.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtler-pressed, #6CC3E0)"
@@ -193,3 +193,3 @@ }
   'accent.teal.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtle-pressed, #C6EDFB)"
@@ -199,3 +199,3 @@ }
   'accent.teal.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-bolder-pressed, #164555)"
@@ -205,3 +205,3 @@ }
   'accent.blue.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtlest-pressed, #85B8FF)"
@@ -211,3 +211,3 @@ }
   'accent.blue.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtler-pressed, #579DFF)"
@@ -217,3 +217,3 @@ }
   'accent.blue.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtle-pressed, #CCE0FF)"
@@ -223,3 +223,3 @@ }
   'accent.blue.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-bolder-pressed, #09326C)"
@@ -229,3 +229,3 @@ }
   'accent.purple.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtlest-pressed, #B8ACF6)"
@@ -235,3 +235,3 @@ }
   'accent.purple.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtler-pressed, #9F8FEF)"
@@ -241,3 +241,3 @@ }
   'accent.purple.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtle-pressed, #DFD8FD)"
@@ -247,3 +247,3 @@ }
   'accent.purple.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-bolder-pressed, #352C63)"
@@ -253,3 +253,3 @@ }
   'accent.magenta.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"
@@ -259,3 +259,3 @@ }
   'accent.magenta.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"
@@ -265,3 +265,3 @@ }
   'accent.magenta.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtle-pressed, #FDD0EC)"
@@ -271,3 +271,3 @@ }
   'accent.magenta.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)"
@@ -277,3 +277,3 @@ }
   'accent.gray.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtlest-pressed, #B3B9C4)"
@@ -283,3 +283,3 @@ }
   'accent.gray.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtler-pressed, #8590A2)"
@@ -289,3 +289,3 @@ }
   'accent.gray.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)"
@@ -295,3 +295,3 @@ }
   'accent.gray.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-bolder-pressed, #2C3E5D)"
@@ -301,3 +301,3 @@ }
   input: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
@@ -307,3 +307,3 @@ }
   'inverse.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
@@ -313,3 +313,3 @@ }
   neutral: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
@@ -319,3 +319,3 @@ }
   'neutral.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
@@ -325,3 +325,3 @@ }
   'neutral.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
@@ -331,3 +331,3 @@ }
   selected: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
@@ -337,3 +337,3 @@ }
   'selected.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
@@ -343,3 +343,3 @@ }
   'brand.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-subtlest-pressed, #85B8FF)"
@@ -349,3 +349,3 @@ }
   'brand.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
@@ -355,3 +355,3 @@ }
   'brand.boldest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-boldest-pressed, #0055CC)"
@@ -361,3 +361,3 @@ }
   danger: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-danger-pressed, #FD9891)"
@@ -367,3 +367,3 @@ }
   'danger.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
@@ -373,3 +373,3 @@ }
   warning: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-warning-pressed, #F5CD47)"
@@ -379,3 +379,3 @@ }
   'warning.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-warning-bold-pressed, #CF9F02)"
@@ -385,3 +385,3 @@ }
   success: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-success-pressed, #7EE2B8)"
@@ -391,3 +391,3 @@ }
   'success.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-success-bold-pressed, #164B35)"
@@ -397,3 +397,3 @@ }
   discovery: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-discovery-pressed, #B8ACF6)"
@@ -403,3 +403,3 @@ }
   'discovery.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-discovery-bold-pressed, #352C63)"
@@ -409,3 +409,3 @@ }
   information: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-information-pressed, #85B8FF)"
@@ -415,3 +415,3 @@ }
   'information.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-information-bold-pressed, #09326C)"
@@ -421,3 +421,3 @@ }
   'elevation.surface': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
@@ -427,3 +427,3 @@ }
   'elevation.surface.overlay': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
@@ -433,3 +433,3 @@ }
   'elevation.surface.raised': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
@@ -441,3 +441,3 @@ }
   'accent.lime.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
@@ -447,3 +447,3 @@ }
   'accent.lime.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtler-hovered, #B3DF72)"
@@ -453,3 +453,3 @@ }
   'accent.lime.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtle-hovered, #B3DF72)"
@@ -459,3 +459,3 @@ }
   'accent.lime.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)"
@@ -465,3 +465,3 @@ }
   'accent.red.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtlest-hovered, #FFD5D2)"
@@ -471,3 +471,3 @@ }
   'accent.red.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtler-hovered, #FD9891)"
@@ -477,3 +477,3 @@ }
   'accent.red.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtle-hovered, #FD9891)"
@@ -483,3 +483,3 @@ }
   'accent.red.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-bolder-hovered, #AE2E24)"
@@ -489,3 +489,3 @@ }
   'accent.orange.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtlest-hovered, #FEDEC8)"
@@ -495,3 +495,3 @@ }
   'accent.orange.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtler-hovered, #FEC195)"
@@ -501,3 +501,3 @@ }
   'accent.orange.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtle-hovered, #FEC195)"
@@ -507,3 +507,3 @@ }
   'accent.orange.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-bolder-hovered, #A54800)"
@@ -513,3 +513,3 @@ }
   'accent.yellow.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)"
@@ -519,3 +519,3 @@ }
   'accent.yellow.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtler-hovered, #F5CD47)"
@@ -525,3 +525,3 @@ }
   'accent.yellow.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtle-hovered, #E2B203)"
@@ -531,3 +531,3 @@ }
   'accent.yellow.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
@@ -537,3 +537,3 @@ }
   'accent.green.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)"
@@ -543,3 +543,3 @@ }
   'accent.green.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtler-hovered, #7EE2B8)"
@@ -549,3 +549,3 @@ }
   'accent.green.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtle-hovered, #7EE2B8)"
@@ -555,3 +555,3 @@ }
   'accent.green.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-bolder-hovered, #216E4E)"
@@ -561,3 +561,3 @@ }
   'accent.teal.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtlest-hovered, #C6EDFB)"
@@ -567,3 +567,3 @@ }
   'accent.teal.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtler-hovered, #9DD9EE)"
@@ -573,3 +573,3 @@ }
   'accent.teal.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtle-hovered, #9DD9EE)"
@@ -579,3 +579,3 @@ }
   'accent.teal.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-bolder-hovered, #206A83)"
@@ -585,3 +585,3 @@ }
   'accent.blue.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtlest-hovered, #CCE0FF)"
@@ -591,3 +591,3 @@ }
   'accent.blue.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtler-hovered, #85B8FF)"
@@ -597,3 +597,3 @@ }
   'accent.blue.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtle-hovered, #85B8FF)"
@@ -603,3 +603,3 @@ }
   'accent.blue.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-bolder-hovered, #0055CC)"
@@ -609,3 +609,3 @@ }
   'accent.purple.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtlest-hovered, #DFD8FD)"
@@ -615,3 +615,3 @@ }
   'accent.purple.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtler-hovered, #B8ACF6)"
@@ -621,3 +621,3 @@ }
   'accent.purple.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtle-hovered, #B8ACF6)"
@@ -627,3 +627,3 @@ }
   'accent.purple.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)"
@@ -633,3 +633,3 @@ }
   'accent.magenta.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)"
@@ -639,3 +639,3 @@ }
   'accent.magenta.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtler-hovered, #F797D2)"
@@ -645,3 +645,3 @@ }
   'accent.magenta.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtle-hovered, #F797D2)"
@@ -651,3 +651,3 @@ }
   'accent.magenta.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
@@ -657,3 +657,3 @@ }
   'accent.gray.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DCDFE4)"
@@ -663,3 +663,3 @@ }
   'accent.gray.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtler-hovered, #B3B9C4)"
@@ -669,3 +669,3 @@ }
   'accent.gray.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)"
@@ -675,3 +675,3 @@ }
   'accent.gray.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-bolder-hovered, #44546F)"
@@ -681,3 +681,3 @@ }
   input: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
@@ -687,3 +687,3 @@ }
   'inverse.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
@@ -693,3 +693,3 @@ }
   neutral: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
@@ -699,3 +699,3 @@ }
   'neutral.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
@@ -705,3 +705,3 @@ }
   'neutral.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
@@ -711,3 +711,3 @@ }
   selected: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
@@ -717,3 +717,3 @@ }
   'selected.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
@@ -723,3 +723,3 @@ }
   'brand.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-subtlest-hovered, #CCE0FF)"
@@ -729,3 +729,3 @@ }
   'brand.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
@@ -735,3 +735,3 @@ }
   'brand.boldest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-boldest-hovered, #09326C)"
@@ -741,3 +741,3 @@ }
   danger: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
@@ -747,3 +747,3 @@ }
   'danger.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2E24)"
@@ -753,3 +753,3 @@ }
   warning: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
@@ -759,3 +759,3 @@ }
   'warning.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-warning-bold-hovered, #E2B203)"
@@ -765,3 +765,3 @@ }
   success: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-success-hovered, #BAF3DB)"
@@ -771,3 +771,3 @@ }
   'success.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-success-bold-hovered, #216E4E)"
@@ -777,3 +777,3 @@ }
   discovery: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-discovery-hovered, #DFD8FD)"
@@ -783,3 +783,3 @@ }
   'discovery.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-discovery-bold-hovered, #5E4DB2)"
@@ -789,3 +789,3 @@ }
   information: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-information-hovered, #CCE0FF)"
@@ -795,3 +795,3 @@ }
   'information.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-information-bold-hovered, #0055CC)"
@@ -801,3 +801,3 @@ }
   'elevation.surface': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
@@ -807,3 +807,3 @@ }
   'elevation.surface.overlay': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
@@ -813,3 +813,3 @@ }
   'elevation.surface.raised': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
@@ -816,0 +816,0 @@ }

dist/esm/components/interaction-surface.partial.js

@@ -10,3 +10,3 @@ /** @jsx jsx */
   cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '~ *': {
@@ -51,3 +51,3 @@ position: 'relative',
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::20a64bcc5ec33a2c6ae1165f4a723310>>
+ * @codegen <<SignedSource::5ab510545ffee62181b873849498c57e>>
  * @codegenId interactions
@@ -60,3 +60,3 @@ * @codegenCommand yarn codegen-styles
   'accent.lime.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtlest-pressed, #B3DF72)"
@@ -66,3 +66,3 @@ }
   'accent.lime.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtler-pressed, #94C748)"
@@ -72,3 +72,3 @@ }
   'accent.lime.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtle-pressed, #D3F1A7)"
@@ -78,3 +78,3 @@ }
   'accent.lime.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-bolder-pressed, #37471F)"
@@ -84,3 +84,3 @@ }
   'accent.red.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FD9891)"
@@ -90,3 +90,3 @@ }
   'accent.red.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #F87168)"
@@ -96,3 +96,3 @@ }
   'accent.red.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtle-pressed, #FFD5D2)"
@@ -102,3 +102,3 @@ }
   'accent.red.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-bolder-pressed, #5D1F1A)"
@@ -108,3 +108,3 @@ }
   'accent.orange.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtlest-pressed, #FEC195)"
@@ -114,3 +114,3 @@ }
   'accent.orange.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtler-pressed, #FEA362)"
@@ -120,3 +120,3 @@ }
   'accent.orange.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtle-pressed, #FEDEC8)"
@@ -126,3 +126,3 @@ }
   'accent.orange.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-bolder-pressed, #702E00)"
@@ -132,3 +132,3 @@ }
   'accent.yellow.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
@@ -138,3 +138,3 @@ }
   'accent.yellow.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"
@@ -144,3 +144,3 @@ }
   'accent.yellow.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtle-pressed, #CF9F02)"
@@ -150,3 +150,3 @@ }
   'accent.yellow.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"
@@ -156,3 +156,3 @@ }
   'accent.green.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtlest-pressed, #7EE2B8)"
@@ -162,3 +162,3 @@ }
   'accent.green.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #4BCE97)"
@@ -168,3 +168,3 @@ }
   'accent.green.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtle-pressed, #BAF3DB)"
@@ -174,3 +174,3 @@ }
   'accent.green.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-bolder-pressed, #164B35)"
@@ -180,3 +180,3 @@ }
   'accent.teal.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtlest-pressed, #9DD9EE)"
@@ -186,3 +186,3 @@ }
   'accent.teal.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtler-pressed, #6CC3E0)"
@@ -192,3 +192,3 @@ }
   'accent.teal.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtle-pressed, #C6EDFB)"
@@ -198,3 +198,3 @@ }
   'accent.teal.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-bolder-pressed, #164555)"
@@ -204,3 +204,3 @@ }
   'accent.blue.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtlest-pressed, #85B8FF)"
@@ -210,3 +210,3 @@ }
   'accent.blue.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtler-pressed, #579DFF)"
@@ -216,3 +216,3 @@ }
   'accent.blue.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtle-pressed, #CCE0FF)"
@@ -222,3 +222,3 @@ }
   'accent.blue.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-bolder-pressed, #09326C)"
@@ -228,3 +228,3 @@ }
   'accent.purple.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtlest-pressed, #B8ACF6)"
@@ -234,3 +234,3 @@ }
   'accent.purple.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtler-pressed, #9F8FEF)"
@@ -240,3 +240,3 @@ }
   'accent.purple.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtle-pressed, #DFD8FD)"
@@ -246,3 +246,3 @@ }
   'accent.purple.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-bolder-pressed, #352C63)"
@@ -252,3 +252,3 @@ }
   'accent.magenta.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"
@@ -258,3 +258,3 @@ }
   'accent.magenta.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"
@@ -264,3 +264,3 @@ }
   'accent.magenta.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtle-pressed, #FDD0EC)"
@@ -270,3 +270,3 @@ }
   'accent.magenta.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)"
@@ -276,3 +276,3 @@ }
   'accent.gray.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtlest-pressed, #B3B9C4)"
@@ -282,3 +282,3 @@ }
   'accent.gray.subtler': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtler-pressed, #8590A2)"
@@ -288,3 +288,3 @@ }
   'accent.gray.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)"
@@ -294,3 +294,3 @@ }
   'accent.gray.bolder': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-bolder-pressed, #2C3E5D)"
@@ -300,3 +300,3 @@ }
   input: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
@@ -306,3 +306,3 @@ }
   'inverse.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
@@ -312,3 +312,3 @@ }
   neutral: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
@@ -318,3 +318,3 @@ }
   'neutral.subtle': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
@@ -324,3 +324,3 @@ }
   'neutral.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
@@ -330,3 +330,3 @@ }
   selected: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
@@ -336,3 +336,3 @@ }
   'selected.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
@@ -342,3 +342,3 @@ }
   'brand.subtlest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-subtlest-pressed, #85B8FF)"
@@ -348,3 +348,3 @@ }
   'brand.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
@@ -354,3 +354,3 @@ }
   'brand.boldest': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-boldest-pressed, #0055CC)"
@@ -360,3 +360,3 @@ }
   danger: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-danger-pressed, #FD9891)"
@@ -366,3 +366,3 @@ }
   'danger.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
@@ -372,3 +372,3 @@ }
   warning: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-warning-pressed, #F5CD47)"
@@ -378,3 +378,3 @@ }
   'warning.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-warning-bold-pressed, #CF9F02)"
@@ -384,3 +384,3 @@ }
   success: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-success-pressed, #7EE2B8)"
@@ -390,3 +390,3 @@ }
   'success.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-success-bold-pressed, #164B35)"
@@ -396,3 +396,3 @@ }
   discovery: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-discovery-pressed, #B8ACF6)"
@@ -402,3 +402,3 @@ }
   'discovery.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-discovery-bold-pressed, #352C63)"
@@ -408,3 +408,3 @@ }
   information: css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-information-pressed, #85B8FF)"
@@ -414,3 +414,3 @@ }
   'information.bold': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-information-bold-pressed, #09326C)"
@@ -420,3 +420,3 @@ }
   'elevation.surface': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
@@ -426,3 +426,3 @@ }
   'elevation.surface.overlay': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
@@ -432,3 +432,3 @@ }
   'elevation.surface.raised': css({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
@@ -440,3 +440,3 @@ }
   'accent.lime.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
@@ -446,3 +446,3 @@ }
   'accent.lime.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtler-hovered, #B3DF72)"
@@ -452,3 +452,3 @@ }
   'accent.lime.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtle-hovered, #B3DF72)"
@@ -458,3 +458,3 @@ }
   'accent.lime.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)"
@@ -464,3 +464,3 @@ }
   'accent.red.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtlest-hovered, #FFD5D2)"
@@ -470,3 +470,3 @@ }
   'accent.red.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtler-hovered, #FD9891)"
@@ -476,3 +476,3 @@ }
   'accent.red.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtle-hovered, #FD9891)"
@@ -482,3 +482,3 @@ }
   'accent.red.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-bolder-hovered, #AE2E24)"
@@ -488,3 +488,3 @@ }
   'accent.orange.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtlest-hovered, #FEDEC8)"
@@ -494,3 +494,3 @@ }
   'accent.orange.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtler-hovered, #FEC195)"
@@ -500,3 +500,3 @@ }
   'accent.orange.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtle-hovered, #FEC195)"
@@ -506,3 +506,3 @@ }
   'accent.orange.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-bolder-hovered, #A54800)"
@@ -512,3 +512,3 @@ }
   'accent.yellow.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)"
@@ -518,3 +518,3 @@ }
   'accent.yellow.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtler-hovered, #F5CD47)"
@@ -524,3 +524,3 @@ }
   'accent.yellow.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtle-hovered, #E2B203)"
@@ -530,3 +530,3 @@ }
   'accent.yellow.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
@@ -536,3 +536,3 @@ }
   'accent.green.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)"
@@ -542,3 +542,3 @@ }
   'accent.green.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtler-hovered, #7EE2B8)"
@@ -548,3 +548,3 @@ }
   'accent.green.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtle-hovered, #7EE2B8)"
@@ -554,3 +554,3 @@ }
   'accent.green.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-bolder-hovered, #216E4E)"
@@ -560,3 +560,3 @@ }
   'accent.teal.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtlest-hovered, #C6EDFB)"
@@ -566,3 +566,3 @@ }
   'accent.teal.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtler-hovered, #9DD9EE)"
@@ -572,3 +572,3 @@ }
   'accent.teal.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtle-hovered, #9DD9EE)"
@@ -578,3 +578,3 @@ }
   'accent.teal.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-bolder-hovered, #206A83)"
@@ -584,3 +584,3 @@ }
   'accent.blue.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtlest-hovered, #CCE0FF)"
@@ -590,3 +590,3 @@ }
   'accent.blue.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtler-hovered, #85B8FF)"
@@ -596,3 +596,3 @@ }
   'accent.blue.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtle-hovered, #85B8FF)"
@@ -602,3 +602,3 @@ }
   'accent.blue.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-bolder-hovered, #0055CC)"
@@ -608,3 +608,3 @@ }
   'accent.purple.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtlest-hovered, #DFD8FD)"
@@ -614,3 +614,3 @@ }
   'accent.purple.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtler-hovered, #B8ACF6)"
@@ -620,3 +620,3 @@ }
   'accent.purple.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtle-hovered, #B8ACF6)"
@@ -626,3 +626,3 @@ }
   'accent.purple.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)"
@@ -632,3 +632,3 @@ }
   'accent.magenta.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)"
@@ -638,3 +638,3 @@ }
   'accent.magenta.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtler-hovered, #F797D2)"
@@ -644,3 +644,3 @@ }
   'accent.magenta.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtle-hovered, #F797D2)"
@@ -650,3 +650,3 @@ }
   'accent.magenta.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
@@ -656,3 +656,3 @@ }
   'accent.gray.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DCDFE4)"
@@ -662,3 +662,3 @@ }
   'accent.gray.subtler': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtler-hovered, #B3B9C4)"
@@ -668,3 +668,3 @@ }
   'accent.gray.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)"
@@ -674,3 +674,3 @@ }
   'accent.gray.bolder': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-bolder-hovered, #44546F)"
@@ -680,3 +680,3 @@ }
   input: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
@@ -686,3 +686,3 @@ }
   'inverse.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
@@ -692,3 +692,3 @@ }
   neutral: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
@@ -698,3 +698,3 @@ }
   'neutral.subtle': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
@@ -704,3 +704,3 @@ }
   'neutral.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
@@ -710,3 +710,3 @@ }
   selected: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
@@ -716,3 +716,3 @@ }
   'selected.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
@@ -722,3 +722,3 @@ }
   'brand.subtlest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-subtlest-hovered, #CCE0FF)"
@@ -728,3 +728,3 @@ }
   'brand.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
@@ -734,3 +734,3 @@ }
   'brand.boldest': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-boldest-hovered, #09326C)"
@@ -740,3 +740,3 @@ }
   danger: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
@@ -746,3 +746,3 @@ }
   'danger.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2E24)"
@@ -752,3 +752,3 @@ }
   warning: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
@@ -758,3 +758,3 @@ }
   'warning.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-warning-bold-hovered, #E2B203)"
@@ -764,3 +764,3 @@ }
   success: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-success-hovered, #BAF3DB)"
@@ -770,3 +770,3 @@ }
   'success.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-success-bold-hovered, #216E4E)"
@@ -776,3 +776,3 @@ }
   discovery: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-discovery-hovered, #DFD8FD)"
@@ -782,3 +782,3 @@ }
   'discovery.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-discovery-bold-hovered, #5E4DB2)"
@@ -788,3 +788,3 @@ }
   information: css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-information-hovered, #CCE0FF)"
@@ -794,3 +794,3 @@ }
   'information.bold': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-information-bold-hovered, #0055CC)"
@@ -800,3 +800,3 @@ }
   'elevation.surface': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
@@ -806,3 +806,3 @@ }
   'elevation.surface.overlay': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
@@ -812,3 +812,3 @@ }
   'elevation.surface.raised': css({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
@@ -815,0 +815,0 @@ }

package.json

 {
-  "name": "@atlaskit/ds-explorations",
-  "version": "4.0.1",
-  "description": "DEPRECATED. Use @atlaskit/primitives. An experimental package for exploration and validation of spacing / typography foundations.",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
-  "author": "Atlassian Pty Ltd",
-  "license": "Apache-2.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "module:es2019": "dist/es2019/index.js",
-  "types": "dist/types/index.d.ts",
-  "sideEffects": false,
-  "atlaskit:src": "src/index.tsx",
-  "atlassian": {
-    "team": "Design System Team",
-    "inPublicMirror": false,
-    "releaseModel": "continuous",
-    "runReact18": true
-  },
-  "scripts": {
-    "ak-postbuild": "cd ../../../ && yarn build @atlassian/codegen -d cjs,esm,es2019 && yarn build @atlaskit/tokens && cd packages/design-system/ds-explorations && yarn codegen-styles",
-    "codegen-styles": "ts-node --project ../../../tsconfig.node.json ./scripts/codegen-styles",
-    "prepare": "yarn ak-postbuild"
-  },
-  "dependencies": {
-    "@atlaskit/tokens": "^1.50.0",
-    "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
-  },
-  "devDependencies": {
-    "@af/formatting": "*",
-    "@atlaskit/ds-lib": "*",
-    "@atlaskit/primitives": "^7.0.0",
-    "@atlaskit/textfield": "^6.3.0",
-    "@atlaskit/visual-regression": "*",
-    "@atlassian/codegen": "^0.1.0",
-    "@testing-library/react": "^12.1.5",
-    "fs-extra": "^4.0.2",
-    "react-dom": "^16.8.0",
-    "ts-node": "^10.9.1",
-    "typescript": "~5.4.2",
-    "wait-for-expect": "^1.2.0"
-  },
-  "techstack": {
-    "@atlassian/frontend": {
-      "import-structure": "atlassian-conventions",
-      "circular-dependencies": "file-and-folder-level"
-    },
-    "@repo/internal": {
-      "dom-events": "use-bind-event-listener",
-      "design-system": "v1",
-      "styling": [
-        "static",
-        "emotion"
-      ],
-      "ui-components": "lite-mode",
-      "analytics": "analytics-next",
-      "deprecation": "no-deprecated-imports"
-    }
-  },
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
-  "af:exports": {
-    ".": "./src/index.tsx"
-  },
-  "homepage": "https://atlaskit.atlassian.com"
-}
+	"name": "@atlaskit/ds-explorations",
+	"version": "4.1.0",
+	"description": "DEPRECATED. Use @atlaskit/primitives. An experimental package for exploration and validation of spacing / typography foundations.",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"sideEffects": false,
+	"atlaskit:src": "src/index.tsx",
+	"atlassian": {
+		"team": "Design System Team",
+		"inPublicMirror": false,
+		"releaseModel": "continuous",
+		"runReact18": true
+	},
+	"scripts": {
+		"ak-postbuild": "cd ../../../ && yarn build @atlassian/codegen -d cjs,esm,es2019 && yarn build @atlaskit/tokens && cd packages/design-system/ds-explorations && yarn codegen-styles",
+		"codegen-styles": "ts-node --project ../../../tsconfig.node.json ./scripts/codegen-styles",
+		"prepare": "yarn ak-postbuild"
+	},
+	"dependencies": {
+		"@atlaskit/tokens": "^1.50.0",
+		"@babel/runtime": "^7.0.0",
+		"@emotion/react": "^11.7.1"
+	},
+	"peerDependencies": {
+		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
+	},
+	"devDependencies": {
+		"@af/formatting": "*",
+		"@atlaskit/ds-lib": "*",
+		"@atlaskit/primitives": "^7.2.0",
+		"@atlaskit/textfield": "^6.3.0",
+		"@atlaskit/visual-regression": "*",
+		"@atlassian/codegen": "^0.1.0",
+		"@testing-library/react": "^12.1.5",
+		"fs-extra": "^4.0.2",
+		"react-dom": "^16.8.0",
+		"ts-node": "^10.9.1",
+		"typescript": "~5.4.2",
+		"wait-for-expect": "^1.2.0"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"import-structure": "atlassian-conventions",
+			"circular-dependencies": "file-and-folder-level"
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"design-system": "v1",
+			"styling": ["static", "emotion"],
+			"ui-components": "lite-mode",
+			"analytics": "analytics-next",
+			"deprecation": "no-deprecated-imports"
+		}
+	},
+	"typesVersions": {
+		">=4.5 <4.9": {
+			"*": ["dist/types-ts4.5/*", "dist/types-ts4.5/index.d.ts"]
+		}
+	},
+	"af:exports": {
+		".": "./src/index.tsx"
+	},
+	"homepage": "https://atlaskit.atlassian.com"
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

195153

increased by0.6%

No dependency changes