contentoh-components-library 21.4.102 → 21.4.104

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

@@ -1,19 +1,30 @@
 "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 = exports.default = {
+
+var _default = {
   title: "Components/atoms/EditField",
   component: _index.EditField
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.EditField, {
-  ...args
-});
-const EditFieldDefault = exports.EditFieldDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.EditField, (0, _objectSpread2.default)({}, args));
+};
+
+var EditFieldDefault = Template.bind({});
+exports.EditFieldDefault = EditFieldDefault;
 EditFieldDefault.args = {
   placeHolder: "Text to edit"
 };

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

@@ -1,18 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EditField = void 0;
+
 var _styles = require("./styles");
+
 var _editField = _interopRequireDefault(require("../../../assets/images/editField/editField.svg"));
+
 var _jsxRuntime = require("react/jsx-runtime");
-const EditField = _ref => {
-  let {
-    placeHolder,
-    value
-  } = _ref;
+
+var EditField = function EditField(_ref) {
+  var placeHolder = _ref.placeHolder,
+      value = _ref.value;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "text",
@@ -29,4 +32,5 @@ const EditField = _ref => {
     })]
   });
 };
+
 exports.EditField = EditField;

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

@@ -1,12 +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;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  input {\n    background-color: ", ";\n    height: 32px;\n    width: 100%;\n    border: 2px solid ", ";\n    border-bottom: none;\n    font-size: 15px;\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    line-height: 18px;\n    padding-left: 5px;\n    color: ", ";\n  }\n  .button-container {\n    background-color: ", ";\n    display: flex;\n    justify-content: end;\n    align-items: center;\n    padding: 3px;\n    button {\n      height: 20px;\n      width: 20px;\n      border: none;\n      background-color: ", ";\n      padding: 0%;\n      cursor: pointer;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.white);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  input {\n    background-color: ", ";\n    height: 32px;\n    width: 100%;\n    border: 2px solid ", ";\n    border-bottom: none;\n    font-size: 15px;\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    line-height: 18px;\n    padding-left: 5px;\n    color: ", ";\n  }\n  .button-container {\n    background-color: ", ";\n    display: flex;\n    justify-content: end;\n    align-items: center;\n    padding: 3px;\n    button {\n      height: 20px;\n      width: 20px;\n      border: none;\n      background-color: ", ";\n      padding: 0%;\n      cursor: pointer;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.white);
+
+exports.Container = Container;

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

@@ -1,20 +1,31 @@
 "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 = exports.default = {
+
+var _default = {
   title: "Components/atoms/FeatureTag",
   label: "Feature Tag",
   component: _index.FeatureTag
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.FeatureTag, {
-  ...args
-});
-const FeatureTagDefault = exports.FeatureTagDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.FeatureTag, (0, _objectSpread2.default)({}, args));
+};
+
+var FeatureTagDefault = Template.bind({});
+exports.FeatureTagDefault = FeatureTagDefault;
 FeatureTagDefault.args = {
   feature: "Feature",
   value: "Value"

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

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FeatureTag = void 0;
+
 var _styles = require("./styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const FeatureTag = _ref => {
-  let {
-    feature,
-    value
-  } = _ref;
+
+var FeatureTag = function FeatureTag(_ref) {
+  var feature = _ref.feature,
+      value = _ref.value;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       className: "feature-name",
@@ -21,4 +22,5 @@ const FeatureTag = _ref => {
     })]
   });
 };
+
 exports.FeatureTag = FeatureTag;

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

@@ -1,13 +1,22 @@
 "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"));
+
 require("../../../global-files/global-styles.css");
+
 var _variables = require("../../../global-files/variables");
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #f0eef2;\n  border-radius: 3px;\n  display: flex;\n  width: fit-content;\n  height: 26px;\n  padding: 5px;\n  align-items: center;\n\n  .feature-name {\n    font-size: 14px;\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 18px;\n    color: ", ";\n\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .feature-value {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 16px;\n    height: 12px;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &:last-of-type {\n    p {\n      font-size: 24px;\n    }\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.original_magenta, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #f0eef2;\n  border-radius: 3px;\n  display: flex;\n  width: fit-content;\n  height: 26px;\n  padding: 5px;\n  align-items: center;\n\n  .feature-name {\n    font-size: 14px;\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 18px;\n    color: ", ";\n\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .feature-value {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 16px;\n    height: 12px;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &:last-of-type {\n    p {\n      font-size: 24px;\n    }\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.original_magenta, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+
+exports.Container = Container;

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

@@ -1,20 +1,31 @@
 "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 = exports.default = {
