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

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.
package/README.md CHANGED
@@ -1,29 +1,34 @@
1
- # Xola UI Kit
1
+ ## Xola UI Kit
2
2
 
3
- React component library for the next generation of Xola apps.
3
+ Xola's React component library with Tailwind CSS for the next generation of Xola apps. See a preview at https://ui.xola.io
4
4
 
5
- ## Usage
5
+ ### Requirements
6
6
 
7
- Install the UI kit.
7
+ - Node.js v16
8
+ - NPM v7 or higher
9
+
10
+ ### Usage
11
+
12
+ Install the UI kit:
8
13
 
9
14
  ```bash
10
- $ npm install @xola/ui-kit
15
+ npm install @xola/ui-kit
11
16
  ```
12
17
 
13
- Install peer dependencies.
18
+ Install peer dependencies:
14
19
 
15
20
  ```bash
16
- $ npm install autoprefixer postcss tailwindcss lodash
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
- $ echo 'module.exports = require("@xola/ui-kit/tailwind.config");' > tailwind.config.js
23
- $ echo 'module.exports = require("@xola/ui-kit/postcss.config");' > postcss.config.js
27
+ echo 'module.exports = require("@xola/ui-kit/tailwind.config");' > tailwind.config.js
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,20 +50,95 @@ 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 v16 with NPM v7
72
54
  $ npm install
73
55
  ```
74
56
 
75
57
  Start the Storybook development server:
76
58
 
77
59
  ```bash
78
- $ npm run dev
60
+ $ npm start
61
+ ```
62
+
63
+ ## Advanced
64
+ ### Integrate your app with a locally installed UI Kit
65
+
66
+ 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.
67
+
68
+ Start by creating a `package.json` file in your "workspace" directory with the following content:
69
+
70
+ ```json
71
+ {
72
+ "workspaces": ["ui-kit", "your-project"]
73
+ }
74
+ ```
75
+
76
+ Your workspace directory should also contain `.npmrc` and `.nvmrc` files. Copy them from this project:
77
+
78
+ ```bash
79
+ $ cd workspace
80
+ $ cp ui-kit/.npmrc .
81
+ $ cp ui-kit/.nvmrc .
79
82
  ```
80
83
 
81
- ### Use the Package Locally
84
+ Now we're ready to install the dependencies for both projects:
85
+
86
+ ```bash
87
+ $ cd workspace
88
+ $ npm install
89
+ ```
90
+
91
+ If all went well, NPM will use locally installed `ui-kit` in `your-project`.
92
+
93
+ Next, start the build command from `ui-kit`:
94
+
95
+ ```bash
96
+ $ cd ui-kit
97
+ $ npm run build -- --watch
98
+ ```
99
+
100
+ This will build and watch for changes the `ui-kit` project. Any change made in the `ui-kit` should be visible in `your-project`.
101
+
102
+ 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:
82
103
 
