oolib 2.110.1 → 2.111.0

package/dist/components/LegendRadioCheckList/LegendCheckboxList/index.d.ts

@@ -0,0 +1,8 @@
+export function LegendCheckboxList({ id, options, handleChangeOn, value, onChange, }: {
+    id: any;
+    options: any;
+    handleChangeOn?: string;
+    value: any;
+    onChange: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/LegendRadioCheckList/LegendCheckboxList/index.js

@@ -0,0 +1,49 @@
+"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.LegendCheckboxList = void 0;
+var react_1 = __importDefault(require("react"));
+var LegendButton_1 = require("../LegendButton");
+var styled_1 = require("../LegendRadioList/styled");
+var LegendCheckboxList = function (_a) {
+    var id = _a.id, options = _a.options, _b = _a.handleChangeOn, handleChangeOn = _b === void 0 ? "click" : _b, //alt = 'click'
+    value = _a.value, onChange = _a.onChange;
+    var handleChange = function (d, isChecked) {
+        var updatedValue = isChecked
+            ? __spreadArray(__spreadArray([], value, true), [d], false) : value.filter(function (item) { return item.value !== d.value; });
+        onChange(id, updatedValue);
+    };
+    return (react_1.default.createElement(styled_1.StyledLegend, null, options.map(function (d) { return (react_1.default.createElement(LegendButton_1.LegendButton, __assign({ option: d, isActive: value.some(function (item) { return item.value === d.value; }) }, (handleChangeOn === "hover"
+        ? {
+            onMouseOver: function () { return handleChange(d, true); },
+            onMouseOut: function () { return handleChange(d, false); },
+        }
+        : {
+            onClick: function () {
+                return handleChange(d, !value.some(function (item) { return item.value === d.value; }));
+            },
+        })))); })));
+};
+exports.LegendCheckboxList = LegendCheckboxList;

package/dist/components/LegendRadioCheckList/LegendRadioList/index.d.ts

@@ -0,0 +1,8 @@
+export function LegendRadioList({ id, options, handleChangeOn, value, onChange, }: {
+    id: any;
+    options: any;
+    handleChangeOn?: string;
+    value: any;
+    onChange: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/LegendRadioCheckList/LegendRadioList/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LegendRadioList = void 0;
+var react_1 = __importDefault(require("react"));
+var LegendButton_1 = require("../LegendButton");
+var styled_1 = require("./styled");
+var LegendRadioList = function (_a) {
+    var id = _a.id, options = _a.options, _b = _a.handleChangeOn, handleChangeOn = _b === void 0 ? "click" : _b, value = _a.value, onChange = _a.onChange;
+    var handleChange = function (d) { return onChange(id, d); };
+    return (react_1.default.createElement(styled_1.StyledLegend, null, options.map(function (d) { return (react_1.default.createElement(LegendButton_1.LegendButton, __assign({ option: d, isActive: (value === null || value === void 0 ? void 0 : value.value) === d.value }, (handleChangeOn === 'hover'
+        ? {
+            onMouseOver: function () { return handleChange(d); },
+            onTouchStart: function () { return handleChange(d); },
+            onMouseOut: function () { return handleChange(undefined); },
+            onTouchEnd: function () { return handleChange(undefined); }
+        } : {
+        onClick: function () { return handleChange(d); }
+    })))); })));
+};
+exports.LegendRadioList = LegendRadioList;

package/dist/components/LegendRadioCheckList/LegendRadioList/styled.d.ts

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

package/dist/components/LegendRadioCheckList/LegendRadioList/styled.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledLegend = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledLegend = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    margin-top: -1rem;\n    margin-bottom: -1rem;\n\n"], ["\n    display: flex;\n    flex-direction: column;\n    margin-top: -1rem;\n    margin-bottom: -1rem;\n\n"])));
+var templateObject_1;

package/dist/components/Lexical/Plugins/TableCellResizer/index.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -300,21 +289,7 @@ function TableCellResizerPlugin(_a) {
     var isEditable = useLexicalEditable();
     return (0, react_1.useMemo)(function () {
         return isEditable
-            ? (0, react_dom_1.createPortal)(React.createElement(TableCellResizer, __assign({}, {
-                $getTableColumnIndexFromTableCellNode: $getTableColumnIndexFromTableCellNode,
-                $getTableNodeFromLexicalNodeOrThrow: $getTableNodeFromLexicalNodeOrThrow,
-                $getTableRowIndexFromTableCellNode: $getTableRowIndexFromTableCellNode,
-                $isTableCellNode: $isTableCellNode,
-                $isTableRowNode: $isTableRowNode,
-                $isTableSelection: $isTableSelection,
-                getDOMCellFromTarget: getDOMCellFromTarget,
-                $getNearestNodeFromDOMNode: $getNearestNodeFromDOMNode,
-                $getSelection: $getSelection,
-                COMMAND_PRIORITY_HIGH: COMMAND_PRIORITY_HIGH,
-                SELECTION_CHANGE_COMMAND: SELECTION_CHANGE_COMMAND,
-                TableCellNode: TableCellNode,
-                editor: editor
-            })), document.body)
+            ? (0, react_dom_1.createPortal)(React.createElement(TableCellResizer, { $getTableColumnIndexFromTableCellNode: $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow: $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode: $getTableRowIndexFromTableCellNode, $isTableCellNode: $isTableCellNode, $isTableRowNode: $isTableRowNode, $isTableSelection: $isTableSelection, getDOMCellFromTarget: getDOMCellFromTarget, $getNearestNodeFromDOMNode: $getNearestNodeFromDOMNode, $getSelection: $getSelection, COMMAND_PRIORITY_HIGH: COMMAND_PRIORITY_HIGH, SELECTION_CHANGE_COMMAND: SELECTION_CHANGE_COMMAND, TableCellNode: TableCellNode, editor: editor }), document.body)
             : null;
     }, [editor, isEditable]);
 }

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

@@ -33,7 +33,7 @@ var styled_1 = require("../styled");
 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 renderLoaderDiv = function () { return react_1.default.createElement(LoaderDiv, __assign({}, __assign(__assign({}, props), { isBlock: isBlock, size: size }))); };
+    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;
@@ -43,6 +43,6 @@ var LoaderDiv = function (_a) {
     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, __assign({}, { diameter: diameter, trackThickness: trackThickness, invert: invert })),
+        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/SkeletonLoader/index.d.ts

@@ -1,4 +1,4 @@
 export function SkeletonLoader({ style }: {
     style: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

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

@@ -1,2 +1,2 @@
 export function MarginLeftRightMinus20(props: any): React.JSX.Element;
-import React from "react";
+import React from 'react';

package/dist/components/Modals/Modal/styled.d.ts

@@ -1,5 +1,5 @@
-export const StyledModalLargeBg: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
-export const StyledModalLargeBgColor: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export const StyledModalLargeBg: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export const StyledModalLargeBgColor: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 export const StyledModalLargeContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledModalLargeHeader: import("styled-components").StyledComponent<"header", any, {}, never>;
 export const StyledModalBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Modals/ModalConfirm/styled.d.ts

@@ -1,5 +1,5 @@
-export const StyledModalConfirm: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
-export const StyledModalConfirmContentWrapper: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export const StyledModalConfirm: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export const StyledModalConfirmContentWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 export const StyledModalConfirmContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledModalConfirmClose: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledModalConfirmContentSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,8 @@
+export function AvatarDisplay({ value, title: titleProp, style, size, invert }: {
+    value: any;
+    title: any;
+    style: any;
+    size?: number;
+    invert: any;
+}): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 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 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));
+};
+exports.AvatarDisplay = AvatarDisplay;

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

@@ -0,0 +1,2 @@
+export const StyledAvatarImg: import("styled-components").StyledComponent<"img", any, {}, never>;
+export const StyledAvatarTXT: import("styled-components").StyledComponent<"h4", any, {}, never>;

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

@@ -0,0 +1,48 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledAvatarTXT = exports.StyledAvatarImg = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var utilsOolib_1 = require("../../../../utilsOolib");
+var themes_1 = require("../../../../themes");
+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);
+};
+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;
+    return commonStyle({ theme: theme, invert: invert, size: size });
+});
+exports.StyledAvatarTXT = (0, styled_components_1.default)(index_styled_1.SANS_3_STYLED)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: inline-grid;\n  place-items: center;\n"], ["\n  ", "\n  display: inline-grid;\n  place-items: center;\n"])), function (_a) {
+    var theme = _a.theme, invert = _a.invert, size = _a.size;
+    return commonStyle({ theme: theme, invert: invert, size: size });
+});
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -16,4 +16,4 @@ export function OKELink({ to: _to, link, onClick, icon, iconWeight, iconAfter, t
     avatar: any;
     iconSize: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

package/dist/components/OKELink/index.js

@@ -74,12 +74,9 @@ var OKELink = function (_a) {
     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, __assign({}, {
-            icon: icon,
-            weight: iconWeight || "regular",
+        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 })
-        }));
+            color: (0, styled_1.genColor)({ color: color, theme: theme, invert: invert, disabled: disabled }) });
     };
     var genAvatar = function (avatar) {
         if (!avatar)

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

@@ -0,0 +1,6 @@
+export function setLinkColor({ disabled, color, invert, theme }: {
+    disabled: any;
+    color: any;
+    invert: any;
+    theme: any;
+}): any;

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

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

package/dist/components/PDFInput/comps/PDFActions.d.ts

@@ -4,4 +4,4 @@ export function PDFActions({ id, inputRef, parentOnChange, isInRTE }: {
     parentOnChange: any;
     isInRTE: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

package/dist/components/PDFInput/index.js

@@ -108,7 +108,7 @@ function PDFInput(_a) {
                 react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Pdf", invert: invert }))) : (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement("div", { style: { position: 'relative' }, key: i },
                 react_1.default.createElement(PDFEmbed_1.default, { filePath: d.publicUrl, fileName: d.originalFilename, fileID: d.generation }),
                 react_1.default.createElement(StyledActionsButtonWrapper, null,
-                    react_1.default.createElement(PDFActions_1.PDFActions, __assign({}, { id: id, isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange }))))); })),
+                    react_1.default.createElement(PDFActions_1.PDFActions, { id: id, isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange })))); })),
         react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
             , accept: "application/pdf", ref: inputRef, style: { display: "none" }, id: "pdfField", onChange: function (v) { return handleUpload(v.target.files); } })));
 }

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

