@traefik-labs/faency 12.2.0 → 12.2.2

package/dist/components/DateTimePickerInput/DateTimePickerInput.js

@@ -1,157 +1,142 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { offset, flip, shift, arrow, useFloating, autoUpdate, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingArrow } from "@floating-ui/react";
-import { CalendarIcon } from "@radix-ui/react-icons";
-import { parse, format } from "date-fns";
-import React, { useRef, useState, useMemo } from "react";
 import { styled } from "../../stitches.config.js";
-import { Input } from "../Input/Input.js";
-import { DateTimePicker } from "../DateTimePicker/DateTimePicker.js";
 import { Card } from "../Card/Card.js";
-const StyledWrapper = styled("div", {
-  display: "flex",
-  position: "relative",
-  width: "100%",
-  "& .firefox-patch": {
-    display: "none"
-  },
-  "@supports (-moz-appearance: none)": {
-    "& .firefox-patch": {
-      display: "block",
-      width: "20px",
-      height: "20px",
-      position: "absolute",
-      right: "17px",
-      top: "6px",
-      background: "$inputBg",
-      "&::before": {
-        boxSizing: "border-box",
-        content: '""',
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none"
-      },
-      "&::after": {
-        boxSizing: "border-box",
-        content: '""',
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none"
-      },
-      "&:focus-visible": {
-        "&::before": {
-          backgroundColor: "$inputFocusBg"
-        },
-        "&::after": {
-          backgroundColor: "$primary",
-          opacity: 0.15
-        }
-      }
-    },
-    "@hover": {
-      "&:hover .firefox-patch": {
-        "&::before": {
-          backgroundColor: "$inputHoverBg"
-        },
-        "&::after": {
-          backgroundColor: "$primary",
-          opacity: 0.05
-        }
-      }
-    }
-  }
+import { DateTimePicker } from "../DateTimePicker/DateTimePicker.js";
+import { Input } from "../Input/Input.js";
+import { CalendarIcon } from "@radix-ui/react-icons";
+import React, { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format, parse } from "date-fns";
+import { FloatingArrow, FloatingFocusManager, arrow, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+//#region components/DateTimePickerInput/DateTimePickerInput.tsx
+var StyledWrapper = styled("div", {
+	display: "flex",
+	position: "relative",
+	width: "100%",
+	"& .firefox-patch": { display: "none" },
+	"@supports (-moz-appearance: none)": {
+		"& .firefox-patch": {
+			display: "block",
+			width: "20px",
+			height: "20px",
+			position: "absolute",
+			right: "17px",
+			top: "6px",
+			background: "$inputBg",
+			"&::before": {
+				boxSizing: "border-box",
+				content: "\"\"",
+				position: "absolute",
+				inset: 0,
+				pointerEvents: "none"
+			},
+			"&::after": {
+				boxSizing: "border-box",
+				content: "\"\"",
+				position: "absolute",
+				inset: 0,
+				pointerEvents: "none"
+			},
+			"&:focus-visible": {
+				"&::before": { backgroundColor: "$inputFocusBg" },
+				"&::after": {
+					backgroundColor: "$primary",
+					opacity: .15
+				}
+			}
+		},
+		"@hover": { "&:hover .firefox-patch": {
+			"&::before": { backgroundColor: "$inputHoverBg" },
+			"&::after": {
+				backgroundColor: "$primary",
+				opacity: .05
+			}
+		} }
+	}
+});
+var DateTimePickerInput = React.forwardRef(({ inputCSS, inputProps, onChange, pickerCSS, pickerPlacement, showDatePresets, showTimePicker, ...pickerProps }, fowardedRef) => {
+	const formatStr = "yyyy-MM-dd'T'HH:mm";
+	const arrowRef = useRef(null);
+	const [inputValue, setInputValue] = useState("");
+	const [selectedDates, onDatesChange] = useState([]);
+	const [isPickerOpen, setIsPickerOpen] = useState(false);
+	const { refs, floatingStyles, context } = useFloating({
+		open: isPickerOpen,
+		onOpenChange: setIsPickerOpen,
+		placement: pickerPlacement,
+		middleware: useMemo(() => [
+			offset(10),
+			flip(),
+			shift(),
+			arrow({ element: arrowRef })
+		], []),
+		whileElementsMounted: autoUpdate
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useClick(context),
+		useDismiss(context),
+		useRole(context)
+	]);
+	const { onClick: onFirefoxPatchClick } = getReferenceProps();
+	return /* @__PURE__ */ jsxs(StyledWrapper, {
+		ref: fowardedRef,
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				startAdornment: /* @__PURE__ */ jsx(CalendarIcon, {}),
+				...getReferenceProps(),
+				...inputProps,
+				css: {
+					"& input::-webkit-calendar-picker-indicator": { display: "none" },
+					...inputCSS
+				},
+				onChange: (evt) => {
+					const value = evt.currentTarget.value;
+					setInputValue(value);
+					try {
+						const newDates = value.split(",").map((d) => parse(d.trim(), formatStr, /* @__PURE__ */ new Date()));
+						onDatesChange(newDates);
+						if (onChange) onChange(newDates);
+					} catch (err) {}
+				},
+				ref: refs.setReference,
+				type: "datetime-local",
+				value: inputValue
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "firefox-patch",
+				onClick: onFirefoxPatchClick
+			}),
+			isPickerOpen && /* @__PURE__ */ jsx(FloatingFocusManager, {
+				context,
+				initialFocus: -1,
+				modal: false,
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: refs.setFloating,
+					style: floatingStyles,
+					...getFloatingProps(),
+					children: [/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(DateTimePicker, {
+						...pickerProps,
+						css: pickerCSS,
+						onDatesChange: (d) => {
+							onDatesChange(d);
+							setInputValue(d.map((date) => format(date, formatStr)).join(", "));
+							if (onChange) onChange(d);
+						},
+						onFastTravelClick: () => setIsPickerOpen(false),
+						onTimeButtonClick: () => setIsPickerOpen(false),
+						selectedDates,
+						showDatePresets,
+						showTimePicker
+					}) }), /* @__PURE__ */ jsx(FloatingArrow, {
+						ref: arrowRef,
+						context,
+						fill: "var(--colors-01dp)"
+					})]
+				})
+			})
+		]
+	});
 });
