oolib 2.190.4 → 2.192.0

package/dist/v2/components/List/index.js

@@ -0,0 +1,87 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = exports.StyledListWrapper = void 0;
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var NoOptionResultsComp_1 = require("../Dropdowns/comps/NoOptionResultsComp");
+var ListItem_1 = require("./comps/ListItem");
+var SearchBar_1 = require("../Dropdowns/comps/SearchBar");
+var ListGroup_1 = require("./comps/ListGroup");
+var themes_1 = require("../../themes");
+exports.StyledListWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: white;\n  border-radius: 0.6rem;\n  padding: 0.4rem;\n  padding-top: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background: white;\n  border-radius: 0.6rem;\n  padding: 0.4rem;\n  padding-top: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var isSearchable = _a.isSearchable;
+    return isSearchable ? "0rem" : "0.4rem";
+}, function (_a) {
+    var disableShadow = _a.disableShadow;
+    return !disableShadow && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);\n    "], ["\n      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);\n    "])));
+}, function (_a) {
+    var enableBorder = _a.enableBorder;
+    return enableBorder && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      border: 1px solid ", ";\n    "], ["\n      border: 1px solid ", ";\n    "])), themes_1.colors.grey10);
+});
+var List = function (_a) {
+    // const theme = useTheme();
+    var _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, handleSelect = _a.handleSelect, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, _c = _a.isMulti, isMulti = _c === void 0 ? false : _c, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, _d = _a.grouped, grouped = _d === void 0 ? false : _d, disableShadow = _a.disableShadow, isSearchable = _a.isSearchable, searchbarPlaceholder = _a.searchbarPlaceholder, searchBarFocus = _a.searchBarFocus, searchString = _a.searchString, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus, children = _a.children, enableBorder = _a.enableBorder, style = _a.style;
+    var renderListItems = function () {
+        if (options.length === 0) {
+            return react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S });
+        }
+        if (grouped) {
+            return (react_1.default.createElement(react_1.Fragment, null, options.map(function (group, index) { return (react_1.default.createElement(ListGroup_1.ListGroup, { key: "group-".concat(index), group: group, index: index, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: observerRef, isMulti: isMulti, isTagsStyle: isTagsStyle, setFocusSelectTagsInput: setFocusSelectTagsInput, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, disableShadow: disableShadow })); })));
+        }
+        return options.map(function (option, index) { return (react_1.default.createElement(ListItem_1.ListItem, { key: option.value, option: option, isSelected: (!option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value), isFocussed: focussedOp === index, index: index, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: function () {
+                if (!option.loading) {
+                    handleSelect(option);
+                    if (setSearchString)
+                        setSearchString("");
+                    if (setSearchBarFocus)
+                        setSearchBarFocus(true);
+                    if (setFocusSelectTagsInput)
+                        setFocusSelectTagsInput(true);
+                }
+            }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: options.length === index + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value })); });
+    };
+    return (react_1.default.createElement(exports.StyledListWrapper, { disableShadow: disableShadow, style: style, isSearchable: isSearchable, enableBorder: enableBorder },
+        isSearchable && (react_1.default.createElement(SearchBar_1.SearchBar, { searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus })),
+        children,
+        " ",
+        renderListItems()));
+};
+exports.List = List;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/v2/components/dataviz/BarGraphCollection/index.d.ts

@@ -1,7 +1,7 @@
 export const BAR_GRAPH_HEIGHT: 250;
 export const DEFAULT_SINGLE_BAR_WIDTH: 24;
 export const BAR_GAP: 0.3;
