@desynova-digital/components 9.2.52 → 9.3.0

package/atoms/icon/icons.json

@@ -146,6 +146,21 @@
       ],
       "width": 16,
       "height": 16
+    },
+     "search_filter": {
+      "paths": [
+        "M9.6224 2.33594H6.41406",
+        "M4.58333 2.33594H1.375",
+        "M9.625 6H5.5",
+        "M3.66667 6H1.375",
+        "M9.6276 9.66406H7.33594",
+        "M5.5 9.66406H1.375",
+        "M6.41406 1.41406V3.2474",
+        "M3.66406 5.08594V6.91927",
+        "M7.33594 8.75V10.5833"
+      ],
+      "width": 11,
+      "height": 11
     },
     "dashboard": {
       "paths": [
@@ -1551,7 +1566,7 @@
     },
     "document-icon": {
       "paths": [
-        "M3.66732 12.3307H10.334V13.9974H3.66732V12.3307ZM3.66732 8.99739H10.334V10.6641H3.66732V8.99739ZM8.66732 0.664062H2.00065C1.08398 0.664062 0.333984 1.41406 0.333984 2.33073V15.6641C0.333984 16.5807 1.07565 17.3307 1.99232 17.3307H12.0007C12.9173 17.3307 13.6673 16.5807 13.6673 15.6641V5.66406L8.66732 0.664062ZM12.0007 15.6641H2.00065V2.33073H7.83398V6.4974H12.0007V15.6641Z"
+        "M3 8.25H9V6.75H3V8.25ZM3 10.5H9V9H3V10.5ZM3 12.75H6.75V11.25H3V12.75ZM1.5 15C1.0875 15 0.734375 14.8531 0.440625 14.5594C0.146875 14.2656 0 13.9125 0 13.5V1.5C0 1.0875 0.146875 0.734375 0.440625 0.440625C0.734375 0.146875 1.0875 0 1.5 0H7.5L12 4.5V13.5C12 13.9125 11.8531 14.2656 11.5594 14.5594C11.2656 14.8531 10.9125 15 10.5 15H1.5ZM6.75 5.25H10.5L6.75 1.5V5.25Z"
       ],
       "width": 14,
       "height": 18
@@ -1565,10 +1580,10 @@
     },
     "video-icon": {
       "paths": [
-        "M1.8 3.6H0V16.2C0 17.19 0.81 18 1.8 18H14.4V16.2H1.8V3.6ZM16.2 0H5.4C4.41 0 3.6 0.81 3.6 1.8V12.6C3.6 13.59 4.41 14.4 5.4 14.4H16.2C17.19 14.4 18 13.59 18 12.6V1.8C18 0.81 17.19 0 16.2 0ZM16.2 12.6H5.4V1.8H16.2V12.6ZM9 3.15V11.25L14.4 7.2L9 3.15Z"
+        "M7.125 9.375L12.375 6L7.125 2.625V9.375ZM4.5 12C4.0875 12 3.73438 11.8531 3.44063 11.5594C3.14688 11.2656 3 10.9125 3 10.5V1.5C3 1.0875 3.14688 0.734375 3.44063 0.440625C3.73438 0.146875 4.0875 0 4.5 0H13.5C13.9125 0 14.2656 0.146875 14.5594 0.440625C14.8531 0.734375 15 1.0875 15 1.5V10.5C15 10.9125 14.8531 11.2656 14.5594 11.5594C14.2656 11.8531 13.9125 12 13.5 12H4.5ZM1.5 15C1.0875 15 0.734375 14.8531 0.440625 14.5594C0.146875 14.2656 0 13.9125 0 13.5V3H1.5V13.5H12V15H1.5Z"
       ],
-      "width": 18,
-      "height": 18
+      "width": 15,
+      "height": 15
     },
     "enhance": {
       "paths": [
@@ -1919,6 +1934,91 @@
       ],
       "width": 12,
       "height": 14
+    },
+    "hamburger": {
+      "paths": [
+        "M0 6.66536V5.33203H12V6.66536H0ZM0 3.9987V2.66536H12V3.9987H0ZM0 1.33203V-0.00130224H12V1.33203H0Z"
+      ],
+      "width": 12,
+      "height": 7
+    },
+    "display-list": {
+      "paths": [
+        "M0 5.33333H1.77778V3.55556H0V5.33333ZM0 8.88889H1.77778V7.11111H0V8.88889ZM0 1.77778H1.77778V0H0V1.77778ZM3.55556 5.33333H16V3.55556H3.55556V5.33333ZM3.55556 8.88889H16V7.11111H3.55556V8.88889ZM3.55556 0V1.77778H16V0H3.55556ZM0 5.33333H1.77778V3.55556H0V5.33333ZM0 8.88889H1.77778V7.11111H0V8.88889ZM0 1.77778H1.77778V0H0V1.77778ZM3.55556 5.33333H16V3.55556H3.55556V5.33333ZM3.55556 8.88889H16V7.11111H3.55556V8.88889ZM3.55556 0V1.77778H16V0H3.55556Z"
+      ],
+      "width": 14,
+      "height": 14
+    },
+    "display-folder": {
+      "paths": [
+        "M0 0V5.33333H5.33333V0H0ZM4 4H1.33333V1.33333H4V4ZM0 6.66667V12H5.33333V6.66667H0ZM4 10.6667H1.33333V8H4V10.6667ZM6.66667 0V5.33333H12V0H6.66667ZM10.6667 4H8V1.33333H10.6667V4ZM6.66667 6.66667V12H12V6.66667H6.66667ZM10.6667 10.6667H8V8H10.6667V10.6667Z"
+      ],
+      "width": 14,
+      "height": 14
+    },
+    "music-icon": {
+      "paths": [
+        "M4.6875 0V8.24219C4.22656 7.97656 3.69531 7.8125 3.125 7.8125C1.39844 7.8125 0 9.21094 0 10.9375C0 12.6641 1.39844 14.0625 3.125 14.0625C4.85156 14.0625 6.25 12.6641 6.25 10.9375V3.125H9.375V0H4.6875Z"
+      ],
+      "width": 10,
+      "height": 15
+    },
+    "image-icon": {
+      "paths": [
+        "M1.66667 15C1.20833 15 0.815972 14.8368 0.489583 14.5104C0.163194 14.184 0 13.7917 0 13.3333V1.66667C0 1.20833 0.163194 0.815972 0.489583 0.489583C0.815972 0.163194 1.20833 0 1.66667 0H13.3333C13.7917 0 14.184 0.163194 14.5104 0.489583C14.8368 0.815972 15 1.20833 15 1.66667V13.3333C15 13.7917 14.8368 14.184 14.5104 14.5104C14.184 14.8368 13.7917 15 13.3333 15H1.66667ZM2.5 11.6667H12.5L9.375 7.5L6.875 10.8333L5 8.33333L2.5 11.6667Z"
+      ],
+      "width": 15,
+      "height": 15
+    },
+    "file-icon": {
+      "paths": [
+        "M3.2 11.2H9.6V12.8H3.2V11.2ZM3.2 8H9.6V9.6H3.2V8ZM8 0H1.6C0.72 0 0 0.72 0 1.6V14.4C0 15.28 0.712 16 1.592 16H11.2C12.08 16 12.8 15.28 12.8 14.4V4.8L8 0ZM11.2 14.4H1.6V1.6H7.2V5.6H11.2V14.4Z"
+      ],
+      "width": 14,
+      "height": 14
+    },
+    "folder-icon": {
+      "paths": [
+        "M16.441 5.33442L4.69276 5.76392C4.30397 5.76392 4.07727 5.90716 3.97018 6.27505L1.53146 14.4859C1.43063 14.8349 0.947272 14.9982 0.61102 14.9982C0.274993 14.9982 0 14.7275 0 14.3968V12.0957V2.66853V2.21813V0.837876C0 0.375152 0.381189 0 0.85136 0H6.9003C7.12611 0 7.34253 0.0882322 7.50216 0.245334L9.25719 1.97257C9.41682 2.12967 9.63346 2.21791 9.85905 2.21791H15.5896C16.0598 2.21791 16.441 2.59306 16.441 3.05578V3.34204V5.33442Z",
+        "M0.611328 14.9995C0.947356 14.9995 1.12152 14.7471 1.22235 14.3981L3.68074 5.9573C3.78783 5.58941 4.12967 5.33594 4.51868 5.33594H19.5827C19.9424 5.33594 20.2009 5.6761 20.0994 6.01583L17.6633 14.1627C17.5533 14.548 17.3121 15.0028 16.8131 14.9995H0.611328Z"
+      ],
+      "width": 21,
+      "height": 15
+    },
+    "error-circle": {
+      "paths": [
+        "M6.4275 8.8275C6.5425 8.7125 6.6 8.57 6.6 8.4C6.6 8.23 6.5425 8.0875 6.4275 7.9725C6.3125 7.8575 6.17 7.8 6 7.8C5.83 7.8 5.6875 7.8575 5.5725 7.9725C5.4575 8.0875 5.4 8.23 5.4 8.4C5.4 8.57 5.4575 8.7125 5.5725 8.8275C5.6875 8.9425 5.83 9 6 9C6.17 9 6.3125 8.9425 6.4275 8.8275ZM5.4 6.6H6.6V3H5.4V6.6ZM6 12C5.17 12 4.39 11.8425 3.66 11.5275C2.93 11.2125 2.295 10.785 1.755 10.245C1.215 9.705 0.7875 9.07 0.4725 8.34C0.1575 7.61 0 6.83 0 6C0 5.17 0.1575 4.39 0.4725 3.66C0.7875 2.93 1.215 2.295 1.755 1.755C2.295 1.215 2.93 0.7875 3.66 0.4725C4.39 0.1575 5.17 0 6 0C6.83 0 7.61 0.1575 8.34 0.4725C9.07 0.7875 9.705 1.215 10.245 1.755C10.785 2.295 11.2125 2.93 11.5275 3.66C11.8425 4.39 12 5.17 12 6C12 6.83 11.8425 7.61 11.5275 8.34C11.2125 9.07 10.785 9.705 10.245 10.245C9.705 10.785 9.07 11.2125 8.34 11.5275C7.61 11.8425 6.83 12 6 12ZM6 10.8C7.34 10.8 8.475 10.335 9.405 9.405C10.335 8.475 10.8 7.34 10.8 6C10.8 4.66 10.335 3.525 9.405 2.595C8.475 1.665 7.34 1.2 6 1.2C4.66 1.2 3.525 1.665 2.595 2.595C1.665 3.525 1.2 4.66 1.2 6C1.2 7.34 1.665 8.475 2.595 9.405C3.525 10.335 4.66 10.8 6 10.8Z"
+      ],
+      "width": 12,
+      "height": 12
+    },
+    "jhs_delivery_curate": {
+      "paths": ["M.006 10.286L12 5.143.006 0 0 4l8.571 1.143L0 6.286z"],
+      "width": 12,
+      "height": 11
+    },
+    "notes-comment":{
+      "paths": [
+        "M0 10V1C0 0.725 0.0979167 0.489583 0.29375 0.29375C0.489583 0.0979167 0.725 0 1 0H9C9.275 0 9.51042 0.0979167 9.70625 0.29375C9.90208 0.489583 10 0.725 10 1V7C10 7.275 9.90208 7.51042 9.70625 7.70625C9.51042 7.90208 9.275 8 9 8H2L0 10ZM2 6H6V5H2V6ZM2 4.5H8V3.5H2V4.5ZM2 3H8V2H2V3Z"
+      ],
+      "width": 10,
+      "height": 10
+    },
+    "check-circle": {
+      "viewBox": "0 -960 960 960",
+      "paths": [
+        "m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+      ],
+      "width": 14,
+      "height": 14
+    },
+    "valid_error-circle": {
+      "viewBox": "0 -960 960 960",
+      "paths": [
+        "M508.5-291.5Q520-303 520-320t-11.5-28.5Q497-360 480-360t-28.5 11.5Q440-337 440-320t11.5 28.5Q463-280 480-280t28.5-11.5ZM440-440h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+      ],
+      "width": 14,
+      "height": 14
     }
   }
-}
+}

