react-restyle-components 0.4.39 → 0.4.40

package/lib/src/core-components/src/utils/context/DefaultsProvider.js

@@ -1 +1,8 @@
-"use strict";"use client";import{jsx as o}from"react/jsx-runtime";import{createContext as s,useContext as n}from"react";export const DefaultsContext=s({}),DefaultsProvider=({value:t,children:e})=>{const r=n(DefaultsContext);return o(DefaultsContext.Provider,{value:{...r,...t},children:e})};
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+export const DefaultsContext = createContext({});
+export const DefaultsProvider = ({ value, children, }) => {
+    const currentDefaults = useContext(DefaultsContext);
+    return (_jsx(DefaultsContext.Provider, { value: { ...currentDefaults, ...value }, children: children }));
+};

package/lib/src/core-components/src/utils/context/InternalProvider.js

@@ -1 +1,24 @@
-"use strict";"use client";import{jsx as o}from"react/jsx-runtime";import{useTheme as t}from"../abstracts/theme";import{ThemeProvider as s}from"styled-components";const c=()=>navigator?.userAgent?.includes?.("jsdom");export const InternalProvider=({children:e})=>{const r=t();return o(s,{theme:r,children:e})};
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '../abstracts/theme';
+import { ThemeProvider } from 'styled-components';
+const isJSDOM = () => navigator?.userAgent?.includes?.('jsdom');
+/**
+ * Provides internal stuff we need for our components.
+ * Injects Styled Components theme prop via context.
+ */
+export const InternalProvider = ({ children, }) => {
+    const theme = useTheme();
+    // useEffect(() => {
+    //   const style = getComputedStyle(document.body);
+    //   const globalStylesExists = !!style.getPropertyValue(
+    //     '--aui-global-styles-exists'
+    //   );
+    //   if (!globalStylesExists && isReactDevelopment() && !isJSDOM()) {
+    //     console.error(
+    //       'ERROR: Your techabl UI components WILL BREAK in a future V4 minor version update. You must include GlobalStyles in your DOM.'
+    //     );
+    //   }
+    // }, []);
+    return _jsx(ThemeProvider, { theme: theme, children: children });
+};

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

@@ -1 +1,2 @@
-"use strict";export*from"./DefaultsProvider";export*from"./InternalProvider";
+export * from './DefaultsProvider';
+export * from './InternalProvider';

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

