@wix/design-system 1.3.0 → 1.4.0

package/dist/cjs/Input/Input.st.css.js

@@ -8,7 +8,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_Input";
+var _namespace_ = "wds_1_4_0_Input";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -16,7 +16,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_Input__root","text-small-normal":"wds_1_3_0_StylableTypography__text-small-normal","text-small-thin":"wds_1_3_0_StylableTypography__text-small-thin","text-medium-normal":"wds_1_3_0_StylableTypography__text-medium-normal","text-medium-thin":"wds_1_3_0_StylableTypography__text-medium-thin","wrapper":"wds_1_3_0_Input__wrapper","input":"wds_1_3_0_Input__input","disabled":"wds_1_3_0_Input__disabled","readOnly":"wds_1_3_0_Input__readOnly","suffixes":"wds_1_3_0_Input__suffixes","suffix":"wds_1_3_0_Input__suffix","statusWrapper":"wds_1_3_0_Input__statusWrapper","clearButtonWrapper":"wds_1_3_0_Input__clearButtonWrapper","menuArrow":"wds_1_3_0_Input__menuArrow","clearButton":"wds_1_3_0_Input__clearButton"};
+module.exports.classes = {"root":"wds_1_4_0_Input__root","text-small-normal":"wds_1_4_0_StylableTypography__text-small-normal","text-small-thin":"wds_1_4_0_StylableTypography__text-small-thin","text-medium-normal":"wds_1_4_0_StylableTypography__text-medium-normal","text-medium-thin":"wds_1_4_0_StylableTypography__text-medium-thin","wrapper":"wds_1_4_0_Input__wrapper","input":"wds_1_4_0_Input__input","disabled":"wds_1_4_0_Input__disabled","readOnly":"wds_1_4_0_Input__readOnly","suffixes":"wds_1_4_0_Input__suffixes","suffix":"wds_1_4_0_Input__suffix","statusWrapper":"wds_1_4_0_Input__statusWrapper","clearButtonWrapper":"wds_1_4_0_Input__clearButtonWrapper","menuArrow":"wds_1_4_0_Input__menuArrow","clearButton":"wds_1_4_0_Input__clearButton"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Input/Ticker/Ticker.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_3_0_Ticker";
+var _namespace_ = "wds_1_4_0_Ticker";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_Ticker__root","up":"wds_1_3_0_Ticker__up","down":"wds_1_3_0_Ticker__down"};
+module.exports.classes = {"root":"wds_1_4_0_Ticker__root","up":"wds_1_4_0_Ticker__up","down":"wds_1_4_0_Ticker__down"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/InputArea/InputArea.st.css.js

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_InputArea";
+var _namespace_ = "wds_1_4_0_InputArea";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -14,7 +14,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_InputArea__root","text-small-normal":"wds_1_3_0_StylableTypography__text-small-normal","text-small-thin":"wds_1_3_0_StylableTypography__text-small-thin","text-medium-normal":"wds_1_3_0_StylableTypography__text-medium-normal","text-medium-thin":"wds_1_3_0_StylableTypography__text-medium-thin","defaultScrollBar":"wds_1_3_0_defaultscrollbar__defaultScrollBar","inputArea":"wds_1_3_0_InputArea__inputArea","counter":"wds_1_3_0_InputArea__counter","status":"wds_1_3_0_InputArea__status","disabled":"wds_1_3_0_InputArea__disabled","readOnly":"wds_1_3_0_InputArea__readOnly"};
+module.exports.classes = {"root":"wds_1_4_0_InputArea__root","text-small-normal":"wds_1_4_0_StylableTypography__text-small-normal","text-small-thin":"wds_1_4_0_StylableTypography__text-small-thin","text-medium-normal":"wds_1_4_0_StylableTypography__text-medium-normal","text-medium-thin":"wds_1_4_0_StylableTypography__text-medium-thin","defaultScrollBar":"wds_1_4_0_defaultscrollbar__defaultScrollBar","inputArea":"wds_1_4_0_InputArea__inputArea","counter":"wds_1_4_0_InputArea__counter","status":"wds_1_4_0_InputArea__status","disabled":"wds_1_4_0_InputArea__disabled","readOnly":"wds_1_4_0_InputArea__readOnly"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/InputWithLabel/InputWithLabel.js

@@ -26,7 +26,7 @@ var getSuffixContainer = suffix => suffix.map((item, index) => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 15,
+      lineNumber: 19,
       columnNumber: 7
     }
   }, item);
@@ -58,13 +58,15 @@ class InputWithLabel extends _react.default.Component {
       } = _this$props,
       rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     var isBottomLineBorder = border === 'bottomLine';
+    var isWarning = status === _Input.default.StatusWarning;
+    var showStatusSection = (status === _Input.default.StatusError || isWarning) && statusMessage;
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-hook": dataHook,
       className: status ? undefined : _InputWithLabelSt.classes.statusMessagePlaceholder,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 108,
+        lineNumber: 114,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_LabelledElement.default, {
@@ -72,10 +74,11 @@ class InputWithLabel extends _react.default.Component {
       label: label,
       dataHook: _dataHooks.default.labelledElement,
       topLabelGray: isBottomLineBorder,
+      disabled: disabled,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 112,
+        lineNumber: 118,
         columnNumber: 9
       }
     }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
@@ -103,7 +106,7 @@ class InputWithLabel extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 137,
+          lineNumber: 144,
           columnNumber: 15
         }
       }, statusMessage),
@@ -114,34 +117,43 @@ class InputWithLabel extends _react.default.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 118,
+        lineNumber: 125,
         columnNumber: 11
       }
-    }))), status === _Input.default.StatusError && statusMessage && /*#__PURE__*/_react.default.createElement(_Text.default, {
-      skin: "error",
+    }))), showStatusSection && /*#__PURE__*/_react.default.createElement(_Text.default, {
+      skin: isWarning ? 'standard' : 'error',
       size: "small",
-      weight: "normal",
+      weight: isWarning ? 'thin' : 'normal',
       className: _InputWithLabelSt.classes.statusMessage,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 146,
+        lineNumber: 153,
         columnNumber: 11
       }
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: _InputWithLabelSt.classes.statusMessageIcon,
+      className: (0, _InputWithLabelSt.st)(_InputWithLabelSt.classes.statusMessageIcon, {
+        warning: isWarning
+      }),
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 152,
+        lineNumber: 159,
         columnNumber: 13
       }
-    }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlertSmall, {
+    }, isWarning ? /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusWarningSmall, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 153,
-        columnNumber: 15
+        lineNumber: 162,
+        columnNumber: 28
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlertSmall, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 162,
+        columnNumber: 53
       }
     })), /*#__PURE__*/_react.default.createElement("span", {
       "data-hook": _dataHooks.default.errorMessage,
@@ -149,7 +161,7 @@ class InputWithLabel extends _react.default.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 155,
+        lineNumber: 164,
         columnNumber: 13
       }
     }, statusMessage)));

