@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/components/Toaster/useToast.d.ts

@@ -1,245 +0,0 @@
-import { ReactNode } from 'react';
-import { ToastActionElement, ToastProps } from './Toast';
-/**
- * Extended toast configuration with additional properties for the toast system.
- *
- * Combines base ToastProps with specific fields needed for toast management
- * including unique identification and content elements.
- *
- * @example
- * ```tsx
- * const toast: ToasterToast = {
- *   id: '1',
- *   variant: 'success',
- *   title: 'Success!',
- *   description: 'Your action completed successfully.',
- *   action: <ToastAction altText="View details">View</ToastAction>
- * };
- * ```
- */
-type ToasterToast = ToastProps & {
-    /** Unique identifier for the toast instance */
-    id: string;
-    /** Optional title text or React element */
-    title?: ReactNode;
-    /** Optional description text or React element */
-    description?: ReactNode;
-    /** Optional action button element */
-    action?: ToastActionElement;
-};
-/**
- * Action types for toast state management using reducer pattern.
- *
- * Defines all possible actions that can be performed on the toast state,
- * enabling predictable state updates and better debugging.
- */
-declare enum ActionTypes {
-    /** Add a new toast to the display queue */
-    ADD_TOAST = "ADD_TOAST",
-    /** Update properties of an existing toast */
-    UPDATE_TOAST = "UPDATE_TOAST",
-    /** Mark a toast as dismissed (triggers exit animation) */
-    DISMISS_TOAST = "DISMISS_TOAST",
-    /** Completely remove a toast from memory */
-    REMOVE_TOAST = "REMOVE_TOAST"
-}
-type Action = {
-    type: ActionTypes.ADD_TOAST;
-    toast: ToasterToast;
-} | {
-    type: ActionTypes.UPDATE_TOAST;
-    toast: Partial<ToasterToast>;
-} | {
-    type: ActionTypes.DISMISS_TOAST;
-    toastId?: ToasterToast['id'];
-} | {
-    type: ActionTypes.REMOVE_TOAST;
-    toastId?: ToasterToast['id'];
-};
-type State = {
-    toasts: ToasterToast[];
-};
-/**
- * Toast state reducer function that handles all toast state transitions.
- *
- * Implements predictable state updates using the reducer pattern, ensuring
- * consistent behavior across all toast operations.
- *
- * ## State Management
- * - **ADD_TOAST**: Adds new toast and enforces limit by removing excess toasts
- * - **UPDATE_TOAST**: Updates existing toast properties while preserving identity
- * - **DISMISS_TOAST**: Marks toasts as closed and schedules removal
- * - **REMOVE_TOAST**: Permanently removes toasts from state
- *
- * ## Side Effects
- * The DISMISS_TOAST action includes side effects for scheduling toast removal,
- * which could be extracted but is kept here for simplicity.
- *
- * @param state - Current toast state
- * @param action - Action to perform on the state
- * @returns Updated toast state
- *
- * @example
- * ```tsx
- * // Add a new toast
- * const newState = reducer(state, {
- *   type: ActionTypes.ADD_TOAST,
- *   toast: { id: '1', title: 'Hello', variant: 'default' }
- * });
- *
- * // Dismiss a specific toast
- * const dismissedState = reducer(state, {
- *   type: ActionTypes.DISMISS_TOAST,
- *   toastId: '1'
- * });
- * ```
- */
-export declare const reducer: (state: State, action: Action) => State;
-/**
- * Toast configuration type for creating new toasts.
- * Omits the 'id' field as it's automatically generated.
- */
-type Toast = Omit<ToasterToast, 'id'>;
-/**
- * Creates and displays a new toast notification.
- *
- * This is the primary function for showing toast notifications to users.
- * It automatically generates unique IDs, handles state updates, and provides
- * control functions for managing the toast lifecycle.
- *
- * ## Features
- * - **Automatic ID Generation**: Each toast gets a unique identifier
- * - **State Management**: Integrates with global toast state
- * - **Lifecycle Control**: Returns functions to update or dismiss the toast
- * - **Auto-dismiss**: Automatically closes when user dismisses
- *
- * ## Return Value
- * Returns an object with control functions:
- * - `id`: Unique identifier for the toast
- * - `dismiss()`: Function to manually dismiss the toast
- * - `update()`: Function to update toast properties
- *
- * @param props - Toast configuration (title, description, variant, etc.)
- * @returns Object with toast ID and control functions
- *
- * @example
- * ```tsx
- * // Basic success toast
- * const { dismiss } = toast({
- *   title: 'Success!',
- *   description: 'Your file was uploaded successfully.',
- *   variant: 'success'
- * });
- *
- * // Error toast with retry action
- * const errorToast = toast({
- *   title: 'Upload Failed',
- *   description: 'Could not upload file. Please try again.',
- *   variant: 'error',
- *   action: <ToastAction altText="Retry upload">Retry</ToastAction>
- * });
- *
- * // Update toast content dynamically
- * errorToast.update({
- *   title: 'Retrying...',
- *   description: 'Please wait while we retry the upload.',
- *   variant: 'default'
- * });
- *
- * // Manually dismiss toast
- * setTimeout(() => errorToast.dismiss(), 5000);
- * ```
- */
-declare const toast: ({ ...props }: Toast) => {
-    id: string;
-    dismiss: () => void;
-    update: (props: ToasterToast) => void;
-};
-/**
- * React hook for managing toast notifications.
- *
- * Provides access to the global toast state and functions for creating and
- * managing toast notifications. This hook connects components to the toast
- * system and ensures reactive updates when toasts change.
- *
- * ## Features
- * - **State Synchronization**: Automatically updates when toast state changes
- * - **Toast Creation**: Provides the `toast()` function for creating notifications
- * - **Batch Dismissal**: Can dismiss all toasts or specific toasts by ID
- * - **Memory Management**: Handles proper cleanup of listeners
- *
- * ## Return Value
- * - `toasts`: Array of current toast objects
- * - `toast()`: Function to create new toast notifications
- * - `dismiss()`: Function to dismiss toasts (all or by ID)
- *
- * @returns Toast state and control functions
- *
- * @example
- * ```tsx
- * function NotificationButton() {
- *   const { toast, toasts, dismiss } = useToast();
- *
- *   const showSuccess = () => {
- *     toast({
- *       title: 'Success!',
- *       description: 'Operation completed successfully.',
- *       variant: 'success'
- *     });
- *   };
- *
- *   const clearAll = () => {
- *     dismiss(); // Dismisses all toasts
- *   };
- *
- *   return (
- *     <div>
- *       <button onClick={showSuccess}>Show Success</button>
- *       <button onClick={clearAll}>Clear All ({toasts.length})</button>
- *     </div>
- *   );
- * }
- *
- * // Usage in a form component
- * function ContactForm() {
- *   const { toast } = useToast();
- *
- *   const handleSubmit = async (data) => {
- *     try {
- *       await submitForm(data);
- *       toast({
- *         title: 'Form Submitted',
- *         description: 'We\'ll get back to you soon!',
- *         variant: 'success'
- *       });
- *     } catch (error) {
- *       toast({
- *         title: 'Submission Failed',
- *         description: 'Please check your connection and try again.',
- *         variant: 'error',
- *         action: <ToastAction altText="Retry">Retry</ToastAction>
- *       });
- *     }
- *   };
- *
- *   // ... form JSX
- * }
- * ```
- *
- * ## Usage Notes
- * - Must be used within a component tree that includes `<Toaster />`
- * - Toast state is global - changes affect all components using this hook
- * - Toasts are automatically cleaned up after the configured delay
- * - Consider UX best practices: don't overwhelm users with too many toasts
- */
-declare const useToast: () => {
-    toast: ({ ...props }: Toast) => {
-        id: string;
-        dismiss: () => void;
-        update: (props: ToasterToast) => void;
-    };
-    dismiss: (toastId?: string) => void;
-    toasts: ToasterToast[];
-};
-export { toast, useToast };
-//# sourceMappingURL=useToast.d.ts.map

