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

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

/* styled.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["valuePercent", "style"];
import "./styled.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef } from 'react';
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 = /*#__PURE__*/forwardRef(function (props, ref) {
  var valuePercent = props.valuePercent,
    style = props.style,
    strippedProps = _objectWithoutProperties(props, _excluded);
  var input = /*#__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
      '--track-fg-width': "".concat(valuePercent, "%")
    },
    ref: ref,
    className: 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: ax([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
  }, input);
});
export {
/**
 * __Input__
 * Internal-only styled input component.
 */
Input };
Input.displayName = 'InputRange';