import _JSXStyle from "../styled-jsx.es.js";
import React from "react";
import Description from "../description";
import useScale, { withScale } from "../use-scale";
var ListComponent = function ListComponent(_ref) {
  var heading = _ref.heading,
    _ref$showHeading = _ref.showHeading,
    showHeading = _ref$showHeading === void 0 ? true : _ref$showHeading,
    secondary = _ref.secondary,
    children = _ref.children;
  var _useScale = useScale(),
    SCALES = _useScale.SCALES;
  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["2885341068", [SCALES.pt(0.9), SCALES.pr(0), SCALES.pb(0.9), SCALES.pl(0)]]])
  }, showHeading && /*#__PURE__*/React.createElement(Description, {
    mb: 1,
    mt: 1,
    title: heading,
    content: secondary
  }), /*#__PURE__*/React.createElement("ul", {
    className: _JSXStyle.dynamic([["2885341068", [SCALES.pt(0.9), SCALES.pr(0), SCALES.pb(0.9), SCALES.pl(0)]]]) + " " + "helpdice-ui-list"
  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2885341068",
    dynamic: [SCALES.pt(0.9), SCALES.pr(0), SCALES.pb(0.9), SCALES.pl(0)]
  }, ".helpdice-ui-list.__jsx-style-dynamic-selector{all:unset;padding:".concat(SCALES.pt(0.9), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.9), " ").concat(SCALES.pl(0), ";}")));
};
ListComponent.displayName = 'List';
var List = withScale(ListComponent);
export default List;