react-restyle-components 0.4.39 → 0.4.40

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

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

@@ -1 +1,5 @@
-"use strict";export*from"./calcWidthOfColumns";export*from"./createGridContainer";export*from"./createTransition";export*from"./forwardProps";export*from"./pxToRem";
+export * from './calcWidthOfColumns';
+export * from './createGridContainer';
+export * from './createTransition';
+export * from './forwardProps';
+export * from './pxToRem';

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

@@ -1 +1,6 @@
-"use strict";export function pxToRem(e){const t=typeof window<"u"?parseFloat(getComputedStyle(document.documentElement).fontSize):16;return e/t}
+export function pxToRem(sizeInPx) {
+    const computedStyle = typeof window !== 'undefined'
+        ? parseFloat(getComputedStyle(document.documentElement).fontSize)
+        : 16;
+    return sizeInPx / computedStyle;
+}

package/lib/src/core-components/src/utils/testing/getComputedStyle.js

@@ -1 +1,3 @@
-"use strict";export function getComputedStyle(t,e){return window.getComputedStyle(t)[e]}
+export function getComputedStyle(element, property) {
+    return window.getComputedStyle(element)[property];
+}

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

@@ -1 +1 @@
-"use strict";export*from"./getComputedStyle";
+export * from './getComputedStyle';

package/lib/src/core-components/src/utils/utility.util.js

@@ -1 +1,14 @@
-"use strict";import c from"clsx";import{twMerge as s}from"tailwind-merge";export const cn=(...r)=>s(c(r)),mapToArray=r=>{const t=[];return r.forEach(function(o,p){const e=Object.keys(o)[0],n=e;t.push([n,o[e]])}),t};
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export const cn = (...inputs) => {
+    return twMerge(clsx(inputs));
+};
+export const mapToArray = (arr) => {
+    const res = [];
+    arr.forEach(function (obj, index) {
+        const key = Object.keys(obj)[0];
+        const value = key;
+        res.push([value, obj[key]]);
+    });
+    return res;
+};

package/lib/src/core-components/tailwind.config.js

