oolib 2.209.0 → 2.210.0

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

@@ -63,6 +63,15 @@ declare namespace _default {
             let defaultValue_6: boolean;
             export { defaultValue_6 as defaultValue };
         }
+        namespace alignCheckbox {
+            let control_7: string;
+            export { control_7 as control };
+            export let options: string[];
+            let description_8: string;
+            export { description_8 as description };
+            let defaultValue_7: string;
+            export { defaultValue_7 as defaultValue };
+        }
     }
 }
 export default _default;
@@ -78,10 +87,10 @@ export namespace ListItem_ {
             let name_2: string;
             export { name_2 as name };
             export { availableIcons as options };
-            export namespace control_7 {
+            export namespace control_8 {
                 let type: string;
             }
-            export { control_7 as control };
+            export { control_8 as control };
         }
     }
     export { argTypes_1 as argTypes };

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

@@ -141,7 +141,13 @@ exports.default = {
             control: "boolean",
             description: "Display selections as tags",
             defaultValue: false,
-        }
+        },
+        alignCheckbox: {
+            control: "select",
+            options: ["left", "right"],
+            description: "Align checkbox",
+            defaultValue: "left",
+        },
     },
 };
 var List_ = function (args) {
@@ -186,7 +192,7 @@ var List_ = function (args) {
     };
     return (React.createElement(__1.Container, { style: { background: "#eff" } },
         React.createElement(__1.PaddingTop40, null),
-        React.createElement(List_1.List, { options: filteredOptions, value: selectedValue, focussedOp: focussedOption, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: handleSelect, isMulti: args.isMulti, isTagsStyle: args.isTagsStyle, invert: args.invert, disableShadow: args.disableShadow, enableBorder: args.enableBorder, isSearchable: args.isSearchable, searchbarPlaceholder: args.searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus }),
+        React.createElement(List_1.List, { options: filteredOptions, value: selectedValue, focussedOp: focussedOption, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: handleSelect, isMulti: args.isMulti, isTagsStyle: args.isTagsStyle, invert: args.invert, disableShadow: args.disableShadow, enableBorder: args.enableBorder, alignCheckbox: args.alignCheckbox, isSearchable: args.isSearchable, searchbarPlaceholder: args.searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus }),
         React.createElement(__1.PaddingBottom40, null)));
 };
 exports.List_ = List_;

package/dist/v2/components/Dropdowns/comps/OptionsShell/styled.js

@@ -12,6 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../../../themes");
 var mixins_1 = require("../../../../../themes/mixins");
 var globalVariables_1 = require("../../../../../globalStyles/globalVariables");
+var globalStyles_1 = require("../../../../themes/globalStyles");
 /** for lightbox shell */
 exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: 100%;\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: 100%;\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
     var isOpen = _a.isOpen, openHeight = _a.openHeight;
@@ -23,7 +24,7 @@ exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateOb
     var isOpen = _a.isOpen;
     return isOpen ? '1px' : 0;
 });
-exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: ", ";\n    max-width: 36rem;\n    overflow: auto;\n    margin-top: ", ";\n    ", "\n    max-height: ", ";\n\n    ::-webkit-scrollbar { \n      width: 0.5rem;// for vertical bars\n      height: 0.2rem; //for horizontal bars \n    }\n    \n    ::-webkit-scrollbar-track {\n        background-color: ", ";\n    }\n    \n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 0.4rem;\n    }\n    \n    ::-webkit-scrollbar-thumb:hover {\n        background-color: ", ";\n      \n    }\n    \n    ", "{\n      ::-webkit-scrollbar { \n        width: 0.5rem;\n        height: 0.7rem;\n      }\n      ::-webkit-scrollbar-thumb {\n        border-radius: 0.5rem;\n      }\n    }\n"], ["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: ", ";\n    max-width: 36rem;\n    overflow: auto;\n    margin-top: ", ";\n    ", "\n    max-height: ", ";\n\n    ::-webkit-scrollbar { \n      width: 0.5rem;// for vertical bars\n      height: 0.2rem; //for horizontal bars \n    }\n    \n    ::-webkit-scrollbar-track {\n        background-color: ", ";\n    }\n    \n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 0.4rem;\n    }\n    \n    ::-webkit-scrollbar-thumb:hover {\n        background-color: ", ";\n      \n    }\n    \n    ", "{\n      ::-webkit-scrollbar { \n        width: 0.5rem;\n        height: 0.7rem;\n      }\n      ::-webkit-scrollbar-thumb {\n        border-radius: 0.5rem;\n      }\n    }\n"
+exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: ", ";\n    max-width: 36rem;\n    overflow: auto;\n    margin-top: ", ";\n    ", "\n    max-height: ", ";\n\n    ", "\n"], ["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: ", ";\n    max-width: 36rem;\n    overflow: auto;\n    margin-top: ", ";\n    ", "\n    max-height: ", ";\n\n    ", "\n"
     /** for modal shell */
 ])), function (_a) {
     var matchSelectInputWidth = _a.matchSelectInputWidth, selectRefwidth = _a.selectRefwidth;
@@ -45,7 +46,7 @@ exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 |
         default:
             return '30rem';
     }
