pixel-react 1.0.1 → 1.0.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/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/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/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/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/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/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/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/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/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/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.2"}
+{"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/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/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/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/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/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/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/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/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/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/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/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/find/findAndInsert.d.ts

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

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

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

package/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -10,7 +10,9 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/preset-react": "^7.25.9",
     "@chromatic-com/storybook": "^2.0.2",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",

package/rollup.config.mjs

@@ -4,12 +4,10 @@ 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 react from '@vitejs/plugin-react';
+import { babel } from '@rollup/plugin-babel'; // Import Babel plugin
 import svgrPlugin from 'vite-plugin-svgr';
 import { createRequire } from 'node:module';
 
-// This is required to read package.json file when
-// using Native ES modules in Node.js
 const requireFile = createRequire(import.meta.url);
 const packageJson = requireFile('./package.json');
 
@@ -34,11 +32,18 @@ export default [
       peerDepsExternal(),
       resolve(),
       commonjs(),
-      typescript(), // Ensure tsconfig.json targets ESM
+      typescript(),
       postcss({
         extensions: ['.scss'],
+        use: {
+          sass: true, // Ensure Dart Sass is used
+        },
       }),
-      react(),
+      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,

package/src/StyleGuide/ColorPalette/ColorPalette.scss

@@ -1,16 +1,15 @@
-@import '../../assets/styles/colors';
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-style-guide {
   border-radius: 12px;
 
   .style-guide-header {
-    background-color: $brand-color;
+    background-color: var(--brand-color);
     height: 100px;
     padding: 40px;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
-    color: $tooltip-text-color;
+    color: var(--tooltip-text-color);
 
     & div {
       @extend .font-size-32;
@@ -51,7 +50,7 @@
       .color-code {
         @extend .fontSm;
         font-weight: 400;
-        color: $text-color;
+        color: var(--text-color);
       }
     }
   }

package/src/StyleGuide/Typography/Typography.scss

@@ -1,5 +1,4 @@
-@import '../../assets/styles/colors';
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .typography-container {
   .typography-header {
@@ -10,7 +9,7 @@
     & span {
       @extend .fontSm;
       font-weight: 400;
-      color: $tooltip-bg-color; // need to change color #7A7A7A
+      color: var(--tooltip-bg-color); // need to change color #7A7A7A
     }
   }
 }
@@ -30,7 +29,7 @@
   width: 60%;
   display: flex;
   flex-direction: column;
-  border-right: 1px solid $border-color;
+  border-right: 1px solid var(--border-color);
   padding: 10px;
   gap: 10px;
 
@@ -93,7 +92,7 @@
       .font-size {
         @extend .fontLg;
         font-weight: 400;
-        color: $tooltip-bg-color;
+        color: var(--tooltip-bg-color);
       }
     }
   }

package/src/assets/Themes/Theme.scss

@@ -1,200 +1,16 @@
-@import './BaseTheme.scss';
-@import './DarkTheme.scss';
+@use './BaseTheme' as base;
+@use './DarkTheme' as dark;
 
 @mixin set-theme-variables($theme-map) {
-  --brand-color: #{map-get($theme-map, brand-color)};
-  --text-color: #{map-get($theme-map, text-color)};
-  --description-text: #{map-get($theme-map, description-text)};
-  --border-color: #{map-get($theme-map, border-color)};
-  --disable-color: #{map-get($theme-map, disable-color)};
-  --hover-color: #{map-get($theme-map, hover-color)};
-  --pop-up-background-blur: #{map-get($theme-map, pop-up-background-blur)};
-  --slider-table-color: #{map-get($theme-map, slider-table-color)};
-  --drawer-footer-bg: #{map-get($theme-map, drawer-footer-bg)};
-  --drawer-footer-border: #{map-get($theme-map, drawer-footer-border)};
-  --text-bg-highlight: #{map-get($theme-map, text-bg-highlight)};
-  --tooltip-bg-color: #{map-get($theme-map, tooltip-bg-color)};
-  --tooltip-text-color: #{map-get($theme-map, tooltip-text-color)};
-  --toggle-strip-color: #{map-get($theme-map, toggle-strip-color)};
-  --toggle-strip-active: #{map-get($theme-map, toggle-strip-active)};
-  --toggle-strip-shadow: #{map-get($theme-map, toggle-strip-shadow)};
-  --toggle-button-bg-color: #{map-get($theme-map, toggle-button-bg-color)};
-  --toggle-disable-icon-color: #{map-get($theme-map, toggle-disable-icon-color)};
-  --chip-fill-color: #{map-get($theme-map, chip-fill-color)};
-  --chip-text-color: #{map-get($theme-map, chip-text-color)};
-  --primary-button-color: #{map-get($theme-map, primary-button-color)};
-  --primary-button-hover: #{map-get($theme-map, primary-button-hover)};
-  --primary-button-disable: #{map-get($theme-map, primary-button-disable)};
-  --primary-button-text-color: #{map-get($theme-map, primary-button-text-color)};
-  --primary-button-border: #{map-get($theme-map, primary-button-border)};
-  --secondary-button-color-text: #{map-get(
-      $theme-map,
-      secondary-button-color-text
-    )};
-  --secondary-button-border: #{map-get($theme-map, secondary-button-border)};
-  --secondary-button-text-color: #{map-get(
-      $theme-map,
-      secondary-button-text-color
-    )};
-  --secondary-button-hover: #{map-get($theme-map, secondary-button-hover)};
-  --tertiary-button-color: #{map-get($theme-map, tertiary-button-color)};
-  --tertiary-button-hover: #{map-get($theme-map, tertiary-button-hover)};
-  --delete-button-color: #{map-get($theme-map, delete-button-color)};
-  --delete-button-border: #{map-get($theme-map, delete-button-border)};
-  --delete-button-hover: #{map-get($theme-map, delete-button-hover)};
-  --delete-button-disable: #{map-get($theme-map, delete-button-disable)};
-  --add-icon-hover-color: #{map-get($theme-map, add-icon-hover-color)};
-  --arrow-button-bg-color: #{map-get($theme-map, arrow-button-bg-color)};
-  --arrows-button-border-color: #{map-get(
-      $theme-map,
-      arrows-button-border-color
-    )};
-  --add-icon-hover-color: #{map-get($theme-map, add-icon-hover-color)};
-  --arrow-button-bg-color: #{map-get($theme-map, arrow-button-bg-color)};
-  --arrows-button-border-color: #{map-get(
-      $theme-map,
-      arrows-button-border-color
-    )};
-  --default-icon-color: #{map-get($theme-map, default-icon-color)};
-  --error_light: #{map-get($theme-map, error_light)};
-  --text-area-default-color: #{map-get($theme-map, text-area-default-color)};
-  --expandable-menu-default-bg: #{map-get(
-      $theme-map,
-      expandable-menu-default-bg
-    )};
-  --expandable-menu-option-bg: #{map-get($theme-map, expandable-menu-option-bg)};
-  --file-dropzone-default-color: #{map-get(
-      $theme-map,
-      file-dropzone-default-color
-    )};
-  --file-dropzone-selected-color: #{map-get(
-      $theme-map,
-      file-dropzone-selected-color
-    )};
-  --file-details-container-shadow: #{map-get(
-      $theme-map,
-      file-details-container-shadow
-    )};
-  --file-details-bg: #{map-get($theme-map, file-details-bg)};
-  --ff-mini-modal-border: #{map-get($theme-map, ff-mini-modal-border)};
-  --ff-mini-modal-box-shadow: #{map-get($theme-map, ff-mini-modal-box-shadow)};
-  --ff-mini-modal-footer-background: #{map-get(
-      $theme-map,
-      ff-mini-modal-footer-background
-    )};
-
-  --input-default-border-color: #{map-get(
-      $theme-map,
-      input-default-border-color
-    )};
-  --input-hover-border-color: #{map-get($theme-map, input-hover-border-color)};
-  --input-default-label-color: #{map-get($theme-map, input-default-label-color)};
-  --input-label-bg-color: #{map-get($theme-map, input-label-bg-color)};
-  --input-active-text-color: #{map-get($theme-map, input-active-text-color)};
-  --input-error-text-color: #{map-get($theme-map, input-error-text-color)};
-  --tabs-label-default-color: #{map-get($theme-map, tabs-label-default-color)};
-  --tabs-label-active-color: #{map-get($theme-map, tabs-label-active-color)};
-  --tabs-border-color: #{map-get($theme-map, tabs-border-color)};
-  --tabs-bg-color: #{map-get($theme-map, tabs-bg-color)};
-  --tab-bg-color: #{map-get($theme-map, tab-bg-color)};
-  --option-card-border-color: #{map-get($theme-map, option-card-border-color)};
-  --option-card-bg-color: #{map-get($theme-map, option-card-bg-color)};
-  --checkbox-bg-color: #{map-get($theme-map, checkbox-bg-color)};
-  --checkbox-border-color: #{map-get($theme-map, checkbox-border-color)};
-  --checkbox-partial-color: #{map-get($theme-map, checkbox-partial-color)};
-  --checkbox-hover-color: #{map-get($theme-map, checkbox-hover-color)};
-  --multi-select-border: #{map-get($theme-map, multi-select-border)};
-  --text-color-light: #{map-get($theme-map, text-color-light)};
-  --multi-select-label-bg: #{map-get($theme-map, multi-select-label-bg)};
-  --radio-button-border: #{map-get($theme-map, radio-button-border)};
-  --radio-button-hover: #{map-get($theme-map, radio-button-hover)};
-  --tree-connecting-lines-color: #{map-get(
-      $theme-map,
-      tree-connecting-lines-color
-    )};
-  --menu-option-icon-color: #{map-get($theme-map, menu-option-icon-color)};
-  --menu-option-icon-clicked: #{map-get($theme-map, menu-option-icon-clicked)};
-  --delete-text-color: #{map-get($theme-map, delete-text-color)};
-  --status-success-text-color: #{map-get($theme-map, status-success-text-color)};
-  --status-warning-text-color: #{map-get($theme-map, status-warning-text-color)};
-  --status-rejected-text-color: #{map-get(
-      $theme-map,
-      status-rejected-text-color
-    )};
-  --status-skipped-text-color: #{map-get($theme-map, status-skipped-text-color)};
-  --status-success-bg-color: #{map-get($theme-map, status-success-bg-color)};
-  --status-warning-bg-color: #{map-get($theme-map, status-warning-bg-color)};
-  --status-rejected-bg-color: #{map-get($theme-map, status-rejected-bg-color)};
-  --status-skipped-bg-color: #{map-get($theme-map, status-skipped-bg-color)};
-  --status-percentage-growth-bg-color: #{map-get(
-      $theme-map,
-      status-percentage-growth-bg-color
-    )};
-
-  // Select Dropdown Color
-  --ff-select-option-border-color: #{map-get(
-      $theme-map,
-      ff-select-option-border-color
-    )};
-  --ff-select-option-wrapper-box-shadow: #{map-get(
-      $theme-map,
-      ff-select-option-wrapper-box-shadow
-    )};
-  --ff-select-background-color: #{map-get(
-      $theme-map,
-      ff-select-background-color
-    )};
-  --ff-select-scroll-thumb-color: #{map-get(
-      $theme-map,
-      ff-select-scroll-thumb-color
-    )};
-  --ff-select-scroll-track-bg: #{map-get($theme-map, ff-select-scroll-track-bg)};
-  --ff-select-scroll-thumb-hover: #{map-get(
-      $theme-map,
-      ff-select-scroll-thumb-hover
-    )};
-  --ff-select-text-color: #{map-get($theme-map, ff-select-text-color)};
-  --ff-select-option-hover-color: #{map-get(
-      $theme-map,
-      ff-select-option-hover-color
-    )};
-  --ff-select-default-color: #{map-get($theme-map, ff-select-default-color)};
-  --ff-select-border-color: #{map-get($theme-map, ff-select-border-color)};
-  --ff-select-brand-color: #{map-get($theme-map, ff-select-brand-color)};
-  --ff-select-text-hover-color: #{map-get(
-      $theme-map,
-      ff-select-text-hover-color
-    )};
-  --toaster-boxshadow: #{map-get($theme-map, toaster-boxshadow)};
-  --toast-close-icon-wrapper-bg: #{map-get(
-      $theme-map,
-      toast-close-icon-wrapper-bg
-    )};
-  --toaster-success-border: #{map-get($theme-map, toaster-success-border)};
-  --toaster-warning-border: #{map-get($theme-map, toaster-warning-border)};
-  --toaster-info-border: #{map-get($theme-map, toaster-info-border)};
-  --toaster-danger_confirm-border: #{map-get(
-      $theme-map,
-      toaster-danger_confirm-border
-    )};
-  --ff-search-filed-clear-text: #{map-get(
-      $theme-map,
-      ff-search-filed-clear-text
-    )};
-  --ff-search-filed-placeholder-text: #{map-get(
-      $theme-map,
-      ff-search-filed-placeholder-text
-    )};
-  --ff-search-filed-close-Icon: #{map-get(
-      $theme-map,
-      ff-search-filed-close-Icon
-    )};
+  @each $key, $value in $theme-map {
+    --#{$key}: #{$value};
+  }
 }
 
 .ff-light-theme {
-  @include set-theme-variables($base-theme);
+  @include set-theme-variables(base.$base-theme);
 }
 
 .ff-dark-theme {
-  @include set-theme-variables($dark-theme);
+  @include set-theme-variables(dark.$dark-theme);
 }

