@ctlyst.id/internal-ui 2.1.6 → 2.1.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/dist/components/toast/components/toast.d.ts +0 -1
  2. package/dist/internal-ui.cjs.development.js +7 -2
  3. package/dist/internal-ui.cjs.development.js.map +1 -1
  4. package/dist/internal-ui.cjs.production.min.js +2 -2
  5. package/dist/internal-ui.cjs.production.min.js.map +1 -1
  6. package/dist/internal-ui.esm.js +7 -2
  7. package/dist/internal-ui.esm.js.map +1 -1
  8. package/dist/provider/components/provider.d.ts +0 -1
  9. package/package.json +2 -2
package/dist/internal-ui.cjs.production.min.js CHANGED
@@ -1,10 +1,10 @@
1
- "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/shared-utils"),r=require("@chakra-ui/system"),n=require("react"),a=e(n),o=require("@chakra-ui/react-context"),i=require("@ctlyst.id/internal-icon"),c=require("@chakra-ui/utils"),l=require("@chakra-ui/react"),d=require("react-icons/fi"),s=require("@chakra-ui/icons"),p=require("@emotion/react"),u=require("@tanstack/react-table"),m=e(require("classnames")),g=e(require("react-datepicker")),b=e(require("@emotion/styled")),h=e(require("react-select")),_=require("react-select-async-paginate"),x=e(require("react-select/async-creatable")),f=e(require("react-select/creatable")),k=require("react-dropzone"),y=require("@chakra-ui/anatomy"),v=require("@chakra-ui/styled-system"),w=require("@chakra-ui/theme-tools"),C=e(require("axios"));require("react-toastify/dist/ReactToastify.css");var E=require("react-toastify");function S(){return a.createElement(i.Info,{color:"inherit",size:4})}const[P,j]=o.createContext({name:"AlertContext",hookName:"useAlertContext",providerName:"<Alert />"}),[O,T]=o.createContext({name:"AlertStylesContext",hookName:"useAlertStyles",providerName:"<Alert />"}),M={info:{icon:S,colorScheme:"info"},warning:{icon:S,colorScheme:"warning"},success:{icon:function(){return a.createElement(i.CheckCircle,{color:"inherit",size:4})},colorScheme:"success"},error:{icon:function(){return a.createElement(i.AlertTriangle,{color:"inherit",size:4})},colorScheme:"danger"},neutral:{icon:S,colorScheme:"neutral"}},I=r.forwardRef((function(e,n){var o;const{status:i="info",addRole:c=!0,children:l,...d}=r.omitThemingProps(e),s=null!==(o=e.colorScheme)&&void 0!==o?o:function(e){return M[e].colorScheme}(i),p=r.useMultiStyleConfig("Alert",{...e,colorScheme:s}),u={width:"100%",display:"grid",gridTemplateColumns:"auto 1fr auto auto",alignItems:"center",position:"relative",overflow:"hidden",...p.container};return a.createElement(P,{value:{status:i}},a.createElement(O,{value:p},a.createElement(r.chakra.div,Object.assign({"data-status":i,role:c?"alert":void 0,ref:n},d,{className:t.cx("chakra-alert",e.className),__css:u}),l)))}));I.displayName="Alert";const R=l.forwardRef((e,t)=>{const r=l.useStyleConfig("LoaderStyle",e);return a.createElement(l.Box,{ref:t,__css:r})});R.defaultProps={size:"md"};const z=l.forwardRef((e,t)=>{const{children:r,variant:n,size:o,...i}=e;return a.createElement(l.Button,Object.assign({size:o,variant:n,spinner:a.createElement(R,{size:"lg"===o?"md":"md"===o?"sm":"xs",color:"primary"===n||"danger"===n?"white":"outline-danger"===n?"danger":"primary"}),ref:t},i),r)});function B({children:e,className:t}){const r=T().action;return a.createElement(z,{"data-test-id":"alert-action",className:c.cx("chakra-alert__action",t),variant:"link",fontWeight:"semibold",__css:r},e)}function A({className:e,children:n,...o}){const c=T().close;return a.createElement(r.chakra.span,Object.assign({display:"inherit","data-status":"alert-close"},o,{className:t.cx("chakra-alert__close",e),__css:c}),n||a.createElement(i.Close,{color:"inherit",size:4}))}B.displayName="AlertAction",A.displayName="AlertClose";const D=r.forwardRef((function(e,n){const o=T(),{status:i}=j(),c={display:"inline",...o.description};return a.createElement(r.chakra.div,Object.assign({ref:n,"data-status":i},e,{className:t.cx("chakra-alert__desc",e.className),__css:c}))}));function F({className:e,children:n,...o}){const{status:i}=j(),c=function(e){return M[e].icon}(i),l=T().icon;return a.createElement(r.chakra.span,Object.assign({display:"inherit","data-status":i},o,{className:t.cx("chakra-alert__icon",e),__css:l}),n||a.createElement(c,null))}D.displayName="AlertDescription",F.displayName="AlertIcon";const H=r.forwardRef((function(e,n){const o=T(),{status:i}=j();return a.createElement(r.chakra.div,Object.assign({ref:n,"data-status":i},e,{className:t.cx("chakra-alert__title",e.className),__css:o.title}))}));H.displayName="AlertTitle";const L=e=>{const{children:t,pill:r,...n}=e;return a.createElement(l.Badge,Object.assign({borderRadius:r?"xl":"sm",display:"inline-flex",alignItems:"center",justifyContent:"space-between",textTransform:"none"},n),t)};L.defaultProps={pill:!1};const q=e=>{const{title:t,children:r,parents:a,className:o,disableHome:i,spacing:c=2,backButton:s}=e,[p,u]=l.useToken("colors",["neutral.600","primary.500"]);return n.createElement(l.Box,{"data-test-id":"CT_component_breadcrumb_breadcrumb",className:o,display:"flex",justifyContent:"space-between",alignItems:"center",paddingY:2},n.createElement(l.Box,{display:"flex",alignItems:"center"},s&&n.createElement(z,{variant:"icon","data-test-id":"button",size:"md",mr:"2",onClick:s},n.createElement(d.FiChevronLeft,{size:l.theme.sizes[5]})),n.createElement(l.Text,{pr:"2",textStyle:"heading.6",color:"neutral.700"},t),n.createElement(l.Box,{h:"5.5",borderLeft:"1px solid",borderColor:p}),n.createElement(l.Breadcrumb,{separator:n.createElement(d.FiChevronsRight,{color:p,size:l.theme.sizes[3.5]}),pl:"2",pr:"4",spacing:c,sx:{ol:{display:"flex",alignItems:"center"}},display:"flex",alignItems:"center",className:"breadcrumb-wrapper"},n.createElement(l.BreadcrumbItem,null,n.createElement(l.BreadcrumbLink,{href:i?void 0:"/",style:{...i&&{cursor:"default"}}},n.createElement(d.FiHome,{className:"align-top",size:l.theme.sizes[3.5],color:u}))),null==a?void 0:a.map(e=>n.createElement(l.BreadcrumbItem,{key:e.name},n.createElement(l.BreadcrumbLink,{"data-test-id":"iadKcMAul3QAdvmfIQjRE",href:e.disable?void 0:e.link,onClick:e.onClick,style:{...e.disable&&{cursor:"default"}},_hover:{textDecoration:"none"}},n.createElement(l.Text,{color:e.disable?p:u,textStyle:"text.sm"},e.name)))),n.createElement(l.BreadcrumbItem,null,n.createElement(l.BreadcrumbLink,{_hover:{textDecor:"none",cursor:"default"}},n.createElement(l.Text,{color:"neutral.600",textStyle:"text.sm"},t))))),r&&n.createElement(l.Box,null,r))};q.defaultProps={children:void 0,parents:void 0,className:void 0,disableHome:void 0,spacing:2,backButton:void 0};const N=n.forwardRef(({children:e,...t},r)=>{const n=l.useStyleConfig("Card",t);return a.createElement(l.Card,Object.assign({__css:n,backgroundColor:"white.high",ref:r},t),e)});N.defaultProps={withShadow:!0,isRounded:!0};const W=l.forwardRef(({isError:e=!1,helpText:t="",errorText:r="",boxProps:n,children:o,isDisabled:i,...c},d)=>{const s=e?"errors":"unstyled";return a.createElement(l.Box,Object.assign({},n),a.createElement(l.Box,{display:"flex"},a.createElement(l.Checkbox,Object.assign({variant:s,ref:d},c,{isDisabled:i}),o&&a.createElement(l.Text,{as:"span",display:"block",textStyle:"text.sm",color:i?"black.medium":"black.high"},o))),(e||t)&&a.createElement(l.Box,{mt:"5px",ml:"24px"},e?a.createElement(l.Text,{as:"span",display:"block",textStyle:"text.xs",color:"danger.500"},r):a.createElement(l.Text,{as:"span",display:"block",textStyle:"text.xs",color:"black.medium"},t)))});W.defaultProps={isError:!1,helpText:"",errorText:"",boxProps:{}};const V=e=>{const{label:t,isError:r,errorMessage:n,leftHelperText:o,rightHelperText:i,isRequired:c,children:d,isSuccess:s,boxProps:p={}}=e,u=r?"danger.500":s?"success.500":"black.medium",m=i&&(!o||r&&!n)?"flex-end":"space-between";return a.createElement(l.FormControl,Object.assign({isInvalid:r},p),t&&("string"==typeof t?a.createElement(l.FormLabel,{mb:1,fontSize:"text.sm",requiredIndicator:void 0},c&&a.createElement(l.Box,{as:"span",color:"danger.500",ml:0,mr:1},"*"),t):t),d,(r&&n||o||i)&&a.createElement(l.Box,{display:"flex",width:"full",justifyContent:m},r?"string"==typeof n?a.createElement(l.FormErrorMessage,{fontSize:"text.xs",color:"danger.500",mt:1},n):n:o&&("string"==typeof o?a.createElement(l.FormHelperText,{fontSize:"text.xs",color:u,mt:1},o):o),i&&("string"==typeof i?a.createElement(l.FormHelperText,{fontSize:"text.xs",color:u,mt:1},i):i)))};function $(e){const{children:t,label:r,helpText:n,isError:o,errorMessage:i,...c}=e;return a.createElement(V,Object.assign({},c,{label:r,leftHelperText:n,isError:o,errorMessage:i}),a.createElement(l.Box,{mt:"12px"},a.createElement(l.CheckboxGroup,Object.assign({},c),a.createElement(l.Stack,{spacing:[1,"16px"],direction:["column","row"]},t))))}V.defaultProps={label:"",isError:!1,isSuccess:!1,errorMessage:void 0,leftHelperText:void 0,rightHelperText:void 0,isRequired:!1,boxProps:{}},$.defaultProps={helpText:"",isError:!1,errorMessage:""};const G=({children:e,...t})=>{const{isActive:r,isDisabled:o,onClose:c}=t,d=l.useStyleConfig("Chips",t),s=n.useMemo(()=>r?"white.high":o?"black.low":"primary.500",[r,o]);return a.createElement(l.Box,Object.assign({__css:d,display:"inline-flex",alignItems:"center",justifyContent:"center"},t),e,c&&a.createElement(l.Box,{onClick:o?void 0:c,cursor:o?"not-allowed":"pointer",ml:2,display:"flex",alignItems:"center",justifyContent:"center"},a.createElement(i.Close,{color:s,size:4})))};G.defaultProps={isDisabled:!1,isActive:!1,onClose:void 0,children:void 0,size:"sm"};const U=n.forwardRef((e,t)=>{const{columns:r,dataSource:a=[],isLoading:o,withSelectedRow:i,onSelectedRow:c,onSort:d,sortDescFirst:m,styles:g,sortingState:b,headerSticky:h,manualSorting:_,onRowClick:x}=e,[f,k]=n.useState(!0),[y,v]=n.useState(null!=b?b:[]),[w,C]=n.useState({}),E=n.useMemo(()=>r,[r]),S=n.useMemo(()=>[{id:"select",header:({table:e})=>n.createElement(l.Checkbox,Object.assign({"data-test-id":"select-header-data-table"},{isChecked:e.getIsAllRowsSelected(),isIndeterminate:e.getIsSomeRowsSelected(),onChange:e.getToggleAllRowsSelectedHandler()})),cell:({row:e})=>n.createElement(l.Checkbox,Object.assign({"data-test-id":"select-data-table-"+e.index},{isChecked:e.getIsSelected(),isIndeterminate:e.getIsSomeSelected(),onChange:e.getToggleSelectedHandler()}))}],[]),P=u.useReactTable({data:a,columns:i?[...S,...E]:E,getCoreRowModel:u.getCoreRowModel(),getSortedRowModel:u.getSortedRowModel(),manualPagination:!0,manualSorting:_,sortDescFirst:m,state:{sorting:y,rowSelection:w},onRowSelectionChange:C,onSortingChange:e=>{v(e)}}),{getSelectedRowModel:j,toggleAllRowsSelected:O}=P,{flatRows:T}=j();return n.useEffect(()=>{const e=T.map(e=>e.original);c&&c(e)},[T]),n.useImperativeHandle(t,()=>({toggleAllRowsSelected:O})),n.useEffect(()=>{d&&!f&&d(y)},[y]),n.useEffect(()=>{k(!1)},[]),n.createElement(l.Box,Object.assign({},e),o&&n.createElement(l.Flex,{w:"100%",h:"100%",pos:"absolute",bg:"white",align:"center",justify:"center",zIndex:2},n.createElement(l.Spinner,{color:"primary.500",thickness:"4px",size:"lg"})),n.createElement(l.Table,Object.assign({},null==g?void 0:g.table),n.createElement(l.Thead,Object.assign({},h?{position:"sticky",top:0,bg:"white",zIndex:1}:{}),P.getHeaderGroups().map(e=>n.createElement(l.Tr,Object.assign({key:e.id,bg:l.useColorModeValue("initial","ebony-clay.700")},null==g?void 0:g.tableRow),e.headers.map(e=>{var t;return n.createElement(l.Th,Object.assign({key:e.id,colSpan:e.colSpan},null==g?void 0:g.tableColumnHeader),n.createElement(l.Flex,{"data-test-id":"CT_Container_TableHeader_"+e.id,textTransform:"capitalize",userSelect:"none",align:"center",gap:2},n.createElement(l.Text,null,u.flexRender(e.column.columnDef.header,e.getContext())),n.createElement(l.Box,{as:"span",cursor:e.column.getCanSort()?"pointer":"default","data-test-id":"CT_Container_SortingIcon_"+e.id,onClick:e.column.getToggleSortingHandler()},null!==(t=e.column.getCanSort()&&{asc:n.createElement(s.ChevronUpIcon,null),desc:n.createElement(s.ChevronDownIcon,null)}[e.column.getIsSorted()])&&void 0!==t?t:n.createElement(s.UpDownIcon,{h:2}))))})))),n.createElement(l.Tbody,Object.assign({},null==g?void 0:g.tableBody),P.getRowModel().rows.map(e=>n.createElement(l.Tr,Object.assign({"data-test-id":"6aZAeefGHBA2oG1wLuv-L",key:e.id},null==g?void 0:g.tableRow,{css:p.css`
1
+ "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/shared-utils"),r=require("@chakra-ui/system"),n=require("react"),a=e(n),o=require("@chakra-ui/react-context"),i=require("@ctlyst.id/internal-icon"),c=require("@chakra-ui/utils"),l=require("@chakra-ui/react"),d=require("react-icons/fi"),s=require("@chakra-ui/icons"),p=require("@emotion/react"),u=require("@tanstack/react-table"),m=e(require("classnames")),g=e(require("react-datepicker")),b=e(require("@emotion/styled")),h=e(require("react-select")),_=require("react-select-async-paginate"),x=e(require("react-select/async-creatable")),f=e(require("react-select/creatable")),k=require("react-dropzone"),y=require("@chakra-ui/anatomy"),v=require("@chakra-ui/styled-system"),w=require("@chakra-ui/theme-tools"),C=e(require("axios")),E=require("react-toastify");function S(){return a.createElement(i.Info,{color:"inherit",size:4})}const[P,j]=o.createContext({name:"AlertContext",hookName:"useAlertContext",providerName:"<Alert />"}),[O,T]=o.createContext({name:"AlertStylesContext",hookName:"useAlertStyles",providerName:"<Alert />"}),M={info:{icon:S,colorScheme:"info"},warning:{icon:S,colorScheme:"warning"},success:{icon:function(){return a.createElement(i.CheckCircle,{color:"inherit",size:4})},colorScheme:"success"},error:{icon:function(){return a.createElement(i.AlertTriangle,{color:"inherit",size:4})},colorScheme:"danger"},neutral:{icon:S,colorScheme:"neutral"}},I=r.forwardRef((function(e,n){var o;const{status:i="info",addRole:c=!0,children:l,...d}=r.omitThemingProps(e),s=null!==(o=e.colorScheme)&&void 0!==o?o:function(e){return M[e].colorScheme}(i),p=r.useMultiStyleConfig("Alert",{...e,colorScheme:s}),u={width:"100%",display:"grid",gridTemplateColumns:"auto 1fr auto auto",alignItems:"center",position:"relative",overflow:"hidden",...p.container};return a.createElement(P,{value:{status:i}},a.createElement(O,{value:p},a.createElement(r.chakra.div,Object.assign({"data-status":i,role:c?"alert":void 0,ref:n},d,{className:t.cx("chakra-alert",e.className),__css:u}),l)))}));I.displayName="Alert";const R=l.forwardRef((e,t)=>{const r=l.useStyleConfig("LoaderStyle",e);return a.createElement(l.Box,{ref:t,__css:r})});R.defaultProps={size:"md"};const z=l.forwardRef((e,t)=>{const{children:r,variant:n,size:o,...i}=e;return a.createElement(l.Button,Object.assign({size:o,variant:n,spinner:a.createElement(R,{size:"lg"===o?"md":"md"===o?"sm":"xs",color:"primary"===n||"danger"===n?"white":"outline-danger"===n?"danger":"primary"}),ref:t},i),r)});function B({children:e,className:t}){const r=T().action;return a.createElement(z,{"data-test-id":"alert-action",className:c.cx("chakra-alert__action",t),variant:"link",fontWeight:"semibold",__css:r},e)}function A({className:e,children:n,...o}){const c=T().close;return a.createElement(r.chakra.span,Object.assign({display:"inherit","data-status":"alert-close"},o,{className:t.cx("chakra-alert__close",e),__css:c}),n||a.createElement(i.Close,{color:"inherit",size:4}))}B.displayName="AlertAction",A.displayName="AlertClose";const D=r.forwardRef((function(e,n){const o=T(),{status:i}=j(),c={display:"inline",...o.description};return a.createElement(r.chakra.div,Object.assign({ref:n,"data-status":i},e,{className:t.cx("chakra-alert__desc",e.className),__css:c}))}));function F({className:e,children:n,...o}){const{status:i}=j(),c=function(e){return M[e].icon}(i),l=T().icon;return a.createElement(r.chakra.span,Object.assign({display:"inherit","data-status":i},o,{className:t.cx("chakra-alert__icon",e),__css:l}),n||a.createElement(c,null))}D.displayName="AlertDescription",F.displayName="AlertIcon";const H=r.forwardRef((function(e,n){const o=T(),{status:i}=j();return a.createElement(r.chakra.div,Object.assign({ref:n,"data-status":i},e,{className:t.cx("chakra-alert__title",e.className),__css:o.title}))}));H.displayName="AlertTitle";const L=e=>{const{children:t,pill:r,...n}=e;return a.createElement(l.Badge,Object.assign({borderRadius:r?"xl":"sm",display:"inline-flex",alignItems:"center",justifyContent:"space-between",textTransform:"none"},n),t)};L.defaultProps={pill:!1};const q=e=>{const{title:t,children:r,parents:a,className:o,disableHome:i,spacing:c=2,backButton:s}=e,[p,u]=l.useToken("colors",["neutral.600","primary.500"]);return n.createElement(l.Box,{"data-test-id":"CT_component_breadcrumb_breadcrumb",className:o,display:"flex",justifyContent:"space-between",alignItems:"center",paddingY:2},n.createElement(l.Box,{display:"flex",alignItems:"center"},s&&n.createElement(z,{variant:"icon","data-test-id":"button",size:"md",mr:"2",onClick:s},n.createElement(d.FiChevronLeft,{size:l.theme.sizes[5]})),n.createElement(l.Text,{pr:"2",textStyle:"heading.6",color:"neutral.700"},t),n.createElement(l.Box,{h:"5.5",borderLeft:"1px solid",borderColor:p}),n.createElement(l.Breadcrumb,{separator:n.createElement(d.FiChevronsRight,{color:p,size:l.theme.sizes[3.5]}),pl:"2",pr:"4",spacing:c,sx:{ol:{display:"flex",alignItems:"center"}},display:"flex",alignItems:"center",className:"breadcrumb-wrapper"},n.createElement(l.BreadcrumbItem,null,n.createElement(l.BreadcrumbLink,{href:i?void 0:"/",style:{...i&&{cursor:"default"}}},n.createElement(d.FiHome,{className:"align-top",size:l.theme.sizes[3.5],color:u}))),null==a?void 0:a.map(e=>n.createElement(l.BreadcrumbItem,{key:e.name},n.createElement(l.BreadcrumbLink,{"data-test-id":"iadKcMAul3QAdvmfIQjRE",href:e.disable?void 0:e.link,onClick:e.onClick,style:{...e.disable&&{cursor:"default"}},_hover:{textDecoration:"none"}},n.createElement(l.Text,{color:e.disable?p:u,textStyle:"text.sm"},e.name)))),n.createElement(l.BreadcrumbItem,null,n.createElement(l.BreadcrumbLink,{_hover:{textDecor:"none",cursor:"default"}},n.createElement(l.Text,{color:"neutral.600",textStyle:"text.sm"},t))))),r&&n.createElement(l.Box,null,r))};q.defaultProps={children:void 0,parents:void 0,className:void 0,disableHome:void 0,spacing:2,backButton:void 0};const N=n.forwardRef(({children:e,...t},r)=>{const n=l.useStyleConfig("Card",t);return a.createElement(l.Card,Object.assign({__css:n,backgroundColor:"white.high",ref:r},t),e)});N.defaultProps={withShadow:!0,isRounded:!0};const W=l.forwardRef(({isError:e=!1,helpText:t="",errorText:r="",boxProps:n,children:o,isDisabled:i,...c},d)=>{const s=e?"errors":"unstyled";return a.createElement(l.Box,Object.assign({},n),a.createElement(l.Box,{display:"flex"},a.createElement(l.Checkbox,Object.assign({variant:s,ref:d},c,{isDisabled:i}),o&&a.createElement(l.Text,{as:"span",display:"block",textStyle:"text.sm",color:i?"black.medium":"black.high"},o))),(e||t)&&a.createElement(l.Box,{mt:"5px",ml:"24px"},e?a.createElement(l.Text,{as:"span",display:"block",textStyle:"text.xs",color:"danger.500"},r):a.createElement(l.Text,{as:"span",display:"block",textStyle:"text.xs",color:"black.medium"},t)))});W.defaultProps={isError:!1,helpText:"",errorText:"",boxProps:{}};const V=e=>{const{label:t,isError:r,errorMessage:n,leftHelperText:o,rightHelperText:i,isRequired:c,children:d,isSuccess:s,boxProps:p={}}=e,u=r?"danger.500":s?"success.500":"black.medium",m=i&&(!o||r&&!n)?"flex-end":"space-between";return a.createElement(l.FormControl,Object.assign({isInvalid:r},p),t&&("string"==typeof t?a.createElement(l.FormLabel,{mb:1,fontSize:"text.sm",requiredIndicator:void 0},c&&a.createElement(l.Box,{as:"span",color:"danger.500",ml:0,mr:1},"*"),t):t),d,(r&&n||o||i)&&a.createElement(l.Box,{display:"flex",width:"full",justifyContent:m},r?"string"==typeof n?a.createElement(l.FormErrorMessage,{fontSize:"text.xs",color:"danger.500",mt:1},n):n:o&&("string"==typeof o?a.createElement(l.FormHelperText,{fontSize:"text.xs",color:u,mt:1},o):o),i&&("string"==typeof i?a.createElement(l.FormHelperText,{fontSize:"text.xs",color:u,mt:1},i):i)))};function $(e){const{children:t,label:r,helpText:n,isError:o,errorMessage:i,...c}=e;return a.createElement(V,Object.assign({},c,{label:r,leftHelperText:n,isError:o,errorMessage:i}),a.createElement(l.Box,{mt:"12px"},a.createElement(l.CheckboxGroup,Object.assign({},c),a.createElement(l.Stack,{spacing:[1,"16px"],direction:["column","row"]},t))))}V.defaultProps={label:"",isError:!1,isSuccess:!1,errorMessage:void 0,leftHelperText:void 0,rightHelperText:void 0,isRequired:!1,boxProps:{}},$.defaultProps={helpText:"",isError:!1,errorMessage:""};const G=({children:e,...t})=>{const{isActive:r,isDisabled:o,onClose:c}=t,d=l.useStyleConfig("Chips",t),s=n.useMemo(()=>r?"white.high":o?"black.low":"primary.500",[r,o]);return a.createElement(l.Box,Object.assign({__css:d,display:"inline-flex",alignItems:"center",justifyContent:"center"},t),e,c&&a.createElement(l.Box,{onClick:o?void 0:c,cursor:o?"not-allowed":"pointer",ml:2,display:"flex",alignItems:"center",justifyContent:"center"},a.createElement(i.Close,{color:s,size:4})))};G.defaultProps={isDisabled:!1,isActive:!1,onClose:void 0,children:void 0,size:"sm"};const U=n.forwardRef((e,t)=>{const{columns:r,dataSource:a=[],isLoading:o,withSelectedRow:i,onSelectedRow:c,onSort:d,sortDescFirst:m,styles:g,sortingState:b,headerSticky:h,manualSorting:_,onRowClick:x}=e,[f,k]=n.useState(!0),[y,v]=n.useState(null!=b?b:[]),[w,C]=n.useState({}),E=n.useMemo(()=>r,[r]),S=n.useMemo(()=>[{id:"select",header:({table:e})=>n.createElement(l.Checkbox,Object.assign({"data-test-id":"select-header-data-table"},{isChecked:e.getIsAllRowsSelected(),isIndeterminate:e.getIsSomeRowsSelected(),onChange:e.getToggleAllRowsSelectedHandler()})),cell:({row:e})=>n.createElement(l.Checkbox,Object.assign({"data-test-id":"select-data-table-"+e.index},{isChecked:e.getIsSelected(),isIndeterminate:e.getIsSomeSelected(),onChange:e.getToggleSelectedHandler()}))}],[]),P=u.useReactTable({data:a,columns:i?[...S,...E]:E,getCoreRowModel:u.getCoreRowModel(),getSortedRowModel:u.getSortedRowModel(),manualPagination:!0,manualSorting:_,sortDescFirst:m,state:{sorting:y,rowSelection:w},onRowSelectionChange:C,onSortingChange:e=>{v(e)}}),{getSelectedRowModel:j,toggleAllRowsSelected:O}=P,{flatRows:T}=j();return n.useEffect(()=>{const e=T.map(e=>e.original);c&&c(e)},[T]),n.useImperativeHandle(t,()=>({toggleAllRowsSelected:O})),n.useEffect(()=>{d&&!f&&d(y)},[y]),n.useEffect(()=>{k(!1)},[]),n.createElement(l.Box,Object.assign({},e),o&&n.createElement(l.Flex,{w:"100%",h:"100%",pos:"absolute",bg:"white",align:"center",justify:"center",zIndex:2},n.createElement(l.Spinner,{color:"primary.500",thickness:"4px",size:"lg"})),n.createElement(l.Table,Object.assign({},null==g?void 0:g.table),n.createElement(l.Thead,Object.assign({},h?{position:"sticky",top:0,bg:"white",zIndex:1}:{}),P.getHeaderGroups().map(e=>n.createElement(l.Tr,Object.assign({key:e.id,bg:l.useColorModeValue("initial","ebony-clay.700")},null==g?void 0:g.tableRow),e.headers.map(e=>{var t;return n.createElement(l.Th,Object.assign({key:e.id,colSpan:e.colSpan},null==g?void 0:g.tableColumnHeader),n.createElement(l.Flex,{"data-test-id":"CT_Container_TableHeader_"+e.id,textTransform:"capitalize",userSelect:"none",align:"center",gap:2},n.createElement(l.Text,null,u.flexRender(e.column.columnDef.header,e.getContext())),n.createElement(l.Box,{as:"span",cursor:e.column.getCanSort()?"pointer":"default","data-test-id":"CT_Container_SortingIcon_"+e.id,onClick:e.column.getToggleSortingHandler()},null!==(t=e.column.getCanSort()&&{asc:n.createElement(s.ChevronUpIcon,null),desc:n.createElement(s.ChevronDownIcon,null)}[e.column.getIsSorted()])&&void 0!==t?t:n.createElement(s.UpDownIcon,{h:2}))))})))),n.createElement(l.Tbody,Object.assign({},null==g?void 0:g.tableBody),P.getRowModel().rows.map(e=>n.createElement(l.Tr,Object.assign({"data-test-id":"6aZAeefGHBA2oG1wLuv-L",key:e.id},null==g?void 0:g.tableRow,{css:p.css`
2
2
  &:last-child {
3
3
  td {
4
4
  border-bottom: none;
5
5
  }
6
6
  }
7
- `,onClick:()=>{x&&x(e.original)}}),e.getVisibleCells().map(e=>n.createElement(l.Td,Object.assign({key:e.id,fontSize:"text.sm",color:l.useColorModeValue("dark.800","dark.300")},null==g?void 0:g.tableCell),u.flexRender(e.column.columnDef.cell,e.getContext()))))))))});U.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:[],sortDescFirst:!1,headerSticky:!1,onRowClick:void 0};const X=e=>{const{outlineColor:t,focusColor:r}=(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 l.defineStyle({border:"1px solid",borderColor:t,borderRadius:"sm",transition:"all 0.15s",boxShadow:"none",_focusWithin:{borderColor:r}})},Z=()=>{const{colorMode:e}=r.useColorMode();return a.createElement(p.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 `})},K=({value:e,onChange:t,label:r,rightAddon:n})=>{const[o,i]=a.useState(e||"00:00");return a.createElement(l.Flex,{flexDir:"column",alignItems:"center",justifyContent:"center",p:4,pt:0},a.createElement(l.Text,{mb:2},r),a.createElement(l.InputGroup,{alignItems:"center",justifyContent:"center"},a.createElement(l.Input,{onChange:e=>{var r,n;i((null===(r=e.target)||void 0===r?void 0:r.value)||"00:00"),t&&t((null===(n=e.target)||void 0===n?void 0:n.value)||"00:00")},type:"time",value:o,"data-test-id":"CT_Component_datepicker_input_time"}),n&&a.createElement(l.InputRightAddon,null,n)))};K.displayName="DatepickerTimeInput",K.defaultProps={value:"00:00",onChange:void 0,label:"Pilih Waktu",rightAddon:"WIB"};const Y=({id:e,label:t,error:r,isError:n,helperText:o,isRequired:i,withTime:c,value:s,name:p,onClear:u,showMonth:b,shortMonth:h,..._})=>{var x;const f=s?new Date(s):void 0,k=(null!==(x=_.dateFormat)&&void 0!==x?x:c)?"yyyy-MM-dd HH:mm":"yyyy-MM-dd",y=X({}),v=a.createElement(a.Fragment,null,a.createElement(Z,null),a.createElement(g,Object.assign({id:e,name:p,selected:f,customInput:a.createElement(l.Input,Object.assign({autoComplete:"off"},y)),dateFormat:k,showPopperArrow:!1,calendarClassName:m({inline:_.inline}),showMonthDropdown:b,useShortMonthInDropdown:!!b&&h},c?{timeInputLabel:"",showTimeInput:!0,customTimeInput:a.createElement(K,null)}:{},_)));return _.inline?v:a.createElement(l.FormControl,{isRequired:i,"data-test-id":"CT_Component_datepicker_wrapper",isInvalid:n},t&&a.createElement(l.FormLabel,{fontSize:"text.sm"},t),a.createElement(l.InputGroup,null,v,a.createElement(l.InputRightElement,null,!s&&a.createElement(d.FiCalendar,null),s&&a.createElement(d.FiX,{"data-test-id":"bcpJJyCP0z_RIAGZXDU6s",onClick:u,cursor:"pointer"}))),n?a.createElement(l.FormErrorMessage,null,r):a.createElement(l.FormHelperText,null,o))};Y.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 Q=({onChange:e,min:t,max:r,...n})=>{const[o,i]=a.useState(null);return a.createElement(l.Box,{fontSize:"12px",lineHeight:"18px",css:p.css`
7
+ `,onClick:()=>{x&&x(e.original)}}),e.getVisibleCells().map(e=>n.createElement(l.Td,Object.assign({key:e.id,fontSize:"text.sm",color:l.useColorModeValue("dark.800","dark.300")},null==g?void 0:g.tableCell),u.flexRender(e.column.columnDef.cell,e.getContext()))))))))});U.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:[],sortDescFirst:!1,headerSticky:!1,onRowClick:void 0};const X=e=>{const{outlineColor:t,focusColor:r}=(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 l.defineStyle({border:"1px solid",borderColor:t,borderRadius:"sm",transition:"all 0.15s",boxShadow:"none",_focusWithin:{borderColor:r}})},Z=()=>{const{colorMode:e}=r.useColorMode();return a.createElement(p.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 `})},K=({value:e,onChange:t,label:r,rightAddon:n})=>{const[o,i]=a.useState(e||"00:00");return a.createElement(l.Flex,{flexDir:"column",alignItems:"center",justifyContent:"center",p:4,pt:0},a.createElement(l.Text,{mb:2},r),a.createElement(l.InputGroup,{alignItems:"center",justifyContent:"center"},a.createElement(l.Input,{onChange:e=>{var r,n;i((null===(r=e.target)||void 0===r?void 0:r.value)||"00:00"),t&&t((null===(n=e.target)||void 0===n?void 0:n.value)||"00:00")},type:"time",value:o,"data-test-id":"CT_Component_datepicker_input_time"}),n&&a.createElement(l.InputRightAddon,null,n)))};K.displayName="DatepickerTimeInput",K.defaultProps={value:"00:00",onChange:void 0,label:"Pilih Waktu",rightAddon:"WIB"};const Y=({id:e,label:t,error:r,isError:n,helperText:o,isRequired:i,withTime:c,value:s,name:p,onClear:u,showMonth:b,shortMonth:h,..._})=>{var x;const f=s?new Date(s):void 0,k=(null!==(x=_.dateFormat)&&void 0!==x?x:c)?"yyyy-MM-dd HH:mm":"yyyy-MM-dd",y=X({}),v=a.createElement(a.Fragment,null,a.createElement(Z,null),a.createElement(g,Object.assign({id:e,name:p,selected:f,customInput:a.createElement(l.Input,Object.assign({autoComplete:"off"},y)),dateFormat:k,showPopperArrow:!1,calendarClassName:m({inline:_.inline}),showMonthDropdown:b,useShortMonthInDropdown:!!b&&h},c?{timeInputLabel:"",showTimeInput:!0,customTimeInput:a.createElement(K,null)}:{},_)));return _.inline?v:a.createElement(l.FormControl,{isRequired:i,"data-test-id":"CT_Component_datepicker_wrapper",isInvalid:n},t&&a.createElement(l.FormLabel,{fontSize:"text.sm"},t),a.createElement(l.InputGroup,null,v,a.createElement(l.InputRightElement,null,!s&&a.createElement(d.FiCalendar,null),s&&a.createElement(d.FiX,{"data-test-id":"bcpJJyCP0z_RIAGZXDU6s",onClick:u,cursor:"pointer"}))),n?a.createElement(l.FormErrorMessage,{fontSize:"text.xs",mt:1},r):a.createElement(l.FormHelperText,{fontSize:"text.xs",mt:1},o))};Y.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 Q=({onChange:e,min:t,max:r,...n})=>{const[o,i]=a.useState(null);return a.createElement(l.Box,{fontSize:"12px",lineHeight:"18px",css:p.css`
8
8
  input[type='date']::-webkit-inner-spin-button,
9
9
  input[type='date']::-webkit-calendar-picker-indicator {
10
10
  display: none;