@frontify/fondue 12.0.0-beta.346 → 12.0.0-beta.347

package/dist/components/DatePicker/DatePicker.es.js

@@ -5,103 +5,103 @@ import { forwardRef as _, useState as F } from "react";
 import G from "react-datepicker";
 import "./DatePicker.css.es.js";
 import { DatePickerTrigger as H } from "./DatePickerTrigger.es.js";
-import { Validation as V } from "../../utilities/validation.es.js";
-import Y from "../../foundation/Icon/Generated/IconCaretLeftDouble.es.js";
-import $ from "../../foundation/Icon/Generated/IconCaretLeft.es.js";
-import q from "../../foundation/Icon/Generated/IconCaretRight.es.js";
-import J from "../../foundation/Icon/Generated/IconCaretRightDouble.es.js";
+import { Validation as K } from "../../utilities/validation.es.js";
+import V from "../../foundation/Icon/Generated/IconCaretLeftDouble.es.js";
+import Y from "../../foundation/Icon/Generated/IconCaretLeft.es.js";
+import $ from "../../foundation/Icon/Generated/IconCaretRight.es.js";
+import q from "../../foundation/Icon/Generated/IconCaretRightDouble.es.js";
 import { Button as i } from "../Button/Button.es.js";
-import { ButtonStyle as s, ButtonSize as o, ButtonEmphasis as n } from "../Button/ButtonTypes.es.js";
-const K = 40, Q = (d, a) => d === "single" ? a < /* @__PURE__ */ new Date() ? "past-date" : "future-date" : "range-day", U = _(
+import { ButtonStyle as o, ButtonSize as s, ButtonEmphasis as n } from "../Button/ButtonTypes.es.js";
+const J = 40, Q = (d, a) => d === "single" ? a < /* @__PURE__ */ new Date() ? "past-date" : "future-date" : "range-day", U = _(
   ({
     placeHolder: d = "Select a date",
     isClearable: a,
-    shouldCloseOnSelect: y,
+    shouldCloseOnSelect: C,
     onChange: u,
     onOpen: l,
     onClose: m,
-    onBlur: C,
-    onKeyDown: k,
-    dateFormat: z = "MMM dd, yyyy",
-    value: M,
-    startDate: x,
-    endDate: S,
-    minDate: I,
-    maxDate: N,
-    validation: R = V.Default,
-    customTrigger: b,
-    customHeader: P,
-    children: W,
-    hasPopperArrow: B = !0,
-    preventOpenOnFocus: O = !1,
-    filterDate: j = () => !0,
+    onBlur: k,
+    onKeyDown: z,
+    dateFormat: M = "MMM dd, yyyy",
+    value: x,
+    startDate: S,
+    endDate: I,
+    minDate: N,
+    maxDate: R,
+    validation: b = K.Default,
+    customTrigger: P,
+    customHeader: W,
+    children: B,
+    hasPopperArrow: O = !0,
+    preventOpenOnFocus: j = !1,
+    filterDate: v = () => !0,
     variant: w = "single",
     "data-test-id": A = "date-picker"
-  }, v) => {
-    const [E, h] = F(!1);
+  }, E) => {
+    const [h, g] = F(!1);
     return /* @__PURE__ */ e("div", { "data-test-id": A, children: /* @__PURE__ */ e(
       G,
       {
         calendarClassName: "tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap",
-        selected: M,
-        startDate: x,
-        endDate: S,
-        minDate: I,
-        maxDate: N,
+        selected: x,
+        startDate: S,
+        endDate: I,
+        minDate: N,
+        maxDate: R,
         calendarStartDay: 1,
         onChange: u,
-        onKeyDown: k,
-        onBlur: C,
+        onKeyDown: h ? void 0 : z,
+        onBlur: k,
         selectsRange: w === "range",
-        showPopperArrow: B,
-        preventOpenOnFocus: O,
-        filterDate: j,
-        customInput: b ?? /* @__PURE__ */ e(
+        showPopperArrow: O,
+        preventOpenOnFocus: j,
+        filterDate: v,
+        customInput: P ?? /* @__PURE__ */ e(
           H,
           {
-            isCalendarOpen: E,
+            isCalendarOpen: h,
             isClearable: a,
             placeHolder: d,
-            validation: R,
+            validation: b,
             onDateChanged: u
           }
         ),
-        ref: v,
+        ref: E,
         formatWeekDay: (t) => t.slice(0, 1),
         isClearable: a,
-        dateFormat: z,
+        dateFormat: M,
         onCalendarClose: () => {
-          h(!1), m == null || m();
+          g(!1), m == null || m();
         },
         onCalendarOpen: () => {
-          h(!0), l == null || l();
+          g(!0), l == null || l();
         },
-        shouldCloseOnSelect: y,
+        shouldCloseOnSelect: C,
         dayClassName: (t) => Q(w, t),
         popperProps: {
           strategy: "fixed"
         },
-        renderCustomHeader: ({ date: t, decreaseMonth: c, increaseMonth: p, increaseYear: g, decreaseYear: D }) => /* @__PURE__ */ f("div", { className: "tw-flex tw-flex-col tw-gap-3", children: [
-          P,
+        renderCustomHeader: ({ date: t, decreaseMonth: c, increaseMonth: p, increaseYear: D, decreaseYear: y }) => /* @__PURE__ */ f("div", { className: "tw-flex tw-flex-col tw-gap-3", children: [
+          W,
           /* @__PURE__ */ f("div", { className: "tw-flex tw-justify-between tw-pb-4 tw-px-0", children: [
             /* @__PURE__ */ e(
               i,
               {
-                style: s.Default,
-                size: o.Medium,
-                onClick: D,
+                style: o.Default,
+                size: s.Medium,
+                onClick: y,
                 emphasis: n.Weak,
-                icon: /* @__PURE__ */ e(Y, { size: r.Size20 })
+                icon: /* @__PURE__ */ e(V, { size: r.Size20 })
               }
             ),
             /* @__PURE__ */ e(
               i,
               {
-                style: s.Default,
-                size: o.Medium,
+                style: o.Default,
+                size: s.Medium,
                 onClick: c,
                 emphasis: n.Weak,
-                icon: /* @__PURE__ */ e($, { size: r.Size20 })
+                icon: /* @__PURE__ */ e(Y, { size: r.Size20 })
               }
             ),
             /* @__PURE__ */ f("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center", children: [
@@ -112,21 +112,21 @@ const K = 40, Q = (d, a) => d === "single" ? a < /* @__PURE__ */ new Date() ? "p
             /* @__PURE__ */ e(
               i,
               {
-                style: s.Default,
-                size: o.Medium,
+                style: o.Default,
+                size: s.Medium,
                 onClick: p,
                 emphasis: n.Weak,
-                icon: /* @__PURE__ */ e(q, { size: r.Size20 })
+                icon: /* @__PURE__ */ e($, { size: r.Size20 })
               }
             ),
             /* @__PURE__ */ e(
               i,
               {
-                style: s.Default,
-                size: o.Medium,
-                onClick: g,
+                style: o.Default,
+                size: s.Medium,
+                onClick: D,
                 emphasis: n.Weak,
-                icon: /* @__PURE__ */ e(J, { size: r.Size20 })
+                icon: /* @__PURE__ */ e(q, { size: r.Size20 })
               }
             )
           ] })
@@ -136,12 +136,12 @@ const K = 40, Q = (d, a) => d === "single" ? a < /* @__PURE__ */ new Date() ? "p
             name: "arrow",
             options: {
               padding: ({ popper: t, reference: c, placement: p }) => ({
-                [`${p.includes("end") ? "left" : "right"}`]: Math.max(t.width, Math.min(t.width, c.width)) - K
+                [`${p.includes("end") ? "left" : "right"}`]: Math.max(t.width, Math.min(t.width, c.width)) - J
               })
             }
           }
         ],
-        children: W
+        children: B
       }
     ) });
   }

package/dist/components/DatePicker/DatePicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.es.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { format, getYear } from 'date-fns';\nimport { KeyboardEvent, ReactNode, forwardRef, useState } from 'react';\nimport DatepickerComponent, { ReactDatePicker } from 'react-datepicker';\nimport './DatePicker.css';\nimport { DatePickerTrigger } from './DatePickerTrigger';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@foundation/Icon/Generated';\nimport { Validation } from '@utilities/validation';\n\nconst ARROW_PADDING_CORRECTION = 40;\n\ntype SingleDatePickerProps = {\n    variant?: 'single';\n    onChange: (date: Date | null) => void;\n    startDate?: null;\n    endDate?: null;\n};\n\ntype RangeDatePickerProps = {\n    variant: 'range';\n    onChange: (date: [Date | null, Date | null] | null) => void;\n    startDate: Date | null;\n    endDate: Date | null;\n};\n\nexport type DatePickerProps = {\n    placeHolder?: string;\n    isClearable?: boolean;\n    shouldCloseOnSelect?: boolean;\n    dateFormat?: string;\n    /** @description when the variant is of type 'range', the value should be the startDate */\n    value?: Date | null;\n    minDate?: Date;\n    maxDate?: Date;\n    validation?: Validation;\n    customTrigger?: ReactNode;\n    customHeader?: ReactNode;\n    children?: ReactNode;\n    hasPopperArrow?: boolean;\n    preventOpenOnFocus?: boolean;\n    filterDate?: (date: Date) => boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    onBlur?: () => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n    'data-test-id'?: string;\n} & (SingleDatePickerProps | RangeDatePickerProps);\n\nconst getDayClasses = (variant: DatePickerProps['variant'], date: Date) => {\n    if (variant === 'single') {\n        return date < new Date() ? 'past-date' : 'future-date';\n    }\n    return 'range-day';\n};\n\nexport type ReactDatePickerRef = ReactDatePicker<never, boolean>;\n\nexport const DatePicker = forwardRef<ReactDatePicker<never, boolean>, DatePickerProps>(\n    (\n        {\n            placeHolder = 'Select a date',\n            isClearable,\n            shouldCloseOnSelect,\n            onChange,\n            onOpen,\n            onClose,\n            onBlur,\n            onKeyDown,\n            dateFormat = 'MMM dd, yyyy',\n            value,\n            startDate,\n            endDate,\n            minDate,\n            maxDate,\n            validation = Validation.Default,\n            customTrigger,\n            customHeader,\n            children,\n            hasPopperArrow = true,\n            preventOpenOnFocus = false,\n            filterDate = () => true,\n            variant = 'single',\n            'data-test-id': dataTestId = 'date-picker',\n        },\n        ref,\n    ) => {\n        const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n        const handleOpen = () => {\n            setIsCalendarOpen(true);\n            onOpen?.();\n        };\n\n        const handleClose = () => {\n            setIsCalendarOpen(false);\n            onClose?.();\n        };\n\n        return (\n            <div data-test-id={dataTestId}>\n                <DatepickerComponent\n                    calendarClassName=\"tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap\"\n                    selected={value}\n                    startDate={startDate}\n                    endDate={endDate}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    calendarStartDay={1}\n                    onChange={onChange}\n                    onKeyDown={onKeyDown}\n                    onBlur={onBlur}\n                    selectsRange={variant === 'range'}\n                    showPopperArrow={hasPopperArrow}\n                    preventOpenOnFocus={preventOpenOnFocus}\n                    filterDate={filterDate}\n                    customInput={\n                        customTrigger ?? (\n                            <DatePickerTrigger\n                                isCalendarOpen={isCalendarOpen}\n                                isClearable={isClearable}\n                                placeHolder={placeHolder}\n                                validation={validation}\n                                onDateChanged={onChange}\n                            />\n                        )\n                    }\n                    ref={ref}\n                    formatWeekDay={(day) => day.slice(0, 1)}\n                    isClearable={isClearable}\n                    dateFormat={dateFormat}\n                    onCalendarClose={handleClose}\n                    onCalendarOpen={handleOpen}\n                    shouldCloseOnSelect={shouldCloseOnSelect}\n                    dayClassName={(date) => getDayClasses(variant, date)}\n                    popperProps={{\n                        strategy: 'fixed',\n                    }}\n                    renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n                        <div className=\"tw-flex tw-flex-col tw-gap-3\">\n                            {customHeader}\n                            <div className=\"tw-flex tw-justify-between tw-pb-4 tw-px-0\">\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    size={ButtonSize.Medium}\n                                    onClick={decreaseYear}\n                                    emphasis={ButtonEmphasis.Weak}\n                                    icon={<IconCaretLeftDouble size={IconSize.Size20} />}\n                                />\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    size={ButtonSize.Medium}\n                                    onClick={decreaseMonth}\n                                    emphasis={ButtonEmphasis.Weak}\n                                    icon={<IconCaretLeft size={IconSize.Size20} />}\n                                />\n                                <p className=\"tw-font-sans tw-font-semibold tw-grow tw-self-center\">\n                                    {format(date, 'MMMM')} {getYear(date)}\n                                </p>\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    size={ButtonSize.Medium}\n                                    onClick={increaseMonth}\n                                    emphasis={ButtonEmphasis.Weak}\n                                    icon={<IconCaretRight size={IconSize.Size20} />}\n                                />\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    size={ButtonSize.Medium}\n                                    onClick={increaseYear}\n                                    emphasis={ButtonEmphasis.Weak}\n                                    icon={<IconCaretRightDouble size={IconSize.Size20} />}\n                                />\n                            </div>\n                        </div>\n                    )}\n                    popperModifiers={[\n                        {\n                            name: 'arrow',\n                            options: {\n                                padding: ({ popper, reference, placement }) => {\n                                    const side = placement.includes('end') ? 'left' : 'right';\n                                    const padding = {\n                                        [`${side}`]:\n                                            Math.max(popper.width, Math.min(popper.width, reference.width)) -\n                                            ARROW_PADDING_CORRECTION,\n                                    };\n\n                                    return padding;\n                                },\n                            },\n                        },\n                    ]}\n                >\n                    {children}\n                </DatepickerComponent>\n            </div>\n        );\n    },\n);\n\nDatePicker.displayName = 'FondueDatePicker';\n"],"names":["ARROW_PADDING_CORRECTION","getDayClasses","variant","date","DatePicker","forwardRef","placeHolder","isClearable","shouldCloseOnSelect","onChange","onOpen","onClose","onBlur","onKeyDown","dateFormat","value","startDate","endDate","minDate","maxDate","validation","Validation","customTrigger","customHeader","children","hasPopperArrow","preventOpenOnFocus","filterDate","dataTestId","ref","isCalendarOpen","setIsCalendarOpen","useState","jsx","DatepickerComponent","DatePickerTrigger","day","decreaseMonth","increaseMonth","increaseYear","decreaseYear","jsxs","Button","ButtonStyle","ButtonSize","ButtonEmphasis","IconCaretLeftDouble","IconSize","IconCaretLeft","format","getYear","IconCaretRight","IconCaretRightDouble","popper","reference","placement"],"mappings":"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"}
+{"version":3,"file":"DatePicker.es.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { format, getYear } from 'date-fns';\nimport { KeyboardEvent, ReactNode, forwardRef, useState } from 'react';\nimport DatepickerComponent, { ReactDatePicker } from 'react-datepicker';\nimport './DatePicker.css';\nimport { DatePickerTrigger } from './DatePickerTrigger';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@foundation/Icon/Generated';\nimport { Validation } from '@utilities/validation';\n\nconst ARROW_PADDING_CORRECTION = 40;\n\ntype SingleDatePickerProps = {\n    variant?: 'single';\n    onChange: (date: Date | null) => void;\n    startDate?: null;\n    endDate?: null;\n};\n\ntype RangeDatePickerProps = {\n    variant: 'range';\n    onChange: (date: [Date | null, Date | null] | null) => void;\n    startDate: Date | null;\n    endDate: Date | null;\n};\n\nexport type DatePickerProps = {\n    placeHolder?: string;\n    isClearable?: boolean;\n    shouldCloseOnSelect?: boolean;\n    dateFormat?: string;\n    /** @description when the variant is of type 'range', the value should be the startDate */\n    value?: Date | null;\n    minDate?: Date;\n    maxDate?: Date;\n    validation?: Validation;\n    customTrigger?: ReactNode;\n    customHeader?: ReactNode;\n    children?: ReactNode;\n    hasPopperArrow?: boolean;\n    preventOpenOnFocus?: boolean;\n    filterDate?: (date: Date) => boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    onBlur?: () => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n    'data-test-id'?: string;\n} & (SingleDatePickerProps | RangeDatePickerProps);\n\nconst getDayClasses = (variant: DatePickerProps['variant'], date: Date) => {\n    if (variant === 'single') {\n        return date < new Date() ? 'past-date' : 'future-date';\n    }\n    return 'range-day';\n};\n\nexport type ReactDatePickerRef = ReactDatePicker<never, boolean>;\n\nexport const DatePicker = forwardRef<ReactDatePicker<never, boolean>, DatePickerProps>(\n    (\n        {\n            placeHolder = 'Select a date',\n            isClearable,\n            shouldCloseOnSelect,\n            onChange,\n            onOpen,\n            onClose,\n            onBlur,\n            onKeyDown,\n            dateFormat = 'MMM dd, yyyy',\n            value,\n            startDate,\n            endDate,\n            minDate,\n            maxDate,\n            validation = Validation.Default,\n            customTrigger,\n            customHeader,\n            children,\n            hasPopperArrow = true,\n            preventOpenOnFocus = false,\n            filterDate = () => true,\n            variant = 'single',\n            'data-test-id': dataTestId = 'date-picker',\n        },\n        ref,\n    ) => {\n        const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n        const handleOpen = () => {\n            setIsCalendarOpen(true);\n            onOpen?.();\n        };\n\n        const handleClose = () => {\n            setIsCalendarOpen(false);\n            onClose?.();\n        };\n\n        return (\n            <div data-test-id={dataTestId}>\n                <DatepickerComponent\n                    calendarClassName=\"tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap\"\n                    selected={value}\n                    startDate={startDate}\n                    endDate={endDate}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    calendarStartDay={1}\n                    onChange={onChange}\n                    onKeyDown={isCalendarOpen ? undefined : onKeyDown}\n                    onBlur={onBlur}\n                    selectsRange={variant === 'range'}\n                    showPopperArrow={hasPopperArrow}\n                    preventOpenOnFocus={preventOpenOnFocus}\n                    filterDate={filterDate}\n                    customInput={\n                        customTrigger ?? (\n                            <DatePickerTrigger\n                                isCalendarOpen={isCalendarOpen}\n                                isClearable={isClearable}\n                                placeHolder={placeHolder}\n                                validation={validation}\n                                onDateChanged={onChange}\n                            />\n                        )\n                    }\n                    ref={ref}\n                    formatWeekDay={(day) => day.slice(0, 1)}\n                    isClearable={isClearable}\n                    dateFormat={dateFormat}\n                    onCalendarClose={handleClose}\n                    onCalendarOpen={handleOpen}\n                    shouldCloseOnSelect={shouldCloseOnSelect}\n                    dayClassName={(date) => getDayClasses(variant, date)}\n                    popperProps={{\n                        strategy: 'fixed',\n                    }}\n                    renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n                        <div className=\"tw-flex tw-flex-col tw-gap-3\">\n                            {customHeader}\n                            <div className=\"tw-flex tw-justify-between tw-pb-4 tw-px-0\">\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    size={ButtonSize.Medium}\n                                    onClick={decreaseYear}\n                                    emphasis={ButtonEmphasis.Weak}\n                                    icon={<IconCaretLeftDouble size={IconSize.Size20} />}\n                                />\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    size={ButtonSize.Medium}\n                                    onClick={decreaseMonth}\n                                    emphasis={ButtonEmphasis.Weak}\n                                    icon={<IconCaretLeft size={IconSize.Size20} />}\n                                />\n                                <p className=\"tw-font-sans tw-font-semibold tw-grow tw-self-center\">\n                                    {format(date, 'MMMM')} {getYear(date)}\n                                </p>\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    size={ButtonSize.Medium}\n                                    onClick={increaseMonth}\n                                    emphasis={ButtonEmphasis.Weak}\n                                    icon={<IconCaretRight size={IconSize.Size20} />}\n                                />\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    size={ButtonSize.Medium}\n                                    onClick={increaseYear}\n                                    emphasis={ButtonEmphasis.Weak}\n                                    icon={<IconCaretRightDouble size={IconSize.Size20} />}\n                                />\n                            </div>\n                        </div>\n                    )}\n                    popperModifiers={[\n                        {\n                            name: 'arrow',\n                            options: {\n                                padding: ({ popper, reference, placement }) => {\n                                    const side = placement.includes('end') ? 'left' : 'right';\n                                    const padding = {\n                                        [`${side}`]:\n                                            Math.max(popper.width, Math.min(popper.width, reference.width)) -\n                                            ARROW_PADDING_CORRECTION,\n                                    };\n\n                                    return padding;\n                                },\n                            },\n                        },\n                    ]}\n                >\n                    {children}\n                </DatepickerComponent>\n            </div>\n        );\n    },\n);\n\nDatePicker.displayName = 'FondueDatePicker';\n"],"names":["ARROW_PADDING_CORRECTION","getDayClasses","variant","date","DatePicker","forwardRef","placeHolder","isClearable","shouldCloseOnSelect","onChange","onOpen","onClose","onBlur","onKeyDown","dateFormat","value","startDate","endDate","minDate","maxDate","validation","Validation","customTrigger","customHeader","children","hasPopperArrow","preventOpenOnFocus","filterDate","dataTestId","ref","isCalendarOpen","setIsCalendarOpen","useState","jsx","DatepickerComponent","DatePickerTrigger","day","decreaseMonth","increaseMonth","increaseYear","decreaseYear","jsxs","Button","ButtonStyle","ButtonSize","ButtonEmphasis","IconCaretLeftDouble","IconSize","IconCaretLeft","format","getYear","IconCaretRight","IconCaretRightDouble","popper","reference","placement"],"mappings":";;;;;;;;;;;;;;AAYA,MAAMA,IAA2B,IAuC3BC,IAAgB,CAACC,GAAqCC,MACpDD,MAAY,WACLC,IAAO,oBAAI,SAAS,cAAc,gBAEtC,aAKEC,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,aAAAC,IAAc;AAAA,IACd,aAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAaC,EAAW;AAAA,IACxB,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,oBAAAC,IAAqB;AAAA,IACrB,YAAAC,IAAa,MAAM;AAAA,IACnB,SAAAzB,IAAU;AAAA,IACV,gBAAgB0B,IAAa;AAAA,KAEjCC,MACC;AACD,UAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAkB,EAAK;AAa/D,WAAA,gBAAAC,EAAC,OAAI,EAAA,gBAAcL,GACf,UAAA,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,mBAAkB;AAAA,QAClB,UAAUnB;AAAA,QACV,WAAAC;AAAA,QACA,SAAAC;AAAA,QACA,SAAAC;AAAA,QACA,SAAAC;AAAA,QACA,kBAAkB;AAAA,QAClB,UAAAV;AAAA,QACA,WAAWqB,IAAiB,SAAYjB;AAAA,QACxC,QAAAD;AAAA,QACA,cAAcV,MAAY;AAAA,QAC1B,iBAAiBuB;AAAA,QACjB,oBAAAC;AAAA,QACA,YAAAC;AAAA,QACA,aACIL,KACI,gBAAAW;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,gBAAAL;AAAA,YACA,aAAAvB;AAAA,YACA,aAAAD;AAAA,YACA,YAAAc;AAAA,YACA,eAAeX;AAAA,UAAA;AAAA,QACnB;AAAA,QAGR,KAAAoB;AAAA,QACA,eAAe,CAACO,MAAQA,EAAI,MAAM,GAAG,CAAC;AAAA,QACtC,aAAA7B;AAAA,QACA,YAAAO;AAAA,QACA,iBArCQ,MAAM;AACtB,UAAAiB,EAAkB,EAAK,GACbpB,KAAA,QAAAA;AAAA,QAAA;AAAA,QAoCF,gBA3CO,MAAM;AACrB,UAAAoB,EAAkB,EAAI,GACbrB,KAAA,QAAAA;AAAA,QAAA;AAAA,QA0CD,qBAAAF;AAAA,QACA,cAAc,CAACL,MAASF,EAAcC,GAASC,CAAI;AAAA,QACnD,aAAa;AAAA,UACT,UAAU;AAAA,QACd;AAAA,QACA,oBAAoB,CAAC,EAAE,MAAAA,GAAM,eAAAkC,GAAe,eAAAC,GAAe,cAAAC,GAAc,cAAAC,EACrE,MAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,gCACV,UAAA;AAAA,UAAAlB;AAAA,UACD,gBAAAkB,EAAC,OAAI,EAAA,WAAU,8CACX,UAAA;AAAA,YAAA,gBAAAR;AAAA,cAACS;AAAA,cAAA;AAAA,gBACG,OAAOC,EAAY;AAAA,gBACnB,MAAMC,EAAW;AAAA,gBACjB,SAASJ;AAAA,gBACT,UAAUK,EAAe;AAAA,gBACzB,MAAM,gBAAAZ,EAACa,GAAoB,EAAA,MAAMC,EAAS,QAAQ;AAAA,cAAA;AAAA,YACtD;AAAA,YACA,gBAAAd;AAAA,cAACS;AAAA,cAAA;AAAA,gBACG,OAAOC,EAAY;AAAA,gBACnB,MAAMC,EAAW;AAAA,gBACjB,SAASP;AAAA,gBACT,UAAUQ,EAAe;AAAA,gBACzB,MAAM,gBAAAZ,EAACe,GAAc,EAAA,MAAMD,EAAS,QAAQ;AAAA,cAAA;AAAA,YAChD;AAAA,YACA,gBAAAN,EAAC,KAAE,EAAA,WAAU,wDACR,UAAA;AAAA,cAAAQ,EAAO9C,GAAM,MAAM;AAAA,cAAE;AAAA,cAAE+C,EAAQ/C,CAAI;AAAA,YAAA,GACxC;AAAA,YACA,gBAAA8B;AAAA,cAACS;AAAA,cAAA;AAAA,gBACG,OAAOC,EAAY;AAAA,gBACnB,MAAMC,EAAW;AAAA,gBACjB,SAASN;AAAA,gBACT,UAAUO,EAAe;AAAA,gBACzB,MAAM,gBAAAZ,EAACkB,GAAe,EAAA,MAAMJ,EAAS,QAAQ;AAAA,cAAA;AAAA,YACjD;AAAA,YACA,gBAAAd;AAAA,cAACS;AAAA,cAAA;AAAA,gBACG,OAAOC,EAAY;AAAA,gBACnB,MAAMC,EAAW;AAAA,gBACjB,SAASL;AAAA,gBACT,UAAUM,EAAe;AAAA,gBACzB,MAAM,gBAAAZ,EAACmB,GAAqB,EAAA,MAAML,EAAS,QAAQ;AAAA,cAAA;AAAA,YACvD;AAAA,UAAA,GACJ;AAAA,QAAA,GACJ;AAAA,QAEJ,iBAAiB;AAAA,UACb;AAAA,YACI,MAAM;AAAA,YACN,SAAS;AAAA,cACL,SAAS,CAAC,EAAE,QAAAM,GAAQ,WAAAC,GAAW,WAAAC,SAEX;AAAA,gBACZ,CAAC,GAFQA,EAAU,SAAS,KAAK,IAAI,SAAS,OAEtC,EAAE,GACN,KAAK,IAAIF,EAAO,OAAO,KAAK,IAAIA,EAAO,OAAOC,EAAU,KAAK,CAAC,IAC9DtD;AAAA,cAAA;AAAA,YAKhB;AAAA,UACJ;AAAA,QACJ;AAAA,QAEC,UAAAwB;AAAA,MAAA;AAAA,IAET,EAAA,CAAA;AAAA,EAER;AACJ;AAEApB,EAAW,cAAc;"}