+
+var _default = {
   title: "Components/atoms/FeatureTagv2",
   label: "Feature Tag",
   component: _index.FeatureTagv2
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.FeatureTagv2, {
-  ...args
-});
-const FeatureTagDefault = exports.FeatureTagDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.FeatureTagv2, (0, _objectSpread2.default)({}, args));
+};
+
+var FeatureTagDefault = Template.bind({});
+exports.FeatureTagDefault = FeatureTagDefault;
 FeatureTagDefault.args = {
   feature: "Feature",
   value: "Value"

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

@@ -4,15 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FeatureTagv2 = void 0;
+
 var _styles = require("./styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const FeatureTagv2 = _ref => {
-  let {
-    feature,
-    value,
-    contClassName,
-    tagClassName
-  } = _ref;
+
+var FeatureTagv2 = function FeatureTagv2(_ref) {
+  var feature = _ref.feature,
+      value = _ref.value,
+      contClassName = _ref.contClassName,
+      tagClassName = _ref.tagClassName;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     className: "".concat(contClassName),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
@@ -24,4 +25,5 @@ const FeatureTagv2 = _ref => {
     })]
   });
 };
+
 exports.FeatureTagv2 = FeatureTagv2;

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

@@ -1,13 +1,22 @@
 "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"));
+
 require("../../../global-files/global-styles.css");
+
 var _variables = require("../../../global-files/variables");
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 3px;\n  display: flex;\n  width: fit-content;\n  height: 20px;\n  padding: 4px 5px;\n  align-items: center;\n\n  .feature-name {\n    font-size: 10px;\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 500;\n    font-size: 10px;\n    line-height: 12px;\n    color: ", ";\n\n    & + * {\n      margin-left: 5px;\n    }\n    &.bar-container {\n      background-color: #f0eef2;\n      border-radius: 3px;\n      height: 20px;\n      padding: 4px 5px;\n      min-width: 70px;\n      text-align: center;\n    }\n  }\n  .feature-value {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 14px;\n    height: 12px;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &:last-of-type {\n    p {\n      font-size: 10px;\n    }\n  }\n  &.bar-sku-cont {\n    background-color: ", ";\n    p{\n      color: ", ";\n    }\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.AvenirNext, _variables.GlobalColors.gray, _variables.GlobalColors.purple, _variables.GlobalColors.white);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 3px;\n  display: flex;\n  width: fit-content;\n  height: 20px;\n  padding: 4px 5px;\n  align-items: center;\n\n  .feature-name {\n    font-size: 10px;\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 500;\n    font-size: 10px;\n    line-height: 12px;\n    color: ", ";\n\n    & + * {\n      margin-left: 5px;\n    }\n    &.bar-container {\n      background-color: #f0eef2;\n      border-radius: 3px;\n      height: 20px;\n      padding: 4px 5px;\n      min-width: 70px;\n      text-align: center;\n    }\n  }\n  .feature-value {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 14px;\n    height: 12px;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &:last-of-type {\n    p {\n      font-size: 10px;\n    }\n  }\n  &.bar-sku-cont {\n    background-color: ", ";\n    p{\n      color: ", ";\n    }\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.AvenirNext, _variables.GlobalColors.gray, _variables.GlobalColors.purple, _variables.GlobalColors.white);
+
+exports.Container = Container;

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

@@ -1,13 +1,21 @@
 "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 = exports.default = {
+
+var _default = {
   title: "Components/atoms/Button",
   label: "Button Default",
   component: _index.Button,
@@ -31,19 +39,20 @@ var _default = exports.default = {
     }
   }
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
-  ...args
-});
-const GeneralButton = exports.GeneralButton = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, (0, _objectSpread2.default)({}, args));
+};
+
+var GeneralButton = Template.bind({});
+exports.GeneralButton = GeneralButton;
 GeneralButton.args = {
   buttonType: "default-button",
   label: "Button",
   image: undefined,
   altText: undefined
-};
-
-// export const PurpleButton = Template.bind({});
-
+}; // export const PurpleButton = Template.bind({});
 // PurpleButton.args = {
 //   title: "Purple Button",
 //   buttonType: "purple-button",
