@secondstaxorg/sscomp 1.8.26 → 1.8.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -578,6 +578,22 @@ const PaginationContainer = styled.div`
578
578
  display: flex;
579
579
  gap: 8px;
580
580
  justify-content: end;
581
+ align-items: center;
582
+ input.jump-to{
583
+ width: 40px;
584
+ padding: 8px;
585
+ border: 1px solid ${theme.colors["neutral-400"]};
586
+ border-radius: 4px;
587
+ }
588
+ input.jump-to:focus-visible {
589
+ outline: none;
590
+ }
591
+ input.success{
592
+ border-color: ${theme.colors["success-500"]};
593
+ }
594
+ input.error{
595
+ border-color: ${theme.colors["error-500"]};
596
+ }
581
597
  `;
582
598
 
583
599
  const _jsxFileName$19 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\Pagination\\index.tsx";
@@ -588,6 +604,8 @@ const _jsxFileName$19 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compo
588
604
  const Pagination = (props) => {
589
605
  const {itemsPerPage,returnedPageNum,items,paginatedItems} = props;
590
606
  const [pageNum,setPageNum] = React$1.useState(1);
607
+ const [startFrom,setStartFrom] = React$1.useState(1);
608
+ const [validation,setValidation] = React$1.useState('');
591
609
 
592
610
  const pageNumbers = [];
593
611
 
@@ -616,43 +634,64 @@ const Pagination = (props) => {
616
634
  return (
617
635
  React$1.createElement(React$1.Fragment, null
618
636
  , pageNumbers.length > 1 &&
619
- React$1.createElement(PaginationContainer, {__self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 39}}
637
+ React$1.createElement(PaginationContainer, {__self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 41}}
620
638
  , React$1.createElement(NumberButton, { onClick: ()=>{
621
639
  setPageNum(pageNum - 1);
640
+ if (startFrom > 1) setStartFrom(startFrom - 1);
622
641
  if (returnedPageNum) returnedPageNum(pageNum - 1);
623
- }, disabled: pageNum === 1, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 40}}
642
+ }, disabled: pageNum === 1, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 42}}
624
643
  , pageNum === 1 &&
625
- React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 45}}
626
- , React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 46}})
644
+ React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 48}}
645
+ , React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 49}})
627
646
  )
628
647
 
629
648
  , pageNum > 1 &&
630
- React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 50}}
631
- , React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 51}})
649
+ React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 53}}
650
+ , React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 54}})
632
651
  )
633
652
 
634
653
  )
635
- , pageNumbers.map((number) => (
636
- React$1.createElement(NumberButton, { className: `${number === pageNum ? 'active' : ''} somebutton`, key: number, onClick: ()=>{
637
- if (returnedPageNum) returnedPageNum(number);
638
- setPageNum(number);
639
- }, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 56}}, number)
640
- ))
654
+ , pageNumbers.map((number) => {
655
+ if (number >= startFrom && number <= startFrom + 10) return (
656
+ React$1.createElement(NumberButton, { className: `${number === pageNum ? 'active' : ''}`, key: number,
657
+ onClick: () => {
658
+ if (returnedPageNum) returnedPageNum(number);
659
+ setPageNum(number);
660
+ }, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 60}}, number)
661
+ )
662
+ })
641
663
  , React$1.createElement(NumberButton, { onClick: ()=>{
642
664
  setPageNum(pageNum + 1);
665
+ if (startFrom + 10 < pageNumbers.length) setStartFrom(startFrom + 1);
643
666
  if (returnedPageNum) returnedPageNum(pageNum + 1);
644
- }, disabled: pageNum === pageNumbers.length, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 61}}
667
+ }, disabled: pageNum === pageNumbers.length, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 67}}
645
668
  , pageNum !== pageNumbers.length &&
646
- React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 66}}
647
- , React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 67}})
669
+ React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 73}}
670
+ , React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 74}})
648
671
  )
649
672
 
650
673
  , pageNum === pageNumbers.length &&
651
- React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 71}}
652
- , React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 72}})
674
+ React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 78}}
675
+ , React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 79}})
653
676
  )
654
677
 
655
678
  )
679
+ , pageNumbers.length > 10 && React$1.createElement(React$1.Fragment, null, React$1.createElement('input', { type: "text", className: `jump-to ${validation}`, placeholder: "Go to" , onChange: (e)=>{
680
+ if (!e.target.value) {
681
+ setValidation('');
682
+ return
683
+ }
684
+ if (isNaN(Number(e.target.value)) || e.target.value == '0' || Number(e.target.value) == 0 || Number(e.target.value) > pageNumbers.length){
685
+ setPageNum(1);
686
+ setValidation('error');
687
+ return
688
+ }
689
+ setPageNum(Number(e.target.value));
690
+ if (Number(e.target.value) > 10) setStartFrom(Number(e.target.value) - 10);
691
+ if (Number(e.target.value) < 10) setStartFrom(Number(e.target.value));
692
+ setValidation('success');
693
+ }, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 83}}), " of " , pageNumbers.length)
694
+
656
695
  )
657
696
 
658
697
  )
@@ -17202,7 +17241,19 @@ const CalendarContainer$1 = styled.div`
17202
17241
  background: ${theme.colors["neutral-50"]};
17203
17242
  }
17204
17243
  }
17205
- .previous-month-day,.next-month-day,.past-day,.future-day,.min-year,.max-year{
17244
+ .disabled-month {
17245
+ display: flex;
17246
+ height: 35px;
17247
+ justify-content: center;
17248
+ align-items: center;
17249
+ }
17250
+ .disabled-year {
17251
+ display: flex;
17252
+ justify-content: center;
17253
+ align-items: center;
17254
+ height: 35px;
17255
+ }
17256
+ .previous-month-day,.next-month-day,.past-day,.future-day,.min-year,.max-year,.disabled-month,.disabled-year{
17206
17257
  color: ${theme.colors["neutral-200"]};
17207
17258
  cursor: default;
17208
17259
  &:hover{
@@ -17254,7 +17305,6 @@ const ErrorMessage$5 = styled.p`
17254
17305
 
