@material-ui/lab/legacy/SliderStyled/ValueLabelStyled.js

Material-UI Lab - Incubator for Material-UI React components.

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { useThemeProps, experimentalStyled } from '@material-ui/core/styles';
import { ValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled';

var overridesResolver = function overridesResolver(_, styles) {
  var _extends2;

  var componentName = 'MuiSlider-valueLabel';

  var styleOverrides = _extends({}, styles.root, (_extends2 = {}, _defineProperty(_extends2, "&.".concat(componentName, "Open"), styles.open), _defineProperty(_extends2, "&.".concat(componentName, "Offset"), styles.offset), _defineProperty(_extends2, "& .".concat(componentName, "Circle"), styles.circle), _defineProperty(_extends2, "& .".concat(componentName, "Label"), styles.label), _extends2));

  return styleOverrides;
};

var ValueLabelRoot = experimentalStyled('span', {}, {
  muiName: 'PrivateValueLabel',
  overridesResolver: overridesResolver
})(function (props) {
  return {
    '&.MuiSlider-valueLabelOffset': _extends({
      '&.MuiSlider-valueLabelOpen': {
        transform: 'scale(1) translateY(-10px)'
      },
      zIndex: 1
    }, props.theme.typography.body2, {
      fontSize: props.theme.typography.pxToRem(12),
      lineHeight: 1.2,
      transition: props.theme.transitions.create(['transform'], {
        duration: props.theme.transitions.duration.shortest
      }),
      top: -34,
      transformOrigin: 'bottom center',
      transform: 'scale(0)',
      position: 'absolute'
    }),
    '& .MuiSlider-valueLabelCircle': {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: 32,
      height: 32,
      borderRadius: '50% 50% 50% 0',
      backgroundColor: 'currentColor',
      transform: 'rotate(-45deg)'
    },
    '& .MuiSlider-valueLabelLabel': {
      color: props.theme.palette.primary.contrastText,
      transform: 'rotate(45deg)',
      textAlign: 'center'
    }
  };
});
/**
 * @ignore - internal component.
 */

var ValueLabel = /*#__PURE__*/React.forwardRef(function ValueLabel(inputProps, ref) {
  var props = useThemeProps({
    props: inputProps,
    name: 'PrivateValueLabel'
  });
  /* eslint-disable react/prop-types */

  var _props$components = props.components,
      components = _props$components === void 0 ? {} : _props$components,
      other = _objectWithoutProperties(props, ["components"]);

  return /*#__PURE__*/React.createElement(ValueLabelUnstyled, _extends({}, other, {
    components: {
      Root: ValueLabelRoot || components.Root
    },
    ref: ref
  }));
});
export default ValueLabel;