package/dist/components/Toaster/useToast.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/useToast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAc9D;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,YAAY,GAAG,UAAU,GAAG;IAC/B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iDAAiD;IACjD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qCAAqC;IACrC,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF;;;;;GAKG;AACH,aAAK,WAAW;IACd,2CAA2C;IAC3C,SAAS,cAAc;IACvB,6CAA6C;IAC7C,YAAY,iBAAiB;IAC7B,0DAA0D;IAC1D,aAAa,kBAAkB;IAC/B,4CAA4C;IAC5C,YAAY,iBAAiB;CAC9B;AASD,KAAK,MAAM,GACP;IACE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC;IAC5B,KAAK,EAAE,YAAY,CAAC;CACrB,GACD;IACE,IAAI,EAAE,WAAW,CAAC,YAAY,CAAC;IAC/B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC9B,GACD;IACE,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CAC9B,GACD;IACE,IAAI,EAAE,WAAW,CAAC,YAAY,CAAC;IAC/B,OAAO,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CAC9B,CAAC;AAEN,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,YAAY,EAAE,CAAC;CACxB,CAAC;AAoBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,EAAE,QAAQ,MAAM,KAAG,KAqDtD,CAAC;AAaF;;;GAGG;AACH,KAAK,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,QAAA,MAAM,KAAK,GAAI,cAAc,KAAK;;;oBAGT,YAAY;CAyBpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,QAAA,MAAM,QAAQ;0BA3Ge,KAAK;;;wBAGT,YAAY;;wBAwHb,MAAM;YA7SpB,YAAY,EAAE;CAgTvB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Toaster/useToast.mjs

