sag_components 2.0.0-beta26 → 2.0.0-beta28

package/dist/stories/components/Button.js

@@ -0,0 +1,255 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Button = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Button = require("./Button.style");
+var _FilterIcon = require("./icons/FilterIcon");
+var _OptionsIcon = require("./icons/OptionsIcon");
+var _DownloadIcon = require("./icons/DownloadIcon");
+var _DocumentIcon = require("./icons/DocumentIcon");
+var _FlyIcon = require("./icons/FlyIcon");
+var _BellIcon = require("./icons/BellIcon");
+var _MaintenanceIcon = require("./icons/MaintenanceIcon");
+var _ExitIcon = require("./icons/ExitIcon");
+var _EyeIcon = require("./icons/EyeIcon");
+var _ButtonArrowRight = require("./icons/ButtonArrowRight");
+var _ReselectIcon = require("./icons/ReselectIcon");
+const Button = _ref => {
+  let {
+    text = '',
+    type = 'primary',
+    size = 'small',
+    height = '',
+    width = '',
+    disabled = false,
+    textColor = '',
+    backgroundColor = '',
+    borderColor = '',
+    hoverTextColor = '',
+    hoverBackgroundColor = '',
+    hoverBorderColor = '',
+    disabledTextColor = '',
+    disabledBackgroundColor = '',
+    disabledBorderColor = '',
+    onClick,
+    leftIcon = 'none',
+    rightIcon = 'none',
+    isSubmitButton = false
+  } = _ref;
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const [hover, setHover] = (0, _react.useState)(false);
+  const handleSubmitButtonOnClick = () => {
+    setClicked(true);
+    onClick(`SubmitButtonOnClick: ${text}`);
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
+  };
+  const handleButtonClick = event => {
+    setClicked(true);
+    onClick(event);
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
+  };
+  const getIcon = icon => {
+    const iconHeight = '16px';
+    const iconWidth = '16px';
+    const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#ffffff');
+    const newHoverTextColor = hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff');
+    const newDisabledTextColor = disabledTextColor || '#B1B1B1';
+    const newEnabledTextColor = hover ? newHoverTextColor : newTextColor;
+    const color = disabled ? newDisabledTextColor : newEnabledTextColor;
+    switch (icon.toLowerCase()) {
+      case 'arrow':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "ArrowRightIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ButtonArrowRight.ButtonArrowRight, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'filter':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "FilterIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+          height: "150px",
+          width: iconWidth,
+          color: color
+        }));
+      case 'options':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "OptionsIcon"
+        }, /*#__PURE__*/_react.default.createElement(_OptionsIcon.OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'download':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "DownloadIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'document':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "DocumentIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'fly':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "FlyIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'bell':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "BellIcon"
+        }, /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'maintenance':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "MaintenanceIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'exit':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "ExitIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'eye':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "EyeIcon"
+        }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'reselect':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "ReselectIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ReselectIcon.ReselectIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      default:
+        return '';
+    }
+  };
+  const getLeftIcon = () => {
+    if (!leftIcon || leftIcon === 'none') return '';
+    return getIcon(leftIcon);
+  };
+  const getRightIcon = () => {
+    if (!rightIcon || rightIcon === 'none') return '';
+    return getIcon(rightIcon);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Button.ButtonContainer, {
+    className: "ButtonContainer",
+    width: width || null,
+    height: height || (size === 'small' ? '33px' : '45px')
+  }, isSubmitButton ? /*#__PURE__*/_react.default.createElement(_Button.InputCommit, {
+    className: clicked ? 'InputCommit-clicked' : 'InputCommit',
+    value: text,
+    type: "submit",
+    width: width || null,
+    height: height || (size === 'small' ? '33px' : '45px'),
+    disabled: disabled,
+    text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
+    background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
+    border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
+    hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
+    hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
+    hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
+    disabled_text_color: disabledTextColor || '#B1B1B1',
+    disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
+    disabled_border_color: disabledBorderColor || '#E3E4E5',
+    padding: size === 'small' ? '0 16px' : '0 20px',
+    onClick: !disabled ? handleSubmitButtonOnClick : null
+  }) : /*#__PURE__*/_react.default.createElement(_Button.ButtonItem, {
+    className: clicked ? 'ButtonItem-clicked' : 'ButtonItem',
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    onClick: event => !disabled ? handleButtonClick(event) : null,
+    width: width || null,
+    height: height || (size === 'small' ? '33px' : '45px'),
+    disabled: disabled,
+    text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
+    background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
+    border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
+    hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
+    hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
+    hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
+    disabled_text_color: disabledTextColor || '#B1B1B1',
+    disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
+    disabled_border_color: disabledBorderColor || '#E3E4E5',
+    padding: size === 'small' ? '0 16px' : '0 20px'
+  }, getLeftIcon(), /*#__PURE__*/_react.default.createElement(_Button.Label, {
+    className: "Label",
+    disabled: disabled
+  }, text), getRightIcon()));
+};
+exports.Button = Button;
+var _default = exports.default = Button; // Button.propTypes = {
+//   text: PropTypes.string,
+//   type: PropTypes.string,
+//   size: PropTypes.string,
+//   height: PropTypes.string,
+//   width: PropTypes.string,
+//   disabled: PropTypes.bool,
+//   textColor: PropTypes.string,
+//   backgroundColor: PropTypes.string,
+//   borderColor: PropTypes.string,
+//   hoverTextColor: PropTypes.string,
+//   hoverBackgroundColor: PropTypes.string,
+//   hoverBorderColor: PropTypes.string,
+//   disabledTextColor: PropTypes.string,
+//   disabledBackgroundColor: PropTypes.string,
+//   disabledBorderColor: PropTypes.string,
+//   onClick: PropTypes.func,
+//   leftIcon: PropTypes.string,
+//   rightIcon: PropTypes.string,
+//   isSubmitButton: PropTypes.bool,
+// };
+// Button.defaultProps = {
+//   text: '',
+//   type: 'primary',
+//   size: 'small',
+//   height: '',
+//   width: '',
+//   disabled: false,
+//   textColor: '',
+//   backgroundColor: '',
+//   borderColor: '',
+//   hoverTextColor: '',
+//   hoverBackgroundColor: '',
+//   hoverBorderColor: '',
+//   disabledTextColor: '',
+//   disabledBackgroundColor: '',
+//   disabledBorderColor: '',
+//   onClick: () => { },
+//   leftIcon: 'none',
+//   rightIcon: 'none',
+//   isSubmitButton: false,
+// };

