sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/index.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styled = require('styled-components');
 var recharts = require('recharts');
 var Skeleton = require('react-loading-skeleton');
 var framerMotion = require('framer-motion');
@@ -11,7 +10,6 @@ var framerMotion = require('framer-motion');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1167,7 +1165,1664 @@ if (process.env.NODE_ENV !== 'production') {
 var propTypesExports = propTypes.exports;
 var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
-const ButtonContainer = styled__default["default"].div`
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+  };
+  return __assign.apply(this, arguments);
+};
+
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+      if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+      }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function memoize(fn) {
+  var cache = Object.create(null);
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+
+var isPropValid = /* #__PURE__ */memoize(function (prop) {
+  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
+  /* o */ && prop.charCodeAt(1) === 110
+  /* n */ && prop.charCodeAt(2) < 91;
+}
+/* Z+1 */);
+
+var MS = '-ms-';
+var MOZ = '-moz-';
+var WEBKIT = '-webkit-';
+var COMMENT = 'comm';
+var RULESET = 'rule';
+var DECLARATION = 'decl';
+var IMPORT = '@import';
+var KEYFRAMES = '@keyframes';
+var LAYER = '@layer';
+
+/**
+ * @param {number}
+ * @return {number}
+ */
+var abs = Math.abs;
+
+/**
+ * @param {number}
+ * @return {string}
+ */
+var from = String.fromCharCode;
+
+/**
+ * @param {object}
+ * @return {object}
+ */
+var assign = Object.assign;
+
+/**
+ * @param {string} value
+ * @param {number} length
+ * @return {number}
+ */
+function hash(value, length) {
+  return charat(value, 0) ^ 45 ? (((length << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
+}
+
+/**
+ * @param {string} value
+ * @return {string}
+ */
+function trim(value) {
+  return value.trim();
+}
+
+/**
+ * @param {string} value
+ * @param {RegExp} pattern
+ * @return {string?}
+ */
+function match(value, pattern) {
+  return (value = pattern.exec(value)) ? value[0] : value;
+}
+
+/**
+ * @param {string} value
+ * @param {(string|RegExp)} pattern
+ * @param {string} replacement
+ * @return {string}
+ */
+function replace(value, pattern, replacement) {
+  return value.replace(pattern, replacement);
+}
+
+/**
+ * @param {string} value
+ * @param {string} search
+ * @param {number} position
+ * @return {number}
+ */
+function indexof(value, search, position) {
+  return value.indexOf(search, position);
+}
+
+/**
+ * @param {string} value
+ * @param {number} index
+ * @return {number}
+ */
+function charat(value, index) {
+  return value.charCodeAt(index) | 0;
+}
+
+/**
+ * @param {string} value
+ * @param {number} begin
+ * @param {number} end
+ * @return {string}
+ */
+function substr(value, begin, end) {
+  return value.slice(begin, end);
+}
+
+/**
+ * @param {string} value
+ * @return {number}
+ */
+function strlen(value) {
+  return value.length;
+}
+
+/**
+ * @param {any[]} value
+ * @return {number}
+ */
+function sizeof(value) {
+  return value.length;
+}
+
+/**
+ * @param {any} value
+ * @param {any[]} array
+ * @return {any}
+ */
+function append(value, array) {
+  return array.push(value), value;
+}
+
+/**
+ * @param {string[]} array
+ * @param {function} callback
+ * @return {string}
+ */
+function combine(array, callback) {
+  return array.map(callback).join('');
+}
+
+/**
+ * @param {string[]} array
+ * @param {RegExp} pattern
+ * @return {string[]}
+ */
+function filter(array, pattern) {
+  return array.filter(function (value) {
+    return !match(value, pattern);
+  });
+}
+
+var line = 1;
+var column = 1;
+var length = 0;
+var position = 0;
+var character = 0;
+var characters = '';
+
+/**
+ * @param {string} value
+ * @param {object | null} root
+ * @param {object | null} parent
+ * @param {string} type
+ * @param {string[] | string} props
+ * @param {object[] | string} children
+ * @param {object[]} siblings
+ * @param {number} length
+ */
+function node(value, root, parent, type, props, children, length, siblings) {
+  return {
+    value: value,
+    root: root,
+    parent: parent,
+    type: type,
+    props: props,
+    children: children,
+    line: line,
+    column: column,
+    length: length,
+    return: '',
+    siblings: siblings
+  };
+}
+
+/**
+ * @param {object} root
+ * @param {object} props
+ * @return {object}
+ */
+function copy(root, props) {
+  return assign(node('', null, null, '', null, null, 0, root.siblings), root, {
+    length: -root.length
+  }, props);
+}
+
+/**
+ * @param {object} root
+ */
+function lift(root) {
+  while (root.root) root = copy(root.root, {
+    children: [root]
+  });
+  append(root, root.siblings);
+}
+
+/**
+ * @return {number}
+ */
+function char() {
+  return character;
+}
+
+/**
+ * @return {number}
+ */
+function prev() {
+  character = position > 0 ? charat(characters, --position) : 0;
+  if (column--, character === 10) column = 1, line--;
+  return character;
+}
+
+/**
+ * @return {number}
+ */
+function next() {
+  character = position < length ? charat(characters, position++) : 0;
+  if (column++, character === 10) column = 1, line++;
+  return character;
+}
+
+/**
+ * @return {number}
+ */
+function peek() {
+  return charat(characters, position);
+}
+
+/**
+ * @return {number}
+ */
+function caret() {
+  return position;
+}
+
+/**
+ * @param {number} begin
+ * @param {number} end
+ * @return {string}
+ */
+function slice(begin, end) {
+  return substr(characters, begin, end);
+}
+
+/**
+ * @param {number} type
+ * @return {number}
+ */
+function token(type) {
+  switch (type) {
+    // \0 \t \n \r \s whitespace token
+    case 0:
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      return 5;
+    // ! + , / > @ ~ isolate token
+    case 33:
+    case 43:
+    case 44:
+    case 47:
+    case 62:
+    case 64:
+    case 126:
+    // ; { } breakpoint token
+    case 59:
+    case 123:
+    case 125:
+      return 4;
+    // : accompanied token
+    case 58:
+      return 3;
+    // " ' ( [ opening delimit token
+    case 34:
+    case 39:
+    case 40:
+    case 91:
+      return 2;
+    // ) ] closing delimit token
+    case 41:
+    case 93:
+      return 1;
+  }
+  return 0;
+}
+
+/**
+ * @param {string} value
+ * @return {any[]}
+ */
+function alloc(value) {
+  return line = column = 1, length = strlen(characters = value), position = 0, [];
+}
+
+/**
+ * @param {any} value
+ * @return {any}
+ */
+function dealloc(value) {
+  return characters = '', value;
+}
+
+/**
+ * @param {number} type
+ * @return {string}
+ */
+function delimit(type) {
+  return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)));
+}
+
+/**
+ * @param {number} type
+ * @return {string}
+ */
+function whitespace(type) {
+  while (character = peek()) if (character < 33) next();else break;
+  return token(type) > 2 || token(character) > 3 ? '' : ' ';
+}
+
+/**
+ * @param {number} index
+ * @param {number} count
+ * @return {string}
+ */
+function escaping(index, count) {
+  while (--count && next())
+  // not 0-9 A-F a-f
+  if (character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97) break;
+  return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32));
+}
+
+/**
+ * @param {number} type
+ * @return {number}
+ */
+function delimiter(type) {
+  while (next()) switch (character) {
+    // ] ) " '
+    case type:
+      return position;
+    // " '
+    case 34:
+    case 39:
+      if (type !== 34 && type !== 39) delimiter(character);
+      break;
+    // (
+    case 40:
+      if (type === 41) delimiter(type);
+      break;
+    // \
+    case 92:
+      next();
+      break;
+  }
+  return position;
+}
+
+/**
+ * @param {number} type
+ * @param {number} index
+ * @return {number}
+ */
+function commenter(type, index) {
+  while (next())
+  // //
+  if (type + character === 47 + 10) break;
+  // /*
+  else if (type + character === 42 + 42 && peek() === 47) break;
+  return '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next());
+}
+
+/**
+ * @param {number} index
+ * @return {string}
+ */
+function identifier(index) {
+  while (!token(peek())) next();
+  return slice(index, position);
+}
+
+/**
+ * @param {string} value
+ * @return {object[]}
+ */
+function compile(value) {
+  return dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value));
+}
+
+/**
+ * @param {string} value
+ * @param {object} root
+ * @param {object?} parent
+ * @param {string[]} rule
+ * @param {string[]} rules
+ * @param {string[]} rulesets
+ * @param {number[]} pseudo
+ * @param {number[]} points
+ * @param {string[]} declarations
+ * @return {object}
+ */
+function parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
+  var index = 0;
+  var offset = 0;
+  var length = pseudo;
+  var atrule = 0;
+  var property = 0;
+  var previous = 0;
+  var variable = 1;
+  var scanning = 1;
+  var ampersand = 1;
+  var character = 0;
+  var type = '';
+  var props = rules;
+  var children = rulesets;
+  var reference = rule;
+  var characters = type;
+  while (scanning) switch (previous = character, character = next()) {
+    // (
+    case 40:
+      if (previous != 108 && charat(characters, length - 1) == 58) {
+        if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f', abs(index ? points[index - 1] : 0)) != -1) ampersand = -1;
+        break;
+      }
+    // " ' [
+    case 34:
+    case 39:
+    case 91:
+      characters += delimit(character);
+      break;
+    // \t \n \r \s
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      characters += whitespace(previous);
+      break;
+    // \
+    case 92:
+      characters += escaping(caret() - 1, 7);
+      continue;
+    // /
+    case 47:
+      switch (peek()) {
+        case 42:
+        case 47:
+          append(comment(commenter(next(), caret()), root, parent, declarations), declarations);
+          break;
+        default:
+          characters += '/';
+      }
+      break;
+    // {
+    case 123 * variable:
+      points[index++] = strlen(characters) * ampersand;
+    // } ; \0
+    case 125 * variable:
+    case 59:
+    case 0:
+      switch (character) {
+        // \0 }
+        case 0:
+        case 125:
+          scanning = 0;
+        // ;
+        case 59 + offset:
+          if (ampersand == -1) characters = replace(characters, /\f/g, '');
+          if (property > 0 && strlen(characters) - length) append(property > 32 ? declaration(characters + ';', rule, parent, length - 1, declarations) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2, declarations), declarations);
+          break;
+        // @ ;
+        case 59:
+          characters += ';';
+        // { rule/at-rule
+        default:
+          append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length, rulesets), rulesets);
+          if (character === 123) if (offset === 0) parse(characters, root, reference, reference, props, rulesets, length, points, children);else switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
+            // d l m s
+            case 100:
+            case 108:
+            case 109:
+            case 115:
+              parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length, children), children), rules, children, length, points, rule ? props : children);
+              break;
+            default:
+              parse(characters, reference, reference, reference, [''], children, 0, points, children);
+          }
+      }
+      index = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo;
+      break;
+    // :
+    case 58:
+      length = 1 + strlen(characters), property = previous;
+    default:
+      if (variable < 1) if (character == 123) --variable;else if (character == 125 && variable++ == 0 && prev() == 125) continue;
+      switch (characters += from(character), character * variable) {
+        // &
+        case 38:
+          ampersand = offset > 0 ? 1 : (characters += '\f', -1);
+          break;
+        // ,
+        case 44:
+          points[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1;
+          break;
+        // @
+        case 64:
+          // -
+          if (peek() === 45) characters += delimit(next());
+          atrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++;
+          break;
+        // -
+        case 45:
+          if (previous === 45 && strlen(characters) == 2) variable = 0;
+      }
+  }
+  return rulesets;
+}
+
+/**
+ * @param {string} value
+ * @param {object} root
+ * @param {object?} parent
+ * @param {number} index
+ * @param {number} offset
+ * @param {string[]} rules
+ * @param {number[]} points
+ * @param {string} type
+ * @param {string[]} props
+ * @param {string[]} children
+ * @param {number} length
+ * @param {object[]} siblings
+ * @return {object}
+ */
+function ruleset(value, root, parent, index, offset, rules, points, type, props, children, length, siblings) {
+  var post = offset - 1;
+  var rule = offset === 0 ? rules : [''];
+  var size = sizeof(rule);
+  for (var i = 0, j = 0, k = 0; i < index; ++i) for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x) if (z = trim(j > 0 ? rule[x] + ' ' + y : replace(y, /&\f/g, rule[x]))) props[k++] = z;
+  return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length, siblings);
+}
+
+/**
+ * @param {number} value
+ * @param {object} root
+ * @param {object?} parent
+ * @param {object[]} siblings
+ * @return {object}
+ */
+function comment(value, root, parent, siblings) {
+  return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0, siblings);
+}
+
+/**
+ * @param {string} value
+ * @param {object} root
+ * @param {object?} parent
+ * @param {number} length
+ * @param {object[]} siblings
+ * @return {object}
+ */
+function declaration(value, root, parent, length, siblings) {
+  return node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length, siblings);
+}
+
+/**
+ * @param {string} value
+ * @param {number} length
+ * @param {object[]} children
+ * @return {string}
+ */
+function prefix(value, length, children) {
+  switch (hash(value, length)) {
+    // color-adjust
+    case 5103:
+      return WEBKIT + 'print-' + value + value;
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921:
+    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return WEBKIT + value + value;
+    // tab-size
+    case 4789:
+      return MOZ + value + value;
+    // appearance, user-select, transform, hyphens, text-size-adjust
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return WEBKIT + value + MOZ + value + MS + value + value;
+    // writing-mode
+    case 5936:
+      switch (charat(value, length + 11)) {
+        // vertical-l(r)
+        case 114:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
+        // vertical-r(l)
+        case 108:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
+        // horizontal(-)tb
+        case 45:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
+        // default: fallthrough to below
+      }
+    // flex, flex-direction, scroll-snap-type, writing-mode
+    case 6828:
+    case 4268:
+    case 2903:
+      return WEBKIT + value + MS + value + value;
+    // order
+    case 6165:
+      return WEBKIT + value + MS + 'flex-' + value + value;
+    // align-items
+    case 5187:
+      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;
+    // align-self
+    case 5443:
+      return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/g, '') + (!match(value, /flex-|baseline/) ? MS + 'grid-row-' + replace(value, /flex-|-self/g, '') : '') + value;
+    // align-content
+    case 4675:
+      return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/g, '') + value;
+    // flex-shrink
+    case 5548:
+      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;
+    // flex-basis
+    case 5292:
+      return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;
+    // flex-grow
+    case 6060:
+      return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;
+    // transition
+    case 4554:
+      return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;
+    // cursor
+    case 6187:
+      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;
+    // background, background-image
+    case 5495:
+    case 3959:
+      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1');
+    // justify-content
+    case 4968:
+      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;
+    // justify-self
+    case 4200:
+      if (!match(value, /flex-|baseline/)) return MS + 'grid-column-align' + substr(value, length) + value;
+      break;
+    // grid-template-(columns|rows)
+    case 2592:
+    case 3360:
+      return MS + replace(value, 'template-', '') + value;
+    // grid-(row|column)-start
+    case 4384:
+    case 3616:
+      if (children && children.some(function (element, index) {
+        return length = index, match(element.props, /grid-\w+-end/);
+      })) {
+        return ~indexof(value + (children = children[length].value), 'span', 0) ? value : MS + replace(value, '-start', '') + value + MS + 'grid-row-span:' + (~indexof(children, 'span', 0) ? match(children, /\d+/) : +match(children, /\d+/) - +match(value, /\d+/)) + ';';
+      }
+      return MS + replace(value, '-start', '') + value;
+    // grid-(row|column)-end
+    case 4896:
+    case 4128:
+      return children && children.some(function (element) {
+        return match(element.props, /grid-\w+-start/);
+      }) ? value : MS + replace(replace(value, '-end', '-span'), 'span ', '') + value;
+    // (margin|padding)-inline-(start|end)
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
+        // (m)ax-content, (m)in-content
+        case 109:
+          // -
+          if (charat(value, length + 4) !== 45) break;
+        // (f)ill-available, (f)it-content
+        case 102:
+          return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
+        // (s)tretch
+        case 115:
+          return ~indexof(value, 'stretch', 0) ? prefix(replace(value, 'stretch', 'fill-available'), length, children) + value : value;
+      }
+      break;
+    // grid-(column|row)
+    case 5152:
+    case 5920:
+      return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function (_, a, b, c, d, e, f) {
+        return MS + a + ':' + b + f + (c ? MS + a + '-span:' + (d ? e : +e - +b) + f : '') + value;
+      });
+    // position: sticky
+    case 4949:
+      // stick(y)?
+      if (charat(value, length + 6) === 121) return replace(value, ':', ':' + WEBKIT) + value;
+      break;
+    // display: (flex|inline-flex|grid|inline-grid)
+    case 6444:
+      switch (charat(value, charat(value, 14) === 45 ? 18 : 11)) {
+        // (inline-)?fle(x)
+        case 120:
+          return replace(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;
+        // (inline-)?gri(d)
+        case 100:
+          return replace(value, ':', ':' + MS) + value;
+      }
+      break;
+    // scroll-margin, scroll-margin-(top|right|bottom|left)
+    case 5719:
+    case 2647:
+    case 2135:
+    case 3927:
+    case 2391:
+      return replace(value, 'scroll-', 'scroll-snap-') + value;
+  }
+  return value;
+}
+
+/**
+ * @param {object[]} children
+ * @param {function} callback
+ * @return {string}
+ */
+function serialize(children, callback) {
+  var output = '';
+  for (var i = 0; i < children.length; i++) output += callback(children[i], i, children, callback) || '';
+  return output;
+}
+
+/**
+ * @param {object} element
+ * @param {number} index
+ * @param {object[]} children
+ * @param {function} callback
+ * @return {string}
+ */
+function stringify(element, index, children, callback) {
+  switch (element.type) {
+    case LAYER:
+      if (element.children.length) break;
+    case IMPORT:
+    case DECLARATION:
+      return element.return = element.return || element.value;
+    case COMMENT:
+      return '';
+    case KEYFRAMES:
+      return element.return = element.value + '{' + serialize(element.children, callback) + '}';
+    case RULESET:
+      if (!strlen(element.value = element.props.join(','))) return '';
+  }
+  return strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : '';
+}
+
+/**
+ * @param {function[]} collection
+ * @return {function}
+ */
+function middleware(collection) {
+  var length = sizeof(collection);
+  return function (element, index, children, callback) {
+    var output = '';
+    for (var i = 0; i < length; i++) output += collection[i](element, index, children, callback) || '';
+    return output;
+  };
+}
+
+/**
+ * @param {function} callback
+ * @return {function}
+ */
+function rulesheet(callback) {
+  return function (element) {
+    if (!element.root) if (element = element.return) callback(element);
+  };
+}
+
+/**
+ * @param {object} element
+ * @param {number} index
+ * @param {object[]} children
+ * @param {function} callback
+ */
+function prefixer(element, index, children, callback) {
+  if (element.length > -1) if (!element.return) switch (element.type) {
+    case DECLARATION:
+      element.return = prefix(element.value, element.length, children);
+      return;
+    case KEYFRAMES:
+      return serialize([copy(element, {
+        value: replace(element.value, '@', '@' + WEBKIT)
+      })], callback);
+    case RULESET:
+      if (element.length) return combine(children = element.props, function (value) {
+        switch (match(value, callback = /(::plac\w+|:read-\w+)/)) {
+          // :read-(only|write)
+          case ':read-only':
+          case ':read-write':
+            lift(copy(element, {
+              props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
+            }));
+            lift(copy(element, {
+              props: [value]
+            }));
+            assign(element, {
+              props: filter(children, callback)
+            });
+            break;
+          // :placeholder
+          case '::placeholder':
+            lift(copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]
+            }));
+            lift(copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
+            }));
+            lift(copy(element, {
+              props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
+            }));
+            lift(copy(element, {
+              props: [value]
+            }));
+            assign(element, {
+              props: filter(children, callback)
+            });
+            break;
+        }
+        return '';
+      });
+  }
+}
+
+var unitlessKeys = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+
+var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled",
+  m = "active",
+  y = "data-styled-version",
+  v = "6.1.15",
+  g = "/*!sc*/\n",
+  S = "undefined" != typeof window && "HTMLElement" in window,
+  w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : "production" !== process.env.NODE_ENV),
+  E = /invalid hook call/i,
+  N = new Set(),
+  P = function (t, n) {
+    if ("production" !== process.env.NODE_ENV) {
+      var r = n ? ' with the id of "'.concat(n, '"') : "",
+        s = "The component ".concat(t).concat(r, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",
+        i = console.error;
+      try {
+        var a = !0;
+        console.error = function (t) {
+          for (var n = [], r = 1; r < arguments.length; r++) n[r - 1] = arguments[r];
+          E.test(t) ? (a = !1, N.delete(s)) : i.apply(void 0, __spreadArray([t], n, !1));
+        }, React.useRef(), a && !N.has(s) && (console.warn(s), N.add(s));
+      } catch (e) {
+        E.test(e.message) && N.delete(s);
+      } finally {
+        console.error = i;
+      }
+    }
+  },
+  _ = Object.freeze([]),
+  C = Object.freeze({});
+function I(e, t, n) {
+  return void 0 === n && (n = C), e.theme !== n.theme && e.theme || t || n.theme;
+}
+var A = new Set(["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "u", "ul", "use", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "text", "tspan"]),
+  O = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,
+  D = /(^-|-$)/g;
+function R(e) {
+  return e.replace(O, "-").replace(D, "");
+}
+var T = /(a)(d)/gi,
+  k = 52,
+  j = function (e) {
+    return String.fromCharCode(e + (e > 25 ? 39 : 97));
+  };
+function x(e) {
+  var t,
+    n = "";
+  for (t = Math.abs(e); t > k; t = t / k | 0) n = j(t % k) + n;
+  return (j(t % k) + n).replace(T, "$1-$2");
+}
+var V,
+  F = 5381,
+  M = function (e, t) {
+    for (var n = t.length; n;) e = 33 * e ^ t.charCodeAt(--n);
+    return e;
+  },
+  z = function (e) {
+    return M(F, e);
+  };
+function $(e) {
+  return x(z(e) >>> 0);
+}
+function B(e) {
+  return "production" !== process.env.NODE_ENV && "string" == typeof e && e || e.displayName || e.name || "Component";
+}
+function L(e) {
+  return "string" == typeof e && ("production" === process.env.NODE_ENV || e.charAt(0) === e.charAt(0).toLowerCase());
+}
+var G = "function" == typeof Symbol && Symbol.for,
+  Y = G ? Symbol.for("react.memo") : 60115,
+  q = G ? Symbol.for("react.forward_ref") : 60112,
+  W = {
+    childContextTypes: !0,
+    contextType: !0,
+    contextTypes: !0,
+    defaultProps: !0,
+    displayName: !0,
+    getDefaultProps: !0,
+    getDerivedStateFromError: !0,
+    getDerivedStateFromProps: !0,
+    mixins: !0,
+    propTypes: !0,
+    type: !0
+  },
+  H = {
+    name: !0,
+    length: !0,
+    prototype: !0,
+    caller: !0,
+    callee: !0,
+    arguments: !0,
+    arity: !0
+  },
+  U = {
+    $$typeof: !0,
+    compare: !0,
+    defaultProps: !0,
+    displayName: !0,
+    propTypes: !0,
+    type: !0
+  },
+  J = ((V = {})[q] = {
+    $$typeof: !0,
+    render: !0,
+    defaultProps: !0,
+    displayName: !0,
+    propTypes: !0
+  }, V[Y] = U, V);
+function X(e) {
+  return ("type" in (t = e) && t.type.$$typeof) === Y ? U : "$$typeof" in e ? J[e.$$typeof] : W;
+  var t;
+}
+var Z = Object.defineProperty,
+  K = Object.getOwnPropertyNames,
+  Q = Object.getOwnPropertySymbols,
+  ee = Object.getOwnPropertyDescriptor,
+  te = Object.getPrototypeOf,
+  ne = Object.prototype;
+function re(e, t, n) {
+  if ("string" != typeof t) {
+    if (ne) {
+      var r = te(t);
+      r && r !== ne && re(e, r, n);
+    }
+    var o = K(t);
+    Q && (o = o.concat(Q(t)));
+    for (var s = X(e), i = X(t), a = 0; a < o.length; ++a) {
+      var c = o[a];
+      if (!(c in H || n && n[c] || i && c in i || s && c in s)) {
+        var l = ee(t, c);
+        try {
+          Z(e, c, l);
+        } catch (e) {}
+      }
+    }
+  }
+  return e;
+}
+function oe(e) {
+  return "function" == typeof e;
+}
+function se(e) {
+  return "object" == typeof e && "styledComponentId" in e;
+}
+function ie(e, t) {
+  return e && t ? "".concat(e, " ").concat(t) : e || t || "";
+}
+function ae(e, t) {
+  if (0 === e.length) return "";
+  for (var n = e[0], r = 1; r < e.length; r++) n += t ? t + e[r] : e[r];
+  return n;
+}
+function ce(e) {
+  return null !== e && "object" == typeof e && e.constructor.name === Object.name && !("props" in e && e.$$typeof);
+}
+function le(e, t, n) {
+  if (void 0 === n && (n = !1), !n && !ce(e) && !Array.isArray(e)) return t;
+  if (Array.isArray(t)) for (var r = 0; r < t.length; r++) e[r] = le(e[r], t[r]);else if (ce(t)) for (var r in t) e[r] = le(e[r], t[r]);
+  return e;
+}
+function ue(e, t) {
+  Object.defineProperty(e, "toString", {
+    value: t
+  });
+}
+var pe = "production" !== process.env.NODE_ENV ? {
+  1: "Cannot create styled-component for component: %s.\n\n",
+  2: "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",
+  3: "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",
+  4: "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",
+  5: "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",
+  6: "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",
+  7: 'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',
+  8: 'ThemeProvider: Please make your "theme" prop an object.\n\n',
+  9: "Missing document `<head>`\n\n",
+  10: "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",
+  11: "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",
+  12: "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",
+  13: "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",
+  14: 'ThemeProvider: "theme" prop is required.\n\n',
+  15: "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",
+  16: "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",
+  17: "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",
+  18: "ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"
+} : {};
+function de() {
+  for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t];
+  for (var n = e[0], r = [], o = 1, s = e.length; o < s; o += 1) r.push(e[o]);
+  return r.forEach(function (e) {
+    n = n.replace(/%[a-z]/, e);
+  }), n;
+}
+function he(t) {
+  for (var n = [], r = 1; r < arguments.length; r++) n[r - 1] = arguments[r];
+  return "production" === process.env.NODE_ENV ? new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t, " for more information.").concat(n.length > 0 ? " Args: ".concat(n.join(", ")) : "")) : new Error(de.apply(void 0, __spreadArray([pe[t]], n, !1)).trim());
+}
+var fe = function () {
+    function e(e) {
+      this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e;
+    }
+    return e.prototype.indexOfGroup = function (e) {
+      for (var t = 0, n = 0; n < e; n++) t += this.groupSizes[n];
+      return t;
+    }, e.prototype.insertRules = function (e, t) {
+      if (e >= this.groupSizes.length) {
+        for (var n = this.groupSizes, r = n.length, o = r; e >= o;) if ((o <<= 1) < 0) throw he(16, "".concat(e));
+        this.groupSizes = new Uint32Array(o), this.groupSizes.set(n), this.length = o;
+        for (var s = r; s < o; s++) this.groupSizes[s] = 0;
+      }
+      for (var i = this.indexOfGroup(e + 1), a = (s = 0, t.length); s < a; s++) this.tag.insertRule(i, t[s]) && (this.groupSizes[e]++, i++);
+    }, e.prototype.clearGroup = function (e) {
+      if (e < this.length) {
+        var t = this.groupSizes[e],
+          n = this.indexOfGroup(e),
+          r = n + t;
+        this.groupSizes[e] = 0;
+        for (var o = n; o < r; o++) this.tag.deleteRule(n);
+      }
+    }, e.prototype.getGroup = function (e) {
+      var t = "";
+      if (e >= this.length || 0 === this.groupSizes[e]) return t;
+      for (var n = this.groupSizes[e], r = this.indexOfGroup(e), o = r + n, s = r; s < o; s++) t += "".concat(this.tag.getRule(s)).concat(g);
+      return t;
+    }, e;
+  }(),
+  me = 1 << 30,
+  ye = new Map(),
+  ve = new Map(),
+  ge = 1,
+  Se = function (e) {
+    if (ye.has(e)) return ye.get(e);
+    for (; ve.has(ge);) ge++;
+    var t = ge++;
+    if ("production" !== process.env.NODE_ENV && ((0 | t) < 0 || t > me)) throw he(16, "".concat(t));
+    return ye.set(e, t), ve.set(t, e), t;
+  },
+  we = function (e, t) {
+    ge = t + 1, ye.set(e, t), ve.set(t, e);
+  },
+  be = "style[".concat(f, "][").concat(y, '="').concat(v, '"]'),
+  Ee = new RegExp("^".concat(f, '\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),
+  Ne = function (e, t, n) {
+    for (var r, o = n.split(","), s = 0, i = o.length; s < i; s++) (r = o[s]) && e.registerName(t, r);
+  },
+  Pe = function (e, t) {
+    for (var n, r = (null !== (n = t.textContent) && void 0 !== n ? n : "").split(g), o = [], s = 0, i = r.length; s < i; s++) {
+      var a = r[s].trim();
+      if (a) {
+        var c = a.match(Ee);
+        if (c) {
+          var l = 0 | parseInt(c[1], 10),
+            u = c[2];
+          0 !== l && (we(u, l), Ne(e, u, c[3]), e.getTag().insertRules(l, o)), o.length = 0;
+        } else o.push(a);
+      }
+    }
+  },
+  _e = function (e) {
+    for (var t = document.querySelectorAll(be), n = 0, r = t.length; n < r; n++) {
+      var o = t[n];
+      o && o.getAttribute(f) !== m && (Pe(e, o), o.parentNode && o.parentNode.removeChild(o));
+    }
+  };
+function Ce() {
+  return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : null;
+}
+var Ie = function (e) {
+    var t = document.head,
+      n = e || t,
+      r = document.createElement("style"),
+      o = function (e) {
+        var t = Array.from(e.querySelectorAll("style[".concat(f, "]")));
+        return t[t.length - 1];
+      }(n),
+      s = void 0 !== o ? o.nextSibling : null;
+    r.setAttribute(f, m), r.setAttribute(y, v);
+    var i = Ce();
+    return i && r.setAttribute("nonce", i), n.insertBefore(r, s), r;
+  },
+  Ae = function () {
+    function e(e) {
+      this.element = Ie(e), this.element.appendChild(document.createTextNode("")), this.sheet = function (e) {
+        if (e.sheet) return e.sheet;
+        for (var t = document.styleSheets, n = 0, r = t.length; n < r; n++) {
+          var o = t[n];
+          if (o.ownerNode === e) return o;
+        }
+        throw he(17);
+      }(this.element), this.length = 0;
+    }
+    return e.prototype.insertRule = function (e, t) {
+      try {
+        return this.sheet.insertRule(t, e), this.length++, !0;
+      } catch (e) {
+        return !1;
+      }
+    }, e.prototype.deleteRule = function (e) {
+      this.sheet.deleteRule(e), this.length--;
+    }, e.prototype.getRule = function (e) {
+      var t = this.sheet.cssRules[e];
+      return t && t.cssText ? t.cssText : "";
+    }, e;
+  }(),
+  Oe = function () {
+    function e(e) {
+      this.element = Ie(e), this.nodes = this.element.childNodes, this.length = 0;
+    }
+    return e.prototype.insertRule = function (e, t) {
+      if (e <= this.length && e >= 0) {
+        var n = document.createTextNode(t);
+        return this.element.insertBefore(n, this.nodes[e] || null), this.length++, !0;
+      }
+      return !1;
+    }, e.prototype.deleteRule = function (e) {
+      this.element.removeChild(this.nodes[e]), this.length--;
+    }, e.prototype.getRule = function (e) {
+      return e < this.length ? this.nodes[e].textContent : "";
+    }, e;
+  }(),
+  De = function () {
+    function e(e) {
+      this.rules = [], this.length = 0;
+    }
+    return e.prototype.insertRule = function (e, t) {
+      return e <= this.length && (this.rules.splice(e, 0, t), this.length++, !0);
+    }, e.prototype.deleteRule = function (e) {
+      this.rules.splice(e, 1), this.length--;
+    }, e.prototype.getRule = function (e) {
+      return e < this.length ? this.rules[e] : "";
+    }, e;
+  }(),
+  Re = S,
+  Te = {
+    isServer: !S,
+    useCSSOMInjection: !w
+  },
+  ke = function () {
+    function e(e, n, r) {
+      void 0 === e && (e = C), void 0 === n && (n = {});
+      var o = this;
+      this.options = __assign(__assign({}, Te), e), this.gs = n, this.names = new Map(r), this.server = !!e.isServer, !this.server && S && Re && (Re = !1, _e(this)), ue(this, function () {
+        return function (e) {
+          for (var t = e.getTag(), n = t.length, r = "", o = function (n) {
+              var o = function (e) {
+                return ve.get(e);
+              }(n);
+              if (void 0 === o) return "continue";
+              var s = e.names.get(o),
+                i = t.getGroup(n);
+              if (void 0 === s || !s.size || 0 === i.length) return "continue";
+              var a = "".concat(f, ".g").concat(n, '[id="').concat(o, '"]'),
+                c = "";
+              void 0 !== s && s.forEach(function (e) {
+                e.length > 0 && (c += "".concat(e, ","));
+              }), r += "".concat(i).concat(a, '{content:"').concat(c, '"}').concat(g);
+            }, s = 0; s < n; s++) o(s);
+          return r;
+        }(o);
+      });
+    }
+    return e.registerId = function (e) {
+      return Se(e);
+    }, e.prototype.rehydrate = function () {
+      !this.server && S && _e(this);
+    }, e.prototype.reconstructWithOptions = function (n, r) {
+      return void 0 === r && (r = !0), new e(__assign(__assign({}, this.options), n), this.gs, r && this.names || void 0);
+    }, e.prototype.allocateGSInstance = function (e) {
+      return this.gs[e] = (this.gs[e] || 0) + 1;
+    }, e.prototype.getTag = function () {
+      return this.tag || (this.tag = (e = function (e) {
+        var t = e.useCSSOMInjection,
+          n = e.target;
+        return e.isServer ? new De(n) : t ? new Ae(n) : new Oe(n);
+      }(this.options), new fe(e)));
+      var e;
+    }, e.prototype.hasNameForId = function (e, t) {
+      return this.names.has(e) && this.names.get(e).has(t);
+    }, e.prototype.registerName = function (e, t) {
+      if (Se(e), this.names.has(e)) this.names.get(e).add(t);else {
+        var n = new Set();
+        n.add(t), this.names.set(e, n);
+      }
+    }, e.prototype.insertRules = function (e, t, n) {
+      this.registerName(e, t), this.getTag().insertRules(Se(e), n);
+    }, e.prototype.clearNames = function (e) {
+      this.names.has(e) && this.names.get(e).clear();
+    }, e.prototype.clearRules = function (e) {
+      this.getTag().clearGroup(Se(e)), this.clearNames(e);
+    }, e.prototype.clearTag = function () {
+      this.tag = void 0;
+    }, e;
+  }(),
+  je = /&/g,
+  xe = /^\s*\/\/.*$/gm;
+function Ve(e, t) {
+  return e.map(function (e) {
+    return "rule" === e.type && (e.value = "".concat(t, " ").concat(e.value), e.value = e.value.replaceAll(",", ",".concat(t, " ")), e.props = e.props.map(function (e) {
+      return "".concat(t, " ").concat(e);
+    })), Array.isArray(e.children) && "@keyframes" !== e.type && (e.children = Ve(e.children, t)), e;
+  });
+}
+function Fe(e) {
+  var t,
+    n,
+    r,
+    o = void 0 === e ? C : e,
+    s = o.options,
+    i = void 0 === s ? C : s,
+    a = o.plugins,
+    c = void 0 === a ? _ : a,
+    l = function (e, r, o) {
+      return o.startsWith(n) && o.endsWith(n) && o.replaceAll(n, "").length > 0 ? ".".concat(t) : e;
+    },
+    u = c.slice();
+  u.push(function (e) {
+    e.type === RULESET && e.value.includes("&") && (e.props[0] = e.props[0].replace(je, n).replace(r, l));
+  }), i.prefix && u.push(prefixer), u.push(stringify);
+  var p = function (e, o, s, a) {
+    void 0 === o && (o = ""), void 0 === s && (s = ""), void 0 === a && (a = "&"), t = a, n = o, r = new RegExp("\\".concat(n, "\\b"), "g");
+    var c = e.replace(xe, ""),
+      l = compile(s || o ? "".concat(s, " ").concat(o, " { ").concat(c, " }") : c);
+    i.namespace && (l = Ve(l, i.namespace));
+    var p = [];
+    return serialize(l, middleware(u.concat(rulesheet(function (e) {
+      return p.push(e);
+    })))), p;
+  };
+  return p.hash = c.length ? c.reduce(function (e, t) {
+    return t.name || he(15), M(e, t.name);
+  }, F).toString() : "", p;
+}
+var Me = new ke(),
+  ze = Fe(),
+  $e = /*#__PURE__*/React__default["default"].createContext({
+    shouldForwardProp: void 0,
+    styleSheet: Me,
+    stylis: ze
+  });
+  $e.Consumer;
+function Ge() {
+  return React.useContext($e);
+}
+var qe = function () {
+    function e(e, t) {
+      var n = this;
+      this.inject = function (e, t) {
+        void 0 === t && (t = ze);
+        var r = n.name + t.hash;
+        e.hasNameForId(n.id, r) || e.insertRules(n.id, r, t(n.rules, r, "@keyframes"));
+      }, this.name = e, this.id = "sc-keyframes-".concat(e), this.rules = t, ue(this, function () {
+        throw he(12, String(n.name));
+      });
+    }
+    return e.prototype.getName = function (e) {
+      return void 0 === e && (e = ze), this.name + e.hash;
+    }, e;
+  }(),
+  We = function (e) {
+    return e >= "A" && e <= "Z";
+  };
+function He(e) {
+  for (var t = "", n = 0; n < e.length; n++) {
+    var r = e[n];
+    if (1 === n && "-" === r && "-" === e[0]) return e;
+    We(r) ? t += "-" + r.toLowerCase() : t += r;
+  }
+  return t.startsWith("ms-") ? "-" + t : t;
+}
+var Ue = function (e) {
+    return null == e || !1 === e || "" === e;
+  },
+  Je = function (t) {
+    var n,
+      r,
+      o = [];
+    for (var s in t) {
+      var i = t[s];
+      t.hasOwnProperty(s) && !Ue(i) && (Array.isArray(i) && i.isCss || oe(i) ? o.push("".concat(He(s), ":"), i, ";") : ce(i) ? o.push.apply(o, __spreadArray(__spreadArray(["".concat(s, " {")], Je(i), !1), ["}"], !1)) : o.push("".concat(He(s), ": ").concat((n = s, null == (r = i) || "boolean" == typeof r || "" === r ? "" : "number" != typeof r || 0 === r || n in unitlessKeys || n.startsWith("--") ? String(r).trim() : "".concat(r, "px")), ";")));
+    }
+    return o;
+  };
+function Xe(e, t, n, r) {
+  if (Ue(e)) return [];
+  if (se(e)) return [".".concat(e.styledComponentId)];
+  if (oe(e)) {
+    if (!oe(s = e) || s.prototype && s.prototype.isReactComponent || !t) return [e];
+    var o = e(t);
+    return "production" === process.env.NODE_ENV || "object" != typeof o || Array.isArray(o) || o instanceof qe || ce(o) || null === o || console.error("".concat(B(e), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")), Xe(o, t, n, r);
+  }
+  var s;
+  return e instanceof qe ? n ? (e.inject(n, r), [e.getName(r)]) : [e] : ce(e) ? Je(e) : Array.isArray(e) ? Array.prototype.concat.apply(_, e.map(function (e) {
+    return Xe(e, t, n, r);
+  })) : [e.toString()];
+}
+function Ze(e) {
+  for (var t = 0; t < e.length; t += 1) {
+    var n = e[t];
+    if (oe(n) && !se(n)) return !1;
+  }
+  return !0;
+}
+var Ke = z(v),
+  Qe = function () {
+    function e(e, t, n) {
+      this.rules = e, this.staticRulesId = "", this.isStatic = "production" === process.env.NODE_ENV && (void 0 === n || n.isStatic) && Ze(e), this.componentId = t, this.baseHash = M(Ke, t), this.baseStyle = n, ke.registerId(t);
+    }
+    return e.prototype.generateAndInjectStyles = function (e, t, n) {
+      var r = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e, t, n) : "";
+      if (this.isStatic && !n.hash) {
+        if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId)) r = ie(r, this.staticRulesId);else {
+          var o = ae(Xe(this.rules, e, t, n)),
+            s = x(M(this.baseHash, o) >>> 0);
+          if (!t.hasNameForId(this.componentId, s)) {
+            var i = n(o, ".".concat(s), void 0, this.componentId);
+            t.insertRules(this.componentId, s, i);
+          }
+          r = ie(r, s), this.staticRulesId = s;
+        }
+      } else {
+        for (var a = M(this.baseHash, n.hash), c = "", l = 0; l < this.rules.length; l++) {
+          var u = this.rules[l];
+          if ("string" == typeof u) c += u, "production" !== process.env.NODE_ENV && (a = M(a, u));else if (u) {
+            var p = ae(Xe(u, e, t, n));
+            a = M(a, p + l), c += p;
+          }
+        }
+        if (c) {
+          var d = x(a >>> 0);
+          t.hasNameForId(this.componentId, d) || t.insertRules(this.componentId, d, n(c, ".".concat(d), void 0, this.componentId)), r = ie(r, d);
+        }
+      }
+      return r;
+    }, e;
+  }(),
+  et = /*#__PURE__*/React__default["default"].createContext(void 0);
+  et.Consumer;
+var ot = {},
+  st = new Set();
+function it(e, o, s) {
+  var i = se(e),
+    a = e,
+    c = !L(e),
+    p = o.attrs,
+    d = void 0 === p ? _ : p,
+    h = o.componentId,
+    f = void 0 === h ? function (e, t) {
+      var n = "string" != typeof e ? "sc" : R(e);
+      ot[n] = (ot[n] || 0) + 1;
+      var r = "".concat(n, "-").concat($(v + n + ot[n]));
+      return t ? "".concat(t, "-").concat(r) : r;
+    }(o.displayName, o.parentComponentId) : h,
+    m = o.displayName,
+    y = void 0 === m ? function (e) {
+      return L(e) ? "styled.".concat(e) : "Styled(".concat(B(e), ")");
+    }(e) : m,
+    g = o.displayName && o.componentId ? "".concat(R(o.displayName), "-").concat(o.componentId) : o.componentId || f,
+    S = i && a.attrs ? a.attrs.concat(d).filter(Boolean) : d,
+    w = o.shouldForwardProp;
+  if (i && a.shouldForwardProp) {
+    var b = a.shouldForwardProp;
+    if (o.shouldForwardProp) {
+      var E = o.shouldForwardProp;
+      w = function (e, t) {
+        return b(e, t) && E(e, t);
+      };
+    } else w = b;
+  }
+  var N = new Qe(s, g, i ? a.componentStyle : void 0);
+  function O(e, o) {
+    return function (e, o, s) {
+      var i = e.attrs,
+        a = e.componentStyle,
+        c = e.defaultProps,
+        p = e.foldedComponentIds,
+        d = e.styledComponentId,
+        h = e.target,
+        f = React__default["default"].useContext(et),
+        m = Ge(),
+        y = e.shouldForwardProp || m.shouldForwardProp;
+      "production" !== process.env.NODE_ENV && React.useDebugValue(d);
+      var v = I(o, f, c) || C,
+        g = function (e, n, r) {
+          for (var o, s = __assign(__assign({}, n), {
+              className: void 0,
+              theme: r
+            }), i = 0; i < e.length; i += 1) {
+            var a = oe(o = e[i]) ? o(s) : o;
+            for (var c in a) s[c] = "className" === c ? ie(s[c], a[c]) : "style" === c ? __assign(__assign({}, s[c]), a[c]) : a[c];
+          }
+          return n.className && (s.className = ie(s.className, n.className)), s;
+        }(i, o, v),
+        S = g.as || h,
+        w = {};
+      for (var b in g) void 0 === g[b] || "$" === b[0] || "as" === b || "theme" === b && g.theme === v || ("forwardedAs" === b ? w.as = g.forwardedAs : y && !y(b, S) || (w[b] = g[b], y || "development" !== process.env.NODE_ENV || isPropValid(b) || st.has(b) || !A.has(S) || (st.add(b), console.warn('styled-components: it looks like an unknown prop "'.concat(b, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
+      var E = function (e, t) {
+        var n = Ge(),
+          r = e.generateAndInjectStyles(t, n.styleSheet, n.stylis);
+        return "production" !== process.env.NODE_ENV && React.useDebugValue(r), r;
+      }(a, g);
+      "production" !== process.env.NODE_ENV && e.warnTooManyClasses && e.warnTooManyClasses(E);
+      var N = ie(p, d);
+      return E && (N += " " + E), g.className && (N += " " + g.className), w[L(S) && !A.has(S) ? "class" : "className"] = N, s && (w.ref = s), /*#__PURE__*/React.createElement(S, w);
+    }(D, e, o);
+  }
+  O.displayName = y;
+  var D = /*#__PURE__*/React__default["default"].forwardRef(O);
+  return D.attrs = S, D.componentStyle = N, D.displayName = y, D.shouldForwardProp = w, D.foldedComponentIds = i ? ie(a.foldedComponentIds, a.styledComponentId) : "", D.styledComponentId = g, D.target = i ? a.target : e, Object.defineProperty(D, "defaultProps", {
+    get: function () {
+      return this._foldedDefaultProps;
+    },
+    set: function (e) {
+      this._foldedDefaultProps = i ? function (e) {
+        for (var t = [], n = 1; n < arguments.length; n++) t[n - 1] = arguments[n];
+        for (var r = 0, o = t; r < o.length; r++) le(e, o[r], !0);
+        return e;
+      }({}, a.defaultProps, e) : e;
+    }
+  }), "production" !== process.env.NODE_ENV && (P(y, g), D.warnTooManyClasses = function (e, t) {
+    var n = {},
+      r = !1;
+    return function (o) {
+      if (!r && (n[o] = !0, Object.keys(n).length >= 200)) {
+        var s = t ? ' with the id of "'.concat(t, '"') : "";
+        console.warn("Over ".concat(200, " classes were generated for component ").concat(e).concat(s, ".\n") + "Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"), r = !0, n = {};
+      }
+    };
+  }(y, g)), ue(D, function () {
+    return ".".concat(D.styledComponentId);
+  }), c && re(D, e, {
+    attrs: !0,
+    componentStyle: !0,
+    displayName: !0,
+    foldedComponentIds: !0,
+    shouldForwardProp: !0,
+    styledComponentId: !0,
+    target: !0
+  }), D;
+}
+function at(e, t) {
+  for (var n = [e[0]], r = 0, o = t.length; r < o; r += 1) n.push(t[r], e[r + 1]);
+  return n;
+}
+var ct = function (e) {
+  return Object.assign(e, {
+    isCss: !0
+  });
+};
+function lt(t) {
+  for (var n = [], r = 1; r < arguments.length; r++) n[r - 1] = arguments[r];
+  if (oe(t) || ce(t)) return ct(Xe(at(_, __spreadArray([t], n, !0))));
+  var o = t;
+  return 0 === n.length && 1 === o.length && "string" == typeof o[0] ? Xe(o) : ct(Xe(at(o, n)));
+}
+function ut(n, r, o) {
+  if (void 0 === o && (o = C), !r) throw he(1, r);
+  var s = function (t) {
+    for (var s = [], i = 1; i < arguments.length; i++) s[i - 1] = arguments[i];
+    return n(r, o, lt.apply(void 0, __spreadArray([t], s, !1)));
+  };
+  return s.attrs = function (e) {
+    return ut(n, r, __assign(__assign({}, o), {
+      attrs: Array.prototype.concat(o.attrs, e).filter(Boolean)
+    }));
+  }, s.withConfig = function (e) {
+    return ut(n, r, __assign(__assign({}, o), e));
+  }, s;
+}
+var pt = function (e) {
+    return ut(it, e);
+  },
+  dt = pt;
+A.forEach(function (e) {
+  dt[e] = pt(e);
+});
+function mt(t) {
+  for (var n = [], r = 1; r < arguments.length; r++) n[r - 1] = arguments[r];
+  "production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");
+  var o = ae(lt.apply(void 0, __spreadArray([t], n, !1))),
+    s = $(o);
+  return new qe(s, o);
+}
+"production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
+var wt = "__sc-".concat(f, "__");
+"production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window[wt] || (window[wt] = 0), 1 === window[wt] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[wt] += 1);
+
+const ButtonContainer = dt.div`
   //position: relative;
   display: flex;
   align-items: center;
@@ -1176,7 +2831,7 @@ const ButtonContainer = styled__default["default"].div`
   width: ${props => props.width};
   height: ${props => props.height};
 `;
-const ButtonItem = styled__default["default"].div`
+const ButtonItem = dt.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1206,7 +2861,7 @@ const ButtonItem = styled__default["default"].div`
     transition: background-color 0.3s, color 0.3s;
   }
 `;
-const Label$6 = styled__default["default"].label`
+const Label$6 = dt.label`
   font-family: "Poppins";
   font-size: 14px;
   font-weight: 400;
@@ -1214,13 +2869,13 @@ const Label$6 = styled__default["default"].label`
   pointer-events: none;
   user-select: none;
 `;
-const IconWrapper$1 = styled__default["default"].div`
+const IconWrapper$1 = dt.div`
   display: flex;
   align-items: center;
   justify-content: center;
   align-content: center;
 `;
