@evergis/uilib-gl 1.0.110 → 1.0.111

package/dist/__devComponents__/ThemeSwitcher.d.ts

@@ -9,5 +9,5 @@ interface IProps extends PropsWithChildren {
 export declare class ThemeSwitcher extends Component<IProps> {
     render(): import("react").JSX.Element;
 }
-export declare const ThemeSwitcherDecorator: (story: any) => import("react").JSX.Element;
+export declare const ThemeSwitcherDecorator: (story: any, context: any) => import("react").JSX.Element;
 export {};

package/dist/uilib-gl.esm.js

@@ -1,7 +1,7 @@
 import { memo, Children, cloneElement, Component, isValidElement, useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { ThemeProvider as ThemeProvider$1, css, useTheme as useTheme$1, keyframes, createGlobalStyle } from 'styled-components';
 import merge from 'deepmerge';
-import { rgb, hsl, hsla, opacify, ellipsis, rem, normalize } from 'polished';
+import { rgb, hsl, hsla, opacify, ellipsis, transparentize, rem, normalize } from 'polished';
 import ReactDOM__default, { createPortal } from 'react-dom';
 import tippy from 'tippy.js';
 import format from 'date-fns/format';
@@ -13120,34 +13120,24 @@ const CardLoaderShining = styled.div`
   position: absolute;
   top: 0;
   left: 0;
-  background-color: #333;
   width: 100%;
   animation-duration: 0.6s;
   animation-iteration-count: infinite;
   animation-name: loader-animate;
   animation-timing-function: linear;
-  background: -webkit-linear-gradient(
-    left,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.6) 30%,
-    rgba(255, 255, 255, 0) 81%
-  );
-  background: -o-linear-gradient(
-    left,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.6) 30%,
-    rgba(255, 255, 255, 0) 81%
-  );
-  background: linear-gradient(
+  background: ${_ref3 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref3;
+  return `linear-gradient(
     to right,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.6) 30%,
-    rgba(255, 255, 255, 0) 81%
-  );
-  filter: progid:DXImageTransform.Microsoft.gradient(
-            startColorstr='#00ffffff',
-            endColorstr='#00ffffff',
-            GradientType=1);
+    ${transparentize(1, palette.background)} 0%,
+    ${transparentize(0.4, palette.background)} 30%,
+    ${transparentize(1, palette.background)} 81%
+  )`;
+}};
 
   @keyframes loader-animate {
     0% {
@@ -13161,46 +13151,47 @@ const CardLoaderShining = styled.div`
 const CardLoaderContainer = styled.div`
   position: relative;
   display: flex;
-  width: ${_ref3 => {
+  width: ${_ref4 => {
   let {
     width
-  } = _ref3;
+  } = _ref4;
   return setWidth(width);
 }};
+  overflow: hidden;
 
   ${CardLoaderPreview} {
-    height: ${_ref4 => {
+    height: ${_ref5 => {
   let {
     height
-  } = _ref4;
+  } = _ref5;
   return setHeight(height);
 }};
-    width: ${_ref5 => {
+    width: ${_ref6 => {
   let {
     height
-  } = _ref5;
+  } = _ref6;
   return setHeight(height);
 }};
-    min-height: ${_ref6 => {
+    min-height: ${_ref7 => {
   let {
     height
-  } = _ref6;
+  } = _ref7;
   return setHeight(height);
 }};
-    min-width: ${_ref7 => {
+    min-width: ${_ref8 => {
   let {
     height
-  } = _ref7;
+  } = _ref8;
   return setHeight(height);
 }};
   }
 
   ${CardLoaderShining},
   ${CardLoaderBars} {
-    height: ${_ref8 => {
+    height: ${_ref9 => {
   let {
     height
-  } = _ref8;
+  } = _ref9;
   return setHeight(height);
 }};
   }
@@ -13210,29 +13201,29 @@ const CardLoaderContainer = styled.div`
   }
 
   ${CardLoaderBars} {
-    padding-top: calc(${_ref9 => {
+    padding-top: calc(${_ref10 => {
   let {
     height
-  } = _ref9;
+  } = _ref10;
   return setHeight(height);
 }} / 6);
     box-sizing: border-box;
 
     ${CardLoaderBar} {
       &:first-child {
-        height: calc(${_ref10 => {
+        height: calc(${_ref11 => {
   let {
     height
-  } = _ref10;
+  } = _ref11;
   return setHeight(height);
 }} / 4);
       }
 
       &:not(:first-child) {
-        height: calc(${_ref11 => {
+        height: calc(${_ref12 => {
   let {
     height
-  } = _ref11;
+  } = _ref12;
   return setHeight(height);
 }} / 6);
       }
@@ -25292,6 +25283,26 @@ const InjectGlobalStyles = function (_temp) {
   }) : null;
 };
 
+const ThemeBodyBackground = createGlobalStyle`
+  html, body {
+    background-color: ${_ref => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref;
+  return palette.background;
+}};
+    color: ${_ref2 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref2;
+  return palette.textPrimary;
+}};
+  }
+`;
 var Themes;
 
 (function (Themes) {