@atlaskit/range 5.0.11

package/dist/esm/styled.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+
+/* eslint-disable no-mixed-operators */
+import { forwardRef, useMemo } from 'react';
+import { css, jsx } from '@emotion/core';
+import { fontFamily } from '@atlaskit/theme/constants';
+import { e200 } from '@atlaskit/theme/elevation';
+var sliderThumbSize = 16;
+var sliderThumbBorderThickness = 2;
+var sliderLineThickness = 4;
+var transitionDuration = '0.2s';
+var sliderBorderRadius = sliderLineThickness / 2;
+export var overallHeight = 40;
+
+var getBackgroundGradient = function getBackgroundGradient(_ref) {
+  var lower = _ref.lower,
+      upper = _ref.upper;
+  return "\n    background: linear-gradient(".concat(lower, ", ").concat(lower, ") 0 / var(--range-inline-width) 100%\n      no-repeat ").concat(upper, ";\n    [dir='rtl'] & {\n      background-position: right;\n    }\n  ");
+}; // Thumb style
+
+
+var sliderThumbStyle = function sliderThumbStyle(_ref2) {
+  var thumb = _ref2.thumb;
+  return "\n    background: ".concat(thumb.default.background, ";\n    border: ").concat(sliderThumbBorderThickness, "px solid transparent;\n    border-radius: 50%;\n    height: ").concat(sliderThumbSize, "px;\n    width: ").concat(sliderThumbSize, "px;\n    box-sizing: border-box;\n    transition: border-color ").concat(transitionDuration, " ease-in-out;\n    ").concat(e200(), ";\n  ");
+}; // Track styles
+
+
+var sliderTrackStyle = "\n  border-radius: ".concat(sliderBorderRadius, "px;\n  border: 0;\n  cursor: pointer;\n  height: ").concat(sliderLineThickness, "px;\n  width: 100%;\n  transition: background-color ").concat(transitionDuration, " ease-in-out;\n"); // Range input styles
+
+var chromeRangeInputStyle = function chromeRangeInputStyle(tokens) {
+  return "\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -".concat((sliderThumbSize - sliderLineThickness) / 2, "px;\n    ").concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    ").concat(sliderTrackStyle, ";\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.hover), ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.disabled), "\n    cursor: not-allowed;\n  }\n  ");
+};
+
+var firefoxRangeInputStyle = function firefoxRangeInputStyle(tokens) {
+  return "\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-moz-range-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-moz-range-progress {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.lower, ";\n  }\n\n  &::-moz-range-track {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.upper, ";\n  }\n\n  &:active::-moz-range-progress,\n  &:hover::-moz-range-progress {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-moz-range-progress {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-moz-range-track {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
+};
+
+var IERangeInputStyle = function IERangeInputStyle(tokens) {
+  return "\n  &::-ms-thumb {\n    margin-top: 0;\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-ms-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-ms-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ").concat(sliderLineThickness, "px;\n    transition: background-color ").concat(transitionDuration, " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ").concat(tokens.track.default.lower, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ").concat(tokens.track.default.upper, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
+}; // 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
+
+
+export var rangeInputStyle = function rangeInputStyle(tokens) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */\n    background: transparent; /* Otherwise white in Chrome */\n    height: ", "px; /* Otherwise thumb will collide with previous box element */\n    padding: 0; /* IE11 includes padding, this normalises it */\n    width: 100%; /* Specific width is required for Firefox. */\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n\n    ", "\n    ", "\n    ", ";\n\n    font-family: ", ";\n\n    background-position: right;\n  "])), overallHeight, chromeRangeInputStyle(tokens), firefoxRangeInputStyle(tokens), IERangeInputStyle(tokens), fontFamily());
+};
+export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
+  var valuePercent = props.valuePercent,
+      thumb = props.thumb,
+      track = props.track,
+      style = props.style,
+      strippedProps = _objectWithoutProperties(props, ["valuePercent", "thumb", "track", "style"]); // Note: emotion will cache unique outputs as their own this
+  // We are memoizing the creation of this string
+
+
+  var styles = useMemo(function () {
+    return rangeInputStyle({
+      track: track,
+      thumb: thumb
+    });
+  }, [thumb, track]); // 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
+
+  return jsx("input", _extends({}, strippedProps, {
+    style: {
+      '--range-inline-width': "".concat(valuePercent, "%")
+    },
+    ref: ref,
+    css: styles
+  }));
+});
+Input.displayName = 'InputRange';

package/dist/esm/theme.js

@@ -0,0 +1,38 @@
+import * as colors from '@atlaskit/theme/colors';
+import { createTheme } from '@atlaskit/theme/components';
+export var thumb = {
+  default: {
+    background: colors.N0,
+    // This border color is not being used - awaiting focus state lift to props
+    border: colors.N800
+  },
+  disabled: {
+    boxShadow: colors.N60A
+  },
+  focus: {
+    // This border color is not being used - awaiting focus state lift to props
+    background: colors.N0,
+    border: colors.B200
+  }
+};
+export var track = {
+  background: colors.N30A,
+  default: {
+    lower: colors.B400,
+    upper: colors.N30
+  },
+  disabled: {
+    lower: colors.N50,
+    upper: colors.N30
+  },
+  hover: {
+    lower: colors.B300,
+    upper: colors.N40
+  }
+};
+export var Theme = createTheme(function () {
+  return {
+    thumb: thumb,
+    track: track
+  };
+});

package/dist/esm/version.json

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

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './range';
+export type { RangeProps } from './range';

