oolib 2.129.10 → 2.131.0

package/dist/components/ActionMenu/index.js

@@ -99,7 +99,7 @@ var ActionMenu = function (_a) {
         return (react_1.default.createElement(styled_1.StyledActionsDropMenu, { id: "dropmenu", align: align, invert: invert, optionsHeight: (_a = getOpsRect()) === null || _a === void 0 ? void 0 : _a.height, optionsWidth: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.width, showActions: showActions, fixPos: fixPos },
             react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
                 var _a, _b, _c;
-                var optionContent = (react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {
+                var optionContent = (react_1.default.createElement(styled_1.StyledOption, __assign({ disabled: action.disabled }, action, { onClick: function (e) {
                         var _a;
                         e.preventDefault();
                         e.stopPropagation();
@@ -108,7 +108,7 @@ var ActionMenu = function (_a) {
                     }, key: action.display, invert: invert }),
                     action.icon && genOptionIcon(action.icon),
                     react_1.default.createElement(Typo_1.SANS_2, null, action.display)));
-                return (react_1.default.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction, { key: action.display }), action.infoTooltip ? (react_1.default.createElement(Tooltip_1.Tooltip, { text: ((_a = action.infoTooltip) === null || _a === void 0 ? void 0 : _a.text) || undefined, popOutOfOverflowHiddenParent: ((_b = action.infoTooltip) === null || _b === void 0 ? void 0 : _b.popOutOfOverflowHiddenParent) || false, position: ((_c = action.infoTooltip) === null || _c === void 0 ? void 0 : _c.position) || "left" }, optionContent)) : (optionContent)));
+                return (react_1.default.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction, { key: action.display }), action.infoTooltip ? (react_1.default.createElement(Tooltip_1.Tooltip, { text: ((_a = action.infoTooltip) === null || _a === void 0 ? void 0 : _a.text) || undefined, popOutOfOverflowHiddenParent: ((_b = action.infoTooltip) === null || _b === void 0 ? void 0 : _b.popOutOfOverflowHiddenParent) || false, position: ((_c = action.infoTooltip) === null || _c === void 0 ? void 0 : _c.position) || "left", invert: invert }, optionContent)) : (optionContent)));
             }))));
     };
     return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },

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

@@ -21,5 +21,6 @@ export declare const StyledActionMenuOpsWrapper: import("styled-components").Sty
 }, never>;
 export declare const StyledOption: import("styled-components").StyledComponent<"button", any, {
     invert?: boolean;
+    disabled?: boolean;
 }, never>;
 export {};

package/dist/components/ActionMenu/styled.js

@@ -94,8 +94,11 @@ exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(templateObj
     var invert = _a.invert;
     return (invert ? greyColor80 : white);
 });
-exports.StyledOption = styled_components_1.default.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  ", "\n"], ["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  ", "\n"])), function (_a) {
+exports.StyledOption = styled_components_1.default.button(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  \n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent; \n  color: ", ";\n  ", ";\n\n  ", "\n\n"], ["\n  white-space: nowrap;\n  border: none;\n  \n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent; \n  color: ", ";\n  ", ";\n\n  ", "\n\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? white : greyColor100);
-}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalHoverOnWhiteBG);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
+}, (0, mixins_1.transition)("background-color"), function (_a) {
+    var disabled = _a.disabled, invert = _a.invert;
+    return disabled ? (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject([" \n          pointer-events: none;\n          color: ", "\n          "], [" \n          pointer-events: none;\n          color: ", "\n          "])), themes_1.colors.greyColor40) : (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject([" \n          cursor: pointer;\n          ", ""], [" \n          cursor: pointer;\n          ", ""])), globalVariables_1.globalHoverOnWhiteBG);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;

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

@@ -1,9 +1,32 @@
-export function LoaderCircle({ isBlock, blockHeight, L, S, M, ...props }: {
-    [x: string]: any;
+import React from "react";
+import { LoaderSize } from '../utils';
+export interface LoaderCircleProps {
     isBlock?: boolean;
     blockHeight?: string;
-    L: any;
-    S: any;
-    M: any;
-}): React.JSX.Element;
-import React from "react";
+    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

@@ -30,13 +30,38 @@ 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'; //defaults to M if no L or S, so techinically, the M prop isnt really required..
+    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()));
 }
 exports.LoaderCircle = LoaderCircle;
+/**
+ * @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)();

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

@@ -1,4 +1,12 @@
-export function LoaderOverlay({ loaderText }: {
-    loaderText: any;
-}): React.JSX.Element;
-import React from "react";
+import { FunctionComponent } from "react";
+export interface LoaderOverlayProps {
+    loaderText?: string;
+}
+/**
+ * @component Renders a loader overlay component with customizable text and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} loaderText: The text to be displayed in the loader overlay.
+ * @return {ReactElement} The rendered loader overlay component.
+ */
+export declare const LoaderOverlay: FunctionComponent<LoaderOverlayProps>;

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

@@ -27,7 +27,13 @@ exports.LoaderOverlay = void 0;
 var react_1 = __importStar(require("react"));
 var themes_1 = require("../../../themes");
 var LoaderCircle_1 = require("../LoaderCircle");
