@majapisoftwares/ui 4.1.16 → 4.2.0

package/components/GridPattern/GridPattern.jsx

@@ -1,12 +1,12 @@
 import { useId } from "react";
 export default function GridPattern(props) {
     const patternId = useId();
-    return (<svg aria-hidden="true" className="absolute inset-0 h-full w-full">
-      <defs>
-        <pattern id={patternId} width="32" height="32" patternUnits="userSpaceOnUse" {...props}>
-          <path d="M0 32V.5H32" fill="none" stroke="currentColor"/>
-        </pattern>
-      </defs>
-      <rect width="100%" height="100%" fill={`url(#${patternId})`}/>
+    return (<svg aria-hidden="true" className="absolute inset-0 h-full w-full">
+      <defs>
+        <pattern id={patternId} width="32" height="32" patternUnits="userSpaceOnUse" {...props}>
+          <path d="M0 32V.5H32" fill="none" stroke="currentColor"/>
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`}/>
     </svg>);
 }

package/components/Header/Header.d.ts

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { type DetailedHTMLProps, type HTMLAttributes } from "react";
 export type HeaderProps = {
     hideOnScroll?: boolean;
 } & DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;

package/components/Header/Header.jsx

@@ -1,6 +1,6 @@
 import clsx from "../../utils/clsx";
 import { useScrollYMovement } from "../../hooks/useScroll";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, } from "react";
 import useMediaQuery from "../../hooks/useMediaQuery";
 export default function Header({ className, hideOnScroll, ...props }) {
     const ref = useRef(null);
@@ -15,5 +15,5 @@ export default function Header({ className, hideOnScroll, ...props }) {
             ref.current.style.transform = "";
         }
     }, [isMobile]);
-    return (<header ref={ref} {...props} className={clsx("fixed top-0 z-20 flex h-16 w-full items-center px-2.5 shadow-none shadow-slate-900/5 ring-offset-zinc-100 transition-colors duration-500 scrolled:shadow-md sm:px-4 md:px-6", "bg-white/95 backdrop-blur-sm [@supports(backdrop-filter:blur(0))]:bg-white/75", "dark:bg-zinc-900/95 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75", "not-scrolled:bg-transparent!", className)}/>);
+    return (<header ref={ref} {...props} className={clsx("scrolled:shadow-md fixed top-0 z-20 flex h-16 w-full items-center px-2.5 shadow-none shadow-slate-900/5 ring-offset-zinc-100 transition-colors duration-500 sm:px-4 md:px-6", "bg-white/95 backdrop-blur-sm [@supports(backdrop-filter:blur(0))]:bg-white/75", "dark:bg-zinc-900/95 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75", "not-scrolled:bg-transparent!", className)}/>);
 }

package/components/ImageInput/ImageInput.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
 import FileInput from "../FileInput";
 declare function ImageInput<PFP extends object>({ icon, uploadAFileText, allowedFileTypes, fileDisplay, ...props }: ComponentProps<typeof FileInput<PFP>>): import("react").JSX.Element;
 export default ImageInput;

package/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import { UnstyledInputProps } from "../Input/UnstyledInput";
+import { type UnstyledInputProps } from "../Input/UnstyledInput";
 export type InputProps<Select extends boolean | undefined> = {
     loading?: boolean;
 } & UnstyledInputProps<Select>;

package/components/Input/Input.jsx

@@ -1,4 +1,4 @@
-import UnstyledInput from "../Input/UnstyledInput";
+import UnstyledInput, {} from "../Input/UnstyledInput";
 import { defaultTextStyles } from "../Text";
 import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
 import InputIcon from "./InputIcon";
@@ -16,8 +16,8 @@ export const defaultTrailingInputClassName = "pr-10";
 function Input({ error, trailing, labelClassName, inputClassName, helpTextClassName, trailingClassName, leadingClassName, leadingInputClassName, trailingInputClassName, required, label, loading, readOnly, children, disabled, helpText, ref, ...props }) {
     trailing =
         trailing ||
-            (error ? (<InputIcon className="text-error-500">
-        <ExclamationCircleIcon aria-hidden="true"/>
+            (error ? (<InputIcon className="text-error-500">
+        <ExclamationCircleIcon aria-hidden="true"/>
       </InputIcon>) : undefined);
     labelClassName = clsx(defaultLabelClassName, labelClassName);
     inputClassName = clsx(error ? defaultInputClassNameUncolored : defaultInputClassName, inputClassName, {
@@ -40,18 +40,18 @@ function Input({ error, trailing, labelClassName, inputClassName, helpTextClassN
         inputClassName = `${inputClassName} border-dashed`;
     }
     if (label && required) {
-        label = (<>
-        {label} <span className="text-red-500">*</span>
+        label = (<>
+        {label} <span className="text-red-500">*</span>
       </>);
     }
     return (<UnstyledInput 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    {...props} trailing={trailing} labelClassName={labelClassName} inputClassName={inputClassName} helpTextClassName={helpTextClassName} trailingClassName={trailingClassName} leadingClassName={leadingClassName} leadingInputClassName={leadingInputClassName} trailingInputClassName={trailingInputClassName} ref={ref} required={required} label={label} readOnly={readOnly} disabled={disabled} data-disabled={disabled || undefined} helpText={helpText}>
+    {...props} trailing={trailing} labelClassName={labelClassName} inputClassName={inputClassName} helpTextClassName={helpTextClassName} trailingClassName={trailingClassName} leadingClassName={leadingClassName} leadingInputClassName={leadingInputClassName} trailingInputClassName={trailingInputClassName} ref={ref} required={required} label={label} readOnly={readOnly} disabled={disabled} data-disabled={disabled || undefined} helpText={helpText}>
       {recursiveChildrenMap(children, (child) => cloneElement(child, child.type !== Fragment
             ? {
                 disabled: readOnly || disabled || child.props.disabled,
             }
-            : undefined))}
+            : undefined))}
     </UnstyledInput>);
 }
 export default Input;

package/components/Input/InputIcon.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { type ReactElement } from "react";
 export default function InputIcon({ className, children, }: {
     className?: string;
     children: ReactElement<{

package/components/Input/MultiSelectInput.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
-import { InputProps } from "./Input";
+import type { ComponentProps } from "react";
+import { type InputProps } from "./Input";
 declare function MultiSelectInput({ options, value, onChange, emptyLabel, ref, ...props }: Omit<InputProps<undefined>, "value" | "onChange"> & {
     options: {
         value: string;

package/components/Input/MultiSelectInput.jsx

@@ -1,28 +1,28 @@
-import Input from "./Input";
+import Input, {} from "./Input";
 import DropdownMenu from "../DropdownMenu";
 import Button from "../Button";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { xor } from "lodash-es";
 function MultiSelectInput({ options, value, onChange, emptyLabel = "None", ref, ...props }) {
-    return (<DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <Input as={Button} {...props} ref={ref} trailing={<ChevronDownIcon />} inputClassName="text-left dark:hover:bg-zinc-700/70">
+    return (<DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <Input as={Button} {...props} ref={ref} trailing={<ChevronDownIcon />} inputClassName="text-left dark:hover:bg-zinc-700/70">
           {value?.length
             ? options
                 .map((project) => value.includes(project.value) ? project.name : null)
                 .filter(Boolean)
                 .join(", ")
-            : emptyLabel}
-        </Input>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Item onClick={() => onChange?.([])}>
-          {emptyLabel}
-        </DropdownMenu.Item>
-        {options.map((options) => (<DropdownMenu.CheckboxItem key={options.name} checked={value?.includes(options.value)} onClick={() => onChange?.(xor(value, [options.value]))}>
-            {options.name}
-          </DropdownMenu.CheckboxItem>))}
-      </DropdownMenu.Content>
+            : emptyLabel}
+        </Input>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item onClick={() => onChange?.([])}>
+          {emptyLabel}
+        </DropdownMenu.Item>
+        {options.map((options) => (<DropdownMenu.CheckboxItem key={options.name} checked={value?.includes(options.value)} onClick={() => onChange?.(xor(value, [options.value]))}>
+            {options.name}
+          </DropdownMenu.CheckboxItem>))}
+      </DropdownMenu.Content>
     </DropdownMenu.Root>);
 }
 export default MultiSelectInput;

package/components/Input/NumericInput.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps } from "react";
-import { InputProps } from "./Input";
-import { NumericFormatProps } from "react-number-format";
+import type { ComponentProps } from "react";
+import { type InputProps } from "./Input";
+import { type NumericFormatProps } from "react-number-format";
 declare function NumericInput({ ref, ...props }: Omit<NumericFormatProps, "customInput"> & InputProps<undefined>): import("react").JSX.Element;
 export type NumericInputProps = ComponentProps<typeof NumericInput>;
 export default NumericInput;

package/components/Input/NumericInput.jsx

@@ -1,4 +1,4 @@
-import Input from "./Input";
+import Input, {} from "./Input";
 import { NumericFormat } from "react-number-format";
 function NumericInput({ ref, ...props }) {
     return <NumericFormat getInputRef={ref} customInput={Input} {...props}/>;

package/components/Input/PatternInput.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps } from "react";
-import { InputProps } from "./Input";
-import { PatternFormatProps } from "react-number-format";
+import type { ComponentProps } from "react";
+import { type InputProps } from "./Input";
+import { type PatternFormatProps } from "react-number-format";
 declare function PatternInput(props: Omit<PatternFormatProps, "customInput"> & InputProps<undefined>): import("react").JSX.Element;
 export type PatternInputProps = ComponentProps<typeof PatternInput>;
 export default PatternInput;

package/components/Input/PatternInput.jsx

@@ -1,4 +1,4 @@
-import Input from "./Input";
+import Input, {} from "./Input";
 import { PatternFormat } from "react-number-format";
 function PatternInput(props) {
     return <PatternFormat customInput={Input} {...props}/>;

package/components/Input/UnstyledInput.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, DetailedHTMLProps, InputHTMLAttributes, ReactNode } from "react";
+import { type ComponentType, type DetailedHTMLProps, type InputHTMLAttributes, type ReactNode } from "react";
 export type UnstyledInputCommonProps = {
     label?: ReactNode;
     inputClassName?: string;

package/components/Input/UnstyledInput.jsx

@@ -9,20 +9,20 @@ function UnstyledInput({ id, label, className, inputClassName, labelClassName, h
     }, trailingInputClassName && {
         [trailingInputClassName]: !!trailing,
     });
-    return (<div className={className}>
-      {label && (<label htmlFor={id} className={labelClassName}>
-          {label}
-        </label>)}
-      <div style={{ position: "relative" }} className={innerClassName}>
-        {leading && <div className={leadingClassName}>{leading}</div>}
+    return (<div className={className}>
+      {label && (<label htmlFor={id} className={labelClassName}>
+          {label}
+        </label>)}
+      <div style={{ position: "relative" }} className={innerClassName}>
+        {leading && <div className={leadingClassName}>{leading}</div>}
         <Component 
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    {...props} className={inputClassName} id={id} type={type} value={value}>
-          {children}
-        </Component>
-        {trailing && <div className={trailingClassName}>{trailing}</div>}
-      </div>
-      {helpText && <div className={helpTextClassName}>{helpText}</div>}
+    {...props} className={inputClassName} id={id} type={type} value={value}>
+          {children}
+        </Component>
+        {trailing && <div className={trailingClassName}>{trailing}</div>}
+      </div>
+      {helpText && <div className={helpTextClassName}>{helpText}</div>}
     </div>);
 }
 export default UnstyledInput;

package/components/Input2/InputWrapper.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export interface InputWrapperProps {
     children?: ReactNode;
     className?: string;

package/components/Input2/InputWrapper.jsx

@@ -1,11 +1,11 @@
 import clsx from "../../utils/clsx";
 export default function InputWrapper({ children, className, label, id, helpText, error, required, }) {
-    return (<div className={clsx("ui-input-wrapper", className)} data-error={error ? "" : undefined}>
-      {label && (<label htmlFor={id} className="ui-input-wrapper-label">
-          {label}
-          {required && <span className="text-red-500"> *</span>}
-        </label>)}
-      {children}
-      {helpText && <div className="ui-input-wrapper-help-text">{helpText}</div>}
+    return (<div className={clsx("ui-input-wrapper", className)} data-error={error ? "" : undefined}>
+      {label && (<label htmlFor={id} className="ui-input-wrapper-label">
+          {label}
+          {required && <span className="text-red-500"> *</span>}
+        </label>)}
+      {children}
+      {helpText && <div className="ui-input-wrapper-help-text">{helpText}</div>}
     </div>);
 }

package/components/Link/Link.d.ts

@@ -1,3 +1,3 @@
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
 import NextLink from "next/link";
 export default function Link({ className, href, ...props }: Partial<ComponentProps<typeof NextLink>>): import("react").JSX.Element;

package/components/Magnet/Magnet.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes } from "react";
+import React, { type ReactNode, type HTMLAttributes } from "react";
 interface MagnetProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     padding?: number;

package/components/Markdown/Markdown.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from "react";
+import React, { type ComponentProps } from "react";
 import ReactMarkdown from "react-markdown";
 export type MarkdownProps = {
     children?: string;

package/components/Markdown/Markdown.jsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, {} from "react";
 import ReactMarkdown from "react-markdown";
 import clsx from "../../utils/clsx";
 import remarkGfm from "remark-gfm";
 export default function Markdown({ children, className, options, }) {
-    return (<div className={clsx("prose prose-zinc dark:prose-invert max-w-full", "[&_.contains-task-list]:list-none [&_.contains-task-list]:pl-0", "[&_.task-list-item_input[type='checkbox']]:-mt-1", className)}>
+    return (<div className={clsx("prose prose-zinc dark:prose-invert max-w-full leading-normal", "[&_.contains-task-list]:list-none [&_.contains-task-list]:pl-0", "[&_.task-list-item_input[type='checkbox']]:-mt-1", "prose-a:break-all", className)}>
       <ReactMarkdown remarkPlugins={[remarkGfm, ...(options?.remarkPlugins || [])]} {...options}>
         {children}
       </ReactMarkdown>

package/components/Menu/Menu.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, ReactElement, ReactNode, Ref } from "react";
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode, type Ref } from "react";
 import Button from "../Button/Button";
-import { UnstyledButtonProps } from "../Button/UnstyledButton";
-import { TextProps } from "../Text";
+import { type UnstyledButtonProps } from "../Button/UnstyledButton";
+import { type TextProps } from "../Text";
 export declare const defaultMenuItemsClassName = "z-10 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden dark:bg-zinc-800";
 export type MenuProps = {
     className?: string;

package/components/Menu/Menu.jsx

@@ -3,21 +3,21 @@ import { Menu as HuiMenu, Transition } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import clsx from "../../utils/clsx";
 import Button from "../Button/Button";
-import UnstyledButton from "../Button/UnstyledButton";
-import Text from "../Text";
+import UnstyledButton, {} from "../Button/UnstyledButton";
+import Text, {} from "../Text";
 import { useMount } from "react-use";
 export const defaultMenuItemsClassName = "z-10 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden dark:bg-zinc-800";
 const Item = function MenuItem({ className, icon, children, ...props }) {
-    return (<HuiMenu.Item>
+    return (<HuiMenu.Item>
       {({ active }) => (<UnstyledButton {...props} type="button" className={clsx("flex w-full items-center text-left", active
                 ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-700/50 dark:text-zinc-100"
-                : "text-zinc-700 dark:text-zinc-200", "block px-4 py-2 text-sm", className)}>
+                : "text-zinc-700 dark:text-zinc-200", "block px-4 py-2 text-sm", className)}>
           {icon &&
                 cloneElement(icon, {
                     className: clsx("w-5 mr-2", icon.props.className),
-                })}
-          {children}
-        </UnstyledButton>)}
+                })}
+          {children}
+        </UnstyledButton>)}
     </HuiMenu.Item>);
 };
 const Label = function MenuLabel(props) {
@@ -27,16 +27,16 @@ const Menu = function Menu({ className, iconClassName, position = "right", child
     useMount(() => {
         console.warn("<Menu> was deprecated and should be replaced with <DropdownMenu>");
     });
-    return (<HuiMenu as="div" className={clsx("relative inline-block text-left", className)} {...props}>
-      <div>
+    return (<HuiMenu as="div" className={clsx("relative inline-block text-left", className)} {...props}>
+      <div>
         {button ? (<HuiMenu.Button as={Fragment}>{button}</HuiMenu.Button>) : (<HuiMenu.Button 
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        as={Button} className={clsx("flex w-full", buttonProps?.className)} trailing={<ChevronDownIcon className={iconClassName}/>} {...buttonProps}>
-            {label}
-          </HuiMenu.Button>)}
-      </div>
-
-      <Transition as={Fragment} enter="transition ease-out duration-100" enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-75" leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95">
+        as={Button} className={clsx("flex w-full", buttonProps?.className)} trailing={<ChevronDownIcon className={iconClassName}/>} {...buttonProps}>
+            {label}
+          </HuiMenu.Button>)}
+      </div>
+
+      <Transition as={Fragment} enter="transition ease-out duration-100" enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-75" leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95">
         <HuiMenu.Items unmount={unmount} className={clsx(defaultMenuItemsClassName, "absolute mt-2 min-w-[14rem]", {
             "right-0": position.includes("right"),
             "origin-top-right": position.includes("right") && !position.includes("bottom"),
@@ -45,10 +45,10 @@ const Menu = function Menu({ className, iconClassName, position = "right", child
             "origin-bottom-left": position.includes("left") && position.includes("bottom"),
             "left-0": position.includes("left"),
             "bottom-0": position.includes("bottom"),
-        }, menuItemsClassName)}>
-          <div className="py-1">{children}</div>
-        </HuiMenu.Items>
-      </Transition>
+        }, menuItemsClassName)}>
+          <div className="py-1">{children}</div>
+        </HuiMenu.Items>
+      </Transition>
     </HuiMenu>);
 };
 export default Object.assign(Menu, { Label, Item });

package/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, CSSProperties, ReactElement, ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type CSSProperties, type ReactElement, type ReactNode } from "react";
 import Button from "../Button";
 declare function Modal({ open, onClose, children, overlayClassName, panelClassName, dialogClassName, dialogOuterPanelClassName, dialogOverflowClassName, style, }: {
     open?: boolean;

package/components/Modal/Modal.jsx

@@ -7,40 +7,40 @@ import { XMarkIcon } from "@heroicons/react/24/solid";
 import clsx from "../../utils/clsx";
 export default function Modal({ open, onClose, children, overlayClassName, panelClassName, dialogClassName, dialogOuterPanelClassName, dialogOverflowClassName, style, }) {
     const handleOnClose = useCallback(() => onClose?.(), [onClose]);
-    return (<Transition.Root show={open} as={Fragment}>
-      <Dialog as="div" className={clsx("relative z-10", dialogClassName)} onClose={handleOnClose} style={style}>
-        <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
-          <div className={clsx("fixed inset-0 bg-white/75 transition-opacity dark:bg-black/75", overlayClassName)}/>
-        </Transition.Child>
-
-        <div className={clsx("fixed inset-0 z-10 overflow-y-auto", dialogOverflowClassName)}>
-          <div className={clsx("flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", dialogOuterPanelClassName)}>
-            <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterTo="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-              <Dialog.Panel className={clsx("relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all dark:bg-zinc-900 dark:ring-1 dark:ring-white/5 sm:my-8 sm:w-full sm:max-w-sm", panelClassName)}>
-                {children}
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
+    return (<Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className={clsx("relative z-10", dialogClassName)} onClose={handleOnClose} style={style}>
+        <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+          <div className={clsx("fixed inset-0 bg-white/75 transition-opacity dark:bg-black/75", overlayClassName)}/>
+        </Transition.Child>
+
+        <div className={clsx("fixed inset-0 z-10 overflow-y-auto", dialogOverflowClassName)}>
+          <div className={clsx("flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", dialogOuterPanelClassName)}>
+            <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterTo="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+              <Dialog.Panel className={clsx("relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm dark:bg-zinc-900 dark:ring-1 dark:ring-white/5", panelClassName)}>
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
     </Transition.Root>);
 }
 Modal.Container = ModalContainer;
 function ModalContainer({ children, className, }) {
-    return (<Stack className={clsx("gap-4! px-4 pb-4 pt-5 sm:p-6", className)}>
-      {children}
+    return (<Stack className={clsx("gap-4! px-4 pt-5 pb-4 sm:p-6", className)}>
+      {children}
     </Stack>);
 }
 Modal.Title = ModalTitle;
 function ModalTitle({ children, className, }) {
-    return (<Dialog.Title as="h3" className={clsx("text-center text-lg font-medium leading-6 text-zinc-900 dark:text-zinc-100", className)}>
-      {children}
+    return (<Dialog.Title as="h3" className={clsx("text-center text-lg leading-6 font-medium text-zinc-900 dark:text-zinc-100", className)}>
+      {children}
     </Dialog.Title>);
 }
 Modal.Content = ModalContent;
 function ModalContent({ children, className, }) {
-    return (<div className={clsx("text-center text-sm text-zinc-500 dark:text-zinc-400", className)}>
-      {children}
+    return (<div className={clsx("text-center text-sm text-zinc-500 dark:text-zinc-400", className)}>
+      {children}
     </div>);
 }
 Modal.Actions = ModalActions;
@@ -49,17 +49,17 @@ function ModalActions({ children, className, }) {
 }
 Modal.Icon = ModalIcon;
 function ModalIcon({ children, }) {
-    return (<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-800">
+    return (<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-800">
       {children &&
             cloneElement(children, {
                 className: "h-6 w-6 text-green-600 dark:text-green-400",
                 "aria-hidden": "true",
-            })}
+            })}
     </div>);
 }
 Modal.CloseButton = ModalCloseButton;
 function ModalCloseButton({ className, ...props }) {
-    return (<Button icon className={clsx("absolute right-2 top-2", className)} variant="text" {...props}>
-      <XMarkIcon />
+    return (<Button icon className={clsx("absolute top-2 right-2", className)} variant="text" {...props}>
+      <XMarkIcon />
     </Button>);
 }

package/components/ModeToggle/ModeToggle.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from "react";
+import type { Ref } from "react";
 export interface ModeToggleProps {
     ariaLabel?: string;
     className?: string;

package/components/ModeToggle/ModeToggle.jsx

@@ -4,9 +4,9 @@ import clsx from "../../utils/clsx";
 import useModeToggle from "./useModeToggle";
 const ModeToggle = function ModeToggle({ ariaLabel = "Toggle dark mode", className, iconClassName, ref, }) {
     const toggleMode = useModeToggle();
-    return (<Button ref={ref} icon variant="text" aria-label={ariaLabel} onClick={toggleMode} className={className}>
-      <SunIcon className={clsx("dark:hidden", iconClassName)}/>
-      <MoonIcon className={clsx("hidden dark:block", iconClassName)}/>
+    return (<Button ref={ref} icon variant="text" aria-label={ariaLabel} onClick={toggleMode} className={className}>
+      <SunIcon className={clsx("dark:hidden", iconClassName)}/>
+      <MoonIcon className={clsx("hidden dark:block", iconClassName)}/>
     </Button>);
 };
 export default ModeToggle;

package/components/MultiSelect/MultiSelect.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import Input, { UnstyledInputProps } from "../Input";
+import { type ReactNode } from "react";
+import Input, { type UnstyledInputProps } from "../Input";
 export interface MultiSelectProps<T extends object | string> extends Omit<UnstyledInputProps<false>, "as" | "onSelect" | "inputClassName" | "innerClassName" | "value" | "onChange"> {
     placeholder?: string;
     emptyText?: string;

package/components/MultiSelect/MultiSelect.jsx

@@ -1,7 +1,7 @@
 import { Combobox } from "@headlessui/react";
 import Loading from "../Loading";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { defaultHelpTextClassName, defaultInputClassName, defaultLabelClassName, defaultLeadingInputClassName, defaultTrailingClassName, defaultTrailingInputClassName, UnstyledInput, } from "../Input";
+import { useCallback, useEffect, useMemo, useState, } from "react";
+import Input, { defaultHelpTextClassName, defaultInputClassName, defaultLabelClassName, defaultLeadingInputClassName, defaultTrailingClassName, defaultTrailingInputClassName, UnstyledInput, } from "../Input";
 import clsx from "../../utils/clsx";
 import { isEqual, take } from "lodash-es";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";

package/components/MultiSelect/MultiSelectInput.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export declare function getValue<Id extends string | number, T extends object | string>(id: Id, item: T): string | number;
 export declare function MultiSelectInput<Id extends string | number, T extends object | string>({ className, selectedItems, doRender, removeItem, valueProperty, readOnly, items, ...props }: {
     className?: string;

package/components/MultiText/MultiText.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, FocusEventHandler, Ref } from "react";
+import { type ChangeEventHandler, type FocusEventHandler, type Ref } from "react";
 export interface MultiTextProps {
     value?: string[];
     onChangeValue?: (value: string[]) => void;

package/components/MultiText/MultiText.jsx

@@ -58,7 +58,6 @@ function MultiText({ value, onChangeValue, onChange, onBlur, name, id, className
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [innerValue]);
     return (<InputWrapper id={id} className={className} helpText={(invalid ? invalidHelpText : undefined) || helpText} label={label} error={invalid || error} required={required}>
       <div className="ui-multi-text" onClick={() => inputRef.current?.focus()} data-focused={innerFocused ? "" : undefined} data-error={invalid || error ? "" : undefined} data-loading={loading ? "" : undefined} data-readonly={readOnly ? "" : undefined}>

package/components/NavigationDrawer/NavigationDrawer.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export default function NavigationDrawer({ children, navigationChildren, position, title, noPadding, panelClassName, }: {
     children: ReactNode;
     navigationChildren: ReactNode;

package/components/NavigationDrawer/NavigationDrawer.jsx

@@ -10,20 +10,20 @@ export default function NavigationDrawer({ children, navigationChildren, positio
             navigationDrawerState.setOpen(open);
         }
     }, []);
-    return (<>
-      <Drawer open={isOpen} onChangeOpen={handleChangeOpen} className="lg:hidden" position={position} title={title} noPadding={noPadding} panelClassName={panelClassName}>
-        {navigationChildren}
-      </Drawer>
-      <div className={clsx("fixed left-0 top-0 z-10 hidden h-full w-full max-w-xs flex-1 overflow-y-auto px-4 py-4 pt-20 lg:block", "bg-zinc-100/95 backdrop-blur-sm [@supports(backdrop-filter:blur(0))]:bg-zinc-100/75", "dark:bg-zinc-900/95 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75", "transition-transform", {
+    return (<>
+      <Drawer open={isOpen} onChangeOpen={handleChangeOpen} className="lg:hidden" position={position} title={title} noPadding={noPadding} panelClassName={panelClassName}>
+        {navigationChildren}
+      </Drawer>
+      <div className={clsx("fixed top-0 left-0 z-10 hidden h-full w-full max-w-xs flex-1 overflow-y-auto px-4 py-4 pt-20 lg:block", "bg-zinc-100/95 backdrop-blur-sm [@supports(backdrop-filter:blur(0))]:bg-zinc-100/75", "dark:bg-zinc-900/95 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75", "transition-transform", {
             "translate-x-0": isOpen,
             "-translate-x-full": !isOpen,
-        }, panelClassName)}>
-        {navigationChildren}
-      </div>
+        }, panelClassName)}>
+        {navigationChildren}
+      </div>
       <div className={clsx("flex min-h-screen flex-col ring-offset-zinc-100 transition-all duration-300", {
             "lg:pl-80 lg:duration-150": isOpen,
-        })}>
-        {children}
-      </div>
+        })}>
+        {children}
+      </div>
     </>);
 }

package/components/NavigationDrawer/NavigationItem.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 export default function NavigationItem({ icon, children, href, exact, alternativeActiveHrefs, className, disabled, active, }: {
     icon?: ReactElement<{
         className?: string;

package/components/NavigationDrawer/NavigationItem.jsx

@@ -18,7 +18,7 @@ export default function NavigationItem({ icon, children, href, exact, alternativ
     return (<Button variant={active ? "light" : "text"} color={active ? "primary" : "default"} className={clsx("w-full justify-start border-transparent", className)} leading={icon &&
             cloneElement(icon, {
                 className: clsx(icon.props?.className, "w-5! mr-3"),
-            })} href={href} onClick={isMobile ? navigationDrawerState.close : undefined} disabled={disabled}>
-      {children}
+            })} href={href} onClick={isMobile ? navigationDrawerState.close : undefined} disabled={disabled}>
+      {children}
     </Button>);
 }

package/components/NoSsr/NoSsr.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export default function NoSsr({ children }: {
     children: ReactNode;
 }): React.JSX.Element | null;