package/atoms/pageSearchCard/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _pageSearchCard = _interopRequireDefault(require("./pageSearchCard"));
+var _default = exports["default"] = _pageSearchCard["default"];

package/atoms/pageSearchCard/pageSearchCard.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var getSearchAccent = function getSearchAccent(theme) {
+  var _colors$theme, _colors$theme$searchH, _colors$dark, _colors$dark$searchHe;
+  return ((_colors$theme = _tokens.colors[theme]) === null || _colors$theme === void 0 ? void 0 : (_colors$theme$searchH = _colors$theme.searchHeader) === null || _colors$theme$searchH === void 0 ? void 0 : _colors$theme$searchH.mainColor) || ((_colors$dark = _tokens.colors.dark) === null || _colors$dark === void 0 ? void 0 : (_colors$dark$searchHe = _colors$dark.searchHeader) === null || _colors$dark$searchHe === void 0 ? void 0 : _colors$dark$searchHe.mainColor);
+};
+var FALLBACK_IMAGE = 'https://ctngcthumbnailprod.contido.io/showpage_fallback.png';
+var capitalizeFirstLetter = function capitalizeFirstLetter(value) {
+  if (typeof value !== 'string' || !value) return value;
+  return "".concat(value.charAt(0).toUpperCase()).concat(value.slice(1));
+};
+var Card = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  width: ", ";\n  height: ", ";\n  border-radius: 10px;\n  overflow: visible;\n  cursor: pointer;\n  background: #0c141d;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);\n  transform: scale(1);\n  transform-origin: center;\n  z-index: 0;\n  isolation: isolate;\n  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform;\n\n  &:hover {\n    transform: scale(1.035);\n    z-index: 5;\n    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n  }\n"])), function (_ref) {
+  var width = _ref.width;
+  return width || '178px';
+}, function (_ref2) {
+  var height = _ref2.height;
+  return height || '258px';
+});
+var Poster = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  display: block;\n  background: #0c141d;\n  border-radius: inherit;\n\n  &.fallback-image {\n    object-fit: cover;\n    object-position: center;\n  }\n"])));
+var Gradient = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(12, 20, 29, 0.7) 60%, rgba(12, 20, 29, 0.97) 100%);\n"])));
+var Badge = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 12px;\n  left: 12px;\n  display: inline-flex;\n  height: 16.75px;\n  padding: 2px 6px;\n  align-items: center;\n  justify-content: center;\n  font-family: 'SFUIText-Medium';\n  border-radius: 4px;\n  background: ", ";\n  color: #0c141d;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  letter-spacing: 0.6px;\n  text-transform: uppercase;\n  z-index: 2;\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return getSearchAccent(theme);
+});
+var Content = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  left: 16px;\n  right: 16px;\n  bottom: 16px;\n  z-index: 2;\n"])));
+var Title = _styledComponents["default"].h3(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0;\n  color: #fff;\n  font-family: 'SFUIText-Medium';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 18px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
+var Subtitle = _styledComponents["default"].p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 2px 0 0;\n  color: #5b7088;\n  font-family: 'SFUIText-Medium';\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 15px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
+var PageSearchCard = function PageSearchCard(_ref4) {
+  var thumbnail = _ref4.thumbnail,
+    show_name = _ref4.show_name,
+    asset_language = _ref4.asset_language,
+    asset_type = _ref4.asset_type,
+    channel_name = _ref4.channel_name,
+    _ref4$title = _ref4.title,
+    title = _ref4$title === void 0 ? 'Ghazi Attack' : _ref4$title,
+    _ref4$subtitle = _ref4.subtitle,
+    subtitle = _ref4$subtitle === void 0 ? 'Star Plus' : _ref4$subtitle,
+    _ref4$tag = _ref4.tag,
+    tag = _ref4$tag === void 0 ? 'MOVIE' : _ref4$tag,
+    _ref4$theme = _ref4.theme,
+    theme = _ref4$theme === void 0 ? 'dark' : _ref4$theme,
+    _ref4$width = _ref4.width,
+    width = _ref4$width === void 0 ? '220px' : _ref4$width,
+    _ref4$height = _ref4.height,
+    height = _ref4$height === void 0 ? '292px' : _ref4$height,
+    onClick = _ref4.onClick;
+  var effectiveTitle = show_name || title;
+  var effectiveTag = asset_type || tag;
+  var normalizedAssetType = String(effectiveTag).toLowerCase();
+  var effectiveSubtitle = subtitle;
+  if (normalizedAssetType === 'movie') {
+    effectiveSubtitle = capitalizeFirstLetter(asset_language || '');
+  } else if (normalizedAssetType === 'show') {
+    effectiveSubtitle = channel_name || '';
+  }
+  var _useState = (0, _react.useState)(!thumbnail),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hasImageError = _useState2[0],
+    setHasImageError = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setHasImageError(!thumbnail);
+  }, [thumbnail]);
+  var imageSource = hasImageError ? FALLBACK_IMAGE : thumbnail;
+  return /*#__PURE__*/_react["default"].createElement(Card, {
+    width: width,
+    height: height,
+    theme: theme,
+    onClick: onClick
+  }, /*#__PURE__*/_react["default"].createElement(Poster, {
+    src: imageSource,
+    alt: effectiveTitle,
+    className: hasImageError ? 'fallback-image' : undefined,
+    onError: function onError() {
+      if (!hasImageError) setHasImageError(true);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(Gradient, null), /*#__PURE__*/_react["default"].createElement(Badge, {
+    theme: theme
+  }, effectiveTag), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(Title, null, effectiveTitle), effectiveSubtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, effectiveSubtitle) : null));
+};
+PageSearchCard.propTypes = {
+  thumbnail: _propTypes["default"].string,
+  show_name: _propTypes["default"].string,
+  asset_language: _propTypes["default"].string,
+  asset_type: _propTypes["default"].string,
+  channel_name: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  subtitle: _propTypes["default"].string,
+  tag: _propTypes["default"].string,
+  theme: _propTypes["default"].string,
+  width: _propTypes["default"].string,
+  height: _propTypes["default"].string,
+  onClick: _propTypes["default"].func
+};
+var _default = exports["default"] = PageSearchCard;

