@mks2508/mks-ui 0.2.1 → 0.3.2

package/dist/react-ui/ui/DataCard/index.js

@@ -0,0 +1,276 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { CountingNumber } from "../../primitives/CountingNumber/index.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { Switch, SwitchThumb } from "../Switch/index.js";
+import { CornerBracket } from "../CornerBracket/index.js";
+import { dataCardStateStyles, dataCardStyles, dataCardVariants } from "./DataCard.styles.js";
+import * as React$1 from "react";
+import { motion } from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/DataCard/index.tsx
+const [DataCardProvider, useDataCard] = getStrictContext("DataCardContext");
+/**
+* DataCard — comprehensive showcase component demonstrating mks-ui patterns.
+*
+* Features:
+* - Slot overrides for customization
+* - State-based styling (hover, pressed, disabled)
+* - CVA variants (size, color variant)
+* - asChild composition pattern
+* - Motion/animation integration
+* - Custom render functions
+* - Form field integration
+* - Icon composition
+* - Glassmorphism effects
+*
+* @example
+* ```tsx
+* <DataCard variant="accent" size="default">
+*   <DataCardValue number={1234} />
+*   <DataCardToggle />
+* </DataCard>
+* ```
+*/
+function DataCard({ variant = "default", size = "default", disabled = false, glass = true, showBrackets = true, className, style, slots, config, children, ...props }) {
+	const [state, setState] = React$1.useState({
+		hovered: false,
+		pressed: false,
+		disabled: disabled ?? false
+	});
+	const contextValue = React$1.useMemo(() => ({
+		variant,
+		size,
+		disabled: disabled ?? false,
+		glass,
+		slots,
+		setState
+	}), [
+		variant,
+		size,
+		disabled,
+		glass,
+		slots
+	]);
+	const computedClassName = React$1.useMemo(() => {
+		if (typeof className === "function") return className(state);
+		return className;
+	}, [className, state]);
+	const computedStyle = React$1.useMemo(() => {
+		if (typeof style === "function") return style(state);
+		return style;
+	}, [style, state]);
+	return /* @__PURE__ */ jsx(DataCardProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(motion.div, {
+			"data-slot": "data-card",
+			"data-variant": variant,
+			"data-size": size,
+			"data-disabled": disabled || void 0,
+			"aria-disabled": disabled || void 0,
+			className: cn(dataCardVariants({
+				variant,
+				size,
+				glass
+			}), slots?.root, computedClassName, state.hovered && dataCardStateStyles.hovered, state.pressed && dataCardStateStyles.pressed, disabled && dataCardStateStyles.disabled),
+			style: computedStyle,
+			onHoverStart: () => setState((prev) => ({
+				...prev,
+				hovered: true
+			})),
+			onHoverEnd: () => setState((prev) => ({
+				...prev,
+				hovered: false
+			})),
+			onTapStart: () => setState((prev) => ({
+				...prev,
+				pressed: true
+			})),
+			onTap: () => setState((prev) => ({
+				...prev,
+				pressed: false
+			})),
+			onTapCancel: () => setState((prev) => ({
+				...prev,
+				pressed: false
+			})),
+			...props,
+			children: [showBrackets && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(DataCardBracket, {
+					position: "tl",
+					variant: variant === "accent" ? "accent" : "default"
+				}),
+				/* @__PURE__ */ jsx(DataCardBracket, {
+					position: "tr",
+					variant: variant === "accent" ? "accent" : "default"
+				}),
+				/* @__PURE__ */ jsx(DataCardBracket, {
+					position: "bl",
+					variant: variant === "accent" ? "accent" : "default"
+				}),
+				/* @__PURE__ */ jsx(DataCardBracket, {
+					position: "br",
+					variant: variant === "accent" ? "accent" : "default"
+				})
+			] }), children]
+		})
+	});
+}
+/**
+* DataCardValue — displays animated number with CountingNumber.
+*
+* @example
+* ```tsx
+* <DataCardValue
+*   number={1234}
+*   label="Active Users"
+*   unit="users"
+* />
+* ```
+*/
+function DataCardValue({ number, label, unit, decimalPlaces = 0, padStart = false }) {
+	const { variant, size } = useDataCard();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-card-value",
+		className: cn(dataCardStyles.value),
+		children: [
+			label && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs uppercase tracking-wider font-mono",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(CountingNumber, {
+				number,
+				decimalPlaces,
+				padStart,
+				transition: {
+					stiffness: variant === "accent" ? 150 : 90,
+					damping: variant === "accent" ? 20 : 10
+				},
+				className: size === "compact" ? "text-3xl font-bold" : size === "spacious" ? "text-5xl font-bold" : "text-4xl font-bold"
+			}),
+			unit && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-lg ml-1",
+				children: unit
+			})
+		]
+	});
+}
+/**
+* DataCardLabel — displays title and description.
+*
+* @example
+* ```tsx
+* <DataCardLabel
+*   title="Revenue"
+*   description="This month"
+* />
+* ```
+*/
+function DataCardLabel({ title, description, className, ...props }) {
+	const { slots } = useDataCard();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-card-label",
+		className: cn(dataCardStyles.label, slots?.label, className),
+		...props,
+		children: [title && /* @__PURE__ */ jsx("h3", {
+			className: "text-foreground font-semibold",
+			children: title
+		}), description && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: description
+		})]
+	});
+}
+/**
+* DataCardToggle — interactive switch element.
+*
+* Uses asChild pattern for composition with Switch component.
+*
+* @example
+* ```tsx
+* <DataCardToggle
+*   checked={enabled}
+*   onCheckedChange={setEnabled}
+*   label="Enable notifications"
+*   checkedIcon={<BellIcon />}
+*   uncheckedIcon={<BellOffIcon />}
+* />
+* ```
+*/
+function DataCardToggle({ checked, onCheckedChange, checkedIcon, uncheckedIcon, label }) {
+	const { disabled, variant, size, glass, slots } = useDataCard();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-card-toggle",
+		className: cn(dataCardStyles.toggle, slots?.toggle),
+		children: [label && /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsxs(Switch, {
+			checked,
+			onCheckedChange,
+			disabled,
+			children: [
+				/* @__PURE__ */ jsx(SwitchThumb, {}),
+				checkedIcon && /* @__PURE__ */ jsx("div", {
+					className: "text-primary",
+					children: checkedIcon
+				}),
+				!checkedIcon && /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground",
+					children: uncheckedIcon
+				})
+			]
+		})]
+	});
+}
+/**
+* DataCardActions — container for action buttons.
+*
+* @example
+* ```tsx
+* <DataCardActions align="end">
+*   <Button size="sm">Edit</Button>
+*   <Button size="sm" variant="ghost">Delete</Button>
+* </DataCardActions>
+* ```
+*/
+function DataCardActions({ align = "end", className, children, ...props }) {
+	const { variant, size, glass, slots } = useDataCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-card-actions",
+		"data-align": align,
+		className: cn(dataCardStyles.actions, align === "center" && "justify-center", align === "start" && "justify-start", align === "end" && "justify-end", slots?.actions, className),
+		...props,
+		children
+	});
+}
+/**
+* DataCardBracket — decorative corner bracket.
+*
+* Wraps CornerBracket with motion animations.
+*
+* @example
+* ```tsx
+* <DataCardBracket position="tl" variant="accent" />
+* ```
+*/
+function DataCardBracket({ position, variant = "default", className }) {
+	const { size, glass, slots } = useDataCard();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(dataCardStyles.bracket, slots?.bracket, className),
+		children: /* @__PURE__ */ jsx(CornerBracket, {
+			position,
+			variant,
+			size: {
+				compact: 16,
+				default: 20,
+				spacious: 24
+			}[size ?? "default"]
+		})
+	});
+}
+
+//#endregion
+export { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard };

