@confi/conflux-react-ui-test-package/esm/popover/popover-item.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React from 'react';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
var defaultProps = {
  line: false,
  title: false
};

var PopoverItem = function PopoverItem(_ref) {
  var children = _ref.children,
      line = _ref.line,
      title = _ref.title,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["children", "line", "title", "className"]);

  var theme = useTheme();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["53324749", [theme.layout.gap, theme.palette.accents_5, theme.palette.foreground, theme.palette.border, theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || "item ".concat(line ? 'line' : '', " ").concat(title ? 'title' : '', " ").concat(className))
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "53324749",
    dynamic: [theme.layout.gap, theme.palette.accents_5, theme.palette.foreground, theme.palette.border, theme.palette.foreground]
  }, ".item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.5rem ".concat(theme.layout.gap, ";color:").concat(theme.palette.accents_5, ";font-size:0.875rem;line-height:1.25rem;text-align:left;-webkit-transition:color 0.1s ease 0s,background-color 0.1s ease 0s;transition:color 0.1s ease 0s,background-color 0.1s ease 0s;width:-webkit-max-content;width:-moz-max-content;width:max-content;}.item.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.item.__jsx-style-dynamic-selector>*{margin:0;}.item.line.__jsx-style-dynamic-selector{line-height:0;height:0;padding:0;border-top:1px solid ").concat(theme.palette.border, ";margin:0.5rem 0;width:100%;}.item.title.__jsx-style-dynamic-selector{padding:1.15rem;font-weight:500;font-size:0.83rem;color:").concat(theme.palette.foreground, ";}.item.title.__jsx-style-dynamic-selector:first-of-type{padding-top:0.6rem;padding-bottom:0.6rem;}"))), title && /*#__PURE__*/React.createElement(PopoverItem, {
    line: true,
    title: false
  }));
};

var MemoPopoverItem = React.memo(PopoverItem);
export default withDefaults(MemoPopoverItem, defaultProps);