@hhgtech/hhg-components 1.29.361 → 1.29.362-beta-1

package/build/esm/InputDate-040428c9.js

@@ -0,0 +1,365 @@
+import { _ as __rest } from './tslib.es6-fa3837bb.js';
+import React__default, { forwardRef, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import dayjs from 'dayjs';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { theme } from './miscTheme.js';
+import { I as ISO_FORMAT } from './index-d0ac2540.js';
+import { L as LOCALE } from './Locale-40d804d5.js';
+
+const PATTERN_NUMBER = /^([0-9]*)$/;
+const INPUT_DATE_PLACEHOLDER = {
+    DD: 'Day',
+    MM: 'Month',
+    YYYY: 'Year',
+};
+const INPUT_DATE_FORMAT_TYPING = {
+    DD: (day, cb) => {
+        if (!day) {
+            cb === null || cb === void 0 ? void 0 : cb('');
+            return '';
+        }
+        const dayNumber = parseInt(day);
+        if (dayNumber > 31) {
+            cb === null || cb === void 0 ? void 0 : cb(day.slice(0, 1));
+            return day.slice(0, 1);
+        }
+        if (dayNumber >= 4) {
+            cb === null || cb === void 0 ? void 0 : cb(dayNumber < 9 ? `0${dayNumber}` : `${dayNumber}`);
+            return dayNumber < 9 ? `0${dayNumber}` : `${dayNumber}`;
+        }
+        cb === null || cb === void 0 ? void 0 : cb(day);
+        return day;
+    },
+    MM: (month, cb) => {
+        if (!month) {
+            cb === null || cb === void 0 ? void 0 : cb('');
+            return '';
+        }
+        const monthNumber = parseInt(month);
+        if (monthNumber > 12) {
+            cb === null || cb === void 0 ? void 0 : cb(month.slice(0, 1));
+            return month.slice(0, 1);
+        }
+        if (monthNumber >= 2) {
+            cb === null || cb === void 0 ? void 0 : cb(monthNumber < 9 ? `0${monthNumber}` : `${monthNumber}`);
+            return monthNumber < 9 ? `0${monthNumber}` : `${monthNumber}`;
+        }
+        cb === null || cb === void 0 ? void 0 : cb(month);
+        return month;
+    },
+    YYYY: (year, cb) => {
+        if (!year) {
+            cb === null || cb === void 0 ? void 0 : cb('');
+            return '';
+        }
+        cb === null || cb === void 0 ? void 0 : cb(year);
+        return year;
+    },
+};
+const INPUT_DATE_DEFAULT_DISABLED = [false, true, true];
+const getInputDateInputDisabled = (valueString) => {
+    return valueString.map((_, index) => {
+        if (index === 0) {
+            return false;
+        }
+        if (index !== 0 && !!valueString[index - 1]) {
+            return false;
+        }
+        return true;
+    });
+};
+
+const cssInputNotShrink = css `
+  max-width: 100%;
+  color: ${theme.colors.gray800};
+  font-size: var(--input-font-size, 16px);
+  font-weight: 400;
+  line-height: calc(var(--input-height, 56px) * 24 / 56);
+  opacity: 0;
+  transition: 0.3s linear opacity;
+  vertical-align: middle;
+  &::placeholder {
+    color: transparent;
+    font-weight: 400;
+  }
+`;
+const cssInputShrink = css `
+  opacity: 1;
+  line-height: calc(var(--input-height, 56px) * 24 / 56);
+  transition: 0.3 linear opacity;
+  &::placeholder {
+    color: ${theme.colors.gray600};
+  }
+`;
+const cssPlaceholderNotShrink = css `
+  position: absolute;
+  top: calc(var(--input-height, 56px) / 2);
+  left: var(--input-padding, 16px);
+  color: ${theme.colors.gray600};
+  transform: translateY(-50%);
+  transition: 0.125s linear all;
+  vertical-align: middle;
+`;
+const cssPlaceholderShrink = css `
+  top: calc(var(--input-height, 56px) * 7 / 56);
+  font-size: calc(var(--input-font-size, 16px) * 12 / 16);
+  line-height: calc(var(--input-height, 56px) * 18 / 56);
+  transform: translateY(0);
+  transition: 0.125s linear all;
+`;
+const StyledInputDate = styled.div `
+  --input-gap: 8px;
+  --input-height: 56px;
+  --input-max-width: 320px;
+  --input-font-size: 16px;
+  --input-line-height: 24px;
+  --input-padding-x: 16px;
+  --input-padding-y: 16px;
+  --input-border-radius: 8px;
+  --input-border-color: ${theme.colors.gray200};
+
+  display: flex;
+  gap: var(--input-gap, 8px);
+  max-width: var(--input-max-width, 320px);
+  font-weight: 400;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .input_date-input_container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: var(--input-height, 56px);
+    max-width: calc((100% / 3) - (var(--input-gap, 8px) * 2 / 3));
+    line-height: var(--input-line-height, 24px);
+    padding: var(--input-padding-y, 16px) var(--input-padding-x, 16px);
+    border-radius: var(--input-border-radius, 8px);
+    border: 1px solid var(--input-border-color, ${theme.colors.gray200});
+
+    .input_date-input_placeholder {
+      ${cssPlaceholderNotShrink}
+    }
+
+    .input_date-input {
+      ${cssInputNotShrink}
+    }
+
+    &:has([disabled]) {
+      pointer-events: none;
+    }
+
+    &:focus-within,
+    &.input_date-input_shrink {
+      --input-padding-y: 8px;
+      align-items: flex-end;
+      .input_date-input_placeholder {
+        ${cssPlaceholderShrink}
+      }
+
+      .input_date-input {
+        ${cssInputShrink}
+      }
+    }
+
+    &.input_date-input_active {
+      border-color: ${theme.colors.primary600};
+      box-shadow: 0px 0px 5px ${theme.colors.primary400};
+      transition: 0.25s linear all;
+    }
+
+    &.input_date-input_error {
+      border-color: ${theme.colors.red600};
+    }
+  }
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const customParseFormat = require('dayjs/plugin/customParseFormat');
+dayjs.extend(customParseFormat);
+const BACKSPACE = 8;
+// const LEFT_ARROW = 37
+// const RIGHT_ARROW = 39
+// const DELETE = 46
+const SPACEBAR = 32;
+const formatInputDateValue = (value, format) => {
+    if (typeof value === 'undefined') {
+        return null;
+    }
+    if (typeof value === 'string') {
+        const dayInJS = dayjs(value, format, true);
+        if (dayInJS.isValid()) {
+            return dayInJS.toDate();
+        }
+        return null;
+    }
+    const dayInJS = dayjs(value);
+    if (dayInJS.isValid()) {
+        return dayInJS.toDate();
+    }
+    return null;
+};
+const formatInputDateValueString = (value, format) => {
+    if (!value) {
+        return [undefined, undefined, undefined];
+    }
+    const dayInJS = dayjs(value);
+    return dayInJS.format(format).split('/');
+};
+const InputDate = forwardRef((props, ref) => {
+    const { id, name, locale = LOCALE.Vietnam, className, style, defaultValue: defaultValueProps, value: valueProps, onChange: onChangeProps, error, disabled: disabledProps, label: labelProps, placeholder: placeholderProps, onFocus, onBlur } = props, restProps = __rest(props, ["id", "name", "locale", "className", "style", "defaultValue", "value", "onChange", "error", "disabled", "label", "placeholder", "onFocus", "onBlur"]);
+    const [activeInput, setActiveInput] = useState(-1);
+    const inputRef = useRef([]);
+    const [value, setValue] = useState(formatInputDateValue(defaultValueProps || valueProps, ISO_FORMAT[locale].dateFormat));
+    const [valueString, setValueString] = useState([
+        undefined,
+        undefined,
+        undefined,
+    ]);
+    const [disabled, setDisabled] = useState(INPUT_DATE_DEFAULT_DISABLED);
+    const { dateFormat } = useMemo(() => {
+        return (ISO_FORMAT === null || ISO_FORMAT === void 0 ? void 0 : ISO_FORMAT[locale]) || ISO_FORMAT['vi-VN'];
+    }, [locale]);
+    const orders = useMemo(() => dateFormat.split('/'), [dateFormat]);
+    const defaultValue = useMemo(() => formatInputDateValueString(defaultValueProps, dateFormat), [defaultValueProps, dateFormat]);
+    const label = useMemo(() => orders.map((keyOrd, idx) => (labelProps === null || labelProps === void 0 ? void 0 : labelProps[idx]) || INPUT_DATE_PLACEHOLDER[keyOrd]), [labelProps]);
+    const placeholder = useMemo(() => orders.map((keyOrd, idx) => (placeholderProps === null || placeholderProps === void 0 ? void 0 : placeholderProps[idx]) || keyOrd), [placeholderProps]);
+    const focusPrevInput = useCallback(() => {
+        var _a, _b;
+        if (activeInput === 0 || activeInput === -1) {
+            return;
+        }
+        const curInput = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a[activeInput];
+        if (curInput) {
+            curInput.blur();
+        }
+        const prevInput = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b[activeInput - 1];
+        if (prevInput) {
+            prevInput.focus();
+        }
+    }, [activeInput]);
+    const focusNextInput = useCallback(() => {
+        var _a, _b;
+        if (activeInput === orders.length - 1) {
+            return;
+        }
+        const curInput = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a[activeInput];
+        if (curInput) {
+            curInput.blur();
+        }
+        const nextInput = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b[activeInput + 1];
+        if (nextInput) {
+            nextInput.focus();
+        }
+    }, [activeInput, orders]);
+    const changeCodeAtFocus = useCallback(() => {
+        const target = inputRef.current[activeInput];
+        if (target.value.length === target.maxLength) {
+            focusNextInput();
+        }
+    }, [activeInput, focusNextInput]);
+    const inputOnChange = useCallback((index) => ((e) => {
+        const val = e.target.value;
+        const valString = [...valueString];
+        if (val === '') {
+            valString[index] = '';
+            setValueString(valString);
+            if (index === 0) {
+                setDisabled(INPUT_DATE_DEFAULT_DISABLED);
+                onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(null, '');
+            }
+            return;
+        }
+        if (!val.trim().match(PATTERN_NUMBER)) {
+            return;
+        }
+        const inputType = orders[index];
+        INPUT_DATE_FORMAT_TYPING[inputType](val, (newIndexValue) => {
+            valString[index] = newIndexValue;
+            setDisabled(getInputDateInputDisabled(valString));
+            setValueString(valString);
+            setTimeout(() => {
+                changeCodeAtFocus();
+            }, 0);
+        });
+        const dayString = orders
+            .map((_, index) => valString[index])
+            .filter(Boolean)
+            .join('/');
+        const dayInJS = dayjs(dayString, dateFormat, true);
+        if (dayInJS.isValid()) {
+            setValue(dayInJS.toDate());
+            onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(dayInJS.toDate(), dayString);
+        }
+        else {
+            setValue(null);
+            onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(null, dayString);
+        }
+    }), [Object.values(valueString), orders, changeCodeAtFocus]);
+    const inputOnFocus = useCallback((e) => {
+        const target = e.target;
+        const inputIndex = inputRef.current.findIndex((input) => input === target);
+        if (inputIndex !== -1) {
+            setActiveInput(inputIndex);
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [onFocus]);
+    const inputOnBlur = useCallback((e) => {
+        setActiveInput(-1);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [onBlur]);
+    // Handle cases of backspace, delete, left arrow, right arrow, space
+    const inputOnKeyDown = useCallback((e) => {
+        const target = inputRef.current[activeInput];
+        if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
+            if (!target.value) {
+                focusPrevInput();
+            }
+        }
+        if (e.keyCode === SPACEBAR ||
+            e.key === ' ' ||
+            e.key === 'Spacebar' ||
+            e.key === 'Space') {
+            e.preventDefault();
+        }
+    }, [activeInput, focusPrevInput, focusNextInput]);
+    const onClick = useCallback(() => {
+        if (activeInput === -1 && !value) {
+            inputRef.current[0].focus();
+            setActiveInput(0);
+        }
+        else if (activeInput === -1 && value) {
+            inputRef.current[inputRef.current.length - 1].focus();
+            setActiveInput(inputRef.current.length - 1);
+        }
+    }, [activeInput, value]);
+    useEffect(() => {
+        setValue(formatInputDateValue(valueProps, dateFormat));
+    }, [valueProps, dateFormat]);
+    useEffect(() => {
+        if (value) {
+            setValueString(formatInputDateValueString(value, dateFormat));
+        }
+    }, [value, dateFormat]);
+    return (React__default.createElement(StyledInputDate, Object.assign({ ref: ref, className: className, style: style, onClick: onClick }, restProps), orders.map((inputName, idxOrd) => {
+        const inputLabel = label[idxOrd];
+        const inputDefaultValue = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[idxOrd];
+        const inputValue = valueString[idxOrd];
+        const inputDisabled = disabled[idxOrd];
+        const inputPlaceholder = placeholder[idxOrd];
+        const inputMaxLength = inputName.length;
+        return (React__default.createElement("div", { key: inputName, className: cn('input_date-input_container', {
+                'input_date-input_active': activeInput === idxOrd,
+                'input_date-input_shrink': !!inputValue,
+                'input_date-input_error': error,
+            }) },
+            React__default.createElement("span", { className: "input_date-input_placeholder" }, inputLabel),
+            React__default.createElement("input", { ref: (ref) => (inputRef.current[idxOrd] = ref), name: `${id}-${name}-${inputName}`, type: "text", inputMode: "numeric", defaultValue: inputDefaultValue, value: inputValue, maxLength: inputMaxLength, disabled: disabledProps || inputDisabled, placeholder: inputPlaceholder, onChange: inputOnChange(idxOrd), onBlur: inputOnBlur, onFocus: inputOnFocus, onKeyDown: inputOnKeyDown, className: "input_date-input" })));
+    })));
+});
+
+export { InputDate as I };

package/build/esm/{LastPeriod-3cf4f693.js → LastPeriod-df36beeb.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-cf8bdaac.js';
+import { _ as __rest } from './tslib.es6-fa3837bb.js';
 import React__default from 'react';
 
 const LastPeriod = (_a) => {

package/build/esm/{MobileBottomNavigationIcon-76493605.js → MobileBottomNavigationIcon-6829f0ab.js}

@@ -1,10 +1,10 @@
-import { _ as __rest } from './tslib.es6-cf8bdaac.js';
+import { _ as __rest } from './tslib.es6-fa3837bb.js';
 import React__default from 'react';
-import { T as Text } from './index-1b95110c.js';
+import { T as Text } from './index-1fd0ebe0.js';
 import { theme } from './miscTheme.js';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-504d3f05.js';
+import { M as MediaQueries } from './utils-0b25052a.js';
 
 const slideInUp = keyframes `
   from {

package/build/esm/{Spinner-96ba8cab.js → Spinner-5c8000be.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-cf8bdaac.js';
+import { _ as __rest } from './tslib.es6-fa3837bb.js';
 import React__default from 'react';
 
 const Spinner = (_a) => {

package/build/esm/{WhatsApp-68632cb6.js → WhatsApp-02c923b1.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-cf8bdaac.js';
+import { _ as __rest } from './tslib.es6-fa3837bb.js';
 import React__default from 'react';
 
 const Instagram = (_a) => {

package/build/esm/adapters.js

@@ -1,36 +1,36 @@
-export { B as Button } from './index-e7631b76.js';
-export { T as Text } from './index-d0ada2a7.js';
-export { H as Heading } from './index-c4640b20.js';
-import './tslib.es6-cf8bdaac.js';
+export { B as Button } from './index-65c129cb.js';
+export { T as Text } from './index-db007032.js';
+export { H as Heading } from './index-6efc79bd.js';
+import './tslib.es6-fa3837bb.js';
 import 'react';
-import './index-7d4d62ab.js';
+import './index-2aea6709.js';
 import '@mantine/core';
-import './index-81097236.js';
+import './index-e5c566b6.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-92ab9005.js';
+import './index-72377c79.js';
 import './constantsDomainLocales.js';
-import './Locale-e3d80799.js';
+import './Locale-40d804d5.js';
 import './constantsIsProduction.js';
-import './useScreenSize-f3cae5ca.js';
+import './useScreenSize-c22db377.js';
 import '@emotion/styled';
-import './utils-504d3f05.js';
+import './utils-0b25052a.js';
 import '@mantine/carousel';
-import './index-1b95110c.js';
-import './other-28b72baa.js';
-import './index-68df179a.js';
+import './index-1fd0ebe0.js';
+import './other-1284fe94.js';
+import './index-0ac41a38.js';
 import './miscTheme.js';
-import './useMantineLocale-921259d6.js';
+import './useMantineLocale-5c5f128a.js';
 import '@mantine/notifications';
-import './index-057e4881.js';
+import './index-d0ac2540.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'dayjs';
 import 'classnames';
-import './useUniqueId-0e02bf45.js';
+import './useUniqueId-0656a523.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-612b88c3.js';
-import './translationsContext-1053b855.js';
-import './index-2b2ebc80.js';
+import './index.styles-b86ddc12.js';
+import './translationsContext-a3c2604e.js';
+import './index-5c889d6a.js';

package/build/esm/atoms.js

@@ -1,72 +1,73 @@
-export { A as Alert, B as Badge, a as BorderHeading, F as FileDropdown, G as Grid, P as Pagination, R as Radio, c as RateStars, S as StepRenderer, d as StepRendererContext, T as Tag, b as Toggle } from './index-ce02c891.js';
-export { A as Avatar } from './index-cb13d6e7.js';
-export { B as Button } from './index-e7631b76.js';
-export { D as Divider } from './index-af3d6891.js';
-export { F as Flag } from './index-81097236.js';
-export { H as Heading } from './index-c4640b20.js';
-export { I as Input, L as Label } from './index-4b7f9d72.js';
-export { L as Logo } from './index-ad3dbb96.js';
-export { C as Checkbox, P as PureInput } from './index-da3f54f7.js';
-export { T as Text } from './index-d0ada2a7.js';
-export { T as TextArea } from './index-2a527344.js';
-export { C as Container } from './index-256332cd.js';
-export { I as Icon } from './index-f042164f.js';
-export { D as Drawer } from './index-1e81fcab.js';
-export { R as RadioImageGroup } from './index-0bd5655b.js';
-export { A as AuthorBadge, B as BookingBtn } from './index-c57db015.js';
-export { C as CustomReferenceDot } from './index-db0c0a03.js';
-export { B as BtnChoice } from './index-478f7d90.js';
-export { L as LogoIcon } from './logoIcon-6616b938.js';
-export { I as ImageWrap } from './useScreenSize-f3cae5ca.js';
-export { G as GenderOptionControl } from './index-4497abdd.js';
-export { L as Loading } from './index-15d0874c.js';
-export { D as DrawerComponent } from './index-88bde2a7.js';
+export { A as Alert, B as Badge, a as BorderHeading, F as FileDropdown, G as Grid, P as Pagination, R as Radio, c as RateStars, S as StepRenderer, d as StepRendererContext, T as Tag, b as Toggle } from './index-a11ec572.js';
+export { A as Avatar } from './index-0b06b9b8.js';
+export { B as Button } from './index-65c129cb.js';
+export { D as Divider } from './index-e27ef9db.js';
+export { F as Flag } from './index-e5c566b6.js';
+export { H as Heading } from './index-6efc79bd.js';
+export { I as Input, L as Label } from './index-38eecd4a.js';
+export { L as Logo } from './index-d235fd62.js';
+export { C as Checkbox, P as PureInput } from './index-11c98d09.js';
+export { T as Text } from './index-db007032.js';
+export { T as TextArea } from './index-1dd86d2d.js';
+export { C as Container } from './index-edf50183.js';
+export { I as Icon } from './index-ef595448.js';
+export { D as Drawer } from './index-3735050f.js';
+export { R as RadioImageGroup } from './index-79678ecc.js';
+export { A as AuthorBadge, B as BookingBtn } from './index-92b96bb7.js';
+export { C as CustomReferenceDot } from './index-3ccd0526.js';
+export { B as BtnChoice } from './index-955ce24c.js';
+export { L as LogoIcon } from './logoIcon-315441fc.js';
+export { I as ImageWrap } from './useScreenSize-c22db377.js';
+export { G as GenderOptionControl } from './index-643c8184.js';
+export { L as Loading } from './index-d7fce913.js';
+export { D as DrawerComponent } from './index-a8b08163.js';
+export { I as InputDate } from './InputDate-040428c9.js';
 import 'react';
-import './index-1b95110c.js';
-import './tslib.es6-cf8bdaac.js';
+import './index-1fd0ebe0.js';
+import './tslib.es6-fa3837bb.js';
 import '@mantine/core';
-import './other-28b72baa.js';
+import './other-1284fe94.js';
 import '@emotion/styled';
 import './miscTheme.js';
-import './utils-504d3f05.js';
+import './utils-0b25052a.js';
 import './miscDefaultClassWrapper.js';
 import 'react-keyed-flatten-children';
-import './index-7d4d62ab.js';
+import './index-2aea6709.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-92ab9005.js';
+import './index-72377c79.js';
 import './constantsDomainLocales.js';
-import './Locale-e3d80799.js';
+import './Locale-40d804d5.js';
 import './constantsIsProduction.js';
 import '@mantine/carousel';
-import './index-68df179a.js';
-import './useMantineLocale-921259d6.js';
+import './index-0ac41a38.js';
+import './useMantineLocale-5c5f128a.js';
 import '@mantine/notifications';
-import './index-057e4881.js';
+import './index-d0ac2540.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'dayjs';
 import 'classnames';
-import './useUniqueId-0e02bf45.js';
+import './useUniqueId-0656a523.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-612b88c3.js';
-import './translationsContext-1053b855.js';
-import './index-2b2ebc80.js';
-import './WhatsApp-68632cb6.js';
-import './Spinner-96ba8cab.js';
+import './index.styles-b86ddc12.js';
+import './translationsContext-a3c2604e.js';
+import './index-5c889d6a.js';
+import './WhatsApp-02c923b1.js';
+import './Spinner-5c8000be.js';
 import '@emotion/react';
-import './animation-cdc3b9e2.js';
-import './index-607ccbda.js';
-import './index-8e69b183.js';
-import './paths-c2be4081.js';
-import './constants-487af9a7.js';
-import './utils-b544b20b.js';
-import './index-3a41f28a.js';
+import './animation-7e1acff7.js';
+import './index-5b49432e.js';
+import './index-8ce0fc1d.js';
+import './paths-10e75ad0.js';
+import './constants-f3203125.js';
+import './utils-92509739.js';
+import './index-85b04310.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-c3ebcf04.js';
+import './constants-6d27beed.js';
 import 'vaul';