@wavv/ui 2.2.8 → 2.3.0-alpha.1

package/build/components/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { type CheckboxProps } from 'react-aria-components';
-import type { Margin, ThemeProp } from './types';
+import type { FlexPosition, Margin, ThemeProp } from './types';
 type Props = {
     /** Id of the input element */
     id?: string;
@@ -17,15 +17,18 @@ type Props = {
     partial?: boolean;
     /** Sets the gap between the label and the checkbox */
     gap?: number;
+    /** Sets the flex alignment of the checkbox container */
+    align?: FlexPosition;
     onChange?: CheckboxProps['onChange'];
     className?: CheckboxProps['className'];
     style?: CheckboxProps['style'];
 } & Margin & Omit<CheckboxProps, 'value' | 'isDisabled' | 'isReadOnly' | 'isSelected' | 'isIndeterminate'>;
-declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const ControlContainer: import("@emotion/styled").StyledComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement> & {
     theme?: import("@emotion/react").Theme;
 } & {
     labelRight?: boolean;
     gap?: number;
+    align?: FlexPosition;
 } & Margin & ThemeProp, {}, {}>;
 export default Checkbox;

package/build/components/Checkbox.js

@@ -5,13 +5,15 @@ import icons_Checkbox from "../assets/icons/Checkbox.js";
 import CheckboxOff from "../assets/icons/CheckboxOff.js";
 import CheckboxPartial from "../assets/icons/CheckboxPartial.js";
 import { ControlLabel } from "./FormControl.js";
+import getFlexPosition from "./helpers/getFlexPosition.js";
 import { marginProps } from "./helpers/styledProps.js";
 import Icon from "./Icon/index.js";
-const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, ...props })=>{
+const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props })=>{
     const labelRight = 'right' === labelPosition;
     const isControlled = 'boolean' == typeof checked;
     return /*#__PURE__*/ jsx(ControlContainer, {
         labelRight: labelRight,
+        align: align,
         ...isControlled ? {
             isSelected: checked
         } : {},
@@ -43,11 +45,11 @@ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, r
         }
     });
 };
