import React from 'react';
import { Checkbox } from "../../../components/Checkbox";
import { Gapped } from "../../../components/Gapped";
import { Button } from "../../../components/Button";
import { Input } from "../../../components/Input";
import { Toggle } from "../../../components/Toggle";
import { Radio } from "../../../components/Radio";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
export var ShowcaseGroup = function ShowcaseGroup(props) {
  var theme = React.useContext(ThemeContext);
  return /*#__PURE__*/(
    React.createElement("div", null, props.title && /*#__PURE__*/
    React.createElement("div", {
      style: {
        fontSize: '21px',
        lineHeight: '1.2',
        margin: '16px 0',
        color: theme.textColorDefault
      }
    }, props.title), /*#__PURE__*/

    React.createElement(Gapped, {
      gap: 10
    }, /*#__PURE__*/
    React.createElement(Button, null, "Button"), /*#__PURE__*/
    React.createElement(Input, null), /*#__PURE__*/
    React.createElement(Toggle, null), /*#__PURE__*/
    React.createElement(Radio, {
      value: '',
      checked: true
    }, "Radio"), /*#__PURE__*/
    React.createElement(Checkbox, {
      checked: true
    }, "Checkbox")))
  );
};