oolib 2.115.0 → 2.117.0

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

@@ -1,14 +1,47 @@
-export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, CustomSelectComp, storybookPreview, }: {
+import React, { FunctionComponent, ReactNode } from "react";
+import * as ButtonComps from "../Buttons";
+export interface ActionItem {
+    display: string;
     icon?: string;
-    invert: any;
-    actions: any;
-    align?: string;
-    iconSize?: string;
-    M: any;
-    ButtonComp?: string;
-    setShowActions: any;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    confirmAction?: {
+        title?: string;
+        message?: string;
+        onConfirm?: () => void;
+    };
+}
+export interface CustomSelectCompProps {
+    active: boolean;
+    onClick: () => void;
+}
+export interface ActionMenuProps {
+    icon?: string;
+    invert?: boolean;
+    actions: ActionItem[];
+    align?: "left" | "right" | "center";
+    iconSize?: "S" | "M";
+    M?: boolean;
+    ButtonComp?: keyof typeof ButtonComps;
+    setShowActions?: React.Dispatch<React.SetStateAction<boolean>>;
     popOutOfOverflowHiddenParent?: boolean;
-    CustomSelectComp: any;
-    storybookPreview: any;
-}): React.JSX.Element;
-import React from "react";
+    CustomSelectComp?: ReactNode | FunctionComponent<CustomSelectCompProps>;
+    storybookPreview?: boolean;
+}
+/**
+ * @component Renders an action menu component with customizable text and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} icon: The name of the icon to be displayed. Defaults to "DotsThree".
+ * @prop {boolean} invert: A boolean indicating whether to invert the action menu colors. Defaults to false.
+ * @prop {ActionItem[]} actions: An array of action items to be displayed in the action menu.
+ * @prop {"left" | "right" | "center"} align: The alignment of the action menu relative to its parent element. Defaults to "right".
+ * @prop {"S" | "M"} iconSize: The size of the icon. Defaults to "S".
+ * @prop {boolean} M: A boolean indicating whether to use the medium sized buttons. Defaults to false.
+ * @prop {keyof typeof ButtonComps} ButtonComp: The name of the button component to use for each action item. Defaults to "ButtonGhost".
+ * @prop {React.Dispatch<React.SetStateAction<boolean>>} setShowActions: A callback function to set the expanded state of the action menu.
+ * @prop {boolean} popOutOfOverflowHiddenParent: A boolean indicating whether the action menu should pop out of an overflow:hidden parent element. Defaults to false.
+ * @prop {React.ReactNode | React.FunctionComponent<CustomSelectCompProps>} CustomSelectComp: A custom select component to use instead of the default select component.
+ * @prop {boolean} storybookPreview: A boolean indicating whether the component is being rendered in storybook. Defaults to false.
+ * @return {ReactElement} The rendered action menu component.
+ */
+export declare const ActionMenu: FunctionComponent<ActionMenuProps>;

package/dist/components/ActionMenu/index.js

@@ -44,22 +44,35 @@ var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflow
 var styled_1 = require("./styled");
 var ModalConfirmAction_1 = require("../Modals/derivedComps/ModalConfirmAction");
 var react_dom_1 = require("react-dom");
-//
+/**
+ * @component Renders an action menu component with customizable text and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} icon: The name of the icon to be displayed. Defaults to "DotsThree".
+ * @prop {boolean} invert: A boolean indicating whether to invert the action menu colors. Defaults to false.
+ * @prop {ActionItem[]} actions: An array of action items to be displayed in the action menu.
+ * @prop {"left" | "right" | "center"} align: The alignment of the action menu relative to its parent element. Defaults to "right".
+ * @prop {"S" | "M"} iconSize: The size of the icon. Defaults to "S".
+ * @prop {boolean} M: A boolean indicating whether to use the medium sized buttons. Defaults to false.
+ * @prop {keyof typeof ButtonComps} ButtonComp: The name of the button component to use for each action item. Defaults to "ButtonGhost".
+ * @prop {React.Dispatch<React.SetStateAction<boolean>>} setShowActions: A callback function to set the expanded state of the action menu.
+ * @prop {boolean} popOutOfOverflowHiddenParent: A boolean indicating whether the action menu should pop out of an overflow:hidden parent element. Defaults to false.
+ * @prop {React.ReactNode | React.FunctionComponent<CustomSelectCompProps>} CustomSelectComp: A custom select component to use instead of the default select component.
+ * @prop {boolean} storybookPreview: A boolean indicating whether the component is being rendered in storybook. Defaults to false.
+ * @return {ReactElement} The rendered action menu component.
+ */
 var ActionMenu = function (_a) {
-    var _b = _a.icon, icon = _b === void 0 ? "DotsThree" : _b, //most likely will never change
-    invert = _a.invert, actions = _a.actions, _c = _a.align, align = _c === void 0 ? "right" : _c, _d = _a.iconSize, iconSize = _d === void 0 ? "S" : _d, M = _a.M, _e = _a.ButtonComp, _ButtonComp = _e === void 0 ? "ButtonGhost" : _e, setShowActionsInParent = _a.setShowActions, _f = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _f === void 0 ? false : _f, CustomSelectComp = _a.CustomSelectComp, storybookPreview = _a.storybookPreview;
+    var _b = _a.icon, icon = _b === void 0 ? "DotsThree" : _b, invert = _a.invert, actions = _a.actions, _c = _a.align, align = _c === void 0 ? "right" : _c, _d = _a.iconSize, iconSize = _d === void 0 ? "S" : _d, M = _a.M, _e = _a.ButtonComp, _ButtonComp = _e === void 0 ? "ButtonGhost" : _e, setShowActionsInParent = _a.setShowActions, _f = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _f === void 0 ? false : _f, CustomSelectComp = _a.CustomSelectComp, storybookPreview = _a.storybookPreview;
     var actionMenuRef = (0, react_1.useRef)(null);
     var optionsWrapperRef = (0, react_1.useRef)(null);
     var _g = (0, react_1.useState)(false), showActions = _g[0], setShowActions = _g[1];
     (0, useHandleClickOutside_1.useHandleClickOutside)(popOutOfOverflowHiddenParent
-        ? [actionMenuRef, optionsWrapperRef] //cuz in popOut case, options are rendered in a portal, which means the 'options' are no longer a child on acitonMenuRef. Hence we need to track click outside optionsWrapperRef as well.
+        ? [actionMenuRef, optionsWrapperRef]
         : actionMenuRef, setShowActions);
     if (!actions || actions.length === 0)
         return null;
     var getOpsRect = function () { var _a; return (_a = optionsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); };
     var ButtonComp = ButtonComps[_ButtonComp];
-    //basically action menu defaults to 'S' button size (cuz its an icon only button)
-    //so passing 'M' will override this default and make it a Medium sized button
     var buttonSize = M ? { M: true } : {};
     var genOptionIcon = function (iconName) {
         var IconComp = icons_1.icons[iconName];
@@ -74,21 +87,22 @@ var ActionMenu = function (_a) {
                 removeFixedPos();
         }
     }, [showActions]);