-// creates overlay effect loading screen
+/**
+ * @component Renders a loader overlay component with customizable text and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} loaderText: The text to be displayed in the loader overlay.
+ * @return {ReactElement} The rendered loader overlay component.
+ */
 var LoaderOverlay = function (_a) {
     var loaderText = _a.loaderText;
     return (react_1.default.createElement(react_1.Fragment, null,

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

@@ -1,9 +1,22 @@
-export function ProgressBar({ progress, text, children, isBlock, blockHeight, barWidth }: {
-    progress: any;
-    text: any;
-    children: any;
+import React, { FunctionComponent } from "react";
+export interface ProgressBarProps {
+    progress: number;
+    text?: string;
+    children?: React.ReactNode;
     isBlock?: boolean;
     blockHeight?: string;
     barWidth?: number;
-}): React.JSX.Element;
-import React from "react";
+}
+/**
+ * @component Renders a progress bar component with customizable text and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {number} progress: The progress of the bar.
+ * @prop {string} text: The text to be displayed next to the progress bar.
+ * @prop {React.ReactNode} children: The content to be rendered inside the progress bar.
+ * @prop {boolean} isBlock: A boolean indicating whether the progress bar should be displayed as a block element. Defaults to true.
+ * @prop {string} blockHeight: The height of the block element. Defaults to "100%".
+ * @prop {number} barWidth: The width of the progress bar. Defaults to 100.
+ * @return {ReactElement} The rendered progress bar component.
+ */
+export declare const ProgressBar: FunctionComponent<ProgressBarProps>;

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

@@ -7,6 +7,18 @@ exports.ProgressBar = void 0;
 var react_1 = __importDefault(require("react"));
 var Typo_1 = require("../../Typo");
 var styled_1 = require("../styled");
+/**
+ * @component Renders a progress bar component with customizable text and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {number} progress: The progress of the bar.
+ * @prop {string} text: The text to be displayed next to the progress bar.
+ * @prop {React.ReactNode} children: The content to be rendered inside the progress bar.
+ * @prop {boolean} isBlock: A boolean indicating whether the progress bar should be displayed as a block element. Defaults to true.
+ * @prop {string} blockHeight: The height of the block element. Defaults to "100%".
+ * @prop {number} barWidth: The width of the progress bar. Defaults to 100.
+ * @return {ReactElement} The rendered progress bar component.
+ */
 var ProgressBar = function (_a) {
     var progress = _a.progress, text = _a.text, children = _a.children, _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c, _d = _a.barWidth, barWidth = _d === void 0 ? 100 : _d;
     var genLoader = function () { return (react_1.default.createElement(styled_1.StyledLoaderWrapper, { isBlock: isBlock },

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

@@ -1,4 +1,12 @@
-export function SkeletonLoader({ style }: {
-    style: any;
-}): React.JSX.Element;
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+export interface SkeletonLoaderProps {
+    style?: React.CSSProperties;
+}
+/**
+ * @component Renders a skeleton loader component with customizable styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the skeleton loader.
+ * @return {ReactElement} The rendered skeleton loader component.
+ */
+export declare const SkeletonLoader: FunctionComponent<SkeletonLoaderProps>;

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

@@ -6,8 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonLoader = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_1 = require("./styled");
+/**
+ * @component Renders a skeleton loader component with customizable styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the skeleton loader.
+ * @return {ReactElement} The rendered skeleton loader component.
+ */
 var SkeletonLoader = function (_a) {
     var style = _a.style;
-    return react_1.default.createElement(styled_1.StyledSkeletonLoader, { style: style });
+    return (react_1.default.createElement(styled_1.StyledSkeletonLoader, { style: style }));
 };
 exports.SkeletonLoader = SkeletonLoader;

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

@@ -1 +1 @@
-export const StyledSkeletonLoader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSkeletonLoader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/LoadersAndProgress/SkeletonLoader/styled.js

@@ -31,8 +31,8 @@ exports.StyledSkeletonLoader = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../themes");
 var utilsOolib_1 = require("../../../utilsOolib");
-var load = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from { left: -100%; }\n    to { left: 100%; }\n"], ["\n    from { left: -100%; }\n    to { left: 100%; }\n"])));
-exports.StyledSkeletonLoader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    overflow: hidden;\n    position: relative;\n    background-color: ", ";\n  \n    &::before{\n      content: '';\n      display: block;\n      position: absolute;\n      left: -100%;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(to right, transparent 0%, ", " 50%, transparent 100%);\n      animation: ", " 1s cubic-bezier(0.4, 0.0, 0.2, 1);\n      animation-iteration-count:infinite;\n    }\n"], ["\n    overflow: hidden;\n    position: relative;\n    background-color: ", ";\n  \n    &::before{\n      content: '';\n      display: block;\n      position: absolute;\n      left: -100%;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(to right, transparent 0%, ", " 50%, transparent 100%);\n      animation: ", " 1s cubic-bezier(0.4, 0.0, 0.2, 1);\n      animation-iteration-count:infinite;\n    }\n"])), function (_a) {
+var load = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { left: -100%; }\n  to { left: 100%; }\n"], ["\n  from { left: -100%; }\n  to { left: 100%; }\n"])));
+exports.StyledSkeletonLoader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  overflow: hidden;\n  position: relative;\n  background-color: ", ";\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: -100%;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(to right, transparent 0%, ", " 50%, transparent 100%);\n    animation: ", " 1s cubic-bezier(0.4, 0.0, 0.2, 1);\n    animation-iteration-count: infinite;\n  }\n"], ["\n  overflow: hidden;\n  position: relative;\n  background-color: ", ";\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: -100%;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(to right, transparent 0%, ", " 50%, transparent 100%);\n    animation: ", " 1s cubic-bezier(0.4, 0.0, 0.2, 1);\n    animation-iteration-count: infinite;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors);
 }, themes_1.colors.black_opacity05, load);

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

@@ -1,4 +1,12 @@
-export function TextLoader({ style }: {
-    style: any;
-}): React.JSX.Element;
-import React from "react";
+import React, { FunctionComponent } from "react";
+export interface TextLoaderProps {
+    style?: React.CSSProperties;
+}
+/**
+ * @component Renders a text loader component with customizable styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the text loader.
+ * @return {ReactElement} The rendered text loader component.
+ */
+export declare const TextLoader: FunctionComponent<TextLoaderProps>;

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

@@ -19,9 +19,16 @@ var react_1 = __importDefault(require("react"));
 var styled_1 = require("../SkeletonLoader/styled");
 var styled_components_1 = require("styled-components");
 var utilsOolib_1 = require("../../../utilsOolib");
+/**
+ * @component Renders a text loader component with customizable styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the text loader.
+ * @return {ReactElement} The rendered text loader component.
+ */
 var TextLoader = function (_a) {
     var style = _a.style;
     var theme = (0, styled_components_1.useTheme)();
-    return react_1.default.createElement(styled_1.StyledSkeletonLoader, { style: __assign(__assign({ backgroundColor: (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors) }, (style || {})), { width: (style === null || style === void 0 ? void 0 : style.width) || "8rem", height: (style === null || style === void 0 ? void 0 : style.height) || "1.5rem" }) });
+    return (react_1.default.createElement(styled_1.StyledSkeletonLoader, { style: __assign(__assign({ backgroundColor: (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors) }, (style || {})), { width: (style === null || style === void 0 ? void 0 : style.width) || "8rem", height: (style === null || style === void 0 ? void 0 : style.height) || "1.5rem" }) }));
 };
 exports.TextLoader = TextLoader;

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

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

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

@@ -1,5 +1,23 @@
-export const StyledCircLoader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledLoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledLoaderOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledHorLoader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledHorLoadingBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface StyledCircLoaderProps {
+    diameter: number;
+    trackThickness: number;
+    invert?: boolean;
+}
+export interface StyledLoaderWrapperProps {
+    isBlock?: boolean;
+}
+export interface StyledLoaderOverlayProps {
+    blockHeight: string;
+}
+export interface StyledHorLoaderProps {
+    barWidth: number;
+}
+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>;
+export declare const StyledHorLoadingBar: import("styled-components").StyledComponent<"div", any, StyledHorLoadingBarProps, never>;

package/dist/components/LoadersAndProgress/styled.js

@@ -34,8 +34,8 @@ 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, colors = _a.theme.colors;
-    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)(colors));
+    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) {
     var isBlock = _a.isBlock;

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

@@ -1,5 +1,8 @@
-export function getTypoAndLoaderDimensions(size: any): {
-    TypoComp: import("react").FunctionComponent<import("../../Typo").TypoCompProps>;
+import { SANS_3, SANS_4_5, SANS_2 } from "../../Typo";
+export type LoaderSize = 'L' | 'S' | 'M';
+export interface DimensionResult {
+    TypoComp: typeof SANS_3 | typeof SANS_4_5 | typeof SANS_2;
     trackThickness: number;
     diameter: number;
-};
+}
+export declare const getTypoAndLoaderDimensions: (size?: LoaderSize) => DimensionResult;

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTypoAndLoaderDimensions = void 0;
 var Typo_1 = require("../../Typo");
-//defaults to M if neither are specified
 var getTypoAndLoaderDimensions = function (size) {
+    if (size === void 0) { size = 'M'; }
     switch (size) {
         case 'L':
             return { TypoComp: Typo_1.SANS_4_5, trackThickness: 10, diameter: 70 };

package/dist/components/OKELink/comps/AvatarDisplay/index.d.ts

@@ -1,8 +1,27 @@
-export function AvatarDisplay({ value, title: titleProp, style, size, invert }: {
-    value: any;
-    title: any;
-    style: any;
+import React, { FunctionComponent } from 'react';
+export interface AvatarDisplayProps {
+    value: {
+        title?: string;
+        userUploaded?: {
+            publicUrl: string;
+        }[];
+    };
+    title?: string;
+    style?: React.CSSProperties;
     size?: number;
-    invert: any;
-}): React.JSX.Element;
-import React from 'react';
+    invert?: boolean;
+}
+/**
+ * @component Renders an AvatarDisplay component with customizable text, style and user uploaded image.
+ *
+ * - The props object containing the following properties:
+ * @prop {Object} value: An object containing the title and user uploaded images.
+ * @prop {string} value.title: The title to be displayed in the AvatarDisplay.
+ * @prop {Array} value.userUploaded: An array of objects containing the public URL of the user uploaded images.
+ * @prop {string} title: The title to be displayed in the AvatarDisplay.
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the AvatarDisplay.
+ * @prop {number} size: The size of the AvatarDisplay. Defaults to 2.5.
+ * @prop {boolean} invert: A boolean indicating whether to invert the AvatarDisplay colors. Defaults to false.
+ * @return {ReactElement} The rendered AvatarDisplay component.
+ */
+export declare const AvatarDisplay: FunctionComponent<AvatarDisplayProps>;

package/dist/components/OKELink/comps/AvatarDisplay/index.js

@@ -5,15 +5,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarDisplay = void 0;
 var react_1 = __importDefault(require("react"));
-var styled_js_1 = require("./styled.js");
+var styled_1 = require("./styled");
+/**
+ * @component Renders an AvatarDisplay component with customizable text, style and user uploaded image.
+ *
+ * - The props object containing the following properties:
+ * @prop {Object} value: An object containing the title and user uploaded images.
+ * @prop {string} value.title: The title to be displayed in the AvatarDisplay.
+ * @prop {Array} value.userUploaded: An array of objects containing the public URL of the user uploaded images.
+ * @prop {string} title: The title to be displayed in the AvatarDisplay.
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the AvatarDisplay.
+ * @prop {number} size: The size of the AvatarDisplay. Defaults to 2.5.
+ * @prop {boolean} invert: A boolean indicating whether to invert the AvatarDisplay colors. Defaults to false.
+ * @return {ReactElement} The rendered AvatarDisplay component.
+ */
 var AvatarDisplay = function (_a) {
     var value = _a.value, titleProp = _a.title, style = _a.style, _b = _a.size, size = _b === void 0 ? 2.5 : _b, invert = _a.invert;
     var title = titleProp || value.title;
-    var titleInitial = title && title[0].toUpperCase();
+    var titleInitial = title ? title[0].toUpperCase() : '';
     var imageURL = (value === null || value === void 0 ? void 0 : value.userUploaded) && (value === null || value === void 0 ? void 0 : value.userUploaded[0].publicUrl);
-    return (imageURL ?
-        react_1.default.createElement(styled_js_1.StyledAvatarImg, { invert: invert, size: size, style: style, src: imageURL, alt: "profile picture" })
-        :
-            react_1.default.createElement(styled_js_1.StyledAvatarTXT, { invert: invert, size: size, style: style }, titleInitial));
+    return imageURL ? (react_1.default.createElement(styled_1.StyledAvatarImg, { invert: invert, size: size, style: style, src: imageURL, alt: "profile picture" })) : (react_1.default.createElement(styled_1.StyledAvatarTXT, { invert: invert, size: size, style: style }, titleInitial));
 };
 exports.AvatarDisplay = AvatarDisplay;

package/dist/components/OKELink/comps/AvatarDisplay/styled.d.ts

@@ -1,2 +1,8 @@
-export const StyledAvatarImg: import("styled-components").StyledComponent<"img", any, {}, never>;
-export const StyledAvatarTXT: import("styled-components").StyledComponent<"h4", any, {}, never>;
+export declare const StyledAvatarImg: import("styled-components").StyledComponent<"img", any, {
+    invert?: boolean;
+    size: number | string;
+}, never>;
+export declare const StyledAvatarTXT: import("styled-components").StyledComponent<"h4", any, {
+    invert?: boolean;
+    size: number | string;
+}, never>;

package/dist/components/OKELink/comps/AvatarDisplay/styled.js

@@ -35,7 +35,7 @@ var index_styled_1 = require("../../../Typo/index.styled");
 var greyColor80 = themes_1.colors.greyColor80, white = themes_1.colors.white;
 var commonStyle = function (_a) {
     var size = _a.size, invert = _a.invert, theme = _a.theme;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color:  ", ";\n  color: ", ";\n  \n"], ["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color:  ", ";\n  color: ", ";\n  \n"])), isNaN(size) ? size : size + 'rem', isNaN(size) ? size : size + 'rem', invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors), white);
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color: ", ";\n  color: ", ";\n"])), isNaN(size) ? size : "".concat(size, "rem"), isNaN(size) ? size : "".concat(size, "rem"), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors), white);
 };
 exports.StyledAvatarImg = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  font-size: 8px;\n"], ["\n  ", "\n  font-size: 8px;\n"])), function (_a) {
     var theme = _a.theme, invert = _a.invert, size = _a.size;
@@ -46,3 +46,19 @@ exports.StyledAvatarTXT = (0, styled_components_1.default)(index_styled_1.SANS_3
     return commonStyle({ theme: theme, invert: invert, size: size });
 });
 var templateObject_1, templateObject_2, templateObject_3;
+// const commonStyle =({size, invert, theme})=> css`
+//   width: ${isNaN(size)? size : size + 'rem'};
+//   height: ${isNaN(size)? size : size + 'rem'};
+//   border-radius: 50%;
+//   background-color:  ${invert? greyColor80 : getPrimaryColor10(theme.colors)};
+//   color: ${white};
+// `;
+// export const StyledAvatarImg = styled.img`
+//   ${({theme, invert, size})=> commonStyle({theme, invert, size})}
+//   font-size: 8px;
+// `;
+// export const StyledAvatarTXT = styled(SANS_3_STYLED)`
+//   ${({theme, invert, size})=> commonStyle({theme, invert, size})}
+//   display: inline-grid;
+//   place-items: center;
+// `;

package/dist/components/OKELink/index.d.ts

@@ -1,19 +1,21 @@
-export function OKELink({ to: _to, link, onClick, icon, iconWeight, iconAfter, text, children, invertUnderline, color, invert, disabled, className, style, avatar, iconSize, }: {
-    to: any;
-    link: any;
-    onClick: any;
-    icon: any;
-    iconWeight: any;
-    iconAfter: any;
-    text: any;
-    children: any;
-    invertUnderline: any;
-    color: any;
-    invert: any;
-    disabled: any;
-    className: any;
-    style: any;
-    avatar: any;
-    iconSize: any;
-}): React.JSX.Element;
 import React from 'react';
+import { DisplayIconProps } from '../../utils/comps/DisplayIcon';
+import { icons } from '../../icons';
+export interface OKELinkProps {
+    to?: string;
+    link?: string;
+    onClick?: (e: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => void;
+    icon?: keyof typeof icons;
+    iconWeight?: DisplayIconProps['weight'];
+    iconAfter?: keyof typeof icons;
+    text?: string;
+    children?: React.ReactNode;
+    invertUnderline?: boolean;
+    color?: string;
+    invert?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    avatar?: any;
+}
+export declare const OKELink: React.FC<OKELinkProps>;

package/dist/components/OKELink/index.js

@@ -44,73 +44,58 @@ var utilsOolib_1 = require("../../utilsOolib");
 var styled_1 = require("./styled");
 var ProfileImageInput_1 = require("../ImageInput/derivedComps/ProfileImageInput");
 var OKELink = function (_a) {
-    var _to = _a.to, link = _a.link, //link is deprecated. use to instead 
-    onClick = _a.onClick, icon = _a.icon, iconWeight = _a.iconWeight, iconAfter = _a.iconAfter, text = _a.text, children = _a.children, invertUnderline = _a.invertUnderline, color = _a.color, invert = _a.invert, disabled = _a.disabled, className = _a.className, style = _a.style, avatar = _a.avatar, // imageData // [ {...} ] OR {...}
-    //imageSize ??
-    iconSize = _a.iconSize;
+    var _to = _a.to, link = _a.link, onClick = _a.onClick, icon = _a.icon, iconWeight = _a.iconWeight, iconAfter = _a.iconAfter, text = _a.text, children = _a.children, invertUnderline = _a.invertUnderline, color = _a.color, invert = _a.invert, disabled = _a.disabled, className = _a.className, style = _a.style, avatar = _a.avatar;
     var to = link || _to;
     var theme = (0, styled_components_1.useTheme)();
     var localize = (0, utilsOolib_1.useLocale)();
-    /**
-     * if location object is passed through then its internal
-     * if string then if first character is '/' then internal. else external
-     * all other cases, return external
-     */
     var getLinkType = function (_a) {
         var to = _a.to, onClick = _a.onClick;
         if (onClick)
             return 'action';
         if (!to)
-            return 'external'; //this shouldnt exist at all. but for now, if we dont handle this we get a blank screen from footer. 
-        if (to.pathname)
-            return 'internal'; //means its a route;
-        if (to instanceof Function)
+            return 'external';
+        if (typeof to === 'object' && 'pathname' in to)
+            return 'internal';
+        if (typeof to === 'function')
             return 'internal';
         if (typeof to === 'string')
             return to.substring(0, 1) === '/' ? 'internal' : 'external';
-        //else
         return 'external';
     };
     var linkType = getLinkType({ to: to, onClick: onClick });
-    var textComp = (react_1.default.createElement(styled_1.StyledLinkText, { id: 'StyledLinkText' }, localize(children || text)));
-    var genIcon = function (icon) {
-        return react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, weight: iconWeight || "regular",
-            size: iconSize || 15,
-            color: (0, styled_1.genColor)({ color: color, theme: theme, invert: invert, disabled: disabled }) });
+    var textComp = (react_1.default.createElement(styled_1.StyledLinkText, { id: "StyledLinkText" }, localize(children || text)));
+    var genIcon = function (icon, position) {
+        return (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, weight: iconWeight || 'regular', size: 15, color: (0, styled_1.genColor)({ color: color, theme: theme, invert: invert, disabled: disabled }) }));
     };
     var genAvatar = function (avatar) {
         if (!avatar)
             return;
-        //else
         return (react_1.default.createElement("div", { style: { marginRight: '1rem', flex: '0 0 auto' } },
+            " ",
             react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: avatar === null || avatar === void 0 ? void 0 : avatar.userUploaded, imageTitle: children || text, size: 20, invert: invert })));
     };
