@apple-pie/slice 0.0.5 → 0.0.7

package/dist/cjs/hooks/useLastUpdated.js

@@ -1,53 +1,31 @@
-'use strict';
+"use strict";
 
-var React = require('react');
+var React = require("react");
 
 function getTimeDifference(date, labelPrefix) {
     const compareDate = date instanceof Date ? date : new Date(date);
-    if (Number.isNaN(compareDate.getTime()))
-        return `${labelPrefix}Invalid date`;
-    // getTime = milliseconds since Jan 1 1970 UTC
-    const secondsDiff = Math.max(0, Math.floor((Date.now() - compareDate.getTime()) / 1000));
-    const minutes = Math.floor(secondsDiff / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-    if (minutes < 1)
-        return `${labelPrefix}Just now`;
-    if (minutes === 1)
-        return `${labelPrefix}1 min. ago`;
-    if (minutes < 60)
-        return `${labelPrefix}${minutes} mins. ago`;
-    if (hours === 1)
-        return `${labelPrefix}1 hour ago`;
-    if (hours < 24)
-        return `${labelPrefix}${hours} hours ago`;
-    if (days === 1)
-        return `${labelPrefix}1 day ago`;
-    if (days < 15)
-        return `${labelPrefix}${days} days ago`;
-    return compareDate.toLocaleDateString('en-US', {
-        day: '2-digit',
-        month: 'short',
-        year: 'numeric',
+    if (Number.isNaN(compareDate.getTime())) return `${labelPrefix}Invalid date`;
+    const secondsDiff = Math.max(0, Math.floor((Date.now() - compareDate.getTime()) / 1e3)), minutes = Math.floor(secondsDiff / 60), hours = Math.floor(minutes / 60), days = Math.floor(hours / 24);
+    return minutes < 1 ? `${labelPrefix}Just now` : 1 === minutes ? `${labelPrefix}1 min. ago` : minutes < 60 ? `${labelPrefix}${minutes} mins. ago` : 1 === hours ? `${labelPrefix}1 hour ago` : hours < 24 ? `${labelPrefix}${hours} hours ago` : 1 === days ? `${labelPrefix}1 day ago` : days < 15 ? `${labelPrefix}${days} days ago` : compareDate.toLocaleDateString("en-US", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric"
     });
 }
-function useLastUpdated(timestamp, prefix = '', interval = 1) {
-    const [lastUpdated, setLastUpdated] = React.useState(timestamp ? getTimeDifference(timestamp, prefix) : '');
-    React.useEffect(() => {
-        if (!timestamp) {
-            setLastUpdated('');
-            return;
-        }
+
+exports.useLastUpdated = function(timestamp, prefix = "", interval = 1) {
+    const [lastUpdated, setLastUpdated] = React.useState(timestamp ? getTimeDifference(timestamp, prefix) : "");
+    return React.useEffect(() => {
+        if (!timestamp) return void setLastUpdated("");
         setLastUpdated(getTimeDifference(timestamp, prefix));
-        const refreshMinutes = Math.max(interval, 1);
-        const intervalTimer = setInterval(() => {
+        const refreshMinutes = Math.max(interval, 1), intervalTimer = setInterval(() => {
             setLastUpdated(getTimeDifference(timestamp, prefix));
-        }, refreshMinutes * 60 * 1000);
+        }, 60 * refreshMinutes * 1e3);
         return () => {
             clearInterval(intervalTimer);
         };
-    }, [interval, prefix, timestamp]);
-    return { lastUpdated, timer: interval };
-}
-
-exports.useLastUpdated = useLastUpdated;
+    }, [ interval, prefix, timestamp ]), {
+        lastUpdated: lastUpdated,
+        timer: interval
+    };
+};

package/dist/cjs/hooks/useLocalStore.js

@@ -1,52 +1,36 @@
-'use strict';
+"use strict";
 
-var React = require('react');
+var React = require("react");
 
 function canUseLocalStorage() {
-    return (typeof globalThis !== 'undefined' &&
-        'localStorage' in globalThis &&
-        globalThis.localStorage !== undefined &&
-        globalThis.localStorage !== null);
+    return "undefined" != typeof globalThis && "localStorage" in globalThis && void 0 !== globalThis.localStorage && null !== globalThis.localStorage;
 }
+
 function readLocalStorageValue(key, fallback) {
-    if (!canUseLocalStorage())
-        return fallback;
+    if (!canUseLocalStorage()) return fallback;
     try {
         const raw = globalThis.localStorage.getItem(key);
-        if (raw === null) {
-            // If not set, initialize with fallback.
-            globalThis.localStorage.setItem(key, JSON.stringify(fallback));
-            return fallback;
-        }
-        return JSON.parse(raw);
-    }
-    catch (error) {
-        console.error(`Error parsing local storage item for key ${key}:`, {
-            error,
-        });
-        return fallback;
+        return null === raw ? (globalThis.localStorage.setItem(key, JSON.stringify(fallback)), 
+        fallback) : JSON.parse(raw);
+    } catch (error) {
+        return console.error(`Error parsing local storage item for key ${key}:`, {
+            error: error
+        }), fallback;
     }
 }
-function useLocalStore(key, value) {
+
+exports.useLocalStore = function(key, value) {
     const [item, setItem] = React.useState(() => readLocalStorageValue(key, value));
-    // rehydrate on prop changes
-    React.useEffect(() => {
+    return React.useEffect(() => {
         setItem(readLocalStorageValue(key, value));
-    }, [key, value]);
-    function updateItem(data) {
-        if (canUseLocalStorage()) {
-            try {
-                globalThis.localStorage.setItem(key, JSON.stringify(data));
-            }
-            catch (error) {
-                console.error(`Error setting local storage item for key ${key}:`, {
-                    error,
-                });
-            }
+    }, [ key, value ]), [ item, function(data) {
+        if (canUseLocalStorage()) try {
+            globalThis.localStorage.setItem(key, JSON.stringify(data));
+        } catch (error) {
+            console.error(`Error setting local storage item for key ${key}:`, {
+                error: error
+            });
         }
         setItem(data);
-    }
-    return [item, updateItem];
-}
-
-exports.useLocalStore = useLocalStore;
+    } ];
+};

package/dist/cjs/hooks/useObserveResize.js

@@ -1,56 +1,38 @@
-'use strict';
+"use strict";
 
-var React = require('react');
+var React = require("react");
 
-function useObserveResize(element, options) {
-    const [size, setSize] = React.useState({ width: 0, height: 0 });
-    const ignore = options === null || options === void 0 ? void 0 : options.ignore;
-    const handleResize = React.useCallback((entries) => {
+exports.useObserveResize = function(element, options) {
+    const [size, setSize] = React.useState({
+        width: 0,
+        height: 0
+    }), ignore = null == options ? void 0 : options.ignore, handleResize = React.useCallback(entries => {
         var _a, _b;
-        if (!entries[0])
-            return;
-        const width = ((_a = element === null || element === void 0 ? void 0 : element.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
-        const height = ((_b = element === null || element === void 0 ? void 0 : element.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
-        setSize((prev) => {
+        if (!entries[0]) return;
+        const width = (null === (_a = null == element ? void 0 : element.current) || void 0 === _a ? void 0 : _a.offsetWidth) || 0, height = (null === (_b = null == element ? void 0 : element.current) || void 0 === _b ? void 0 : _b.offsetHeight) || 0;
+        setSize(prev => {
             const next = {
-                width: ignore === 'width' ? prev.width : width,
-                height: ignore === 'height' ? prev.height : height,
+                width: "width" === ignore ? prev.width : width,
+                height: "height" === ignore ? prev.height : height
             };
-            if (prev.width === next.width && prev.height === next.height) {
-                return prev;
-            }
-            return next;
+            return prev.width === next.width && prev.height === next.height ? prev : next;
         });
-    }, [element, ignore]);
-    React.useEffect(() => {
-        if (element === undefined)
-            return;
+    }, [ element, ignore ]);
+    return React.useEffect(() => {
+        if (void 0 === element) return;
         const el = element.current;
-        if (!el)
-            return;
-        // Get initial size
-        const newWidth = el.offsetWidth || 0;
-        const newHeight = el.offsetHeight || 0;
-        // set the new size of different to previous
-        setSize((prev) => {
+        if (!el) return;
+        const newWidth = el.offsetWidth || 0, newHeight = el.offsetHeight || 0;
+        setSize(prev => {
             const next = {
-                width: ignore === 'width' ? prev.width : newWidth,
-                height: ignore === 'height' ? prev.height : newHeight,
+                width: "width" === ignore ? prev.width : newWidth,
+                height: "height" === ignore ? prev.height : newHeight
             };
-            if (prev.width === next.width && prev.height === next.height) {
-                return prev; // same so no need to trigger re-renders
-            }
-            return next;
+            return prev.width === next.width && prev.height === next.height ? prev : next;
         });
-        // Observe size changes
         const resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(el);
-        return () => {
-            resizeObserver.unobserve(el);
-            resizeObserver.disconnect();
+        return resizeObserver.observe(el), () => {
+            resizeObserver.unobserve(el), resizeObserver.disconnect();
         };
-    }, [element, handleResize, ignore]);
-    return size;
-}
-
-exports.useObserveResize = useObserveResize;
+    }, [ element, handleResize, ignore ]), size;
+};

package/dist/cjs/hooks/useObserveTheme.js

@@ -1,43 +1,25 @@
-'use strict';
+"use strict";
 
-var React = require('react');
-var theme_themes = require('../theme/themes.js');
-require('../theme/colors.js');
-require('../theme/corners.js');
-require('../theme/elevations.js');
-require('../theme/type.js');
+var React = require("react"), theme_themes = require("../theme/themes.js");
 
 function resolveTheme(themeName) {
-    if (!themeName || themeName === '' || themeName.includes(theme_themes.lightTheme.name)) {
-        return theme_themes.lightTheme;
-    }
-    return theme_themes.darkTheme;
+    return !themeName || "" === themeName || themeName.includes(theme_themes.lightTheme.name) ? theme_themes.lightTheme : theme_themes.darkTheme;
 }
-function useObserveTheme() {
-    const [theme, setTheme] = React.useState(() => {
-        if (typeof document === 'undefined')
-            return theme_themes.lightTheme;
-        return resolveTheme(document.documentElement.dataset.theme);
-    });
-    React.useEffect(() => {
-        // Sync once on mount in case the theme was set before this hook subscribed.
+
+require("../theme/colors.js"), require("../theme/corners.js"), require("../theme/elevations.js"), 
+require("../theme/type.js"), exports.useObserveTheme = function() {
+    const [theme, setTheme] = React.useState(() => "undefined" == typeof document ? theme_themes.lightTheme : resolveTheme(document.documentElement.dataset.theme));
+    return React.useEffect(() => {
         setTheme(resolveTheme(document.documentElement.dataset.theme));
-        const observer = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                if (mutation.type === 'attributes' &&
-                    mutation.attributeName === 'data-theme') {
-                    const newTheme = document.documentElement.dataset.theme;
-                    setTheme(resolveTheme(newTheme));
-                }
+        const observer = new MutationObserver(mutations => {
+            for (const mutation of mutations) if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) {
+                const newTheme = document.documentElement.dataset.theme;
+                setTheme(resolveTheme(newTheme));
             }
         });
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['data-theme'],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return theme;
-}
-
-exports.useObserveTheme = useObserveTheme;
+        return observer.observe(document.documentElement, {
+            attributes: !0,
+            attributeFilter: [ "data-theme" ]
+        }), () => observer.disconnect();
+    }, []), theme;
+};

package/dist/cjs/hooks/useTheme.js

@@ -1,43 +1,19 @@
-'use strict';
+"use strict";
 
-var React = require('react');
-var theme_themes = require('../theme/themes.js');
-var theme_colors = require('../theme/colors.js');
-var theme_type = require('../theme/type.js');
-var hooks_useObserveTheme = require('./useObserveTheme.js');
-require('../theme/corners.js');
-require('../theme/elevations.js');
+var React = require("react"), theme_themes = require("../theme/themes.js"), theme_colors = require("../theme/colors.js"), theme_type = require("../theme/type.js"), hooks_useObserveTheme = require("./useObserveTheme.js");
 
+require("../theme/corners.js"), require("../theme/elevations.js"), exports.useTheme = 
 /**
  * Hook to manage Slice theming
  */
-function useTheme() {
-    const current = hooks_useObserveTheme.useObserveTheme();
-    const set = React.useCallback((newTheme) => {
-        console.log('set theme', newTheme);
+function() {
+    const current = hooks_useObserveTheme.useObserveTheme(), set = React.useCallback(newTheme => {
         let theme;
-        if (typeof newTheme === 'string') {
-            if (newTheme === 'system') {
-                const darkModeMediaQuery = globalThis.matchMedia('(prefers-color-scheme: dark)');
-                const isDark = darkModeMediaQuery.matches;
-                theme = isDark ? theme_themes.darkTheme : theme_themes.lightTheme;
-            }
-            else {
-                theme = newTheme === theme_themes.darkTheme.name ? theme_themes.darkTheme : theme_themes.lightTheme;
-            }
-        }
-        else
-            theme = newTheme;
+        if ("string" == typeof newTheme) if ("system" === newTheme) {
+            theme = globalThis.matchMedia("(prefers-color-scheme: dark)").matches ? theme_themes.darkTheme : theme_themes.lightTheme;
+        } else theme = newTheme === theme_themes.darkTheme.name ? theme_themes.darkTheme : theme_themes.lightTheme; else theme = newTheme;
         document.documentElement.dataset.theme = theme.name;
-    }, []);
-    const toggle = () => {
-        const lightMode = current.name === theme_themes.lightTheme.name;
-        const newTheme = lightMode ? theme_themes.darkTheme : theme_themes.lightTheme;
-        document.documentElement.dataset.theme = newTheme.name;
-    };
-    const isDark = React.useMemo(() => {
-        return current.name === theme_themes.darkTheme.name;
-    }, [current]);
+    }, []), isDark = React.useMemo(() => current.name === theme_themes.darkTheme.name, [ current ]);
     return {
         /**
          * Slice's default dark theme
@@ -50,7 +26,7 @@ function useTheme() {
         /**
          * The currently active SliceTheme
          */
-        current,
+        current: current,
         /**
          * CSS variables for theme colors
          */
@@ -71,16 +47,17 @@ function useTheme() {
          * Set a new theme by name or passing in a SliceTheme object
          * @param newTheme
          */
-        set,
+        set: set,
         /**
          * Toggle between light and dark themes
          */
-        toggle,
+        toggle: () => {
+            const newTheme = current.name === theme_themes.lightTheme.name ? theme_themes.darkTheme : theme_themes.lightTheme;
+            document.documentElement.dataset.theme = newTheme.name;
+        },
         /**
          * If the currently active theme is the Slice's default dark theme'
          */
-        isDark,
+        isDark: isDark
     };
-}
-
-exports.useTheme = useTheme;
+};

package/dist/cjs/hooks/useToolTip.js

@@ -1,36 +1,23 @@
-'use strict';
+"use strict";
 
-var React = require('react');
+var React = require("react");
 
-const hiddenCoords = { x: 0, y: 0 };
-function useToolTip(toolTip, tipElement) {
+const hiddenCoords = {
+    x: 0,
+    y: 0
+};
+
+exports.useToolTip = function(toolTip, tipElement) {
     const [coords, setCoords] = React.useState(hiddenCoords);
-    React.useLayoutEffect(() => {
+    return React.useLayoutEffect(() => {
         var _a;
-        // remove tooltip from view
-        if (!toolTip || !(tipElement === null || tipElement === void 0 ? void 0 : tipElement.current)) {
-            setCoords(hiddenCoords);
-            return;
-        }
-        // get the target ref
-        const target = (_a = toolTip.ref) === null || _a === void 0 ? void 0 : _a.current;
-        if (!target) {
-            setCoords(hiddenCoords);
-            return;
-        }
-        // get rectangles for parent and tooltip
-        const parentRect = target.getBoundingClientRect();
-        const tipRect = tipElement.current.getBoundingClientRect();
-        // get position and size details
-        const { x: parentX, y: parentY, width: parentWidth, height: parentHeight, } = parentRect;
-        const { width: tipWidth } = tipRect;
-        // calculate the tool tip coords suc that it's placed beneath the parent
-        const x = parentX + parentWidth / 2 - tipWidth / 2;
-        const y = parentY + parentHeight + 10;
-        // set the coords
-        setCoords({ x, y });
-    }, [toolTip, tipElement]);
-    return coords;
-}
-
-exports.useToolTip = useToolTip;
+        if (!toolTip || !(null == tipElement ? void 0 : tipElement.current)) return void setCoords(hiddenCoords);
+        const target = null === (_a = toolTip.ref) || void 0 === _a ? void 0 : _a.current;
+        if (!target) return void setCoords(hiddenCoords);
+        const parentRect = target.getBoundingClientRect(), tipRect = tipElement.current.getBoundingClientRect(), {x: parentX, y: parentY, width: parentWidth, height: parentHeight} = parentRect, {width: tipWidth} = tipRect;
+        setCoords({
+            x: parentX + parentWidth / 2 - tipWidth / 2,
+            y: parentY + parentHeight + 10
+        });
+    }, [ toolTip, tipElement ]), coords;
+};

package/dist/cjs/hooks/useTrackRenders.js

@@ -1,39 +1,21 @@
-'use strict';
+"use strict";
 
-var React = require('react');
-var utils = require('../chunks/utils-BwNacfBU.js');
-require('../chunks/tslib.es6-4H29ixHs.js');
+var React = require("react"), utils = require("../chunks/utils-BsBHecUI.js");
 
+require("../chunks/tslib.es6-C8dZW5nY.js"), exports.useTrackRenders = 
 /**
  * Hook to log component renders, mounts, and unmounts
  * Note: wrap in comments with START.DEBUG ... {hook} ... END.DEBUG to remove from build
  */
-function useTrackRenders(props, componentName = 'Component') {
+function(props, componentName = "Component") {
     const prev = React.useRef({
-        props,
-        mount: true,
-        unmount: false,
-    });
-    // 5 random letters (uppercase)
-    const id = crypto
-        .getRandomValues(new Uint8Array(5))
-        .reduce((acc, val) => acc + String.fromCodePoint(65 + (val % 26)), '');
-    // name the component
-    const name = `${componentName} {${id}}`;
-    // Track re-renders w/o dependency array
+        props: props,
+        mount: !0,
+        unmount: !1
+    }), name = `${componentName} {${crypto.getRandomValues(new Uint8Array(5)).reduce((acc, val) => acc + String.fromCodePoint(65 + val % 26), "")}}`;
     React.useEffect(() => {
         prev.current = utils.debug(prev, props, name);
-    });
-    // Track unmount with empty array on return
-    // biome-ignore lint/correctness/useExhaustiveDependencies: track unmount only
-    React.useEffect(() => {
-        return () => {
-            if (prev.current) {
-                prev.current.unmount = true;
-                utils.debug(prev, prev, name);
-            }
-        };
+    }), React.useEffect(() => () => {
+        prev.current && (prev.current.unmount = !0, utils.debug(prev, prev, name));
     }, []);
-}
-
-exports.useTrackRenders = useTrackRenders;
+};

package/dist/cjs/hooks/useWindow.js

@@ -1,19 +1,14 @@
-'use strict';
+"use strict";
 
-var React = require('react');
+var _a, FormFactor, React = require("react");
 
-var _a;
 /**
  * Form factor names
  */
-exports.FormFactor = void 0;
-(function (FormFactor) {
-    FormFactor["Mobile"] = "mobile";
-    FormFactor["Tablet"] = "tablet";
-    FormFactor["Desktop"] = "desktop";
-    FormFactor["DesktopL"] = "desktopL";
-    FormFactor["DesktopXL"] = "desktopXL";
-})(exports.FormFactor || (exports.FormFactor = {}));
+exports.FormFactor = void 0, (FormFactor = exports.FormFactor || (exports.FormFactor = {})).Mobile = "mobile", 
+FormFactor.Tablet = "tablet", FormFactor.Desktop = "desktop", FormFactor.DesktopL = "desktopL", 
+FormFactor.DesktopXL = "desktopXL";
+
 /**
  * Use bootstrap proxy breakpoints as defaults
  */
@@ -22,65 +17,34 @@ const bootstrapBreakPoints = {
     [exports.FormFactor.Tablet]: 768,
     [exports.FormFactor.Desktop]: 992,
     [exports.FormFactor.DesktopL]: 1200,
-    [exports.FormFactor.DesktopXL]: 1400,
+    [exports.FormFactor.DesktopXL]: 1400
 };
-function checkElectron() {
-    const userAgent = navigator.userAgent.toLowerCase();
-    return userAgent.includes('electron/');
-}
-const isElectron = checkElectron();
-const isAppleDevice = navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone';
-const dpr = (_a = Math.min(Math.ceil(window.devicePixelRatio), 3)) !== null && _a !== void 0 ? _a : 1;
-const isTouchDevice = 'ontouchstart' in globalThis || navigator.maxTouchPoints > 0;
-// pre-ordered break points from larget to smallest
-const orderedBps = Object.entries(bootstrapBreakPoints).sort((a, b) => -b[1] - a[1]);
-function useWindow(breakpoints = bootstrapBreakPoints, top = true) {
-    const [viewportWidth, setViewportWidth] = React.useState(null);
-    const [viewportHeight, setViewportHeight] = React.useState(null);
-    const [height, setHeight] = React.useState('100vh');
-    const [formFactor, setFormFactor] = React.useState(exports.FormFactor.Desktop);
-    React.useEffect(() => {
-        handleResize();
-        window.addEventListener('resize', handleResize, false);
-        return () => window.removeEventListener('resize', handleResize, false);
-    }, []);
-    // callback to set form factor based on break points
-    const getFormFactor = React.useCallback((width) => {
-        if (!width || width <= 0)
-            return exports.FormFactor.Mobile;
-        for (const [formFactor, breakpoint] of orderedBps) {
-            if (width >= breakpoint)
-                return formFactor;
-        }
+
+const isElectron = navigator.userAgent.toLowerCase().includes("electron/"), isAppleDevice = navigator.platform.startsWith("Mac") || "iPhone" === navigator.platform, dpr = null !== (_a = Math.min(Math.ceil(window.devicePixelRatio), 3)) && void 0 !== _a ? _a : 1, isTouchDevice = "ontouchstart" in globalThis || navigator.maxTouchPoints > 0, orderedBps = Object.entries(bootstrapBreakPoints).sort((a, b) => -b[1] - a[1]);
+
+exports.useWindow = function(breakpoints = bootstrapBreakPoints, top = !0) {
+    const [viewportWidth, setViewportWidth] = React.useState(null), [viewportHeight, setViewportHeight] = React.useState(null), [height, setHeight] = React.useState("100vh"), [formFactor, setFormFactor] = React.useState(exports.FormFactor.Desktop);
+    React.useEffect(() => (handleResize(), window.addEventListener("resize", handleResize, !1), 
+    () => window.removeEventListener("resize", handleResize, !1)), []);
+    const getFormFactor = React.useCallback(width => {
+        if (!width || width <= 0) return exports.FormFactor.Mobile;
+        for (const [formFactor, breakpoint] of orderedBps) if (width >= breakpoint) return formFactor;
         return exports.FormFactor.Mobile;
     }, []);
     function handleResize() {
         var _a, _b, _c, _d;
-        const windowWidth = top
-            ? ((_b = (_a = window.top) === null || _a === void 0 ? void 0 : _a.innerWidth) !== null && _b !== void 0 ? _b : window.innerWidth)
-            : window.innerWidth;
-        const windowHeight = top
-            ? ((_d = (_c = window.top) === null || _c === void 0 ? void 0 : _c.innerHeight) !== null && _d !== void 0 ? _d : window.innerHeight)
-            : window.innerHeight;
-        setFormFactor(getFormFactor(windowWidth));
-        setViewportHeight(windowHeight);
-        setViewportWidth(windowWidth);
-        // note: mobile devices can have task bars that are included inside the viewport.
-        // for mobile devices, set root containers to the inner height pixel which removes
-        // the height of any toolbars and provides the "true" view port height
-        if (!isElectron)
-            setHeight(isTouchDevice ? `${windowHeight}px` : '100vh');
+        const windowWidth = top && null !== (_b = null === (_a = window.top) || void 0 === _a ? void 0 : _a.innerWidth) && void 0 !== _b ? _b : window.innerWidth, windowHeight = top && null !== (_d = null === (_c = window.top) || void 0 === _c ? void 0 : _c.innerHeight) && void 0 !== _d ? _d : window.innerHeight;
+        setFormFactor(getFormFactor(windowWidth)), setViewportHeight(windowHeight), setViewportWidth(windowWidth), 
+        isElectron || setHeight(isTouchDevice ? `${windowHeight}px` : "100vh");
     }
     return {
-        viewportWidth,
-        viewportHeight,
-        height,
-        isTouchDevice,
-        isElectron,
-        isAppleDevice,
-        formFactor,
-        dpr,
+        viewportWidth: viewportWidth,
+        viewportHeight: viewportHeight,
+        height: height,
+        isTouchDevice: isTouchDevice,
+        isElectron: isElectron,
+        isAppleDevice: isAppleDevice,
+        formFactor: formFactor,
+        dpr: dpr
     };
-}
-
-exports.useWindow = useWindow;
+};