@tecsinapse/cortex-react 1.9.18 → 1.9.20-beta.0

package/dist/cjs/components/Badge.js

@@ -37,9 +37,14 @@ const Badge = React.forwardRef((props, ref) => {
     value
   );
 });
+function getDisplayValue(value) {
+  const number = Number(value);
+  if (isNaN(number)) return value;
+  return number > 99 ? "99+" : number;
+}
 const BadgeAnchor = React.forwardRef((props, ref) => {
   const { value, variants, children, ...rest } = props;
-  return /* @__PURE__ */ React__namespace.createElement("div", { className: cortexCore.containerBadge() }, children, /* @__PURE__ */ React__namespace.createElement("div", { ref, className: cortexCore.badge(variants), ...rest }, value));
+  return /* @__PURE__ */ React__namespace.createElement("div", { className: cortexCore.containerBadge() }, children, /* @__PURE__ */ React__namespace.createElement("div", { ref, className: cortexCore.badge(variants), ...rest }, getDisplayValue(value)));
 });
 
 exports.Badge = Badge;

package/dist/cjs/components/Menubar/Item.js

@@ -1,10 +1,7 @@
 'use strict';
 
-var React = require('react');
-var menubar = require('../../styles/menubar.js');
-var IconControlSubItem = require('./IconControlSubItem.js');
-var ItemLink = require('./ItemLink.js');
 var clsx = require('clsx');
+var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
@@ -16,6 +13,9 @@ require('currency.js');
 require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
 var useMenubar = require('../../provider/useMenubar.js');