-    var linkContents = react_1.default.createElement(react_1.Fragment, null,
+    var linkContents = (react_1.default.createElement(react_1.Fragment, null,
         genAvatar(avatar),
         icon && genIcon(icon, 'before'),
         textComp,
-        iconAfter && genIcon(iconAfter, 'after'));
-    var commonProps = {
-        color: color,
-        invert: invert,
-        disabled: disabled,
-        className: className || '',
-        invertUnderline: invertUnderline,
-        style: style
-    };
+        iconAfter && genIcon(iconAfter, 'after')));
+    var commonProps = { color: color, invert: invert, disabled: disabled, className: className || '', invertUnderline: invertUnderline, style: style };
     var genLink = function () {
         switch (linkType) {
             case 'external':
-                return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: 'a', href: !disabled ? (0, injectHttps_1.injectHttps)(to) : undefined, target: "_blank", onClick: function (e) { e.stopPropagation(); } }, commonProps), linkContents));
+                return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: 'a', href: !disabled ? (0, injectHttps_1.injectHttps)(to) : undefined, target: "_blank", onClick: function (e) {
+                        e.stopPropagation();
+                    } }, commonProps), linkContents));
             case 'action':
                 return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: 'span', onClick: function (e) {
                         e.stopPropagation();
-                        !disabled && onClick(e);
+                        !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(e));
                     } }, commonProps), linkContents));
             case 'internal':
             default:
