@desynova-digital/components 9.1.21 → 9.1.22

package/atoms/icon/index.js

@@ -18,6 +18,5 @@ Object.defineProperty(exports, "__ICONNAMES__", {
 });
 exports["default"] = void 0;
 var _icon = _interopRequireWildcard(require("./icon"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var _default = exports["default"] = _icon["default"];

package/atoms/inputText/inputText.js

@@ -17,8 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tokens = require("@desynova-digital/tokens");
 var _excluded = ["theme", "maxLength", "defaultValue", "type", "showLengthCount", "disablePaste"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var InputTextDiv = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: transparent;\n  font-family: \"SFUIText-Medium\";\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n"])));
 var InputError = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n"])), function (props) {
   return _tokens.colors[props.theme].inputError.color;

package/atoms/loader/CircleLoader.jsx

@@ -1,93 +1,93 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-import { colors } from '@desynova-digital/tokens'
-class CircleLoader extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-   
-    return (
-      <LoaderBox {...this.props}>
-        <div>
-          <div className="loader">Loading...</div>
-        </div>
-      </LoaderBox>
-    );
-  }
-}
-
-const propTypes = {
-};
-CircleLoader.propTypes =  {
-  /** The visual style used to convey the label's purpose */
-  theme: PropTypes.oneOf(['light', 'dark', 'nexc'])
-}
-
-const LoaderBox = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  opacity: 1;
-  top: 1px;
-  left: 0px;
-  font-family: 'SFUIText-light';
-
-
-  .loader,
-  .loader:after {
-    border-radius: 50%;
-    width: 10em;
-    height: 10em;
-  }
-  .loader {
-    margin: 0px auto;
-    font-size: 10px;
-    position: relative;
-    text-indent: -9999em;
-    border-top: 1.1em solid #eaeaea;
-    border-right: 1.1em solid #e3e3e3;
-    border-bottom: 1.1em solid #e0e0e0;
-    border-left: 1.1em solid ${(props) => colors[props.theme].label.circleLoader};
-    -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    transform: translateZ(0);
-    -webkit-animation: load8 1.1s infinite linear;
-    animation: load8 1.1s infinite linear;
-  }
-  @-webkit-keyframes load8 {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-  }
-  @keyframes load8 {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-LoaderBox.defaultProps = {};
-
-CircleLoader.defaultProps = {
-  theme: 'dark'
-};
-export default CircleLoader ;
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { colors } from '@desynova-digital/tokens'
+class CircleLoader extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+   
+    return (
+      <LoaderBox {...this.props}>
+        <div>
+          <div className="loader">Loading...</div>
+        </div>
+      </LoaderBox>
+    );
+  }
+}
+
+const propTypes = {
+};
+CircleLoader.propTypes =  {
+  /** The visual style used to convey the label's purpose */
+  theme: PropTypes.oneOf(['light', 'dark', 'nexc'])
+}
+
+const LoaderBox = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  opacity: 1;
+  top: 1px;
+  left: 0px;
+  font-family: 'SFUIText-light';
+
+
+  .loader,
+  .loader:after {
+    border-radius: 50%;
+    width: 10em;
+    height: 10em;
+  }
+  .loader {
+    margin: 0px auto;
+    font-size: 10px;
+    position: relative;
+    text-indent: -9999em;
+    border-top: 1.1em solid #eaeaea;
+    border-right: 1.1em solid #e3e3e3;
+    border-bottom: 1.1em solid #e0e0e0;
+    border-left: 1.1em solid ${(props) => colors[props.theme].label.circleLoader};
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation: load8 1.1s infinite linear;
+    animation: load8 1.1s infinite linear;
+  }
+  @-webkit-keyframes load8 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes load8 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+LoaderBox.defaultProps = {};
+
+CircleLoader.defaultProps = {
+  theme: 'dark'
+};
+export default CircleLoader ;

