react-restyle-components 0.4.39 → 0.4.41

package/lib/src/core-components/src/utils/helpers/isComponentType.js

@@ -1 +1,16 @@
-"use strict";import i from"react";export const isComponentType=(t,r)=>i.isValidElement(t)?t.type===r||t.type.target===r:!1;
+import React from 'react';
+/**
+ * Checks if a ReactNode is an Element of some component.
+ * Supports components that are styled using styled-components.
+ * Returns false if element is not a ReactElement.
+ *
+ * @param element a react node to check
+ * @param componentType the component type to check
+ * @returns true if element is an element with type == componentType
+ */
+export const isComponentType = (element, componentType) => {
+    if (!React.isValidElement(element))
+        return false;
+    return (element.type === componentType ||
+        element.type.target === componentType);
+};

package/lib/src/core-components/src/utils/helpers/separateChildrenByType.js

@@ -1 +1,12 @@
-"use strict";import{isComponentType as n}from"./isComponentType";import{flattenChildren as f}from"./flattenChildren";export const separateChildrenByType=(p,...r)=>f(p).reduce((e,t)=>{const i=r.findIndex(d=>n(t,d));return i!==-1?e[i].push(t):e[r.length].push(t),e},[...r.map(()=>[]),[]]);
+import { isComponentType } from './isComponentType';
+import { flattenChildren } from './flattenChildren';
+export const separateChildrenByType = (children, ...componentTypes) => flattenChildren(children).reduce((acc, element) => {
+    const typeIndex = componentTypes.findIndex((componentType) => isComponentType(element, componentType));
+    if (typeIndex !== -1) {
+        acc[typeIndex].push(element);
+    }
+    else {
+        acc[componentTypes.length].push(element);
+    }
+    return acc;
+}, [...componentTypes.map(() => []), []]);

package/lib/src/core-components/src/utils/hooks/index.js

@@ -1 +1,18 @@
-"use strict";"use client";export*from"./useClickOutside";export*from"./useCombinedRefs";export*from"./useDebouncedCallback";export*from"./useDebouncedValue";export*from"./useDeprecation";export*from"./useDeviceDetect";export*from"./useDeviceForm";export*from"./useDisableBodyScroll";export*from"./useHoverState";export*from"./useId";export*from"./useIsBrowser";export*from"./useMediaQuery";export*from"./useOverflow";export*from"./useSafeLayoutEffect";export*from"./useScrollingUp";export*from"./useTrapFocus";export*from"./useWindowDimensions";
+'use client';
+export * from './useClickOutside';
+export * from './useCombinedRefs';
+export * from './useDebouncedCallback';
+export * from './useDebouncedValue';
+export * from './useDeprecation';
+export * from './useDeviceDetect';
+export * from './useDeviceForm';
+export * from './useDisableBodyScroll';
+export * from './useHoverState';
+export * from './useId';
+export * from './useIsBrowser';
+export * from './useMediaQuery';
+export * from './useOverflow';
+export * from './useSafeLayoutEffect';
+export * from './useScrollingUp';
+export * from './useTrapFocus';
+export * from './useWindowDimensions';

package/lib/src/core-components/src/utils/hooks/useClickOutside.js

@@ -1 +1,18 @@
-"use strict";import{useEffect as s,useRef as f}from"react";const o=["mousedown","touchstart"];export function useClickOutside(n,c){const u=f(null),t=c??u;return s(()=>{const r=e=>{t.current&&!t.current.contains(e.target)&&n()};return o.forEach(e=>document.addEventListener(e,r)),()=>{o.forEach(e=>document.removeEventListener(e,r))}},[t,n]),t}
+import { useEffect, useRef } from 'react';
+const CLICK_EVENTS = ['mousedown', 'touchstart'];
+export function useClickOutside(handler, targetRef) {
+    const defaultRef = useRef(null);
+    const ref = targetRef ?? defaultRef;
+    useEffect(() => {
+        const listener = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                handler();
+            }
+        };
+        CLICK_EVENTS.forEach((fn) => document.addEventListener(fn, listener));
+        return () => {
+            CLICK_EVENTS.forEach((fn) => document.removeEventListener(fn, listener));
+        };
+    }, [ref, handler]);
+    return ref;
+}

package/lib/src/core-components/src/utils/hooks/useCombinedRefs.js