17255
17306
  const _jsxFileName$U = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\DatePicker\\DatePicker.tsx";
17256
17307
 
17257
-
17258
17308
  /**
17259
17309
  * Component for picking date
17260
17310
  */
@@ -17339,21 +17389,21 @@ const DatePicker = (props) => {
17339
17389
  };
17340
17390
 
17341
17391
  return (
17342
- React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 90}}
17392
+ React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 91}}
17343
17393
  , label &&
17344
- React$1.createElement(InputLabel$9, {__self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 92}}
17345
- , React$1.createElement('label', { className: "paragraph2Medium", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 93}}, label)
17346
- , subtext && React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 94}}, subtext)
17394
+ React$1.createElement(InputLabel$9, {__self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 93}}
17395
+ , React$1.createElement('label', { className: "paragraph2Medium", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 94}}, label)
17396
+ , subtext && React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 95}}, subtext)
17347
17397
  )
17348
17398
 
17349
17399
  , React$1.createElement(DatePickerContainer, { ref: calendarRef, className: `date-field ${validationStatus}`,
17350
- style: {width: width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 97}}
17351
- , React$1.createElement(InputField$5, { className: `${validationStatus} ${isCalendarOpen ? 'focused' : ''}`, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 99}}
17400
+ style: {width: width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 98}}
17401
+ , React$1.createElement(InputField$5, { className: `${validationStatus} ${isCalendarOpen ? 'focused' : ''}`, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 100}}
17352
17402
  , React$1.createElement('input', { type: "text", className: "sr-only", required: required,
17353
17403
  value: !selectedDate ? '' : selectedDate , onChange: () => {
17354
17404
  }, onInvalid: () => {
17355
17405
  setValidationStatus('error');
17356
- }, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 100}})
17406
+ }, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 101}})
17357
17407
  , React$1.createElement('input', {
17358
17408
  type: "text",
17359
17409
  value: selectedDate ? selectedDate.toLocaleDateString('en-GB', options) : '',
@@ -17367,7 +17417,7 @@ const DatePicker = (props) => {
17367
17417
  if (required && !selectedDate) {
17368
17418
  setValidationStatus('error');
17369
17419
  }
17370
- }, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 105}}
17420
+ }, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 106}}
17371
17421
  )
17372
17422
  , React$1.createElement('button', { type: "button", onClick: () => {
17373
17423
  if (isCalendarOpen) {
@@ -17375,36 +17425,36 @@ const DatePicker = (props) => {
17375
17425
  setIsCalendarOpen(false);
17376
17426
  }, 50);
17377
17427
  }
17378
- }, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 120}}
17428
+ }, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 121}}
17379
17429
  /*calendar icon*/
