npm - oolib - Versions diffs - 2.175.4 → 2.176.1 - Mend

oolib 2.175.4 → 2.176.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/components/RadioAndCheckbox/styled.js CHANGED Viewed

@@ -49,7 +49,7 @@ exports.StyledOptionsContainer = styled_components_1.default.div(templateObject_
     return S ? '0.7rem 1.5rem' : '1rem 2rem';
 }, function (_a) {
     var listType = _a.listType;
-    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: column;\n      gap: ", ";\n      align-items: initial;\n    "], ["\n      flex-direction: column;\n      gap: ", ";\n      align-items: initial;\n    "])), function (_a) {
+    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-wrap: nowrap;\n    \n      flex-direction: column;\n      gap: ", ";\n      align-items: flex-start; //ensures that each option doesnt stretch full width and create unnecessary click area\n    "], ["\n    flex-wrap: nowrap;\n    \n      flex-direction: column;\n      gap: ", ";\n      align-items: flex-start; //ensures that each option doesnt stretch full width and create unnecessary click area\n    "])), function (_a) {
         var S = _a.S;
         return S ? '1rem' : '1.5rem';
     }) :

package/dist/index.d.ts CHANGED Viewed

@@ -10,7 +10,6 @@ export * from "./components/Container";
 export * from "./components/Wrappers";
 export * from "./components/Switches";
 export * from "./components/TabBar";
-export * from "./components/RadioAndCheckbox";
 export * from "./components/Margins";
 export * from "./components/Paddings";
 export * from "./utils/_EXPORTS";
@@ -44,8 +43,6 @@ export { TimePicker } from "./components/TimePicker";
 export { TimeRangePicker } from "./components/TimeRangePicker";
 export { DateTimePicker } from "./components/DateTimePicker";
 export { DateTimeRangePicker } from "./components/DateTimeRangePicker";
-export { BarChart } from "./v2/components/BarChart";
-export { DataVizAccordion } from "./v2/components/DataVizAccordion";
 export { CardEmbed } from "./components/cards/CardEmbed";
 export { CardProfile } from "./components/cards/CardProfile";
 export { ListProfile } from "./components/cards/ListProfile";
@@ -74,8 +71,15 @@ export { colors as colors2 } from "./v2/themes";
 export { default as MetaBlockV2 } from "./v2/components/MetaBlock";
 export { DateRangePicker as DateRangePickerV2 } from "./v2/components/DateRangePicker";
 export { HomeCover as HomeCoverV2 } from "./v2/components/HomeCover";
+export { BarChart } from "./v2/components/BarChart";
+export { DataVizAccordion } from "./v2/components/DataVizAccordion";
+export { CheckboxList } from "./v2/components/RadioAndCheckbox/comps/CheckboxList";
+export { CheckboxInput } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput";
+export { CheckboxButton } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton";
+export * as baseStyling from "./v2/themes/utils/baseStyling";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { TagClear, TagLink, TagSelect, TagDisplay } from "./components/Tags";
+export { RadioButton, RadioInput, RadioList } from "./components/RadioAndCheckbox";
 export { BannerAlert, BannerInfo } from "./components/Banners";
 export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";
 export { TagDisplay as TagDisplayV2, TagLink as TagLinkV2, TagClear as TagClearV2 } from "./v2/components/Tags";

package/dist/index.js CHANGED Viewed

@@ -10,15 +10,37 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     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 __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DataVizAccordion = exports.BarChart = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.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.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.HintsProvider = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = void 0;
+exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.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.RadioList = exports.RadioInput = exports.RadioButton = 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.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.DataVizAccordion = exports.BarChart = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.HintsProvider = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = 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; } });
@@ -51,7 +73,10 @@ __exportStar(require("./components/Container"), exports);
 __exportStar(require("./components/Wrappers"), exports);
 __exportStar(require("./components/Switches"), exports);
 __exportStar(require("./components/TabBar"), exports);
-__exportStar(require("./components/RadioAndCheckbox"), exports);
+var RadioAndCheckbox_1 = require("./components/RadioAndCheckbox");
+Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioAndCheckbox_1.RadioButton; } });
+Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return RadioAndCheckbox_1.RadioInput; } });
+Object.defineProperty(exports, "RadioList", { enumerable: true, get: function () { return RadioAndCheckbox_1.RadioList; } });
 __exportStar(require("./components/Margins"), exports);
 __exportStar(require("./components/Paddings"), exports);
 var Section_1 = require("./components/Section");
@@ -101,11 +126,6 @@ var DateTimePicker_1 = require("./components/DateTimePicker");
 Object.defineProperty(exports, "DateTimePicker", { enumerable: true, get: function () { return DateTimePicker_1.DateTimePicker; } });
 var DateTimeRangePicker_1 = require("./components/DateTimeRangePicker");
 Object.defineProperty(exports, "DateTimeRangePicker", { enumerable: true, get: function () { return DateTimeRangePicker_1.DateTimeRangePicker; } });
-//V2 data viz comps
-var BarChart_1 = require("./v2/components/BarChart");
-Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
-var DataVizAccordion_1 = require("./v2/components/DataVizAccordion");
-Object.defineProperty(exports, "DataVizAccordion", { enumerable: true, get: function () { return DataVizAccordion_1.DataVizAccordion; } });
 //cards
 // export {CardContent} from './components/cards/CardContent'
 // export {ListContent} from './components/cards/ListContent'
@@ -206,3 +226,15 @@ var DateRangePicker_2 = require("./v2/components/DateRangePicker");
 Object.defineProperty(exports, "DateRangePickerV2", { enumerable: true, get: function () { return DateRangePicker_2.DateRangePicker; } });
 var HomeCover_2 = require("./v2/components/HomeCover");
 Object.defineProperty(exports, "HomeCoverV2", { enumerable: true, get: function () { return HomeCover_2.HomeCover; } });
+//V2 data viz comps
+var BarChart_1 = require("./v2/components/BarChart");
+Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
+var DataVizAccordion_1 = require("./v2/components/DataVizAccordion");
+Object.defineProperty(exports, "DataVizAccordion", { enumerable: true, get: function () { return DataVizAccordion_1.DataVizAccordion; } });
+var CheckboxList_1 = require("./v2/components/RadioAndCheckbox/comps/CheckboxList");
+Object.defineProperty(exports, "CheckboxList", { enumerable: true, get: function () { return CheckboxList_1.CheckboxList; } });
+var CheckboxInput_1 = require("./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput");
+Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return CheckboxInput_1.CheckboxInput; } });
+var CheckboxButton_1 = require("./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton");
+Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return CheckboxButton_1.CheckboxButton; } });
+exports.baseStyling = __importStar(require("./v2/themes/utils/baseStyling"));

package/dist/stories/v2/components/BarChart.stories.d.ts CHANGED Viewed

