oneslash-design-system 1.1.14 → 1.1.16

package/components/button.tsx

@@ -70,15 +70,15 @@ export default function Button({
   // Define classes for button types
   const baseTypeClasses = {
     primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
-    secondary: 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast',
-    tertiary: 'bg-light-background-accent200 dark:bg-dark-background-accent200 text-light-text-primary dark:text-dark-text-primary',
+    secondary: 'bg-light-secondary-main dark:bg-dark-secondary-main text-light-text-primary dark:text-dark-text-primary',
+    tertiary: 'bg-light-background-accent100 dark:bg-dark-background-accent100 text-light-text-primary dark:text-dark-text-primary',
     textOnly: 'text-light-text-primary dark:text-dark-text-primary',
   }[type];
 
   const hoverTypeClasses = {
     primary: 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark',
-    secondary: 'hover:bg-light-primary-dark dark:hover:bg-dark-primary-dark',
-    tertiary: 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300',
+    secondary: 'hover:bg-light-secondary-dark dark:hover:bg-dark-secondary-dark',
+    tertiary: 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200',
     textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
   }[type];
 

package/components/iconButton.tsx

@@ -1,84 +1,74 @@
 'use client';
-import React, { useState, useEffect, useCallback } from 'react';
-import * as HeroIcons from '@heroicons/react/24/outline';
+import React, { useState } from 'react';
+import * as HeroIcons24 from '@heroicons/react/24/outline';
+import * as HeroIcons20 from '@heroicons/react/20/solid';
 
-interface IconButtonProps{
-  variant: "contained" | "iconOnly";
-  color: "primary" | "secondary";
+interface IconButtonProps {
+  color: "primary" | "secondary" | "tertiary" | "iconOnly";
   state: "enabled" | "selected" | "disabled";
-  iconName: keyof typeof HeroIcons;
+  size: "large" | "medium" | "small";
+  iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
   onClick?: any;
 }
 
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
 export default function IconButton({
-  variant,
   color,
   state,
+  size,
   iconName,
-	onClick,
+  onClick,
 }: IconButtonProps) {
-
   const [isHovered, setIsHovered] = useState(false);
-  const [Icon, setIcon] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
-
-  // import icon
-  const loadIcon = useCallback(async (iconName?: string) => {
-    if (!iconName) return null;
-    try {
-      const module = await import('@heroicons/react/24/outline');
-      const Icon = module[iconName as keyof typeof module] as IconType;
-      return Icon || null;
-    } catch (error) {
-      console.error(`Failed to load icon ${iconName}:`, error);
-      return null;
-    }
-  }, []);
 
-  // Load icons on mount and when props change
-  useEffect(() => {
-    const fetchIcons = async () => {
-      if (typeof iconName === 'string') {
-        setIcon(await loadIcon(iconName));
-      }
-    };
-    fetchIcons();
-  }, [iconName, loadIcon]);
+  // Select icon based on size
+  const Icon: IconType = size === 'small' 
+    ? HeroIcons20[iconName] 
+    : HeroIcons24[iconName];
 
+  // Size-based classes
+  const sizeClasses = {
+    large: 'p-2',  // 8px padding
+    medium: 'p-1', // 4px padding
+    small: 'p-1',  // 4px padding
+  };
 
-  // padding, corner
-  const baseClasses = variant === 'contained' 
-    ? 'p-2 rounded-[8px] leading-none ' 
-    : 'p-2 rounded-[8px] leading-none ';
+  const iconSizeClasses = {
+    large: 'size-6',   // 24px
+    medium: 'size-6',  // 24px
+    small: 'size-5',   // 20px
+  };
 
-  // bg color
-  const bgColor = variant === 'contained'
-    ? color === 'primary' 
-      ? 'bg-light-primary-main dark:bg-dark-primary-main' // contained && primary
-      : 'bg-light-background-accent200 dark:bg-dark-background-accent200' // contained && secondary
-    : color === 'primary' 
-    ? ' ' // textOnly && primary
-    : ' '; // textOnly && secondary
+  // Base classes (padding and corner radius)
+  const baseClasses = `${sizeClasses[size]} rounded-[8px] leading-none`;
 
-  // bg color hover
-	const bgColorHover = variant === 'contained'
-  ? color === 'primary' 
-    ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark'  // contained && primary
-    : 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300'  // contained && secondary
-  : color === 'primary' 
-  ? 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover'  // textOnly && primary
-  : 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover';  // textOnly && secondary
+  // Background color
+  const bgColor = color === 'primary'
+    ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary
+    : color === 'secondary'
+    ? 'bg-light-secondary-main dark:bg-dark-secondary-main' // Secondary
+    : color === 'tertiary'
+    ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' // Tertiary
+    : ' '; // iconOnly: none
 
-  // icon color
-  const iconColor = variant === 'contained'
-    ? color === 'primary' 
-      ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // contained && primary
-      : 'text-light-text-primary dark:text-dark-text-primary' // contained && secondary
-    : color === 'primary'
-    ? ' text-light-text-primary dark:text-dark-text-primary' // textOnly && primary
-    : ' text-light-text-primary dark:text-dark-text-primary'; // textOnly && secondary
+  // Background hover color
+  const bgColorHover = color === 'primary'
+    ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary
+    : color === 'secondary'
+    ? 'hover:bg-light-secondary-dark hover:dark:bg-dark-secondary-dark' // Secondary
+    : color === 'tertiary'
+    ? 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200' // Tertiary
+    : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100'; // iconOnly
 
+  // Icon color
+  const iconColor = color === 'primary'
+    ? 'text-light-text-primary dark:text-dark-text-contrast' // Primary
+    : color === 'secondary'
+    ? 'text-light-text-primary dark:text-dark-text-primary' // Secondary
+    : color === 'tertiary'
+    ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
+    : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
 
   // state
   const stateClasses = state === 'disabled'
@@ -89,17 +79,15 @@ export default function IconButton({
     ? 'cursor-pointer hover:bg-opacity-75'
     : 'cursor-pointer';
 
-  
-
   return (
     <button
-      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses} `}
+      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses}`}
       disabled={state === 'disabled'}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-			onClick={onClick}
-    	>
-        {Icon && <Icon className="size-6" />}
+      onClick={onClick}
+    >
+      {Icon && <Icon className={iconSizeClasses[size]} />}
     </button>
   );
 }

package/components/menuItem.tsx

@@ -70,7 +70,7 @@ export default function MenuItem({
           )}
 
         {/* label */}
-        <span className="whitespace-nowrap text-body1 px-2 text-light-text-primary dark:text-dark-text-primary">
+        <span className="whitespace-nowrap text-body1 px-2 text-light-text-secondary dark:text-dark-text-secondary">
           {label}
         </span>
       </div>

package/components/tabsContainer.tsx

@@ -14,7 +14,7 @@ export default function TabsContainer({
     <div
       className={`
         flex space-x-2 p-1 rounded-[12px]
-        ${tabCount > 0 ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' : 'bg-transparent'}
+        ${tabCount > 0 ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' : 'bg-transparent'}
       `}
     >
       {children}

package/components/tag.tsx

@@ -1,109 +1,81 @@
 'use client';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import * as HeroIcons from '@heroicons/react/24/outline';
 
-interface TagProps{
-  key?: any;
-  variant: "contained" | "textOnly";
-  size: "medium" | "small";
-  state?: "enabled" | "selected" ;
-  label: any;
+interface TagProps {
+  variant: 'contained' | 'textOnly';
+  size: 'medium' | 'small';
+  state?: 'enabled' | 'selected';
+  label: string;
   iconName?: keyof typeof HeroIcons;
-  isDeletable?: keyof typeof HeroIcons;
-  onClick?: any;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
   color?: 'default' | 'info';
 }
 
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
 export default function Tag({
-  key,
   variant,
   size,
-  state,
+  state = 'enabled',
   label,
   iconName,
-  isDeletable,
   onClick,
   color = 'default',
-}: TagProps) {
+}: TagProps): JSX.Element {
   const [isHovered, setIsHovered] = useState(false);
   const [Icon, setIcon] = useState<IconType | null>(null);
-  const [DeleteIcon, setDeleteIcon] = useState<IconType | null>(null);
-
-  const loadIcon = useCallback(async (iconName?: string) => {
-    if (!iconName) return null;
-    try {
-      const module = await import('@heroicons/react/24/outline');
-      const Icon = module[iconName as keyof typeof module] as IconType;
-      return Icon || null;
-    } catch (error) {
-      console.error(`Failed to load icon ${iconName}:`, error);
-      return null;
-    }
-  }, []);
 
+  // Load icon directly from HeroIcons
   useEffect(() => {
-    const fetchIcons = async () => {
-      if (typeof iconName === 'string') {
-        setIcon(await loadIcon(iconName));
-      }
-      if (typeof isDeletable === 'string') {
-        setDeleteIcon(await loadIcon(isDeletable));
-      }
-    };
-    fetchIcons();
-  }, [iconName, isDeletable, loadIcon]);
+    if (iconName) {
+      setIcon(HeroIcons[iconName] as IconType);
+    }
+  }, [iconName]);
 
-  // size and padding
+  // Size and padding
   const sizeClasses = size === 'medium' ? 'text-body2 px-2 py-1' : 'text-caption px-2 py-[3px]';
 
-
-    // bg color
+  // Background color
   const bgClasses = variant === 'contained'
     ? (color === 'info'
-      ? 'bg-light-info-main dark:bg-dark-info-main' // info 
-      : 'bg-light-background-accent200 dark:bg-dark-background-accent200') // default 
-    : ''; // textOnly
+        ? 'bg-light-info-main dark:bg-dark-info-main'
+        : 'bg-light-background-accent300 dark:bg-dark-background-accent300')
+    : '';
 
-  // font color
+  // Font color
   const fontClasses = variant === 'textOnly'
     ? (color === 'info'
-        ? 'text-light-info-main dark:text-dark-info-main' // info
-        : 'text-light-text-primary dark:text-dark-text-primary') // default
-    : 'text-light-text-primary dark:text-dark-text-primary'; // contained
+        ? 'text-light-info-main dark:text-dark-info-main'
+        : 'text-light-text-primary dark:text-dark-text-primary')
+    : 'text-light-text-primary dark:text-dark-text-primary';
 
-  // state
-  const stateClasses = state === 'selected' 
-    ? 'bg-light-accent-main dark:bg-dark-accent-main text-white' 
-    : 'cursor-pointer';
+  // Border for contained variant
+  const borderClasses = variant === 'contained'
+    ? 'border border-light-misc-divider dark:border-dark-misc-divider'
+    : '';
 
-  // hover
-  const hoverClasses = isHovered ? (variant === 'contained' ? 'hover:bg-dark-background-accent300' : '') : '';
+  // State and hover
+  const stateClasses = state === 'selected'
+    ? 'bg-light-accent-main dark:bg-dark-accent-main text-white'
+    : 'cursor-pointer';
+  const hoverClasses = variant === 'contained' && isHovered
+    ? 'bg-light-background-accent200 dark:bg-dark-background-accent200'
+    : '';
 
   return (
     <div
-      className={`flex items-center space-x-1 rounded-full 
-        ${sizeClasses} ${bgClasses} ${fontClasses} ${stateClasses} ${hoverClasses} 
-        transition-colors duration-300 ease-in-out`}
+      className={`
+        flex items-center space-x-1 rounded-full 
+        ${sizeClasses} ${bgClasses} ${fontClasses} ${borderClasses} ${stateClasses} ${hoverClasses}
+        transition-colors duration-300 ease-in-out
+      `}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onClick={onClick}
     >
       {Icon && <Icon className="w-4 h-4" />}
       <span>{label}</span>
-      {isDeletable && (
-        <button
-          className="ml-2 text-red-500"
-          onClick={(e) => {
-            e.stopPropagation();
-            // Handle delete action
-          }}
-        >
-          {DeleteIcon && <DeleteIcon className="w-4 h-4" />}
-        </button>
-        
-      )}
     </div>
   );
 }

package/designTokens.js

@@ -46,9 +46,9 @@ module.exports = {
         light: '#67C16B',
       },
       background:{
-        default: '#F2F2F2',
-        accent100:'#F5F5F5',
-        accent200:'#FAFAFA',
+        default: '#e8e8e8',
+        accent100:'#f1f1f1',
+        accent200:'#f7f7f7',
         accent300:'#FFFFFF',
       },
       action:{

package/dist/components/button.jsx

@@ -106,14 +106,14 @@ export default function Button(_a) {
     // Define classes for button types
     var baseTypeClasses = {
         primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
-        secondary: 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast',
-        tertiary: 'bg-light-background-accent200 dark:bg-dark-background-accent200 text-light-text-primary dark:text-dark-text-primary',
+        secondary: 'bg-light-secondary-main dark:bg-dark-secondary-main text-light-text-primary dark:text-dark-text-primary',
+        tertiary: 'bg-light-background-accent100 dark:bg-dark-background-accent100 text-light-text-primary dark:text-dark-text-primary',
         textOnly: 'text-light-text-primary dark:text-dark-text-primary',
     }[type];
     var hoverTypeClasses = {
         primary: 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark',
-        secondary: 'hover:bg-light-primary-dark dark:hover:bg-dark-primary-dark',
-        tertiary: 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300',
+        secondary: 'hover:bg-light-secondary-dark dark:hover:bg-dark-secondary-dark',
+        tertiary: 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200',
         textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
     }[type];
     // State classes

package/dist/components/iconButton.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import * as HeroIcons from '@heroicons/react/24/outline';
+import * as HeroIcons24 from '@heroicons/react/24/outline';
+import * as HeroIcons20 from '@heroicons/react/20/solid';
 interface IconButtonProps {
-    variant: "contained" | "iconOnly";
-    color: "primary" | "secondary";
+    color: "primary" | "secondary" | "tertiary" | "iconOnly";
     state: "enabled" | "selected" | "disabled";
-    iconName: keyof typeof HeroIcons;
+    size: "large" | "medium" | "small";
+    iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
     onClick?: any;
 }
-export default function IconButton({ variant, color, state, iconName, onClick, }: IconButtonProps): React.JSX.Element;
+export default function IconButton({ color, state, size, iconName, onClick, }: IconButtonProps): React.JSX.Element;
 export {};

package/dist/components/iconButton.jsx

@@ -1,117 +1,51 @@
 'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState } from 'react';
+import * as HeroIcons24 from '@heroicons/react/24/outline';
+import * as HeroIcons20 from '@heroicons/react/20/solid';
 export default function IconButton(_a) {
-    var _this = this;
-    var variant = _a.variant, color = _a.color, state = _a.state, iconName = _a.iconName, onClick = _a.onClick;
+    var color = _a.color, state = _a.state, size = _a.size, iconName = _a.iconName, onClick = _a.onClick;
     var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    var _c = useState(null), Icon = _c[0], setIcon = _c[1];
-    // import icon
-    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
-        var module_1, Icon_1, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!iconName)
-                        return [2 /*return*/, null];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
-                case 2:
-                    module_1 = _a.sent();
-                    Icon_1 = module_1[iconName];
-                    return [2 /*return*/, Icon_1 || null];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
-                    return [2 /*return*/, null];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, []);
-    // Load icons on mount and when props change
-    useEffect(function () {
-        var fetchIcons = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!(typeof iconName === 'string')) return [3 /*break*/, 2];
-                        _a = setIcon;
-                        return [4 /*yield*/, loadIcon(iconName)];
-                    case 1:
-                        _a.apply(void 0, [_b.sent()]);
-                        _b.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchIcons();
-    }, [iconName, loadIcon]);
-    // padding, corner
-    var baseClasses = variant === 'contained'
-        ? 'p-2 rounded-[8px] leading-none '
-        : 'p-2 rounded-[8px] leading-none ';
-    // bg color
-    var bgColor = variant === 'contained'
-        ? color === 'primary'
-            ? 'bg-light-primary-main dark:bg-dark-primary-main' // contained && primary
-            : 'bg-light-background-accent200 dark:bg-dark-background-accent200' // contained && secondary
-        : color === 'primary'
-            ? ' ' // textOnly && primary
-            : ' '; // textOnly && secondary
-    // bg color hover
-    var bgColorHover = variant === 'contained'
-        ? color === 'primary'
-            ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark' // contained && primary
-            : 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300' // contained && secondary
-        : color === 'primary'
-            ? 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover' // textOnly && primary
-            : 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover'; // textOnly && secondary
-    // icon color
-    var iconColor = variant === 'contained'
-        ? color === 'primary'
-            ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // contained && primary
-            : 'text-light-text-primary dark:text-dark-text-primary' // contained && secondary
-        : color === 'primary'
-            ? ' text-light-text-primary dark:text-dark-text-primary' // textOnly && primary
-            : ' text-light-text-primary dark:text-dark-text-primary'; // textOnly && secondary
+    // Select icon based on size
+    var Icon = size === 'small'
+        ? HeroIcons20[iconName]
+        : HeroIcons24[iconName];
+    // Size-based classes
+    var sizeClasses = {
+        large: 'p-2', // 8px padding
+        medium: 'p-1', // 4px padding
+        small: 'p-1', // 4px padding
+    };
+    var iconSizeClasses = {
+        large: 'size-6', // 24px
+        medium: 'size-6', // 24px
+        small: 'size-5', // 20px
+    };
+    // Base classes (padding and corner radius)
+    var baseClasses = "".concat(sizeClasses[size], " rounded-[8px] leading-none");
+    // Background color
+    var bgColor = color === 'primary'
+        ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary
+        : color === 'secondary'
+            ? 'bg-light-secondary-main dark:bg-dark-secondary-main' // Secondary
+            : color === 'tertiary'
+                ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' // Tertiary
+                : ' '; // iconOnly: none
+    // Background hover color
+    var bgColorHover = color === 'primary'
+        ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary
+        : color === 'secondary'
+            ? 'hover:bg-light-secondary-dark hover:dark:bg-dark-secondary-dark' // Secondary
+            : color === 'tertiary'
+                ? 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200' // Tertiary
+                : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100'; // iconOnly
+    // Icon color
+    var iconColor = color === 'primary'
+        ? 'text-light-text-primary dark:text-dark-text-contrast' // Primary
+        : color === 'secondary'
+            ? 'text-light-text-primary dark:text-dark-text-primary' // Secondary
+            : color === 'tertiary'
+                ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
+                : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
     // state
     var stateClasses = state === 'disabled'
         ? 'cursor-not-allowed opacity-50'
@@ -120,7 +54,7 @@ export default function IconButton(_a) {
             : isHovered
                 ? 'cursor-pointer hover:bg-opacity-75'
                 : 'cursor-pointer';
-    return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses, " ")} disabled={state === 'disabled'} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
-        {Icon && <Icon className="size-6"/>}
+    return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses)} disabled={state === 'disabled'} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
+      {Icon && <Icon className={iconSizeClasses[size]}/>}
     </button>);
 }

