oolib 2.163.3 → 2.164.0

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

@@ -0,0 +1,106 @@
+declare namespace _default {
+    let title: string;
+    let argTypes: {};
+}
+export default _default;
+export function SwitchDouble(args: any): React.JSX.Element;
+export namespace SwitchDouble {
+    export namespace args {
+        let rightOption: string;
+        let leftOption: string;
+        let disabled: boolean;
+        let invert: boolean;
+        let saveValueAsString: boolean;
+    }
+    export namespace argTypes_1 {
+        export namespace layoutStyle {
+            let options: string[];
+            namespace control {
+                let type: string;
+            }
+            let defaultValue: string;
+        }
+        export namespace rightOption_1 {
+            let name: string;
+        }
+        export { rightOption_1 as rightOption };
+        export namespace leftOption_1 {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        export { leftOption_1 as leftOption };
+        export namespace invert_1 {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        export { invert_1 as invert };
+        export namespace disabled_1 {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        export { disabled_1 as disabled };
+    }
+    export { argTypes_1 as argTypes };
+    export namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+}
+export function SwitchSingle(args: any): React.JSX.Element;
+export namespace SwitchSingle {
+    export namespace parameters_1 {
+        export namespace controls_1 {
+            let exclude_1: string[];
+            export { exclude_1 as exclude };
+        }
+        export { controls_1 as controls };
+    }
+    export { parameters_1 as parameters };
+    export namespace args_1 {
+        let rightOption_2: string;
+        export { rightOption_2 as rightOption };
+        let layoutStyle_1: string;
+        export { layoutStyle_1 as layoutStyle };
+        let disabled_2: boolean;
+        export { disabled_2 as disabled };
+        let invert_2: boolean;
+        export { invert_2 as invert };
+        let saveValueAsString_1: boolean;
+        export { saveValueAsString_1 as saveValueAsString };
+    }
+    export { args_1 as args };
+    export namespace argTypes_2 {
+        export namespace layoutStyle_2 {
+            let name_4: string;
+            export { name_4 as name };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
+        export { layoutStyle_2 as layoutStyle };
+        export namespace rightOption_3 {
+            let name_5: string;
+            export { name_5 as name };
+        }
+        export { rightOption_3 as rightOption };
+        export namespace invert_3 {
+            let name_6: string;
+            export { name_6 as name };
+        }
+        export { invert_3 as invert };
+        export namespace disabled_3 {
+            let name_7: string;
+            export { name_7 as name };
+        }
+        export { disabled_3 as disabled };
+    }
+    export { argTypes_2 as argTypes };
+}
+import React from 'react';

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

@@ -0,0 +1,136 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.SwitchSingle = exports.SwitchDouble = void 0;
+var react_1 = __importStar(require("react"));
+var react_json_view_1 = __importDefault(require("react-json-view"));
+var Switches_1 = require("../../../v2/components/Switches");
+var themes_1 = require("../../../themes");
+exports.default = {
+    title: 'Oolib V 2.0/components/Switches',
+    argTypes: {
+    // shape: {
+    //   name: "Shape",
+    //   options: ['circle', 'square'],
+    //   control: { type: 'inline-radio' },
+    //   defaultValue: 'circle'
+    // },
+    },
+};
+var showJSON = function (display, data) {
+    return react_1.default.createElement(react_json_view_1.default
+    // theme="monokai"
+    , { 
+        // theme="monokai"
+        name: display, src: data, displayDataTypes: false, enableClipboard: false, quotesOnKeys: false });
+};
+var SwitchDouble = function (args) {
+    var options = [
+        { display: args.leftOption, value: 1 },
+        { display: args.rightOption, value: 2 }
+    ];
+    var _a = (0, react_1.useState)(args.saveValueAsString ? options[0].value : options[0]), value = _a[0], setValue = _a[1];
+    (0, react_1.useEffect)(function () {
+        setValue(args.saveValueAsString ? options[0].value : options[0]);
+    }, [args.saveValueAsString]);
+    return (react_1.default.createElement("div", { style: { background: args.invert ? '#383838' : '', padding: '4rem 4rem' } },
+        react_1.default.createElement(Switches_1.SwitchDouble, { invert: args.invert, shape: args.shape, saveValueAsString: args.saveValueAsString, disabled: args.disabled, options: options, value: value, onChange: function (id, newVal) { return setValue(newVal); } }),
+        react_1.default.createElement("div", { style: { padding: '2rem', position: 'fixed', top: 0, right: 0 } },
+            showJSON('VALUE', { value: value }),
+            showJSON('OPTIONS', options))));
+};
+exports.SwitchDouble = SwitchDouble;
+exports.SwitchDouble.args = {
+    rightOption: 'right option',
+    leftOption: 'left Option',
+    disabled: false,
+    invert: false,
+    saveValueAsString: true,
+};
+exports.SwitchDouble.argTypes = {
+    layoutStyle: {
+        options: ['style1', 'style2'],
+        control: { type: 'inline-radio' },
+        defaultValue: 'style1'
+    },
+    rightOption: {
+        name: 'Right option'
+    },
+    leftOption: {
+        name: "Left Option"
+    },
+    invert: {
+        name: "Invert"
+    },
+    disabled: {
+        name: "Disabled"
+    }
+};
+exports.SwitchDouble.parameters = {
+    controls: { exclude: ['layoutStyle'] }
+};
+var SwitchSingle = function (args) {
+    var option = { display: args.rightOption, value: 1 };
+    var _a = (0, react_1.useState)(args.saveValueAsString ? option.value : option), value = _a[0], setValue = _a[1];
+    (0, react_1.useEffect)(function () {
+        setValue(args.saveValueAsString ? option.value : option);
+    }, [args.saveValueAsString]);
+    return (react_1.default.createElement("div", { style: { background: args.invert ? '#383838' : '', padding: '4rem 4rem' } },
+        react_1.default.createElement(Switches_1.SwitchSingle, { invert: args.invert, shape: args.shape, layoutStyle: args.layoutStyle, saveValueAsString: args.saveValueAsString, disabled: args.disabled, option: option, value: value, onChange: function (id, newVal) { return setValue(newVal); } }),
+        react_1.default.createElement("div", { style: { padding: '2rem', paddingTop: '3rem', marginTop: '3rem', borderTop: "1px solid ".concat(themes_1.colors.greyColor15) } },
+            showJSON('VALUE', { value: value }),
+            showJSON('OPTIONS', option))));
+};
+exports.SwitchSingle = SwitchSingle;
+exports.SwitchSingle.parameters = {
+    controls: { exclude: ['leftOption'] }
+};
+exports.SwitchSingle.args = {
+    rightOption: 'right option',
+    layoutStyle: 'style1',
+    disabled: false,
+    invert: false,
+    saveValueAsString: true,
+};
+exports.SwitchSingle.argTypes = {
+    layoutStyle: {
+        name: "Layout Style",
+        options: ['style1', 'style2'],
+        control: { type: 'select' },
+        defaultValue: 'style1'
+    },
+    rightOption: {
+        name: 'Text'
+    },
+    invert: {
+        name: "Invert"
+    },
+    disabled: {
+        name: "Disabled"
+    }
+};

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

@@ -0,0 +1,28 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace display {
+            let name: string;
+        }
+        namespace value {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        namespace id {
+            let name_2: string;
+            export { name_2 as name };
+        }
+    }
+    namespace args {
+        let display_1: string;
+        export { display_1 as display };
+        let value_1: string;
+        export { value_1 as value };
+        let id_1: string;
+        export { id_1 as id };
+        export let textColor: string;
+    }
+}
+export default _default;
+export function Playground(args: any): import("react").JSX.Element;
+export function Tag_Clear(args: any): import("react").JSX.Element;

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

@@ -0,0 +1,78 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag_Clear = exports.Playground = void 0;
+var Tags_1 = require("../../../v2/components/Tags");
+var Typo2_1 = require("../../../v2/components/Typo2");
+var themes_1 = require("../../../v2/themes");
+exports.default = {
+    title: "Oolib V 2.0/Components/Tags/Tag Clear",
+    argTypes: {
+        display: {
+            name: "Text",
+        },
+        // size: {
+        //   name: "Size",
+        //   options: ["ExtraSmall", "Small", "Medium"],
+        //   mapping: {
+        //     ExtraSmall: "XS",
+        //     Small: "S",
+        //     Medium: "M",
+        //   },
+        //   control: { type: "inline-radio" },
+        // },
+        // tagColor: {
+        //   name: "Tag Color",
+        //   options: availableColors,
+        //   control: { type: "select" },
+        // },
+        // textColor: {
+        //   name: "Text Color",
+        //   options: availableTextColors,
+        //   control: { type: "select" },
+        // },
+        value: {
+            name: "Value"
+        },
+        id: {
+            name: "Id"
+        }
+    },
+    args: {
+        display: "Tag Display",
+        // size: "ExtraSmall",
+        value: "text",
+        id: "tags",
+        // tagColor: "",
+        textColor: "",
+    },
+};
+var GenTag = function (_a) {
+    var args = _a.args, Comp = _a.Comp, variant = _a.variant;
+    args[args["size"]] = true;
+    args.tagColor = themes_1.colors[args.tagColor];
+    args.textColor = themes_1.colors[args.textColor];
+    return (React.createElement("div", { style: { margin: "2rem 10rem" } },
+        React.createElement(Comp, __assign({}, args, { variant: variant }))));
+};
+var Playground = function (args) {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: "column", gap: '3rem', margin: '2rem 10rem' } },
+        React.createElement("div", null,
+            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Tag Clear"),
+            React.createElement(GenTag, { args: args, Comp: Tags_1.TagClear }))));
+};
+exports.Playground = Playground;
+var Tag_Clear = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagClear });
+};
+exports.Tag_Clear = Tag_Clear;

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