@@ -1,5 +1,16 @@
 declare namespace _default {
     let title: string;
+    namespace argTypes {
+        namespace showPercent {
+            let control: string;
+            let description: string;
+            let defaultValue: boolean;
+        }
+    }
+    namespace args {
+        let showPercent_1: boolean;
+        export { showPercent_1 as showPercent };
+    }
     namespace parameters {
         namespace docs {
             export { BarChartDocs as page };

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

@@ -9,39 +9,16 @@ var BarChart_1 = require("../../../v2/components/BarChart");
 var BarChart_mdx_1 = __importDefault(require("./BarChart.mdx"));
 exports.default = {
     title: "Oolib V 2.0/components/BarChart",
-    // argTypes: {
-    //   HeaderStyle: {
-    //     options: ["HeaderStyle1", "HeaderStyle2", "HeaderStyle3"],
-    //     control: { type: "inline-radio" },
-    //     defaultValue: "HeaderStyle1",
-    //   },
-    //   percent: {
-    //     control: { type: 'range', min: 1, max: 100, step: 1 },
-    //     defaultValue: 39,
-    //     table: {
-    //       category: 'HeaderStyle 2 Options',
-    //     },
-    //   },
-    //   infoTooltip: {
-    //     control: { type: 'text' },
-    //     defaultValue: '',
-    //     table: {
-    //       category: 'HeaderStyle 2 Options',
-    //     },
-    //   },
-    //   showPercent: {
-    //     table: {
-    //       category: 'HeaderStyle 2 Options',
-    //     },
-    //   },
-    // },
-    // args: {
-    //   // invert: false,
-    //   title: "This is the title",
-    //   label: "Label",
-    //   infoTooltip: '',
-    //   showPercent: true
-    // },
+    argTypes: {
+        showPercent: {
+            control: 'boolean',
+            description: 'Toggle percentage display',
+            defaultValue: true,
+        }
+    },
+    args: {
+        showPercent: true,
+    },
     parameters: {
         docs: {
             page: BarChart_mdx_1.default,
@@ -62,11 +39,7 @@ var BarChart = function (args) {
     };
     return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" } },
         react_1.default.createElement("div", null,
-            react_1.default.createElement(BarChart_1.BarChart
-            // showPercent={false}
-            , {
-                // showPercent={false}
-                data: [
+            react_1.default.createElement(BarChart_1.BarChart, { showPercent: args.showPercent, data: [
                     {
                         display: "Logged In Once",
                         // stack1: 60,
@@ -139,9 +112,7 @@ var BarChart = function (args) {
                     stack6: 'Stack 6',
                 },
                 // valuePath="stack1"
-                labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick,
-                // showPercent={true}
-                colorIdx: 2 })),
+                labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, colorIdx: 2 })),
         react_1.default.createElement("div", null,
             react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "40px" } },
                 react_1.default.createElement(BarChart_1.BarChart, { data: [
@@ -202,9 +173,7 @@ var BarChart = function (args) {
                     ], plotDataPoint: "percentage" // This can be changed to count
                     ,
                     // valuePath={["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"]}
-                    valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick,
-                    // showPercent={true}
-                    colorIdx: 2 }),
+                    valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 }),
                 react_1.default.createElement(BarChart_1.BarChart, { data: [
                         {
                             display: "Logged In Once",
@@ -270,8 +239,6 @@ var BarChart = function (args) {
                         "stack6",
                     ],
                     // valuePath="stack1"
-                    breakdownDisplayType: "stacked", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick,
-                    // showPercent={true}
-                    colorIdx: 2 })))));
+                    breakdownDisplayType: "stacked", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 })))));
 };
 exports.BarChart = BarChart;

package/dist/stories/v2/components/Checkbox.stories.d.ts CHANGED Viewed

@@ -21,6 +21,8 @@ export namespace CheckboxList {
         let disabled: boolean;
         let readOnly: boolean;
         let invert: boolean;
+        let label: string;
+        let sublabel: string;
     }
     namespace argTypes {
         export namespace correctOptions_1 {

package/dist/stories/v2/components/Checkbox.stories.js CHANGED Viewed

@@ -63,7 +63,7 @@ var CheckboxList = function (args) {
         }));
     }, [args.correctOptions]);
     return (React.createElement("div", { style: { backgroundColor: args.invert && greyColor100, padding: '4rem' } },
-        React.createElement(RadioAndCheckbox_1.CheckboxList, { options: options, value: selectedOptions, onChange: function (id, val) { return setSelectedOptions(val); }, rightWrongResult: args.markOptions, listType: args.listingStyle, injectOtherOption: args.addOther, commonIsCorrectDesc: args.feedbackMessage, S: args.size == "S", readOnly: args.readOnly, label: args.label, disabled: args.disabled, invert: args.invert, inputStyle: args.inputStyle, optionsLimit: args.optionsLimit }),
+        React.createElement(RadioAndCheckbox_1.CheckboxList, { options: options, value: selectedOptions, onChange: function (id, val) { return setSelectedOptions(val); }, rightWrongResult: args.markOptions, listType: args.listingStyle, injectOtherOption: args.addOther, commonIsCorrectDesc: args.feedbackMessage, S: args.size == "S", readOnly: args.readOnly, label: args.label, sublabel: args.sublabel, disabled: args.disabled, invert: args.invert, inputStyle: args.inputStyle, optionsLimit: args.optionsLimit }),
         React.createElement("br", null),
         " ",
         React.createElement(Divider_1.Divider, null),
@@ -91,6 +91,8 @@ exports.CheckboxList.args = {
     disabled: false,
     readOnly: false,
     invert: false,
+    label: 'This is a checkbox list with a label',
+    sublabel: 'This is a checkbox list with a label'
 };
 exports.CheckboxList.argTypes = {
     correctOptions: {

package/dist/v2/components/BarChart/comps/CustomTooltip/index.d.ts CHANGED Viewed

@@ -4,6 +4,10 @@ import { LabelData } from '../CustomizedLabel';
 interface CustomTooltipProps extends TooltipProps<number, string> {
     value?: LabelData[];
     showPercent?: boolean;
+    mousePosition?: {
+        x: number;
+        y: number;
+    };
 }
 declare const CustomTooltip: React.FC<CustomTooltipProps>;
 export default CustomTooltip;

package/dist/v2/components/BarChart/comps/CustomTooltip/index.js CHANGED Viewed

@@ -7,44 +7,44 @@ var react_1 = __importDefault(require("react"));
 var Typo2_1 = require("../../../Typo2");
 var __1 = require("../../../../..");
 var CustomTooltip = function (props) {
-    var _a, _b;
-    var active = props.active, payload = props.payload, value = props.value, showPercent = props.showPercent;
+    var active = props.active, payload = props.payload, value = props.value, showPercent = props.showPercent, mousePosition = props.mousePosition;
     if (!active || !payload || !payload.length)
         return null;
     // Calculate position - align with the right side of the bars
     var style = {
-        position: 'absolute',
-        left: "".concat(((_a = props === null || props === void 0 ? void 0 : props.coordinate) === null || _a === void 0 ? void 0 : _a.x) || 0, "px"),
-        top: "".concat(((_b = props === null || props === void 0 ? void 0 : props.coordinate) === null || _b === void 0 ? void 0 : _b.y) || 0, "px"),
-        transform: 'translateX(10px)', // Small offset from the bars
-        backgroundColor: 'white',
+        position: 'fixed',
+        left: "".concat((mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.x) || 0, "px"),
+        top: "".concat((mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.y) || 0, "px"),
+        transform: 'translate(10px, 10px)', // Offset from cursor and center vertically
+        backgroundColor: __1.colors2.black,
+        color: __1.colors2.white,
         border: "1px solid ".concat(__1.colors2.grey10),
         borderRadius: '6px',
         padding: '8px',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+        boxShadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.12)',
         zIndex: 1000,
         width: 'max-content',
         maxWidth: '200px',
         display: 'flex',
         flexDirection: 'column',
-        gap: '0.5rem'
+        gap: '1rem',
+        pointerEvents: 'none', // Add this to prevent tooltip from interfering with mouse events
     };
-    return (react_1.default.createElement("div", { style: style }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: '0.5rem'
-        } },
+    return (react_1.default.createElement("div", { style: style },
         react_1.default.createElement("div", { style: {
-                flex: '0 0 auto',
-                width: '1.2rem',
-                height: '1.2rem',
-                borderRadius: '0.2rem',
-                backgroundColor: entry.color,
-                display: 'flex',
-                gap: '0.5rem',
-                alignItems: 'center'
-            } }),
-        react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, { style: { flex: '0 0 auto', } }, showPercent ? entry.percentage + '%' : entry.count),
-        react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { style: { flex: '0 0 auto', } }, entry.tooltipLabel))); })));
+                display: 'grid',
+                gridTemplateColumns: showPercent ? 'auto auto auto' : 'auto auto',
+                gap: '0.6rem'
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.6rem' } },
+                react_1.default.createElement("div", { key: index, style: {
+                        width: '1.2rem',
+                        height: '1.2rem',
+                        borderRadius: '50%',
+                        backgroundColor: entry.color
+                    } }),
+                react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, { key: index }, showPercent ? entry.percentage + '%' : (entry.count || '0')))); })),
+            showPercent && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, value.map(function (entry, index) { return (react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { key: index }, entry.count || '0')); }))),
+            react_1.default.createElement("div", { style: { paddingLeft: '0.8rem', display: 'flex', flexDirection: 'column', gap: '1rem' } }, value.map(function (entry, index) { return (react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { key: index }, entry.tooltipLabel)); })))));
 };
 exports.default = CustomTooltip;

