contentoh-components-library 21.4.30 → 21.4.32

package/dist/assets/images/defaultImages/check_circle.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check_circle">
+<mask id="mask0_204_774" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<rect id="Bounding box" width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_204_774)">
+<path id="check_circle_2" d="M5.9675 10.185L10.92 5.2325L10.115 4.445L5.9675 8.5925L3.8675 6.4925L3.08 7.28L5.9675 10.185ZM7 14C6.04333 14 5.13917 13.8162 4.2875 13.4487C3.43583 13.0812 2.69208 12.5796 2.05625 11.9437C1.42042 11.3079 0.91875 10.5642 0.55125 9.7125C0.18375 8.86083 0 7.95667 0 7C0 6.03167 0.18375 5.12167 0.55125 4.27C0.91875 3.41833 1.42042 2.6775 2.05625 2.0475C2.69208 1.4175 3.43583 0.91875 4.2875 0.55125C5.13917 0.18375 6.04333 0 7 0C7.96833 0 8.87833 0.18375 9.73 0.55125C10.5817 0.91875 11.3225 1.4175 11.9525 2.0475C12.5825 2.6775 13.0812 3.41833 13.4487 4.27C13.8162 5.12167 14 6.03167 14 7C14 7.95667 13.8162 8.86083 13.4487 9.7125C13.0812 10.5642 12.5825 11.3079 11.9525 11.9437C11.3225 12.5796 10.5817 13.0812 9.73 13.4487C8.87833 13.8162 7.96833 14 7 14Z" fill="#8A6CAA"/>
+</g>
+</g>
+</svg>

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

@@ -19,12 +19,13 @@ var Avatar = function Avatar(_ref) {
   var image = _ref.image,
       altText = _ref.altText,
       imageType = _ref.imageType,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      fallbackImage = _ref.fallbackImage;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     className: imageType,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
       src: image,
-      fallbackImage: _defaultProfileImage.default,
+      fallbackImage: fallbackImage || _defaultProfileImage.default,
       alt: altText,
       onClick: onClick
     })

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

@@ -1,21 +1,62 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Card = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _styles = require("./styles");
 
+var _CheckBox = require("../CheckBox");
+
+var _reactStripeJs = require("@stripe/react-stripe-js");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var Card = function Card(_ref) {
-  var cardIcon = _ref.cardIcon,
-      altText = _ref.altText;
+  var _ref$card = _ref.card,
+      card = _ref$card === void 0 ? {} : _ref$card,
+      selectedCard = _ref.selectedCard,
+      setSelectedCard = _ref.setSelectedCard,
+      setCard = _ref.setCard,
+      setStripe = _ref.setStripe;
+  var stripe = (0, _reactStripeJs.useStripe)();
+
+  var handleOnChange = function handleOnChange(e, cardId) {
+    if (e.target.checked) {
+      setCard && setCard((0, _objectSpread2.default)((0, _objectSpread2.default)({}, card), {}, {
+        isNew: 0
+      }));
+      setStripe && setStripe(stripe);
+      setSelectedCard && setSelectedCard(cardId);
+    } else {
+      setSelectedCard && setSelectedCard("");
+      setCard && setCard(null);
+    }
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      src: cardIcon,
-      alt: altText
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "card-details",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+        id: card.id,
+        label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "brand-card",
+            children: card.brand
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: "**** **** **** ".concat(card.last4)
+          })]
+        }),
+        checked: selectedCard === card.id,
+        onChange: function onChange(e) {
+          return handleOnChange(e, card.id);
+        }
+      })
     })
   });
 };

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

