@atlaskit/ds-explorations 4.0.1 → 4.2.0

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

@@ -7,14 +7,19 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _surfaceProvider = require("./surface-provider");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var baseStyles = (0, _react2.css)({
   position: 'absolute',
   inset: 0,
   borderRadius: 'inherit',
   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
   '~ *': {
     position: 'relative',
     pointerEvents: 'none'
@@ -25,11 +30,11 @@ var baseStyles = (0, _react2.css)({
  * @example
  * ```js
  * // a minimal icon button
- * <Box as="button">
+ * <Pressable>
  *   <InteractionSurface>
  *    <WarningIcon label="icon button" />
  *  </InteractionSurface>
- * </Box>
+ * </Pressable>
  * ```
  */
 var InteractionSurface = function InteractionSurface(_ref) {
@@ -53,7 +58,7 @@ var InteractionSurface = function InteractionSurface(_ref) {
 var _default = exports.default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::20a64bcc5ec33a2c6ae1165f4a723310>>
+ * @codegen <<SignedSource::5ab510545ffee62181b873849498c57e>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
@@ -61,634 +66,634 @@ var _default = exports.default = InteractionSurface;
  */
 var backgroundActiveColorMap = {
   'accent.lime.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtlest-pressed, #B3DF72)"
     }
   }),
   'accent.lime.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtler-pressed, #94C748)"
     }
   }),
   'accent.lime.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-subtle-pressed, #D3F1A7)"
     }
   }),
   'accent.lime.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-lime-bolder-pressed, #37471F)"
     }
   }),
   'accent.red.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FD9891)"
     }
   }),
   'accent.red.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #F87168)"
     }
   }),
   'accent.red.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-subtle-pressed, #FFD5D2)"
     }
   }),
   'accent.red.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-red-bolder-pressed, #5D1F1A)"
     }
   }),
   'accent.orange.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtlest-pressed, #FEC195)"
     }
   }),
   'accent.orange.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtler-pressed, #FEA362)"
     }
   }),
   'accent.orange.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-subtle-pressed, #FEDEC8)"
     }
   }),
   'accent.orange.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-orange-bolder-pressed, #702E00)"
     }
   }),
   'accent.yellow.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
     }
   }),
   'accent.yellow.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"
     }
   }),
   'accent.yellow.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-subtle-pressed, #CF9F02)"
     }
   }),
   'accent.yellow.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"
     }
   }),
   'accent.green.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtlest-pressed, #7EE2B8)"
     }
   }),
   'accent.green.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #4BCE97)"
     }
   }),
   'accent.green.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-subtle-pressed, #BAF3DB)"
     }
   }),
   'accent.green.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-green-bolder-pressed, #164B35)"
     }
   }),
   'accent.teal.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtlest-pressed, #9DD9EE)"
     }
   }),
   'accent.teal.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtler-pressed, #6CC3E0)"
     }
   }),
   'accent.teal.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-subtle-pressed, #C6EDFB)"
     }
   }),
   'accent.teal.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-teal-bolder-pressed, #164555)"
     }
   }),
   'accent.blue.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtlest-pressed, #85B8FF)"
     }
   }),
   'accent.blue.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtler-pressed, #579DFF)"
     }
   }),
   'accent.blue.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-subtle-pressed, #CCE0FF)"
     }
   }),
   'accent.blue.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-blue-bolder-pressed, #09326C)"
     }
   }),
   'accent.purple.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtlest-pressed, #B8ACF6)"
     }
   }),
   'accent.purple.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtler-pressed, #9F8FEF)"
     }
   }),
   'accent.purple.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-subtle-pressed, #DFD8FD)"
     }
   }),
   'accent.purple.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-purple-bolder-pressed, #352C63)"
     }
   }),
   'accent.magenta.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"
     }
   }),
   'accent.magenta.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"
     }
   }),
   'accent.magenta.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-subtle-pressed, #FDD0EC)"
     }
   }),
   'accent.magenta.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)"
     }
   }),
   'accent.gray.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtlest-pressed, #B3B9C4)"
     }
   }),
   'accent.gray.subtler': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtler-pressed, #8590A2)"
     }
   }),
   'accent.gray.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)"
     }
   }),
   'accent.gray.bolder': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-accent-gray-bolder-pressed, #2C3E5D)"
     }
   }),
   input: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
     }
   }),
   'inverse.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
     }
   }),
   neutral: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
     }
   }),
   'neutral.subtle': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
     }
   }),
   'neutral.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
     }
   }),
   selected: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
     }
   }),
   'selected.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
     }
   }),
   'brand.subtlest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-subtlest-pressed, #85B8FF)"
     }
   }),
   'brand.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
     }
   }),
   'brand.boldest': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-brand-boldest-pressed, #0055CC)"
     }
   }),
   danger: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-danger-pressed, #FD9891)"
     }
   }),
   'danger.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
     }
   }),
   warning: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-warning-pressed, #F5CD47)"
     }
   }),
   'warning.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-warning-bold-pressed, #CF9F02)"
     }
   }),
   success: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-success-pressed, #7EE2B8)"
     }
   }),
   'success.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-success-bold-pressed, #164B35)"
     }
   }),
   discovery: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-discovery-pressed, #B8ACF6)"
     }
   }),
   'discovery.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-discovery-bold-pressed, #352C63)"
     }
   }),
   information: (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-information-pressed, #85B8FF)"
     }
   }),
   'information.bold': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-background-information-bold-pressed, #09326C)"
     }
   }),
   'elevation.surface': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
     }
   }),
   'elevation.surface.overlay': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
     }
   }),
   'elevation.surface.raised': (0, _react2.css)({
-    ':active': {
+    '&:active': {
       backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
     }
   })
 };
 var backgroundHoverColorMap = {
   'accent.lime.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
     }
   }),
   'accent.lime.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtler-hovered, #B3DF72)"
     }
   }),
   'accent.lime.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-subtle-hovered, #B3DF72)"
     }
   }),
   'accent.lime.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)"
     }
   }),
   'accent.red.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtlest-hovered, #FFD5D2)"
     }
   }),
   'accent.red.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtler-hovered, #FD9891)"
     }
   }),
   'accent.red.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-subtle-hovered, #FD9891)"
     }
   }),
   'accent.red.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-red-bolder-hovered, #AE2E24)"
     }
   }),
   'accent.orange.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtlest-hovered, #FEDEC8)"
     }
   }),
   'accent.orange.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtler-hovered, #FEC195)"
     }
   }),
   'accent.orange.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-subtle-hovered, #FEC195)"
     }
   }),
   'accent.orange.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-orange-bolder-hovered, #A54800)"
     }
   }),
   'accent.yellow.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)"
     }
   }),
   'accent.yellow.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtler-hovered, #F5CD47)"
     }
   }),
   'accent.yellow.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-subtle-hovered, #E2B203)"
     }
   }),
   'accent.yellow.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
     }
   }),
   'accent.green.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)"
     }
   }),
   'accent.green.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtler-hovered, #7EE2B8)"
     }
   }),
   'accent.green.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-subtle-hovered, #7EE2B8)"
     }
   }),
   'accent.green.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-green-bolder-hovered, #216E4E)"
     }
   }),
   'accent.teal.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtlest-hovered, #C6EDFB)"
     }
   }),
   'accent.teal.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtler-hovered, #9DD9EE)"
     }
   }),
   'accent.teal.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-subtle-hovered, #9DD9EE)"
     }
   }),
   'accent.teal.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-teal-bolder-hovered, #206A83)"
     }
   }),
   'accent.blue.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtlest-hovered, #CCE0FF)"
     }
   }),
   'accent.blue.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtler-hovered, #85B8FF)"
     }
   }),
   'accent.blue.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-subtle-hovered, #85B8FF)"
     }
   }),
   'accent.blue.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-blue-bolder-hovered, #0055CC)"
     }
   }),
   'accent.purple.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtlest-hovered, #DFD8FD)"
     }
   }),
   'accent.purple.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtler-hovered, #B8ACF6)"
     }
   }),
   'accent.purple.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-subtle-hovered, #B8ACF6)"
     }
   }),
   'accent.purple.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)"
     }
   }),
   'accent.magenta.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)"
     }
   }),
   'accent.magenta.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtler-hovered, #F797D2)"
     }
   }),
   'accent.magenta.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-subtle-hovered, #F797D2)"
     }
   }),
   'accent.magenta.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
     }
   }),
   'accent.gray.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DCDFE4)"
     }
   }),
   'accent.gray.subtler': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtler-hovered, #B3B9C4)"
     }
   }),
   'accent.gray.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)"
     }
   }),
   'accent.gray.bolder': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-accent-gray-bolder-hovered, #44546F)"
     }
   }),
   input: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
     }
   }),
   'inverse.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
     }
   }),
   neutral: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
     }
   }),
   'neutral.subtle': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
     }
   }),
   'neutral.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
     }
   }),
   selected: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
     }
   }),
   'selected.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
     }
   }),
   'brand.subtlest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-subtlest-hovered, #CCE0FF)"
     }
   }),
   'brand.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
     }
   }),
   'brand.boldest': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-brand-boldest-hovered, #09326C)"
     }
   }),
   danger: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
     }
   }),
   'danger.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2E24)"
     }
   }),
   warning: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
     }
   }),
   'warning.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-warning-bold-hovered, #E2B203)"
     }
   }),
   success: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-success-hovered, #BAF3DB)"
     }
   }),
   'success.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-success-bold-hovered, #216E4E)"
     }
   }),
   discovery: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-discovery-hovered, #DFD8FD)"
     }
   }),
   'discovery.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-discovery-bold-hovered, #5E4DB2)"
     }
   }),
   information: (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-information-hovered, #CCE0FF)"
     }
   }),
   'information.bold': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-background-information-bold-hovered, #0055CC)"
     }
   }),
   'elevation.surface': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
     }
   }),
   'elevation.surface.overlay': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
     }
   }),
   'elevation.surface.raised': (0, _react2.css)({
-    ':hover': {
+    '&:hover': {
       backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
     }
   })