@@ -27,7 +27,7 @@ var themes_1 = require("../../../v2/themes");
 var availableColors = __spreadArray([], Object.keys(themes_1.colors).sort(), true);
 var availableTextColors = __spreadArray([], Object.keys(themes_1.colors).sort(), true);
 exports.default = {
-    title: "Oolib V 2.0/Components/Tag Display",
+    title: "Oolib V 2.0/Components/Tags/Tag Display",
     argTypes: {
         display: {
             name: "Text",

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

@@ -41,6 +41,6 @@ var generateCompactButtonStyles = function (responsive, icon) {
 exports.generateCompactButtonStyles = generateCompactButtonStyles;
 var ButtonPrimaryCompact = function (props) {
     var responsive = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
-    return (react_1.default.createElement(__1.ButtonPrimary, __assign({}, props, { typo: "UI_CAPTION_BOLD_DF", iconSize: responsive ? 16 : 14, style: (0, exports.generateCompactButtonStyles)(responsive, props.icon) })));
+    return (react_1.default.createElement(__1.ButtonPrimary, __assign({}, props, { typo: "UI_CAPTION_SEMIBOLD_DF", iconSize: responsive ? 16 : 14, style: (0, exports.generateCompactButtonStyles)(responsive, props.icon) })));
 };
 exports.ButtonPrimaryCompact = ButtonPrimaryCompact;

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

@@ -21,6 +21,6 @@ var ButtonPrimaryCompact_1 = require("./ButtonPrimaryCompact");
 var mixins_1 = require("../../../../themes/mixins");
 var ButtonSecondaryCompact = function (props) {
     var responsive = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
-    return (react_1.default.createElement(__1.ButtonSecondary, __assign({}, props, { typo: "UI_CAPTION_BOLD_DF", iconSize: responsive ? 16 : 14, style: (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon) })));
+    return (react_1.default.createElement(__1.ButtonSecondary, __assign({}, props, { typo: "UI_CAPTION_SEMIBOLD_DF", iconSize: responsive ? 16 : 14, style: (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon) })));
 };
 exports.ButtonSecondaryCompact = ButtonSecondaryCompact;

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

@@ -21,6 +21,6 @@ var ButtonPrimaryCompact_1 = require("./ButtonPrimaryCompact");
 var mixins_1 = require("../../../../themes/mixins");
 var ButtonTertiaryCompact = function (props) {
     var responsive = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
-    return (react_1.default.createElement(__1.ButtonTertiary, __assign({}, props, { typo: "UI_CAPTION_BOLD_DF", iconSize: responsive ? 16 : 14, style: (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon) })));
+    return (react_1.default.createElement(__1.ButtonTertiary, __assign({}, props, { typo: "UI_CAPTION_SEMIBOLD_DF", iconSize: responsive ? 16 : 14, style: (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon) })));
 };
 exports.ButtonTertiaryCompact = ButtonTertiaryCompact;

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

@@ -30,7 +30,7 @@ var DisplayIcon = function (_a) {
 };
 var Typos = {
     UI_BODY_SEMIBOLD_SM_DF: Typo2_1.UI_BODY_SEMIBOLD_SM_DF,
-    UI_CAPTION_BOLD_DF: Typo2_1.UI_CAPTION_BOLD_DF
+    UI_CAPTION_SEMIBOLD_DF: Typo2_1.UI_CAPTION_SEMIBOLD_DF
 };
 var ButtonStyledWrapper = function (_a) {
     var props = _a.props, variant = _a.variant;

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

@@ -80,7 +80,7 @@ var variants = {
         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\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\n    ", "\n\n    ", "\n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), colors_1.colors.grey80, colors_1.colors.grey10, function (_a) {
+    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  "])), colors_1.colors.grey80, colors_1.colors.grey10, colors_1.colors.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    "])), colors_1.colors.grey80);
     }, function (_a) {

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

@@ -0,0 +1,19 @@
+export function SwitchDouble({ id, value: valueProp, options, onChange, saveValueAsString, disabled, }: {
+    id: any;
+    value: any;
+    options: any;
+    onChange: any;
+    saveValueAsString: any;
+    disabled?: boolean;
+}, ...args: any[]): React.JSX.Element;
+export function SwitchSingle({ id, value, option, onChange, disabled, saveValueAsString, layoutStyle, infoTooltip, }: {
+    id: any;
+    value: any;
+    option: any;
+    onChange: any;
+    disabled?: boolean;
+    saveValueAsString: any;
+    layoutStyle?: string;
+    infoTooltip: any;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,134 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchSingle = exports.SwitchDouble = void 0;
+var react_1 = __importStar(require("react"));
+var _EXPORTS_1 = require("../../../utils/_EXPORTS");
+var BlockLabel_1 = require("../BlockLabel");
+var styled_1 = require("./styled");
+var Tooltip_1 = require("../../../components/Tooltip");
+var utilsOolib_1 = require("../../../utilsOolib");
+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
+        ? options.find(function (d) { return d.value === valueProp; })
+        : valueProp;
+    var handleClick = function () {
+        var otherOption = options.find(function (op) { return op.value !== value.value; });
+        !disabled &&
+            onChange &&
+            onChange(id, saveValueAsString ? otherOption.value : otherOption);
+    };
+    var props = arguments[0];
+    var isLeftOptionActive = value === undefined || options[0].value === (value === null || value === void 0 ? void 0 : value.value);
+    if (value === undefined)
+        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,
+                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,
+                lineHeight: 1 }, options[1].display))));
+}
+exports.SwitchDouble = SwitchDouble;
+function SwitchSingle(_a) {
+    var id = _a.id, value = _a.value, option = _a.option, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, saveValueAsString = _a.saveValueAsString, _c = _a.layoutStyle, layoutStyle = _c === void 0 ? "style1" : _c, infoTooltip = _a.infoTooltip;
+    var props = arguments[0];
+    var localize = (0, utilsOolib_1.useLocale)();
+    /**
+     * very important that we check this way,
+     * as opposed to checking as 'value === undefined'
+     *
+     * because in some cases in the TCI, the initial value
+     * is not equal to undefined. it is equal to 'false' or something else
+     */
+    var isInactive = saveValueAsString
+        ? value !== option.value
+        : (value === null || value === void 0 ? void 0 : value.value) !== option.value;
+    var _d = (0, react_1.useState)(isInactive ? "left" : "right"), currentDirection = _d[0], setCurrentDirection = _d[1];
+    (0, react_1.useEffect)(function () {
+        if (!disabled) {
+            setCurrentDirection(isInactive ? "left" : "right");
+        }
+    }, [isInactive, disabled]);
+    var handleClick = function (v) {
+        !disabled &&
+            onChange &&
+            onChange(id, isInactive ? (saveValueAsString ? option.value : option) : undefined);
+    };
+    var genSwitch = function () {
+        console.log("Rendering genSwitch:", {
+            currentDirection: currentDirection,
+            isInactive: isInactive,
+            disabled: disabled,
+        });
+        return (react_1.default.createElement(styled_1.StyledButtonSlider, { inactive: isInactive, 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
+                , direction: currentDirection, inactive: isInactive, disabled: disabled })));
+    };
+    var injectOptionalLabelIntoDisplayText = function (_a) {
+        var label = _a.label, display = _a.display, isRequired = _a.isRequired;
+        if (!!label)
+            return display; //if label exists, we do nothing, cuz optional label in that case, would be shown next to the label
+        //else
+        if (isRequired === false)
+            return display + " (".concat(localize("optional"), ")");
+        //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({
+        display: option.display,
+        label: props.label,
+        isRequired: props.isRequired
+    }))); };
+    var genSwitchDisplay = function () {
+        return infoTooltip ? (react_1.default.createElement("div", { style: { display: "flex", gap: ".5rem", alignItems: "center" } },
+            genDisplayText(),
+            react_1.default.createElement(Tooltip_1.Tooltip, __assign({ presetTarget: "infoIcon" }, infoTooltip)))) : (genDisplayText());
+    };
+    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,
+            genSwitch(),
+            genSwitchDisplay())) : (layoutStyle === "style2" && (react_1.default.createElement(styled_1.StyledSwitchWrapperStyle2, null,
+            genSwitchDisplay(),
+            genSwitch())))));
+}
+exports.SwitchSingle = SwitchSingle;

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