-    //on unmount, setShowActionsInParent to false, obviously.
     (0, react_1.useEffect)(function () {
-        return function () { return setShowActionsInParent && setShowActionsInParent(false); };
+        return function () {
+            return setShowActionsInParent && setShowActionsInParent(false);
+        };
     }, []);
     var _h = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _h.fixPos, applyFixedPos = _h.applyFixedPos, removeFixedPos = _h.removeFixedPos, trackerRef = _h.trackerRef;
     var genLighbox = function () {
         var _a, _b;
-        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 },
+        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) {
                 return (react_1.default.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction),
                     react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {
+                            var _a;
                             e.preventDefault();
                             e.stopPropagation();
-                            action.onClick && action.onClick(e);
+                            (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
                             setShowActions(false);
                         }, key: action.display, invert: invert }),
                         action.icon && genOptionIcon(action.icon),
@@ -96,7 +110,7 @@ var ActionMenu = function (_a) {
             }))));
     };
     return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
-        CustomSelectComp ? (react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function (e) {
+        typeof CustomSelectComp === 'function' ? (react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function () {
                 setShowActions(!showActions);
             } })) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
                 setShowActions(!showActions);

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

@@ -1,5 +1,25 @@
-export const StyledActionMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledActionMenuTracker: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledActionsDropMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledActionMenuOpsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledOption: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledActionMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledActionMenuTracker: import("styled-components").StyledComponent<"div", any, {
+    align: "left" | "right" | "center";
+    storybookPreview?: boolean;
+}, never>;
+type alignType = "left" | "right" | "center";
+export declare const StyledActionsDropMenu: import("styled-components").StyledComponent<"div", any, {
+    align: alignType;
+    invert?: boolean;
+    optionsHeight?: number;
+    optionsWidth?: number;
+    showActions: boolean;
+    fixPos?: {
+        x: number;
+        y: number;
+    };
+}, never>;
+export declare const StyledActionMenuOpsWrapper: import("styled-components").StyledComponent<"div", any, {
+    align: "left" | "right" | "center";
+    invert?: boolean;
+}, never>;
+export declare const StyledOption: import("styled-components").StyledComponent<"button", any, {
+    invert?: boolean;
+}, never>;
+export {};

package/dist/components/ActionMenu/styled.js

@@ -34,17 +34,10 @@ var mixins_1 = require("../../themes/mixins");
 var globalVariables_1 = require("../../globalStyles/globalVariables");
 var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80;
 var pointerHeight = 10;
-/**
- * we add bottom, left and right margin on the StyledActionMenuOpsWrapper
- * & increase the width by 20 and height by 10 of StyledActionsDropMenu
- * so that the dropshadow shows (since StyledActionsDropMenu has overflow hidden)
- *
- * this offset needs to be cancelled by the absolute positioning of StyledActionsDropMenu
- */
 var offset = 10;
 exports.StyledActionMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: max-content;\n"], ["\n  position: relative;\n  width: max-content;\n"])));
 var trackerSize = 5;
-exports.StyledActionMenuTracker = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  ", "\n  bottom: 0;\n  transform: translateY(100%);\n  ", ";\n"], ["\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  ", "\n  bottom: 0;\n  transform: translateY(100%);\n  ", ";\n"])), trackerSize, trackerSize, function (_a) {
+exports.StyledActionMenuTracker = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  ", "\n  bottom: 0;\n  transform: translateY(100%);\n  ", "\n"], ["\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  ", "\n  bottom: 0;\n  transform: translateY(100%);\n  ", "\n"])), trackerSize, trackerSize, function (_a) {
     var align = _a.align;
     switch (align) {
         case "left":
@@ -52,14 +45,14 @@ exports.StyledActionMenuTracker = styled_components_1.default.div(templateObject
         case "right":
             return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          right: -", "px;\n        "], ["\n          right: -", "px;\n        "])), offset + trackerSize);
         case "center":
-            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          left: 1.5rem; //actionMenu button half width\n        "], ["\n          left: 1.5rem; //actionMenu button half width\n        "])));
+            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          left: 1.5rem;\n        "], ["\n          left: 1.5rem;\n        "])));
     }
 }, function (_a) {
     var storybookPreview = _a.storybookPreview;
-    return storybookPreview && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject([" background-color: ", ""], [" background-color: ", ""])), themes_1.colors.red);
+    return storybookPreview && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), themes_1.colors.red);
 });
 exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n\n  z-index: 1001;\n\n  ", ";\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n"], ["\n  ", "\n\n  z-index: 1001;\n\n  ", ";\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
-    var fixPos = _a.fixPos;
+    var fixPos = _a.fixPos, align = _a.align;
     return fixPos
         ? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          position: fixed;\n          top: ", "px;\n          left: ", "px;\n          z-index: 1000;\n          ", "\n        "], ["\n          position: fixed;\n          top: ", "px;\n          left: ", "px;\n          z-index: 1000;\n          ", "\n        "])), fixPos.y, fixPos.x, function (_a) {
             var align = _a.align;
@@ -76,12 +69,10 @@ exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_1
     });
 }, (0, mixins_1.transition)("height"), function (_a) {
     var optionsWidth = _a.optionsWidth;
-    return optionsWidth + offset * 2 + "px";
+    return (optionsWidth ? "".concat(optionsWidth + offset * 2, "px") : "auto");
 }, function (_a) {
     var showActions = _a.showActions, optionsHeight = _a.optionsHeight;
-    return showActions
-        ? optionsHeight + pointerHeight + offset + "px" || "auto"
-        : 0;
+    return showActions ? "".concat(optionsHeight ? optionsHeight + pointerHeight + offset : "auto", "px") : "0";
 });
 exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  ", "\n  margin: 0 ", "px;\n\n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid\n      ", ";\n    z-index: 1;\n  }\n"], ["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  ", "\n  margin: 0 ", "px;\n\n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid\n      ", ";\n    z-index: 1;\n  }\n"])), globalVariables_1.globalLightboxStyle, offset, function (_a) {
     var align = _a.align;

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