@@ -39,4 +39,4 @@ export function PaddingTop35(props: any): React.JSX.Element;
 export function PaddingTop40(props: any): React.JSX.Element;
 export function PaddingTop45(props: any): React.JSX.Element;
 export function PaddingTop50(props: any): React.JSX.Element;
-import React from "react";
+import React from 'react';

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

@@ -1,6 +1,20 @@
-export function PercentCompletedPie({ percent, size, label }: {
-    percent: any;
-    size?: number;
-    label: any;
-}): React.JSX.Element;
 import React from "react";
+export interface PercentCompletedPieProps {
+    percent: number;
+    size?: number;
+    label?: {
+        show: boolean;
+        suffix?: string;
+    };
+}
+/**
+ * @component Renders a percent completed pie component with customizable size, label, and animation.
+ *
+ * - The props object containing the following properties:
+ * @prop {number} percent: The percentage to be displayed in the pie.
+ * @prop {number} [size] The size of the pie in pixels. Defaults to 24.
+ * @prop {{show: boolean, suffix?: string}} [label] An object containing a boolean indicating whether to show the percentage and an optional suffix string. e.g. {show: true, suffix: '%'}
+ * @prop {React.ReactNode} [children] The content to be rendered inside the tooltip target element.
+ * @return {ReactElement} The rendered percent completed pie component.
+ */
+export declare const PercentCompletedPie: React.FunctionComponent<PercentCompletedPieProps>;

