From 8b90e6f148bcad498eaf5b299e2963e340b7873f Mon Sep 17 00:00:00 2001 From: RasmusErik Voel Jensen Date: Thu, 25 May 2017 18:32:17 +0200 Subject: [PATCH] example: with react-toolbox (#2047) * example with react-toolbox * JavaScript standard --- examples/with-react-toolbox/README.md | 27 +++++++++++++++ examples/with-react-toolbox/package.json | 35 ++++++++++++++++++++ examples/with-react-toolbox/pages/index.js | 16 +++++++++ examples/with-react-toolbox/static/theme.css | 1 + examples/with-react-toolbox/static/theme.js | 1 + 5 files changed, 80 insertions(+) create mode 100644 examples/with-react-toolbox/README.md create mode 100644 examples/with-react-toolbox/package.json create mode 100644 examples/with-react-toolbox/pages/index.js create mode 100644 examples/with-react-toolbox/static/theme.css create mode 100644 examples/with-react-toolbox/static/theme.js diff --git a/examples/with-react-toolbox/README.md b/examples/with-react-toolbox/README.md new file mode 100644 index 00000000..c0a02453 --- /dev/null +++ b/examples/with-react-toolbox/README.md @@ -0,0 +1,27 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-toolbox) + +# With react-toolbox example + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-toolbox +cd with-react-toolbox +``` + +Install it and run: + +```bash +yarn +yarn dev +``` + +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 `static/theme.js` and `static/theme.css`. The `"reactToolbox"` configuration includes styling, and the list of react-toolbox components to include. + +## The idea behind the 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 diff --git a/examples/with-react-toolbox/package.json b/examples/with-react-toolbox/package.json new file mode 100644 index 00000000..2957e31c --- /dev/null +++ b/examples/with-react-toolbox/package.json @@ -0,0 +1,35 @@ +{ + "name": "with-react-toolbox", + "version": "0.0.1", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start", + "toolbox": "react-toolbox-themr" + }, + "dependencies": { + "classnames": "^2.2.5", + "next": "latest", + "react": "^15.5.4", + "react-addons-css-transition-group": "^15.5.2", + "react-dom": "^15.5.4", + "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": "static" + } +} diff --git a/examples/with-react-toolbox/pages/index.js b/examples/with-react-toolbox/pages/index.js new file mode 100644 index 00000000..0c099a5a --- /dev/null +++ b/examples/with-react-toolbox/pages/index.js @@ -0,0 +1,16 @@ +import ThemeProvider from 'react-toolbox/lib/ThemeProvider' +import theme from '../static/theme' +import Head from 'next/head' + +import Button from 'react-toolbox/lib/button/Button' + +export default () => ( +
+ + + + + + +
+) diff --git a/examples/with-react-toolbox/static/theme.css b/examples/with-react-toolbox/static/theme.css new file mode 100644 index 00000000..d5064105 --- /dev/null +++ b/examples/with-react-toolbox/static/theme.css @@ -0,0 +1 @@ +._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 .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,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:.1px;margin:0;opacity:0;overflow:hidden;padding:0;position:absolute;width:.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,.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,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}._1ZxqC:active{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}._1ZxqC:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36)}._221ic{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}._1jWAQ{background:0 0}._3IRMZ{border-radius:50%;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(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,.2)}._3tTAW:not([disabled])._1jWAQ:hover{background:rgba(63,81,181,.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,.2)}._2wp6F:not([disabled])._1jWAQ:hover{background:rgba(255,64,129,.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,.2)}._2CPs4:not([disabled])._1jWAQ:hover{background:rgba(33,33,33,.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,.2)}._2CPs4:not([disabled])._2SPZr._1jWAQ:hover{background:rgba(33,33,33,.2)}._2CPs4._2SPZr[disabled]{background-color:rgba(0,0,0,.08);color:rgba(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:.8s;z-index:100}._3SV_u._2OZWa{opacity:.3;transition-property:none}._3SV_u._3O2Ue{opacity:.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 .3s cubic-bezier(.4,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 .3s cubic-bezier(.4,0,.2,1)}._1t-4v{padding:10px 5px 0}._2OzvT ._3K2Ws{opacity:.6}._2OzvT ._1VWY-{font-size:16px}._2DDdC ._1VWY-{opacity:.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,.2)}._3fCV6>[role=navigation]>._2hL6u:focus:not(:active){background:rgba(63,81,181,.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:.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:.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,.21);color:#fff}._2qF_L._1pjXb>span{background:#3f51b5;color:#fff}._2qF_L:hover:not(.Cf3yF)>span{cursor:pointer}._2qF_L.Cf3yF{opacity:.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:.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,.26);display:block;font-size:24px!important;height:48px;left:-68px;line-height:48px!important;position:absolute;text-align:center;top:16px;transition:color .3s cubic-bezier(.4,0,.2,1);width:48px}._4bZUj{background-color:transparent;border-bottom:1px solid rgba(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,.26);font-size:16px;left:0;line-height:16px;pointer-events:none;position:absolute;top:32px;transition-duration:.3s;transition-property:top,font-size,color;transition-timing-function:cubic-bezier(.4,0,.2,1)}._34120.GRQEP~.bMyi_{display:none}.bMyi_{color:rgba(0,0,0,.26);font-size:16px;left:0;line-height:16px;opacity:1;pointer-events:none;position:absolute;top:32px;transition-duration:.3s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,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:.2s;transition-property:width,background-color;transition-timing-function:cubic-bezier(.4,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,.26);position:absolute;right:0}._3ZfJq>._4bZUj{border-bottom-style:dotted;color:rgba(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,.3),0 15px 20px rgba(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 .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,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:.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 .3s cubic-bezier(.4,0,.2,1);width:100vw}._2LA9x._1mb5R{opacity:.6;pointer-events:all} \ No newline at end of file diff --git a/examples/with-react-toolbox/static/theme.js b/examples/with-react-toolbox/static/theme.js new file mode 100644 index 00000000..781cce7e --- /dev/null +++ b/examples/with-react-toolbox/static/theme.js @@ -0,0 +1 @@ +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'}}