package/dist/v2/components/BarChart/index.js CHANGED Viewed

@@ -207,6 +207,17 @@ var BarChart = function (_a) {
     });
     console.log({ data: data });
     var _g = (0, react_1.useState)(undefined), activeBar = _g[0], setActiveBar = _g[1];
+    var _h = (0, react_1.useState)({ x: 0, y: 0 }), mousePosition = _h[0], setMousePosition = _h[1];
+    (0, react_1.useEffect)(function () {
+        var handleMouseMove = function (e) {
+            setMousePosition({ x: e.clientX, y: e.clientY });
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        // Clean up
+        return function () {
+            window.removeEventListener('mousemove', handleMouseMove);
+        };
+    }, []);
     // menu options for grouped and stacked
     var renderBar = function (stackIndex, lastIndex) {
         if (stackIndex === void 0) { stackIndex = 0; }
@@ -268,7 +279,7 @@ var BarChart = function (_a) {
                 react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category" }),
                 isBreakdown && (react_1.default.createElement(recharts_1.Tooltip, { content: function (props) {
                         var _a;
-                        return (react_1.default.createElement(CustomTooltip_1.default, __assign({}, props, { showPercent: showPercent,
+                        return (react_1.default.createElement(CustomTooltip_1.default, __assign({}, props, { mousePosition: mousePosition, showPercent: showPercent,
                             // god knows why the dataindex gets stored against props.label.
                             // this is some internal recharts thing for tooltips specifically.
                             // we dont do this.

package/dist/v2/components/Buttons/styled.js CHANGED Viewed

@@ -40,9 +40,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledBodyText = exports.ButtonStyled = void 0;
 var colors_1 = require("../../../v2/themes/colors");
 var mixins_1 = require("../../../themes/mixins");
-var utils_1 = require("../../themes/utils");
+var getDynamicColors_1 = require("../../themes/utils/getDynamicColors");
 var styled_components_1 = __importStar(require("styled-components"));
 var Typo2_1 = require("../Typo2");
+var baseStyling_1 = require("../../themes/utils/baseStyling");
 var grey40 = colors_1.colors.grey40, grey10 = colors_1.colors.grey10, grey80 = colors_1.colors.grey80, primaryContainer = colors_1.colors.primaryContainer, onPrimary = colors_1.colors.onPrimary, secondaryContainer = colors_1.colors.secondaryContainer, onSecondary = colors_1.colors.onSecondary;
 // Constants
 var BUTTON_SIZES = {
@@ -59,75 +60,73 @@ var BUTTON_PADDING_DF = {
     iconWithText: '1.2rem 1.4rem 1.2rem 1.2rem',
     iconOnly: '1.2rem',
 };
-// Hover Effects
-var createHoverEffect = function () { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &::before {\n    content: '';\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1;\n    ", "\n  }\n\n  &:hover::before {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n"], ["\n  &::before {\n    content: '';\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1;\n    ", "\n  }\n\n  &:hover::before {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n"])), (0, mixins_1.transition)("background-color")); };
 // Disabled States
-var disabledStyles = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  pointer-events: none;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  pointer-events: none;\n"])), grey10, grey40);
+var disabledStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  pointer-events: none;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  pointer-events: none;\n"])), grey10, grey40);
 // Variant Styles
 var variants = {
-    primary: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), function (_a) {
+    primary: (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), function (_a) {
         var colors = _a.theme.colors;
-        return colors ? (0, utils_1.getPrimaryContainer)(colors) : primaryContainer;
+        return colors ? (0, getDynamicColors_1.getPrimaryContainer)(colors) : primaryContainer;
     }, function (_a) {
         var colors = _a.theme.colors;
-        return colors ? (0, utils_1.getOnPrimary)(colors) : onPrimary;
+        return colors ? (0, getDynamicColors_1.getOnPrimary)(colors) : onPrimary;
     }, function (_a) {
         var forceHover = _a.forceHover;
-        return forceHover && createHoverEffect();
+        return forceHover && (0, baseStyling_1.apply10PercentBlackOnHover)();
     }, function (_a) {
         var disabled = _a.disabled;
         return disabled && disabledStyles;
-    }, createHoverEffect()),
-    secondary: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), function (_a) {
+    }, (0, baseStyling_1.apply10PercentBlackOnHover)()),
+    secondary: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), function (_a) {
         var colors = _a.theme.colors;
-        return colors ? (0, utils_1.getSecondaryContainer)(colors) : secondaryContainer;
+        return colors ? (0, getDynamicColors_1.getSecondaryContainer)(colors) : secondaryContainer;
     }, function (_a) {
         var colors = _a.theme.colors;
-        return colors ? (0, utils_1.getOnSecondary)(colors) : onSecondary;
+        return colors ? (0, getDynamicColors_1.getOnSecondary)(colors) : onSecondary;
     }, function (_a) {
         var disabled = _a.disabled;
         return disabled && disabledStyles;
     }, function (_a) {
         var forceHover = _a.forceHover;
-        return forceHover && createHoverEffect();
-    }, createHoverEffect()),
-    tertiary: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: transparent;\n    color: ", ";\n    /* border: 1px solid ", "; */\n    box-sizing: border-box;\n    outline: 1px solid ", ";\n    ", "\n\n    ", "\n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: transparent;\n    color: ", ";\n    /* border: 1px solid ", "; */\n    box-sizing: border-box;\n    outline: 1px solid ", ";\n    ", "\n\n    ", "\n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), grey80, colors_1.colors.grey10, grey10, function (_a) {
+        return forceHover && (0, baseStyling_1.apply10PercentBlackOnHover)();
+    }, (0, baseStyling_1.apply10PercentBlackOnHover)()),
+    tertiary: (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: transparent;\n    color: ", ";\n    /* border: 1px solid ", "; */\n    box-sizing: border-box;\n    outline: 1px solid ", ";\n    ", "\n\n    ", "\n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: transparent;\n    color: ", ";\n    /* border: 1px solid ", "; */\n    box-sizing: border-box;\n    outline: 1px solid ", ";\n    ", "\n\n    ", "\n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), grey80, colors_1.colors.grey10, grey10, function (_a) {
         var disabled = _a.disabled;
-        return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), grey40);
+        return disabled && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), grey40);
     }, function (_a) {
         var forceHover = _a.forceHover;
-        return forceHover && createHoverEffect();
-    }, createHoverEffect()),
-    ghost: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: transparent;\n    color: ", ";\n\n    ", "\n    \n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: transparent;\n    color: ", ";\n\n    ", "\n    \n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), grey80, function (_a) {
+        return forceHover && (0, baseStyling_1.apply10PercentBlackOnHover)();
+    }, (0, baseStyling_1.apply10PercentBlackOnHover)()),
+    ghost: (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: transparent;\n    color: ", ";\n\n    ", "\n    \n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: transparent;\n    color: ", ";\n\n    ", "\n    \n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), grey80, function (_a) {
         var disabled = _a.disabled;
-        return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), grey40);
+        return disabled && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), grey40);
     }, function (_a) {
         var forceHover = _a.forceHover;
-        return forceHover && createHoverEffect();
-    }, createHoverEffect()),
+        return forceHover && (0, baseStyling_1.apply10PercentBlackOnHover)();
+    }, (0, baseStyling_1.apply10PercentBlackOnHover)()),
 };
 // Composition Styles
 var getCompositionStyles = function (composition, responsive) {
     switch (composition) {
         case 'iconOnly':
-            return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: ", "; \n        flex-shrink: 0;\n      "], ["\n        padding: ", "; \n        flex-shrink: 0;\n      "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
+            return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        padding: ", "; \n        flex-shrink: 0;\n      "], ["\n        padding: ", "; \n        flex-shrink: 0;\n      "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
         case 'icon+text':
-            return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        padding: ", "; \n      "], ["\n        padding: ", "; \n      "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
+            return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: ", "; \n      "], ["\n        padding: ", "; \n      "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
         default:
-            return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        padding: ", "; \n      "], ["\n        padding: ", "; \n      "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
+            return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        padding: ", "; \n      "], ["\n        padding: ", "; \n      "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
     }
 };
 // Main Button Component
