oolib 2.230.4 → 2.231.1

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/components/LoadersAndProgress/index.d.ts

@@ -1,3 +1,2 @@
 export { ProgressBar } from './ProgressBar';
-export { LoaderCircle } from './LoaderCircle';
 export { LoaderOverlay } from './LoaderOverlay';

package/dist/components/LoadersAndProgress/index.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoaderOverlay = exports.LoaderCircle = exports.ProgressBar = void 0;
+exports.LoaderOverlay = exports.ProgressBar = void 0;
 var ProgressBar_1 = require("./ProgressBar");
 Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return ProgressBar_1.ProgressBar; } });
-var LoaderCircle_1 = require("./LoaderCircle");
-Object.defineProperty(exports, "LoaderCircle", { enumerable: true, get: function () { return LoaderCircle_1.LoaderCircle; } });
 var LoaderOverlay_1 = require("./LoaderOverlay");
 Object.defineProperty(exports, "LoaderOverlay", { enumerable: true, get: function () { return LoaderOverlay_1.LoaderOverlay; } });

package/dist/components/LoadersAndProgress/styled.d.ts

@@ -1,8 +1,3 @@
-export interface StyledCircLoaderProps {
-    diameter: number;
-    trackThickness: number;
-    invert?: boolean;
-}
 export interface StyledLoaderWrapperProps {
     isBlock?: boolean;
 }
@@ -16,7 +11,6 @@ export interface StyledHorLoadingBarProps {
     progress: number;
     barWidth: number;
 }
-export declare const StyledCircLoader: import("styled-components").StyledComponent<"div", any, StyledCircLoaderProps, never>;
 export declare const StyledLoaderWrapper: import("styled-components").StyledComponent<"div", any, StyledLoaderWrapperProps, never>;
 export declare const StyledLoaderOverlay: import("styled-components").StyledComponent<"div", any, StyledLoaderOverlayProps, never>;
 export declare const StyledHorLoader: import("styled-components").StyledComponent<"div", any, StyledHorLoaderProps, never>;

package/dist/components/LoadersAndProgress/styled.js

@@ -37,36 +37,29 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledHorLoadingBar = exports.StyledHorLoader = exports.StyledLoaderOverlay = exports.StyledLoaderWrapper = exports.StyledCircLoader = void 0;
+exports.StyledHorLoadingBar = exports.StyledHorLoader = exports.StyledLoaderOverlay = exports.StyledLoaderWrapper = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-var colors_1 = require("../../themes/colors");
 var utilsOolib_1 = require("../../utilsOolib");
-var greyColor10 = colors_1.colors.greyColor10, greyColor70 = colors_1.colors.greyColor70, white = colors_1.colors.white;
-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"])));
-exports.StyledCircLoader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-shrink: 0;\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"], ["\n  flex-shrink: 0;\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"])), spin, function (_a) {
-    var diameter = _a.diameter, trackThickness = _a.trackThickness, invert = _a.invert, theme = _a.theme;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: ", "px;\n    height: ", "px;\n    border-style: solid;\n    border-width: ", "px;\n    border-color: ", ";\n    border-top-color: ", ";\n  "], ["\n    width: ", "px;\n    height: ", "px;\n    border-style: solid;\n    border-width: ", "px;\n    border-color: ", ";\n    border-top-color: ", ";\n  "])), diameter, diameter, trackThickness, invert ? greyColor70 : greyColor10, invert ? white : (0, utilsOolib_1.getPrimaryColor100)(theme.colors));
-});
-exports.StyledLoaderWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"])), function (_a) {
+exports.StyledLoaderWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"])), function (_a) {
     var isBlock = _a.isBlock;
-    return isBlock && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: column;\n    justify-content: center;\n    gap: 1.2rem;\n    text-align: center;\n  "], ["\n    flex-direction: column;\n    justify-content: center;\n    gap: 1.2rem;\n    text-align: center;\n  "])));
+    return isBlock && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: column;\n    justify-content: center;\n    gap: 1.2rem;\n    text-align: center;\n  "], ["\n    flex-direction: column;\n    justify-content: center;\n    gap: 1.2rem;\n    text-align: center;\n  "])));
 });
-exports.StyledLoaderOverlay = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __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) {
+exports.StyledLoaderOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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;
 });
