@wix/design-system 1.2.0 → 1.4.0

package/dist/cjs/ModalPreviewLayout/ModalPreviewLayout.js

@@ -73,7 +73,7 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 100,
+        lineNumber: 108,
         columnNumber: 7
       }
     }, hasLeft && /*#__PURE__*/_react.default.createElement(_NavigationButton.default, {
@@ -83,7 +83,7 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 102,
+        lineNumber: 110,
         columnNumber: 11
       }
     }), hasRight && /*#__PURE__*/_react.default.createElement(_NavigationButton.default, {
@@ -93,7 +93,7 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 109,
+        lineNumber: 117,
         columnNumber: 11
       }
     }));
@@ -105,7 +105,8 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       title,
       children,
       onClose,
-      closeButtonTooltipText
+      closeButtonTooltipText,
+      skin
     } = this.props;
     var {
       childIndexDisplayed
@@ -118,18 +119,21 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       "data-hook": dataHook,
       className: _ModalPreviewLayoutSt.classes.root,
       onClick: this._onOverlayClick(onClose),
+      "data-skin": skin,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 135,
+        lineNumber: 144,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _ModalPreviewLayoutSt.classes.header,
+      className: (0, _ModalPreviewLayoutSt.st)(_ModalPreviewLayoutSt.classes.header, {
+        skin
+      }),
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 141,
+        lineNumber: 151,
         columnNumber: 9
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -138,16 +142,19 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 142,
+        lineNumber: 152,
         columnNumber: 11
       }
     }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-      light: true,
+      light: skin === _constants.skins.dark,
       ellipsis: true,
+      tooltipProps: {
+        placement: 'bottom'
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 146,
+        lineNumber: 156,
         columnNumber: 13
       }
     }, title)), /*#__PURE__*/_react.default.createElement("div", {
@@ -156,7 +163,7 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 150,
+        lineNumber: 164,
         columnNumber: 11
       }
     }, actions), /*#__PURE__*/_react.default.createElement("div", {
@@ -164,7 +171,7 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 156,
+        lineNumber: 170,
         columnNumber: 11
       }
     }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
@@ -176,7 +183,7 @@ class ModalPreviewLayout extends _react.default.PureComponent {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 162,
+          lineNumber: 176,
           columnNumber: 24
         }
       }, closeButtonTooltipText),
@@ -184,26 +191,26 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 157,
+        lineNumber: 171,
         columnNumber: 13
       }
     }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
       as: "button",
       onClick: onClose,
       priority: "secondary",
-      skin: "transparent",
+      skin: skin === _constants.skins.dark ? 'transparent' : 'standard',
       dataHook: _constants.dataHooks.modalPreviewCloseButton,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 165,
+        lineNumber: 179,
         columnNumber: 15
       }
     }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.X, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 172,
+        lineNumber: 186,
         columnNumber: 17
       }
     }))))), /*#__PURE__*/_react.default.createElement("div", {
@@ -213,7 +220,7 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 177,
+        lineNumber: 191,
         columnNumber: 9
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -223,7 +230,7 @@ class ModalPreviewLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 182,
+        lineNumber: 196,
         columnNumber: 11
       }
     }, childrenArr[childIndexDisplayed]), this._renderNavigationButtons(hasLeft, hasRight)));
@@ -262,12 +269,15 @@ ModalPreviewLayout.propTypes = {
   nextButtonProps: _propTypes.default.shape({
     onClick: _propTypes.default.func,
     tooltipText: _propTypes.default.node
-  })
+  }),
+  /** Controls the skin of the component */
+  skin: _propTypes.default.oneOf(Object.keys(_constants.skins))
 };
 ModalPreviewLayout.defaultProps = {
   shouldCloseOnOverlayClick: true,
   nextButtonProps: {},
-  prevButtonProps: {}
+  prevButtonProps: {},
+  skin: 'dark'
 };
 var _default = ModalPreviewLayout;
 exports.default = _default;