-exports.ButtonStyled = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  \n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.4rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  /* ", " */\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n  ", "\n\n  > * {\n    position: relative;\n    z-index: 2;\n  }\n"], ["\n  ", "\n  \n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.4rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  /* ", " */\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n  ", "\n\n  > * {\n    position: relative;\n    z-index: 2;\n  }\n"])), function (_a) {
+exports.ButtonStyled = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n  \n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.4rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  /* ", " */\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n  ", "\n\n  > * {\n    position: relative;\n    z-index: 2;\n  }\n"], ["\n  ", "\n  \n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.4rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  /* ", " */\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n  ", "\n\n  > * {\n    position: relative;\n    z-index: 2;\n  }\n"])), function (_a) {
     var _b = _a.composition, composition = _b === void 0 ? 'textOnly' : _b, responsive = _a.responsive;
     return getCompositionStyles(composition, responsive);
 }, function (_a) {
     var width = _a.width, composition = _a.composition, size = _a.size;
     return width
-        ? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), width) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      min-width: ", ";\n      max-width: 400px;\n    "], ["\n      min-width: ", ";\n      max-width: 400px;\n    "])), composition === 'iconOnly' ? BUTTON_SIZES[size] : '60px');
+        ? (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), width) : (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      min-width: ", ";\n      max-width: 400px;\n    "], ["\n      min-width: ", ";\n      max-width: 400px;\n    "])), composition === 'iconOnly' ? BUTTON_SIZES[size] : '60px');
 }, (0, mixins_1.transition)("background-color"), function (_a) {
     var variant = _a.variant;
     return variants[variant];
 });
-exports.StyledBodyText = (0, styled_components_1.default)(Typo2_1.UI_BODY_BOLD_SM)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), mixins_1.ellipsis);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+exports.StyledBodyText = (0, styled_components_1.default)(Typo2_1.UI_BODY_BOLD_SM)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), mixins_1.ellipsis);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/v2/components/HomeCover/comps/ImageSwitcher/styled.js CHANGED Viewed

@@ -10,11 +10,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledContentWrapper = exports.MobileWrapper = exports.ImageWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var mixins_1 = require("../../../../../themes/mixins");
-var utils_1 = require("../../../../themes/utils");
+var getDynamicColors_1 = require("../../../../themes/utils/getDynamicColors");
 exports.ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"])));
 exports.MobileWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: inherit;\n"], ["\n  position: relative;\n  width: 100%;\n  height: inherit;\n"])));
 exports.StyledContentWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", "; \n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-clip: border-box;\n  background-size: cover;\n  background-position: center;\n  border-radius: 1rem;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: ", ";\n  ", "\n\n  &.mobile {\n    border-radius: 1.6rem;\n  }\n"], ["\n  background-color: ", "; \n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-clip: border-box;\n  background-size: cover;\n  background-position: center;\n  border-radius: 1rem;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: ", ";\n  ", "\n\n  &.mobile {\n    border-radius: 1.6rem;\n  }\n"])), function (_a) {
     var colors = _a.theme.colors;