-exports.StyledHorLoader = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: 1rem;\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n  border: 1px solid ", ";\n"], ["\n  width: ", ";\n  height: 1rem;\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n  border: 1px solid ", ";\n"])), function (_a) {
+exports.StyledHorLoader = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", ";\n  height: 1rem;\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n  border: 1px solid ", ";\n"], ["\n  width: ", ";\n  height: 1rem;\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n  border: 1px solid ", ";\n"])), function (_a) {
     var barWidth = _a.barWidth;
     return barWidth + 'px';
 }, function (_a) {
     var theme = _a.theme;
     return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
 });
-exports.StyledHorLoadingBar = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background-color: ", ";\n  width: ", ";\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background-color: ", ";\n  width: ", ";\n"])), function (_a) {
+exports.StyledHorLoadingBar = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background-color: ", ";\n  width: ", ";\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background-color: ", ";\n  width: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
 }, function (_a) {
     var progress = _a.progress, barWidth = _a.barWidth;
     return (progress / 100) * barWidth + "px";
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/index.d.ts

@@ -73,11 +73,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 { 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";
 export * as baseStyling from "./v2/themes/utils/baseStyling";
-export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
+export { ProgressBar, 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";

package/dist/index.js

@@ -39,9 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": 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.useBannerContext = exports.BannerContext = 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.ProgressBar = exports.applyBlackOverlayOnHover = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.TooltipV2 = exports.ListItem = 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 = void 0;
+exports.FloatingPortal = exports.FloatingFocusManager = exports.useFloatingPosition = exports.baseStyling = 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; } });
@@ -57,10 +57,8 @@ var baseStyling_1 = require("./v2/themes/utils/baseStyling");
 Object.defineProperty(exports, "applyBlackOverlayOnHover", { enumerable: true, get: function () { return baseStyling_1.applyBlackOverlayOnHover; } });
 ////components
 var LoadersAndProgress_1 = require("./components/LoadersAndProgress");
-Object.defineProperty(exports, "LoaderCircle", { enumerable: true, get: function () { return LoadersAndProgress_1.LoaderCircle; } });
 Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return LoadersAndProgress_1.ProgressBar; } });
-var LoadersAndProgress_2 = require("./components/LoadersAndProgress"); //backwards compat till shen verifies
-Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return LoadersAndProgress_2.LoaderCircle; } });
+var LoadersAndProgress_2 = require("./components/LoadersAndProgress");
 Object.defineProperty(exports, "LoaderOverlay", { enumerable: true, get: function () { return LoadersAndProgress_2.LoaderOverlay; } });
 __exportStar(require("./components/Buttons"), exports);
 var Tags_1 = require("./components/Tags");
@@ -243,6 +241,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

@@ -85,7 +85,7 @@ exports.TextInput = TextInput;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = require("styled-components");
 var BlockLabel_1 = require("../BlockLabel");
-var LoadersAndProgress_1 = require("../../../components/LoadersAndProgress");
+var LoaderCircle_1 = require("../LoaderCircle");
 var OKELink_1 = require("../OKELink");
 var _EXPORTS_1 = require("../../../utils/_EXPORTS");
 var utilsOolib_1 = require("../../../utilsOolib");
@@ -203,7 +203,7 @@ function TextInput(_a) {
                 icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, color: disabled ? themes_1.colors.grey40 : themes_1.colors.grey80, size: screenWidth >= (0, mixins_1.getBreakPoint)('md') ? 16 : 18, onClick: !disabled ? iconOnClick || null : undefined })),
                 react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: "UI_BODY_SM_DF", id: id, type: type, name: type, disabled: disabled, placeholder: localize(placeholder), value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: validateOnlyOnBlur ? function (e) { return handleValidate(e, onBlur); } : onBlur, size: size, onFocus: onFocus, autoComplete: "off" }),
                 validationStatus === "loading" && (react_1.default.createElement("div", null,
-                    react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true }))),
+                    react_1.default.createElement(LoaderCircle_1.LoaderCircleV2, { S: true, isBlock: false }))),
                 (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(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 */ })),

package/package.json

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

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