17380
- , React$1.createElement('svg', { width: "21", height: "22", viewBox: "0 0 21 22" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 128}}
17430
+ , React$1.createElement('svg', { width: "21", height: "22", viewBox: "0 0 21 22" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 129}}
17381
17431
  , React$1.createElement('path', {
17382
17432
  d: "M10.5 18C10.6978 18 10.8911 17.9414 11.0556 17.8315C11.22 17.7216 11.3482 17.5654 11.4239 17.3827C11.4996 17.2 11.5194 16.9989 11.4808 16.8049C11.4422 16.6109 11.347 16.4327 11.2071 16.2929C11.0673 16.153 10.8891 16.0578 10.6951 16.0192C10.5011 15.9806 10.3 16.0004 10.1173 16.0761C9.93459 16.1518 9.77841 16.28 9.66853 16.4444C9.55865 16.6089 9.5 16.8022 9.5 17C9.5 17.2652 9.60536 17.5196 9.79289 17.7071C9.98043 17.8946 10.2348 18 10.5 18ZM15.5 18C15.6978 18 15.8911 17.9414 16.0556 17.8315C16.22 17.7216 16.3482 17.5654 16.4239 17.3827C16.4996 17.2 16.5194 16.9989 16.4808 16.8049C16.4422 16.6109 16.347 16.4327 16.2071 16.2929C16.0673 16.153 15.8891 16.0578 15.6951 16.0192C15.5011 15.9806 15.3 16.0004 15.1173 16.0761C14.9346 16.1518 14.7784 16.28 14.6685 16.4444C14.5586 16.6089 14.5 16.8022 14.5 17C14.5 17.2652 14.6054 17.5196 14.7929 17.7071C14.9804 17.8946 15.2348 18 15.5 18ZM15.5 14C15.6978 14 15.8911 13.9414 16.0556 13.8315C16.22 13.7216 16.3482 13.5654 16.4239 13.3827C16.4996 13.2 16.5194 12.9989 16.4808 12.8049C16.4422 12.6109 16.347 12.4327 16.2071 12.2929C16.0673 12.153 15.8891 12.0578 15.6951 12.0192C15.5011 11.9806 15.3 12.0004 15.1173 12.0761C14.9346 12.1518 14.7784 12.28 14.6685 12.4444C14.5586 12.6089 14.5 12.8022 14.5 13C14.5 13.2652 14.6054 13.5196 14.7929 13.7071C14.9804 13.8946 15.2348 14 15.5 14ZM10.5 14C10.6978 14 10.8911 13.9414 11.0556 13.8315C11.22 13.7216 11.3482 13.5654 11.4239 13.3827C11.4996 13.2 11.5194 12.9989 11.4808 12.8049C11.4422 12.6109 11.347 12.4327 11.2071 12.2929C11.0673 12.153 10.8891 12.0578 10.6951 12.0192C10.5011 11.9806 10.3 12.0004 10.1173 12.0761C9.93459 12.1518 9.77841 12.28 9.66853 12.4444C9.55865 12.6089 9.5 12.8022 9.5 13C9.5 13.2652 9.60536 13.5196 9.79289 13.7071C9.98043 13.8946 10.2348 14 10.5 14ZM17.5 2H16.5V1C16.5 0.734784 16.3946 0.48043 16.2071 0.292893C16.0196 0.105357 15.7652 0 15.5 0C15.2348 0 14.9804 0.105357 14.7929 0.292893C14.6054 0.48043 14.5 0.734784 14.5 1V2H6.5V1C6.5 0.734784 6.39464 0.48043 6.20711 0.292893C6.01957 0.105357 5.76522 0 5.5 0C5.23478 0 4.98043 0.105357 4.79289 0.292893C4.60536 0.48043 4.5 0.734784 4.5 1V2H3.5C2.70435 2 1.94129 2.31607 1.37868 2.87868C0.816071 3.44129 0.5 4.20435 0.5 5V19C0.5 19.7956 0.816071 20.5587 1.37868 21.1213C1.94129 21.6839 2.70435 22 3.5 22H17.5C18.2956 22 19.0587 21.6839 19.6213 21.1213C20.1839 20.5587 20.5 19.7956 20.5 19V5C20.5 4.20435 20.1839 3.44129 19.6213 2.87868C19.0587 2.31607 18.2956 2 17.5 2ZM18.5 19C18.5 19.2652 18.3946 19.5196 18.2071 19.7071C18.0196 19.8946 17.7652 20 17.5 20H3.5C3.23478 20 2.98043 19.8946 2.79289 19.7071C2.60536 19.5196 2.5 19.2652 2.5 19V10H18.5V19ZM18.5 8H2.5V5C2.5 4.73478 2.60536 4.48043 2.79289 4.29289C2.98043 4.10536 3.23478 4 3.5 4H4.5V5C4.5 5.26522 4.60536 5.51957 4.79289 5.70711C4.98043 5.89464 5.23478 6 5.5 6C5.76522 6 6.01957 5.89464 6.20711 5.70711C6.39464 5.51957 6.5 5.26522 6.5 5V4H14.5V5C14.5 5.26522 14.6054 5.51957 14.7929 5.70711C14.9804 5.89464 15.2348 6 15.5 6C15.7652 6 16.0196 5.89464 16.2071 5.70711C16.3946 5.51957 16.5 5.26522 16.5 5V4H17.5C17.7652 4 18.0196 4.10536 18.2071 4.29289C18.3946 4.48043 18.5 4.73478 18.5 5V8ZM5.5 14C5.69778 14 5.89112 13.9414 6.05557 13.8315C6.22002 13.7216 6.34819 13.5654 6.42388 13.3827C6.49957 13.2 6.51937 12.9989 6.48079 12.8049C6.4422 12.6109 6.34696 12.4327 6.20711 12.2929C6.06725 12.153 5.88907 12.0578 5.69509 12.0192C5.50111 11.9806 5.30004 12.0004 5.11732 12.0761C4.93459 12.1518 4.77841 12.28 4.66853 12.4444C4.55865 12.6089 4.5 12.8022 4.5 13C4.5 13.2652 4.60536 13.5196 4.79289 13.7071C4.98043 13.8946 5.23478 14 5.5 14ZM5.5 18C5.69778 18 5.89112 17.9414 6.05557 17.8315C6.22002 17.7216 6.34819 17.5654 6.42388 17.3827C6.49957 17.2 6.51937 16.9989 6.48079 16.8049C6.4422 16.6109 6.34696 16.4327 6.20711 16.2929C6.06725 16.153 5.88907 16.0578 5.69509 16.0192C5.50111 15.9806 5.30004 16.0004 5.11732 16.0761C4.93459 16.1518 4.77841 16.28 4.66853 16.4444C4.55865 16.6089 4.5 16.8022 4.5 17C4.5 17.2652 4.60536 17.5196 4.79289 17.7071C4.98043 17.8946 5.23478 18 5.5 18Z" ,
17383
- fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 129}})
17433
+ fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 130}})
17384
17434
  )
17385
17435
  )
17386
17436
  )
17387
17437
  , isCalendarOpen && (
17388
- React$1.createElement(CalendarSheet, {__self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 136}}
17438
+ React$1.createElement(CalendarSheet, {__self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 137}}
17389
17439
  , React$1.createElement(Calendar, { onChange: (e) => {
17390
17440
  handleDateChange(e);
17391
17441
  setValidationStatus('success');
17392
17442
  }, selected: selectedDate, disablePastDaysProp: !!disablePastDays,
17393
17443
  disableFutureDaysProp: !!disableFutureDays,
17394
17444
  numInvalidPastYearsProp: numInvalidPastYears,
17395
- numInvalidFutureYearsProp: numInvalidFutureYears, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 137}}
17445
+ numInvalidFutureYearsProp: numInvalidFutureYears, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 138}}
17396
17446
  )
17397
17447
  )
17398
17448
  )
17399
17449
  , required && validationStatus === 'error' &&
17400
- React$1.createElement(ErrorMessage$5, {__self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 148}}
17450
+ React$1.createElement(ErrorMessage$5, {__self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 149}}
17401
17451
  /*exclamation-triangle*/
17402
- , React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 150}}
17452
+ , React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 151}}
17403
17453
  , React$1.createElement('path', {
17404
17454
  d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z" ,
17405
- fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 151}})
17455
+ fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 152}})
17406
17456
  )
17407
- , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 155}}, "This field is required" )
17457
+ , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 156}}, "This field is required" )
17408
17458
  )
17409
17459
 
17410
17460
  )