-    return (0, utils_1.getSecondaryContainer)(colors);
+    return (0, getDynamicColors_1.getSecondaryContainer)(colors);
 }, function (props) { return props.$backgroundImage; }, function (props) { return props.$opacity; }, (0, mixins_1.transition)("opacity"));
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/v2/components/HomeCover/comps/WrapperContentSection/styled.js CHANGED Viewed

@@ -39,7 +39,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColorOverlay = exports.StyledContentWrapperCover = exports.StyledImageLayer = exports.StyledImage = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-var utils_1 = require("../../../../themes/utils");
+var getDynamicColors_1 = require("../../../../themes/utils/getDynamicColors");
 var hexToRgb = function (hex) {
     var parsedHex = hex.replace('#', '');
     var bigint = parseInt(parsedHex, 16);
@@ -53,6 +53,6 @@ exports.StyledImageLayer = styled_components_1.default.div(templateObject_2 || (
 exports.StyledContentWrapperCover = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 1rem;\n    position: relative;\n    overflow: hidden;\n"], ["\n    border-radius: 1rem;\n    position: relative;\n    overflow: hidden;\n"])));
 exports.StyledColorOverlay = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  inset: 0;\n  ", "\n  mix-blend-mode: normal;\n  border-radius: 1rem;\n"], ["\n  position: absolute;\n  inset: 0;\n  ", "\n  mix-blend-mode: normal;\n  border-radius: 1rem;\n"])), function (_a) {
     var colors = _a.theme.colors;
-    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: rgba(", ", 0.3);\n  "], ["\n    background-color: rgba(", ", 0.3);\n  "])), hexToRgb((0, utils_1.getPrimaryContainer)(colors)));
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: rgba(", ", 0.3);\n  "], ["\n    background-color: rgba(", ", 0.3);\n  "])), hexToRgb((0, getDynamicColors_1.getPrimaryContainer)(colors)));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton/styled.js CHANGED Viewed

@@ -41,9 +41,10 @@ exports.StyledCheckbox = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../../../../themes");
 var mixins_1 = require("../../../../../../../themes/mixins");
-var utils_1 = require("../../../../../../themes/utils");
+var getDynamicColors_1 = require("../../../../../../themes/utils/getDynamicColors");
+var baseStyling_1 = require("../../../../../../themes/utils/baseStyling");
 var grey20 = themes_1.colors.grey20, grey5 = themes_1.colors.grey5, grey10 = themes_1.colors.grey10, grey50 = themes_1.colors.grey50;
-exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  \n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 2rem;\n    height: 2rem;\n  }\n  border-radius: 4px;\n  border: ", ";\n  background-color: ", ";\n  cursor: ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  \n\n  &:hover {\n    ", "\n  }\n"], ["\n  \n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 2rem;\n    height: 2rem;\n  }\n  border-radius: 4px;\n  border: ", ";\n  background-color: ", ";\n  cursor: ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  \n\n  &:hover {\n    ", "\n  }\n"])), (0, mixins_1.mediaQuery)('md'), function (_a) {
+exports.StyledCheckbox = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  \n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 1.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 4px;\n  border: ", ";\n  background-color: ", ";\n  cursor: ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n"], ["\n  \n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 1.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 4px;\n  border: ", ";\n  background-color: ", ";\n  cursor: ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n"])), (0, mixins_1.mediaQuery)('md'), function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;
     if (isSelected && disabled) {
         return "1px solid ".concat(grey20);
@@ -55,15 +56,18 @@ exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 ||
 }, function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled, colors = _a.theme.colors;
     if (isSelected) {
-        return disabled ? grey5 : (0, utils_1.getSecondaryContainer)(colors);
+        return disabled ? grey5 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
     }
     return disabled ? grey5 : "white";
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "not-allowed" : "pointer");
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled;
+    return isSelected && !disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " \n  "], ["\n    ", " \n  "])), (0, baseStyling_1.apply10PercentBlackOnHover)());
 }, function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;
     return !disabled &&
-        !isSelected && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        border: 1px solid ", ";\n      "], ["\n        border: 1px solid ", ";\n      "])), grey50);
+        !isSelected && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        border: 1px solid ", ";\n      "], ["\n        border: 1px solid ", ";\n      "])), grey50);
 });
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js CHANGED Viewed

@@ -21,7 +21,7 @@ var CheckboxInput = function (_a) {
     var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
     var genCheckboxButton = function (options) {
         if (options === void 0) { options = {}; }
-        return (react_1.default.createElement(CheckboxButton_1.CheckboxButton, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: "btn", disabled: disabled }));
+        return (react_1.default.createElement(CheckboxButton_1.CheckboxButton, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: "checkboxButton_inside_checkboxInput", disabled: disabled }));
     };
     var genCheckSquare = function () { return (react_1.default.createElement("div", { style: { flexShrink: 0 } },
         react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: disabled ? grey40 : onSecondary, style: {

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/index.js CHANGED Viewed

@@ -47,7 +47,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxList = CheckboxList;
 var react_1 = __importStar(require("react"));
 var BlockLabel_1 = require("../../../BlockLabel");
-var Tags_1 = require("../../../Tags");
 var TextInputs_1 = require("../../../TextInputs");
 var Buttons_1 = require("../../../Buttons");
 var _EXPORTS_1 = require("../../../../../utils/_EXPORTS");
@@ -57,6 +56,7 @@ var CheckboxInput_1 = require("./comps/CheckboxInput");
 var styled_2 = require("./styled");
 var Typo2_1 = require("../../../Typo2");
 var OKELink_1 = require("../../../OKELink");
+var Tags_1 = require("../../../../../components/Tags");
 var optionsContainers = {
     checkbox: styled_1.StyledOptionsContainer,
     tagSelect: styled_2.StyledTagOptionsContainer,

package/dist/v2/components/RadioAndCheckbox/styled.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export const StyledOptionsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledOption: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledOption: import("styled-components").StyledComponent<"button", any, {}, never>;
 export const StyledOtherOptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledOtherTextInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledCorrectMessage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../components/Typo").TypoCompProps>, any, {}, never>;
+export const StyledCorrectMessage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo2").TypoCompProps>, any, {}, never>;

package/dist/v2/components/RadioAndCheckbox/styled.js CHANGED Viewed

@@ -39,46 +39,55 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledCorrectMessage = exports.StyledOtherTextInputWrapper = exports.StyledOtherOptionContainer = exports.StyledOption = exports.StyledOptionsContainer = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-var utilsOolib_1 = require("../../../utilsOolib");
-var Typo_1 = require("../../../components/Typo");
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../../themes/mixins");
-var green = themes_1.colors.green, greyColor80 = themes_1.colors.greyColor80, white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100;
+var Typo2_1 = require("../Typo2");
 exports.StyledOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  align-items: center;\n\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  align-items: center;\n\n  ", "\n"])), function (_a) {
     var S = _a.S;
-    return S ? '0.7rem 1.5rem' : '1rem 2rem';
+    return (S ? "0.7rem 1.5rem" : "1rem 2rem");
 }, function (_a) {
     var listType = _a.listType;
-    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: column;\n      gap: ", ";\n      align-items: initial;\n    "], ["\n      flex-direction: column;\n      gap: ", ";\n      align-items: initial;\n    "])), function (_a) {
-        var S = _a.S;
-        return S ? '1rem' : '1.5rem';
-    }) :
-        '';
+    return listType === "vertical"
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          flex-direction: column;\n\n          gap: ", "; //0.6 because on mobile checkbox has 0.4 rem extra click area top and bottom. so 1.4rem - 0.8rem\n          align-items: flex-start;\n          ", " {\n            gap: ", ";\n          }\n        "], ["\n          flex-direction: column;\n\n          gap: ", "; //0.6 because on mobile checkbox has 0.4 rem extra click area top and bottom. so 1.4rem - 0.8rem\n          align-items: flex-start;\n          ", " {\n            gap: ", ";\n          }\n        "])), function (_a) {
+            var S = _a.S;
+            return S
+                ? "1rem"
+                : "0.6rem";
+        }, (0, mixins_1.mediaQuery)("md"), function (_a) {
+            var S = _a.S;
+            return (S ? "1rem" : "1.4rem");
+        }) : "";
 });
