@jobber/components 4.2.2 → 4.2.3-pre.0

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.
Files changed (96) hide show
  1. package/dist/Autocomplete/index.js +21 -22
  2. package/dist/Avatar/index.js +1 -1
  3. package/dist/Avatar-99324b59.js +77 -0
  4. package/dist/Banner/index.js +11 -13
  5. package/dist/Button/index.js +2 -2
  6. package/dist/Button-21c7bf89.js +56 -0
  7. package/dist/ButtonDismiss/index.js +3 -3
  8. package/dist/{ButtonDismiss-d2d16622.js → ButtonDismiss-e2453670.js} +1 -1
  9. package/dist/Card/index.js +5 -5
  10. package/dist/Card-f821464b.js +91 -0
  11. package/dist/Checkbox/index.js +3 -3
  12. package/dist/Checkbox-99f8b870.js +39 -0
  13. package/dist/Chips/index.js +28 -30
  14. package/dist/ConfirmationModal/index.js +10 -10
  15. package/dist/{ConfirmationModal-ac668c46.js → ConfirmationModal-497e10fb.js} +3 -3
  16. package/dist/Content/index.js +1 -1
  17. package/dist/Content-373bbaee.js +23 -0
  18. package/dist/DataDump/index.js +7 -7
  19. package/dist/DataTable/index.js +36 -40
  20. package/dist/DatePicker/index.js +3 -3
  21. package/dist/{DatePicker-90d542d7.js → DatePicker-7965aca2.js} +9 -10
  22. package/dist/DescriptionList/index.js +3 -4
  23. package/dist/Disclosure/index.js +7 -8
  24. package/dist/Divider/index.js +7 -8
  25. package/dist/Drawer/index.js +12 -13
  26. package/dist/Emphasis/index.js +2 -2
  27. package/dist/{Emphasis-53e963b5.js → Emphasis-3cfd55cf.js} +1 -1
  28. package/dist/FeatureSwitch/index.js +16 -17
  29. package/dist/FormField/index.js +6 -6
  30. package/dist/FormField-e8371105.js +204 -0
  31. package/dist/FormatEmail/index.js +2 -3
  32. package/dist/FormatFile/index.js +12 -12
  33. package/dist/FormatFile-673090a1.js +103 -0
  34. package/dist/Gallery/index.js +16 -17
  35. package/dist/Heading/index.js +2 -2
  36. package/dist/{Heading-8c6e4e0b.js → Heading-1a5bf504.js} +1 -1
  37. package/dist/InlineLabel/index.js +3 -4
  38. package/dist/InputAvatar/index.js +11 -12
  39. package/dist/InputDate/index.js +7 -7
  40. package/dist/InputEmail/index.js +6 -6
  41. package/dist/InputFile/index.js +4 -4
  42. package/dist/{InputFile-e7c15211.js → InputFile-0a0cdf0d.js} +7 -8
  43. package/dist/InputGroup/index.js +2 -3
  44. package/dist/InputNumber/index.js +6 -6
  45. package/dist/InputPassword/index.js +6 -6
  46. package/dist/InputText/index.js +7 -7
  47. package/dist/{InputText-3ac6b3a9.js → InputText-621b7967.js} +1 -1
  48. package/dist/InputTime/index.js +6 -6
  49. package/dist/InputValidation/index.js +3 -3
  50. package/dist/{InputValidation-e09f5d20.js → InputValidation-2d104d5d.js} +3 -4
  51. package/dist/LightBox/index.js +4 -4
  52. package/dist/{LightBox-8472bc9d.js → LightBox-37972860.js} +12 -13
  53. package/dist/List/index.js +19 -22
  54. package/dist/Markdown/index.js +6 -6
  55. package/dist/{Markdown-5d86d6e7.js → Markdown-f8b1c2cf.js} +4 -4
  56. package/dist/Menu/index.js +3 -3
  57. package/dist/Menu-6605548e.js +128 -0
  58. package/dist/Modal/index.js +5 -5
  59. package/dist/Modal-2887a9b5.js +67 -0
  60. package/dist/MultiSelect/index.js +13 -15
  61. package/dist/{Option-9e93d069.js → Option-90f17c99.js} +1 -1
  62. package/dist/Page/index.js +19 -20
  63. package/dist/Popover/index.js +7 -8
  64. package/dist/ProgressBar/index.js +1 -1
  65. package/dist/ProgressBar-ef96b716.js +26 -0
  66. package/dist/RadioGroup/index.js +7 -8
  67. package/dist/Select/index.js +7 -7
  68. package/dist/Spinner/index.js +1 -1
  69. package/dist/Spinner-aca146ee.js +23 -0
  70. package/dist/StatusLabel/index.js +5 -6
  71. package/dist/Switch/index.js +2 -2
  72. package/dist/Switch-a579f319.js +55 -0
  73. package/dist/Table/index.js +8 -10
  74. package/dist/Tabs/index.js +9 -10
  75. package/dist/Text/index.js +2 -2
  76. package/dist/{Text-4c04ddc3.js → Text-bc836227.js} +1 -1
  77. package/dist/Toast/index.js +9 -10
  78. package/dist/Tooltip/index.js +3 -3
  79. package/dist/{Tooltip-27720f96.js → Tooltip-303be7bd.js} +6 -7
  80. package/dist/Typography/index.js +1 -1
  81. package/dist/Typography-7848765d.js +53 -0
  82. package/package.json +8 -8
  83. package/rollup.config.js +1 -1
  84. package/dist/Avatar-01c5ba8b.js +0 -78
  85. package/dist/Button-186ef2c1.js +0 -57
  86. package/dist/Card-c0f88c0f.js +0 -93
  87. package/dist/Checkbox-1df46a4a.js +0 -40
  88. package/dist/Content-af82acba.js +0 -25
  89. package/dist/FormField-e1c3af82.js +0 -205
  90. package/dist/FormatFile-42ea7a6a.js +0 -105
  91. package/dist/Menu-b5e8d8f9.js +0 -129
  92. package/dist/Modal-e41f9284.js +0 -69
  93. package/dist/ProgressBar-d3178aa9.js +0 -28
  94. package/dist/Spinner-35cee923.js +0 -24
  95. package/dist/Switch-21d7093a.js +0 -56
  96. package/dist/Typography-dd9717e7.js +0 -62
package/dist/{DatePicker-90d542d7.js → DatePicker-7965aca2.js} RENAMED
@@ -5,8 +5,8 @@ var classnames = require('classnames');
5
5
  var ReactDatePicker = require('react-datepicker');
6
6
  var jobberHooks = require('@jobber/hooks');
7
7
  var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
8
- var Typography = require('./Typography-dd9717e7.js');
9
- var Button = require('./Button-186ef2c1.js');
8
+ var Typography = require('./Typography-7848765d.js');
9
+ var Button = require('./Button-21c7bf89.js');
10
10
  var lodash = require('lodash');
11
11
 
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,14 +15,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
15
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
16
16
  var ReactDatePicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDatePicker);
17
17
 
