@monolith-forensics/monolith-ui 1.2.122 → 1.3.1

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -3,7 +3,7 @@ import { ExtensionType } from "./Extensions/getTiptapExtensions";
 import { HandleImageUpload } from "./Plugins/UploadImagesPlugin";
 import { BubbleMenuOptions } from "./Extensions/BubbleMenuExtension";
 import { ToolbarOptions } from "./Toolbar/Toolbar";
-interface RichTextEditorProps {
+type RichTextEditorProps = {
     className?: string;
     editorInstanceRef?: React.RefObject<Editor>;
     extensions?: ExtensionType[];
@@ -21,6 +21,6 @@ interface RichTextEditorProps {
     toolbarOptions?: ToolbarOptions;
     autoFocus?: boolean;
     style?: React.CSSProperties;
-}
-declare const RichTextEditor: import("react").ForwardRefExoticComponent<RichTextEditorProps & import("react").RefAttributes<unknown>>;
-export default RichTextEditor;
+};
+export declare const RichTextEditor: React.FC<RichTextEditorProps>;
+export {};

package/dist/RichTextEditor/RichTextEditor.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { EditorContent, useEditor } from "@tiptap/react";
-import Toolbar from "./Toolbar";
+import { Toolbar } from "./Toolbar";
 import getTipTapExtensions from "./Extensions/getTiptapExtensions";
-import Extensions from "./Enums/Extensions";
+import { Extensions } from "./Enums";
 import { startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
 import Fonts from "./Enums/Fonts";
@@ -278,7 +278,7 @@ const StyledContent = styled.div `
     margin: 0 0.125rem;
   }
 `;
-const RichTextEditor = forwardRef(({ className, editorInstanceRef, defaultValue = "", value = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, style, }, ref) => {
+export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, style, }) => {
     const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
     // check if image extension is included
     if (extensions === null || extensions === void 0 ? void 0 : extensions.includes(Extensions.Image)) {
@@ -359,5 +359,4 @@ const RichTextEditor = forwardRef(({ className, editorInstanceRef, defaultValue
                 font: fontState,
                 setFont: setFontState,
             }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
-});
-export default RichTextEditor;
+};

package/dist/RichTextEditor/Toolbar/Control.d.ts

@@ -1,5 +1,5 @@
 import { Editor } from "@tiptap/react";
-interface ControlProps {
+export type ControlProps = {
     className?: string;
     editor: Editor | null;
     isActive?: any;
@@ -9,6 +9,5 @@ interface ControlProps {
     };
     label: string;
     icon: any;
-}
-declare const Control: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ControlProps, never>> & string & Omit<({ className, editor, isActive, operation, label, icon: Icon, }: ControlProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export default Control;
+};
+export declare const Control: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ControlProps, never>> & string & Omit<({ className, editor, isActive, operation, label, icon: Icon, }: ControlProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/RichTextEditor/Toolbar/Control.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import Labels from "./Labels";
-const Control = styled(({ className, editor, isActive, operation, label, icon: Icon, }) => {
+export const Control = styled(({ className, editor, isActive, operation, label, icon: Icon, }) => {
     var _a;
     const _label = Labels[label];
     const active = (isActive === null || isActive === void 0 ? void 0 : isActive.name)
@@ -29,5 +29,3 @@ const Control = styled(({ className, editor, isActive, operation, label, icon: I
     color: ${({ theme }) => theme.palette.primary.main};
   }
 `;
-Control.displayName = "Control";
-export default Control;

package/dist/RichTextEditor/Toolbar/Controls.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconH1, IconH2, IconH3, IconH4, IconList, IconListNumbers, IconAlignLeft, IconAlignRight, IconAlignCenter, IconAlignJustified, IconCornerUpLeft, IconCornerUpRight, } from "@tabler/icons-react";
-import Control from "./Control";
+import { Control } from "./Control";
 export const UndoControl = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "undoControlLabel", operation: {
             name: "undo",

package/dist/RichTextEditor/Toolbar/Toolbar.d.ts

@@ -1,5 +1,5 @@
 import { Editor } from "@tiptap/react";
-import Controls from "../Enums/Controls";
+import { Controls } from "../Enums";
 import { DropDownMenuProps } from "../../DropDownMenu";
 import { ReactNode } from "react";
 import { ButtonProps } from "../../Button";
@@ -12,14 +12,13 @@ export type CustomItem = {
     type: "menu";
     options: DropDownMenuProps;
 };
-export interface ToolbarOptions {
+export type ToolbarOptions = {
     controls?: Array<Controls | CustomItem>;
     customItems?: CustomItem[];
-}
-interface ToolbarProps {
+};
+export type ToolbarProps = {
     className?: string;
     editor: Editor | null;
     toolbarOptions?: ToolbarOptions;
-}
-declare const Toolbar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ToolbarProps, never>> & string & Omit<({ className, editor, toolbarOptions }: ToolbarProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export default Toolbar;
+};
+export declare const Toolbar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ToolbarProps, never>> & string & Omit<({ className, editor, toolbarOptions }: ToolbarProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -2,15 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { useTheme } from "styled-components";
 import ControlsGroup from "./ControlsGroup";
 import { UndoControl, RedoControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
-import Controls from "../Enums/Controls";
+import { Controls } from "../Enums";
 import DropDownMenu from "../../DropDownMenu";
 import Fonts from "../Enums/Fonts";
 import { useContext } from "react";
 import RichTextEditorContext from "../Contexts/RichTextEditorContext";
-import Button from "../../Button";
+import { Button } from "../../Button";
 import TextColors from "../Enums/TextColors";
 import { SquircleIcon } from "lucide-react";
-const Toolbar = styled(({ className, editor, toolbarOptions }) => {
+export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
     var _a;
     const theme = useTheme();
     const { controls } = toolbarOptions || {};
@@ -71,4 +71,3 @@ const Toolbar = styled(({ className, editor, toolbarOptions }) => {
   border-radius: 5px 5px 0 0;
   border: 1px solid transparent;
 `;
-export default Toolbar;

package/dist/RichTextEditor/Toolbar/index.d.ts

@@ -1 +1 @@
-export { default } from "./Toolbar";
+export * from "./Toolbar";

package/dist/RichTextEditor/Toolbar/index.js

@@ -1 +1 @@
-export { default } from "./Toolbar";
+export * from "./Toolbar";

package/dist/RichTextEditor/index.d.ts

@@ -1,6 +1,4 @@
-export { default } from "./RichTextEditor";
-export { default as Extensions } from "./Enums/Extensions";
-export { default as SlashCommands } from "./Enums/SlashCommands";
-export { default as Controls } from "./Enums/Controls";
-export type { CustomItem } from "./Toolbar/Toolbar";
-export type { ToolbarOptions } from "./Toolbar/Toolbar";
+export * from "./RichTextEditor";
+export * from "./Plugins";
+export * from "./Enums";
+export * from "./Toolbar";

package/dist/RichTextEditor/index.js

@@ -1,4 +1,4 @@
-export { default } from "./RichTextEditor";
-export { default as Extensions } from "./Enums/Extensions";
-export { default as SlashCommands } from "./Enums/SlashCommands";
-export { default as Controls } from "./Enums/Controls";
+export * from "./RichTextEditor";
+export * from "./Plugins";
+export * from "./Enums";
+export * from "./Toolbar";

package/dist/SelectBox/SelectBox.d.ts

@@ -2,5 +2,4 @@ import { SelectBoxProps } from "..";
 export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     width?: string | number | null;
 }>> & string;
-declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, OptionTooltip, DropDownProps, debounceTime, sort, disabled, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export default SelectBox;
+export declare const SelectBox: React.FC<SelectBoxProps>;

package/dist/SelectBox/SelectBox.js

@@ -202,7 +202,12 @@ const resolveValue = (value, data) => {
     }
     return value;
 };
-const SelectBox = styled(({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
+const StyledContainer = styled.div `
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+`;
+export const SelectBox = ({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
 DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const theme = useTheme();
@@ -456,8 +461,7 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
     // get height between bottom of the floating container and the bottom of the viewport
     const bottomHeight = window.innerHeight - ((_f = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.bottom) - 10;
     // get height between top of the floating container and the top of the viewport
-    const topHeight = (((_g = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.top) -
-        10);
+    const topHeight = (((_g = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.top) - 10);
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
@@ -498,7 +502,7 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
             setDropDownHeight(bottomHeight);
         };
     }, [topHeight, bottomHeight, isOpen]);
-    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), clearable && (_value || !!inputValue) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
+    return (_jsxs(StyledContainer, { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), clearable && (_value || !!inputValue) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
@@ -529,9 +533,4 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
                                     : filteredItems.map((item, index) => {
                                         return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
                                     }) }))] })) }) }))] }));