@@ -1,124 +0,0 @@
-"use client";
-import { useState, useEffect } from "react";
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 15 * 60 * 1e3;
-let count = 0;
-const genId = () => {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-};
-const toastTimeouts = /* @__PURE__ */ new Map();
-const addToRemoveQueue = (toastId) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId
-    });
-  }, TOAST_REMOVE_DELAY);
-  toastTimeouts.set(toastId, timeout);
-};
-const reducer = (state, action) => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
-      };
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map(
-          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
-        )
-      };
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast2) => {
-          addToRemoveQueue(toast2.id);
-        });
-      }
-      return {
-        ...state,
-        toasts: state.toasts.map(
-          (t) => t.id === toastId || toastId === void 0 ? {
-            ...t,
-            open: false
-          } : t
-        )
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === void 0) {
-        return {
-          ...state,
-          toasts: []
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId)
-      };
-  }
-};
-const listeners = [];
-let memoryState = { toasts: [] };
-const dispatch = (action) => {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
-};
-const toast = ({ ...props }) => {
-  const id = genId();
-  const update = (props2) => dispatch({
-    type: "UPDATE_TOAST",
-    toast: { ...props2, id }
-  });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      }
-    }
-  });
-  return {
-    id,
-    dismiss,
-    update
-  };
-};
-const useToast = () => {
-  const [state, setState] = useState(memoryState);
-  useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
-  };
-};
-export {
-  reducer,
-  toast,
-  useToast
-};
-//# sourceMappingURL=useToast.mjs.map