@@ -1,32 +0,0 @@
-import React from "react";
-import { LoaderSize } from '../utils';
-export interface LoaderCircleProps {
-    isBlock?: boolean;
-    blockHeight?: string;
-    L?: boolean;
-    S?: boolean;
-    M?: boolean;
-    [key: string]: any;
-}
-export interface LoaderDivProps {
-    size: LoaderSize;
-    children?: React.ReactNode;
-    text?: string;
-    debug?: string;
-    invert?: boolean;
-    isBlock?: boolean;
-}
-/**
- * @component Renders a loader circle component with customizable text and styling.
- *
- * - The props object containing the following properties:
- * @prop {string} size: The size of the loader circle.
- * @prop {React.ReactNode} children: The content to be rendered inside the loader circle.
- * @prop {string} text: The text to be displayed in the loader circle.
- * @prop {string} debug: A boolean indicating whether to enable debug mode for the loader circle. Defaults to false. only for dev use
- * @prop {boolean} invert: A boolean indicating whether to invert the loader circle colors. Defaults to false.
- * @prop {boolean} isBlock: A boolean indicating whether the loader circle should be displayed as a block element. Defaults to true.
- * @prop {string} blockHeight: The height of the block element. Defaults to "100%".
- * @return {ReactElement} The rendered loader circle component.
- */
-export declare function LoaderCircle({ isBlock, blockHeight, L, S, M, ...props }: LoaderCircleProps): React.JSX.Element;

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

@@ -1,72 +0,0 @@
-"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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoaderCircle = LoaderCircle;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = require("styled-components");
-var utils_1 = require("../utils");
-var styled_1 = require("../styled");
-/**
- * @component Renders a loader circle component with customizable text and styling.
- *
- * - The props object containing the following properties:
- * @prop {string} size: The size of the loader circle.
- * @prop {React.ReactNode} children: The content to be rendered inside the loader circle.
- * @prop {string} text: The text to be displayed in the loader circle.
- * @prop {string} debug: A boolean indicating whether to enable debug mode for the loader circle. Defaults to false. only for dev use
- * @prop {boolean} invert: A boolean indicating whether to invert the loader circle colors. Defaults to false.
- * @prop {boolean} isBlock: A boolean indicating whether the loader circle should be displayed as a block element. Defaults to true.
- * @prop {string} blockHeight: The height of the block element. Defaults to "100%".
- * @return {ReactElement} The rendered loader circle component.
- */
-function LoaderCircle(_a) {
-    var _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c, L = _a.L, S = _a.S, M = _a.M, props = __rest(_a, ["isBlock", "blockHeight", "L", "S", "M"]);
-    var size = L ? 'L' : S ? 'S' : 'M';
-    var renderLoaderDiv = function () { return react_1.default.createElement(LoaderDiv, __assign({}, props, { isBlock: isBlock, size: size })); };
-    return !isBlock ? (renderLoaderDiv()) : (react_1.default.createElement(styled_1.StyledLoaderOverlay, { blockHeight: blockHeight }, renderLoaderDiv()));
-}
-/**
- * @component Renders a loader Div component with customizable text and styling.
- *
- * - The props object containing the following properties:
- * @prop {string} size: The size of the loader div.
- * @prop {React.ReactNode} children: The content to be rendered inside the loader div.
- * @prop {string} text: The text to be displayed in the loader div.
- * @prop {string} debug: A boolean indicating whether to enable debug mode for the loader div. Defaults to false. only for dev use
- * @prop {boolean} invert: A boolean indicating whether to invert the loader div colors. Defaults to false.
- * @prop {boolean} isBlock: A boolean indicating whether the loader div should be displayed as a block element. Defaults to true.
- * @return {ReactElement} The rendered loader div component.
- */
-var LoaderDiv = function (_a) {
-    var size = _a.size, children = _a.children, _text = _a.text, debug = _a.debug, invert = _a.invert, isBlock = _a.isBlock;
-    var theme = (0, styled_components_1.useTheme)();
-    var text = _text || children;
-    var _b = (0, utils_1.getTypoAndLoaderDimensions)(size), TypoComp = _b.TypoComp, trackThickness = _b.trackThickness, diameter = _b.diameter;
-    return (react_1.default.createElement(styled_1.StyledLoaderWrapper, { isBlock: isBlock },
-        react_1.default.createElement(styled_1.StyledCircLoader, { diameter: diameter, trackThickness: trackThickness, invert: invert }),
-        (text || ((theme === null || theme === void 0 ? void 0 : theme.ENV) === "dev" && debug)) && (react_1.default.createElement(TypoComp, __assign({ invert: invert }, (size === 'L' ? { bold: true } : { semibold: true })), "".concat((theme === null || theme === void 0 ? void 0 : theme.ENV) === "dev" && debug ? "".concat(debug, " ") : "").concat(text || '')))));
-};

package/dist/components/LoadersAndProgress/utils/index.d.ts

