@wavv/ui 2.2.2-alpha.8 → 2.2.3

package/build/assets/icons/PersonSupport.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+declare const PersonSupport: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default PersonSupport;

package/build/assets/icons/PersonSupport.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const PersonSupport = (props)=>/*#__PURE__*/ jsxs("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M20 22.5001C20 20.7433 19.4221 19.0461 18.3717 17.6626",
+                stroke: "currentColor",
+                strokeWidth: 1.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M16.584 7.49998C15.8124 5.73409 14.0503 4.5 12 4.5C10.0209 4.5 8.31036 5.64984 7.5 7.31792",
+                stroke: "currentColor",
+                strokeWidth: 1.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M4 22.4999C4 20.3781 4.84286 18.3433 6.34315 16.843C7.84344 15.3428 9.87827 14.4999 12 14.4999M12 14.4999C13.576 14.4999 14.9818 13.7707 15.8982 12.6313M12 14.4999C10.6013 14.4999 9.33675 13.9256 8.42928 12.9999",
+                stroke: "currentColor",
+                strokeWidth: 1.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M5 7.79996H7.33333C7.74589 7.79996 8.14155 7.94746 8.43328 8.21C8.725 8.47255 8.88889 8.82865 8.88889 9.19995V11.2999C8.88889 11.6712 8.725 12.0273 8.43328 12.2899C8.14155 12.5524 7.74589 12.6999 7.33333 12.6999H6.55556C6.143 12.6999 5.74733 12.5524 5.45561 12.2899C5.16389 12.0273 5 11.6712 5 11.2999V7.79996ZM5 7.79996C5 6.97263 5.18106 6.15341 5.53284 5.38907C5.88463 4.62472 6.40024 3.93022 7.05025 3.34521C7.70026 2.76021 8.47194 2.29616 9.32122 1.97956C10.1705 1.66295 11.0807 1.5 12 1.5C12.9193 1.5 13.8295 1.66295 14.6788 1.97956C15.5281 2.29616 16.2997 2.76021 16.9497 3.34521C17.5998 3.93022 18.1154 4.62472 18.4672 5.38907C18.8189 6.15341 19 6.97263 19 7.79996M19 7.79996V11.2999M19 7.79996H16.6667C16.2541 7.79996 15.8584 7.94746 15.5667 8.21C15.275 8.47255 15.1111 8.82865 15.1111 9.19995V11.2999C15.1111 11.6712 15.275 12.0273 15.5667 12.2899C15.8584 12.5524 16.2541 12.6999 16.6667 12.6999H17.4444C17.857 12.6999 18.2527 12.5524 18.5444 12.2899C18.8361 12.0273 19 11.6712 19 11.2999M19 11.2999V12.6999C19 13.4425 18.5383 14.6547 17.9548 15.1798C17.3714 15.7049 16.3251 16.4999 15.5 16.4999H14.2451",
+                stroke: "currentColor",
+                strokeWidth: 1.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        ]
+    });
+const icons_PersonSupport = PersonSupport;
+export { icons_PersonSupport as default };

package/build/components/ChartHelpers.d.ts