-const InputCommit = styled__default["default"].input`
+const InputCommit = dt.input`
   font-family: "Poppins", sans-serif;
   border: ${props => `0px solid ${props.disabled ? props.disabled_border_color : props.hover_border_color}`};
   border-radius: 8px;
@@ -1872,7 +3527,7 @@ NoDataFoundIcon.propTypes = {
   width: PropTypes.string
 };
 
-const NoDataFoundContainer = styled__default["default"].div`
+const NoDataFoundContainer = dt.div`
   font-family: "Poppins", sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -1880,7 +3535,7 @@ const NoDataFoundContainer = styled__default["default"].div`
   flex-direction: column;
   align-items: center;
 `;
-const NoDataFoundTitle = styled__default["default"].h4`
+const NoDataFoundTitle = dt.h4`
   font-weight: 600;
   font-size: 18px;
   margin: 0;
@@ -1890,7 +3545,7 @@ const NoDataFoundTitle = styled__default["default"].h4`
     font-size: 14px;
   }
 `;
-const NoDataFoundText = styled__default["default"].p`
+const NoDataFoundText = dt.p`
   font-weight: 400;
   font-size: 16px;
   margin: 0;
@@ -1943,7 +3598,7 @@ const scrollableStyles$a = `
     border-radius: 5px;
   }
 `;
