@ctlyst.id/internal-ui 2.0.0-canary.1 → 2.0.0

package/dist/internal-ui.cjs.production.min.js

@@ -1,10 +1,10 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@chakra-ui/react"),r=require("react"),n=e(r),a=require("react-icons/fi"),o=require("@chakra-ui/icons"),i=require("@emotion/react"),c=require("@tanstack/react-table"),l=e(require("classnames")),d=e(require("react-datepicker")),p=require("@chakra-ui/system"),s=e(require("@emotion/styled")),m=e(require("react-select")),u=require("react-select-async-paginate"),g=e(require("react-select/async-creatable")),_=e(require("react-select/creatable")),h=require("react-dropzone"),b=require("@chakra-ui/theme-tools"),k=require("@chakra-ui/anatomy"),x=require("@chakra-ui/styled-system");require("@fontsource/poppins");var f=e(require("axios"));const y=e=>{const{title:n,children:o,parents:i,className:c,disableHome:l,spacing:d=2}=e,[p,s]=t.useToken("colors",["neutral.600","dark.500"]);return r.createElement(t.Box,{"data-test-id":"CT_component_breadcrumb_breadcrumb",className:c,display:"flex",justifyContent:"space-between",alignItems:"center",paddingY:2},r.createElement(t.Box,{display:"flex",alignItems:"center"},r.createElement(t.Text,{pr:2,fontWeight:600,textStyle:"heading.4",color:t.useColorModeValue("neutral.700","white")},n),r.createElement(t.Box,{h:"22px",borderLeft:"1px solid",borderColor:t.useColorModeValue(p,"white")}),r.createElement(t.Breadcrumb,{separator:r.createElement(a.FiChevronsRight,{color:t.useColorModeValue(p,s),size:14}),pl:2.5,pr:4,spacing:d,sx:{ol:{display:"flex",alignItems:"center"}},display:"flex",alignItems:"center",className:"breadcrumb-wrapper"},r.createElement(t.BreadcrumbItem,null,r.createElement(t.BreadcrumbLink,{href:l?void 0:"/",style:{...l&&{cursor:"default"}}},r.createElement(a.FiHome,{className:"align-top",size:16,color:t.useColorModeValue("#12784A","#ffffff")}))),null==i?void 0:i.map(e=>r.createElement(t.BreadcrumbItem,{key:e.name},r.createElement(t.BreadcrumbLink,{"data-test-id":"iadKcMAul3QAdvmfIQjRE",href:e.disable?void 0:e.link,onClick:e.onClick,style:{...e.disable&&{cursor:"default"}},_hover:{textDecoration:"none"}},r.createElement(t.Text,{color:e.disable?"dark.600":t.useColorModeValue("primary.500","white"),fontSize:"text.sm",fontWeight:400},e.name)))),r.createElement(t.BreadcrumbItem,null,r.createElement(t.BreadcrumbLink,{_hover:{textDecor:"none",cursor:"default"}},r.createElement(t.Text,{color:t.useColorModeValue(p,"white"),fontSize:"text.sm",fontWeight:400},n))))),o&&r.createElement(t.Box,null,o))};function v({isError:e=!1,helpText:r="",errorText:a="",children:o,isDisabled:i,...c}){return n.createElement(t.Box,null,n.createElement(t.Box,{display:"flex"},n.createElement(t.Checkbox,Object.assign({variant:e?"errors":"unstyled"},c,{isDisabled:i})),o&&n.createElement(t.Box,null,n.createElement(t.Box,{ml:"8px"},n.createElement(t.Text,{textStyle:"text.sm",color:i?"black.low":"black.high"},o)))),n.createElement(t.Box,{mt:"5px",ml:"24px"},e?n.createElement(t.Text,{textStyle:"text.xs",color:"danger.500"},a):n.createElement(t.Text,{textStyle:"text.xs",color:i?"black.low":"black.medium"},r)))}y.defaultProps={children:void 0,parents:void 0,className:void 0,disableHome:void 0,spacing:2},v.defaultProps={isError:!1,helpText:"",errorText:""};const w=({indeterminate:e=!1,...n})=>{const a=r.useRef(null);return r.useEffect(()=>{a.current&&"boolean"==typeof e&&(a.current.indeterminate=!n.checked&&e)},[a,e]),r.createElement(t.Flex,{align:"center"},r.createElement("input",Object.assign({type:"checkbox",ref:a},n)))},C=({columns:e,dataSource:n=[],isLoading:a,withSelectedRow:l,onSelectedRow:d,onSort:p,manualSorting:s,sortingState:m,styles:u,...g})=>{const[_,h]=r.useState(null!=m?m:[]),[b,k]=r.useState({}),x=r.useMemo(()=>e,[e]),f=r.useMemo(()=>[{id:"select",header:({table:e})=>r.createElement(w,Object.assign({},{checked:e.getIsAllRowsSelected(),indeterminate:e.getIsSomeRowsSelected(),onChange:e.getToggleAllRowsSelectedHandler()})),cell:({row:e})=>r.createElement(w,Object.assign({},{checked:e.getIsSelected(),indeterminate:e.getIsSomeSelected(),onChange:e.getToggleSelectedHandler()}))}],[]),y=c.useReactTable({data:n,columns:l?[...f,...x]:x,getCoreRowModel:c.getCoreRowModel(),getSortedRowModel:c.getSortedRowModel(),manualPagination:!0,sortDescFirst:!0,state:{sorting:_,rowSelection:b},onRowSelectionChange:k,onSortingChange:e=>{h(e),p&&p(e)},manualSorting:s}),{flatRows:v}=y.getSelectedRowModel();return r.useEffect(()=>{const e=v.map(e=>e.original);d&&d(e)},[v]),r.createElement(t.Box,Object.assign({},g),a&&r.createElement(t.Flex,{w:"100%",h:"100%",pos:"absolute",bg:"white",align:"center",justify:"center",zIndex:2},r.createElement(t.Spinner,{color:"primary.500",thickness:"4px",size:"lg"})),r.createElement(t.Table,Object.assign({},null==u?void 0:u.table),r.createElement(t.Thead,Object.assign({},null==u?void 0:u.tableHead),y.getHeaderGroups().map(e=>r.createElement(t.Tr,Object.assign({key:e.id,bg:t.useColorModeValue("initial","ebony-clay.700")},null==u?void 0:u.tableRow),e.headers.map(e=>{var n;return r.createElement(t.Th,Object.assign({key:e.id,colSpan:e.colSpan},null==u?void 0:u.tableColumnHeader),r.createElement(t.Flex,{"data-test-id":"CT_Container_TableHeader_"+e.id,textTransform:"capitalize",userSelect:"none",align:"center",justifyContent:"space-between"},r.createElement(t.Text,{fontSize:"text.sm",fontWeight:400,lineHeight:"18px",color:t.useColorModeValue("neutral.900","white")},c.flexRender(e.column.columnDef.header,e.getContext())),r.createElement(t.Box,{as:"span",pl:"2",cursor:e.column.getCanSort()?"pointer":"default","data-test-id":"CT_Container_SortingIcon_"+e.id,onClick:e.column.getToggleSortingHandler()},null!==(n=e.column.getCanSort()&&{asc:r.createElement(o.ChevronUpIcon,null),desc:r.createElement(o.ChevronDownIcon,null)}[e.column.getIsSorted()])&&void 0!==n?n:r.createElement(o.UpDownIcon,{h:2}))))})))),r.createElement(t.Tbody,Object.assign({},null==u?void 0:u.tableBody),y.getRowModel().rows.map(e=>r.createElement(t.Tr,Object.assign({key:e.id},null==u?void 0:u.tableRow,{css:i.css`
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@chakra-ui/react"),r=require("react"),n=e(r),a=require("react-icons/fi"),o=require("@chakra-ui/icons"),i=require("@emotion/react"),c=require("@tanstack/react-table"),l=e(require("classnames")),d=e(require("react-datepicker")),s=require("@chakra-ui/system"),p=e(require("@emotion/styled")),m=require("@ctlyst.id/internal-icon"),u=e(require("react-select")),g=require("react-select-async-paginate"),h=e(require("react-select/async-creatable")),_=e(require("react-select/creatable")),b=require("@chakra-ui/shared-utils"),x=require("react-dropzone"),k=require("@chakra-ui/anatomy"),f=require("@chakra-ui/styled-system"),y=require("@chakra-ui/theme-tools"),v=e(require("axios"));const w=e=>{const{title:n,children:o,parents:i,className:c,disableHome:l,spacing:d=2}=e,[s,p]=t.useToken("colors",["neutral.600","dark.500"]);return r.createElement(t.Box,{"data-test-id":"CT_component_breadcrumb_breadcrumb",className:c,display:"flex",justifyContent:"space-between",alignItems:"center",paddingY:2},r.createElement(t.Box,{display:"flex",alignItems:"center"},r.createElement(t.Text,{pr:2,fontWeight:600,textStyle:"heading.4",color:t.useColorModeValue("neutral.700","white")},n),r.createElement(t.Box,{h:"22px",borderLeft:"1px solid",borderColor:t.useColorModeValue(s,"white")}),r.createElement(t.Breadcrumb,{separator:r.createElement(a.FiChevronsRight,{color:t.useColorModeValue(s,p),size:14}),pl:2.5,pr:4,spacing:d,sx:{ol:{display:"flex",alignItems:"center"}},display:"flex",alignItems:"center",className:"breadcrumb-wrapper"},r.createElement(t.BreadcrumbItem,null,r.createElement(t.BreadcrumbLink,{href:l?void 0:"/",style:{...l&&{cursor:"default"}}},r.createElement(a.FiHome,{className:"align-top",size:16,color:t.useColorModeValue("#12784A","#ffffff")}))),null==i?void 0:i.map(e=>r.createElement(t.BreadcrumbItem,{key:e.name},r.createElement(t.BreadcrumbLink,{"data-test-id":"iadKcMAul3QAdvmfIQjRE",href:e.disable?void 0:e.link,onClick:e.onClick,style:{...e.disable&&{cursor:"default"}},_hover:{textDecoration:"none"}},r.createElement(t.Text,{color:e.disable?"dark.600":t.useColorModeValue("primary.500","white"),fontSize:"text.sm",fontWeight:400},e.name)))),r.createElement(t.BreadcrumbItem,null,r.createElement(t.BreadcrumbLink,{_hover:{textDecor:"none",cursor:"default"}},r.createElement(t.Text,{color:t.useColorModeValue(s,"white"),fontSize:"text.sm",fontWeight:400},n))))),o&&r.createElement(t.Box,null,o))};w.defaultProps={children:void 0,parents:void 0,className:void 0,disableHome:void 0,spacing:2};const C=t.forwardRef((e,r)=>{const a=t.useStyleConfig("LoaderStyle",e);return n.createElement(t.Box,{ref:r,__css:a})}),E=r.forwardRef(({children:e,...r},a)=>{const o=t.useStyleConfig("Card",r);return n.createElement(t.Card,Object.assign({__css:o,backgroundColor:"white.high",ref:a},r),e)});function S({isError:e=!1,helpText:r="",errorText:a="",children:o,isDisabled:i,...c}){return n.createElement(t.Box,null,n.createElement(t.Box,{display:"flex"},n.createElement(t.Checkbox,Object.assign({variant:e?"errors":"unstyled"},c,{isDisabled:i}),o&&n.createElement(t.Text,{textStyle:"text.sm",color:i?"black.low":"black.high"},o))),n.createElement(t.Box,{mt:"5px",ml:"24px"},e?n.createElement(t.Text,{textStyle:"text.xs",color:"danger.500"},a):n.createElement(t.Text,{textStyle:"text.xs",color:"black.medium"},r)))}E.defaultProps={withShadow:!0,isRounded:!0},S.defaultProps={isError:!1,helpText:"",errorText:""};const F=e=>{const{label:r,isError:a,errorMessage:o,leftHelperText:i,rightHelperText:c,isRequired:l,children:d,isSuccess:s}=e,p=a?"danger.500":s?"success.500":"black.medium",m=c&&(!i||a&&!o)?"flex-end":"space-between";return n.createElement(t.FormControl,{isInvalid:a},r&&("string"==typeof r?n.createElement(t.FormLabel,{mb:1,fontSize:"text.sm",requiredIndicator:void 0},l&&n.createElement(t.Box,{as:"span",color:"danger.500",ml:0,mr:1},"*"),r):r),d,(a&&o||i||c)&&n.createElement(t.Box,{display:"flex",width:"full",justifyContent:m},a?"string"==typeof o?n.createElement(t.FormErrorMessage,{fontSize:"text.xs",color:"danger.500",mt:1},o):o:i&&n.createElement(t.FormHelperText,{fontSize:"text.xs",color:p,mt:1},i),c&&n.createElement(t.FormHelperText,{fontSize:"text.xs",color:p,mt:1},c)))};function M(e){const{children:r,label:a,helpText:o,isError:i,errorMessage:c,...l}=e;return n.createElement(F,Object.assign({},l,{label:a,leftHelperText:o,isError:i,errorMessage:c}),n.createElement(t.Box,{mt:"12px"},n.createElement(t.CheckboxGroup,Object.assign({},l),n.createElement(t.Stack,{spacing:[1,"16px"],direction:["column","row"]},r))))}F.defaultProps={label:"",isError:!1,isSuccess:!1,errorMessage:void 0,leftHelperText:void 0,rightHelperText:void 0,isRequired:!1},M.defaultProps={helpText:"",isError:!1,errorMessage:""};const P=({indeterminate:e=!1,...n})=>{const a=r.useRef(null);return r.useEffect(()=>{a.current&&"boolean"==typeof e&&(a.current.indeterminate=!n.checked&&e)},[a,e]),r.createElement(t.Flex,{align:"center"},r.createElement("input",Object.assign({type:"checkbox",ref:a},n)))},D=({columns:e,dataSource:n=[],isLoading:a,withSelectedRow:l,onSelectedRow:d,onSort:s,manualSorting:p,sortingState:m,styles:u,...g})=>{const[h,_]=r.useState(null!=m?m:[]),[b,x]=r.useState({}),k=r.useMemo(()=>e,[e]),f=r.useMemo(()=>[{id:"select",header:({table:e})=>r.createElement(P,Object.assign({},{checked:e.getIsAllRowsSelected(),indeterminate:e.getIsSomeRowsSelected(),onChange:e.getToggleAllRowsSelectedHandler()})),cell:({row:e})=>r.createElement(P,Object.assign({},{checked:e.getIsSelected(),indeterminate:e.getIsSomeSelected(),onChange:e.getToggleSelectedHandler()}))}],[]),y=c.useReactTable({data:n,columns:l?[...f,...k]:k,getCoreRowModel:c.getCoreRowModel(),getSortedRowModel:c.getSortedRowModel(),manualPagination:!0,sortDescFirst:!0,state:{sorting:h,rowSelection:b},onRowSelectionChange:x,onSortingChange:e=>{_(e),s&&s(e)},manualSorting:p}),{flatRows:v}=y.getSelectedRowModel();return r.useEffect(()=>{const e=v.map(e=>e.original);d&&d(e)},[v]),r.createElement(t.Box,Object.assign({},g),a&&r.createElement(t.Flex,{w:"100%",h:"100%",pos:"absolute",bg:"white",align:"center",justify:"center",zIndex:2},r.createElement(t.Spinner,{color:"primary.500",thickness:"4px",size:"lg"})),r.createElement(t.Table,Object.assign({},null==u?void 0:u.table),r.createElement(t.Thead,Object.assign({},null==u?void 0:u.tableHead),y.getHeaderGroups().map(e=>r.createElement(t.Tr,Object.assign({key:e.id,bg:t.useColorModeValue("initial","ebony-clay.700")},null==u?void 0:u.tableRow),e.headers.map(e=>{var n;return r.createElement(t.Th,Object.assign({key:e.id,colSpan:e.colSpan},null==u?void 0:u.tableColumnHeader),r.createElement(t.Flex,{"data-test-id":"CT_Container_TableHeader_"+e.id,textTransform:"capitalize",userSelect:"none",align:"center",justifyContent:"space-between"},r.createElement(t.Text,{fontSize:"text.sm",fontWeight:400,lineHeight:"18px",color:t.useColorModeValue("neutral.900","white")},c.flexRender(e.column.columnDef.header,e.getContext())),r.createElement(t.Box,{as:"span",pl:"2",cursor:e.column.getCanSort()?"pointer":"default","data-test-id":"CT_Container_SortingIcon_"+e.id,onClick:e.column.getToggleSortingHandler()},null!==(n=e.column.getCanSort()&&{asc:r.createElement(o.ChevronUpIcon,null),desc:r.createElement(o.ChevronDownIcon,null)}[e.column.getIsSorted()])&&void 0!==n?n:r.createElement(o.UpDownIcon,{h:2}))))})))),r.createElement(t.Tbody,Object.assign({},null==u?void 0:u.tableBody),y.getRowModel().rows.map(e=>r.createElement(t.Tr,Object.assign({key:e.id},null==u?void 0:u.tableRow,{css:i.css`
                 &:last-child {
                   td {
                     border-bottom: none;
                   }
                 }