-exports.StyledOption = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* gap: ", "; */\n  gap: 0.8rem;\n  ", "{\n    gap: 0.6rem;\n  }\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .btn {\n    ", "\n  }\n\n"], ["\n  display: flex;\n  align-items: center;\n  /* gap: ", "; */\n  gap: 0.8rem;\n  ", "{\n    gap: 0.6rem;\n  }\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .btn {\n    ", "\n  }\n\n"])), function (_a) {
+exports.StyledOption = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  background-color: unset;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  /* gap: ", "; */\n  gap: 0.8rem;\n  padding: 0.4rem 0; //this is so that there is more click area on mobile\n  ", " {\n    gap: 0.6rem;\n    padding: 0;\n  }\n  position: relative;\n  cursor: ", ";\n\n  &:hover .checkboxButton_inside_checkboxInput {\n    ", "\n    ", "\n  }\n"], ["\n  border: none;\n  background-color: unset;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  /* gap: ", "; */\n  gap: 0.8rem;\n  padding: 0.4rem 0; //this is so that there is more click area on mobile\n  ", " {\n    gap: 0.6rem;\n    padding: 0;\n  }\n  position: relative;\n  cursor: ", ";\n\n  &:hover .checkboxButton_inside_checkboxInput {\n    ", "\n    ", "\n  }\n"])), function (_a) {
     var S = _a.S;
-    return S ? '0.7rem' : '1rem';
-}, (0, mixins_1.mediaQuery)('md'), function (_a) {
+    return (S ? "0.7rem" : "1rem");
+}, (0, mixins_1.mediaQuery)("md"), function (_a) {
     var rightWrongResult = _a.rightWrongResult, disabled = _a.disabled;
-    return disabled ? 'not-allowed' :
-        rightWrongResult ? 'initial' : 'pointer';
+    return disabled ? "not-allowed" : rightWrongResult ? "initial" : "pointer";
 }, function (_a) {
     var isSelected = _a.isSelected, rightWrongResult = _a.rightWrongResult, disabled = _a.disabled, theme = _a.theme, invert = _a.invert;
-    return !isSelected && !rightWrongResult && !disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors));
+    return !isSelected &&
+        !rightWrongResult &&
+        !disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        border: 1px solid ", ";\n      "], ["\n        border: 1px solid ", ";\n      "])), themes_1.colors.grey50);
+}, function (_a) {
+    var isSelected = _a.isSelected, isDisabled = _a.isDisabled;
+    return isSelected &&
+        !isDisabled && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        &::before {\n          background: ", ";\n        }\n      "], ["\n        &::before {\n          background: ", ";\n        }\n      "])), themes_1.colors.grey10);
 });
-exports.StyledOtherOptionContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  gap: 1rem;\n  flex-direction: ", ";\n"])), function (_a) {
+exports.StyledOtherOptionContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  gap: 1rem;\n  flex-direction: ", ";\n"])), function (_a) {
     var listType = _a.listType;
-    return listType == 'vertical' ? 'column' : 'row';
+    return listType == "vertical" ? "column" : "row";
 });
-exports.StyledOtherTextInputWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  \n  margin-right: 0.5rem;\n  ", "\n\n  ", ";\n  \n  ", "{ width: 28rem; }\n"], ["\n  \n  margin-right: 0.5rem;\n  ", "\n\n  ", ";\n  \n  ", "{ width: 28rem; }\n"])), function (_a) {
+exports.StyledOtherTextInputWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin-right: 0.5rem;\n  ", "\n\n  ", ";\n\n  ", " {\n    width: 28rem;\n  }\n"], ["\n  margin-right: 0.5rem;\n  ", "\n\n  ", ";\n\n  ", " {\n    width: 28rem;\n  }\n"])), function (_a) {
     var rightWrongResult = _a.rightWrongResult;
-    return rightWrongResult && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["pointer-events: none;"], ["pointer-events: none;"])));
+    return rightWrongResult && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 }, function (_a) {
     var listType = _a.listType;
-    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["margin-left: 2.5rem;"], ["margin-left: 2.5rem;"]))) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["width: 28rem"], ["width: 28rem"])));
-}, (0, mixins_1.mediaQuery)('sm'));
-exports.StyledCorrectMessage = (0, styled_components_1.default)(Typo_1.SANS_3)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  padding-top: 1rem;\n"], ["\n  color: ", ";\n  padding-top: 1rem;\n"])), function (_a) {
+    return listType === "vertical"
+        ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          margin-left: 2.5rem;\n        "], ["\n          margin-left: 2.5rem;\n        "]))) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          width: 28rem;\n        "], ["\n          width: 28rem;\n        "])));
+}, (0, mixins_1.mediaQuery)("sm"));
+exports.StyledCorrectMessage = (0, styled_components_1.default)(Typo2_1.UI_CAPTION)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  color: ", ";\n  padding-top: 1rem;\n"], ["\n  color: ", ";\n  padding-top: 1rem;\n"])), function (_a) {
     var invert = _a.invert;
-    return invert ? white : greyColor100;
+    return (invert ? themes_1.colors.white : themes_1.colors.grey90);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/v2/components/Switches/styled.js CHANGED Viewed

