@wavv/ui 2.2.2 → 2.2.4

package/build/components/Inputs/PhoneInput.js

@@ -10,7 +10,7 @@ import Input from "./helpers/Input.js";
 import InputContainerStyles from "./helpers/InputContainerStyles.js";
 import InputMessage from "./helpers/InputMessage.js";
 import Label from "./helpers/Label.js";
-const PhoneInput_PhoneInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, onChange, ref, ...props })=>{
+const PhoneInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, onChange, ref, ...props })=>{
     const [inputValue, setInputValue] = useState('');
     const internalRef = useRef(null);
     useImperativeHandle(ref, ()=>internalRef.current);
@@ -92,5 +92,5 @@ const PhoneInput_PhoneInput = ({ value, label, placeholder, iconLeft, iconRight,
     });
 };
 const InputContainer = styled(TextField)(InputContainerStyles);
-const PhoneInput = PhoneInput_PhoneInput;
-export { PhoneInput as default };
+const Inputs_PhoneInput = PhoneInput;
+export { Inputs_PhoneInput as default };

package/build/components/Inputs/TextInput.js

@@ -10,7 +10,7 @@ import InputContainerStyles from "./helpers/InputContainerStyles.js";
 import InputMessage from "./helpers/InputMessage.js";
 import isAcceptable from "./helpers/isAcceptable.js";
 import Label from "./helpers/Label.js";
