uangcermat-web-toolkit-v2 0.1.21 → 0.1.22

package/build/index.css

@@ -430885,6 +430885,14 @@
     --tw-bg-opacity: 1;
     background-color: rgb(6 32 63 / var(--tw-bg-opacity));
 }
+.hover\:bg-red-500:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+.hover\:bg-red-americanRed:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(178 38 52 / var(--tw-bg-opacity));
+}
 .hover\:fill-blue-buttonBlue:hover {
     fill: #25A9EF;
 }
@@ -430899,6 +430907,10 @@
     --tw-text-opacity: 1;
     color: rgb(82 97 107 / var(--tw-text-opacity));
 }
+.hover\:text-red-linenRed:hover {
+    --tw-text-opacity: 1;
+    color: rgb(250 233 234 / var(--tw-text-opacity));
+}
 .hover\:underline:hover {
     text-decoration-line: underline;
 }

package/build/src/blocks/Filter/Filter.stories.d.ts

@@ -0,0 +1,11 @@
+import { Story } from '@storybook/react';
+declare const _default: {
+    title: string;
+    argTypes: {};
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Default: Story;

package/build/src/blocks/Navbar/Navbar.stories.d.ts

@@ -0,0 +1,20 @@
+import { Story } from '@storybook/react';
+import { NavbarInterface } from './';
+declare const _default: {
+    title: string;
+    component: {
+        ({ isShowClose, containerStyles, onClickClose, children }: NavbarInterface): import("react/jsx-runtime").JSX.Element;
+        Title: {
+            ({ label, labelStyles, containerStyles, children }: import("./Navbar.type").NavbarTitleInterface): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Switcher: {
+            ({ children, ...props }: import("./Navbar.type").NavbarSwitcherInterface): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+    };
+    argTypes: {};
+    tags: string[];
+};
+export default _default;
+export declare const Default: Story<NavbarInterface>;

package/build/src/blocks/Sidebar/Sidebar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SidebarFooterInterface, SidebarHeaderInterface, SidebarInterface, SidebarPopoverInterface, SidebarUserProfileInterface } from './Sidebar.type';
 declare const Sidebar: {
-    ({ activeId, activeParent, data, isCollapsed, notificationCountContainerStyles, notificationCountTextStyles, containerStyles, itemMenuContainerStyles, itemMenuIconStyles, itemMenuTitleStyles, itemMenuActiveBgColor, itemSubMenuContainerStyles, itemSubMenuActiveTextColor, onClickCollapsible, onClickNav, children }: SidebarInterface): import("react/jsx-runtime").JSX.Element;
+    ({ activeId, activeParent, data, isCollapsed, notificationCountContainerStyles, notificationCountTextStyles, containerStyles, itemMenuContainerStyles, itemMenuIconStyles, itemMenuTitleStyles, itemMenuActiveBgColor, itemSubMenuContainerStyles, itemSubMenuActiveTextColor, toggleButtonContainerStyles, toggleIconOpenName, toggleIconCloseName, toggleIconStyles, onClickCollapsible, onClickNav, children }: SidebarInterface): import("react/jsx-runtime").JSX.Element;
     Popover: {
         ({ isCollapsed, label, labelStyles, icon, iconStyles, notificationCount, notificationCountContainerStyles, notificationCountTextStyles, position, iconTriangleStyles, iconTriangleContainerStyles, panelContainerStyles, offsetX, offsetY, containerStyles, children }: SidebarPopoverInterface): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/build/src/blocks/Sidebar/Sidebar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),s=require("react");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js");var l=require("../../components/Badge/BaseBadge.js"),a=require("../../components/Text/BaseText.js");require("../../components/Text/Text.js"),require("../../components/Breadcrumbs/BaseBreadcrumbs.js"),require("../../components/Breadcrumbs/Breadcrumbs.js"),require("../../components/Button/ButtonHyperlink.js");var n=require("../../components/Button/BaseButton.js");require("../../components/Button/BaseButtonIcon.js"),require("../../components/Button/Button.js"),require("../../components/Button/ButtonConfirmation.js"),require("../../components/Button/ButtonLink.js"),require("../../components/Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js"),require("../../components/Card/InfoCard.js"),require("../../components/Checkbox/Checkbox.js");var o=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.js"),require("../../components/DatePicker/DatePicker.js"),require("../../components/DatePicker/DatePickerRange.js"),require("../../components/DatePicker/DatePickerTime.js"),require("../../components/Heading/Heading.js"),require("../../components/IconProduct/IconProduct.js"),require("../../components/Image/Image.js"),require("../../components/LoadingIndicator/LoadingIndicator.js"),require("../../components/LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js"),require("../../styles/Spacing.js"),require("../../components/MessageBox/MessageBox.js"),require("../../components/Modal/BaseModal.js"),require("../../components/Modal/Modal.js");var i=require("../../components/Popover/BasePopover.js");require("../../components/Preview/BasePreview.js"),require("../../components/ProgressBar/ProgressBar.js"),require("../../components/ProgressIndicator/ProgressIndicator.js"),require("../../components/RadioButton/RadioButton.js"),require("../../components/SelectPicker/SelectPicker.js"),require("../../../node_modules/react-ripples/esm/index.js"),require("../../components/Table/TablePage.js"),require("../../components/Table/TableResponsive.js"),require("../../components/Tabs/BaseAccordionTabs.js"),require("../../components/Tabs/Tabs.js"),require("../../components/Textarea/Textarea.js"),require("../../components/TextInput/TextInput.js"),require("../../components/TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../../components/ToggleButton/ToggleButton.js"),require("../../components/Uploader/BaseUploader.js");var r=require("../../utils/getChildrenOnDisplayName.js"),c=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(s);const m=()=>e.jsx("div",{className:"w-full h-[1px] bg-light-whiteSolid"}),x=({id:n,title:i,titleStyles:r,icon:u,iconStyles:m,subMenu:x,isCollapsed:g,activeId:p,selectedId:f,notificationCountContainerStyles:b,notificationCountTextStyles:j,itemMenuContainerStyles:h,itemMenuActiveBgColor:w,itemSubMenuContainerStyles:v,itemSubMenuActiveTextColor:y,onClickCollapsible:C,onExpand:S,onClickNav:N,notifcationCount:k})=>{const M=f===n,[P,B]=d.default.useState(!1);return s.useEffect((()=>{g?B(!1):setTimeout((()=>{B(!0)}),200)}),[g]),e.jsxs("div",Object.assign({className:c.twMerge("overflow-hidden hover:bg-blue-maastrichtBlue rounded-lg "+(M?"bg-blue-maastrichtBlue":"bg-transparent"),h),style:{backgroundColor:M?w:void 0}},{children:[e.jsx("button",Object.assign({onClick:()=>{P||M||C(),S(M?"":n)},className:"h-8 pr-4 pl-3 w-full bg-transparent relative"},{children:e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(o,{name:u,className:c.twMerge("w-4 h-4 fill-light-whiteSolid",m)})})),P&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:i,className:c.twMerge("text-light-whiteSolid text-sm text-left line-clamp-1 w-full",r)})})),!!k&&e.jsx(l,{label:k.toString(),labelStyles:c.twMerge("text-[10px]",j),containerStyles:c.twMerge(t.default("flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5",`${!P&&"absolute right-0 top-0"}`),b)})]}))})),e.jsx("div",Object.assign({className:"flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out pl-8 "+(M&&P?"max-h-screen bg-blue-maastrichtBlue":"max-h-0 "),style:{backgroundColor:M&&P?w:"transparent"}},{children:x.map(((t,s)=>e.jsx("button",Object.assign({onClick:()=>N(t),className:c.twMerge("flex flex-1 py-2 bg-transparent text-light-whiteSolid hover:text-blue-buttonBlue "+(t.navLink===p?"ml-3 text-blue-buttonBlue":""),v),style:{color:t.navLink===p?y:void 0}},{children:e.jsx(a.default,{label:t.title,className:`text-xs text-left line-clamp-1 w-full ${t.navLink===p?"font-semibold":""} `})}),s)))}))]}))},g=({activeId:t,activeParent:l,data:a,isCollapsed:n,notificationCountContainerStyles:i,notificationCountTextStyles:u,containerStyles:m,itemMenuContainerStyles:g,itemMenuIconStyles:p,itemMenuTitleStyles:f,itemMenuActiveBgColor:b,itemSubMenuContainerStyles:j,itemSubMenuActiveTextColor:h,onClickCollapsible:w,onClickNav:v,children:y})=>{const C=r.getChildrenOnDisplayName(y,"Header"),S=r.getChildrenOnDisplayName(y,"Footer"),N=r.getChildrenOnDisplayName(y,"UserProfile"),[k,M]=d.default.useState(l),P=s.Children.toArray(y);return e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col relative bg-blue-darkBlue h-full px-2 pb-2 ease-in-out duration-300 w-[220px]",m)},{children:[C,e.jsx("button",Object.assign({type:"button",onClick:()=>w(),className:"p-0 bg-transparent"},{children:e.jsx("div",Object.assign({className:"flex items-center justify-center w-6 h-6 absolute top-14 -right-3 bg-light-whiteSolid rounded-lg"},{children:e.jsx(o,{name:n?"chevronDoubleArrowRight":"chevronDoubleArrowLeft",className:"w-3 h-3 fill-blue-yaleBlue"})}))})),e.jsx("div",Object.assign({className:"flex flex-1 flex-col overflow-auto mb-4 scrollbar scrollbar-none"},{children:e.jsx("div",Object.assign({className:"flex flex-col justify-start h-full"},{children:a.map(((s,l)=>e.jsx(x,{selectedId:k,id:s.id,title:s.title,icon:s.icon,permission:s.permission,isCollapsed:n,activeId:t,subMenu:s.subMenu,onClickCollapsible:()=>w(),onExpand:e=>M(e),onClickNav:e=>v(e),notifcationCount:s.notifcationCount,notificationCountContainerStyles:i,notificationCountTextStyles:u,itemMenuActiveBgColor:b,itemMenuContainerStyles:g,itemSubMenuActiveTextColor:h,itemSubMenuContainerStyles:j,iconStyles:p,titleStyles:f},l)))}))})),e.jsx("div",Object.assign({className:"mb-2"},{children:s.Children.map(P,((t,s)=>{const l=r.getChildrenOnDisplayName(t,"Popover");return e.jsx("div",Object.assign({className:"w-full"},{children:l}),s)}))})),N,S]}))},p=({isCollapsed:n,label:u,labelStyles:m,icon:x,iconStyles:g,notificationCount:p,notificationCountContainerStyles:f,notificationCountTextStyles:b,position:j,iconTriangleStyles:h,iconTriangleContainerStyles:w,panelContainerStyles:v,offsetX:y,offsetY:C,containerStyles:S,children:N})=>{const[k,M]=d.default.useState(!1);s.useEffect((()=>{n?M(!1):setTimeout((()=>{M(!0)}),200)}),[n]);const P=r.getChildrenOnDisplayName(N,"PopoverPanel");return e.jsxs(i,Object.assign({position:j||"right-center",iconTriangleStyles:h,iconTriangleContainerStyles:w,panelContainerStyles:v,offsetX:y,offsetY:C},{children:[e.jsx(i.Button,{children:e.jsxs("div",Object.assign({className:c.twMerge("h-8 pr-4 pl-3 w-full bg-transparent relative flex flex-row items-center hover:bg-blue-maastrichtBlue rounded-lg gap-x-2",S)},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(o,{name:x,className:c.twMerge("w-4 h-4 fill-light-whiteSolid",g)})})),k&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:u,className:c.twMerge("text-light-whiteSolid text-sm text-left line-clamp-1 w-full",m)})})),!!p&&e.jsx(l,{label:p.toString(),labelStyles:c.twMerge("text-[10px]",b),containerStyles:c.twMerge(t.default("flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5",`${!k&&"absolute right-0 top-0"}`),f)})]}))}),e.jsx(i.Panel,{children:P})]}))};p.displayName="Popover",g.Popover=p;const f=({children:t})=>e.jsx(e.Fragment,{children:t});f.displayName="PopoverPanel",g.PopoverPanel=f;const b=({isCollapsed:t,appLogoClosed:l,appLogoClosedStyles:a,appLogoOpened:n,appLogoOpenedStyles:o,containerStyles:i,onClickHeaderSidebar:r,children:u})=>{const[m,x]=d.default.useState(!1);return s.useEffect((()=>{t?x(!1):setTimeout((()=>{x(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:u||e.jsx("div",Object.assign({className:c.twMerge("flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer",i),onClick:()=>null==r?void 0:r()},{children:m?e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx("img",{src:n||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg",className:c.twMerge("w-[113px] h-7",o)})})):e.jsx("img",{src:l||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:c.twMerge("w-[22px] h-[22px]",a)})}))})};b.displayName="Header",g.Header=b;const j=({isCollapsed:t,userLabel:l,userLabelStyles:n,userAvatar:r,userAvatarFallback:u,userAvatarFallbackStyles:x,userAvatarStyles:g,containerStyles:p,panelContainerStyles:f,titleAtPanel:b,titleAtPanelStyles:j,userAvatarAtPanel:h,userAvatarAtPanelStyles:w,userAvatarFallbackAtPanel:v,userAvatarFallbackAtPanelStyles:y,userLabelAtPanel:C,userLabelAtPanelStyles:S,userEmailAtPanel:N,userEmailAtPanelStyles:k,manageAccountLabelAtPanel:M,manageAccountLabelAtPanelStyles:P,iconManageAccountAtPanel:B,iconManageAccountAtPanelStyles:q,onClickManageAccount:O,translationLabelAtPanel:A,translationLabelAtPanelStyles:T,iconTranslationAtPanel:L,iconTranslationAtPanelStyles:I,onClickTranslation:D,logoutLabelAtPanel:F,logoutLabelAtPanelStyles:E,iconLogoutAtPanel:R,iconLogoutAtPanelStyles:H,onClickLogout:_,children:z,offsetX:G,offsetY:U})=>{const[X,Y]=d.default.useState(!1);return s.useEffect((()=>{t?Y(!1):setTimeout((()=>{Y(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:z||e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col w-full",p)},{children:[e.jsx(m,{}),e.jsx("div",Object.assign({className:"relative min-h-[56px] flex items-center w-full"},{children:e.jsxs(i,Object.assign({offsetX:G,offsetY:U},{children:[e.jsx(i.Button,{children:e.jsxs("div",Object.assign({className:c.twMerge("w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg hover:bg-blue-maastrichtBlue cursor-pointer",p)},{children:[r?e.jsx("img",{src:r||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:c.twMerge("w-6 h-6 bg-dark-gumbo rounded overflow-hidden object-cover",g)}):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded",g)},{children:e.jsx(a.default,{label:u,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",x)})})),X&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:l||"",className:c.twMerge("text-light-whiteSolid line-clamp-1 w-full text-left",n)})}))]}))}),e.jsx(i.Panel,{children:e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]",f)},{children:[e.jsx("div",Object.assign({className:"px-4"},{children:e.jsx(a.default,{label:b||"Account",className:c.twMerge("text-sm font-semibold text-dark-blackCoral",j)})})),e.jsxs("div",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-2"},{children:[h?e.jsx("img",{src:h||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:c.twMerge("w-8 h-8 bg-dark-gumbo rounded overflow-hidden object-cover",w)}):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-8 h-8 bg-dark-gumbo rounded",w)},{children:e.jsx(a.default,{label:v,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",y)})})),e.jsxs("div",Object.assign({className:"flex flex-col"},{children:[e.jsx(a.default,{label:C||"",className:c.twMerge("w-full line-clamp-1 font-normal text-sm text-dark-blackCoral",S)}),e.jsx(a.default,{label:N||"",className:c.twMerge("w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo",k)})]}))]})),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent",onClick:()=>null==O?void 0:O()},{children:[e.jsx(o,{name:B||"configuration",className:c.twMerge("w-4 h-4 fill-dark-gumbo",q)}),e.jsx(a.default,{label:M||"Manage Account",className:c.twMerge("text-sm font-normal text-dark-blackCoral",P)})]})),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent",onClick:()=>null==D?void 0:D()},{children:[e.jsx(o,{name:L||"language",className:c.twMerge("w-4 h-4 fill-dark-gumbo",I)}),e.jsx(a.default,{label:A||"Translate Page",className:c.twMerge("text-sm font-normal text-dark-blackCoral",T)})]})),e.jsx("div",{className:"h-[1px] w-full bg-dark-silver"}),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent",onClick:()=>null==_?void 0:_()},{children:[e.jsx(o,{name:R||"logout",className:c.twMerge("w-4 h-4 fill-dark-gumbo",H)}),e.jsx(a.default,{label:F||"Logout",className:c.twMerge("text-sm font-normal text-dark-blackCoral",E)})]}))]}))})]}))})),e.jsx(m,{})]}))})};j.displayName="UserProfile",g.UserProfile=j;const h=({isCollapsed:l,isShowCompanyProfile:o,companyName:i,companyNameStyles:r,companyLogo:u,companyLogoStyles:m,companyLogoFallback:x,companlogoFallbackStyles:g,companyLogoContainerStyles:p,isShowButtonChangeCompany:f,buttonChangeCompanyOnClick:b,buttonChangeCompanyLabel:j,buttonChangeCompanyStyles:h,buttonChangeCompanyIconName:w,buttonChangeCompanyIconStyles:v,appName:y,appVersion:C,children:S})=>{const[N,k]=d.default.useState(!1);return s.useEffect((()=>{l?k(!1):setTimeout((()=>{k(!0)}),200)}),[l]),e.jsx(e.Fragment,{children:S||e.jsxs("div",Object.assign({className:"pt-2 px-2"},{children:[o&&e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[u?e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-gray-50 rounded",p)},{children:e.jsx("img",{src:u||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:c.twMerge("w-4 h-4",m)})})):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded",p)},{children:e.jsx(a.default,{label:x,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",g)})})),N&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:i||"Gajicermat",className:c.twMerge("text-light-whiteSolid text-xs line-clamp-2",r)})}))]})),f&&e.jsx("div",Object.assign({className:"h-14 w-full flex flex-row items-center"},{children:e.jsx(n.default,{variant:"secondary",onClick:()=>null==b?void 0:b(),label:N?j||"Select Company":"",className:c.twMerge(t.default("flex items-center justify-center p-0 h-6 ml-0  border border-solid border-blue-yaleBlue text-blue-yaleBlue",N?"w-full":"w-6"),h),rightIcon:N?void 0:w||"refresh",rightIconStyles:c.twMerge("ml-0 w-3 h-3",v)})})),e.jsx("div",Object.assign({className:"flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full"},{children:N?e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:y||"© Gajicermat Digital Mandiri",className:"text-light-whiteSolid text-[10px] line-clamp-1 w-full text-right"})})),e.jsx("div",{className:"w-[1px] h-3 bg-light-whiteSolid"}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:C||"Version 0.0.0",className:"text-light-whiteSolid text-[10px] line-clamp-1 w-full text-left"})}))]}):e.jsx("div",{className:"w-[1px] h-3 "})}))]}))})};h.displayName="Footer",g.Footer=h,module.exports=g;
+"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),s=require("react");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js");var l=require("../../components/Badge/BaseBadge.js"),a=require("../../components/Text/BaseText.js");require("../../components/Text/Text.js"),require("../../components/Breadcrumbs/BaseBreadcrumbs.js"),require("../../components/Breadcrumbs/Breadcrumbs.js"),require("../../components/Button/ButtonHyperlink.js");var n=require("../../components/Button/BaseButton.js");require("../../components/Button/BaseButtonIcon.js"),require("../../components/Button/Button.js"),require("../../components/Button/ButtonConfirmation.js"),require("../../components/Button/ButtonLink.js"),require("../../components/Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js"),require("../../components/Card/InfoCard.js"),require("../../components/Checkbox/Checkbox.js");var o=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.js"),require("../../components/DatePicker/DatePicker.js"),require("../../components/DatePicker/DatePickerRange.js"),require("../../components/DatePicker/DatePickerTime.js"),require("../../components/Heading/Heading.js"),require("../../components/IconProduct/IconProduct.js"),require("../../components/Image/Image.js"),require("../../components/LoadingIndicator/LoadingIndicator.js"),require("../../components/LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js"),require("../../styles/Spacing.js"),require("../../components/MessageBox/MessageBox.js"),require("../../components/Modal/BaseModal.js"),require("../../components/Modal/Modal.js");var i=require("../../components/Popover/BasePopover.js");require("../../components/Preview/BasePreview.js"),require("../../components/ProgressBar/ProgressBar.js"),require("../../components/ProgressIndicator/ProgressIndicator.js"),require("../../components/RadioButton/RadioButton.js"),require("../../components/SelectPicker/SelectPicker.js"),require("../../../node_modules/react-ripples/esm/index.js"),require("../../components/Table/TablePage.js"),require("../../components/Table/TableResponsive.js"),require("../../components/Tabs/BaseAccordionTabs.js"),require("../../components/Tabs/Tabs.js"),require("../../components/Textarea/Textarea.js"),require("../../components/TextInput/TextInput.js"),require("../../components/TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../../components/ToggleButton/ToggleButton.js"),require("../../components/Uploader/BaseUploader.js");var r=require("../../utils/getChildrenOnDisplayName.js"),c=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(s);const m=()=>e.jsx("div",{className:"w-full h-[1px] bg-light-whiteSolid"}),g=({id:n,title:i,titleStyles:r,icon:u,iconStyles:m,subMenu:g,isCollapsed:x,activeId:p,selectedId:b,notificationCountContainerStyles:f,notificationCountTextStyles:j,itemMenuContainerStyles:h,itemMenuActiveContainerStyles:w,itemMenuActiveBgColor:v,itemSubMenuContainerStyles:y,itemSubMenuActiveContainerStyles:C,itemSubMenuActiveTextColor:S,onClickCollapsible:N,onExpand:k,onClickNav:M,notifcationCount:B})=>{const P=b===n,[q,O]=d.default.useState(!1);return s.useEffect((()=>{x?O(!1):setTimeout((()=>{O(!0)}),200)}),[x]),e.jsxs("div",Object.assign({className:c.twMerge(`overflow-hidden hover:bg-blue-maastrichtBlue rounded-lg ${P?w||"bg-blue-maastrichtBlue":"bg-transparent"}`,h),style:{backgroundColor:P?v:void 0}},{children:[e.jsx("button",Object.assign({onClick:()=>{q||P||N(),k(P?"":n)},className:"h-8 pr-4 pl-3 w-full bg-transparent relative"},{children:e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(o,{name:u,className:c.twMerge("w-4 h-4 fill-light-whiteSolid",m)})})),q&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:i,className:c.twMerge("text-light-whiteSolid text-sm text-left line-clamp-1 w-full",r)})})),!!B&&e.jsx(l,{label:B.toString(),labelStyles:c.twMerge("text-[10px]",j),containerStyles:c.twMerge(t.default("flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5",`${!q&&"absolute right-0 top-0"}`),f)})]}))})),e.jsx("div",Object.assign({className:"flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out "+(P&&q?"max-h-screen bg-blue-maastrichtBlue":"max-h-0 "),style:{backgroundColor:P&&q?v:"transparent"}},{children:g.map(((t,s)=>e.jsx("button",Object.assign({onClick:()=>M(t),className:c.twMerge("flex flex-1 py-2 bg-transparent text-light-whiteSolid hover:text-blue-buttonBlue pl-8 "+(t.navLink===p?`pl-11 ${C||"text-blue-buttonBlue"}`:""),y),style:{color:t.navLink===p?S:void 0}},{children:e.jsx(a.default,{label:t.title,className:`text-xs text-left line-clamp-1 w-full ${t.navLink===p?"font-semibold":""} `})}),s)))}))]}))},x=({activeId:t,activeParent:l,data:a,isCollapsed:n,notificationCountContainerStyles:i,notificationCountTextStyles:u,containerStyles:m,itemMenuContainerStyles:x,itemMenuIconStyles:p,itemMenuTitleStyles:b,itemMenuActiveBgColor:f,itemSubMenuContainerStyles:j,itemSubMenuActiveTextColor:h,toggleButtonContainerStyles:w,toggleIconOpenName:v,toggleIconCloseName:y,toggleIconStyles:C,onClickCollapsible:S,onClickNav:N,children:k})=>{const M=r.getChildrenOnDisplayName(k,"Header"),B=r.getChildrenOnDisplayName(k,"Footer"),P=r.getChildrenOnDisplayName(k,"UserProfile"),[q,O]=d.default.useState(l),A=s.Children.toArray(k);return e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col relative bg-blue-darkBlue h-full px-2 pb-2 ease-in-out duration-300 w-[220px]",m)},{children:[M,e.jsx("button",Object.assign({type:"button",onClick:()=>S(),className:"p-0 bg-transparent"},{children:e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 absolute top-14 -right-3 bg-light-whiteSolid rounded-lg",w)},{children:e.jsx(o,{name:n?y||"chevronDoubleArrowRight":v||"chevronDoubleArrowLeft",className:c.twMerge("w-3 h-3 fill-blue-yaleBlue",C)})}))})),e.jsx("div",Object.assign({className:"flex flex-1 flex-col overflow-auto mb-4 scrollbar scrollbar-none"},{children:e.jsx("div",Object.assign({className:"flex flex-col justify-start h-full"},{children:a.map(((s,l)=>e.jsx(g,{selectedId:q,id:s.id,title:s.title,icon:s.icon,permission:s.permission,isCollapsed:n,activeId:t,subMenu:s.subMenu,onClickCollapsible:()=>S(),onExpand:e=>O(e),onClickNav:e=>N(e),notifcationCount:s.notifcationCount,notificationCountContainerStyles:i,notificationCountTextStyles:u,itemMenuActiveBgColor:f,itemMenuContainerStyles:x,itemSubMenuActiveTextColor:h,itemSubMenuContainerStyles:j,iconStyles:p,titleStyles:b},l)))}))})),e.jsx("div",Object.assign({className:"mb-2"},{children:s.Children.map(A,((t,s)=>{const l=r.getChildrenOnDisplayName(t,"Popover");return e.jsx("div",Object.assign({className:"w-full"},{children:l}),s)}))})),P,B]}))},p=({isCollapsed:n,label:u,labelStyles:m,icon:g,iconStyles:x,notificationCount:p,notificationCountContainerStyles:b,notificationCountTextStyles:f,position:j,iconTriangleStyles:h,iconTriangleContainerStyles:w,panelContainerStyles:v,offsetX:y,offsetY:C,containerStyles:S,children:N})=>{const[k,M]=d.default.useState(!1);s.useEffect((()=>{n?M(!1):setTimeout((()=>{M(!0)}),200)}),[n]);const B=r.getChildrenOnDisplayName(N,"PopoverPanel");return e.jsxs(i,Object.assign({position:j||"right-center",iconTriangleStyles:h,iconTriangleContainerStyles:w,panelContainerStyles:v,offsetX:y,offsetY:C},{children:[e.jsx(i.Button,{children:e.jsxs("div",Object.assign({className:c.twMerge("h-8 pr-4 pl-3 w-full bg-transparent relative flex flex-row items-center hover:bg-blue-maastrichtBlue rounded-lg gap-x-2",S)},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(o,{name:g,className:c.twMerge("w-4 h-4 fill-light-whiteSolid",x)})})),k&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:u,className:c.twMerge("text-light-whiteSolid text-sm text-left line-clamp-1 w-full",m)})})),!!p&&e.jsx(l,{label:p.toString(),labelStyles:c.twMerge("text-[10px]",f),containerStyles:c.twMerge(t.default("flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5",`${!k&&"absolute right-0 top-0"}`),b)})]}))}),e.jsx(i.Panel,{children:B})]}))};p.displayName="Popover",x.Popover=p;const b=({children:t})=>e.jsx(e.Fragment,{children:t});b.displayName="PopoverPanel",x.PopoverPanel=b;const f=({isCollapsed:t,appLogoClosed:l,appLogoClosedStyles:a,appLogoOpened:n,appLogoOpenedStyles:o,containerStyles:i,onClickHeaderSidebar:r,children:u})=>{const[m,g]=d.default.useState(!1);return s.useEffect((()=>{t?g(!1):setTimeout((()=>{g(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:u||e.jsx("div",Object.assign({className:c.twMerge("flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer",i),onClick:()=>null==r?void 0:r()},{children:m?e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx("img",{src:n||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg",className:c.twMerge("w-[113px] h-7",o)})})):e.jsx("img",{src:l||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:c.twMerge("w-[22px] h-[22px]",a)})}))})};f.displayName="Header",x.Header=f;const j=({isCollapsed:t,userLabel:l,userLabelStyles:n,userAvatar:r,userAvatarFallback:u,userAvatarFallbackStyles:g,userAvatarStyles:x,containerStyles:p,panelContainerStyles:b,titleAtPanel:f,titleAtPanelStyles:j,userAvatarAtPanel:h,userAvatarAtPanelStyles:w,userAvatarFallbackAtPanel:v,userAvatarFallbackAtPanelStyles:y,userLabelAtPanel:C,userLabelAtPanelStyles:S,userEmailAtPanel:N,userEmailAtPanelStyles:k,manageAccountLabelAtPanel:M,manageAccountLabelAtPanelStyles:B,iconManageAccountAtPanel:P,iconManageAccountAtPanelStyles:q,onClickManageAccount:O,translationLabelAtPanel:A,translationLabelAtPanelStyles:T,iconTranslationAtPanel:L,iconTranslationAtPanelStyles:I,onClickTranslation:D,logoutLabelAtPanel:F,logoutLabelAtPanelStyles:E,iconLogoutAtPanel:R,iconLogoutAtPanelStyles:H,onClickLogout:_,children:z,offsetX:G,offsetY:U})=>{const[$,X]=d.default.useState(!1);return s.useEffect((()=>{t?X(!1):setTimeout((()=>{X(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:z||e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col w-full")},{children:[e.jsx(m,{}),e.jsx("div",Object.assign({className:"relative min-h-[56px] flex items-center w-full"},{children:e.jsxs(i,Object.assign({offsetX:G,offsetY:U},{children:[e.jsx(i.Button,{children:e.jsxs("div",Object.assign({className:c.twMerge("w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg hover:bg-blue-maastrichtBlue cursor-pointer",p)},{children:[r?e.jsx("img",{src:r||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:c.twMerge("w-6 h-6 bg-dark-gumbo rounded overflow-hidden object-cover",x)}):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded",x)},{children:e.jsx(a.default,{label:u,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",g)})})),$&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:l||"",className:c.twMerge("text-light-whiteSolid line-clamp-1 w-full text-left",n)})}))]}))}),e.jsx(i.Panel,{children:e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]",b)},{children:[e.jsx("div",Object.assign({className:"px-4"},{children:e.jsx(a.default,{label:f||"Account",className:c.twMerge("text-sm font-semibold text-dark-blackCoral",j)})})),e.jsxs("div",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-2"},{children:[h?e.jsx("img",{src:h||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:c.twMerge("w-8 h-8 bg-dark-gumbo rounded overflow-hidden object-cover",w)}):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-8 h-8 bg-dark-gumbo rounded",w)},{children:e.jsx(a.default,{label:v,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",y)})})),e.jsxs("div",Object.assign({className:"flex flex-col"},{children:[e.jsx(a.default,{label:C||"",className:c.twMerge("w-full line-clamp-1 font-normal text-sm text-dark-blackCoral",S)}),e.jsx(a.default,{label:N||"",className:c.twMerge("w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo",k)})]}))]})),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent",onClick:()=>null==O?void 0:O()},{children:[e.jsx(o,{name:P||"configuration",className:c.twMerge("w-4 h-4 fill-dark-gumbo",q)}),e.jsx(a.default,{label:M||"Manage Account",className:c.twMerge("text-sm font-normal text-dark-blackCoral",B)})]})),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent",onClick:()=>null==D?void 0:D()},{children:[e.jsx(o,{name:L||"language",className:c.twMerge("w-4 h-4 fill-dark-gumbo",I)}),e.jsx(a.default,{label:A||"Translate Page",className:c.twMerge("text-sm font-normal text-dark-blackCoral",T)})]})),e.jsx("div",{className:"h-[1px] w-full bg-dark-silver"}),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent",onClick:()=>null==_?void 0:_()},{children:[e.jsx(o,{name:R||"logout",className:c.twMerge("w-4 h-4 fill-dark-gumbo",H)}),e.jsx(a.default,{label:F||"Logout",className:c.twMerge("text-sm font-normal text-dark-blackCoral",E)})]}))]}))})]}))})),e.jsx(m,{})]}))})};j.displayName="UserProfile",x.UserProfile=j;const h=({isCollapsed:l,isShowCompanyProfile:o,companyName:i,companyNameStyles:r,companyLogo:u,companyLogoStyles:m,companyLogoFallback:g,companlogoFallbackStyles:x,companyLogoContainerStyles:p,isShowButtonChangeCompany:b,buttonChangeCompanyOnClick:f,buttonChangeCompanyLabel:j,buttonChangeCompanyStyles:h,buttonChangeCompanyIconName:w,buttonChangeCompanyIconStyles:v,appName:y,appVersion:C,children:S})=>{const[N,k]=d.default.useState(!1);return s.useEffect((()=>{l?k(!1):setTimeout((()=>{k(!0)}),200)}),[l]),e.jsx(e.Fragment,{children:S||e.jsxs("div",Object.assign({className:"pt-2 px-2"},{children:[o&&e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[u?e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-gray-50 rounded",p)},{children:e.jsx("img",{src:u||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:c.twMerge("w-4 h-4",m)})})):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded",p)},{children:e.jsx(a.default,{label:g,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",x)})})),N&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:i||"Gajicermat",className:c.twMerge("text-light-whiteSolid text-xs line-clamp-2",r)})}))]})),b&&e.jsx("div",Object.assign({className:"h-14 w-full flex flex-row items-center"},{children:e.jsx(n.default,{variant:"secondary",onClick:()=>null==f?void 0:f(),label:N?j||"Select Company":"",className:c.twMerge(t.default("flex items-center justify-center p-0 h-6 ml-0  border border-solid border-blue-yaleBlue text-blue-yaleBlue",N?"w-full":"w-6"),h),rightIcon:N?void 0:w||"refresh",rightIconStyles:c.twMerge("ml-0 w-3 h-3",v)})})),e.jsx("div",Object.assign({className:"flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full"},{children:N?e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:y||"© Gajicermat Digital Mandiri",className:"text-light-whiteSolid text-[10px] line-clamp-1 w-full text-right"})})),e.jsx("div",{className:"w-[1px] h-3 bg-light-whiteSolid"}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:C||"Version 0.0.0",className:"text-light-whiteSolid text-[10px] line-clamp-1 w-full text-left"})}))]}):e.jsx("div",{className:"w-[1px] h-3 "})}))]}))})};h.displayName="Footer",x.Footer=h,module.exports=x;
 //# sourceMappingURL=Sidebar.js.map

package/build/src/blocks/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/blocks/Sidebar/Sidebar.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-identical-functions */\nimport classNames from 'classnames';\nimport React, { Children, useEffect } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { BaseBadge, BaseButton, BasePopover, BaseText, Icon } from '../../components';\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport {\n  SidebarFooterInterface,\n  SidebarHeaderInterface,\n  SidebarInterface,\n  SidebarMenuExtendedInterface,\n  SidebarMenuInterface,\n  SidebarPopoverInterface,\n  SidebarUserProfileInterface\n} from './Sidebar.type';\n\nconst Divider = () => <div className='w-full h-[1px] bg-light-whiteSolid' />;\n\n// TODO: tidy up interface\nconst SidebarMenu = ({\n  id,\n  title,\n  titleStyles,\n  icon,\n  iconStyles,\n  subMenu,\n  isCollapsed,\n  activeId,\n  selectedId,\n  notificationCountContainerStyles,\n  notificationCountTextStyles,\n  itemMenuContainerStyles,\n  itemMenuActiveBgColor,\n  itemSubMenuContainerStyles,\n  itemSubMenuActiveTextColor,\n  onClickCollapsible,\n  onExpand,\n  onClickNav,\n  notifcationCount\n}: SidebarMenuInterface & SidebarMenuExtendedInterface) => {\n  const expanded = selectedId === id;\n  const [isShow, setIsShow] = React.useState<boolean>(false);\n\n  useEffect(() => {\n    if (!isCollapsed) {\n      setTimeout(() => {\n        setIsShow(true);\n      }, 200);\n    } else {\n      setIsShow(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <div\n      className={twMerge(\n        `overflow-hidden hover:bg-blue-maastrichtBlue rounded-lg ${\n          expanded ? 'bg-blue-maastrichtBlue' : 'bg-transparent'\n        }`,\n        itemMenuContainerStyles\n      )}\n      style={{ backgroundColor: expanded ? itemMenuActiveBgColor : undefined }}\n    >\n      <button\n        onClick={() => {\n          if (!isShow && !expanded) onClickCollapsible();\n\n          if (expanded) {\n            onExpand('');\n            return;\n          }\n\n          onExpand(id);\n        }}\n        className='h-8 pr-4 pl-3 w-full bg-transparent relative'\n      >\n        <div className='flex flex-row items-center gap-x-2'>\n          <div className='w-4 h-4'>\n            <Icon name={icon} className={twMerge('w-4 h-4 fill-light-whiteSolid', iconStyles)} />\n          </div>\n          {isShow && (\n            <div className='flex flex-1'>\n              <BaseText\n                label={title}\n                className={twMerge(\n                  'text-light-whiteSolid text-sm text-left line-clamp-1 w-full',\n                  titleStyles\n                )}\n              />\n            </div>\n          )}\n          {!!notifcationCount && (\n            <BaseBadge\n              label={notifcationCount.toString()}\n              labelStyles={twMerge('text-[10px]', notificationCountTextStyles)}\n              containerStyles={twMerge(\n                classNames(\n                  'flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5',\n                  `${!isShow && 'absolute right-0 top-0'}`\n                ),\n                notificationCountContainerStyles\n              )}\n            />\n          )}\n        </div>\n      </button>\n\n      <div\n        className={`flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out pl-8 ${\n          expanded && isShow ? 'max-h-screen bg-blue-maastrichtBlue' : 'max-h-0 '\n        }`}\n        style={{ backgroundColor: expanded && isShow ? itemMenuActiveBgColor : 'transparent' }}\n      >\n        {subMenu.map((item, index) => (\n          <button\n            key={index}\n            onClick={() => onClickNav(item)}\n            className={twMerge(\n              `flex flex-1 py-2 bg-transparent text-light-whiteSolid hover:text-blue-buttonBlue ${\n                item.navLink === activeId ? 'ml-3 text-blue-buttonBlue' : ''\n              }`,\n              itemSubMenuContainerStyles\n            )}\n            style={{ color: item.navLink === activeId ? itemSubMenuActiveTextColor : undefined }}\n          >\n            <BaseText\n              label={item.title}\n              className={`text-xs text-left line-clamp-1 w-full ${\n                item.navLink === activeId ? 'font-semibold' : ''\n              } `}\n            />\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nconst Sidebar = ({\n  activeId,\n  activeParent,\n  data,\n  isCollapsed,\n  notificationCountContainerStyles,\n  notificationCountTextStyles,\n  containerStyles,\n  itemMenuContainerStyles,\n  itemMenuIconStyles,\n  itemMenuTitleStyles,\n  itemMenuActiveBgColor,\n  itemSubMenuContainerStyles,\n  itemSubMenuActiveTextColor,\n  onClickCollapsible,\n  onClickNav,\n  children\n}: SidebarInterface) => {\n  const header = getChildrenOnDisplayName(children, 'Header');\n  const footer = getChildrenOnDisplayName(children, 'Footer');\n  const userProfile = getChildrenOnDisplayName(children, 'UserProfile');\n\n  const [selectedId, setSelectedId] = React.useState<string>(activeParent);\n\n  const arrayChildren = Children.toArray(children);\n\n  return (\n    <div\n      className={twMerge(\n        'flex flex-col relative bg-blue-darkBlue h-full px-2 pb-2 ease-in-out duration-300 w-[220px]',\n        containerStyles\n      )}\n    >\n      {/* Header */}\n      {header}\n\n      {/* Toggle */}\n      <button type='button' onClick={() => onClickCollapsible()} className='p-0 bg-transparent'>\n        <div className='flex items-center justify-center w-6 h-6 absolute top-14 -right-3 bg-light-whiteSolid rounded-lg'>\n          <Icon\n            name={isCollapsed ? 'chevronDoubleArrowRight' : 'chevronDoubleArrowLeft'}\n            className='w-3 h-3 fill-blue-yaleBlue'\n          />\n        </div>\n      </button>\n\n      {/* Content */}\n      <div className='flex flex-1 flex-col overflow-auto mb-4 scrollbar scrollbar-none'>\n        <div className='flex flex-col justify-start h-full'>\n          {data.map((item, index) => (\n            <SidebarMenu\n              key={index}\n              selectedId={selectedId}\n              id={item.id}\n              title={item.title}\n              icon={item.icon}\n              permission={item.permission}\n              isCollapsed={isCollapsed}\n              activeId={activeId}\n              subMenu={item.subMenu}\n              onClickCollapsible={() => onClickCollapsible()}\n              onExpand={(id) => setSelectedId(id)}\n              onClickNav={(navLink) => onClickNav(navLink)}\n              notifcationCount={item.notifcationCount}\n              notificationCountContainerStyles={notificationCountContainerStyles}\n              notificationCountTextStyles={notificationCountTextStyles}\n              itemMenuActiveBgColor={itemMenuActiveBgColor}\n              itemMenuContainerStyles={itemMenuContainerStyles}\n              itemSubMenuActiveTextColor={itemSubMenuActiveTextColor}\n              itemSubMenuContainerStyles={itemSubMenuContainerStyles}\n              iconStyles={itemMenuIconStyles}\n              titleStyles={itemMenuTitleStyles}\n            />\n          ))}\n        </div>\n      </div>\n\n      <div className='mb-2'>\n        {Children.map(arrayChildren, (item, index) => {\n          const child = getChildrenOnDisplayName(item, 'Popover');\n          return (\n            <div key={index} className='w-full'>\n              {child}\n            </div>\n          );\n        })}\n      </div>\n\n      {/* User */}\n      {userProfile}\n\n      {/* Company */}\n      {footer}\n    </div>\n  );\n};\n\nconst Popover = ({\n  isCollapsed,\n  label,\n  labelStyles,\n  icon,\n  iconStyles,\n  notificationCount,\n  notificationCountContainerStyles,\n  notificationCountTextStyles,\n  position,\n  iconTriangleStyles,\n  iconTriangleContainerStyles,\n  panelContainerStyles,\n  offsetX,\n  offsetY,\n  containerStyles,\n  children\n}: SidebarPopoverInterface) => {\n  const [isShow, setIsShow] = React.useState<boolean>(false);\n\n  useEffect(() => {\n    if (!isCollapsed) {\n      setTimeout(() => {\n        setIsShow(true);\n      }, 200);\n    } else {\n      setIsShow(false);\n    }\n  }, [isCollapsed]);\n\n  const panel = getChildrenOnDisplayName(children, 'PopoverPanel');\n\n  return (\n    <BasePopover\n      position={position || 'right-center'}\n      iconTriangleStyles={iconTriangleStyles}\n      iconTriangleContainerStyles={iconTriangleContainerStyles}\n      panelContainerStyles={panelContainerStyles}\n      offsetX={offsetX}\n      offsetY={offsetY}\n    >\n      <BasePopover.Button>\n        <div\n          className={twMerge(\n            'h-8 pr-4 pl-3 w-full bg-transparent relative flex flex-row items-center hover:bg-blue-maastrichtBlue rounded-lg gap-x-2',\n            containerStyles\n          )}\n        >\n          <div className='w-4 h-4'>\n            <Icon name={icon} className={twMerge('w-4 h-4 fill-light-whiteSolid', iconStyles)} />\n          </div>\n          {isShow && (\n            <div className='flex flex-1'>\n              <BaseText\n                label={label}\n                className={twMerge(\n                  'text-light-whiteSolid text-sm text-left line-clamp-1 w-full',\n                  labelStyles\n                )}\n              />\n            </div>\n          )}\n          {!!notificationCount && (\n            <BaseBadge\n              label={notificationCount.toString()}\n              labelStyles={twMerge('text-[10px]', notificationCountTextStyles)}\n              containerStyles={twMerge(\n                classNames(\n                  'flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5',\n                  `${!isShow && 'absolute right-0 top-0'}`\n                ),\n                notificationCountContainerStyles\n              )}\n            />\n          )}\n        </div>\n      </BasePopover.Button>\n      <BasePopover.Panel>{panel}</BasePopover.Panel>\n    </BasePopover>\n  );\n};\nPopover.displayName = 'Popover';\nSidebar.Popover = Popover;\n\nconst PopoverPanel = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>;\n};\nPopoverPanel.displayName = 'PopoverPanel';\nSidebar.PopoverPanel = PopoverPanel;\n\nconst Header = ({\n  isCollapsed,\n  appLogoClosed,\n  appLogoClosedStyles,\n  appLogoOpened,\n  appLogoOpenedStyles,\n  containerStyles,\n  onClickHeaderSidebar,\n  children\n}: SidebarHeaderInterface) => {\n  // TODO: create hooks for code below\n  const [isShow, setIsShow] = React.useState<boolean>(false);\n  useEffect(() => {\n    if (!isCollapsed) {\n      setTimeout(() => {\n        setIsShow(true);\n      }, 200);\n    } else {\n      setIsShow(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <>\n      {children ? (\n        children\n      ) : (\n        <div\n          className={twMerge(\n            'flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer',\n            containerStyles\n          )}\n          onClick={() => onClickHeaderSidebar?.()}\n        >\n          {isShow ? (\n            <div className='flex flex-1'>\n              <img\n                src={\n                  appLogoOpened ||\n                  'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg'\n                }\n                className={twMerge('w-[113px] h-7', appLogoOpenedStyles)}\n              />\n            </div>\n          ) : (\n            <img\n              src={\n                appLogoClosed ||\n                'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n              }\n              className={twMerge('w-[22px] h-[22px]', appLogoClosedStyles)}\n            />\n          )}\n        </div>\n      )}\n    </>\n  );\n};\nHeader.displayName = 'Header';\nSidebar.Header = Header;\n\nconst UserProfile = ({\n  isCollapsed,\n  userLabel,\n  userLabelStyles,\n  userAvatar,\n  userAvatarFallback,\n  userAvatarFallbackStyles,\n  userAvatarStyles,\n  containerStyles,\n  // Panel\n  panelContainerStyles,\n  titleAtPanel,\n  titleAtPanelStyles,\n  userAvatarAtPanel,\n  userAvatarAtPanelStyles,\n  userAvatarFallbackAtPanel,\n  userAvatarFallbackAtPanelStyles,\n  userLabelAtPanel,\n  userLabelAtPanelStyles,\n  userEmailAtPanel,\n  userEmailAtPanelStyles,\n  manageAccountLabelAtPanel,\n  manageAccountLabelAtPanelStyles,\n  iconManageAccountAtPanel,\n  iconManageAccountAtPanelStyles,\n  onClickManageAccount,\n  translationLabelAtPanel,\n  translationLabelAtPanelStyles,\n  iconTranslationAtPanel,\n  iconTranslationAtPanelStyles,\n  onClickTranslation,\n  logoutLabelAtPanel,\n  logoutLabelAtPanelStyles,\n  iconLogoutAtPanel,\n  iconLogoutAtPanelStyles,\n  onClickLogout,\n  children,\n  offsetX,\n  offsetY\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarUserProfileInterface) => {\n  const [isShow, setIsShow] = React.useState<boolean>(false);\n  useEffect(() => {\n    if (!isCollapsed) {\n      setTimeout(() => {\n        setIsShow(true);\n      }, 200);\n    } else {\n      setIsShow(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <>\n      {children ? (\n        children\n      ) : (\n        <div className={twMerge('flex flex-col w-full', containerStyles)}>\n          <Divider />\n          <div className='relative min-h-[56px] flex items-center w-full'>\n            <BasePopover offsetX={offsetX} offsetY={offsetY}>\n              <BasePopover.Button>\n                <div\n                  className={twMerge(\n                    'w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg hover:bg-blue-maastrichtBlue cursor-pointer',\n                    containerStyles\n                  )}\n                >\n                  {userAvatar ? (\n                    <img\n                      src={\n                        userAvatar ||\n                        'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n                      }\n                      className={twMerge(\n                        'w-6 h-6 bg-dark-gumbo rounded overflow-hidden object-cover',\n                        userAvatarStyles\n                      )}\n                    />\n                  ) : (\n                    <div\n                      className={twMerge(\n                        'flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded',\n                        userAvatarStyles\n                      )}\n                    >\n                      <BaseText\n                        label={userAvatarFallback}\n                        className={twMerge(\n                          'font-semibold text-light-whiteSolid text-[10px]',\n                          userAvatarFallbackStyles\n                        )}\n                      />\n                    </div>\n                  )}\n\n                  {isShow && (\n                    <div className='flex flex-1'>\n                      <BaseText\n                        label={userLabel || ''}\n                        className={twMerge(\n                          'text-light-whiteSolid line-clamp-1 w-full text-left',\n                          userLabelStyles\n                        )}\n                      />\n                    </div>\n                  )}\n                </div>\n              </BasePopover.Button>\n              <BasePopover.Panel>\n                <div\n                  className={twMerge(\n                    'flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]',\n                    panelContainerStyles\n                  )}\n                >\n                  <div className='px-4'>\n                    <BaseText\n                      label={titleAtPanel || 'Account'}\n                      className={twMerge(\n                        'text-sm font-semibold text-dark-blackCoral',\n                        titleAtPanelStyles\n                      )}\n                    />\n                  </div>\n                  <div className='flex flex-row items-center px-4 gap-x-2 mt-2'>\n                    {userAvatarAtPanel ? (\n                      <img\n                        src={\n                          userAvatarAtPanel ||\n                          'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n                        }\n                        className={twMerge(\n                          'w-8 h-8 bg-dark-gumbo rounded overflow-hidden object-cover',\n                          userAvatarAtPanelStyles\n                        )}\n                      />\n                    ) : (\n                      <div\n                        className={twMerge(\n                          'flex items-center justify-center w-8 h-8 bg-dark-gumbo rounded',\n                          userAvatarAtPanelStyles\n                        )}\n                      >\n                        <BaseText\n                          label={userAvatarFallbackAtPanel}\n                          className={twMerge(\n                            'font-semibold text-light-whiteSolid text-[10px]',\n                            userAvatarFallbackAtPanelStyles\n                          )}\n                        />\n                      </div>\n                    )}\n\n                    <div className='flex flex-col'>\n                      <BaseText\n                        label={userLabelAtPanel || ''}\n                        className={twMerge(\n                          'w-full line-clamp-1 font-normal text-sm text-dark-blackCoral',\n                          userLabelAtPanelStyles\n                        )}\n                      />\n                      <BaseText\n                        label={userEmailAtPanel || ''}\n                        className={twMerge(\n                          'w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo',\n                          userEmailAtPanelStyles\n                        )}\n                      />\n                    </div>\n                  </div>\n                  <button\n                    className='flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent'\n                    onClick={() => onClickManageAccount?.()}\n                  >\n                    <Icon\n                      name={iconManageAccountAtPanel || 'configuration'}\n                      className={twMerge('w-4 h-4 fill-dark-gumbo', iconManageAccountAtPanelStyles)}\n                    />\n                    <BaseText\n                      label={manageAccountLabelAtPanel || 'Manage Account'}\n                      className={twMerge(\n                        'text-sm font-normal text-dark-blackCoral',\n                        manageAccountLabelAtPanelStyles\n                      )}\n                    />\n                  </button>\n                  <button\n                    className='flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent'\n                    onClick={() => onClickTranslation?.()}\n                  >\n                    <Icon\n                      name={iconTranslationAtPanel || 'language'}\n                      className={twMerge('w-4 h-4 fill-dark-gumbo', iconTranslationAtPanelStyles)}\n                    />\n                    <BaseText\n                      label={translationLabelAtPanel || 'Translate Page'}\n                      className={twMerge(\n                        'text-sm font-normal text-dark-blackCoral',\n                        translationLabelAtPanelStyles\n                      )}\n                    />\n                  </button>\n                  <div className='h-[1px] w-full bg-dark-silver' />\n                  <button\n                    className='flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent'\n                    onClick={() => onClickLogout?.()}\n                  >\n                    <Icon\n                      name={iconLogoutAtPanel || 'logout'}\n                      className={twMerge('w-4 h-4 fill-dark-gumbo', iconLogoutAtPanelStyles)}\n                    />\n                    <BaseText\n                      label={logoutLabelAtPanel || 'Logout'}\n                      className={twMerge(\n                        'text-sm font-normal text-dark-blackCoral',\n                        logoutLabelAtPanelStyles\n                      )}\n                    />\n                  </button>\n                </div>\n              </BasePopover.Panel>\n            </BasePopover>\n          </div>\n          <Divider />\n        </div>\n      )}\n    </>\n  );\n};\nUserProfile.displayName = 'UserProfile';\nSidebar.UserProfile = UserProfile;\n\nconst Footer = ({\n  isCollapsed,\n  isShowCompanyProfile,\n  companyName,\n  companyNameStyles,\n  companyLogo,\n  companyLogoStyles,\n  companyLogoFallback,\n  companlogoFallbackStyles,\n  companyLogoContainerStyles,\n  isShowButtonChangeCompany,\n  buttonChangeCompanyOnClick,\n  buttonChangeCompanyLabel,\n  buttonChangeCompanyStyles,\n  buttonChangeCompanyIconName,\n  buttonChangeCompanyIconStyles,\n  appName,\n  appVersion,\n  children\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarFooterInterface) => {\n  const [isShow, setIsShow] = React.useState<boolean>(false);\n  useEffect(() => {\n    if (!isCollapsed) {\n      setTimeout(() => {\n        setIsShow(true);\n      }, 200);\n    } else {\n      setIsShow(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <>\n      {children ? (\n        children\n      ) : (\n        <div className='pt-2 px-2'>\n          {isShowCompanyProfile && (\n            <div className='flex flex-row items-center gap-x-2'>\n              {companyLogo ? (\n                <div\n                  className={twMerge(\n                    'flex items-center justify-center w-6 h-6 bg-gray-50 rounded',\n                    companyLogoContainerStyles\n                  )}\n                >\n                  <img\n                    src={\n                      companyLogo ||\n                      'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n                    }\n                    className={twMerge('w-4 h-4', companyLogoStyles)}\n                  />\n                </div>\n              ) : (\n                <div\n                  className={twMerge(\n                    'flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded',\n                    companyLogoContainerStyles\n                  )}\n                >\n                  <BaseText\n                    label={companyLogoFallback}\n                    className={twMerge(\n                      'font-semibold text-light-whiteSolid text-[10px]',\n                      companlogoFallbackStyles\n                    )}\n                  />\n                </div>\n              )}\n              {isShow && (\n                <div className='flex flex-1'>\n                  <BaseText\n                    label={companyName || 'Gajicermat'}\n                    className={twMerge(\n                      'text-light-whiteSolid text-xs line-clamp-2',\n                      companyNameStyles\n                    )}\n                  />\n                </div>\n              )}\n            </div>\n          )}\n\n          {isShowButtonChangeCompany && (\n            <div className='h-14 w-full flex flex-row items-center'>\n              <BaseButton\n                variant='secondary'\n                onClick={() => buttonChangeCompanyOnClick?.()}\n                label={isShow ? buttonChangeCompanyLabel || 'Select Company' : ''}\n                className={twMerge(\n                  classNames(\n                    'flex items-center justify-center p-0 h-6 ml-0  border border-solid border-blue-yaleBlue text-blue-yaleBlue',\n                    isShow ? 'w-full' : 'w-6'\n                  ),\n                  buttonChangeCompanyStyles\n                )}\n                rightIcon={isShow ? undefined : buttonChangeCompanyIconName || 'refresh'}\n                rightIconStyles={twMerge('ml-0 w-3 h-3', buttonChangeCompanyIconStyles)}\n              />\n            </div>\n          )}\n\n          <div className='flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full'>\n            {isShow ? (\n              <>\n                <div className='flex flex-1'>\n                  <BaseText\n                    label={appName || '© Gajicermat Digital Mandiri'}\n                    className='text-light-whiteSolid text-[10px] line-clamp-1 w-full text-right'\n                  />\n                </div>\n                <div className='w-[1px] h-3 bg-light-whiteSolid' />\n                <div className='flex flex-1'>\n                  <BaseText\n                    label={appVersion || 'Version 0.0.0'}\n                    className='text-light-whiteSolid text-[10px] line-clamp-1 w-full text-left'\n                  />\n                </div>\n              </>\n            ) : (\n              <div className='w-[1px] h-3 ' />\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\nFooter.displayName = 'Footer';\nSidebar.Footer = Footer;\n\nexport default Sidebar;\n"],"names":["Divider","_jsx","className","SidebarMenu","id","title","titleStyles","icon","iconStyles","subMenu","isCollapsed","activeId","selectedId","notificationCountContainerStyles","notificationCountTextStyles","itemMenuContainerStyles","itemMenuActiveBgColor","itemSubMenuContainerStyles","itemSubMenuActiveTextColor","onClickCollapsible","onExpand","onClickNav","notifcationCount","expanded","isShow","setIsShow","React","useState","useEffect","setTimeout","_jsxs","jsxs","Object","assign","twMerge","style","backgroundColor","undefined","children","onClick","Icon","name","BaseText","label","jsx","BaseBadge","toString","labelStyles","containerStyles","classNames","map","item","index","navLink","color","Sidebar","activeParent","data","itemMenuIconStyles","itemMenuTitleStyles","header","getChildrenOnDisplayName","footer","userProfile","setSelectedId","arrayChildren","Children","toArray","type","permission","child","Popover","notificationCount","position","iconTriangleStyles","iconTriangleContainerStyles","panelContainerStyles","offsetX","offsetY","panel","BasePopover","Button","Panel","displayName","PopoverPanel","_Fragment","Fragment","Header","appLogoClosed","appLogoClosedStyles","appLogoOpened","appLogoOpenedStyles","onClickHeaderSidebar","src","UserProfile","userLabel","userLabelStyles","userAvatar","userAvatarFallback","userAvatarFallbackStyles","userAvatarStyles","titleAtPanel","titleAtPanelStyles","userAvatarAtPanel","userAvatarAtPanelStyles","userAvatarFallbackAtPanel","userAvatarFallbackAtPanelStyles","userLabelAtPanel","userLabelAtPanelStyles","userEmailAtPanel","userEmailAtPanelStyles","manageAccountLabelAtPanel","manageAccountLabelAtPanelStyles","iconManageAccountAtPanel","iconManageAccountAtPanelStyles","onClickManageAccount","translationLabelAtPanel","translationLabelAtPanelStyles","iconTranslationAtPanel","iconTranslationAtPanelStyles","onClickTranslation","logoutLabelAtPanel","logoutLabelAtPanelStyles","iconLogoutAtPanel","iconLogoutAtPanelStyles","onClickLogout","Footer","isShowCompanyProfile","companyName","companyNameStyles","companyLogo","companyLogoStyles","companyLogoFallback","companlogoFallbackStyles","companyLogoContainerStyles","isShowButtonChangeCompany","buttonChangeCompanyOnClick","buttonChangeCompanyLabel","buttonChangeCompanyStyles","buttonChangeCompanyIconName","buttonChangeCompanyIconStyles","appName","appVersion","BaseButton","variant","rightIcon","rightIconStyles"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/blocks/Sidebar/Sidebar.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-identical-functions */\nimport classNames from 'classnames';\nimport React, { Children, useEffect } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { BaseBadge, BaseButton, BasePopover, BaseText, Icon } from '../../components';\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport {\n  SidebarFooterInterface,\n  SidebarHeaderInterface,\n  SidebarInterface,\n  SidebarMenuExtendedInterface,\n  SidebarMenuInterface,\n  SidebarPopoverInterface,\n  SidebarUserProfileInterface\n} from './Sidebar.type';\n\nconst Divider = () => <div className='w-full h-[1px] bg-light-whiteSolid' />;\n\n// TODO: tidy up interface\nconst SidebarMenu = ({\n  id,\n  title,\n  titleStyles,\n  icon,\n  iconStyles,\n  subMenu,\n  isCollapsed,\n  activeId,\n  selectedId,\n  notificationCountContainerStyles,\n  notificationCountTextStyles,\n  itemMenuContainerStyles,\n  itemMenuActiveContainerStyles,\n  itemMenuActiveBgColor,\n  itemSubMenuContainerStyles,\n  itemSubMenuActiveContainerStyles,\n  itemSubMenuActiveTextColor,\n  onClickCollapsible,\n  onExpand,\n  onClickNav,\n  notifcationCount\n}: SidebarMenuInterface & SidebarMenuExtendedInterface) => {\n  const expanded = selectedId === id;\n  const [isShow, setIsShow] = React.useState<boolean>(false);\n\n  useEffect(() => {\n    if (!isCollapsed) {\n      setTimeout(() => {\n        setIsShow(true);\n      }, 200);\n    } else {\n      setIsShow(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <div\n      className={twMerge(\n        `overflow-hidden hover:bg-blue-maastrichtBlue rounded-lg ${\n          expanded ? itemMenuActiveContainerStyles || 'bg-blue-maastrichtBlue' : 'bg-transparent'\n        }`,\n        itemMenuContainerStyles\n      )}\n      style={{ backgroundColor: expanded ? itemMenuActiveBgColor : undefined }}\n    >\n      <button\n        onClick={() => {\n          if (!isShow && !expanded) onClickCollapsible();\n\n          if (expanded) {\n            onExpand('');\n            return;\n          }\n\n          onExpand(id);\n        }}\n        className='h-8 pr-4 pl-3 w-full bg-transparent relative'\n      >\n        <div className='flex flex-row items-center gap-x-2'>\n          <div className='w-4 h-4'>\n            <Icon name={icon} className={twMerge('w-4 h-4 fill-light-whiteSolid', iconStyles)} />\n          </div>\n          {isShow && (\n            <div className='flex flex-1'>\n              <BaseText\n                label={title}\n                className={twMerge(\n                  'text-light-whiteSolid text-sm text-left line-clamp-1 w-full',\n                  titleStyles\n                )}\n              />\n            </div>\n          )}\n          {!!notifcationCount && (\n            <BaseBadge\n              label={notifcationCount.toString()}\n              labelStyles={twMerge('text-[10px]', notificationCountTextStyles)}\n              containerStyles={twMerge(\n                classNames(\n                  'flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5',\n                  `${!isShow && 'absolute right-0 top-0'}`\n                ),\n                notificationCountContainerStyles\n              )}\n            />\n          )}\n        </div>\n      </button>\n\n      <div\n        className={`flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out ${\n          expanded && isShow ? 'max-h-screen bg-blue-maastrichtBlue' : 'max-h-0 '\n        }`}\n        style={{ backgroundColor: expanded && isShow ? itemMenuActiveBgColor : 'transparent' }}\n      >\n        {subMenu.map((item, index) => (\n          <button\n            key={index}\n            onClick={() => onClickNav(item)}\n            className={twMerge(\n              `flex flex-1 py-2 bg-transparent text-light-whiteSolid hover:text-blue-buttonBlue pl-8 ${\n                item.navLink === activeId\n                  ? `pl-11 ${itemSubMenuActiveContainerStyles || 'text-blue-buttonBlue'}`\n                  : ''\n              }`,\n              itemSubMenuContainerStyles\n            )}\n            style={{ color: item.navLink === activeId ? itemSubMenuActiveTextColor : undefined }}\n          >\n            <BaseText\n              label={item.title}\n              className={`text-xs text-left line-clamp-1 w-full ${\n                item.navLink === activeId ? 'font-semibold' : ''\n              } `}\n            />\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nconst Sidebar = ({\n  activeId,\n  activeParent,\n  data,\n  isCollapsed,\n  notificationCountContainerStyles,\n  notificationCountTextStyles,\n  containerStyles,\n  itemMenuContainerStyles,\n  itemMenuIconStyles,\n  itemMenuTitleStyles,\n  itemMenuActiveBgColor,\n  itemSubMenuContainerStyles,\n  itemSubMenuActiveTextColor,\n  toggleButtonContainerStyles,\n  toggleIconOpenName,\n  toggleIconCloseName,\n  toggleIconStyles,\n  onClickCollapsible,\n  onClickNav,\n  children\n}: SidebarInterface) => {\n  const header = getChildrenOnDisplayName(children, 'Header');\n  const footer = getChildrenOnDisplayName(children, 'Footer');\n  const userProfile = getChildrenOnDisplayName(children, 'UserProfile');\n\n  const [selectedId, setSelectedId] = React.useState<string>(activeParent);\n\n  const arrayChildren = Children.toArray(children);\n\n  return (\n    <div\n      className={twMerge(\n        'flex flex-col relative bg-blue-darkBlue h-full px-2 pb-2 ease-in-out duration-300 w-[220px]',\n        containerStyles\n      )}\n    >\n      {/* Header */}\n      {header}\n\n      {/* Toggle */}\n      <button type='button' onClick={() => onClickCollapsible()} className='p-0 bg-transparent'>\n        <div\n          className={twMerge(\n            'flex items-center justify-center w-6 h-6 absolute top-14 -right-3 bg-light-whiteSolid rounded-lg',\n            toggleButtonContainerStyles\n          )}\n        >\n          <Icon\n            name={\n              isCollapsed\n                ? toggleIconCloseName || 'chevronDoubleArrowRight'\n                : toggleIconOpenName || 'chevronDoubleArrowLeft'\n            }\n            className={twMerge('w-3 h-3 fill-blue-yaleBlue', toggleIconStyles)}\n          />\n        </div>\n      </button>\n\n      {/* Content */}\n      <div className='flex flex-1 flex-col overflow-auto mb-4 scrollbar scrollbar-none'>\n        <div className='flex flex-col justify-start h-full'>\n          {data.map((item, index) => (\n            <SidebarMenu\n              key={index}\n              selectedId={selectedId}\n              id={item.id}\n              title={item.title}\n              icon={item.icon}\n              permission={item.permission}\n              isCollapsed={isCollapsed}\n              activeId={activeId}\n              subMenu={item.subMenu}\n              onClickCollapsible={() => onClickCollapsible()}\n              onExpand={(id) => setSelectedId(id)}\n              onClickNav={(navLink) => onClickNav(navLink)}\n              notifcationCount={item.notifcationCount}\n              notificationCountContainerStyles={notificationCountContainerStyles}\n              notificationCountTextStyles={notificationCountTextStyles}\n              itemMenuActiveBgColor={itemMenuActiveBgColor}\n              itemMenuContainerStyles={itemMenuContainerStyles}\n              itemSubMenuActiveTextColor={itemSubMenuActiveTextColor}\n              itemSubMenuContainerStyles={itemSubMenuContainerStyles}\n              iconStyles={itemMenuIconStyles}\n              titleStyles={itemMenuTitleStyles}\n            />\n          ))}\n        </div>\n      </div>\n\n      <div className='mb-2'>\n        {Children.map(arrayChildren, (item, index) => {\n          const child = getChildrenOnDisplayName(item, 'Popover');\n          return (\n            <div key={index} className='w-full'>\n              {child}\n            </div>\n          );\n        })}\n      </div>\n\n      {/* User */}\n      {userProfile}\n\n      {/* Company */}\n      {footer}\n    </div>\n  );\n};\n\nconst Popover = ({\n  isCollapsed,\n  label,\n  labelStyles,\n  icon,\n  iconStyles,\n  notificationCount,\n  notificationCountContainerStyles,\n  notificationCountTextStyles,\n  position,\n  iconTriangleStyles,\n  iconTriangleContainerStyles,\n  panelContainerStyles,\n  offsetX,\n  offsetY,\n  containerStyles,\n  children\n}: SidebarPopoverInterface) => {\n  const [isShow, setIsShow] = React.useState<boolean>(false);\n\n  useEffect(() => {\n    if (!isCollapsed) {\n      setTimeout(() => {\n        setIsShow(true);\n      }, 200);\n    } else {\n      setIsShow(false);\n    }\n  }, [isCollapsed]);\n\n  const panel = getChildrenOnDisplayName(children, 'PopoverPanel');\n\n  return (\n    <BasePopover\n      position={position || 'right-center'}\n      iconTriangleStyles={iconTriangleStyles}\n      iconTriangleContainerStyles={iconTriangleContainerStyles}\n      panelContainerStyles={panelContainerStyles}\n      offsetX={offsetX}\n      offsetY={offsetY}\n    >\n      <BasePopover.Button>\n        <div\n          className={twMerge(\n            'h-8 pr-4 pl-3 w-full bg-transparent relative flex flex-row items-center hover:bg-blue-maastrichtBlue rounded-lg gap-x-2',\n            containerStyles\n          )}\n        >\n          <div className='w-4 h-4'>\n            <Icon name={icon} className={twMerge('w-4 h-4 fill-light-whiteSolid', iconStyles)} />\n          </div>\n          {isShow && (\n            <div className='flex flex-1'>\n              <BaseText\n                label={label}\n                className={twMerge(\n                  'text-light-whiteSolid text-sm text-left line-clamp-1 w-full',\n                  labelStyles\n                )}\n              />\n            </div>\n          )}\n          {!!notificationCount && (\n            <BaseBadge\n              label={notificationCount.toString()}\n              labelStyles={twMerge('text-[10px]', notificationCountTextStyles)}\n              containerStyles={twMerge(\n                classNames(\n                  'flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5',\n                  `${!isShow && 'absolute right-0 top-0'}`\n                ),\n                notificationCountContainerStyles\n              )}\n            />\n          )}\n        </div>\n      </BasePopover.Button>\n      <BasePopover.Panel>{panel}</BasePopover.Panel>\n    </BasePopover>\n  );\n};\nPopover.displayName = 'Popover';\nSidebar.Popover = Popover;\n\nconst PopoverPanel = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>;\n};\nPopoverPanel.displayName = 'PopoverPanel';\nSidebar.PopoverPanel = PopoverPanel;\n\nconst Header = ({\n  isCollapsed,\n  appLogoClosed,\n  appLogoClosedStyles,\n  appLogoOpened,\n  appLogoOpenedStyles,\n  containerStyles,\n  onClickHeaderSidebar,\n  children\n}: SidebarHeaderInterface) => {\n  // TODO: create hooks for code below\n  const [isShow, setIsShow] = React.useState<boolean>(false);\n  useEffect(() => {\n    if (!isCollapsed) {\n      setTimeout(() => {\n        setIsShow(true);\n      }, 200);\n    } else {\n      setIsShow(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <>\n      {children ? (\n        children\n      ) : (\n        <div\n          className={twMerge(\n            'flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer',\n            containerStyles\n          )}\n          onClick={() => onClickHeaderSidebar?.()}\n        >\n          {isShow ? (\n            <div className='flex flex-1'>\n              <img\n                src={\n                  appLogoOpened ||\n                  'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg'\n                }\n                className={twMerge('w-[113px] h-7', appLogoOpenedStyles)}\n              />\n            </div>\n          ) : (\n            <img\n              src={\n                appLogoClosed ||\n                'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n              }\n              className={twMerge('w-[22px] h-[22px]', appLogoClosedStyles)}\n            />\n          )}\n        </div>\n      )}\n    </>\n  );\n};\nHeader.displayName = 'Header';\nSidebar.Header = Header;\n\nconst UserProfile = ({\n  isCollapsed,\n  userLabel,\n  userLabelStyles,\n  userAvatar,\n  userAvatarFallback,\n  userAvatarFallbackStyles,\n  userAvatarStyles,\n  containerStyles,\n  // Panel\n  panelContainerStyles,\n  titleAtPanel,\n  titleAtPanelStyles,\n  userAvatarAtPanel,\n  userAvatarAtPanelStyles,\n  userAvatarFallbackAtPanel,\n  userAvatarFallbackAtPanelStyles,\n  userLabelAtPanel,\n  userLabelAtPanelStyles,\n  userEmailAtPanel,\n  userEmailAtPanelStyles,\n  manageAccountLabelAtPanel,\n  manageAccountLabelAtPanelStyles,\n  iconManageAccountAtPanel,\n  iconManageAccountAtPanelStyles,\n  onClickManageAccount,\n  translationLabelAtPanel,\n  translationLabelAtPanelStyles,\n  iconTranslationAtPanel,\n  iconTranslationAtPanelStyles,\n  onClickTranslation,\n  logoutLabelAtPanel,\n  logoutLabelAtPanelStyles,\n  iconLogoutAtPanel,\n  iconLogoutAtPanelStyles,\n  onClickLogout,\n  children,\n  offsetX,\n  offsetY\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarUserProfileInterface) => {\n  const [isShow, setIsShow] = React.useState<boolean>(false);\n  useEffect(() => {\n    if (!isCollapsed) {\n      setTimeout(() => {\n        setIsShow(true);\n      }, 200);\n    } else {\n      setIsShow(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <>\n      {children ? (\n        children\n      ) : (\n        <div className={twMerge('flex flex-col w-full')}>\n          <Divider />\n          <div className='relative min-h-[56px] flex items-center w-full'>\n            <BasePopover offsetX={offsetX} offsetY={offsetY}>\n              <BasePopover.Button>\n                <div\n                  className={twMerge(\n                    'w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg hover:bg-blue-maastrichtBlue cursor-pointer',\n                    containerStyles\n                  )}\n                >\n                  {userAvatar ? (\n                    <img\n                      src={\n                        userAvatar ||\n                        'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n                      }\n                      className={twMerge(\n                        'w-6 h-6 bg-dark-gumbo rounded overflow-hidden object-cover',\n                        userAvatarStyles\n                      )}\n                    />\n                  ) : (\n                    <div\n                      className={twMerge(\n                        'flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded',\n                        userAvatarStyles\n                      )}\n                    >\n                      <BaseText\n                        label={userAvatarFallback}\n                        className={twMerge(\n                          'font-semibold text-light-whiteSolid text-[10px]',\n                          userAvatarFallbackStyles\n                        )}\n                      />\n                    </div>\n                  )}\n\n                  {isShow && (\n                    <div className='flex flex-1'>\n                      <BaseText\n                        label={userLabel || ''}\n                        className={twMerge(\n                          'text-light-whiteSolid line-clamp-1 w-full text-left',\n                          userLabelStyles\n                        )}\n                      />\n                    </div>\n                  )}\n                </div>\n              </BasePopover.Button>\n              <BasePopover.Panel>\n                <div\n                  className={twMerge(\n                    'flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]',\n                    panelContainerStyles\n                  )}\n                >\n                  <div className='px-4'>\n                    <BaseText\n                      label={titleAtPanel || 'Account'}\n                      className={twMerge(\n                        'text-sm font-semibold text-dark-blackCoral',\n                        titleAtPanelStyles\n                      )}\n                    />\n                  </div>\n                  <div className='flex flex-row items-center px-4 gap-x-2 mt-2'>\n                    {userAvatarAtPanel ? (\n                      <img\n                        src={\n                          userAvatarAtPanel ||\n                          'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n                        }\n                        className={twMerge(\n                          'w-8 h-8 bg-dark-gumbo rounded overflow-hidden object-cover',\n                          userAvatarAtPanelStyles\n                        )}\n                      />\n                    ) : (\n                      <div\n                        className={twMerge(\n                          'flex items-center justify-center w-8 h-8 bg-dark-gumbo rounded',\n                          userAvatarAtPanelStyles\n                        )}\n                      >\n                        <BaseText\n                          label={userAvatarFallbackAtPanel}\n                          className={twMerge(\n                            'font-semibold text-light-whiteSolid text-[10px]',\n                            userAvatarFallbackAtPanelStyles\n                          )}\n                        />\n                      </div>\n                    )}\n\n                    <div className='flex flex-col'>\n                      <BaseText\n                        label={userLabelAtPanel || ''}\n                        className={twMerge(\n                          'w-full line-clamp-1 font-normal text-sm text-dark-blackCoral',\n                          userLabelAtPanelStyles\n                        )}\n                      />\n                      <BaseText\n                        label={userEmailAtPanel || ''}\n                        className={twMerge(\n                          'w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo',\n                          userEmailAtPanelStyles\n                        )}\n                      />\n                    </div>\n                  </div>\n                  <button\n                    className='flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent'\n                    onClick={() => onClickManageAccount?.()}\n                  >\n                    <Icon\n                      name={iconManageAccountAtPanel || 'configuration'}\n                      className={twMerge('w-4 h-4 fill-dark-gumbo', iconManageAccountAtPanelStyles)}\n                    />\n                    <BaseText\n                      label={manageAccountLabelAtPanel || 'Manage Account'}\n                      className={twMerge(\n                        'text-sm font-normal text-dark-blackCoral',\n                        manageAccountLabelAtPanelStyles\n                      )}\n                    />\n                  </button>\n                  <button\n                    className='flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent'\n                    onClick={() => onClickTranslation?.()}\n                  >\n                    <Icon\n                      name={iconTranslationAtPanel || 'language'}\n                      className={twMerge('w-4 h-4 fill-dark-gumbo', iconTranslationAtPanelStyles)}\n                    />\n                    <BaseText\n                      label={translationLabelAtPanel || 'Translate Page'}\n                      className={twMerge(\n                        'text-sm font-normal text-dark-blackCoral',\n                        translationLabelAtPanelStyles\n                      )}\n                    />\n                  </button>\n                  <div className='h-[1px] w-full bg-dark-silver' />\n                  <button\n                    className='flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent'\n                    onClick={() => onClickLogout?.()}\n                  >\n                    <Icon\n                      name={iconLogoutAtPanel || 'logout'}\n                      className={twMerge('w-4 h-4 fill-dark-gumbo', iconLogoutAtPanelStyles)}\n                    />\n                    <BaseText\n                      label={logoutLabelAtPanel || 'Logout'}\n                      className={twMerge(\n                        'text-sm font-normal text-dark-blackCoral',\n                        logoutLabelAtPanelStyles\n                      )}\n                    />\n                  </button>\n                </div>\n              </BasePopover.Panel>\n            </BasePopover>\n          </div>\n          <Divider />\n        </div>\n      )}\n    </>\n  );\n};\nUserProfile.displayName = 'UserProfile';\nSidebar.UserProfile = UserProfile;\n\nconst Footer = ({\n  isCollapsed,\n  isShowCompanyProfile,\n  companyName,\n  companyNameStyles,\n  companyLogo,\n  companyLogoStyles,\n  companyLogoFallback,\n  companlogoFallbackStyles,\n  companyLogoContainerStyles,\n  isShowButtonChangeCompany,\n  buttonChangeCompanyOnClick,\n  buttonChangeCompanyLabel,\n  buttonChangeCompanyStyles,\n  buttonChangeCompanyIconName,\n  buttonChangeCompanyIconStyles,\n  appName,\n  appVersion,\n  children\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarFooterInterface) => {\n  const [isShow, setIsShow] = React.useState<boolean>(false);\n  useEffect(() => {\n    if (!isCollapsed) {\n      setTimeout(() => {\n        setIsShow(true);\n      }, 200);\n    } else {\n      setIsShow(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <>\n      {children ? (\n        children\n      ) : (\n        <div className='pt-2 px-2'>\n          {isShowCompanyProfile && (\n            <div className='flex flex-row items-center gap-x-2'>\n              {companyLogo ? (\n                <div\n                  className={twMerge(\n                    'flex items-center justify-center w-6 h-6 bg-gray-50 rounded',\n                    companyLogoContainerStyles\n                  )}\n                >\n                  <img\n                    src={\n                      companyLogo ||\n                      'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n                    }\n                    className={twMerge('w-4 h-4', companyLogoStyles)}\n                  />\n                </div>\n              ) : (\n                <div\n                  className={twMerge(\n                    'flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded',\n                    companyLogoContainerStyles\n                  )}\n                >\n                  <BaseText\n                    label={companyLogoFallback}\n                    className={twMerge(\n                      'font-semibold text-light-whiteSolid text-[10px]',\n                      companlogoFallbackStyles\n                    )}\n                  />\n                </div>\n              )}\n              {isShow && (\n                <div className='flex flex-1'>\n                  <BaseText\n                    label={companyName || 'Gajicermat'}\n                    className={twMerge(\n                      'text-light-whiteSolid text-xs line-clamp-2',\n                      companyNameStyles\n                    )}\n                  />\n                </div>\n              )}\n            </div>\n          )}\n\n          {isShowButtonChangeCompany && (\n            <div className='h-14 w-full flex flex-row items-center'>\n              <BaseButton\n                variant='secondary'\n                onClick={() => buttonChangeCompanyOnClick?.()}\n                label={isShow ? buttonChangeCompanyLabel || 'Select Company' : ''}\n                className={twMerge(\n                  classNames(\n                    'flex items-center justify-center p-0 h-6 ml-0  border border-solid border-blue-yaleBlue text-blue-yaleBlue',\n                    isShow ? 'w-full' : 'w-6'\n                  ),\n                  buttonChangeCompanyStyles\n                )}\n                rightIcon={isShow ? undefined : buttonChangeCompanyIconName || 'refresh'}\n                rightIconStyles={twMerge('ml-0 w-3 h-3', buttonChangeCompanyIconStyles)}\n              />\n            </div>\n          )}\n\n          <div className='flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full'>\n            {isShow ? (\n              <>\n                <div className='flex flex-1'>\n                  <BaseText\n                    label={appName || '© Gajicermat Digital Mandiri'}\n                    className='text-light-whiteSolid text-[10px] line-clamp-1 w-full text-right'\n                  />\n                </div>\n                <div className='w-[1px] h-3 bg-light-whiteSolid' />\n                <div className='flex flex-1'>\n                  <BaseText\n                    label={appVersion || 'Version 0.0.0'}\n                    className='text-light-whiteSolid text-[10px] line-clamp-1 w-full text-left'\n                  />\n                </div>\n              </>\n            ) : (\n              <div className='w-[1px] h-3 ' />\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\nFooter.displayName = 'Footer';\nSidebar.Footer = Footer;\n\nexport default Sidebar;\n"],"names":["Divider","_jsx","className","SidebarMenu","id","title","titleStyles","icon","iconStyles","subMenu","isCollapsed","activeId","selectedId","notificationCountContainerStyles","notificationCountTextStyles","itemMenuContainerStyles","itemMenuActiveContainerStyles","itemMenuActiveBgColor","itemSubMenuContainerStyles","itemSubMenuActiveContainerStyles","itemSubMenuActiveTextColor","onClickCollapsible","onExpand","onClickNav","notifcationCount","expanded","isShow","setIsShow","React","useState","useEffect","setTimeout","_jsxs","jsxs","Object","assign","twMerge","style","backgroundColor","undefined","children","onClick","jsx","Icon","name","BaseText","label","BaseBadge","toString","labelStyles","containerStyles","classNames","map","item","index","navLink","color","Sidebar","activeParent","data","itemMenuIconStyles","itemMenuTitleStyles","toggleButtonContainerStyles","toggleIconOpenName","toggleIconCloseName","toggleIconStyles","header","getChildrenOnDisplayName","footer","userProfile","setSelectedId","arrayChildren","Children","toArray","type","permission","child","Popover","notificationCount","position","iconTriangleStyles","iconTriangleContainerStyles","panelContainerStyles","offsetX","offsetY","panel","BasePopover","Button","Panel","displayName","PopoverPanel","_Fragment","Fragment","Header","appLogoClosed","appLogoClosedStyles","appLogoOpened","appLogoOpenedStyles","onClickHeaderSidebar","src","UserProfile","userLabel","userLabelStyles","userAvatar","userAvatarFallback","userAvatarFallbackStyles","userAvatarStyles","titleAtPanel","titleAtPanelStyles","userAvatarAtPanel","userAvatarAtPanelStyles","userAvatarFallbackAtPanel","userAvatarFallbackAtPanelStyles","userLabelAtPanel","userLabelAtPanelStyles","userEmailAtPanel","userEmailAtPanelStyles","manageAccountLabelAtPanel","manageAccountLabelAtPanelStyles","iconManageAccountAtPanel","iconManageAccountAtPanelStyles","onClickManageAccount","translationLabelAtPanel","translationLabelAtPanelStyles","iconTranslationAtPanel","iconTranslationAtPanelStyles","onClickTranslation","logoutLabelAtPanel","logoutLabelAtPanelStyles","iconLogoutAtPanel","iconLogoutAtPanelStyles","onClickLogout","Footer","isShowCompanyProfile","companyName","companyNameStyles","companyLogo","companyLogoStyles","companyLogoFallback","companlogoFallbackStyles","companyLogoContainerStyles","isShowButtonChangeCompany","buttonChangeCompanyOnClick","buttonChangeCompanyLabel","buttonChangeCompanyStyles","buttonChangeCompanyIconName","buttonChangeCompanyIconStyles","appName","appVersion","BaseButton","variant","rightIcon","rightIconStyles"],"mappings":"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"}

package/build/src/blocks/Sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { Story } from '@storybook/react';
+import { SidebarInterface } from './';
+declare const _default: {
+    title: string;
+    component: {
+        ({ activeId, activeParent, data, isCollapsed, notificationCountContainerStyles, notificationCountTextStyles, containerStyles, itemMenuContainerStyles, itemMenuIconStyles, itemMenuTitleStyles, itemMenuActiveBgColor, itemSubMenuContainerStyles, itemSubMenuActiveTextColor, toggleButtonContainerStyles, toggleIconOpenName, toggleIconCloseName, toggleIconStyles, onClickCollapsible, onClickNav, children }: SidebarInterface): import("react/jsx-runtime").JSX.Element;
+        Popover: {
+            ({ isCollapsed, label, labelStyles, icon, iconStyles, notificationCount, notificationCountContainerStyles, notificationCountTextStyles, position, iconTriangleStyles, iconTriangleContainerStyles, panelContainerStyles, offsetX, offsetY, containerStyles, children }: import("./Sidebar.type").SidebarPopoverInterface): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        PopoverPanel: {
+            ({ children }: {
+                children: import("react").ReactNode;
+            }): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Header: {
+            ({ isCollapsed, appLogoClosed, appLogoClosedStyles, appLogoOpened, appLogoOpenedStyles, containerStyles, onClickHeaderSidebar, children }: import("./Sidebar.type").SidebarHeaderInterface): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        UserProfile: {
+            ({ isCollapsed, userLabel, userLabelStyles, userAvatar, userAvatarFallback, userAvatarFallbackStyles, userAvatarStyles, containerStyles, panelContainerStyles, titleAtPanel, titleAtPanelStyles, userAvatarAtPanel, userAvatarAtPanelStyles, userAvatarFallbackAtPanel, userAvatarFallbackAtPanelStyles, userLabelAtPanel, userLabelAtPanelStyles, userEmailAtPanel, userEmailAtPanelStyles, manageAccountLabelAtPanel, manageAccountLabelAtPanelStyles, iconManageAccountAtPanel, iconManageAccountAtPanelStyles, onClickManageAccount, translationLabelAtPanel, translationLabelAtPanelStyles, iconTranslationAtPanel, iconTranslationAtPanelStyles, onClickTranslation, logoutLabelAtPanel, logoutLabelAtPanelStyles, iconLogoutAtPanel, iconLogoutAtPanelStyles, onClickLogout, children, offsetX, offsetY }: import("./Sidebar.type").SidebarUserProfileInterface): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Footer: {
+            ({ isCollapsed, isShowCompanyProfile, companyName, companyNameStyles, companyLogo, companyLogoStyles, companyLogoFallback, companlogoFallbackStyles, companyLogoContainerStyles, isShowButtonChangeCompany, buttonChangeCompanyOnClick, buttonChangeCompanyLabel, buttonChangeCompanyStyles, buttonChangeCompanyIconName, buttonChangeCompanyIconStyles, appName, appVersion, children }: import("./Sidebar.type").SidebarFooterInterface): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+    };
+    argTypes: {};
+    tags: string[];
+};
+export default _default;
+export declare const Default: Story<SidebarInterface>;
+export declare const Whitelabel: Story<SidebarInterface>;

package/build/src/blocks/Sidebar/Sidebar.type.d.ts

@@ -14,8 +14,10 @@ export type SidebarMenuExtendedInterface = {
     notificationCountContainerStyles?: string;
     notificationCountTextStyles?: string;
     itemMenuContainerStyles?: string;
+    itemMenuActiveContainerStyles?: string;
     itemMenuActiveBgColor?: string;
     itemSubMenuContainerStyles?: string;
+    itemSubMenuActiveContainerStyles?: string;
     itemSubMenuActiveTextColor?: string;
     onClickCollapsible: () => void;
     onExpand: (id: string) => void;
@@ -128,6 +130,10 @@ export type SidebarInterface = {
     itemSubMenuActiveTextColor?: string;
     notificationCountContainerStyles?: string;
     notificationCountTextStyles?: string;
+    toggleButtonContainerStyles?: string;
+    toggleIconOpenName?: IconType;
+    toggleIconCloseName?: IconType;
+    toggleIconStyles?: string;
     containerStyles?: string;
     data: Array<SidebarMenuInterface>;
     onClickNav?: (navLink: SidebarMenuDefaultInterface) => void;

package/build/src/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,30 @@
+import { Story } from '@storybook/react';
+import { AvatarInterface } from './';
+declare const _default: {
+    title: string;
+    component: {
+        (props: AvatarInterface): import("react/jsx-runtime").JSX.Element;
+        defaultProps: {
+            size: string;
+            variant: string;
+            fallback: string;
+            fallbackText: string;
+            borderColor: import("../..").ColorGreen;
+            fallbackTextFontWeight: string;
+            fallbackBgColor: import("../..").ColorDark;
+        };
+    };
+    argTypes: {
+        borderColor: {
+            control: string;
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Default: Story<AvatarInterface>;
+export declare const FallbackText: Story<AvatarInterface>;
+export declare const ImageSrc: Story<AvatarInterface>;

package/build/src/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,24 @@
+import { Story } from '@storybook/react';
+import { BadgeInterface } from './';
+declare const _default: {
+    title: string;
+    component: {
+        (props: BadgeInterface): import("react/jsx-runtime").JSX.Element;
+        defaultProps: {
+            label: string;
+            iconName: string;
+        };
+    };
+    args: BadgeInterface;
+    argTypes: {
+        onClick: {
+            action: string;
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Default: Story<BadgeInterface>;

package/build/src/components/Badge/BaseBadge.stories.d.ts

@@ -0,0 +1,13 @@
+import { Story } from '@storybook/react';
+import { BaseBadgeInterface } from './';
+declare const _default: {
+    title: string;
+    component: ({ label, labelStyles, containerStyles }: BaseBadgeInterface) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {};
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Default: Story<BaseBadgeInterface>;

package/build/src/components/Badge/BaseBadgeRequired.stories.d.ts

@@ -0,0 +1,13 @@
+import { Story } from '@storybook/react';
+import { BaseBadgeRequiredInterface } from './';
+declare const _default: {
+    title: string;
+    component: ({ labelRequired, labelRequiredStyles, containerRequiredStyles }: BaseBadgeRequiredInterface) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {};
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Default: Story<BaseBadgeRequiredInterface>;

package/build/src/components/Breadcrumbs/BaseBreadcrumbs.stories.d.ts

@@ -0,0 +1,19 @@
+import { Story } from '@storybook/react';
+import { BaseBreadcrumbInterface } from './';
+declare const _default: {
+    title: string;
+    component: {
+        ({ children }: BaseBreadcrumbInterface): import("react/jsx-runtime").JSX.Element;
+        Child: {
+            ({ label, labelStyles, iconStyles, linkContainerStyles, children, ...props }: import("./BaseBreadcrumbs.type").BaseBreadcrumbsChildInterface): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+    };
+    argTypes: {};
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Default: Story<BaseBreadcrumbInterface>;

package/build/src/components/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,17 @@
+import { BreadcrumbsInterface } from './';
+declare const _default: {
+    title: string;
+    components: (props: BreadcrumbsInterface) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        data: {
+            link: string;
+            title: string;
+        }[];
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Default: any;

package/build/src/components/Button/BaseButton.stories.d.ts

@@ -0,0 +1,38 @@
+import { Story } from '@storybook/react';
+import { BaseButtonInterface } from './';
+declare const _default: {
+    title: string;
+    component: {
+        ({ variant, className, ...props }: BaseButtonInterface): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    argTypes: {
+        label: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: readonly ["primary", "secondary", "tertiary"];
+        };
+        leftIcon: {
+            control: string;
+            options: readonly ["add", "addImage", "available", "addCircleLine", "arrowbackleft", "arrowdown", "arrowdowncircle", "arrowdownfill", "arrowleft", "arrowleftcircle", "arrowright", "arrowrightcircle", "arrowrightfill", "arrowup", "arrowupcircle", "arrowupfill", "attendance", "avatar", "bank", "building", "business", "breakTime", "calendar", "calendarcheckin", "calendarcheckout", "calendarLeave", "calendarmonthly", "calendarSchedule", "cancel", "check", "checkboxFill", "checkboxIndeterminateFill", "checkcircle", "checkcirclefill", "chevronDoubleArrowLeft", "chevronDoubleArrowRight", "chevrondown", "chevronleft", "chevronright", "chevronup", "client", "close", "closecircle", "closecirclefill", "closeCircleXFill", "configuration", "delete", "document", "documentalt", "download", "edit", "electricShieldCircle", "expense", "eyeoff", "eyeon", "filter", "inbox", "information", "informationcircle", "informationfill", "link", "list", "lock", "minus", "more", "noteFill", "norecord", "percentageStructCircle", "phone", "plusShieldCircle", "radioButton", "star", "search", "setting", "sort", "time", "undo", "upload", "user", "warning", "warningfill", "work", "notebook", "usergroup", "plus", "project", "message", "menuGrid", "menuLine", "payroll", "product", "consultant", "activeloan", "room", "copyFill", "pencilFill", "activity", "filelist", "payslip", "caretDate", "notification", "notificationFill", "save", "triangleLeft", "noteSearch", "noteList", "photo", "emptyNotification", "marker", "userUnfollow", "clipboardCheck", "warningCircleFill", "refresh", "logout", "language", "administration"];
+        };
+        leftIconStyles: {
+            control: string;
+        };
+        rightIcon: {
+            control: string;
+            options: readonly ["add", "addImage", "available", "addCircleLine", "arrowbackleft", "arrowdown", "arrowdowncircle", "arrowdownfill", "arrowleft", "arrowleftcircle", "arrowright", "arrowrightcircle", "arrowrightfill", "arrowup", "arrowupcircle", "arrowupfill", "attendance", "avatar", "bank", "building", "business", "breakTime", "calendar", "calendarcheckin", "calendarcheckout", "calendarLeave", "calendarmonthly", "calendarSchedule", "cancel", "check", "checkboxFill", "checkboxIndeterminateFill", "checkcircle", "checkcirclefill", "chevronDoubleArrowLeft", "chevronDoubleArrowRight", "chevrondown", "chevronleft", "chevronright", "chevronup", "client", "close", "closecircle", "closecirclefill", "closeCircleXFill", "configuration", "delete", "document", "documentalt", "download", "edit", "electricShieldCircle", "expense", "eyeoff", "eyeon", "filter", "inbox", "information", "informationcircle", "informationfill", "link", "list", "lock", "minus", "more", "noteFill", "norecord", "percentageStructCircle", "phone", "plusShieldCircle", "radioButton", "star", "search", "setting", "sort", "time", "undo", "upload", "user", "warning", "warningfill", "work", "notebook", "usergroup", "plus", "project", "message", "menuGrid", "menuLine", "payroll", "product", "consultant", "activeloan", "room", "copyFill", "pencilFill", "activity", "filelist", "payslip", "caretDate", "notification", "notificationFill", "save", "triangleLeft", "noteSearch", "noteList", "photo", "emptyNotification", "marker", "userUnfollow", "clipboardCheck", "warningCircleFill", "refresh", "logout", "language", "administration"];
+        };
+        rightIconStyles: {
+            control: string;
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Default: Story<BaseButtonInterface>;