@mks2508/mks-ui 0.2.1 → 0.3.2

package/dist/react-ui/primitives/waapi/index.js

@@ -0,0 +1,18 @@
+import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./core/animationConstants.js";
+import { useElementRegistry } from "./core/useElementRegistry.js";
+import { usePositionCapture } from "./core/usePositionCapture.js";
+import { useFLIPAnimation } from "./core/useFLIPAnimation.js";
+import { useAnimationOrchestrator } from "./core/useAnimationOrchestrator.js";
+import "./core/index.js";
+import { SlidingNumber } from "./SlidingNumber/index.js";
+import { SlidingText } from "./SlidingText/index.js";
+import { useReorder } from "./Reorder/useReorder.js";
+import { ReorderRoot } from "./Reorder/index.js";
+import { useReorderPresence } from "./Reorder/useReorderPresence.js";
+import { calculateSeparatorCoordination, shouldShowSeparator } from "./Reorder/utils/separatorCoordination.js";
+import { useMorphContext } from "./Morph/MorphContext.js";
+import { useFLIPClipPath } from "./Morph/techniques/useFLIPClipPath.js";
+import { useCSSGridMorph } from "./Morph/techniques/useCSSGridMorph.js";
+import { useViewTransitions } from "./Morph/techniques/useViewTransitions.js";
+import { useMorph } from "./Morph/useMorph.js";
+import { Morph } from "./Morph/index.js";