@@ -30,7 +30,7 @@ export interface ButtonProps {
     className?: string;
     S?: boolean;
     M?: boolean;
-    iconSize?: number;
+    iconSize?: number | "S" | "M";
     iconColor?: string;
     iconWeight?: string;
     stopPropagation?: boolean;
@@ -47,7 +47,7 @@ export declare const ButtonCustom: React.FunctionComponent<ButtonProps>;
 export declare const ButtonGhost: React.FunctionComponent<ButtonProps>;
 interface UploadButtonProps {
     mutilple?: boolean;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     variant?: string;
     id?: string;
     accept?: string;

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

@@ -1,20 +1,47 @@
-export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, overflowVisible, showActionPanel, onCloseText, onConfirm, showCloseBtn, onConfirmText, showConfirmBtn, alignActions, disableHeader }: {
-    title: any;
-    onClose: any;
-    children: any;
-    linkTo: any;
+import React from "react";
+export type alignActionsType = "left" | "right" | "center";
+export interface ModalProps {
+    title: string;
+    onClose: () => void;
+    children: React.ReactNode;
+    linkTo?: string;
     desktopWidth?: string;
-    headerStyle?: string;
-    subtitle: any;
+    headerStyle?: "style1" | "style2";
+    subtitle?: string;
     fitToContentHeight?: boolean;
-    invert: any;
-    overflowVisible: any;
+    invert?: boolean;
+    overflowVisible?: boolean;
     showActionPanel?: boolean;
     onCloseText?: string;
-    onConfirm: any;
+    onConfirm?: React.MouseEventHandler<HTMLButtonElement> | React.ReactNode;
     showCloseBtn?: boolean;
     onConfirmText?: string;
     showConfirmBtn?: boolean;
-    alignActions?: string;
+    alignActions?: alignActionsType;
     disableHeader?: boolean;
-}): any;
+}
+/**
+ * @component Renders a modal component with customizable title, content, and actions.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} title: The title of the modal.
+ * @prop {() => void} onClose: A callback function to be called when the close button is clicked.
+ * @prop {React.ReactNode} children: The content to be rendered inside the modal body.
+ * @prop {string} [linkTo]: An optional link for the modal.
+ * @prop {string} [desktopWidth]: The width of the modal on desktop screens. Defaults to "80%".
+ * @prop {('style1' | 'style2')} [headerStyle]: The style of the modal header. Defaults to "style1".
+ * @prop {string} [subtitle]: The subtitle of the modal.
+ * @prop {boolean} [fitToContentHeight]: A boolean indicating whether the modal height should be adjusted based on its content. Defaults to false.
+ * @prop {boolean} [invert]: A boolean indicating whether to invert the background color of the modal. Defaults to false.
+ * @prop {boolean} [overflowVisible]: A boolean indicating whether the modal should render its overflow as visible. Defaults to false.
+ * @prop {boolean} [showActionPanel]: A boolean indicating whether to render the action panel. Defaults to false.
+ * @prop {string} [onCloseText]: The text to be displayed in the close button. Defaults to "Close".
+ * @prop {React.MouseEventHandler<HTMLButtonElement> | React.ReactNode} [onConfirm]: A callback function or node to be rendered instead of the confirm button.
+ * @prop {boolean} [showCloseBtn]: A boolean indicating whether to render the close button. Defaults to true.
+ * @prop {string} [onConfirmText]: The text to be displayed in the confirm button. Defaults to "Confirm".
+ * @prop {boolean} [showConfirmBtn]: A boolean indicating whether to render the confirm button. Defaults to false.
+ * @prop {('left' | 'right' | 'center')} [alignActions]: The alignment of the action buttons. Defaults to "right".
+ * @prop {boolean} [disableHeader]: A boolean indicating whether to render the header. Defaults to false.
+ * @return {ReactElement} The rendered modal component.
+ */
+export declare const Modal: React.FunctionComponent<ModalProps>;

package/dist/components/Modals/Modal/index.js

@@ -45,10 +45,32 @@ var ModalHeaderStyle2_1 = require("./comps/ModalHeaderStyle2");
 var styled_1 = require("./styled");
 var Buttons_1 = require("../../Buttons");
 var Divider_1 = require("../../Divider");
+/**
+ * @component Renders a modal component with customizable title, content, and actions.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} title: The title of the modal.
+ * @prop {() => void} onClose: A callback function to be called when the close button is clicked.
+ * @prop {React.ReactNode} children: The content to be rendered inside the modal body.
+ * @prop {string} [linkTo]: An optional link for the modal.
+ * @prop {string} [desktopWidth]: The width of the modal on desktop screens. Defaults to "80%".
+ * @prop {('style1' | 'style2')} [headerStyle]: The style of the modal header. Defaults to "style1".
+ * @prop {string} [subtitle]: The subtitle of the modal.
+ * @prop {boolean} [fitToContentHeight]: A boolean indicating whether the modal height should be adjusted based on its content. Defaults to false.
+ * @prop {boolean} [invert]: A boolean indicating whether to invert the background color of the modal. Defaults to false.
+ * @prop {boolean} [overflowVisible]: A boolean indicating whether the modal should render its overflow as visible. Defaults to false.
+ * @prop {boolean} [showActionPanel]: A boolean indicating whether to render the action panel. Defaults to false.
+ * @prop {string} [onCloseText]: The text to be displayed in the close button. Defaults to "Close".
+ * @prop {React.MouseEventHandler<HTMLButtonElement> | React.ReactNode} [onConfirm]: A callback function or node to be rendered instead of the confirm button.
+ * @prop {boolean} [showCloseBtn]: A boolean indicating whether to render the close button. Defaults to true.
+ * @prop {string} [onConfirmText]: The text to be displayed in the confirm button. Defaults to "Confirm".
+ * @prop {boolean} [showConfirmBtn]: A boolean indicating whether to render the confirm button. Defaults to false.
+ * @prop {('left' | 'right' | 'center')} [alignActions]: The alignment of the action buttons. Defaults to "right".
+ * @prop {boolean} [disableHeader]: A boolean indicating whether to render the header. Defaults to false.
+ * @return {ReactElement} The rendered modal component.
+ */
 var Modal = function (_a) {
-    var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, // used only in header style 2
-    _d = _a.fitToContentHeight, // used only in header style 2
-    fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.showCloseBtn, showCloseBtn = _g === void 0 ? true : _g, _h = _a.onConfirmText, onConfirmText = _h === void 0 ? "Confirm" : _h, _j = _a.showConfirmBtn, showConfirmBtn = _j === void 0 ? true : _j, _k = _a.alignActions, alignActions = _k === void 0 ? "right" : _k, _l = _a.disableHeader, disableHeader = _l === void 0 ? false : _l;
+    var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.showCloseBtn, showCloseBtn = _g === void 0 ? true : _g, _h = _a.onConfirmText, onConfirmText = _h === void 0 ? "Confirm" : _h, _j = _a.showConfirmBtn, showConfirmBtn = _j === void 0 ? true : _j, _k = _a.alignActions, alignActions = _k === void 0 ? "right" : _k, _l = _a.disableHeader, disableHeader = _l === void 0 ? false : _l;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var handleClose = function () { return onClose(); };
     var initAnimPos = { marginTop: "100vh", opacity: 0 };
@@ -56,7 +78,7 @@ var Modal = function (_a) {
     var _m = (0, react_1.useState)(endAnimPos), animPos = _m[0], setAnimPos = _m[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
-        return function () { return (document.body.style.overflow = "unset"); };
+        return function () { document.body.style.overflow = "unset"; };
     }, []);
     var genHeader = function () {
         var headerStyles = {
@@ -66,12 +88,6 @@ var Modal = function (_a) {
         var Comp = headerStyles[headerStyle];
         return (react_1.default.createElement(Comp, { title: title, subtitle: subtitle, setAnimPos: setAnimPos, linkTo: linkTo, onClose: onClose, initAnimPos: initAnimPos, invert: invert }));
     };
-    /**
-     * 'takeFullScreenOnScroll' messy as it is, it is needed,
-     * because header style 1 scrolls up and fixes to the top of screen
-     * but header style 2 (hints) stays fixed, 4rem from top of screen
-     * this is by design
-     */
     var takeFullScreenOnScroll = ["style1"].indexOf(headerStyle) !== -1
         ? true
         : ["style2"].indexOf(headerStyle) !== -1 && false;
@@ -85,7 +101,7 @@ var Modal = function (_a) {
                     react_1.default.createElement(styled_1.StyledActionButtonsWrapper, { alignActions: alignActions },
                         showConfirmBtn &&
                             typeof onConfirm === 'function'
-                            ? react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText) // In some cases we want to pass button directly to the component as prop
+                            ? react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText)
                             : onConfirm,
                         showCloseBtn && react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
     return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,

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

@@ -1,9 +1,27 @@
-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>;
-export const StyledModalLargeBody: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledActionButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledModalHeaderStyle2Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledModalHeaderStyle2Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { alignActionsType } from ".";
+interface StyledModalLargeContentWrapperProps {
+    takeFullScreenOnScroll: boolean;
+    desktopWidth?: string;
+}
+interface StyledModalBodyWrapperProps {
+    takeFullScreenOnScroll: boolean;
+    overflowVisible?: boolean;
+}
+interface StyledModalLargeBodyProps {
+    takeFullScreenOnScroll: boolean;
+}
+interface StyledActionButtonsWrapperProps {
+    alignActions: alignActionsType;
+}
+export declare const StyledModalLargeBg: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledModalLargeBgColor: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledModalLargeContentWrapper: import("styled-components").StyledComponent<"div", any, StyledModalLargeContentWrapperProps, never>;
+export declare const StyledModalLargeHeader: import("styled-components").StyledComponent<"header", any, {
+    invert?: boolean;
+}, never>;
+export declare const StyledModalBodyWrapper: import("styled-components").StyledComponent<"div", any, StyledModalBodyWrapperProps, never>;
+export declare const StyledModalLargeBody: import("styled-components").StyledComponent<"div", any, StyledModalLargeBodyProps, never>;
+export declare const StyledActionButtonsWrapper: import("styled-components").StyledComponent<"div", any, StyledActionButtonsWrapperProps, never>;
+export declare const StyledModalHeaderStyle2Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalHeaderStyle2Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/components/Modals/Modal/styled.js

@@ -35,7 +35,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15;
 exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
 exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n"], ["\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n"])), black_opacity80);
-exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50vh; */\n    max-height: 90vh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n   \n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"], ["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50vh; */\n    max-height: 90vh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n   \n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"])), white, function (_a) {
+exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50vh; */\n    max-height: 90vh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"], ["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50vh; */\n    max-height: 90vh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"])), white, function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
     return takeFullScreenOnScroll
         ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          /* min-height: calc(100vh - 4rem); */\n        "], ["\n          /* min-height: calc(100vh - 4rem); */\n        "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          height: calc(100vh - 4rem);\n          display: flex;\n          flex-direction: column;\n        "], ["\n          height: calc(100vh - 4rem);\n          display: flex;\n          flex-direction: column;\n        "])));