@@ -17512,7 +17562,7 @@ const Calendar = ({onChange,selected,disablePastDaysProp,disableFutureDaysProp,n
17512
17562
  for (let i = firstDay - 1; i >= 0; i--) {
17513
17563
  const day = daysInPreviousMonth - i;
17514
17564
  days.push(
17515
- React$1.createElement('div', { key: `previous-day-${day}`, className: "calendar-day previous-month-day" , __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 263}}
17565
+ React$1.createElement('div', { key: `previous-day-${day}`, className: "calendar-day previous-month-day paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 264}}
17516
17566
  , day
17517
17567
  )
17518
17568
  );
@@ -17560,8 +17610,8 @@ const Calendar = ({onChange,selected,disablePastDaysProp,disableFutureDaysProp,n
17560
17610
  days.push(
17561
17611
  React$1.createElement('div', {
17562
17612
  key: `current-day-${day}`,
17563
- className: `calendar-day ${dayClassName}`,
17564
- onClick: handleClick, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 309}}
17613
+ className: `calendar-day paragraph1Regular ${dayClassName}`,
17614
+ onClick: handleClick, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 310}}
17565
17615
 
17566
17616
  , day
17567
17617
  )
@@ -17572,7 +17622,7 @@ const Calendar = ({onChange,selected,disablePastDaysProp,disableFutureDaysProp,n
17572
17622
  const remainingDays = (7 - (days.length % 7)) % 7;
17573
17623
  for (let day = 1; day <= remainingDays; day++) {
17574
17624
  days.push(
17575
- React$1.createElement('div', { key: `next-day-${day}`, className: "calendar-day next-month-day" , __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 323}}
17625
+ React$1.createElement('div', { key: `next-day-${day}`, className: "calendar-day next-month-day paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 324}}
17576
17626
  , day
17577
17627
  )
17578
17628
  );
@@ -17582,121 +17632,175 @@ const Calendar = ({onChange,selected,disablePastDaysProp,disableFutureDaysProp,n
17582
17632
 
17583
17633
  const renderMonthPicker = () => {
17584
17634
  const months = [];
17635
+ const thisYear = new Date().getFullYear();
17636
+ const thisMonth = new Date().getMonth();
17637
+
17638
+ const thisMonthAsDate = new Date(new Date().getFullYear(),thisMonth,1);
17639
+
17640
+ function disablePastMonth(month){
17641
+ const monthAsDate = new Date(currentDate.getFullYear(),month,1);
17642
+
17643
+ //past year
17644
+ if (disablePastDaysProp && thisYear > currentDate.getFullYear()){
17645
+ return 'disabled-month'
17646
+ }
17647
+ //this year
17648
+ if (disablePastDaysProp && (thisMonthAsDate.getTime() - monthAsDate.getTime()) > 0){
17649
+ return 'disabled-month'
17650
+ }
17651
+ }
17652
+
17653
+ function disableFutureMonth(month){
17654
+ const monthAsDate = new Date(currentDate.getFullYear(),month,1);
17655
+
17656
+ //past year
17657
+ if (disableFutureDaysProp && thisYear < currentDate.getFullYear()){
17658
+ return 'disabled-month'
17659
+ }
17660
+ //this year
17661
+ if (disableFutureDaysProp && (thisMonthAsDate.getTime() - monthAsDate.getTime()) < 0){
17662
+ return 'disabled-month'
17663
+ }
17664
+ }
17665
+
17585
17666
  for(let i = 0; i < monthsOfYear.length; i++){
17586
17667
  months.push(
17587
17668
  React$1.createElement('div', { key: i, onClick: ()=>{
17669
+ if(disableFutureMonth(i) == 'disabled-month') return
17670
+ if (disablePastMonth(i) == 'disabled-month') return
17588
17671
  handleSelectMonth(i);
17589
- }, className: "month-option", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 335}}
17672
+ }, className: `paragraph1Regular ${disablePastMonth(i) || disableFutureMonth(i) || 'month-option'}`, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 367}}
17590
17673
  , monthsOfYear[i]
17591
17674
  )
17592
17675
  );
17593
17676
  }
17594
17677
 
17595
17678
  return (
17596
- React$1.createElement('div', { className: "month-options", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 344}}, months)
17679
+ React$1.createElement('div', { className: "month-options", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 378}}, months)
17597
17680
  )
17598
17681
  };
17599
17682
 
17600
17683
  const renderYearPicker = (currentYear) => {
17601
17684
  const years = [];
17685
+ const thisYear = new Date().getFullYear();
17686
+
17687
+ function disablePastYear(year){
17688
+ if (disablePastDaysProp && year < thisYear){
17689
+ return 'disabled-year'
17690
+ }else {
17691
+ return ''
17692
+ }
17693
+ }
17694
+
17695
+ function disableFutureYear(year){
17696
+ if (disableFutureDaysProp && year > thisYear){
17697
+ return 'disabled-year'
17698
+ }else {
17699
+ return ''
17700
+ }
17701
+ }
17702
+
17703
+
17602
17704
  for (let year = currentYear - 10; year <= currentYear + 10; year++) {
17603
- const selectedClass = year === currentDate.getFullYear() ? 'selected-year' : '';
17705
+ const selectedClass = year === currentDate.getFullYear() ? ' selected-year' : '';
17604
17706
  years.push(
17605
17707
  React$1.createElement('div', { key: year, onClick: () => {
17708
+ if (disablePastYear(year) == 'disabled-year') return
17709
+ if (disableFutureYear(year) == 'disabled-year') return
17606
17710
  handleSelectYear(year);
17607
- }, className: `year-option ${selectedClass}`, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 353}}
17711
+ }, className: `paragraph1Regular ${disablePastYear(year) || disableFutureYear(year) || 'year-option'}${selectedClass}`, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 406}}
17608
17712
  , year
17609
17713
  )
17610
17714
  );
17611
17715
  }
17612
17716
 
17613
17717
  return (
17614
- React$1.createElement('div', { className: "year-picker", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 362}}
17615
- , React$1.createElement('div', { className: "year-options", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 363}}, years)
17718
+ React$1.createElement('div', { className: "year-picker", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 417}}
17719
+ , React$1.createElement('div', { className: "year-options", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 418}}, years)
17616
17720
  )