@@ -1,4 +1,4 @@
-import { type LegendPayload, type TooltipContentProps, type ResponsiveContainerProps } from 'recharts';
+import { type LegendPayload, type ResponsiveContainerProps, type TooltipContentProps } from 'recharts';
 import type { Attributes } from './typeDefs/elementTypes';
 import type { Margin, MaxWidthHeight, WidthHeight } from './types';
 type ChartData = {

package/build/components/Icon/customIcons.d.ts

@@ -8,6 +8,7 @@ declare const customIcons: {
     'caret-up': typeof CaretUp;
     dialpad: typeof Dialpad;
     exclamation: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    'person-support': (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     phone: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     'phone-add': (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     'phone-blocked': (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/build/components/Icon/customIcons.js

@@ -2,6 +2,7 @@ import CaretDown from "../../assets/icons/CaretDown.js";
 import CaretUp from "../../assets/icons/CaretUp.js";
 import Dialpad from "../../assets/icons/Dialpad.js";
 import Exclamation from "../../assets/icons/Exclamation.js";
+import PersonSupport from "../../assets/icons/PersonSupport.js";
 import Phone from "../../assets/icons/Phone.js";
 import PhoneAdd from "../../assets/icons/PhoneAdd.js";
 import PhoneBlocked from "../../assets/icons/PhoneBlocked.js";
@@ -25,6 +26,7 @@ const customIcons_customIcons = {
     'caret-up': CaretUp,
     dialpad: Dialpad,
     exclamation: Exclamation,
+    'person-support': PersonSupport,
     phone: Phone,
     'phone-add': PhoneAdd,
     'phone-blocked': PhoneBlocked,

package/build/components/Icon/icons.d.ts

@@ -2,7 +2,6 @@ declare const icons: {
     readonly 'activity-history': "id-card";
     readonly add: "plus";
     readonly 'add-circle': "circle-plus";
-    readonly 'add-person': "user-round-plus";
     readonly 'arrow-down': "arrow-down";
     readonly 'arrow-left': "arrow-left";
     readonly 'arrow-right': "arrow-right";
@@ -101,6 +100,7 @@ declare const icons: {
     readonly pause: "pause";
     readonly 'pause-circle': "circle-pause";
     readonly person: "user-round";
+    readonly 'person-add': "user-round-plus";
     readonly play: "play";
     readonly 'play-circle': "circle-play";
     readonly priority: "arrow-up-wide-narrow";

package/build/components/Icon/icons.js

@@ -2,7 +2,6 @@ const icons = {
     'activity-history': 'id-card',
     add: 'plus',
     'add-circle': 'circle-plus',
-    'add-person': 'user-round-plus',
     'arrow-down': 'arrow-down',
     'arrow-left': 'arrow-left',
     'arrow-right': 'arrow-right',
@@ -101,6 +100,7 @@ const icons = {
     pause: 'pause',
     'pause-circle': 'circle-pause',
     person: 'user-round',
+    'person-add': 'user-round-plus',
     play: 'play',
     'play-circle': 'circle-play',
     priority: 'arrow-up-wide-narrow',

package/build/components/ToggleButton/ToggleButton.js

@@ -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',

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),

package/build/theme/core/dark/dark.js

@@ -3,7 +3,7 @@ import colors from "../colors.js";
 import darkScale from "./darkScale.js";
 const white = '#FFFFFF';
 const accent = colors.brandDark;
-const dark = {
+const dark_dark = {
     ...common,
     ...darkScale,
     name: 'dark',
@@ -277,6 +277,111 @@ const dark = {
             default: white
         }
     },
+    toggleButton: {
+        ...index_js_button,
+        primary: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.brandTint0,
+                hover: colors.brandTint2,
+                active: colors.brandTint4
+            },
+            border: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            }
+        },
+        secondary: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: darkScale.scale0,
+                hover: darkScale.scale1,
+                active: darkScale.scale3
+            },
+            border: {
+                default: darkScale.background5,
+                hover: darkScale.background5,
+                active: darkScale.background5
+            }
+        },
+        negative: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.errorTint0,
+                hover: colors.errorTint2,
+                active: colors.errorTint4
+            },
+            border: {
+                default: colors.error,
+                hover: colors.error,
+                active: colors.error
+            }
+        },
+        positive: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.successTint0,
+                hover: colors.successTint2,
+                active: colors.successTint4
+            },
+            border: {
+                default: colors.success,
+                hover: colors.success,
+                active: colors.success
+            }
+        },
+        caution: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.warningTint0,
+                hover: colors.warningTint2,
+                active: colors.warningTint4
+            },
+            border: {
+                default: colors.warning,
+                hover: colors.warning,
+                active: colors.warning
+            }
+        },
+        disabled: {
+            color: {
+                default: darkScale.scale4,
+                hover: darkScale.scale4,
+                active: darkScale.scale4
+            },
+            background: {
+                default: darkScale.scale0,
+                hover: darkScale.scale0,
+                active: darkScale.scale0
+            },
+            border: {
+                default: darkScale.scale1,
+                hover: darkScale.scale1,
+                active: darkScale.scale1
+            }
+        }
+    },
     calendar: {
         background: {
             container: colors.brandBackground3,
@@ -453,5 +558,5 @@ const dark = {
         }
     }
 };