@@ -11,7 +11,7 @@ exports.STYLED_UI_BODY_SM = exports.StyledSwitch = exports.StyledButtonSlider =
 var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../../themes/mixins");
-var utils_1 = require("../../themes/utils");
+var getDynamicColors_1 = require("../../themes/utils/getDynamicColors");
 var Typo2_1 = require("../Typo2");
 var white = themes_1.colors.white, grey5 = themes_1.colors.grey5, grey10 = themes_1.colors.grey10, grey20 = themes_1.colors.grey20, grey40 = themes_1.colors.grey40, grey70 = themes_1.colors.grey70, grey80 = themes_1.colors.grey80;
 exports.StyledSwitchWrapperStyle1 = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: auto; \n  height: 18px; \n  left: 22px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  border-radius: 37px;\n  transition: all 0.5s ease;\n  \n"], ["\n  position: relative;\n  width: auto; \n  height: 18px; \n  left: 22px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  border-radius: 37px;\n  transition: all 0.5s ease;\n  \n"])));
@@ -23,13 +23,13 @@ exports.StyledButtonSlider = styled_components_1.default.div(templateObject_3 ||
     var disabled = _a.disabled, inactive = _a.inactive, colors = _a.theme.colors;
     if (disabled)
         return grey5;
-    return inactive ? grey10 : (0, utils_1.getSecondaryContainer)(colors);
+    return inactive ? grey10 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
 }, function (_a) {
     var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
-    return !disabled && (inactive ? grey40 : (0, utils_1.getOnPrimary)(colors));
+    return !disabled && (inactive ? grey40 : (0, getDynamicColors_1.getOnPrimary)(colors));
 }, function (_a) {
     var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
-    return !disabled && (inactive ? grey40 : (0, utils_1.getOnPrimary)(colors));
+    return !disabled && (inactive ? grey40 : (0, getDynamicColors_1.getOnPrimary)(colors));
 }, (0, mixins_1.transition)('background-color'));
 exports.StyledSwitch = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 12px; /* Updated based on Figma */\n  height: 12px; /* Updated based on Figma */\n  background-color: ", "; \n  outline: none;\n  ", "; \n  border-radius: 50%; \n  cursor: ", "; \n  border: 1px solid; /* Updated based on Figma */\n  border-color: ", ";\n  position: absolute;\n  top: calc(50% - 6px); /* Updated for vertical centering */\n  left: ", "; \n  box-shadow: ", ";\n  transition: all 0.3s ease;\n\n  /**\n  this is the styled comps way of dealing with child hover.\n  But it is a buggy functionality. Probably an issue at\n  the styled-components package level. Should report on their github\n\n  Instead we use the oldschool class approach for child hover (line 40)\n  */\n  /* ", ":hover & {\n      border-color: ", ";  \n    } */\n"], ["\n  width: 12px; /* Updated based on Figma */\n  height: 12px; /* Updated based on Figma */\n  background-color: ", "; \n  outline: none;\n  ", "; \n  border-radius: 50%; \n  cursor: ", "; \n  border: 1px solid; /* Updated based on Figma */\n  border-color: ", ";\n  position: absolute;\n  top: calc(50% - 6px); /* Updated for vertical centering */\n  left: ", "; \n  box-shadow: ", ";\n  transition: all 0.3s ease;\n\n  /**\n  this is the styled comps way of dealing with child hover.\n  But it is a buggy functionality. Probably an issue at\n  the styled-components package level. Should report on their github\n\n  Instead we use the oldschool class approach for child hover (line 40)\n  */\n  /* ", ":hover & {\n      border-color: ", ";  \n    } */\n"])), function (_a) {
     var disabled = _a.disabled;