-}, themes_1.colors.grey5, themes_1.colors.grey20, themes_1.colors.grey50, (0, mixins_1.mediaQuery)('md'));
+}, globalStyles_1.globalScrollbarStyling);
 /** for modal shell */
 exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  /* overflow: auto; */\n"], ["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  /* overflow: auto; */\n"])), themes_1.colors.white);
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/v2/components/List/comps/ListGroup.d.ts

@@ -1,6 +1,6 @@
 export const GroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const GroupDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
-export function ListGroup({ id, group, index, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, setSearchString, setSearchBarFocus, groupHeaderStickyTop }: {
+export function ListGroup({ id, group, index, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, setSearchString, setSearchBarFocus, groupHeaderStickyTop, alignCheckbox, }: {
     id: any;
     group: any;
     index: any;
@@ -18,5 +18,6 @@ export function ListGroup({ id, group, index, value, focussedOp, scrollFocussedO
     setSearchString: any;
     setSearchBarFocus: any;
     groupHeaderStickyTop?: number;
+    alignCheckbox?: string;
 }): React.JSX.Element;
 import React from 'react';

package/dist/v2/components/List/comps/ListGroup.js

@@ -20,7 +20,7 @@ exports.GroupHeader = styled_components_1.default.div(templateObject_1 || (templ
 });
 exports.GroupDivider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0.4rem 0 0.8rem 0;\n"], ["\n  margin: 0.4rem 0 0.8rem 0;\n"])));
 var ListGroup = function (_a) {
-    var id = _a.id, group = _a.group, index = _a.index, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, isMulti = _a.isMulti, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus, _b = _a.groupHeaderStickyTop, groupHeaderStickyTop = _b === void 0 ? 0 : _b;
+    var id = _a.id, group = _a.group, index = _a.index, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, isMulti = _a.isMulti, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus, _b = _a.groupHeaderStickyTop, groupHeaderStickyTop = _b === void 0 ? 0 : _b, _c = _a.alignCheckbox, alignCheckbox = _c === void 0 ? "left" : _c;
     return (react_1.default.createElement("div", null,
         index > 0 && (react_1.default.createElement(exports.GroupDivider, null,
             react_1.default.createElement(Divider_1.Divider, null))),
@@ -36,7 +36,7 @@ var ListGroup = function (_a) {
                     if (setFocusSelectTagsInput)
                         setFocusSelectTagsInput(true);
                 }
-            }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: group.options.length === idx + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value })); })));
+            }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: group.options.length === idx + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value, alignCheckbox: alignCheckbox })); })));
 };
 exports.ListGroup = ListGroup;
 var templateObject_1, templateObject_2;

package/dist/v2/components/List/comps/ListItem.d.ts

