@xola/ui-kit 3.4.6 → 3.6.0

package/README.md

@@ -11,9 +11,8 @@ It's storybook is publicly published at [ui.xola.io](https://ui.xola.io). The ic
 
 ### Requirements
 
--   Node.js v20 or higher
+-   Node.js v20
 -   NPM v7 or higher
--   **ESM-only package** - This package uses ES modules exclusively and does not support CommonJS
 
 ### Usage
 
@@ -26,83 +25,74 @@ npm install @xola/ui-kit
 Install peer dependencies:
 
 ```bash
-npm install autoprefixer postcss tailwindcss vite
+npm install autoprefixer postcss tailwindcss vite @types/react @types/react-dom
 ```
 
-#### Option 1: Use configs directly (Recommended)
+UI kit expects you already have a working React dev environment with PostCSS support.
 
-Import and extend the configs in your project:
+Import and use the components:
 
-**tailwind.config.js:**
 ```js
-import uiKitConfig from "@xola/ui-kit/tailwind.config.js";
-
-export default {
-  ...uiKitConfig,
-  content: [
-    ...uiKitConfig.content,
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
-};
+import { Button } from "@xola/ui-kit";
 ```
 
-**postcss.config.js:**
-```js
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-```
+#### Tailwind v3 projects
 
-#### Option 2: Re-export configs (Simple)
+Create PostCSS and Tailwind config files:
 
-If you want to use the UI Kit configs as-is:
-
-**tailwind.config.js:**
-```js
-export { default } from "@xola/ui-kit/tailwind.config.js";
+```bash
+echo 'module.exports = require("@xola/ui-kit/tailwind.config");' > tailwind.config.js
+echo 'module.exports = require("@xola/ui-kit/postcss.config");' > postcss.config.js
 ```
 
-**postcss.config.js:**
+Import main CSS files in your project:
+
 ```js