-const ControlContainer = styled(Checkbox)(({ theme: { accent, formControl }, labelRight, isDisabled, gap = 8 })=>({
+const ControlContainer = styled(Checkbox)(({ theme: { accent, formControl }, labelRight, isDisabled, gap = 8, align })=>({
         display: 'inline-flex',
         flexDirection: labelRight ? 'row-reverse' : 'row',
         justifyContent: labelRight ? 'flex-end' : 'flex-start',
-        alignItems: 'center',
+        alignItems: getFlexPosition(align) || 'center',
         gap,
         position: 'relative',
         cursor: isDisabled ? 'not-allowed' : void 0,

package/build/components/Form.d.ts

@@ -34,7 +34,7 @@ declare const Form: {
         className?: import("react-aria-components").SwitchProps["className"];
         style?: import("react-aria-components").SwitchProps["style"];
     } & Margin & Omit<import("react-aria-components").SwitchProps, "isDisabled" | "isSelected">) => import("react/jsx-runtime").JSX.Element;
-    Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, ...props }: {
+    Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props }: {
         id?: string;
         label?: string;
         labelPosition?: "left" | "right";
@@ -43,6 +43,7 @@ declare const Form: {
         checked?: boolean;
         partial?: boolean;
         gap?: number;
+        align?: import("./types").FlexPosition;
         onChange?: import("react-aria-components").CheckboxProps["onChange"];
         className?: import("react-aria-components").CheckboxProps["className"];
         style?: import("react-aria-components").CheckboxProps["style"];

package/build/components/Inputs/helpers/InputContainerStyles.js

@@ -19,8 +19,8 @@ const baseStyles = ({ theme: { input, accent }, backgroundColor, borderRadius, b
         outlineOffset: -1,
         transition: 'background-color 0.2s',
         '&:focus-within': {
-            backgroundColor: backgroundColor || textOnly || isDisabled || isInvalid ? void 0 : input.background.focused,
-            outline: `${accent} solid 1px`
+            backgroundColor: backgroundColor || textOnly || isDisabled ? void 0 : input.background.focused,
+            outline: isInvalid ? void 0 : `1px solid ${accent}`
         },
         '&:hover:not(:focus-within)': {
             backgroundColor: isDisabled || isReadOnly || textOnly || backgroundColor ? void 0 : input.background.hover,
@@ -33,16 +33,16 @@ const disabledStyles = ({ theme: { input }, isDisabled })=>({
         backgroundColor: isDisabled ? input.background.disabled : void 0,
         pointerEvents: isDisabled ? 'none' : void 0
     });
-const invalidStyles = ({ theme: { input }, isInvalid })=>({
-        backgroundColor: isInvalid ? input.background.invalid : void 0,
+const invalidStyles = ({ theme: { color }, isInvalid })=>({
+        outline: isInvalid ? `1px solid ${color.error}` : void 0,
         '&:hover:not(:focus-within)': {
-            backgroundColor: isInvalid ? input.background.invalidHover : void 0
+            outline: isInvalid ? `1px solid ${color.error}` : void 0
         },
         '&[data-invalid]': {
-            backgroundColor: input.background.invalid
+            outline: `1px solid ${color.error}`
         },
         '&:hover:not(:focus-within)&[data-invalid]': {
-            backgroundColor: input.background.invalidHover
+            outline: `1px solid ${color.error}`
         }
     });
 const readOnlyStyles = ({ isReadOnly })=>({

package/build/components/ListHelpers/ListItemStyles.js

@@ -1,3 +1,4 @@
+import getFlexPosition from "../helpers/getFlexPosition.js";
 import isPropAllowed from "../helpers/isPropAllowed.js";
 const preventProps = {
     shouldForwardProp: (prop)=>isPropAllowed(prop, [
@@ -38,12 +39,9 @@ const baseStyles = ({ theme: { optionItem, scale4 }, color, accented, selected,
         }
     };
 };
-const positionStyles = ({ contentPosition })=>{
-    const position = 'start' === contentPosition || 'end' === contentPosition ? `flex-${contentPosition}` : contentPosition;
-    return {
-        justifyContent: position
-    };
-};
+const positionStyles = ({ contentPosition })=>({
+        justifyContent: getFlexPosition(contentPosition)
+    });
 const listItemStyles = [
     baseStyles,
     positionStyles

package/build/components/Menu.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import react, { cloneElement, useState } from "react";
 import react_keyed_flatten_children from "react-keyed-flatten-children";
+import getFlexPosition from "./helpers/getFlexPosition.js";
 import { paddingProps } from "./helpers/styledProps.js";
 import Icon from "./Icon/index.js";
 const Menu = ({ vertical, backgroundColor, children, ...rest })=>{
@@ -138,12 +139,9 @@ const MenuItem = styled.button({
             outline: `${accent} solid 1px`,
             outlineOffset: -1
         }
-    }), ({ contentPosition })=>{
-    const position = 'start' === contentPosition || 'end' === contentPosition ? `flex-${contentPosition}` : contentPosition;
-    return {
-        justifyContent: position
-    };
-});
+    }), ({ contentPosition })=>({
+        justifyContent: getFlexPosition(contentPosition)
+    }));
 const MenuGroup = styled.div(({ theme, backgroundColor })=>({
         display: 'flex',
         flexDirection: 'column',

package/build/components/Modal.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode, type RefObject } from 'react';
+import type { CSSProperties, ReactNode, RefObject } from 'react';
 import { type HeadingProps } from 'react-aria-components';
 import type { Attributes } from './typeDefs/elementTypes';
 import type { FlexPosition, Height, Margin, MaxWidthHeight, MinWidthHeight, Padding, PositionType, WidthHeight } from './types';
@@ -23,8 +23,6 @@ type ModalProps = {
     borderRadius?: number | string;
     /** Overrides the overflow of the modal container */
     overflow?: CSSProperties['overflow'];
-    /** Styles the Modal as an actionable toast */
-    small?: boolean;
     /** Removes the overlay background, and allows the modal to be positioned anywhere on the page */
     noOverlay?: boolean;
     /** Prevents the modal from being interacted with */
@@ -55,7 +53,7 @@ type ModalProps = {
     'aria-label'?: string;
 } & WidthHeight & MaxWidthHeight & MinWidthHeight & Padding & DivAttributes;
 declare const Modal: {
-    ({ children, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur, overlayColor, backgroundColor, small, noOverlay, inert, drawer, drawerDirection, scopeRef, centerX, centerY, position, top, bottom, right, left, zIndex, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur, overlayColor, backgroundColor, noOverlay, inert, drawer, drawerDirection, scopeRef, centerX, centerY, position, top, bottom, right, left, zIndex, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
     Header: {
         ({ children, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
@@ -88,7 +86,6 @@ type BodyProps = {
 type FooterProps = {
     children: ReactNode;
     justify?: FlexPosition;
-    inline?: boolean;
     gap?: number | string;
 } & Margin & DivAttributes;
 export default Modal;

package/build/components/Modal.js

@@ -1,20 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
-import { cloneElement } from "react";
 import { Dialog, Heading, Modal, ModalOverlay } from "react-aria-components";
-import react_keyed_flatten_children from "react-keyed-flatten-children";
 import { marginProps, maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.js";
 import Icon from "./Icon/index.js";
 import PortalScope from "./PortalScope.js";
-const Modal_Modal = ({ children, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, small, noOverlay, inert, drawer, drawerDirection = 'right', scopeRef, centerX, centerY, position, top, bottom, right, left, zIndex, ...props })=>{
+const Modal_Modal = ({ children, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, noOverlay, inert, drawer, drawerDirection = 'right', scopeRef, centerX, centerY, position, top, bottom, right, left, zIndex, ...props })=>{
     const { 'aria-label': ariaLabel, ...rest } = props;
-    const modalContent = react_keyed_flatten_children(children).map((child)=>{
-        if (child) return /*#__PURE__*/ cloneElement(child, {
-            inline: small
-        });
-        return null;
-    });
     const handleOpenChange = (open)=>{
         if (!open) onClose();
     };
@@ -49,7 +41,6 @@ const Modal_Modal = ({ children, visible, width, height, onClose, closeIcon, pre
                     width: width,
                     height: height,
                     backgroundColor: backgroundColor,
-                    small: small,
                     noOverlay: noOverlay,
                     drawer: drawer,
                     drawerDirection: drawerDirection,
@@ -57,9 +48,8 @@ const Modal_Modal = ({ children, visible, width, height, onClose, closeIcon, pre
                     centerY: centerY,
                     ...rest,
                     children: [
-                        modalContent,
+                        children,
                         closeIcon && /*#__PURE__*/ jsx(Close, {
-                            inline: small,
                             children: /*#__PURE__*/ jsx(Icon, {
                                 name: "close",
                                 onClick: onClose,
@@ -108,7 +98,7 @@ const Footer = ({ children, ...props })=>/*#__PURE__*/ jsx(ModalFooter, {
         ...props,
         children: children
     });
-const ModalFooter = styled.div(({ justify = 'end', inline, gap })=>{
+const ModalFooter = styled.div(({ justify = 'end', gap })=>{
     const justifyOptions = {
         start: 'flex-start',
         end: 'flex-end',
@@ -120,21 +110,20 @@ const ModalFooter = styled.div(({ justify = 'end', inline, gap })=>{
         display: 'flex',
         alignItems: 'center',
         justifyContent: justify ? justifyOptions[justify] : void 0,
-        marginTop: inline ? void 0 : 8,
+        marginTop: 8,
         gap
     };
 }, marginProps);
-const ModalContainer = styled.div(({ theme, width, height, backgroundColor, small, borderRadius, overflow, drawer, drawerDirection })=>({
+const ModalContainer = styled.div(({ theme, width, height, backgroundColor, borderRadius, overflow, drawer, drawerDirection })=>({
         display: 'flex',
-        flexDirection: small ? 'row' : 'column',
-        alignItems: small ? 'center' : void 0,
+        flexDirection: 'column',
         backgroundColor: backgroundColor || theme.modal.background,
         color: theme.scale10,
         boxShadow: drawer ? 'left' === drawerDirection ? '8px 0 20px rgba(0, 0, 0, 0.2)' : '-8px 0 20px rgba(0, 0, 0, 0.2)' : theme.elevation3,
         width: width || 'max-content',
         height: drawer ? height || '100%' : height || 'max-content',
         borderRadius: drawer ? 0 : borderRadius || theme.size.sm,
-        padding: small ? theme.size.md : theme.size.lg,
+        padding: theme.size.lg,
         overflow: overflow || 'hidden'
     }), ({ noOverlay, drawer })=>!noOverlay && !drawer && {
         position: 'absolute',
@@ -157,14 +146,11 @@ const ModalContainer = styled.div(({ theme, width, height, backgroundColor, smal
 const Close = styled.div({
     display: 'flex',
     justifyContent: 'center',
-    alignItems: 'center'
-}, ({ inline })=>inline ? {
-        marginLeft: 16
-    } : {
-        position: 'absolute',
-        top: 8,
-        right: 8
-    });
+    alignItems: 'center',
+    position: 'absolute',
+    top: 8,
+    right: 8
+});
 const Overlay = styled(ModalOverlay)(({ color, blur, noOverlay, centerX, centerY, position, top, bottom, right, left, zIndex, width, height })=>({
         position: position || 'fixed',
         top: top || (left || bottom || right ? void 0 : 0),

package/build/components/OptionHelpers/Item.js

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import getFlexPosition from "../helpers/getFlexPosition.js";
 import isPropAllowed from "../helpers/isPropAllowed.js";
 const contentPreventProps = {
     shouldForwardProp: (prop)=>isPropAllowed(prop, [
@@ -40,12 +41,9 @@ const Item = styled('div', contentPreventProps)({
             cursor: 'inherit'
         }
     };
-}, ({ contentPosition })=>{
-    const position = 'start' === contentPosition || 'end' === contentPosition ? `flex-${contentPosition}` : contentPosition;
-    return {
-        justifyContent: position
-    };
-}, ({ theme, section })=>section && {
+}, ({ contentPosition })=>({
+        justifyContent: getFlexPosition(contentPosition)
+    }), ({ theme, section })=>section && {
         backgroundColor: theme.scale0,
         padding: '0 16px',
         color: theme.scale6,

package/build/components/Table/contentStyles.js

@@ -1,12 +1,9 @@
+import getFlexPosition from "../helpers/getFlexPosition.js";
 import { paddingProps } from "../helpers/styledProps.js";
-const getPosition = (position)=>{
-    if (!position) return;
-    return 'start' === position || 'end' === position ? `flex-${position}` : position;
-};
 const baseStyles = ({ direction, justify, align = 'center', gap = 8 })=>({
         display: 'flex',
-        justifyContent: getPosition(justify),
-        alignItems: getPosition(align),
+        justifyContent: getFlexPosition(justify),
+        alignItems: getFlexPosition(align),
         flexDirection: direction,
         width: '100%',
         height: '100%',

package/build/components/helpers/getFlexPosition.d.ts

@@ -0,0 +1,3 @@
+import type { FlexPosition } from '../types';
+declare const getFlexPosition: (position?: FlexPosition) => string | undefined;
+export default getFlexPosition;

package/build/components/helpers/getFlexPosition.js

@@ -0,0 +1,6 @@
+const getFlexPosition = (position)=>{
+    if (!position) return;
+    return 'start' === position || 'end' === position ? `flex-${position}` : position;
+};
+const helpers_getFlexPosition = getFlexPosition;
+export { helpers_getFlexPosition as default };

package/build/tailwind/theme.css

@@ -115,6 +115,123 @@
   --color-background5: #596A74;
 }
 
+.mono {
+  --color-logo1: #0074F4;
+  --color-logo2: #00A9E2;
+  --color-logo3: #67C728;
+  --color-brand: #0074F4;
+  --color-brandShade1: #0068DC;
+  --color-brandShade2: #005DC3;
+  --color-brandDark: #4C9EF7;
+  --color-brandDarkShade1: #5EA8F8;
+  --color-brandTint0: rgba(0,116,244,0.05);
+  --color-brandTint1: rgba(0,116,244,0.1);
+  --color-brandTint2: rgba(0,116,244,0.2);
+  --color-brandTint3: rgba(0,116,244,0.3);
+  --color-brandTint4: rgba(0,116,244,0.4);
+  --color-brandBackground0: #121212;
+  --color-brandBackground1: #1e1e1e;
+  --color-brandBackground2: #292929;
+  --color-brandBackground3: #3a3a3a;
+  --color-brandBackground4: #4b4b4b;
+  --color-brandBackground5: #5c5c5c;
+  --color-error: #FF6068;
+  --color-errorShade1: #E6565E;
+  --color-errorShade2: #CC4D53;
+  --color-errorTint0: rgba(255,96,104,0.05);
+  --color-errorTint1: rgba(255,96,104,0.1);
+  --color-errorTint2: rgba(255,96,104,0.2);
+  --color-errorTint3: rgba(255,96,104,0.3);
+  --color-errorTint4: rgba(255,96,104,0.4);
+  --color-warning: #FF9900;
+  --color-warningShade1: #E68A00;
+  --color-warningShade2: #CC7A00;
+  --color-warningTint0: rgba(255,153,0,0.05);
+  --color-warningTint1: rgba(255,153,0,0.1);
+  --color-warningTint2: rgba(255,153,0,0.2);
+  --color-warningTint3: rgba(255,153,0,0.3);
+  --color-warningTint4: rgba(255,153,0,0.4);
+  --color-alert: #F0BB00;
+  --color-alertShade1: #E4B200;
+  --color-alertShade2: #C09600;
+  --color-alertTint0: rgba(240,187,0,0.05);
+  --color-alertTint1: rgba(240,187,0,0.1);
+  --color-alertTint2: rgba(240,187,0,0.2);
+  --color-alertTint3: rgba(240,187,0,0.3);
+  --color-alertTint4: rgba(240,187,0,0.4);
+  --color-success: #00E284;
+  --color-successShade1: #00AF3B;
+  --color-successShade2: #009B35;
+  --color-successTint0: rgba(0,226,132,0.05);
+  --color-successTint1: rgba(0,226,132,0.1);
+  --color-successTint2: rgba(0,226,132,0.2);
+  --color-successTint3: rgba(0,226,132,0.3);
+  --color-successTint4: rgba(0,226,132,0.4);
+  --color-grayscale0: rgba(18,18,18,0.05);
+  --color-grayscale1: rgba(18,18,18,0.1);
+  --color-grayscale2: rgba(18,18,18,0.2);
+  --color-grayscale3: rgba(18,18,18,0.3);
+  --color-grayscale4: rgba(18,18,18,0.4);
+  --color-grayscale5: rgba(18,18,18,0.5);
+  --color-grayscale6: rgba(18,18,18,0.6);
+  --color-grayscale7: rgba(18,18,18,0.7);
+  --color-grayscale8: rgba(18,18,18,0.8);
+  --color-grayscale9: rgba(18,18,18,0.9);
+  --color-grayscale10: #121212;
+  --color-contrast0: rgba(255,255,255,0.05);
+  --color-contrast1: rgba(255,255,255,0.1);
+  --color-contrast2: rgba(255,255,255,0.2);
+  --color-contrast3: rgba(255,255,255,0.3);
+  --color-contrast4: rgba(255,255,255,0.4);
+  --color-contrast5: rgba(255,255,255,0.5);
+  --color-contrast6: rgba(255,255,255,0.6);
+  --color-contrast7: rgba(255,255,255,0.7);
+  --color-contrast8: rgba(255,255,255,0.8);
+  --color-contrast9: rgba(255,255,255,0.9);
+  --color-contrast10: #FFFFFF;
+  --color-scale0: rgba(18,18,18,0.05);
+  --color-scale1: rgba(18,18,18,0.1);
+  --color-scale2: rgba(18,18,18,0.2);
+  --color-scale3: rgba(18,18,18,0.3);
+  --color-scale4: rgba(18,18,18,0.4);
+  --color-scale5: rgba(18,18,18,0.5);
+  --color-scale6: rgba(18,18,18,0.6);
+  --color-scale7: rgba(18,18,18,0.7);
+  --color-scale8: rgba(18,18,18,0.8);
+  --color-scale9: rgba(18,18,18,0.9);
+  --color-scale10: #121212;
+  --color-accent: #0074F4;
+  --color-accentShade: #0068DC;
+  --color-background0: #FFFFFF;
+  --color-background1: #F2F3F4;
+  --color-background2: #E6E9EB;
+  --color-background3: #CCD2D6;
+  --color-background4: #B3BCC2;
+  --color-background5: #99A5AD;
+}
+
+.mono.dark {
+  --color-scale0: rgba(255,255,255,0.05);
+  --color-scale1: rgba(255,255,255,0.1);
+  --color-scale2: rgba(255,255,255,0.2);
+  --color-scale3: rgba(255,255,255,0.3);
+  --color-scale4: rgba(255,255,255,0.4);
+  --color-scale5: rgba(255,255,255,0.5);
+  --color-scale6: rgba(255,255,255,0.6);
+  --color-scale7: rgba(255,255,255,0.7);
+  --color-scale8: rgba(255,255,255,0.8);
+  --color-scale9: rgba(255,255,255,0.9);
+  --color-scale10: #FFFFFF;
+  --color-accent: #4C9EF7;
+  --color-accentShade: #5EA8F8;
+  --color-background0: #121212;
+  --color-background1: #1e1e1e;
+  --color-background2: #292929;
+  --color-background3: #3a3a3a;
+  --color-background4: #4b4b4b;
+  --color-background5: #5c5c5c;
+}
+
 @utility head-1 {
 	font-size: 28px;
 	font-weight: 500;

package/build/theme/index.d.ts

@@ -2,14 +2,17 @@ import type { ITheme } from './ThemeTypes';
 type Theme = {
     light: ITheme;
     dark: ITheme;
+    monoDark: ITheme;
+    monoLight: ITheme;
 };
 declare const theme: Theme;
 export default theme;
 export type { ButtonState, ITheme, ThemeProp } from './ThemeTypes';
-export type ThemeClasses = 'light' | 'dark';
+export type ThemeClasses = 'light' | 'dark' | 'mono';
+export type ThemeOptionId = 'light' | 'dark' | 'monoDark' | 'monoLight';
 export declare const themeClasses: ThemeClasses[];
 export type ThemeOption = {
-    id: 'light' | 'dark';
+    id: ThemeOptionId;
     value: string;
     classes: ThemeClasses[];
 };

package/build/theme/index.js

@@ -1,13 +1,18 @@
 import dark from "./core/dark/dark.js";
 import light from "./core/light/light.js";
+import dark_dark from "./mono/dark/dark.js";
+import light_light from "./mono/light/light.js";
 const theme = {
     light: light,
-    dark: dark
+    dark: dark,
+    monoDark: dark_dark,
+    monoLight: light_light
 };
 const lib_theme = theme;
 const themeClasses = [
     'light',
-    'dark'
+    'dark',
+    'mono'
 ];
 const themeOptions = [
     {
@@ -23,6 +28,22 @@ const themeOptions = [
         classes: [
             'dark'
         ]
+    },
+    {
+        id: 'monoDark',
+        value: 'Mono Dark',
+        classes: [
+            'mono',
+            'dark'
+        ]
+    },
+    {
+        id: 'monoLight',
+        value: 'Mono Light',
+        classes: [
+            'mono',
+            'light'
+        ]
     }
 ];
 export { lib_theme as default, themeClasses, themeOptions };