17617
17721
  )
17618
17722
  };
17619
17723
 
17620
17724
  return (
17621
- React$1.createElement(CalendarContainer$1, { className: "calendar-flyout", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 369}}
17622
- , React$1.createElement('div', { className: "header", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 370}}
17725
+ React$1.createElement(CalendarContainer$1, { className: "calendar-flyout", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 424}}
17726
+ , React$1.createElement('div', { className: "header", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 425}}
17623
17727
  , !calendarView && !monthPickerView &&
17624
- React$1.createElement('button', { type: "button", onClick: handlePreviousYear, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 372}}
17728
+ React$1.createElement('button', { type: "button", onClick: handlePreviousYear, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 427}}
17625
17729
  /*circle arrow left*/
17626
- , React$1.createElement('svg', { width: "20", height: "20", viewBox: "0 0 20 20" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 374}}
17730
+ , React$1.createElement('svg', { width: "20", height: "20", viewBox: "0 0 20 20" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 429}}
17627
17731
  , React$1.createElement('path', {
17628
17732
  d: "M6.29 9.29C6.19896 9.3851 6.12759 9.49725 6.08 9.62C5.97998 9.86346 5.97998 10.1365 6.08 10.38C6.12759 10.5028 6.19896 10.6149 6.29 10.71L9.29 13.71C9.4783 13.8983 9.7337 14.0041 10 14.0041C10.2663 14.0041 10.5217 13.8983 10.71 13.71C10.8983 13.5217 11.0041 13.2663 11.0041 13C11.0041 12.7337 10.8983 12.4783 10.71 12.29L9.41 11H13C13.2652 11 13.5196 10.8946 13.7071 10.7071C13.8946 10.5196 14 10.2652 14 10C14 9.73478 13.8946 9.48043 13.7071 9.29289C13.5196 9.10536 13.2652 9 13 9H9.41L10.71 7.71C10.8037 7.61704 10.8781 7.50644 10.9289 7.38458C10.9797 7.26272 11.0058 7.13201 11.0058 7C11.0058 6.86799 10.9797 6.73728 10.9289 6.61542C10.8781 6.49356 10.8037 6.38296 10.71 6.29C10.617 6.19627 10.5064 6.12188 10.3846 6.07111C10.2627 6.02034 10.132 5.9942 10 5.9942C9.86799 5.9942 9.73728 6.02034 9.61542 6.07111C9.49356 6.12188 9.38296 6.19627 9.29 6.29L6.29 9.29ZM0 10C0 11.9778 0.58649 13.9112 1.6853 15.5557C2.78412 17.2002 4.3459 18.4819 6.17317 19.2388C8.00043 19.9957 10.0111 20.1937 11.9509 19.8079C13.8907 19.422 15.6725 18.4696 17.0711 17.0711C18.4696 15.6725 19.422 13.8907 19.8079 11.9509C20.1937 10.0111 19.9957 8.00043 19.2388 6.17317C18.4819 4.3459 17.2002 2.78412 15.5557 1.6853C13.9112 0.58649 11.9778 0 10 0C8.68678 0 7.38642 0.258658 6.17317 0.761205C4.95991 1.26375 3.85752 2.00035 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10ZM18 10C18 11.5823 17.5308 13.129 16.6518 14.4446C15.7727 15.7602 14.5233 16.7855 13.0615 17.391C11.5997 17.9965 9.99113 18.155 8.43928 17.8463C6.88743 17.5376 5.46197 16.7757 4.34315 15.6569C3.22433 14.538 2.4624 13.1126 2.15372 11.5607C1.84504 10.0089 2.00346 8.40034 2.60896 6.93853C3.21447 5.47672 4.23984 4.22729 5.55544 3.34824C6.87103 2.46919 8.41775 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10Z" ,
17629
- fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 375}})
17733
+ fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 430}})
17630
17734
  )
17631
17735
  )
17632
17736
 
17633
17737
  , calendarView &&
17634
- React$1.createElement('button', { type: "button", onClick: handlePreviousMonth, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 382}}
17738
+ React$1.createElement('button', { type: "button", onClick: handlePreviousMonth, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 437}}
17635
17739
  /*left angle*/
17636
- , React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 384}}
17740
+ , React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 439}}
17637
17741
  , React$1.createElement('path', {
17638
17742
  d: "M3.28982 5.99995L6.82982 2.45995C7.01607 2.27259 7.12061 2.01913 7.12061 1.75495C7.12061 1.49076 7.01607 1.23731 6.82982 1.04995C6.73686 0.95622 6.62626 0.881826 6.5044 0.831057C6.38254 0.780288 6.25183 0.75415 6.11982 0.75415C5.98781 0.75415 5.8571 0.780288 5.73524 0.831057C5.61339 0.881826 5.50278 0.95622 5.40982 1.04995L1.16982 5.28995C1.07609 5.38291 1.0017 5.49351 0.950931 5.61537C0.900162 5.73723 0.874023 5.86794 0.874023 5.99995C0.874023 6.13196 0.900162 6.26267 0.950931 6.38453C1.0017 6.50638 1.07609 6.61699 1.16982 6.70995L5.40982 10.9999C5.50326 11.0926 5.61408 11.166 5.73592 11.2157C5.85775 11.2655 5.98821 11.2907 6.11982 11.2899C6.25143 11.2907 6.38189 11.2655 6.50373 11.2157C6.62557 11.166 6.73638 11.0926 6.82982 10.9999C7.01607 10.8126 7.12061 10.5591 7.12061 10.2949C7.12061 10.0308 7.01607 9.77731 6.82982 9.58995L3.28982 5.99995Z" ,
17639
- fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 385}})
17743
+ fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 440}})
17640
17744
  )
17641
17745
  )
17642
17746
 
17643
- , React$1.createElement('div', { className: "month-year-area", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 391}}
17747
+ , React$1.createElement('div', { className: "month-year-area", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 446}}
17644
17748
  , monthPickerView &&
