contentoh-components-library 10.0.0 → 12.1.17

package/dist/components/atoms/CharCounter/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  font-family: ", ";\n  color: ", ";\n  font-size: 13px;\n  text-align: right;\n  padding-right: 10px;\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/atoms/CheckBox/CheckBox.stories.js

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CheckBoxDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/CheckBox",
   component: _index.CheckBox,
@@ -20,7 +26,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.CheckBox, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CheckBox, (0, _objectSpread2.default)({}, args));
 };
 
 var CheckBoxDefault = Template.bind({});

package/dist/components/atoms/CheckBox/index.js

@@ -7,23 +7,29 @@ exports.CheckBox = void 0;
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var CheckBox = function CheckBox(_ref) {
   var id = _ref.id,
       label = _ref.label,
       onChange = _ref.onChange,
-      isFilter = _ref.isFilter;
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    key: "check-".concat(id)
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    name: id,
-    id: id,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: id
-  }, label && /*#__PURE__*/React.createElement("p", {
-    className: isFilter && "filter-text"
-  }, label)));
+      isFilter = _ref.isFilter,
+      defaultChecked = _ref.defaultChecked;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      type: "checkbox",
+      name: id,
+      id: id,
+      onChange: onChange,
+      defaultChecked: defaultChecked
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      htmlFor: id,
+      children: label && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: isFilter && "filter-text",
+        children: label
+      })
+    })]
+  }, "check-".concat(id));
 };
 
 exports.CheckBox = CheckBox;

package/dist/components/atoms/Commentary/index.js

@@ -7,9 +7,17 @@ exports.Commentary = void 0;
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var Commentary = function Commentary(_ref) {
-  var comment = _ref.comment;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("p", null, comment));
+  var comment = _ref.comment,
+      reviewed = _ref.reviewed;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    reviewed: reviewed,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: comment
+    })
+  });
 };
 
 exports.Commentary = Commentary;

package/dist/components/atoms/Commentary/styles.js

@@ -15,6 +15,9 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 500px;\n  height: 80px;\n  border: 1px solid ", ";\n  padding: 10px;\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 15px;\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 500px;\n  height: 80px;\n  border: 1px solid ", ";\n  padding: 10px;\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 15px;\n    color: ", ";\n    text-decoration: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, function (_ref) {
+  var reviewed = _ref.reviewed;
+  return reviewed ? "line-through" : "none";
+});
 
 exports.Container = Container;

package/dist/components/atoms/CustomerTypeImage/CustomerTypeImage.stories.js

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CustomerTypeImagesDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/CustomerTypeImages",
   component: _index.CustomerTypeImages
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.CustomerTypeImages, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CustomerTypeImages, (0, _objectSpread2.default)({}, args));
 };
 
 var CustomerTypeImagesDefault = Template.bind({});

package/dist/components/atoms/CustomerTypeImage/index.js

@@ -13,16 +13,18 @@ var _Cadena = _interopRequireDefault(require("../../../assets/images/providerAnd
 
 var _Proveedor = _interopRequireDefault(require("../../../assets/images/providerAndCadena/Proveedor.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var CustomerTypeImages = function CustomerTypeImages(_ref) {
   var _ref$imageType = _ref.imageType,
       imageType = _ref$imageType === void 0 ? "retailer" : _ref$imageType;
-  return /*#__PURE__*/React.createElement(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     imageType: imageType,
-    key: "image-".concat(imageType)
-  }, /*#__PURE__*/React.createElement("img", {
-    src: imageType === "retailer" ? _Cadena.default : _Proveedor.default,
-    alt: imageType === "retailer" ? "Cadena" : "Proveedor"
-  }));
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: imageType === "retailer" ? _Cadena.default : _Proveedor.default,
+      alt: imageType === "retailer" ? "Cadena" : "Proveedor"
+    })
+  }, "image-".concat(imageType));
 };
 
 exports.CustomerTypeImages = CustomerTypeImages;

package/dist/components/atoms/DropDownButton/DropDownButton.stories.js

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DropDownButtonGeneral = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/DropDownButton",
   component: _index.DropDownButton,
@@ -22,7 +28,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.DropDownButton, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DropDownButton, (0, _objectSpread2.default)({}, args));
 };
 
 var DropDownButtonGeneral = Template.bind({});

package/dist/components/atoms/DropDownButton/index.js

@@ -11,14 +11,17 @@ var _styles = require("./styles");
 
 var _dropDownArrowButton = _interopRequireDefault(require("../../../assets/images/dropDownButton/dropDownArrowButton.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var DropDownButton = function DropDownButton(_ref) {
   var active = _ref.active;
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    className: active && "active"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: _dropDownArrowButton.default,
-    alt: "V"
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: active && "active",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: _dropDownArrowButton.default,
+      alt: "V"
+    })
+  });
 };
 
 exports.DropDownButton = DropDownButton;

