@jobber/components 4.2.3-pre.2 → 4.3.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 (97) hide show
  1. package/dist/Autocomplete/index.js +22 -21
  2. package/dist/Avatar/index.js +1 -1
  3. package/dist/Avatar-01c5ba8b.js +78 -0
  4. package/dist/Banner/index.js +13 -11
  5. package/dist/Button/index.js +2 -2
  6. package/dist/Button-186ef2c1.js +57 -0
  7. package/dist/ButtonDismiss/index.js +3 -3
  8. package/dist/{ButtonDismiss-bc13d061.js → ButtonDismiss-d2d16622.js} +1 -1
  9. package/dist/Card/index.js +5 -5
  10. package/dist/Card-c0f88c0f.js +93 -0
  11. package/dist/Checkbox/index.js +3 -3
  12. package/dist/Checkbox-1df46a4a.js +40 -0
  13. package/dist/Chips/index.js +30 -28
  14. package/dist/ConfirmationModal/index.js +10 -10
  15. package/dist/{ConfirmationModal-c8b6667c.js → ConfirmationModal-ac668c46.js} +3 -3
  16. package/dist/Content/index.js +1 -1
  17. package/dist/Content-af82acba.js +25 -0
  18. package/dist/DataDump/index.js +7 -7
  19. package/dist/DataTable/index.js +40 -36
  20. package/dist/DatePicker/index.js +3 -3
  21. package/dist/{DatePicker-f62e2518.js → DatePicker-90d542d7.js} +10 -9
  22. package/dist/DescriptionList/index.js +4 -3
  23. package/dist/Disclosure/index.js +8 -7
  24. package/dist/Divider/index.js +8 -7
  25. package/dist/Drawer/index.js +13 -12
  26. package/dist/Emphasis/index.js +2 -2
  27. package/dist/{Emphasis-ec5bfff3.js → Emphasis-53e963b5.js} +1 -1
  28. package/dist/FeatureSwitch/index.js +17 -16
  29. package/dist/FormField/index.js +6 -6
  30. package/dist/FormField-e1c3af82.js +205 -0
  31. package/dist/FormatEmail/index.js +3 -2
  32. package/dist/FormatFile/index.js +12 -12
  33. package/dist/FormatFile-42ea7a6a.js +105 -0
  34. package/dist/Gallery/index.js +17 -16
  35. package/dist/Heading/index.js +2 -2
  36. package/dist/{Heading-19272e83.js → Heading-8c6e4e0b.js} +1 -1
  37. package/dist/InlineLabel/index.js +4 -3
  38. package/dist/InputAvatar/index.js +12 -11
  39. package/dist/InputDate/index.js +7 -7
  40. package/dist/InputEmail/index.js +6 -6
  41. package/dist/InputFile/InputFile.d.ts +4 -0
  42. package/dist/InputFile/index.js +4 -4
  43. package/dist/{InputFile-b794ada2.js → InputFile-4932c979.js} +9 -8
  44. package/dist/InputGroup/index.js +3 -2
  45. package/dist/InputNumber/index.js +6 -6
  46. package/dist/InputPassword/index.js +6 -6
  47. package/dist/InputText/index.js +7 -7
  48. package/dist/{InputText-f8db1a9d.js → InputText-3ac6b3a9.js} +1 -1
  49. package/dist/InputTime/index.js +6 -6
  50. package/dist/InputValidation/index.js +3 -3
  51. package/dist/{InputValidation-96fa6b11.js → InputValidation-e09f5d20.js} +4 -3
  52. package/dist/LightBox/index.js +4 -4
  53. package/dist/{LightBox-44108d9c.js → LightBox-8472bc9d.js} +13 -12
  54. package/dist/List/index.js +22 -19
  55. package/dist/Markdown/index.js +6 -6
  56. package/dist/{Markdown-b38da515.js → Markdown-5d86d6e7.js} +4 -4
  57. package/dist/Menu/index.js +3 -3
  58. package/dist/Menu-b5e8d8f9.js +129 -0
  59. package/dist/Modal/index.js +5 -5
  60. package/dist/Modal-e41f9284.js +69 -0
  61. package/dist/MultiSelect/index.js +15 -13
  62. package/dist/{Option-7e17c787.js → Option-9e93d069.js} +1 -1
  63. package/dist/Page/index.js +20 -19
  64. package/dist/Popover/index.js +8 -7
  65. package/dist/ProgressBar/index.js +1 -1
  66. package/dist/ProgressBar-d3178aa9.js +28 -0
  67. package/dist/RadioGroup/index.js +8 -7
  68. package/dist/Select/index.js +7 -7
  69. package/dist/Spinner/index.js +1 -1
  70. package/dist/Spinner-35cee923.js +24 -0
  71. package/dist/StatusLabel/index.js +6 -5
  72. package/dist/Switch/index.js +2 -2
  73. package/dist/Switch-21d7093a.js +56 -0
  74. package/dist/Table/index.js +10 -8
  75. package/dist/Tabs/index.js +10 -9
  76. package/dist/Text/index.js +2 -2
  77. package/dist/{Text-1c12d786.js → Text-4c04ddc3.js} +1 -1
  78. package/dist/Toast/index.js +10 -9
  79. package/dist/Tooltip/index.js +3 -3
  80. package/dist/{Tooltip-8531962b.js → Tooltip-27720f96.js} +7 -6
  81. package/dist/Typography/index.js +1 -1
  82. package/dist/Typography-dd9717e7.js +62 -0
  83. package/package.json +8 -8
  84. package/rollup.config.js +1 -2
  85. package/dist/Avatar-99324b59.js +0 -77
  86. package/dist/Button-1063207a.js +0 -56
  87. package/dist/Card-e9b9b7c9.js +0 -91
  88. package/dist/Checkbox-ab8fb96e.js +0 -39
  89. package/dist/Content-373bbaee.js +0 -23
  90. package/dist/FormField-a62cc4de.js +0 -204
  91. package/dist/FormatFile-0a4835e5.js +0 -103
  92. package/dist/Menu-be1689cd.js +0 -128
  93. package/dist/Modal-2769f7e5.js +0 -67
  94. package/dist/ProgressBar-ef96b716.js +0 -26
  95. package/dist/Spinner-aca146ee.js +0 -23
  96. package/dist/Switch-061430f9.js +0 -55
  97. package/dist/Typography-01077f8f.js +0 -53
