stylable-components - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0-0

lib/components/checkbox/checkbox.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/checkbox/checkbox.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/checkbox/checkbox.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
-module.exports.default = require("stylable/runtime").create(
+
+        module.exports.default = require("stylable/runtime").create(
     "root",
-    "CheckBox100200070",
-    {"root":"CheckBox100200070--root","boxIcon":"CheckBox100200070--boxIcon","tickIcon":"CheckBox100200070--tickIcon","indeterminateIcon":"CheckBox100200070--indeterminateIcon","nativeCheckbox":"CheckBox100200070--nativeCheckbox","childContainer":"CheckBox100200070--childContainer"},
-    ".CheckBox100200070--root {\r\n    -st-states: checked, disabled, indeterminate, readonly, focus;\r\n    display: inline-block;\r\n    position: relative;\r\n    cursor: pointer;\r\n}\r\n\r\n.CheckBox100200070--root .CheckBox100200070--boxIcon {\r\n    height: 1rem;\r\n    width: 1rem;\r\n    fill: none;\r\n    stroke: #D1D1D1;\r\n}\r\n\r\n.CheckBox100200070--root[data-checkbox100200070-checked] .CheckBox100200070--boxIcon, .CheckBox100200070--root[data-checkbox100200070-indeterminate] .CheckBox100200070--boxIcon{\r\n    fill: #4A90E2;\r\n}\r\n\r\n.CheckBox100200070--root[data-checkbox100200070-disabled] .CheckBox100200070--boxIcon {\r\n    fill: #f1f1f1;\r\n}\r\n\r\n.CheckBox100200070--root[data-checkbox100200070-focus] .CheckBox100200070--boxIcon {\r\n    outline: 4px solid #add9ff;\r\n}\r\n\r\n.CheckBox100200070--root .CheckBox100200070--tickIcon {\r\n    height: 1rem;\r\n    width: 1rem;\r\n    position: relative;\r\n    margin-left: -1rem;\r\n    stroke: #FFF;\r\n    stroke-linecap: square;\r\n    stroke-width: 1.5;\r\n}\r\n\r\n.CheckBox100200070--root[data-checkbox100200070-disabled] .CheckBox100200070--tickIcon, .CheckBox100200070--root[data-checkbox100200070-disabled] .CheckBox100200070--indeterminateIcon {\r\n    stroke: #c8c8c8;\r\n}\r\n\r\n.CheckBox100200070--root .CheckBox100200070--indeterminateIcon {\r\n    height: 1em;\r\n    width: 1em;\r\n    position: relative;\r\n    margin-left: -1rem;\r\n    stroke: #FFF;\r\n    stroke-width: 1.5;\r\n}\r\n\r\n.CheckBox100200070--root .CheckBox100200070--nativeCheckbox {\r\n    position: absolute;\r\n    overflow: hidden;\r\n    height: 1px;\r\n    width: 1px;\r\n    margin: -1px;\r\n    padding: 0;\r\n    border: 0;\r\n    opacity: 0;\r\n}\r\n\r\n.CheckBox100200070--root .CheckBox100200070--childContainer {\r\n    display: inline;\r\n}\r\n",
+    "CheckBox2576597394",
+    {"root":"CheckBox2576597394--root","boxIcon":"CheckBox2576597394--boxIcon","tickIcon":"CheckBox2576597394--tickIcon","indeterminateIcon":"CheckBox2576597394--indeterminateIcon","nativeCheckbox":"CheckBox2576597394--nativeCheckbox","childContainer":"CheckBox2576597394--childContainer"},
+    ".CheckBox2576597394--root {\n    -st-states: checked, disabled, indeterminate, readonly, focus;\n    display: inline-block;\n    position: relative;\n    cursor: pointer;\n}\n\n.CheckBox2576597394--root .CheckBox2576597394--boxIcon {\n    height: 1rem;\n    width: 1rem;\n    fill: none;\n    stroke: #D1D1D1;\n}\n\n.CheckBox2576597394--root[data-checkbox2576597394-checked] .CheckBox2576597394--boxIcon, .CheckBox2576597394--root[data-checkbox2576597394-indeterminate] .CheckBox2576597394--boxIcon{\n    fill: #4A90E2;\n}\n\n.CheckBox2576597394--root[data-checkbox2576597394-disabled] .CheckBox2576597394--boxIcon {\n    fill: #f1f1f1;\n}\n\n.CheckBox2576597394--root[data-checkbox2576597394-focus] .CheckBox2576597394--boxIcon {\n    outline: 4px solid #add9ff;\n}\n\n.CheckBox2576597394--root .CheckBox2576597394--tickIcon {\n    height: 1rem;\n    width: 1rem;\n    position: relative;\n    margin-left: -1rem;\n    stroke: #FFF;\n    stroke-linecap: square;\n    stroke-width: 1.5;\n}\n\n.CheckBox2576597394--root[data-checkbox2576597394-disabled] .CheckBox2576597394--tickIcon, .CheckBox2576597394--root[data-checkbox2576597394-disabled] .CheckBox2576597394--indeterminateIcon {\n    stroke: #c8c8c8;\n}\n\n.CheckBox2576597394--root .CheckBox2576597394--indeterminateIcon {\n    height: 1em;\n    width: 1em;\n    position: relative;\n    margin-left: -1rem;\n    stroke: #FFF;\n    stroke-width: 1.5;\n}\n\n.CheckBox2576597394--root .CheckBox2576597394--nativeCheckbox {\n    position: absolute;\n    overflow: hidden;\n    height: 1px;\n    width: 1px;\n    margin: -1px;\n    padding: 0;\n    border: 0;\n    opacity: 0;\n}\n\n.CheckBox2576597394--root .CheckBox2576597394--childContainer {\n    display: inline;\n}\n",
     module.id
 );

lib/components/checkbox/index.d.ts

 export * from './checkbox';

lib/components/checkbox/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/date-picker/calendar.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/date-picker/calendar.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/date-picker/date-picker-icons.d.ts

 /// <reference types="react" />
 import * as React from 'react';
 export declare const CalendarIcon: React.SFC<React.HTMLAttributes<SVGElement>>;

lib/components/date-picker/date-picker-icons.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/date-picker/date-picker.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/date-picker/date-picker.js

@@ -162,3 +162,3 @@ "use strict";
     DatePicker.defaultProps = {
-        openOnFocus: true,
+        openOnFocus: false,
         onChange: utils_1.noop,
@@ -165,0 +165,0 @@ calendarIcon: date_picker_icons_1.CalendarIcon

lib/components/date-picker/date-picker.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../../style/project.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "DatePicker3102687370",
-    {"input":"DatePicker3102687370--input","icon":"DatePicker3102687370--icon","dropdownArrowWrapper":"DatePicker3102687370--dropdownArrowWrapper","dropdownArrow":"DatePicker3102687370--dropdownArrow","dropdown":"DatePicker3102687370--dropdown","header":"DatePicker3102687370--header","headerDate":"DatePicker3102687370--headerDate","arrowWrapper":"DatePicker3102687370--arrowWrapper","arrowWrapperPrev":"DatePicker3102687370--arrowWrapperPrev","arrowWrapperNext":"DatePicker3102687370--arrowWrapperNext","headerArrow":"DatePicker3102687370--headerArrow","headerArrowNext":"DatePicker3102687370--headerArrowNext","headerArrowPrev":"DatePicker3102687370--headerArrowPrev","calendar":"DatePicker3102687370--calendar","calendarItem":"DatePicker3102687370--calendarItem","dayName":"DatePicker3102687370--dayName","day":"DatePicker3102687370--day","root":"DatePicker3102687370--root","arrowThickness":"0.09em","headerHeight":"60px","dropdownWidth":"330px","dropdownArrowWidth":"11px","dropdownArrowHeight":"12px","iconWidth":"36px"},
-    "/* The DatePicker Input */\r\n.DatePicker3102687370--root .DatePicker3102687370--input {\r\n    width: 192px;\r\n}\r\n\r\n.DatePicker3102687370--root .DatePicker3102687370--icon {\r\n    position: relative;\r\n    left: calc(192px - 36px);\r\n    top: -36px;\r\n    padding: 10px;\r\n    cursor: pointer;\r\n    width: 36px;\r\n    height: 36px;\r\n    fill: #3899EC;\r\n    border-left: solid 1px #d1d1d1;\r\n}\r\n\r\n.DatePicker3102687370--root .DatePicker3102687370--icon:hover {\r\n    background-color: rgb(240, 240, 240);\r\n    outline: solid 1px #d1d1d1;\r\n    outline-offset: -1px;\r\n}\r\n\r\n/* The dropdown arrow extends from the input and into the calendar view */\r\n.DatePicker3102687370--root .DatePicker3102687370--dropdownArrowWrapper {\r\n    /* Switch width to the calendar width to center with regards to the calendar */\r\n    width: 192px;\r\n}\r\n\r\n.DatePicker3102687370--root .DatePicker3102687370--dropdownArrow {\r\n    width: 0;\r\n    height: 0;\r\n    position: relative;\r\n    /* Center arrow with regards to the input */\r\n    left: calc(50% - 11px);\r\n    border-left: 11px solid transparent;\r\n    border-right: 11px solid transparent;\r\n    border-bottom: 12px solid #4990e2;\r\n}\r\n\r\n/* The dropdown contains everything but the input */\r\n.DatePicker3102687370--root .DatePicker3102687370--dropdown {\r\n    width: 330px;\r\n    outline: solid 1px #4990e2;\r\n}\r\n\r\n/* This contains the current month and year as well as the buttons to step between months */\r\n.DatePicker3102687370--root .DatePicker3102687370--header {\r\n    width: 100%;\r\n    height: 60px;\r\n    background-color: #4990e2;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin: 0;\r\n}\r\n\r\n/* Contains current month and year */\r\n.DatePicker3102687370--root .DatePicker3102687370--headerDate {\r\n    display: inline;\r\n    width: 150px;\r\n    height: 24px;\r\n    font-family: Arial;\r\n    font-size: 16px;\r\n    line-height: 1.5;\r\n    text-align: center;\r\n    color: #ffffff;\r\n}\r\n\r\n/* General styling for the month buttons */\r\n.DatePicker3102687370--root .DatePicker3102687370--arrowWrapper {\r\n    height: 100%;\r\n    width: 20%;\r\n    line-height: 58px;\r\n    cursor: pointer;\r\n}\r\n\r\n.DatePicker3102687370--root .DatePicker3102687370--arrowWrapperPrev {\r\n    text-align: left;\r\n}\r\n\r\n.DatePicker3102687370--root .DatePicker3102687370--arrowWrapperNext {\r\n    text-align: right;\r\n}\r\n\r\n/* General styles for both the prev and next month buttons */\r\n.DatePicker3102687370--root .DatePicker3102687370--headerArrow {\r\n    border: solid #ffffff;\r\n    border-width: 0 0.09em 0.09em 0;\r\n    display: inline-block;\r\n    padding: 0.26em;\r\n}\r\n\r\n/* Next month button */\r\n.DatePicker3102687370--root .DatePicker3102687370--headerArrowNext {\r\n    transform: rotate(-45deg);\r\n    margin-right: 24px;\r\n}\r\n\r\n/* Previous month button */\r\n.DatePicker3102687370--root .DatePicker3102687370--headerArrowPrev {\r\n    transform: rotate(135deg);\r\n    margin-left: 24px;\r\n}\r\n\r\n/* The calendar view contains the days of the month and days of the week */\r\n.DatePicker3102687370--root .DatePicker3102687370--calendar {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    height: calc(100% - 60px);\r\n    width: 330px;\r\n    padding: 30px;\r\n    background-color: white;\r\n}\r\n\r\n/* Each item in the grid gets this style */\r\n.DatePicker3102687370--root .DatePicker3102687370--calendarItem {\r\n    /* 100/7 = 14.2857... show 7 items per row */\r\n    flex: 0 0 14.2857%;\r\n}\r\n\r\n/* Styling for the days of the week */\r\n.DatePicker3102687370--root .DatePicker3102687370--dayName {\r\n    font-family: Arial;\r\n    font-size: 14px;\r\n    font-weight: bold;\r\n    line-height: 1.29;\r\n    text-align: center;\r\n    color: #000000;\r\n    width: 36px;\r\n    height: 36px;\r\n    cursor: default;\r\n}\r\n\r\n/* Styling for the days of the month */\r\n.DatePicker3102687370--root .DatePicker3102687370--day {\r\n    -st-states: focused, selected, current, inactive;\r\n    font-family: Arial;\r\n    font-size: 14px;\r\n    text-align: center;\r\n    color: #000000;\r\n    width: 36px;\r\n    line-height: 36px;\r\n    cursor: pointer;\r\n}\r\n\r\n/* The current day, i.e. today's date */\r\n.DatePicker3102687370--root .DatePicker3102687370--day[data-datepicker3102687370-current] {\r\n    color: #4990e2;\r\n}\r\n\r\n/* The styles for keyboard navigation */\r\n.DatePicker3102687370--root .DatePicker3102687370--day[data-datepicker3102687370-focused] {\r\n    outline: solid 1px #5cb4ff;\r\n    outline-offset: -1px;\r\n}\r\n\r\n/* Styles for the user entered date */\r\n.DatePicker3102687370--root .DatePicker3102687370--day[data-datepicker3102687370-selected] {\r\n    color: #ffffff;\r\n    background-color: #4990e2;\r\n}\r\n\r\n/* Styles for the days of the previous and next month */\r\n.DatePicker3102687370--root .DatePicker3102687370--day[data-datepicker3102687370-inactive] {\r\n    color: #d8d8d8;\r\n    width: 36px;\r\n    line-height: 36px;\r\n    cursor: default;\r\n}\r\n\r\n/* Special case for when a user selected a date and then navigates to it using the keyboard */\r\n.DatePicker3102687370--root .DatePicker3102687370--day[data-datepicker3102687370-focused][data-datepicker3102687370-selected] {\r\n    color: #ffffff;\r\n    background-color: #5cb4ff;\r\n}\r\n\r\n/* Hover styles for normal days */\r\n.DatePicker3102687370--root .DatePicker3102687370--day:hover {\r\n    color: #000000;\r\n    background-color: #EDF7FF;\r\n}\r\n\r\n/* Hover styles for the days of the previous and next months */\r\n.DatePicker3102687370--root .DatePicker3102687370--day[data-datepicker3102687370-inactive]:hover {\r\n    color: #d8d8d8;\r\n    background-color: #ffffff;\r\n}\r\n\r\n/* root */\r\n.DatePicker3102687370--root {\r\n    display: inline-block;\r\n}\r\n",
+    "DatePicker1998654768",
+    {"input":"DatePicker1998654768--input","icon":"DatePicker1998654768--icon","dropdownArrowWrapper":"DatePicker1998654768--dropdownArrowWrapper","dropdownArrow":"DatePicker1998654768--dropdownArrow","dropdown":"DatePicker1998654768--dropdown","header":"DatePicker1998654768--header","headerDate":"DatePicker1998654768--headerDate","arrowWrapper":"DatePicker1998654768--arrowWrapper","arrowWrapperPrev":"DatePicker1998654768--arrowWrapperPrev","arrowWrapperNext":"DatePicker1998654768--arrowWrapperNext","headerArrow":"DatePicker1998654768--headerArrow","headerArrowNext":"DatePicker1998654768--headerArrowNext","headerArrowPrev":"DatePicker1998654768--headerArrowPrev","calendar":"DatePicker1998654768--calendar","calendarItem":"DatePicker1998654768--calendarItem","dayName":"DatePicker1998654768--dayName","day":"DatePicker1998654768--day","root":"DatePicker1998654768--root","arrowThickness":"0.09em","headerHeight":"60px","dropdownWidth":"330px","dropdownArrowWidth":"11px","dropdownArrowHeight":"12px","iconWidth":"36px"},
+    "/* The DatePicker Input */\n.DatePicker1998654768--root .DatePicker1998654768--input {\n    width: 192px;\n}\n\n.DatePicker1998654768--root .DatePicker1998654768--icon {\n    position: relative;\n    left: calc(192px - 36px);\n    top: -36px;\n    padding: 10px;\n    cursor: pointer;\n    width: 36px;\n    height: 36px;\n    fill: #3899EC;\n    border-left: solid 1px #d1d1d1;\n}\n\n.DatePicker1998654768--root .DatePicker1998654768--icon:hover {\n    background-color: rgb(240, 240, 240);\n    outline: solid 1px #d1d1d1;\n    outline-offset: -1px;\n}\n\n/* The dropdown arrow extends from the input and into the calendar view */\n.DatePicker1998654768--root .DatePicker1998654768--dropdownArrowWrapper {\n    /* Switch width to the calendar width to center with regards to the calendar */\n    width: 192px;\n}\n\n.DatePicker1998654768--root .DatePicker1998654768--dropdownArrow {\n    width: 0;\n    height: 0;\n    position: relative;\n    /* Center arrow with regards to the input */\n    left: calc(50% - 11px);\n    border-left: 11px solid transparent;\n    border-right: 11px solid transparent;\n    border-bottom: 12px solid #4990e2;\n}\n\n/* The dropdown contains everything but the input */\n.DatePicker1998654768--root .DatePicker1998654768--dropdown {\n    width: 330px;\n    outline: solid 1px #4990e2;\n}\n\n/* This contains the current month and year as well as the buttons to step between months */\n.DatePicker1998654768--root .DatePicker1998654768--header {\n    width: 100%;\n    height: 60px;\n    background-color: #4990e2;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin: 0;\n}\n\n/* Contains current month and year */\n.DatePicker1998654768--root .DatePicker1998654768--headerDate {\n    display: inline;\n    width: 150px;\n    height: 24px;\n    font-family: Arial;\n    font-size: 16px;\n    line-height: 1.5;\n    text-align: center;\n    color: #ffffff;\n}\n\n/* General styling for the month buttons */\n.DatePicker1998654768--root .DatePicker1998654768--arrowWrapper {\n    height: 100%;\n    width: 20%;\n    line-height: 58px;\n    cursor: pointer;\n}\n\n.DatePicker1998654768--root .DatePicker1998654768--arrowWrapperPrev {\n    text-align: left;\n}\n\n.DatePicker1998654768--root .DatePicker1998654768--arrowWrapperNext {\n    text-align: right;\n}\n\n/* General styles for both the prev and next month buttons */\n.DatePicker1998654768--root .DatePicker1998654768--headerArrow {\n    border: solid #ffffff;\n    border-width: 0 0.09em 0.09em 0;\n    display: inline-block;\n    padding: 0.26em;\n}\n\n/* Next month button */\n.DatePicker1998654768--root .DatePicker1998654768--headerArrowNext {\n    transform: rotate(-45deg);\n    margin-right: 24px;\n}\n\n/* Previous month button */\n.DatePicker1998654768--root .DatePicker1998654768--headerArrowPrev {\n    transform: rotate(135deg);\n    margin-left: 24px;\n}\n\n/* The calendar view contains the days of the month and days of the week */\n.DatePicker1998654768--root .DatePicker1998654768--calendar {\n    display: flex;\n    flex-wrap: wrap;\n    height: calc(100% - 60px);\n    width: 330px;\n    padding: 30px;\n    background-color: white;\n}\n\n/* Each item in the grid gets this style */\n.DatePicker1998654768--root .DatePicker1998654768--calendarItem {\n    /* 100/7 = 14.2857... show 7 items per row */\n    flex: 0 0 14.2857%;\n}\n\n/* Styling for the days of the week */\n.DatePicker1998654768--root .DatePicker1998654768--dayName {\n    font-family: Arial;\n    font-size: 14px;\n    font-weight: bold;\n    line-height: 1.29;\n    text-align: center;\n    color: #000000;\n    width: 36px;\n    height: 36px;\n    cursor: default;\n}\n\n/* Styling for the days of the month */\n.DatePicker1998654768--root .DatePicker1998654768--day {\n    -st-states: focused, selected, current, inactive;\n    font-family: Arial;\n    font-size: 14px;\n    text-align: center;\n    color: #000000;\n    width: 36px;\n    line-height: 36px;\n    cursor: pointer;\n}\n\n/* The current day, i.e. today's date */\n.DatePicker1998654768--root .DatePicker1998654768--day[data-datepicker1998654768-current] {\n    color: #4990e2;\n}\n\n/* The styles for keyboard navigation */\n.DatePicker1998654768--root .DatePicker1998654768--day[data-datepicker1998654768-focused] {\n    outline: solid 1px #5cb4ff;\n    outline-offset: -1px;\n}\n\n/* Styles for the user entered date */\n.DatePicker1998654768--root .DatePicker1998654768--day[data-datepicker1998654768-selected] {\n    color: #ffffff;\n    background-color: #4990e2;\n}\n\n/* Styles for the days of the previous and next month */\n.DatePicker1998654768--root .DatePicker1998654768--day[data-datepicker1998654768-inactive] {\n    color: #d8d8d8;\n    width: 36px;\n    line-height: 36px;\n    cursor: default;\n}\n\n/* Special case for when a user selected a date and then navigates to it using the keyboard */\n.DatePicker1998654768--root .DatePicker1998654768--day[data-datepicker1998654768-focused][data-datepicker1998654768-selected] {\n    color: #ffffff;\n    background-color: #5cb4ff;\n}\n\n/* Hover styles for normal days */\n.DatePicker1998654768--root .DatePicker1998654768--day:hover {\n    color: #000000;\n    background-color: #EDF7FF;\n}\n\n/* Hover styles for the days of the previous and next months */\n.DatePicker1998654768--root .DatePicker1998654768--day[data-datepicker1998654768-inactive]:hover {\n    color: #d8d8d8;\n    background-color: #ffffff;\n}\n\n/* root */\n.DatePicker1998654768--root {\n    display: inline-block;\n}\n",
     module.id
 );

lib/components/date-picker/day.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/date-picker/day.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/date-picker/index.d.ts

 export * from './date-picker';

lib/components/date-picker/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/drop-down/drop-down-icons.d.ts

 /// <reference types="react" />
 import * as React from 'react';
 export declare const CaretDown: React.SFC<React.HTMLAttributes<SVGElement>>;

lib/components/drop-down/drop-down-icons.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/drop-down/drop-down.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/drop-down/drop-down.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/drop-down/drop-down.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../selection-list/selection-list.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "dropdown4273457432",
-    {"root":"dropdown4273457432--root","drop-down-input":"dropdown4273457432--drop-down-input","caret":"dropdown4273457432--caret","label":"dropdown4273457432--label","drop-down-list":"dropdown4273457432--drop-down-list"},
-    ".dropdown4273457432--root {\r\n    width: auto;\r\n    font-family: Arial, sans-serif;\r\n    font-size: 16px;\r\n    display: inline-block;\r\n    min-width: 150px;\r\n    outline: none;\r\n}\r\n\r\n.dropdown4273457432--root .dropdown4273457432--drop-down-input {\r\n    border: 1px solid #adbac5;\r\n    height: 36px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n}\r\n\r\n.dropdown4273457432--root .dropdown4273457432--drop-down-input .dropdown4273457432--caret {\r\n    margin-right: 5px;\r\n    vertical-align: middle;\r\n}\r\n\r\n.dropdown4273457432--root .dropdown4273457432--drop-down-input .dropdown4273457432--label {\r\n    margin-left: 5px;\r\n}\r\n\r\n.dropdown4273457432--root .dropdown4273457432--drop-down-input:hover {\r\n    cursor: pointer;\r\n    border: 1px solid #5cb4ff;\r\n}\r\n\r\n.dropdown4273457432--root .dropdown4273457432--drop-down-list.SelectionList3026337750--root {\r\n    -st-extends: SelectionList;\r\n    width: 100%;\r\n    background-color: white;\r\n}\r\n",
+    "dropdown1002263594",
+    {"root":"dropdown1002263594--root","drop-down-input":"dropdown1002263594--drop-down-input","caret":"dropdown1002263594--caret","label":"dropdown1002263594--label","drop-down-list":"dropdown1002263594--drop-down-list"},
+    ".dropdown1002263594--root {\n    width: auto;\n    font-family: Arial, sans-serif;\n    font-size: 16px;\n    display: inline-block;\n    min-width: 150px;\n    outline: none;\n}\n\n.dropdown1002263594--root .dropdown1002263594--drop-down-input {\n    border: 1px solid #adbac5;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.dropdown1002263594--root .dropdown1002263594--drop-down-input .dropdown1002263594--caret {\n    margin-right: 5px;\n    vertical-align: middle;\n}\n\n.dropdown1002263594--root .dropdown1002263594--drop-down-input .dropdown1002263594--label {\n    margin-left: 5px;\n}\n\n.dropdown1002263594--root .dropdown1002263594--drop-down-input:hover {\n    cursor: pointer;\n    border: 1px solid #5cb4ff;\n}\n\n.dropdown1002263594--root .dropdown1002263594--drop-down-list.SelectionList3240466394--root {\n    -st-extends: SelectionList;\n    width: 100%;\n    background-color: white;\n}\n",
     module.id
 );

