oolib 2.230.3 → 2.231.0

package/dist/components/LoadersAndProgress/LoaderOverlay/index.js

@@ -37,7 +37,7 @@ exports.LoaderOverlay = void 0;
 var react_1 = __importStar(require("react"));
 var react_dom_1 = require("react-dom");
 var themes_1 = require("../../../themes");
-var LoaderCircle_1 = require("../LoaderCircle");
+var LoaderCircle_1 = require("../../../v2/components/LoaderCircle");
 /**
  * @component Renders a loader overlay component with customizable text and styling.
  *
@@ -58,6 +58,6 @@ var LoaderOverlay = function (_a) {
                 left: 0,
                 zIndex: 1000000000,
             } },
-            react_1.default.createElement(LoaderCircle_1.LoaderCircle, { text: loaderText || "Loading...", isBlock: true, invert: true }))), document.getElementById("loader-root")));
+            react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { text: loaderText || "Loading...", isBlock: true, color: "#FFFFFF" }))), document.getElementById("loader-root")));
 };
 exports.LoaderOverlay = LoaderOverlay;

package/dist/index.d.ts

@@ -73,6 +73,7 @@ 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 { LoaderCircleV2 } from "./v2/components/LoaderCircle";
 export { List } from "./v2/components/List";
 export { ListItem } from "./v2/components/List/comps/ListItem";
 export { default as TooltipV2 } from "./v2/components/Tooltip";

package/dist/index.js

@@ -40,8 +40,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.applyBlackOverlayOnHover = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.ListItem = exports.List = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = void 0;
-exports.FloatingPortal = exports.FloatingFocusManager = exports.useFloatingPosition = exports.baseStyling = exports.TooltipV2 = void 0;
+exports.List = exports.LoaderCircleV2 = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = void 0;
+exports.FloatingPortal = exports.FloatingFocusManager = exports.useFloatingPosition = exports.baseStyling = exports.TooltipV2 = exports.ListItem = 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; } });
@@ -243,6 +243,8 @@ Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function
 var Switches_1 = require("./v2/components/Switches");
 Object.defineProperty(exports, "SwitchSingle", { enumerable: true, get: function () { return Switches_1.SwitchSingle; } });
 Object.defineProperty(exports, "SwitchDouble", { enumerable: true, get: function () { return Switches_1.SwitchDouble; } });
+var LoaderCircle_1 = require("./v2/components/LoaderCircle");
+Object.defineProperty(exports, "LoaderCircleV2", { enumerable: true, get: function () { return LoaderCircle_1.LoaderCircleV2; } });
 var List_1 = require("./v2/components/List");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
 var ListItem_1 = require("./v2/components/List/comps/ListItem");

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

@@ -0,0 +1,159 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace size {
+            let name: string;
+            let options: string[];
+            namespace mapping {
+                let Small: string;
+                let Medium: string;
+                let Large: string;
+            }
+            namespace control {
+                let type: string;
+            }
+        }
+        namespace text {
+            let name_1: string;
+            export { name_1 as name };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace color {
+            let name_2: string;
+            export { name_2 as name };
+            export { colorOptions as options };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace isBlock {
+            let name_3: string;
+            export { name_3 as name };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        namespace blockHeight {
+            let name_4: string;
+            export { name_4 as name };
+            export { blockHeightOptions as options };
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+        namespace customDiameter {
+            let name_5: string;
+            export { name_5 as name };
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+        }
+        namespace customTrackThickness {
+            let name_6: string;
+            export { name_6 as name };
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+        }
+        namespace background {
+            let name_7: string;
+            export { name_7 as name };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+        }
+    }
+    namespace args {
+        let size_1: string;
+        export { size_1 as size };
+        let text_1: string;
+        export { text_1 as text };
+        let color_1: any;
+        export { color_1 as color };
+        let isBlock_1: boolean;
+        export { isBlock_1 as isBlock };
+        let blockHeight_1: string;
+        export { blockHeight_1 as blockHeight };
+        let customDiameter_1: any;
+        export { customDiameter_1 as customDiameter };
+        let customTrackThickness_1: any;
+        export { customTrackThickness_1 as customTrackThickness };
+        let background_1: string;
+        export { background_1 as background };
+    }
+}
+export default _default;
+export function Playground(args: any): React.JSX.Element;
+export function Sizes(): React.JSX.Element;
+export namespace Sizes {
+    namespace parameters {
+        namespace controls {
+            let disable: boolean;
+        }
+    }
+}
+export function WithText(): React.JSX.Element;
+export namespace WithText {
+    export namespace parameters_1 {
+        export namespace controls_1 {
+            let disable_1: boolean;
+            export { disable_1 as disable };
+        }
+        export { controls_1 as controls };
+    }
+    export { parameters_1 as parameters };
+}
+export function Colors(): React.JSX.Element;
+export namespace Colors {
+    export namespace parameters_2 {
+        export namespace controls_2 {
+            let disable_2: boolean;
+            export { disable_2 as disable };
+        }
+        export { controls_2 as controls };
+    }
+    export { parameters_2 as parameters };
+}
+export function CustomSizes(): React.JSX.Element;
+export namespace CustomSizes {
+    export namespace parameters_3 {
+        export namespace controls_3 {
+            let disable_3: boolean;
+            export { disable_3 as disable };
+        }
+        export { controls_3 as controls };
+    }
+    export { parameters_3 as parameters };
+}
+export function BlockVsInline(): React.JSX.Element;
+export namespace BlockVsInline {
+    export namespace parameters_4 {
+        export namespace controls_4 {
+            let disable_4: boolean;
+            export { disable_4 as disable };
+        }
+        export { controls_4 as controls };
+    }
+    export { parameters_4 as parameters };
+}
+declare const colorOptions: string[];
+declare const blockHeightOptions: string[];
+import React from "react";

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

@@ -0,0 +1,208 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockVsInline = exports.CustomSizes = exports.Colors = exports.WithText = exports.Sizes = exports.Playground = void 0;
+var react_1 = __importDefault(require("react"));
+var LoaderCircle_1 = require("../../../v2/components/LoaderCircle");
+var themes_1 = require("../../../v2/themes");
+var colorOptions = __spreadArray([undefined], Object.keys(themes_1.colors).sort(), true);
+var blockHeightOptions = ["100%", "10vh", "20vh", "30vh", "50vh", "80vh", "100vh"];
+exports.default = {
+    title: "Oolib V 2.0/components/LoaderCircle",
+    argTypes: {
+        size: {
+            name: "Size",
+            options: ["Small", "Medium", "Large"],
+            mapping: {
+                Small: "S",
+                Medium: "M",
+                Large: "L",
+            },
+            control: { type: "inline-radio" },
+        },
+        text: {
+            name: "Text",
+            control: { type: "text" },
+        },
+        color: {
+            name: "Color",
+            options: colorOptions,
+            control: { type: "select" },
+        },
+        isBlock: {
+            name: "Is Block",
+            control: { type: "boolean" },
+        },
+        blockHeight: {
+            name: "Block Height",
+            options: blockHeightOptions,
+            control: { type: "select" },
+        },
+        customDiameter: {
+            name: "Custom Diameter (px)",
+            control: { type: "number" },
+        },
+        customTrackThickness: {
+            name: "Custom Track Thickness (px)",
+            control: { type: "number" },
+        },
+        background: {
+            name: "Background",
+            options: ["none", "dark", "light"],
+            control: { type: "inline-radio" },
+        },
+    },
+    args: {
+        size: "Medium",
+        text: "",
+        color: undefined,
+        isBlock: true,
+        blockHeight: "50vh",
+        customDiameter: undefined,
+        customTrackThickness: undefined,
+        background: "none",
+    },
+};
+var getBackground = function (bg) {
+    if (bg === "dark")
+        return themes_1.colors.grey80;
+    if (bg === "light")
+        return themes_1.colors.surfaceContainerLow;
+    return "transparent";
+};
+// --- Interactive playground ---
+var Playground = function (args) {
+    var props = {};
+    props[args.size] = true;
+    if (args.text)
+        props.text = args.text;
+    if (args.color)
+        props.color = themes_1.colors[args.color];
+    props.isBlock = args.isBlock;
+    if (args.isBlock)
+        props.blockHeight = args.blockHeight;
+    if (args.customDiameter)
+        props.diameter = args.customDiameter;
+    if (args.customTrackThickness)
+        props.trackThickness = args.customTrackThickness;
+    return (react_1.default.createElement("div", { style: {
+            background: getBackground(args.background),
+            padding: "2rem",
+            borderRadius: "8px",
+        } },
+        react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, __assign({}, props))));
+};
+exports.Playground = Playground;
+// --- All sizes side by side ---
+var Sizes = function () {
+    return (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "3rem", padding: "2rem" } },
+        react_1.default.createElement("div", { style: { textAlign: "center" } },
+            react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { S: true, isBlock: false }),
+            react_1.default.createElement("div", { style: { marginTop: "0.5rem", fontSize: "12px", color: themes_1.colors.grey50 } }, "Small (20px)")),
+        react_1.default.createElement("div", { style: { textAlign: "center" } },
+            react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { M: true, isBlock: false }),
+            react_1.default.createElement("div", { style: { marginTop: "0.5rem", fontSize: "12px", color: themes_1.colors.grey50 } }, "Medium (43px)")),
+        react_1.default.createElement("div", { style: { textAlign: "center" } },
+            react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { L: true, isBlock: false }),
+            react_1.default.createElement("div", { style: { marginTop: "0.5rem", fontSize: "12px", color: themes_1.colors.grey50 } }, "Large (70px)"))));
+};
+exports.Sizes = Sizes;
+exports.Sizes.parameters = { controls: { disable: true } };
+// --- With text ---
+var WithText = function () {
+    return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "3rem", padding: "2rem" } },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { marginBottom: "1rem", fontSize: "13px", fontWeight: 600, color: themes_1.colors.grey50 } }, "Block (centered, with text below)"),
+            react_1.default.createElement("div", { style: { border: "1px dashed ".concat(themes_1.colors.grey20), borderRadius: "8px" } },
+                react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { text: "Loading data...", blockHeight: "20vh" }))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { marginBottom: "1rem", fontSize: "13px", fontWeight: 600, color: themes_1.colors.grey50 } }, "Inline (text beside spinner)"),
+            react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { S: true, isBlock: false, text: "Loading..." })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { marginBottom: "1rem", fontSize: "13px", fontWeight: 600, color: themes_1.colors.grey50 } }, "Large with text"),
+            react_1.default.createElement("div", { style: { border: "1px dashed ".concat(themes_1.colors.grey20), borderRadius: "8px" } },
+                react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { L: true, text: "Generating Platform...", blockHeight: "30vh" })))));
+};
+exports.WithText = WithText;
+exports.WithText.parameters = { controls: { disable: true } };
+// --- Color variants ---
+var Colors = function () {
+    var colorSamples = [
+        { name: "Default (onSecondary)", color: undefined },
+        { name: "Primary", color: themes_1.colors.primary },
+        { name: "Red", color: themes_1.colors.red },
+        { name: "Green", color: themes_1.colors.green },
+        { name: "Purple", color: themes_1.colors.purple },
+        { name: "Grey50", color: themes_1.colors.grey50 },
+        { name: "White (on dark)", color: themes_1.colors.white, bg: themes_1.colors.grey80 },
+    ];
+    return (react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "2rem", padding: "2rem" } }, colorSamples.map(function (_a) {
+        var name = _a.name, color = _a.color, bg = _a.bg;
+        return (react_1.default.createElement("div", { key: name, style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: "0.75rem",
+                padding: "1.5rem",
+                borderRadius: "8px",
+                background: bg || themes_1.colors.surfaceContainerLow,
+                minWidth: "120px",
+            } },
+            react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { M: true, isBlock: false, color: color }),
+            react_1.default.createElement("div", { style: { fontSize: "12px", color: bg ? themes_1.colors.white : themes_1.colors.grey50 } }, name)));
+    })));
+};
+exports.Colors = Colors;
+exports.Colors.parameters = { controls: { disable: true } };
+// --- Custom diameter ---
+var CustomSizes = function () {
+    var customSizes = [12, 16, 24, 32, 48, 64, 100];
+    return (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2rem", padding: "2rem" } }, customSizes.map(function (d) { return (react_1.default.createElement("div", { key: d, style: { textAlign: "center" } },
+        react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { isBlock: false, diameter: d }),
+        react_1.default.createElement("div", { style: { marginTop: "0.5rem", fontSize: "12px", color: themes_1.colors.grey50 } },
+            d,
+            "px"))); })));
+};
+exports.CustomSizes = CustomSizes;
+exports.CustomSizes.parameters = { controls: { disable: true } };
+// --- Block vs Inline ---
+var BlockVsInline = function () {
+    return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "3rem", padding: "2rem" } },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { marginBottom: "1rem", fontSize: "13px", fontWeight: 600, color: themes_1.colors.grey50 } }, "isBlock=true (centers in container)"),
+            react_1.default.createElement("div", { style: {
+                    border: "1px dashed ".concat(themes_1.colors.grey20),
+                    borderRadius: "8px",
+                    height: "200px",
+                } },
+                react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { isBlock: true, blockHeight: "200px", text: "Centered in block" }))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { marginBottom: "1rem", fontSize: "13px", fontWeight: 600, color: themes_1.colors.grey50 } }, "isBlock=false (inline, flows with content)"),
+            react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "1rem" } },
+                react_1.default.createElement("span", { style: { fontSize: "14px", color: themes_1.colors.grey60 } }, "Status:"),
+                react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { S: true, isBlock: false, text: "Processing..." })))));
+};
+exports.BlockVsInline = BlockVsInline;
+exports.BlockVsInline.parameters = { controls: { disable: true } };

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

@@ -0,0 +1,21 @@
+import React, { FunctionComponent } from "react";
+export interface LoaderCircleV2Props {
+    /** Preset size. Ignored if `diameter` is provided. */
+    L?: boolean;
+    S?: boolean;
+    M?: boolean;
+    /** Custom diameter in px — overrides L/M/S */
+    diameter?: number;
+    /** Custom stroke thickness in px */
+    trackThickness?: number;
+    /** Stroke color. Defaults to theme onSecondary */
+    color?: string;
+    /** Optional text displayed next to (inline) or below (block) the spinner */
+    text?: string;
+    children?: React.ReactNode;
+    /** When true, centers the loader in a full-height block container. Default: true */
+    isBlock?: boolean;
+    /** Height of the block container. Only applies when isBlock is true. Default: "100%" */
+    blockHeight?: string;
+}
+export declare const LoaderCircleV2: FunctionComponent<LoaderCircleV2Props>;

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

