oolib 2.155.0 → 2.155.1

package/dist/components/ActionMenu/index.js

@@ -112,11 +112,18 @@ var ActionMenu = function (_a) {
             }))));
     };
     return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
-        typeof CustomSelectComp === 'function' ? (react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function () {
+        react_1.default.createElement("div", { style: { zIndex: 1002, position: "relative" } }, typeof CustomSelectComp === 'function' ? (react_1.default.createElement("div", { onClick: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }, onMouseDown: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            } },
+            react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function () {
+                    setShowActions(!showActions);
+                } }))) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
                 setShowActions(!showActions);
-            } })) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
-                setShowActions(!showActions);
-            }, active: showActions }))),
+            }, active: showActions })))),
         popOutOfOverflowHiddenParent && (react_1.default.createElement(styled_1.StyledActionMenuTracker, { storybookPreview: storybookPreview, align: align, ref: trackerRef })),
         popOutOfOverflowHiddenParent
             ? (0, react_dom_1.createPortal)(genLighbox(), document.getElementById("actionmenu-lightbox-root"))

package/dist/index.d.ts

@@ -42,7 +42,6 @@ export { ModalSmall } from "./components/Modals/derivedComps/ModalSmall";
 export { EmptyStates } from "./components/EmptyStates";
 export { HomeCover } from "./components/HomeCover";
 export { PageScrollIndicator } from "./components/PageScrollIndicator";
-export { BarChart } from "./components/dataViz/comps/BarChart";
 export { TextLoader } from "./components/LoadersAndProgress/TextLoader";
 export { default as DatePicker } from "./components/DatePicker";
 export { default as DateRangePicker } from "./components/DateRangePicker";
@@ -50,6 +49,7 @@ export { TimePicker } from "./components/TimePicker";
 export { TimeRangePicker } from "./components/TimeRangePicker";
 export { DateTimePicker } from "./components/DateTimePicker";
 export { DateTimeRangePicker } from "./components/DateTimeRangePicker";
+export { BarChart } from "./v2/components/BarChart";
 export { CardEmbed } from "./components/cards/CardEmbed";
 export { CardProfile } from "./components/cards/CardProfile";
 export { ListProfile } from "./components/cards/ListProfile";

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.BarChart = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 exports.HintsProvider = exports.colors2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
@@ -84,8 +84,6 @@ var HomeCover_1 = require("./components/HomeCover");
 Object.defineProperty(exports, "HomeCover", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
 var PageScrollIndicator_1 = require("./components/PageScrollIndicator");
 Object.defineProperty(exports, "PageScrollIndicator", { enumerable: true, get: function () { return PageScrollIndicator_1.PageScrollIndicator; } });
-var BarChart_1 = require("./components/dataViz/comps/BarChart");
-Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
 var TextLoader_1 = require("./components/LoadersAndProgress/TextLoader");
 Object.defineProperty(exports, "TextLoader", { enumerable: true, get: function () { return TextLoader_1.TextLoader; } });
 // tpl blocks
@@ -101,6 +99,9 @@ var DateTimePicker_1 = require("./components/DateTimePicker");
 Object.defineProperty(exports, "DateTimePicker", { enumerable: true, get: function () { return DateTimePicker_1.DateTimePicker; } });
 var DateTimeRangePicker_1 = require("./components/DateTimeRangePicker");
 Object.defineProperty(exports, "DateTimeRangePicker", { enumerable: true, get: function () { return DateTimeRangePicker_1.DateTimeRangePicker; } });
+//V2 data viz comps
+var BarChart_1 = require("./v2/components/BarChart");
+Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
 //cards
 // export {CardContent} from './components/cards/CardContent'
 // export {ListContent} from './components/cards/ListContent'

package/dist/stories/v2/components/Accordion.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    let title: string;
+    let parameters: {};
+}
+export default _default;
+export function BarChart(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/{Oolib/components/BarChart.stories.js → v2/components/Accordion.stories.js}

@@ -5,10 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BarChart = void 0;
 var react_1 = __importDefault(require("react"));
-var BarChart_1 = require("../../../components/dataViz/comps/BarChart");
-var BarChart_mdx_1 = __importDefault(require("./BarChart.mdx"));
+var BarChart_1 = require("../../../v2/components/BarChart");
+var Accordion_1 = require("../../../v2/components/Accordion");
+// import BarChartDocs from './BarChart.mdx'
 exports.default = {
-    title: "Components/BarChart",
+    title: "Oolib V 2.0/components/Accordion",
     // argTypes: {
     //   HeaderStyle: {
     //     options: ["HeaderStyle1", "HeaderStyle2", "HeaderStyle3"],
@@ -43,17 +44,23 @@ exports.default = {
     //   showPercent: true
     // },
     parameters: {
-        docs: {
-            page: BarChart_mdx_1.default,
-        },
+    // docs: {
+    //   page: BarChartDocs,
+    // },
     },
 };
+// Updated data for stacked bar chart
+var data = [
+    { display: "Logged In Once", stack1: 60, stack2: 20, stack3: 40 },
+    { display: "Registered Users", stack1: 100, stack2: 50 },
+    { display: "Created Profile", stack1: 20, stack2: 5, stack3: 10, stack4: 15 },
+    { display: "Wrote at least 1 story", stack1: 8, stack2: 2 },
+];
 var BarChart = function (args) {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(BarChart_1.BarChart, { id: 'testbarchart', className: 'testbarchart', data: [
-                { court: "DRT", avg: 1.5 },
-                { court: "NCLT", avg: 18 },
-                { court: "bombayHC", avg: 23 },
-            ], highlight: 'min', numValuePath: 'avg', categoryValuePath: 'court', numberAxisLabel: 'Avg. No. of Hearings' })));
+    var colors = ["#5C80FF", "#FFA800", "#00BC8F", "#5C51CE"];
+    var handleBarClick = function (name) {
+        console.log("Bar clicked: ".concat(name));
+    };
+    return (react_1.default.createElement(Accordion_1.Accordion, { title: "hello" }, "hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello"));
 };
 exports.BarChart = BarChart;