-const DateTimePickerInput = React.forwardRef(
-  ({
-    inputCSS,
-    inputProps,
-    onChange,
-    pickerCSS,
-    pickerPlacement,
-    showDatePresets,
-    showTimePicker,
-    ...pickerProps
-  }, fowardedRef) => {
-    const formatStr = "yyyy-MM-dd'T'HH:mm";
-    const arrowRef = useRef(null);
-    const [inputValue, setInputValue] = useState("");
-    const [selectedDates, onDatesChange] = useState([]);
-    const [isPickerOpen, setIsPickerOpen] = useState(false);
-    const middleware = useMemo(
-      () => [
-        offset(10),
-        flip(),
-        shift(),
-        // arrowRef is passed to floating-ui which handles it correctly
-        arrow({ element: arrowRef })
-      ],
-      []
-    );
-    const { refs, floatingStyles, context } = useFloating({
-      open: isPickerOpen,
-      onOpenChange: setIsPickerOpen,
-      placement: pickerPlacement,
-      middleware,
-      whileElementsMounted: autoUpdate
-    });
-    const click = useClick(context);
-    const dismiss = useDismiss(context);
-    const role = useRole(context);
-    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
-    const { onClick: onFirefoxPatchClick } = getReferenceProps();
-    return /* @__PURE__ */ jsxs(StyledWrapper, { ref: fowardedRef, children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          startAdornment: /* @__PURE__ */ jsx(CalendarIcon, {}),
-          ...getReferenceProps(),
-          ...inputProps,
-          css: { "& input::-webkit-calendar-picker-indicator": { display: "none" }, ...inputCSS },
-          onChange: (evt) => {
-            const value = evt.currentTarget.value;
-            setInputValue(value);
-            try {
-              const newDates = value.split(",").map((d) => parse(d.trim(), formatStr, /* @__PURE__ */ new Date()));
-              onDatesChange(newDates);
-              if (onChange) onChange(newDates);
-            } catch (err) {
-            }
-          },
-          ref: refs.setReference,
-          type: "datetime-local",
-          value: inputValue
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "firefox-patch",
-          onClick: onFirefoxPatchClick
-        }
-      ),
-      isPickerOpen && /* @__PURE__ */ jsx(FloatingFocusManager, { context, initialFocus: -1, modal: false, children: /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: [
-        /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(
-          DateTimePicker,
-          {
-            ...pickerProps,
-            css: pickerCSS,
-            onDatesChange: (d) => {
-              onDatesChange(d);
-              setInputValue(d.map((date) => format(date, formatStr)).join(", "));
-              if (onChange) onChange(d);
-            },
-            onFastTravelClick: () => setIsPickerOpen(false),
-            onTimeButtonClick: () => setIsPickerOpen(false),
-            selectedDates,
-            showDatePresets,
-            showTimePicker
-          }
-        ) }),
-        /* @__PURE__ */ jsx(FloatingArrow, { ref: arrowRef, context, fill: "var(--colors-01dp)" })
-      ] }) })
-    ] });
-  }
-);
-export {
-  DateTimePickerInput
-};
-//# sourceMappingURL=DateTimePickerInput.js.map
+//#endregion
+export { DateTimePickerInput };
+
+//# sourceMappingURL=DateTimePickerInput.js.map

