oolib 2.207.1 → 2.208.1

package/dist/components/DateRangePicker/index.js

@@ -27,9 +27,9 @@ var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../themes");
 var BlockLabel_1 = require("../../v2/components/BlockLabel");
 var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
-var CheckboxInput_1 = require("../RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput");
 var DatePicker_1 = __importDefault(require("../DatePicker"));
 var styled_1 = require("./styled");
+var RadioAndCheckbox_1 = require("../../v2/components/RadioAndCheckbox");
 function DateRangePicker(props) {
     var onChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, allowPresentlyOngoing = props.allowPresentlyOngoing, invert = props.invert, disabled = props.disabled, debug = props.debug;
     var currentDate = new Date(new Date().toLocaleDateString());
@@ -45,7 +45,7 @@ function DateRangePicker(props) {
             react_1.default.createElement(styled_1.StyledDateRangeInputDivider, null, "-"),
             react_1.default.createElement(DatePicker_1.default, { id: 1, from: value && value[0] ? new Date(value[0]) : currentDate, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, value: value && (value[1] === null ? 'Ongoing' : value[1]), onChange: handleOnChange, readOnly: readOnly, disabled: value && value[1] === null ? true : disabled ? true : false, invert: invert, debug: debug })),
         !readOnly && allowPresentlyOngoing && (react_1.default.createElement("div", { style: { marginTop: '1rem' } },
-            react_1.default.createElement(CheckboxInput_1.CheckboxInput, { option: { display: 'Presently Ongoing', value: 'Ongoing' }, value: value && value[1] === null
+            react_1.default.createElement(RadioAndCheckbox_1.CheckboxInput, { option: { display: 'Presently Ongoing', value: 'Ongoing' }, value: value && value[1] === null
                     ? [{ display: 'Presently Ongoing', value: 'Ongoing' }]
                     : [], onClick: function (isSelected) {
                     return handleOnChange(1, isSelected ? undefined : null);

package/dist/components/GroupQuestionsInputSingle/index.js

@@ -45,7 +45,6 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var RadioAndCheckbox_1 = require("../RadioAndCheckbox");
 var Typo_1 = require("../Typo");
 var styled_1 = require("./styled");
 var BlockLabel_1 = require("../../v2/components/BlockLabel");
@@ -53,7 +52,8 @@ var themes_1 = require("../../themes");
 var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
 var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var mixins_1 = require("../../themes/mixins");
-var DropdownSingle_1 = require("../Dropdowns/DropdownSingle");
+var DropdownSingle_1 = require("../../v2/components/Dropdowns/DropdownSingle");
+var RadioAndCheckbox_1 = require("../../v2/components/RadioAndCheckbox");
 var greyColor10 = themes_1.colors.greyColor10;
 function GroupQuestionsInputSingle(_a) {
     var options = _a.options, subQuestionLabels = _a.subQuestionLabels, onChange = _a.onChange, value = _a.value, readOnly = _a.readOnly, id = _a.id, _b = _a.questionColWidth, questionColWidth = _b === void 0 ? 200 : _b, _c = _a.radioColsWidth, radioColsWidth = _c === void 0 ? 120 : _c, _d = _a.variant, _variant = _d === void 0 ? 'radio' : _d, _e = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _e === void 0 ? false : _e;

package/dist/components/IFrameInput/index.js

@@ -50,9 +50,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_player_1 = __importDefault(require("react-player"));
 var themes_1 = require("../../themes");
-var TextInputs_1 = require("../TextInputs");
 var Typo_1 = require("../Typo");
 var Embed_1 = require("./comps/Embed");
+var TextInputs_1 = require("../../v2/components/TextInputs");
 function IFrameInput(_a) {
     var label = _a.label, sublabel = _a.sublabel, value = _a.value, placeholder = _a.placeholder, onChange = _a.onChange, readOnly = _a.readOnly, isRequired = _a.isRequired, errorMsgs = _a.errorMsgs, isInRTE = _a.isInRTE, invert = _a.invert;
     var _b = (0, react_1.useState)(true), isValidURL = _b[0], setIsValidURL = _b[1];

package/dist/components/ImageInput/comps/Placeholder/index.js

@@ -56,9 +56,9 @@ var themes_1 = require("../../../../themes");
 var Typo_1 = require("../../../Typo");
 var FileUploadWrapper_1 = require("../../../FileUploadWrapper");
 var ModalConfirm_1 = require("../../../Modals/ModalConfirm");
-var genIcon_1 = require("../../../Dropdowns/utils/genIcon");
 var styled_1 = require("./styled");
 var utilsOolib_1 = require("../../../../utilsOolib");
+var genIcon_1 = require("../../../../v2/components/Dropdowns/utils/genIcon");
 var ImageSquare = icons_1.icons.ImageSquare;
 var greyColor100 = themes_1.colors.greyColor100;
 var Placeholder = function (_a) {

package/dist/components/SimpleTable/index.js

@@ -76,10 +76,10 @@ var useResizeTableColumns_1 = require("./useResizeTableColumns");
 var convertColHeaderConfigToRowData_1 = require("./utils/convertColHeaderConfigToRowData");
 var convertRowHeaderConfigToCellData_1 = require("./utils/convertRowHeaderConfigToCellData");
 var prepInitValueFromConfigIfNoValue_1 = require("./utils/prepInitValueFromConfigIfNoValue");
-var DropdownSingle_1 = require("../Dropdowns/DropdownSingle");
-var TextInputs_1 = require("../TextInputs");
 var icons_1 = require("../../icons");
 var Typo2_1 = require("../../v2/components/Typo2");
+var DropdownSingle_1 = require("../../v2/components/Dropdowns/DropdownSingle");
+var TextInputs_1 = require("../../v2/components/TextInputs");
 var ArrowDown = icons_1.icons.ArrowDown;
 var greyColor100 = themes_1.colors.greyColor100;
 /**

package/dist/components/VideoInput/comps/EmbedLinkModal.js

@@ -36,11 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmbedLinkModal = void 0;
 var react_1 = __importStar(require("react"));
 var Modal_1 = require("../../Modals/Modal");
-var TextInputs_1 = require("../../TextInputs");
 var Paddings_1 = require("../../Paddings");
 var Buttons_1 = require("../../Buttons");
 var styled_1 = require("../styled");
 var utils_1 = require("../utils");
+var TextInputs_1 = require("../../../v2/components/TextInputs");
 var EmbedLinkModal = function (_a) {
     var _b, _c, _d;
     var id = _a.id, setShowEmbedLinkModal = _a.setShowEmbedLinkModal, value = _a.value, createVideoPreview = _a.createVideoPreview, onChange = _a.onChange, invert = _a.invert;

package/dist/components/cards/ListProfile/index.js

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListProfile = ListProfile;
 var react_1 = __importDefault(require("react"));
-var ListContent_1 = require("../ListContent");
+var ListContent_1 = require("../../../v2/components/cards/ListContent");
 //we destructure only to make this comp easy to use for developers
 function ListProfile(_a) {
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions;

package/dist/index.d.ts

@@ -11,15 +11,10 @@ export * from "./components/TabBar";
 export * from "./components/Margins";
 export * from "./components/Paddings";
 export * from "./utils/_EXPORTS";
-export * from "./v2/components/TextInputs";
-export * from "./v2/components/cards/CardContent";
-export * from "./v2/components/cards/ListContent";
 export * from "./v2/components/ImagePlaceholder";
 export * from "./v2/components/Typo2";
-export * from "./v2/components/BlockLabel";
 export { colors } from "./themes";
 export { icons } from "./icons";
-export { SwitchDouble } from "./components/Switches";
 export { Section } from "./components/Section";
 export { UserRoleBadge } from "./components/UserRoleBadge";
 export { OKELink } from "./components/OKELink";
@@ -47,9 +42,6 @@ export { CardEmbed } from "./components/cards/CardEmbed";
 export { CardProfile } from "./components/cards/CardProfile";
 export { ListProfile } from "./components/cards/ListProfile";
 export { parseCardConfig } from "./components/cards/utils/parseCardConfig";
-export { OptionsSingle } from "./components/Dropdowns/comps/OptionsSingle";
-export { generateOptions } from "./components/Dropdowns/utils/generateOptions";
-export { genTagComp } from "./components/Dropdowns/utils/genTagComp";
 export { default as MetaBlock } from "./components/MetaBlock";
 export { ImageInput } from "./components/ImageInput";
 export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileImageInput";
@@ -63,9 +55,15 @@ export { ModalConfirmAction } from "./components/Modals/derivedComps/ModalConfir
 export { SimpleTable } from "./components/SimpleTable";
 export { styledOKELinkCSS } from "./components/OKELink/styled";
 export { default as TableCellResizerPlugin } from "./components/Lexical/Plugins/TableCellResizer";
+export { CardContent } from "./v2/components/cards/CardContent";
+export { ListContent } from "./v2/components/cards/ListContent";
+export { BlockLabel } from "./v2/components/BlockLabel";
 export { HintsProvider } from "./v2/components/Hints/contextApi";
 export { DropdownSingle } from "./v2/components/Dropdowns/DropdownSingle";
 export { DropdownMulti } from "./v2/components/Dropdowns/DropdownMulti";
+export { OptionsSingle } from "./v2/components/Dropdowns/comps/OptionsSingle";
+export { genTagComp } from "./v2/components/Dropdowns/utils/genTagComp";
+export { generateOptions } from "./v2/components/Dropdowns/utils/generateOptions";
 export { TabBarStyle1 as TabBarV2 } from "./v2/components/TabBar";
 export { default as MetaBlockV2 } from "./v2/components/MetaBlock";
 export { DateRangePicker as DateRangePickerV2 } from "./v2/components/DateRangePicker";
@@ -80,7 +78,6 @@ export { CheckboxList } from "./v2/components/RadioAndCheckbox/comps/CheckboxLis
 export { CheckboxInput } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput";
 export { CheckboxButton } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton";
 export { RadioList } from "./v2/components/RadioAndCheckbox/comps/RadioList/index";
-export { SwitchSingle } from "./v2/components/Switches";
 export { List } from "./v2/components/List";
 export { ListItem } from "./v2/components/List/comps/ListItem";
 export { default as CustomTooltip } from "./v2/components/dataviz/BarChart/comps/CustomTooltip";
@@ -89,7 +86,9 @@ export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from
 export { TagClear, TagLink, TagSelect, TagDisplay } from "./components/Tags";
 export { BannerAlert, BannerInfo } from "./components/Banners";
 export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";
+export { TextInput, EmailInput, NumberInput, PhoneInput, PasswordInput, URLInput } from "./v2/components/TextInputs";
 export { TagDisplay as TagDisplayV2, TagLink as TagLinkV2, TagClear as TagClearV2 } from "./v2/components/Tags";
 export { ButtonPrimary as ButtonPrimaryV2, ButtonSecondary as ButtonSecondaryV2, ButtonTertiary as ButtonTertiaryV2, ButtonGhost as ButtonGhostV2, ButtonPrimaryCompact, ButtonSecondaryCompact, ButtonTertiaryCompact, ButtonGhostCompact } from "./v2/components/Buttons";
 export { colors as colors2, typo as typoV2_CSS } from "./v2/themes";
 export { RadioInput, RadioButton } from "./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index";
+export { SwitchSingle, SwitchDouble } from "./v2/components/Switches";

package/dist/index.js

@@ -39,8 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = 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.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.SwitchDouble = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.baseStyling = exports.CustomTooltip = exports.ListItem = exports.List = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.DataVizAccordion = exports.BarGraphCollection = exports.HeatMapGrid = exports.PieChart = exports.BarChart = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = void 0;
+exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = 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.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.DataVizAccordion = exports.BarGraphCollection = exports.HeatMapGrid = exports.PieChart = exports.BarChart = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = void 0;
+exports.baseStyling = exports.CustomTooltip = exports.ListItem = exports.List = exports.SwitchDouble = exports.SwitchSingle = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -66,19 +67,10 @@ Object.defineProperty(exports, "TagLink", { enumerable: true, get: function () {
 Object.defineProperty(exports, "TagSelect", { enumerable: true, get: function () { return Tags_1.TagSelect; } });
 Object.defineProperty(exports, "TagDisplay", { enumerable: true, get: function () { return Tags_1.TagDisplay; } });
 __exportStar(require("./components/Breadcrumbs"), exports);
-// export * from './components/BlockLabel';
 __exportStar(require("./components/InlineAlert"), exports);
-// export * from './components/TextInputs';
 __exportStar(require("./components/Container"), exports);
 __exportStar(require("./components/Wrappers"), exports);
-var Switches_1 = require("./components/Switches");
-Object.defineProperty(exports, "SwitchDouble", { enumerable: true, get: function () { return Switches_1.SwitchDouble; } });
 __exportStar(require("./components/TabBar"), exports);
-// export {
-//   RadioButton,
-//   RadioInput,
-//   RadioList
-// } from './components/RadioAndCheckbox';
 __exportStar(require("./components/Margins"), exports);
 __exportStar(require("./components/Paddings"), exports);
 var Section_1 = require("./components/Section");
@@ -129,8 +121,6 @@ Object.defineProperty(exports, "DateTimePicker", { enumerable: true, get: functi
 var DateTimeRangePicker_1 = require("./components/DateTimeRangePicker");
 Object.defineProperty(exports, "DateTimeRangePicker", { enumerable: true, get: function () { return DateTimeRangePicker_1.DateTimeRangePicker; } });
 //cards
-// export {CardContent} from './components/cards/CardContent'
-// export {ListContent} from './components/cards/ListContent'
 var CardEmbed_1 = require("./components/cards/CardEmbed");
 Object.defineProperty(exports, "CardEmbed", { enumerable: true, get: function () { return CardEmbed_1.CardEmbed; } });
 var CardProfile_1 = require("./components/cards/CardProfile");
@@ -141,20 +131,6 @@ Object.defineProperty(exports, "ListProfile", { enumerable: true, get: function
 //maybe this can change in the future if sharelink stuff is componentized and shifted to oolib
 var parseCardConfig_1 = require("./components/cards/utils/parseCardConfig");
 Object.defineProperty(exports, "parseCardConfig", { enumerable: true, get: function () { return parseCardConfig_1.parseCardConfig; } });
-//dropdowns & options
-// export {DropdownSingle} from './components/Dropdowns/DropdownSingle'
-// export {DropdownMulti} from './components/Dropdowns/DropdownMulti'
-var OptionsSingle_1 = require("./components/Dropdowns/comps/OptionsSingle");
-Object.defineProperty(exports, "OptionsSingle", { enumerable: true, get: function () { return OptionsSingle_1.OptionsSingle; } });
-//used only by FilterInput. once that is shifted to oolib, dont need to export it anymore
-var generateOptions_1 = require("./components/Dropdowns/utils/generateOptions");
-Object.defineProperty(exports, "generateOptions", { enumerable: true, get: function () { return generateOptions_1.generateOptions; } });
-//used only by TagsInputSingle and Multi, in the checkbox & radio variant. once that is shifted to oolib, dont need to export it anymore
-var genTagComp_1 = require("./components/Dropdowns/utils/genTagComp");
-Object.defineProperty(exports, "genTagComp", { enumerable: true, get: function () { return genTagComp_1.genTagComp; } });
-////// context
-// export { HintsProvider } from './components/Hints/contextApi';
-// export this
 //meta components
 var MetaBlock_1 = require("./components/MetaBlock");
 Object.defineProperty(exports, "MetaBlock", { enumerable: true, get: function () { return __importDefault(MetaBlock_1).default; } });
@@ -196,18 +172,33 @@ Object.defineProperty(exports, "styledOKELinkCSS", { enumerable: true, get: func
 var TableCellResizer_1 = require("./components/Lexical/Plugins/TableCellResizer");
 Object.defineProperty(exports, "TableCellResizerPlugin", { enumerable: true, get: function () { return __importDefault(TableCellResizer_1).default; } });
 /////// V2 components /themes 
-__exportStar(require("./v2/components/TextInputs"), exports);
-__exportStar(require("./v2/components/cards/CardContent"), exports);
-__exportStar(require("./v2/components/cards/ListContent"), exports);
+var TextInputs_1 = require("./v2/components/TextInputs");
+Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return TextInputs_1.TextInput; } });
+Object.defineProperty(exports, "EmailInput", { enumerable: true, get: function () { return TextInputs_1.EmailInput; } });
+Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return TextInputs_1.NumberInput; } });
+Object.defineProperty(exports, "PhoneInput", { enumerable: true, get: function () { return TextInputs_1.PhoneInput; } });
+Object.defineProperty(exports, "PasswordInput", { enumerable: true, get: function () { return TextInputs_1.PasswordInput; } });
+Object.defineProperty(exports, "URLInput", { enumerable: true, get: function () { return TextInputs_1.URLInput; } });
+var CardContent_1 = require("./v2/components/cards/CardContent");
+Object.defineProperty(exports, "CardContent", { enumerable: true, get: function () { return CardContent_1.CardContent; } });
+var ListContent_1 = require("./v2/components/cards/ListContent");
+Object.defineProperty(exports, "ListContent", { enumerable: true, get: function () { return ListContent_1.ListContent; } });
 __exportStar(require("./v2/components/ImagePlaceholder"), exports);
 __exportStar(require("./v2/components/Typo2"), exports);
-__exportStar(require("./v2/components/BlockLabel"), exports);
+var BlockLabel_1 = require("./v2/components/BlockLabel");
+Object.defineProperty(exports, "BlockLabel", { enumerable: true, get: function () { return BlockLabel_1.BlockLabel; } });
 var contextApi_1 = require("./v2/components/Hints/contextApi");
 Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });
 var DropdownSingle_1 = require("./v2/components/Dropdowns/DropdownSingle");
 Object.defineProperty(exports, "DropdownSingle", { enumerable: true, get: function () { return DropdownSingle_1.DropdownSingle; } });
 var DropdownMulti_1 = require("./v2/components/Dropdowns/DropdownMulti");
 Object.defineProperty(exports, "DropdownMulti", { enumerable: true, get: function () { return DropdownMulti_1.DropdownMulti; } });
+var OptionsSingle_1 = require("./v2/components/Dropdowns/comps/OptionsSingle");
+Object.defineProperty(exports, "OptionsSingle", { enumerable: true, get: function () { return OptionsSingle_1.OptionsSingle; } });
+var genTagComp_1 = require("./v2/components/Dropdowns/utils/genTagComp");
+Object.defineProperty(exports, "genTagComp", { enumerable: true, get: function () { return genTagComp_1.genTagComp; } });
+var generateOptions_1 = require("./v2/components/Dropdowns/utils/generateOptions");
+Object.defineProperty(exports, "generateOptions", { enumerable: true, get: function () { return generateOptions_1.generateOptions; } });
 // 2 imports available
 var Tags_2 = require("./v2/components/Tags");
 Object.defineProperty(exports, "TagDisplayV2", { enumerable: true, get: function () { return Tags_2.TagDisplay; } });
@@ -258,8 +249,9 @@ var index_2 = require("./v2/components/RadioAndCheckbox/comps/RadioList/comps/Ra
 Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return index_2.RadioInput; } });
 var index_3 = require("./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index");
 Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return index_3.RadioButton; } });
-var Switches_2 = require("./v2/components/Switches");
-Object.defineProperty(exports, "SwitchSingle", { enumerable: true, get: function () { return Switches_2.SwitchSingle; } });
+var Switches_1 = require("./v2/components/Switches");
+Object.defineProperty(exports, "SwitchSingle", { enumerable: true, get: function () { return Switches_1.SwitchSingle; } });
+Object.defineProperty(exports, "SwitchDouble", { enumerable: true, get: function () { return Switches_1.SwitchDouble; } });
 var List_1 = require("./v2/components/List");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
 var ListItem_1 = require("./v2/components/List/comps/ListItem");

package/dist/stories/Oolib/components/Modal.stories.js

@@ -15,10 +15,10 @@ exports.Modal_Confirm = exports.Modal_ = void 0;
 var react_1 = require("react");
 var ModalConfirm_1 = require("../../../components/Modals/ModalConfirm");
 var Modal_1 = require("../../../components/Modals/Modal");
-var TextInputs_1 = require("../../../components/TextInputs");
 var Paddings_1 = require("../../../components/Paddings");
 var Typo_1 = require("../../../components/Typo");
-var DropdownSingle_1 = require("../../../components/Dropdowns/DropdownSingle");
+var DropdownSingle_1 = require("../../../v2/components/Dropdowns/DropdownSingle");
+var TextInputs_1 = require("../../../v2/components/TextInputs");
 var dropdownOptions = [
     {
         display: "Admin",

package/dist/stories/Oolib/components/TagsInput.stories.js

@@ -59,11 +59,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagsInput = void 0;
 var react_1 = __importStar(require("react"));
 var Container_1 = require("../../../components/Container");
-var DropdownMulti_1 = require("../../../components/Dropdowns/DropdownMulti");
 var Paddings_1 = require("../../../components/Paddings");
 var themes_1 = require("../../../themes");
 var TagsInput_mdx_1 = __importDefault(require("./TagsInput.mdx"));
 var icons_1 = require("../../../icons");
+var DropdownMulti_1 = require("../../../v2/components/Dropdowns/DropdownMulti");
 var availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
 exports.default = {
     title: 'Components/TagsInput',

package/dist/stories/v2/components/visualization/HeatMapGrid.stories.d.ts

@@ -14,4 +14,5 @@ declare namespace _default {
 }
 export default _default;
 export function _HeatMapGrid(args: any): React.JSX.Element;
+export function _HeatMapGridPlayground(args: any): React.JSX.Element;
 import React from "react";

package/dist/stories/v2/components/visualization/HeatMapGrid.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._HeatMapGrid = void 0;
+exports._HeatMapGridPlayground = exports._HeatMapGrid = void 0;
 var react_1 = __importDefault(require("react"));
 var HeatMapGrid_1 = require("../../../../v2/components/dataviz/HeatMapGrid");
 var props2_1 = require("./configs/props2");
@@ -120,3 +120,85 @@ var _HeatMapGrid = function (args) {
             react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, props2_1.heaMapGridProps2, { style: { height: "300px" } })))));
 };
 exports._HeatMapGrid = _HeatMapGrid;
+var _HeatMapGridPlayground = function (args) {
+    var handleCellClick = function (name) {
+        console.log("cell clicked: ".concat(name));
+    };
+    return (react_1.default.createElement("div", { style: { padding: '20px' } },
+        react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, { showPercent: args.showPercent, data: [
+                {
+                    display: "Logged",
+                    stack1: 60,
+                    stack2: 20,
+                    stack3: 40,
+                    stack4: 10,
+                    stack5: 40,
+                    stack6: 10,
+                    stack2Display: 'Labels Path Stack 2 Display'
+                },
+                {
+                    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",
+            ], tooltipLabelsMapping: {
+                stack1: 'Stack 1',
+                stack2: 'Stack 2',
+                stack3: 'Stack 3',
+                stack4: 'Stack 4',
+                stack5: 'Stack 5',
+                stack6: 'Stack 6',
+            }, 
+            // valuePath="stack1"
+            labelPath: "display", title: "This is a Heat Map Grid", onClick: handleCellClick, colorIdx: 2 }),
+        react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, props2_1.heaMapGridProps2))));
+};
+exports._HeatMapGridPlayground = _HeatMapGridPlayground;

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

@@ -58,7 +58,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePicker = void 0;
 var react_1 = __importStar(require("react"));
-var RadioAndCheckbox_1 = require("../../../components/RadioAndCheckbox");
 var BlockLabel_1 = require("../BlockLabel");
 var getBlockLabelProps_1 = require("../../../utils/getBlockLabelProps");
 var styled_1 = require("./styled");
@@ -109,7 +108,7 @@ function DateRangePicker_(props) {
             react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } }, value && value[1] === null ? (react_1.default.createElement("div", { style: { border: "1px solid ".concat(__1.colors2.grey20), padding: '8px 20px', borderRadius: '5px', width: '120px', background: "".concat(__1.colors2.grey5) } },
                 react_1.default.createElement(TextInputs_1.TextInput, { value: "OnGoing", readOnly: true }))) : (react_1.default.createElement(DatePicker_1.default, { value: endDate, onChange: function (date) { return handleDateChange(1, date); }, id: "".concat(id, "-end"), readOnly: readOnly, disabled: disabled || (value && value[1] === null), withPortal: withPortal, portalId: "date-picker-portal-end", minDate: getMinDate(true), maxDate: getMaxDate(), pickerLabel: endDateLabel, debug: debug })))),
         !readOnly && allowPresentlyOngoing && (react_1.default.createElement("div", { style: { marginTop: '0.5rem' } },
-            react_1.default.createElement(RadioAndCheckbox_1.CheckboxInput, { option: { display: 'Presently Ongoing', value: 'Ongoing' }, value: value && value[1] === null
+            react_1.default.createElement(__1.CheckboxInput, { option: { display: 'Presently Ongoing', value: 'Ongoing' }, value: value && value[1] === null
                     ? [{ display: 'Presently Ongoing', value: 'Ongoing' }]
                     : [], onClick: function (isSelected) {
                     return handleDateChange(1, isSelected ? undefined : null);

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

@@ -20,11 +20,11 @@ var useScrollBar_1 = require("../../../utils/customHooks/useScrollBar");
 var Buttons_1 = require("../../../components/Buttons");
 var index_styled_1 = require("./index.styled");
 var _EXPORTS_1 = require("../../../utils/_EXPORTS");
-var DropdownSingle_1 = require("../../../components/Dropdowns/DropdownSingle");
 var mixins_1 = require("../../../themes/mixins");
 var Typo2_1 = require("../Typo2");
 var colors_1 = require("../../themes/colors");
 var icons_1 = require("../../../icons");
+var __1 = require("../../..");
 var List = icons_1.icons.List;
 var Base = function (_a) {
     var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, disabledTabs = _a.disabledTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
@@ -76,7 +76,7 @@ var TabBarStyle1 = function (props) {
     var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
     var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
     return (props.responsive && !isDesktop
-        ? (react_1.default.createElement(DropdownSingle_1.DropdownSingle, __assign({}, props, { genCustomSelectComp: function () {
+        ? (react_1.default.createElement(__1.DropdownSingle, __assign({}, props, { genCustomSelectComp: function () {
                 var _a, _b;
                 return react_1.default.createElement(CustomSelectComp, { saveValueAsString: props.saveValueAsString, value: props.value, title: props.title, placeholder: placeholder, display: props.saveValueAsString
                         ? (_a = props.options.find(function (d) { return d.value === props.value; })) === null || _a === void 0 ? void 0 : _a.display
@@ -90,7 +90,7 @@ var TabBarStyle2 = function (props) {
     var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
     var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
     return (props.responsive && !isDesktop
-        ? (react_1.default.createElement(DropdownSingle_1.DropdownSingle, __assign({}, props, { genCustomSelectComp: function () {
+        ? (react_1.default.createElement(__1.DropdownSingle, __assign({}, props, { genCustomSelectComp: function () {
                 var _a, _b;
                 return react_1.default.createElement(CustomSelectComp, { saveValueAsString: props.saveValueAsString, value: props.value, title: props.title, placeholder: placeholder, display: props.saveValueAsString
                         ? (_a = props.options.find(function (d) { return d.value === props.value; })) === null || _a === void 0 ? void 0 : _a.display

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

@@ -214,10 +214,3 @@ function TextInput(_a) {
                         !((validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success") && validationStatus.msg,
                         validationStatus.link && (react_1.default.createElement(OKELink_1.OKELink, { to: validationStatus.link.to, style: { marginLeft: "0.5rem" } }, validationStatus.link.text))))))))));
 }
-var Inputs = {
-    EmailInput: EmailInput_1.EmailInput,
-    NumberInput: NumberInput_1.NumberInput,
-    PhoneInput: PhoneInput_1.PhoneInput,
-    PasswordInput: PasswordInput_1.PasswordInput,
-    URLInput: URLInput_1.URLInput,
-};

package/dist/v2/components/TextInputs/index.styled.js

@@ -48,7 +48,7 @@ exports.MsgContainerStyled = styled_components_1.default.div(templateObject_2 ||
     var status = _a.status;
     return status && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), getColorValue(status));
 });
-exports.InputContainerStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  ", ";\n\n  position: relative;\n  ", "\n\n  ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px; // gap between icon and text\n\n  ", "\n  ", "\n\n  ", "\n\n  ", ";\n"], ["\n  ", "\n  ", ";\n\n  position: relative;\n  ", "\n\n  ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px; // gap between icon and text\n\n  ", "\n  ", "\n\n  ", "\n\n  ", ";\n"])), globalStyles_1.globalInputElemPadding_v2, function (_a) {
+exports.InputContainerStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  ", ";\n\n  position: relative;\n  ", "\n\n  ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px; // gap between icon and text\n  z-index: 0; // this is important, else the zIndex - 1 on the ::before border element ends up hiding it.\n\n  ", "\n  ", "\n\n  ", "\n\n  ", ";\n"], ["\n  ", "\n  ", ";\n\n  position: relative;\n  ", "\n\n  ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px; // gap between icon and text\n  z-index: 0; // this is important, else the zIndex - 1 on the ::before border element ends up hiding it.\n\n  ", "\n  ", "\n\n  ", "\n\n  ", ";\n"])), globalStyles_1.globalInputElemPadding_v2, function (_a) {
     var iconAfter = _a.iconAfter;
     return iconAfter && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      flex-direction: row-reverse;\n      justify-content: space-between;\n    "], ["\n      flex-direction: row-reverse;\n      justify-content: space-between;\n    "])));
 }, globalStyles_1.globalInputElemBaseBorderStyling_v2, globalStyles_1.globalInputElemTextColor, function (_a) {

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

@@ -58,10 +58,10 @@ var __1 = require("../../../..");
 var Typo2_1 = require("../../Typo2");
 var BarChart_1 = require("../BarChart");
 var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
-var usePrepareData_1 = require("../utils/usePrepareData");
 var mapValueToColor_1 = require("./utils/mapValueToColor");
 var useAxisMeasure_1 = require("./utils/useAxisMeasure");
 var useFader_1 = require("./utils/useFader");
+var usePrepareHeatMapData_1 = require("./utils/usePrepareHeatMapData");
 var _configs = {
     labelsToGridGap: 4,
     gridGap: 2,
@@ -101,22 +101,20 @@ var HeatMapCell = function (_a) {
 var STYLED_UI_CAPTION_SEMIBOLD_DF = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_SEMIBOLD_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), (0, __1.clampText)(2));
 var HiddenScrollContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE and Edge */\n  \n  &::-webkit-scrollbar {\n    display: none; /* Webkit browsers */\n  }\n"], ["\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE and Edge */\n  \n  &::-webkit-scrollbar {\n    display: none; /* Webkit browsers */\n  }\n"])));
 var HeatMapGrid = function (_a) {
-    var _b;
-    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _c = _a.labelPath, labelPath = _c === void 0 ? "name" : _c, onClick = _a.onClick, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f, _g = _a.summarizeAfterIdx, summarizeAfterIdx = _g === void 0 ? 5 : _g, _h = _a.style, style = _h === void 0 ? {} : _h;
-    var _j = (0, usePrepareData_1.usePrepareData)({
+    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, _c = _a.showPercent, showPercent = _c === void 0 ? true : _c, _d = _a.colorIdx, colorIdx = _d === void 0 ? 0 : _d, _e = _a.showCount, showCount = _e === void 0 ? true : _e, onClick = _a.onClick, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
+    var _h = (0, usePrepareHeatMapData_1.usePrepareHeatMapData)({
         _data: _data,
-        labelPath: labelPath,
         valuePath: valuePath,
         tooltipLabelsMapping: tooltipLabelsMapping,
         tooltipLabelsPath: tooltipLabelsPath,
-        isBreakdown: true,
+        labelPath: labelPath,
         showPercent: showPercent,
-        summarizeAfterIdx: summarizeAfterIdx,
-    }), data = _j.data, dataMaxValue = _j.dataMaxValue, dataToSummarize = _j.dataToSummarize;
+        colorIdx: colorIdx
+    }), tableData = _h.tableData, columnHeaders = _h.columnHeaders, dataMaxValue = _h.dataMaxValue;
     var scrollableRef = (0, react_1.useRef)(null);
-    var _k = (0, useFader_1.useFader)(scrollableRef), setFader = _k.setFader, showFader = _k.showFader, showHorizontalFader = _k.showHorizontalFader;
+    var _j = (0, useFader_1.useFader)(scrollableRef), setFader = _j.setFader, showFader = _j.showFader, showHorizontalFader = _j.showHorizontalFader;
     // Replace: const { xAxisWidth, yAxisWidth, measurementRef } = useAxisDimensions(data, _configs.axisLabelWidth);
-    var _l = (0, useAxisMeasure_1.useAxisMeasure)(_configs.axisLabelWidth), xWidth = _l.xWidth, yWidth = _l.yWidth, setHorizontalRef = _l.setHorizontalRef, setVerticalRef = _l.setVerticalRef;
+    var _k = (0, useAxisMeasure_1.useAxisMeasure)(_configs.axisLabelWidth), xWidth = _k.xWidth, yWidth = _k.yWidth, setHorizontalRef = _k.setHorizontalRef, setVerticalRef = _k.setVerticalRef;
     return (react_1.default.createElement("div", { style: __assign({ display: "grid", gridTemplateColumns: "".concat(yWidth, "px 1fr"), gridTemplateRows: "".concat(xWidth, "px 1fr"), gap: _configs.labelsToGridGap + 'px', height: '100%', position: 'relative' }, style) },
         react_1.default.createElement("div", { style: { gridRow: 1, gridColumn: 1 } }),
         react_1.default.createElement(HiddenScrollContainer, { style: {
@@ -137,7 +135,7 @@ var HeatMapGrid = function (_a) {
                     alignItems: "center",
                     gap: _configs.gridGap + "px",
                     minWidth: 'max-content',
-                } }, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.map(function (dd, index) { return (react_1.default.createElement("div", { key: "label-".concat(dd.labels.tooltipLabel, "-").concat(index), style: {
+                } }, columnHeaders.map(function (header, index) { return (react_1.default.createElement("div", { key: "label-".concat(header.key, "-").concat(index), style: {
                     width: _configs.cellSize + "px",
                     height: xWidth + "px",
                     display: "flex",
@@ -160,7 +158,7 @@ var HeatMapGrid = function (_a) {
                     react_1.default.createElement("div", { ref: function (el) { return setHorizontalRef(index, el); } },
                         react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
                                 whiteSpace: "normal",
-                            } }, dd.labels.tooltipLabel))))); }))),
+                            } }, header.displayLabel))))); }))),
         react_1.default.createElement(HiddenScrollContainer, { style: {
                 gridRow: 2,
                 gridColumn: 1,
@@ -174,19 +172,16 @@ var HeatMapGrid = function (_a) {
                 if (scrollableRef.current) {
                     scrollableRef.current.scrollTop = e.target.scrollTop;
                 }
-            } }, data.map(function (d, idx) {
-            var _a, _b;
-            return (react_1.default.createElement("div", { key: "name-".concat((_a = d[0]) === null || _a === void 0 ? void 0 : _a.labels.name, "-").concat(idx), style: {
-                    height: _configs.cellSize + "px",
-                    textAlign: "right",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "flex-end",
-                    flexShrink: 0,
-                } },
-                react_1.default.createElement("div", { ref: function (el) { return setVerticalRef(idx, el); } },
-                    react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: { maxWidth: yWidth + "px" } }, (_b = d[0]) === null || _b === void 0 ? void 0 : _b.labels.name))));
-        })),
+            } }, _data.map(function (row, idx) { return (react_1.default.createElement("div", { key: "name-".concat(row[labelPath], "-").concat(idx), style: {
+                height: _configs.cellSize + "px",
+                textAlign: "right",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-end",
+                flexShrink: 0,
+            } },
+            react_1.default.createElement("div", { ref: function (el) { return setVerticalRef(idx, el); } },
+                react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: { maxWidth: yWidth + "px" } }, row[labelPath])))); })),
         react_1.default.createElement("div", { ref: scrollableRef, style: {
                 gridRow: 2,
                 gridColumn: 2,
@@ -208,13 +203,13 @@ var HeatMapGrid = function (_a) {
                     flexDirection: "column",
                     gap: _configs.gridGap + "px",
                     minWidth: 'max-content',
-                } }, data.map(function (d, rowIdx) { return (react_1.default.createElement("div", { key: rowIdx, style: {
+                } }, tableData.map(function (rowCells, rowIdx) { return (react_1.default.createElement("div", { key: rowIdx, style: {
                     display: "flex",
                     alignItems: "center",
                     gap: _configs.gridGap + "px",
                     flexShrink: 0,
-                } }, d.map(function (dd, colIdx) {
-                return react_1.default.createElement(HeatMapCell, { key: "".concat(rowIdx, "-").concat(colIdx), showPercent: false, dataMaxValue: dataMaxValue, value: dd });
+                } }, rowCells.map(function (cellData, colIdx) {
+                return react_1.default.createElement(HeatMapCell, { key: "".concat(rowIdx, "-").concat(colIdx), showPercent: showPercent, dataMaxValue: dataMaxValue, value: cellData });
             }))); }))),
         showFader && react_1.default.createElement("div", { style: {
                 background: "linear-gradient(to top, ".concat(__1.colors2.white, ", hsla(0, 0%, 100%, 0))"),