@atlaskit/range 7.0.3 → 7.0.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/range
 
+## 7.0.4
+
+### Patch Changes
+
+- [`22b754d311f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/22b754d311f) - Updates usage of removed design token `utilities.UNSAFE_util.transparent` in favour of its replacement `utilities.UNSAFE.transparent`
+- Updated dependencies
+
 ## 7.0.3
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _range.default;
   }
 });
-
 var _range = _interopRequireDefault(require("./range"));

package/dist/cjs/range.js

@@ -1,93 +1,70 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-
 var _styled = require("./styled");
-
 var _excluded = ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "testId"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var snapToStep = function snapToStep(value, min, step) {
   // Normalise the value to allow for division properly with different min values
-  var adjustedValue = value - min; // Find the number of steps the value covers
-
-  var numSteps = Math.round(adjustedValue / step); // Convert numSteps back into original range
-
+  var adjustedValue = value - min;
+  // Find the number of steps the value covers
+  var numSteps = Math.round(adjustedValue / step);
+  // Convert numSteps back into original range
   return numSteps * step + min;
 };
-
 var getRoundedPercentValue = function getRoundedPercentValue(value, min, max, step) {
   var percent = '0';
-
   if (min < max && value > min) {
     var snappedValue = snapToStep(value, min, step);
     percent = ((snappedValue - min) / (max - min) * 100).toFixed(2);
   }
-
   return percent;
 };
-
 var noop = _noop.default;
-
 var _default = /*#__PURE__*/(0, _react.forwardRef)(function Range(props, ref) {
   var _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? 50 : _props$defaultValue,
-      _props$max = props.max,
-      max = _props$max === void 0 ? 100 : _props$max,
-      _props$min = props.min,
-      min = _props$min === void 0 ? 0 : _props$min,
-      _props$onChange = props.onChange,
-      onChange = _props$onChange === void 0 ? noop : _props$onChange,
-      _props$step = props.step,
-      step = _props$step === void 0 ? 1 : _props$step,
-      propsValue = props.value,
-      testId = props.testId,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? 50 : _props$defaultValue,
+    _props$max = props.max,
+    max = _props$max === void 0 ? 100 : _props$max,
+    _props$min = props.min,
+    min = _props$min === void 0 ? 0 : _props$min,
+    _props$onChange = props.onChange,
+    onChange = _props$onChange === void 0 ? noop : _props$onChange,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    propsValue = props.value,
+    testId = props.testId,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var spreadProps = _objectSpread({
     max: max,
     min: min,
     step: step,
     ref: ref
   }, rest);
-
   var _useState = (0, _react.useState)(propsValue !== undefined ? propsValue : defaultValue),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var handleChange = (0, _react.useCallback)(function (e) {
     var newValue = Number(e.target.value);
-    setValue(newValue); // Note use of newValue to ensure up=to-date value is used
-
+    setValue(newValue);
+    // Note use of newValue to ensure up=to-date value is used
     onChange(newValue);
   }, [onChange]);
   var renderValue = propsValue !== undefined ? propsValue : value;
@@ -101,5 +78,4 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function Range(props, ref) {
     "data-testid": testId
   }, spreadProps));
 });
-
 exports.default = _default;

package/dist/cjs/styled.js

@@ -1,38 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = void 0;
-
 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 _excluded = ["valuePercent", "style"];
-
 var _hoverNotDisabled, _css;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var VAR_THUMB_BORDER_COLOR = '--thumb-border';
 var VAR_THUMB_SHADOW = '--thumb-shadow';
 var VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
@@ -61,10 +46,11 @@ var sliderTrackStyles = {
   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
+};
+
+// 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',
@@ -131,15 +117,15 @@ var baseStyles = (0, _react2.css)({
   }
 });
 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));
+
 /**
  * __Input__
  * Internal-only styled input component.
  */
-
 var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var valuePercent = props.valuePercent,
-      style = props.style,
-      strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    style = props.style,
+    strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (0, _react2.jsx)("input", (0, _extends2.default)({}, strippedProps, {
     style: (0, _defineProperty2.default)({}, VAR_TRACK_FOREGROUND_WIDTH, "".concat(valuePercent, "%")),
     ref: ref,

package/dist/cjs/theme.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transitionDuration = exports.track = exports.thumb = exports.input = void 0;
-
 var _colors = require("@atlaskit/theme/colors");
-
 var transitionDuration = '0.2s';
 exports.transitionDuration = transitionDuration;
 var input = {
@@ -26,14 +24,13 @@ var thumb = {
     focused: "var(--ds-border-focused, ".concat(_colors.B200, ")")
   },
   boxShadow: {
-    default: "var(--ds-UNSAFE_util-transparent, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+    default: "var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
     disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(_colors.N60A), ")")
   }
 };
 exports.thumb = thumb;
 var track = {
   height: 4,
-
   /**
    * borderRadius >= height / 2 to create a pill shape.
    * Using '50%' creates an ellipse.

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/range",
-	"version": "7.0.3",
+	"version": "7.0.4",
 	"sideEffects": false
 }

package/dist/es2019/range.js

@@ -2,27 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useState } from 'react';
 import __noop from '@atlaskit/ds-lib/noop';
 import { Input } from './styled';
-
 const snapToStep = (value, min, step) => {
   // Normalise the value to allow for division properly with different min values
-  const adjustedValue = value - min; // Find the number of steps the value covers
-
-  const numSteps = Math.round(adjustedValue / step); // Convert numSteps back into original range
-
+  const adjustedValue = value - min;
+  // Find the number of steps the value covers
+  const numSteps = Math.round(adjustedValue / step);
+  // Convert numSteps back into original range
   return numSteps * step + min;
 };
-
 const getRoundedPercentValue = (value, min, max, step) => {
   let percent = '0';
-
   if (min < max && value > min) {
     const snappedValue = snapToStep(value, min, step);
     percent = ((snappedValue - min) / (max - min) * 100).toFixed(2);
   }
-
   return percent;
 };
-
 const noop = __noop;
 export default /*#__PURE__*/forwardRef(function Range(props, ref) {
   const {
@@ -46,8 +41,8 @@ export default /*#__PURE__*/forwardRef(function Range(props, ref) {
   const [value, setValue] = useState(propsValue !== undefined ? propsValue : defaultValue);
   const handleChange = useCallback(e => {
     const newValue = Number(e.target.value);
-    setValue(newValue); // Note use of newValue to ensure up=to-date value is used
-
+    setValue(newValue);
+    // Note use of newValue to ensure up=to-date value is used
     onChange(newValue);
   }, [onChange]);
   const renderValue = propsValue !== undefined ? propsValue : value;

package/dist/es2019/styled.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
+
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import * as theme from './theme';
@@ -32,20 +32,22 @@ const sliderTrackStyles = {
   height: theme.track.height,
   width: '100%',
   transition: `background-color ${theme.transitionDuration} ease-in-out`
-}; // Styles are split per browser as they are implemented differently
+};
+
+// 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
-    '::-webkit-slider-thumb': { ...sliderThumbStyles,
+    '::-webkit-slider-thumb': {
+      ...sliderThumbStyles,
       marginTop: -(theme.thumb.size - theme.track.height) / 2,
       WebkitAppearance: 'none'
     },
-    '::-webkit-slider-runnable-track': { ...sliderTrackStyles,
-
+    '::-webkit-slider-runnable-track': {
+      ...sliderTrackStyles,
       /**
        * Webkit does not have separate properties for the background/foreground like firefox.
        * Instead we use background layering:
@@ -74,10 +76,12 @@ const browserStyles = {
     '::-moz-focus-outer': {
       border: 0
     },
-    '::-moz-range-progress': { ...sliderTrackStyles,
+    '::-moz-range-progress': {
+      ...sliderTrackStyles,
       background: `var(${VAR_TRACK_FOREGROUND_COLOR})`
     },
-    '::-moz-range-track': { ...sliderTrackStyles,
+    '::-moz-range-track': {
+      ...sliderTrackStyles,
       background: `var(${VAR_TRACK_BACKGROUND_COLOR})`
     },
     ':disabled': {
@@ -118,11 +122,11 @@ const themeStyles = css({
     [VAR_THUMB_BORDER_COLOR]: theme.thumb.borderColor.focused
   }
 });
+
 /**
  * __Input__
  * Internal-only styled input component.
  */
-
 export const Input = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     valuePercent,

package/dist/es2019/theme.js

@@ -16,13 +16,12 @@ export const thumb = {
     focused: `var(--ds-border-focused, ${B200})`
   },
   boxShadow: {
-    default: `var(--ds-UNSAFE_util-transparent, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
+    default: `var(--ds-UNSAFE-transparent, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
     disabled: `var(--ds-shadow-raised, ${`0 0 1px ${N60A}`})`
   }
 };
 export const track = {
   height: 4,
-
   /**
    * borderRadius >= height / 2 to create a pill shape.
    * Using '50%' creates an ellipse.

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/range",
-	"version": "7.0.3",
+	"version": "7.0.4",
 	"sideEffects": false
 }

package/dist/esm/range.js

@@ -3,69 +3,58 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "testId"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { forwardRef, useCallback, useState } from 'react';
 import __noop from '@atlaskit/ds-lib/noop';
 import { Input } from './styled';
-
 var snapToStep = function snapToStep(value, min, step) {
   // Normalise the value to allow for division properly with different min values
-  var adjustedValue = value - min; // Find the number of steps the value covers
-
-  var numSteps = Math.round(adjustedValue / step); // Convert numSteps back into original range
-
+  var adjustedValue = value - min;
+  // Find the number of steps the value covers
+  var numSteps = Math.round(adjustedValue / step);
+  // Convert numSteps back into original range
   return numSteps * step + min;
 };
-
 var getRoundedPercentValue = function getRoundedPercentValue(value, min, max, step) {
   var percent = '0';
-
   if (min < max && value > min) {
     var snappedValue = snapToStep(value, min, step);
     percent = ((snappedValue - min) / (max - min) * 100).toFixed(2);
   }
-
   return percent;
 };
-
 var noop = __noop;
 export default /*#__PURE__*/forwardRef(function Range(props, ref) {
   var _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? 50 : _props$defaultValue,
-      _props$max = props.max,
-      max = _props$max === void 0 ? 100 : _props$max,
-      _props$min = props.min,
-      min = _props$min === void 0 ? 0 : _props$min,
-      _props$onChange = props.onChange,
-      onChange = _props$onChange === void 0 ? noop : _props$onChange,
-      _props$step = props.step,
-      step = _props$step === void 0 ? 1 : _props$step,
-      propsValue = props.value,
-      testId = props.testId,
-      rest = _objectWithoutProperties(props, _excluded);
-
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? 50 : _props$defaultValue,
+    _props$max = props.max,
+    max = _props$max === void 0 ? 100 : _props$max,
+    _props$min = props.min,
+    min = _props$min === void 0 ? 0 : _props$min,
+    _props$onChange = props.onChange,
+    onChange = _props$onChange === void 0 ? noop : _props$onChange,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    propsValue = props.value,
+    testId = props.testId,
+    rest = _objectWithoutProperties(props, _excluded);
   var spreadProps = _objectSpread({
     max: max,
     min: min,
     step: step,
     ref: ref
   }, rest);
-
   var _useState = useState(propsValue !== undefined ? propsValue : defaultValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var handleChange = useCallback(function (e) {
     var newValue = Number(e.target.value);
-    setValue(newValue); // Note use of newValue to ensure up=to-date value is used
-
+    setValue(newValue);
+    // Note use of newValue to ensure up=to-date value is used
     onChange(newValue);
   }, [onChange]);
   var renderValue = propsValue !== undefined ? propsValue : value;

package/dist/esm/styled.js

@@ -2,14 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["valuePercent", "style"];
-
 var _hoverNotDisabled, _css;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /** @jsx jsx */
+
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import * as theme from './theme';
@@ -41,10 +38,11 @@ var sliderTrackStyles = {
   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
+};
+
+// 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',
@@ -111,16 +109,15 @@ var baseStyles = css({
   }
 });
 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));
+
 /**
  * __Input__
  * Internal-only styled input component.
  */
-
 export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
   var valuePercent = props.valuePercent,
-      style = props.style,
-      strippedProps = _objectWithoutProperties(props, _excluded);
-
+    style = props.style,
+    strippedProps = _objectWithoutProperties(props, _excluded);
   return jsx("input", _extends({}, strippedProps, {
     style: _defineProperty({}, VAR_TRACK_FOREGROUND_WIDTH, "".concat(valuePercent, "%")),
     ref: ref,

package/dist/esm/theme.js

@@ -16,13 +16,12 @@ export var thumb = {
     focused: "var(--ds-border-focused, ".concat(B200, ")")
   },
   boxShadow: {
-    default: "var(--ds-UNSAFE_util-transparent, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
+    default: "var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
     disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(N60A), ")")
   }
 };
 export var track = {
   height: 4,
-
   /**
    * borderRadius >= height / 2 to create a pill shape.
    * Using '50%' creates an ellipse.

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/range",
-	"version": "7.0.3",
+	"version": "7.0.4",
 	"sideEffects": false
 }

package/dist/types/theme.d.ts

@@ -15,7 +15,7 @@ export declare const thumb: {
         readonly focused: "var(--ds-border-focused)";
     };
     readonly boxShadow: {
-        readonly default: "var(--ds-UNSAFE_util-transparent)";
+        readonly default: "var(--ds-UNSAFE-transparent)";
         readonly disabled: "var(--ds-shadow-raised)";
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/range",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "description": "A range lets users choose an approximate value on a slider.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
   "dependencies": {
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/range"