package/dist/components/Toaster/useToast.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToast.mjs","sources":["../../../src/components/Toaster/useToast.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\nimport type { ToastActionElement, ToastProps } from './Toast';\n\n/**\n * Maximum number of toasts that can be displayed simultaneously.\n * Prevents UI overflow and maintains clean notification experience.\n */\nconst TOAST_LIMIT = 1;\n\n/**\n * Delay before automatically removing dismissed toasts from memory.\n * Set to 15 minutes (900,000ms) to allow for potential undo actions.\n */\nconst TOAST_REMOVE_DELAY = 15 * 60 * 1000; // 15 seconds\n\n/**\n * Extended toast configuration with additional properties for the toast system.\n *\n * Combines base ToastProps with specific fields needed for toast management\n * including unique identification and content elements.\n *\n * @example\n * ```tsx\n * const toast: ToasterToast = {\n *   id: '1',\n *   variant: 'success',\n *   title: 'Success!',\n *   description: 'Your action completed successfully.',\n *   action: <ToastAction altText=\"View details\">View</ToastAction>\n * };\n * ```\n */\ntype ToasterToast = ToastProps & {\n  /** Unique identifier for the toast instance */\n  id: string;\n  /** Optional title text or React element */\n  title?: ReactNode;\n  /** Optional description text or React element */\n  description?: ReactNode;\n  /** Optional action button element */\n  action?: ToastActionElement;\n};\n\n/**\n * Action types for toast state management using reducer pattern.\n *\n * Defines all possible actions that can be performed on the toast state,\n * enabling predictable state updates and better debugging.\n */\nenum ActionTypes {\n  /** Add a new toast to the display queue */\n  ADD_TOAST = 'ADD_TOAST',\n  /** Update properties of an existing toast */\n  UPDATE_TOAST = 'UPDATE_TOAST',\n  /** Mark a toast as dismissed (triggers exit animation) */\n  DISMISS_TOAST = 'DISMISS_TOAST',\n  /** Completely remove a toast from memory */\n  REMOVE_TOAST = 'REMOVE_TOAST',\n}\n\nlet count = 0;\n\nconst genId = () => {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER;\n  return count.toString();\n};\n\ntype Action =\n  | {\n      type: ActionTypes.ADD_TOAST;\n      toast: ToasterToast;\n    }\n  | {\n      type: ActionTypes.UPDATE_TOAST;\n      toast: Partial<ToasterToast>;\n    }\n  | {\n      type: ActionTypes.DISMISS_TOAST;\n      toastId?: ToasterToast['id'];\n    }\n  | {\n      type: ActionTypes.REMOVE_TOAST;\n      toastId?: ToasterToast['id'];\n    };\n\ntype State = {\n  toasts: ToasterToast[];\n};\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return;\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId);\n    dispatch({\n      type: ActionTypes.REMOVE_TOAST,\n      toastId: toastId,\n    });\n  }, TOAST_REMOVE_DELAY);\n\n  toastTimeouts.set(toastId, timeout);\n};\n\n/**\n * Toast state reducer function that handles all toast state transitions.\n *\n * Implements predictable state updates using the reducer pattern, ensuring\n * consistent behavior across all toast operations.\n *\n * ## State Management\n * - **ADD_TOAST**: Adds new toast and enforces limit by removing excess toasts\n * - **UPDATE_TOAST**: Updates existing toast properties while preserving identity\n * - **DISMISS_TOAST**: Marks toasts as closed and schedules removal\n * - **REMOVE_TOAST**: Permanently removes toasts from state\n *\n * ## Side Effects\n * The DISMISS_TOAST action includes side effects for scheduling toast removal,\n * which could be extracted but is kept here for simplicity.\n *\n * @param state - Current toast state\n * @param action - Action to perform on the state\n * @returns Updated toast state\n *\n * @example\n * ```tsx\n * // Add a new toast\n * const newState = reducer(state, {\n *   type: ActionTypes.ADD_TOAST,\n *   toast: { id: '1', title: 'Hello', variant: 'default' }\n * });\n *\n * // Dismiss a specific toast\n * const dismissedState = reducer(state, {\n *   type: ActionTypes.DISMISS_TOAST,\n *   toastId: '1'\n * });\n * ```\n */\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case ActionTypes.ADD_TOAST:\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      };\n\n    case ActionTypes.UPDATE_TOAST:\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      };\n\n    case ActionTypes.DISMISS_TOAST: {\n      const { toastId } = action;\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId);\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id);\n        });\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      };\n    }\n    case ActionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        };\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      };\n  }\n};\n\nconst listeners: ((state: State) => void)[] = [];\n\nlet memoryState: State = { toasts: [] };\n\nconst dispatch = (action: Action) => {\n  memoryState = reducer(memoryState, action);\n  listeners.forEach((listener) => {\n    listener(memoryState);\n  });\n};\n\n/**\n * Toast configuration type for creating new toasts.\n * Omits the 'id' field as it's automatically generated.\n */\ntype Toast = Omit<ToasterToast, 'id'>;\n\n/**\n * Creates and displays a new toast notification.\n *\n * This is the primary function for showing toast notifications to users.\n * It automatically generates unique IDs, handles state updates, and provides\n * control functions for managing the toast lifecycle.\n *\n * ## Features\n * - **Automatic ID Generation**: Each toast gets a unique identifier\n * - **State Management**: Integrates with global toast state\n * - **Lifecycle Control**: Returns functions to update or dismiss the toast\n * - **Auto-dismiss**: Automatically closes when user dismisses\n *\n * ## Return Value\n * Returns an object with control functions:\n * - `id`: Unique identifier for the toast\n * - `dismiss()`: Function to manually dismiss the toast\n * - `update()`: Function to update toast properties\n *\n * @param props - Toast configuration (title, description, variant, etc.)\n * @returns Object with toast ID and control functions\n *\n * @example\n * ```tsx\n * // Basic success toast\n * const { dismiss } = toast({\n *   title: 'Success!',\n *   description: 'Your file was uploaded successfully.',\n *   variant: 'success'\n * });\n *\n * // Error toast with retry action\n * const errorToast = toast({\n *   title: 'Upload Failed',\n *   description: 'Could not upload file. Please try again.',\n *   variant: 'error',\n *   action: <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * });\n *\n * // Update toast content dynamically\n * errorToast.update({\n *   title: 'Retrying...',\n *   description: 'Please wait while we retry the upload.',\n *   variant: 'default'\n * });\n *\n * // Manually dismiss toast\n * setTimeout(() => errorToast.dismiss(), 5000);\n * ```\n */\nconst toast = ({ ...props }: Toast) => {\n  const id = genId();\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: ActionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    });\n  const dismiss = () =>\n    dispatch({ type: ActionTypes.DISMISS_TOAST, toastId: id });\n\n  dispatch({\n    type: ActionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss();\n      },\n    },\n  });\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  };\n};\n\n/**\n * React hook for managing toast notifications.\n *\n * Provides access to the global toast state and functions for creating and\n * managing toast notifications. This hook connects components to the toast\n * system and ensures reactive updates when toasts change.\n *\n * ## Features\n * - **State Synchronization**: Automatically updates when toast state changes\n * - **Toast Creation**: Provides the `toast()` function for creating notifications\n * - **Batch Dismissal**: Can dismiss all toasts or specific toasts by ID\n * - **Memory Management**: Handles proper cleanup of listeners\n *\n * ## Return Value\n * - `toasts`: Array of current toast objects\n * - `toast()`: Function to create new toast notifications\n * - `dismiss()`: Function to dismiss toasts (all or by ID)\n *\n * @returns Toast state and control functions\n *\n * @example\n * ```tsx\n * function NotificationButton() {\n *   const { toast, toasts, dismiss } = useToast();\n *\n *   const showSuccess = () => {\n *     toast({\n *       title: 'Success!',\n *       description: 'Operation completed successfully.',\n *       variant: 'success'\n *     });\n *   };\n *\n *   const clearAll = () => {\n *     dismiss(); // Dismisses all toasts\n *   };\n *\n *   return (\n *     <div>\n *       <button onClick={showSuccess}>Show Success</button>\n *       <button onClick={clearAll}>Clear All ({toasts.length})</button>\n *     </div>\n *   );\n * }\n *\n * // Usage in a form component\n * function ContactForm() {\n *   const { toast } = useToast();\n *\n *   const handleSubmit = async (data) => {\n *     try {\n *       await submitForm(data);\n *       toast({\n *         title: 'Form Submitted',\n *         description: 'We\\'ll get back to you soon!',\n *         variant: 'success'\n *       });\n *     } catch (error) {\n *       toast({\n *         title: 'Submission Failed',\n *         description: 'Please check your connection and try again.',\n *         variant: 'error',\n *         action: <ToastAction altText=\"Retry\">Retry</ToastAction>\n *       });\n *     }\n *   };\n *\n *   // ... form JSX\n * }\n * ```\n *\n * ## Usage Notes\n * - Must be used within a component tree that includes `<Toaster />`\n * - Toast state is global - changes affect all components using this hook\n * - Toasts are automatically cleaned up after the configured delay\n * - Consider UX best practices: don't overwhelm users with too many toasts\n */\nconst useToast = () => {\n  const [state, setState] = useState<State>(memoryState);\n\n  useEffect(() => {\n    listeners.push(setState);\n    return () => {\n      const index = listeners.indexOf(setState);\n      if (index > -1) {\n        listeners.splice(index, 1);\n      }\n    };\n  }, [state]);\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) =>\n      dispatch({ type: ActionTypes.DISMISS_TOAST, toastId }),\n  };\n};\n\nexport { toast, useToast };\n"],"names":["toast","props"],"mappings":"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"}

