pixel-react-excel-sheet 1.2.0

package/lib/tsconfig.tsbuildinfo

@@ -0,0 +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/allprojectsdropdown/types.ts","../src/components/appheader/appheader.stories.tsx","../src/components/appheader/appheader.tsx","../src/components/appheader/index.ts","../src/components/appheader/types.ts","../src/components/attachmentbutton/attachmentbutton.stories.tsx","../src/components/attachmentbutton/attachmentbutton.tsx","../src/components/attachmentbutton/index.ts","../src/components/attachmentbutton/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/excelfile/changeexcelstyles.tsx","../src/components/excelfile/excelfile.stories.tsx","../src/components/excelfile/types.ts","../src/components/excelfile/index.ts","../src/components/excelfile/colorbarselector/colorbarselector.tsx","../src/components/excelfile/contextmenu/contextmenu.tsx","../src/components/excelfile/excelfile/excelfile.tsx","../src/components/excelfile/excelfile/excel/activecell.tsx","../src/components/excelfile/excelfile/excel/cell.tsx","../src/components/excelfile/excelfile/excel/columnindicator.tsx","../src/components/excelfile/excelfile/excel/copied.tsx","../src/components/excelfile/excelfile/excel/cornerindicator.tsx","../src/components/excelfile/excelfile/excel/dataeditor.tsx","../src/components/excelfile/excelfile/excel/dataviewer.tsx","../src/components/excelfile/excelfile/excel/floatingrect.tsx","../src/components/excelfile/excelfile/excel/headerrow.tsx","../src/components/excelfile/excelfile/excel/row.tsx","../src/components/excelfile/excelfile/excel/rowindicator.tsx","../src/components/excelfile/excelfile/excel/selected.tsx","../src/components/excelfile/excelfile/excel/spreadsheet.tsx","../src/components/excelfile/excelfile/excel/table.tsx","../src/components/excelfile/excelfile/excel/actions.ts","../src/components/excelfile/excelfile/excel/aremodelsequal.ts","../src/components/excelfile/excelfile/excel/context.ts","../src/components/excelfile/excelfile/excel/index.ts","../src/components/excelfile/excelfile/excel/matrix.ts","../src/components/excelfile/excelfile/excel/point-range.ts","../src/components/excelfile/excelfile/excel/point.ts","../src/components/excelfile/excelfile/excel/reducer.ts","../src/components/excelfile/excelfile/excel/selection.ts","../src/components/excelfile/excelfile/excel/types.ts","../src/components/excelfile/excelfile/excel/use-dispatch.ts","../src/components/excelfile/excelfile/excel/use-selector.ts","../src/components/excelfile/excelfile/excel/util.ts","../src/components/excelfile/excelfile/excel/engine/engine.ts","../src/components/excelfile/excelfile/excel/engine/formula.ts","../src/components/excelfile/excelfile/excel/engine/index.ts","../src/components/excelfile/excelfile/excel/engine/point-graph.ts","../src/components/excelfile/excelfile/excel/engine/point-hash.ts","../src/components/excelfile/excelfile/excel/engine/point-set.ts","../src/components/excelfile/excelfile/excel/typings/fast-formula-parser.d.ts","../src/components/excelfile/excelsheetbar/excelsheetbar.tsx","../src/components/excelfile/exceltoolbar/exceltoolbar.tsx","../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/iconradiogroup/iconradiogroup.stories.tsx","../src/components/iconradiogroup/iconradiogroup.tsx","../src/components/iconradiogroup/index.ts","../src/components/iconradiogroup/type.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/machineinputfield/machineinputfield.stories.tsx","../src/components/machineinputfield/machineinputfield.tsx","../src/components/machineinputfield/index.ts","../src/components/machineinputfield/types.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/sequentialconnectingbranch/sequentialconnectingbranch.stories.tsx","../src/components/sequentialconnectingbranch/sequentialconnectingbranch.tsx","../src/components/sequentialconnectingbranch/index.ts","../src/components/sequentialconnectingbranch/types.ts","../src/components/sequentialconnectingbranch/components/addbrowsermodal/addbrowsermodal.tsx","../src/components/sequentialconnectingbranch/components/addbrowsermodal/types.ts","../src/components/sequentialconnectingbranch/components/branches/branches.tsx","../src/components/sequentialconnectingbranch/components/branches/types.ts","../src/components/sequentialconnectingbranch/components/connectingbranches/connectingbranches.tsx","../src/components/sequentialconnectingbranch/components/connectingbranches/types.ts","../src/components/sequentialconnectingbranch/components/datasetlistmodal/datasetlistmodal.tsx","../src/components/sequentialconnectingbranch/components/datasetlistmodal/types.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/TableCell/TableCell.d.ts

