5htp-core 0.4.1-6 → 0.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.1-6",
+	"version": "0.4.2",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,7 +13,6 @@
 		"framework"
 	],
 	"dependencies": {
-		"@wojtekmaj/react-daterange-picker": "^5.0.2",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
@@ -65,7 +64,7 @@
 		"picomatch": "^2.3.1",
 		"preact": "^10.5.15",
 		"preact-render-to-string": "^5.1.19",
-		"react-datetime-picker": "^5.0.3",
+		"react-datetime-picker": "^5.6.0",
 		"react-scrollbars-custom": "^4.0.27",
 		"react-slider": "^2.0.1",
 		"react-textarea-autosize": "^8.3.3",

package/src/client/assets/css/components/button.less

@@ -69,7 +69,7 @@
         z-index: 1; // Make the label on top of ::before for example
 
         // Handle overflow
-        white-space: nowrap;
+        //white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
 
@@ -280,7 +280,7 @@ ul.row {
         position: relative;
 
         // Submenu
-        &:not(:hover) > .btn + .menu,
+        &:not(.contPopover):not(:hover) > .btn + .menu,
         > .btn[disabled] + .menu {
             visibility: hidden;
         }

package/src/client/assets/css/core.less

@@ -8,7 +8,6 @@
 // Fonts
 @import '../fonts/Inter/index.less';
 @import '../fonts/Rubik/index.less';
-@import '../fonts/Lato/index.less';
 
 // Apply the theme class
 .bg {

package/src/client/components/inputv3/date/Calendar.css

@@ -0,0 +1,156 @@
+.react-calendar {
+  width: 350px;
+  max-width: 100%;
+  background: white;
+  border: 1px solid #a0a096;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.125em;
+}
+
+.react-calendar--doubleView {
+  width: 700px;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer {
+  display: flex;
+  margin: -0.5em;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer > * {
+  width: 50%;
+  margin: 0.5em;
+}
+
+.react-calendar,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.react-calendar button {
+  margin: 0;
+  border: 0;
+  outline: none;
+}
+
+.react-calendar button:enabled:hover {
+  cursor: pointer;
+}
+
+.react-calendar__navigation {
+  display: flex;
+  height: 44px;
+  margin-bottom: 1em;
+}
+
+.react-calendar__navigation button {
+  min-width: 44px;
+  background: none;
+}
+
+.react-calendar__navigation button:disabled {
+  background-color: #f0f0f0;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.react-calendar__month-view__weekdays {
+  text-align: center;
+  text-transform: uppercase;
+  font: inherit;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+
+.react-calendar__month-view__weekdays__weekday {
+  padding: 0.5em;
+}
+
+.react-calendar__month-view__weekNumbers .react-calendar__tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+
+.react-calendar__month-view__days__day--weekend {
+  color: #d10000;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth,
+.react-calendar__decade-view__years__year--neighboringDecade,
+.react-calendar__century-view__decades__decade--neighboringCentury {
+  color: #757575;
+}
+
+.react-calendar__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+  padding: 2em 0.5em;
+}
+
+.react-calendar__tile {
+  max-width: 100%;
+  padding: 10px 6.6667px;
+  background: none;
+  text-align: center;
+  line-height: 16px;
+  font: inherit;
+  font-size: 0.833em;
+}
+
+.react-calendar__tile:disabled {
+  background-color: #f0f0f0;
+  color: #ababab;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth:disabled,
+.react-calendar__decade-view__years__year--neighboringDecade:disabled,
+.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+  color: #cdcdcd;
+}
+
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.react-calendar__tile--now {
+  background: #ffff76;
+}
+
+.react-calendar__tile--now:enabled:hover,
+.react-calendar__tile--now:enabled:focus {
+  background: #ffffa9;
+}
+
+.react-calendar__tile--hasActive {
+  background: #76baff;
+}
+
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
+  background: #a9d4ff;
+}
+
+.react-calendar__tile--active {
+  background: #006edc;
+  color: white;
+}
+
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+  background: #1087ff;
+}
+
+.react-calendar--selectRange .react-calendar__tile--hover {
+  background-color: #e6e6e6;
+}

package/src/client/components/inputv3/date/Clock.css

@@ -0,0 +1,62 @@
+.react-clock {
+  display: block;
+  position: relative;
+}
+
+.react-clock,
+.react-clock *,
+.react-clock *:before,
+.react-clock *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.react-clock__face {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: 1px solid black;
+  border-radius: 50%;
+}
+
+.react-clock__hand {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  right: 50%;
+}
+
+.react-clock__hand__body {
+  position: absolute;
+  background-color: black;
+  transform: translateX(-50%);
+}
+
+.react-clock__mark {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  right: 50%;
+}
+
+.react-clock__mark__body {
+  position: absolute;
+  background-color: black;
+  transform: translateX(-50%);
+}
+
+.react-clock__mark__number {
+  position: absolute;
+  left: -40px;
+  width: 80px;
+  text-align: center;
+}
+
+.react-clock__second-hand__body {
+  background-color: red;
+}

package/src/client/components/inputv3/date/DateTimePicker.css

@@ -0,0 +1,132 @@
+.react-datetime-picker {
+  display: inline-flex;
+  position: relative;
+}
+
+.react-datetime-picker,
+.react-datetime-picker *,
+.react-datetime-picker *:before,
+.react-datetime-picker *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.react-datetime-picker--disabled {
+  background-color: #f0f0f0;
+  color: #6d6d6d;
+}
+
+.react-datetime-picker__wrapper {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  border: thin solid gray;
+}
+
+.react-datetime-picker__inputGroup {
+  min-width: calc(4px + (4px * 3) + 0.54em * 6 + 0.217em * 2);
+  flex-grow: 1;
+  padding: 0 2px;
+}
+
+.react-datetime-picker__inputGroup__divider {
+  padding: 1px 0;
+  white-space: pre;
+}
+
+.react-datetime-picker__inputGroup__divider,
+.react-datetime-picker__inputGroup__leadingZero {
+  display: inline-block;
+  font: inherit;
+}
+
+.react-datetime-picker__inputGroup__input {
+  min-width: 0.54em;
+  height: calc(100% - 2px);
+  position: relative;
+  padding: 1px;
+  border: 0;
+  background: none;
+  color: currentColor;
+  font: inherit;
+  box-sizing: content-box;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button,
+.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+.react-datetime-picker__inputGroup__input:invalid {
+  background: rgba(255, 0, 0, 0.1);
+}
+
+.react-datetime-picker__inputGroup__input--hasLeadingZero {
+  margin-left: -0.54em;
+  padding-left: calc(1px + 0.54em);
+}
+
+.react-datetime-picker__inputGroup__amPm {
+  font: inherit;
+  -webkit-appearance: menulist;
+  -moz-appearance: menulist;
+  appearance: menulist;
+}
+
+.react-datetime-picker__button {
+  border: 0;
+  background: transparent;
+  padding: 4px 6px;
+}
+
+.react-datetime-picker__button:enabled {
+  cursor: pointer;
+}
+
+.react-datetime-picker__button:enabled:hover .react-datetime-picker__button__icon,
+.react-datetime-picker__button:enabled:focus .react-datetime-picker__button__icon {
+  stroke: #0078d7;
+}
+
+.react-datetime-picker__button:disabled .react-datetime-picker__button__icon {
+  stroke: #6d6d6d;
+}
+
+.react-datetime-picker__button svg {
+  display: inherit;
+}
+
+.react-datetime-picker__calendar,
+.react-datetime-picker__clock {
+  z-index: 1;
+}
+
+.react-datetime-picker__calendar--closed,
+.react-datetime-picker__clock--closed {
+  display: none;
+}
+
+.react-datetime-picker__calendar {
+  width: 350px;
+  max-width: 100vw;
+}
+
+.react-datetime-picker__calendar .react-calendar {
+  border-width: thin;
+}
+
+.react-datetime-picker__clock {
+  width: 200px;
+  height: 200px;
+  max-width: 100vw;
+  padding: 25px;
+  background-color: white;
+  border: thin solid #a0a096;
+}

package/src/client/components/inputv3/date/index.tsx

@@ -4,7 +4,7 @@
 
 // Npm
 import React from 'react';
-import DateRangePicker, { DateRangePickerProps } from '@wojtekmaj/react-daterange-picker';
+import DateRangePicker, { DateTimePickerProps } from 'react-datetime-picker';
 
 // Core
 
@@ -15,7 +15,7 @@ import DateRangePicker, { DateRangePickerProps } from '@wojtekmaj/react-daterang
 ----------------------------------*/
 
 type TValue = [Date, Date]
-export type Props = DateRangePickerProps & {
+export type Props = DateTimePickerProps & {
     //value: TValue,
     //onChange: StateUpdater<TValue>,
     placeholder?: string,
@@ -26,8 +26,9 @@ export type Props = DateRangePickerProps & {
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
-import './react-calendar.less';
-import './react-daterange-picker.less';
+import './DateTimePicker.css';
+import './Calendar.css';
+import './Clock.css';
 export default ({ value, Props, min, max, onChange, ...otherProps }) => {
 
     const state = React.useState(false);

package/src/client/components/inputv3/index.tsx

@@ -168,44 +168,42 @@ export default ({
     /*----------------------------------
     - RENDER
     ----------------------------------*/
-    return (
-        <div class="col sp-05">
-            <div class={className} onClick={() => refInput.current?.focus()}>
-
-                {prefix}
-
-                <div class="contValue">
-
-                    <Tag {...fieldProps}
-                        // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
-                        ref={refInput}
-                        value={value}
-                        onFocus={() => setState({ focus: true })}
-                        onBlur={() => setState({ focus: false })}
-                        onChange={(e) => updateValue(e.target.value)}
-
-                        onKeyDown={(e: KeyboardEvent) => {
-
-                            if (onPressEnter && e.key === 'Enter' && value !== undefined) {
-                                commitValue();
-                                onPressEnter(value)
-                            }
-                        }}
-                    />
-
-                    <label>{props.title}{required && (
-                        <span class="fg error">&nbsp;*</span>
-                    )}</label>
-                </div>
-
-                {suffix}
-                
+    return <>
+        <div class={className} onClick={() => refInput.current?.focus()}>
+
+            {prefix}
+
+            <div class="contValue">
+
+                <Tag {...fieldProps}
+                    // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
+                    ref={refInput}
+                    value={value}
+                    onFocus={() => setState({ focus: true })}
+                    onBlur={() => setState({ focus: false })}
+                    onChange={(e) => updateValue(e.target.value)}
+
+                    onKeyDown={(e: KeyboardEvent) => {
+
+                        if (onPressEnter && e.key === 'Enter' && value !== undefined) {
+                            commitValue();
+                            onPressEnter(value)
+                        }
+                    }}
+                />
+
+                <label>{props.title}{required && (
+                    <span class="fg error">&nbsp;*</span>
+                )}</label>
             </div>
-            {errors?.length && (
-                <div class="fg error txt-left">
-                    {errors.join('. ')}
-                </div>
-            )}
+
+            {suffix}
+            
         </div>
-    )
+        {errors?.length && (
+            <div class="fg error txt-left">
+                {errors.join('. ')}
+            </div>
+        )}
+    </>
 }

package/src/common/validation/schema.ts

@@ -102,10 +102,6 @@ export default class Schema<TFields extends TSchemaFields> {
             const cheminAstr = cheminA.join('.')
             const valOrigine = dataToValidate[fieldName];
 
-            // Key not in the input data, we don't create an entry in the output
-            if (!( fieldName in dataToValidate))
-                continue;
-
             // Validation
             try {
 
@@ -117,7 +113,8 @@ export default class Schema<TFields extends TSchemaFields> {
                 //      Exemple: undefinec = suppression fichier | Absende donnée = conservation fihcier actuel
                 if (val === EXCLUDE_VALUE)
                     opts.debug && console.log(LogPrefix, '[' + cheminA + '] Exclusion demandée');
-                else
+                // Key not in the input data, we don't create an entry in the output
+                else if (fieldName in dataToValidate)
                     output[fieldName] = val;
 
                 opts.debug && console.log(LogPrefix, '[' + cheminA + ']', valOrigine, '=>', val);

package/src/client/assets/fonts/Lato/index.less

@@ -1,71 +0,0 @@
-// 
-/*
-    The use of Unicode range subsets and separate files for each stylistic variant of 
-    the font allows you to define a composite font family that is both faster and more 
-    efficient to download. Visitors only download the variants and subsets they need, 
-    and they aren't forced to download subsets that they may never see or use on the page.
-
-    https://web.dev/reduce-webfont-size/#unicode-range-subsetting
-
-    Original stylesheet: https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap
-*/
-
-/* latin-ext */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url(./latin-ext-400.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url(./latin-400.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* latin-ext */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url(./latin-ext-700.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url(./latin-700.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* latin-ext */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url(./latin-ext-900.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url(./latin-900.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

package/src/client/components/inputv3/date/react-calendar.less

@@ -1,143 +0,0 @@
-.react-calendar {
-    width: 350px;
-    max-width: 100%;
-    background: white;
-    border: 1px solid #a0a096;
-    font-family: Arial, Helvetica, sans-serif;
-    line-height: 1.125em;
-  }
-  
-  .react-calendar--doubleView {
-    width: 700px;
-  }
-  
-  .react-calendar--doubleView .react-calendar__viewContainer {
-    display: flex;
-    margin: -0.5em;
-  }
-  
-  .react-calendar--doubleView .react-calendar__viewContainer > * {
-    width: 50%;
-    margin: 0.5em;
-  }
-  
-  .react-calendar,
-  .react-calendar *,
-  .react-calendar *:before,
-  .react-calendar *:after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  
-  .react-calendar button {
-    margin: 0;
-    border: 0;
-    outline: none;
-  }
-  
-  .react-calendar button:enabled:hover {
-    cursor: pointer;
-  }
-  
-  .react-calendar__navigation {
-    display: flex;
-    height: 44px;
-    margin-bottom: 1em;
-  }
-  
-  .react-calendar__navigation button {
-    min-width: 44px;
-    background: none;
-  }
-  
-  .react-calendar__navigation button:disabled {
-    background-color: #f0f0f0;
-  }
-  
-  .react-calendar__navigation button:enabled:hover,
-  .react-calendar__navigation button:enabled:focus {
-    background-color: #e6e6e6;
-  }
-  
-  .react-calendar__month-view__weekdays {
-    text-align: center;
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: 0.75em;
-  }
-  
-  .react-calendar__month-view__weekdays__weekday {
-    padding: 0.5em;
-  }
-  
-  .react-calendar__month-view__weekNumbers .react-calendar__tile {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.75em;
-    font-weight: bold;
-  }
-  
-  .react-calendar__month-view__days__day--weekend {
-    color: #d10000;
-  }
-  
-  .react-calendar__month-view__days__day--neighboringMonth {
-    color: #757575;
-  }
-  
-  .react-calendar__year-view .react-calendar__tile,
-  .react-calendar__decade-view .react-calendar__tile,
-  .react-calendar__century-view .react-calendar__tile {
-    padding: 2em 0.5em;
-  }
-  
-  .react-calendar__tile {
-    max-width: 100%;
-    padding: 10px 6.6667px;
-    background: none;
-    text-align: center;
-    line-height: 16px;
-  }
-  
-  .react-calendar__tile:disabled {
-    background-color: #f0f0f0;
-  }
-  
-  .react-calendar__tile:enabled:hover,
-  .react-calendar__tile:enabled:focus {
-    background-color: #e6e6e6;
-  }
-  
-  .react-calendar__tile--now {
-    background: #ffff76;
-  }
-  
-  .react-calendar__tile--now:enabled:hover,
-  .react-calendar__tile--now:enabled:focus {
-    background: #ffffa9;
-  }
-  
-  .react-calendar__tile--hasActive {
-    background: #76baff;
-  }
-  
-  .react-calendar__tile--hasActive:enabled:hover,
-  .react-calendar__tile--hasActive:enabled:focus {
-    background: #a9d4ff;
-  }
-  
-  .react-calendar__tile--active {
-    background: #006edc;
-    color: white;
-  }
-  
-  .react-calendar__tile--active:enabled:hover,
-  .react-calendar__tile--active:enabled:focus {
-    background: #1087ff;
-  }
-  
-  .react-calendar--selectRange .react-calendar__tile--hover {
-    background-color: #e6e6e6;
-  }

package/src/client/components/inputv3/date/react-daterange-picker.less

@@ -1,112 +0,0 @@
-.react-daterange-picker {
-    display: inline-flex;
-    position: relative;
-  }
-  
-  .react-daterange-picker,
-  .react-daterange-picker *,
-  .react-daterange-picker *:before,
-  .react-daterange-picker *:after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  
-  .react-daterange-picker--disabled {
-    background-color: #f0f0f0;
-    color: #6d6d6d;
-  }
-  
-  .react-daterange-picker__wrapper {
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 0;
-    align-items: center;
-    border: thin solid gray;
-  }
-  
-  .react-daterange-picker__inputGroup {
-    min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2);
-    height: 100%;
-    flex-grow: 1;
-    padding: 0 2px;
-    box-sizing: content-box;
-  }
-  
-  .react-daterange-picker__inputGroup__divider {
-    padding: 1px 0;
-    white-space: pre;
-  }
-  
-  .react-daterange-picker__inputGroup__divider,
-  .react-daterange-picker__inputGroup__leadingZero {
-    display: inline-block;
-  }
-  
-  .react-daterange-picker__inputGroup__input {
-    min-width: 0.54em;
-    height: 100%;
-    position: relative;
-    padding: 0 1px;
-    border: 0;
-    background: none;
-    font: inherit;
-    box-sizing: content-box;
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-    appearance: textfield;
-  }
-  
-  .react-daterange-picker__inputGroup__input::-webkit-outer-spin-button,
-  .react-daterange-picker__inputGroup__input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    margin: 0;
-  }
-  
-  .react-daterange-picker__inputGroup__input:invalid {
-    background: rgba(255, 0, 0, 0.1);
-  }
-  
-  .react-daterange-picker__inputGroup__input--hasLeadingZero {
-    margin-left: -0.54em;
-    padding-left: calc(1px + 0.54em);
-  }
-  
-  .react-daterange-picker__button {
-    border: 0;
-    background: transparent;
-    padding: 4px 6px;
-  }
-  
-  .react-daterange-picker__button:enabled {
-    cursor: pointer;
-  }
-  
-  .react-daterange-picker__button:enabled:hover .react-daterange-picker__button__icon,
-  .react-daterange-picker__button:enabled:focus .react-daterange-picker__button__icon {
-    stroke: #0078d7;
-  }
-  
-  .react-daterange-picker__button:disabled .react-daterange-picker__button__icon {
-    stroke: #6d6d6d;
-  }
-  
-  .react-daterange-picker__button svg {
-    display: inherit;
-  }
-  
-  .react-daterange-picker__calendar {
-    width: 350px;
-    max-width: 100vw;
-    z-index: 1;
-  }
-  
-  .react-daterange-picker__calendar--closed {
-    display: none;
-  }
-  
-  .react-daterange-picker__calendar .react-calendar {
-    border-width: thin;
-  }