pixel-react 1.1.2 → 1.1.4

package/lib/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/styleguide/colorpalette/colorpalette.stories.tsx","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.stories.tsx","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.stories.tsx","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addbutton.stories.tsx","../src/components/addresourcebutton/addbutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.stories.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.tsx","../src/components/allprojectsdropdown/index.ts","../src/components/appheader/appheader.stories.tsx","../src/components/appheader/appheader.tsx","../src/components/appheader/index.ts","../src/components/appheader/types.ts","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/dashboarddonutchart/dashboarddonutchart.stories.tsx","../src/components/charts/dashboarddonutchart/dashboarddonutchart.tsx","../src/components/charts/dashboarddonutchart/index.ts","../src/components/charts/dashboarddonutchart/types.ts","../src/components/charts/donutchart/donutchart.stories.tsx","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/piechart/piechart.stories.tsx","../src/components/charts/piechart/piechart.tsx","../src/components/charts/piechart/index.ts","../src/components/charts/piechart/types.ts","../src/components/charts/radialchart/radialchart.stories.tsx","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.stories.tsx","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.stories.tsx","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/datepicker/datepicker.stories.tsx","../src/components/datepicker/datepicker.tsx","../src/components/datepicker/timepicker.tsx","../src/components/datepicker/index.ts","../src/components/datepicker/types.ts","../src/components/draganddrop/draganddrop.stories.tsx","../src/components/draganddrop/draganddrop.ts","../src/components/draganddrop/draganddroplist.tsx","../src/components/draganddrop/index.ts","../src/components/drawer/drawer.stories.tsx","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/expandablemenu/expandablemenu.stories.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/ff_captcha/recaptcha.tsx","../src/components/ff_captcha/captcha.stories.tsx","../src/components/ff_captcha/index.ts","../src/components/ff_captcha/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.stories.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.stories.tsx","../src/components/form/form.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.stories.tsx","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.stories.tsx","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.stories.tsx","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/iconbutton/iconbutton.stories.tsx","../src/components/iconbutton/iconbutton.tsx","../src/components/iconbutton/index.ts","../src/components/iconbutton/types.ts","../src/components/input/input.stories.tsx","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.stories.tsx","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/lazyload/lazyload.stories.tsx","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/menuoption/menuoption.stories.tsx","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.stories.tsx","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/modal/modal.stories.tsx","../src/components/modal/modal.tsx","../src/components/modal/index.tsx","../src/components/modal/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.stories.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/nlpinput/nlpinput.stories.tsx","../src/components/nlpinput/nlpinput.tsx","../src/components/nlpinput/index.ts","../src/components/nlpinput/type.tsx","../src/components/nlpinput/components/nlpdropdown/nlpdropdowntype.ts","../src/components/nlpinput/components/nlpdropdown/nlpdropdown.tsx","../src/components/radiobutton/radiobutton.stories.tsx","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.stories.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/search/search.stories.tsx","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.stories.tsx","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown/dropdown.tsx","../src/components/select/components/dropdown/dropdowntypes.ts","../src/components/statedropdown/statedropdown.stories.tsx","../src/components/statedropdown/statedropdown.tsx","../src/components/statedropdown/statedropdowntypes.tsx","../src/components/statedropdown/index.ts","../src/components/statusbutton/statusbutton.stories.tsx","../src/components/statusbutton/statusbutton.tsx","../src/components/statusbutton/index.ts","../src/components/statusbutton/types.ts","../src/components/table/table.stories.tsx","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.stories.tsx","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabs/tabs.stories.tsx","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.stories.tsx","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.stories.tsx","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toggle/toggle.stories.tsx","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/tooltip/tooltip.stories.tsx","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.stories.tsx","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.stories.tsx","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.stories.tsx","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.stories.tsx","../src/utils/debounce/debounce.ts","../src/utils/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/find/findandinsert.stories.tsx","../src/utils/find/findandinsert.ts","../src/utils/getencrypteddata/getencrypteddata.stories.tsx","../src/utils/getencrypteddata/getencrypteddata.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/throttle/throttle.stories.tsx","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/styleguide/colorpalette/colorpalette.stories.tsx","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.stories.tsx","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.stories.tsx","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addbutton.stories.tsx","../src/components/addresourcebutton/addbutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.stories.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.tsx","../src/components/allprojectsdropdown/index.ts","../src/components/appheader/appheader.stories.tsx","../src/components/appheader/appheader.tsx","../src/components/appheader/index.ts","../src/components/appheader/types.ts","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/dashboarddonutchart/dashboarddonutchart.stories.tsx","../src/components/charts/dashboarddonutchart/dashboarddonutchart.tsx","../src/components/charts/dashboarddonutchart/index.ts","../src/components/charts/dashboarddonutchart/types.ts","../src/components/charts/donutchart/donutchart.stories.tsx","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/piechart/piechart.stories.tsx","../src/components/charts/piechart/piechart.tsx","../src/components/charts/piechart/index.ts","../src/components/charts/piechart/types.ts","../src/components/charts/radialchart/radialchart.stories.tsx","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.stories.tsx","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.stories.tsx","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/datepicker/datepicker.stories.tsx","../src/components/datepicker/datepicker.tsx","../src/components/datepicker/timepicker.tsx","../src/components/datepicker/index.ts","../src/components/datepicker/types.ts","../src/components/draganddrop/draganddrop.stories.tsx","../src/components/draganddrop/draganddrop.ts","../src/components/draganddrop/draganddroplist.tsx","../src/components/draganddrop/index.ts","../src/components/drawer/drawer.stories.tsx","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/expandablemenu/expandablemenu.stories.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/ff_captcha/recaptcha.tsx","../src/components/ff_captcha/captcha.stories.tsx","../src/components/ff_captcha/index.ts","../src/components/ff_captcha/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.stories.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.stories.tsx","../src/components/form/form.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.stories.tsx","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.stories.tsx","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.stories.tsx","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/iconbutton/iconbutton.stories.tsx","../src/components/iconbutton/iconbutton.tsx","../src/components/iconbutton/index.ts","../src/components/iconbutton/types.ts","../src/components/input/input.stories.tsx","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.stories.tsx","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/lazyload/lazyload.stories.tsx","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/menuoption/menuoption.stories.tsx","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.stories.tsx","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/modal/modal.stories.tsx","../src/components/modal/modal.tsx","../src/components/modal/index.tsx","../src/components/modal/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.stories.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/nlpinput/nlpinput.stories.tsx","../src/components/nlpinput/nlpinput.tsx","../src/components/nlpinput/index.ts","../src/components/nlpinput/type.tsx","../src/components/nlpinput/components/nlpdropdown/nlpdropdowntype.ts","../src/components/nlpinput/components/nlpdropdown/nlpdropdown.tsx","../src/components/paper/paper.stories.tsx","../src/components/paper/paper.tsx","../src/components/paper/index.ts","../src/components/paper/types.ts","../src/components/radiobutton/radiobutton.stories.tsx","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.stories.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/search/search.stories.tsx","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.stories.tsx","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown/dropdown.tsx","../src/components/select/components/dropdown/dropdowntypes.ts","../src/components/statedropdown/statedropdown.stories.tsx","../src/components/statedropdown/statedropdown.tsx","../src/components/statedropdown/statedropdowntypes.tsx","../src/components/statedropdown/index.ts","../src/components/statusbutton/statusbutton.stories.tsx","../src/components/statusbutton/statusbutton.tsx","../src/components/statusbutton/index.ts","../src/components/statusbutton/types.ts","../src/components/table/table.stories.tsx","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.stories.tsx","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabs/tabs.stories.tsx","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.stories.tsx","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.stories.tsx","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toggle/toggle.stories.tsx","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/tooltip/tooltip.stories.tsx","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.stories.tsx","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/components/variableinput/variableinput.stories.tsx","../src/components/variableinput/variableinput.tsx","../src/components/variableinput/index.ts","../src/components/variableinput/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.stories.tsx","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.stories.tsx","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.stories.tsx","../src/utils/debounce/debounce.ts","../src/utils/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/findandinsert/findandinsert.stories.tsx","../src/utils/findandinsert/findandinsert.ts","../src/utils/getencrypteddata/getencrypteddata.stories.tsx","../src/utils/getencrypteddata/getencrypteddata.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/throttle/throttle.stories.tsx","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.3"}