18
- var css_248z = "@charset \"UTF-8\";\n/* stylelint-disable */\n:global .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view--down-arrow, :global .react-datepicker__navigation-icon::before {\n border-color: #ccc;\n border-style: solid;\n border-width: 3px 3px 0 0;\n content: \"\";\n display: block;\n height: 9px;\n position: absolute;\n top: 6px;\n width: 9px;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n margin-left: -4px;\n position: absolute;\n width: 0;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, :global .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:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n border-bottom-color: #aeaeae;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n top: 0;\n margin-top: -8px;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n border-top: none;\n border-bottom-color: #f0f0f0;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n top: 0;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n top: -1px;\n border-bottom-color: #aeaeae;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n bottom: 0;\n margin-bottom: -8px;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n border-bottom: none;\n border-top-color: #fff;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n bottom: 0;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {\n bottom: -1px;\n border-top-color: #aeaeae;\n}\n:global .react-datepicker-wrapper {\n display: inline-block;\n padding: 0;\n border: 0;\n width: 100%;\n}\n:global .react-datepicker {\n font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n font-size: 0.8rem;\n background-color: #fff;\n color: #000;\n border: 1px solid #aeaeae;\n border-radius: 0.3rem;\n display: inline-block;\n position: relative;\n}\n:global .react-datepicker--time-only .react-datepicker__triangle {\n left: 35px;\n}\n:global .react-datepicker--time-only .react-datepicker__time-container {\n border-left: 0;\n}\n:global .react-datepicker--time-only .react-datepicker__time,\n:global .react-datepicker--time-only .react-datepicker__time-box {\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n:global .react-datepicker__triangle {\n position: absolute;\n left: 50px;\n}\n:global .react-datepicker-popper {\n z-index: 1;\n}\n:global .react-datepicker-popper[data-placement^=bottom] {\n padding-top: 10px;\n}\n:global .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, :global .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {\n left: auto;\n right: 50px;\n}\n:global .react-datepicker-popper[data-placement^=top] {\n padding-bottom: 10px;\n}\n:global .react-datepicker-popper[data-placement^=right] {\n padding-left: 8px;\n}\n:global .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {\n left: auto;\n right: 42px;\n}\n:global .react-datepicker-popper[data-placement^=left] {\n padding-right: 8px;\n}\n:global .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {\n left: 42px;\n right: auto;\n}\n:global .react-datepicker__header {\n text-align: center;\n background-color: #f0f0f0;\n border-bottom: 1px solid #aeaeae;\n border-top-left-radius: 0.3rem;\n padding: 8px 0;\n position: relative;\n}\n:global .react-datepicker__header--time {\n padding-bottom: 8px;\n padding-left: 5px;\n padding-right: 5px;\n}\n:global .react-datepicker__header--time:not(:global .react-datepicker__header--time--only) {\n border-top-left-radius: 0;\n}\n:global .react-datepicker__header:not(:global .react-datepicker__header--has-time-select) {\n border-top-right-radius: 0.3rem;\n}\n:global .react-datepicker__year-dropdown-container--select,\n:global .react-datepicker__month-dropdown-container--select,\n:global .react-datepicker__month-year-dropdown-container--select,\n:global .react-datepicker__year-dropdown-container--scroll,\n:global .react-datepicker__month-dropdown-container--scroll,\n:global .react-datepicker__month-year-dropdown-container--scroll {\n display: inline-block;\n margin: 0 15px;\n}\n:global .react-datepicker__current-month,\n:global .react-datepicker-time__header,\n:global .react-datepicker-year-header {\n margin-top: 0;\n color: #000;\n font-weight: bold;\n font-size: 0.944rem;\n}\n:global .react-datepicker-time__header {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n:global .react-datepicker__navigation {\n -ms-flex-align: center;\n align-items: center;\n background: none;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\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:global .react-datepicker__navigation--previous {\n left: 2px;\n}\n:global .react-datepicker__navigation--next {\n right: 2px;\n}\n:global .react-datepicker__navigation--next--with-time:not(:global .react-datepicker__navigation--next--with-today-button) {\n right: 85px;\n}\n:global .react-datepicker__navigation--years {\n position: relative;\n top: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n:global .react-datepicker__navigation--years-previous {\n top: 4px;\n}\n:global .react-datepicker__navigation--years-upcoming {\n top: -4px;\n}\n:global .react-datepicker__navigation:hover *::before {\n border-color: #a6a6a6;\n}\n:global .react-datepicker__navigation-icon {\n position: relative;\n top: -1px;\n font-size: 20px;\n width: 0;\n}\n:global .react-datepicker__navigation-icon--next {\n left: -2px;\n}\n:global .react-datepicker__navigation-icon--next::before {\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n left: -7px;\n}\n:global .react-datepicker__navigation-icon--previous {\n right: -2px;\n}\n:global .react-datepicker__navigation-icon--previous::before {\n -webkit-transform: rotate(225deg);\n transform: rotate(225deg);\n right: -7px;\n}\n:global .react-datepicker__month-container {\n float: left;\n}\n:global .react-datepicker__year {\n margin: 0.4rem;\n text-align: center;\n}\n:global .react-datepicker__year-wrapper {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n max-width: 180px;\n}\n:global .react-datepicker__year .react-datepicker__year-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n:global .react-datepicker__month {\n margin: 0.4rem;\n text-align: center;\n}\n:global .react-datepicker__month .react-datepicker__month-text,\n:global .react-datepicker__month .react-datepicker__quarter-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n:global .react-datepicker__input-time-container {\n clear: both;\n width: 100%;\n float: left;\n margin: 5px 0 10px 15px;\n text-align: left;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__caption {\n display: inline-block;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container {\n display: inline-block;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n display: inline-block;\n margin-left: 10px;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n width: auto;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n:global .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:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n -moz-appearance: textfield;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n margin-left: 5px;\n display: inline-block;\n}\n:global .react-datepicker__time-container {\n float: right;\n border-left: 1px solid #aeaeae;\n width: 85px;\n}\n:global .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: -87px;\n top: 0;\n}\n:global .react-datepicker__time-container .react-datepicker__time {\n position: relative;\n background: white;\n border-bottom-right-radius: 0.3rem;\n}\n:global .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:global .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:global .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:global .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: #f0f0f0;\n}\n:global .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: #216ba5;\n color: white;\n font-weight: bold;\n}\n:global .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: #216ba5;\n}\n:global .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: #ccc;\n}\n:global .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:global .react-datepicker__week-number {\n color: #ccc;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n:global .react-datepicker__week-number.react-datepicker__week-number--clickable {\n cursor: pointer;\n}\n:global .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n border-radius: 0.3rem;\n background-color: #f0f0f0;\n}\n:global .react-datepicker__day-names,\n:global .react-datepicker__week {\n white-space: nowrap;\n}\n:global .react-datepicker__day-names {\n margin-bottom: -8px;\n}\n:global .react-datepicker__day-name,\n:global .react-datepicker__day,\n:global .react-datepicker__time-name {\n color: #000;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n:global .react-datepicker__month--selected, :global .react-datepicker__month--in-selecting-range, :global .react-datepicker__month--in-range,\n:global .react-datepicker__quarter--selected,\n:global .react-datepicker__quarter--in-selecting-range,\n:global .react-datepicker__quarter--in-range {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #fff;\n}\n:global .react-datepicker__month--selected:hover, :global .react-datepicker__month--in-selecting-range:hover, :global .react-datepicker__month--in-range:hover,\n:global .react-datepicker__quarter--selected:hover,\n:global .react-datepicker__quarter--in-selecting-range:hover,\n:global .react-datepicker__quarter--in-range:hover {\n background-color: #1d5d90;\n}\n:global .react-datepicker__month--disabled,\n:global .react-datepicker__quarter--disabled {\n color: #ccc;\n pointer-events: none;\n}\n:global .react-datepicker__month--disabled:hover,\n:global .react-datepicker__quarter--disabled:hover {\n cursor: default;\n background-color: transparent;\n}\n:global .react-datepicker__day,\n:global .react-datepicker__month-text,\n:global .react-datepicker__quarter-text,\n:global .react-datepicker__year-text {\n cursor: pointer;\n}\n:global .react-datepicker__day:hover,\n:global .react-datepicker__month-text:hover,\n:global .react-datepicker__quarter-text:hover,\n:global .react-datepicker__year-text:hover {\n border-radius: 0.3rem;\n background-color: #f0f0f0;\n}\n:global .react-datepicker__day--today,\n:global .react-datepicker__month-text--today,\n:global .react-datepicker__quarter-text--today,\n:global .react-datepicker__year-text--today {\n font-weight: bold;\n}\n:global .react-datepicker__day--highlighted,\n:global .react-datepicker__month-text--highlighted,\n:global .react-datepicker__quarter-text--highlighted,\n:global .react-datepicker__year-text--highlighted {\n border-radius: 0.3rem;\n background-color: #3dcc4a;\n color: #fff;\n}\n:global .react-datepicker__day--highlighted:hover,\n:global .react-datepicker__month-text--highlighted:hover,\n:global .react-datepicker__quarter-text--highlighted:hover,\n:global .react-datepicker__year-text--highlighted:hover {\n background-color: #32be3f;\n}\n:global .react-datepicker__day--highlighted-custom-1,\n:global .react-datepicker__month-text--highlighted-custom-1,\n:global .react-datepicker__quarter-text--highlighted-custom-1,\n:global .react-datepicker__year-text--highlighted-custom-1 {\n color: magenta;\n}\n:global .react-datepicker__day--highlighted-custom-2,\n:global .react-datepicker__month-text--highlighted-custom-2,\n:global .react-datepicker__quarter-text--highlighted-custom-2,\n:global .react-datepicker__year-text--highlighted-custom-2 {\n color: green;\n}\n:global .react-datepicker__day--selected, :global .react-datepicker__day--in-selecting-range, :global .react-datepicker__day--in-range,\n:global .react-datepicker__month-text--selected,\n:global .react-datepicker__month-text--in-selecting-range,\n:global .react-datepicker__month-text--in-range,\n:global .react-datepicker__quarter-text--selected,\n:global .react-datepicker__quarter-text--in-selecting-range,\n:global .react-datepicker__quarter-text--in-range,\n:global .react-datepicker__year-text--selected,\n:global .react-datepicker__year-text--in-selecting-range,\n:global .react-datepicker__year-text--in-range {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #fff;\n}\n:global .react-datepicker__day--selected:hover, :global .react-datepicker__day--in-selecting-range:hover, :global .react-datepicker__day--in-range:hover,\n:global .react-datepicker__month-text--selected:hover,\n:global .react-datepicker__month-text--in-selecting-range:hover,\n:global .react-datepicker__month-text--in-range:hover,\n:global .react-datepicker__quarter-text--selected:hover,\n:global .react-datepicker__quarter-text--in-selecting-range:hover,\n:global .react-datepicker__quarter-text--in-range:hover,\n:global .react-datepicker__year-text--selected:hover,\n:global .react-datepicker__year-text--in-selecting-range:hover,\n:global .react-datepicker__year-text--in-range:hover {\n background-color: #1d5d90;\n}\n:global .react-datepicker__day--keyboard-selected,\n:global .react-datepicker__month-text--keyboard-selected,\n:global .react-datepicker__quarter-text--keyboard-selected,\n:global .react-datepicker__year-text--keyboard-selected {\n border-radius: 0.3rem;\n background-color: #bad9f1;\n color: rgb(0, 0, 0);\n}\n:global .react-datepicker__day--keyboard-selected:hover,\n:global .react-datepicker__month-text--keyboard-selected:hover,\n:global .react-datepicker__quarter-text--keyboard-selected:hover,\n:global .react-datepicker__year-text--keyboard-selected:hover {\n background-color: #1d5d90;\n}\n:global .react-datepicker__day--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range),\n:global .react-datepicker__month-text--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range),\n:global .react-datepicker__quarter-text--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range),\n:global .react-datepicker__year-text--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range) {\n background-color: rgba(33, 107, 165, 0.5);\n}\n.react-datepicker__month--selecting-range :global .react-datepicker__day--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range :global .react-datepicker__month-text--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range :global .react-datepicker__quarter-text--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range :global .react-datepicker__year-text--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range) {\n background-color: #f0f0f0;\n color: #000;\n}\n:global .react-datepicker__day--disabled,\n:global .react-datepicker__month-text--disabled,\n:global .react-datepicker__quarter-text--disabled,\n:global .react-datepicker__year-text--disabled {\n cursor: default;\n color: #ccc;\n}\n:global .react-datepicker__day--disabled:hover,\n:global .react-datepicker__month-text--disabled:hover,\n:global .react-datepicker__quarter-text--disabled:hover,\n:global .react-datepicker__year-text--disabled:hover {\n background-color: transparent;\n}\n:global .react-datepicker__month-text.react-datepicker__month--selected:hover, :global .react-datepicker__month-text.react-datepicker__month--in-range:hover, :global .react-datepicker__month-text.react-datepicker__quarter--selected:hover, :global .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,\n:global .react-datepicker__quarter-text.react-datepicker__month--selected:hover,\n:global .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,\n:global .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,\n:global .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {\n background-color: #216ba5;\n}\n:global .react-datepicker__month-text:hover,\n:global .react-datepicker__quarter-text:hover {\n background-color: #f0f0f0;\n}\n:global .react-datepicker__input-container {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n:global .react-datepicker__year-read-view,\n:global .react-datepicker__month-read-view,\n:global .react-datepicker__month-year-read-view {\n border: 1px solid transparent;\n border-radius: 0.3rem;\n position: relative;\n}\n:global .react-datepicker__year-read-view:hover,\n:global .react-datepicker__month-read-view:hover,\n:global .react-datepicker__month-year-read-view:hover {\n cursor: pointer;\n}\n:global .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n border-top-color: #b3b3b3;\n}\n:global .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view--down-arrow {\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n right: -16px;\n top: 0;\n}\n:global .react-datepicker__year-dropdown,\n:global .react-datepicker__month-dropdown,\n:global .react-datepicker__month-year-dropdown {\n background-color: #f0f0f0;\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:global .react-datepicker__year-dropdown:hover,\n:global .react-datepicker__month-dropdown:hover,\n:global .react-datepicker__month-year-dropdown:hover {\n cursor: pointer;\n}\n:global .react-datepicker__year-dropdown--scrollable,\n:global .react-datepicker__month-dropdown--scrollable,\n:global .react-datepicker__month-year-dropdown--scrollable {\n height: 150px;\n overflow-y: scroll;\n}\n:global .react-datepicker__year-option,\n:global .react-datepicker__month-option,\n:global .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:global .react-datepicker__year-option:first-of-type,\n:global .react-datepicker__month-option:first-of-type,\n:global .react-datepicker__month-year-option:first-of-type {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n}\n:global .react-datepicker__year-option:last-of-type,\n:global .react-datepicker__month-option:last-of-type,\n:global .react-datepicker__month-year-option:last-of-type {\n -webkit-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:global .react-datepicker__year-option:hover,\n:global .react-datepicker__month-option:hover,\n:global .react-datepicker__month-year-option:hover {\n background-color: #ccc;\n}\n:global .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n:global .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n:global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n border-bottom-color: #b3b3b3;\n}\n:global .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n:global .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n:global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n border-top-color: #b3b3b3;\n}\n:global .react-datepicker__year-option--selected,\n:global .react-datepicker__month-option--selected,\n:global .react-datepicker__month-year-option--selected {\n position: absolute;\n left: 15px;\n}\n:global .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:global .react-datepicker__close-icon::after {\n cursor: pointer;\n background-color: #216ba5;\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:global .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:global .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 -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n z-index: 2147483647;\n}\n:global .react-datepicker__portal .react-datepicker__day-name,\n:global .react-datepicker__portal .react-datepicker__day,\n:global .react-datepicker__portal .react-datepicker__time-name {\n width: 3rem;\n line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n :global .react-datepicker__portal .react-datepicker__day-name,\n :global .react-datepicker__portal .react-datepicker__day,\n :global .react-datepicker__portal .react-datepicker__time-name {\n width: 2rem;\n line-height: 2rem;\n }\n}\n:global .react-datepicker__portal .react-datepicker__current-month,\n:global .react-datepicker__portal .react-datepicker-time__header {\n font-size: 1.44rem;\n}\n:global .react-datepicker__children-container {\n width: 13.8rem;\n margin: 0.4rem;\n padding-right: 0.2rem;\n padding-left: 0.2rem;\n height: auto;\n}\n:global .react-datepicker__aria-live {\n position: absolute;\n -webkit-clip-path: circle(0);\n clip-path: circle(0);\n border: 0;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n width: 1px;\n white-space: nowrap;\n}\n/* stylelint-enable */\n._3X5QGNINiwa77cbEb9mEzZ {\n display: inline-block;\n}\n._1DR69DMoP49Ux6kq7LUoGR {\n display: block;\n width: 100%;\n}\n._2oJDyYPkJRLltnyYbYWifk.react-datepicker {\n --datepicker-cell-size: calc(var(--space-base) * 2.375);\n box-shadow: var(--shadow-base);\n border-color: var(--color-border);\n border-radius: var(--radius-base);\n font-family: var(--typography--fontFamily-normal);\n}\n._2oJDyYPkJRLltnyYbYWifk._1YVIHRF3DM3t3EzyRTDvbj {\n box-shadow: none;\n}\n.react-datepicker__input-container,\n.react-datepicker-wrapper {\n max-width: 100%;\n}\n._3X5QGNINiwa77cbEb9mEzZ .react-datepicker-popper {\n z-index: var(--elevation-datepicker);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__header {\n padding: 0;\n border-bottom: var(--border-base) solid var(--color-border);\n background: var(--color-surface);\n}\n._2XaofeiwYq6Mon3dJkoPd_ {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day {\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: var(--datepicker-cell-size);\n height: var(--datepicker-cell-size);\n margin: 0;\n border-radius: var(--radius-base);\n color: var(--color-heading);\n font-size: var(--typography--fontSize-base);\n line-height: inherit;\n background: var(--color-surface);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--highlighted {\n background: var(--color-surface--active);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--outside-month {\n border-radius: 0;\n color: var(--color-text);\n background: var(--color-disabled--secondary);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--disabled {\n color: var(--color-disabled);\n cursor: default;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__month {\n margin: 0;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--selected {\n color: var(--color-text--reverse);\n background: var(--color-interactive);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day-names {\n display: -ms-flexbox;\n display: flex;\n margin: 0;\n padding: var(--space-smallest) 0 0;\n color: var(--color-text);\n font-size: var(--typography--fontSize-small);\n text-transform: uppercase;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day-name {\n width: auto;\n color: var(--color-text);\n -ms-flex: 1;\n flex: 1;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day:hover,\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day:focus {\n background: var(--color-surface--hover);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day:focus {\n position: relative;\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--selected:hover,\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--selected:focus {\n background: var(--color-interactive--hover);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--disabled:hover,\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--disabled:focus {\n box-shadow: none;\n background: transparent;\n}\n._2oJDyYPkJRLltnyYbYWifk\n .react-datepicker__day--disabled.react-datepicker__day--outside-month:hover,\n._2oJDyYPkJRLltnyYbYWifk\n .react-datepicker__day--disabled.react-datepicker__day--outside-month:focus {\n box-shadow: none;\n background: var(--color-disabled--secondary);\n}\n._2lX9pishvsqKh-Hj11F0yo {\n margin-top: var(--space-minuscule);\n color: var(--color-heading);\n}\n";
19
- var styles = {"datePickerWrapper":"_3X5QGNINiwa77cbEb9mEzZ","fullWidth":"_1DR69DMoP49Ux6kq7LUoGR","datePicker":"_2oJDyYPkJRLltnyYbYWifk","inline-left":"_1YVIHRF3DM3t3EzyRTDvbj","inline-right":"_1YVIHRF3DM3t3EzyRTDvbj","inline":"_1YVIHRF3DM3t3EzyRTDvbj","header":"_2XaofeiwYq6Mon3dJkoPd_","month":"_2lX9pishvsqKh-Hj11F0yo"};
18
+ var css_248z = "@charset \"UTF-8\";\n/* stylelint-disable */\n:global .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view--down-arrow, :global .react-datepicker__navigation-icon::before {\n border-color: #ccc;\n border-style: solid;\n border-width: 3px 3px 0 0;\n content: \"\";\n display: block;\n height: 9px;\n position: absolute;\n top: 6px;\n width: 9px;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n margin-left: -4px;\n position: absolute;\n width: 0;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, :global .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:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n border-bottom-color: #aeaeae;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n top: 0;\n margin-top: -8px;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n border-top: none;\n border-bottom-color: #f0f0f0;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n top: 0;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n top: -1px;\n border-bottom-color: #aeaeae;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n bottom: 0;\n margin-bottom: -8px;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n border-bottom: none;\n border-top-color: #fff;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n bottom: 0;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {\n bottom: -1px;\n border-top-color: #aeaeae;\n}\n:global .react-datepicker-wrapper {\n display: inline-block;\n padding: 0;\n border: 0;\n width: 100%;\n}\n:global .react-datepicker {\n font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n font-size: 0.8rem;\n background-color: #fff;\n color: #000;\n border: 1px solid #aeaeae;\n border-radius: 0.3rem;\n display: inline-block;\n position: relative;\n}\n:global .react-datepicker--time-only .react-datepicker__triangle {\n left: 35px;\n}\n:global .react-datepicker--time-only .react-datepicker__time-container {\n border-left: 0;\n}\n:global .react-datepicker--time-only .react-datepicker__time,\n:global .react-datepicker--time-only .react-datepicker__time-box {\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n:global .react-datepicker__triangle {\n position: absolute;\n left: 50px;\n}\n:global .react-datepicker-popper {\n z-index: 1;\n}\n:global .react-datepicker-popper[data-placement^=bottom] {\n padding-top: 10px;\n}\n:global .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, :global .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {\n left: auto;\n right: 50px;\n}\n:global .react-datepicker-popper[data-placement^=top] {\n padding-bottom: 10px;\n}\n:global .react-datepicker-popper[data-placement^=right] {\n padding-left: 8px;\n}\n:global .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {\n left: auto;\n right: 42px;\n}\n:global .react-datepicker-popper[data-placement^=left] {\n padding-right: 8px;\n}\n:global .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {\n left: 42px;\n right: auto;\n}\n:global .react-datepicker__header {\n text-align: center;\n background-color: #f0f0f0;\n border-bottom: 1px solid #aeaeae;\n border-top-left-radius: 0.3rem;\n padding: 8px 0;\n position: relative;\n}\n:global .react-datepicker__header--time {\n padding-bottom: 8px;\n padding-left: 5px;\n padding-right: 5px;\n}\n:global .react-datepicker__header--time:not(:global .react-datepicker__header--time--only) {\n border-top-left-radius: 0;\n}\n:global .react-datepicker__header:not(:global .react-datepicker__header--has-time-select) {\n border-top-right-radius: 0.3rem;\n}\n:global .react-datepicker__year-dropdown-container--select,\n:global .react-datepicker__month-dropdown-container--select,\n:global .react-datepicker__month-year-dropdown-container--select,\n:global .react-datepicker__year-dropdown-container--scroll,\n:global .react-datepicker__month-dropdown-container--scroll,\n:global .react-datepicker__month-year-dropdown-container--scroll {\n display: inline-block;\n margin: 0 15px;\n}\n:global .react-datepicker__current-month,\n:global .react-datepicker-time__header,\n:global .react-datepicker-year-header {\n margin-top: 0;\n color: #000;\n font-weight: bold;\n font-size: 0.944rem;\n}\n:global .react-datepicker-time__header {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n:global .react-datepicker__navigation {\n -ms-flex-align: center;\n align-items: center;\n background: none;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\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:global .react-datepicker__navigation--previous {\n left: 2px;\n}\n:global .react-datepicker__navigation--next {\n right: 2px;\n}\n:global .react-datepicker__navigation--next--with-time:not(:global .react-datepicker__navigation--next--with-today-button) {\n right: 85px;\n}\n:global .react-datepicker__navigation--years {\n position: relative;\n top: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n:global .react-datepicker__navigation--years-previous {\n top: 4px;\n}\n:global .react-datepicker__navigation--years-upcoming {\n top: -4px;\n}\n:global .react-datepicker__navigation:hover *::before {\n border-color: #a6a6a6;\n}\n:global .react-datepicker__navigation-icon {\n position: relative;\n top: -1px;\n font-size: 20px;\n width: 0;\n}\n:global .react-datepicker__navigation-icon--next {\n left: -2px;\n}\n:global .react-datepicker__navigation-icon--next::before {\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n left: -7px;\n}\n:global .react-datepicker__navigation-icon--previous {\n right: -2px;\n}\n:global .react-datepicker__navigation-icon--previous::before {\n -webkit-transform: rotate(225deg);\n transform: rotate(225deg);\n right: -7px;\n}\n:global .react-datepicker__month-container {\n float: left;\n}\n:global .react-datepicker__year {\n margin: 0.4rem;\n text-align: center;\n}\n:global .react-datepicker__year-wrapper {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n max-width: 180px;\n}\n:global .react-datepicker__year .react-datepicker__year-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n:global .react-datepicker__month {\n margin: 0.4rem;\n text-align: center;\n}\n:global .react-datepicker__month .react-datepicker__month-text,\n:global .react-datepicker__month .react-datepicker__quarter-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n:global .react-datepicker__input-time-container {\n clear: both;\n width: 100%;\n float: left;\n margin: 5px 0 10px 15px;\n text-align: left;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__caption {\n display: inline-block;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container {\n display: inline-block;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n display: inline-block;\n margin-left: 10px;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n width: auto;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n:global .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:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n -moz-appearance: textfield;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n margin-left: 5px;\n display: inline-block;\n}\n:global .react-datepicker__time-container {\n float: right;\n border-left: 1px solid #aeaeae;\n width: 85px;\n}\n:global .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: -87px;\n top: 0;\n}\n:global .react-datepicker__time-container .react-datepicker__time {\n position: relative;\n background: white;\n border-bottom-right-radius: 0.3rem;\n}\n:global .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:global .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:global .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:global .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: #f0f0f0;\n}\n:global .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: #216ba5;\n color: white;\n font-weight: bold;\n}\n:global .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: #216ba5;\n}\n:global .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: #ccc;\n}\n:global .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:global .react-datepicker__week-number {\n color: #ccc;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n:global .react-datepicker__week-number.react-datepicker__week-number--clickable {\n cursor: pointer;\n}\n:global .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n border-radius: 0.3rem;\n background-color: #f0f0f0;\n}\n:global .react-datepicker__day-names,\n:global .react-datepicker__week {\n white-space: nowrap;\n}\n:global .react-datepicker__day-names {\n margin-bottom: -8px;\n}\n:global .react-datepicker__day-name,\n:global .react-datepicker__day,\n:global .react-datepicker__time-name {\n color: #000;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n:global .react-datepicker__month--selected, :global .react-datepicker__month--in-selecting-range, :global .react-datepicker__month--in-range,\n:global .react-datepicker__quarter--selected,\n:global .react-datepicker__quarter--in-selecting-range,\n:global .react-datepicker__quarter--in-range {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #fff;\n}\n:global .react-datepicker__month--selected:hover, :global .react-datepicker__month--in-selecting-range:hover, :global .react-datepicker__month--in-range:hover,\n:global .react-datepicker__quarter--selected:hover,\n:global .react-datepicker__quarter--in-selecting-range:hover,\n:global .react-datepicker__quarter--in-range:hover {\n background-color: #1d5d90;\n}\n:global .react-datepicker__month--disabled,\n:global .react-datepicker__quarter--disabled {\n color: #ccc;\n pointer-events: none;\n}\n:global .react-datepicker__month--disabled:hover,\n:global .react-datepicker__quarter--disabled:hover {\n cursor: default;\n background-color: transparent;\n}\n:global .react-datepicker__day,\n:global .react-datepicker__month-text,\n:global .react-datepicker__quarter-text,\n:global .react-datepicker__year-text {\n cursor: pointer;\n}\n:global .react-datepicker__day:hover,\n:global .react-datepicker__month-text:hover,\n:global .react-datepicker__quarter-text:hover,\n:global .react-datepicker__year-text:hover {\n border-radius: 0.3rem;\n background-color: #f0f0f0;\n}\n:global .react-datepicker__day--today,\n:global .react-datepicker__month-text--today,\n:global .react-datepicker__quarter-text--today,\n:global .react-datepicker__year-text--today {\n font-weight: bold;\n}\n:global .react-datepicker__day--highlighted,\n:global .react-datepicker__month-text--highlighted,\n:global .react-datepicker__quarter-text--highlighted,\n:global .react-datepicker__year-text--highlighted {\n border-radius: 0.3rem;\n background-color: #3dcc4a;\n color: #fff;\n}\n:global .react-datepicker__day--highlighted:hover,\n:global .react-datepicker__month-text--highlighted:hover,\n:global .react-datepicker__quarter-text--highlighted:hover,\n:global .react-datepicker__year-text--highlighted:hover {\n background-color: #32be3f;\n}\n:global .react-datepicker__day--highlighted-custom-1,\n:global .react-datepicker__month-text--highlighted-custom-1,\n:global .react-datepicker__quarter-text--highlighted-custom-1,\n:global .react-datepicker__year-text--highlighted-custom-1 {\n color: magenta;\n}\n:global .react-datepicker__day--highlighted-custom-2,\n:global .react-datepicker__month-text--highlighted-custom-2,\n:global .react-datepicker__quarter-text--highlighted-custom-2,\n:global .react-datepicker__year-text--highlighted-custom-2 {\n color: green;\n}\n:global .react-datepicker__day--selected, :global .react-datepicker__day--in-selecting-range, :global .react-datepicker__day--in-range,\n:global .react-datepicker__month-text--selected,\n:global .react-datepicker__month-text--in-selecting-range,\n:global .react-datepicker__month-text--in-range,\n:global .react-datepicker__quarter-text--selected,\n:global .react-datepicker__quarter-text--in-selecting-range,\n:global .react-datepicker__quarter-text--in-range,\n:global .react-datepicker__year-text--selected,\n:global .react-datepicker__year-text--in-selecting-range,\n:global .react-datepicker__year-text--in-range {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #fff;\n}\n:global .react-datepicker__day--selected:hover, :global .react-datepicker__day--in-selecting-range:hover, :global .react-datepicker__day--in-range:hover,\n:global .react-datepicker__month-text--selected:hover,\n:global .react-datepicker__month-text--in-selecting-range:hover,\n:global .react-datepicker__month-text--in-range:hover,\n:global .react-datepicker__quarter-text--selected:hover,\n:global .react-datepicker__quarter-text--in-selecting-range:hover,\n:global .react-datepicker__quarter-text--in-range:hover,\n:global .react-datepicker__year-text--selected:hover,\n:global .react-datepicker__year-text--in-selecting-range:hover,\n:global .react-datepicker__year-text--in-range:hover {\n background-color: #1d5d90;\n}\n:global .react-datepicker__day--keyboard-selected,\n:global .react-datepicker__month-text--keyboard-selected,\n:global .react-datepicker__quarter-text--keyboard-selected,\n:global .react-datepicker__year-text--keyboard-selected {\n border-radius: 0.3rem;\n background-color: #bad9f1;\n color: rgb(0, 0, 0);\n}\n:global .react-datepicker__day--keyboard-selected:hover,\n:global .react-datepicker__month-text--keyboard-selected:hover,\n:global .react-datepicker__quarter-text--keyboard-selected:hover,\n:global .react-datepicker__year-text--keyboard-selected:hover {\n background-color: #1d5d90;\n}\n:global .react-datepicker__day--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range),\n:global .react-datepicker__month-text--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range),\n:global .react-datepicker__quarter-text--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range),\n:global .react-datepicker__year-text--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range) {\n background-color: rgba(33, 107, 165, 0.5);\n}\n.react-datepicker__month--selecting-range :global .react-datepicker__day--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range :global .react-datepicker__month-text--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range :global .react-datepicker__quarter-text--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range :global .react-datepicker__year-text--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range) {\n background-color: #f0f0f0;\n color: #000;\n}\n:global .react-datepicker__day--disabled,\n:global .react-datepicker__month-text--disabled,\n:global .react-datepicker__quarter-text--disabled,\n:global .react-datepicker__year-text--disabled {\n cursor: default;\n color: #ccc;\n}\n:global .react-datepicker__day--disabled:hover,\n:global .react-datepicker__month-text--disabled:hover,\n:global .react-datepicker__quarter-text--disabled:hover,\n:global .react-datepicker__year-text--disabled:hover {\n background-color: transparent;\n}\n:global .react-datepicker__month-text.react-datepicker__month--selected:hover, :global .react-datepicker__month-text.react-datepicker__month--in-range:hover, :global .react-datepicker__month-text.react-datepicker__quarter--selected:hover, :global .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,\n:global .react-datepicker__quarter-text.react-datepicker__month--selected:hover,\n:global .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,\n:global .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,\n:global .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {\n background-color: #216ba5;\n}\n:global .react-datepicker__month-text:hover,\n:global .react-datepicker__quarter-text:hover {\n background-color: #f0f0f0;\n}\n:global .react-datepicker__input-container {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n:global .react-datepicker__year-read-view,\n:global .react-datepicker__month-read-view,\n:global .react-datepicker__month-year-read-view {\n border: 1px solid transparent;\n border-radius: 0.3rem;\n position: relative;\n}\n:global .react-datepicker__year-read-view:hover,\n:global .react-datepicker__month-read-view:hover,\n:global .react-datepicker__month-year-read-view:hover {\n cursor: pointer;\n}\n:global .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n border-top-color: #b3b3b3;\n}\n:global .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view--down-arrow {\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n right: -16px;\n top: 0;\n}\n:global .react-datepicker__year-dropdown,\n:global .react-datepicker__month-dropdown,\n:global .react-datepicker__month-year-dropdown {\n background-color: #f0f0f0;\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:global .react-datepicker__year-dropdown:hover,\n:global .react-datepicker__month-dropdown:hover,\n:global .react-datepicker__month-year-dropdown:hover {\n cursor: pointer;\n}\n:global .react-datepicker__year-dropdown--scrollable,\n:global .react-datepicker__month-dropdown--scrollable,\n:global .react-datepicker__month-year-dropdown--scrollable {\n height: 150px;\n overflow-y: scroll;\n}\n:global .react-datepicker__year-option,\n:global .react-datepicker__month-option,\n:global .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:global .react-datepicker__year-option:first-of-type,\n:global .react-datepicker__month-option:first-of-type,\n:global .react-datepicker__month-year-option:first-of-type {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n}\n:global .react-datepicker__year-option:last-of-type,\n:global .react-datepicker__month-option:last-of-type,\n:global .react-datepicker__month-year-option:last-of-type {\n -webkit-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:global .react-datepicker__year-option:hover,\n:global .react-datepicker__month-option:hover,\n:global .react-datepicker__month-year-option:hover {\n background-color: #ccc;\n}\n:global .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n:global .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n:global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n border-bottom-color: #b3b3b3;\n}\n:global .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n:global .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n:global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n border-top-color: #b3b3b3;\n}\n:global .react-datepicker__year-option--selected,\n:global .react-datepicker__month-option--selected,\n:global .react-datepicker__month-year-option--selected {\n position: absolute;\n left: 15px;\n}\n:global .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:global .react-datepicker__close-icon::after {\n cursor: pointer;\n background-color: #216ba5;\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:global .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:global .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 -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n z-index: 2147483647;\n}\n:global .react-datepicker__portal .react-datepicker__day-name,\n:global .react-datepicker__portal .react-datepicker__day,\n:global .react-datepicker__portal .react-datepicker__time-name {\n width: 3rem;\n line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n :global .react-datepicker__portal .react-datepicker__day-name,\n :global .react-datepicker__portal .react-datepicker__day,\n :global .react-datepicker__portal .react-datepicker__time-name {\n width: 2rem;\n line-height: 2rem;\n }\n}\n:global .react-datepicker__portal .react-datepicker__current-month,\n:global .react-datepicker__portal .react-datepicker-time__header {\n font-size: 1.44rem;\n}\n:global .react-datepicker__children-container {\n width: 13.8rem;\n margin: 0.4rem;\n padding-right: 0.2rem;\n padding-left: 0.2rem;\n height: auto;\n}\n:global .react-datepicker__aria-live {\n position: absolute;\n -webkit-clip-path: circle(0);\n clip-path: circle(0);\n border: 0;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n width: 1px;\n white-space: nowrap;\n}\n/* stylelint-enable */\n.datePickerWrapper {\n display: inline-block;\n}\n.fullWidth {\n display: block;\n width: 100%;\n}\n.datePicker:global(.react-datepicker) {\n --datepicker-cell-size: calc(var(--space-base) * 2.375);\n box-shadow: var(--shadow-base);\n border-color: var(--color-border);\n border-radius: var(--radius-base);\n font-family: var(--typography--fontFamily-normal);\n}\n.datePicker.inline {\n box-shadow: none;\n}\n:global(.react-datepicker__input-container),\n:global(.react-datepicker-wrapper) {\n max-width: 100%;\n}\n.datePickerWrapper :global(.react-datepicker-popper) {\n z-index: var(--elevation-datepicker);\n}\n.datePicker :global(.react-datepicker__header) {\n padding: 0;\n border-bottom: var(--border-base) solid var(--color-border);\n background: var(--color-surface);\n}\n.header {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n.datePicker :global(.react-datepicker__day) {\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: var(--datepicker-cell-size);\n height: var(--datepicker-cell-size);\n margin: 0;\n border-radius: var(--radius-base);\n color: var(--color-heading);\n font-size: var(--typography--fontSize-base);\n line-height: inherit;\n background: var(--color-surface);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.datePicker :global(.react-datepicker__day--highlighted) {\n background: var(--color-surface--active);\n}\n.datePicker :global(.react-datepicker__day--outside-month) {\n border-radius: 0;\n color: var(--color-text);\n background: var(--color-disabled--secondary);\n}\n.datePicker :global(.react-datepicker__day--disabled) {\n color: var(--color-disabled);\n cursor: default;\n}\n.datePicker :global(.react-datepicker__month) {\n margin: 0;\n}\n.datePicker :global(.react-datepicker__day--selected) {\n color: var(--color-text--reverse);\n background: var(--color-interactive);\n}\n.datePicker :global(.react-datepicker__day-names) {\n display: -ms-flexbox;\n display: flex;\n margin: 0;\n padding: var(--space-smallest) 0 0;\n color: var(--color-text);\n font-size: var(--typography--fontSize-small);\n text-transform: uppercase;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.datePicker :global(.react-datepicker__day-name) {\n width: auto;\n color: var(--color-text);\n -ms-flex: 1;\n flex: 1;\n}\n.datePicker :global(.react-datepicker__day):hover,\n.datePicker :global(.react-datepicker__day):focus {\n background: var(--color-surface--hover);\n}\n.datePicker :global(.react-datepicker__day):focus {\n position: relative;\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n.datePicker :global(.react-datepicker__day--selected):hover,\n.datePicker :global(.react-datepicker__day--selected):focus {\n background: var(--color-interactive--hover);\n}\n.datePicker :global(.react-datepicker__day--disabled):hover,\n.datePicker :global(.react-datepicker__day--disabled):focus {\n box-shadow: none;\n background: transparent;\n}\n.datePicker\n :global(\n .react-datepicker__day--disabled.react-datepicker__day--outside-month\n ):hover,\n.datePicker\n :global(\n .react-datepicker__day--disabled.react-datepicker__day--outside-month\n ):focus {\n box-shadow: none;\n background: var(--color-disabled--secondary);\n}\n.month {\n margin-top: var(--space-minuscule);\n color: var(--color-heading);\n}\n";
20
19
  styleInject_es.styleInject(css_248z);