package/atoms/loader/ShimmerComponent/CollabShimmerCard.jsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import styled from 'styled-components';
-import Shimmer from './Shimmer';
-
-const MainContainer = styled.div`
-  display: flex;
-  height: 189px;
-  width: 222px;
-  flex-direction: column;
-`;
-
-const ShimmerDivContainer = styled.div`
-  position: relative;
-  top: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  left: 10px;
-`;
-const CollabShimmerCard = () => {
-  return (
-    <div>
-      <MainContainer>
-        <div style={{ height: '124px', width: ' 100%', background: '#182738' }}></div>
-        <div style={{ height: '65px', width: '100%', background: '#14202e' }}>
-          <ShimmerDivContainer>
-            <Shimmer height="12px" width="56px" />
-            <div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
-              <Shimmer height="10px" width="27px" />
-              <Shimmer height="10px" width="44px" />
-            </div>
-          </ShimmerDivContainer>
-        </div>
-      </MainContainer>
-    </div>
-  );
-};
-
-export default CollabShimmerCard;
+import React from 'react';
+import styled from 'styled-components';
+import Shimmer from './Shimmer';
+
+const MainContainer = styled.div`
+  display: flex;
+  height: 189px;
+  width: 222px;
+  flex-direction: column;
+`;
+
+const ShimmerDivContainer = styled.div`
+  position: relative;
+  top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  left: 10px;
+`;
+const CollabShimmerCard = () => {
+  return (
+    <div>
+      <MainContainer>
+        <div style={{ height: '124px', width: ' 100%', background: '#182738' }}></div>
+        <div style={{ height: '65px', width: '100%', background: '#14202e' }}>
+          <ShimmerDivContainer>
+            <Shimmer height="12px" width="56px" />
+            <div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
+              <Shimmer height="10px" width="27px" />
+              <Shimmer height="10px" width="44px" />
+            </div>
+          </ShimmerDivContainer>
+        </div>
+      </MainContainer>
+    </div>
+  );
+};
+
+export default CollabShimmerCard;

package/atoms/loader/ShimmerComponent/CollabShimmerCardTray.jsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import CollabShimmerCard from './CollabShimmerCard';
-import Shimmer from './Shimmer';
-
-const CollabShimmerCardTray = () => {
-  const ShimmerCount = ({ count }) => {
-    const shimmerCards = Array.from({ length: count }, (_, index) => <CollabShimmerCard key={index} />);
-    return <React.Fragment>{shimmerCards}</React.Fragment>;
-  };
-
-  return (
-    <div style={{ padding: '20px' }}>
-      <div style={{ height: '20px', width: '100%', display: 'flex', gap: '5px', marginBottom: '10px' }}>
-        <Shimmer height="18px" width="79px" />
-        <Shimmer height="18px" width="25px" />
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'row', gap: '15px' }}>
-        <ShimmerCount count={6} />
-      </div>
-    </div>
-  );
-};
-
-export default CollabShimmerCardTray;
+import React from 'react';
+import CollabShimmerCard from './CollabShimmerCard';
+import Shimmer from './Shimmer';
+
+const CollabShimmerCardTray = () => {
+  const ShimmerCount = ({ count }) => {
+    const shimmerCards = Array.from({ length: count }, (_, index) => <CollabShimmerCard key={index} />);
+    return <React.Fragment>{shimmerCards}</React.Fragment>;
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ height: '20px', width: '100%', display: 'flex', gap: '5px', marginBottom: '10px' }}>
+        <Shimmer height="18px" width="79px" />
+        <Shimmer height="18px" width="25px" />
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'row', gap: '15px' }}>
+        <ShimmerCount count={6} />
+      </div>
+    </div>
+  );
+};
+
+export default CollabShimmerCardTray;

package/atoms/loader/ShimmerComponent/FiltersShimmer.jsx