83
104
  ```bash
84
- $ npm pack
85
105
  $ cd your-project
86
- $ npm install ../ui-kit/xola-ui-kit@{version}.tgz --no-save
106
+ $ rm -rf node_modules/@xola
107
+ ```
108
+
109
+ ### Troubleshooting
110
+
111
+ If you encounter some package related issues, try removing the following directories and running the install command again:
112
+
113
+ ```bash
114
+ $ cd workspace
115
+ $ rm -rf package-lock.json node_modules ui-kit/node_modules your-project/node_modules
116
+ $ npm install
117
+ ```
118
+
119
+ ### Lint & Auto-fix
120
+
121
+ To automatically fix lint issues in this project you have the following commands:
122
+
123
+ ```bash
124
+ npm run lint # Run lint on `src` and output issues
125
+ npm run lint:fix # Run lint and automatically fix any issues. Any that are not fixed are output to screen.
126
+ ```
127
+
128
+ ## Notes
129
+
130
+ To avoid issues with how npm v7 resolves peer dependencies, we enabled `legacy-peer-deps` rule in `.npmrc`.
131
+
132
+ 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.
133
+
134
+ For example:
135
+
136
+ ```bash
137
+ $ npm install --legacy-peer-deps
138
+ ```
139
+
140
+ Or:
141
+
142
+ ```bash
143
+ $ npm install some-package --legacy-peer-deps
87
144
  ```
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_jm0tk_1{background:white;border-width:1px!important;border-style:solid!important}._main_jm0tk_1 .tippy-content{padding:0;--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity))}._main_jm0tk_1 .tippy-arrow{fill:#fff}._main_jm0tk_1[data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}._main_jm0tk_1[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}._main_jm0tk_1[data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}._main_jm0tk_1[data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}._main_jm0tk_1[data-placement^=top][class*=bg-black]>.tippy-arrow:before{border-top-color:#000}._main_jm0tk_1[data-placement^=bottom][class*=bg-black]>.tippy-arrow:before{border-bottom-color:#000}._main_jm0tk_1[data-placement^=left][class*=bg-black]>.tippy-arrow:before{border-left-color:#000}._main_jm0tk_1[data-placement^=right][class*=bg-black]>.tippy-arrow:before{border-right-color:#000}.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:rgb(138 140 145 / var(--tw-text-opacity))!important;border-radius:4px!important;--tw-border-opacity: 1 !important;border-color:rgb(224 227 231 / var(--tw-border-opacity))!important}.ui-combo-box__control:hover{--tw-border-opacity: 1 !important;border-color:rgb(34 35 36 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1;background-color:rgb(240 242 244 / var(--tw-bg-opacity))}.ui-combo-box__control:focus-within{--tw-border-opacity: 1 !important;border-color:rgb(19 82 198 / var(--tw-border-opacity))!important;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 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:rgb(255 90 90 / var(--tw-border-opacity))!important}.ui-combo-box__placeholder{--tw-text-opacity: 1 !important;color:rgb(138 140 145 / var(--tw-text-opacity))!important}.ui-combo-box__control:hover .ui-combo-box__placeholder{--tw-text-opacity: 1 !important;color:rgb(80 82 84 / var(--tw-text-opacity))!important}.ui-combo-box__menu{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !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:rgb(240 242 244 / var(--tw-bg-opacity))!important}.ui-combo-box__option--is-selected{--tw-bg-opacity: 1 !important;background-color:rgb(41 121 208 / var(--tw-bg-opacity))!important}.ui-combo-box__input-container{--tw-text-opacity: 1 !important;color:rgb(138 140 145 / var(--tw-text-opacity))!important}.ui-combo-box__control:hover .ui-combo-box__input-container{--tw-text-opacity: 1 !important;color:rgb(80 82 84 / var(--tw-text-opacity))!important}.ui-combo-box__dropdown-indicator svg{height:14px;width:14px;--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity))}.ui-combo-box--is-disabled svg{--tw-text-opacity: 1;color:rgb(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}/*! nouislider - 14.7.0 - 4/6/2021 */.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;touch-action:none;-moz-user-select:none;user-select:none;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-connect{height:100%;width:100%}.noUi-origin{height:10%;width:10%}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;top:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb}.noUi-active{box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb}.noUi-handle:before,.noUi-handle:after{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:before,.noUi-vertical .noUi-handle:after{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled].noUi-target,[disabled].noUi-handle,[disabled] .noUi-handle{cursor:not-allowed}.noUi-pips,.noUi-pips *{box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub,.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{transform:translateY(-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{transform:translateY(50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{transform:translate(-50%);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{transform:translateY(-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{transform:translate(50%);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{transform:translateY(-18px);top:auto;right:28px}.ui-range-slider .noUi-handle:before,.ui-range-slider .noUi-handle:after{display:none}.ui-range-slider{height:8px;width:100%;--tw-bg-opacity: 1;background-color:rgb(240 242 244 / var(--tw-bg-opacity))}.ui-range-slider .noUi-connect{--tw-bg-opacity: 1;background-color:rgb(19 82 198 / var(--tw-bg-opacity))}.ui-range-slider .noUi-handle{height:20px;width:20px;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(19 82 198 / var(--tw-bg-opacity));--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ui-range-slider .noUi-tooltip{left:50%;top:130%;height:32px;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(34 35 36 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.ui-range-slider .noUi-tooltip:after{content:"";border-color:transparent transparent black transparent;position:absolute;bottom:100%;left:50%;margin-left:-4px;border-width:4px;border-style:solid}@-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}.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;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;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-input{padding:12px 24px 24px}.ui-relative-date-ranges,.date-range-picker{width:810px}.DayPicker-NavBar{--tw-text-opacity: 1;color:rgb(80 82 84 / var(--tw-text-opacity))}.DayPicker-Months{justify-content:flex-start}.DayPicker-Months>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(8px * var(--tw-space-x-reverse));margin-left:calc(8px * calc(1 - var(--tw-space-x-reverse)))}.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{min-width:400px;border-collapse:inherit;border-spacing:0 8px}.DayPicker-Month .DayPicker-Caption{margin:0 0 10px;height:40px;padding:0 0 0 16px}.DayPicker-Day--outside{pointer-events:none}.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:rgb(189 192 198 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));font-size:14px;font-weight:600;letter-spacing:-.4px;--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity))}.DayPicker-TodayButton:hover{--tw-border-opacity: 1;border-color:rgb(19 82 198 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(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:rgb(189 192 198 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(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:rgb(34 35 36 / var(--tw-text-opacity))}.DayPicker-Day{height:32px;width:32px;padding:0!important;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{padding-left:12px!important}.DayPicker-Day--today .ui-day-content{border-width:1px;--tw-border-opacity: 1;border-color:rgb(224 227 231 / var(--tw-border-opacity));font-weight:400;--tw-text-opacity: 1;color:rgb(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}.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) .ui-date-picker-day,.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover .ui-date-picker-day{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(19 82 198 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(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:rgb(19 82 198 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(209 225 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(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:rgb(14 68 168 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.DayPicker-Day--outside .date{cursor:pointer;--tw-text-opacity: 1;color:rgb(138 140 145 / var(--tw-text-opacity))}.DayPicker-Day--disabled:not(.DayPicker-Day--today) .date{--tw-text-opacity: 1;color:rgb(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:rgb(209 225 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity))}.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) .ui-date-picker-day,.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover .ui-date-picker-day{background-color:transparent;--tw-text-opacity: 1;color:rgb(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:rgb(209 225 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity))}.ui-date-picker-day{height:32px;width:32px}.date-range-picker .DayPicker-Day--start:not(.DayPicker-Day--disabled) .ui-date-picker-day,.date-range-picker .DayPicker-Day--start:not(.DayPicker-Day--disabled) .ui-date-picker-day:hover,.date-range-picker .DayPicker-Day--end:not(.DayPicker-Day--disabled) .ui-date-picker-day,.date-range-picker .DayPicker-Day--end:not(.DayPicker-Day--disabled) .ui-date-picker-day:hover{--tw-bg-opacity: 1 !important;background-color:rgb(19 82 198 / var(--tw-bg-opacity))!important;--tw-text-opacity: 1 !important;color:rgb(255 255 255 / var(--tw-text-opacity))!important}.date-range-picker .DayPicker-Day--start{border-radius:0;background:linear-gradient(90deg,#ffffff 40%,#d1e1ff 25%)}.date-range-picker .DayPicker-Day--start div{border-radius:9999px}.date-range-picker .DayPicker-Day--end{border-radius:0;background:linear-gradient(90deg,#d1e1ff 40%,#ffffff 25%)}.date-range-picker .DayPicker-Day--end div{border-radius:9999px}.has-custom-content .DayPicker-Month{border-spacing:1px 16px}.has-custom-content .DayPicker-Day .ui-date-picker-day,.has-custom-content .DayPicker-Day:hover .ui-date-picker-day{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:rgb(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:rgb(19 82 198 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(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:rgb(255 255 255 / var(--tw-bg-opacity))}.has-custom-content .DayPicker-Day .ui-day-content,.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:rgb(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:rgb(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:rgb(19 82 198 / var(--tw-bg-opacity));font-weight:400;--tw-text-opacity: 1;color:rgb(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:rgb(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:rgb(255 255 255 / var(--tw-bg-opacity));font-weight:400;--tw-text-opacity: 1;color:rgb(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:rgb(224 227 231 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.has-custom-content .DayPicker .DayPicker-Day:not(.DayPicker-Day--disabled):hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(138 140 145 / var(--tw-text-opacity))}.has-custom-content .DayPicker-Day .ui-day-content-custom{--tw-text-opacity: 1;color:rgb(138 140 145 / var(--tw-text-opacity))}.DayPicker-Day.DayPicker-Day--waitlist>div{position:relative}.DayPicker-Day.DayPicker-Day--waitlist>div:after{position:absolute;bottom:4px;height:8px;width:8px;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 192 61 / var(--tw-bg-opacity));--tw-content: "";content:var(--tw-content)}