@@ -45,19 +45,19 @@ exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templat
 });
 exports.StyledModalLargeHeader = styled_components_1.default.header(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  /* width: 100%; */\n  height: 4rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 2rem;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n"], ["\n  background-color: ", ";\n  /* width: 100%; */\n  height: 4rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 2rem;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n"])), function (_a) {
     var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor90 : greyColor5;
+    return (invert ? themes_1.colors.greyColor90 : greyColor5);
 });
 exports.StyledModalBodyWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: ", ";\n"])), function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll, overflowVisible = _a.overflowVisible;
-    return overflowVisible ? "unset" : takeFullScreenOnScroll ? "auto" : 'unset';
+    return overflowVisible ? "unset" : takeFullScreenOnScroll ? "auto" : "unset";
 });
 exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ", "\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
     return !takeFullScreenOnScroll && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      flex: 1;\n      overflow: auto;\n    "], ["\n      flex: 1;\n      overflow: auto;\n    "])));
 });
-exports.StyledActionButtonsWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: 2rem;\n  padding-right: 0.5rem; \n  background-color: white;\n"], ["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: 2rem;\n  padding-right: 0.5rem; \n  background-color: white;\n"])), function (_a) {
+exports.StyledActionButtonsWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: 2rem;\n  padding-right: 0.5rem;\n  background-color: white;\n"], ["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: 2rem;\n  padding-right: 0.5rem;\n  background-color: white;\n"])), function (_a) {
     var alignActions = _a.alignActions;
-    return alignActions === "right" ? 'flex-end' : '';
+    return (alignActions === "right" ? "flex-end" : "");
 });
 exports.StyledModalHeaderStyle2Container = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  border-bottom: 1px solid ", ";\n  padding: 1rem 2rem;\n  position: relative;\n"], ["\n  display: flex;\n  border-bottom: 1px solid ", ";\n  padding: 1rem 2rem;\n  position: relative;\n"])), greyColor15);
 exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding-top: 1rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 1.5rem;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  padding-top: 1rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 1.5rem;\n  justify-content: space-between;\n  align-items: center;\n"])));

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

@@ -1,12 +1,31 @@
-export function ModalConfirm({ title, subTitle, children, onClose, onCloseText, showConfirmBtn, showCloseBtn, onConfirm, onConfirmText, alignActions }: {
-    title: any;
-    subTitle: any;
-    children: any;
-    onClose: any;
+import React, { FunctionComponent } from "react";
+import { alignActionsType } from "../Modal";
+export interface ModalConfirmProps {
+    title?: string;
+    subTitle?: string;
+    children?: React.ReactNode;
+    onClose: () => void;
     onCloseText?: string;
     showConfirmBtn?: boolean;
     showCloseBtn?: boolean;
-    onConfirm: any;
+    onConfirm: React.MouseEventHandler<HTMLButtonElement>;
     onConfirmText?: string;
-    alignActions?: string;
-}): any;
+    alignActions?: alignActionsType;
+}
+/**
+ * @component Renders a modal confirmation component with customizable text, buttons and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} title: The title to be displayed in the modal.
+ * @prop {string} subTitle: The subtitle to be displayed in the modal.
+ * @prop {React.ReactNode} children: The content to be rendered inside the modal.
+ * @prop {() => void} onClose: A function to call when the close button is clicked.
+ * @prop {string} onCloseText: The text to be displayed on the close button.
+ * @prop {boolean} showConfirmBtn: A boolean indicating whether to show the confirm button.
+ * @prop {boolean} showCloseBtn: A boolean indicating whether to show the close button.
+ * @prop {React.MouseEventHandler<HTMLButtonElement>} onConfirm: A function to call when the confirm button is clicked.
+ * @prop {string} onConfirmText: The text to be displayed on the confirm button.
+ * @prop {alignActionsType} alignActions: The alignment of the action buttons.
+ * @return {ReactElement} The rendered modal confirm component.
+ */
+export declare const ModalConfirm: FunctionComponent<ModalConfirmProps>;