@@ -1,19 +1,19 @@
-import React from 'react';
-import Shimmer from './Shimmer';
-
-const FiltersShimmer = () => {
-  return (
-    <React.Fragment>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
-        <Shimmer height="12px" width="40px"></Shimmer>
-        <div style={{ display: 'flex', gap: '5px' }}>
-          <Shimmer height="24px" width="119.5px"></Shimmer>
-          <Shimmer height="24px" width="119.5px"></Shimmer>
-          <Shimmer height="24px" width="29.5px"></Shimmer>
-        </div>
-      </div>
-    </React.Fragment>
-  );
-};
-
-export default FiltersShimmer;
+import React from 'react';
+import Shimmer from './Shimmer';
+
+const FiltersShimmer = () => {
+  return (
+    <React.Fragment>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
+        <Shimmer height="12px" width="40px"></Shimmer>
+        <div style={{ display: 'flex', gap: '5px' }}>
+          <Shimmer height="24px" width="119.5px"></Shimmer>
+          <Shimmer height="24px" width="119.5px"></Shimmer>
+          <Shimmer height="24px" width="29.5px"></Shimmer>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default FiltersShimmer;

package/atoms/loader/ShimmerComponent/GraphDetailShimmer.jsx

@@ -1,31 +1,31 @@
-import styled from 'styled-components';
-
-const GraphDetailDiv = styled.div`
-  height: 350px;
-  min-width: 295px;
-  border-radius: 4px;
-  background: #15212f;
-  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);
-  -webkit-transition: all 0.4s ease;
-  transition: all 0.4s ease;
-  position: relative;
-  overflow: hidden;
-  border-bottom: 0px solid #07d5cd;
-  max-width: 25%;
-  width: 100%;
-  margin: 0px 10px;
-`;
-import React from 'react';
-import Shimmer from './Shimmer';
-
-const GraphDetailsShimmer = () => {
-  return (
-    <GraphDetailDiv>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '30px' }}>
-        <Shimmer height="20px" width="80px" />
-      </div>
-    </GraphDetailDiv>
-  );
-};
-
-export default GraphDetailsShimmer;
+import styled from 'styled-components';
+
+const GraphDetailDiv = styled.div`
+  height: 350px;
+  min-width: 295px;
+  border-radius: 4px;
+  background: #15212f;
+  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);
+  -webkit-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+  position: relative;
+  overflow: hidden;
+  border-bottom: 0px solid #07d5cd;
+  max-width: 25%;
+  width: 100%;
+  margin: 0px 10px;
+`;
+import React from 'react';
+import Shimmer from './Shimmer';
+
+const GraphDetailsShimmer = () => {
+  return (
+    <GraphDetailDiv>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '30px' }}>
+        <Shimmer height="20px" width="80px" />
+      </div>
+    </GraphDetailDiv>
+  );
+};
+
+export default GraphDetailsShimmer;

