@xola/ui-kit 2.0.0-1 → 2.0.0-13

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 (7) hide show
  1. package/README.md +87 -31
  2. package/build/style.css +1 -1
  3. package/build/ui-kit.es.js +1 -1
  4. package/build/ui-kit.umd.js +1 -1
  5. package/index.css +5 -1
  6. package/package.json +42 -34
  7. package/tailwind.config.js +52 -10
package/README.md CHANGED
@@ -2,28 +2,33 @@
2
2
 
3
3
  React component library for the next generation of Xola apps.
4
4
 
5
+ ## Requirements
6
+
7
+ - Node.js v14
8
+ - NPM v7
9
+
5
10
  ## Usage
6
11
 
7
- Install the UI kit.
12
+ Install the UI kit:
8
13
 
9
14
  ```bash
10
15
  $ npm install @xola/ui-kit
11
16
  ```
12
17
 
13
- Install peer dependencies.
18
+ Install peer dependencies:
14
19
 
15
20
  ```bash
16
21
  $ npm install autoprefixer postcss tailwindcss lodash
17
22
  ```
18
23
 
19
- Create PostCSS and Tailwind config files.
24
+ Create PostCSS and Tailwind config files:
20
25
 
21
26
  ```bash
22
27
  $ echo 'module.exports = require("@xola/ui-kit/tailwind.config");' > tailwind.config.js
23
28
  $ echo 'module.exports = require("@xola/ui-kit/postcss.config");' > postcss.config.js
24
29
  ```
25
30
 
26
- Import main CSS files in your project.
31
+ Import main CSS files in your project:
27
32
 
28
33
  ```js
29
34
  import "@xola/ui-kit/index.css";
@@ -32,35 +37,12 @@ import "@xola/ui-kit/build/style.css";
32
37
 
33
38
  UI kit expects you already have a working React dev environment with PostCSS support.
34
39
 
35
- Import and use the components.
40
+ Import and use the components:
36
41
 
37
42
  ```js
38
43
  import { Button } from "@xola/ui-kit";
39
44
  ```
40
45
 
41
- ## Available Components
42
-
43
- - Alert
44
- - Avatar
45
- - Badge
46
- - Breadcrumb
47
- - Button
48
- - ButtonGroup
49
- - FormGroup
50
- - HeaderToolbar
51
- - Input
52
- - Label
53
- - Logo
54
- - Modal
55
- - NotificationCount
56
- - Popover
57
- - Search
58
- - Sidebar
59
- - Spinner
60
- - Switch
61
- - Table
62
- - Tooltip
63
-
64
46
  ## Development
65
47
 
66
48
  ### Installation
@@ -68,7 +50,7 @@ import { Button } from "@xola/ui-kit";
68
50
  Install all required dependencies:
69
51
 
70
52
  ```bash
71
- $ nvm use
53
+ $ nvm use # Project needs Node.js v14 with NPM v7
72
54
  $ npm install
73
55
  ```
74
56
 
@@ -80,8 +62,82 @@ $ npm run dev
80
62
 
81
63
  ### Use the Package Locally
82
64
 
65
+ In order for this to work you will have to set up an NPM workspace. That means, `ui-kit` and `your-project` has to be in the same directory.
66
+
67
+ Start by creating a `package.json` file in your "workspace" directory with the following content:
68
+
69
+ ```json
70
+ {
71
+ "workspaces": ["ui-kit", "your-project"]
72
+ }
73
+ ```
74
+
75
+ Your workspace directory should also contain `.npmrc` and `.nvmrc` files. Copy them from this project:
76
+
77
+ ```bash
78
+ $ cd workspace
79
+ $ cp ui-kit/.npmrc .
80
+ $ cp ui-kit/.nvmrc .
81
+ ```
82
+
83
+ Now we're ready to install the dependencies for both projects:
84
+
85
+ ```bash
86
+ $ cd workspace
87
+ $ npm install
88
+ ```
89
+
90
+ If all went well, NPM will use locally installed `ui-kit` in `your-project`.
91
+
92
+ Next, start the build command from `ui-kit`:
93
+
94
+ ```bash
95
+ $ cd ui-kit
96
+ $ npm run build -- --watch
97
+ ```
98
+
99
+ This will build and watch for changes the `ui-kit` project. Any change made in the `ui-kit` should be visible in `your-project`.
100
+
101
+ If you don't see any changes in your project, that probably means that NPM installed a separate package in your `your-project/node_modules` directory. To fix this, just remove the whole package with the following command:
102
+
83
103
  ```bash