-const ControlsContainer$9 = styled__default["default"].div`
+const ControlsContainer$9 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   font-style: normal;
@@ -1962,7 +3617,7 @@ const ControlsContainer$9 = styled__default["default"].div`
     box-sizing: border-box;
   }
 `;
-const Controls$6 = styled__default["default"].div`
+const Controls$6 = dt.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -1970,7 +3625,7 @@ const Controls$6 = styled__default["default"].div`
   background: white;
   border-radius: 12px;  
 `;
-styled__default["default"].div`
+dt.div`
   display: flex;
   background: white;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
@@ -1978,7 +3633,7 @@ styled__default["default"].div`
   padding: 6px 10px;
   margin: 0;
 `;
-styled__default["default"].p`
+dt.p`
   color: #212121;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
@@ -1988,12 +3643,12 @@ styled__default["default"].p`
   line-height: normal;
   margin: 0;
 `;
-const TitleAndValueContainer$4 = styled__default["default"].div`
+const TitleAndValueContainer$4 = dt.div`
   display: flex;
   flex-direction: column;
   padding: 0 20px;
 `;
-const Title$a = styled__default["default"].h4`
+const Title$a = dt.h4`
   font-weight: 400;
   font-size: 18px;
   margin: 0 0 8px;
@@ -2001,12 +3656,12 @@ const Title$a = styled__default["default"].h4`
     font-size: 16px;
   }
 `;
-const CurrencySignAndFormattedValueContainer$2 = styled__default["default"].div`
+const CurrencySignAndFormattedValueContainer$2 = dt.div`
   display: flex;
   align-items: center;
   gap: 8px;
 `;
-const FormattedValue$4 = styled__default["default"].h5`
+const FormattedValue$4 = dt.h5`
   font-size: 40px;
   font-weight: 500;
   margin: 0;
@@ -2018,17 +3673,17 @@ const FormattedValue$4 = styled__default["default"].h5`
     font-size: 20px;
   }
 `;
-const CurrencySign$2 = styled__default["default"].span`
+const CurrencySign$2 = dt.span`
   font-size: 14px;
   font-weight: 500;
   line-height: 0;
 `;
-const TextAfterValue$1 = styled__default["default"].span`  
+const TextAfterValue$1 = dt.span`  
   color: #999999;
   font-size: 12px;
   font-weight: 400;
 `;
-const DoughnutChartAndLegendContainer$1 = styled__default["default"].div`
+const DoughnutChartAndLegendContainer$1 = dt.div`
   display: flex;
   gap: 2%;
   width: 86%;
@@ -2036,31 +3691,31 @@ const DoughnutChartAndLegendContainer$1 = styled__default["default"].div`
   margin: auto;
   padding: 0 20px;
 `;
-const DoughnutChartContainer$1 = styled__default["default"].div`
+const DoughnutChartContainer$1 = dt.div`
   width: 50%;
 `;
-const LegendContainer$2 = styled__default["default"].div`
+const LegendContainer$2 = dt.div`
   padding-left: 10px;
   display: flex;
   justify-content: center;
   flex-direction: column;
   gap: 12px;
 `;
-const LegendControlsContainer$1 = styled__default["default"].div`
+const LegendControlsContainer$1 = dt.div`
   display: flex;
   gap: 0.5rem;
   align-items: center;
   margin-bottom: 0.375rem;
 `;
-const LegendTitleAndFormatedValueContainer$1 = styled__default["default"].div`
+const LegendTitleAndFormatedValueContainer$1 = dt.div`
   flex-grow: 1;
 `;
-const LegendColorRectangle$2 = styled__default["default"].div`
+const LegendColorRectangle$2 = dt.div`
   width: 16px;
   height: 16px;
   background: ${props => props.color};
 `;
-const LegendTitle$1 = styled__default["default"].h5`
+const LegendTitle$1 = dt.h5`
   font-weight: 400;
   font-size: 14px;
   margin: 0;
@@ -2068,12 +3723,12 @@ const LegendTitle$1 = styled__default["default"].h5`
   gap: 20px;
   justify-content: space-between;
 `;
-const LegendFormattedValue$1 = styled__default["default"].span`
+const LegendFormattedValue$1 = dt.span`
   font-weight: 500;
   white-space: nowrap;
 `;
 
-const ControlsContainer$8 = styled__default["default"].div`
+const ControlsContainer$8 = dt.div`
   display: flex;
   position: relative;
   margin: 0px 0 0px;
@@ -2086,7 +3741,7 @@ const ControlsContainer$8 = styled__default["default"].div`
   //border: 1px solid red;
   align-items: center;
 `;
-const Controls$5 = styled__default["default"].div`
+const Controls$5 = dt.div`
   position: relative;
   border-radius: 100px;
   width: ${props => props.width.toString().concat('', 'px')};
