@wix/design-system 1.1.1 → 1.3.0

package/dist/cjs/FormField/FormField.js

@@ -140,7 +140,9 @@ class FormField extends _react.default.Component {
       } = this.props;
       return (suffix || this._hasCharCounter()) && /*#__PURE__*/_react.default.createElement("div", {
         "data-hook": _constants.dataHooks.suffix,
-        className: _FormFieldSt.classes.suffix,
+        className: (0, _FormFieldSt.st)(_FormFieldSt.classes.suffix, {
+          noLabel: !this.props.label || this.props.labelPlacement !== PLACEMENT.top
+        }),
         __self: this,
         __source: {
           fileName: _jsxFileName,
@@ -178,7 +180,7 @@ class FormField extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 238,
+          lineNumber: 244,
           columnNumber: 7
         }
       }, label);
@@ -194,14 +196,14 @@ class FormField extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 263,
+          lineNumber: 269,
           columnNumber: 7
         }
       }, /*#__PURE__*/_react.default.createElement(Icon, {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 264,
+          lineNumber: 270,
           columnNumber: 9
         }
       }));
@@ -220,7 +222,7 @@ class FormField extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 273,
+          lineNumber: 279,
           columnNumber: 7
         }
       }, (status === STATUS.error || status === STATUS.warning) && this._renderStatusIcon(), /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -232,7 +234,7 @@ class FormField extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 281,
+          lineNumber: 287,
           columnNumber: 9
         }
       }, statusMessage));