package/lib/utils/ffID/ffID.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ffid from './ffid';
+import { ffid } from './ffid';
 declare const meta: Meta<typeof ffid>;
 type Story = StoryObj;
 export declare const Primary: Story;

package/lib/utils/ffID/ffid.d.ts

@@ -1,2 +1 @@
-declare const ffid: () => string;
-export default ffid;
+export declare const ffid: () => string;

package/lib/utils/findAndInsert/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/findAndInsert/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/lib/utils/getEncryptedData/getEncryptedData.d.ts

@@ -1,2 +1 @@
-declare const getEncryptedData: (data: string, publicKey: string) => string | false;
-export default getEncryptedData;
+export declare const getEncryptedData: (data: string, publicKey: string) => string | false;

package/package.json

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

package/src/assets/Themes/BaseTheme.scss

@@ -151,6 +151,8 @@ $base-theme: (
   ff-search-filed-clear-text: #71347b,
   ff-search-filed-placeholder-text: #a3a3a3,
   ff-search-filed-close-Icon: #14041c,
+  ff-paper-background-color:#f5f5f5,
+  ff-paper-dark-background-color:#d1c4e9,
 
   primary-icon-color: #ffffff,
   secondary-icon-color: #71347b,

package/src/assets/Themes/DarkTheme.scss

@@ -160,6 +160,8 @@ $dark-theme: (
   ff-search-filed-clear-text: #71347b,
   ff-search-filed-placeholder-text: #a3a3a3,
   ff-search-filed-close-Icon: #14041c,
+  ff-paper-background-color:#f5f5f5,
+  ff-paper-dark-background-color:#d1c4e9,
 
   primary-icon-color: #ffffff,
   secondary-icon-color: #71347b,

package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import ffid from '../../utils/ffID/ffid';
+import { ffid } from '../../utils/ffID/ffid';
 import { truncateText } from '../../utils/truncateText/truncateText';
 import './AllProjectsDropdown.scss';
 import classNames from 'classnames';

package/src/components/AppHeader/AppHeader.stories.tsx

@@ -1,5 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import AppHeader from './AppHeader';
+import {
+  appHeaderMenuItemProps,
+  appHeaderSubMenuItemProps,
+  appHeaderQuickMenuItemProps,
+} from './types';
 import Icon from '../Icon';
 import { useState } from 'react';
 
@@ -23,22 +28,23 @@ const defaultArgs = {
 };
 
 const headerMenuItems = [
+  { menuLabel: 'Dashboard', menuName: 'Dashboard', subMenuItems: [] },
   {
-    menuName: 'Dashboard',
-    subMenuItems: [],
-  },
-  {
+    menuLabel: 'Repo',
     menuName: 'Repo',
     subMenuItems: [
       {
+        subMenuLabel: 'Elements',
         subMenuName: 'Elements',
         quickMenuItems: [],
       },
       {
+        subMenuLabel: 'Program Elements',
         subMenuName: 'Program Elements',
         quickMenuItems: [],
       },
       {
+        subMenuLabel: 'Step Groups',
         subMenuName: 'Step Groups',
         quickMenuItems: [
           {
@@ -58,13 +64,16 @@ const headerMenuItems = [
     ],
   },
   {
+    menuLabel: 'Test Data',
     menuName: 'Test Data',
     subMenuItems: [],
   },
   {
+    menuLabel: 'Test Dev',
     menuName: 'Test Dev',
     subMenuItems: [
       {
+        subMenuLabel: 'Scripts',
         subMenuName: 'Scripts',
         quickMenuItems: [
           {
@@ -90,6 +99,7 @@ const headerMenuItems = [
         ],
       },
       {
+        subMenuLabel: 'Executions',
         subMenuName: 'Executions',
         quickMenuItems: [],
       },
@@ -121,14 +131,14 @@ export const Controlled: Story = {
     const [selectedMenuItem, setSelectedMenuItem] = useState('Test Data');
     const [selectedSubMenuItem, setSelectedSubMenuItem] = useState('');
     const [selectedQuickMenuItem, setSelectedQuickMenuItem] = useState('');
-    const handleMenuClick = (item: string) => {
-      setSelectedMenuItem(item);
+    const handleMenuClick = (item: appHeaderMenuItemProps) => {
+      setSelectedMenuItem(item.menuLabel);
     };
-    const handleSubMenuClick = (item: string) => {
-      setSelectedSubMenuItem(item);
+    const handleSubMenuClick = (item: appHeaderSubMenuItemProps) => {
+      setSelectedSubMenuItem(item.subMenuLabel);
     };
-    const handleQuickMenuClick = (item: string) => {
-      setSelectedQuickMenuItem(item);
+    const handleQuickMenuClick = (item: appHeaderQuickMenuItemProps) => {
+      setSelectedQuickMenuItem(item.quickMenuIconName);
     };
 
     return (

package/src/components/AppHeader/AppHeader.tsx

@@ -3,10 +3,14 @@ import Icon from '../Icon';
 import './AppHeader.scss';
 import classNames from 'classnames';
 import Typography from '../Typography';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+// import AllProjectsDropdown from '../AllProjectsDropdown';
 
 const AppHeader: React.FC<AppHeaderProps> = ({
   logoIconName = 'fireflink_icon',
+  leftContent,
   rightContent,
+  projectsList,
   appHeaderMenuItems,
   selectedMenu,
   selectedSubMenu,
@@ -21,35 +25,38 @@ const AppHeader: React.FC<AppHeaderProps> = ({
         <div className="ff-app-header-logo-icon">
           <Icon color="" name={logoIconName} height={24} width={21} />
         </div>
+        {leftContent && (
+          <div className="ff-app-header-left-content">{leftContent}</div>
+        )}
         <div className="ff-app-header-nav-bar">
-          <div>All projects</div>
+          {checkEmpty(projectsList) && (
+            <div>{/* <AllProjectsDropdown /> */}</div>
+          )}
           <div className="ff-app-header-nav-bar-items fontSm">
             {appHeaderMenuItems.map((menuItem) => {
               return (
                 <div
                   className={classNames('ff-app-header-nav-bar-item', {
                     ['ff-app-header-nav-bar-item--selected']:
-                      menuItem.menuName === selectedMenu,
+                      menuItem.menuLabel === selectedMenu,
                   })}
-                  key={menuItem.menuName}
-                  onClick={() => onMenuClick(menuItem.menuName)}
+                  key={menuItem.menuLabel}
+                  onClick={() => onMenuClick(menuItem)}
                 >
                   <Typography
                     as="div"
                     className="ff-app-header-nav-bar-item-label"
                     lineHeight="18px"
                   >
-                    {menuItem.menuName}
+                    {menuItem.menuLabel}
                   </Typography>
-                  {menuItem.menuName === selectedMenu &&
+                  {menuItem.menuLabel === selectedMenu &&
                     menuItem?.subMenuItems &&
                     menuItem.subMenuItems.map((subMenuItem) => {
                       return (
                         <div
-                          key={subMenuItem.subMenuName}
-                          onClick={() =>
-                            onSubMenuClick(subMenuItem.subMenuName)
-                          }
+                          key={subMenuItem.subMenuLabel}
+                          onClick={() => onSubMenuClick(subMenuItem)}
                           className="ff-app-header-submenu-container"
                         >
                           <Typography
@@ -58,14 +65,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                               'ff-app-header-nav-bar-submenu-item',
                               {
                                 ['ff-app-header-nav-bar-submenu-item--selected']:
-                                  subMenuItem.subMenuName === selectedSubMenu,
+                                  subMenuItem.subMenuLabel === selectedSubMenu,
                               }
                             )}
                             lineHeight="18px"
                           >
-                            {subMenuItem.subMenuName}
+                            {subMenuItem.subMenuLabel}
                           </Typography>
-                          {subMenuItem.subMenuName === selectedSubMenu &&
+                          {subMenuItem.subMenuLabel === selectedSubMenu &&
                             subMenuItem?.quickMenuItems && (
                               <div className="ff-app-header-quickmenu-container">
                                 <div>
@@ -78,9 +85,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                                         <div
                                           key={quickMenuItem.quickMenuIconName}
                                           onClick={() =>
-                                            onQuickMenuClick(
-                                              quickMenuItem.quickMenuName
-                                            )
+                                            onQuickMenuClick(quickMenuItem)
                                           }
                                           className={classNames(
                                             'ff-app-header-nav-bar-quickmenu-item',
@@ -116,7 +121,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
             <Icon name="more" className="ff-app-header-more-icon" />
           </div>
         </div>
-        <div className="ff-app-header-right-content">{rightContent}</div>
+        {rightContent && (
+          <div className="ff-app-header-right-content">{rightContent}</div>
+        )}
       </div>
     </>
   );

package/src/components/AppHeader/types.ts

@@ -2,26 +2,30 @@ import { ReactNode } from 'react';
 
 export interface AppHeaderProps {
   logoIconName: string;
-  rightContent: ReactNode;
-  projectsList: string[];
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+  projectsList?: string[];
   appHeaderMenuItems: appHeaderMenuItemProps[];
-  appHeaderHiddenMenuItems: string[];
+  appHeaderHiddenMenuItems?: string[];
   selectedMenu: string;
-  selectedSubMenu : string;
-  selectedQuickMenu : string;
-  onMenuClick ?:  (text: any) => void;
-  onSubMenuClick ?:  (text: any) => void;
-  onQuickMenuClick ?:  (text: any) => void;
+  selectedSubMenu?: string;
+  selectedQuickMenu?: string;
+  onMenuClick?: (text: any) => void;
+  onSubMenuClick?: (text: any) => void;
+  onQuickMenuClick?: (text: any) => void;
 }
 export interface appHeaderMenuItemProps {
-  menuName: string;
-  subMenuItems: appHeaderSubMenuItemProps[];
+  menuLabel: string;
+  menuName?: string;
+  subMenuItems?: appHeaderSubMenuItemProps[];
 }
 export interface appHeaderSubMenuItemProps {
-  subMenuName: string;
-  quickMenuItems: appHeaderQuickMenuItemProps[];
+  subMenuLabel: string;
+  subMenuName?: string;
+  quickMenuItems?: appHeaderQuickMenuItemProps[];
 }
 export interface appHeaderQuickMenuItemProps {
-  quickMenuName: string;
+  quickMenuLabel?: string;
+  quickMenuName?: string;
   quickMenuIconName: string;
 }

package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx

@@ -7,7 +7,7 @@ import useClickOutside from '../../../../hooks/useClickOutside';
 import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
 import './NlpDropdown.scss';
 import Typography from '../../../Typography';
-import ffid from '../../../../utils/ffID/ffid';
+import { ffid } from '../../../../utils/ffID/ffid';
 import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
 

package/src/components/Paper/Paper.scss

@@ -0,0 +1,13 @@
+// Rounded corners
+.ff_rounded_lg {
+  border-radius: 8px;
+}
+
+.ff_paper_basic_style {
+  padding: 20px;
+  background-color: var(--ff-paper-dark-background-color);
+}
+.ff_paper_default_style {
+  padding: 20px;
+  background-color: var(--ff-paper-background-color);
+}

package/src/components/Paper/Paper.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Paper from './Paper';
+import { Children } from 'react';
+import Typography from '../Typography';
+import './Paper.scss';
+
+const meta: Meta<typeof Paper> = {
+  title: 'Components/Paper',
+  component: Paper,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Paper>;
+
+const defaultArgs = {
+  Children,
+  className: '',
+  rounded: false,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    children: <p>This is a simple Paper component with default styles.</p>,
+    className: 'ff_paper_default_style',
+  },
+};
+
+export const PrimaryPaper: Story = {
+  render: () => {
+    return (
+      <Paper className="ff_paper_default_style">
+        <Typography>
+          This Paper component has custom background color and padding.
+        </Typography>
+      </Paper>
+    );
+  },
+};
+
+export const PaperWithLowShadow: Story = {
+  render: () => {
+    return (
+      <Paper className="ff_paper_default_style">
+        <Typography>This Paper component has a shadow depth of 6.</Typography>
+      </Paper>
+    );
+  },
+};
+
+export const PaperWithHighShadow: Story = {
+  render: () => {
+    return (
+      <Paper className="ff_paper_basic_style" rounded>
+        <Typography>
+          This Paper component combines custom styles, shadow depth of 10, and
+          rounded corners.
+        </Typography>
+      </Paper>
+    );
+  },
+};
+
+export const PaperWithRounded: Story = {
+  render: () => {
+    return (
+      <Paper rounded className="ff_paper_default_style">
+        <Typography>This Paper component has Rounded Corners.</Typography>
+      </Paper>
+    );
+  },
+};
+
+export default meta;

package/src/components/Paper/Paper.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import './Paper.scss';
+import { PaperProps } from './types';
+
+const Paper = ({ children, className = '', rounded = false }: PaperProps) => {
+  const dynamicClassName = classNames(
+    { ['ff_rounded_lg']: rounded },
+    className
+  );
+
+  return <div className={dynamicClassName}>{children}</div>;
+};
+
+export default Paper;

package/src/components/Paper/index.ts

@@ -0,0 +1 @@
+export {default} from './Paper'

package/src/components/Paper/types.ts

@@ -0,0 +1,19 @@
+export interface PaperProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string;
+  /**
+   * If `true`, rounded corners are Enabled.
+   * @default false
+   */
+  rounded?: boolean;
+}
+
+
+
+

package/src/components/Select/components/Dropdown/Dropdown.tsx

@@ -4,7 +4,7 @@ import useClickOutside from '../../../../hooks/useClickOutside';
 import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
 import './Dropdown.scss';
 import Typography from '../../../Typography';
-import ffid from '../../../../utils/ffID/ffid';
+import { ffid } from '../../../../utils/ffID/ffid';
 import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';