package/src/assets/icons/filter.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M12.7145 0.400147H2.8385C2.43037 0.399936 2.03133 0.520731 1.69184 0.747262C1.35234 0.973792 1.08763 1.29589 0.931152 1.67284C0.774679 2.04979 0.733473 2.46466 0.812743 2.86503C0.892012 3.26539 1.0882 3.63326 1.3765 3.92215L5.6195 8.16515V13.1001C5.62058 13.3566 5.69752 13.6071 5.84062 13.82C5.98373 14.0328 6.18661 14.1986 6.42373 14.2964C6.66085 14.3943 6.9216 14.4197 7.17317 14.3697C7.42475 14.3196 7.65589 14.1963 7.8375 14.0151L9.4565 12.4001C9.60732 12.2508 9.7269 12.0728 9.80828 11.8768C9.88965 11.6807 9.9312 11.4704 9.9305 11.2581V8.15815L14.1765 3.91615C14.3675 3.72539 14.5189 3.4987 14.6219 3.24914C14.7249 2.99959 14.7774 2.73211 14.7765 2.46215C14.7754 1.91559 14.5579 1.39173 14.1714 1.00526C13.7849 0.618789 13.2611 0.401204 12.7145 0.400147ZM13.4095 3.15715L9.1715 7.40015C9.07035 7.50015 8.99014 7.61931 8.93554 7.75065C8.88094 7.882 8.85305 8.02291 8.8535 8.16515V11.2651C8.85142 11.4076 8.79572 11.544 8.6975 11.6471L7.0815 13.2641C7.04817 13.2903 7.00843 13.307 6.96643 13.3126C6.92444 13.3182 6.88171 13.3124 6.8427 13.2959C6.8037 13.2793 6.76984 13.2526 6.74466 13.2186C6.71947 13.1845 6.70388 13.1443 6.6995 13.1021V8.16515C6.69983 8.02382 6.67186 7.88385 6.61724 7.75349C6.56263 7.62314 6.48247 7.50504 6.3815 7.40615L2.1445 3.15715C2.00588 3.01997 1.91124 2.84462 1.87265 2.65346C1.83406 2.46229 1.85326 2.26396 1.92782 2.08375C2.00237 1.90354 2.12889 1.7496 2.29126 1.64157C2.45362 1.53354 2.64448 1.4763 2.8395 1.47715H12.7145C12.9095 1.4763 13.1004 1.53354 13.2627 1.64157C13.4251 1.7496 13.5516 1.90354 13.6262 2.08375C13.7007 2.26396 13.7199 2.46229 13.6814 2.65346C13.6428 2.84462 13.5481 3.01997 13.4095 3.15715Z"
+        fill="currentColor" stroke="currentColor" stroke-width="0.5" />
+</svg>