@@ -2094,7 +3749,7 @@ const Controls$5 = styled__default["default"].div`
   //background: #ffffff;
   //border: 1px solid blue;
 `;
-const BackgroundValueRectangle = styled__default["default"].div`
+const BackgroundValueRectangle = dt.div`
   position: absolute;
   width: ${props => props.width.toString().concat('', 'px')};
   height: ${props => props.height.toString().concat('', 'px')};
@@ -2104,7 +3759,7 @@ const BackgroundValueRectangle = styled__default["default"].div`
   background: ${props => props.color};
   //border: 1px solid orange;
 `;
-const CurrentValueRectangle = styled__default["default"].div`
+const CurrentValueRectangle = dt.div`
   position: absolute;
   width: ${props => props.width.toString().concat('', 'px')};
   height: ${props => props.height.toString().concat('', 'px')};
@@ -2118,7 +3773,7 @@ const CurrentValueRectangle = styled__default["default"].div`
   );
   //border: 1px solid green;
 `;
-const AvarageDelimiter = styled__default["default"].div`
+const AvarageDelimiter = dt.div`
   position: absolute;
   height: ${props => props.height.toString().concat('', 'px')};
   width: ${props => props.width.toString().concat('', 'px')};
@@ -2128,7 +3783,7 @@ const AvarageDelimiter = styled__default["default"].div`
 `;
 
 /* Custom properties */
-const TooltipContainer$2 = styled__default["default"].div`
+const TooltipContainer$2 = dt.div`
   --tooltip-text-color: black;
   --tooltip-background-color: white;
   --tooltip-margin: 40px;
@@ -2136,13 +3791,13 @@ const TooltipContainer$2 = styled__default["default"].div`
 `;
 
 /* Wrapping */
-const TooltipWrapper$2 = styled__default["default"].div`
+const TooltipWrapper$2 = dt.div`
   display: inline-block;
   position: relative;
 `;
 
 /* Absolute positioning */
-const TooltipTip$1 = styled__default["default"].div`
+const TooltipTip$1 = dt.div`
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
   position: absolute;
   border-radius: 4px;
@@ -2553,7 +4208,7 @@ PieChart.defaultProps = {
   noDataText: 'No Data'
 };
 
-const MainContainer$7 = styled__default["default"].div`
+const MainContainer$7 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   background-color: white;
@@ -2564,7 +4219,7 @@ const MainContainer$7 = styled__default["default"].div`
   border-radius: 8px;
   border: 1px solid #f2f2f2;
 `;
-const TitleWrapper$1 = styled__default["default"].div`
+const TitleWrapper$1 = dt.div`
   padding: 22px 20px;
   border-radius: 8px 8px 0 0;
   background-color: #f7f8fa;
@@ -2572,11 +4227,11 @@ const TitleWrapper$1 = styled__default["default"].div`
   gap: 10px;
   align-items: baseline;
 `;
-const CardTitle$1 = styled__default["default"].span`
+const CardTitle$1 = dt.span`
   font-size: 18px;
   font-weight: 400;
 `;
-const MainCard = styled__default["default"].div`
+const MainCard = dt.div`
   padding: 20px;
   flex-grow: 1;
   display: flex;
@@ -2589,7 +4244,7 @@ const MainCard = styled__default["default"].div`
     }
   }
 `;
-const List = styled__default["default"].ul`
+const List = dt.ul`
   list-style-type: none;
   padding: 0;
   margin: 0 0 auto;
@@ -2604,7 +4259,7 @@ const List = styled__default["default"].ul`
     font-weight: 500;
   }
 `;
-const LinkButtonContainer$1 = styled__default["default"].div`
+const LinkButtonContainer$1 = dt.div`
   margin-left: auto;
 `;
 
@@ -2759,16 +4414,16 @@ const HannafordNewIcon = _ref => {
   })));
 };
 
-const MainContainer$6 = styled__default["default"].div`
+const MainContainer$6 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   background-color: white;
   border-radius: 30px;
 `;
-const ToggleBannersWrapper = styled__default["default"].div`
+const ToggleBannersWrapper = dt.div`
   position: relative;
 `;
-const ToggleBanners = styled__default["default"].button`
+const ToggleBanners = dt.button`
   display: flex;
   gap: 4px;
   color: #2d8de7;
@@ -2786,7 +4441,7 @@ const ToggleBanners = styled__default["default"].button`
     white-space: nowrap;
   }
 `;
-const ArrowWrap = styled__default["default"].div`
+const ArrowWrap = dt.div`
   > svg {
     transform: rotate(180deg);
     transition: transform 0.3s ease;
@@ -2797,7 +4452,7 @@ const ArrowWrap = styled__default["default"].div`
     }
   }
 `;
-const ToggledDropdown = styled__default["default"].div`
+const ToggledDropdown = dt.div`
   position: absolute;
   margin-top: 10px;
   border-radius: 5px;
@@ -2807,14 +4462,14 @@ const ToggledDropdown = styled__default["default"].div`
 
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
 `;
-const ToggledDropdownTitle = styled__default["default"].span`
+const ToggledDropdownTitle = dt.span`
   font-size: 14px;
   font-weight: 600;
   padding: 8px 12px;
   margin-bottom: 12px;
   white-space: nowrap;
 `;
-const ToggledDropdownList = styled__default["default"].ul`
+const ToggledDropdownList = dt.ul`
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -2846,7 +4501,7 @@ const ToggledDropdownList = styled__default["default"].ul`
     }
   }
 `;
-const IconWrap = styled__default["default"].div`
+const IconWrap = dt.div`
   min-width: 54px;
   text-align: center;
 `;
@@ -2974,7 +4629,7 @@ BannersDropdown.defaultProps = {
   onClick: () => {}
 };
 
-const LinkButtonContainer = styled__default["default"].div`
+const LinkButtonContainer = dt.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2982,7 +4637,7 @@ const LinkButtonContainer = styled__default["default"].div`
   width: ${props => props.width};
   height: ${props => props.height};
 `;
-const LinkButtonItem = styled__default["default"].div`
+const LinkButtonItem = dt.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3009,11 +4664,11 @@ const LinkButtonItem = styled__default["default"].div`
     transition: background-color 0.3s, color 0.3s;
   }
 `;
-const Label$5 = styled__default["default"].label` 
+const Label$5 = dt.label` 
   user-select: none;   
   pointer-events: none;
 `;
-const IconWrapper = styled__default["default"].div`
+const IconWrapper = dt.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3429,7 +5084,7 @@ EventDetailsCard.defaultProps = {
   disableViewDetailsButton: false
 };
 
-const LinnerContainer$1 = styled__default["default"].div`
+const LinnerContainer$1 = dt.div`
   font-family: "Poppins", sans-serif;
   display: flex;
   justify-content: space-between;
@@ -3438,7 +5093,7 @@ const LinnerContainer$1 = styled__default["default"].div`
   background-color: ${props => props.backgroundColor};
   padding: 50px 40px 30px;
 `;
-const DataBoxWrap = styled__default["default"].div`
+const DataBoxWrap = dt.div`
   display: flex;
   gap: 10px;
   justify-content: space-around;
@@ -3446,45 +5101,45 @@ const DataBoxWrap = styled__default["default"].div`
   width: ${props => props.width};
   height: 100%;
 `;
-const DataBox$1 = styled__default["default"].div`
+const DataBox$1 = dt.div`
   color: #212121;
   font-weight: 400;
 `;
-const DataBoxTitle$1 = styled__default["default"].span`
+const DataBoxTitle$1 = dt.span`
   font-size: 18px;
   font-weight: 500;
 `;
-const DataBoxContent = styled__default["default"].div`
+const DataBoxContent = dt.div`
   display: flex;
   align-items: baseline;
 `;
-const DataBoxContentSign = styled__default["default"].span`
+const DataBoxContentSign = dt.span`
   font-size: 18px;
   font-weight: 500;
 `;
-const DataBoxContentValue = styled__default["default"].span`
+const DataBoxContentValue = dt.span`
   font-size: 40px;
   font-weight: 500;
 `;
-const DataBoxContentNoValue = styled__default["default"].span`
+const DataBoxContentNoValue = dt.span`
   font-size: 18px;
   font-weight: 500;
   margin: 20px auto 0;
 `;
-styled__default["default"].div`
+dt.div`
   display: flex;
   flex-direction: column;
 `;
-const DataBoxExtraInfoCell = styled__default["default"].div`
+const DataBoxExtraInfoCell = dt.div`
   display: flex;
   gap: 5px;
 `;
-const DataBoxExtraInfoCellTitle = styled__default["default"].div`
+const DataBoxExtraInfoCellTitle = dt.div`
   color: #999;
   font-size: 12px;
   text-transform: uppercase;
 `;
-const DataBoxExtraInfoCellValue = styled__default["default"].div`
+const DataBoxExtraInfoCellValue = dt.div`
   color: #999;
   font-size: 12px;
   text-transform: uppercase;
@@ -3541,7 +5196,7 @@ LinnerDataBox.propTypes = {
 };
 LinnerDataBox.defaultProps = {
   className: "",
-  width: "100%",
+  width: "auto",
   height: "auto",
   data: [],
   backgroundColor: "#FFFFFF",
@@ -3605,7 +5260,7 @@ const scrollableStyles$9 = `
     border-radius: 5px;
   }
 `;
-const MainContainer$5 = styled__default["default"].div`
+const MainContainer$5 = dt.div`
   display: flex;
   flex-direction: row;
   position: relative;
@@ -3619,7 +5274,7 @@ const MainContainer$5 = styled__default["default"].div`
   overflow: auto;
   ${scrollableStyles$9}
 `;
-const RowTitle = styled__default["default"].h4`
+const RowTitle = dt.h4`
   display: flex;
   justify-content: space-between;
   font-weight: 500;
@@ -3632,7 +5287,7 @@ const RowTitle = styled__default["default"].h4`
     font-size: 12px;
   }
 `;
-const AllRowsContainer = styled__default["default"].div`
+const AllRowsContainer = dt.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -3640,13 +5295,13 @@ const AllRowsContainer = styled__default["default"].div`
   width: 100%;
   height: 100%;
 `;
-const OneRowContainer = styled__default["default"].div`
+const OneRowContainer = dt.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
 `;
-const ColumnLineSeporatorContainer = styled__default["default"].div`
+const ColumnLineSeporatorContainer = dt.div`
   display: flex;
   flex-direction: column;
   background-color: #b1b1b1;
@@ -3665,11 +5320,11 @@ const ColumnLineSeporatorContainer = styled__default["default"].div`
     width: 100%;
   }
 `;
-const ColumnLineSeporator = styled__default["default"].div`
+const ColumnLineSeporator = dt.div`
   min-width: 0.5px;
   width: 0.5px;
 `;
-const FieldsContainer$1 = styled__default["default"].div`
+const FieldsContainer$1 = dt.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -3677,7 +5332,7 @@ const FieldsContainer$1 = styled__default["default"].div`
   height: 100%;
   padding: 30px 0px;
 `;
-const OneFieldsContainer = styled__default["default"].div`
+const OneFieldsContainer = dt.div`
   display: flex;
   padding: 4px;
   gap: 10px;
@@ -3685,7 +5340,7 @@ const OneFieldsContainer = styled__default["default"].div`
   justify-content: flex-start;
   // padding: ${props => props.padding}; //0 0 0 40px;
 `;
-const FieldTitle = styled__default["default"].h4`
+const FieldTitle = dt.h4`
   font-size: 18px;
   font-weight: 400;
   margin: 0;
@@ -3696,7 +5351,7 @@ const FieldTitle = styled__default["default"].h4`
     font-size: 12px;
   }
 `;
-const FormattedValue$3 = styled__default["default"].div`
+const FormattedValue$3 = dt.div`
   font-weight: 400;
   font-size: 40px;
   display: flex;
@@ -3710,7 +5365,7 @@ const FormattedValue$3 = styled__default["default"].div`
     font-size: 20px;
   }
 `;
-const TextBeforeAndAfterValue$1 = styled__default["default"].span`
+const TextBeforeAndAfterValue$1 = dt.span`
   font-weight: 400;
   font-size: 16px;
   @media (max-width: 1536px) {
@@ -3720,26 +5375,26 @@ const TextBeforeAndAfterValue$1 = styled__default["default"].span`
     font-size: 11px;
   }
 `;
-const FieldTitleAndValueSubContainer = styled__default["default"].div`
+const FieldTitleAndValueSubContainer = dt.div`
   display: flex;
   justify-content: space-around;
   flex-direction: column;
   flex-wrap: wrap;
   width: 100%;
 `;
-const InfoTextContainer$1 = styled__default["default"].div`
+const InfoTextContainer$1 = dt.div`
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 100%; 
   overflow:auto;
 `;
-const IconContainer$5 = styled__default["default"].div`  
+const IconContainer$5 = dt.div`  
   display: flex;  
   padding: 5px 10px 0 0;
   cursor:  pointer;  
 `;
-const InfoTextLabel$1 = styled__default["default"].div`
+const InfoTextLabel$1 = dt.div`
   color: black;
   font-size: 18px;
   line-height: 24px;
@@ -3768,7 +5423,7 @@ const InfoTextLabel$1 = styled__default["default"].div`
     }
   };
 `;
-const OutBanner$2 = styled__default["default"].div`
+const OutBanner$2 = dt.div`
   display: flex;
   gap: 8px;
   align-items: center;
@@ -3900,7 +5555,7 @@ MarketShareDescription.defaultProps = {
   dotCut: false
 };
 
-const SagIconButtonWrapper = styled__default["default"].button`
+const SagIconButtonWrapper = dt.button`
   height: ${props => props.height};
   font-size: 14px;
   font-weight: 400;
@@ -3920,7 +5575,7 @@ const SagIconButtonWrapper = styled__default["default"].button`
     box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
   }
 `;
-const SpanText$1 = styled__default["default"].span`
+const SpanText$1 = dt.span`
 `;
 
 const SagIconButton = props => {
@@ -4048,7 +5703,7 @@ SagIconButton.defaultProps = {
   onButtonClick: () => {}
 };
 
-const TextFieldContainer = styled__default["default"].div`
+const TextFieldContainer = dt.div`
     position: relative;
     width: ${props => props.width};
     > svg {
@@ -4059,7 +5714,7 @@ const TextFieldContainer = styled__default["default"].div`
     
     }
 `;
-const TextFieldInput = styled__default["default"].input`
+const TextFieldInput = dt.input`
   width: 100%;
   height: ${props => props.height};
   font-size: 14px;
@@ -4146,31 +5801,31 @@ const scrollableStyles$8 = `
     border-radius: 5px;
   }
 `;
-const TabMenuContainer = styled__default["default"].div`
+const TabMenuContainer = dt.div`
   font-family: 'Poppins', sans-serif;
   display: grid;
   gap: 20px;
   grid-template-rows: repeat(3, auto);
 `;
-const TopRow = styled__default["default"].div`
+const TopRow = dt.div`
   display: flex;
   align-items: center;
   gap: 20px;
 `;
-const Headline$1 = styled__default["default"].span`
+const Headline$1 = dt.span`
   font-size: 18px;
   font-weight: 500;
   margin-right: auto;
 `;
-const Nav = styled__default["default"].nav`
+const Nav = dt.nav`
 `;
-const Tabs = styled__default["default"].div`
+const Tabs = dt.div`
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
 `;
-const Tab = styled__default["default"].div`
+const Tab = dt.div`
   cursor: pointer;
   position: relative;
   text-align: center;
@@ -4184,7 +5839,7 @@ const Tab = styled__default["default"].div`
     //2px solid ${props => props.color};
   }
 `;
-const PresentationSlider = styled__default["default"].div`
+const PresentationSlider = dt.div`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -4203,7 +5858,7 @@ const PresentationSlider = styled__default["default"].div`
     transition: transform .35s ease;
   }
 `;
-const Body = styled__default["default"].div`
+const Body = dt.div`
   width: 100%;
   ${scrollableStyles$8}
   position: relative;
@@ -4214,7 +5869,7 @@ const Body = styled__default["default"].div`
   border-radius: ${props => props.setBackground ? '12px' : '0'};
   box-shadow: ${props => props.setBackground ? '0px 0px 20px 0px rgba(0, 0, 0, 0.10)' : 'unset'};
 `;
-const Label$4 = styled__default["default"].div`
+const Label$4 = dt.div`
   font-size: 12px;
   font-weight: 400;
   padding: 8px;
@@ -4229,15 +5884,15 @@ const Label$4 = styled__default["default"].div`
       font-weight: 400;
     }
 `;
-const ActionsWrapper = styled__default["default"].div`
+const ActionsWrapper = dt.div`
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
 `;
-const SagIconButtonWrap = styled__default["default"](SagIconButton)`
+const SagIconButtonWrap = dt(SagIconButton)`
 `;
-const SearchInputWrap = styled__default["default"](SearchInput)`
+const SearchInputWrap = dt(SearchInput)`
   margin-left: auto;
 `;
 
@@ -9085,7 +10740,7 @@ const scrollableStyles$7 = `
     border-radius: 5px;
   }
 `;
-const DropdownWrapper$2 = styled__default["default"].div`
+const DropdownWrapper$2 = dt.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -9098,7 +10753,7 @@ const DropdownWrapper$2 = styled__default["default"].div`
   font-size: 14px;
   border-radius: 10px;  
 `;
-const Label$3 = styled__default["default"].label`
+const Label$3 = dt.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -9121,7 +10776,7 @@ const Label$3 = styled__default["default"].label`
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
 `;
-const InputContainer$6 = styled__default["default"].div`
+const InputContainer$6 = dt.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -9153,7 +10808,7 @@ const InputContainer$6 = styled__default["default"].div`
   }
   
 `;
-const InputSubContainer$3 = styled__default["default"].div`
+const InputSubContainer$3 = dt.div`
     display: flex;       
     flex-direction: column;
     flex-wrap: nowrap;     
@@ -9172,7 +10827,7 @@ const InputSubContainer$3 = styled__default["default"].div`
     outline: none;
     color: ${props => props.disabled ? '#888' : '#212121'};     
 `;
-const StyledInput$6 = styled__default["default"].input`
+const StyledInput$6 = dt.input`
   width: calc(100% - 10px);
   height: 20px;
   font-family: Poppins;
@@ -9183,7 +10838,7 @@ const StyledInput$6 = styled__default["default"].input`
   color: ${props => props.disabled ? '#888' : '#212121'};    
   border: none;
 `;
-const OptionsContainer$6 = styled__default["default"].div`  
+const OptionsContainer$6 = dt.div`  
   margin: 0;   
   top: 100%; 
   left: 0;
@@ -9192,7 +10847,7 @@ const OptionsContainer$6 = styled__default["default"].div`
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
 `;
-const OptionsSubContainer$3 = styled__default["default"].ul`
+const OptionsSubContainer$3 = dt.ul`
   ${scrollableStyles$7}
   list-style: none;
   font-weight: 400;
