@panneau/fields 4.1.0 → 5.0.0-alpha.0

package/dist/repeater/RepeaterField.js

@@ -0,0 +1,220 @@
+import { cx } from "../shared/cx.js";
+import { getFieldProps, getRuleNumber } from "../shared/entry.js";
+import { messages } from "../shared/messages.js";
+import RepeaterField_module_default from "./RepeaterField.module.js";
+import { NestedField } from "../shared/DefinitionField.js";
+import { c } from "react/compiler-runtime";
+import { Button, Fieldset, IconButton, Menu, MenuItem, MenuTrigger, usePanneauIntl } from "@panneau/ui";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
+//#region src/repeater/RepeaterField.tsx
+function defaults(fields) {
+	return Object.fromEntries(fields.flatMap((field) => field.default !== void 0 ? [[field.name, field.default]] : []));
+}
+/**
+* A list of items, each with the same fields, or typed blocks with the fields of their type. Items
+* can be added, moved and removed. Each field renders at the path `<list>.<index>.<field>`. An
+* empty list is `null`.
+*/
+function RepeaterField({ fields = [], types, path, name, value, onChange, onBlur, label, description, errors, disabled, readOnly, required, min = 0, max, className, labelClassName, descriptionClassName, errorsClassName, itemClassName }) {
+	const intl = usePanneauIntl();
+	const id = useId();
+	const base = path ?? name ?? "";
+	const items = value ?? [];
+	const editable = disabled !== true && readOnly !== true;
+	const canAdd = editable && (max === void 0 || items.length < max);
+	const canRemove = editable && items.length > min;
+	const set = (next) => onChange?.(next.length > 0 ? next : null);
+	const move = (from, to) => {
+		const next_0 = [...items];
+		const [moved] = next_0.splice(from, 1);
+		if (moved !== void 0) {
+			next_0.splice(to, 0, moved);
+			set(next_0);
+		}
+	};
+	const add = (type) => set([...items, type !== void 0 ? {
+		type: type.id,
+		...defaults(type.fields)
+	} : defaults(fields)]);
+	return /* @__PURE__ */ jsxs(Fieldset, {
+		legend: label,
+		description,
+		errors,
+		isRequired: required,
+		className,
+		legendClassName: labelClassName,
+		descriptionClassName,
+		errorsClassName,
+		children: [items.length > 0 ? /* @__PURE__ */ jsx("ol", {
+			className: RepeaterField_module_default.items,
+			children: items.map((item, index) => {
+				const type_0 = types !== void 0 ? types.find((candidate) => candidate.id === item.type) : void 0;
+				const itemFields = types !== void 0 ? type_0?.fields ?? [] : fields;
+				const number = index + 1;
+				const titleId = `${id}-${index}`;
+				return /* @__PURE__ */ jsxs("li", {
+					className: cx(RepeaterField_module_default.item, itemClassName),
+					"aria-labelledby": titleId,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: RepeaterField_module_default.header,
+						children: [/* @__PURE__ */ jsxs("span", {
+							id: titleId,
+							className: RepeaterField_module_default.title,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: RepeaterField_module_default.index,
+								children: number
+							}), type_0?.label ?? (typeof item.type === "string" ? item.type : intl.formatMessage(messages.item, { index: number }))]
+						}), editable ? /* @__PURE__ */ jsxs("span", {
+							className: RepeaterField_module_default.tools,
+							children: [
+								/* @__PURE__ */ jsx(IconButton, {
+									icon: ArrowUp,
+									size: "sm",
+									label: intl.formatMessage(messages.moveUp, { index: number }),
+									isDisabled: index === 0,
+									onPress: () => move(index, index - 1)
+								}),
+								/* @__PURE__ */ jsx(IconButton, {
+									icon: ArrowDown,
+									size: "sm",
+									label: intl.formatMessage(messages.moveDown, { index: number }),
+									isDisabled: index === items.length - 1,
+									onPress: () => move(index, index + 1)
+								}),
+								/* @__PURE__ */ jsx(IconButton, {
+									icon: Trash2,
+									size: "sm",
+									label: intl.formatMessage(messages.removeItem, { index: number }),
+									isDisabled: !canRemove,
+									onPress: () => set(items.filter((_, i) => i !== index))
+								})
+							]
+						}) : null]
+					}), /* @__PURE__ */ jsx("div", {
+						className: RepeaterField_module_default.body,
+						children: itemFields.map((field) => /* @__PURE__ */ jsx(NestedField, {
+							field,
+							path: `${base}.${index}.${field.name}`,
+							value: item[field.name],
+							onChange: (next_1) => set(items.map((current, i_0) => i_0 === index ? {
+								...current,
+								[field.name]: next_1
+							} : current)),
+							...onBlur !== void 0 ? { onBlur } : {},
+							parentValue: item,
+							...disabled !== void 0 ? { disabled } : {},
+							...readOnly !== void 0 ? { readOnly } : {}
+						}, field.name))
+					})]
+				}, index);
+			})
+		}) : /* @__PURE__ */ jsx("p", {
+			className: RepeaterField_module_default.empty,
+			children: intl.formatMessage(messages.noItems)
+		}), editable ? /* @__PURE__ */ jsx("div", {
+			className: RepeaterField_module_default.footer,
+			children: types !== void 0 ? /* @__PURE__ */ jsxs(MenuTrigger, { children: [/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				icon: Plus,
+				isDisabled: !canAdd,
+				children: intl.formatMessage(messages.add)
+			}), /* @__PURE__ */ jsx(Menu, {
+				"aria-label": intl.formatMessage(messages.add),
+				onAction: (key) => add(types.find((type_1) => type_1.id === key)),
+				children: types.map((type_2) => /* @__PURE__ */ jsx(MenuItem, {
+					id: type_2.id,
+					children: type_2.label
+				}, type_2.id))
+			})] }) : /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				icon: Plus,
+				isDisabled: !canAdd,
+				onPress: () => add(),
+				children: intl.formatMessage(messages.add)
+			})
+		}) : null]
+	});
+}
+/**
+* The `repeater` type: `fields`, or `types` for typed blocks, with `min` and `max` items from its
+* rules.
+*/
+function RepeaterFieldEntry(props) {
+	const $ = c(23);
+	const { field, value } = props;
+	let t0;
+	if ($[0] !== field) {
+		t0 = getRuleNumber(field, "min");
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	const min = t0;
+	let t1;
+	if ($[2] !== field) {
+		t1 = getRuleNumber(field, "max");
+		$[2] = field;
+		$[3] = t1;
+	} else t1 = $[3];
+	const max = t1;
+	let t2;
+	if ($[4] !== props) {
+		t2 = getFieldProps(props);
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== field.fields || $[7] !== field.types) {
+		t3 = field.types !== void 0 ? { types: field.types } : { fields: field.fields ?? [] };
+		$[6] = field.fields;
+		$[7] = field.types;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== value) {
+		t4 = Array.isArray(value) ? value.filter(_temp) : null;
+		$[9] = value;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== min) {
+		t5 = min !== void 0 ? { min } : {};
+		$[11] = min;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== max) {
+		t6 = max !== void 0 ? { max } : {};
+		$[13] = max;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== props.onChange || $[16] !== props.path || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5 || $[21] !== t6) {
+		t7 = /* @__PURE__ */ jsx(RepeaterField, {
+			...t2,
+			path: props.path,
+			...t3,
+			value: t4,
+			onChange: props.onChange,
+			...t5,
+			...t6
+		});
+		$[15] = props.onChange;
+		$[16] = props.path;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+	} else t7 = $[22];
+	return t7;
+}
+function _temp(item) {
+	return item !== null && typeof item === "object" && !Array.isArray(item);
+}
+//#endregion
+export { RepeaterField, RepeaterFieldEntry };
+
+//# sourceMappingURL=RepeaterField.js.map

package/dist/repeater/RepeaterField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeaterField.js","names":["next","type","i","styles","_c"],"sources":["../../src/repeater/RepeaterField.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, Plus, Trash2 } from 'lucide-react';\nimport { useId } from 'react';\n\nimport type { BlockType, Field } from '@panneau/protocol';\nimport {\n    Button,\n    Fieldset,\n    IconButton,\n    Menu,\n    MenuItem,\n    MenuTrigger,\n    usePanneauIntl,\n} from '@panneau/ui';\n\nimport { NestedField } from '../shared/DefinitionField';\nimport { cx } from '../shared/cx';\nimport { getFieldProps, getRuleNumber } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\nimport styles from './RepeaterField.module.css';\n\n/** An item of a repeater. Typed blocks have their type in `type`. */\nexport type RepeaterItem = Record<string, unknown>;\n\nexport interface RepeaterFieldProps extends FieldProps<RepeaterItem[]> {\n    /** The fields of each item. */\n    fields?: readonly Field[];\n    /** Typed blocks: each item has a `type`, and the fields of that type. */\n    types?: readonly BlockType[];\n    /** Dot path of the list, the prefix of its fields' paths (`blocks.2.body`). Defaults to `name`. */\n    path?: string;\n    /** Fewest items: items can't be removed below it. */\n    min?: number;\n    /** Most items: no item can be added above it. */\n    max?: number;\n    itemClassName?: string;\n}\n\nfunction defaults(fields: readonly Field[]): RepeaterItem {\n    return Object.fromEntries(\n        fields.flatMap((field) =>\n            field.default !== undefined ? [[field.name, field.default]] : [],\n        ),\n    );\n}\n\n/**\n * A list of items, each with the same fields, or typed blocks with the fields of their type. Items\n * can be added, moved and removed. Each field renders at the path `<list>.<index>.<field>`. An\n * empty list is `null`.\n */\nexport function RepeaterField({\n    fields = [],\n    types,\n    path,\n    name,\n    value,\n    onChange,\n    onBlur,\n    label,\n    description,\n    errors,\n    disabled,\n    readOnly,\n    required,\n    min = 0,\n    max,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    itemClassName,\n}: RepeaterFieldProps) {\n    const intl = usePanneauIntl();\n    const id = useId();\n    const base = path ?? name ?? '';\n    const items = value ?? [];\n    const editable = disabled !== true && readOnly !== true;\n    const canAdd = editable && (max === undefined || items.length < max);\n    const canRemove = editable && items.length > min;\n    const set = (next: RepeaterItem[]) => onChange?.(next.length > 0 ? next : null);\n    const move = (from: number, to: number) => {\n        const next = [...items];\n        const [moved] = next.splice(from, 1);\n        if (moved !== undefined) {\n            next.splice(to, 0, moved);\n            set(next);\n        }\n    };\n    const add = (type?: BlockType) =>\n        set([\n            ...items,\n            type !== undefined ? { type: type.id, ...defaults(type.fields) } : defaults(fields),\n        ]);\n\n    return (\n        <Fieldset\n            legend={label}\n            description={description}\n            errors={errors}\n            isRequired={required}\n            className={className}\n            legendClassName={labelClassName}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            {items.length > 0 ? (\n                <ol className={styles.items}>\n                    {items.map((item, index) => {\n                        const type =\n                            types !== undefined\n                                ? types.find((candidate) => candidate.id === item.type)\n                                : undefined;\n                        const itemFields = types !== undefined ? (type?.fields ?? []) : fields;\n                        const number = index + 1;\n                        const titleId = `${id}-${index}`;\n                        return (\n                            <li\n                                key={index}\n                                className={cx(styles.item, itemClassName)}\n                                aria-labelledby={titleId}\n                            >\n                                <div className={styles.header}>\n                                    <span id={titleId} className={styles.title}>\n                                        <span className={styles.index}>{number}</span>\n                                        {type?.label ??\n                                            (typeof item.type === 'string'\n                                                ? item.type\n                                                : intl.formatMessage(messages.item, {\n                                                      index: number,\n                                                  }))}\n                                    </span>\n                                    {editable ? (\n                                        <span className={styles.tools}>\n                                            <IconButton\n                                                icon={ArrowUp}\n                                                size=\"sm\"\n                                                label={intl.formatMessage(messages.moveUp, {\n                                                    index: number,\n                                                })}\n                                                isDisabled={index === 0}\n                                                onPress={() => move(index, index - 1)}\n                                            />\n                                            <IconButton\n                                                icon={ArrowDown}\n                                                size=\"sm\"\n                                                label={intl.formatMessage(messages.moveDown, {\n                                                    index: number,\n                                                })}\n                                                isDisabled={index === items.length - 1}\n                                                onPress={() => move(index, index + 1)}\n                                            />\n                                            <IconButton\n                                                icon={Trash2}\n                                                size=\"sm\"\n                                                label={intl.formatMessage(messages.removeItem, {\n                                                    index: number,\n                                                })}\n                                                isDisabled={!canRemove}\n                                                onPress={() =>\n                                                    set(items.filter((_, i) => i !== index))\n                                                }\n                                            />\n                                        </span>\n                                    ) : null}\n                                </div>\n                                <div className={styles.body}>\n                                    {itemFields.map((field) => (\n                                        <NestedField\n                                            key={field.name}\n                                            field={field}\n                                            path={`${base}.${index}.${field.name}`}\n                                            value={item[field.name]}\n                                            onChange={(next) =>\n                                                set(\n                                                    items.map((current, i) =>\n                                                        i === index\n                                                            ? { ...current, [field.name]: next }\n                                                            : current,\n                                                    ),\n                                                )\n                                            }\n                                            {...(onBlur !== undefined ? { onBlur } : {})}\n                                            parentValue={item}\n                                            {...(disabled !== undefined ? { disabled } : {})}\n                                            {...(readOnly !== undefined ? { readOnly } : {})}\n                                        />\n                                    ))}\n                                </div>\n                            </li>\n                        );\n                    })}\n                </ol>\n            ) : (\n                <p className={styles.empty}>{intl.formatMessage(messages.noItems)}</p>\n            )}\n            {editable ? (\n                <div className={styles.footer}>\n                    {types !== undefined ? (\n                        <MenuTrigger>\n                            <Button size=\"sm\" icon={Plus} isDisabled={!canAdd}>\n                                {intl.formatMessage(messages.add)}\n                            </Button>\n                            <Menu\n                                aria-label={intl.formatMessage(messages.add)}\n                                onAction={(key) => add(types.find((type) => type.id === key))}\n                            >\n                                {types.map((type) => (\n                                    <MenuItem key={type.id} id={type.id}>\n                                        {type.label}\n                                    </MenuItem>\n                                ))}\n                            </Menu>\n                        </MenuTrigger>\n                    ) : (\n                        <Button size=\"sm\" icon={Plus} isDisabled={!canAdd} onPress={() => add()}>\n                            {intl.formatMessage(messages.add)}\n                        </Button>\n                    )}\n                </div>\n            ) : null}\n        </Fieldset>\n    );\n}\n\n/**\n * The `repeater` type: `fields`, or `types` for typed blocks, with `min` and `max` items from its\n * rules.\n */\nexport function RepeaterFieldEntry(props: FieldEntryProps) {\n    const { field, value } = props;\n    const min = getRuleNumber(field, 'min');\n    const max = getRuleNumber(field, 'max');\n    return (\n        <RepeaterField\n            {...getFieldProps(props)}\n            path={props.path}\n            {...(field.types !== undefined\n                ? { types: field.types }\n                : { fields: field.fields ?? [] })}\n            value={\n                Array.isArray(value)\n                    ? value.filter(\n                          (item): item is RepeaterItem =>\n                              item !== null && typeof item === 'object' && !Array.isArray(item),\n                      )\n                    : null\n            }\n            onChange={props.onChange}\n            {...(min !== undefined ? { min } : {})}\n            {...(max !== undefined ? { max } : {})}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/repeater/RepeaterField.module.js

@@ -0,0 +1,26 @@
+import "./RepeaterField.css";
+//#region src/repeater/RepeaterField.module.css
+var items = "panneau-items-B5uTq4";
+var item = "panneau-item-cNAgol";
+var header = "panneau-header-QLqgvh";
+var title = "panneau-title-0eDHTu";
+var index = "panneau-index-IrOBUU";
+var tools = "panneau-tools-zbGiq2";
+var body = "panneau-body-iQtLK9";
+var empty = "panneau-empty-MST5Cj";
+var footer = "panneau-footer-5jeHXH";
+var RepeaterField_module_default = {
+	items,
+	item,
+	header,
+	title,
+	index,
+	tools,
+	body,
+	empty,
+	footer
+};
+//#endregion
+export { body, RepeaterField_module_default as default, empty, footer, header, index, item, items, title, tools };
+
+//# sourceMappingURL=RepeaterField.module.js.map

package/dist/repeater/RepeaterField.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeaterField.module.js","names":[],"sources":["../../src/repeater/RepeaterField.module.css"],"sourcesContent":[".items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.item {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-md);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height);\n    padding: var(--panneau-space-1) var(--panneau-space-1) var(--panneau-space-1)\n        var(--panneau-space-3);\n    background-color: var(--panneau-color-surface-sunken);\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-start-start-radius: inherit;\n    border-start-end-radius: inherit;\n}\n\n.title {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.index {\n    margin-inline-end: var(--panneau-space-2);\n    font-variant-numeric: tabular-nums;\n    color: var(--panneau-color-text-muted);\n}\n\n.tools {\n    display: flex;\n    flex: 0 0 auto;\n    gap: var(--panneau-space-1);\n}\n\n.body {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-4);\n    padding: var(--panneau-space-4);\n}\n\n.empty {\n    padding: var(--panneau-space-3);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n    text-align: center;\n    border: var(--panneau-border-width) dashed var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-md);\n}\n\n.footer {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n}\n\n@media (max-width: 30rem) {\n    .body {\n        padding: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}

package/dist/repeater/index.d.ts

@@ -0,0 +1,2 @@
+export { RepeaterField, RepeaterFieldEntry, type RepeaterFieldProps, type RepeaterItem, } from './RepeaterField';
+//# sourceMappingURL=index.d.ts.map

package/dist/repeater/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/repeater/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,aAAa,EACb,kBAAkB,EAClB,KAAK,kBAAkB,EACvB,KAAK,YAAY,GACpB,MAAM,iBAAiB,CAAC"}

package/dist/repeater/index.js

@@ -0,0 +1 @@
+export { RepeaterField, RepeaterFieldEntry } from "./RepeaterField.js";

package/dist/select/SelectField.css

@@ -0,0 +1,5 @@
+.panneau-checkboxes-To0J7N {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+}

package/dist/select/SelectField.d.ts

@@ -0,0 +1,38 @@
+import type { Option } from '@panneau/protocol';
+import { type OptionValue } from '@panneau/ui';
+import type { FieldEntryProps, FieldProps } from '../shared/types';
+export type { OptionValue };
+/** Props of both single and multiple select fields. */
+export interface SelectFieldBaseProps extends Omit<FieldProps<never>, 'value' | 'onChange'> {
+    /** The choices. Same shape as the protocol's `Option`. */
+    options: readonly Option[];
+    placeholder?: string;
+    controlClassName?: string;
+}
+export interface SingleSelectFieldProps extends SelectFieldBaseProps {
+    multiple?: false;
+    value?: OptionValue | null;
+    onChange?: (value: OptionValue | null) => void;
+    /** `select` (default): a dropdown. `radios`: every choice visible. */
+    widget?: 'select' | 'radios';
+}
+export interface MultipleSelectFieldProps extends SelectFieldBaseProps {
+    multiple: true;
+    value?: readonly OptionValue[] | null;
+    /** Called with the selected values, in the order of the options. An empty list is `null`. */
+    onChange?: (value: OptionValue[] | null) => void;
+    /** `select` (default): a dropdown. `checkboxes`: every choice visible. */
+    widget?: 'select' | 'checkboxes';
+}
+export type SelectFieldProps = SingleSelectFieldProps | MultipleSelectFieldProps;
+/**
+ * A choice among options, or several with `multiple`, as a dropdown or as radios and checkboxes.
+ * Values keep their type (strings, numbers, booleans).
+ */
+export declare function SelectField(props: SelectFieldProps): import("react").JSX.Element;
+/**
+ * The `select` type: `options`, `multiple`, and setting `widget` (`radios` for a single choice,
+ * `checkboxes` for several).
+ */
+export declare function SelectFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
+//# sourceMappingURL=SelectField.d.ts.map

package/dist/select/SelectField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../src/select/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAsB,KAAK,WAAW,EAAsB,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGnE,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,uDAAuD;AACvD,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACvF,0DAA0D;IAC1D,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,sEAAsE;IACtE,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAChC;AAED,MAAM,WAAW,wBAAyB,SAAQ,oBAAoB;IAClE,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,WAAW,EAAE,GAAG,IAAI,CAAC;IACtC,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,0EAA0E;IAC1E,MAAM,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;CACpC;AAED,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;AAEjF;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAkIlD;AAMD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,+BA0BtD"}