@@ -1,4 +1,4 @@
-export function ListItem({ id, option, isSelected, isFocussed, scrollFocussedOpIntoView, onChange: parentOnChange, setSearchString, optionsClassName, S, observerRef, isTagsStyle, isMulti, value, index, }: {
+export function ListItem({ id, option, isSelected, isFocussed, scrollFocussedOpIntoView, onChange: parentOnChange, setSearchString, optionsClassName, S, observerRef, isTagsStyle, isMulti, value, index, alignCheckbox, }: {
     id: any;
     option: any;
     isSelected: any;
@@ -13,5 +13,6 @@ export function ListItem({ id, option, isSelected, isFocussed, scrollFocussedOpI
     isMulti: any;
     value: any;
     index: any;
+    alignCheckbox?: string;
 }): React.JSX.Element;
 import React from "react";

package/dist/v2/components/List/comps/ListItem.js

@@ -17,7 +17,7 @@ var RadioAndCheckbox_1 = require("../../RadioAndCheckbox");
 var styled_1 = require("./styled");
 var grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, grey60 = themes_1.colors.grey60;
 var ListItem = function (_a) {
-    var id = _a.id, option = _a.option, isSelected = _a.isSelected, isFocussed = _a.isFocussed, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, setSearchString = _a.setSearchString, optionsClassName = _a.optionsClassName, S = _a.S, observerRef = _a.observerRef, isTagsStyle = _a.isTagsStyle, isMulti = _a.isMulti, value = _a.value, index = _a.index;
+    var id = _a.id, option = _a.option, isSelected = _a.isSelected, isFocussed = _a.isFocussed, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, setSearchString = _a.setSearchString, optionsClassName = _a.optionsClassName, S = _a.S, observerRef = _a.observerRef, isTagsStyle = _a.isTagsStyle, isMulti = _a.isMulti, value = _a.value, index = _a.index, _b = _a.alignCheckbox, alignCheckbox = _b === void 0 ? "left" : _b;
     var theme = (0, styled_components_1.useTheme)();
     var TypoComp = S ? Typo2_1.UI_BODY_SM_DF : Typo2_1.UI_BODY_SM_DF;
     var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color, loading = option.loading, disabled = option.disabled;
@@ -34,6 +34,12 @@ var ListItem = function (_a) {
     var opIsSelected = function (thisOpData) {
         return value === null || value === void 0 ? void 0 : value.some(function (d) { return d.value === thisOpData.value; });
     };
+    var renderCheckBox = function () {
+        if (isMulti && !isTagsStyle) {
+            return react_1.default.createElement(RadioAndCheckbox_1.CheckboxButton, { isSelected: opIsSelected(option) });
+        }
+        return null;
+    };
     return (react_1.default.createElement(styled_1.StyledListItemWrapper, { index: index, isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", ref: function (el) { return isFocussed && el && scrollFocussedOpIntoView(el); }, onClick: handleClick, S: S, style: { pointerEvents: disabled && "none", cursor: !disabled && "pointer" } },
         react_1.default.createElement("div", { ref: observerRef, style: {
                 display: "flex",
@@ -47,7 +53,7 @@ var ListItem = function (_a) {
                     alignItems: "center",
                     gap: "0.5rem"
                 } },
-                isMulti && !isTagsStyle ? react_1.default.createElement(RadioAndCheckbox_1.CheckboxButton, { isSelected: opIsSelected(option) }) : null,
+                alignCheckbox === "left" && renderCheckBox(),
                 icon &&
                     (0, genIcon_1.genIcon)({
                         icon: icon,
@@ -58,6 +64,7 @@ var ListItem = function (_a) {
                 color && (0, genColor_1.genColor)({ color: color }))),
             react_1.default.createElement("div", null,
                 react_1.default.createElement(TypoComp, { semibold: desc ? true : false, className: "OKE-Dropdown__optionText ".concat(optionsClassName || ""), style: { color: disabled ? grey40 : grey80 } }, (0, getText_1.getText)(display)),
-                desc && (react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { className: "OKE-Dropdown__optionDesc", style: { color: disabled ? grey40 : grey60, marginTop: "0.2rem" } }, (0, getText_1.getText)(desc)))))));
+                desc && (react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { className: "OKE-Dropdown__optionDesc", style: { color: disabled ? grey40 : grey60, marginTop: "0.2rem" } }, (0, getText_1.getText)(desc))))),
+        react_1.default.createElement(styled_1.StyledRightSection, null, alignCheckbox === "right" && renderCheckBox())));
 };
 exports.ListItem = ListItem;

package/dist/v2/components/List/comps/styled.d.ts

@@ -1 +1,2 @@
 export const StyledListItemWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
+export const StyledRightSection: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/v2/components/List/comps/styled.js

@@ -37,18 +37,14 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledListItemWrapper = void 0;
+exports.StyledRightSection = exports.StyledListItemWrapper = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../themes");
 var getDynamicColors_1 = require("../../../themes/utils/getDynamicColors");
 var grey10 = themes_1.colors.grey10;
-exports.StyledListItemWrapper = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    /* padding: ", "; */\n    padding: 0.8rem;\n    border-radius: 0.4rem;\n    gap: 20rem;\n    ", "\n    \n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", "\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", "\n      } \n\n    &:hover{\n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", ";\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", ";\n      } \n    }\n\n   \n\n    &:first-of-type {\n      /* margin-top: 0.4rem; */\n    }\n\n    &:last-of-type {\n      /* margin-bottom: 0.4rem; */\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-top: 0.2rem;\n      flex-shrink: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    /* padding: ", "; */\n    padding: 0.8rem;\n    border-radius: 0.4rem;\n    gap: 20rem;\n    ", "\n    \n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", "\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", "\n      } \n\n    &:hover{\n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", ";\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", ";\n      } \n    }\n\n   \n\n    &:first-of-type {\n      /* margin-top: 0.4rem; */\n    }\n\n    &:last-of-type {\n      /* margin-bottom: 0.4rem; */\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-top: 0.2rem;\n      flex-shrink: 0;\n    }\n"])), function (_a) {
+exports.StyledListItemWrapper = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    /* padding: ", "; */\n    padding: 0.8rem;\n    border-radius: 0.4rem;\n    gap: 20rem;\n\n    justify-content: space-between;\n\n    \n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", "\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", "\n      } \n\n    &:hover{\n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", ";\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", ";\n      } \n    }\n\n   \n\n    &:first-of-type {\n      /* margin-top: 0.4rem; */\n    }\n\n    &:last-of-type {\n      /* margin-bottom: 0.4rem; */\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-top: 0.2rem;\n      flex-shrink: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    /* padding: ", "; */\n    padding: 0.8rem;\n    border-radius: 0.4rem;\n    gap: 20rem;\n\n    justify-content: space-between;\n\n    \n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", "\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", "\n      } \n\n    &:hover{\n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", ";\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", ";\n      } \n    }\n\n   \n\n    &:first-of-type {\n      /* margin-top: 0.4rem; */\n    }\n\n    &:last-of-type {\n      /* margin-bottom: 0.4rem; */\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-top: 0.2rem;\n      flex-shrink: 0;\n    }\n"])), function (_a) {
     var S = _a.S;
     return S ? '0.8rem' : '0.6rem 0.8rem';