package/dist/stories/components/Button.style.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = exports.InputCommit = exports.IconWrapper = exports.ButtonItem = exports.ButtonContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div`
+  //position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  width: ${props => props.width};
+  height: ${props => props.height};
+`;
+const ButtonItem = exports.ButtonItem = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
+  border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
+  border-radius: 12px;
+  background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
+  box-sizing: border-box;
+  gap: 8px;
+  padding: ${props => props.padding};
+  &:hover {
+    background-color: ${props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color};
+    border-color: ${props => props.disabled ? props.disabled_border_color : props.hover_border_color};
+    color: ${props => props.disabled ? props.disabled_text_color : props.hover_text_color};
+    box-shadow: ${props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)'};
+    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
+  }
+  &.ButtonItem-clicked {
+    background-color: ${props => props.background_color};
+    cursor: pointer;
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s, color 0.3s;
+  }
+`;
+const Label = exports.Label = _styledComponents.default.label`
+  font-family: "Poppins";
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 0;
+  pointer-events: none;
+  user-select: none;
+`;
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+`;
+const InputCommit = exports.InputCommit = _styledComponents.default.input`
+  font-family: "Poppins", sans-serif;
+  border: ${props => `0px solid ${props.disabled ? props.disabled_border_color : props.hover_border_color}`};
+  border-radius: 8px;
+  font-weight: 400;
+  font-size: 14px;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
+  border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
+  border-radius: 12px;
+  background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
+  cursor: pointer;
+  padding: ${props => props.padding};
+
+  &:hover {
+    background-color: ${props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color};
+    border-color: ${props => props.disabled ? props.disabled_border_color : props.hover_border_color};
+    color: ${props => props.disabled ? props.disabled_text_color : props.hover_text_color};
+    box-shadow: ${props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)'};
+    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
+  }
+  &.InputCommit-clicked {
+    background-color: ${props => props.background_color};
+    cursor: pointer;
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s, color 0.3s;
+  }
+`;

