@colisweb/rescript-toolkit 2.36.0 → 2.36.3

package/.gitlab-ci.yml

@@ -1,5 +1,5 @@
 include:
-  - "https://colisweb-open-source.gitlab.io/ci-common/v13.11.1/templates/colisweb.yml"
+  - "https://colisweb-idl.gitlab.io/colisweb-open-source/ci-common/v13.18.1/templates/colisweb.yml"
 
 # -----------------------------------------------
 # Test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.36.0",
+  "version": "2.36.3",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",
@@ -8,7 +8,7 @@
     "dev": "rescript build -w",
     "test": "rescript build -with-deps",
     "build:reacticons": "node tools/extract-react-icons.js",
-    "build:datetimeinput": "node tools/build-datepicker-style.js",
+    "build:scss": "node tools/build-scss.js",
     "storybook": "STORYBOOK=true start-storybook -p 6006 --no-manager-cache",
     "build-storybook": "TAILWIND_MODE=build STORYBOOK=true build-storybook"
   },

package/src/form/Toolkit__Form.res

@@ -100,7 +100,7 @@ module Make = (StateLenses: Config) => {
       ~inputRightAddon=?,
       ~errorClassName=?,
       ~optionalMessage: option<React.element>=?,
-      ~autocomplete: option<string>=?,
+      ~autoComplete=?,
     ) => {
       let (showPassword, setShowPassword) = React.useState(() => false)
       let isPasswordType = type_->Option.mapWithDefault(false, type_ => type_ === "password")
@@ -139,36 +139,28 @@ module Make = (StateLenses: Config) => {
                 </Toolkit__Ui.Label>
               }}
               <div className={cx(["flex flex-row", inputContainerClassName])}>
