oneslash-design-system 1.1.13 → 1.1.15

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: accent/main
+    : color === 'secondary'
+    ? 'bg-light-primary-main dark:bg-dark-primary-main' // Secondary: primary/main
+    : color === 'tertiary'
+    ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' // Tertiary: background/accent200
+    : ' '; // 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: accent/dark
+    : color === 'secondary'
+    ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark' // Secondary: primary/dark
+    : color === 'tertiary'
+    ? 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300' // Tertiary: background/accent300
+    : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100'; // iconOnly: background/accent100
 
+  // Icon color
+  const iconColor = color === 'primary'
+    ? 'text-light-text-primary dark:text-dark-text-primary' // Primary: text/primary
+    : color === 'secondary'
+    ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // Secondary: text/contrast
+    : color === 'tertiary'
+    ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary: text/primary
+    : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly: text/primary
 
   // 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

@@ -64,10 +64,10 @@ export default function MenuItem({
       >
         {/* render userImage. render dynamic icon if userImage is not available */}
         {userImgUrl || userHandle ? (
-        <UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl || ''} />
-      ) : (
-        IconLeft && <IconLeft className="w-6 h-6" />
-      )}
+            <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">

package/components/tab.tsx

@@ -64,20 +64,20 @@ export default function Tab({
   return (
     <div
       className={`
-        flex items-center space-x-1 p-1 rounded-[8px] cursor-pointer justify-start 
+        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-all duration-300 ease-in-out
         ${isSelected 
-          ? 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast' 
-          : 'bg-light-action-selected dark:bg-dark-action-selected hover:bg-light-background-default dark:hover:bg-dark-action-hover'}
+          ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast' 
+          : 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200'}
       `}
       onClick={handleClick}
     >
-      {IconLeft && <IconLeft className="w-5 h-5" />}
-      <span className="whitespace-nowrap text-body1 px-2">
+      {IconLeft && <IconLeft className="w-6 h-6" />}
+      <span className="whitespace-nowrap text-body1 px-[6px]">
         {label}
       </span>
       {IconRight && (
         <div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className="w-5 h-5" />
+          <IconRight className="w-6 h-6" />
         </div>
       )}
     </div>

package/components/tabsContainer.tsx

@@ -0,0 +1,23 @@
+'use client';
+import React from 'react';
+
+interface TabsContainerProps {
+  children: React.ReactNode;
+}
+
+export default function TabsContainer({
+  children,
+}: TabsContainerProps) {
+  const tabCount = React.Children.count(children);
+
+  return (
+    <div
+      className={`
+        flex space-x-2 p-1 rounded-[12px]
+        ${tabCount > 0 ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' : 'bg-transparent'}
+      `}
+    >
+      {children}
+    </div>
+  );
+}

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: accent/main
+        : color === 'secondary'
+            ? 'bg-light-primary-main dark:bg-dark-primary-main' // Secondary: primary/main
+            : color === 'tertiary'
+                ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' // Tertiary: background/accent200
+                : ' '; // iconOnly: none
+    // Background hover color
+    var bgColorHover = color === 'primary'
+        ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary: accent/dark
+        : color === 'secondary'
+            ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark' // Secondary: primary/dark
+            : color === 'tertiary'
+                ? 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300' // Tertiary: background/accent300
+                : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100'; // iconOnly: background/accent100
+    // Icon color
+    var iconColor = color === 'primary'
+        ? 'text-light-text-primary dark:text-dark-text-primary' // Primary: text/primary
+        : color === 'secondary'
+            ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // Secondary: text/contrast
+            : color === 'tertiary'
+                ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary: text/primary
+                : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly: text/primary
     // 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.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 interface MenuItemProps {
     href?: string;
     iconName?: string;
+    userHandle?: string;
+    userImgUrl?: string;
     label: string;
     isSelected?: boolean;
-    onClick: any;
+    onClick?: any;
 }
-export default function MenuItem({ href, iconName, label, isSelected, onClick, }: MenuItemProps): React.JSX.Element;
+export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, isSelected, onClick, }: MenuItemProps): React.JSX.Element;
 export {};

package/dist/components/menuItem.jsx

@@ -37,10 +37,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import React, { useState, useEffect, useCallback } from 'react';
 import NextLink from 'next/link';
+import UserImage from './userImage';
 export default function MenuItem(_a) {
     var _this = this;
-    var _b = _a.href, href = _b === void 0 ? '#' : _b, iconName = _a.iconName, label = _a.label, isSelected = _a.isSelected, onClick = _a.onClick;
-    var _c = useState(null), Icon = _c[0], setIcon = _c[1];
+    var _b = _a.href, href = _b === void 0 ? '#' : _b, iconName = _a.iconName, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, isSelected = _a.isSelected, onClick = _a.onClick;
+    var _c = useState(null), IconLeft = _c[0], setIconLeft = _c[1];
     // Import icon dynamically
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
         var module_1, IconComponent, error_1;
@@ -72,7 +73,7 @@ export default function MenuItem(_a) {
                 switch (_b.label) {
                     case 0:
                         if (!iconName) return [3 /*break*/, 2];
-                        _a = setIcon;
+                        _a = setIconLeft;
                         return [4 /*yield*/, loadIcon(iconName)];
                     case 1:
                         _a.apply(void 0, [_b.sent()]);

package/dist/components/tab.jsx

@@ -99,15 +99,15 @@ export default function Tab(_a) {
             router.push(href);
         }
     };
-    return (<div className={"\n        flex items-center space-x-1 p-1 rounded-[8px] cursor-pointer justify-start \n        ".concat(isSelected
+    return (<div className={"\n        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-all duration-300 ease-in-out\n        ".concat(isSelected
             ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast'
-            : 'bg-transparent dark:bg-transparent hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200', "\n      ")} onClick={handleClick}>
-      {IconLeft && <IconLeft className="w-5 h-5"/>}
-      <span className="whitespace-nowrap text-body1 px-2">
+            : 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200', "\n      ")} onClick={handleClick}>
+      {IconLeft && <IconLeft className="w-6 h-6"/>}
+      <span className="whitespace-nowrap text-body1 px-[6px]">
         {label}
       </span>
       {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className="w-5 h-5"/>
+          <IconRight className="w-6 h-6"/>
         </div>)}
     </div>);
 }

package/dist/components/tabsContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TabsContainerProps {
+    children: React.ReactNode;
+}
+export default function TabsContainer({ children, }: TabsContainerProps): React.JSX.Element;
+export {};

package/dist/components/tabsContainer.jsx

@@ -0,0 +1,9 @@
+'use client';
+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      ")}>
+      {children}
+    </div>);
+}

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;
@@ -698,6 +702,9 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-\[12px\] {
+  border-radius: 12px;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -755,10 +762,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(238 174 3 / var(--tw-bg-opacity));
 }
-.bg-light-action-selected {
-  --tw-bg-opacity: 1;
-  background-color: rgb(227 227 227 / var(--tw-bg-opacity));
-}
 .bg-light-actionBackground-disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(238 238 238 / var(--tw-bg-opacity));
@@ -783,6 +786,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 135 212 / var(--tw-bg-opacity));
 }