@@ -1 +1,233 @@
-"use strict";const defaultTheme=require("tailwindcss/defaultTheme");module.exports={content:["./public/**/*.html","./src/**/*.{js,jsx,ts,tsx,vue}"],darkMode:"class",theme:{extend:{screens:{...defaultTheme.screens,sm:{min:"0px",max:"767px"},md:{min:"768px",max:"2000px"},"token-xs":"20rem","token-sm":"23.4375rem","token-md":"48rem","token-lg":"64rem","token-xl":"80rem","token-xxl":"90rem"},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",...defaultTheme.colors.red},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","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)"},fontFamily:{arimaRegular:["ArimaRegular"]},fontSize:{"title-xxl":["44px","55px"],"title-xl":["36px","45px"],"title-xl2":["33px","45px"],"title-lg":["28px","35px"],"title-md":["24px","30px"],"title-md2":["26px","30px"],"title-sm":["20px","26px"],"title-xsm":["18px","24px"]},spacing:{"8xl":"96rem","9xl":"128rem","token-000":"0rem","token-025":"0.125rem","token-050":"0.25rem","token-075":"0.375rem","token-100":"0.5rem","token-150":"0.75rem","token-200":"1rem","token-300":"1.5rem","token-400":"2rem","token-500":"2.5rem","token-600":"3rem","token-800":"4rem","token-1000":"5rem","token-1200":"6rem"},borderRadius:{"4xl":"2rem","100px":"100px","token-025":"0.125rem","token-050":"0.25rem","token-100":"0.5rem","token-200":"1rem","token-300":"1.5rem","token-400":"2rem","token-none":"0rem","token-round":"10000rem"},height:{"screen/2":"50vh",screen98:"98vh",screen96:"96vh",screen94:"94vh",screen92:"92vh","screen/3":"calc(100vh / 3)","screen/4":"calc(100vh / 4)","screen/5":"calc(100vh / 5)"},zIndex:{999999:"999999",99999:"99999",9999:"9999",999:"999",99:"99",9:"9",1:"1"},transitionProperty:{width:"width",stroke:"stroke"},borderWidth:{6:"6px"},opacity:{"token-04":"4%","token-08":"8%","token-10":"10%","token-12":"12%","token-20":"20%","token-30":"30%","token-40":"40%","token-50":"50%","token-60":"60%","token-70":"70%","token-75":"75%","token-80":"80%","token-90":"90%","token-100":"100%","token-none":"0%"},strokeWidth:{"token-card":"0.0625rem","token-selected-card-hover":"0.125rem","token-divider":"0.0625rem"},boxShadow:{default:"0px 8px 13px -3px rgba(0, 0, 0, 0.07)",card:"0px 1px 3px rgba(0, 0, 0, 0.12)","card-2":"0px 1px 2px rgba(0, 0, 0, 0.05)",switcher:"0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)","switch-1":"0px 0px 5px rgba(0, 0, 0, 0.15)",1:"0px 1px 3px rgba(0, 0, 0, 0.08)",2:"0px 1px 4px rgba(0, 0, 0, 0.12)",3:"0px 1px 5px rgba(0, 0, 0, 0.14)",4:"0px 4px 10px rgba(0, 0, 0, 0.12)",5:"0px 1px 1px rgba(0, 0, 0, 0.15)",6:"0px 3px 15px rgba(0, 0, 0, 0.1)",7:"-5px 0 0 #313D4A, 5px 0 0 #313D4A",8:"1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)"},dropShadow:{1:"0px 1px 0px #E2E8F0",2:"0px 1px 4px rgba(0, 0, 0, 0.12)"},keyframes:{rotating:{"0%, 100%":{transform:"rotate(360deg)"},"50%":{transform:"rotate(0deg)"}},flip:{to:{transform:"rotate(360deg)"}},rotate:{to:{transform:"rotate(90deg)"}}},animation:{"ping-once":"ping 5s cubic-bezier(0, 0, 0.2, 1)",rotating:"rotating 30s linear infinite","spin-1.5":"spin 1.5s linear infinite","spin-2":"spin 2s linear infinite","spin-3":"spin 3s linear infinite",flip:"flip 6s infinite steps(2, end)",rotate:"rotate 3s linear infinite both"}},borderWidth:{DEFAULT:"1px"}},styles:{colors:{lightBack:""}},variants:{extend:{opacity:["disabled"],cursor:["disabled"],borderRadius:["hover","first","last"],zIndex:["hover"],borderCollapse:["hover","focus"]}},corePlugins:{tableLayout:!1}};
+/* eslint-disable @typescript-eslint/no-var-requires */
+const defaultTheme = require('tailwindcss/defaultTheme');
+module.exports = {
+  content: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      screens: {
+        ...defaultTheme.screens,
+        sm: {min: '0px', max: '767px'},
+        md: {min: '768px', max: '2000px'},
+        // Breakpoint tokens from tokens.css
+        'token-xs': '20rem',
+        'token-sm': '23.4375rem',
+        'token-md': '48rem',
+        'token-lg': '64rem',
+        'token-xl': '80rem',
+        'token-xxl': '90rem',
+      },
+      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',
+          ...defaultTheme.colors.red,
+        },
+        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)',
+      },
+      fontFamily: {
+        arimaRegular: ['ArimaRegular'],
+      },
+      fontSize: {
+        'title-xxl': ['44px', '55px'],
+        'title-xl': ['36px', '45px'],
+        'title-xl2': ['33px', '45px'],
+        'title-lg': ['28px', '35px'],
+        'title-md': ['24px', '30px'],
+        'title-md2': ['26px', '30px'],
+        'title-sm': ['20px', '26px'],
+        'title-xsm': ['18px', '24px'],
+      },
+      spacing: {
+        '8xl': '96rem',
+        '9xl': '128rem',
+        // Design token spacing - extending existing spacing
+        'token-000': '0rem',
+        'token-025': '0.125rem',
+        'token-050': '0.25rem',
+        'token-075': '0.375rem',
+        'token-100': '0.5rem',
+        'token-150': '0.75rem',
+        'token-200': '1rem',
+        'token-300': '1.5rem',
+        'token-400': '2rem',
+        'token-500': '2.5rem',
+        'token-600': '3rem',
+        'token-800': '4rem',
+        'token-1000': '5rem',
+        'token-1200': '6rem',
+      },
+      borderRadius: {
+        '4xl': '2rem',
+        '100px': '100px',
+        // Design token border radius - extending existing
+        'token-025': '0.125rem',
+        'token-050': '0.25rem',
+        'token-100': '0.5rem',
+        'token-200': '1rem',
+        'token-300': '1.5rem',
+        'token-400': '2rem',
+        'token-none': '0rem',
+        'token-round': '10000rem',
+      },
+      height: {
+        'screen/2': '50vh',
+        screen98: '98vh',
+        screen96: '96vh',
+        screen94: '94vh',
+        screen92: '92vh',
+        'screen/3': 'calc(100vh / 3)',
+        'screen/4': 'calc(100vh / 4)',
+        'screen/5': 'calc(100vh / 5)',
+      },
+      zIndex: {
+        999_999: '999999',
+        99_999: '99999',
+        9999: '9999',
+        999: '999',
+        99: '99',
+        9: '9',
+        1: '1',
+      },
+      transitionProperty: {width: 'width', stroke: 'stroke'},
+      borderWidth: {
+        6: '6px',
+      },
+      opacity: {
+        // Design token opacity - extending existing opacity
+        'token-04': '4%',
+        'token-08': '8%',
+        'token-10': '10%',
+        'token-12': '12%',
+        'token-20': '20%',
+        'token-30': '30%',
+        'token-40': '40%',
+        'token-50': '50%',
+        'token-60': '60%',
+        'token-70': '70%',
+        'token-75': '75%',
+        'token-80': '80%',
+        'token-90': '90%',
+        'token-100': '100%',
+        'token-none': '0%',
+      },
+      strokeWidth: {
+        // Design token stroke - from tokens.css
+        'token-card': '0.0625rem',
+        'token-selected-card-hover': '0.125rem',
+        'token-divider': '0.0625rem',
+      },
+      boxShadow: {
+        default: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)',
+        card: '0px 1px 3px rgba(0, 0, 0, 0.12)',
+        'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)',
+        switcher:
+          '0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)',
+        'switch-1': '0px 0px 5px rgba(0, 0, 0, 0.15)',
+        1: '0px 1px 3px rgba(0, 0, 0, 0.08)',
+        2: '0px 1px 4px rgba(0, 0, 0, 0.12)',
+        3: '0px 1px 5px rgba(0, 0, 0, 0.14)',
+        4: '0px 4px 10px rgba(0, 0, 0, 0.12)',
+        5: '0px 1px 1px rgba(0, 0, 0, 0.15)',
+        6: '0px 3px 15px rgba(0, 0, 0, 0.1)',
+        7: '-5px 0 0 #313D4A, 5px 0 0 #313D4A',
+        8: '1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)',
+      },
+      dropShadow: {
+        1: '0px 1px 0px #E2E8F0',
+        2: '0px 1px 4px rgba(0, 0, 0, 0.12)',
+      },
+      keyframes: {
+        rotating: {
+          '0%, 100%': {transform: 'rotate(360deg)'},
+          '50%': {transform: 'rotate(0deg)'},
+        },
+        flip: {
+          to: {
+            transform: 'rotate(360deg)',
+          },
+        },
+        rotate: {
+          to: {
+            transform: 'rotate(90deg)',
+          },
+        },
+      },
+      animation: {
+        'ping-once': 'ping 5s cubic-bezier(0, 0, 0.2, 1)',
+        rotating: 'rotating 30s linear infinite',
+        'spin-1.5': 'spin 1.5s linear infinite',
+        'spin-2': 'spin 2s linear infinite',
+        'spin-3': 'spin 3s linear infinite',
+        flip: 'flip 6s infinite steps(2, end)',
+        rotate: 'rotate 3s linear infinite both',
+      },
+    },
+    borderWidth: {
+      DEFAULT: '1px',
+    },
+  },
+  styles: {
+    colors: {
+      lightBack: '',
+    },
+  },
+  variants: {
+    extend: {
+      opacity: ['disabled'],
+      cursor: ['disabled'],
+      borderRadius: ['hover', 'first', 'last'],
+      zIndex: ['hover'],
+      borderCollapse: ['hover', 'focus'],
+    },
+  },
+  corePlugins: {
+    tableLayout: false,
+  }
+
+};

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

