contentoh-components-library 8.0.0 → 10.0.1

package/dist/components/atoms/PriorityFlag/PriorityFlag.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.PriorityFlagDefault = 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/PriorityFlag",
   component: _index.PriorityFlag,
@@ -22,7 +28,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.PriorityFlag, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PriorityFlag, (0, _objectSpread2.default)({}, args));
 };
 
 var PriorityFlagDefault = Template.bind({});

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

@@ -19,15 +19,19 @@ var _mediumPriority = _interopRequireDefault(require("../../../assets/images/fla
 
 var _lowPriority = _interopRequireDefault(require("../../../assets/images/flags/lowPriority.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var PriorityFlag = function PriorityFlag(_ref) {
   var _PriorityFlags;
 
   var priority = _ref.priority;
   var PriorityFlags = (_PriorityFlags = {}, (0, _defineProperty2.default)(_PriorityFlags, "none", _noPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "low", _lowPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "medium", _mediumPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "high", _highPriority.default), _PriorityFlags);
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("img", {
-    src: PriorityFlags[priority],
-    alt: priority
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: PriorityFlags[priority],
+      alt: priority
+    })
+  });
 };
 
 exports.PriorityFlag = PriorityFlag;

package/dist/components/atoms/ProductImage/ProductImage.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.Template = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/ProductImage",
   component: _.ProductImage,
@@ -22,7 +28,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_.ProductImage, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ProductImage, (0, _objectSpread2.default)({}, args));
 };
 
 exports.Template = Template;

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

@@ -13,19 +13,22 @@ var _reactImageFallback = _interopRequireDefault(require("react-image-fallback")
 
 var _defaultProductImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProductImage.png"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ProductImage = function ProductImage(_ref) {
   var img = _ref.img,
       imageType = _ref.imageType,
       altText = _ref.altText,
       onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    className: imageType
-  }, /*#__PURE__*/React.createElement(_reactImageFallback.default, {
-    src: img,
-    fallbackImage: _defaultProductImage.default,
-    alt: altText,
-    onClick: onClick
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: imageType,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
+      src: img,
+      fallbackImage: _defaultProductImage.default,
+      alt: altText,
+      onClick: onClick
+    })
+  });
 };
 
 exports.ProductImage = ProductImage;

package/dist/components/atoms/ProductPercentCard/Percent.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductPercentCardDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var status = ["-", "Pr", "Rc", "As", "P", "QF", "AF", "AA", "AP", "AC", "RA", "RF", "RP", "RC", "Ex"];
+var _default = {
+  title: "Components/atoms/ProductPercentCard",
+  component: _index.ProductPercentCard,
+  argTypes: {
+    statusType: {
+      options: status,
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductPercentCard, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductPercentCardDefault = Template.bind({});
+exports.ProductPercentCardDefault = ProductPercentCardDefault;
+ProductPercentCardDefault.args = {
+  statusType: "-",
+  productsInStatus: 0,
+  totalProcucts: 0
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductPercentCard = void 0;
+
+var _styles = require("./styles");
+
+var _polygon = _interopRequireDefault(require("../../../assets/images/arrow/polygon.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductPercentCard = function ProductPercentCard(_ref) {
+  var statusType = _ref.statusType,
+      _ref$totalProcucts = _ref.totalProcucts,
+      totalProcucts = _ref$totalProcucts === void 0 ? 0 : _ref$totalProcucts,
+      _ref$productsInStatus = _ref.productsInStatus,
+      productsInStatus = _ref$productsInStatus === void 0 ? 0 : _ref$productsInStatus;
+  var result = productsInStatus / totalProcucts * 100;
+  var percent = result.toString().search(/\./) ? result.toFixed(2) : result;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: "status-".concat(statusType),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "text",
+      children: "Productos en proceso"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "percent-text",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "number",
+        children: productsInStatus
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _polygon.default,
+        alt: ""
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: "span",
+        children: [percent == "NaN" ? 0 : percent, "%"]
+      })]
+    })]
+  });
+};
+
+exports.ProductPercentCard = ProductPercentCard;

