pixel-react 1.1.0 → 1.1.2

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/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/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/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/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/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/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"}

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

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

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

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -27,6 +27,7 @@
     "@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",
@@ -60,10 +61,13 @@
     "@vitejs/plugin-react": "^4.3.3",
     "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"
+    "vite-plugin-svgr": "^4.3.0",
+    "yarn": "^1.22.22"
   }
 }

package/src/StyleGuide/ColorPalette/ColorPalette.tsx

@@ -26,15 +26,13 @@ const ColorBox = ({
     <div className="color-card">
       <span className="color-name">{name}</span>
       <div className="color-box" style={boxStyle}>
-        <p style={{ '--colorCode': colorCode } as React.CSSProperties}>
-          {' '}
-          {variable}
-        </p>
+        <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>
   );
 };

package/src/StyleGuide/ColorPalette/colorPaletteList.ts

@@ -3,95 +3,170 @@ 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' },
-  { name: 'Clickable Text Color', colorCode: '#71347b' },
-  { name: 'Icons Default Color', colorCode: '#71347b' },
-  { name: 'Border Color', colorCode: '#f0e7f4' },
-  { name: 'Disable Color', colorCode: '#71347b', opacity: 0.5 },
-  { name: 'Hover Color', colorCode: '#f7ebff' },
-  { name: 'Pop-up Background Blur', colorCode: '#14041c', opacity: 0.1 },
-  { name: 'Drawer Footer Background', colorCode: '#ffffff', border: '#f0e7f4' },
-  { name: 'Slider Table Color', colorCode: '#efe1f9', opacity: 1 },
-  { name: 'Text bg Highlight', colorCode: '#f5fb00' },
+  {
+    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' },
-  { name: 'Tooltip Text Color(default)', colorCode: '#ffffff' },
+  {
+    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: 'Tooltip Text Color(Active)', colorCode: '#ffffff' },
   {
     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' },
   {
-    name: 'Secondary Button (default)',
+    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: 'Primary 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: 'Primary Button Hover',
+    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: 'Primary Button Disabled',
+    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',
   },
-  { name: 'Primary Button Text Color', colorCode: '#ffffff' },
-  { name: 'Overlay Background', colorCode: '#1e161f', opacity: 0.1 },
 ];
 
 export default ColorPalette;

package/src/assets/Themes/BaseTheme.scss

@@ -61,11 +61,10 @@ $base-theme: (
   error_light: #e42525,
   ff-success: #079455,
   ff-warning: #f79009,
-  ff-header-text-color : #fdfaff,
+  ff-header-text-color: #fdfaff,
   ff-header-submenu-text-color: #666468,
   ff-header-submenu-highlight-text-color: #170328,
 
-
   expandable-menu-default-bg: #fdfaff,
   expandable-menu-option-bg: #610b861a,
   file-dropzone-default-color: #71347b1a,
@@ -163,7 +162,7 @@ $base-theme: (
   license_header_text_color: #592f7c,
   license_active_status_color: #518e18,
   license_expired_status_color: #ab3425,
-
+  pie-chart-border-color: #b6b6b6,
 );
 :root {
   @each $key, $value in $base-theme {

package/src/assets/Themes/DarkTheme.scss

@@ -163,14 +163,15 @@ $dark-theme: (
 
   primary-icon-color: #ffffff,
   secondary-icon-color: #71347b,
-  disabled-primary-color: #F9F9F9,
-  license_expireSoon_color:#BA7422,
-  license_active_color:#268735,
-  license_expired_color:#E34242,
-  license_header_text_color:#592f7c,
-  license_active_status_color:#518e18,
-  license_expired_status_color:#ab3425,
-  background-modal-color:#1111,
+  disabled-primary-color: #f9f9f9,
+  license_expireSoon_color: #ba7422,
+  license_active_color: #268735,
+  license_expired_color: #e34242,
+  license_header_text_color: #592f7c,
+  license_active_status_color: #518e18,
+  license_expired_status_color: #ab3425,
+  background-modal-color: #1111,
+  pie-chart-border-color: #b6b6b6,
 );
 :root {
   @each $key, $value in $dark-theme {

package/src/assets/icons/wswb_delete_icon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.77783 17.4447C7.77783 17.8571 7.94168 18.2527 8.23333 18.5443C8.52498 18.836 8.92054 18.9998 9.333 18.9998H15.556C15.9685 18.9998 16.364 18.836 16.6557 18.5443C16.9473 18.2527 17.1112 17.8571 17.1112 17.4447V8.11133H7.77783V17.4447Z" fill="currentColor"/>
+<path d="M15.1667 5.77817L14.3897 5H10.5L9.723 5.77817H7V7.33333H17.8885V5.77817H15.1667Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/wswb_plus_icon.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.4">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 5.25C12.6796 5.25 13.0278 5.59822 13.0278 6.02778V11.4722H18.4722C18.9018 11.4722 19.25 11.8204 19.25 12.25C19.25 12.6796 18.9018 13.0278 18.4722 13.0278H13.0278V18.4722C13.0278 18.9018 12.6796 19.25 12.25 19.25C11.8204 19.25 11.4722 18.9018 11.4722 18.4722V13.0278H6.02778C5.59822 13.0278 5.25 12.6796 5.25 12.25C5.25 11.8204 5.59822 11.4722 6.02778 11.4722H11.4722V6.02778C11.4722 5.59822 11.8204 5.25 12.25 5.25Z" fill="currentColor"/>
+</g>
+</svg>

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss

@@ -0,0 +1,145 @@
+@use '../../../assets/styles/fonts';
+
+.ff-dashboard-donut-chart-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &-table-legend {
+    flex-direction: row;
+  }
+
+  .ff-dashboard-donut-chart-svg-container {
+    text-align: center;
+    svg {
+      text:nth-of-type(1) {
+        @extend .font2Xl;
+        font-weight: 600;
+      }
+      text:nth-of-type(2) {
+        @extend .fontMd;
+        font-weight: 500;
+      }
+    }
+
+    .ff-donut-chart-tooltip {
+      position: fixed;
+      padding: 5px;
+      border-radius: 4px;
+      pointer-events: none;
+      background-color: var(--tooltip-bg-color);
+      color: var(--tooltip-text-color);
+    }
+  }
+
+  .ff-legend-container {
+    display: grid;
+    gap: 10px;
+
+    &.numberLegend {
+      grid-template-columns: repeat(3, 1fr);
+      .ff-legend-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    }
+
+    &.pillLegend {
+      grid-template-columns: repeat(2, 1fr);
+      .ff-legend-item {
+        display: flex;
+        align-items: center;
+
+        .ff-legend-capsule {
+          background-color: var(--status-success-text-color);
+          color: var(--tooltip-text-color);
+          border-radius: 15px;
+          min-width: 25px;
+          height: 18px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .ff-legend-key {
+          margin-left: 8px;
+        }
+      }
+    }
+
+    &.memoryLegend {
+      grid-template-columns: repeat(2, 1fr);
+      .ff-legend-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        padding-right: 10px;
+        border-right: 1px solid var(--border-color);
+
+        // Remove the right border for the last item in each row
+        &:nth-child(2n) {
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  .ff-legend-table-wrapper {
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    margin-left: 1rem;
+  }
+
+  .ff-legend-table {
+    width: 100%;
+    min-width: 300px;
+    border-collapse: collapse;
+    text-align: left;
+
+    .ff-table-header {
+      @extend .fontXs;
+      font-weight: bold;
+      background-color: var(--tabs-bg-color);
+      color: var(--input-hover-border-color);
+      padding: 0.5rem;
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+
+    .ff-legend-capsule {
+      background-color: var(--status-success-text-color);
+      color: var(--tooltip-text-color);
+      border-radius: 1rem;
+      min-width: 22px;
+      height: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .ff-legend-item {
+      .ff-legend-name,
+      .ff-legend-percentage,
+      .ff-legend-count {
+        padding: 0.5rem;
+        @extend .fontXs;
+        color: var(--input-hover-border-color);
+      }
+
+      .ff-legend-name {
+        display: flex;
+        align-items: baseline;
+        gap: 5px;
+        color: var(--input-hover-border-color);
+      }
+      .ff-legend-count {
+        text-align: right;
+      }
+    }
+  }
+}

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import DashboardDonutChart from './DashboardDonutChart';
+
+const meta: Meta<typeof DashboardDonutChart> = {
+  title: 'Components/DashboardDonutChart',
+  component: DashboardDonutChart,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof DashboardDonutChart>;
+
+export const Default: Story = {
+  args: {
+    radius: 70,
+    lineWidth: 15,
+    legendDetailsType: 'Scripts',
+    isLegendDetails: true,
+    statusValues: [
+      { key: 'Passed', value: 60, color: 'var(--status-success-text-color)' },
+      { key: 'failed', value: 20, color: 'var(--status-rejected-text-color)' },
+      { key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
+      { key: 'skipped', value: 10, color: 'var(--status-skipped-text-color)' },
+    ],
+    gapAngle: 0,
+    legendType: 'numberLegend',
+    showOnlyLabel: false,
+  },
+};
+
+export const MemoryLegend: Story = {
+  args: {
+    radius: 65,
+    lineWidth: 15,
+    legendDetailsType: 'Memory',
+    isLegendDetails: true,
+    statusValues: [
+      {
+        key: 'Available Memory',
+        value: 37.5,
+        color: 'var(--status-warning-text-color)',
+      },
+      { key: 'Used Memory', value: 72.5, color: 'var(--brand-color)' },
+    ],
+    gapAngle: 0,
+    legendType: 'memoryLegend',
+    showOnlyLabel: true,
+  },
+};