@learningpool/ui 1.15.4 → 1.16.0

package/utils/hooks.js

@@ -1,26 +1,25 @@
 import { useState, useEffect } from 'react';
-var getWidth = function () {
-    var _a, _b;
-    return (_b = (_a = window.innerWidth) !== null && _a !== void 0 ? _a : document.documentElement.clientWidth) !== null && _b !== void 0 ? _b : document.body.clientWidth;
-};
-export var useCurrentWidth = function () {
+const getWidth = () => window.innerWidth ??
+    document.documentElement.clientWidth ??
+    document.body.clientWidth;
+export const useCurrentWidth = () => {
     // save current window width in the state object
-    var _a = useState(getWidth()), width = _a[0], setWidth = _a[1];
+    const [width, setWidth] = useState(getWidth());
     // in this case useEffect will execute only once because
     // it does not have any dependencies.
-    useEffect(function () {
+    useEffect(() => {
         // timeoutId for debounce mechanism
-        var timeoutId;
-        var resizeListener = function () {
+        let timeoutId;
+        const resizeListener = () => {
             // prevent execution of previous setTimeout
             clearTimeout(timeoutId);
             // change width from the state object after 150 milliseconds
-            timeoutId = setTimeout(function () { return setWidth(getWidth()); }, 150);
+            timeoutId = setTimeout(() => setWidth(getWidth()), 150);
         };
         // set resize listener
         window.addEventListener('resize', resizeListener);
         // clean up function
-        return function () {
+        return () => {
             // remove resize listener
             window.removeEventListener('resize', resizeListener);
         };

package/utils/theme.js

@@ -1,24 +1,31 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(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);
-};
 import { amber, blue } from '@mui/material/colors';
-var DEFAULT_HEADER_TYPOGRAPHY = {
+const DEFAULT_HEADER_TYPOGRAPHY = {
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
 };
-var DEFAULT_BODY_TYPOGRAPHY = {
+const DEFAULT_BODY_TYPOGRAPHY = {
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
 };
 // @TODO: Discuss this with the experience design team, according to the UUI Figma
-export var defaultTheme = {
-    typography: __assign(__assign({}, DEFAULT_BODY_TYPOGRAPHY), { h1: DEFAULT_HEADER_TYPOGRAPHY, h2: DEFAULT_HEADER_TYPOGRAPHY, h3: DEFAULT_HEADER_TYPOGRAPHY, h4: DEFAULT_HEADER_TYPOGRAPHY, h5: DEFAULT_HEADER_TYPOGRAPHY, h6: DEFAULT_HEADER_TYPOGRAPHY, subtitle1: DEFAULT_BODY_TYPOGRAPHY, subtitle2: DEFAULT_BODY_TYPOGRAPHY, body1: DEFAULT_BODY_TYPOGRAPHY, body2: DEFAULT_BODY_TYPOGRAPHY, button: __assign(__assign({}, DEFAULT_BODY_TYPOGRAPHY), { fontWeight: 700 }), caption: DEFAULT_BODY_TYPOGRAPHY, overline: DEFAULT_BODY_TYPOGRAPHY })
+export const defaultTheme = {
+    typography: {
+        ...DEFAULT_BODY_TYPOGRAPHY,
+        h1: DEFAULT_HEADER_TYPOGRAPHY,
+        h2: DEFAULT_HEADER_TYPOGRAPHY,
+        h3: DEFAULT_HEADER_TYPOGRAPHY,
+        h4: DEFAULT_HEADER_TYPOGRAPHY,
+        h5: DEFAULT_HEADER_TYPOGRAPHY,
+        h6: DEFAULT_HEADER_TYPOGRAPHY,
+        subtitle1: DEFAULT_BODY_TYPOGRAPHY,
+        subtitle2: DEFAULT_BODY_TYPOGRAPHY,
+        body1: DEFAULT_BODY_TYPOGRAPHY,
+        body2: DEFAULT_BODY_TYPOGRAPHY,
+        button: {
+            ...DEFAULT_BODY_TYPOGRAPHY,
+            fontWeight: 700
+        },
+        caption: DEFAULT_BODY_TYPOGRAPHY,
+        overline: DEFAULT_BODY_TYPOGRAPHY
+    }
     // overrides: {
     //   MuiCssBaseline: {
     //     '@global': {
@@ -30,7 +37,7 @@ export var defaultTheme = {
     //   }
     // }
 };
-export var lightTheme = {
+export const lightTheme = {
     palette: {
         primary: {
             main: '#0077cc'
@@ -48,7 +55,7 @@ export var lightTheme = {
         contrastThreshold: 4.5
     }
 };
-export var darkTheme = {
+export const darkTheme = {
     palette: {
         primary: amber,
         divider: 'rgba(255, 255, 255, 0.075)',
@@ -61,13 +68,13 @@ export var darkTheme = {
         contrastThreshold: 4.5
     }
 };
-export var motion = {
+export const motion = {
     ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
     easeOut: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
     easeIn: 'cubic-bezier(0.4, 0.0, 1, 1)',
     easeInOut: 'cubic-bezier(0.4, 0.0, 0.6, 1)'
 };
-export var tooltipDelay = {
+export const tooltipDelay = {
     start: 500,
     end: 200
 };