@@ -1 +1,3 @@
-"use strict";export*from"./src/useClickOutside/useClickOutside.hook";export*from"./src/useDebounce/useDebounce.hook";export*from"./src/usePreventEKey/usePreventEKey.hook";
+export * from './src/useClickOutside/useClickOutside.hook';
+export * from './src/useDebounce/useDebounce.hook';
+export * from './src/usePreventEKey/usePreventEKey.hook';

package/lib/src/core-hooks/src/useClickOutside/useClickOutside.hook.js

@@ -1 +1,46 @@
-"use strict";import{useEffect as c}from"react";export const useClickOutside=(t,e)=>{c(()=>{let n=!1,r=!1;const s=u=>{n||!r||!t.current||t.current.contains(u.target)||e(u)},o=u=>{r=t.current,n=t.current&&t.current.contains(u.target)};return document.addEventListener("mousedown",o),document.addEventListener("touchstart",o),document.addEventListener("click",s),()=>{document.removeEventListener("mousedown",o),document.removeEventListener("touchstart",o),document.removeEventListener("click",s)}},[t,e])},useClickOutsideWithoutInput=(t,e)=>{c(()=>{const n=r=>{r.target.tagName!=="INPUT"&&t.current&&!t.current.contains(r.target)&&e()};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[t,e])};
+import { useEffect } from 'react';
+export const useClickOutside = (ref, handler) => {
+    useEffect(() => {
+        let startedInside = false;
+        let startedWhenMounted = false;
+        const listener = (event) => {
+            // Do nothing if `mousedown` or `touchstart` started inside ref element
+            if (startedInside || !startedWhenMounted)
+                return;
+            // Do nothing if clicking ref's element or descendent elements
+            if (!ref.current || ref.current.contains(event.target))
+                return;
+            handler(event);
+        };
+        const validateEventStart = (event) => {
+            startedWhenMounted = ref.current;
+            startedInside = ref.current && ref.current.contains(event.target);
+        };
+        document.addEventListener('mousedown', validateEventStart);
+        document.addEventListener('touchstart', validateEventStart);
+        document.addEventListener('click', listener);
+        return () => {
+            document.removeEventListener('mousedown', validateEventStart);
+            document.removeEventListener('touchstart', validateEventStart);
+            document.removeEventListener('click', listener);
+        };
+    }, [ref, handler]);
+};
+export const useClickOutsideWithoutInput = (ref, callback) => {
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            // Check if the target is an input element
+            if (event.target.tagName === 'INPUT') {
+                return; // Skip calling the callback if the target is an input
+            }
+            // Check if the click is outside the ref element
+            if (ref.current && !ref.current.contains(event.target)) {
+                callback();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ref, callback]);
+};