package/dist/cjs/ModalPreviewLayout/ModalPreviewLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["ModalPreviewLayout","React","PureComponent","constructor","props","_onRightNavigationClick","childIndexDisplayed","state","onClick","nextButtonProps","newChildIndexDisplayed","setState","_onLeftNavigationClick","prevButtonProps","_shouldClose","id","shouldCloseOnOverlayClick","modalPreviewIDs","overlay","innerOverlay","includes","_onOverlayClick","onClose","target","_renderNavigationButtons","hasLeft","hasRight","tooltipText","arrowsDirection","leftArrow","rightArrow","render","dataHook","actions","title","children","closeButtonTooltipText","childrenArr","Children","toArray","length","classes","root","header","dataHooks","modalPreviewTitle","modalPreviewActions","closeButton","modalTooltip","closeButtonTooltip","modalPreviewCloseButton","modalPreviewContent","content","displayName","propTypes","PropTypes","string","node","isRequired","func","bool","shape","defaultProps"],"sources":["../../../src/ModalPreviewLayout/ModalPreviewLayout.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { X } from '@wix/wix-ui-icons-common';\nimport Text from '../Text';\nimport IconButton from '../IconButton';\nimport Tooltip from '../Tooltip';\nimport { classes } from './ModalPreviewLayout.st.css';\nimport { dataHooks, modalPreviewIDs, arrowsDirection } from './constants';\nimport NavigationButton from './NavigationButton/NavigationButton';\n\n/** This is a fullscreen modal to present a document to the user overlaying the entire view port */\nclass ModalPreviewLayout extends React.PureComponent {\n  static displayName = 'ModalPreviewLayout';\n\n  static propTypes = {\n    /** Applied as data-hook HTML attribute that can be used in the tests */\n    dataHook: PropTypes.string,\n    /** component to be displayed in header strip to preform actions relevant to the displayed content */\n    actions: PropTypes.node,\n    /** title text to be displayed in the header strip */\n    title: PropTypes.string,\n    /** modal content displayed mid-screen*/\n    children: PropTypes.node.isRequired,\n    /** callback for when the modal is closed */\n    onClose: PropTypes.func.isRequired,\n    /** boolean to determine whether closing the overlay on click */\n    shouldCloseOnOverlayClick: PropTypes.bool,\n    /** Tooltip close button text */\n    closeButtonTooltipText: PropTypes.node,\n    /** Previous button props\n     * ##### onClick signature:\n     * function(childIndexDisplayed: number) => void\n     * * `childIndexDisplayed`: the index of the child component displayed.\n     */\n    prevButtonProps: PropTypes.shape({\n      onClick: PropTypes.func,\n      tooltipText: PropTypes.node,\n    }),\n    /** Next button props\n     * ##### onClick signature:\n     * function(childIndexDisplayed: number) => void\n     * * `childIndexDisplayed`: the index of the child component displayed.\n     */\n    nextButtonProps: PropTypes.shape({\n      onClick: PropTypes.func,\n      tooltipText: PropTypes.node,\n    }),\n  };\n\n  static defaultProps = {\n    shouldCloseOnOverlayClick: true,\n    nextButtonProps: {},\n    prevButtonProps: {},\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = { childIndexDisplayed: 0 };\n  }\n\n  _shouldClose(id) {\n    return (\n      this.props.shouldCloseOnOverlayClick &&\n      [modalPreviewIDs.overlay, modalPreviewIDs.innerOverlay].includes(id)\n    );\n  }\n\n  _onRightNavigationClick = () => {\n    const { childIndexDisplayed } = this.state;\n    const { onClick } = this.props.nextButtonProps;\n    const newChildIndexDisplayed = childIndexDisplayed + 1;\n\n    this.setState({ childIndexDisplayed: newChildIndexDisplayed }, () => {\n      onClick && onClick(newChildIndexDisplayed);\n    });\n  };\n\n  _onLeftNavigationClick = () => {\n    const { childIndexDisplayed } = this.state;\n    const { onClick } = this.props.prevButtonProps;\n    const newChildIndexDisplayed = childIndexDisplayed - 1;\n\n    this.setState({ childIndexDisplayed: newChildIndexDisplayed }, () => {\n      onClick && onClick(newChildIndexDisplayed);\n    });\n  };\n\n  _onOverlayClick(onClose) {\n    return ({ target: { id } }) => {\n      if (this._shouldClose(id) && typeof onClose === 'function') {\n        onClose();\n      }\n    };\n  }\n\n  _renderNavigationButtons(hasLeft, hasRight) {\n    const { prevButtonProps, nextButtonProps } = this.props;\n\n    return (\n      <React.Fragment>\n        {hasLeft && (\n          <NavigationButton\n            tooltipText={prevButtonProps.tooltipText}\n            direction={arrowsDirection.leftArrow}\n            onClick={this._onLeftNavigationClick}\n          />\n        )}\n        {hasRight && (\n          <NavigationButton\n            tooltipText={nextButtonProps.tooltipText}\n            direction={arrowsDirection.rightArrow}\n            onClick={this._onRightNavigationClick}\n          />\n        )}\n      </React.Fragment>\n    );\n  }\n\n  render() {\n    const {\n      dataHook,\n      actions,\n      title,\n      children,\n      onClose,\n      closeButtonTooltipText,\n    } = this.props;\n    const { childIndexDisplayed } = this.state;\n\n    const childrenArr = React.Children.toArray(children);\n    const hasLeft = childIndexDisplayed > 0;\n    const hasRight = childIndexDisplayed < childrenArr.length - 1;\n\n    return (\n      <div\n        id={modalPreviewIDs.overlay}\n        data-hook={dataHook}\n        className={classes.root}\n        onClick={this._onOverlayClick(onClose)}\n      >\n        <div className={classes.header}>\n          <div\n            data-hook={dataHooks.modalPreviewTitle}\n            className={classes.title}\n          >\n            <Text light ellipsis>\n              {title}\n            </Text>\n          </div>\n          <div\n            className={classes.actions}\n            data-hook={dataHooks.modalPreviewActions}\n          >\n            {actions}\n          </div>\n          <div className={classes.closeButton}>\n            <Tooltip\n              disabled={!closeButtonTooltipText}\n              className={classes.modalTooltip}\n              dataHook={dataHooks.closeButtonTooltip}\n              appendTo=\"scrollParent\"\n              content={<Text>{closeButtonTooltipText}</Text>}\n              placement=\"bottom\"\n            >\n              <IconButton\n                as=\"button\"\n                onClick={onClose}\n                priority=\"secondary\"\n                skin=\"transparent\"\n                dataHook={dataHooks.modalPreviewCloseButton}\n              >\n                <X />\n              </IconButton>\n            </Tooltip>\n          </div>\n        </div>\n        <div\n          id={modalPreviewIDs.innerOverlay}\n          data-hook={dataHooks.innerOverlay}\n          className={classes.innerOverlay}\n        >\n          <div\n            data-hook={dataHooks.modalPreviewContent}\n            className={classes.content}\n            data-index={childIndexDisplayed}\n          >\n            {childrenArr[childIndexDisplayed]}\n          </div>\n          {this._renderNavigationButtons(hasLeft, hasRight)}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default ModalPreviewLayout;\n"],"mappings":"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"}
+{"version":3,"names":["ModalPreviewLayout","React","PureComponent","constructor","props","_onRightNavigationClick","childIndexDisplayed","state","onClick","nextButtonProps","newChildIndexDisplayed","setState","_onLeftNavigationClick","prevButtonProps","_shouldClose","id","shouldCloseOnOverlayClick","modalPreviewIDs","overlay","innerOverlay","includes","_onOverlayClick","onClose","target","_renderNavigationButtons","hasLeft","hasRight","tooltipText","arrowsDirection","leftArrow","rightArrow","render","dataHook","actions","title","children","closeButtonTooltipText","skin","childrenArr","Children","toArray","length","classes","root","st","header","dataHooks","modalPreviewTitle","skins","dark","placement","modalPreviewActions","closeButton","modalTooltip","closeButtonTooltip","modalPreviewCloseButton","modalPreviewContent","content","displayName","propTypes","PropTypes","string","node","isRequired","func","bool","shape","oneOf","Object","keys","defaultProps"],"sources":["../../../src/ModalPreviewLayout/ModalPreviewLayout.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { X } from '@wix/wix-ui-icons-common';\nimport Text from '../Text';\nimport IconButton from '../IconButton';\nimport Tooltip from '../Tooltip';\nimport { classes, st } from './ModalPreviewLayout.st.css';\nimport {\n  dataHooks,\n  modalPreviewIDs,\n  arrowsDirection,\n  skins,\n} from './constants';\nimport NavigationButton from './NavigationButton/NavigationButton';\n\n/** This is a fullscreen modal to present a document to the user overlaying the entire view port */\nclass ModalPreviewLayout extends React.PureComponent {\n  static displayName = 'ModalPreviewLayout';\n\n  static propTypes = {\n    /** Applied as data-hook HTML attribute that can be used in the tests */\n    dataHook: PropTypes.string,\n    /** component to be displayed in header strip to preform actions relevant to the displayed content */\n    actions: PropTypes.node,\n    /** title text to be displayed in the header strip */\n    title: PropTypes.string,\n    /** modal content displayed mid-screen*/\n    children: PropTypes.node.isRequired,\n    /** callback for when the modal is closed */\n    onClose: PropTypes.func.isRequired,\n    /** boolean to determine whether closing the overlay on click */\n    shouldCloseOnOverlayClick: PropTypes.bool,\n    /** Tooltip close button text */\n    closeButtonTooltipText: PropTypes.node,\n    /** Previous button props\n     * ##### onClick signature:\n     * function(childIndexDisplayed: number) => void\n     * * `childIndexDisplayed`: the index of the child component displayed.\n     */\n    prevButtonProps: PropTypes.shape({\n      onClick: PropTypes.func,\n      tooltipText: PropTypes.node,\n    }),\n    /** Next button props\n     * ##### onClick signature:\n     * function(childIndexDisplayed: number) => void\n     * * `childIndexDisplayed`: the index of the child component displayed.\n     */\n    nextButtonProps: PropTypes.shape({\n      onClick: PropTypes.func,\n      tooltipText: PropTypes.node,\n    }),\n    /** Controls the skin of the component */\n    skin: PropTypes.oneOf(Object.keys(skins)),\n  };\n\n  static defaultProps = {\n    shouldCloseOnOverlayClick: true,\n    nextButtonProps: {},\n    prevButtonProps: {},\n    skin: 'dark',\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = { childIndexDisplayed: 0 };\n  }\n\n  _shouldClose(id) {\n    return (\n      this.props.shouldCloseOnOverlayClick &&\n      [modalPreviewIDs.overlay, modalPreviewIDs.innerOverlay].includes(id)\n    );\n  }\n\n  _onRightNavigationClick = () => {\n    const { childIndexDisplayed } = this.state;\n    const { onClick } = this.props.nextButtonProps;\n    const newChildIndexDisplayed = childIndexDisplayed + 1;\n\n    this.setState({ childIndexDisplayed: newChildIndexDisplayed }, () => {\n      onClick && onClick(newChildIndexDisplayed);\n    });\n  };\n\n  _onLeftNavigationClick = () => {\n    const { childIndexDisplayed } = this.state;\n    const { onClick } = this.props.prevButtonProps;\n    const newChildIndexDisplayed = childIndexDisplayed - 1;\n\n    this.setState({ childIndexDisplayed: newChildIndexDisplayed }, () => {\n      onClick && onClick(newChildIndexDisplayed);\n    });\n  };\n\n  _onOverlayClick(onClose) {\n    return ({ target: { id } }) => {\n      if (this._shouldClose(id) && typeof onClose === 'function') {\n        onClose();\n      }\n    };\n  }\n\n  _renderNavigationButtons(hasLeft, hasRight) {\n    const { prevButtonProps, nextButtonProps } = this.props;\n\n    return (\n      <React.Fragment>\n        {hasLeft && (\n          <NavigationButton\n            tooltipText={prevButtonProps.tooltipText}\n            direction={arrowsDirection.leftArrow}\n            onClick={this._onLeftNavigationClick}\n          />\n        )}\n        {hasRight && (\n          <NavigationButton\n            tooltipText={nextButtonProps.tooltipText}\n            direction={arrowsDirection.rightArrow}\n            onClick={this._onRightNavigationClick}\n          />\n        )}\n      </React.Fragment>\n    );\n  }\n\n  render() {\n    const {\n      dataHook,\n      actions,\n      title,\n      children,\n      onClose,\n      closeButtonTooltipText,\n      skin,\n    } = this.props;\n    const { childIndexDisplayed } = this.state;\n\n    const childrenArr = React.Children.toArray(children);\n    const hasLeft = childIndexDisplayed > 0;\n    const hasRight = childIndexDisplayed < childrenArr.length - 1;\n\n    return (\n      <div\n        id={modalPreviewIDs.overlay}\n        data-hook={dataHook}\n        className={classes.root}\n        onClick={this._onOverlayClick(onClose)}\n        data-skin={skin}\n      >\n        <div className={st(classes.header, { skin })}>\n          <div\n            data-hook={dataHooks.modalPreviewTitle}\n            className={classes.title}\n          >\n            <Text\n              light={skin === skins.dark}\n              ellipsis\n              tooltipProps={{ placement: 'bottom' }}\n            >\n              {title}\n            </Text>\n          </div>\n          <div\n            className={classes.actions}\n            data-hook={dataHooks.modalPreviewActions}\n          >\n            {actions}\n          </div>\n          <div className={classes.closeButton}>\n            <Tooltip\n              disabled={!closeButtonTooltipText}\n              className={classes.modalTooltip}\n              dataHook={dataHooks.closeButtonTooltip}\n              appendTo=\"scrollParent\"\n              content={<Text>{closeButtonTooltipText}</Text>}\n              placement=\"bottom\"\n            >\n              <IconButton\n                as=\"button\"\n                onClick={onClose}\n                priority=\"secondary\"\n                skin={skin === skins.dark ? 'transparent' : 'standard'}\n                dataHook={dataHooks.modalPreviewCloseButton}\n              >\n                <X />\n              </IconButton>\n            </Tooltip>\n          </div>\n        </div>\n        <div\n          id={modalPreviewIDs.innerOverlay}\n          data-hook={dataHooks.innerOverlay}\n          className={classes.innerOverlay}\n        >\n          <div\n            data-hook={dataHooks.modalPreviewContent}\n            className={classes.content}\n            data-index={childIndexDisplayed}\n          >\n            {childrenArr[childIndexDisplayed]}\n          </div>\n          {this._renderNavigationButtons(hasLeft, hasRight)}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default ModalPreviewLayout;\n"],"mappings":"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"}

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