package/dist/components/menuItem.jsx

@@ -92,7 +92,7 @@ export default function MenuItem(_a) {
         {userImgUrl || userHandle ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl || ''}/>) : (IconLeft && <IconLeft className="w-6 h-6"/>)}
 
         {/* label */}
-        <span className="whitespace-nowrap text-body1 px-2 text-light-text-primary dark:text-dark-text-primary">
+        <span className="whitespace-nowrap text-body1 px-2 text-light-text-secondary dark:text-dark-text-secondary">
           {label}
         </span>
       </div>

package/dist/components/tabsContainer.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 export default function TabsContainer(_a) {
     var children = _a.children;
     var tabCount = React.Children.count(children);
-    return (<div className={"\n        flex space-x-2 p-1 rounded-[12px]\n        ".concat(tabCount > 0 ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' : 'bg-transparent', "\n      ")}>
+    return (<div className={"\n        flex space-x-2 p-1 rounded-[12px]\n        ".concat(tabCount > 0 ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' : 'bg-transparent', "\n      ")}>
       {children}
     </div>);
 }

package/dist/components/tag.d.ts

@@ -1,15 +1,13 @@
 import React from 'react';
 import * as HeroIcons from '@heroicons/react/24/outline';
 interface TagProps {
-    key?: any;
-    variant: "contained" | "textOnly";
-    size: "medium" | "small";
-    state?: "enabled" | "selected";
-    label: any;
+    variant: 'contained' | 'textOnly';
+    size: 'medium' | 'small';
+    state?: 'enabled' | 'selected';
+    label: string;
     iconName?: keyof typeof HeroIcons;
-    isDeletable?: keyof typeof HeroIcons;
-    onClick?: any;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
     color?: 'default' | 'info';
 }
-export default function Tag({ key, variant, size, state, label, iconName, isDeletable, onClick, color, }: TagProps): React.JSX.Element;
+export default function Tag({ variant, size, state, label, iconName, onClick, color, }: TagProps): JSX.Element;
 export {};

package/dist/components/tag.jsx

@@ -1,123 +1,43 @@
 'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
+import * as HeroIcons from '@heroicons/react/24/outline';
 export default function Tag(_a) {
-    var _this = this;
-    var key = _a.key, variant = _a.variant, size = _a.size, state = _a.state, label = _a.label, iconName = _a.iconName, isDeletable = _a.isDeletable, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'default' : _b;
-    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
-    var _d = useState(null), Icon = _d[0], setIcon = _d[1];
-    var _e = useState(null), DeleteIcon = _e[0], setDeleteIcon = _e[1];
-    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
-        var module_1, Icon_1, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!iconName)
-                        return [2 /*return*/, null];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
-                case 2:
-                    module_1 = _a.sent();
-                    Icon_1 = module_1[iconName];
-                    return [2 /*return*/, Icon_1 || null];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
-                    return [2 /*return*/, null];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, []);
+    var variant = _a.variant, size = _a.size, _b = _a.state, state = _b === void 0 ? 'enabled' : _b, label = _a.label, iconName = _a.iconName, onClick = _a.onClick, _c = _a.color, color = _c === void 0 ? 'default' : _c;
+    var _d = useState(false), isHovered = _d[0], setIsHovered = _d[1];
+    var _e = useState(null), Icon = _e[0], setIcon = _e[1];
+    // Load icon directly from HeroIcons
     useEffect(function () {
-        var fetchIcons = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        if (!(typeof iconName === 'string')) return [3 /*break*/, 2];
-                        _a = setIcon;
-                        return [4 /*yield*/, loadIcon(iconName)];
-                    case 1:
-                        _a.apply(void 0, [_c.sent()]);
-                        _c.label = 2;
-                    case 2:
-                        if (!(typeof isDeletable === 'string')) return [3 /*break*/, 4];
-                        _b = setDeleteIcon;
-                        return [4 /*yield*/, loadIcon(isDeletable)];
-                    case 3:
-                        _b.apply(void 0, [_c.sent()]);
-                        _c.label = 4;
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchIcons();
-    }, [iconName, isDeletable, loadIcon]);
-    // size and padding
+        if (iconName) {
+            setIcon(HeroIcons[iconName]);
+        }
+    }, [iconName]);
+    // Size and padding
     var sizeClasses = size === 'medium' ? 'text-body2 px-2 py-1' : 'text-caption px-2 py-[3px]';
-    // bg color
+    // Background color
     var bgClasses = variant === 'contained'
         ? (color === 'info'
-            ? 'bg-light-info-main dark:bg-dark-info-main' // info 
-            : 'bg-light-background-accent200 dark:bg-dark-background-accent200') // default 
-        : ''; // textOnly
-    // font color
+            ? 'bg-light-info-main dark:bg-dark-info-main'
+            : 'bg-light-background-accent300 dark:bg-dark-background-accent300')
+        : '';
+    // Font color
     var fontClasses = variant === 'textOnly'
         ? (color === 'info'
-            ? 'text-light-info-main dark:text-dark-info-main' // info
-            : 'text-light-text-primary dark:text-dark-text-primary') // default
-        : 'text-light-text-primary dark:text-dark-text-primary'; // contained
-    // state
+            ? 'text-light-info-main dark:text-dark-info-main'
+            : 'text-light-text-primary dark:text-dark-text-primary')
+        : 'text-light-text-primary dark:text-dark-text-primary';
+    // Border for contained variant
+    var borderClasses = variant === 'contained'
+        ? 'border border-light-misc-divider dark:border-dark-misc-divider'
+        : '';
+    // State and hover
     var stateClasses = state === 'selected'
         ? 'bg-light-accent-main dark:bg-dark-accent-main text-white'
         : 'cursor-pointer';