@@ -1 +1,17 @@
-"use strict";import{useCallback as e}from"react";export function useCombinedRefs(...t){return e(o=>{t.forEach(n=>{n&&(typeof n=="function"?n(o):n.current=o)})},[])}
+import { useCallback } from 'react';
+export function useCombinedRefs(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+...refs) {
+    return useCallback((value) => {
+        refs.forEach((ref) => {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else {
+                ref.current = value;
+            }
+        });
+    }, []);
+}

package/lib/src/core-components/src/utils/hooks/useDebouncedCallback.js

@@ -1 +1,12 @@
-"use strict";import{useRef as n,useCallback as l}from"react";export function useDebouncedCallback(t,u,r){const e=n();return l((...o)=>{const c=()=>{clearTimeout(e.current),t(...o)};clearTimeout(e.current),e.current=setTimeout(c,r)},[t,r,...u])}
+import { useRef, useCallback } from 'react';
+export function useDebouncedCallback(func, deps, wait) {
+    const timeout = useRef();
+    return useCallback((...args) => {
+        const later = () => {
+            clearTimeout(timeout.current);
+            func(...args);
+        };
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(later, wait);
+    }, [func, wait, ...deps]);
+}

package/lib/src/core-components/src/utils/hooks/useDebouncedValue.js

@@ -1 +1,20 @@
-"use strict";import{useEffect as r,useState as f,useRef as o}from"react";export function useDebouncedValue(e,c={wait:300}){const[s,i]=f(e),u=o(!1),n=o(null),t=()=>window.clearTimeout(n.current);return r(()=>{u.current&&(t(),n.current=window.setTimeout(()=>{i(e)},c.wait))},[e]),r(()=>(u.current=!0,t),[]),[s,t]}
+import { useEffect, useState, useRef } from 'react';
+export function useDebouncedValue(value, options = { wait: 300 }) {
+    const [debouncedValue, setValue] = useState(value);
+    const mountedRef = useRef(false);
+    const timeoutRef = useRef(null);
+    const cancel = () => window.clearTimeout(timeoutRef.current);
+    useEffect(() => {
+        if (mountedRef.current) {
+            cancel();
+            timeoutRef.current = window.setTimeout(() => {
+                setValue(value);
+            }, options.wait);
+        }
+    }, [value]);
+    useEffect(() => {
+        mountedRef.current = true;
+        return cancel;
+    }, []);
+    return [debouncedValue, cancel];
+}

package/lib/src/core-components/src/utils/hooks/useDeprecation.js

@@ -1 +1,40 @@
-"use strict";import i,{useEffect as t}from"react";export const isReactDevelopment=()=>"_self"in i.createElement("div"),useDeprecation=({name:o,message:s,version:e})=>{isReactDevelopment()&&t(()=>{console.warn(`DEPRECATED: ${o} is deprecated and will be removed in version ${e}. ${s}`)},[])},useComponentDeprecation=({name:o,version:s,alternative:e})=>{useDeprecation({name:o,version:s,message:e?`Please use ${e} component instead.`:"Please remove it carefully."})},usePropDeprecation=({name:o,value:s,version:e,alternative:n})=>{s&&useDeprecation({name:o,version:e,message:n?`Please use ${n} prop instead.`:"Please remove it carefully."})},usePropValueDeprecation=({component:o,prop:s,currentValue:e,deprecatedValues:n,version:r})=>{t(()=>{isReactDevelopment()&&n.includes(e)&&console.warn(`DEPRECATED: The ${e} value for the ${s} prop on the ${o} component is deprecated and will be removed in version ${r}.`)},[e])};
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useEffect } from 'react';
+// Since we have no module bundler it's the only way to detect dev env
+export const isReactDevelopment = () => '_self' in React.createElement('div');
+export const useDeprecation = ({ name, message, version }) => {
+    if (!isReactDevelopment())
+        return;
+    useEffect(() => {
+        console.warn(`DEPRECATED: ${name} is deprecated and will be removed in version ${version}. ${message}`);
+    }, []);
+};
+export const useComponentDeprecation = ({ name, version, alternative, }) => {
+    useDeprecation({
+        name,
+        version,
+        message: alternative
+            ? `Please use ${alternative} component instead.`
+            : `Please remove it carefully.`,
+    });
+};
+export const usePropDeprecation = ({ name, value, version, alternative, }) => {
+    if (value) {
+        useDeprecation({
+            name,
+            version,
+            message: alternative
+                ? `Please use ${alternative} prop instead.`
+                : `Please remove it carefully.`,
+        });
+    }
+};
+export const usePropValueDeprecation = ({ component, prop, currentValue, deprecatedValues, version, }) => {
+    useEffect(() => {
+        if (!isReactDevelopment())
+            return;
+        if (deprecatedValues.includes(currentValue)) {
+            console.warn(`DEPRECATED: The ${currentValue} value for the ${prop} prop on the ${component} component is deprecated and will be removed in version ${version}.`);
+        }
+    }, [currentValue]);
+};