-}) `
-  position: relative;
-  cursor: pointer;
-  width: 100%;
-`;
-export default SelectBox;
+};

package/dist/SelectBox/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./SelectBox";
+export * from "./SelectBox";
 export type { SelectBoxProps, Option } from "./types";

package/dist/SelectBox/index.js

@@ -1 +1 @@
-export { default } from "./SelectBox";
+export * from "./SelectBox";

package/dist/SelectBox/types.d.ts

@@ -7,7 +7,7 @@ export type Option = {
     data?: any;
 };
 export type Value = number | boolean | string | Option;
-export interface SelectBoxProps {
+export type SelectBoxProps = {
     className?: string;
     defaultValue?: Option | string | number;
     value?: Option | string | number;
@@ -42,4 +42,4 @@ export interface SelectBoxProps {
     onSearch?: (value: string) => void;
     searchFn?: (value: string) => void;
     onItemAdded?: (item: Option | string) => void;
-}
+};

package/dist/Table/ActionButton.d.ts

@@ -1,2 +1,19 @@
-declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: import("react").RefObject<HTMLButtonElement>;
+    children?: import("react").ReactNode | string;
+    className?: string;
+    loading?: boolean;
+    leftSection?: import("react").ReactNode;
+    rightSection?: import("react").ReactNode;
+    href?: string | null;
+    download?: string | null;
+    fullWidth?: boolean;
+    size?: import("../core").Size;
+    variant?: import("../core").Variant;
+    color?: import("../Button").ButtonColor;
+    disabled?: boolean;
+    selected?: boolean;
+    justify?: "start" | "center" | "end";
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}, never>> & string & Omit<import("react").FC<import("../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
 export default ActionButton;

package/dist/Table/ActionButton.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import Button from "../Button";
+import { Button } from "../Button";
 const ActionButton = styled(Button) `
   padding: 2px;
   height: fit-content;

package/dist/Table/TableMenu/TableMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import Button from "../../Button";
-import TextInput from "../../TextInput";
+import { Button } from "../../Button";
+import { TextInput } from "../../TextInput";
 import { CheckSquareIcon, Columns3Icon, DownloadIcon, FilterIcon, Rows3Icon, Rows4Icon, } from "lucide-react";
 import DropDownMenu from "../../DropDownMenu";
 import useTable from "../useTable";

package/dist/Tabs/Tab.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export declare const Tab: React.FC<{
+    value: string | number;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    disabled?: boolean;
+    leftSection?: React.ReactNode;
+    rightSection?: React.ReactNode;
+}>;

package/dist/Tabs/Tab.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { Button } from "../Button";
+import { useTabs } from "./TabsProvider";
+const StyledTabButton = styled(Button) `
+  user-select: none;
+  cursor: pointer;
+
+  border: none;
+  border-radius: 0;
+
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-weight: 500;
+
+  ${({ orientation }) => orientation === "horizontal" &&
+    css `
+      border-bottom: 2px solid transparent;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+
+      &:hover {
+        border-top: 0;
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 2px solid transparent;
+
+        background-color: ${({ theme }) => theme.palette.action.hover};
+      }
+
+      &[data-active="true"] {
+        border-bottom-color: ${({ theme }) => theme.palette.primary.main};
+        color: ${({ theme }) => theme.palette.primary.main};
+      }
+    `}
+
+  ${({ orientation }) => orientation === "vertical" &&
+    css `
+      width: auto;
+      border-right: 2px solid transparent;
+      border-bottom-left-radius: 5px;
+      border-top-left-radius: 5px;
+
+      .inner-span {
+        justify-content: flex-start !important;
+      }
+
+      &:hover {
+        border-top: 0;
+        border-left: 0;
+        border-bottom: 0;
+        border-right: 2px solid transparent;
+
+        background-color: ${({ theme }) => theme.palette.action.hover};
+      }
+
+      &[data-active="true"] {
+        border-right-color: ${({ theme }) => theme.palette.primary.main};
+        color: ${({ theme }) => theme.palette.primary.main};
+      }
+    `}
+`;
+export const Tab = ({ children, style, onClick, disabled, leftSection, rightSection, value, }) => {
+    const { size, value: activeValue, onChange, orientation } = useTabs();
+    const isActive = activeValue === value;
+    return (_jsx(StyledTabButton, { className: "tab-button", style: style, "data-active": isActive, onClick: () => {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            onChange(value);
+        }, size: size, disabled: disabled, leftSection: leftSection, rightSection: rightSection, orientation: orientation, children: children }));
+};

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { Size } from "../core";
+import { Justify, Orientation } from "./Tabs.types";
+export declare const Tabs: React.FC<{
+    defaultValue?: string | number;
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+    children: ReactNode;
+    size?: Size;
+    showDivider?: boolean;
+    justify?: Justify;
+    orientation?: Orientation;
+}>;

package/dist/Tabs/Tabs.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { TabsProvider } from "./TabsProvider";
+const StyledContainer = styled.div `
+  user-select: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: ${({ justify }) => justify};
+
+  ${({ orientation, $showDivider, theme }) => orientation === "vertical"
+    ? css `
+          flex-direction: column;
+          border-right: ${$showDivider
+        ? "1px solid " + theme.palette.divider
+        : "transparent"};
+          width: max-content;
+        `
+    : css `
+          flex-direction: row;
+          border-bottom: ${$showDivider
+        ? "1px solid " + theme.palette.divider
+        : "transparent"};
+        `}
+
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+export const Tabs = ({ children, size, showDivider = true, justify = "start", defaultValue, value, onChange, orientation = "horizontal", }) => {
+    return (_jsx(TabsProvider, { size: size, value: value, defaultValue: defaultValue, onChange: onChange, orientation: orientation, children: _jsx(StyledContainer, { className: "tabs-container", size: size, "$showDivider": showDivider, justify: justify, orientation: orientation, children: children }) }));
+};

package/dist/Tabs/Tabs.types.d.ts

@@ -0,0 +1,2 @@
+export type Justify = "start" | "center" | "end" | "space-between" | "space-around";
+export type Orientation = "horizontal" | "vertical";

package/dist/Tabs/Tabs.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Tabs/TabsProvider.d.ts

@@ -0,0 +1,24 @@
+import { Size } from "../core";
+import { Orientation } from "./Tabs.types";
+export declare const TabsContext: import("react").Context<{
+    value: string | number;
+    defaultValue?: string | number;
+    onChange: (value: string | number) => void;
+    size?: Size;
+    orientation?: Orientation;
+}>;
+export declare const TabsProvider: React.FC<{
+    children: React.ReactNode;
+    size?: Size;
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number) => void;
+    orientation?: Orientation;
+}>;
+export declare const useTabs: () => {
+    value: string | number;
+    defaultValue?: string | number;
+    onChange: (value: string | number) => void;
+    size?: Size;
+    orientation?: Orientation;
+};