-    // hover
-    var hoverClasses = isHovered ? (variant === 'contained' ? 'hover:bg-dark-background-accent300' : '') : '';
-    return (<div className={"flex items-center space-x-1 rounded-full \n        ".concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(stateClasses, " ").concat(hoverClasses, " \n        transition-colors duration-300 ease-in-out")} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
+    var hoverClasses = variant === 'contained' && isHovered
+        ? 'bg-light-background-accent200 dark:bg-dark-background-accent200'
+        : '';
+    return (<div className={"\n        flex items-center space-x-1 rounded-full \n        ".concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(stateClasses, " ").concat(hoverClasses, "\n        transition-colors duration-300 ease-in-out\n      ")} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
       {Icon && <Icon className="w-4 h-4"/>}
       <span>{label}</span>
-      {isDeletable && (<button className="ml-2 text-red-500" onClick={function (e) {
-                e.stopPropagation();
-                // Handle delete action
-            }}>
-          {DeleteIcon && <DeleteIcon className="w-4 h-4"/>}
-        </button>)}
     </div>);
 }

package/dist/designTokens.js

@@ -47,9 +47,9 @@ module.exports = {
                 light: '#67C16B',
             },
             background: {
-                default: '#F2F2F2',
-                accent100: '#F5F5F5',
-                accent200: '#FAFAFA',
+                default: '#e8e8e8',
+                accent100: '#f1f1f1',
+                accent200: '#f7f7f7',
                 accent300: '#FFFFFF',
             },
             action: {

package/dist/output.css

@@ -556,6 +556,10 @@ video {
 .flex {
   display: flex;
 }
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
 .size-6 {
   width: 1.5rem;
   height: 1.5rem;
@@ -727,6 +731,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(238 174 3 / var(--tw-border-opacity));
 }
+.border-light-misc-divider {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 209 209 / var(--tw-border-opacity));
+}
 .border-light-text-primary {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -764,15 +772,19 @@ video {
 }
 .bg-light-background-accent100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+  background-color: rgb(241 241 241 / var(--tw-bg-opacity));
 }
 .bg-light-background-accent200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
+}
+.bg-light-background-accent300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 .bg-light-background-default {
   --tw-bg-opacity: 1;
-  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
+  background-color: rgb(232 232 232 / var(--tw-bg-opacity));
 }
 .bg-light-error-main {
   --tw-bg-opacity: 1;
@@ -786,9 +798,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
-.bg-light-primary-main {
+.bg-light-secondary-main {
   --tw-bg-opacity: 1;
-  background-color: rgb(69 69 69 / var(--tw-bg-opacity));
+  background-color: rgb(176 176 176 / var(--tw-bg-opacity));
 }
 .bg-light-success-main {
   --tw-bg-opacity: 1;
@@ -902,10 +914,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(109 109 109 / var(--tw-text-opacity));
 }
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -942,7 +950,7 @@ video {
   --tw-ring-offset-width: 4px;
 }
 .ring-offset-light-background-default {
-  --tw-ring-offset-color: #F2F2F2;
+  --tw-ring-offset-color: #e8e8e8;
 }
 .blur {
   --tw-blur: blur(8px);
@@ -975,29 +983,19 @@ body {
   background-color: rgb(227 227 227 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-dark-background-accent300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(79 79 79 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-light-accent-dark:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(206 134 2 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-light-action-hover:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 243 243 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-light-background-accent100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+  background-color: rgb(241 241 241 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-light-background-accent200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-light-background-accent300:hover {
@@ -1005,9 +1003,9 @@ body {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-light-primary-dark:hover {
+.hover\:bg-light-secondary-dark:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+  background-color: rgb(136 136 136 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-opacity-75:hover {
@@ -1026,6 +1024,11 @@ body {
 
 @media (prefers-color-scheme: dark) {
 
+  .dark\:border-dark-misc-divider {
+    --tw-border-opacity: 1;
+    border-color: rgb(64 64 64 / var(--tw-border-opacity));
+  }
+
   .dark\:border-dark-text-primary {
     --tw-border-opacity: 1;
     border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -1056,6 +1059,11 @@ body {
     background-color: rgb(69 69 69 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-dark-background-accent300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(79 79 79 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-dark-background-default {
     --tw-bg-opacity: 1;
     background-color: rgb(38 38 38 / var(--tw-bg-opacity));
@@ -1076,9 +1084,9 @@ body {
     background-color: rgb(233 233 233 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-dark-primary-main {
+  .dark\:bg-dark-secondary-main {
     --tw-bg-opacity: 1;
-    background-color: rgb(213 213 213 / var(--tw-bg-opacity));
+    background-color: rgb(79 79 79 / var(--tw-bg-opacity));
   }
 
   .dark\:bg-dark-success-main {
@@ -1155,9 +1163,9 @@ body {
     background-color: rgb(79 79 79 / var(--tw-bg-opacity));
   }
 
-  .dark\:hover\:bg-dark-primary-dark:hover {
+  .dark\:hover\:bg-dark-secondary-dark:hover {
     --tw-bg-opacity: 1;
-    background-color: rgb(233 233 233 / var(--tw-bg-opacity));
+    background-color: rgb(69 69 69 / var(--tw-bg-opacity));
   }
 
   .hover\:dark\:bg-dark-accent-dark:hover {
@@ -1165,24 +1173,19 @@ body {
     background-color: rgb(206 134 2 / var(--tw-bg-opacity));
   }
 
-  .hover\:dark\:bg-dark-action-hover:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(61 61 61 / var(--tw-bg-opacity));
-  }
-
   .hover\:dark\:bg-dark-background-accent100:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(51 51 51 / var(--tw-bg-opacity));
   }
 
-  .hover\:dark\:bg-dark-background-accent300:hover {
+  .hover\:dark\:bg-dark-background-accent200:hover {
     --tw-bg-opacity: 1;
-    background-color: rgb(79 79 79 / var(--tw-bg-opacity));
+    background-color: rgb(69 69 69 / var(--tw-bg-opacity));
   }
 
-  .hover\:dark\:bg-dark-primary-dark:hover {
+  .hover\:dark\:bg-dark-secondary-dark:hover {
     --tw-bg-opacity: 1;
-    background-color: rgb(233 233 233 / var(--tw-bg-opacity));
+    background-color: rgb(69 69 69 / var(--tw-bg-opacity));
   }
 
   .focus\:dark\:border-dark-accent-main:focus {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "private": false,
-  "main": "./dist/index.js",  
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
     "dev": "next dev",
@@ -13,7 +13,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@heroicons/react": "^2.1.5",
+    "@heroicons/react": "^2.2.0",
     "@popperjs/core": "^2.11.8",
     "next": "14.2.13",
     "react": "^18",