@@ -0,0 +1,5 @@
+export const StyledSwitchWrapperStyle1: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSwitchWrapperStyle2: 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

@@ -0,0 +1,62 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __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;
+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 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"])));
+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) {
+    var disabled = _a.disabled;
+    return (disabled ? 'not-allowed' : 'pointer');
+}, function (_a) {
+    var disabled = _a.disabled, inactive = _a.inactive, colors = _a.theme.colors;
+    if (disabled)
+        return grey5;
+    return inactive ? grey10 : (0, utils_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));
+}, function (_a) {
+    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
+    return !disabled && (inactive ? grey40 : (0, utils_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 ? "" : white);
+}, (0, mixins_1.transition)('border-color', 'left 0.2s'), 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, utils_1.getSecondaryContainer)(colors);
+    if (inactive && !disabled)
+        return grey70;
+}, function (_a) {
+    var direction = _a.direction;
+    return direction === 'left' ? '3px' : 'calc(100% - 15px)';
+}, 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, utils_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;

package/dist/v2/components/Tags/Comps/TagClear/index.d.ts

@@ -0,0 +1,26 @@
+import { FunctionComponent } from "react";
+export interface TagClearProps {
+    id: string;
+    display: string;
+    M?: boolean;
+    XS?: boolean;
+    invert?: boolean;
+    onClick?: () => void;
+    variant?: 'primary' | 'ghost';
+    grey?: boolean;
+}
+/**
+ * @component Renders a TagClear component with customizable text, style and onClick handler.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} id: The id of the component.
+ * @prop {string} display: The text to be displayed inside the TagClear component.
+ * @prop {boolean} [M] : A boolean indicating whether the component should render at the large size. Defaults to false.
+ * @prop {boolean} [XS] : A boolean indicating whether the component should render at the extra small size. Defaults to false.
+ * @prop {boolean} [invert] : A boolean indicating whether to invert the colors of the component. Defaults to false.
+ * @prop {() => void} [onClick] : A function to be called when the component is clicked. Defaults to an empty function.
+ * @prop {('primary' | 'ghost')} [variant] : A string indicating the variant of the component. Defaults to "primary".
+ * @prop {boolean} [grey] : A boolean indicating whether to render the component in the grey variant. Defaults to false.
+ * @return {ReactElement} The rendered TagClear component.
+ */
+export declare const TagClear: FunctionComponent<TagClearProps>;