lib/components/drop-down/index.d.ts

 export * from './drop-down';

lib/components/drop-down/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/global-event/global-event.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/global-event/global-event.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/global-event/index.d.ts

 export * from './global-event';

lib/components/global-event/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/image/image.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/image/image.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/image/index.d.ts

 export * from './image';

lib/components/image/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/index.d.ts

@@ -17,1 +17,2 @@ export * from './date-picker';
 export { Divider as SelectionListDivider, divider as SelectionListDividerSymbol, Option as SelectionListOption, OptionList, SelectionList, SelectionListItemValue } from './selection-list';
+export * from './context-provider';

lib/components/index.js

@@ -26,2 +26,3 @@ "use strict";
 exports.SelectionList = selection_list_1.SelectionList;
+__export(require("./context-provider"));
 //# sourceMappingURL=index.js.map

lib/components/modal/index.d.ts

 export * from './modal';

lib/components/modal/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/modal/modal.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/modal/modal.js

@@ -12,2 +12,10 @@ "use strict";
 })();
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -32,6 +40,5 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         _this.onClick = function (event) {
-            var closeEvent = Object.create(event);
             var target = event.target;
             if (is_element_1.isElement(target)) {
-                closeEvent.source = _this.getDataFromNearestNode(target);
+                var closeEvent = __assign({}, event, { source: _this.getDataFromNearestNode(target) });
                 _this.props.onRequestClose(closeEvent);
@@ -38,0 +45,0 @@ }

lib/components/modal/modal.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
-module.exports.default = require("stylable/runtime").create(
+
+        module.exports.default = require("stylable/runtime").create(
     "root",
-    "Modal6174952",
-    {"backdrop":"Modal6174952--backdrop","children":"Modal6174952--children","root":"Modal6174952--root"},
-    ".Modal6174952--root .Modal6174952--backdrop {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    background: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.Modal6174952--root .Modal6174952--children {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    transform: translateY(-50%) translateX(-50%);\r\n    -webkit-transform: translateY(-50%) translateX(-50%);\r\n\r\n}\r\n",
+    "Modal4268681955",
+    {"backdrop":"Modal4268681955--backdrop","children":"Modal4268681955--children","root":"Modal4268681955--root"},
+    ".Modal4268681955--root .Modal4268681955--backdrop {\n    width: 100vw;\n    height: 100vh;\n    position: fixed;\n    top: 0;\n    left: 0;\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.Modal4268681955--root .Modal4268681955--children {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translateY(-50%) translateX(-50%);\n    -webkit-transform: translateY(-50%) translateX(-50%);\n\n}\n",
     module.id
 );

lib/components/number-input/index.d.ts

 export * from './number-input';

lib/components/number-input/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/number-input/number-input.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/number-input/number-input.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/number-input/number-input.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../../style/project.st.css");
+require("../stepper/stepper.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "numberinput2889669232",
-    {"root":"numberinput2889669232--root","prefix":"numberinput2889669232--prefix","suffix":"numberinput2889669232--suffix","native-input":"numberinput2889669232--native-input","stepper":"numberinput2889669232--stepper"},
-    ".numberinput2889669232--root {\r\n    -st-states: focus, disabled, error;\r\n\r\n    box-sizing: inherit;\r\n    position: relative;\r\n    display: inline-flex;\r\n\r\n    border: solid 1px #d1d1d1;\r\n    border-radius: 0px;\r\n    background-color: #ffffff;\r\n    color: #000000;\r\n\r\n    height: 36px;\r\n    min-width: 192px;\r\n}\r\n\r\n.numberinput2889669232--root:hover {\r\n    border: solid 1px #5cb4ff;\r\n}\r\n\r\n.numberinput2889669232--root[data-numberinput2889669232-focus] {\r\n    border: solid 1px #4990e2;\r\n}\r\n\r\n.numberinput2889669232--root[data-numberinput2889669232-disabled] {\r\n    background-color: #f1f1f1;\r\n    color: #577083;\r\n    border: solid 1px #d1d1d1;\r\n}\r\n\r\n.numberinput2889669232--root[data-numberinput2889669232-error] {\r\n    border: solid 1px #d0011b;\r\n}\r\n\r\n.numberinput2889669232--root .numberinput2889669232--prefix {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.numberinput2889669232--root .numberinput2889669232--suffix {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.numberinput2889669232--root .numberinput2889669232--native-input {\r\n    flex-grow: 1;\r\n\r\n    height: auto;\r\n    border: none;\r\n    box-shadow: none;\r\n    outline: none;\r\n\r\n    background: none;\r\n\r\n    -moz-appearance: textfield;\r\n}\r\n\r\n.numberinput2889669232--root .numberinput2889669232--native-input::-webkit-outer-spin-button,\r\n.numberinput2889669232--root .numberinput2889669232--native-input::-webkit-inner-spin-button {\r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n}\r\n.numberinput2889669232--root .numberinput2889669232--native-input:disabled {\r\n    background: inherit;\r\n}\r\n\r\n.numberinput2889669232--root .numberinput2889669232--stepper.stepper2604317534--root {\r\n    -st-extends: stepper;\r\n    height: auto;\r\n}\r\n",
+    "numberinput1520953724",
+    {"root":"numberinput1520953724--root","prefix":"numberinput1520953724--prefix","suffix":"numberinput1520953724--suffix","native-input":"numberinput1520953724--native-input","stepper":"numberinput1520953724--stepper"},
+    ".numberinput1520953724--root {\n    -st-states: focus, disabled, error;\n\n    box-sizing: inherit;\n    position: relative;\n    display: inline-flex;\n\n    border: solid 1px #d1d1d1;\n    border-radius: 0px;\n    background-color: #ffffff;\n    color: #000000;\n\n    height: 36px;\n    min-width: 192px;\n}\n\n.numberinput1520953724--root:hover {\n    border: solid 1px #5cb4ff;\n}\n\n.numberinput1520953724--root[data-numberinput1520953724-focus] {\n    border: solid 1px #4990e2;\n}\n\n.numberinput1520953724--root[data-numberinput1520953724-disabled] {\n    background-color: #f1f1f1;\n    color: #577083;\n    border: solid 1px #d1d1d1;\n}\n\n.numberinput1520953724--root[data-numberinput1520953724-error] {\n    border: solid 1px #d0011b;\n}\n\n.numberinput1520953724--root .numberinput1520953724--prefix {\n    display: flex;\n    align-items: center;\n}\n\n.numberinput1520953724--root .numberinput1520953724--suffix {\n    display: flex;\n    align-items: center;\n}\n\n.numberinput1520953724--root .numberinput1520953724--native-input {\n    flex-grow: 1;\n\n    height: auto;\n    border: none;\n    box-shadow: none;\n    outline: none;\n\n    background: none;\n\n    -moz-appearance: textfield;\n}\n\n.numberinput1520953724--root .numberinput1520953724--native-input::-webkit-outer-spin-button,\n.numberinput1520953724--root .numberinput1520953724--native-input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n}\n.numberinput1520953724--root .numberinput1520953724--native-input:disabled {\n    background: inherit;\n}\n\n.numberinput1520953724--root .numberinput1520953724--stepper.stepper2117287016--root {\n    -st-extends: stepper;\n    height: auto;\n}\n",
     module.id
 );

lib/components/popup/index.d.ts

 export * from './popup';

lib/components/popup/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/popup/popup.d.ts

 /// <reference types="react" />
 import * as React from 'react';
+import { properties } from 'wix-react-tools';
 export declare type PopupVerticalPosition = 'top' | 'center' | 'bottom';
@@ -9,3 +10,3 @@ export declare type PopupHorizontalPosition = 'left' | 'center' | 'right';
 }
-export interface PopupProps {
+export interface PopupProps extends properties.Props {
     open?: boolean;
@@ -12,0 +13,0 @@ anchorPosition?: PopupPositionPoint;

lib/components/popup/popup.js

@@ -12,4 +12,11 @@ "use strict";
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
+var wix_react_tools_1 = require("wix-react-tools");
 var portal_1 = require("../portal");
@@ -66,2 +73,5 @@ var Popup = /** @class */ (function (_super) {
     };
+    Popup = __decorate([
+        wix_react_tools_1.properties
+    ], Popup);
     return Popup;
@@ -68,0 +78,0 @@ }(React.Component));

lib/components/portal/index.d.ts

 export * from './portal';

lib/components/portal/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/portal/portal.d.ts

@@ -6,3 +6,3 @@ /// <reference types="react" />
 }
-export declare class Portal extends React.PureComponent<PortalProps, {}> {
+export declare class Portal extends React.PureComponent<PortalProps> {
     private container;
@@ -9,0 +9,0 @@ private portalContent;

lib/components/portal/portal.js

@@ -12,2 +12,19 @@ "use strict";
 })();
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -22,3 +39,4 @@ var React = require("react");
     Portal.prototype.render = function () {
-        this.portalContent = (React.createElement("div", { "data-automation-id": "PORTAL", className: this.props.className, style: this.props.style }, this.props.children));
+        var _a = this.props, children = _a.children, rest = __rest(_a, ["children"]);
+        this.portalContent = (React.createElement("div", __assign({}, rest, { "data-automation-id": "PORTAL" }), children));
         return null;
@@ -25,0 +43,0 @@ };

lib/components/radio-group/index.d.ts

 export * from './radio-button';
 export * from './radio-group';

lib/components/radio-group/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/radio-group/radio-button.d.ts

@@ -9,3 +9,2 @@ /// <reference types="react" />
     readOnly?: boolean;
-    labelLocation?: 'right' | 'left';
     tabIndex?: number;
@@ -12,0 +11,0 @@ className?: string;

lib/components/radio-group/radio-button.js

@@ -45,3 +45,2 @@ "use strict";
             disabled: this.props.disabled,
-            isLeftLabel: this.props.labelLocation === 'left',
             focused: this.state.isFocused
@@ -58,3 +57,2 @@ };
         onChange: utils_1.noop,