@@ -0,0 +1 @@
+export declare const prepareData: (dataObj: any, columnObj: any) => any;

package/lib/utils/checkEmpty/checkEmpty.d.ts

@@ -0,0 +1,3 @@
+type valueType = any;
+export declare const checkEmpty: (value: valueType) => boolean;
+export {};

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (value: any) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/compareArrays/compareArrays.d.ts

@@ -0,0 +1,11 @@
+export type AnyObject = Record<string, unknown>;
+/**
+ * Compare two arrays for equality.
+ * This function checks if both arrays contain the same elements in the same order,
+ * including nested structures.
+ *
+ * @param arr1 - The first array to compare.
+ * @param arr2 - The second array to compare.
+ * @returns - A boolean indicating if the arrays are equal.
+ */
+export declare const compareArrays: (arr1: unknown[], arr2: unknown[]) => boolean;

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (arr1: unknown[], arr2: unknown[]) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/compareObjects/compareObjects.d.ts

@@ -0,0 +1,2 @@
+export type AnyObject = Record<string, unknown>;
+export declare const compareObjects: (obj1: AnyObject | null, obj2: AnyObject | null) => boolean;

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (obj1: import("./compareObjects").AnyObject | null, obj2: import("./compareObjects").AnyObject | null) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/debounce/debounce.d.ts

@@ -0,0 +1,6 @@
+type Callback = (...args: any[]) => void;
+export interface DebouncedFunction extends Function {
+    cancel: () => void;
+}
+export declare const debounce: (func: Callback, delay: number) => DebouncedFunction;
+export {};

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (func: (...args: any[]) => void, delay: number) => import("./debounce").DebouncedFunction;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1 @@
+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

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

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (data: string, publicKey: string) => string | false;
+};
+export default _default;
+export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/getExtension/getExtension.d.ts

@@ -0,0 +1,4 @@
+type valueType = File | string;
+export declare const getExtension: (value: valueType) => string | undefined;
+export declare const getExtensionWithPeriod: (value: valueType) => string;
+export {};

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (value: string | File) => string | undefined;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/throttle/throttle.d.ts

@@ -0,0 +1,6 @@
+type Callback = (...args: any[]) => void;
+export interface ThrottledFunction extends Function {
+    cancel: () => void;
+}
+export declare const throttle: (func: Callback, limit: number) => ThrottledFunction;
+export {};

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (func: (...args: any[]) => void, limit: number) => import("./throttle").ThrottledFunction;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/truncateText/truncateText.d.ts

