contentoh-components-library 0.1.1

package/dist/components/molecules/PlanSelection/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  row-gap: 30px;\n  column-gap: 30px;\n  grid-template-columns: repeat(3, 1fr);\n  button:nth-child(4) {\n    grid-column-start: 1;\n    grid-column-end: 4;\n  }\n  & + * {\n    margin-top: 90px;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/ProductNameHeader/ProductNameHeader.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductNameHeaderDefault = void 0;
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _default = {
+  title: "Components/molecules/ProductNameHeader",
+  component: _index.ProductNameHeader,
+  argTypes: {
+    statusType: {
+      options: Object.values(_variables.GlobalStatus),
+      control: {
+        type: "select"
+      }
+    },
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ProductNameHeader, args);
+};
+
+var ProductNameHeaderDefault = Template.bind({});
+exports.ProductNameHeaderDefault = ProductNameHeaderDefault;
+ProductNameHeaderDefault.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString()
+};

package/dist/components/molecules/ProductNameHeader/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductNameHeader = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _index2 = require("../../atoms/StatusTag/index");
+
+var _index3 = require("../../atoms/ProgressBar/index");
+
+var _index4 = require("../../atoms/PriorityFlag/index");
+
+var ProductNameHeader = function ProductNameHeader(_ref) {
+  var productName = _ref.productName,
+      statusType = _ref.statusType,
+      percent = _ref.percent,
+      backgroundColor = _ref.backgroundColor,
+      priority = _ref.priority,
+      date = _ref.date;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    headerType: "product-name-header",
+    text: productName
+  }), /*#__PURE__*/React.createElement(_index2.StatusTag, {
+    statusType: statusType
+  }), /*#__PURE__*/React.createElement(_index3.ProgressBar, {
+    percent: percent,
+    backgroundColor: backgroundColor
+  }), /*#__PURE__*/React.createElement(_index4.PriorityFlag, {
+    priority: priority
+  }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    headerType: "date-header",
+    text: date
+  }));
+};
+
+exports.ProductNameHeader = ProductNameHeader;

package/dist/components/molecules/ProductNameHeader/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  * + * {\n    margin-left: 10px;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/StatusAsignationInfo/StatusAsignationInfo.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StatusAsignationInfoDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/StatusAsignationInfo",
+  component: _index.StatusAsignationInfo
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.StatusAsignationInfo, args);
+};
+
+var StatusAsignationInfoDefault = Template.bind({});
+exports.StatusAsignationInfoDefault = StatusAsignationInfoDefault;
+StatusAsignationInfoDefault.args = {
+  status: "AA",
+  image: {
+    src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg"
+  },
+  imagesSection: true
+};