-                <Toolkit__Ui_Spread
-                  props={autocomplete->Option.mapWithDefault(Js.Obj.empty(), (
-                    autocomplete: string,
-                  ) =>
-                    {
-                      "autocomplete": autocomplete,
-                    }
-                  )}>
-                  <Toolkit__Ui.TextInput
-                    className={cx([
-                      inputClassName,
-                      inputRightAddon->Option.isSome || isPasswordType ? "rounded-r-none" : "",
-                    ])}
-                    id
-                    value
-                    ?name
-                    type_=?{type_->Option.map(type_ =>
-                      type_ === "password" && showPassword ? "text" : type_
-                    )}
-                    ?disabled
-                    ?placeholder
-                    ?autoFocus
-                    ?step
-                    ?min
-                    ?max
-                    isInvalid
-                    onChange
-                    onBlur
-                  />
-                </Toolkit__Ui_Spread>
+                <Toolkit__Ui.TextInput
+                  ?autoComplete
+                  className={cx([
+                    inputClassName,
+                    inputRightAddon->Option.isSome || isPasswordType ? "rounded-r-none" : "",
+                  ])}
+                  id
+                  value
+                  ?name
+                  type_=?{type_->Option.map(type_ =>
+                    type_ === "password" && showPassword ? "text" : type_
+                  )}
+                  ?disabled
+                  ?placeholder
+                  ?autoFocus
+                  ?step
+                  ?min
+                  ?max
+                  isInvalid
+                  onChange
+                  onBlur
+                />
                 {type_->Option.mapWithDefault(React.null, type_ => {
                   switch type_ {
                   | "password" =>

package/src/ui/Toolkit__Ui_CopyWrapper.res

@@ -0,0 +1,30 @@
+open ReactIntl
+
+module Msg = {
+  @@intl.messages
+  let copied = {
+    id: "clipboard.copied",
+    defaultMessage: "Copied to clipboard",
+  }
+}
+
+@react.component
+let make = (~children, ~textToCopy, ~className="", ~intl) => {
+  let ref1Clipboard = Toolkit.Hooks.useClipboard(
+    textToCopy,
+    ~onCopyNotificationMessage=intl->Intl.formatMessage(Msg.copied),
+  )
+
+  <div className={cx(["rounded-md border border-info-500 bg-info-50", className])}>
+    <div className="relative w-full">
+      <div
+        className="absolute -right-2 top-1 p-1 bg-info-50 text-info-500"
+        onClick={_ => {
+          ref1Clipboard.copy()
+        }}>
+        <BsReactIcons.MdContentCopy size=10 />
+      </div>
+      <div className="py-1 px-2 pr-4"> {children} </div>
+    </div>
+  </div>
+}

package/src/ui/Toolkit__Ui_DatetimeInput.css

@@ -278,7 +278,7 @@
   margin-left: 10px;
 }
 .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
-  width: 85px;
+  width: auto;
 }
 .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
 .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {

package/src/ui/styles.css

@@ -1,10 +1,8 @@
 /* purgecss start ignore */
-
 @import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700");
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700");
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
-
 @import url("~@reach/accordion/styles.css");
 @import url("~@reach/listbox/styles.css");
 @import url("~@reach/menu-button/styles.css");
@@ -12,11 +10,9 @@
 @import url("~@reach/tooltip/styles.css");
 @import url("~@reach/combobox/styles.css");
 @import url("~@colisweb/react-day-picker/lib/style.css");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 :root {
   --reach-dialog: 1;
 }
@@ -37,7 +33,6 @@ body,
 }
 
 /* Reach UI */
-
 [data-reach-popover] {
   z-index: 90;
 }
@@ -49,7 +44,7 @@ body,
 }
 
 [data-reach-dialog-overlay] {
-  background: hsla(0, 0%, 0%, 0.6);
+  background: rgba(0, 0, 0, 0.6);
   z-index: 40;
   position: fixed;
   top: 0;
@@ -66,20 +61,25 @@ body,
 .searchListBox {
   @apply font-sans text-neutral-600 border-0 outline-none;
 }
+
 .searchListBox [data-reach-listbox-button] {
   border-width: 0;
   width: 100%;
 }
+
 .searchListBox [data-reach-listbox-button]:focus {
   box-shadow: none !important;
   white-space: nowrap;
 }
+
 .searchListBox [data-reach-listbox-arrow] {
   margin-left: auto;
 }
+
 .searchListBox [data-reach-listbox-arrow] {
   @apply transition-transform ease-in-out duration-150;
 }
+
 .searchListBox [data-reach-listbox-arrow][data-expanded] {
   transform: rotateX(180deg);
 }
@@ -88,9 +88,11 @@ body,
   @apply shadow-lg rounded border border-gray-200;
   padding: 0px !important;
 }
+
 .searchListBox [data-reach-listbox-popover]:focus-within {
   outline: none !important;
 }
+
 .listBoxOptionsContainer {
   max-height: 250px;
   @apply overflow-y-auto;
@@ -99,13 +101,16 @@ body,
 .searchListBox [data-reach-listbox-option] {
   @apply text-sm p-2 cursor-pointer;
 }
+
 .searchListBox [data-reach-listbox-option]:nth-child(odd) {
   @apply bg-neutral-100;
 }
+
 .searchListBox [data-reach-listbox-option]:hover {
   background-color: #1bb0c4;
 }
-.searchListBox [aria-selected="true"] {
+
+.searchListBox [aria-selected=true] {
   background-color: #1bb0c4 !important;
 }
 
@@ -114,7 +119,6 @@ body,
 }
 
 /* Animations */
-
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -123,7 +127,6 @@ body,
     transform: rotate(360deg);
   }
 }
-
 .spin {
   animation: spin 0.5s linear infinite;
 }
@@ -136,7 +139,7 @@ textarea:not([disabled]):not([tabindex="-1"]):focus,
 button:not([disabled]):not([tabindex="-1"]):focus,
 iframe:not([tabindex="-1"]):focus,
 [tabindex]:not([tabindex="-1"]):focus,
-[contentEditable="true"]:not([tabindex="-1"]):focus,
+[contentEditable=true]:not([tabindex="-1"]):focus,
 .focus {
   outline: none !important;
   box-shadow: rgba(66, 153, 225, 0.9) 0px 0px 0px 3px;
@@ -154,26 +157,31 @@ iframe:not([tabindex="-1"]):focus,
 .cw-switch > input:checked ~ .cw-switch-bg {
   @apply bg-info-500;
 }
-.input-range
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+
+.input-range .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
   background-color: #f0f8ff !important;
   color: #4a90e2;
 }
+
 .input-range .DayPicker-Day {
   border-radius: 0 !important;
 }
+
 .input-range .DayPicker-Day--start {
   border-top-left-radius: 50% !important;
   border-bottom-left-radius: 50% !important;
 }
+
 .input-range .DayPicker-Day--end {
   border-top-right-radius: 50% !important;
   border-bottom-right-radius: 50% !important;
 }
+
 .input-range .DayPickerInput-Overlay {
   width: 580px;
   z-index: 31;
 }
+
 .input-range-to .DayPickerInput-Overlay {
   margin-left: -198px;
 }
