pixel-react 1.1.2 → 1.1.3

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.3",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/rollup.config.mjs

@@ -14,6 +14,7 @@ const packageJson = requireFile('./package.json');
 export default [
   {
     input: 'src/index.ts',
+    context: 'window',
     output: [
       {
         file: packageJson.main, // CJS output
@@ -31,7 +32,8 @@ export default [
     plugins: [
       peerDepsExternal(),
       resolve(),
-      commonjs(),
+
+      commonjs({ transformMixedEsModules: true }),
       typescript(),
       postcss({
         extensions: ['.scss'],
@@ -51,7 +53,11 @@ export default [
   {
     input: 'lib/index.d.ts',
     output: [
-      { file: 'lib/index.d.ts', format: 'es', inlineDynamicImports: true },
+      {
+        file: 'lib/index.d.ts',
+        format: 'es',
+        inlineDynamicImports: true,
+      },
     ],
     plugins: [dts()],
     external: [/\.scss$/],

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/Button/index.ts

@@ -1 +1 @@
-export { default } from './Button';
+export { default } from './Button';

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';
 

package/src/components/VariableInput/VariableInput.scss

@@ -0,0 +1,128 @@
+.ff_variable_input_container {
+  .ff_label_container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+
+    &.ff_danger_label {
+      .ff_input_label {
+        color: var(--error);
+      }
+
+      .ff_required_asterisk {
+        color: var(--error);
+      }
+    }
+  }
+
+  .ff_required_asterisk {
+    color: var(--input-error-text-color);
+    font-size: 1.1em;
+    margin-right: 4px;
+  }
+
+  .ff_input_label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color);
+
+    &.ff_no_hover {
+      color: var(--toggle-disable-icon-color);
+    }
+
+    &.ff_disabled_label {
+      color: var(--toggle-disable-icon-color);
+      cursor: not-allowed;
+    }
+
+    &.ff_danger_label {
+      color: var(--error);
+    }
+  }
+
+  .ff_content_editable {
+    min-width: 8rem;
+    border: 1px solid var(--input-default-border-color);
+    padding: 8px;
+    min-height: 30px;
+    border-radius: 4px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    transition: border-color 0.2s ease;
+    position: relative;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+
+    .ff_var_red {
+      color: var(--status-rejected-text-color);
+    }
+
+    .ff_var_def_color {
+      color: var(--text-color);
+    }
+
+    .ff_var_green {
+      color: var(--status-success-text-color);
+    }
+
+    &::after {
+      content: '*';
+      color: var(--input-error-text-color);
+      font-size: 1.2em;
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      display: none;
+    }
+
+    &.ff_required::after {
+      display: inline;
+    }
+
+    &.ff_required_empty:focus-within,
+    &.ff_required_empty:focus {
+      border-color: var(--input-error-text-color);
+    }
+
+    &:empty::before {
+      content: attr(data-placeholder);
+      color: var(--ff-search-filed-placeholder-text);
+      position: absolute;
+      user-select: none;
+      pointer-events: none;
+      font-size: medium;
+    }
+
+    &.ff_disabled {
+      pointer-events: none;
+      opacity: 0.5;
+      background-color: var(--input-default-border-color);
+    }
+
+    &.ff_invalid_input {
+      border: 1px solid var(--input-error-text-color);
+    }
+  }
+
+  .ff_suggestions {
+    border: 1px solid var(--input-default-border-color);
+    margin-top: 4px;
+    padding: 4px;
+    border-radius: 4px;
+    list-style-type: none;
+    background-color: var(--ff-select-background-color);
+    max-height: 150px;
+    overflow-y: auto;
+  }
+
+  .ff_suggestion_item {
+    padding: 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--ff-select-background-color);
+    }
+  }
+}

package/src/components/VariableInput/VariableInput.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import VariableInput from './VariableInput';
+
+const meta: Meta<typeof VariableInput> = {
+  title: 'Components/VariableInput',
+  component: VariableInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof VariableInput>;
+
+const defaultArgs = {
+  name: 'input',
+  label: '',
+  disabled: false,
+  placeholder: 'Enter URL',
+  value: '',
+  type: 'url',
+  list:['name','urlName','passwork','emailId','default','errorVar']
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Enter URL',
+    type: 'url',
+  },
+};
+export default meta;