-}, function (_a) {
-    var S = _a.S;
-    return !S
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      /* min-height: 3.8rem; */\n      "], ["\n      /* min-height: 3.8rem; */\n      "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      /* height: 3rem; */\n      "], ["\n      /* height: 3rem; */\n      "])));
 }, function (_a) {
     var isFocussed = _a.isFocussed, isSelected = _a.isSelected, theme = _a.theme;
     if (isSelected) {
@@ -68,4 +64,5 @@ exports.StyledListItemWrapper = styled_components_1.default.li(templateObject_3
     var theme = _a.theme;
     return (0, getDynamicColors_1.getOnSecondary)(theme === null || theme === void 0 ? void 0 : theme.colors);
 });
-var templateObject_1, templateObject_2, templateObject_3;
+exports.StyledRightSection = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 0.1rem;\n  display: flex;\n  gap: 0.5rem;\n  align-self: flex-start;\n  justify-content: space-between;\n"], ["\n  margin-top: 0.1rem;\n  display: flex;\n  gap: 0.5rem;\n  align-self: flex-start;\n  justify-content: space-between;\n"])));
+var templateObject_1, templateObject_2;

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

@@ -1,6 +1,6 @@
 export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export function isGroupedData(options: any): boolean;
-export function List({ id, options, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, disableShadow, isSearchable, searchbarPlaceholder, searchBarFocus, searchString, setSearchString, setSearchBarFocus, children, enableBorder, style, groupHeaderStickyTop, showList: showListInParent, usedIn }: {
+export function List({ id, options, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, disableShadow, isSearchable, searchbarPlaceholder, searchBarFocus, searchString, setSearchString, setSearchBarFocus, children, enableBorder, style, groupHeaderStickyTop, showList: showListInParent, usedIn, alignCheckbox }: {
     id: any;
     options?: any[];
     value: any;
@@ -27,5 +27,6 @@ export function List({ id, options, value, focussedOp, scrollFocussedOpIntoView,
     groupHeaderStickyTop: any;
     showList: any;
     usedIn: any;
+    alignCheckbox: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -67,13 +67,13 @@ var isGroupedData = function (options) {
 exports.isGroupedData = isGroupedData;
 var List = function (_a) {
     // const theme = useTheme();
-    var id = _a.id, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, 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, 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, groupHeaderStickyTop = _a.groupHeaderStickyTop, showListInParent = _a.showList, usedIn = _a.usedIn;
+    var id = _a.id, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, 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, 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, groupHeaderStickyTop = _a.groupHeaderStickyTop, showListInParent = _a.showList, usedIn = _a.usedIn, alignCheckbox = _a.alignCheckbox;
     var renderListItems = function () {
         if (options.length === 0) {
             return react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S });
         }
         if ((0, exports.isGroupedData)(options)) {
-            return (react_1.default.createElement(react_1.Fragment, null, options.map(function (group, index) { return (react_1.default.createElement(ListGroup_1.ListGroup, { id: id, key: "group-".concat(index), group: group, index: index, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: observerRef, isMulti: isMulti, isTagsStyle: isTagsStyle, setFocusSelectTagsInput: setFocusSelectTagsInput, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, disableShadow: disableShadow, groupHeaderStickyTop: groupHeaderStickyTop })); })));
+            return (react_1.default.createElement(react_1.Fragment, null, options.map(function (group, index) { return (react_1.default.createElement(ListGroup_1.ListGroup, { id: id, key: "group-".concat(index), group: group, index: index, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: observerRef, isMulti: isMulti, isTagsStyle: isTagsStyle, setFocusSelectTagsInput: setFocusSelectTagsInput, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, disableShadow: disableShadow, groupHeaderStickyTop: groupHeaderStickyTop, alignCheckbox: alignCheckbox })); })));
         }
         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, onChange: function () {
                 if (!option.loading) {
@@ -85,7 +85,7 @@ var List = function (_a) {
                     if (setFocusSelectTagsInput)
                         setFocusSelectTagsInput(true);
                 }
-            }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: options.length === index + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value })); });
+            }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: options.length === index + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value, alignCheckbox: alignCheckbox })); });
     };
     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, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, 