84
- $ npm pack
85
104
  $ cd your-project
86
- $ npm install ../ui-kit/xola-ui-kit@{version}.tgz --no-save
105
+ $ rm -rf node_modules/@xola
106
+ ```
107
+
108
+ #### Troubleshooting
109
+
110
+ If you encounter some package related issues, try removing the following directories and running the install command again:
111
+
112
+ ```bash
113
+ $ cd workspace
114
+ $ rm -rf package-lock.json node_modules ui-kit/node_modules your-project/node_modules
115
+ $ npm install
116
+ ```
117
+
118
+ ### Lint & Auto-fix
119
+
120
+ To automatically fix lint issues in this project you have the following commands:
121
+
122
+ ```bash
123
+ npm run lint # Run lint on `src` and output issues
124
+ npm run lint:fix # Run lint and automatically fix any issues. Any that are not fixed are output to screen.
125
+ ```
126
+
127
+ ## Notes
128
+
129
+ To avoid issues with how npm v7 resolves peer dependencies, we enabled `legacy-peer-deps` rule in `.npmrc`.
130
+
131
+ In order to avoid issues in your projects that are using this UI Kit, use the same `.npmrc` file or always run installs with `--legacy-peer-deps` flag.
132
+
133
+ For example:
134
+
135
+ ```bash
136
+ $ npm install --legacy-peer-deps
137
+ ```
138
+
139
+ Or:
140
+
141
+ ```bash
142
+ $ npm install some-package --legacy-peer-deps
87
143
  ```
package/build/style.css CHANGED
@@ -1 +1 @@
1
- .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:"";z-index:-1;position:absolute;border-color:transparent;border-style:solid}._main_t5zvb_1{background:#fff;border-width:1px!important;border-style:solid!important}._main_t5zvb_1 .tippy-arrow{fill:#fff}._main_t5zvb_1[data-placement^=top]>.tippy-arrow::before{border-top-color:#fff}._main_t5zvb_1[data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:#fff}._main_t5zvb_1[data-placement^=left]>.tippy-arrow::before{border-left-color:#fff}._main_t5zvb_1[data-placement^=right]>.tippy-arrow::before{border-right-color:#fff}._main_t5zvb_1 .tippy-content{--tw-text-opacity:1;color:rgba(34,35,36,var(--tw-text-opacity))}@-webkit-keyframes _shimmer_qt4e9_7{100%{transform:translateX(100%)}}@keyframes _shimmer_qt4e9_7{100%{transform:translateX(100%)}}._shimmer_qt4e9_7{transform:translateX(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));-webkit-animation:_shimmer_qt4e9_7 3s infinite;animation:_shimmer_qt4e9_7 3s infinite}@media (min-width:768px){.login-container{background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1440&q=900);background-repeat:no-repeat;background-position:center;background-size:cover}}
1
+ ._main_1bcuo_1 .tippy-content{padding:0}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:"";z-index:-1;position:absolute;border-color:transparent;border-style:solid}._main_1q4dn_1{background:white;border-width:1px!important;border-style:solid!important}._main_1q4dn_1 .tippy-arrow{fill:#fff}._main_1q4dn_1[data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}._main_1q4dn_1[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}._main_1q4dn_1[data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}._main_1q4dn_1[data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}._main_1q4dn_1 .tippy-content{padding:0;--tw-text-opacity: 1;color:rgba(34,35,36,var(--tw-text-opacity))}.ui-combo-box__control{padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:14px;line-height:14px;--tw-text-opacity: 1 !important;color:rgba(138,140,145,var(--tw-text-opacity))!important;border-radius:4px!important;--tw-border-opacity: 1 !important;border-color:rgba(224,227,231,var(--tw-border-opacity))!important}.ui-combo-box__control:hover{--tw-border-opacity: 1 !important;border-color:rgba(34,35,36,var(--tw-border-opacity))!important;--tw-bg-opacity: 1;background-color:rgba(240,242,244,var(--tw-bg-opacity))}.ui-combo-box__control:focus-within{--tw-border-opacity: 1 !important;border-color:rgba(19,82,198,var(--tw-border-opacity))!important;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.border-danger .ui-combo-box__control{--tw-border-opacity: 1 !important;border-color:rgba(255,90,90,var(--tw-border-opacity))!important}.ui-combo-box__placeholder{--tw-text-opacity: 1 !important;color:rgba(138,140,145,var(--tw-text-opacity))!important}.ui-combo-box__control:hover .ui-combo-box__placeholder{--tw-text-opacity: 1 !important;color:rgba(80,82,84,var(--tw-text-opacity))!important}.ui-combo-box__menu{--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.ui-combo-box__option--is-focused{--tw-bg-opacity: 1 !important;background-color:rgba(240,242,244,var(--tw-bg-opacity))!important}.ui-combo-box__option--is-selected{--tw-bg-opacity: 1 !important;background-color:rgba(41,121,208,var(--tw-bg-opacity))!important}.ui-combo-box__input-container{--tw-text-opacity: 1 !important;color:rgba(138,140,145,var(--tw-text-opacity))!important}.ui-combo-box__control:hover .ui-combo-box__input-container{--tw-text-opacity: 1 !important;color:rgba(80,82,84,var(--tw-text-opacity))!important}.ui-combo-box__dropdown-indicator svg{height:14px;width:14px;--tw-text-opacity: 1;color:rgba(34,35,36,var(--tw-text-opacity))}.ui-combo-box--is-disabled svg{--tw-text-opacity: 1;color:rgba(189,192,198,var(--tw-text-opacity))}.ui-combo-box__indicator-separator{display:none}.ui-combo-box__input:focus{box-shadow:none!important}._checkbox_1gb8z_1:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231352C6' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")!important}@-webkit-keyframes _shimmer_qt4e9_7{to{transform:translate(100%)}}@keyframes _shimmer_qt4e9_7{to{transform:translate(100%)}}._shimmer_qt4e9_7{transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));-webkit-animation:_shimmer_qt4e9_7 3s infinite;animation:_shimmer_qt4e9_7 3s infinite}@media (min-width: 768px){.ui-login{background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1440&q=900);background-repeat:no-repeat;background-position:center;background-size:cover}}.DayPicker{display:inline-block;font-size:1rem}.DayPicker-wrapper{position:relative;flex-direction:row;padding-bottom:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.DayPicker-Months{display:flex;flex-wrap:wrap;justify-content:center}.DayPicker-Month{display:table;margin:1em 1em 0;border-spacing:0;border-collapse:collapse;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.DayPicker-NavButton{position:absolute;top:1em;right:1.5em;left:auto;display:inline-block;margin-top:2px;width:1.25em;height:1.25em;background-position:center;background-size:50%;background-repeat:no-repeat;color:#8b9898;cursor:pointer}.DayPicker-NavButton:hover{opacity:.8}.DayPicker-NavButton--prev{margin-right:1.5em;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC)}.DayPicker-NavButton--next{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==)}.DayPicker-NavButton--interactionDisabled{display:none}.DayPicker-Caption{display:table-caption;margin-bottom:.5em;padding:0 .5em;text-align:left}.DayPicker-Caption>div{font-weight:500;font-size:1.15em}.DayPicker-Weekdays{display:table-header-group;margin-top:1em}.DayPicker-WeekdaysRow{display:table-row}.DayPicker-Weekday{display:table-cell;padding:.5em;color:#8b9898;text-align:center;font-size:.875em}.DayPicker-Weekday abbr[title]{border-bottom:none;text-decoration:none}.DayPicker-Body{display:table-row-group}.DayPicker-Week{display:table-row}.DayPicker-Day{display:table-cell;padding:.5em;border-radius:50%;vertical-align:middle;text-align:center;cursor:pointer}.DayPicker-WeekNumber{display:table-cell;padding:.5em;min-width:1em;border-right:1px solid #EAECEC;color:#8b9898;vertical-align:middle;text-align:right;font-size:.75em;cursor:pointer}.DayPicker--interactionDisabled .DayPicker-Day{cursor:default}.DayPicker-Footer{padding-top:.5em}.DayPicker-TodayButton{border:none;background-color:transparent;background-image:none;box-shadow:none;color:#4a90e2;font-size:.875em;cursor:pointer}.DayPicker-Day--today{color:#d0021b;font-weight:700}.DayPicker-Day--outside{color:#8b9898;cursor:default}.DayPicker-Day--disabled{color:#dce0e0;cursor:default}.DayPicker-Day--sunday{background-color:#f7f8f8}.DayPicker-Day--sunday:not(.DayPicker-Day--today){color:#dce0e0}.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside){position:relative;background-color:#4a90e2;color:#f0f8ff}.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover{background-color:#51a0fa}.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover{background-color:#f0f8ff}.DayPickerInput{display:inline-block}.DayPickerInput-OverlayWrapper{position:relative}.DayPickerInput-Overlay{position:absolute;left:0;z-index:1;background:white;box-shadow:0 2px 5px #00000026}.DayPicker-wrapper{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.DayPicker-wrapper:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ui-date-picker{padding-top:24px;letter-spacing:-.4px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ui-date-picker:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ui-date-picker{width:400px;box-shadow:0 8px 32px 3px #0000001f}.DayPicker-NavBar{--tw-text-opacity: 1;color:rgba(80,82,84,var(--tw-text-opacity))}.DayPicker-Month{margin:0;padding:2px 0 0;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.DayPicker-Month:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.DayPicker-Month{border-collapse:inherit;border-spacing:0 16px}.DayPicker-Month .DayPicker-Caption{margin:0 0 10px;height:40px;padding:0}.DayPicker-Month .DayPicker-Caption[role=heading] div{position:relative;top:1px;height:40px;font-size:18px;font-weight:600;line-height:40px}.DayPicker-TodayButton{position:absolute;top:0px;right:96px;height:40px;padding:10px 14px;line-height:16px;border-radius:4px;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(189,192,198,var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity));font-size:14px;font-weight:600;letter-spacing:-.4px;--tw-text-opacity: 1;color:rgba(34,35,36,var(--tw-text-opacity))}.DayPicker-TodayButton:hover{--tw-border-opacity: 1;border-color:rgba(19,82,198,var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(209,225,255,var(--tw-bg-opacity))}.DayPicker-Month .DayPicker-Caption select{margin-right:10px;height:40px;padding-left:8px;padding-right:24px;border-radius:6px;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(189,192,198,var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(80,82,84,var(--tw-text-opacity));background-position:right .2rem center}.DayPicker-Weekday{margin:0;padding:0;font-size:14px;font-weight:600;--tw-text-opacity: 1;color:rgba(34,35,36,var(--tw-text-opacity))}.DayPicker-Day{height:48px;width:48px;padding:0;line-height:12px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.DayPicker-Day:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.DayPicker-Day--today .ui-day-content{border-width:1px;--tw-border-opacity: 1;border-color:rgba(224,227,231,var(--tw-border-opacity));font-weight:400;--tw-text-opacity: 1;color:rgba(34,35,36,var(--tw-text-opacity))}.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover,.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover{background-color:transparent;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover:focus,.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):focus,.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover{border-color:transparent;--tw-bg-opacity: 1;background-color:rgba(19,82,198,var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside) .ui-day-content:hover{border-width:1px;--tw-border-opacity: 1;border-color:rgba(19,82,198,var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(209,225,255,var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(34,35,36,var(--tw-text-opacity))}.DayPicker .DayPicker-Day:not(.DayPicker-Day--disabled) .date:hover{border-radius:9999px;border-color:transparent;--tw-bg-opacity: 1;background-color:rgba(14,68,168,var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.DayPicker-Day--outside .date{cursor:pointer;--tw-text-opacity: 1;color:rgba(138,140,145,var(--tw-text-opacity))}.DayPicker-Day--disabled:not(.DayPicker-Day--today) .date{--tw-text-opacity: 1;color:rgba(224,227,231,var(--tw-text-opacity))}.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end){border-radius:0;--tw-bg-opacity: 1;background-color:rgba(209,225,255,var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(34,35,36,var(--tw-text-opacity))}.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled) .date,.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled) .date:hover{--tw-bg-opacity: 1;background-color:rgba(209,225,255,var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(34,35,36,var(--tw-text-opacity))}.date-range-picker .DayPicker-Day--start:not(.DayPicker-Day--disabled) .date,.date-range-picker .DayPicker-Day--start:not(.DayPicker-Day--disabled) .date:hover,.date-range-picker .DayPicker-Day--end:not(.DayPicker-Day--disabled) .date,.date-range-picker .DayPicker-Day--end:not(.DayPicker-Day--disabled) .date:hover{--tw-bg-opacity: 1;background-color:rgba(19,82,198,var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.date-range-picker .DayPicker-Day--start{border-radius:0;background:linear-gradient(90deg,#ffffff 50%,#d1e1ff 25%)}.date-range-picker .DayPicker-Day--end{border-radius:0;background:linear-gradient(90deg,#d1e1ff 50%,#ffffff 25%)}.has-custom-content .DayPicker-Month{border-spacing:1px 16px}.has-custom-content .DayPicker-Day,.has-custom-content .DayPicker-Day:hover{height:48px;width:48px;border-width:1px;border-color:transparent}.has-custom-content .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover{border-width:1px;border-color:transparent;--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.has-custom-content .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):hover .ui-day-content{border-width:1px;--tw-border-opacity: 1;border-color:rgba(19,82,198,var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(209,225,255,var(--tw-bg-opacity))}.has-custom-content .DayPicker-Day.DayPicker-Day--selected{border-width:1px;border-color:transparent;--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.has-custom-content .DayPicker-Day .ui-day-content{height:48px;width:48px;border-radius:9999px;border-width:1px;border-color:transparent}.has-custom-content .DayPicker-Day .ui-day-content .ui-day-content-value{padding-top:12px;line-height:16px}.has-custom-content .DayPicker-Day .ui-day-content:hover{height:48px;width:48px;border-radius:9999px;border-width:1px;border-color:transparent}.has-custom-content .DayPicker-Day>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.has-custom-content .DayPicker-Day .ui-day-content-custom{font-size:10px;--tw-text-opacity: 1;color:rgba(138,140,145,var(--tw-text-opacity))}.has-custom-content .DayPicker-Day.DayPicker-Day--selected:hover,.has-custom-content .DayPicker-Day.DayPicker-Day--selected{--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.has-custom-content .DayPicker-Day.DayPicker-Day--selected .ui-day-content{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(19,82,198,var(--tw-bg-opacity));font-weight:400;--tw-text-opacity: 1;color:rgba(34,35,36,var(--tw-text-opacity))}.has-custom-content .DayPicker-Day.DayPicker-Day--selected .ui-day-content-custom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;--tw-text-opacity: 1;color:rgba(224,227,231,var(--tw-text-opacity))}.has-custom-content .DayPicker-Day--today{border-width:1px;border-color:transparent;--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity));font-weight:400;--tw-text-opacity: 1;color:rgba(34,35,36,var(--tw-text-opacity))}.has-custom-content .DayPicker-Day--today .ui-day-content{border-width:1px;--tw-border-opacity: 1;border-color:rgba(224,227,231,var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.has-custom-content .DayPicker .DayPicker-Day:not(.DayPicker-Day--disabled):hover{--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(138,140,145,var(--tw-text-opacity))}.has-custom-content .DayPicker-Day .ui-day-content-custom{--tw-text-opacity: 1;color:rgba(138,140,145,var(--tw-text-opacity))}