package/dist/cjs/InputWithLabel/InputWithLabel.js.map

@@ -1 +1 @@
-{"version":3,"names":["getSuffixContainer","suffix","map","item","index","classes","groupIcon","InputWithLabel","React","Component","render","props","label","value","dataHook","status","statusMessage","onChange","onFocus","onBlur","name","type","ariaLabel","autoFocus","autocomplete","disabled","className","maxLength","placeholder","customInput","border","rest","isBottomLineBorder","undefined","statusMessagePlaceholder","dataHooks","labelledElement","st","root","input","color","Input","StatusError","statusMessageIcon","errorMessage","errorMessageContent","propTypes","PropTypes","string","arrayOf","element","oneOfType","number","oneOf","node","func","bool","elementType","defaultProps"],"sources":["../../../src/InputWithLabel/InputWithLabel.js"],"sourcesContent":["import React from 'react';\nimport { StatusAlertSmall } from '@wix/wix-ui-icons-common';\n\nimport LabelledElement from '../LabelledElement/LabelledElement';\nimport Input from '../Input';\n\nimport Text from '../Text';\nimport PropTypes from 'prop-types';\nimport { classes, st } from './InputWithLabel.st.css';\nimport dataHooks from './dataHooks';\n\nconst getSuffixContainer = suffix =>\n  suffix.map((item, index) => {\n    return (\n      <div\n        data-hook=\"suffix-container\"\n        key={`suffix-container-${index}`}\n        className={classes.groupIcon}\n      >\n        {item}\n      </div>\n    );\n  });\n\nclass InputWithLabel extends React.Component {\n  static propTypes = {\n    ...Input.propTypes,\n    /** Sets a default value for those who want to use this component uncontrolled */\n    dataHook: PropTypes.string,\n    /** Pass a component you want to show as the suffix of the input, e.g., text string, icon. */\n    suffix: PropTypes.arrayOf(PropTypes.element),\n    /** Sets the field label */\n    label: PropTypes.string,\n    /** Sets input value */\n    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    /** Specifies the status of a field */\n    status: PropTypes.oneOf(['error', 'warning', 'loading']),\n    /** Defines the message displayed when you hover over the status icon. If not given or empty there will be no tooltip. */\n    statusMessage: PropTypes.node,\n    /** Defines a standard input onFocus callback */\n    onFocus: PropTypes.func,\n    /** Defines a standard input onBlur callback */\n    onBlur: PropTypes.func,\n    /** Defines a standard input onChange callback */\n    onChange: PropTypes.func,\n    /** Reference element data when a form is submitted */\n    name: PropTypes.string,\n    /** Specifies the type of `<input/>` element to display. Default is text string. */\n    type: PropTypes.string,\n    /** Define a string that labels the current element in case where a text label is not visible on the screen */\n    ariaLabel: PropTypes.string,\n    /** Focus the element on mount (standard React input autoFocus). */\n    autoFocus: PropTypes.bool,\n    /** Sets the value of native autocomplete attribute (consult the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values)  */\n    autocomplete: PropTypes.string,\n    /** Specifies whether the input should be disabled or not */\n    disabled: PropTypes.bool,\n    /** Specifies a CSS class name to be appended to the component’s root element */\n    className: PropTypes.string,\n    /** Sets the maximum number of characters that can be entered into a field */\n    maxLength: PropTypes.number,\n    /** Sets a placeholder message to display */\n    placeholder: PropTypes.string,\n    /** Render a custom input component instead of the default html input tag */\n    customInput: PropTypes.elementType\n      ? PropTypes.oneOfType([\n          PropTypes.func,\n          PropTypes.node,\n          PropTypes.elementType,\n        ])\n      : PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n    /** Sets the border type */\n    border: PropTypes.oneOf(['standard', 'bottomLine']),\n  };\n\n  static defaultProps = {\n    statusMessage: '',\n  };\n\n  render() {\n    const {\n      label,\n      suffix,\n      value,\n      dataHook,\n      status,\n      statusMessage,\n      onChange,\n      onFocus,\n      onBlur,\n      name,\n      type,\n      ariaLabel,\n      autoFocus,\n      autocomplete,\n      disabled,\n      className,\n      maxLength,\n      placeholder,\n      customInput,\n      border,\n      ...rest\n    } = this.props;\n\n    const isBottomLineBorder = border === 'bottomLine';\n\n    return (\n      <div\n        data-hook={dataHook}\n        className={status ? undefined : classes.statusMessagePlaceholder}\n      >\n        <LabelledElement\n          value={value}\n          label={label}\n          dataHook={dataHooks.labelledElement}\n          topLabelGray={isBottomLineBorder}\n        >\n          <Input\n            className={st(classes.root, className)}\n            name={name}\n            type={type}\n            ariaLabel={ariaLabel}\n            autoFocus={autoFocus}\n            autocomplete={autocomplete}\n            disabled={disabled}\n            maxLength={maxLength}\n            placeholder={placeholder}\n            onChange={onChange}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            dataHook={dataHooks.input}\n            size=\"large\"\n            value={value}\n            suffix={suffix && getSuffixContainer(suffix)}\n            status={status}\n            statusMessage={\n              <span style={{ color: '#fff' }}>{statusMessage}</span>\n            }\n            customInput={customInput}\n            border={border}\n            hideStatusSuffix\n            {...rest}\n          />\n        </LabelledElement>\n        {status === Input.StatusError && statusMessage && (\n          <Text\n            skin=\"error\"\n            size=\"small\"\n            weight=\"normal\"\n            className={classes.statusMessage}\n          >\n            <span className={classes.statusMessageIcon}>\n              <StatusAlertSmall />\n            </span>\n            <span\n              data-hook={dataHooks.errorMessage}\n              className={classes.errorMessageContent}\n            >\n              {statusMessage}\n            </span>\n          </Text>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default InputWithLabel;\n"],"mappings":"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"}
+{"version":3,"names":["getSuffixContainer","suffix","map","item","index","classes","groupIcon","InputWithLabel","React","Component","render","props","label","value","dataHook","status","statusMessage","onChange","onFocus","onBlur","name","type","ariaLabel","autoFocus","autocomplete","disabled","className","maxLength","placeholder","customInput","border","rest","isBottomLineBorder","isWarning","Input","StatusWarning","showStatusSection","StatusError","undefined","statusMessagePlaceholder","dataHooks","labelledElement","st","root","input","color","statusMessageIcon","warning","errorMessage","errorMessageContent","propTypes","PropTypes","string","arrayOf","element","oneOfType","number","oneOf","node","func","bool","elementType","defaultProps"],"sources":["../../../src/InputWithLabel/InputWithLabel.js"],"sourcesContent":["import React from 'react';\nimport {\n  StatusAlertSmall,\n  StatusWarning,\n  StatusWarningSmall,\n} from '@wix/wix-ui-icons-common';\n\nimport LabelledElement from '../LabelledElement/LabelledElement';\nimport Input from '../Input';\n\nimport Text from '../Text';\nimport PropTypes from 'prop-types';\nimport { classes, st } from './InputWithLabel.st.css';\nimport dataHooks from './dataHooks';\n\nconst getSuffixContainer = suffix =>\n  suffix.map((item, index) => {\n    return (\n      <div\n        data-hook=\"suffix-container\"\n        key={`suffix-container-${index}`}\n        className={classes.groupIcon}\n      >\n        {item}\n      </div>\n    );\n  });\n\nclass InputWithLabel extends React.Component {\n  static propTypes = {\n    ...Input.propTypes,\n    /** Sets a default value for those who want to use this component uncontrolled */\n    dataHook: PropTypes.string,\n    /** Pass a component you want to show as the suffix of the input, e.g., text string, icon. */\n    suffix: PropTypes.arrayOf(PropTypes.element),\n    /** Sets the field label */\n    label: PropTypes.string,\n    /** Sets input value */\n    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    /** Specifies the status of a field */\n    status: PropTypes.oneOf(['error', 'warning', 'loading']),\n    /** Defines the message displayed when you hover over the status icon. If not given or empty there will be no tooltip. */\n    statusMessage: PropTypes.node,\n    /** Defines a standard input onFocus callback */\n    onFocus: PropTypes.func,\n    /** Defines a standard input onBlur callback */\n    onBlur: PropTypes.func,\n    /** Defines a standard input onChange callback */\n    onChange: PropTypes.func,\n    /** Reference element data when a form is submitted */\n    name: PropTypes.string,\n    /** Specifies the type of `<input/>` element to display. Default is text string. */\n    type: PropTypes.string,\n    /** Define a string that labels the current element in case where a text label is not visible on the screen */\n    ariaLabel: PropTypes.string,\n    /** Focus the element on mount (standard React input autoFocus). */\n    autoFocus: PropTypes.bool,\n    /** Sets the value of native autocomplete attribute (consult the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values)  */\n    autocomplete: PropTypes.string,\n    /** Specifies whether the input should be disabled or not */\n    disabled: PropTypes.bool,\n    /** Specifies a CSS class name to be appended to the component’s root element */\n    className: PropTypes.string,\n    /** Sets the maximum number of characters that can be entered into a field */\n    maxLength: PropTypes.number,\n    /** Sets a placeholder message to display */\n    placeholder: PropTypes.string,\n    /** Render a custom input component instead of the default html input tag */\n    customInput: PropTypes.elementType\n      ? PropTypes.oneOfType([\n          PropTypes.func,\n          PropTypes.node,\n          PropTypes.elementType,\n        ])\n      : PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n    /** Sets the border type */\n    border: PropTypes.oneOf(['standard', 'bottomLine']),\n  };\n\n  static defaultProps = {\n    statusMessage: '',\n  };\n\n  render() {\n    const {\n      label,\n      suffix,\n      value,\n      dataHook,\n      status,\n      statusMessage,\n      onChange,\n      onFocus,\n      onBlur,\n      name,\n      type,\n      ariaLabel,\n      autoFocus,\n      autocomplete,\n      disabled,\n      className,\n      maxLength,\n      placeholder,\n      customInput,\n      border,\n      ...rest\n    } = this.props;\n\n    const isBottomLineBorder = border === 'bottomLine';\n    const isWarning = status === Input.StatusWarning;\n    const showStatusSection =\n      (status === Input.StatusError || isWarning) && statusMessage;\n    return (\n      <div\n        data-hook={dataHook}\n        className={status ? undefined : classes.statusMessagePlaceholder}\n      >\n        <LabelledElement\n          value={value}\n          label={label}\n          dataHook={dataHooks.labelledElement}\n          topLabelGray={isBottomLineBorder}\n          disabled={disabled}\n        >\n          <Input\n            className={st(classes.root, className)}\n            name={name}\n            type={type}\n            ariaLabel={ariaLabel}\n            autoFocus={autoFocus}\n            autocomplete={autocomplete}\n            disabled={disabled}\n            maxLength={maxLength}\n            placeholder={placeholder}\n            onChange={onChange}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            dataHook={dataHooks.input}\n            size=\"large\"\n            value={value}\n            suffix={suffix && getSuffixContainer(suffix)}\n            status={status}\n            statusMessage={\n              <span style={{ color: '#fff' }}>{statusMessage}</span>\n            }\n            customInput={customInput}\n            border={border}\n            hideStatusSuffix\n            {...rest}\n          />\n        </LabelledElement>\n        {showStatusSection && (\n          <Text\n            skin={isWarning ? 'standard' : 'error'}\n            size=\"small\"\n            weight={isWarning ? 'thin' : 'normal'}\n            className={classes.statusMessage}\n          >\n            <span\n              className={st(classes.statusMessageIcon, { warning: isWarning })}\n            >\n              {isWarning ? <StatusWarningSmall /> : <StatusAlertSmall />}\n            </span>\n            <span\n              data-hook={dataHooks.errorMessage}\n              className={classes.errorMessageContent}\n            >\n              {statusMessage}\n            </span>\n          </Text>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default InputWithLabel;\n"],"mappings":";;;;;;;;AAAA;AACA;AAMA;AACA;AAEA;AACA;AACA;AACA;AAAoC;AAAA;AAAA;AAAA;AAEpC,IAAMA,kBAAkB,GAAGC,MAAM,IAC/BA,MAAM,CAACC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;EAC1B,oBACE;IACE,aAAU,kBAAkB;IAC5B,GAAG,6BAAsBA,KAAK,CAAG;IACjC,SAAS,EAAEC,yBAAO,CAACC,SAAU;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAE5BH,IAAI,CACD;AAEV,CAAC,CAAC;AAEJ,MAAMI,cAAc,SAASC,cAAK,CAACC,SAAS,CAAC;EAuD3CC,MAAM,GAAG;IACP,kBAsBI,IAAI,CAACC,KAAK;MAtBR;QACJC,KAAK;QACLX,MAAM;QACNY,KAAK;QACLC,QAAQ;QACRC,MAAM;QACNC,aAAa;QACbC,QAAQ;QACRC,OAAO;QACPC,MAAM;QACNC,IAAI;QACJC,IAAI;QACJC,SAAS;QACTC,SAAS;QACTC,YAAY;QACZC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,WAAW;QACXC,WAAW;QACXC;MAEF,CAAC;MADIC,IAAI;IAGT,IAAMC,kBAAkB,GAAGF,MAAM,KAAK,YAAY;IAClD,IAAMG,SAAS,GAAGlB,MAAM,KAAKmB,cAAK,CAACC,aAAa;IAChD,IAAMC,iBAAiB,GACrB,CAACrB,MAAM,KAAKmB,cAAK,CAACG,WAAW,IAAIJ,SAAS,KAAKjB,aAAa;IAC9D,oBACE;MACE,aAAWF,QAAS;MACpB,SAAS,EAAEC,MAAM,GAAGuB,SAAS,GAAGjC,yBAAO,CAACkC,wBAAyB;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,gBAEjE,6BAAC,wBAAe;MACd,KAAK,EAAE1B,KAAM;MACb,KAAK,EAAED,KAAM;MACb,QAAQ,EAAE4B,kBAAS,CAACC,eAAgB;MACpC,YAAY,EAAET,kBAAmB;MACjC,QAAQ,EAAEP,QAAS;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,gBAEnB,6BAAC,cAAK;MACJ,SAAS,EAAE,IAAAiB,oBAAE,EAACrC,yBAAO,CAACsC,IAAI,EAAEjB,SAAS,CAAE;MACvC,IAAI,EAAEN,IAAK;MACX,IAAI,EAAEC,IAAK;MACX,SAAS,EAAEC,SAAU;MACrB,SAAS,EAAEC,SAAU;MACrB,YAAY,EAAEC,YAAa;MAC3B,QAAQ,EAAEC,QAAS;MACnB,SAAS,EAAEE,SAAU;MACrB,WAAW,EAAEC,WAAY;MACzB,QAAQ,EAAEX,QAAS;MACnB,OAAO,EAAEC,OAAQ;MACjB,MAAM,EAAEC,MAAO;MACf,QAAQ,EAAEqB,kBAAS,CAACI,KAAM;MAC1B,IAAI,EAAC,OAAO;MACZ,KAAK,EAAE/B,KAAM;MACb,MAAM,EAAEZ,MAAM,IAAID,kBAAkB,CAACC,MAAM,CAAE;MAC7C,MAAM,EAAEc,MAAO;MACf,aAAa,eACX;QAAM,KAAK,EAAE;UAAE8B,KAAK,EAAE;QAAO,CAAE;QAAA;QAAA;UAAA;UAAA;UAAA;QAAA;MAAA,GAAE7B,aAAa,CAC/C;MACD,WAAW,EAAEa,WAAY;MACzB,MAAM,EAAEC,MAAO;MACf,gBAAgB;IAAA,GACZC,IAAI;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GACR,CACc,EACjBK,iBAAiB,iBAChB,6BAAC,aAAI;MACH,IAAI,EAAEH,SAAS,GAAG,UAAU,GAAG,OAAQ;MACvC,IAAI,EAAC,OAAO;MACZ,MAAM,EAAEA,SAAS,GAAG,MAAM,GAAG,QAAS;MACtC,SAAS,EAAE5B,yBAAO,CAACW,aAAc;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,gBAEjC;MACE,SAAS,EAAE,IAAA0B,oBAAE,EAACrC,yBAAO,CAACyC,iBAAiB,EAAE;QAAEC,OAAO,EAAEd;MAAU,CAAC,CAAE;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAEhEA,SAAS,gBAAG,6BAAC,oCAAkB;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,EAAG,gBAAG,6BAAC,kCAAgB;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,EAAG,CACrD,eACP;MACE,aAAWO,kBAAS,CAACQ,YAAa;MAClC,SAAS,EAAE3C,yBAAO,CAAC4C,mBAAoB;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAEtCjC,aAAa,CACT,CAEV,CACG;EAEV;AACF;AAlJMT,cAAc,CACX2C,SAAS,mCACXhB,cAAK,CAACgB,SAAS;EAClB;EACApC,QAAQ,EAAEqC,kBAAS,CAACC,MAAM;EAC1B;EACAnD,MAAM,EAAEkD,kBAAS,CAACE,OAAO,CAACF,kBAAS,CAACG,OAAO,CAAC;EAC5C;EACA1C,KAAK,EAAEuC,kBAAS,CAACC,MAAM;EACvB;EACAvC,KAAK,EAAEsC,kBAAS,CAACI,SAAS,CAAC,CAACJ,kBAAS,CAACC,MAAM,EAAED,kBAAS,CAACK,MAAM,CAAC,CAAC;EAChE;EACAzC,MAAM,EAAEoC,kBAAS,CAACM,KAAK,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;EACxD;EACAzC,aAAa,EAAEmC,kBAAS,CAACO,IAAI;EAC7B;EACAxC,OAAO,EAAEiC,kBAAS,CAACQ,IAAI;EACvB;EACAxC,MAAM,EAAEgC,kBAAS,CAACQ,IAAI;EACtB;EACA1C,QAAQ,EAAEkC,kBAAS,CAACQ,IAAI;EACxB;EACAvC,IAAI,EAAE+B,kBAAS,CAACC,MAAM;EACtB;EACA/B,IAAI,EAAE8B,kBAAS,CAACC,MAAM;EACtB;EACA9B,SAAS,EAAE6B,kBAAS,CAACC,MAAM;EAC3B;EACA7B,SAAS,EAAE4B,kBAAS,CAACS,IAAI;EACzB;EACApC,YAAY,EAAE2B,kBAAS,CAACC,MAAM;EAC9B;EACA3B,QAAQ,EAAE0B,kBAAS,CAACS,IAAI;EACxB;EACAlC,SAAS,EAAEyB,kBAAS,CAACC,MAAM;EAC3B;EACAzB,SAAS,EAAEwB,kBAAS,CAACK,MAAM;EAC3B;EACA5B,WAAW,EAAEuB,kBAAS,CAACC,MAAM;EAC7B;EACAvB,WAAW,EAAEsB,kBAAS,CAACU,WAAW,GAC9BV,kBAAS,CAACI,SAAS,CAAC,CAClBJ,kBAAS,CAACQ,IAAI,EACdR,kBAAS,CAACO,IAAI,EACdP,kBAAS,CAACU,WAAW,CACtB,CAAC,GACFV,kBAAS,CAACI,SAAS,CAAC,CAACJ,kBAAS,CAACQ,IAAI,EAAER,kBAAS,CAACO,IAAI,CAAC,CAAC;EACzD;EACA5B,MAAM,EAAEqB,kBAAS,CAACM,KAAK,CAAC,CAAC,UAAU,EAAE,YAAY,CAAC;AAAC;AAhDjDlD,cAAc,CAmDXuD,YAAY,GAAG;EACpB9C,aAAa,EAAE;AACjB,CAAC;AAAA,eA+FYT,cAAc;AAAA"}