package/lib/src/core-components/src/utils/hooks/useDeviceDetect.js

@@ -1 +1,10 @@
-"use strict";import{useMemo as e}from"react";export const useDeviceDetect=()=>e(()=>typeof window<"u"?{isMobile:!!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i),isFirefox:!!navigator.userAgent.toLowerCase().includes("firefox")}:{isMobile:!1,isFirefox:!1},[]);
+import { useMemo } from 'react';
+export const useDeviceDetect = () => useMemo(() => {
+    if (typeof window !== 'undefined') {
+        return {
+            isMobile: !!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i),
+            isFirefox: !!navigator.userAgent.toLowerCase().includes('firefox'),
+        };
+    }
+    return { isMobile: false, isFirefox: false };
+}, []);

package/lib/src/core-components/src/utils/hooks/useDeviceForm.js

@@ -1 +1,24 @@
-"use strict";import{useWindowDimensions as o}from"./useWindowDimensions";import{Size as t}from"../abstracts";export var DeviceFormFactor;(function(e){e.Mobile="mobile",e.Tablet="tablet",e.Laptop="laptop",e.Desktop="desktop"})(DeviceFormFactor||(DeviceFormFactor={}));export function useDeviceForm(){const{width:e}=o();return e<t.MD?DeviceFormFactor.Mobile:e<t.MD2?DeviceFormFactor.Tablet:e<t.XL?DeviceFormFactor.Laptop:DeviceFormFactor.Desktop}
+import { useWindowDimensions } from './useWindowDimensions';
+import { Size } from '../abstracts';
+export var DeviceFormFactor;
+(function (DeviceFormFactor) {
+    DeviceFormFactor["Mobile"] = "mobile";
+    DeviceFormFactor["Tablet"] = "tablet";
+    DeviceFormFactor["Laptop"] = "laptop";
+    DeviceFormFactor["Desktop"] = "desktop";
+})(DeviceFormFactor || (DeviceFormFactor = {}));
+export function useDeviceForm() {
+    const { width } = useWindowDimensions();
+    if (width < Size.MD) {
+        return DeviceFormFactor.Mobile;
+    }
+    else if (width < Size.MD2) {
+        return DeviceFormFactor.Tablet;
+    }
+    else if (width < Size.XL) {
+        return DeviceFormFactor.Laptop;
+    }
+    else {
+        return DeviceFormFactor.Desktop;
+    }
+}

package/lib/src/core-components/src/utils/hooks/useDisableBodyScroll.js

@@ -1 +1,16 @@
-"use strict";import{useEffect as t}from"react";import{useId as e}from"./useId";export const useDisableBackgroundScroll=(o,s)=>{const r=e("disable-scroll");t(()=>{if(o)return s??=document.body,s.classList.add(r),()=>{s?.classList.remove(r)}},[o,s])},useDisableBodyScroll=useDisableBackgroundScroll;
+import { useEffect } from 'react';
+import { useId } from './useId';
+export const useDisableBackgroundScroll = (shouldDisableScroll, backgroundElement) => {
+    const className = useId('disable-scroll');
+    useEffect(() => {
+        if (!shouldDisableScroll)
+            return;
+        backgroundElement ??= document.body;
+        backgroundElement.classList.add(className);
+        return () => {
+            backgroundElement?.classList.remove(className);
+        };
+    }, [shouldDisableScroll, backgroundElement]);
+};
+/** @deprecated Prefer `useDisableBackgroundScroll` instead */
+export const useDisableBodyScroll = useDisableBackgroundScroll;

package/lib/src/core-components/src/utils/hooks/useHoverState.js