@@ -11,8 +11,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _variables = require("../../../global-files/variables");
+
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\nimg {\n    width: 100%;\n    margin:auto;\n}\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  cursor: pointer;\n\n  .card-details {\n    label {\n      cursor: pointer;\n      height: 25px;\n      p {\n        margin-left: 40px;\n        span {\n          & + * {\n            margin-left: 20px;\n          }\n        }\n      }\n    }\n    & + * {\n      margin-left: 20px;\n    }\n  }\n\n  .cvc-input {\n    display: flex;\n    align-items: center;\n    color: ", ";\n    font-family: ", ";\n    font-size: 13px;\n\n    .card-input {\n      border: 1px solid #f0f0f0 !important;\n      border-radius: 5px;\n      padding: 3px;\n      width: 50px;\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext);
 
 exports.Container = Container;

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

@@ -16,15 +16,20 @@ var CheckBox = function CheckBox(_ref) {
       isFilter = _ref.isFilter,
       defaultChecked = _ref.defaultChecked,
       _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      checked = _ref.checked,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? "" : _ref$className;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: className,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "checkbox",
       name: id,
       id: id,
       onChange: onChange,
       defaultChecked: defaultChecked,
-      disabled: disabled
+      disabled: disabled,
+      checked: checked
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       htmlFor: id,
       children: label && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {

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

@@ -19,6 +19,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input {\n    display: none;\n    &:checked + label {\n      &:before {\n        background-color: ", ";\n        background-image: url(", ");\n      }\n    }\n  }\n\n  label {\n    position: relative;\n    min-height: 16px;\n    min-width: 16px;\n    display: inline-block;\n\n    p {\n      display: inline;\n      color: ", ";\n      font-family: ", ";\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      margin-left: 20px;\n\n      &.filter-text {\n        color: ", ";\n        font-size: 18px;\n        line-height: 24px;\n        margin-left: 23px;\n      }\n    }\n\n    &:before {\n      content: \"\";\n      width: 16px;\n      height: 16px;\n      position: absolute;\n      display: inline-block;\n      top: 50%;\n      transform: translateY(-50%);\n      background-image: url(", ");\n    }\n  }\n"])), _variables.GlobalColors.white, _checked.default, _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext, _variables.GlobalColors.magenta_s2, _unchecked.default);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input {\n    display: none;\n    &:checked + label {\n      &:before {\n        background-color: ", ";\n        background-image: url(", ");\n      }\n    }\n  }\n\n  label {\n    position: relative;\n    min-height: 16px;\n    min-width: 16px;\n    display: inline-block;\n\n    p {\n      display: inline;\n      color: ", ";\n      font-family: ", ";\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      margin-left: 20px;\n\n      &.filter-text {\n        color: ", ";\n        font-size: 18px;\n        line-height: 24px;\n        margin-left: 23px;\n      }\n    }\n\n    &:before {\n      content: \"\";\n      width: 16px;\n      height: 16px;\n      position: absolute;\n      display: inline-block;\n      top: 50%;\n      transform: translateY(-50%);\n      background-image: url(", ");\n      z-index: 5;\n      cursor: pointer;\n    }\n  }\n"])), _variables.GlobalColors.white, _checked.default, _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext, _variables.GlobalColors.magenta_s2, _unchecked.default);
 
 exports.Container = Container;