@@ -9211,7 +10866,7 @@ const OptionsSubContainer$3 = styled__default["default"].ul`
   max-height: 400px;
   overflow: auto;
 `;
-const OptionItem$3 = styled__default["default"].li`  
+const OptionItem$3 = dt.li`  
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -9231,12 +10886,12 @@ const OptionItem$3 = styled__default["default"].li`
     background-color: #EDF6FF;
   }
 `;
-const ErrorMessage$3 = styled__default["default"].div`
+const ErrorMessage$3 = dt.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
 `;
-const IconContainer$4 = styled__default["default"].div`  
+const IconContainer$4 = dt.div`  
   display: flex;  
   padding: 2px;
   cursor:  pointer;  
@@ -9554,7 +11209,7 @@ const scrollableStyles$6 = `
     border-radius: 5px;
   }
 `;
-const DropdownWrapper$1 = styled__default["default"].div`
+const DropdownWrapper$1 = dt.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -9567,7 +11222,7 @@ const DropdownWrapper$1 = styled__default["default"].div`
   font-size: 14px;
   border-radius: 10px;
 `;
-const Label$2 = styled__default["default"].label`
+const Label$2 = dt.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -9590,7 +11245,7 @@ const Label$2 = styled__default["default"].label`
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
 `;
-const InputContainer$5 = styled__default["default"].div`
+const InputContainer$5 = dt.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -9621,7 +11276,7 @@ const InputContainer$5 = styled__default["default"].div`
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'}; 
   }
 `;
-const InputSubContainer$2 = styled__default["default"].div`
+const InputSubContainer$2 = dt.div`
 
     display: flex;       
     flex-direction: column;
@@ -9641,7 +11296,7 @@ const InputSubContainer$2 = styled__default["default"].div`
     outline: none;
     color: ${props => props.disabled ? '#888' : '#212121'};     
 `;
-const StyledInput$5 = styled__default["default"].input`
+const StyledInput$5 = dt.input`
   width: calc(100% - 20px);
   height: 25px;
   font-family: Poppins;
@@ -9652,7 +11307,7 @@ const StyledInput$5 = styled__default["default"].input`
   color: ${props => props.disabled ? '#888' : '#212121'};    
   border: none;  
 `;
-const OptionsContainer$5 = styled__default["default"].div`  
+const OptionsContainer$5 = dt.div`  
   margin: 0;   
   top: 100%; 
   left: 0;
@@ -9661,7 +11316,7 @@ const OptionsContainer$5 = styled__default["default"].div`
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
 `;
-const OptionsSubContainer$2 = styled__default["default"].ul`
+const OptionsSubContainer$2 = dt.ul`
   ${scrollableStyles$6}
   list-style: none;
   font-weight: 400;
@@ -9680,7 +11335,7 @@ const OptionsSubContainer$2 = styled__default["default"].ul`
   max-height: 400px;
   overflow: auto;
 `;
-const OptionItem$2 = styled__default["default"].li`  
+const OptionItem$2 = dt.li`  
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -9699,12 +11354,12 @@ const OptionItem$2 = styled__default["default"].li`
     background-color: #EDF6FF;
   }
 `;
-const ErrorMessage$2 = styled__default["default"].div`
+const ErrorMessage$2 = dt.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
 `;
-const SelectedOptionsContainer$1 = styled__default["default"].div`
+const SelectedOptionsContainer$1 = dt.div`
     display: flex;   
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -9720,7 +11375,7 @@ const SelectedOptionsContainer$1 = styled__default["default"].div`
     background-color: #fff;    
     gap: 4px;   
 `;
-const SelectedOptionItem$1 = styled__default["default"].div`  
+const SelectedOptionItem$1 = dt.div`  
   display: flex;  
   margin: 0;
   flex-wrap: nowrap; 
@@ -9734,7 +11389,7 @@ const SelectedOptionItem$1 = styled__default["default"].div`
   padding: 4px 6px;
   font-size: 12px;
 `;
-const IconContainer$3 = styled__default["default"].div`  
+const IconContainer$3 = dt.div`  
   display: flex;  
   padding: 2px;
   cursor:  pointer;  
@@ -10031,7 +11686,7 @@ DropdownMultiNew.defaultProps = {
   elementType: "number"
 };
 
-const DropdownMain = styled__default["default"].div`
+const DropdownMain = dt.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -10046,67 +11701,70 @@ const DropdownMain = styled__default["default"].div`
 `;
 
 /* eslint-disable react/prop-types */
-const DropdownNew = ({
-  isMulti,
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  checkBoxColor,
-  xIconShow,
-  showLabelOnTop,
-  orderBy,
-  elementType
-}) => /*#__PURE__*/React__default["default"].createElement(DropdownMain, {
-  className: "DropdownMain",
-  width: width
-}, isMulti ? /*#__PURE__*/React__default["default"].createElement(DropdownMultiNew, {
-  className: "DropdownMultiNew",
-  placeHolder: placeHolder,
-  label: label,
-  labelEmptyValue: labelEmptyValue,
-  labelColor: labelColor,
-  checkBoxColor: checkBoxColor,
-  required: required,
-  options: options,
-  width: width,
-  disabled: disabled,
-  error: error,
-  errorMessage: errorMessage,
-  selectedValue: selectedValue,
-  xIconShow: xIconShow,
-  onChange: onChange,
-  showLabelOnTop: showLabelOnTop,
-  orderBy: orderBy,
-  elementType: elementType
-}) : /*#__PURE__*/React__default["default"].createElement(DropdownSingleNew, {
-  className: "DropdownSingleNew",
-  placeHolder: placeHolder,
-  label: label,
-  labelEmptyValue: labelEmptyValue,
-  labelColor: labelColor,
-  checkBoxColor: checkBoxColor,
-  required: required,
-  options: options,
-  width: width,
-  disabled: disabled,
-  error: error,
-  errorMessage: errorMessage,
-  selectedValue: selectedValue,
-  xIconShow: xIconShow,
-  onChange: onChange,
-  showLabelOnTop: showLabelOnTop,
-  orderBy: orderBy,
-  elementType: elementType
-}));
+const DropdownNew = _ref => {
+  let {
+    isMulti,
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    checkBoxColor,
+    xIconShow,
+    showLabelOnTop,
+    orderBy,
+    elementType
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement(DropdownMain, {
+    className: "DropdownMain",
+    width: width
+  }, isMulti ? /*#__PURE__*/React__default["default"].createElement(DropdownMultiNew, {
+    className: "DropdownMultiNew",
+    placeHolder: placeHolder,
+    label: label,
+    labelEmptyValue: labelEmptyValue,
+    labelColor: labelColor,
+    checkBoxColor: checkBoxColor,
+    required: required,
+    options: options,
+    width: width,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    selectedValue: selectedValue,
+    xIconShow: xIconShow,
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
+  }) : /*#__PURE__*/React__default["default"].createElement(DropdownSingleNew, {
+    className: "DropdownSingleNew",
+    placeHolder: placeHolder,
+    label: label,
+    labelEmptyValue: labelEmptyValue,
+    labelColor: labelColor,
+    checkBoxColor: checkBoxColor,
+    required: required,
+    options: options,
+    width: width,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    selectedValue: selectedValue,
+    xIconShow: xIconShow,
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
+  }));
+};
 DropdownNew.propTypes = {
   placeHolder: PropTypes.string,
   label: PropTypes.string,
@@ -10179,13 +11837,13 @@ const CalendarInOpen = () => /*#__PURE__*/React__default["default"].createElemen
 }));
 
 /* eslint-disable no-nested-ternary */
-const RangePickerContainer = styled__default["default"].div`
+const RangePickerContainer = dt.div`
   position: relative;
   margin-bottom: 10px;
   width: ${props => props.width || '100%'};
   height: ${props => props.height || '60px'};
 `;
-const CalendarDiv$2 = styled__default["default"].div`
+const CalendarDiv$2 = dt.div`
     position: absolute;
     width: 11px;
     height: 11px;
@@ -10197,7 +11855,7 @@ const CalendarDiv$2 = styled__default["default"].div`
   }
 
 `;
-const InputContainer$4 = styled__default["default"].div`
+const InputContainer$4 = dt.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -10227,7 +11885,7 @@ const InputContainer$4 = styled__default["default"].div`
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'}; 
   }
 `;
-const StyledInput$4 = styled__default["default"].input`
+const StyledInput$4 = dt.input`
   padding: 20px;
   font-size: 14px;
   border-radius: ${props => props.borderRadius || '4px'};
@@ -10244,7 +11902,7 @@ const StyledInput$4 = styled__default["default"].input`
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
 `;
-const StyledLabel$2 = styled__default["default"].label`
+const StyledLabel$2 = dt.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   padding-inline-end: 5px;
   padding-inline-start: 5px;
@@ -10264,16 +11922,16 @@ const StyledLabel$2 = styled__default["default"].label`
   box-sizing: border-box;
   cursor: pointer;
 `;
-const RequiredIndicator$2 = styled__default["default"].span`
+const RequiredIndicator$2 = dt.span`
   color: red;
   margin-left: 5px;
 `;
-styled__default["default"].div`
+dt.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
 `;
-const OptionsContainer$4 = styled__default["default"].div`
+const OptionsContainer$4 = dt.div`
   display: block;
   margin: 0;
   padding-top: 8px;
@@ -10304,10 +11962,10 @@ const ChervronLeftIcon = () => /*#__PURE__*/React__default["default"].createElem
 /* eslint-disable react/prop-types */
 
 // Styled components for the date picker
-const DatePickerContainer$3 = styled__default["default"].div`
+const DatePickerContainer$3 = dt.div`
   position: relative;
 `;
-const DatePickerPopup$2 = styled__default["default"].div`
+const DatePickerPopup$2 = dt.div`
   position: absolute;
   width: 320px;
   height: 410px;
@@ -10320,18 +11978,18 @@ const DatePickerPopup$2 = styled__default["default"].div`
   padding: 10px;
   z-index: 1000;
 `;
-const DatePickerHeader$2 = styled__default["default"].div`
+const DatePickerHeader$2 = dt.div`
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
 `;
-const DatePickerFooter = styled__default["default"].div`
+const DatePickerFooter = dt.div`
   display: flex;
   justify-content: end;
   margin-inline-end: 10px;
   margin-top: 10px;
 `;
-const ClearButton = styled__default["default"].button`
+const ClearButton = dt.button`
   color: #568202;
   text-align: center;
   font-family: Poppins;
@@ -10343,14 +12001,14 @@ const ClearButton = styled__default["default"].button`
   line-height: normal;
   text-transform: uppercase;
 `;
-const NavDiv = styled__default["default"].div`
+const NavDiv = dt.div`
   width: 80px;
   height: 30px;
   display: flex;
   padding: 5px;
   justify-content: space-around;
 `;
-const DatePickerSelect$2 = styled__default["default"].div`
+const DatePickerSelect$2 = dt.div`
   padding: 4px;
   border-radius: 4px;
   border: none;
@@ -10360,14 +12018,14 @@ const DatePickerSelect$2 = styled__default["default"].div`
   font-weight: 400;
   cursor: pointer;
 `;
-const DatePickerCalendar$2 = styled__default["default"].div`
+const DatePickerCalendar$2 = dt.div`
   display: grid;
   width: 260px;
   height: 330px;
   row-gap: 12px;
   grid-template-columns: repeat(7, 1fr);
 `;
-const DateCell$2 = styled__default["default"].div`
+const DateCell$2 = dt.div`
   width: 100%;
   aspect-ratio: 1 / 1;
   /* height: 32px; */
@@ -10520,20 +12178,21 @@ const DatePicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const RangePicker = ({
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const RangePicker = _ref => {
+  let {
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(false);
   const [value, setValue] = React.useState(''); // Added value state
@@ -10697,20 +12356,20 @@ RangePicker.defaultProps = {
 };
 
 /* eslint-disable no-nested-ternary */
-const QuarterPickerContainer = styled__default["default"].div`
+const QuarterPickerContainer = dt.div`
   position: relative;
   margin-bottom: 10px;
   width: ${props => props.width || '100%'};
   height: ${props => props.height || '60px'};
 `;
-const CalendarDiv$1 = styled__default["default"].div`
+const CalendarDiv$1 = dt.div`
     position: absolute;
     width: 11px;
     height: 11px;
     top: ${props => parseInt(props.height, 10) / 2 || '20px'};
     right: 25px;
 `;
-const InputContainer$3 = styled__default["default"].div`
+const InputContainer$3 = dt.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -10740,7 +12399,7 @@ const InputContainer$3 = styled__default["default"].div`
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'}; 
   }
 `;
-const StyledInput$3 = styled__default["default"].input`
+const StyledInput$3 = dt.input`
   padding: 20px;
   font-size: 14px;
   border-radius: ${props => props.borderRadius || '4px'};
@@ -10757,7 +12416,7 @@ const StyledInput$3 = styled__default["default"].input`
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
 `;
-const StyledLabel$1 = styled__default["default"].label`
+const StyledLabel$1 = dt.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   padding-inline-end: 5px;
   padding-inline-start: 5px;
@@ -10777,16 +12436,16 @@ const StyledLabel$1 = styled__default["default"].label`
   box-sizing: border-box;
   cursor: pointer;
 `;
-const RequiredIndicator$1 = styled__default["default"].span`
+const RequiredIndicator$1 = dt.span`
   color: red;
   margin-left: 5px;
 `;
-styled__default["default"].div`
+dt.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
 `;
-const OptionsContainer$3 = styled__default["default"].div`
+const OptionsContainer$3 = dt.div`
   display: block;
   margin: 0;
   padding-top: 8px;
@@ -10797,10 +12456,10 @@ const OptionsContainer$3 = styled__default["default"].div`
 // import ChervronLeftIcon from './icons/ChervronLeftIcon';
 
 // Styled components for the date picker
-const DatePickerContainer$2 = styled__default["default"].div`
+const DatePickerContainer$2 = dt.div`
   position: relative;
 `;
-const DatePickerPopup$1 = styled__default["default"].div`
+const DatePickerPopup$1 = dt.div`
   position: absolute;
   width: auto;
   // margin: 5px;
@@ -10814,7 +12473,7 @@ const DatePickerPopup$1 = styled__default["default"].div`
   padding: 10px;
   z-index: 1000;
 `;
-const DatePickerHeader$1 = styled__default["default"].div`
+const DatePickerHeader$1 = dt.div`
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
@@ -10828,7 +12487,7 @@ const DatePickerHeader$1 = styled__default["default"].div`
 //   justify-content: space-around;
 // `;
 
-const DatePickerSelect$1 = styled__default["default"].select`
+const DatePickerSelect$1 = dt.select`
   padding: 4px;
   border: none;
   font-family: Poppins;
@@ -10841,7 +12500,7 @@ const DatePickerSelect$1 = styled__default["default"].select`
     border: none;
   }
 `;
-const DatePickerCalendar$1 = styled__default["default"].div`
+const DatePickerCalendar$1 = dt.div`
   display: grid;
   width: 220px;
   height: 150px;
@@ -10851,7 +12510,7 @@ const DatePickerCalendar$1 = styled__default["default"].div`
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(4, 1fr);
 `;
-const DateCell$1 = styled__default["default"].div`
+const DateCell$1 = dt.div`
   width: 100%;
   aspect-ratio: 1 / 1;
   /* height: 32px; */
@@ -10965,22 +12624,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(false);
   const [value, setValue] = React.useState('');
@@ -11129,20 +12789,20 @@ QuarterPicker.defaultProps = {
 };
 
 /* eslint-disable no-nested-ternary */
-const MonthPickerContainer = styled__default["default"].div`
+const MonthPickerContainer = dt.div`
   position: relative;
   margin-bottom: 10px;
   width: ${props => props.width || '100%'};
   height: ${props => props.height || '60px'};
 `;
-const CalendarDiv = styled__default["default"].div`
+const CalendarDiv = dt.div`
     position: absolute;
     width: 11px;
     height: 11px;
     top: ${props => parseInt(props.height, 10) / 2 || '20px'};
     right: 25px;
 `;
-const InputContainer$2 = styled__default["default"].div`
+const InputContainer$2 = dt.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -11172,7 +12832,7 @@ const InputContainer$2 = styled__default["default"].div`
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'}; 
   }
 `;
-const StyledInput$2 = styled__default["default"].input`
+const StyledInput$2 = dt.input`
   padding: 20px;
   font-size: 14px;
   border-radius: ${props => props.borderRadius || '4px'};
@@ -11190,7 +12850,7 @@ const StyledInput$2 = styled__default["default"].input`
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
 `;
-const StyledLabel = styled__default["default"].label`
+const StyledLabel = dt.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   padding-inline-end: 5px;
   padding-inline-start: 5px;
@@ -11210,16 +12870,16 @@ const StyledLabel = styled__default["default"].label`
   box-sizing: border-box;
   cursor: pointer;
 `;
-const RequiredIndicator = styled__default["default"].span`
+const RequiredIndicator = dt.span`
   color: red;
   margin-left: 5px;
 `;
-styled__default["default"].div`
+dt.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
 `;
-const OptionsContainer$2 = styled__default["default"].div`
+const OptionsContainer$2 = dt.div`
   display: block;
   margin: 0;
   padding-top: 8px;
@@ -11228,10 +12888,10 @@ const OptionsContainer$2 = styled__default["default"].div`
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 // Styled components for the date picker
-const DatePickerContainer$1 = styled__default["default"].div`
+const DatePickerContainer$1 = dt.div`
   position: relative;
 `;
-const DatePickerPopup = styled__default["default"].div`
+const DatePickerPopup = dt.div`
   position: absolute;
   width: auto;
   // margin: 5px;
@@ -11245,19 +12905,19 @@ const DatePickerPopup = styled__default["default"].div`
   padding: 10px;
   z-index: 1000;
 `;
-const DatePickerHeader = styled__default["default"].div`
+const DatePickerHeader = dt.div`
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
 `;
-styled__default["default"].div`
+dt.div`
   width: 80px;
   height: 30px;
   display: flex;
   padding: 5px;
   justify-content: space-around;
 `;
-const DatePickerSelect = styled__default["default"].select`
+const DatePickerSelect = dt.select`
   padding: 4px;
   border: none;
   font-family: Poppins;
@@ -11270,7 +12930,7 @@ const DatePickerSelect = styled__default["default"].select`
     border: none;
   }
 `;
-const DatePickerCalendar = styled__default["default"].div`
+const DatePickerCalendar = dt.div`
   display: grid;
   width: 220px;
   height: 150px;
@@ -11280,7 +12940,7 @@ const DatePickerCalendar = styled__default["default"].div`
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(4, 1fr);
 `;
-const DateCell = styled__default["default"].div`
+const DateCell = dt.div`
   width: 100%;
   aspect-ratio: 1 / 1;
   /* height: 32px; */
@@ -11419,21 +13079,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(false);
   const [value, setValue] = React.useState('');
@@ -11586,7 +13247,7 @@ MonthPicker.defaultProps = {
   selectedValue: ''
 };
 
-const ControlsContainer$7 = styled__default["default"].div`
+const ControlsContainer$7 = dt.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -11601,37 +13262,37 @@ const ControlsContainer$7 = styled__default["default"].div`
   box-shadow: ${props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : ''};
   box-sizing: border-box;
 `;