package/atoms/popup/popup.js

@@ -50,7 +50,7 @@ var PopupBlock = _styledComponents["default"].div(_templateObject3 || (_template
 var PopupOverlay = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  background: ", ";\n  width: 100%;\n  height: 100%;\n"])), function (props) {
   return _tokens.colors[props.theme].popup.overlayColor;
 });
-var PopupBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  z-index: 3;\n  max-width: 650px;\n  min-width: 440px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n\n  width: ", ";\n  border-radius: 10px;\n  background: ", ";\n\n  .popup-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    box-sizing: border-box;\n    padding: 40px;\n\n    .header-title {\n      font-family: SFUIText-Light;\n      font-size: 18px;\n      line-height: 1;\n      color: ", ";\n    }\n    .display-flex {\n      display: flex;\n      .pr-20 {\n        padding-right: 20px;\n      }\n    }\n    .cursor-p {\n      cursor: pointer;\n    }\n\n    .count-wrapper {\n      font-size: 14px;\n      line-height: 24px;\n      color: #afb2ba;\n      font-family: 'SFUIText-Light';\n    }\n    ", " {\n      margin: 0;\n      background: transparent;\n      border-color: transparent;\n      padding: 0;\n      path {\n        fill: ", ";\n      }\n      &:hover {\n        background: transparent;\n        border-color: transparent;\n      }\n    }\n  }\n  .popup-body {\n    padding: 0 40px 40px 40px;\n    .popup-action-block {\n      margin: 0 auto;\n      display: flex;\n      justify-content: center;\n\n      button {\n        padding: 10px 0;\n        margin: 0 10px;\n        min-width: 150px;\n      }\n    }\n    .popup-message {\n      font-family: SFUIText-Light;\n      font-size: 14px;\n      line-height: 1.5;\n      text-align: center;\n      color: ", ";\n      margin-bottom: 40px;\n    }\n  }\n\n  .loading-box {\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: wait;\n    background-color: rgb(21 21 21 / 60%);\n    border-radius: 10px;\n  }\n"])), function (props) {
+var PopupBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  z-index: 3;\n  max-width: 650px;\n  min-width: 440px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n\n  width: ", ";\n  border-radius: 10px;\n  background: ", ";\n\n  .popup-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    box-sizing: border-box;\n    padding: 40px;\n\n    .header-title {\n      font-family: SFUIText-Light;\n      font-size: 18px;\n      line-height: 1;\n      color: ", ";\n    }\n    .display-flex {\n      display: flex;\n      .pr-20 {\n        padding-right: 20px;\n      }\n    }\n    .cursor-p {\n      cursor: pointer;\n    }\n\n    .count-wrapper {\n      font-size: 14px;\n      line-height: 24px;\n      color: #afb2ba;\n      font-family: 'SFUIText-Light';\n    }\n    ", " {\n      margin: 0;\n      background: transparent;\n      border-color: transparent;\n      padding: 0;\n      path {\n        fill: ", ";\n      }\n      &:hover {\n        background: transparent;\n        border-color: transparent;\n      }\n    }\n  }\n  .popup-body {\n    padding: 0 40px 40px 40px;\n    .popup-action-block {\n      margin: 0 auto;\n      display: flex;\n      justify-content: center;\n\n      button {\n        padding: 10px 0;\n        margin: 0 10px;\n        min-width: 150px;\n      }\n    }\n    .popup-message {\n      font-family: SFUIText-Light;\n      font-size: 14px;\n      line-height: 1.5;\n      text-align: center;\n      color: ", ";\n      margin-bottom: 40px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .loading-box {\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: wait;\n    background-color: rgb(21 21 21 / 60%);\n    border-radius: 10px;\n  }\n"])), function (props) {
   return props.width ? props.width : "440px";
 }, function (props) {
   return _tokens.colors[props.theme].popup.popupBoxBackground;
@@ -135,7 +135,8 @@ var Popup = /*#__PURE__*/function (_Component) {
       }))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "popup-body"
       }, messageBody ? /*#__PURE__*/_react["default"].createElement("p", {
-        className: "popup-message"
+        className: "popup-message",
+        title: messageBody
       }, messageBody) : null, popupContent ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "popup-content"
       }, popupContent) : null, /*#__PURE__*/_react["default"].createElement("div", {

package/atoms/sideBar/sidebar.js

@@ -26,11 +26,13 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var SideBarOverlay = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 100;\n  visibility: ", ";\n"])), function (props) {
-  return props.open ? "visible" : "hidden";
+var SideBarOverlay = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background: rgba(0,0,0,0.5);\n  z-index: 100;\n  visibility: ", ";\n"])), function (props) {
+  return props.open ? 'visible' : 'hidden';
 });