@@ -1,8 +0,0 @@
-import { UI_BODY_DF, UI_BODY_SM_DF, UI_TITLE } from "../../../v2/components/Typo2";
-export type LoaderSize = 'L' | 'S' | 'M';
-export interface DimensionResult {
-    TypoComp: typeof UI_BODY_DF | typeof UI_BODY_SM_DF | typeof UI_TITLE;
-    trackThickness: number;
-    diameter: number;
-}
-export declare const getTypoAndLoaderDimensions: (size?: LoaderSize) => DimensionResult;

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

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTypoAndLoaderDimensions = void 0;
-var Typo2_1 = require("../../../v2/components/Typo2");
-var getTypoAndLoaderDimensions = function (size) {
-    if (size === void 0) { size = 'M'; }
-    switch (size) {
-        case 'L':
-            return { TypoComp: Typo2_1.UI_TITLE, trackThickness: 10, diameter: 70 };
-        case 'S':
-            return { TypoComp: Typo2_1.UI_BODY_SM_DF, trackThickness: 3.65, diameter: 21.35 };
-        case 'M':
-        default:
-            return { TypoComp: Typo2_1.UI_BODY_DF, trackThickness: 7, diameter: 43 };
-    }
-};
-exports.getTypoAndLoaderDimensions = getTypoAndLoaderDimensions;

package/dist/stories/Oolib/components/Loaders.stories.d.ts

@@ -1,57 +0,0 @@
-declare namespace _default {
-    let title: string;
-}
-export default _default;
-export function _LoaderCircle(args: any): import("react").JSX.Element;
-export namespace _LoaderCircle {
-    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;
-            }
-            let defaultValue: string;
-        }
-        namespace text {
-            let name_1: string;
-            export { name_1 as name };
-        }
-        namespace isBlock {
-            let name_2: string;
-            export { name_2 as name };
-        }
-        namespace blockHeight {
-            let name_3: string;
-            export { name_3 as name };
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            export { control_1 as control };
-            export { sizeArray as options };
-        }
-        namespace invert {
-            let name_4: string;
-            export { name_4 as name };
-        }
-    }
-    namespace args {
-        let text_1: string;
-        export { text_1 as text };
-        let size_1: string;
-        export { size_1 as size };
-        let isBlock_1: boolean;
-        export { isBlock_1 as isBlock };
-        let blockHeight_1: string;
-        export { blockHeight_1 as blockHeight };
-        let invert_1: boolean;
-        export { invert_1 as invert };
-    }
-}
-declare const sizeArray: string[];

package/dist/stories/Oolib/components/Loaders.stories.js

@@ -1,75 +0,0 @@
-"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._LoaderCircle = void 0;
-var LoaderCircle_1 = require("../../../components/LoadersAndProgress/LoaderCircle");
-var LoaderOverlay_1 = require("../../../components/LoadersAndProgress/LoaderOverlay");
-var themes_1 = require("../../../themes");
-exports.default = {
-    title: "Components/Loaders",
-};
-var sizeArray = Array.from({ length: 10 }, function (_, index) { return "".concat((index + 1) * 10, "vh"); });
-var _LoaderCircle = function (args) {
-    args[args['size']] = true;
-    return (React.createElement("div", { style: { background: args.invert ? themes_1.colors.greyColor100 : '' } },
-        React.createElement(LoaderCircle_1.LoaderCircle, __assign({}, args), args.children)));
-};
-exports._LoaderCircle = _LoaderCircle;
-exports._LoaderCircle.argTypes = {
-    size: {
-        name: "Size",
-        options: ['Small', 'Medium', 'Large'],
-        mapping: {
-            Small: 'S',
-            Medium: 'M',
-            Large: 'L'
-        },
-        control: { type: 'inline-radio' },
-        defaultValue: 'Medium',
-    },
-    text: {
-        name: "Text Input"
-    },
-    isBlock: {
-        name: "Is Block"
-    },
-    blockHeight: {
-        name: "Block Height",
-        control: { type: 'select' },
-        options: sizeArray
-    },
-    invert: {
-        name: "Invert"
-    }
-};
-exports._LoaderCircle.args = {
-    text: 'Hello World',
-    size: "Small",
-    isBlock: true,
-    blockHeight: sizeArray[sizeArray.length - 1],
-    invert: false,
-};
-// export const _LoaderOverlay = (args) => {
-//   return (
-//     <LoaderOverlay {...args}/>
-//   )
-// }
-// _LoaderOverlay.args = {
-//   loaderText: 'Hello World',
-// }
-// _LoaderOverlay.argTypes = {
-//   loaderText: {
-//     name: "Text",
-//     control: { type: "text" }
-//   }
-// }