-                //internal
-                return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: react_router_dom_1.Link, to: !disabled ? to : undefined, onClick: function (e) { e.stopPropagation(); } }, commonProps), linkContents));
+                return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: react_router_dom_1.Link, to: !disabled ? to : undefined, onClick: function (e) {
+                        e.stopPropagation();
+                    } }, commonProps), linkContents));
         }
     };
     return react_1.default.createElement(react_1.Fragment, null, genLink());

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

@@ -1,6 +1,11 @@
-export function setLinkColor({ disabled, color, invert, theme }: {
-    disabled: any;
-    color: any;
-    invert: any;
-    theme: any;
-}): any;
+import { DefaultTheme } from "styled-components";
+import { ColorsType } from "../../../themes/colors";
+export interface SetLinkColorProps {
+    disabled?: boolean;
+    color?: string;
+    invert?: boolean;
+    theme: DefaultTheme & {
+        colors: ColorsType;
+    };
+}
+export declare const setLinkColor: ({ disabled, color, invert, theme, }: SetLinkColorProps) => string;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setLinkColor = void 0;
-var themes_1 = require("../../../themes");
 var utilsOolib_1 = require("../../../utilsOolib");
+var themes_1 = require("../../../themes");
 var greyColor40 = themes_1.colors.greyColor40;
 var setLinkColor = function (_a) {
     var disabled = _a.disabled, color = _a.color, invert = _a.invert, theme = _a.theme;
@@ -12,9 +12,9 @@ var setLinkColor = function (_a) {
         case !!color:
             return color;
         case invert:
-            return (0, utilsOolib_1.getPrimaryColor40)(theme.colors);
+            return (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors);
         default:
-            return (0, utilsOolib_1.getPrimaryColorText)(theme.colors);
+            return (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors);
     }
 };
 exports.setLinkColor = setLinkColor;