package/dist/v2/components/Tags/Comps/TagClear/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagClear = void 0;
+var react_1 = __importStar(require("react"));
+var icons_1 = require("../../../../../icons");
+var getTypoComp_1 = require("../../utils/getTypoComp");
+var styled_1 = require("./styled");
+/**
+ * @component Renders a TagClear component with customizable text, style and onClick handler.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} id: The id of the component.
+ * @prop {string} display: The text to be displayed inside the TagClear component.
+ * @prop {boolean} [M] : A boolean indicating whether the component should render at the large size. Defaults to false.
+ * @prop {boolean} [XS] : A boolean indicating whether the component should render at the extra small size. Defaults to false.
+ * @prop {boolean} [invert] : A boolean indicating whether to invert the colors of the component. Defaults to false.
+ * @prop {() => void} [onClick] : A function to be called when the component is clicked. Defaults to an empty function.
+ * @prop {('primary' | 'ghost')} [variant] : A string indicating the variant of the component. Defaults to "primary".
+ * @prop {boolean} [grey] : A boolean indicating whether to render the component in the grey variant. Defaults to false.
+ * @return {ReactElement} The rendered TagClear component.
+ */
+var TagClear = function (_a) {
+    var id = _a.id, display = _a.display, M = _a.M, XS = _a.XS, invert = _a.invert, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, grey = _a.grey;
+    var XIconCom = icons_1.icons['X'];
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = (0, getTypoComp_1.getTypoComp)({ typo: "caption" });
+    var _d = (0, react_1.useState)(false), hoverTag = _d[0], setHoverOnTag = _d[1];
+    return (react_1.default.createElement(styled_1.StyledTagClear, { invert: invert, size: size, grey: grey, variant: variant, onMouseEnter: function () { return setHoverOnTag(true); }, onMouseLeave: function () { return setHoverOnTag(false); } },
+        react_1.default.createElement(TYPO_COMP, null, display),
+        hoverTag &&
+            react_1.default.createElement(styled_1.StyledTagClearIconWrapper, { invert: invert, grey: grey, variant: variant, onClick: onClick },
+                react_1.default.createElement(XIconCom, { style: { marginRight: '-0.3rem' }, size: size === 'XS' ? '10' : '14', weight: 'bold' }))));
+};
+exports.TagClear = TagClear;