@@ -185,12 +193,15 @@ iframe:not([tabindex="-1"]):focus,
 .react-select__control {
   @apply border-gray-300 !important;
 }
+
 .errored .react-select__control {
   @apply border-danger-500 !important;
 }
+
 .react-select__indicator-separator {
   @apply bg-gray-300 !important;
 }
+
 .react-select__multi-value {
   @apply bg-gray-300 text-gray-800 !important;
 }
@@ -198,22 +209,25 @@ iframe:not([tabindex="-1"]):focus,
 .react-select--is-disabled .react-select__multi-value {
   @apply opacity-50 !important;
 }
+
 .react-select__input input {
   @apply shadow-none !important;
 }
 
-.Selectable
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+.Selectable .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
   background-color: #f0f8ff !important;
   color: #4a90e2;
 }
+
 .Selectable .DayPicker-Day {
   border-radius: 0 !important;
 }
+
 .Selectable .DayPicker-Day--start {
   border-top-left-radius: 50% !important;
   border-bottom-left-radius: 50% !important;
 }
+
 .Selectable .DayPicker-Day--end {
   border-top-right-radius: 50% !important;
   border-bottom-right-radius: 50% !important;
@@ -227,6 +241,7 @@ iframe:not([tabindex="-1"]):focus,
   background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
   color: white;
 }
+
 .cw-Tabs [data-selected]:hover {
   color: white;
   @apply bg-primary-500;
@@ -235,6 +250,7 @@ iframe:not([tabindex="-1"]):focus,
 .cw-Tabs [data-reach-tab] {
   @apply flex items-center justify-center w-full py-3 rounded-full font-display;
 }
+
 .cw-Tabs [data-reach-tab]:hover {
   @apply bg-primary-300;
 }
@@ -243,50 +259,17 @@ iframe:not([tabindex="-1"]):focus,
   @apply h-10 text-xl;
 }
 
-[data-reach-accordion-item][data-state="open"] .cw-accordion-icon {
+[data-reach-accordion-item][data-state=open] .cw-accordion-icon {
   display: block;
   transform: rotate(90deg);
 }
 
-[data-reach-accordion-item][data-state="collapsed"]
-  .cw-accordion-collapsed-hide {
+[data-reach-accordion-item][data-state=collapsed] .cw-accordion-collapsed-hide {
   display: none !important;
 }
 
 code {
-  font-family: "Fira Code", monospace !important ;
-}
-
-.DayPicker
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
-  background-color: #e7edf3 !important;
-  color: #15373a;
-}
-
-.DayPicker
-  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-  background-color: #15cbe3 !important;
-  color: #fff;
-}
-
-.DayPicker .DayPicker-Day {
-  border-radius: 0 !important;
-  width: 40px;
-  height: 40px;
-}
-
-.DayPicker .DayPicker-Day--start {
-  border-top-left-radius: 50% !important;
-  border-bottom-left-radius: 50% !important;
-  background-color: #15cbe3 !important;
-  color: #fff;
-}
-
-.DayPicker .DayPicker-Day--end {
-  border-top-right-radius: 50% !important;
-  border-bottom-right-radius: 50% !important;
-  background-color: #15cbe3 !important;
-  color: #fff;
+  font-family: "Fira Code", monospace !important;
 }
 
 [data-reach-combobox-input] {
@@ -300,6 +283,7 @@ code {
 [data-reach-combobox-option] {
   @apply font-normal truncate text-base font-sans py-2;
 }
+
 [data-suggested-value] {
   @apply font-normal;
 }
@@ -329,7 +313,6 @@ code {
     border-right-color: #4a7378;
   }
 }
-
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
@@ -337,8 +320,60 @@ input::-webkit-inner-spin-button {
 }
 
 /* Firefox */
-input[type="number"] {
+input[type=number] {
   -moz-appearance: textfield;
 }
 
-/* purgecss end ignore */
+/* Day picker */
+.DayPicker .DayPicker-Day {
+  width: 40px !important;
+  height: 40px !important;
+}
+.DayPicker .DayPicker-Day--selected {
+  border-radius: 0 !important;
+}
+.DayPicker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
+  background-color: #e7edf3 !important;
+  color: #15373a;
+}
+.DayPicker .DayPicker-Day--selected.DayPicker-Day--start {
+  border-top-left-radius: 50% !important;
+  border-bottom-left-radius: 50% !important;
+  background-color: #15cbe3 !important;
+  color: #fff;
+}
+.DayPicker .DayPicker-Day--selected.DayPicker-Day--end {
+  border-top-right-radius: 50% !important;
+  border-bottom-right-radius: 50% !important;
+  background-color: #15cbe3 !important;
+  color: #fff;
+}
+.DayPicker .DayPicker-Day--closed {
+  border-radius: 0 !important;
+}
+.DayPicker .DayPicker-Day--closed:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
+  background-color: #ff634b !important;
+  color: #15373a;
+}
+.DayPicker .DayPicker-Day--closed.DayPicker-Day--start:not(.DayPicker-Day--end) {
+  border-top-left-radius: 50% !important;
+  border-bottom-left-radius: 50% !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  background-color: #ff904b !important;
+  color: #15373a;
+}
+.DayPicker .DayPicker-Day--closed.DayPicker-Day--end:not(.DayPicker-Day--start) {
+  border-top-right-radius: 50% !important;
+  border-bottom-right-radius: 50% !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  background-color: #ff904b !important;
+  color: #15373a;
+}
+.DayPicker .DayPicker-Day--closed.DayPicker-Day--start.DayPicker-Day--end {
+  background-color: #ff904b !important;
+  color: #15373a;
+}
+
+/* purgecss end ignore */