@@ -0,0 +1 @@
+export declare const truncateText: (text: string, maxLength: number) => string;

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (text: string, maxLength: number) => string;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "pixel-react-excel-sheet",
+  "description": "Great for pixel-perfect, design-focused components in React",
+  "version": "1.2.0",
+  "main": "lib/index.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "author": {
+    "name": "Padmakant Baloji"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/preset-react": "^7.25.9",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@storybook/addon-docs": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-google-recaptcha": "^2.1.9",
+    "chromatic": "^11.16.5",
+    "postcss": "^8.4.35",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.24.4",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.80.6",
+    "storybook": "^8.3.4",
+    "storybook-addon-theme-provider": "^0.2.6",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "storybook": "tsc -b && storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsc -b && rollup -c",
+    "chromatic": "chromatic --exit-zero-on-changes"
+  },
+  "dependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.24.7",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@types/react-window": "^1.8.8",
+    "@vitejs/plugin-react": "^4.3.0",
+    "use-context-selector": "^2.0.0",
+    "fast-formula-parser": "^1.0.19",
+    "classnames": "^2.5.1",
+    "date-fns-tz": "^3.2.0",
+    "jsencrypt": "^3.3.2",
+    "react-day-picker": "^9.2.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-hook-form": "^7.53.0",
+    "react-window": "^1.8.10",
+    "scss": "^0.2.4",
+    "vite-plugin-svgr": "^4.3.0",
+    "yarn": "^1.22.22"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,63 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+import dts from 'rollup-plugin-dts';
+import { babel } from '@rollup/plugin-babel'; // Import Babel plugin
+import svgrPlugin from 'vite-plugin-svgr';
+import { createRequire } from 'node:module';
+
+const requireFile = createRequire(import.meta.url);
+const packageJson = requireFile('./package.json');
+
+export default [
+  {
+    input: 'src/index.ts',
+    context: 'window',
+    output: [
+      {
+        file: packageJson.main, // CJS output
+        format: 'cjs',
+        sourcemap: true,
+        inlineDynamicImports: true,
+      },
+      {
+        file: packageJson.module, // ESM output
+        format: 'esm',
+        sourcemap: true,
+        inlineDynamicImports: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs({
+        transformMixedEsModules: true,
+      }),
+      typescript(),
+      postcss({
+        extensions: ['.scss'],
+      }),
+      babel({
+        presets: ['@babel/preset-react'],
+        babelHelpers: 'bundled',
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      }), // Use Babel to handle JSX instead of Vite React
+      svgrPlugin({
+        svgrOptions: {
+          icon: true,
+        },
+      }),
+    ],
+  },
+  {
+    context: 'window',
+    input: 'lib/index.d.ts',
+    output: [
+      { file: 'lib/index.d.ts', format: 'es', inlineDynamicImports: true },
+    ],
+    plugins: [dts()],
+    external: [/\.scss$/],
+  },
+];

package/src/StyleGuide/ColorPalette/ColorPalette.scss

@@ -0,0 +1,62 @@
+@use '../../assets/styles/fonts';
+
+.ff-style-guide {
+  border-radius: 12px;
+
+  .style-guide-header {
+    background-color: var(--brand-color);
+
+    height: 100px;
+    padding: 40px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    color: var(--tooltip-text-color);
+
+    & div {
+      @extend .font-size-32;
+      font-weight: 600;
+    }
+    & span {
+      @extend .fontLg;
+      font-weight: 400;
+    }
+  }
+
+  .style-guide-content {
+    padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    grid-gap: 40px;
+
+    .color-card {
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+
+      .color-box {
+        height: 82px;
+        width: 210px;
+        border-radius: 12px;
+        margin-bottom: 10px;
+        > p {
+          color: var(--colorCode);
+          backdrop-filter: invert(100%);
+        }
+      }
+
+      .color-name {
+        @extend .fontMd;
+        font-weight: 500;
+        margin-bottom: 5px;
+        text-transform: capitalize;
+        word-wrap: break-word;
+      }
+
+      .color-code {
+        @extend .fontSm;
+        font-weight: 400;
+        color: var(--text-color);
+      }
+    }
+  }
+}

package/src/StyleGuide/ColorPalette/ColorPalette.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StyleGuide from './ColorPalette';
+
+const meta: Meta<typeof StyleGuide> = {
+  title: 'StyleGuide/Colors',
+  component: StyleGuide,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof StyleGuide>;
+
+export const ColorList: Story = {
+  args: {},
+};
+
+export default meta;

package/src/StyleGuide/ColorPalette/ColorPalette.tsx

@@ -0,0 +1,68 @@
+import { ColorBoxProps } from './types';
+import ColorPalette from './colorPaletteList';
+import './ColorPalette.scss';
+
+// Component to render each color card
+const ColorBox = ({
+  name,
+  colorCode,
+  opacity,
+  dropShadow,
+  border,
+  variable,
+}: ColorBoxProps) => {
+  console.log('🚀 ~ variable:', variable);
+  const opacityPercentage = opacity ? `${Math.round(opacity * 100)}%` : '';
+
+  const boxStyle = {
+    background: colorCode,
+    opacity: opacity,
+    filter: dropShadow ? dropShadow : '',
+    border: `1px solid ${border}`,
+    color: colorCode,
+  };
+
+  return (
+    <div className="color-card">
+      <span className="color-name">{name}</span>
+      <div className="color-box" style={boxStyle}>
+        <p style={{ '--colorCode': colorCode } as React.CSSProperties}> </p>
+      </div>
+      <span className="color-code">
+        {colorCode} {opacityPercentage && `opacity ${opacityPercentage}`} <br />
+        {border && `Border -${border}`}
+      </span>
+      <span className="color-code">{variable}</span>
+    </div>
+  );
+};
+
+// Main Colors component
+const Colors = () => {
+  return (
+    <div className="ff-style-guide">
+      <div className="style-guide-header">
+        <div>Colors</div>
+        <span>
+          Application of the color palette brings a unified and recognisable
+          consistency to MX's array of digital products and interface.
+        </span>
+      </div>
+      <div className="style-guide-content">
+        {ColorPalette.map((color) => (
+          <ColorBox
+            key={color.name}
+            name={color.name}
+            colorCode={color.colorCode}
+            opacity={color?.opacity}
+            dropShadow={color?.dropShadow}
+            border={color?.border}
+            variable={color.variable}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Colors;

package/src/StyleGuide/ColorPalette/colorPaletteList.ts

@@ -0,0 +1,172 @@
+import { ColorPaletteType } from './types';
+
+const ColorPalette: ColorPaletteType = [
+  { name: 'Brand Color', colorCode: '#71347b', variable: '--brand-color' },
+  { name: 'Text Color', colorCode: '#1e161f', variable: '--text-color' },
+  {
+    name: 'Description Text',
+    colorCode: '#7a7a7a',
+    variable: '--description-text',
+  },
+  {
+    name: 'Clickable Text Color',
+    colorCode: '#71347b',
+    variable: '--click-able-text-color',
+  },
+  {
+    name: 'Icons Default Color',
+    colorCode: '#71347b',
+    variable: '--icons-default-color',
+  },
+  { name: 'Border Color', colorCode: '#f0e7f4', variable: '--border-color' },
+  {
+    name: 'Disable Color',
+    colorCode: '#71347b',
+    opacity: 0.5,
+    variable: '--disable-color',
+  },
+  { name: 'Hover Color', colorCode: '#f7ebff', variable: '--hover-color' },
+  {
+    name: 'Pop-up Background Blur',
+    colorCode: '#14041c',
+    opacity: 0.1,
+    variable: '--pop-up-background-blur',
+  },
+  {
+    name: 'Drawer Footer Background',
+    colorCode: '#ffffff',
+    border: '#f0e7f4',
+    variable: '--drawer-footer-bg',
+  },
+  {
+    name: 'Slider Table Color',
+    colorCode: '#efe1f9',
+    opacity: 1,
+    variable: '--slider-table-color',
+  },
+  {
+    name: 'Text bg Highlight',
+    colorCode: '#f5fb00',
+    variable: '--text-bg-highlight',
+  },
+
+  {
+    name: 'Tooltip Bg Color',
+    colorCode: '#1e161f',
+    variable: '--tooltip-bg-color',
+  },
+  {
+    name: 'Tooltip Text Color(default)',
+    colorCode: '#ffffff',
+    variable: '--tooltip-text-color',
+  },
+  {
+    name: 'Toggle Strip Color(default)',
+    colorCode: '#cfd1e2',
+    dropShadow: 'drop-shadow(0 0 2px #00000025)',
+    variable: '--toggle-strip-color',
+  },
+  {
+    name: 'Tooltip Text Color(Active)',
+    colorCode: '#ffffff',
+    variable: '--tooltip-text-color',
+  },
+  {
+    name: 'Toggle Strip Color(Active)',
+    colorCode: '#71347b',
+    dropShadow: 'drop-shadow(0 0 2px #00000025)',
+    variable: '--toggle-strip-active',
+  }, // todo  drop shadow
+  {
+    name: 'Primary Button Color',
+    colorCode:
+      'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(70, 22, 77, 1) 100%)',
+    variable: '--primary-button-color',
+  },
+  {
+    name: 'Primary Button Hover',
+    colorCode:
+      'linear-gradient(90deg, rgba(141, 59, 154, 1) 100%, rgba(120, 31, 134, 1) 100%)',
+    variable: '--primary-button-hover',
+  },
+  {
+    name: 'Primary Button Disable',
+    colorCode:
+      'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(113, 52, 123, 1) 100%)',
+    opacity: 0.5,
+    variable: '--primary-button-disable',
+  },
+  {
+    name: 'Primary Button Text Color',
+    colorCode: '#ffffff',
+    variable: '--primary-button-text-color',
+  },
+  {
+    name: 'Secondary Button Icon Color (default)',
+    colorCode: 'rgba(113, 52, 123, 1)',
+    variable: '--secondary-icon-color',
+  },
+  {
+    name: 'Secondary Button (Hover)',
+    colorCode:
+      'linear-gradient(90deg, rgba(113, 52, 123, 0.05) 100%, rgba(70, 22, 77, 0.05) 100%)',
+    variable: '--secondary-button-hover',
+  },
+  {
+    name: 'Secondary Button (Disabled)',
+    colorCode: 'rgba(113, 52, 123, 1)',
+    opacity: 0.5,
+    variable: '--disable-color',
+  },
+  {
+    name: 'Tertiary Button (default)',
+    colorCode:
+      'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
+    variable: '--tertiary-button-color',
+  },
+  {
+    name: 'Tertiary Button (Hover)',
+    colorCode:
+      'linear-gradient(90deg, rgba(70, 22, 77, 0.1) 100%, rgba(113, 52, 123, 0.1) 100%)',
+    variable: '--tertiary-button-hover',
+  },
+  {
+    name: 'Tertiary Button (Disabled)',
+    colorCode:
+      'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
+    opacity: 0.5,
+    variable: '--tertiary-button-color',
+  },
+  {
+    name: 'Delete Button Color',
+    colorCode:
+      'linear-gradient(90deg, rgba(228, 37, 37, 1) 100%, rgba(201, 0, 0, 1) 100%)',
+    variable: '--delete-button-color',
+  },
+  {
+    name: 'Delete Button Hover',
+    colorCode:
+      'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
+    variable: '--delete-button-hover',
+  },
+  {
+    name: 'Delete Button Disabled',
+    colorCode:
+      'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
+    opacity: 0.5,
+    variable: '--delete-button-disable',
+  },
+  {
+    name: 'Primary Button Text Color',
+    colorCode: '#ffffff',
+    variable: '--primary-button-text-color',
+  },
+  {
+    name: 'Overlay Background',
+    colorCode: '#1e161f',
+    opacity: 0.1,
+    variable: '--overlay-bg',
+  },
+];
+
+export default ColorPalette;

package/src/StyleGuide/ColorPalette/index.ts

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