package/dist/components/PercentCompletedPie/index.js

@@ -7,18 +7,28 @@ exports.PercentCompletedPie = void 0;
 var react_1 = __importDefault(require("react"));
 var Typo_1 = require("../Typo");
 var styled_1 = require("./styled");
-function PercentCompletedPie(_a) {
+/**
+ * @component Renders a percent completed pie component with customizable size, label, and animation.
+ *
+ * - The props object containing the following properties:
+ * @prop {number} percent: The percentage to be displayed in the pie.
+ * @prop {number} [size] The size of the pie in pixels. Defaults to 24.
+ * @prop {{show: boolean, suffix?: string}} [label] An object containing a boolean indicating whether to show the percentage and an optional suffix string. e.g. {show: true, suffix: '%'}
+ * @prop {React.ReactNode} [children] The content to be rendered inside the tooltip target element.
+ * @return {ReactElement} The rendered percent completed pie component.
+ */
+var PercentCompletedPie = function (_a) {
     var percent = _a.percent, _b = _a.size, size = _b === void 0 ? 24 : _b, label = _a.label;
     var perUnit = 1.8;
-    var transform = "rotate(".concat(parseInt(percent) * perUnit, "deg)");
+    var transform = "rotate(".concat(parseInt(String(percent)) * perUnit, "deg)");
     return (react_1.default.createElement(styled_1.StyledContainer, null,
         react_1.default.createElement(styled_1.StyledWrapper, { size: size },
-            react_1.default.createElement(styled_1.StyledCircle, { size: size },
+            react_1.default.createElement(styled_1.StyledCircle, null,
                 react_1.default.createElement(styled_1.StyledMask, { size: size, transform: transform },
                     react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill" })),
                 react_1.default.createElement(styled_1.StyledMask, { size: size, className: "mask half" },
                     react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill" }),
                     react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill fix" })))),
-        (label === null || label === void 0 ? void 0 : label.show) && react_1.default.createElement(Typo_1.LABEL, null, "".concat(percent).concat(label.suffix || ''))));
-}
+        (label === null || label === void 0 ? void 0 : label.show) && (react_1.default.createElement(Typo_1.LABEL, null, "".concat(percent).concat(label.suffix || '')))));
+};
 exports.PercentCompletedPie = PercentCompletedPie;

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

@@ -1,5 +1,17 @@
-export const StyledContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledCircle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledMask: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledFill: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledWrapperProps {
+    size: number;
+}
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, StyledWrapperProps, never>;
+export declare const StyledCircle: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledMaskProps {
+    size: number;
+    transform?: string;
+}
+export declare const StyledMask: import("styled-components").StyledComponent<"div", any, StyledMaskProps, never>;
+interface StyledFillProps {
+    size: number;
+    transform?: string;
+}
+export declare const StyledFill: import("styled-components").StyledComponent<"div", any, StyledFillProps, never>;
+export {};

package/dist/components/PercentCompletedPie/styled.js

@@ -11,21 +11,41 @@ exports.StyledFill = exports.StyledMask = exports.StyledCircle = exports.StyledW
 var styled_components_1 = __importDefault(require("styled-components"));
 var utilsOolib_1 = require("../../utilsOolib");
 exports.StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n"])));
-exports.StyledWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 50%;\n  ", "\n  background-color: ", ";\n"], ["\n  border-radius: 50%;\n  ", "\n  background-color: ", ";\n"])), function (_a) {
+exports.StyledWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"], ["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (_a) {
     var size = _a.size;
-    return "\n    width: ".concat(size, "px;\n    height: ").concat(size, "px;  \n  ");
+    return "".concat(size, "px");
+}, function (_a) {
+    var size = _a.size;
+    return "".concat(size, "px");
 }, function (_a) {
     var theme = _a.theme;
     return (0, utilsOolib_1.getPrimaryColor40)(theme.colors);
 });
 exports.StyledCircle = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.StyledMask = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  position: absolute;\n  border-radius: 50%;\n  \n"], ["\n  ", "\n  position: absolute;\n  border-radius: 50%;\n  \n"])), function (_a) {
+exports.StyledMask = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  height: ", ";\n  clip: rect(\n    0px,\n    ", ",\n    ", ", \n    ", " \n  );\n  position: absolute;\n  border-radius: 50%;\n"], ["\n  ", "\n  width: ", ";\n  height: ", ";\n  clip: rect(\n    0px,\n    ", ",\n    ", ", \n    ", " \n  );\n  position: absolute;\n  border-radius: 50%;\n"])), function (_a) {
     var size = _a.size, transform = _a.transform;
-    return "\n    ".concat(transform ? "transform: ".concat(transform) : '', ";\n    width: ").concat(size, "px;\n    height: ").concat(size, "px;  \n    clip: rect(0px, ").concat(size, "px, ").concat(size, "px, ").concat((parseFloat(size) / 2) + 'px', ");\n  ");
+    return transform
+        ? "transform: ".concat(transform, ";")
+        : '';
+}, function (_a) {
+    var size = _a.size;
+    return "".concat(size, "px");
+}, function (_a) {
+    var size = _a.size;
+    return "".concat(size, "px");
+}, function (_a) {
+    var size = _a.size;
+    return "".concat(size, "px");
+}, function (_a) {
+    var size = _a.size;
+    return "".concat(size, "px");
+}, function (_a) {
+    var size = _a.size;
+    return "".concat(parseFloat(size.toString()) / 2 + 'px');
 });