package/dist/stories/components/CampaignTool/CampaignDemoReport.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CampaignDemoReport = require("./CampaignDemoReport.style");
+var _ShoutIcon = _interopRequireDefault(require("../icons/ShoutIcon"));
+const CampaignDemoReport = props => {
+  const {
+    topHeadline,
+    topLabels,
+    bottomHeadline,
+    bottomLabels
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.ComponentContainer, null, /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Headline, null, topHeadline), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.LabelsContainer, null, topLabels.map(label => /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Label, {
+    key: label.value,
+    className: "icon-label"
+  }, /*#__PURE__*/_react.default.createElement(_ShoutIcon.default, {
+    fill: "#1B30AA"
+  }), /*#__PURE__*/_react.default.createElement("span", null, label.value)))), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Line, null), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Headline, null, bottomHeadline), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.LabelsContainer, null, bottomLabels.map(label => /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Label, {
+    key: label.value
+  }, /*#__PURE__*/_react.default.createElement("span", null, label.value)))));
+};
+CampaignDemoReport.defaultProps = {
+  topHeadline: 'Live Campaigns This Week:',
+  topLabels: [{
+    icon: 'Label 1',
+    value: 'Monthly 2'
+  }, {
+    icon: 'Label 2',
+    value: 'Healthy Summer'
+  }, {
+    icon: 'Label 3',
+    value: 'Game Night'
+  }],
+  bottomHeadline: 'Upcoming Campaigns:',
+  bottomLabels: [{
+    icon: 'none',
+    value: 'Monthly 2'
+  }, {
+    icon: 'none',
+    value: 'Healthy Summer'
+  }]
+};
+var _default = exports.default = CampaignDemoReport;

package/dist/stories/components/CampaignTool/CampaignDemoReport.style.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Line = exports.LabelsContainer = exports.Label = exports.Headline = exports.ComponentContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const ComponentContainer = exports.ComponentContainer = _styledComponents.default.div`
+    padding: 20px;
+    font-family: "Poppins", sans-serif;
+    background-color: white;
+`;
+const Headline = exports.Headline = _styledComponents.default.h3`
+    color: #212121;
+    font-size: 20px;
+    font-weight: 500;
+    margin: 0 0 16px;
+`;
+const LabelsContainer = exports.LabelsContainer = _styledComponents.default.div`
+    display: flex;
+    gap: 16px;
+`;
+const Label = exports.Label = _styledComponents.default.div`
+  font-size: 12px;
+  padding: 8px;
+  color: #212121;
+  background-color: #F2F2F2;
+   > span {
+      font-weight: 400;
+    }
+
+    &.icon-label {
+        display: flex;
+        gap: 8px;
+        color: #1B30AA;
+        border-radius: 4px;
+        background-color: #F0F5FF;
+        > span {
+            font-weight: 500;
+        }
+    }
+`;
+const Line = exports.Line = _styledComponents.default.hr`
+    background-color: #D0D0D0;
+    width: 100%;
+    margin: 28px 0;
+`;

package/dist/stories/components/CampaignTool/Card.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Card = require("./Card.style");
+const Card = props => {
+  const {
+    data,
+    cardTitle,
+    buttonText,
+    onCardButtonClick,
+    width,
+    height
+  } = props;
+  const onCardButtonClickHandle = e => {
+    onCardButtonClick(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Card.CardFrame, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Card.CardDetails, null, /*#__PURE__*/_react.default.createElement(_Card.CardTitle, null, cardTitle), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum minima "), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "commodi optio molesti"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "optio molesti")), /*#__PURE__*/_react.default.createElement(_Card.SegmentsContainer, {
+    rows: data.lenght
+  }, data.map(segment =>
+  /*#__PURE__*/
+  // TODO: make icons
+  _react.default.createElement(_Card.Segment, null, segment.value, /*#__PURE__*/_react.default.createElement("br", null), segment.label))), /*#__PURE__*/_react.default.createElement(_Card.ButtonWrap, null, /*#__PURE__*/_react.default.createElement(_Card.Button, {
+    onClick: e => onCardButtonClickHandle(e)
+  }, buttonText)));
+};
+var _default = exports.default = Card;
+Card.defaultProps = {
+  data: [{
+    key: '1',
+    icon: 'cart',
+    label: 'Products',
+    value: 335
+  }, {
+    key: '2',
+    icon: 'gift',
+    label: 'Brands',
+    value: 161
+  }, {
+    key: '3',
+    icon: 'label',
+    label: 'Offers',
+    value: 223
+  }, {
+    key: '4',
+    icon: 'truck',
+    label: 'Suppliers',
+    value: 246
+  }, {
+    key: '5',
+    icon: '',
+    label: 'Total budget',
+    value: 45
+  }, {
+    key: '6',
+    icon: '',
+    label: 'Self-funded budget',
+    value: 146
+  }],
+  cardTitle: 'March 2024',
+  buttonText: 'Campaign Details',
+  onCardButtonClick: () => {},
+  width: '100%',
+  height: 'auto'
+};