package/dist/react-ui/ui/Menu/index.js

@@ -6,7 +6,7 @@ import { getStrictContext } from "../../lib/get-strict-context.js";
 import { useControlledState } from "../../hooks/State/UseControlledState.js";
 import { useDataState } from "../../hooks/State/UseDataState.js";
 import { menuStyles } from "./Menu.styles.js";
-import * as React from "react";
+import * as React$1 from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
@@ -68,7 +68,7 @@ function Menu$1({ slots, config, ...props }) {
 		defaultValue: props?.defaultOpen,
 		onChange: props?.onOpenChange
 	});
-	const [highlightedValue, setHighlightedValue] = React.useState(null);
+	const [highlightedValue, setHighlightedValue] = React$1.useState(null);
 	return /* @__PURE__ */ jsx(MenuActiveValueProvider, {
 		value: {
 			highlightedValue,

package/dist/react-ui/ui/Switch/index.js

@@ -4,7 +4,7 @@ import { cn } from "../../lib/utils.js";
 import { getStrictContext } from "../../lib/get-strict-context.js";
 import { useControlledState } from "../../hooks/State/UseControlledState.js";
 import { switchStyles } from "./Switch.styles.js";
-import * as React from "react";
+import * as React$1 from "react";
 import { motion } from "motion/react";
 import { jsx } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
@@ -67,7 +67,7 @@ const [SwitchProvider, useSwitch] = getStrictContext("SwitchContext");
 * ```
 */
 function Switch$1({ name, defaultChecked, checked, onCheckedChange, nativeButton, disabled, readOnly, required, inputRef, id, className, slots, config: _config, ...props }) {
-	const [isPressed, setIsPressed] = React.useState(false);
+	const [isPressed, setIsPressed] = React$1.useState(false);
 	const [isChecked, setIsChecked] = useControlledState({
 		value: checked,
 		defaultValue: defaultChecked,
@@ -174,7 +174,7 @@ function SwitchIcon({ position, transition = {
 	bounce: 0
 }, className, slots, ...props }) {
 	const { isChecked } = useSwitch();
-	const isAnimated = React.useMemo(() => {
+	const isAnimated = React$1.useMemo(() => {
 		if (position === "right") return !isChecked;
 		if (position === "left") return isChecked;
 		if (position === "thumb") return true;

package/dist/react-ui/ui/Tabs/index.js

@@ -6,7 +6,7 @@ import { AutoHeight } from "../../primitives/AutoHeight/index.js";
 import { getStrictContext } from "../../lib/get-strict-context.js";
 import { useControlledState } from "../../hooks/State/UseControlledState.js";
 import { tabsStyles } from "./Tabs.styles.js";
-import * as React from "react";
+import * as React$1 from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
@@ -285,7 +285,7 @@ function TabsPanels(props) {
 			transition,
 			className: cn(tabsStyles.panels, slots?.panels, className),
 			...autoProps,
-			children: /* @__PURE__ */ jsx(React.Fragment, { children }, value)
+			children: /* @__PURE__ */ jsx(React$1.Fragment, { children }, value)
 		});
 	}
 	const { children, style, transition = defaultPanelsTransition, slots, className, mode: _mode, ...layoutProps } = props;
@@ -300,7 +300,7 @@ function TabsPanels(props) {
 		},
 		className: cn(tabsStyles.panels, slots?.panels, className),
 		...layoutProps,
-		children: /* @__PURE__ */ jsx(React.Fragment, { children }, value)
+		children: /* @__PURE__ */ jsx(React$1.Fragment, { children }, value)
 	});
 }
 

package/dist/react-ui/ui/TextFlow/TextFlow.styles.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { StyleSlots } from '../../../core/types';
+/**
+ * Style slots for TextFlow component
+ */
+export type TextFlowSlot = 'root' | 'token' | 'separator' | 'overflow' | 'placeholder';
+/**
+ * Base styles for TextFlow component
+ */
+export declare const textFlowBaseStyles: StyleSlots<TextFlowSlot>;
+/**
+ * CVA variants for TextFlow root container
+ */
+export declare const textFlowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type TextFlowVariants = VariantProps<typeof textFlowVariants>;
+//# sourceMappingURL=TextFlow.styles.d.ts.map

package/dist/react-ui/ui/TextFlow/TextFlow.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFlow.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/TextFlow/TextFlow.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,UAAU,CAAC,YAAY,CAMvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,oFAW3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/react-ui/ui/TextFlow/TextFlow.types.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Token individual para TextFlow
+ */
+export interface IToken {
+    /** Identificador único del token */
+    id: string;
+    /** Texto a mostrar */
+    text: string;
+}
+/**
+ * Modo de transición para cambios de texto en separadores
+ */
+export type SeparatorTransitionMode = 'none' | 'fade' | 'slide';
+/**
+ * Tipos de lista para Intl.ListFormat
+ */
+export type ListFormatType = 'conjunction' | 'disjunction' | 'unit';
+/**
+ * Estilos de lista para Intl.ListFormat
+ */
+export type ListFormatStyle = 'long' | 'short' | 'narrow';
+/**
+ * Configuración de separadores entre tokens
+ */
+export interface ISeparatorConfig {
+    /** Texto del separador. Si se omite, usa Intl.ListFormat */
+    value?: string;
+    /** Locale para Intl.ListFormat */
+    locale?: string;
+    /** Tipo de lista para Intl.ListFormat */
+    listType?: ListFormatType;
+    /** Estilo de lista para Intl.ListFormat */
+    listStyle?: ListFormatStyle;
+    /** Modo de transición cuando el texto del separador cambia */
+    transition?: SeparatorTransitionMode;
+    /** Duración de la transición en ms */
+    duration?: number;
+    /** Clase CSS adicional para separadores */
+    className?: string;
+}
+/**
+ * Configuración del indicador de overflow (+N more)
+ */
+export interface IOverflowConfig {
+    /** Prefijo antes del número */
+    prefix?: string;
+    /** Texto después del número */
+    label?: string;
+    /** Separador mostrado antes del overflow */
+    separator?: string;
+    /** Mostrar separador antes del overflow */
+    showSeparator?: boolean;
+    /** Clase CSS adicional para el overflow */
+    className?: string;
+}
+/**
+ * Configuración de animación de texto
+ */
+export interface ITextAnimationConfig {
+    /** Modo de animación del texto */
+    mode?: 'character' | 'word';
+    /** Dirección de entrada del texto */
+    direction?: 'vertical' | 'horizontal';
+    /** Delay entre caracteres/palabras en ms */
+    stagger?: number;
+    /** Duración de animación en ms */
+    duration?: number;
+    /** Habilitar efecto blur durante animación */
+    blur?: boolean;
+    /** Animar cambios de ancho del contenedor */
+    widthAnimation?: boolean;
+}
+/**
+ * Props for TextFlow component
+ *
+ * TextFlow renders an animated list of tokens with locale-aware separators,
+ * smooth FLIP animations, and overflow handling.
+ */
+export interface ITextFlowProps {
+    /** Array de tokens a mostrar */
+    tokens: IToken[];
+    /** Texto placeholder cuando no hay tokens */
+    placeholder?: string;
+    /** Máximo de tokens visibles. El resto se muestra como "+N" */
+    maxVisible?: number;
+    /** Configuración de separadores */
+    separator?: ISeparatorConfig;
+    /** Configuración del indicador de overflow */
+    overflow?: IOverflowConfig;
+    /** Configuración de animación de texto */
+    animation?: ITextAnimationConfig;
+    /** Modo inline para uso en botones/selects */
+    inline?: boolean;
+    /** Clase CSS para el contenedor principal */
+    className?: string;
+    /** Clase CSS para cada token */
+    tokenClassName?: string;
+    /** Clase CSS para el placeholder */
+    placeholderClassName?: string;
+}
+//# sourceMappingURL=TextFlow.types.d.ts.map

package/dist/react-ui/ui/TextFlow/TextFlow.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFlow.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/TextFlow/TextFlow.types.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,MAAM,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B,qCAAqC;IACrC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,gCAAgC;IAChC,MAAM,EAAE,MAAM,EAAE,CAAC;IAEjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mCAAmC;IACnC,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAEjC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,oCAAoC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B"}

package/dist/react-ui/ui/TextFlow/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ITextFlowProps, IToken, ISeparatorConfig, IOverflowConfig, ITextAnimationConfig, SeparatorTransitionMode } from './TextFlow.types';
+/**
+ * TextFlow - Locale-aware animated token list component
+ *
+ * Built on the Reorder primitive, provides smooth FLIP animations for token lists
+ * with proper locale-aware separators using Intl.ListFormat.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextFlow tokens={tokens} />
+ *
+ * // Spanish multiselect with transition
+ * <TextFlow
+ *   tokens={tokens}
+ *   maxVisible={2}
+ *   inline
+ *   separator={{ locale: 'es', transition: 'fade' }}
+ *   overflow={{ prefix: '+', label: ' más' }}
+ * />
+ * ```
+ */
+export declare const TextFlow: React.FC<ITextFlowProps>;
+export type { ITextFlowProps, IToken, ISeparatorConfig, IOverflowConfig, ITextAnimationConfig, SeparatorTransitionMode, };
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/ui/TextFlow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/TextFlow/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAIpD,OAAO,KAAK,EACV,cAAc,EACd,MAAM,EACN,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,uBAAuB,EAGxB,MAAM,kBAAkB,CAAC;AA0B1B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0M7C,CAAC;AAIF,YAAY,EACV,cAAc,EACd,MAAM,EACN,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,uBAAuB,GACxB,CAAC"}