-export function BarGraphCollection({ data: originalData, valuePath, labelPath, tooltipLabelsMapping, onClick, showCount, showPercent, groupBy, }: {
+export function BarGraphCollection({ data: originalData, valuePath, labelPath, tooltipLabelsMapping, onClick, showCount, showPercent, groupBy, totalDataCount, }: {
     data: any;
     valuePath: any;
     labelPath?: string;
@@ -10,6 +10,7 @@ export function BarGraphCollection({ data: originalData, valuePath, labelPath, t
     showCount?: boolean;
     showPercent?: boolean;
     groupBy: any;
+    totalDataCount: any;
 }): React.JSX.Element;
 export function BarGraph({ tagCategory, index1, showCount, showPercent, onClick }: {
     tagCategory: any;

package/dist/v2/components/dataviz/BarGraphCollection/index.js

@@ -50,13 +50,15 @@ exports.BAR_GRAPH_HEIGHT = 250;
 exports.DEFAULT_SINGLE_BAR_WIDTH = 24;
 exports.BAR_GAP = 0.3;
 var BarGraphCollection = function (_a) {
-    var originalData = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "display" : _b, _c = _a.tooltipLabelsMapping, tooltipLabelsMapping = _c === void 0 ? {} : _c, onClick = _a.onClick, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, groupBy = _a.groupBy;
+    var originalData = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "display" : _b, _c = _a.tooltipLabelsMapping, tooltipLabelsMapping = _c === void 0 ? {} : _c, onClick = _a.onClick, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, groupBy = _a.groupBy, totalDataCount = _a.totalDataCount;
     var containerRef = (0, react_1.useRef)();
     var _f = (0, react_1.useState)(0), containerWidth = _f[0], setContainerWidth = _f[1];
+    var highestCount = originalData === null || originalData === void 0 ? void 0 : originalData.reduce(function (highest, item) { return item.value > highest ? item.value : highest; }, 0);
     var transformedData = (0, react_1.useMemo)(function () {
         return (0, usePrepareData_1.usePrepareData)({ data: originalData, valuePath: valuePath, labelPath: labelPath, tooltipLabelsMapping: tooltipLabelsMapping, groupBy: groupBy });
     }, [originalData, valuePath, labelPath, tooltipLabelsMapping, groupBy]);
-    var data = (0, useGetDimensions_1.useGetDimensions)(transformedData, exports.BAR_GRAPH_HEIGHT, containerWidth);
+    var data = (0, useGetDimensions_1.useGetDimensions)(transformedData, exports.BAR_GRAPH_HEIGHT, containerWidth, totalDataCount, highestCount);
+    //  console.log({ total: calculateTotalPercentage(data) })
     (0, react_1.useEffect)(function () {
         var handleResize = function () {
             var _a, _b;
@@ -157,3 +159,16 @@ var BarGraph = function (_a) {
     })));
 };
 exports.BarGraph = BarGraph;
+//   function calculateTotalPercentage(data) {
+//     let totalPercentage = 0;
+//     // Iterate through each category
+//     data.forEach(category => {
+//         // Sum all percentages within tagSpecificCount
+//         if (category.tagSpecificCount && Array.isArray(category.tagSpecificCount)) {
+//             category.tagSpecificCount.forEach(tag => {
+//                 totalPercentage += tag.percentage || 0;
+//             });
+//         }
+//     });
+//     return totalPercentage;
+// }

package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.d.ts

@@ -1 +1 @@
-export function useGetDimensions(data: any, maxHeight: any, containerWidth: any): any;
+export function useGetDimensions(data: any, maxHeight: any, containerWidth: any, totalDataCount: any, highestCount: any): any;

package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGetDimensions = void 0;
 var __1 = require("..");
 var styled_1 = require("../styled");
-var useGetDimensions = function (data, maxHeight, containerWidth) {
+var useGetDimensions = function (data, maxHeight, containerWidth, totalDataCount, highestCount) {
     var singleBarWidth;
     var totalBars = data === null || data === void 0 ? void 0 : data.reduce(function (total, tagCategory) {
         var _a;
@@ -25,6 +25,26 @@ var useGetDimensions = function (data, maxHeight, containerWidth) {
     // const defaultWidthForBars = (totalBars - 1) * DEFAULT_SINGLE_BAR_WIDTH - (CONTAINER_PADDING * 2);
     var dynamicBarWidth = availableWidthForBars / totalBars;
     singleBarWidth = Math.max(dynamicBarWidth, __1.DEFAULT_SINGLE_BAR_WIDTH);
+    // Calculate the ceiling value for the highest count
+    var getCeilingValue = function (num) {
+        if (num === 0)
+            return 10;
+        // Find the power of 10 (magnitude)
+        var magnitude = Math.pow(10, Math.floor(Math.log10(num)));
+        // Round up to the nearest "nice" number
+        var normalized = num / magnitude; // This gives us a number between 1-10
+        var multiplier;
+        if (normalized <= 1)
+            multiplier = 1;
+        else if (normalized <= 2)
+            multiplier = 2;
+        else if (normalized <= 5)
+            multiplier = 5;
+        else
+            multiplier = 10;
+        return multiplier * magnitude;
+    };
+    var ceilingValue = getCeilingValue(highestCount);
     return data === null || data === void 0 ? void 0 : data.map(function (category) {
         // total count for this category
         var total = category.tagSpecificCount.reduce(function (sum, tag) { return sum + tag.count; }, 0);
@@ -33,8 +53,12 @@ var useGetDimensions = function (data, maxHeight, containerWidth) {
         var categoryTotalWidth = (barsInCategory * singleBarWidth) + (gapsInCategory * Math.floor(__1.BAR_GAP * 10));
         // percentage to each tag
         return __assign(__assign({}, category), { width: categoryTotalWidth, tagSpecificCount: category.tagSpecificCount.map(function (tag) {
-                var percentage = Number((tag.count / total * 100).toFixed(1));
-                return __assign({ percentage: percentage, height: Math.round((percentage / 100) * maxHeight), width: singleBarWidth }, tag);
+                // Original percentage relative to total dataset
+                var percentage = Number((tag.count / (totalDataCount || total) * 100).toFixed(1));
+                // New height calculation relative to highest count and ceiling
+                // This creates a "zoomed in" effect where bars are more visible
+                var relativeHeight = Math.round((tag.count / ceilingValue) * maxHeight);
+                return __assign({ percentage: percentage, height: relativeHeight, width: singleBarWidth }, tag);
             }) });
     });
 };

package/dist/v2/themes/globalStyles.js

@@ -11,8 +11,8 @@ exports.globalInputElemPadding_v2 = (0, styled_components_1.css)(templateObject_
     var size = _a.size;
     return size === "S" ? '0 10px' : '0 12px';
 });
-exports.globalInputElemHover_v2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    &::before{\n        border: 1.5px solid ", ";\n        /* box-shadow: 0 4px 10px #00000012; */\n    }\n  }\n"], ["\n  &:hover {\n    &::before{\n        border: 1.5px solid ", ";\n        /* box-shadow: 0 4px 10px #00000012; */\n    }\n  }\n"])), colors_1.colors.grey30);
-exports.globalInputElemFocused_v2 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n&:focus-within {\n    &::before{\n        border: 1.5px solid ", ";\n        box-shadow: 0 4px 10px #00000012;\n    }\n  }\n"], ["\n&:focus-within {\n    &::before{\n        border: 1.5px solid ", ";\n        box-shadow: 0 4px 10px #00000012;\n    }\n  }\n"])), colors_1.colors.grey80);
+exports.globalInputElemHover_v2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    &::before{\n        border: 1px solid ", ";\n        /* box-shadow: 0 4px 10px #00000012; */\n    }\n  }\n"], ["\n  &:hover {\n    &::before{\n        border: 1px solid ", ";\n        /* box-shadow: 0 4px 10px #00000012; */\n    }\n  }\n"])), colors_1.colors.grey30);
+exports.globalInputElemFocused_v2 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n&:focus-within {\n    &::before{\n        border: 1px solid ", ";\n        box-shadow: 0 4px 10px #00000012;\n    }\n  }\n"], ["\n&:focus-within {\n    &::before{\n        border: 1px solid ", ";\n        box-shadow: 0 4px 10px #00000012;\n    }\n  }\n"])), colors_1.colors.grey80);
 exports.globalInputElemBaseBorderStyling_v2 = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n&::before {\n    content: \"\";\n    background-color: ", ";\n    position: absolute;\n    z-index: 0;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: 6px;\n  }\n"], ["\n&::before {\n    content: \"\";\n    background-color: ", ";\n    position: absolute;\n    z-index: 0;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: 6px;\n  }\n"])), colors_1.colors.white, colors_1.colors.grey10);
 exports.globalInputElemDisabledStyling_v2 = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n", ";\n"], ["\n", ";\n"])), function (_a) {
     var disabled = _a.disabled;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.190.4",
+  "version": "2.192.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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

@@ -1,289 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdowns = void 0;
-var react_1 = __importStar(require("react"));
-var Container_1 = require("../../../components/Container");
-var Paddings_1 = require("../../../components/Paddings");
-var themes_1 = require("../../../themes");
-var icons_1 = require("../../../icons");
-var DropdownMulti_1 = require("../../../v2/components/Dropdowns/DropdownMulti");
-var DropdownSingle_1 = require("../../../v2/components/Dropdowns/DropdownSingle");
-// import { faker } from '@faker-js/faker';
-// const generateRandomCountry = () => ({
-//   display: faker.address.country(),
-//   value: faker.address.countryCode().toLowerCase(),
-// });
-// const generateDropdownOptions = (length) => {
-//   const dropdownOptions = [];
-//   for (let i = 0; i < length; i++) {
-//     dropdownOptions.push(generateRandomCountry());
-//   }
-//   return dropdownOptions;
-// };
-// const dropdownOptions2 = generateDropdownOptions(200);
-var availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
-exports.default = {
-    title: "Oolib V 2.0/Components/Dropdowns",
-    argTypes: {
-        // label: {
-        //   name: "Label",
-        // },
-        // sublabel: {
-        //   name: "Sub Label",
-        // },
-        placeholder: {
-            name: "Placeholder Text",
-        },
-        optionIcon: {
-            options: availableIcons,
-            control: { type: "select" },
-        },
-        selection: {
-            options: ["single", "multi"],
-            control: { type: "inline-radio" },
-        },
-        size: {
-            name: "Size",
-            control: { type: "inline-radio" },
-            options: ["Small", "Medium"],
-            mapping: {
-                Small: "S",
-                Medium: "M",
-            },
-        },
-        selection: {
-            name: "Selection Type",
-            options: ["single", "multi"],
-            control: { type: "select" },
-        },
-        isSearchable: {
-            name: "Searchable",
-        },
-        showIconInSelectArea: {
-            name: "Show Icon in Select Area",
-        },
-        optionImage: {
-            name: "Option Image",
-        },
-        optionDescription: {
-            name: "Option Description",
-        },
-        colors: {
-            name: 'Show Colors'
-        },
-        disabled: {
-            name: "Disabled",
-        },
-        readOnly: {
-            name: "Read Only",
-        },
-        invert: {
-            name: "Invert",
-        },
-        showColorInSelectArea: {
-            name: "Show Color in Select Area"
-        },
-        alignDropdown: {
-            name: "Align Dropdown",
-            options: ["left", "right"],
-            control: { type: "select" }
-        },
-    },
-    args: {
-        // label: "This is a label",
-        // sublabel: "This is a sub label",
-        placeholder: "",
-        size: "Medium",
-        selection: "single",
-        isSearchable: false,
-        optionDescription: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
-        optionImage: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrVSkmNOQ6abMCc5e6R2r7VwRZDkBHFTyzAg&usqp=CAU",
-        optionIcon: undefined,
-        showIconInSelectArea: false,
-        colors: false,
-        showColorInSelectArea: false,
-        disabled: false,
-        readOnly: false,
-        invert: false,
-        popOutOfOverflowHiddenParent: false,
-        alignDropdown: "left",
-    }
-};
-var dropdownOptions = [
-    {
-        display: "Option with a slightly longer name",
-        value: "india",
-        color: themes_1.colors.lightRed,
-        // image: "xyz",
-        // icon: "Trash",
-        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
-    },
-    {
-        display: "Sri Lanka",
-        value: "sriLanka",
-        color: themes_1.colors.invertRed,
-        // image: "xyz",
-        // icon: "Trash",
-        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
-    },
-    {
-        display: "Japan",
-        value: "japan",
-        color: themes_1.colors.lightBlue
-        // image: "xyz",
-        // icon: "Trash",
-        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
-    },
-    {
-        display: "Germany",
-        value: "germany",
-        color: themes_1.colors.primaryColor100
-        // image: "xyz",
-        // icon: "Trash",
-        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
-    },
-    {
-        display: "USA",
-        value: "usa",
-        color: themes_1.colors.greyColor100
-        // image: "xyz",
-        // icon: "Trash",
-        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
-    },
-    {
-        display: "Columbia",
-        value: "columbia",
-        color: themes_1.colors.lightRed,
-        // image: "xyz",
-        // icon: "Trash",
-        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
-    },
-    {
-        display: "Brazil",
-        value: "brazil",
-        color: themes_1.colors.invertRed,
-        // image: "xyz",
-        // icon: "Trash",
-        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
-    },
-    {
-        display: "Australia",
-        value: "australia",
-        color: themes_1.colors.lightBlue
-        // image: "xyz",
-        // icon: "Trash",
-        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
-    },
-];
-var Dropdowns = function (args) {
-    var _a = (0, react_1.useState)({
-        single: undefined,
-        multi: undefined,
-    }), val = _a[0], setVal = _a[1];
-    var _b = (0, react_1.useState)([]), options = _b[0], setOptions = _b[1];
-    (0, react_1.useEffect)(function () {
-        var delayOptions = setTimeout(function () {
-            var newOptions = dropdownOptions.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, image: args.optionImage && [{ publicUrl: args.optionImage }], color: args.colors && op.color })); });
-            setOptions(newOptions);
-        }, 2000);
-        // Cleanup the timeout on component unmount
-        return function () { return clearTimeout(delayOptions); };
-    }, [args.optionDescription, args.optionImage, args.optionIcon, args.colors]);
-    var Comp = args.selection === "single" ? DropdownSingle_1.DropdownSingle : DropdownMulti_1.DropdownMulti;
-    return (react_1.default.createElement("div", { style: { background: args.invert && themes_1.colors.greyColor100 } },
-        react_1.default.createElement(Container_1.Container, null,
-            react_1.default.createElement(Paddings_1.PaddingTopBottom40, null,
-                react_1.default.createElement(Comp, __assign({ key: args.selection }, args, { S: args.size == "S", options: dropdownOptions.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, image: args.optionImage && [{ publicUrl: args.optionImage }], color: args.colors && op.color })); }), value: val[args.selection], onChange: function (k, v) {
-                        return setVal(function (prev) {
-                            var _a;
-                            return (__assign(__assign({}, prev), (_a = {}, _a[args.selection] = v, _a)));
-                        });
-                    }, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type", popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent }))),
-            react_1.default.createElement("div", { style: { height: '1000px', background: 'red' } }))));
-};
-exports.Dropdowns = Dropdowns;
-// export const Button_Primary = (args) => (
-//   <GenButtonStory args={args} Comp={ButtonPrimary} />
-// )
-// Button_Primary.parameters = { controls: { exclude: ['variant', 'color'] } }
-// export const Button_Secondary = (args) => (
-//   <GenButtonStory args={args} Comp={ButtonSecondary} />
-// )
-// Button_Secondary.parameters = { controls: { exclude: ['variant', 'color'] } }
-// Button_Secondary.args = {
-//   active: false,
-// }
-// export const Button_Ghost = (args) => (
-//   <GenButtonStory args={args} Comp={ButtonGhost} />
-// )
-// Button_Ghost.args = {
-//   active: false,
-// }
-// Button_Ghost.parameters = { controls: { exclude: ['variant'] } }
-// export const Button_Custom = (args) => (
-//   <GenButtonStory args={args} Comp={ButtonCustom} />
-// )
-// Button_Custom.parameters = { controls: { exclude: ['variant', 'color'] } }
-// export const Google_Login = (args) => (
-//   <GenButtonStory args={args} Comp={GoogleLogin} />
-// )
-// Google_Login.parameters = {
-//   controls: { exclude: ['variant', 'color', 'iconOnly', 'icon + text'] },
-// }
-// export const Upload_Button = (args) => (
-//   <GenButtonStory args={{ ...args, children: 'Upload' }} Comp={UploadButton} />
-// )
-// Upload_Button.parameters = { controls: { exclude: ['color'] } }

package/dist/v2/components/Dropdowns/comps/OptionContent/index.d.ts

@@ -1,8 +0,0 @@
-export function OptionContent({ option, optionsClassName, invert, S, observerRef }: {
-    option: any;
-    optionsClassName: any;
-    invert: any;
-    S: any;
-    observerRef: any;
-}): React.JSX.Element;
-import React from "react";

package/dist/v2/components/Dropdowns/comps/OptionContent/index.js

@@ -1,35 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionContent = void 0;
-var react_1 = __importDefault(require("react"));
-var genProfileImg_1 = require("../../utils/genProfileImg");
-var genIcon_1 = require("../../utils/genIcon");
-var styled_components_1 = require("styled-components");
-var genColor_1 = require("../../utils/genColor");
-var getText_1 = require("../../../../../utils/getText");
-var Typo_1 = require("../../../../../components/Typo");
-var Typo2_1 = require("../../../Typo2");
-var OptionContent = function (_a) {
-    var option = _a.option, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef;
-    var theme = (0, styled_components_1.useTheme)();
-    var TypoComp = S ? Typo_1.SANS_2 : Typo2_1.UI_BODY_SEMIBOLD_SM_DF;
-    var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color;
-    return (react_1.default.createElement("div", { ref: observerRef, style: {
-            display: "flex",
-            alignItems: "flex-start",
-            gap: "0.6rem",
-            maxWidth: "36rem",
-        } },
-        (image || icon || color) &&
-            react_1.default.createElement("div", { style: { marginTop: desc && '0.2rem', display: 'flex', alignContent: 'center' } },
-                image && (0, genProfileImg_1.genProfileImg)({ image: image, display: display, invert: invert, theme: theme }),
-                icon && (0, genIcon_1.genIcon)({ icon: icon, invert: invert, S: S, className: "OKE-Dropdown__optionIcon" }),
-                color && (0, genColor_1.genColor)({ color: color })),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(TypoComp, { invert: invert, semibold: desc ? true : false, className: "OKE-Dropdown__optionText ".concat(optionsClassName || "") }, (0, getText_1.getText)(display)),
-            desc && (react_1.default.createElement(TypoComp, { invert: invert, className: "OKE-Dropdown__optionDesc" }, (0, getText_1.getText)(desc))))));
-};
-exports.OptionContent = OptionContent;