package/dist/components/molecules/StatusAsignationInfo/index.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusAsignationInfo = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _Avatar = require("../../atoms/Avatar");
+
+var _index2 = require("../../atoms/StatusTag/index");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _react = require("react");
+
+var _index3 = require("../../atoms/AsignationOption/index");
+
+var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
+  var _ref$status = _ref.status,
+      status = _ref$status === void 0 ? "-" : _ref$status,
+      src = _ref.src,
+      imagesSection = _ref.imagesSection,
+      setImageLayout = _ref.setImageLayout,
+      asignationsList = _ref.asignationsList,
+      _ref$percent = _ref.percent,
+      percent = _ref$percent === void 0 ? 0 : _ref$percent,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "default-id" : _ref$id;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showAsignationPanel = _useState2[0],
+      setShowAsignationPanel = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      layout = _useState4[0],
+      setLayout = _useState4[1];
+
+  var closeAsignations = function closeAsignations(e) {
+    if (!e.target.closest("#default-id") && showAsignationPanel) {
+      document.removeEventListener("click", closeAsignations, false);
+      setShowAsignationPanel(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showAsignationPanel) {
+      document.addEventListener("click", closeAsignations, false);
+    }
+  }, [showAsignationPanel]);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    onClick: function onClick() {
+      setShowAsignationPanel(true);
+    },
+    id: id
+  }, imagesSection && /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: layout ? "grid-layout" : "row-layout",
+    onClick: function onClick() {
+      setLayout(!layout);
+      setImageLayout(!layout);
+    }
+  }), /*#__PURE__*/React.createElement(_index2.StatusTag, {
+    statusType: status,
+    ovalForm: true
+  }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    imageType: "small-image",
+    image: src,
+    altText: "user profile image"
+  }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    text: "Asig.",
+    color: "#969696",
+    fontFamily: "Avenir Next",
+    headerType: "input-name-header"
+  }), showAsignationPanel && /*#__PURE__*/React.createElement("div", {
+    className: "asignation-panel"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "asignation-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "asignation-status"
+  }, /*#__PURE__*/React.createElement("p", null, "Estatus"), /*#__PURE__*/React.createElement(_index2.StatusTag, {
+    statusType: status,
+    ovalForm: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "asignation-percent"
+  }, /*#__PURE__*/React.createElement("p", null, "Estatus"), /*#__PURE__*/React.createElement("p", {
+    className: "percent"
+  }, percent, "%"))), /*#__PURE__*/React.createElement("div", {
+    className: "asignations-list"
+  }, asignationsList !== undefined ? asignationsList.map(function (asigantion, index) {
+    return /*#__PURE__*/React.createElement(_index3.AsignationOption, {
+      profileImage: asignation.image,
+      asignationType: asignation.asignationType,
+      name: asignation.name,
+      team: asigantion.team
+    });
+  }) : /*#__PURE__*/React.createElement("p", {
+    className: "no-asignations"
+  }, "Sin personas para asignar")), /*#__PURE__*/React.createElement("div", {
+    className: "default-asignations-list"
+  }, /*#__PURE__*/React.createElement(_index3.AsignationOption, {
+    asignationType: "provider",
+    name: "Solicitar a",
+    team: "Proveedor"
+  }), /*#__PURE__*/React.createElement(_index3.AsignationOption, {
+    asignationType: "team",
+    name: "Solicitar a",
+    team: "Content-oh!"
+  }))));
+};
+
+exports.StatusAsignationInfo = StatusAsignationInfo;

package/dist/components/molecules/StatusAsignationInfo/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  > * + * {\n    margin-left: 8px;\n  }\n\n  .asignation-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n\n    .asignation-header {\n      display: flex;\n      justify-content: space-between;\n\n      .asignation-status,\n      .asignation-percent {\n        & > p {\n          font-family: ", ";\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 16px;\n          color: ", ";\n        }\n      }\n\n      .asignation-percent {\n        text-align: right;\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n\n    .asignations-list {\n      min-height: 40px;\n      border-bottom: 1px solid ", ";\n\n      .no-asignations {\n        padding: 5px;\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 16px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5);
+
+exports.Container = Container;

package/dist/components/molecules/TableHeader/TableHeader.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TableHeaderDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/TableHeader",
+  component: _index.TableHeader
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.TableHeader, args);
+};
+
+var TableHeaderDefault = Template.bind({});
+exports.TableHeaderDefault = TableHeaderDefault;
+TableHeaderDefault.args = {
+  imageData: {
+    image: {
+      name: "Hero.jpg",
+      src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg"
+    },
+    status: "AA"
+  }
+};

package/dist/components/molecules/TableHeader/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableHeader = void 0;
+
+var _styles = require("./styles");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _StatusAsignationInfo = require("../StatusAsignationInfo");
+
+var _variables = require("../../../global-files/variables");
+
+var TableHeader = function TableHeader(_ref) {
+  var headerInfo = _ref.headerInfo,
+      activeImage = _ref.activeImage;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    text: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
+    color: _variables.GlobalColors.s5,
+    headerType: "input-name-header"
+  }), /*#__PURE__*/React.createElement(_StatusAsignationInfo.StatusAsignationInfo, {
+    status: headerInfo === null || headerInfo === void 0 ? void 0 : headerInfo.status,
+    src: headerInfo === null || headerInfo === void 0 ? void 0 : headerInfo.src
+  }));
+};
+
+exports.TableHeader = TableHeader;

package/dist/components/molecules/TableHeader/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  .status-asignation-info {\n    display: flex;\n    align-items: center;\n\n    * + * {\n      margin-left: 5px;\n    }\n  }\n\n  & + * {\n    margin-top: 4px;\n  }\n"])), _variables.GlobalColors.s2);
+
+exports.Container = Container;