package/dist/components/WithResizer/index.cjs

@@ -1,91 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ReactExports = require("react");
-const utils_cn = require("../../utils/cn.cjs");
-const WithResizer = ({
-  initialWidth,
-  maxWidth,
-  minWidth = 0,
-  children
-}) => {
-  const containerRef = ReactExports.useRef(null);
-  const [width, setWidth] = ReactExports.useState(initialWidth);
-  const [isResizing, setIsResizing] = ReactExports.useState(false);
-  const startResizing = ReactExports.useCallback(
-    (mouseDownEvent) => {
-      setIsResizing(true);
-      mouseDownEvent.preventDefault();
-    },
-    []
-  );
-  const stopResizing = ReactExports.useCallback(() => {
-    setIsResizing(false);
-  }, []);
-  const resize = ReactExports.useCallback(
-    (mouseMoveEvent) => {
-      const container = containerRef.current;
-      if (isResizing && container && parent) {
-        const { left: containerLeft } = container.getBoundingClientRect();
-        let clientX = 0;
-        if (mouseMoveEvent instanceof MouseEvent) {
-          clientX = mouseMoveEvent.clientX;
-        } else if (mouseMoveEvent instanceof TouchEvent) {
-          clientX = mouseMoveEvent.touches[0].clientX;
-        }
-        const newWidth = clientX - containerLeft;
-        const correctedWidth = Math.max(newWidth, 0);
-        setWidth(correctedWidth);
-      }
-    },
-    [isResizing]
-  );
-  ReactExports.useEffect(() => {
-    window.addEventListener("mousemove", resize, { passive: true });
-    window.addEventListener("mouseup", stopResizing);
-    window.addEventListener("touchmove", resize, { passive: true });
-    window.addEventListener("touchend", stopResizing);
-    return () => {
-      window.removeEventListener("mousemove", resize);
-      window.removeEventListener("mouseup", stopResizing);
-      window.removeEventListener("touchmove", resize);
-      window.removeEventListener("touchend", stopResizing);
-    };
-  }, [resize, stopResizing]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: utils_cn.cn(
-        minWidth && `max-w-[${maxWidth}px]`,
-        maxWidth && `min-w-[${minWidth}px]`,
-        "relative h-full w-full max-w-[80%] cursor-ew-resize border-r-[2px] border-neutral-200 transition dark:border-neutral-950",
-        'after:absolute after:right-0 after:top-1/2 after:block after:h-10 after:w-2 after:-translate-y-1/2 after:translate-x-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[""] dark:after:bg-neutral-950',
-        "active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600"
-      ),
-      style: {
-        width: `${width}px`
-      },
-      ref: containerRef,
-      onMouseDown: startResizing,
-      onTouchStart: startResizing,
-      "aria-valuemin": minWidth,
-      "aria-valuemax": maxWidth,
-      "aria-valuenow": width,
-      "aria-label": "Resizable component",
-      role: "slider",
-      tabIndex: 0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "absolute left-0 top-0 size-full cursor-default overflow-hidden",
-          onMouseDown: (e) => e.stopPropagation(),
-          onTouchStart: (e) => e.stopPropagation(),
-          children
-        }
-      )
-    }
-  );
-};
-exports.WithResizer = WithResizer;
-//# sourceMappingURL=index.cjs.map

