@wix/design-system 1.1.1 → 1.3.0

package/dist/cjs/MediaOverlay/MediaOverlay.js

@@ -51,13 +51,14 @@ class MediaOverlay extends _react.default.PureComponent {
       var {
         onClick,
         focusableOnFocus,
-        focusableOnBlur
+        focusableOnBlur,
+        ariaHidden
       } = this.props;
       if (onClick) {
         return {
           onFocus: focusableOnFocus,
           onBlur: focusableOnBlur,
-          tabIndex: 0
+          tabIndex: ariaHidden ? -1 : 0
         };
       }
       return {
@@ -106,7 +107,7 @@ class MediaOverlay extends _react.default.PureComponent {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 162,
+          lineNumber: 166,
           columnNumber: 7
         }
       }, this._renderContent(layer));
@@ -134,7 +135,7 @@ class MediaOverlay extends _react.default.PureComponent {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 188,
+          lineNumber: 192,
           columnNumber: 7
         }
       }), this._renderOverlay(layer, skin));
@@ -160,7 +161,7 @@ class MediaOverlay extends _react.default.PureComponent {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 206,
+            lineNumber: 210,
             columnNumber: 7
           }
         }, /*#__PURE__*/_react.default.createElement("div", {
@@ -171,7 +172,7 @@ class MediaOverlay extends _react.default.PureComponent {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 213,
+            lineNumber: 217,
             columnNumber: 9
           }
         }, props.children));
@@ -186,11 +187,13 @@ class MediaOverlay extends _react.default.PureComponent {
       onClick,
       removeRoundedBorders,
       className,
-      borderRadius
+      borderRadius,
+      ariaHidden
     } = this.props;
     var isMediaImageUrl = typeof media === 'string';
     var Component = onClick ? 'button' : 'div';
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+      "aria-hidden": ariaHidden,
       "data-hook": dataHook,
       onMouseEnter: this._onMouseEnter,
       onMouseLeave: this._onMouseLeave,
@@ -209,7 +212,7 @@ class MediaOverlay extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 237,
+        lineNumber: 242,
         columnNumber: 7
       }
     }), !isMediaImageUrl && /*#__PURE__*/_react.default.isValidElement(media) && media, this._renderSingleSkinLayer(), this._renderDefaultLayer(), this._renderHoverLayer(), this._renderTopLayer());