@@ -22,8 +22,9 @@
 }
 
 .header {
+  -st-states: skin(enum(dark, light));
   position: sticky;
-  background: value(D10);
+  background-color: value(D10);
   height: value(headerHeight);
   width: 100%;
   display: flex;
@@ -34,6 +35,10 @@
   padding: 18px 24px;
 }
 
+.header:skin(light) {
+  background-color: value(D80);
+}
+
 .title {
   width: value(titleWidth);
   max-width: value(titleWidth);

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_2_0_ModalPreviewLayout";
+var _namespace_ = "wds_1_4_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_2_0_ModalPreviewLayout__root","header":"wds_1_2_0_ModalPreviewLayout__header","title":"wds_1_2_0_ModalPreviewLayout__title","actions":"wds_1_2_0_ModalPreviewLayout__actions","closeButton":"wds_1_2_0_ModalPreviewLayout__closeButton","innerOverlay":"wds_1_2_0_ModalPreviewLayout__innerOverlay","content":"wds_1_2_0_ModalPreviewLayout__content","navigationButton":"wds_1_2_0_ModalPreviewLayout__navigationButton","left-arrow":"wds_1_2_0_ModalPreviewLayout__left-arrow","right-arrow":"wds_1_2_0_ModalPreviewLayout__right-arrow","modalTooltip":"wds_1_2_0_ModalPreviewLayout__modalTooltip"};
+module.exports.classes = {"root":"wds_1_4_0_ModalPreviewLayout__root","header":"wds_1_4_0_ModalPreviewLayout__header","title":"wds_1_4_0_ModalPreviewLayout__title","actions":"wds_1_4_0_ModalPreviewLayout__actions","closeButton":"wds_1_4_0_ModalPreviewLayout__closeButton","innerOverlay":"wds_1_4_0_ModalPreviewLayout__innerOverlay","content":"wds_1_4_0_ModalPreviewLayout__content","navigationButton":"wds_1_4_0_ModalPreviewLayout__navigationButton","left-arrow":"wds_1_4_0_ModalPreviewLayout__left-arrow","right-arrow":"wds_1_4_0_ModalPreviewLayout__right-arrow","modalTooltip":"wds_1_4_0_ModalPreviewLayout__modalTooltip"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/ModalPreviewLayout/ModalPreviewLayout.uni.driver.d.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/ModalPreviewLayout/ModalPreviewLayout.uni.driver.d.ts"],"sourcesContent":["import { BaseUniDriver } from 'wix-ui-test-utils/base-driver';\nimport { UniDriver } from 'wix-ui-test-utils/unidriver';\n\nexport interface ModalPreviewLayoutUniDriver extends BaseUniDriver {\n  clickOverlay: () => Promise<void>;\n  getPreviewTitle: () => UniDriver;\n  getPreviewActions: () => UniDriver;\n  getPreviewContent: () => UniDriver;\n  clickClose: () => Promise<void>;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["../../../src/ModalPreviewLayout/ModalPreviewLayout.uni.driver.d.ts"],"sourcesContent":["import { BaseUniDriver } from 'wix-ui-test-utils/base-driver';\nimport { UniDriver } from 'wix-ui-test-utils/unidriver';\nimport { ModalPreviewLayoutSkin } from '.';\n\nexport interface ModalPreviewLayoutUniDriver extends BaseUniDriver {\n  clickOverlay: () => Promise<void>;\n  getPreviewTitle: () => UniDriver;\n  getPreviewActions: () => UniDriver;\n  getPreviewContent: () => UniDriver;\n  clickClose: () => Promise<void>;\n  getSkin: () => Promise<ModalPreviewLayoutSkin>;\n}\n"],"mappings":""}

package/dist/cjs/ModalPreviewLayout/ModalPreviewLayout.uni.driver.js

@@ -31,7 +31,12 @@ var modalPreviewLayoutDriverFactory = base => {
         return _getCurrentChildIndex.apply(this, arguments);
       }
       return getCurrentChildIndex;
-    }()
+    }(),
+    /**
+     * Get skin
+     * @return {Promise<'dark'| 'light'>}
+     */
+    getSkin: () => base.attr('data-skin')
   });
 };
 exports.modalPreviewLayoutDriverFactory = modalPreviewLayoutDriverFactory;