package/dist/components/WithResizer/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the WithResizer component.\n *\n * Defines the configuration for a resizable container with drag-based width adjustment.\n *\n * @example\n * ```tsx\n * // Basic resizable container\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>\n *   <div className=\"p-4\">Resizable content</div>\n * </WithResizer>\n *\n * // Sidebar with resizing\n * <WithResizer\n *   initialWidth={250}\n *   minWidth={180}\n *   maxWidth={400}\n * >\n *   <nav className=\"h-full p-4\">\n *     <SidebarContent />\n *   </nav>\n * </WithResizer>\n *\n * // Panel with unlimited growth\n * <WithResizer initialWidth={400} minWidth={300}>\n *   <div className=\"h-full overflow-auto\">\n *     <PanelContent />\n *   </div>\n * </WithResizer>\n * ```\n */\ntype WithResizerProps = {\n  /** Initial width of the resizable container in pixels */\n  initialWidth: number;\n  /** Maximum allowed width in pixels (optional, no limit if not specified) */\n  maxWidth?: number;\n  /** Minimum allowed width in pixels */\n  minWidth?: number;\n};\n\n/**\n * WithResizer Component\n *\n * A flexible container component that allows users to dynamically resize its width\n * through mouse or touch drag interactions. Perfect for creating adjustable panels,\n * sidebars, and split-pane layouts.\n *\n * ## Features\n * - **Mouse & Touch Support**: Works with both mouse drag and touch interactions\n * - **Constraint Enforcement**: Respects minimum and maximum width boundaries\n * - **Visual Feedback**: Clear resize handle with hover and active states\n * - **Smooth Interactions**: Passive event listeners for optimal performance\n * - **Accessibility**: ARIA slider role with proper value announcements\n * - **Responsive Design**: Adapts to different screen sizes and containers\n *\n * ## Technical Implementation\n * - **Event Handling**: Uses `useCallback` for optimal performance\n * - **Boundary Calculation**: Real-time width calculation based on mouse/touch position\n * - **State Management**: Tracks resizing state for visual feedback\n * - **Memory Management**: Proper cleanup of global event listeners\n * - **Touch Events**: Full support for mobile touch interactions\n *\n * ## Visual Design\n * - **Resize Handle**: Rounded handle positioned on the right border\n * - **Border Indicator**: Visual border showing resizable edge\n * - **State Feedback**: Different colors for normal, hover, and active states\n * - **Dark Mode**: Full support with appropriate color scheme\n * - **Smooth Transitions**: CSS transitions for visual polish\n *\n * ## Use Cases\n * - **Application Sidebars**: Collapsible navigation and tool panels\n * - **Content Panels**: Adjustable content areas in complex layouts\n * - **Split Panes**: Dividing screen space between multiple content areas\n * - **Inspector Panels**: Debugging tools and property inspectors\n * - **File Explorers**: Tree views with adjustable column widths\n * - **Dashboard Widgets**: Customizable widget sizes for dashboards\n *\n * ## Accessibility Features\n * - **ARIA Slider**: Proper slider role for screen readers\n * - **Value Announcements**: Current, minimum, and maximum values announced\n * - **Keyboard Focus**: Focusable with tab navigation\n * - **Clear Affordances**: Visual indicators for interactive elements\n *\n * @example\n * ```tsx\n * // Application sidebar with resizing\n * const [sidebarWidth, setSidebarWidth] = useState(250);\n *\n * <div className=\"flex h-screen\">\n *   <WithResizer\n *     initialWidth={sidebarWidth}\n *     minWidth={200}\n *     maxWidth={400}\n *   >\n *     <aside className=\"h-full bg-gray-100 p-4\">\n *       <nav>\n *         <NavItems />\n *       </nav>\n *     </aside>\n *   </WithResizer>\n *\n *   <main className=\"flex-1 p-6\">\n *     <MainContent />\n *   </main>\n * </div>\n *\n * // Developer tools panel\n * <WithResizer\n *   initialWidth={350}\n *   minWidth={250}\n *   maxWidth={600}\n * >\n *   <div className=\"h-full flex flex-col\">\n *     <div className=\"flex-1 overflow-auto p-4\">\n *       <InspectorContent />\n *     </div>\n *     <div className=\"border-t p-2\">\n *       <Controls />\n *     </div>\n *   </div>\n * </WithResizer>\n *\n * // Multi-column layout\n * <div className=\"flex h-full\">\n *   <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>\n *     <FileExplorer />\n *   </WithResizer>\n *\n *   <WithResizer initialWidth={400} minWidth={300}>\n *     <CodeEditor />\n *   </WithResizer>\n *\n *   <div className=\"flex-1 min-w-0\">\n *     <OutputPanel />\n *   </div>\n * </div>\n * ```\n *\n * ## Performance Considerations\n * - Uses passive event listeners to prevent scroll blocking\n * - Optimized with `useCallback` to prevent unnecessary re-renders\n * - Efficient boundary calculations using `getBoundingClientRect`\n * - Minimal DOM manipulation for smooth drag interactions\n *\n * ## Browser Support\n * - Modern browsers with support for touch events\n * - Graceful degradation for older browsers\n * - Mobile-first touch interaction handling\n */\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n  initialWidth,\n  maxWidth,\n  minWidth = 0,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(initialWidth);\n  const [isResizing, setIsResizing] = useState(false);\n\n  // Handler to start resizing\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      setIsResizing(true);\n      mouseDownEvent.preventDefault();\n    },\n    []\n  );\n\n  // Handler to stop resizing\n  const stopResizing = useCallback(() => {\n    setIsResizing(false);\n  }, []);\n\n  // Handler to resize the div\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      const container = containerRef.current;\n      if (isResizing && container && parent) {\n        const { left: containerLeft } = container.getBoundingClientRect();\n\n        let clientX = 0;\n        if (mouseMoveEvent instanceof MouseEvent) {\n          clientX = mouseMoveEvent.clientX;\n        } else if (mouseMoveEvent instanceof TouchEvent) {\n          clientX = mouseMoveEvent.touches[0].clientX;\n        }\n\n        const newWidth = clientX - containerLeft;\n        const correctedWidth = Math.max(newWidth, 0);\n\n        setWidth(correctedWidth);\n      }\n    },\n    [isResizing]\n  );\n\n  // Add event listeners for mouse move and mouse up\n  useEffect(() => {\n    window.addEventListener('mousemove', resize, { passive: true });\n    window.addEventListener('mouseup', stopResizing);\n    window.addEventListener('touchmove', resize, { passive: true });\n    window.addEventListener('touchend', stopResizing);\n\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  return (\n    <div\n      className={cn(\n        minWidth && `max-w-[${maxWidth}px]`,\n        maxWidth && `min-w-[${minWidth}px]`,\n        'relative h-full w-full max-w-[80%] cursor-ew-resize border-r-[2px] border-neutral-200 transition dark:border-neutral-950',\n        'after:absolute after:right-0 after:top-1/2 after:block after:h-10 after:w-2 after:-translate-y-1/2 after:translate-x-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n        'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600'\n      )}\n      style={{\n        width: `${width}px`,\n      }}\n      ref={containerRef}\n      onMouseDown={startResizing}\n      onTouchStart={startResizing}\n      aria-valuemin={minWidth}\n      aria-valuemax={maxWidth}\n      aria-valuenow={width}\n      aria-label=\"Resizable component\"\n      role=\"slider\"\n      tabIndex={0}\n    >\n      <div\n        className=\"absolute left-0 top-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["useRef","useState","useCallback","useEffect","jsx","cn"],"mappings":";;;;;;AAiKO,MAAM,cAAuD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,eAAeA,aAAAA,OAAuB,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAIC,aAAAA,SAAS,YAAY;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAIA,aAAAA,SAAS,KAAK;AAGlD,QAAM,gBAAgBC,aAAAA;AAAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;AAIH,QAAM,eAAeA,aAAAA,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;AAGL,QAAM,SAASA,aAAAA;AAAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,aAAa,QAAQ;AACrC,cAAM,EAAE,MAAM,kBAAkB,UAAU,sBAAA;AAE1C,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,WAAW,UAAU;AAC3B,cAAM,iBAAiB,KAAK,IAAI,UAAU,CAAC;AAE3C,iBAAS,cAAc;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAIbC,eAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT,YAAY,UAAU,QAAQ;AAAA,QAC9B,YAAY,UAAU,QAAQ;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MAAA;AAAA,MAEjB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}

