@monolith-forensics/monolith-ui 1.1.31 → 1.1.33

package/dist/Flyout/Flyout.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useFloating, } from "@floating-ui/react";
 import { XIcon } from "lucide-react";
 import styled from "styled-components";
+import { Themes } from "../theme";
 const ANIMATION_TIME = 300;
 const StyledOverlay = styled(FloatingOverlay) `
   background-color: rgba(0, 0, 0, 0.3);
@@ -39,7 +40,7 @@ const StyledButton = styled.button `
   }
 `;
 const StyledContent = styled.div `
-  background-color: ${({ theme }) => theme.name === "DARK"
+  background-color: ${({ theme }) => theme.name === Themes.DARK
     ? theme.palette.background.alt
     : theme.palette.background.default};
   border-radius: 6px;

package/dist/Modal/Modal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { X } from "lucide-react";
 import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useFloating, } from "@floating-ui/react";
+import { Themes } from "../theme";
 const StyledOverlay = styled(FloatingOverlay) `
   background-color: rgba(0, 0, 0, 0.3);
   position: fixed;
@@ -18,7 +19,7 @@ const StyledOverlay = styled(FloatingOverlay) `
   }
 `;
 const StyledContent = styled.div `
-  background-color: ${({ theme }) => theme.name === "DARK"
+  background-color: ${({ theme }) => theme.name === Themes.DARK
     ? theme.palette.background.default
     : theme.palette.background.default};
   border-radius: 6px;

package/dist/MonolithUIProvider/MonolithUIProvider.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import merge from "deepmerge";
 import { ThemeProvider } from "styled-components";
-import getTheme from "../theme";
+import getTheme, { Themes } from "../theme";
 import { createContext, useState } from "react";
 import GlobalStyle from "./GlobalStyle";
 export const MonolithUIContext = createContext(undefined);
-const MonolithUIProvider = ({ children, theme = {}, defaultColorScheme = "dark", }) => {
+const MonolithUIProvider = ({ children, theme = {}, defaultColorScheme = "DARK", }) => {
     const [colorScheme, setColorScheme] = useState(defaultColorScheme);
     const toggleColorScheme = () => {
-        setColorScheme(colorScheme === "light" ? "dark" : "light");
+        setColorScheme(colorScheme === "LIGHT" ? "DARK" : "LIGHT");
     };
     const defaultTheme = getTheme(colorScheme);
     // override default theme with the provided theme
     const _theme = merge(defaultTheme, theme);
     return (_jsx(MonolithUIContext.Provider, { value: {
             theme: _theme,
+            Themes,
             colorScheme,
             toggleColorScheme,
             setColorScheme,

package/dist/Switch/Switch.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import * as RadixSwitch from "@radix-ui/react-switch";
 import { FieldLabel } from "..";
+import { Themes } from "../theme";
 const StyledRoot = styled(RadixSwitch.Root) `
   all: unset;
   cursor: pointer;
@@ -41,11 +42,11 @@ const StyledRoot = styled(RadixSwitch.Root) `
                     ? "70px"
                     : "26px"};
 
-  background-color: ${({ theme }) => theme.name === "DARK" ? "#383838" : "#e3e3e3"};
+  background-color: ${({ theme }) => theme.name === Themes.DARK ? "#383838" : "#e3e3e3"};
   transition: background-color 100ms;
   border-radius: 9999px;
   border: 1px solid
-    ${({ theme }) => theme.name === "DARK" ? theme.palette.input.border : "#e3e3e3"};
+    ${({ theme }) => theme.name === Themes.DARK ? theme.palette.input.border : "#e3e3e3"};
   position: relative;
   padding: ${({ size }) => size === "xs"
     ? "2px"

package/dist/Table/Table.js

@@ -21,8 +21,9 @@ import { Maximize2Icon } from "lucide-react";
 import { ArrowUpIcon, ArrowDownIcon } from "lucide-react";
 import moment from "moment";
 import { CheckBox } from "..";
+import { Themes } from "../theme";
 const MIN_COLUMN_WIDTH = 125;
-export const Column = ({ dataField, caption, columnId = shortUUID.generate(), sorting, format, componentType = "Column", }) => {
+export const Column = ({ dataField, caption, columnId = shortUUID.generate(), sorting, format, }) => {
     return null;
 };
 Column.displayName = "Column";
@@ -157,7 +158,7 @@ const StyledTh = styled.th `
   }
 
   &:hover {
-    background-color: ${({ theme }) => theme.name === "DARK" ? "#2e2e2e" : "#f5f5f5"};
+    background-color: ${({ theme }) => theme.name === Themes.DARK ? "#2e2e2e" : "#f5f5f5"};
     cursor: pointer;
   }
   &.dragging:active {
@@ -436,7 +437,7 @@ const Table = styled(({ className, children, data, rowHeight, headerHeight, tabl
     }, [children]);
     let columns = useMemo(() => {
         var _a, _b;
-        return (_b = (_a = children === null || children === void 0 ? void 0 : children.filter) === null || _a === void 0 ? void 0 : _a.call(children, (child) => child.props.componentType === "Column")) === null || _b === void 0 ? void 0 : _b.map((column) => {
+        return (_b = (_a = children === null || children === void 0 ? void 0 : children.filter) === null || _a === void 0 ? void 0 : _a.call(children, (child) => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "Column"; })) === null || _b === void 0 ? void 0 : _b.map((column) => {
             return cloneElement(column, {
                 columnId: shortUUID.generate(),
                 allowResize: allowColumnResize !== undefined

package/dist/theme/index.js

@@ -1,4 +1,5 @@
 import variants from "./variants";
+export { THEMES as Themes } from "./variants";
 const getTheme = (scheme) => {
     let themeConfig = variants.find((variant) => variant.name === scheme);
     if (!themeConfig) {

package/dist/theme/variants.js

@@ -2,8 +2,8 @@ import merge from "deepmerge";
 import typography from "./typography";
 // Themes
 export const THEMES = {
-    DARK: "dark",
-    LIGHT: "light",
+    DARK: "DARK",
+    LIGHT: "LIGHT",
 };
 const customBlue = {
     50: "#e9f0fb",
@@ -45,7 +45,7 @@ const lightVariant = {
     name: THEMES.LIGHT,
     typography,
     palette: {
-        mode: "light",
+        mode: THEMES.LIGHT,
         primary: {
             main: customBlue[700],
             contrastText: "#FFF",
@@ -168,7 +168,7 @@ const lightVariant = {
 const darkVariant = merge(lightVariant, {
     name: THEMES.DARK,
     palette: {
-        mode: "dark",
+        mode: THEMES.DARK,
         divider: "rgba(255, 255, 255, 0.15)",
         action: {
             hover: "rgba(255, 255, 255, 0.05)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.31",
+  "version": "1.1.33",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",