package/dist/react-ui/ui/Accordion/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 { AccordionStyles, accordionVariants } from "./Accordion.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 { Accordion } from "@base-ui/react/accordion";
@@ -110,8 +110,8 @@ function Accordion$1({ variant, className, slots, config: _config, ...props }) {
 */
 function AccordionItem({ slots, className, ...props }) {
 	const { value } = useAccordion();
-	const [isOpen, setIsOpen] = React.useState(value?.includes(props?.value) ?? false);
-	React.useEffect(() => {
+	const [isOpen, setIsOpen] = React$1.useState(value?.includes(props?.value) ?? false);
+	React$1.useEffect(() => {
 		setIsOpen(value?.includes(props?.value) ?? false);
 	}, [value, props?.value]);
 	return /* @__PURE__ */ jsx(AccordionItemProvider, {

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

@@ -2,7 +2,7 @@
 
 import { cn } from "../../lib/utils.js";
 import { buttonStateStyles, buttonVariants } from "./Button.styles.js";
-import * as React from "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 
@@ -12,8 +12,8 @@ import { Button } from "@base-ui/react/button";
 * Composes the button with another element passing all props and handlers.
 */
 function Slot({ children, ...props }) {
-	const child = React.Children.only(children);
-	return React.cloneElement(child, {
+	const child = React$1.Children.only(children);
+	return React$1.cloneElement(child, {
 		...props,
 		...child.props,
 		className: cn(props.className, child.props.className),
@@ -39,16 +39,16 @@ function Slot({ children, ...props }) {
 * ```
 */
 function Button$1({ className, variant, size, focusableWhenDisabled, nativeButton, asChild = false, render, style, children, disabled, slots, onPointerDown, onPointerUp, onPointerLeave, ...props }) {
-	const [pressed, setPressed] = React.useState(false);
-	const handlePointerDown = React.useCallback((e) => {
+	const [pressed, setPressed] = React$1.useState(false);
+	const handlePointerDown = React$1.useCallback((e) => {
 		setPressed(true);
 		onPointerDown?.(e);
 	}, [onPointerDown]);
-	const handlePointerUp = React.useCallback((e) => {
+	const handlePointerUp = React$1.useCallback((e) => {
 		setPressed(false);
 		onPointerUp?.(e);
 	}, [onPointerUp]);
-	const handlePointerLeave = React.useCallback((e) => {
+	const handlePointerLeave = React$1.useCallback((e) => {
 		setPressed(false);
 		onPointerLeave?.(e);
 	}, [onPointerLeave]);
@@ -61,7 +61,7 @@ function Button$1({ className, variant, size, focusableWhenDisabled, nativeButto
 		size
 	}), slots?.root, typeof className === "function" ? className(state) : className, pressed && buttonStateStyles.pressed);
 	const baseStyle = typeof style === "function" ? style(state) : style;
-	if (asChild && React.isValidElement(children)) return /* @__PURE__ */ jsx(Button, {
+	if (asChild && React$1.isValidElement(children)) return /* @__PURE__ */ jsx(Button, {
 		"data-slot": "button",
 		"data-variant": variant,
 		"data-size": size,

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

@@ -2,7 +2,7 @@ import { cn } from "../../lib/utils.js";
 import { Button } from "../Button/index.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../InputGroup/index.js";
 import { comboboxStyles } from "./Combobox.styles.js";
-import * as React from "react";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 import { HugeiconsIcon } from "@hugeicons/react";
@@ -209,7 +209,7 @@ function ComboboxChipsInput({ className, ...props }) {
 * @returns A ref to be used as the anchor for ComboboxContent
 */
 function useComboboxAnchor() {
-	return React.useRef(null);
+	return React$1.useRef(null);
 }
 
 //#endregion

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

@@ -0,0 +1,35 @@
+import type { StyleSlots } from '../../../core/types';
+/**
+ * Visual regions for: DataCard component family.
+ * Each slot maps to: customizable visual region.
+ */
+export type DataCardSlot = 'root' | 'bracket' | 'header' | 'value' | 'label' | 'toggle' | 'actions' | 'footer';
+/**
+ * Base style slots for: DataCard.
+ * Uses glassmorphism pattern from: Synthwave Dark design system.
+ */
+export declare const dataCardStyles: StyleSlots<DataCardSlot>;
+/**
+ * CVA variants for: DataCard root.
+ * Combines glassmorphism with Synthwave Dark color scheme.
+ */
+export declare const dataCardVariants: (props?: ({
+    size?: "default" | "compact" | "spacious" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "accent" | null | undefined;
+    glass?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * CVA variants for bracket visibility animation.
+ */
+export declare const bracketVariants: (props?: ({
+    animate?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * State-specific styles for DataCard interactions.
+ */
+export declare const dataCardStateStyles: {
+    hovered: string;
+    pressed: string;
+    disabled: string;
+};
+//# sourceMappingURL=DataCard.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,SAAS,GACT,QAAQ,GACR,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,GACT,QAAQ,CAAC;AAEb;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAgBnD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;8EAiF3B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe;;8EAU1B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;CAI/B,CAAC"}

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

@@ -0,0 +1,114 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/DataCard/DataCard.styles.ts
+/**
+* Base style slots for: DataCard.
+* Uses glassmorphism pattern from: Synthwave Dark design system.
+*/
+const dataCardStyles = {
+	root: "group/data-card relative isolate rounded-xl transition-all duration-300",
+	bracket: "absolute pointer-events-none transition-opacity duration-300",
+	header: "flex flex-col gap-1.5 px-5 pt-5 pb-2",
+	value: "flex items-baseline gap-1 tabular-nums tracking-tight",
+	label: "text-sm font-medium",
+	toggle: "flex items-center justify-between gap-3",
+	actions: "flex items-center gap-2",
+	footer: "mt-auto px-5 pb-4 pt-2"
+};
+/**
+* CVA variants for: DataCard root.
+* Combines glassmorphism with Synthwave Dark color scheme.
+*/
+const dataCardVariants = cva(dataCardStyles.root, {
+	variants: {
+		size: {
+			compact: {
+				root: "p-3",
+				header: "gap-1 px-3 pt-3 pb-1.5",
+				footer: "px-3 pb-1.5 pt-1"
+			},
+			default: {
+				root: "p-4",
+				header: "gap-1.5 px-4 pt-4 pb-2",
+				footer: "px-4 pb-2 pt-2"
+			},
+			spacious: {
+				root: "p-6",
+				header: "gap-2 px-6 pt-6 pb-3",
+				footer: "px-6 pb-3 pt-2"
+			}
+		},
+		variant: {
+			default: [
+				"bg-white/5",
+				"backdrop-blur-lg",
+				"border border-white/10",
+				"hover:bg-white/10",
+				"shadow-lg shadow-black/20"
+			].join(" "),
+			accent: [
+				"bg-cyan-500/10",
+				"backdrop-blur-lg",
+				"border border-cyan-400/30",
+				"hover:bg-cyan-500/20",
+				"shadow-cyan-500/20 shadow-lg"
+			].join(" "),
+			success: [
+				"bg-emerald-500/10",
+				"backdrop-blur-lg",
+				"border border-emerald-400/30",
+				"hover:bg-emerald-500/20",
+				"shadow-emerald-500/20 shadow-lg"
+			].join(" "),
+			warning: [
+				"bg-amber-500/10",
+				"backdrop-blur-lg",
+				"border border-amber-400/30",
+				"hover:bg-amber-500/20",
+				"shadow-amber-500/20 shadow-lg"
+			].join(" "),
+			destructive: [
+				"bg-red-500/10",
+				"backdrop-blur-lg",
+				"border border-red-400/30",
+				"hover:bg-red-500/20",
+				"shadow-red-500/20 shadow-lg"
+			].join(" ")
+		},
+		glass: {
+			true: [
+				"backdrop-blur-lg",
+				"bg-white/10",
+				"border border-white/20",
+				"shadow-xl"
+			].join(" "),
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+		glass: true
+	}
+});
+/**
+* CVA variants for bracket visibility animation.
+*/
+const bracketVariants = cva(dataCardStyles.bracket, {
+	variants: { animate: {
+		true: "opacity-60 group-hover/data-card:opacity-100 transition-opacity",
+		false: "opacity-50"
+	} },
+	defaultVariants: { animate: true }
+});
+/**
+* State-specific styles for DataCard interactions.
+*/
+const dataCardStateStyles = {
+	hovered: "scale-[1.02]",
+	pressed: "scale-[0.98]",
+	disabled: "opacity-50 pointer-events-none"
+};
+
+//#endregion
+export { dataCardStateStyles, dataCardStyles, dataCardVariants };

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

@@ -0,0 +1,135 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { dataCardVariants, DataCardSlot } from './DataCard.styles';
+export type { DataCardSlot } from './DataCard.styles';
+/**
+ * Available visual variants for DataCard.
+ * - 'default' - Standard glassmorphism with neutral borders
+ * - 'accent' - Cyan accent with primary glow
+ * - 'success' - Green accent for positive data
+ * - 'warning' - Amber accent for warnings
+ * - 'destructive' - Red accent for critical data
+ */
+export type DataCardVariant = 'default' | 'accent' | 'success' | 'warning' | 'destructive';
+/**
+ * Size variants affecting padding and spacing.
+ * - 'compact' - Dense layout for dashboards
+ * - 'default' - Standard balanced spacing
+ * - 'spacious' - More breathing room
+ */
+export type DataCardSize = 'compact' | 'default' | 'spacious';
+/**
+ * Interaction state for state-based styling.
+ * Similar to Button's IButtonState pattern.
+ */
+export interface IDataCardState {
+    /** Whether card content is hovered. */
+    hovered: boolean;
+    /** Whether card is pressed/active. */
+    pressed: boolean;
+    /** Whether card is disabled. */
+    disabled: boolean;
+}
+/**
+ * Configuration for DataCard behavior and animation.
+ * Extends IBaseConfig with card-specific settings.
+ */
+export interface IDataCardConfig {
+    /** Enable/disable corner bracket animations. */
+    animateBrackets?: boolean;
+    /** Spring stiffness for number counter. */
+    counterStiffness?: number;
+    /** Spring damping for number counter. */
+    counterDamping?: number;
+}
+/**
+ * Props for DataCard root component.
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="default">
+ *   <DataCardValue number={1234} />
+ *   <DataCardToggle />
+ * </DataCard>
+ * ```
+ */
+export interface IDataCardProps extends VariantProps<typeof dataCardVariants> {
+    /** Visual style variant. */
+    variant?: DataCardVariant;
+    /** Size variant affecting spacing. */
+    size?: DataCardSize;
+    /** Whether card is disabled. */
+    disabled?: boolean;
+    /** Override classes for card visual regions. */
+    slots?: SlotOverrides<DataCardSlot>;
+    /** Behavioral and animation configuration. */
+    config?: IDataCardConfig;
+    /** CSS class or function returning class based on card state. */
+    className?: string | ((state: IDataCardState) => string | undefined);
+    /** CSS styles or function returning styles based on card state. */
+    style?: React.CSSProperties | ((state: IDataCardState) => React.CSSProperties | undefined);
+    /** Enable glassmorphism effect (default: true). */
+    glass?: boolean;
+    /** Show corner brackets (default: true). */
+    showBrackets?: boolean;
+    /** Child elements. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for DataCardValue - displays animated number.
+ */
+export interface IDataCardValueProps {
+    /** Target number to animate to. */
+    number: number;
+    /** Label displayed above: number. */
+    label?: string;
+    /** Unit/suffix displayed after: number. */
+    unit?: string;
+    /** Decimal places for precision. */
+    decimalPlaces?: number;
+    /** Pad number with leading zeros. */
+    padStart?: boolean;
+}
+/**
+ * Props for DataCardLabel - title/description text.
+ */
+export interface IDataCardLabelProps extends React.ComponentProps<'div'> {
+    /** Primary title text. */
+    title?: string;
+    /** Secondary description text. */
+    description?: string;
+}
+/**
+ * Props for DataCardToggle - interactive switch element.
+ */
+export interface IDataCardToggleProps {
+    /** Whether toggle is checked. */
+    checked?: boolean;
+    /** Callback when toggle state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Icon to show when checked (on). */
+    checkedIcon?: React.ReactNode;
+    /** Icon to show when unchecked (off). */
+    uncheckedIcon?: React.ReactNode;
+    /** Label for: toggle. */
+    label?: string;
+    /** Override classes for toggle regions. */
+    slots?: SlotOverrides<DataCardSlot>;
+}
+/**
+ * Props for DataCardActions - action button container.
+ */
+export interface IDataCardActionsProps extends React.ComponentProps<'div'> {
+    /** Alignment of action buttons. */
+    align?: 'start' | 'center' | 'end';
+}
+/**
+ * Props for DataCardBracket - decorative corner element.
+ */
+export interface IDataCardBracketProps extends React.ComponentProps<'div'> {
+    /** Position of: bracket. */
+    position: 'tl' | 'tr' | 'bl' | 'br';
+    /** Optional variant override for: this bracket. */
+    variant?: 'default' | 'accent';
+}
+//# sourceMappingURL=DataCard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataCard.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { dataCardVariants } from './DataCard.styles';
+import type { SlotOverrides } from '../../../core/types';
+import type { IDataCardProps, IDataCardValueProps, IDataCardLabelProps, IDataCardToggleProps, IDataCardActionsProps, IDataCardBracketProps, IDataCardState, DataCardSlot } from './DataCard.types';
+/**
+ * Context type for DataCard state management.
+ */
+type DataCardContextType = {
+    /** Current variant of: card. */
+    variant: IDataCardProps['variant'];
+    /** Current size of: card. */
+    size: IDataCardProps['size'];
+    /** Whether card is disabled. */
+    disabled: boolean;
+    /** Whether glass effect is enabled. */
+    glass: boolean;
+    /** Slot overrides from parent. */
+    slots?: SlotOverrides<DataCardSlot>;
+    /** Update interaction state. */
+    setState: React.Dispatch<React.SetStateAction<IDataCardState>>;
+};
+declare const useDataCard: () => DataCardContextType;
+/**
+ * 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>
+ * ```
+ */
+declare function DataCard({ variant, size, disabled, glass, showBrackets, className, style, slots, config, children, ...props }: IDataCardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataCardValue — displays animated number with CountingNumber.
+ *
+ * @example
+ * ```tsx
+ * <DataCardValue
+ *   number={1234}
+ *   label="Active Users"
+ *   unit="users"
+ * />
+ * ```
+ */
+declare function DataCardValue({ number, label, unit, decimalPlaces, padStart, }: IDataCardValueProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataCardLabel — displays title and description.
+ *
+ * @example
+ * ```tsx
+ * <DataCardLabel
+ *   title="Revenue"
+ *   description="This month"
+ * />
+ * ```
+ */
+declare function DataCardLabel({ title, description, className, ...props }: IDataCardLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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 />}
+ * />
+ * ```
+ */
+declare function DataCardToggle({ checked, onCheckedChange, checkedIcon, uncheckedIcon, label, }: IDataCardToggleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataCardActions — container for action buttons.
+ *
+ * @example
+ * ```tsx
+ * <DataCardActions align="end">
+ *   <Button size="sm">Edit</Button>
+ *   <Button size="sm" variant="ghost">Delete</Button>
+ * </DataCardActions>
+ * ```
+ */
+declare function DataCardActions({ align, className, children, ...props }: IDataCardActionsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataCardBracket — decorative corner bracket.
+ *
+ * Wraps CornerBracket with motion animations.
+ *
+ * @example
+ * ```tsx
+ * <DataCardBracket position="tl" variant="accent" />
+ * ```
+ */
+declare function DataCardBracket({ position, variant, className, }: IDataCardBracketProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access DataCard context.
+ * Must be used within DataCard provider.
+ *
+ * @returns The current DataCard context
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { variant, size, disabled } = useDataCard();
+ *   return <div>Current variant: {variant}</div>;
+ * }
+ * ```
+ */
+export { useDataCard };
+export { DataCard, DataCardValue, DataCardLabel, DataCardToggle, DataCardActions, DataCardBracket, dataCardVariants, };
+export type { IDataCardProps, IDataCardValueProps, IDataCardLabelProps, IDataCardToggleProps, IDataCardActionsProps, IDataCardBracketProps, IDataCardState, IDataCardConfig, DataCardVariant, DataCardSize, DataCardSlot, } from './DataCard.types';
+export { dataCardStyles } from './DataCard.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,gBAAgB,EAAwD,MAAM,mBAAmB,CAAC;AAC3G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B;;GAEG;AACH,KAAK,mBAAmB,GAAG;IACzB,gCAAgC;IAChC,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACnC,6BAA6B;IAC7B,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC7B,gCAAgC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,KAAK,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACpC,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,QAAA,MAAyB,WAAW,2BACsB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,QAAQ,CAAC,EAChB,OAAmB,EACnB,IAAgB,EAChB,QAAgB,EAChB,KAAY,EACZ,YAAmB,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CA0EhB;AAED;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,aAAiB,EACjB,QAAgB,GACjB,EAAE,mBAAmB,2CA+BrB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAqBrB;AAED;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,eAAe,EACf,WAAW,EACX,aAAa,EACb,KAAK,GACN,EAAE,oBAAoB,2CAqBtB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAoBvB;AAED;;;;;;;;;GASG;AACH,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,OAAmB,EACnB,SAAS,GACV,EAAE,qBAAqB,2CAkBvB;AAED;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,OAAO,EACL,QAAQ,EACR,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,GACjB,CAAC;AAGF,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,eAAe,EACf,YAAY,EACZ,YAAY,GACb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}