package/dist/components/WithResizer/index.d.ts

@@ -1,152 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-/**
- * Props for the WithResizer component.
- *
- * Defines the configuration for a resizable container with drag-based width adjustment.
- *
- * @example
- * ```tsx
- * // Basic resizable container
- * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>
- *   <div className="p-4">Resizable content</div>
- * </WithResizer>
- *
- * // Sidebar with resizing
- * <WithResizer
- *   initialWidth={250}
- *   minWidth={180}
- *   maxWidth={400}
- * >
- *   <nav className="h-full p-4">
- *     <SidebarContent />
- *   </nav>
- * </WithResizer>
- *
- * // Panel with unlimited growth
- * <WithResizer initialWidth={400} minWidth={300}>
- *   <div className="h-full overflow-auto">
- *     <PanelContent />
- *   </div>
- * </WithResizer>
- * ```
- */
-type WithResizerProps = {
-    /** Initial width of the resizable container in pixels */
-    initialWidth: number;
-    /** Maximum allowed width in pixels (optional, no limit if not specified) */
-    maxWidth?: number;
-    /** Minimum allowed width in pixels */
-    minWidth?: number;
-};
-/**
- * WithResizer Component
- *
- * A flexible container component that allows users to dynamically resize its width
- * through mouse or touch drag interactions. Perfect for creating adjustable panels,
- * sidebars, and split-pane layouts.
- *
- * ## Features
- * - **Mouse & Touch Support**: Works with both mouse drag and touch interactions
- * - **Constraint Enforcement**: Respects minimum and maximum width boundaries
- * - **Visual Feedback**: Clear resize handle with hover and active states
- * - **Smooth Interactions**: Passive event listeners for optimal performance
- * - **Accessibility**: ARIA slider role with proper value announcements
- * - **Responsive Design**: Adapts to different screen sizes and containers
- *
- * ## Technical Implementation
- * - **Event Handling**: Uses `useCallback` for optimal performance
- * - **Boundary Calculation**: Real-time width calculation based on mouse/touch position
- * - **State Management**: Tracks resizing state for visual feedback
- * - **Memory Management**: Proper cleanup of global event listeners
- * - **Touch Events**: Full support for mobile touch interactions
- *
- * ## Visual Design
- * - **Resize Handle**: Rounded handle positioned on the right border
- * - **Border Indicator**: Visual border showing resizable edge
- * - **State Feedback**: Different colors for normal, hover, and active states
- * - **Dark Mode**: Full support with appropriate color scheme
- * - **Smooth Transitions**: CSS transitions for visual polish
- *
- * ## Use Cases
- * - **Application Sidebars**: Collapsible navigation and tool panels
- * - **Content Panels**: Adjustable content areas in complex layouts
- * - **Split Panes**: Dividing screen space between multiple content areas
- * - **Inspector Panels**: Debugging tools and property inspectors
- * - **File Explorers**: Tree views with adjustable column widths
- * - **Dashboard Widgets**: Customizable widget sizes for dashboards
- *
- * ## Accessibility Features
- * - **ARIA Slider**: Proper slider role for screen readers
- * - **Value Announcements**: Current, minimum, and maximum values announced
- * - **Keyboard Focus**: Focusable with tab navigation
- * - **Clear Affordances**: Visual indicators for interactive elements
- *
- * @example
- * ```tsx
- * // Application sidebar with resizing
- * const [sidebarWidth, setSidebarWidth] = useState(250);
- *
- * <div className="flex h-screen">
- *   <WithResizer
- *     initialWidth={sidebarWidth}
- *     minWidth={200}
- *     maxWidth={400}
- *   >
- *     <aside className="h-full bg-gray-100 p-4">
- *       <nav>
- *         <NavItems />
- *       </nav>
- *     </aside>
- *   </WithResizer>
- *
- *   <main className="flex-1 p-6">
- *     <MainContent />
- *   </main>
- * </div>
- *
- * // Developer tools panel
- * <WithResizer
- *   initialWidth={350}
- *   minWidth={250}
- *   maxWidth={600}
- * >
- *   <div className="h-full flex flex-col">
- *     <div className="flex-1 overflow-auto p-4">
- *       <InspectorContent />
- *     </div>
- *     <div className="border-t p-2">
- *       <Controls />
- *     </div>
- *   </div>
- * </WithResizer>
- *
- * // Multi-column layout
- * <div className="flex h-full">
- *   <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>
- *     <FileExplorer />
- *   </WithResizer>
- *
- *   <WithResizer initialWidth={400} minWidth={300}>
- *     <CodeEditor />
- *   </WithResizer>
- *
- *   <div className="flex-1 min-w-0">
- *     <OutputPanel />
- *   </div>
- * </div>
- * ```
- *
- * ## Performance Considerations
- * - Uses passive event listeners to prevent scroll blocking
- * - Optimized with `useCallback` to prevent unnecessary re-renders
- * - Efficient boundary calculations using `getBoundingClientRect`
- * - Minimal DOM manipulation for smooth drag interactions
- *
- * ## Browser Support
- * - Modern browsers with support for touch events
- * - Graceful degradation for older browsers
- * - Mobile-first touch interaction handling
- */
-export declare const WithResizer: FC<PropsWithChildren<WithResizerProps>>;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/WithResizer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/WithResizer/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAKZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,gBAAgB,GAAG;IACtB,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4GG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAiG/D,CAAC"}