willba-component-library 0.0.63 → 0.0.65

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 (5) hide show
  1. package/lib/index.esm.js +1 -1
  2. package/lib/index.js +1 -1
  3. package/lib/index.umd.js +1 -1
  4. package/package.json +5 -5
  5. package/src/components/FilterBar/components/calendar/Calendar.css +4 -0
package/lib/index.esm.js CHANGED
@@ -7855,7 +7855,7 @@ var reactResponsiveExports = reactResponsive.exports;
7855
7855
  var css_248z$5 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
7856
7856
  styleInject(css_248z$5);
7857
7857
 
7858
- var css_248z$4 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n@media (max-width: 1024px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n}\n\n\n";
7858
+ var css_248z$4 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n@media (max-width: 1024px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n}\n\n\n";
7859
7859
  styleInject(css_248z$4);
7860
7860
 
7861
7861
  var currentMonth = new Date();
package/lib/index.js CHANGED
@@ -7875,7 +7875,7 @@ var reactResponsiveExports = reactResponsive.exports;
7875
7875
  var css_248z$5 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
7876
7876
  styleInject(css_248z$5);
7877
7877
 
7878
- var css_248z$4 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n@media (max-width: 1024px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n}\n\n\n";
7878
+ var css_248z$4 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n@media (max-width: 1024px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n}\n\n\n";
7879
7879
  styleInject(css_248z$4);
7880
7880
 
7881
7881
  var currentMonth = new Date();
package/lib/index.umd.js CHANGED
@@ -7877,7 +7877,7 @@
7877
7877
  var css_248z$5 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
7878
7878
  styleInject(css_248z$5);
7879
7879
 
7880
- var css_248z$4 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n@media (max-width: 1024px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n}\n\n\n";
7880
+ var css_248z$4 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n@media (max-width: 1024px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n}\n\n\n";
7881
7881
  styleInject(css_248z$4);
7882
7882
 
7883
7883
  var currentMonth = new Date();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "willba-component-library",
3
- "version": "0.0.63",
3
+ "version": "0.0.65",
4
4
  "description": "A stroybook 6 with TypeScript demo",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
@@ -23,8 +23,8 @@
23
23
  "react-responsive": "^9.0.2"
24
24
  },
25
25
  "peerDependencies": {
26
- "react": "^18.2.0",
27
- "react-dom": "^18.2.0"
26
+ "react": "^17.0.2",
27
+ "react-dom": "^17.0.2"
28
28
  },
29
29
  "devDependencies": {
30
30
  "@rollup/plugin-commonjs": "^25.0.3",
@@ -41,8 +41,8 @@
41
41
  "@storybook/testing-library": "^0.2.0",
42
42
  "@types/react": "^18.2.19",
43
43
  "postcss": "^8.4.27",
44
- "react": "^18.2.0",
45
- "react-dom": "^18.2.0",
44
+ "react": "^17.0.2",
45
+ "react-dom": "^17.0.2",
46
46
  "rollup": "^3.28.0",
47
47
  "rollup-plugin-dts": "^5.3.1",
48
48
  "rollup-plugin-peer-deps-external": "^2.2.4",
package/src/components/FilterBar/components/calendar/Calendar.css CHANGED
@@ -19,6 +19,10 @@
19
19
 
20
20
  /* Calendar overrides */
21
21
 
22
+ .will-calendar-filter-container .DayPicker {
23
+ font-size: 25px; /* Adjust this value to make the DayPicker bigger */
24
+ }
25
+
22
26
  .will-calendar-filter-container .rdp-month {
23
27
  position: relative;
24
28
  }