@catalystsoftware/ui 1.0.12 → 1.0.15

package/dist/components/catalyst-ui/code/sandbox2.tsx

@@ -0,0 +1,3194 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react"
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react"
+import { cn, } from "~/components/catalyst-ui/utils";
+import { Badge, BookOpenText, Braces, Code, Copy, Download, Eye, ListRestart, Maximize2, Minimize2, Minus, RotateCcw, RotateCw, Save, Square, SquareSplitHorizontal, TimerIcon, TimerReset, X, } from "lucide-react";
+import { LiveProvider, LiveEditor, LivePreview, LiveError, } from "react-live";
+import { ClientOnly, } from "~/utils/client-only";
+import { Editor, } from "@monaco-editor/react";
+import { Burger, Stripe, TextWrap, } from "@catalystsoftware/icons";
+
+import { Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AnimatedNumber, BlobContext, Button, calendarDayButtonVariants, calendarNavButtonVariants, calendarVariants, Card, CircleMenu, damping,  DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicContainer, DynamicDescription, DynamicDiv, DynamicIsland, DynamicIslandProvider, DynamicIslandSizePresets, DynamicTitle, FeatureCarousel, filenameIconMap, FloatingPanel, FloatingPanelBody, FloatingPanelButton, FloatingPanelCloseButton, FloatingPanelContent, FloatingPanelFooter, FloatingPanelForm, FloatingPanelHeader, FloatingPanelLabel, FloatingPanelSubmitButton, FloatingPanelTextarea, FloatingPanelTrigger, GradientHeading, headingVariants, Input, IntroDisclosure, KBD, LightBoard, LoadingCarousel, LoadingPage, LogoCarousel, Modal, MorphSurface, Motion, MotionAlertDialog, MotionAlertDialogAction, MotionAlertDialogCancel, MotionAlertDialogContent, MotionAlertDialogDescription, MotionAlertDialogFooter, MotionAlertDialogHeader, MotionAlertDialogIcon, MotionAlertDialogOverlay, MotionAlertDialogPortal, MotionAlertDialogTitle, MotionAlertDialogTrigger, MotionCalendar, MotionCalendarDayButton, MotionCard, MotionCard1, MotionCard2, MotionCardContent, MotionCardFooter, MotionCardHeader, MotionCardTrigger, MotionCarousel, MotionChoicebox, MotionChoiceboxItem, MotionChoiceboxItemContent, MotionChoiceboxItemContentWrapper, MotionChoiceboxItemDescription, MotionChoiceboxItemHeader, MotionChoiceboxItemIndicator, MotionChoiceboxItemSubtitle, MotionChoiceboxItemTitle, MotionCombobox, MotionComboboxCommand, MotionComboboxEmpty, MotionComboboxGroup, MotionComboboxInput, MotionComboboxItem, MotionComboboxList, MotionCommand, MotionCommandDialog, MotionCommandEmpty, MotionCommandGroup, MotionCommandInput, MotionCommandItem, MotionCommandList, MotionCommandSeparator, MotionContent, MotionContext, MotionContextMenu, MotionContextMenuCheckboxItem, MotionContextMenuContent, MotionContextMenuGroup, MotionContextMenuItem, MotionContextMenuLabel, MotionContextMenuPortal, MotionContextMenuRadioGroup, MotionContextMenuRadioItem, MotionContextMenuSeparator, MotionContextMenuShortcut, MotionContextMenuSub, MotionContextMenuSubContent, MotionContextMenuSubTrigger, MotionContextMenuTrigger, MotionDatePicker, MotionDialog, MotionDrawer, MotionDrawer1, MotionDrawerAnimatedContent, MotionDrawerAnimatedWrapper, MotionDrawerButton, MotionDrawerClose, MotionDrawerContent, MotionDrawerHeader, MotionDrawerOverlay, MotionDrawerPortal, MotionDrawerSecondaryButton, MotionDrawerTrigger, MotionDrawerViewContent, MotionDropdownMenu, MotionDropdownMenuAnchor, MotionDropdownMenuCheckboxItem, MotionDropdownMenuContent, MotionDropdownMenuGroup, MotionDropdownMenuItem, MotionDropdownMenuLabel, MotionDropdownMenuPortal, MotionDropdownMenuRadioGroup, MotionDropdownMenuRadioItem, MotionDropdownMenuSeparator, MotionDropdownMenuShortcut, MotionDropdownMenuSub, MotionDropdownMenuSubContent, MotionDropdownMenuSubTrigger, MotionDropdownMenuTrigger, MotionFileUpload, MotionHoverCard, MotionImages, MotionNavigationMenu, MotionNavigationMenuContent, MotionNavigationMenuIndicator, MotionNavigationMenuItem, MotionNavigationMenuLink, MotionNavigationMenuList, MotionNavigationMenuTrigger, MotionNavigationMenuViewport, MotionPanel, MotionPopover, MotionScreen, MotionScreenBackground, MotionScreenContent, MotionScreenTrigger, MotionSearchBar, MotionSelect, MotionTabs, MotionTabsContent, MotionTabsList, MotionTabsTrigger, MotionToolbar, navigationMenuTriggerStyle, PopoverForm, PopoverFormClose, PopoverFormConfirm, PopoverFormContent, PopoverFormCutOutLeftIcon, PopoverFormCutOutRightIcon, PopoverFormDescription, PopoverFormFooter, PopoverFormHeader, PopoverFormSeparator, PopoverFormSuccess, PopoverFormTitle, PopoverFormTrigger, RadialMenu, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, ShiftCard, ShiftCardContent, ShiftCardHeader, SIZE_PRESETS, SortableList, SortableListItem, SpinnerV4, stiffness, TextureButton, Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle, TimerDisplay, TimerRoot, TooltipButton, FileTree, FileTreeDragLine, FileTreeItem, FileTreeItemLabel, useCopyToClipboard, useDynamicIslandSize, useLocalStorageAutoSave, useMotion, useMotionDrawer, useScheduledAnimations, useTimer, } from "~/components/catalyst-ui";
+
+/** import {
+   Choicebox,
+   
+  APIDocsHeader,
+  AboutPageHeader,
+  AbsoluteCenter,
+  AbsoluteCenterDemo,
+  AbsoluteCenterUsage,
+  AdvancedQRCodeExamples,
+  Affix,
+  AffixDemo,
+  Alert,
+  AlertVariantDemo,
+  Anchor,
+  AnchorText,
+  Android,
+  AnimatedHero,
+  AnimatedHero1,
+  AnimatedList,
+  AnimatedListDemo,
+  AnimatedListItem,
+  Announcement,
+  AnnouncementTag,
+  AnnouncementTitle,
+  AppDSLeft,
+  AppShell,
+  AppShellDemo,
+  AppToggle,
+  AppleBlurImage,
+  AppleCard,
+  AppleCarousel,
+  AppleCarouselContext,
+  AppleDockDemo,
+  ArticleMediaObject,
+  Banner2,
+  BannerAction2,
+  BannerClose2,
+  BannerContext,
+  BannerDemo1,
+  BannerDemo2,
+  BannerDemo3,
+  BannerDemo4,
+  BannerDemo5,
+  BannerDemo6,
+  BannerDemo7,
+  BannerDemo8,
+  BannerIcon2,
+  BannerSection,
+  BannerTitle2,
+  Barcode,
+  BentoCard,
+  BentoCard2,
+  BentoGrid,
+  BentoGrid2,
+  BentoGridDemo,
+  BentoGridDemo1,
+  BentoGridItem,
+  BlogHeader,
+  BoxDemo,
+  BoxUsage,
+  ButtonGroupDemo,
+  CTADemo,
+  Callout,
+  CardBody,
+  CardBody1,
+  CardContainer1,
+  CardFlipDemo,
+  CardHeading,
+  CardHeadingWithDropdown,
+  CardHeadingWithTabs,
+  CardItem,
+  CardItem1,
+  CardStackDemo,
+  CaseStudyHeader,
+  CategoryMenuDemo,
+  Center,
+  CenterDemo,
+  CenterUsage,
+  Changelog,
+  ChangelogSection,
+  ChanglelogDemo,
+  Chat,
+  ChatBubble,
+  ChatBubbleDemo,
+  ChatUsage,
+  CheckableTag,
+  Col,
+  CollapsibleSectionDemo,
+  Comment,
+  CommentDemo,
+  CommentForm,
+  CommentList,
+  CommentMediaObject,
+  CommentUsage,
+  CommunityHeader,
+  ConfigSection,
+  ConfigSectionDemo,
+  Contact,
+  ContactPageDemo1,
+  ContactPageDemo2,
+  ContactPageHeader,
+  ContactSection,
+  ContainerBasicExample,
+  ContainerDemo,
+  ContainerSidebarLayoutExample,
+  Content,
+  Content1,
+  Content2,
+  Content3,
+  ContentLayout,
+  CreditCard,
+  CreditCardChip,
+  CreditCardFlipper,
+  CreditCardName,
+  CustomQRCode,
+  DataList,
+  DataListActionMenu,
+  DataListActions,
+  DataListDemo,
+  DataListItem,
+  DataListKeyValue,
+  DataListLabel,
+  DataListRow,
+  DataListUsage,
+  DataListValue,
+  DatePicker,
+  DescriptionList,
+  DescriptionListWithActions,
+  DescriptionListWithBadges,
+  DescriptionListsDemo1,
+  DescriptionListsDemo2,
+  DeviceMockup,
+  DeviceMockupDemo,
+  DeviceMockupUsage,
+  Diff,
+  DiffUsage,
+  Dimmable,
+  Dimmer,
+  DimmerDemo,
+  DocPageDemo,
+  Dock,
+  DotLoader,
+  DotLoading,
+  DynamicHeader,
+  EFabDemo,
+  EditProductPageDemo,
+  EmptyState,
+  EmptyStateDemo,
+  ErrorPage,
+  ErrorPageHeader,
+  EventPageHeader,
+  FAB,
+  FABDemo,
+  FABUsage,
+  FAQ,
+  FabDemo,
+  FabMenuDemo,
+  FeaturePageHeader,
+  Feed,
+  FeedDemo,
+  FeedEvent,
+  FeedsDemo,
+  Filters,
+  FixedMarker,
+  FixedMarkerUsage,
+  FlexboxGrid,
+  FlexboxGridBasicExample,
+  FlexboxGridDemo,
+  FlexboxGridItem,
+  FlexboxGridResponsiveExample,
+  FooterDemo1,
+  FooterDemo2,
+  FooterDemo3,
+  FooterDemo4,
+  FooterLayout,
+  For,
+  ForDemo,
+  FormLayoutDemo,
+  FourOFourPage,
+  GlowingEffectCardDemo,
+  Grid,
+  GridBasicExample,
+  GridDemo,
+  GridList,
+  GridListsDemo,
+  GridOffsetExample,
+  GridResponsiveExample,
+  Group,
+  Header2Demo1,
+  Header2Demo2,
+  Header2Demo3,
+  Header2Demo4,
+  Header2Demo5,
+  HeaderDemo,
+  HeaderLayout,
+  HeatMapCalendar,
+  HeatMapCalendarDemo,
+  HeroBadge,
+  HeroVideoDialog,
+  IframeDemo,
+  InPlaceDemo,
+  Indicator,
+  IndicatorDemo,
+  InfoMenu,
+  InputGroupDemo,
+  InsufficientPermissions,
+  Iphone15Pro,
+  KBDDemo,
+  Keypad,
+  LandingPageHeader,
+  Layout,
+  LayoutContainerDemo,
+  Lid,
+  LimelightNav,
+  List,
+  List1,
+  ListContainer,
+  ListContainerDemo,
+  ListGroup,
+  ListHeader,
+  ListItem,
+  ListItems,
+  ListProvider,
+  LoadErrorPage,
+  Loading,
+  LoadingPage,
+  LogoClouds666,
+  MacbookScroll,
+  MagicCard,
+  MediaObject,
+  MediaObjectsDemo,
+  MegaMenuDemo,
+  MegaMenuUsage,
+  Menu,
+  MessageDock,
+  Meter,
+  MeterDemo,
+  MinPricingPage,
+  MinPricingSectionDemo,
+  MultiColumnLayouts1,
+  MultiColumnLayouts2,
+  MultiColumnShell,
+  Navbar13,
+  Navbar14,
+  Navbar15,
+  Navbar16,
+  Navbar17,
+  Navbar19,
+  NewsletterHeader,
+  NoteSection,
+  NoteSectionDemo,
+  NotificationMediaObject,
+  NotificationMenuNavbar12,
+  NotificationMenuNavbar14,
+  NumberTicker,
+  OverlayQRCodeExample,
+  PageHeading,
+  PageHeadingDemo,
+  PageNav,
+  PaginationButton,
+  PaginationWrapper,
+  PanelDemo,
+  PanelMenuDemo,
+  PanelUsage,
+  Pill,
+  PillAvatar,
+  PillAvatarGroup,
+  PillButton,
+  PillDelta,
+  PillIcon,
+  PillIndicator,
+  PillStatus,
+  PinList,
+  PlaceholderCode,
+  PricingPageHeader,
+  PricingWithParams,
+  PricingWithToggle,
+  ProductPageHeader,
+  QRCodeDemo,
+  Rail,
+  RailUsage,
+  RemixLinkText,
+  RemixNavLinkText,
+  ReviewMediaObject,
+  Row,
+  Safari,
+  Section,
+  SectionDemo,
+  SectionHeading,
+  SectionHeadingWithAvatar,
+  SectionHeadingWithDropdown,
+  SettingsMenuNavbar14,
+  SettingsScreenStackedsDemo,
+  SidebarDemo,
+  SidebarDemoDynamic,
+  SidebarLayout,
+  SidebarNav,
+  SidebarSettingsDemo,
+  SidebarShell,
+  SimpleTwoTierPricing,
+  SmoothTabDemo,
+  SpinDemo,
+  Spinner,
+  SpinnerDemo,
+  SpinnerV1Demo,
+  SpinnerV2,
+  SpinnerV3,
+  SpinnerV4,
+  SpinnerV4Demo,
+  Spoiler,
+  SpoilerDemo,
+  Stack,
+  StackUsage,
+  StackedList,
+  StackedListsDemo,
+  StackedSettingsDemo,
+  StackedShell,
+  Stat,
+  StatDemo,
+  StatDescription,
+  StatIcon,
+  StatIndicator,
+  StatLabel,
+  StatProgress,
+  StatText,
+  StatUsage,
+  StatValue,
+  Stats,
+  Stats1,
+  StepNumber,
+  Steps,
+  StepsDemo,
+  Sticky,
+  StickyDemo,
+  StorageUsage,
+  SwissQRCodeExample,
+  TabMenu,
+  TabMenuDemo,
+  TabMenuUsage,
+  TabViewDemo,
+  TableOfContentsDemo,
+  TabsSettingsDemo,
+  Tag,
+  TagDemo,
+  Team,
+  TeamMemberMediaObject,
+  TeamSwitcher12,
+  TeamSwitcher16,
+  ThreeDCard,
+  ThreeDCardDemo1,
+  Ticker,
+  TickerIcon,
+  TickerPrice,
+  TickerPriceChange,
+  TickerSymbol,
+  Timeline2,
+  TimelineDemo66,
+  TimelineV1,
+  TimelineV1Demo,
+  ToastDemo,
+  ToastDemo1,
+  Toasty,
+  ToolbarDemo,
+  ToolbarDemoV1,
+  Tracker,
+  TrackerDemo,
+  Trackpad,
+  TransferList,
+  TransferListDemo,
+  TweetCardDemo,
+  UnauthorizedPage,
+  UnderConstructionPage,
+  UsageSection,
+  UsageSectionDemo,
+  UsageSectionNoDash,
+  UsageSectionNoDashDemo,
+  UserMenu12,
+  UserMenu13,
+  exportQRCode,
+  formatNumber,
+  styleConfigs,
+  useTickerContext,
+  useToasted,
+  validateQRCodeValue,
+  
+  AgendaDaysToShow,
+  AgendaView,
+  AppointmentScheduler,
+  AppointmentSchedulerDemo,
+  CalendarBody,
+  CalendarDOB,
+  CalendarDate,
+  CalendarDatePagination,
+  CalendarDatePicker,
+  CalendarDndProvider,
+  CalendarHeader,
+  CalendarItem,
+  CalendarMonthPicker,
+  CalendarProvider,
+  CalendarYearPicker,
+  DatePicker,
+  DatePickerInput,
+  DateRangePicker,
+  DateRangePickerInput,
+  DayView,
+  DefaultEndHour,
+  DefaultStartHour,
+  DockedDatePickerDemo,
+  DraggableEvent,
+  DroppableCell,
+  EndHour,
+  EventCalendar,
+  EventDialog,
+  EventGap,
+  EventHeight,
+  EventItem,
+  EventsPopup,
+  MiniCalendar,
+  MiniCalendarDay,
+  MiniCalendarDays,
+  MiniCalendarNavigation,
+  ModalDateInputDemo,
+  MonthView,
+  PickWithInput,
+  PopoverDateInputDemo,
+  RangePicker,
+  RelativeTime,
+  RelativeTimeZone,
+  RelativeTimeZoneDate,
+  RelativeTimeZoneDisplay,
+  RelativeTimeZoneLabel,
+  SingleDay,
+  SingleDayMultiMonths,
+  StartHour,
+  TimePicker,
+  TimePickerDialDemo,
+  TimePickerInputDemo,
+  WeekCellsHeight,
+  WeekView,
+  addHoursToDate,
+  daysForLocale,
+  getAgendaEventsForDay,
+  getAllEventsForDay,
+  getBorderRadiusClasses,
+  getEventColorClasses,
+  getEventsForDay,
+  getSpanningEventsForDay,
+  isMultiDayEvent,
+  monthsForLocale,
+  sortEvents,
+  useCalendarDnd,
+  useCalendarMonth,
+  useCalendarYear,
+  useCurrentTimeIndicator1,
+  useEventVisibility1,
+  
+  AddressCard,
+  CategoryFilters,
+  CategoryFiltersDemo,
+  CategoryPreviews,
+  CategoryPreviewsDemo,
+  CheckoutForm,
+  CheckoutFormDemo,
+  CreditCardForm,
+  CustomerSupport,
+  EcommerceCategory,
+  EditProductPageDemo,
+  FilterSidebar,
+  FormInput,
+  FormSelect,
+  Incentives,
+  IncentivesDemo,
+  OrderHistory,
+  OrderHistoryDemo,
+  OrderItem,
+  OrderStatusBadge,
+  OrderStatusTimeline,
+  OrderSummary,
+  OrderSummaryDemo,
+  OrderSummaryItem,
+  PaymentCard,
+  PaymentMethodSelector,
+  PricingPageDemo1,
+  PricingPageDemo2,
+  PricingPageDemo3,
+  PricingPageDemo4,
+  PricingPageDemo5,
+  PricingPagePages,
+  ProductCard,
+  ProductCardDemo,
+  ProductFeatures,
+  ProductFeaturesDemo,
+  ProductList,
+  ProductListDemo,
+  ProductOverview,
+  ProductOverviewsDemo,
+  ProductPage,
+  ProductQuickview,
+  ProductQuickviewDemo,
+  PromoSection,
+  PromoSectionDemo,
+  QuickViewModal,
+  ReviewItem,
+  ReviewsComponent,
+  ReviewsDemo,
+  ShoppingCart,
+  ShoppingCartDemo,
+  StarRating,
+  StoreNavigation,
+  StoreNavigationDemo,
+  StorefrontPages,
+  TrustBadges,
+  filterProducts,
+  renderStars,
+  
+  ActionBar,
+  ActionBar1,
+  ActionBarBasicUsage,
+  ActionBarContent1,
+  ActionBarDemo1,
+  ActionBarDescription1,
+  ActionPanel,
+  ActionSearchBar,
+  ActionSearchBarDemo,
+  CVVInput,
+  CascadeTree,
+  Cascader,
+  CheckTree,
+  CheckTreeDemo,
+  CheckTreePicker,
+  CheckboxCard,
+  CheckboxV1,
+  ColorPicker1,
+  ColorPicker3,
+  ColorPickerAlpha3,
+  ColorPickerDemo,
+  ColorPickerEyeDropper3,
+  ColorPickerFormat3,
+  ColorPickerHue3,
+  ColorPickerOutput3,
+  ColorPickerSelection3,
+  CreditCardInput,
+  DebouncedInput,
+  ExampleComponent1,
+  ExpiryInput,
+  FancyArea,
+  FloatLabel,
+  FloatingLabel,
+  FormWizard,
+  FormWizardDefaultDemo,
+  FormWizardDemo,
+  FuseSearchInput,
+  InlineEdit,
+  InputMask,
+  JSONInputDemoPage,
+  Listbox,
+  MultiCascadeTree,
+  MultiCascadeTreeDemo,
+  MultiCascader,
+  MultiCascaderDemo,
+  MultiSelect,
+  PillsInput,
+  PinInputDemo,
+  Preview,
+  RadioTile,
+  RadioTileGroup,
+  Rating2,
+  SelectButton,
+  StepForm,
+  StepFormDefaultDemo,
+  StepFormDemo,
+  TagsInput1,
+  TreePicker,
+  TriStateCheckbox,
+  Write,
+  fuzzyFilter,
+  fuzzySort,
+  people,
+  useColorPicker3,
+  
+  DirectionalAnimationsDemo,
+  DynamicContentTracker,
+  EventSourceProvider,
+  GetColorThemeDemo,
+  HooksDocumentation,
+  HooksDocumentationDemo,
+  LOCAL_STORAGE_KEY,
+  ManagedStream,
+  MouseEnterContext,
+  PrefetchPageAnchors,
+  Stream,
+  StreamBridge,
+  StreamDemo,
+  StreamEmitter,
+  StreamManagerProvider,
+  TailwindConverterExample,
+  UseApiKeyDemo,
+  UseAutoScrollDemo,
+  UseClientDemo,
+  UseCurrentTimeIndicatorDemo,
+  UseExportMarkdownDemo,
+  UseFileUploadDemo,
+  UseMutationObserverDemo,
+  UsePaginationDemo,
+  addSubscriber,
+  broadcastToSubscribers,
+  colorThemes,
+  colorWheel,
+  createStreamExtension,
+  formatBytes,
+  highlightMatches,
+  highlightMatchesDebounced,
+  isLinkEvent,
+  subscribeToIntent,
+  useApiKey,
+  useAsync,
+  useAutoScroll,
+  useBreakpoint,
+  useCharacterLimit,
+  useClickOutside,
+  useClient,
+  useColorTheme,
+  useCopyToClipboard,
+  useCounter,
+  useCurrentTimeIndicator,
+  useDebounce,
+  useDebounceFetcher,
+  useDebounceSubmit,
+  useDebouncedFuseSearch,
+  useDelegatedAnchors,
+  useDevList,
+  useEventListener,
+  useEventSource,
+  useEventVisibility,
+  useExpandable,
+  useExport,
+  useExportMarkdown,
+  useExternalScripts,
+  useFavicon,
+  useFetch,
+  useFileUpload,
+  useFocus,
+  useFocusWithin,
+  useForm,
+  useFuseSearch,
+  useFuzzySearch,
+  useGlobalLoadingState,
+  useGlobalNavigationState,
+  useGlobalPendingState,
+  useGlobalSubmittingState,
+  useHover,
+  useHydrated,
+  useIntersectionObserver,
+  useInterval,
+  useIsMobile,
+  useKeyPress,
+  useKeyboard,
+  useLocalStorage,
+  useLocalStorageAutoSave,
+  useLocales,
+  useLongPress,
+  useMarkdownBatches,
+  useMarkdownToHtml,
+  useMediaQuery,
+  useMountEffect,
+  useMounted,
+  useMouseEnter,
+  useMove,
+  useMutationObserver,
+  useOnWindowResize,
+  useOnlineStatus,
+  useOutsideClick,
+  useOverlayListener,
+  useOverlayScrollListener,
+  usePagination,
+  usePress,
+  usePrevious,
+  useResizeListener,
+  useScrollPosition,
+  useSecFetchParser,
+  useSessionStorage,
+  useShouldHydrate,
+  useSlideIn,
+  useSlideInAnimation,
+  useSlideInV1,
+  useSliderWithInput,
+  useSmoothScroll,
+  useStream,
+  useStreamManager,
+  useTailwindConverter,
+  useThrottle,
+  useTimeout,
+  useTimer,
+  useToggle,
+  useUnmountEffect,
+  useUpdateEffect,
+  useWindowSize,
+  
+  Autocomplete,
+  Autocomplete1,
+  AutocompleteClear,
+  AutocompleteCollection,
+  AutocompleteDemo,
+  AutocompleteEmpty,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+  AutocompleteRow,
+  AutocompleteSeparator,
+  AutocompleteStatus,
+  AutocompleteTrigger,
+  AutocompleteValue,
+  CcInput,
+  EmailAddressInput,
+  InputWithCharactersLeft,
+  InputWithEndAddOn,
+  InputWithEndButton,
+  InputWithEndIconButton,
+  InputWithEndInlineAddOn,
+  InputWithEndInlineButton,
+  InputWithEndSelect,
+  InputWithInlineAddOns,
+  InputWithInlineStartAndEndAddOn,
+  InputWithInnerTags,
+  InputWithInsetLabel,
+  InputWithMask,
+  InputWithPasswordStrengthIndicator,
+  InputWithStartAddOn,
+  InputWithStartInlineAddOn,
+  InputWithStartSelect,
+  InputWithTags,
+  MotionsInput,
+  NumberInputWithChevrons,
+  NumberInputWithPlusMinusButtons,
+  SearchInputWithIconAndButton,
+  SearchInputWithKBD,
+  SearchInputWithLoader,
+  
+  AIPromptDemo,
+  ActionSheetDemo,
+  ActivityCard,
+  ActivityCardDemo,
+  BackgroundPaths,
+  ColorSwatch,
+  ColorSwatchDemo,
+  ColorSwatchUsage,
+  CurrencyTransferDemo,
+  Cursor,
+  CursorPointer,
+  Draggable,
+  DraggableCard,
+  DraggableDemo,
+  DraggableDemo2,
+  Drawing,
+  DrawingDemo,
+  DrawingSurface,
+  DrawingToolbar,
+  DrawingV2,
+  DrawingV2Demo,
+  DropZone,
+  DropZoneDemo56,
+  Dropzone,
+  DropzoneContent,
+  DropzoneDemo,
+  DropzoneEmptyState,
+  ExcelExport,
+  ExternalDropZone,
+  ExternalDropZoneDemo,
+  FileSaver,
+  FileUploadDemo,
+  GanttAddFeatureHelper,
+  GanttColumn,
+  GanttColumns,
+  GanttContentHeader,
+  GanttCreateMarkerTrigger,
+  GanttFeatureDragHelper,
+  GanttFeatureItem,
+  GanttFeatureItemCard,
+  GanttFeatureList,
+  GanttFeatureListGroup,
+  GanttFeatureRow,
+  GanttHeader,
+  GanttMarker,
+  GanttProvider,
+  GanttSidebar,
+  GanttSidebarGroup,
+  GanttSidebarHeader,
+  GanttSidebarItem,
+  GanttTimeline,
+  GanttToday,
+  KanbanBoard,
+  KanbanCard,
+  KanbanCards,
+  KanbanHeader,
+  KanbanProvider,
+  Lens,
+  MouseEffectCard,
+  MouseEffectCardDemo,
+  PDFGenerator,
+  PDFGeneratorDemo,
+  PdfSignature,
+  PdfSignatureCompactDemo,
+  PdfSignatureDemo,
+  PdfSignatureViewer,
+  PdfSignatureViewerCompactDemo,
+  PdfSignatureViewerDemo,
+  PdfViewer,
+  PdfViewerDemo,
+  PdfViewerMinimalDemo,
+  PinPerspective,
+  Pointer,
+  Ripple,
+  RippleDemo,
+  ScrollVelocityContainer,
+  ScrollVelocityRow,
+  ScrollVelocityRowImpl,
+  ScrollVelocityRowLocal,
+  SignatureDemo,
+  SignatureDemo2,
+  SortableDemo,
+  Spreadsheet,
+  SpreadsheetDemo,
+  TaskBoardDemo,
+  Terminal,
+  TerminalDemo,
+  TerminalService,
+  ThreeDPin,
+  Tour,
+  Tour1,
+  TourDemo,
+  TourDemov1,
+  Transition,
+  TransitionDemo,
+  TreeViewDemo,
+  Virtualizer,
+  VirtualizerDemo,
+  VirtualizerUsage,
+  Watermark,
+  canDiscountsPOs,
+  canEditAnnouncements,
+  canEditInventory,
+  canEditLabelPrinter,
+  canEditPO,
+  canEditPromotions,
+  canEditSchedule,
+  canEditStore,
+  canEditTemplates,
+  canEditTickets,
+  canEditUsers,
+  canImportExport,
+  canViewReports,
+  checkPermission,
+  hasPermission,
+  isMgr,
+  isReceiving,
+  requirePermission,
+  transitions,
+  useGanttDragging,
+  useGanttScrollX,
+  wrap,
+  
+  AnimatedTestimonials,
+  BentoGrids,
+  Blog,
+  BlogPost,
+  BlogPostEditor,
+  Cta,
+  FaqSection,
+  Feature,
+  FeatureCarousel,
+  FeatureCarouselDemo,
+  FeatureSection,
+  FeatureSectionDemo,
+  FeatureShowcase,
+  FeatureShowcaseDemo,
+  FlyoutMenuDemo,
+  Footer,
+  Header,
+  HeaderComponent,
+  Hero,
+  HeroSection,
+  HeroV2,
+  ImageSection,
+  ImageSectionDemo,
+  LandingPage,
+  LogoCloud,
+  Newsletter,
+  PageActions,
+  PageHeader,
+  
+  AvatarCircles,
+  AvatarCirclesDemo,
+  BasicMapUsage,
+  BlurFade,
+  CarouselHero,
+  CarouselHeroDemo555,
+  Comparison,
+  ComparisonDemo,
+  ComparisonHandle,
+  ComparisonItem,
+  Cropper,
+  EmblaCarouselDemo,
+  Galleria,
+  Globe,
+  GlobeDemo,
+  GoogleMap,
+  IconCloud,
+  Image,
+  ImageCrop,
+  ImageCropApply,
+  ImageCropContent,
+  ImageCropReset,
+  ImageZoom,
+  InfiniteScroll,
+  InfiniteScrollDemo,
+  InfiniteSlider,
+  InteractiveIconCloud,
+  LogoDemo,
+  MapDemo,
+  MapWithCustomStyling,
+  Marquee,
+  Marquee1,
+  MarqueeDemo,
+  NextButton,
+  ParallaxScroll,
+  ParallaxScrollDemo,
+  PixelImage,
+  PrevButton,
+  SelectedSnapDisplay,
+  SimpleCarouselDemo,
+  ThreeDMarquee,
+  VideoPlayer,
+  VideoPlayerContent,
+  VideoPlayerControlBar,
+  VideoPlayerMuteButton,
+  VideoPlayerPlayButton,
+  VideoPlayerSeekBackwardButton,
+  VideoPlayerSeekForwardButton,
+  VideoPlayerTimeDisplay,
+  VideoPlayerTimeRange,
+  VideoPlayerVolumeRange,
+  cloudProps,
+  renderCustomIcon,
+  usePrevNextButtons,
+  useSelectedSnapDisplay,
+  
+  AnimatedNumber,
+  AnimatedNumberExamples,
+  BackgroundMedia,
+  BgMediaDemo,
+  ColorPicker,
+  ColorPickerDemo,
+  ColorWheel,
+  ColorWheelDemo,
+  DirectionAwareTabs,
+  DirectionAwareTabsDemo,
+  DynamicIslandDemo,
+  FadeIn,
+  FadeInStagger,
+  FloatingPanel,
+  FloatingPanelBody,
+  FloatingPanelButton,
+  FloatingPanelCloseButton,
+  FloatingPanelContent,
+  FloatingPanelExamples,
+  FloatingPanelFooter,
+  FloatingPanelForm,
+  FloatingPanelHeader,
+  FloatingPanelLabel,
+  FloatingPanelSubmitButton,
+  FloatingPanelTextarea,
+  FloatingPanelTrigger,
+  GradientHeadingDemo,
+  IntroDisclosure,
+  IntroDisclosureDemo,
+  IntroDisclosureTab,
+  IntroDisclosureTrigger,
+  LightBoardDemo,
+  LogoCarouselDemo,
+  MonacoStorageManagerDemo,
+  MorphSurface,
+  MotionAccordion,
+  MotionAccordionContent,
+  MotionAccordionDemo,
+  MotionAccordionItem,
+  MotionAccordionTrigger,
+  MotionAlertDialogDemo,
+  MotionBentoGrid,
+  MotionBentoGridCard,
+  MotionBentoGridDemo,
+  MotionButton,
+  MotionButtonContent,
+  MotionButtonDemo,
+  MotionButtonTrigger,
+  MotionCalendarDemo,
+  MotionCard1,
+  MotionCard1Back,
+  MotionCard1BackAction,
+  MotionCard1BackActionIcon,
+  MotionCard1BackActionText,
+  MotionCard1BackContent,
+  MotionCard1BackDescription,
+  MotionCard1BackFeature,
+  MotionCard1BackFooter,
+  MotionCard1BackHeader,
+  MotionCard1BackTitle,
+  MotionCard1Demo,
+  MotionCard1Front,
+  MotionCard1FrontDescription,
+  MotionCard1FrontHeader,
+  MotionCard1FrontIcon,
+  MotionCard1FrontTitle,
+  MotionCard2,
+  MotionCard2Action,
+  MotionCard2Content,
+  MotionCard2Demo,
+  MotionCard2Description,
+  MotionCard2Footer,
+  MotionCard2Header,
+  MotionCard2Title,
+  MotionCard3Body,
+  MotionCard3Container,
+  MotionCard3Item,
+  MotionCardDemo,
+  MotionChoicebox,
+  MotionChoiceboxDemo,
+  MotionChoiceboxItem,
+  MotionChoiceboxItemContent,
+  MotionChoiceboxItemContentWrapper,
+  MotionChoiceboxItemDescription,
+  MotionChoiceboxItemHeader,
+  MotionChoiceboxItemIndicator,
+  MotionChoiceboxItemSubtitle,
+  MotionChoiceboxItemTitle,
+  MotionCombobox,
+  MotionComboboxCommand,
+  MotionComboboxDemo,
+  MotionComboboxEmpty,
+  MotionComboboxGroup,
+  MotionComboboxInput,
+  MotionComboboxItem,
+  MotionComboboxList,
+  MotionCommand,
+  MotionCommandDemo,
+  MotionCommandDialog,
+  MotionCommandEmpty,
+  MotionCommandGroup,
+  MotionCommandInput,
+  MotionCommandItem,
+  MotionCommandList,
+  MotionCommandSeparator,
+  MotionContextMenuDemo,
+  MotionDatePicker,
+  MotionDatePickerDemo,
+  MotionDialog,
+  MotionDialogClose,
+  MotionDialogContent,
+  MotionDialogDemo,
+  MotionDialogDescription,
+  MotionDialogFooter,
+  MotionDialogHeader,
+  MotionDialogOverlay,
+  MotionDialogPortal,
+  MotionDialogTitle,
+  MotionDialogTrigger,
+  MotionDrawer1,
+  MotionDropdown1,
+  MotionDropdown1Content,
+  MotionDropdown1Demo,
+  MotionDropdown1Group,
+  MotionDropdown1Item,
+  MotionDropdown1ItemWithIcon,
+  MotionDropdown1Label,
+  MotionDropdown1Portal,
+  MotionDropdown1ProfileTrigger,
+  MotionDropdown1Separator,
+  MotionDropdown1Shortcut,
+  MotionDropdown1Sub,
+  MotionDropdown1SubContent,
+  MotionDropdown1SubTrigger,
+  MotionDropdown1Trigger,
+  MotionDropdownMenuDemo,
+  MotionFileUpload,
+  MotionFileUploadDemo,
+  MotionHoverCard,
+  MotionHoverCardContent,
+  MotionHoverCardDemo,
+  MotionHoverCardTrigger,
+  MotionList,
+  MotionListDemo,
+  MotionListItem,
+  MotionNavigationMenuDemo,
+  MotionPanel,
+  MotionPopover,
+  MotionPopoverAnchor,
+  MotionPopoverClose,
+  MotionPopoverContent,
+  MotionPopoverDemo,
+  MotionPopoverDescription,
+  MotionPopoverFooter,
+  MotionPopoverHeader,
+  MotionPopoverTitle,
+  MotionPopoverTrigger,
+  MotionRadioCardItem,
+  MotionRadioCards,
+  MotionRating,
+  MotionRatingDemo,
+  MotionScreen,
+  MotionScreenBackground,
+  MotionScreenContent,
+  MotionScreenDemo,
+  MotionScreenTrigger,
+  MotionSearchBar,
+  MotionSearchBarDemo,
+  MotionSearchBarEmpty,
+  MotionSearchBarGroup,
+  MotionSearchBarInput,
+  MotionSearchBarItem,
+  MotionSearchBarList,
+  MotionSearchBarSeparator,
+  MotionSearchBarShortcut,
+  MotionSelectDemo,
+  MotionTabs,
+  MotionTabsContent,
+  MotionTabsDemo,
+  MotionTabsList,
+  MotionTabsTrigger,
+  MotionToast,
+  MotionToastDemo,
+  MotionToolbar,
+  MotionToolbarTabs,
+  MotionToolbarTabsCard,
+  MotionToolbarTabsContent,
+  MotionToolbarTabsDemo,
+  MotionToolbarTabsList,
+  MotionToolbarTabsTrigger,
+  MotionToolbarTabsWaveform,
+  MotionTooltip,
+  MotionTooltipContent,
+  MotionTooltipDemo,
+  MotionTooltipProvider,
+  MotionTooltipTrigger,
+  PopoverForm,
+  PopoverFormClose,
+  PopoverFormConfirm,
+  PopoverFormContent,
+  PopoverFormCutOutRightIcon,
+  PopoverFormDescription,
+  PopoverFormFooter,
+  PopoverFormHeader,
+  PopoverFormSuccess,
+  PopoverFormTitle,
+  PopoverFormTrigger,
+  RadialMenu,
+  ResizableMotionPanel,
+  ShiftCardDemo,
+  SortableListDemo,
+  StripeBgGuides,
+  StripeBgGuidesDemo,
+  TextureButtonDemo,
+  Timer,
+  TimerDisplay,
+  TimerExamples,
+  TimerIcon,
+  TimerRoot,
+  VideoPowerButton,
+  WeatherForecastCard,
+  YouTubePlayer,
+  YouTubeVideoPlayerDemo,
+  useCustomMeasure,
+  useMotionToast,
+    AlertModal,
+  AlertModalIntegrations1,
+  AnimatedTooltip,
+  ConfirmPopup,
+  ConfirmPopupDemo,
+  ConfirmationModal,
+  ConfirmationModalIntegrations1,
+  DialogSidebar,
+  DialogStack,
+  DialogStackBody,
+  DialogStackContent,
+  DialogStackDemo,
+  DialogStackDescription,
+  DialogStackFooter,
+  DialogStackHeader,
+  DialogStackNext,
+  DialogStackOverlay,
+  DialogStackPrevious,
+  DialogStackTitle,
+  DialogStackTrigger,
+  LOCAL_SIDEBAR_STORAGE_KEY,
+  LoadingOverlay,
+  LoadingOverlayDemo,
+  LoadingOverlayUsage,
+  Modal,
+  ModalDemolIntegrations1,
+  ModalIntegrations1,
+  ModalIntegrationsDemo,
+  OverlayPanel,
+  OverlayPanelDemo,
+  Popconfirm,
+  PopconfirmDemo,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
+  SidebarMenuButtonLoading,
+  SidebarMenuItemLoading,
+  THEME_OPTIONS,
+  THEME_VERSION,
+  TextureCardDemo,
+  TransitionablePortal,
+  sidebarProps,
+  
+  AIInputSearchDemo,
+  AIPromptInputDemo,
+  AIVoiceDemo,
+  BarsLoader,
+  ChainOfThought,
+  ChainOfThoughtContent,
+  ChainOfThoughtItem,
+  ChainOfThoughtStep,
+  ChainOfThoughtTrigger,
+  ChatBasic,
+  ChatContent,
+  ChatSidebar,
+  ChatWithCustomScroll,
+  CircularLoader,
+  ClassicLoader,
+  CodeBlockBasic,
+  CodeBlockCSS,
+  CodeBlockNord,
+  CodeBlockPython,
+  CodeBlockThemed,
+  CodeBlockWithHeader,
+  ConversationPromptInput,
+  ConversationWithAvatars,
+  CustomFileUpload,
+  DotsLoader,
+  FeedbackBar,
+  FeedbackBarBasic,
+  FullChatApp,
+  InputByok,
+  MessageComponent,
+  PromptImage,
+  PromptInputWithSuggestions,
+  PulseDotLoader,
+  PulseLoader,
+  ScrollButton,
+  Source,
+  SourceContent,
+  SourceTrigger,
+  Steps,
+  StepsBar,
+  StepsContent,
+  StepsItem,
+  StepsTrigger,
+  SystemMessage,
+  TerminalLoader,
+  TextBlinkLoader,
+  TextDotsLoader,
+  TextShimmerLoader,
+  TypingLoader,
+  WaveLoader,
+  getOpenAIApiKey,
+  getProviderIcon,
+  parseAIResponseFiles,
+  prePromptsObject,
+  providerInfo,
+  providerModels,
+  snippetsObject,
+    CatalystTable,
+  CatalystTableColumnHeader,
+  CatalystTableColumnHeaderSimple,
+  CatalystTableDraggableHeader,
+  CatalystTableFacetedFilter,
+  CatalystTableRowActions,
+  CleanSmallTable,
+  CleanSmallTableDemo,
+  DataTableColumnHeaderst,
+  DataTableFacetedFilterST,
+  DataTableRowActionsST,
+  TableBody1,
+  TableCell1,
+  TableColumnHeader1,
+  TableContext,
+  TableHead1,
+  TableHeader1,
+  TableHeaderGroup1,
+  TableProvider1,
+  TableRow1,
+  
+  AnimatedGlitchTextDemo,
+  B,
+  Blockquote,
+  BlockquoteDemo,
+  BoldDemo,
+  CODE,
+  Checklist,
+  ChecklistDemo,
+  ChecklistWithState,
+  CodeDemo,
+  ComicText,
+  ComicTextDemo,
+  DIV,
+  DIVDemo,
+  DisplayCode,
+  DisplayCodeDemoTypography,
+  DynamicTextDemo,
+  EncryptedText,
+  EncryptedTextDemoSecond,
+  GlitchTextDemo,
+  H1,
+  H1Demo,
+  H2,
+  H2Demo,
+  H3,
+  H3Demo,
+  H4,
+  H4Demo,
+  H5,
+  H5Demo,
+  HIGHLIGHT,
+  HighlightDemo,
+  HighlightUsage,
+  HighlightV1,
+  HighlightV1Demo,
+  HighlightV1Usage,
+  HyperText,
+  I,
+  IB,
+  ItalicBDemo,
+  ItalicDemo,
+  LineShadowText,
+  MatrixTextDemo,
+  OrderedList,
+  OrderedListDemo,
+  P,
+  PDemo,
+  PM,
+  PMDemo,
+  PROSE,
+  ParaScramble,
+  ProseUsage,
+  ScrollTextDemo,
+  ShimmerTextDemo,
+  SlicedTextDemo,
+  StepNumber,
+  SwooshTextDemo,
+  TextAnimate,
+  TextBlockquote,
+  TextCode,
+  TextHighlighter,
+  TextLarge,
+  TextLead,
+  TextMorph,
+  TextMorphDemo,
+  TextMorphMinimalDemo,
+  TextParagraph,
+  TextPre,
+  TextReveal,
+  TextRewind,
+  TextRewindDemo,
+  TextScramble,
+  TextSpan,
+  TextSubtle,
+  TypewriterDemo,
+  TypingAnimation,
+  TypographyExample,
+  UnorderedList,
+  UnorderedListDemo,
+  VideoText,
+  WordRotate,
+  
+  AppWithStyleProvider,
+  AuthProviderDemo,
+  BasicAuthMiddleware,
+  BatcherMiddleware,
+  CORS,
+  CORSMiddleware,
+  CardDiv,
+  ClientOnly,
+  ContainerDiv,
+  ContextStorageMiddleware,
+  DeferredCard,
+  DeferredContent,
+  DeferredImage,
+  DeferredTable,
+  Document,
+  DynamicLinks,
+  DynamicLinksDemo,
+  DynamicStyleDemo,
+  ExistingSearchParams,
+  ExternalScript,
+  ExternalScripts,
+  FetcherProvider,
+  FlexBetween,
+  FlexCenter,
+  FlexCol,
+  FlickeringGrid,
+  HeaderDiv,
+  Honeypot,
+  HoneypotInputs,
+  HoneypotMiddleware,
+  HoneypotProvider,
+  ImageDiv,
+  JWKAuthMiddleware,
+  KeyboardShortcut,
+  KeyboardShortcutsProvider,
+  LoginForm,
+  MermaidDiagram,
+  MiddlewareDemo,
+  NavigationContextDemo,
+  NavigationProvider,
+  PageDiv,
+  ParagraphDiv,
+  QRCode,
+  RemixUtilitiesDemo,
+  RequestIDMiddleware,
+  RollingCookie,
+  Scaffolding,
+  Scroll,
+  ScrollTop,
+  ScrollTopDemo,
+  ScrollX,
+  ScrollXY,
+  ScrollY,
+  SecFetchDemo,
+  SecFetchParsersDemo,
+  SecureHeadersMiddleware,
+  ServerOnly,
+  ServerTimingMiddleware,
+  SingletonMiddleware,
+  SpamError,
+  StyleProvider,
+  SubtitleP,
+  TimeoutError,
+  TimerDemo,
+  TitleH1,
+  TitleH2,
+  TitleH3,
+  TitleH4,
+  ValidationError,
+  WithCookieMiddleware,
+  authSessionStorage,
+  authenticator,
+  clientSession,
+  cn,
+  createStyleHook,
+  createTypedCookie,
+  createTypedSessionStorage,
+  customerSession,
+  dateOptions,
+  eventStream,
+  filenameIconMap,
+  focusInput,
+  focusRing,
+  getClientIPAddress,
+  getClientLocales,
+  getFetcherType,
+  getGitHubCredentials,
+  getHeaders,
+  getIconByExt,
+  getIconByLanguage,
+  getInitials,
+  getStyle,
+  handle,
+  hasErrorInput,
+  html,
+  image,
+  includeUserAll,
+  isPrefetch,
+  isTypedCookie,
+  isTypedSession,
+  javascript,
+  languageIconMap,
+  meta,
+  notModified,
+  options,
+  parseAcceptHeader,
+  pdf,
+  preloadLinkedAssets,
+  preloadModuleAssets,
+  preloadRouteAssets,
+  randomString,
+  redirectBack,
+  redirectSessionStorage,
+  respondTo,
+  safeRedirect,
+  sidebarSessionStorage,
+  styled,
+  stylesheet,
+  timeout,
+  txt,
+  useCardStyle,
+  useContainerStyle,
+  useFetcherContext,
+  useFetcherType,
+  useGridStyle,
+  useHeaderStyle,
+  useImageStyle,
+  useKeyboardShortcut,
+  useMarginStyle,
+  useNavigationContext,
+  usePaddingStyle,
+  usePageStyle,
+  useParagraphStyle,
+  useSecFetchParser,
+  useSecFetchParsers,
+  useSpacingStyle,
+  useStyleUpdater,
+  useStyles,
+  xml,
+    IconX,
+  LoaderX,
+  NavX,
+  PageHeaderDescription,
+  PageHeaderFunction,
+  PageHeaderHeading,
+  PricingCardCarousel,
+  PricingCardSingle,
+  PricingCardSingleDemo,
+  PricingCarousel,
+  PricingCarousel2Demo,
+  PricingCarouselDemo,
+  PricingFeatureComp,
+  PricingSimple,
+  PricingThreeTiers,
+  PricingTwoTiers,
+  PricingUsageExamples,
+  SectionHeadingsDemo1,
+  SectionHeadingsDemo2,
+  SectionTitle,
+  SectionTitleDemo,
+  TestimonialCarousel,
+  TestimonialCarouselDemo,
+  Testimonials,
+  XYCarousel,
+  usePricingFilter,
+  useProductFilter,
+     CommandV2,
+  CommandV2Demo,
+  CommandWCombobox,
+  NestedCommand,
+  NestedCommandDialog,
+  NestedCommandDialogDemo,
+  ChoiceboxDemo,
+  ChoiceboxItem,
+  ChoiceboxItemContent,
+  ChoiceboxItemDescription,
+  ChoiceboxItemHeader,
+  ChoiceboxItemIndicator,
+  ChoiceboxItemSubtitle,
+  ChoiceboxItemTitle,
+  Combobox0Demo,
+  Combobox2,
+  ComboboxContent2,
+  ComboboxCreateNew2,
+  ComboboxEmpty2,
+  ComboboxGroup2,
+  ComboboxInput2,
+  ComboboxItem2,
+  ComboboxList2,
+  ComboboxSeparator2,
+  ComboboxTrigger2,
+  ComboboxV1,
+  EmojiPicker,
+  EmojiPickerExample,
+  FilterCombobox,
+  NestedCombobox,
+  AnimatedThemeToggler,
+  AnimatedThemeTogglerDemo,
+  AttractButtonDemo,
+  ScrollToTop,
+  BgAnimateButtonsDemo,
+  Burger,
+  BurgerButton,
+  BurgerNavigation,
+  CommandButtonDemo,
+  ConnectedButtonGroupDemo,
+  ExportFile,
+  FloatButton,
+  FloatButtonGroup,
+  FormButton,
+  HoldButtonDemo,
+  ParticleButtonDemo,
+  Rate,
+  Rating1,
+  RatingButton,
+  RatingButton1,
+  ShimmerButton,
+  SlideTextButtonDemo,
+  SocialButtonDemo,
+  SwitchButtonDemo,
+  TextRevealButton,
+  ThemeSwitcher,
+  ThemeToggleButton,
+  ToggleButton,
+  TooltipButton,
+  useThemeTransition,
+    AnimatedBeam,
+  BackgroundGradient,
+  BackgroundPaths,
+  DotPattern,
+  DotPatternDemo,
+  DottedGlowBackground,
+  DottedGlowBackgroundDemo,
+  DottedMap,
+  DottedMapDemo,
+  DynamicRain,
+  FlickeringGrid,
+  FlickeringGridDemo,
+  InteractiveGridPattern,
+  LampContainer,
+  LampDemo,
+  MatrixRain,
+  OrbitingCircles,
+  Particles,
+  ProgressiveBlur,
+  RetroGrid,
+  SparklesCore,
+  Vortex,
+    AvailableChartColors,
+  chartColors,
+  constructCategoryColors,
+  getColorClassName,
+  getYAxisDomain,
+  hasOnlyOneValueForKey,
+    AllProps,
+  AnimatedSpan,
+  BasicAllProps,
+  Code,
+  CodeBlockSectionDemo,
+  CodeComparison,
+  CodeComparison1,
+  CodeComparison1Demo,
+  CodeComparisonDemo,
+  CodeEditorDemo,
+  CodeSectionDemo,
+  CssSection,
+  CssSectionDemo,
+  DisplayGithubInstall,
+  DisplayGithubInstallDemo,
+  DisplayInstallCode,
+  DisplayInstallCodeArray,
+  DisplayInstallCodeArrayDemo,
+  DisplayInstallCodeDemo,
+  DisplayTerminalCodeDemo,
+  Html,
+  JsonSection,
+  JsonSectionDemo,
+  PropsCode,
+  PropsCopyButton,
+  PropsCopyButtonGroup,
+  SandboxCodeEditor,
+  SandboxCodeEditor2,
+  SandboxConsole,
+  SandboxConsole2,
+  SandboxDemo2,
+  SandboxFileExplorer,
+  SandboxFileExplorer2,
+  SandboxIsClient,
+  SandboxLayout,
+  SandboxPreview,
+  SandboxPreview2,
+  SandboxProvider,
+  SandboxTabs,
+  SandboxTabs2,
+  SandboxTabsContent,
+  SandboxTabsContent2,
+  SandboxTabsList,
+  SandboxTabsList2,
+  SandboxTabsTrigger,
+  SandboxTabsTrigger2,
+  Terminal,
+  TerminalCode,
+  TerminalDemo,
+  TsxSection,
+  TsxSectionDemo,
+  TypingAnimation,
+}  from "~/components/catalyst-ui"; */
+
+
+
+
+const FONT_SIZES = [8, 10, 12, 14, 16, 18, 20, 24, 26, 28, 30, 32, 34, 36, 38, 44]
+
+// Create scope for React Live
+const reactLiveScope = {
+  React, useState, useEffect, useRef, useCallback, useMemo, useContext, useReducer,
+
+
+  useTimer, PopoverForm, PopoverFormTrigger, PopoverFormContent, PopoverFormHeader, PopoverFormTitle, PopoverFormDescription, PopoverFormFooter, MotionTabs, MotionTabsList, MotionTabsTrigger, MotionTabsContent, PopoverFormClose, PopoverFormConfirm, PopoverFormSuccess, PopoverFormSeparator, PopoverFormCutOutLeftIcon, PopoverFormCutOutRightIcon, TimerRoot, MotionCommand, MotionCommandInput,MotionCommandList, MotionCarousel, MotionCommandEmpty, MotionCommandGroup, MotionComboboxCommand, MotionComboboxInput, MotionComboboxList, LogoCarousel, LoadingCarousel, LightBoard, GradientHeading, headingVariants, IntroDisclosure, FeatureCarousel, FloatingPanel, FloatingPanelTrigger, FloatingPanelContent, FloatingPanelForm, FloatingPanelLabel, FloatingPanelTextarea, FloatingPanelHeader, FloatingPanelBody, FloatingPanelFooter, FloatingPanelCloseButton, FloatingPanelSubmitButton, FloatingPanelButton, MotionChoicebox, MotionChoiceboxItem, MotionChoiceboxItemHeader, MotionChoiceboxItemTitle, MotionChoiceboxItemSubtitle, MotionChoiceboxItemDescription, MotionChoiceboxItemContentWrapper, MotionChoiceboxItemContent, MotionChoiceboxItemIndicator, MotionComboboxEmpty, MotionComboboxGroup, MotionComboboxItem, MotionCombobox, MotionCommandItem, MotionCommandSeparator, MotionCommandDialog, TimerIcon, TimerDisplay, TextureButton, MotionDatePicker, SortableListItem, ShiftCardContent, MotionToolbar, AnimatedNumber, MotionSearchBar, MotionScreen, MotionScreenTrigger, MotionScreenContent, MotionScreenBackground, MorphSurface, Motion, MotionAlertDialog, MotionAlertDialogPortal, MotionAlertDialogOverlay, DynamicContainer, DynamicTitle, DynamicDescription, DynamicIsland, SIZE_PRESETS, stiffness, DynamicDiv, damping, DynamicIslandSizePresets, BlobContext, useDynamicIslandSize, useScheduledAnimations, DynamicIslandProvider, MotionAlertDialogTrigger, MotionAlertDialogContent, MotionAlertDialogHeader, MotionAlertDialogFooter, MotionAlertDialogTitle, MotionAlertDialogDescription, MotionAlertDialogAction, MotionAlertDialogCancel, MotionAlertDialogIcon, MotionCalendar, MotionCalendarDayButton, calendarVariants, calendarDayButtonVariants, calendarNavButtonVariants, useMotion, MotionCard, MotionContent, MotionContext, MotionCardTrigger, MotionCardHeader, MotionCardContent, MotionCardFooter, MotionNavigationMenu, MotionNavigationMenuList, MotionNavigationMenuItem, MotionNavigationMenuContent, MotionNavigationMenuTrigger, MotionNavigationMenuLink, MotionNavigationMenuIndicator, MotionNavigationMenuViewport, navigationMenuTriggerStyle, SortableList, ShiftCard, ShiftCardHeader, MotionDropdownMenu, MotionDropdownMenuPortal, MotionDropdownMenuTrigger, MotionDropdownMenuContent, MotionDropdownMenuGroup, MotionDropdownMenuLabel, MotionDropdownMenuItem, MotionDropdownMenuCheckboxItem, MotionDropdownMenuRadioGroup, MotionDropdownMenuRadioItem, MotionDropdownMenuSeparator, MotionDropdownMenuShortcut, MotionDropdownMenuSub, MotionDropdownMenuSubTrigger, MotionDropdownMenuSubContent, MotionDropdownMenuAnchor, MotionDrawer, MotionDrawerTrigger, MotionDrawerPortal, MotionDrawerOverlay, MotionDrawerContent, MotionDrawerAnimatedWrapper, MotionDrawerAnimatedContent, MotionDrawerClose, MotionDrawerHeader, MotionDrawerButton, MotionDrawerSecondaryButton, MotionDrawerViewContent, useMotionDrawer, MotionContextMenu, MotionContextMenuTrigger, MotionContextMenuContent, MotionContextMenuItem, MotionContextMenuCheckboxItem, MotionContextMenuRadioItem, MotionContextMenuLabel, MotionContextMenuSeparator, MotionContextMenuShortcut, MotionContextMenuGroup, MotionContextMenuPortal, MotionContextMenuSub, MotionContextMenuSubContent, MotionContextMenuSubTrigger, MotionContextMenuRadioGroup, Button, Card, Input, Badge, Burger, KBD, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TooltipButton, Modal, Alert, SpinnerV4, useCopyToClipboard, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, cn,   CircleMenu, 
+
+
+}
+export type SandboxTabsContextValue = {
+  selectedTab: string | undefined
+  setSelectedTab: (value: string) => void
+}
+
+const SandboxTabsContext = createContext<SandboxTabsContextValue | undefined>(undefined)
+
+function useSandboxTabsContext() {
+  const context = useContext(SandboxTabsContext)
+  if (!context) {
+    throw new Error("SandboxTabs2 components must be used within a SandboxTabs2")
+  }
+  return context
+}
+
+export type SandboxTabsProps = HTMLAttributes<HTMLDivElement> & {
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+export function SandboxTabs2({ className, defaultValue, value, onValueChange, ...props }: SandboxTabsProps): ReactNode {
+  const [selectedTab, setSelectedTabState] = useState(value || defaultValue)
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelectedTabState(value)
+    }
+  }, [value])
+
+  const setSelectedTab = useCallback(
+    (newValue: string) => {
+      if (value === undefined) {
+        setSelectedTabState(newValue)
+      }
+      onValueChange?.(newValue)
+    },
+    [value, onValueChange]
+  )
+
+  return (
+    <SandboxTabsContext.Provider value={{ selectedTab, setSelectedTab }}>
+      <div
+        className={cn(
+          "group relative flex size-full flex-col overflow-hidden rounded-lg bg-background text-sm",
+          // " border ",
+          className
+        )}
+        {...props}
+        data-selected={selectedTab}
+      >
+        {props.children}
+      </div>
+    </SandboxTabsContext.Provider>
+  )
+}
+
+export type SandboxTabsListProps = HTMLAttributes<HTMLDivElement>
+
+export function SandboxTabsList2({ className, ...props }: SandboxTabsListProps): ReactNode {
+  return (
+    <div
+      className={cn(
+        // 'inline-flex w-full shrink-0 items-center justify-start border-b bg-secondary p-2 text-muted-foreground',
+        "mb-px flex gap-x-6 border-b border-border whitespace-nowrap justify-start bg-transparent  rounded-[0xp]",
+        className
+      )}
+      role="tablist"
+      {...props}
+    />
+  )
+}
+
+export type SandboxTabsTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+  value: string
+}
+
+export function SandboxTabsTrigger2({ className, value, ...props }: SandboxTabsTriggerProps): ReactNode {
+  const { selectedTab, setSelectedTab } = useSandboxTabsContext()
+
+  const handleClick = useCallback(() => {
+    setSelectedTab(value)
+  }, [setSelectedTab, value])
+
+  return (
+    <button
+      aria-selected={selectedTab === value}
+      className={cn(
+        // 'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1 font-medium text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+        "-mb-px flex border-b pb-2 text-sm/7 font-medium border-transparent",
+        "text-muted-foreground hover:border-border/25",
+        "data-[state=active]:border-[#2563eb] data-[state=active]:text-foreground rounded-[0xp]",
+        className
+      )}
+      data-state={selectedTab === value ? "active" : "inactive"}
+      onClick={handleClick}
+      role="tab"
+      {...props}
+    />
+  )
+}
+
+export type SandboxTabsContentProps = HTMLAttributes<HTMLDivElement> & {
+  value: string
+}
+
+export function SandboxTabsContent2({ className, value, ...props }: SandboxTabsContentProps): ReactNode {
+  const { selectedTab } = useSandboxTabsContext()
+
+  return <div aria-hidden={selectedTab !== value} className={cn("flex-1 overflow-y-auto ring-offset-background transition-opacity duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", selectedTab === value ? "h-auto w-auto opacity-100" : "pointer-events-none absolute h-0 w-0 opacity-0", className)} data-state={selectedTab === value ? "active" : "inactive"} role="tabpanel" {...props} />
+}
+
+export type SandboxFileExplorerProps = HTMLAttributes<HTMLDivElement> & {
+  files: string[]
+  activeFile?: string
+  onFileSelect?: (file: string) => void
+}
+
+export function SandboxFileExplorer2({ className, files = [], activeFile, onFileSelect, ...props }: SandboxFileExplorerProps): ReactNode {
+  return (
+    <div className={cn("h-full bg-background p-2 font-mono text-sm", className)} {...props}>
+      <div className="space-y-0.5">
+        {files.map((file) => {
+          const defaultIcon = Object.entries(filenameIconMap).find(([pattern]) => {
+            const regex = new RegExp(`^${pattern.replace(/\\/g, "\\\\").replace(/\./g, "\\.").replace(/\*/g, ".*")}$`)
+            return file && regex.test(file)
+          })?.[1]
+          const Icon = defaultIcon
+          return (
+            <button
+              key={file}
+              onClick={() => onFileSelect?.(file)}
+              className={cn(
+                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left transition-colors",
+
+                "-mb-px flex border-b pb-2 text-sm/7 font-medium border-transparent",
+                "text-muted-foreground hover:border-border/25",
+                activeFile === file && "text-foreground border-[#2563eb] rounded-[0xp]"
+              )}
+            >
+              {Icon && <Icon className="h-4 w-4 shrink-0" />}
+              <span className="truncate text-muted-foreground">{file}</span>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export type SandboxCodeEditorProps = HTMLAttributes<HTMLDivElement> & {
+  value?: string
+  onChange?: (value: string) => void
+  language?: string
+  readOnly?: boolean
+}
+
+export type SandboxPreviewProps = HTMLAttributes<HTMLDivElement> & {
+  html?: string
+  srcDoc?: string
+}
+
+export function SandboxPreview2({ className, code = "", ...props }: SandboxPreviewProps): ReactNode {
+  return (
+    <div className={cn("h-full bg-background overflow-auto", className)} {...props}>
+      <LiveProvider code={code} scope={reactLiveScope} noInline={false}>
+        <div className="p-4">
+          <LivePreview />
+          <LiveError className="bg-destructive/10 text-destructive p-4 rounded-lg mt-4 font-mono text-sm" />
+        </div>
+      </LiveProvider>
+    </div>
+  )
+}
+
+export type SandboxConsoleProps = HTMLAttributes<HTMLDivElement> & {
+  logs?: Array<{ type: "log" | "error" | "warn"; message: string }>
+}
+
+export function SandboxConsole2({ className, logs = [], ...props }: SandboxConsoleProps): ReactNode {
+  return (
+    <div className={cn("h-full overflow-y-auto bg-background p-2 font-mono text-sm", className)} {...props}>
+      {logs.map((log, i) => (
+        <div key={i} className={cn("px-2 py-1", log.type === "error" && "text-destructive", log.type === "warn" && "text-yellow-500", log.type === "log" && "text-foreground")}>
+          <span className="text-muted-foreground">[{log.type}]</span> {log.message}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function SandboxCodeEditor2({ setIsClient, activeTab, theme, handleEditorChange, handleEditorDidMount, showMinimap, fontSize, showLineNumbers, editorSettings, editorRef, isClient, className, ...props }: SandboxCodeEditorProps): ReactNode {
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const EditorLoading = () => {
+    return (
+      <div>
+        <LoadingPage />
+      </div>
+    )
+  }
+
+  const renderEditor = () => {
+    if (!isClient || !activeTab) {
+      return <EditorLoading />
+    }
+
+    return (
+      <div className="h-full">
+        <Editor
+          height="100%"
+          className=""
+          loading={<SpinnerV4 title="Loading..." subtitle="Please wait while your editor loads the content." size="sm" />}
+          language={activeTab.language}
+          value={activeTab.content}
+          theme={theme}
+          onChange={handleEditorChange}
+          onMount={handleEditorDidMount}
+          options={{
+            minimap: { enabled: showMinimap },
+            fontSize: fontSize,
+            lineNumbers: showLineNumbers ? "on" : "off",
+            wordWrap: true,
+            automaticLayout: true,
+            scrollBeyondLastLine: false,
+            folding: true,
+            bracketMatching: editorSettings.bracketMatching,
+            autoClosingBrackets: editorSettings.autoClosingBrackets,
+            autoClosingQuotes: editorSettings.autoClosingQuotes,
+            autoIndent: editorSettings.autoIndent,
+            renderWhitespace: editorSettings.renderWhitespace,
+            multiCursorModifier: "alt",
+            formatOnPaste: editorSettings.formatOnPaste,
+            formatOnType: editorSettings.formatOnType,
+            smoothScrolling: editorSettings.smoothScrolling,
+            cursorBlinking: editorSettings.cursorBlinking,
+            cursorStyle: editorSettings.cursorStyle,
+            suggest: {
+              showKeywords: true,
+              showSnippets: true,
+              showFunctions: true,
+              showConstructors: true,
+              showFields: true,
+              showVariables: true,
+              showClasses: true,
+              showStructs: true,
+              showInterfaces: true,
+              showModules: true,
+              showProperties: true,
+              showEvents: true,
+              showOperators: true,
+              showUnits: true,
+              showValues: true,
+              showConstants: true,
+              showEnums: true,
+              showEnumMembers: true,
+              showColors: true,
+              showFiles: true,
+              showReferences: true,
+              showFolders: true,
+              showTypeParameters: true,
+            },
+            quickSuggestions: {
+              other: true,
+              comments: true,
+              strings: true,
+            },
+            suggestOnTriggerCharacters: true,
+            acceptSuggestionOnCommitCharacter: true,
+            acceptSuggestionOnEnter: "on",
+            tabCompletion: "on",
+
+            scrollbar: {
+              vertical: "auto",
+              //  horizontal: 'auto',
+              useShadows: true,
+              verticalHasArrows: false,
+              horizontalHasArrows: false,
+              verticalScrollbarSize: 10,
+              horizontalScrollbarSize: 10,
+              arrowSize: 10,
+            },
+            mouseWheelZoom: true,
+            links: true,
+            colorDecorators: true,
+          }}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("flex-1", className)} {...props}>
+      {renderEditor()}
+    </div>
+  )
+}
+
+export function SandboxDemo2() {
+  return <ClientOnly>{() => <SandboxIsClient />}</ClientOnly>
+}
+
+export function SandboxIsClient() {
+    const { toast } = useToasted()
+  
+  const [value, setValue] = useState("editor")
+  const [code, setCode] = useState("")
+  const [isSplitView, setIsSplitView] = useState(false)
+  const [theme, setTheme] = useState("customDark")
+  const [lastSaved, setLastSaved] = useState(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [showMinimap, setShowMinimap] = useState(true)
+  const [fontSize, setFontSize] = useState(14)
+  const [showLineNumbers, setShowLineNumbers] = useState(true)
+  const [activeTabId, setActiveTabId] = useState(1)
+  const [nextTabId, setNextTabId] = useState(4)
+  const [isClient, setIsClient] = useState(false)
+  const [autoSaveEnabled, setAutoSaveEnabled] = useState(true)
+  const [isCopied, setIsCopied] = useState(false)
+  const [isPreview, setIsPreview] = useState(false)
+  const [isVisible, setIsVisible] = useState(true)
+  const [isWordWrapEnabled, setIsWordWrapEnabled] = useState(false)
+  const [isStickyScrollEnabled, setIsStickyScrollEnabled] = useState(false)
+  const [isWhitespaceRendered, setIsWhitespaceRendered] = useState(false)
+  const [areIndentGuidesRendered, setAreIndentGuidesRendered] = useState(true)
+  const [wordWrap, setWordWrap] = useState(true)
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const editorRef = useRef(null)
+  const saveTimeoutRef = useRef(null)
+
+  const [tabs, setTabs] = useState([
+    {
+      id: 1,
+      name: "App.jsx",
+      content: `function App() {
+  const [count, setCount] = React.useState(0);
+  const [name, setName] = React.useState('');
+
+  return (
+    <div className="p-6 space-y-6 max-w-4xl mx-auto">
+      <Card className="p-6">
+        <h1 className="text-2xl font-bold mb-4">Catalyst UI React Playground</h1>
+
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold">Interactive Example</h2>
+
+          <div className="flex gap-2 items-center">
+            <Button onClick={() => setCount(c => c + 1)}>
+              Count: {count}
+            </Button>
+            <Button variant="secondary" onClick={() => setCount(0)}>
+              Reset
+            </Button>
+          </div>
+
+          <Input
+            placeholder="Enter your name..."
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="max-w-xs"
+          />
+
+          {name && (
+            <Alert>
+              Hello, {name}! Welcome to Catalyst UI.
+            </Alert>
+          )}
+
+          <div className="flex gap-2 flex-wrap">
+            <Badge>React</Badge>
+            <Badge variant="secondary">Live</Badge>
+            <Badge variant="outline">Playground</Badge>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+`,
+      language: "javascript",
+      isDirty: false,
+      isActive: true,
+    },
+    {
+      id: 2,
+      name: "ButtonDemo.jsx",
+      content: `function ButtonDemo() {
+  return (
+    <div className="space-y-4">
+      <h3 className="font-semibold">Button Variants</h3>
+      <div className="flex gap-2 flex-wrap">
+        <Button>Default</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="destructive">Destructive</Button>
+      </div>
+    </div>
+  );
+}
+  
+`,
+      language: "javascript",
+      isDirty: false,
+      isActive: false,
+    },
+    {
+      id: 3,
+      name: "styles.css",
+      content: `/* Custom styles can go here */
+.custom-card {
+  border: 2px dashed #3b82f6;
+}`,
+      language: "css",
+      isDirty: false,
+      isActive: false,
+    },
+  ])
+
+  const [editorSettings, setEditorSettings] = useState({
+    bracketMatching: "always",
+    autoClosingBrackets: "always",
+    autoClosingQuotes: "always",
+    autoIndent: "full",
+    formatOnPaste: true,
+    formatOnType: true,
+    renderWhitespace: "selection",
+    smoothScrolling: true,
+    cursorBlinking: "blink",
+    cursorStyle: "line",
+  })
+
+  const customDarkTheme = {
+    base: "vs-dark",
+    inherit: true,
+    rules: [],
+    colors: {
+      "editor.background": "#020817",
+    },
+  }
+
+  const languages = [
+    { value: "markdown", label: "Markdown", icon: "📝" },
+    { value: "javascript", label: "JavaScript", icon: "🟨" },
+    { value: "typescript", label: "TypeScript", icon: "🔷" },
+    { value: "html", label: "HTML", icon: "🌐" },
+    { value: "css", label: "CSS", icon: "🎨" },
+    { value: "scss", label: "SCSS", icon: "💅" },
+    { value: "json", label: "JSON", icon: "📋" },
+    { value: "python", label: "Python", icon: "🐍" },
+    { value: "sql", label: "SQL", icon: "🗃️" },
+    { value: "yaml", label: "YAML", icon: "⚙️" },
+    { value: "xml", label: "XML", icon: "📄" },
+    { value: "java", label: "Java", icon: "☕" },
+    { value: "csharp", label: "C#", icon: "💜" },
+    { value: "cpp", label: "C++", icon: "⚡" },
+    { value: "php", label: "PHP", icon: "🔮" },
+    { value: "rust", label: "Rust", icon: "🦀" },
+    { value: "go", label: "Go", icon: "🐹" },
+    { value: "shell", label: "Shell", icon: "🐚" },
+  ]
+
+  const activeTab = tabs.find((tab) => tab.id === activeTabId)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const handleEditorChange = (value) => {
+    setTabs((prev) => prev.map((tab) => (tab.id === activeTabId ? { ...tab, content: value || "", isDirty: true } : tab)))
+    setCode(value)
+  }
+
+  useEffect(() => {
+    if (!isClient) return
+
+    const savedTabs = []
+
+    // Check each existing tab to see if there's saved content
+    tabs.forEach((tab) => {
+      const savedContent = localStorage.getItem(`live-playground-${tab.id}`)
+      const savedName = localStorage.getItem(`live-playground-${tab.id}-name`)
+      const savedLanguage = localStorage.getItem(`live-playground-${tab.id}-language`)
+
+      if (savedContent) {
+        savedTabs.push({
+          ...tab,
+          name: savedName || tab.name,
+          content: savedContent,
+          language: savedLanguage || tab.language,
+          isDirty: false,
+        })
+      } else {
+        // Keep the default tab if nothing was saved
+        savedTabs.push(tab)
+      }
+    })
+
+    // Check for any additional tabs beyond the defaults
+    let index = Math.max(...tabs.map((t) => t.id)) + 1
+    while (true) {
+      const savedContent = localStorage.getItem(`live-playground-${index}`)
+      const savedName = localStorage.getItem(`live-playground-${index}-name`)
+      const savedLanguage = localStorage.getItem(`live-playground-${index}-language`)
+
+      if (!savedContent) break
+
+      savedTabs.push({
+        id: index,
+        name: savedName || `tab-${index}.md`,
+        content: savedContent,
+        language: savedLanguage || "markdown",
+        isDirty: false,
+        isActive: false,
+      })
+
+      index++
+    }
+
+    if (savedTabs.length > 0) {
+      setTabs(savedTabs.map((tab, i) => ({ ...tab, isActive: i === 0 })))
+      setNextTabId(Math.max(...savedTabs.map((t) => t.id)) + 1)
+      setCode(savedTabs[0].content)
+    }
+  }, [isClient])
+
+  const autoSave = useCallback(
+    async (tabId, content) => {
+      const tab = tabs.find((t) => t.id === tabId)
+      if (!tab?.isDirty || !autoSaveEnabled) return
+
+      setIsSaving(true)
+      try {
+        localStorage.setItem(`live-playground-${tabId}`, content)
+        localStorage.setItem(`live-playground-${tabId}-name`, tab.name)
+        localStorage.setItem(`live-playground-${tabId}-language`, tab.language)
+        setTabs((prev) => prev.map((t) => (t.id === tabId ? { ...t, isDirty: false } : t)))
+        setLastSaved(new Date())
+      } catch (error) {
+        console.error("Save failed:", error)
+      } finally {
+        setIsSaving(false)
+      }
+    },
+    [tabs, autoSaveEnabled]
+  )
+
+  useEffect(() => {
+    if (activeTab?.isDirty && autoSaveEnabled) {
+      clearTimeout(saveTimeoutRef.current)
+      saveTimeoutRef.current = setTimeout(() => {
+        autoSave(activeTabId, activeTab.content)
+      }, 2000)
+    }
+
+    return () => clearTimeout(saveTimeoutRef.current)
+  }, [activeTab?.content, activeTab?.isDirty, activeTabId, autoSave, autoSaveEnabled])
+
+  const getFileExtension = (language) => {
+    const extensions = {
+      javascript: "js",
+      typescript: "ts",
+      html: "html",
+      css: "css",
+      scss: "scss",
+      json: "json",
+      python: "py",
+      sql: "sql",
+      yaml: "yml",
+      xml: "xml",
+      java: "java",
+      csharp: "cs",
+      cpp: "cpp",
+      php: "php",
+      rust: "rs",
+      go: "go",
+      shell: "sh",
+      markdown: "md",
+    }
+    return extensions[language] || "txt"
+  }
+
+  const getTemplateForLanguage = (language) => {
+    const templates = {
+      javascript: "// JavaScript code\n",
+      typescript: "// TypeScript code\n",
+      html: "<!DOCTYPE html>\n<html>\n<head>\n  <title>Document</title>\n</head>\n<body>\n  \n</body>\n</html>",
+      css: "/* CSS styles */\n",
+      markdown: "# Markdown Document\n\n",
+      python: "# Python code\n",
+      json: "{\n  \n}",
+    }
+    return templates[language] || ""
+  }
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen()
+      setIsFullscreen(true)
+    } else {
+      document.exitFullscreen()
+      setIsFullscreen(false)
+    }
+  }
+
+  const createNewTab = useCallback(
+    (language = "markdown") => {
+      const newTab = {
+        id: nextTabId,
+        name: `untitled-${nextTabId}.${getFileExtension(language)}`,
+        content: getTemplateForLanguage(language),
+        language,
+        isDirty: false,
+        isActive: true,
+      }
+
+      setTabs((prev) => prev.map((tab) => ({ ...tab, isActive: false })))
+      setTabs((prev) => [...prev, newTab])
+      setActiveTabId(nextTabId)
+      setNextTabId((prev) => prev + 1)
+    },
+    [nextTabId]
+  )
+
+  const closeTab = useCallback(
+    (tabId) => {
+      if (tabs.length === 1) return
+
+      setTabs((prev) => {
+        const newTabs = prev.filter((tab) => tab.id !== tabId)
+        if (tabId === activeTabId) {
+          const nextTab = newTabs[0] || newTabs[newTabs.length - 1]
+          setActiveTabId(nextTab?.id || 1)
+        }
+        return newTabs
+      })
+    },
+    [tabs.length, activeTabId]
+  )
+
+  const handleManualSave = useCallback(() => {
+    if (activeTab?.isDirty) {
+      clearTimeout(saveTimeoutRef.current)
+      autoSave(activeTabId, activeTab.content)
+    }
+  }, [activeTab, activeTabId, autoSave])
+
+  const handleEditorDidMount = (editor, monaco) => {
+    editorRef.current = editor
+    monaco.editor.defineTheme("customDark", customDarkTheme)
+    monaco.editor.setTheme("customDark")
+
+    editor.addCommand(
+      monaco.KeyCode.Enter,
+      () => {
+        const model = editor.getModel()
+        const position = editor.getPosition()
+        const lineContent = model.getLineContent(position.lineNumber)
+
+        const taskMatch = lineContent.match(/^(\s*)-\s+\[([ xX])\]\s*(.*)$/)
+        const unorderedMatch = lineContent.match(/^(\s*)([-*+])\s+(.*)$/)
+        const orderedMatch = lineContent.match(/^(\s*)(\d+)\.\s+(.*)$/)
+
+        if (taskMatch) {
+          const [fullMatch, indent, checked, content] = taskMatch
+          const isCursorAtEnd = position.column === lineContent.length + 1
+
+          if (content.trim() === "" || (content.trim() === "" && isCursorAtEnd)) {
+            const endOfMarker = indent.length + 6
+            editor.executeEdits("list-break", [
+              {
+                range: new monaco.Range(position.lineNumber, indent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "",
+              },
+              {
+                range: new monaco.Range(position.lineNumber, lineContent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "\n",
+              },
+            ])
+            editor.setPosition({ lineNumber: position.lineNumber + 1, column: indent.length + 1 })
+          } else {
+            const newText = "\n" + indent + "- [ ] "
+            editor.executeEdits("list-continue", [
+              {
+                range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                text: newText,
+              },
+            ])
+            editor.setPosition({
+              lineNumber: position.lineNumber + 1,
+              column: indent.length + 7,
+            })
+          }
+          return true
+        } else if (unorderedMatch) {
+          const [fullMatch, indent, marker, content] = unorderedMatch
+
+          if (content.trim() === "") {
+            editor.executeEdits("list-break", [
+              {
+                range: new monaco.Range(position.lineNumber, indent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "",
+              },
+              {
+                range: new monaco.Range(position.lineNumber, lineContent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "\n",
+              },
+            ])
+            editor.setPosition({ lineNumber: position.lineNumber + 1, column: indent.length + 1 })
+          } else {
+            const newText = "\n" + indent + marker + " "
+            editor.executeEdits("list-continue", [
+              {
+                range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                text: newText,
+              },
+            ])
+            editor.setPosition({
+              lineNumber: position.lineNumber + 1,
+              column: indent.length + marker.length + 2,
+            })
+          }
+          return true
+        } else if (orderedMatch) {
+          const [fullMatch, indent, num, content] = orderedMatch
+
+          if (content.trim() === "") {
+            editor.executeEdits("list-break", [
+              {
+                range: new monaco.Range(position.lineNumber, indent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "",
+              },
+              {
+                range: new monaco.Range(position.lineNumber, lineContent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "\n",
+              },
+            ])
+            editor.setPosition({ lineNumber: position.lineNumber + 1, column: indent.length + 1 })
+          } else {
+            const nextNum = parseInt(num) + 1
+            const newText = "\n" + indent + nextNum + ". "
+            editor.executeEdits("list-continue", [
+              {
+                range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                text: newText,
+              },
+            ])
+            editor.setPosition({
+              lineNumber: position.lineNumber + 1,
+              column: indent.length + nextNum.toString().length + 3,
+            })
+          }
+          return true
+        } else {
+          editor.trigger("keyboard", "type", { text: "\n" })
+          return false
+        }
+      },
+      ""
+    )
+
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyS, () => {
+      handleManualSave()
+    })
+
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyP, () => {
+      setIsPreview((prev) => !prev)
+    })
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Equal, () => {
+      setFontSize((prev) => Math.min(prev + 1, 24))
+    })
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Minus, () => {
+      setFontSize((prev) => Math.max(prev - 1, 8))
+    })
+
+    editor.focus()
+  }
+
+  function resetLocalStorage() {
+    localStorage.clear()
+    toast.success("Success", "Local storage has been reset!", { variant: "accent" })
+  }
+
+  const editorFind = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "actions.find", null)
+    }
+  }
+
+  const editorFindReplace = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "editor.action.startFindReplace", null)
+    }
+  }
+
+  const editorFoldAll = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "editor.foldAll", null)
+    }
+  }
+
+  const editorUnfoldAll = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "editor.unfoldAll", null)
+    }
+  }
+
+  const closeAllTabs = () => {
+    setTabs([])
+    createNewTab()
+    handleManualSave()
+  }
+
+  useEffect(() => {
+    setIsVisible(true)
+    const timer = setTimeout(() => {
+      setIsVisible(false)
+    }, 5000)
+    return () => clearTimeout(timer)
+  }, [lastSaved])
+
+  const editorChangeAllOccurrences = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "editor.action.selectHighlights", null)
+    }
+  }
+
+  const editorToggleBlockComment = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "editor.action.blockComment", null)
+    }
+  }
+
+  const editorToggleSoftWraps = () => {
+    const newStatus = !isWordWrapEnabled
+    setIsWordWrapEnabled(newStatus)
+
+    if (editorRef.current) {
+      editorRef.current.updateOptions({
+        wordWrap: newStatus ? "on" : "off",
+      })
+    }
+  }
+
+  const editorToggleStickyScroll = () => {
+    const newStatus = !isStickyScrollEnabled
+    setIsStickyScrollEnabled(newStatus)
+
+    if (editorRef.current) {
+      editorRef.current.updateOptions({
+        "stickyScroll.enabled": newStatus,
+      })
+    }
+  }
+
+  const editorToggleRenderWhitespace = () => {
+    const newStatus = !isWhitespaceRendered
+    setIsWhitespaceRendered(newStatus)
+    const renderMode = newStatus ? "all" : "none"
+
+    if (editorRef.current) {
+      editorRef.current.updateOptions({
+        renderWhitespace: renderMode,
+      })
+    }
+  }
+
+  const editorToggleIndentGuides = () => {
+    const newStatus = !areIndentGuidesRendered
+    setAreIndentGuidesRendered(newStatus)
+
+    if (editorRef.current) {
+      editorRef.current.updateOptions({
+        renderIndentGuides: newStatus,
+      })
+    }
+  }
+
+  const handleClick = (content, filename) => {
+    const blob = new Blob([content], { type: "text/plain" })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement("a")
+    link.href = url
+    link.download = filename
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
+
+  const onOpen = (e) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const content = event.target?.result
+      if (typeof content === "string") {
+        setCode(content)
+        if (activeTab) {
+          setTabs((prev) => prev.map((tab) => (tab.id === activeTabId ? { ...tab, content, isDirty: true } : tab)))
+        }
+      }
+    }
+    reader.readAsText(file)
+  }
+
+  const options = {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }
+
+  const TabComponent = ({ tab, isActive, onClose, onSelect }) => {
+    const defaultIcon = Object.entries(filenameIconMap).find(([pattern]) => {
+      const regex = new RegExp(`^${pattern.replace(/\\/g, "\\\\").replace(/\./g, "\\.").replace(/\*/g, ".*")}$`)
+      return tab.language && regex.test(tab.language)
+    })?.[1]
+    const Icon = defaultIcon
+    return (
+      <div className={`flex items-center px-3 py-2 border-r border-border cursor-pointer transition-colors ${isActive ? "bg-background text-foreground border-b-2 border-[#1447e6]" : "bg-muted text-muted-foreground hover:bg-background hover:text-foreground"}`} onClick={() => onSelect(tab.id)}>
+        {Icon && <Icon className="h-4 w-4 shrink-0" />}
+        <span className="text-sm truncate max-w-32">{tab.name}</span>
+        {tab.isDirty && <span className="ml-1 text-destructive">●</span>}
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            onClose(tab.id)
+          }}
+          className="ml-2 p-1 rounded hover:bg-destructive/20 hover:text-destructive"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+    )
+  }
+
+  function KBDShortcut({
+    name = "Save",
+    sc = (
+      <>
+        <KBD>Alt</KBD>
+        {" & "}
+        <KBD>S</KBD>
+      </>
+    ),
+  }) {
+    return (
+      <DropdownMenuItem className="text-muted-foreground hover:text-foreground">
+        {name}
+        <DropdownMenuShortcut>{sc}</DropdownMenuShortcut>
+      </DropdownMenuItem>
+    )
+  }
+
+  const Toolbar = () => (
+    <div className="flex items-center space-x-2">
+      {isSaving && !isVisible && !lastSaved && (
+        <Badge variant="outline" className="text-muted-foreground w-fit transition-opacity duration-500">
+          Saving...
+        </Badge>
+      )}
+      {isVisible && lastSaved && (
+        <Badge variant="outline" className="text-muted-foreground w-fit transition-opacity duration-500">
+          Saved: {new Date(lastSaved).toLocaleString("en-US", options)}
+        </Badge>
+      )}
+      {isCopied && (
+        <Badge variant="outline" className="text-muted-foreground w-fit transition-opacity duration-500">
+          Copied contents to clipboard!
+        </Badge>
+      )}
+      <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground" onClick={() => setValue(value === "editor" ? "preview" : "editor")}>
+        {value === "editor" ? "Preview" : "Editor"}
+      </Button>
+      <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground" onClick={() => setValue("Console")}>
+        Console
+      </Button>
+      {/** File  */}
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+            File
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Monaco Editor</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** Open File  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => fileInputRef.current?.click()}>
+              Open File
+              <DropdownMenuShortcut>
+                <BookOpenText />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <input ref={fileInputRef} type="file" accept=".md" onChange={onOpen} style={{ display: "none" }} />
+            {/** save */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" disabled={!activeTab?.isDirty} onClick={handleManualSave}>
+              Save
+              <DropdownMenuShortcut>
+                <Save />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** ExportFile  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => handleClick(code, activeTab.name)}>
+              Export
+              <DropdownMenuShortcut>
+                <Download />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/**  Copy Text */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => copyToClipboard(code)}>
+              Place File Contents In Clipboard
+              <DropdownMenuShortcut>
+                <Copy />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/**  Reset Local Storage */}
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <DropdownMenuItem className="text-muted-foreground hover:text-foreground">
+                  Reset Local Storage
+                  <DropdownMenuShortcut>
+                    <ListRestart />
+                  </DropdownMenuShortcut>
+                </DropdownMenuItem>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                  <AlertDialogDescription>This action cannot be undone. This will permanently delete your local storage data that contains the data from your tabs within this editor.</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction onClick={() => resetLocalStorage()}>Continue</AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/** Edit  */}
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+            Edit
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            {/** Undo  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger("dropdown-menu", "undo", null)}>
+              Undo
+              <DropdownMenuShortcut>
+                <RotateCcw />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** Redo  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger("dropdown-menu", "redo", null)}>
+              Redo
+              <DropdownMenuShortcut>
+                <RotateCw />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** Toggle Line Comment */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger("dropdown-menu", "editor.action.commentLine", null)}>
+              Toggle Line Comment
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** Go To Line  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger("dropdown-menu", "editor.action.gotoLine", null)}>
+              Go To Line
+            </DropdownMenuItem>
+            {/** Format Document  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger("dropdown-menu", "editor.action.formatDocument", null)}>
+              Format Document
+              <DropdownMenuShortcut>
+                <Braces />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** Toggle Block Comment  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleBlockComment()}>
+              Toggle Block Comment
+            </DropdownMenuItem>
+            {/** Change All Occurrences  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorChangeAllOccurrences()}>
+              Change All Occurrences
+            </DropdownMenuItem>
+            {/** Toggle Soft Wraps  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleSoftWraps()}>
+              Toggle Soft Wraps
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** Font Size */}
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Font Size</DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  {FONT_SIZES.map((size) => (
+                    <DropdownMenuItem
+                      key={size}
+                      onClick={() => {
+                        setFontSize(size)
+                        if (editorRef && editorRef.current) {
+                          editorRef.current.updateOptions({
+                            fontSize: size,
+                          })
+                        }
+                      }}
+                      className={size === fontSize ? "bg-gray-100 dark:bg-gray-700 font-semibold text-muted-foreground hover:text-foreground" : ""}
+                    >
+                      {size}px
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** find  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorFind()}>
+              Find
+            </DropdownMenuItem>
+            {/** Find & Replace  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorFindReplace()}>
+              Find & Replace
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/** View  */}
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+            View
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            {/** Command Palette  */}
+            <DropdownMenuItem
+              className="text-muted-foreground hover:text-foreground"
+              onClick={() => {
+                if (editorRef.current) {
+                  editorRef.current.trigger("dropdown-menu", "editor.action.quickCommand", null)
+                }
+              }}
+            >
+              Command Palette
+            </DropdownMenuItem>
+            {/** Shortcuts */}
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Shortcuts</DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <KBDShortcut
+                    name="Open File"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>O</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Save File"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>S</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Rename Tab"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>R</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Toggle Preview"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>P</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Create Tab"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>N</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Create tab: Typescript"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>T</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Create tab: Markdown"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>M</KBD>
+                      </>
+                    }
+                  />
+
+                  <KBDShortcut
+                    name="Close Tab"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>w</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Close Tab"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>w</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Search"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>F</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Increase Font Size"
+                    sc={
+                      <>
+                        <KBD>Ctrl</KBD>
+                        {" & "}
+                        <KBD>+</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Decrease Font Size"
+                    sc={
+                      <>
+                        <KBD>Ctrl</KBD>
+                        {" & "}
+                        <KBD>-</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Open MD Sidebar"
+                    sc={
+                      <>
+                        <KBD>Ctrl</KBD>
+                        {" & "}
+                        <KBD>B</KBD>
+                      </>
+                    }
+                  />
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** fold  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorFoldAll()}>
+              Fold All
+            </DropdownMenuItem>
+            {/** Unfold  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorUnfoldAll()}>
+              Unfold All
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** mini map  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setShowMinimap((prev) => !prev)}>
+              Mini Map
+              <DropdownMenuShortcut>
+                <Map />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** Word Wrap  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setWordWrap((prev) => !prev)}>
+              Word Wrap
+              <DropdownMenuShortcut>
+                <TextWrap />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** Line Numbers  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setShowLineNumbers((prev) => !prev)}>
+              Line Numbers
+            </DropdownMenuItem>
+            {/** toggle renderer */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setIsPreview(!isPreview)}>
+              {isPreview ? (
+                <>
+                  Code
+                  <DropdownMenuShortcut>
+                    <Code />
+                  </DropdownMenuShortcut>
+                </>
+              ) : (
+                <>
+                  Preview
+                  <DropdownMenuShortcut>
+                    <Eye />
+                  </DropdownMenuShortcut>
+                </>
+              )}
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** Toggle Render Whitespace  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleRenderWhitespace()}>
+              {isWhitespaceRendered ? "Hide Whitespace" : "Show Whitespace"}
+            </DropdownMenuItem>
+            {/** Toggle Indent Guides  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleIndentGuides()}>
+              {areIndentGuidesRendered ? "Hide Indent Guides" : "Show Indent Guides"}
+            </DropdownMenuItem>
+            {/** Toggle Sticky Scroll  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleStickyScroll()}>
+              {isStickyScrollEnabled ? "Disable Sticky Scroll" : "Enable Sticky Scroll"}
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground" onClick={() => setIsSplitView((prev) => !prev)}>
+        {isSplitView ? <SquareSplitHorizontal /> : <SquareSplitHorizontal />}
+      </Button>
+      {isFullscreen ? <TooltipButton icon={<Minus />} onClick={toggleFullscreen} content="Minimize" /> : <TooltipButton icon={<Square />} onClick={toggleFullscreen} content="Maximize" />}
+    </div>
+  )
+  return (
+    <div className="mx-auto max-w-[95vw] w-full border-2 border-border rounded-[10px] shadow-lg !overflow-hidden">
+      <SandboxTabs2 className="h-[85vh]" value={value} onValueChange={setValue}>
+        <div className="flex items-center justify-between border-b border-border bg-background  ">
+          <div className="flex overflow-x-auto">
+            {tabs.map((tab) => (
+              <TabComponent key={tab.id} tab={tab} isActive={tab.id === activeTabId} onClose={closeTab} onSelect={setActiveTabId} />
+            ))}
+          </div>
+          <Toolbar />
+        </div>
+        <SandboxTabsContent2 value="editor" className="flex">
+          {isSplitView ? (
+            <>
+              <div className="flex h-full w-full">
+                <div className="w-1/2">
+                  <SandboxCodeEditor2 setIsClient={setIsClient} activeTab={activeTab} theme={theme} handleEditorChange={handleEditorChange} handleEditorDidMount={handleEditorDidMount} showMinimap={showMinimap} fontSize={fontSize} showLineNumbers={showLineNumbers} editorSettings={editorSettings} isClient={isClient} editorRef={editorRef} className="h-full border-r border-border" />
+                </div>
+                <div className="w-1/2 overflow-auto bg-background">
+                  <div className="mx-auto p-3">
+                    <SandboxPreview2 code={code} />
+                  </div>
+                </div>
+              </div>
+            </>
+          ) : (
+            <SandboxCodeEditor2 setIsClient={setIsClient} activeTab={activeTab} theme={theme} handleEditorChange={handleEditorChange} handleEditorDidMount={handleEditorDidMount} showMinimap={showMinimap} fontSize={fontSize} showLineNumbers={showLineNumbers} editorSettings={editorSettings} isClient={isClient} editorRef={editorRef} className="flex-1" />
+          )}
+        </SandboxTabsContent2>
+
+        <SandboxTabsContent2 value="preview">
+          <SandboxPreview2 code={code} />
+        </SandboxTabsContent2>
+
+        <SandboxTabsContent2 value="console">
+          <SandboxConsole2
+            logs={[
+              { type: "log", message: "React Live playground started" },
+              { type: "log", message: "Edit App.jsx to see live changes" },
+            ]}
+          />
+        </SandboxTabsContent2>
+      </SandboxTabs2>
+    </div>
+  )
+}
+
+/**import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react"
+import { cn, filenameIconMap, } from "~/components/catalyst-ui/utils";
+import { BookOpenText, Braces, Code, Copy, Download, Eye, ListRestart, Maximize2, Minimize2, Minus, RotateCcw, RotateCw, Save, Square, SquareSplitHorizontal, TimerIcon, TimerReset, X, } from "lucide-react";
+import { LiveProvider, LiveEditor, LivePreview, LiveError, } from "react-live";
+// import { ClientOnly, } from "~/utils/client-only";
+import { Editor, } from "@monaco-editor/react";
+import { TextWrap, } from "@catalystsoftware/icons";
+import popoverForm from "../blocks/popover-form";
+import { AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuPortal, DropdownMenuSubContent, DropdownMenu, AlertDialog, TooltipButton, LoadingPage, SpinnerV4, KBD, DropdownMenuShortcut, AlertDialogHeader, AlertDialogFooter } from "~/components/catalyst-ui";
+
+import {
+  Particles, Vortex, SparklesCore,  RetroGrid, InteractiveGridPattern, HexagonBackground, BackgroundGradient, OrbitingCircles, AnimatedBeam, BackgroundPaths, FlickeringGrid, DotPattern, DottedMap, Rating1, Ratingbutton1, Themetogglebutton, Usethemetransition, ThemeSwitcher, TextRevealButton, RippleButton, Rate, Ratingbutton, LiquidButton, Inputbutton, Inputbuttonprovider, Inputbuttonaction, Inputbuttonsubmit, Inputbuttoninput, CopyButton, FlipButton, ShimmerButton, AnimatedThemeToggler, AttractButton, SlideButton, CommandButton, HoldButton, ParticleButton, SocialButton, SwitchButton, Buttongroup, Connectedbuttongroup, Floatbutton, Floatbuttongroup,  SplitButton, Burger, Burgerbutton, Burgernavigation, Burgermenudemo, CopyText, ExportFile, FormButton, ToggleButton, Enhancedchart, Enhancedchartdemo, Terminal, Animatedspan, Typinganimation, Sandboxtabs2, Sandboxtabslist2, Sandboxtabstrigger2, Sandboxtabscontent2, Sandboxfileexplorer2, Sandboxcodeeditor2, Sandboxpreview2, Sandboxconsole2, CodeComparison, Sandboxtabs, Sandboxtabslist, Sandboxtabstrigger, Sandboxtabscontent, Sandboxcodeeditor, Sandboxconsole, Sandboxfileexplorer, Sandboxlayout, Sandboxpreview, Sandboxprovider, Codeblocksection, Codeblock, Codeblockheader, Codeblockselect, Codeblockselecttrigger, Codeblockselectvalue, Codeblockselectcontent, Codeblockselectitem, Codeblockcopybutton, Codeblockbody, Codeblockitem, Codeblockcontent, Codeeditor, Copybutton, CodeSection, CssSection, HtmlSection, DisplayInstallCode, DisplayInstallCodeArray, DisplayGithubInstall, JsonSection, Propscode, Propscopybutton, Propscopybuttongroup, Allprops, Basicallprops, TerminalCode, TsxSection, SlidingNumber, Counter, Threedcard, Cardbody, Carditem, Badge1, Badgewrapper1, Badgevariants, Badgewrappervariants, Iphone15Pro, Safari, Android, NumberTicker, Tweetcard1, Tweetskeleton1, Tweetnotfound1, Magictweet1, Tweetheader1, Tweetbody1, Tweetmedia1, Tags, Tagstrigger, Tagsvalue, Tagscontent, Tagsinput, Tagslist, Tagsempty, Tagsgroup, Tagsitem, Pill, Pillavatar, Pillbutton, Pillstatus, Pillindicator, Pilldelta, Pillicon, Pillavatargroup, TweetCard, CardStack, ChatBubble, DeviceMockup, Checkabletag, Tag, Comment, CardFlip, FlyoutMenu, ActivityCard, MagicCard, Commandwcombobox, Combobox2, Comboboxtrigger2, Comboboxcontent2, Comboboxinput2, Comboboxlist2, Comboboxempty2, Comboboxgroup2, Comboboxitem2, Comboboxseparator2, Comboboxcreatenew2, AnimatedHero1, Creditcard, Creditcardflipper, Creditcardfront, Creditcardback, Creditcardname, Creditcardnumber, Creditcardexpiry, Creditcardcvv, Creditcardchip, Creditcardlogo, Creditcardserviceprovider, Creditcardmagstripe, Ticker, Tickericon, Tickersymbol, Tickerprice, Tickerpricechange, Meter, Diff, Diffdemo, Diffusage, TimelineV1, Feed, Stat, Treeview, Treeviewlabel, Treeviewtree, Treeviewbranchcontrol, Treeviewbranchtext, Treeviewbranchindicator, Treeviewitem, Treeviewitemtext, Treeviewnode, Treeviewvariants, Treeitemvariants, Timeline, Faq, Highlight, Datalist, datalistitem, datalistlabel, datalistvalue, datalistkeyvalue, datalistrow, datalistactions, datalistactionmenu, DescriptionLists, Stats, OrderList, TransferList, Colorpicker3, Colorpickeralpha, Colorpickereyedropper, Colorpickerformat, Colorpickerhue, Colorpickeroutput, Colorpickerselection, ColorPicker1, ColorPicker, Choicebox, Choiceboxitem, Choiceboxitemheader, Choiceboxitemtitle, Choiceboxitemsubtitle, Choiceboxitemdescription, Choiceboxitemcontent, Choiceboxitemindicator, AutoResizingTextarea, Textareav2, PasswordInput, DebouncedInput, KeyFilter, InputMask, Inputtext, LabelVariant, InputGroup, FloatingLabel, FloatLabel, StepFormWizard, FormWizard, Fieldset, fieldsetcontent, fieldsetfooter, Forms, MultiCascadeTree, Multicascader, Multicascaderdemo, Checktree, Checktreedemo, CheckTreePicker, CascadeTree, Cascader, TreePicker, ProfileDropdown, ActionSearchBar, MultiSelect, Listbox, Combobox0, ComboboxV1, MultiCombobox, Combobox, NestedCombobox, NestedCommandDialog, NestedCommand, CommandV2, FilterCombobox, Autocomplete, FuseSearchInput, FuzzyFilter, FuzzySort, SearchInput, Toggleclass, CheckboxCard, CheckboxMultistate, CheckboxTristate, TriStateCheckbox, SelectButton, Radiotile, Radiotilegroup, CheckboxCardV1, CheckboxV1, TagsInput, PillsInput, PinInput, Rating, Creditcardinput, Expiryinput, Cvvinput, Creditcardinputdemo, JsonInput, Inplace, InlineEdit, InputIcon, ActionPanel, ActionBar, Iconfield, Banner2, Bannericon2, Bannertitle2, Banneraction2, Bannerclose2, Banner, Announcement, DotLoader, Status, Toast, Alertv1, Alertdescription, Alerttitle, Indicator,
+} from "~/components/catalyst-ui";
+
+import {
+  Alert, CallOut, EmptyState, SpinnerV3, SpinnerV2, Spinnerv1, Empty, InsufficientPermissions, Dimmer, FourOhFour, Underconstruction, Unauthorized, Notification, Error, Spinner, LoadErrorPage, Loading,  EditEmployeeSchedule, EmployeeSchedule, ViewPunchClock, PunchClock, CardHeadings, PageHeading, SectionHeadings, PinList, Tree, Folder, File, Collapsebutton, Listprovider, Listgroup, Listheader, Listitems, Listitem, StackedLists, Item, Rail, Feeds, GridLists, Datatable, Simpletabledemo, Cardtabledemo, Borderedtabledemo, Fullwidthtabledemo, Darktabledemo, MultiColumnLayouts, StackedLayout, SidebarLayout, Bentogrid, Bentocard, CollapsibleSection, Panel, Group, Bentogrid, Bentogriditem, Stack, Layout, Header, Content, Footer, Sidebar, Grid, Row, Col, For, Flexboxgrid, Flexboxgriditem, Container, Center, Box, AbsoluteCenter, Card, List, MediaObject, Bentogrid1, Bentocard1, PlaceholderCodeSection, HeroVideoDialog, Scaffolding, Contactsection, Contact, Content, Team, Navbar1, Navbar2, Navbar3, Navbar4, Navbar5, Navbar6, Navbar7, Navbar8, Navbar9, Navbar10, Navbar11, Navbar12, Navbar13, Navbar14, Navbar15, Navbar16, Navbar17, Navbar18, MenuDock, MessageDock, LimelightNav, Fab, FabMenu, EFab, Dock2, Dock2icon, Toolbar, Toolbargroup, Toolbarseparator, Toolbarbutton, Toolbarsearch, SmoothTab, Actionbar, Actionbarcontent, Actionbardescription, Affix, Kbd, TabMenu, ThemeSelector, Tabview, Tabpanel, SpeedDial, Remixlink, Remixnavlink, Remixlinktext, Remixnavlinktext, PanelMenu, Menu, MegaMenu, Dock, Dockvariants, Dockitemvariants, TypeDockprops, TypeDockitem, Steps, Anchor, HeaderNav, Menubar, Menubarcontent, Menubaritem, Menubarmenu, Menubarseparator, Menubarshortcut, Menubartrigger, Menubarportal, Menubargroup, Menubarlabel, Menubarcheckboxitem, Menubarradioitem, Menubarradiogroup, Menubarsub, Menubarsubtrigger, Menubarsubcontent, Pageactions, Pageheader, Pageheaderdescription, Pageheaderheading, PaginationWrapper, PaginationButton, SiteHeader, ScriptsEditor, ScriptsViewer, CalendarForSidebar, DrawerDatePicker, Calendarprovider, Calendardate, Calendardatepicker, Calendarmonthpicker, Calendaryearpicker, Calendardatepagination, Calendarheader, Calendarbody, Calendaritem, Usecalendarmonth, Usecalendaryear, Monthsforlocale, Daysforlocale, Relativetime, Relativetimezone, Relativetimezonedisplay, Relativetimezonedate, Relativetimezonelabel, Minicalendar, Minicalendarnavigation, Minicalendardays, Minicalendarday, TimePicker, PopoverDateInput, ModalDateInput, Dockeddatepicker, Dockeddatepickertrigger, TimePickerInput, TimePickerDial, CategoryFilters, CategoryPreviews, CheckoutForms, Incentives, OrderHistory, OrderSummaries, ProductCard, ProductFeatures, ProductLists, ProductOverview, ProductQuickviews, PromoSections, Reviews, ShoppingCarts, StoreNavigation, PromotionEngine, PromotionsManager, CashTillManager, CashDrawerWizard, UseCopyToClipboard, UseLocalStorageAutoSave, UseExpandable, UseGoogleFont, UseDocumentTitle, UseEventCallback, UseIsClient, UseIsomorphicLayoutEffect, UseReadLocalStorage, UseResizeObserver, UseScript, UseScreen, UseScrollLock, UseOnClickOutside, UseSecFetchParser, UseTimer, UseApiKey, UseBreakpoint, UseExternalScripts, UseSlideIn, UseStream, DebouncedFetcherAndSubmit, PrefetchAnchors, DelegateAnchorsToRemixUsedelegatedanchors, UseShouldHydrate, UseLocales, UseGlobalLoadingState, UseGlobalSubmittingState, UseGlobalPendingState, UseGlobalNavigationState, UseEventListener, UseExportMarkdown, UseHydrated, UseFocusWithin, UseFocus, UsePress, UseLongPress, UseKeyboard, UseHover, UseMove, UseMountEffect, UseUpdateEffect, UseUnmountEffect, UseOverlayListener, UseOverlayScrollListener, UseFavicon, UseResizeListener, UseMobile, UseMounted, UseMutationObserver, UseExportTsx, UseFuzzySearch, UseFuseSearch, UseDebouncedFuseSearch, UseMediaQuery, UseLocalStorage, UseSessionStorage, UseDebounce, UseThrottle, UsePrevious, UseToggle, UseCounter, UseInterval, UseTimeout, UseClickOutside, UseKeyPress, UseOnlineStatus, UseWindowSize, UseScrollPosition, UseIntersectionObserver, UseAsync, UseFetch, UseForm, Scrollvelocitycontainer, Scrollvelocityrow, Wrap, Lens, Pointer, SmoothCursor, Motionhighlight, Motionhighlightitem, Usemotionhighlight, Magnetic, Kanbanprovider, Kanbanboard, Kanbanheader, Kanbancards, Kanbancard, Ganttprovider, Gantttimeline, Ganttheader, Ganttsidebar, Ganttsidebargroup, Ganttsidebaritem, Ganttfeaturelist, Ganttfeaturelistgroup, Ganttfeaturerow, Ganttfeatureitem, Gantttoday, Ganttmarker, Ganttcreatemarkertrigger, Useganttdragging, Useganttscrollx, Dropzone, Dropzonecontent, Dropzoneemptystate, Cursorprovider, Cursor, Cursorfollow, Usecursor, Pincontainer, Pinperspective, Cardcontainer, Cardbody, Carditem, Spoiler, Sticky, InPlace, ActionSheet, FixedMarker, Ripple, IconCloud, Tour1, Tour, MouseEffectCard, CurrencyTransfer, FileUploadV1, FileSaver, ExcelExport, FileUpload, Pdfgenerator,
+            } from "~/components/catalyst-ui";
+
+import {
+  Pdfgeneratordemo, PdfSignature, Pdfsignature, Pdfviewer, Signature, Aiprompt, Aipromptview, Aipromptoutputview, Aipromptcommandsview, Drawing, Drawingsurface, Drawingtoolbar, Drawingv2, DropZone, Draggable, Draggablecard, Taskboard, Taskcolumn, Taskcard, Sortable, Sortableitem, Sortablehandle, Spreadsheet, ColorSwatch, DropZoneExternal, Terminal, About, Navbutton, Navbuttonstytled, Hero, Exportfile, Verticalnavigation, Emptystate, Flyoutmenu, Logoclouds, Editor, Buttonicon, Buttonlink, Buttonloading, Buttongroup, Calendarforsidebar, CalendarmultidayLofi, Copytext, Debouncedinput, AccountForm, Atom,  Accordian, AspectRatio, Authenticator, Avatar, Badge, BannerLofi, BentoGrid, Blog, ButtonLofi, Breadcrumb, Calendar, CardHeader, CardHeading, Carousel, Cart, CategoryFilter, CategoryPage, Checkbox, CheckoutForm, CheckoutPage, CheckoutPage2, Collapsible, Component, Columns, ContactSection, ContentSection, CookieSettings, CtaSection, Data, Descriptionlists, DataTable, DatePicker, DetailsSection, Dropdown, Dialog, Formlayouts, DisplayCode, DropdownMenu, FaqSection, Feature, FeatureSection, FeedList, Footer, Form, Header, HomeScreen, Hooks, HoverCard, Icons, Image, Input, Listlofi, Label, LandingPage, Menubar, Multicolumnlayouts, Newsletter, Notifications, OrderDetailsPage, Pagenav, Pagination, PaymentMethod, Pricing, PricingPage, Prisma, ProductGallery, ProductList, ProductsFeatured, Progress, PromoSection, RadioGroup, ReportIssue, Review, ReviewsSection, ScrollBar, Select, SettingsSection, Sectionheadings, ShoppingCart, Sidebar, Skeleton, Slider, StackedLayouts, StoreFrontPages, StoreNav, Switch, Tabs, Tailwind, Team2, Toggle, Templatepage, Testimonial, Textarea, Tooltip, Usehydrated, AboutLoFi, AccessLoFi, AccountLoFi, ActionBarLoFi, ActivityGoalLoFi, AiChatLoFi, AipromptLoFi, AlertV, AspectRatioLoFi, AuthProviderLoFi, AuthSystemLoFi, AutoCompleteV, BankLoFi, BarcodeLoFi, BasicAuthMiddlewareLoFi, BatcherMiddlewareLoFi, BlockQuoteLoFi, BlocksLoFi, BloFi, BlogEditorLoFi, BlogListLoFi, BlogSidebarLoFi, BoxLoFi, CrmsidebarCalendarLoFi, CalendarLoFi, CallOutLoFi, CardsLoFi, CarouselHeroLoFi, CarServiceLoFi, CascadeTreeLoFi, CascaderLoFi, CategoriesNavigationLoFi, CategoryFiltersSectionCenteredLoFi, CategoryFiltersSectionLoFi, CategoryFiltersSidebarLoFi, ChangelogSectionLoFi, ChatBubbleLoFi, ChatLoFi, CheckTreeLoFi, CheckTreePickerLoFi, CheckboxCardV, CheckboxV, CheckboxMultistateLoFi, CheckboxTristateLoFi, CheckListLoFi, CheckoutCancelLoFi, CheckoutFormLoFi, CheckoutSuccessLoFi, CheckoutVariousLoFi, ClientOnlyMermaidLoFi, ClientOnlyLoFi, CnLoFi, CodeSectionLoFi, CollapsesToIconsLoFi, CollapsibleFileTreeLoFi, ColorPickerLoFi, ComboboxV, ConfigSectionLoFi, ConfirmPopupLoFi, ContactLoFi, ContainerLoFi, ContextStorageMiddlewareLoFi, CookieSettingsLoFi, CoreLoFi, CorsmiddlewareLoFi, CreateAccountLoFi, CreditCardInputLoFi, CssloFi, DashboardLoFi, DashboardSidebarLoFi, DebouncedFetcherAndSubmitLoFi, DebouncedInputLoFi, DefaultStyledLoFi, DeferredContentLoFi, DelegateAnchorsToRemixLoFi, DetailLoFi, DeviceMockupLoFi, DiffLoFi, DisplayCodeLoFi, DockLoFi, DragAndDropLoFi, DrawerLoFi, DrawingLoFi, DrawingV, DropZoneLoFi, EcommerceLoFi, EmbedLoFi, EmblaCarouselLoFi, EmblaCarouselSnapLoFi, EnhancedChartLoFi, ErrorLoFi, ExerciseMinutesLoFi, FabloFi, FaqLoFi, FeatureSectionLoFi, FeedLoFi, FileManagerLoFi, FilterComboboxLoFi, FilterDrawerLoFi, FilterTanStackTableLoFi, FixedMarkerLoFi, FlexboxGridLoFi, FloatingLabelLoFi, FloatingSidebarWithSubmenusLoFi, FooterLoFi, ForgotPasswordLoFi, ForLoFi, FormWizardLoFi, FormsLoFi, Four, FunctionalLeftRightSidebarLoFi, FuseSearchInputLoFi, FuzzyFilterLoFi, FuzzySortLoFi, GalleriaLoFi, GnattChartLoFi, GridLoFi, H, HeaderNavLoFi, HelpLoFi, HeroLoFi, HeroV, HighlightLoFi, HighlightV, HomeLoFi, HoneypotMiddlewareLoFi, IbloFi, IloFi, ImageLoFi, ImageSectionLoFi, InAdialogLoFi, IncentivesCardLoFi, IncIdLoFi, IndicatorLoFi, InlineEditLoFi, InplaceLoFi, InputMaskLoFi, InsetSidebarSecondaryNavLoFi, InstallCodeArraySectionLoFi, InstallCodeSectionLoFi, InstallGithubSectionLoFi, InsufficientPermissionsLoFi, InvoiceLoFi, JsonInputLoFi, JwkauthMiddlewareLoFi, LandingLoFi, LayoutLoFi, LoadErrorPageLoFi, LoadingLoFi, LoadingOverlayLoFi, LoadingPageLoFi,
+} from "~/components/catalyst-ui";
+
+import {
+  LoginLoFi, MailLoFi, MarketingLoFi, MegaMenuLoFi, MenuLoFi, MessageLoFi, MeterLoFi, MobileNavLoFi, ModalIntegrationsLoFi, ModalV, MultiCascadeTreeLoFi, MultiCascaderLoFi, MultiComboboxLoFi, MusicLoFi, NavShoppingCartLoFi, NavMainLoFi, NavProjectsLoFi, NavTreeViewLoFi, NavUserLoFi, NestedComboboxLoFi, NestedCommandDialogLoFi, NestedCommandLoFi, NoteSectionLoFi, NotFoundLoFi, NotificationLoFi, OnTheRightLoFi, OrderedListLoFi, OrderHistoryLoFi, OrderListLoFi, OrderSummaryLoFi, OtpLoFi, OverlayPanelLoFi, PageHeaderLoFi, PageHeadingsSectionLoFi, PaginationButtonLoFi, PaginationWrapperLoFi, PanelLoFi, PanelMenuLoFi, PasswordInputLoFi, PaymentFormLoFi, PaymentMethodLoFi, PaymentsLoFi, PdfgeneratorLoFi, PdfSignatureLoFi, PdfViewerLoFi, PinInputLoFi, PlaceholderCodeLoFi, PlaygroundLoFi, PmloFi, PopconfirmLoFi, PrefetchAnchorsLoFi, PrismaClientExtensionLoFi, ProductCategoryLoFi, ProductComparisonLoFi, ProductDetailsLoFi, ProductEditLoFi, ProductListLoFi, ProductPricingLoFi, ProductsLoFi, ProfileCreateLoFi, ProfileListLoFi, ProfileLoFi, ProgressLoFi, ProseLoFi, QaDiscussionLoFi, QaForumLoFi, QrcodeLoFi, RailLoFi, RatingLoFi, ReactHooksDocsLoFi, ReceiptLoFi, RedirectBadRequestsLoFi, RegisterLoFi, RemixAuthLoFi, RemixLinkLoFi, ReportIssueLoFi, RequestIdmiddlewareLoFi, ResetPasswordLoFi, ResponsiveLinkLoFi, RightSidebarLoFi, SaasLoFi, ScaffoldingLoFi, SchedulerLoFi, ScrolltopLoFi, SecFetchParserLoFi, SecureHeadersMiddlewareLoFi, SelectButtonLoFi, ServerTimingMiddlewareLoFi, ServiceRepairFormLoFi, SessionLoFi, SettingsLoFi, ShareLoFi, ShoppingCartLoFi, SidebarAgnosticLoFi, SidebarDetailsLoFi, SidebarInApopoverLoFi, SidebarLoFi, SidebarNavLoFi, SidebarReactRouterLoFi, SidebarStylisticDefaultLoFi, SidebarStylisticDefaultWrightLoFi, SidebarWithSubmenusLoFi, SignatureLoFi, SignUpLoFi, SingletonMiddlewareLoFi, SiteHeaderLoFi, SmallTableLoFi, SpeedDialLoFi, SpinLoFi, SpinnerLoFi, StackedListsLoFi, StackedLoFi, StackLoFi, StateChangeLoFi, StatsLoFi, StatusLoFi, StepFormWizardLoFi, StepsLoFi, StoreFrontLoFi, StoreNavSectionLoFi, StripeLoFi, StyleProviderLoFi, TableLoFi, TabViewLoFi, TagLoFi, TagsInputLoFi, TailwindcssTxtLoFi, TaskboardLoFi, TaskListLoFi, TasksLoFi, TeamMembersLoFi, TerminalLoFi, AutoResizingTextareaLoFi, TextareaV, TextEditorLoFi, ThemeSelectorLoFi, TicketsLoFi, TimelineLoFi, TimelineV, TitleSectionLoFi, ToDoLoFi, ToggleClassLoFi, ToolbarLoFi, TourLoFi, TransferListLoFi, TransitionablePortalLoFi, TransitionLoFi, TravelLoFi, TreeViewLoFi, TriStateCheckboxLoFi, TstableLoFi, TstableV1, TstableV2, TsxsectionLoFi, UnderConstructionLoFi, UsageSectionLoFi, UsageSectionNoDashLoFi, UseAsyncLoFi, UseClickOutsideLoFi, UseCopyToClipboardLoFi, UseCounterLoFi, UseDebouncedFuseSearchLoFi, UseDebounceLoFi, UseEventListenerLoFi, UseExportMarkdownLoFi, UseExportTsxLoFi, UseExternalScriptsLoFi, UseFaviconLoFi, UseFetchLoFi, UseFocusLoFi, UseFocusWithinLoFi, UseFormLoFi, UseFuseSearchLoFi, UseFuzzySearchLoFi, UseGlobalLoadingStateLoFi, UseGlobalNavigationStateLoFi, UseGlobalPendingStateLoFi, UseGlobalSubmittingStateLoFi, UseHoverLoFi, UseHydratedLoFi, UseIntersectionObserverLoFi, UseIntervalLoFi, UseKeyboardLoFi, UseKeyPressLoFi, UseLocalesLoFi, UseLocalStorageLoFi, UseLongPressLoFi, UseMediaQueryLoFi, UseMobileLoFi, UseMountedLoFi, UseMountEffectLoFi, UseMoveLoFi, UseMutationObserverLoFi, UseOnlineStatusLoFi, UseOverlayListenerLoFi, UseOverlayScrollListenerLoFi, UsePressLoFi, UsePreviousLoFi, UserBasedAccessRulesLoFi, UseResizeListenerLoFi, UserLoFi, UserOnboardingLoFi, UseScrollPositionLoFi, UseSessionStorageLoFi, UseShouldHydrateLoFi, UseSlideInLoFi, UseStreamLoFi, UseThrottleLoFi, UseTimeoutLoFi, UseToggleLoFi, UseUnmountEffectLoFi, UseUpdateEffectLoFi, UseWindowSizeLoFi, VerificationLoFi, VirtualizerLoFi, WatermarkLoFi, WithAcalendarLoFi, WithAshoppingCartLoFi, WithAtreeViewLoFi, WithCollapsibleNestedSidebarsLoFi, WithCollapsibleSectionsLoFi, WithCollapsibleSubmenusLoFi, WithCookieMiddlewareLoFi, WithInitialLoadingStateLoFi, WithLoadingNavStateChangesLoFi, WithNavigationGroupedBySectionLoFi, WithSubmenusAsDropdownsLoFi, AnimatedTestimonials, Headers1, TestimonialCarousel, PricingCarousel, FeatureCarousel, PricingCarouselV2, FeatureShowcase, PricingCardSingle, BlogEditor, BlogPost, Cta, LogoClouds, NewsLetter, Carousel2, Carouselitem2, Carouselvariants, Carouselcontentvariants, Carouselitemvariants, Interactiveiconcloud, Cloudprops, Rendercustomicon, Marquee1, PixelImage, Marquee, Imagecrop, Imagecropcontent, Imagecropapply, Imagecropreset, Cropper, ImageZoom, Comparison, Comparisonitem, Comparisonhandle, Carousel, Carouselitem, Avatargroup, Avatargrouptooltip, Threedmarquee, Gridlinehorizontal, Gridlinevertical, Logo, Logoimage, Logotext, Iframe, Iframevariants, Embed, Globe, BlurFade, AvatarCircles, Googlemap, Mapmarker, Carouselv1, InfiniteScroll, Galleria, CarouselWithIndicator, EmblaCarousel, CarouselHero, CarouselSimple, Animatedmodal, Animatedmodalbody, Animatedmodalcontent, Animatedmodalfooter, Animatedmodaltrigger, Animatedmodalclosebutton, Animatedmodalsuccessbutton, Usemodal, Useds, Dsleftrail, Dsrightrail, Dsheader, Dscontent, Dsfooter, Dsavatar, Dsavatarimage, Dsavatarfallback, Dsgroup, Dsgroupaction, Dsgroupcontent, Dsgrouplabel, Dsinput, Dsmenu, Dsmenuaction, Dsmenubadge, Dsmenubutton, Dsmenuitem, Dsmenuskeleton, Dsmenusub, Dsmenusubbutton, Dsmenusubitem, Dsseparator, Dsmenuanchor, Dsmenulink, Dsloading, Usedstheme, Dsthemeselector, TypeDstheme, Dsthemeprovider, Dsprovider, Dsinset, Dstrigger, Dsleft, Dslefticon, Dsright, Dsrighticon, Dsd, Dsdbottom, Dsdtrigger, Dsdportal, Dsdclose, Dsdoverlay, Dsdcontent, Dsdheader, Dsdfooter, Dsdtitle, Dsddescription, Dsdm, Dsdmportal, Dsdmtrigger, Dsdmcontent, Dsdmgroup, Dsdmlabel, Dsdmitem, Dsdmcheckboxitem, Dsdmradiogroup, Dsdmradioitem, Dsdmseparator, Dsdmshortcut, Dsdmsub, Dsdmsubtrigger, Dsdmsubcontent, Dsdmanchor, Dsc, Dsctrigger, Dsccontent, Sidebar, Sidebarcontent, Sidebarfooter, Sidebargroup, Sidebargroupaction, Sidebargroupcontent, Sidebargrouplabel, Sidebarheader, Sidebarinput, Sidebarinset, Sidebarmenu, Sidebarmenuaction, Sidebarmenubadge, Sidebarmenubutton, Sidebarmenuitem, Sidebarmenuskeleton, Sidebarmenusub, Sidebarmenusubbutton, Sidebarmenusubitem, Sidebarprovider, Sidebarrail, Sidebarseparator, Sidebartrigger, Usesidebar, Modalv1, TransitionablePortal, ModalIntegrations, LoadingOverlay, OverlayPanel, ConfirmPopup, Popconfirm, Dialogstack, Dialogstacktrigger, Dialogstackoverlay, Dialogstackbody, Dialogstackcontent, Dialogstackheader, Dialogstacktitle, Dialogstackdescription, Dialogstackfooter, Dialogstacknext, Dialogstackprevious, AnimatedTooltip, PdfAction, GenerateCustomPdf, GeneratePdf, PdfGenerator, PdfSender, PdfSigner, PrintPdf, TemplateBuilder, Playscansound, Barcodescanner, Cashdrawerservice, Validateapppath, Validatecommandargs, Validateexecution, Usecashdrawer, Table, Tableheader, Tablebody, Tablefooter, Tablehead, Tablerow, Tablecell, Tablecaption, Item, Itemmedia, Itemcontent, Itemactions, Itemgroup, Itemseparator, Itemtitle, Itemdescription, Itemheader, Itemfooter, Pagination, Paginationcontent, Paginationellipsis, Paginationitem, Paginationlink, Paginationnext, Paginationprevious, Paginationwithhrefs, TypePaginationprops, TypePaginationlinkprops, Field, Fieldlabel, Fielddescription, Fielderror, Chartcontainer, Charttooltip, Charttooltipcontent, Chartlegend, Chartlegendcontent, Chartstyle, Badge, Badgevariants, Avatar, Avatarimage, Avatarfallback, Resizablehandle, Resizablepanel, Resizablepanelgroup, Breadcrumb, Breadcrumblist, Breadcrumbitem, Breadcrumblink, Breadcrumbpage, Breadcrumbseparator, Breadcrumbellipsis, Inputotp, Inputotpgroup, Inputotpslot, Inputotpseparator, CalendarTailwindV4, Navigationmenu, Navigationmenulist, Navigationmenuitem, Navigationmenucontent, Navigationmenutrigger, Navigationmenulink, Navigationmenuindicator, Navigationmenuviewport, Navigationmenutriggerstyle, Contextmenu, Contextmenutrigger, Contextmenucontent, Contextmenuitem, Contextmenucheckboxitem, Contextmenuradioitem, Contextmenulabel, Contextmenuseparator, Contextmenushortcut, Contextmenugroup, Contextmenuportal, Contextmenusub,
+} from "~/components/catalyst-ui";
+
+import {
+  Contextmenusubcontent, Contextmenusubtrigger, Contextmenuradiogroup, Tabs, Tabslist, Tabstrigger, Tabscontent, Virtualizer, Virtualizerdemo, Virtualizerusage, Accordion, Accordionitem, Accordiontrigger, Accordioncontent, Button, Buttonvariants, Command, Commanddialog, Commandempty, Commandgroup, Commandinput, Commanditem, Commandlist, Commandseparator, Commandshortcut, Radiogroup, Radiogroupitem, Togglegroup, Togglegroupitem, Card, Cardheader, Cardfooter, Cardtitle, Carddescription, Cardcontent, Collapsible, Collapsiblecontent, Collapsibletrigger, Separator, Dropdownmenu, Dropdownmenucontent, Dropdownmenugroup, Dropdownmenuitem, Dropdownmenulabel, Dropdownmenuportal, Dropdownmenuseparator, Dropdownmenushortcut, Dropdownmenusub, Dropdownmenusubcontent, Dropdownmenusubtrigger, Dropdownmenutrigger, Select, Selectcontent, Selectitem, Selecttrigger, Selectvalue, Alertdialog, Alertdialogportal, Alertdialogoverlay, Alertdialogtrigger, Alertdialogcontent, Alertdialogheader, Alertdialogfooter, Alertdialogtitle, Alertdialogdescription, Alertdialogaction, Alertdialogcancel, Dialog, Dialogclose, Dialogcontent, Dialogdescription, Dialogfooter, Dialogheader, Dialogoverlay, Dialogportal, Dialogtitle, Dialogtrigger, Drawer, Drawerportal, Draweroverlay, Drawertrigger, Drawerclose, Drawercontent, Drawerheader, Drawerfooter, Drawertitle, Drawerdescription, Hovercard, Hovercardtrigger, Hovercardcontent, Popover, Popovertrigger, Popovercontent, Popoverclose, Popoverheader, Popoverfooter, Popovertitle, Popoverdescription, Popoveranchor, Tooltipprovider, Tooltip, Tooltiptrigger, Tooltipcontent, Sheet, Sheetportal, Sheetoverlay, Sheettrigger, Sheetclose, Sheetcontent, Sheetheader, Sheetfooter, Sheettitle, Sheetdescription, TypeSheetcontentprops, AiInputSearch, Ailoadingstate, Aitextloading, AiPromptInput, AiVoice, Inputbyok, Getopenaiapikey, Chainofthought, Chainofthoughtstep, Chainofthoughttrigger, Chainofthoughtcontent, Chainofthoughtitem, Chatcontainerroot, Chatcontainercontent, Chatcontainerscrollanchor, Codeblock, Codeblockcode, Codeblockgroup, Fileupload, Fileuploadtrigger, Fileuploadcontent, JsxPreview, Loader, Circularloader, Classicloader, Pulseloader, Pulsedotloader, Dotsloader, Typingloader, Waveloader, Barsloader, Terminalloader, Textblinkloader, Textshimmerloader, Textdotsloader, Markdown, Message, Messageavatar, Messagecontent, Messageactions, Messageaction, Promptinput, Promptinputtextarea, Promptinputactions, Promptinputaction, Promptsuggestion, Reasoning, Reasoningtrigger, Reasoningcontent, Responsestream, Usetextstream, Scrollbutton, Source, Sourcetrigger, Sourcecontent, Steps, Stepsitem, Stepstrigger, Stepscontent, Stepsbar, Systemmessage, Tool, Conversationpromptinput, Messagecomponent, Loadingmessage, Errormessage, Toolcallingchatbot, Messagecomponent, Loadingmessage, Errormessage, DevListSidebar, AppSidebar, NavQuickActions, NavAppointments, Messenger, ActiveToc, AnalogClock, Calendars, DigitalClock, LoadingSidebar, NavActions, NavAutoSearch, NavFavorites, NavHeader, NavMain, NavMessenger, NavProjects, NavSecondary, NavShoppingCart, NavShoppingCartcatlstui, NavTreeView, NavUser, NavWorkspaces, NavigationThemeSelector, OptInForm, PageHeader, SearchCommand, SearchForm, SidebarDialog, TeamSwitcher, Toc, Tree, VersionSwitcher, Wishlist, FilterTanstackTable, DefaultColumnHeader, Dtable, Draggabletableheader, PropsTable, LexicalEditor, IconAliases, CodeHighlightPlugin, Colorwheel, Colorthemes, MdRenderGenie, MonacoEditor, ScriptEditor, ScriptViewer, ColorWheel, DualEditor, Loader, Meta, MarkdownEditor, MarkdownRenderer, MdRenderer, MonacoSidebar, Cellcontext, Tablecontext, Inserttabledialog, Tableplugin, TailwindConverter, ThemeBuilder, ToolbarPlugin, LineShadowText, TextAnimate, TextHighlighter, TextReveal, WordRotate, TypingAnimation, VideoText, HyperText, ComicText, Textmorph, Scrolltext, Scrolltextword, Scrolltextletter, Typewriter, Typewriteronce, Typewriterword, SwooshText, SlicedText, ShimmerText, MatrixText, GlitchText, DynamicText, Highlight, Highlightdemo, Highlightusage, Prose, H5, H4, H3, Typography, OrderedList, P, Pm, UnorderedList, BlockQuote, CheckList, Div, H1, H2, B, I, Ib, Keyboardshortcut, Keyboardshortcutsprovider, Usekeyboardshortcut, QrCode1, Null, Barcode, Watermark, Transition, Scrolltop, Scrollxy, Scrolly, Scrollx, Scroll, ClientOnlyMermaid, Cn, Timeout, Ripple, Ripple, FormHoneypot, RespondtoForContentNegotiation, JsonHashResponse, SafeRedirects, PreloadRouteAssets, NamedActions, RollingCookie, ServerSentEvents, CreateTypedCookie, CreateTypedSessionStorage, Responses, IsPrefetch, GetHeaders, GetClientLocales, GetClientIpAddress, ExternalScriptsHandle, Cors, ServerOnly, CacheAssets, Promise, UserBasedAccessRules, PrismaClientExtension, BasicAuthMiddleware, BatcherMiddleware, ContextStorageMiddleware, Corsmiddleware, HoneypotMiddleware, JwkauthMiddleware, RequestIdmiddleware, SecFetchParser, SecureHeadersMiddleware, ServerTimingMiddleware, SingletonMiddleware, WithCookieMiddleware, Options, Incid, ExistingSearchParams, GetFetcherType, FetcherContext, AuthProvider, Styleprovider, Usestyles, Usestyleupdater, Getstyle, Styled, Createstylehook, Usepagestyle, Usecontainerstyle, Useheaderstyle, Usecardstyle, Useimagestyle, Useparagraphstyle, Usegridstyle, Usespacingstyle, Usepaddingstyle, Usemarginstyle, Pagediv, Containerdiv, Headerdiv, Carddiv, Imagediv, Paragraphdiv, Titleh1, Titleh2, Titleh3, Titleh4, Subtitlep, Flexcenter, Flexbetween, Flexcol, Appwithstyleprovider, Styleproviderdemo, Dynamicstyledemo, Usenavigationcontext, Navigationprovider, DynamicLinks, Deferredcontent, Deferredimage, Deferredtable, Deferredcard, Tailwindcss.txt, FilenameIconMap, RemixAuth, OtpAuthSession, OtpClientAuth, Sendemail, Sendauthemail, Authsessionstorage, Getauthsession, Clientsession, Redirectsessionstorage, Customersession, Sidebarsessionstorage, PrismaClient, BuildPackageJson, DbLocal, DbRemote, AccountBilling, AccountActiveSessions, AccountActivityLog, AccountApiKeys, AccountAppearanceSettings, AccountAvatarUpload, AccountBackupCodes, AccountBasicInformationForm, AccountChangePassword, AccountConnectedAccounts, AccountDangerZone, AccountEmailPreferences, AccountNotificationInbox, AccountNotificationPrefrences, AccountPrivacySettings, AccountReferralProgram, AccountSecuritySettings, AccountStorageManagement, AccountTeamMembers, AccountThirdPartyIntegrations, AccountTwoFactorAuth, AccountUsageAndAnalytics, AccountWebhooks, BlogCardsLoadMore, BlogCompactList, BlogFeaturedPosts, BlogGridWSearch, BlogHeroFeaturedPost, BlogLargePreview, BlogNewsletterSignup, BlogPostsWTags, BlogRectangularLayout, BlogSimpleCards, BlogWFilterChips, BlogWPagination, BlogWSidebar, ContactCallbackRequest, ContactFormWMap, ContactHeroSection, ContactMinimalForm, ContactMultiStepForm, ContactMultipleLocations, ContactSectionsWCard, ContactSectionsWImage, ContactSupportOptions, ContactTeamMembers, ContactWDarkCard, ContactWFaq, ContactWFileUpload, ContactWNewsletter, CrudActivityFeed, CrudAdvancedFilters, CrudBulkEditProducts, CrudCreateBlogPost, CrudDataTable, CrudDeleteConfirmationDialog, CrudDuplicateRecord, CrudEditProductForm, CrudEditUserProfile, CrudImportExportData, CrudInlineEditTable, CrudKanbanBoard, CrudManageRelationships, CrudProductDetailView, CrudSettingsForm, CrudStatusWorkflow, CrudUserListManagement, FooterCentered, FooterCompany, FooterMinimal, FooterMultiColumnFooter, FooterNewletter, FooterSimple, FooterWCta, FooterWLinks, FooterWLocalization, FooterWUpgradeCta, PromptCompactPrompt, PromptFullFeaturedPrompt, PromptInputAndModelSelector, PromptInput, TablesColumnVisbility, TablesDensityToggle, TablesExpandableRows, TablesExportOptions, TablesFilterableDataTable, TablesGroupedRows, TablesInlineEditing, TablesPageNavigation, TablesQuickFilters, TablesRowMenu, TablesRowSelection, TablesSortableColumns, TablesStickyHeader, TablesSummaryFooter, TablesWActions, TestimonialsBento, TestimonialsCentered, TestimonialsCompany, TestimonialsDarkCarousel, TestimonialsGridWAdd, TestimonialsImageCarousel, TestimonialsLargeQuote, TestimonialsMarquee, TestimonialsMasonry, TestimonialsMinimalSlider, TestimonialsSimple, TestimonialsSplit, TestimonialsVideo, TestimonialsWCards, TestimonialsWStats, TestimonialsWall, ScrollExpanseHero, PricingSectionWithComparison, MinWorldMap, MinTimeline, MinTestimonialsColumns, MinPricing, MinPricingTable, MinLayoutGrid, MinFeatureSection, MinCarousel, MinBentoGrid, MinActivityCard, InteractiveCheckout, ImagesSlider, HeroWImageTextAndTwoButtons, HeroGalleryScrollAnimation, HeroFashion, GlareCard, Gallery4, FullscreenCalendar, FocusCards, FeatureWImageCarousel, FeatureSectionWithGrid, FeatureSectionWHoverEffects, ExpandableCard, CircularTestimonials,
+} from "~/components/catalyst-ui";
+
+import {
+  ContainerScrollAnimation, ChatCard, MinPricingSection, MinPricingCards, Minherosection, Logo, AnimatedHero, MinFeature, Minfaqsection, Minfaqitem, BlogCategoriesNav, About3, Awards1, Banner1, Blogpost1, Careers4, Casestudies2, Casestudy8, Changelog1, Codeexample1, Community1, Compare7, Compliance1, Contact7, Content1, Cta10, Cta11, Download2, Experience1, Experience5, Faq1, Feature1, Feature2, Feature13, Feature17, Feature43, Feature51, Feature72, Feature73, Feature166, Feature197, Footer2, Gallery6, Hero1, Hero3, Hero7, Hero45, Hero47, Hero115, Integration3, List2, Login1, Logos8, Pricing2, Pricing4, Pricing6, Process1, Project1, Ratecard2, Resource1, Service1, Services4, Signup1, Stats8, Team1, Testimonial10, Timeline9, Waitlist1, Qrcodegenerator, TextEditor, Tickets, ToDo, Table, TaskList, Taskboard, Tasks, StatsCard, StatsSimple, StatsSimpleGrid, StatsWithDescription, Stacked, SidebarDetails, Settings, SettingsScreenSidebar, SettingsScreenStacked, Settings1, Settings2, Settings3, Settings4, Settings5, Settings6, Settings7, SectionHeadingWithDescription, SectionHeadingWithInputGroup, Scheduler, ScreenLock, PageNav, MobileNav, Mail, LockInScreen, Json, Kanban, Home, HomeScreenStacked, FuturisticDash, FilterDrawer, FilterDrawer3, FilterDrawer1, FilterDrawer2, FileManager, FileManager1, FeedComponents, FeedListMultipleItemTypes, FeedLists, CalendarV1, Drawer, DrawerDialogDragAndDrop, DescriptionList, DescriptionListNarrow, Dashboard, DashboardSidebar, CardHeadingWithDescription, ContentCentered, ContentSplitWithImage, ContentTwoColumnWithScreenshot, CollarabtiveCanvas, FormBlock, RoadmapBlock, PricingBlock, Hero2, WidgetCard, Calculator, Cards, UserOnboarding, Verification, Verification1, VerticalNav, UpdateUserModal, SignUp, SignUp1, SignUp2, Register, RemixAuthLogin, RemixAuthLogout, RemixAuthResetPassword, RemixAuthSignup, ResetPassword, ResetPassword1, OtpLogin, OtpLogout, OtpMagicLink, OtpVerify, OtpSignup, ForgotPassword, Login, Login2, Login4, Login5, Login6, Login7, Login8, Login9, Login10, PageHeadingsSection, PickerWithInput, DateOfBirth, Categorypage, Checkoutpage, Editproductpage, Orderdetailspage, Orderhistorypage, Pricingpage, Productpage, Productpage2, Shoppingcartpage, Storefront, PricingComparison, PricingPage1, PricingSectionCards, PricingSectionCards1, PricingSinglePriceDetails, PricingThreeTiersAndFeatureComparison, ProductDesecription, ProductListBorderGrid, ProductListFullDetails, ProductListSupportingText, ProductListTallImages, ProductListsSimple, ProductListsWInlinePrice, ProductOverviewsGalleryExpandable, ProductOverviewsTabs, ProductOverviewsTieredImages, ProductPage, ProductPage1, ProductPricing, ProductPricing1, ProductPricing2, ProductPricing3, Products, Products1, Products2, Products3, Products4, Products5, Products6, ProductCategory, ProductCategory1, ProductCategory2, ProductCategory3, ProductCategory4, ProductCategory5, ProductCategory6, ProductComparison, ProductComparison1, ProductDetails, ProductDetails1, ProductDetails2, ProductDetails3, ProductDetails4, ProductEdit, OrderDetailsPage2, OrderHistoryPage, OrderHistory1, OrderHistory6, OrderSummariesWSplitImage, OrderSummary, CheckoutCancel, CheckoutForm1, CheckoutForm2, CheckoutForm3, CheckoutForm4, CheckoutForm5, CheckoutForm6, CheckoutForm7, CheckoutSuccess, CheckoutVarious, PaymentForm, PaymentForm1, PaymentForm2, PaymentForm3, PaymentForm4, PaymentForm5, PaymentForm6, PaymentForm7, PaymentForm8, PaymentForm9, ShoppingCartExtendedSummary, ShoppingCartPage, ShoppingCartPage1, ShoppingCartSingleColumn, ShoppingCartTwoColumn, ShoppingCart1, ShoppingCart2, ShoppingCart3, Invoice, Invoice1, Invoice2, IncentivesBanner, IncentivesCard, IncentivesFeature, IncentivesSimple, Receipt, StoreFront, StoreFrontPage, StoreFront1, StoreFront2, StoreFront3, StoreNavImageGrid, StoreNavSection, StoreShowFunctionAndCode, CategoriesNavigation, CategoryFiltersSection, CategoryFiltersSectionCentered, CategoryFiltersSidebar, CategoryPage1, CategoryPreviewScrollingCards, CategoryPreviewSplitImages, CategoryPreviewThreeColumn, Access, Account, AccountblocksV1, AppleNotesClone, BankV1, Bank, BloombergTerminal, BookmarkHub, ActivityGoal, CarService, Imchat, ChatQuoteInterface, Config, Cyberpunk, Detail, DotMatrixGlobe, DynamicRain, DynamicTodo, FontPairingTool, FrostedGlass, GlassmorphicRichTextEditor, GlimmeringMap, GnattChart, Hoodie, LoanApp, MacosWidget, Music, Note, PageTransitions, Parallax, Playground, RotatingEarth, ScrollMotion, ServiceRepairForm, ServiceRepairForm1, ServiceRepairForm2, ServiceRepairForm3, Stripe, Strip2, Travel, Tsx, Usage, UsageSectionNoDash, VoiceWaveform, WebScraper, ThreeDCard, AsciiConverter, BentoPortfolioDesign, CardStock, Curriculum, FeatureVoting, LinearCardInteraction, NewLandingPage, Nexorasim, ParticleAnimation, SnakeGame, Webcamcircles, ColumnButtonInputCombo, AiChatUiDesign, Aiartgallery, ModernChatbot, AiChatV1, AiChatV2, AiChat, ConversationActions, ConversationAvatars, ConversationPromptInput, ConversationScrollBottom, FullChatApp, FullConversation, PromptAutocompleteHighlight, PromptInputActions, PromptInputSuggestions, SidebarChatHistory   
+     } from "~/components/catalyst-ui";
+
+// Create scope for React Live
+const reactLiveScope = {
+  React, useState, useEffect, useRef, useCallback, useMemo, useContext, useReducer,
+
+  Particles, Vortex, SparklesCore, RetroGrid, InteractiveGridPattern, HexagonBackground, BackgroundGradient, OrbitingCircles, AnimatedBeam, BackgroundPaths, FlickeringGrid, DotPattern, DottedMap, Rating1,Ratingbutton1, Themetogglebutton,Usethemetransition, ThemeSwitcher, TextRevealButton, RippleButton, Rate,Ratingbutton, LiquidButton, Inputbutton,Inputbuttonprovider,Inputbuttonaction,Inputbuttonsubmit,Inputbuttoninput, CopyButton, FlipButton, ShimmerButton, AnimatedThemeToggler, AttractButton, SlideButton, CommandButton, HoldButton, ParticleButton, SocialButton, SwitchButton, Buttongroup,Connectedbuttongroup, Floatbutton,Floatbuttongroup, TooltipButton, SplitButton, Burger,Burgerbutton,Burgernavigation,Burgermenudemo, CopyText, ExportFile, FormButton, ToggleButton, Enhancedchart,Enhancedchartdemo, Terminal,Animatedspan,Typinganimation, Sandboxtabs2,Sandboxtabslist2,Sandboxtabstrigger2,Sandboxtabscontent2,Sandboxfileexplorer2,Sandboxcodeeditor2,Sandboxpreview2,Sandboxconsole2, CodeComparison, Sandboxtabs,Sandboxtabslist,Sandboxtabstrigger,Sandboxtabscontent,Sandboxcodeeditor,Sandboxconsole,Sandboxfileexplorer,Sandboxlayout,Sandboxpreview,Sandboxprovider, Codeblocksection,Codeblock,Codeblockheader,Codeblockselect,Codeblockselecttrigger,Codeblockselectvalue,Codeblockselectcontent,Codeblockselectitem,Codeblockcopybutton,Codeblockbody,Codeblockitem,Codeblockcontent, Codeeditor,Copybutton, CodeSection, CssSection, HtmlSection, DisplayInstallCode, DisplayInstallCodeArray, DisplayGithubInstall, JsonSection, Propscode,Propscopybutton,Propscopybuttongroup,Allprops,Basicallprops, TerminalCode, TsxSection, SlidingNumber, Counter, Threedcard,Cardbody,Carditem, Badge1,Badgewrapper1,Badgevariants,Badgewrappervariants, Iphone15Pro, Safari, Android, NumberTicker, Tweetcard1,Tweetskeleton1,Tweetnotfound1,Magictweet1,Tweetheader1,Tweetbody1,Tweetmedia1, Tags,Tagstrigger,Tagsvalue,Tagscontent,Tagsinput,Tagslist,Tagsempty,Tagsgroup,Tagsitem, Pill,Pillavatar,Pillbutton,Pillstatus,Pillindicator,Pilldelta,Pillicon,Pillavatargroup, TweetCard, CardStack, ChatBubble, DeviceMockup, Checkabletag,Tag, Comment, CardFlip, FlyoutMenu, ActivityCard, MagicCard, Commandwcombobox, Combobox2,Comboboxtrigger2,Comboboxcontent2,Comboboxinput2,Comboboxlist2,Comboboxempty2,Comboboxgroup2,Comboboxitem2,Comboboxseparator2,Comboboxcreatenew2, AnimatedHero1, Creditcard,Creditcardflipper,Creditcardfront,Creditcardback,Creditcardname,Creditcardnumber,Creditcardexpiry,Creditcardcvv,Creditcardchip,Creditcardlogo,Creditcardserviceprovider,Creditcardmagstripe, Ticker,Tickericon,Tickersymbol,Tickerprice,Tickerpricechange, Meter, Diff,Diffdemo,Diffusage, TimelineV1, Feed, Stat, Treeview,Treeviewlabel,Treeviewtree,Treeviewbranchcontrol,Treeviewbranchtext,Treeviewbranchindicator,Treeviewitem,Treeviewitemtext,Treeviewnode,Treeviewvariants,Treeitemvariants, Timeline, Faq, Highlight, Datalist,datalistitem,datalistlabel,datalistvalue,datalistkeyvalue,datalistrow,datalistactions,datalistactionmenu, DescriptionLists, Stats, OrderList, TransferList, Colorpicker3,Colorpickeralpha,Colorpickereyedropper,Colorpickerformat,Colorpickerhue,Colorpickeroutput,Colorpickerselection, ColorPicker1, ColorPicker, Choicebox,Choiceboxitem,Choiceboxitemheader,Choiceboxitemtitle,Choiceboxitemsubtitle,Choiceboxitemdescription,Choiceboxitemcontent,Choiceboxitemindicator, AutoResizingTextarea, Textareav2, PasswordInput, DebouncedInput, KeyFilter, InputMask, Inputtext, LabelVariant, InputGroup, FloatingLabel, FloatLabel, StepFormWizard, FormWizard, Fieldset,fieldsetcontent,fieldsetfooter, Forms, MultiCascadeTree, Multicascader,Multicascaderdemo, Checktree,Checktreedemo, CheckTreePicker, CascadeTree, Cascader, TreePicker, ProfileDropdown, ActionSearchBar, MultiSelect, Listbox, Combobox0, ComboboxV1, MultiCombobox, Combobox, NestedCombobox, NestedCommandDialog, NestedCommand, CommandV2, FilterCombobox, Autocomplete, 
+  FuseSearchInput, FuzzyFilter, FuzzySort, SearchInput, Toggleclass, CheckboxCard, CheckboxMultistate, CheckboxTristate, TriStateCheckbox, SelectButton, Radiotile,Radiotilegroup, CheckboxCardV1, CheckboxV1, TagsInput, PillsInput, PinInput, Rating, Creditcardinput,Expiryinput,Cvvinput,Creditcardinputdemo, JsonInput, Inplace, InlineEdit, InputIcon, ActionPanel, ActionBar, Iconfield, Banner2,Bannericon2,Bannertitle2,Banneraction2,Bannerclose2, Banner, Announcement, DotLoader, Status, Toast, Alertv1,Alertdescription,Alerttitle, Indicator, Alert, CallOut, EmptyState, SpinnerV4, SpinnerV3, SpinnerV2, Spinnerv1, Empty, InsufficientPermissions, Dimmer, RatingDemoExample, Underconstruction, Unauthorized, Notification, Error, Spinner, LoadErrorPage, Loading, LoadingPage, EditEmployeeSchedule, EmployeeSchedule, ViewPunchClock, PunchClock, CardHeadings, PageHeading, SectionHeadings, PinList, Tree,Folder,File,Collapsebutton, Listprovider,Listgroup,Listheader,Listitems,Listitem, StackedLists, Item, Rail, Feeds, GridLists, Datatable,Simpletabledemo,Cardtabledemo,Borderedtabledemo,Fullwidthtabledemo,Darktabledemo, MultiColumnLayouts, StackedLayout, SidebarLayout, Bentogrid,Bentocard, CollapsibleSection, Panel, Group, Bentogrid,Bentogriditem, Stack, Layout,Header,Content,Footer,Sidebar, Grid,Row,Col, For, Flexboxgrid,Flexboxgriditem, Container, Center, Box, AbsoluteCenter, Card, List, MediaObject, Bentogrid1,Bentocard1, PlaceholderCodeSection, HeroVideoDialog, Scaffolding, Contactsection,Contact, Content, Team, Navbar1, Navbar2, Navbar3, Navbar4, Navbar5, Navbar6, Navbar7, Navbar8, Navbar9, Navbar10, Navbar11, Navbar12, Navbar13, Navbar14, Navbar15, Navbar16, Navbar17, Navbar18, MenuDock, MessageDock, LimelightNav, Fab, FabMenu, EFab, Dock2,Dock2icon, Toolbar,Toolbargroup,Toolbarseparator,Toolbarbutton,Toolbarsearch, SmoothTab, Actionbar,Actionbarcontent,Actionbardescription, Affix, Kbd, TabMenu, ThemeSelector, Tabview,Tabpanel, SpeedDial, Remixlink,Remixnavlink,Remixlinktext,Remixnavlinktext, PanelMenu, Menu, MegaMenu, Dock,Dockvariants,Dockitemvariants,TypeDockprops,TypeDockitem, Steps, Anchor, HeaderNav, Menubar,Menubarcontent,Menubaritem,Menubarmenu,Menubarseparator,Menubarshortcut,Menubartrigger,Menubarportal,Menubargroup,Menubarlabel,Menubarcheckboxitem,Menubarradioitem,Menubarradiogroup,Menubarsub,Menubarsubtrigger,Menubarsubcontent, Pageactions,Pageheader,Pageheaderdescription,Pageheaderheading, PaginationWrapper, PaginationButton, SiteHeader, ScriptsEditor, ScriptsViewer, CalendarForSidebar, DrawerDatePicker, Calendarprovider,Calendardate,Calendardatepicker,Calendarmonthpicker,Calendaryearpicker,Calendardatepagination,Calendarheader,Calendarbody,Calendaritem,Usecalendarmonth,Usecalendaryear,Monthsforlocale,Daysforlocale, Relativetime,Relativetimezone,Relativetimezonedisplay,Relativetimezonedate,Relativetimezonelabel, Minicalendar,Minicalendarnavigation,Minicalendardays,Minicalendarday, TimePicker, PopoverDateInput, ModalDateInput, Dockeddatepicker,Dockeddatepickertrigger, TimePickerInput, TimePickerDial, CategoryFilters, CategoryPreviews, CheckoutForms, Incentives, OrderHistory, OrderSummaries, ProductCard, ProductFeatures, ProductLists, ProductOverview, ProductQuickviews, PromoSections, Reviews, ShoppingCarts, StoreNavigation, PromotionEngine, PromotionsManager, CashTillManager, CashDrawerWizard, UseCopyToClipboard, UseLocalStorageAutoSave, UseExpandable, UseGoogleFont, UseDocumentTitle, UseEventCallback, UseIsClient, UseIsomorphicLayoutEffect, UseReadLocalStorage, UseResizeObserver, UseScript, UseScreen, UseScrollLock, UseOnClickOutside, UseSecFetchParser, UseTimer, UseApiKey, UseBreakpoint, UseExternalScripts, UseSlideIn, UseStream, DebouncedFetcherAndSubmit, PrefetchAnchors, 
+  DelegateAnchorsToRemixUsedelegatedanchors, UseShouldHydrate, UseLocales, UseGlobalLoadingState, UseGlobalSubmittingState, UseGlobalPendingState, UseGlobalNavigationState, UseEventListener, UseExportMarkdown, UseHydrated, UseFocusWithin, UseFocus, UsePress, UseLongPress, UseKeyboard, UseHover, UseMove, UseMountEffect, UseUpdateEffect, UseUnmountEffect, UseOverlayListener, UseOverlayScrollListener, UseFavicon, UseResizeListener, UseMobile, UseMounted, UseMutationObserver, UseExportTsx, UseFuzzySearch, UseFuseSearch, UseDebouncedFuseSearch, UseMediaQuery, UseLocalStorage, UseSessionStorage, UseDebounce, UseThrottle, UsePrevious, UseToggle, UseCounter, UseInterval, UseTimeout, UseClickOutside, UseKeyPress, UseOnlineStatus, UseWindowSize, UseScrollPosition, UseIntersectionObserver, UseAsync, UseFetch, UseForm, Scrollvelocitycontainer,Scrollvelocityrow,Wrap, Lens, Pointer, SmoothCursor, Motionhighlight,Motionhighlightitem,Usemotionhighlight, Magnetic, Kanbanprovider,Kanbanboard,Kanbanheader,Kanbancards,Kanbancard, Ganttprovider,Gantttimeline,Ganttheader,Ganttsidebar,Ganttsidebargroup,Ganttsidebaritem,Ganttfeaturelist,Ganttfeaturelistgroup,Ganttfeaturerow,Ganttfeatureitem,Gantttoday,Ganttmarker,Ganttcreatemarkertrigger,Useganttdragging,Useganttscrollx, Dropzone,Dropzonecontent,Dropzoneemptystate, Cursorprovider,Cursor,Cursorfollow,Usecursor, Pincontainer,Pinperspective, Cardcontainer,Cardbody,Carditem, Spoiler, Sticky, InPlace, ActionSheet, FixedMarker, Ripple, IconCloud, Tour1, Tour, MouseEffectCard, CurrencyTransfer, FileUploadV1, FileSaver, ExcelExport, FileUpload, Pdfgenerator,Pdfgeneratordemo, PdfSignature, Pdfsignature,Pdfviewer, Signature, Aiprompt,Aipromptview,Aipromptoutputview,Aipromptcommandsview, Drawing, Drawingsurface,Drawingtoolbar,Drawingv2, DropZone, Draggable,Draggablecard, Taskboard,Taskcolumn,Taskcard, Sortable,Sortableitem,Sortablehandle, Spreadsheet, ColorSwatch, DropZoneExternal, Terminal, About, Navbutton, Navbuttonstytled, Hero, Exportfile, Verticalnavigation, Emptystate, Flyoutmenu, Logoclouds, Editor, Buttonicon, Buttonlink, Buttonloading, Buttongroup, Calendarforsidebar, CalendarmultidayLofi, Copytext, Debouncedinput, AccountForm, Atom, AlertDialog, Accordian, AspectRatio, Authenticator, Avatar, Badge, BannerLofi, BentoGrid, Blog, ButtonLofi, Breadcrumb, Calendar, CardHeader, CardHeading, Carousel, Cart, CategoryFilter, CategoryPage, Checkbox, CheckoutForm, CheckoutPage, CheckoutPage2, ClientOnly, Collapsible, Component, Columns, ContactSection, ContentSection, CookieSettings, CtaSection, Data, Descriptionlists, DataTable, DatePicker, DetailsSection, Dropdown, Dialog, Formlayouts, DisplayCode, DropdownMenu, FaqSection, Feature, FeatureSection, FeedList, Footer, Form, Header, HomeScreen, Hooks, HoverCard, Icons, Image, Input, Listlofi, Label, LandingPage, Menubar, Multicolumnlayouts, Newsletter, Notifications, OrderDetailsPage, Pagenav, Pagination, PaymentMethod, Pricing, PricingPage, Prisma, ProductGallery, ProductList, ProductsFeatured, Progress, PromoSection, RadioGroup, ReportIssue, Review, ReviewsSection, ScrollBar, Select, SettingsSection, Sectionheadings, ShoppingCart, Sidebar, Skeleton, Slider, StackedLayouts, StoreFrontPages, StoreNav, Switch, Tabs, Tailwind, Team2, Toggle, Templatepage, Testimonial, Textarea, Tooltip, Usehydrated, AboutLoFi, AccessLoFi, AccountLoFi, ActionBarLoFi, ActivityGoalLoFi, AiChatLoFi, AipromptLoFi, AlertV, AspectRatioLoFi, AuthProviderLoFi, AuthSystemLoFi, AutoCompleteV, BankLoFi, BarcodeLoFi, BasicAuthMiddlewareLoFi, BatcherMiddlewareLoFi, BlockQuoteLoFi, BlocksLoFi, BloFi, BlogEditorLoFi, BlogListLoFi, BlogSidebarLoFi, BoxLoFi, CrmsidebarCalendarLoFi, CalendarLoFi, CallOutLoFi, CardsLoFi, CarouselHeroLoFi, CarServiceLoFi, CascadeTreeLoFi, CascaderLoFi, CategoriesNavigationLoFi, CategoryFiltersSectionCenteredLoFi, CategoryFiltersSectionLoFi, CategoryFiltersSidebarLoFi, ChangelogSectionLoFi, ChatBubbleLoFi, ChatLoFi, CheckTreeLoFi, CheckTreePickerLoFi, CheckboxCardV, CheckboxV, CheckboxMultistateLoFi, CheckboxTristateLoFi, CheckListLoFi, CheckoutCancelLoFi, CheckoutFormLoFi, CheckoutSuccessLoFi, CheckoutVariousLoFi, ClientOnlyMermaidLoFi, ClientOnlyLoFi, CnLoFi, CodeSectionLoFi, CollapsesToIconsLoFi, CollapsibleFileTreeLoFi, ColorPickerLoFi, ComboboxV, ConfigSectionLoFi, ConfirmPopupLoFi, ContactLoFi, ContainerLoFi, ContextStorageMiddlewareLoFi, CookieSettingsLoFi, CoreLoFi, CorsmiddlewareLoFi, CreateAccountLoFi, CreditCardInputLoFi, CssloFi, DashboardLoFi, DashboardSidebarLoFi, DebouncedFetcherAndSubmitLoFi, DebouncedInputLoFi, DefaultStyledLoFi, DeferredContentLoFi, DelegateAnchorsToRemixLoFi, DetailLoFi, DeviceMockupLoFi, DiffLoFi, DisplayCodeLoFi, DockLoFi, DragAndDropLoFi, DrawerLoFi, DrawingLoFi, DrawingV, DropZoneLoFi, EcommerceLoFi, EmbedLoFi, EmblaCarouselLoFi, EmblaCarouselSnapLoFi, EnhancedChartLoFi, ErrorLoFi, ExerciseMinutesLoFi, FabloFi, FaqLoFi, FeatureSectionLoFi, FeedLoFi, FileManagerLoFi, FilterComboboxLoFi, FilterDrawerLoFi, FilterTanStackTableLoFi, FixedMarkerLoFi, FlexboxGridLoFi, FloatingLabelLoFi, FloatingSidebarWithSubmenusLoFi, FooterLoFi, ForgotPasswordLoFi, ForLoFi, FormWizardLoFi, FormsLoFi, Four, FunctionalLeftRightSidebarLoFi, FuseSearchInputLoFi, FuzzyFilterLoFi, FuzzySortLoFi, GalleriaLoFi, GnattChartLoFi, GridLoFi, H, HeaderNavLoFi, HelpLoFi, HeroLoFi, HeroV, HighlightLoFi, HighlightV, HomeLoFi, HoneypotMiddlewareLoFi, IbloFi, IloFi, ImageLoFi, ImageSectionLoFi, InAdialogLoFi, IncentivesCardLoFi, IncIdLoFi, IndicatorLoFi, InlineEditLoFi, InplaceLoFi, InputMaskLoFi, InsetSidebarSecondaryNavLoFi, InstallCodeArraySectionLoFi, InstallCodeSectionLoFi, InstallGithubSectionLoFi, InsufficientPermissionsLoFi, InvoiceLoFi, JsonInputLoFi, JwkauthMiddlewareLoFi, LandingLoFi, LayoutLoFi, LoadErrorPageLoFi, LoadingLoFi, LoadingOverlayLoFi, LoadingPageLoFi, LoginLoFi, MailLoFi, MarketingLoFi, MegaMenuLoFi, MenuLoFi, MessageLoFi, MeterLoFi, MobileNavLoFi, ModalIntegrationsLoFi, ModalV, MultiCascadeTreeLoFi, MultiCascaderLoFi, MultiComboboxLoFi, MusicLoFi, NavShoppingCartLoFi, NavMainLoFi, NavProjectsLoFi, NavTreeViewLoFi, NavUserLoFi, NestedComboboxLoFi, NestedCommandDialogLoFi, NestedCommandLoFi, NoteSectionLoFi, NotFoundLoFi, NotificationLoFi, OnTheRightLoFi, OrderedListLoFi, OrderHistoryLoFi, OrderListLoFi, OrderSummaryLoFi, OtpLoFi, OverlayPanelLoFi, PageHeaderLoFi, PageHeadingsSectionLoFi, PaginationButtonLoFi, PaginationWrapperLoFi, PanelLoFi, PanelMenuLoFi, PasswordInputLoFi, PaymentFormLoFi, PaymentMethodLoFi, PaymentsLoFi, PdfgeneratorLoFi, PdfSignatureLoFi, PdfViewerLoFi, PinInputLoFi, PlaceholderCodeLoFi, PlaygroundLoFi, PmloFi, PopconfirmLoFi, PrefetchAnchorsLoFi, PrismaClientExtensionLoFi, ProductCategoryLoFi, ProductComparisonLoFi, ProductDetailsLoFi, ProductEditLoFi, ProductListLoFi, ProductPricingLoFi, ProductsLoFi, ProfileCreateLoFi, ProfileListLoFi, ProfileLoFi, ProgressLoFi, ProseLoFi, QaDiscussionLoFi, QaForumLoFi, QrcodeLoFi, RailLoFi, RatingLoFi, ReactHooksDocsLoFi, ReceiptLoFi, RedirectBadRequestsLoFi, RegisterLoFi, RemixAuthLoFi, RemixLinkLoFi, ReportIssueLoFi, RequestIdmiddlewareLoFi, ResetPasswordLoFi, ResponsiveLinkLoFi, RightSidebarLoFi, SaasLoFi, ScaffoldingLoFi, SchedulerLoFi, ScrolltopLoFi, SecFetchParserLoFi, SecureHeadersMiddlewareLoFi, SelectButtonLoFi, ServerTimingMiddlewareLoFi, ServiceRepairFormLoFi, SessionLoFi, SettingsLoFi, ShareLoFi, ShoppingCartLoFi, SidebarAgnosticLoFi, SidebarDetailsLoFi, SidebarInApopoverLoFi, SidebarLoFi, SidebarNavLoFi, SidebarReactRouterLoFi, SidebarStylisticDefaultLoFi, SidebarStylisticDefaultWrightLoFi, SidebarWithSubmenusLoFi, SignatureLoFi, SignUpLoFi, SingletonMiddlewareLoFi, SiteHeaderLoFi, SmallTableLoFi, SpeedDialLoFi, SpinLoFi, SpinnerLoFi, StackedListsLoFi, StackedLoFi, StackLoFi, StateChangeLoFi, StatsLoFi, StatusLoFi, StepFormWizardLoFi, StepsLoFi, StoreFrontLoFi, StoreNavSectionLoFi, StripeLoFi, StyleProviderLoFi, TableLoFi, TabViewLoFi, TagLoFi, TagsInputLoFi, TailwindcssTxtLoFi, TaskboardLoFi, TaskListLoFi, TasksLoFi, TeamMembersLoFi, TerminalLoFi, AutoResizingTextareaLoFi, TextareaV, TextEditorLoFi, ThemeSelectorLoFi, TicketsLoFi, TimelineLoFi, TimelineV, TitleSectionLoFi, ToDoLoFi, ToggleClassLoFi, ToolbarLoFi, TourLoFi, TransferListLoFi, TransitionablePortalLoFi, TransitionLoFi, TravelLoFi, TreeViewLoFi, TriStateCheckboxLoFi, TstableLoFi, TstableV1, TstableV2, TsxsectionLoFi, UnderConstructionLoFi, UsageSectionLoFi, UsageSectionNoDashLoFi, UseAsyncLoFi, UseClickOutsideLoFi, UseCopyToClipboardLoFi, UseCounterLoFi, UseDebouncedFuseSearchLoFi, UseDebounceLoFi, UseEventListenerLoFi, UseExportMarkdownLoFi, UseExportTsxLoFi, UseExternalScriptsLoFi, UseFaviconLoFi, UseFetchLoFi, UseFocusLoFi, UseFocusWithinLoFi, UseFormLoFi, UseFuseSearchLoFi, UseFuzzySearchLoFi, UseGlobalLoadingStateLoFi, UseGlobalNavigationStateLoFi, UseGlobalPendingStateLoFi, UseGlobalSubmittingStateLoFi, UseHoverLoFi, UseHydratedLoFi, UseIntersectionObserverLoFi, UseIntervalLoFi, UseKeyboardLoFi, UseKeyPressLoFi, UseLocalesLoFi, UseLocalStorageLoFi, UseLongPressLoFi, UseMediaQueryLoFi, UseMobileLoFi, UseMountedLoFi, UseMountEffectLoFi, UseMoveLoFi, UseMutationObserverLoFi, UseOnlineStatusLoFi, UseOverlayListenerLoFi, 
+  UseOverlayScrollListenerLoFi, UsePressLoFi, UsePreviousLoFi, UserBasedAccessRulesLoFi, UseResizeListenerLoFi, UserLoFi, UserOnboardingLoFi, UseScrollPositionLoFi, UseSessionStorageLoFi, UseShouldHydrateLoFi, UseSlideInLoFi, UseStreamLoFi, UseThrottleLoFi, UseTimeoutLoFi, UseToggleLoFi, UseUnmountEffectLoFi, UseUpdateEffectLoFi, UseWindowSizeLoFi, VerificationLoFi, VirtualizerLoFi, WatermarkLoFi, WithAcalendarLoFi, WithAshoppingCartLoFi, WithAtreeViewLoFi, WithCollapsibleNestedSidebarsLoFi, WithCollapsibleSectionsLoFi, WithCollapsibleSubmenusLoFi, WithCookieMiddlewareLoFi, WithInitialLoadingStateLoFi, WithLoadingNavStateChangesLoFi, WithNavigationGroupedBySectionLoFi, WithSubmenusAsDropdownsLoFi, AnimatedTestimonials, Headers1, TestimonialCarousel, PricingCarousel, FeatureCarousel, PricingCarouselV2, FeatureShowcase, PricingCardSingle, BlogEditor, BlogPost, Cta, LogoClouds, NewsLetter, Carousel2,Carouselitem2,Carouselvariants,Carouselcontentvariants,Carouselitemvariants, Interactiveiconcloud,Cloudprops,Rendercustomicon, Marquee1, PixelImage, Marquee, Imagecrop,Imagecropcontent,Imagecropapply,Imagecropreset,Cropper, ImageZoom, Comparison,Comparisonitem,Comparisonhandle, Carousel,Carouselitem, Avatargroup,Avatargrouptooltip, Threedmarquee,Gridlinehorizontal,Gridlinevertical, Logo,Logoimage,Logotext, Iframe,Iframevariants, Embed, Globe, BlurFade, AvatarCircles, Googlemap,Mapmarker, Carouselv1, InfiniteScroll, Galleria, CarouselWithIndicator, EmblaCarousel, CarouselHero, CarouselSimple, Animatedmodal,Animatedmodalbody,Animatedmodalcontent,Animatedmodalfooter,Animatedmodaltrigger,Animatedmodalclosebutton,Animatedmodalsuccessbutton,Usemodal, Useds,Dsleftrail,Dsrightrail,Dsheader,Dscontent,Dsfooter,Dsavatar,Dsavatarimage,Dsavatarfallback,Dsgroup,Dsgroupaction,Dsgroupcontent,Dsgrouplabel,Dsinput,Dsmenu,Dsmenuaction,Dsmenubadge,Dsmenubutton,Dsmenuitem,Dsmenuskeleton,Dsmenusub,Dsmenusubbutton,Dsmenusubitem,Dsseparator,Dsmenuanchor,Dsmenulink,Dsloading,Usedstheme,Dsthemeselector,TypeDstheme,Dsthemeprovider,Dsprovider,Dsinset,Dstrigger,Dsleft,Dslefticon,Dsright,Dsrighticon,Dsd,Dsdbottom,Dsdtrigger,Dsdportal,Dsdclose,Dsdoverlay,Dsdcontent,Dsdheader,Dsdfooter,Dsdtitle,Dsddescription,Dsdm,Dsdmportal,Dsdmtrigger,Dsdmcontent,Dsdmgroup,Dsdmlabel,Dsdmitem,Dsdmcheckboxitem,Dsdmradiogroup,Dsdmradioitem,Dsdmseparator,Dsdmshortcut,Dsdmsub,Dsdmsubtrigger,Dsdmsubcontent,Dsdmanchor,Dsc,Dsctrigger,Dsccontent, Sidebar,Sidebarcontent,Sidebarfooter,Sidebargroup,Sidebargroupaction,Sidebargroupcontent,Sidebargrouplabel,Sidebarheader,Sidebarinput,Sidebarinset,Sidebarmenu,Sidebarmenuaction,Sidebarmenubadge,Sidebarmenubutton,Sidebarmenuitem,Sidebarmenuskeleton,Sidebarmenusub,Sidebarmenusubbutton,Sidebarmenusubitem,Sidebarprovider,Sidebarrail,Sidebarseparator,Sidebartrigger,Usesidebar, Modalv1, TransitionablePortal, ModalIntegrations, LoadingOverlay, OverlayPanel, ConfirmPopup, Popconfirm, Dialogstack,Dialogstacktrigger,Dialogstackoverlay,Dialogstackbody,Dialogstackcontent,Dialogstackheader,Dialogstacktitle,Dialogstackdescription,Dialogstackfooter,Dialogstacknext,Dialogstackprevious, AnimatedTooltip, PdfAction, GenerateCustomPdf, GeneratePdf, PdfGenerator, PdfSender, PdfSigner, PrintPdf, TemplateBuilder, Playscansound,Barcodescanner, Cashdrawerservice,Validateapppath,Validatecommandargs,Validateexecution,Usecashdrawer, Table,Tableheader,Tablebody,Tablefooter,Tablehead,Tablerow,Tablecell,Tablecaption, Item,Itemmedia,Itemcontent,Itemactions,Itemgroup,Itemseparator,Itemtitle,Itemdescription,Itemheader,Itemfooter, Pagination,Paginationcontent,Paginationellipsis,Paginationitem,Paginationlink,Paginationnext,Paginationprevious,Paginationwithhrefs,TypePaginationprops,TypePaginationlinkprops, Field,Fieldlabel,Fielddescription,Fielderror, Chartcontainer,Charttooltip,Charttooltipcontent,Chartlegend,Chartlegendcontent,Chartstyle, Badge,Badgevariants, Avatar,Avatarimage,Avatarfallback, Resizablehandle,Resizablepanel,Resizablepanelgroup, Breadcrumb,Breadcrumblist,Breadcrumbitem,Breadcrumblink,Breadcrumbpage,Breadcrumbseparator,Breadcrumbellipsis, Inputotp,Inputotpgroup,Inputotpslot,Inputotpseparator, CalendarTailwindV4, Navigationmenu,Navigationmenulist,Navigationmenuitem,Navigationmenucontent,Navigationmenutrigger,Navigationmenulink,Navigationmenuindicator,Navigationmenuviewport,Navigationmenutriggerstyle, Contextmenu,Contextmenutrigger,Contextmenucontent,Contextmenuitem,Contextmenucheckboxitem,Contextmenuradioitem,Contextmenulabel,Contextmenuseparator,Contextmenushortcut,Contextmenugroup,Contextmenuportal,Contextmenusub,Contextmenusubcontent,Contextmenusubtrigger,Contextmenuradiogroup, Tabs,Tabslist,Tabstrigger,Tabscontent, Virtualizer,Virtualizerdemo,Virtualizerusage, Accordion,Accordionitem,Accordiontrigger,Accordioncontent, Button,Buttonvariants, Command,Commanddialog,Commandempty,Commandgroup,Commandinput,Commanditem,Commandlist,Commandseparator,Commandshortcut, Radiogroup,Radiogroupitem, Togglegroup,Togglegroupitem, Card,Cardheader,Cardfooter,Cardtitle,Carddescription,Cardcontent, Collapsible,Collapsiblecontent,Collapsibletrigger, Separator, Dropdownmenu,Dropdownmenucontent,Dropdownmenugroup,Dropdownmenuitem,Dropdownmenulabel,Dropdownmenuportal,Dropdownmenuseparator,Dropdownmenushortcut,Dropdownmenusub,Dropdownmenusubcontent,Dropdownmenusubtrigger,Dropdownmenutrigger, Select,Selectcontent,Selectitem,Selecttrigger,Selectvalue, Alertdialog,Alertdialogportal,Alertdialogoverlay,Alertdialogtrigger,Alertdialogcontent,Alertdialogheader,Alertdialogfooter,Alertdialogtitle,Alertdialogdescription,Alertdialogaction,Alertdialogcancel, Dialog,Dialogclose,Dialogcontent,Dialogdescription,Dialogfooter,Dialogheader,Dialogoverlay,Dialogportal,Dialogtitle,Dialogtrigger, Drawer,Drawerportal,Draweroverlay,Drawertrigger,Drawerclose,Drawercontent,Drawerheader,Drawerfooter,Drawertitle,Drawerdescription, Hovercard,Hovercardtrigger,Hovercardcontent, Popover,Popovertrigger,Popovercontent,Popoverclose,Popoverheader,Popoverfooter,Popovertitle,Popoverdescription,Popoveranchor, Tooltipprovider,Tooltip,Tooltiptrigger,Tooltipcontent, Sheet,Sheetportal,Sheetoverlay,Sheettrigger,Sheetclose,Sheetcontent,Sheetheader,Sheetfooter,Sheettitle,Sheetdescription,TypeSheetcontentprops, AiInputSearch, Ailoadingstate,Aitextloading, AiPromptInput, AiVoice, Inputbyok,Getopenaiapikey, Chainofthought,Chainofthoughtstep,Chainofthoughttrigger,Chainofthoughtcontent,Chainofthoughtitem, Chatcontainerroot,Chatcontainercontent,Chatcontainerscrollanchor, Codeblock,Codeblockcode,Codeblockgroup, Fileupload,Fileuploadtrigger,Fileuploadcontent, JsxPreview, Loader,Circularloader,Classicloader,Pulseloader,Pulsedotloader,Dotsloader,Typingloader,Waveloader,Barsloader,Terminalloader,Textblinkloader,Textshimmerloader,Textdotsloader, Markdown, Message,Messageavatar,Messagecontent,Messageactions,Messageaction, Promptinput,Promptinputtextarea,Promptinputactions,Promptinputaction, Promptsuggestion, Reasoning,Reasoningtrigger,Reasoningcontent, Responsestream,Usetextstream, Scrollbutton, Source,Sourcetrigger,Sourcecontent, Steps,Stepsitem,Stepstrigger,Stepscontent,Stepsbar, Systemmessage, Tool, Conversationpromptinput,Messagecomponent,Loadingmessage,Errormessage, Toolcallingchatbot,Messagecomponent,Loadingmessage,Errormessage, DevListSidebar, AppSidebar, NavQuickActions, NavAppointments, Messenger, ActiveToc, AnalogClock, Calendars, DigitalClock, LoadingSidebar, NavActions, NavAutoSearch, NavFavorites, NavHeader, NavMain, NavMessenger, NavProjects, NavSecondary, NavShoppingCart, NavShoppingCartcatlstui, NavTreeView, NavUser, NavWorkspaces, NavigationThemeSelector, OptInForm, PageHeader, SearchCommand, SearchForm, SidebarDialog, TeamSwitcher, Toc, Tree, VersionSwitcher, Wishlist, FilterTanstackTable,DefaultColumnHeader, Dtable,Draggabletableheader, PropsTable, LexicalEditor, IconAliases, CodeHighlightPlugin, Colorwheel,Colorthemes, MdRenderGenie, MonacoEditor, ScriptEditor, ScriptViewer, ColorWheel, DualEditor, Loader,Meta, MarkdownEditor, MarkdownRenderer, MdRenderer, MonacoSidebar, Cellcontext,Tablecontext,Inserttabledialog,Tableplugin, TailwindConverter, ThemeBuilder, ToolbarPlugin, LineShadowText, TextAnimate, TextHighlighter, TextReveal, WordRotate, TypingAnimation, VideoText, HyperText, ComicText, Textmorph, Scrolltext,Scrolltextword,Scrolltextletter, Typewriter,Typewriteronce,Typewriterword, SwooshText, SlicedText, ShimmerText, MatrixText, GlitchText, DynamicText, Highlight,Highlightdemo,Highlightusage, Prose, H5, H4, H3, Typography, OrderedList, P, Pm, UnorderedList, BlockQuote, CheckList, Div, H1, H2, B, I, Ib, Keyboardshortcut,Keyboardshortcutsprovider,Usekeyboardshortcut, QrCode1, Null, Barcode, Watermark, Transition, Scrolltop, Scrollxy, Scrolly, Scrollx, Scroll, ClientOnlyMermaid, Cn, Timeout, Ripple,Ripple, FormHoneypot, RespondtoForContentNegotiation, JsonHashResponse, SafeRedirects, PreloadRouteAssets, NamedActions, RollingCookie, ServerSentEvents, CreateTypedCookie, CreateTypedSessionStorage, Responses, IsPrefetch, GetHeaders, GetClientLocales, GetClientIpAddress, ExternalScriptsHandle, Cors, ServerOnly, CacheAssets, Promise, UserBasedAccessRules, PrismaClientExtension, BasicAuthMiddleware, BatcherMiddleware, ContextStorageMiddleware, Corsmiddleware, HoneypotMiddleware, JwkauthMiddleware, RequestIdmiddleware, SecFetchParser, SecureHeadersMiddleware, ServerTimingMiddleware, SingletonMiddleware, WithCookieMiddleware, Options, Incid, ExistingSearchParams, GetFetcherType, FetcherContext, AuthProvider, Styleprovider,Usestyles,Usestyleupdater,Getstyle,Styled,Createstylehook,Usepagestyle,Usecontainerstyle,Useheaderstyle,Usecardstyle,Useimagestyle,Useparagraphstyle,Usegridstyle,Usespacingstyle,Usepaddingstyle,Usemarginstyle,Pagediv,Containerdiv,Headerdiv,Carddiv,Imagediv,Paragraphdiv,Titleh1,Titleh2,Titleh3,Titleh4,Subtitlep,Flexcenter,Flexbetween,Flexcol,Appwithstyleprovider,Styleproviderdemo,Dynamicstyledemo, Usenavigationcontext,Navigationprovider, DynamicLinks, Deferredcontent,Deferredimage,Deferredtable,Deferredcard, Tailwindcss.txt, FilenameIconMap, RemixAuth, OtpAuthSession, OtpClientAuth, Sendemail,Sendauthemail, Authsessionstorage,Getauthsession,Clientsession,Redirectsessionstorage,Customersession,Sidebarsessionstorage, PrismaClient, BuildPackageJson, DbLocal, DbRemote, AccountBilling, AccountActiveSessions, AccountActivityLog, AccountApiKeys, AccountAppearanceSettings, AccountAvatarUpload, AccountBackupCodes, AccountBasicInformationForm, AccountChangePassword, AccountConnectedAccounts, AccountDangerZone, AccountEmailPreferences, AccountNotificationInbox, AccountNotificationPrefrences, AccountPrivacySettings, AccountReferralProgram, AccountSecuritySettings, AccountStorageManagement, AccountTeamMembers, AccountThirdPartyIntegrations, AccountTwoFactorAuth, AccountUsageAndAnalytics, AccountWebhooks, BlogCardsLoadMore, BlogCompactList, BlogFeaturedPosts, BlogGridWSearch, BlogHeroFeaturedPost, BlogLargePreview, BlogNewsletterSignup, BlogPostsWTags, BlogRectangularLayout, BlogSimpleCards, BlogWFilterChips, BlogWPagination, BlogWSidebar, ContactCallbackRequest, ContactFormWMap, ContactHeroSection, ContactMinimalForm, ContactMultiStepForm, ContactMultipleLocations, ContactSectionsWCard, ContactSectionsWImage, ContactSupportOptions, ContactTeamMembers, ContactWDarkCard, ContactWFaq, ContactWFileUpload, ContactWNewsletter, CrudActivityFeed, CrudAdvancedFilters, CrudBulkEditProducts, CrudCreateBlogPost, CrudDataTable, CrudDeleteConfirmationDialog, CrudDuplicateRecord, CrudEditProductForm, CrudEditUserProfile, CrudImportExportData, CrudInlineEditTable, CrudKanbanBoard, CrudManageRelationships, CrudProductDetailView, CrudSettingsForm, CrudStatusWorkflow, CrudUserListManagement, FooterCentered, FooterCompany, FooterMinimal, FooterMultiColumnFooter, FooterNewletter, FooterSimple, FooterWCta, FooterWLinks, FooterWLocalization, FooterWUpgradeCta, PromptCompactPrompt, PromptFullFeaturedPrompt, PromptInputAndModelSelector, PromptInput, TablesColumnVisbility, TablesDensityToggle, TablesExpandableRows, TablesExportOptions, TablesFilterableDataTable, TablesGroupedRows, TablesInlineEditing, TablesPageNavigation, TablesQuickFilters, TablesRowMenu, TablesRowSelection, TablesSortableColumns, TablesStickyHeader, TablesSummaryFooter, TablesWActions, TestimonialsBento, TestimonialsCentered, TestimonialsCompany, TestimonialsDarkCarousel, TestimonialsGridWAdd, TestimonialsImageCarousel, TestimonialsLargeQuote, TestimonialsMarquee, TestimonialsMasonry, TestimonialsMinimalSlider, TestimonialsSimple, TestimonialsSplit, TestimonialsVideo, TestimonialsWCards, TestimonialsWStats, TestimonialsWall, ScrollExpanseHero, PricingSectionWithComparison, MinWorldMap, MinTimeline, MinTestimonialsColumns, MinPricing, MinPricingTable, MinLayoutGrid, MinFeatureSection, MinCarousel, MinBentoGrid, MinActivityCard, InteractiveCheckout, ImagesSlider, HeroWImageTextAndTwoButtons, HeroGalleryScrollAnimation, HeroFashion, GlareCard, Gallery4, FullscreenCalendar, FocusCards, FeatureWImageCarousel, FeatureSectionWithGrid, FeatureSectionWHoverEffects, ExpandableCard, CircularTestimonials, ContainerScrollAnimation, ChatCard, MinPricingSection, MinPricingCards, Minherosection,Logo, AnimatedHero, MinFeature, Minfaqsection,Minfaqitem, BlogCategoriesNav, About3, Awards1, Banner1, Blogpost1, Careers4, Casestudies2, Casestudy8, Changelog1, Codeexample1, Community1, Compare7, Compliance1, Contact7, Content1, Cta10, Cta11, Download2, Experience1, Experience5, Faq1, Feature1, Feature2, Feature13, Feature17, Feature43, Feature51, Feature72, Feature73, Feature166, Feature197, Footer2, Gallery6, Hero1, Hero3, Hero7, Hero45, Hero47, Hero115, Integration3, List2, Login1, Logos8, Pricing2, Pricing4, Pricing6, Process1, Project1, Ratecard2, Resource1, Service1, Services4, Signup1, Stats8, Team1, Testimonial10, Timeline9, Waitlist1, Qrcodegenerator, TextEditor, Tickets, ToDo, Table, TaskList, Taskboard, Tasks, StatsCard, StatsSimple, StatsSimpleGrid, StatsWithDescription, Stacked, SidebarDetails, Settings, SettingsScreenSidebar, SettingsScreenStacked, Settings1, Settings2, Settings3, Settings4, Settings5, Settings6, Settings7, SectionHeadingWithDescription, SectionHeadingWithInputGroup, Scheduler, ScreenLock, PageNav, MobileNav, Mail, LockInScreen, Json, Kanban, Home, HomeScreenStacked, FuturisticDash, FilterDrawer, FilterDrawer3, FilterDrawer1, FilterDrawer2, FileManager, FileManager1, FeedComponents, FeedListMultipleItemTypes, FeedLists, CalendarV1, Drawer, DrawerDialogDragAndDrop, DescriptionList, DescriptionListNarrow, Dashboard, DashboardSidebar, CardHeadingWithDescription, ContentCentered, ContentSplitWithImage, ContentTwoColumnWithScreenshot, CollarabtiveCanvas, FormBlock, RoadmapBlock, PricingBlock, Hero2, WidgetCard, Calculator, Cards, UserOnboarding, Verification, Verification1, VerticalNav, UpdateUserModal, SignUp, SignUp1, SignUp2, Register, RemixAuthLogin, RemixAuthLogout, RemixAuthResetPassword, RemixAuthSignup, ResetPassword, ResetPassword1, OtpLogin, OtpLogout, OtpMagicLink, OtpVerify, OtpSignup, ForgotPassword, Login, Login2, Login4, Login5, Login6, Login7, Login8, Login9, Login10, PageHeadingsSection, PickerWithInput, DateOfBirth, Categorypage, Checkoutpage, Editproductpage, Orderdetailspage, Orderhistorypage, Pricingpage, Productpage, Productpage2, Shoppingcartpage, Storefront, PricingComparison, PricingPage1, PricingSectionCards, PricingSectionCards1, PricingSinglePriceDetails, 
+  PricingThreeTiersAndFeatureComparison, ProductDesecription, ProductListBorderGrid, ProductListFullDetails, ProductListSupportingText, ProductListTallImages, ProductListsSimple, ProductListsWInlinePrice, ProductOverviewsGalleryExpandable, ProductOverviewsTabs, ProductOverviewsTieredImages, ProductPage, ProductPage1, ProductPricing, ProductPricing1, ProductPricing2, ProductPricing3, Products, Products1, Products2, Products3, Products4, Products5, Products6, ProductCategory, ProductCategory1, ProductCategory2, ProductCategory3, ProductCategory4, ProductCategory5, ProductCategory6, ProductComparison, ProductComparison1, ProductDetails, ProductDetails1, ProductDetails2, ProductDetails3, ProductDetails4, ProductEdit, OrderDetailsPage2, OrderHistoryPage, OrderHistory1, OrderHistory6, OrderSummariesWSplitImage, OrderSummary, CheckoutCancel, CheckoutForm1, CheckoutForm2, CheckoutForm3, CheckoutForm4, CheckoutForm5, CheckoutForm6, CheckoutForm7, CheckoutSuccess, CheckoutVarious, PaymentForm, PaymentForm1, PaymentForm2, PaymentForm3, PaymentForm4, PaymentForm5, PaymentForm6, PaymentForm7, PaymentForm8, PaymentForm9, ShoppingCartExtendedSummary, ShoppingCartPage, ShoppingCartPage1, ShoppingCartSingleColumn, ShoppingCartTwoColumn, ShoppingCart1, ShoppingCart2, ShoppingCart3, Invoice, Invoice1, Invoice2, IncentivesBanner, IncentivesCard, IncentivesFeature, IncentivesSimple, Receipt, StoreFront, StoreFrontPage, StoreFront1, StoreFront2, StoreFront3, StoreNavImageGrid, StoreNavSection, StoreShowFunctionAndCode, CategoriesNavigation, CategoryFiltersSection, CategoryFiltersSectionCentered, CategoryFiltersSidebar, CategoryPage1, CategoryPreviewScrollingCards, CategoryPreviewSplitImages, CategoryPreviewThreeColumn, Access, Account, AccountblocksV1, AppleNotesClone, BankV1, Bank, BloombergTerminal, BookmarkHub, ActivityGoal, CarService, Imchat, ChatQuoteInterface, Config, Cyberpunk, Detail, DotMatrixGlobe, DynamicRain, DynamicTodo, FontPairingTool, FrostedGlass, GlassmorphicRichTextEditor, GlimmeringMap, GnattChart, Hoodie, LoanApp, MacosWidget, Music, Note, PageTransitions, Parallax, Playground, RotatingEarth, ScrollMotion, ServiceRepairForm, ServiceRepairForm1, ServiceRepairForm2, ServiceRepairForm3, Stripe, Strip2, Travel, Tsx, Usage, UsageSectionNoDash, VoiceWaveform, WebScraper, ThreeDCard, AsciiConverter, BentoPortfolioDesign, CardStock, Curriculum, FeatureVoting, LinearCardInteraction, NewLandingPage, Nexorasim, ParticleAnimation, SnakeGame, Webcamcircles, ColumnButtonInputCombo, AiChatUiDesign, Aiartgallery, ModernChatbot, AiChatV1, AiChatV2, AiChat, ConversationActions, ConversationAvatars, ConversationPromptInput, ConversationScrollBottom, FullChatApp, FullConversation, PromptAutocompleteHighlight, PromptInputActions, PromptInputSuggestions, SidebarChatHistory
+
+
+} */