@@ -39,7 +39,7 @@ exports.StyledSwitch = styled_components_1.default.button(templateObject_4 || (t
     return disabled ? 'not-allowed' : 'pointer';
 }, function (_a) {
     var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
-    disabled ? grey20 : (0, utils_1.getSecondaryContainer)(colors);
+    disabled ? grey20 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
     if (inactive && !disabled)
         return grey70;
 }, function (_a) {
@@ -50,7 +50,7 @@ exports.StyledSwitch = styled_components_1.default.button(templateObject_4 || (t
     return (disabled ? "" : "0px 4px 6px rgba(0, 0, 0, 0.25)");
 }, exports.StyledButtonSlider, function (_a) {
     var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
-    return !disabled && (inactive ? grey40 : (0, utils_1.getOnPrimary)(colors));
+    return !disabled && (inactive ? grey40 : (0, getDynamicColors_1.getOnPrimary)(colors));
 });
 exports.STYLED_UI_BODY_SM = (0, styled_components_1.default)(Typo2_1.UI_BODY_SM)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  line-height: ", ";\n  ", ";\n"], ["\n  color: ", ";\n  line-height: ", ";\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;

package/dist/v2/components/TabBar/index.styled.js CHANGED Viewed

@@ -41,7 +41,7 @@ exports.StyledWrapper = exports.StyledDot = exports.StyledDirectionButtons = exp
 var styled_components_1 = __importStar(require("styled-components"));
 var mixins_1 = require("../../../themes/mixins");
 var themes_1 = require("../../themes");
-var utils_1 = require("../../themes/utils");
+var getDynamicColors_1 = require("../../themes/utils/getDynamicColors");
 var Typo2_1 = require("../Typo2");
 var secondaryContainer = themes_1.colors.secondaryContainer, onSecondary = themes_1.colors.onSecondary, white = themes_1.colors.white, black = themes_1.colors.black, grey80 = themes_1.colors.grey80, grey40 = themes_1.colors.grey40, grey10 = themes_1.colors.grey10, errorColor = themes_1.colors.error;
 exports.wrapperStyles = {
@@ -62,25 +62,25 @@ exports.wrapperStyles = {
 exports.tabStyles = {
     style1: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    border-radius: 6px;\n    background-color: ", ";\n    color: ", ";\n      \n      ", "  \n        \n      &:active {\n        background-color: ", " ;\n        color:  ", " ;\n      }\n        \n      &:hover {\n        background-color: ", ";\n        color: ", ";\n        border-radius: 6px;\n      }  \n        \n    ", "\n  "], ["\n    border-radius: 6px;\n    background-color: ", ";\n    color: ", ";\n      \n      ", "  \n        \n      &:active {\n        background-color: ", " ;\n        color:  ", " ;\n      }\n        \n      &:hover {\n        background-color: ", ";\n        color: ", ";\n        border-radius: 6px;\n      }  \n        \n    ", "\n  "])), function (_a) {
         var active = _a.active, disabled = _a.disabled, colors = _a.theme.colors;
-        return active ? (0, utils_1.getSecondaryContainer)(colors) || secondaryContainer : white;
+        return active ? (0, getDynamicColors_1.getSecondaryContainer)(colors) || secondaryContainer : white;
     }, function (_a) {
         var active = _a.active, disabled = _a.disabled, colors = _a.theme.colors;
-        return disabled ? grey40 : active ? (0, utils_1.getOnSecondary)(colors) || onSecondary : grey80;
+        return disabled ? grey40 : active ? (0, getDynamicColors_1.getOnSecondary)(colors) || onSecondary : grey80;
     }, function (_a) {
         var disabled = _a.disabled;
         return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          cursor: not-allowed;\n          color: ", ";\n      "], ["\n          cursor: not-allowed;\n          color: ", ";\n      "])), grey40);
     }, function (_a) {
         var disabled = _a.disabled, colors = _a.theme.colors;
-        return disabled ? grey40 : (0, utils_1.getSecondaryContainer)(colors) || secondaryContainer;
+        return disabled ? grey40 : (0, getDynamicColors_1.getSecondaryContainer)(colors) || secondaryContainer;
     }, function (_a) {
         var colors = _a.theme.colors;
-        return (0, utils_1.getOnSecondary)(colors) || onSecondary;
+        return (0, getDynamicColors_1.getOnSecondary)(colors) || onSecondary;
     }, function (_a) {
         var disabled = _a.disabled;
         return disabled ? white : grey10;
     }, function (_a) {
         var disabled = _a.disabled, colors = _a.theme.colors;
-        return disabled ? grey40 : (0, utils_1.getOnSecondary)(colors) || onSecondary;
+        return disabled ? grey40 : (0, getDynamicColors_1.getOnSecondary)(colors) || onSecondary;
     }, (0, mixins_1.transition)("color"))
 };
 exports.TabBarStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  z-index: 1000;\n  height: ", ";\n"], ["\n  background-color: ", ";\n  z-index: 1000;\n  height: ", ";\n"])), white, function (_a) {

package/dist/v2/components/Tags/Comps/TagLink/styled.js CHANGED Viewed

@@ -41,13 +41,13 @@ exports.StyledLinkIconWrapper = exports.StyledTagLink = exports.tagLinkStyle = e
 var styled_components_1 = __importStar(require("styled-components"));
 var react_router_dom_1 = require("react-router-dom");
 var styled_1 = require("../styled");
-var utils_1 = require("../../../../themes/utils");
+var getDynamicColors_1 = require("../../../../themes/utils/getDynamicColors");
 var themes_1 = require("../../../../themes");
 var grey5 = themes_1.colors.grey5, grey80 = themes_1.colors.grey80;
 exports.StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
 var tagLinkStyle = function (_a) {
     var variant = _a.variant, colors = _a.theme.colors;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([" // variant primary\n      background: ", ";\n      color: ", ";\n\n      &:hover{\n        background-color: ", ";\n        color: ", ";\n      }\n\n    "], [" // variant primary\n      background: ", ";\n      color: ", ";\n\n      &:hover{\n        background-color: ", ";\n        color: ", ";\n      }\n\n    "])), grey5, grey80, (0, utils_1.getSecondaryContainer)(colors), (0, utils_1.getOnSecondary)(colors));
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([" // variant primary\n      background: ", ";\n      color: ", ";\n\n      &:hover{\n        background-color: ", ";\n        color: ", ";\n      }\n\n    "], [" // variant primary\n      background: ", ";\n      color: ", ";\n\n      &:hover{\n        background-color: ", ";\n        color: ", ";\n      }\n\n    "])), grey5, grey80, (0, getDynamicColors_1.getSecondaryContainer)(colors), (0, getDynamicColors_1.getOnSecondary)(colors));
 };
 exports.tagLinkStyle = tagLinkStyle;
 exports.StyledTagLink = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", "\n  ", "\n  padding: 0.1rem 0.5rem;\n"], ["\n  position: relative;\n  ", "\n  ", "\n  padding: 0.1rem 0.5rem;\n"])), function (_a) {
@@ -56,6 +56,6 @@ exports.StyledTagLink = styled_components_1.default.div(templateObject_3 || (tem
 }, function (props) { return (0, exports.tagLinkStyle)(props); });
 exports.StyledLinkIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  height: 100%;\n  padding: 0 0.5rem;\n  border-radius: 0.4rem;\n  position: absolute;\n  right: 0;\n  ", "\n  \n"], ["\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  height: 100%;\n  padding: 0 0.5rem;\n  border-radius: 0.4rem;\n  position: absolute;\n  right: 0;\n  ", "\n  \n"])), function (_a) {
     var colors = _a.theme.colors;
-    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n  "], ["\n    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n  "])), (0, utils_1.getSecondaryContainer)(colors), (0, utils_1.getOnSecondary)(colors));
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n  "], ["\n    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n  "])), (0, getDynamicColors_1.getSecondaryContainer)(colors), (0, getDynamicColors_1.getOnSecondary)(colors));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/v2/themes/utils/baseStyling.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+interface HoverEffectOptions {
+    borderRadius?: string;
+}
+export declare const apply10PercentBlackOnHover: (options?: HoverEffectOptions) => import("styled-components").FlattenSimpleInterpolation;
+export {};

package/dist/v2/themes/utils/baseStyling.js ADDED Viewed

@@ -0,0 +1,17 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.apply10PercentBlackOnHover = void 0;
+var styled_components_1 = require("styled-components");
+var colors_1 = require("../colors");
+// Hover Effects
+var apply10PercentBlackOnHover = function (options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.borderRadius, borderRadius = _a === void 0 ? 0 : _a; //some cases we want to trigger the
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &::before {\n      content: \"\";\n      background-color: transparent;\n      position: absolute;\n      border-radius: ", ";\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n    &:hover::before {\n      background-color: ", ";\n    }\n  "], ["\n    &::before {\n      content: \"\";\n      background-color: transparent;\n      position: absolute;\n      border-radius: ", ";\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n    &:hover::before {\n      background-color: ", ";\n    }\n  "])), borderRadius, colors_1.colors.grey10);
+};
+exports.apply10PercentBlackOnHover = apply10PercentBlackOnHover;
+var templateObject_1;

package/dist/v2/themes/{utils.d.ts → utils/getDynamicColors.d.ts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { Colors2Type } from "./colors";
+import { Colors2Type } from "../colors";
 /**
 * Get the primary Container color.
 *

package/dist/v2/themes/{utils.js → utils/getDynamicColors.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOnTertiary = exports.getOnSecondary = exports.getOnPrimary = exports.getTertiaryContainer = exports.getSecondaryContainer = exports.getPrimaryContainer = void 0;
-var colors_1 = require("./colors");
+var colors_1 = require("../colors");
 var primaryContainer = colors_1.colors.primaryContainer, secondaryContainer = colors_1.colors.secondaryContainer, tertiaryContainer = colors_1.colors.tertiaryContainer, onPrimary = colors_1.colors.onPrimary, onSecondary = colors_1.colors.onSecondary, onTertiary = colors_1.colors.onTertiary;
 /**
 * Get the primary Container color.

package/package.json CHANGED Viewed

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