@@ -1 +1,36 @@
-"use strict";import{useState as r,useCallback as e,useEffect as d}from"react";export const useHoverState=(c=!1)=>{const[a,o]=r(!1),[t,n]=r(!1),v=e(()=>{o(!0)},[]),f=e(()=>{o(!1)},[]),i=e(()=>{n(!0)},[]),s=e(()=>{n(!1)},[]);return d(()=>{const u=()=>{t&&s()};return document.addEventListener("mouseup",u),()=>{document.removeEventListener("mouseup",u)}},[t,s]),{hoverState:c?"disabled":t?"active":a?"hover":"default",onMouseOver:v,onMouseOut:f,onMouseDown:i,onMouseUp:s}};
+import { useState, useCallback, useEffect } from 'react';
+export const useHoverState = (disabled = false) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isActive, setIsActive] = useState(false);
+    const onMouseOver = useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    const onMouseOut = useCallback(() => {
+        setIsHovered(false);
+    }, []);
+    const onMouseDown = useCallback(() => {
+        setIsActive(true);
+    }, []);
+    const onMouseUp = useCallback(() => {
+        setIsActive(false);
+    }, []);
+    useEffect(() => {
+        const event = () => {
+            if (isActive) {
+                onMouseUp();
+            }
+        };
+        document.addEventListener('mouseup', event);
+        return () => {
+            document.removeEventListener('mouseup', event);
+        };
+    }, [isActive, onMouseUp]);
+    const hoverState = disabled
+        ? 'disabled'
+        : isActive
+            ? 'active'
+            : isHovered
+                ? 'hover'
+                : 'default';
+    return { hoverState, onMouseOver, onMouseOut, onMouseDown, onMouseUp };
+};

package/lib/src/core-components/src/utils/hooks/useId.js

@@ -1 +1,7 @@
-"use strict";import{useId as o}from"react";const r="tech-abl-ui";export const useId=(t,e)=>{const s=`${r}-${t}-${o()}`;return e??s};
+// import { useId as useReachId } from '@reach/auto-id';
+import { useId as useReactId } from 'react';
+const PREFIX = 'tech-abl-ui';
+export const useId = (prefix, id) => {
+    const randId = `${PREFIX}-${prefix}-${useReactId()}`;
+    return id ?? randId;
+};

package/lib/src/core-components/src/utils/hooks/useIsBrowser.js

@@ -1 +1,11 @@
-"use strict";import{useEffect as r,useState as t}from"react";export const useIsBrowser=()=>{const[e,s]=t(!1);return r(()=>{s(!0)},[]),e};
+import { useEffect, useState } from 'react';
+// sometimes components cannot be rendered on the server.
+// so using `useEffect` ensures that the code is only rendered on the client side
+// use this hook to avoid hydration errors
+export const useIsBrowser = () => {
+    const [isBrowser, setIsBrowser] = useState(false);
+    useEffect(() => {
+        setIsBrowser(true);
+    }, []);
+    return isBrowser;
+};

package/lib/src/core-components/src/utils/hooks/useMediaQuery.js