package/dist/v2/themes/colors.d.ts

@@ -15,6 +15,7 @@ export declare const colors: {
     grey2: string;
     grey5: string;
     grey10: string;
+    grey15: string;
     grey20: string;
     grey30: string;
     grey40: string;

package/dist/v2/themes/colors.js

@@ -4,10 +4,10 @@ exports.colors = exports.dataVizColorsText = exports.dataVizColors = void 0;
 var primary = "#00223D";
 var secondary = "#526070";
 var tertiary = "#30133E";
-var primaryContainer = "#0776ED";
+var primaryContainer = "#126DED";
 var onPrimary = "#FFFFFF";
-var secondaryContainer = "#C9E2FC";
-var onSecondary = "#0F3257";
+var secondaryContainer = "#E2EEFF";
+var onSecondary = "#0052C5";
 var tertiaryContainer = "#533461";
 var onTertiary = "#F0C8FF";
 var surfaceContainer = "#EEEDF1";
@@ -18,6 +18,7 @@ var surfaceContainerLow = "#F3F3F7";
 var grey2 = '#00000005';
 var grey5 = '#0000000D';
 var grey10 = '#0000001A';
+var grey15 = '#00000026';
 var grey20 = '#00000033';
 var grey30 = '#0000004D';
 var grey40 = '#00000066';
@@ -80,6 +81,7 @@ exports.colors = {
     grey2: grey2,
     grey5: grey5,
     grey10: grey10,
+    grey15: grey15,
     grey20: grey20,
     grey30: grey30,
     grey40: grey40,

package/dist/v2/themes/globalStyles.d.ts

@@ -11,3 +11,4 @@ export declare const globalInputElemTextColor: import("styled-components").Flatt
 export declare const globalInputElemPlaceholderColor: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
     disabled: boolean;
 }, any>>;
+export declare const globalScrollbarStyling: import("styled-components").FlattenSimpleInterpolation;

package/dist/v2/themes/globalStyles.js

@@ -4,9 +4,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.globalInputElemPlaceholderColor = exports.globalInputElemTextColor = exports.globalInputElemDisabledStyling_v2 = exports.globalInputElemBaseBorderStyling_v2 = exports.globalInputElemFocused_v2 = exports.globalInputElemHover_v2 = exports.globalInputElemPadding_v2 = void 0;
+exports.globalScrollbarStyling = exports.globalInputElemPlaceholderColor = exports.globalInputElemTextColor = exports.globalInputElemDisabledStyling_v2 = exports.globalInputElemBaseBorderStyling_v2 = exports.globalInputElemFocused_v2 = exports.globalInputElemHover_v2 = exports.globalInputElemPadding_v2 = void 0;
 var styled_components_1 = require("styled-components");
 var colors_1 = require("./colors");
+var mixins_1 = require("../../themes/mixins");
 exports.globalInputElemPadding_v2 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", ";\n"], ["\n  padding: ", ";\n"])), function (_a) {
     var size = _a.size;
     return size === "S" ? '0 10px' : '0 12px';
@@ -19,8 +20,9 @@ exports.globalInputElemDisabledStyling_v2 = (0, styled_components_1.css)(templat
     return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &::before{\n      border-color: ", ";\n    }\n      \n      color: ", ";\n    "], ["\n    &::before{\n      border-color: ", ";\n    }\n      \n      color: ", ";\n    "])), colors_1.colors.grey10, colors_1.colors.grey40);
 });
 exports.globalInputElemTextColor = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject([" color: ", ";"], [" color: ", ";"])), colors_1.colors.grey80);
