@wix/design-system 1.0.4 → 1.1.0

package/dist/cjs/SidebarSubMenuNext/SidebarSubMenuNext.js

@@ -101,7 +101,12 @@ var SidebarSubMenuNext = _ref => {
   var renderChildren = _react.Children.toArray(children);
   var renderChildrenForQuickNavigation = renderChildren.map(child => _objectSpread(_objectSpread({}, child), {}, {
     props: _objectSpread(_objectSpread({}, child.props), {}, {
-      isInQuickNavigation: true
+      isInQuickNavigation: true,
+      onClick: e => {
+        var _child$props;
+        (_child$props = child.props) == null ? void 0 : _child$props.onClick == null ? void 0 : _child$props.onClick(e);
+        onClose();
+      }
     })
   }));
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -114,7 +119,7 @@ var SidebarSubMenuNext = _ref => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 87,
+      lineNumber: 94,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_Popover.default, {
@@ -137,14 +142,14 @@ var SidebarSubMenuNext = _ref => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 93,
+      lineNumber: 100,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_Popover.default.Element, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 111,
+      lineNumber: 118,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, (0, _extends2.default)({
@@ -166,14 +171,14 @@ var SidebarSubMenuNext = _ref => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 112,
+      lineNumber: 119,
       columnNumber: 11
     }
   }), title)), /*#__PURE__*/_react.default.createElement(_Popover.default.Content, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 132,
+      lineNumber: 139,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -182,7 +187,7 @@ var SidebarSubMenuNext = _ref => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 133,
+      lineNumber: 140,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_SidebarNextAPI.SidebarNextContext.Provider, {
@@ -193,7 +198,7 @@ var SidebarSubMenuNext = _ref => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 134,
+      lineNumber: 141,
       columnNumber: 13
     }
   }, renderChildrenForQuickNavigation)))), /*#__PURE__*/_react.default.createElement(_SidebarNextAPI.SidebarNextContext.Provider, {
@@ -205,7 +210,7 @@ var SidebarSubMenuNext = _ref => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 146,
+      lineNumber: 153,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement("ul", {
@@ -216,7 +221,7 @@ var SidebarSubMenuNext = _ref => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 154,
+      lineNumber: 161,
       columnNumber: 9
     }
   }, renderChildren)));

package/dist/cjs/SidebarSubMenuNext/SidebarSubMenuNext.js.map

