@ctlyst.id/internal-ui 1.0.1-canary.0 → 1.0.1-canary.2

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@chakra-ui/react"),m=require("react"),Wt=require("@chakra-ui/icons"),ie=require("@emotion/react"),mn=require("@chakra-ui/system"),Oa=require("react-dom"),He=require("@chakra-ui/theme-tools"),hn=require("@chakra-ui/anatomy"),Rt=require("@chakra-ui/styled-system");function Bd(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const J=Bd(m),vm=Bd(Oa);function ym(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var I={},bm={get exports(){return I},set exports(e){I=e}},Hr={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),b=require("@chakra-ui/react"),Wt=require("@chakra-ui/icons"),ie=require("@emotion/react"),mn=require("@chakra-ui/system"),Oa=require("react-dom"),He=require("@chakra-ui/theme-tools"),hn=require("@chakra-ui/anatomy"),Rt=require("@chakra-ui/styled-system");function Bd(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const J=Bd(m),vm=Bd(Oa);function ym(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var I={},bm={get exports(){return I},set exports(e){I=e}},Hr={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -24,9 +24,9 @@ Check the render method of \``+C+"`."}return""}}function cm(C){{if(C!==void 0){v
 
 Check your code at `+F+":"+ee+"."}return""}}var ic={};function lm(C){{var F=ac();if(!F){var ee=typeof C=="string"?C:C.displayName||C.name;ee&&(F=`
 
-Check the top-level render call using <`+ee+">.")}return F}}function uc(C,F){{if(!C._store||C._store.validated||C.key!=null)return;C._store.validated=!0;var ee=lm(F);if(ic[ee])return;ic[ee]=!0;var ce="";C&&C._owner&&C._owner!==Gr.current&&(ce=" It was passed a child from "+Q(C._owner.type)+"."),gr(C),D('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',ee,ce),gr(null)}}function sc(C,F){{if(typeof C!="object")return;if(lt(C))for(var ee=0;ee<C.length;ee++){var ce=C[ee];$a(ce)&&uc(ce,F)}else if($a(C))C._store&&(C._store.validated=!0);else if(C){var me=h(C);if(typeof me=="function"&&me!==C.entries)for(var Se=me.call(C),pe;!(pe=Se.next()).done;)$a(pe.value)&&uc(pe.value,F)}}}function fm(C){{var F=C.type;if(F==null||typeof F=="string")return;var ee;if(typeof F=="function")ee=F.propTypes;else if(typeof F=="object"&&(F.$$typeof===s||F.$$typeof===f))ee=F.propTypes;else return;if(ee){var ce=Q(F);xe(ee,C.props,"prop",ce,C)}else if(F.PropTypes!==void 0&&!Wa){Wa=!0;var me=Q(F);D("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",me||"Unknown")}typeof F.getDefaultProps=="function"&&!F.getDefaultProps.isReactClassApproved&&D("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function dm(C){{for(var F=Object.keys(C.props),ee=0;ee<F.length;ee++){var ce=F[ee];if(ce!=="children"&&ce!=="key"){gr(C),D("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",ce),gr(null);break}}C.ref!==null&&(gr(C),D("Invalid attribute `ref` supplied to `React.Fragment`."),gr(null))}}function cc(C,F,ee,ce,me,Se){{var pe=Z(C);if(!pe){var fe="";(C===void 0||typeof C=="object"&&C!==null&&Object.keys(C).length===0)&&(fe+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var qe=cm(me);qe?fe+=qe:fe+=ac();var Te;C===null?Te="null":lt(C)?Te="array":C!==void 0&&C.$$typeof===t?(Te="<"+(Q(C.type)||"Unknown")+" />",fe=" Did you accidentally export a JSX literal instead of a component?"):Te=typeof C,D("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",Te,fe)}var Ve=jr(C,F,ee,me,Se);if(Ve==null)return Ve;if(pe){var ft=F.children;if(ft!==void 0)if(ce)if(lt(ft)){for(var mr=0;mr<ft.length;mr++)sc(ft[mr],C);Object.freeze&&Object.freeze(ft)}else D("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else sc(ft,C)}return C===o?dm(Ve):fm(Ve),Ve}}function pm(C,F,ee){return cc(C,F,ee,!0)}function gm(C,F,ee){return cc(C,F,ee,!1)}var mm=gm,hm=pm;Wr.Fragment=o,Wr.jsx=mm,Wr.jsxs=hm}()),Wr}(function(e){process.env.NODE_ENV==="production"?e.exports=wm():e.exports=Cm()})(bm);const _m=m.forwardRef((e,t)=>I.jsx(b.ModalCloseButton,{ref:t,top:4,right:4,size:"sm",background:b.useColorModeValue("neutral.50","mirage.900"),...e})),xm=m.forwardRef(({children:e,...t},r)=>I.jsx(b.ModalFooter,{ref:r,background:b.useColorModeValue("neutral.200","mirage.900"),borderBottomRadius:"md",...t,children:e})),Sm=m.forwardRef(({children:e,...t},r)=>I.jsx(b.ModalHeader,{ref:r,background:b.useColorModeValue("neutral.200","mirage.900"),borderTopRadius:"md",fontSize:"lg",...t,children:e})),Vd=({navigations:e,activePath:t,...r})=>I.jsx(b.Box,{bg:b.useColorModeValue("white","ebony-clay.800"),boxShadow:"0 4px 20px 0 rgb(0 0 0 / 5%)",borderRadius:"md",overflowX:"auto",...r,children:I.jsx(b.Flex,{alignItems:"center",p:2,children:I.jsx(b.HStack,{spacing:2,children:e==null?void 0:e.map(o=>{const n=t.startsWith(o.navLink||""),a=n?"primary.500":void 0;return I.jsx(b.Popover,{trigger:"hover",placement:"bottom-start",children:({isOpen:i})=>I.jsxs(I.Fragment,{children:[I.jsx(b.PopoverTrigger,{children:I.jsxs(b.Box,{display:"flex",alignItems:"center",borderRadius:"md",cursor:"pointer",_hover:{backgroundColor:n?a:b.useColorModeValue("dove-gray.50","transparent")},backgroundColor:i&&!n?b.useColorModeValue("dove-gray.50","transparent"):a,color:n?"white":"inherit",p:2,children:[I.jsx(b.Icon,{as:o.icon,mr:2}),I.jsx(b.Text,{whiteSpace:"nowrap",fontSize:"text.sm",fontWeight:400,children:o.title}),I.jsx(Wt.ChevronDownIcon,{ml:2})]})}),o.children&&I.jsx(b.Portal,{children:I.jsx(b.Box,{zIndex:"popover",children:I.jsx(b.PopoverContent,{bg:b.useColorModeValue("white","ebony-clay.800"),maxW:250,border:"none",borderRadius:"md",boxShadow:"0 5px 25px rgb(0 0 0 / 10%)",children:o.children.map(({title:u,navHost:s,navLink:c,icon:l})=>{const f=s?`${s}${c}`:c,d=t===c;return I.jsxs(b.Link,{display:"flex",position:"relative",alignItems:"center",transition:"padding 0.35s ease 0s",_hover:{backgroundColor:b.useColorModeValue("dove-gray.50","mirage.900"),color:b.useColorModeValue("primary.500","dove-gray.600"),px:5,py:4,_first:{borderTopRadius:"md"},_last:{borderBottomRadius:"md"}},px:6,py:4,href:f,color:d?"primary.500":"inherit",css:ie.css`
+Check the top-level render call using <`+ee+">.")}return F}}function uc(C,F){{if(!C._store||C._store.validated||C.key!=null)return;C._store.validated=!0;var ee=lm(F);if(ic[ee])return;ic[ee]=!0;var ce="";C&&C._owner&&C._owner!==Gr.current&&(ce=" It was passed a child from "+Q(C._owner.type)+"."),gr(C),D('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',ee,ce),gr(null)}}function sc(C,F){{if(typeof C!="object")return;if(lt(C))for(var ee=0;ee<C.length;ee++){var ce=C[ee];$a(ce)&&uc(ce,F)}else if($a(C))C._store&&(C._store.validated=!0);else if(C){var me=h(C);if(typeof me=="function"&&me!==C.entries)for(var Se=me.call(C),pe;!(pe=Se.next()).done;)$a(pe.value)&&uc(pe.value,F)}}}function fm(C){{var F=C.type;if(F==null||typeof F=="string")return;var ee;if(typeof F=="function")ee=F.propTypes;else if(typeof F=="object"&&(F.$$typeof===s||F.$$typeof===f))ee=F.propTypes;else return;if(ee){var ce=Q(F);xe(ee,C.props,"prop",ce,C)}else if(F.PropTypes!==void 0&&!Wa){Wa=!0;var me=Q(F);D("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",me||"Unknown")}typeof F.getDefaultProps=="function"&&!F.getDefaultProps.isReactClassApproved&&D("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function dm(C){{for(var F=Object.keys(C.props),ee=0;ee<F.length;ee++){var ce=F[ee];if(ce!=="children"&&ce!=="key"){gr(C),D("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",ce),gr(null);break}}C.ref!==null&&(gr(C),D("Invalid attribute `ref` supplied to `React.Fragment`."),gr(null))}}function cc(C,F,ee,ce,me,Se){{var pe=Z(C);if(!pe){var fe="";(C===void 0||typeof C=="object"&&C!==null&&Object.keys(C).length===0)&&(fe+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var qe=cm(me);qe?fe+=qe:fe+=ac();var Te;C===null?Te="null":lt(C)?Te="array":C!==void 0&&C.$$typeof===t?(Te="<"+(Q(C.type)||"Unknown")+" />",fe=" Did you accidentally export a JSX literal instead of a component?"):Te=typeof C,D("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",Te,fe)}var Ve=jr(C,F,ee,me,Se);if(Ve==null)return Ve;if(pe){var ft=F.children;if(ft!==void 0)if(ce)if(lt(ft)){for(var mr=0;mr<ft.length;mr++)sc(ft[mr],C);Object.freeze&&Object.freeze(ft)}else D("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else sc(ft,C)}return C===o?dm(Ve):fm(Ve),Ve}}function pm(C,F,ee){return cc(C,F,ee,!0)}function gm(C,F,ee){return cc(C,F,ee,!1)}var mm=gm,hm=pm;Wr.Fragment=o,Wr.jsx=mm,Wr.jsxs=hm}()),Wr}(function(e){process.env.NODE_ENV==="production"?e.exports=wm():e.exports=Cm()})(bm);const _m=m.forwardRef((e,t)=>I.jsx(b.ModalCloseButton,{ref:t,top:4,right:4,size:"sm",background:b.useColorModeValue("neutral.50","mirage.900"),...e})),xm=m.forwardRef(({children:e,...t},r)=>I.jsx(b.ModalFooter,{ref:r,background:b.useColorModeValue("neutral.200","mirage.900"),borderBottomRadius:"md",...t,children:e})),Sm=m.forwardRef(({children:e,...t},r)=>I.jsx(b.ModalHeader,{ref:r,background:b.useColorModeValue("neutral.200","mirage.900"),borderTopRadius:"md",fontSize:"lg",...t,children:e})),Vd=({navigations:e,activePath:t,as:r,...o})=>I.jsx(b.Box,{bg:b.useColorModeValue("white","ebony-clay.800"),boxShadow:"0 4px 20px 0 rgb(0 0 0 / 5%)",borderRadius:"md",overflowX:"auto",...o,children:I.jsx(b.Flex,{alignItems:"center",p:2,children:I.jsx(b.HStack,{spacing:2,children:e==null?void 0:e.map(n=>{const a=t.startsWith(n.navLink||""),i=a?"primary.500":void 0;return I.jsx(b.Popover,{trigger:"hover",placement:"bottom-start",children:({isOpen:u})=>I.jsxs(I.Fragment,{children:[I.jsx(b.PopoverTrigger,{children:I.jsxs(b.Box,{display:"flex",alignItems:"center",borderRadius:"md",cursor:"pointer",_hover:{backgroundColor:a?i:b.useColorModeValue("dove-gray.50","transparent")},backgroundColor:u&&!a?b.useColorModeValue("dove-gray.50","transparent"):i,color:a?"white":"inherit",p:2,children:[I.jsx(b.Icon,{as:n.icon,mr:2}),I.jsx(b.Text,{whiteSpace:"nowrap",fontSize:"text.sm",fontWeight:400,children:n.title}),I.jsx(Wt.ChevronDownIcon,{ml:2})]})}),n.children&&I.jsx(b.Portal,{children:I.jsx(b.Box,{zIndex:"popover",children:I.jsx(b.PopoverContent,{bg:b.useColorModeValue("white","ebony-clay.800"),maxW:250,border:"none",borderRadius:"md",boxShadow:"0 5px 25px rgb(0 0 0 / 10%)",children:n.children.map(({title:s,navHost:c,navLink:l,icon:f})=>{const d=c?`${c}${l}`:l,p=t===l;return I.jsxs(b.Link,{as:r,display:"flex",position:"relative",alignItems:"center",transition:"padding 0.35s ease 0s",_hover:{backgroundColor:b.useColorModeValue("dove-gray.50","mirage.900"),color:b.useColorModeValue("primary.500","dove-gray.600"),px:5,py:4,_first:{borderTopRadius:"md"},_last:{borderBottomRadius:"md"}},px:6,py:4,href:d,color:p?"primary.500":"inherit",css:ie.css`
                                     border-spacing: 4px;
-                                  `,children:[I.jsx(b.Icon,{as:l,mr:3}),I.jsx(b.Text,{fontSize:"text.sm",children:u}),d&&I.jsx(b.Box,{width:.5,height:8,position:"absolute",bg:"primary.500",right:0,zIndex:"popover"})]},u)})},o.title)})})]})},o.title)})})})});Vd.defaultProps={navigations:void 0};const Im=()=>I.jsx(b.Image,{height:8,src:b.useColorModeValue("https://assets.voila.id/xms/logo-xms.jpg","https://assets.voila.id/xms/logo-xms-dark.png")}),Om=()=>I.jsx(b.Image,{src:"https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",filter:b.useColorModeValue("none","invert(1)"),maxW:24});var Ld={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},pc=m.createContext&&m.createContext(Ld),Xt=globalThis&&globalThis.__assign||function(){return Xt=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++){t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},Xt.apply(this,arguments)},Pm=globalThis&&globalThis.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]]);return r};function jd(e){return e&&e.map(function(t,r){return m.createElement(t.tag,Xt({key:r},t.attr),jd(t.child))})}function qt(e){return function(t){return m.createElement(Em,Xt({attr:Xt({},e.attr)},t),jd(e.child))}}function Em(e){var t=function(r){var o=e.attr,n=e.size,a=e.title,i=Pm(e,["attr","size","title"]),u=n||r.size||"1em",s;return r.className&&(s=r.className),e.className&&(s=(s?s+" ":"")+e.className),m.createElement("svg",Xt({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,o,i,{className:s,style:Xt(Xt({color:e.color||r.color},r.style),e.style),height:u,width:u,xmlns:"http://www.w3.org/2000/svg"}),a&&m.createElement("title",null,a),e.children)};return pc!==void 0?m.createElement(pc.Consumer,null,function(r){return t(r)}):t(Ld)}function Dm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"rect",attr:{x:"3",y:"4",width:"18",height:"18",rx:"2",ry:"2"}},{tag:"line",attr:{x1:"16",y1:"2",x2:"16",y2:"6"}},{tag:"line",attr:{x1:"8",y1:"2",x2:"8",y2:"6"}},{tag:"line",attr:{x1:"3",y1:"10",x2:"21",y2:"10"}}]})(e)}function Rm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"polyline",attr:{points:"6 9 12 15 18 9"}}]})(e)}function km(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"polyline",attr:{points:"13 17 18 12 13 7"}},{tag:"polyline",attr:{points:"6 17 11 12 6 7"}}]})(e)}function Am(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"path",attr:{d:"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}},{tag:"polyline",attr:{points:"9 22 9 12 15 12 15 22"}}]})(e)}function Tm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"path",attr:{d:"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"}}]})(e)}function Mm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"path",attr:{d:"M18.36 6.64a9 9 0 1 1-12.73 0"}},{tag:"line",attr:{x1:"12",y1:"2",x2:"12",y2:"12"}}]})(e)}function Fm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"circle",attr:{cx:"12",cy:"12",r:"5"}},{tag:"line",attr:{x1:"12",y1:"1",x2:"12",y2:"3"}},{tag:"line",attr:{x1:"12",y1:"21",x2:"12",y2:"23"}},{tag:"line",attr:{x1:"4.22",y1:"4.22",x2:"5.64",y2:"5.64"}},{tag:"line",attr:{x1:"18.36",y1:"18.36",x2:"19.78",y2:"19.78"}},{tag:"line",attr:{x1:"1",y1:"12",x2:"3",y2:"12"}},{tag:"line",attr:{x1:"21",y1:"12",x2:"23",y2:"12"}},{tag:"line",attr:{x1:"4.22",y1:"19.78",x2:"5.64",y2:"18.36"}},{tag:"line",attr:{x1:"18.36",y1:"5.64",x2:"19.78",y2:"4.22"}}]})(e)}function Nm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"line",attr:{x1:"18",y1:"6",x2:"6",y2:"18"}},{tag:"line",attr:{x1:"6",y1:"6",x2:"18",y2:"18"}}]})(e)}const Gd=({data:e,onLogout:t})=>{const{isOpen:r,onToggle:o,onClose:n}=b.useDisclosure();return I.jsxs(b.Popover,{placement:"bottom-end",isOpen:r,onClose:n,children:[I.jsx(b.Box,{"data-test-id":"WE0UYbA93LOZy6S09IhDO",as:"button",cursor:"pointer",minW:0,_hover:{textDecor:"none"},m:0,onClick:o,children:I.jsxs(b.HStack,{children:[I.jsxs(b.VStack,{alignItems:"flex-end",spacing:-.5,ml:"2",children:[I.jsx(b.Text,{fontSize:"text.xs",mb:1,fontWeight:400,lineHeight:"14px",color:b.useColorModeValue("neutral.800","white"),children:e==null?void 0:e.email}),I.jsxs(b.Text,{fontSize:"text.xs",fontWeight:400,lineHeight:"14px",color:b.useColorModeValue("primary.500","success.400"),children:[(e==null?void 0:e.office)&&I.jsxs(b.Text,{color:"neutral.700",display:"inline-block",mr:.5,children:[e.office," |"," "]}),e==null?void 0:e.userRole]})]}),I.jsx(b.PopoverTrigger,{children:I.jsx(b.Avatar,{size:"sm",bg:"primary.500",color:"white",name:(e==null?void 0:e.name)??(e==null?void 0:e.email)})})]})}),I.jsxs(b.PopoverContent,{bg:b.useColorModeValue("white","mirage.900"),maxW:200,children:[I.jsx(b.PopoverArrow,{bg:b.useColorModeValue("white","mirage.900")}),I.jsx(b.PopoverBody,{p:1,children:I.jsxs(b.Flex,{"data-test-id":"gA7F9pucPX_Q3_dkgXIYZ",alignItems:"center",px:3,py:2,borderRadius:"sm",cursor:"pointer",_hover:{bg:b.useColorModeValue("primary.500","mirage.900"),color:"white"},onClick:t,fontSize:"text.xs",children:[I.jsx(Mm,{}),I.jsx(b.Text,{ml:2,children:"Logout"})]})})]})]})};Gd.defaultProps={data:void 0,onLogout:void 0};const Bm=()=>{const{colorMode:e,toggleColorMode:t}=b.useColorMode();return I.jsx(b.Box,{mx:5,onClick:t,cursor:"pointer",children:e==="light"?I.jsx(Tm,{size:20}):I.jsx(Fm,{size:20})})};function Vm(e){switch(e){case"DEVELOPMENT":return"Dev";case"STAGING":return"Staging";default:return null}}const Hd=({version:e,environment:t,onOpenModalRelease:r})=>I.jsxs(I.Fragment,{children:[e&&I.jsx(b.Badge,{"data-test-id":"dzl3esjhCphobaaIXpiUE",bg:b.useColorModeValue("primary.500","rgba(124, 124, 124, 0.12)"),color:b.useColorModeValue("white","secondary.400"),fontSize:"text.xs",py:1,px:2.5,fontWeight:"bold",textTransform:"lowercase",borderRadius:"md",onClick:r,cursor:r?"pointer":"auto",children:e}),I.jsx(b.Box,{background:"primary.50",color:"primary.500",fontSize:"text.xs",py:1,px:2.5,fontWeight:"bold",borderRadius:"md",children:Vm(t)})]});Hd.defaultProps={environment:void 0,version:void 0,onOpenModalRelease:void 0};const Wd=({data:e,onLogout:t,onOpenModalRelease:r,...o})=>I.jsx(b.Box,{minH:14,bg:b.useColorModeValue("white","ebony-clay.800"),boxShadow:"0 4px 20px 0 rgb(0 0 0 / 5%)",px:4,py:1,...o,children:I.jsxs(b.Flex,{h:14,alignItems:"center",justifyContent:"space-between",children:[I.jsx(Im,{}),I.jsxs(b.HStack,{spacing:2,alignItems:"center",children:[I.jsx(Om,{}),I.jsx(Hd,{version:e==null?void 0:e.version,environment:e==null?void 0:e.environment,onOpenModalRelease:r})]}),I.jsxs(b.Flex,{alignItems:"center",children:[I.jsx(Bm,{}),I.jsx(Gd,{data:e,onLogout:t})]})]})});Wd.defaultProps={data:void 0,onLogout:void 0,onOpenModalRelease:void 0};/**
+                                  `,children:[I.jsx(b.Icon,{as:f,mr:3}),I.jsx(b.Text,{fontSize:"text.sm",children:s}),p&&I.jsx(b.Box,{width:.5,height:8,position:"absolute",bg:"primary.500",right:0,zIndex:"popover"})]},s)})},n.title)})})]})},n.title)})})})});Vd.defaultProps={navigations:void 0,as:"a"};const Im=()=>I.jsx(b.Image,{height:8,src:b.useColorModeValue("https://assets.voila.id/xms/logo-xms.jpg","https://assets.voila.id/xms/logo-xms-dark.png")}),Om=()=>I.jsx(b.Image,{src:"https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",filter:b.useColorModeValue("none","invert(1)"),maxW:24});var Ld={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},pc=m.createContext&&m.createContext(Ld),Xt=globalThis&&globalThis.__assign||function(){return Xt=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++){t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},Xt.apply(this,arguments)},Pm=globalThis&&globalThis.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]]);return r};function jd(e){return e&&e.map(function(t,r){return m.createElement(t.tag,Xt({key:r},t.attr),jd(t.child))})}function qt(e){return function(t){return m.createElement(Em,Xt({attr:Xt({},e.attr)},t),jd(e.child))}}function Em(e){var t=function(r){var o=e.attr,n=e.size,a=e.title,i=Pm(e,["attr","size","title"]),u=n||r.size||"1em",s;return r.className&&(s=r.className),e.className&&(s=(s?s+" ":"")+e.className),m.createElement("svg",Xt({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,o,i,{className:s,style:Xt(Xt({color:e.color||r.color},r.style),e.style),height:u,width:u,xmlns:"http://www.w3.org/2000/svg"}),a&&m.createElement("title",null,a),e.children)};return pc!==void 0?m.createElement(pc.Consumer,null,function(r){return t(r)}):t(Ld)}function Dm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"rect",attr:{x:"3",y:"4",width:"18",height:"18",rx:"2",ry:"2"}},{tag:"line",attr:{x1:"16",y1:"2",x2:"16",y2:"6"}},{tag:"line",attr:{x1:"8",y1:"2",x2:"8",y2:"6"}},{tag:"line",attr:{x1:"3",y1:"10",x2:"21",y2:"10"}}]})(e)}function Rm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"polyline",attr:{points:"6 9 12 15 18 9"}}]})(e)}function km(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"polyline",attr:{points:"13 17 18 12 13 7"}},{tag:"polyline",attr:{points:"6 17 11 12 6 7"}}]})(e)}function Am(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"path",attr:{d:"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}},{tag:"polyline",attr:{points:"9 22 9 12 15 12 15 22"}}]})(e)}function Tm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"path",attr:{d:"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"}}]})(e)}function Mm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"path",attr:{d:"M18.36 6.64a9 9 0 1 1-12.73 0"}},{tag:"line",attr:{x1:"12",y1:"2",x2:"12",y2:"12"}}]})(e)}function Fm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"circle",attr:{cx:"12",cy:"12",r:"5"}},{tag:"line",attr:{x1:"12",y1:"1",x2:"12",y2:"3"}},{tag:"line",attr:{x1:"12",y1:"21",x2:"12",y2:"23"}},{tag:"line",attr:{x1:"4.22",y1:"4.22",x2:"5.64",y2:"5.64"}},{tag:"line",attr:{x1:"18.36",y1:"18.36",x2:"19.78",y2:"19.78"}},{tag:"line",attr:{x1:"1",y1:"12",x2:"3",y2:"12"}},{tag:"line",attr:{x1:"21",y1:"12",x2:"23",y2:"12"}},{tag:"line",attr:{x1:"4.22",y1:"19.78",x2:"5.64",y2:"18.36"}},{tag:"line",attr:{x1:"18.36",y1:"5.64",x2:"19.78",y2:"4.22"}}]})(e)}function Nm(e){return qt({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"line",attr:{x1:"18",y1:"6",x2:"6",y2:"18"}},{tag:"line",attr:{x1:"6",y1:"6",x2:"18",y2:"18"}}]})(e)}const Gd=({data:e,onLogout:t})=>{const{isOpen:r,onToggle:o,onClose:n}=b.useDisclosure();return I.jsxs(b.Popover,{placement:"bottom-end",isOpen:r,onClose:n,children:[I.jsx(b.Box,{"data-test-id":"WE0UYbA93LOZy6S09IhDO",as:"button",cursor:"pointer",minW:0,_hover:{textDecor:"none"},m:0,onClick:o,children:I.jsxs(b.HStack,{children:[I.jsxs(b.VStack,{alignItems:"flex-end",spacing:-.5,ml:"2",children:[I.jsx(b.Text,{fontSize:"text.xs",mb:1,fontWeight:400,lineHeight:"14px",color:b.useColorModeValue("neutral.800","white"),children:e==null?void 0:e.email}),I.jsxs(b.Text,{fontSize:"text.xs",fontWeight:400,lineHeight:"14px",color:b.useColorModeValue("primary.500","success.400"),children:[(e==null?void 0:e.office)&&I.jsxs(b.Text,{color:"neutral.700",display:"inline-block",mr:.5,children:[e.office," |"," "]}),e==null?void 0:e.userRole]})]}),I.jsx(b.PopoverTrigger,{children:I.jsx(b.Avatar,{size:"sm",bg:"primary.500",color:"white",name:(e==null?void 0:e.name)??(e==null?void 0:e.email)})})]})}),I.jsxs(b.PopoverContent,{bg:b.useColorModeValue("white","mirage.900"),maxW:200,children:[I.jsx(b.PopoverArrow,{bg:b.useColorModeValue("white","mirage.900")}),I.jsx(b.PopoverBody,{p:1,children:I.jsxs(b.Flex,{"data-test-id":"gA7F9pucPX_Q3_dkgXIYZ",alignItems:"center",px:3,py:2,borderRadius:"sm",cursor:"pointer",_hover:{bg:b.useColorModeValue("primary.500","mirage.900"),color:"white"},onClick:t,fontSize:"text.xs",children:[I.jsx(Mm,{}),I.jsx(b.Text,{ml:2,children:"Logout"})]})})]})]})};Gd.defaultProps={data:void 0,onLogout:void 0};const Bm=()=>{const{colorMode:e,toggleColorMode:t}=b.useColorMode();return I.jsx(b.Box,{mx:5,onClick:t,cursor:"pointer",children:e==="light"?I.jsx(Tm,{size:20}):I.jsx(Fm,{size:20})})};function Vm(e){switch(e){case"DEVELOPMENT":return"Dev";case"STAGING":return"Staging";default:return null}}const Hd=({version:e,environment:t,onOpenModalRelease:r})=>I.jsxs(I.Fragment,{children:[e&&I.jsx(b.Badge,{"data-test-id":"dzl3esjhCphobaaIXpiUE",bg:b.useColorModeValue("primary.500","rgba(124, 124, 124, 0.12)"),color:b.useColorModeValue("white","secondary.400"),fontSize:"text.xs",py:1,px:2.5,fontWeight:"bold",textTransform:"lowercase",borderRadius:"md",onClick:r,cursor:r?"pointer":"auto",children:e}),I.jsx(b.Box,{background:"primary.50",color:"primary.500",fontSize:"text.xs",py:1,px:2.5,fontWeight:"bold",borderRadius:"md",children:Vm(t)})]});Hd.defaultProps={environment:void 0,version:void 0,onOpenModalRelease:void 0};const Wd=({data:e,onLogout:t,onOpenModalRelease:r,...o})=>I.jsx(b.Box,{minH:14,bg:b.useColorModeValue("white","ebony-clay.800"),boxShadow:"0 4px 20px 0 rgb(0 0 0 / 5%)",px:4,py:1,...o,children:I.jsxs(b.Flex,{h:14,alignItems:"center",justifyContent:"space-between",children:[I.jsx(Im,{}),I.jsxs(b.HStack,{spacing:2,alignItems:"center",children:[I.jsx(Om,{}),I.jsx(Hd,{version:e==null?void 0:e.version,environment:e==null?void 0:e.environment,onOpenModalRelease:r})]}),I.jsxs(b.Flex,{alignItems:"center",children:[I.jsx(Bm,{}),I.jsx(Gd,{data:e,onLogout:t})]})]})});Wd.defaultProps={data:void 0,onLogout:void 0,onOpenModalRelease:void 0};/**
  * react-table
  *
  * Copyright (c) TanStack

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { ModalCloseButton as jm, useColorModeValue as le, ModalFooter as Wm, ModalHeader as Hm, Box as je, Flex as kt, HStack as Fs, Popover as ep, PopoverTrigger as tp, Icon as Ic, Text as Ke, Portal as $m, PopoverContent as rp, Link as Ym, Image as np, useDisclosure as zm, VStack as Xm, Avatar as Zm, PopoverArrow as Um, PopoverBody as Jm, useColorMode as qm, Badge as Qm, Spinner as Km, Table as eh, Thead as th, Tr as Oc, Th as rh, Tbody as nh, Td as oh, forwardRef as Fa, Button as op, VisuallyHidden as ah, Select as ih, FormControl as ap, FormLabel as ip, FormHelperText as up, FormErrorMessage as sp, InputGroup as Ns, InputLeftAddon as uh, InputLeftElement as sh, Input as Bs, InputRightAddon as cp, InputRightElement as lp, Textarea as ch, theme as fp, useTab as lh, useMultiStyleConfig as fh, TabPanel as dh, TabList as ph, Stack as gh, Heading as Ec, useToken as mh, Breadcrumb as hh, BreadcrumbItem as ti, BreadcrumbLink as ri, createMultiStyleConfigHelpers as vh, extendTheme as yh } from "@chakra-ui/react";
-import { AlertDialog as mk, ModalBody as hk, ModalCloseButton as vk, AlertDialogContent as yk, ModalFooter as bk, ModalHeader as wk, ModalOverlay as _k, AlertDialogProps as Ck, Drawer as xk, ModalBody as Sk, ModalCloseButton as Ik, DrawerContent as Ok, DrawerContentProps as Ek, ModalFooter as Pk, ModalHeader as Dk, ModalOverlay as Rk, DrawerProps as kk, Modal as Ak, ModalBody as Tk, ModalBodyProps as Mk, ModalContent as Fk, ModalContentProps as Nk, ModalContextProvider as Bk, ModalFocusScope as Lk, ModalFooterProps as Vk, ModalHeaderProps as Gk, ModalOverlay as jk, ModalOverlayProps as Wk, ModalProps as Hk, TabIndicator as $k, TabIndicatorProps as Yk, TabListProps as zk, TabPanelProps as Xk, TabPanels as Zk, TabPanelsProps as Uk, TabProps as Jk, Tabs as qk, TabsDescendantsProvider as Qk, TabsProps as Kk, TabsProvider as eA, UseModalProps as tA, UseModalReturn as rA, UseTabListProps as nA, UseTabListReturn as oA, UseTabOptions as aA, UseTabPanelsProps as iA, UseTabProps as uA, UseTabsProps as sA, UseTabsReturn as cA, useDrawerContext as lA, useModal as fA, useModalContext as dA, useModalStyles as pA, useTab as gA, useTabIndicator as mA, useTabList as hA, useTabPanel as vA, useTabPanels as yA, useTabs as bA, useTabsContext as wA, useTabsDescendant as _A, useTabsDescendants as CA, useTabsDescendantsContext as xA, useTabsStyles as SA } from "@chakra-ui/react";
 import * as U from "react";
-import P, { forwardRef as mr, useState as He, useCallback as fe, useLayoutEffect as bh, useContext as dp, useRef as Ae, createContext as pp, useMemo as tt, Component as gp, Fragment as To, useEffect as pt, useReducer as wh, useImperativeHandle as _h, createElement as Ch, createRef as xh } from "react";
+import P, { forwardRef as mr, useState as He, useCallback as fe, useLayoutEffect as jm, useContext as ep, useRef as Ae, createContext as tp, useMemo as tt, Component as rp, Fragment as To, useEffect as pt, useReducer as Wm, useImperativeHandle as Hm, createElement as $m, createRef as Ym } from "react";
+import { ModalCloseButton as zm, useColorModeValue as le, ModalFooter as Xm, ModalHeader as Zm, Box as je, Flex as kt, HStack as Fs, Popover as np, PopoverTrigger as op, Icon as Ic, Text as Ke, Portal as Um, PopoverContent as ap, Link as Jm, Image as ip, useDisclosure as qm, VStack as Qm, Avatar as Km, PopoverArrow as eh, PopoverBody as th, useColorMode as rh, Badge as nh, Spinner as oh, Table as ah, Thead as ih, Tr as Oc, Th as uh, Tbody as sh, Td as ch, forwardRef as Fa, Button as up, VisuallyHidden as lh, Select as fh, FormControl as sp, FormLabel as cp, FormHelperText as lp, FormErrorMessage as fp, InputGroup as Ns, InputLeftAddon as dh, InputLeftElement as ph, Input as Bs, InputRightAddon as dp, InputRightElement as pp, Textarea as gh, theme as gp, useTab as mh, useMultiStyleConfig as hh, TabPanel as vh, TabList as yh, Stack as bh, Heading as Ec, useToken as wh, Breadcrumb as _h, BreadcrumbItem as ti, BreadcrumbLink as ri, createMultiStyleConfigHelpers as Ch, extendTheme as xh } from "@chakra-ui/react";
+import { AlertDialog as mk, ModalBody as hk, ModalCloseButton as vk, AlertDialogContent as yk, ModalFooter as bk, ModalHeader as wk, ModalOverlay as _k, AlertDialogProps as Ck, Drawer as xk, ModalBody as Sk, ModalCloseButton as Ik, DrawerContent as Ok, DrawerContentProps as Ek, ModalFooter as Pk, ModalHeader as Dk, ModalOverlay as Rk, DrawerProps as kk, Modal as Ak, ModalBody as Tk, ModalBodyProps as Mk, ModalContent as Fk, ModalContentProps as Nk, ModalContextProvider as Bk, ModalFocusScope as Lk, ModalFooterProps as Vk, ModalHeaderProps as Gk, ModalOverlay as jk, ModalOverlayProps as Wk, ModalProps as Hk, TabIndicator as $k, TabIndicatorProps as Yk, TabListProps as zk, TabPanelProps as Xk, TabPanels as Zk, TabPanelsProps as Uk, TabProps as Jk, Tabs as qk, TabsDescendantsProvider as Qk, TabsProps as Kk, TabsProvider as eA, UseModalProps as tA, UseModalReturn as rA, UseTabListProps as nA, UseTabListReturn as oA, UseTabOptions as aA, UseTabPanelsProps as iA, UseTabProps as uA, UseTabsProps as sA, UseTabsReturn as cA, useDrawerContext as lA, useModal as fA, useModalContext as dA, useModalStyles as pA, useTab as gA, useTabIndicator as mA, useTabList as hA, useTabPanel as vA, useTabPanels as yA, useTabs as bA, useTabsContext as wA, useTabsDescendant as _A, useTabsDescendants as CA, useTabsDescendantsContext as xA, useTabsStyles as SA } from "@chakra-ui/react";
 import { ChevronDownIcon as mp, ChevronUpIcon as Sh, UpDownIcon as Ih, ArrowLeftIcon as Oh, ChevronLeftIcon as Eh, ChevronRightIcon as Ph, ArrowRightIcon as Dh } from "@chakra-ui/icons";
 import { css as Na, keyframes as Rh, jsx as ie, ClassNames as kh, Global as Ah } from "@emotion/react";
 import { useColorMode as xn } from "@chakra-ui/system";
@@ -649,7 +649,7 @@ Check the top-level render call using <` + K + ">.");
   process.env.NODE_ENV === "production" ? e.exports = zh() : e.exports = Xh();
 })(Yh);
 const ek = mr((e, t) => /* @__PURE__ */ x.jsx(
-  jm,
+  zm,
   {
     ref: t,
     top: 4,
@@ -659,7 +659,7 @@ const ek = mr((e, t) => /* @__PURE__ */ x.jsx(
     ...e
   }
 )), tk = mr(({ children: e, ...t }, r) => /* @__PURE__ */ x.jsx(
-  Wm,
+  Xm,
   {
     ref: r,
     background: le("neutral.200", "mirage.900"),
@@ -668,7 +668,7 @@ const ek = mr((e, t) => /* @__PURE__ */ x.jsx(
     children: e
   }
 )), rk = mr(({ children: e, ...t }, r) => /* @__PURE__ */ x.jsx(
-  Hm,
+  Zm,
   {
     ref: r,
     background: le("neutral.200", "mirage.900"),
@@ -677,18 +677,18 @@ const ek = mr((e, t) => /* @__PURE__ */ x.jsx(
     ...t,
     children: e
   }
-)), Zh = ({ navigations: e, activePath: t, ...r }) => /* @__PURE__ */ x.jsx(
+)), Zh = ({ navigations: e, activePath: t, as: r, ...o }) => /* @__PURE__ */ x.jsx(
   je,
   {
     bg: le("white", "ebony-clay.800"),
     boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
     borderRadius: "md",
     overflowX: "auto",
-    ...r,
-    children: /* @__PURE__ */ x.jsx(kt, { alignItems: "center", p: 2, children: /* @__PURE__ */ x.jsx(Fs, { spacing: 2, children: e == null ? void 0 : e.map((o) => {
-      const n = t.startsWith(o.navLink || ""), a = n ? "primary.500" : void 0;
-      return /* @__PURE__ */ x.jsx(ep, { trigger: "hover", placement: "bottom-start", children: ({ isOpen: i }) => /* @__PURE__ */ x.jsxs(x.Fragment, { children: [
-        /* @__PURE__ */ x.jsx(tp, { children: /* @__PURE__ */ x.jsxs(
+    ...o,
+    children: /* @__PURE__ */ x.jsx(kt, { alignItems: "center", p: 2, children: /* @__PURE__ */ x.jsx(Fs, { spacing: 2, children: e == null ? void 0 : e.map((n) => {
+      const a = t.startsWith(n.navLink || ""), i = a ? "primary.500" : void 0;
+      return /* @__PURE__ */ x.jsx(np, { trigger: "hover", placement: "bottom-start", children: ({ isOpen: u }) => /* @__PURE__ */ x.jsxs(x.Fragment, { children: [
+        /* @__PURE__ */ x.jsx(op, { children: /* @__PURE__ */ x.jsxs(
           je,
           {
             display: "flex",
@@ -696,31 +696,32 @@ const ek = mr((e, t) => /* @__PURE__ */ x.jsx(
             borderRadius: "md",
             cursor: "pointer",
             _hover: {
-              backgroundColor: n ? a : le("dove-gray.50", "transparent")
+              backgroundColor: a ? i : le("dove-gray.50", "transparent")
             },
-            backgroundColor: i && !n ? le("dove-gray.50", "transparent") : a,
-            color: n ? "white" : "inherit",
+            backgroundColor: u && !a ? le("dove-gray.50", "transparent") : i,
+            color: a ? "white" : "inherit",
             p: 2,
             children: [
-              /* @__PURE__ */ x.jsx(Ic, { as: o.icon, mr: 2 }),
-              /* @__PURE__ */ x.jsx(Ke, { whiteSpace: "nowrap", fontSize: "text.sm", fontWeight: 400, children: o.title }),
+              /* @__PURE__ */ x.jsx(Ic, { as: n.icon, mr: 2 }),
+              /* @__PURE__ */ x.jsx(Ke, { whiteSpace: "nowrap", fontSize: "text.sm", fontWeight: 400, children: n.title }),
               /* @__PURE__ */ x.jsx(mp, { ml: 2 })
             ]
           }
         ) }),
-        o.children && /* @__PURE__ */ x.jsx($m, { children: /* @__PURE__ */ x.jsx(je, { zIndex: "popover", children: /* @__PURE__ */ x.jsx(
-          rp,
+        n.children && /* @__PURE__ */ x.jsx(Um, { children: /* @__PURE__ */ x.jsx(je, { zIndex: "popover", children: /* @__PURE__ */ x.jsx(
+          ap,
           {
             bg: le("white", "ebony-clay.800"),
             maxW: 250,
             border: "none",
             borderRadius: "md",
             boxShadow: "0 5px 25px rgb(0 0 0 / 10%)",
-            children: o.children.map(({ title: u, navHost: s, navLink: c, icon: l }) => {
-              const f = s ? `${s}${c}` : c, d = t === c;
+            children: n.children.map(({ title: s, navHost: c, navLink: l, icon: f }) => {
+              const d = c ? `${c}${l}` : l, p = t === l;
               return /* @__PURE__ */ x.jsxs(
-                Ym,
+                Jm,
                 {
+                  as: r,
                   display: "flex",
                   position: "relative",
                   alignItems: "center",
@@ -735,15 +736,15 @@ const ek = mr((e, t) => /* @__PURE__ */ x.jsx(
                   },
                   px: 6,
                   py: 4,
-                  href: f,
-                  color: d ? "primary.500" : "inherit",
+                  href: d,
+                  color: p ? "primary.500" : "inherit",
                   css: Na`
                                     border-spacing: 4px;
                                   `,
                   children: [
-                    /* @__PURE__ */ x.jsx(Ic, { as: l, mr: 3 }),
-                    /* @__PURE__ */ x.jsx(Ke, { fontSize: "text.sm", children: u }),
-                    d && /* @__PURE__ */ x.jsx(
+                    /* @__PURE__ */ x.jsx(Ic, { as: f, mr: 3 }),
+                    /* @__PURE__ */ x.jsx(Ke, { fontSize: "text.sm", children: s }),
+                    p && /* @__PURE__ */ x.jsx(
                       je,
                       {
                         width: 0.5,
@@ -756,27 +757,28 @@ const ek = mr((e, t) => /* @__PURE__ */ x.jsx(
                     )
                   ]
                 },
-                u
+                s
               );
             })
           },
-          o.title
+          n.title
         ) }) })
-      ] }) }, o.title);
+      ] }) }, n.title);
     }) }) })
   }
 );
 Zh.defaultProps = {
-  navigations: void 0
+  navigations: void 0,
+  as: "a"
 };
 const Uh = () => /* @__PURE__ */ x.jsx(
-  np,
+  ip,
   {
     height: 8,
     src: le("https://assets.voila.id/xms/logo-xms.jpg", "https://assets.voila.id/xms/logo-xms-dark.png")
   }
 ), Jh = () => /* @__PURE__ */ x.jsx(
-  np,
+  ip,
   {
     src: "https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",
     filter: le("none", "invert(1)"),
@@ -867,8 +869,8 @@ function iv(e) {
   return nr({ tag: "svg", attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "18", y1: "6", x2: "6", y2: "18" } }, { tag: "line", attr: { x1: "6", y1: "6", x2: "18", y2: "18" } }] })(e);
 }
 const yp = ({ data: e, onLogout: t }) => {
-  const { isOpen: r, onToggle: o, onClose: n } = zm();
-  return /* @__PURE__ */ x.jsxs(ep, { placement: "bottom-end", isOpen: r, onClose: n, children: [
+  const { isOpen: r, onToggle: o, onClose: n } = qm();
+  return /* @__PURE__ */ x.jsxs(np, { placement: "bottom-end", isOpen: r, onClose: n, children: [
     /* @__PURE__ */ x.jsx(
       je,
       {
@@ -880,7 +882,7 @@ const yp = ({ data: e, onLogout: t }) => {
         m: 0,
         onClick: o,
         children: /* @__PURE__ */ x.jsxs(Fs, { children: [
-          /* @__PURE__ */ x.jsxs(Xm, { alignItems: "flex-end", spacing: -0.5, ml: "2", children: [
+          /* @__PURE__ */ x.jsxs(Qm, { alignItems: "flex-end", spacing: -0.5, ml: "2", children: [
             /* @__PURE__ */ x.jsx(
               Ke,
               {
@@ -910,13 +912,13 @@ const yp = ({ data: e, onLogout: t }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ x.jsx(tp, { children: /* @__PURE__ */ x.jsx(Zm, { size: "sm", bg: "primary.500", color: "white", name: (e == null ? void 0 : e.name) ?? (e == null ? void 0 : e.email) }) })
+          /* @__PURE__ */ x.jsx(op, { children: /* @__PURE__ */ x.jsx(Km, { size: "sm", bg: "primary.500", color: "white", name: (e == null ? void 0 : e.name) ?? (e == null ? void 0 : e.email) }) })
         ] })
       }
     ),
-    /* @__PURE__ */ x.jsxs(rp, { bg: le("white", "mirage.900"), maxW: 200, children: [
-      /* @__PURE__ */ x.jsx(Um, { bg: le("white", "mirage.900") }),
-      /* @__PURE__ */ x.jsx(Jm, { p: 1, children: /* @__PURE__ */ x.jsxs(
+    /* @__PURE__ */ x.jsxs(ap, { bg: le("white", "mirage.900"), maxW: 200, children: [
+      /* @__PURE__ */ x.jsx(eh, { bg: le("white", "mirage.900") }),
+      /* @__PURE__ */ x.jsx(th, { p: 1, children: /* @__PURE__ */ x.jsxs(
         kt,
         {
           "data-test-id": "gA7F9pucPX_Q3_dkgXIYZ",
@@ -942,7 +944,7 @@ yp.defaultProps = {
   onLogout: void 0
 };
 const uv = () => {
-  const { colorMode: e, toggleColorMode: t } = qm();
+  const { colorMode: e, toggleColorMode: t } = rh();
   return /* @__PURE__ */ x.jsx(je, { mx: 5, onClick: t, cursor: "pointer", children: e === "light" ? /* @__PURE__ */ x.jsx(nv, { size: 20 }) : /* @__PURE__ */ x.jsx(av, { size: 20 }) });
 };
 function sv(e) {
@@ -957,7 +959,7 @@ function sv(e) {
 }
 const bp = ({ version: e, environment: t, onOpenModalRelease: r }) => /* @__PURE__ */ x.jsxs(x.Fragment, { children: [
   e && /* @__PURE__ */ x.jsx(
-    Qm,
+    nh,
     {
       "data-test-id": "dzl3esjhCphobaaIXpiUE",
       bg: le("primary.500", "rgba(124, 124, 124, 0.12)"),
@@ -2855,9 +2857,9 @@ const Nc = ({
     const y = I.map((v) => v.original);
     n && n(y);
   }, [I]), /* @__PURE__ */ x.jsxs(je, { ...c, children: [
-    r && /* @__PURE__ */ x.jsx(kt, { w: "100%", h: "100%", pos: "absolute", bg: "white", align: "center", justify: "center", zIndex: 2, children: /* @__PURE__ */ x.jsx(Km, { color: "primary.500", thickness: "4px", size: "lg" }) }),
-    /* @__PURE__ */ x.jsxs(eh, { ...s == null ? void 0 : s.table, children: [
-      /* @__PURE__ */ x.jsx(th, { ...s == null ? void 0 : s.tableHead, children: E.getHeaderGroups().map((y) => /* @__PURE__ */ x.jsx(Oc, { bg: le("initial", "ebony-clay.700"), ...s == null ? void 0 : s.tableRow, children: y.headers.map((v) => /* @__PURE__ */ x.jsx(rh, { colSpan: v.colSpan, ...s == null ? void 0 : s.tableColumnHeader, children: /* @__PURE__ */ x.jsxs(
+    r && /* @__PURE__ */ x.jsx(kt, { w: "100%", h: "100%", pos: "absolute", bg: "white", align: "center", justify: "center", zIndex: 2, children: /* @__PURE__ */ x.jsx(oh, { color: "primary.500", thickness: "4px", size: "lg" }) }),
+    /* @__PURE__ */ x.jsxs(ah, { ...s == null ? void 0 : s.table, children: [
+      /* @__PURE__ */ x.jsx(ih, { ...s == null ? void 0 : s.tableHead, children: E.getHeaderGroups().map((y) => /* @__PURE__ */ x.jsx(Oc, { bg: le("initial", "ebony-clay.700"), ...s == null ? void 0 : s.tableRow, children: y.headers.map((v) => /* @__PURE__ */ x.jsx(uh, { colSpan: v.colSpan, ...s == null ? void 0 : s.tableColumnHeader, children: /* @__PURE__ */ x.jsxs(
         kt,
         {
           "data-test-id": `CT_Container_TableHeader_${v.id}`,
@@ -2885,7 +2887,7 @@ const Nc = ({
           ]
         }
       ) }, v.id)) }, y.id)) }),
-      /* @__PURE__ */ x.jsx(nh, { ...s == null ? void 0 : s.tableBody, children: E.getRowModel().rows.map((y) => /* @__PURE__ */ x.jsx(
+      /* @__PURE__ */ x.jsx(sh, { ...s == null ? void 0 : s.tableBody, children: E.getRowModel().rows.map((y) => /* @__PURE__ */ x.jsx(
         Oc,
         {
           ...s == null ? void 0 : s.tableRow,
@@ -2897,7 +2899,7 @@ const Nc = ({
                 }
               `,
           children: y.getVisibleCells().map((v) => /* @__PURE__ */ x.jsx(
-            oh,
+            ch,
             {
               fontSize: "text.sm",
               color: le("dark.800", "dark.300"),
@@ -2929,7 +2931,7 @@ Uv.defaultProps = {
 const La = Fa(({ className: e, style: t, isActive: r, children: o, ...n }, a) => {
   const i = le("neutral.300", "mirage.900"), u = le("black.high", "primary.300"), s = le("secondary.50", "primary.500"), c = le("primary.500", "white");
   return /* @__PURE__ */ x.jsx(
-    op,
+    up,
     {
       "data-test-id": "Pagination-Button",
       ref: a,
@@ -2969,7 +2971,7 @@ const on = ({
   visuallyHidden: o,
   icon: n
 }) => /* @__PURE__ */ x.jsxs(La, { "data-test-id": "DLVCc_fBK35spHm5WxjcJ", color: e, isDisabled: t, onClick: r, children: [
-  /* @__PURE__ */ x.jsx(ah, { children: o }),
+  /* @__PURE__ */ x.jsx(lh, { children: o }),
   n
 ] });
 on.defaultProps = {
@@ -3073,7 +3075,7 @@ const nk = ({
   return /* @__PURE__ */ x.jsxs(je, { display: "flex", flexDirection: "row", alignItems: "center", children: [
     /* @__PURE__ */ x.jsx(Ke, { fontSize: "text.sm", lineHeight: 18, color: le("neutral.900", "white"), ...n, children: t }),
     /* @__PURE__ */ x.jsx(
-      ih,
+      fh,
       {
         textAlign: "center",
         size: "xs",
@@ -3099,13 +3101,13 @@ Jv.defaultProps = {
 };
 const js = (e) => {
   const { label: t, isError: r, error: o, helperText: n, isRequired: a, children: i } = e;
-  return /* @__PURE__ */ x.jsxs(ap, { isInvalid: r, children: [
-    t && (typeof t == "string" ? /* @__PURE__ */ x.jsxs(ip, { fontSize: "field.sm", requiredIndicator: void 0, children: [
+  return /* @__PURE__ */ x.jsxs(sp, { isInvalid: r, children: [
+    t && (typeof t == "string" ? /* @__PURE__ */ x.jsxs(cp, { fontSize: "field.sm", requiredIndicator: void 0, children: [
       a && /* @__PURE__ */ x.jsx(je, { as: "span", color: "red.500", ml: 0, mr: 1, children: "*" }),
       t
     ] }) : t),
     i,
-    r ? typeof o == "string" ? /* @__PURE__ */ x.jsx(sp, { textStyle: "field.sm", fontSize: "field.sm", mt: 1, marginStart: 1, children: o }) : o : n && /* @__PURE__ */ x.jsx(up, { fontSize: "field.sm", children: n })
+    r ? typeof o == "string" ? /* @__PURE__ */ x.jsx(fp, { textStyle: "field.sm", fontSize: "field.sm", mt: 1, marginStart: 1, children: o }) : o : n && /* @__PURE__ */ x.jsx(lp, { fontSize: "field.sm", children: n })
   ] });
 };
 js.defaultProps = {
@@ -3132,11 +3134,11 @@ const qv = P.forwardRef((e, t) => {
     ...g
   } = e;
   return /* @__PURE__ */ x.jsx(js, { label: l, isError: f, error: d, helperText: p, isRequired: c, children: /* @__PURE__ */ x.jsxs(Ns, { size: s, children: [
-    n && /* @__PURE__ */ x.jsx(uh, { children: n }),
-    i && /* @__PURE__ */ x.jsx(sh, { children: i }),
+    n && /* @__PURE__ */ x.jsx(dh, { children: n }),
+    i && /* @__PURE__ */ x.jsx(ph, { children: i }),
     /* @__PURE__ */ x.jsx(Bs, { ref: t, type: o, value: r, ...g }),
-    a && /* @__PURE__ */ x.jsx(cp, { children: a }),
-    u && /* @__PURE__ */ x.jsx(lp, { children: u })
+    a && /* @__PURE__ */ x.jsx(dp, { children: a }),
+    u && /* @__PURE__ */ x.jsx(pp, { children: u })
   ] }) });
 });
 qv.defaultProps = {
@@ -3147,7 +3149,7 @@ qv.defaultProps = {
 };
 const Qv = P.forwardRef((e, t) => {
   const { value: r, ...o } = e;
-  return /* @__PURE__ */ x.jsx(js, { ...o, children: /* @__PURE__ */ x.jsx(ch, { ref: t, value: r, ...o }) });
+  return /* @__PURE__ */ x.jsx(js, { ...o, children: /* @__PURE__ */ x.jsx(gh, { ref: t, value: r, ...o }) });
 });
 Qv.defaultProps = {
   addOnLeft: void 0,
@@ -3478,7 +3480,7 @@ function Cy(e, t, r, o) {
     }), (p = f) == null || p.disconnect(), f = null, u && cancelAnimationFrame(l);
   };
 }
-var eu = bh, xy = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"], Bo = function() {
+var eu = jm, xy = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"], Bo = function() {
 };
 function Sy(e, t) {
   return t ? t[0] === "-" ? e + t : e + "__" + t : e;
@@ -3686,8 +3688,8 @@ var Vp = function(t) {
   return r = {
     label: "menu"
   }, Ot(r, Ly(o), "100%"), Ot(r, "backgroundColor", u.neutral0), Ot(r, "borderRadius", a), Ot(r, "boxShadow", "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)"), Ot(r, "marginBottom", i.menuGutter), Ot(r, "marginTop", i.menuGutter), Ot(r, "position", "absolute"), Ot(r, "width", "100%"), Ot(r, "zIndex", 1), r;
-}, Gp = /* @__PURE__ */ pp(null), Gy = function(t) {
-  var r = t.children, o = t.minMenuHeight, n = t.maxMenuHeight, a = t.menuPlacement, i = t.menuPosition, u = t.menuShouldScrollIntoView, s = t.theme, c = dp(Gp) || {}, l = c.setPortalPlacement, f = Ae(null), d = He(n), p = Xe(d, 2), g = p[0], h = p[1], m = He(null), C = Xe(m, 2), E = C[0], I = C[1];
+}, Gp = /* @__PURE__ */ tp(null), Gy = function(t) {
+  var r = t.children, o = t.minMenuHeight, n = t.maxMenuHeight, a = t.menuPlacement, i = t.menuPosition, u = t.menuShouldScrollIntoView, s = t.theme, c = ep(Gp) || {}, l = c.setPortalPlacement, f = Ae(null), d = He(n), p = Xe(d, 2), g = p[0], h = p[1], m = He(null), C = Xe(m, 2), E = C[0], I = C[1];
   return eu(function() {
     var y = f.current;
     if (y) {
@@ -6039,7 +6041,7 @@ var sg = function(t) {
       });
     }
   }]), r;
-}(gp);
+}(rp);
 Ga.defaultProps = g0;
 var b0 = /* @__PURE__ */ mr(function(e, t) {
   var r = Ws(e);
@@ -6210,7 +6212,7 @@ const cg = b0, w0 = "transparent", _0 = {
   lg: "8px",
   full: "9999px"
 }, N0 = {
-  ...fp.space,
+  ...gp.space,
   4.5: "1.125rem",
   9.5: "2.375rem",
   18: "4.5rem",
@@ -6218,7 +6220,7 @@ const cg = b0, w0 = "transparent", _0 = {
   26: "6.5rem",
   30: "7.5rem"
 }, B0 = {
-  ...fp.sizes,
+  ...gp.sizes,
   4.5: "1.125rem",
   9.5: "2.375rem",
   18: "4.5rem",
@@ -7413,9 +7415,9 @@ function uk({ styles: e, ...t }) {
 }
 const sk = Fa((e, t) => {
   var a, i;
-  const r = lh({ ...e, ref: t }), o = !!r["aria-selected"], n = fh("Tabs", r);
+  const r = mh({ ...e, ref: t }), o = !!r["aria-selected"], n = hh("Tabs", r);
   return /* @__PURE__ */ x.jsx(
-    op,
+    up,
     {
       p: 3,
       fontSize: "text.md",
@@ -7435,7 +7437,7 @@ const sk = Fa((e, t) => {
       ] })
     }
   );
-}), ck = Fa((e, t) => /* @__PURE__ */ x.jsx(dh, { px: 0, ref: t, children: e.children })), lk = Fa((e, t) => /* @__PURE__ */ x.jsx(ph, { borderBottom: "1px solid", borderColor: le("gray.200", "bright-gray.800"), ref: t, children: e.children }));
+}), ck = Fa((e, t) => /* @__PURE__ */ x.jsx(vh, { px: 0, ref: t, children: e.children })), lk = Fa((e, t) => /* @__PURE__ */ x.jsx(yh, { borderBottom: "1px solid", borderColor: le("gray.200", "bright-gray.800"), ref: t, children: e.children }));
 var Ce = {}, ml = {
   get exports() {
     return Ce;
@@ -8829,7 +8831,7 @@ function R_(e, t) {
 }
 var Ys = /* @__PURE__ */ mr(function(e, t) {
   var r = e.children, o = $o(e, b_), n = Pg(o), a = n.open, i = $o(n, w_);
-  return _h(t, function() {
+  return Hm(t, function() {
     return {
       open: a
     };
@@ -9041,7 +9043,7 @@ function Pg() {
     return typeof m == "function" ? m : Nl;
   }, [m]), q = tt(function() {
     return typeof h == "function" ? h : Nl;
-  }, [h]), $ = Ae(null), D = Ae(null), S = wh(k_, cu), k = _i(S, 2), G = k[0], V = k[1], O = G.isFocused, T = G.isFileDialogActive, F = Ae(typeof window < "u" && window.isSecureContext && C && g_()), j = function() {
+  }, [h]), $ = Ae(null), D = Ae(null), S = Wm(k_, cu), k = _i(S, 2), G = k[0], V = k[1], O = G.isFocused, T = G.isFileDialogActive, F = Ae(typeof window < "u" && window.isSecureContext && C && g_()), j = function() {
     !F.current && T && setTimeout(function() {
       if (D.current) {
         var ae = D.current.files;
@@ -9308,7 +9310,7 @@ const Tn = {
   }, [C]);
   return U.useEffect(() => {
     d(n ?? !1);
-  }, [n]), /* @__PURE__ */ x.jsxs(gh, { direction: "column", children: [
+  }, [n]), /* @__PURE__ */ x.jsxs(bh, { direction: "column", children: [
     /* @__PURE__ */ x.jsxs(
       kt,
       {
@@ -15288,9 +15290,9 @@ function Ha(e, t) {
       var c = this.props;
       c.excludeScrollbar;
       var l = zO(c, ["excludeScrollbar"]);
-      return e.prototype && e.prototype.isReactComponent ? l.ref = this.getRef : l.wrappedRef = this.getRef, l.disableOnClickOutside = this.disableOnClickOutside, l.enableOnClickOutside = this.enableOnClickOutside, Ch(e, l);
+      return e.prototype && e.prototype.isReactComponent ? l.ref = this.getRef : l.wrappedRef = this.getRef, l.disableOnClickOutside = this.disableOnClickOutside, l.enableOnClickOutside = this.enableOnClickOutside, $m(e, l);
     }, i;
-  }(gp), r.displayName = "OnClickOutside(" + n + ")", r.defaultProps = {
+  }(rp), r.displayName = "OnClickOutside(" + n + ")", r.defaultProps = {
     eventTypes: ["mousedown", "touchstart"],
     excludeScrollbar: t && t.excludeScrollbar || !1,
     outsideClickIgnoreClass: eE,
@@ -17020,7 +17022,7 @@ var WP = Ha(function(e) {
       return n.shiftYears(-1);
     });
     var a = o.yearDropdownItemNumber, i = o.scrollableYearDropdown, u = a || (i ? 10 : 5);
-    return n.state = { yearsList: jP(n.props.year, u, n.props.minDate, n.props.maxDate) }, n.dropdownRef = xh(), n;
+    return n.state = { yearsList: jP(n.props.year, u, n.props.minDate, n.props.maxDate) }, n.dropdownRef = Ym(), n;
   }
   return Je(r, [{ key: "componentDidMount", value: function() {
     var o = this.dropdownRef.current;
@@ -18919,7 +18921,7 @@ const lD = () => {
     /* @__PURE__ */ x.jsx(Ke, { mb: 2, children: r }),
     /* @__PURE__ */ x.jsxs(Ns, { alignItems: "center", justifyContent: "center", children: [
       /* @__PURE__ */ x.jsx(Bs, { onChange: i, type: "time", value: n, "data-test-id": "CT_Component_datepicker_input_time" }),
-      o && /* @__PURE__ */ x.jsx(cp, { children: o })
+      o && /* @__PURE__ */ x.jsx(dp, { children: o })
     ] })
   ] });
 };
@@ -18968,16 +18970,16 @@ const fD = ({
       }
     )
   ] });
-  return d.inline ? m : /* @__PURE__ */ x.jsxs(ap, { isRequired: a, "data-test-id": "CT_Component_datepicker_wrapper", children: [
-    t && /* @__PURE__ */ x.jsx(ip, { fontSize: "text.sm", children: t }),
+  return d.inline ? m : /* @__PURE__ */ x.jsxs(sp, { isRequired: a, "data-test-id": "CT_Component_datepicker_wrapper", children: [
+    t && /* @__PURE__ */ x.jsx(cp, { fontSize: "text.sm", children: t }),
     /* @__PURE__ */ x.jsxs(Ns, { children: [
       m,
-      /* @__PURE__ */ x.jsxs(lp, { children: [
+      /* @__PURE__ */ x.jsxs(pp, { children: [
         !u && /* @__PURE__ */ x.jsx(Kh, {}),
         u && /* @__PURE__ */ x.jsx(iv, { "data-test-id": "bcpJJyCP0z_RIAGZXDU6s", onClick: c, cursor: "pointer" })
       ] })
     ] }),
-    o ? /* @__PURE__ */ x.jsx(sp, { children: r }) : /* @__PURE__ */ x.jsx(up, { children: n })
+    o ? /* @__PURE__ */ x.jsx(fp, { children: r }) : /* @__PURE__ */ x.jsx(lp, { children: n })
   ] });
 };
 fD.defaultProps = {
@@ -18994,7 +18996,7 @@ fD.defaultProps = {
   showMonth: !1
 };
 const dD = (e) => {
-  const { title: t, children: r, parents: o, className: n, disableHome: a, spacing: i = 2 } = e, [u, s] = mh("colors", ["neutral.700", "dark.500"]);
+  const { title: t, children: r, parents: o, className: n, disableHome: a, spacing: i = 2 } = e, [u, s] = wh("colors", ["neutral.700", "dark.500"]);
   return /* @__PURE__ */ x.jsxs(
     je,
     {
@@ -19009,7 +19011,7 @@ const dD = (e) => {
           /* @__PURE__ */ x.jsx(Ke, { pr: 2, fontWeight: 500, textStyle: "heading.3", color: le("neutral.700", "white"), children: t }),
           /* @__PURE__ */ x.jsx(je, { h: "22px", borderLeft: "1px solid", borderColor: le("neutral.700", "white") }),
           /* @__PURE__ */ x.jsxs(
-            hh,
+            _h,
             {
               separator: /* @__PURE__ */ x.jsx(tv, { color: le(u, s), size: 14 }),
               pl: 2.5,
@@ -19380,7 +19382,7 @@ const _D = Rr((e) => {
     orientation: "vertical",
     colorScheme: "primary"
   }
-}, { definePartsStyle: OD, defineMultiStyleConfig: ED } = vh(Gh.keys), PD = OD({
+}, { definePartsStyle: OD, defineMultiStyleConfig: ED } = Ch(Gh.keys), PD = OD({
   // define the part you're going to style
   container: {
     // ...
@@ -19437,7 +19439,7 @@ const _D = Rr((e) => {
 }, Symbol.toStringTag, { value: "Module" })), MD = {
   initialColorMode: "light",
   useSystemColorMode: !1
-}, fk = yh({
+}, fk = xh({
   ...H0,
   components: {
     ...TD
@@ -20396,10 +20398,10 @@ Ta.default = ft;
 (function(e) {
   e.exports = Ta;
 })(FD);
-const HR = /* @__PURE__ */ $h(Ts), Am = pp({
+const HR = /* @__PURE__ */ $h(Ts), Am = tp({
   instance: void 0
 }), dk = () => {
-  const { instance: e } = dp(Am);
+  const { instance: e } = ep(Am);
   return { instance: e };
 }, $R = ({ children: e, config: t, requestInterceptors: r, responseInterceptors: o }) => {
   const n = Ae(HR.create(t));

package/dist/types/components/data-table/index.d.ts

@@ -1,2 +1,3 @@
 export { default as DataTable } from './components/data-table';
 export * from './components/data-table';
+export * from './types/table-core';

package/dist/types/components/data-table/types/table-core.d.ts

@@ -0,0 +1 @@
+export type { AccessorColumnDef, AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, AggregationFn, AggregationFnOption, AggregationFns, aggregationFns, AnyRender, buildHeaderGroups, BuiltInAggregationFn, BuiltInFilterFn, BuiltInSortingFn, Cell, CellContext, Column, ColumnDef, ColumnDefaultOptions, ColumnDefBase, ColumnDefResolved, ColumnDefTemplate, ColumnFilter, ColumnFilterAutoRemoveTestFn, ColumnFiltersState, ColumnHelper, ColumnMeta, ColumnOrderDefaultOptions, ColumnOrderInstance, ColumnOrderOptions, ColumnOrderState, ColumnOrderTableState, ColumnPinningColumn, ColumnPinningColumnDef, ColumnPinningDefaultOptions, ColumnPinningInstance, ColumnPinningOptions, ColumnPinningPosition, ColumnPinningRow, ColumnPinningState, ColumnPinningTableState, ColumnResizeMode, ColumnSizing, ColumnSizingColumn, ColumnSizingColumnDef, ColumnSizingDefaultOptions, ColumnSizingHeader, ColumnSizingInfoState, ColumnSizingInstance, ColumnSizingOptions, ColumnSizingState, ColumnSizingTableState, ColumnSort, CoreCell, CoreColumn, CoreHeader, CoreHeaderGroup, CoreInstance, CoreOptions, CoreRow, CoreTableState, createCell, createColumn, createColumnHelper, createRow, createTable, CustomAggregationFns, CustomFilterFns, CustomSortingFns, DeepKeys, DeepValue, defaultColumnSizing, DisplayColumnDef, ExpandedInstance, ExpandedOptions, ExpandedRow, ExpandedState, ExpandedStateList, ExpandedTableState, Expanding, expandRows, FilterFn, FilterFnOption, FilterFns, filterFns, FilterMeta, Filters, FiltersColumn, FiltersColumnDef, FiltersInstance, FiltersOptions, FiltersRow, FiltersTableState, flattenBy, functionalUpdate, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, Getter, GroupColumnDef, Grouping, GroupingCell, GroupingColumn, GroupingColumnDef, GroupingColumnMode, GroupingInstance, GroupingOptions, GroupingRow, GroupingState, GroupingTableState, HeaderContext, HeaderGroup, Headers, HeadersInstance, Header as HeaderTable, IdentifiedColumnDef, InitialTableState, IsAny, isFunction, IsKnown, isRowSelected, isSubRowSelected, makeStateUpdater, memo, NoInfer, noop, OnChangeFn, orderColumns, Ordering, Overwrite, PaginationDefaultOptions, PaginationInitialTableState, PaginationInstance, PaginationOptions, PaginationState, Pagination as PaginationTable, PaginationTableState, PartialKeys, passiveEventSupported, Pinning, RequiredKeys, ResolvedColumnFilter, reSplitAlphaNumeric, Row, RowData, RowModel, RowSelection, RowSelectionInstance, RowSelectionOptions, RowSelectionRow, RowSelectionState, RowSelectionTableState, selectRowsFn, shouldAutoRemoveFilter, SortDirection, Sorting, SortingColumn, SortingColumnDef, SortingFn, SortingFnOption, SortingFns, sortingFns, SortingInstance, SortingOptions, SortingState, SortingTableState, StringOrTemplateHeader, Table, TableFeature, TableMeta, TableOptions, TableOptionsResolved, TableState, TransformFilterValueFn, UnionToIntersection, Updater, Visibility, VisibilityColumn, VisibilityColumnDef, VisibilityDefaultOptions, VisibilityInstance, VisibilityOptions, VisibilityRow, VisibilityState, VisibilityTableState, } from '@tanstack/table-core';

package/dist/types/components/modal/index.d.ts

@@ -1,5 +1,4 @@
-import { AlertDialog, AlertDialogContent, AlertDialogProps, Drawer, DrawerContent, DrawerContentProps, DrawerProps, Modal, ModalBody as AlertDialogBody, ModalBody as DrawerBody, ModalBody, ModalBodyProps, ModalCloseButton as AlertDialogCloseButton, ModalCloseButton as DrawerCloseButton, ModalContent, ModalContentProps, ModalContextProvider, ModalFocusScope, ModalFooter as AlertDialogFooter, ModalFooter as DrawerFooter, ModalFooterProps, ModalHeader as AlertDialogHeader, ModalHeader as DrawerHeader, ModalHeaderProps, ModalOverlay as AlertDialogOverlay, ModalOverlay as DrawerOverlay, ModalOverlay, ModalOverlayProps, ModalProps, useDrawerContext, useModal, useModalContext, UseModalProps, UseModalReturn, useModalStyles } from '@chakra-ui/react';
 export { default as ModalCloseButton } from './components/modal-close-button';
 export { default as ModalFooter } from './components/modal-footer';
 export { default as ModalHeader } from './components/modal-header';
-export { AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogProps, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerContentProps, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerProps, Modal, ModalBody, ModalBodyProps, ModalContent, ModalContentProps, ModalContextProvider, ModalFocusScope, ModalFooterProps, ModalHeaderProps, ModalOverlay, ModalOverlayProps, ModalProps, useDrawerContext, useModal, useModalContext, UseModalProps, UseModalReturn, useModalStyles, };
+export { AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, AlertDialogProps, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, DrawerContentProps, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, DrawerProps, Modal, ModalBody, ModalBodyProps, ModalContent, ModalContentProps, ModalContextProvider, ModalFocusScope, ModalFooterProps, ModalHeaderProps, ModalOverlay, ModalOverlayProps, ModalProps, useDrawerContext, useModal, useModalContext, UseModalProps, UseModalReturn, useModalStyles, } from '@chakra-ui/react';

package/dist/types/components/navigation/components/navigation.d.ts

@@ -1,9 +1,10 @@
-import type { BoxProps } from '@chakra-ui/react';
+import type { As, BoxProps } from '@chakra-ui/react';
 import * as React from 'react';
 import type { NavigationLink } from '../types';
 export type NavigationProps = BoxProps & {
     navigations?: NavigationLink[];
     activePath: string;
+    as?: As;
 };
 declare const Navigation: React.FC<NavigationProps>;
 export default Navigation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctlyst.id/internal-ui",
-  "version": "1.0.1-canary.0",
+  "version": "1.0.1-canary.2",
   "description": "Voila Internal UI Component",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -69,5 +69,5 @@
     "jest": "^29.4.1",
     "jest-environment-jsdom": "29.4.1"
   },
-  "gitHead": "95a19cbec1694a33a6b73e1a8375291a516f32a2"
+  "gitHead": "7724517b99872376b6d653d27d56167200bf9393"
 }