-              `}),e.getVisibleCells().map(e=>r.createElement(t.Td,Object.assign({key:e.id,fontSize:"text.sm",color:t.useColorModeValue("dark.800","dark.300")},null==u?void 0:u.tableCell),c.flexRender(e.column.columnDef.cell,e.getContext()))))))))};C.defaultProps={withSelectedRow:!1,overflowX:"scroll",pos:"relative",maxW:"100%",minH:400,w:"full",styles:void 0,isLoading:void 0,onSelectedRow:void 0,onSort:void 0,manualSorting:!1,sortingState:[]};const E=()=>{const{colorMode:e}=p.useColorMode();return n.createElement(i.Global,{styles:`\n      @charset "UTF-8";\n      .react-datepicker__year-read-view--down-arrow,\n      .react-datepicker__month-read-view--down-arrow,\n      .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {\n        border-color: ${"light"===e?"#6E6B7B":"#d0d1d2"};\n        border-style: solid;\n        border-width: 1px 1px 0 0;\n        content: "";\n        display: block;\n        height: 7px;\n        position: absolute;\n        top: 13px;\n        width: 7px;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n        margin-left: -4px;\n        position: absolute;\n        width: 0;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n        box-sizing: content-box;\n        position: absolute;\n        border: 8px solid transparent;\n        height: 0;\n        width: 1px;\n        content: "";\n        z-index: -1;\n        border-width: 8px;\n        left: -8px;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n        border-bottom-color: #aeaeae;\n      }\n\n      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n        top: 0;\n        margin-top: -8px;\n      }\n      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n        border-top: none;\n        border-bottom-color: #f0f0f0;\n      }\n      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n        top: 0;\n      }\n      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n        top: -1px;\n        border-bottom-color: #aeaeae;\n      }\n\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n        bottom: 0;\n        margin-bottom: -8px;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n        border-bottom: none;\n        border-top-color: #fff;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n        bottom: 0;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {\n        bottom: -1px;\n        border-top-color: #aeaeae;\n      }\n\n      .react-datepicker-wrapper {\n        display: inline-block;\n        padding: 0;\n        border: 0;\n        width: 100%;\n      }\n\n      .react-datepicker {\n        font-family: "inherit", helvetica, arial, sans-serif;\n        font-size: 0.75;\n        background-color: ${"light"===e?"#ffffff":"#283046"};\n        color: ${"light"===e?"#000":"#d0d1d2"};\n        filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.08));\n        border-radius: 0.3rem;\n        display: inline-block;\n        position: relative;\n      }\n\n      .react-datepicker.inline {\n        filter: none;\n      }\n\n      .react-datepicker--time-only .react-datepicker__triangle {\n        left: 35px;\n      }\n      .react-datepicker--time-only .react-datepicker__time-container {\n        border-left: 0;\n      }\n      .react-datepicker--time-only .react-datepicker__time,\n      .react-datepicker--time-only .react-datepicker__time-box {\n        border-bottom-left-radius: 0.3rem;\n        border-bottom-right-radius: 0.3rem;\n      }\n\n      .react-datepicker__triangle {\n        position: absolute;\n        left: 50px;\n      }\n\n      .react-datepicker-popper {\n        z-index: 1;\n      }\n      .react-datepicker-popper[data-placement^=bottom] {\n        padding-top: 10px;\n      }\n      .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {\n        left: auto;\n        right: 50px;\n      }\n      .react-datepicker-popper[data-placement^=top] {\n        padding-bottom: 10px;\n      }\n      .react-datepicker-popper[data-placement^=right] {\n        padding-left: 8px;\n      }\n      .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {\n        left: auto;\n        right: 42px;\n      }\n      .react-datepicker-popper[data-placement^=left] {\n        padding-right: 8px;\n      }\n      .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {\n        left: 42px;\n        right: auto;\n      }\n\n      .react-datepicker__header {\n        text-align: center;\n        background-color: ${"light"===e?"#ffffff":"#131620"};\n        border-top-left-radius: 0.3rem;\n        padding: 8px 0;\n        position: relative;\n      }\n      .react-datepicker__header--time {\n        padding-bottom: 8px;\n        padding-left: 5px;\n        padding-right: 5px;\n      }\n      .react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n        border-top-left-radius: 0;\n      }\n      .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n        border-top-right-radius: 0.3rem;\n      }\n\n      .react-datepicker__year-dropdown-container--select,\n      .react-datepicker__month-dropdown-container--select,\n      .react-datepicker__month-year-dropdown-container--select,\n      .react-datepicker__year-dropdown-container--scroll,\n      .react-datepicker__month-dropdown-container--scroll,\n      .react-datepicker__month-year-dropdown-container--scroll {\n        display: inline-block;\n        margin: 0 2px;\n      }\n      .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select {\n        font-weight: 600;\n        line-height: 22px;\n        color: #111111;\n      }\n\n      .react-datepicker__current-month,\n      .react-datepicker-time__header,\n      .react-datepicker-year-header {\n        margin-top: 0;\n        color: ${"light"===e?"#111111":"#d0d1d2"};\n        font-size: 0.75;\n      }\n\n      .react-datepicker-time__header {\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n\n      .react-datepicker__navigation {\n        align-items: center;\n        background: none;\n        display: flex;\n        justify-content: center;\n        text-align: center;\n        cursor: pointer;\n        position: absolute;\n        top: 2px;\n        padding: 0;\n        border: none;\n        z-index: 1;\n        height: 32px;\n        width: 32px;\n        text-indent: -999em;\n        overflow: hidden;\n      }\n      .react-datepicker__navigation--previous {\n        left: 2px;\n      }\n      .react-datepicker__navigation--next {\n        right: 2px;\n      }\n      .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n        right: 85px;\n      }\n      .react-datepicker__navigation--years {\n        position: relative;\n        top: 0;\n        display: block;\n        margin-left: auto;\n        margin-right: auto;\n      }\n      .react-datepicker__navigation--years-previous {\n        top: 4px;\n      }\n      .react-datepicker__navigation--years-upcoming {\n        top: -4px;\n      }\n      .react-datepicker__navigation:hover *::before {\n        border-color: #a6a6a6;\n      }\n\n      .react-datepicker__navigation-icon {\n        position: relative;\n        top: -1px;\n        font-size: 20px;\n        width: 0;\n      }\n      .react-datepicker__navigation-icon--next {\n        left: -2px;\n      }\n      .react-datepicker__navigation-icon--next::before {\n        transform: rotate(45deg);\n        left: -7px;\n      }\n      .react-datepicker__navigation-icon--previous {\n        right: -2px;\n      }\n      .react-datepicker__navigation-icon--previous::before {\n        transform: rotate(225deg);\n        right: -7px;\n      }\n\n      .react-datepicker__month-container {\n        float: left;\n        border-radius: 8px;\n      }\n\n      .react-datepicker__year {\n        margin: 0.4rem;\n        text-align: center;\n      }\n      .react-datepicker__year-wrapper {\n        display: flex;\n        flex-wrap: wrap;\n        max-width: 180px;\n      }\n      .react-datepicker__year .react-datepicker__year-text {\n        display: inline-block;\n        width: 4rem;\n        margin: 2px;\n      }\n\n      .react-datepicker__month {\n        margin: 0.4rem;\n        text-align: center;\n      }\n      .react-datepicker__month .react-datepicker__month-text,\n      .react-datepicker__month .react-datepicker__quarter-text {\n        display: inline-block;\n        width: 4rem;\n        margin: 2px;\n      }\n\n      .react-datepicker__input-time-container {\n        width: 100%;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__caption {\n        width: 100%;\n        display: inline-block;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container {\n        width: 100%;\n        display: inline-block;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n        width: 100%;\n        display: inline-block;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n        width: auto;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n        -moz-appearance: textfield;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n        width: 100%;\n        display: inline-block;\n      }\n\n      .react-datepicker__time-container {\n        float: right;\n        border-left: 1px solid #aeaeae;\n        width: 85px;\n      }\n      .react-datepicker__time-container--with-today-button {\n        display: inline;\n        border: 1px solid #aeaeae;\n        border-radius: 0.3rem;\n        position: absolute;\n        right: -72px;\n        top: 0;\n      }\n      .react-datepicker__time-container .react-datepicker__time {\n        position: relative;\n        background: white;\n        border-bottom-right-radius: 0.3rem;\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n        width: 85px;\n        overflow-x: hidden;\n        margin: 0 auto;\n        text-align: center;\n        border-bottom-right-radius: 0.3rem;\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n        list-style: none;\n        margin: 0;\n        height: calc(195px + (1.7rem / 2));\n        overflow-y: scroll;\n        padding-right: 0;\n        padding-left: 0;\n        width: 100%;\n        box-sizing: content-box;\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n        height: 30px;\n        padding: 5px 10px;\n        white-space: nowrap;\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n        cursor: pointer;\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n        background-color: ${"light"===e?"#12784A":"#131620"};\n        color: white;\n        font-weight: bold;\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n        background-color: ${"light"===e?"#12784A":"#131620"};\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n        color: ${"light"===e?"#ccc":"#d0d1d2"};\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n        cursor: default;\n        background-color: transparent;\n      }\n\n      .react-datepicker__week-number {\n        color: ${"light"===e?"#ccc":"#d0d1d2"};\n        display: inline-block;\n        width: 1.7rem;\n        line-height: 1.7rem;\n        text-align: center;\n        margin: 0.166rem;\n      }\n      .react-datepicker__week-number.react-datepicker__week-number--clickable {\n        cursor: pointer;\n      }\n      .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n        border-radius: 0.3rem;\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n      }\n\n      .react-datepicker__day-names,\n      .react-datepicker__week {\n        white-space: nowrap;\n      }\n\n      .react-datepicker__day-names {\n        margin-bottom: 0px;\n      }\n\n      .react-datepicker__day-name,\n      .react-datepicker__day,\n      .react-datepicker__time-name {\n        color: ${"light"===e?"#000":"#d0d1d2"};\n        display: inline-block;\n        width: 1.7rem;\n        line-height: 1.7rem;\n        text-align: center;\n        padding: 0.166rem;\n      }\n\n      .react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,\n      .react-datepicker__quarter--selected,\n      .react-datepicker__quarter--in-selecting-range,\n      .react-datepicker__quarter--in-range {\n        border-radius: 0.3rem;\n        background-color: ${"light"===e?"#12784A":"#131620"};\n        color: #fff;\n      }\n      .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,\n      .react-datepicker__quarter--selected:hover,\n      .react-datepicker__quarter--in-selecting-range:hover,\n      .react-datepicker__quarter--in-range:hover {\n        background-color: ${"light"===e?"#075331":"#131620"};\n      }\n      .react-datepicker__month--disabled,\n      .react-datepicker__quarter--disabled {\n        color: #ccc;\n        pointer-events: none;\n      }\n      .react-datepicker__month--disabled:hover,\n      .react-datepicker__quarter--disabled:hover {\n        cursor: default;\n        background-color: transparent;\n      }\n\n      .react-datepicker__day,\n      .react-datepicker__month-text,\n      .react-datepicker__quarter-text,\n      .react-datepicker__year-text {\n        cursor: pointer;\n      }\n      .react-datepicker__day:hover,\n      .react-datepicker__month-text:hover,\n      .react-datepicker__quarter-text:hover,\n      .react-datepicker__year-text:hover {\n        border-radius: 0.3rem;\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n      }\n      .react-datepicker__day--highlighted,\n      .react-datepicker__month-text--highlighted,\n      .react-datepicker__quarter-text--highlighted,\n      .react-datepicker__year-text--highlighted {\n        border-radius: 0.3rem;\n        background-color: #3dcc4a;\n        color: #fff;\n      }\n      .react-datepicker__day--highlighted:hover,\n      .react-datepicker__month-text--highlighted:hover,\n      .react-datepicker__quarter-text--highlighted:hover,\n      .react-datepicker__year-text--highlighted:hover {\n        background-color: #32be3f;\n      }\n      .react-datepicker__day--highlighted-custom-1,\n      .react-datepicker__month-text--highlighted-custom-1,\n      .react-datepicker__quarter-text--highlighted-custom-1,\n      .react-datepicker__year-text--highlighted-custom-1 {\n        color: magenta;\n      }\n      .react-datepicker__day--highlighted-custom-2,\n      .react-datepicker__month-text--highlighted-custom-2,\n      .react-datepicker__quarter-text--highlighted-custom-2,\n      .react-datepicker__year-text--highlighted-custom-2 {\n        color: green;\n      }\n      .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,\n      .react-datepicker__month-text--selected,\n      .react-datepicker__month-text--in-selecting-range,\n      .react-datepicker__month-text--in-range,\n      .react-datepicker__quarter-text--selected,\n      .react-datepicker__quarter-text--in-selecting-range,\n      .react-datepicker__quarter-text--in-range,\n      .react-datepicker__year-text--selected,\n      .react-datepicker__year-text--in-selecting-range,\n      .react-datepicker__year-text--in-range {\n        border-radius: 0.3rem;\n        background-color: ${"light"===e?"#12784A":"#131620"};\n        color: #fff;\n      }\n      .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,\n      .react-datepicker__month-text--selected:hover,\n      .react-datepicker__month-text--in-selecting-range:hover,\n      .react-datepicker__month-text--in-range:hover,\n      .react-datepicker__quarter-text--selected:hover,\n      .react-datepicker__quarter-text--in-selecting-range:hover,\n      .react-datepicker__quarter-text--in-range:hover,\n      .react-datepicker__year-text--selected:hover,\n      .react-datepicker__year-text--in-selecting-range:hover,\n      .react-datepicker__year-text--in-range:hover {\n        background-color: ${"light"===e?"#075331":"#131620"};\n      }\n      .react-datepicker__day--keyboard-selected,\n      .react-datepicker__month-text--keyboard-selected,\n      .react-datepicker__quarter-text--keyboard-selected,\n      .react-datepicker__year-text--keyboard-selected {\n        border-radius: 0.3rem;\n        background-color: ${"light"===e?"#075331":"#131620"};\n        color: #fff;\n      }\n      .react-datepicker__day--keyboard-selected:hover,\n      .react-datepicker__month-text--keyboard-selected:hover,\n      .react-datepicker__quarter-text--keyboard-selected:hover,\n      .react-datepicker__year-text--keyboard-selected:hover {\n        background-color: ${"light"===e?"#075331":"#131620"};\n      }\n      .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n      .react-datepicker__month-text--in-range,\n      .react-datepicker__quarter-text--in-range,\n      .react-datepicker__year-text--in-range),\n      .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n      .react-datepicker__month-text--in-range,\n      .react-datepicker__quarter-text--in-range,\n      .react-datepicker__year-text--in-range),\n      .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n      .react-datepicker__month-text--in-range,\n      .react-datepicker__quarter-text--in-range,\n      .react-datepicker__year-text--in-range),\n      .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n      .react-datepicker__month-text--in-range,\n      .react-datepicker__quarter-text--in-range,\n      .react-datepicker__year-text--in-range) {\n        background-color: rgba(18, 120, 74, 0.1);\n        color: ${"light"===e?"#000":"#d0d1d2"};\n      }\n      .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n      .react-datepicker__month-text--in-selecting-range,\n      .react-datepicker__quarter-text--in-selecting-range,\n      .react-datepicker__year-text--in-selecting-range),\n      .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n      .react-datepicker__month-text--in-selecting-range,\n      .react-datepicker__quarter-text--in-selecting-range,\n      .react-datepicker__year-text--in-selecting-range),\n      .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n      .react-datepicker__month-text--in-selecting-range,\n      .react-datepicker__quarter-text--in-selecting-range,\n      .react-datepicker__year-text--in-selecting-range),\n      .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n      .react-datepicker__month-text--in-selecting-range,\n      .react-datepicker__quarter-text--in-selecting-range,\n      .react-datepicker__year-text--in-selecting-range) {\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n        color: ${"light"===e?"#000":"#d0d1d2"};\n      }\n      .react-datepicker__day--disabled,\n      .react-datepicker__month-text--disabled,\n      .react-datepicker__quarter-text--disabled,\n      .react-datepicker__year-text--disabled {\n        cursor: default;\n        color: #ccc;\n      }\n      .react-datepicker__day--disabled:hover,\n      .react-datepicker__month-text--disabled:hover,\n      .react-datepicker__quarter-text--disabled:hover,\n      .react-datepicker__year-text--disabled:hover {\n        background-color: transparent;\n      }\n\n      .react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,\n      .react-datepicker__quarter-text.react-datepicker__month--selected:hover,\n      .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,\n      .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,\n      .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {\n        background-color: ${"light"===e?"#12784A":"#131620"};\n      }\n      .react-datepicker__month-text:hover,\n      .react-datepicker__quarter-text:hover {\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n      }\n\n      .react-datepicker__input-container {\n        position: relative;\n        display: inline-block;\n        width: 100%;\n      }\n\n      .react-datepicker__year-read-view,\n      .react-datepicker__month-read-view,\n      .react-datepicker__month-year-read-view {\n        border: 1px solid transparent;\n        border-radius: 0.3rem;\n        position: relative;\n      }\n      .react-datepicker__year-read-view:hover,\n      .react-datepicker__month-read-view:hover,\n      .react-datepicker__month-year-read-view:hover {\n        cursor: pointer;\n      }\n      .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n      .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n      .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n      .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n      .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n      .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n        border-top-color: #b3b3b3;\n      }\n      .react-datepicker__year-read-view--down-arrow,\n      .react-datepicker__month-read-view--down-arrow,\n      .react-datepicker__month-year-read-view--down-arrow {\n        transform: rotate(135deg);\n        right: -16px;\n        top: 5px;\n        width: 5px;\n        height: 5px;\n        fill: #111111;\n\n      }\n      .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n        background: ${"light"===e?"#F5F5F5":"inherit"} ;\n\n        border-top-left-radius: 8px;\n        border-top-right-radius: 8px;\n      }\n\n      .react-datepicker__year-dropdown,\n      .react-datepicker__month-dropdown,\n      .react-datepicker__month-year-dropdown {\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n        position: absolute;\n        width: 50%;\n        left: 25%;\n        top: 30px;\n        z-index: 1;\n        text-align: center;\n        border-radius: 0.3rem;\n        border: 1px solid #aeaeae;\n      }\n      .react-datepicker__year-dropdown:hover,\n      .react-datepicker__month-dropdown:hover,\n      .react-datepicker__month-year-dropdown:hover {\n        cursor: pointer;\n      }\n      .react-datepicker__year-dropdown--scrollable,\n      .react-datepicker__month-dropdown--scrollable,\n      .react-datepicker__month-year-dropdown--scrollable {\n        height: 150px;\n        overflow-y: scroll;\n      }\n\n      .react-datepicker__year-option,\n      .react-datepicker__month-option,\n      .react-datepicker__month-year-option {\n        line-height: 20px;\n        width: 100%;\n        display: block;\n        margin-left: auto;\n        margin-right: auto;\n      }\n      .react-datepicker__year-option:first-of-type,\n      .react-datepicker__month-option:first-of-type,\n      .react-datepicker__month-year-option:first-of-type {\n        border-top-left-radius: 0.3rem;\n        border-top-right-radius: 0.3rem;\n      }\n      .react-datepicker__year-option:last-of-type,\n      .react-datepicker__month-option:last-of-type,\n      .react-datepicker__month-year-option:last-of-type {\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        border-bottom-left-radius: 0.3rem;\n        border-bottom-right-radius: 0.3rem;\n      }\n      .react-datepicker__year-option:hover,\n      .react-datepicker__month-option:hover,\n      .react-datepicker__month-year-option:hover {\n        background-color: #ccc;\n      }\n      .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n      .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n      .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n        border-bottom-color: #b3b3b3;\n      }\n      .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n      .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n      .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n        border-top-color: #b3b3b3;\n      }\n      .react-datepicker__year-option--selected,\n      .react-datepicker__month-option--selected,\n      .react-datepicker__month-year-option--selected {\n        position: absolute;\n        left: 15px;\n      }\n\n      .react-datepicker__close-icon {\n        cursor: pointer;\n        background-color: transparent;\n        border: 0;\n        outline: 0;\n        padding: 0 6px 0 0;\n        position: absolute;\n        top: 0;\n        right: 0;\n        height: 100%;\n        display: table-cell;\n        vertical-align: middle;\n      }\n      .react-datepicker__close-icon::after {\n        cursor: pointer;\n        background-color: ${"light"===e?"#12784A":"#131620"};\n        color: #fff;\n        border-radius: 50%;\n        height: 16px;\n        width: 16px;\n        padding: 2px;\n        font-size: 12px;\n        line-height: 1;\n        text-align: center;\n        display: table-cell;\n        vertical-align: middle;\n        content: "×";\n      }\n\n      .react-datepicker__today-button {\n        background: #f0f0f0;\n        border-top: 1px solid #aeaeae;\n        cursor: pointer;\n        text-align: center;\n        font-weight: bold;\n        padding: 5px 0;\n        clear: left;\n      }\n\n      .react-datepicker__portal {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        background-color: rgba(0, 0, 0, 0.8);\n        left: 0;\n        top: 0;\n        justify-content: center;\n        align-items: center;\n        display: flex;\n        z-index: 2147483647;\n      }\n      .react-datepicker__portal .react-datepicker__day-name,\n      .react-datepicker__portal .react-datepicker__day,\n      .react-datepicker__portal .react-datepicker__time-name {\n        width: 3rem;\n        line-height: 3rem;\n      }\n      @media (max-width: 400px), (max-height: 550px) {\n        .react-datepicker__portal .react-datepicker__day-name,\n      .react-datepicker__portal .react-datepicker__day,\n      .react-datepicker__portal .react-datepicker__time-name {\n          width: 2rem;\n          line-height: 2rem;\n        }\n      }\n      .react-datepicker__portal .react-datepicker__current-month,\n      .react-datepicker__portal .react-datepicker-time__header {\n        font-size: 1.44rem;\n      }\n\n      /** injected styles **/\n      .react-datepicker__day--outside-month {\n        color: ${"light"===e?"#B9B9C3":"#4D4D4D"};\n      }\n      .react-datepicker__day.react-datepicker__day--in-range {\n        border-radius: 0;\n        background: rgba(18, 120, 74, 0.1);\n        color: #12784A;\n      }\n      .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day--in-range,\n      .react-datepicker__day.react-datepicker__day--range-end.react-datepicker__day--in-range {\n        background: #12784A;\n        color: #fff;\n      }\n      .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day--in-range {\n        border-radius: 100px 0px 0px 100px;\n      }\n      .react-datepicker__day.react-datepicker__day--range-end.react-datepicker__day--in-range {\n        border-radius: 0px 100px 100px 0px;\n      }\n      .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day.react-datepicker__day--range-end {\n        border-radius: 100px;\n        padding: 0;\n      }\n      .react-datepicker__day.react-datepicker__day--outside-month:empty {\n        padding: 0;\n      }\n      .react-datepicker.inline .react-datepicker__header {\n        background-color: inherit;\n      }\n      .react-datepicker__day--keyboard-selected, .react-datepicker__day--keyboard-selected:hover {\n        background-color: inherit;\n        color: inherit;\n      }\n      .react-datepicker__day--today, .react-datepicker__day--today:hover {\n        color: #D82F23;\n      }\n      .react-datepicker__day--today:hover {\n        background: #f0f0f0;\n      }\n      .react-datepicker__day--selected.react-datepicker__day--today {\n        color: white;\n        background: #12784A;\n      }\n    `})},S=({value:e,onChange:r,label:a,rightAddon:o})=>{const[i,c]=n.useState(e||"00:00");return n.useEffect(()=>{r&&r(i)},[i]),n.createElement(t.Flex,{flexDir:"column",alignItems:"center",justifyContent:"center",p:4,pt:0},n.createElement(t.Text,{mb:2},a),n.createElement(t.InputGroup,{alignItems:"center",justifyContent:"center"},n.createElement(t.Input,{onChange:e=>{var t;c((null===(t=e.target)||void 0===t?void 0:t.value)||"00:00")},type:"time",value:i,"data-test-id":"CT_Component_datepicker_input_time"}),o&&n.createElement(t.InputRightAddon,null,o)))};S.displayName="DatepickerTimeInput",S.defaultProps={value:"00:00",onChange:void 0,label:"Pilih Waktu",rightAddon:"WIB"};const F=({id:e,label:r,error:o,isError:i,helperText:c,isRequired:p,withTime:s,value:m,name:u,onClear:g,showMonth:_,shortMonth:h,...b})=>{var k;const x=m?new Date(m):void 0,f=(null!==(k=b.dateFormat)&&void 0!==k?k:s)?"yyyy-MM-dd HH:mm":"yyyy-MM-dd",y=n.createElement(n.Fragment,null,n.createElement(E,null),n.createElement(d,Object.assign({id:e,name:u,selected:x,customInput:n.createElement(t.Input,{autoComplete:"off"}),dateFormat:f,showPopperArrow:!1,calendarClassName:l({inline:b.inline}),showMonthDropdown:_,useShortMonthInDropdown:!!_&&h},s?{timeInputLabel:"",showTimeInput:!0,customTimeInput:n.createElement(S,null)}:{},b)));return b.inline?y:n.createElement(t.FormControl,{isRequired:p,"data-test-id":"CT_Component_datepicker_wrapper"},r&&n.createElement(t.FormLabel,{fontSize:"text.sm"},r),n.createElement(t.InputGroup,null,y,n.createElement(t.InputRightElement,null,!m&&n.createElement(a.FiCalendar,null),m&&n.createElement(a.FiX,{"data-test-id":"bcpJJyCP0z_RIAGZXDU6s",onClick:g,cursor:"pointer"}))),i?n.createElement(t.FormErrorMessage,null,o):n.createElement(t.FormHelperText,null,c))};F.defaultProps={id:void 0,isRequired:void 0,label:void 0,error:void 0,isError:void 0,helperText:void 0,withTime:void 0,onClear:void 0,selectsRange:void 0,shortMonth:!1,showMonth:!1};const M=({onChange:e,min:r,max:a,...o})=>{const[c,l]=n.useState(null);return n.createElement(t.Box,{fontSize:"12px",lineHeight:"18px",css:i.css`
+              `}),e.getVisibleCells().map(e=>r.createElement(t.Td,Object.assign({key:e.id,fontSize:"text.sm",color:t.useColorModeValue("dark.800","dark.300")},null==u?void 0:u.tableCell),c.flexRender(e.column.columnDef.cell,e.getContext()))))))))};D.defaultProps={withSelectedRow:!1,overflowX:"scroll",pos:"relative",maxW:"100%",minH:400,w:"full",styles:void 0,isLoading:void 0,onSelectedRow:void 0,onSort:void 0,manualSorting:!1,sortingState:[]};const B=()=>{const{colorMode:e}=s.useColorMode();return n.createElement(i.Global,{styles:`\n      @charset "UTF-8";\n      .react-datepicker__year-read-view--down-arrow,\n      .react-datepicker__month-read-view--down-arrow,\n      .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {\n        border-color: ${"light"===e?"#6E6B7B":"#d0d1d2"};\n        border-style: solid;\n        border-width: 1px 1px 0 0;\n        content: "";\n        display: block;\n        height: 7px;\n        position: absolute;\n        top: 13px;\n        width: 7px;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n        margin-left: -4px;\n        position: absolute;\n        width: 0;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n        box-sizing: content-box;\n        position: absolute;\n        border: 8px solid transparent;\n        height: 0;\n        width: 1px;\n        content: "";\n        z-index: -1;\n        border-width: 8px;\n        left: -8px;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n        border-bottom-color: #aeaeae;\n      }\n\n      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n        top: 0;\n        margin-top: -8px;\n      }\n      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n        border-top: none;\n        border-bottom-color: #f0f0f0;\n      }\n      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n        top: 0;\n      }\n      .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n        top: -1px;\n        border-bottom-color: #aeaeae;\n      }\n\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n        bottom: 0;\n        margin-bottom: -8px;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n        border-bottom: none;\n        border-top-color: #fff;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n        bottom: 0;\n      }\n      .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {\n        bottom: -1px;\n        border-top-color: #aeaeae;\n      }\n\n      .react-datepicker-wrapper {\n        display: inline-block;\n        padding: 0;\n        border: 0;\n        width: 100%;\n      }\n\n      .react-datepicker {\n        font-family: "inherit", helvetica, arial, sans-serif;\n        font-size: 0.75;\n        background-color: ${"light"===e?"#ffffff":"#283046"};\n        color: ${"light"===e?"#000":"#d0d1d2"};\n        filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.08));\n        border-radius: 0.3rem;\n        display: inline-block;\n        position: relative;\n      }\n\n      .react-datepicker.inline {\n        filter: none;\n      }\n\n      .react-datepicker--time-only .react-datepicker__triangle {\n        left: 35px;\n      }\n      .react-datepicker--time-only .react-datepicker__time-container {\n        border-left: 0;\n      }\n      .react-datepicker--time-only .react-datepicker__time,\n      .react-datepicker--time-only .react-datepicker__time-box {\n        border-bottom-left-radius: 0.3rem;\n        border-bottom-right-radius: 0.3rem;\n      }\n\n      .react-datepicker__triangle {\n        position: absolute;\n        left: 50px;\n      }\n\n      .react-datepicker-popper {\n        z-index: 1;\n      }\n      .react-datepicker-popper[data-placement^=bottom] {\n        padding-top: 10px;\n      }\n      .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {\n        left: auto;\n        right: 50px;\n      }\n      .react-datepicker-popper[data-placement^=top] {\n        padding-bottom: 10px;\n      }\n      .react-datepicker-popper[data-placement^=right] {\n        padding-left: 8px;\n      }\n      .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {\n        left: auto;\n        right: 42px;\n      }\n      .react-datepicker-popper[data-placement^=left] {\n        padding-right: 8px;\n      }\n      .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {\n        left: 42px;\n        right: auto;\n      }\n\n      .react-datepicker__header {\n        text-align: center;\n        background-color: ${"light"===e?"#ffffff":"#131620"};\n        border-top-left-radius: 0.3rem;\n        padding: 8px 0;\n        position: relative;\n      }\n      .react-datepicker__header--time {\n        padding-bottom: 8px;\n        padding-left: 5px;\n        padding-right: 5px;\n      }\n      .react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n        border-top-left-radius: 0;\n      }\n      .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n        border-top-right-radius: 0.3rem;\n      }\n\n      .react-datepicker__year-dropdown-container--select,\n      .react-datepicker__month-dropdown-container--select,\n      .react-datepicker__month-year-dropdown-container--select,\n      .react-datepicker__year-dropdown-container--scroll,\n      .react-datepicker__month-dropdown-container--scroll,\n      .react-datepicker__month-year-dropdown-container--scroll {\n        display: inline-block;\n        margin: 0 2px;\n      }\n      .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select {\n        font-weight: 600;\n        line-height: 22px;\n        color: #111111;\n      }\n\n      .react-datepicker__current-month,\n      .react-datepicker-time__header,\n      .react-datepicker-year-header {\n        margin-top: 0;\n        color: ${"light"===e?"#111111":"#d0d1d2"};\n        font-size: 0.75;\n      }\n\n      .react-datepicker-time__header {\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n\n      .react-datepicker__navigation {\n        align-items: center;\n        background: none;\n        display: flex;\n        justify-content: center;\n        text-align: center;\n        cursor: pointer;\n        position: absolute;\n        top: 2px;\n        padding: 0;\n        border: none;\n        z-index: 1;\n        height: 32px;\n        width: 32px;\n        text-indent: -999em;\n        overflow: hidden;\n      }\n      .react-datepicker__navigation--previous {\n        left: 2px;\n      }\n      .react-datepicker__navigation--next {\n        right: 2px;\n      }\n      .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n        right: 85px;\n      }\n      .react-datepicker__navigation--years {\n        position: relative;\n        top: 0;\n        display: block;\n        margin-left: auto;\n        margin-right: auto;\n      }\n      .react-datepicker__navigation--years-previous {\n        top: 4px;\n      }\n      .react-datepicker__navigation--years-upcoming {\n        top: -4px;\n      }\n      .react-datepicker__navigation:hover *::before {\n        border-color: #a6a6a6;\n      }\n\n      .react-datepicker__navigation-icon {\n        position: relative;\n        top: -1px;\n        font-size: 20px;\n        width: 0;\n      }\n      .react-datepicker__navigation-icon--next {\n        left: -2px;\n      }\n      .react-datepicker__navigation-icon--next::before {\n        transform: rotate(45deg);\n        left: -7px;\n      }\n      .react-datepicker__navigation-icon--previous {\n        right: -2px;\n      }\n      .react-datepicker__navigation-icon--previous::before {\n        transform: rotate(225deg);\n        right: -7px;\n      }\n\n      .react-datepicker__month-container {\n        float: left;\n        border-radius: 8px;\n      }\n\n      .react-datepicker__year {\n        margin: 0.4rem;\n        text-align: center;\n      }\n      .react-datepicker__year-wrapper {\n        display: flex;\n        flex-wrap: wrap;\n        max-width: 180px;\n      }\n      .react-datepicker__year .react-datepicker__year-text {\n        display: inline-block;\n        width: 4rem;\n        margin: 2px;\n      }\n\n      .react-datepicker__month {\n        margin: 0.4rem;\n        text-align: center;\n      }\n      .react-datepicker__month .react-datepicker__month-text,\n      .react-datepicker__month .react-datepicker__quarter-text {\n        display: inline-block;\n        width: 4rem;\n        margin: 2px;\n      }\n\n      .react-datepicker__input-time-container {\n        width: 100%;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__caption {\n        width: 100%;\n        display: inline-block;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container {\n        width: 100%;\n        display: inline-block;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n        width: 100%;\n        display: inline-block;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n        width: auto;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n        -moz-appearance: textfield;\n      }\n      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n        width: 100%;\n        display: inline-block;\n      }\n\n      .react-datepicker__time-container {\n        float: right;\n        border-left: 1px solid #aeaeae;\n        width: 85px;\n      }\n      .react-datepicker__time-container--with-today-button {\n        display: inline;\n        border: 1px solid #aeaeae;\n        border-radius: 0.3rem;\n        position: absolute;\n        right: -72px;\n        top: 0;\n      }\n      .react-datepicker__time-container .react-datepicker__time {\n        position: relative;\n        background: white;\n        border-bottom-right-radius: 0.3rem;\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n        width: 85px;\n        overflow-x: hidden;\n        margin: 0 auto;\n        text-align: center;\n        border-bottom-right-radius: 0.3rem;\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n        list-style: none;\n        margin: 0;\n        height: calc(195px + (1.7rem / 2));\n        overflow-y: scroll;\n        padding-right: 0;\n        padding-left: 0;\n        width: 100%;\n        box-sizing: content-box;\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n        height: 30px;\n        padding: 5px 10px;\n        white-space: nowrap;\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n        cursor: pointer;\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n        background-color: ${"light"===e?"#12784A":"#131620"};\n        color: white;\n        font-weight: bold;\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n        background-color: ${"light"===e?"#12784A":"#131620"};\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n        color: ${"light"===e?"#ccc":"#d0d1d2"};\n      }\n      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n        cursor: default;\n        background-color: transparent;\n      }\n\n      .react-datepicker__week-number {\n        color: ${"light"===e?"#ccc":"#d0d1d2"};\n        display: inline-block;\n        width: 1.7rem;\n        line-height: 1.7rem;\n        text-align: center;\n        margin: 0.166rem;\n      }\n      .react-datepicker__week-number.react-datepicker__week-number--clickable {\n        cursor: pointer;\n      }\n      .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n        border-radius: 0.3rem;\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n      }\n\n      .react-datepicker__day-names,\n      .react-datepicker__week {\n        white-space: nowrap;\n      }\n\n      .react-datepicker__day-names {\n        margin-bottom: 0px;\n      }\n\n      .react-datepicker__day-name,\n      .react-datepicker__day,\n      .react-datepicker__time-name {\n        color: ${"light"===e?"#000":"#d0d1d2"};\n        display: inline-block;\n        width: 1.7rem;\n        line-height: 1.7rem;\n        text-align: center;\n        padding: 0.166rem;\n      }\n\n      .react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,\n      .react-datepicker__quarter--selected,\n      .react-datepicker__quarter--in-selecting-range,\n      .react-datepicker__quarter--in-range {\n        border-radius: 0.3rem;\n        background-color: ${"light"===e?"#12784A":"#131620"};\n        color: #fff;\n      }\n      .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,\n      .react-datepicker__quarter--selected:hover,\n      .react-datepicker__quarter--in-selecting-range:hover,\n      .react-datepicker__quarter--in-range:hover {\n        background-color: ${"light"===e?"#075331":"#131620"};\n      }\n      .react-datepicker__month--disabled,\n      .react-datepicker__quarter--disabled {\n        color: #ccc;\n        pointer-events: none;\n      }\n      .react-datepicker__month--disabled:hover,\n      .react-datepicker__quarter--disabled:hover {\n        cursor: default;\n        background-color: transparent;\n      }\n\n      .react-datepicker__day,\n      .react-datepicker__month-text,\n      .react-datepicker__quarter-text,\n      .react-datepicker__year-text {\n        cursor: pointer;\n      }\n      .react-datepicker__day:hover,\n      .react-datepicker__month-text:hover,\n      .react-datepicker__quarter-text:hover,\n      .react-datepicker__year-text:hover {\n        border-radius: 0.3rem;\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n      }\n      .react-datepicker__day--highlighted,\n      .react-datepicker__month-text--highlighted,\n      .react-datepicker__quarter-text--highlighted,\n      .react-datepicker__year-text--highlighted {\n        border-radius: 0.3rem;\n        background-color: #3dcc4a;\n        color: #fff;\n      }\n      .react-datepicker__day--highlighted:hover,\n      .react-datepicker__month-text--highlighted:hover,\n      .react-datepicker__quarter-text--highlighted:hover,\n      .react-datepicker__year-text--highlighted:hover {\n        background-color: #32be3f;\n      }\n      .react-datepicker__day--highlighted-custom-1,\n      .react-datepicker__month-text--highlighted-custom-1,\n      .react-datepicker__quarter-text--highlighted-custom-1,\n      .react-datepicker__year-text--highlighted-custom-1 {\n        color: magenta;\n      }\n      .react-datepicker__day--highlighted-custom-2,\n      .react-datepicker__month-text--highlighted-custom-2,\n      .react-datepicker__quarter-text--highlighted-custom-2,\n      .react-datepicker__year-text--highlighted-custom-2 {\n        color: green;\n      }\n      .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,\n      .react-datepicker__month-text--selected,\n      .react-datepicker__month-text--in-selecting-range,\n      .react-datepicker__month-text--in-range,\n      .react-datepicker__quarter-text--selected,\n      .react-datepicker__quarter-text--in-selecting-range,\n      .react-datepicker__quarter-text--in-range,\n      .react-datepicker__year-text--selected,\n      .react-datepicker__year-text--in-selecting-range,\n      .react-datepicker__year-text--in-range {\n        border-radius: 0.3rem;\n        background-color: ${"light"===e?"#12784A":"#131620"};\n        color: #fff;\n      }\n      .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,\n      .react-datepicker__month-text--selected:hover,\n      .react-datepicker__month-text--in-selecting-range:hover,\n      .react-datepicker__month-text--in-range:hover,\n      .react-datepicker__quarter-text--selected:hover,\n      .react-datepicker__quarter-text--in-selecting-range:hover,\n      .react-datepicker__quarter-text--in-range:hover,\n      .react-datepicker__year-text--selected:hover,\n      .react-datepicker__year-text--in-selecting-range:hover,\n      .react-datepicker__year-text--in-range:hover {\n        background-color: ${"light"===e?"#075331":"#131620"};\n      }\n      .react-datepicker__day--keyboard-selected,\n      .react-datepicker__month-text--keyboard-selected,\n      .react-datepicker__quarter-text--keyboard-selected,\n      .react-datepicker__year-text--keyboard-selected {\n        border-radius: 0.3rem;\n        background-color: ${"light"===e?"#075331":"#131620"};\n        color: #fff;\n      }\n      .react-datepicker__day--keyboard-selected:hover,\n      .react-datepicker__month-text--keyboard-selected:hover,\n      .react-datepicker__quarter-text--keyboard-selected:hover,\n      .react-datepicker__year-text--keyboard-selected:hover {\n        background-color: ${"light"===e?"#075331":"#131620"};\n      }\n      .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n      .react-datepicker__month-text--in-range,\n      .react-datepicker__quarter-text--in-range,\n      .react-datepicker__year-text--in-range),\n      .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n      .react-datepicker__month-text--in-range,\n      .react-datepicker__quarter-text--in-range,\n      .react-datepicker__year-text--in-range),\n      .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n      .react-datepicker__month-text--in-range,\n      .react-datepicker__quarter-text--in-range,\n      .react-datepicker__year-text--in-range),\n      .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n      .react-datepicker__month-text--in-range,\n      .react-datepicker__quarter-text--in-range,\n      .react-datepicker__year-text--in-range) {\n        background-color: rgba(18, 120, 74, 0.1);\n        color: ${"light"===e?"#000":"#d0d1d2"};\n      }\n      .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n      .react-datepicker__month-text--in-selecting-range,\n      .react-datepicker__quarter-text--in-selecting-range,\n      .react-datepicker__year-text--in-selecting-range),\n      .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n      .react-datepicker__month-text--in-selecting-range,\n      .react-datepicker__quarter-text--in-selecting-range,\n      .react-datepicker__year-text--in-selecting-range),\n      .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n      .react-datepicker__month-text--in-selecting-range,\n      .react-datepicker__quarter-text--in-selecting-range,\n      .react-datepicker__year-text--in-selecting-range),\n      .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n      .react-datepicker__month-text--in-selecting-range,\n      .react-datepicker__quarter-text--in-selecting-range,\n      .react-datepicker__year-text--in-selecting-range) {\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n        color: ${"light"===e?"#000":"#d0d1d2"};\n      }\n      .react-datepicker__day--disabled,\n      .react-datepicker__month-text--disabled,\n      .react-datepicker__quarter-text--disabled,\n      .react-datepicker__year-text--disabled {\n        cursor: default;\n        color: #ccc;\n      }\n      .react-datepicker__day--disabled:hover,\n      .react-datepicker__month-text--disabled:hover,\n      .react-datepicker__quarter-text--disabled:hover,\n      .react-datepicker__year-text--disabled:hover {\n        background-color: transparent;\n      }\n\n      .react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,\n      .react-datepicker__quarter-text.react-datepicker__month--selected:hover,\n      .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,\n      .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,\n      .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {\n        background-color: ${"light"===e?"#12784A":"#131620"};\n      }\n      .react-datepicker__month-text:hover,\n      .react-datepicker__quarter-text:hover {\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n      }\n\n      .react-datepicker__input-container {\n        position: relative;\n        display: inline-block;\n        width: 100%;\n      }\n\n      .react-datepicker__year-read-view,\n      .react-datepicker__month-read-view,\n      .react-datepicker__month-year-read-view {\n        border: 1px solid transparent;\n        border-radius: 0.3rem;\n        position: relative;\n      }\n      .react-datepicker__year-read-view:hover,\n      .react-datepicker__month-read-view:hover,\n      .react-datepicker__month-year-read-view:hover {\n        cursor: pointer;\n      }\n      .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n      .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n      .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n      .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n      .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n      .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n        border-top-color: #b3b3b3;\n      }\n      .react-datepicker__year-read-view--down-arrow,\n      .react-datepicker__month-read-view--down-arrow,\n      .react-datepicker__month-year-read-view--down-arrow {\n        transform: rotate(135deg);\n        right: -16px;\n        top: 5px;\n        width: 5px;\n        height: 5px;\n        fill: #111111;\n\n      }\n      .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n        background: ${"light"===e?"#F5F5F5":"inherit"} ;\n\n        border-top-left-radius: 8px;\n        border-top-right-radius: 8px;\n      }\n\n      .react-datepicker__year-dropdown,\n      .react-datepicker__month-dropdown,\n      .react-datepicker__month-year-dropdown {\n        background-color: ${"light"===e?"#f0f0f0":"#131620"};\n        position: absolute;\n        width: 50%;\n        left: 25%;\n        top: 30px;\n        z-index: 1;\n        text-align: center;\n        border-radius: 0.3rem;\n        border: 1px solid #aeaeae;\n      }\n      .react-datepicker__year-dropdown:hover,\n      .react-datepicker__month-dropdown:hover,\n      .react-datepicker__month-year-dropdown:hover {\n        cursor: pointer;\n      }\n      .react-datepicker__year-dropdown--scrollable,\n      .react-datepicker__month-dropdown--scrollable,\n      .react-datepicker__month-year-dropdown--scrollable {\n        height: 150px;\n        overflow-y: scroll;\n      }\n\n      .react-datepicker__year-option,\n      .react-datepicker__month-option,\n      .react-datepicker__month-year-option {\n        line-height: 20px;\n        width: 100%;\n        display: block;\n        margin-left: auto;\n        margin-right: auto;\n      }\n      .react-datepicker__year-option:first-of-type,\n      .react-datepicker__month-option:first-of-type,\n      .react-datepicker__month-year-option:first-of-type {\n        border-top-left-radius: 0.3rem;\n        border-top-right-radius: 0.3rem;\n      }\n      .react-datepicker__year-option:last-of-type,\n      .react-datepicker__month-option:last-of-type,\n      .react-datepicker__month-year-option:last-of-type {\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        border-bottom-left-radius: 0.3rem;\n        border-bottom-right-radius: 0.3rem;\n      }\n      .react-datepicker__year-option:hover,\n      .react-datepicker__month-option:hover,\n      .react-datepicker__month-year-option:hover {\n        background-color: #ccc;\n      }\n      .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n      .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n      .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n        border-bottom-color: #b3b3b3;\n      }\n      .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n      .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n      .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n        border-top-color: #b3b3b3;\n      }\n      .react-datepicker__year-option--selected,\n      .react-datepicker__month-option--selected,\n      .react-datepicker__month-year-option--selected {\n        position: absolute;\n        left: 15px;\n      }\n\n      .react-datepicker__close-icon {\n        cursor: pointer;\n        background-color: transparent;\n        border: 0;\n        outline: 0;\n        padding: 0 6px 0 0;\n        position: absolute;\n        top: 0;\n        right: 0;\n        height: 100%;\n        display: table-cell;\n        vertical-align: middle;\n      }\n      .react-datepicker__close-icon::after {\n        cursor: pointer;\n        background-color: ${"light"===e?"#12784A":"#131620"};\n        color: #fff;\n        border-radius: 50%;\n        height: 16px;\n        width: 16px;\n        padding: 2px;\n        font-size: 12px;\n        line-height: 1;\n        text-align: center;\n        display: table-cell;\n        vertical-align: middle;\n        content: "×";\n      }\n\n      .react-datepicker__today-button {\n        background: #f0f0f0;\n        border-top: 1px solid #aeaeae;\n        cursor: pointer;\n        text-align: center;\n        font-weight: bold;\n        padding: 5px 0;\n        clear: left;\n      }\n\n      .react-datepicker__portal {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        background-color: rgba(0, 0, 0, 0.8);\n        left: 0;\n        top: 0;\n        justify-content: center;\n        align-items: center;\n        display: flex;\n        z-index: 2147483647;\n      }\n      .react-datepicker__portal .react-datepicker__day-name,\n      .react-datepicker__portal .react-datepicker__day,\n      .react-datepicker__portal .react-datepicker__time-name {\n        width: 3rem;\n        line-height: 3rem;\n      }\n      @media (max-width: 400px), (max-height: 550px) {\n        .react-datepicker__portal .react-datepicker__day-name,\n      .react-datepicker__portal .react-datepicker__day,\n      .react-datepicker__portal .react-datepicker__time-name {\n          width: 2rem;\n          line-height: 2rem;\n        }\n      }\n      .react-datepicker__portal .react-datepicker__current-month,\n      .react-datepicker__portal .react-datepicker-time__header {\n        font-size: 1.44rem;\n      }\n\n      /** injected styles **/\n      .react-datepicker__day--outside-month {\n        color: ${"light"===e?"#B9B9C3":"#4D4D4D"};\n      }\n      .react-datepicker__day.react-datepicker__day--in-range {\n        border-radius: 0;\n        background: rgba(18, 120, 74, 0.1);\n        color: #12784A;\n      }\n      .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day--in-range,\n      .react-datepicker__day.react-datepicker__day--range-end.react-datepicker__day--in-range {\n        background: #12784A;\n        color: #fff;\n      }\n      .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day--in-range {\n        border-radius: 100px 0px 0px 100px;\n      }\n      .react-datepicker__day.react-datepicker__day--range-end.react-datepicker__day--in-range {\n        border-radius: 0px 100px 100px 0px;\n      }\n      .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day.react-datepicker__day--range-end {\n        border-radius: 100px;\n        padding: 0;\n      }\n      .react-datepicker__day.react-datepicker__day--outside-month:empty {\n        padding: 0;\n      }\n      .react-datepicker.inline .react-datepicker__header {\n        background-color: inherit;\n      }\n      .react-datepicker__day--keyboard-selected, .react-datepicker__day--keyboard-selected:hover {\n        background-color: inherit;\n        color: inherit;\n      }\n      .react-datepicker__day--today, .react-datepicker__day--today:hover {\n        color: #D82F23;\n      }\n      .react-datepicker__day--today:hover {\n        background: #f0f0f0;\n      }\n      .react-datepicker__day--selected.react-datepicker__day--today {\n        color: white;\n        background: #12784A;\n      }\n    `})},T=({value:e,onChange:r,label:a,rightAddon:o})=>{const[i,c]=n.useState(e||"00:00");return n.useEffect(()=>{r&&r(i)},[i]),n.createElement(t.Flex,{flexDir:"column",alignItems:"center",justifyContent:"center",p:4,pt:0},n.createElement(t.Text,{mb:2},a),n.createElement(t.InputGroup,{alignItems:"center",justifyContent:"center"},n.createElement(t.Input,{onChange:e=>{var t;c((null===(t=e.target)||void 0===t?void 0:t.value)||"00:00")},type:"time",value:i,"data-test-id":"CT_Component_datepicker_input_time"}),o&&n.createElement(t.InputRightAddon,null,o)))};T.displayName="DatepickerTimeInput",T.defaultProps={value:"00:00",onChange:void 0,label:"Pilih Waktu",rightAddon:"WIB"};const z=({id:e,label:r,error:o,isError:i,helperText:c,isRequired:s,withTime:p,value:m,name:u,onClear:g,showMonth:h,shortMonth:_,...b})=>{var x;const k=m?new Date(m):void 0,f=(null!==(x=b.dateFormat)&&void 0!==x?x:p)?"yyyy-MM-dd HH:mm":"yyyy-MM-dd",y=n.createElement(n.Fragment,null,n.createElement(B,null),n.createElement(d,Object.assign({id:e,name:u,selected:k,customInput:n.createElement(t.Input,{autoComplete:"off"}),dateFormat:f,showPopperArrow:!1,calendarClassName:l({inline:b.inline}),showMonthDropdown:h,useShortMonthInDropdown:!!h&&_},p?{timeInputLabel:"",showTimeInput:!0,customTimeInput:n.createElement(T,null)}:{},b)));return b.inline?y:n.createElement(t.FormControl,{isRequired:s,"data-test-id":"CT_Component_datepicker_wrapper"},r&&n.createElement(t.FormLabel,{fontSize:"text.sm"},r),n.createElement(t.InputGroup,null,y,n.createElement(t.InputRightElement,null,!m&&n.createElement(a.FiCalendar,null),m&&n.createElement(a.FiX,{"data-test-id":"bcpJJyCP0z_RIAGZXDU6s",onClick:g,cursor:"pointer"}))),i?n.createElement(t.FormErrorMessage,null,o):n.createElement(t.FormHelperText,null,c))};z.defaultProps={id:void 0,isRequired:void 0,label:void 0,error:void 0,isError:void 0,helperText:void 0,withTime:void 0,onClear:void 0,selectsRange:void 0,shortMonth:!1,showMonth:!1};const j=({onChange:e,min:r,max:a,...o})=>{const[c,l]=n.useState(null);return n.createElement(t.Box,{fontSize:"12px",lineHeight:"18px",css:i.css`
         input[type='date']::-webkit-inner-spin-button,
         input[type='date']::-webkit-calendar-picker-indicator {
           display: none;
@@ -24,23 +24,23 @@
           &::placeholder {
             color: #111111;
           }
-        `,value:null!=c?c:""}))};M.defaultProps={"data-test-id":""};const P={transparent:"transparent",black:{high:"#111111",medium:"#707070",low:"#B8B8B8"},white:{high:"#FFFFFF",medium:"#F1F1F1",low:"#CCCCCC"},neutral:{50:"#FFFFFF",100:"#FAFAFA",200:"#F5F5F5",300:"#EEEEEE",400:"#E0E0E0",500:"#BDBDBD",600:"#999999",700:"#242424",800:"#181818",900:"#111111"},primary:{50:"#DFFFF1",100:"#ACF5D5",200:"#5EE5A9",300:"#05CB72",400:"#08A45E",500:"#12784A",600:"#0B603A",700:"#075331",800:"#064126",900:"#042E1B"},secondary:{50:"#F2F2F3",100:"#DADBDD",200:"#C2C4C7",300:"#AAADB0",400:"#93969A",500:"#7B7F84",600:"#62666A",700:"#4A4C4F",800:"#313335",900:"#19191A"},success:{50:"#ECFFED",100:"#D3FCD5",200:"#A9F9B5",300:"#7CEE98",400:"#58DD86",500:"#28C76F",600:"#1DAB6A",700:"#148F63",800:"#0C7359",900:"#075F51"},danger:{50:"#FFEDEC",100:"#FFC7C2",200:"#FF8279",300:"#FF5B4F",400:"#F44336",500:"#D82F23",600:"#B71C1C",700:"#930B0B",800:"#660909",900:"#3E0707"},warning:{50:"#FFF9EC",100:"#FFEFCC",200:"#FFD591",300:"#FFC069",400:"#FFA230",500:"#F68522",600:"#EF6C00",700:"#C65B03",800:"#9F4901",900:"#652E00"},info:{50:"#EBFFFB",100:"#CBFDF2",200:"#97FCEF",300:"#63F8F0",400:"#3CECF1",500:"#00CFE8",600:"#00A1C7",700:"#007AA7",800:"#005786",900:"#003F6F"},dark:{50:"#F2F2F2",100:"#DBDBDB",200:"#C4C4C4",300:"#ADADAD",400:"#969696",500:"#808080",600:"#666666",700:"#4D4D4D",800:"#333333",900:"#1A1A1A"},mirage:{50:"#EDF0F7",100:"#CED5E9",200:"#AEBADB",300:"#8E9ECC",400:"#6F83BE",500:"#4F68B0",600:"#3F538D",700:"#2F3E6A",800:"#202A46",900:"#101523"},"ebony-clay":{50:"#EFF1F6",100:"#D2D7E5",200:"#B4BDD4",300:"#97A3C4",400:"#7A89B3",500:"#5D6FA2",600:"#4A5982",700:"#384361",800:"#252D41",900:"#131620"},"bright-gray":{50:"#F0F1F4",100:"#D5D9E1",200:"#BAC0CE",300:"#A0A8BB",400:"#858FA8",500:"#6A7795",600:"#555F77",700:"#404759",800:"#2A2F3C",900:"#15181E"},"dove-gray":{50:"#F2F2F2",100:"#DBDBDB",200:"#C4C4C4",300:"#ADADAD",400:"#969696",500:"#808080",600:"#666666",700:"#4D4D4D",800:"#333333",900:"#1A1A1A"}},D={...t.theme.shadows,raised:"0px 4px 20px rgba(0, 0, 0, 0.05)"},B={...t.theme.sizes,4.5:"1.125rem",9.5:"2.375rem",18:"4.5rem",22:"5.5rem",26:"6.5rem",30:"7.5rem"},T={...t.theme.space,4.5:"1.125rem",9.5:"2.375rem",18:"4.5rem",22:"5.5rem",26:"6.5rem",30:"7.5rem"},z={normal:"normal",none:1,shorter:1.25,short:1.375,base:1.5,tall:1.625,64:"4rem",56:"3.5rem",48:"3rem",40:"2.5rem",36:"2.25rem",34:"2.125rem",32:"2rem",30:"1.875rem",28:"1.75",26:"1.625rem",24:"1.5rem",22:"1.375rem",20:"1.25rem",18:"1.125rem",16:"1rem",14:"0.875rem",12:"0.75rem"},A={tighter:"-0.05em",tight:"-0.025em",normal:"0",wide:"0.025em",wider:"0.05em",widest:"0.1em"},O={heading:{1:"2.5rem",2:"2rem",3:"1.75rem",4:"1.5rem",5:"1.375rem",6:"1.125rem"},text:{xl:"1.125rem",lg:"1rem",md:"0.875rem",sm:"0.75rem",xs:"0.625rem"},button:{lg:"1.125rem",md:"0.875rem",sm:"0.625rem"},field:{lg:"1rem",md:"0.875rem",sm:"0.75rem"},table:{header:"0.75rem"}},R={heading:{1:{fontSize:O.heading[1],fontWeight:600,lineHeight:z[64],letterSpacing:A.normal},2:{fontSize:O.heading[2],fontWeight:600,lineHeight:z[56],letterSpacing:A.normal},3:{fontSize:O.heading[3],fontWeight:600,lineHeight:z[48],letterSpacing:A.normal},4:{fontSize:O.heading[4],fontWeight:600,lineHeight:z[40],letterSpacing:A.normal},5:{fontSize:O.heading[5],fontWeight:600,lineHeight:z[36],letterSpacing:A.normal},6:{fontSize:O.heading[6],fontWeight:600,lineHeight:z[32],letterSpacing:A.normal}},text:{xl:{fontSize:O.text.xl,fontWeight:400,lineHeight:z[28],letterSpacing:A.normal},lg:{fontSize:O.text.lg,fontWeight:400,lineHeight:z[24],letterSpacing:A.normal},md:{fontSize:O.text.md,fontWeight:400,lineHeight:z[22],letterSpacing:A.normal},sm:{fontSize:O.text.sm,fontWeight:400,lineHeight:z[18],letterSpacing:A.normal},xs:{fontSize:O.text.xs,fontWeight:400,lineHeight:z[14],letterSpacing:A.normal}},button:{lg:{fontSize:O.button.lg,lineHeight:z[28],letterSpacing:A.normal,fontWeight:400},md:{fontSize:O.button.md,lineHeight:z[22],letterSpacing:A.normal,fontWeight:400},sm:{fontSize:O.button.sm,lineHeight:z[14],letterSpacing:A.normal,fontWeight:400}},field:{lg:{fontSize:O.field.lg,lineHeight:z[24],letterSpacing:A.normal,fontWeight:400},md:{fontSize:O.field.md,lineHeight:z[22],letterSpacing:A.normal,fontWeight:400},sm:{fontSize:O.field.sm,lineHeight:z[18],letterSpacing:A.normal,fontWeight:400}}};var j={__proto__:null,colors:P,radii:{none:0,sm:"2px",md:"4px",lg:"8px",full:"9999px"},shadows:D,sizes:B,space:T,fonts:{heading:"'Poppins', sans-serif",body:"'Poppins', sans-serif"},fontSizes:O,letterSpacings:A,lineHeights:z,textStyles:R};const H=s(t.Box)`
+        `,value:null!=c?c:""}))};j.defaultProps={"data-test-id":""};const R={transparent:"transparent",black:{high:"#111111",medium:"#707070",low:"#B8B8B8"},white:{high:"#FFFFFF",medium:"#F1F1F1",low:"#CCCCCC"},neutral:{50:"#FFFFFF",100:"#FAFAFA",200:"#F5F5F5",300:"#EEEEEE",400:"#E0E0E0",500:"#BDBDBD",600:"#999999",700:"#242424",800:"#181818",900:"#111111"},primary:{50:"#DFFFF1",100:"#ACF5D5",200:"#5EE5A9",300:"#05CB72",400:"#08A45E",500:"#12784A",600:"#0B603A",700:"#075331",800:"#064126",900:"#042E1B"},secondary:{50:"#F2F2F3",100:"#DADBDD",200:"#C2C4C7",300:"#AAADB0",400:"#93969A",500:"#7B7F84",600:"#62666A",700:"#4A4C4F",800:"#313335",900:"#19191A"},success:{50:"#ECFFED",100:"#D3FCD5",200:"#A9F9B5",300:"#7CEE98",400:"#58DD86",500:"#28C76F",600:"#1DAB6A",700:"#148F63",800:"#0C7359",900:"#075F51"},danger:{50:"#FFEDEC",100:"#FFC7C2",200:"#FF8279",300:"#FF5B4F",400:"#F44336",500:"#D82F23",600:"#B71C1C",700:"#930B0B",800:"#660909",900:"#3E0707"},warning:{50:"#FFF9EC",100:"#FFEFCC",200:"#FFD591",300:"#FFC069",400:"#FFA230",500:"#F68522",600:"#EF6C00",700:"#C65B03",800:"#9F4901",900:"#652E00"},info:{50:"#EBFFFB",100:"#CBFDF2",200:"#97FCEF",300:"#63F8F0",400:"#3CECF1",500:"#00CFE8",600:"#00A1C7",700:"#007AA7",800:"#005786",900:"#003F6F"},dark:{50:"#F2F2F2",100:"#DBDBDB",200:"#C4C4C4",300:"#ADADAD",400:"#969696",500:"#808080",600:"#666666",700:"#4D4D4D",800:"#333333",900:"#1A1A1A"},mirage:{50:"#EDF0F7",100:"#CED5E9",200:"#AEBADB",300:"#8E9ECC",400:"#6F83BE",500:"#4F68B0",600:"#3F538D",700:"#2F3E6A",800:"#202A46",900:"#101523"},"ebony-clay":{50:"#EFF1F6",100:"#D2D7E5",200:"#B4BDD4",300:"#97A3C4",400:"#7A89B3",500:"#5D6FA2",600:"#4A5982",700:"#384361",800:"#252D41",900:"#131620"},"bright-gray":{50:"#F0F1F4",100:"#D5D9E1",200:"#BAC0CE",300:"#A0A8BB",400:"#858FA8",500:"#6A7795",600:"#555F77",700:"#404759",800:"#2A2F3C",900:"#15181E"},"dove-gray":{50:"#F2F2F2",100:"#DBDBDB",200:"#C4C4C4",300:"#ADADAD",400:"#969696",500:"#808080",600:"#666666",700:"#4D4D4D",800:"#333333",900:"#1A1A1A"}},A={...t.theme.shadows,raised:"0px 4px 20px rgba(0, 0, 0, 0.05)"},O={...t.theme.sizes,4.5:"1.125rem",9.5:"2.375rem",18:"4.5rem",22:"5.5rem",26:"6.5rem",30:"7.5rem"},H={...t.theme.space,4.5:"1.125rem",9.5:"2.375rem",18:"4.5rem",22:"5.5rem",26:"6.5rem",30:"7.5rem"},I={normal:"normal",none:1,shorter:1.25,short:1.375,base:1.5,tall:1.625,64:"4rem",56:"3.5rem",48:"3rem",40:"2.5rem",36:"2.25rem",34:"2.125rem",32:"2rem",30:"1.875rem",28:"1.75",26:"1.625rem",24:"1.5rem",22:"1.375rem",20:"1.25rem",18:"1.125rem",16:"1rem",14:"0.875rem",12:"0.75rem"},q={tighter:"-0.05em",tight:"-0.025em",normal:"0",wide:"0.025em",wider:"0.05em",widest:"0.1em"},W={heading:{1:"2.5rem",2:"2rem",3:"1.75rem",4:"1.5rem",5:"1.375rem",6:"1.125rem"},text:{xl:"1.125rem",lg:"1rem",md:"0.875rem",sm:"0.75rem",xs:"0.625rem"},button:{lg:"1.125rem",md:"0.875rem",sm:"0.625rem"},field:{lg:"1rem",md:"0.875rem",sm:"0.75rem"},table:{header:"0.75rem"}},V={heading:{1:{fontSize:W.heading[1],fontWeight:600,lineHeight:I[64],letterSpacing:q.normal},2:{fontSize:W.heading[2],fontWeight:600,lineHeight:I[56],letterSpacing:q.normal},3:{fontSize:W.heading[3],fontWeight:600,lineHeight:I[48],letterSpacing:q.normal},4:{fontSize:W.heading[4],fontWeight:600,lineHeight:I[40],letterSpacing:q.normal},5:{fontSize:W.heading[5],fontWeight:600,lineHeight:I[36],letterSpacing:q.normal},6:{fontSize:W.heading[6],fontWeight:600,lineHeight:I[32],letterSpacing:q.normal}},text:{xl:{fontSize:W.text.xl,fontWeight:400,lineHeight:I[28],letterSpacing:q.normal},lg:{fontSize:W.text.lg,fontWeight:400,lineHeight:I[24],letterSpacing:q.normal},md:{fontSize:W.text.md,fontWeight:400,lineHeight:I[22],letterSpacing:q.normal},sm:{fontSize:W.text.sm,fontWeight:400,lineHeight:I[18],letterSpacing:q.normal},xs:{fontSize:W.text.xs,fontWeight:400,lineHeight:I[14],letterSpacing:q.normal}},button:{lg:{fontSize:W.button.lg,lineHeight:I[28],letterSpacing:q.normal,fontWeight:400},md:{fontSize:W.button.md,lineHeight:I[22],letterSpacing:q.normal,fontWeight:400},sm:{fontSize:W.button.sm,lineHeight:I[14],letterSpacing:q.normal,fontWeight:400}},field:{lg:{fontSize:W.field.lg,lineHeight:I[24],letterSpacing:q.normal,fontWeight:400},md:{fontSize:W.field.md,lineHeight:I[22],letterSpacing:q.normal,fontWeight:400},sm:{fontSize:W.field.sm,lineHeight:I[18],letterSpacing:q.normal,fontWeight:400}}};var L={__proto__:null,colors:R,radii:{none:0,sm:"2px",md:"4px",lg:"8px",full:"9999px"},shadows:A,sizes:O,space:H,fonts:{heading:"'Poppins', sans-serif",body:"'Poppins', sans-serif"},fontSizes:W,letterSpacings:q,lineHeights:I,textStyles:V};const $=p(t.Box)`
   display: flex;
   align-items: center;
   width: fit-content;
   border: 1px solid;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
   border-radius: 4px;
-  border-color: ${({isError:e})=>e?""+P.danger[500]:""+P.primary[500]};
-`,I=({onChange:e,isError:r=!1,min:a="2020-01-01",max:o="2020-12-31"})=>{const[i,c]=n.useState([null,null]);return n.createElement(H,{isError:r},n.createElement(M,{"data-test-id":"CT_DatePickerMonth_StartDate",onChange:t=>{e(t,i[1]),c([t,i[1]])},min:a,max:o}),n.createElement(t.Box,null,"-"),n.createElement(M,{"data-test-id":"CT_DatePickerMonth_EndDate",onChange:t=>{e(i[0],t),c([i[0],t])},min:a,max:o}))};I.defaultProps={min:"2020-01-01",max:"2020-12-31",isError:!1};const q=e=>{const{label:r,isError:a,errorMessage:o,leftHelperText:i,rightHelperText:c,isRequired:l,children:d,isSuccess:p,isDisabled:s}=e,m=a?"danger.500":p?"success.500":s?"black.low":"black.medium",u=c&&(!i||a&&!o)?"flex-end":"space-between";return n.createElement(t.FormControl,{isInvalid:a},r&&("string"==typeof r?n.createElement(t.FormLabel,{mb:1,fontSize:"text.sm",requiredIndicator:void 0},l&&n.createElement(t.Box,{as:"span",color:"danger.500",ml:0,mr:1},"*"),r):r),d,(a&&o||i||c)&&n.createElement(t.Box,{display:"flex",width:"full",justifyContent:u},a?"string"==typeof o?n.createElement(t.FormErrorMessage,{fontSize:"text.xs",color:"danger.500",mt:1},o):o:i&&n.createElement(t.FormHelperText,{fontSize:"text.xs",color:m,mt:1},i),c&&n.createElement(t.FormHelperText,{fontSize:"text.xs",color:m,mt:1},c)))};q.defaultProps={label:"",isError:!1,isSuccess:!1,isDisabled:!1,errorMessage:void 0,leftHelperText:void 0,rightHelperText:void 0,isRequired:!1};const W=n.forwardRef((e,r)=>{const{value:a,type:o,addOnLeft:i,addOnRight:c,elementLeft:l,elementRight:d,size:p,isRequired:s,label:m,isError:u,isSuccess:g,isDisabled:_,errorMessage:h,leftHelperText:b,rightHelperText:k,...x}=e;return n.createElement(q,{label:m,isSuccess:g,isDisabled:_,isError:u,errorMessage:h,leftHelperText:b,rightHelperText:k,isRequired:s},n.createElement(t.InputGroup,{size:p},i&&n.createElement(t.InputLeftAddon,null,i),l&&n.createElement(t.InputLeftElement,null,l),n.createElement(t.Input,Object.assign({ref:r,type:o,value:a},x)),c&&n.createElement(t.InputRightAddon,null,c),d&&n.createElement(t.InputRightElement,null,d)))});W.defaultProps={addOnLeft:void 0,addOnRight:void 0,elementLeft:void 0,elementRight:void 0};const V=t.forwardRef((e,r)=>{const a=t.useStyleConfig("LoaderStyle",e);return n.createElement(t.Box,{ref:r,__css:a})}),L=n.forwardRef((e,r)=>{const{value:a,isLoading:o,...i}=e;return n.createElement(q,Object.assign({},i),n.createElement(t.Box,{position:"relative"},n.createElement(t.Textarea,Object.assign({ref:r,value:a},i)),o&&n.createElement(t.Box,{zIndex:999,top:2,right:2,position:"absolute"},n.createElement(V,{size:"sm"}))))});L.defaultProps={isLoading:void 0};const $=()=>n.createElement(t.Image,{height:8,src:t.useColorModeValue("https://assets.voila.id/xms/logo-xms.jpg","https://assets.voila.id/xms/logo-xms-dark.png")}),N=()=>n.createElement(t.Image,{src:"https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",filter:t.useColorModeValue("none","invert(1)"),maxW:24}),U=({data:e,onLogout:n})=>{var o;const{isOpen:i,onToggle:c,onClose:l}=t.useDisclosure();return r.createElement(t.Popover,{placement:"bottom-end",isOpen:i,onClose:l},r.createElement(t.Box,{"data-test-id":"WE0UYbA93LOZy6S09IhDO",as:"button",cursor:"pointer",minW:0,_hover:{textDecor:"none"},m:0,onClick:c},r.createElement(t.HStack,null,r.createElement(t.VStack,{alignItems:"flex-end",spacing:-.5,ml:"2"},r.createElement(t.Text,{fontSize:"text.xs",mb:1,fontWeight:400,lineHeight:"14px",color:t.useColorModeValue("neutral.800","white")},null==e?void 0:e.email),r.createElement(t.Text,{fontSize:"text.xs",fontWeight:400,lineHeight:"14px",color:t.useColorModeValue("primary.500","success.400")},(null==e?void 0:e.office)&&r.createElement(t.Text,{color:"neutral.700",display:"inline-block",mr:.5},e.office," |"," "),null==e?void 0:e.userRole)),r.createElement(t.PopoverTrigger,null,r.createElement(t.Avatar,{size:"sm",bg:"primary.500",color:"white",name:null!==(o=null==e?void 0:e.name)&&void 0!==o?o:null==e?void 0:e.email})))),r.createElement(t.PopoverContent,{bg:t.useColorModeValue("white","mirage.900"),maxW:200},r.createElement(t.PopoverArrow,{bg:t.useColorModeValue("white","mirage.900")}),r.createElement(t.PopoverBody,{p:1},r.createElement(t.Flex,{"data-test-id":"gA7F9pucPX_Q3_dkgXIYZ",alignItems:"center",px:3,py:2,borderRadius:"sm",cursor:"pointer",_hover:{bg:t.useColorModeValue("primary.500","mirage.900"),color:"white"},onClick:n,fontSize:"text.xs"},r.createElement(a.FiPower,null),r.createElement(t.Text,{ml:2},"Logout")))))};U.defaultProps={data:void 0,onLogout:void 0};const G=()=>{const{colorMode:e,toggleColorMode:n}=t.useColorMode();return r.createElement(t.Box,{"data-test-id":"rhYuTDCiWkFqr96upiEEh",mx:5,onClick:n,cursor:"pointer"},r.createElement("light"===e?a.FiMoon:a.FiSun,{size:20}))};function Z(e){switch(e){case"DEVELOPMENT":return"Dev";case"STAGING":return"Staging";default:return null}}const X=({version:e,environment:n,onOpenModalRelease:a})=>r.createElement(r.Fragment,null,e&&r.createElement(t.Badge,{"data-test-id":"dzl3esjhCphobaaIXpiUE",bg:t.useColorModeValue("primary.500","rgba(124, 124, 124, 0.12)"),color:t.useColorModeValue("white","secondary.400"),fontSize:"text.xs",py:1,px:2.5,fontWeight:"bold",textTransform:"lowercase",borderRadius:"md",onClick:a,cursor:a?"pointer":"auto"},e),null!==Z(n)&&e&&r.createElement(t.Box,{background:"primary.50",color:"primary.500",fontSize:"text.xs",py:1,px:2.5,fontWeight:"bold",borderRadius:"md"},Z(n)));X.defaultProps={environment:void 0,version:void 0,onOpenModalRelease:void 0};const Y=({data:e,onLogout:n,onOpenModalRelease:a,hideSwitchMode:o,...i})=>r.createElement(t.Box,Object.assign({minH:14,bg:t.useColorModeValue("white","ebony-clay.800"),boxShadow:"0 4px 20px 0 rgb(0 0 0 / 5%)",px:4,py:1},i),r.createElement(t.Flex,{h:14,alignItems:"center",justifyContent:"space-between"},r.createElement($,null),r.createElement(t.HStack,{spacing:2,alignItems:"center"},r.createElement(N,null),r.createElement(X,{version:null==e?void 0:e.version,environment:null==e?void 0:e.environment,onOpenModalRelease:a})),r.createElement(t.Flex,{alignItems:"center"},!o&&r.createElement(G,null),r.createElement(U,{data:e,onLogout:n}))));Y.defaultProps={data:void 0,onLogout:void 0,onOpenModalRelease:void 0,hideSwitchMode:!1};const K=n.forwardRef(({children:e,...r},a)=>n.createElement(t.ModalBody,Object.assign({ref:a,background:t.useColorModeValue("white","mirage.900")},r),e)),J=r.forwardRef((e,r)=>n.createElement(t.ModalCloseButton,Object.assign({ref:r,top:4,right:4,size:"sm",background:t.useColorModeValue("neutral.50","mirage.900")},e))),Q=r.forwardRef(({children:e,...r},a)=>n.createElement(t.ModalFooter,Object.assign({ref:a,background:t.useColorModeValue("neutral.200","mirage.900"),borderBottomRadius:"md"},r),e)),ee=r.forwardRef(({children:e,...r},a)=>n.createElement(t.ModalHeader,Object.assign({ref:a,background:t.useColorModeValue("neutral.200","mirage.900"),borderTopRadius:"md",fontSize:"lg"},r),e)),te=new Map([["Order",a.FiShoppingBag],["Fulfillment",a.FiShoppingCart],["Transfer Stock",a.FiRepeat],["Stock",a.FiBox],["Product Database",a.FiLayers],["Purchasing",a.FiDollarSign],["Reseller",a.FiUsers],["Retur",a.FiRotateCcw],["Other",a.FiSettings],["Content",a.FiLayout],["Voucher",a.FiGift],["Customer",t.createIcon({displayName:"CustomerIcon",viewBox:"0 0 16 16",path:[n.createElement("path",{fill:"currentColor",fillRule:"inherit",d:"M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM.667 8a7.333 7.333 0 1 1 14.666 0A7.333 7.333 0 0 1 .667 8Z",clipRule:"inherit"}),n.createElement("path",{fill:"currentColor",d:"M12.416 12.698a1.997 1.997 0 0 0-1.75-1.031H5.334a2 2 0 0 0-1.864 1.277 7.722 7.722 0 0 1-.943-1.074 3.329 3.329 0 0 1 2.807-1.537h5.334a3.333 3.333 0 0 1 2.703 1.384c-.275.325-.594.66-.954.98Z"}),n.createElement("path",{fill:"currentColor",fillRule:"inherit",d:"M8 5.333A1.333 1.333 0 1 0 8 8a1.333 1.333 0 0 0 0-2.667ZM5.333 6.667a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Z",clipRule:"inherit"})]})]]),re=({navigations:e,activePath:n,as:a,host:c,...l})=>r.createElement(t.Box,Object.assign({bg:t.useColorModeValue("white","ebony-clay.800"),boxShadow:"0 4px 20px 0 rgb(0 0 0 / 5%)",borderRadius:"md",overflowX:"auto"},l),r.createElement(t.Flex,{alignItems:"center",p:2},r.createElement(t.HStack,{spacing:2},null==e?void 0:e.map(e=>{const l=n.startsWith(e.navLink||""),d=l?"primary.500":void 0;return r.createElement(t.Popover,{key:e.title,trigger:"hover",placement:"bottom-start"},({isOpen:p})=>r.createElement(r.Fragment,null,r.createElement(t.PopoverTrigger,null,r.createElement(t.Box,{display:"flex",alignItems:"center",borderRadius:"md",cursor:"pointer",_hover:{backgroundColor:l?d:t.useColorModeValue("dove-gray.50","transparent")},backgroundColor:p&&!l?t.useColorModeValue("dove-gray.50","transparent"):d,color:l?"white":"inherit",p:2},r.createElement(t.Icon,{as:te.get(e.title),mr:2}),r.createElement(t.Text,{whiteSpace:"nowrap",fontSize:"text.sm",fontWeight:400},e.title),r.createElement(o.ChevronDownIcon,{ml:2}))),e.children&&r.createElement(t.Portal,null,r.createElement(t.Box,{zIndex:"popover"},r.createElement(t.PopoverContent,{key:e.title,bg:t.useColorModeValue("white","ebony-clay.800"),maxW:250,border:"none",borderRadius:"md",boxShadow:"0 5px 25px rgb(0 0 0 / 10%)"},e.children.map(({title:o,navHost:l,navLink:d})=>{const p=n===d;return r.createElement(t.Link,{as:c===l?a:void 0,key:o,href:l?`${l}${d}`:d,_hover:{textDecoration:"none"}},r.createElement(t.Box,{display:"flex",position:"relative",alignItems:"center",cursor:"pointer",transition:"padding 0.35s ease 0s",_hover:{backgroundColor:t.useColorModeValue("dove-gray.50","mirage.900"),color:t.useColorModeValue("primary.500","dove-gray.600"),px:5,py:4,_first:{borderTopRadius:"md"},_last:{borderBottomRadius:"md"}},color:p?"primary.500":"inherit",css:i.css`
+  border-color: ${({isError:e})=>e?""+R.danger[500]:""+R.primary[500]};
+`,N=({onChange:e,isError:r=!1,min:a="2020-01-01",max:o="2020-12-31"})=>{const[i,c]=n.useState([null,null]);return n.createElement($,{isError:r},n.createElement(j,{"data-test-id":"CT_DatePickerMonth_StartDate",onChange:t=>{e(t,i[1]),c([t,i[1]])},min:a,max:o}),n.createElement(t.Box,null,"-"),n.createElement(j,{"data-test-id":"CT_DatePickerMonth_EndDate",onChange:t=>{e(i[0],t),c([i[0],t])},min:a,max:o}))};N.defaultProps={min:"2020-01-01",max:"2020-12-31",isError:!1};const G=({children:e})=>n.createElement(t.Box,{borderLeftRadius:"md",backgroundColor:"neutral.200",px:3,py:2.5},e),U=({children:e})=>n.createElement(t.Box,{borderRightRadius:"md",backgroundColor:"neutral.200",px:3,py:2.5},e),X=n.forwardRef((e,a)=>{const{value:o,type:i,addOnLeft:c,addOnRight:l,size:d,isRequired:s,label:p,isError:u,isSuccess:g,isDisabled:h,errorMessage:_,leftHelperText:b,rightHelperText:x,withClear:k,onClear:f,isLoading:y,...v}=e,w=(e=>{const{outlineColor:r,focusColor:n}=(e=>{const{isError:t,isDisabled:r,isSuccess:n}=e;let a="neutral.400",o="primary.500";return(t||r||n)&&(t?a="danger.500":n&&(a="success.500"),o=a),{outlineColor:a,focusColor:o}})(e);return t.defineStyle({border:"1px solid",borderColor:r,borderRadius:"md",transition:"all 0.15s",boxShadow:"none",_focusWithin:{borderColor:n}})})(e),[E,S]=r.useState(!1),M=r.useMemo(()=>"password"===i&&E?"text":i,[E,i]),P=r.useMemo(()=>"password"===i&&!E&&o?"text.xl":"text.sm",[E,i,o]),D=r.useMemo(()=>h?"black.low":"black.medium",[h]);return n.createElement(F,{label:p,isSuccess:g,isError:u,errorMessage:_,leftHelperText:b,rightHelperText:x,isRequired:s},n.createElement(t.Box,{__css:w},n.createElement(t.InputGroup,{size:d,borderRadius:"md",backgroundColor:h?"neutral.300":"white.high",cursor:h?"not-allowed":"default"},c&&n.createElement(G,null,c),n.createElement(t.Input,Object.assign({ref:a,type:M,value:o,isDisabled:h,isSuccess:g},v,{fontSize:P})),(k||y||"password"===i)&&n.createElement(t.Box,{"data-test-id":"Pg7ttgRey7InxE4qzTjW_",display:"flex",alignItems:"center",justifyContent:"center",width:"16px",mr:"10px"},k&&!y&&n.createElement(t.Box,{display:"flex",justifyContent:"center",onClick:h?void 0:f,cursor:h?"not-allowed":"pointer"},n.createElement(m.Close,{size:4,color:D})),"password"===i&&!E&&!y&&n.createElement(t.Box,{"data-test-id":"q2Bj2G4FlamXyHuRKMZ1Q",onClick:()=>{h||S(!0)},cursor:h?"not-allowed":"pointer",display:"flex",justifyContent:"center"},n.createElement(m.EyeOff,{size:4,color:D})),"password"===i&&E&&!y&&n.createElement(t.Box,{"data-test-id":"sfc2388bmeXBmdla45Ibk",onClick:()=>{h||S(!1)},cursor:h?"not-allowed":"pointer",display:"flex",justifyContent:"center"},n.createElement(m.Eye,{size:4,color:D})),y&&n.createElement(C,{size:"sm"})),"(",l&&n.createElement(U,null,l))))});X.defaultProps={addOnLeft:void 0,addOnRight:void 0,elementLeft:void 0,elementRight:void 0,withClear:void 0,isLoading:void 0,onClear:void 0};const Z=n.forwardRef((e,r)=>{const{value:a,isLoading:o,...i}=e;return n.createElement(F,Object.assign({},i),n.createElement(t.Box,{position:"relative"},n.createElement(t.Textarea,Object.assign({ref:r,value:a},i)),o&&n.createElement(t.Box,{zIndex:999,top:2,right:2,position:"absolute"},n.createElement(C,{size:"sm"}))))});Z.defaultProps={isLoading:void 0};const Y=()=>n.createElement(t.Image,{height:8,src:t.useColorModeValue("https://assets.voila.id/xms/logo-xms.jpg","https://assets.voila.id/xms/logo-xms-dark.png")}),K=()=>n.createElement(t.Image,{src:"https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",filter:t.useColorModeValue("none","invert(1)"),maxW:24}),Q=({data:e,onLogout:n})=>{var o;const{isOpen:i,onToggle:c,onClose:l}=t.useDisclosure();return r.createElement(t.Popover,{placement:"bottom-end",isOpen:i,onClose:l},r.createElement(t.Box,{"data-test-id":"WE0UYbA93LOZy6S09IhDO",as:"button",cursor:"pointer",minW:0,_hover:{textDecor:"none"},m:0,onClick:c},r.createElement(t.HStack,null,r.createElement(t.VStack,{alignItems:"flex-end",spacing:-.5,ml:"2"},r.createElement(t.Text,{fontSize:"text.xs",mb:1,fontWeight:400,lineHeight:"14px",color:t.useColorModeValue("neutral.800","white")},null==e?void 0:e.email),r.createElement(t.Text,{fontSize:"text.xs",fontWeight:400,lineHeight:"14px",color:t.useColorModeValue("primary.500","success.400")},(null==e?void 0:e.office)&&r.createElement(t.Text,{color:"neutral.700",display:"inline-block",mr:.5},e.office," |"," "),null==e?void 0:e.userRole)),r.createElement(t.PopoverTrigger,null,r.createElement(t.Avatar,{size:"sm",bg:"primary.500",color:"white",name:null!==(o=null==e?void 0:e.name)&&void 0!==o?o:null==e?void 0:e.email})))),r.createElement(t.PopoverContent,{bg:t.useColorModeValue("white","mirage.900"),maxW:200},r.createElement(t.PopoverArrow,{bg:t.useColorModeValue("white","mirage.900")}),r.createElement(t.PopoverBody,{p:1},r.createElement(t.Flex,{"data-test-id":"gA7F9pucPX_Q3_dkgXIYZ",alignItems:"center",px:3,py:2,borderRadius:"sm",cursor:"pointer",_hover:{bg:t.useColorModeValue("primary.500","mirage.900"),color:"white"},onClick:n,fontSize:"text.xs"},r.createElement(a.FiPower,null),r.createElement(t.Text,{ml:2},"Logout")))))};Q.defaultProps={data:void 0,onLogout:void 0};const J=()=>{const{colorMode:e,toggleColorMode:n}=t.useColorMode();return r.createElement(t.Box,{"data-test-id":"rhYuTDCiWkFqr96upiEEh",mx:5,onClick:n,cursor:"pointer"},r.createElement("light"===e?a.FiMoon:a.FiSun,{size:20}))};function ee(e){switch(e){case"DEVELOPMENT":return"Dev";case"STAGING":return"Staging";default:return null}}const te=({version:e,environment:n,onOpenModalRelease:a})=>r.createElement(r.Fragment,null,e&&r.createElement(t.Badge,{"data-test-id":"dzl3esjhCphobaaIXpiUE",bg:t.useColorModeValue("primary.500","rgba(124, 124, 124, 0.12)"),color:t.useColorModeValue("white","secondary.400"),fontSize:"text.xs",py:1,px:2.5,fontWeight:"bold",textTransform:"lowercase",borderRadius:"md",onClick:a,cursor:a?"pointer":"auto"},e),null!==ee(n)&&e&&r.createElement(t.Box,{background:"primary.50",color:"primary.500",fontSize:"text.xs",py:1,px:2.5,fontWeight:"bold",borderRadius:"md"},ee(n)));te.defaultProps={environment:void 0,version:void 0,onOpenModalRelease:void 0};const re=({data:e,onLogout:n,onOpenModalRelease:a,hideSwitchMode:o,...i})=>r.createElement(t.Box,Object.assign({minH:14,bg:t.useColorModeValue("white","ebony-clay.800"),boxShadow:"0 4px 20px 0 rgb(0 0 0 / 5%)",px:4,py:1},i),r.createElement(t.Flex,{h:14,alignItems:"center",justifyContent:"space-between"},r.createElement(Y,null),r.createElement(t.HStack,{spacing:2,alignItems:"center"},r.createElement(K,null),r.createElement(te,{version:null==e?void 0:e.version,environment:null==e?void 0:e.environment,onOpenModalRelease:a})),r.createElement(t.Flex,{alignItems:"center"},!o&&r.createElement(J,null),r.createElement(Q,{data:e,onLogout:n}))));re.defaultProps={data:void 0,onLogout:void 0,onOpenModalRelease:void 0,hideSwitchMode:!1};const ne=n.forwardRef(({children:e,...r},a)=>n.createElement(t.ModalBody,Object.assign({ref:a,background:t.useColorModeValue("white","mirage.900")},r),e)),ae=r.forwardRef((e,r)=>n.createElement(t.ModalCloseButton,Object.assign({ref:r,top:4,right:4,size:"sm",background:t.useColorModeValue("neutral.50","mirage.900")},e))),oe=r.forwardRef(({children:e,...r},a)=>n.createElement(t.ModalFooter,Object.assign({ref:a,background:t.useColorModeValue("neutral.200","mirage.900"),borderBottomRadius:"md"},r),e)),ie=r.forwardRef(({children:e,...r},a)=>n.createElement(t.ModalHeader,Object.assign({ref:a,background:t.useColorModeValue("neutral.200","mirage.900"),borderTopRadius:"md",fontSize:"lg"},r),e)),ce=new Map([["Order",a.FiShoppingBag],["Fulfillment",a.FiShoppingCart],["Transfer Stock",a.FiRepeat],["Stock",a.FiBox],["Product Database",a.FiLayers],["Purchasing",a.FiDollarSign],["Reseller",a.FiUsers],["Retur",a.FiRotateCcw],["Other",a.FiSettings],["Content",a.FiLayout],["Voucher",a.FiGift],["Customer",t.createIcon({displayName:"CustomerIcon",viewBox:"0 0 16 16",path:[n.createElement("path",{fill:"currentColor",fillRule:"inherit",d:"M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM.667 8a7.333 7.333 0 1 1 14.666 0A7.333 7.333 0 0 1 .667 8Z",clipRule:"inherit"}),n.createElement("path",{fill:"currentColor",d:"M12.416 12.698a1.997 1.997 0 0 0-1.75-1.031H5.334a2 2 0 0 0-1.864 1.277 7.722 7.722 0 0 1-.943-1.074 3.329 3.329 0 0 1 2.807-1.537h5.334a3.333 3.333 0 0 1 2.703 1.384c-.275.325-.594.66-.954.98Z"}),n.createElement("path",{fill:"currentColor",fillRule:"inherit",d:"M8 5.333A1.333 1.333 0 1 0 8 8a1.333 1.333 0 0 0 0-2.667ZM5.333 6.667a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Z",clipRule:"inherit"})]})]]),le=({navigations:e,activePath:n,as:a,host:c,...l})=>r.createElement(t.Box,Object.assign({bg:t.useColorModeValue("white","ebony-clay.800"),boxShadow:"0 4px 20px 0 rgb(0 0 0 / 5%)",borderRadius:"md",overflowX:"auto"},l),r.createElement(t.Flex,{alignItems:"center",p:2},r.createElement(t.HStack,{spacing:2},null==e?void 0:e.map(e=>{const l=n.startsWith(e.navLink||""),d=l?"primary.500":void 0;return r.createElement(t.Popover,{key:e.title,trigger:"hover",placement:"bottom-start"},({isOpen:s})=>r.createElement(r.Fragment,null,r.createElement(t.PopoverTrigger,null,r.createElement(t.Box,{display:"flex",alignItems:"center",borderRadius:"md",cursor:"pointer",_hover:{backgroundColor:l?d:t.useColorModeValue("dove-gray.50","transparent")},backgroundColor:s&&!l?t.useColorModeValue("dove-gray.50","transparent"):d,color:l?"white":"inherit",p:2},r.createElement(t.Icon,{as:ce.get(e.title),mr:2}),r.createElement(t.Text,{whiteSpace:"nowrap",fontSize:"text.sm",fontWeight:400},e.title),r.createElement(o.ChevronDownIcon,{ml:2}))),e.children&&r.createElement(t.Portal,null,r.createElement(t.Box,{zIndex:"popover"},r.createElement(t.PopoverContent,{key:e.title,bg:t.useColorModeValue("white","ebony-clay.800"),maxW:250,border:"none",borderRadius:"md",boxShadow:"0 5px 25px rgb(0 0 0 / 10%)"},e.children.map(({title:o,navHost:l,navLink:d})=>{const s=n===d;return r.createElement(t.Link,{as:c===l?a:void 0,key:o,href:l?`${l}${d}`:d,_hover:{textDecoration:"none"}},r.createElement(t.Box,{display:"flex",position:"relative",alignItems:"center",cursor:"pointer",transition:"padding 0.35s ease 0s",_hover:{backgroundColor:t.useColorModeValue("dove-gray.50","mirage.900"),color:t.useColorModeValue("primary.500","dove-gray.600"),px:5,py:4,_first:{borderTopRadius:"md"},_last:{borderBottomRadius:"md"}},color:s?"primary.500":"inherit",css:i.css`
                                       border-spacing: 4px;
-                                    `,px:6,py:4},r.createElement(t.Icon,{as:te.get(e.title),mr:3}),r.createElement(t.Text,{fontSize:"text.sm"},o),p&&r.createElement(t.Box,{width:.5,height:8,position:"absolute",bg:"primary.500",right:0,zIndex:"popover"})))}))))))}))));re.defaultProps={navigations:void 0,as:"a",host:void 0};const ne=t.forwardRef(({className:e,style:r,isActive:a,children:o,...i},c)=>{const l=t.useColorModeValue("neutral.300","mirage.900"),d=t.useColorModeValue("black.high","primary.300"),p=t.useColorModeValue("secondary.50","primary.500"),s=t.useColorModeValue("primary.500","white");return n.createElement(t.Button,Object.assign({"data-test-id":"Pagination-Button",ref:c,className:e,style:r,borderRadius:50,fontWeight:700,m:0,px:3,py:2,h:8,minW:"auto",background:a?"primary.500":l,color:a?"white":d,_hover:a?{}:{background:p,color:s},_disabled:{background:t.useColorModeValue("neutral.300","mirage.900"),color:"neutral.600",pointerEvents:"none"}},i),o)});ne.displayName="PaginationButton",ne.defaultProps={isActive:void 0};const ae=({color:e,isDisabled:n,onClick:a,visuallyHidden:o,icon:i})=>r.createElement(ne,{"data-test-id":"DLVCc_fBK35spHm5WxjcJ",color:e,isDisabled:n,onClick:a},r.createElement(t.VisuallyHidden,null,o),i);ae.defaultProps={color:void 0,isDisabled:void 0,onClick:void 0,visuallyHidden:void 0,icon:void 0};const oe=({className:e,current:n,total:a,onSelect:i})=>{const c=t.useColorModeValue("secondary.100","primary.500"),l=t.useColorModeValue("primary.500","secondary.100"),d=1===n,p=d?c:l,s=n===a,m=s?c:l,u=e=>{i&&i(e)};return r.createElement(t.Box,{className:e,display:"inline-flex",alignItems:"center"},r.createElement(t.Box,{mr:1},r.createElement(ae,{"data-test-id":"Pagination-Button",color:p,isDisabled:d,onClick:()=>u(1),visuallyHidden:"First Page",icon:r.createElement(o.ArrowLeftIcon,{width:2})})),r.createElement(t.Box,{backgroundColor:t.useColorModeValue("neutral.300","mirage.900"),borderRadius:50},r.createElement(ae,{"data-test-id":"Pagination-Button",color:p,isDisabled:d,onClick:()=>u(n-1),visuallyHidden:"Previous Page",icon:r.createElement(o.ChevronLeftIcon,null)}),(()=>{const e=[];let t,r;5<a?(t=Math.max(Math.min(n-Math.floor(2.5),a-5+1),1),r=t+5-1):(t=1,r=a);for(let n=t;n<=r;++n)e.push(n);return e})().map(e=>r.createElement(ne,{"data-test-id":"Pagination-Button",key:e,isActive:e===n,onClick:()=>"number"==typeof e?u(e):null},r.createElement(t.Text,{scale:300,fontSize:"text.sm",lineHeight:18,fontWeight:500},e))),r.createElement(ae,{"data-test-id":"Pagination-Button",color:m,isDisabled:s,onClick:()=>u(n+1),visuallyHidden:"Next Page",icon:r.createElement(o.ChevronRightIcon,null)})),r.createElement(t.Box,{ml:1},r.createElement(ae,{"data-test-id":"Pagination-Button",color:m,isDisabled:s,onClick:()=>u(a),visuallyHidden:"Last Page",icon:r.createElement(o.ArrowRightIcon,{width:2})})))};oe.defaultProps={className:void 0,onSelect:void 0},oe.displayName="Pagination";const ie=({limit:e,label:n="Baris per halaman:",items:o,onChange:i,...c})=>{const[l,d]=r.useState(e);return r.createElement(t.Box,{display:"flex",flexDirection:"row",alignItems:"center"},r.createElement(t.Text,Object.assign({fontSize:"text.sm",lineHeight:18,color:t.useColorModeValue("neutral.900","white")},c),n),r.createElement(t.Select,{textAlign:"center",size:"xs",outline:"none",border:"none",boxShadow:"none",width:18,icon:r.createElement(a.FiChevronDown,null),_focusVisible:{boxShadow:"none"},onChange:e=>{const t=Number(e.target.value);i(t),d(t)},value:l},o.map(e=>r.createElement("option",{key:e,value:e},e))))};ie.defaultProps={limit:10,label:void 0};const ce=({children:e,isError:r=!1})=>n.createElement(t.Box,{css:i.css`
+                                    `,px:6,py:4},r.createElement(t.Icon,{as:ce.get(e.title),mr:3}),r.createElement(t.Text,{fontSize:"text.sm"},o),s&&r.createElement(t.Box,{width:.5,height:8,position:"absolute",bg:"primary.500",right:0,zIndex:"popover"})))}))))))}))));le.defaultProps={navigations:void 0,as:"a",host:void 0};const de=t.forwardRef(({className:e,style:r,isActive:a,children:o,...i},c)=>{const l=t.useColorModeValue("neutral.300","mirage.900"),d=t.useColorModeValue("black.high","primary.300"),s=t.useColorModeValue("secondary.50","primary.500"),p=t.useColorModeValue("primary.500","white");return n.createElement(t.Button,Object.assign({"data-test-id":"Pagination-Button",ref:c,className:e,style:r,borderRadius:50,fontWeight:700,m:0,px:3,py:2,h:8,minW:"auto",background:a?"primary.500":l,color:a?"white":d,_hover:a?{}:{background:s,color:p},_disabled:{background:t.useColorModeValue("neutral.300","mirage.900"),color:"neutral.600",pointerEvents:"none"}},i),o)});de.displayName="PaginationButton",de.defaultProps={isActive:void 0};const se=({color:e,isDisabled:n,onClick:a,visuallyHidden:o,icon:i})=>r.createElement(de,{"data-test-id":"DLVCc_fBK35spHm5WxjcJ",color:e,isDisabled:n,onClick:a},r.createElement(t.VisuallyHidden,null,o),i);se.defaultProps={color:void 0,isDisabled:void 0,onClick:void 0,visuallyHidden:void 0,icon:void 0};const pe=({className:e,current:n,total:a,onSelect:i})=>{const c=t.useColorModeValue("secondary.100","primary.500"),l=t.useColorModeValue("primary.500","secondary.100"),d=1===n,s=d?c:l,p=n===a,m=p?c:l,u=e=>{i&&i(e)};return r.createElement(t.Box,{className:e,display:"inline-flex",alignItems:"center"},r.createElement(t.Box,{mr:1},r.createElement(se,{"data-test-id":"Pagination-Button",color:s,isDisabled:d,onClick:()=>u(1),visuallyHidden:"First Page",icon:r.createElement(o.ArrowLeftIcon,{width:2})})),r.createElement(t.Box,{backgroundColor:t.useColorModeValue("neutral.300","mirage.900"),borderRadius:50},r.createElement(se,{"data-test-id":"Pagination-Button",color:s,isDisabled:d,onClick:()=>u(n-1),visuallyHidden:"Previous Page",icon:r.createElement(o.ChevronLeftIcon,null)}),(()=>{const e=[];let t,r;5<a?(t=Math.max(Math.min(n-Math.floor(2.5),a-5+1),1),r=t+5-1):(t=1,r=a);for(let n=t;n<=r;++n)e.push(n);return e})().map(e=>r.createElement(de,{"data-test-id":"Pagination-Button",key:e,isActive:e===n,onClick:()=>"number"==typeof e?u(e):null},r.createElement(t.Text,{scale:300,fontSize:"text.sm",lineHeight:18,fontWeight:500},e))),r.createElement(se,{"data-test-id":"Pagination-Button",color:m,isDisabled:p,onClick:()=>u(n+1),visuallyHidden:"Next Page",icon:r.createElement(o.ChevronRightIcon,null)})),r.createElement(t.Box,{ml:1},r.createElement(se,{"data-test-id":"Pagination-Button",color:m,isDisabled:p,onClick:()=>u(a),visuallyHidden:"Last Page",icon:r.createElement(o.ArrowRightIcon,{width:2})})))};pe.defaultProps={className:void 0,onSelect:void 0},pe.displayName="Pagination";const me=({limit:e,label:n="Baris per halaman:",items:o,onChange:i,...c})=>{const[l,d]=r.useState(e);return r.createElement(t.Box,{display:"flex",flexDirection:"row",alignItems:"center"},r.createElement(t.Text,Object.assign({fontSize:"text.sm",lineHeight:18,color:t.useColorModeValue("neutral.900","white")},c),n),r.createElement(t.Select,{textAlign:"center",size:"xs",outline:"none",border:"none",boxShadow:"none",width:18,icon:r.createElement(a.FiChevronDown,null),_focusVisible:{boxShadow:"none"},onChange:e=>{const t=Number(e.target.value);i(t),d(t)},value:l},o.map(e=>r.createElement("option",{key:e,value:e},e))))};function ue({isError:e=!1,helpText:r="",errorText:a="",children:o,isDisabled:i,...c}){return n.createElement(t.Box,null,n.createElement(t.Box,{display:"flex"},n.createElement(t.Radio,Object.assign({variant:e?"errors":"unstyled"},c,{isDisabled:i}),o&&n.createElement(t.Text,{textStyle:"text.sm",color:i?"black.low":"black.high"},o))),n.createElement(t.Box,{mt:"5px",ml:"24px"},e?n.createElement(t.Text,{textStyle:"text.xs",color:"danger.500"},a):n.createElement(t.Text,{textStyle:"text.xs",color:"black.medium"},r)))}function ge(e){const{children:r,label:a,helpText:o,isError:i,errorMessage:c,...l}=e;return n.createElement(F,Object.assign({},l,{label:a,leftHelperText:o,isError:i,errorMessage:c}),n.createElement(t.Box,{mt:"12px"},n.createElement(t.RadioGroup,Object.assign({},l),n.createElement(t.Stack,{spacing:[1,"16px"],direction:["column","row"]},r))))}me.defaultProps={limit:10,label:void 0},ue.defaultProps={isError:!1,helpText:"",errorText:""},ge.defaultProps={helpText:"",isError:!1,errorMessage:""};const he=({children:e,isError:r=!1})=>n.createElement(t.Box,{css:i.css`
         .react-select__control {
-          border-color: ${r?P.danger[500]:P.neutral[500]} !important;
+          border-color: ${r?R.danger[500]:R.neutral[500]} !important;
         }
 
         .react-select__control:hover {
-          border-color: ${r?P.danger[500]:P.primary[500]} !important;
+          border-color: ${r?R.danger[500]:R.primary[500]} !important;
         }
-      `},e);ce.defaultProps={isError:!1};const le=R.text.sm,de={fontSize:le.fontSize,lineHeight:le.lineHeight,letterSpacing:0};function pe(e,t){return{control:(t,r)=>"dark"===e?{...t,...de,background:"transparent",color:P.primary[300],borderColor:P.secondary[500],boxShadow:r.isFocused?"none":"inherit"}:{...t,...de,boxShadow:r.isFocused?"none":P.neutral[500]},option:(t,{isSelected:r})=>"dark"===e?{...t,...de,background:r?P.primary[700]:P.dark[800],color:"white"}:{...t,...de},menu:t=>"dark"===e?{...t,...de,background:P.dark[800],zIndex:5}:{...t,...de,zIndex:5},singleValue:t=>"dark"===e?{...t,...de,color:"white"}:{...t,...de},input:t=>"dark"===e?{...t,...de,color:"white"}:{...t,...de},dropdownIndicator:t=>"dark"===e?{...t,...de,color:P.secondary[500]}:{...t,...de},indicatorSeparator:t=>"dark"===e?{...t,...de,backgroundColor:P.secondary[500]}:{...t,...de}}}const se=e=>({...e,colors:{...e.colors,primary:P.primary[500],primary25:P.primary[50],primary50:P.primary[100],primary75:P.primary[200]}}),me=t.forwardRef((e,n)=>{var a,o;const i=t.useTab({...e,ref:n}),c=!!i["aria-selected"],l=t.useMultiStyleConfig("Tabs",i);return r.createElement(t.Button,Object.assign({p:3,fontSize:"text.md",_selected:{borderColor:t.useColorModeValue("primary.400","primary.300"),color:t.useColorModeValue("primary.500","primary.300"),transform:"translateY(-2px)"},color:t.useColorModeValue("black.high","primary.300"),_focus:{bg:"none"},__css:l.tab},i),r.createElement(t.Flex,null,null===(a=e.leftAddon)||void 0===a?void 0:a.call(e,{isSelected:c}),i.children,null===(o=e.rightAddon)||void 0===o?void 0:o.call(e,{isSelected:c})))}),ue=t.forwardRef((e,r)=>n.createElement(t.TabList,{borderBottom:"1px solid",borderColor:t.useColorModeValue("gray.200","bright-gray.800"),ref:r},e.children)),ge=t.forwardRef((e,r)=>n.createElement(t.TabPanel,{px:0,ref:r},e.children)),_e=({onHandleUploadFile:e,onHandleRejections:n,accept:a,multiple:o,selected:i,maxFiles:c=1,renderError:l,validator:d,...p})=>{const[s,m]=r.useState(),[u,g]=r.useState(i||!1),_=r.useCallback(t=>{t.length>0&&(null==e||e(t),o||(g(!0),m(t[0])))},[o,e]),{getRootProps:b,getInputProps:k,isDragActive:x,fileRejections:f}=h.useDropzone({onDrop:_,accept:a,maxFiles:c,multiple:o,validator:d});r.useEffect(()=>{f.length>0&&n&&n(f)},[f,n]);const y=r.useMemo(()=>{const e=f.length>0;return e&&g(!1),e},[f]);return r.useEffect(()=>{g(null!=i&&i)},[i]),r.createElement(t.Stack,{direction:"column"},r.createElement(t.Flex,Object.assign({minH:200,border:"1px dashed",borderColor:y?"danger.500":"primary.500",alignItems:"center",justifyContent:"center",cursor:"pointer"},p,b()),r.createElement("input",Object.assign({},k())),x?r.createElement(t.Text,null,"Drop file disini..."):r.createElement(t.Flex,{flexDirection:"column",alignItems:"center",color:y?"danger.500":"primary.500"},!o&&u&&r.createElement(t.Heading,{fontWeight:400,fontSize:"18px",lineHeight:28,color:"black.high",mb:2},null==s?void 0:s.name),!u&&r.createElement(t.Heading,{fontWeight:400,fontSize:"18px",lineHeight:28,mb:2},"Upload File"),r.createElement(t.Text,null,u?"(Klik atau drag untuk mengganti file)":"(Klik atau drag untuk input file)"))),null==l?void 0:l(f))};_e.defaultProps={onHandleUploadFile:void 0,onHandleRejections:void 0,renderError:void 0,selected:!1};const he={baseStyle:{fontSize:"body.1",fontWeight:"normal",lineHeight:"1.25",minW:24,px:4,py:2,borderRadius:"md",_disabled:{opacity:.3},_hover:{_disabled:{opacity:.3}},_active:{_disabled:{opacity:.3}},_loading:{opacity:.7}},sizes:{lg:{fontSize:"button.lg",h:12},md:{fontSize:"button.md",h:9},sm:{fontSize:"button.sm",h:6}},variants:{solid:{color:"white",bg:"primary.500",_disabled:{bg:"primary.700"},_hover:{bg:"primary.600"},_active:{bg:"primary.700"},_focus:{bg:"primary.700"}},outline:e=>({color:"primary.500",borderWidth:1,borderStyle:"inside",bg:b.mode("white","transparent")(e),borderColor:b.mode("primary.500","primary.500")(e),_hover:{bg:"primary.50"},_active:{bg:"primary.100"},_focus:{bg:"primary.100"}}),"outline-danger":{color:"danger.500",bg:"white",borderStyle:"inside",borderWidth:1,borderColor:"danger.500"},ghost:{color:"primary.500",_disabled:{bg:"primary.100"}},link:{bg:"transparent",color:"primary.500"}},defaultProps:{size:"md",variant:"solid",orientation:"vertical",colorScheme:"primary"}},{definePartsStyle:be,defineMultiStyleConfig:ke}=t.createMultiStyleConfigHelpers(k.checkboxAnatomy.keys),xe=ke({baseStyle:be({control:{borderRadius:"4px",width:"16px",height:"16px",border:"1px solid"},icon:{color:"neutral.50",width:"9px"},label:{fontWeight:"400",lineHeight:"18px",color:"black.high",ml:"8px"},_disabled:{background:"neutral.500",border:"1px solid",borderColor:"neutral.500",cursor:"not-allowed"}}),variants:{errors:be({control:{borderColor:"danger.500",_checked:{borderColor:"danger.500",backgroundColor:"danger.500",_hover:{borderColor:"danger.600",backgroundColor:"danger.600"}},_indeterminate:{borderColor:"danger.500",backgroundColor:"danger.500"}},label:{fontSize:"12px"}}),unstyled:be({control:{borderColor:"neutral.500",_checked:{borderColor:"primary.500",backgroundColor:"primary.500",_hover:{borderColor:"primary.600",backgroundColor:"primary.600"},_disabled:{backgroundColor:"neutral.500",borderColor:"neutral.500"}},_disabled:{backgroundColor:"neutral.500"},_indeterminate:{borderColor:"primary.500",backgroundColor:"primary.500"}},label:{fontSize:"12px"}})},defaultProps:{variant:"errors"}}),fe=x.defineStyleConfig({baseStyle:x.defineStyle({fontSize:"field.sm",marginEnd:1,mb:1})}),{definePartsStyle:ye,defineMultiStyleConfig:ve}=x.createMultiStyleConfigHelpers(k.inputAnatomy.keys),we=ye({field:{width:"100%",minWidth:0,outline:0,px:2.5,py:2,position:"relative",appearance:"none",transitionProperty:"common",transitionDuration:"normal",color:"black.high",_disabled:{bg:"neutral.300",border:"1px solid",borderColor:"neutral.400",cursor:"not-allowed"},_placeholder:{color:"black.low"}}}),Ce={lg:x.defineStyle({fontSize:"field.lg",h:12,borderRadius:"md"}),md:x.defineStyle({fontSize:"field.md",h:10,borderRadius:"md"}),sm:x.defineStyle({fontSize:"field.sm",h:9.5,borderRadius:"md"})},Ee=ve({baseStyle:we,sizes:{lg:ye({field:Ce.lg,addon:Ce.lg}),md:ye({field:Ce.md,addon:Ce.md}),sm:ye({field:Ce.sm,addon:Ce.sm})},variants:{outline:ye(e=>{const{theme:t}=e,{focusBorderColor:r,errorBorderColor:n,readOnlyBorderColor:a}=function(e){const{focusBorderColor:t,errorBorderColor:r,readOnlyBorderColor:n}=e;return{focusBorderColor:t||b.mode("primary.500","primary.300")(e),errorBorderColor:r||b.mode("danger.500","danger.300")(e),readOnlyBorderColor:n||b.mode(".500","danger.300")(e)}}(e);return{field:{border:"1px solid",borderColor:b.mode("dark.200","inherit")(e),bg:b.mode("white","inherit")(e),color:b.mode("inherit","white")(e),_hover:{borderColor:b.mode("gray.300","whiteAlpha.400")(e)},_readOnly:{userSelect:"all",borderColor:b.getColor(t,a),boxShadow:"0 0 0 0 "+b.getColor(t,a)},_invalid:{borderColor:b.getColor(t,n),boxShadow:"0 0 0 0 "+b.getColor(t,n)},_focusVisible:{zIndex:1,borderColor:b.getColor(t,r),boxShadow:"0 0 0 0 "+b.getColor(t,r)}},addon:{border:"1px solid",borderColor:b.mode("inherit","whiteAlpha.50")(e),bg:b.mode("gray.100","whiteAlpha.300")(e)}}}),unstyled:ye({field:{bg:"transparent",px:"0",height:"auto"},addon:{bg:"transparent",px:"0",height:"auto"}})},defaultProps:{size:"sm",variant:"outline"}}),Se=i.keyframes({"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}),Fe=x.defineStyleConfig({baseStyle:e=>{const t="white"===e.color?"white":P.primary[600];return{borderRadius:"50%",display:"flex",justifyContent:"center",alignItems:"center",animation:Se+" 1s linear infinite",background:`conic-gradient(from 180deg at 50% 50%, ${t} 0deg, rgba(217, 217, 217, 0) 360deg);`,":before":{content:"''",display:"block",borderRadius:"50%",width:"6px",height:"6px",position:"absolute",bottom:0,background:t}}},sizes:{xs:{width:"12px",height:"12px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 1.4px),#000 0);",":before":{width:"1.4px",height:"1.4px"}},sm:{width:"16px",height:"16px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 1.87px),#000 0);",":before":{width:"1.87px",height:"1.87px"}},md:{width:"24px",height:"24px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 2.8px),#000 0);",":before":{width:"2.8px",height:"2.8px"}},lg:{width:"50px",height:"50px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 5.83px),#000 0);",":before":{width:"5.83px",height:"5.83px"}},xl:{width:"75px",height:"75px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 8.75px),#000 0);",":before":{width:"8.75px",height:"8.75px"}},xxl:{width:"100px",height:"100px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 11.67px),#000 0);",":before":{width:"11.67px",height:"11.67px"}}},defaultProps:{size:"lg"}}),{definePartsStyle:Me}=x.createMultiStyleConfigHelpers(k.popoverAnatomy.keys),Pe={baseStyle:e=>Me({popper:{background:b.mode("white","inherit")(e)}})},{definePartsStyle:De}=x.createMultiStyleConfigHelpers(k.radioAnatomy.keys),Be={baseStyle:De({control:{_checked:{borderColor:"primary.500",bg:"white",_before:{h:"72%",w:"72%",bg:"primary.500"},_hover:{borderColor:"primary.500",bg:"gray.200"}}}}),sizes:{sm:De({control:{w:"3",h:"3"},label:{fontSize:"text.sm"}}),md:De({control:{w:"4",h:"4"},label:{fontSize:"text.md"}}),lg:De({control:{w:"5",h:"5"},label:{fontSize:"text.lg"}})},variants:{},defaultProps:{size:"sm",variant:"solid",orientation:"vertical",colorScheme:"primary"}},{definePartsStyle:Te,defineMultiStyleConfig:ze}=t.createMultiStyleConfigHelpers(k.switchAnatomy.keys),Ae=t.extendTheme({...j,components:{__proto__:null,Button:he,Checkbox:xe,FormLabel:fe,Input:Ee,LoaderStyle:Fe,Popover:Pe,Radio:Be,Switch:ze({baseStyle:Te({container:{},thumb:{bg:"white"},track:{bg:"neutral.400",p:1,_checked:{bg:"primary.500"}}})}),Textarea:t.defineStyleConfig({variants:{outline:t.defineStyle(e=>{const{focusBorderColor:t,borderColor:r}=(e=>{const{isError:t,isSuccess:r,isDisabled:n}=e;let a="neutral.400",o="primary.500";return t?(a="danger.500",o="danger.500"):r?(a="success.500",o="success.500"):!n||t||r||(a="neutral.400",o="danger.500"),{focusBorderColor:o,borderColor:a}})(e);return{background:"white.high",color:"black.high",borderColor:r,fontSize:"text.sm",padding:2,borderRadius:"md",borderWidth:"1px",outline:"none",_disabled:{opacity:1,color:"black.low",background:"neutral.300"},_placeholder:{color:"black.low"},_hover:{borderColor:r},_focus:{outline:"none",borderColor:t,boxShadow:"none"},_focusVisible:{outline:"none",borderColor:t,boxShadow:"none"},_focusWithin:{outline:"none",borderColor:t,boxShadow:"none"},_invalid:{outline:"none",borderColor:"danger.500",boxShadow:"none"}}})},defaultProps:{variant:"outline"}})},styles:{global:{"*::-webkit-scrollbar-thumb":{background:"neutral.400"},body:{fontSize:"text.sm",color:"black.high"}}},config:{initialColorMode:"light",useSystemColorMode:!1}}),Oe=r.createContext({instance:void 0}),Re=({children:e,config:t,requestInterceptors:a,responseInterceptors:o})=>{const i=r.useRef(f.create(t));r.useEffect(()=>{null==a||a.forEach(e=>{i.current.interceptors.request.use(e)}),null==o||o.forEach(e=>{i.current.interceptors.response.use(e)})},[a,o]);const c=r.useMemo(()=>({instance:i.current}),[]);return n.createElement(Oe.Provider,{value:c},e)};Re.displayName="Provider",Object.defineProperty(exports,"AlertDialog",{enumerable:!0,get:function(){return t.AlertDialog}}),Object.defineProperty(exports,"AlertDialogBody",{enumerable:!0,get:function(){return t.ModalBody}}),Object.defineProperty(exports,"AlertDialogCloseButton",{enumerable:!0,get:function(){return t.ModalCloseButton}}),Object.defineProperty(exports,"AlertDialogContent",{enumerable:!0,get:function(){return t.AlertDialogContent}}),Object.defineProperty(exports,"AlertDialogFooter",{enumerable:!0,get:function(){return t.ModalFooter}}),Object.defineProperty(exports,"AlertDialogHeader",{enumerable:!0,get:function(){return t.ModalHeader}}),Object.defineProperty(exports,"AlertDialogOverlay",{enumerable:!0,get:function(){return t.ModalOverlay}}),Object.defineProperty(exports,"Drawer",{enumerable:!0,get:function(){return t.Drawer}}),Object.defineProperty(exports,"DrawerBody",{enumerable:!0,get:function(){return t.ModalBody}}),Object.defineProperty(exports,"DrawerCloseButton",{enumerable:!0,get:function(){return t.ModalCloseButton}}),Object.defineProperty(exports,"DrawerContent",{enumerable:!0,get:function(){return t.DrawerContent}}),Object.defineProperty(exports,"DrawerFooter",{enumerable:!0,get:function(){return t.ModalFooter}}),Object.defineProperty(exports,"DrawerHeader",{enumerable:!0,get:function(){return t.ModalHeader}}),Object.defineProperty(exports,"DrawerOverlay",{enumerable:!0,get:function(){return t.ModalOverlay}}),Object.defineProperty(exports,"Modal",{enumerable:!0,get:function(){return t.Modal}}),Object.defineProperty(exports,"ModalContent",{enumerable:!0,get:function(){return t.ModalContent}}),Object.defineProperty(exports,"ModalContextProvider",{enumerable:!0,get:function(){return t.ModalContextProvider}}),Object.defineProperty(exports,"ModalFocusScope",{enumerable:!0,get:function(){return t.ModalFocusScope}}),Object.defineProperty(exports,"ModalOverlay",{enumerable:!0,get:function(){return t.ModalOverlay}}),Object.defineProperty(exports,"TabIndicator",{enumerable:!0,get:function(){return t.TabIndicator}}),Object.defineProperty(exports,"TabPanels",{enumerable:!0,get:function(){return t.TabPanels}}),Object.defineProperty(exports,"Tabs",{enumerable:!0,get:function(){return t.Tabs}}),Object.defineProperty(exports,"TabsDescendantsProvider",{enumerable:!0,get:function(){return t.TabsDescendantsProvider}}),Object.defineProperty(exports,"TabsProvider",{enumerable:!0,get:function(){return t.TabsProvider}}),Object.defineProperty(exports,"useDrawerContext",{enumerable:!0,get:function(){return t.useDrawerContext}}),Object.defineProperty(exports,"useModal",{enumerable:!0,get:function(){return t.useModal}}),Object.defineProperty(exports,"useModalContext",{enumerable:!0,get:function(){return t.useModalContext}}),Object.defineProperty(exports,"useModalStyles",{enumerable:!0,get:function(){return t.useModalStyles}}),Object.defineProperty(exports,"useTab",{enumerable:!0,get:function(){return t.useTab}}),Object.defineProperty(exports,"useTabIndicator",{enumerable:!0,get:function(){return t.useTabIndicator}}),Object.defineProperty(exports,"useTabList",{enumerable:!0,get:function(){return t.useTabList}}),Object.defineProperty(exports,"useTabPanel",{enumerable:!0,get:function(){return t.useTabPanel}}),Object.defineProperty(exports,"useTabPanels",{enumerable:!0,get:function(){return t.useTabPanels}}),Object.defineProperty(exports,"useTabs",{enumerable:!0,get:function(){return t.useTabs}}),Object.defineProperty(exports,"useTabsContext",{enumerable:!0,get:function(){return t.useTabsContext}}),Object.defineProperty(exports,"useTabsDescendant",{enumerable:!0,get:function(){return t.useTabsDescendant}}),Object.defineProperty(exports,"useTabsDescendants",{enumerable:!0,get:function(){return t.useTabsDescendants}}),Object.defineProperty(exports,"useTabsDescendantsContext",{enumerable:!0,get:function(){return t.useTabsDescendantsContext}}),Object.defineProperty(exports,"useTabsStyles",{enumerable:!0,get:function(){return t.useTabsStyles}}),exports.BreadCrumb=y,exports.Checkbox=v,exports.DataTable=C,exports.DatePickerMonth=M,exports.Datepicker=F,exports.Field=q,exports.Header=Y,exports.InputField=W,exports.Loader=V,exports.MainMenu=re,exports.ModalBody=K,exports.ModalCloseButton=J,exports.ModalFooter=Q,exports.ModalHeader=ee,exports.MultiDatePickerMonth=I,exports.Pagination=oe,exports.PaginationDetail=({page:e,limit:n,length:a,scale:o=300,fontSize:i="xs",lineHeight:c=18,...l})=>r.createElement(t.Text,Object.assign({scale:o,fontSize:i,lineHeight:c},l),`${(e-1)*n+1}-${n*e<a?n*e:a} dari ${a} item`),exports.PaginationFilter=ie,exports.Provider=Re,exports.ProviderContext=Oe,exports.Select=function({isError:e=!1,...t}){const{colorMode:r}=p.useColorMode();return n.createElement(ce,{isError:e},n.createElement(m,Object.assign({classNamePrefix:"react-select"},t,{styles:{...pe(r)},theme:se})))},exports.SelectAsync=function({styles:e,isError:t=!1,...r}){const{colorMode:a}=p.useColorMode();return n.createElement(ce,{isError:t},n.createElement(u.AsyncPaginate,Object.assign({classNamePrefix:"react-select"},r,{styles:{...pe(a),...e},theme:se})))},exports.SelectAsyncCreatable=function({styles:e,isError:t=!1,...r}){const{colorMode:a}=p.useColorMode();return n.createElement(ce,{isError:t},n.createElement(g,Object.assign({classNamePrefix:"react-select"},r,{styles:{...pe(a),...e},theme:se})))},exports.SelectCreatable=function({styles:e,isError:t=!1,...r}){const{colorMode:a}=p.useColorMode();return n.createElement(ce,{isError:t},n.createElement(_,Object.assign({classNamePrefix:"react-select"},r,{styles:{...pe(a),...e},theme:se})))},exports.Tab=me,exports.TabList=ue,exports.TabPanel=ge,exports.TextareaField=L,exports.Uploader=_e,exports.theme=Ae,exports.useInternalUI=()=>{const{instance:e}=r.useContext(Oe);return{instance:e}};
+      `},e);he.defaultProps={isError:!1};const _e=V.text.sm,be={fontSize:_e.fontSize,lineHeight:_e.lineHeight,letterSpacing:0};function xe(e,t){return{control:(t,r)=>"dark"===e?{...t,...be,background:"transparent",color:R.primary[300],borderColor:R.secondary[500],boxShadow:r.isFocused?"none":"inherit"}:{...t,...be,boxShadow:r.isFocused?"none":R.neutral[500]},option:(t,{isSelected:r})=>"dark"===e?{...t,...be,background:r?R.primary[700]:R.dark[800],color:"white"}:{...t,...be},menu:t=>"dark"===e?{...t,...be,background:R.dark[800],zIndex:5}:{...t,...be,zIndex:5},singleValue:t=>"dark"===e?{...t,...be,color:"white"}:{...t,...be},input:t=>"dark"===e?{...t,...be,color:"white"}:{...t,...be},dropdownIndicator:t=>"dark"===e?{...t,...be,color:R.secondary[500]}:{...t,...be},indicatorSeparator:t=>"dark"===e?{...t,...be,backgroundColor:R.secondary[500]}:{...t,...be}}}const ke=e=>({...e,colors:{...e.colors,primary:R.primary[500],primary25:R.primary[50],primary50:R.primary[100],primary75:R.primary[200]}}),fe=t.forwardRef((function(e,a){const o=t.useMultiStyleConfig("Switch",e),{size:i="md"}=e,{spacing:c="0.5rem",children:l,...d}=t.omitThemingProps(e),{state:s,getInputProps:p,getCheckboxProps:u,getRootProps:g,getLabelProps:h}=t.useCheckbox(d),_=r.useMemo(()=>({display:"inline-block",position:"relative",verticalAlign:"middle",lineHeight:0,...o.container}),[o.container]),x=r.useMemo(()=>({display:"inline-flex",flexShrink:0,justifyContent:"flex-start",boxSizing:"content-box",cursor:"pointer",width:200,...o.track}),[o.track]),k=r.useMemo(()=>({userSelect:"none",marginStart:c,...o.label}),[c,o.label]),f=e=>({sm:3,md:4,lg:5}[e]);return n.createElement(t.chakra.label,Object.assign({},g(),{display:"flex",alignItems:"center",className:b.cx("chakra-switch",e.className),__css:_}),n.createElement("input",Object.assign({"data-test-id":"",className:"chakra-switch__input"},p({},a))),n.createElement(t.chakra.span,Object.assign({},u(),{className:"chakra-switch__track",pos:"relative",__css:x}),n.createElement(t.Flex,{gap:2,pos:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},n.createElement(m.Check,{color:"white",size:f(i)}),n.createElement(m.Close,{color:s.isDisabled?"neutral.600":"neutral.900",size:f(i)})),n.createElement(t.chakra.span,{__css:o.thumb,className:"chakra-switch__thumb","data-checked":b.dataAttr(s.isChecked),"data-hover":b.dataAttr(s.isHovered)})),l&&n.createElement(t.chakra.span,Object.assign({className:"chakra-switch__label",color:s.isDisabled?"black.low":"black.high"},h(),{__css:k}),l))})),ye=t.forwardRef((e,n)=>{var a,o;const i=t.useTab({...e,ref:n}),c=!!i["aria-selected"],l=t.useMultiStyleConfig("Tabs",i);return r.createElement(t.Button,Object.assign({p:3,fontSize:"text.md",_selected:{borderColor:t.useColorModeValue("primary.400","primary.300"),color:t.useColorModeValue("primary.500","primary.300"),transform:"translateY(-2px)"},color:t.useColorModeValue("black.high","primary.300"),_focus:{bg:"none"},__css:l.tab},i),r.createElement(t.Flex,null,null===(a=e.leftAddon)||void 0===a?void 0:a.call(e,{isSelected:c}),i.children,null===(o=e.rightAddon)||void 0===o?void 0:o.call(e,{isSelected:c})))}),ve=t.forwardRef((e,r)=>n.createElement(t.TabList,{borderBottom:"1px solid",borderColor:t.useColorModeValue("gray.200","bright-gray.800"),ref:r},e.children)),we=t.forwardRef((e,r)=>n.createElement(t.TabPanel,{px:0,ref:r},e.children)),Ce=({onHandleUploadFile:e,onHandleRejections:n,accept:a,multiple:o,selected:i,maxFiles:c=1,renderError:l,validator:d,...s})=>{const[p,m]=r.useState(),[u,g]=r.useState(i||!1),h=r.useCallback(t=>{t.length>0&&(null==e||e(t),o||(g(!0),m(t[0])))},[o,e]),{getRootProps:_,getInputProps:b,isDragActive:k,fileRejections:f}=x.useDropzone({onDrop:h,accept:a,maxFiles:c,multiple:o,validator:d});r.useEffect(()=>{f.length>0&&n&&n(f)},[f,n]);const y=r.useMemo(()=>{const e=f.length>0;return e&&g(!1),e},[f]);return r.useEffect(()=>{g(null!=i&&i)},[i]),r.createElement(t.Stack,{direction:"column"},r.createElement(t.Flex,Object.assign({minH:200,border:"1px dashed",borderColor:y?"danger.500":"primary.500",alignItems:"center",justifyContent:"center",cursor:"pointer"},s,_()),r.createElement("input",Object.assign({},b())),k?r.createElement(t.Text,null,"Drop file disini..."):r.createElement(t.Flex,{flexDirection:"column",alignItems:"center",color:y?"danger.500":"primary.500"},!o&&u&&r.createElement(t.Heading,{fontWeight:400,fontSize:"18px",lineHeight:28,color:"black.high",mb:2},null==p?void 0:p.name),!u&&r.createElement(t.Heading,{fontWeight:400,fontSize:"18px",lineHeight:28,mb:2},"Upload File"),r.createElement(t.Text,null,u?"(Klik atau drag untuk mengganti file)":"(Klik atau drag untuk input file)"))),null==l?void 0:l(f))};Ce.defaultProps={onHandleUploadFile:void 0,onHandleRejections:void 0,renderError:void 0,selected:!1};const{definePartsStyle:Ee,defineMultiStyleConfig:Se}=f.createMultiStyleConfigHelpers(k.alertAnatomy.keys),Fe=f.cssVar("alert-fg"),Me=f.cssVar("alert-bg"),Pe=Se({baseStyle:Ee({container:{bg:Me.reference,px:"4",py:"2",borderRadius:"md"},title:{fontWeight:"400",lineHeight:"18px",marginEnd:"2"},description:{lineHeight:"6"},icon:{color:Fe.reference,flexShrink:0,marginEnd:"3",w:"4",h:"4"},action:{"& +.chakra-alert__close":{ml:"3"}},close:{color:Fe.reference,w:"4",h:"4"},spinner:{color:Fe.reference,flexShrink:0,marginEnd:"3",w:"5",h:"5"}}),variants:{subtle:Ee(e=>{const{colorScheme:t}=e,r=function(e){const{theme:t,colorScheme:r}=e;return{light:`colors.${r}.50`,dark:y.transparentize(r+".200",.16)(t)}}(e);return{container:{[Fe.variable]:`colors.${t}.700`,[Me.variable]:r.light,_dark:{[Fe.variable]:`colors.${t}.200`,[Me.variable]:r.dark},color:Fe.reference}}}),solid:Ee(e=>{const{colorScheme:t}=e;return{container:{[Fe.variable]:"colors.white.high",[Me.variable]:`colors.${t}.500`,_dark:{[Fe.variable]:"colors.gray.900",[Me.variable]:`colors.${t}.200`},color:Fe.reference}}})},defaultProps:{variant:"subtle",colorScheme:"info"}}),De=f.defineStyleConfig({baseStyle:{fontSize:"body.1",fontWeight:"normal",px:4,py:2.5,borderRadius:"md",_disabled:{opacity:1,bg:"neutral.300",color:"black.low"},_hover:{_disabled:{bg:"neutral.300",color:"black.low"}}},sizes:{lg:e=>{const{variant:t}=e;return"icon"===t?{h:10,w:10,p:0}:{fontSize:"text.xl",h:12,px:4,py:2.5}},md:e=>{const{variant:t}=e;return"icon"===t?{h:9,w:9,p:0}:{fontSize:"text.md",h:9,px:3,py:"7px"}},sm:e=>{const{variant:t}=e;return"icon"===t?{h:6,w:6,p:0}:{fontSize:"text.xs",h:6,px:2,py:"5px"}}},variants:{primary:e=>{const{isLoading:t}=e;return t?{_disabled:{bg:"primary.500"},_hover:{_disabled:{bg:"primary.500"}}}:{color:"white.high",bg:"primary.500",_hover:{bg:"primary.600"},_active:{bg:"primary.700"}}},secondary:e=>{const{isLoading:t}=e,r={color:"primary.500",borderWidth:1,borderStyle:"inside",bg:"white.high",borderColor:"primary.500",_hover:{bg:"primary.50"},_active:{bg:"primary.100"},_disabled:{border:0}},n={...r,_disabled:{bg:"white.high"},_hover:{_disabled:{bg:"white.high"}}};return t?n:r},tertiary:e=>{const{isLoading:t}=e,r={color:"primary.500",_hover:{bg:"primary.50"},_active:{bg:"primary.100"}},n={...r,_disabled:{bg:"transparent"},_hover:{_disabled:{bg:"transparent"}}};return t?n:r},danger:e=>{const{isLoading:t}=e,r={bg:"danger.500",color:"white.high",_hover:{bg:"danger.600"},_active:{bg:"danger.700"}},n={...r,_disabled:{bg:"danger.500"},_hover:{_disabled:{bg:"danger.500"}}};return t?n:r},"outline-danger":e=>{const{isLoading:t}=e,r={color:"danger.500",borderWidth:1,borderStyle:"inside",bg:"white.high",borderColor:"danger.500",_hover:{bg:"danger.50"},_active:{bg:"danger.100"},_disabled:{border:0}},n={...r,_disabled:{bg:"white.high"},_hover:{_disabled:{bg:"white.high"}}};return t?n:r},link:{bg:"transparent",color:"primary.500",_disabled:{opacity:"1",bg:"transparent",color:"black.medium"},_hover:{_disabled:{bg:"transparent",color:"black.medium"}}},icon:{bg:"neutral.50",minW:0,borderColor:"neutral.200",borderWidth:"1px",_active:{bg:"neutral.500",borderColor:"neutral.50"},_disabled:{bg:"neutral.500",opacity:.3,borderColor:"neutral.50"},_hover:{bg:"neutral.400",_disabled:{bg:"neutral.500",opacity:.3,borderColor:"neutral.50"}}}},defaultProps:{size:"md",variant:"primary",colorScheme:"primary"}}),Be=f.defineStyleConfig({baseStyle:e=>({shadow:e.withShadow?"raised":"none",borderRadius:e.isRounded?"lg":"none"})}),{definePartsStyle:Te,defineMultiStyleConfig:ze}=t.createMultiStyleConfigHelpers(k.checkboxAnatomy.keys),je=ze({baseStyle:Te({control:{borderRadius:"4px",width:"16px",height:"16px",border:"1px solid"},icon:{color:"neutral.50",width:"9px"},label:{fontWeight:"400",lineHeight:"18px",color:"black.high",ml:"8px"},_disabled:{background:"neutral.500",border:"1px solid",borderColor:"neutral.500",cursor:"not-allowed"}}),variants:{errors:Te({control:{borderColor:"danger.500",_checked:{borderColor:"danger.500",backgroundColor:"danger.500",_hover:{borderColor:"danger.600",backgroundColor:"danger.600"}},_indeterminate:{borderColor:"danger.500",backgroundColor:"danger.500"}},label:{fontSize:"12px"}}),unstyled:Te({control:{borderColor:"neutral.500",_checked:{borderColor:"primary.500",backgroundColor:"primary.500",_hover:{borderColor:"primary.600",backgroundColor:"primary.600"},_disabled:{backgroundColor:"neutral.500",borderColor:"neutral.500"}},_disabled:{backgroundColor:"neutral.500",borderColor:"neutral.500"},_indeterminate:{borderColor:"primary.500",backgroundColor:"primary.500"}},label:{fontSize:"12px"}})},defaultProps:{variant:"unstyled"}}),Re=f.defineStyleConfig({baseStyle:e=>{const{isDisabled:t,isActive:r}=e;let n={color:"primary.500",fontSize:"text.small",borderRadius:"24px",borderWidth:"1px",borderColor:"primary.500",bg:"white.high",paddingX:3,paddingY:1,cursor:"default"};if(r){const e={bg:"primary.500",color:"white.high"};n={...n,...e}}if(t){const e={bg:"neutral.200",color:"black.low",borderColor:"neutral.200",cursor:"not-allowed"};n={...n,...e}}return{...n}},sizes:{sm:{fontSize:"12px"},md:{fontSize:"14px"}},defaultProps:{size:"sm"}}),Ae=f.defineStyleConfig({baseStyle:f.defineStyle({fontSize:"field.sm",marginEnd:1,mb:1})}),{definePartsStyle:Oe,defineMultiStyleConfig:He}=f.createMultiStyleConfigHelpers(k.inputAnatomy.keys),Ie=Oe({field:{width:"100%",minWidth:0,outline:0,px:2,py:2.5,paddingInlineStart:2,paddingInlineEnd:2,position:"relative",appearance:"none",color:"black.high",_disabled:{bg:"neutral.300",border:0,cursor:"not-allowed",opacity:1,boxShadow:"none",color:"black.medium"},_placeholder:{color:"black.low"}}}),qe={lg:f.defineStyle({fontSize:"text.lg",h:12,borderRadius:"md"}),md:f.defineStyle({fontSize:"text.md",h:10,borderRadius:"md"}),sm:f.defineStyle({fontSize:"text.sm",h:9.5,borderRadius:"md"})},We=He({baseStyle:Ie,sizes:{lg:Oe({field:qe.lg,addon:qe.lg}),md:Oe({field:qe.md,addon:qe.md}),sm:Oe({field:qe.sm,addon:qe.sm})},variants:{outline:Oe(e=>({field:{border:0,outline:0,bg:y.mode("white","inherit")(e),color:y.mode("inherit","white")(e),_invalid:{boxShadow:"none"},_focusVisible:{zIndex:1,boxShadow:"none"}}})),unstyled:Oe({field:{bg:"transparent",px:"0",height:"auto"},addon:{bg:"transparent",px:"0",height:"auto"}})},defaultProps:{size:"sm",variant:"outline"}}),Ve=i.keyframes({"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}),Le=e=>"primary"===e?R.primary[600]:"danger"===e?R.danger[500]:R.white.high,$e=f.defineStyleConfig({baseStyle:e=>{const t=Le(e.color);return{borderRadius:"50%",display:"flex",justifyContent:"center",alignItems:"center",animation:Ve+" 1s linear infinite",background:`conic-gradient(from 180deg at 50% 50%, ${t} 0deg, rgba(217, 217, 217, 0) 360deg);`,":before":{content:"''",display:"block",borderRadius:"50%",width:"6px",height:"6px",position:"absolute",bottom:0,background:t}}},sizes:{xs:{width:"12px",height:"12px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 1.4px),#000 0);",":before":{width:"1.4px",height:"1.4px"}},sm:{width:"16px",height:"16px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 1.87px),#000 0);",":before":{width:"1.87px",height:"1.87px"}},md:{width:"24px",height:"24px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 2.8px),#000 0);",":before":{width:"2.8px",height:"2.8px"}},lg:{width:"50px",height:"50px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 5.83px),#000 0);",":before":{width:"5.83px",height:"5.83px"}},xl:{width:"75px",height:"75px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 8.75px),#000 0);",":before":{width:"8.75px",height:"8.75px"}},xxl:{width:"100px",height:"100px",WebkitMask:"radial-gradient(farthest-side,#0000 calc(100% - 11.67px),#000 0);",":before":{width:"11.67px",height:"11.67px"}}},defaultProps:{size:"lg"}}),{definePartsStyle:Ne}=f.createMultiStyleConfigHelpers(k.popoverAnatomy.keys),Ge={baseStyle:e=>Ne({popper:{background:y.mode("white","inherit")(e)}})},{definePartsStyle:Ue,defineMultiStyleConfig:Xe}=t.createMultiStyleConfigHelpers(k.radioAnatomy.keys),Ze=Xe({baseStyle:Ue({control:{border:"1px solid",width:"16px",height:"16px"},label:{marginLeft:"8px",textStyle:"text.sm",color:"black.high",_disabled:{color:"black.low"}}}),variants:{errors:Ue({control:{borderColor:"danger.500",_checked:{borderColor:"danger.500",bg:"white",_before:{h:"10px",w:"10px",bg:"danger.500"},_hover:{borderColor:"danger.500",bg:"gray.200"},_disabled:{borderColor:"danger.500",bg:"white",_before:{h:"10px",w:"10px",bg:"neutral.500"}}},_disabled:{borderColor:"danger.500",bg:"neutral.500"}},label:{fontSize:"12px"}}),unstyled:Ue({control:{borderColor:"neutral.600",_checked:{borderColor:"primary.500",bg:"white",_before:{h:"10px",w:"10px",bg:"primary.500"},_hover:{borderColor:"primary.500",bg:"gray.200"},_disabled:{borderColor:"neutral.500",bg:"white",_before:{h:"10px",w:"10px",bg:"neutral.500"}}},_disabled:{borderColor:"neutral.500",bg:"neutral.500"}},label:{fontSize:"12px"}})},defaultProps:{variant:"unstyled"}}),{defineMultiStyleConfig:Ye,definePartsStyle:Ke}=f.createMultiStyleConfigHelpers(k.switchAnatomy.keys),Qe=y.cssVar("switch-track-width"),Je=y.cssVar("switch-track-height"),et=y.cssVar("switch-track-diff"),tt=y.calc.subtract(Qe,Je),rt=y.cssVar("switch-thumb-x"),nt=f.defineStyle({bg:"white",transitionProperty:"transform",transitionDuration:"normal",borderRadius:"inherit",width:[Je.reference],height:[Je.reference],_checked:{transform:`translateX(${rt.reference})`}});var at={__proto__:null,Alert:Pe,Button:De,Card:Be,Checkbox:je,Chips:Re,FormLabel:Ae,Input:We,LoaderStyle:$e,Popover:Ge,Radio:Ze,Switch:Ye({baseStyle:Ke(()=>({container:{[et.variable]:tt,[rt.variable]:et.reference,_rtl:{[rt.variable]:y.calc(et).negate().toString()}},track:{bg:"neutral.400",p:1,_checked:{bg:"primary.500",_disabled:{bg:"neutral.600"}},_disabled:{bg:"neutral.500",opacity:"100%"}},thumb:nt})),sizes:{sm:Ke({container:{[Qe.variable]:"2.125rem",[Je.variable]:"1.063rem"}}),md:Ke({container:{[Qe.variable]:"2.875rem",[Je.variable]:"1.5rem"}}),lg:Ke({container:{[Qe.variable]:"3.625rem",[Je.variable]:"1.813rem"}})},defaultProps:{size:"md"}}),Textarea:t.defineStyleConfig({variants:{outline:t.defineStyle(e=>{const{focusBorderColor:t,borderColor:r}=(e=>{const{isError:t,isSuccess:r,isDisabled:n}=e;let a="neutral.400",o="primary.500";return t?(a="danger.500",o="danger.500"):r?(a="success.500",o="success.500"):!n||t||r||(a="neutral.400",o="danger.500"),{focusBorderColor:o,borderColor:a}})(e);return{background:"white.high",color:"black.high",borderColor:r,fontSize:"text.sm",padding:2,borderRadius:"md",borderWidth:"1px",outline:"none",_disabled:{opacity:1,color:"black.medium",background:"neutral.300"},_placeholder:{color:"black.low"},_hover:{borderColor:r},_focus:{outline:"none",borderColor:t,boxShadow:"none"},_focusVisible:{outline:"none",borderColor:t,boxShadow:"none"},_focusWithin:{outline:"none",borderColor:t,boxShadow:"none"},_invalid:{outline:"none",borderColor:"danger.500",boxShadow:"none"}}})},defaultProps:{variant:"outline"}})};const ot=t.extendTheme({...L,components:{...at},styles:{global:{"*::-webkit-scrollbar-thumb":{background:"neutral.400"},body:{fontSize:"text.sm",color:"black.high"}}},config:{initialColorMode:"light",useSystemColorMode:!1}}),it=r.createContext({instance:void 0}),ct=({children:e,config:t,requestInterceptors:a,responseInterceptors:o})=>{const i=r.useRef(v.create(t));r.useEffect(()=>{null==a||a.forEach(e=>{i.current.interceptors.request.use(e)}),null==o||o.forEach(e=>{i.current.interceptors.response.use(e)})},[a,o]);const c=r.useMemo(()=>({instance:i.current}),[]);return n.createElement(it.Provider,{value:c},e)};ct.displayName="Provider",Object.defineProperty(exports,"AlertDialog",{enumerable:!0,get:function(){return t.AlertDialog}}),Object.defineProperty(exports,"AlertDialogBody",{enumerable:!0,get:function(){return t.ModalBody}}),Object.defineProperty(exports,"AlertDialogCloseButton",{enumerable:!0,get:function(){return t.ModalCloseButton}}),Object.defineProperty(exports,"AlertDialogContent",{enumerable:!0,get:function(){return t.AlertDialogContent}}),Object.defineProperty(exports,"AlertDialogFooter",{enumerable:!0,get:function(){return t.ModalFooter}}),Object.defineProperty(exports,"AlertDialogHeader",{enumerable:!0,get:function(){return t.ModalHeader}}),Object.defineProperty(exports,"AlertDialogOverlay",{enumerable:!0,get:function(){return t.ModalOverlay}}),Object.defineProperty(exports,"Drawer",{enumerable:!0,get:function(){return t.Drawer}}),Object.defineProperty(exports,"DrawerBody",{enumerable:!0,get:function(){return t.ModalBody}}),Object.defineProperty(exports,"DrawerCloseButton",{enumerable:!0,get:function(){return t.ModalCloseButton}}),Object.defineProperty(exports,"DrawerContent",{enumerable:!0,get:function(){return t.DrawerContent}}),Object.defineProperty(exports,"DrawerFooter",{enumerable:!0,get:function(){return t.ModalFooter}}),Object.defineProperty(exports,"DrawerHeader",{enumerable:!0,get:function(){return t.ModalHeader}}),Object.defineProperty(exports,"DrawerOverlay",{enumerable:!0,get:function(){return t.ModalOverlay}}),Object.defineProperty(exports,"Modal",{enumerable:!0,get:function(){return t.Modal}}),Object.defineProperty(exports,"ModalContent",{enumerable:!0,get:function(){return t.ModalContent}}),Object.defineProperty(exports,"ModalContextProvider",{enumerable:!0,get:function(){return t.ModalContextProvider}}),Object.defineProperty(exports,"ModalFocusScope",{enumerable:!0,get:function(){return t.ModalFocusScope}}),Object.defineProperty(exports,"ModalOverlay",{enumerable:!0,get:function(){return t.ModalOverlay}}),Object.defineProperty(exports,"TabIndicator",{enumerable:!0,get:function(){return t.TabIndicator}}),Object.defineProperty(exports,"TabPanels",{enumerable:!0,get:function(){return t.TabPanels}}),Object.defineProperty(exports,"Tabs",{enumerable:!0,get:function(){return t.Tabs}}),Object.defineProperty(exports,"TabsDescendantsProvider",{enumerable:!0,get:function(){return t.TabsDescendantsProvider}}),Object.defineProperty(exports,"TabsProvider",{enumerable:!0,get:function(){return t.TabsProvider}}),Object.defineProperty(exports,"useDrawerContext",{enumerable:!0,get:function(){return t.useDrawerContext}}),Object.defineProperty(exports,"useModal",{enumerable:!0,get:function(){return t.useModal}}),Object.defineProperty(exports,"useModalContext",{enumerable:!0,get:function(){return t.useModalContext}}),Object.defineProperty(exports,"useModalStyles",{enumerable:!0,get:function(){return t.useModalStyles}}),Object.defineProperty(exports,"useTab",{enumerable:!0,get:function(){return t.useTab}}),Object.defineProperty(exports,"useTabIndicator",{enumerable:!0,get:function(){return t.useTabIndicator}}),Object.defineProperty(exports,"useTabList",{enumerable:!0,get:function(){return t.useTabList}}),Object.defineProperty(exports,"useTabPanel",{enumerable:!0,get:function(){return t.useTabPanel}}),Object.defineProperty(exports,"useTabPanels",{enumerable:!0,get:function(){return t.useTabPanels}}),Object.defineProperty(exports,"useTabs",{enumerable:!0,get:function(){return t.useTabs}}),Object.defineProperty(exports,"useTabsContext",{enumerable:!0,get:function(){return t.useTabsContext}}),Object.defineProperty(exports,"useTabsDescendant",{enumerable:!0,get:function(){return t.useTabsDescendant}}),Object.defineProperty(exports,"useTabsDescendants",{enumerable:!0,get:function(){return t.useTabsDescendants}}),Object.defineProperty(exports,"useTabsDescendantsContext",{enumerable:!0,get:function(){return t.useTabsDescendantsContext}}),Object.defineProperty(exports,"useTabsStyles",{enumerable:!0,get:function(){return t.useTabsStyles}}),exports.Box=t.Box,exports.BreadCrumb=w,exports.Button=e=>{const{children:r,variant:a,size:o,...i}=e;return n.createElement(t.Button,Object.assign({size:o,variant:a,spinner:n.createElement(C,{size:"lg"===o?"md":"md"===o?"sm":"xs",color:"primary"===a||"danger"===a?"white":"outline-danger"===a?"danger":"primary"})},i),r)},exports.Card=E,exports.Checkbox=S,exports.CheckboxGroup=M,exports.Container=t.Container,exports.DataTable=D,exports.DatePickerMonth=j,exports.Datepicker=z,exports.Field=F,exports.Flex=t.Flex,exports.Grid=t.Grid,exports.Header=re,exports.InputField=X,exports.Loader=C,exports.MainMenu=le,exports.ModalBody=ne,exports.ModalCloseButton=ae,exports.ModalFooter=oe,exports.ModalHeader=ie,exports.MultiDatePickerMonth=N,exports.Pagination=pe,exports.PaginationDetail=({page:e,limit:n,length:a,scale:o=300,fontSize:i="xs",lineHeight:c=18,...l})=>r.createElement(t.Text,Object.assign({scale:o,fontSize:i,lineHeight:c},l),`${(e-1)*n+1}-${n*e<a?n*e:a} dari ${a} item`),exports.PaginationFilter=me,exports.Provider=ct,exports.ProviderContext=it,exports.Radio=ue,exports.RadioGroup=ge,exports.Select=function({isError:e=!1,...t}){const{colorMode:r}=s.useColorMode();return n.createElement(he,{isError:e},n.createElement(u,Object.assign({classNamePrefix:"react-select"},t,{styles:{...xe(r)},theme:ke})))},exports.SelectAsync=function({styles:e,isError:t=!1,...r}){const{colorMode:a}=s.useColorMode();return n.createElement(he,{isError:t},n.createElement(g.AsyncPaginate,Object.assign({classNamePrefix:"react-select"},r,{styles:{...xe(a),...e},theme:ke})))},exports.SelectAsyncCreatable=function({styles:e,isError:t=!1,...r}){const{colorMode:a}=s.useColorMode();return n.createElement(he,{isError:t},n.createElement(h,Object.assign({classNamePrefix:"react-select"},r,{styles:{...xe(a),...e},theme:ke})))},exports.SelectCreatable=function({styles:e,isError:t=!1,...r}){const{colorMode:a}=s.useColorMode();return n.createElement(he,{isError:t},n.createElement(_,Object.assign({classNamePrefix:"react-select"},r,{styles:{...xe(a),...e},theme:ke})))},exports.Stack=t.Stack,exports.Switch=fe,exports.Tab=ye,exports.TabList=ve,exports.TabPanel=we,exports.Text=t.Text,exports.TextareaField=Z,exports.Uploader=Ce,exports.Wrap=t.Wrap,exports.foundations=L,exports.theme=ot,exports.useInternalUI=()=>{const{instance:e}=r.useContext(it);return{instance:e}};
 //# sourceMappingURL=internal-ui.cjs.production.min.js.map