-const ButtonsContainer = styled__default["default"].div`
+const ButtonsContainer = dt.div`
   display: flex;  
   gap: 10px;
   flex-direction: row-reverse; 
 `;
-const AllFieldsContainer = styled__default["default"].div`
+const AllFieldsContainer = dt.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;
   width: 100%;
 `;
-const FieldsContainer = styled__default["default"].div`
+const FieldsContainer = dt.div`
   display: flex;
   flex-direction: column;
   white-space: wrap;
   gap: 20px;
   width: 100%;
 `;
-const FieldContainer = styled__default["default"].div` 
+const FieldContainer = dt.div` 
   margin: 0;
 `;
-const DatePickerContainer = styled__default["default"].div`
+const DatePickerContainer = dt.div`
   margin: 0;
 `;
-const PeriodPickerContainer = styled__default["default"].div` 
+const PeriodPickerContainer = dt.div` 
   display: flex;
   flex-direction: column;
   gap: 20px;
 `;
-const PeriodPickerEmptyContainer = styled__default["default"].div` 
+const PeriodPickerEmptyContainer = dt.div` 
   display: flex;  
   align-content: center;
   justify-content: flex-start;
@@ -11645,7 +13306,7 @@ const PeriodPickerEmptyContainer = styled__default["default"].div`
     cursor: pointer;
   } 
 `;
-const PeriodPickerEmptyText = styled__default["default"].div`
+const PeriodPickerEmptyText = dt.div`
   margin: 0 20px;
   font-family: "Poppins", sans-serif;
   font-weight: 400;
@@ -11653,7 +13314,7 @@ const PeriodPickerEmptyText = styled__default["default"].div`
   color: #8B8989;
   user-select: none;    
 `;
-const TooltipTextContainer = styled__default["default"].div` 
+const TooltipTextContainer = dt.div` 
   margin: 5px;
   font-family: "Poppins", sans-serif;
   font-weight: 400;
@@ -11664,7 +13325,7 @@ const TooltipTextContainer = styled__default["default"].div`
     cursor: pointer;
   }
 `;
-const TooltipText = styled__default["default"].div` 
+const TooltipText = dt.div` 
   margin: 0; 
 `;
 
@@ -12344,7 +14005,7 @@ const scrollableStyles$5 = `
     border-radius: 5px;
   }
 `;
-const rotation$1 = styled.keyframes`
+const rotation$1 = mt`
   0%, 100% {
       box-shadow: 
           0px -8.32px 0px 0px #1F7677, 
@@ -12441,9 +14102,9 @@ const rotation$1 = styled.keyframes`
           -5.76px -5.76px 0 0px #1F7677;
   }
 `;
-const ReportTableWrapper = styled__default["default"].div`
+const ReportTableWrapper = dt.div`
 `;
-const PaginationContainer = styled__default["default"].div`
+const PaginationContainer = dt.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -12500,7 +14161,7 @@ const PaginationContainer = styled__default["default"].div`
     cursor: default;
   }
 `;
-const TooltipWrapper$1 = styled__default["default"].div`
+const TooltipWrapper$1 = dt.div`
   width: max-content;
   max-width: 330px;
   /* white-space: wrap; */
@@ -12511,7 +14172,7 @@ const TooltipWrapper$1 = styled__default["default"].div`
   word-wrap: break-word;
   white-space: normal;
 `;
-const RecordDisplay = styled__default["default"].div`
+const RecordDisplay = dt.div`
   color: #8b8989;
   font-size: 14px;
   font-weight: 400;
@@ -12519,12 +14180,12 @@ const RecordDisplay = styled__default["default"].div`
   margin-left: 20px;
   position: absolute;
 `;
-const PaginationWrapper = styled__default["default"].div`
+const PaginationWrapper = dt.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
-const LoaderWrapper$1 = styled__default["default"].div`
+const LoaderWrapper$1 = dt.div`
   position: absolute;
   top: 40%;
   left: 50%;
@@ -12544,7 +14205,7 @@ const LoaderWrapper$1 = styled__default["default"].div`
     font-size: 12px;
   }
 `;
-const Loader$1 = styled__default["default"].span`
+const Loader$1 = dt.span`
   font-size: 10px;
   width: 4px;
   height: 4px;
@@ -12554,7 +14215,7 @@ const Loader$1 = styled__default["default"].span`
   animation: ${rotation$1} 1.5s infinite ease;
   transform: translateZ(0);
 `;
-const TableWrapper = styled__default["default"].div`
+const TableWrapper = dt.div`
   position: relative;
   width: ${props => `${props.width}`};
   height: ${props => `${props.height}`};
@@ -12564,7 +14225,7 @@ const TableWrapper = styled__default["default"].div`
   overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden'};
   ${scrollableStyles$5}
 `;
-const Table = styled__default["default"].table`
+const Table = dt.table`
   font-family: "Poppins", sans-serif;
   width: ${props => `${props.tableWidthSize}%`};
   table-layout: fixed;
@@ -12578,7 +14239,7 @@ const Table = styled__default["default"].table`
     text-overflow: ellipsis;
   }
 `;
-const Th = styled__default["default"].th`
+const Th = dt.th`
   font-weight: 600;
   font-size: 12px;
   color: #212121;
@@ -12591,14 +14252,14 @@ const Th = styled__default["default"].th`
     align-items: center;
   }
 `;
-const Td = styled__default["default"].td`
+const Td = dt.td`
   font-weight: 400;
   font-size: 12px;
   padding-top: 20px;
   padding-bottom: 20px;
   padding-left: 40px;
 `;
-const Tr = styled__default["default"].tr`
+const Tr = dt.tr`
   border-bottom: 1px solid #f3f4f6;
   ${_ref => {
   let {
@@ -12611,14 +14272,14 @@ const Tr = styled__default["default"].tr`
     }`;
 }}
 `;
-const InfoText = styled__default["default"].div`
+const InfoText = dt.div`
   font-weight: 400;
   font-size: 14px;
   color: #212121;
   padding-top: 20px;
   padding-bottom: 20px;
 `;
-const InfoBlock = styled__default["default"].div`
+const InfoBlock = dt.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -13066,7 +14727,7 @@ ReportTable.defaultProps = {
   onSortReset: () => {}
 };
 
-const EventListItemControlsContainer = styled__default["default"].div`
+const EventListItemControlsContainer = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   width: ${props => props.width};
@@ -13079,13 +14740,13 @@ const EventListItemControlsContainer = styled__default["default"].div`
   padding: 20px;
   border-radius: 12px;
 `;
-const EventName = styled__default["default"].span`
+const EventName = dt.span`
   font-size: 16px;
   @media (max-width: 1536px) {
     font-size: 14px;
   }
 `;
-const Period = styled__default["default"].span`
+const Period = dt.span`
   color: #b1b1b1;
   font-size: 16px;
   margin-bottom: 8px;
@@ -13093,7 +14754,7 @@ const Period = styled__default["default"].span`
     font-size: 14px;
   }
 `;
-const SelectButtonContainer = styled__default["default"].span`
+const SelectButtonContainer = dt.span`
   font-size: 16px;
   display: flex;
   align-items: center;
@@ -13153,7 +14814,7 @@ EventListItem.defaultProps = {
   onClick: () => {}
 };
 
-const MainContainer$4 = styled__default["default"].div`
+const MainContainer$4 = dt.div`
   /* display: flex; */
   position: relative;
   font-family: "Poppins", sans-serif;
@@ -13162,7 +14823,7 @@ const MainContainer$4 = styled__default["default"].div`
   width: ${props => props.width};
   height: ${props => props.height};
 `;
-const PanelContainer$1 = styled__default["default"].div`
+const PanelContainer$1 = dt.div`
   display: flex;
   border-radius: 12px;
   padding: 0 10px;
@@ -13173,14 +14834,14 @@ const PanelContainer$1 = styled__default["default"].div`
   overflow: hidden;
   width: 100%;
 `;
-const EventItemsContainer = styled__default["default"].div`
+const EventItemsContainer = dt.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding: 15px 10px 30px;
   gap: 30px;
   width: 100%;
 `;
-const OneEventItemContainer = styled__default["default"].div`
+const OneEventItemContainer = dt.div`
   margin: 0;
 `;
 
@@ -13245,17 +14906,17 @@ EventList.defaultProps = {
   onSelectClick: () => {}
 };
 
-const CollapseMenuItemMainContainer = styled__default["default"].div`
+const CollapseMenuItemMainContainer = dt.div`
   font-family: "Poppins", sans-serif;
   background: white;
   padding: 20px 24px;
   box-shadow: 0px 8px 20px -10px rgba(0, 0, 0, 0.2);
 `;
-const CollapseMenuItemContainer = styled__default["default"].div`
+const CollapseMenuItemContainer = dt.div`
   display: flex;
   justify-content: space-between;
 `;
-const rotation = styled.keyframes`
+const rotation = mt`
   0%, 100% {
       box-shadow: 
           0px -8.32px 0px 0px #ffffff, 
@@ -13352,7 +15013,7 @@ const rotation = styled.keyframes`
           -5.76px -5.76px 0 0px #ffffff;
   }
 `;
-const LoaderWrapper = styled__default["default"].div`
+const LoaderWrapper = dt.div`
   font-size: 16px;
   display: flex;
   gap: 20px;
@@ -13365,7 +15026,7 @@ const LoaderWrapper = styled__default["default"].div`
     font-size: 12px;
   }
 `;
-const Loader = styled__default["default"].span`
+const Loader = dt.span`
   font-size: 10px;
   width: 4px;
   height: 4px;
@@ -13375,17 +15036,17 @@ const Loader = styled__default["default"].span`
   animation: ${rotation} 1.1s infinite ease;
   transform: translateZ(0);
 `;
-const BannerIcon = styled__default["default"].div`
+const BannerIcon = dt.div`
   align-items: center;
   display: flex;
 `;
-const MainDetails = styled__default["default"].div`
+const MainDetails = dt.div`
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 16px;
 `;
-const SubDetails = styled__default["default"].span`
+const SubDetails = dt.span`
   font-size: 16px;
   font-weight: 400;
   @media (max-width: 1536px) {
@@ -13395,15 +15056,15 @@ const SubDetails = styled__default["default"].span`
     font-size: 12px;
   }
 `;
-const ProductName = styled__default["default"].span`
+const ProductName = dt.span`
   color: #8b8989;
 `;
-const ToggleContainer = styled__default["default"].div`
+const ToggleContainer = dt.div`
   cursor: "pointer";
   display: flex;
   align-items: center;
 `;
-const CollapseMenuItemContentContainer = styled__default["default"].div`
+const CollapseMenuItemContentContainer = dt.div`
   font-weight: 500;
   font-size: 14px;
   margin-top: 12px;
@@ -13412,14 +15073,14 @@ const CollapseMenuItemContentContainer = styled__default["default"].div`
     font-size: 12px;
   }
 `;
-const MainContainer$3 = styled__default["default"].div`
+const MainContainer$3 = dt.div`
   width: ${props => props.width};
   height: ${props => props.height};
   display: flex;
   gap: 20px;
   padding: 20px 0 4px;
 `;
-const DraftTag$1 = styled__default["default"].div`
+const DraftTag$1 = dt.div`
   color: #E41111;
   border: 2px solid #E41111;
   font-size: 20px;
@@ -13427,7 +15088,7 @@ const DraftTag$1 = styled__default["default"].div`
   height: fit-content;
 `;
 
-const MainContainer$2 = styled__default["default"].div`
+const MainContainer$2 = dt.div`
     width: ${props => props.width};
     height: ${props => props.height};
     font-family: 'Poppins', sans-serif;
@@ -13437,63 +15098,63 @@ const MainContainer$2 = styled__default["default"].div`
     border-radius: 12px;
     border: 1px solid #D0D0D0;
 `;
-const TitleWrapper = styled__default["default"].div`
+const TitleWrapper = dt.div`
     display: flex;
     align-items: center;
     margin-bottom: 20px;
     gap: 6px;
 `;
-const CardTitle = styled__default["default"].h5`
+const CardTitle = dt.h5`
     font-size: 14px;
     font-weight: 400;
     margin: 0;
 `;
-const Headline = styled__default["default"].h6`
+const Headline = dt.h6`
     font-size: 12px;
     font-weight: 500;
     margin: 0;
 `;
-const Block = styled__default["default"].div`
+const Block = dt.div`
     margin-bottom: 12px;
 `;
-const Text = styled__default["default"].p`
+const Text = dt.p`
     color: #8B8989;
     font-size: 12px;
     font-weight: 400;
     margin: 0;
 `;
-styled__default["default"].span`
+dt.span`
     color: #229E38;
     font-size: 12px;
     font-weight: 400;
     text-decoration: underline;
     cursor: pointer;
 `;
-const DetailsWrapper = styled__default["default"].div`
+const DetailsWrapper = dt.div`
     display: flex;
     gap: 12px;
     align-items: stretch;
     margin-top: 12px;
 `;
-const KeyBlock = styled__default["default"].div`
+const KeyBlock = dt.div`
     /* position: relative; */
 `;
-const Key = styled__default["default"].span`
+const Key = dt.span`
     display: inline-flex;
     align-items: center;
     gap: 4px;
     font-size: 12px;
     font-weight: 500;
 `;
-const Count = styled__default["default"].span`
+const Count = dt.span`
     color: #8B8989;
     font-size: 12px;
     font-weight: 400;
 `;
-const Seperator = styled__default["default"].div`
+const Seperator = dt.div`
     border-right: 1px solid #F2F2F2;
 `;
-const ButtonWrap = styled__default["default"].div`
+const ButtonWrap = dt.div`
     display: flex;
     justify-content: flex-start;
 `;
@@ -13759,7 +15420,7 @@ const scrollableStyles$4 = `
     border-radius: 5px;
   }
 `;
-const ModalWrapper = styled__default["default"].dialog`
+const ModalWrapper = dt.dialog`
   width: 100vw;
   height: 100vh;
   padding: 20px;
@@ -13775,30 +15436,30 @@ const ModalWrapper = styled__default["default"].dialog`
     align-content: center;
   }
 `;
-const Modal = styled__default["default"].div`
+const Modal = dt.div`
     width: 79%;
     max-width: 1500px;
     margin: 0 auto;
     ${scrollableStyles$4}
 `;
-const ModalHeader = styled__default["default"].div`
+const ModalHeader = dt.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 32px;
 `;
-const ModalBody = styled__default["default"].div`
+const ModalBody = dt.div`
     ${scrollableStyles$4}
     max-height: 80vh;
 `;
-const ModalTitle = styled__default["default"].h5`
+const ModalTitle = dt.h5`
     font-family: 'Poppins', sans-serif;
     font-size: 32px;
     font-weight: 500;
     color: white;
     margin: 0;
 `;
-const ModalClose = styled__default["default"].button`
+const ModalClose = dt.button`
     outline: none;
     cursor: pointer;
     border: none;
@@ -24043,7 +25704,7 @@ const TheGiantCompanyIcon = _ref => {
   })));
 };
 
-const MainContainer$1 = styled__default["default"].div`
+const MainContainer$1 = dt.div`
   display: flex;
   position: relative;
   font-family: "Poppins", sans-serif;
@@ -24053,7 +25714,7 @@ const MainContainer$1 = styled__default["default"].div`
   height: ${props => props.height};
   border-radius: 12px;
 `;
-const PanelContainer = styled__default["default"].div`
+const PanelContainer = dt.div`
   display: flex;
   align-content: center;
   flex-direction: column;
@@ -24069,27 +25730,27 @@ const PanelContainer = styled__default["default"].div`
     padding: 12px 0 0;
   }
 `;
-const EventNameAndViewCreativeContainer = styled__default["default"].div`
+const EventNameAndViewCreativeContainer = dt.div`
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 `;
-const EventNameViewCreativeSubContainer = styled__default["default"].div`
+const EventNameViewCreativeSubContainer = dt.div`
   display: flex;
   position: relative;
   align-content: center;
   align-items: center;
   gap: 20px;
 `;
-const DraftTag = styled__default["default"].div`
+const DraftTag = dt.div`
   color: #E41111;
   border: 2px solid #E41111;
   font-size: 20px;
   padding: 6px 18px;
 `;
-styled__default["default"].div`
+dt.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -24101,7 +25762,7 @@ styled__default["default"].div`
     cursor: ${props => !props.disabled ? 'pointer' : 'default'};
   }
 `;
-styled__default["default"].h4`
+dt.h4`
   display: flex;  
   line-height: 19px;
   font-size: 14px;
@@ -24114,7 +25775,7 @@ styled__default["default"].h4`
     font-size: 12px;
   }
 `;
-const ViewCreativeButtonAndListBoxContainer = styled__default["default"].div`
+const ViewCreativeButtonAndListBoxContainer = dt.div`
   position: relative;
   overflow: visible;
   font-size: 18px;
@@ -24125,21 +25786,21 @@ const ViewCreativeButtonAndListBoxContainer = styled__default["default"].div`
     font-size: 12px;
   }
 `;
-const ViewCreativeListBoxContainer = styled__default["default"].div`
+const ViewCreativeListBoxContainer = dt.div`
   display: flex;
   position: absolute;
   left: ${props => props.left};
   top:  ${props => props.top};
   z-index:1000;
 `;
-const FilterValuesContainer = styled__default["default"].div`
+const FilterValuesContainer = dt.div`
   display: flex;
   align-content: center;
   align-items: center;
   width: 100%;
   margin: 0.5rem 0 0 0;
 `;
-const FilterValue = styled__default["default"].p`
+const FilterValue = dt.p`
   color: #212121;
   margin: 0;
   font-size: 14px;
@@ -24151,32 +25812,32 @@ const FilterValue = styled__default["default"].p`
     font-size: 12px;
   }
 `;
-const FieldsDelimiter = styled__default["default"].p`
+const FieldsDelimiter = dt.p`
   color: #ccc;
   margin: 0;
 `;
-const Retailer = styled__default["default"].div`
+const Retailer = dt.div`
   color: #1b30aa;
   margin: 0;
   margin-inline-end: 5px;
 `;
-const RetailerIconContainer = styled__default["default"].div`
+const RetailerIconContainer = dt.div`
   display: flex;
   align-items: center;
 `;
-const ObjectiesContainer = styled__default["default"].div`
+const ObjectiesContainer = dt.div`
   max-width: 70%;
 `;