-const TextInput_TextInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, onChange, onInput, ref, ...props })=>{
+const TextInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, onChange, onInput, ref, ...props })=>{
     const [inputValue, setInputValue] = useState('');
     useEffect(()=>{
         if (null != value && inputValue !== value) setInputValue(value);
@@ -70,5 +70,5 @@ const TextInput_TextInput = ({ value, label, placeholder, iconLeft, iconRight, l
 const InputContainer = styled(TextField)(InputContainerStyles, ({ asTrigger })=>({
         pointerEvents: asTrigger ? 'none' : void 0
     }));
-const TextInput = TextInput_TextInput;
-export { TextInput as default };
+const Inputs_TextInput = TextInput;
+export { Inputs_TextInput as default };

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

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-const LabelWrapper_LabelWrapper = styled.div(({ readOnly })=>({
+const LabelWrapper = styled.div(({ readOnly })=>({
         display: 'flex',
         flexDirection: 'column',
         boxSizing: 'border-box',
@@ -10,5 +10,5 @@ const LabelWrapper_LabelWrapper = styled.div(({ readOnly })=>({
             caretColor: readOnly ? 'transparent' : void 0
         }
     }));
-const LabelWrapper = LabelWrapper_LabelWrapper;
-export { LabelWrapper as default };
+const helpers_LabelWrapper = LabelWrapper;
+export { helpers_LabelWrapper as default };

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { useLayoutEffect, useRef, useState } from "react";
-const useDynamicWidth_useDynamicWidth = ({ value, placeholder, fontSize, active = true })=>{
+const useDynamicWidth = ({ value, placeholder, fontSize, active = true })=>{
     const textWidthRef = useRef(null);
     const [inputWidth, setInputWidth] = useState(active ? 50 : void 0);
     useLayoutEffect(()=>{
@@ -35,5 +35,5 @@ const HiddenWidthRef = styled.div(({ theme: { font }, fontSize })=>({
         fontSize: fontSize || font.size.lg,
         zIndex: -1
     }));
-const useDynamicWidth = useDynamicWidth_useDynamicWidth;
-export { useDynamicWidth as default };
+const helpers_useDynamicWidth = useDynamicWidth;
+export { helpers_useDynamicWidth as default };

package/build/components/ListHelpers/ItemHeaderBody.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { Text } from "react-aria-components";
-const ItemHeaderBody_ItemHeaderBody = ({ header, body, inline, disabled, isGridItem })=>/*#__PURE__*/ jsxs(HeaderBodyContainer, {
+const ItemHeaderBody = ({ header, body, inline, disabled, isGridItem })=>/*#__PURE__*/ jsxs(HeaderBodyContainer, {
         inline: inline,
         children: [
             /*#__PURE__*/ jsx(ItemHeader, {
@@ -32,5 +32,5 @@ const ItemSubtext = styled(Text)(({ theme, disabled })=>({
         color: disabled ? theme.scale4 : theme.scale6,
         cursor: disabled ? 'inherit' : void 0
     }));
-const ItemHeaderBody = ItemHeaderBody_ItemHeaderBody;
-export { ItemHeaderBody as default };
+const ListHelpers_ItemHeaderBody = ItemHeaderBody;
+export { ListHelpers_ItemHeaderBody as default };

package/build/components/ListHelpers/ListSection.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ListBoxSection } from "react-aria-components";
 import ListHeader from "./ListHeader.js";
-const ListSection_ListSection = ({ id, title, children })=>/*#__PURE__*/ jsxs(ListBoxSection, {
+const ListSection = ({ id, title, children })=>/*#__PURE__*/ jsxs(ListBoxSection, {
         id: id,
         children: [
             title && /*#__PURE__*/ jsx(ListHeader, {
@@ -10,5 +10,5 @@ const ListSection_ListSection = ({ id, title, children })=>/*#__PURE__*/ jsxs(Li
             children
         ]
     });
-const ListSection = ListSection_ListSection;
-export { ListSection as default };
+const ListHelpers_ListSection = ListSection;
+export { ListHelpers_ListSection as default };

package/build/components/MultiSelect/SearchDropdown.js

@@ -9,7 +9,7 @@ import isAcceptable from "../Inputs/helpers/isAcceptable.js";
 import useDynamicWidth from "../Inputs/helpers/useDynamicWidth.js";
 import ListOptions from "../ListBoxParts/ListOptions.js";
 import MotionPopover from "../MotionPopover.js";
-const SearchDropdown_SearchDropdown = ({ options, items, triggerRef, placeholder, placeholderColor, fontSize, position, fixedPosition, maxHeight, disabled, accepts, addItem, removeItem, afterShow, afterHide, onTextChange, onValidChange, ref, ...props })=>{
+const SearchDropdown = ({ options, items, triggerRef, placeholder, placeholderColor, fontSize, position, fixedPosition, maxHeight, disabled, accepts, addItem, removeItem, afterShow, afterHide, onTextChange, onValidChange, ref, ...props })=>{
     const [isOpen, setIsOpen] = useState(false);
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [inputText, setInputText] = useState('');
@@ -151,5 +151,5 @@ const InputShakeContainer = styled.div(({ shake })=>({
             animation: shake ? `${shakeAnimation} .5s linear` : void 0
         }
     }));
-const SearchDropdown = SearchDropdown_SearchDropdown;
-export { SearchDropdown as default };
+const MultiSelect_SearchDropdown = SearchDropdown;
+export { MultiSelect_SearchDropdown as default };

package/build/components/Pagination.js

@@ -5,7 +5,7 @@ import { chunk, range } from "../utils/index.js";
 import { marginProps } from "./helpers/styledProps.js";
 import Icon from "./Icon/index.js";
 const toNum = (val)=>val ? +val : 0;
-const Pagination_Pagination = ({ onPageNav, page, totalPages, maxVisibleNumbers, width, ...props })=>{
+const Pagination = ({ onPageNav, page, totalPages, maxVisibleNumbers, width, ...props })=>{
     const [currentPage, setCurrentPage] = useState(toNum(page) || 1);
     const [currentChunk, setCurrentChunk] = useState(0);
     const numbers = range(1, totalPages);
@@ -117,5 +117,5 @@ const Page = styled(Control)(({ theme, selected })=>({
 const Ellipses = styled.span(({ theme })=>({
         color: theme.scale6
     }));
-const Pagination = Pagination_Pagination;
-export { Pagination as default };
+const components_Pagination = Pagination;
+export { components_Pagination as default };

package/build/components/Popover.js

@@ -4,7 +4,7 @@ import { DialogTrigger } from "react-aria-components";
 import { useControlledOpenState } from "../hooks/index.js";
 import AriaButton from "./Inputs/helpers/AriaButton.js";
 import MotionPopover from "./MotionPopover.js";
-const Popover_Popover = ({ children, position = 'bottom', fixedPosition, trigger, isTriggerButton, triggerProps, offset = 4, afterShow, afterHide, open, onOpenChange, ...props })=>{
+const Popover = ({ children, position = 'bottom', fixedPosition, trigger, isTriggerButton, triggerProps, offset = 4, afterShow, afterHide, open, onOpenChange, ...props })=>{
     const [isOpen, handleOpenChange] = useControlledOpenState({
         open,
         onOpenChange,
@@ -36,5 +36,5 @@ const Popover_Popover = ({ children, position = 'bottom', fixedPosition, trigger
         ]
     });
 };
-const Popover = Popover_Popover;
-export { Popover as default };
+const components_Popover = Popover;
+export { components_Popover as default };

package/build/components/Radio.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import RadioButton from "../assets/icons/RadioButton.js";
 import { ControlContainer, ControlInput, ControlLabel } from "./FormControl.js";
 import Icon from "./Icon/index.js";
-const Radio_Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props })=>{
+const Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props })=>{
     const labelRight = 'right' === labelPosition;
     const marginProps = {
         margin,
@@ -41,5 +41,5 @@ const Radio_Radio = ({ id, label, labelPosition, checked, disabled, margin, marg
         ]
     });
 };
-const Radio = Radio_Radio;
-export { Radio as default };
+const components_Radio = Radio;
+export { components_Radio as default };

package/build/components/Slider.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { marginProps } from "./helpers/styledProps.js";
-const Slider_Slider = ({ value, max = 100, step = 1, width, height, disabled, onChange, ...props })=>{
+const Slider = ({ value, max = 100, step = 1, width, height, disabled, onChange, ...props })=>{
     const handleControlGrab = (event)=>{
         const { value: progressValue } = event.target;
         if (onChange) onChange(+progressValue);
@@ -46,5 +46,5 @@ const ProgressSlider = styled.input(({ theme, percent, width, height, disabled,
         }
     };
 }, marginProps);
-const Slider = Slider_Slider;
-export { Slider as default };
+const components_Slider = Slider;
+export { components_Slider as default };

package/build/components/Table/Body.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { TableBody, TableLoadMoreItem } from "react-aria-components";
 import Spinner from "../Spinner.js";
-const Body_Body = ({ children, emptyFallback, fetching, loading, scrollOffset, onLoadMore, ...rest })=>{
+const Body = ({ children, emptyFallback, fetching, loading, scrollOffset, onLoadMore, ...rest })=>{
     const emptyContent = loading ? /*#__PURE__*/ jsx(SpinnerContainer, {
         children: /*#__PURE__*/ jsx(Spinner, {})
     }) : emptyFallback;
@@ -45,5 +45,5 @@ const SpinnerContainer = styled.div(({ theme })=>({
         color: theme.scale6,
         paddingTop: 4
     }));
-const Body = Body_Body;
-export { Body as default };
+const Table_Body = Body;
+export { Table_Body as default };

package/build/components/Table/ColumnSort.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTheme } from "@emotion/react";
-const ColumnSort_ColumnSort = ({ sortDirection })=>{
+const ColumnSort = ({ sortDirection })=>{
     const { accent, scale4 } = useTheme();
     const topColor = 'asc' === sortDirection ? accent : scale4;
     const bottomColor = 'desc' === sortDirection ? accent : scale4;
@@ -22,5 +22,5 @@ const ColumnSort_ColumnSort = ({ sortDirection })=>{
         ]
     });
 };
-const ColumnSort = ColumnSort_ColumnSort;
-export { ColumnSort as default };
+const Table_ColumnSort = ColumnSort;
+export { Table_ColumnSort as default };

package/build/components/Table/Header.js

@@ -6,7 +6,7 @@ import mergePadding from "../helpers/mergePadding.js";
 import Check from "./Check.js";
 import Column from "./Column.js";
 import context from "./context.js";
-const Header_Header = ({ children, backgroundColor, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest })=>{
+const Header = ({ children, backgroundColor, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest })=>{
     const { setHeaderPadding, selectionMode } = useContext(context);
     useEffect(()=>{
         const values = padding ?? paddingTop ?? paddingRight ?? paddingBottom ?? paddingLeft;
@@ -60,5 +60,5 @@ const TableHead = styled(TableHeader)(({ backgroundColor })=>({
             borderLeft: '2px solid transparent'
         }
     }));
-const Header = Header_Header;
-export { Header as default };
+const Table_Header = Header;
+export { Table_Header as default };

package/build/components/Table/Resizer.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { ColumnResizer } from "react-aria-components";
-const Resizer_Resizer = styled(ColumnResizer)(({ theme })=>({
+const Resizer = styled(ColumnResizer)(({ theme })=>({
         width: 9,
         height: 18,
         backgroundColor: theme.scale4,
@@ -21,5 +21,5 @@ const Resizer_Resizer = styled(ColumnResizer)(({ theme })=>({
             backgroundColor: theme.accent
         }
     }));
-const Resizer = Resizer_Resizer;
-export { Resizer as default };
+const Table_Resizer = Resizer;
+export { Table_Resizer as default };

package/build/components/Table/contentStyles.js

@@ -12,9 +12,9 @@ const baseStyles = ({ direction, justify, align = 'center', gap = 8 })=>({
         height: '100%',
         gap
     });
-const contentStyles_contentStyles = [
+const contentStyles = [
     baseStyles,
     paddingProps
 ];
-const contentStyles = contentStyles_contentStyles;
-export { contentStyles as default };
+const Table_contentStyles = contentStyles;
+export { Table_contentStyles as default };

package/build/components/ToggleButton/ToggleButton.js

@@ -6,7 +6,7 @@ import { ToggleButton } from "react-aria-components";
 import getIcon from "../helpers/getIcon.js";
 import { marginProps, paddingProps } from "../helpers/styledProps.js";
 import { ToggleContext } from "./context.js";
-const ToggleButton_ToggleButton_ToggleButton = ({ children, disabled, size, positive, negative, caution, secondary, iconLeft, iconRight, borderRadius, ...props })=>{
+const ToggleButton_ToggleButton = ({ children, disabled, size, positive, negative, caution, secondary, iconLeft, iconRight, borderRadius, ...props })=>{
     const { type, joined, size: toggleSize, height } = useContext(ToggleContext);
     const { button } = useTheme();
     const { iconSize } = button[size || toggleSize];
@@ -43,15 +43,15 @@ const Button = styled(ToggleButton)(({ theme, secondary, negative, positive, cau
     if (positive) buttonType = 'positive';
     if (caution) buttonType = 'caution';
     if (isDisabled) buttonType = 'disabled';
-    const sizeStyle = theme.button[size || 'small'];
-    const style = theme.button[buttonType];
-    const background = style.outlineBackground.default;
-    const backgroundHover = style.outlineBackground.hover;
-    const backgroundActive = style.outlineBackground.active;
+    const sizeStyle = theme.toggleButton[size || 'small'];
+    const style = theme.toggleButton[buttonType];
+    const background = style.background.default;
+    const backgroundHover = style.background.hover;
+    const backgroundActive = style.background.active;
     const borderColor = style.border.default;
-    const color = style.outlineColor.default;
-    const colorHover = style.outlineColor.hover;
-    const colorActive = style.outlineColor.active;
+    const color = style.color.default;
+    const colorHover = style.color.hover;
+    const colorActive = style.color.active;
     const buttonHeight = height || sizeStyle.height;
     return {
         display: 'inline-flex',
@@ -100,5 +100,5 @@ const Button = styled(ToggleButton)(({ theme, secondary, negative, positive, cau
         } : {}
     };
 }, marginProps, paddingProps);
-const ToggleButton_ToggleButton = ToggleButton_ToggleButton_ToggleButton;
-export { ToggleButton_ToggleButton as default };
+const components_ToggleButton_ToggleButton = ToggleButton_ToggleButton;
+export { components_ToggleButton_ToggleButton as default };

package/build/components/UnstyledButton.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { Button } from "react-aria-components";
-const UnstyledButton_UnstyledButton = ({ children, ...props })=>/*#__PURE__*/ jsx(Button, {
+const UnstyledButton = ({ children, ...props })=>/*#__PURE__*/ jsx(Button, {
         ...props,
         children: children
     });
-const UnstyledButton = UnstyledButton_UnstyledButton;
-export { UnstyledButton as default };
+const components_UnstyledButton = UnstyledButton;
+export { components_UnstyledButton as default };

package/build/components/helpers/mergePadding.js

@@ -3,7 +3,7 @@ const parseValue = (value)=>{
     if ('string' == typeof value) return Number.parseInt(value.replace('px', ''), 10);
     return 0;
 };
-const mergePadding_mergePadding = (paddingObj)=>{
+const mergePadding = (paddingObj)=>{
     const paddingValues = {
         top: 0,
         right: 0,
@@ -43,5 +43,5 @@ const mergePadding_mergePadding = (paddingObj)=>{
     if (void 0 !== paddingLeft) paddingValues.left = parseValue(paddingLeft);
     return paddingValues;
 };
-const mergePadding = mergePadding_mergePadding;
-export { mergePadding as default };
+const helpers_mergePadding = mergePadding;
+export { helpers_mergePadding as default };

package/build/global-styles/ResetStyles.js

@@ -12,7 +12,7 @@ const loadFonts = (fonts)=>{
         }
     });
 };
-const ResetStyles_ResetStyles = ({ families, fontFamily })=>{
+const ResetStyles = ({ families, fontFamily })=>{
     useEffect(()=>{
         loadFonts(families);
     }, [
@@ -29,5 +29,5 @@ const ResetStyles_ResetStyles = ({ families, fontFamily })=>{
         }
     });
 };
-const ResetStyles = ResetStyles_ResetStyles;
-export { ResetStyles as default };
+const global_styles_ResetStyles = ResetStyles;
+export { global_styles_ResetStyles as default };

package/build/hooks/useControlledOpenState.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-const useControlledOpenState_useControlledOpenState = ({ open, onOpenChange, afterShow, afterHide })=>{
+const useControlledOpenState = ({ open, onOpenChange, afterShow, afterHide })=>{
     const [isOpen, setIsOpen] = useState(false);
     useEffect(()=>{
         if (void 0 !== open && open !== isOpen) setIsOpen(open);
@@ -18,5 +18,5 @@ const useControlledOpenState_useControlledOpenState = ({ open, onOpenChange, aft
         handleOpenChange
     ];
 };
-const useControlledOpenState = useControlledOpenState_useControlledOpenState;
-export { useControlledOpenState as default };
+const hooks_useControlledOpenState = useControlledOpenState;
+export { hooks_useControlledOpenState as default };

package/build/hooks/useOnClickOutside.js

@@ -1,6 +1,6 @@
 import { useRef } from "react";
 import useEventListener from "./useEventListener.js";
-const useOnClickOutside_useOnClickOutside = (onClickOutside, condition, exclusions)=>{
+const useOnClickOutside = (onClickOutside, condition, exclusions)=>{
     const ref = useRef(null);
     const handleOutsideClick = (event)=>{
         if (ref?.current && null !== event) {
@@ -17,5 +17,5 @@ const useOnClickOutside_useOnClickOutside = (onClickOutside, condition, exclusio
     useEventListener(document, 'touchstart', handleOutsideClick, condition);
     return ref;
 };
-const useOnClickOutside = useOnClickOutside_useOnClickOutside;
-export { useOnClickOutside as default };
+const hooks_useOnClickOutside = useOnClickOutside;
+export { hooks_useOnClickOutside as default };

package/build/hooks/useWindowSize.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-const useWindowSize_useWindowSize = ()=>{
+const useWindowSize = ()=>{
     const initialState = {
         width: null,
         height: null
@@ -21,5 +21,5 @@ const useWindowSize_useWindowSize = ()=>{
     }, []);
     return windowSize;
 };
-const useWindowSize = useWindowSize_useWindowSize;
-export { useWindowSize as default };
+const hooks_useWindowSize = useWindowSize;
+export { hooks_useWindowSize as default };

package/build/tailwind/theme.css

@@ -24,24 +24,32 @@
   --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: #00C242;
   --color-successShade1: #00AF3B;
   --color-successShade2: #009B35;
   --color-successTint0: rgba(0,194,66,0.05);
   --color-successTint1: rgba(0,194,66,0.1);
   --color-successTint2: rgba(0,194,66,0.2);
+  --color-successTint3: rgba(0,194,66,0.3);
+  --color-successTint4: rgba(0,194,66,0.4);
   --color-grayscale0: rgba(0,29,50,0.05);
   --color-grayscale1: rgba(0,29,50,0.1);
   --color-grayscale2: rgba(0,29,50,0.2);

package/build/theme/ThemeTypes.d.ts

@@ -56,6 +56,23 @@ export type ButtonState = {
     };
     divider: string;
 };
+export type ToggleButtonState = {
+    color: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    background: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    border: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+};
 export interface ITheme {
     name: 'light' | 'dark';
     accent: string;
@@ -105,6 +122,18 @@ export interface ITheme {
             default: string;
         };
     };
+    toggleButton: {
+        tiny: ButtonSize;
+        small: ButtonSize;
+        medium: ButtonSize;
+        large: ButtonSize;
+        primary: ToggleButtonState;
+        secondary: ToggleButtonState;
+        negative: ToggleButtonState;
+        positive: ToggleButtonState;
+        caution: ToggleButtonState;
+        disabled: ToggleButtonState;
+    };
     calendar: {
         background: {
             container: string;

package/build/theme/common/common.d.ts

@@ -25,24 +25,32 @@ declare const _default: {
         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;

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

@@ -24,24 +24,32 @@ declare const colors: {
     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;
@@ -117,6 +125,10 @@ export interface IColors {
     errorTint1: string;
     /** 20% of #FF6068 */
     errorTint2: string;
+    /** 30% of #FF6068 */
+    errorTint3: string;
+    /** 40% of #FF6068 */
+    errorTint4: string;
     /** #FF9900 */
     warning: string;
     /** #E68A00 */
@@ -129,6 +141,10 @@ export interface IColors {
     warningTint1: string;
     /** 20% of #FF9900 */
     warningTint2: string;
+    /** 30% of #FF9900 */
+    warningTint3: string;
+    /** 40% of #FF9900 */
+    warningTint4: string;
     /** #F0BB00 */
     alert: string;
     /** #E4B200 */
@@ -141,6 +157,10 @@ export interface IColors {
     alertTint1: string;
     /** 20% of #F0BB00 */
     alertTint2: string;
+    /** 30% of #F0BB00 */
+    alertTint3: string;
+    /** 40% of #F0BB00 */
+    alertTint4: string;
     /** #00C242 */
     success: string;
     /** #00AF3B */
@@ -149,10 +169,13 @@ export interface IColors {
     successShade2: string;
     /** 5% of #00C242 */
     successTint0: string;
-    /** 10% of #00C242 */
-    successTint1: 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 */

package/build/theme/core/colors.js

@@ -32,24 +32,32 @@ const colors = {
     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: '#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: '#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: '#00AF3B',
     successShade2: '#009B35',
     successTint0: transparentize(0.95, success),
     successTint1: transparentize(0.9, success),
     successTint2: transparentize(0.8, success),
+    successTint3: transparentize(0.7, success),
+    successTint4: transparentize(0.6, success),
     grayscale0: transparentize(0.95, grayVal),
     grayscale1: transparentize(0.9, grayVal),
     grayscale2: transparentize(0.8, grayVal),