@@ -1 +1 @@
-{"version":3,"names":["SidebarSubMenuNext","dataHook","children","itemKey","disabled","title","onExpand","onCollapse","onClick","suffix","prefix","onQuickNavOpen","asComponentProps","context","useContext","SidebarNextContext","as","role","skin","selectedKey","onToggle","shouldNextMenuOpenWithDelay","scrollAreaRef","isMenuOpen","isItemKeySelected","animation","_onClick","useMenuState","moveBy","popoverContentRef","isPopoverOpen","onOpen","onClose","usePopoverState","useEffect","getSuffix","useCallback","chevronSuffix","dataHooks","chevronRight","Array","isArray","renderChildren","Children","toArray","renderChildrenForQuickNavigation","map","child","props","isInQuickNavigation","st","classes","root","navigationPopoverRoot","submenuPopover","sidebarItem","subMenu","animationWithDelay","selected","navigationPopover","isChild","isParentWithPrefix","subMenuItems","defaultProps","displayName","propTypes","PropTypes","oneOfType","func","object","string","href","className","bool","node","arrayOf"],"sources":["../../../src/SidebarSubMenuNext/SidebarSubMenuNext.js"],"sourcesContent":["import React, { useContext, Children, useCallback, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport SidebarItemNext from '../SidebarItemNext/SidebarItemNext';\nimport { ChevronRightSmall } from '@wix/wix-ui-icons-common';\nimport { dataHooks } from './constants';\nimport { SidebarNextContext } from '../SidebarNext/SidebarNextAPI';\nimport Popover from '../Popover';\nimport { st, classes } from './SidebarSubMenuNext.st.css';\nimport { usePopoverState } from './hooks/usePopoverState';\nimport { useMenuState } from './hooks/useMenuState';\n\nconst SidebarSubMenuNext = ({\n  dataHook,\n  children,\n  itemKey,\n  disabled,\n  title,\n  onExpand,\n  onCollapse,\n  onClick,\n  suffix,\n  prefix,\n  onQuickNavOpen,\n  ...asComponentProps\n}) => {\n  const context = useContext(SidebarNextContext);\n\n  const as = asComponentProps.as;\n  const role = as === 'a' ? 'link' : 'button';\n\n  const {\n    skin,\n    selectedKey,\n    onToggle,\n    shouldNextMenuOpenWithDelay,\n    scrollAreaRef,\n  } = context || {};\n\n  const { isMenuOpen, isItemKeySelected, animation, _onClick } = useMenuState({\n    itemKey,\n    selectedKey,\n    children,\n    disabled,\n    onExpand,\n    onCollapse,\n    onToggle,\n    onClick,\n  });\n\n  const { moveBy, popoverContentRef, isPopoverOpen, onOpen, onClose } =\n    usePopoverState({\n      scrollAreaRef,\n      disabled,\n      children,\n      isMenuOpen,\n    });\n\n  useEffect(() => {\n    if (isPopoverOpen) {\n      onQuickNavOpen && onQuickNavOpen();\n    }\n  }, [isPopoverOpen]);\n\n  const getSuffix = useCallback(() => {\n    const chevronSuffix = (\n      <ChevronRightSmall data-hook={dataHooks.chevronRight} size=\"18px\" />\n    );\n\n    if (!suffix) {\n      return chevronSuffix;\n    }\n\n    if (Array.isArray(suffix)) {\n      return [suffix[0], chevronSuffix];\n    }\n\n    return [suffix, chevronSuffix];\n  }, [suffix]);\n\n  const renderChildren = Children.toArray(children);\n  const renderChildrenForQuickNavigation = renderChildren.map(child => ({\n    ...child,\n    props: { ...child.props, isInQuickNavigation: true },\n  }));\n\n  return (\n    <div\n      data-hook={dataHook}\n      data-quick-nav-open={isPopoverOpen}\n      data-open={isMenuOpen}\n      className={st(classes.root, { skin })}\n    >\n      <Popover\n        className={classes.navigationPopoverRoot}\n        showArrow\n        placement=\"right\"\n        zIndex={3000}\n        shown={isPopoverOpen}\n        appendTo=\"window\"\n        fixed\n        flip={false}\n        theme={skin}\n        moveBy={moveBy}\n        hideDelay={50}\n        showDelay={200}\n        animate={isPopoverOpen}\n        onMouseEnter={onOpen}\n        onMouseLeave={onClose}\n        dataHook={dataHooks.submenuPopover}\n      >\n        <Popover.Element>\n          <SidebarItemNext\n            suffix={getSuffix()}\n            prefix={prefix}\n            onClick={_onClick}\n            disabled={disabled}\n            itemKey={itemKey}\n            dataHook={dataHooks.sidebarItem}\n            className={st(classes.subMenu, {\n              animation,\n              animationWithDelay: shouldNextMenuOpenWithDelay,\n              selected: isItemKeySelected,\n            })}\n            aria-haspopup=\"menu\"\n            aria-expanded={isMenuOpen}\n            role={role}\n            {...asComponentProps}\n          >\n            {title}\n          </SidebarItemNext>\n        </Popover.Element>\n        <Popover.Content>\n          <div ref={popoverContentRef} className={classes.navigationPopover}>\n            <SidebarNextContext.Provider\n              value={{\n                ...context,\n                isChild: true,\n                isParentWithPrefix: !!prefix,\n              }}\n            >\n              {renderChildrenForQuickNavigation}\n            </SidebarNextContext.Provider>\n          </div>\n        </Popover.Content>\n      </Popover>\n      <SidebarNextContext.Provider\n        value={{\n          ...context,\n          isChild: true,\n          isParentWithPrefix: !!prefix,\n          isMenuOpen,\n        }}\n      >\n        <ul\n          className={st(classes.subMenuItems, {\n            animation,\n            animationWithDelay: shouldNextMenuOpenWithDelay,\n          })}\n        >\n          {renderChildren}\n        </ul>\n      </SidebarNextContext.Provider>\n    </div>\n  );\n};\n\nSidebarSubMenuNext.defaultProps = {\n  onExpand: () => { },\n  onCollapse: () => { },\n  onClick: () => { },\n};\n\nSidebarSubMenuNext.displayName = 'SidebarSubMenuNext';\n\nSidebarSubMenuNext.propTypes = {\n  /** render as some other component or DOM tag */\n  as: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),\n  /** URL of the page that link goes to */\n  href: PropTypes.string,\n  /** Applied as data-hook HTML attribute that can be used in the tests */\n  dataHook: PropTypes.string,\n  /** A css class to be applied to the component's root element */\n  className: PropTypes.string,\n  /** Indicates whether to display the item as disabled */\n  disabled: PropTypes.bool,\n  /** A callback to be triggered on click */\n  onClick: PropTypes.func,\n  /** unique identifier per item, used to mark it for navigation and selection */\n  itemKey: PropTypes.string,\n  /** An element to appear as the title of the submenu */\n  title: PropTypes.node,\n  /** A callback to be triggered when the sub menu expands */\n  onExpand: PropTypes.func,\n  /** A callback to be triggered when the sub menu collapses */\n  onCollapse: PropTypes.func,\n  /** An element to appear at the end of the text */\n  suffix: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.arrayOf(PropTypes.node),\n  ]),\n  /** An element to appear at the start of the text. */\n  prefix: PropTypes.node,\n  /** A callback to be triggered when the quick nav openes */\n  onQuickNavOpen: PropTypes.func,\n};\n\nexport default SidebarSubMenuNext;\n"],"mappings":"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"}
+{"version":3,"names":["SidebarSubMenuNext","dataHook","children","itemKey","disabled","title","onExpand","onCollapse","onClick","suffix","prefix","onQuickNavOpen","asComponentProps","context","useContext","SidebarNextContext","as","role","skin","selectedKey","onToggle","shouldNextMenuOpenWithDelay","scrollAreaRef","isMenuOpen","isItemKeySelected","animation","_onClick","useMenuState","moveBy","popoverContentRef","isPopoverOpen","onOpen","onClose","usePopoverState","useEffect","getSuffix","useCallback","chevronSuffix","dataHooks","chevronRight","Array","isArray","renderChildren","Children","toArray","renderChildrenForQuickNavigation","map","child","props","isInQuickNavigation","e","st","classes","root","navigationPopoverRoot","submenuPopover","sidebarItem","subMenu","animationWithDelay","selected","navigationPopover","isChild","isParentWithPrefix","subMenuItems","defaultProps","displayName","propTypes","PropTypes","oneOfType","func","object","string","href","className","bool","node","arrayOf"],"sources":["../../../src/SidebarSubMenuNext/SidebarSubMenuNext.js"],"sourcesContent":["import React, { useContext, Children, useCallback, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport SidebarItemNext from '../SidebarItemNext/SidebarItemNext';\nimport { ChevronRightSmall } from '@wix/wix-ui-icons-common';\nimport { dataHooks } from './constants';\nimport { SidebarNextContext } from '../SidebarNext/SidebarNextAPI';\nimport Popover from '../Popover';\nimport { st, classes } from './SidebarSubMenuNext.st.css';\nimport { usePopoverState } from './hooks/usePopoverState';\nimport { useMenuState } from './hooks/useMenuState';\n\nconst SidebarSubMenuNext = ({\n  dataHook,\n  children,\n  itemKey,\n  disabled,\n  title,\n  onExpand,\n  onCollapse,\n  onClick,\n  suffix,\n  prefix,\n  onQuickNavOpen,\n  ...asComponentProps\n}) => {\n  const context = useContext(SidebarNextContext);\n\n  const as = asComponentProps.as;\n  const role = as === 'a' ? 'link' : 'button';\n\n  const {\n    skin,\n    selectedKey,\n    onToggle,\n    shouldNextMenuOpenWithDelay,\n    scrollAreaRef,\n  } = context || {};\n\n  const { isMenuOpen, isItemKeySelected, animation, _onClick } = useMenuState({\n    itemKey,\n    selectedKey,\n    children,\n    disabled,\n    onExpand,\n    onCollapse,\n    onToggle,\n    onClick,\n  });\n\n  const { moveBy, popoverContentRef, isPopoverOpen, onOpen, onClose } =\n    usePopoverState({\n      scrollAreaRef,\n      disabled,\n      children,\n      isMenuOpen,\n    });\n\n  useEffect(() => {\n    if (isPopoverOpen) {\n      onQuickNavOpen && onQuickNavOpen();\n    }\n  }, [isPopoverOpen]);\n\n  const getSuffix = useCallback(() => {\n    const chevronSuffix = (\n      <ChevronRightSmall data-hook={dataHooks.chevronRight} size=\"18px\" />\n    );\n\n    if (!suffix) {\n      return chevronSuffix;\n    }\n\n    if (Array.isArray(suffix)) {\n      return [suffix[0], chevronSuffix];\n    }\n\n    return [suffix, chevronSuffix];\n  }, [suffix]);\n\n  const renderChildren = Children.toArray(children);\n  const renderChildrenForQuickNavigation = renderChildren.map(child => ({\n    ...child,\n    props: {\n      ...child.props,\n      isInQuickNavigation: true,\n      onClick: e => {\n        child.props?.onClick?.(e);\n        onClose();\n      },\n    },\n  }));\n\n  return (\n    <div\n      data-hook={dataHook}\n      data-quick-nav-open={isPopoverOpen}\n      data-open={isMenuOpen}\n      className={st(classes.root, { skin })}\n    >\n      <Popover\n        className={classes.navigationPopoverRoot}\n        showArrow\n        placement=\"right\"\n        zIndex={3000}\n        shown={isPopoverOpen}\n        appendTo=\"window\"\n        fixed\n        flip={false}\n        theme={skin}\n        moveBy={moveBy}\n        hideDelay={50}\n        showDelay={200}\n        animate={isPopoverOpen}\n        onMouseEnter={onOpen}\n        onMouseLeave={onClose}\n        dataHook={dataHooks.submenuPopover}\n      >\n        <Popover.Element>\n          <SidebarItemNext\n            suffix={getSuffix()}\n            prefix={prefix}\n            onClick={_onClick}\n            disabled={disabled}\n            itemKey={itemKey}\n            dataHook={dataHooks.sidebarItem}\n            className={st(classes.subMenu, {\n              animation,\n              animationWithDelay: shouldNextMenuOpenWithDelay,\n              selected: isItemKeySelected,\n            })}\n            aria-haspopup=\"menu\"\n            aria-expanded={isMenuOpen}\n            role={role}\n            {...asComponentProps}\n          >\n            {title}\n          </SidebarItemNext>\n        </Popover.Element>\n        <Popover.Content>\n          <div ref={popoverContentRef} className={classes.navigationPopover}>\n            <SidebarNextContext.Provider\n              value={{\n                ...context,\n                isChild: true,\n                isParentWithPrefix: !!prefix,\n              }}\n            >\n              {renderChildrenForQuickNavigation}\n            </SidebarNextContext.Provider>\n          </div>\n        </Popover.Content>\n      </Popover>\n      <SidebarNextContext.Provider\n        value={{\n          ...context,\n          isChild: true,\n          isParentWithPrefix: !!prefix,\n          isMenuOpen,\n        }}\n      >\n        <ul\n          className={st(classes.subMenuItems, {\n            animation,\n            animationWithDelay: shouldNextMenuOpenWithDelay,\n          })}\n        >\n          {renderChildren}\n        </ul>\n      </SidebarNextContext.Provider>\n    </div>\n  );\n};\n\nSidebarSubMenuNext.defaultProps = {\n  onExpand: () => {},\n  onCollapse: () => {},\n  onClick: () => {},\n};\n\nSidebarSubMenuNext.displayName = 'SidebarSubMenuNext';\n\nSidebarSubMenuNext.propTypes = {\n  /** render as some other component or DOM tag */\n  as: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),\n  /** URL of the page that link goes to */\n  href: PropTypes.string,\n  /** Applied as data-hook HTML attribute that can be used in the tests */\n  dataHook: PropTypes.string,\n  /** A css class to be applied to the component's root element */\n  className: PropTypes.string,\n  /** Indicates whether to display the item as disabled */\n  disabled: PropTypes.bool,\n  /** A callback to be triggered on click */\n  onClick: PropTypes.func,\n  /** unique identifier per item, used to mark it for navigation and selection */\n  itemKey: PropTypes.string,\n  /** An element to appear as the title of the submenu */\n  title: PropTypes.node,\n  /** A callback to be triggered when the sub menu expands */\n  onExpand: PropTypes.func,\n  /** A callback to be triggered when the sub menu collapses */\n  onCollapse: PropTypes.func,\n  /** An element to appear at the end of the text */\n  suffix: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.arrayOf(PropTypes.node),\n  ]),\n  /** An element to appear at the start of the text. */\n  prefix: PropTypes.node,\n  /** A callback to be triggered when the quick nav openes */\n  onQuickNavOpen: PropTypes.func,\n};\n\nexport default SidebarSubMenuNext;\n"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_SidebarSubMenuNext";
+var _namespace_ = "wds_1_1_0_SidebarSubMenuNext";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -14,8 +14,8 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_0_4_SidebarSubMenuNext__root","subMenu":"wds_1_0_4_SidebarSubMenuNext__subMenu","subMenuItems":"wds_1_0_4_SidebarSubMenuNext__subMenuItems","navigationPopoverRoot":"wds_1_0_4_SidebarSubMenuNext__navigationPopoverRoot","navigationPopover":"wds_1_0_4_SidebarSubMenuNext__navigationPopover"};
-module.exports.keyframes = {"rotateChevronUp":"wds_1_0_4_SidebarSubMenuNext__rotateChevronUp","rotateChevronBack":"wds_1_0_4_SidebarSubMenuNext__rotateChevronBack","openItems":"wds_1_0_4_SidebarSubMenuNext__openItems","closeItems":"wds_1_0_4_SidebarSubMenuNext__closeItems"}; 
+module.exports.classes = {"root":"wds_1_1_0_SidebarSubMenuNext__root","subMenu":"wds_1_1_0_SidebarSubMenuNext__subMenu","subMenuItems":"wds_1_1_0_SidebarSubMenuNext__subMenuItems","navigationPopoverRoot":"wds_1_1_0_SidebarSubMenuNext__navigationPopoverRoot","navigationPopover":"wds_1_1_0_SidebarSubMenuNext__navigationPopover"};
+module.exports.keyframes = {"rotateChevronUp":"wds_1_1_0_SidebarSubMenuNext__rotateChevronUp","rotateChevronBack":"wds_1_1_0_SidebarSubMenuNext__rotateChevronBack","openItems":"wds_1_1_0_SidebarSubMenuNext__openItems","closeItems":"wds_1_1_0_SidebarSubMenuNext__closeItems"}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_SidebarTitleItemNext";
+var _namespace_ = "wds_1_1_0_SidebarTitleItemNext";
 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_0_4_SidebarTitleItemNext__root"};
+module.exports.classes = {"root":"wds_1_1_0_SidebarTitleItemNext__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_Skeleton";
+var _namespace_ = "wds_1_1_0_Skeleton";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_0_4_Skeleton__root","line":"wds_1_0_4_Skeleton__line","chunk":"wds_1_0_4_Skeleton__chunk"};
-module.exports.keyframes = {"moveRight":"wds_1_0_4_Skeleton__moveRight"}; 
+module.exports.classes = {"root":"wds_1_1_0_Skeleton__root","line":"wds_1_1_0_Skeleton__line","chunk":"wds_1_1_0_Skeleton__chunk"};
+module.exports.keyframes = {"moveRight":"wds_1_1_0_Skeleton__moveRight"}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 

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

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

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_SkeletonGroup";
+var _namespace_ = "wds_1_1_0_SkeletonGroup";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,12 +12,12 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_0_4_SkeletonGroup__root","animator":"wds_1_0_4_SkeletonGroup__animator"};
-module.exports.keyframes = {"wave":"wds_1_0_4_SkeletonGroup__wave"}; 
+module.exports.classes = {"root":"wds_1_1_0_SkeletonGroup__root","animator":"wds_1_1_0_SkeletonGroup__animator"};
+module.exports.keyframes = {"wave":"wds_1_1_0_SkeletonGroup__wave"}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {"color":"--wds_1_0_4_SkeletonGroup-color"}; 
+module.exports.vars = {"color":"--wds_1_1_0_SkeletonGroup-color"}; 
 
 
 

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

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

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

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

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

@@ -9,7 +9,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_Slider";
+var _namespace_ = "wds_1_1_0_Slider";
 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_0_4_Slider__root","text-small-normal":"wds_1_0_4_StylableTypography__text-small-normal","sliderHandle":"wds_1_0_4_Slider__sliderHandle","sliderThumb":"wds_1_0_4_Slider__sliderThumb","sliderHandleWrapper":"wds_1_0_4_Slider__sliderHandleWrapper","markLine":"wds_1_0_4_Slider__markLine","markValue":"wds_1_0_4_Slider__markValue","mark":"wds_1_0_4_Slider__mark","markLabel":"wds_1_0_4_Slider__markLabel","sliderHandleTooltip":"wds_1_0_4_Slider__sliderHandleTooltip"};
+module.exports.classes = {"root":"wds_1_1_0_Slider__root","text-small-normal":"wds_1_1_0_StylableTypography__text-small-normal","sliderHandle":"wds_1_1_0_Slider__sliderHandle","sliderThumb":"wds_1_1_0_Slider__sliderThumb","sliderHandleWrapper":"wds_1_1_0_Slider__sliderHandleWrapper","markLine":"wds_1_1_0_Slider__markLine","markValue":"wds_1_1_0_Slider__markValue","mark":"wds_1_1_0_Slider__mark","markLabel":"wds_1_1_0_Slider__markLabel","sliderHandleTooltip":"wds_1_1_0_Slider__sliderHandleTooltip"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_SocialButton";
+var _namespace_ = "wds_1_1_0_SocialButton";
 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_0_4_SocialButton__root","icon":"wds_1_0_4_SocialButton__icon"};
+module.exports.classes = {"root":"wds_1_1_0_SocialButton__root","icon":"wds_1_1_0_SocialButton__icon"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

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

package/dist/cjs/SocialPostPreview/components/FacebookPost.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_0_4_FacebookPost";
+var _namespace_ = "wds_1_1_0_FacebookPost";
 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_0_4_FacebookPost__root","postHeader":"wds_1_0_4_FacebookPost__postHeader","profileNameAndPublishDate":"wds_1_0_4_FacebookPost__profileNameAndPublishDate","publishDate":"wds_1_0_4_FacebookPost__publishDate","postCaption":"wds_1_0_4_FacebookPost__postCaption","lastSeenCaption":"wds_1_0_4_FacebookPost__lastSeenCaption"};
+module.exports.classes = {"root":"wds_1_1_0_FacebookPost__root","postHeader":"wds_1_1_0_FacebookPost__postHeader","profileNameAndPublishDate":"wds_1_1_0_FacebookPost__profileNameAndPublishDate","publishDate":"wds_1_1_0_FacebookPost__publishDate","postCaption":"wds_1_1_0_FacebookPost__postCaption","lastSeenCaption":"wds_1_1_0_FacebookPost__lastSeenCaption"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SocialPostPreview/components/InstagramPost.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_0_4_InstagramPost";
+var _namespace_ = "wds_1_1_0_InstagramPost";
 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_0_4_InstagramPost__root","postHeader":"wds_1_0_4_InstagramPost__postHeader","postCaption":"wds_1_0_4_InstagramPost__postCaption"};
+module.exports.classes = {"root":"wds_1_1_0_InstagramPost__root","postHeader":"wds_1_1_0_InstagramPost__postHeader","postCaption":"wds_1_1_0_InstagramPost__postCaption"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_SocialPreview";
+var _namespace_ = "wds_1_1_0_SocialPreview";
 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_0_4_SocialPreview__root","mediaContainer":"wds_1_0_4_SocialPreview__mediaContainer","container":"wds_1_0_4_SocialPreview__container","socialPreviewUrl":"wds_1_0_4_SocialPreview__socialPreviewUrl","socialPreviewUrlContainer":"wds_1_0_4_SocialPreview__socialPreviewUrlContainer","socialPreviewTitle":"wds_1_0_4_SocialPreview__socialPreviewTitle","socialPreviewDescription":"wds_1_0_4_SocialPreview__socialPreviewDescription"};
+module.exports.classes = {"root":"wds_1_1_0_SocialPreview__root","mediaContainer":"wds_1_1_0_SocialPreview__mediaContainer","container":"wds_1_1_0_SocialPreview__container","socialPreviewUrl":"wds_1_1_0_SocialPreview__socialPreviewUrl","socialPreviewUrlContainer":"wds_1_1_0_SocialPreview__socialPreviewUrlContainer","socialPreviewTitle":"wds_1_1_0_SocialPreview__socialPreviewTitle","socialPreviewDescription":"wds_1_1_0_SocialPreview__socialPreviewDescription"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_SortableGridBase";
+var _namespace_ = "wds_1_1_0_SortableGridBase";
 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_0_4_SortableGridBase__root","number":"wds_1_0_4_SortableGridBase__number","button":"wds_1_0_4_SortableGridBase__button","sortableGridBaseContent":"wds_1_0_4_SortableGridBase__sortableGridBaseContent"};
+module.exports.classes = {"root":"wds_1_1_0_SortableGridBase__root","number":"wds_1_1_0_SortableGridBase__number","button":"wds_1_1_0_SortableGridBase__button","sortableGridBaseContent":"wds_1_1_0_SortableGridBase__sortableGridBaseContent"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SparklineChart/ChartTooltip.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_ChartTooltip";
+var _namespace_ = "wds_1_1_0_ChartTooltip";
 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_0_4_ChartTooltip__root","absolutePosition":"wds_1_0_4_ChartTooltip__absolutePosition","contentWrapper":"wds_1_0_4_ChartTooltip__contentWrapper"};
+module.exports.classes = {"root":"wds_1_1_0_ChartTooltip__root","absolutePosition":"wds_1_1_0_ChartTooltip__absolutePosition","contentWrapper":"wds_1_1_0_ChartTooltip__contentWrapper"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_SparklineChart";
+var _namespace_ = "wds_1_1_0_SparklineChart";
 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_0_4_SparklineChart__root","gradientStop":"wds_1_0_4_SparklineChart__gradientStop","gradientStopWithoutOpacity":"wds_1_0_4_SparklineChart__gradientStopWithoutOpacity","gradientStopWithHalfOpacity":"wds_1_0_4_SparklineChart__gradientStopWithHalfOpacity","tooltipElement":"wds_1_0_4_SparklineChart__tooltipElement"};
+module.exports.classes = {"root":"wds_1_1_0_SparklineChart__root","gradientStop":"wds_1_1_0_SparklineChart__gradientStop","gradientStopWithoutOpacity":"wds_1_1_0_SparklineChart__gradientStopWithoutOpacity","gradientStopWithHalfOpacity":"wds_1_1_0_SparklineChart__gradientStopWithHalfOpacity","tooltipElement":"wds_1_1_0_SparklineChart__tooltipElement"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_StackedBarChart";
+var _namespace_ = "wds_1_1_0_StackedBarChart";
 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_0_4_StackedBarChart__root","text-tiny-thin":"wds_1_0_4_StylableTypography__text-tiny-thin","xAxis":"wds_1_0_4_StackedBarChart__xAxis","yAxis":"wds_1_0_4_StackedBarChart__yAxis","tooltip":"wds_1_0_4_StackedBarChart__tooltip","textPosition":"wds_1_0_4_StackedBarChart__textPosition","tooltipInner":"wds_1_0_4_StackedBarChart__tooltipInner"};
+module.exports.classes = {"root":"wds_1_1_0_StackedBarChart__root","text-tiny-thin":"wds_1_1_0_StylableTypography__text-tiny-thin","xAxis":"wds_1_1_0_StackedBarChart__xAxis","yAxis":"wds_1_1_0_StackedBarChart__yAxis","tooltip":"wds_1_1_0_StackedBarChart__tooltip","textPosition":"wds_1_1_0_StackedBarChart__textPosition","tooltipInner":"wds_1_1_0_StackedBarChart__tooltipInner"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_0_4_StarsRatingBar";
+var _namespace_ = "wds_1_1_0_StarsRatingBar";
 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_0_4_StarsRatingBar__root","starsContainer":"wds_1_0_4_StarsRatingBar__starsContainer","star":"wds_1_0_4_StarsRatingBar__star","rateCaption":"wds_1_0_4_StarsRatingBar__rateCaption"};
+module.exports.classes = {"root":"wds_1_1_0_StarsRatingBar__root","starsContainer":"wds_1_1_0_StarsRatingBar__starsContainer","star":"wds_1_1_0_StarsRatingBar__star","rateCaption":"wds_1_1_0_StarsRatingBar__rateCaption"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/StarsRatingBar/components/InteractiveModeStar.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_0_4_InteractiveModeStar";
+var _namespace_ = "wds_1_1_0_InteractiveModeStar";
 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_0_4_InteractiveModeStar__root","star":"wds_1_0_4_InteractiveModeStar__star"};
+module.exports.classes = {"root":"wds_1_1_0_InteractiveModeStar__root","star":"wds_1_1_0_InteractiveModeStar__star"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/StatisticsWidget/StatisticsItem/StatisticsItem.st.css.js

@@ -7,7 +7,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_0_4_StatisticsItem";
+var _namespace_ = "wds_1_1_0_StatisticsItem";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -15,7 +15,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_0_4_StatisticsItem__root","item":"wds_1_0_4_StatisticsItem__item","loader":"wds_1_0_4_StatisticsItem__loader","description":"wds_1_0_4_StatisticsItem__description","info":"wds_1_0_4_StatisticsItem__info","percentage":"wds_1_0_4_StatisticsItem__percentage","tooltip":"wds_1_0_4_StatisticsItem__tooltip"};
+module.exports.classes = {"root":"wds_1_1_0_StatisticsItem__root","item":"wds_1_1_0_StatisticsItem__item","loader":"wds_1_1_0_StatisticsItem__loader","description":"wds_1_1_0_StatisticsItem__description","info":"wds_1_1_0_StatisticsItem__info","percentage":"wds_1_1_0_StatisticsItem__percentage","tooltip":"wds_1_1_0_StatisticsItem__tooltip"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

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

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

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

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

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

package/dist/cjs/Stepper/components/Step.st.css.js

@@ -9,7 +9,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_0_4_Step";
+var _namespace_ = "wds_1_1_0_Step";
 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_0_4_Step__root","text-medium-normal":"wds_1_0_4_StylableTypography__text-medium-normal","text-medium-thin":"wds_1_0_4_StylableTypography__text-medium-thin","text-small-normal":"wds_1_0_4_StylableTypography__text-small-normal","text-small-thin":"wds_1_0_4_StylableTypography__text-small-thin","marker":"wds_1_0_4_Step__marker","content":"wds_1_0_4_Step__content","text":"wds_1_0_4_Step__text","arrow":"wds_1_0_4_Step__arrow"};
+module.exports.classes = {"root":"wds_1_1_0_Step__root","text-medium-normal":"wds_1_1_0_StylableTypography__text-medium-normal","text-medium-thin":"wds_1_1_0_StylableTypography__text-medium-thin","text-small-normal":"wds_1_1_0_StylableTypography__text-small-normal","text-small-thin":"wds_1_1_0_StylableTypography__text-small-thin","marker":"wds_1_1_0_Step__marker","content":"wds_1_1_0_Step__content","text":"wds_1_1_0_Step__text","arrow":"wds_1_1_0_Step__arrow"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};