package/lib/src/core-hooks/src/useDebounce/useDebounce.hook.js

@@ -1 +1,30 @@
-"use strict";import{useEffect as s,useMemo as f,useRef as i}from"react";export const useDebounce=(r,t)=>{const e=i(null),u=f(()=>((n,o)=>c=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{typeof n=="function"?n(c):console.error("func is not a function")},o)})(r,t),[r,t]);return s(()=>()=>{e.current&&clearTimeout(e.current)},[]),u};
+import { useEffect, useMemo, useRef } from 'react';
+export const useDebounce = (callback, delay) => {
+    const timeoutRef = useRef(null);
+    const debouncedCallback = useMemo(() => {
+        const debounce = (func, wait) => {
+            return (value) => {
+                if (timeoutRef.current) {
+                    clearTimeout(timeoutRef.current);
+                }
+                timeoutRef.current = setTimeout(() => {
+                    if (typeof func === 'function') {
+                        func(value);
+                    }
+                    else {
+                        console.error('func is not a function');
+                    }
+                }, wait);
+            };
+        };
+        return debounce(callback, delay);
+    }, [callback, delay]);
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    return debouncedCallback;
+};

package/lib/src/core-hooks/src/usePreventEKey/usePreventEKey.hook.js

@@ -1 +1,8 @@
-"use strict";import{useCallback as r}from"react";export const usePreventEKey=()=>r(e=>{(e.key==="e"||e.key==="E")&&e.preventDefault()},[]);
+import { useCallback } from 'react';
+export const usePreventEKey = () => {
+    return useCallback((e) => {
+        if (e.key === 'e' || e.key === 'E') {
+            e.preventDefault();
+        }
+    }, []);
+};

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

@@ -1 +1,7 @@
-"use strict";export*from"./src/utility/utility.util";export*from"./src/calculation/calculation.util";export*from"./src/convert/numberToWords/numToWords.util";export*from"./src/convert/typography/camelCaseToTitleCase.util";export*from"./src/colors/color.util";export*from"./src/uuid/uuid.util";export*from"./src/form-helper/form-helper.util";
+export * from './src/utility/utility.util';
+export * from './src/calculation/calculation.util';
+export * from './src/convert/numberToWords/numToWords.util';
+export * from './src/convert/typography/camelCaseToTitleCase.util';
+export * from './src/colors/color.util';
+export * from './src/uuid/uuid.util';
+export * from './src/form-helper/form-helper.util';