@raystack/apsara 0.41.2 → 0.41.3
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.
- package/dist/v1/components/calendar/range-picker.cjs +2 -2
- package/dist/v1/components/calendar/range-picker.cjs.map +1 -1
- package/dist/v1/components/calendar/range-picker.d.ts +5 -2
- package/dist/v1/components/calendar/range-picker.d.ts.map +1 -1
- package/dist/v1/components/calendar/range-picker.js +2 -2
- package/dist/v1/components/calendar/range-picker.js.map +1 -1
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ var textfield = require('../textfield/textfield.cjs');
|
|
|
10
10
|
var calendar = require('./calendar.cjs');
|
|
11
11
|
var calendar_module = require('./calendar.module.css.cjs');
|
|
12
12
|
|
|
13
|
-
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY",
|
|
13
|
+
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldsProps = {}, placeholders, calendarProps, onSelect = () => { }, value = {
|
|
14
14
|
to: new Date(),
|
|
15
15
|
from: new Date(),
|
|
16
16
|
}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
|
|
@@ -59,7 +59,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps,
|
|
|
59
59
|
function onOpenChange(open) {
|
|
60
60
|
setShowCalendar(Boolean(open));
|
|
61
61
|
}
|
|
62
|
-
const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { value: startDate, trailing: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, className: calendar_module.default.datePickerInput, readOnly: true, ...
|
|
62
|
+
const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { value: startDate, trailing: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, className: calendar_module.default.datePickerInput, readOnly: true, ...(textFieldsProps.startDate ?? {}), placeholder: placeholders?.startDate || "Select start date" }), jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { value: endDate, trailing: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, className: calendar_module.default.datePickerInput, readOnly: true, ...(textFieldsProps.endDate ?? {}), placeholder: placeholders?.endDate || "Select end date" })] }));
|
|
63
63
|
const trigger = typeof children === 'function'
|
|
64
64
|
? children({ startDate, endDate })
|
|
65
65
|
: children || defaultTrigger;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-picker.cjs","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { TextField } from \"../textfield\";\nimport { TextfieldProps } from \"../textfield/textfield\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n
|
|
1
|
+
{"version":3,"file":"range-picker.cjs","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { TextField } from \"../textfield\";\nimport { TextfieldProps } from \"../textfield/textfield\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n textFieldsProps?: { startDate?: TextfieldProps, endDate?: TextfieldProps };\n placeholders?: { startDate?: string; endDate?: string };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?: React.ReactNode | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n footer?: React.ReactNode;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n side = \"top\",\n dateFormat = \"DD/MM/YYYY\",\n textFieldsProps = {},\n placeholders,\n calendarProps,\n onSelect = () => {},\n value = {\n to: new Date(),\n from: new Date(),\n },\n pickerGroupClassName,\n children,\n showCalendarIcon = true,\n footer,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] = useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n\n const startDate = selectedRange.from ? dayjs(selectedRange.from).format(dateFormat) : '';\n const endDate = selectedRange.to ? dayjs(selectedRange.to).format(dateFormat) : '';\n\n // 1st click will select the start date.\n // 2nd click will select the end date.\n // 3rd click will select the start date again.\n const handleSelect = (range: DateRange, selectedDay: Date) => {\n const from = selectedRange?.from || range?.from;\n let newRange: DateRange;\n if (currentRangeField === \"to\") {\n if (dayjs(selectedDay).isSame(dayjs(from), 'day')) {\n // If same date is clicked twice, set end date to the same date for UI\n newRange = {\n from,\n to: selectedDay\n };\n } else if (dayjs(selectedDay).isAfter(dayjs(from))) {\n // If different date is selected and it's after start date\n newRange = { from, to: selectedDay };\n } else {\n // If selected date is before start date, reset and select start day\n newRange = { from: selectedDay };\n }\n setCurrentRangeField(\"from\");\n } else {\n // Reset the range and select start day\n newRange = { from: selectedDay };\n setCurrentRangeField(\"to\");\n }\n setSelectedRange(newRange);\n // Return the range with +1 day for the end date in the callback\n const callbackRange = {\n from: newRange.from,\n to: newRange.to ? dayjs(newRange.to).add(1, 'day').toDate() : undefined\n };\n onSelect(callbackRange);\n };\n\n function onOpenChange(open?: boolean) {\n setShowCalendar(Boolean(open));\n }\n\n const defaultTrigger = (\n <Flex gap={\"medium\"} className={pickerGroupClassName}>\n <TextField\n value={startDate}\n trailing={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n readOnly\n {...(textFieldsProps.startDate ?? {})}\n placeholder={placeholders?.startDate || \"Select start date\"}\n />\n <TextField\n value={endDate}\n trailing={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n readOnly\n {...(textFieldsProps.endDate ?? {})}\n placeholder={placeholders?.endDate || \"Select end date\"}\n />\n </Flex>\n );\n\n const trigger = typeof children === 'function'\n ? children({ startDate, endDate })\n : children || defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>\n {trigger}\n </Popover.Trigger>\n <Popover.Content side={side} className={styles.calendarPopover}>\n <Calendar\n showOutsideDays={false}\n numberOfMonths={2}\n defaultMonth={selectedRange.from}\n required={true}\n {...calendarProps}\n mode=\"range\"\n selected={selectedRange}\n onSelect={handleSelect}\n />\n {footer && (\n <Flex align=\"center\" justify=\"center\" className={styles.calendarFooter}>\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["useState","dayjs","_jsxs","Flex","_jsx","TextField","CalendarIcon","styles","Popover","Calendar"],"mappings":"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"}
|
|
@@ -3,7 +3,10 @@ import { TextfieldProps } from "../textfield/textfield";
|
|
|
3
3
|
interface RangePickerProps {
|
|
4
4
|
side?: "top" | "right" | "bottom" | "left";
|
|
5
5
|
dateFormat?: string;
|
|
6
|
-
|
|
6
|
+
textFieldsProps?: {
|
|
7
|
+
startDate?: TextfieldProps;
|
|
8
|
+
endDate?: TextfieldProps;
|
|
9
|
+
};
|
|
7
10
|
placeholders?: {
|
|
8
11
|
startDate?: string;
|
|
9
12
|
endDate?: string;
|
|
@@ -19,6 +22,6 @@ interface RangePickerProps {
|
|
|
19
22
|
showCalendarIcon?: boolean;
|
|
20
23
|
footer?: React.ReactNode;
|
|
21
24
|
}
|
|
22
|
-
export declare function RangePicker({ side, dateFormat,
|
|
25
|
+
export declare function RangePicker({ side, dateFormat, textFieldsProps, placeholders, calendarProps, onSelect, value, pickerGroupClassName, children, showCalendarIcon, footer, }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
23
26
|
export {};
|
|
24
27
|
//# sourceMappingURL=range-picker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/range-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK5E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/range-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK5E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,cAAc,CAAC;QAAC,OAAO,CAAC,EAAE,cAAc,CAAA;KAAE,CAAC;IAC3E,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClG,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAY,EACZ,UAAyB,EACzB,eAAoB,EACpB,YAAY,EACZ,aAAa,EACb,QAAmB,EACnB,KAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,GACP,EAAE,gBAAgB,2CAgGlB"}
|
|
@@ -8,7 +8,7 @@ import { TextField } from '../textfield/textfield.js';
|
|
|
8
8
|
import { Calendar } from './calendar.js';
|
|
9
9
|
import styles from './calendar.module.css.js';
|
|
10
10
|
|
|
11
|
-
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY",
|
|
11
|
+
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldsProps = {}, placeholders, calendarProps, onSelect = () => { }, value = {
|
|
12
12
|
to: new Date(),
|
|
13
13
|
from: new Date(),
|
|
14
14
|
}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
|
|
@@ -57,7 +57,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps,
|
|
|
57
57
|
function onOpenChange(open) {
|
|
58
58
|
setShowCalendar(Boolean(open));
|
|
59
59
|
}
|
|
60
|
-
const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(TextField, { value: startDate, trailing: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, readOnly: true, ...
|
|
60
|
+
const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(TextField, { value: startDate, trailing: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, readOnly: true, ...(textFieldsProps.startDate ?? {}), placeholder: placeholders?.startDate || "Select start date" }), jsxRuntimeExports.jsx(TextField, { value: endDate, trailing: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, readOnly: true, ...(textFieldsProps.endDate ?? {}), placeholder: placeholders?.endDate || "Select end date" })] }));
|
|
61
61
|
const trigger = typeof children === 'function'
|
|
62
62
|
? children({ startDate, endDate })
|
|
63
63
|
: children || defaultTrigger;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-picker.js","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { TextField } from \"../textfield\";\nimport { TextfieldProps } from \"../textfield/textfield\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n
|
|
1
|
+
{"version":3,"file":"range-picker.js","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { TextField } from \"../textfield\";\nimport { TextfieldProps } from \"../textfield/textfield\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n textFieldsProps?: { startDate?: TextfieldProps, endDate?: TextfieldProps };\n placeholders?: { startDate?: string; endDate?: string };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?: React.ReactNode | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n footer?: React.ReactNode;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n side = \"top\",\n dateFormat = \"DD/MM/YYYY\",\n textFieldsProps = {},\n placeholders,\n calendarProps,\n onSelect = () => {},\n value = {\n to: new Date(),\n from: new Date(),\n },\n pickerGroupClassName,\n children,\n showCalendarIcon = true,\n footer,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] = useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n\n const startDate = selectedRange.from ? dayjs(selectedRange.from).format(dateFormat) : '';\n const endDate = selectedRange.to ? dayjs(selectedRange.to).format(dateFormat) : '';\n\n // 1st click will select the start date.\n // 2nd click will select the end date.\n // 3rd click will select the start date again.\n const handleSelect = (range: DateRange, selectedDay: Date) => {\n const from = selectedRange?.from || range?.from;\n let newRange: DateRange;\n if (currentRangeField === \"to\") {\n if (dayjs(selectedDay).isSame(dayjs(from), 'day')) {\n // If same date is clicked twice, set end date to the same date for UI\n newRange = {\n from,\n to: selectedDay\n };\n } else if (dayjs(selectedDay).isAfter(dayjs(from))) {\n // If different date is selected and it's after start date\n newRange = { from, to: selectedDay };\n } else {\n // If selected date is before start date, reset and select start day\n newRange = { from: selectedDay };\n }\n setCurrentRangeField(\"from\");\n } else {\n // Reset the range and select start day\n newRange = { from: selectedDay };\n setCurrentRangeField(\"to\");\n }\n setSelectedRange(newRange);\n // Return the range with +1 day for the end date in the callback\n const callbackRange = {\n from: newRange.from,\n to: newRange.to ? dayjs(newRange.to).add(1, 'day').toDate() : undefined\n };\n onSelect(callbackRange);\n };\n\n function onOpenChange(open?: boolean) {\n setShowCalendar(Boolean(open));\n }\n\n const defaultTrigger = (\n <Flex gap={\"medium\"} className={pickerGroupClassName}>\n <TextField\n value={startDate}\n trailing={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n readOnly\n {...(textFieldsProps.startDate ?? {})}\n placeholder={placeholders?.startDate || \"Select start date\"}\n />\n <TextField\n value={endDate}\n trailing={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n readOnly\n {...(textFieldsProps.endDate ?? {})}\n placeholder={placeholders?.endDate || \"Select end date\"}\n />\n </Flex>\n );\n\n const trigger = typeof children === 'function'\n ? children({ startDate, endDate })\n : children || defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>\n {trigger}\n </Popover.Trigger>\n <Popover.Content side={side} className={styles.calendarPopover}>\n <Calendar\n showOutsideDays={false}\n numberOfMonths={2}\n defaultMonth={selectedRange.from}\n required={true}\n {...calendarProps}\n mode=\"range\"\n selected={selectedRange}\n onSelect={handleSelect}\n />\n {footer && (\n <Flex align=\"center\" justify=\"center\" className={styles.calendarFooter}>\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AA4BgB,SAAA,WAAW,CAAC,EAC1B,IAAI,GAAG,KAAK,EACZ,UAAU,GAAG,YAAY,EACzB,eAAe,GAAG,EAAE,EACpB,YAAY,EACZ,aAAa,EACb,QAAQ,GAAG,MAAO,GAAC,EACnB,KAAK,GAAG;IACN,EAAE,EAAE,IAAI,IAAI,EAAE;IACd,IAAI,EAAE,IAAI,IAAI,EAAE;CACjB,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAgB,GAAG,IAAI,EACvB,MAAM,GACW,EAAA;IACjB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAc,MAAM,CAAC,CAAC;IAChF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;IACzF,MAAM,OAAO,GAAG,aAAa,CAAC,EAAE,GAAG,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;;;;AAKnF,IAAA,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,WAAiB,KAAI;QAC3D,MAAM,IAAI,GAAG,aAAa,EAAE,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC;AAChD,QAAA,IAAI,QAAmB,CAAC;AACxB,QAAA,IAAI,iBAAiB,KAAK,IAAI,EAAE;AAC9B,YAAA,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE;;AAEjD,gBAAA,QAAQ,GAAG;oBACT,IAAI;AACJ,oBAAA,EAAE,EAAE,WAAW;iBAChB,CAAC;aACH;AAAM,iBAAA,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE;;gBAElD,QAAQ,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC;aACtC;iBAAM;;AAEL,gBAAA,QAAQ,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;aAClC;YACD,oBAAoB,CAAC,MAAM,CAAC,CAAC;SAC9B;aAAM;;AAEL,YAAA,QAAQ,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;YACjC,oBAAoB,CAAC,IAAI,CAAC,CAAC;SAC5B;QACD,gBAAgB,CAAC,QAAQ,CAAC,CAAC;;AAE3B,QAAA,MAAM,aAAa,GAAG;YACpB,IAAI,EAAE,QAAQ,CAAC,IAAI;YACnB,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,GAAG,SAAS;SACxE,CAAC;QACF,QAAQ,CAAC,aAAa,CAAC,CAAC;AAC1B,KAAC,CAAC;IAEF,SAAS,YAAY,CAAC,IAAc,EAAA;AAClC,QAAA,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;KAChC;IAED,MAAM,cAAc,IAClBA,sBAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,oBAAoB,EAAA,QAAA,EAAA,CAClDC,qBAAC,CAAA,SAAS,EACR,EAAA,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,GAAGA,qBAAA,CAAC,YAAY,EAAA,EAAA,CAAG,GAAG,SAAS,EACzD,SAAS,EAAE,MAAM,CAAC,eAAe,EACjC,QAAQ,EACJ,IAAA,EAAA,IAAC,eAAe,CAAC,SAAS,IAAI,EAAE,CAAC,EACrC,WAAW,EAAE,YAAY,EAAE,SAAS,IAAI,mBAAmB,EAC3D,CAAA,EACFA,sBAAC,SAAS,EAAA,EACR,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,gBAAgB,GAAGA,qBAAA,CAAC,YAAY,EAAG,EAAA,CAAA,GAAG,SAAS,EACzD,SAAS,EAAE,MAAM,CAAC,eAAe,EACjC,QAAQ,YACH,eAAe,CAAC,OAAO,IAAI,EAAE,CAAC,EACnC,WAAW,EAAE,YAAY,EAAE,OAAO,IAAI,iBAAiB,EAAA,CACvD,CACG,EAAA,CAAA,CACR,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,OAAO,QAAQ,KAAK,UAAU;UAC1C,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAClC,UAAE,QAAQ,IAAI,cAAc,CAAC;IAE/B,QACED,uBAAC,OAAO,EAAA,EAAC,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EACrD,QAAA,EAAA,CAAAC,qBAAA,CAAC,OAAO,CAAC,OAAO,IAAC,OAAO,EAAA,IAAA,EAAA,QAAA,EACrB,OAAO,EAAA,CACQ,EAClBD,sBAAA,CAAC,OAAO,CAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,aAC5DC,qBAAC,CAAA,QAAQ,IACP,eAAe,EAAE,KAAK,EACtB,cAAc,EAAE,CAAC,EACjB,YAAY,EAAE,aAAa,CAAC,IAAI,EAChC,QAAQ,EAAE,IAAI,EAAA,GACV,aAAa,EACjB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,CAAA,EACD,MAAM,KACLA,qBAAC,CAAA,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EACnE,QAAA,EAAA,MAAM,GACF,CACR,CAAA,EAAA,CACe,CACV,EAAA,CAAA,EACV;AACJ;;;;"}
|