package/dist/components/atoms/ProductPercentCard/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  border-radius: 7px;\n  max-width: fit-content;\n  flex-direction: column;\n  height: 83px;\n  padding: 10px;\n\n  &.status-Pr,\n  &.status-Rc {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n  &.status-- {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-As,\n  &.status-P,\n  &.status-QF {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-AF,\n  &.status-AA,\n  &.status-AP,\n  &.status-AC {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    border: 1px solid #d74ded;\n    .span {\n      color: #d74ded;\n    }\n  }\n\n  &.status-Ex {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  .text {\n    color: ", ";\n    text-align: center;\n    font-size: 12px;\n    width: 70px;\n    font-family: ", ";\n    line-height: 14px;\n    margin: auto;\n  }\n  .percent-text {\n    display: flex;\n    font-family: ", ";\n    align-items: center;\n    .number {\n      font-size: 28px;\n      color: ", ";\n    }\n    .span {\n      padding-top: 8px;\n      font-size: 18px;\n    }\n  }\n"])), _variables.GlobalColors.reception, _variables.GlobalColors.reception, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.finished, _variables.GlobalColors.finished, _variables.GlobalColors.exported, _variables.GlobalColors.exported, _variables.GlobalColors.s4, _variables.FontFamily.Raleway, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/atoms/ProgressBar/ProgressBar.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.ProgressBarDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
 
 var _variables = require("../../../global-files/variables");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/ProgressBar",
   component: _.ProgressBar,
@@ -32,7 +38,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_.ProgressBar, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ProgressBar, (0, _objectSpread2.default)({}, args));
 };
 
 var ProgressBarDefault = Template.bind({});

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

@@ -7,12 +7,17 @@ exports.ProgressBar = void 0;
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ProgressBar = function ProgressBar(_ref) {
   var percent = _ref.percent,
       progressBarType = _ref.progressBarType;
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    className: "status-".concat(progressBarType)
-  }, /*#__PURE__*/React.createElement("p", null, percent, "%"));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: "status-".concat(progressBarType),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      children: [percent, "%"]
+    })
+  });
 };
 
 exports.ProgressBar = ProgressBar;

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  width: fit-content;\n  height: 27px;\n  padding: 4px;\n  border-radius: 15px;\n  font-family: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 19px;\n  color: ", ";\n\n  &.status-As,\n  &.status-P {\n    background-color: ", ";\n  }\n\n  &.status-Pr,\n  &.status-Rr {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, function (backgroundColor) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  width: fit-content;\n  height: 27px;\n  padding: 4px;\n  border-radius: 15px;\n  font-family: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 19px;\n  color: ", ";\n\n  &.status-As,\n  &.status-P {\n    background-color: ", ";\n  }\n\n  &.status-Pr,\n  &.status-Rr {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC,\n  &.status-AF {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, function (backgroundColor) {
   return backgroundColor === "s2" || backgroundColor === "s1" ? _variables.GlobalColors.s4 : _variables.GlobalColors.white;
 }, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
 

package/dist/components/atoms/ScreenHeader/ScreenHeader.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.ScreenHeaderDefatult = exports.ScreenHeaderDate = exports.ScreenHeaderAndParagraph = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
 
 var _variables = require("../../../global-files/variables");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/ScreenHeader",
   label: "Screen Header",
@@ -37,7 +43,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_.ScreenHeader, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ScreenHeader, (0, _objectSpread2.default)({}, args));
 };
 
 var ScreenHeaderDefatult = Template.bind({});

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

@@ -9,6 +9,8 @@ var _variables = require("../../../global-files/variables");
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ScreenHeader = function ScreenHeader(_ref) {
   var text = _ref.text,
       boldText = _ref.boldText,
@@ -16,12 +18,16 @@ var ScreenHeader = function ScreenHeader(_ref) {
       color = _ref.color,
       headerType = _ref.headerType,
       Paragraph = _ref.Paragraph;
-  return /*#__PURE__*/React.createElement(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     fontFamily: fontFamily,
     color: color,
     className: headerType,
-    key: "title-".concat(text)
-  }, text, " ", boldText && /*#__PURE__*/React.createElement("span", null, " ", boldText), /*#__PURE__*/React.createElement("p", null, Paragraph));
+    children: [text, " ", boldText && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: [" ", boldText]
+    }), Paragraph && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: Paragraph
+    })]
+  }, "title-".concat(text));
 };
 
 exports.ScreenHeader = ScreenHeader;

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  font-style: normal;\n  font-size: 36px;\n  line-height: 42px;\n  font-feature-settings: \"pnum\" on, \"lnum\" on;\n  color: ", ";\n\n  &.with-bold-text {\n    span {\n      font-family: ", ";\n    }\n  }\n\n  &.product-name-header {\n    font-size: 24px;\n    line-height: 36px;\n    font-weight: 500;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &.retailer-name-header {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 19px;\n    color: ", ";\n  }\n\n  &.input-name-header {\n    font-size: 14px;\n    line-height: 19px;\n    font-weight: 400;\n    color: ", ";\n  }\n\n  &.date-header {\n    font-family: ", ";\n    color: ", ";\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  &.table-row-text {\n    font-family: ", ";\n    color: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 18px;\n  }\n\n  &.gray-table-row {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 19px;\n    color: ", ";\n    background-color: ", ";\n    padding: 1px 3px;\n    border-radius: 3px;\n  }\n  &.header-and-paragraph{\n    font-family: ", ";\n    font-size: 36px;\n    color: ", ";\n    p{\n      font-family: ", ";\n      font-size: 14px;\n      color: ", ";\n      letter-spacing: -0.015em;\n    }\n  }\n"])), function (props) {
+var Container = _styledComponents.default.h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  font-style: normal;\n  font-size: 36px;\n  line-height: 42px;\n  font-feature-settings: \"pnum\" on, \"lnum\" on;\n  color: ", ";\n  position: relative;\n\n  &.with-bold-text {\n    span {\n      font-family: ", ";\n    }\n  }\n\n  &.product-name-header {\n    font-size: 24px;\n    line-height: 36px;\n    font-weight: 500;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &.retailer-name-header {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 19px;\n    color: ", ";\n  }\n\n  &.input-name-header {\n    font-size: 14px;\n    line-height: 19px;\n    height: 19px;\n    max-width: 100%;\n    font-weight: 400;\n    color: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.date-header {\n    font-family: ", ";\n    color: ", ";\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  &.table-row-text {\n    font-family: ", ";\n    color: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 18px;\n\n    &:last-child {\n      min-width: 50px;\n      text-align: center;\n    }\n  }\n\n  &.gray-table-row {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 19px;\n    color: ", ";\n    background-color: ", ";\n    padding: 1px 3px;\n    border-radius: 3px;\n    min-width: 50px;\n    text-align: center;\n  }\n  &.header-and-paragraph {\n    font-family: ", ";\n    font-size: 36px;\n    color: ", ";\n    p {\n      font-family: ", ";\n      font-size: 14px;\n      color: ", ";\n      letter-spacing: -0.015em;\n    }\n  }\n"])), function (props) {
   return props.fontFamily;
 }, function (props) {
   return props.color;

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

@@ -7,26 +7,33 @@ exports.default = Select;
 
 var _style = require("./style");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function Select(props) {
-  return /*#__PURE__*/React.createElement(_style.Container, {
-    width: props.width
-  }, /*#__PURE__*/React.createElement(_style.SelectCustom, {
-    id: props.id,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.Container, {
     width: props.width,
-    onChange: props.onChange,
-    defaultValue: props.valueSelected ? props.valueSelected : ""
-  }, /*#__PURE__*/React.createElement("option", {
-    value: "",
-    disabled: true
-  }, props.placeholder), props.options && props.options.map(function (item, i) {
-    return /*#__PURE__*/React.createElement("option", {
-      key: "select-" + item.value ? item.value : item + "-" + i,
-      value: item.value ? item.value : item // selected={
-      //   item.value
-      //     ? item.value == props.valueSelected && "selected"
-      //     : item === props.valueSelected && "selected"
-      // }
-
-    }, item.name ? item.name : item);
-  })), /*#__PURE__*/React.createElement(_style.BackgroundEnd, null));
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.SelectCustom, {
+      id: props.id,
+      width: props.width,
+      onChange: props.onChange,
+      defaultValue: props.valueSelected ? props.valueSelected : "",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "",
+        disabled: true,
+        children: props.placeholder
+      }), props.options && props.options.map(function (item, i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("option", {
+          className: item.required ? "option-required" : "" //className={ ? "option-required" : ""}
+          ,
+          value: item.value ? item.value : item // selected={
+          //   item.value
+          //     ? item.value == props.valueSelected && "selected"
+          //     : item === props.valueSelected && "selected"
+          // }
+          ,
+          children: [item.name ? item.name : item, " ", item !== null && item !== void 0 && item.required ? "*" : ""]
+        }, "select-" + item.value ? item.value : item + "-" + i);
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.BackgroundEnd, {})]
+  });
 }

