@ultraviolet/ui 3.10.1 → 3.11.0

package/dist/components/compositions/Navigation/NavigationContent.js

@@ -0,0 +1,104 @@
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../Stack/index.js";
+import { useNavigation } from "./NavigationProvider.js";
+import { navigation, navigationContainer, navigationContent, navigationContentContainer, navigationContentContainerCollapsed, navigationSlider } from "./styles.css.js";
+import { Footer } from "./Footer.js";
+import { Header } from "./Header.js";
+import { widthNavigationContainer } from "./variables.css.js";
+import { useEffect, useRef } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
+
+//#region src/components/compositions/Navigation/NavigationContent.tsx
+const NavigationContent = ({ children, logo, onWidthResize, className, "data-testid": dataTestId, id, onToggleExpand }) => {
+	const context = useNavigation();
+	if (!context) throw new Error("Navigation should be inside NavigationProvider to use it properly.");
+	const { setWidth, width, expanded, toggleExpand, animation, navigationRef, allowNavigationResize, shouldAnimate } = context;
+	const sliderRef = useRef(null);
+	const contentRef = useRef(null);
+	useEffect(() => {
+		let prevX;
+		let navRect;
+		let shouldCollapseOnMouseUp = false;
+		let shouldExpandOnMouseUp = false;
+		const mouseMove = (event) => {
+			if (prevX !== void 0) {
+				var _navRect$width;
+				const newWidth = ((_navRect$width = navRect === null || navRect === void 0 ? void 0 : navRect.width) !== null && _navRect$width !== void 0 ? _navRect$width : 0) + (event.clientX - prevX);
+				if (navigationRef.current && expanded) navigationRef.current.style.width = `${newWidth}px`;
+				if (newWidth <= 220) shouldCollapseOnMouseUp = true;
+				else shouldCollapseOnMouseUp = false;
+				if (newWidth >= 67 && !expanded) shouldExpandOnMouseUp = true;
+				else shouldExpandOnMouseUp = false;
+			}
+		};
+		const mousedown = (event) => {
+			var _navigationRef$curren;
+			prevX = event.clientX;
+			navRect = (_navigationRef$curren = navigationRef.current) === null || _navigationRef$curren === void 0 ? void 0 : _navigationRef$curren.getBoundingClientRect();
+			const mouseup = () => {
+				if (shouldCollapseOnMouseUp || shouldExpandOnMouseUp) {
+					toggleExpand();
+					onToggleExpand === null || onToggleExpand === void 0 || onToggleExpand(!expanded);
+				}
+				if (navigationRef.current) {
+					if (!(shouldCollapseOnMouseUp || shouldExpandOnMouseUp)) {
+						onWidthResize === null || onWidthResize === void 0 || onWidthResize(navigationRef.current.offsetWidth);
+						setWidth === null || setWidth === void 0 || setWidth(navigationRef.current.offsetWidth);
+					}
+					if (!expanded) navigationRef.current.style.width = "";
+				}
+				document.removeEventListener("mousemove", mouseMove);
+				window.removeEventListener("mouseup", mouseup);
+			};
+			document.addEventListener("mousemove", mouseMove);
+			window.addEventListener("mouseup", mouseup);
+		};
+		const sliderRefCurrent = sliderRef.current;
+		sliderRefCurrent === null || sliderRefCurrent === void 0 || sliderRefCurrent.addEventListener("mousedown", mousedown);
+		return () => {
+			sliderRefCurrent === null || sliderRefCurrent === void 0 || sliderRefCurrent.removeEventListener("mousedown", mousedown);
+		};
+	}, [
+		expanded,
+		navigationRef,
+		onToggleExpand,
+		onWidthResize,
+		setWidth,
+		toggleExpand
+	]);
+	return /* @__PURE__ */ jsxs("nav", {
+		className: cn(className, navigation),
+		"data-testid": dataTestId,
+		id,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: navigationContainer({
+				animation: shouldAnimate ? animation : void 0,
+				expanded
+			}),
+			ref: navigationRef,
+			style: assignInlineVars({ [widthNavigationContainer]: `${width}px` }),
+			children: [logo ? /* @__PURE__ */ jsx(Header, { logo }) : null, /* @__PURE__ */ jsxs("div", {
+				className: cn(navigationContentContainer, expanded ? "" : navigationContentContainerCollapsed),
+				children: [/* @__PURE__ */ jsx(Stack, {
+					className: navigationContent,
+					gap: .25,
+					ref: contentRef,
+					children
+				}), allowNavigationResize ? /* @__PURE__ */ jsx(Footer, {
+					contentRef,
+					onToggleExpand
+				}) : null]
+			})]
+		}), allowNavigationResize ? /* @__PURE__ */ jsx("div", {
+			className: navigationSlider,
+			"data-testid": "slider",
+			ref: sliderRef
+		}) : null]
+	});
+};
+
+//#endregion
+export { NavigationContent };

