@atlaskit/range 7.2.0 → 7.3.0

package/README.md

@@ -10,4 +10,5 @@ yarn add @atlaskit/range
 
 ## Usage
 
-For more information, see our [detailed range docs and examples](https://atlassian.design/components/range/).
+For more information, see our
+[detailed range docs and examples](https://atlassian.design/components/range/).

package/__perf__/default.tsx

@@ -2,6 +2,4 @@ import React from 'react';
 
 import Range from '../src';
 
-export default () => (
-  <Range step={1} onChange={(value) => console.log('new value', value)} />
-);
+export default () => <Range step={1} onChange={(value) => console.log('new value', value)} />;

package/__perf__/range.tsx

@@ -1,42 +1,37 @@
 import React from 'react';
 
 import { fireEvent } from '@testing-library/react';
-import type {
-  InteractionTaskArgs,
-  PublicInteractionTask,
-} from 'storybook-addon-performance';
+import type { InteractionTaskArgs, PublicInteractionTask } from 'storybook-addon-performance';
 
 import Range from '../src';
 
 const interactionTasks: PublicInteractionTask[] = [
-  {
-    name: 'Changing input value',
-    description: 'Change the input value of a range with 500 steps',
-    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-      const range: HTMLElement | null = container.querySelector(
-        '[data-testid="my-range"]',
-      );
-      if (range == null) {
-        throw new Error('Could not find range element');
-      }
-      for (let i = 251; i < 300; i++) {
-        fireEvent.change(range, { target: { value: i } });
-      }
-    },
-  },
+	{
+		name: 'Changing input value',
+		description: 'Change the input value of a range with 500 steps',
+		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+			const range: HTMLElement | null = container.querySelector('[data-testid="my-range"]');
+			if (range == null) {
+				throw new Error('Could not find range element');
+			}
+			for (let i = 251; i < 300; i++) {
+				fireEvent.change(range, { target: { value: i } });
+			}
+		},
+	},
 ];
 
 function PerformanceComponent() {
-  return <Range defaultValue={250} min={0} max={500} testId="my-range" />;
+	return <Range defaultValue={250} min={0} max={500} testId="my-range" />;
 }
 
 PerformanceComponent.story = {
-  name: 'Performance',
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	name: 'Performance',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default PerformanceComponent;

package/afm-jira/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../../../tsconfig.products.json",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "outDir": "../../../../../tsDist/@atlaskit__range/app",
+    "composite": true,
+    "rootDir": "../",
+    "baseUrl": "../"
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ],
+  "references": [
+    {
+      "path": "../../ds-lib/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../theme/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../tokens/afm-jira/tsconfig.json"
+    }
+  ]
+}

package/codemods/4.0.0-lite-mode.tsx

@@ -1,92 +1,67 @@
-import core, {
-  API,
-  ASTPath,
-  FileInfo,
-  ImportDeclaration,
-  JSXAttribute,
-  Options,
+import {
+	type API,
+	type ASTPath,
+	type default as core,
+	type FileInfo,
+	type ImportDeclaration,
+	type JSXAttribute,
+	type Options,
 } from 'jscodeshift';
 
-function getDefaultSpecifier(
-  j: core.JSCodeshift,
-  source: any,
-  specifier: string,
-) {
-  const specifiers = source
-    .find(j.ImportDeclaration)
-    .filter(
-      (path: ASTPath<ImportDeclaration>) =>
-        path.node.source.value === specifier,
-    )
-    .find(j.ImportDefaultSpecifier);
+function getDefaultSpecifier(j: core.JSCodeshift, source: any, specifier: string) {
+	const specifiers = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+		.find(j.ImportDefaultSpecifier);
 
-  if (!specifiers.length) {
-    return null;
-  }
-  return specifiers.nodes()[0]!.local!.name;
+	if (!specifiers.length) {
+		return null;
+	}
+	return specifiers.nodes()[0]!.local!.name;
 }
 
-function getJSXAttributesByName(
-  j: core.JSCodeshift,
-  element: ASTPath<any>,
-  attributeName: string,
-) {
-  return j(element)
-    .find(j.JSXOpeningElement)
-    .find(j.JSXAttribute)
-    .filter((attribute) => {
-      const matches = j(attribute)
-        .find(j.JSXIdentifier)
-        .filter((identifier) => identifier.value.name === attributeName);
-      return Boolean(matches.length);
-    });
+function getJSXAttributesByName(j: core.JSCodeshift, element: ASTPath<any>, attributeName: string) {
+	return j(element)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXAttribute)
+		.filter((attribute) => {
+			const matches = j(attribute)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === attributeName);
+			return Boolean(matches.length);
+		});
 }
 
 function updateRef(j: core.JSCodeshift, source: any) {
-  const defaultSpecifier = getDefaultSpecifier(j, source, '@atlaskit/range');
+	const defaultSpecifier = getDefaultSpecifier(j, source, '@atlaskit/range');
 
-  if (!defaultSpecifier) {
-    return;
-  }
+	if (!defaultSpecifier) {
+		return;
+	}
 
-  source
-    .findJSXElements(defaultSpecifier)
-    .forEach((element: ASTPath<JSXAttribute>) => {
-      getJSXAttributesByName(j, element, 'inputRef').forEach((attribute) => {
-        j(attribute).replaceWith(
-          j.jsxAttribute(j.jsxIdentifier('ref'), attribute.node.value),
-        );
-      });
-    });
+	source.findJSXElements(defaultSpecifier).forEach((element: ASTPath<JSXAttribute>) => {
+		getJSXAttributesByName(j, element, 'inputRef').forEach((attribute) => {
+			j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier('ref'), attribute.node.value));
+		});
+	});
 }
 
