first commit

2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
--- a/examples/with-react-toolbox/.gitignore
+++ b/examples/with-react-toolbox/.gitignore
@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/examples/with-react-toolbox/README.md
+++ b/examples/with-react-toolbox/README.md
@@ -0,0 +1,29 @@
+# With react-toolbox example
+
+This is a simple example of getting react-toolbox up and running, using [react-toolbox-themr](https://github.com/react-toolbox/react-toolbox-themr).
+
+For actual use, you probably also want to add Roboto Font, and Material Design Icons. See <http://react-toolbox.io/#/install>
+
+## Deploy your own
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-toolbox&project-name=with-react-toolbox&repository-name=with-react-toolbox)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-react-toolbox with-react-toolbox-app
+```
+
+```bash
+yarn create next-app --example with-react-toolbox with-react-toolbox-app
+```
+
+```bash
+pnpm create next-app --example with-react-toolbox with-react-toolbox-app
+```
+
+Notice that `yarn toolbox` (or `npm run toolbox`) should be rerun every time the `"reactToolbox"` configuration in `package.json` is changed, in order to update `/theme.js` and `public/theme.css`. The `"reactToolbox"` configuration includes styling, and the list of react-toolbox components to include.
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
--- a/examples/with-react-toolbox/package.json
+++ b/examples/with-react-toolbox/package.json
@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "toolbox": "react-toolbox-themr"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-addons-css-transition-group": "^15.5.2",
+    "react-dom": "^18.2.0",
+    "react-toolbox": "^2.0.0-beta.8"
+  },
+  "devDependencies": {
+    "react-toolbox-themr": "^1.0.2"
+  },
+  "reactToolbox": {
+    "include": [
+      "BUTTON",
+      "DATE_PICKER"
+    ],
+    "customProperties": {
+      "animation-duration": "0.3s",
+      "color-accent": "var(--palette-pink-a200)",
+      "color-accent-dark": "var(--palette-pink-700)",
+      "color-primary-contrast": "var(--color-dark-contrast)",
+      "color-accent-contrast": "var(--color-dark-contrast)"
+    },
+    "output": "public",
+    "javascript": "./theme.js"
+  }
+}
--- a/examples/with-react-toolbox/pages/index.js
+++ b/examples/with-react-toolbox/pages/index.js
@@ -0,0 +1,20 @@
+import ThemeProvider from "react-toolbox/lib/ThemeProvider";
+import theme from "../theme";
+import Head from "next/head";
+
+import Button from "react-toolbox/lib/button/Button";
+
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <link href="/theme.css" rel="stylesheet" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        <Button raised primary>
+          Hello
+        </Button>
+      </ThemeProvider>
+    </div>
+  );
+}
--- a/examples/with-react-toolbox/public/theme.css
+++ b/examples/with-react-toolbox/public/theme.css
@@ -0,0 +1,832 @@
+._2Agdx {
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  font-size: 14px;
+  font-weight: 500;
+  height: 36px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  letter-spacing: 0;
+  line-height: 36px;
+  outline: 0;
+  padding: 0;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition:
+    box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),
+    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  box-sizing: border-box;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+._2Agdx *,
+._2Agdx ::after,
+._2Agdx ::before {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-touch-callout: none;
+}
+._2Agdx > input {
+  height: 0.1px;
+  margin: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 0.1px;
+  z-index: 0;
+}
+._2Agdx::-moz-focus-inner {
+  border: 0;
+}
+._2Agdx > span:not([data-react-toolbox="tooltip"]) {
+  display: inline-block;
+  line-height: 36px;
+  vertical-align: middle;
+}
+._2Agdx > svg {
+  display: inline-block;
+  fill: currentColor;
+  font-size: 120%;
+  height: 36px;
+  vertical-align: top;
+  width: 1em;
+}
+._2Agdx > * {
+  pointer-events: none;
+}
+._2Agdx > ._3AVBi {
+  overflow: hidden;
+}
+._2Agdx[disabled] {
+  color: rgba(0, 0, 0, 0.26);
+  cursor: auto;
+  pointer-events: none;
+}
+._2GH_L {
+  border-radius: 2px;
+  min-width: 90px;
+  padding: 0 12px;
+}
+._2GH_L ._3aBSX {
+  font-size: 120%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+._2GH_L > svg {
+  margin-right: 5px;
+}
+._1ZxqC[disabled] {
+  background-color: rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+._1ZxqC:active {
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+._1ZxqC:focus:not(:active) {
+  box-shadow:
+    0 0 8px rgba(0, 0, 0, 0.18),
+    0 8px 16px rgba(0, 0, 0, 0.36);
+}
+._221ic {
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+._1jWAQ {
+  background: 0 0;
+}
+._3IRMZ {
+  border-radius: 50%;
+  box-shadow:
+    0 1px 1.5px 0 rgba(0, 0, 0, 0.12),
+    0 1px 1px 0 rgba(0, 0, 0, 0.24);
+  font-size: 24px;
+  height: 56px;
+  width: 56px;
+}
+._3IRMZ ._3aBSX:not([data-react-toolbox="tooltip"]) {
+  line-height: 56px;
+}
+._3IRMZ > ._3AVBi {
+  border-radius: 50%;
+}
+._3IRMZ._2DCN- {
+  font-size: 17.77778px;
+  height: 40px;
+  width: 40px;
+}
+._3IRMZ._2DCN- ._3aBSX {
+  line-height: 40px;
+}
+.hC5Z2 {
+  background: 0 0;
+  border-radius: 50%;
+  vertical-align: middle;
+  width: 36px;
+}
+.hC5Z2 svg,
+.hC5Z2 > ._3aBSX {
+  font-size: 20px;
+  line-height: 36px;
+  vertical-align: top;
+}
+.hC5Z2 > ._3AVBi {
+  border-radius: 50%;
+}
+._3tTAW:not([disabled])._221ic,
+._3tTAW:not([disabled])._3IRMZ {
+  background: #3f51b5;
+  color: #fff;
+}
+._3tTAW:not([disabled])._1jWAQ,
+._3tTAW:not([disabled]).hC5Z2 {
+  color: #3f51b5;
+}
+._3tTAW:not([disabled])._1jWAQ:focus:not(:active),
+._3tTAW:not([disabled]).hC5Z2:focus:not(:active) {
+  background: rgba(63, 81, 181, 0.2);
+}
+._3tTAW:not([disabled])._1jWAQ:hover {
+  background: rgba(63, 81, 181, 0.2);
+}
+._2wp6F:not([disabled])._221ic,
+._2wp6F:not([disabled])._3IRMZ {
+  background: #ff4081;
+  color: #fff;
+}
+._2wp6F:not([disabled])._1jWAQ,
+._2wp6F:not([disabled]).hC5Z2 {
+  color: #ff4081;
+}
+._2wp6F:not([disabled])._1jWAQ:focus:not(:active),
+._2wp6F:not([disabled]).hC5Z2:focus:not(:active) {
+  background: rgba(255, 64, 129, 0.2);
+}
+._2wp6F:not([disabled])._1jWAQ:hover {
+  background: rgba(255, 64, 129, 0.2);
+}
+._2CPs4:not([disabled])._221ic,
+._2CPs4:not([disabled])._3IRMZ {
+  background-color: #fff;
+  color: #212121;
+}
+._2CPs4:not([disabled])._1jWAQ,
+._2CPs4:not([disabled]).hC5Z2 {
+  color: #212121;
+}
+._2CPs4:not([disabled])._1jWAQ:focus:not(:active),
+._2CPs4:not([disabled]).hC5Z2:focus:not(:active) {
+  background: rgba(33, 33, 33, 0.2);
+}
+._2CPs4:not([disabled])._1jWAQ:hover {
+  background: rgba(33, 33, 33, 0.2);
+}
+._2CPs4:not([disabled])._2SPZr._221ic,
+._2CPs4:not([disabled])._2SPZr._3IRMZ {
+  background-color: #212121;
+  color: #fff;
+}
+._2CPs4:not([disabled])._2SPZr._1jWAQ,
+._2CPs4:not([disabled])._2SPZr.hC5Z2 {
+  color: #fff;
+}
+._2CPs4:not([disabled])._2SPZr._1jWAQ:focus:not(:active),
+._2CPs4:not([disabled])._2SPZr.hC5Z2:focus:not(:active) {
+  background: rgba(33, 33, 33, 0.2);
+}
+._2CPs4:not([disabled])._2SPZr._1jWAQ:hover {
+  background: rgba(33, 33, 33, 0.2);
+}
+._2CPs4._2SPZr[disabled] {
+  background-color: rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.54);
+}
+._16N7o {
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+._3SV_u {
+  background-color: currentColor;
+  border-radius: 50%;
+  left: 50%;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  -webkit-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+  transition-duration: 0.8s;
+  z-index: 100;
+}
+._3SV_u._2OZWa {
+  opacity: 0.3;
+  transition-property: none;
+}
+._3SV_u._3O2Ue {
+  opacity: 0.3;
+  transition-property: -webkit-transform;
+  transition-property: transform;
+  transition-property:
+    transform,
+    -webkit-transform;
+}
+._3SV_u:not(._3O2Ue):not(._2OZWa) {
+  opacity: 0;
+  transition-property:
+    opacity,
+    -webkit-transform;
+  transition-property: opacity, transform;
+  transition-property:
+    opacity,
+    transform,
+    -webkit-transform;
+}
+._2ISvI:not(.Cf3yF) > .x7MhN {
+  cursor: pointer;
+}
+._2vLUd {
+  background-color: #3f51b5;
+  color: #fff;
+  cursor: pointer;
+  padding: 16px 20px;
+}
+._1VWY- {
+  display: inline-block;
+  font-size: 14px;
+  transition:
+    opacity,
+    font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+._3K2Ws {
+  display: block;
+  font-size: 34px;
+  font-weight: 400;
+  font-weight: 500;
+  line-height: 40px;
+  margin: 0;
+  text-transform: capitalize;
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+._1t-4v {
+  padding: 10px 5px 0;
+}
+._2OzvT ._3K2Ws {
+  opacity: 0.6;
+}
+._2OzvT ._1VWY- {
+  font-size: 16px;
+}
+._2DDdC ._1VWY- {
+  opacity: 0.6;
+}
+._3fCV6 {
+  width: 330px;
+}
+._3fCV6 > [role="body"] {
+  padding: 0;
+}
+._3fCV6 > [role="navigation"] > ._2hL6u {
+  color: #3f51b5;
+}
+._3fCV6 > [role="navigation"] > ._2hL6u:hover {
+  background: rgba(63, 81, 181, 0.2);
+}
+._3fCV6 > [role="navigation"] > ._2hL6u:focus:not(:active) {
+  background: rgba(63, 81, 181, 0.2);
+}
+._1X9ls {
+  background: #fff;
+  font-size: 14px;
+  height: 312px;
+  line-height: 36px;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+}
+._1X9ls .Nv9Bc,
+._1X9ls ._3iPkS {
+  cursor: pointer;
+  height: 36px;
+  opacity: 0.7;
+  position: absolute;
+  top: 0;
+  z-index: 100;
+}
+._1X9ls .Nv9Bc > span,
+._1X9ls ._3iPkS > span {
+  vertical-align: top;
+}
+._1X9ls .Nv9Bc {
+  left: 0;
+}
+._1X9ls ._3iPkS {
+  right: 0;
+}
+._2ESpD {
+  display: inline-block;
+  font-weight: 500;
+  line-height: 36px;
+}
+.zEdgW {
+  font-size: 18px;
+  height: 100%;
+  list-style: none;
+  margin: 0;
+  overflow-y: auto;
+  padding: 0;
+}
+.zEdgW > li {
+  cursor: pointer;
+  line-height: 2.4;
+}
+.zEdgW > li._1pjXb {
+  color: #3f51b5;
+  font-size: 2.4;
+  font-weight: 500;
+}
+.PcByv {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  font-size: 13px;
+  height: 36px;
+  line-height: 36px;
+  opacity: 0.5;
+}
+.PcByv > span {
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 14.28571%;
+  flex: 0 0 14.28571%;
+}
+._1qh3T {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  font-size: 13px;
+}
+._2qF_L {
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 14.28571%;
+  flex: 0 0 14.28571%;
+  padding: 2px 0;
+}
+._2qF_L > span {
+  border-radius: 50%;
+  display: inline-block;
+  height: 36px;
+  line-height: 36px;
+  width: 36px;
+}
+._2qF_L:hover:not(._1pjXb):not(.Cf3yF) > span {
+  background: rgba(63, 81, 181, 0.21);
+  color: #fff;
+}
+._2qF_L._1pjXb > span {
+  background: #3f51b5;
+  color: #fff;
+}
+._2qF_L:hover:not(.Cf3yF) > span {
+  cursor: pointer;
+}
+._2qF_L.Cf3yF {
+  opacity: 0.25;
+}
+._1hSm5 {
+  background-color: #fff;
+}
+.Rk89h,
+._1nam4 {
+  position: absolute;
+}
+._2bZap,
+.m5B3T {
+  transition-duration: 350ms;
+  transition-property:
+    opacity,
+    -webkit-transform;
+  transition-property: transform, opacity;
+  transition-property:
+    transform,
+    opacity,
+    -webkit-transform;
+  transition-timing-function: ease-in-out;
+}
+.Rk89h {
+  opacity: 0;
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+}
+.Rk89h.m5B3T {
+  opacity: 1;
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
+}
+._1nam4 {
+  opacity: 1;
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
+}
+._1nam4._2bZap {
+  opacity: 0;
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+._2WGqM,
+.bGml_ {
+  position: absolute;
+  transition-duration: 0.35s;
+  transition-property:
+    opacity,
+    -webkit-transform;
+  transition-property: transform, opacity;
+  transition-property:
+    transform,
+    opacity,
+    -webkit-transform;
+  transition-timing-function: ease-in-out;
+}
+.bGml_ {
+  opacity: 0;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+}
+.bGml_._3Ghls {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+._2WGqM {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+._2WGqM._2WLHG {
+  opacity: 0;
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+.lFVgC {
+  padding: 20px 0;
+  position: relative;
+  box-sizing: border-box;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+.lFVgC *,
+.lFVgC ::after,
+.lFVgC ::before {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-touch-callout: none;
+}
+.lFVgC._1nKdf {
+  margin-left: 68px;
+}
+._3ga1V {
+  color: rgba(0, 0, 0, 0.26);
+  display: block;
+  font-size: 24px !important;
+  height: 48px;
+  left: -68px;
+  line-height: 48px !important;
+  position: absolute;
+  text-align: center;
+  top: 16px;
+  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 48px;
+}
+._4bZUj {
+  background-color: transparent;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  color: #212121;
+  display: block;
+  font-size: 16px;
+  outline: 0;
+  padding: 8px 0;
+  width: 100%;
+}
+._4bZUj:focus:not([disabled]):not([readonly]) ~ ._3FySS::after,
+._4bZUj:focus:not([disabled]):not([readonly]) ~ ._3FySS::before {
+  width: 50%;
+}
+._4bZUj:focus:not([disabled]):not([readonly]) ~ ._34120:not(.GRQEP) {
+  color: #3f51b5;
+}
+._4bZUj:focus:not([disabled]):not([readonly]) ~ ._34120 > ._2G0aY {
+  color: #de3226;
+}
+._4bZUj:focus:not([disabled]):not([readonly]) ~ .bMyi_ {
+  display: block;
+  opacity: 1;
+}
+._4bZUj:focus:not([disabled]):not([readonly]) ~ ._3ga1V {
+  color: #3f51b5;
+}
+._4bZUj:focus:not([disabled]):not([readonly])._34NWn ~ .bMyi_ {
+  opacity: 0;
+}
+._4bZUj._34NWn ~ ._34120:not(.GRQEP),
+._4bZUj:focus:not([disabled]):not([readonly]) ~ ._34120:not(.GRQEP),
+._4bZUj[type="date"] ~ ._34120:not(.GRQEP),
+._4bZUj[type="time"] ~ ._34120:not(.GRQEP) {
+  font-size: 12px;
+  top: 6px;
+}
+._4bZUj._34NWn ~ ._34120.GRQEP,
+._4bZUj._34NWn ~ .bMyi_ {
+  display: none;
+}
+._34120 {
+  color: rgba(0, 0, 0, 0.26);
+  font-size: 16px;
+  left: 0;
+  line-height: 16px;
+  pointer-events: none;
+  position: absolute;
+  top: 32px;
+  transition-duration: 0.3s;
+  transition-property: top, font-size, color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+._34120.GRQEP ~ .bMyi_ {
+  display: none;
+}
+.bMyi_ {
+  color: rgba(0, 0, 0, 0.26);
+  font-size: 16px;
+  left: 0;
+  line-height: 16px;
+  opacity: 1;
+  pointer-events: none;
+  position: absolute;
+  top: 32px;
+  transition-duration: 0.3s;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+._3FySS {
+  display: block;
+  position: relative;
+  width: 100%;
+}
+._3FySS::after,
+._3FySS::before {
+  background-color: #3f51b5;
+  bottom: 0;
+  content: "";
+  height: 2px;
+  position: absolute;
+  transition-duration: 0.2s;
+  transition-property: width, background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  width: 0;
+}
+._3FySS::before {
+  left: 50%;
+}
+._3FySS::after {
+  right: 50%;
+}
+._1oTuT,
+._2k5Jz {
+  color: #de3226;
+  font-size: 12px;
+  line-height: 20px;
+  margin-bottom: -20px;
+}
+._1oTuT {
+  color: rgba(0, 0, 0, 0.26);
+  position: absolute;
+  right: 0;
+}
+._3ZfJq > ._4bZUj {
+  border-bottom-style: dotted;
+  color: rgba(0, 0, 0, 0.26);
+}
+._2s74E {
+  padding-bottom: 0;
+}
+._2s74E > ._4bZUj {
+  border-bottom-color: #de3226;
+  margin-top: 1px;
+}
+._2s74E > ._1oTuT,
+._2s74E > ._34120 {
+  color: #de3226;
+}
+._2s74E > ._34120 > ._2G0aY {
+  color: #de3226;
+}
+._2gAMv {
+  display: none;
+}
+._3nrqp {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100vh;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 200;
+  box-sizing: border-box;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+._3nrqp *,
+._3nrqp ::after,
+._3nrqp ::before {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-touch-callout: none;
+}
+._3lw90 {
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow:
+    0 19px 60px rgba(0, 0, 0, 0.3),
+    0 15px 20px rgba(0, 0, 0, 0.22);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-height: 96vh;
+  max-width: 96vw;
+  opacity: 0;
+  overflow: hidden;
+  -webkit-transform: translateY(-40px);
+  transform: translateY(-40px);
+  transition:
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 60ms;
+}
+._3lw90._3ea_1 {
+  opacity: 1;
+  -webkit-transform: translateY(0);
+  transform: translateY(0);
+}
+._38VTT {
+  width: 30vw;
+}
+@media screen and (max-width: 720px) {
+  ._38VTT {
+    width: 50vw;
+  }
+}
+@media screen and (max-width: 600px) {
+  ._38VTT {
+    width: 75vw;
+  }
+}
+._1K3iz {
+  width: 50vw;
+}
+@media screen and (max-width: 600px) {
+  ._1K3iz {
+    width: 96vw;
+  }
+}
+._10LcP {
+  width: 96vw;
+}
+._3tLXQ {
+  width: 96vw;
+}
+@media screen and (max-width: 600px) {
+  ._3tLXQ {
+    border-radius: 0;
+    max-height: 100vh;
+    max-width: 100vw;
+    min-height: 100vh;
+    width: 100vw;
+  }
+}
+._2J-aP {
+  color: #000;
+  -webkit-box-flex: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  line-height: 1;
+  margin: 0 0 16px;
+}
+._1Ivuq {
+  color: #757575;
+  -webkit-box-flex: 2;
+  -ms-flex-positive: 2;
+  flex-grow: 2;
+  padding: 24px;
+}
+._1Ivuq p {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 24px;
+  margin: 0;
+}
+.wgwdj {
+  -webkit-box-flex: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  padding: 8px;
+  text-align: right;
+}
+._22_c6 {
+  margin-left: 8px;
+  min-width: 0;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+._2LA9x {
+  background-color: #000;
+  bottom: 0;
+  height: 100vh;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100vw;
+}
+._2LA9x._1mb5R {
+  opacity: 0.6;
+  pointer-events: all;
+}
--- a/examples/with-react-toolbox/theme.js
+++ b/examples/with-react-toolbox/theme.js
@@ -0,0 +1,86 @@
+module.exports = {
+  RTButton: {
+    button: "_2Agdx",
+    rippleWrapper: "_3AVBi",
+    squared: "_2GH_L",
+    icon: "_3aBSX",
+    solid: "_1ZxqC",
+    raised: "_221ic _2Agdx _2GH_L _1ZxqC",
+    flat: "_1jWAQ _2Agdx _2GH_L",
+    floating: "_3IRMZ _2Agdx _1ZxqC",
+    mini: "_2DCN-",
+    toggle: "hC5Z2 _2Agdx",
+    primary: "_3tTAW",
+    accent: "_2wp6F",
+    neutral: "_2CPs4",
+    inverse: "_2SPZr",
+  },
+  RTRipple: {
+    rippleWrapper: "_16N7o",
+    ripple: "_3SV_u",
+    rippleRestarting: "_2OZWa",
+    rippleActive: "_3O2Ue",
+  },
+  RTDatePicker: {
+    input: "_2ISvI",
+    disabled: "Cf3yF",
+    inputElement: "x7MhN",
+    header: "_2vLUd",
+    year: "_1VWY-",
+    date: "_3K2Ws",
+    calendarWrapper: "_1t-4v",
+    yearsDisplay: "_2OzvT",
+    monthsDisplay: "_2DDdC",
+    dialog: "_3fCV6",
+    button: "_2hL6u",
+    calendar: "_1X9ls",
+    prev: "Nv9Bc",
+    next: "_3iPkS",
+    title: "_2ESpD",
+    years: "zEdgW",
+    active: "_1pjXb",
+    week: "PcByv",
+    days: "_1qh3T",
+    day: "_2qF_L",
+    month: "_1hSm5",
+    slideRightEnter: "Rk89h",
+    slideRightLeave: "_1nam4",
+    slideRightEnterActive: "m5B3T",
+    slideRightLeaveActive: "_2bZap",
+    slideLeftEnter: "bGml_",
+    slideLeftLeave: "_2WGqM",
+    slideLeftEnterActive: "_3Ghls",
+    slideLeftLeaveActive: "_2WLHG",
+  },
+  RTInput: {
+    input: "lFVgC",
+    withIcon: "_1nKdf",
+    icon: "_3ga1V",
+    inputElement: "_4bZUj",
+    bar: "_3FySS",
+    label: "_34120",
+    fixed: "GRQEP",
+    required: "_2G0aY",
+    hint: "bMyi_",
+    filled: "_34NWn",
+    error: "_2k5Jz",
+    counter: "_1oTuT",
+    disabled: "_3ZfJq",
+    errored: "_2s74E",
+    hidden: "_2gAMv",
+  },
+  RTDialog: {
+    wrapper: "_3nrqp",
+    dialog: "_3lw90",
+    active: "_3ea_1",
+    small: "_38VTT",
+    normal: "_1K3iz",
+    large: "_10LcP",
+    fullscreen: "_3tLXQ",
+    title: "_2J-aP",
+    body: "_1Ivuq",
+    navigation: "wgwdj",
+    button: "_22_c6",
+  },
+  RTOverlay: { overlay: "_2LA9x", active: "_1mb5R" },
+};