@@ -249,7 +252,9 @@ MediaOverlay.propTypes = {
   /** Removes a default borders radius. */
   removeRoundedBorders: _propTypes.default.bool,
   /** Control border radius of the media container. */
-  borderRadius: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  borderRadius: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  /** Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. */
+  ariaHidden: _propTypes.default.bool
 };
 MediaOverlay.defaultProps = {
   skin: 'none'

package/dist/cjs/MediaOverlay/MediaOverlay.js.map

@@ -1 +1 @@
-{"version":3,"names":["layerToVisiblePropMap","Layer","Default","Visible","Hover","Top","Always","placementToRowAlignment","Placement","TopStart","TopEnd","Middle","BottomStart","BottomEnd","MediaOverlay","React","PureComponent","state","isHovered","_onMouseEnter","props","hovered","undefined","setState","_onMouseLeave","_getFocusProps","onClick","focusableOnFocus","focusableOnBlur","onFocus","onBlur","tabIndex","_getHoverSkin","skin","hoverSkin","_hasSingleSkin","_filterContent","layer","children","contentElements","Children","map","child","filterProps","visible","filter","isValidElement","type","displayName","Content","Object","keys","every","prop","_isContentEmpty","length","_renderDefaultLayer","Skin","None","_renderTransitionOverlay","_renderHoverLayer","_renderTopLayer","_renderOverlay","_renderSingleSkinLayer","SingleSkin","_shouldRenderOverlay","st","classes","overlay","_renderContent","mountOnEnter","transitionProps","in","timeout","unmountOnExit","classNames","enter","hoverEnter","enterActive","hoverEnterActive","enterDone","hoverEnterDone","exit","hoverExit","index","contentRow","placement","row","contentArea","render","dataHook","media","removeRoundedBorders","className","borderRadius","isMediaImageUrl","Component","root","clickable","removeRadius","backgroundImage","DragHandle","propTypes","PropTypes","string","oneOf","node","isRequired","func","bool","oneOfType","number","defaultProps","withFocusable"],"sources":["../../../src/MediaOverlay/MediaOverlay.js"],"sourcesContent":["import React from 'react';\nimport CSSTransition from 'react-transition-group/CSSTransition';\nimport PropTypes from 'prop-types';\nimport { withFocusable } from '../common/Focusable';\n\nimport Content from './Content';\nimport DragHandle from './DragHandle';\nimport { Layer, Skin, Placement, Visible } from './constants';\nimport { st, classes } from './MediaOverlay.st.css';\n\nconst layerToVisiblePropMap = {\n  [Layer.Default]: Visible.Default,\n  [Layer.Hover]: Visible.Hover,\n  [Layer.Top]: Visible.Always,\n};\n\nconst placementToRowAlignment = {\n  [Placement.TopStart]: 'top',\n  [Placement.TopEnd]: 'top',\n  [Placement.Middle]: 'middle',\n  [Placement.BottomStart]: 'bottom',\n  [Placement.BottomEnd]: 'bottom',\n};\n\n/** MediaOverlay */\nclass MediaOverlay extends React.PureComponent {\n  static displayName = 'MediaOverlay';\n  static Content = Content;\n  static DragHandle = DragHandle;\n\n  static propTypes = {\n    /** Applies a data-hook HTML attribute that can be used in the tests. */\n    dataHook: PropTypes.string,\n\n    /** Specifies a CSS class name to be appended to the component’s root element. */\n    className: PropTypes.string,\n\n    /** Sets a default overlay skin. */\n    skin: PropTypes.oneOf(['none', 'gradient', 'dark']),\n\n    /** Sets a hover overlay skin. */\n    hoverSkin: PropTypes.oneOf(['none', 'gradient', 'dark']),\n\n    /** Accept image URL or a custom node as a media background. */\n    media: PropTypes.node.isRequired,\n\n    /**\n     * Defines a click handler. When provided, component will be clickable and will have a pointer cursor on hover.\n     */\n    onClick: PropTypes.func,\n\n    /**\n     * Accepts any component as `<MediaOverlay.Content>` content.\n     * Each element has the following properties:\n     * - `visible` - define when to display this content. Possible values are:\n     *   - `default` (default) - content is visible only when not hovered.\n     *   - `hover` - content is visible only when hovered.\n     *   - `always` - content is always visible.\n     * - `placement` - define where to place this content. Possible values are `top-start`,\n     * `top-end`, `middle` (default), `bottom-end` and `bottom-start`.\n     */\n    children: PropTypes.node,\n\n    /** Toggles hover state in a controlled mode. */\n    hovered: PropTypes.bool,\n\n    /** Removes a default borders radius. */\n    removeRoundedBorders: PropTypes.bool,\n\n    /** Control border radius of the media container. */\n    borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  };\n\n  static defaultProps = {\n    skin: 'none',\n  };\n\n  state = {\n    isHovered: false,\n  };\n\n  _onMouseEnter = () => {\n    if (this.props.hovered === undefined) {\n      this.setState({ isHovered: true });\n    }\n  };\n\n  _onMouseLeave = () => {\n    if (this.props.hovered === undefined) {\n      this.setState({ isHovered: false });\n    }\n  };\n\n  _getFocusProps = () => {\n    const { onClick, focusableOnFocus, focusableOnBlur } = this.props;\n\n    if (onClick) {\n      return {\n        onFocus: focusableOnFocus,\n        onBlur: focusableOnBlur,\n        tabIndex: 0,\n      };\n    }\n\n    return { tabIndex: -1 };\n  };\n\n  _getHoverSkin = () => {\n    const { skin, hoverSkin } = this.props;\n    return hoverSkin || skin; // hoverSkin defaults to skin prop value if not provided\n  };\n\n  _hasSingleSkin = () => this.props.skin === this._getHoverSkin();\n\n  _filterContent = layer => {\n    const { children } = this.props;\n    const contentElements = React.Children.map(children, child => child) || [];\n    const filterProps = { visible: layerToVisiblePropMap[layer] };\n\n    return contentElements.filter(\n      child =>\n        React.isValidElement(child) &&\n        child.type.displayName === Content.displayName &&\n        Object.keys(filterProps).every(\n          prop => filterProps[prop] === child.props[prop],\n        ),\n    );\n  };\n\n  _isContentEmpty = layer => !this._filterContent(layer).length;\n\n  _renderDefaultLayer = () => {\n    const skin = this._hasSingleSkin() ? Skin.None : this.props.skin;\n    return this._renderTransitionOverlay(Layer.Default, skin, false);\n  };\n\n  _renderHoverLayer = () => {\n    const skin = this._hasSingleSkin() ? Skin.None : this._getHoverSkin();\n    return this._renderTransitionOverlay(Layer.Hover, skin, true);\n  };\n\n  _renderTopLayer = () => this._renderOverlay(Layer.Top, Skin.None);\n\n  // When both skins for default and hover layers are the same - we don't want to\n  // animate them with opacity transition as this will produce an undesired effect\n  // (but we still want to animate all the content inside an overlay layer). As a\n  // workaround we create this background layer that has no content or animations\n  // and will render here only the common skin background.\n  _renderSingleSkinLayer = () =>\n    this._hasSingleSkin() &&\n    this._renderOverlay(Layer.SingleSkin, this.props.skin);\n\n  _shouldRenderOverlay = (layer, skin) =>\n    skin !== Skin.None || !this._isContentEmpty(layer);\n\n  _renderOverlay = (layer, skin) => {\n    if (!this._shouldRenderOverlay(layer, skin)) {\n      return;\n    }\n\n    return (\n      <div className={st(classes.overlay, { layer, skin })}>\n        {this._renderContent(layer)}\n      </div>\n    );\n  };\n\n  _renderTransitionOverlay = (layer, skin, mountOnEnter) => {\n    if (!this._shouldRenderOverlay(layer, skin)) {\n      return;\n    }\n\n    const { hovered } = this.props;\n    const transitionProps = {\n      in: hovered !== undefined ? hovered : this.state.isHovered,\n      timeout: 200,\n      mountOnEnter,\n      unmountOnExit: mountOnEnter,\n      classNames: {\n        enter: classes.hoverEnter,\n        enterActive: classes.hoverEnterActive,\n        enterDone: classes.hoverEnterDone,\n        exit: classes.hoverExit,\n      },\n    };\n\n    return (\n      <CSSTransition {...transitionProps}>\n        {this._renderOverlay(layer, skin)}\n      </CSSTransition>\n    );\n  };\n\n  _renderContent = layer => {\n    if (this._isContentEmpty(layer)) {\n      return;\n    }\n\n    const contentElements = this._filterContent(layer);\n\n    if (!contentElements.length) {\n      return;\n    }\n\n    return contentElements.map(({ props }, index) => (\n      <div\n        key={index}\n        className={st(classes.contentRow, {\n          placement: props.placement,\n          row: placementToRowAlignment[props.placement],\n        })}\n      >\n        <div\n          className={st(classes.contentArea, { placement: props.placement })}\n          data-hook=\"content-area\"\n        >\n          {props.children}\n        </div>\n      </div>\n    ));\n  };\n\n  render() {\n    const {\n      dataHook,\n      skin,\n      media,\n      onClick,\n      removeRoundedBorders,\n      className,\n      borderRadius,\n    } = this.props;\n    const isMediaImageUrl = typeof media === 'string';\n    const Component = onClick ? 'button' : 'div';\n\n    return (\n      <Component\n        data-hook={dataHook}\n        onMouseEnter={this._onMouseEnter}\n        onMouseLeave={this._onMouseLeave}\n        onClick={onClick}\n        {...this._getFocusProps()}\n        className={st(\n          classes.root,\n          { clickable: !!onClick, removeRadius: removeRoundedBorders },\n          className,\n        )}\n        data-skin={skin}\n        data-hoverskin={this._getHoverSkin()}\n        style={{\n          backgroundImage: isMediaImageUrl && `url(${media})`,\n          borderRadius,\n        }}\n      >\n        {!isMediaImageUrl && React.isValidElement(media) && media}\n        {this._renderSingleSkinLayer()}\n        {this._renderDefaultLayer()}\n        {this._renderHoverLayer()}\n        {this._renderTopLayer()}\n      </Component>\n    );\n  }\n}\n\nexport default withFocusable(MediaOverlay);\n"],"mappings":"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"}
+{"version":3,"names":["layerToVisiblePropMap","Layer","Default","Visible","Hover","Top","Always","placementToRowAlignment","Placement","TopStart","TopEnd","Middle","BottomStart","BottomEnd","MediaOverlay","React","PureComponent","state","isHovered","_onMouseEnter","props","hovered","undefined","setState","_onMouseLeave","_getFocusProps","onClick","focusableOnFocus","focusableOnBlur","ariaHidden","onFocus","onBlur","tabIndex","_getHoverSkin","skin","hoverSkin","_hasSingleSkin","_filterContent","layer","children","contentElements","Children","map","child","filterProps","visible","filter","isValidElement","type","displayName","Content","Object","keys","every","prop","_isContentEmpty","length","_renderDefaultLayer","Skin","None","_renderTransitionOverlay","_renderHoverLayer","_renderTopLayer","_renderOverlay","_renderSingleSkinLayer","SingleSkin","_shouldRenderOverlay","st","classes","overlay","_renderContent","mountOnEnter","transitionProps","in","timeout","unmountOnExit","classNames","enter","hoverEnter","enterActive","hoverEnterActive","enterDone","hoverEnterDone","exit","hoverExit","index","contentRow","placement","row","contentArea","render","dataHook","media","removeRoundedBorders","className","borderRadius","isMediaImageUrl","Component","root","clickable","removeRadius","backgroundImage","DragHandle","propTypes","PropTypes","string","oneOf","node","isRequired","func","bool","oneOfType","number","defaultProps","withFocusable"],"sources":["../../../src/MediaOverlay/MediaOverlay.js"],"sourcesContent":["import React from 'react';\nimport CSSTransition from 'react-transition-group/CSSTransition';\nimport PropTypes from 'prop-types';\nimport { withFocusable } from '../common/Focusable';\n\nimport Content from './Content';\nimport DragHandle from './DragHandle';\nimport { Layer, Skin, Placement, Visible } from './constants';\nimport { st, classes } from './MediaOverlay.st.css';\n\nconst layerToVisiblePropMap = {\n  [Layer.Default]: Visible.Default,\n  [Layer.Hover]: Visible.Hover,\n  [Layer.Top]: Visible.Always,\n};\n\nconst placementToRowAlignment = {\n  [Placement.TopStart]: 'top',\n  [Placement.TopEnd]: 'top',\n  [Placement.Middle]: 'middle',\n  [Placement.BottomStart]: 'bottom',\n  [Placement.BottomEnd]: 'bottom',\n};\n\n/** MediaOverlay */\nclass MediaOverlay extends React.PureComponent {\n  static displayName = 'MediaOverlay';\n  static Content = Content;\n  static DragHandle = DragHandle;\n\n  static propTypes = {\n    /** Applies a data-hook HTML attribute that can be used in the tests. */\n    dataHook: PropTypes.string,\n\n    /** Specifies a CSS class name to be appended to the component’s root element. */\n    className: PropTypes.string,\n\n    /** Sets a default overlay skin. */\n    skin: PropTypes.oneOf(['none', 'gradient', 'dark']),\n\n    /** Sets a hover overlay skin. */\n    hoverSkin: PropTypes.oneOf(['none', 'gradient', 'dark']),\n\n    /** Accept image URL or a custom node as a media background. */\n    media: PropTypes.node.isRequired,\n\n    /**\n     * Defines a click handler. When provided, component will be clickable and will have a pointer cursor on hover.\n     */\n    onClick: PropTypes.func,\n\n    /**\n     * Accepts any component as `<MediaOverlay.Content>` content.\n     * Each element has the following properties:\n     * - `visible` - define when to display this content. Possible values are:\n     *   - `default` (default) - content is visible only when not hovered.\n     *   - `hover` - content is visible only when hovered.\n     *   - `always` - content is always visible.\n     * - `placement` - define where to place this content. Possible values are `top-start`,\n     * `top-end`, `middle` (default), `bottom-end` and `bottom-start`.\n     */\n    children: PropTypes.node,\n\n    /** Toggles hover state in a controlled mode. */\n    hovered: PropTypes.bool,\n\n    /** Removes a default borders radius. */\n    removeRoundedBorders: PropTypes.bool,\n\n    /** Control border radius of the media container. */\n    borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n    /** Adding aria-hidden=\"true\" to an element removes that element and all of its children from the accessibility tree. */\n    ariaHidden: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    skin: 'none',\n  };\n\n  state = {\n    isHovered: false,\n  };\n\n  _onMouseEnter = () => {\n    if (this.props.hovered === undefined) {\n      this.setState({ isHovered: true });\n    }\n  };\n\n  _onMouseLeave = () => {\n    if (this.props.hovered === undefined) {\n      this.setState({ isHovered: false });\n    }\n  };\n\n  _getFocusProps = () => {\n    const { onClick, focusableOnFocus, focusableOnBlur, ariaHidden } =\n      this.props;\n\n    if (onClick) {\n      return {\n        onFocus: focusableOnFocus,\n        onBlur: focusableOnBlur,\n        tabIndex: ariaHidden ? -1 : 0,\n      };\n    }\n\n    return { tabIndex: -1 };\n  };\n\n  _getHoverSkin = () => {\n    const { skin, hoverSkin } = this.props;\n    return hoverSkin || skin; // hoverSkin defaults to skin prop value if not provided\n  };\n\n  _hasSingleSkin = () => this.props.skin === this._getHoverSkin();\n\n  _filterContent = layer => {\n    const { children } = this.props;\n    const contentElements = React.Children.map(children, child => child) || [];\n    const filterProps = { visible: layerToVisiblePropMap[layer] };\n\n    return contentElements.filter(\n      child =>\n        React.isValidElement(child) &&\n        child.type.displayName === Content.displayName &&\n        Object.keys(filterProps).every(\n          prop => filterProps[prop] === child.props[prop],\n        ),\n    );\n  };\n\n  _isContentEmpty = layer => !this._filterContent(layer).length;\n\n  _renderDefaultLayer = () => {\n    const skin = this._hasSingleSkin() ? Skin.None : this.props.skin;\n    return this._renderTransitionOverlay(Layer.Default, skin, false);\n  };\n\n  _renderHoverLayer = () => {\n    const skin = this._hasSingleSkin() ? Skin.None : this._getHoverSkin();\n    return this._renderTransitionOverlay(Layer.Hover, skin, true);\n  };\n\n  _renderTopLayer = () => this._renderOverlay(Layer.Top, Skin.None);\n\n  // When both skins for default and hover layers are the same - we don't want to\n  // animate them with opacity transition as this will produce an undesired effect\n  // (but we still want to animate all the content inside an overlay layer). As a\n  // workaround we create this background layer that has no content or animations\n  // and will render here only the common skin background.\n  _renderSingleSkinLayer = () =>\n    this._hasSingleSkin() &&\n    this._renderOverlay(Layer.SingleSkin, this.props.skin);\n\n  _shouldRenderOverlay = (layer, skin) =>\n    skin !== Skin.None || !this._isContentEmpty(layer);\n\n  _renderOverlay = (layer, skin) => {\n    if (!this._shouldRenderOverlay(layer, skin)) {\n      return;\n    }\n\n    return (\n      <div className={st(classes.overlay, { layer, skin })}>\n        {this._renderContent(layer)}\n      </div>\n    );\n  };\n\n  _renderTransitionOverlay = (layer, skin, mountOnEnter) => {\n    if (!this._shouldRenderOverlay(layer, skin)) {\n      return;\n    }\n\n    const { hovered } = this.props;\n    const transitionProps = {\n      in: hovered !== undefined ? hovered : this.state.isHovered,\n      timeout: 200,\n      mountOnEnter,\n      unmountOnExit: mountOnEnter,\n      classNames: {\n        enter: classes.hoverEnter,\n        enterActive: classes.hoverEnterActive,\n        enterDone: classes.hoverEnterDone,\n        exit: classes.hoverExit,\n      },\n    };\n\n    return (\n      <CSSTransition {...transitionProps}>\n        {this._renderOverlay(layer, skin)}\n      </CSSTransition>\n    );\n  };\n\n  _renderContent = layer => {\n    if (this._isContentEmpty(layer)) {\n      return;\n    }\n\n    const contentElements = this._filterContent(layer);\n\n    if (!contentElements.length) {\n      return;\n    }\n\n    return contentElements.map(({ props }, index) => (\n      <div\n        key={index}\n        className={st(classes.contentRow, {\n          placement: props.placement,\n          row: placementToRowAlignment[props.placement],\n        })}\n      >\n        <div\n          className={st(classes.contentArea, { placement: props.placement })}\n          data-hook=\"content-area\"\n        >\n          {props.children}\n        </div>\n      </div>\n    ));\n  };\n\n  render() {\n    const {\n      dataHook,\n      skin,\n      media,\n      onClick,\n      removeRoundedBorders,\n      className,\n      borderRadius,\n      ariaHidden,\n    } = this.props;\n    const isMediaImageUrl = typeof media === 'string';\n    const Component = onClick ? 'button' : 'div';\n\n    return (\n      <Component\n        aria-hidden={ariaHidden}\n        data-hook={dataHook}\n        onMouseEnter={this._onMouseEnter}\n        onMouseLeave={this._onMouseLeave}\n        onClick={onClick}\n        {...this._getFocusProps()}\n        className={st(\n          classes.root,\n          { clickable: !!onClick, removeRadius: removeRoundedBorders },\n          className,\n        )}\n        data-skin={skin}\n        data-hoverskin={this._getHoverSkin()}\n        style={{\n          backgroundImage: isMediaImageUrl && `url(${media})`,\n          borderRadius,\n        }}\n      >\n        {!isMediaImageUrl && React.isValidElement(media) && media}\n        {this._renderSingleSkinLayer()}\n        {this._renderDefaultLayer()}\n        {this._renderHoverLayer()}\n        {this._renderTopLayer()}\n      </Component>\n    );\n  }\n}\n\nexport default withFocusable(MediaOverlay);\n"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_MediaOverlay";
+var _namespace_ = "wds_1_3_0_MediaOverlay";
 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_1_1_MediaOverlay__root","overlay":"wds_1_1_1_MediaOverlay__overlay","contentRow":"wds_1_1_1_MediaOverlay__contentRow","contentArea":"wds_1_1_1_MediaOverlay__contentArea","hoverEnter":"wds_1_1_1_MediaOverlay__hoverEnter","hoverEnterActive":"wds_1_1_1_MediaOverlay__hoverEnterActive","hoverEnterDone":"wds_1_1_1_MediaOverlay__hoverEnterDone","hoverExit":"wds_1_1_1_MediaOverlay__hoverExit"};
+module.exports.classes = {"root":"wds_1_3_0_MediaOverlay__root","overlay":"wds_1_3_0_MediaOverlay__overlay","contentRow":"wds_1_3_0_MediaOverlay__contentRow","contentArea":"wds_1_3_0_MediaOverlay__contentArea","hoverEnter":"wds_1_3_0_MediaOverlay__hoverEnter","hoverEnterActive":"wds_1_3_0_MediaOverlay__hoverEnterActive","hoverEnterDone":"wds_1_3_0_MediaOverlay__hoverEnterDone","hoverExit":"wds_1_3_0_MediaOverlay__hoverExit"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/MediaOverlay/index.d.js.map

@@ -1 +1 @@
-{"version":3,"names":["MediaOverlay","React","PureComponent","Content","DragHandle"],"sources":["../../../src/MediaOverlay/index.d.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MediaOverlaySkin = 'none' | 'gradient' | 'dark';\n\nexport interface MediaOverlayProps {\n  children?: React.ReactNode;\n  media: React.ReactNode;\n  skin?: MediaOverlaySkin;\n  hoverSkin?: MediaOverlaySkin;\n  dataHook?: string;\n  hovered?: boolean;\n  onClick?(): void;\n  removeRoundedBorders?: boolean;\n  className?: string;\n  borderRadius?: string | number;\n}\n\nexport type MediaOverlayContentVisible = 'default' | 'hover' | 'always';\nexport type MediaOverlayContentPlacement =\n  | 'top-start'\n  | 'top-end'\n  | 'middle'\n  | 'bottom-end'\n  | 'bottom-start';\n\nexport interface MediaOverlayContentProps {\n  children?: React.ReactNode;\n  visible?: MediaOverlayContentVisible;\n  placement?: MediaOverlayContentPlacement;\n}\n\nexport default class MediaOverlay extends React.PureComponent<MediaOverlayProps> {\n  static Content: React.FC<MediaOverlayContentProps>;\n  static DragHandle: React.FC;\n}\n"],"mappings":";;;;AAAA;AAA+B;AAAA;AA+BhB,MAAMA,YAAY,SAASC,KAAK,CAACC,aAAa,CAAoB;AAGhF;AAHoBF,YAAY,CACxBG,OAAO;AADKH,YAAY,CAExBI,UAAU"}
+{"version":3,"names":["MediaOverlay","React","PureComponent","Content","DragHandle"],"sources":["../../../src/MediaOverlay/index.d.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MediaOverlaySkin = 'none' | 'gradient' | 'dark';\n\nexport interface MediaOverlayProps {\n  children?: React.ReactNode;\n  media: React.ReactNode;\n  skin?: MediaOverlaySkin;\n  hoverSkin?: MediaOverlaySkin;\n  dataHook?: string;\n  hovered?: boolean;\n  onClick?(): void;\n  removeRoundedBorders?: boolean;\n  className?: string;\n  borderRadius?: string | number;\n  ariaHidden?: boolean;\n}\n\nexport type MediaOverlayContentVisible = 'default' | 'hover' | 'always';\nexport type MediaOverlayContentPlacement =\n  | 'top-start'\n  | 'top-end'\n  | 'middle'\n  | 'bottom-end'\n  | 'bottom-start';\n\nexport interface MediaOverlayContentProps {\n  children?: React.ReactNode;\n  visible?: MediaOverlayContentVisible;\n  placement?: MediaOverlayContentPlacement;\n}\n\nexport default class MediaOverlay extends React.PureComponent<MediaOverlayProps> {\n  static Content: React.FC<MediaOverlayContentProps>;\n  static DragHandle: React.FC;\n}\n"],"mappings":";;;;AAAA;AAA+B;AAAA;AAgChB,MAAMA,YAAY,SAASC,KAAK,CAACC,aAAa,CAAoB;AAGhF;AAHoBF,YAAY,CACxBG,OAAO;AADKH,YAAY,CAExBI,UAAU"}

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

@@ -9,7 +9,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_MessageBoxFunctionalLayout";
+var _namespace_ = "wds_1_3_0_MessageBoxFunctionalLayout";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -17,7 +17,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_1_1_MessageBoxFunctionalLayout__root","defaultScrollBar":"wds_1_1_1_defaultscrollbar__defaultScrollBar","text-medium-thin":"wds_1_1_1_StylableTypography__text-medium-thin","topAreaContainer":"wds_1_1_1_MessageBoxFunctionalLayout__topAreaContainer","contentAreaContainer":"wds_1_1_1_MessageBoxFunctionalLayout__contentAreaContainer","imageContainer":"wds_1_1_1_MessageBoxFunctionalLayout__imageContainer","header":"wds_1_1_1_MessageBoxFunctionalLayout__header","heading":"wds_1_1_1_MessageBoxFunctionalLayout__heading","content":"wds_1_1_1_MessageBoxFunctionalLayout__content","contentWithImage":"wds_1_1_1_MessageBoxFunctionalLayout__contentWithImage","image":"wds_1_1_1_MessageBoxFunctionalLayout__image","footer":"wds_1_1_1_MessageBoxFunctionalLayout__footer","footerbuttons":"wds_1_1_1_MessageBoxFunctionalLayout__footerbuttons","bottomChildren":"wds_1_1_1_MessageBoxFunctionalLayout__bottomChildren","controlButtons":"wds_1_1_1_MessageBoxFunctionalLayout__controlButtons"};
+module.exports.classes = {"root":"wds_1_3_0_MessageBoxFunctionalLayout__root","defaultScrollBar":"wds_1_3_0_defaultscrollbar__defaultScrollBar","text-medium-thin":"wds_1_3_0_StylableTypography__text-medium-thin","topAreaContainer":"wds_1_3_0_MessageBoxFunctionalLayout__topAreaContainer","contentAreaContainer":"wds_1_3_0_MessageBoxFunctionalLayout__contentAreaContainer","imageContainer":"wds_1_3_0_MessageBoxFunctionalLayout__imageContainer","header":"wds_1_3_0_MessageBoxFunctionalLayout__header","heading":"wds_1_3_0_MessageBoxFunctionalLayout__heading","content":"wds_1_3_0_MessageBoxFunctionalLayout__content","contentWithImage":"wds_1_3_0_MessageBoxFunctionalLayout__contentWithImage","image":"wds_1_3_0_MessageBoxFunctionalLayout__image","footer":"wds_1_3_0_MessageBoxFunctionalLayout__footer","footerbuttons":"wds_1_3_0_MessageBoxFunctionalLayout__footerbuttons","bottomChildren":"wds_1_3_0_MessageBoxFunctionalLayout__bottomChildren","controlButtons":"wds_1_3_0_MessageBoxFunctionalLayout__controlButtons"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_MessageBoxMarketerialLayout";
+var _namespace_ = "wds_1_3_0_MessageBoxMarketerialLayout";
 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_MessageBoxMarketerialLayout__root","header":"wds_1_1_1_MessageBoxMarketerialLayout__header","headerImage":"wds_1_1_1_MessageBoxMarketerialLayout__headerImage","headerImageComponent":"wds_1_1_1_MessageBoxMarketerialLayout__headerImageComponent","title":"wds_1_1_1_MessageBoxMarketerialLayout__title","content":"wds_1_1_1_MessageBoxMarketerialLayout__content","emptyButtonsContainer":"wds_1_1_1_MessageBoxMarketerialLayout__emptyButtonsContainer","buttonsContainer":"wds_1_1_1_MessageBoxMarketerialLayout__buttonsContainer","secondaryButtonContainer":"wds_1_1_1_MessageBoxMarketerialLayout__secondaryButtonContainer","bottomChildren":"wds_1_1_1_MessageBoxMarketerialLayout__bottomChildren","close":"wds_1_1_1_MessageBoxMarketerialLayout__close"};
+module.exports.classes = {"root":"wds_1_3_0_MessageBoxMarketerialLayout__root","header":"wds_1_3_0_MessageBoxMarketerialLayout__header","headerImage":"wds_1_3_0_MessageBoxMarketerialLayout__headerImage","headerImageComponent":"wds_1_3_0_MessageBoxMarketerialLayout__headerImageComponent","title":"wds_1_3_0_MessageBoxMarketerialLayout__title","content":"wds_1_3_0_MessageBoxMarketerialLayout__content","emptyButtonsContainer":"wds_1_3_0_MessageBoxMarketerialLayout__emptyButtonsContainer","buttonsContainer":"wds_1_3_0_MessageBoxMarketerialLayout__buttonsContainer","secondaryButtonContainer":"wds_1_3_0_MessageBoxMarketerialLayout__secondaryButtonContainer","bottomChildren":"wds_1_3_0_MessageBoxMarketerialLayout__bottomChildren","close":"wds_1_3_0_MessageBoxMarketerialLayout__close"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_MessageModalLayout";
+var _namespace_ = "wds_1_3_0_MessageModalLayout";
 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_MessageModalLayout__root","topAreaContainer":"wds_1_1_1_MessageModalLayout__topAreaContainer","contentAreaContainer":"wds_1_1_1_MessageModalLayout__contentAreaContainer"};
+module.exports.classes = {"root":"wds_1_3_0_MessageModalLayout__root","topAreaContainer":"wds_1_3_0_MessageModalLayout__topAreaContainer","contentAreaContainer":"wds_1_3_0_MessageModalLayout__contentAreaContainer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_MobilePreviewWidget";
+var _namespace_ = "wds_1_3_0_MobilePreviewWidget";
 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_MobilePreviewWidget__root","defaultScrollBar":"wds_1_1_1_defaultscrollbar__defaultScrollBar","header":"wds_1_1_1_MobilePreviewWidget__header","camera":"wds_1_1_1_MobilePreviewWidget__camera","speaker":"wds_1_1_1_MobilePreviewWidget__speaker","content":"wds_1_1_1_MobilePreviewWidget__content","footer":"wds_1_1_1_MobilePreviewWidget__footer"};
+module.exports.classes = {"root":"wds_1_3_0_MobilePreviewWidget__root","defaultScrollBar":"wds_1_3_0_defaultscrollbar__defaultScrollBar","header":"wds_1_3_0_MobilePreviewWidget__header","camera":"wds_1_3_0_MobilePreviewWidget__camera","speaker":"wds_1_3_0_MobilePreviewWidget__speaker","content":"wds_1_3_0_MobilePreviewWidget__content","footer":"wds_1_3_0_MobilePreviewWidget__footer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_Modal";
+var _namespace_ = "wds_1_3_0_Modal";
 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_Modal__root","childrenContainer":"wds_1_1_1_Modal__childrenContainer","closeButton":"wds_1_1_1_Modal__closeButton","modal":"wds_1_1_1_Modal__modal","navPrev":"wds_1_1_1_Modal__navPrev","navNext":"wds_1_1_1_Modal__navNext"};
+module.exports.classes = {"root":"wds_1_3_0_Modal__root","childrenContainer":"wds_1_3_0_Modal__childrenContainer","closeButton":"wds_1_3_0_Modal__closeButton","modal":"wds_1_3_0_Modal__modal","navPrev":"wds_1_3_0_Modal__navPrev","navNext":"wds_1_3_0_Modal__navNext"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_ModalMobileLayout";
+var _namespace_ = "wds_1_3_0_ModalMobileLayout";
 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_ModalMobileLayout__root","defaultScrollBar":"wds_1_1_1_defaultscrollbar__defaultScrollBar","container":"wds_1_1_1_ModalMobileLayout__container","close":"wds_1_1_1_ModalMobileLayout__close","title":"wds_1_1_1_ModalMobileLayout__title","content":"wds_1_1_1_ModalMobileLayout__content","footer":"wds_1_1_1_ModalMobileLayout__footer"};
+module.exports.classes = {"root":"wds_1_3_0_ModalMobileLayout__root","defaultScrollBar":"wds_1_3_0_defaultscrollbar__defaultScrollBar","container":"wds_1_3_0_ModalMobileLayout__container","close":"wds_1_3_0_ModalMobileLayout__close","title":"wds_1_3_0_ModalMobileLayout__title","content":"wds_1_3_0_ModalMobileLayout__content","footer":"wds_1_3_0_ModalMobileLayout__footer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_ModalPreviewLayout";
+var _namespace_ = "wds_1_3_0_ModalPreviewLayout";
 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_ModalPreviewLayout__root","header":"wds_1_1_1_ModalPreviewLayout__header","title":"wds_1_1_1_ModalPreviewLayout__title","actions":"wds_1_1_1_ModalPreviewLayout__actions","closeButton":"wds_1_1_1_ModalPreviewLayout__closeButton","innerOverlay":"wds_1_1_1_ModalPreviewLayout__innerOverlay","content":"wds_1_1_1_ModalPreviewLayout__content","navigationButton":"wds_1_1_1_ModalPreviewLayout__navigationButton","left-arrow":"wds_1_1_1_ModalPreviewLayout__left-arrow","right-arrow":"wds_1_1_1_ModalPreviewLayout__right-arrow","modalTooltip":"wds_1_1_1_ModalPreviewLayout__modalTooltip"};
+module.exports.classes = {"root":"wds_1_3_0_ModalPreviewLayout__root","header":"wds_1_3_0_ModalPreviewLayout__header","title":"wds_1_3_0_ModalPreviewLayout__title","actions":"wds_1_3_0_ModalPreviewLayout__actions","closeButton":"wds_1_3_0_ModalPreviewLayout__closeButton","innerOverlay":"wds_1_3_0_ModalPreviewLayout__innerOverlay","content":"wds_1_3_0_ModalPreviewLayout__content","navigationButton":"wds_1_3_0_ModalPreviewLayout__navigationButton","left-arrow":"wds_1_3_0_ModalPreviewLayout__left-arrow","right-arrow":"wds_1_3_0_ModalPreviewLayout__right-arrow","modalTooltip":"wds_1_3_0_ModalPreviewLayout__modalTooltip"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_ModalSelectorLayout";
+var _namespace_ = "wds_1_3_0_ModalSelectorLayout";
 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_ModalSelectorLayout__root","modalContent":"wds_1_1_1_ModalSelectorLayout__modalContent"};
+module.exports.classes = {"root":"wds_1_3_0_ModalSelectorLayout__root","modalContent":"wds_1_3_0_ModalSelectorLayout__modalContent"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/MultiSelect/InputWithTags.st.css.js

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_InputWithTags";
+var _namespace_ = "wds_1_3_0_InputWithTags";
 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_InputWithTags__root","text-medium-normal":"wds_1_1_1_StylableTypography__text-medium-normal","input":"wds_1_1_1_InputWithTags__input","emptyInput":"wds_1_1_1_InputWithTags__emptyInput","selectMode":"wds_1_1_1_InputWithTags__selectMode","inputSuffix":"wds_1_1_1_InputWithTags__inputSuffix","menuArrow":"wds_1_1_1_InputWithTags__menuArrow","sizeSmall":"wds_1_1_1_InputWithTags__sizeSmall","sizeLarge":"wds_1_1_1_InputWithTags__sizeLarge","statusIndicator":"wds_1_1_1_InputWithTags__statusIndicator","suffixes":"wds_1_1_1_InputWithTags__suffixes","hiddenDiv":"wds_1_1_1_InputWithTags__hiddenDiv","smallFont":"wds_1_1_1_InputWithTags__smallFont","tag":"wds_1_1_1_InputWithTags__tag","inputWithTagsContainer":"wds_1_1_1_InputWithTags__inputWithTagsContainer","readOnly":"wds_1_1_1_InputWithTags__readOnly","hasMaxHeight":"wds_1_1_1_InputWithTags__hasMaxHeight","customSuffix":"wds_1_1_1_InputWithTags__customSuffix","tagsContainer":"wds_1_1_1_InputWithTags__tagsContainer","draggedTag":"wds_1_1_1_InputWithTags__draggedTag","draggedTagPlaceholder":"wds_1_1_1_InputWithTags__draggedTagPlaceholder"};
+module.exports.classes = {"root":"wds_1_3_0_InputWithTags__root","text-medium-normal":"wds_1_3_0_StylableTypography__text-medium-normal","input":"wds_1_3_0_InputWithTags__input","emptyInput":"wds_1_3_0_InputWithTags__emptyInput","selectMode":"wds_1_3_0_InputWithTags__selectMode","inputSuffix":"wds_1_3_0_InputWithTags__inputSuffix","menuArrow":"wds_1_3_0_InputWithTags__menuArrow","sizeSmall":"wds_1_3_0_InputWithTags__sizeSmall","sizeLarge":"wds_1_3_0_InputWithTags__sizeLarge","statusIndicator":"wds_1_3_0_InputWithTags__statusIndicator","suffixes":"wds_1_3_0_InputWithTags__suffixes","hiddenDiv":"wds_1_3_0_InputWithTags__hiddenDiv","smallFont":"wds_1_3_0_InputWithTags__smallFont","tag":"wds_1_3_0_InputWithTags__tag","inputWithTagsContainer":"wds_1_3_0_InputWithTags__inputWithTagsContainer","readOnly":"wds_1_3_0_InputWithTags__readOnly","hasMaxHeight":"wds_1_3_0_InputWithTags__hasMaxHeight","customSuffix":"wds_1_3_0_InputWithTags__customSuffix","tagsContainer":"wds_1_3_0_InputWithTags__tagsContainer","draggedTag":"wds_1_3_0_InputWithTags__draggedTag","draggedTagPlaceholder":"wds_1_3_0_InputWithTags__draggedTagPlaceholder"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_MultiSelect";
+var _namespace_ = "wds_1_3_0_MultiSelect";
 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_MultiSelect__root","autoSizeInput":"wds_1_1_1_MultiSelect__autoSizeInput"};
+module.exports.classes = {"root":"wds_1_3_0_MultiSelect__root","autoSizeInput":"wds_1_3_0_MultiSelect__autoSizeInput"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_MultiSelectCheckbox";
+var _namespace_ = "wds_1_3_0_MultiSelectCheckbox";
 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_MultiSelectCheckbox__root","showPointer":"wds_1_1_1_MultiSelectCheckbox__showPointer"};
+module.exports.classes = {"root":"wds_1_3_0_MultiSelectCheckbox__root","showPointer":"wds_1_3_0_MultiSelectCheckbox__showPointer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_NestableList";
+var _namespace_ = "wds_1_3_0_NestableList";
 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_NestableList__root","itemWrapper":"wds_1_1_1_NestableList__itemWrapper","item":"wds_1_1_1_NestableList__item","actionItem":"wds_1_1_1_NestableList__actionItem","arrowContainer":"wds_1_1_1_NestableList__arrowContainer","arrow":"wds_1_1_1_NestableList__arrow","horizontalArrow":"wds_1_1_1_NestableList__horizontalArrow","childArrow":"wds_1_1_1_NestableList__childArrow","action":"wds_1_1_1_NestableList__action"};
+module.exports.classes = {"root":"wds_1_3_0_NestableList__root","itemWrapper":"wds_1_3_0_NestableList__itemWrapper","item":"wds_1_3_0_NestableList__item","actionItem":"wds_1_3_0_NestableList__actionItem","arrowContainer":"wds_1_3_0_NestableList__arrowContainer","arrow":"wds_1_3_0_NestableList__arrow","horizontalArrow":"wds_1_3_0_NestableList__horizontalArrow","childArrow":"wds_1_3_0_NestableList__childArrow","action":"wds_1_3_0_NestableList__action"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/NestableList/NestableListTheme.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_NestableListTheme";
+var _namespace_ = "wds_1_3_0_NestableListTheme";
 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_NestableListTheme__root","item":"wds_1_1_1_NestableListTheme__item"};
+module.exports.classes = {"root":"wds_1_3_0_NestableListTheme__root","item":"wds_1_3_0_NestableListTheme__item"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_Notification";
+var _namespace_ = "wds_1_3_0_Notification";
 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_Notification__root","animatorContent":"wds_1_1_1_Notification__animatorContent","wrapper":"wds_1_1_1_Notification__wrapper","notification":"wds_1_1_1_Notification__notification","animator":"wds_1_1_1_Notification__animator","labelWrapper":"wds_1_1_1_Notification__labelWrapper","label":"wds_1_1_1_Notification__label","button":"wds_1_1_1_Notification__button","textLink":"wds_1_1_1_Notification__textLink","iconStyling":"wds_1_1_1_Notification__iconStyling","closeButton":"wds_1_1_1_Notification__closeButton"};
+module.exports.classes = {"root":"wds_1_3_0_Notification__root","animatorContent":"wds_1_3_0_Notification__animatorContent","wrapper":"wds_1_3_0_Notification__wrapper","notification":"wds_1_3_0_Notification__notification","animator":"wds_1_3_0_Notification__animator","labelWrapper":"wds_1_3_0_Notification__labelWrapper","label":"wds_1_3_0_Notification__label","button":"wds_1_3_0_Notification__button","textLink":"wds_1_3_0_Notification__textLink","iconStyling":"wds_1_3_0_Notification__iconStyling","closeButton":"wds_1_3_0_Notification__closeButton"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_1_1_Page";
+var _namespace_ = "wds_1_3_0_Page";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_1_1_Page__root","page":"wds_1_1_1_Page__page","scrollableContainer":"wds_1_1_1_Page__scrollableContainer","pageHeaderContainer":"wds_1_1_1_Page__pageHeaderContainer","headerWrapper":"wds_1_1_1_Page__headerWrapper","tail":"wds_1_1_1_Page__tail","contentContainer":"wds_1_1_1_Page__contentContainer","imageBackgroundContainer":"wds_1_1_1_Page__imageBackgroundContainer","imageBackground":"wds_1_1_1_Page__imageBackground","gradientBackground":"wds_1_1_1_Page__gradientBackground","contentHorizontalLayout":"wds_1_1_1_Page__contentHorizontalLayout","contentFloating":"wds_1_1_1_Page__contentFloating","horizontalScroll":"wds_1_1_1_Page__horizontalScroll","sticky":"wds_1_1_1_Page__sticky","stretchVertically":"wds_1_1_1_Page__stretchVertically","fixedFooter":"wds_1_1_1_Page__fixedFooter"};
-module.exports.keyframes = {"entrance":"wds_1_1_1_Page__entrance"}; 
+module.exports.classes = {"root":"wds_1_3_0_Page__root","page":"wds_1_3_0_Page__page","scrollableContainer":"wds_1_3_0_Page__scrollableContainer","pageHeaderContainer":"wds_1_3_0_Page__pageHeaderContainer","headerWrapper":"wds_1_3_0_Page__headerWrapper","tail":"wds_1_3_0_Page__tail","contentContainer":"wds_1_3_0_Page__contentContainer","imageBackgroundContainer":"wds_1_3_0_Page__imageBackgroundContainer","imageBackground":"wds_1_3_0_Page__imageBackground","gradientBackground":"wds_1_3_0_Page__gradientBackground","contentHorizontalLayout":"wds_1_3_0_Page__contentHorizontalLayout","contentFloating":"wds_1_3_0_Page__contentFloating","horizontalScroll":"wds_1_3_0_Page__horizontalScroll","sticky":"wds_1_3_0_Page__sticky","stretchVertically":"wds_1_3_0_Page__stretchVertically","fixedFooter":"wds_1_3_0_Page__fixedFooter"};
+module.exports.keyframes = {"entrance":"wds_1_3_0_Page__entrance"}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {"pageSidePadding":"48px","headerBottomPadding":"24px","imageContainerOffset":"30px","pageBottomPadding":"48px","minimizedHeaderWrapperMinHeight":"30px","minimizedHeaderWrapperTopPadding":"18px","minimizedHeaderWrapperBottomPadding":"18px","minimizedHeaderWrapperWithTailBottomPadding":"12px","minimizedHeaderWrapperHeightPx":"66","minimizedHeaderWrapperWithTailHeightPx":"60","backgroundCoverContentPx":"36","zIndexLayerStep":"100","stickyZIndex":"1100","minimizedHeaderContainerZIndex":"1200","fixedFooterZIndex":"2000","mainContainerMinWidth":"864px","mainContainerMaxWidth":"1248px"}; 
-module.exports.vars = {"minimizationTop":"--wds_1_1_1_Page-minimizationTop"}; 
+module.exports.vars = {"minimizationTop":"--wds_1_3_0_Page-minimizationTop"}; 
 
 
 

package/dist/cjs/Page/test/examples/BMPageContainer.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../../stylable-cjs-runti
 
 
 
-var _namespace_ = "wds_1_1_1_BMPageContainer";
+var _namespace_ = "wds_1_3_0_BMPageContainer";
 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_BMPageContainer__root","header":"wds_1_1_1_BMPageContainer__header","body":"wds_1_1_1_BMPageContainer__body","sideBar":"wds_1_1_1_BMPageContainer__sideBar","sideBarContent":"wds_1_1_1_BMPageContainer__sideBarContent","rightSide":"wds_1_1_1_BMPageContainer__rightSide","mainContentContainer":"wds_1_1_1_BMPageContainer__mainContentContainer","mainContent":"wds_1_1_1_BMPageContainer__mainContent","withLoadingIndicatorWrapper":"wds_1_1_1_BMPageContainer__withLoadingIndicatorWrapper","withLoadingIndicatorContainer":"wds_1_1_1_BMPageContainer__withLoadingIndicatorContainer"};
+module.exports.classes = {"root":"wds_1_3_0_BMPageContainer__root","header":"wds_1_3_0_BMPageContainer__header","body":"wds_1_3_0_BMPageContainer__body","sideBar":"wds_1_3_0_BMPageContainer__sideBar","sideBarContent":"wds_1_3_0_BMPageContainer__sideBarContent","rightSide":"wds_1_3_0_BMPageContainer__rightSide","mainContentContainer":"wds_1_3_0_BMPageContainer__mainContentContainer","mainContent":"wds_1_3_0_BMPageContainer__mainContent","withLoadingIndicatorWrapper":"wds_1_3_0_BMPageContainer__withLoadingIndicatorWrapper","withLoadingIndicatorContainer":"wds_1_3_0_BMPageContainer__withLoadingIndicatorContainer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Page/test/examples/PageStory.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../../stylable-cjs-runti
 
 
 
-var _namespace_ = "wds_1_1_1_PageStory";
+var _namespace_ = "wds_1_3_0_PageStory";
 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_PageStory__root","backgroundGradient":"wds_1_1_1_PageStory__backgroundGradient","backgroundGradientDark":"wds_1_1_1_PageStory__backgroundGradientDark"};
+module.exports.classes = {"root":"wds_1_3_0_PageStory__root","backgroundGradient":"wds_1_3_0_PageStory__backgroundGradient","backgroundGradientDark":"wds_1_3_0_PageStory__backgroundGradientDark"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Page/test/examples/testExamples.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../../stylable-cjs-runti
 
 
 
-var _namespace_ = "wds_1_1_1_testExamples";
+var _namespace_ = "wds_1_3_0_testExamples";
 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_testExamples__root","defaultScrollBar":"wds_1_1_1_defaultscrollbar__defaultScrollBar","pageContainer":"wds_1_1_1_testExamples__pageContainer","withFixedScrollBar":"wds_1_1_1_testExamples__withFixedScrollBar","backgroundGradient":"wds_1_1_1_testExamples__backgroundGradient"};
+module.exports.classes = {"root":"wds_1_3_0_testExamples__root","defaultScrollBar":"wds_1_3_0_defaultscrollbar__defaultScrollBar","pageContainer":"wds_1_3_0_testExamples__pageContainer","withFixedScrollBar":"wds_1_3_0_testExamples__withFixedScrollBar","backgroundGradient":"wds_1_3_0_testExamples__backgroundGradient"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/PageFooter/Center/Center.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_Center";
+var _namespace_ = "wds_1_3_0_Center";
 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_Center__root","center":"wds_1_1_1_Center__center"};
+module.exports.classes = {"root":"wds_1_3_0_Center__root","center":"wds_1_3_0_Center__center"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/PageFooter/End/End.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_1_1_End";
+var _namespace_ = "wds_1_3_0_End";
 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_End__root","end":"wds_1_1_1_End__end"};
+module.exports.classes = {"root":"wds_1_3_0_End__root","end":"wds_1_3_0_End__end"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};