package/dist/components/DateTimePickerInput/DateTimePickerInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePickerInput.js","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  FloatingFocusManager,\n  offset,\n  Placement,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useMemo, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n  display: 'flex',\n  position: 'relative',\n  width: '100%',\n\n  '& .firefox-patch': {\n    display: 'none',\n  },\n\n  '@supports (-moz-appearance: none)': {\n    '& .firefox-patch': {\n      display: 'block',\n      width: '20px',\n      height: '20px',\n      position: 'absolute',\n      right: '17px',\n      top: '6px',\n      background: '$inputBg',\n\n      '&::before': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        pointerEvents: 'none',\n      },\n      '&::after': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        pointerEvents: 'none',\n      },\n\n      '&:focus-visible': {\n        '&::before': {\n          backgroundColor: '$inputFocusBg',\n        },\n        '&::after': {\n          backgroundColor: '$primary',\n          opacity: 0.15,\n        },\n      },\n    },\n\n    '@hover': {\n      '&:hover .firefox-patch': {\n        '&::before': {\n          backgroundColor: '$inputHoverBg',\n        },\n        '&::after': {\n          backgroundColor: '$primary',\n          opacity: 0.05,\n        },\n      },\n    },\n  },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n  inputCSS?: CSS;\n  inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n  onChange?: (d: Date[]) => void;\n  pickerCSS?: CSS;\n  pickerPlacement?: Placement;\n  showDatePresets?: boolean;\n  showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n  React.ElementRef<typeof StyledWrapper>,\n  DateTimePickerInputProps\n>(\n  (\n    {\n      inputCSS,\n      inputProps,\n      onChange,\n      pickerCSS,\n      pickerPlacement,\n      showDatePresets,\n      showTimePicker,\n      ...pickerProps\n    },\n    fowardedRef,\n  ) => {\n    const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n    const arrowRef = useRef(null);\n\n    const [inputValue, setInputValue] = useState<string>('');\n    const [selectedDates, onDatesChange] = useState<Date[]>([]);\n    const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n    const middleware = useMemo(\n      () => [\n        offset(10),\n        flip(),\n        shift(),\n        // arrowRef is passed to floating-ui which handles it correctly\n        arrow({ element: arrowRef }),\n      ],\n      [],\n    );\n\n    const { refs, floatingStyles, context } = useFloating({\n      open: isPickerOpen,\n      onOpenChange: setIsPickerOpen,\n      placement: pickerPlacement,\n      middleware,\n      whileElementsMounted: autoUpdate,\n    });\n\n    const click = useClick(context);\n    const dismiss = useDismiss(context);\n    const role = useRole(context);\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n    const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n    return (\n      <StyledWrapper ref={fowardedRef}>\n        <Input\n          startAdornment={<CalendarIcon />}\n          {...getReferenceProps()}\n          {...inputProps}\n          css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n          onChange={(evt) => {\n            const value = evt.currentTarget.value;\n            setInputValue(value);\n            try {\n              const newDates = (value as string)\n                .split(',')\n                .map((d) => parse(d.trim(), formatStr, new Date()));\n              onDatesChange(newDates);\n              if (onChange) onChange(newDates);\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            } catch (err) {\n              // empty\n            }\n          }}\n          ref={refs.setReference as Ref<InputHandle>}\n          type=\"datetime-local\"\n          value={inputValue}\n        />\n        <div\n          className=\"firefox-patch\"\n          onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n        />\n        {isPickerOpen && (\n          <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n            {/* refs.setFloating is a stable callback ref from floating-ui */}\n            <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n              <Card>\n                <DateTimePicker\n                  {...pickerProps}\n                  css={pickerCSS}\n                  onDatesChange={(d) => {\n                    onDatesChange(d);\n                    setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n                    if (onChange) onChange(d);\n                  }}\n                  onFastTravelClick={() => setIsPickerOpen(false)}\n                  onTimeButtonClick={() => setIsPickerOpen(false)}\n                  selectedDates={selectedDates}\n                  showDatePresets={showDatePresets}\n                  showTimePicker={showTimePicker}\n                />\n              </Card>\n              <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n            </div>\n          </FloatingFocusManager>\n        )}\n      </StyledWrapper>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,gBAAgB,OAAO,OAAO;AAAA,EAClC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EAEP,oBAAoB;AAAA,IAClB,SAAS;AAAA,EAAA;AAAA,EAGX,qCAAqC;AAAA,IACnC,oBAAoB;AAAA,MAClB,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,MACP,KAAK;AAAA,MACL,YAAY;AAAA,MAEZ,aAAa;AAAA,QACX,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA,QACP,eAAe;AAAA,MAAA;AAAA,MAEjB,YAAY;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA,QACP,eAAe;AAAA,MAAA;AAAA,MAGjB,mBAAmB;AAAA,QACjB,aAAa;AAAA,UACX,iBAAiB;AAAA,QAAA;AAAA,QAEnB,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,IAGF,UAAU;AAAA,MACR,0BAA0B;AAAA,QACxB,aAAa;AAAA,UACX,iBAAiB;AAAA,QAAA;AAAA,QAEnB,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;AAcM,MAAM,sBAAsB,MAAM;AAAA,EAIvC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,gBACG;AACH,UAAM,YAAY;AAElB,UAAM,WAAW,OAAO,IAAI;AAE5B,UAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AACvD,UAAM,CAAC,eAAe,aAAa,IAAI,SAAiB,CAAA,CAAE;AAC1D,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,aAAa;AAAA,MACjB,MAAM;AAAA,QACJ,OAAO,EAAE;AAAA,QACT,KAAA;AAAA,QACA,MAAA;AAAA;AAAA,QAEA,MAAM,EAAE,SAAS,SAAA,CAAU;AAAA,MAAA;AAAA,MAE7B,CAAA;AAAA,IAAC;AAGH,UAAM,EAAE,MAAM,gBAAgB,QAAA,IAAY,YAAY;AAAA,MACpD,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAW;AAAA,MACX;AAAA,MACA,sBAAsB;AAAA,IAAA,CACvB;AAED,UAAM,QAAQ,SAAS,OAAO;AAC9B,UAAM,UAAU,WAAW,OAAO;AAClC,UAAM,OAAO,QAAQ,OAAO;AAE5B,UAAM,EAAE,mBAAmB,qBAAqB,gBAAgB,CAAC,OAAO,SAAS,IAAI,CAAC;AACtF,UAAM,EAAE,SAAS,oBAAA,IAAwB,kBAAA;AAEzC,WACE,qBAAC,eAAA,EAAc,KAAK,aAClB,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,oCAAiB,cAAA,EAAa;AAAA,UAC7B,GAAG,kBAAA;AAAA,UACH,GAAG;AAAA,UACJ,KAAK,EAAE,8CAA8C,EAAE,SAAS,OAAA,GAAU,GAAG,SAAA;AAAA,UAC7E,UAAU,CAAC,QAAQ;AACjB,kBAAM,QAAQ,IAAI,cAAc;AAChC,0BAAc,KAAK;AACnB,gBAAI;AACF,oBAAM,WAAY,MACf,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,MAAM,EAAE,QAAQ,WAAW,oBAAI,KAAA,CAAM,CAAC;AACpD,4BAAc,QAAQ;AACtB,kBAAI,mBAAmB,QAAQ;AAAA,YAEjC,SAAS,KAAK;AAAA,YAEd;AAAA,UACF;AAAA,UACA,KAAK,KAAK;AAAA,UACV,MAAK;AAAA,UACL,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAET;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEV,gBACC,oBAAC,sBAAA,EAAqB,SAAkB,cAAc,IAAI,OAAO,OAE/D,UAAA,qBAAC,OAAA,EAAI,KAAK,KAAK,aAAa,OAAO,gBAAiB,GAAG,oBACrD,UAAA;AAAA,QAAA,oBAAC,MAAA,EACC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAG;AAAA,YACJ,KAAK;AAAA,YACL,eAAe,CAAC,MAAM;AACpB,4BAAc,CAAC;AACf,4BAAc,EAAE,IAAI,CAAC,SAAS,OAAO,MAAM,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;AACjE,kBAAI,mBAAmB,CAAC;AAAA,YAC1B;AAAA,YACA,mBAAmB,MAAM,gBAAgB,KAAK;AAAA,YAC9C,mBAAmB,MAAM,gBAAgB,KAAK;AAAA,YAC9C;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,4BACC,eAAA,EAAc,KAAK,UAAU,SAAkB,MAAK,qBAAA,CAAqB;AAAA,MAAA,EAAA,CAC5E,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"DateTimePickerInput.js","names":[],"sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  FloatingFocusManager,\n  offset,\n  Placement,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useMemo, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n  display: 'flex',\n  position: 'relative',\n  width: '100%',\n\n  '& .firefox-patch': {\n    display: 'none',\n  },\n\n  '@supports (-moz-appearance: none)': {\n    '& .firefox-patch': {\n      display: 'block',\n      width: '20px',\n      height: '20px',\n      position: 'absolute',\n      right: '17px',\n      top: '6px',\n      background: '$inputBg',\n\n      '&::before': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        pointerEvents: 'none',\n      },\n      '&::after': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        pointerEvents: 'none',\n      },\n\n      '&:focus-visible': {\n        '&::before': {\n          backgroundColor: '$inputFocusBg',\n        },\n        '&::after': {\n          backgroundColor: '$primary',\n          opacity: 0.15,\n        },\n      },\n    },\n\n    '@hover': {\n      '&:hover .firefox-patch': {\n        '&::before': {\n          backgroundColor: '$inputHoverBg',\n        },\n        '&::after': {\n          backgroundColor: '$primary',\n          opacity: 0.05,\n        },\n      },\n    },\n  },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n  inputCSS?: CSS;\n  inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n  onChange?: (d: Date[]) => void;\n  pickerCSS?: CSS;\n  pickerPlacement?: Placement;\n  showDatePresets?: boolean;\n  showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n  React.ElementRef<typeof StyledWrapper>,\n  DateTimePickerInputProps\n>(\n  (\n    {\n      inputCSS,\n      inputProps,\n      onChange,\n      pickerCSS,\n      pickerPlacement,\n      showDatePresets,\n      showTimePicker,\n      ...pickerProps\n    },\n    fowardedRef,\n  ) => {\n    const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n    const arrowRef = useRef(null);\n\n    const [inputValue, setInputValue] = useState<string>('');\n    const [selectedDates, onDatesChange] = useState<Date[]>([]);\n    const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n    const middleware = useMemo(\n      () => [\n        offset(10),\n        flip(),\n        shift(),\n        // arrowRef is passed to floating-ui which handles it correctly\n        arrow({ element: arrowRef }),\n      ],\n      [],\n    );\n\n    const { refs, floatingStyles, context } = useFloating({\n      open: isPickerOpen,\n      onOpenChange: setIsPickerOpen,\n      placement: pickerPlacement,\n      middleware,\n      whileElementsMounted: autoUpdate,\n    });\n\n    const click = useClick(context);\n    const dismiss = useDismiss(context);\n    const role = useRole(context);\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n    const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n    return (\n      <StyledWrapper ref={fowardedRef}>\n        <Input\n          startAdornment={<CalendarIcon />}\n          {...getReferenceProps()}\n          {...inputProps}\n          css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n          onChange={(evt) => {\n            const value = evt.currentTarget.value;\n            setInputValue(value);\n            try {\n              const newDates = (value as string)\n                .split(',')\n                .map((d) => parse(d.trim(), formatStr, new Date()));\n              onDatesChange(newDates);\n              if (onChange) onChange(newDates);\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            } catch (err) {\n              // empty\n            }\n          }}\n          ref={refs.setReference as Ref<InputHandle>}\n          type=\"datetime-local\"\n          value={inputValue}\n        />\n        <div\n          className=\"firefox-patch\"\n          onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n        />\n        {isPickerOpen && (\n          <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n            {/* refs.setFloating is a stable callback ref from floating-ui */}\n            <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n              <Card>\n                <DateTimePicker\n                  {...pickerProps}\n                  css={pickerCSS}\n                  onDatesChange={(d) => {\n                    onDatesChange(d);\n                    setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n                    if (onChange) onChange(d);\n                  }}\n                  onFastTravelClick={() => setIsPickerOpen(false)}\n                  onTimeButtonClick={() => setIsPickerOpen(false)}\n                  selectedDates={selectedDates}\n                  showDatePresets={showDatePresets}\n                  showTimePicker={showTimePicker}\n                />\n              </Card>\n              <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n            </div>\n          </FloatingFocusManager>\n        )}\n      </StyledWrapper>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/Dialog/Dialog.cjs

@@ -1,85 +1,74 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const DialogPrimitive = require("@radix-ui/react-dialog");
-const reactIcons = require("@radix-ui/react-icons");
-const React = require("react");
-const stitches_config = require("../../stitches.config.cjs");
-const Elevation = require("../Elevation/Elevation.cjs");
-const Overlay = require("../Overlay.cjs");
-const IconButton = require("../IconButton/IconButton.cjs");
-const Card = require("../Card/Card.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const DialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DialogPrimitive);
-const DialogOverlay = stitches_config.styled(DialogPrimitive__namespace.Overlay, Overlay.overlayStyles, {
-  position: "fixed",
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_stitches_config = require("../../stitches.config.cjs");
+const require_Elevation = require("../Elevation/Elevation.cjs");
+const require_Card = require("../Card/Card.cjs");
+const require_IconButton = require("../IconButton/IconButton.cjs");
+const require_Overlay = require("../Overlay.cjs");
+let _radix_ui_react_icons = require("@radix-ui/react-icons");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
+_radix_ui_react_dialog = require_runtime.__toESM(_radix_ui_react_dialog, 1);
+//#region components/Dialog/Dialog.tsx
+var DialogOverlay = require_stitches_config.styled(_radix_ui_react_dialog.Overlay, require_Overlay.overlayStyles, {
+	position: "fixed",
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
 });
 function Dialog({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props, children });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Root, {
+		...props,
+		children
+	});
 }
-const StyledContent = stitches_config.styled(DialogPrimitive__namespace.Content, Card.Card, {
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  minWidth: 200,
-  maxHeight: "85vh",
-  padding: "$4",
-  marginTop: "-5vh",
-  backgroundColor: "$dialogBackground",
-  boxShadow: "inset 0 0 0 1px $colors$deepBlue4",
-  borderRadius: "$3",
-  // animation: `${fadeIn} 125ms linear, ${moveDown} 125ms cubic-bezier(0.22, 1, 0.36, 1)`,
-  willChange: "transform",
-  overflow: "auto",
-  "&::before": {
-    boxShadow: "none"
-  },
-  "&:focus": {
-    outline: "none"
-  },
-  variants: {
-    elevation: Elevation.elevationVariants
-  },
-  defaultVariants: {
-    elevation: 5
-  }
+var StyledContent = require_stitches_config.styled(_radix_ui_react_dialog.Content, require_Card.Card, {
+	position: "fixed",
+	top: "50%",
+	left: "50%",
+	transform: "translate(-50%, -50%)",
+	minWidth: 200,
+	maxHeight: "85vh",
+	padding: "$4",
+	marginTop: "-5vh",
+	backgroundColor: "$dialogBackground",
+	boxShadow: "inset 0 0 0 1px $colors$deepBlue4",
+	borderRadius: "$3",
+	willChange: "transform",
+	overflow: "auto",
+	"&::before": { boxShadow: "none" },
+	"&:focus": { outline: "none" },
+	variants: { elevation: require_Elevation.elevationVariants },
+	defaultVariants: { elevation: 5 }
 });
-const StyledCloseButton = stitches_config.styled(DialogPrimitive__namespace.Close, {
-  position: "absolute",
-  top: "$2",
-  right: "$2",
-  cursor: "pointer"
+var StyledCloseButton = require_stitches_config.styled(_radix_ui_react_dialog.Close, {
+	position: "absolute",
+	top: "$2",
+	right: "$2",
+	cursor: "pointer"
 });
-const DialogCloseIconButton = React.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledCloseButton, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { ref: forwardedRef, css: { color: "$hiContrast" }, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross1Icon, {}) }) }));
-const DialogContent = React.forwardRef(({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledContent, { ...props, ref: forwardedRef, children: [
-  children,
-  /* @__PURE__ */ jsxRuntime.jsx(DialogCloseIconButton, {})
-] }));
-const DialogClosePrimitive = DialogPrimitive__namespace.Close;
-const DialogDescription = DialogPrimitive__namespace.Description;
-const DialogPortal = DialogPrimitive__namespace.Portal;
-const DialogTitle = DialogPrimitive__namespace.Title;
-const DialogTrigger = DialogPrimitive__namespace.Trigger;
+var DialogCloseIconButton = react.default.forwardRef((props, forwardedRef) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCloseButton, {
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+		ref: forwardedRef,
+		css: { color: "$hiContrast" },
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.Cross1Icon, {})
+	})
+}));
+var DialogContent = react.default.forwardRef(({ children, ...props }, forwardedRef) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContent, {
+	...props,
+	ref: forwardedRef,
+	children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogCloseIconButton, {})]
+}));
+var DialogClosePrimitive = _radix_ui_react_dialog.Close;
+var DialogDescription = _radix_ui_react_dialog.Description;
+var DialogPortal = _radix_ui_react_dialog.Portal;
+var DialogTitle = _radix_ui_react_dialog.Title;
+var DialogTrigger = _radix_ui_react_dialog.Trigger;
+//#endregion
 exports.Dialog = Dialog;
 exports.DialogCloseIconButton = DialogCloseIconButton;
 exports.DialogClosePrimitive = DialogClosePrimitive;
