@geezee/react-ui/esm/input/input-icon-clear.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';

var InputIconClear = function InputIconClear(_ref) {
  var onClick = _ref.onClick,
      heightRatio = _ref.heightRatio,
      disabled = _ref.disabled,
      visible = _ref.visible;
  var theme = useTheme();
  var width = useMemo(function () {
    return "calc(".concat(theme.layout.gap, " * ").concat(heightRatio, " * .46)");
  }, [heightRatio]);

  var clickHandler = function clickHandler(event) {
    event.preventDefault();
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    onClick && onClick(event);
  };

  return /*#__PURE__*/React.createElement("div", {
    onClick: clickHandler,
    className: _JSXStyle.dynamic([["2796573977", [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', theme.palette.cNeutral2, disabled ? theme.palette.cNeutral2 : theme.palette.cNeutral7, width, width]]]) + " " + "clear-icon ".concat(visible ? 'visible' : '')
  }, /*#__PURE__*/React.createElement("svg", {
    width: "14",
    height: "14",
    viewBox: "0 0 14 14",
    xmlns: "http://www.w3.org/2000/svg",
    className: _JSXStyle.dynamic([["2796573977", [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', theme.palette.cNeutral2, disabled ? theme.palette.cNeutral2 : theme.palette.cNeutral7, width, width]]])
  }, /*#__PURE__*/React.createElement("path", {
    d: "M7 1.75C4.1125 1.75 1.75 4.1125 1.75 7C1.75 9.8875 4.1125 12.25 7 12.25C9.8875 12.25 12.25 9.8875 12.25 7C12.25 4.1125 9.8875 1.75 7 1.75ZM9.29688 8.37812L8.37812 9.29688L7 7.91875L5.62188 9.29688L4.70312 8.37812L6.08125 7L4.70312 5.62188L5.62188 4.70312L7 6.08125L8.37812 4.70312L9.29688 5.62188L7.91875 7L9.29688 8.37812Z",
    fill: "currentColor",
    className: _JSXStyle.dynamic([["2796573977", [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', theme.palette.cNeutral2, disabled ? theme.palette.cNeutral2 : theme.palette.cNeutral7, width, width]]])
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2796573977",
    dynamic: [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', theme.palette.cNeutral2, disabled ? theme.palette.cNeutral2 : theme.palette.cNeutral7, width, width]
  }, ".clear-icon.__jsx-style-dynamic-selector{padding:0 ".concat(theme.layout.gapHalf, ";margin:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;cursor:").concat(disabled ? 'not-allowed' : 'pointer', ";box-sizing:border-box;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;color:").concat(theme.palette.cNeutral2, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme.palette.cNeutral2 : theme.palette.cNeutral7, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:").concat(width, ";height:").concat(width, ";}")));
};

var MemoInputIconClear = React.memo(InputIconClear);
export default MemoInputIconClear;