package/dist/cjs/InputWithLabel/InputWithLabel.st.css

@@ -8,6 +8,12 @@
   -st-default: Input;
 }
 
+
+:import {
+  -st-from: '../Foundation/stylable/colors.st.css';
+  -st-named: Y10;
+}
+
 :vars {
   input-height: 54px;
   status-message-height: 24px;
@@ -77,11 +83,16 @@
 }
 
 .statusMessageIcon {
+  -st-states: warning;
   margin-right: 5px;
   display: flex;
   margin-left: -2px;
 }
 
+.statusMessageIcon:warning {
+  color: value(Y10);
+}
+
 .errorMessageContent {
   line-height: 18px;
-}
+}

package/dist/cjs/InputWithLabel/InputWithLabel.st.css.js

@@ -1,11 +1,12 @@
 
 require("../Foundation/stylable/colors.st.css.js");
 require("../Input/Input.st.css.js");
+require("../Foundation/stylable/colors.st.css.js");
 const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js");
 
 
 
-var _namespace_ = "wds_1_3_0_InputWithLabel";
+var _namespace_ = "wds_1_4_0_InputWithLabel";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +14,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_InputWithLabel__root","groupIcon":"wds_1_3_0_InputWithLabel__groupIcon","statusMessagePlaceholder":"wds_1_3_0_InputWithLabel__statusMessagePlaceholder","statusMessage":"wds_1_3_0_InputWithLabel__statusMessage","statusMessageIcon":"wds_1_3_0_InputWithLabel__statusMessageIcon","errorMessageContent":"wds_1_3_0_InputWithLabel__errorMessageContent"};
+module.exports.classes = {"root":"wds_1_4_0_InputWithLabel__root","groupIcon":"wds_1_4_0_InputWithLabel__groupIcon","statusMessagePlaceholder":"wds_1_4_0_InputWithLabel__statusMessagePlaceholder","statusMessage":"wds_1_4_0_InputWithLabel__statusMessage","statusMessageIcon":"wds_1_4_0_InputWithLabel__statusMessageIcon","errorMessageContent":"wds_1_4_0_InputWithLabel__errorMessageContent"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/InputWithOptions/InputWithOptions.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_InputWithOptions";
+var _namespace_ = "wds_1_4_0_InputWithOptions";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_InputWithOptions__root","nativeSelectWrapper":"wds_1_3_0_InputWithOptions__nativeSelectWrapper","nativeSelect":"wds_1_3_0_InputWithOptions__nativeSelect","nativeOption":"wds_1_3_0_InputWithOptions__nativeOption"};
+module.exports.classes = {"root":"wds_1_4_0_InputWithOptions__root","nativeSelectWrapper":"wds_1_4_0_InputWithOptions__nativeSelectWrapper","nativeSelect":"wds_1_4_0_InputWithOptions__nativeSelect","nativeOption":"wds_1_4_0_InputWithOptions__nativeOption"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/LabelledElement/LabelledElement.d.js.map

@@ -1 +1 @@
-{"version":3,"names":["LabelledElement","React","Component"],"sources":["../../../src/LabelledElement/LabelledElement.d.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface LabelledElementProps {\n  dataHook?: string;\n  label?: string;\n  value?: string;\n}\n\nexport default class LabelledElement extends React.Component<LabelledElementProps> {}\n"],"mappings":";;;;AAAA;AAA+B;AAAA;AAQhB,MAAMA,eAAe,SAASC,KAAK,CAACC,SAAS,CAAuB;AAAE"}
+{"version":3,"names":["LabelledElement","React","Component"],"sources":["../../../src/LabelledElement/LabelledElement.d.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface LabelledElementProps {\n  dataHook?: string;\n  label?: string;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport default class LabelledElement extends React.Component<LabelledElementProps> { }\n"],"mappings":";;;;AAAA;AAA+B;AAAA;AAShB,MAAMA,eAAe,SAASC,KAAK,CAACC,SAAS,CAAuB;AAAG"}

package/dist/cjs/LabelledElement/LabelledElement.js

@@ -64,7 +64,8 @@ class LabelledElement extends _react.default.Component {
     var {
       dataHook,
       label,
-      children
+      children,
+      disabled
     } = this.props;
     var labelTop = this._placeLabelOnTop();
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -73,7 +74,7 @@ class LabelledElement extends _react.default.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 73,
+        lineNumber: 75,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement("label", {
@@ -82,12 +83,13 @@ class LabelledElement extends _react.default.Component {
       htmlFor: inputId,
       className: (0, _LabelledElementSt.st)(_LabelledElementSt.classes.label, {
         labelTop,
-        topLabelGray: this.props.topLabelGray
+        topLabelGray: this.props.topLabelGray,
+        disabled
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 74,
+        lineNumber: 76,
         columnNumber: 9
       }
     }, /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -99,7 +101,7 @@ class LabelledElement extends _react.default.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 83,
+        lineNumber: 86,
         columnNumber: 11
       }
     }, label)), children && /*#__PURE__*/_react.default.createElement("div", {
@@ -107,7 +109,7 @@ class LabelledElement extends _react.default.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 94,
+        lineNumber: 97,
         columnNumber: 11
       }
     }, /*#__PURE__*/_react.default.cloneElement(children, {
@@ -130,7 +132,9 @@ LabelledElement.propTypes = {
   /** Specifies the value of rendered child input. */
   value: _propTypes.default.string,
   /** Specifies the top label color */
-  topLabelGray: _propTypes.default.bool
+  topLabelGray: _propTypes.default.bool,
+  /** Specifies if the field is disabled */
+  disabled: _propTypes.default.bool
 };
 var _default = LabelledElement;
 exports.default = _default;

package/dist/cjs/LabelledElement/LabelledElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["LabelledElement","React","Component","state","hasFocus","inputId","generateID","value","undefined","_isInputEmpty","_isInputControlled","props","_handleFocus","event","children","childrenOnFocus","onFocus","setState","_handleBlur","childrenOnBlur","onBlur","_handleOnChange","childrenOnChange","onChange","target","_placeLabelOnTop","_getPlaceholder","placeholder","render","dataHook","label","labelTop","classes","root","DataHooks","st","topLabelGray","labelText","childrenWrapper","cloneElement","id","className","inputContainer","displayName","propTypes","PropTypes","string","bool"],"sources":["../../../src/LabelledElement/LabelledElement.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Text from '../Text';\nimport { st, classes } from './LabelledElement.st.css';\nimport DataHooks from './dataHooks';\nimport { generateID } from '../utils/generateId';\n\nclass LabelledElement extends React.Component {\n  static displayName = 'LabelledElement';\n\n  static propTypes = {\n    /** Specifies a data-hook for tests */\n    dataHook: PropTypes.string,\n    /** Sets the field label. */\n    label: PropTypes.string,\n    /** Specifies the value of rendered child input. */\n    value: PropTypes.string,\n    /** Specifies the top label color */\n    topLabelGray: PropTypes.bool,\n  };\n\n  state = {\n    hasFocus: false,\n    inputId: `labelled-element-${generateID()}`,\n    value: undefined,\n  };\n\n  _isInputEmpty = () => {\n    return this._isInputControlled() ? !this.props.value : !this.state.value;\n  };\n\n  _isInputControlled = () => typeof this.props.value !== 'undefined';\n\n  _handleFocus = event => {\n    const { children } = this.props;\n    const childrenOnFocus = children && children.props.onFocus;\n    this.setState({ hasFocus: true });\n    childrenOnFocus && childrenOnFocus(event);\n  };\n\n  _handleBlur = event => {\n    const { children } = this.props;\n    const childrenOnBlur = children && children.props.onBlur;\n    this.setState({\n      hasFocus: false,\n    });\n    childrenOnBlur && childrenOnBlur(event);\n  };\n\n  _handleOnChange = event => {\n    const { children } = this.props;\n    const childrenOnChange = children && children.props.onChange;\n\n    if (!this._isInputControlled()) {\n      this.setState({\n        value: event.target.value,\n      });\n    }\n\n    childrenOnChange && childrenOnChange(event);\n  };\n\n  _placeLabelOnTop = () => this.state.hasFocus || !this._isInputEmpty();\n\n  _getPlaceholder = placeholder => (this._placeLabelOnTop() ? placeholder : '');\n\n  render() {\n    const { inputId } = this.state;\n    const { dataHook, label, children } = this.props;\n    const labelTop = this._placeLabelOnTop();\n\n    return (\n      <div className={classes.root} data-hook={dataHook}>\n        <label\n          data-hook={DataHooks.label}\n          data-top={labelTop}\n          htmlFor={inputId}\n          className={st(classes.label, {\n            labelTop,\n            topLabelGray: this.props.topLabelGray,\n          })}\n        >\n          <Text\n            size=\"medium\"\n            light={!labelTop}\n            secondary={!labelTop}\n            weight=\"thin\"\n            className={classes.labelText}\n          >\n            {label}\n          </Text>\n        </label>\n        {children && (\n          <div data-hook={DataHooks.childrenWrapper}>\n            {React.cloneElement(children, {\n              id: inputId,\n              onFocus: this._handleFocus,\n              onBlur: this._handleBlur,\n              onChange: this._handleOnChange,\n              /** should have a different height than regular large input */\n              className: st(classes.inputContainer, children.props.className),\n              placeholder: children.props.placeholder\n                ? this._getPlaceholder(children.props.placeholder)\n                : undefined,\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default LabelledElement;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAiD;AAEjD,MAAMA,eAAe,SAASC,cAAK,CAACC,SAAS,CAAC;EAAA;IAAA;IAAA,KAc5CC,KAAK,GAAG;MACNC,QAAQ,EAAE,KAAK;MACfC,OAAO,6BAAsB,IAAAC,sBAAU,GAAE,CAAE;MAC3CC,KAAK,EAAEC;IACT,CAAC;IAAA,KAEDC,aAAa,GAAG,MAAM;MACpB,OAAO,IAAI,CAACC,kBAAkB,EAAE,GAAG,CAAC,IAAI,CAACC,KAAK,CAACJ,KAAK,GAAG,CAAC,IAAI,CAACJ,KAAK,CAACI,KAAK;IAC1E,CAAC;IAAA,KAEDG,kBAAkB,GAAG,MAAM,OAAO,IAAI,CAACC,KAAK,CAACJ,KAAK,KAAK,WAAW;IAAA,KAElEK,YAAY,GAAGC,KAAK,IAAI;MACtB,IAAM;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACH,KAAK;MAC/B,IAAMI,eAAe,GAAGD,QAAQ,IAAIA,QAAQ,CAACH,KAAK,CAACK,OAAO;MAC1D,IAAI,CAACC,QAAQ,CAAC;QAAEb,QAAQ,EAAE;MAAK,CAAC,CAAC;MACjCW,eAAe,IAAIA,eAAe,CAACF,KAAK,CAAC;IAC3C,CAAC;IAAA,KAEDK,WAAW,GAAGL,KAAK,IAAI;MACrB,IAAM;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACH,KAAK;MAC/B,IAAMQ,cAAc,GAAGL,QAAQ,IAAIA,QAAQ,CAACH,KAAK,CAACS,MAAM;MACxD,IAAI,CAACH,QAAQ,CAAC;QACZb,QAAQ,EAAE;MACZ,CAAC,CAAC;MACFe,cAAc,IAAIA,cAAc,CAACN,KAAK,CAAC;IACzC,CAAC;IAAA,KAEDQ,eAAe,GAAGR,KAAK,IAAI;MACzB,IAAM;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACH,KAAK;MAC/B,IAAMW,gBAAgB,GAAGR,QAAQ,IAAIA,QAAQ,CAACH,KAAK,CAACY,QAAQ;MAE5D,IAAI,CAAC,IAAI,CAACb,kBAAkB,EAAE,EAAE;QAC9B,IAAI,CAACO,QAAQ,CAAC;UACZV,KAAK,EAAEM,KAAK,CAACW,MAAM,CAACjB;QACtB,CAAC,CAAC;MACJ;MAEAe,gBAAgB,IAAIA,gBAAgB,CAACT,KAAK,CAAC;IAC7C,CAAC;IAAA,KAEDY,gBAAgB,GAAG,MAAM,IAAI,CAACtB,KAAK,CAACC,QAAQ,IAAI,CAAC,IAAI,CAACK,aAAa,EAAE;IAAA,KAErEiB,eAAe,GAAGC,WAAW,IAAK,IAAI,CAACF,gBAAgB,EAAE,GAAGE,WAAW,GAAG,EAAG;EAAA;EAE7EC,MAAM,GAAG;IACP,IAAM;MAAEvB;IAAQ,CAAC,GAAG,IAAI,CAACF,KAAK;IAC9B,IAAM;MAAE0B,QAAQ;MAAEC,KAAK;MAAEhB;IAAS,CAAC,GAAG,IAAI,CAACH,KAAK;IAChD,IAAMoB,QAAQ,GAAG,IAAI,CAACN,gBAAgB,EAAE;IAExC,oBACE;MAAK,SAAS,EAAEO,0BAAO,CAACC,IAAK;MAAC,aAAWJ,QAAS;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,gBAChD;MACE,aAAWK,kBAAS,CAACJ,KAAM;MAC3B,YAAUC,QAAS;MACnB,OAAO,EAAE1B,OAAQ;MACjB,SAAS,EAAE,IAAA8B,qBAAE,EAACH,0BAAO,CAACF,KAAK,EAAE;QAC3BC,QAAQ;QACRK,YAAY,EAAE,IAAI,CAACzB,KAAK,CAACyB;MAC3B,CAAC,CAAE;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,gBAEH,6BAAC,aAAI;MACH,IAAI,EAAC,QAAQ;MACb,KAAK,EAAE,CAACL,QAAS;MACjB,SAAS,EAAE,CAACA,QAAS;MACrB,MAAM,EAAC,MAAM;MACb,SAAS,EAAEC,0BAAO,CAACK,SAAU;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAE5BP,KAAK,CACD,CACD,EACPhB,QAAQ,iBACP;MAAK,aAAWoB,kBAAS,CAACI,eAAgB;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,gBACvCrC,cAAK,CAACsC,YAAY,CAACzB,QAAQ,EAAE;MAC5B0B,EAAE,EAAEnC,OAAO;MACXW,OAAO,EAAE,IAAI,CAACJ,YAAY;MAC1BQ,MAAM,EAAE,IAAI,CAACF,WAAW;MACxBK,QAAQ,EAAE,IAAI,CAACF,eAAe;MAC9B;MACAoB,SAAS,EAAE,IAAAN,qBAAE,EAACH,0BAAO,CAACU,cAAc,EAAE5B,QAAQ,CAACH,KAAK,CAAC8B,SAAS,CAAC;MAC/Dd,WAAW,EAAEb,QAAQ,CAACH,KAAK,CAACgB,WAAW,GACnC,IAAI,CAACD,eAAe,CAACZ,QAAQ,CAACH,KAAK,CAACgB,WAAW,CAAC,GAChDnB;IACN,CAAC,CAAC,CAEL,CACG;EAEV;AACF;AAvGMR,eAAe,CACZ2C,WAAW,GAAG,iBAAiB;AADlC3C,eAAe,CAGZ4C,SAAS,GAAG;EACjB;EACAf,QAAQ,EAAEgB,kBAAS,CAACC,MAAM;EAC1B;EACAhB,KAAK,EAAEe,kBAAS,CAACC,MAAM;EACvB;EACAvC,KAAK,EAAEsC,kBAAS,CAACC,MAAM;EACvB;EACAV,YAAY,EAAES,kBAAS,CAACE;AAC1B,CAAC;AAAA,eA6FY/C,eAAe;AAAA"}
+{"version":3,"names":["LabelledElement","React","Component","state","hasFocus","inputId","generateID","value","undefined","_isInputEmpty","_isInputControlled","props","_handleFocus","event","children","childrenOnFocus","onFocus","setState","_handleBlur","childrenOnBlur","onBlur","_handleOnChange","childrenOnChange","onChange","target","_placeLabelOnTop","_getPlaceholder","placeholder","render","dataHook","label","disabled","labelTop","classes","root","DataHooks","st","topLabelGray","labelText","childrenWrapper","cloneElement","id","className","inputContainer","displayName","propTypes","PropTypes","string","bool"],"sources":["../../../src/LabelledElement/LabelledElement.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Text from '../Text';\nimport { st, classes } from './LabelledElement.st.css';\nimport DataHooks from './dataHooks';\nimport { generateID } from '../utils/generateId';\n\nclass LabelledElement extends React.Component {\n  static displayName = 'LabelledElement';\n\n  static propTypes = {\n    /** Specifies a data-hook for tests */\n    dataHook: PropTypes.string,\n    /** Sets the field label. */\n    label: PropTypes.string,\n    /** Specifies the value of rendered child input. */\n    value: PropTypes.string,\n    /** Specifies the top label color */\n    topLabelGray: PropTypes.bool,\n    /** Specifies if the field is disabled */\n    disabled: PropTypes.bool,\n  };\n\n  state = {\n    hasFocus: false,\n    inputId: `labelled-element-${generateID()}`,\n    value: undefined,\n  };\n\n  _isInputEmpty = () => {\n    return this._isInputControlled() ? !this.props.value : !this.state.value;\n  };\n\n  _isInputControlled = () => typeof this.props.value !== 'undefined';\n\n  _handleFocus = event => {\n    const { children } = this.props;\n    const childrenOnFocus = children && children.props.onFocus;\n    this.setState({ hasFocus: true });\n    childrenOnFocus && childrenOnFocus(event);\n  };\n\n  _handleBlur = event => {\n    const { children } = this.props;\n    const childrenOnBlur = children && children.props.onBlur;\n    this.setState({\n      hasFocus: false,\n    });\n    childrenOnBlur && childrenOnBlur(event);\n  };\n\n  _handleOnChange = event => {\n    const { children } = this.props;\n    const childrenOnChange = children && children.props.onChange;\n\n    if (!this._isInputControlled()) {\n      this.setState({\n        value: event.target.value,\n      });\n    }\n\n    childrenOnChange && childrenOnChange(event);\n  };\n\n  _placeLabelOnTop = () => this.state.hasFocus || !this._isInputEmpty();\n\n  _getPlaceholder = placeholder => (this._placeLabelOnTop() ? placeholder : '');\n\n  render() {\n    const { inputId } = this.state;\n    const { dataHook, label, children, disabled } = this.props;\n    const labelTop = this._placeLabelOnTop();\n\n    return (\n      <div className={classes.root} data-hook={dataHook}>\n        <label\n          data-hook={DataHooks.label}\n          data-top={labelTop}\n          htmlFor={inputId}\n          className={st(classes.label, {\n            labelTop,\n            topLabelGray: this.props.topLabelGray,\n            disabled,\n          })}\n        >\n          <Text\n            size=\"medium\"\n            light={!labelTop}\n            secondary={!labelTop}\n            weight=\"thin\"\n            className={classes.labelText}\n          >\n            {label}\n          </Text>\n        </label>\n        {children && (\n          <div data-hook={DataHooks.childrenWrapper}>\n            {React.cloneElement(children, {\n              id: inputId,\n              onFocus: this._handleFocus,\n              onBlur: this._handleBlur,\n              onChange: this._handleOnChange,\n              /** should have a different height than regular large input */\n              className: st(classes.inputContainer, children.props.className),\n              placeholder: children.props.placeholder\n                ? this._getPlaceholder(children.props.placeholder)\n                : undefined,\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default LabelledElement;\n"],"mappings":"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"}

package/dist/cjs/LabelledElement/LabelledElement.st.css

@@ -25,7 +25,7 @@
 }
 
 .label {
-  -st-states: labelTop, topLabelGray;
+  -st-states: labelTop, topLabelGray, disabled;
 
   display: flex;
   align-items: center;
@@ -57,6 +57,10 @@
   color: value(D40)
 }
 
+.label:disabled .labelText {
+  color: value(D40)
+}
+
 .inputContainer {
   -st-extends: Input;
   height: 52px;
@@ -68,4 +72,4 @@
 
 .inputContainer .menuArrow {
   padding: 14px 6px 14px 9px !important;
-}
+}

package/dist/cjs/LabelledElement/LabelledElement.st.css.js

@@ -7,7 +7,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_LabelledElement";
+var _namespace_ = "wds_1_4_0_LabelledElement";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -15,7 +15,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_LabelledElement__root","input":"wds_1_3_0_Input__input","menuArrow":"wds_1_3_0_Input__menuArrow","label":"wds_1_3_0_LabelledElement__label","labelText":"wds_1_3_0_LabelledElement__labelText","inputContainer":"wds_1_3_0_LabelledElement__inputContainer"};
+module.exports.classes = {"root":"wds_1_4_0_LabelledElement__root","input":"wds_1_4_0_Input__input","menuArrow":"wds_1_4_0_Input__menuArrow","label":"wds_1_4_0_LabelledElement__label","labelText":"wds_1_4_0_LabelledElement__labelText","inputContainer":"wds_1_4_0_LabelledElement__inputContainer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Layout/Cell/Cell.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_3_0_LayoutCell";
+var _namespace_ = "wds_1_4_0_LayoutCell";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_LayoutCell__root"};
+module.exports.classes = {"root":"wds_1_4_0_LayoutCell__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Layout/Layout.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_Layout";
+var _namespace_ = "wds_1_4_0_Layout";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_Layout__root"};
+module.exports.classes = {"root":"wds_1_4_0_Layout__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/LinearProgressBar/LinearProgressBar.st.css.js

@@ -7,7 +7,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_LinearProgressBar";
+var _namespace_ = "wds_1_4_0_LinearProgressBar";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -15,7 +15,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_LinearProgressBar__root","text-medium-bold":"wds_1_3_0_StylableTypography__text-medium-bold"};
+module.exports.classes = {"root":"wds_1_4_0_LinearProgressBar__root","text-medium-bold":"wds_1_4_0_StylableTypography__text-medium-bold"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/LinearProgressBar/LinearProgressBarCore/LinearProgressBarCore.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_3_0_LinearProgressBarCore";
+var _namespace_ = "wds_1_4_0_LinearProgressBarCore";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_LinearProgressBarCore__root","progressIndicationSection":"wds_1_3_0_LinearProgressBarCore__progressIndicationSection","prefixIndicationContainer":"wds_1_3_0_LinearProgressBarCore__prefixIndicationContainer","suffixIndication":"wds_1_3_0_LinearProgressBarCore__suffixIndication","barContainer":"wds_1_3_0_LinearProgressBarCore__barContainer","barBackground":"wds_1_3_0_LinearProgressBarCore__barBackground","barForeground":"wds_1_3_0_LinearProgressBarCore__barForeground","indicationContainer":"wds_1_3_0_LinearProgressBarCore__indicationContainer","progressPercentage":"wds_1_3_0_LinearProgressBarCore__progressPercentage"};
+module.exports.classes = {"root":"wds_1_4_0_LinearProgressBarCore__root","progressIndicationSection":"wds_1_4_0_LinearProgressBarCore__progressIndicationSection","prefixIndicationContainer":"wds_1_4_0_LinearProgressBarCore__prefixIndicationContainer","suffixIndication":"wds_1_4_0_LinearProgressBarCore__suffixIndication","barContainer":"wds_1_4_0_LinearProgressBarCore__barContainer","barBackground":"wds_1_4_0_LinearProgressBarCore__barBackground","barForeground":"wds_1_4_0_LinearProgressBarCore__barForeground","indicationContainer":"wds_1_4_0_LinearProgressBarCore__indicationContainer","progressPercentage":"wds_1_4_0_LinearProgressBarCore__progressPercentage"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/ListItemAction/ListItemAction.st.css.js

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_ListItemAction";
+var _namespace_ = "wds_1_4_0_ListItemAction";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -14,7 +14,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_ListItemAction__root","text":"wds_1_3_0_ListItemAction__text","prefixIcon":"wds_1_3_0_ListItemAction__prefixIcon","suffixIcon":"wds_1_3_0_ListItemAction__suffixIcon","textBox":"wds_1_3_0_ListItemAction__textBox","suffix":"wds_1_3_0_ListItemAction__suffix"};
+module.exports.classes = {"root":"wds_1_4_0_ListItemAction__root","text":"wds_1_4_0_ListItemAction__text","prefixIcon":"wds_1_4_0_ListItemAction__prefixIcon","suffixIcon":"wds_1_4_0_ListItemAction__suffixIcon","textBox":"wds_1_4_0_ListItemAction__textBox","suffix":"wds_1_4_0_ListItemAction__suffix"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/ListItemEditable/ListItemEditable.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_ListItemEditable";
+var _namespace_ = "wds_1_4_0_ListItemEditable";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_ListItemEditable__root","input":"wds_1_3_0_ListItemEditable__input"};
+module.exports.classes = {"root":"wds_1_4_0_ListItemEditable__root","input":"wds_1_4_0_ListItemEditable__input"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/ListItemSection/ListItemSection.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_ListItemSection";
+var _namespace_ = "wds_1_4_0_ListItemSection";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_ListItemSection__root","title":"wds_1_3_0_ListItemSection__title","titleWrapper":"wds_1_3_0_ListItemSection__titleWrapper","suffixWrapper":"wds_1_3_0_ListItemSection__suffixWrapper","suffix":"wds_1_3_0_ListItemSection__suffix"};
+module.exports.classes = {"root":"wds_1_4_0_ListItemSection__root","title":"wds_1_4_0_ListItemSection__title","titleWrapper":"wds_1_4_0_ListItemSection__titleWrapper","suffixWrapper":"wds_1_4_0_ListItemSection__suffixWrapper","suffix":"wds_1_4_0_ListItemSection__suffix"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/ListItemSelect/ListItemSelect.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_ListItemSelect";
+var _namespace_ = "wds_1_4_0_ListItemSelect";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_ListItemSelect__root","fullWidthContent":"wds_1_3_0_ListItemSelect__fullWidthContent","textsWrapper":"wds_1_3_0_ListItemSelect__textsWrapper","titleWrapper":"wds_1_3_0_ListItemSelect__titleWrapper","prefix":"wds_1_3_0_ListItemSelect__prefix","title":"wds_1_3_0_ListItemSelect__title","suffix":"wds_1_3_0_ListItemSelect__suffix","subtitle":"wds_1_3_0_ListItemSelect__subtitle"};
+module.exports.classes = {"root":"wds_1_4_0_ListItemSelect__root","fullWidthContent":"wds_1_4_0_ListItemSelect__fullWidthContent","textsWrapper":"wds_1_4_0_ListItemSelect__textsWrapper","titleWrapper":"wds_1_4_0_ListItemSelect__titleWrapper","prefix":"wds_1_4_0_ListItemSelect__prefix","title":"wds_1_4_0_ListItemSelect__title","suffix":"wds_1_4_0_ListItemSelect__suffix","subtitle":"wds_1_4_0_ListItemSelect__subtitle"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/LiveRegion/LiveRegion.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_3_0_LiveRegion";
+var _namespace_ = "wds_1_4_0_LiveRegion";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_3_0_LiveRegion__root"};
+module.exports.classes = {"root":"wds_1_4_0_LiveRegion__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};