package/dist/components/Modals/ModalConfirm/index.js

@@ -31,6 +31,22 @@ var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
 var Buttons_1 = require("../../Buttons");
 var Typo_1 = require("../../Typo");
 var styled_1 = require("./styled");
+/**
+ * @component Renders a modal confirmation component with customizable text, buttons and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} title: The title to be displayed in the modal.
+ * @prop {string} subTitle: The subtitle to be displayed in the modal.
+ * @prop {React.ReactNode} children: The content to be rendered inside the modal.
+ * @prop {() => void} onClose: A function to call when the close button is clicked.
+ * @prop {string} onCloseText: The text to be displayed on the close button.
+ * @prop {boolean} showConfirmBtn: A boolean indicating whether to show the confirm button.
+ * @prop {boolean} showCloseBtn: A boolean indicating whether to show the close button.
+ * @prop {React.MouseEventHandler<HTMLButtonElement>} onConfirm: A function to call when the confirm button is clicked.
+ * @prop {string} onConfirmText: The text to be displayed on the confirm button.
+ * @prop {alignActionsType} alignActions: The alignment of the action buttons.
+ * @return {ReactElement} The rendered modal confirm component.
+ */
 var ModalConfirm = function (_a) {
     var title = _a.title, subTitle = _a.subTitle, children = _a.children, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, _c = _a.showConfirmBtn, showConfirmBtn = _c === void 0 ? true : _c, _d = _a.showCloseBtn, showCloseBtn = _d === void 0 ? true : _d, onConfirm = _a.onConfirm, _e = _a.onConfirmText, onConfirmText = _e === void 0 ? "Delete" : _e, _f = _a.alignActions, alignActions = _f === void 0 ? "left" : _f;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
@@ -39,7 +55,7 @@ var ModalConfirm = function (_a) {
     var _g = (0, react_1.useState)(endAnimPos), animPos = _g[0], setAnimPos = _g[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
-        return function () { return (document.body.style.overflow = "unset"); };
+        return function () { document.body.style.overflow = "unset"; };
     }, []);
     var SubTitleText = screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? Typo_1.SANS_4 : Typo_1.SANS_3;
     var genModalContents = function () { return (react_1.default.createElement(react_1.Fragment, null,
@@ -54,17 +70,13 @@ var ModalConfirm = function (_a) {
             react_1.default.createElement(styled_1.StyledFlexWrapper, { style: { marginTop: (children) && "2rem" }, alignActions: alignActions },
                 showConfirmBtn && react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
                 showCloseBtn && react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))))); };