package/src/ui/styles.scss

@@ -0,0 +1,371 @@
+/* purgecss start ignore */
+
+@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700");
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
+
+@import url("~@reach/accordion/styles.css");
+@import url("~@reach/listbox/styles.css");
+@import url("~@reach/menu-button/styles.css");
+@import url("~@reach/tabs/styles.css");
+@import url("~@reach/tooltip/styles.css");
+@import url("~@reach/combobox/styles.css");
+@import url("~@colisweb/react-day-picker/lib/style.css");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --reach-dialog: 1;
+}
+
+body {
+  @apply bg-gray-100;
+  @apply text-gray-900;
+}
+
+html,
+body,
+#root {
+  @apply h-full;
+}
+
+#root {
+  @apply h-full flex flex-col justify-between;
+}
+
+/* Reach UI */
+
+[data-reach-popover] {
+  z-index: 90;
+}
+
+[data-reach-dialog-content] {
+  padding: 0 !important;
+  margin: 10vh auto;
+  outline: 0;
+}
+
+[data-reach-dialog-overlay] {
+  background: hsla(0, 0%, 0%, 0.6);
+  z-index: 40;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+}
+
+[data-reach-menu-item][data-selected] {
+  @apply bg-gray-200 text-gray-900;
+}
+
+.searchListBox {
+  @apply font-sans text-neutral-600 border-0 outline-none;
+}
+.searchListBox [data-reach-listbox-button] {
+  border-width: 0;
+  width: 100%;
+}
+.searchListBox [data-reach-listbox-button]:focus {
+  box-shadow: none !important;
+  white-space: nowrap;
+}
+.searchListBox [data-reach-listbox-arrow] {
+  margin-left: auto;
+}
+.searchListBox [data-reach-listbox-arrow] {
+  @apply transition-transform ease-in-out duration-150;
+}
+.searchListBox [data-reach-listbox-arrow][data-expanded] {
+  transform: rotateX(180deg);
+}
+
+.searchListBox [data-reach-listbox-popover] {
+  @apply shadow-lg rounded border border-gray-200;
+  padding: 0px !important;
+}
+.searchListBox [data-reach-listbox-popover]:focus-within {
+  outline: none !important;
+}
+.listBoxOptionsContainer {
+  max-height: 250px;
+  @apply overflow-y-auto;
+}
+
+.searchListBox [data-reach-listbox-option] {
+  @apply text-sm p-2 cursor-pointer;
+}
+.searchListBox [data-reach-listbox-option]:nth-child(odd) {
+  @apply bg-neutral-100;
+}
+.searchListBox [data-reach-listbox-option]:hover {
+  background-color: #1bb0c4;
+}
+.searchListBox [aria-selected="true"] {
+  background-color: #1bb0c4 !important;
+}
+
+[data-reach-tooltip] {
+  border: none;
+}
+
+/* Animations */
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spin {
+  animation: spin 0.5s linear infinite;
+}
+
+a[href]:not([tabindex="-1"]):focus,
+area[href]:not([tabindex="-1"]):focus,
+input:not([disabled]):not([tabindex="-1"]):focus,
+select:not([disabled]):not([tabindex="-1"]):focus,
+textarea:not([disabled]):not([tabindex="-1"]):focus,
+button:not([disabled]):not([tabindex="-1"]):focus,
+iframe:not([tabindex="-1"]):focus,
+[tabindex]:not([tabindex="-1"]):focus,
+[contentEditable="true"]:not([tabindex="-1"]):focus,
+.focus {
+  outline: none !important;
+  box-shadow: rgba(66, 153, 225, 0.9) 0px 0px 0px 3px;
+}
+
+.no-focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.cw-switch > input:checked ~ .cw-switch-bullet {
+  transform: translateX(20px);
+}
+
+.cw-switch > input:checked ~ .cw-switch-bg {
+  @apply bg-info-500;
+}
+.input-range
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+  background-color: #f0f8ff !important;
+  color: #4a90e2;
+}
+.input-range .DayPicker-Day {
+  border-radius: 0 !important;
+}
+.input-range .DayPicker-Day--start {
+  border-top-left-radius: 50% !important;
+  border-bottom-left-radius: 50% !important;
+}
+.input-range .DayPicker-Day--end {
+  border-top-right-radius: 50% !important;
+  border-bottom-right-radius: 50% !important;
+}
+.input-range .DayPickerInput-Overlay {
+  width: 580px;
+  z-index: 31;
+}
+.input-range-to .DayPickerInput-Overlay {
+  margin-left: -198px;
+}
+
+.input-range .DayPickerInput input {
+  @apply p-2 border rounded-sm cursor-pointer;
+}
+
+.react-select__control {
+  @apply border-gray-300 #{!important};
+}
+.errored .react-select__control {
+  @apply border-danger-500 #{!important};
+}
+.react-select__indicator-separator {
+  @apply bg-gray-300 #{!important};
+}
+.react-select__multi-value {
+  @apply bg-gray-300 text-gray-800 #{!important};
+}
+
+.react-select--is-disabled .react-select__multi-value {
+  @apply opacity-50 #{!important};
+}
+.react-select__input input {
+  @apply shadow-none #{!important};
+}
+
+.Selectable
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+  background-color: #f0f8ff !important;
+  color: #4a90e2;
+}
+.Selectable .DayPicker-Day {
+  border-radius: 0 !important;
+}
+.Selectable .DayPicker-Day--start {
+  border-top-left-radius: 50% !important;
+  border-bottom-left-radius: 50% !important;
+}
+.Selectable .DayPicker-Day--end {
+  border-top-right-radius: 50% !important;
+  border-bottom-right-radius: 50% !important;
+}
+
+.cw-Tabs {
+  @apply flex flex-row bg-gray-200 rounded-full h-6 text-sm mb-2;
+}
+
+.cw-Tabs [data-selected] {
+  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
+  color: white;
+}
+.cw-Tabs [data-selected]:hover {
+  color: white;
+  @apply bg-primary-500;
+}
+
+.cw-Tabs [data-reach-tab] {
+  @apply flex items-center justify-center w-full py-3 rounded-full font-display;
+}
+.cw-Tabs [data-reach-tab]:hover {
+  @apply bg-primary-300;
+}
+
+.cw-Tabs.cw-Tabs--big {
+  @apply h-10 text-xl;
+}
+
+[data-reach-accordion-item][data-state="open"] .cw-accordion-icon {
+  display: block;
+  transform: rotate(90deg);
+}
+
+[data-reach-accordion-item][data-state="collapsed"]
+  .cw-accordion-collapsed-hide {
+  display: none !important;
+}
+
+code {
+  font-family: "Fira Code", monospace !important ;
+}
+
+[data-reach-combobox-input] {
+  @apply appearance-none outline-none transition duration-150 ease-in-out block w-full bg-white text-gray-800 border rounded py-2 px-4 leading-tight focus:z-30 relative disabled:bg-gray-200 disabled:text-gray-700;
+}
+
+[data-reach-combobox-popover] {
+  @apply bg-white border-gray-200 rounded-b p-2 mt-1 shadow;
+}
+
+[data-reach-combobox-option] {
+  @apply font-normal truncate text-base font-sans py-2;
+}
+[data-suggested-value] {
+  @apply font-normal;
+}
+
+[data-user-value] {
+  @apply font-semibold;
+}
+
+.sidenav {
+  top: 64px;
+  height: calc(100% - 64px) !important;
+}
+
+@media screen and (min-width: 600px) {
+  .sidenav.sidenav--closed .sidenav-link:hover .sidenav-link-tooltip {
+    visibility: visible;
+    opacity: 100%;
+  }
+
+  .sidenav.sidenav--closed .sidenav-link .sidenav-link-tooltip:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(-100%, -50%);
+    border: 6px solid transparent;
+    border-right-color: #4a7378;
+  }
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* Day picker */
+.DayPicker {
+  .DayPicker-Day {
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  .DayPicker-Day--selected{
+    border-radius: 0 !important;
+
+    &:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
+      background-color: #e7edf3 !important;
+      color: #15373a;
+    }
+    &.DayPicker-Day--start {
+      border-top-left-radius: 50% !important;
+      border-bottom-left-radius: 50% !important;
+      background-color: #15cbe3 !important;
+      color: #fff;
+    }
+    &.DayPicker-Day--end {
+      border-top-right-radius: 50% !important;
+      border-bottom-right-radius: 50% !important;
+      background-color: #15cbe3 !important;
+      color: #fff;
+    }
+  }
+  .DayPicker-Day--closed{
+    border-radius: 0 !important;
+    &:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
+      background-color: #ff634b !important;
+      color: #15373a;
+    }
+    &.DayPicker-Day--start:not(.DayPicker-Day--end) {
+      border-top-left-radius: 50% !important;
+      border-bottom-left-radius: 50% !important;
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+      background-color: #ff904b !important;
+      color: #15373a;
+    }
+    &.DayPicker-Day--end:not(.DayPicker-Day--start) {
+      border-top-right-radius: 50% !important;
+      border-bottom-right-radius: 50% !important;
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+      background-color: #ff904b !important;
+      color: #15373a;
+    }
+    &.DayPicker-Day--start.DayPicker-Day--end {
+      background-color: #ff904b !important;
+      color: #15373a;
+    }
+  }
+}
+ 
+
+
+/* purgecss end ignore */
+