package/dist/stories/components/CampaignTool/Card.style.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentsContainer = exports.Segment = exports.CardTitle = exports.CardFrame = exports.CardDetails = exports.CardDetailText = exports.ButtonWrap = exports.Button = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const CardFrame = exports.CardFrame = _styledComponents.default.div`
+    font-family: "Poppins", sans-serif;
+    background-color: white;
+    border: 1px solid gray;
+    border-left: 5px solid #6e9eed;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    width: ${props => props.width};
+    height: ${props => props.height};
+`;
+const CardDetails = exports.CardDetails = _styledComponents.default.div`
+    padding: 16px 20px;
+`;
+const CardTitle = exports.CardTitle = _styledComponents.default.h3`
+    font-size: 22px;
+    margin: 0;
+`;
+const CardDetailText = exports.CardDetailText = _styledComponents.default.span`
+    display: block;
+    font-size: 12px;
+`;
+const SegmentsContainer = exports.SegmentsContainer = _styledComponents.default.div`
+    display: grid;
+    flex-grow: 1;
+    gap: 20px;
+    flex-wrap: wrap;
+    padding: 16px;
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+`;
+const Segment = exports.Segment = _styledComponents.default.div`
+    flex: 1 1 0px;
+    display: flex;
+    gap: 8px;
+    font-size: 12px;
+    border: 1px solid gray;
+    padding: 8px;
+`;
+const ButtonWrap = exports.ButtonWrap = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    padding: 30px;
+    background-color: bisque;
+`;
+const Button = exports.Button = _styledComponents.default.button`
+    font-size: 20px;
+    color: white;
+    background-color: gray;
+    border: none;
+    padding: 8px 16px;
+    cursor: pointer;
+    &:hover, &:focus {
+        background-color: rebeccapurple;
+    }
+`;

package/dist/stories/components/CampaignTool/FormInput.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormInput = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _Input = _interopRequireDefault(require("../Input"));
+var _PopupFieldsRules = require("./PopupFieldsRules");
+const FormInput = _ref => {
+  let {
+    control,
+    name,
+    ...props
+  } = _ref;
+  const {
+    field,
+    fieldState: {
+      invalid,
+      isTouched,
+      isDirty
+    },
+    formState: {
+      touchedFields,
+      dirtyFields
+    }
+  } = (0, _reactHookForm.useController)({
+    name,
+    control,
+    rules: (0, _PopupFieldsRules.getPopupFieldsRules)(name)
+  });
+  return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
+    onChange: field.onChange,
+    value: field.value,
+    name: field.name,
+    inputRef: field.ref
+  }));
+};
+exports.FormInput = FormInput;

package/dist/stories/components/CampaignTool/FormSelect.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormSelect = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _Select = _interopRequireDefault(require("../Select"));
+var _PopupFieldsRules = require("./PopupFieldsRules");
+const FormSelect = _ref => {
+  let {
+    control,
+    name,
+    ...props
+  } = _ref;
+  const {
+    field,
+    fieldState: {
+      invalid,
+      isTouched,
+      isDirty
+    },
+    formState: {
+      touchedFields,
+      dirtyFields
+    }
+  } = (0, _reactHookForm.useController)({
+    name,
+    control,
+    rules: (0, _PopupFieldsRules.getPopupFieldsRules)(name)
+  });
+  return /*#__PURE__*/_react.default.createElement(_Select.default, Object.assign({}, props, {
+    onChange: field.onChange,
+    value: field.value,
+    name: field.name,
+    inputRef: field.ref
+  }));
+};
+exports.FormSelect = FormSelect;