oneslash-design-system 1.3.4 → 1.4.0

package/dist/components/alert.jsx

@@ -1,21 +1,18 @@
 'use client';
 import React, { useEffect, useState } from 'react';
 import IconButton from './iconButton';
-import useDarkMode from './useDarkMode';
-var bgColorMap = {
-    error: { light: '#F2C4C4', dark: '#5C1A1A' },
-    warning: { light: '#F5D5B0', dark: '#5C2E0A' },
-    info: { light: '#B8D9F0', dark: '#0A3A5C' },
-    success: { light: '#C4E2C5', dark: '#1A4A1D' },
-    default: { light: '#D1D1D1', dark: '#6D6D6D' },
+var bgClassMap = {
+    error: 'bg-light-error-alertBg dark:bg-dark-error-alertBg',
+    warning: 'bg-light-warning-alertBg dark:bg-dark-warning-alertBg',
+    info: 'bg-light-info-alertBg dark:bg-dark-info-alertBg',
+    success: 'bg-light-success-alertBg dark:bg-dark-success-alertBg',
+    default: 'bg-light-secondary-light dark:bg-dark-secondary-light',
 };
-var textColorMap = { light: '#000000', dark: '#eeeeee' };
 export default function Alert(_a) {
     var _b;
     var _c = _a.open, open = _c === void 0 ? true : _c, type = _a.type, message = _a.message, secondMessage = _a.secondMessage, onClose = _a.onClose, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? 'toast' : _e;
     var _f = useState(false), isVisible = _f[0], setIsVisible = _f[1];
     var _g = useState(false), shouldRender = _g[0], setShouldRender = _g[1];
-    var isDark = useDarkMode();
     useEffect(function () {
         if (open) {
             setShouldRender(true);
@@ -52,12 +49,9 @@ export default function Alert(_a) {
     };
     if (!shouldRender)
         return null;
-    var mode = isDark ? 'dark' : 'light';
-    var entry = (_b = bgColorMap[type]) !== null && _b !== void 0 ? _b : bgColorMap.default;
-    var backgroundColor = entry[mode];
-    var textColor = textColorMap[mode];
-    var alertContent = (<div className={"flex items-start justify-between w-full p-2 rounded-[8px] transition-opacity duration-200 ease-out ".concat(isVisible ? 'opacity-100' : 'opacity-0', " ").concat(variant === 'toast' ? 'max-w-md pointer-events-auto' : '')} style={{ backgroundColor: backgroundColor }}>
-      <div className="flex items-start gap-2" style={{ color: textColor }}>
+    var bgClasses = (_b = bgClassMap[type]) !== null && _b !== void 0 ? _b : bgClassMap.default;
+    var alertContent = (<div className={"flex items-start justify-between w-full p-2 rounded-[8px] transition-opacity duration-200 ease-out ".concat(bgClasses, " ").concat(isVisible ? 'opacity-100' : 'opacity-0', " ").concat(variant === 'toast' ? 'max-w-md pointer-events-auto' : '')}>
+      <div className="flex items-start gap-2 text-light-text-primary dark:text-dark-text-primary">
         <div className="flex flex-col text-left">
           <span className="text-body2">{message}</span>
           {secondMessage && (<span className="text-body2 opacity-70">{secondMessage}</span>)}

package/dist/components/button.jsx

@@ -108,7 +108,7 @@ export default function Button(_a) {
             textOnly: 'text-light-text-primary dark:text-dark-text-primary',
         },
         danger: {
-            primary: 'bg-light-error-main dark:bg-dark-error-main text-white dark:text-white',
+            primary: 'bg-light-error-main dark:bg-dark-error-main text-light-error-contrast dark:text-dark-error-contrast',
             secondary: 'bg-light-error-light dark:bg-dark-error-light text-light-error-main dark:text-dark-error-main',
             tertiary: 'bg-transparent border border-light-error-main dark:border-dark-error-main text-light-error-main dark:text-dark-error-main',
             textOnly: 'text-light-error-main dark:text-dark-error-main',

package/dist/components/menuItem.d.ts

@@ -2,6 +2,7 @@ import React, { JSX } from 'react';
 interface MenuItemProps {
     href?: string;
     iconName?: string;
+    icon?: React.ReactNode;
     userHandle?: string;
     userImgUrl?: string;
     label: string;
@@ -19,5 +20,5 @@ interface MenuItemProps {
     iconRight?: string;
     rightAction?: React.ReactNode;
 }
-export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, secondLabel, isSelected, onClick, className, size, tag, iconRight, rightAction, }: MenuItemProps): JSX.Element;
+export default function MenuItem({ href, iconName, icon, userHandle, userImgUrl, label, secondLabel, isSelected, onClick, className, size, tag, iconRight, rightAction, }: MenuItemProps): JSX.Element;
 export {};

package/dist/components/menuItem.jsx

@@ -41,7 +41,7 @@ import UserImage from './userImage';
 import Tag from './tag';
 export default function MenuItem(_a) {
     var _this = this;
-    var href = _a.href, iconName = _a.iconName, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, secondLabel = _a.secondLabel, isSelected = _a.isSelected, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, tag = _a.tag, iconRight = _a.iconRight, rightAction = _a.rightAction;
+    var href = _a.href, iconName = _a.iconName, icon = _a.icon, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, secondLabel = _a.secondLabel, isSelected = _a.isSelected, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, tag = _a.tag, iconRight = _a.iconRight, rightAction = _a.rightAction;
     var _d = useState(null), IconLeft = _d[0], setIconLeft = _d[1];
     var _e = useState(null), IconRight = _e[0], setIconRight = _e[1];
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
@@ -101,7 +101,7 @@ export default function MenuItem(_a) {
             : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200', "\n        ").concat(className, "\n      ")} style={{ width: '100%' }} onClick={onClick}>
       {/* Left group: icon/userImg + label with 8px gap */}
       <div className="flex items-center gap-2 min-w-0">
-        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " flex-shrink-0 ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary')} strokeWidth={2}/>))}
+        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : icon ? (<span className={"".concat(iconSize, " flex-shrink-0 flex items-center justify-center")}>{icon}</span>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " flex-shrink-0 ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary')} strokeWidth={2}/>))}
         <div className="flex flex-col min-w-0">
           <span className={"truncate ".concat(labelClass, " ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-primary dark:text-dark-text-primary')}>
             {label}

package/dist/components/modal.jsx

@@ -31,7 +31,7 @@ export default function Modal(_a) {
     };
     if (!isOpen)
         return null;
-    return (<div className="fixed bg-black bg-opacity-50 flex items-center justify-center z-50" style={{ top: 0, left: 0, right: 0, bottom: 0 }} onClick={handleOverlayClick} role="dialog" aria-labelledby="modal-title" aria-modal="true" tabIndex={-1}>
+    return (<div className="fixed bg-light-misc-scrim/40 dark:bg-dark-misc-scrim/40 flex items-center justify-center z-50" style={{ top: 0, left: 0, right: 0, bottom: 0 }} onClick={handleOverlayClick} role="dialog" aria-labelledby="modal-title" aria-modal="true" tabIndex={-1}>
       <div className={"bg-light-background-default dark:bg-dark-background-default rounded-[8px] ".concat(modalWidth, " flex flex-col")} style={{
             maxWidth: maxWidth,
             width: 'calc(100vw - 64px)',

package/dist/components/tag.jsx

@@ -12,7 +12,7 @@ var colorConfig = {
     },
     success: {
         bg: 'bg-light-success-main dark:bg-dark-success-main',
-        text: 'text-white dark:text-dark-text-primary',
+        text: 'text-light-success-contrast dark:text-dark-text-primary',
         textOnly: 'text-light-success-main dark:text-dark-success-main',
         border: 'border-light-success-main dark:border-dark-success-main',
         dot: 'bg-light-success-main dark:bg-dark-success-main',
@@ -20,7 +20,7 @@ var colorConfig = {
     },
     warning: {
         bg: 'bg-light-warning-main dark:bg-dark-warning-main',
-        text: 'text-white dark:text-dark-text-primary',
+        text: 'text-light-warning-contrast dark:text-dark-text-primary',
         textOnly: 'text-light-warning-main dark:text-dark-warning-main',
         border: 'border-light-warning-main dark:border-dark-warning-main',
         dot: 'bg-light-warning-main dark:bg-dark-warning-main',
@@ -28,7 +28,7 @@ var colorConfig = {
     },
     error: {
         bg: 'bg-light-error-main dark:bg-dark-error-main',
-        text: 'text-white dark:text-dark-text-primary',
+        text: 'text-light-error-contrast dark:text-dark-text-primary',
         textOnly: 'text-light-error-main dark:text-dark-error-main',
         border: 'border-light-error-main dark:border-dark-error-main',
         dot: 'bg-light-error-main dark:bg-dark-error-main',
@@ -36,7 +36,7 @@ var colorConfig = {
     },
     info: {
         bg: 'bg-light-info-main dark:bg-dark-info-main',
-        text: 'text-white dark:text-dark-text-primary',
+        text: 'text-light-info-contrast dark:text-dark-text-primary',
         textOnly: 'text-light-info-main dark:text-dark-info-main',
         border: 'border-light-info-main dark:border-dark-info-main',
         dot: 'bg-light-info-main dark:bg-dark-info-main',
@@ -77,7 +77,8 @@ export default function Tag(_a) {
         fontClasses = variant === 'textOnly' ? colorStyles.textOnly : colorStyles.text;
     }
     else if (isSelected) {
-        fontClasses = 'text-white';
+        // Selected tags sit on accent-main — use the accent contrast token
+        fontClasses = 'text-light-accent-contrast dark:text-dark-accent-contrast';
     }
     else {
         fontClasses = 'text-light-text-primary dark:text-dark-text-primary';

package/dist/components/tooltip.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 interface TooltipProps {
     title: string;
     children: React.ReactElement;
+    /** Force placement. If omitted, auto-detects based on available space. */
+    placement?: 'top' | 'bottom';
 }
-export default function Tooltip({ title, children }: TooltipProps): React.JSX.Element;
+export default function Tooltip({ title, children, placement }: TooltipProps): React.JSX.Element;
 export {};

package/dist/components/tooltip.jsx

@@ -1,9 +1,9 @@
 'use client';
 import React, { useState, useRef, useEffect } from 'react';
 export default function Tooltip(_a) {
-    var title = _a.title, children = _a.children;
+    var title = _a.title, children = _a.children, placement = _a.placement;
     var _b = useState(false), visible = _b[0], setVisible = _b[1];
-    var _c = useState('bottom'), position = _c[0], setPosition = _c[1];
+    var _c = useState(placement !== null && placement !== void 0 ? placement : 'bottom'), position = _c[0], setPosition = _c[1];
     var tooltipRef = useRef(null);
     var buttonRef = useRef(null);
     useEffect(function () {
@@ -11,8 +11,11 @@ export default function Tooltip(_a) {
             if (tooltipRef.current && buttonRef.current) {
                 var tooltipRect = tooltipRef.current.getBoundingClientRect();
                 var buttonRect = buttonRef.current.getBoundingClientRect();
-                // Check if there's enough space below; if not, place tooltip above
-                if (window.innerHeight - buttonRect.bottom < tooltipRect.height + 8) {
+                // If placement is forced, skip auto-detection
+                if (placement) {
+                    setPosition(placement);
+                }
+                else if (window.innerHeight - buttonRect.bottom < tooltipRect.height + 8) {
                     setPosition('top');
                 }
                 else {
@@ -23,7 +26,7 @@ export default function Tooltip(_a) {
         if (visible) {
             handlePosition();
         }
-    }, [visible]);
+    }, [visible, placement]);
     var handleClick = function () {
         setVisible(false); // Hide tooltip on click
     };

package/dist/components/userImage.jsx

@@ -27,6 +27,8 @@ export default function UserImage(_a) {
     var seed = getColorSeed(userHandle);
     var hue = Math.abs(getHash(seed)) % 360;
     var saturation = grayscale ? 0 : 80;
+    // DESIGN-TOKEN EXCEPTION: avatar backgrounds are derived from a hash of the
+    // user handle (per-user identity color), so they cannot map to a static token.
     // Light mode: vibrant pastel
     var lightBg = "hsl(".concat(hue, ", ").concat(saturation, "%, 80%)");
     // Dark mode: darker, vibrant variant

package/dist/designTokens.d.ts

@@ -40,6 +40,8 @@ export namespace colors {
             let light_4: string;
             export { light_4 as light };
             export let alertBg: string;
+            let contrast_2: string;
+            export { contrast_2 as contrast };
         }
         export namespace warning {
             let main_4: string;
@@ -50,6 +52,8 @@ export namespace colors {
             export { light_5 as light };
             let alertBg_1: string;
             export { alertBg_1 as alertBg };
+            let contrast_3: string;
+            export { contrast_3 as contrast };
         }
         export namespace info {
             let main_5: string;
@@ -60,6 +64,8 @@ export namespace colors {
             export { light_6 as light };
             let alertBg_2: string;
             export { alertBg_2 as alertBg };
+            let contrast_4: string;
+            export { contrast_4 as contrast };
         }
         export namespace success {
             let main_6: string;
@@ -70,6 +76,8 @@ export namespace colors {
             export { light_7 as light };
             let alertBg_3: string;
             export { alertBg_3 as alertBg };
+            let contrast_5: string;
+            export { contrast_5 as contrast };
         }
         export namespace background {
             let _default: string;
@@ -106,6 +114,7 @@ export namespace colors {
         }
         export namespace misc {
             let divider: string;
+            let scrim: string;
         }
     }
     export namespace dark_7 {
@@ -116,8 +125,8 @@ export namespace colors {
             export { secondary_2 as secondary };
             let disabled_4: string;
             export { disabled_4 as disabled };
-            let contrast_2: string;
-            export { contrast_2 as contrast };
+            let contrast_6: string;
+            export { contrast_6 as contrast };
         }
         export { text_1 as text };
         export namespace accent_1 {
@@ -127,8 +136,8 @@ export namespace colors {
             export { dark_8 as dark };
             let light_8: string;
             export { light_8 as light };
-            let contrast_3: string;
-            export { contrast_3 as contrast };
+            let contrast_7: string;
+            export { contrast_7 as contrast };
         }
         export { accent_1 as accent };
         export namespace primary_3 {
@@ -158,6 +167,8 @@ export namespace colors {
             export { light_11 as light };
             let alertBg_4: string;
             export { alertBg_4 as alertBg };
+            let contrast_8: string;
+            export { contrast_8 as contrast };
         }
         export { error_1 as error };
         export namespace warning_1 {
@@ -169,6 +180,8 @@ export namespace colors {
             export { light_12 as light };
             let alertBg_5: string;
             export { alertBg_5 as alertBg };
+            let contrast_9: string;
+            export { contrast_9 as contrast };
         }
         export { warning_1 as warning };
         export namespace info_1 {
@@ -180,6 +193,8 @@ export namespace colors {
             export { light_13 as light };
             let alertBg_6: string;
             export { alertBg_6 as alertBg };
+            let contrast_10: string;
+            export { contrast_10 as contrast };
         }
         export { info_1 as info };
         export namespace success_1 {
@@ -191,6 +206,8 @@ export namespace colors {
             export { light_14 as light };
             let alertBg_7: string;
             export { alertBg_7 as alertBg };
+            let contrast_11: string;
+            export { contrast_11 as contrast };
         }
         export { success_1 as success };
         export namespace background_1 {
@@ -242,6 +259,8 @@ export namespace colors {
         export namespace misc_1 {
             let divider_1: string;
             export { divider_1 as divider };
+            let scrim_1: string;
+            export { scrim_1 as scrim };
         }
         export { misc_1 as misc };
     }

package/dist/designTokens.js

@@ -31,24 +31,28 @@ module.exports = {
                 dark: '#B22323',
                 light: '#F27777',
                 alertBg: '#F2C4C4',
+                contrast: '#FFFFFF',
             },
             warning: {
                 main: '#EF6C00',
                 dark: '#CC5302',
                 light: '#FFA732',
                 alertBg: '#F5D5B0',
+                contrast: '#FFFFFF',
             },
             info: {
                 main: '#0087D4',
                 dark: '#006BAB',
                 light: '#2CC1FF',
                 alertBg: '#B8D9F0',
+                contrast: '#FFFFFF',
             },
             success: {
                 main: '#328736',
                 dark: '#2A6B2D',
                 light: '#67C16B',
                 alertBg: '#C4E2C5',
+                contrast: '#FFFFFF',
             },
             background: {
                 default: '#e8e8e8',
@@ -77,6 +81,7 @@ module.exports = {
             },
             misc: {
                 divider: '#D1D1D1',
+                scrim: '#000000',
             },
         },
         // dark
@@ -108,24 +113,28 @@ module.exports = {
                 dark: '#B22323',
                 light: '#F27777',
                 alertBg: '#5C1A1A',
+                contrast: '#FFFFFF',
             },
             warning: {
                 main: '#FF8C0A',
                 dark: '#CC5302',
                 light: '#FFA732',
                 alertBg: '#5C2E0A',
+                contrast: '#FFFFFF',
             },
             info: {
                 main: '#00AFFF',
                 dark: '#006BAB',
                 light: '#2CC1FF',
                 alertBg: '#0A3A5C',
+                contrast: '#FFFFFF',
             },
             success: {
                 main: '#42A547',
                 dark: '#2A6B2D',
                 light: '#67C16B',
                 alertBg: '#1A4A1D',
+                contrast: '#FFFFFF',
             },
             background: {
                 default: '#262626',
@@ -154,6 +163,7 @@ module.exports = {
             },
             misc: {
                 divider: '#404040',
+                scrim: '#000000',
             },
         },
     },

package/dist/output.css

@@ -548,6 +548,9 @@ video {
 .visible{
   visibility: visible;
 }
+.static{
+  position: static;
+}
 .fixed{
   position: fixed;
 }
@@ -872,10 +875,6 @@ video {
 .bg-\[var\(--light-bg\)\]{
   background-color: var(--light-bg);
 }
-.bg-black{
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
 .bg-dark-background-accent300{
   --tw-bg-opacity: 1;
   background-color: rgb(79 79 79 / var(--tw-bg-opacity));
@@ -908,6 +907,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(232 232 232 / var(--tw-bg-opacity));
 }
+.bg-light-error-alertBg{
+  --tw-bg-opacity: 1;
+  background-color: rgb(242 196 196 / var(--tw-bg-opacity));
+}
 .bg-light-error-light{
   --tw-bg-opacity: 1;
   background-color: rgb(242 119 119 / var(--tw-bg-opacity));
@@ -916,6 +919,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(211 47 47 / var(--tw-bg-opacity));
 }
+.bg-light-info-alertBg{
+  --tw-bg-opacity: 1;
+  background-color: rgb(184 217 240 / var(--tw-bg-opacity));
+}
 .bg-light-info-main{
   --tw-bg-opacity: 1;
   background-color: rgb(0 135 212 / var(--tw-bg-opacity));
@@ -924,6 +931,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 209 209 / var(--tw-bg-opacity));
 }
+.bg-light-misc-scrim\/40{
+  background-color: rgb(0 0 0 / 0.4);
+}
 .bg-light-primary-dark{
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
@@ -936,6 +946,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(176 176 176 / var(--tw-bg-opacity));
 }
+.bg-light-success-alertBg{
+  --tw-bg-opacity: 1;
+  background-color: rgb(196 226 197 / var(--tw-bg-opacity));
+}
 .bg-light-success-main{
   --tw-bg-opacity: 1;
   background-color: rgb(50 135 54 / var(--tw-bg-opacity));
@@ -952,6 +966,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(109 109 109 / var(--tw-bg-opacity));
 }
+.bg-light-warning-alertBg{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 213 176 / var(--tw-bg-opacity));
+}
 .bg-light-warning-main{
   --tw-bg-opacity: 1;
   background-color: rgb(239 108 0 / var(--tw-bg-opacity));
@@ -959,9 +977,6 @@ video {
 .bg-transparent{
   background-color: transparent;
 }
-.bg-opacity-50{
-  --tw-bg-opacity: 0.5;
-}
 .object-cover{
   object-fit: cover;
 }
@@ -1043,18 +1058,34 @@ video {
   --tw-text-opacity: 1;
   color: rgb(238 238 238 / var(--tw-text-opacity));
 }
+.text-light-accent-contrast{
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
 .text-light-accent-main{
   --tw-text-opacity: 1;
   color: rgb(238 174 3 / var(--tw-text-opacity));
 }
+.text-light-error-contrast{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .text-light-error-main{
   --tw-text-opacity: 1;
   color: rgb(211 47 47 / var(--tw-text-opacity));
 }
+.text-light-info-contrast{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .text-light-info-main{
   --tw-text-opacity: 1;
   color: rgb(0 135 212 / var(--tw-text-opacity));
 }
+.text-light-success-contrast{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .text-light-success-main{
   --tw-text-opacity: 1;
   color: rgb(50 135 54 / var(--tw-text-opacity));
@@ -1075,13 +1106,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(109 109 109 / var(--tw-text-opacity));
 }
-.text-light-warning-main{
+.text-light-warning-contrast{
   --tw-text-opacity: 1;
-  color: rgb(239 108 0 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.text-white{
+.text-light-warning-main{
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(239 108 0 / var(--tw-text-opacity));
 }
 .underline{
   text-decoration-line: underline;
@@ -1415,6 +1446,11 @@ body {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dark-error-alertBg:is(.dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(92 26 26 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-dark-error-light:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(242 119 119 / var(--tw-bg-opacity));
@@ -1425,6 +1461,11 @@ body {
   background-color: rgb(231 76 76 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dark-info-alertBg:is(.dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(10 58 92 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-dark-info-main:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(0 175 255 / var(--tw-bg-opacity));
@@ -1435,6 +1476,10 @@ body {
   background-color: rgb(64 64 64 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dark-misc-scrim\/40:is(.dark *){
+  background-color: rgb(0 0 0 / 0.4);
+}
+
 .dark\:bg-dark-primary-dark:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(233 233 233 / var(--tw-bg-opacity));
@@ -1450,6 +1495,11 @@ body {
   background-color: rgb(79 79 79 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dark-success-alertBg:is(.dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 74 29 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-dark-success-main:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(66 165 71 / var(--tw-bg-opacity));
@@ -1470,6 +1520,11 @@ body {
   background-color: rgb(176 176 176 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dark-warning-alertBg:is(.dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(92 46 10 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-dark-warning-main:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(255 140 10 / var(--tw-bg-opacity));
@@ -1480,11 +1535,21 @@ body {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.dark\:text-dark-accent-contrast:is(.dark *){
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .dark\:text-dark-accent-main:is(.dark *){
   --tw-text-opacity: 1;
   color: rgb(255 205 41 / var(--tw-text-opacity));
 }
 
+.dark\:text-dark-error-contrast:is(.dark *){
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .dark\:text-dark-error-main:is(.dark *){
   --tw-text-opacity: 1;
   color: rgb(231 76 76 / var(--tw-text-opacity));
@@ -1530,11 +1595,6 @@ body {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.dark\:text-white:is(.dark *){
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .dark\:outline-dark-accent-main:is(.dark *){
   outline-color: #FFCD29;
 }

package/dist/stories/MenuItem.stories.d.ts

@@ -11,3 +11,4 @@ export declare const WithTagColor: Story;
 export declare const WithUserImage: Story;
 export declare const SmallSize: Story;
 export declare const WithRightAction: Story;
+export declare const WithCustomIcon: Story;

package/dist/stories/MenuItem.stories.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import MenuItem from "../components/menuItem";
 import IconButton from "../components/iconButton";
 var meta = {
@@ -77,3 +78,13 @@ export var WithRightAction = {
         rightAction: <IconButton iconName="X" size="small" color="tertiary" state="enabled" onClick={function () { return alert('Remove clicked'); }}/>,
     },
 };
+export var WithCustomIcon = {
+    args: {
+        label: "Brand Item",
+        icon: (<svg viewBox="0 0 16 16" className="w-4 h-4 fill-current">
+        <rect x="2" y="2" width="12" height="12" rx="3"/>
+      </svg>),
+        size: "small",
+        isSelected: false,
+    },
+};