package/dist/cjs/ModalPreviewLayout/ModalPreviewLayout.uni.driver.js.map

@@ -1 +1 @@
-{"version":3,"names":["modalPreviewLayoutDriverFactory","base","getPreviewContent","$","dataHooks","modalPreviewContent","baseUniDriverFactory","clickOverlay","innerOverlay","click","getPreviewTitle","modalPreviewTitle","getPreviewActions","modalPreviewActions","clickClose","modalPreviewCloseButton","getCurrentChildIndex","Number","attr"],"sources":["../../../src/ModalPreviewLayout/ModalPreviewLayout.uni.driver.js"],"sourcesContent":["import { baseUniDriverFactory } from 'wix-ui-test-utils/base-driver';\nimport { dataHooks } from './constants';\n\nexport const modalPreviewLayoutDriverFactory = base => {\n  const getPreviewContent = () =>\n    base.$(`[data-hook=\"${dataHooks.modalPreviewContent}\"]`);\n\n  return {\n    ...baseUniDriverFactory(base),\n\n    /** Click the overlay */\n    clickOverlay: () =>\n      base.$(`[data-hook=\"${dataHooks.innerOverlay}\"]`).click(),\n\n    /** Get the title node */\n    getPreviewTitle: () =>\n      base.$(`[data-hook=\"${dataHooks.modalPreviewTitle}\"]`),\n\n    /** Get the actions node */\n    getPreviewActions: () =>\n      base.$(`[data-hook=\"${dataHooks.modalPreviewActions}\"]`),\n\n    /** Get the content node */\n    getPreviewContent,\n\n    /** Click the close button */\n    clickClose: () =>\n      base.$(`[data-hook=\"${dataHooks.modalPreviewCloseButton}\"]`).click(),\n\n    /** Get the index of the rendered child */\n    getCurrentChildIndex: async () =>\n      Number(await getPreviewContent().attr('data-index')),\n  };\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAAwC;AAAA;AAEjC,IAAMA,+BAA+B,GAAGC,IAAI,IAAI;EACrD,IAAMC,iBAAiB,GAAG,MACxBD,IAAI,CAACE,CAAC,wBAAgBC,oBAAS,CAACC,mBAAmB,SAAK;EAE1D,uCACK,IAAAC,gCAAoB,EAACL,IAAI,CAAC;IAE7B;IACAM,YAAY,EAAE,MACZN,IAAI,CAACE,CAAC,wBAAgBC,oBAAS,CAACI,YAAY,SAAK,CAACC,KAAK,EAAE;IAE3D;IACAC,eAAe,EAAE,MACfT,IAAI,CAACE,CAAC,wBAAgBC,oBAAS,CAACO,iBAAiB,SAAK;IAExD;IACAC,iBAAiB,EAAE,MACjBX,IAAI,CAACE,CAAC,wBAAgBC,oBAAS,CAACS,mBAAmB,SAAK;IAE1D;IACAX,iBAAiB;IAEjB;IACAY,UAAU,EAAE,MACVb,IAAI,CAACE,CAAC,wBAAgBC,oBAAS,CAACW,uBAAuB,SAAK,CAACN,KAAK,EAAE;IAEtE;IACAO,oBAAoB;MAAA,4DAAE;QAAA,OACpBC,MAAM,OAAOf,iBAAiB,EAAE,CAACgB,IAAI,CAAC,YAAY,CAAC,CAAC;MAAA;MAAA;QAAA;MAAA;MAAA;IAAA;EAAA;AAE1D,CAAC;AAAC"}
+{"version":3,"names":["modalPreviewLayoutDriverFactory","base","getPreviewContent","$","dataHooks","modalPreviewContent","baseUniDriverFactory","clickOverlay","innerOverlay","click","getPreviewTitle","modalPreviewTitle","getPreviewActions","modalPreviewActions","clickClose","modalPreviewCloseButton","getCurrentChildIndex","Number","attr","getSkin"],"sources":["../../../src/ModalPreviewLayout/ModalPreviewLayout.uni.driver.js"],"sourcesContent":["import { baseUniDriverFactory } from 'wix-ui-test-utils/base-driver';\nimport { dataHooks } from './constants';\n\nexport const modalPreviewLayoutDriverFactory = base => {\n  const getPreviewContent = () =>\n    base.$(`[data-hook=\"${dataHooks.modalPreviewContent}\"]`);\n\n  return {\n    ...baseUniDriverFactory(base),\n\n    /** Click the overlay */\n    clickOverlay: () =>\n      base.$(`[data-hook=\"${dataHooks.innerOverlay}\"]`).click(),\n\n    /** Get the title node */\n    getPreviewTitle: () =>\n      base.$(`[data-hook=\"${dataHooks.modalPreviewTitle}\"]`),\n\n    /** Get the actions node */\n    getPreviewActions: () =>\n      base.$(`[data-hook=\"${dataHooks.modalPreviewActions}\"]`),\n\n    /** Get the content node */\n    getPreviewContent,\n\n    /** Click the close button */\n    clickClose: () =>\n      base.$(`[data-hook=\"${dataHooks.modalPreviewCloseButton}\"]`).click(),\n\n    /** Get the index of the rendered child */\n    getCurrentChildIndex: async () =>\n      Number(await getPreviewContent().attr('data-index')),\n\n    /**\n     * Get skin\n     * @return {Promise<'dark'| 'light'>}\n     */\n    getSkin: () => base.attr('data-skin'),\n  };\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAAwC;AAAA;AAEjC,IAAMA,+BAA+B,GAAGC,IAAI,IAAI;EACrD,IAAMC,iBAAiB,GAAG,MACxBD,IAAI,CAACE,CAAC,wBAAgBC,oBAAS,CAACC,mBAAmB,SAAK;EAE1D,uCACK,IAAAC,gCAAoB,EAACL,IAAI,CAAC;IAE7B;IACAM,YAAY,EAAE,MACZN,IAAI,CAACE,CAAC,wBAAgBC,oBAAS,CAACI,YAAY,SAAK,CAACC,KAAK,EAAE;IAE3D;IACAC,eAAe,EAAE,MACfT,IAAI,CAACE,CAAC,wBAAgBC,oBAAS,CAACO,iBAAiB,SAAK;IAExD;IACAC,iBAAiB,EAAE,MACjBX,IAAI,CAACE,CAAC,wBAAgBC,oBAAS,CAACS,mBAAmB,SAAK;IAE1D;IACAX,iBAAiB;IAEjB;IACAY,UAAU,EAAE,MACVb,IAAI,CAACE,CAAC,wBAAgBC,oBAAS,CAACW,uBAAuB,SAAK,CAACN,KAAK,EAAE;IAEtE;IACAO,oBAAoB;MAAA,4DAAE;QAAA,OACpBC,MAAM,OAAOf,iBAAiB,EAAE,CAACgB,IAAI,CAAC,YAAY,CAAC,CAAC;MAAA;MAAA;QAAA;MAAA;MAAA;IAAA;IAEtD;AACJ;AACA;AACA;IACIC,OAAO,EAAE,MAAMlB,IAAI,CAACiB,IAAI,CAAC,WAAW;EAAC;AAEzC,CAAC;AAAC"}

package/dist/cjs/ModalPreviewLayout/constants.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.modalPreviewIDs = exports.dataHooks = exports.arrowsDirection = void 0;
+exports.skins = exports.modalPreviewIDs = exports.dataHooks = exports.arrowsDirection = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -30,4 +30,9 @@ var dataHooks = _objectSpread({
   closeButtonTooltip: "close-button-tooltip"
 }, modalPreviewIDs);
 exports.dataHooks = dataHooks;
+var skins = {
+  dark: 'dark',
+  light: 'light'
+};
+exports.skins = skins;
 //# sourceMappingURL=constants.js.map

package/dist/cjs/ModalPreviewLayout/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["modalPrefix","navigationButtonSuffix","modalPreviewIDs","overlay","innerOverlay","arrowsDirection","rightArrow","leftArrow","dataHooks","modalPreviewActions","modalPreviewCloseButton","modalPreviewTitle","modalPreviewContent","modalPreviewRightArrow","modalPreviewLeftArrow","nextNavigationButtonTooltip","prevNavigationButtonTooltip","closeButtonTooltip"],"sources":["../../../src/ModalPreviewLayout/constants.js"],"sourcesContent":["const modalPrefix = 'preview-modal';\nconst navigationButtonSuffix = `navigation-button-tooltip`;\n\nexport const modalPreviewIDs = {\n  overlay: `${modalPrefix}-overlay`,\n  innerOverlay: `${modalPrefix}-inner-overlay`,\n};\n\nexport const arrowsDirection = {\n  rightArrow: 'right-arrow',\n  leftArrow: 'left-arrow',\n};\n\nexport const dataHooks = {\n  modalPreviewActions: `${modalPrefix}-actions`,\n  modalPreviewCloseButton: `${modalPrefix}-close-button`,\n  modalPreviewTitle: `${modalPrefix}-title`,\n  modalPreviewContent: `${modalPrefix}-content`,\n  modalPreviewRightArrow: `${modalPrefix}-${arrowsDirection.rightArrow}`,\n  modalPreviewLeftArrow: `${modalPrefix}-${arrowsDirection.leftArrow}`,\n  nextNavigationButtonTooltip: `next-${navigationButtonSuffix}`,\n  prevNavigationButtonTooltip: `prev-${navigationButtonSuffix}`,\n  closeButtonTooltip: `close-button-tooltip`,\n  ...modalPreviewIDs,\n};\n"],"mappings":";;;;;;;;AAAA,IAAMA,WAAW,GAAG,eAAe;AACnC,IAAMC,sBAAsB,8BAA8B;AAEnD,IAAMC,eAAe,GAAG;EAC7BC,OAAO,YAAKH,WAAW,aAAU;EACjCI,YAAY,YAAKJ,WAAW;AAC9B,CAAC;AAAC;AAEK,IAAMK,eAAe,GAAG;EAC7BC,UAAU,EAAE,aAAa;EACzBC,SAAS,EAAE;AACb,CAAC;AAAC;AAEK,IAAMC,SAAS;EACpBC,mBAAmB,YAAKT,WAAW,aAAU;EAC7CU,uBAAuB,YAAKV,WAAW,kBAAe;EACtDW,iBAAiB,YAAKX,WAAW,WAAQ;EACzCY,mBAAmB,YAAKZ,WAAW,aAAU;EAC7Ca,sBAAsB,YAAKb,WAAW,cAAIK,eAAe,CAACC,UAAU,CAAE;EACtEQ,qBAAqB,YAAKd,WAAW,cAAIK,eAAe,CAACE,SAAS,CAAE;EACpEQ,2BAA2B,iBAAUd,sBAAsB,CAAE;EAC7De,2BAA2B,iBAAUf,sBAAsB,CAAE;EAC7DgB,kBAAkB;AAAwB,GACvCf,eAAe,CACnB;AAAC"}
+{"version":3,"names":["modalPrefix","navigationButtonSuffix","modalPreviewIDs","overlay","innerOverlay","arrowsDirection","rightArrow","leftArrow","dataHooks","modalPreviewActions","modalPreviewCloseButton","modalPreviewTitle","modalPreviewContent","modalPreviewRightArrow","modalPreviewLeftArrow","nextNavigationButtonTooltip","prevNavigationButtonTooltip","closeButtonTooltip","skins","dark","light"],"sources":["../../../src/ModalPreviewLayout/constants.js"],"sourcesContent":["const modalPrefix = 'preview-modal';\nconst navigationButtonSuffix = `navigation-button-tooltip`;\n\nexport const modalPreviewIDs = {\n  overlay: `${modalPrefix}-overlay`,\n  innerOverlay: `${modalPrefix}-inner-overlay`,\n};\n\nexport const arrowsDirection = {\n  rightArrow: 'right-arrow',\n  leftArrow: 'left-arrow',\n};\n\nexport const dataHooks = {\n  modalPreviewActions: `${modalPrefix}-actions`,\n  modalPreviewCloseButton: `${modalPrefix}-close-button`,\n  modalPreviewTitle: `${modalPrefix}-title`,\n  modalPreviewContent: `${modalPrefix}-content`,\n  modalPreviewRightArrow: `${modalPrefix}-${arrowsDirection.rightArrow}`,\n  modalPreviewLeftArrow: `${modalPrefix}-${arrowsDirection.leftArrow}`,\n  nextNavigationButtonTooltip: `next-${navigationButtonSuffix}`,\n  prevNavigationButtonTooltip: `prev-${navigationButtonSuffix}`,\n  closeButtonTooltip: `close-button-tooltip`,\n  ...modalPreviewIDs,\n};\n\nexport const skins = {\n  dark: 'dark',\n  light: 'light',\n};\n"],"mappings":";;;;;;;;AAAA,IAAMA,WAAW,GAAG,eAAe;AACnC,IAAMC,sBAAsB,8BAA8B;AAEnD,IAAMC,eAAe,GAAG;EAC7BC,OAAO,YAAKH,WAAW,aAAU;EACjCI,YAAY,YAAKJ,WAAW;AAC9B,CAAC;AAAC;AAEK,IAAMK,eAAe,GAAG;EAC7BC,UAAU,EAAE,aAAa;EACzBC,SAAS,EAAE;AACb,CAAC;AAAC;AAEK,IAAMC,SAAS;EACpBC,mBAAmB,YAAKT,WAAW,aAAU;EAC7CU,uBAAuB,YAAKV,WAAW,kBAAe;EACtDW,iBAAiB,YAAKX,WAAW,WAAQ;EACzCY,mBAAmB,YAAKZ,WAAW,aAAU;EAC7Ca,sBAAsB,YAAKb,WAAW,cAAIK,eAAe,CAACC,UAAU,CAAE;EACtEQ,qBAAqB,YAAKd,WAAW,cAAIK,eAAe,CAACE,SAAS,CAAE;EACpEQ,2BAA2B,iBAAUd,sBAAsB,CAAE;EAC7De,2BAA2B,iBAAUf,sBAAsB,CAAE;EAC7DgB,kBAAkB;AAAwB,GACvCf,eAAe,CACnB;AAAC;AAEK,IAAMgB,KAAK,GAAG;EACnBC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE;AACT,CAAC;AAAC"}

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

@@ -1 +1 @@
-{"version":3,"names":["ModalPreviewLayout","React","PureComponent"],"sources":["../../../src/ModalPreviewLayout/index.d.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ModalPreviewLayoutProps {\n  dataHook?: string;\n  actions?: React.ReactNode;\n  title?: string;\n  children: React.ReactNode;\n  onClose: () => void;\n  shouldCloseOnOverlayClick?: boolean;\n  closeButtonTooltipText?: string;\n  prevButtonProps?: PrevButtonProps;\n  nextButtonProps?: NextButtonProps;\n}\n\nexport type PrevButtonProps = {\n  onClick?: (childIndexDisplayed: number) => {};\n  tooltipText?: React.ReactNode;\n};\n\nexport type NextButtonProps = {\n  onClick?: (childIndexDisplayed: number) => {};\n  tooltipText?: React.ReactNode;\n};\n\nexport default class ModalPreviewLayout extends React.PureComponent<ModalPreviewLayoutProps> {}\n"],"mappings":";;;;AAAA;AAA+B;AAAA;AAwBhB,MAAMA,kBAAkB,SAASC,KAAK,CAACC,aAAa,CAA0B;AAAE"}
+{"version":3,"names":["ModalPreviewLayout","React","PureComponent"],"sources":["../../../src/ModalPreviewLayout/index.d.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ModalPreviewLayoutSkin = 'dark' | 'light';\n\nexport interface ModalPreviewLayoutProps {\n  dataHook?: string;\n  actions?: React.ReactNode;\n  title?: string;\n  children: React.ReactNode;\n  onClose: () => void;\n  shouldCloseOnOverlayClick?: boolean;\n  closeButtonTooltipText?: string;\n  prevButtonProps?: PrevButtonProps;\n  nextButtonProps?: NextButtonProps;\n  skin?: ModalPreviewLayoutSkin;\n}\n\nexport type PrevButtonProps = {\n  onClick?: (childIndexDisplayed: number) => {};\n  tooltipText?: React.ReactNode;\n};\n\nexport type NextButtonProps = {\n  onClick?: (childIndexDisplayed: number) => {};\n  tooltipText?: React.ReactNode;\n};\n\nexport default class ModalPreviewLayout extends React.PureComponent<ModalPreviewLayoutProps> {}\n"],"mappings":";;;;AAAA;AAA+B;AAAA;AA2BhB,MAAMA,kBAAkB,SAASC,KAAK,CAACC,aAAa,CAA0B;AAAE"}

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_2_0_ModalSelectorLayout";
+var _namespace_ = "wds_1_4_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_2_0_ModalSelectorLayout__root","modalContent":"wds_1_2_0_ModalSelectorLayout__modalContent"};
+module.exports.classes = {"root":"wds_1_4_0_ModalSelectorLayout__root","modalContent":"wds_1_4_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_2_0_InputWithTags";
+var _namespace_ = "wds_1_4_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_2_0_InputWithTags__root","text-medium-normal":"wds_1_2_0_StylableTypography__text-medium-normal","input":"wds_1_2_0_InputWithTags__input","emptyInput":"wds_1_2_0_InputWithTags__emptyInput","selectMode":"wds_1_2_0_InputWithTags__selectMode","inputSuffix":"wds_1_2_0_InputWithTags__inputSuffix","menuArrow":"wds_1_2_0_InputWithTags__menuArrow","sizeSmall":"wds_1_2_0_InputWithTags__sizeSmall","sizeLarge":"wds_1_2_0_InputWithTags__sizeLarge","statusIndicator":"wds_1_2_0_InputWithTags__statusIndicator","suffixes":"wds_1_2_0_InputWithTags__suffixes","hiddenDiv":"wds_1_2_0_InputWithTags__hiddenDiv","smallFont":"wds_1_2_0_InputWithTags__smallFont","tag":"wds_1_2_0_InputWithTags__tag","inputWithTagsContainer":"wds_1_2_0_InputWithTags__inputWithTagsContainer","readOnly":"wds_1_2_0_InputWithTags__readOnly","hasMaxHeight":"wds_1_2_0_InputWithTags__hasMaxHeight","customSuffix":"wds_1_2_0_InputWithTags__customSuffix","tagsContainer":"wds_1_2_0_InputWithTags__tagsContainer","draggedTag":"wds_1_2_0_InputWithTags__draggedTag","draggedTagPlaceholder":"wds_1_2_0_InputWithTags__draggedTagPlaceholder"};
+module.exports.classes = {"root":"wds_1_4_0_InputWithTags__root","text-medium-normal":"wds_1_4_0_StylableTypography__text-medium-normal","input":"wds_1_4_0_InputWithTags__input","emptyInput":"wds_1_4_0_InputWithTags__emptyInput","selectMode":"wds_1_4_0_InputWithTags__selectMode","inputSuffix":"wds_1_4_0_InputWithTags__inputSuffix","menuArrow":"wds_1_4_0_InputWithTags__menuArrow","sizeSmall":"wds_1_4_0_InputWithTags__sizeSmall","sizeLarge":"wds_1_4_0_InputWithTags__sizeLarge","statusIndicator":"wds_1_4_0_InputWithTags__statusIndicator","suffixes":"wds_1_4_0_InputWithTags__suffixes","hiddenDiv":"wds_1_4_0_InputWithTags__hiddenDiv","smallFont":"wds_1_4_0_InputWithTags__smallFont","tag":"wds_1_4_0_InputWithTags__tag","inputWithTagsContainer":"wds_1_4_0_InputWithTags__inputWithTagsContainer","readOnly":"wds_1_4_0_InputWithTags__readOnly","hasMaxHeight":"wds_1_4_0_InputWithTags__hasMaxHeight","customSuffix":"wds_1_4_0_InputWithTags__customSuffix","tagsContainer":"wds_1_4_0_InputWithTags__tagsContainer","draggedTag":"wds_1_4_0_InputWithTags__draggedTag","draggedTagPlaceholder":"wds_1_4_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_2_0_MultiSelect";
+var _namespace_ = "wds_1_4_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_2_0_MultiSelect__root","autoSizeInput":"wds_1_2_0_MultiSelect__autoSizeInput"};
+module.exports.classes = {"root":"wds_1_4_0_MultiSelect__root","autoSizeInput":"wds_1_4_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_2_0_MultiSelectCheckbox";
+var _namespace_ = "wds_1_4_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_2_0_MultiSelectCheckbox__root","showPointer":"wds_1_2_0_MultiSelectCheckbox__showPointer"};
+module.exports.classes = {"root":"wds_1_4_0_MultiSelectCheckbox__root","showPointer":"wds_1_4_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_2_0_NestableList";
+var _namespace_ = "wds_1_4_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_2_0_NestableList__root","itemWrapper":"wds_1_2_0_NestableList__itemWrapper","item":"wds_1_2_0_NestableList__item","actionItem":"wds_1_2_0_NestableList__actionItem","arrowContainer":"wds_1_2_0_NestableList__arrowContainer","arrow":"wds_1_2_0_NestableList__arrow","horizontalArrow":"wds_1_2_0_NestableList__horizontalArrow","childArrow":"wds_1_2_0_NestableList__childArrow","action":"wds_1_2_0_NestableList__action"};
+module.exports.classes = {"root":"wds_1_4_0_NestableList__root","itemWrapper":"wds_1_4_0_NestableList__itemWrapper","item":"wds_1_4_0_NestableList__item","actionItem":"wds_1_4_0_NestableList__actionItem","arrowContainer":"wds_1_4_0_NestableList__arrowContainer","arrow":"wds_1_4_0_NestableList__arrow","horizontalArrow":"wds_1_4_0_NestableList__horizontalArrow","childArrow":"wds_1_4_0_NestableList__childArrow","action":"wds_1_4_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_2_0_NestableListTheme";
+var _namespace_ = "wds_1_4_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_2_0_NestableListTheme__root","item":"wds_1_2_0_NestableListTheme__item"};
+module.exports.classes = {"root":"wds_1_4_0_NestableListTheme__root","item":"wds_1_4_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_2_0_Notification";
+var _namespace_ = "wds_1_4_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_2_0_Notification__root","animatorContent":"wds_1_2_0_Notification__animatorContent","wrapper":"wds_1_2_0_Notification__wrapper","notification":"wds_1_2_0_Notification__notification","animator":"wds_1_2_0_Notification__animator","labelWrapper":"wds_1_2_0_Notification__labelWrapper","label":"wds_1_2_0_Notification__label","button":"wds_1_2_0_Notification__button","textLink":"wds_1_2_0_Notification__textLink","iconStyling":"wds_1_2_0_Notification__iconStyling","closeButton":"wds_1_2_0_Notification__closeButton"};
+module.exports.classes = {"root":"wds_1_4_0_Notification__root","animatorContent":"wds_1_4_0_Notification__animatorContent","wrapper":"wds_1_4_0_Notification__wrapper","notification":"wds_1_4_0_Notification__notification","animator":"wds_1_4_0_Notification__animator","labelWrapper":"wds_1_4_0_Notification__labelWrapper","label":"wds_1_4_0_Notification__label","button":"wds_1_4_0_Notification__button","textLink":"wds_1_4_0_Notification__textLink","iconStyling":"wds_1_4_0_Notification__iconStyling","closeButton":"wds_1_4_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_2_0_Page";
+var _namespace_ = "wds_1_4_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_2_0_Page__root","page":"wds_1_2_0_Page__page","scrollableContainer":"wds_1_2_0_Page__scrollableContainer","pageHeaderContainer":"wds_1_2_0_Page__pageHeaderContainer","headerWrapper":"wds_1_2_0_Page__headerWrapper","tail":"wds_1_2_0_Page__tail","contentContainer":"wds_1_2_0_Page__contentContainer","imageBackgroundContainer":"wds_1_2_0_Page__imageBackgroundContainer","imageBackground":"wds_1_2_0_Page__imageBackground","gradientBackground":"wds_1_2_0_Page__gradientBackground","contentHorizontalLayout":"wds_1_2_0_Page__contentHorizontalLayout","contentFloating":"wds_1_2_0_Page__contentFloating","horizontalScroll":"wds_1_2_0_Page__horizontalScroll","sticky":"wds_1_2_0_Page__sticky","stretchVertically":"wds_1_2_0_Page__stretchVertically","fixedFooter":"wds_1_2_0_Page__fixedFooter"};
-module.exports.keyframes = {"entrance":"wds_1_2_0_Page__entrance"}; 
+module.exports.classes = {"root":"wds_1_4_0_Page__root","page":"wds_1_4_0_Page__page","scrollableContainer":"wds_1_4_0_Page__scrollableContainer","pageHeaderContainer":"wds_1_4_0_Page__pageHeaderContainer","headerWrapper":"wds_1_4_0_Page__headerWrapper","tail":"wds_1_4_0_Page__tail","contentContainer":"wds_1_4_0_Page__contentContainer","imageBackgroundContainer":"wds_1_4_0_Page__imageBackgroundContainer","imageBackground":"wds_1_4_0_Page__imageBackground","gradientBackground":"wds_1_4_0_Page__gradientBackground","contentHorizontalLayout":"wds_1_4_0_Page__contentHorizontalLayout","contentFloating":"wds_1_4_0_Page__contentFloating","horizontalScroll":"wds_1_4_0_Page__horizontalScroll","sticky":"wds_1_4_0_Page__sticky","stretchVertically":"wds_1_4_0_Page__stretchVertically","fixedFooter":"wds_1_4_0_Page__fixedFooter"};
+module.exports.keyframes = {"entrance":"wds_1_4_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_2_0_Page-minimizationTop"}; 
+module.exports.vars = {"minimizationTop":"--wds_1_4_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_2_0_BMPageContainer";
+var _namespace_ = "wds_1_4_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_2_0_BMPageContainer__root","header":"wds_1_2_0_BMPageContainer__header","body":"wds_1_2_0_BMPageContainer__body","sideBar":"wds_1_2_0_BMPageContainer__sideBar","sideBarContent":"wds_1_2_0_BMPageContainer__sideBarContent","rightSide":"wds_1_2_0_BMPageContainer__rightSide","mainContentContainer":"wds_1_2_0_BMPageContainer__mainContentContainer","mainContent":"wds_1_2_0_BMPageContainer__mainContent","withLoadingIndicatorWrapper":"wds_1_2_0_BMPageContainer__withLoadingIndicatorWrapper","withLoadingIndicatorContainer":"wds_1_2_0_BMPageContainer__withLoadingIndicatorContainer"};
+module.exports.classes = {"root":"wds_1_4_0_BMPageContainer__root","header":"wds_1_4_0_BMPageContainer__header","body":"wds_1_4_0_BMPageContainer__body","sideBar":"wds_1_4_0_BMPageContainer__sideBar","sideBarContent":"wds_1_4_0_BMPageContainer__sideBarContent","rightSide":"wds_1_4_0_BMPageContainer__rightSide","mainContentContainer":"wds_1_4_0_BMPageContainer__mainContentContainer","mainContent":"wds_1_4_0_BMPageContainer__mainContent","withLoadingIndicatorWrapper":"wds_1_4_0_BMPageContainer__withLoadingIndicatorWrapper","withLoadingIndicatorContainer":"wds_1_4_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_2_0_PageStory";
+var _namespace_ = "wds_1_4_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_2_0_PageStory__root","backgroundGradient":"wds_1_2_0_PageStory__backgroundGradient","backgroundGradientDark":"wds_1_2_0_PageStory__backgroundGradientDark"};
+module.exports.classes = {"root":"wds_1_4_0_PageStory__root","backgroundGradient":"wds_1_4_0_PageStory__backgroundGradient","backgroundGradientDark":"wds_1_4_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_2_0_testExamples";
+var _namespace_ = "wds_1_4_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_2_0_testExamples__root","defaultScrollBar":"wds_1_2_0_defaultscrollbar__defaultScrollBar","pageContainer":"wds_1_2_0_testExamples__pageContainer","withFixedScrollBar":"wds_1_2_0_testExamples__withFixedScrollBar","backgroundGradient":"wds_1_2_0_testExamples__backgroundGradient"};
+module.exports.classes = {"root":"wds_1_4_0_testExamples__root","defaultScrollBar":"wds_1_4_0_defaultscrollbar__defaultScrollBar","pageContainer":"wds_1_4_0_testExamples__pageContainer","withFixedScrollBar":"wds_1_4_0_testExamples__withFixedScrollBar","backgroundGradient":"wds_1_4_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_2_0_Center";
+var _namespace_ = "wds_1_4_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_2_0_Center__root","center":"wds_1_2_0_Center__center"};
+module.exports.classes = {"root":"wds_1_4_0_Center__root","center":"wds_1_4_0_Center__center"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};