package/dist/components/Tooltip/styled.js

@@ -19,7 +19,7 @@ var clipPaths = {
     right: '100% 0%, 50% 47%, 50% 52%, 100% 100%',
     left: '0% 0%, 50% 47%, 50% 52%, 0% 100%',
 };
-exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n  text-align: left;\n  cursor: pointer;\n  width: 100%;\n"], ["\n  position: relative;\n  width: fit-content;\n  text-align: left;\n  cursor: pointer;\n  width: 100%;\n"])));
+exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n  text-align: left;\n  cursor: pointer;\n  width: inherit;\n"], ["\n  position: relative;\n  width: fit-content;\n  text-align: left;\n  cursor: pointer;\n  width: inherit;\n"])));
 exports.StyledTooltipBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  z-index: ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap: break-word;\n"], ["\n  display: ", ";\n  z-index: ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap: break-word;\n"])), function (props) { return (props.show ? "block" : "none"); }, function (props) { return (props.show ? 5000000 : -5); }, (0, mixins_1.transition)("opacity 0.1s"), function (props) { return (props.invert ? greyColor10 : greyColor100); }, function (props) { return (props.invert ? greyColor100 : white); }, greyColor15, function (_a) {
     var position = _a.position, fixPos = _a.fixPos;
     return (0, util_1.positionTooltip)({ position: position, fixPos: fixPos });