-const ObjectiesAndPeriodsContainer = styled__default["default"].div`
+const ObjectiesAndPeriodsContainer = dt.div`
   display: flex;
   gap: 40px;
   width: 100%;
   margin-top: 8px;
 `;
-const ObjectivesTitle = styled__default["default"].strong`
+const ObjectivesTitle = dt.strong`
   font-weight: 500;
 `;
-const ObjectivesDescription = styled__default["default"].p`
+const ObjectivesDescription = dt.p`
   margin: 0;
   font-size: 14px;
   font-weight: 400;
@@ -24187,19 +25848,19 @@ const ObjectivesDescription = styled__default["default"].p`
     font-size: 12px;
   }
 `;
-styled__default["default"].a`
+dt.a`
   color: ${props => props.disabled ? '#B1B1B1' : '#1b30aa'};
   &:hover {
     cursor: ${props => !props.disabled ? 'pointer' : 'default'};
   }
 `;
-styled__default["default"].div`
+dt.div`
   align-items: center;
   justify-content: flex-end;
   min-height: 1.5rem;
 `;
-styled__default["default"].div``;
-const PeriodsContainer = styled__default["default"].div`
+dt.div``;
+const PeriodsContainer = dt.div`
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
@@ -24209,11 +25870,11 @@ const PeriodsContainer = styled__default["default"].div`
     font-size: 12px;
   }  
 `;
-const SubLineContainer = styled__default["default"].div`
+const SubLineContainer = dt.div`
   display: flex;
   width: 100%;
 `;
-const PeriodLabel = styled__default["default"].strong`
+const PeriodLabel = dt.strong`
   font-size: 14px;
   font-weight: 500;
   @media (max-width: 1536px) {
@@ -24223,7 +25884,7 @@ const PeriodLabel = styled__default["default"].strong`
     font-size: 12px;
   }  
 `;
-const PeriodValue = styled__default["default"].p`
+const PeriodValue = dt.p`
   line-height: 19px;
   font-size: 14px;
   font-weight: 400;
@@ -24493,7 +26154,7 @@ CollapseHeader.defaultProps = {
   datesTitle: "Event Dates: "
 };
 
-const QuickFilterInput = styled__default["default"].div`
+const QuickFilterInput = dt.div`
   position: relative;
   align-content: center;
   justify-content: center;
@@ -24504,14 +26165,14 @@ const QuickFilterInput = styled__default["default"].div`
   font-size: 14px;
   border-radius: 8px;
 `;
-const Label$1 = styled__default["default"].label`
+const Label$1 = dt.label`
   font-size: 14px;
   font-weight: 500;
   color: ${props => props.disabled ? '#D0D0D0' : '212121'};
   font-family: "Poppins";
   white-space: nowrap;
 `;
-const InputContainer$1 = styled__default["default"].div`
+const InputContainer$1 = dt.div`
   display: flex;
   justify-content: space-between;
   align-content: center;
@@ -24542,12 +26203,12 @@ const InputContainer$1 = styled__default["default"].div`
       ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
   }
 `;
-const InputSubContainer$1 = styled__default["default"].div`
+const InputSubContainer$1 = dt.div`
   display: flex;
   color: ${props => props.disabled ? '#888' : '#212121'};
   gap: 8px;
 `;
-const StyledInput$1 = styled__default["default"].input`
+const StyledInput$1 = dt.input`
   width: 100%;
   height: 20px;
   font-family: "Poppins";
@@ -24561,7 +26222,7 @@ const StyledInput$1 = styled__default["default"].input`
     color: ${props => props.disabled ? '#D0D0D0' : '#b1b1b1'};
   }
 `;
-const OptionsContainer$1 = styled__default["default"].div`
+const OptionsContainer$1 = dt.div`
   margin: 0;
   top: 100%;
   left: 0;
@@ -24570,7 +26231,7 @@ const OptionsContainer$1 = styled__default["default"].div`
   background-color: #fff;
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};
 `;
-const OptionsSubContainer$1 = styled__default["default"].ul`
+const OptionsSubContainer$1 = dt.ul`
   list-style: none;
   font-weight: 400;
   margin: 0;
@@ -24588,7 +26249,7 @@ const OptionsSubContainer$1 = styled__default["default"].ul`
   max-height: 400px;
   overflow: auto;
 `;
-const OptionItem$1 = styled__default["default"].li`
+const OptionItem$1 = dt.li`
   padding: 10px;
   cursor: pointer;
   color: #212121;
@@ -24605,35 +26266,36 @@ const OptionItem$1 = styled__default["default"].li`
     color: #229e38;
   }
 `;
-const ErrorMessage$1 = styled__default["default"].div`
+const ErrorMessage$1 = dt.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
 `;
-const IconContainer$2 = styled__default["default"].div`
+const IconContainer$2 = dt.div`
   padding: 2px;
   cursor: pointer;
 `;
-const DeleteIcon = styled__default["default"].div`
+const DeleteIcon = dt.div`
   right: 40px;
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = React.useState(false);
   const [showOptions, setShowOptions] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
@@ -24850,7 +26512,7 @@ QuickFilterDropdownSingle.defaultProps = {
   showLabelOnTop: true
 };
 
-const DropdownWrapper = styled__default["default"].div`
+const DropdownWrapper = dt.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -24863,7 +26525,7 @@ const DropdownWrapper = styled__default["default"].div`
   font-size: 14px;
   border-radius: 10px;
 `;
-const Label = styled__default["default"].label`
+const Label = dt.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -24886,7 +26548,7 @@ const Label = styled__default["default"].label`
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
 `;
-const InputContainer = styled__default["default"].div`
+const InputContainer = dt.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -24917,7 +26579,7 @@ const InputContainer = styled__default["default"].div`
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'}; 
   }
 `;
-const InputSubContainer = styled__default["default"].div`
+const InputSubContainer = dt.div`
     display: flex;       
     flex-direction: column;
     flex-wrap: nowrap;     
@@ -24936,7 +26598,7 @@ const InputSubContainer = styled__default["default"].div`
     outline: none;
     color: ${props => props.disabled ? '#888' : '#212121'};     
 `;
-const StyledInput = styled__default["default"].input`
+const StyledInput = dt.input`
   width: calc(100% - 20px);
   height: 25px;
   font-family: Poppins;
@@ -24947,7 +26609,7 @@ const StyledInput = styled__default["default"].input`
   color: ${props => props.disabled ? '#888' : '#212121'};    
   border: none;  
 `;
-const OptionsContainer = styled__default["default"].div`  
+const OptionsContainer = dt.div`  
   margin: 0;   
   top: 100%; 
   left: 0;
@@ -24957,7 +26619,7 @@ const OptionsContainer = styled__default["default"].div`
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
 
 `;
-const OptionsSubContainer = styled__default["default"].ul`
+const OptionsSubContainer = dt.ul`
   list-style: none;
   font-weight: 400;
   margin: 0;
@@ -24975,7 +26637,7 @@ const OptionsSubContainer = styled__default["default"].ul`
   max-height: 400px;
   overflow: auto;
 `;
-const OptionItem = styled__default["default"].li`  
+const OptionItem = dt.li`  
   gap: 8px;
   padding: 10px;
   cursor: pointer;
@@ -24990,12 +26652,12 @@ const OptionItem = styled__default["default"].li`
     background-color: #EDF6FF;
   }
 `;
-const ErrorMessage = styled__default["default"].div`
+const ErrorMessage = dt.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
 `;
-const SelectedOptionsContainer = styled__default["default"].div`
+const SelectedOptionsContainer = dt.div`
     display: flex;   
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -25011,7 +26673,7 @@ const SelectedOptionsContainer = styled__default["default"].div`
     background-color: #fff;    
     gap: 4px;   
 `;
-const SelectedOptionItem = styled__default["default"].div`  
+const SelectedOptionItem = dt.div`  
   display: flex;  
   margin: 0;
   flex-wrap: nowrap; 
@@ -25025,29 +26687,30 @@ const SelectedOptionItem = styled__default["default"].div`
   padding: 4px 6px;
   font-size: 12px;
 `;
-const IconContainer$1 = styled__default["default"].div`  
+const IconContainer$1 = dt.div`  
   display: flex;  
   padding: 2px;
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = React.useState(false);
   const [showOptions, setShowOptions] = React.useState(false);
   const [inputValue, setInputValue] = React.useState('');
@@ -25331,7 +26994,7 @@ QuickFilterDropdownMultiSelection.defaultProps = {
   showLabelOnTop: true
 };
 
-const QuickFilterMain = styled__default["default"].div`
+const QuickFilterMain = dt.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -25503,7 +27166,7 @@ classnames.exports;
 var classnamesExports = classnames.exports;
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-const StyledContainer = styled__default["default"].div`
+const StyledContainer = dt.div`
   font-family: "Poppins", sans-serif;
   width: ${props => props.width};
   height: ${props => props.height};
@@ -25516,7 +27179,7 @@ const StyledContainer = styled__default["default"].div`
   background-color: white;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 `;
-const OneColumnContainerMainDiv = styled__default["default"].div`
+const OneColumnContainerMainDiv = dt.div`
   position: relative;
   /* align-items: flex-start; */
   justify-content: center;
@@ -25529,40 +27192,40 @@ const OneColumnContainerMainDiv = styled__default["default"].div`
     box-sizing: border-box;
   }
 `;
-const InfoTextContainer = styled__default["default"].div`
+const InfoTextContainer = dt.div`
   background: white;
   overflow: auto;
   padding: 20px;
   box-sizing: border-box;
 `;
-const InfoTitleLabel = styled__default["default"].div`
+const InfoTitleLabel = dt.div`
   font-weight: 600;
   color: black;
   margin: 0px 0px 10px 0px;
   font-size: 18px;
   line-height: 32px;
 `;
-const InfoTextLabel = styled__default["default"].div`
+const InfoTextLabel = dt.div`
   color: black;
   font-size: 14px;
   line-height: 20px;
   font-weight: 400;
 `;
-const ColumnTitle = styled__default["default"].span`
+const ColumnTitle = dt.span`
   color: black;
   display: inline-block;
   font-size: 20px;
   font-weight: 500;
   padding: 20px 20px 0;
 `;
-const IconContainer = styled__default["default"].div`
+const IconContainer = dt.div`
   width: 20px;
   height: 20px;
   top: 10px;
   right: 10px;
   position: absolute;
 `;
-const LoadingDiv = styled__default["default"].div`
+const LoadingDiv = dt.div`
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -25570,14 +27233,14 @@ const LoadingDiv = styled__default["default"].div`
   text-align: center;
   gap: 10px;
 `;
-const BannerContainer = styled__default["default"].div`
+const BannerContainer = dt.div`
   position: absolute;
   z-index: 99;
   top: 18px;
   right: ${props => props.right};
   user-select: none;
 `;
-const OutBanner$1 = styled__default["default"].div`
+const OutBanner$1 = dt.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -25772,7 +27435,7 @@ const scrollableStyles$3 = `
     border-radius: 5px;
   }
 `;
-const ControlsContainer$6 = styled__default["default"].div`
+const ControlsContainer$6 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   font-style: normal;
@@ -25791,18 +27454,18 @@ const ControlsContainer$6 = styled__default["default"].div`
     box-sizing: border-box;
   }
 `;
-const Controls$4 = styled__default["default"].div`
+const Controls$4 = dt.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   background: white;  
 `;
-const TitleAndValueContainer$3 = styled__default["default"].div`
+const TitleAndValueContainer$3 = dt.div`
   display: flex;
   flex-direction: column; 
 `;
-const Title$9 = styled__default["default"].h4`
+const Title$9 = dt.h4`
   font-weight: 400;
   font-size: 20px;
   margin: 0;
@@ -25813,12 +27476,12 @@ const Title$9 = styled__default["default"].h4`
     font-size: 10px;
   }
 `;
-const CurrencySignAndFormattedValueContainer$1 = styled__default["default"].div`
+const CurrencySignAndFormattedValueContainer$1 = dt.div`
   display: flex;
   align-items: center;
   gap: 16px;
 `;
-const CurrencySignOrPercent = styled__default["default"].span`
+const CurrencySignOrPercent = dt.span`
   font-weight: 500;
   font-size: 16px;
   @media (max-width: 1536px) {
@@ -25828,7 +27491,7 @@ const CurrencySignOrPercent = styled__default["default"].span`
     font-size: 11px;
   }
 `;
-const FormattedValueText = styled__default["default"].div`
+const FormattedValueText = dt.div`
   font-weight: 500;
   font-size: 40px;
   @media (max-width: 1536px) {
@@ -25911,7 +27574,7 @@ FormattedValue$2.defaultProps = {
   isPercent: false
 };
 
-const ControlsContainer$5 = styled__default["default"].div`
+const ControlsContainer$5 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   color: #212121;
@@ -25919,35 +27582,35 @@ const ControlsContainer$5 = styled__default["default"].div`
   height: ${props => props.height};
   min-width: 250px;
 `;
-const Controls$3 = styled__default["default"].div`
+const Controls$3 = dt.div`
   height: 100%;
   width: 100%;
   background: white;
   display: flex;
   flex-direction: column;
 `;
-const TooltipDiv$2 = styled__default["default"].div`
+const TooltipDiv$2 = dt.div`
   border-radius: 5px;
   padding: 8px 12px;
   background: white;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
   margin: 0;
 `;
-const TooltipLabel$2 = styled__default["default"].div`
+const TooltipLabel$2 = dt.div`
   color: #212121;
   font-size: 14px;
   font-weight: 400;
   width: fit-content;
 `;
-const TooltipTitle$1 = styled__default["default"].div`
+const TooltipTitle$1 = dt.div`
   color: #212121;
   font-size: 14px;
   font-weight: 600;
 `;
-const TitleAndValueContainer$2 = styled__default["default"].div`
+const TitleAndValueContainer$2 = dt.div`
   padding: 0 1rem;
 `;
-const Title$8 = styled__default["default"].h5`
+const Title$8 = dt.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -25959,7 +27622,7 @@ const Title$8 = styled__default["default"].h5`
     font-size: 14px;
   }
 `;
-const EventWeeksLegendMainContainer = styled__default["default"].div`
+const EventWeeksLegendMainContainer = dt.div`
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -25967,14 +27630,14 @@ const EventWeeksLegendMainContainer = styled__default["default"].div`
   padding-left: 55px;
   align-items: center;
 `;
-const EventWeeksLegendDataElementsContainer = styled__default["default"].div`
+const EventWeeksLegendDataElementsContainer = dt.div`
   display: flex;
   margin: 0px;
   align-items: center;
   justify-content: space-around;
   width: 100%;
 `;
-const EventWeeksLegendDataElement = styled__default["default"].h4`
+const EventWeeksLegendDataElement = dt.h4`
   display: flex;
   font-weight: ${props => props.fontWeight};
   font-size: 12px;
@@ -25996,7 +27659,7 @@ const EventWeeksLegendDataElement = styled__default["default"].h4`
     font-size: 10px;
   }
 `;
-const LegendWrapper = styled__default["default"].div`
+const LegendWrapper = dt.div`
   padding-top: 15px;
 `;
 
@@ -26034,7 +27697,7 @@ const LegendLineIcon = ({
   fill: color
 }));
 
-const ControlsContainer$4 = styled__default["default"].div`
+const ControlsContainer$4 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   font-size: ${props => props.rootFont};
@@ -26046,7 +27709,7 @@ const ControlsContainer$4 = styled__default["default"].div`
     box-sizing: border-box;
   }
 `;
-const Controls$2 = styled__default["default"].div`
+const Controls$2 = dt.div`
   display: flex;
   gap: 20px;
   flex-direction: column;
@@ -26054,7 +27717,7 @@ const Controls$2 = styled__default["default"].div`
   height: 100%;
   background: white;
 `;
-const LegendDataContainer = styled__default["default"].div`
+const LegendDataContainer = dt.div`
   display: flex;
   justify-content: center;
   gap: 40px;
@@ -26066,11 +27729,11 @@ const LegendDataContainer = styled__default["default"].div`
     gap: 30px;
   }
 `;
-const TitleAndIconContainer = styled__default["default"].div`
+const TitleAndIconContainer = dt.div`
   display: flex;
   align-items: center;
 `;
-const Title$7 = styled__default["default"].h4`
+const Title$7 = dt.h4`
   font-weight: 400;
   font-size: 14px;
   line-height: 27px;
@@ -26082,7 +27745,7 @@ const Title$7 = styled__default["default"].h4`
     font-size: 12px;
   }
 `;
-const LegendColorRectangle$1 = styled__default["default"].div`
+const LegendColorRectangle$1 = dt.div`
   width: 0.875rem;
   min-width: 0.875rem;
   height: 0.875rem;
@@ -26483,7 +28146,7 @@ const scrollableStyles$2 = `
     border-radius: 5px;
   }
 `;
-const ControlsContainer$3 = styled__default["default"].div`
+const ControlsContainer$3 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   font-style: normal;
@@ -26502,7 +28165,7 @@ const ControlsContainer$3 = styled__default["default"].div`
     box-sizing: border-box;
   }
 `;
-const Controls$1 = styled__default["default"].div`
+const Controls$1 = dt.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -26510,7 +28173,7 @@ const Controls$1 = styled__default["default"].div`
   background: white;
   border-radius: 12px;  
 `;
-const TooltipDiv$1 = styled__default["default"].div`
+const TooltipDiv$1 = dt.div`
   display: flex;
   background: white;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
@@ -26518,7 +28181,7 @@ const TooltipDiv$1 = styled__default["default"].div`
   padding: 6px 10px;
   margin: 0;
 `;
-const TooltipLabel$1 = styled__default["default"].p`
+const TooltipLabel$1 = dt.p`
   color: #212121;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
@@ -26528,12 +28191,12 @@ const TooltipLabel$1 = styled__default["default"].p`
   line-height: normal;
   margin: 0;
 `;
-const TitleAndValueContainer$1 = styled__default["default"].div`
+const TitleAndValueContainer$1 = dt.div`
   display: flex;
   flex-direction: column;
   padding: 0 20px;
 `;
-const Title$6 = styled__default["default"].h4`
+const Title$6 = dt.h4`
   font-weight: 500;
   font-size: 1rem;
   margin: 0;
@@ -26544,13 +28207,13 @@ const Title$6 = styled__default["default"].h4`
     font-size: 12px;
   }
 `;