@@ -1 +1,125 @@
-"use strict";const e=require("../../tailwind.config.js"),o=e.theme.extend;export const tokens={surface:o.colors["token-surface"],onSurface:o.colors["token-on-surface"],primary:o.colors["token-primary"],onPrimary:o.colors["token-on-primary"],outline:o.colors["token-outline"],outlineSoft:o.colors["token-outline-soft"],success:o.colors["token-success"],error:o.colors["token-error"],warning:o.colors["token-warning"],red:o.colors.red?.DEFAULT||"#ff0000",darkGray:o.colors.grey_0||"#4a4a4a",white:o.colors.white||"#ffffff",spacing025:o.spacing["token-025"],spacing050:o.spacing["token-050"],spacing075:o.spacing["token-075"],spacing100:o.spacing["token-100"],spacing150:o.spacing["token-150"],spacing200:o.spacing["token-200"],spacing300:o.spacing["token-300"],spacing400:o.spacing["token-400"],spacing500:o.spacing["token-500"],spacing600:o.spacing["token-600"],spacing800:o.spacing["token-800"],spacing1000:o.spacing["token-1000"],spacing1200:o.spacing["token-1200"],borderRadius025:o.borderRadius["token-025"],borderRadius050:o.borderRadius["token-050"],borderRadius100:o.borderRadius["token-100"],borderRadius200:o.borderRadius["token-200"],borderRadius300:o.borderRadius["token-300"],borderRadius400:o.borderRadius["token-400"],borderRadiusNone:o.borderRadius["token-none"],borderRadiusRound:o.borderRadius["token-round"],stateLayerNone:"var(--state-layer-none)",stateLayerHover:"var(--state-layer-hover)",stateLayerPress:"var(--state-layer-press)"};
+const tailwindConfig = require('../../tailwind.config.js');
+// const tailwindConfig = {
+//   theme: {
+//     extend: {
+//       colors: {
+//         current: 'currentColor',
+//         transparent: 'transparent',
+//         'text-base': '#ffffff',
+//         primary: '#454cbf',
+//         secondary: '#c57c85',
+//         accent: '#422a68',
+//         black: '#000000',
+//         grey: '#6A727F',
+//         grey_0: '#4a4a4a',
+//         grey_1: '#707070',
+//         light_1: '#ebebeb',
+//         white: '#ffffff',
+//         background: '#ffffff',
+//         light_white: '#f4f6f6',
+//         red: {
+//           DEFAULT: '#ff0000',
+//         },
+//         orange: '#ffae1a',
+//         mono: '#754c00',
+//         'border-red': '#ff0000',
+//         bgGrey: '#808080',
+//         stroke: '#E2E8F0',
+//         boxdark: '#24303F',
+//         'boxdark-2': '#1A222C',
+//         strokedark: '#2E3A47',
+//         content: '#000000',
+//         'form-strokedark': '#3d4d60',
+//         'form-input': '#1d2a39',
+//         'meta-1': '#DC3545',
+//         'meta-2': '#EFF2F7',
+//         'meta-3': '#10B981',
+//         'meta-4': '#313D4A',
+//         'meta-5': '#259AE6',
+//         'meta-6': '#FFBA00',
+//         'meta-7': '#FF6766',
+//         'meta-8': '#F0950C',
+//         'meta-9': '#E5E7EB',
+//         success: '#219653',
+//         danger: '#D34053',
+//         warning: '#FFA70B',
+//         // Design token colors - extending existing colors
+//         'token-surface': 'var(--surface)',
+//         'token-on-surface': 'var(--on-surface)',
+//         'token-primary': 'var(--primary)',
+//         'token-on-primary': 'var(--on-primary)',
+//         'token-outline': 'var(--outline)',
+//         'token-outline-soft': 'var(--outline-soft)',
+//         'token-success': 'var(--status-success)',
+//         'token-error': 'var(--status-error)',
+//         'token-warning': 'var(--status-warning)',
+//       },
+//       spacing: {
+//         'token-025': '0.125rem',
+//         'token-050': '0.25rem',
+//         'token-075': '0.375rem',
+//         'token-100': '0.5rem',
+//         'token-150': '0.75rem',
+//         'token-200': '1rem',
+//       },
+//       borderRadius: {
+//         'token-025': '0.125rem',
+//         'token-050': '0.25rem',
+//         'token-100': '0.5rem',
+//         'token-200': '1rem',
+//         'token-300': '1.5rem',
+//       },
+//       height: {
+//         'screen/2': '50vh',
+//         screen98: '98vh',
+//         screen96: '96vh',
+//         screen94: '94vh',
+//         screen92: '92vh',
+//       },
+//     },
+//   },
+// };
+const theme = tailwindConfig.theme.extend;
+// Extract all design tokens from tailwind.config.js
+export const tokens = {
+    // Colors
+    surface: theme.colors['token-surface'],
+    onSurface: theme.colors['token-on-surface'],
+    primary: theme.colors['token-primary'],
+    onPrimary: theme.colors['token-on-primary'],
+    outline: theme.colors['token-outline'],
+    outlineSoft: theme.colors['token-outline-soft'],
+    success: theme.colors['token-success'],
+    error: theme.colors['token-error'],
+    warning: theme.colors['token-warning'],
+    red: theme.colors.red?.DEFAULT || '#ff0000',
+    darkGray: theme.colors.grey_0 || '#4a4a4a',
+    white: theme.colors.white || '#ffffff',
+    // Spacing
+    spacing025: theme.spacing['token-025'],
+    spacing050: theme.spacing['token-050'],
+    spacing075: theme.spacing['token-075'],
+    spacing100: theme.spacing['token-100'],
+    spacing150: theme.spacing['token-150'],
+    spacing200: theme.spacing['token-200'],
+    spacing300: theme.spacing['token-300'],
+    spacing400: theme.spacing['token-400'],
+    spacing500: theme.spacing['token-500'],
+    spacing600: theme.spacing['token-600'],
+    spacing800: theme.spacing['token-800'],
+    spacing1000: theme.spacing['token-1000'],
+    spacing1200: theme.spacing['token-1200'],
+    // Border Radius
+    borderRadius025: theme.borderRadius['token-025'],
+    borderRadius050: theme.borderRadius['token-050'],
+    borderRadius100: theme.borderRadius['token-100'],
+    borderRadius200: theme.borderRadius['token-200'],
+    borderRadius300: theme.borderRadius['token-300'],
+    borderRadius400: theme.borderRadius['token-400'],
+    borderRadiusNone: theme.borderRadius['token-none'],
+    borderRadiusRound: theme.borderRadius['token-round'],
+    // State Layer (from CSS variables, not in tailwind config)
+    stateLayerNone: 'var(--state-layer-none)',
+    stateLayerHover: 'var(--state-layer-hover)',
+    stateLayerPress: 'var(--state-layer-press)',
+};

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

