pixel-react 1.1.6 → 1.1.7

package/lib/utils/find/findAndInsert.d.ts

@@ -0,0 +1,7 @@
+export type AnyObject = {
+    id: number;
+    [key: string]: any;
+};
+export declare function findAndInsert<T extends AnyObject>(data: T[], key: keyof T, targetId: number, newEntry: T, insertPosition: 'above' | 'below' | 'replace', childrenKey?: string): {
+    updatedArray: T[];
+} | null;

package/lib/utils/find/findAndInsert.stories.d.ts

@@ -0,0 +1,7 @@
+import { findAndInsert } from './findAndInsert';
+declare const _default: {
+    title: string;
+    component: typeof findAndInsert;
+};
+export default _default;
+export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/assets/Themes/BaseTheme.scss

@@ -77,6 +77,13 @@ $base-theme: (
   file-details-bg: #ffffff,
   ff-mini-modal-border: #ffffff,
   ff-mini-modal-box-shadow: #3713553d,
+  ff-mini-modal-arrow-shadow: #00000040,
+
+  ff-error-light: #e42525,
+  ff-chips-fill-color: #f9d5ff,
+  ff-chips-blur-color: #575757,
+  ff-chip-bg: #ffffff,
+  ff-chip-text-color: #1e161f,
   ff-mini-modal-footer-background: #aeb0c0,
   input-default-border-color: #a3a3a3,
   input-hover-border-color: #1e161f,
@@ -106,7 +113,7 @@ $base-theme: (
   text-color-light: #1e161f80,
   radio-button-border: #b5b5b5,
   radio-button-hover: #d3d3d3,
-  menu-variant-dark-icon-color:#ffffff,
+  menu-variant-dark-icon-color: #ffffff,
   menu-option-icon-color: #ffffff,
   menu-option-icon-clicked: #71347b,
   delete-text-color: #c50303,

package/src/assets/Themes/DarkTheme.scss

@@ -85,6 +85,13 @@ $dark-theme: (
   file-details-bg: #ffffff,
   ff-mini-modal-border: #ffffff,
   ff-mini-modal-box-shadow: #3713553d,
+  ff-mini-modal-arrow-shadow: #00000040,
+
+  ff-error-light: #e42525,
+  ff-chips-fill-color: #f9d5ff,
+  ff-chips-blur-color: #575757,
+  ff-chip-bg: #ffffff,
+  ff-chip-text-color: #1e161f,
   ff-mini-modal-footer-background: #aeb0c0,
   input-default-border-color: #a3a3a3,
   input-hover-border-color: #1e161f,

package/src/assets/icons/app_switch.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.36284 2.18142C4.36284 0.976656 3.38619 0 2.18142 0C0.976656 0 0 0.976656 0 2.18142C0 3.38619 0.976656 4.36284 2.18142 4.36284C3.38619 4.36284 4.36284 3.38619 4.36284 2.18142Z" fill="currentColor"/>
+<path d="M4.36284 7.99929C4.36284 6.79453 3.38619 5.81787 2.18142 5.81787C0.976656 5.81787 0 6.79453 0 7.99929C0 9.20406 0.976656 10.1807 2.18142 10.1807C3.38619 10.1807 4.36284 9.20406 4.36284 7.99929Z" fill="currentColor"/>
+<path d="M4.36284 13.8155C4.36284 12.6107 3.38619 11.634 2.18142 11.634C0.976656 11.634 0 12.6107 0 13.8155C0 15.0202 0.976656 15.9969 2.18142 15.9969C3.38619 15.9969 4.36284 15.0202 4.36284 13.8155Z" fill="currentColor"/>
+<path d="M10.18 2.18142C10.18 0.976656 9.20339 0 7.99862 0C6.79386 0 5.8172 0.976656 5.8172 2.18142C5.8172 3.38619 6.79386 4.36284 7.99862 4.36284C9.20339 4.36284 10.18 3.38619 10.18 2.18142Z" fill="currentColor"/>
+<path d="M10.18 7.99929C10.18 6.79453 9.20339 5.81787 7.99862 5.81787C6.79386 5.81787 5.8172 6.79453 5.8172 7.99929C5.8172 9.20406 6.79386 10.1807 7.99862 10.1807C9.20339 10.1807 10.18 9.20406 10.18 7.99929Z" fill="currentColor"/>
+<path d="M10.18 13.8155C10.18 12.6107 9.20339 11.634 7.99862 11.634C6.79386 11.634 5.8172 12.6107 5.8172 13.8155C5.8172 15.0202 6.79386 15.9969 7.99862 15.9969C9.20339 15.9969 10.18 15.0202 10.18 13.8155Z" fill="currentColor"/>
+<path d="M15.9977 2.18142C15.9977 0.976656 15.021 0 13.8162 0C12.6115 0 11.6348 0.976656 11.6348 2.18142C11.6348 3.38619 12.6115 4.36284 13.8162 4.36284C15.021 4.36284 15.9977 3.38619 15.9977 2.18142Z" fill="currentColor"/>
+<path d="M13.8189 5.81982C14.2503 5.81982 14.6721 5.94776 15.0308 6.18746C15.3895 6.42716 15.6691 6.76785 15.8342 7.16645C15.9993 7.56505 16.0425 8.00366 15.9584 8.42682C15.8742 8.84997 15.6664 9.23867 15.3614 9.54374C15.0563 9.84882 14.6676 10.0566 14.2444 10.1408C13.8213 10.2249 13.3827 10.1817 12.9841 10.0166C12.5855 9.85151 12.2448 9.57191 12.0051 9.21318C11.7654 8.85444 11.6375 8.43269 11.6375 8.00125C11.6375 7.4227 11.8673 6.86784 12.2764 6.45875C12.6855 6.04965 13.2403 5.81982 13.8189 5.81982Z" fill="currentColor"/>
+<path d="M13.8189 11.6372C14.2503 11.6372 14.6721 11.7651 15.0308 12.0048C15.3895 12.2445 15.6691 12.5852 15.8342 12.9838C15.9993 13.3824 16.0425 13.821 15.9584 14.2442C15.8742 14.6674 15.6664 15.056 15.3614 15.3611C15.0563 15.6662 14.6676 15.874 14.2444 15.9581C13.8213 16.0423 13.3827 15.9991 12.9841 15.834C12.5855 15.6689 12.2448 15.3893 12.0051 15.0306C11.7654 14.6718 11.6375 14.2501 11.6375 13.8186C11.6375 13.2401 11.8673 12.6852 12.2764 12.2761C12.6855 11.867 13.2403 11.6372 13.8189 11.6372Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/backward_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 7.63193L4.46894 7.63193L8.32419 11.397L6.66787 13L-5.68248e-07 6.5L6.66787 -5.82924e-07L8.31217 1.60299L4.46894 5.36338L16 5.36338L16 7.63193Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/cloud_server_host_icon.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.32309 14.2733L7.09953 15.1872C6.42885 15.4519 5.89312 15.6534 5.49418 15.7919C5.09482 15.9309 4.63078 16 4.10207 16C3.29014 16 2.65862 15.8011 2.2082 15.406C1.75778 15.0094 1.53251 14.5068 1.53251 13.8971C1.53251 13.661 1.54885 13.4182 1.58284 13.1709C1.61711 12.9232 1.6716 12.6443 1.74617 12.3326L2.58434 9.36594C2.6589 9.08187 2.72228 8.81271 2.77305 8.55818C2.82453 8.30522 2.84934 8.07249 2.84934 7.86298C2.84934 7.48412 2.7709 7.21912 2.61474 7.07013C2.45857 6.92157 2.16059 6.84614 1.71821 6.84614C1.50153 6.84614 1.27883 6.88084 1.05183 6.94796C0.823829 7.01535 0.62895 7.08046 0.465332 7.14097L0.689464 6.22637C1.23854 6.00281 1.76338 5.81138 2.26542 5.65249C2.76746 5.49318 3.24182 5.41345 3.69051 5.41345C4.49684 5.41345 5.11905 5.60832 5.55599 5.99808C5.99292 6.38813 6.21132 6.89375 6.21132 7.51682C6.21132 7.64573 6.19698 7.87288 6.16615 8.19753C6.13603 8.5229 6.07997 8.82103 5.99823 9.0922L5.16365 12.0469C5.09525 12.2843 5.03373 12.5556 4.98024 12.8609C4.92503 13.1641 4.89865 13.3959 4.89865 13.5513C4.89865 13.9437 4.98612 14.2115 5.1615 14.3539C5.33816 14.4963 5.64246 14.5672 6.07466 14.5672C6.27757 14.5672 6.50844 14.5312 6.76498 14.4605C7.0208 14.3898 7.20737 14.3277 7.32309 14.2733ZM7.53475 1.86849C7.53475 2.38329 7.34073 2.82295 6.95083 3.18446C6.56193 3.54725 6.0933 3.7288 5.54509 3.7288C4.99515 3.7288 4.52538 3.54725 4.13204 3.18446C3.73941 2.8228 3.54267 2.38329 3.54267 1.86849C3.54267 1.35469 3.73941 0.91431 4.13204 0.548213C4.52466 0.18269 4.9953 0 5.54509 0C6.09316 0 6.56193 0.18312 6.95083 0.548213C7.34101 0.91431 7.53475 1.35483 7.53475 1.86849Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/continue_without_sign.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.84022 8.49669C7.89307 8.49865 7.94605 8.49999 7.99952 8.49999C8.04908 8.49999 8.0984 8.49889 8.14759 8.49706C9.26673 8.52123 10.3674 8.81737 11.34 9.35863C11.6416 9.52648 12.0222 9.41808 12.1901 9.11645C12.3579 8.81481 12.2495 8.43419 11.9479 8.26635C11.5001 8.0172 11.0295 7.81188 10.5437 7.65221C11.5786 6.87634 12.2495 5.64001 12.2495 4.25C12.2495 1.90649 10.3429 0 7.99952 0C5.65601 0 3.74952 1.90649 3.74952 4.25C3.74952 5.64086 4.42115 6.87792 5.45716 7.65368C4.50807 7.96606 3.61744 8.45202 2.8379 9.09313C1.40883 10.2687 0.415176 11.9083 0.0400542 13.7101C-0.0774994 14.2746 0.0633697 14.8545 0.426406 15.301C0.787612 15.7452 1.32338 16 1.89613 16H6.78077C7.12586 16 7.40577 15.7202 7.40577 15.375C7.40577 15.0298 7.12586 14.75 6.78077 14.75H1.89613C1.62929 14.75 1.4684 14.6011 1.39613 14.5123C1.2715 14.359 1.22328 14.1595 1.26381 13.9648C1.91285 10.8473 4.66407 8.57055 7.84022 8.49669ZM4.99952 4.25C4.99952 2.59582 6.34522 1.25 7.99952 1.25C9.65369 1.25 10.9995 2.59582 10.9995 4.25C10.9995 5.85436 9.73365 7.16845 8.14832 7.24633C8.09864 7.24535 8.04908 7.24474 7.99952 7.24474C7.95069 7.24474 7.90198 7.24548 7.85328 7.24633C6.26673 7.16991 4.99952 5.85522 4.99952 4.25ZM15.9995 11.6196C16.0001 12.0371 15.8369 12.4294 15.5402 12.7246L14.3777 13.8806C14.2557 14.0019 14.0963 14.0625 13.937 14.0625C13.7765 14.0625 13.616 14.001 13.4938 13.8782C13.2504 13.6334 13.2515 13.2378 13.4962 12.9944L14.2754 12.2195H10.7335C10.0358 12.2195 9.46827 12.7871 9.46827 13.4847C9.46827 14.1824 10.0289 14.75 10.7183 14.75C11.0634 14.75 11.3433 15.0298 11.3433 15.375C11.3433 15.7202 11.0634 16 10.7183 16C10.046 16 9.41614 15.7375 8.94483 15.2608C8.4762 14.787 8.21827 14.1562 8.21827 13.4847C8.21827 12.0978 9.34656 10.9695 10.7335 10.9695H14.218L13.4974 10.2569C13.2521 10.0141 13.2498 9.6184 13.4926 9.37304C13.7352 9.12768 14.131 9.12536 14.3765 9.36815L15.5371 10.5159C15.8347 10.8102 15.9989 11.2021 15.9995 11.6196Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/forward_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.81324e-07 8.49429L11.5311 8.49429L7.67581 12.3559L9.33213 14L16 7.33333L9.33213 0.666667L7.68783 2.31076L11.5311 6.16757L6.84733e-07 6.16757L4.81324e-07 8.49429Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/hamburger_menu.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.66683C0 0.930456 0.596955 0.333496 1.33333 0.333496H14.6667C15.403 0.333496 16 0.930456 16 1.66683C16 2.4032 15.403 3.00016 14.6667 3.00016H1.33333C0.596953 3.00016 0 2.4032 0 1.66683ZM0 7.00016C0 6.26379 0.596955 5.66683 1.33333 5.66683H9.33333C10.0697 5.66683 10.6667 6.26379 10.6667 7.00016C10.6667 7.73654 10.0697 8.3335 9.33333 8.3335H1.33333C0.596953 8.3335 0 7.73654 0 7.00016ZM1.33333 11.0002C0.596955 11.0002 0 11.5971 0 12.3335C0 13.0699 0.596953 13.6668 1.33333 13.6668H14.6667C15.403 13.6668 16 13.0699 16 12.3335C16 11.5971 15.403 11.0002 14.6667 11.0002H1.33333Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/plus_user_icon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 1C7 0.447715 6.55228 0 6 0C5.44772 0 5 0.447715 5 1V2.49994C5 3.88062 3.88074 4.99988 2.50006 4.99988H1C0.447715 4.99988 0 5.44759 0 5.99988C0 6.55216 0.447715 6.99988 1 6.99988H2.5C3.88071 6.99988 5 8.11917 5 9.49988V11C5 11.5523 5.44772 12 6 12C6.55228 12 7 11.5523 7 11V9.49988C7 8.11917 8.11929 6.99988 9.5 6.99988H11C11.5523 6.99988 12 6.55216 12 5.99988C12 5.44759 11.5523 4.99988 11 4.99988H9.49994C8.11926 4.99988 7 3.88062 7 2.49994V1Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/reload.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6483 2.35282C12.4042 1.10288 10.7824 0.299891 9.03527 0.0688652C7.28812 -0.16216 5.51372 0.191745 3.98832 1.07548C2.46292 1.95921 1.27213 3.32318 0.601357 4.95502C-0.0694201 6.58686 -0.182542 8.395 0.279602 10.0979C0.741747 11.8008 1.75322 13.3029 3.15655 14.3704C4.55988 15.4378 6.2763 16.0107 8.03858 15.9998C9.80085 15.989 11.5101 15.3949 12.9002 14.3102C14.2902 13.2255 15.2831 11.7111 15.7243 10.0026H13.6483C13.2813 11.0382 12.6372 11.953 11.7862 12.6469C10.9352 13.3408 9.91013 13.7871 8.82296 13.9372C7.73579 14.0872 6.62836 13.9351 5.62165 13.4976C4.61494 13.0601 3.74769 12.3539 3.11465 11.4562C2.48161 10.5586 2.10714 9.50398 2.03214 8.40764C1.95715 7.3113 2.18451 6.21541 2.6894 5.2397C3.19429 4.264 3.95728 3.44601 4.89501 2.87511C5.83273 2.30422 6.90912 2.00238 8.00656 2.00257C8.79185 2.00381 9.569 2.16189 10.2925 2.46754C11.0161 2.77319 11.6715 3.22027 12.2203 3.78264L9.00446 7.00695H16V0.00205947L13.6483 2.35282Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/toast_close.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="13.426" height="13.423" viewBox="0 0 13.426 13.423">
-  <path id="Icon_ionic-ios-close" data-name="Icon ionic-ios-close" d="M19.589,18l4.8-4.8A1.124,1.124,0,0,0,22.8,11.616l-4.8,4.8-4.8-4.8A1.124,1.124,0,1,0,11.616,13.2l4.8,4.8-4.8,4.8A1.124,1.124,0,0,0,13.2,24.384l4.8-4.8,4.8,4.8A1.124,1.124,0,1,0,24.384,22.8Z" transform="translate(-11.285 -11.289)" fill="currentColor"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6259 2.18022C16.1247 1.68147 16.1247 0.872824 15.6259 0.374067C15.1272 -0.124689 14.3185 -0.124689 13.8198 0.374067L8 6.19384L2.18022 0.374067C1.68147 -0.124689 0.872824 -0.124689 0.374067 0.374067C-0.124689 0.872824 -0.124689 1.68147 0.374067 2.18022L6.19384 8L0.374067 13.8198C-0.124689 14.3185 -0.124689 15.1272 0.374067 15.6259C0.872824 16.1247 1.68147 16.1247 2.18022 15.6259L8 9.80616L13.8198 15.6259C14.3185 16.1247 15.1272 16.1247 15.6259 15.6259C16.1247 15.1272 16.1247 14.3185 15.6259 13.8198L9.80616 8L15.6259 2.18022Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/user_profile.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99962 8.3175C8.79071 8.3175 9.56403 8.08291 10.2218 7.64341C10.8796 7.2039 11.3922 6.57922 11.695 5.84835C11.9977 5.11748 12.0769 4.31325 11.9226 3.53736C11.7682 2.76147 11.3873 2.04877 10.8279 1.48939C10.2685 0.930007 9.55583 0.549061 8.77995 0.394727C8.00406 0.240394 7.19983 0.319607 6.46896 0.622343C5.73809 0.925079 5.11341 1.43774 4.6739 2.09551C4.2344 2.75327 3.99981 3.5266 3.99981 4.31769C4.00201 5.37783 4.42412 6.39392 5.17376 7.14355C5.92339 7.89319 6.93948 8.3153 7.99962 8.3175ZM7.99962 10.3178C5.35275 10.3178 0 11.6677 0 14.3176V16.3179H15.9992V14.3176C15.9992 11.6677 10.6495 10.3178 7.99962 10.3178Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/window_maximize.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.58189 0H14.2429C14.7086 0.00113232 15.1548 0.188831 15.4841 0.522043C15.8134 0.855255 15.9989 1.30686 16 1.7781V11.3632C15.9989 11.8345 15.8134 12.2861 15.4841 12.6193C15.1548 12.9525 14.7086 13.1402 14.2429 13.1413H4.58189C4.11623 13.1402 3.66997 12.9525 3.3407 12.6193C3.01143 12.2861 2.82595 11.8345 2.82483 11.3632V1.7781C2.82595 1.30686 3.01143 0.855255 3.3407 0.522043C3.66997 0.188831 4.11623 0.00113232 4.58189 0ZM4.58189 11.3618H14.2429V1.7781H4.58189V11.3618Z" fill="currentColor"/>
+<path d="M1.75706 2.85889H11.4181C11.8837 2.86002 12.33 3.04772 12.6593 3.38093C12.9885 3.71414 13.174 4.16575 13.1751 4.63698V14.2221C13.174 14.6933 12.9885 15.145 12.6593 15.4782C12.33 15.8114 11.8837 15.9991 11.4181 16.0002H1.75706C1.2914 15.9991 0.845138 15.8114 0.515867 15.4782C0.186597 15.145 0.00111893 14.6933 0 14.2221V4.63698C0.00111893 4.16575 0.186597 3.71414 0.515867 3.38093C0.845138 3.04772 1.2914 2.86002 1.75706 2.85889ZM1.75706 14.2207H11.4181V4.63698H1.75706V14.2207Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/window_minimize.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="4" viewBox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5008 0H1.5008C1.10276 0 0.721029 0.158121 0.439574 0.439575C0.15812 0.72103 0 1.10276 0 1.5008L0 2.5008C0 2.89884 0.15812 3.28057 0.439574 3.56203C0.721029 3.84348 1.10276 4.0016 1.5008 4.0016H14.5008C14.8986 4.00117 15.2799 3.84287 15.561 3.56146C15.8421 3.28005 16 2.89856 16 2.5008V1.5008C16 1.10304 15.8421 0.721548 15.561 0.44014C15.2799 0.158731 14.8986 0.000424051 14.5008 0Z" fill="currentColor"/>
+</svg>

package/src/components/AppHeader/AppHeader.scss

@@ -21,11 +21,12 @@
       align-items: center;
       .ff-app-header-nav-bar-item {
         margin-left: 8px;
+        padding: 7px;
         color: var(--ff-header-text-color);
         cursor: pointer;
         display: flex;
         &--selected {
-          padding: 3px;
+          padding: 3px 6px 3px 3px;
           background-color: var(--primary-icon-color);
           border-radius: 20px;
           .ff-app-header-nav-bar-item-label {

package/src/components/Chip/Chip.scss

@@ -1,9 +1,8 @@
-@use '../../assets/styles/colors' as *;
 @use '../../assets/styles/fonts' as *;
 
 @mixin chip-variant-background($color) {
   background-color: $color;
-  color: $drawer-footer-bg;
+  color: var(--ff-chip-bg);
 }
 
 .ff-chip-wrapper {
@@ -24,32 +23,34 @@
     line-height: 15px;
     border: none;
     transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;
-    box-shadow: 1px 1px 3px 0px $ff-chips-blur-color inset,
-      -1px -1px 2px 0px $drawer-footer-bg inset,
-      1px -1px 2px 0px $ff-chips-blur-color inset,
-      -1px -1px 2px 0px $ff-chips-blur-color, 1px 1px 2px 0px $drawer-footer-bg;
+    box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
+      -1px -1px 2px 0px var(--ff-chip-bg) inset,
+      1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+      1px 1px 2px 0px var(--ff-chip-bg);
     &--fullText:hover {
-      box-shadow: 1px 1px 6px 0px $ff-chips-blur-color inset,
-        -1px -1px 4px 0px $drawer-footer-bg inset;
+      box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
+        -1px -1px 2px 0px var(--ff-chip-bg) inset,
+        1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+        1px 1px 2px 0px var(--ff-chip-bg);
       padding-right: 12px;
     }
     @extend .fontXs;
 
     &--primary {
-      @include chip-variant-background($ff-chips-fill-color);
-      color: $text-color;
+      @include chip-variant-background(var(--ff-chips-fill-color));
+      color: var(--ff-chip-text-color);
     }
 
     &--success {
-      @include chip-variant-background($ff-success);
+      @include chip-variant-background(var(--ff-success));
     }
 
     &--error {
-      @include chip-variant-background($ff-error-light);
+      @include chip-variant-background(var(--ff-error-light));
     }
 
     &--warning {
-      @include chip-variant-background($ff-warning);
+      @include chip-variant-background(var(--ff-warning));
     }
     &--custom {
       @extend .fontSm;

package/src/components/Icon/Icon.stories.tsx

@@ -12,7 +12,7 @@ type Story = StoryObj<typeof Icon>;
 
 export const Icons: Story = {
   args: {
-    name: 'delete_black',
+    name: 'more',
     color: '',
   },
 };

package/src/components/Icon/Icons.scss

@@ -7,7 +7,7 @@
 
 .ff-icon-click {
   cursor: pointer;
-  padding: 5px;
+  padding: 4px;
   box-sizing: content-box;
   &:hover {
     border-radius: 50%;

package/src/components/Icon/iconList.ts

@@ -71,12 +71,24 @@ import MSDynamicIcon from '../../assets/icons/ms_dynamic.svg?react';
 import AllProjectsIcon from '../../assets/icons/all_projects.svg?react';
 import AndroidIcon from '../../assets/icons/android_icon.svg?react';
 import AddLocator from '../../assets/icons/add_locator.svg?react';
+import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
+
 import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
 import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
 import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react';
 import WSWBPlusIcon from '../../assets/icons/wswb_plus_icon.svg?react';
 import LabelPlusIcon from '../../assets/icons/label_plus.svg?react';
 import Drag from '../../assets/icons/drag_icon.svg?react';
+import BackwardIcon from '../../assets/icons/backward_icon.svg?react';
+import ForwardIcon from '../../assets/icons/forward_icon.svg?react';
+import Reload from '../../assets/icons/reload.svg?react';
+import WindowMaximize from '../../assets/icons/window_maximize.svg?react';
+import WindowMinimize from '../../assets/icons/window_minimize.svg?react';
+import HamburgerMenu from '../../assets/icons/hamburger_menu.svg?react';
+import AppSwitchIcon from '../../assets/icons/app_switch.svg?react';
+import UserProfile from '../../assets/icons/user_profile.svg?react';
+import ContinueSignIn from '../../assets/icons/continue_without_sign.svg?react';
+import CloudServerHost from '../../assets/icons/cloud_server_host_icon.svg?react';
 
 //icons
 Components['delete_info'] = DeleteInfoIcon;
@@ -140,6 +152,7 @@ Components['sales_force'] = SalesForceIcon;
 Components['ms_dynamic'] = MSDynamicIcon;
 Components['all_projects'] = AllProjectsIcon;
 Components['android_icon'] = AndroidIcon;
+Components['plus_user_icon'] = PlusUserIcon;
 Components['label_plus'] = LabelPlusIcon;
 Components['manual_locator'] = ManualLocator;
 Components['select_license'] = SwitchLicenseIcon;
@@ -155,5 +168,15 @@ Components['android_icon'] = Android;
 Components['chrome_icon'] = Chrome;
 Components['browser_stack_icon'] = BrowserStack;
 Components['run_icon'] = Run;
+Components['backward_icon'] = BackwardIcon;
+Components['forward_icon'] = ForwardIcon;
+Components['reload'] = Reload;
+Components['window_maximize'] = WindowMaximize;
+Components['window_minimize'] = WindowMinimize;
+Components['hamburger_menu'] = HamburgerMenu;
+Components['app_switch'] = AppSwitchIcon;
+Components['user_profile'] = UserProfile;
+Components['continue_without_signin'] = ContinueSignIn;
+Components['cloud_server_host'] = CloudServerHost;
 
 export default Components;

package/src/components/IconButton/IconButton.scss

@@ -2,9 +2,7 @@
 @use '../../assets/styles/mixins';
 
 .ff-plus-icon {
-  min-width: 71px;
-  min-height: 24px;
-  border-radius: 12px;
+  border-radius: 16px;
   border-style: none;
   text-align: center;
   text-decoration: none;
@@ -14,13 +12,20 @@
   background-color: var(--secondary-icon-color);
   padding: 2px 8px 2px 2px;
   border: 1px solid transparent;
-  .ff-icon-color {
-    path {
-      color: var(--primary-icon-color);
+  .button-icon {
+    width: 20px;
+    height: 20px;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    @include mixins.center-content();
+    background-color: var(--hover-color);
+    .ff-icon-color {
+      path {
+        color: var(--secondary-icon-color);
+      }
     }
   }
   .icon-name {
-    min-width: 33px;
     color: var(--primary-icon-color);
     @include mixins.center-content();
   }
@@ -28,15 +33,21 @@
     border: 1px solid var(--secondary-icon-color);
     background-color: var(--hover-color);
     .icon-name {
-      min-width: 33px;
-      min-height: 20px;
       font-weight: 600;
       color: var(--secondary-icon-color);
       @include mixins.center-content();
     }
-    .ff-icon-color {
-      path {
-        color: var(--secondary-icon-color);
+    .button-icon {
+      width: 20px;
+      height: 20px;
+      border: 1px solid transparent;
+      border-radius: 50%;
+      @include mixins.center-content();
+      background-color: var(--secondary-icon-color);
+      .ff-icon-color {
+        path {
+          color: var(--primary-icon-color);
+        }
       }
     }
   }

package/src/components/IconButton/IconButton.stories.tsx

@@ -12,10 +12,18 @@ const meta: Meta<typeof IconButton> = {
 
 type Story = StoryObj<typeof IconButton>;
 
+export const Default: Story = {
+  args: {
+    label: 'Script',
+    iconName: 'download_icon',
+    onClick: () => {},
+  },
+};
+
 export const PrimaryIconButton: Story = {
   render: () => {
     const name = 'Project';
-    const icon = 'plus_icon';
+    const icon = 'plus_user_icon';
     const onClick = () => {};
 
     return <IconButton label={name} iconName={icon} onClick={onClick} />;

package/src/components/IconButton/IconButton.tsx

@@ -7,17 +7,19 @@ import { IconButtonProps } from './types';
 
 const IconButton: React.FC<IconButtonProps> = ({
   label,
-  iconName = 'plus_icon',
+  iconName = 'plus_user_icon',
   onClick,
 }) => {
   return (
     <button onClick={onClick} className={classNames('ff-plus-icon')}>
+      <div className={classNames('button-icon')}>
       <Icon
-        height={20}
-        width={20}
+        height={12}
+        width={12}
         name={iconName}
         className={'ff-icon-color'}
       />
+      </div>
       <Typography as="div" textAlign="center" className="icon-name">
         {label}
       </Typography>

package/src/components/Input/Input.scss

@@ -11,6 +11,9 @@
     border-radius: 4px;
     outline: none;
     line-height: 18px;
+    &--medium {
+      padding: 10px 9px;
+    }
     @extend .fontSm;
     &:disabled {
       cursor: not-allowed;
@@ -44,7 +47,9 @@
     line-height: 18px;
     margin-top: 1px;
     transition: all 0.3s ease-in-out;
-
+    &--medium {
+      line-height: 25px;
+    }
     .ff-input-label {
       color: var(--input-default-label-color);
       &--danger {

package/src/components/Input/Input.tsx

@@ -22,6 +22,7 @@ const Input = ({
   minValue = -Infinity,
   maxValue = Infinity,
   transparentBackground = false,
+  size = 'small',
   ...props
 }: InputProps) => {
   return (
@@ -33,9 +34,12 @@ const Input = ({
     >
       <label
         htmlFor={name}
-        className={classNames('ff-input-label-container', {
-          'ff-input-label-container--danger': !!error,
-        })}
+        className={classNames(
+          `ff-input-label-container ff-input-label-container--${size}`,
+          {
+            'ff-input-label-container--danger': !!error,
+          }
+        )}
       >
         {required && <span className="required-asterisk">*</span>}
         <span
@@ -55,7 +59,7 @@ const Input = ({
         spellCheck={false}
         id={name}
         className={classNames(
-          `ff-input ff-input--${variant} default-input `,
+          `ff-input ff-input-${variant} default-input ff-input--${size}`,
           {
             ['ff-input--transparentBackground']: !!transparentBackground,
             'ff-input--no-hover': !!value,

package/src/components/Input/types.ts

@@ -74,4 +74,8 @@ export interface InputProps {
    * background of the input field prop
    */
   transparentBackground?: boolean;
+  /**
+   * size for the input field
+   */
+  size?: 'small' | 'medium';
 }

package/src/components/MiniModal/MiniModal.scss

@@ -1,3 +1,13 @@
+@mixin arrow-before($width, $height, $top, $left) {
+  content: '';
+  position: absolute;
+  width: $width;
+  height: $height;
+  border-radius: 50px;
+  background-color: var(--ff-mini-modal-border);
+  top: $top;
+  left: $left;
+}
 .ff-mini-edit-modal-container {
   width: fit-content;
   padding: 0;
@@ -20,16 +30,24 @@
       bottom: 100%;
       left: 30px;
       border-width: 0 10px 10px 10px;
+      padding: 0 3px 0 0;
       border-color: transparent transparent var(--ff-mini-modal-border)
         transparent;
-      filter: drop-shadow(0 -2px 1px var(--ff-mini-modal-box-shadow));
+      filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));
+      &::before {
+        @include arrow-before(3px, 4px, -0.5px, 0);
+      }
     }
     &.popover-arrow-left {
       left: -15px; //align the arrow with modal for the right side modal
       border-width: 10px 10px 10px 0;
       border-color: transparent var(--ff-mini-modal-border) transparent
         transparent;
-      filter: drop-shadow(-2px 0 1px var(--ff-mini-modal-box-shadow));
+      filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
+      padding: 3px 1px 0 0;
+      &::before {
+        @include arrow-before(4px, 3px, 0, 0);
+      }
     }
     &.popover-arrow-bottom {
       top: 100%;
@@ -37,22 +55,30 @@
       border-width: 10px 10px 0 10px;
       border-color: var(--ff-mini-modal-border) transparent transparent
         transparent; // Bottom part of the arrow with the correct color
-      filter: drop-shadow(0 2px 1px var(--ff-mini-modal-box-shadow));
+      filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
+      padding: 0 3px 0 0;
+      &::before {
+        @include arrow-before(3px, 3px, -2px, 0);
+      }
     }
     &.popover-arrow-right {
       right: -10px;
-      top: 75px;
+      top: 66px;
       border-width: 10px 0 10px 10px;
       border-color: transparent transparent transparent
         var(--ff-mini-modal-border);
-      filter: drop-shadow(2px 0 1px var(--ff-mini-modal-box-shadow));
+      filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));
+      padding: 3px 1px 0 0;
+      &::before {
+        @include arrow-before(3px, 3px, 0, -2px);
+      }
     }
 
     &.left-top-arrow {
       top: 10%;
     }
     &.left-middle-arrow {
-      top: 50%;
+      top: 45%;
     }
   }
   .wrapped-div {
@@ -97,8 +123,13 @@
     border-radius: 7px;
     margin: 0 0 0 -5px;
     height: 100%;
-    box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
-
+    box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);
+    &.mini-edit-modal-wrapper-shadow {
+      box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
+    }
+    &.mini-edit-modal-arrow-shadow {
+      box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);
+    }
     header {
       border-radius: 4px 4px 0 0;
     }