@@ -286,7 +288,7 @@ class FormField extends _react.default.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 326,
+        lineNumber: 332,
         columnNumber: 7
       }
     }, label && labelPlacement === PLACEMENT.top && /*#__PURE__*/_react.default.createElement("div", {
@@ -294,13 +296,21 @@ class FormField extends _react.default.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 336,
+        lineNumber: 342,
         columnNumber: 11
       }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _FormFieldSt.classes.labelRowMain,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 343,
+        columnNumber: 13
+      }
     }, this._renderLabel({
       trimLongText: true,
       labelSize
-    }), required && asterisk, this._renderInfoIcon(), this._renderSuffix()), children && /*#__PURE__*/_react.default.createElement("div", {
+    }), required && asterisk, this._renderInfoIcon()), this._renderSuffix()), children && /*#__PURE__*/_react.default.createElement("div", {
       "data-hook": _constants.dataHooks.children,
       className: (0, _FormFieldSt.st)(_FormFieldSt.classes.children, {
         childrenWithInlineLabel: hasInlineElements
@@ -308,7 +318,7 @@ class FormField extends _react.default.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 345,
+        lineNumber: 353,
         columnNumber: 11
       }
     }, (!label || labelPlacement !== PLACEMENT.top) && this._renderSuffix(), /*#__PURE__*/_react.default.createElement(_StatusContext.StatusContext.Provider, {
@@ -319,7 +329,7 @@ class FormField extends _react.default.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 354,
+        lineNumber: 362,
         columnNumber: 13
       }
     }, this._renderChildren())), hasInlineElements && this._renderLabelWithIndicators({

package/dist/cjs/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"names":["PLACEMENT","top","right","left","ALIGN","middle","LABEL_STYLE","display","STATUS","error","warning","loading","asterisk","dataHooks","classes","charactersLeft","lengthLeft","colorProps","light","secondary","skin","SKINS","SIZES","small","WEIGHTS","normal","counter","FormField","React","Component","constructor","props","state","undefined","childrenRenderPropInterface","setCharactersLeft","setState","_hasCharCounter","charCount","_renderCharCounter","_renderInfoIcon","infoContent","infoTooltipProps","infoIcon","_renderLabelWithIndicators","labelSize","required","suffix","labelIndicators","st","inlineWithSuffix","Boolean","_renderLabel","trimLongText","_renderSuffix","_hasInlineElements","label","labelPlacement","hasInlineLabel","hasInlineIndicator","id","weight","labelId","_renderStatusIcon","iconByStatus","StatusAlertFilledSmall","StatusWarningFilledSmall","Icon","status","statusIcon","_renderStatusMessage","statusMessage","statusId","uniqueId","_renderChildren","children","render","labelAlignment","dataHook","classNames","stretchContent","rootStyles","minLabelHeight","hasInlineElements","root","labelRow","childrenWithInlineLabel","ariaDescribedBy","displayName","propTypes","PropTypes","oneOfType","node","func","string","shape","TooltipCommonProps","oneOf","bool","number","defaultProps"],"sources":["../../../src/FormField/FormField.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport InfoIcon from '../InfoIcon';\nimport uniqueId from 'lodash/uniqueId';\nimport Text, { SIZES, SKINS, WEIGHTS } from '../Text';\nimport { dataHooks } from './constants';\nimport { st, classes } from './FormField.st.css';\nimport { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';\nimport {\n  StatusAlertFilledSmall,\n  StatusWarningFilledSmall,\n} from '@wix/wix-ui-icons-common';\nimport { StatusContext } from './StatusContext';\n\nconst PLACEMENT = {\n  top: 'top',\n  right: 'right',\n  left: 'left',\n};\n\nconst ALIGN = {\n  middle: 'middle',\n  top: 'top',\n};\n\nconst LABEL_STYLE = {\n  display: 'block', // allows the label to middle vertically\n};\n\nconst STATUS = {\n  error: 'error',\n  warning: 'warning',\n  loading: 'loading',\n};\n\nconst asterisk = (\n  <div\n    data-hook={dataHooks.asterisk}\n    className={classes.asterisk}\n    children=\"*\"\n  />\n);\n\nconst charactersLeft = lengthLeft => {\n  const colorProps =\n    lengthLeft >= 0 ? { light: true, secondary: true } : { skin: SKINS.error };\n  return (\n    <Text\n      size={SIZES.small}\n      weight={WEIGHTS.normal}\n      {...colorProps}\n      dataHook={dataHooks.counter}\n      children={lengthLeft}\n    />\n  );\n};\n\nclass FormField extends React.Component {\n  static displayName = 'FormField';\n\n  constructor(props) {\n    super(props);\n    this.labelId = props.labelId || uniqueId('formfield-');\n    this.statusId = props.labelId\n      ? `${props.labelId}-status`\n      : uniqueId('formfield-status-');\n  }\n\n  static propTypes = {\n    /** when function, it receives object with:\n     * * `setCharactersLeft` - function accepts a number and will display it on top right of `FormField` component\n     *\n     * Note that alternatively you can also use `charCount` prop to display character count\n     * instead of using the render function method.\n     */\n\n    /** Accept any kind of component as a child element. A child should be a form element like an Input, InputArea, Dropdown or RichTextArea. */\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /** Applies a data-hook HTML attribute that can be used in tests. */\n    dataHook: PropTypes.string,\n\n    /** Adds a string used to match text labels with FormField children items. E.g.\n     *\n     * ```js\n     * <FormField id=\"myFormField\" label=\"Hello\">\n     *   <Input id=\"myFormField\"/>\n     * </FormField>\n     * ```\n     */\n    id: PropTypes.string,\n\n    /** Displays a passed info message in a tooltip. Default value is a text string, but it can also be overridden with any other component. */\n    infoContent: PropTypes.node,\n\n    /** Allows control over the tooltip style and behaviour by passed tooltip properties.\n     * @linkTypeTo components-overlays--tooltip\n     * @setTypeName TooltipCommonProps\n     */\n    infoTooltipProps: PropTypes.shape(TooltipCommonProps),\n\n    /** Sets a field label. It’s default value is a text string, but it can be overridden with any other component. */\n    label: PropTypes.node,\n\n    /** Controls the label alignment */\n    labelAlignment: PropTypes.oneOf([ALIGN.middle, ALIGN.top]),\n\n    /** Controls the label placement */\n    labelPlacement: PropTypes.oneOf([\n      PLACEMENT.top,\n      PLACEMENT.right,\n      PLACEMENT.left,\n    ]),\n\n    /** Controls the size of label */\n    labelSize: PropTypes.oneOf(['tiny', 'small']),\n\n    /** Marks a field as mandatory with an asterisk (*) at the end of a label. */\n    required: PropTypes.bool,\n\n    /** Defines whether or not the content (children container) grows when there's space available. Otherwise, it only uses the necessary space. */\n    stretchContent: PropTypes.bool,\n\n    /** Adds a custom element at the end of the label row (it overrides the charCount in case it's provided). */\n    suffix: PropTypes.node,\n\n    /** Sets the maximum length for the field value. Character count is displayed in the top right corner of a component. */\n    charCount: PropTypes.number,\n\n    /** Sets the id of the label */\n    labelId: PropTypes.string,\n\n    /** Sets the status message. It is displayed bellow the child component*/\n    statusMessage: PropTypes.node,\n\n    /** Sets the type of status message, to give it appropriate colors and icons */\n    status: PropTypes.oneOf([STATUS.error, STATUS.warning, STATUS.loading]),\n  };\n\n  static defaultProps = {\n    required: false,\n    stretchContent: true,\n    labelSize: 'small',\n    labelPlacement: PLACEMENT.top,\n    labelAlignment: ALIGN.middle,\n  };\n\n  state = {\n    lengthLeft: undefined,\n  };\n\n  childrenRenderPropInterface = {\n    setCharactersLeft: lengthLeft => this.setState({ lengthLeft }),\n  };\n\n  _renderChildren() {\n    const { children } = this.props;\n    if (typeof children === 'function') {\n      return children(this.childrenRenderPropInterface);\n    }\n\n    return children;\n  }\n\n  _hasCharCounter = () =>\n    this.props.charCount !== undefined ||\n    typeof this.state.lengthLeft === 'number';\n\n  _renderCharCounter = () => {\n    if (!this._hasCharCounter()) {\n      return;\n    }\n    const { charCount } = this.props;\n    return charactersLeft(\n      charCount !== undefined ? charCount : this.state.lengthLeft,\n    );\n  };\n\n  _renderInfoIcon = () => {\n    const { infoContent, infoTooltipProps } = this.props;\n\n    return (\n      infoContent && (\n        <InfoIcon\n          dataHook={dataHooks.infoIcon}\n          className={classes.infoIcon}\n          content={infoContent}\n          tooltipProps={infoTooltipProps}\n          size=\"small\"\n        />\n      )\n    );\n  };\n\n  _renderLabelWithIndicators = ({ labelSize }) => {\n    const { required, suffix } = this.props;\n\n    return (\n      <div\n        data-hook={dataHooks.labelIndicators}\n        className={st(classes.labelIndicators, {\n          inlineWithSuffix: Boolean(suffix || this._hasCharCounter()),\n        })}\n      >\n        {this._renderLabel({ trimLongText: false, labelSize })}\n        {required && asterisk}\n        {this._renderInfoIcon()}\n      </div>\n    );\n  };\n\n  _renderSuffix = () => {\n    const { suffix } = this.props;\n\n    return (\n      (suffix || this._hasCharCounter()) && (\n        <div data-hook={dataHooks.suffix} className={classes.suffix}>\n          {suffix ? suffix : this._renderCharCounter()}\n        </div>\n      )\n    );\n  };\n\n  _hasInlineElements = (label, labelPlacement) => {\n    const hasInlineLabel =\n      label &&\n      (labelPlacement === PLACEMENT.left || labelPlacement === PLACEMENT.right);\n    const hasInlineIndicator =\n      !label && (this.props.required || !!this.props.infoContent);\n    return hasInlineLabel || hasInlineIndicator;\n  };\n\n  _renderLabel = ({ trimLongText, labelSize }) => {\n    const { label, id } = this.props;\n    const weight = labelSize === 'tiny' ? 'normal' : undefined;\n\n    return (\n      <Text\n        size={labelSize}\n        weight={weight}\n        htmlFor={id}\n        id={this.labelId}\n        tagName=\"label\"\n        dataHook={dataHooks.label}\n        ellipsis={trimLongText}\n        style={LABEL_STYLE}\n        secondary\n        className={classes.label}\n      >\n        {label}\n      </Text>\n    );\n  };\n\n  _renderStatusIcon = () => {\n    const iconByStatus = {\n      [STATUS.error]: StatusAlertFilledSmall,\n      [STATUS.warning]: StatusWarningFilledSmall,\n    };\n    const Icon = iconByStatus[this.props.status];\n\n    return (\n      <div className={classes.statusIcon}>\n        <Icon />\n      </div>\n    );\n  };\n\n  _renderStatusMessage = () => {\n    const { statusMessage, status, labelSize } = this.props;\n\n    return (\n      <div\n        className={st(classes.statusMessage, {\n          status,\n          labelSize,\n        })}\n      >\n        {(status === STATUS.error || status === STATUS.warning) &&\n          this._renderStatusIcon()}\n        <Text\n          id={this.statusId}\n          dataHook={dataHooks.statusMessage}\n          skin={status === STATUS.error ? 'error' : 'standard'}\n          secondary={status !== STATUS.error}\n          size={labelSize}\n        >\n          {statusMessage}\n        </Text>\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      label,\n      labelPlacement,\n      labelAlignment,\n      labelSize,\n      required,\n      dataHook,\n      children,\n      classNames,\n      stretchContent,\n      statusMessage,\n      status,\n    } = this.props;\n\n    const rootStyles = label\n      ? {\n          labelPlacement,\n          labelAlignment,\n          stretchContent,\n          required,\n          minLabelHeight: !children,\n        }\n      : {\n          stretchContent,\n          required,\n          minLabelHeight: !children,\n        };\n\n    const hasInlineElements = this._hasInlineElements(label, labelPlacement);\n\n    return (\n      <div\n        data-hook={dataHook}\n        data-status={status}\n        className={st(\n          classes.root,\n          { ...rootStyles, ...(label ? { labelSize } : {}), hasInlineElements },\n          classNames,\n        )}\n      >\n        {label && labelPlacement === PLACEMENT.top && (\n          <div className={classes.labelRow}>\n            {this._renderLabel({ trimLongText: true, labelSize })}\n            {required && asterisk}\n            {this._renderInfoIcon()}\n            {this._renderSuffix()}\n          </div>\n        )}\n\n        {children && (\n          <div\n            data-hook={dataHooks.children}\n            className={st(classes.children, {\n              childrenWithInlineLabel: hasInlineElements,\n            })}\n          >\n            {(!label || labelPlacement !== PLACEMENT.top) &&\n              this._renderSuffix()}\n\n            <StatusContext.Provider\n              value={{\n                status,\n                ariaDescribedBy: `${this.statusId}, ${this.labelId}`,\n              }}\n            >\n              {this._renderChildren()}\n            </StatusContext.Provider>\n          </div>\n        )}\n\n        {hasInlineElements && this._renderLabelWithIndicators({ labelSize })}\n\n        {statusMessage && this._renderStatusMessage()}\n      </div>\n    );\n  }\n}\n\nexport default FormField;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAEhD,IAAMA,SAAS,GAAG;EAChBC,GAAG,EAAE,KAAK;EACVC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE;AACR,CAAC;AAED,IAAMC,KAAK,GAAG;EACZC,MAAM,EAAE,QAAQ;EAChBJ,GAAG,EAAE;AACP,CAAC;AAED,IAAMK,WAAW,GAAG;EAClBC,OAAO,EAAE,OAAO,CAAE;AACpB,CAAC;;AAED,IAAMC,MAAM,GAAG;EACbC,KAAK,EAAE,OAAO;EACdC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,QAAQ,gBACZ;EACE,aAAWC,oBAAS,CAACD,QAAS;EAC9B,SAAS,EAAEE,oBAAO,CAACF,QAAS;EAC5B,QAAQ,EAAC,GAAG;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA,EAEf;AAED,IAAMG,cAAc,GAAGC,UAAU,IAAI;EACnC,IAAMC,UAAU,GACdD,UAAU,IAAI,CAAC,GAAG;IAAEE,KAAK,EAAE,IAAI;IAAEC,SAAS,EAAE;EAAK,CAAC,GAAG;IAAEC,IAAI,EAAEC,WAAK,CAACZ;EAAM,CAAC;EAC5E,oBACE,6BAAC,aAAI;IACH,IAAI,EAAEa,WAAK,CAACC,KAAM;IAClB,MAAM,EAAEC,aAAO,CAACC;EAAO,GACnBR,UAAU;IACd,QAAQ,EAAEJ,oBAAS,CAACa,OAAQ;IAC5B,QAAQ,EAAEV,UAAW;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GACrB;AAEN,CAAC;AAED,MAAMW,SAAS,SAASC,cAAK,CAACC,SAAS,CAAC;EAGtCC,WAAW,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,KAsFfC,KAAK,GAAG;MACNhB,UAAU,EAAEiB;IACd,CAAC;IAAA,KAEDC,2BAA2B,GAAG;MAC5BC,iBAAiB,EAAEnB,UAAU,IAAI,IAAI,CAACoB,QAAQ,CAAC;QAAEpB;MAAW,CAAC;IAC/D,CAAC;IAAA,KAWDqB,eAAe,GAAG,MAChB,IAAI,CAACN,KAAK,CAACO,SAAS,KAAKL,SAAS,IAClC,OAAO,IAAI,CAACD,KAAK,CAAChB,UAAU,KAAK,QAAQ;IAAA,KAE3CuB,kBAAkB,GAAG,MAAM;MACzB,IAAI,CAAC,IAAI,CAACF,eAAe,EAAE,EAAE;QAC3B;MACF;MACA,IAAM;QAAEC;MAAU,CAAC,GAAG,IAAI,CAACP,KAAK;MAChC,OAAOhB,cAAc,CACnBuB,SAAS,KAAKL,SAAS,GAAGK,SAAS,GAAG,IAAI,CAACN,KAAK,CAAChB,UAAU,CAC5D;IACH,CAAC;IAAA,KAEDwB,eAAe,GAAG,MAAM;MACtB,IAAM;QAAEC,WAAW;QAAEC;MAAiB,CAAC,GAAG,IAAI,CAACX,KAAK;MAEpD,OACEU,WAAW,iBACT,6BAAC,iBAAQ;QACP,QAAQ,EAAE5B,oBAAS,CAAC8B,QAAS;QAC7B,SAAS,EAAE7B,oBAAO,CAAC6B,QAAS;QAC5B,OAAO,EAAEF,WAAY;QACrB,YAAY,EAAEC,gBAAiB;QAC/B,IAAI,EAAC,OAAO;QAAA;QAAA;UAAA;UAAA;UAAA;QAAA;MAAA,EAEf;IAEL,CAAC;IAAA,KAEDE,0BAA0B,GAAG,QAAmB;MAAA,IAAlB;QAAEC;MAAU,CAAC;MACzC,IAAM;QAAEC,QAAQ;QAAEC;MAAO,CAAC,GAAG,IAAI,CAAChB,KAAK;MAEvC,oBACE;QACE,aAAWlB,oBAAS,CAACmC,eAAgB;QACrC,SAAS,EAAE,IAAAC,eAAE,EAACnC,oBAAO,CAACkC,eAAe,EAAE;UACrCE,gBAAgB,EAAEC,OAAO,CAACJ,MAAM,IAAI,IAAI,CAACV,eAAe,EAAE;QAC5D,CAAC,CAAE;QAAA;QAAA;UAAA;UAAA;UAAA;QAAA;MAAA,GAEF,IAAI,CAACe,YAAY,CAAC;QAAEC,YAAY,EAAE,KAAK;QAAER;MAAU,CAAC,CAAC,EACrDC,QAAQ,IAAIlC,QAAQ,EACpB,IAAI,CAAC4B,eAAe,EAAE,CACnB;IAEV,CAAC;IAAA,KAEDc,aAAa,GAAG,MAAM;MACpB,IAAM;QAAEP;MAAO,CAAC,GAAG,IAAI,CAAChB,KAAK;MAE7B,OACE,CAACgB,MAAM,IAAI,IAAI,CAACV,eAAe,EAAE,kBAC/B;QAAK,aAAWxB,oBAAS,CAACkC,MAAO;QAAC,SAAS,EAAEjC,oBAAO,CAACiC,MAAO;QAAA;QAAA;UAAA;UAAA;UAAA;QAAA;MAAA,GACzDA,MAAM,GAAGA,MAAM,GAAG,IAAI,CAACR,kBAAkB,EAAE,CAE/C;IAEL,CAAC;IAAA,KAEDgB,kBAAkB,GAAG,CAACC,KAAK,EAAEC,cAAc,KAAK;MAC9C,IAAMC,cAAc,GAClBF,KAAK,KACJC,cAAc,KAAKzD,SAAS,CAACG,IAAI,IAAIsD,cAAc,KAAKzD,SAAS,CAACE,KAAK,CAAC;MAC3E,IAAMyD,kBAAkB,GACtB,CAACH,KAAK,KAAK,IAAI,CAACzB,KAAK,CAACe,QAAQ,IAAI,CAAC,CAAC,IAAI,CAACf,KAAK,CAACU,WAAW,CAAC;MAC7D,OAAOiB,cAAc,IAAIC,kBAAkB;IAC7C,CAAC;IAAA,KAEDP,YAAY,GAAG,SAAiC;MAAA,IAAhC;QAAEC,YAAY;QAAER;MAAU,CAAC;MACzC,IAAM;QAAEW,KAAK;QAAEI;MAAG,CAAC,GAAG,IAAI,CAAC7B,KAAK;MAChC,IAAM8B,MAAM,GAAGhB,SAAS,KAAK,MAAM,GAAG,QAAQ,GAAGZ,SAAS;MAE1D,oBACE,6BAAC,aAAI;QACH,IAAI,EAAEY,SAAU;QAChB,MAAM,EAAEgB,MAAO;QACf,OAAO,EAAED,EAAG;QACZ,EAAE,EAAE,IAAI,CAACE,OAAQ;QACjB,OAAO,EAAC,OAAO;QACf,QAAQ,EAAEjD,oBAAS,CAAC2C,KAAM;QAC1B,QAAQ,EAAEH,YAAa;QACvB,KAAK,EAAE/C,WAAY;QACnB,SAAS;QACT,SAAS,EAAEQ,oBAAO,CAAC0C,KAAM;QAAA;QAAA;UAAA;UAAA;UAAA;QAAA;MAAA,GAExBA,KAAK,CACD;IAEX,CAAC;IAAA,KAEDO,iBAAiB,GAAG,MAAM;MACxB,IAAMC,YAAY,GAAG;QACnB,CAACxD,MAAM,CAACC,KAAK,GAAGwD,wCAAsB;QACtC,CAACzD,MAAM,CAACE,OAAO,GAAGwD;MACpB,CAAC;MACD,IAAMC,IAAI,GAAGH,YAAY,CAAC,IAAI,CAACjC,KAAK,CAACqC,MAAM,CAAC;MAE5C,oBACE;QAAK,SAAS,EAAEtD,oBAAO,CAACuD,UAAW;QAAA;QAAA;UAAA;UAAA;UAAA;QAAA;MAAA,gBACjC,6BAAC,IAAI;QAAA;QAAA;UAAA;UAAA;UAAA;QAAA;MAAA,EAAG,CACJ;IAEV,CAAC;IAAA,KAEDC,oBAAoB,GAAG,MAAM;MAC3B,IAAM;QAAEC,aAAa;QAAEH,MAAM;QAAEvB;MAAU,CAAC,GAAG,IAAI,CAACd,KAAK;MAEvD,oBACE;QACE,SAAS,EAAE,IAAAkB,eAAE,EAACnC,oBAAO,CAACyD,aAAa,EAAE;UACnCH,MAAM;UACNvB;QACF,CAAC,CAAE;QAAA;QAAA;UAAA;UAAA;UAAA;QAAA;MAAA,GAEF,CAACuB,MAAM,KAAK5D,MAAM,CAACC,KAAK,IAAI2D,MAAM,KAAK5D,MAAM,CAACE,OAAO,KACpD,IAAI,CAACqD,iBAAiB,EAAE,eAC1B,6BAAC,aAAI;QACH,EAAE,EAAE,IAAI,CAACS,QAAS;QAClB,QAAQ,EAAE3D,oBAAS,CAAC0D,aAAc;QAClC,IAAI,EAAEH,MAAM,KAAK5D,MAAM,CAACC,KAAK,GAAG,OAAO,GAAG,UAAW;QACrD,SAAS,EAAE2D,MAAM,KAAK5D,MAAM,CAACC,KAAM;QACnC,IAAI,EAAEoC,SAAU;QAAA;QAAA;UAAA;UAAA;UAAA;QAAA;MAAA,GAEf0B,aAAa,CACT,CACH;IAEV,CAAC;IArOC,IAAI,CAACT,OAAO,GAAG/B,KAAK,CAAC+B,OAAO,IAAI,IAAAW,iBAAQ,EAAC,YAAY,CAAC;IACtD,IAAI,CAACD,QAAQ,GAAGzC,KAAK,CAAC+B,OAAO,aACtB/B,KAAK,CAAC+B,OAAO,eAChB,IAAAW,iBAAQ,EAAC,mBAAmB,CAAC;EACnC;EAyFAC,eAAe,GAAG;IAChB,IAAM;MAAEC;IAAS,CAAC,GAAG,IAAI,CAAC5C,KAAK;IAC/B,IAAI,OAAO4C,QAAQ,KAAK,UAAU,EAAE;MAClC,OAAOA,QAAQ,CAAC,IAAI,CAACzC,2BAA2B,CAAC;IACnD;IAEA,OAAOyC,QAAQ;EACjB;EAmIAC,MAAM,GAAG;IACP,IAAM;MACJpB,KAAK;MACLC,cAAc;MACdoB,cAAc;MACdhC,SAAS;MACTC,QAAQ;MACRgC,QAAQ;MACRH,QAAQ;MACRI,UAAU;MACVC,cAAc;MACdT,aAAa;MACbH;IACF,CAAC,GAAG,IAAI,CAACrC,KAAK;IAEd,IAAMkD,UAAU,GAAGzB,KAAK,GACpB;MACEC,cAAc;MACdoB,cAAc;MACdG,cAAc;MACdlC,QAAQ;MACRoC,cAAc,EAAE,CAACP;IACnB,CAAC,GACD;MACEK,cAAc;MACdlC,QAAQ;MACRoC,cAAc,EAAE,CAACP;IACnB,CAAC;IAEL,IAAMQ,iBAAiB,GAAG,IAAI,CAAC5B,kBAAkB,CAACC,KAAK,EAAEC,cAAc,CAAC;IAExE,oBACE;MACE,aAAWqB,QAAS;MACpB,eAAaV,MAAO;MACpB,SAAS,EAAE,IAAAnB,eAAE,EACXnC,oBAAO,CAACsE,IAAI,gDACPH,UAAU,GAAMzB,KAAK,GAAG;QAAEX;MAAU,CAAC,GAAG,CAAC,CAAC;QAAGsC;MAAiB,IACnEJ,UAAU,CACV;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAEDvB,KAAK,IAAIC,cAAc,KAAKzD,SAAS,CAACC,GAAG,iBACxC;MAAK,SAAS,EAAEa,oBAAO,CAACuE,QAAS;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAC9B,IAAI,CAACjC,YAAY,CAAC;MAAEC,YAAY,EAAE,IAAI;MAAER;IAAU,CAAC,CAAC,EACpDC,QAAQ,IAAIlC,QAAQ,EACpB,IAAI,CAAC4B,eAAe,EAAE,EACtB,IAAI,CAACc,aAAa,EAAE,CAExB,EAEAqB,QAAQ,iBACP;MACE,aAAW9D,oBAAS,CAAC8D,QAAS;MAC9B,SAAS,EAAE,IAAA1B,eAAE,EAACnC,oBAAO,CAAC6D,QAAQ,EAAE;QAC9BW,uBAAuB,EAAEH;MAC3B,CAAC,CAAE;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAEF,CAAC,CAAC3B,KAAK,IAAIC,cAAc,KAAKzD,SAAS,CAACC,GAAG,KAC1C,IAAI,CAACqD,aAAa,EAAE,eAEtB,6BAAC,4BAAa,CAAC,QAAQ;MACrB,KAAK,EAAE;QACLc,MAAM;QACNmB,eAAe,YAAK,IAAI,CAACf,QAAQ,eAAK,IAAI,CAACV,OAAO;MACpD,CAAE;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAED,IAAI,CAACY,eAAe,EAAE,CACA,CAE5B,EAEAS,iBAAiB,IAAI,IAAI,CAACvC,0BAA0B,CAAC;MAAEC;IAAU,CAAC,CAAC,EAEnE0B,aAAa,IAAI,IAAI,CAACD,oBAAoB,EAAE,CACzC;EAEV;AACF;AAzTM3C,SAAS,CACN6D,WAAW,GAAG,WAAW;AAD5B7D,SAAS,CAWN8D,SAAS,GAAG;EACjB;AACJ;AACA;AACA;AACA;AACA;;EAEI;EACAd,QAAQ,EAAEe,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,IAAI,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EAE/D;EACAf,QAAQ,EAAEY,kBAAS,CAACI,MAAM;EAE1B;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;EACIlC,EAAE,EAAE8B,kBAAS,CAACI,MAAM;EAEpB;EACArD,WAAW,EAAEiD,kBAAS,CAACE,IAAI;EAE3B;AACJ;AACA;AACA;EACIlD,gBAAgB,EAAEgD,kBAAS,CAACK,KAAK,CAACC,iCAAkB,CAAC;EAErD;EACAxC,KAAK,EAAEkC,kBAAS,CAACE,IAAI;EAErB;EACAf,cAAc,EAAEa,kBAAS,CAACO,KAAK,CAAC,CAAC7F,KAAK,CAACC,MAAM,EAAED,KAAK,CAACH,GAAG,CAAC,CAAC;EAE1D;EACAwD,cAAc,EAAEiC,kBAAS,CAACO,KAAK,CAAC,CAC9BjG,SAAS,CAACC,GAAG,EACbD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,IAAI,CACf,CAAC;EAEF;EACA0C,SAAS,EAAE6C,kBAAS,CAACO,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;EAE7C;EACAnD,QAAQ,EAAE4C,kBAAS,CAACQ,IAAI;EAExB;EACAlB,cAAc,EAAEU,kBAAS,CAACQ,IAAI;EAE9B;EACAnD,MAAM,EAAE2C,kBAAS,CAACE,IAAI;EAEtB;EACAtD,SAAS,EAAEoD,kBAAS,CAACS,MAAM;EAE3B;EACArC,OAAO,EAAE4B,kBAAS,CAACI,MAAM;EAEzB;EACAvB,aAAa,EAAEmB,kBAAS,CAACE,IAAI;EAE7B;EACAxB,MAAM,EAAEsB,kBAAS,CAACO,KAAK,CAAC,CAACzF,MAAM,CAACC,KAAK,EAAED,MAAM,CAACE,OAAO,EAAEF,MAAM,CAACG,OAAO,CAAC;AACxE,CAAC;AAhFGgB,SAAS,CAkFNyE,YAAY,GAAG;EACpBtD,QAAQ,EAAE,KAAK;EACfkC,cAAc,EAAE,IAAI;EACpBnC,SAAS,EAAE,OAAO;EAClBY,cAAc,EAAEzD,SAAS,CAACC,GAAG;EAC7B4E,cAAc,EAAEzE,KAAK,CAACC;AACxB,CAAC;AAAA,eAmOYsB,SAAS;AAAA"}
+{"version":3,"names":["PLACEMENT","top","right","left","ALIGN","middle","LABEL_STYLE","display","STATUS","error","warning","loading","asterisk","dataHooks","classes","charactersLeft","lengthLeft","colorProps","light","secondary","skin","SKINS","SIZES","small","WEIGHTS","normal","counter","FormField","React","Component","constructor","props","state","undefined","childrenRenderPropInterface","setCharactersLeft","setState","_hasCharCounter","charCount","_renderCharCounter","_renderInfoIcon","infoContent","infoTooltipProps","infoIcon","_renderLabelWithIndicators","labelSize","required","suffix","labelIndicators","st","inlineWithSuffix","Boolean","_renderLabel","trimLongText","_renderSuffix","noLabel","label","labelPlacement","_hasInlineElements","hasInlineLabel","hasInlineIndicator","id","weight","labelId","_renderStatusIcon","iconByStatus","StatusAlertFilledSmall","StatusWarningFilledSmall","Icon","status","statusIcon","_renderStatusMessage","statusMessage","statusId","uniqueId","_renderChildren","children","render","labelAlignment","dataHook","classNames","stretchContent","rootStyles","minLabelHeight","hasInlineElements","root","labelRow","labelRowMain","childrenWithInlineLabel","ariaDescribedBy","displayName","propTypes","PropTypes","oneOfType","node","func","string","shape","TooltipCommonProps","oneOf","bool","number","defaultProps"],"sources":["../../../src/FormField/FormField.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport InfoIcon from '../InfoIcon';\nimport uniqueId from 'lodash/uniqueId';\nimport Text, { SIZES, SKINS, WEIGHTS } from '../Text';\nimport { dataHooks } from './constants';\nimport { st, classes } from './FormField.st.css';\nimport { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';\nimport {\n  StatusAlertFilledSmall,\n  StatusWarningFilledSmall,\n} from '@wix/wix-ui-icons-common';\nimport { StatusContext } from './StatusContext';\n\nconst PLACEMENT = {\n  top: 'top',\n  right: 'right',\n  left: 'left',\n};\n\nconst ALIGN = {\n  middle: 'middle',\n  top: 'top',\n};\n\nconst LABEL_STYLE = {\n  display: 'block', // allows the label to middle vertically\n};\n\nconst STATUS = {\n  error: 'error',\n  warning: 'warning',\n  loading: 'loading',\n};\n\nconst asterisk = (\n  <div\n    data-hook={dataHooks.asterisk}\n    className={classes.asterisk}\n    children=\"*\"\n  />\n);\n\nconst charactersLeft = lengthLeft => {\n  const colorProps =\n    lengthLeft >= 0 ? { light: true, secondary: true } : { skin: SKINS.error };\n  return (\n    <Text\n      size={SIZES.small}\n      weight={WEIGHTS.normal}\n      {...colorProps}\n      dataHook={dataHooks.counter}\n      children={lengthLeft}\n    />\n  );\n};\n\nclass FormField extends React.Component {\n  static displayName = 'FormField';\n\n  constructor(props) {\n    super(props);\n    this.labelId = props.labelId || uniqueId('formfield-');\n    this.statusId = props.labelId\n      ? `${props.labelId}-status`\n      : uniqueId('formfield-status-');\n  }\n\n  static propTypes = {\n    /** when function, it receives object with:\n     * * `setCharactersLeft` - function accepts a number and will display it on top right of `FormField` component\n     *\n     * Note that alternatively you can also use `charCount` prop to display character count\n     * instead of using the render function method.\n     */\n\n    /** Accept any kind of component as a child element. A child should be a form element like an Input, InputArea, Dropdown or RichTextArea. */\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /** Applies a data-hook HTML attribute that can be used in tests. */\n    dataHook: PropTypes.string,\n\n    /** Adds a string used to match text labels with FormField children items. E.g.\n     *\n     * ```js\n     * <FormField id=\"myFormField\" label=\"Hello\">\n     *   <Input id=\"myFormField\"/>\n     * </FormField>\n     * ```\n     */\n    id: PropTypes.string,\n\n    /** Displays a passed info message in a tooltip. Default value is a text string, but it can also be overridden with any other component. */\n    infoContent: PropTypes.node,\n\n    /** Allows control over the tooltip style and behaviour by passed tooltip properties.\n     * @linkTypeTo components-overlays--tooltip\n     * @setTypeName TooltipCommonProps\n     */\n    infoTooltipProps: PropTypes.shape(TooltipCommonProps),\n\n    /** Sets a field label. It’s default value is a text string, but it can be overridden with any other component. */\n    label: PropTypes.node,\n\n    /** Controls the label alignment */\n    labelAlignment: PropTypes.oneOf([ALIGN.middle, ALIGN.top]),\n\n    /** Controls the label placement */\n    labelPlacement: PropTypes.oneOf([\n      PLACEMENT.top,\n      PLACEMENT.right,\n      PLACEMENT.left,\n    ]),\n\n    /** Controls the size of label */\n    labelSize: PropTypes.oneOf(['tiny', 'small']),\n\n    /** Marks a field as mandatory with an asterisk (*) at the end of a label. */\n    required: PropTypes.bool,\n\n    /** Defines whether or not the content (children container) grows when there's space available. Otherwise, it only uses the necessary space. */\n    stretchContent: PropTypes.bool,\n\n    /** Adds a custom element at the end of the label row (it overrides the charCount in case it's provided). */\n    suffix: PropTypes.node,\n\n    /** Sets the maximum length for the field value. Character count is displayed in the top right corner of a component. */\n    charCount: PropTypes.number,\n\n    /** Sets the id of the label */\n    labelId: PropTypes.string,\n\n    /** Sets the status message. It is displayed bellow the child component*/\n    statusMessage: PropTypes.node,\n\n    /** Sets the type of status message, to give it appropriate colors and icons */\n    status: PropTypes.oneOf([STATUS.error, STATUS.warning, STATUS.loading]),\n  };\n\n  static defaultProps = {\n    required: false,\n    stretchContent: true,\n    labelSize: 'small',\n    labelPlacement: PLACEMENT.top,\n    labelAlignment: ALIGN.middle,\n  };\n\n  state = {\n    lengthLeft: undefined,\n  };\n\n  childrenRenderPropInterface = {\n    setCharactersLeft: lengthLeft => this.setState({ lengthLeft }),\n  };\n\n  _renderChildren() {\n    const { children } = this.props;\n    if (typeof children === 'function') {\n      return children(this.childrenRenderPropInterface);\n    }\n\n    return children;\n  }\n\n  _hasCharCounter = () =>\n    this.props.charCount !== undefined ||\n    typeof this.state.lengthLeft === 'number';\n\n  _renderCharCounter = () => {\n    if (!this._hasCharCounter()) {\n      return;\n    }\n    const { charCount } = this.props;\n    return charactersLeft(\n      charCount !== undefined ? charCount : this.state.lengthLeft,\n    );\n  };\n\n  _renderInfoIcon = () => {\n    const { infoContent, infoTooltipProps } = this.props;\n\n    return (\n      infoContent && (\n        <InfoIcon\n          dataHook={dataHooks.infoIcon}\n          className={classes.infoIcon}\n          content={infoContent}\n          tooltipProps={infoTooltipProps}\n          size=\"small\"\n        />\n      )\n    );\n  };\n\n  _renderLabelWithIndicators = ({ labelSize }) => {\n    const { required, suffix } = this.props;\n\n    return (\n      <div\n        data-hook={dataHooks.labelIndicators}\n        className={st(classes.labelIndicators, {\n          inlineWithSuffix: Boolean(suffix || this._hasCharCounter()),\n        })}\n      >\n        {this._renderLabel({ trimLongText: false, labelSize })}\n        {required && asterisk}\n        {this._renderInfoIcon()}\n      </div>\n    );\n  };\n\n  _renderSuffix = () => {\n    const { suffix } = this.props;\n\n    return (\n      (suffix || this._hasCharCounter()) && (\n        <div\n          data-hook={dataHooks.suffix}\n          className={st(classes.suffix, {\n            noLabel:\n              !this.props.label || this.props.labelPlacement !== PLACEMENT.top,\n          })}\n        >\n          {suffix ? suffix : this._renderCharCounter()}\n        </div>\n      )\n    );\n  };\n\n  _hasInlineElements = (label, labelPlacement) => {\n    const hasInlineLabel =\n      label &&\n      (labelPlacement === PLACEMENT.left || labelPlacement === PLACEMENT.right);\n    const hasInlineIndicator =\n      !label && (this.props.required || !!this.props.infoContent);\n    return hasInlineLabel || hasInlineIndicator;\n  };\n\n  _renderLabel = ({ trimLongText, labelSize }) => {\n    const { label, id } = this.props;\n    const weight = labelSize === 'tiny' ? 'normal' : undefined;\n\n    return (\n      <Text\n        size={labelSize}\n        weight={weight}\n        htmlFor={id}\n        id={this.labelId}\n        tagName=\"label\"\n        dataHook={dataHooks.label}\n        ellipsis={trimLongText}\n        style={LABEL_STYLE}\n        secondary\n        className={classes.label}\n      >\n        {label}\n      </Text>\n    );\n  };\n\n  _renderStatusIcon = () => {\n    const iconByStatus = {\n      [STATUS.error]: StatusAlertFilledSmall,\n      [STATUS.warning]: StatusWarningFilledSmall,\n    };\n    const Icon = iconByStatus[this.props.status];\n\n    return (\n      <div className={classes.statusIcon}>\n        <Icon />\n      </div>\n    );\n  };\n\n  _renderStatusMessage = () => {\n    const { statusMessage, status, labelSize } = this.props;\n\n    return (\n      <div\n        className={st(classes.statusMessage, {\n          status,\n          labelSize,\n        })}\n      >\n        {(status === STATUS.error || status === STATUS.warning) &&\n          this._renderStatusIcon()}\n        <Text\n          id={this.statusId}\n          dataHook={dataHooks.statusMessage}\n          skin={status === STATUS.error ? 'error' : 'standard'}\n          secondary={status !== STATUS.error}\n          size={labelSize}\n        >\n          {statusMessage}\n        </Text>\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      label,\n      labelPlacement,\n      labelAlignment,\n      labelSize,\n      required,\n      dataHook,\n      children,\n      classNames,\n      stretchContent,\n      statusMessage,\n      status,\n    } = this.props;\n\n    const rootStyles = label\n      ? {\n          labelPlacement,\n          labelAlignment,\n          stretchContent,\n          required,\n          minLabelHeight: !children,\n        }\n      : {\n          stretchContent,\n          required,\n          minLabelHeight: !children,\n        };\n\n    const hasInlineElements = this._hasInlineElements(label, labelPlacement);\n\n    return (\n      <div\n        data-hook={dataHook}\n        data-status={status}\n        className={st(\n          classes.root,\n          { ...rootStyles, ...(label ? { labelSize } : {}), hasInlineElements },\n          classNames,\n        )}\n      >\n        {label && labelPlacement === PLACEMENT.top && (\n          <div className={classes.labelRow}>\n            <div className={classes.labelRowMain}>\n              {this._renderLabel({ trimLongText: true, labelSize })}\n              {required && asterisk}\n              {this._renderInfoIcon()}\n            </div>\n            {this._renderSuffix()}\n          </div>\n        )}\n\n        {children && (\n          <div\n            data-hook={dataHooks.children}\n            className={st(classes.children, {\n              childrenWithInlineLabel: hasInlineElements,\n            })}\n          >\n            {(!label || labelPlacement !== PLACEMENT.top) &&\n              this._renderSuffix()}\n\n            <StatusContext.Provider\n              value={{\n                status,\n                ariaDescribedBy: `${this.statusId}, ${this.labelId}`,\n              }}\n            >\n              {this._renderChildren()}\n            </StatusContext.Provider>\n          </div>\n        )}\n\n        {hasInlineElements && this._renderLabelWithIndicators({ labelSize })}\n\n        {statusMessage && this._renderStatusMessage()}\n      </div>\n    );\n  }\n}\n\nexport default FormField;\n"],"mappings":"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"}

package/dist/cjs/FormField/FormField.st.css

@@ -37,7 +37,7 @@
 
 .root:hasInlineElements {
   display: inline-grid;
-  align-content: center; 
+  align-content: center;
   grid-template-rows: max-content max-content;
   grid-template-columns: min-content min-content;
 }
@@ -127,6 +127,12 @@
   align-items: end;
   flex: 1 0 auto;
   max-width: 100%;
+  justify-content: space-between;
+}
+
+.labelRowMain {
+  display: flex;
+  min-width: 0;
 }
 
 .labelIndicators {
@@ -162,10 +168,17 @@
 }
 
 .suffix {
-  margin-left: auto;
+  -st-states: noLabel;
+  display: flex;
   max-width: 50%;
+  justify-content: end;
 }
 
+.suffix:noLabel {
+  max-width: 100%;
+}
+
+
 .infoIcon {
   margin-left: 3px;
 }
@@ -198,7 +211,6 @@
   overflow: hidden;
   display: flex;
   align-items: center;
-  
 }
 
 .statusIcon {

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_FormField";
+var _namespace_ = "wds_1_3_0_FormField";
 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_1_1_FormField__root","text-small-thin":"wds_1_1_1_StylableTypography__text-small-thin","text-tiny-thin":"wds_1_1_1_StylableTypography__text-tiny-thin","label":"wds_1_1_1_FormField__label","labelIndicators":"wds_1_1_1_FormField__labelIndicators","children":"wds_1_1_1_FormField__children","statusMessage":"wds_1_1_1_FormField__statusMessage","suffix":"wds_1_1_1_FormField__suffix","labelRow":"wds_1_1_1_FormField__labelRow","asterisk":"wds_1_1_1_FormField__asterisk","infoIcon":"wds_1_1_1_FormField__infoIcon","statusIcon":"wds_1_1_1_FormField__statusIcon"};
+module.exports.classes = {"root":"wds_1_3_0_FormField__root","text-small-thin":"wds_1_3_0_StylableTypography__text-small-thin","text-tiny-thin":"wds_1_3_0_StylableTypography__text-tiny-thin","label":"wds_1_3_0_FormField__label","labelIndicators":"wds_1_3_0_FormField__labelIndicators","children":"wds_1_3_0_FormField__children","statusMessage":"wds_1_3_0_FormField__statusMessage","suffix":"wds_1_3_0_FormField__suffix","labelRow":"wds_1_3_0_FormField__labelRow","labelRowMain":"wds_1_3_0_FormField__labelRowMain","asterisk":"wds_1_3_0_FormField__asterisk","infoIcon":"wds_1_3_0_FormField__infoIcon","statusIcon":"wds_1_3_0_FormField__statusIcon"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Foundation/stylable/border.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_border";
+var _namespace_ = "wds_1_3_0_border";
 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_1_1_border__root"};
+module.exports.classes = {"root":"wds_1_3_0_border__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Foundation/stylable/colors.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_FoundationColors";
+var _namespace_ = "wds_1_3_0_FoundationColors";
 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_1_1_FoundationColors__root"};
+module.exports.classes = {"root":"wds_1_3_0_FoundationColors__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Foundation/stylable/default-scroll-bar.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_defaultscrollbar";
+var _namespace_ = "wds_1_3_0_defaultscrollbar";
 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_1_1_defaultscrollbar__root","defaultScrollBar":"wds_1_1_1_defaultscrollbar__defaultScrollBar"};
+module.exports.classes = {"root":"wds_1_3_0_defaultscrollbar__root","defaultScrollBar":"wds_1_3_0_defaultscrollbar__defaultScrollBar"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Foundation/stylable/easing.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_easing";
+var _namespace_ = "wds_1_3_0_easing";
 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_1_1_easing__root"};
+module.exports.classes = {"root":"wds_1_3_0_easing__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Foundation/stylable/gradients.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_gradients";
+var _namespace_ = "wds_1_3_0_gradients";
 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_1_1_gradients__root"};
+module.exports.classes = {"root":"wds_1_3_0_gradients__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Foundation/stylable/opacity.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_opacity";
+var _namespace_ = "wds_1_3_0_opacity";
 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_1_1_opacity__root"};
+module.exports.classes = {"root":"wds_1_3_0_opacity__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Foundation/stylable/shadows.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_shadows";
+var _namespace_ = "wds_1_3_0_shadows";
 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_1_1_shadows__root"};
+module.exports.classes = {"root":"wds_1_3_0_shadows__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Foundation/stylable/spacing.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_spacing";
+var _namespace_ = "wds_1_3_0_spacing";
 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_1_1_spacing__root"};
+module.exports.classes = {"root":"wds_1_3_0_spacing__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Foundation/stylable/typography.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_StylableTypography";
+var _namespace_ = "wds_1_3_0_StylableTypography";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,12 +12,12 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_1_1_StylableTypography__root","text-tiny-thin":"wds_1_1_1_StylableTypography__text-tiny-thin","text-tiny-normal":"wds_1_1_1_StylableTypography__text-tiny-normal","text-tiny-bold":"wds_1_1_1_StylableTypography__text-tiny-bold","text-small-thin":"wds_1_1_1_StylableTypography__text-small-thin","text-small-normal":"wds_1_1_1_StylableTypography__text-small-normal","text-small-bold":"wds_1_1_1_StylableTypography__text-small-bold","text-medium-thin":"wds_1_1_1_StylableTypography__text-medium-thin","text-medium-normal":"wds_1_1_1_StylableTypography__text-medium-normal","text-medium-bold":"wds_1_1_1_StylableTypography__text-medium-bold","heading-h1":"wds_1_1_1_StylableTypography__heading-h1","heading-h2":"wds_1_1_1_StylableTypography__heading-h2","heading-h3":"wds_1_1_1_StylableTypography__heading-h3","heading-h4":"wds_1_1_1_StylableTypography__heading-h4","heading-h5":"wds_1_1_1_StylableTypography__heading-h5","heading-h6":"wds_1_1_1_StylableTypography__heading-h6","heading-xl":"wds_1_1_1_StylableTypography__heading-xl","heading-l":"wds_1_1_1_StylableTypography__heading-l","heading-m":"wds_1_1_1_StylableTypography__heading-m","heading-s":"wds_1_1_1_StylableTypography__heading-s","heading-t":"wds_1_1_1_StylableTypography__heading-t","heading-xt":"wds_1_1_1_StylableTypography__heading-xt","caption-1":"wds_1_1_1_StylableTypography__caption-1"};
+module.exports.classes = {"root":"wds_1_3_0_StylableTypography__root","text-tiny-thin":"wds_1_3_0_StylableTypography__text-tiny-thin","text-tiny-normal":"wds_1_3_0_StylableTypography__text-tiny-normal","text-tiny-bold":"wds_1_3_0_StylableTypography__text-tiny-bold","text-small-thin":"wds_1_3_0_StylableTypography__text-small-thin","text-small-normal":"wds_1_3_0_StylableTypography__text-small-normal","text-small-bold":"wds_1_3_0_StylableTypography__text-small-bold","text-medium-thin":"wds_1_3_0_StylableTypography__text-medium-thin","text-medium-normal":"wds_1_3_0_StylableTypography__text-medium-normal","text-medium-bold":"wds_1_3_0_StylableTypography__text-medium-bold","heading-h1":"wds_1_3_0_StylableTypography__heading-h1","heading-h2":"wds_1_3_0_StylableTypography__heading-h2","heading-h3":"wds_1_3_0_StylableTypography__heading-h3","heading-h4":"wds_1_3_0_StylableTypography__heading-h4","heading-h5":"wds_1_3_0_StylableTypography__heading-h5","heading-h6":"wds_1_3_0_StylableTypography__heading-h6","heading-xl":"wds_1_3_0_StylableTypography__heading-xl","heading-l":"wds_1_3_0_StylableTypography__heading-l","heading-m":"wds_1_3_0_StylableTypography__heading-m","heading-s":"wds_1_3_0_StylableTypography__heading-s","heading-t":"wds_1_3_0_StylableTypography__heading-t","heading-xt":"wds_1_3_0_StylableTypography__heading-xt","caption-1":"wds_1_3_0_StylableTypography__caption-1"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {"wsr-font-family":"Madefor,\"Helvetica Neue\",Helvetica,Arial,\"メイリオ\",\"meiryo\",\"ヒラギノ角ゴ pro w3\",\"hiragino kaku gothic pro\", sans-serif","wsr-font-weight-regular":"400","wsr-font-weight-medium":"530","wsr-font-weight-bold":"700","wsr-text-font-size-tiny":"12px","wsr-text-font-size-small":"14px","wsr-text-font-size-medium":"16px","wsr-text-line-height-tiny":"15px","wsr-text-line-height-small":"18px","wsr-text-line-height-medium":"24px","wsr-heading-font-size-h1":"32px","wsr-heading-font-size-h2":"24px","wsr-heading-font-size-h3":"20px","wsr-heading-font-size-h4":"18px","wsr-heading-font-size-h5":"12px","wsr-heading-font-size-h6":"10px","wsr-heading-font-size-xl":"28px","wsr-heading-font-size-l":"21px","wsr-heading-font-size-m":"18px","wsr-heading-font-size-s":"18px","wsr-heading-font-size-t":"15px","wsr-heading-font-size-xt":"12px","wsr-heading-line-height-h1":"42px","wsr-heading-line-height-h2":"30px","wsr-heading-line-height-h3":"24px","wsr-heading-line-height-h4":"24px","wsr-heading-line-height-h5":"24px","wsr-heading-line-height-h6":"18px","wsr-heading-line-height-xl":"36px","wsr-heading-line-height-l":"28px","wsr-heading-line-height-m":"24px","wsr-heading-line-height-s":"24px","wsr-heading-line-height-t":"24px","wsr-heading-line-height-xt":"15px","wsr-caption-font-size-1":"10px","wsr-caption-line-height-1":"12px"}; 
-module.exports.vars = {"wsr-font-family":"--wds_1_1_1_typography-wsr-font-family","wsr-font-weight-regular":"--wds_1_1_1_typography-wsr-font-weight-regular","wsr-font-weight-medium":"--wds_1_1_1_typography-wsr-font-weight-medium","wsr-font-weight-bold":"--wds_1_1_1_typography-wsr-font-weight-bold","wsr-text-font-size-tiny":"--wds_1_1_1_typography-wsr-text-font-size-tiny","wsr-text-font-size-small":"--wds_1_1_1_typography-wsr-text-font-size-small","wsr-text-font-size-medium":"--wds_1_1_1_typography-wsr-text-font-size-medium","wsr-text-line-height-tiny":"--wds_1_1_1_typography-wsr-text-line-height-tiny","wsr-text-line-height-small":"--wds_1_1_1_typography-wsr-text-line-height-small","wsr-text-line-height-medium":"--wds_1_1_1_typography-wsr-text-line-height-medium","wsr-heading-font-size-h1":"--wds_1_1_1_typography-wsr-heading-font-size-h1","wsr-heading-font-size-h2":"--wds_1_1_1_typography-wsr-heading-font-size-h2","wsr-heading-font-size-h3":"--wds_1_1_1_typography-wsr-heading-font-size-h3","wsr-heading-font-size-h4":"--wds_1_1_1_typography-wsr-heading-font-size-h4","wsr-heading-font-size-h5":"--wds_1_1_1_typography-wsr-heading-font-size-h5","wsr-heading-font-size-h6":"--wds_1_1_1_typography-wsr-heading-font-size-h6","wsr-heading-line-height-h1":"--wds_1_1_1_typography-wsr-heading-line-height-h1","wsr-heading-line-height-h2":"--wds_1_1_1_typography-wsr-heading-line-height-h2","wsr-heading-line-height-h3":"--wds_1_1_1_typography-wsr-heading-line-height-h3","wsr-heading-line-height-h4":"--wds_1_1_1_typography-wsr-heading-line-height-h4","wsr-heading-line-height-h5":"--wds_1_1_1_typography-wsr-heading-line-height-h5","wsr-heading-line-height-h6":"--wds_1_1_1_typography-wsr-heading-line-height-h6","wsr-caption-font-size-1":"--wds_1_1_1_typography-wsr-caption-font-size-1","wsr-caption-line-height-1":"--wds_1_1_1_typography-wsr-caption-line-height-1","wsr-heading-font-size-xl":"--wds_1_1_1_typography-wsr-heading-font-size-xl","wsr-heading-font-size-l":"--wds_1_1_1_typography-wsr-heading-font-size-l","wsr-heading-font-size-m":"--wds_1_1_1_typography-wsr-heading-font-size-m","wsr-heading-font-size-s":"--wds_1_1_1_typography-wsr-heading-font-size-s","wsr-heading-font-size-t":"--wds_1_1_1_typography-wsr-heading-font-size-t","wsr-heading-font-size-xt":"--wds_1_1_1_typography-wsr-heading-font-size-xt","wsr-heading-line-height-xl":"--wds_1_1_1_typography-wsr-heading-line-height-xl","wsr-heading-line-height-l":"--wds_1_1_1_typography-wsr-heading-line-height-l","wsr-heading-line-height-m":"--wds_1_1_1_typography-wsr-heading-line-height-m","wsr-heading-line-height-s":"--wds_1_1_1_typography-wsr-heading-line-height-s","wsr-heading-line-height-t":"--wds_1_1_1_typography-wsr-heading-line-height-t","wsr-heading-line-height-xt":"--wds_1_1_1_typography-wsr-heading-line-height-xt"}; 
+module.exports.vars = {"wsr-font-family":"--wds_1_3_0_typography-wsr-font-family","wsr-font-weight-regular":"--wds_1_3_0_typography-wsr-font-weight-regular","wsr-font-weight-medium":"--wds_1_3_0_typography-wsr-font-weight-medium","wsr-font-weight-bold":"--wds_1_3_0_typography-wsr-font-weight-bold","wsr-text-font-size-tiny":"--wds_1_3_0_typography-wsr-text-font-size-tiny","wsr-text-font-size-small":"--wds_1_3_0_typography-wsr-text-font-size-small","wsr-text-font-size-medium":"--wds_1_3_0_typography-wsr-text-font-size-medium","wsr-text-line-height-tiny":"--wds_1_3_0_typography-wsr-text-line-height-tiny","wsr-text-line-height-small":"--wds_1_3_0_typography-wsr-text-line-height-small","wsr-text-line-height-medium":"--wds_1_3_0_typography-wsr-text-line-height-medium","wsr-heading-font-size-h1":"--wds_1_3_0_typography-wsr-heading-font-size-h1","wsr-heading-font-size-h2":"--wds_1_3_0_typography-wsr-heading-font-size-h2","wsr-heading-font-size-h3":"--wds_1_3_0_typography-wsr-heading-font-size-h3","wsr-heading-font-size-h4":"--wds_1_3_0_typography-wsr-heading-font-size-h4","wsr-heading-font-size-h5":"--wds_1_3_0_typography-wsr-heading-font-size-h5","wsr-heading-font-size-h6":"--wds_1_3_0_typography-wsr-heading-font-size-h6","wsr-heading-line-height-h1":"--wds_1_3_0_typography-wsr-heading-line-height-h1","wsr-heading-line-height-h2":"--wds_1_3_0_typography-wsr-heading-line-height-h2","wsr-heading-line-height-h3":"--wds_1_3_0_typography-wsr-heading-line-height-h3","wsr-heading-line-height-h4":"--wds_1_3_0_typography-wsr-heading-line-height-h4","wsr-heading-line-height-h5":"--wds_1_3_0_typography-wsr-heading-line-height-h5","wsr-heading-line-height-h6":"--wds_1_3_0_typography-wsr-heading-line-height-h6","wsr-caption-font-size-1":"--wds_1_3_0_typography-wsr-caption-font-size-1","wsr-caption-line-height-1":"--wds_1_3_0_typography-wsr-caption-line-height-1","wsr-heading-font-size-xl":"--wds_1_3_0_typography-wsr-heading-font-size-xl","wsr-heading-font-size-l":"--wds_1_3_0_typography-wsr-heading-font-size-l","wsr-heading-font-size-m":"--wds_1_3_0_typography-wsr-heading-font-size-m","wsr-heading-font-size-s":"--wds_1_3_0_typography-wsr-heading-font-size-s","wsr-heading-font-size-t":"--wds_1_3_0_typography-wsr-heading-font-size-t","wsr-heading-font-size-xt":"--wds_1_3_0_typography-wsr-heading-font-size-xt","wsr-heading-line-height-xl":"--wds_1_3_0_typography-wsr-heading-line-height-xl","wsr-heading-line-height-l":"--wds_1_3_0_typography-wsr-heading-line-height-l","wsr-heading-line-height-m":"--wds_1_3_0_typography-wsr-heading-line-height-m","wsr-heading-line-height-s":"--wds_1_3_0_typography-wsr-heading-line-height-s","wsr-heading-line-height-t":"--wds_1_3_0_typography-wsr-heading-line-height-t","wsr-heading-line-height-xt":"--wds_1_3_0_typography-wsr-heading-line-height-xt"}; 
 
 
 

package/dist/cjs/Foundation/stylable/z-index.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_zindex";
+var _namespace_ = "wds_1_3_0_zindex";
 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_1_1_zindex__root"};
+module.exports.classes = {"root":"wds_1_3_0_zindex__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelBadge/FunnelBadge.st.css.js

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_FunnelBadge";
+var _namespace_ = "wds_1_3_0_FunnelBadge";
 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_1_1_FunnelBadge__root","badge":"wds_1_1_1_FunnelBadge__badge","badgeContent":"wds_1_1_1_FunnelBadge__badgeContent","badgeText":"wds_1_1_1_FunnelBadge__badgeText"};
+module.exports.classes = {"root":"wds_1_3_0_FunnelBadge__root","badge":"wds_1_3_0_FunnelBadge__badge","badgeContent":"wds_1_3_0_FunnelBadge__badgeContent","badgeText":"wds_1_3_0_FunnelBadge__badgeText"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelBar/FunnelBar.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_FunnelBar";
+var _namespace_ = "wds_1_3_0_FunnelBar";
 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_1_1_FunnelBar__root","filledBar":"wds_1_1_1_FunnelBar__filledBar"};
+module.exports.classes = {"root":"wds_1_3_0_FunnelBar__root","filledBar":"wds_1_3_0_FunnelBar__filledBar"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_FunnelChart";
+var _namespace_ = "wds_1_3_0_FunnelChart";
 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_1_1_FunnelChart__root","funnel":"wds_1_1_1_FunnelChart__funnel","labels":"wds_1_1_1_FunnelChart__labels","labelWrapper":"wds_1_1_1_FunnelChart__labelWrapper"};
+module.exports.classes = {"root":"wds_1_3_0_FunnelChart__root","funnel":"wds_1_3_0_FunnelChart__funnel","labels":"wds_1_3_0_FunnelChart__labels","labelWrapper":"wds_1_3_0_FunnelChart__labelWrapper"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelLabel/FunnelLabel.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_FunnelLabel";
+var _namespace_ = "wds_1_3_0_FunnelLabel";
 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_1_1_FunnelLabel__root"};
+module.exports.classes = {"root":"wds_1_3_0_FunnelLabel__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelStep/FunnelStep.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_FunnelStep";
+var _namespace_ = "wds_1_3_0_FunnelStep";
 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_1_1_FunnelStep__root","funnelStepRotated":"wds_1_1_1_FunnelStep__funnelStepRotated","funnelStep":"wds_1_1_1_FunnelStep__funnelStep","funnelStepPlaceholder":"wds_1_1_1_FunnelStep__funnelStepPlaceholder","badgeWrapper":"wds_1_1_1_FunnelStep__badgeWrapper"};
+module.exports.classes = {"root":"wds_1_3_0_FunnelStep__root","funnelStepRotated":"wds_1_3_0_FunnelStep__funnelStepRotated","funnelStep":"wds_1_3_0_FunnelStep__funnelStep","funnelStepPlaceholder":"wds_1_3_0_FunnelStep__funnelStepPlaceholder","badgeWrapper":"wds_1_3_0_FunnelStep__badgeWrapper"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_GoogleAddressInput";
+var _namespace_ = "wds_1_3_0_GoogleAddressInput";
 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_1_1_GoogleAddressInput__root","googleFooter":"wds_1_1_1_GoogleAddressInput__googleFooter"};
+module.exports.classes = {"root":"wds_1_3_0_GoogleAddressInput__root","googleFooter":"wds_1_3_0_GoogleAddressInput__googleFooter"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_GooglePreview";
+var _namespace_ = "wds_1_3_0_GooglePreview";
 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_1_1_GooglePreview__root","googlePreviewTitle":"wds_1_1_1_GooglePreview__googlePreviewTitle","googlePreviewUrl":"wds_1_1_1_GooglePreview__googlePreviewUrl","googlePreviewDescription":"wds_1_1_1_GooglePreview__googlePreviewDescription"};
+module.exports.classes = {"root":"wds_1_3_0_GooglePreview__root","googlePreviewTitle":"wds_1_3_0_GooglePreview__googlePreviewTitle","googlePreviewUrl":"wds_1_3_0_GooglePreview__googlePreviewUrl","googlePreviewDescription":"wds_1_3_0_GooglePreview__googlePreviewDescription"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};