package/dist/types/range.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ThemeProp } from '@atlaskit/theme/components';
+export declare type OwnProps = {
+    /** Sets the default value if range is not set. */
+    defaultValue?: number;
+    /** Sets whether the field range is disabled. */
+    isDisabled?: boolean;
+    /** Sets the maximum value of the range. */
+    max?: number;
+    /** Sets the minimum value of the range.*/
+    min?: number;
+    /** Hook to be invoked on change of the range. */
+    onChange?: (value: number) => void;
+    /** Sets the step value for the range.  */
+    step?: number;
+    /** A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests. */
+    testId?: string;
+    /** The theme object to be passed down. See
+    [@atlaskit/theme](https://atlaskit.atlassian.com/packages/design-system/theme) for more details on theming.
+    */
+    theme?: ThemeProp<any, any>;
+    /** Sets the value of the range. */
+    value?: number;
+};
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export declare type RangeProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'required' | 'checked'>, OwnProps>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<React.InputHTMLAttributes<HTMLInputElement>, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "crossOrigin" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "crossOrigin" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "size" | "src" | "type" | "width" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & OwnProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/dist/types/styled.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+/// <reference types="react" />
+import { ThemeTokens } from './theme';
+export declare const overallHeight = 40;
+interface CustomInputProps extends ThemeTokens {
+    ref: React.Ref<HTMLInputElement>;
+    valuePercent: string;
+}
+declare type InputProps = React.InputHTMLAttributes<HTMLInputElement> & CustomInputProps;
+export declare const rangeInputStyle: (tokens: ThemeTokens) => import("@emotion/core").SerializedStyles;
+export declare const Input: import("react").ForwardRefExoticComponent<Pick<InputProps, "thumb" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "valuePercent" | "track"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/types/theme.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+export interface ThemeTokensThumb {
+    background: string;
+    border: string;
+}
+export interface ThemeTokensTrack {
+    lower: string;
+    upper: string;
+}
+export interface ThemeTokens {
+    thumb: {
+        default: ThemeTokensThumb;
+        disabled: {
+            boxShadow: string;
+        };
+        focus: ThemeTokensThumb;
+    };
+    track: {
+        background: string;
+        default: ThemeTokensTrack;
+        disabled: ThemeTokensTrack;
+        hover: ThemeTokensTrack;
+    };
+}
+export declare const thumb: {
+    default: {
+        background: string;
+        border: string;
+    };
+    disabled: {
+        boxShadow: string;
+    };
+    focus: {
+        background: string;
+        border: string;
+    };
+};
+export declare const track: {
+    background: string;
+    default: {
+        lower: string;
+        upper: string;
+    };
+    disabled: {
+        lower: string;
+        upper: string;
+    };
+    hover: {
+        lower: string;
+        upper: string;
+    };
+};
+export declare const Theme: {
+    Consumer: import("react").ComponentType<any>;
+    Provider: import("react").ComponentType<{
+        children?: import("react").ReactNode;
+        value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, any> | undefined;
+    }>;
+    useTheme: (props: any) => ThemeTokens;
+};

package/docs/0-intro.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { md } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+${(
+  <SectionMessage appearance="information">
+    This component is now documented on{' '}
+    <a href="https://atlassian.design/components">atlassian.design</a>
+  </SectionMessage>
+)}
+`;

package/extract-react-types/range-props.tsx

@@ -0,0 +1,5 @@
+import type { OwnProps as Props } from '../src/range';
+
+export default function RangeProps(props: Props) {
+  return null;
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@atlaskit/range",
+  "version": "5.0.11",
+  "description": "A range lets users choose an approximate value on a slider.",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "homepage": "https://atlassian.design/components/range/",
+  "atlassian": {
+    "team": "Design System Team",
+    "deprecatedAutoEntryPoints": true,
+    "inPublicMirror": true,
+    "releaseModel": "scheduled",
+    "website": {
+      "name": "Range"
+    }
+  },
+  "dependencies": {
+    "@atlaskit/theme": "^12.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@atlaskit/build-utils": "*",
+    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/checkbox": "^12.0.0",
+    "@atlaskit/docs": "*",
+    "@atlaskit/form": "^8.4.0",
+    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/visual-regression": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/styled": "^10.0.7",
+    "@testing-library/react": "^8.0.1",
+    "@types/jscodeshift": "^0.11.0",
+    "jscodeshift": "^0.13.0",
+    "lodash": "^4.17.15",
+    "react-dom": "^16.8.0",
+    "storybook-addon-performance": "^0.16.0",
+    "typescript": "3.9.6"
+  },
+  "keywords": [
+    "atlaskit",
+    "react",
+    "ui"
+  ],
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "ui-components": [
+        "lite-mode"
+      ],
+      "analytics": [
+        "analytics-next"
+      ],
+      "theming": [
+        "new-theming-api"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+}

package/range/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/range/range",
+  "main": "../dist/cjs/range.js",
+  "module": "../dist/esm/range.js",
+  "module:es2019": "../dist/es2019/range.js",
+  "types": "../dist/types/range.d.ts"
+}

package/styled/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/range/styled",
+  "main": "../dist/cjs/styled.js",
+  "module": "../dist/esm/styled.js",
+  "module:es2019": "../dist/es2019/styled.js",
+  "types": "../dist/types/styled.d.ts"
+}

package/theme/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/range/theme",
+  "main": "../dist/cjs/theme.js",
+  "module": "../dist/esm/theme.js",
+  "module:es2019": "../dist/es2019/theme.js",
+  "types": "../dist/types/theme.d.ts"
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "__perf__",
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+    "./docs/**/*.ts",
+    "./docs/**/*.tsx",
+    "./codemods/**/*.ts",
+    "./codemods/**/*.tsx",
+    "./examples/**/*.ts",
+    "./examples/**/*.tsx",
+    "./example-helpers/**/*.ts",
+    "./example-helpers/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "baseUrl": "./"
+  }
+}