-    return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalConfirm, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: { type: "tween", ease: "easeOut" }, onClick: function () { return onClose(); } }, screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(styled_1.StyledModalConfirmContentWrapper, { initial: initAnimPos, animate: animPos, transition: {
+    return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalConfirm, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: { type: "tween", ease: "easeOut" }, onClick: function () { return onClose(); } }, screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(styled_1.StyledModalConfirmContentWrapper, { initial: { marginTop: initAnimPos.marginTop, translateY: initAnimPos.translateY }, animate: { marginTop: animPos.marginTop, translateY: animPos.translateY }, transition: {
             type: "tween",
             ease: "easeOut",
         }, onAnimationComplete: function () {
             if (animPos.marginTop === initAnimPos.marginTop)
                 onClose();
-        }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents())) : (react_1.default.createElement(styled_1.StyledModalConfirmContentWrapper
-    // style={{ width: "100%" }}
-    , { 
-        // style={{ width: "100%" }}
-        initial: {
+        }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents())) : (react_1.default.createElement(styled_1.StyledModalConfirmContentWrapper, { initial: {
             opacity: initAnimPos.opacity,
             marginTop: initAnimPos.marginTop,
         }, animate: {

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

@@ -1,6 +1,11 @@
-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>;
-export const StyledFlexWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { alignActionsType } from "../Modal";
+interface StyledFlexWrapperProps {
+    alignActions: alignActionsType;
+}
+export declare const StyledModalConfirm: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledModalConfirmContentWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledModalConfirmContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalConfirmClose: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalConfirmContentSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFlexWrapper: import("styled-components").StyledComponent<"div", any, StyledFlexWrapperProps, never>;
+export {};

package/dist/components/Modals/ModalConfirm/styled.js

@@ -34,13 +34,13 @@ var framer_motion_1 = require("framer-motion");
 var styled_components_1 = __importStar(require("styled-components"));
 var white = themes_1.colors.white, greyColor100_opacity70 = themes_1.colors.greyColor100_opacity70;
 var ModalStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ", ";\n  z-index: 999999999;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ", ";\n  z-index: 999999999;\n"])), greyColor100_opacity70);
-exports.StyledModalConfirm = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ", " {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n  }\n"], ["\n  ", "\n\n  ", " {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n  }\n"])), ModalStyles, (0, mixins_1.mediaQuery)("sm"));
-exports.StyledModalConfirmContentWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: ", ";\n\n  ", " {\n      border: 2px solid ", ";\n      width: 50vw;\n      position: relative;\n      border-radius: 0.2rem;\n  }\n"], ["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: ", ";\n\n  ", " {\n      border: 2px solid ", ";\n      width: 50vw;\n      position: relative;\n      border-radius: 0.2rem;\n  }\n"])), white, (0, mixins_1.mediaQuery)("sm"), white);
-exports.StyledModalConfirmContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 2rem 2rem;\n\n  ", " {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding: 0 3rem 3rem 3rem;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 2rem 2rem;\n\n  ", " {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding: 0 3rem 3rem 3rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+exports.StyledModalConfirm = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  ", "\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), ModalStyles, (0, mixins_1.mediaQuery)("sm"));
+exports.StyledModalConfirmContentWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: ", ";\n  ", " {\n    border: 2px solid ", ";\n    width: 50vw;\n    position: relative;\n    border-radius: 0.2rem;\n  }\n"], ["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: ", ";\n  ", " {\n    border: 2px solid ", ";\n    width: 50vw;\n    position: relative;\n    border-radius: 0.2rem;\n  }\n"])), white, (0, mixins_1.mediaQuery)("sm"), white);
+exports.StyledModalConfirmContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 2rem 2rem;\n  ", " {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    padding: 0 3rem 3rem 3rem;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 2rem 2rem;\n  ", " {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    padding: 0 3rem 3rem 3rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
 exports.StyledModalConfirmClose = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n"])));
 exports.StyledModalConfirmContentSubtitle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-top: 0.5rem;\n"], ["\n  margin-top: 0.5rem;\n"])));
 exports.StyledFlexWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: ", ";\n  gap: 1rem;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: ", ";\n  gap: 1rem;\n  align-items: center;\n"])), function (_a) {
     var alignActions = _a.alignActions;
-    return alignActions === "right" ? 'flex-end' : '';
+    return (alignActions === "right" ? "flex-end" : "");
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Modals/derivedComps/ModalConfirmAction/index.d.ts

@@ -1,9 +1,22 @@
-export function ModalConfirmAction({ children, enabled, title, subtitle, onConfirmText, onCloseText, }: {
-    children: any;
+import { FunctionComponent, ReactNode } from "react";
+export interface ModalConfirmActionProps {
+    children: ReactNode;
     enabled?: boolean;
     title?: string;
-    subtitle: any;
-    onConfirmText: any;
-    onCloseText: any;
-}): React.JSX.Element;
-import React from "react";
+    subtitle?: string;
+    onConfirmText?: string;
+    onCloseText?: string;
+}
+/**
+ * @component Renders a modal confirmation action component with customizable text, buttons and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {React.ReactNode} children: The content to be rendered inside the button.
+ * @prop {boolean} enabled: A boolean indicating whether the component is enabled or not. Defaults to false.
+ * @prop {string} title: The title to be displayed in the modal.
+ * @prop {string} subtitle: The subtitle to be displayed in the modal.
+ * @prop {string} onConfirmText: The text to be displayed in the confirm button. Defaults to "Confirm".
+ * @prop {string} onCloseText: The text to be displayed in the close button. Defaults to "Cancel".
+ * @return {ReactElement} The rendered modal confirm action component.
+ */
+export declare const ModalConfirmAction: FunctionComponent<ModalConfirmActionProps>;

package/dist/components/Modals/derivedComps/ModalConfirmAction/index.js

@@ -26,26 +26,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalConfirmAction = void 0;
 var react_1 = __importStar(require("react"));
 var ModalConfirm_1 = require("../../ModalConfirm");
-/*
-@description :
-it is a wrapper comp for comps which have a onClick prop ex- button comps. When you click the button,
-it shows a ModalConfirm comp asking for confirmation. If you say "yes" in the ModalConfirm, it does what the button was supposed to do in the first place.
-
-VERY IMPORTANT : Wrapping a comp is not enough, the prop enable should be passed as true, which is by default false
-
-Check the ModalConfirmAction.stories.js for component usage
-
-*/
-function ModalConfirmAction(_a) {
-    var children = _a.children, _b = _a.enabled, enabled = _b === void 0 ? false : _b, _c = _a.title, title = _c === void 0 ? "Are you sure you want to do this action" : _c, subtitle = _a.subtitle, onConfirmText = _a.onConfirmText, onCloseText = _a.onCloseText;
+/**
+ * @component Renders a modal confirmation action component with customizable text, buttons and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {React.ReactNode} children: The content to be rendered inside the button.
+ * @prop {boolean} enabled: A boolean indicating whether the component is enabled or not. Defaults to false.
+ * @prop {string} title: The title to be displayed in the modal.
+ * @prop {string} subtitle: The subtitle to be displayed in the modal.
+ * @prop {string} onConfirmText: The text to be displayed in the confirm button. Defaults to "Confirm".
+ * @prop {string} onCloseText: The text to be displayed in the close button. Defaults to "Cancel".
+ * @return {ReactElement} The rendered modal confirm action component.
+ */
+var ModalConfirmAction = function (_a) {
+    var children = _a.children, _b = _a.enabled, enabled = _b === void 0 ? false : _b, _c = _a.title, title = _c === void 0 ? "Are you sure you want to do this action?" : _c, subtitle = _a.subtitle, onConfirmText = _a.onConfirmText, onCloseText = _a.onCloseText;
     var _d = (0, react_1.useState)(false), modal = _d[0], setModal = _d[1];
     var callback;
     var handleParentClick = function (e) {
         // usecase: actionMenu in table
         e.stopPropagation();
-        setModal(e);
+        setModal(true);
     };
-    var handleConfirm = function (e) {
+    var handleConfirm = function () {
         callback(modal);
         setModal(false);
     };
@@ -59,7 +61,7 @@ function ModalConfirmAction(_a) {
                 if (react_1.default.isValidElement(child)) {
                     // Access props of the child component
                     callback = child.props.onClick;
-                    return react_1.default.cloneElement(child, { onClick: handleParentClick });
+                    return (0, react_1.cloneElement)(child, { onClick: handleParentClick });
                 }
                 // Return non-component children as they are
                 return child;
@@ -69,5 +71,5 @@ function ModalConfirmAction(_a) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         modal ? (react_1.default.createElement(ModalConfirm_1.ModalConfirm, { title: title, subTitle: subtitle, onClose: function () { return setModal(false); }, onConfirmText: onConfirmText, onConfirm: handleConfirm, onCloseText: onCloseText })) : null,
         getChildren()));
-}
+};
 exports.ModalConfirmAction = ModalConfirmAction;

package/dist/components/Modals/derivedComps/ModalForms/index.d.ts

@@ -1,8 +1,21 @@
-export function ModalForms({ children, SUBMIT_BUTTON, title, onClose, alignActions, }: {
-    children: any;
-    SUBMIT_BUTTON: any;
-    title: any;
-    onClose: any;
-    alignActions: any;
-}): React.JSX.Element;
-import React from "react";
+import React, { FunctionComponent } from "react";
+import { alignActionsType } from "../../Modal";
+export interface ModalFormsProps {
+    children: React.ReactNode;
+    SUBMIT_BUTTON: React.ReactNode;
+    title: string;
+    onClose: () => void;
+    alignActions?: alignActionsType;
+}
+/**
+ * @component Renders a form modal component with customizable submit button text and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {React.ReactNode} children: The content to be rendered inside the form modal.
+ * @prop {React.ReactNode} SUBMIT_BUTTON: The text to be displayed in the submit button.
+ * @prop {string} title: The title of the form modal.
+ * @prop {() => void} onClose: A function to be called when the form modal is closed.
+ * @prop {'left' | 'right'} alignActions: The alignment of the actions buttons in the form modal. Defaults to "left".
+ * @return {ReactElement} The rendered form modal component.
+ */
+export declare const ModalForms: FunctionComponent<ModalFormsProps>;

package/dist/components/Modals/derivedComps/ModalForms/index.js

@@ -6,10 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalForms = void 0;
 var react_1 = __importDefault(require("react"));
 var Modal_1 = require("../../Modal");
-var Buttons_1 = require("../../../Buttons");
+/**
+ * @component Renders a form modal component with customizable submit button text and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {React.ReactNode} children: The content to be rendered inside the form modal.
+ * @prop {React.ReactNode} SUBMIT_BUTTON: The text to be displayed in the submit button.
+ * @prop {string} title: The title of the form modal.
+ * @prop {() => void} onClose: A function to be called when the form modal is closed.
+ * @prop {'left' | 'right'} alignActions: The alignment of the actions buttons in the form modal. Defaults to "left".
+ * @return {ReactElement} The rendered form modal component.
+ */
 var ModalForms = function (_a) {
     var children = _a.children, SUBMIT_BUTTON = _a.SUBMIT_BUTTON, title = _a.title, onClose = _a.onClose, alignActions = _a.alignActions;
-    console.log({ SUBMIT_BUTTON: SUBMIT_BUTTON });
-    return (react_1.default.createElement(Modal_1.Modal, { fitToContentHeight: true, title: title, showActionPanel: true, onClose: onClose, onCloseText: "Cancel", desktopWidth: "600px", onConfirm: SUBMIT_BUTTON, alignActions: alignActions || 'left' }, children));
+    //   console.log({ SUBMIT_BUTTON: SUBMIT_BUTTON });
+    return (react_1.default.createElement(Modal_1.Modal, { fitToContentHeight: true, title: title, showActionPanel: true, onClose: onClose, onCloseText: "Cancel", desktopWidth: "600px", onConfirm: SUBMIT_BUTTON, alignActions: alignActions || "left" }, children));
 };
 exports.ModalForms = ModalForms;

package/dist/components/Modals/derivedComps/ModalSmall/index.d.ts

@@ -1,15 +1,35 @@
-export function ModalSmall({ title, onClose, invert, showActionPanel, onCloseText, onConfirm, onConfirmText, overflowVisible, fitToContentHeight, alignActions, desktopWidth, children }: {
-    title: any;
-    onClose: any;
-    invert: any;
-    showActionPanel: any;
+import React, { FunctionComponent, ReactNode } from "react";
+import { alignActionsType } from "../../Modal";
+export interface ModalSmallProps {
+    title: string;
+    onClose: () => void;
+    invert?: boolean;
+    showActionPanel?: boolean;
     onCloseText?: string;
-    onConfirm: any;
+    onConfirm?: React.ReactNode;
     onConfirmText?: string;
     overflowVisible?: boolean;
     fitToContentHeight?: boolean;
-    alignActions?: string;
+    alignActions?: alignActionsType;
     desktopWidth?: string;
-    children: any;
-}): React.JSX.Element;
-import React from "react";
+    children: ReactNode;
+}
+/**
+ * @component Renders a small modal component with customizable content and actions.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} title: The title of the modal.
+ * @prop {() => void} onClose: A function to be called when the modal is closed.
+ * @prop {boolean} invert: A boolean indicating whether to invert the modal colors. Defaults to false.
+ * @prop {boolean} showActionPanel: A boolean indicating whether to show the modal actions panel. Defaults to true.
+ * @prop {string} onCloseText: The text to be displayed in the close button. Defaults to "Close".
+ * @prop {React.ReactNode} onConfirm: A React node to be rendered as the confirm button. Defaults to none.
+ * @prop {string} onConfirmText: The text to be displayed in the confirm button. Defaults to "Confirm".
+ * @prop {boolean} overflowVisible: A boolean indicating whether to override the overflow: hidden styling on the modal. Defaults to true.
+ * @prop {boolean} fitToContentHeight: A boolean indicating whether to fit the modal to the content height. Defaults to true.
+ * @prop {alignActionsType} alignActions: A string indicating how the modal actions buttons should be aligned. Defaults to "right".
+ * @prop {string} desktopWidth: A string indicating the width of the modal on desktop views. Defaults to "50vw".
+ * @prop {React.ReactNode} children: The content to be rendered inside the modal.
+ * @return {ReactElement} The rendered modal component.
+ */
+export declare const ModalSmall: FunctionComponent<ModalSmallProps>;

package/dist/components/Modals/derivedComps/ModalSmall/index.js

@@ -6,6 +6,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalSmall = void 0;
 var react_1 = __importDefault(require("react"));
 var Modal_1 = require("../../Modal");
+/**
+ * @component Renders a small modal component with customizable content and actions.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} title: The title of the modal.
+ * @prop {() => void} onClose: A function to be called when the modal is closed.
+ * @prop {boolean} invert: A boolean indicating whether to invert the modal colors. Defaults to false.
+ * @prop {boolean} showActionPanel: A boolean indicating whether to show the modal actions panel. Defaults to true.
+ * @prop {string} onCloseText: The text to be displayed in the close button. Defaults to "Close".
+ * @prop {React.ReactNode} onConfirm: A React node to be rendered as the confirm button. Defaults to none.
+ * @prop {string} onConfirmText: The text to be displayed in the confirm button. Defaults to "Confirm".
+ * @prop {boolean} overflowVisible: A boolean indicating whether to override the overflow: hidden styling on the modal. Defaults to true.
+ * @prop {boolean} fitToContentHeight: A boolean indicating whether to fit the modal to the content height. Defaults to true.
+ * @prop {alignActionsType} alignActions: A string indicating how the modal actions buttons should be aligned. Defaults to "right".
+ * @prop {string} desktopWidth: A string indicating the width of the modal on desktop views. Defaults to "50vw".
+ * @prop {React.ReactNode} children: The content to be rendered inside the modal.
+ * @return {ReactElement} The rendered modal component.
+ */
 var ModalSmall = function (_a) {
     var title = _a.title, onClose = _a.onClose, invert = _a.invert, showActionPanel = _a.showActionPanel, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Close" : _b, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Confirm" : _c, _d = _a.overflowVisible, overflowVisible = _d === void 0 ? true : _d, _e = _a.fitToContentHeight, fitToContentHeight = _e === void 0 ? true : _e, _f = _a.alignActions, alignActions = _f === void 0 ? "right" : _f, _g = _a.desktopWidth, desktopWidth = _g === void 0 ? "50vw" : _g, children = _a.children;
     return (react_1.default.createElement(Modal_1.Modal, { title: title, onClose: onClose, onCloseText: onCloseText, onConfirm: onConfirm, onConfirmText: onConfirmText, desktopWidth: desktopWidth, overflowVisible: overflowVisible, fitToContentHeight: fitToContentHeight, invert: invert, showActionPanel: showActionPanel, alignActions: alignActions, children: react_1.default.createElement("div", { style: { padding: "2rem" } }, children) }));

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

@@ -1,9 +1,9 @@
 import React from "react";
-export declare const PercentBarChart: ({ data: _data, title, valuePath, id, onClick, colors }: {
+export declare const PercentBarChart: ({ data: _data, title, valuePath, display, onClick, colors }: {
     data: any;
     valuePath: string;
     title?: string;
-    id: string;
+    display: string;
     onClick?: (name: string) => void;
     colors?: string[];
 }) => React.JSX.Element;

package/dist/components/PercentBarChart/index.js

@@ -47,6 +47,7 @@ exports.PercentBarChart = void 0;
 var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
 var Typo_1 = require("../Typo");
+var colors_1 = require("../../themes/colors");
 var chartColors = [
     "#F53D65",
     "#666666",
@@ -62,13 +63,13 @@ var chartColors = [
 var renderCustomizedLabel = function (_a) {
     var y = _a.y, value = _a.value, opacity = _a.opacity;
     var offset = 12;
-    return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, x: 0, y: y - offset, fill: "black", textAnchor: "start", dominantBaseline: "middle" }, value));
+    return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, x: 0, y: y - offset, fill: "black", textAnchor: "start", dominantBaseline: "middle", className: 'SANS_2' }, value));
 };
 var renderCustomizedValue = function (_a) {
     var y = _a.y, width = _a.width, height = _a.height, value = _a.value, suffix = _a.suffix, opacity = _a.opacity;
     var xOffset = 6;
     var yOffset = 2;
-    return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, fontWeight: "600", x: width + xOffset, y: y + height / 2 + yOffset, fill: "black", textAnchor: "start", dominantBaseline: "middle" }, "".concat(value).concat(suffix || "")));
+    return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, fontWeight: "600", x: width + xOffset, y: y + height / 2 + yOffset, fill: "black", textAnchor: "start", dominantBaseline: "middle", className: 'SANS_2' }, "".concat(value).concat(suffix || "")));
 };
 var _dataSample = [
     { name: "AAA/A1+", value: 72.3, Type: 0 },
@@ -77,51 +78,52 @@ var _dataSample = [
     { name: "AA+", value: 5.63, Type: 3 },
 ];
 var PercentBarChart = function (_a) {
-    var _b = _a.data, _data = _b === void 0 ? _dataSample : _b, title = _a.title, _c = _a.valuePath, valuePath = _c === void 0 ? "value" : _c, _d = _a.id, id = _d === void 0 ? "name" : _d, onClick = _a.onClick, _e = _a.colors, colors = _e === void 0 ? chartColors : _e;
+    var _b = _a.data, _data = _b === void 0 ? _dataSample : _b, title = _a.title, _c = _a.valuePath, valuePath = _c === void 0 ? "value" : _c, _d = _a.display, display = _d === void 0 ? "name" : _d, onClick = _a.onClick, _e = _a.colors, colors = _e === void 0 ? chartColors : _e;
     var data = (0, react_1.useMemo)(function () {
         var finalData = __spreadArray([], _data, true);
-        finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[id], color: (colors)[i % (colors).length] })); });
+        finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[display], color: (colors)[i % (colors).length] })); });
         finalData.sort(function (a, b) {
             return Number(b.value || 0) - Number(a.value || 0);
         });
         return finalData;
