@atlaskit/range 7.4.5 → 8.0.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/range
 
+## 8.0.1
+
+### Patch Changes
+
+- [#100413](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100413)
+  [`e4d6f320b1650`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e4d6f320b1650) -
+  Fix styling of our @atlaskit/range component lost in v8.0.0 rendering the component invisible.
+
+## 8.0.0
+
+### Major Changes
+
+- [#172418](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/172418)
+  [`8a5e8d3d28432`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8a5e8d3d28432) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/range`, you will need to ensure that your bundler is configured to
+  handle `.css` imports correctly. Most bundlers come with built-in support for `.css` imports, so
+  you may not need to do anything. If you are using a different bundler, please refer to the
+  documentation for that bundler to understand how to handle `.css` imports. For more information on
+  the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 7.4.5
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -17,6 +17,9 @@
         "../src/**/test.*"
     ],
     "references": [
+        {
+            "path": "../../css/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../ds-lib/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/test.*"
 	],
 	"references": [
+		{
+			"path": "../../css/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../ds-lib/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/test.*"
 	],
 	"references": [
+		{
+			"path": "../../css/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../ds-lib/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/styled.compiled.css

@@ -0,0 +1,72 @@
+._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
+._10lridpf::-webkit-slider-runnable-track{border:0}
+._15raidpf::-moz-focus-outer{border:0}
+._1gvoyh40::-moz-range-track{border-radius:2px}
+._1kdl1q5u::-webkit-slider-thumb{border-radius:var(--ds-border-radius-circle,50%)}
+._1nx42hjt::-moz-range-track{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
+._1rf3g56u::-moz-range-thumb{outline:solid 2px var(--thumb-border)}
+._1tcb2hjt::-moz-range-progress{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
+._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
+._1yq0glyw::-moz-range-thumb{border:none}
+._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
+._37ywyh40::-moz-range-progress{border-radius:2px}
+._e8hnidpf::-moz-range-progress{border:0}
+._g6tdyh40::-webkit-slider-runnable-track{border-radius:2px}
+._h2ksglyw::-webkit-slider-thumb{border:none}
+._m8f8g56u::-webkit-slider-thumb{outline:solid 2px var(--thumb-border)}
+._ru37idpf::-moz-range-track{border:0}
+._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
+._10o7tlke::-moz-range-thumb{cursor:pointer}
+._12el4alp::-moz-range-thumb{background-color:var(--_171tp53)}
+._142y1y44::-moz-range-track{height:4px}
+._14h11gpr{--thumb-shadow:var(--_cghoza)}
+._15dpptpz{--track-bg:var(--_19g1tth)}
+._168l1y44::-webkit-slider-runnable-track{height:4px}
+._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
+._18lx1n8f{--track-fg:var(--_1eby16r)}
+._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
+._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box}
+._1bsb1osq{width:100%}
+._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
+._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
+._1esf4alp::-webkit-slider-thumb{background-color:var(--_171tp53)}
+._1f5t1osq::-moz-range-track{width:100%}
+._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
+._1g2h1osq::-webkit-slider-runnable-track{width:100%}
+._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))}
+._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
+._1j707vkz::-webkit-slider-thumb{height:1pc}
+._1jhcjiw3:hover:not(:disabled){--track-fg:var(--_14t3dsg)}
+._1kd21y44::-moz-range-progress{height:4px}
+._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
+._1mn57vkz::-moz-range-thumb{height:1pc}
+._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
+._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
+._1rucy2jz:active:not(:disabled){--thumb-bg:var(--_1pam7of)}
+._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
+._1ssqtlke::-moz-range-progress{cursor:pointer}
+._1vq313gf:disabled::-moz-range-thumb{cursor:not-allowed}
+._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
+._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
+._4t3i1ylp{height:40px}
+._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)}
+._5i7a13gf:disabled::-webkit-slider-runnable-track{cursor:not-allowed}
+._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)}
+._aoww1osq::-moz-range-progress{width:100%}
+._b3fmtlke::-moz-range-track{cursor:pointer}
+._bfhk18uv{background-color:initial}
+._d7w62hce::-moz-range-track{background-color:var(--track-bg)}
+._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
+._j5dh13gf:disabled{cursor:not-allowed}
+._jxarjiw3:hover:not(:disabled){--thumb-bg:var(--_14t3dsg)}
+._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
+._r7637vkz::-moz-range-thumb{width:1pc}
+._u98z7vkz::-webkit-slider-thumb{width:1pc}
+._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
+._wstuglyw{-webkit-appearance:none}
+._ydqg1xpu:hover:not(:disabled){--track-bg:var(--_rf9ekb)}
+._yfyntlke::-webkit-slider-thumb{cursor:pointer}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}
+._164c3zdg:focus-visible{--thumb-border:var(--_xjqa3d)}

package/dist/cjs/styled.js

@@ -1,3 +1,4 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,134 +7,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = void 0;
+require("./styled.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var theme = _interopRequireWildcard(require("./theme"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["valuePercent", "style"];
-var _hoverNotDisabled, _css;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var VAR_THUMB_BORDER_COLOR = '--thumb-border';
-var VAR_THUMB_SHADOW = '--thumb-shadow';
-var VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
-var VAR_TRACK_BACKGROUND_COLOR = '--track-bg';
-var VAR_TRACK_FOREGROUND_COLOR = '--track-fg';
-var VAR_TRACK_FOREGROUND_WIDTH = '--track-fg-width';
-var sliderThumbStyles = {
-  boxSizing: 'border-box',
-  width: theme.thumb.size,
-  height: theme.thumb.size,
-  border: 'none',
-  background: "var(".concat(VAR_THUMB_BACKGROUND_COLOR, ", ").concat(theme.thumb.background.default, ")"),
-  // adapted from @atlaskit/focus-ring
-  outline: "solid 2px var(".concat(VAR_THUMB_BORDER_COLOR, ")"),
-  outlineOffset: '2px',
-  borderRadius: "var(--ds-border-radius-circle, 50%)",
-  boxShadow: "var(".concat(VAR_THUMB_SHADOW, ")"),
-  cursor: 'pointer',
-  // Different implicit behavior across browsers -> making it explicit.
-  transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
-};
-var sliderTrackStyles = {
-  borderRadius: theme.track.borderRadius,
-  border: 0,
-  cursor: 'pointer',
-  height: theme.track.height,
-  width: '100%',
-  transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
-};
-
-// Styles are split per browser as they are implemented differently
-// Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
-// with CSS selectors they don't recognise, e.g. &::-ms-thumb
-var browserStyles = {
-  webkit: (0, _react2.css)({
-    WebkitAppearance: 'none',
-    // Hides the slider so that custom slider can be made
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-webkit-slider-thumb': _objectSpread(_objectSpread({}, sliderThumbStyles), {}, {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      marginBlockStart: -(theme.thumb.size - theme.track.height) / 2,
-      WebkitAppearance: 'none'
-    }),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-webkit-slider-runnable-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
-      /**
-       * Webkit does not have separate properties for the background/foreground like firefox.
-       * Instead we use background layering:
-       * - The gray background is a simple background color.
-       * - The blue foreground is a 'gradient' (to create a color block) that is sized to the progress.
-       *
-       * Individual properties have been used over the `background` shorthand for readability.
-       */
-      backgroundColor: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")"),
-      backgroundImage: "linear-gradient(var(".concat(VAR_TRACK_FOREGROUND_COLOR, "), var(").concat(VAR_TRACK_FOREGROUND_COLOR, "))"),
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: "var(".concat(VAR_TRACK_FOREGROUND_WIDTH, ") 100%"),
-      // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '[dir="rtl"] &': {
-        backgroundPosition: 'right'
-      }
-    }),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':disabled': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '::-webkit-slider-thumb, ::-webkit-slider-runnable-track': {
-        cursor: 'not-allowed'
-      }
-    }
-  }),
-  firefox: (0, _react2.css)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '::-moz-range-thumb': sliderThumbStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-moz-focus-outer': {
-      border: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-moz-range-progress': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
-      background: "var(".concat(VAR_TRACK_FOREGROUND_COLOR, ")")
-    }),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-moz-range-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
-      background: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")")
-    }),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':disabled': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '::-moz-range-thumb, ::-moz-range-progress, ::-moz-range-track': {
-        cursor: 'not-allowed'
-      }
-    }
-  })
-};
-var baseStyles = (0, _react2.css)({
-  width: '100%',
-  // Has a fixed width by default
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: theme.input.height,
-  // Otherwise thumb will collide with previous box element
-  background: 'transparent',
-  // Otherwise white
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':focus': {
-    outline: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':disabled': {
-    cursor: 'not-allowed',
-    opacity: "var(--ds-opacity-disabled, 0.4)"
-  }
-});
-var themeStyles = (0, _react2.css)((_css = {}, (0, _defineProperty2.default)(_css, VAR_THUMB_SHADOW, theme.thumb.boxShadow.default), (0, _defineProperty2.default)(_css, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.default), (0, _defineProperty2.default)(_css, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.default), (0, _defineProperty2.default)(_css, ':hover:not(:disabled)', (_hoverNotDisabled = {}, (0, _defineProperty2.default)(_hoverNotDisabled, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.hovered), (0, _defineProperty2.default)(_hoverNotDisabled, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.hovered), (0, _defineProperty2.default)(_hoverNotDisabled, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.hovered), _hoverNotDisabled)), (0, _defineProperty2.default)(_css, ':active:not(:disabled)', (0, _defineProperty2.default)({}, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.pressed)), (0, _defineProperty2.default)(_css, ':focus-visible', (0, _defineProperty2.default)({}, VAR_THUMB_BORDER_COLOR, theme.thumb.borderColor.focused)), _css));
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Styles are split up to avoid edge-cases with TS implementations between `css` and `cssMap` with some
+// of these edge-case pseudo-selectors.
+// Previously, in Emotion, these selectors weren't consolidated, eg. `&::webkit-thumb, &::moz-thumb`
+// would not be parsed by either browser, but this may no longer be the case in Compiled
+var webkitStyles = null;
+var firefoxStyles = null;
+var baseStyles = null;
+var themeStyles = null;
 
 /**
  * __Input__
@@ -143,11 +37,23 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var valuePercent = props.valuePercent,
     style = props.style,
     strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return (0, _react2.jsx)("input", (0, _extends2.default)({}, strippedProps, {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    style: (0, _defineProperty2.default)({}, VAR_TRACK_FOREGROUND_WIDTH, "".concat(valuePercent, "%")),
+  return /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, strippedProps, {
     ref: ref,
-    css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1ylp _bfhk18uv _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98z7vkz _1j707vkz _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r7637vkz _1mn57vkz _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd21y44 _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg"]),
+    style: _objectSpread(_objectSpread({}, {
+      // We are creating a css variable to control the "progress" portion of the range input
+      // This avoids us needing to create a new css class for each new percentage value
+      '--track-fg-width': "".concat(valuePercent, "%")
+    }), {}, {
+      "--_171tp53": (0, _runtime.ix)("var(--thumb-bg, ".concat("var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"), ")")),
+      "--_cghoza": (0, _runtime.ix)("var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")),
+      "--_19g1tth": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N30, ")")),
+      "--_1eby16r": (0, _runtime.ix)("var(--ds-background-neutral-bold, ".concat(_colors.B400, ")")),
+      "--_14t3dsg": (0, _runtime.ix)("var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")")),
+      "--_rf9ekb": (0, _runtime.ix)("var(--ds-background-neutral-hovered, ".concat(_colors.N40, ")")),
+      "--_1pam7of": (0, _runtime.ix)("var(--ds-background-neutral-bold-pressed, ".concat(_colors.B200, ")")),
+      "--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")"))
+    })
   }));
 });
 Input.displayName = 'InputRange';

package/dist/es2019/styled.compiled.css

@@ -0,0 +1,72 @@
+._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
+._10lridpf::-webkit-slider-runnable-track{border:0}
+._15raidpf::-moz-focus-outer{border:0}
+._1gvoyh40::-moz-range-track{border-radius:2px}
+._1kdl1q5u::-webkit-slider-thumb{border-radius:var(--ds-border-radius-circle,50%)}
+._1nx42hjt::-moz-range-track{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
+._1rf3g56u::-moz-range-thumb{outline:solid 2px var(--thumb-border)}
+._1tcb2hjt::-moz-range-progress{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
+._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
+._1yq0glyw::-moz-range-thumb{border:none}
+._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
+._37ywyh40::-moz-range-progress{border-radius:2px}
+._e8hnidpf::-moz-range-progress{border:0}
+._g6tdyh40::-webkit-slider-runnable-track{border-radius:2px}
+._h2ksglyw::-webkit-slider-thumb{border:none}
+._m8f8g56u::-webkit-slider-thumb{outline:solid 2px var(--thumb-border)}
+._ru37idpf::-moz-range-track{border:0}
+._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
+._10o7tlke::-moz-range-thumb{cursor:pointer}
+._12el5udg::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
+._142y1y44::-moz-range-track{height:4px}
+._14h11uvs{--thumb-shadow:var(--ds-UNSAFE-transparent,0 4px 8px -2px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31))}
+._15dp1yrq{--track-bg:var(--ds-background-neutral,#ebecf0)}
+._168l1y44::-webkit-slider-runnable-track{height:4px}
+._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
+._18lxyvsn{--track-fg:var(--ds-background-neutral-bold,#0052cc)}
+._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
+._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box}
+._1bsb1osq{width:100%}
+._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
+._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
+._1esf5udg::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
+._1f5t1osq::-moz-range-track{width:100%}
+._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
+._1g2h1osq::-webkit-slider-runnable-track{width:100%}
+._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))}
+._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
+._1j707vkz::-webkit-slider-thumb{height:1pc}
+._1jhc1eo5:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#0065ff)}
+._1kd21y44::-moz-range-progress{height:4px}
+._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
+._1mn57vkz::-moz-range-thumb{height:1pc}
+._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
+._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
+._1ruc16ss:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#2684ff)}
+._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
+._1ssqtlke::-moz-range-progress{cursor:pointer}
+._1vq313gf:disabled::-moz-range-thumb{cursor:not-allowed}
+._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
+._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
+._4t3i1ylp{height:40px}
+._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)}
+._5i7a13gf:disabled::-webkit-slider-runnable-track{cursor:not-allowed}
+._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)}
+._aoww1osq::-moz-range-progress{width:100%}
+._b3fmtlke::-moz-range-track{cursor:pointer}
+._bfhk18uv{background-color:initial}
+._d7w62hce::-moz-range-track{background-color:var(--track-bg)}
+._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
+._j5dh13gf:disabled{cursor:not-allowed}
+._jxar1eo5:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#0065ff)}
+._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
+._r7637vkz::-moz-range-thumb{width:1pc}
+._u98z7vkz::-webkit-slider-thumb{width:1pc}
+._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
+._wstuglyw{-webkit-appearance:none}
+._ydqghkel:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#dfe1e6)}
+._yfyntlke::-webkit-slider-thumb{cursor:pointer}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}
+._164c194a:focus-visible{--thumb-border:var(--ds-border-focused,#2684ff)}

package/dist/es2019/styled.js

@@ -1,161 +1,18 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.33.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import * as theme from './theme';
-const VAR_THUMB_BORDER_COLOR = '--thumb-border';
-const VAR_THUMB_SHADOW = '--thumb-shadow';
-const VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
-const VAR_TRACK_BACKGROUND_COLOR = '--track-bg';
-const VAR_TRACK_FOREGROUND_COLOR = '--track-fg';
-const VAR_TRACK_FOREGROUND_WIDTH = '--track-fg-width';
-const sliderThumbStyles = {
-  boxSizing: 'border-box',
-  width: theme.thumb.size,
-  height: theme.thumb.size,
-  border: 'none',
-  background: `var(${VAR_THUMB_BACKGROUND_COLOR}, ${theme.thumb.background.default})`,
-  // adapted from @atlaskit/focus-ring
-  outline: `solid 2px var(${VAR_THUMB_BORDER_COLOR})`,
-  outlineOffset: '2px',
-  borderRadius: "var(--ds-border-radius-circle, 50%)",
-  boxShadow: `var(${VAR_THUMB_SHADOW})`,
-  cursor: 'pointer',
-  // Different implicit behavior across browsers -> making it explicit.
-  transition: `background-color ${theme.transitionDuration} ease-in-out`
-};
-const sliderTrackStyles = {
-  borderRadius: theme.track.borderRadius,
-  border: 0,
-  cursor: 'pointer',
-  height: theme.track.height,
-  width: '100%',
-  transition: `background-color ${theme.transitionDuration} ease-in-out`
-};
-
-// Styles are split per browser as they are implemented differently
-// Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
-// with CSS selectors they don't recognise, e.g. &::-ms-thumb
-const browserStyles = {
-  webkit: css({
-    WebkitAppearance: 'none',
-    // Hides the slider so that custom slider can be made
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-webkit-slider-thumb': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      ...sliderThumbStyles,
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      marginBlockStart: -(theme.thumb.size - theme.track.height) / 2,
-      WebkitAppearance: 'none'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-webkit-slider-runnable-track': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      ...sliderTrackStyles,
-      /**
-       * Webkit does not have separate properties for the background/foreground like firefox.
-       * Instead we use background layering:
-       * - The gray background is a simple background color.
-       * - The blue foreground is a 'gradient' (to create a color block) that is sized to the progress.
-       *
-       * Individual properties have been used over the `background` shorthand for readability.
-       */
-      backgroundColor: `var(${VAR_TRACK_BACKGROUND_COLOR})`,
-      backgroundImage: `linear-gradient(var(${VAR_TRACK_FOREGROUND_COLOR}), var(${VAR_TRACK_FOREGROUND_COLOR}))`,
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: `var(${VAR_TRACK_FOREGROUND_WIDTH}) 100%`,
-      // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '[dir="rtl"] &': {
-        backgroundPosition: 'right'
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':disabled': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '::-webkit-slider-thumb, ::-webkit-slider-runnable-track': {
-        cursor: 'not-allowed'
-      }
-    }
-  }),
-  firefox: css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '::-moz-range-thumb': sliderThumbStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-moz-focus-outer': {
-      border: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-moz-range-progress': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      ...sliderTrackStyles,
-      background: `var(${VAR_TRACK_FOREGROUND_COLOR})`
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-moz-range-track': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      ...sliderTrackStyles,
-      background: `var(${VAR_TRACK_BACKGROUND_COLOR})`
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':disabled': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '::-moz-range-thumb, ::-moz-range-progress, ::-moz-range-track': {
-        cursor: 'not-allowed'
-      }
-    }
-  })
-};
-const baseStyles = css({
-  width: '100%',
-  // Has a fixed width by default
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: theme.input.height,
-  // Otherwise thumb will collide with previous box element
-  background: 'transparent',
-  // Otherwise white
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':focus': {
-    outline: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':disabled': {
-    cursor: 'not-allowed',
-    opacity: "var(--ds-opacity-disabled, 0.4)"
-  }
-});
-const themeStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  [VAR_THUMB_SHADOW]: theme.thumb.boxShadow.default,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  [VAR_TRACK_BACKGROUND_COLOR]: theme.track.background.default,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  [VAR_TRACK_FOREGROUND_COLOR]: theme.track.foreground.default,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover:not(:disabled)': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    [VAR_THUMB_BACKGROUND_COLOR]: theme.thumb.background.hovered,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    [VAR_TRACK_BACKGROUND_COLOR]: theme.track.background.hovered,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    [VAR_TRACK_FOREGROUND_COLOR]: theme.track.foreground.hovered
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':active:not(:disabled)': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    [VAR_THUMB_BACKGROUND_COLOR]: theme.thumb.background.pressed
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':focus-visible': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    [VAR_THUMB_BORDER_COLOR]: theme.thumb.borderColor.focused
-  }
-});
+import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
+// Styles are split up to avoid edge-cases with TS implementations between `css` and `cssMap` with some
+// of these edge-case pseudo-selectors.
+// Previously, in Emotion, these selectors weren't consolidated, eg. `&::webkit-thumb, &::moz-thumb`
+// would not be parsed by either browser, but this may no longer be the case in Compiled
+const webkitStyles = null;
+const firefoxStyles = null;
+const baseStyles = null;
+const themeStyles = null;
 
 /**
  * __Input__
@@ -167,16 +24,14 @@ export const Input = /*#__PURE__*/forwardRef((props, ref) => {
     style,
     ...strippedProps
   } = props;
-  return jsx("input", _extends({}, strippedProps, {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  return /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
     style: {
       // We are creating a css variable to control the "progress" portion of the range input
       // This avoids us needing to create a new css class for each new percentage value
-      [VAR_TRACK_FOREGROUND_WIDTH]: `${valuePercent}%`
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      '--track-fg-width': `${valuePercent}%`
     },
     ref: ref,
-    css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]
+    className: ax(["_1bsb1osq _4t3i1ylp _bfhk18uv _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98z7vkz _1j707vkz _1esf5udg _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r7637vkz _1mn57vkz _12el5udg _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd21y44 _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11uvs _15dp1yrq _18lxyvsn _jxar1eo5 _ydqghkel _1jhc1eo5 _1ruc16ss _164c194a"])
   }));
 });
 Input.displayName = 'InputRange';

package/dist/esm/styled.compiled.css

@@ -0,0 +1,72 @@
+._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
+._10lridpf::-webkit-slider-runnable-track{border:0}
+._15raidpf::-moz-focus-outer{border:0}
+._1gvoyh40::-moz-range-track{border-radius:2px}
+._1kdl1q5u::-webkit-slider-thumb{border-radius:var(--ds-border-radius-circle,50%)}
+._1nx42hjt::-moz-range-track{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
+._1rf3g56u::-moz-range-thumb{outline:solid 2px var(--thumb-border)}
+._1tcb2hjt::-moz-range-progress{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
+._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
+._1yq0glyw::-moz-range-thumb{border:none}
+._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
+._37ywyh40::-moz-range-progress{border-radius:2px}
+._e8hnidpf::-moz-range-progress{border:0}
+._g6tdyh40::-webkit-slider-runnable-track{border-radius:2px}
+._h2ksglyw::-webkit-slider-thumb{border:none}
+._m8f8g56u::-webkit-slider-thumb{outline:solid 2px var(--thumb-border)}
+._ru37idpf::-moz-range-track{border:0}
+._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
+._10o7tlke::-moz-range-thumb{cursor:pointer}
+._12el4alp::-moz-range-thumb{background-color:var(--_171tp53)}
+._142y1y44::-moz-range-track{height:4px}
+._14h11gpr{--thumb-shadow:var(--_cghoza)}
+._15dpptpz{--track-bg:var(--_19g1tth)}
+._168l1y44::-webkit-slider-runnable-track{height:4px}
+._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
+._18lx1n8f{--track-fg:var(--_1eby16r)}
+._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
+._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box}
+._1bsb1osq{width:100%}
+._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
+._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
+._1esf4alp::-webkit-slider-thumb{background-color:var(--_171tp53)}
+._1f5t1osq::-moz-range-track{width:100%}
+._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
+._1g2h1osq::-webkit-slider-runnable-track{width:100%}
+._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))}
+._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
+._1j707vkz::-webkit-slider-thumb{height:1pc}
+._1jhcjiw3:hover:not(:disabled){--track-fg:var(--_14t3dsg)}
+._1kd21y44::-moz-range-progress{height:4px}
+._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
+._1mn57vkz::-moz-range-thumb{height:1pc}
+._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
+._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
+._1rucy2jz:active:not(:disabled){--thumb-bg:var(--_1pam7of)}
+._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
+._1ssqtlke::-moz-range-progress{cursor:pointer}
+._1vq313gf:disabled::-moz-range-thumb{cursor:not-allowed}
+._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
+._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
+._4t3i1ylp{height:40px}
+._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)}
+._5i7a13gf:disabled::-webkit-slider-runnable-track{cursor:not-allowed}
+._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)}
+._aoww1osq::-moz-range-progress{width:100%}
+._b3fmtlke::-moz-range-track{cursor:pointer}
+._bfhk18uv{background-color:initial}
+._d7w62hce::-moz-range-track{background-color:var(--track-bg)}
+._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
+._j5dh13gf:disabled{cursor:not-allowed}
+._jxarjiw3:hover:not(:disabled){--thumb-bg:var(--_14t3dsg)}
+._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
+._r7637vkz::-moz-range-thumb{width:1pc}
+._u98z7vkz::-webkit-slider-thumb{width:1pc}
+._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
+._wstuglyw{-webkit-appearance:none}
+._ydqg1xpu:hover:not(:disabled){--track-bg:var(--_rf9ekb)}
+._yfyntlke::-webkit-slider-thumb{cursor:pointer}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}
+._164c3zdg:focus-visible{--thumb-border:var(--_xjqa3d)}

package/dist/esm/styled.js

@@ -1,133 +1,23 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.33.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["valuePercent", "style"];
-var _hoverNotDisabled, _css;
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
 import { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import * as theme from './theme';
-var VAR_THUMB_BORDER_COLOR = '--thumb-border';
-var VAR_THUMB_SHADOW = '--thumb-shadow';
-var VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
-var VAR_TRACK_BACKGROUND_COLOR = '--track-bg';
-var VAR_TRACK_FOREGROUND_COLOR = '--track-fg';
-var VAR_TRACK_FOREGROUND_WIDTH = '--track-fg-width';
-var sliderThumbStyles = {
-  boxSizing: 'border-box',
-  width: theme.thumb.size,
-  height: theme.thumb.size,
-  border: 'none',
-  background: "var(".concat(VAR_THUMB_BACKGROUND_COLOR, ", ").concat(theme.thumb.background.default, ")"),
-  // adapted from @atlaskit/focus-ring
-  outline: "solid 2px var(".concat(VAR_THUMB_BORDER_COLOR, ")"),
-  outlineOffset: '2px',
-  borderRadius: "var(--ds-border-radius-circle, 50%)",
-  boxShadow: "var(".concat(VAR_THUMB_SHADOW, ")"),
-  cursor: 'pointer',
-  // Different implicit behavior across browsers -> making it explicit.
-  transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
-};
-var sliderTrackStyles = {
-  borderRadius: theme.track.borderRadius,
-  border: 0,
-  cursor: 'pointer',
-  height: theme.track.height,
-  width: '100%',
-  transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
-};
-
-// Styles are split per browser as they are implemented differently
-// Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
-// with CSS selectors they don't recognise, e.g. &::-ms-thumb
-var browserStyles = {
-  webkit: css({
-    WebkitAppearance: 'none',
-    // Hides the slider so that custom slider can be made
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-webkit-slider-thumb': _objectSpread(_objectSpread({}, sliderThumbStyles), {}, {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      marginBlockStart: -(theme.thumb.size - theme.track.height) / 2,
-      WebkitAppearance: 'none'
-    }),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-webkit-slider-runnable-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
-      /**
-       * Webkit does not have separate properties for the background/foreground like firefox.
-       * Instead we use background layering:
-       * - The gray background is a simple background color.
-       * - The blue foreground is a 'gradient' (to create a color block) that is sized to the progress.
-       *
-       * Individual properties have been used over the `background` shorthand for readability.
-       */
-      backgroundColor: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")"),
-      backgroundImage: "linear-gradient(var(".concat(VAR_TRACK_FOREGROUND_COLOR, "), var(").concat(VAR_TRACK_FOREGROUND_COLOR, "))"),
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: "var(".concat(VAR_TRACK_FOREGROUND_WIDTH, ") 100%"),
-      // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '[dir="rtl"] &': {
-        backgroundPosition: 'right'
-      }
-    }),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':disabled': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '::-webkit-slider-thumb, ::-webkit-slider-runnable-track': {
-        cursor: 'not-allowed'
-      }
-    }
-  }),
-  firefox: css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '::-moz-range-thumb': sliderThumbStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-moz-focus-outer': {
-      border: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-moz-range-progress': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
-      background: "var(".concat(VAR_TRACK_FOREGROUND_COLOR, ")")
-    }),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '::-moz-range-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
-      background: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")")
-    }),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':disabled': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '::-moz-range-thumb, ::-moz-range-progress, ::-moz-range-track': {
-        cursor: 'not-allowed'
-      }
-    }
-  })
-};
-var baseStyles = css({
-  width: '100%',
-  // Has a fixed width by default
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: theme.input.height,
-  // Otherwise thumb will collide with previous box element
-  background: 'transparent',
-  // Otherwise white
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':focus': {
-    outline: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':disabled': {
-    cursor: 'not-allowed',
-    opacity: "var(--ds-opacity-disabled, 0.4)"
-  }
-});
-var themeStyles = css((_css = {}, _defineProperty(_css, VAR_THUMB_SHADOW, theme.thumb.boxShadow.default), _defineProperty(_css, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.default), _defineProperty(_css, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.default), _defineProperty(_css, ':hover:not(:disabled)', (_hoverNotDisabled = {}, _defineProperty(_hoverNotDisabled, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.hovered), _defineProperty(_hoverNotDisabled, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.hovered), _defineProperty(_hoverNotDisabled, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.hovered), _hoverNotDisabled)), _defineProperty(_css, ':active:not(:disabled)', _defineProperty({}, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.pressed)), _defineProperty(_css, ':focus-visible', _defineProperty({}, VAR_THUMB_BORDER_COLOR, theme.thumb.borderColor.focused)), _css));
+import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
+// Styles are split up to avoid edge-cases with TS implementations between `css` and `cssMap` with some
+// of these edge-case pseudo-selectors.
+// Previously, in Emotion, these selectors weren't consolidated, eg. `&::webkit-thumb, &::moz-thumb`
+// would not be parsed by either browser, but this may no longer be the case in Compiled
+var webkitStyles = null;
+var firefoxStyles = null;
+var baseStyles = null;
+var themeStyles = null;
 
 /**
  * __Input__
@@ -137,11 +27,23 @@ export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
   var valuePercent = props.valuePercent,
     style = props.style,
     strippedProps = _objectWithoutProperties(props, _excluded);
-  return jsx("input", _extends({}, strippedProps, {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    style: _defineProperty({}, VAR_TRACK_FOREGROUND_WIDTH, "".concat(valuePercent, "%")),
+  return /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
     ref: ref,
-    css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]
+    className: ax(["_1bsb1osq _4t3i1ylp _bfhk18uv _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98z7vkz _1j707vkz _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r7637vkz _1mn57vkz _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd21y44 _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg"]),
+    style: _objectSpread(_objectSpread({}, {
+      // We are creating a css variable to control the "progress" portion of the range input
+      // This avoids us needing to create a new css class for each new percentage value
+      '--track-fg-width': "".concat(valuePercent, "%")
+    }), {}, {
+      "--_171tp53": ix("var(--thumb-bg, ".concat("var(--ds-background-neutral-bold, ".concat(B400, ")"), ")")),
+      "--_cghoza": ix("var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")),
+      "--_19g1tth": ix("var(--ds-background-neutral, ".concat(N30, ")")),
+      "--_1eby16r": ix("var(--ds-background-neutral-bold, ".concat(B400, ")")),
+      "--_14t3dsg": ix("var(--ds-background-neutral-bold-hovered, ".concat(B300, ")")),
+      "--_rf9ekb": ix("var(--ds-background-neutral-hovered, ".concat(N40, ")")),
+      "--_1pam7of": ix("var(--ds-background-neutral-bold-pressed, ".concat(B200, ")")),
+      "--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")"))
+    })
   }));
 });
 Input.displayName = 'InputRange';

package/dist/types/range.d.ts

@@ -46,5 +46,5 @@ export type RangeProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement
  * - [Code](https://atlassian.design/components/range/code)
  * - [Usage](https://atlassian.design/components/range/usage)
  */
-declare const Range: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "required">, keyof OwnProps> & OwnProps & React.RefAttributes<HTMLInputElement>>;
+declare const Range: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "checked" | "required">, keyof OwnProps> & OwnProps & React.RefAttributes<HTMLInputElement>>;
 export default Range;

package/dist/types/styled.d.ts

@@ -1,7 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 /// <reference types="react" />
 /**
  * __Input__

package/dist/types-ts4.5/range.d.ts

@@ -46,5 +46,5 @@ export type RangeProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement
  * - [Code](https://atlassian.design/components/range/code)
  * - [Usage](https://atlassian.design/components/range/usage)
  */
-declare const Range: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "required">, keyof OwnProps> & OwnProps & React.RefAttributes<HTMLInputElement>>;
+declare const Range: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "checked" | "required">, keyof OwnProps> & OwnProps & React.RefAttributes<HTMLInputElement>>;
 export default Range;

package/dist/types-ts4.5/styled.d.ts

@@ -1,8 +1,4 @@
 /// <reference types="react" />
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 /**
  * __Input__
  * Internal-only styled input component.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/range",
-	"version": "7.4.5",
+	"version": "8.0.1",
 	"description": "A range lets users choose an approximate value on a slider.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,25 +21,27 @@
 		"runReact18": true,
 		"website": {
 			"name": "Range",
-			"category": "Components"
+			"category": "Forms and input"
 		}
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/css": "^0.7.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.5.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
+		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/checkbox": "^15.1.0",
+		"@atlaskit/checkbox": "^15.2.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/tooltip": "^18.9.0",
+		"@atlaskit/tooltip": "^19.0.0",
 		"@atlaskit/visual-regression": "*",
 		"@emotion/styled": "^11.0.0",
 		"@testing-library/react": "^12.1.5",

package/tsconfig.json

@@ -14,6 +14,5 @@
     "./example-helpers/**/*.tsx"
   ],
   "compilerOptions": {
-    "baseUrl": "./"
   }
 }