17645
- React$1.createElement('button', { type: "button", className: "month-cls-btn", onClick: toggleMonthPicker, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 393}}
17749
+ React$1.createElement('button', { type: "button", className: "month-cls-btn", onClick: toggleMonthPicker, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 448}}
17646
17750
  /*times-icon*/
17647
- , React$1.createElement('svg', { width: "24", height: "24", viewBox: "0 0 24 24" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 395}}
17648
- , React$1.createElement('path', { d: "M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 396}})
17751
+ , React$1.createElement('svg', { width: "24", height: "24", viewBox: "0 0 24 24" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 450}}
17752
+ , React$1.createElement('path', { d: "M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 451}})
17649
17753
  )
17650
17754
  )
17651
17755
 
17652
- , React$1.createElement('div', { className: "month-year-btn-container", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 400}}
17653
- , React$1.createElement('button', { type: "button", className: "month-year", onClick: toggleYearPicker, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 401}}
17756
+ , React$1.createElement('div', { className: "month-year-btn-container", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 455}}
17757
+ , React$1.createElement('button', { type: "button", className: "month-year", onClick: toggleYearPicker, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 456}}
17654
17758
  , currentDate.toLocaleString('en-us', {month: 'long', year: 'numeric'})
17655
17759
  /*{currentYear}*/
17656
17760
  , React$1.createElement('svg', { className: calendarView ? 'year-view' : '', width: "12", height: "8", viewBox: "0 0 12 8" ,
17657
- fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 404}}
17761
+ fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 459}}
17658
17762
  , React$1.createElement('path', {
17659
17763
  d: "M11 1.17C10.8126 0.983753 10.5592 0.879211 10.295 0.879211C10.0308 0.879211 9.77737 0.983753 9.59001 1.17L6.00001 4.71L2.46001 1.17C2.27265 0.983753 2.0192 0.879211 1.75501 0.879211C1.49082 0.879211 1.23737 0.983753 1.05001 1.17C0.956281 1.26297 0.881887 1.37357 0.831118 1.49543C0.780349 1.61729 0.754211 1.74799 0.754211 1.88C0.754211 2.01202 0.780349 2.14272 0.831118 2.26458C0.881887 2.38644 0.956281 2.49704 1.05001 2.59L5.29001 6.83C5.38297 6.92373 5.49357 6.99813 5.61543 7.04889C5.73729 7.09966 5.868 7.1258 6.00001 7.1258C6.13202 7.1258 6.26273 7.09966 6.38459 7.04889C6.50645 6.99813 6.61705 6.92373 6.71001 6.83L11 2.59C11.0937 2.49704 11.1681 2.38644 11.2189 2.26458C11.2697 2.14272 11.2958 2.01202 11.2958 1.88C11.2958 1.74799 11.2697 1.61729 11.2189 1.49543C11.1681 1.37357 11.0937 1.26297 11 1.17Z" ,
17660
- fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 406}})
17764
+ fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 461}})
17661
17765
  )
17662
17766
  )
17663
17767
  )
17664
17768
  )
17665
17769
  , calendarView &&
17666
- React$1.createElement('button', { type: "button", onClick: handleNextMonth, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 414}}
17770
+ React$1.createElement('button', { type: "button", onClick: handleNextMonth, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 469}}
17667
17771
  /*right angle*/
17668
- , React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 416}}
17772
+ , React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 471}}
17669
17773
  , React$1.createElement('path', {
17670
17774
  d: "M6.83019 5.28995L2.59019 1.04995C2.49722 0.95622 2.38662 0.881826 2.26476 0.831057C2.1429 0.780288 2.0122 0.75415 1.88019 0.75415C1.74818 0.75415 1.61747 0.780288 1.49561 0.831057C1.37375 0.881826 1.26315 0.95622 1.17019 1.04995C0.983936 1.23731 0.879395 1.49076 0.879395 1.75495C0.879395 2.01913 0.983936 2.27259 1.17019 2.45995L4.71019 5.99995L1.17019 9.53995C0.983936 9.72731 0.879395 9.98076 0.879395 10.2449C0.879395 10.5091 0.983936 10.7626 1.17019 10.9499C1.26363 11.0426 1.37444 11.116 1.49628 11.1657C1.61812 11.2155 1.74858 11.2407 1.88019 11.2399C2.01179 11.2407 2.14226 11.2155 2.26409 11.1657C2.38593 11.116 2.49675 11.0426 2.59019 10.9499L6.83019 6.70995C6.92392 6.61699 6.99831 6.50638 7.04908 6.38453C7.09985 6.26267 7.12599 6.13196 7.12599 5.99995C7.12599 5.86794 7.09985 5.73723 7.04908 5.61537C6.99831 5.49351 6.92392 5.38291 6.83019 5.28995Z" ,
17671
- fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 417}})
17775
+ fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 472}})
17672
17776
  )
17673
17777
  )
17674
17778
 
17675
17779
  , !calendarView && !monthPickerView &&
17676
- React$1.createElement('button', { type: "button", onClick: handleNextYear, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 424}}
17780
+ React$1.createElement('button', { type: "button", onClick: handleNextYear, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 479}}
17677
17781
  /*circle arrow right*/