-export { default } from "@xola/ui-kit/postcss.config.js";
+import "@xola/ui-kit/index.css";
+import "@xola/ui-kit/build/style.css";
 ```
 
-#### Import Styles and Components
+`index.css` is raw source (`@tailwind base/components/utilities`) that your own
+Tailwind v3 pipeline compiles, using `tailwind.config.js` above to pick up
+ui-kit's theme and scan its components for classes.
 
-Import CSS files in your project's entry point (e.g., `main.tsx` or `App.tsx`):
+#### Tailwind v4 projects
 
-```js
-// Full Tailwind setup with base styles, fonts, and CSS reset
-import "@xola/ui-kit/index.css";
+UI kit is still built on Tailwind v3, so there's no native way for it to hand
+its config to a v4 project (v3's JS config format and v4's CSS-first `@theme`
+aren't directly compatible). Two things bridge the gap:
 
-// Component-specific styles (Popover, Checkbox, RangeSlider, Sidebar, Skeleton, etc.)
-import "@xola/ui-kit/build/ui-kit.css";
-```
+1. **Don't import `@xola/ui-kit/index.css`.** It uses `@tailwind` directives
+    and `@apply`, which v4's compiler doesn't understand and will error on.
+    Only import the prebuilt CSS:
 
-**Both imports are required** for components to render correctly. The first provides Tailwind base styles and fonts, while the second includes all component CSS modules.
+    ```js
+    import "@xola/ui-kit/build/style.css";
+    ```
 
-UI kit expects you already have a working React 18+ dev environment with PostCSS support.
+2. **Scan ui-kit's bundle and import its color palette**, in your app's main
+    CSS entry point (the file with `@import "tailwindcss";`):
 
-Import and use the components (with full TypeScript support):
+    ```css
+    @import "tailwindcss";
 
-```tsx
-import { Button, Modal, Input } from "@xola/ui-kit";
+    /* v4 excludes node_modules from class scanning by default, so ui-kit's
+       own utility classes (px-4.5, disabled:bg-gray-lighter, etc.) won't be
+       generated unless something in your own source happens to use the same
+       class string. Opt ui-kit's bundle back in explicitly. */
+    @source "./node_modules/@xola/ui-kit/build/ui-kit.es.js";
 
-// TypeScript types are automatically included
-function MyComponent() {
-  return (
-    <>
-      <Button variant="primary">Click me</Button>
-      <Input type="text" placeholder="Enter text" />
-    </>
-  );
-}
-```
+    /* ui-kit's color palette (primary, gray, success, warning, ...),
+       auto-generated from its tailwind.config.js. Import this instead of
+       hand-copying hex values — otherwise names like "primary" will
+       silently resolve to your own theme's colors instead of Xola's. */
+    @import "@xola/ui-kit/build/theme.css";
+    ```
 
-> **Note:** This package is ESM-only. Ensure your project has `"type": "module"` in package.json or use `.mjs` file extensions for configuration files.
+If your app defines its own `primary`/`secondary`/`success`/etc. tokens (e.g.
+via shadcn/ui), those will collide with ui-kit's — `build/theme.css` must be
+imported after your own theme so ui-kit's classNames resolve to ui-kit's
+colors, not yours.
 
 ## Development
 
@@ -111,7 +101,7 @@ function MyComponent() {
 Install all required dependencies:
 
 ```bash
-$ nvm use # Project needs Node.js v20+ with NPM v7+
+$ nvm use # Project needs Node.js v20 with NPM v7
 $ npm install
 ```
 
@@ -169,27 +159,7 @@ $ rm -rf node_modules/@xola
 
 ### Troubleshooting
 
-#### Missing Component Styles
-
-If components are rendering without styles (e.g., Popover, Checkbox, RangeSlider), ensure both CSS imports are present:
-
-```js
-import "@xola/ui-kit/index.css";          // Tailwind base + fonts
-import "tippy.js/dist/tippy.css";
-import "@xola/ui-kit/build/ui-kit.css";   // Component CSS modules
-```
-
-All component-specific styles are bundled in `ui-kit.css`, including:
-- Popover (`.main` with arrow styles)
-- PopoverScroll (scrollbar customization)
-- Checkbox (custom checkmark)
-- RangeSlider (noUiSlider styling)
-- Sidebar (menu and scroll styles)
-- Skeleton (shimmer animation)
-
-#### Package Installation Issues
-
-If you encounter package related issues, try removing the following directories and running the install command again:
+If you encounter some package related issues, try removing the following directories and running the install command again:
 
 ```bash
 $ cd workspace

package/build/style.css

@@ -0,0 +1 @@
+._main_1bcuo_1 .tippy-content{padding:0}::-webkit-scrollbar-thumb{--tw-bg-opacity: 1 !important;background-color:rgb(80 82 84 / var(--tw-bg-opacity, 1))!important}.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;white-space:normal;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[data-animation=perspective][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=perspective][data-placement^=top][data-state=visible]{transform:perspective(700px)}.tippy-box[data-animation=perspective][data-placement^=top][data-state=hidden]{transform:perspective(700px) translateY(8px) rotateX(60deg)}.tippy-box[data-animation=perspective][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=perspective][data-placement^=bottom][data-state=visible]{transform:perspective(700px)}.tippy-box[data-animation=perspective][data-placement^=bottom][data-state=hidden]{transform:perspective(700px) translateY(-8px) rotateX(-60deg)}.tippy-box[data-animation=perspective][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=perspective][data-placement^=left][data-state=visible]{transform:perspective(700px)}.tippy-box[data-animation=perspective][data-placement^=left][data-state=hidden]{transform:perspective(700px) translate(8px) rotateY(-60deg)}.tippy-box[data-animation=perspective][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=perspective][data-placement^=right][data-state=visible]{transform:perspective(700px)}.tippy-box[data-animation=perspective][data-placement^=right][data-state=hidden]{transform:perspective(700px) translate(-8px) rotateY(60deg)}.tippy-box[data-animation=perspective][data-state=hidden]{opacity:0}.tippy-box[data-animation=scale][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=scale][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=scale][data-state=hidden]{transform:scale(.5);opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top]{transform:translateY(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom]{transform:translateY(-10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left]{transform:translate(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right]{transform:translate(-10px)}.tippy-box[data-animation=shift-toward][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=top]{transform:translateY(-10px)}.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=bottom]{transform:translateY(10px)}.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=left]{transform:translate(-10px)}.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=right]{transform:translate(10px)}.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:#fff;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, 1))}._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}::-webkit-scrollbar{-webkit-appearance:none;width:8px}::-webkit-scrollbar-thumb{border-radius:4px;background-color:#00000080;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}.ui-combo-box__control{padding:0;font-family:InterVariable,Inter,ui-sans-serif,system-ui,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, 1))!important;border-radius:4px!important;--tw-border-opacity: 1 !important;border-color:rgb(224 227 231 / var(--tw-border-opacity, 1))!important}.ui-combo-box__control:hover{--tw-border-opacity: 1 !important;border-color:rgb(34 35 36 / var(--tw-border-opacity, 1))!important;--tw-bg-opacity: 1;background-color:rgb(240 242 244 / var(--tw-bg-opacity, 1))}.ui-combo-box__control:focus-within{--tw-border-opacity: 1 !important;border-color:rgb(19 82 198 / var(--tw-border-opacity, 1))!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, 1))!important}.ui-combo-box__placeholder{--tw-text-opacity: 1 !important;color:rgb(138 140 145 / var(--tw-text-opacity, 1))!important}.ui-combo-box__control:hover .ui-combo-box__placeholder{--tw-text-opacity: 1 !important;color:rgb(80 82 84 / var(--tw-text-opacity, 1))!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, 1))!important}.ui-combo-box__option--is-selected{--tw-bg-opacity: 1 !important;background-color:rgb(41 121 208 / var(--tw-bg-opacity, 1))!important}.ui-combo-box__input-container{--tw-text-opacity: 1 !important;color:rgb(138 140 145 / var(--tw-text-opacity, 1))!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, 1))!important}.ui-combo-box__dropdown-indicator svg{height:14px;width:14px;--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity, 1))}.ui-combo-box--is-disabled svg{--tw-text-opacity: 1;color:rgb(189 192 198 / var(--tw-text-opacity, 1))}.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{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, 1))}.ui-range-slider .noUi-connect{--tw-bg-opacity: 1;background-color:rgb(19 82 198 / var(--tw-bg-opacity, 1))}.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, 1));--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, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.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}@keyframes _shimmer_qt4e9_7{to{transform:translate(100%)}}._shimmer_qt4e9_7{transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);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:#fff;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, 1))}.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;right:96px;top:0;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, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));font-size:14px;font-weight:600;letter-spacing:-.4px;--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity, 1))}.DayPicker-TodayButton:hover{--tw-border-opacity: 1;border-color:rgb(19 82 198 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(209 225 255 / var(--tw-bg-opacity, 1))}.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, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(80 82 84 / var(--tw-text-opacity, 1));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, 1))}.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, 1));font-weight:400;--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity, 1))}.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, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.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, 1));--tw-bg-opacity: 1;background-color:rgb(209 225 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity, 1))}.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, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.DayPicker-Day--outside .date{cursor:pointer;--tw-text-opacity: 1;color:rgb(138 140 145 / var(--tw-text-opacity, 1))}.DayPicker-Day--disabled:not(.DayPicker-Day--today) .date{--tw-text-opacity: 1;color:rgb(224 227 231 / var(--tw-text-opacity, 1))}.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside){border-radius:0;--tw-bg-opacity: 1;background-color:rgb(209 225 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity, 1))}.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, 1))}.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) .date,.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) .date:hover{--tw-bg-opacity: 1;background-color:rgb(209 225 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity, 1))}.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, 1))!important;--tw-text-opacity: 1 !important;color:rgb(255 255 255 / var(--tw-text-opacity, 1))!important}.date-range-picker .DayPicker-Day--start:not(.DayPicker-Day--outside):not(.DayPicker-Day--end){border-radius:0;background:linear-gradient(90deg,#fff 40%,#d1e1ff 25%)}.date-range-picker .DayPicker-Day--start div{border-radius:9999px}.date-range-picker .DayPicker-Day--end:not(.DayPicker-Day--outside):not(.DayPicker-Day--start){border-radius:0;background:linear-gradient(90deg,#d1e1ff 40%,#fff 25%)}.date-range-picker .DayPicker-Day--start.DayPicker-Day--end:not(.DayPicker-Day--disabled) .ui-date-picker-day{outline-style:solid;outline-offset:1px;outline-color:#d1e1ff}.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, 1))}.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, 1));--tw-bg-opacity: 1;background-color:rgb(209 225 255 / var(--tw-bg-opacity, 1))}.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, 1))}.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, 1))}.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, 1))}.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, 1));font-weight:400;--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity, 1))}.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, 1))}.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, 1));font-weight:400;--tw-text-opacity: 1;color:rgb(34 35 36 / var(--tw-text-opacity, 1))}.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, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.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, 1));--tw-text-opacity: 1;color:rgb(138 140 145 / var(--tw-text-opacity, 1))}.has-custom-content .DayPicker-Day .ui-day-content-custom{--tw-text-opacity: 1;color:rgb(138 140 145 / var(--tw-text-opacity, 1))}.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, 1));--tw-content: "";content:var(--tw-content)}@media (max-width: 767px){.DayPicker-Month{min-width:auto}.has-custom-content .DayPicker-Month{border-spacing:1px 2px}.has-custom-content .DayPicker-Day .ui-day-content,.has-custom-content .DayPicker-Day .ui-day-content:hover,.has-custom-content .DayPicker-Day .ui-date-picker-day,.has-custom-content .DayPicker-Day:hover .ui-date-picker-day{height:36px;width:36px}.has-custom-content .DayPicker-Day .ui-day-content-custom{font-size:10px;line-height:1}.DayPicker-Day{padding-left:4px!important}.ui-date-picker-input{padding:12px!important}.ui-date-picker{padding-top:12px!important}.DayPicker-TodayButton{display:none}}

package/build/theme.css

@@ -0,0 +1,76 @@
+/* This file is auto-generated from tailwind.config.js. Do not change it manually! */
+@theme {
+    --color-gray-hover: #F7F9FB;
+    --color-gray-lighter: #F0F2F4;
+    --color-gray-light: #E0E3E7;
+    --color-gray: #BDC0C6;
+    --color-gray-dark: #8A8C91;
+    --color-gray-darker: #505254;
+    --color-blue-medium: #B0C7F1;
+    --color-blue-lighter: #D1E1FF;
+    --color-blue-light: #2979D0;
+    --color-blue: #1352C6;
+    --color-blue-dark: #3467C4;
+    --color-blue-darker: #0E44A8;
+    --color-turquoise: #3FE2EE;
+    --color-green-lighter: #E2FFEF;
+    --color-green-lightish: #C1F9D9;
+    --color-green-light: #33E781;
+    --color-green: #27CE70;
+    --color-green-dark: #23B965;
+    --color-green-darker: #168848;
+    --color-red-lighter: #FFF0F0;
+    --color-red-lightish: #FFE1E1;
+    --color-red-light: #FFA1A1;
+    --color-red: #FF5A5A;
+    --color-red-dark: #E93737;
+    --color-red-darker: #CD1F1F;
+    --color-yellow-lighter: #FFFAF0;
+    --color-yellow-lightish: #FFECC6;
+    --color-yellow-light: #FFDB8E;
+    --color-yellow: #FFC03D;
+    --color-yellow-dark: #EBAA24;
+    --color-yellow-darker: #987122;
+    --color-orange-lighter: #FFF1E7;
+    --color-orange-lightish: #FFF1E7;
+    --color-orange-light: #FFB493;
+    --color-orange: #FF9668;
+    --color-orange-dark: #EC743F;
+    --color-orange-darker: #ff7336;
+    --color-primary-medium: #B0C7F1;
+    --color-primary-lighter: #D1E1FF;
+    --color-primary-light: #2979D0;
+    --color-primary: #1352C6;
+    --color-primary-dark: #3467C4;
+    --color-primary-darker: #0E44A8;
+    --color-secondary-hover: #F7F9FB;
+    --color-secondary-lighter: #F0F2F4;
+    --color-secondary-light: #E0E3E7;
+    --color-secondary: #BDC0C6;
+    --color-secondary-dark: #8A8C91;
+    --color-secondary-darker: #505254;
+    --color-warning-lighter: #FFFAF0;
+    --color-warning-lightish: #FFECC6;
+    --color-warning-light: #FFDB8E;
+    --color-warning: #FFC03D;
+    --color-warning-dark: #EBAA24;
+    --color-warning-darker: #987122;
+    --color-success-lighter: #E2FFEF;
+    --color-success-lightish: #C1F9D9;
+    --color-success-light: #33E781;
+    --color-success: #27CE70;
+    --color-success-dark: #23B965;
+    --color-success-darker: #168848;
+    --color-danger-lighter: #FFF0F0;
+    --color-danger-lightish: #FFE1E1;
+    --color-danger-light: #FFA1A1;
+    --color-danger: #FF5A5A;
+    --color-danger-dark: #E93737;
+    --color-danger-darker: #CD1F1F;
+    --color-caution-lighter: #FFF1E7;
+    --color-caution-lightish: #FFF1E7;
+    --color-caution-light: #FFB493;
+    --color-caution: #FF9668;
+    --color-caution-dark: #EC743F;
+    --color-caution-darker: #ff7336;
+}