-const dark_dark = dark;
-export { dark_dark as default };
+const dark = dark_dark;
+export { dark as default };

package/build/theme/core/light/light.js

@@ -276,6 +276,111 @@ const light_light = {
             default: white
         }
     },
+    toggleButton: {
+        ...index_js_button,
+        primary: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.brandTint0,
+                hover: colors.brandTint2,
+                active: colors.brandTint4
+            },
+            border: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            }
+        },
+        secondary: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: lightScale.scale0,
+                hover: lightScale.scale1,
+                active: lightScale.scale3
+            },
+            border: {
+                default: lightScale.background5,
+                hover: lightScale.background5,
+                active: lightScale.background5
+            }
+        },
+        negative: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.errorTint0,
+                hover: colors.errorTint2,
+                active: colors.errorTint4
+            },
+            border: {
+                default: colors.error,
+                hover: colors.error,
+                active: colors.error
+            }
+        },
+        positive: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.successTint0,
+                hover: colors.successTint2,
+                active: colors.successTint4
+            },
+            border: {
+                default: colors.success,
+                hover: colors.success,
+                active: colors.success
+            }
+        },
+        caution: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.warningTint0,
+                hover: colors.warningTint2,
+                active: colors.warningTint4
+            },
+            border: {
+                default: colors.warning,
+                hover: colors.warning,
+                active: colors.warning
+            }
+        },
+        disabled: {
+            color: {
+                default: lightScale.scale4,
+                hover: lightScale.scale4,
+                active: lightScale.scale4
+            },
+            background: {
+                default: lightScale.scale0,
+                hover: lightScale.scale0,
+                active: lightScale.scale0
+            },
+            border: {
+                default: lightScale.scale1,
+                hover: lightScale.scale1,
+                active: lightScale.scale1
+            }
+        }
+    },
     calendar: {
         background: {
             container: colors.contrast10,

package/build/theme/eighties/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;

package/build/theme/eighties/colors.js

@@ -33,24 +33,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: '#E6AF00',
     warningShade2: '#CC9B00',
     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',
     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',
     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),

package/build/theme/eighties/dark/dark.js

@@ -3,7 +3,7 @@ import colors from "../colors.js";
 import darkScale from "./darkScale.js";
 const white = '#FFFFFF';
 const accent = colors.brandDark;
-const dark = {
+const dark_dark = {
     ...common,
     ...darkScale,
     name: 'dark',
@@ -277,6 +277,111 @@ const dark = {
             default: white
         }
     },
+    toggleButton: {
+        ...index_js_button,
+        primary: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.brandTint0,
+                hover: colors.brandTint2,
+                active: colors.brandTint4
+            },
+            border: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            }
+        },
+        secondary: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: darkScale.scale0,
+                hover: darkScale.scale1,
+                active: darkScale.scale3
+            },
+            border: {
+                default: darkScale.background5,
+                hover: darkScale.background5,
+                active: darkScale.background5
+            }
+        },
+        negative: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.errorTint0,
+                hover: colors.errorTint2,
+                active: colors.errorTint4
+            },
+            border: {
+                default: colors.error,
+                hover: colors.error,
+                active: colors.error
+            }
+        },
+        positive: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.successTint0,
+                hover: colors.successTint2,
+                active: colors.successTint4
+            },
+            border: {
+                default: colors.success,
+                hover: colors.success,
+                active: colors.success
+            }
+        },
+        caution: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.warningTint0,
+                hover: colors.warningTint2,
+                active: colors.warningTint4
+            },
+            border: {
+                default: colors.warning,
+                hover: colors.warning,
+                active: colors.warning
+            }
+        },
+        disabled: {
+            color: {
+                default: darkScale.scale4,
+                hover: darkScale.scale4,
+                active: darkScale.scale4
+            },
+            background: {
+                default: darkScale.scale0,
+                hover: darkScale.scale0,
+                active: darkScale.scale0
+            },
+            border: {
+                default: darkScale.scale1,
+                hover: darkScale.scale1,
+                active: darkScale.scale1
+            }
+        }
+    },
     calendar: {
         background: {
             container: colors.brandBackground3,
@@ -453,5 +558,5 @@ const dark = {
         }
     }
 };