package/dist/v2/components/Tags/Comps/TagClear/styled.d.ts

@@ -0,0 +1,15 @@
+import { SIZES } from "../styled";
+export interface StyledTagClearProps {
+    variant: 'primary' | 'ghost';
+    size: keyof typeof SIZES;
+    invert?: boolean;
+    grey?: boolean;
+}
+export declare const StyledTagClear: import("styled-components").StyledComponent<"div", any, StyledTagClearProps, never>;
+export interface StyledTagClearIconWrapperProps {
+    invert?: boolean;
+    grey?: boolean;
+    variant: 'primary' | 'ghost';
+    onClick?: () => void;
+}
+export declare const StyledTagClearIconWrapper: import("styled-components").StyledComponent<"button", any, StyledTagClearIconWrapperProps, never>;

package/dist/v2/components/Tags/Comps/TagClear/styled.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTagClearIconWrapper = exports.StyledTagClear = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var styled_1 = require("../styled");
+var themes_1 = require("../../../../themes");
+var mixins_1 = require("../../../../../themes/mixins");
+var grey5 = themes_1.colors.grey5, grey60 = themes_1.colors.grey60, redBG = themes_1.colors.redBG, red = themes_1.colors.red;
+exports.StyledTagClear = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " // size wont get applied here because of css specificity, there is no different size design yet \n    padding: 0.1rem 0.5rem;\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n    position: relative;\n    border-radius: 0.4rem;\n\n    &:hover{\n      background-color: ", ";\n      color: ", ";\n    }\n"], ["\n    ", " // size wont get applied here because of css specificity, there is no different size design yet \n    padding: 0.1rem 0.5rem;\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n    position: relative;\n    border-radius: 0.4rem;\n\n    &:hover{\n      background-color: ", ";\n      color: ", ";\n    }\n"])), function (_a) {
+    var size = _a.size;
+    return (0, styled_1.commonStyle)({ size: size });
+}, grey5, grey60, redBG, red);
+exports.StyledTagClearIconWrapper = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __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    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\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    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n    ", ";\n"])), redBG, red, (0, mixins_1.transition)('color', 'background-color'));
+var templateObject_1, templateObject_2;

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