package/src/components/Accordion/Accordion.scss

@@ -1,5 +1,4 @@
-@import '../../assets/styles/colors';
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-accordion {
   border: 1px solid var(--border-color);

package/src/components/Button/Button.scss

@@ -1,5 +1,5 @@
 @use '../../assets/styles/colors' as *;
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-button {
   width: auto;

package/src/components/Charts/DonutChart/DonutChart.scss

@@ -1,4 +1,4 @@
-@import '../../../assets/styles/fonts';
+@use '../../../assets/styles/fonts';
 .ff-donut-chart-section {
   display: flex;
   align-items: center;

package/src/components/Charts/RadialChart/RadialChart.scss

@@ -1,4 +1,4 @@
-@import '../../../assets/styles/fonts';
+@use '../../../assets/styles/fonts';
 
 .ff-radial-chart-container {
   cursor: pointer;

package/src/components/Drawer/Drawer.scss

@@ -1,11 +1,10 @@
-@import '../../assets/styles/colors';
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-drawer-container {
   .ff-overlay {
     position: fixed;
     inset: 0;
-    background-color: $drawer-title-color;
+    background-color: var(--drawer-title-color);
     opacity: 0.5;
   }
 
@@ -16,7 +15,7 @@
     top: 0;
     bottom: 0;
     min-width: 450px;
-    background-color: $primary-button-text-color;
+    background-color: var(--primary-button-text-color);
     z-index: 999;
     transform: translateX(100%);
     opacity: 0;
@@ -43,19 +42,19 @@
     &--x-large {
       transition: all 0.4s ease-in-out;
       border-radius: 5px;
-      border: 2px solid $border-color;
+      border: 2px solid var(--border-color);
     }
 
     .ff-drawer-header {
       padding: 10px 8px 10px 8px;
       display: flex;
       gap: 10px;
-      border-bottom: 2px solid $border-color;
+      border-bottom: 2px solid var(--border-color);
 
       .ff-drawer-title {
         @extend .fontSm;
         font-weight: 600;
-        color: $drawer-title-color;
+        color: var(--drawer-title-color);
         display: flex;
         align-items: center;
         gap: 12px;
@@ -75,7 +74,7 @@
 
           .ff-expand-collapse-button {
             cursor: pointer;
-            background-color: $button-bg-color;
+            background-color: var(--button-bg-color);
             outline: none;
             border: none;
             margin: 0;
@@ -91,7 +90,7 @@
     }
 
     .ff-drawer-body {
-      background-color: $drawer-footer-bg;
+      background-color: var(--drawer-footer-bg);
       padding: 8px;
       height: calc(100vh - 76px);
       overflow: hidden auto;
@@ -109,7 +108,7 @@
       padding: 5px 16px 5px 16px;
       display: flex;
       justify-content: space-between;
-      border-top: 2px solid $drawer-footer-border;
+      border-top: 2px solid var(--drawer-footer-border);
 
       .button-container {
         display: flex;

package/src/components/ExpandableMenu/ExpandableMenu.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-expandable-chip-menu {
   display: inline-flex;

package/src/components/Icon/Icons.scss

@@ -1,4 +1,3 @@
-@import '../../assets/styles/colors';
 
 .ff-icon-container {
   display: flex;
@@ -12,10 +11,10 @@
   box-sizing: content-box;
   &:hover {
     border-radius: 50%;
-    background-color: $drawer-footer-bg;
-    box-shadow: 0px 0px 16px $toggle-strip-shadow;
+    background-color: var(--drawer-footer-bg);
+    box-shadow: 0px 0px 16px var(--toggle-strip-shadow);
     & > svg {
-      color: $brand-color;
+      color: var(--brand-color);
     }
   }
 }
@@ -23,12 +22,12 @@
 .ff-icon-disabled {
   cursor: no-drop;
   & > svg {
-    color: $toggle-strip-color;
+    color: var(--toggle-strip-color);
   }
   &:hover {
     box-shadow: none;
     & > svg {
-      color: $toggle-strip-color;
+      color: var(--toggle-strip-color);
     }
   }
 }

package/src/components/Icon/iconList.ts

@@ -28,6 +28,7 @@ import CheckMarkIcon from '../../assets/icons/check_mark.svg?react';
 import WrongMarkIcon from '../../assets/icons/wrong_mark.svg?react';
 import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
+import Filter from '../../assets/icons/filter.svg?react';
 
 //icons
 Components['delete'] = DeleteIcon;
@@ -58,5 +59,6 @@ Components['wrong_mark'] = WrongMarkIcon;
 Components['tick'] = Tick;
 Components['arrow_right'] = ArrowRight;
 Components['search'] = Search;
+Components['filter'] = Filter;
 
 export default Components;

package/src/components/MenuOption/MenuOption.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-menu-option-container {
   cursor: pointer;