-exports.StyledFill = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n   border-radius: 50%;\n  position: absolute;\n  background-color: ", ";\n"], ["\n  ", "\n   border-radius: 50%;\n  position: absolute;\n  background-color: ", ";\n"])), function (_a) {
+exports.StyledFill = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  border-radius: 50%;\n  position: absolute;\n  background-color: ", ";\n"], ["\n  ", "\n  border-radius: 50%;\n  position: absolute;\n  background-color: ", ";\n"])), function (_a) {
     var size = _a.size, transform = _a.transform;
-    return "\n    transform: ".concat(transform, ";\n    width: ").concat(size, "px;\n    height: ").concat(size, "px;  \n    clip: rect(0px, ").concat((parseFloat(size) / 2) + 'px', ", ").concat(size, "px, 0px);\n  ");
+    return "transform: ".concat(transform, ";\n     width: ").concat(size, "px;\n     height: ").concat(size, "px;\n     clip: rect(\n        ").concat(parseFloat(size.toString()) / 2 + 'px', ",\n       ").concat(size, "px,\n       0px\n     );");
 }, function (_a) {
     var theme = _a.theme;
     return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);

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

@@ -0,0 +1,4 @@
+export function Playground({ invert }: {
+    invert: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/Playground/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Playground = void 0;
+var react_1 = __importDefault(require("react"));
+var App = function (_a) {
+    var invert = _a.invert;
+    return (react_1.default.createElement(react_1.default.Fragment, null));
+};
+var Playground = function (_a) {
+    var invert = _a.invert;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(App, { invert: invert })));
+};
+exports.Playground = Playground;

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

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