-const CurrencySignAndFormattedValueContainer = styled__default["default"].div`
+const CurrencySignAndFormattedValueContainer = dt.div`
   display: flex;
   align-items: center;
   gap: 5px;
   align-items: baseline;
 `;
-const CurrencySign$1 = styled__default["default"].span`
+const CurrencySign$1 = dt.span`
   font-weight: 500;
   font-size: 16px;
   @media (max-width: 1536px) {
@@ -26560,7 +28223,7 @@ const CurrencySign$1 = styled__default["default"].span`
     font-size: 11px;
   }
 `;
-const FormattedValue$1 = styled__default["default"].div`
+const FormattedValue$1 = dt.div`
   font-weight: 500;
   font-size: 40px;
   @media (max-width: 1536px) {
@@ -26570,7 +28233,7 @@ const FormattedValue$1 = styled__default["default"].div`
     font-size: 20px;
   }
 `;
-const TextAfterValue = styled__default["default"].div`  
+const TextAfterValue = dt.div`  
   font-weight: 400;
   font-size: 12px;
   @media (max-width: 1536px) {
@@ -26580,45 +28243,45 @@ const TextAfterValue = styled__default["default"].div`
     font-size: 10px;
   }
 `;
-const DoughnutChartAndLegendContainer = styled__default["default"].div`
+const DoughnutChartAndLegendContainer = dt.div`
   display: flex;
   justify-content: space-between;
   margin-top: auto;
   padding: 0 20px ;
   margin-bottom: 20px; 
 `;
-const DoughnutChartContainer = styled__default["default"].div`
+const DoughnutChartContainer = dt.div`
   display: flex;
   align-items: center;   
   min-width: 90px;
   min-height: 90px; 
 `;
-const LegendContainer$1 = styled__default["default"].div`
+const LegendContainer$1 = dt.div`
   padding-left: 10px;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly; 
 `;
-const LegendControlsContainer = styled__default["default"].div`
+const LegendControlsContainer = dt.div`
   display: flex;
   gap: 0.5rem;
   align-items: center;
   margin-bottom: 0.375rem;
 `;
-const LegendTitleAndFormatedValueContainer = styled__default["default"].div`
+const LegendTitleAndFormatedValueContainer = dt.div`
   flex-grow: 1;
 `;
-styled__default["default"].div`
+dt.div`
   font-size: 0.875rem;
 `;
-const LegendColorRectangle = styled__default["default"].div`
+const LegendColorRectangle = dt.div`
   width: 0.875rem;
   min-width: 0.875rem;
   height: 0.875rem;
   border-radius: 2px;
   background: ${props => props.color};
 `;
-const LegendTitle = styled__default["default"].h5`
+const LegendTitle = dt.h5`
   font-weight: 400;
   font-size: 16px;
   gap: 5px;
@@ -26632,7 +28295,7 @@ const LegendTitle = styled__default["default"].h5`
     font-size: 10px;
   }
 `;
-const LegendFormattedValue = styled__default["default"].span`
+const LegendFormattedValue = dt.span`
   font-weight: 500;
   white-space: nowrap;
 `;
@@ -26841,7 +28504,7 @@ CustomTooltip.defaultProps = {
   isPercent: false
 };
 
-const TooltipContainer$1 = styled__default["default"].div`
+const TooltipContainer$1 = dt.div`
   --tooltip-text-color: black;
   --tooltip-background-color: white;
   --tooltip-margin: 40px;
@@ -26851,11 +28514,11 @@ const TooltipContainer$1 = styled__default["default"].div`
   top: ${props => props.top};
   left: ${props => props.left};
 `;
-const TooltipWrapper = styled__default["default"].div`
+const TooltipWrapper = dt.div`
   display: inline-block;
   position: relative;
 `;
-const TooltipTip = styled__default["default"].div`
+const TooltipTip = dt.div`
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
   position: absolute;
   border-radius: 4px;
@@ -26970,7 +28633,7 @@ Tooltip.defaultProps = {
   content: ''
 };
 
-const ControlsContainer$2 = styled__default["default"].div`
+const ControlsContainer$2 = dt.div`
   font-family: "Poppins", sans-serif;
   background-color: white;
   color: ${props => props.textColor};
@@ -26995,7 +28658,7 @@ const ControlsContainer$2 = styled__default["default"].div`
     border-radius: 5px;
   }
 `;
-styled__default["default"].div`
+dt.div`
   overflow-y: auto;
   height: 100%;
 
@@ -27013,14 +28676,14 @@ styled__default["default"].div`
     border-radius: 5px;
   }
 `;
-const CardHeader = styled__default["default"].div`
+const CardHeader = dt.div`
   padding: 16px;
   position: sticky;
   top: 0;
   z-index: 10;
   background-color: white;
 `;
-const TotalValue = styled__default["default"].div`
+const TotalValue = dt.div`
   font-weight: 500;
   font-size: 40px;
   display: flex;
@@ -27033,7 +28696,7 @@ const TotalValue = styled__default["default"].div`
     font-size: 20px;
   }
 `;
-const Title$5 = styled__default["default"].h4`
+const Title$5 = dt.h4`
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
@@ -27045,7 +28708,7 @@ const Title$5 = styled__default["default"].h4`
     font-size: 12px;
   }
 `;
-const CurrencySign = styled__default["default"].span`
+const CurrencySign = dt.span`
   font-weight: 500;
   font-size: 16px;
   @media (max-width: 1536px) {
@@ -27299,7 +28962,7 @@ TotalHorizontalCharts.defaultProps = {
   hideTitle: false
 };
 
-const ControlsContainer$1 = styled__default["default"].div`
+const ControlsContainer$1 = dt.div`
   // position: relative;
   display: flex;
   flex-direction: column;
@@ -27311,12 +28974,12 @@ const ControlsContainer$1 = styled__default["default"].div`
   box-shadow: ${props => props.showBorderShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : null};
   border-radius: 12px;
 `;
-const TitleAndValueContainer = styled__default["default"].div`
+const TitleAndValueContainer = dt.div`
   display: flex;
   justify-content: space-between;  
   padding: 0; 
 `;
-const ItemsContainer = styled__default["default"].div`
+const ItemsContainer = dt.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* Two columns */
   padding: 20px;
@@ -27324,13 +28987,13 @@ const ItemsContainer = styled__default["default"].div`
   width: 90%;
   height: 100%;
 `;
-const ItemContainer = styled__default["default"].div`
+const ItemContainer = dt.div`
   display: flex;  
   justify-content: flex-start;
   flex-direction: column;
   flex-wrap: wrap;
 `;
-const Title$4 = styled__default["default"].h4`
+const Title$4 = dt.h4`
   font-size: 18px;
   font-weight: 500;
   margin: 0;
@@ -27341,7 +29004,7 @@ const Title$4 = styled__default["default"].h4`
     font-size: 14px;
   }
 `;
-const ItemTitle = styled__default["default"].h4`
+const ItemTitle = dt.h4`
   font-size: 18px;
   font-weight: 500;
   margin: 0;
@@ -27352,7 +29015,7 @@ const ItemTitle = styled__default["default"].h4`
     font-size: 12px;
   }
 `;
-const FormattedValue = styled__default["default"].div`
+const FormattedValue = dt.div`
   font-weight: 500;
   font-size: 40px;
   display: flex;
@@ -27365,7 +29028,7 @@ const FormattedValue = styled__default["default"].div`
     font-size: 20px;
   }
 `;
-const OutBanner = styled__default["default"].div`
+const OutBanner = dt.div`
   display: flex;
   gap: 8px;
   align-items: center;
@@ -27392,7 +29055,7 @@ const OutBanner = styled__default["default"].div`
     }
   }
 `;
-const TextBeforeAndAfterValue = styled__default["default"].span`
+const TextBeforeAndAfterValue = dt.span`
   font-weight: 500;
   font-size: 16px;
   @media (max-width: 1536px) {
@@ -27512,8 +29175,8 @@ const scrollableStyles$1 = `
     border-radius: 5px;
   }
 `;
-const MainContainer = styled__default["default"].div``;
-const ModalOverlay = styled__default["default"].div`
+const MainContainer = dt.div``;
+const ModalOverlay = dt.div`
   position: fixed;
   z-index: 100;
   top: 0;
@@ -27525,7 +29188,7 @@ const ModalOverlay = styled__default["default"].div`
   justify-content: center;
   align-items: center;
 `;
-const ModalContent = styled__default["default"].div`  
+const ModalContent = dt.div`  
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-size: 18px;
@@ -27537,7 +29200,7 @@ const ModalContent = styled__default["default"].div`
   width: ${props => props.width};
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
 `;
-const TitleContainer$1 = styled__default["default"].div`
+const TitleContainer$1 = dt.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -27545,12 +29208,12 @@ const TitleContainer$1 = styled__default["default"].div`
   margin: 0;
   border-bottom: 1px solid #b1b1b1;
 `;
-const Title$3 = styled__default["default"].p`
+const Title$3 = dt.p`
   font-weight: 400;
   font-size: 24px;
   margin: 0;
 `;
-const ChartsContainer = styled__default["default"].div`
+const ChartsContainer = dt.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* 3 columns */
   flex-wrap: wrap;  
@@ -27560,7 +29223,7 @@ const ChartsContainer = styled__default["default"].div`
   height: ${props => props.height};
   padding: 10px 0 0 0;
 `;
-const ChartItemMainContainer = styled__default["default"].div`
+const ChartItemMainContainer = dt.div`
  // display: flex;
   margin: 10px 10px 10px 10px;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
@@ -27568,29 +29231,29 @@ const ChartItemMainContainer = styled__default["default"].div`
   padding-right: 10px;
   
 `;
-const ChartItemContainer = styled__default["default"].div`
+const ChartItemContainer = dt.div`
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin: 20px 10px;
 `;
-const ChartItemTitle = styled__default["default"].h3`
+const ChartItemTitle = dt.h3`
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   margin: 0 10px;
   color: ${props => props.subtitleTextColor};
 `;
-const ChartItemIconContainer = styled__default["default"].h3`
+const ChartItemIconContainer = dt.h3`
   margin: 0 0 0 10px;
 `;
-const ChartContentContainer = styled__default["default"].div`
+const ChartContentContainer = dt.div`
   font-weight: 500;
   font-size: 14px;
   margin: 0;
   border-radius: 12px;
 `;
-const CloseXIconContainer = styled__default["default"].div`
+const CloseXIconContainer = dt.div`
   display: block;
   margin: 0;
   cursor: pointer;
@@ -27857,29 +29520,29 @@ const scrollableStyles = `
     border-radius: 5px;
   }
 `;
-const TopToggleListMainContainer = styled__default["default"].div`
+const TopToggleListMainContainer = dt.div`
     font-family: "Lato", sans-serif;
     color: #212121;
     padding: 0 24px;
     width: ${props => props.width};
 `;
-const Title$2 = styled__default["default"].h4`
+const Title$2 = dt.h4`
     font-size: 14px;
     font-weight: 600;
     margin: 20px 0 12px;
 `;
-const ListContainer = styled__default["default"].ul`
+const ListContainer = dt.ul`
     height: ${props => props.height};
     padding: 0;
     margin: 0;
     list-style-type: none;
     ${scrollableStyles}
 `;
-const ListItem = styled__default["default"].li`
+const ListItem = dt.li`
     padding: 20px 0;
     border-bottom: 1px solid #F3F4F6;
 `;
-const Item = styled__default["default"].span`
+const Item = dt.span`
     font-size: 14px;
     font-weight: 400;
 `;
@@ -27930,7 +29593,7 @@ TopToggleList.defaultProps = {
   }]
 };
 
-const HeatmapContainer = styled__default["default"].div`
+const HeatmapContainer = dt.div`
 
   display: flex;  
   flex-direction: column;  
@@ -27943,19 +29606,19 @@ const HeatmapContainer = styled__default["default"].div`
 `;
 
 // Wrapper with padding
-const HeatmapWrapper = styled__default["default"].div`
+const HeatmapWrapper = dt.div`
   display: flex;
   flex-direction: column;
   padding: 20px;  
   height: ${props => props.height};  
 `;
-const TitleContainer = styled__default["default"].div`
+const TitleContainer = dt.div`
   display: flex;
   align-items: center;
   justify-content: flex-start; 
   margin: 0 0 10px 0; 
 `;
-const Title$1 = styled__default["default"].h3`
+const Title$1 = dt.h3`
   user-select: none;
   text-align: left;
   margin: 0;
@@ -27969,7 +29632,7 @@ const Title$1 = styled__default["default"].h3`
     font-size: 14px;
   }
 `;
-const BarsContainer = styled__default["default"].div`
+const BarsContainer = dt.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -27977,7 +29640,7 @@ const BarsContainer = styled__default["default"].div`
   width: 100%;
   height:  ${props => props.height};
 `;
-const BarWrapper = styled__default["default"].div`
+const BarWrapper = dt.div`
   display: flex;
   flex-direction: column;
   /* align-items: center; */
@@ -27986,7 +29649,7 @@ const BarWrapper = styled__default["default"].div`
   width: ${props => props.width};
   height: ${props => props.height};
 `;
-const BarContainer = styled__default["default"](framerMotion.motion.div)`
+const BarContainer = dt(framerMotion.motion.div)`
   background-color: ${props => props.color};
   display: flex;
   align-items: center;
@@ -27994,13 +29657,13 @@ const BarContainer = styled__default["default"](framerMotion.motion.div)`
   height: ${props => props.height};
   width: 0%; /* Starts at 0% for animation */  
 `;
-const BarLabel = styled__default["default"].span`
+const BarLabel = dt.span`
   color: white;
   font-size: 14px;
   font-weight: 400; 
   user-select: none;
 `;
-const TooltipContainer = styled__default["default"].div`
+const TooltipContainer = dt.div`
   position: absolute;
 
   top: ${props => props.top};
@@ -28037,7 +29700,7 @@ const TooltipContainer = styled__default["default"].div`
     border-top: 12px solid white;
   } */
 `;
-const LegendContainer = styled__default["default"].div`
+const LegendContainer = dt.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -28047,19 +29710,19 @@ const LegendContainer = styled__default["default"].div`
   width: 100%;  
   flex-shrink: 0;  
 `;
-const LegendItem = styled__default["default"].div`
+const LegendItem = dt.div`
   display: flex;
   align-items: center;
   margin-right: 15px;
 `;
-const LegendColorBox = styled__default["default"].div`
+const LegendColorBox = dt.div`
   width: 16px;
   height: 16px;
   margin-right: 8px;
   background-color: ${props => props.color};
   border-radius: 2px;
 `;
-const LegendLabel = styled__default["default"].span`  
+const LegendLabel = dt.span`  
   user-select: none;
   font-family: "Poppins", sans-serif;
   color: #212121;
@@ -28245,11 +29908,11 @@ Heatmap.propTypes = {
   barHeight: PropTypes.string.isRequired
 };
 
-const ButtonWrapper = styled__default["default"].div`
+const ButtonWrapper = dt.div`
   width: fit-content;
   text-align: center;
 `;
-const IconButtonContainer = styled__default["default"].a`
+const IconButtonContainer = dt.a`
   font-size: 14px;
   font-weight: 400;
   display: flex;
@@ -28264,7 +29927,7 @@ const IconButtonContainer = styled__default["default"].a`
   background: ${props => props.backgroundColor.toString()};
   position: relative;
   transition: all .3s;
-  ${props => props.inProgress && styled.css`
+  ${props => props.inProgress && lt`
       pointer-events: none;
       &:after {
         content: 'In progress';
@@ -28291,9 +29954,9 @@ const IconButtonContainer = styled__default["default"].a`
     box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
   }
 `;
-const SpanText = styled__default["default"].span`
+const SpanText = dt.span`
 `;
-const CancelClick = styled__default["default"].span`
+const CancelClick = dt.span`
   display: inherit;
   font-family: "Lato", sans-serif;;
   font-size: 14px;
@@ -28449,7 +30112,7 @@ IconButton.defaultProps = {
   onCancelClick: () => {}
 };
 
-const LinnerContainer = styled__default["default"].div`
+const LinnerContainer = dt.div`
   font-family: "Poppins", sans-serif;
   display: grid;
   gap: 48px 0;
@@ -28461,7 +30124,7 @@ const LinnerContainer = styled__default["default"].div`
   padding: 50px 20px 20px;
   box-sizing: border-box;
 `;
-const DataBox = styled__default["default"].div`
+const DataBox = dt.div`
   height: 100%;
   padding: 0 40px;
   border-left: 1px solid #d0d0d0;
@@ -28475,33 +30138,33 @@ const DataBox = styled__default["default"].div`
     padding-right: 0;
   }
 `;
-const CellItem = styled__default["default"].div`
+const CellItem = dt.div`
   display: flex;
   align-items: center;
 `;
-const DataBoxTitle = styled__default["default"].span`
+const DataBoxTitle = dt.span`
   font-size: 18px;
   display: block;
   margin: 0 0 12px;
 `;
-const BigValue = styled__default["default"].span`
+const BigValue = dt.span`
   font-size: 40px;
   font-weight: 500;
   margin-right: 5px;
 `;
-const CellItemValueSign = styled__default["default"].span`
+const CellItemValueSign = dt.span`
   font-size: 16px;
   font-weight: 400;
 `;
-const ValueChange = styled__default["default"].span`
+const ValueChange = dt.span`
   font-size: 16px;
   font-weight: 400;
 `;
-const CellItemNoValue = styled__default["default"].span`
+const CellItemNoValue = dt.span`
   font-size: 40px;
   font-weight: 500;
 `;
-const PercentageChange = styled__default["default"].div`
+const PercentageChange = dt.div`
   display: flex;
   align-items: center;
   font-size: 16px;
@@ -28616,7 +30279,7 @@ const DoublePanelDataRow = props => {
 //   showPercentChange: false,
 // };
 
-const ControlsContainer = styled__default["default"].div`
+const ControlsContainer = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   color: #212121;
@@ -28624,32 +30287,32 @@ const ControlsContainer = styled__default["default"].div`
   height: ${props => props.height};
   min-width: 250px;
 `;
-const Controls = styled__default["default"].div`
+const Controls = dt.div`
   height: 100%;
   width: 100%;
   background: white;
   display: flex;
   flex-direction: column;
 `;
-const TooltipDiv = styled__default["default"].div`
+const TooltipDiv = dt.div`
   border-radius: 5px;
   padding: 8px 12px;
   background: white;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
   margin: 0;
 `;
-const TooltipLabel = styled__default["default"].div`
+const TooltipLabel = dt.div`
   color: #212121;
   font-size: 14px;
   font-weight: 400;
   width: fit-content;
 `;
-const TooltipTitle = styled__default["default"].div`
+const TooltipTitle = dt.div`
   color: #212121;
   font-size: 14px;
   font-weight: 600;
 `;
-const Title = styled__default["default"].h5`
+const Title = dt.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -28662,10 +30325,10 @@ const Title = styled__default["default"].h5`
     font-size: 14px;
   }
 `;
-const LabelBoldText = styled__default["default"].tspan`
+const LabelBoldText = dt.tspan`
   font-size: 0.7em;
 `;
-const LabelText = styled__default["default"].tspan`
+const LabelText = dt.tspan`
   font-size: 0.6em;
 `;