-exports.globalInputElemPlaceholderColor = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", "\n"], ["\n  color: ", "\n"])), function (_a) {
+exports.globalInputElemPlaceholderColor = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? colors_1.colors.grey40 : colors_1.colors.grey60);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+exports.globalScrollbarStyling = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    \n  ::-webkit-scrollbar { \n      width: 0.5rem;// for vertical bars\n      height: 0.2rem; //for horizontal bars \n    }\n    \n    ::-webkit-scrollbar-track {\n        background-color: ", ";\n    }\n    \n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 0.4rem;\n    }\n    \n    ::-webkit-scrollbar-thumb:hover {\n        background-color: ", ";\n    }\n\n    ::-webkit-scrollbar-thumb:active {\n        background-color: ", ";\n    } \n\n  ", "{\n    ::-webkit-scrollbar { \n      width: 0.5rem;\n      height: 0.7rem;\n    }\n    ::-webkit-scrollbar-thumb {\n      border-radius: 0.5rem;\n    }\n  }\n\n"], ["\n    \n  ::-webkit-scrollbar { \n      width: 0.5rem;// for vertical bars\n      height: 0.2rem; //for horizontal bars \n    }\n    \n    ::-webkit-scrollbar-track {\n        background-color: ", ";\n    }\n    \n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 0.4rem;\n    }\n    \n    ::-webkit-scrollbar-thumb:hover {\n        background-color: ", ";\n    }\n\n    ::-webkit-scrollbar-thumb:active {\n        background-color: ", ";\n    } \n\n  ", "{\n    ::-webkit-scrollbar { \n      width: 0.5rem;\n      height: 0.7rem;\n    }\n    ::-webkit-scrollbar-thumb {\n      border-radius: 0.5rem;\n    }\n  }\n\n"])), colors_1.colors.grey5, colors_1.colors.grey15, colors_1.colors.grey20, colors_1.colors.grey30, (0, mixins_1.mediaQuery)('md'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/package.json

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