package/dist/components/Playground/styled.js

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledChild = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var globalVariables_1 = require("../../globalStyles/globalVariables");
+exports.StyledChild = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 30rem;\n  ", "\n"], ["\n  width: 30rem;\n  ", "\n"])), globalVariables_1.globalLightboxStyle);
+var templateObject_1;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton/index.d.ts

@@ -8,4 +8,4 @@ export function CheckboxButton({ id, className, isSelected: _isSelected, value,
     invert: any;
     S: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton/index.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -31,7 +20,7 @@ var CheckboxButton = function (_a) {
     var id = _a.id, className = _a.className, _isSelected = _a.isSelected, value = _a.value, //can be used interchangibly
     onChange = _a.onChange, disabled = _a.disabled, invert = _a.invert, S = _a.S;
     var isSelected = (_b = _isSelected !== null && _isSelected !== void 0 ? _isSelected : value) !== null && _b !== void 0 ? _b : false;
-    return (react_1.default.createElement(styled_1.StyledCheckbox, __assign({ onClick: function () { return onChange && onChange(id, !isSelected); } }, { className: className, isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected &&
+    return (react_1.default.createElement(styled_1.StyledCheckbox, { onClick: function () { return onChange && onChange(id, !isSelected); }, className: className, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, isSelected &&
         react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16, style: { flexShrink: 0 } })));
 };
 exports.CheckboxButton = CheckboxButton;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.d.ts

@@ -8,4 +8,4 @@ export function CheckboxInput({ option, onClick, S, inputStyle, value, invert, d
     disabled: any;
     rightWrongResult: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';