@@ -90,4 +79,5 @@ exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.StyledContent = StyledContent;
-//# sourceMappingURL=Dialog.cjs.map
+
+//# sourceMappingURL=Dialog.cjs.map

package/dist/components/Dialog/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","sources":["../../../components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport React, { ComponentProps } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { elevationVariants } from '../Elevation/Elevation';\nimport { IconButton } from '../IconButton';\nimport { overlayStyles } from '../Overlay';\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n  children: React.ReactNode;\n};\n\nexport const DialogOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {\n  position: 'fixed',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;\n}\n\nexport const StyledContent = styled(DialogPrimitive.Content, Card, {\n  position: 'fixed',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  minWidth: 200,\n  maxHeight: '85vh',\n  padding: '$4',\n  marginTop: '-5vh',\n  backgroundColor: '$dialogBackground',\n  boxShadow: 'inset 0 0 0 1px $colors$deepBlue4',\n  borderRadius: '$3',\n  // animation: `${fadeIn} 125ms linear, ${moveDown} 125ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  willChange: 'transform',\n  overflow: 'auto',\n\n  '&::before': {\n    boxShadow: 'none',\n  },\n\n  '&:focus': {\n    outline: 'none',\n  },\n\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: 5,\n  },\n});\n\nconst StyledCloseButton = styled(DialogPrimitive.Close, {\n  position: 'absolute',\n  top: '$2',\n  right: '$2',\n  cursor: 'pointer',\n});\n\ninterface DialogCloseButtonProps\n  extends VariantProps<typeof IconButton>,\n    ComponentProps<typeof IconButton> {}\nexport const DialogCloseIconButton = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  DialogCloseButtonProps\n>((props, forwardedRef) => (\n  <StyledCloseButton asChild>\n    <IconButton ref={forwardedRef} css={{ color: '$hiContrast' }} {...props}>\n      <Cross1Icon />\n    </IconButton>\n  </StyledCloseButton>\n));\n\ntype DialogContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;\ntype DialogContentProps = DialogContentPrimitiveProps &\n  VariantProps<typeof StyledContent> & { css?: CSS };\n\nexport const DialogContent = React.forwardRef<\n  React.ElementRef<typeof StyledContent>,\n  DialogContentProps\n>(({ children, ...props }, forwardedRef) => (\n  <StyledContent {...props} ref={forwardedRef}>\n    {children}\n    <DialogCloseIconButton />\n  </StyledContent>\n));\n\nexport const DialogClosePrimitive = DialogPrimitive.Close;\nexport const DialogDescription = DialogPrimitive.Description;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogTitle = DialogPrimitive.Title;\nexport const DialogTrigger = DialogPrimitive.Trigger;\n"],"names":["styled","DialogPrimitive","overlayStyles","Card","elevationVariants","jsx","IconButton","Cross1Icon","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,gBAAgBA,gBAAAA,OAAOC,2BAAgB,SAASC,QAAAA,eAAe;AAAA,EAC1E,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEM,SAAS,OAAO,EAAE,UAAU,GAAG,SAAsB;AAC1D,wCAAQD,2BAAgB,MAAhB,EAAsB,GAAG,OAAQ,UAAS;AACpD;AAEO,MAAM,gBAAgBD,gBAAAA,OAAOC,2BAAgB,SAASE,KAAAA,MAAM;AAAA,EACjE,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,cAAc;AAAA;AAAA,EAEd,YAAY;AAAA,EACZ,UAAU;AAAA,EAEV,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAGb,WAAW;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAGX,UAAU;AAAA,IACR,WAAWC,UAAAA;AAAAA,EAAA;AAAA,EAEb,iBAAiB;AAAA,IACf,WAAW;AAAA,EAAA;AAEf,CAAC;AAED,MAAM,oBAAoBJ,gBAAAA,OAAOC,2BAAgB,OAAO;AAAA,EACtD,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AACV,CAAC;AAKM,MAAM,wBAAwB,MAAM,WAGzC,CAAC,OAAO,iBACRI,2BAAAA,IAAC,mBAAA,EAAkB,SAAO,MACxB,UAAAA,2BAAAA,IAACC,WAAAA,YAAA,EAAW,KAAK,cAAc,KAAK,EAAE,OAAO,cAAA,GAAkB,GAAG,OAChE,UAAAD,2BAAAA,IAACE,WAAAA,YAAA,CAAA,CAAW,EAAA,CACd,EAAA,CACF,CACD;AAMM,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,iBACzBC,2BAAAA,KAAC,eAAA,EAAe,GAAG,OAAO,KAAK,cAC5B,UAAA;AAAA,EAAA;AAAA,iCACA,uBAAA,CAAA,CAAsB;AAAA,GACzB,CACD;AAEM,MAAM,uBAAuBP,2BAAgB;AAC7C,MAAM,oBAAoBA,2BAAgB;AAC1C,MAAM,eAAeA,2BAAgB;AACrC,MAAM,cAAcA,2BAAgB;AACpC,MAAM,gBAAgBA,2BAAgB;;;;;;;;;;;"}
+{"version":3,"file":"Dialog.cjs","names":[],"sources":["../../../components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport React, { ComponentProps } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { elevationVariants } from '../Elevation/Elevation';\nimport { IconButton } from '../IconButton';\nimport { overlayStyles } from '../Overlay';\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n  children: React.ReactNode;\n};\n\nexport const DialogOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {\n  position: 'fixed',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;\n}\n\nexport const StyledContent = styled(DialogPrimitive.Content, Card, {\n  position: 'fixed',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  minWidth: 200,\n  maxHeight: '85vh',\n  padding: '$4',\n  marginTop: '-5vh',\n  backgroundColor: '$dialogBackground',\n  boxShadow: 'inset 0 0 0 1px $colors$deepBlue4',\n  borderRadius: '$3',\n  // animation: `${fadeIn} 125ms linear, ${moveDown} 125ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  willChange: 'transform',\n  overflow: 'auto',\n\n  '&::before': {\n    boxShadow: 'none',\n  },\n\n  '&:focus': {\n    outline: 'none',\n  },\n\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: 5,\n  },\n});\n\nconst StyledCloseButton = styled(DialogPrimitive.Close, {\n  position: 'absolute',\n  top: '$2',\n  right: '$2',\n  cursor: 'pointer',\n});\n\ninterface DialogCloseButtonProps\n  extends VariantProps<typeof IconButton>,\n    ComponentProps<typeof IconButton> {}\nexport const DialogCloseIconButton = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  DialogCloseButtonProps\n>((props, forwardedRef) => (\n  <StyledCloseButton asChild>\n    <IconButton ref={forwardedRef} css={{ color: '$hiContrast' }} {...props}>\n      <Cross1Icon />\n    </IconButton>\n  </StyledCloseButton>\n));\n\ntype DialogContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;\ntype DialogContentProps = DialogContentPrimitiveProps &\n  VariantProps<typeof StyledContent> & { css?: CSS };\n\nexport const DialogContent = React.forwardRef<\n  React.ElementRef<typeof StyledContent>,\n  DialogContentProps\n>(({ children, ...props }, forwardedRef) => (\n  <StyledContent {...props} ref={forwardedRef}>\n    {children}\n    <DialogCloseIconButton />\n  </StyledContent>\n));\n\nexport const DialogClosePrimitive = DialogPrimitive.Close;\nexport const DialogDescription = DialogPrimitive.Description;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogTitle = DialogPrimitive.Title;\nexport const DialogTrigger = DialogPrimitive.Trigger;\n"],"mappings":";;;;;;;;;;;;;AAcA,IAAa,gBAAgB,wBAAA,OAAO,uBAAgB,SAAS,gBAAA,eAAe;CAC1E,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CACP,CAAC;AAEF,SAAgB,OAAO,EAAE,UAAU,GAAG,SAAsB;AAC1D,QAAO,iBAAA,GAAA,kBAAA,KAAC,uBAAgB,MAAjB;EAAsB,GAAI;EAAQ;EAAgC,CAAA;;AAG3E,IAAa,gBAAgB,wBAAA,OAAO,uBAAgB,SAAS,aAAA,MAAM;CACjE,UAAU;CACV,KAAK;CACL,MAAM;CACN,WAAW;CACX,UAAU;CACV,WAAW;CACX,SAAS;CACT,WAAW;CACX,iBAAiB;CACjB,WAAW;CACX,cAAc;CAEd,YAAY;CACZ,UAAU;CAEV,aAAa,EACX,WAAW,QACZ;CAED,WAAW,EACT,SAAS,QACV;CAED,UAAU,EACR,WAAW,kBAAA,mBACZ;CACD,iBAAiB,EACf,WAAW,GACZ;CACF,CAAC;AAEF,IAAM,oBAAoB,wBAAA,OAAO,uBAAgB,OAAO;CACtD,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACT,CAAC;AAKF,IAAa,wBAAwB,MAAA,QAAM,YAGxC,OAAO,iBACR,iBAAA,GAAA,kBAAA,KAAC,mBAAD;CAAmB,SAAA;WACjB,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;EAAY,KAAK;EAAc,KAAK,EAAE,OAAO,eAAe;EAAE,GAAI;YAChE,iBAAA,GAAA,kBAAA,KAAC,sBAAA,YAAD,EAAc,CAAA;EACH,CAAA;CACK,CAAA,CACpB;AAMF,IAAa,gBAAgB,MAAA,QAAM,YAGhC,EAAE,UAAU,GAAG,SAAS,iBACzB,iBAAA,GAAA,kBAAA,MAAC,eAAD;CAAe,GAAI;CAAO,KAAK;WAA/B,CACG,UACD,iBAAA,GAAA,kBAAA,KAAC,uBAAD,EAAyB,CAAA,CACX;GAChB;AAEF,IAAa,uBAAuB,uBAAgB;AACpD,IAAa,oBAAoB,uBAAgB;AACjD,IAAa,eAAe,uBAAgB;AAC5C,IAAa,cAAc,uBAAgB;AAC3C,IAAa,gBAAgB,uBAAgB"}