package/atoms/loader/ShimmerComponent/GraphTitleShimmer.jsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import Shimmer from './Shimmer';
-
-const GraphTitleShimmer = () => {
-  return (
-    <div
-      style={{
-        padding: '20px',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center'
-      }}>
-      <div style={{ width: '81.5px', height: '21px' }}>
-        <Shimmer height="21px" width="81.5" />
-      </div>
-      <div style={{ width: '71.8px', height: '18px' }}>
-        <Shimmer height="18px" width="71.8" />
-      </div>
-    </div>
-  );
-};
-
-export default GraphTitleShimmer;
+import React from 'react';
+import Shimmer from './Shimmer';
+
+const GraphTitleShimmer = () => {
+  return (
+    <div
+      style={{
+        padding: '20px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      }}>
+      <div style={{ width: '81.5px', height: '21px' }}>
+        <Shimmer height="21px" width="81.5" />
+      </div>
+      <div style={{ width: '71.8px', height: '18px' }}>
+        <Shimmer height="18px" width="71.8" />
+      </div>
+    </div>
+  );
+};
+
+export default GraphTitleShimmer;

package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.jsx

@@ -1,23 +1,23 @@
-import React from "react";
-import GraphDetailsShimmer from "./GraphDetailShimmer";
-import GraphTitleShimmer from "./GraphTitleShimmer";
-
-const GraphsComponentShimmer = () => {
-  let val = window.location.href.split("/").pop() === "hotstar" ? 2 : 4;
-  const components = [];
-
-  for (let i = 0; i < val; i++) {
-    components.push(<GraphDetailsShimmer key={i} />);
-  }
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column" }}>
-      <GraphTitleShimmer />
-      <div style={{ padding: "0 10px", display: "flex", gap: "10px" }}>
-        {components.map((component) => component)}
-      </div>
-    </div>
-  );
-};
-
-export default GraphsComponentShimmer;
+import React from "react";
+import GraphDetailsShimmer from "./GraphDetailShimmer";
+import GraphTitleShimmer from "./GraphTitleShimmer";
+
+const GraphsComponentShimmer = () => {
+  let val = window.location.href.split("/").pop() === "hotstar" ? 2 : 4;
+  const components = [];
+
+  for (let i = 0; i < val; i++) {
+    components.push(<GraphDetailsShimmer key={i} />);
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <GraphTitleShimmer />
+      <div style={{ padding: "0 10px", display: "flex", gap: "10px" }}>
+        {components.map((component) => component)}
+      </div>
+    </div>
+  );
+};
+
+export default GraphsComponentShimmer;

package/atoms/loader/ShimmerComponent/Shimmer.js

@@ -10,8 +10,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _templateObject, _templateObject2;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var shimmerAnimation = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    0% {\n      transform: translateX(-100%);\n    }   \n    \n    100% {\n      transform: translateX(100%);\n    }\n"])));
 var ShimmerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  background-color: linear-gradient(\n    85deg,\n    rgba(48, 63, 81, 0.5) 0%,\n    rgba(48, 63, 81, 0.24) 50.76%,\n    rgba(48, 63, 81, 0.11) 68.68%,\n    rgba(48, 63, 81, 0) 100%\n  );\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);\n  &::after {\n    display: block;\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: translateX(-100%);\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);\n    animation: ", " 1s infinite;\n  }\n"])), function (props) {
   return props.width;

package/atoms/loader/ShimmerComponent/Shimmer.jsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import styled, { keyframes } from 'styled-components';
-
-const shimmerAnimation = keyframes`
-    0% {
-      transform: translateX(-100%);
-    }   
-    
-    100% {
-      transform: translateX(100%);
-    }
-`;
-
-const ShimmerContainer = styled.div`
-  position: relative;
-  background-color: linear-gradient(
-    85deg,
-    rgba(48, 63, 81, 0.5) 0%,
-    rgba(48, 63, 81, 0.24) 50.76%,
-    rgba(48, 63, 81, 0.11) 68.68%,
-    rgba(48, 63, 81, 0) 100%
-  );
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-  border-radius: ${(props) => props.borderRadius || '38px'};
-  overflow: hidden;
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);
-  &::after {
-    display: block;
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    transform: translateX(-100%);
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
-    animation: ${shimmerAnimation} 1s infinite;
-  }
-`;
-
-const Shimmer = ({ height, width, borderRadius }) => {
-  return (
-    <div style={{ marginRight: '2px' }}>
-      <ShimmerContainer width={width} height={height} borderRadius={borderRadius} />{' '}
-    </div>
-  );
-};
-
-export default Shimmer;
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const shimmerAnimation = keyframes`
+    0% {
+      transform: translateX(-100%);
+    }   
+    
+    100% {
+      transform: translateX(100%);
+    }
+`;
+
+const ShimmerContainer = styled.div`
+  position: relative;
+  background-color: linear-gradient(
+    85deg,
+    rgba(48, 63, 81, 0.5) 0%,
+    rgba(48, 63, 81, 0.24) 50.76%,
+    rgba(48, 63, 81, 0.11) 68.68%,
+    rgba(48, 63, 81, 0) 100%
+  );
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  border-radius: ${(props) => props.borderRadius || '38px'};
+  overflow: hidden;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
+    animation: ${shimmerAnimation} 1s infinite;
+  }
+`;
+
+const Shimmer = ({ height, width, borderRadius }) => {
+  return (
+    <div style={{ marginRight: '2px' }}>
+      <ShimmerContainer width={width} height={height} borderRadius={borderRadius} />{' '}
+    </div>
+  );
+};
+
+export default Shimmer;