@@ -1 +1,2 @@
 export { TagDisplay } from './Comps/TagDisplay';
+export { TagClear } from './Comps/TagClear';

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

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagDisplay = void 0;
+exports.TagClear = exports.TagDisplay = void 0;
 var TagDisplay_1 = require("./Comps/TagDisplay");
 Object.defineProperty(exports, "TagDisplay", { enumerable: true, get: function () { return TagDisplay_1.TagDisplay; } });
+var TagClear_1 = require("./Comps/TagClear");
+Object.defineProperty(exports, "TagClear", { enumerable: true, get: function () { return TagClear_1.TagClear; } });

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

@@ -38,6 +38,8 @@ export declare const colors: {
     green: string;
     greenBG: string;
     greenStroke: string;
+    redBG: string;
+    red: string;
 };
 export interface Colors2Type {
     primary: string;
@@ -69,4 +71,6 @@ export interface Colors2Type {
     green: string;
     greenBG: string;
     greenStroke: string;
+    redBG: string;
+    red: string;
 }

package/dist/v2/themes/colors.js

@@ -31,6 +31,8 @@ var blue = "#2F55FF";
 var yellow = "#DA9A0F";
 var yellowBG = "#FFF7DC";
 var yellowStroke = "#FFE09A";
+var redBG = "#FFE3E3";
+var red = "#800";
 // const green = "#159300";
 var purple = "#9D13E8";
 var error = "#C41717";
@@ -42,16 +44,6 @@ var hint = "#B77222";
 var green = '#53AC00';
 var greenBG = '#E8F6DA';
 var greenStroke = '#C4DAAF';
-var greyColor100 = '#383838';
-var greyColor90 = '#4c4c4c';
-var greyColor80 = '#606060';
-var greyColor70 = '#747474';
-var greyColor50 = '#9B9B9B';
-var greyColor40 = '#afafaf';
-var greyColor15 = '#e1e1e1';
-var greyColor10 = '#EBEBEB';
-var greyColor5 = '#f5f5f5';
-var greyColor3 = '#f9f9f9';
 exports.dataVizColors = [
     "#FF665D",
     "#4DBC5D",
@@ -109,5 +101,7 @@ exports.colors = {
     shadowHover: shadowHover,
     green: green,
     greenBG: greenBG,
-    greenStroke: greenStroke
+    greenStroke: greenStroke,
+    redBG: redBG,
+    red: red
 };

package/package.json

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