17678
- , React$1.createElement('svg', { width: "20", height: "20", viewBox: "0 0 20 20" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 426}}
17782
+ , React$1.createElement('svg', { width: "20", height: "20", viewBox: "0 0 20 20" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 481}}
17679
17783
  , React$1.createElement('path', {
17680
17784
  d: "M13.71 10.71C13.801 10.6149 13.8724 10.5028 13.92 10.38C14.02 10.1365 14.02 9.86347 13.92 9.62C13.8724 9.49725 13.801 9.38511 13.71 9.29L10.71 6.29C10.5217 6.1017 10.2663 5.99591 10 5.99591C9.7337 5.99591 9.47831 6.1017 9.29 6.29C9.1017 6.47831 8.99591 6.7337 8.99591 7C8.99591 7.26631 9.1017 7.5217 9.29 7.71L10.59 9H7C6.73479 9 6.48043 9.10536 6.2929 9.2929C6.10536 9.48043 6 9.73479 6 10C6 10.2652 6.10536 10.5196 6.2929 10.7071C6.48043 10.8946 6.73479 11 7 11H10.59L9.29 12.29C9.19628 12.383 9.12188 12.4936 9.07111 12.6154C9.02034 12.7373 8.99421 12.868 8.99421 13C8.99421 13.132 9.02034 13.2627 9.07111 13.3846C9.12188 13.5064 9.19628 13.617 9.29 13.71C9.38297 13.8037 9.49357 13.8781 9.61543 13.9289C9.73729 13.9797 9.86799 14.0058 10 14.0058C10.132 14.0058 10.2627 13.9797 10.3846 13.9289C10.5064 13.8781 10.617 13.8037 10.71 13.71L13.71 10.71ZM20 10C20 8.02219 19.4135 6.08879 18.3147 4.4443C17.2159 2.79981 15.6541 1.51809 13.8268 0.761209C11.9996 0.00433284 9.98891 -0.193701 8.0491 0.192152C6.10929 0.578004 4.32746 1.53041 2.92894 2.92894C1.53041 4.32746 0.578004 6.10929 0.192152 8.0491C-0.193701 9.98891 0.00433284 11.9996 0.761209 13.8268C1.51809 15.6541 2.79981 17.2159 4.4443 18.3147C6.08879 19.4135 8.02219 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10ZM2 10C2 8.41775 2.4692 6.87104 3.34825 5.55544C4.2273 4.23985 5.47673 3.21447 6.93854 2.60897C8.40035 2.00347 10.0089 1.84504 11.5607 2.15372C13.1126 2.4624 14.538 3.22433 15.6569 4.34315C16.7757 5.46197 17.5376 6.88743 17.8463 8.43928C18.155 9.99113 17.9965 11.5997 17.391 13.0615C16.7855 14.5233 15.7602 15.7727 14.4446 16.6518C13.129 17.5308 11.5823 18 10 18C7.87827 18 5.84344 17.1572 4.34315 15.6569C2.84286 14.1566 2 12.1217 2 10Z" ,
17681
- fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 427}})
17785
+ fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 482}})
17682
17786
  )
17683
17787
  )
17684
17788
 
17685
17789
  )
17686
17790
  /*calendar view*/
17687
- , React$1.createElement('div', { style: {display: calendarView ? 'block ' : 'none'}, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 435}}
17688
- , React$1.createElement('div', { className: "weekdays", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 436}}
17791
+ , React$1.createElement('div', { style: {display: calendarView ? 'block ' : 'none'}, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 490}}
17792
+ , React$1.createElement('div', { className: "weekdays", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 491}}
17689
17793
  , daysOfWeek.map((day) => (
17690
- React$1.createElement('div', { key: day, className: "weekday", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 438}}
17794
+ React$1.createElement('div', { key: day, className: "weekday", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 493}}
17691
17795
  , day
17692
17796
  )
17693
17797
  ))
17694
17798
  )
17695
- , React$1.createElement('div', { className: "days", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 443}}, renderCalendar())
17799
+ , React$1.createElement('div', { className: "days", __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 498}}, renderCalendar())
17696
17800
  )
17697
17801
 
17698
17802
  /*year picker*/
17699
- , React$1.createElement('div', { style: {display: !calendarView ? 'block' : 'none'}, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 447}}
17803
+ , React$1.createElement('div', { style: {display: !calendarView ? 'block' : 'none'}, __self: undefined, __source: {fileName: _jsxFileName$U, lineNumber: 502}}
17700
17804
  , monthPickerView && renderMonthPicker()
17701
17805
  , !monthPickerView && renderYearPicker(currentYear)
17702
17806
  )
@@ -31768,6 +31872,9 @@ const UploadFieldContent = styled.div`
31768
31872
  .signature-preview img{
31769
31873
  height: 65px;
31770
31874
  }
31875
+ .text-error{
31876
+ color: ${theme.colors["error-500"]};
31877
+ }
31771
31878
  `;
31772
31879
 
31773
31880
  const TypeFieldContent = styled.div`
@@ -31780,8 +31887,10 @@ const TypeFieldContent = styled.div`
31780
31887
  const _jsxFileName = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\SignatureField\\SignatureField.tsx";
31781
31888
 
31782
31889
  const SignatureField = (props) => {
31783
- const {onChange,required,value} = props;
31890
+ const {onChange,required,value,maxFileSize} = props;
31784
31891
  const [selIndex,setSelIndex] = React$1.useState(0);
31892
+ const [typeErr,setTypeErr] = React$1.useState(false);
31893
+ const [sizeErr,setSizeErr] = React$1.useState(false);
31785
31894
 
31786
31895
  React$1.useEffect(()=>{
31787
31896
  if (value){
@@ -31835,11 +31944,30 @@ const SignatureField = (props) => {
31835
31944
  }
31836
31945
  }
31837
31946
 
31947
+ function fileValidation(file){
31948
+ setTypeErr(false);
31949
+ setSizeErr(false);
31950
+ let passed = true;
31951
+ if(!acceptedFileTypes.includes(file.type)){
31952
+ setTypeErr(true);
31953
+ passed = false;
31954
+ }
31955
+
31956
+ if (maxFileSize && file.size / 1000 > maxFileSize){
31957
+ setSizeErr(true);
31958
+ passed = false;
31959
+ }
31960
+
31961
+ return passed
31962
+ }
31963
+
31964
+ const acceptedFileTypes = ['image/jpeg', 'image/png'];
31965
+
31838
31966
  return (
31839
- React$1.createElement(FieldContainer, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 64}}
31840
- , React$1.createElement(UploadFieldContent, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 65}}
31841
- , React$1.createElement('label', { className: "field-label paragraph2Medium" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 66}}, "Upload Your Signature" )
31842
- , React$1.createElement('div', { className: `upload-field-container ${selectionState}`, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 67}}
31967
+ React$1.createElement(FieldContainer, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 86}}
31968
+ , React$1.createElement(UploadFieldContent, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 87}}
31969
+ , React$1.createElement('label', { className: "field-label paragraph2Medium" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 88}}, "Upload Your Signature" )
31970
+ , React$1.createElement('div', { className: `upload-field-container ${selectionState}`, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 89}}
31843
31971
  , !selectedFile &&