package/dist/Tabs/TabsProvider.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { useUncontrolled } from "@mantine/hooks";
+export const TabsContext = createContext({
+    value: "",
+    defaultValue: "",
+    onChange: () => { },
+    size: "sm",
+    orientation: "horizontal",
+});
+export const TabsProvider = ({ children, size, value, defaultValue, onChange, orientation }) => {
+    const [_value, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: "Final",
+        onChange,
+    });
+    return (_jsx(TabsContext.Provider, { value: {
+            value: _value,
+            onChange: handleChange,
+            size,
+            defaultValue,
+            orientation,
+        }, children: children }));
+};
+export const useTabs = () => {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error("useTabs must be used within a TabsProvider");
+    }
+    return context;
+};

package/dist/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tabs";
+export * from "./Tab";

package/dist/Tabs/index.js

@@ -0,0 +1,2 @@
+export * from "./Tabs";
+export * from "./Tab";

package/dist/TextInput/TextInput.d.ts

@@ -1,6 +1,6 @@
 import { InputProps } from "../Input/Input";
 import { Size } from "../core";
-interface TextInputProps extends InputProps {
+export type TextInputProps = InputProps & {
     className?: string;
     label?: string;
     error?: string;
@@ -10,6 +10,5 @@ interface TextInputProps extends InputProps {
     description?: string;
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
     style?: React.CSSProperties;
-}
-declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export default TextInput;
+};
+export declare const TextInput: React.FC<TextInputProps>;

package/dist/TextInput/TextInput.js

@@ -17,8 +17,7 @@ import { forwardRef } from "react";
 const StyledContainer = styled.div `
   grid-column: span ${({ colSpan }) => colSpan || 1};
 `;
-const TextInput = forwardRef((_a, ref) => {
+export const TextInput = forwardRef((_a, ref) => {
     var { className, label, error, required, colSpan = 1, description, size = "sm", inputProps } = _a, rest = __rest(_a, ["className", "label", "error", "required", "colSpan", "description", "size", "inputProps"]);
     return (_jsxs(StyledContainer, { className: className, colSpan: colSpan, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsx(Input, Object.assign({ ref: ref, size: size }, inputProps, rest))] }));
 });
-export default TextInput;

package/dist/TextInput/index.d.ts

@@ -1 +1 @@
-export { default } from "./TextInput";
+export * from "./TextInput";

package/dist/TextInput/index.js

@@ -1 +1 @@
-export { default } from "./TextInput";
+export * from "./TextInput";

package/dist/index.d.ts

@@ -3,13 +3,11 @@ declare module "styled-components" {
     interface DefaultTheme extends MonolithDefaultTheme {
     }
 }
-export { default as FormSection } from "./FormSection";
-export { default as Grid } from "./Grid";
-export { default as TextInput } from "./TextInput";
-export { default as SelectBox } from "./SelectBox";
-export type { SelectBoxProps, Option } from "./SelectBox";
-export { default as Button } from "./Button";
-export type { ButtonProps } from "./Button";
+export * from "./FormSection";
+export * from "./Grid";
+export * from "./TextInput";
+export * from "./SelectBox";
+export * from "./Button";
 export { default as IconButton } from "./IconButton";
 export { default as DropDownMenu } from "./DropDownMenu";
 export type { DropDownItem } from "./DropDownMenu";
@@ -30,8 +28,7 @@ export { default as Tooltip } from "./Tooltip";
 export { default as Pill } from "./Pill";
 export { default as Calendar } from "./Calendar";
 export { default as Typography } from "./Typography";
-export { default as RichTextEditor, Extensions, SlashCommands, Controls, } from "./RichTextEditor";
-export type { CustomItem, ToolbarOptions } from "./RichTextEditor";
+export * from "./RichTextEditor";
 export { default as Loader } from "./Loader";
 export type { LoaderProps } from "./Loader";
 export * from "./QueryFilter";
@@ -40,3 +37,4 @@ export * from "./MonolithUIProvider";
 export * from "./FileViewer";
 export * from "./Table";
 export type { ColumnProps, TableProps } from "./Table";
+export * from "./Tabs";

package/dist/index.js

@@ -1,8 +1,8 @@
-export { default as FormSection } from "./FormSection";
-export { default as Grid } from "./Grid";
-export { default as TextInput } from "./TextInput";
-export { default as SelectBox } from "./SelectBox";
-export { default as Button } from "./Button";
+export * from "./FormSection";
+export * from "./Grid";
+export * from "./TextInput";
+export * from "./SelectBox";
+export * from "./Button";
 export { default as IconButton } from "./IconButton";
 export { default as DropDownMenu } from "./DropDownMenu";
 export { default as DateInput } from "./DateInput";
@@ -21,10 +21,11 @@ export { default as Tooltip } from "./Tooltip";
 export { default as Pill } from "./Pill";
 export { default as Calendar } from "./Calendar";
 export { default as Typography } from "./Typography";
-export { default as RichTextEditor, Extensions, SlashCommands, Controls, } from "./RichTextEditor";
+export * from "./RichTextEditor";
 export { default as Loader } from "./Loader";
 export * from "./QueryFilter";
 export * from "./hooks";
 export * from "./MonolithUIProvider";
 export * from "./FileViewer";
 export * from "./Table";
+export * from "./Tabs";

package/dist/theme/variants.js

@@ -168,6 +168,14 @@ const lightVariant = {
     zIndex: {
         snackbar: 999999,
     },
+    button: {
+        background: {
+            default: "transparent",
+            primary: customBlue[500],
+            secondary: "#a1a1a1",
+            error: "#f44336",
+        },
+    },
 };
 const darkVariant = merge(lightVariant, {
     name: THEMES.DARK,
@@ -269,6 +277,18 @@ const darkVariant = merge(lightVariant, {
         primary: "#3f3f3f",
         secondary: "#252525",
     },
+    button: {
+        background: {
+            default: "transparent",
+            primary: customBlue[500],
+            secondary: "#3f3f3f",
+            error: "#f44336",
+        },
+        text: {
+            primary: "rgba(255, 255, 255, 0.95)",
+            secondary: "rgba(255, 255, 255, 0.6)",
+        },
+    },
 });
 const variants = [lightVariant, darkVariant];
 export default variants;