@antimatter-audio/antimatter-ui 5.8.2 → 5.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.d.ts +13 -3
  2. package/dist/index.js +130 -97
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -303,8 +303,8 @@ interface LayoutProps {
303
303
  direction?: DIRECTION;
304
304
  globalTheme?: GLOBAL_DEFAULT_THEMES | string;
305
305
  componentTheme?: {
306
- backgroundColor: GLOBAL_NAMED_COLORS | string;
307
- backgroundImage: string;
306
+ backgroundColor?: GLOBAL_NAMED_COLORS | string;
307
+ backgroundImage?: string;
308
308
  };
309
309
  role?: LAYOUT_ROLES;
310
310
  width?: WIDTH | string;
@@ -353,4 +353,14 @@ declare namespace IndicatorLight {
353
353
  var TYPE: typeof INDICATOR_LIGHT_TYPE;
354
354
  }
355
355
 
356
- export { Button, Col, Dropdown, IndicatorLight, Layout, Matrix, Row, Slider, Tabs, TextHeader, TextLabel };
356
+ interface KeyValueDisplayScreenProps {
357
+ data?: {
358
+ key: string;
359
+ value: string | number;
360
+ };
361
+ className?: string;
362
+ style?: React__default.CSSProperties;
363
+ }
364
+ declare function KeyValueDisplayScreen({ className, style, data, }: KeyValueDisplayScreenProps): React__default.JSX.Element;
365
+
366
+ export { Button, Col, Dropdown, IndicatorLight, KeyValueDisplayScreen, Layout, Matrix, Row, Slider, Tabs, TextHeader, TextLabel };
package/dist/index.js CHANGED
@@ -32,10 +32,10 @@ function styleInject(css, ref) {
32
32
  }
33
33
  }
34
34
 
35
- var css_248z$a = "/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol,\nul {\n list-style: none;\n}\n\nblockquote,\nq {\n quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n content: \"\";\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n.theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.flex-align-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.flex-align-center-vertical {\n display: flex;\n align-items: center;\n}\n\n.flex-align-center-horizontal {\n display: flex;\n justify-content: center;\n}\n\n.flex-align-start {\n display: flex;\n justify-content: flex-start;\n}\n\n.flex-align-end {\n display: flex;\n justify-content: flex-end;\n}\n\n.flex-direction-column {\n display: flex;\n flex-direction: column;\n}\n\n.flex-direction-row {\n display: flex;\n flex-direction: row;\n}\n\n.flex-wrap-nowrap {\n flex-wrap: nowrap;\n}\n\n.theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.padding-around-xsmall {\n padding: 2px;\n}\n\n.padding-around-small {\n padding: 4px;\n}\n\n.padding-around-mediumsmall {\n padding: 8px;\n}\n\n.padding-around-medium {\n padding: 12px;\n}\n\n.padding-around-mediumlarge {\n padding: 16px;\n}\n\n.padding-around-large {\n padding: 20px;\n}\n\n.padding-around-xlarge {\n padding: 24px;\n}\n\n.padding-vertical-xsmall {\n padding-top: 2px;\n padding-bottom: 2px;\n}\n\n.padding-vertical-small {\n padding-top: 4px;\n padding-bottom: 4px;\n}\n\n.padding-vertical-mediumsmall {\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.padding-vertical-medium {\n padding-top: 12px;\n padding-bottom: 12px;\n}\n\n.padding-vertical-mediumlarge {\n padding-top: 16px;\n padding-bottom: 16px;\n}\n\n.padding-vertical-large {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.padding-vertical-xlarge {\n padding-top: 24px;\n padding-bottom: 24px;\n}\n\n.padding-horizontal-xsmall {\n padding-right: 2px;\n padding-left: 2px;\n}\n\n.padding-horizontal-small {\n padding-right: 4px;\n padding-left: 4px;\n}\n\n.padding-horizontal-mediumsmall {\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.padding-horizontal-medium {\n padding-right: 12px;\n padding-left: 12px;\n}\n\n.padding-horizontal-mediumlarge {\n padding-right: 16px;\n padding-left: 16px;\n}\n\n.padding-horizontal-large {\n padding-right: 20px;\n padding-left: 20px;\n}\n\n.padding-horizontal-xlarge {\n padding-right: 24px;\n padding-left: 24px;\n}\n\n.padding-top-xsmall {\n padding-top: 2px;\n}\n\n.padding-top-small {\n padding-top: 4px;\n}\n\n.padding-top-mediumsmall {\n padding-top: 8px;\n}\n\n.padding-top-medium {\n padding-top: 12px;\n}\n\n.padding-top-mediumlarge {\n padding-top: 16px;\n}\n\n.padding-top-large {\n padding-top: 20px;\n}\n\n.padding-top-xlarge {\n padding-top: 24px;\n}\n\n.padding-right-xsmall {\n padding-right: 2px;\n}\n\n.padding-right-small {\n padding-right: 4px;\n}\n\n.padding-right-mediumsmall {\n padding-right: 8px;\n}\n\n.padding-right-medium {\n padding-right: 12px;\n}\n\n.padding-right-mediumlarge {\n padding-right: 16px;\n}\n\n.padding-right-large {\n padding-right: 20px;\n}\n\n.padding-right-xlarge {\n padding-right: 24px;\n}\n\n.padding-bottom-xsmall {\n padding-bottom: 2px;\n}\n\n.padding-bottom-small {\n padding-bottom: 4px;\n}\n\n.padding-bottom-mediumsmall {\n padding-bottom: 8px;\n}\n\n.padding-bottom-medium {\n padding-bottom: 12px;\n}\n\n.padding-bottom-mediumlarge {\n padding-bottom: 16px;\n}\n\n.padding-bottom-large {\n padding-bottom: 20px;\n}\n\n.padding-bottom-xlarge {\n padding-bottom: 24px;\n}\n\n.padding-left-xsmall {\n padding-left: 2px;\n}\n\n.padding-left-small {\n padding-left: 4px;\n}\n\n.padding-left-mediumsmall {\n padding-left: 8px;\n}\n\n.padding-left-medium {\n padding-left: 12px;\n}\n\n.padding-left-mediumlarge {\n padding-left: 16px;\n}\n\n.padding-left-large {\n padding-left: 20px;\n}\n\n.padding-left-xlarge {\n padding-left: 24px;\n}\n\n.gap-xsmall {\n gap: 2px;\n}\n\n.gap-small {\n gap: 4px;\n}\n\n.gap-mediumsmall {\n gap: 8px;\n}\n\n.gap-medium {\n gap: 12px;\n}\n\n.gap-mediumlarge {\n gap: 16px;\n}\n\n.gap-large {\n gap: 20px;\n}\n\n.gap-xlarge {\n gap: 24px;\n}\n\n.height-100-percent {\n height: 100%;\n}\n\n.flex-auto {\n flex: auto;\n}\n\n* {\n font-family: \"LeagueSpartanBold\", arial, sans-serif;\n}\n\n@font-face {\n font-family: \"LeagueSpartanRegular\";\n src: local(\"LeagueSpartanRegular\"), url(\"./common/assets/fonts/LeagueSpartan-Regular.ttf\") format(\"truetype\");\n font-weight: regular;\n}\n@font-face {\n font-family: \"LeagueSpartanBold\";\n src: local(\"LeagueSpartanBold\"), url(\"./common/assets/fonts/LeagueSpartan-Bold.ttf\") format(\"truetype\");\n font-weight: bold;\n}\n@font-face {\n font-family: \"LeagueSpartanExtraBold\";\n src: local(\"LeagueSpartanExtraBold\"), url(\"./common/assets/fonts/LeagueSpartan-ExtraBold.ttf\") format(\"truetype\");\n font-weight: bolder;\n}\n@font-face {\n font-family: \"LeagueSpartanThin\";\n src: local(\"LeagueSpartanThin\"), url(\"./common/assets/fonts/LeagueSpartan-Thin.ttf\") format(\"truetype\");\n font-weight: light;\n}";
35
+ var css_248z$a = "/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol,\nul {\n list-style: none;\n}\n\nblockquote,\nq {\n quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n content: \"\";\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n.theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.flex-align-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.flex-align-center-vertical {\n display: flex;\n align-items: center;\n}\n\n.flex-align-center-horizontal {\n display: flex;\n justify-content: center;\n}\n\n.flex-align-start {\n display: flex;\n justify-content: flex-start;\n}\n\n.flex-align-end {\n display: flex;\n justify-content: flex-end;\n}\n\n.flex-direction-column {\n display: flex;\n flex-direction: column;\n}\n\n.flex-direction-row {\n display: flex;\n flex-direction: row;\n}\n\n.flex-wrap-nowrap {\n flex-wrap: nowrap;\n}\n\n.theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.padding-around-xsmall {\n padding: 2px;\n}\n\n.padding-around-small {\n padding: 4px;\n}\n\n.padding-around-mediumsmall {\n padding: 8px;\n}\n\n.padding-around-medium {\n padding: 12px;\n}\n\n.padding-around-mediumlarge {\n padding: 16px;\n}\n\n.padding-around-large {\n padding: 20px;\n}\n\n.padding-around-xlarge {\n padding: 24px;\n}\n\n.padding-vertical-xsmall {\n padding-top: 2px;\n padding-bottom: 2px;\n}\n\n.padding-vertical-small {\n padding-top: 4px;\n padding-bottom: 4px;\n}\n\n.padding-vertical-mediumsmall {\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.padding-vertical-medium {\n padding-top: 12px;\n padding-bottom: 12px;\n}\n\n.padding-vertical-mediumlarge {\n padding-top: 16px;\n padding-bottom: 16px;\n}\n\n.padding-vertical-large {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.padding-vertical-xlarge {\n padding-top: 24px;\n padding-bottom: 24px;\n}\n\n.padding-horizontal-xsmall {\n padding-right: 2px;\n padding-left: 2px;\n}\n\n.padding-horizontal-small {\n padding-right: 4px;\n padding-left: 4px;\n}\n\n.padding-horizontal-mediumsmall {\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.padding-horizontal-medium {\n padding-right: 12px;\n padding-left: 12px;\n}\n\n.padding-horizontal-mediumlarge {\n padding-right: 16px;\n padding-left: 16px;\n}\n\n.padding-horizontal-large {\n padding-right: 20px;\n padding-left: 20px;\n}\n\n.padding-horizontal-xlarge {\n padding-right: 24px;\n padding-left: 24px;\n}\n\n.padding-top-xsmall {\n padding-top: 2px;\n}\n\n.padding-top-small {\n padding-top: 4px;\n}\n\n.padding-top-mediumsmall {\n padding-top: 8px;\n}\n\n.padding-top-medium {\n padding-top: 12px;\n}\n\n.padding-top-mediumlarge {\n padding-top: 16px;\n}\n\n.padding-top-large {\n padding-top: 20px;\n}\n\n.padding-top-xlarge {\n padding-top: 24px;\n}\n\n.padding-right-xsmall {\n padding-right: 2px;\n}\n\n.padding-right-small {\n padding-right: 4px;\n}\n\n.padding-right-mediumsmall {\n padding-right: 8px;\n}\n\n.padding-right-medium {\n padding-right: 12px;\n}\n\n.padding-right-mediumlarge {\n padding-right: 16px;\n}\n\n.padding-right-large {\n padding-right: 20px;\n}\n\n.padding-right-xlarge {\n padding-right: 24px;\n}\n\n.padding-bottom-xsmall {\n padding-bottom: 2px;\n}\n\n.padding-bottom-small {\n padding-bottom: 4px;\n}\n\n.padding-bottom-mediumsmall {\n padding-bottom: 8px;\n}\n\n.padding-bottom-medium {\n padding-bottom: 12px;\n}\n\n.padding-bottom-mediumlarge {\n padding-bottom: 16px;\n}\n\n.padding-bottom-large {\n padding-bottom: 20px;\n}\n\n.padding-bottom-xlarge {\n padding-bottom: 24px;\n}\n\n.padding-left-xsmall {\n padding-left: 2px;\n}\n\n.padding-left-small {\n padding-left: 4px;\n}\n\n.padding-left-mediumsmall {\n padding-left: 8px;\n}\n\n.padding-left-medium {\n padding-left: 12px;\n}\n\n.padding-left-mediumlarge {\n padding-left: 16px;\n}\n\n.padding-left-large {\n padding-left: 20px;\n}\n\n.padding-left-xlarge {\n padding-left: 24px;\n}\n\n.gap-xsmall {\n gap: 2px;\n}\n\n.gap-small {\n gap: 4px;\n}\n\n.gap-mediumsmall {\n gap: 8px;\n}\n\n.gap-medium {\n gap: 12px;\n}\n\n.gap-mediumlarge {\n gap: 16px;\n}\n\n.gap-large {\n gap: 20px;\n}\n\n.gap-xlarge {\n gap: 24px;\n}\n\n.height-100-percent {\n height: 100%;\n}\n\n.flex-auto {\n flex: auto;\n}\n\n* {\n font-family: \"LeagueSpartanBold\", arial, sans-serif;\n}\n\n@font-face {\n font-family: \"LeagueSpartanRegular\";\n src: local(\"LeagueSpartanRegular\"), url(\"./common/assets/fonts/LeagueSpartan-Regular.ttf\") format(\"truetype\");\n font-weight: regular;\n}\n@font-face {\n font-family: \"LeagueSpartanBold\";\n src: local(\"LeagueSpartanBold\"), url(\"./common/assets/fonts/LeagueSpartan-Bold.ttf\") format(\"truetype\");\n font-weight: bold;\n}\n@font-face {\n font-family: \"LeagueSpartanExtraBold\";\n src: local(\"LeagueSpartanExtraBold\"), url(\"./common/assets/fonts/LeagueSpartan-ExtraBold.ttf\") format(\"truetype\");\n font-weight: bolder;\n}\n@font-face {\n font-family: \"LeagueSpartanThin\";\n src: local(\"LeagueSpartanThin\"), url(\"./common/assets/fonts/LeagueSpartan-Thin.ttf\") format(\"truetype\");\n font-weight: light;\n}";
36
36
  styleInject(css_248z$a);