package/dist/stories/v2/components/BarChart.stories.js

@@ -0,0 +1,265 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChart = void 0;
+var react_1 = __importDefault(require("react"));
+var BarChart_1 = require("../../../v2/components/BarChart");
+var BarChart_mdx_1 = __importDefault(require("./BarChart.mdx"));
+exports.default = {
+    title: "Oolib V 2.0/components/BarChart",
+    // argTypes: {
+    //   HeaderStyle: {
+    //     options: ["HeaderStyle1", "HeaderStyle2", "HeaderStyle3"],
+    //     control: { type: "inline-radio" },
+    //     defaultValue: "HeaderStyle1",
+    //   },
+    //   percent: {
+    //     control: { type: 'range', min: 1, max: 100, step: 1 },
+    //     defaultValue: 39,
+    //     table: {
+    //       category: 'HeaderStyle 2 Options',
+    //     },
+    //   },
+    //   infoTooltip: {
+    //     control: { type: 'text' },
+    //     defaultValue: '',
+    //     table: {
+    //       category: 'HeaderStyle 2 Options',
+    //     },
+    //   },
+    //   showPercent: {
+    //     table: {
+    //       category: 'HeaderStyle 2 Options',
+    //     },
+    //   },
+    // },
+    // args: {
+    //   // invert: false,
+    //   title: "This is the title",
+    //   label: "Label",
+    //   infoTooltip: '',
+    //   showPercent: true
+    // },
+    parameters: {
+        docs: {
+            page: BarChart_mdx_1.default,
+        },
+    },
+};
+// Updated data for stacked bar chart
+var data = [
+    { display: "Logged In Once", stack1: 60, stack2: 20, stack3: 40 },
+    { display: "Registered Users", stack1: 100, stack2: 50 },
+    { display: "Created Profile", stack1: 20, stack2: 5, stack3: 10, stack4: 15 },
+    { display: "Wrote at least 1 story", stack1: 8, stack2: 2 },
+];
+var BarChart = function (args) {
+    var colors = ["#5C80FF", "#FFA800", "#00BC8F", "#5C51CE"];
+    var handleBarClick = function (name) {
+        console.log("Bar clicked: ".concat(name));
+    };
+    return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" } },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(BarChart_1.BarChart, { data: [
+                    {
+                        display: "Logged In Once",
+                        stack1: 60,
+                        stack2: 20,
+                        stack3: 40,
+                        stack4: 10,
+                        stack5: 40,
+                        stack6: 10,
+                    },
+                    {
+                        display: "Registered Users",
+                        stack1: 100,
+                        stack2: 50,
+                        stack3: 10,
+                        stack4: 15,
+                        stack5: 40,
+                        stack6: 10,
+                    },
+                    {
+                        display: "Created Profile",
+                        stack1: 20,
+                        stack2: 5,
+                        stack3: 10,
+                        stack4: 15,
+                        stack5: 40,
+                        stack6: 10,
+                    },
+                    {
+                        display: "Wrote at least 3 story",
+                        stack1: 8,
+                        stack2: 2,
+                        stack3: 1,
+                        stack4: 1,
+                        stack5: 40,
+                        stack6: 10,
+                    },
+                    {
+                        display: "Created Profile again",
+                        stack1: 20,
+                        stack2: 5,
+                        stack3: 10,
+                        stack4: 15,
+                        stack5: 40,
+                        stack6: 10,
+                    },
+                    {
+                        display: "Wrote at least 1 story",
+                        stack1: 8,
+                        stack2: 2,
+                        stack3: 1,
+                        stack4: 1,
+                        stack5: 40,
+                        stack6: 10,
+                    },
+                ], plotDataPoint: "percentage" // This can be changed to count
+                , valuePath: [
+                    "stack1",
+                    "stack2",
+                    "stack3",
+                    "stack4",
+                    "stack5",
+                    "stack6",
+                ], 
+                // valuePath="stack1"
+                labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, 
+                // showPercent={true}
+                colorIdx: 0 })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "40px" } },
+                react_1.default.createElement(BarChart_1.BarChart, { data: [
+                        {
+                            display: "Logged In Once",
+                            stack1: 60,
+                            stack2: 20,
+                            stack3: 40,
+                            stack4: 10,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                        {
+                            display: "Registered Users",
+                            stack1: 100,
+                            stack2: 50,
+                            stack3: 10,
+                            stack4: 15,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                        {
+                            display: "Created Profile",
+                            stack1: 20,
+                            stack2: 5,
+                            stack3: 10,
+                            stack4: 15,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                        {
+                            display: "Wrote at least 3 story",
+                            stack1: 8,
+                            stack2: 2,
+                            stack3: 1,
+                            stack4: 1,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                        {
+                            display: "Created Profile again",
+                            stack1: 20,
+                            stack2: 5,
+                            stack3: 10,
+                            stack4: 15,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                        {
+                            display: "Wrote at least 1 story",
+                            stack1: 8,
+                            stack2: 2,
+                            stack3: 1,
+                            stack4: 1,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                    ], plotDataPoint: "percentage" // This can be changed to count
+                    , 
+                    // valuePath={["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"]}
+                    valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, 
+                    // showPercent={true}
+                    colorIdx: 0 }),
+                react_1.default.createElement(BarChart_1.BarChart, { data: [
+                        {
+                            display: "Logged In Once",
+                            stack1: 60,
+                            stack2: 20,
+                            stack3: 40,
+                            stack4: 10,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                        {
+                            display: "Registered Users",
+                            stack1: 100,
+                            stack2: 50,
+                            stack3: 10,
+                            stack4: 15,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                        {
+                            display: "Created Profile",
+                            stack1: 20,
+                            stack2: 5,
+                            stack3: 10,
+                            stack4: 15,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                        {
+                            display: "Wrote at least 3 story",
+                            stack1: 8,
+                            stack2: 2,
+                            stack3: 1,
+                            stack4: 1,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                        {
+                            display: "Created Profile again",
+                            stack1: 20,
+                            stack2: 5,
+                            stack3: 10,
+                            stack4: 15,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                        {
+                            display: "Wrote at least 1 story",
+                            stack1: 8,
+                            stack2: 2,
+                            stack3: 1,
+                            stack4: 1,
+                            stack5: 40,
+                            stack6: 10,
+                        },
+                    ], plotDataPoint: "percentage" // This can be changed to count
+                    , valuePath: [
+                        "stack1",
+                        "stack2",
+                        "stack3",
+                        "stack4",
+                        "stack5",
+                        "stack6",
+                    ], 
+                    // valuePath="stack1"
+                    breakdownDisplayType: "stacked", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, 
+                    // showPercent={true}
+                    colorIdx: 0 })))));
+};
+exports.BarChart = BarChart;

package/dist/stories/v2/components/DataVizAccordion.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    let title: string;
+    let parameters: {};
+}
+export default _default;
+export function DataVizAccordion(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/v2/components/DataVizAccordion.stories.js

@@ -0,0 +1,141 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataVizAccordion = void 0;
+var react_1 = __importDefault(require("react"));
+var DataVizAccordion_1 = require("../../../v2/components/DataVizAccordion");
+// import BarChartDocs from './BarChart.mdx'
+exports.default = {
+    title: "Oolib V 2.0/components/DataVizAccordion",
+    // argTypes: {
+    //   HeaderStyle: {
+    //     options: ["HeaderStyle1", "HeaderStyle2", "HeaderStyle3"],
+    //     control: { type: "inline-radio" },
+    //     defaultValue: "HeaderStyle1",
+    //   },
+    //   percent: {
+    //     control: { type: 'range', min: 1, max: 100, step: 1 },
+    //     defaultValue: 39,
+    //     table: {
+    //       category: 'HeaderStyle 2 Options',
+    //     },
+    //   },
+    //   infoTooltip: {
+    //     control: { type: 'text' },
+    //     defaultValue: '',
+    //     table: {
+    //       category: 'HeaderStyle 2 Options',
+    //     },
+    //   },
+    //   showPercent: {
+    //     table: {
+    //       category: 'HeaderStyle 2 Options',
+    //     },
+    //   },
+    // },
+    // args: {
+    //   // invert: false,
+    //   title: "This is the title",
+    //   label: "Label",
+    //   infoTooltip: '',
+    //   showPercent: true
+    // },
+    parameters: {
+    // docs: {
+    //   page: BarChartDocs,
+    // },
+    },
+};
+// Updated data for stacked bar chart
+var data = [
+    {
+        display: "Logged In Once",
+        stack1: 60,
+        stack2: 20,
+        stack3: 40,
+        stack4: 10,
+        stack5: 40,
+        stack6: 10,
+    },
+    {
+        display: "Registered Users",
+        stack1: 100,
+        stack2: 50,
+        stack3: 10,
+        stack4: 15,
+        stack5: 40,
+        stack6: 10,
+    },
+    {
+        display: "Created Profile",
+        stack1: 20,
+        stack2: 5,
+        stack3: 10,
+        stack4: 15,
+        stack5: 40,
+        stack6: 10,
+    },
+    {
+        display: "Wrote at least 3 story",
+        stack1: 8,
+        stack2: 2,
+        stack3: 1,
+        stack4: 1,
+        stack5: 40,
+        stack6: 10,
+    },
+    {
+        display: "Created Profile again",
+        stack1: 20,
+        stack2: 5,
+        stack3: 10,
+        stack4: 15,
+        stack5: 40,
+        stack6: 10,
+    },
+    {
+        display: "Wrote at least 1 story",
+        stack1: 8,
+        stack2: 2,
+        stack3: 1,
+        stack4: 1,
+        stack5: 40,
+        stack6: 10,
+    },
+];
+var DataVizAccordion = function (args) {
+    var colors = ["#5C80FF", "#FFA800", "#00BC8F", "#5C51CE"];
+    var handleBarClick = function (name) {
+        console.log("Bar clicked: ".concat(name));
+    };
+    return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "5rem" } },
+        react_1.default.createElement(DataVizAccordion_1.DataVizAccordion, { chartOptions: [
+                {
+                    display: "Stacked Bar Chart",
+                    comp: "BarChart",
+                    props: { breakdownDisplayType: "stacked" },
+                },
+                {
+                    display: "Grouped Bar Chart",
+                    comp: "BarChart",
+                    props: { breakdownDisplayType: "grouped" },
+                },
+            ], data: data, plotDataPoint: "percentage" // This can be changed to count
+            , valuePath: ["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"], 
+            // valuePath="stack1"
+            labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: true, colorIdx: 0 }),
+        react_1.default.createElement(DataVizAccordion_1.DataVizAccordion, { chartOptions: [
+                {
+                    display: "Bar Chart",
+                    comp: "BarChart",
+                },
+                {
+                    display: "Pie Chart",
+                    comp: "PieChart",
+                },
+            ], data: data, plotDataPoint: "percentage" // This can be changed to count
+            , valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: true, colorIdx: 0 })));
+};
+exports.DataVizAccordion = DataVizAccordion;

package/dist/stories/v2/components/PieChart.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    let title: string;
+    let parameters: {};
+}
+export default _default;
+export function PieChart(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/v2/components/PieChart.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieChart = void 0;
+var react_1 = __importDefault(require("react"));
+var PieChart_1 = require("../../../v2/components/PieChart");
+// import BarChartDocs from './BarChart.mdx'
+exports.default = {
+    title: "Oolib V 2.0/components/PieChart",
+    // argTypes: {
+    //   HeaderStyle: {
+    //     options: ["HeaderStyle1", "HeaderStyle2", "HeaderStyle3"],
+    //     control: { type: "inline-radio" },
+    //     defaultValue: "HeaderStyle1",
+    //   },
+    //   percent: {
+    //     control: { type: 'range', min: 1, max: 100, step: 1 },
+    //     defaultValue: 39,
+    //     table: {
+    //       category: 'HeaderStyle 2 Options',
+    //     },
+    //   },
+    //   infoTooltip: {
+    //     control: { type: 'text' },
+    //     defaultValue: '',
+    //     table: {
+    //       category: 'HeaderStyle 2 Options',
+    //     },
+    //   },
+    //   showPercent: {
+    //     table: {
+    //       category: 'HeaderStyle 2 Options',
+    //     },
+    //   },
+    // },
+    // args: {
+    //   // invert: false,
+    //   title: "This is the title",
+    //   label: "Label",
+    //   infoTooltip: '',
+    //   showPercent: true
+    // },
+    parameters: {
+    // docs: {
+    //   page: BarChartDocs,
+    // },
+    },
+};
+// Updated data for stacked bar chart
+var data = [
+    { display: 'Logged In Once', stack1: 60, stack2: 20, stack3: 40 },
+    { display: 'Registered Users', stack1: 100, stack2: 50 },
+    { display: 'Created Profile', stack1: 20, stack2: 5, stack3: 10, stack4: 15 },
+    { display: 'Wrote at least 1 story', stack1: 8, stack2: 2 }
+];
+var PieChart = function (args) {
+    var colors = ["#5C80FF", "#FFA800", "#00BC8F", "#5C51CE"];
+    var handleBarClick = function (name) {
+        console.log("Bar clicked: ".concat(name));
+    };
+    return (react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' } },
+        react_1.default.createElement(PieChart_1.PieChart, { data: [
+                { display: 'Logged In Once', stack1: 60, stack2: 20, stack3: 40, stack4: 10, stack5: 40, stack6: 10, },
+                { display: 'Registered Users', stack1: 100, stack2: 50, stack3: 10, stack4: 15, stack5: 40, stack6: 10 },
+                { display: 'Created Profile', stack1: 20, stack2: 5, stack3: 10, stack4: 15, stack5: 40, stack6: 10 },
+                { display: 'Wrote at least 3 story', stack1: 8, stack2: 2, stack3: 1, stack4: 1, stack5: 40, stack6: 10 },
+                { display: 'Created Profile again', stack1: 20, stack2: 5, stack3: 10, stack4: 15, stack5: 40, stack6: 10 },
+                { display: 'Wrote at least 1 story', stack1: 8, stack2: 2, stack3: 1, stack4: 1, stack5: 40, stack6: 10 }
+            ], plotDataPoint: "percentage" // This can be changed to count
+            , 
+            // valuePath={["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"]}
+            valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: true, colorIdx: 0 })));
+};
+exports.PieChart = PieChart;

package/dist/v2/components/Accordion/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface AccordionProps {
+    title: React.ReactNode;
+    children: React.ReactNode;
+    defaultExpanded?: boolean;
+    onViewTypeChange?: (type: "grouped" | "stacked") => void;
+    currentViewType?: "grouped" | "stacked";
+    actionsConfig?: {
+        display: string;
+        onClick: () => void;
+    }[];
+}
+export declare const Accordion: React.FC<AccordionProps>;
+export {};