package/dist/components/atoms/ImageCarousel/ImgeSlider.stories.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageCarouselDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/ImageCarousel",
+  component: _.ImageCarousel
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ImageCarousel, (0, _objectSpread2.default)({}, args));
+};
+
+var ImageCarouselDefault = Template.bind({});
+exports.ImageCarouselDefault = ImageCarouselDefault;
+ImageCarouselDefault.args = {
+  imageArray: [{
+    id: 35596,
+    status: null,
+    image_id: 1,
+    packing_type: "3",
+    image_type: "1",
+    article_id: "38443",
+    src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMS1kNDQ2ZjIwNy0wYTkzLTQyNzgtYWZjNi01MTY2ZjIyY2EzNDMucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxMDAwLCJoZWlnaHQiOjEwMDAsImZpdCI6ImNvbnRhaW4iLCJiYWNrZ3JvdW5kIjp7InIiOjI1NSwiZyI6MjU1LCJiIjoyNTUsImFscGhhIjoxfX19fQ==",
+    timestamp: "2023-05-30T03:01:12.000Z",
+    id_version: 15,
+    width: null,
+    height: null,
+    scene_type: null,
+    image_shot_type: null,
+    last_modified: "2023-06-05T23:49:49.000Z",
+    name: "Central (Frente Comercial)",
+    version: 15,
+    ext: "png",
+    uuid: "d446f207-0a93-4278-afc6-5166f22ca343",
+    srcDB: "id-38443/15/1-d446f207-0a93-4278-afc6-5166f22ca343.png"
+  }, {
+    id: 35597,
+    status: null,
+    image_id: 3,
+    packing_type: "3",
+    image_type: "1",
+    article_id: "38443",
+    src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMy0yOTZkMzU3ZC00OTUzLTRiMzktYjFjMy04YWZmZDI2NDgwMWIucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxMDAwLCJoZWlnaHQiOjEwMDAsImZpdCI6ImNvbnRhaW4iLCJiYWNrZ3JvdW5kIjp7InIiOjI1NSwiZyI6MjU1LCJiIjoyNTUsImFscGhhIjoxfX19fQ==",
+    timestamp: "2023-05-30T03:01:12.000Z",
+    id_version: 15,
+    width: null,
+    height: null,
+    scene_type: null,
+    image_shot_type: null,
+    last_modified: "2023-06-05T23:49:49.000Z",
+    name: "Trasera (Back)",
+    version: 15,
+    ext: "png",
+    uuid: "296d357d-4953-4b39-b1c3-8affd264801b",
+    srcDB: "id-38443/15/3-296d357d-4953-4b39-b1c3-8affd264801b.png"
+  }, {
+    id: 35598,
+    status: null,
+    image_id: 16,
+    packing_type: "3",
+    image_type: "1",
+    article_id: "38443",
+    src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMTYtOGMzNDIzM2YtZTRiMC00MjU0LWFlYzUtZjEyN2ZiYjhkYmVkLnBuZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6MTAwMCwiaGVpZ2h0IjoxMDAwLCJmaXQiOiJjb250YWluIiwiYmFja2dyb3VuZCI6eyJyIjoyNTUsImciOjI1NSwiYiI6MjU1LCJhbHBoYSI6MX19fX0=",
+    timestamp: "2023-05-30T03:01:12.000Z",
+    id_version: 15,
+    width: null,
+    height: null,
+    scene_type: null,
+    image_shot_type: null,
+    last_modified: "2023-06-05T23:49:49.000Z",
+    name: "Detalle / Características 1",
+    version: 15,
+    ext: "png",
+    uuid: "8c34233f-e4b0-4254-aec5-f127fbb8dbed",
+    srcDB: "id-38443/15/16-8c34233f-e4b0-4254-aec5-f127fbb8dbed.png"
+  }]
+};

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

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageCarousel = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _react = require("react");
+
+var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
+
+var _Spinner = _interopRequireDefault(require("../../../assets/images/Icons/Spinner.gif"));
+
+var _ArrowBackIos = _interopRequireDefault(require("@mui/icons-material/ArrowBackIos"));
+
+var _defaultProductImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProductImage.png"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ImageCarousel = function ImageCarousel(_ref) {
+  var _ref$imageArray = _ref.imageArray,
+      imageArray = _ref$imageArray === void 0 ? [] : _ref$imageArray;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentIndex = _useState2[0],
+      setCurrentIndex = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      transitioning = _useState4[0],
+      setTransitioning = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isHover = _useState6[0],
+      setIsHover = _useState6[1];
+
+  var goToNextSlide = function goToNextSlide() {
+    if (!transitioning) {
+      setTransitioning(true);
+      setCurrentIndex(function (prevIndex) {
+        return (prevIndex + 1) % imageArray.length;
+      });
+      setTimeout(function () {
+        setTransitioning(false);
+      }, 500); // Adjust the transition duration to match your CSS
+    }
+  };
+
+  var goToPrevSlide = function goToPrevSlide() {
+    if (!transitioning) {
+      setTransitioning(true);
+      setCurrentIndex(function (prevIndex) {
+        return (prevIndex - 1 + imageArray.length) % imageArray.length;
+      });
+      setTimeout(function () {
+        setTransitioning(false);
+      }, 500); // Adjust the transition duration to match your CSS
+    }
+  }; // useEffect(() => {
+  //   const delay = 0;
+  //   let repeat;
+  //   setTimeout(() => {
+  //     repeat = setInterval(() => {
+  //       if (!isHover && imageArray.length > 1) goToNextSlide();
+  //     }, 10000);
+  //   }, delay);
+  //   return () => {
+  //     clearInterval(repeat);
+  //   };
+  // }, [isHover]);
+
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container // onMouseEnter={() => setIsHover(true)}
+  // onMouseLeave={() => setIsHover(false)}
+  , {
+    children: [imageArray.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "prev",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        goToPrevSlide();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowBackIos.default, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "slide-container",
+      children: imageArray.length ? imageArray.map(function (img, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "image-container slide ".concat(index === currentIndex ? "active" : ""),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
+            src: "https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(img.src),
+            fallbackImage: _Spinner.default,
+            alt: img === null || img === void 0 ? void 0 : img.name,
+            style: {
+              transform: "translateX(-".concat(currentIndex * 100, "%)")
+            }
+          }, index)
+        }, index);
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _defaultProductImage.default,
+        alt: "not image"
+      })
+    }), imageArray.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "next",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        goToNextSlide();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowBackIos.default, {})
+    })]
+  });
+};
+
+exports.ImageCarousel = ImageCarousel;

