@wix/design-system 1.0.3 → 1.1.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_Skeleton";
+var _namespace_ = "wds_1_1_0_Skeleton";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_Skeleton__root","line":"wds_1_0_3_Skeleton__line","chunk":"wds_1_0_3_Skeleton__chunk"};
-export var keyframes = {"moveRight":"wds_1_0_3_Skeleton__moveRight"}; 
+export var classes = {"root":"wds_1_1_0_Skeleton__root","line":"wds_1_1_0_Skeleton__line","chunk":"wds_1_1_0_Skeleton__chunk"};
+export var keyframes = {"moveRight":"wds_1_1_0_Skeleton__moveRight"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_SkeletonCircle";
+var _namespace_ = "wds_1_1_0_SkeletonCircle";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_SkeletonCircle__root"};
+export var classes = {"root":"wds_1_1_0_SkeletonCircle__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_SkeletonGroup";
+var _namespace_ = "wds_1_1_0_SkeletonGroup";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,12 +12,12 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_SkeletonGroup__root","animator":"wds_1_0_3_SkeletonGroup__animator"};
-export var keyframes = {"wave":"wds_1_0_3_SkeletonGroup__wave"}; 
+export var classes = {"root":"wds_1_1_0_SkeletonGroup__root","animator":"wds_1_1_0_SkeletonGroup__animator"};
+export var keyframes = {"wave":"wds_1_1_0_SkeletonGroup__wave"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"color":"--wds_1_0_3_SkeletonGroup-color"}; 
+export var vars = {"color":"--wds_1_1_0_SkeletonGroup-color"}; 
 
 
 

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_SkeletonLine";
+var _namespace_ = "wds_1_1_0_SkeletonLine";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_SkeletonLine__root"};
+export var classes = {"root":"wds_1_1_0_SkeletonLine__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_SkeletonRectangle";
+var _namespace_ = "wds_1_1_0_SkeletonRectangle";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_SkeletonRectangle__root"};
+export var classes = {"root":"wds_1_1_0_SkeletonRectangle__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -9,7 +9,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_Slider";
+var _namespace_ = "wds_1_1_0_Slider";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -17,7 +17,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_Slider__root","text-small-normal":"wds_1_0_3_StylableTypography__text-small-normal","sliderHandle":"wds_1_0_3_Slider__sliderHandle","sliderThumb":"wds_1_0_3_Slider__sliderThumb","sliderHandleWrapper":"wds_1_0_3_Slider__sliderHandleWrapper","markLine":"wds_1_0_3_Slider__markLine","markValue":"wds_1_0_3_Slider__markValue","mark":"wds_1_0_3_Slider__mark","markLabel":"wds_1_0_3_Slider__markLabel","sliderHandleTooltip":"wds_1_0_3_Slider__sliderHandleTooltip"};
+export var 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"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_SocialButton";
+var _namespace_ = "wds_1_1_0_SocialButton";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_SocialButton__root","icon":"wds_1_0_3_SocialButton__icon"};
+export var classes = {"root":"wds_1_1_0_SocialButton__root","icon":"wds_1_1_0_SocialButton__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_SocialPostPreview";
+var _namespace_ = "wds_1_1_0_SocialPostPreview";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_SocialPostPreview__root"};
+export var classes = {"root":"wds_1_1_0_SocialPostPreview__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "./../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_FacebookPost";
+var _namespace_ = "wds_1_1_0_FacebookPost";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_FacebookPost__root","postHeader":"wds_1_0_3_FacebookPost__postHeader","profileNameAndPublishDate":"wds_1_0_3_FacebookPost__profileNameAndPublishDate","publishDate":"wds_1_0_3_FacebookPost__publishDate","postCaption":"wds_1_0_3_FacebookPost__postCaption","lastSeenCaption":"wds_1_0_3_FacebookPost__lastSeenCaption"};
+export var 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"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_InstagramPost";
+var _namespace_ = "wds_1_1_0_InstagramPost";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_InstagramPost__root","postHeader":"wds_1_0_3_InstagramPost__postHeader","postCaption":"wds_1_0_3_InstagramPost__postCaption"};
+export var classes = {"root":"wds_1_1_0_InstagramPost__root","postHeader":"wds_1_1_0_InstagramPost__postHeader","postCaption":"wds_1_1_0_InstagramPost__postCaption"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_SocialPreview";
+var _namespace_ = "wds_1_1_0_SocialPreview";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_SocialPreview__root","mediaContainer":"wds_1_0_3_SocialPreview__mediaContainer","container":"wds_1_0_3_SocialPreview__container","socialPreviewUrl":"wds_1_0_3_SocialPreview__socialPreviewUrl","socialPreviewUrlContainer":"wds_1_0_3_SocialPreview__socialPreviewUrlContainer","socialPreviewTitle":"wds_1_0_3_SocialPreview__socialPreviewTitle","socialPreviewDescription":"wds_1_0_3_SocialPreview__socialPreviewDescription"};
+export var 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"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_SortableGridBase";
+var _namespace_ = "wds_1_1_0_SortableGridBase";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_SortableGridBase__root","number":"wds_1_0_3_SortableGridBase__number","button":"wds_1_0_3_SortableGridBase__button","sortableGridBaseContent":"wds_1_0_3_SortableGridBase__sortableGridBaseContent"};
+export var 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"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_ChartTooltip";
+var _namespace_ = "wds_1_1_0_ChartTooltip";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_ChartTooltip__root","absolutePosition":"wds_1_0_3_ChartTooltip__absolutePosition","contentWrapper":"wds_1_0_3_ChartTooltip__contentWrapper"};
+export var classes = {"root":"wds_1_1_0_ChartTooltip__root","absolutePosition":"wds_1_1_0_ChartTooltip__absolutePosition","contentWrapper":"wds_1_1_0_ChartTooltip__contentWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_SparklineChart";
+var _namespace_ = "wds_1_1_0_SparklineChart";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_SparklineChart__root","gradientStop":"wds_1_0_3_SparklineChart__gradientStop","gradientStopWithoutOpacity":"wds_1_0_3_SparklineChart__gradientStopWithoutOpacity","gradientStopWithHalfOpacity":"wds_1_0_3_SparklineChart__gradientStopWithHalfOpacity","tooltipElement":"wds_1_0_3_SparklineChart__tooltipElement"};
+export var 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"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_StackedBarChart";
+var _namespace_ = "wds_1_1_0_StackedBarChart";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_StackedBarChart__root","text-tiny-thin":"wds_1_0_3_StylableTypography__text-tiny-thin","xAxis":"wds_1_0_3_StackedBarChart__xAxis","yAxis":"wds_1_0_3_StackedBarChart__yAxis","tooltip":"wds_1_0_3_StackedBarChart__tooltip","textPosition":"wds_1_0_3_StackedBarChart__textPosition","tooltipInner":"wds_1_0_3_StackedBarChart__tooltipInner"};
+export var 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"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_StarsRatingBar";
+var _namespace_ = "wds_1_1_0_StarsRatingBar";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_StarsRatingBar__root","starsContainer":"wds_1_0_3_StarsRatingBar__starsContainer","star":"wds_1_0_3_StarsRatingBar__star","rateCaption":"wds_1_0_3_StarsRatingBar__rateCaption"};
+export var 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"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "./../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_InteractiveModeStar";
+var _namespace_ = "wds_1_1_0_InteractiveModeStar";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_InteractiveModeStar__root","star":"wds_1_0_3_InteractiveModeStar__star"};
+export var classes = {"root":"wds_1_1_0_InteractiveModeStar__root","star":"wds_1_1_0_InteractiveModeStar__star"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -7,7 +7,7 @@ import { classesRuntime, statesRuntime } from "./../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_StatisticsItem";
+var _namespace_ = "wds_1_1_0_StatisticsItem";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -15,7 +15,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_StatisticsItem__root","item":"wds_1_0_3_StatisticsItem__item","loader":"wds_1_0_3_StatisticsItem__loader","description":"wds_1_0_3_StatisticsItem__description","info":"wds_1_0_3_StatisticsItem__info","percentage":"wds_1_0_3_StatisticsItem__percentage","tooltip":"wds_1_0_3_StatisticsItem__tooltip"};
+export var 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"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_StatisticsWidget";
+var _namespace_ = "wds_1_1_0_StatisticsWidget";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_StatisticsWidget__root"};
+export var classes = {"root":"wds_1_1_0_StatisticsWidget__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_StatusIndicator";
+var _namespace_ = "wds_1_1_0_StatusIndicator";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_StatusIndicator__root"};
+export var classes = {"root":"wds_1_1_0_StatusIndicator__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,7 +4,7 @@ import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_Stepper";
+var _namespace_ = "wds_1_1_0_Stepper";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_Stepper__root"};
+export var classes = {"root":"wds_1_1_0_Stepper__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -9,7 +9,7 @@ import { classesRuntime, statesRuntime } from "./../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_Step";
+var _namespace_ = "wds_1_1_0_Step";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -17,7 +17,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_Step__root","text-medium-normal":"wds_1_0_3_StylableTypography__text-medium-normal","text-medium-thin":"wds_1_0_3_StylableTypography__text-medium-thin","text-small-normal":"wds_1_0_3_StylableTypography__text-small-normal","text-small-thin":"wds_1_0_3_StylableTypography__text-small-thin","marker":"wds_1_0_3_Step__marker","content":"wds_1_0_3_Step__content","text":"wds_1_0_3_Step__text","arrow":"wds_1_0_3_Step__arrow"};
+export var 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"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/dist/esm/Stepper/components/StepMarker.st.css.js

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "./../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "wds_1_0_3_StepMarker";
+var _namespace_ = "wds_1_1_0_StepMarker";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = /*#__PURE__*/ _style_;
 export var st = /*#__PURE__*/ _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"wds_1_0_3_StepMarker__root"};
+export var classes = {"root":"wds_1_1_0_StepMarker__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/dist/esm/Table/DataTable/DataTable.js

@@ -16,13 +16,14 @@ import { WixStyleReactMaskingContext } from '../../WixStyleReactMaskingProvider/
 import { timingMap } from '../../Transition/constants';
 export const DataTableHeader = props => {
     const { dataHook, horizontalScroll, leftShadowVisible, rightShadowVisible, stickyColumns, rowVerticalPadding, } = props;
+    const headerContainerRef = React.useRef();
     const wrapWithHorizontalScroll = table => (React.createElement("div", { className: classNames(classes.scrollWrapper, {
             [classes.leftShadowVisible]: !!leftShadowVisible,
             [classes.rightShadowVisible]: !!rightShadowVisible,
             [classes.withStickyColumns]: !!stickyColumns,
         }) },
-        React.createElement(ScrollSyncPane, null, table)));
-    const table = (React.createElement("div", { "data-hook": dataHook, className: classNames({
+        React.createElement(ScrollSyncPane, { attachTo: headerContainerRef }, table)));
+    const table = (React.createElement("div", { "data-hook": dataHook, ref: headerContainerRef, className: classNames({
             [classes.tableHeaderScrollContent]: horizontalScroll,
         }) },
         React.createElement("table", { style: { width: props.width }, className: st(classes.table, {
@@ -52,14 +53,14 @@ class DataTable extends React.Component {
                     ? this.state.currentPage < this.state.lastPage || this.props.hasMore
                     : this.props.hasMore, loader: this.props.loader, useWindow: this.props.useWindow, scrollElement: this.props.scrollElement, initialLoad: this.props.initialLoad }, table));
         };
-        this.wrapWithHorizontalScroll = table => {
+        this.wrapWithHorizontalScroll = (table, attachTo) => {
             const { leftShadowVisible, rightShadowVisible, stickyColumns } = this.props;
             return (React.createElement("div", { className: classNames(this.style.scrollWrapper, {
                     [this.style.leftShadowVisible]: !!leftShadowVisible,
                     [this.style.rightShadowVisible]: !!rightShadowVisible,
                     [this.style.withStickyColumns]: !!stickyColumns,
                 }) },
-                React.createElement(ScrollSyncPane, null, table)));
+                React.createElement(ScrollSyncPane, { attachTo: attachTo }, table)));
         };
         this.renderTable = rowsToRender => {
             const { dataHook, showLastRowDivider, horizontalScroll, rowVerticalPadding, removeRowDetailsPadding, dragAndDrop, onDragStart, onDragEnd, onDragCancel, isDragAndDropDisabled, data, } = this.props;
@@ -95,7 +96,15 @@ class DataTable extends React.Component {
         };
         this.renderBody = rows => {
             const { BodyElementType = 'tbody' } = this.props;
-            return (React.createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => (React.createElement(BodyElementType, null, rows.map((rowData, index) => this.renderRow({ rowData, rowNum: index, maskingClassNames }))))));
+            return (React.createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => {
+                var _a;
+                return ((_a = BodyElementType === null || BodyElementType === void 0 ? void 0 : BodyElementType.propTypes) === null || _a === void 0 ? void 0 : _a.styleRowCallbacks) ? (React.createElement(BodyElementType, { styleRowCallbacks: rows.map((rowData, index) => this.renderRowWrapper({
+                        rowData,
+                        rowNum: index,
+                        maskingClassNames,
+                        isApplyCellWidth: true,
+                    })) })) : (React.createElement(BodyElementType, null, rows.map((rowData, index) => this.renderRow({ rowData, rowNum: index, maskingClassNames }))));
+            }));
         };
         this.onRowClick = (rowData, rowNum) => {
             const { onRowClick, rowDetails, isRowDisabled } = this.props;
@@ -109,7 +118,18 @@ class DataTable extends React.Component {
             maskingClassNames,
             isDragOverlay,
         })));
-        this.renderRow = ({ rowData, rowNum, style, maskingClassNames, isDragOverlay, }) => {
+        this.renderRowWrapper = ({ rowData, rowNum, maskingClassNames, isDragOverlay, isApplyCellWidth, }) => {
+            return (style, cellStyle) => this.renderRow({
+                rowData,
+                rowNum,
+                style,
+                cellStyle,
+                maskingClassNames,
+                isDragOverlay,
+                isApplyCellWidth,
+            });
+        };
+        this.renderRow = ({ rowData, rowNum, style, maskingClassNames, isDragOverlay, cellStyle, isApplyCellWidth, }) => {
             const { onRowClick, onMouseEnterRow, onMouseLeaveRow, rowDataHook, dynamicRowClass, isRowHighlight, rowDetails, rowClass, columns, selectedRowsIds, isRowSelected, isRowDisabled, dragAndDrop, isDragAndDropDisabled, } = this.props;
             const rowClasses = [rowClass];
             const key = defaultTo(rowData.id, rowNum);
@@ -162,6 +182,8 @@ class DataTable extends React.Component {
                 colNum,
                 maskingClassNames,
                 isDragOverlay,
+                overriddenStyle: cellStyle,
+                isApplyCellWidth,
             }))));
             if (dragAndDrop) {
                 const { DraggableTableRow } = dragAndDrop;
@@ -192,7 +214,7 @@ class DataTable extends React.Component {
                 [this.style.rowDetailsExtended]: !!selectedRows.get(rowData) && rowDetails(rowData),
             });
         };
-        this.renderCell = ({ rowData, column, rowNum, colNum, maskingClassNames, isDragOverlay, }) => {
+        this.renderCell = ({ rowData, column, rowNum, colNum, maskingClassNames, isDragOverlay, overriddenStyle = {}, isApplyCellWidth = false, }) => {
             var _a;
             const { virtualized, stickyColumns, columns, hideHeader, hideHeaderAccessible, } = this.props;
             const width = isDragOverlay ||
@@ -210,7 +232,12 @@ class DataTable extends React.Component {
                 colNum,
                 rowData,
             });
-            return (React.createElement("td", { key: (_a = column.key) !== null && _a !== void 0 ? _a : colNum, "data-mask": !!maskingClassNames, "data-hook": column.dataHook, style: Object.assign(Object.assign({}, style), stickyColumnStyle), width: width, className: st(cellClasses, {}, maskingClassNames), onClick: column.onCellClick
+            const widthStyle = isApplyCellWidth
+                ? column.width
+                    ? { width: column.width }
+                    : { flex: 1 }
+                : {};
+            return (React.createElement("td", { key: (_a = column.key) !== null && _a !== void 0 ? _a : colNum, "data-mask": !!maskingClassNames, "data-hook": column.dataHook, style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), stickyColumnStyle), overriddenStyle), widthStyle), width: width, className: st(cellClasses, {}, maskingClassNames), onClick: column.onCellClick
                     ? event => column.onCellClick(column, rowData, rowNum, event)
                     : undefined }, column.render && column.render(rowData, rowNum)));
         };
@@ -315,7 +342,7 @@ class DataTable extends React.Component {
             : data;
         let table = this.renderTable(rowsToRender);
         if (horizontalScroll) {
-            table = this.wrapWithHorizontalScroll(table);
+            table = this.wrapWithHorizontalScroll(table, this.contentRef);
         }
         if (infiniteScroll) {
             table = this.wrapWithInfiniteScroll(table);