@@ -1 +1,23 @@
-"use strict";export function attachSubComponents(a,e,t){return Object.values(t).forEach(c=>c.displayName=`${a}.${c.displayName}`),Object.assign(e,{displayName:a},t)}
+/**
+ * Attaches subcomponents to a parent component for use in
+ * composed components. Example:
+ * ```tsx
+ * <Parent>
+ *    <Parent.Title>abc</Parent.Title>
+ *    <Parent.Body prop1="foobar"/>
+ * </Parent>
+ * ```
+ *
+ * This function also sets displayname on the parent component
+ * and all children component, and has the correct return type
+ * for typescript.
+ *
+ * @param displayName topLevelComponent's displayName
+ * @param topLevelComponent the parent element of the composed component
+ * @param otherComponents an object of child components (keys are the names of the child components)
+ * @returns the top level component with otherComponents as static properties
+ */
+export function attachSubComponents(displayName, topLevelComponent, otherComponents) {
+    Object.values(otherComponents).forEach((component) => (component.displayName = `${displayName}.${component.displayName}`));
+    return Object.assign(topLevelComponent, { displayName }, otherComponents);
+}

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

@@ -1 +1,11 @@
-"use strict";import t from"react";import{isComponentType as o}from"./isComponentType";export const flattenChildren=n=>t.Children.toArray(n).reduce((e,r)=>o(r,t.Fragment)?e.concat(...flattenChildren(r.props.children)):e.concat(r),[]);
+import React from 'react';
+import { isComponentType } from './isComponentType';
+// Source: https://github.com/grrowl/react-keyed-flatten-children/blob/master/index.ts
+export const flattenChildren = (children) => React.Children.toArray(children).reduce((acc, child) => {
+    if (isComponentType(child, React.Fragment)) {
+        return acc.concat(...flattenChildren(child.props.children));
+    }
+    else {
+        return acc.concat(child);
+    }
+}, []);

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

@@ -1 +1,3 @@
-"use strict";import e from"react";import{isComponentType as i}from"./isComponentType";export const getChildByType=(o,r)=>e.Children.toArray(o).find(t=>i(t,r));
+import React from 'react';
+import { isComponentType } from './isComponentType';
+export const getChildByType = (children, componentType) => React.Children.toArray(children).find((element) => isComponentType(element, componentType));

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

@@ -1 +1,5 @@
-"use strict";export*from"./attachSubComponents";export*from"./getChildByType";export*from"./flattenChildren";export*from"./isComponentType";export*from"./separateChildrenByType";
+export * from './attachSubComponents';
+export * from './getChildByType';
+export * from './flattenChildren';
+export * from './isComponentType';
+export * from './separateChildrenByType';

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]);
+};