@@ -0,0 +1,87 @@
+"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 __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 () {
+    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.LoaderCircleV2 = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../themes");
+var Typo2_1 = require("../Typo2");
+var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"], ["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
+/** diameter / 10 — e.g. 20px → 2px, 43px → 4.3px, 70px → 7px */
+var getTrackThickness = function (diameter) { return diameter / 10; };
+var sizeConfig = {
+    L: { diameter: 70, TypoComp: Typo2_1.UI_TITLE },
+    M: { diameter: 43, TypoComp: Typo2_1.UI_BODY_DF },
+    S: { diameter: 20, TypoComp: Typo2_1.UI_BODY_SM_DF },
+};
+var BlockWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: transparent;\n  width: 100%;\n  height: ", ";\n  display: grid;\n  place-items: center;\n"], ["\n  background-color: transparent;\n  width: 100%;\n  height: ", ";\n  display: grid;\n  place-items: center;\n"])), function (_a) {
+    var blockHeight = _a.blockHeight;
+    return blockHeight;
+});
+var InlineWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n"])));
+var BlockInner = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 1.2rem;\n  text-align: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 1.2rem;\n  text-align: center;\n"])));
+var SpinningSvg = styled_components_1.default.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-shrink: 0;\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n"], ["\n  flex-shrink: 0;\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n"])), spin);
+var LoaderCircleV2 = function (_a) {
+    var L = _a.L, S = _a.S, M = _a.M, _diameter = _a.diameter, _trackThickness = _a.trackThickness, _b = _a.color, color = _b === void 0 ? themes_1.colors.onSecondary : _b, _text = _a.text, children = _a.children, _c = _a.isBlock, isBlock = _c === void 0 ? true : _c, _d = _a.blockHeight, blockHeight = _d === void 0 ? "100%" : _d;
+    var size = L ? "L" : S ? "S" : "M";
+    var config = sizeConfig[size];
+    var diameter = _diameter !== null && _diameter !== void 0 ? _diameter : config.diameter;
+    var trackThickness = _trackThickness !== null && _trackThickness !== void 0 ? _trackThickness : getTrackThickness(diameter);
+    var TypoComp = config.TypoComp;
+    var text = _text || children;
+    var radius = (diameter - trackThickness) / 2;
+    var circumference = 2 * Math.PI * radius;
+    var dashOffset = circumference * 0.18;
+    var spinner = (react_1.default.createElement(SpinningSvg, { width: diameter, height: diameter },
+        react_1.default.createElement("circle", { cx: diameter / 2, cy: diameter / 2, r: radius, fill: "none", stroke: color, strokeWidth: trackThickness, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: dashOffset })));
+    if (!isBlock) {
+        return (react_1.default.createElement(InlineWrapper, null,
+            spinner,
+            text && react_1.default.createElement(TypoComp, { style: { color: color } }, text)));
+    }
+    return (react_1.default.createElement(BlockWrapper, { blockHeight: blockHeight },
+        react_1.default.createElement(BlockInner, null,
+            spinner,
+            text && react_1.default.createElement(TypoComp, { style: { color: color } }, text))));
+};
+exports.LoaderCircleV2 = LoaderCircleV2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -126,6 +126,7 @@ function TextInput(_a) {
     var size = S
         ? (screenWidth >= (0, mixins_1.getBreakPoint)('md') ? "S" : "M") //wat this basically means is, a defined 'small' text input will dynamically become 'medium' when on mobile, which is in sync with the pattern of the rest of our components
         : "M";
+    var ClearBtnComp = (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.variant) === "tertiary" ? Buttons_1.ButtonTertiaryCompact : Buttons_1.ButtonSecondaryCompact;
     var handleValidate = function (e, onBlur) { return __awaiter(_this, void 0, void 0, function () {
         var value, res, validationPlugin, pluginResponse;
         return __generator(this, function (_a) {
@@ -205,7 +206,7 @@ function TextInput(_a) {
                     react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true }))),
                 (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div", null,
                     react_1.default.createElement(BadgeVetted, { size: 26 }))),
-                (clearBtn && clearBtnEnabled) && (react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } /** so that it stays ahead of the before element inside InputContainerStyled */ })),
+                (clearBtn && clearBtnEnabled) && (react_1.default.createElement(ClearBtnComp, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } /** so that it stays ahead of the before element inside InputContainerStyled */ })),
                 actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimaryCompact, { value: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text) || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } /** so that it stays ahead of the before element inside InputContainerStyled */ }))),
             displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainerStyled, { status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
                 (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "error" && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { size: 12, icon: "WarningDiamond", weight: "fill", color: themes_1.colors.red })),

package/package.json

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