21
20
 
22
21
  function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
23
- return (React__default["default"].createElement("div", { className: styles.header },
22
+ return (React__default["default"].createElement("div", { className: css_248z.header },
24
23
  React__default["default"].createElement(Button.Button, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, icon: "arrowLeft", ariaLabel: "Previous Month", variation: "work", type: "tertiary" }),
25
- React__default["default"].createElement("div", { className: styles.month },
24
+ React__default["default"].createElement("div", { className: css_248z.month },
26
25
  React__default["default"].createElement(Typography.Typography, { element: "span", fontFamily: "display", size: "large" }, monthDate.toLocaleString("en-US", {
27
26
  month: "long",
28
27
  year: "numeric",
@@ -67,7 +66,7 @@ function useFocusOnSelectedDate() {
67
66
  function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, }) {
68
67
  const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
69
68
  const [open, setOpen] = React.useState(false);
70
- const wrapperClassName = classnames__default["default"](styles.datePickerWrapper, {
69
+ const wrapperClassName = classnames__default["default"](css_248z.datePickerWrapper, {
71
70
  // react-datepicker uses this class name to not close the date picker when
72
71
  // the activator is clicked
73
72
  // https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L905
@@ -76,10 +75,10 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
76
75
  // ignored via said class name
77
76
  // https://www.npmjs.com/package/react-onclickoutside#marking-elements-as-skip-over-this-one-during-the-event-loop
78
77
  "react-datepicker-ignore-onclickoutside": !inline,
79
- [styles.fullWidth]: fullWidth,
78
+ [css_248z.fullWidth]: fullWidth,
80
79
  });
81
- const datePickerClassNames = classnames__default["default"](styles.datePicker, {
82
- [styles.inline]: inline,
80
+ const datePickerClassNames = classnames__default["default"](css_248z.datePicker, {
81
+ [css_248z.inline]: inline,
83
82
  });
84
83
  if (smartAutofocus) {
85
84
  jobberHooks.useRefocusOnActivator(open);
package/dist/DescriptionList/index.js CHANGED
@@ -4,19 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
7
- var Typography = require('../Typography-dd9717e7.js');
7
+ var Typography = require('../Typography-7848765d.js');
8
8
  require('classnames');
9
9
 
10
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
11
 
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
- var css_248z = "._2v2alHUPCR1uRMbtusHoPI {\n margin: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n padding: var(--space-small) 0;\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._3F8K2c6jcFhxba3JNK5dok:first-child {\n padding-top: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok:last-child {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n[dir=\"ltr\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n margin-left: 0;\n}\n\n[dir=\"ltr\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n margin-left: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(ltr) {\n margin-left: 0;\n}\n\n[dir=\"rtl\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n margin-right: 0;\n}\n\n[dir=\"rtl\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n margin-right: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(rtl) {\n margin-right: 0;\n}\n\n[dir=\"ltr\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n margin-left: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(ltr) {\n margin-left: 0;\n}\n\n[dir=\"rtl\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n margin-right: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(rtl) {\n margin-right: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd {\n min-width: calc(var(--base-unit) * 7.5);\n box-sizing: border-box;\n padding-right: var(--space-small);\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n -ms-flex: 1 1 40%;\n flex: 1 1 40%;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dt {\n -ms-flex: 1 1 60%;\n flex: 1 1 60%;\n}\n";
15
- var styles = {"descriptionList":"_2v2alHUPCR1uRMbtusHoPI","termGroup":"_3F8K2c6jcFhxba3JNK5dok"};
14
+ var css_248z = ".descriptionList {\n margin: 0;\n}\n\n.termGroup {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n padding: var(--space-small) 0;\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.termGroup:first-child {\n padding-top: 0;\n}\n\n.termGroup:last-child {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n[dir=\"ltr\"] .termGroup dd {\n margin-left: 0;\n}\n\n.termGroup dd:dir(ltr) {\n margin-left: 0;\n}\n\n[dir=\"rtl\"] .termGroup dd {\n margin-right: 0;\n}\n\n.termGroup dd:dir(rtl) {\n margin-right: 0;\n}\n\n.termGroup dd {\n min-width: calc(var(--base-unit) * 7.5);\n box-sizing: border-box;\n padding-right: var(--space-small);\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n -ms-flex: 1 1 40%;\n flex: 1 1 40%;\n}\n\n.termGroup dt {\n -ms-flex: 1 1 60%;\n flex: 1 1 60%;\n}\n";
16
15
  styleInject_es.styleInject(css_248z);
17
16
 
18
17
  function DescriptionList({ data }) {
19
- return (React__default["default"].createElement("dl", { className: styles.descriptionList }, data.map(([term, description]) => (React__default["default"].createElement("div", { key: term, className: styles.termGroup },
18
+ return (React__default["default"].createElement("dl", { className: css_248z.descriptionList }, data.map(([term, description]) => (React__default["default"].createElement("div", { key: term, className: css_248z.termGroup },
20
19
  React__default["default"].createElement(Typography.Typography, { element: "dt", textColor: "heading", size: "base" }, term),
21
20
  React__default["default"].createElement(Typography.Typography, { element: "dd", textColor: "text", size: "base" }, description))))));
22
21
  }
package/dist/Disclosure/index.js CHANGED
@@ -6,7 +6,7 @@ var React = require('react');
6
6
  var jobberHooks = require('@jobber/hooks');
7
7
  var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
8
8
  var Icon = require('../Icon-405a216c.js');
9
- var Typography = require('../Typography-dd9717e7.js');
9
+ var Typography = require('../Typography-7848765d.js');
10
10
  require('@jobber/design');
11
11
  require('classnames');
12
12
 
@@ -14,8 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
14
14
 
15
15
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
16
 
17
- var css_248z = "._359GUq8c3Ojy8ytOlbeU_8 {\n -webkit-transform-origin: 50% 47.5% 0;\n transform-origin: 50% 47.5% 0;\n transition: -webkit-transform var(--timing-quick);\n transition: transform var(--timing-quick);\n transition: transform var(--timing-quick), -webkit-transform var(--timing-quick);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n}\n\n.M6AheKOqP9CP5eAwb3x6r[open] ._359GUq8c3Ojy8ytOlbeU_8 {\n -webkit-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n\n._1YM_nAG8-pDqub2waVYnIF {\n padding: var(--space-smaller) 0 var(--space-smallest) 0;\n border: none;\n list-style: none;\n cursor: pointer;\n outline-color: none;\n transition: background var(--timing-quick), box-shadow var(--timing-base);\n}\n\n._1YM_nAG8-pDqub2waVYnIF::-webkit-details-marker {\n display: none;\n}\n\n._1YM_nAG8-pDqub2waVYnIF:hover,\n._1YM_nAG8-pDqub2waVYnIF:focus {\n background: var(--color-surface--hover);\n}\n\n._1YM_nAG8-pDqub2waVYnIF:focus,\n._1YM_nAG8-pDqub2waVYnIF:active {\n box-shadow: var(--shadow-focus);\n border: none;\n outline: none;\n}\n\n._1YM_nAG8-pDqub2waVYnIF * {\n pointer-events: none;\n}\n\n.QzfYliV58f72hx9_z2PMi {\n -ms-flex-align: baseline;\n align-items: baseline;\n display: -ms-flexbox;\n display: flex;\n}\n\n.QzfYliV58f72hx9_z2PMi h4 {\n -ms-flex: 1 0 0px;\n flex: 1 0 0;\n}\n\n._1tmHsYFm14xDJs73GzHDpJ {\n display: block;\n padding: var(--space-small) 0;\n}\n\n.M6AheKOqP9CP5eAwb3x6r[open] > ._1tmHsYFm14xDJs73GzHDpJ {\n -webkit-animation: _3BXkEbBVu3FDvlRn5fKdbH var(--timing-base);\n animation: _3BXkEbBVu3FDvlRn5fKdbH var(--timing-base);\n}\n\n@-webkit-keyframes _3BXkEbBVu3FDvlRn5fKdbH {\n 0% {\n margin-top: calc(var(--space-small) * -1);\n opacity: 0;\n }\n 100% {\n margin-top: 0px;\n opacity: 1;\n }\n}\n\n@keyframes _3BXkEbBVu3FDvlRn5fKdbH {\n 0% {\n margin-top: calc(var(--space-small) * -1);\n opacity: 0;\n }\n 100% {\n margin-top: 0px;\n opacity: 1;\n }\n}\n";
18
- var styles = {"arrowIconWrapper":"_359GUq8c3Ojy8ytOlbeU_8","details":"M6AheKOqP9CP5eAwb3x6r","summary":"_1YM_nAG8-pDqub2waVYnIF","summaryWrap":"QzfYliV58f72hx9_z2PMi","content":"_1tmHsYFm14xDJs73GzHDpJ","openAnimation":"_3BXkEbBVu3FDvlRn5fKdbH"};
17
+ var css_248z = ".arrowIconWrapper {\n -webkit-transform-origin: 50% 47.5% 0;\n transform-origin: 50% 47.5% 0;\n transition: -webkit-transform var(--timing-quick);\n transition: transform var(--timing-quick);\n transition: transform var(--timing-quick), -webkit-transform var(--timing-quick);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n}\n\n.details[open] .arrowIconWrapper {\n -webkit-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n\n.summary {\n padding: var(--space-smaller) 0 var(--space-smallest) 0;\n border: none;\n list-style: none;\n cursor: pointer;\n outline-color: none;\n transition: background var(--timing-quick), box-shadow var(--timing-base);\n}\n\n.summary::-webkit-details-marker {\n display: none;\n}\n\n.summary:hover,\n.summary:focus {\n background: var(--color-surface--hover);\n}\n\n.summary:focus,\n.summary:active {\n box-shadow: var(--shadow-focus);\n border: none;\n outline: none;\n}\n\n.summary * {\n pointer-events: none;\n}\n\n.summaryWrap {\n -ms-flex-align: baseline;\n align-items: baseline;\n display: -ms-flexbox;\n display: flex;\n}\n\n.summaryWrap h4 {\n -ms-flex: 1 0 0px;\n flex: 1 0 0;\n}\n\n.content {\n display: block;\n padding: var(--space-small) 0;\n}\n\n.details[open] > .content {\n -webkit-animation: openAnimation var(--timing-base);\n animation: openAnimation var(--timing-base);\n}\n\n@-webkit-keyframes openAnimation {\n 0% {\n margin-top: calc(var(--space-small) * -1);\n opacity: 0;\n }\n 100% {\n margin-top: 0px;\n opacity: 1;\n }\n}\n\n@keyframes openAnimation {\n 0% {\n margin-top: calc(var(--space-small) * -1);\n opacity: 0;\n }\n 100% {\n margin-top: 0px;\n opacity: 1;\n }\n}\n";
19
18
  styleInject_es.styleInject(css_248z);
20
19
 
21
20
  function Disclosure({ children, title, defaultOpen = false, }) {
@@ -26,13 +25,13 @@ function Disclosure({ children, title, defaultOpen = false, }) {
26
25
  React.useEffect(() => {
27
26
  setMount(true);
28
27
  }, []);
29
- return (React__default["default"].createElement("details", { open: isOpen, onToggle: onToggle, className: styles.details },
30
- React__default["default"].createElement("summary", { className: styles.summary },
31
- React__default["default"].createElement("div", { className: styles.summaryWrap, ref: titleRef },
28
+ return (React__default["default"].createElement("details", { open: isOpen, onToggle: onToggle, className: css_248z.details },
29
+ React__default["default"].createElement("summary", { className: css_248z.summary },
30
+ React__default["default"].createElement("div", { className: css_248z.summaryWrap, ref: titleRef },
32
31
  React__default["default"].createElement(Typography.Typography, { element: "h4", size: isBelowBreakpoint ? "base" : "large", fontWeight: "bold", textColor: "heading" }, title),
33
- React__default["default"].createElement("span", { className: styles.arrowIconWrapper },
32
+ React__default["default"].createElement("span", { className: css_248z.arrowIconWrapper },
34
33
  React__default["default"].createElement(Icon.Icon, { size: "large", name: "arrowDown", color: "green" })))),
35
- React__default["default"].createElement("span", { className: styles.content }, children)));
34
+ React__default["default"].createElement("span", { className: css_248z.content }, children)));
36
35
  function onToggle(event) {
37
36
  event.preventDefault();
38
37
  const { open: currentToggleState } = event.target;
package/dist/Divider/index.js CHANGED
@@ -11,17 +11,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
13
13
 
14
- var css_248z = "._1lHHuy-WH0jlwJ_lGhdiii {\n --divider-width: var(--border-base);\n --divider-color: var(--color-border);\n margin: 0;\n padding: 0;\n border: none;\n}\n\n._1La5_WQqF0YS39yJ_pZZ3e {\n --divider-width: var(--border-thick);\n opacity: 0.875;\n}\n\n._3ZdPUgFJAWOcd4dAR08Wlc {\n --divider-width: var(--border-thicker);\n opacity: 0.625;\n}\n\n.siB9kwvA8N088YvEHsPgj {\n --divider-width: var(--border-thickest);\n opacity: 0.375;\n}\n\n._2OCfx1xRlcq8zW27BOHOD8 {\n height: var(--space-minuscule);\n border-bottom: var(--divider-width) solid var(--divider-color);\n}\n\n.gxDpfq11BuK6UcrhdsKuQ {\n width: var(--space-miniscule);\n height: auto;\n border-right: var(--divider-width) solid var(--divider-color);\n}\n";
15
- var styles = {"divider":"_1lHHuy-WH0jlwJ_lGhdiii","large":"_1La5_WQqF0YS39yJ_pZZ3e","larger":"_3ZdPUgFJAWOcd4dAR08Wlc","largest":"siB9kwvA8N088YvEHsPgj","horizontal":"_2OCfx1xRlcq8zW27BOHOD8","vertical":"gxDpfq11BuK6UcrhdsKuQ"};
14
+ var css_248z = ".divider {\n --divider-width: var(--border-base);\n --divider-color: var(--color-border);\n margin: 0;\n padding: 0;\n border: none;\n}\n\n.large {\n --divider-width: var(--border-thick);\n opacity: 0.875;\n}\n\n.larger {\n --divider-width: var(--border-thicker);\n opacity: 0.625;\n}\n\n.largest {\n --divider-width: var(--border-thickest);\n opacity: 0.375;\n}\n\n.horizontal {\n height: var(--space-minuscule);\n border-bottom: var(--divider-width) solid var(--divider-color);\n}\n\n.vertical {\n width: var(--space-miniscule);\n height: auto;\n border-right: var(--divider-width) solid var(--divider-color);\n}\n";
16
15
  styleInject_es.styleInject(css_248z);
17
16
 
18
17
  function Divider({ size = "base", direction = "horizontal", }) {
19
- const className = classnames__default["default"](styles.divider, {
20
- [styles.large]: size === "large",
21
- [styles.larger]: size === "larger",
22
- [styles.largest]: size === "largest",
23
- [styles.horizontal]: direction == "horizontal",
24
- [styles.vertical]: direction == "vertical",
18
+ const className = classnames__default["default"](css_248z.divider, {
19
+ [css_248z.large]: size === "large",
20
+ [css_248z.larger]: size === "larger",
21
+ [css_248z.largest]: size === "largest",
22
+ [css_248z.horizontal]: direction == "horizontal",
23
+ [css_248z.vertical]: direction == "vertical",
25
24
  });
26
25
  return React__default["default"].createElement("div", { className: className, role: "none presentation" });
27
26
  }
package/dist/Drawer/index.js CHANGED
@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var classnames = require('classnames');
7
7
  var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
8
- var Heading = require('../Heading-8c6e4e0b.js');
9
- var ButtonDismiss = require('../ButtonDismiss-d2d16622.js');
10
- require('../Typography-dd9717e7.js');
11
- require('../Button-186ef2c1.js');
8
+ var Heading = require('../Heading-1a5bf504.js');
9
+ var ButtonDismiss = require('../ButtonDismiss-e2453670.js');
10
+ require('../Typography-7848765d.js');
11
+ require('../Button-21c7bf89.js');
12
12
  require('react-router-dom');
13
13
  require('../Icon-405a216c.js');
14
14
  require('@jobber/design');
@@ -18,27 +18,26 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
18
18
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
19
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
20
20
 
21
- var css_248z$1 = ":root {\n --drawer-width: calc(var(--space-base) * 17.5);\n --drawer--base-padding: var(--space-base);\n}\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n display: none;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-modal);\n overflow: hidden\n}\n\n@media (min-width: 640px), print {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n position: relative;\n z-index: auto;\n width: calc(var(--space-base) * 17.5);\n width: calc(var(--space-base) * 17.5);\n width: var(--drawer-width)\n}\n }\n\n@media (min-width: 640px), print {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n position: relative;\n z-index: auto;\n width: calc(var(--space-base) * 17.5);\n width: calc(var(--space-base) * 17.5);\n width: var(--drawer-width)\n}\n }\n\n@media (--medium-screens), print {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n position: relative;\n z-index: auto;\n width: calc(var(--space-base) * 17.5);\n width: calc(var(--space-base) * 17.5);\n width: var(--drawer-width)\n}\n }\n\n@media (min-width: 1024px) {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n --drawer-width: calc(var(--space-base) * 26.25)\n}\n }\n\n@media (min-width: 1024px) {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n --drawer-width: calc(var(--space-base) * 26.25)\n}\n }\n\n@media (--wide-screens) {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n --drawer-width: calc(var(--space-base) * 26.25)\n}\n }\n\n._2nsJzlCbORiq2Zp1r2Zfjq {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: var(--border-base) solid var(--color-border);\n background-color: var(--color-surface);\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.BVcThJJ-WMJCtzGk9CfUq {\n display: -ms-flexbox;\n display: flex;\n}\n\n._1ql7AVWGaU-1bl2yZegFqH {\n display: -ms-flexbox;\n display: flex;\n padding: var(--space-small) var(--space-base);\n padding: var(--space-small) var(--space-base);\n padding: var(--space-small) var(--drawer--base-padding);\n background-color: var(--color-surface--background);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.axZAc8S3vSa8nFC4yMJaW {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n height: 100%;\n -ms-flex-direction: row;\n flex-direction: row;\n overflow-y: auto;\n}\n\n._3MACAQEV8zhNH4_KtJ0DiM {\n width: 100%;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._3MACAQEV8zhNH4_KtJ0DiM > * {\n --public-content--padding: var(--drawer--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._3MACAQEV8zhNH4_KtJ0DiM > * > * {\n --public-content--padding: 0;\n}\n";
22
- var styles$1 = {"container":"_3XszLcqw8Bk5bbTId3P8ZV","drawer":"_2nsJzlCbORiq2Zp1r2Zfjq","open":"BVcThJJ-WMJCtzGk9CfUq","header":"_1ql7AVWGaU-1bl2yZegFqH","contentScroll":"axZAc8S3vSa8nFC4yMJaW","content":"_3MACAQEV8zhNH4_KtJ0DiM"};
21
+ var css_248z$1 = ":root {\n --drawer-width: calc(var(--space-base) * 17.5);\n --drawer--base-padding: var(--space-base);\n}\n\n.container {\n display: none;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-modal);\n overflow: hidden\n}\n\n@media (min-width: 640px), print {\n\n.container {\n position: relative;\n z-index: auto;\n width: calc(var(--space-base) * 17.5);\n width: var(--drawer-width)\n}\n }\n\n@media (--medium-screens), print {\n\n.container {\n position: relative;\n z-index: auto;\n width: calc(var(--space-base) * 17.5);\n width: var(--drawer-width)\n}\n }\n\n@media (min-width: 1024px) {\n\n.container {\n --drawer-width: calc(var(--space-base) * 26.25)\n}\n }\n\n@media (--wide-screens) {\n\n.container {\n --drawer-width: calc(var(--space-base) * 26.25)\n}\n }\n\n.drawer {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: var(--border-base) solid var(--color-border);\n background-color: var(--color-surface);\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.open {\n display: -ms-flexbox;\n display: flex;\n}\n\n.header {\n display: -ms-flexbox;\n display: flex;\n padding: var(--space-small) var(--space-base);\n padding: var(--space-small) var(--drawer--base-padding);\n background-color: var(--color-surface--background);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contentScroll {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n height: 100%;\n -ms-flex-direction: row;\n flex-direction: row;\n overflow-y: auto;\n}\n\n.content {\n width: 100%;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n.content > * {\n --public-content--padding: var(--drawer--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.content > * > * {\n --public-content--padding: 0;\n}\n";
23
22
  styleInject_es.styleInject(css_248z$1);
24
23
 
25
24
  function Drawer({ title, children, open = true, onRequestClose, id, }) {
26
- const drawerClassNames = classnames__default["default"](styles$1.container, open && styles$1.open);
25
+ const drawerClassNames = classnames__default["default"](css_248z$1.container, open && css_248z$1.open);
27
26
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
28
27
  React__default["default"].createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
29
- React__default["default"].createElement("div", { className: styles$1.drawer },
28
+ React__default["default"].createElement("div", { className: css_248z$1.drawer },
30
29
  React__default["default"].createElement(Header, { title: title, onRequestClose: onRequestClose }),
31
- React__default["default"].createElement("div", { className: styles$1.contentScroll },
32
- React__default["default"].createElement("div", { className: styles$1.content }, children))))));
30
+ React__default["default"].createElement("div", { className: css_248z$1.contentScroll },
31
+ React__default["default"].createElement("div", { className: css_248z$1.content }, children))))));
33
32
  }
34
33
  function Header({ title, onRequestClose }) {
35
- return (React__default["default"].createElement("div", { className: styles$1.header, "data-testid": "drawer-header" },
34
+ return (React__default["default"].createElement("div", { className: css_248z$1.header, "data-testid": "drawer-header" },
36
35
  React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
37
36
  React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
38
37
  }
39
38
 
40
- var css_248z = ".Sc90BtF67zpsMHXh3g9kq {\n display: grid;\n width: 100%;\n height: 100%;\n overflow: hidden;\n grid-template-columns: minmax(0, 1fr) minmax(-webkit-min-content, -webkit-max-content);\n grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content);\n grid-template-rows: 1fr;\n}\n";
41
- var styles = {"drawerGrid":"Sc90BtF67zpsMHXh3g9kq"};
39
+ var css_248z = "._50Jq09W07gg- {\n display: grid;\n width: 100%;\n height: 100%;\n overflow: hidden;\n grid-template-columns: minmax(0, 1fr) minmax(-webkit-min-content, -webkit-max-content);\n grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content);\n grid-template-rows: 1fr;\n}\n";
40
+ var styles = {"drawerGrid":"_50Jq09W07gg-"};
42
41
  styleInject_es.styleInject(css_248z);
43
42
 
44
43
  function DrawerGrid({ children }) {
package/dist/Emphasis/index.js CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Emphasis = require('../Emphasis-53e963b5.js');
5
+ var Emphasis = require('../Emphasis-3cfd55cf.js');
6
6
  require('react');
7
- require('../Typography-dd9717e7.js');
7
+ require('../Typography-7848765d.js');
8
8
  require('classnames');
9
9
  require('../style-inject.es-9d2f5f4e.js');
10
10
 
package/dist/{Emphasis-53e963b5.js → Emphasis-3cfd55cf.js} RENAMED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
- var Typography = require('./Typography-dd9717e7.js');
4
+ var Typography = require('./Typography-7848765d.js');
5
5
 
6
6
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
7
7
 
package/dist/FeatureSwitch/index.js CHANGED
@@ -6,14 +6,14 @@ var React = require('react');
6
6
  var framerMotion = require('framer-motion');
7
7
  var classnames = require('classnames');
8
8
  var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
9
- var Heading = require('../Heading-8c6e4e0b.js');
10
- var Text = require('../Text-4c04ddc3.js');
11
- var Content = require('../Content-af82acba.js');
12
- var Switch = require('../Switch-21d7093a.js');
13
- var Button = require('../Button-186ef2c1.js');
14
- var Emphasis = require('../Emphasis-53e963b5.js');
15
- var Markdown = require('../Markdown-5d86d6e7.js');
16
- require('../Typography-dd9717e7.js');
9
+ var Heading = require('../Heading-1a5bf504.js');
10
+ var Text = require('../Text-bc836227.js');
11
+ var Content = require('../Content-373bbaee.js');
12
+ var Switch = require('../Switch-a579f319.js');
13
+ var Button = require('../Button-21c7bf89.js');
14
+ var Emphasis = require('../Emphasis-3cfd55cf.js');
15
+ var Markdown = require('../Markdown-f8b1c2cf.js');
16
+ require('../Typography-7848765d.js');
17
17
  require('react-router-dom');
18
18
  require('../Icon-405a216c.js');
19
19
  require('@jobber/design');
@@ -24,24 +24,23 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
24
24
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
25
25
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
26
26
 
27
- var css_248z = "._2wLd_KRTNAGUWLuHUk3oW {\n display: -ms-flexbox;\n display: flex;\n}\n\n._3S4AEFcAzye_0NKuyb26Pt {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-item-align: center;\n align-self: center;\n padding-right: var(--space-base);\n transition: opacity var(--timing-base);\n}\n\n._3fTQ2YTOZjh3z63IpmHOEX {\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n -ms-flex-item-align: start;\n align-self: flex-start;\n position: relative;\n}\n\n.vVv_rOT7pURJPkU4rvJPE {\n position: absolute;\n top: 100%;\n width: 100%;\n margin-top: var(--space-smallest);\n text-align: center;\n}\n\n.f8zTHuP6EgBAklxGjSv1O {\n opacity: 0.5;\n}\n\n.NweVtD0555WFOwkVpskgX {\n opacity: 1;\n}\n";
28
- var styles = {"container":"_2wLd_KRTNAGUWLuHUk3oW","content":"_3S4AEFcAzye_0NKuyb26Pt","action":"_3fTQ2YTOZjh3z63IpmHOEX","savedIndicator":"vVv_rOT7pURJPkU4rvJPE","featureContent":"f8zTHuP6EgBAklxGjSv1O","enabled":"NweVtD0555WFOwkVpskgX"};
27
+ var css_248z = ".container {\n display: -ms-flexbox;\n display: flex;\n}\n\n.content {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-item-align: center;\n align-self: center;\n padding-right: var(--space-base);\n transition: opacity var(--timing-base);\n}\n\n.action {\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n -ms-flex-item-align: start;\n align-self: flex-start;\n position: relative;\n}\n\n.savedIndicator {\n position: absolute;\n top: 100%;\n width: 100%;\n margin-top: var(--space-smallest);\n text-align: center;\n}\n\n.featureContent {\n opacity: 0.5;\n}\n\n.enabled {\n opacity: 1;\n}\n";
29
28
  styleInject_es.styleInject(css_248z);
30
29
 
31
30
  function FeatureSwitch({ children, description, disabled = false, enabled, externalLink = false, onEdit, onSwitch, hasSaveIndicator = false, title, }) {
32
31
  const [savedIndicator, setSavedIndicator] = React.useState(false);
33
- const featureContentClassnames = classnames__default["default"](styles.featureContent, styles.content, enabled && styles.enabled);
32
+ const featureContentClassnames = classnames__default["default"](css_248z.featureContent, css_248z.content, enabled && css_248z.enabled);
34
33
  shouldShowSavedIndicator();
35
34
  return (React__default["default"].createElement(Content.Content, null,
36
- React__default["default"].createElement("div", { className: styles.container },
37
- React__default["default"].createElement("div", { className: styles.content },
35
+ React__default["default"].createElement("div", { className: css_248z.container },
36
+ React__default["default"].createElement("div", { className: css_248z.content },
38
37
  React__default["default"].createElement(Content.Content, null,
39
38
  title && React__default["default"].createElement(Heading.Heading, { level: 4 }, title),
40
39
  description && (React__default["default"].createElement(Text.Text, null,
41
40
  React__default["default"].createElement(Markdown.Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
42
- onSwitch && (React__default["default"].createElement("div", { className: styles.action },
41
+ onSwitch && (React__default["default"].createElement("div", { className: css_248z.action },
43
42
  React__default["default"].createElement(Switch.Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
44
- React__default["default"].createElement(framerMotion.AnimatePresence, null, hasSaveIndicator && savedIndicator && (React__default["default"].createElement(framerMotion.motion.div, { className: styles.savedIndicator, initial: { y: -4, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -4, opacity: 0 }, transition: {
43
+ React__default["default"].createElement(framerMotion.AnimatePresence, null, hasSaveIndicator && savedIndicator && (React__default["default"].createElement(framerMotion.motion.div, { className: css_248z.savedIndicator, initial: { y: -4, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -4, opacity: 0 }, transition: {
45
44
  delay: 0.2,
46
45
  type: "spring",
47
46
  damping: 20,
@@ -49,9 +48,9 @@ function FeatureSwitch({ children, description, disabled = false, enabled, exter
49
48
  }, onAnimationComplete: handleAnimationComplete },
50
49
  React__default["default"].createElement(Text.Text, { variation: "success" },
51
50
  React__default["default"].createElement(Emphasis.Emphasis, { variation: "italic" }, "Saved")))))))),
52
- (children || onEdit) && (React__default["default"].createElement("div", { className: styles.container },
51
+ (children || onEdit) && (React__default["default"].createElement("div", { className: css_248z.container },
53
52
  children && (React__default["default"].createElement("div", { className: featureContentClassnames }, children)),
54
- onEdit && (React__default["default"].createElement("div", { className: styles.action },
53
+ onEdit && (React__default["default"].createElement("div", { className: css_248z.action },
55
54
  React__default["default"].createElement(Button.Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
56
55
  function shouldShowSavedIndicator() {
57
56
  // Check if the component is mounted
package/dist/FormField/index.js CHANGED
@@ -2,22 +2,22 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var FormField = require('../FormField-e1c3af82.js');
5
+ var FormField = require('../FormField-e8371105.js');
6
6
  require('../tslib.es6-5b8768b7.js');
7
7
  require('react');
8
8
  require('uuid');
9
9
  require('react-hook-form');
10
10
  require('../style-inject.es-9d2f5f4e.js');
11
11
  require('classnames');
12
- require('../Button-186ef2c1.js');
12
+ require('../Button-21c7bf89.js');
13
13
  require('react-router-dom');
14
14
  require('../Icon-405a216c.js');
15
15
  require('@jobber/design');
16
- require('../Typography-dd9717e7.js');
17
- require('../Text-4c04ddc3.js');
18
- require('../InputValidation-e09f5d20.js');
16
+ require('../Typography-7848765d.js');
17
+ require('../Text-bc836227.js');
18
+ require('../InputValidation-2d104d5d.js');
19
19
  require('framer-motion');
20
- require('../Spinner-35cee923.js');
20
+ require('../Spinner-aca146ee.js');
21
21
 
22
22
 
23
23