@atlaskit/range/dist/cjs/styled.js

A range lets users choose an approximate value on a slider.

/* styled.tsx generated by @compiled/babel-plugin v3.0.2 */
"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;
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 _excluded = ["valuePercent", "style"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var rangeHeight = 40; // Height of the range input, used for the track and thumb
var trackHeight = 6; // Height of the track, used for the track and thumb
var thumbSize = "var(--ds-space-200, 16px)"; // Size of the thumb, used for the thumb styles

// 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;
var trackStyles = {
  root: "_1bsb1osq _4t3i1ylp _kqswh2mm _14mj1rr0 _1ywu1ule _z0ai1y44 _1qdg1y44 _18postnw _1hfkof27 _aetrb3bt _19nq1ssb _g0nfo1yi",
  disabled: "_1peq2wxo"
};
var rangeA11yStyles = null;
var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var valuePercent = props.valuePercent,
    style = props.style,
    strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  var input = /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, 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
      '--track-fg-width': "".concat(valuePercent, "%")
    },
    ref: ref,
    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1rr0 _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf1w0t _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6td1rr0 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1rr0 _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el1w0t _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvo1rr0 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h1b1q9 _15dpi8nm _18lx1aqn _jxar1ibz _ydqgplhp _1jhc1ibz _1rucof27 _164c1v1w", "_1drqof27 _15dp1vck _18lxof27 _g6td1rr0 _168li2wt _37yw1rr0 _1kd2i2wt _1sdc1lpd _ydqgmpja"])
  }));
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _runtime.ax)([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
  }, input);
});
Input.displayName = 'InputRange';