oneslash-design-system 1.1.12 → 1.1.13

package/components/tag.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import * as HeroIcons from '@heroicons/react/24/outline';
 
 interface TagProps{
+  key?: any;
   variant: "contained" | "textOnly";
   size: "medium" | "small";
   state?: "enabled" | "selected" ;
@@ -16,6 +17,7 @@ interface TagProps{
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
 export default function Tag({
+  key,
   variant,
   size,
   state,

package/designTokens.js

@@ -46,10 +46,10 @@ module.exports = {
         light: '#67C16B',
       },
       background:{
-        default: '#FFFFFF',
-        accent100:'#F6F6F6',
-        accent200:'#E7E7E7',
-        accent300:'#D1D1D1',
+        default: '#F2F2F2',
+        accent100:'#F5F5F5',
+        accent200:'#FAFAFA',
+        accent300:'#FFFFFF',
       },
       action:{
         active: '#888888',

package/dist/components/menuItem.d.ts

@@ -2,11 +2,9 @@ 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, userHandle, userImgUrl, label, isSelected, onClick, }: MenuItemProps): React.JSX.Element;
+export default function MenuItem({ href, iconName, label, isSelected, onClick, }: MenuItemProps): React.JSX.Element;
 export {};

package/dist/components/menuItem.jsx

@@ -37,11 +37,10 @@ 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, 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];
+    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];
     // Import icon dynamically
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
         var module_1, IconComponent, error_1;
@@ -73,7 +72,7 @@ export default function MenuItem(_a) {
                 switch (_b.label) {
                     case 0:
                         if (!iconName) return [3 /*break*/, 2];
-                        _a = setIconLeft;
+                        _a = setIcon;
                         return [4 /*yield*/, loadIcon(iconName)];
                     case 1:
                         _a.apply(void 0, [_b.sent()]);

package/dist/components/tab.jsx

@@ -100,8 +100,8 @@ export default function Tab(_a) {
         }
     };
     return (<div className={"\n        flex items-center space-x-1 p-1 rounded-[8px] cursor-pointer justify-start \n        ".concat(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', "\n      ")} onClick={handleClick}>
+            ? '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">
         {label}

package/dist/components/tag.d.ts

@@ -1,6 +1,7 @@
 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";
@@ -10,5 +11,5 @@ interface TagProps {
     onClick?: any;
     color?: 'default' | 'info';
 }
-export default function Tag({ variant, size, state, label, iconName, isDeletable, onClick, color, }: TagProps): React.JSX.Element;
+export default function Tag({ key, variant, size, state, label, iconName, isDeletable, onClick, color, }: TagProps): React.JSX.Element;
 export {};

package/dist/components/tag.jsx

@@ -38,7 +38,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React, { useState, useEffect, useCallback } from 'react';
 export default function Tag(_a) {
     var _this = this;
-    var 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 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];

package/dist/designTokens.js

@@ -47,10 +47,10 @@ module.exports = {
                 light: '#67C16B',
             },
             background: {
-                default: '#FFFFFF',
-                accent100: '#F6F6F6',
-                accent200: '#E7E7E7',
-                accent300: '#D1D1D1',
+                default: '#F2F2F2',
+                accent100: '#F5F5F5',
+                accent200: '#FAFAFA',
+                accent300: '#FFFFFF',
             },
             action: {
                 active: '#888888',

package/dist/output.css

@@ -765,15 +765,15 @@ video {
 }
 .bg-light-background-accent100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
 .bg-light-background-accent200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(231 231 231 / var(--tw-bg-opacity));
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 .bg-light-background-default {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
 }
 .bg-light-error-main {
   --tw-bg-opacity: 1;
@@ -935,7 +935,7 @@ video {
   --tw-ring-offset-width: 4px;
 }
 .ring-offset-light-background-default {
-  --tw-ring-offset-color: #FFFFFF;
+  --tw-ring-offset-color: #F2F2F2;
 }
 .blur {
   --tw-blur: blur(8px);
@@ -985,17 +985,17 @@ body {
 
 .hover\:bg-light-background-accent100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-light-background-accent300:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(209 209 209 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-light-background-default:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-light-primary-dark:hover {
@@ -1091,7 +1091,7 @@ body {
 
   .dark\:bg-light-background-accent300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(209 209 209 / var(--tw-bg-opacity));
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
 
   .dark\:text-dark-info-main {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "private": false,
   "main": "./dist/index.js",  
   "types": "./dist/index.d.ts",