package/src/vendors/BsReactIcons.res

@@ -5902,11 +5902,13 @@ module IoIosCloseCircle = {
 
 module AiFillEyeInvisible = {
   @module("react-icons/ai") @react.component
-  external make: (~size: int=?) => React.element = "AiFillEyeInvisible"
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "AiFillEyeInvisible"
 }
 module AiFillEye = {
   @module("react-icons/ai") @react.component
-  external make: (~size: int=?) => React.element = "AiFillEye"
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "AiFillEye"
 }
 
 module FaCalendarCheck = {
@@ -5920,3 +5922,55 @@ module FaUserCog = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "FaUserCog"
 }
+
+module FaRedo = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaRedo"
+}
+
+module FaWarehouse = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaWarehouse"
+}
+
+module FaRecycle = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaRecycle"
+}
+module FaPlug = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaRecycle"
+}
+module FaTools = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaTools"
+}
+
+module MdOutlineFileDownload = {
+  @module("react-icons/md") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "MdOutlineFileDownload"
+}
+
+module FaServer = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaServer"
+}
+module FaLockOpen = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaLockOpen"
+}
+module FaLock = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaLock"
+}
+
+module FaCog = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaCog"
+}

package/tools/build-scss.js

@@ -0,0 +1,23 @@
+const sass = require("sass");
+const path = require("path");
+const fs = require("fs");
+const appDirectory = fs.realpathSync(process.cwd());
+
+const FILENAMES = ["Toolkit__Ui_DatetimeInput", "styles"];
+
+for (const FILENAME of FILENAMES) {
+  const file = path.resolve(appDirectory, `src/ui/${FILENAME}.scss`);
+  const outFile = path.resolve(appDirectory, `src/ui/${FILENAME}.css`);
+
+  const result = sass.renderSync({
+    file,
+    includePaths: [path.resolve(appDirectory, "node_modules")],
+    outFile,
+  });
+
+  fs.writeFile(outFile, result.css, function (err) {
+    if (!err) {
+      console.log("✅ done");
+    }
+  });
+}

package/tools/build-datepicker-style.js

@@ -1,20 +0,0 @@
-const sass = require("sass");
-const path = require("path");
-const fs = require("fs");
-const appDirectory = fs.realpathSync(process.cwd());
-
-const FILENAME = "Toolkit__Ui_DatetimeInput";
-const file = path.resolve(appDirectory, `src/ui/${FILENAME}.scss`);
-const outFile = path.resolve(appDirectory, `src/ui/${FILENAME}.css`);
-
-const result = sass.renderSync({
-  file,
-  includePaths: [path.resolve(appDirectory, "node_modules")],
-  outFile,
-});
-
-fs.writeFile(outFile, result.css, function (err) {
-  if (!err) {
-    console.log("✅ done");
-  }
-});