@@ -51,9 +60,7 @@ GeneralButton.args = {
 //   image: undefined,
 //   altText: undefined,
 // };
-
 // export const TransparentButton = Template.bind({});
-
 // TransparentButton.args = {
 //   title: "Transparent Button",
 //   buttonType: "transparent-button",
@@ -61,9 +68,7 @@ GeneralButton.args = {
 //   image: undefined,
 //   altText: undefined,
 // };
-
 // export const GreenButton = Template.bind({});
-
 // GreenButton.args = {
 //   title: "Green Button",
 //   buttonType: "green-button",

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

@@ -1,30 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Button = void 0;
+
 var _styles = require("./styles");
+
 var _react = _interopRequireDefault(require("react"));
+
 var _jsxRuntime = require("react/jsx-runtime");
-const Button = _ref => {
-  let {
-    id,
-    buttonType,
-    label,
-    image,
-    altText,
-    buttonFont,
-    onClick
-  } = _ref;
+
+var Button = function Button(_ref) {
+  var id = _ref.id,
+      buttonType = _ref.buttonType,
+      label = _ref.label,
+      image = _ref.image,
+      altText = _ref.altText,
+      buttonFont = _ref.buttonFont,
+      _onClick = _ref.onClick;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     id: id,
     className: buttonType,
     buttonFont: buttonFont,
-    onClick: e => {
+    onClick: function onClick(e) {
       e.stopPropagation();
-      onClick(e);
+
+      _onClick(e);
     },
     disabled: buttonType === "general-button-disabled",
     children: [buttonType.includes("general") && label, image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
@@ -33,6 +37,7 @@ const Button = _ref => {
     })]
   }, "button-".concat(buttonType));
 };
+
 exports.Button = Button;
 Button.defaultProps = {
   buttonType: "purple-button",

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

@@ -1,28 +1,54 @@
 "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"));
+
 require("../../../global-files/global-styles.css");
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _acceptIcon = _interopRequireDefault(require("../../../assets/images/generalButton/acceptIcon.svg"));
+
 var _rejectIcon = _interopRequireDefault(require("../../../assets/images/generalButton/rejectIcon.svg"));
+
 var _nullIcon = _interopRequireDefault(require("../../../assets/images/generalButton/nullIcon.svg"));
+
 var _openModal = _interopRequireDefault(require("../../../assets/images/generalButton/openModal.svg"));
+
 var _closeIcon = _interopRequireDefault(require("../../../assets/images/generalButton/closeIcon.svg"));
+
 var _closeIconv = _interopRequireDefault(require("../../../assets/images/generalButton/closeIconv2.svg"));
+
 var _closeIconWhite = _interopRequireDefault(require("../../../assets/images/generalButton/closeIconWhite.svg"));
+
 var _rowLayout = _interopRequireDefault(require("../../../assets/images/generalButton/rowLayout.svg"));
+
 var _gridLayout = _interopRequireDefault(require("../../../assets/images/generalButton/gridLayout.svg"));
+
 var _arrowIcon = _interopRequireDefault(require("../../../assets/images/arrow/arrowIcon.svg"));
+
 var _saveIcon = _interopRequireDefault(require("../../../assets/images/generalButton/saveIcon.svg"));
+
 var _saveIconHover = _interopRequireDefault(require("../../../assets/images/generalButton/saveIconHover.svg"));
+
 var _deleteIcon = _interopRequireDefault(require("../../../assets/images/generalButton/deleteIcon.svg"));
+
 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;
-const Container = exports.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\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    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\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  &.close-buttonv2 {\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  &.close-button-white {\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  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\n  }\n"])), props => 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, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _arrowIcon.default, _closeIcon.default, _closeIconv.default, _closeIconWhite.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white, _variables.GlobalColors.white, _variables.GlobalColors.white);
+
+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\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    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\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  &.close-buttonv2 {\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  &.close-button-white {\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  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\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, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _arrowIcon.default, _closeIcon.default, _closeIconv.default, _closeIconWhite.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white, _variables.GlobalColors.white, _variables.GlobalColors.white);
+
+exports.Container = Container;

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

@@ -1,12 +1,19 @@
 "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 = exports.default = {
+
+var _default = {
   title: "Components/atoms/GeneralInput",
   component: _index.GeneralInput,
   argTypes: {
@@ -18,16 +25,21 @@ var _default = exports.default = {
     }
   }
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GeneralInput, {
-  ...args
-});
-const Input = exports.Input = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GeneralInput, (0, _objectSpread2.default)({}, args));
+};
+
+var Input = Template.bind({});
+exports.Input = Input;
 Input.args = {
   inputId: "default-input",
   inputType: "text",
   inputPlaceholder: "placeholder text"
 };
-const TextArea = exports.TextArea = Template.bind({});
+var TextArea = Template.bind({});
+exports.TextArea = TextArea;
 TextArea.args = {
   inputType: "textarea",
   inputId: "default-input",