-        labelLocation: 'right',
         checked: false,
@@ -61,0 +59,0 @@ tabIndex: 0

lib/components/radio-group/radio-button.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
-module.exports.default = require("stylable/runtime").create(
+
+        module.exports.default = require("stylable/runtime").create(
     "root",
-    "RadioButton201151039",
-    {"root":"RadioButton201151039--root","contentContainer":"RadioButton201151039--contentContainer","radioInput":"RadioButton201151039--radioInput","iconContainer":"RadioButton201151039--iconContainer","radioSVG":"RadioButton201151039--radioSVG","checkMark":"RadioButton201151039--checkMark","radioLabel":"RadioButton201151039--radioLabel","defaultStroke":"#adbbc6","checkedStroke":"#4A90E2","checkedFill":"#4A90E2","disabledStroke":"#d1d1d1","disabledFill":"#f1f1f1","disabledCheckedFill":"#d1d1d1","focusOutline":"rgba(92, 180, 255, 0.5)"},
-    ".RadioButton201151039--root {\r\n    -st-states: disabled, isLeftLabel, focused, checked;\r\n    display: inline-block;\r\n    position: relative;\r\n    cursor: pointer;\r\n}\r\n\r\n.RadioButton201151039--root[data-radiobutton201151039-disabled] {\r\n    cursor: default;\r\n}\r\n\r\n.RadioButton201151039--root .RadioButton201151039--contentContainer {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.RadioButton201151039--root[data-radiobutton201151039-isleftlabel] .RadioButton201151039--contentContainer {\r\n    flex-direction: row-reverse;\r\n}\r\n\r\n.RadioButton201151039--root .RadioButton201151039--radioInput {\r\n    position: absolute;\r\n    overflow: hidden;\r\n    height: 1px;\r\n    width: 1px;\r\n    margin: -1px;\r\n    padding: 0;\r\n    border: 0;\r\n    opacity: 0;\r\n}\r\n\r\n.RadioButton201151039--root .RadioButton201151039--iconContainer {\r\n    width: 24px;\r\n    height: 24px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.RadioButton201151039--root .RadioButton201151039--radioSVG {\r\n    cursor: inherit;\r\n    align-self: center;\r\n    width: 16px;\r\n    height: 16px;\r\n    fillRule: evenodd;\r\n    stroke: #adbbc6;\r\n    border-radius: 50%;\r\n    box-sizing: content-box;\r\n    fill: none;\r\n}\r\n\r\n.RadioButton201151039--root[data-radiobutton201151039-checked]:not([data-radiobutton201151039-disabled]) .RadioButton201151039--radioSVG {\r\n    stroke: #4A90E2;\r\n}\r\n\r\n.RadioButton201151039--root:hover:not([data-radiobutton201151039-disabled]) .RadioButton201151039--radioSVG{\r\n    stroke: #4A90E2\r\n}\r\n\r\n.RadioButton201151039--root[data-radiobutton201151039-disabled] .RadioButton201151039--radioSVG {\r\n    stroke: #d1d1d1;\r\n}\r\n\r\n.RadioButton201151039--root[data-radiobutton201151039-disabled]:not([data-radiobutton201151039-checked]) .RadioButton201151039--radioSVG {\r\n    fill: #f1f1f1;\r\n}\r\n\r\n.RadioButton201151039--root[data-radiobutton201151039-focused] .RadioButton201151039--radioSVG {\r\n    border: 4px solid  rgba(92, 180, 255, 0.5);\r\n}\r\n\r\n.RadioButton201151039--root .RadioButton201151039--checkMark {\r\n    fill: #4A90E2;\r\n}\r\n\r\n.RadioButton201151039--root[data-radiobutton201151039-disabled] .RadioButton201151039--checkMark {\r\n    fill: #d1d1d1;\r\n}\r\n\r\n.RadioButton201151039--root .RadioButton201151039--radioLabel {\r\n    margin-left: 10px;\r\n}\r\n\r\n.RadioButton201151039--root[data-radiobutton201151039-isleftlabel] .RadioButton201151039--radioLabel {\r\n    margin-left: 0;\r\n    margin-right: 10px;\r\n}\r\n\r\n",
+    "RadioButton552562843",
+    {"root":"RadioButton552562843--root","contentContainer":"RadioButton552562843--contentContainer","radioInput":"RadioButton552562843--radioInput","iconContainer":"RadioButton552562843--iconContainer","radioSVG":"RadioButton552562843--radioSVG","checkMark":"RadioButton552562843--checkMark","radioLabel":"RadioButton552562843--radioLabel","defaultStroke":"#adbbc6","checkedStroke":"#4A90E2","checkedFill":"#4A90E2","disabledStroke":"#d1d1d1","disabledFill":"#f1f1f1","disabledCheckedFill":"#d1d1d1","focusOutline":"rgba(92, 180, 255, 0.5)"},
+    ".RadioButton552562843--root {\n    -st-states: disabled, focused, checked;\n    display: inline-block;\n    position: relative;\n    cursor: pointer;\n}\n\n.RadioButton552562843--root[data-radiobutton552562843-disabled] {\n    cursor: default;\n}\n\n.RadioButton552562843--root .RadioButton552562843--contentContainer {\n    display: flex;\n    align-items: center;\n}\n\n.RadioButton552562843--root .RadioButton552562843--radioInput {\n    position: absolute;\n    overflow: hidden;\n    height: 1px;\n    width: 1px;\n    margin: -1px;\n    padding: 0;\n    border: 0;\n    opacity: 0;\n}\n\n.RadioButton552562843--root .RadioButton552562843--iconContainer {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.RadioButton552562843--root .RadioButton552562843--radioSVG {\n    cursor: inherit;\n    align-self: center;\n    width: 16px;\n    height: 16px;\n    fillRule: evenodd;\n    stroke: #adbbc6;\n    border-radius: 50%;\n    box-sizing: content-box;\n    fill: none;\n}\n\n.RadioButton552562843--root[data-radiobutton552562843-checked]:not([data-radiobutton552562843-disabled]) .RadioButton552562843--radioSVG {\n    stroke: #4A90E2;\n}\n\n.RadioButton552562843--root:hover:not([data-radiobutton552562843-disabled]) .RadioButton552562843--radioSVG{\n    stroke: #4A90E2\n}\n\n.RadioButton552562843--root[data-radiobutton552562843-disabled] .RadioButton552562843--radioSVG {\n    stroke: #d1d1d1;\n}\n\n.RadioButton552562843--root[data-radiobutton552562843-disabled]:not([data-radiobutton552562843-checked]) .RadioButton552562843--radioSVG {\n    fill: #f1f1f1;\n}\n\n.RadioButton552562843--root[data-radiobutton552562843-focused] .RadioButton552562843--radioSVG {\n    border: 4px solid  rgba(92, 180, 255, 0.5);\n}\n\n.RadioButton552562843--root .RadioButton552562843--checkMark {\n    fill: #4A90E2;\n}\n\n.RadioButton552562843--root[data-radiobutton552562843-disabled] .RadioButton552562843--checkMark {\n    fill: #d1d1d1;\n}\n\n.RadioButton552562843--root .RadioButton552562843--radioLabel {\n    margin-left: 10px;\n}\n",
     module.id
 );

lib/components/radio-group/radio-group.d.ts

@@ -9,3 +9,2 @@ /// <reference types="react" />
     dataSource?: RadioButtonProps[];
-    labelLocation?: 'right' | 'left';
     name?: string;
@@ -12,0 +11,0 @@ disabled?: boolean;

lib/components/radio-group/radio-group.js

@@ -92,3 +92,3 @@ "use strict";
         var _this = this;
-        return this.props.dataSource.map(function (props, index) { return (React.createElement(radio_button_1.RadioButton, { key: index, value: props.value, "data-automation-id": 'RADIO_BUTTON_' + index, checked: _this.checkedArray[index].checked, onChange: _this.childrenOnClick(index), disabled: _this.props.disabled || props.disabled, readOnly: _this.props.readOnly || props.readOnly, labelLocation: _this.props.labelLocation, name: _this.name, className: "radioGroupChild", tabIndex: _this.getChildTabIndex(index, _this.isGroupChecked) })); });
+        return this.props.dataSource.map(function (props, index) { return (React.createElement(radio_button_1.RadioButton, { key: index, value: props.value, "data-automation-id": 'RADIO_BUTTON_' + index, checked: _this.checkedArray[index].checked, onChange: _this.childrenOnClick(index), disabled: _this.props.disabled || props.disabled, readOnly: _this.props.readOnly || props.readOnly, name: _this.name, className: "radioGroupChild", tabIndex: _this.getChildTabIndex(index, _this.isGroupChecked) })); });
     };