-    }, [_data, id, valuePath]);
+    }, [_data, display, valuePath]);
     var _f = (0, react_1.useState)(undefined), activeBar = _f[0], setActiveBar = _f[1];
     var changeBarOpacityFn = function (name) {
         return activeBar && activeBar !== name ? 0.4 : 1;
     };
-    return (react_1.default.createElement("div", { style: { height: "".concat(80 * data.length, "px"), width: "100%" } },
-        title && react_1.default.createElement(Typo_1.SANS_4_5, null, title),
-        react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
-            react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, data: data, layout: "vertical", margin: {
-                    top: 15,
-                    right: 60,
-                    left: 0,
-                    bottom: 0,
-                } },
-                react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
-                react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: id }),
-                react_1.default.createElement(recharts_1.Bar, { style: { cursor: "pointer" }, dataKey: "value", unit: "%", onMouseOver: function (args) { return setActiveBar(args[id]); }, onMouseOut: function () { return setActiveBar(undefined); }, onMouseDown: function (args) {
-                        setActiveBar(args[id]);
-                        onClick(args[id]);
+    return (react_1.default.createElement("div", { style: { border: "1px solid ".concat(colors_1.colors.greyColor15) } },
+        title && react_1.default.createElement(Typo_1.SANS_4_5, { style: { padding: "2rem", paddingBottom: "0" }, semibold: true }, title),
+        react_1.default.createElement("div", { style: { height: "".concat(80 * data.length, "px"), width: "100%", padding: "2rem", paddingTop: 0 } },
+            react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
+                react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap: 20, data: data, layout: "vertical", margin: {
+                        top: 15,
+                        right: 60,
+                        left: 0,
+                        bottom: 0,
                     } },
-                    react_1.default.createElement(recharts_1.LabelList, { dataKey: id, position: "top", content: function (props) {
-                            return renderCustomizedLabel({
-                                y: props.y,
-                                value: props.value,
-                                opacity: changeBarOpacityFn(props[id]),
-                            });
-                        } }),
-                    react_1.default.createElement(recharts_1.LabelList, { dataKey: "value", offset: 0, content: function (props) {
-                            return renderCustomizedValue({
-                                y: props.y,
-                                width: props.width,
-                                height: props.height,
-                                value: props.value,
-                                suffix: "%",
-                                opacity: changeBarOpacityFn(props[id]),
-                            });
-                        } }),
-                    data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry[id]), key: "cell-".concat(index), height: 30, fill: entry.color })); }))))));
+                    react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
+                    react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: display }),
+                    react_1.default.createElement(recharts_1.Bar, { style: { cursor: "pointer" }, dataKey: "value", unit: "%", onMouseOver: function (args) { return setActiveBar(args[display]); }, onMouseOut: function () { return setActiveBar(undefined); }, onMouseDown: function (args) {
+                            setActiveBar(args[display]);
+                            onClick(args[display]);
+                        } },
+                        react_1.default.createElement(recharts_1.LabelList, { dataKey: display, position: "top", content: function (props) {
+                                return renderCustomizedLabel({
+                                    y: props.y,
+                                    value: props.value,
+                                    opacity: changeBarOpacityFn(props[display]),
+                                });
+                            } }),
+                        react_1.default.createElement(recharts_1.LabelList, { dataKey: "value", offset: 0, content: function (props) {
+                                return renderCustomizedValue({
+                                    y: props.y,
+                                    width: props.width,
+                                    height: props.height,
+                                    value: props.value,
+                                    suffix: "%",
+                                    opacity: changeBarOpacityFn(props[display]),
+                                });
+                            } }),
+                        data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry[display]), key: "cell-".concat(index), height: 30, fill: entry.color })); })))))));
 };
 exports.PercentBarChart = PercentBarChart;

package/dist/stories/ModalConfirmAction.stories.js

@@ -16,7 +16,6 @@ var Buttons_1 = require("../components/Buttons");
 var ModalConfirmAction_1 = require("../components/Modals/derivedComps/ModalConfirmAction");
 var Banners_1 = require("../components/Banners");
 var react_1 = require("react");
-var Typo_1 = require("../components/Typo");
 exports.default = {
     title: "ModalConfirmAction",
     args: {

package/dist/stories/PercentBarChart.stories.js

@@ -20,6 +20,6 @@ var PercentBarChart_ = function (args) {
         console.log("Bar clicked: ".concat(name));
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, id: "name", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
+        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, display: "name", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
 };
 exports.PercentBarChart_ = PercentBarChart_;

package/package.json

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