+var menubar = require('../../styles/menubar.js');
+var IconControlSubItem = require('./IconControlSubItem.js');
+var ItemLink = require('./ItemLink.js');
 
 const { container, textBehavior } = menubar.item();
 const Item = ({
@@ -29,20 +29,26 @@ const Item = ({
   const [showSubItem, setShowSubItem] = React.useState(false);
   const hasSubItems = (subItems ?? []).length > 0;
   const [, setShow] = useMenubar.useMenubar();
+  const handleClickItemMenubar = React.useCallback(
+    (e) => {
+      if (hasSubItems) {
+        e.stopPropagation();
+        setShowSubItem((prev) => !prev);
+      } else {
+        setShow(false);
+      }
+    },
+    []
+  );
   return /* @__PURE__ */ React.createElement(ItemLink, { anchorProps }, /* @__PURE__ */ React.createElement(
     "div",
     {
       "data-testid": "item-menubar",
       ...rest,
-      onClick: (e) => {
-        if (hasSubItems) e.stopPropagation();
-        else {
-          setShow(false);
-        }
-      },
+      onClick: handleClickItemMenubar,
       className: clsx(
         container({ className }),
-        !hasSubItems && textBehavior()
+        (!hasSubItems || anchorProps) && textBehavior()
       )
     },
     children,

package/dist/cjs/hooks/useOutsideClickListener.js

@@ -7,7 +7,7 @@ const useOutsideClickListener = ({
   onClickOutside
 }) => {
   const handleClickOutside = React.useCallback((event) => {
-    if (ref.current && !ref.current.contains(event.target)) {
+    if (ref.current && !ref.current.contains(event.composedPath()[0])) {
       onClickOutside?.();
     }
   }, []);

package/dist/cjs/styles/menubar.js

@@ -34,8 +34,8 @@ const mostUsedItem = tailwindVariants.tv({
 });
 const item = tailwindVariants.tv({
   slots: {
-    container: "flex flex-row gap-x-deca items-center text-secondary-dark text-base",
-    textBehavior: "hover:text-primary-medium hover:cursor-pointer text-base",
+    container: "flex flex-row gap-x-deca items-center text-secondary-dark hover:cursor-pointer text-base",
+    textBehavior: "hover:text-primary-medium",
     icon: "text-primary-medium hover:cursor-pointer"
   }
 });

package/dist/esm/components/Badge.js

@@ -17,9 +17,14 @@ const Badge = forwardRef((props, ref) => {
     value
   );
 });
+function getDisplayValue(value) {
+  const number = Number(value);
+  if (isNaN(number)) return value;
+  return number > 99 ? "99+" : number;
+}
 const BadgeAnchor = forwardRef((props, ref) => {
   const { value, variants, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("div", { className: containerBadge() }, children, /* @__PURE__ */ React.createElement("div", { ref, className: badge(variants), ...rest }, value));
+  return /* @__PURE__ */ React.createElement("div", { className: containerBadge() }, children, /* @__PURE__ */ React.createElement("div", { ref, className: badge(variants), ...rest }, getDisplayValue(value)));
 });
 
 export { Badge, BadgeAnchor };

package/dist/esm/components/Menubar/Item.js

@@ -1,8 +1,5 @@
-import React__default, { useState } from 'react';
-import { item } from '../../styles/menubar.js';
-import IconControlSubItem from './IconControlSubItem.js';
-import ItemLink from './ItemLink.js';
 import clsx from 'clsx';
+import React__default, { useState, useCallback } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
@@ -14,6 +11,9 @@ import 'currency.js';
 import '../../provider/MenubarContext.js';
 import '../../provider/SnackbarProvider.js';
 import { useMenubar } from '../../provider/useMenubar.js';
+import { item } from '../../styles/menubar.js';
+import IconControlSubItem from './IconControlSubItem.js';
+import ItemLink from './ItemLink.js';
 
 const { container, textBehavior } = item();
 const Item = ({
@@ -27,20 +27,26 @@ const Item = ({
   const [showSubItem, setShowSubItem] = useState(false);
   const hasSubItems = (subItems ?? []).length > 0;
   const [, setShow] = useMenubar();
+  const handleClickItemMenubar = useCallback(
+    (e) => {
+      if (hasSubItems) {
+        e.stopPropagation();
+        setShowSubItem((prev) => !prev);
+      } else {
+        setShow(false);
+      }
+    },
+    []
+  );
   return /* @__PURE__ */ React__default.createElement(ItemLink, { anchorProps }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       "data-testid": "item-menubar",
       ...rest,
-      onClick: (e) => {
-        if (hasSubItems) e.stopPropagation();
-        else {
-          setShow(false);
-        }
-      },
+      onClick: handleClickItemMenubar,
       className: clsx(
         container({ className }),
-        !hasSubItems && textBehavior()
+        (!hasSubItems || anchorProps) && textBehavior()
       )
     },
     children,

package/dist/esm/hooks/useOutsideClickListener.js

@@ -5,7 +5,7 @@ const useOutsideClickListener = ({
   onClickOutside
 }) => {
   const handleClickOutside = useCallback((event) => {
-    if (ref.current && !ref.current.contains(event.target)) {
+    if (ref.current && !ref.current.contains(event.composedPath()[0])) {
       onClickOutside?.();
     }
   }, []);

package/dist/esm/styles/menubar.js

@@ -32,8 +32,8 @@ const mostUsedItem = tv({
 });
 const item = tv({
   slots: {
-    container: "flex flex-row gap-x-deca items-center text-secondary-dark text-base",
-    textBehavior: "hover:text-primary-medium hover:cursor-pointer text-base",
+    container: "flex flex-row gap-x-deca items-center text-secondary-dark hover:cursor-pointer text-base",
+    textBehavior: "hover:text-primary-medium",
     icon: "text-primary-medium hover:cursor-pointer"
   }
 });

package/dist/types/components/Accordion/Content.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { AccordionProps } from './types';
-export declare const AccordionContent: ({ children, direction, }: Pick<AccordionProps, 'children' | 'direction'>) => JSX.Element;
+export declare const AccordionContent: ({ children, direction, }: Pick<AccordionProps, "children" | "direction">) => React.JSX.Element;

package/dist/types/components/Accordion/Face.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { AccordionProps } from './types';
-export declare const AccordionFace: ({ children, defaultOpen, direction, }: Pick<AccordionProps, 'children' | 'defaultOpen' | 'direction'>) => JSX.Element;
+export declare const AccordionFace: ({ children, defaultOpen, direction, }: Pick<AccordionProps, "children" | "defaultOpen" | "direction">) => React.JSX.Element;

package/dist/types/components/Accordion/Root.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { AccordionProps } from './types';
-export declare const AccordionRoot: ({ children, defaultOpen, label, floating, onOpen, invertedArrow, onClose, direction, }: AccordionProps) => JSX.Element;
+export declare const AccordionRoot: ({ children, defaultOpen, label, floating, onOpen, invertedArrow, onClose, direction, }: AccordionProps) => React.JSX.Element;

package/dist/types/components/Accordion/Trigger.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { AccordionProps } from './types';
-export declare const AccordionTrigger: ({ label, floating, className, onOpen, onClose, invertedArrow, direction, }: Pick<AccordionProps, 'floating' | 'label' | 'onOpen' | 'onClose' | 'invertedArrow' | 'direction'> & {
+export declare const AccordionTrigger: ({ label, floating, className, onOpen, onClose, invertedArrow, direction, }: Pick<AccordionProps, "floating" | "label" | "onOpen" | "onClose" | "invertedArrow" | "direction"> & {
     className?: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/dist/types/components/Accordion/context.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 export declare const Context: import("react").Context<{
     open: boolean;
-    toggle?: (() => void) | undefined;
+    toggle?: () => void;
 }>;
 export declare const useAccordionContext: () => {
     open: boolean;
-    toggle?: (() => void) | undefined;
+    toggle?: () => void;
 };

package/dist/types/components/Accordion/index.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 export declare const Accordion: {
-    Root: ({ children, defaultOpen, label, floating, onOpen, invertedArrow, onClose, direction, }: import("./types").AccordionProps) => JSX.Element;
-    Face: ({ children, defaultOpen, direction, }: Pick<import("./types").AccordionProps, "children" | "direction" | "defaultOpen">) => JSX.Element;
-    Content: ({ children, direction, }: Pick<import("./types").AccordionProps, "children" | "direction">) => JSX.Element;
-    Trigger: ({ label, floating, className, onOpen, onClose, invertedArrow, direction, }: Pick<import("./types").AccordionProps, "direction" | "label" | "floating" | "onOpen" | "onClose" | "invertedArrow"> & {
-        className?: string | undefined;
-    }) => JSX.Element;
+    Root: ({ children, defaultOpen, label, floating, onOpen, invertedArrow, onClose, direction, }: import("./types").AccordionProps) => import("react").JSX.Element;
+    Face: ({ children, defaultOpen, direction, }: Pick<import("./types").AccordionProps, "children" | "defaultOpen" | "direction">) => import("react").JSX.Element;
+    Content: ({ children, direction, }: Pick<import("./types").AccordionProps, "children" | "direction">) => import("react").JSX.Element;
+    Trigger: ({ label, floating, className, onOpen, onClose, invertedArrow, direction, }: Pick<import("./types").AccordionProps, "floating" | "label" | "onOpen" | "onClose" | "invertedArrow" | "direction"> & {
+        className?: string;
+    }) => import("react").JSX.Element;
 };
 export * from './context';

package/dist/types/components/Accordion/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface AccordionProps {
     children?: React.ReactNode;
     defaultOpen?: boolean;

package/dist/types/components/Avatar.d.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     src?: string;
     name: string;
 }
-export declare const Avatar: ({ src, name, className, ...rest }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ src, name, className, ...rest }: AvatarProps) => React.JSX.Element;

package/dist/types/components/Breadcrumbs/BreadcrumbItem.d.ts

@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+import React, { ElementType } from 'react';
 export interface BreadcrumbType {
     title: string;
     Component: ElementType;
@@ -7,4 +7,4 @@ export interface BreadcrumbType {
 export interface BreadcrumbItemProps extends BreadcrumbType {
     isLast: boolean;
 }
-export declare const BreadcrumbItem: ({ isLast, Component, componentProps, title, }: BreadcrumbItemProps) => JSX.Element;
+export declare const BreadcrumbItem: ({ isLast, Component, componentProps, title, }: BreadcrumbItemProps) => React.JSX.Element;

package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -3,4 +3,4 @@ import { BreadcrumbType } from './BreadcrumbItem';
 export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
     breadcrumbs: BreadcrumbType[];
 }
-export declare const Breadcrumbs: (props: BreadcrumbsProps) => JSX.Element;
+export declare const Breadcrumbs: (props: BreadcrumbsProps) => React.JSX.Element;

package/dist/types/components/Calendar/Calendar.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 interface CalendarProps {
     value?: Date;
     onChange: (value?: Date) => void;
 }
-export declare const Calendar: ({ value, onChange }: CalendarProps) => JSX.Element;
+export declare const Calendar: ({ value, onChange }: CalendarProps) => React.JSX.Element;
 export {};

package/dist/types/components/Calendar/CalendarCell.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { CalendarDate } from '@internationalized/date';
+import React from 'react';
 import { CalendarState, RangeCalendarState } from 'react-stately';
 interface CalendarCellProps {
     state: CalendarState | RangeCalendarState;
     date: CalendarDate;
 }
-export declare const CalendarCell: ({ state, date }: CalendarCellProps) => JSX.Element;
+export declare const CalendarCell: ({ state, date }: CalendarCellProps) => React.JSX.Element;
 export {};

package/dist/types/components/Calendar/CalendarGrid.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { CalendarState, RangeCalendarState } from 'react-stately';
 interface CalendarGridProps {
     state: CalendarState | RangeCalendarState;
 }
-export declare const CalendarGrid: ({ state }: CalendarGridProps) => JSX.Element;
+export declare const CalendarGrid: ({ state }: CalendarGridProps) => React.JSX.Element;
 export {};

package/dist/types/components/Calendar/CalendarGridBodyRows.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { CalendarState, RangeCalendarState } from 'react-stately';
 interface CalendarGridBodyRowsProps {
     state: CalendarState | RangeCalendarState;
 }
-export declare const CalendarGridBodyRows: ({ state }: CalendarGridBodyRowsProps) => JSX.Element;
+export declare const CalendarGridBodyRows: ({ state }: CalendarGridBodyRowsProps) => React.JSX.Element;
 export {};

package/dist/types/components/Calendar/CalendarGridHeaderRow.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface CalendarGridHeaderRowProps {
     weekDays: string[];
 }
-export declare const CalendarGridHeaderRow: ({ weekDays, }: CalendarGridHeaderRowProps) => JSX.Element;
+export declare const CalendarGridHeaderRow: ({ weekDays, }: CalendarGridHeaderRowProps) => React.JSX.Element;
 export {};

package/dist/types/components/Calendar/CalendarHeader.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 export interface CalendarHeaderProps {
     onClickPrevButton: () => void;
     onClickNextButton: () => void;
     title: string;
 }
-export declare const CalendarHeader: ({ onClickPrevButton, onClickNextButton, title, }: CalendarHeaderProps) => JSX.Element;
+export declare const CalendarHeader: ({ onClickPrevButton, onClickNextButton, title, }: CalendarHeaderProps) => React.JSX.Element;

package/dist/types/components/Calendar/RangeCalendar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export type DateRange = {
     start?: Date;
     end?: Date;
@@ -7,4 +7,4 @@ export interface RangeCalendarProps {
     value?: DateRange;
     onChange: (value: DateRange) => void;
 }
-export declare const RangeCalendar: ({ value, onChange }: RangeCalendarProps) => JSX.Element;
+export declare const RangeCalendar: ({ value, onChange }: RangeCalendarProps) => React.JSX.Element;

package/dist/types/components/Carousel/Carousel.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 type TextCarousel = {
     text: string;
     color: string;
@@ -19,5 +19,5 @@ export type ImageCarousel = {
 export interface CarouselProps {
     images: ImageCarousel[];
 }
-export declare const Carousel: ({ images }: CarouselProps) => JSX.Element;
+export declare const Carousel: ({ images }: CarouselProps) => React.JSX.Element;
 export {};

package/dist/types/components/Carousel/CarouselItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { ImageCarousel } from './Carousel';
 export interface CarouselItemProps {
     item: ImageCarousel;
 }
-export declare const CarouselItem: ({ item }: CarouselItemProps) => JSX.Element;
+export declare const CarouselItem: ({ item }: CarouselItemProps) => React.JSX.Element;

package/dist/types/components/DatePicker/Content.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export interface ContentProps {
     children: ReactNode;
 }
-export declare const Content: ({ children }: ContentProps) => JSX.Element;
+export declare const Content: ({ children }: ContentProps) => React.JSX.Element;

package/dist/types/components/DatePicker/DateField.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { AriaDateFieldProps, DateValue } from 'react-aria';
 interface DateFieldProps extends AriaDateFieldProps<DateValue> {
     onClickDate?: () => void;
     onClickTime?: () => void;
 }
-export declare const DateField: ({ onClickDate, onClickTime, ...props }: DateFieldProps) => JSX.Element;
+export declare const DateField: ({ onClickDate, onClickTime, ...props }: DateFieldProps) => React.JSX.Element;
 export {};

package/dist/types/components/DatePicker/DatePickerInput.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { Granularity } from '@react-types/datepicker';
+import React from 'react';
 import { InputProps } from '../Input';
 export interface DatePickerInputProps extends Omit<InputProps, 'value' | 'onChange'> {
     value?: Date;
@@ -7,4 +7,4 @@ export interface DatePickerInputProps extends Omit<InputProps, 'value' | 'onChan
     hourCycle?: 12 | 24;
     granularity?: Granularity;
 }
-export declare const DatePickerInput: (props: DatePickerInputProps) => JSX.Element;
+export declare const DatePickerInput: (props: DatePickerInputProps) => React.JSX.Element;

package/dist/types/components/DatePicker/DatePickerInputBase.d.ts

@@ -8,5 +8,5 @@ interface DatePickerInputBaseProps extends Omit<InputProps, 'value' | 'onChange'
     onToggle?: () => void;
     disabled?: boolean;
 }
-export declare const DatePickerInputBase: ({ children, variants, label, disabled, value, onClean, onToggle, }: DatePickerInputBaseProps) => JSX.Element;
+export declare const DatePickerInputBase: ({ children, variants, label, disabled, value, onClean, onToggle, }: DatePickerInputBaseProps) => React.JSX.Element;
 export {};

package/dist/types/components/DatePicker/DateRangePickerInput.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { Granularity } from '@react-types/datepicker';
+import React from 'react';
 import { DateRange } from '../Calendar/RangeCalendar';
 import { InputProps } from '../Input';
 export interface DateRangePickerInputProps extends Omit<InputProps, 'value' | 'onChange'> {
@@ -8,4 +8,4 @@ export interface DateRangePickerInputProps extends Omit<InputProps, 'value' | 'o
     hourCycle?: 12 | 24;
     granularity?: Granularity;
 }
-export declare const DateRangePickerInput: (props: DateRangePickerInputProps) => JSX.Element;
+export declare const DateRangePickerInput: (props: DateRangePickerInputProps) => React.JSX.Element;

package/dist/types/components/DatePicker/DateSegment.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { DateFieldState, DateSegment as DateSegmentType } from 'react-stately';
 interface DateSegmentProps {
     segment: DateSegmentType;
     state: DateFieldState;
 }
-export declare const DateSegment: ({ segment, state }: DateSegmentProps) => JSX.Element;
+export declare const DateSegment: ({ segment, state }: DateSegmentProps) => React.JSX.Element;
 export {};

package/dist/types/components/Divider.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 interface DividerProps extends HTMLAttributes<HTMLHRElement> {
 }
-export declare const Divider: ({ className, ...rest }: DividerProps) => JSX.Element;
+export declare const Divider: ({ className, ...rest }: DividerProps) => React.JSX.Element;
 export {};

package/dist/types/components/Drawer.d.ts

@@ -6,4 +6,4 @@ export interface DrawerProps {
     children?: React.ReactNode;
     className?: string;
 }
-export declare const Drawer: ({ children, onClose, open, position, className, }: DrawerProps) => JSX.Element;
+export declare const Drawer: ({ children, onClose, open, position, className, }: DrawerProps) => React.JSX.Element;

package/dist/types/components/GroupButton.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export interface GroupButtonValue<T> {
     value: T;
 }
@@ -17,4 +17,4 @@ export interface GroupButtonProps<T> {
     disableAllOptions?: boolean;
     className?: string;
 }
-export declare const GroupButton: <T>(props: GroupButtonProps<T>) => JSX.Element;
+export declare const GroupButton: <T>(props: GroupButtonProps<T>) => React.JSX.Element;

package/dist/types/components/Input/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Input: {
     Root: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("react").RefAttributes<HTMLInputElement>>;
     Face: import("react").ForwardRefExoticComponent<import("./types").InputFaceProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Input/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputBaseVariants } from '@tecsinapse/cortex-core';
 import { CurrencyOptions } from '../../hooks';
 export interface InputPropsBase {

package/dist/types/components/Kanban.d.ts

@@ -3,8 +3,8 @@ export interface KanbanProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
 }
 export declare const Kanban: {
-    Root: ({ children, className, ...rest }: KanbanProps) => JSX.Element;
-    Header: ({ children, className, ...rest }: KanbanProps) => JSX.Element;
-    Body: ({ children, className, ...rest }: KanbanProps) => JSX.Element;
-    ContainerList: ({ children, className, ...rest }: KanbanProps) => JSX.Element;
+    Root: ({ children, className, ...rest }: KanbanProps) => React.JSX.Element;
+    Header: ({ children, className, ...rest }: KanbanProps) => React.JSX.Element;
+    Body: ({ children, className, ...rest }: KanbanProps) => React.JSX.Element;
+    ContainerList: ({ children, className, ...rest }: KanbanProps) => React.JSX.Element;
 };

package/dist/types/components/Loading.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 export interface LoadingProps {
     className?: string;
 }
-export declare const Loading: ({ className }: LoadingProps) => JSX.Element;
+export declare const Loading: ({ className }: LoadingProps) => React.JSX.Element;

package/dist/types/components/Menubar/Categories.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { DefaultProps } from './types';
-declare const Categories: ({ children }: DefaultProps) => JSX.Element;
+declare const Categories: ({ children }: DefaultProps) => React.JSX.Element;
 export default Categories;

package/dist/types/components/Menubar/Category.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { CategoryType } from './types';
-declare const Category: <T>({ title, options, render }: CategoryType<T>) => JSX.Element;
+declare const Category: <T>({ title, options, render }: CategoryType<T>) => React.JSX.Element;
 export default Category;

package/dist/types/components/Menubar/Dropdown.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { DefaultProps } from './types';
-declare const Dropdown: ({ children, ...rest }: DefaultProps) => JSX.Element;
+declare const Dropdown: ({ children, ...rest }: DefaultProps) => React.JSX.Element;
 export default Dropdown;

package/dist/types/components/Menubar/DropdownRoot.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { DropdownRootProps } from './types';
-declare const DropdownRoot: ({ mostUsed, options, labelMostUsed, }: DropdownRootProps) => JSX.Element;
+declare const DropdownRoot: ({ mostUsed, options, labelMostUsed, }: DropdownRootProps) => React.JSX.Element;
 export default DropdownRoot;

package/dist/types/components/Menubar/Header.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { HeaderProps } from './types';
-declare const Header: ({ children, className, ...rest }: HeaderProps) => JSX.Element;
+declare const Header: ({ children, className, ...rest }: HeaderProps) => React.JSX.Element;
 export default Header;

package/dist/types/components/Menubar/IconControlSubItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { IconControlSubItemProps } from './types';
-declare const IconControlSubItem: ({ show, setShow }: IconControlSubItemProps) => JSX.Element;
+declare const IconControlSubItem: ({ show, setShow }: IconControlSubItemProps) => React.JSX.Element;
 export default IconControlSubItem;

package/dist/types/components/Menubar/Item.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ItemProps } from './types';
-declare const Item: <T>({ children, subItems, renderSubItems, className, anchorProps, ...rest }: ItemProps<T>) => JSX.Element;
+declare const Item: <T>({ children, subItems, renderSubItems, className, anchorProps, ...rest }: ItemProps<T>) => React.JSX.Element;
 export default Item;

package/dist/types/components/Menubar/ItemLink.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ItemLinkProps } from './types';
-declare const ItemLink: ({ anchorProps, children }: ItemLinkProps) => JSX.Element;
+declare const ItemLink: ({ anchorProps, children }: ItemLinkProps) => React.JSX.Element;
 export default ItemLink;

package/dist/types/components/Menubar/Left.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { DefaultProps } from './types';
-declare const Left: ({ children, ...rest }: DefaultProps) => JSX.Element;
+declare const Left: ({ children, ...rest }: DefaultProps) => React.JSX.Element;
 export default Left;

package/dist/types/components/Menubar/MostUsed.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { MostUsedProps } from './types';
-declare const MostUsed: ({ label, children, ...rest }: MostUsedProps) => JSX.Element;
+declare const MostUsed: ({ label, children, ...rest }: MostUsedProps) => React.JSX.Element;
 export default MostUsed;