31844
31972
  React$1.createElement(React$1.Fragment, null
31845
31973
  , React$1.createElement('input', { type: "file", accept: "image/jpeg, image/png" , className: "file-input", ref: fileInputRef, required: !selectedFile ? required : false, onInvalid: ()=>{
@@ -31847,29 +31975,31 @@ const SignatureField = (props) => {
31847
31975
  setSelectionState('error');
31848
31976
  }
31849
31977
  }, onChange: (e)=>{
31978
+ if (!fileValidation(e.target.files[0])) return
31850
31979
  setSelectedFile(e.target.files[0]);
31851
31980
  generateFilePreview(e.target.files[0]);
31852
- }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 70}})
31853
- , React$1.createElement('span', { className: "field-placeholder paragraph2Regular" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 78}}, "Nothing selected" )
31854
- , React$1.createElement('button', { type: "button", className: "file-selector paragraph1Medium" , onClick: ()=>{fileInputRef.current.click();}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 79}}, "Choose File" )
31981
+ }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 92}})
31982
+ , React$1.createElement('span', { className: "field-placeholder paragraph2Regular" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 101}}, "Nothing selected" )
31983
+ , React$1.createElement('button', { type: "button", className: "file-selector paragraph1Medium" , onClick: ()=>{fileInputRef.current.click();}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 102}}, "Choose File" )
31855
31984
  )
31856
31985
 
31857
31986
  , selectedFile &&
31858
- React$1.createElement('div', { className: "signature-preview-area", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 83}}
31859
- , React$1.createElement('div', { className: "signature-preview", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 84}}
31860
- , React$1.createElement('img', { src: imgPreviewUrl, alt: "", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 85}})
31987
+ React$1.createElement('div', { className: "signature-preview-area", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 106}}
31988
+ , React$1.createElement('div', { className: "signature-preview", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 107}}
31989
+ , React$1.createElement('img', { src: imgPreviewUrl, alt: "", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 108}})
31861
31990
  )
31862
- , React$1.createElement('div', { className: "action-area", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 87}}
31863
- , React$1.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 88}}, selectedFile.name)
31991
+ , React$1.createElement('div', { className: "action-area", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 110}}
31992
+ , React$1.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 111}}, selectedFile.name)
31864
31993
  , React$1.createElement('button', { className: "rm-btn paragraph1Medium" , type: "button", onClick: ()=>{
31865
31994
  setSelectedFile(null);
31866
31995
  setImgPreviewUrl('');
31867
- }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 89}}, "Remove File" )
31996
+ }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 112}}, "Remove File" )
31868
31997
  )
31869
31998
  )
31870
31999
 
31871
32000
  )
31872
- , React$1.createElement('p', { className: "captionBook", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 97}}, "Only " , React$1.createElement('b', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 97}}, "JPGs, JPEGs, PNGs" ), " are allowed" )
32001
+ , React$1.createElement('p', { className: `captionBook ${typeErr && 'text-error'}`, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 120}}, "Only " , React$1.createElement('b', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 120}}, "JPGs, JPEGs, PNGs" ), " are allowed" )
32002
+ , maxFileSize && React$1.createElement('p', { className: `captionBook ${sizeErr && 'text-error'}`, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 121}}, "Maximum " , React$1.createElement('b', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 121}}, maxFileSize >= 1000 ? Math.round(maxFileSize / 1000) : maxFileSize, " " , maxFileSize >= 1000 ? 'MB' : 'KB'), " allowed" )
31873
32003
  )
31874
32004
  )
31875
32005
  )
@@ -31888,14 +32018,14 @@ const SignatureField = (props) => {
31888
32018
 
31889
32019
  return (
31890
32020
  React$1.createElement(React$1.Fragment, null
31891
- , React$1.createElement(FieldContainer, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 116}}
31892
- , React$1.createElement(TypeFieldContent, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 117}}
31893
- , React$1.createElement('label', { className: "field-label paragraph2Medium" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 118}}, "Type Your Signature" )
31894
- , React$1.createElement('div', { className: "signature", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 119}}
32021
+ , React$1.createElement(FieldContainer, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 140}}
32022
+ , React$1.createElement(TypeFieldContent, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 141}}
32023
+ , React$1.createElement('label', { className: "field-label paragraph2Medium" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 142}}, "Type Your Signature" )
32024
+ , React$1.createElement('div', { className: "signature", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 143}}
31895
32025
  , React$1.createElement(TextField, { placeholder: "Type your signature" , required: required, onChange: (e)=>{
31896
32026
  setSignature(e.target.value);
31897
32027
  onChange(e.target.value);
31898
- }, value: signature, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 120}})
32028
+ }, value: signature, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 144}})
31899
32029
  )
31900
32030
  )
31901
32031
  )
@@ -31916,7 +32046,7 @@ const SignatureField = (props) => {
31916
32046
 
31917
32047
  return (
31918
32048
  React$1.createElement(React$1.Fragment, null
31919
- , React$1.createElement(Tab, { tabs: tabs, initialTab: selIndex, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 144}})
32049
+ , React$1.createElement(Tab, { tabs: tabs, initialTab: selIndex, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 168}})
31920
32050
  )
31921
32051
  )
31922
32052
  };