-function hasImportDeclaration(
-  j: core.JSCodeshift,
-  source: any,
-  importPath: string,
-) {
-  const imports = source
-    .find(j.ImportDeclaration)
-    .filter(
-      (path: ASTPath<ImportDeclaration>) =>
-        path.node.source.value === importPath,
-    );
+function hasImportDeclaration(j: core.JSCodeshift, source: any, importPath: string) {
+	const imports = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === importPath);
 
-  return Boolean(imports.length);
+	return Boolean(imports.length);
 }
 
-export default function transformer(
-  fileInfo: FileInfo,
-  { jscodeshift: j }: API,
-  options: Options,
-) {
-  const source = j(fileInfo.source);
+export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
+	const source = j(fileInfo.source);
 
-  if (!hasImportDeclaration(j, source, '@atlaskit/range')) {
-    return fileInfo.source;
-  }
+	if (!hasImportDeclaration(j, source, '@atlaskit/range')) {
+		return fileInfo.source;
+	}
 
-  updateRef(j, source);
+	updateRef(j, source);
 
-  return source.toSource(options.printOptions || { quote: 'single' });
+	return source.toSource(options.printOptions || { quote: 'single' });
 }

package/codemods/__tests__/4.0.0-lite-mode.tsx

@@ -5,10 +5,10 @@ import transformer from '../4.0.0-lite-mode';
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('Update ref prop', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import React, { useRef } from 'react';
       import Range from '@atlaskit/range';
 
@@ -21,7 +21,7 @@ describe('Update ref prop', () => {
         return <Range inputRef={inputRef} />;
       }
     `,
-    `
+		`
       import React, { useRef } from 'react';
       import Range from '@atlaskit/range';
 
@@ -34,13 +34,13 @@ describe('Update ref prop', () => {
         return <Range ref={inputRef} />;
       }
     `,
-    'should replace inputRef with ref',
-  );
+		'should replace inputRef with ref',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import React, { useRef } from 'react';
       import Range from '@atlaskit/range';
 
@@ -56,7 +56,7 @@ describe('Update ref prop', () => {
         );
       }
     `,
-    `
+		`
       import React, { useRef } from 'react';
       import Range from '@atlaskit/range';
 
@@ -72,13 +72,13 @@ describe('Update ref prop', () => {
         );
       }
     `,
-    'should replace inputRef with ref when defined inline',
-  );
+		'should replace inputRef with ref when defined inline',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import React, { useRef } from 'react';
       import Foo from '@atlaskit/range';
 
@@ -91,7 +91,7 @@ describe('Update ref prop', () => {
         return <Foo inputRef={inputRef} />;
       }
     `,
-    `
+		`
       import React, { useRef } from 'react';
       import Foo from '@atlaskit/range';
 
@@ -104,6 +104,6 @@ describe('Update ref prop', () => {
         return <Foo ref={inputRef} />;
       }
     `,
-    'should change inputRef with aliased import name',
-  );
+		'should change inputRef with aliased import name',
+	);
 });