package/dist/components/atoms/ImageCarousel/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  width: 174px;\n  height: 175px;\n  border-radius: 5px 5px 0px 0px;\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  background-color: #f0f0f0;\n\n  .slide-container {\n    display: flex;\n    width: 100%;\n\n    .image-container {\n      width: 100%;\n      height: 100%;\n\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: fill;\n      }\n\n      &.slide {\n        flex: 0 0 100%;\n        opacity: 0;\n        transition: opacity 0.5s ease-in-out;\n\n        &.active {\n          opacity: 1;\n        }\n      }\n    }\n\n    & > img {\n      width: 100%;\n    }\n  }\n\n  button {\n    position: absolute;\n    top: 0;\n    border: none;\n    cursor: pointer;\n    background-color: transparent;\n    color: white;\n    z-index: 1;\n    height: 100%;\n    width: 30px;\n\n    svg {\n      font-size: 24px;\n    }\n\n    &.prev {\n      left: 0;\n\n      &:hover {\n        background: linear-gradient(90deg, darkgray, transparent);\n      }\n    }\n    &.next {\n      right: 0;\n\n      svg {\n        transform: rotate(180deg);\n      }\n      &:hover {\n        background: linear-gradient(-90deg, darkgray, transparent);\n      }\n    }\n  }\n\n  button:focus {\n    outline: none;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/atoms/InputFormatter/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  .quill {\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    position: relative;\n    border-radius: 2px;\n\n    .ql-toolbar {\n      background-color: ", ";\n      position: absolute;\n      z-index: 10;\n      border: 1px solid ", ";\n      width: 45px;\n      height: 45px;\n      border-radius: 4px;\n      visibility: ", ";\n      top: ", "px;\n      left: ", "px;\n    }\n\n    .ql-container {\n      border: none;\n      font-family: ", ";\n      color: ", ";\n      strong {\n        font-family: ", ";\n      }\n    }\n  }\n  .description-limit {\n    font-size: 12px;\n    font-family: ", ";\n    color: ", ";\n    text-align: right;\n  }\n"])), _variables.GlobalColors.white, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .quill {\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    position: relative;\n    border-radius: 2px;\n\n    .ql-toolbar {\n      background-color: ", ";\n      position: absolute;\n      z-index: 10;\n      border: 1px solid ", ";\n      width: 45px;\n      height: 45px;\n      border-radius: 4px;\n      visibility: ", ";\n      top: ", "px;\n      left: ", "px;\n    }\n\n    .ql-container {\n      border: none;\n      font-family: ", ";\n      color: ", ";\n      strong {\n        font-family: ", ";\n      }\n    }\n  }\n  .description-limit {\n    font-size: 12px;\n    font-family: ", ";\n    color: ", ";\n    text-align: right;\n    margin-top: 5px;\n  }\n"])), _variables.GlobalColors.white, function (_ref) {
   var focus = _ref.focus,
       isRequired = _ref.isRequired;
   return focus ? _variables.GlobalColors.magenta_s2 : isRequired ? "red" : _variables.GlobalColors.s3;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PercentTagDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/PercentTag",
