@autobusal/common 0.0.12 → 0.0.13

package/Loading/Loading.tsx

@@ -1,6 +1,6 @@
 import { SpinnerRoundFilled, SpinnerCircularFixed } from 'spinners-react';
 import { useSystemTheme } from '@autobusal/providers';
-import Skeleton from 'react-loading-skeleton';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { ContainerGeneral
   // , ContainerInline
   , ContainerParagraph } from './styles';
@@ -47,10 +47,19 @@ interface ParagraphProps {
   count?: number
 }
 
-export const Paragraph = ({ count = 3 }: ParagraphProps): JSX.Element => (
-  <ContainerParagraph>
-    <Skeleton count={ count - 1 } /> <br />
-    <Skeleton count={ count + 1 } /> <br />
-    <Skeleton count={ count } />
-  </ContainerParagraph>
-);
+export const Paragraph = ({ count = 3 }: ParagraphProps): JSX.Element => {
+  const theme = useSystemTheme();
+
+  const baseColor = theme === 'light' ? '#EBEBEB' : "#202020";
+  const highlightColor = theme === 'light' ? '#F5F5F5' : '#444444';
+
+  return (
+    <SkeletonTheme baseColor={ baseColor } highlightColor={ highlightColor }>
+      <ContainerParagraph>
+        <Skeleton count={ count - 1 } /> <br />
+        <Skeleton count={ count + 1 } /> <br />
+        <Skeleton count={ count } />
+      </ContainerParagraph>
+    </SkeletonTheme>
+  );
+};

package/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import { AiOutlineClose } from 'react-icons/ai';
-// import { useOverflow } from '@autobusal/hooks';
+import { useOverflow } from '@autobusal/hooks';
 import { Paragraph } from '../index';
 import { Background, Container, Title, ButtonClose } from './styles';
 
@@ -13,7 +13,7 @@ interface Props {
 
 const Modal = ({ loading, width, title, content, onClose }: Props): JSX.Element => {
   // hide the scroll
-  // useOverflow();
+  useOverflow();
 
   return (
     <>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "main": "index.ts",
   "dependencies": {