@@ -1 +1,16 @@
-"use strict";import{useEffect as r,useState as a}from"react";export const useMediaQuery=s=>{if(typeof window>"u")return!1;const[e,n]=a(!1);return r(()=>{const t=window.matchMedia(s);t.matches!==e&&n(t.matches);const i=()=>n(t.matches);return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[e,s]),e};
+import { useEffect, useState } from 'react';
+export const useMediaQuery = (query) => {
+    if (typeof window === 'undefined')
+        return false;
+    const [matches, setMatches] = useState(false);
+    useEffect(() => {
+        const media = window.matchMedia(query);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        window.addEventListener('resize', listener);
+        return () => window.removeEventListener('resize', listener);
+    }, [matches, query]);
+    return matches;
+};

package/lib/src/core-components/src/utils/hooks/useOverflow.js

@@ -1 +1,22 @@
-"use strict";import{useState as c}from"react";import{useSafeLayoutEffect as i}from"./useSafeLayoutEffect";export const useOverflow=o=>{const[s,n]=c(!1);return i(()=>{const{current:e}=o,t=()=>{if(!e)return;const f=e.scrollHeight>e.clientHeight;n(f)};let r;return e&&(r=new ResizeObserver(t),r.observe(e),t()),()=>r?.disconnect()}),s};
+import { useState } from 'react';
+import { useSafeLayoutEffect } from './useSafeLayoutEffect';
+export const useOverflow = (ref) => {
+    const [isOverflow, setIsOverflow] = useState(false);
+    useSafeLayoutEffect(() => {
+        const { current } = ref;
+        const trigger = () => {
+            if (!current)
+                return;
+            const hasOverflow = current.scrollHeight > current.clientHeight;
+            setIsOverflow(hasOverflow);
+        };
+        let observer;
+        if (current) {
+            observer = new ResizeObserver(trigger);
+            observer.observe(current);
+            trigger();
+        }
+        return () => observer?.disconnect();
+    });
+    return isOverflow;
+};

package/lib/src/core-components/src/utils/hooks/useSafeLayoutEffect.js

@@ -1 +1,5 @@
-"use strict";import e from"react";export const useSafeLayoutEffect=typeof window<"u"?e.useLayoutEffect:e.useEffect;
+import React from 'react';
+/**
+ * Version of useLayoutEffect that doesn't throw errors in SSR.
+ */
+export const useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;

package/lib/src/core-components/src/utils/hooks/useScrollingUp.js

@@ -1 +1,18 @@
-"use strict";import{useEffect as c,useRef as i,useState as u}from"react";export const useScrollingUp=(e=!1)=>{if(typeof window>"u")return e;const[s,l]=u(e),r=i(window.scrollY);return c(()=>{const o=()=>{const n=window.pageYOffset,t=r.current>n;l(t),r.current=n};return window.addEventListener("scroll",o,{passive:!0}),()=>window.removeEventListener("scroll",o)},[]),s};
+import { useEffect, useRef, useState } from 'react';
+export const useScrollingUp = (initialState = false) => {
+    if (typeof window === 'undefined')
+        return initialState;
+    const [scrollingUp, setScrollingUp] = useState(initialState);
+    const prevScroll = useRef(window.scrollY);
+    useEffect(() => {
+        const handleScroll = () => {
+            const currScroll = window.pageYOffset;
+            const isScrolled = prevScroll.current > currScroll;
+            setScrollingUp(isScrolled);
+            prevScroll.current = currScroll;
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+    return scrollingUp;
+};

package/lib/src/core-components/src/utils/hooks/useTrapFocus.js

@@ -1 +1,30 @@
-"use strict";import{useEffect as c}from"react";export const keyDownHandler=(e,n,t)=>{t.key==="Tab"&&(!t.shiftKey&&document.activeElement===n&&(e.focus(),t.preventDefault()),t.shiftKey&&document.activeElement===e&&(n.focus(),t.preventDefault()))};const s=["a[href]","button:not([disabled])","textarea","input","select"];export const useTrapFocus=e=>{c(()=>{const n=e?.current?.querySelectorAll(s.join(", ")),t=n?.[0],r=n?.[n.length-1],o=keyDownHandler.bind(null,t,r);return e?.current?.addEventListener("keydown",o),()=>e?.current?.removeEventListener("keydown",o)},[e?.current])};
+import { useEffect } from 'react';
+export const keyDownHandler = (firstElement, lastElement, e) => {
+    if (e.key !== 'Tab')
+        return;
+    if (!e.shiftKey && document.activeElement === lastElement) {
+        firstElement.focus();
+        e.preventDefault();
+    }
+    if (e.shiftKey && document.activeElement === firstElement) {
+        lastElement.focus();
+        e.preventDefault();
+    }
+};
+const selectors = [
+    'a[href]',
+    'button:not([disabled])',
+    'textarea',
+    'input',
+    'select',
+];
+export const useTrapFocus = (ref) => {
+    useEffect(() => {
+        const focusableElements = ref?.current?.querySelectorAll(selectors.join(', '));
+        const firstElement = focusableElements?.[0];
+        const lastElement = focusableElements?.[focusableElements.length - 1];
+        const boundKeydownHandler = keyDownHandler.bind(null, firstElement, lastElement);
+        ref?.current?.addEventListener('keydown', boundKeydownHandler);
+        return () => ref?.current?.removeEventListener('keydown', boundKeydownHandler);
+    }, [ref?.current]);
+};

package/lib/src/core-components/src/utils/hooks/useWindowDimensions.js

@@ -1 +1,23 @@
-"use strict";import{useState as o,useEffect as s}from"react";function t(){const{innerWidth:n,innerHeight:e}=window;return{width:n,height:e}}export function useWindowDimensions(){const[n,e]=o({width:0,height:0});return s(()=>{e(t());function i(){e(t())}return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[]),n}
+import { useState, useEffect } from 'react';
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+export function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState({
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        setWindowDimensions(getWindowDimensions());
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return windowDimensions;
+}

package/lib/src/core-components/src/utils/index.js

@@ -1 +1,9 @@
-"use strict";export*from"./utility.util";export*from"./context";export*from"./helpers";export*from"./hooks";export*from"./stories";export*from"./styling";export*from"./testing";export*from"./abstracts";export{tokens}from"./designTokens";
+export * from './utility.util';
+export * from './context';
+export * from './helpers';
+export * from './hooks';
+export * from './stories';
+export * from './styling';
+export * from './testing';
+export * from './abstracts';
+export { tokens } from './designTokens';

package/lib/src/core-components/src/utils/stories/Wrappers.js

@@ -1,32 +1,47 @@
-"use strict";import{jsx as r}from"react/jsx-runtime";import{styled as e}from"styled-components";export const Wrappers={Default:e.div`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from 'styled-components';
+export const Wrappers = {
+    Default: styled.div `
     display: flex;
     justify-content: flex-start;
     padding: 2rem;
-  `,Dashed:e.div`
+  `,
+    Dashed: styled.div `
     margin: auto;
-    ${({$width:i})=>i&&`width: ${i};`}
+    ${({ $width }) => $width && `width: ${$width};`}
     border: 2px dashed var(--aui-primary);
     border-radius: 8px;
     padding: 8px;
-  `,TextInput:e.div`
+  `,
+    TextInput: styled.div `
     width: 250px;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin: auto;
-  `,Modal:e.div`
+  `,
+    Modal: styled.div `
     height: 100%;
     margin: -1rem;
-  `,Row:e.div`
+  `,
+    Row: styled.div `
     max-width: 100%;
     flex-wrap: wrap;
     display: flex;
     gap: 10px;
     align-items: center;
     justify-content: center;
-  `,Test:e.div`
+  `,
+    Test: styled.div `
     display: flex;
     flex-direction: column;
     gap: 1rem;
     width: min(100%, 600px);
-  `},Decorators=Object.entries(Wrappers).reduce((i,[t,a])=>({...i,[t]:d=>r(a,{children:r(d,{})})}),{});
+  `,
+};
+export const Decorators = Object.entries(Wrappers).reduce((acc, [title, Wrapper]) => ({
+    ...acc,
+    [title]: (Story) => (_jsx(Wrapper, { children: _jsx(Story, {}) })),
+}), {}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+);

package/lib/src/core-components/src/utils/stories/cleanProps.js

@@ -1 +1,5 @@
-"use strict";export function cleanProps(n){return Object.entries(n).filter(([,e])=>e!==void 0).reduce((e,[r,t])=>({...e,[r]:t}),{})}
+export function cleanProps(object) {
+    return Object.entries(object)
+        .filter(([, val]) => val !== undefined)
+        .reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {});
+}

package/lib/src/core-components/src/utils/stories/index.js

@@ -1 +1,4 @@
-"use strict";export*from"./view-ports";export*from"./cleanProps";export*from"./sleep";export*from"./Wrappers";
+export * from './view-ports';
+export * from './cleanProps';
+export * from './sleep';
+export * from './Wrappers';

package/lib/src/core-components/src/utils/stories/sleep.js

@@ -1 +1,4 @@
-"use strict";export async function sleep(e){return new Promise(n=>setTimeout(n,e))}
+// https://stackoverflow.com/a/39914235
+export async function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/lib/src/core-components/src/utils/stories/view-ports.js

@@ -1 +1,50 @@
-"use strict";export const VIEWPORTS={sm:{name:"SM",styles:{height:"100%",width:"375px"},type:"mobile"},md:{name:"MD",styles:{height:"100%",width:"768px"},type:"mobile"},md2:{name:"MD2",styles:{height:"100%",width:"1024px"},type:"mobile"},lg:{name:"LG",styles:{height:"100%",width:"1280px"},type:"mobile"},xl:{name:"XL",styles:{height:"100%",width:"1440px"},type:"mobile"},xxl:{name:"XXL",styles:{height:"100%",width:"1920px"},type:"mobile"}};
+export const VIEWPORTS = {
+    sm: {
+        name: 'SM',
+        styles: {
+            height: '100%',
+            width: '375px',
+        },
+        type: 'mobile',
+    },
+    md: {
+        name: 'MD',
+        styles: {
+            height: '100%',
+            width: '768px',
+        },
+        type: 'mobile',
+    },
+    md2: {
+        name: 'MD2',
+        styles: {
+            height: '100%',
+            width: '1024px',
+        },
+        type: 'mobile',
+    },
+    lg: {
+        name: 'LG',
+        styles: {
+            height: '100%',
+            width: '1280px',
+        },
+        type: 'mobile',
+    },
+    xl: {
+        name: 'XL',
+        styles: {
+            height: '100%',
+            width: '1440px',
+        },
+        type: 'mobile',
+    },
+    xxl: {
+        name: 'XXL',
+        styles: {
+            height: '100%',
+            width: '1920px',
+        },
+        type: 'mobile',
+    },
+};

package/lib/src/core-components/src/utils/styling/calcWidthOfColumns.js

@@ -1 +1,5 @@
-"use strict";export const calcWidthOfColumns=({columns:n,totalColumns:t,margin:r,gutter:c,maxWidth:$="100%"})=>{const e=(n-1)*c,s=2*r+(t-1)*c;return`calc(${e}px + ${n} * (${$} - ${s}px) / ${t})`};
+export const calcWidthOfColumns = ({ columns, totalColumns, margin, gutter, maxWidth = '100%', }) => {
+    const internalGutters = (columns - 1) * gutter;
+    const guttersAndMargin = 2 * margin + (totalColumns - 1) * gutter;
+    return `calc(${internalGutters}px + ${columns} * (${maxWidth} - ${guttersAndMargin}px) / ${totalColumns})`;
+};

package/lib/src/core-components/src/utils/styling/createGridContainer.js

@@ -1,9 +1,15 @@
-"use strict";export const createGridContainer=(a,t,i)=>`
-  --gap-count: calc(${t} - 1);
-  --total-gap-width: calc(var(--gap-count) * ${a});
-  --grid-item--max-width: calc((100% - var(--total-gap-width)) / ${t});
+export const createGridContainer = (
+/* Gap between columns, also known as "gutter" */
+gridLayoutGap, 
+/* Max number of columns in a row */
+gridColumnCount, 
+/* Min width of grid items before they wrap to a new row */
+gridItemMinWidth) => `
+  --gap-count: calc(${gridColumnCount} - 1);
+  --total-gap-width: calc(var(--gap-count) * ${gridLayoutGap});
+  --grid-item--max-width: calc((100% - var(--total-gap-width)) / ${gridColumnCount});
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(max(${i}, var(--grid-item--max-width)), 1fr));
-  grid-gap: ${a};
+  grid-template-columns: repeat(auto-fill, minmax(max(${gridItemMinWidth}, var(--grid-item--max-width)), 1fr));
+  grid-gap: ${gridLayoutGap};
 `;

package/lib/src/core-components/src/utils/styling/createTransition.js

@@ -1,3 +1,8 @@
-"use strict";import{css as r}from"styled-components";export const transitionDuration="0.2s",transitionTimingFunction="ease-in-out",createTransition=({properties:t,duration:n=transitionDuration,timingFunction:o=transitionTimingFunction})=>r`
-  transition: ${t.map(i=>`${i} ${n} ${o}`).join(", ")};
+import { css } from 'styled-components';
+export const transitionDuration = '0.2s';
+export const transitionTimingFunction = 'ease-in-out';
+export const createTransition = ({ properties, duration = transitionDuration, timingFunction = transitionTimingFunction, }) => css `
+  transition: ${properties
+    .map((property) => `${property} ${duration} ${timingFunction}`)
+    .join(', ')};
 `;

package/lib/src/core-components/src/utils/styling/forwardProps.js

@@ -1 +1,10 @@
-"use strict";import t from"@emotion/is-prop-valid";export const dontForwardProps=()=>({shouldForwardProp:(r,o)=>typeof o=="string"?t(r):!0});
+import isPropValid from '@emotion/is-prop-valid';
+// from styled-components docs: https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default
+export const dontForwardProps = () => ({
+    shouldForwardProp: (propName, target) => {
+        if (typeof target === 'string') {
+            return isPropValid(propName);
+        }
+        return true;
+    },
+});