@wavv/ui 2.2.8 → 2.3.0

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 };

package/build/theme/mono/colors.d.ts

@@ -0,0 +1,224 @@
+declare const colors: {
+    logo1: string;
+    logo2: string;
+    logo3: string;
+    brand: string;
+    brandShade1: string;
+    brandShade2: string;
+    brandDark: string;
+    brandDarkShade1: string;
+    brandTint0: string;
+    brandTint1: string;
+    brandTint2: string;
+    brandTint3: string;
+    brandTint4: string;
+    brandBackground0: string;
+    brandBackground1: string;
+    brandBackground2: string;
+    brandBackground3: string;
+    brandBackground4: string;
+    brandBackground5: string;
+    error: string;
+    errorShade1: string;
+    errorShade2: string;
+    errorTint0: string;
+    errorTint1: string;
+    errorTint2: string;
+    errorTint3: string;
+    errorTint4: string;
+    warning: string;
+    warningShade1: string;
+    warningShade2: string;
+    warningTint0: string;
+    warningTint1: string;
+    warningTint2: string;
+    warningTint3: string;
+    warningTint4: string;
+    alert: string;
+    alertShade1: string;
+    alertShade2: string;
+    alertTint0: string;
+    alertTint1: string;
+    alertTint2: string;
+    alertTint3: string;
+    alertTint4: string;
+    success: string;
+    successShade1: string;
+    successShade2: string;
+    successTint0: string;
+    successTint1: string;
+    successTint2: string;
+    successTint3: string;
+    successTint4: string;
+    grayscale0: string;
+    grayscale1: string;
+    grayscale2: string;
+    grayscale3: string;
+    grayscale4: string;
+    grayscale5: string;
+    grayscale6: string;
+    grayscale7: string;
+    grayscale8: string;
+    grayscale9: string;
+    grayscale10: string;
+    contrast0: string;
+    contrast1: string;
+    contrast2: string;
+    contrast3: string;
+    contrast4: string;
+    contrast5: string;
+    contrast6: string;
+    contrast7: string;
+    contrast8: string;
+    contrast9: string;
+    contrast10: string;
+};
+export default colors;
+export interface IColors {
+    /** #0074F4 */
+    logo1: string;
+    /** #00A9E2 */
+    logo2: string;
+    /** #67C728 */
+    logo3: string;
+    /** #0074F4 */
+    brand: string;
+    /** #0068DC */
+    brandShade1: string;
+    /** #005DC3 */
+    brandShade2: string;
+    /** #4C9EF7 */
+    brandDark: string;
+    /** #5EA8F8 */
+    brandDarkShade1: string;
+    /** 5% of #0074F4 */
+    brandTint0: string;
+    /** 10% of #0074F4 */
+    brandTint1: string;
+    /** 20% of #0074F4 */
+    brandTint2: string;
+    /** 30% of #0074F4 */
+    brandTint3: string;
+    /** 40% of #0074F4 */
+    brandTint4: string;
+    /** #001828 */
+    brandBackground0: string;
+    /** #0D2433 */
+    brandBackground1: string;
+    /** #192F3D */
+    brandBackground2: string;
+    /** #334653 */
+    brandBackground3: string;
+    /** #475964 */
+    brandBackground4: string;
+    /** #596A74 */
+    brandBackground5: string;
+    /** #FF6068 */
+    error: string;
+    /** #E6565E */
+    errorShade1: string;
+    /** #CC4D53 */
+    errorShade2: string;
+    /** 5% of #FF6068 */
+    errorTint0: string;
+    /** 10% of #FF6068 */
+    errorTint1: string;
+    /** 20% of #FF6068 */
+    errorTint2: string;
+    /** 30% of #FF6068 */
+    errorTint3: string;
+    /** 40% of #FF6068 */
+    errorTint4: string;
+    /** #FF9900 */
+    warning: string;
+    /** #E68A00 */
+    warningShade1: string;
+    /** #CC7A00 */
+    warningShade2: string;
+    /** 5% of #FF9900 */
+    warningTint0: string;
+    /** 10% of #FF9900 */
+    warningTint1: string;
+    /** 20% of #FF9900 */
+    warningTint2: string;
+    /** 30% of #FF9900 */
+    warningTint3: string;
+    /** 40% of #FF9900 */
+    warningTint4: string;
+    /** #F0BB00 */
+    alert: string;
+    /** #E4B200 */
+    alertShade1: string;
+    /** #C09600 */
+    alertShade2: string;
+    /** 5% of #F0BB00 */
+    alertTint0: string;
+    /** 10% of #F0BB00 */
+    alertTint1: string;
+    /** 20% of #F0BB00 */
+    alertTint2: string;
+    /** 30% of #F0BB00 */
+    alertTint3: string;
+    /** 40% of #F0BB00 */
+    alertTint4: string;
+    /** #00C242 */
+    success: string;
+    /** #00AF3B */
+    successShade1: string;
+    /** #009B35 */
+    successShade2: string;
+    /** 5% of #00C242 */
+    successTint0: string;
+    /** 10% of #00C242 */ successTint1: string;
+    /** 20% of #00C242 */
+    successTint2: string;
+    /** 30% of #00C242 */
+    successTint3: string;
+    /** 40% of #00C242 */
+    successTint4: string;
+    /** 5% of #001D32 */
+    grayscale0: string;
+    /** 10% of #001D32 */
+    grayscale1: string;
+    /** 20% of #001D32 */
+    grayscale2: string;
+    /** 30% of #001D32 */
+    grayscale3: string;
+    /** 40% of #001D32 */
+    grayscale4: string;
+    /** 50% of #001D32 */
+    grayscale5: string;
+    /** 60% of #001D32 */
+    grayscale6: string;
+    /** 70% of #001D32 */
+    grayscale7: string;
+    /** 80% of #001D32 */
+    grayscale8: string;
+    /** 90% of #001D32 */
+    grayscale9: string;
+    /** #001D32 */
+    grayscale10: string;
+    /** 5% of #FFFFFF */
+    contrast0: string;
+    /** 10% of #FFFFFF */
+    contrast1: string;
+    /** 20% of #FFFFFF */
+    contrast2: string;
+    /** 30% of #FFFFFF */
+    contrast3: string;
+    /** 40% of #FFFFFF */
+    contrast4: string;
+    /** 50% of #FFFFFF */
+    contrast5: string;
+    /** 60% of #FFFFFF */
+    contrast6: string;
+    /** 70% of #FFFFFF */
+    contrast7: string;
+    /** 80% of #FFFFFF */
+    contrast8: string;
+    /** 90% of #FFFFFF */
+    contrast9: string;
+    /** #FFFFFF */
+    contrast10: string;
+}
+export type ColorNames = keyof typeof colors;