+.bg-light-primary-dark {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
 .bg-light-primary-main {
   --tw-bg-opacity: 1;
   background-color: rgb(69 69 69 / var(--tw-bg-opacity));
@@ -824,6 +831,10 @@ video {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.px-\[6px\] {
+  padding-left: 6px;
+  padding-right: 6px;
+}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -978,24 +989,19 @@ body {
   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));
 }
 
-.hover\:bg-light-background-accent300:hover {
+.hover\:bg-light-background-accent200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-light-background-default:hover {
+.hover\:bg-light-background-accent300:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-light-primary-dark:hover {
@@ -1034,11 +1040,6 @@ body {
     background-color: rgb(255 205 41 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-dark-action-selected {
-    --tw-bg-opacity: 1;
-    background-color: rgb(78 78 78 / var(--tw-bg-opacity));
-  }
-
   .dark\:bg-dark-actionBackground-disabled {
     --tw-bg-opacity: 1;
     background-color: rgb(56 56 56 / var(--tw-bg-opacity));
@@ -1069,6 +1070,11 @@ body {
     background-color: rgb(0 175 255 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-dark-primary-dark {
+    --tw-bg-opacity: 1;
+    background-color: rgb(233 233 233 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-dark-primary-main {
     --tw-bg-opacity: 1;
     background-color: rgb(213 213 213 / var(--tw-bg-opacity));
@@ -1138,9 +1144,9 @@ body {
     background-color: rgb(78 78 78 / var(--tw-bg-opacity));
   }
 
-  .dark\:hover\:bg-dark-action-hover:hover {
+  .dark\:hover\:bg-dark-background-accent200:hover {
     --tw-bg-opacity: 1;
-    background-color: rgb(61 61 61 / var(--tw-bg-opacity));
+    background-color: rgb(69 69 69 / var(--tw-bg-opacity));
   }
 
   .dark\:hover\:bg-dark-background-accent300:hover {
@@ -1158,11 +1164,6 @@ 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));

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "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",