package/constellation/index/examples.mdx

@@ -22,7 +22,8 @@ Range used with the [form component](/components/form/).
 
 ## Controlled
 
-In a controlled range, the state is managed by the React component. Use the `onChange` handler to set the value.
+In a controlled range, the state is managed by the React component. Use the `onChange` handler to
+set the value.
 
 <Example Component={RangeControlled} packageName="@atlaskit/range" />
 
@@ -34,8 +35,10 @@ In an uncontrolled range, the state is managed by the DOM.
 
 ## Disabled
 
-Set `isDisabled` to disable a range when another action has to be completed before the range is usable.
+Set `isDisabled` to disable a range when another action has to be completed before the range is
+usable.
 
-Avoid using disabled UI where possible. This can cause accessibility problems, because disabled UI does not give enough information about what went wrong and how to proceed.
+Avoid using disabled UI where possible. This can cause accessibility problems, because disabled UI
+does not give enough information about what went wrong and how to proceed.
 
 <Example Component={RangeDisabled} packageName="@atlaskit/range" />

package/constellation/index/usage.mdx

@@ -4,26 +4,33 @@ order: 2
 
 ## Usage
 
-Use ranges in [forms](/patterns/forms) to let people select a value within a given range of minimum and maximum values.
+Use ranges in [forms](/patterns/forms) to let people select a value within a given range of minimum
+and maximum values.
 
 ## Anatomy
 
 ![A diagram showing the range component UI, which is composed of a horizontal track, and a circle that indicates the current selected position on the range.](images/range-anatomy.png)
 
-1. **Track:** The track is a horizontal line that displays the range available for the user to select from.
-2. **Handle:** A circular position indicator that people can move along the track to change the value.
+1. **Track:** The track is a horizontal line that displays the range available for the user to
+   select from.
+2. **Handle:** A circular position indicator that people can move along the track to change the
+   value.
 
 ## Accessibility
 
-- Don't use a range if choosing a specific value is important. The slider interaction isn't as precise as explicitly typing or choosing an option from a list.
-- Don't use a range for values that aren't numeric. For example, selecting weekdays (Monday to Friday).
+- Don't use a range if choosing a specific value is important. The slider interaction isn't as
+  precise as explicitly typing or choosing an option from a list.
+- Don't use a range for values that aren't numeric. For example, selecting weekdays (Monday to
+  Friday).
 
 ## Best practices
 
 - Place labels directly above the input, and align to the left.
 - Don't use for ranges that are extremely large. For example, values over 100.
-- Don't use for ranges that are very small (for example, 1-3). The range moves in steps when the range of values is lower.
-- For left-to-right user interfaces, put the lowest value on the left of the slider. For right-to-left user interfaces, put the lowest value on the right.
+- Don't use for ranges that are very small (for example, 1-3). The range moves in steps when the
+  range of values is lower.
+- For left-to-right user interfaces, put the lowest value on the left of the slider. For
+  right-to-left user interfaces, put the lowest value on the right.
 
 ## Content guidelines
 

package/dist/cjs/styled.js

@@ -17,7 +17,9 @@ 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 && Object.prototype.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; } /** @jsx jsx */
+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';
@@ -55,11 +57,13 @@ 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
-      marginTop: -(theme.thumb.size - theme.track.height) / 2,
+      // 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.
@@ -73,29 +77,37 @@ var browserStyles = {
       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
+      // 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'
       }
@@ -105,13 +117,16 @@ var browserStyles = {
 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)"
@@ -128,6 +143,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     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, "%")),
     ref: ref,
     css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]

package/dist/es2019/styled.js

@@ -1,7 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
 const VAR_THUMB_BORDER_COLOR = '--thumb-border';
@@ -41,13 +46,17 @@ 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
-      marginTop: -(theme.thumb.size - theme.track.height) / 2,
+      // 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.
@@ -61,31 +70,41 @@ const browserStyles = {
       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
+      // 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'
       }
@@ -95,31 +114,45 @@ const browserStyles = {
 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
   }
 });
@@ -135,10 +168,12 @@ export const Input = /*#__PURE__*/forwardRef((props, ref) => {
     ...strippedProps
   } = props;
   return jsx("input", _extends({}, strippedProps, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     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
     },
     ref: ref,
     css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]