oolib 2.176.2 → 2.176.4

package/dist/index.d.ts

@@ -5,10 +5,8 @@ export * from "./globalStyles/globalVariables";
 export * from "./components/Buttons";
 export * from "./components/Breadcrumbs";
 export * from "./components/InlineAlert";
-export * from "./components/TextInputs";
 export * from "./components/Container";
 export * from "./components/Wrappers";
-export * from "./components/Switches";
 export * from "./components/TabBar";
 export * from "./components/Margins";
 export * from "./components/Paddings";
@@ -20,6 +18,7 @@ export * from "./v2/components/Typo2";
 export * from "./v2/components/BlockLabel";
 export { colors } from "./themes";
 export { icons } from "./icons";
+export { SwitchDouble } from "./components/Switches";
 export { Section } from "./components/Section";
 export { UserRoleBadge } from "./components/UserRoleBadge";
 export { OKELink } from "./components/OKELink";
@@ -77,11 +76,12 @@ export { CheckboxList } from "./v2/components/RadioAndCheckbox/comps/CheckboxLis
 export { CheckboxInput } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput";
 export { CheckboxButton } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton";
 export { RadioList } from "./v2/components/RadioAndCheckbox/comps/RadioList/index";
+export { SwitchSingle } from "./v2/components/Switches";
 export * 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 { 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";
-export { ButtonPrimary as ButtonPrimaryV2, ButtonSecondary as ButtonSecondaryV2, ButtonTertiary as ButtonTertiaryV2, ButtonGhost as ButtonGhostV2, ButtonPrimaryCompact, ButtonSecondaryCompact, ButtonTertiaryCompact } from "./v2/components/Buttons";
+export { ButtonPrimary as ButtonPrimaryV2, ButtonSecondary as ButtonSecondaryV2, ButtonTertiary as ButtonTertiaryV2, ButtonGhost as ButtonGhostV2, ButtonPrimaryCompact, ButtonSecondaryCompact, ButtonTertiaryCompact, ButtonGhostCompact } from "./v2/components/Buttons";
 export { RadioInput, RadioButton } from "./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index";

package/dist/index.js

@@ -39,8 +39,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.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.baseStyling = exports.RadioButton = exports.RadioInput = exports.RadioList = 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 = void 0;
+exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.SwitchDouble = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.baseStyling = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.DataVizAccordion = exports.BarChart = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.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 = 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; } });
@@ -68,10 +68,11 @@ Object.defineProperty(exports, "TagDisplay", { enumerable: true, get: function (
 __exportStar(require("./components/Breadcrumbs"), exports);
 // export * from './components/BlockLabel';
 __exportStar(require("./components/InlineAlert"), exports);
-__exportStar(require("./components/TextInputs"), exports);
+// export * from './components/TextInputs';
 __exportStar(require("./components/Container"), exports);
 __exportStar(require("./components/Wrappers"), exports);
-__exportStar(require("./components/Switches"), exports);
+var Switches_1 = require("./components/Switches");
+Object.defineProperty(exports, "SwitchDouble", { enumerable: true, get: function () { return Switches_1.SwitchDouble; } });
 __exportStar(require("./components/TabBar"), exports);
 // export {
 //   RadioButton,
@@ -217,6 +218,7 @@ Object.defineProperty(exports, "ButtonGhostV2", { enumerable: true, get: functio
 Object.defineProperty(exports, "ButtonPrimaryCompact", { enumerable: true, get: function () { return Buttons_1.ButtonPrimaryCompact; } });
 Object.defineProperty(exports, "ButtonSecondaryCompact", { enumerable: true, get: function () { return Buttons_1.ButtonSecondaryCompact; } });
 Object.defineProperty(exports, "ButtonTertiaryCompact", { enumerable: true, get: function () { return Buttons_1.ButtonTertiaryCompact; } });
+Object.defineProperty(exports, "ButtonGhostCompact", { enumerable: true, get: function () { return Buttons_1.ButtonGhostCompact; } });
 var TabBar_1 = require("./v2/components/TabBar");
 Object.defineProperty(exports, "TabBarV2", { enumerable: true, get: function () { return TabBar_1.TabBarStyle1; } });
 var themes_2 = require("./v2/themes");
@@ -244,4 +246,6 @@ var index_2 = require("./v2/components/RadioAndCheckbox/comps/RadioList/comps/Ra
 Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return index_2.RadioInput; } });
 var index_3 = require("./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index");
 Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return index_3.RadioButton; } });