+  component: _.PercentTag
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PercentTag, (0, _objectSpread2.default)({}, args));
+};
+
+var PercentTagDefault = Template.bind({});
+exports.PercentTagDefault = PercentTagDefault;
+PercentTagDefault.args = {
+  percent: 88,
+  progressBarType: "AA"
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PercentTag = void 0;
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var PercentTag = function PercentTag(_ref) {
+  var percent = _ref.percent,
+      progressBarType = _ref.progressBarType;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: "status-".concat(progressBarType),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      children: [percent, "%"]
+    })
+  });
+};
+
+exports.PercentTag = PercentTag;

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

@@ -0,0 +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"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: inline-block;\n  padding: 0 10px;\n  border-radius: 5px;\n  font-family: ", ";\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 20px;\n  color: ", ";\n\n  &.status-CA,\n  &.status-IE {\n    background-color: ", ";\n  }\n\n  &.status-R,\n  &.status-AS,\n  &.status-PA {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-ACA,\n  &.status-AC {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RC,\n  &.status-RP,\n  &.status-RCA {\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.Lato, 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);
+
+exports.Container = Container;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RatingStarsDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/RatingStars",
+  component: _.RatingStars
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RatingStars, (0, _objectSpread2.default)({}, args));
+};
+
+var RatingStarsDefault = Template.bind({});
+exports.RatingStarsDefault = RatingStarsDefault;
+RatingStarsDefault.args = {
+  percent: 80
+};

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RatingStars = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
+
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+
+var _react = require("react");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RatingStars = function RatingStars(_ref) {
+  var _ref$ratingValue = _ref.ratingValue,
+      ratingValue = _ref$ratingValue === void 0 ? 0 : _ref$ratingValue;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      rating = _useState2[0],
+      setRating = _useState2[1];
+
+  var handleRating = function handleRating(value) {
+    setRating(value);
+  };
+
+  (0, _react.useEffect)(function () {
+    setRating(ratingValue);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: (0, _toConsumableArray2.default)(Array(5)).map(function (_, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "star ".concat(index < rating ? "active" : ""),
+        onClick: function onClick() {
+          return handleRating(index + 1);
+        },
+        children: "\u2605"
+      }, index);
+    })
+  });
+};
+
+exports.RatingStars = RatingStars;

package/dist/components/atoms/RatingStars/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  font-size: 10px;\n  display: flex;\n  align-items: center;\n\n  .star {\n    cursor: pointer;\n    font-size: 12px;\n    color: #d9d9d9;\n    transition: color 0.3s;\n    line-height: 10px;\n\n    &:hover {\n      color: gold;\n    }\n\n    &.active {\n      transform: scale(1.2);\n      color: #8a6caa;\n    }\n\n    &:not(:first-child) {\n      margin-left: 5px;\n    }\n  }\n"])));
+
+exports.Container = Container;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RetailerCatalogDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/RetailerCatalog",
+  component: _.RetailerCatalog
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RetailerCatalog, (0, _objectSpread2.default)({}, args));
+};
+
+var RetailerCatalogDefault = Template.bind({});
+exports.RetailerCatalogDefault = RetailerCatalogDefault;
+RetailerCatalogDefault.args = {
+  limit: 3,
+  articleId: 39474,
+  orderId: 15270,
+  retailers: [{
+    id: 58,
+    name: "The Home Depot Golden"
+  }, {
+    id: 59,
+    name: "The Home Depot Platinum"
+  }, {
+    id: 60,
+    name: "The Home Depot Resizing"
+  }, {
+    id: 61,
+    name: "Home Depot TAB"
+  }, {
+    id: 68,
+    name: "The Home Depot Dropship"
+  }]
+};