package/build/theme/{eighties → mono}/colors.js

@@ -1,59 +1,58 @@
 import { transparentize } from "polished";
-const brand = '#40E0D0';
-const brandDark = '#FF00A8';
-const error = '#FF3366';
-const warning = '#FFD23F';
-const alertColor = '#FFFF66';
-const success = '#0ECD9D';
-const grayVal = '#2B003E';
-const white = '#FFFDF2';
+const brand = '#0074F4';
+const error = '#FF6068';
+const warning = '#FF9900';
+const alertColor = '#F0BB00';
+const success = '#00E284';
+const grayVal = '#121212';
+const white = '#FFFFFF';
 const colors = {
     logo1: brand,
-    logo2: brandDark,
-    logo3: '#8A2BE2',
+    logo2: '#00A9E2',
+    logo3: '#67C728',
     brand,
-    brandShade1: '#E00096',
-    brandShade2: '#C00084',
-    brandDark,
-    brandDarkShade1: '#36C7B8',
+    brandShade1: '#0068DC',
+    brandShade2: '#005DC3',
+    brandDark: '#4C9EF7',
+    brandDarkShade1: '#5EA8F8',
     brandTint0: transparentize(0.95, brand),
     brandTint1: transparentize(0.9, brand),
     brandTint2: transparentize(0.8, brand),
     brandTint3: transparentize(0.7, brand),
     brandTint4: transparentize(0.6, brand),
-    brandBackground0: '#2C073B',
-    brandBackground1: '#360948',
-    brandBackground2: '#400A55',
-    brandBackground3: '#4A0C62',
-    brandBackground4: '#540D6E',
-    brandBackground5: '#6F3386',
+    brandBackground0: '#121212',
+    brandBackground1: '#1e1e1e',
+    brandBackground2: '#292929',
+    brandBackground3: '#3a3a3a',
+    brandBackground4: '#4b4b4b',
+    brandBackground5: '#5c5c5c',
     error,
-    errorShade1: '#E02E5C',
-    errorShade2: '#C92852',
+    errorShade1: '#E6565E',
+    errorShade2: '#CC4D53',
     errorTint0: transparentize(0.95, error),
     errorTint1: transparentize(0.9, error),
     errorTint2: transparentize(0.8, error),
     errorTint3: transparentize(0.7, error),
     errorTint4: transparentize(0.6, error),
     warning,
-    warningShade1: '#E6AF00',
-    warningShade2: '#CC9B00',
+    warningShade1: '#E68A00',
+    warningShade2: '#CC7A00',
     warningTint0: transparentize(0.95, warning),
     warningTint1: transparentize(0.9, warning),
     warningTint2: transparentize(0.8, warning),
     warningTint3: transparentize(0.7, warning),
     warningTint4: transparentize(0.6, warning),
     alert: alertColor,
-    alertShade1: '#E6E652',
-    alertShade2: '#CCCC48',
+    alertShade1: '#E4B200',
+    alertShade2: '#C09600',
     alertTint0: transparentize(0.95, alertColor),
     alertTint1: transparentize(0.9, alertColor),
     alertTint2: transparentize(0.8, alertColor),
     alertTint3: transparentize(0.7, alertColor),
     alertTint4: transparentize(0.6, alertColor),
     success,
-    successShade1: '#33E512',
-    successShade2: '#2CCF10',
+    successShade1: '#00AF3B',
+    successShade2: '#009B35',
     successTint0: transparentize(0.95, success),
     successTint1: transparentize(0.9, success),
     successTint2: transparentize(0.8, success),
@@ -82,5 +81,5 @@ const colors = {
     contrast9: transparentize(0.1, white),
     contrast10: white
 };
-const eighties_colors = colors;
-export { eighties_colors as default };
+const mono_colors = colors;
+export { mono_colors as default };

package/build/theme/{eighties → mono}/dark/dark.js

@@ -446,7 +446,7 @@ const dark = {
         }
     },
     menu: {
-        background: colors.brandBackground2
+        background: darkScale.background1
     },
     menuItem: {
         borderColor: colors.brand,
@@ -524,11 +524,11 @@ const dark = {
     toast: {
         color: darkScale.scale10,
         background: {
-            default: '#24002E',
-            info: '#002E3A',
-            success: '#003A21',
-            warning: '#2E2600',
-            error: '#2E0011'
+            default: '#0D2433',
+            info: '#002A51',
+            success: '#003A2D',
+            warning: '#333220',
+            error: '#332635'
         },
         border: {
             default: darkScale.scale8,

package/build/theme/{eighties → mono}/light/light.js

@@ -445,7 +445,7 @@ const light = {
         }
     },
     menu: {
-        background: white
+        background: lightScale.background1
     },
     menuItem: {
         borderColor: colors.brand,
@@ -523,11 +523,11 @@ const light = {
     toast: {
         color: lightScale.scale10,
         background: {
-            default: '#FFE6F5',
-            info: '#E0F9FF',
-            success: '#E4FFE0',
-            warning: '#FFF5CC',
-            error: '#FFD6E0'
+            default: '#F2F3F4',
+            info: '#CCE3FD',
+            success: '#CCF3D9',
+            warning: '#FFEBCC',
+            error: '#FFDFE1'
         },
         border: {
             default: lightScale.scale8,

package/build/theme/{eighties → mono}/light/lightScale.js

@@ -24,12 +24,12 @@ const lightScale = {
     scale10,
     accent: colors.brand,
     accentShade: colors.brandShade1,
-    background0: '#FFFDF2',
-    background1: '#F0EEE3',
-    background2: '#E1E5DC',
-    background3: '#D2D8CF',
-    background4: '#C3CBC2',
-    background5: '#B4BEB5'
+    background0: '#FFFFFF',
+    background1: '#F2F3F4',
+    background2: '#E6E9EB',
+    background3: '#CCD2D6',
+    background4: '#B3BCC2',
+    background5: '#99A5AD'
 };
 const light_lightScale = lightScale;
 export { light_lightScale as default };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.2.8",
+	"version": "2.3.0",
 	"type": "module",
 	"exports": {
 		".": {

package/build/theme/eighties/colors.d.ts

@@ -1,76 +0,0 @@
-declare const colors: {
-    logo1: string;
-    logo2: string;
-    logo3: string;
-    brand: string;
-    brandShade1: string;
-    brandShade2: string;
-    brandDark: string;
-    brandDarkShade1: string;
-    brandTint0: string;
-    brandTint1: string;
-    brandTint2: string;
-    brandTint3: string;
-    brandTint4: string;
-    brandBackground0: string;
-    brandBackground1: string;
-    brandBackground2: string;
-    brandBackground3: string;
-    brandBackground4: string;
-    brandBackground5: string;
-    error: string;
-    errorShade1: string;
-    errorShade2: string;
-    errorTint0: string;
-    errorTint1: string;
-    errorTint2: string;
-    errorTint3: string;
-    errorTint4: string;
-    warning: string;
-    warningShade1: string;
-    warningShade2: string;
-    warningTint0: string;
-    warningTint1: string;
-    warningTint2: string;
-    warningTint3: string;
-    warningTint4: string;
-    alert: string;
-    alertShade1: string;
-    alertShade2: string;
-    alertTint0: string;
-    alertTint1: string;
-    alertTint2: string;
-    alertTint3: string;
-    alertTint4: string;
-    success: string;
-    successShade1: string;
-    successShade2: string;
-    successTint0: string;
-    successTint1: string;
-    successTint2: string;
-    successTint3: string;
-    successTint4: string;
-    grayscale0: string;
-    grayscale1: string;
-    grayscale2: string;
-    grayscale3: string;
-    grayscale4: string;
-    grayscale5: string;
-    grayscale6: string;
-    grayscale7: string;
-    grayscale8: string;
-    grayscale9: string;
-    grayscale10: string;
-    contrast0: string;
-    contrast1: string;
-    contrast2: string;
-    contrast3: string;
-    contrast4: string;
-    contrast5: string;
-    contrast6: string;
-    contrast7: string;
-    contrast8: string;
-    contrast9: string;
-    contrast10: string;
-};
-export default colors;