@@ -100,3 +100,3 @@ RadioGroup.prototype.createChildren = function (dataArray) {
                 if (child.type === radio_button_1.RadioButton) {
-                    return (React.createElement(radio_button_1.RadioButton, { key: index, value: child.props.value, "data-automation-id": 'RADIO_BUTTON_' + index, checked: _this.checkedArray[index].checked, onChange: _this.childrenOnClick(index), disabled: _this.props.disabled || child.props.disabled, readOnly: _this.props.readOnly || child.props.readOnly, labelLocation: _this.props.labelLocation, name: _this.name, className: "radioGroupChild", tabIndex: _this.getChildTabIndex(index, _this.isGroupChecked) }));
+                    return (React.createElement(radio_button_1.RadioButton, { key: index, value: child.props.value, "data-automation-id": 'RADIO_BUTTON_' + index, checked: _this.checkedArray[index].checked, onChange: _this.childrenOnClick(index), disabled: _this.props.disabled || child.props.disabled, readOnly: _this.props.readOnly || child.props.readOnly, name: _this.name, className: "radioGroupChild", tabIndex: _this.getChildTabIndex(index, _this.isGroupChecked) }));
                 }
@@ -127,3 +127,2 @@ else {
         dataSource: [],
-        labelLocation: 'right',
         tabIndex: 0
@@ -130,0 +129,0 @@ };

lib/components/radio-group/radio-group.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("./radio-button.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "RadioGroup4255060749",
-    {"root":"RadioGroup4255060749--root","radioGroupChild":"RadioGroup4255060749--radioGroupChild"},
-    ".RadioGroup4255060749--root {\r\n    display: inline-block;\r\n}\r\n\r\n.RadioGroup4255060749--root .RadioGroup4255060749--radioGroupChild.RadioButton201151039--root {\r\n    -st-extends: Radio;\r\n}\r\n",
+    "RadioGroup3709136759",
+    {"root":"RadioGroup3709136759--root","radioGroupChild":"RadioGroup3709136759--radioGroupChild"},
+    ".RadioGroup3709136759--root {\n    display: inline-block;\n}\n\n.RadioGroup3709136759--root .RadioGroup3709136759--radioGroupChild.RadioButton552562843--root {\n    -st-extends: Radio;\n}\n",
     module.id
 );

lib/components/screen-reader-notification/index.d.ts

 export * from './screen-reader-notification';

lib/components/screen-reader-notification/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/screen-reader-notification/screen-reader-notification.d.ts

 /// <reference types="react" />
 import * as React from 'react';
 export declare const ScreenReaderNotification: React.SFC;

lib/components/screen-reader-notification/screen-reader-notification.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/screen-reader-notification/screen-reader-notification.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
-module.exports.default = require("stylable/runtime").create(
+
+        module.exports.default = require("stylable/runtime").create(
     "root",
-    "screenreadernotification2168094187",
-    {"root":"screenreadernotification2168094187--root"},
-    ".screenreadernotification2168094187--root {\r\n\tposition: fixed;\r\n\tbottom: 100%;\r\n\tleft: 100%;\r\n}\r\n",
+    "screenreadernotification4174739411",
+    {"root":"screenreadernotification4174739411--root"},
+    ".screenreadernotification4174739411--root {\n\tposition: fixed;\n\tbottom: 100%;\n\tleft: 100%;\n}\n",
     module.id
 );

lib/components/selection-list/divider.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/selection-list/divider.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/selection-list/index.d.ts

@@ -0,0 +0,0 @@ export { divider, Divider } from './divider';

lib/components/selection-list/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/selection-list/option.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/selection-list/option.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/selection-list/selection-list-model.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/selection-list/selection-list-model.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/selection-list/selection-list-view.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/selection-list/selection-list-view.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/selection-list/selection-list.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/selection-list/selection-list.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/selection-list/selection-list.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
-module.exports.default = require("stylable/runtime").create(
+
+        module.exports.default = require("stylable/runtime").create(
     "root",
-    "SelectionList3026337750",
-    {"list":"SelectionList3026337750--list","divider":"SelectionList3026337750--divider","item":"SelectionList3026337750--item","root":"SelectionList3026337750--root"},
-    ".SelectionList3026337750--list.SelectionList3026337750--root {\r\n    -st-extends: root;\r\n    -st-states: focused;\r\n    width: 276px;\r\n    border: 1px solid #adbbc6;\r\n    outline: none;\r\n    display: inline-block;\r\n}\r\n\r\n.SelectionList3026337750--list.SelectionList3026337750--root[data-selectionlist3026337750-focused] {\r\n    border-color: #4a90e2;\r\n}\r\n\r\n.SelectionList3026337750--root .SelectionList3026337750--divider {\r\n    height: 1px;\r\n    background-color: #adbbc6;\r\n}\r\n\r\n.SelectionList3026337750--root .SelectionList3026337750--item {\r\n    -st-states: selected, focused, disabled;\r\n    width: 100%;\r\n    min-height: 36px;\r\n    padding: 5px 23px;\r\n    border: 1px solid transparent;\r\n    font-family: ArialMT;\r\n    font-size: 16px;\r\n    line-height: 1.5;\r\n    color: #000000;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.SelectionList3026337750--root .SelectionList3026337750--item:hover {\r\n    background-color: #edf7ff;\r\n}\r\n\r\n.SelectionList3026337750--root .SelectionList3026337750--item[data-selectionlist3026337750-selected]:not(:hover) {\r\n    background-color: #f1f1f1;\r\n}\r\n\r\n.SelectionList3026337750--root .SelectionList3026337750--item[data-selectionlist3026337750-disabled] {\r\n    color: #c8c8c8;\r\n    cursor: default;\r\n}\r\n\r\n.SelectionList3026337750--root .SelectionList3026337750--item[data-selectionlist3026337750-disabled]:hover {\r\n    background: #ffffff;\r\n}\r\n\r\n.SelectionList3026337750--list.SelectionList3026337750--root[data-selectionlist3026337750-focused] > .SelectionList3026337750--item[data-selectionlist3026337750-selected] {\r\n    background-color: #4990e2;\r\n    color: #fff;\r\n}\r\n\r\n.SelectionList3026337750--list.SelectionList3026337750--root[data-selectionlist3026337750-focused] > .SelectionList3026337750--item[data-selectionlist3026337750-selected]:hover {\r\n    background-color: #5cb4ff;\r\n    color: #ffffff;\r\n}\r\n\r\n.SelectionList3026337750--list.SelectionList3026337750--root[data-selectionlist3026337750-focused] > .SelectionList3026337750--item[data-selectionlist3026337750-focused] {\r\n    border-color: #4990e2;\r\n}\r\n",
+    "SelectionList3240466394",
+    {"list":"SelectionList3240466394--list","divider":"SelectionList3240466394--divider","item":"SelectionList3240466394--item","root":"SelectionList3240466394--root"},
+    ".SelectionList3240466394--list.SelectionList3240466394--root {\n    -st-extends: root;\n    -st-states: focused;\n    width: 276px;\n    border: 1px solid #adbbc6;\n    outline: none;\n    display: inline-block;\n}\n\n.SelectionList3240466394--list.SelectionList3240466394--root[data-selectionlist3240466394-focused] {\n    border-color: #4a90e2;\n}\n\n.SelectionList3240466394--root .SelectionList3240466394--divider {\n    height: 1px;\n    background-color: #adbbc6;\n}\n\n.SelectionList3240466394--root .SelectionList3240466394--item {\n    -st-states: selected, focused, disabled;\n    width: 100%;\n    min-height: 36px;\n    padding: 5px 23px;\n    border: 1px solid transparent;\n    font-family: ArialMT;\n    font-size: 16px;\n    line-height: 1.5;\n    color: #000000;\n    cursor: pointer;\n    user-select: none;\n    box-sizing: border-box;\n}\n\n.SelectionList3240466394--root .SelectionList3240466394--item:hover {\n    background-color: #edf7ff;\n}\n\n.SelectionList3240466394--root .SelectionList3240466394--item[data-selectionlist3240466394-selected]:not(:hover) {\n    background-color: #f1f1f1;\n}\n\n.SelectionList3240466394--root .SelectionList3240466394--item[data-selectionlist3240466394-disabled] {\n    color: #c8c8c8;\n    cursor: default;\n}\n\n.SelectionList3240466394--root .SelectionList3240466394--item[data-selectionlist3240466394-disabled]:hover {\n    background: #ffffff;\n}\n\n.SelectionList3240466394--list.SelectionList3240466394--root[data-selectionlist3240466394-focused] > .SelectionList3240466394--item[data-selectionlist3240466394-selected] {\n    background-color: #4990e2;\n    color: #fff;\n}\n\n.SelectionList3240466394--list.SelectionList3240466394--root[data-selectionlist3240466394-focused] > .SelectionList3240466394--item[data-selectionlist3240466394-selected]:hover {\n    background-color: #5cb4ff;\n    color: #ffffff;\n}\n\n.SelectionList3240466394--list.SelectionList3240466394--root[data-selectionlist3240466394-focused] > .SelectionList3240466394--item[data-selectionlist3240466394-focused] {\n    border-color: #4990e2;\n}\n",
     module.id
 );

lib/components/slider/index.d.ts

 export * from './slider';

lib/components/slider/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/slider/slider.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/slider/slider.js

@@ -210,3 +210,3 @@ "use strict";
         var _this = this;
-        return (React.createElement("div", { "data-automation-id": "SLIDER-CONTAINER", className: "container", "style-state": {
+        return (React.createElement("div", { "data-automation-id": "SLIDER", ref: function (el) { return _this.sliderArea = el; }, className: "container", title: this.props.label, onMouseDown: this.onSliderAreaMouseDown, onTouchStart: this.onSliderAreaTouchStart, "style-state": {
                 'active': this.state.isActive,
@@ -222,8 +222,7 @@ 'disabled': Boolean(this.props.disabled),
             React.createElement("input", { className: "native-input", value: this.props.value, type: "hidden", "data-automation-id": "SLIDER-NATIVE-INPUT", name: this.props.name, required: this.props.required, disabled: this.props.disabled }),
-            React.createElement("div", { ref: function (el) { return _this.sliderArea = el; }, className: "slider", "data-automation-id": "SLIDER", title: this.props.label, onMouseDown: this.onSliderAreaMouseDown, onTouchStart: this.onSliderAreaTouchStart },
-                React.createElement("div", { className: "track", "data-automation-id": "SLIDER-TRACK" },
-                    React.createElement("div", { className: "progress", "data-automation-id": "SLIDER-PROGRESS", style: this.getProgressStyles() }),
-                    React.createElement("a", { ref: function (el) { return _this.focusableElement = el; }, className: "handle", "data-automation-id": "SLIDER-HANDLE", style: this.getHandleStyles(), onKeyDown: this.onSliderAreaKeyDown, onFocus: this.onSliderFocus, onBlur: this.onSliderBlur, role: "slider", "aria-label": this.props.label, "aria-orientation": this.state.isVertical ? 'vertical' : 'horizontal', "aria-valuemin": "" + this.props.min, "aria-valuemax": "" + this.props.max, "aria-valuenow": "" + this.props.value, tabIndex: this.props.disabled ? -1 : 0 },
-                        React.createElement("div", { className: "tooltip", "data-automation-id": "SLIDER-TOOLTIP" }, this.getTooltip())),
-                    this.getMarks()))));
+            React.createElement("div", { className: "track", "data-automation-id": "SLIDER-TRACK" },
+                React.createElement("div", { className: "progress", "data-automation-id": "SLIDER-PROGRESS", style: this.getProgressStyles() }),
+                React.createElement("a", { ref: function (el) { return _this.focusableElement = el; }, className: "handle", "data-automation-id": "SLIDER-HANDLE", style: this.getHandleStyles(), onKeyDown: this.onSliderAreaKeyDown, onFocus: this.onSliderFocus, onBlur: this.onSliderBlur, role: "slider", "aria-label": this.props.label, "aria-orientation": this.state.isVertical ? 'vertical' : 'horizontal', "aria-valuemin": "" + this.props.min, "aria-valuemax": "" + this.props.max, "aria-valuenow": "" + this.props.value, tabIndex: this.props.disabled ? -1 : 0 },
+                    React.createElement("div", { className: "tooltip", "data-automation-id": "SLIDER-TOOLTIP" }, this.getTooltip())),
+                this.getMarks())));
     };
@@ -230,0 +229,0 @@ Slider.prototype.componentDidMount = function () {

lib/components/slider/slider.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../../style/project.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "Slider1946067590",
-    {"native-input":"Slider1946067590--native-input","root":"Slider1946067590--root","slider":"Slider1946067590--slider","track":"Slider1946067590--track","progress":"Slider1946067590--progress","handle":"Slider1946067590--handle","markProgress":"Slider1946067590--markProgress","markTrack":"Slider1946067590--markTrack","tooltip":"Slider1946067590--tooltip","colorTrack":"#adbbc6","colorTrack_Hover":"#7d8c98","colorProgress":"#4a90e2","colorProgress_Hover":"#4a90e2","colorHandle":"#ffffff","colorHandle_Hover":"#edf7ff","colorHandle_Active":"#4a90e2","colorHandle_Focus":"rgba(92, 180, 255, 0.5)","colorHandleBorder":"#7d8c98","colorHandle_Disabled":"#f1f1f1","color_Error":"#d0011b","color_Disabled":"#c8c8c8","markSize":"8px","markRadius":"4px","markMiddleOfBar":"-2px","markMiddleOfDot":"-4px","focusSize":"4px","handleSize":"16px","handleWidth":"16px","handleHeight":"16px","handleRadius":"8px","handleBorder":"#7d8c98","handleBorderHover":"#4a90e2","trackSize":"4px","trackRadius":"0px","middleOfBar":"-6px","middleOfHandle":"-8px","minVerticalSliderHeight":"44px"},
-    ".Slider1946067590--root .Slider1946067590--native-input {\r\n    position: absolute;\r\n    opacity: 0;\r\n    width: 0;\r\n    height: 0;\r\n    outline: none;\r\n}\r\n\r\n.Slider1946067590--root {\r\n    -st-states: active, disabled, error, x, x-reverse, y, y-reverse;\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x] {\r\n    width: 100%;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x-reverse] {\r\n    width: 100%;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y] {\r\n    height: 100%;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y-reverse] {\r\n    height: 100%;\r\n}\r\n\r\n.Slider1946067590--root .Slider1946067590--slider {\r\n    cursor: pointer;\r\n    outline: none;\r\n    user-select: none;\r\n    pointer-events: inherit;\r\n    touch-action: none;\r\n    -webkit-tap-highlight-color: rgba(0,0,0,0);\r\n    -webkit-touch-callout: none;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x] .Slider1946067590--slider{\r\n    width: 100%;\r\n    padding: 15px 0;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x-reverse] .Slider1946067590--slider{\r\n    width: 100%;\r\n    padding: 15px 0;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y] .Slider1946067590--slider{\r\n    min-height: 44px;\r\n    height: 100%;\r\n    padding: 0 15px;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y-reverse] .Slider1946067590--slider{\r\n    min-height: 44px;\r\n    height: 100%;\r\n    padding: 0 15px;\r\n}\r\n\r\n.Slider1946067590--root .Slider1946067590--track {\r\n    position: relative;\r\n    border-radius: 0px;\r\n    background-color: #adbbc6;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x] .Slider1946067590--track{\r\n    height: 4px;\r\n    width: 100%;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x-reverse] .Slider1946067590--track{\r\n    height: 4px;\r\n    width: 100%;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y] .Slider1946067590--track{\r\n    text-align: left;\r\n    width: 4px;\r\n    height: 100%;\r\n    min-height: 44px;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y-reverse] .Slider1946067590--track{\r\n    text-align: left;\r\n    width: 4px;\r\n    height: 100%;\r\n    min-height: 44px;\r\n}\r\n\r\n.Slider1946067590--root .Slider1946067590--progress {\r\n    position: absolute;\r\n    background-color: #4a90e2;\r\n    border-radius: 0px;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x] .Slider1946067590--progress{\r\n    left: 0;\r\n    height: inherit;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x-reverse] .Slider1946067590--progress{\r\n    right: 0;\r\n    height: inherit;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y] .Slider1946067590--progress{\r\n    bottom: 0;\r\n    width: inherit;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y-reverse] .Slider1946067590--progress{\r\n    top: 0;\r\n    width: inherit;\r\n}\r\n\r\n.Slider1946067590--root .Slider1946067590--handle {\r\n    position: absolute;\r\n    width: 16px;\r\n    height: 16px;\r\n    border-radius: 8px;\r\n    background-color: #ffffff;\r\n    border: solid 1px;\r\n    border-color: #7d8c98;\r\n    box-sizing: border-box;\r\n    z-index: 1;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x] .Slider1946067590--handle{\r\n    margin: -6px 0 0 -8px;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x-reverse] .Slider1946067590--handle{\r\n    margin: -6px -8px 0px 0px;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y] .Slider1946067590--handle{\r\n    margin: 0px 0px -8px -6px;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y-reverse] .Slider1946067590--handle{\r\n    margin: -8px 0px 0px -6px;\r\n}\r\n\r\n.Slider1946067590--root .Slider1946067590--markProgress,\r\n.Slider1946067590--root .Slider1946067590--markTrack\r\n{\r\n    width: 8px;\r\n    height: 8px;\r\n    position: absolute;\r\n    border-radius: 4px;\r\n}\r\n.Slider1946067590--root .Slider1946067590--markProgress{\r\n    background-color: #4a90e2;\r\n}\r\n.Slider1946067590--root .Slider1946067590--markTrack{\r\n    background-color: #adbbc6;\r\n}\r\n\r\n\r\n.Slider1946067590--root[data-slider1946067590-x] .Slider1946067590--markProgress,\r\n.Slider1946067590--root[data-slider1946067590-x] .Slider1946067590--markTrack\r\n{\r\n    margin: -2px 0 0 -4px;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-x-reverse] .Slider1946067590--markProgress,\r\n.Slider1946067590--root[data-slider1946067590-x-reverse] .Slider1946067590--markTrack\r\n{\r\n    margin: -2px -4px 0 0;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y] .Slider1946067590--markProgress,\r\n.Slider1946067590--root[data-slider1946067590-y] .Slider1946067590--markTrack\r\n{\r\n    margin: 0 0 -4px -2px;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-y-reverse] .Slider1946067590--markProgress,\r\n.Slider1946067590--root[data-slider1946067590-y-reverse] .Slider1946067590--markTrack\r\n{\r\n    margin: -4px 0 0 -2px;\r\n}\r\n\r\n.Slider1946067590--root .Slider1946067590--tooltip{\r\n    position: absolute;\r\n    text-align: center;\r\n    left: 50%;\r\n    bottom: 20px;\r\n}\r\n.Slider1946067590--root .Slider1946067590--tooltip > *{\r\n    display: inline-block;\r\n    position: relative;\r\n    left: -50%;\r\n}\r\n\r\n/* Hover state */\r\n.Slider1946067590--root .Slider1946067590--slider:hover .Slider1946067590--track {\r\n    background-color: #7d8c98;\r\n}\r\n\r\n.Slider1946067590--root .Slider1946067590--slider:hover .Slider1946067590--markTrack {\r\n    background-color: #7d8c98;\r\n}\r\n\r\n.Slider1946067590--root .Slider1946067590--slider:hover .Slider1946067590--handle {\r\n    background-color: #edf7ff;\r\n    border-color: #4a90e2;\r\n}\r\n\r\n/* Focus state */\r\n.Slider1946067590--root .Slider1946067590--handle:focus {\r\n    -webkit-box-shadow: 0 0 0 4px rgba(92, 180, 255, 0.5);\r\n    box-shadow: 0 0 0 4px rgba(92, 180, 255, 0.5);\r\n    outline: none;\r\n}\r\n\r\n/* Active state */\r\n.Slider1946067590--root[data-slider1946067590-active] .Slider1946067590--handle,\r\n.Slider1946067590--root[data-slider1946067590-active] .Slider1946067590--slider:hover .Slider1946067590--handle {\r\n    -webkit-box-shadow: 0 0 0 4px rgba(92, 180, 255, 0.5);\r\n    box-shadow: 0 0 0 4px rgba(92, 180, 255, 0.5);\r\n    background-color: #4a90e2;\r\n    border-color: #4a90e2;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-active] .Slider1946067590--track {\r\n    background-color: #adbbc6;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-active] .Slider1946067590--markTrack {\r\n    background-color: #adbbc6;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-active] .Slider1946067590--progress {\r\n    background-color: #4a90e2;\r\n}\r\n\r\n/* Disabled state */\r\n.Slider1946067590--root[data-slider1946067590-disabled] .Slider1946067590--slider {\r\n    cursor: not-allowed;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-disabled] .Slider1946067590--handle ,\r\n.Slider1946067590--root[data-slider1946067590-disabled] .Slider1946067590--slider:hover .Slider1946067590--handle {\r\n    -webkit-box-shadow: 0 0 0 0px rgba(92, 180, 255, 0.5);\r\n    box-shadow: 0 0 0 0px rgba(92, 180, 255, 0.5);\r\n    border-color: #c8c8c8;\r\n    background-color: #f1f1f1;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-disabled] .Slider1946067590--track ,\r\n.Slider1946067590--root[data-slider1946067590-disabled] .Slider1946067590--slider:hover .Slider1946067590--track {\r\n    background-color: #c8c8c8;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-disabled] .Slider1946067590--markTrack ,\r\n.Slider1946067590--root[data-slider1946067590-disabled] .Slider1946067590--slider:hover .Slider1946067590--markTrack {\r\n    background-color: #c8c8c8;\r\n}\r\n\r\n.Slider1946067590--root[data-slider1946067590-disabled] .Slider1946067590--progress {\r\n    background-color: transparent;\r\n}\r\n\r\n/* Error state */\r\n.Slider1946067590--root[data-slider1946067590-error] .Slider1946067590--markProgress,\r\n.Slider1946067590--root[data-slider1946067590-error] .Slider1946067590--progress\r\n{\r\n    background-color: #d0011b;\r\n}\r\n.Slider1946067590--root[data-slider1946067590-active][data-slider1946067590-error] .Slider1946067590--handle,\r\n.Slider1946067590--root[data-slider1946067590-active][data-slider1946067590-error] .Slider1946067590--slider:hover .Slider1946067590--handle {\r\n    background-color: #d0011b;\r\n    border-color: #d0011b;\r\n}\r\n",
+    "Slider3489683636",
+    {"native-input":"Slider3489683636--native-input","root":"Slider3489683636--root","track":"Slider3489683636--track","progress":"Slider3489683636--progress","handle":"Slider3489683636--handle","markProgress":"Slider3489683636--markProgress","markTrack":"Slider3489683636--markTrack","tooltip":"Slider3489683636--tooltip","colorTrack":"#adbbc6","colorTrack_Hover":"#7d8c98","colorProgress":"#4a90e2","colorProgress_Hover":"#4a90e2","colorHandle":"#ffffff","colorHandle_Hover":"#edf7ff","colorHandle_Active":"#4a90e2","colorHandle_Focus":"rgba(92, 180, 255, 0.5)","colorHandleBorder":"#7d8c98","colorHandle_Disabled":"#f1f1f1","color_Error":"#d0011b","color_Disabled":"#c8c8c8","markSize":"8px","markRadius":"50%","markMiddleOfBar":"-2px","markMiddleOfDot":"-4px","focusSize":"4px","handleSize":"16px","handleWidth":"16px","handleHeight":"16px","handleRadius":"50%","handleBorder":"#7d8c98","handleBorderHover":"#4a90e2","trackSize":"4px","trackRadius":"0px","middleOfBar":"-6px","middleOfHandle":"-8px","minVerticalSliderHeight":"44px","clickableAreaRadius":"15px"},
+    ".Slider3489683636--root .Slider3489683636--native-input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n    outline: none;\n}\n\n.Slider3489683636--root {\n    -st-states: active, disabled, error, x, x-reverse, y, y-reverse;\n\n    position: relative;\n    display: inline-block;\n    cursor: pointer;\n    outline: none;\n    user-select: none;\n    pointer-events: inherit;\n    touch-action: none;\n    -webkit-tap-highlight-color: rgba(0,0,0,0);\n    -webkit-touch-callout: none;\n}\n\n.Slider3489683636--root[data-slider3489683636-x] {\n    width: 100%;\n    padding: 15px 0;\n}\n\n.Slider3489683636--root[data-slider3489683636-x-reverse] {\n    width: 100%;\n    padding: 15px 0;\n}\n\n.Slider3489683636--root[data-slider3489683636-y] {\n    min-height: 44px;\n    height: 100%;\n    padding: 0 15px;\n}\n\n.Slider3489683636--root[data-slider3489683636-y-reverse] {\n    min-height: 44px;\n    height: 100%;\n    padding: 0 15px;\n}\n\n.Slider3489683636--root .Slider3489683636--track {\n    position: relative;\n    border-radius: 0px;\n    background-color: #adbbc6;\n}\n\n.Slider3489683636--root[data-slider3489683636-x] .Slider3489683636--track{\n    height: 4px;\n    width: 100%;\n}\n\n.Slider3489683636--root[data-slider3489683636-x-reverse] .Slider3489683636--track{\n    height: 4px;\n    width: 100%;\n}\n\n.Slider3489683636--root[data-slider3489683636-y] .Slider3489683636--track{\n    text-align: left;\n    width: 4px;\n    height: 100%;\n    min-height: 44px;\n}\n\n.Slider3489683636--root[data-slider3489683636-y-reverse] .Slider3489683636--track{\n    text-align: left;\n    width: 4px;\n    height: 100%;\n    min-height: 44px;\n}\n\n.Slider3489683636--root .Slider3489683636--progress {\n    position: absolute;\n    background-color: #4a90e2;\n    border-radius: 0px;\n}\n\n.Slider3489683636--root[data-slider3489683636-x] .Slider3489683636--progress{\n    left: 0;\n    height: inherit;\n}\n\n.Slider3489683636--root[data-slider3489683636-x-reverse] .Slider3489683636--progress{\n    right: 0;\n    height: inherit;\n}\n\n.Slider3489683636--root[data-slider3489683636-y] .Slider3489683636--progress{\n    bottom: 0;\n    width: inherit;\n}\n\n.Slider3489683636--root[data-slider3489683636-y-reverse] .Slider3489683636--progress{\n    top: 0;\n    width: inherit;\n}\n\n.Slider3489683636--root .Slider3489683636--handle {\n    position: absolute;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background-color: #ffffff;\n    border: solid 1px;\n    border-color: #7d8c98;\n    box-sizing: border-box;\n    z-index: 1;\n}\n\n.Slider3489683636--root[data-slider3489683636-x] .Slider3489683636--handle{\n    margin: -6px 0 0 -8px;\n}\n\n.Slider3489683636--root[data-slider3489683636-x-reverse] .Slider3489683636--handle{\n    margin: -6px -8px 0px 0px;\n}\n\n.Slider3489683636--root[data-slider3489683636-y] .Slider3489683636--handle{\n    margin: 0px 0px -8px -6px;\n}\n\n.Slider3489683636--root[data-slider3489683636-y-reverse] .Slider3489683636--handle{\n    margin: -8px 0px 0px -6px;\n}\n\n.Slider3489683636--root .Slider3489683636--markProgress,\n.Slider3489683636--root .Slider3489683636--markTrack\n{\n    width: 8px;\n    height: 8px;\n    position: absolute;\n    border-radius: 50%;\n}\n.Slider3489683636--root .Slider3489683636--markProgress{\n    background-color: #4a90e2;\n}\n.Slider3489683636--root .Slider3489683636--markTrack{\n    background-color: #adbbc6;\n}\n\n\n.Slider3489683636--root[data-slider3489683636-x] .Slider3489683636--markProgress,\n.Slider3489683636--root[data-slider3489683636-x] .Slider3489683636--markTrack\n{\n    margin: -2px 0 0 -4px;\n}\n\n.Slider3489683636--root[data-slider3489683636-x-reverse] .Slider3489683636--markProgress,\n.Slider3489683636--root[data-slider3489683636-x-reverse] .Slider3489683636--markTrack\n{\n    margin: -2px -4px 0 0;\n}\n\n.Slider3489683636--root[data-slider3489683636-y] .Slider3489683636--markProgress,\n.Slider3489683636--root[data-slider3489683636-y] .Slider3489683636--markTrack\n{\n    margin: 0 0 -4px -2px;\n}\n\n.Slider3489683636--root[data-slider3489683636-y-reverse] .Slider3489683636--markProgress,\n.Slider3489683636--root[data-slider3489683636-y-reverse] .Slider3489683636--markTrack\n{\n    margin: -4px 0 0 -2px;\n}\n\n.Slider3489683636--root .Slider3489683636--tooltip{\n    position: absolute;\n    text-align: center;\n    left: 50%;\n    bottom: 20px;\n}\n.Slider3489683636--root .Slider3489683636--tooltip > *{\n    display: inline-block;\n    position: relative;\n    left: -50%;\n}\n\n/* Hover state */\n.Slider3489683636--root:hover .Slider3489683636--track {\n    background-color: #7d8c98;\n}\n\n.Slider3489683636--root:hover .Slider3489683636--markTrack {\n    background-color: #7d8c98;\n}\n\n.Slider3489683636--root:hover .Slider3489683636--handle {\n    background-color: #edf7ff;\n    border-color: #4a90e2;\n}\n\n/* Focus state */\n.Slider3489683636--root .Slider3489683636--handle:focus {\n    box-shadow: 0 0 0 4px rgba(92, 180, 255, 0.5);\n    outline: none;\n}\n\n/* Active state */\n.Slider3489683636--root[data-slider3489683636-active] .Slider3489683636--handle,\n.Slider3489683636--root[data-slider3489683636-active]:hover .Slider3489683636--handle {\n    box-shadow: none;\n    background-color: #4a90e2;\n    border-color: #4a90e2;\n}\n\n.Slider3489683636--root[data-slider3489683636-active] .Slider3489683636--track {\n    background-color: #adbbc6;\n}\n\n.Slider3489683636--root[data-slider3489683636-active]:hover .Slider3489683636--track {\n    background-color: #adbbc6;\n}\n\n.Slider3489683636--root[data-slider3489683636-active] .Slider3489683636--markTrack {\n    background-color: #adbbc6;\n}\n\n.Slider3489683636--root[data-slider3489683636-active] .Slider3489683636--progress {\n    background-color: #4a90e2;\n}\n\n/* Disabled state */\n.Slider3489683636--root[data-slider3489683636-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.Slider3489683636--root[data-slider3489683636-disabled] .Slider3489683636--handle {\n    border-color: #c8c8c8;\n    background-color: #f1f1f1;\n}\n\n.Slider3489683636--root[data-slider3489683636-disabled] .Slider3489683636--track {\n    background-color: #c8c8c8;\n}\n\n.Slider3489683636--root[data-slider3489683636-disabled] .Slider3489683636--markTrack {\n    background-color: #c8c8c8;\n}\n\n.Slider3489683636--root[data-slider3489683636-disabled] .Slider3489683636--progress {\n    background-color: transparent;\n}\n\n/* Error state */\n.Slider3489683636--root[data-slider3489683636-error] .Slider3489683636--markProgress,\n.Slider3489683636--root[data-slider3489683636-error] .Slider3489683636--progress\n{\n    background-color: #d0011b;\n}\n.Slider3489683636--root[data-slider3489683636-active][data-slider3489683636-error] .Slider3489683636--handle,\n.Slider3489683636--root[data-slider3489683636-active][data-slider3489683636-error]:hover .Slider3489683636--handle {\n    background-color: #d0011b;\n    border-color: #d0011b;\n}\n",
     module.id
 );

lib/components/stepper/index.d.ts

 export * from './stepper';

lib/components/stepper/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/stepper/stepper.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/stepper/stepper.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/stepper/stepper.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../../style/project.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "stepper2604317534",
-    {"root":"stepper2604317534--root","control":"stepper2604317534--control","control-icon":"stepper2604317534--control-icon","up":"stepper2604317534--up","down":"stepper2604317534--down"},
-    ".stepper2604317534--root {\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n\r\n    position: relative;\r\n\r\n    width: 30px;\r\n    height: 36px;\r\n}\r\n\r\n.stepper2604317534--root .stepper2604317534--control {\r\n    display: flex;\r\n    width: 100%;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n    border: 0;\r\n\r\n    background: transparent;\r\n    color: #adbbc6;\r\n}\r\n\r\n.stepper2604317534--root .stepper2604317534--control-icon {\r\n    color: currentColor;\r\n    width: 16px;\r\n    height: 16px;\r\n    flex: 1;\r\n}\r\n\r\n.stepper2604317534--root .stepper2604317534--control:disabled {\r\n    color: #c8c8c8;\r\n}\r\n\r\n.stepper2604317534--root .stepper2604317534--control:focus,\r\n.stepper2604317534--root .stepper2604317534--control:hover {\r\n    color: #5cb4ff;\r\n}\r\n.stepper2604317534--root .stepper2604317534--up {}\r\n.stepper2604317534--root .stepper2604317534--down {}\r\n",
+    "stepper2117287016",
+    {"root":"stepper2117287016--root","control":"stepper2117287016--control","control-icon":"stepper2117287016--control-icon","up":"stepper2117287016--up","down":"stepper2117287016--down"},
+    ".stepper2117287016--root {\n    display: inline-flex;\n    flex-direction: column;\n    justify-content: space-between;\n\n    position: relative;\n\n    width: 30px;\n    height: 36px;\n}\n\n.stepper2117287016--root .stepper2117287016--control {\n    display: flex;\n    width: 100%;\n\n    margin: 0;\n    padding: 0;\n    border: 0;\n\n    background: transparent;\n    color: #adbbc6;\n}\n\n.stepper2117287016--root .stepper2117287016--control-icon {\n    color: currentColor;\n    width: 16px;\n    height: 16px;\n    flex: 1;\n}\n\n.stepper2117287016--root .stepper2117287016--control:disabled {\n    color: #c8c8c8;\n}\n\n.stepper2117287016--root .stepper2117287016--control:focus,\n.stepper2117287016--root .stepper2117287016--control:hover {\n    color: #5cb4ff;\n}\n.stepper2117287016--root .stepper2117287016--up {}\n.stepper2117287016--root .stepper2117287016--down {}\n",
     module.id
 );

lib/components/time-picker/index.d.ts

 export * from './time-picker';

lib/components/time-picker/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/time-picker/strings.d.ts

@@ -0,0 +0,0 @@ export declare const LABELS: {

lib/components/time-picker/strings.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/time-picker/time-picker.d.ts

 /// <reference types="react" />
 import * as React from 'react';
+import { FormInputProps } from '../../types/forms';
 import { Ampm, Format, Segment } from './utils';
-export interface Props {
-    value?: string;
-    onChange?: (value: string) => void;
+export interface Props extends FormInputProps<string> {
     format?: Format;
@@ -8,0 +7,0 @@ placeholder?: string;

lib/components/time-picker/time-picker.js

@@ -214,5 +214,10 @@ "use strict";
             });
-            if (_this.props.onChange && _this.lastValue !== value) {
+            if (_this.lastValue !== value) {
                 _this.lastValue = value;
-                _this.props.onChange(value);
+                if (_this.props.onInput) {
+                    _this.props.onInput({ value: value });
+                }
+                if (_this.props.onChange) {
+                    _this.props.onChange({ value: value });
+                }
             }
@@ -219,0 +224,0 @@ };

lib/components/time-picker/time-picker.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../stepper/stepper.st.css");
+require("../../style/project.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "time-picker455071398",
-    {"root":"time-picker455071398--root","stepper":"time-picker455071398--stepper","time":"time-picker455071398--time","ampm":"time-picker455071398--ampm","input":"time-picker455071398--input","placeholder":"time-picker455071398--placeholder","label":"time-picker455071398--label","native-input":"time-picker455071398--native-input","height":"2.25em","width":"7.5em"},
-    ".time-picker455071398--root {\r\n    -st-states: focus, disabled, empty, has-placeholder, error, rtl;\r\n    font-family: arial;\r\n    font-size: 16px;\r\n    position: relative;\r\n    border: 1px solid #adbbc6;\r\n    height: 2.25em;\r\n    min-width: 7.5em;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    user-select: none;\r\n    -webkit-user-select: none;\r\n    background-color: white;\r\n\r\n    padding-left: 9px;\r\n    overflow: hidden;\r\n}\r\n\r\n.time-picker455071398--root:not([data-time-picker455071398-disabled]):hover {\r\n    border-color: #5cb4ff;\r\n}\r\n/* reset :hover for touch devices */\r\n@media (hover: none) {\r\n    .time-picker455071398--root:not([data-time-picker455071398-focus]):hover {\r\n        border-color: #adbbc6;\r\n    }\r\n}\r\n\r\n.time-picker455071398--root[data-time-picker455071398-focus] {\r\n    border-color: #4a90e2;\r\n}\r\n.time-picker455071398--root[data-time-picker455071398-disabled] {\r\n    background-color: #f1f1f1;\r\n    color: #c8c8c8;\r\n    position: relative;\r\n}\r\n.time-picker455071398--root[data-time-picker455071398-disabled]:after {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    height: 100%;\r\n    width: 100%;\r\n    cursor: not-allowed;\r\n}\r\n\r\n.time-picker455071398--root[data-time-picker455071398-empty] {\r\n    color: #7d8c98;\r\n}\r\n.time-picker455071398--root[data-time-picker455071398-empty] .time-picker455071398--stepper.stepper2604317534--root,\r\n.time-picker455071398--root[data-time-picker455071398-empty][data-time-picker455071398-has-placeholder] .time-picker455071398--time,\r\n.time-picker455071398--root[data-time-picker455071398-empty][data-time-picker455071398-has-placeholder] .time-picker455071398--ampm {\r\n    visibility: hidden;\r\n}\r\n.time-picker455071398--root[data-time-picker455071398-error] {\r\n    border-color: #d0011b;\r\n}\r\n\r\n.time-picker455071398--root .time-picker455071398--time {\r\n    display: inline-block;\r\n    flex: 1;\r\n    position: relative;\r\n}\r\n.time-picker455071398--root .time-picker455071398--time:after {\r\n    content: ':';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 1.4em;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.time-picker455071398--root[data-time-picker455071398-rtl] {\r\n    padding-right: 9px;\r\n    padding-left: 0;\r\n    flex-direction: row-reverse;\r\n}\r\n\r\n.time-picker455071398--root .time-picker455071398--input {\r\n    position: relative;\r\n    font: inherit;\r\n    border: 0;\r\n    padding: 0 3px;\r\n    margin: 0;\r\n    width: 1.6em;\r\n    height: 100%;\r\n    background: none;\r\n    color: inherit;\r\n    -webkit-text-fill-color: inherit;\r\n}\r\n\r\n/* TODO replace with mixin */\r\n.time-picker455071398--root .time-picker455071398--input::-webkit-input-placeholder {\r\n    color: #7d8c98;\r\n    -webkit-text-fill-color: currentColor;\r\n    opacity: 1;\r\n}\r\n.time-picker455071398--root .time-picker455071398--input:-ms-input-placeholder {\r\n    color: #7d8c98;\r\n    -webkit-text-fill-color: currentColor;\r\n    opacity: 1;\r\n}\r\n.time-picker455071398--root .time-picker455071398--input::-moz-placeholder {\r\n    color: #7d8c98;\r\n    -webkit-text-fill-color: currentColor;\r\n    opacity: 1;\r\n}\r\n\r\n/* TODO replace with mixin */\r\n.time-picker455071398--root .time-picker455071398--input::-moz-selection {\r\n    color: white;\r\n    background: #4a90e2;\r\n    padding: 2px;\r\n}\r\n.time-picker455071398--root .time-picker455071398--input::selection {\r\n    color: white;\r\n    -webkit-text-fill-color: currentColor;\r\n    background: #4a90e2;\r\n    padding: 2px;\r\n}\r\n\r\n.time-picker455071398--root .time-picker455071398--input:hover,\r\n.time-picker455071398--root .time-picker455071398--input:focus {\r\n    border: 0;\r\n    outline: 0;\r\n}\r\n/* reset ios safari disabled opacity */\r\n.time-picker455071398--root .time-picker455071398--input:disabled {\r\n    opacity: 1;\r\n}\r\n\r\n.time-picker455071398--root .time-picker455071398--placeholder {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    padding: 0 12px;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.time-picker455071398--root .time-picker455071398--ampm {\r\n    display: inline-block;\r\n    background-color: inherit;\r\n    cursor: pointer;\r\n}\r\n.time-picker455071398--root .time-picker455071398--ampm:hover {\r\n    color: #5cb4ff;\r\n}\r\n.time-picker455071398--root .time-picker455071398--ampm:focus {\r\n    background: #4a90e2;\r\n    outline: none;\r\n    color: white;\r\n}\r\n.time-picker455071398--root[data-time-picker455071398-disabled] .time-picker455071398--ampm:hover {\r\n    color: inherit;\r\n    cursor: inherit;\r\n}\r\n.time-picker455071398--root .time-picker455071398--label {\r\n    -st-states: visible;\r\n    display: none;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: transparent;\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n}\r\n.time-picker455071398--root .time-picker455071398--label[data-time-picker455071398-visible] {\r\n    display: block;\r\n}\r\n.time-picker455071398--root .time-picker455071398--native-input {\r\n    position: absolute;\r\n    opacity: 0;\r\n    padding: 0;\r\n    margin: 0;\r\n    border: 0;\r\n    width: 0;\r\n    height: 0;\r\n}\r\n.time-picker455071398--root .time-picker455071398--native-input:focus {\r\n    border: 0;\r\n}\r\n\r\n.time-picker455071398--root .time-picker455071398--stepper.stepper2604317534--root {\r\n    -st-extends: Stepper;\r\n    height: 100%;\r\n    transition: opacity 100ms ease;\r\n    float: right;\r\n}\r\n.time-picker455071398--root .time-picker455071398--stepper.stepper2604317534--root .stepper2604317534--control {\r\n    background: transparent;\r\n}\r\n",
+    "time-picker2184759931",
+    {"root":"time-picker2184759931--root","stepper":"time-picker2184759931--stepper","time":"time-picker2184759931--time","ampm":"time-picker2184759931--ampm","input":"time-picker2184759931--input","placeholder":"time-picker2184759931--placeholder","label":"time-picker2184759931--label","native-input":"time-picker2184759931--native-input","height":"2.25em","width":"7.5em"},
+    ".time-picker2184759931--root {\n    -st-states: focus, disabled, empty, has-placeholder, error, rtl;\n    font-family: arial;\n    font-size: 16px;\n    position: relative;\n    border: 1px solid #adbbc6;\n    height: 2.25em;\n    min-width: 7.5em;\n    display: inline-flex;\n    align-items: center;\n    user-select: none;\n    -webkit-user-select: none;\n    background-color: white;\n\n    padding-left: 9px;\n    overflow: hidden;\n}\n\n.time-picker2184759931--root:not([data-time-picker2184759931-disabled]):hover {\n    border-color: #5cb4ff;\n}\n/* reset :hover for touch devices */\n@media (hover: none) {\n    .time-picker2184759931--root:not([data-time-picker2184759931-focus]):hover {\n        border-color: #adbbc6;\n    }\n}\n\n.time-picker2184759931--root[data-time-picker2184759931-focus] {\n    border-color: #4a90e2;\n}\n.time-picker2184759931--root[data-time-picker2184759931-disabled] {\n    background-color: #f1f1f1;\n    color: #c8c8c8;\n    position: relative;\n}\n.time-picker2184759931--root[data-time-picker2184759931-disabled]:after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n    width: 100%;\n    cursor: not-allowed;\n}\n\n.time-picker2184759931--root[data-time-picker2184759931-empty] {\n    color: #7d8c98;\n}\n.time-picker2184759931--root[data-time-picker2184759931-empty] .time-picker2184759931--stepper.stepper2117287016--root,\n.time-picker2184759931--root[data-time-picker2184759931-empty][data-time-picker2184759931-has-placeholder] .time-picker2184759931--time,\n.time-picker2184759931--root[data-time-picker2184759931-empty][data-time-picker2184759931-has-placeholder] .time-picker2184759931--ampm {\n    visibility: hidden;\n}\n.time-picker2184759931--root[data-time-picker2184759931-error] {\n    border-color: #d0011b;\n}\n\n.time-picker2184759931--root .time-picker2184759931--time {\n    display: inline-block;\n    flex: 1;\n    position: relative;\n}\n.time-picker2184759931--root .time-picker2184759931--time:after {\n    content: ':';\n    position: absolute;\n    top: 0;\n    left: 1.4em;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.time-picker2184759931--root[data-time-picker2184759931-rtl] {\n    padding-right: 9px;\n    padding-left: 0;\n    flex-direction: row-reverse;\n}\n\n.time-picker2184759931--root .time-picker2184759931--input {\n    position: relative;\n    font: inherit;\n    border: 0;\n    padding: 0 3px;\n    margin: 0;\n    width: 1.6em;\n    height: 100%;\n    background: none;\n    color: inherit;\n    -webkit-text-fill-color: inherit;\n}\n\n/* TODO replace with mixin */\n.time-picker2184759931--root .time-picker2184759931--input::-webkit-input-placeholder {\n    color: #7d8c98;\n    -webkit-text-fill-color: currentColor;\n    opacity: 1;\n}\n.time-picker2184759931--root .time-picker2184759931--input:-ms-input-placeholder {\n    color: #7d8c98;\n    -webkit-text-fill-color: currentColor;\n    opacity: 1;\n}\n.time-picker2184759931--root .time-picker2184759931--input::-moz-placeholder {\n    color: #7d8c98;\n    -webkit-text-fill-color: currentColor;\n    opacity: 1;\n}\n\n/* TODO replace with mixin */\n.time-picker2184759931--root .time-picker2184759931--input::-moz-selection {\n    color: white;\n    background: #4a90e2;\n    padding: 2px;\n}\n.time-picker2184759931--root .time-picker2184759931--input::selection {\n    color: white;\n    -webkit-text-fill-color: currentColor;\n    background: #4a90e2;\n    padding: 2px;\n}\n\n.time-picker2184759931--root .time-picker2184759931--input:hover,\n.time-picker2184759931--root .time-picker2184759931--input:focus {\n    border: 0;\n    outline: 0;\n}\n/* reset ios safari disabled opacity */\n.time-picker2184759931--root .time-picker2184759931--input:disabled {\n    opacity: 1;\n}\n\n.time-picker2184759931--root .time-picker2184759931--placeholder {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0 12px;\n    display: flex;\n    align-items: center;\n}\n\n.time-picker2184759931--root .time-picker2184759931--ampm {\n    display: inline-block;\n    background-color: inherit;\n    cursor: pointer;\n}\n.time-picker2184759931--root .time-picker2184759931--ampm:hover {\n    color: #5cb4ff;\n}\n.time-picker2184759931--root .time-picker2184759931--ampm:focus {\n    background: #4a90e2;\n    outline: none;\n    color: white;\n}\n.time-picker2184759931--root[data-time-picker2184759931-disabled] .time-picker2184759931--ampm:hover {\n    color: inherit;\n    cursor: inherit;\n}\n.time-picker2184759931--root .time-picker2184759931--label {\n    -st-states: visible;\n    display: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n}\n.time-picker2184759931--root .time-picker2184759931--label[data-time-picker2184759931-visible] {\n    display: block;\n}\n.time-picker2184759931--root .time-picker2184759931--native-input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    border: 0;\n    width: 0;\n    height: 0;\n}\n.time-picker2184759931--root .time-picker2184759931--native-input:focus {\n    border: 0;\n}\n\n.time-picker2184759931--root .time-picker2184759931--stepper.stepper2117287016--root {\n    -st-extends: Stepper;\n    height: 100%;\n    transition: opacity 100ms ease;\n    float: right;\n}\n.time-picker2184759931--root .time-picker2184759931--stepper.stepper2117287016--root .stepper2117287016--control {\n    background: transparent;\n}\n",
     module.id
 );

lib/components/time-picker/utils.d.ts

@@ -0,0 +0,0 @@ export declare enum Ampm {

lib/components/time-picker/utils.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/toggle/index.d.ts

 export { default as Toggle } from './toggle';

lib/components/toggle/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/toggle/toggle.d.ts

 /// <reference types="react" />
+import * as PropTypes from 'prop-types';
 import * as React from 'react';
@@ -12,3 +13,2 @@ import { FormInputProps } from '../../types/forms';
     name?: string;
-    rtl?: boolean;
 }
@@ -23,5 +23,7 @@ export interface State {
         error: boolean;
-        rtl: boolean;
         required: boolean;
     };
+    static contextTypes: {
+        contextProvider: PropTypes.Requireable<any>;
+    };
     state: {
@@ -28,0 +30,0 @@ focus: boolean;

lib/components/toggle/toggle.js

@@ -19,2 +19,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var PropTypes = require("prop-types");
 var React = require("react");
@@ -49,3 +50,3 @@ var wix_react_tools_1 = require("wix-react-tools");
     Toggle.prototype.render = function () {
-        var _a = this.props, value = _a.value, disabled = _a.disabled, error = _a.error, rtl = _a.rtl, label = _a.label, name = _a.name, required = _a.required, tabIndex = _a.tabIndex;
+        var _a = this.props, value = _a.value, disabled = _a.disabled, error = _a.error, label = _a.label, name = _a.name, required = _a.required, tabIndex = _a.tabIndex;
         var focus = this.state.focus;
@@ -57,3 +58,4 @@ return (React.createElement("label", { "data-automation-id": "TOGGLE", onMouseDown: this.onMouseDown, "style-state": {
                 error: error,
-                rtl: rtl
+                rtl: this.context.contextProvider &&
+                    this.context.contextProvider.dir === 'rtl'
             } },
@@ -69,5 +71,9 @@ !disabled &&
         error: false,
-        rtl: false,
         required: false
     };
+    Toggle.contextTypes = {
+        contextProvider: PropTypes.shape({
+            dir: PropTypes.string
+        })
+    };
     Toggle = __decorate([
@@ -74,0 +80,0 @@ wix_react_tools_1.stylable(toggle_st_css_1.default)

lib/components/toggle/toggle.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../../style/project.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "toggle3247452154",
-    {"root":"toggle3247452154--root","input":"toggle3247452154--input","switch-wrap":"toggle3247452154--switch-wrap","switch":"toggle3247452154--switch","width":"46px","switchSize":"20px","borderWidth":"1px","padding":"1px"},
-    ".toggle3247452154--root {\r\n    -st-states: checked, disabled, focus, error, rtl;\r\n    display: block;\r\n    position: relative;\r\n    width: 46px;\r\n    border: 1px solid #adbbc6;\r\n    padding: 1px;\r\n    border-radius: 100px;\r\n    background-color: #ffffff;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    transition: background-color 200ms linear;\r\n}\r\n.toggle3247452154--root .toggle3247452154--input {\r\n    position: absolute;\r\n    display: block;\r\n    position: absolute;\r\n    opacity: 0;\r\n    padding: 0;\r\n    margin: 0;\r\n    border: 0;\r\n    width: 0;\r\n    height: 0;\r\n}\r\n.toggle3247452154--root .toggle3247452154--switch-wrap {\r\n    width: 100%;\r\n    position: relative;\r\n}\r\n\r\n.toggle3247452154--root .toggle3247452154--switch {\r\n    height: 20px;\r\n    width: 20px;\r\n    background-color: #adbbc6;\r\n    border-radius: 100%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    transition: all 100ms linear;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjIiIHZpZXdCb3g9IjAgMCA4IDIiPiAgICA8cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xIDJoNmExIDEgMCAwIDAgMC0ySDFhMSAxIDAgMCAwIDAgMnoiLz48L3N2Zz4=);\r\n}\r\n\r\n.toggle3247452154--root[data-toggle3247452154-checked] .toggle3247452154--switch {\r\n    margin-left: 100%;\r\n    transform: translateX(-100%);\r\n    background-color: #4a90e2;\r\n    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjYiIHZpZXdCb3g9IjAgMCA4IDYiPiAgICA8cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xLjY5NiAyLjQ2NEExIDEgMCAxIDAgLjMwNCAzLjlsMS44NzUgMS44MThhMSAxIDAgMCAwIDEuMzkyIDBsNC4xMjUtNEExIDEgMCAxIDAgNi4zMDQuMjgyTDIuODc1IDMuNjA3IDEuNjk2IDIuNDY0eiIvPjwvc3ZnPg==);\r\n}\r\n\r\n.toggle3247452154--root:not([data-toggle3247452154-disabled]):hover {\r\n    border-color: #5cb4ff;\r\n}\r\n.toggle3247452154--root:not([data-toggle3247452154-disabled])[data-toggle3247452154-focus]:after {\r\n    content: '';\r\n    position: absolute;\r\n    left: -4px;\r\n    top: -4px;\r\n    right: -4px;\r\n    bottom: -4px;\r\n    border: 4px solid #5cb4ff;\r\n    border-radius: 100px;\r\n    opacity: 0.5;\r\n}\r\n\r\n.toggle3247452154--root[data-toggle3247452154-error] .toggle3247452154--switch {\r\n    background-color: #d0011b;\r\n}\r\n\r\n.toggle3247452154--root[data-toggle3247452154-disabled] {\r\n    background-color: #f1f1f1;\r\n    border-color: #c8c8c8;\r\n    cursor: default;\r\n}\r\n.toggle3247452154--root[data-toggle3247452154-disabled] .toggle3247452154--switch {\r\n    background-color: #c8c8c8;\r\n}\r\n\r\n.toggle3247452154--root[data-toggle3247452154-rtl] .toggle3247452154--switch {\r\n    margin-left: 100%;\r\n    transform: translateX(-100%);\r\n}\r\n.toggle3247452154--root[data-toggle3247452154-rtl][data-toggle3247452154-checked] .toggle3247452154--switch {\r\n    margin-left: 0;\r\n    transform: translateX(0);\r\n}\r\n",
+    "toggle3743809436",
+    {"root":"toggle3743809436--root","input":"toggle3743809436--input","switch-wrap":"toggle3743809436--switch-wrap","switch":"toggle3743809436--switch","width":"46px","switchSize":"20px","borderWidth":"1px","padding":"1px"},
+    ".toggle3743809436--root {\n    -st-states: checked, disabled, focus, error, rtl;\n    display: block;\n    position: relative;\n    width: 46px;\n    border: 1px solid #adbbc6;\n    padding: 1px;\n    border-radius: 100px;\n    background-color: #ffffff;\n    cursor: pointer;\n    user-select: none;\n    transition: background-color 200ms linear;\n}\n.toggle3743809436--root .toggle3743809436--input {\n    position: absolute;\n    display: block;\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    border: 0;\n    width: 0;\n    height: 0;\n}\n.toggle3743809436--root .toggle3743809436--switch-wrap {\n    width: 100%;\n    position: relative;\n}\n\n.toggle3743809436--root .toggle3743809436--switch {\n    height: 20px;\n    width: 20px;\n    background-color: #adbbc6;\n    border-radius: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: all 100ms linear;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjIiIHZpZXdCb3g9IjAgMCA4IDIiPiAgICA8cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xIDJoNmExIDEgMCAwIDAgMC0ySDFhMSAxIDAgMCAwIDAgMnoiLz48L3N2Zz4=);\n}\n\n.toggle3743809436--root[data-toggle3743809436-checked] .toggle3743809436--switch {\n    margin-left: 100%;\n    transform: translateX(-100%);\n    background-color: #4a90e2;\n    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjYiIHZpZXdCb3g9IjAgMCA4IDYiPiAgICA8cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xLjY5NiAyLjQ2NEExIDEgMCAxIDAgLjMwNCAzLjlsMS44NzUgMS44MThhMSAxIDAgMCAwIDEuMzkyIDBsNC4xMjUtNEExIDEgMCAxIDAgNi4zMDQuMjgyTDIuODc1IDMuNjA3IDEuNjk2IDIuNDY0eiIvPjwvc3ZnPg==);\n}\n\n.toggle3743809436--root:not([data-toggle3743809436-disabled]):hover {\n    border-color: #5cb4ff;\n}\n.toggle3743809436--root:not([data-toggle3743809436-disabled])[data-toggle3743809436-focus]:after {\n    content: '';\n    position: absolute;\n    left: -4px;\n    top: -4px;\n    right: -4px;\n    bottom: -4px;\n    border: 4px solid #5cb4ff;\n    border-radius: 100px;\n    opacity: 0.5;\n}\n\n.toggle3743809436--root[data-toggle3743809436-error] .toggle3743809436--switch {\n    background-color: #d0011b;\n}\n\n.toggle3743809436--root[data-toggle3743809436-disabled] {\n    background-color: #f1f1f1;\n    border-color: #c8c8c8;\n    cursor: default;\n}\n.toggle3743809436--root[data-toggle3743809436-disabled] .toggle3743809436--switch {\n    background-color: #c8c8c8;\n}\n\n.toggle3743809436--root[data-toggle3743809436-rtl][data-toggle3743809436-checked] .toggle3743809436--switch {\n    margin-right: 100%;\n    transform: translateX(100%);\n}\n",
     module.id
 );

lib/components/tree-view/index.d.ts

 export * from './tree-view';

lib/components/tree-view/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/tree-view/tree-node.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../../style/project.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "treenode3214777221",
-    {"tree-node":"treenode3214777221--tree-node","nested-tree":"treenode3214777221--nested-tree","tree-item-icon":"treenode3214777221--tree-item-icon","tree-item-label":"treenode3214777221--tree-item-label","root":"treenode3214777221--root"},
-    ".treenode3214777221--root .treenode3214777221--tree-node {\r\n    -st-states: selected, focused;\r\n    cursor: pointer;\r\n    padding: 5px 7px;\r\n    border: 1px solid transparent;\r\n    list-style: none;\r\n}\r\n\r\n.treenode3214777221--root .treenode3214777221--tree-node:hover {\r\n    background-color: #EDF7FF;\r\n}\r\n\r\n.treenode3214777221--root .treenode3214777221--tree-node[data-treenode3214777221-focused] {\r\n    border: 1px solid #4990e2;\r\n}\r\n\r\n.treenode3214777221--root .treenode3214777221--tree-node[data-treenode3214777221-selected] {\r\n    background-color: #4990e2;\r\n    color: white;\r\n}\r\n\r\n.treenode3214777221--root .treenode3214777221--nested-tree {\r\n    margin-left: 2rem;\r\n    list-style: none;\r\n    padding-left: 0;\r\n}\r\n\r\n.treenode3214777221--root .treenode3214777221--tree-item-icon {\r\n    height: 1rem;\r\n    width: 1rem;\r\n    vertical-align: middle;\r\n    margin-right: 5px;\r\n}\r\n\r\n.treenode3214777221--root .treenode3214777221--tree-item-label {\r\n    vertical-align: middle;\r\n}\r\n",
+    "treenode15655966",
+    {"tree-node":"treenode15655966--tree-node","nested-tree":"treenode15655966--nested-tree","tree-item-icon":"treenode15655966--tree-item-icon","tree-item-label":"treenode15655966--tree-item-label","root":"treenode15655966--root"},
+    ".treenode15655966--root .treenode15655966--tree-node {\n    -st-states: selected, focused;\n    cursor: pointer;\n    padding: 5px 7px;\n    border: 1px solid transparent;\n    list-style: none;\n}\n\n.treenode15655966--root .treenode15655966--tree-node:hover {\n    background-color: #EDF7FF;\n}\n\n.treenode15655966--root .treenode15655966--tree-node[data-treenode15655966-focused] {\n    border: 1px solid #4990e2;\n}\n\n.treenode15655966--root .treenode15655966--tree-node[data-treenode15655966-selected] {\n    background-color: #4990e2;\n    color: white;\n}\n\n.treenode15655966--root .treenode15655966--nested-tree {\n    margin-left: 2rem;\n    list-style: none;\n    padding-left: 0;\n}\n\n.treenode15655966--root .treenode15655966--tree-item-icon {\n    height: 1rem;\n    width: 1rem;\n    vertical-align: middle;\n    margin-right: 5px;\n}\n\n.treenode15655966--root .treenode15655966--tree-item-label {\n    vertical-align: middle;\n}\n",
     module.id
 );

lib/components/tree-view/tree-util.d.ts

@@ -0,0 +0,0 @@ import { ParentsMap, TreeItemData, TreeStateMap } from './tree-view';

lib/components/tree-view/tree-util.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/tree-view/tree-view-icons.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/tree-view/tree-view-icons.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/tree-view/tree-view.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

lib/components/tree-view/tree-view.js

@@ -71,3 +71,3 @@ "use strict";
     return (React.createElement("li", { "aria-expanded": item.children ? !!state.isExpanded : undefined, "aria-selected": state.isSelected ? true : undefined, id: getFocusedItemKey(item), "data-automation-id": itemIdPrefix + "_" + itemLabel + "_NODE", role: "treeitem" },
-        React.createElement("div", { "data-automation-id": itemIdPrefix + "_" + itemLabel, className: "tree-node", "style-state": { selected: state.isSelected, focused: state.isFocused }, "data-selected": state.isSelected, "data-focused": state.isFocused, onClick: onItemClick && onItemClick.bind(null, item) },
+        React.createElement("div", { "data-automation-id": itemIdPrefix + "_" + itemLabel, className: "tree-node", "style-state": { selected: state.isSelected, focused: state.isFocused }, onClick: onItemClick && onItemClick.bind(null, item) },
             item.children && (state.isExpanded ?
@@ -74,0 +74,0 @@ React.createElement(tree_view_icons_1.MinusIcon, __assign({}, iconProps)) : React.createElement(tree_view_icons_1.PlusIcon, __assign({}, iconProps))),

lib/components/tree-view/tree-view.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("./tree-node.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "treeview3568482572",
-    {"root":"treeview3568482572--root","treeNode":"treeview3568482572--treeNode"},
-    ".treeview3568482572--root {\r\n    font-family: Arial, sans-serif;\r\n    font-size: 16px;\r\n    line-height: 1.5;\r\n    text-align: left;\r\n    color: #000000;\r\n    outline: 0 solid transparent;\r\n    overflow: hidden;\r\n    display: inline-block;\r\n    min-width: 250px;\r\n    list-style: none;\r\n    padding-left: 0;\r\n}\r\n\r\n.treeview3568482572--root .treeview3568482572--treeNode.treenode3214777221--root {\r\n    -st-extends: TreeNode;\r\n}\r\n",
+    "treeview3756220336",
+    {"root":"treeview3756220336--root","treeNode":"treeview3756220336--treeNode"},
+    ".treeview3756220336--root {\n    font-family: Arial, sans-serif;\n    font-size: 16px;\n    line-height: 1.5;\n    text-align: left;\n    color: #000000;\n    outline: 0 solid transparent;\n    overflow: hidden;\n    display: inline-block;\n    min-width: 250px;\n    list-style: none;\n    padding-left: 0;\n}\n\n.treeview3756220336--root .treeview3756220336--treeNode.treenode15655966--root {\n    -st-extends: TreeNode;\n}\n",
     module.id
 );

lib/icons/chevron-down/index.d.ts

 /// <reference types="react" />
 import * as React from 'react';
 export declare const ChevronDownIcon: React.StatelessComponent<React.SVGProps<{}>>;

lib/icons/chevron-down/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/icons/chevron-up/index.d.ts

 /// <reference types="react" />
 import * as React from 'react';
 export declare const ChevronUpIcon: React.StatelessComponent<React.SVGProps<{}>>;

lib/icons/chevron-up/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/icons/index.d.ts

 export * from './chevron-up';
 export * from './chevron-down';

lib/icons/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/index.d.ts

@@ -0,0 +0,0 @@ /// <reference path="../typings/stylable.d.ts" />

lib/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/style/default-theme/controls/button.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../../project.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "button2986649425",
-    {"disabled":"button2986649425--disabled","root":"button2986649425--root"},
-    ".button2986649425--root button {\r\n    box-sizing: inherit;\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n    padding: 9px 30px;\r\n    margin: 0;\r\n    -webkit-appearance: none;\r\n    -moz-appearance: none;\r\n    appearance: none;\r\n    border: 1px solid transparent;\r\n    border-radius: 0px;\r\n    background: #4990e2;\r\n    color: #ffffff;\r\n    font-family: Arial;\r\n    font-size: 100%;\r\n    font-weight: normal;\r\n    line-height: 1.5;\r\n    text-align: center;\r\n    text-decoration: none;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    outline: 0;\r\n}\r\n\r\n.button2986649425--root button:focus {\r\n    background-color: #257ade;\r\n    color: #ffffff;\r\n}\r\n\r\n.button2986649425--root button:hover {\r\n    background-color: #5cb4ff;\r\n    color: #ffffff;\r\n}\r\n\r\n.button2986649425--root button:active {\r\n    background-color: #4990e2;\r\n    color: #ffffff;\r\n}\r\n\r\n.button2986649425--root button[disabled],\r\n.button2986649425--root button.button2986649425--disabled {\r\n    background-color: #d1d1d1;\r\n    color: #ffffff;\r\n    pointer-events: none;\r\n}\r\n",
+    "button1358216881",
+    {"disabled":"button1358216881--disabled","root":"button1358216881--root"},
+    ".button1358216881--root button {\n    box-sizing: inherit;\n    display: inline-block;\n    vertical-align: middle;\n    padding: 9px 30px;\n    margin: 0;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    border: 1px solid transparent;\n    border-radius: 0px;\n    background: #4990e2;\n    color: #ffffff;\n    font-family: Arial;\n    font-size: 100%;\n    font-weight: normal;\n    line-height: 1.5;\n    text-align: center;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    outline: 0;\n}\n\n.button1358216881--root button:focus {\n    background-color: #257ade;\n    color: #ffffff;\n}\n\n.button1358216881--root button:hover {\n    background-color: #5cb4ff;\n    color: #ffffff;\n}\n\n.button1358216881--root button:active {\n    background-color: #4990e2;\n    color: #ffffff;\n}\n\n.button1358216881--root button[disabled],\n.button1358216881--root button.button1358216881--disabled {\n    background-color: #d1d1d1;\n    color: #ffffff;\n    pointer-events: none;\n}\n",
     module.id
 );

lib/style/default-theme/controls/input.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../../project.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "input663608659",
-    {"disabled":"input663608659--disabled","root":"input663608659--root"},
-    ".input663608659--root input {\r\n    box-sizing: inherit;\r\n    border: solid 1px #d1d1d1;\r\n    border-radius: 0px;\r\n    background-color: #ffffff;\r\n    color: #000000;\r\n    font-family: Arial;\r\n    font-size: 100%;\r\n    font-weight: normal;\r\n    line-height: 1.5;\r\n    margin: 0;\r\n    padding: 6px 12px;\r\n    height: 36px;\r\n    width: 192px;\r\n    outline: 0;\r\n}\r\n\r\n.input663608659--root input::placeholder {\r\n    color: #577083;\r\n}\r\n\r\n.input663608659--root input:hover {\r\n    border: solid 1px #5cb4ff;\r\n}\r\n\r\n.input663608659--root input:focus {\r\n    border: solid 1px #4990e2;\r\n}\r\n\r\n.input663608659--root input.input663608659--disabled, .input663608659--root input[disabled] {\r\n    background-color: #d1d1d1;\r\n    color: #577083;\r\n    border: solid 1px #d1d1d1;\r\n}\r\n\r\n.input663608659--root input:error {\r\n    border: solid 1px #d0011b;\r\n}\r\n",
+    "input1322038431",
+    {"disabled":"input1322038431--disabled","root":"input1322038431--root"},
+    ".input1322038431--root input {\n    box-sizing: inherit;\n    border: solid 1px #d1d1d1;\n    border-radius: 0px;\n    background-color: #ffffff;\n    color: #000000;\n    font-family: Arial;\n    font-size: 100%;\n    font-weight: normal;\n    line-height: 1.5;\n    margin: 0;\n    padding: 6px 12px;\n    height: 36px;\n    width: 192px;\n    outline: 0;\n}\n\n.input1322038431--root input::placeholder {\n    color: #577083;\n}\n\n.input1322038431--root input:hover {\n    border: solid 1px #5cb4ff;\n}\n\n.input1322038431--root input:focus {\n    border: solid 1px #4990e2;\n}\n\n.input1322038431--root input.input1322038431--disabled, .input1322038431--root input[disabled] {\n    background-color: #d1d1d1;\n    color: #577083;\n    border: solid 1px #d1d1d1;\n}\n\n.input1322038431--root input:error {\n    border: solid 1px #d0011b;\n}\n",
     module.id
 );

lib/style/default-theme/default.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
+require("../project.st.css");
+require("./controls/button.st.css");
+require("./controls/input.st.css");
 module.exports.default = require("stylable/runtime").create(
     "root",
-    "default3219934517",
-    {"root":"default3219934517--root project386411407--root button2986649425--root input663608659--root"},
-    "\r\n\r\n",
+    "default3626540788",
+    {"root":"default3626540788--root project2816595118--root button1358216881--root input1322038431--root"},
+    "\n\n",
     module.id
 );

lib/style/project.st.css.js

 
 Object.defineProperty(exports, "__esModule", { value: true });
-module.exports.default = require("stylable/runtime").create(
+
+        module.exports.default = require("stylable/runtime").create(
     "root",
-    "project386411407",
-    {"button":"project386411407--button","disabled":"project386411407--disabled","root":"project386411407--root","fontFamily":"Arial","fontSize":"100%","fontWeight":"normal","lineHeight":"1.5","BK1":"#000000","BK2":"#7d8c98","BK3":"#adbbc6","DS1":"#c8c8c8","DS2":"#f1f1f1","ER1":"#d0011b","PR1":"#257ade","PR2":"#4a90e2","PR3":"#5cb4ff","PR4":"#edf7ff","WT1":"#ffffff","B1":"#4990e2","B2":"#5cb4ff","B3":"#4990e2","B4":"#257ade","B5":"#d1d1d1","B6":"#f1f1f1","B7":"#adbbc6","B10":"#3899ec","M1":"#000000","M2":"#577083","M3":"#4A90E2","M4":"#EDF7FF","M5":"#D0021B","M6":"#c8c8c8","M7":"#4a90e2","M0":"#ffffff","R1":"#d0011b","color_MainText":"#000000","color_MainPlaceholder":"#577083","color_MainError":"#D0021B","color_MainDisabled":"#c8c8c8","color_MainText_Background":"#ffffff","color_Border":"#3899ec","color_Default":"#4990e2","color_Hover":"#5cb4ff","color_Active":"#4990e2","color_Focus":"#257ade","color_Disabled":"#d1d1d1","color_Keyboard_Focused":"#EDF7FF","inputHeight":"36px","inputWidth":"192px","borderRadius":"0px","borderWidth":"1px","borderStyle":"solid","borderDefault":"solid 1px #d1d1d1","borderHover":"solid 1px #5cb4ff","borderFocus":"solid 1px #4990e2","borderDisabled":"solid 1px #d1d1d1","borderError":"solid 1px #d0011b"},
-    "/* Typography */\r\n.project386411407--root h1 {\r\n    color: #000000;\r\n    font-size: 32px;\r\n    line-height: 48px;\r\n}\r\n.project386411407--root h2 {\r\n    color: #000000;\r\n    font-size: 24px;\r\n    line-height: 36px;\r\n}\r\n.project386411407--root h3 {\r\n    color: #000000;\r\n    font-size: 19px;\r\n    line-height: 28px;\r\n}\r\n.project386411407--root h4 {\r\n    color: #000000;\r\n    font-size: 16px;\r\n    line-height: 24px;\r\n}\r\n.project386411407--root h5 {\r\n    color: #000000;\r\n    font-size: 14px;\r\n    line-height: 20px;\r\n}\r\n.project386411407--root h6 {\r\n    color: #000000;\r\n    font-size: 12px;\r\n    line-height: 18px;\r\n}\r\n.project386411407--root p {\r\n    color: #000000;\r\n    font-size: 16px;\r\n    line-height: 24px;\r\n}\r\n.project386411407--root label {\r\n    color: #577083;\r\n    font-size: 16px;\r\n    line-height: 24px;\r\n}\r\n.project386411407--root img {\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n}\r\n.project386411407--root textarea {\r\n    height: auto;\r\n    min-height: 50px;\r\n    border-radius: 0px;\r\n}\r\n.project386411407--root a {\r\n    text-decoration: none;\r\n    user-select: none;\r\n    color: #4990e2;\r\n    outline: 0;\r\n}\r\n.project386411407--root a:focus {\r\n    color: #4990e2;\r\n}\r\n.project386411407--root a:visited:not(.project386411407--button):not([disabled]) {\r\n    color: #257ade;\r\n}\r\n.project386411407--root a:hover {\r\n    color: #5cb4ff;\r\n}\r\n.project386411407--root a.project386411407--disabled, .project386411407--root a[disabled] {\r\n    color: #d1d1d1;\r\n}\r\n",
+    "project2816595118",
+    {"button":"project2816595118--button","disabled":"project2816595118--disabled","root":"project2816595118--root","fontFamily":"Arial","fontSize":"100%","fontWeight":"normal","lineHeight":"1.5","BK1":"#000000","BK2":"#7d8c98","BK3":"#adbbc6","DS1":"#c8c8c8","DS2":"#f1f1f1","ER1":"#d0011b","PR1":"#257ade","PR2":"#4a90e2","PR3":"#5cb4ff","PR4":"#edf7ff","WT1":"#ffffff","B1":"#4990e2","B2":"#5cb4ff","B3":"#4990e2","B4":"#257ade","B5":"#d1d1d1","B6":"#f1f1f1","B7":"#adbbc6","B10":"#3899ec","M1":"#000000","M2":"#577083","M3":"#4A90E2","M4":"#EDF7FF","M5":"#D0021B","M6":"#c8c8c8","M7":"#4a90e2","M0":"#ffffff","R1":"#d0011b","color_MainText":"#000000","color_MainPlaceholder":"#577083","color_MainError":"#D0021B","color_MainDisabled":"#c8c8c8","color_MainText_Background":"#ffffff","color_Border":"#3899ec","color_Default":"#4990e2","color_Hover":"#5cb4ff","color_Active":"#4990e2","color_Focus":"#257ade","color_Disabled":"#d1d1d1","color_Keyboard_Focused":"#EDF7FF","inputHeight":"36px","inputWidth":"192px","borderRadius":"0px","borderWidth":"1px","borderStyle":"solid","borderDefault":"solid 1px #d1d1d1","borderHover":"solid 1px #5cb4ff","borderFocus":"solid 1px #4990e2","borderDisabled":"solid 1px #d1d1d1","borderError":"solid 1px #d0011b"},
+    "/* Typography */\n.project2816595118--root h1 {\n    color: #000000;\n    font-size: 32px;\n    line-height: 48px;\n}\n.project2816595118--root h2 {\n    color: #000000;\n    font-size: 24px;\n    line-height: 36px;\n}\n.project2816595118--root h3 {\n    color: #000000;\n    font-size: 19px;\n    line-height: 28px;\n}\n.project2816595118--root h4 {\n    color: #000000;\n    font-size: 16px;\n    line-height: 24px;\n}\n.project2816595118--root h5 {\n    color: #000000;\n    font-size: 14px;\n    line-height: 20px;\n}\n.project2816595118--root h6 {\n    color: #000000;\n    font-size: 12px;\n    line-height: 18px;\n}\n.project2816595118--root p {\n    color: #000000;\n    font-size: 16px;\n    line-height: 24px;\n}\n.project2816595118--root label {\n    color: #577083;\n    font-size: 16px;\n    line-height: 24px;\n}\n.project2816595118--root img {\n    display: inline-block;\n    vertical-align: middle;\n}\n.project2816595118--root textarea {\n    height: auto;\n    min-height: 50px;\n    border-radius: 0px;\n}\n.project2816595118--root a {\n    text-decoration: none;\n    user-select: none;\n    color: #4990e2;\n    outline: 0;\n}\n.project2816595118--root a:focus {\n    color: #4990e2;\n}\n.project2816595118--root a:visited:not(.project2816595118--button):not([disabled]) {\n    color: #257ade;\n}\n.project2816595118--root a:hover {\n    color: #5cb4ff;\n}\n.project2816595118--root a.project2816595118--disabled, .project2816595118--root a[disabled] {\n    color: #d1d1d1;\n}\n",
     module.id
 );

lib/types/events.d.ts

 export interface ChangeEvent<T> {
     value: T;
 }

lib/types/events.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=events.js.map

lib/types/forms.d.ts

@@ -0,0 +0,0 @@ import { ChangeEvent } from './events';

lib/types/forms.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=forms.js.map

lib/types/index.d.ts

 export * from './events';
 export * from './forms';

lib/types/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=index.js.map

lib/utils/clamp.d.ts

 export declare function clamp(value: number, min: number, max: number): number;

lib/utils/clamp.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/date-helpers.d.ts

@@ -0,0 +0,0 @@ export declare function getDayNames(startingDay?: number): string[];

lib/utils/date-helpers.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/index.d.ts

@@ -8,1 +8,2 @@ export * from './clamp';
 export * from './is-touch';
+export * from './omit';

lib/utils/index.js

@@ -13,2 +13,3 @@ "use strict";
 __export(require("./is-touch"));
+__export(require("./omit"));
 //# sourceMappingURL=index.js.map

lib/utils/is-element.d.ts

 export declare function isElement(a: any): a is Element;

lib/utils/is-element.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/is-number.d.ts

 export declare function isNumber(value: any): value is number;

lib/utils/is-number.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/is-touch.d.ts

 export declare const isTouch: boolean;

lib/utils/is-touch.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/noop.d.ts

 export declare function noop(): void;

lib/utils/noop.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/stop-scrolling.d.ts

 export declare function stopScrolling(): void;
 export declare function enableScrolling(): void;

lib/utils/stop-scrolling.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/transparent-image.d.ts

 export declare const transparentImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

lib/utils/transparent-image.js

@@ -0,0 +0,0 @@ "use strict";

package.json

 {
   "name": "stylable-components",
-  "version": "0.1.1",
+  "version": "0.2.0-0",
   "description": "Fully-tested & strictly-typed component library based on React, using optional Wix styling.",
@@ -28,2 +28,3 @@ "main": "./lib/index.js",
     "mobx-react": "^4.2.2",
+    "prop-types": "^15.5.10",
     "wix-react-tools": "^3.0.0"
@@ -34,2 +35,3 @@ },
     "@types/node": "^8.0.28",
+    "@types/prop-types": "^15.5.1",
     "@types/react": "^16.0.5",
@@ -52,4 +54,4 @@ "@types/react-dom": "^15.5.4",
     "react-dom": "^15.6.1",
-    "stylable": "^4.0.12",
-    "stylable-integration": "^5.1.3",
+    "stylable": "^4.0.14",
+    "stylable-integration": "^5.1.4",
     "test-drive-react": "^0.7.0",
@@ -56,0 +58,0 @@ "ts-loader": "^2.3.7",

README.md

@@ -0,0 +0,0 @@ # stylable-components

src/components/date-picker/index.ts

 export * from './date-picker';

src/components/drop-down/index.ts

 export * from './drop-down';

src/components/global-event/index.ts

 export * from './global-event';

src/components/image/index.ts

 export * from './image';

src/components/index.ts

@@ -24,1 +24,2 @@ export * from './date-picker';
 } from './selection-list';
+export * from './context-provider';

src/components/modal/index.ts

 export * from './modal';

src/components/number-input/index.ts

 export * from './number-input';

src/components/popup/index.ts

 export * from './popup';

src/components/portal/index.ts

 export * from './portal';

src/components/radio-group/index.ts

 export * from './radio-button';
 export * from './radio-group';

src/components/screen-reader-notification/index.ts

 export * from './screen-reader-notification';

src/components/selection-list/index.ts

@@ -0,0 +0,0 @@ export {divider, Divider} from './divider';

src/components/slider/index.ts

 export * from './slider';

src/components/stepper/index.ts

 export * from './stepper';

src/components/time-picker/index.ts

 export * from './time-picker';

src/components/time-picker/strings.ts

@@ -0,0 +0,0 @@ export const LABELS = {

src/components/time-picker/utils.ts

@@ -0,0 +0,0 @@ import {isTouch} from '../../utils';

src/components/toggle/index.ts

 export {default as Toggle} from './toggle';

src/components/tree-view/index.ts

 export * from './tree-view';

src/components/tree-view/tree-util.ts

@@ -0,0 +0,0 @@ import {ParentsMap, TreeItemData, TreeStateMap} from './tree-view';

src/icons/index.ts

 export * from './chevron-up';
 export * from './chevron-down';

src/index.ts

@@ -0,0 +0,0 @@ /// <reference path="../typings/stylable.d.ts" />

src/types/events.ts

 export interface ChangeEvent<T> {
     value: T;
 }

src/types/forms.ts

@@ -0,0 +0,0 @@ import {ChangeEvent} from './events';

src/types/index.ts

 export * from './events';
 export * from './forms';

src/utils/clamp.ts

@@ -0,0 +0,0 @@ export function clamp(value: number, min: number, max: number): number {

src/utils/date-helpers.ts

@@ -0,0 +0,0 @@ const monthNames = [

src/utils/index.ts

@@ -8,1 +8,2 @@ export * from './clamp';
 export * from './is-touch';
+export * from './omit';

src/utils/is-element.ts

 export function isElement(a: any): a is Element {
     return a instanceof Element;
 }

src/utils/is-number.ts

 export function isNumber(value: any): value is number {
     return typeof value === 'number';
 }

src/utils/is-touch.ts

 export const isTouch: boolean = typeof window === 'object' && 'orientation' in window;

src/utils/noop.ts

 export function noop() {}

src/utils/stop-scrolling.ts

@@ -0,0 +0,0 @@ export function stopScrolling() {

src/utils/transparent-image.ts

 export const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

typings/stylable.d.ts

@@ -0,0 +0,0 @@ // Here so that we can: import style from '[path-to].st.css'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of package files

329

increased by3.79%

Lines of code

11388

increased by1.05%

Number of low supply chain risk alerts

9

decreased by-10%

Worsened metrics

Total package byte prevSize

557923

decreased by-1.57%

Dependency count

7

increased by16.67%

Dev dependency count

30

increased by3.45%

Dependency changes

• + Addedprop-types@^15.5.10