package/dist/components/molecules/TableRow/TableRow.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TableRowDefault = void 0;
+
+var _ = require(".");
+
+var _default = {
+  title: "Components/molecules/TableRow",
+  component: _.TableRow,
+  argTypes: {
+    valueType: {
+      options: [true, false],
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_.TableRow, args);
+};
+
+var TableRowDefault = Template.bind({});
+exports.TableRowDefault = TableRowDefault;
+TableRowDefault.args = {};

package/dist/components/molecules/TableRow/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableRow = void 0;
+
+var _styles = require("./styles");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var TableRow = function TableRow(_ref) {
+  var feature = _ref.feature,
+      value = _ref.value,
+      valueType = _ref.valueType;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "table-row-text",
+    text: feature
+  }), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "table-row-text " + (valueType && "gray-table-row"),
+    text: value
+  }));
+};
+
+exports.TableRow = TableRow;

package/dist/components/molecules/TableRow/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  & + * {\n    margin-top: 4px;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/TabsMenu/TabsMenu.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TabsSectionDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/TabsMenu",
+  component: _index.TabsMenu
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.TabsMenu, args);
+};
+
+var TabsSectionDefault = Template.bind({});
+exports.TabsSectionDefault = TabsSectionDefault;
+TabsSectionDefault.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+    "Golden SKU": false
+  }
+};

package/dist/components/molecules/TabsMenu/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabsMenu = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _TabSection = require("../../atoms/TabSection");
+
+var _react = require("react");
+
+var TabsMenu = function TabsMenu(_ref) {
+  var tabsSections = _ref.tabsSections,
+      setImagesSection = _ref.setImagesSection,
+      setActiveTab = _ref.setActiveTab;
+
+  var _useState = (0, _react.useState)(tabsSections),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      sections = _useState2[0],
+      setSections = _useState2[1];
+
+  var activeSection = function activeSection(key, array) {
+    var tempArray = {};
+    setImagesSection(key === "Imágenes");
+    Object.keys(array).forEach(function (section) {
+      tempArray[section] = section === key;
+      if (section === key) setActiveTab(key);
+    });
+    setSections(tempArray);
+  };
+
+  return /*#__PURE__*/React.createElement(_styles.Container, null, Object.keys(sections).map(function (key, index) {
+    return /*#__PURE__*/React.createElement(_TabSection.TabSection, {
+      key: index,
+      label: key,
+      active: sections[key],
+      onClick: function onClick() {
+        return activeSection(key, sections);
+      }
+    });
+  }));
+};
+
+exports.TabsMenu = TabsMenu;

package/dist/components/molecules/TabsMenu/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/TagAndInput/TagAndInput.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextAreaType = exports.InputType = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/TagAndInput",
+  component: _index.TagAndInput
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.TagAndInput, args);
+};
+
+var InputType = Template.bind({});
+exports.InputType = InputType;
+InputType.args = {
+  label: "Default text label",
+  inputType: "text",
+  value: "default text",
+  inputPlaceHolder: "default placeholder"
+};
+var TextAreaType = Template.bind({});
+exports.TextAreaType = TextAreaType;
+TextAreaType.args = {
+  label: "Default textarea label",
+  inputType: "textarea",
+  value: "default textarea text",
+  inputPlaceHolder: "default textarea placeholder"
+};

package/dist/components/molecules/TagAndInput/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagAndInput = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _index2 = require("../../atoms/GeneralInput/index");
+
+var TagAndInput = function TagAndInput(_ref) {
+  var inputType = _ref.inputType,
+      label = _ref.label,
+      value = _ref.value,
+      inputPlaceHolder = _ref.inputPlaceHolder;
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    inputType: inputType,
+    className: "input-container"
+  }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    text: label,
+    headerType: "input-name-header"
+  }), /*#__PURE__*/React.createElement(_index2.GeneralInput, {
+    inputType: inputType,
+    inputValue: value,
+    inputPlaceholder: inputPlaceHolder
+  }));
+};
+
+exports.TagAndInput = TagAndInput;

package/dist/components/molecules/TagAndInput/styles.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > :first-child {\n    & + * {\n      margin-top: ", "px;\n    }\n  }\n"])), function (_ref) {
+  var inputType = _ref.inputType;
+  return inputType === "text" ? 4 : 15;
+});
+
+exports.Container = Container;