package/dist/components/compositions/Navigation/NavigationProvider.d.ts

@@ -0,0 +1,94 @@
+import type { Dispatch, ReactNode, RefObject } from 'react';
+import NavigationLocales from './locales/en';
+import type { PinUnPinType } from './types';
+type Item = {
+    label: string;
+    active?: boolean;
+    onToggle?: (toggle: boolean) => void;
+    onClickPinUnpin?: (parameters: PinUnPinType) => void;
+};
+type Items = Record<string, Item>;
+type AnimationType = 'simple' | 'complex';
+type ContextProps = {
+    expanded: boolean;
+    toggleExpand: (toggle?: boolean) => void;
+    animation: boolean | 'expand' | 'collapse';
+    pinnedFeature?: boolean;
+    onClickPinUnpin?: (pinned: string[]) => void;
+    pinItem: (item: string) => string[];
+    unpinItem: (item: string) => string[];
+    pinnedItems: string[];
+    pinLimit: number;
+    navigationRef: RefObject<HTMLDivElement | null>;
+    locales: Record<keyof typeof NavigationLocales, string>;
+    width: number;
+    setWidth: (width: number) => void;
+    /**
+     * This function will reorder the pinned items based on the initial index and
+     * the end index.
+     */
+    reorderItems: (
+    /**
+     * The initial index of the item
+     */
+    initialIndex: number, 
+    /**
+     * The end index of the item
+     */
+    endIndex: number) => string[];
+    items: Items;
+    registerItem: Dispatch<Items>;
+    setPinnedItems: (value: string[]) => void;
+    allowNavigationResize: boolean;
+    setAllowNavigationResize: (value: boolean) => void;
+    shouldAnimate?: boolean;
+    animationType?: AnimationType;
+    showHide?: 'show' | 'hide';
+};
+export declare const NavigationContext: import("react").Context<ContextProps>;
+export declare const useNavigation: () => ContextProps;
+type NavigationProviderProps = {
+    children: ReactNode;
+    initialWidth?: number;
+    /**
+     * This enable / disable the pinned feature of the navigation
+     * Pinned allows the use to pin (or favorite) some items in the navigation
+     */
+    pinnedFeature?: boolean;
+    /**
+     * This define how many items can be pinned at the same time.
+     * If you want to disable the limit just set `Infinity` to this prop
+     */
+    pinLimit?: number;
+    /**
+     * The initial pinned items. This should be an array of labels you've set on
+     * your `<Navigation.Item>`
+     */
+    initialPinned?: string[];
+    /**
+     * The initial expanded state of the navigation. If set to true the
+     * navigation will be expanded by default otherwise it will be collapsed
+     */
+    initialExpanded?: boolean;
+    locales?: Record<keyof typeof NavigationLocales, string>;
+    /**
+     * You can get the expanded state of the navigation with this function
+     */
+    onExpandChange?: (expanded: boolean) => void;
+    /**
+     * This boolean will define if the navigation can be resized or not.
+     */
+    initialAllowNavigationResize?: boolean;
+    /**
+     * Enable or disable the animation of the navigation
+     */
+    animation?: boolean;
+    /**
+     * type of animation
+     */
+    animationType?: AnimationType;
+    showHide?: 'show' | 'hide';
+};
+export declare const NavigationProvider: ({ children, pinnedFeature, initialPinned, initialExpanded, locales, pinLimit, onExpandChange, initialWidth, initialAllowNavigationResize, animation: shouldAnimate, animationType, showHide, }: NavigationProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NavigationProvider.d.ts.map

package/dist/components/compositions/Navigation/NavigationProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/Navigation/NavigationProvider.tsx"],"names":[],"mappings":"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"}

package/dist/components/compositions/Navigation/NavigationProvider.js

@@ -0,0 +1,121 @@
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
+import en_default from "./locales/en.js";
+import { createContext, useCallback, useContext, useMemo, useReducer, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/compositions/Navigation/NavigationProvider.tsx
+const NavigationContext = createContext({
+	allowNavigationResize: true,
+	animation: false,
+	animationType: "simple",
+	expanded: true,
+	items: {},
+	locales: en_default,
+	navigationRef: { current: null },
+	pinItem: () => [],
+	pinLimit: 7,
+	pinnedItems: [],
+	registerItem: () => {},
+	reorderItems: () => [],
+	setAllowNavigationResize: () => {},
+	setPinnedItems: () => {},
+	setWidth: () => {},
+	shouldAnimate: true,
+	toggleExpand: () => {},
+	unpinItem: () => [],
+	width: 280
+});
+const useNavigation = () => useContext(NavigationContext);
+const NavigationProvider = ({ children, pinnedFeature = false, initialPinned, initialExpanded = true, locales = en_default, pinLimit = 7, onExpandChange, initialWidth = 280, initialAllowNavigationResize = true, animation: shouldAnimate = true, animationType, showHide }) => {
+	const [expanded, setExpanded] = useState(initialExpanded);
+	const [pinnedItems, setPinnedItems] = useState(initialPinned !== null && initialPinned !== void 0 ? initialPinned : []);
+	const [animation, setAnimation] = useState(false);
+	const [width, setWidth] = useState(initialWidth);
+	const [allowNavigationResize, setAllowNavigationResize] = useState(initialAllowNavigationResize);
+	const [items, registerItem] = useReducer((oldState, newState) => _objectSpread2(_objectSpread2({}, oldState), newState), {});
+	const navigationRef = useRef(null);
+	const toggleExpand = useCallback((toggle) => {
+		if (typeof toggle !== "boolean" && toggle !== void 0) throw new Error("toggleExpand only accepts boolean or undefined as parameter. You most likely did <button onClick={toggleExpand}> instead of <button onClick={() => toggleExpand()}>");
+		if (toggle !== void 0 && toggle === expanded) return;
+		onExpandChange === null || onExpandChange === void 0 || onExpandChange(!expanded);
+		if (navigationRef.current) navigationRef.current.style.width = "";
+		if (shouldAnimate) {
+			setAnimation(expanded ? "collapse" : "expand");
+			setTimeout(() => {
+				setExpanded(toggle !== null && toggle !== void 0 ? toggle : !expanded);
+				setAnimation(false);
+			}, 250);
+		} else setExpanded(toggle !== null && toggle !== void 0 ? toggle : !expanded);
+	}, [
+		expanded,
+		onExpandChange,
+		shouldAnimate
+	]);
+	const pinItem = useCallback((item) => {
+		const newValue = [...pinnedItems, item];
+		setPinnedItems(newValue);
+		return newValue;
+	}, [pinnedItems]);
+	const unpinItem = useCallback((item) => {
+		const newValue = pinnedItems.filter((localItem) => localItem !== item);
+		setPinnedItems(newValue);
+		return newValue;
+	}, [pinnedItems]);
+	const reorderItems = useCallback((initialIndex, endIndex) => {
+		const newPinnedItems = [...pinnedItems];
+		const [removed] = newPinnedItems.splice(initialIndex, 1);
+		newPinnedItems.splice(endIndex, 0, removed);
+		setPinnedItems(newPinnedItems);
+		return newPinnedItems;
+	}, [pinnedItems]);
+	const value = useMemo(() => ({
+		allowNavigationResize,
+		animation,
+		animationType,
+		expanded,
+		items,
+		locales,
+		navigationRef,
+		pinItem,
+		pinLimit,
+		pinnedFeature,
+		pinnedItems,
+		registerItem,
+		reorderItems,
+		setAllowNavigationResize,
+		setAnimation,
+		setPinnedItems,
+		setWidth,
+		shouldAnimate,
+		toggleExpand,
+		unpinItem,
+		width,
+		showHide
+	}), [
+		expanded,
+		toggleExpand,
+		pinnedItems,
+		pinItem,
+		unpinItem,
+		pinnedFeature,
+		locales,
+		pinLimit,
+		animation,
+		width,
+		reorderItems,
+		items,
+		allowNavigationResize,
+		shouldAnimate,
+		animationType,
+		showHide
+	]);
+	return /* @__PURE__ */ jsx(NavigationContext.Provider, {
+		value,
+		children
+	});
+};
+
+//#endregion
+export { NavigationProvider, useNavigation };

package/dist/components/compositions/Navigation/animations.css.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ANIMATIONS
+ * collapse and expand animation duration of the whole nav in ms
+ */
+export declare const shrinkHeight: string;
+export declare const groupAnimation: string;
+//# sourceMappingURL=animations.css.d.ts.map

package/dist/components/compositions/Navigation/animations.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.css.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/Navigation/animations.css.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,YAAY,QAOvB,CAAA;AAEF,eAAO,MAAM,cAAc,QAWzB,CAAA"}

package/dist/components/compositions/Navigation/components/ComponentsTypes.d.ts

@@ -0,0 +1,65 @@
+import type { ComponentProps, CSSProperties, DragEvent, ElementType, ReactNode } from 'react';
+import type { Badge } from '../../../Badge';
+import type { ItemType, PinUnPinType } from '../types';
+export type ItemExpandedType = {
+    categoryIcon: ReactNode;
+    containerTag: ElementType;
+    disabled?: boolean;
+    hasActiveChildren: boolean;
+    active?: boolean;
+    noExpand: boolean;
+    subLabel?: string;
+    shouldShowPinnedButton: boolean;
+    children: ReactNode;
+    dataTestId?: string;
+    type: ItemType;
+    href?: HTMLAnchorElement['href'];
+    rel?: HTMLAnchorElement['rel'];
+    id: string;
+    style?: CSSProperties;
+    target?: HTMLAnchorElement['target'];
+    label: string;
+    labelDescription: ReactNode;
+    hasPinnedFeatureAndNoChildren?: boolean;
+    badgeText?: string;
+    badgeSentiment?: ComponentProps<typeof Badge>['sentiment'];
+    isItemPinned: boolean;
+    pinTooltipLocale: string;
+    onClickPinUnpin: ((parameters: PinUnPinType) => void) | undefined;
+    isPinDisabled: boolean;
+    onToggle?: (toggle: boolean) => void;
+    index?: number;
+    onDragStopTrigger: (event: DragEvent<HTMLDivElement>) => void;
+    toggle?: boolean;
+};
+export type ItemMenuType = {
+    style?: CSSProperties;
+    children: ReactNode;
+    label: string;
+    hasActiveChildren: boolean;
+    categoryIcon?: ReactNode;
+    active?: boolean;
+};
+export type ItemMenuItemType = {
+    active?: boolean;
+    shouldShowPinnedButton: boolean;
+    disabled?: boolean;
+    href?: string;
+    onToggle?: (toggle: boolean) => void;
+    rel?: HTMLAnchorElement['rel'];
+    style?: CSSProperties;
+    target?: HTMLAnchorElement['target'];
+    hasActiveChildren: boolean;
+    noExpand: boolean;
+    labelDescription: ReactNode;
+    label: string;
+    badgeText?: string;
+    badgeSentiment?: ComponentProps<typeof Badge>['sentiment'];
+    hasHrefAndNoChildren?: boolean | '';
+    pinTooltipLocale: string;
+    isItemPinned: boolean;
+    isPinDisabled: boolean;
+    onClickPinUnpin?: (parameters: PinUnPinType) => void;
+    id: string;
+};
+//# sourceMappingURL=ComponentsTypes.d.ts.map

package/dist/components/compositions/Navigation/components/ComponentsTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentsTypes.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/ComponentsTypes.ts"],"names":[],"mappings":"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"}

package/dist/components/compositions/Navigation/components/Group.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties, ReactNode } from 'react';
+type GroupProps = {
+    children: ReactNode;
+    label: string;
+    style?: CSSProperties;
+    additionalData?: ReactNode;
+};
+export declare const Group: ({ children, label, style, additionalData, }: GroupProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=Group.d.ts.map

package/dist/components/compositions/Navigation/components/Group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/Group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOrD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,cAAc,CAAC,EAAE,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,KAAK,6GAiDjB,CAAA"}

package/dist/components/compositions/Navigation/components/Group.js

@@ -0,0 +1,40 @@
+'use client';
+import { __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
+import { Stack } from "../../../Stack/index.js";
+import { Text } from "../../../Text/index.js";
+import { useNavigation } from "../NavigationProvider.js";
+import { navigationGroupStack, navigationGroupText } from "./styles.css.js";
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/compositions/Navigation/components/Group.tsx
+const Group = ({ children, label, style, additionalData }) => {
+	const context = useNavigation();
+	if (!context) throw new Error("Navigation.Group can only be used inside a NavigationProvider.");
+	const { expanded, animation, animationType } = context;
+	const isDiplay = !animation && expanded;
+	if (Children.count(children) > 0) return /* @__PURE__ */ jsx("div", {
+		style: _objectSpread2({ width: animation ? "100%" : void 0 }, style),
+		children: /* @__PURE__ */ jsxs(Stack, {
+			className: navigationGroupStack,
+			direction: "column",
+			children: [isDiplay ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				className: navigationGroupText({ animation: animationType === "complex" ? animation : false }),
+				prominence: "weak",
+				sentiment: "neutral",
+				variant: "bodySmallStrong",
+				children: additionalData ? /* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					justifyContent: "space-between",
+					children: [label, additionalData]
+				}) : label
+			}) : null, children]
+		})
+	});
+	return null;
+};
+
+//#endregion
+export { Group };

package/dist/components/compositions/Navigation/components/Item.d.ts

@@ -0,0 +1,88 @@
+import type { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';
+import type { Badge } from '../../../Badge';
+import type { ItemType, PinUnPinType } from '../types';
+type ItemProps = {
+    children?: ReactNode;
+    /**
+     * Sets a category icon on the left of the item
+     */
+    categoryIcon?: ReactNode;
+    /**
+     * The label of the item that will be shown.
+     * It is also used as the key for pinning.
+     */
+    label: string;
+    /**
+     * It will be added after the label when you want to have complementory information with the label
+     */
+    labelDescription?: ReactNode;
+    /**
+     * It should be a unique id and will be used for pin/unpin and show/hide feature.
+     */
+    id: string;
+    /**
+     * Text shown under the label with a lighter color and smaller font size
+     */
+    subLabel?: string;
+    /**
+     * Badge is added on the right of the item. It is hidden on hover if pinned
+     * feature is enabled
+     */
+    badgeText?: string;
+    /**
+     * Defined the sentiment of the badge according to Badge component from
+     * `@ultraviolet/ui`
+     */
+    badgeSentiment?: ComponentProps<typeof Badge>['sentiment'];
+    href?: HTMLAnchorElement['href'];
+    target?: HTMLAnchorElement['target'];
+    rel?: HTMLAnchorElement['rel'];
+    /**
+     * This function will be triggered on click of the item. If the item is expandable
+     * toggle will be passed with it.
+     */
+    onToggle?: (toggle: boolean) => void;
+    onClickPinUnpin?: (parameters: PinUnPinType) => void;
+    /**
+     * This prop is used to control if the item is expanded or collapsed
+     */
+    toggle?: boolean;
+    /**
+     * Set this to true if your current page is this item.
+     */
+    active?: boolean;
+    /**
+     * If you want to remove pin button on your item use this prop
+     */
+    noPinButton?: boolean;
+    /**
+     * You don't need to use this prop it's used internally to control the type of the item
+     */
+    type?: ItemType;
+    /**
+     * You don't need to use this prop it's used internally for pinned item to be reorganized with drag and drop
+     */
+    index?: number;
+    /**
+     * When the item has href it becomes a link if not it is a button.
+     * When using an external routing tool you might need to remove both of them and use
+     * a non focusable element. This option allows you to choose the tag of the
+     * item.
+     */
+    as?: ElementType;
+    /**
+     * Use this prop if you want to remove the expand behavior when the item
+     * has sub items.
+     */
+    noExpand?: boolean;
+    /**
+     * When set to true, the item is still visible even when `showHide='hide'` (NavigationProvider)
+     */
+    alwaysVisible?: boolean;
+    disabled?: boolean;
+    'data-testid'?: string;
+    style?: CSSProperties;
+};
+export declare const Item: import("react").MemoExoticComponent<({ children, categoryIcon, label, labelDescription, subLabel, badgeText, badgeSentiment, href, target, rel, onToggle, onClickPinUnpin, toggle, active, noPinButton, type, as, disabled, noExpand, index, id, 'data-testid': dataTestId, style, alwaysVisible, }: ItemProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};
+//# sourceMappingURL=Item.d.ts.map

package/dist/components/compositions/Navigation/components/Item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/Item.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EAEb,WAAW,EACX,SAAS,EACV,MAAM,OAAO,CAAA;AAUd,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAI3C,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAetD,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,CAAA;IAC1D,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACpC,GAAG,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAA;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAOD,eAAO,MAAM,IAAI,oWAyQhB,CAAA"}