package/dist/globalStyles/globalVariables.js

@@ -31,6 +31,6 @@ exports.globalLightboxStyle = (0, styled_components_1.css)(templateObject_4 || (
 }, mixins_1.boxShadow1);
 exports.globalHoverOnWhiteBG = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, mixins_1.transition)('background-color'), function (_a) {
     var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
+    return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor5;
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/icons/index.d.ts

@@ -109,7 +109,6 @@ export namespace icons {
     export { SquareHalf };
     export { SquareHalfBottom };
     export { MagicWand };
-    export { CrownSimple };
     export { OkeGoogleIcon };
     export { LetterH };
     export { IndexIcon };
@@ -281,7 +280,6 @@ import { SlackLogo } from 'phosphor-react';
 import { SquareHalf } from 'phosphor-react';
 import { SquareHalfBottom } from 'phosphor-react';
 import { MagicWand } from 'phosphor-react';
-import { CrownSimple } from 'phosphor-react';
 import { OkeGoogleIcon } from "./custom";
 import { LetterH } from "./custom";
 import { IndexIcon } from "./custom";

package/dist/icons/index.js

@@ -114,7 +114,6 @@ exports.icons = {
     SquareHalf: phosphor_react_1.SquareHalf,
     SquareHalfBottom: phosphor_react_1.SquareHalfBottom,
     MagicWand: phosphor_react_1.MagicWand,
-    CrownSimple: phosphor_react_1.CrownSimple,
     //custom
     OkeGoogleIcon: custom_1.OkeGoogleIcon,
     LetterH: custom_1.LetterH,

package/dist/interfaces/index.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { DefaultTheme } from "styled-components";
+export interface OKFTheme extends DefaultTheme {
+    ENV?: string;
+    localize?: (text: ReactNode) => ReactNode;
+}

package/dist/interfaces/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/stories/ActionMenu.stories.d.ts

@@ -1,167 +1,117 @@
 /// <reference types="mdx" />
-declare namespace _default {
-    let title: string;
-    namespace argTypes {
-        namespace ButtonComp {
-            let name: string;
-            let options: string[];
-            namespace mapping {
-                let Primary: string;
-                let Secondary: string;
-                let Ghost: string;
-            }
-            namespace control {
-                let type: string;
-            }
-            let defaultValue: string;
-        }
-        namespace buttonSize {
-            let name_1: string;
-            export { name_1 as name };
-            let options_1: string[];
-            export { options_1 as options };
-            export namespace mapping_1 {
-                let Small: string;
-                let Medium: string;
-            }
-            export { mapping_1 as mapping };
-            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 };
-        }
-        namespace icon {
-            let name_2: string;
-            export { name_2 as name };
-            export { availableIcons as options };
-            export namespace control_2 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_2 as control };
-            let defaultValue_2: string;
-            export { defaultValue_2 as defaultValue };
-        }
-        namespace iconSize {
-            let name_3: string;
-            export { name_3 as name };
-            let options_2: string[];
-            export { options_2 as options };
-            export namespace mapping_2 {
-                let Small_1: string;
-                export { Small_1 as Small };
-                let Medium_1: string;
-                export { Medium_1 as Medium };
-            }
-            export { mapping_2 as mapping };
-            export namespace control_3 {
-                let type_3: string;
-                export { type_3 as type };
-            }
-            export { control_3 as control };
-            let defaultValue_3: string;
-            export { defaultValue_3 as defaultValue };
-        }
-        namespace align {
-            let name_4: string;
-            export { name_4 as name };
-            let options_3: string[];
-            export { options_3 as options };
-            export namespace control_4 {
-                let type_4: string;
-                export { type_4 as type };
-            }
-            export { control_4 as control };
-            let defaultValue_4: string;
-            export { defaultValue_4 as defaultValue };
-        }
-        namespace optionIcon1 {
-            let name_5: string;
-            export { name_5 as name };
-            export { availableIcons as options };
-            export namespace control_5 {
-                let type_5: string;
-                export { type_5 as type };
-            }
-            export { control_5 as control };
-            let defaultValue_5: string;
-            export { defaultValue_5 as defaultValue };
-        }
-        namespace optionIcon2 {
-            let name_6: string;
-            export { name_6 as name };
-            export { availableIcons as options };
-            export namespace control_6 {
-                let type_6: string;
-                export { type_6 as type };
-            }
-            export { control_6 as control };
-            let defaultValue_6: string;
-            export { defaultValue_6 as defaultValue };
-        }
-        namespace optionIcon3 {
-            let name_7: string;
-            export { name_7 as name };
-            export { availableIcons as options };
-            export namespace control_7 {
-                let type_7: string;
-                export { type_7 as type };
-            }
-            export { control_7 as control };
-            let defaultValue_7: string;
-            export { defaultValue_7 as defaultValue };
-        }
-        namespace action1 {
-            let name_8: string;
-            export { name_8 as name };
-        }
-        namespace action2 {
-            let name_9: string;
-            export { name_9 as name };
-        }
-        namespace action3 {
-            let name_10: string;
-            export { name_10 as name };
-        }
-    }
-    namespace args {
-        let ButtonComp_1: string;
-        export { ButtonComp_1 as ButtonComp };
-        let buttonSize_1: string;
-        export { buttonSize_1 as buttonSize };
-        let icon_1: string;
-        export { icon_1 as icon };
-        let iconSize_1: string;
-        export { iconSize_1 as iconSize };
-        let action1_1: string;
-        export { action1_1 as action1 };
-        let optionIcon1_1: string;
-        export { optionIcon1_1 as optionIcon1 };
-        let action2_1: string;
-        export { action2_1 as action2 };
-        let optionIcon2_1: string;
-        export { optionIcon2_1 as optionIcon2 };
-        let action3_1: string;
-        export { action3_1 as action3 };
-        let optionIcon3_1: string;
-        export { optionIcon3_1 as optionIcon3 };
-        export let invert: boolean;
-        let align_1: string;
-        export { align_1 as align };
-        export let popOutOfOverflowHiddenParent: boolean;
-        export let tooltip: boolean;
-    }
-    namespace parameters {
-        namespace docs {
-            export { ActionMenuDocs as page };
-        }
-    }
-}
-export default _default;
-export function ActionMenu(args: any): React.JSX.Element;
-declare const availableIcons: string[];
-import ActionMenuDocs from './ActionMenu.mdx';
 import React from "react";
+import ActionMenuDocs from './ActionMenu.mdx';
+declare const _default: {
+    title: string;
+    argTypes: {
+        ButtonComp: {
+            name: string;
+            options: string[];
+            mapping: {
+                Primary: string;
+                Secondary: string;
+                Ghost: string;
+            };
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
+        buttonSize: {
+            name: string;
+            options: string[];
+            mapping: {
+                Small: string;
+                Medium: string;
+            };
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
+        icon: {
+            name: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
+        iconSize: {
+            name: string;
+            options: string[];
+            mapping: {
+                Small: string;
+                Medium: string;
+            };
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
+        align: {
+            name: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
+        optionIcon1: {
+            name: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
+        optionIcon2: {
+            name: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
+        optionIcon3: {
+            name: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
+        action1: {
+            name: string;
+        };
+        action2: {
+            name: string;
+        };
+        action3: {
+            name: string;
+        };
+    };
+    args: {
+        ButtonComp: string;
+        buttonSize: string;
+        icon: string;
+        iconSize: string;
+        action1: string;
+        optionIcon1: string;
+        action2: string;
+        optionIcon2: string;
+        action3: string;
+        optionIcon3: string;
+        invert: boolean;
+        align: string;
+        popOutOfOverflowHiddenParent: boolean;
+        tooltip: boolean;
+    };
+    parameters: {
+        docs: {
+            page: typeof ActionMenuDocs;
+        };
+    };
+};
+export default _default;
+export declare const ActionMenu: (args: any) => React.JSX.Element;

package/dist/stories/ActionMenu.stories.js

@@ -120,15 +120,16 @@ exports.default = {
 var ActionMenu = function (args) {
     args.actions = [
         __assign({ display: args.action1 }, (args.optionIcon1 ? { icon: args.optionIcon1, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
-        __assign({ display: args.action2 }, (args.optionIcon2 ? { icon: args.optionIcon2, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
+        __assign({ display: args.action2 }, (args.optionIcon2 ? { icon: args.optionIcon2, disabled: true, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
         __assign({ display: args.action3 }, (args.optionIcon3 ? { icon: args.optionIcon3, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
     ];
     args.M = args.buttonSize === 'M';
+    console.log({ nfaknjfasfs: args.invert });
     return (react_1.default.createElement("div", { style: args.popOutOfOverflowHiddenParent
             ? { border: '2px solid lightgrey', height: '90vh', overflow: 'scroll' }
             : {} },
         react_1.default.createElement("div", { style: { height: '1000px' } },
-            react_1.default.createElement("div", { style: __assign({ padding: '4rem 40rem', background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.white }, (args.popOutOfOverflowHiddenParent
+            react_1.default.createElement("div", { style: __assign({ padding: '10rem 40rem', background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.white }, (args.popOutOfOverflowHiddenParent
                     ? {
                         background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.greyColor5,
                         height: '50px',
@@ -136,6 +137,6 @@ var ActionMenu = function (args) {
                         overflow: "hidden"
                     }
                     : {})) },
-                react_1.default.createElement(ActionMenu_1.ActionMenu, __assign({}, args, { storybookPreview: true }))))));
+                react_1.default.createElement(ActionMenu_1.ActionMenu, __assign({ actions: args.actions }, args))))));
 };
 exports.ActionMenu = ActionMenu;

package/dist/utils/comps/DisplayIcon/index.d.ts

@@ -1,7 +1,20 @@
-export function DisplayIcon({ icon, size, color, weight }: {
-    icon: any;
-    size: any;
-    color: any;
-    weight?: string;
-}): React.JSX.Element;
-import React from 'react';
+import { FunctionComponent } from 'react';
+import { icons } from '../../../icons';
+export interface DisplayIconProps {
+    icon: keyof typeof icons;
+    size: number;
+    color: string;
+    weight?: 'bold' | 'regular';
+}
+/**
+ * @component Renders an icon component with customizable size, color, and weight.
+ *
+ * - The props object containing the following properties:
+ * @prop {keyof typeof icons} icon: The name of the icon to be rendered.
+ * @prop {number} size: The size of the icon in pixels.
+ * @prop {string} color: The color of the icon.
+ * @prop {'bold' | 'regular'} weight: The weight of the icon font. Defaults to "bold".
+ * @return {ReactElement} The rendered icon component.
+ */
+declare const DisplayIcon: FunctionComponent<DisplayIconProps>;
+export { DisplayIcon };

package/dist/utils/comps/DisplayIcon/index.js

@@ -6,8 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DisplayIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../icons");
+/**
+ * @component Renders an icon component with customizable size, color, and weight.
+ *
+ * - The props object containing the following properties:
+ * @prop {keyof typeof icons} icon: The name of the icon to be rendered.
+ * @prop {number} size: The size of the icon in pixels.
+ * @prop {string} color: The color of the icon.
+ * @prop {'bold' | 'regular'} weight: The weight of the icon font. Defaults to "bold".
+ * @return {ReactElement} The rendered icon component.
+ */
 var DisplayIcon = function (_a) {
-    var icon = _a.icon, size = _a.size, color = _a.color, _b = _a.weight, weight = _b === void 0 ? "bold" : _b;
+    var icon = _a.icon, size = _a.size, color = _a.color, _b = _a.weight, weight = _b === void 0 ? 'bold' : _b;
     var IconComp = icons_1.icons[icon];
     return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: weight }));
 };

package/dist/utilsOolib/index.js

@@ -11,8 +11,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPrimaryColorText = exports.getPrimaryColor100 = exports.getPrimaryColor40 = exports.getPrimaryColor10 = exports.useLocale = void 0;
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = require("styled-components");
 var colors_1 = require("../themes/colors");
+var styled_components_1 = require("styled-components");
 var primaryColor10 = colors_1.colors.primaryColor10, primaryColor40 = colors_1.colors.primaryColor40, primaryColor100 = colors_1.colors.primaryColor100, primaryColorText = colors_1.colors.primaryColorText;
 /**
  * Generates a function that localizes a value based on the current theme.
@@ -22,7 +22,6 @@ var primaryColor10 = colors_1.colors.primaryColor10, primaryColor40 = colors_1.c
  */
 var useLocale = function () {
     var currentTheme = (0, styled_components_1.useTheme)();
-    ;
     var localize = function (value) {
         // Check if the value is a React component or a JavaScript object
         if (react_1.default.isValidElement(value) || typeof value === 'object') {

package/package.json

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