package/dist/{DatePicker-f62e2518.js → DatePicker-90d542d7.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-01077f8f.js');
9
- var Button = require('./Button-1063207a.js');
8
+ var Typography = require('./Typography-dd9717e7.js');
9
+ var Button = require('./Button-186ef2c1.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,13 +15,14 @@ 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.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";
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"};
19
20
  styleInject_es.styleInject(css_248z);
20
21
 
21
22
  function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
22
- return (React__default["default"].createElement("div", { className: css_248z.header },
23
+ return (React__default["default"].createElement("div", { className: styles.header },
23
24
  React__default["default"].createElement(Button.Button, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, icon: "arrowLeft", ariaLabel: "Previous Month", variation: "work", type: "tertiary" }),
24
- React__default["default"].createElement("div", { className: css_248z.month },
25
+ React__default["default"].createElement("div", { className: styles.month },
25
26
  React__default["default"].createElement(Typography.Typography, { element: "span", fontFamily: "display", size: "large" }, monthDate.toLocaleString("en-US", {
26
27
  month: "long",
27
28
  year: "numeric",
@@ -66,7 +67,7 @@ function useFocusOnSelectedDate() {
66
67
  function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, }) {
67
68
  const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
68
69
  const [open, setOpen] = React.useState(false);
69
- const wrapperClassName = classnames__default["default"](css_248z.datePickerWrapper, {
70
+ const wrapperClassName = classnames__default["default"](styles.datePickerWrapper, {
70
71
  // react-datepicker uses this class name to not close the date picker when
71
72
  // the activator is clicked
72
73
  // https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L905
@@ -75,10 +76,10 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
75
76
  // ignored via said class name
76
77
  // https://www.npmjs.com/package/react-onclickoutside#marking-elements-as-skip-over-this-one-during-the-event-loop
77
78
  "react-datepicker-ignore-onclickoutside": !inline,
78
- [css_248z.fullWidth]: fullWidth,
79
+ [styles.fullWidth]: fullWidth,
79
80
  });
80
- const datePickerClassNames = classnames__default["default"](css_248z.datePicker, {
81
- [css_248z.inline]: inline,
81
+ const datePickerClassNames = classnames__default["default"](styles.datePicker, {
82
+ [styles.inline]: inline,
82
83
  });
83
84
  if (smartAutofocus) {
84
85
  jobberHooks.useRefocusOnActivator(open);
package/dist/DescriptionList/index.js CHANGED
@@ -4,18 +4,19 @@ 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-01077f8f.js');
7
+ var Typography = require('../Typography-dd9717e7.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 = ".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";
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"};
15
16
  styleInject_es.styleInject(css_248z);
16
17
 
17
18
  function DescriptionList({ data }) {
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 },
19
+ return (React__default["default"].createElement("dl", { className: styles.descriptionList }, data.map(([term, description]) => (React__default["default"].createElement("div", { key: term, className: styles.termGroup },
19
20
  React__default["default"].createElement(Typography.Typography, { element: "dt", textColor: "heading", size: "base" }, term),
20
21
  React__default["default"].createElement(Typography.Typography, { element: "dd", textColor: "text", size: "base" }, description))))));
21
22
  }
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-01077f8f.js');
9
+ var Typography = require('../Typography-dd9717e7.js');
10
10
  require('@jobber/design');
11
11
  require('classnames');
12
12
 
@@ -14,7 +14,8 @@ 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 = ".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";
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"};
18
19
  styleInject_es.styleInject(css_248z);
19
20
 
20
21
  function Disclosure({ children, title, defaultOpen = false, }) {
@@ -25,13 +26,13 @@ function Disclosure({ children, title, defaultOpen = false, }) {
25
26
  React.useEffect(() => {
26
27
  setMount(true);
27
28
  }, []);
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 },
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 },
31
32
  React__default["default"].createElement(Typography.Typography, { element: "h4", size: isBelowBreakpoint ? "base" : "large", fontWeight: "bold", textColor: "heading" }, title),
32
- React__default["default"].createElement("span", { className: css_248z.arrowIconWrapper },
33
+ React__default["default"].createElement("span", { className: styles.arrowIconWrapper },
33
34
  React__default["default"].createElement(Icon.Icon, { size: "large", name: "arrowDown", color: "green" })))),
34
- React__default["default"].createElement("span", { className: css_248z.content }, children)));
35
+ React__default["default"].createElement("span", { className: styles.content }, children)));
35
36
  function onToggle(event) {
36
37
  event.preventDefault();
37
38
  const { open: currentToggleState } = event.target;
package/dist/Divider/index.js CHANGED
@@ -11,16 +11,17 @@ 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 = ".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";
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"};
15
16
  styleInject_es.styleInject(css_248z);
16
17
 
17
18
  function Divider({ size = "base", direction = "horizontal", }) {
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",
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",
24
25
  });
25
26
  return React__default["default"].createElement("div", { className: className, role: "none presentation" });
26
27
  }
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-19272e83.js');
9
- var ButtonDismiss = require('../ButtonDismiss-bc13d061.js');
10
- require('../Typography-01077f8f.js');
11
- require('../Button-1063207a.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');
12
12
  require('react-router-dom');
13
13
  require('../Icon-405a216c.js');
14
14
  require('@jobber/design');
@@ -18,26 +18,27 @@ 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.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";
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"};
22
23
  styleInject_es.styleInject(css_248z$1);
23
24
 
24
25
  function Drawer({ title, children, open = true, onRequestClose, id, }) {
25
- const drawerClassNames = classnames__default["default"](css_248z$1.container, open && css_248z$1.open);
26
+ const drawerClassNames = classnames__default["default"](styles$1.container, open && styles$1.open);
26
27
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
27
28
  React__default["default"].createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
28
- React__default["default"].createElement("div", { className: css_248z$1.drawer },
29
+ React__default["default"].createElement("div", { className: styles$1.drawer },
29
30
  React__default["default"].createElement(Header, { title: title, onRequestClose: onRequestClose }),
30
- React__default["default"].createElement("div", { className: css_248z$1.contentScroll },
31
- React__default["default"].createElement("div", { className: css_248z$1.content }, children))))));
31
+ React__default["default"].createElement("div", { className: styles$1.contentScroll },
32
+ React__default["default"].createElement("div", { className: styles$1.content }, children))))));
32
33
  }
33
34
  function Header({ title, onRequestClose }) {
34
- return (React__default["default"].createElement("div", { className: css_248z$1.header, "data-testid": "drawer-header" },
35
+ return (React__default["default"].createElement("div", { className: styles$1.header, "data-testid": "drawer-header" },
35
36
  React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
36
37
  React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
37
38
  }
38
39
 
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-"};
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"};
41
42
  styleInject_es.styleInject(css_248z);
42
43
 
43
44
  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-ec5bfff3.js');
5
+ var Emphasis = require('../Emphasis-53e963b5.js');
6
6
  require('react');
7
- require('../Typography-01077f8f.js');
7
+ require('../Typography-dd9717e7.js');
8
8
  require('classnames');
9
9
  require('../style-inject.es-9d2f5f4e.js');
10
10
 
package/dist/{Emphasis-ec5bfff3.js → Emphasis-53e963b5.js} RENAMED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
- var Typography = require('./Typography-01077f8f.js');
4
+ var Typography = require('./Typography-dd9717e7.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-19272e83.js');
10
- var Text = require('../Text-1c12d786.js');
11
- var Content = require('../Content-373bbaee.js');
12
- var Switch = require('../Switch-061430f9.js');
13
- var Button = require('../Button-1063207a.js');
14
- var Emphasis = require('../Emphasis-ec5bfff3.js');
15
- var Markdown = require('../Markdown-b38da515.js');
16
- require('../Typography-01077f8f.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');
17
17
  require('react-router-dom');
18
18
  require('../Icon-405a216c.js');
19
19
  require('@jobber/design');
@@ -24,23 +24,24 @@ 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 = ".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";
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"};
28
29
  styleInject_es.styleInject(css_248z);
29
30
 
30
31
  function FeatureSwitch({ children, description, disabled = false, enabled, externalLink = false, onEdit, onSwitch, hasSaveIndicator = false, title, }) {
31
32
  const [savedIndicator, setSavedIndicator] = React.useState(false);
32
- const featureContentClassnames = classnames__default["default"](css_248z.featureContent, css_248z.content, enabled && css_248z.enabled);
33
+ const featureContentClassnames = classnames__default["default"](styles.featureContent, styles.content, enabled && styles.enabled);
33
34
  shouldShowSavedIndicator();
34
35
  return (React__default["default"].createElement(Content.Content, null,
35
- React__default["default"].createElement("div", { className: css_248z.container },
36
- React__default["default"].createElement("div", { className: css_248z.content },
36
+ React__default["default"].createElement("div", { className: styles.container },
37
+ React__default["default"].createElement("div", { className: styles.content },
37
38
  React__default["default"].createElement(Content.Content, null,
38
39
  title && React__default["default"].createElement(Heading.Heading, { level: 4 }, title),
39
40
  description && (React__default["default"].createElement(Text.Text, null,
40
41
  React__default["default"].createElement(Markdown.Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
41
- onSwitch && (React__default["default"].createElement("div", { className: css_248z.action },
42
+ onSwitch && (React__default["default"].createElement("div", { className: styles.action },
42
43
  React__default["default"].createElement(Switch.Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
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: {
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: {
44
45
  delay: 0.2,
45
46
  type: "spring",
46
47
  damping: 20,
@@ -48,9 +49,9 @@ function FeatureSwitch({ children, description, disabled = false, enabled, exter
48
49
  }, onAnimationComplete: handleAnimationComplete },
49
50
  React__default["default"].createElement(Text.Text, { variation: "success" },
50
51
  React__default["default"].createElement(Emphasis.Emphasis, { variation: "italic" }, "Saved")))))))),
51
- (children || onEdit) && (React__default["default"].createElement("div", { className: css_248z.container },
52
+ (children || onEdit) && (React__default["default"].createElement("div", { className: styles.container },
52
53
  children && (React__default["default"].createElement("div", { className: featureContentClassnames }, children)),
53
- onEdit && (React__default["default"].createElement("div", { className: css_248z.action },
54
+ onEdit && (React__default["default"].createElement("div", { className: styles.action },
54
55
  React__default["default"].createElement(Button.Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
55
56
  function shouldShowSavedIndicator() {
56
57
  // 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-a62cc4de.js');
5
+ var FormField = require('../FormField-e1c3af82.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-1063207a.js');
12
+ require('../Button-186ef2c1.js');
13
13
  require('react-router-dom');
14
14
  require('../Icon-405a216c.js');
15
15
  require('@jobber/design');
16
- require('../Typography-01077f8f.js');
17
- require('../Text-1c12d786.js');
18
- require('../InputValidation-96fa6b11.js');
16
+ require('../Typography-dd9717e7.js');
17
+ require('../Text-4c04ddc3.js');
18
+ require('../InputValidation-e09f5d20.js');
19
19
  require('framer-motion');
20
- require('../Spinner-aca146ee.js');
20
+ require('../Spinner-35cee923.js');
21
21
 
22
22
 
23
23