@consumidor-positivo/aurora 0.0.66 → 0.0.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/Datepicker/index.es.js +34 -18
  2. package/dist/components/Datepicker/index.es.js.map +1 -1
  3. package/dist/components/form/Datepicker/hook.d.ts +6 -2
  4. package/dist/components/form/Datepicker/index.d.ts +1 -1
  5. package/package.json +1 -1
package/dist/components/Datepicker/index.es.js CHANGED
@@ -4,7 +4,8 @@ import "../Icon/index.es.js";
4
4
  import { IconCalendar } from "../icons/IconCalendar/index.es.js";
5
5
  import { InputField } from "../InputField/index.es.js";
6
6
  import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-lcJ0CoDo.js";
7
- import { useRef, useState, useEffect } from "react";
7
+ import { useRef, useState, useMemo, useEffect } from "react";
8
+ import { a as above } from "../../screen-DfYo7XQ_.js";
8
9
  import { u as useOutsideClick } from "../../index-BnnDZOqb.js";
9
10
  import { B as BREAKPOINT_MD, g as COLOR_NEUTRAL_40 } from "../../tokens-TYOJv1j5.js";
10
11
  import './styles.css';function useDatepicker({
@@ -16,13 +17,15 @@ import './styles.css';function useDatepicker({
16
17
  placeholder,
17
18
  onBlur,
18
19
  minValue,
19
- maxValue
20
+ maxValue,
21
+ onFocus,
22
+ calendar
20
23
  }) {
21
24
  const rootEl = useRef(null);
22
25
  const { listenOutsideClick } = useOutsideClick({
23
26
  rootEl,
24
27
  breakpoint: BREAKPOINT_MD,
25
- onLoseFocusCB: handleOutsideClick
28
+ onLoseFocusCB: closeCalendar
26
29
  });
27
30
  const [inputDate, setInputDate] = useState("");
28
31
  const [selectedDate, setSelectedDate] = useState(
@@ -31,6 +34,10 @@ import './styles.css';function useDatepicker({
31
34
  const [alareadySetDefaultValue, setAlreadySetDefaultValue] = useState(false);
32
35
  const [isCalendarVisible, setIsCalendarVisible] = useState(false);
33
36
  const inputRef = useRef(null);
37
+ const isMobileInputWithCalendar = useMemo(
38
+ () => !above(BREAKPOINT_MD) && !!calendar,
39
+ [calendar]
40
+ );
34
41
  useEffect(() => {
35
42
  if (!!value && value.day) {
36
43
  setSelectedDate(value);
@@ -55,24 +62,24 @@ import './styles.css';function useDatepicker({
55
62
  if (onChange) onChange(newFieldValue);
56
63
  if (!isDateValid) setInputDate("");
57
64
  }
65
+ function handleInputFocus(event) {
66
+ if (!isCalendarVisible && disabled) return;
67
+ listenOutsideClick();
68
+ setIsCalendarVisible(true);
69
+ if (onFocus) onFocus(event);
70
+ }
71
+ function handleCalendarClick() {
72
+ var _a;
73
+ (_a = inputRef.current) == null ? void 0 : _a.focus();
74
+ }
58
75
  function handleInputBlur() {
59
76
  if (onBlur) {
60
77
  onBlur(selectedDate);
61
78
  }
62
79
  }
63
- function toggleCalendar() {
64
- if (!isCalendarVisible && disabled) return;
65
- if (!isCalendarVisible) {
66
- listenOutsideClick();
67
- }
68
- setIsCalendarVisible(!isCalendarVisible);
69
- }
70
80
  function closeCalendar() {
71
81
  setIsCalendarVisible(false);
72
82
  }
73
- function handleOutsideClick() {
74
- closeCalendar();
75
- }
76
83
  function updateDateFromCalendar(pickerDate) {
77
84
  setSelectedDate(pickerDate);
78
85
  setInputDate(format.toString(pickerDate));
@@ -82,7 +89,6 @@ import './styles.css';function useDatepicker({
82
89
  inputDate,
83
90
  handleInputChange,
84
91
  handleInputBlur,
85
- toggleCalendar,
86
92
  closeCalendar,
87
93
  isCalendarVisible,
88
94
  fmtPlaceholder: placeholder || format.placeholder,
@@ -90,7 +96,10 @@ import './styles.css';function useDatepicker({
90
96
  selectedDate,
91
97
  setSelectedDate,
92
98
  updateDateFromCalendar,
93
- rootEl
99
+ rootEl,
100
+ handleCalendarClick,
101
+ handleInputFocus,
102
+ isMobileInputWithCalendar
94
103
  };
95
104
  }
96
105
  const DatepickerField = ({
@@ -104,20 +113,23 @@ const DatepickerField = ({
104
113
  withPortal = true,
105
114
  minValue = AUCalendarDate(1, 1, 1900),
106
115
  maxValue = AUCalendarDate(31, 12, 2100),
116
+ onFocus,
107
117
  ...props
108
118
  }) => {
109
119
  const {
110
120
  inputDate,
111
121
  handleInputChange,
112
122
  handleInputBlur,
113
- toggleCalendar,
114
123
  closeCalendar,
115
124
  isCalendarVisible,
116
125
  fmtPlaceholder,
117
126
  inputRef,
118
127
  selectedDate,
119
128
  updateDateFromCalendar,
120
- rootEl
129
+ rootEl,
130
+ handleCalendarClick,
131
+ handleInputFocus,
132
+ isMobileInputWithCalendar
121
133
  } = useDatepicker({
122
134
  onChange,
123
135
  value,
@@ -126,6 +138,8 @@ const DatepickerField = ({
126
138
  minValue,
127
139
  maxValue,
128
140
  onBlur,
141
+ onFocus,
142
+ calendar,
129
143
  disabled
130
144
  });
131
145
  return /* @__PURE__ */ jsxs("div", { className: "au-datepicker", ref: rootEl, children: [
@@ -140,13 +154,15 @@ const DatepickerField = ({
140
154
  inputRef,
141
155
  onBlur: handleInputBlur,
142
156
  disabled,
157
+ inputMode: isMobileInputWithCalendar ? "none" : void 0,
143
158
  onChange: handleInputChange,
144
159
  placeholder: fmtPlaceholder,
160
+ onFocus: handleInputFocus,
145
161
  rightSlot: calendar && /* @__PURE__ */ jsx(
146
162
  "div",
147
163
  {
148
164
  className: "au-datepicker__calendar-holder",
149
- onClick: toggleCalendar,
165
+ onClick: handleCalendarClick,
150
166
  children: /* @__PURE__ */ jsx(
151
167
  IconCalendar,
152
168
  {
package/dist/components/Datepicker/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Datepicker/hook.ts","../../../lib/components/form/Datepicker/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { useOutsideClick } from '@core/hooks/useOutsideClick'\nimport { BREAKPOINT_MD } from '@core/tokens'\n\nimport {\n AUCalendarDateShape,\n DefaultValue,\n EventHandler,\n FormatAdapter,\n} from './types'\nimport { DDMMYYYY, getDefaultDate } from './helpers'\n\ntype UseDatePickerProps = {\n onChange?: EventHandler\n disabled?: boolean\n value?: AUCalendarDateShape | null\n defaultValue?: DefaultValue\n format?: FormatAdapter\n placeholder?: string\n onBlur?: EventHandler\n minValue: AUCalendarDateShape\n maxValue: AUCalendarDateShape\n}\n\nexport function useDatepicker({\n value,\n defaultValue = 'empty',\n onChange,\n disabled,\n format = DDMMYYYY,\n placeholder,\n onBlur,\n minValue,\n maxValue,\n}: UseDatePickerProps) {\n const rootEl = useRef<HTMLDivElement>(null)\n const { listenOutsideClick } = useOutsideClick({\n rootEl,\n breakpoint: BREAKPOINT_MD,\n onLoseFocusCB: handleOutsideClick,\n })\n const [inputDate, setInputDate] = useState('')\n const [selectedDate, setSelectedDate] = useState<AUCalendarDateShape | null>(\n null,\n )\n\n const [alareadySetDefaultValue, setAlreadySetDefaultValue] = useState(false)\n const [isCalendarVisible, setIsCalendarVisible] = useState(false)\n const inputRef = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (!!value && value.day) {\n setSelectedDate(value)\n setInputDate(format.toString(value))\n }\n }, [value])\n\n useEffect(() => {\n if (!defaultValue || alareadySetDefaultValue) return\n const parsedDefaultDate = getDefaultDate(defaultValue)\n setSelectedDate(parsedDefaultDate)\n setInputDate(parsedDefaultDate ? format.toString(parsedDefaultDate) : '')\n setAlreadySetDefaultValue(true)\n }, [defaultValue])\n\n function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {\n const maskedValue = format.maskDate(e.target.value)\n const finishedTypingDate = format.validateFormat(maskedValue)\n setInputDate(maskedValue)\n\n if (!finishedTypingDate) return\n\n const isDateValid = format.validate(maskedValue, minValue, maxValue)\n const newFieldValue = isDateValid\n ? format.toCalendarDate(maskedValue)\n : null\n setSelectedDate(newFieldValue)\n if (onChange) onChange(newFieldValue)\n\n if (!isDateValid) setInputDate('')\n }\n\n function handleInputBlur() {\n if (onBlur) {\n onBlur(selectedDate)\n }\n }\n\n function toggleCalendar() {\n if (!isCalendarVisible && disabled) return\n if (!isCalendarVisible) {\n listenOutsideClick()\n }\n setIsCalendarVisible(!isCalendarVisible)\n }\n\n function closeCalendar() {\n setIsCalendarVisible(false)\n }\n\n function handleOutsideClick() {\n closeCalendar()\n }\n\n function updateDateFromCalendar(pickerDate: AUCalendarDateShape) {\n setSelectedDate(pickerDate)\n setInputDate(format.toString(pickerDate))\n if (onChange) onChange(pickerDate)\n }\n\n return {\n inputDate,\n handleInputChange,\n handleInputBlur,\n toggleCalendar,\n closeCalendar,\n isCalendarVisible,\n fmtPlaceholder: placeholder || format.placeholder,\n inputRef,\n selectedDate,\n setSelectedDate,\n updateDateFromCalendar,\n rootEl,\n }\n}\n","import { COLOR_NEUTRAL_40 } from '@core/tokens'\nimport { IconCalendar } from '@components/icons'\nimport { InputField } from '../InputField'\nimport { InputProps } from '../InputField'\nimport { DatepickerCalendar } from './Calendar'\n\nimport {\n AUCalendarDateShape,\n DefaultValue,\n EventHandler,\n FormatAdapter,\n} from './types'\n\nimport { AUCalendarDate } from './helpers'\nimport { useDatepicker } from './hook'\nimport './styles.scss'\n\ntype DatepickerFieldProps = Omit<InputProps, 'value' | 'onChange'> & {\n /** Use calendar dialog to pick date */\n calendar?: boolean\n placeholder?: string\n value?: AUCalendarDateShape | null\n onChange?: EventHandler\n onBlur?: EventHandler\n /** Default date to use the datepicker as an uncontrolled component */\n defaultValue?: DefaultValue\n /** Adapter to modify input behavior - default to DD/MM/YYYY adapter */\n format?: FormatAdapter\n /** Makes the calendar dialog the top z-indexed item on page */\n withPortal?: boolean\n /** min allowed date, defaults to 1900-01-01 */\n minValue?: AUCalendarDateShape\n /** max allowed date, defaults to 2100-12-31 */\n maxValue?: AUCalendarDateShape\n}\n\nexport const DatepickerField = ({\n calendar = true,\n placeholder,\n disabled,\n onChange,\n value,\n defaultValue,\n onBlur,\n withPortal = true,\n minValue = AUCalendarDate(1, 1, 1900),\n maxValue = AUCalendarDate(31, 12, 2100),\n ...props\n}: DatepickerFieldProps) => {\n const {\n inputDate,\n handleInputChange,\n handleInputBlur,\n toggleCalendar,\n closeCalendar,\n isCalendarVisible,\n fmtPlaceholder,\n inputRef,\n selectedDate,\n updateDateFromCalendar,\n rootEl,\n } = useDatepicker({\n onChange,\n value,\n defaultValue,\n placeholder,\n minValue,\n maxValue,\n onBlur,\n disabled,\n })\n\n return (\n <div className=\"au-datepicker\" ref={rootEl}>\n <InputField\n className=\"au-datepicker__input\"\n {...props}\n maxLength={10}\n value={inputDate}\n type='tel'\n inputRef={inputRef}\n onBlur={handleInputBlur}\n disabled={disabled}\n onChange={handleInputChange}\n placeholder={fmtPlaceholder}\n rightSlot={\n calendar && (\n <div\n className=\"au-datepicker__calendar-holder\"\n onClick={toggleCalendar}>\n <IconCalendar\n rawColor={disabled ? COLOR_NEUTRAL_40 : undefined}\n />\n </div>\n )\n }\n />\n {calendar && (\n <DatepickerCalendar\n withPortal={withPortal}\n isVisible={isCalendarVisible}\n onClose={closeCalendar}\n minValue={minValue}\n maxValue={maxValue}\n value={selectedDate}\n onChange={updateDateFromCalendar}\n />\n )}\n </div>\n )\n}\n\n// TODO - implement as a different field\nexport const RangePicker = () => {\n return <p></p>\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Datepicker/hook.ts","../../../lib/components/form/Datepicker/index.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { above } from '@core/utils/screen'\nimport { useOutsideClick } from '@core/hooks/useOutsideClick'\n\nimport {\n AUCalendarDateShape,\n DefaultValue,\n EventHandler,\n FormatAdapter,\n} from './types'\nimport { DDMMYYYY, getDefaultDate } from './helpers'\n\ntype UseDatePickerProps = {\n onChange?: EventHandler\n disabled?: boolean\n value?: AUCalendarDateShape | null\n defaultValue?: DefaultValue\n format?: FormatAdapter\n placeholder?: string\n onBlur?: EventHandler\n onFocus?: React.FocusEventHandler<HTMLInputElement>\n minValue: AUCalendarDateShape\n maxValue: AUCalendarDateShape\n calendar?: boolean\n}\n\nexport function useDatepicker({\n value,\n defaultValue = 'empty',\n onChange,\n disabled,\n format = DDMMYYYY,\n placeholder,\n onBlur,\n minValue,\n maxValue,\n onFocus,\n calendar,\n}: UseDatePickerProps) {\n const rootEl = useRef<HTMLDivElement>(null)\n const { listenOutsideClick } = useOutsideClick({\n rootEl,\n breakpoint: BREAKPOINT_MD,\n onLoseFocusCB: closeCalendar,\n })\n const [inputDate, setInputDate] = useState('')\n const [selectedDate, setSelectedDate] = useState<AUCalendarDateShape | null>(\n null,\n )\n\n const [alareadySetDefaultValue, setAlreadySetDefaultValue] = useState(false)\n const [isCalendarVisible, setIsCalendarVisible] = useState(false)\n const inputRef = useRef<HTMLInputElement>(null)\n const isMobileInputWithCalendar = useMemo(\n () => !above(BREAKPOINT_MD) && !!calendar,\n [calendar],\n )\n\n useEffect(() => {\n if (!!value && value.day) {\n setSelectedDate(value)\n setInputDate(format.toString(value))\n }\n }, [value])\n\n useEffect(() => {\n if (!defaultValue || alareadySetDefaultValue) return\n const parsedDefaultDate = getDefaultDate(defaultValue)\n setSelectedDate(parsedDefaultDate)\n setInputDate(parsedDefaultDate ? format.toString(parsedDefaultDate) : '')\n setAlreadySetDefaultValue(true)\n }, [defaultValue])\n\n function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {\n const maskedValue = format.maskDate(e.target.value)\n const finishedTypingDate = format.validateFormat(maskedValue)\n setInputDate(maskedValue)\n\n if (!finishedTypingDate) return\n\n const isDateValid = format.validate(maskedValue, minValue, maxValue)\n const newFieldValue = isDateValid\n ? format.toCalendarDate(maskedValue)\n : null\n setSelectedDate(newFieldValue)\n if (onChange) onChange(newFieldValue)\n\n if (!isDateValid) setInputDate('')\n }\n\n function handleInputFocus(\n event: React.FocusEvent<HTMLInputElement, Element>,\n ) {\n if (!isCalendarVisible && disabled) return\n\n listenOutsideClick()\n setIsCalendarVisible(true)\n if (onFocus) onFocus(event)\n }\n\n function handleCalendarClick() {\n inputRef.current?.focus()\n }\n\n function handleInputBlur() {\n if (onBlur) {\n onBlur(selectedDate)\n }\n }\n\n function closeCalendar() {\n setIsCalendarVisible(false)\n }\n\n function updateDateFromCalendar(pickerDate: AUCalendarDateShape) {\n setSelectedDate(pickerDate)\n setInputDate(format.toString(pickerDate))\n if (onChange) onChange(pickerDate)\n }\n\n return {\n inputDate,\n handleInputChange,\n handleInputBlur,\n closeCalendar,\n isCalendarVisible,\n fmtPlaceholder: placeholder || format.placeholder,\n inputRef,\n selectedDate,\n setSelectedDate,\n updateDateFromCalendar,\n rootEl,\n handleCalendarClick,\n handleInputFocus,\n isMobileInputWithCalendar,\n }\n}\n","import { COLOR_NEUTRAL_40 } from '@core/tokens'\nimport { IconCalendar } from '@components/icons'\nimport { InputField } from '../InputField'\nimport { InputProps } from '../InputField'\nimport { DatepickerCalendar } from './Calendar'\n\nimport {\n AUCalendarDateShape,\n DefaultValue,\n EventHandler,\n FormatAdapter,\n} from './types'\n\nimport { AUCalendarDate } from './helpers'\nimport { useDatepicker } from './hook'\nimport './styles.scss'\n\ntype DatepickerFieldProps = Omit<InputProps, 'value' | 'onChange'> & {\n /** Use calendar dialog to pick date */\n calendar?: boolean\n placeholder?: string\n value?: AUCalendarDateShape | null\n onChange?: EventHandler\n onBlur?: EventHandler\n /** Default date to use the datepicker as an uncontrolled component */\n defaultValue?: DefaultValue\n /** Adapter to modify input behavior - default to DD/MM/YYYY adapter */\n format?: FormatAdapter\n /** Makes the calendar dialog the top z-indexed item on page */\n withPortal?: boolean\n /** min allowed date, defaults to 1900-01-01 */\n minValue?: AUCalendarDateShape\n /** max allowed date, defaults to 2100-12-31 */\n maxValue?: AUCalendarDateShape\n}\n\nexport const DatepickerField = ({\n calendar = true,\n placeholder,\n disabled,\n onChange,\n value,\n defaultValue,\n onBlur,\n withPortal = true,\n minValue = AUCalendarDate(1, 1, 1900),\n maxValue = AUCalendarDate(31, 12, 2100),\n onFocus,\n ...props\n}: DatepickerFieldProps) => {\n const {\n inputDate,\n handleInputChange,\n handleInputBlur,\n closeCalendar,\n isCalendarVisible,\n fmtPlaceholder,\n inputRef,\n selectedDate,\n updateDateFromCalendar,\n rootEl,\n handleCalendarClick,\n handleInputFocus,\n isMobileInputWithCalendar,\n } = useDatepicker({\n onChange,\n value,\n defaultValue,\n placeholder,\n minValue,\n maxValue,\n onBlur,\n onFocus,\n calendar,\n disabled,\n })\n\n return (\n <div className=\"au-datepicker\" ref={rootEl}>\n <InputField\n className=\"au-datepicker__input\"\n {...props}\n maxLength={10}\n value={inputDate}\n type=\"tel\"\n inputRef={inputRef}\n onBlur={handleInputBlur}\n disabled={disabled}\n inputMode={isMobileInputWithCalendar ? 'none' : undefined}\n onChange={handleInputChange}\n placeholder={fmtPlaceholder}\n onFocus={handleInputFocus}\n rightSlot={\n calendar && (\n <div\n className=\"au-datepicker__calendar-holder\"\n onClick={handleCalendarClick}>\n <IconCalendar\n rawColor={disabled ? COLOR_NEUTRAL_40 : undefined}\n />\n </div>\n )\n }\n />\n {calendar && (\n <DatepickerCalendar\n withPortal={withPortal}\n isVisible={isCalendarVisible}\n onClose={closeCalendar}\n minValue={minValue}\n maxValue={maxValue}\n value={selectedDate}\n onChange={updateDateFromCalendar}\n />\n )}\n </div>\n )\n}\n\n// TODO - implement as a different field\nexport const RangePicker = () => {\n return <p></p>\n}\n"],"names":[],"mappings":"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"}
package/dist/components/form/Datepicker/hook.d.ts CHANGED
@@ -8,14 +8,15 @@ type UseDatePickerProps = {
8
8
  format?: FormatAdapter;
9
9
  placeholder?: string;
10
10
  onBlur?: EventHandler;
11
+ onFocus?: React.FocusEventHandler<HTMLInputElement>;
11
12
  minValue: AUCalendarDateShape;
12
13
  maxValue: AUCalendarDateShape;
14
+ calendar?: boolean;
13
15
  };
14
- export declare function useDatepicker({ value, defaultValue, onChange, disabled, format, placeholder, onBlur, minValue, maxValue, }: UseDatePickerProps): {
16
+ export declare function useDatepicker({ value, defaultValue, onChange, disabled, format, placeholder, onBlur, minValue, maxValue, onFocus, calendar, }: UseDatePickerProps): {
15
17
  inputDate: string;
16
18
  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
17
19
  handleInputBlur: () => void;
18
- toggleCalendar: () => void;
19
20
  closeCalendar: () => void;
20
21
  isCalendarVisible: boolean;
21
22
  fmtPlaceholder: string;
@@ -24,5 +25,8 @@ export declare function useDatepicker({ value, defaultValue, onChange, disabled,
24
25
  setSelectedDate: import('react').Dispatch<import('react').SetStateAction<AUCalendarDateShape | null>>;
25
26
  updateDateFromCalendar: (pickerDate: AUCalendarDateShape) => void;
26
27
  rootEl: import('react').RefObject<HTMLDivElement>;
28
+ handleCalendarClick: () => void;
29
+ handleInputFocus: (event: React.FocusEvent<HTMLInputElement, Element>) => void;
30
+ isMobileInputWithCalendar: boolean;
27
31
  };
28
32
  export {};
package/dist/components/form/Datepicker/index.d.ts CHANGED
@@ -19,6 +19,6 @@ type DatepickerFieldProps = Omit<InputProps, 'value' | 'onChange'> & {
19
19
  /** max allowed date, defaults to 2100-12-31 */
20
20
  maxValue?: AUCalendarDateShape;
21
21
  };
22
- export declare const DatepickerField: ({ calendar, placeholder, disabled, onChange, value, defaultValue, onBlur, withPortal, minValue, maxValue, ...props }: DatepickerFieldProps) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const DatepickerField: ({ calendar, placeholder, disabled, onChange, value, defaultValue, onBlur, withPortal, minValue, maxValue, onFocus, ...props }: DatepickerFieldProps) => import("react/jsx-runtime").JSX.Element;
23
23
  export declare const RangePicker: () => import("react/jsx-runtime").JSX.Element;
24
24
  export {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@consumidor-positivo/aurora",
3
3
  "private": false,
4
- "version": "0.0.66",
4
+ "version": "0.0.67",
5
5
  "type": "module",
6
6
  "main": "./dist/main.es.js",
7
7
  "modules": "./dist/main.es.js",