package/dist/components/atoms/Select/style.js

@@ -24,7 +24,7 @@ var BackgroundEnd = _styledComponents.default.div(_templateObject2 || (_template
 
 exports.BackgroundEnd = BackgroundEnd;
 
-var SelectCustom = _styledComponents.default.select(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: #fafafa;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  -ms-appearance: none;\n  appearance: none;\n  outline: 0;\n  box-shadow: none;\n  border: 0 !important;\n  background-image: none;\n  width: ", ";\n  cursor: pointer;\n  height: 21px;\n  font-family: Avenir Next;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 21px;\n  padding: 0 5px;\n  box-sizing: border-box;\n  &::-ms-expand {\n    display: none;\n  }\n  &:option {\n    background-color: blue;\n    &:disabled {\n      color: #d4d1d7;\n    }\n    &:invalid {\n      color: gray;\n    }\n  }\n"])), function (_ref2) {
+var SelectCustom = _styledComponents.default.select(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: #fafafa;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  -ms-appearance: none;\n  appearance: none;\n  outline: 0;\n  box-shadow: none;\n  border: 0 !important;\n  background-image: none;\n  width: ", ";\n  cursor: pointer;\n  height: 21px;\n  font-family: Avenir Next;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 21px;\n  padding: 0 5px;\n  box-sizing: border-box;\n  &::-ms-expand {\n    display: none;\n  }\n  option {\n    &:disabled {\n      color: #d4d1d7;\n    }\n    &:invalid {\n      color: gray;\n    }\n  }\n"])), function (_ref2) {
   var width = _ref2.width;
   return width || "100%";
 });

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

@@ -7,10 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.SideMenuButtonDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
 var _dashboard = _interopRequireDefault(require("../../../assets/images/sideMenuButton/dashboard.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/atoms/SideMenuButton",
   compoment: _index.SideMenuButton
@@ -18,7 +22,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.SideMenuButton, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SideMenuButton, (0, _objectSpread2.default)({}, args));
 };
 
 var SideMenuButtonDefault = Template.bind({});

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

@@ -7,14 +7,20 @@ exports.SideMenuButton = void 0;
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var SideMenuButton = function SideMenuButton(_ref) {
   var image = _ref.image,
       altText = _ref.altText,
       label = _ref.label;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, image && /*#__PURE__*/React.createElement("img", {
-    src: image,
-    alt: altText
-  }), /*#__PURE__*/React.createElement("p", null, label));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: image,
+      alt: altText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: label
+    })]
+  });
 };
 
 exports.SideMenuButton = SideMenuButton;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SliderToolTipDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _infoIcon = _interopRequireDefault(require("../../../assets/images/sliderToolTip/infoIcon.svg"));
+
+var _slide = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide1.svg"));
+
+var _slide2 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide2.svg"));
+
+var _slide3 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide3.svg"));
+
+var _slide4 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide4.svg"));
+
+var _slide5 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide5.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/SliderToolTip",
+  component: _index.SliderToolTip
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SliderToolTip, (0, _objectSpread2.default)({}, args));
+};
+
+var SliderToolTipDefault = Template.bind({});
+exports.SliderToolTipDefault = SliderToolTipDefault;
+SliderToolTipDefault.args = {
+  InfoIcon: _infoIcon.default,
+  Slide1: _slide.default,
+  Slide2: _slide2.default,
+  Slide3: _slide3.default,
+  Slide4: _slide4.default,
+  Slide5: _slide5.default
+};