+var Switches_2 = require("./v2/components/Switches");
+Object.defineProperty(exports, "SwitchSingle", { enumerable: true, get: function () { return Switches_2.SwitchSingle; } });
 exports.baseStyling = __importStar(require("./v2/themes/utils/baseStyling"));

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

@@ -184,10 +184,12 @@ var Buttons = function (args) {
                 react_1.default.createElement("div", null,
                     react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonPrimaryCompact }),
                     react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonSecondaryCompact }),
-                    react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonTertiaryCompact })),
+                    react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonTertiaryCompact }),
+                    react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonGhostCompact })),
                 react_1.default.createElement("div", null,
                     react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonPrimaryCompact }),
                     react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonSecondaryCompact }),
-                    react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonTertiaryCompact }))))));
+                    react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonTertiaryCompact }),
+                    react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonGhostCompact }))))));
 };
 exports.Buttons = Buttons;

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

@@ -76,8 +76,8 @@ var SwitchDouble = function (args) {
 };
 exports.SwitchDouble = SwitchDouble;
 exports.SwitchDouble.args = {
-    rightOption: 'right option',
-    leftOption: 'left Option',
+    rightOption: 'Right Option',
+    leftOption: 'Left Option',
     disabled: false,
     invert: false,
     saveValueAsString: true,
@@ -89,7 +89,7 @@ exports.SwitchDouble.argTypes = {
         defaultValue: 'style1'
     },
     rightOption: {
-        name: 'Right option'
+        name: 'Right Option'
     },
     leftOption: {
         name: "Left Option"
@@ -121,7 +121,7 @@ exports.SwitchSingle.parameters = {
     controls: { exclude: ['leftOption'] }
 };
 exports.SwitchSingle.args = {
-    rightOption: 'right option',
+    rightOption: 'Right Option',
     layoutStyle: 'style1',
     disabled: false,
     invert: false,

package/dist/v2/components/Buttons/derivedComps/ButtonGhostCompact.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ButtonGhostCompact: (props: any) => React.JSX.Element;

package/dist/v2/components/Buttons/derivedComps/ButtonGhostCompact.js

@@ -0,0 +1,26 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGhostCompact = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("..");
+var ButtonPrimaryCompact_1 = require("./ButtonPrimaryCompact");
+var mixins_1 = require("../../../../themes/mixins");
+var ButtonGhostCompact = function (props) {
+    var responsive = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
+    return (react_1.default.createElement(__1.ButtonGhost, __assign({}, props, { typo: "UI_CAPTION_SEMIBOLD_DF", iconSize: responsive ? 16 : 14, style: __assign(__assign({}, (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon)), props.style) })));
+};
+exports.ButtonGhostCompact = ButtonGhostCompact;

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

@@ -50,3 +50,4 @@ export declare const ButtonGhost: React.FunctionComponent<ButtonProps>;
 export { ButtonSecondaryCompact } from "./derivedComps/ButtonSecondaryCompact";
 export { ButtonPrimaryCompact } from "./derivedComps/ButtonPrimaryCompact";
 export { ButtonTertiaryCompact } from "./derivedComps/ButtonTertiaryCompact";
+export { ButtonGhostCompact } from "./derivedComps/ButtonGhostCompact";

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonTertiaryCompact = exports.ButtonPrimaryCompact = exports.ButtonSecondaryCompact = exports.ButtonGhost = exports.ButtonTertiary = exports.ButtonSecondary = exports.ButtonPrimary = void 0;
+exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonPrimaryCompact = exports.ButtonSecondaryCompact = exports.ButtonGhost = exports.ButtonTertiary = exports.ButtonSecondary = exports.ButtonPrimary = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_1 = require("./styled");
 var react_router_dom_1 = require("react-router-dom");
@@ -94,3 +94,5 @@ var ButtonPrimaryCompact_1 = require("./derivedComps/ButtonPrimaryCompact");
 Object.defineProperty(exports, "ButtonPrimaryCompact", { enumerable: true, get: function () { return ButtonPrimaryCompact_1.ButtonPrimaryCompact; } });
 var ButtonTertiaryCompact_1 = require("./derivedComps/ButtonTertiaryCompact");
 Object.defineProperty(exports, "ButtonTertiaryCompact", { enumerable: true, get: function () { return ButtonTertiaryCompact_1.ButtonTertiaryCompact; } });
+var ButtonGhostCompact_1 = require("./derivedComps/ButtonGhostCompact");
+Object.defineProperty(exports, "ButtonGhostCompact", { enumerable: true, get: function () { return ButtonGhostCompact_1.ButtonGhostCompact; } });

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

@@ -52,6 +52,7 @@ var BlockLabel_1 = require("../BlockLabel");
 var styled_1 = require("./styled");
 var Tooltip_1 = require("../../../components/Tooltip");
 var utilsOolib_1 = require("../../../utilsOolib");
+var Typo2_1 = require("../Typo2");
 function SwitchDouble(_a) {
     var id = _a.id, valueProp = _a.value, options = _a.options, onChange = _a.onChange, saveValueAsString = _a.saveValueAsString, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     var value = saveValueAsString
@@ -69,13 +70,13 @@ function SwitchDouble(_a) {
         throw new Error("You need to pass a value prop to make SwitchDouble work");
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-        react_1.default.createElement(styled_1.StyledSwitchWrapperStyle1, null,
-            react_1.default.createElement(styled_1.STYLED_UI_BODY_SM, { lineHeight: 1,
+        react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
+            react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { lineHeight: 1,
                 semibold: isLeftOptionActive ? true : false }, options[0].display),
             react_1.default.createElement(styled_1.StyledButtonSlider, { disabled: disabled, onClick: handleClick },
                 react_1.default.createElement(styled_1.StyledSwitch, { className: "StyledSwitch" //read in styled.js why we are using an okf-anti-pattern
                     , disabled: disabled, direction: isLeftOptionActive ? "left" : "right" })),
-            react_1.default.createElement(styled_1.STYLED_UI_BODY_SM, { semibold: isLeftOptionActive ? false : true,
+            react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { semibold: isLeftOptionActive ? false : true,
                 lineHeight: 1 }, options[1].display))));
 }
 function SwitchSingle(_a) {
@@ -123,7 +124,7 @@ function SwitchSingle(_a) {
         //else
         return display; //cuz ofcourse its not optional, so no need to show optional label
     };
-    var genDisplayText = function () { return (react_1.default.createElement(styled_1.STYLED_UI_BODY_SM, { lineHeight: 1, semibold: isInactive ? false : true, disabled: disabled }, injectOptionalLabelIntoDisplayText({
+    var genDisplayText = function () { return (react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { disabled: disabled }, injectOptionalLabelIntoDisplayText({
         display: option.display,
         label: props.label,
         isRequired: props.isRequired
@@ -135,9 +136,9 @@ function SwitchSingle(_a) {
     };
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({ hideOptionalLabel: !!props.label === false }, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-        layoutStyle === "style1" ? (react_1.default.createElement(styled_1.StyledSwitchWrapperStyle1, null,
+        layoutStyle === "style1" ? (react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
             genSwitch(),
-            genSwitchDisplay())) : (layoutStyle === "style2" && (react_1.default.createElement(styled_1.StyledSwitchWrapperStyle2, null,
+            genSwitchDisplay())) : (layoutStyle === "style2" && (react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
             genSwitchDisplay(),
             genSwitch())))));
 }

package/dist/v2/components/Switches/styled.d.ts

@@ -1,5 +1,3 @@
-export const StyledSwitchWrapperStyle1: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledSwitchWrapperStyle2: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSwitchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledButtonSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSwitch: import("styled-components").StyledComponent<"button", any, {}, never>;
-export const STYLED_UI_BODY_SM: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo2").TypoCompProps>, any, {}, never>;

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

@@ -7,16 +7,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STYLED_UI_BODY_SM = exports.StyledSwitch = exports.StyledButtonSlider = exports.StyledSwitchWrapperStyle2 = exports.StyledSwitchWrapperStyle1 = void 0;
+exports.StyledSwitch = exports.StyledButtonSlider = exports.StyledSwitchWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../../themes/mixins");
 var getDynamicColors_1 = require("../../themes/utils/getDynamicColors");
 var Typo2_1 = require("../Typo2");
+var baseStyling_1 = require("../../themes/utils/baseStyling");
 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"])));
-exports.StyledSwitchWrapperStyle2 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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"])));
-exports.StyledButtonSlider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 28px;\n  height: 18px;\n  user-select: none;\n  position: relative;\n  border-radius: 1rem;\n  cursor: ", ";\n  background-color: ", ";\n  \n  &:hover {\n    background-color: ", ";\n\n    & > .StyledSwitch {\n      border-color: ", ";\n    }\n  }\n\n  ", "\n"], ["\n  width: 28px;\n  height: 18px;\n  user-select: none;\n  position: relative;\n  border-radius: 1rem;\n  cursor: ", ";\n  background-color: ", ";\n  \n  &:hover {\n    background-color: ", ";\n\n    & > .StyledSwitch {\n      border-color: ", ";\n    }\n  }\n\n  ", "\n"])), function (_a) {
+exports.StyledSwitchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  ", "{\n    gap: 6px;\n  }\n  \n  \n"], ["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  ", "{\n    gap: 6px;\n  }\n  \n  \n"])), (0, mixins_1.mediaQuery)('md'));
+exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 3.6rem;\n  height: 2.4rem;\n  ", "{\n    width: 2.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 4rem;\n\n  user-select: none;\n  position: relative;\n  cursor: ", ";\n  background-color: ", ";\n  overflow: hidden; //so that this hover below is within bounds\n  ", "\n\n  \n"], ["\n  width: 3.6rem;\n  height: 2.4rem;\n  ", "{\n    width: 2.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 4rem;\n\n  user-select: none;\n  position: relative;\n  cursor: ", ";\n  background-color: ", ";\n  overflow: hidden; //so that this hover below is within bounds\n  ", "\n\n  \n"])), (0, mixins_1.mediaQuery)('md'), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 }, function (_a) {
@@ -25,38 +25,32 @@ exports.StyledButtonSlider = styled_components_1.default.div(templateObject_3 ||
         return grey5;
     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, getDynamicColors_1.getOnPrimary)(colors));
-}, function (_a) {
-    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
-    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;
+    return !disabled && (0, baseStyling_1.applyBlackOverlayOnHover)();
+});
+var desktop_size = 1.2;
+var desktop_left_right_gap = 0.3;
+var mob_size = 1.4;
+var mob_left_right_gap = 0.5;
+exports.StyledSwitch = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  \n  width: ", "rem; \n  height: ", "rem;\n  top: calc(50% - ", "rem); /* Updated for vertical centering */\n  left: ", "; \n  ", "\n\n  ", "{\n    width: ", "rem; \n    height: ", "rem;\n    top: calc(50% - ", "rem); /* Updated for vertical centering */\n    left: ", ";   \n    ", "\n  }\n\n  z-index: 1; //so that this is above the blackoverlay hover above\n  background-color: ", "; \n  outline: none;\n  border-radius: 50%; \n  cursor: ", "; \n  border: 1px solid; \n  border-color: ", ";\n  position: absolute;\n  \n  box-shadow: ", ";\n  \n  \n  \n"], ["\n  \n  width: ", "rem; \n  height: ", "rem;\n  top: calc(50% - ", "rem); /* Updated for vertical centering */\n  left: ", "; \n  ", "\n\n  ", "{\n    width: ", "rem; \n    height: ", "rem;\n    top: calc(50% - ", "rem); /* Updated for vertical centering */\n    left: ", ";   \n    ", "\n  }\n\n  z-index: 1; //so that this is above the blackoverlay hover above\n  background-color: ", "; \n  outline: none;\n  border-radius: 50%; \n  cursor: ", "; \n  border: 1px solid; \n  border-color: ", ";\n  position: absolute;\n  \n  box-shadow: ", ";\n  \n  \n  \n"])), mob_size, mob_size, mob_size / 2, function (_a) {
+    var direction = _a.direction;
+    return direction === 'left' ? mob_left_right_gap + 'rem' : "calc(100% - ".concat(mob_size + mob_left_right_gap, "rem)");
+}, (0, mixins_1.transition)('left 0.15s ease-out'), (0, mixins_1.mediaQuery)('md'), desktop_size, desktop_size, desktop_size / 2, function (_a) {
+    var direction = _a.direction;
+    return direction === 'left' ? desktop_left_right_gap + 'rem' : "calc(100% - ".concat(desktop_size + desktop_left_right_gap, "rem)");
+}, (0, mixins_1.transition)('left 0.1s ease-out'), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "" : white);
-}, (0, mixins_1.transition)('border-color', 'left 0.2s'), function (_a) {
+}, function (_a) {
     var disabled = _a.disabled;
     return disabled ? 'not-allowed' : 'pointer';
 }, function (_a) {
-    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
-    disabled ? grey20 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
-    if (inactive && !disabled)
-        return grey70;
-}, function (_a) {
-    var direction = _a.direction;
-    return direction === 'left' ? '3px' : 'calc(100% - 15px)';
+    var theme = _a.theme, inactive = _a.inactive, disabled = _a.disabled;
+    return disabled
+        ? grey20
+        : inactive ? grey70 : (0, getDynamicColors_1.getOnSecondary)(theme === null || theme === void 0 ? void 0 : theme.colors);
 }, function (_a) {
     var disabled = _a.disabled;
     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, 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;
-    return (disabled ? grey40 : grey80);
-}, function (_a) {
-    var lineHeight = _a.lineHeight;
-    return lineHeight;
-}, (0, mixins_1.transition)('color'));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3;

package/package.json

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