37
37
 
38
- var css_248z$9 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.Tabs {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n border-radius: 3px;\n appearance: none;\n user-select: none;\n}\n.Tabs .Tabs-item {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n appearance: none;\n user-select: none;\n}\n.Tabs .Tabs-item:first-child {\n border-radius: 3px 0 0 3px;\n}\n.Tabs .Tabs-item:last-child {\n border-radius: 0 3px 3px 0;\n}\n.Tabs .Tabs-item:hover, .Tabs .Tabs-item:focus, .Tabs .Tabs-item:active {\n outline: 0;\n}";
38
+ var css_248z$9 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.Tabs {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n border-radius: 3px;\n appearance: none;\n user-select: none;\n}\n.Tabs .Tabs-item {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n appearance: none;\n user-select: none;\n}\n.Tabs .Tabs-item:first-child {\n border-radius: 3px 0 0 3px;\n}\n.Tabs .Tabs-item:last-child {\n border-radius: 0 3px 3px 0;\n}\n.Tabs .Tabs-item:hover, .Tabs .Tabs-item:focus, .Tabs .Tabs-item:active {\n outline: 0;\n}";
39
39
  styleInject(css_248z$9);
40
40
 
41
41
  /**
@@ -210,7 +210,7 @@ function Tabs(param) {
210
210
  Tabs.TEXT_COLOR = GLOBAL_NAMED_COLORS;
211
211
  Tabs.BACKGROUND_COLOR = GLOBAL_NAMED_COLORS;
212
212
 
213
- var css_248z$8 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.Button {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #333333;\n color: #D9D9D9;\n padding-right: 8px;\n padding-left: 8px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n border-radius: 3px;\n appearance: none;\n user-select: none;\n min-width: 1rem;\n min-height: 1rem;\n}\n\n.Button-small {\n height: 8px;\n}\n\n.Button-large {\n height: 12px;\n}\n\n.Button:hover {\n outline: 0;\n}\n\n.Button:disabled,\n.Button.disabled {\n cursor: not-allowed;\n}";
213
+ var css_248z$8 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.Button {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #333333;\n color: #D9D9D9;\n padding-right: 8px;\n padding-left: 8px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n border-radius: 3px;\n appearance: none;\n user-select: none;\n min-width: 1rem;\n min-height: 1rem;\n}\n\n.Button-small {\n height: 8px;\n}\n\n.Button-large {\n height: 12px;\n}\n\n.Button:hover {\n outline: 0;\n}\n\n.Button:disabled,\n.Button.disabled {\n cursor: not-allowed;\n}";
214
214
  styleInject(css_248z$8);
215
215
 
216
216
  var BUTTON_SIZE;
@@ -232,7 +232,7 @@ function _array_like_to_array$2(arr, len) {
232
232
  function _array_with_holes$2(arr) {
233
233
  if (Array.isArray(arr)) return arr;
234
234
  }
235
- function _define_property$6(obj, key, value) {
235
+ function _define_property$7(obj, key, value) {
236
236
  if (key in obj) {
237
237
  Object.defineProperty(obj, key, {
238
238
  value: value,
@@ -272,7 +272,7 @@ function _iterable_to_array_limit$2(arr, i) {
272
272
  function _non_iterable_rest$2() {
273
273
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
274
274
  }
275
- function _object_spread$6(target) {
275
+ function _object_spread$7(target) {
276
276
  for(var i = 1; i < arguments.length; i++){
277
277
  var source = arguments[i] != null ? arguments[i] : {};
278
278
  var ownKeys = Object.keys(source);
@@ -282,12 +282,12 @@ function _object_spread$6(target) {
282
282
  }));
283
283
  }
284
284
  ownKeys.forEach(function(key) {
285
- _define_property$6(target, key, source[key]);
285
+ _define_property$7(target, key, source[key]);
286
286
  });
287
287
  }
288
288
  return target;
289
289
  }
290
- function ownKeys$6(object, enumerableOnly) {
290
+ function ownKeys$5(object, enumerableOnly) {
291
291
  var keys = Object.keys(object);
292
292
  if (Object.getOwnPropertySymbols) {
293
293
  var symbols = Object.getOwnPropertySymbols(object);
@@ -295,12 +295,12 @@ function ownKeys$6(object, enumerableOnly) {
295
295
  }
296
296
  return keys;
297
297
  }
298
- function _object_spread_props$6(target, source) {
298
+ function _object_spread_props$5(target, source) {
299
299
  source = source != null ? source : {};
300
300
  if (Object.getOwnPropertyDescriptors) {
301
301
  Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
302
302
  } else {
303
- ownKeys$6(Object(source)).forEach(function(key) {
303
+ ownKeys$5(Object(source)).forEach(function(key) {
304
304
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
305
305
  });
306
306
  }
@@ -350,7 +350,7 @@ function Button(param) {
350
350
  id: id,
351
351
  onMouseDown: handleMouseDown,
352
352
  disabled: disabled,
353
- style: _object_spread_props$6(_object_spread$6({}, style), {
353
+ style: _object_spread_props$5(_object_spread$7({}, style), {
354
354
  color: (componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.textColor) || '',
355
355
  background: (componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.backgroundColor) || '',
356
356
  backgroundImage: (componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.backgroundImage) || ''
@@ -369,7 +369,7 @@ var FLEX_DIRECTION;
369
369
  FLEX_DIRECTION[FLEX_DIRECTION["COLUMN"] = 1] = "COLUMN";
370
370
  })(FLEX_DIRECTION || (FLEX_DIRECTION = {}));
371
371
 
372
- function _define_property$5(obj, key, value) {
372
+ function _define_property$6(obj, key, value) {
373
373
  if (key in obj) {
374
374
  Object.defineProperty(obj, key, {
375
375
  value: value,
@@ -382,7 +382,7 @@ function _define_property$5(obj, key, value) {
382
382
  }
383
383
  return obj;
384
384
  }
385
- function _object_spread$5(target) {
385
+ function _object_spread$6(target) {
386
386
  for(var i = 1; i < arguments.length; i++){
387
387
  var source = arguments[i] != null ? arguments[i] : {};
388
388
  var ownKeys = Object.keys(source);
@@ -392,26 +392,7 @@ function _object_spread$5(target) {
392
392
  }));
393
393
  }
394
394
  ownKeys.forEach(function(key) {
395
- _define_property$5(target, key, source[key]);
396
- });
397
- }
398
- return target;
399
- }
400
- function ownKeys$5(object, enumerableOnly) {
401
- var keys = Object.keys(object);
402
- if (Object.getOwnPropertySymbols) {
403
- var symbols = Object.getOwnPropertySymbols(object);
404
- keys.push.apply(keys, symbols);
405
- }
406
- return keys;
407
- }
408
- function _object_spread_props$5(target, source) {
409
- source = source != null ? source : {};
410
- if (Object.getOwnPropertyDescriptors) {
411
- Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
412
- } else {
413
- ownKeys$5(Object(source)).forEach(function(key) {
414
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
395
+ _define_property$6(target, key, source[key]);
415
396
  });
416
397
  }
417
398
  return target;
@@ -425,12 +406,12 @@ function Col(param) {
425
406
  var offset = param.offset, centerContentHorizontal = param.centerContentHorizontal, centerContentVertical = param.centerContentVertical, alignContentRight = param.alignContentRight, className = param.className, role = param.role, flexDirection = param.flexDirection, gap = param.gap, children = param.children, onClick = param.onClick, span = param.span, componentTheme = param.componentTheme, _param_padding = param.padding, padding = _param_padding === void 0 ? [] : _param_padding, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style, _param_border = param.border, border = _param_border === void 0 ? false : _param_border;
426
407
  return /*#__PURE__*/ React.createElement("div", {
427
408
  // style={{ ...style, border: border ? '2px solid #888' : '' }}
428
- style: _object_spread$5(_object_spread_props$5(_object_spread$5({}, style), {
409
+ style: _object_spread$6({
429
410
  border: border ? '2px solid #888' : ''
430
- }), componentTheme && {
411
+ }, componentTheme && {
431
412
  background: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.backgroundColor,
432
413
  backgroundImage: componentTheme.backgroundImage
433
- }),
414
+ }, style),
434
415
  onClick: onClick,
435
416
  className: classnames(className, span ? 'col-xs-' + span : 'flex-auto', offset && 'col-xs-offset-' + offset, centerContentHorizontal && 'flex-align-center-horizontal', centerContentVertical && 'flex-align-center-vertical', flexDirection === FLEX_DIRECTION.COLUMN && 'flex-direction-column', flexDirection === FLEX_DIRECTION.ROW && 'flex-direction-row', alignContentRight && 'flex-align-end', role === "main" && 'bg-main', role === "section" && 'bg-section', "gap-".concat(gap), padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
436
417
  padding[0]
@@ -448,7 +429,7 @@ Col.ROLE = LAYOUT_ROLES$2;
448
429
  Col.FLEX_DIRECTION = FLEX_DIRECTION;
449
430
  Col.GAP = SPACING;
450
431
 
451
- function _define_property$4(obj, key, value) {
432
+ function _define_property$5(obj, key, value) {
452
433
  if (key in obj) {
453
434
  Object.defineProperty(obj, key, {
454
435
  value: value,
@@ -461,7 +442,7 @@ function _define_property$4(obj, key, value) {
461
442
  }
462
443
  return obj;
463
444
  }
464
- function _object_spread$4(target) {
445
+ function _object_spread$5(target) {
465
446
  for(var i = 1; i < arguments.length; i++){
466
447
  var source = arguments[i] != null ? arguments[i] : {};
467
448
  var ownKeys = Object.keys(source);
@@ -471,26 +452,7 @@ function _object_spread$4(target) {
471
452
  }));
472
453
  }
473
454
  ownKeys.forEach(function(key) {
474
- _define_property$4(target, key, source[key]);
475
- });
476
- }
477
- return target;
478
- }
479
- function ownKeys$4(object, enumerableOnly) {
480
- var keys = Object.keys(object);
481
- if (Object.getOwnPropertySymbols) {
482
- var symbols = Object.getOwnPropertySymbols(object);
483
- keys.push.apply(keys, symbols);
484
- }
485
- return keys;
486
- }
487
- function _object_spread_props$4(target, source) {
488
- source = source != null ? source : {};
489
- if (Object.getOwnPropertyDescriptors) {
490
- Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
491
- } else {
492
- ownKeys$4(Object(source)).forEach(function(key) {
493
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
455
+ _define_property$5(target, key, source[key]);
494
456
  });
495
457
  }
496
458
  return target;
@@ -506,11 +468,11 @@ function Row(param) {
506
468
  ] : _param_padding, _param_flexDirection = param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FLEX_DIRECTION.ROW : _param_flexDirection, _param_border = param.border, border = _param_border === void 0 ? false : _param_border;
507
469
  var isColumn = flexDirection === FLEX_DIRECTION.COLUMN;
508
470
  return /*#__PURE__*/ React.createElement("div", {
509
- style: _object_spread_props$4(_object_spread$4({}, style), {
471
+ style: _object_spread$5({
510
472
  border: border ? '2px solid #888' : '',
511
473
  flexWrap: wrap ? 'wrap' : 'nowrap',
512
474
  width: '100%'
513
- }),
475
+ }, style),
514
476
  onClick: onClick,
515
477
  className: classnames('row', className, gap && "gap-".concat(gap), role === "main" && 'bg-main', role === "section" && 'bg-section', background && "background-global-background-color-".concat(background), isColumn && 'flex-direction-column flex-wrap-nowrap', padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
516
478
  padding[0]
@@ -532,7 +494,7 @@ Row.GAP = SPACING;
532
494
  var css_248z$7 = ".wrapper {\n box-sizing: border-box;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.container-fluid {\n margin-right: auto;\n margin-left: auto;\n padding-right: 2rem;\n padding-left: 2rem;\n}\n\n.row {\n box-sizing: border-box;\n display: flex;\n flex: 0, 1, auto;\n margin-right: 0;\n margin-left: 0;\n}\n\n.row.reverse {\n flex-direction: row-reverse;\n}\n\n.row.flex-direction--column {\n flex-direction: column;\n}\n\n.col.reverse {\n flex-direction: column-reverse;\n}\n\n.col-grow--zero {\n flex-grow: 0;\n}\n\n.col-grow--one {\n flex-grow: 1;\n}\n\n.col-xs {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: auto;\n}\n.flex-direction--column .col-xs {\n flex-grow: 1;\n}\n\n.col-xs-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 8.3333333333%;\n max-width: 8.3333333333%;\n}\n.flex-direction--column .col-xs-1 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-1 {\n max-width: 100%;\n}\n\n.col-xs-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 16.6666666667%;\n max-width: 16.6666666667%;\n}\n.flex-direction--column .col-xs-2 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-2 {\n max-width: 100%;\n}\n\n.col-xs-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 25%;\n max-width: 25%;\n}\n.flex-direction--column .col-xs-3 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-3 {\n max-width: 100%;\n}\n\n.col-xs-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 33.3333333333%;\n max-width: 33.3333333333%;\n}\n.flex-direction--column .col-xs-4 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-4 {\n max-width: 100%;\n}\n\n.col-xs-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 41.6666666667%;\n max-width: 41.6666666667%;\n}\n.flex-direction--column .col-xs-5 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-5 {\n max-width: 100%;\n}\n\n.col-xs-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 50%;\n max-width: 50%;\n}\n.flex-direction--column .col-xs-6 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-6 {\n max-width: 100%;\n}\n\n.col-xs-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 58.3333333333%;\n max-width: 58.3333333333%;\n}\n.flex-direction--column .col-xs-7 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-7 {\n max-width: 100%;\n}\n\n.col-xs-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 66.6666666667%;\n max-width: 66.6666666667%;\n}\n.flex-direction--column .col-xs-8 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-8 {\n max-width: 100%;\n}\n\n.col-xs-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 75%;\n max-width: 75%;\n}\n.flex-direction--column .col-xs-9 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-9 {\n max-width: 100%;\n}\n\n.col-xs-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 83.3333333333%;\n max-width: 83.3333333333%;\n}\n.flex-direction--column .col-xs-10 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-10 {\n max-width: 100%;\n}\n\n.col-xs-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 91.6666666667%;\n max-width: 91.6666666667%;\n}\n.flex-direction--column .col-xs-11 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-11 {\n max-width: 100%;\n}\n\n.col-xs-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 100%;\n max-width: 100%;\n}\n.flex-direction--column .col-xs-12 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-12 {\n max-width: 100%;\n}\n\n.col-xs-offset-0 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 0;\n}\n.flex-direction--column .col-xs-offset-0 {\n flex-grow: 1;\n}\n\n.col-xs-offset-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 8.3333333333%;\n}\n.flex-direction--column .col-xs-offset-1 {\n flex-grow: 1;\n}\n\n.col-xs-offset-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 16.6666666667%;\n}\n.flex-direction--column .col-xs-offset-2 {\n flex-grow: 1;\n}\n\n.col-xs-offset-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 25%;\n}\n.flex-direction--column .col-xs-offset-3 {\n flex-grow: 1;\n}\n\n.col-xs-offset-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 33.3333333333%;\n}\n.flex-direction--column .col-xs-offset-4 {\n flex-grow: 1;\n}\n\n.col-xs-offset-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 41.6666666667%;\n}\n.flex-direction--column .col-xs-offset-5 {\n flex-grow: 1;\n}\n\n.col-xs-offset-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 50%;\n}\n.flex-direction--column .col-xs-offset-6 {\n flex-grow: 1;\n}\n\n.col-xs-offset-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 58.3333333333%;\n}\n.flex-direction--column .col-xs-offset-7 {\n flex-grow: 1;\n}\n\n.col-xs-offset-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 66.6666666667%;\n}\n.flex-direction--column .col-xs-offset-8 {\n flex-grow: 1;\n}\n\n.col-xs-offset-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 75%;\n}\n.flex-direction--column .col-xs-offset-9 {\n flex-grow: 1;\n}\n\n.col-xs-offset-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 83.3333333333%;\n}\n.flex-direction--column .col-xs-offset-10 {\n flex-grow: 1;\n}\n\n.col-xs-offset-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 91.6666666667%;\n}\n.flex-direction--column .col-xs-offset-11 {\n flex-grow: 1;\n}\n\n.col-xs-offset-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 100%;\n}\n.flex-direction--column .col-xs-offset-12 {\n flex-grow: 1;\n}\n\n.col-xs {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n}\n\n.start-xs {\n justify-content: flex-start;\n text-align: left;\n}\n\n.center-xs {\n justify-content: center;\n text-align: center;\n}\n\n.end-xs {\n justify-content: flex-end;\n text-align: right;\n}\n\n.top-xs {\n align-items: flex-start;\n}\n\n.middle-xs {\n align-items: center;\n}\n\n.bottom-xs {\n align-items: flex-end;\n}\n\n.around-xs {\n justify-content: space-around;\n}\n\n.between-xs {\n justify-content: space-between;\n}\n\n.first-xs {\n order: -1;\n}\n\n.last-xs {\n order: 1;\n}\n\n@media only screen and (min-width: 48em) {\n .container {\n width: 46rem;\n }\n .col-sm {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: auto;\n }\n .flex-direction--column .col-sm {\n flex-grow: 1;\n }\n .col-sm-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .flex-direction--column .col-sm-1 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-1 {\n max-width: 100%;\n }\n .col-sm-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .flex-direction--column .col-sm-2 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-2 {\n max-width: 100%;\n }\n .col-sm-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n .flex-direction--column .col-sm-3 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-3 {\n max-width: 100%;\n }\n .col-sm-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .flex-direction--column .col-sm-4 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-4 {\n max-width: 100%;\n }\n .col-sm-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 41.6666666667%;\n max-width: 41.6666666667%;\n }\n .flex-direction--column .col-sm-5 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-5 {\n max-width: 100%;\n }\n .col-sm-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n .flex-direction--column .col-sm-6 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-6 {\n max-width: 100%;\n }\n .col-sm-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 58.3333333333%;\n max-width: 58.3333333333%;\n }\n .flex-direction--column .col-sm-7 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-7 {\n max-width: 100%;\n }\n .col-sm-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .flex-direction--column .col-sm-8 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-8 {\n max-width: 100%;\n }\n .col-sm-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n .flex-direction--column .col-sm-9 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-9 {\n max-width: 100%;\n }\n .col-sm-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .flex-direction--column .col-sm-10 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-10 {\n max-width: 100%;\n }\n .col-sm-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .flex-direction--column .col-sm-11 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-11 {\n max-width: 100%;\n }\n .col-sm-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n .flex-direction--column .col-sm-12 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-12 {\n max-width: 100%;\n }\n .col-sm-offset-0 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 0;\n }\n .flex-direction--column .col-sm-offset-0 {\n flex-grow: 1;\n }\n .col-sm-offset-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 8.3333333333%;\n }\n .flex-direction--column .col-sm-offset-1 {\n flex-grow: 1;\n }\n .col-sm-offset-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 16.6666666667%;\n }\n .flex-direction--column .col-sm-offset-2 {\n flex-grow: 1;\n }\n .col-sm-offset-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 25%;\n }\n .flex-direction--column .col-sm-offset-3 {\n flex-grow: 1;\n }\n .col-sm-offset-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 33.3333333333%;\n }\n .flex-direction--column .col-sm-offset-4 {\n flex-grow: 1;\n }\n .col-sm-offset-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 41.6666666667%;\n }\n .flex-direction--column .col-sm-offset-5 {\n flex-grow: 1;\n }\n .col-sm-offset-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 50%;\n }\n .flex-direction--column .col-sm-offset-6 {\n flex-grow: 1;\n }\n .col-sm-offset-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 58.3333333333%;\n }\n .flex-direction--column .col-sm-offset-7 {\n flex-grow: 1;\n }\n .col-sm-offset-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 66.6666666667%;\n }\n .flex-direction--column .col-sm-offset-8 {\n flex-grow: 1;\n }\n .col-sm-offset-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 75%;\n }\n .flex-direction--column .col-sm-offset-9 {\n flex-grow: 1;\n }\n .col-sm-offset-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 83.3333333333%;\n }\n .flex-direction--column .col-sm-offset-10 {\n flex-grow: 1;\n }\n .col-sm-offset-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 91.6666666667%;\n }\n .flex-direction--column .col-sm-offset-11 {\n flex-grow: 1;\n }\n .col-sm-offset-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 100%;\n }\n .flex-direction--column .col-sm-offset-12 {\n flex-grow: 1;\n }\n .col-sm {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n .start-sm {\n justify-content: flex-start;\n text-align: left;\n }\n .center-sm {\n justify-content: center;\n text-align: center;\n }\n .end-sm {\n justify-content: flex-end;\n text-align: right;\n }\n .top-sm {\n align-items: flex-start;\n }\n .middle-sm {\n align-items: center;\n }\n .bottom-sm {\n align-items: flex-end;\n }\n .around-sm {\n justify-content: space-around;\n }\n .between-sm {\n justify-content: space-between;\n }\n .first-sm {\n order: -1;\n }\n .last-sm {\n order: 1;\n }\n}\n@media only screen and (min-width: 62em) {\n .container {\n width: 61rem;\n }\n .col-md {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: auto;\n }\n .flex-direction--column .col-md {\n flex-grow: 1;\n }\n .col-md-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .flex-direction--column .col-md-1 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-1 {\n max-width: 100%;\n }\n .col-md-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .flex-direction--column .col-md-2 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-2 {\n max-width: 100%;\n }\n .col-md-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n .flex-direction--column .col-md-3 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-3 {\n max-width: 100%;\n }\n .col-md-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .flex-direction--column .col-md-4 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-4 {\n max-width: 100%;\n }\n .col-md-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 41.6666666667%;\n max-width: 41.6666666667%;\n }\n .flex-direction--column .col-md-5 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-5 {\n max-width: 100%;\n }\n .col-md-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n .flex-direction--column .col-md-6 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-6 {\n max-width: 100%;\n }\n .col-md-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 58.3333333333%;\n max-width: 58.3333333333%;\n }\n .flex-direction--column .col-md-7 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-7 {\n max-width: 100%;\n }\n .col-md-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .flex-direction--column .col-md-8 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-8 {\n max-width: 100%;\n }\n .col-md-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n .flex-direction--column .col-md-9 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-9 {\n max-width: 100%;\n }\n .col-md-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .flex-direction--column .col-md-10 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-10 {\n max-width: 100%;\n }\n .col-md-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .flex-direction--column .col-md-11 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-11 {\n max-width: 100%;\n }\n .col-md-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n .flex-direction--column .col-md-12 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-12 {\n max-width: 100%;\n }\n .col-md-offset-0 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 0;\n }\n .flex-direction--column .col-md-offset-0 {\n flex-grow: 1;\n }\n .col-md-offset-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 8.3333333333%;\n }\n .flex-direction--column .col-md-offset-1 {\n flex-grow: 1;\n }\n .col-md-offset-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 16.6666666667%;\n }\n .flex-direction--column .col-md-offset-2 {\n flex-grow: 1;\n }\n .col-md-offset-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 25%;\n }\n .flex-direction--column .col-md-offset-3 {\n flex-grow: 1;\n }\n .col-md-offset-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 33.3333333333%;\n }\n .flex-direction--column .col-md-offset-4 {\n flex-grow: 1;\n }\n .col-md-offset-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 41.6666666667%;\n }\n .flex-direction--column .col-md-offset-5 {\n flex-grow: 1;\n }\n .col-md-offset-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 50%;\n }\n .flex-direction--column .col-md-offset-6 {\n flex-grow: 1;\n }\n .col-md-offset-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 58.3333333333%;\n }\n .flex-direction--column .col-md-offset-7 {\n flex-grow: 1;\n }\n .col-md-offset-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 66.6666666667%;\n }\n .flex-direction--column .col-md-offset-8 {\n flex-grow: 1;\n }\n .col-md-offset-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 75%;\n }\n .flex-direction--column .col-md-offset-9 {\n flex-grow: 1;\n }\n .col-md-offset-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 83.3333333333%;\n }\n .flex-direction--column .col-md-offset-10 {\n flex-grow: 1;\n }\n .col-md-offset-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 91.6666666667%;\n }\n .flex-direction--column .col-md-offset-11 {\n flex-grow: 1;\n }\n .col-md-offset-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 100%;\n }\n .flex-direction--column .col-md-offset-12 {\n flex-grow: 1;\n }\n .col-md {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n .start-md {\n justify-content: flex-start;\n text-align: left;\n }\n .center-md {\n justify-content: center;\n text-align: center;\n }\n .end-md {\n justify-content: flex-end;\n text-align: right;\n }\n .top-md {\n align-items: flex-start;\n }\n .middle-md {\n align-items: center;\n }\n .bottom-md {\n align-items: flex-end;\n }\n .around-md {\n justify-content: space-around;\n }\n .between-md {\n justify-content: space-between;\n }\n .first-md {\n order: -1;\n }\n .last-md {\n order: 1;\n }\n}\n@media only screen and (min-width: 75em) {\n .container {\n width: 71rem;\n }\n .col-lg {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: auto;\n }\n .flex-direction--column .col-lg {\n flex-grow: 1;\n }\n .col-lg-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .flex-direction--column .col-lg-1 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-1 {\n max-width: 100%;\n }\n .col-lg-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .flex-direction--column .col-lg-2 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-2 {\n max-width: 100%;\n }\n .col-lg-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n .flex-direction--column .col-lg-3 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-3 {\n max-width: 100%;\n }\n .col-lg-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .flex-direction--column .col-lg-4 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-4 {\n max-width: 100%;\n }\n .col-lg-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 41.6666666667%;\n max-width: 41.6666666667%;\n }\n .flex-direction--column .col-lg-5 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-5 {\n max-width: 100%;\n }\n .col-lg-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n .flex-direction--column .col-lg-6 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-6 {\n max-width: 100%;\n }\n .col-lg-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 58.3333333333%;\n max-width: 58.3333333333%;\n }\n .flex-direction--column .col-lg-7 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-7 {\n max-width: 100%;\n }\n .col-lg-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .flex-direction--column .col-lg-8 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-8 {\n max-width: 100%;\n }\n .col-lg-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n .flex-direction--column .col-lg-9 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-9 {\n max-width: 100%;\n }\n .col-lg-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .flex-direction--column .col-lg-10 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-10 {\n max-width: 100%;\n }\n .col-lg-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .flex-direction--column .col-lg-11 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-11 {\n max-width: 100%;\n }\n .col-lg-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n .flex-direction--column .col-lg-12 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-12 {\n max-width: 100%;\n }\n .col-lg-offset-0 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 0;\n }\n .flex-direction--column .col-lg-offset-0 {\n flex-grow: 1;\n }\n .col-lg-offset-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 8.3333333333%;\n }\n .flex-direction--column .col-lg-offset-1 {\n flex-grow: 1;\n }\n .col-lg-offset-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 16.6666666667%;\n }\n .flex-direction--column .col-lg-offset-2 {\n flex-grow: 1;\n }\n .col-lg-offset-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 25%;\n }\n .flex-direction--column .col-lg-offset-3 {\n flex-grow: 1;\n }\n .col-lg-offset-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 33.3333333333%;\n }\n .flex-direction--column .col-lg-offset-4 {\n flex-grow: 1;\n }\n .col-lg-offset-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 41.6666666667%;\n }\n .flex-direction--column .col-lg-offset-5 {\n flex-grow: 1;\n }\n .col-lg-offset-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 50%;\n }\n .flex-direction--column .col-lg-offset-6 {\n flex-grow: 1;\n }\n .col-lg-offset-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 58.3333333333%;\n }\n .flex-direction--column .col-lg-offset-7 {\n flex-grow: 1;\n }\n .col-lg-offset-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 66.6666666667%;\n }\n .flex-direction--column .col-lg-offset-8 {\n flex-grow: 1;\n }\n .col-lg-offset-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 75%;\n }\n .flex-direction--column .col-lg-offset-9 {\n flex-grow: 1;\n }\n .col-lg-offset-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 83.3333333333%;\n }\n .flex-direction--column .col-lg-offset-10 {\n flex-grow: 1;\n }\n .col-lg-offset-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 91.6666666667%;\n }\n .flex-direction--column .col-lg-offset-11 {\n flex-grow: 1;\n }\n .col-lg-offset-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 100%;\n }\n .flex-direction--column .col-lg-offset-12 {\n flex-grow: 1;\n }\n .col-lg {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n .start-lg {\n justify-content: flex-start;\n text-align: left;\n }\n .center-lg {\n justify-content: center;\n text-align: center;\n }\n .end-lg {\n justify-content: flex-end;\n text-align: right;\n }\n .top-lg {\n align-items: flex-start;\n }\n .middle-lg {\n align-items: center;\n }\n .bottom-lg {\n align-items: flex-end;\n }\n .around-lg {\n justify-content: space-around;\n }\n .between-lg {\n justify-content: space-between;\n }\n .first-lg {\n order: -1;\n }\n .last-lg {\n order: 1;\n }\n}";
533
495
  styleInject(css_248z$7);
534
496
 
535
- var css_248z$6 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.Dropdown-button {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: 8px;\n padding-left: 8px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n color: #D9D9D9;\n background-color: #333333;\n border: 0;\n border-radius: 3px;\n appearance: none;\n user-select: none;\n height: 24px;\n}\n\n.Dropdown-button:hover,\n.Dropdown-button:focus,\n.Dropdown-button:active {\n outline: 0;\n}\n\n.Dropdown-menu {\n z-index: 10;\n}\n\n.Dropdown-menu-item {\n background-color: #454545;\n font-family: \"Arial\", sans-serif;\n color: #D9D9D9;\n padding: 12px;\n cursor: pointer;\n}\n\n.Dropdown-menu-item:hover {\n background-color: #606060;\n}";
497
+ var css_248z$6 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.Dropdown-button {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: 8px;\n padding-left: 8px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n color: #D9D9D9;\n background-color: #333333;\n border: 0;\n border-radius: 3px;\n appearance: none;\n user-select: none;\n height: 24px;\n}\n\n.Dropdown-button:hover,\n.Dropdown-button:focus,\n.Dropdown-button:active {\n outline: 0;\n}\n\n.Dropdown-menu {\n z-index: 10;\n}\n\n.Dropdown-menu-item {\n background-color: #454545;\n font-family: \"Arial\", sans-serif;\n color: #D9D9D9;\n padding: 12px;\n cursor: pointer;\n}\n\n.Dropdown-menu-item:hover {\n background-color: #606060;\n}";
536
498
  styleInject(css_248z$6);
537
499
 
538
500
  function _array_like_to_array$1(arr, len) {
@@ -611,13 +573,13 @@ function Dropdown(param) {
611
573
  })));
612
574
  }
613
575
 
614
- var css_248z$5 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.Slider {\n position: relative;\n}\n.Slider-inner {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.Slider-bar {\n background-color: #BBBBBB;\n}\n.Slider-bar .Slider-marker {\n height: 100%;\n}\n.Slider-rotary {\n height: 50px;\n background-color: #BBBBBB;\n width: 50px;\n border-radius: 100%;\n position: relative;\n aspect-ratio: 1/1;\n}\n.Slider-rotary .Slider-inner {\n right: 0;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n}\n.Slider-rotary .Slider-marker {\n position: absolute;\n top: 0;\n right: 0;\n left: 50%;\n background-color: #333333;\n width: 2px;\n height: 50%;\n border-radius: 125rem;\n transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n.Slider-rotary-large {\n height: 100px;\n width: 100px;\n}\n\n.Slider-orientation-horizontal {\n height: 20px;\n width: 100%;\n}\n\n.Slider-orientation-vertical {\n height: 100%;\n width: 20px;\n}\n\n.Slider-center-marker {\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 0 7px 10px 7px;\n transform: rotate(180deg);\n padding-bottom: 2px;\n}";
576
+ var css_248z$5 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.Slider {\n position: relative;\n}\n.Slider-inner {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.Slider-bar {\n background-color: #BBBBBB;\n}\n.Slider-bar .Slider-marker {\n height: 100%;\n}\n.Slider-rotary {\n height: 50px;\n background-color: #BBBBBB;\n width: 50px;\n border-radius: 100%;\n position: relative;\n aspect-ratio: 1/1;\n}\n.Slider-rotary .Slider-inner {\n right: 0;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n}\n.Slider-rotary .Slider-marker {\n position: absolute;\n top: 0;\n right: 0;\n left: 50%;\n background-color: #333333;\n width: 2px;\n height: 50%;\n border-radius: 125rem;\n transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n.Slider-rotary-large {\n height: 100px;\n width: 100px;\n}\n\n.Slider-orientation-horizontal {\n height: 20px;\n width: 100%;\n}\n\n.Slider-orientation-vertical {\n height: 100%;\n width: 20px;\n}\n\n.Slider-center-marker {\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 0 7px 10px 7px;\n transform: rotate(180deg);\n padding-bottom: 2px;\n}";
615
577
  styleInject(css_248z$5);
616
578
 
617
- var css_248z$4 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.TextLabel {\n font-family: \"Arial\", sans-serif;\n font-size: 14px;\n text-align: center;\n}";
579
+ var css_248z$4 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.TextLabel {\n font-family: \"Arial\", sans-serif;\n font-size: 14px;\n text-align: center;\n}";
618
580
  styleInject(css_248z$4);
619
581
 
620
- function _define_property$3(obj, key, value) {
582
+ function _define_property$4(obj, key, value) {
621
583
  if (key in obj) {
622
584
  Object.defineProperty(obj, key, {
623
585
  value: value,
@@ -630,7 +592,7 @@ function _define_property$3(obj, key, value) {
630
592
  }
631
593
  return obj;
632
594
  }
633
- function _object_spread$3(target) {
595
+ function _object_spread$4(target) {
634
596
  for(var i = 1; i < arguments.length; i++){
635
597
  var source = arguments[i] != null ? arguments[i] : {};
636
598
  var ownKeys = Object.keys(source);
@@ -640,12 +602,12 @@ function _object_spread$3(target) {
640
602
  }));
641
603
  }
642
604
  ownKeys.forEach(function(key) {
643
- _define_property$3(target, key, source[key]);
605
+ _define_property$4(target, key, source[key]);
644
606
  });
645
607
  }
646
608
  return target;
647
609
  }
648
- function ownKeys$3(object, enumerableOnly) {
610
+ function ownKeys$4(object, enumerableOnly) {
649
611
  var keys = Object.keys(object);
650
612
  if (Object.getOwnPropertySymbols) {
651
613
  var symbols = Object.getOwnPropertySymbols(object);
@@ -653,12 +615,12 @@ function ownKeys$3(object, enumerableOnly) {
653
615
  }
654
616
  return keys;
655
617
  }
656
- function _object_spread_props$3(target, source) {
618
+ function _object_spread_props$4(target, source) {
657
619
  source = source != null ? source : {};
658
620
  if (Object.getOwnPropertyDescriptors) {
659
621
  Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
660
622
  } else {
661
- ownKeys$3(Object(source)).forEach(function(key) {
623
+ ownKeys$4(Object(source)).forEach(function(key) {
662
624
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
663
625
  });
664
626
  }
@@ -672,11 +634,11 @@ function TextLabel(param) {
672
634
  } : _param_customTheme, _param_size = param.size, size = _param_size === void 0 ? TEXT_SIZES.MEDIUM : _param_size, children = param.children;
673
635
  return /*#__PURE__*/ React.createElement("span", {
674
636
  id: id,
675
- style: _object_spread_props$3(_object_spread$3({}, style), {
637
+ style: _object_spread_props$4(_object_spread$4({}, style), {
676
638
  fontFamily: (customTheme === null || customTheme === void 0 ? void 0 : customTheme.fontFamily) || '',
677
639
  color: (customTheme === null || customTheme === void 0 ? void 0 : customTheme.textColor) || ''
678
640
  }),
679
- className: classnames('TextLabel', 'color-text', className, size === TEXT_SIZES.LARGE && "font-size-".concat(size), padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
641
+ className: classnames('TextLabel', 'color-text', className, size && "font-size-".concat(size), padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
680
642
  padding[0]
681
643
  ], padding.length === 4 && 'padding-right-' + [
682
644
  padding[1]
@@ -716,7 +678,7 @@ function _array_like_to_array(arr, len) {
716
678
  function _array_with_holes(arr) {
717
679
  if (Array.isArray(arr)) return arr;
718
680
  }
719
- function _define_property$2(obj, key, value) {
681
+ function _define_property$3(obj, key, value) {
720
682
  if (key in obj) {
721
683
  Object.defineProperty(obj, key, {
722
684
  value: value,
@@ -756,7 +718,7 @@ function _iterable_to_array_limit(arr, i) {
756
718
  function _non_iterable_rest() {
757
719
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
758
720
  }
759
- function _object_spread$2(target) {
721
+ function _object_spread$3(target) {
760
722
  for(var i = 1; i < arguments.length; i++){
761
723
  var source = arguments[i] != null ? arguments[i] : {};
762
724
  var ownKeys = Object.keys(source);
@@ -766,12 +728,12 @@ function _object_spread$2(target) {
766
728
  }));
767
729
  }
768
730
  ownKeys.forEach(function(key) {
769
- _define_property$2(target, key, source[key]);
731
+ _define_property$3(target, key, source[key]);
770
732
  });
771
733
  }
772
734
  return target;
773
735
  }
774
- function ownKeys$2(object, enumerableOnly) {
736
+ function ownKeys$3(object, enumerableOnly) {
775
737
  var keys = Object.keys(object);
776
738
  if (Object.getOwnPropertySymbols) {
777
739
  var symbols = Object.getOwnPropertySymbols(object);
@@ -779,12 +741,12 @@ function ownKeys$2(object, enumerableOnly) {
779
741
  }
780
742
  return keys;
781
743
  }
782
- function _object_spread_props$2(target, source) {
744
+ function _object_spread_props$3(target, source) {
783
745
  source = source != null ? source : {};
784
746
  if (Object.getOwnPropertyDescriptors) {
785
747
  Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
786
748
  } else {
787
- ownKeys$2(Object(source)).forEach(function(key) {
749
+ ownKeys$3(Object(source)).forEach(function(key) {
788
750
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
789
751
  });
790
752
  }
@@ -968,7 +930,7 @@ function Slider(param) {
968
930
  text: label
969
931
  }), sliderPolarity === "BIPOLAR" && /*#__PURE__*/ React__default.createElement("div", {
970
932
  className: "Slider-center-marker"
971
- }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$2(_object_spread$2({
933
+ }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$3(_object_spread$3({
972
934
  className: classnames('Slider', "bg-slider", sliderPolarity === "LINEAR" ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', sliderType === "BAR" && 'Slider-bar', (sliderType === "ROTARY" || sliderType === "ROTARY_LARGE") && 'Slider-rotary', sliderType === "ROTARY_LARGE" && 'Slider-rotary-large', sliderType === "BAR" ? sliderOrientation === "HORIZONTAL" ? 'Slider-orientation-horizontal' : 'Slider-orientation-vertical' : '', className)
973
935
  }, bindDrag()), {
974
936
  style: {
@@ -977,7 +939,7 @@ function Slider(param) {
977
939
  }
978
940
  }), /*#__PURE__*/ React__default.createElement("div", {
979
941
  className: "Slider-inner",
980
- style: _object_spread$2({
942
+ style: _object_spread$3({
981
943
  rotate: sliderType === "ROTARY" || sliderType === "ROTARY_LARGE" ? "".concat(sliderPolarity === "LINEAR" ? normalizedValue : normalizedValue + 0.5, "turn") : "0"
982
944
  }, getTransformString({
983
945
  sliderType: sliderType,
@@ -1002,7 +964,7 @@ Slider.SLIDER_TYPE = SLIDER_TYPE;
1002
964
  Slider.SLIDER_POLARITY = SLIDER_POLARITY;
1003
965
  Slider.SLIDER_ORIENTATION = SLIDER_ORIENTATION;
1004
966
 
1005
- var css_248z$3 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.h1 {\n font-family: \"Arial\", sans-serif;\n font-size: 20px;\n font-weight: bold;\n}\n\n.h2 {\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n font-weight: bold;\n}";
967
+ var css_248z$3 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.h1 {\n font-family: \"Arial\", sans-serif;\n font-size: 20px;\n font-weight: bold;\n}\n\n.h2 {\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n font-weight: bold;\n}";
1006
968
  styleInject(css_248z$3);
1007
969
 
1008
970
  var HEADER_LEVELS;
@@ -1011,7 +973,7 @@ var HEADER_LEVELS;
1011
973
  HEADER_LEVELS["H2"] = "h2";
1012
974
  })(HEADER_LEVELS || (HEADER_LEVELS = {}));
1013
975
 
1014
- function _define_property$1(obj, key, value) {
976
+ function _define_property$2(obj, key, value) {
1015
977
  if (key in obj) {
1016
978
  Object.defineProperty(obj, key, {
1017
979
  value: value,
@@ -1024,7 +986,7 @@ function _define_property$1(obj, key, value) {
1024
986
  }
1025
987
  return obj;
1026
988
  }
1027
- function _object_spread$1(target) {
989
+ function _object_spread$2(target) {
1028
990
  for(var i = 1; i < arguments.length; i++){
1029
991
  var source = arguments[i] != null ? arguments[i] : {};
1030
992
  var ownKeys = Object.keys(source);
@@ -1034,12 +996,12 @@ function _object_spread$1(target) {
1034
996
  }));
1035
997
  }
1036
998
  ownKeys.forEach(function(key) {
1037
- _define_property$1(target, key, source[key]);
999
+ _define_property$2(target, key, source[key]);
1038
1000
  });
1039
1001
  }
1040
1002
  return target;
1041
1003
  }
1042
- function ownKeys$1(object, enumerableOnly) {
1004
+ function ownKeys$2(object, enumerableOnly) {
1043
1005
  var keys = Object.keys(object);
1044
1006
  if (Object.getOwnPropertySymbols) {
1045
1007
  var symbols = Object.getOwnPropertySymbols(object);
@@ -1047,12 +1009,12 @@ function ownKeys$1(object, enumerableOnly) {
1047
1009
  }
1048
1010
  return keys;
1049
1011
  }
1050
- function _object_spread_props$1(target, source) {
1012
+ function _object_spread_props$2(target, source) {
1051
1013
  source = source != null ? source : {};
1052
1014
  if (Object.getOwnPropertyDescriptors) {
1053
1015
  Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
1054
1016
  } else {
1055
- ownKeys$1(Object(source)).forEach(function(key) {
1017
+ ownKeys$2(Object(source)).forEach(function(key) {
1056
1018
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
1057
1019
  });
1058
1020
  }
@@ -1067,7 +1029,7 @@ function TextHeader(param) {
1067
1029
  var Tag = level;
1068
1030
  return /*#__PURE__*/ React.createElement(Tag, {
1069
1031
  id: id,
1070
- style: _object_spread_props$1(_object_spread$1({}, style), {
1032
+ style: _object_spread_props$2(_object_spread$2({}, style), {
1071
1033
  color: (componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.textColor) || '',
1072
1034
  fontFamily: (componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.fontFamily) || ''
1073
1035
  }),
@@ -1086,10 +1048,10 @@ TextHeader.HEADER_LEVELS = HEADER_LEVELS;
1086
1048
  TextHeader.SPACING = SPACING;
1087
1049
  TextHeader.THEME = GLOBAL_DEFAULT_THEMES;
1088
1050
 
1089
- var css_248z$2 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.Layout {\n display: flex;\n width: 100%;\n}\n.Layout.gap-xsmall {\n gap: 2px;\n}\n.Layout.gap-small {\n gap: 4px;\n}\n.Layout.gap-mediumsmall {\n gap: 8px;\n}\n.Layout.gap-medium {\n gap: 12px;\n}\n.Layout.gap-mediumlarge {\n gap: 16px;\n}\n.Layout.gap-large {\n gap: 20px;\n}\n.Layout.gap-xlarge {\n gap: 24px;\n}";
1051
+ var css_248z$2 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.Layout {\n display: flex;\n width: 100%;\n}\n.Layout.gap-xsmall {\n gap: 2px;\n}\n.Layout.gap-small {\n gap: 4px;\n}\n.Layout.gap-mediumsmall {\n gap: 8px;\n}\n.Layout.gap-medium {\n gap: 12px;\n}\n.Layout.gap-mediumlarge {\n gap: 16px;\n}\n.Layout.gap-large {\n gap: 20px;\n}\n.Layout.gap-xlarge {\n gap: 24px;\n}";
1090
1052
  styleInject(css_248z$2);
1091
1053
 
1092
- function _define_property(obj, key, value) {
1054
+ function _define_property$1(obj, key, value) {
1093
1055
  if (key in obj) {
1094
1056
  Object.defineProperty(obj, key, {
1095
1057
  value: value,
@@ -1102,7 +1064,7 @@ function _define_property(obj, key, value) {
1102
1064
  }
1103
1065
  return obj;
1104
1066
  }
1105
- function _object_spread(target) {
1067
+ function _object_spread$1(target) {
1106
1068
  for(var i = 1; i < arguments.length; i++){
1107
1069
  var source = arguments[i] != null ? arguments[i] : {};
1108
1070
  var ownKeys = Object.keys(source);
@@ -1112,12 +1074,12 @@ function _object_spread(target) {
1112
1074
  }));
1113
1075
  }
1114
1076
  ownKeys.forEach(function(key) {
1115
- _define_property(target, key, source[key]);
1077
+ _define_property$1(target, key, source[key]);
1116
1078
  });
1117
1079
  }
1118
1080
  return target;
1119
1081
  }
1120
- function ownKeys(object, enumerableOnly) {
1082
+ function ownKeys$1(object, enumerableOnly) {
1121
1083
  var keys = Object.keys(object);
1122
1084
  if (Object.getOwnPropertySymbols) {
1123
1085
  var symbols = Object.getOwnPropertySymbols(object);
@@ -1125,12 +1087,12 @@ function ownKeys(object, enumerableOnly) {
1125
1087
  }
1126
1088
  return keys;
1127
1089
  }
1128
- function _object_spread_props(target, source) {
1090
+ function _object_spread_props$1(target, source) {
1129
1091
  source = source != null ? source : {};
1130
1092
  if (Object.getOwnPropertyDescriptors) {
1131
1093
  Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
1132
1094
  } else {
1133
- ownKeys(Object(source)).forEach(function(key) {
1095
+ ownKeys$1(Object(source)).forEach(function(key) {
1134
1096
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
1135
1097
  });
1136
1098
  }
@@ -1158,7 +1120,7 @@ function Layout(param) {
1158
1120
  ], padding.length === 4 && padding[3] && 'padding-left-' + [
1159
1121
  padding[3]
1160
1122
  ]),
1161
- style: _object_spread_props(_object_spread({}, style), {
1123
+ style: _object_spread_props$1(_object_spread$1({}, style), {
1162
1124
  flexWrap: wrap ? 'wrap' : 'nowrap',
1163
1125
  border: border ? '2px solid #999' : '',
1164
1126
  maxWidth: width,
@@ -1183,7 +1145,7 @@ Layout.GLOBAL_THEME = GLOBAL_DEFAULT_THEMES;
1183
1145
  Layout.BACKGROUND_COLOR = GLOBAL_NAMED_COLORS;
1184
1146
  Layout.ROLE = LAYOUT_ROLES;
1185
1147
 
1186
- var css_248z$1 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.Matrix-header-cell {\n margin: 1px;\n flex: 1 1 0px;\n}\n.Matrix-cell {\n margin: 1px;\n background: #222222;\n flex: 1 1 0px;\n}";
1148
+ var css_248z$1 = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.Matrix-header-cell {\n margin: 1px;\n flex: 1 1 0px;\n}\n.Matrix-cell {\n margin: 1px;\n background: #222222;\n flex: 1 1 0px;\n}";
1187
1149
  styleInject(css_248z$1);
1188
1150
 
1189
1151
  var Matrix = function(param) {
@@ -1217,7 +1179,7 @@ var Matrix = function(param) {
1217
1179
  }));
1218
1180
  };
1219
1181
 
1220
- var css_248z = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.IndicatorLight {\n border-radius: 50%;\n border-color: #606060;\n border-style: solid;\n background: #6e0701;\n}\n.IndicatorLight-small {\n width: 12px;\n height: 12px;\n border-width: 2px;\n}\n.IndicatorLight-large {\n width: 20px;\n height: 20px;\n border-width: 4px;\n}\n.IndicatorLight-isActive {\n background: #ff0000;\n}";
1182
+ var css_248z = ".theme-light .color-text {\n color: #111111;\n}\n\n.theme-light .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-light .bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-main {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-section {\n background-color: #606060;\n}\n\n.theme-light.bg-section {\n background-color: #606060;\n}\n\n.theme-light .bg-slider {\n background-color: #454545;\n}\n\n.theme-light.bg-slider {\n background-color: #454545;\n}\n\n.theme-light .bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light.bg-rotary-slider-indicator {\n background-color: #BBBBBB;\n}\n\n.theme-light .bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light.bg-bar-slider-indicator {\n background-color: #333333;\n}\n\n.theme-light .bg-input {\n background-color: #606060;\n}\n\n.theme-light.bg-input {\n background-color: #606060;\n}\n\n.theme-light .bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light.bg-input-selected {\n background-color: #333333;\n}\n\n.theme-light .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-light .Slider-center-marker {\n border-color: transparent transparent #454545 transparent;\n}\n\n.theme-light .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-med .bg-main {\n background-color: #454545;\n}\n\n.theme-med.bg-main {\n background-color: #454545;\n}\n\n.theme-med .bg-section {\n background-color: #222222;\n}\n\n.theme-med.bg-section {\n background-color: #222222;\n}\n\n.theme-med .bg-slider {\n background-color: #222222;\n}\n\n.theme-med.bg-slider {\n background-color: #222222;\n}\n\n.theme-med .bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-rotary-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med.bg-bar-slider-indicator {\n background-color: #D9D9D9;\n}\n\n.theme-med .bg-input {\n background-color: #222222;\n}\n\n.theme-med.bg-input {\n background-color: #222222;\n}\n\n.theme-med .bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med.bg-input-selected {\n background-color: #111111;\n}\n\n.theme-med .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-med .color-text {\n color: #D9D9D9;\n}\n\n.theme-med .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-med .Slider-center-marker {\n border-color: transparent transparent #222222 transparent;\n}\n\n.theme-med .bg-input:hover {\n background-color: #606060;\n}\n\n.theme-dark .color-text {\n color: #D9D9D9;\n}\n\n.theme-dark .color-input-text {\n color: #D9D9D9;\n}\n\n.theme-dark .bg-main {\n background-color: #111111;\n}\n\n.theme-dark.bg-main {\n background-color: #111111;\n}\n\n.theme-dark .bg-section {\n background-color: #333333;\n}\n\n.theme-dark.bg-section {\n background-color: #333333;\n}\n\n.theme-dark .bg-slider {\n background-color: #333333;\n}\n\n.theme-dark.bg-slider {\n background-color: #333333;\n}\n\n.theme-dark .bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark.bg-rotary-slider-indicator {\n background-color: #111111;\n}\n\n.theme-dark .bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark.bg-bar-slider-indicator {\n background-color: #606060;\n}\n\n.theme-dark .bg-input {\n background-color: #333333;\n}\n\n.theme-dark.bg-input {\n background-color: #333333;\n}\n\n.theme-dark .bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark.bg-input-selected {\n background-color: #454545;\n}\n\n.theme-dark .bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark.bg-input-hover {\n background-color: #606060;\n}\n\n.theme-dark .Slider-center-marker {\n border-color: transparent transparent #333333 transparent;\n}\n\n.theme-dark .bg-input:hover {\n background-color: #606060;\n}\n\n.name {\n font-size: 12px;\n}\n\n.name {\n font-size: 14px;\n}\n\n.name {\n font-size: 16px;\n}\n\n.name {\n font-size: 20px;\n}\n\n.name {\n font-size: 24px;\n}\n\n.IndicatorLight {\n border-radius: 50%;\n border-color: #606060;\n border-style: solid;\n background: #6e0701;\n}\n.IndicatorLight-small {\n width: 12px;\n height: 12px;\n border-width: 2px;\n}\n.IndicatorLight-large {\n width: 20px;\n height: 20px;\n border-width: 4px;\n}\n.IndicatorLight-isActive {\n background: #ff0000;\n}";
1221
1183
  styleInject(css_248z);
1222
1184
 
1223
1185
  var INDICATOR_LIGHT_TYPE;
@@ -1240,5 +1202,76 @@ function IndicatorLight(param) {
1240
1202
  }
1241
1203
  IndicatorLight.TYPE = INDICATOR_LIGHT_TYPE;
1242
1204
 
1243
- export { Button, Col, Dropdown, IndicatorLight, Layout, Matrix, Row, Slider, Tabs, TextHeader, TextLabel };
1205
+ function _define_property(obj, key, value) {
1206
+ if (key in obj) {
1207
+ Object.defineProperty(obj, key, {
1208
+ value: value,
1209
+ enumerable: true,
1210
+ configurable: true,
1211
+ writable: true
1212
+ });
1213
+ } else {
1214
+ obj[key] = value;
1215
+ }
1216
+ return obj;
1217
+ }
1218
+ function _object_spread(target) {
1219
+ for(var i = 1; i < arguments.length; i++){
1220
+ var source = arguments[i] != null ? arguments[i] : {};
1221
+ var ownKeys = Object.keys(source);
1222
+ if (typeof Object.getOwnPropertySymbols === "function") {
1223
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
1224
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
1225
+ }));
1226
+ }
1227
+ ownKeys.forEach(function(key) {
1228
+ _define_property(target, key, source[key]);
1229
+ });
1230
+ }
1231
+ return target;
1232
+ }
1233
+ function ownKeys(object, enumerableOnly) {
1234
+ var keys = Object.keys(object);
1235
+ if (Object.getOwnPropertySymbols) {
1236
+ var symbols = Object.getOwnPropertySymbols(object);
1237
+ keys.push.apply(keys, symbols);
1238
+ }
1239
+ return keys;
1240
+ }
1241
+ function _object_spread_props(target, source) {
1242
+ source = source != null ? source : {};
1243
+ if (Object.getOwnPropertyDescriptors) {
1244
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
1245
+ } else {
1246
+ ownKeys(Object(source)).forEach(function(key) {
1247
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
1248
+ });
1249
+ }
1250
+ return target;
1251
+ }
1252
+ function KeyValueDisplayScreen(param) {
1253
+ var className = param.className, style = param.style, data = param.data;
1254
+ return /*#__PURE__*/ React__default.createElement(Row, {
1255
+ flexDirection: Row.FLEX_DIRECTION.COLUMN,
1256
+ gap: Row.GAP.SMALL,
1257
+ style: _object_spread_props(_object_spread({}, style), {
1258
+ backgroundColor: '#333',
1259
+ width: '150px'
1260
+ }),
1261
+ padding: [
1262
+ Row.PADDING.LARGE
1263
+ ],
1264
+ className: className
1265
+ }, data ? /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Col, {
1266
+ centerContentHorizontal: true
1267
+ }, /*#__PURE__*/ React__default.createElement(TextLabel, {
1268
+ size: TextLabel.SIZE.MEDIUM
1269
+ }, data === null || data === void 0 ? void 0 : data.key)), /*#__PURE__*/ React__default.createElement(Col, {
1270
+ centerContentHorizontal: true
1271
+ }, /*#__PURE__*/ React__default.createElement(TextLabel, {
1272
+ size: TextLabel.SIZE.X_LARGE
1273
+ }, data === null || data === void 0 ? void 0 : data.value)), ' ') : /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Col, null, /*#__PURE__*/ React__default.createElement(TextLabel, null, "Sparkler v1.8.2")), /*#__PURE__*/ React__default.createElement(Col, null, /*#__PURE__*/ React__default.createElement(TextLabel, null, "Antimatter audio"))));
1274
+ }
1275
+
1276
+ export { Button, Col, Dropdown, IndicatorLight, KeyValueDisplayScreen, Layout, Matrix, Row, Slider, Tabs, TextHeader, TextLabel };
1244
1277
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antimatter-audio/antimatter-ui",
3
- "version": "5.8.2",
3
+ "version": "5.9.0",
4
4
  "description": "React UI component library for Antimatter Audio.",
5
5
  "repository": {
6
6
  "type": "git",