-var SideBarBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 100%;\n  position: fixed;\n  z-index: 101;\n  top: 0;\n  right: 0px;\n  background-color: #121d29;\n  box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);\n  overflow: hidden;\n  width: 0px;\n\n  transition: width 250ms ease-in-out;\n\n  .ball {\n    background-color: #151717;\n  }\n\n  .circle {\n    border: 4px solid #1d2020;\n    height: 10px;\n    width: 10px;\n  }\n\n  div.loader-holder > div {\n    height: 20px;\n    margin-left: 5px;\n  }\n\n  .parentBox {\n    width: 18px;\n    height: 18px;\n  }\n\n  &.open {\n    width: 400px;\n    .sidebar-header,\n    .bodyContainer,\n    .button-container {\n      opacity: 1;\n    }\n  }\n\n  .sidebar-header {\n    transition: opacity 50ms ease-in-out 250ms;\n    opacity: 0;\n    padding: 20px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-sizing: border-box;\n\n    .header-title {\n      font-family: SFUIText-Light;\n      line-height: 14px;\n      font-size: 16px;\n      line-height: 14px;\n      color: #ffffff;\n    }\n    ", " {\n      margin: 0;\n      background: transparent;\n      border-color: transparent;\n      padding: 0;\n      &:hover {\n        background: transparent;\n        border-color: transparent;\n      }\n    }\n  }\n\n  .bodyContainer {\n    opacity: 0;\n    transition: opacity 50ms ease-in-out 250ms;\n    color: white;\n    font-family: SFUIText-Regular;\n    overflow-y: scroll;\n    overflow-x: hidden;\n    height: calc(100% - 110px);\n    padding: 0px 10px 0px 20px;\n    overflow-x: hidden;\n  }\n\n  .bodyContainer-without-footer {\n    height: calc(100% - 70px) !important;\n  }\n"])), _index["default"].Element);
-var ButtonContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  display: flex;\n  justify-content: center;\n  padding: 10px 0;\n  background: #182738;\n  box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);\n  width: 100%;\n  bottom: 0;\n  position: absolute;\n  opacity: 0;\n  transition: opacity 50ms ease-in-out 250ms;\n\n  .btn {\n    border-radius: 22px;\n    color: #ffffff;\n    font-size: 12px;\n    line-height: 12px;\n    text-align: center;\n    min-width: 150px;\n    text-transform: uppercase;\n    padding: 10px 0;\n    margin: 0 10px;\n    max-width: 150px;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    :hover {\n      color: ", ";\n    }\n  }\n\n  .default {\n    background: #303f51;\n\n    :hover {\n      color: ", ";\n    }\n  }\n\n  .primary {\n    color: rgb(12, 20, 29);\n    background: ", ";\n\n    :hover {\n      color: rgb(12, 20, 29);\n      transition: all 0.2s ease-in-out 0s;\n      box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;\n    }\n  }\n"])), function (props) {
+var SideBarBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 100%;\n    position: fixed;\n    z-index: 101;\n    top: 0;\n    right: 0px;\n    background-color: #121D29;\n    box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);\n    overflow: hidden;\n    width:0px;\n\n    transition: width 250ms ease-in-out;\n\n    .ball{\n      background-color:#151717\n    }\n\n    .circle{\n      border:4px solid #1d2020;\n      height:10px;\n      width:10px\n    }\n\n    div.loader-holder > div{\n      height:20px;\n      margin-left:5px;\n    }\n\n    .parentBox{\n      width:18px;\n      height:18px;\n    }\n\n    &.open{\n      width: ", ";\n      .sidebar-header, .bodyContainer, .button-container {\n        opacity: 1;\n      }\n    }\n\n    .sidebar-header {\n      transition: opacity 50ms ease-in-out 250ms;\n      opacity:0;\n      padding:20px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      box-sizing: border-box;\n  \n      .header-title {\n        font-family: SFUIText-Light;\n        line-height: 14px;\n        font-size: 16px;\n        line-height: 14px;\n        color: #FFFFFF;\n      }\n      ", " {\n        margin: 0;\n        background: transparent;\n        border-color: transparent;\n        padding: 0;\n        &:hover {\n          background: transparent;\n          border-color: transparent;\n        }\n      }\n    }\n\n    .bodyContainer {\n      opacity:0;\n      transition: opacity 50ms ease-in-out 250ms;\n      color:white;\n      font-family: SFUIText-Regular;\n      overflow-y: scroll;\n      overflow-x: hidden;\n      height:  calc(100% - 110px);\n      padding:0px 20px 0px 20px;\n      overflow-x: hidden;\n    }\n\n    .bodyContainer-without-footer {\n      height:  calc(100% - 70px) !important;\n    }\n\n"])), function (props) {
+  return props.width || '400px';
+}, _index["default"].Element);
+var ButtonContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    font-family: SFUIText-Regular;\n    display: flex;\n    justify-content:center;\n    padding: 10px 0;\n    background: #182738;\n    box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);\n    width: 100%;\n    bottom:0;\n    position: absolute;\n    opacity:0;\n    transition: opacity 50ms ease-in-out 250ms;\n    \n    .btn{\n        border-radius: 22px;\n        color: #FFFFFF;\n        font-size: 12px;\n        line-height: 12px;\n        text-align: center;\n        min-width: 150px;\n        text-transform: uppercase;\n        padding: 10px 0;\n        margin: 0 10px;\n        max-width: 150px;\n        cursor: pointer;\n        display:flex;\n        justify-content:center;\n        align-items:center;\n        \n        :hover{\n            color: ", ";\n        }\n    }\n\n    .default{\n        background: #303F51;\n\n        :hover{\n            color:", ";\n        }\n    }\n    \n    .primary {\n        color: rgb(12, 20, 29);\n        background: ", ";\n\n        :hover{\n            color: rgb(12, 20, 29);\n            transition: all 0.2s ease-in-out 0s;\n            box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;\n        }\n    }\n"])), function (props) {
   return _tokens.colors[props.theme].sideBar.themeColor;
 }, function (props) {
   return _tokens.colors[props.theme].sideBar.lightthemeColor;
@@ -82,12 +84,14 @@ var SideBar = exports["default"] = /*#__PURE__*/function (_Component) {
         sideBarButtonObject = _this$props.sideBarButtonObject,
         showSideBar = _this$props.showSideBar,
         loadingBtn = _this$props.loadingBtn,
-        theme = _this$props.theme;
+        theme = _this$props.theme,
+        width = _this$props.width;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SideBarOverlay, {
         open: showSideBar
       }), /*#__PURE__*/_react["default"].createElement(SideBarBlock, {
         theme: theme,
-        className: showSideBar ? "open" : "close"
+        width: width,
+        className: showSideBar ? 'open' : 'close'
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "sidebar-header"
       }, /*#__PURE__*/_react["default"].createElement("p", {
@@ -100,17 +104,17 @@ var SideBar = exports["default"] = /*#__PURE__*/function (_Component) {
         icon: "cross",
         iconBackground: false,
         onClick: function onClick() {
-          _this2.buttonClick("cancel");
+          _this2.buttonClick('cancel');
         }
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "bodyContainer ".concat(!sideBarButtonObject.length && "bodyContainer-without-footer")
+        className: "bodyContainer ".concat(!sideBarButtonObject.length && 'bodyContainer-without-footer')
       }, content), sideBarButtonObject && sideBarButtonObject.length ? /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
         theme: theme,
         className: "button-container"
       }, sideBarButtonObject.map(function (object) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: object.field,
-          className: "btn ".concat(object.type || "default"),
+          className: "btn ".concat(object.type || 'default'),
           onClick: function onClick() {
             _this2.buttonClick(object.field);
           }
@@ -123,7 +127,7 @@ var SideBar = exports["default"] = /*#__PURE__*/function (_Component) {
   }]);
 }(_react.Component);
 SideBar.propTypes = {
-  theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
   showSideBar: _propTypes["default"].bool,
   title: _propTypes["default"].string,
   content: _propTypes["default"].object,
@@ -132,5 +136,6 @@ SideBar.propTypes = {
   onButtonClick: _propTypes["default"].func
 };
 SideBar.defaultProps = {
-  theme: "dark"
+  theme: 'dark',
+  width: '400px'
 };