import React from 'react';
import { Box, Button, DropDown, DropDownMenu, DropDownTrigger, FormGroup, FormMessage, Icon, Input, InputGroup, Label } from '../../index.js';
import StoryWrapper from '../../utils/story-wrapper.js';
export default {
  title: 'DesignSystem/Molecules/FormGroup',
  component: FormGroup
};
export const FullFeaturedFormGroup = () => /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
  required: true
}, "Name"), /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(DropDown, null, /*#__PURE__*/React.createElement(DropDownTrigger, null, /*#__PURE__*/React.createElement(Button, {
  variant: "text",
  size: "icon"
}, "==")), /*#__PURE__*/React.createElement(DropDownMenu, {
  top: "xxl"
}, /*#__PURE__*/React.createElement(Button, {
  variant: "text",
  size: "icon"
}, '>='), /*#__PURE__*/React.createElement(Button, {
  variant: "text",
  size: "icon"
}, '<='), /*#__PURE__*/React.createElement(Button, {
  variant: "text",
  size: "icon"
}, '><'))), /*#__PURE__*/React.createElement(Input, null), /*#__PURE__*/React.createElement(Label, null, "100 KM"), /*#__PURE__*/React.createElement(Button, {
  size: "icon"
}, /*#__PURE__*/React.createElement(Icon, {
  icon: "ArrowRight"
}))), /*#__PURE__*/React.createElement(FormMessage, null, "With an message below"));
export const Full = () => /*#__PURE__*/React.createElement(Box, {
  width: 1
}, /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "Full featured FormGroup"
}, /*#__PURE__*/React.createElement(FullFeaturedFormGroup, null)));