package/dist/components/atoms/DropDownButton/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 22px;\n  width: 10px;\n  border-left: 1px solid #342b3f;\n  padding-left: 3px;\n\n  img {\n    width: 7px;\n    vertical-align: middle;\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 22px;\n  width: 10px;\n  border-left: 1px solid #342b3f;\n  padding-left: 3px;\n\n  img {\n    width: 7px;\n    vertical-align: middle;\n  }\n\n  &.active {\n    img {\n      transform: rotate(180deg);\n    }\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/atoms/EditField/EditField.stories.js

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.EditFieldDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/EditField",
   component: _index.EditField
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.EditField, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.EditField, (0, _objectSpread2.default)({}, args));
 };
 
 var EditFieldDefault = Template.bind({});

package/dist/components/atoms/EditField/index.js

@@ -11,19 +11,26 @@ var _styles = require("./styles");
 
 var _editField = _interopRequireDefault(require("../../../assets/images/editField/editField.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var EditField = function EditField(_ref) {
   var placeHolder = _ref.placeHolder,
       value = _ref.value;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeHolder: placeHolder,
-    value: value
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "button-container"
-  }, /*#__PURE__*/React.createElement("button", null, /*#__PURE__*/React.createElement("img", {
-    src: _editField.default,
-    alt: "save changes icon"
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      type: "text",
+      placeHolder: placeHolder,
+      value: value
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "button-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _editField.default,
+          alt: "save changes icon"
+        })
+      })
+    })]
+  });
 };
 
 exports.EditField = EditField;

package/dist/components/atoms/FeatureTag/FeatureTag.stories.js

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FeatureTagDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/FeatureTag",
   label: "Feature Tag",
@@ -15,7 +21,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.FeatureTag, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.FeatureTag, (0, _objectSpread2.default)({}, args));
 };
 
 var FeatureTagDefault = Template.bind({});

package/dist/components/atoms/FeatureTag/index.js

@@ -7,14 +7,20 @@ exports.FeatureTag = void 0;
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var FeatureTag = function FeatureTag(_ref) {
   var feature = _ref.feature,
       value = _ref.value;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("p", {
-    className: "feature-name"
-  }, feature), /*#__PURE__*/React.createElement("p", {
-    className: "feature-value"
-  }, value));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "feature-name",
+      children: feature
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "feature-value",
+      children: value
+    })]
+  });
 };
 
 exports.FeatureTag = FeatureTag;

package/dist/components/atoms/GeneralButton/GeneralButton.stories.js

@@ -1,14 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.GeneralButton = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
 var _variables = require("../../../global-files/variables");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/Button",
   label: "Button Default",
@@ -36,7 +42,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.Button, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, (0, _objectSpread2.default)({}, args));
 };
 
 var GeneralButton = Template.bind({});

package/dist/components/atoms/GeneralButton/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,6 +9,10 @@ exports.Button = void 0;
 
 var _styles = require("./styles");
 
+var _react = _interopRequireDefault(require("react"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
 var Button = function Button(_ref) {
   var buttonType = _ref.buttonType,
       label = _ref.label,
@@ -14,16 +20,16 @@ var Button = function Button(_ref) {
       altText = _ref.altText,
       buttonFont = _ref.buttonFont,
       onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     className: buttonType,
     buttonFont: buttonFont,
     onClick: onClick,
-    key: "button-".concat(buttonType),
-    disabled: buttonType === "general-button-disabled"
-  }, buttonType.includes("general") && label, image && /*#__PURE__*/React.createElement("img", {
-    src: image,
-    alt: altText
-  }));
+    disabled: buttonType === "general-button-disabled",
+    children: [buttonType.includes("general") && label, image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: image,
+      alt: altText
+    })]
+  }, "button-".concat(buttonType));
 };
 
 exports.Button = Button;

package/dist/components/atoms/GeneralButton/styles.js

@@ -37,12 +37,14 @@ var _deleteIcon = _interopRequireDefault(require("../../../assets/images/general
 
 var _deleteIconHover = _interopRequireDefault(require("../../../assets/images/generalButton/deleteIconHover.svg"));
 
+var _downloadIcon = _interopRequireDefault(require("../../../assets/images/generalButton/downloadIcon.svg"));
+
 var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
   return props.buttonFont;
-}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _arrowIcon.default, _closeIcon.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white);
+}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _arrowIcon.default, _closeIcon.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white);
 
 exports.Container = Container;

package/dist/components/atoms/GeneralInput/GeneralInput.stories.js

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TextArea = exports.Input = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/GeneralInput",
   component: _index.GeneralInput,
@@ -22,7 +28,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.GeneralInput, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GeneralInput, (0, _objectSpread2.default)({}, args));
 };
 
 var Input = Template.bind({});