-const dark_dark = dark;
-export { dark_dark as default };
+const dark = dark_dark;
+export { dark as default };

package/build/theme/eighties/light/light.js

@@ -276,6 +276,111 @@ const light_light = {
             default: white
         }
     },
+    toggleButton: {
+        ...index_js_button,
+        primary: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.brandTint0,
+                hover: colors.brandTint2,
+                active: colors.brandTint4
+            },
+            border: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            }
+        },
+        secondary: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: lightScale.scale0,
+                hover: lightScale.scale1,
+                active: lightScale.scale3
+            },
+            border: {
+                default: lightScale.background5,
+                hover: lightScale.background5,
+                active: lightScale.background5
+            }
+        },
+        negative: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.errorTint0,
+                hover: colors.errorTint2,
+                active: colors.errorTint4
+            },
+            border: {
+                default: colors.error,
+                hover: colors.error,
+                active: colors.error
+            }
+        },
+        positive: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.successTint0,
+                hover: colors.successTint2,
+                active: colors.successTint4
+            },
+            border: {
+                default: colors.success,
+                hover: colors.success,
+                active: colors.success
+            }
+        },
+        caution: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.warningTint0,
+                hover: colors.warningTint2,
+                active: colors.warningTint4
+            },
+            border: {
+                default: colors.warning,
+                hover: colors.warning,
+                active: colors.warning
+            }
+        },
+        disabled: {
+            color: {
+                default: lightScale.scale4,
+                hover: lightScale.scale4,
+                active: lightScale.scale4
+            },
+            background: {
+                default: lightScale.scale0,
+                hover: lightScale.scale0,
+                active: lightScale.scale0
+            },
+            border: {
+                default: lightScale.scale1,
+                hover: lightScale.scale1,
+                active: lightScale.scale1
+            }
+        }
+    },
     calendar: {
         background: {
             container: colors.contrast10,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.2.2-alpha.8",
+	"version": "2.2.3",
 	"type": "module",
 	"exports": {
 		".": {
@@ -65,12 +65,6 @@
 		"@chromatic-com/storybook": "^4.1.1",
 		"@emotion/babel-plugin": "^11.13.5",
 		"@emotion/react": "^11.14.0",
-		"@mdx-js/react": "^3.1.1",
-		"@mdx-js/rollup": "^3.1.1",
-		"@rollup/plugin-commonjs": "^28.0.9",
-		"@rollup/plugin-node-resolve": "^16.0.3",
-		"@rollup/plugin-terser": "^0.4.4",
-		"@rollup/plugin-typescript": "^11.1.6",
 		"@rsbuild/core": "1.5.17",
 		"@rsbuild/plugin-react": "^1.4.1",
 		"@rsbuild/plugin-svgr": "^1.2.2",
@@ -91,7 +85,6 @@
 		"@types/randomcolor": "^0.5.9",
 		"@types/react": "^19.2.2",
 		"@types/react-dom": "^19.2.2",
-		"@types/rollup-plugin-peer-deps-external": "^2.2.5",
 		"@types/signale": "^1.4.7",
 		"@types/webfontloader": "^1.6.38",
 		"chalk": "^5.6.2",
@@ -110,10 +103,6 @@
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"replace": "^1.2.2",
-		"rollup": "^4.52.5",
-		"rollup-plugin-dts": "^6.2.3",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
 		"signale": "^1.4.0",
 		"storybook": "^9.1.15",
 		"storybook-react-rsbuild": "^2.1.2",
@@ -132,11 +121,8 @@
 		"start": "storybook dev -p 6006",
 		"dev": "rsbuild dev",
 		"preview": "rsbuild preview",
-		"roll-lib": "rollup -c --bundleConfigAsCjs",
 		"generate-tailwind-theme": "pnpm exec tsx scripts/generateThemeCSS.ts",
 		"build:lib": "rm -rf build && rslib build && pnpm run generate-tailwind-theme",
-		"build:watch": "pnpm run roll-lib -w",
-		"build:old": "rm -rf build && pnpm run roll-lib && pnpm run generate-tailwind-theme",
 		"build": "storybook build -o dist --disable-telemetry",
 		"lint": "biome lint",
 		"lint:ts": "tsc -p tsconfig-lint.json --noEmit",