@wix/design-system 1.165.0 → 1.166.0

package/dist/cjs/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_wixUiIconsCommon","_matchMediaRegister","_reactSlick","_CarouselSt","_Pagination","_SliderArrow","_Loader","_Proportion","_excluded","_jsxFileName","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","AUTOPLAY_SPEED","TRANSITION_SPEED","SLIDES_TO_SHOW","dataHooks","imagesContainer","carouselImage","loader","prevButton","nextButton","pageNavigation","index","concat","WrappedSliderArrow","_ref","currentSlide","slideCount","rest","_objectWithoutProperties2","createElement","_extends2","__self","__source","fileName","lineNumber","columnNumber","isTestEnv","process","env","NODE_ENV","window","matchMedia","register","Carousel","React","Component","constructor","props","leftIconByControlSize","controlSize","ChevronLeftSmall","ChevronLeftLargeSmall","ChevronLeftLarge","rightIconByControlSize","ChevronRightSmall","ChevronRightLargeSmall","ChevronRightLarge","slideTo","_this$sliderRef","sliderRef","current","slickGoTo","_resolveSliderSettings","_ref2","_this$props$children","_this$props$images","infinite","autoplay","dots","variableWidth","buttonSkin","initialSlideIndex","afterChange","beforeChange","controlsPosition","controlsSize","controlsStartEnd","children","images","speed","autoplaySpeed","initialSlide","slidesToShow","slidesToScroll","nextArrow","dataHook","arrowSize","icon","prevArrow","arrows","appendDots","pages","originalClassName","classes","pagination","customPaging","i","className","_renderImages","imagesPosition","imagesFit","map","image","key","src","aspectRatio","Proportion","PREDEFINED_RATIOS","landscape","st","imageContainer","isLoading","_isLoading","onLoad","_onImageLoad","style","objectPosition","objectFit","size","state","sliderSettings","loadedImages","createRef","render","showControlsShadow","hasImages","root","ref","setState","includes","displayName","propTypes","PropTypes","string","array","oneOf","node","bool","number","func","defaultProps","_default","exports"],"sources":["../../../src/Carousel/Carousel.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  ChevronLeftLarge,\n  ChevronRightLarge,\n  ChevronLeftLargeSmall,\n  ChevronRightLargeSmall,\n  ChevronLeftSmall,\n  ChevronRightSmall,\n} from '@wix/wix-ui-icons-common';\n\n// This is here and not in the test setup because we don't want consumers to need to run it as well\nimport { register } from './utils/match-media-register';\nimport Slider from 'react-slick';\n\nimport { st, classes } from './Carousel.st.css';\nimport Pagination from './Pagination';\nimport SliderArrow from './SliderArrow';\nimport Loader from '../Loader';\nimport Proportion from '../Proportion';\n\nconst AUTOPLAY_SPEED = 3000;\nconst TRANSITION_SPEED = 600;\nconst SLIDES_TO_SHOW = 1;\nconst dataHooks = {\n  imagesContainer: 'images-container',\n  carouselImage: 'carousel-img',\n  loader: 'loader',\n  prevButton: 'prev-button',\n  nextButton: 'next-button',\n  pageNavigation: index => `page-navigation-${index}`,\n};\n\nconst WrappedSliderArrow = ({ currentSlide, slideCount, ...rest }) => (\n  <SliderArrow {...rest} />\n);\n\nconst isTestEnv = process.env.NODE_ENV === 'test';\n\nif (isTestEnv && typeof window !== 'undefined' && !window.matchMedia) {\n  register();\n}\n\nclass Carousel extends React.Component {\n  static displayName = 'Carousel';\n\n  static propTypes = {\n    /** Applies a data-hook HTML attribute that can be used in the tests */\n    dataHook: PropTypes.string,\n\n    /** Specifies a CSS class name to be appended to the component’s root element.\n     * @internal\n     */\n\n    className: PropTypes.string,\n\n    /** Defines an array of objects where each contains the `src` of an image (in `<img src=\"your_src\" />`) */\n    images: PropTypes.array,\n\n    /** Sets the image's position */\n    imagesPosition: PropTypes.string,\n\n    /** Sets the image’s fit */\n    imagesFit: PropTypes.oneOf([\n      'fill',\n      'contain',\n      'cover',\n      'none',\n      'scale-down',\n    ]),\n\n    /** Accepts any component as a child item. Most commonly used to display `<Card/>`,  `<Image/>` or video files. */\n    children: PropTypes.node,\n\n    /** Sets the skin of the control (next / previous) buttons */\n    buttonSkin: PropTypes.oneOf(['standard', 'inverted', 'light']),\n\n    /** Drops a shadow below the control buttons */\n    showControlsShadow: PropTypes.bool,\n\n    /** Loops images endlessly */\n    infinite: PropTypes.bool,\n\n    /** Auto-plays images */\n    autoplay: PropTypes.bool,\n\n    /** Controls if the bottom dots are visible or hidden */\n    dots: PropTypes.bool,\n\n    /** Shows one slide at a time (default) or stacks one slide after another horizontally */\n    variableWidth: PropTypes.bool,\n\n    /** Sets the slide to start a presentation with */\n    initialSlideIndex: PropTypes.number,\n\n    /** Index change callback. `index => ...` */\n    afterChange: PropTypes.func,\n\n    /** Index change callback. `(oldIndex, newIndex) => ...` */\n    beforeChange: PropTypes.func,\n\n    /** Sets the control buttons’ position */\n    controlsPosition: PropTypes.oneOf(['sides', 'overlay', 'bottom', 'none']),\n\n    /** Sets the control buttons’ size */\n    controlsSize: PropTypes.oneOf(['tiny', 'small', 'medium']),\n\n    /** Controls if the next / previous control buttons are visible, hidden or disabled at the start and end of the slideshow */\n    controlsStartEnd: PropTypes.oneOf(['disabled', 'hidden']),\n  };\n\n  static defaultProps = {\n    infinite: true,\n    dots: true,\n    variableWidth: false,\n    initialSlideIndex: 0,\n    images: [],\n    imagesPosition: 'center top',\n    imagesFit: 'contain',\n    buttonSkin: 'standard',\n    controlsPosition: 'sides',\n    controlsSize: 'medium',\n    controlsStartEnd: 'disabled',\n    showControlsShadow: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      sliderSettings: this._resolveSliderSettings(props),\n      loadedImages: [],\n    };\n\n    this.sliderRef = React.createRef();\n  }\n\n  render() {\n    const {\n      dataHook,\n      className,\n      images,\n      children,\n      controlsPosition,\n      controlsSize,\n      showControlsShadow,\n    } = this.props;\n    const { sliderSettings } = this.state;\n    const hasImages = !children && images.length > 0;\n\n    return (\n      <div\n        data-hook={dataHook}\n        className={st(\n          classes.root,\n          { controlsPosition, controlsSize, showControlsShadow },\n          className,\n        )}\n      >\n        <Slider ref={this.sliderRef} {...sliderSettings}>\n          {children}\n          {hasImages && this._renderImages(images)}\n        </Slider>\n      </div>\n    );\n  }\n\n  leftIconByControlSize = controlSize => {\n    switch (controlSize) {\n      case 'tiny':\n        return <ChevronLeftSmall />;\n      case 'small':\n        return <ChevronLeftLargeSmall />;\n      default:\n        return <ChevronLeftLarge />;\n    }\n  };\n\n  rightIconByControlSize = controlSize => {\n    switch (controlSize) {\n      case 'tiny':\n        return <ChevronRightSmall />;\n      case 'small':\n        return <ChevronRightLargeSmall />;\n      default:\n        return <ChevronRightLarge />;\n    }\n  };\n\n  /** Slide to slide by index */\n  slideTo = index => {\n    this.sliderRef?.current.slickGoTo(index);\n  };\n\n  _resolveSliderSettings = ({\n    infinite,\n    autoplay,\n    dots,\n    variableWidth,\n    buttonSkin,\n    initialSlideIndex,\n    afterChange,\n    beforeChange,\n    controlsPosition,\n    controlsSize,\n    controlsStartEnd,\n  }) => {\n    return {\n      // in order to avoid duplicated items bug react-slick@0.30.2 - https://github.com/akiran/react-slick/issues/1171\n      infinite:\n        (this.props.children?.length || this.props.images?.length) >\n        SLIDES_TO_SHOW\n          ? infinite\n          : false,\n      autoplay,\n      speed: TRANSITION_SPEED,\n      autoplaySpeed: AUTOPLAY_SPEED,\n      initialSlide: initialSlideIndex,\n      dots,\n      slidesToShow: SLIDES_TO_SHOW,\n      slidesToScroll: 1,\n      variableWidth,\n      afterChange,\n      beforeChange,\n      nextArrow: (\n        <WrappedSliderArrow\n          dataHook={dataHooks.nextButton}\n          buttonSkin={buttonSkin}\n          arrowSize={controlsSize}\n          icon={this.rightIconByControlSize(controlsSize)}\n          controlsStartEnd={controlsStartEnd}\n        />\n      ),\n      prevArrow: (\n        <WrappedSliderArrow\n          dataHook={dataHooks.prevButton}\n          buttonSkin={buttonSkin}\n          arrowSize={controlsSize}\n          icon={this.leftIconByControlSize(controlsSize)}\n          controlsStartEnd={controlsStartEnd}\n        />\n      ),\n      arrows: controlsPosition !== 'none',\n      appendDots: pages => {\n        /*\n         * originalClassName is a workaround for stylable API extend to work and pass an extendable className.\n         * This is because react-slick overrides brutally the className prop with cloneElement().\n         */\n        return (\n          <Pagination originalClassName={classes.pagination} pages={pages} />\n        );\n      },\n      customPaging: i => (\n        <div\n          className={classes.pageNavigation}\n          data-hook={dataHooks.pageNavigation(i)}\n        >\n          {i}\n        </div>\n      ),\n    };\n  };\n\n  _renderImages = images => {\n    const { imagesPosition, imagesFit } = this.props;\n    return images.map((image, index) => (\n      <Proportion\n        key={`${index}${image.src}`}\n        aspectRatio={Proportion.PREDEFINED_RATIOS.landscape}\n      >\n        <div\n          className={st(classes.imageContainer, {\n            isLoading: this._isLoading(image.src),\n          })}\n          data-hook={dataHooks.imagesContainer}\n        >\n          <img\n            {...image}\n            data-hook={dataHooks.carouselImage}\n            className={classes.image}\n            onLoad={() => this._onImageLoad(image.src)}\n            style={{\n              objectPosition: imagesPosition,\n              objectFit: imagesFit,\n              ...image.style,\n            }}\n          />\n        </div>\n        {this._isLoading(image.src) && (\n          <div className={classes.loader}>\n            <Loader dataHook=\"loader\" size=\"small\" />\n          </div>\n        )}\n      </Proportion>\n    ));\n  };\n\n  _onImageLoad(src) {\n    this.setState(state => ({\n      loadedImages: [...state.loadedImages, src],\n    }));\n  }\n\n  _isLoading(src) {\n    return !this.state.loadedImages.includes(src);\n  }\n}\n\nexport default Carousel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_wixUiIconsCommon","_matchMediaRegister","_reactSlick","_CarouselSt","_Pagination","_SliderArrow","_Loader","_Proportion","_excluded","_jsxFileName","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","AUTOPLAY_SPEED","TRANSITION_SPEED","SLIDES_TO_SHOW","dataHooks","imagesContainer","carouselImage","loader","prevButton","nextButton","pageNavigation","index","concat","WrappedSliderArrow","_ref","currentSlide","slideCount","rest","_objectWithoutProperties2","createElement","_extends2","__self","__source","fileName","lineNumber","columnNumber","isTestEnv","process","env","NODE_ENV","window","matchMedia","register","Carousel","React","Component","constructor","props","leftIconByControlSize","controlSize","ChevronLeftSmall","ChevronLeftLargeSmall","ChevronLeftLarge","rightIconByControlSize","ChevronRightSmall","ChevronRightLargeSmall","ChevronRightLarge","slideTo","_this$sliderRef","sliderRef","current","slickGoTo","_resolveSliderSettings","_ref2","_this$props$children","_this$props$images","infinite","autoplay","dots","variableWidth","buttonSkin","initialSlideIndex","afterChange","beforeChange","controlsPosition","controlsSize","gradient","controlsStartEnd","children","images","speed","autoplaySpeed","initialSlide","slidesToShow","slidesToScroll","prevArrow","dataHook","arrowSize","icon","gradientClassName","classes","arrowPrevBackground","undefined","nextArrow","arrowNextBackground","arrows","appendDots","pages","originalClassName","pagination","customPaging","i","className","_renderImages","imagesPosition","imagesFit","map","image","key","src","aspectRatio","Proportion","PREDEFINED_RATIOS","landscape","st","imageContainer","isLoading","_isLoading","onLoad","_onImageLoad","style","objectPosition","objectFit","size","state","sliderSettings","loadedImages","createRef","setState","includes","render","showControlsShadow","gradientColor","hasImages","root","vars","ref","displayName","propTypes","PropTypes","string","array","oneOf","node","bool","number","func","defaultProps","_default","exports"],"sources":["../../../src/Carousel/Carousel.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  ChevronLeftLarge,\n  ChevronRightLarge,\n  ChevronLeftLargeSmall,\n  ChevronRightLargeSmall,\n  ChevronLeftSmall,\n  ChevronRightSmall,\n} from '@wix/wix-ui-icons-common';\n\n// This is here and not in the test setup because we don't want consumers to need to run it as well\nimport { register } from './utils/match-media-register';\nimport Slider from 'react-slick';\n\nimport { st, classes, vars } from './Carousel.st.css';\nimport Pagination from './Pagination';\nimport SliderArrow from './SliderArrow';\nimport Loader from '../Loader';\nimport Proportion from '../Proportion';\n\nconst AUTOPLAY_SPEED = 3000;\nconst TRANSITION_SPEED = 600;\nconst SLIDES_TO_SHOW = 1;\nconst dataHooks = {\n  imagesContainer: 'images-container',\n  carouselImage: 'carousel-img',\n  loader: 'loader',\n  prevButton: 'prev-button',\n  nextButton: 'next-button',\n  pageNavigation: index => `page-navigation-${index}`,\n};\n\n/**\n * @internal\n * SliderArrow wrapper that passes `...rest` props.\n * This is a workaround for react-slick#1195 arrow error */\nconst WrappedSliderArrow = ({ currentSlide, slideCount, ...rest }) => (\n  <SliderArrow {...rest} />\n);\n\nconst isTestEnv = process.env.NODE_ENV === 'test';\n\nif (isTestEnv && typeof window !== 'undefined' && !window.matchMedia) {\n  register();\n}\n\nclass Carousel extends React.Component {\n  static displayName = 'Carousel';\n\n  static propTypes = {\n    /** Applies a data-hook HTML attribute that can be used in the tests */\n    dataHook: PropTypes.string,\n\n    /** Specifies a CSS class name to be appended to the component’s root element.\n     * @internal\n     */\n\n    className: PropTypes.string,\n\n    /** Defines an array of objects where each contains the `src` of an image (in `<img src=\"your_src\" />`) */\n    images: PropTypes.array,\n\n    /** Sets the image's position */\n    imagesPosition: PropTypes.string,\n\n    /** Sets the image’s fit */\n    imagesFit: PropTypes.oneOf([\n      'fill',\n      'contain',\n      'cover',\n      'none',\n      'scale-down',\n    ]),\n\n    /** Accepts any component as a child item. Most commonly used to display `<Card/>`,  `<Image/>` or video files. */\n    children: PropTypes.node,\n\n    /** Sets the skin of the control (next / previous) buttons */\n    buttonSkin: PropTypes.oneOf(['standard', 'inverted', 'light']),\n\n    /** Drops a shadow below the control buttons */\n    showControlsShadow: PropTypes.bool,\n\n    /** Loops images endlessly */\n    infinite: PropTypes.bool,\n\n    /** Auto-plays images */\n    autoplay: PropTypes.bool,\n\n    /** Controls if the bottom dots are visible or hidden */\n    dots: PropTypes.bool,\n\n    /** Shows one slide at a time (default) or stacks one slide after another horizontally */\n    variableWidth: PropTypes.bool,\n\n    /** Sets the slide to start a presentation with */\n    initialSlideIndex: PropTypes.number,\n\n    /** Index change callback. `index => ...` */\n    afterChange: PropTypes.func,\n\n    /** Index change callback. `(oldIndex, newIndex) => ...` */\n    beforeChange: PropTypes.func,\n\n    /** Sets the control buttons’ position */\n    controlsPosition: PropTypes.oneOf(['sides', 'overlay', 'bottom', 'none']),\n\n    /** Sets the control buttons’ size */\n    controlsSize: PropTypes.oneOf(['tiny', 'small', 'medium']),\n\n    /** Controls if the next / previous control buttons are visible, hidden or disabled at the start and end of the slideshow */\n    controlsStartEnd: PropTypes.oneOf(['disabled', 'hidden']),\n\n    /** Controls gradient color when controlsPosition set to overlay\n     * @default white\n     */\n    gradientColor: PropTypes.string,\n\n    /** Enables gradient on when controlsPosition set to overlay\n     * @default false\n     */\n    gradient: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    infinite: true,\n    dots: true,\n    variableWidth: false,\n    initialSlideIndex: 0,\n    gradient: false,\n    images: [],\n    imagesPosition: 'center top',\n    imagesFit: 'contain',\n    buttonSkin: 'standard',\n    controlsPosition: 'sides',\n    controlsSize: 'medium',\n    controlsStartEnd: 'disabled',\n    showControlsShadow: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      sliderSettings: this._resolveSliderSettings(props),\n      loadedImages: [],\n    };\n\n    this.sliderRef = React.createRef();\n  }\n\n  leftIconByControlSize = controlSize => {\n    switch (controlSize) {\n      case 'tiny':\n        return <ChevronLeftSmall />;\n      case 'small':\n        return <ChevronLeftLargeSmall />;\n      default:\n        return <ChevronLeftLarge />;\n    }\n  };\n\n  rightIconByControlSize = controlSize => {\n    switch (controlSize) {\n      case 'tiny':\n        return <ChevronRightSmall />;\n      case 'small':\n        return <ChevronRightLargeSmall />;\n      default:\n        return <ChevronRightLarge />;\n    }\n  };\n\n  /** Slide to slide by index */\n  slideTo = index => {\n    this.sliderRef?.current.slickGoTo(index);\n  };\n\n  _resolveSliderSettings = ({\n    infinite,\n    autoplay,\n    dots,\n    variableWidth,\n    buttonSkin,\n    initialSlideIndex,\n    afterChange,\n    beforeChange,\n    controlsPosition,\n    controlsSize,\n    gradient,\n    controlsStartEnd,\n  }) => {\n    return {\n      // in order to avoid duplicated items bug react-slick@0.30.2 - https://github.com/akiran/react-slick/issues/1171\n      infinite:\n        (this.props.children?.length || this.props.images?.length) >\n        SLIDES_TO_SHOW\n          ? infinite\n          : false,\n      autoplay,\n      speed: TRANSITION_SPEED,\n      autoplaySpeed: AUTOPLAY_SPEED,\n      initialSlide: initialSlideIndex,\n      dots,\n      slidesToShow: SLIDES_TO_SHOW,\n      slidesToScroll: 1,\n      variableWidth,\n      afterChange,\n      beforeChange,\n      prevArrow: (\n        <WrappedSliderArrow\n          dataHook={dataHooks.prevButton}\n          buttonSkin={buttonSkin}\n          arrowSize={controlsSize}\n          icon={this.leftIconByControlSize(controlsSize)}\n          controlsStartEnd={controlsStartEnd}\n          gradientClassName={\n            !!gradient && controlsPosition === 'overlay'\n              ? classes.arrowPrevBackground\n              : undefined\n          }\n        />\n      ),\n      nextArrow: (\n        <WrappedSliderArrow\n          dataHook={dataHooks.nextButton}\n          buttonSkin={buttonSkin}\n          arrowSize={controlsSize}\n          icon={this.rightIconByControlSize(controlsSize)}\n          controlsStartEnd={controlsStartEnd}\n          gradientClassName={\n            !!gradient && controlsPosition === 'overlay'\n              ? classes.arrowNextBackground\n              : undefined\n          }\n        />\n      ),\n      arrows: controlsPosition !== 'none',\n      appendDots: pages => {\n        /*\n         * originalClassName is a workaround for stylable API extend to work and pass an extendable className.\n         * This is because react-slick overrides brutally the className prop with cloneElement().\n         */\n        return (\n          <Pagination originalClassName={classes.pagination} pages={pages} />\n        );\n      },\n      customPaging: i => (\n        <div\n          className={classes.pageNavigation}\n          data-hook={dataHooks.pageNavigation(i)}\n        >\n          {i}\n        </div>\n      ),\n    };\n  };\n\n  _renderImages = images => {\n    const { imagesPosition, imagesFit } = this.props;\n    return images.map((image, index) => (\n      <Proportion\n        key={`${index}${image.src}`}\n        aspectRatio={Proportion.PREDEFINED_RATIOS.landscape}\n      >\n        <div\n          className={st(classes.imageContainer, {\n            isLoading: this._isLoading(image.src),\n          })}\n          data-hook={dataHooks.imagesContainer}\n        >\n          <img\n            {...image}\n            data-hook={dataHooks.carouselImage}\n            className={classes.image}\n            onLoad={() => this._onImageLoad(image.src)}\n            style={{\n              objectPosition: imagesPosition,\n              objectFit: imagesFit,\n              ...image.style,\n            }}\n          />\n        </div>\n        {this._isLoading(image.src) && (\n          <div className={classes.loader}>\n            <Loader dataHook=\"loader\" size=\"small\" />\n          </div>\n        )}\n      </Proportion>\n    ));\n  };\n\n  _onImageLoad(src) {\n    this.setState(state => ({\n      loadedImages: [...state.loadedImages, src],\n    }));\n  }\n\n  _isLoading(src) {\n    return !this.state.loadedImages.includes(src);\n  }\n\n  render() {\n    const {\n      dataHook,\n      className,\n      images,\n      children,\n      controlsPosition,\n      controlsSize,\n      showControlsShadow,\n      gradient,\n      gradientColor,\n      dots,\n    } = this.props;\n    const { sliderSettings } = this.state;\n    const hasImages = !children && images.length > 0;\n\n    return (\n      <div\n        data-hook={dataHook}\n        className={st(\n          classes.root,\n          {\n            controlsPosition,\n            controlsSize,\n            showControlsShadow,\n            gradient,\n            dots\n          },\n          className,\n        )}\n        style={{ [vars['carousel-gradient-color']]: gradientColor }}\n      >\n        <Slider ref={this.sliderRef} {...sliderSettings}>\n          {children}\n          {hasImages && this._renderImages(images)}\n        </Slider>\n      </div>\n    );\n  }\n}\n\nexport default Carousel;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAUA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,YAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,OAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,WAAA,GAAAV,sBAAA,CAAAC,OAAA;AAAuC,IAAAU,SAAA;AAAA,IAAAC,YAAA,qGARvC;AAAA,SAAAC,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,CAAAC,OAAA,EAAAjB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAnB,CAAA,EAAAG,MAAA,CAAAe,yBAAA,CAAAhB,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAiB,cAAA,CAAApB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAUA,IAAMqB,cAAc,GAAG,IAAI;AAC3B,IAAMC,gBAAgB,GAAG,GAAG;AAC5B,IAAMC,cAAc,GAAG,CAAC;AACxB,IAAMC,SAAS,GAAG;EAChBC,eAAe,EAAE,kBAAkB;EACnCC,aAAa,EAAE,cAAc;EAC7BC,MAAM,EAAE,QAAQ;EAChBC,UAAU,EAAE,aAAa;EACzBC,UAAU,EAAE,aAAa;EACzBC,cAAc,EAAEC,KAAK,uBAAAC,MAAA,CAAuBD,KAAK;AACnD,CAAC;;AAED;AACA;AACA;AACA;AACA,IAAME,kBAAkB,GAAGC,IAAA;EAAA,IAAC;MAAEC,YAAY;MAAEC;IAAoB,CAAC,GAAAF,IAAA;IAANG,IAAI,OAAAC,yBAAA,CAAArB,OAAA,EAAAiB,IAAA,EAAArC,SAAA;EAAA,oBAC7DZ,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAC7C,YAAA,CAAAuB,OAAW,MAAAuB,SAAA,CAAAvB,OAAA,MAAKoB,IAAI;IAAAI,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7C,YAAA;MAAA8C,UAAA;MAAAC,YAAA;IAAA;EAAA,EAAG,CAAC;AAAA,CAC1B;AAED,IAAMC,SAAS,GAAGC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM;AAEjD,IAAIH,SAAS,IAAI,OAAOI,MAAM,KAAK,WAAW,IAAI,CAACA,MAAM,CAACC,UAAU,EAAE;EACpE,IAAAC,4BAAQ,EAAC,CAAC;AACZ;AAEA,MAAMC,QAAQ,SAASC,cAAK,CAACC,SAAS,CAAC;EA8FrCC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,KASfC,qBAAqB,GAAGC,WAAW,IAAI;MACrC,QAAQA,WAAW;QACjB,KAAK,MAAM;UACT,oBAAO1E,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAClD,iBAAA,CAAAuE,gBAAgB;YAAAnB,MAAA;YAAAC,QAAA;cAAAC,QAAA,EAAA7C,YAAA;cAAA8C,UAAA;cAAAC,YAAA;YAAA;UAAA,CAAE,CAAC;QAC7B,KAAK,OAAO;UACV,oBAAO5D,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAClD,iBAAA,CAAAwE,qBAAqB;YAAApB,MAAA;YAAAC,QAAA;cAAAC,QAAA,EAAA7C,YAAA;cAAA8C,UAAA;cAAAC,YAAA;YAAA;UAAA,CAAE,CAAC;QAClC;UACE,oBAAO5D,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAClD,iBAAA,CAAAyE,gBAAgB;YAAArB,MAAA;YAAAC,QAAA;cAAAC,QAAA,EAAA7C,YAAA;cAAA8C,UAAA;cAAAC,YAAA;YAAA;UAAA,CAAE,CAAC;MAC/B;IACF,CAAC;IAAA,KAEDkB,sBAAsB,GAAGJ,WAAW,IAAI;MACtC,QAAQA,WAAW;QACjB,KAAK,MAAM;UACT,oBAAO1E,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAClD,iBAAA,CAAA2E,iBAAiB;YAAAvB,MAAA;YAAAC,QAAA;cAAAC,QAAA,EAAA7C,YAAA;cAAA8C,UAAA;cAAAC,YAAA;YAAA;UAAA,CAAE,CAAC;QAC9B,KAAK,OAAO;UACV,oBAAO5D,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAClD,iBAAA,CAAA4E,sBAAsB;YAAAxB,MAAA;YAAAC,QAAA;cAAAC,QAAA,EAAA7C,YAAA;cAAA8C,UAAA;cAAAC,YAAA;YAAA;UAAA,CAAE,CAAC;QACnC;UACE,oBAAO5D,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAClD,iBAAA,CAAA6E,iBAAiB;YAAAzB,MAAA;YAAAC,QAAA;cAAAC,QAAA,EAAA7C,YAAA;cAAA8C,UAAA;cAAAC,YAAA;YAAA;UAAA,CAAE,CAAC;MAChC;IACF,CAAC;IAED;IAAA,KACAsB,OAAO,GAAGpC,KAAK,IAAI;MAAA,IAAAqC,eAAA;MACjB,CAAAA,eAAA,OAAI,CAACC,SAAS,aAAdD,eAAA,CAAgBE,OAAO,CAACC,SAAS,CAACxC,KAAK,CAAC;IAC1C,CAAC;IAAA,KAEDyC,sBAAsB,GAAGC,KAAA,IAanB;MAAA,IAAAC,oBAAA,EAAAC,kBAAA;MAAA,IAboB;QACxBC,QAAQ;QACRC,QAAQ;QACRC,IAAI;QACJC,aAAa;QACbC,UAAU;QACVC,iBAAiB;QACjBC,WAAW;QACXC,YAAY;QACZC,gBAAgB;QAChBC,YAAY;QACZC,QAAQ;QACRC;MACF,CAAC,GAAAd,KAAA;MACC,OAAO;QACL;QACAG,QAAQ,EACN,CAAC,EAAAF,oBAAA,OAAI,CAACjB,KAAK,CAAC+B,QAAQ,qBAAnBd,oBAAA,CAAqB5D,MAAM,OAAA6D,kBAAA,GAAI,IAAI,CAAClB,KAAK,CAACgC,MAAM,qBAAjBd,kBAAA,CAAmB7D,MAAM,KACzDS,cAAc,GACVqD,QAAQ,GACR,KAAK;QACXC,QAAQ;QACRa,KAAK,EAAEpE,gBAAgB;QACvBqE,aAAa,EAAEtE,cAAc;QAC7BuE,YAAY,EAAEX,iBAAiB;QAC/BH,IAAI;QACJe,YAAY,EAAEtE,cAAc;QAC5BuE,cAAc,EAAE,CAAC;QACjBf,aAAa;QACbG,WAAW;QACXC,YAAY;QACZY,SAAS,eACP9G,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAACN,kBAAkB;UACjB+D,QAAQ,EAAExE,SAAS,CAACI,UAAW;UAC/BoD,UAAU,EAAEA,UAAW;UACvBiB,SAAS,EAAEZ,YAAa;UACxBa,IAAI,EAAE,IAAI,CAACxC,qBAAqB,CAAC2B,YAAY,CAAE;UAC/CE,gBAAgB,EAAEA,gBAAiB;UACnCY,iBAAiB,EACf,CAAC,CAACb,QAAQ,IAAIF,gBAAgB,KAAK,SAAS,GACxCgB,mBAAO,CAACC,mBAAmB,GAC3BC,SACL;UAAA7D,MAAA;UAAAC,QAAA;YAAAC,QAAA,EAAA7C,YAAA;YAAA8C,UAAA;YAAAC,YAAA;UAAA;QAAA,CACF,CACF;QACD0D,SAAS,eACPtH,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAACN,kBAAkB;UACjB+D,QAAQ,EAAExE,SAAS,CAACK,UAAW;UAC/BmD,UAAU,EAAEA,UAAW;UACvBiB,SAAS,EAAEZ,YAAa;UACxBa,IAAI,EAAE,IAAI,CAACnC,sBAAsB,CAACsB,YAAY,CAAE;UAChDE,gBAAgB,EAAEA,gBAAiB;UACnCY,iBAAiB,EACf,CAAC,CAACb,QAAQ,IAAIF,gBAAgB,KAAK,SAAS,GACxCgB,mBAAO,CAACI,mBAAmB,GAC3BF,SACL;UAAA7D,MAAA;UAAAC,QAAA;YAAAC,QAAA,EAAA7C,YAAA;YAAA8C,UAAA;YAAAC,YAAA;UAAA;QAAA,CACF,CACF;QACD4D,MAAM,EAAErB,gBAAgB,KAAK,MAAM;QACnCsB,UAAU,EAAEC,KAAK,IAAI;UACnB;AACR;AACA;AACA;UACQ,oBACE1H,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAC9C,WAAA,CAAAwB,OAAU;YAAC2F,iBAAiB,EAAER,mBAAO,CAACS,UAAW;YAACF,KAAK,EAAEA,KAAM;YAAAlE,MAAA;YAAAC,QAAA;cAAAC,QAAA,EAAA7C,YAAA;cAAA8C,UAAA;cAAAC,YAAA;YAAA;UAAA,CAAE,CAAC;QAEvE,CAAC;QACDiE,YAAY,EAAEC,CAAC,iBACb9H,MAAA,CAAAgC,OAAA,CAAAsB,aAAA;UACEyE,SAAS,EAAEZ,mBAAO,CAACtE,cAAe;UAClC,aAAWN,SAAS,CAACM,cAAc,CAACiF,CAAC,CAAE;UAAAtE,MAAA;UAAAC,QAAA;YAAAC,QAAA,EAAA7C,YAAA;YAAA8C,UAAA;YAAAC,YAAA;UAAA;QAAA,GAEtCkE,CACE;MAET,CAAC;IACH,CAAC;IAAA,KAEDE,aAAa,GAAGxB,MAAM,IAAI;MACxB,IAAM;QAAEyB,cAAc;QAAEC;MAAU,CAAC,GAAG,IAAI,CAAC1D,KAAK;MAChD,OAAOgC,MAAM,CAAC2B,GAAG,CAAC,CAACC,KAAK,EAAEtF,KAAK,kBAC7B9C,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAC3C,WAAA,CAAAqB,OAAU;QACTqG,GAAG,KAAAtF,MAAA,CAAKD,KAAK,EAAAC,MAAA,CAAGqF,KAAK,CAACE,GAAG,CAAG;QAC5BC,WAAW,EAAEC,mBAAU,CAACC,iBAAiB,CAACC,SAAU;QAAAlF,MAAA;QAAAC,QAAA;UAAAC,QAAA,EAAA7C,YAAA;UAAA8C,UAAA;UAAAC,YAAA;QAAA;MAAA,gBAEpD5D,MAAA,CAAAgC,OAAA,CAAAsB,aAAA;QACEyE,SAAS,EAAE,IAAAY,cAAE,EAACxB,mBAAO,CAACyB,cAAc,EAAE;UACpCC,SAAS,EAAE,IAAI,CAACC,UAAU,CAACV,KAAK,CAACE,GAAG;QACtC,CAAC,CAAE;QACH,aAAW/F,SAAS,CAACC,eAAgB;QAAAgB,MAAA;QAAAC,QAAA;UAAAC,QAAA,EAAA7C,YAAA;UAAA8C,UAAA;UAAAC,YAAA;QAAA;MAAA,gBAErC5D,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,YAAAC,SAAA,CAAAvB,OAAA,MACMoG,KAAK;QACT,aAAW7F,SAAS,CAACE,aAAc;QACnCsF,SAAS,EAAEZ,mBAAO,CAACiB,KAAM;QACzBW,MAAM,EAAEA,CAAA,KAAM,IAAI,CAACC,YAAY,CAACZ,KAAK,CAACE,GAAG,CAAE;QAC3CW,KAAK,EAAAtH,aAAA;UACHuH,cAAc,EAAEjB,cAAc;UAC9BkB,SAAS,EAAEjB;QAAS,GACjBE,KAAK,CAACa,KAAK,CACd;QAAAzF,MAAA;QAAAC,QAAA;UAAAC,QAAA,EAAA7C,YAAA;UAAA8C,UAAA;UAAAC,YAAA;QAAA;MAAA,EACH,CACE,CAAC,EACL,IAAI,CAACkF,UAAU,CAACV,KAAK,CAACE,GAAG,CAAC,iBACzBtI,MAAA,CAAAgC,OAAA,CAAAsB,aAAA;QAAKyE,SAAS,EAAEZ,mBAAO,CAACzE,MAAO;QAAAc,MAAA;QAAAC,QAAA;UAAAC,QAAA,EAAA7C,YAAA;UAAA8C,UAAA;UAAAC,YAAA;QAAA;MAAA,gBAC7B5D,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAC5C,OAAA,CAAAsB,OAAM;QAAC+E,QAAQ,EAAC,QAAQ;QAACqC,IAAI,EAAC,OAAO;QAAA5F,MAAA;QAAAC,QAAA;UAAAC,QAAA,EAAA7C,YAAA;UAAA8C,UAAA;UAAAC,YAAA;QAAA;MAAA,CAAE,CACrC,CAEG,CACb,CAAC;IACJ,CAAC;IAnJC,IAAI,CAACyF,KAAK,GAAG;MACXC,cAAc,EAAE,IAAI,CAAC/D,sBAAsB,CAACf,KAAK,CAAC;MAClD+E,YAAY,EAAE;IAChB,CAAC;IAED,IAAI,CAACnE,SAAS,gBAAGf,cAAK,CAACmF,SAAS,CAAC,CAAC;EACpC;EA+IAR,YAAYA,CAACV,GAAG,EAAE;IAChB,IAAI,CAACmB,QAAQ,CAACJ,KAAK,KAAK;MACtBE,YAAY,EAAE,CAAC,GAAGF,KAAK,CAACE,YAAY,EAAEjB,GAAG;IAC3C,CAAC,CAAC,CAAC;EACL;EAEAQ,UAAUA,CAACR,GAAG,EAAE;IACd,OAAO,CAAC,IAAI,CAACe,KAAK,CAACE,YAAY,CAACG,QAAQ,CAACpB,GAAG,CAAC;EAC/C;EAEAqB,MAAMA,CAAA,EAAG;IACP,IAAM;MACJ5C,QAAQ;MACRgB,SAAS;MACTvB,MAAM;MACND,QAAQ;MACRJ,gBAAgB;MAChBC,YAAY;MACZwD,kBAAkB;MAClBvD,QAAQ;MACRwD,aAAa;MACbhE;IACF,CAAC,GAAG,IAAI,CAACrB,KAAK;IACd,IAAM;MAAE8E;IAAe,CAAC,GAAG,IAAI,CAACD,KAAK;IACrC,IAAMS,SAAS,GAAG,CAACvD,QAAQ,IAAIC,MAAM,CAAC3E,MAAM,GAAG,CAAC;IAEhD,oBACE7B,MAAA,CAAAgC,OAAA,CAAAsB,aAAA;MACE,aAAWyD,QAAS;MACpBgB,SAAS,EAAE,IAAAY,cAAE,EACXxB,mBAAO,CAAC4C,IAAI,EACZ;QACE5D,gBAAgB;QAChBC,YAAY;QACZwD,kBAAkB;QAClBvD,QAAQ;QACRR;MACF,CAAC,EACDkC,SACF,CAAE;MACFkB,KAAK,EAAE;QAAE,CAACe,gBAAI,CAAC,yBAAyB,CAAC,GAAGH;MAAc,CAAE;MAAArG,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA7C,YAAA;QAAA8C,UAAA;QAAAC,YAAA;MAAA;IAAA,gBAE5D5D,MAAA,CAAAgC,OAAA,CAAAsB,aAAA,CAAChD,WAAA,CAAA0B,OAAM,MAAAuB,SAAA,CAAAvB,OAAA;MAACiI,GAAG,EAAE,IAAI,CAAC7E;IAAU,GAAKkE,cAAc;MAAA9F,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA7C,YAAA;QAAA8C,UAAA;QAAAC,YAAA;MAAA;IAAA,IAC5C2C,QAAQ,EACRuD,SAAS,IAAI,IAAI,CAAC9B,aAAa,CAACxB,MAAM,CACjC,CACL,CAAC;EAEV;AACF;AAtSMpC,QAAQ,CACL8F,WAAW,GAAG,UAAU;AAD3B9F,QAAQ,CAGL+F,SAAS,GAAG;EACjB;EACApD,QAAQ,EAAEqD,kBAAS,CAACC,MAAM;EAE1B;AACJ;AACA;;EAEItC,SAAS,EAAEqC,kBAAS,CAACC,MAAM;EAE3B;EACA7D,MAAM,EAAE4D,kBAAS,CAACE,KAAK;EAEvB;EACArC,cAAc,EAAEmC,kBAAS,CAACC,MAAM;EAEhC;EACAnC,SAAS,EAAEkC,kBAAS,CAACG,KAAK,CAAC,CACzB,MAAM,EACN,SAAS,EACT,OAAO,EACP,MAAM,EACN,YAAY,CACb,CAAC;EAEF;EACAhE,QAAQ,EAAE6D,kBAAS,CAACI,IAAI;EAExB;EACAzE,UAAU,EAAEqE,kBAAS,CAACG,KAAK,CAAC,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;EAE9D;EACAX,kBAAkB,EAAEQ,kBAAS,CAACK,IAAI;EAElC;EACA9E,QAAQ,EAAEyE,kBAAS,CAACK,IAAI;EAExB;EACA7E,QAAQ,EAAEwE,kBAAS,CAACK,IAAI;EAExB;EACA5E,IAAI,EAAEuE,kBAAS,CAACK,IAAI;EAEpB;EACA3E,aAAa,EAAEsE,kBAAS,CAACK,IAAI;EAE7B;EACAzE,iBAAiB,EAAEoE,kBAAS,CAACM,MAAM;EAEnC;EACAzE,WAAW,EAAEmE,kBAAS,CAACO,IAAI;EAE3B;EACAzE,YAAY,EAAEkE,kBAAS,CAACO,IAAI;EAE5B;EACAxE,gBAAgB,EAAEiE,kBAAS,CAACG,KAAK,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;EAEzE;EACAnE,YAAY,EAAEgE,kBAAS,CAACG,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;EAE1D;EACAjE,gBAAgB,EAAE8D,kBAAS,CAACG,KAAK,CAAC,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;EAEzD;AACJ;AACA;EACIV,aAAa,EAAEO,kBAAS,CAACC,MAAM;EAE/B;AACJ;AACA;EACIhE,QAAQ,EAAE+D,kBAAS,CAACK;AACtB,CAAC;AA5EGrG,QAAQ,CA8ELwG,YAAY,GAAG;EACpBjF,QAAQ,EAAE,IAAI;EACdE,IAAI,EAAE,IAAI;EACVC,aAAa,EAAE,KAAK;EACpBE,iBAAiB,EAAE,CAAC;EACpBK,QAAQ,EAAE,KAAK;EACfG,MAAM,EAAE,EAAE;EACVyB,cAAc,EAAE,YAAY;EAC5BC,SAAS,EAAE,SAAS;EACpBnC,UAAU,EAAE,UAAU;EACtBI,gBAAgB,EAAE,OAAO;EACzBC,YAAY,EAAE,QAAQ;EACtBE,gBAAgB,EAAE,UAAU;EAC5BsD,kBAAkB,EAAE;AACtB,CAAC;AAAA,IAAAiB,QAAA,GAAAC,OAAA,CAAA9I,OAAA,GA4MYoC,QAAQ","ignoreList":[]}

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

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_165_0_Carousel";
+var _namespace_ = "wds_1_166_0_Carousel";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -14,12 +14,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_Carousel__root","controls":"wds_1_165_0_Carousel__controls","imageContainer":"wds_1_165_0_Carousel__imageContainer","image":"wds_1_165_0_Carousel__image","loader":"wds_1_165_0_Carousel__loader","pagination":"wds_1_165_0_Carousel__pagination","pageNavigation":"wds_1_165_0_Carousel__pageNavigation"};
+module.exports.classes = {"root":"wds_1_166_0_Carousel__root","controls":"wds_1_166_0_Carousel__controls","imageContainer":"wds_1_166_0_Carousel__imageContainer","image":"wds_1_166_0_Carousel__image","loader":"wds_1_166_0_Carousel__loader","pagination":"wds_1_166_0_Carousel__pagination","pageNavigation":"wds_1_166_0_Carousel__pageNavigation","arrowPrevBackground":"wds_1_166_0_Carousel__arrowPrevBackground","arrowNextBackground":"wds_1_166_0_Carousel__arrowNextBackground"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {"horizontalSpacingSize":"50px","verticalSpacingSize":"7px"}; 
-module.exports.vars = {"arrow-size":"--wds_1_165_0_Carousel-arrow-size"}; 
+module.exports.vars = {"arrow-size":"--wds_1_166_0_Carousel-arrow-size","carousel-gradient-color":"--carousel-gradient-color"}; 
 
 
 

package/dist/cjs/Carousel/Pagination/Pagination.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_165_0_CarouselPagination";
+var _namespace_ = "wds_1_166_0_CarouselPagination";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_CarouselPagination__root","dot":"wds_1_165_0_CarouselPagination__dot"};
+module.exports.classes = {"root":"wds_1_166_0_CarouselPagination__root","dot":"wds_1_166_0_CarouselPagination__dot"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Carousel/SliderArrow/SliderArrow.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _IconButton = _interopRequireDefault(require("../../IconButton/IconButton"));
 var _CarouselSt = require("../Carousel.st.css.js");
-var _excluded = ["dataHook", "arrowSize", "buttonSkin", "icon", "className", "controlsStartEnd"];
+var _excluded = ["dataHook", "arrowSize", "buttonSkin", "icon", "className", "gradientClassName", "controlsStartEnd"];
 var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/Carousel/SliderArrow/SliderArrow.js";
 var skinPriorityMap = {
   standard: 'secondary',
@@ -25,33 +25,50 @@ var SliderArrow = _ref => {
       buttonSkin,
       icon,
       className,
+      // do not pass - this is overrided by react-slick slider
+      gradientClassName,
       controlsStartEnd
     } = _ref,
     remainingProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isControlOnEdge = className.includes('slick-disabled');
-  return isControlOnEdge && controlsStartEnd === 'hidden' ? null : /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
-    "data-hook": dataHook,
+  if (isControlOnEdge && controlsStartEnd === 'hidden') {
+    return null;
+  }
+  var arrow = /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    dataHook: "".concat(dataHook, "-element"),
+    className: (0, _CarouselSt.st)(_CarouselSt.classes.controls),
+    skin: buttonSkin,
+    size: arrowSize,
+    disabled: isControlOnEdge,
+    priority: skinPriorityMap[buttonSkin],
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 31,
+      columnNumber: 5
+    }
+  }, icon);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
     className: className,
+    "data-hook": dataHook,
+    style: {
+      height: '100%'
+    },
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 26,
+      lineNumber: 44,
       columnNumber: 5
     }
-  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    dataHook: "".concat(dataHook, "-element"),
-    className: _CarouselSt.classes.controls,
-    skin: buttonSkin,
-    size: arrowSize,
-    disabled: isControlOnEdge,
-    priority: skinPriorityMap[buttonSkin],
+  }), !!gradientClassName ? /*#__PURE__*/_react.default.createElement("div", {
+    className: gradientClassName,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 27,
-      columnNumber: 7
+      lineNumber: 51,
+      columnNumber: 9
     }
-  }, icon));
+  }, arrow) : arrow);
 };
 SliderArrow.propTypes = {
   /** Applied as data-hook HTML attribute that can be used in the tests */

package/dist/cjs/Carousel/SliderArrow/SliderArrow.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_IconButton","_CarouselSt","_excluded","_jsxFileName","skinPriorityMap","standard","inverted","light","transparent","premium","SliderArrow","_ref","dataHook","arrowSize","buttonSkin","icon","className","controlsStartEnd","remainingProps","_objectWithoutProperties2","default","isControlOnEdge","includes","createElement","_extends2","__self","__source","fileName","lineNumber","columnNumber","concat","classes","controls","skin","size","disabled","priority","propTypes","PropTypes","string","element","isRequired","_default","exports"],"sources":["../../../../src/Carousel/SliderArrow/SliderArrow.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport IconButton from '../../IconButton/IconButton';\nimport { classes } from '../Carousel.st.css';\n\nconst skinPriorityMap = {\n  standard: 'secondary',\n  inverted: 'primary',\n  light: 'primary',\n  transparent: 'primary',\n  premium: 'primary',\n};\n\nconst SliderArrow = ({\n  dataHook,\n  arrowSize,\n  buttonSkin,\n  icon,\n  className,\n  controlsStartEnd,\n  ...remainingProps\n}) => {\n  const isControlOnEdge = className.includes('slick-disabled');\n\n  return isControlOnEdge && controlsStartEnd === 'hidden' ? null : (\n    <div {...remainingProps} data-hook={dataHook} className={className}>\n      <IconButton\n        dataHook={`${dataHook}-element`}\n        className={classes.controls}\n        skin={buttonSkin}\n        size={arrowSize}\n        disabled={isControlOnEdge}\n        priority={skinPriorityMap[buttonSkin]}\n      >\n        {icon}\n      </IconButton>\n    </div>\n  );\n};\n\nSliderArrow.propTypes = {\n  /** Applied as data-hook HTML attribute that can be used in the tests */\n  dataHook: PropTypes.string,\n  /** Icon to be rendered within the icon button */\n  icon: PropTypes.element.isRequired,\n};\n\nexport default SliderArrow;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAA6C,IAAAI,SAAA;AAAA,IAAAC,YAAA;AAE7C,IAAMC,eAAe,GAAG;EACtBC,QAAQ,EAAE,WAAW;EACrBC,QAAQ,EAAE,SAAS;EACnBC,KAAK,EAAE,SAAS;EAChBC,WAAW,EAAE,SAAS;EACtBC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,WAAW,GAAGC,IAAA,IAQd;EAAA,IARe;MACnBC,QAAQ;MACRC,SAAS;MACTC,UAAU;MACVC,IAAI;MACJC,SAAS;MACTC;IAEF,CAAC,GAAAN,IAAA;IADIO,cAAc,OAAAC,yBAAA,CAAAC,OAAA,EAAAT,IAAA,EAAAT,SAAA;EAEjB,IAAMmB,eAAe,GAAGL,SAAS,CAACM,QAAQ,CAAC,gBAAgB,CAAC;EAE5D,OAAOD,eAAe,IAAIJ,gBAAgB,KAAK,QAAQ,GAAG,IAAI,gBAC5DrB,MAAA,CAAAwB,OAAA,CAAAG,aAAA,YAAAC,SAAA,CAAAJ,OAAA,MAASF,cAAc;IAAE,aAAWN,QAAS;IAACI,SAAS,EAAEA,SAAU;IAAAS,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxB,YAAA;MAAAyB,UAAA;MAAAC,YAAA;IAAA;EAAA,iBACjEjC,MAAA,CAAAwB,OAAA,CAAAG,aAAA,CAACvB,WAAA,CAAAoB,OAAU;IACTR,QAAQ,KAAAkB,MAAA,CAAKlB,QAAQ,aAAW;IAChCI,SAAS,EAAEe,mBAAO,CAACC,QAAS;IAC5BC,IAAI,EAAEnB,UAAW;IACjBoB,IAAI,EAAErB,SAAU;IAChBsB,QAAQ,EAAEd,eAAgB;IAC1Be,QAAQ,EAAEhC,eAAe,CAACU,UAAU,CAAE;IAAAW,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxB,YAAA;MAAAyB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAErCd,IACS,CACT,CACN;AACH,CAAC;AAEDL,WAAW,CAAC2B,SAAS,GAAG;EACtB;EACAzB,QAAQ,EAAE0B,kBAAS,CAACC,MAAM;EAC1B;EACAxB,IAAI,EAAEuB,kBAAS,CAACE,OAAO,CAACC;AAC1B,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvB,OAAA,GAEaV,WAAW","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_IconButton","_CarouselSt","_excluded","_jsxFileName","skinPriorityMap","standard","inverted","light","transparent","premium","SliderArrow","_ref","dataHook","arrowSize","buttonSkin","icon","className","gradientClassName","controlsStartEnd","remainingProps","_objectWithoutProperties2","default","isControlOnEdge","includes","arrow","createElement","concat","st","classes","controls","skin","size","disabled","priority","__self","__source","fileName","lineNumber","columnNumber","_extends2","style","height","propTypes","PropTypes","string","element","isRequired","_default","exports"],"sources":["../../../../src/Carousel/SliderArrow/SliderArrow.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport IconButton from '../../IconButton/IconButton';\nimport { st, classes } from '../Carousel.st.css';\n\nconst skinPriorityMap = {\n  standard: 'secondary',\n  inverted: 'primary',\n  light: 'primary',\n  transparent: 'primary',\n  premium: 'primary',\n};\n\nconst SliderArrow = ({\n  dataHook,\n  arrowSize,\n  buttonSkin,\n  icon,\n  className, // do not pass - this is overrided by react-slick slider\n  gradientClassName,\n  controlsStartEnd,\n  ...remainingProps\n}) => {\n  const isControlOnEdge = className.includes('slick-disabled');\n\n  if (isControlOnEdge && controlsStartEnd === 'hidden') {\n    return null;\n  }\n\n  const arrow = (\n    <IconButton\n      dataHook={`${dataHook}-element`}\n      className={st(classes.controls)}\n      skin={buttonSkin}\n      size={arrowSize}\n      disabled={isControlOnEdge}\n      priority={skinPriorityMap[buttonSkin]}\n    >\n      {icon}\n    </IconButton>\n  );\n\n  return (\n    <div\n      {...remainingProps}\n      className={className}\n      data-hook={dataHook}\n      style={{ height: '100%' }}\n    >\n      {!!gradientClassName ? (\n        <div className={gradientClassName}>{arrow}</div>\n      ) : (\n        arrow\n      )}\n    </div>\n  );\n};\n\nSliderArrow.propTypes = {\n  /** Applied as data-hook HTML attribute that can be used in the tests */\n  dataHook: PropTypes.string,\n  /** Icon to be rendered within the icon button */\n  icon: PropTypes.element.isRequired,\n};\n\nexport default SliderArrow;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAiD,IAAAI,SAAA;AAAA,IAAAC,YAAA;AAEjD,IAAMC,eAAe,GAAG;EACtBC,QAAQ,EAAE,WAAW;EACrBC,QAAQ,EAAE,SAAS;EACnBC,KAAK,EAAE,SAAS;EAChBC,WAAW,EAAE,SAAS;EACtBC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,WAAW,GAAGC,IAAA,IASd;EAAA,IATe;MACnBC,QAAQ;MACRC,SAAS;MACTC,UAAU;MACVC,IAAI;MACJC,SAAS;MAAE;MACXC,iBAAiB;MACjBC;IAEF,CAAC,GAAAP,IAAA;IADIQ,cAAc,OAAAC,yBAAA,CAAAC,OAAA,EAAAV,IAAA,EAAAT,SAAA;EAEjB,IAAMoB,eAAe,GAAGN,SAAS,CAACO,QAAQ,CAAC,gBAAgB,CAAC;EAE5D,IAAID,eAAe,IAAIJ,gBAAgB,KAAK,QAAQ,EAAE;IACpD,OAAO,IAAI;EACb;EAEA,IAAMM,KAAK,gBACT5B,MAAA,CAAAyB,OAAA,CAAAI,aAAA,CAACzB,WAAA,CAAAqB,OAAU;IACTT,QAAQ,KAAAc,MAAA,CAAKd,QAAQ,aAAW;IAChCI,SAAS,EAAE,IAAAW,cAAE,EAACC,mBAAO,CAACC,QAAQ,CAAE;IAChCC,IAAI,EAAEhB,UAAW;IACjBiB,IAAI,EAAElB,SAAU;IAChBmB,QAAQ,EAAEV,eAAgB;IAC1BW,QAAQ,EAAE7B,eAAe,CAACU,UAAU,CAAE;IAAAoB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjC,YAAA;MAAAkC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAErCvB,IACS,CACb;EAED,oBACEnB,MAAA,CAAAyB,OAAA,CAAAI,aAAA,YAAAc,SAAA,CAAAlB,OAAA,MACMF,cAAc;IAClBH,SAAS,EAAEA,SAAU;IACrB,aAAWJ,QAAS;IACpB4B,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAO,CAAE;IAAAP,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjC,YAAA;MAAAkC,UAAA;MAAAC,YAAA;IAAA;EAAA,IAEzB,CAAC,CAACrB,iBAAiB,gBAClBrB,MAAA,CAAAyB,OAAA,CAAAI,aAAA;IAAKT,SAAS,EAAEC,iBAAkB;IAAAiB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjC,YAAA;MAAAkC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAAEd,KAAW,CAAC,GAEhDA,KAEC,CAAC;AAEV,CAAC;AAEDd,WAAW,CAACgC,SAAS,GAAG;EACtB;EACA9B,QAAQ,EAAE+B,kBAAS,CAACC,MAAM;EAC1B;EACA7B,IAAI,EAAE4B,kBAAS,CAACE,OAAO,CAACC;AAC1B,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEaX,WAAW","ignoreList":[]}

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_165_0_CarouselWIP";
+var _namespace_ = "wds_1_166_0_CarouselWIP";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_CarouselWIP__root","carousel":"wds_1_165_0_CarouselWIP__carousel","control":"wds_1_165_0_CarouselWIP__control","prev":"wds_1_165_0_CarouselWIP__prev","next":"wds_1_165_0_CarouselWIP__next","start":"wds_1_165_0_CarouselWIP__start","end":"wds_1_165_0_CarouselWIP__end","dots":"wds_1_165_0_CarouselWIP__dots","dot":"wds_1_165_0_CarouselWIP__dot","loader":"wds_1_165_0_CarouselWIP__loader"};
+module.exports.classes = {"root":"wds_1_166_0_CarouselWIP__root","carousel":"wds_1_166_0_CarouselWIP__carousel","control":"wds_1_166_0_CarouselWIP__control","prev":"wds_1_166_0_CarouselWIP__prev","next":"wds_1_166_0_CarouselWIP__next","start":"wds_1_166_0_CarouselWIP__start","end":"wds_1_166_0_CarouselWIP__end","dots":"wds_1_166_0_CarouselWIP__dots","dot":"wds_1_166_0_CarouselWIP__dot","loader":"wds_1_166_0_CarouselWIP__loader"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {"horizontalSpacingSize":"50px","verticalSpacingSize":"7px"}; 
-module.exports.vars = {"arrow-size":"--wds_1_165_0_CarouselWIP-arrow-size","sidesGradientColor":"--wds_1_165_0_CarouselWIP-sidesGradientColor"}; 
+module.exports.vars = {"arrow-size":"--wds_1_166_0_CarouselWIP-arrow-size","sidesGradientColor":"--wds_1_166_0_CarouselWIP-sidesGradientColor"}; 
 
 
 

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

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_165_0_CheckToggle";
+var _namespace_ = "wds_1_166_0_CheckToggle";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_CheckToggle__root","input":"wds_1_165_0_CheckToggle__input","toggle":"wds_1_165_0_CheckToggle__toggle"};
+module.exports.classes = {"root":"wds_1_166_0_CheckToggle__root","input":"wds_1_166_0_CheckToggle__input","toggle":"wds_1_166_0_CheckToggle__toggle"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_165_0_Checkbox";
+var _namespace_ = "wds_1_166_0_Checkbox";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -14,7 +14,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_Checkbox__root","label":"wds_1_165_0_Checkbox__label","labelInner":"wds_1_165_0_Checkbox__labelInner","children":"wds_1_165_0_Checkbox__children","checkbox":"wds_1_165_0_Checkbox__checkbox","inner":"wds_1_165_0_Checkbox__inner","outer":"wds_1_165_0_Checkbox__outer"};
+module.exports.classes = {"root":"wds_1_166_0_Checkbox__root","label":"wds_1_166_0_Checkbox__label","labelInner":"wds_1_166_0_Checkbox__labelInner","children":"wds_1_166_0_Checkbox__children","checkbox":"wds_1_166_0_Checkbox__checkbox","inner":"wds_1_166_0_Checkbox__inner","outer":"wds_1_166_0_Checkbox__outer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -8,7 +8,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_165_0_CircularProgressBar";
+var _namespace_ = "wds_1_166_0_CircularProgressBar";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -16,7 +16,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_CircularProgressBar__root","progressBar":"wds_1_165_0_CircularProgressBar__progressBar","tooltip":"wds_1_165_0_CircularProgressBar__tooltip"};
+module.exports.classes = {"root":"wds_1_166_0_CircularProgressBar__root","progressBar":"wds_1_166_0_CircularProgressBar__progressBar","tooltip":"wds_1_166_0_CircularProgressBar__tooltip"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/CircularProgressBar/CircularProgressBarCore/CircularProgressBarCore.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_165_0_CircularProgressBarCore";
+var _namespace_ = "wds_1_166_0_CircularProgressBarCore";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_CircularProgressBarCore__root","label":"wds_1_165_0_CircularProgressBarCore__label","progressIndicator":"wds_1_165_0_CircularProgressBarCore__progressIndicator","indicationIconContainer":"wds_1_165_0_CircularProgressBarCore__indicationIconContainer","statusIndicator":"wds_1_165_0_CircularProgressBarCore__statusIndicator","arcsContainer":"wds_1_165_0_CircularProgressBarCore__arcsContainer","foreArc":"wds_1_165_0_CircularProgressBarCore__foreArc","backArc":"wds_1_165_0_CircularProgressBarCore__backArc"};
+module.exports.classes = {"root":"wds_1_166_0_CircularProgressBarCore__root","label":"wds_1_166_0_CircularProgressBarCore__label","progressIndicator":"wds_1_166_0_CircularProgressBarCore__progressIndicator","indicationIconContainer":"wds_1_166_0_CircularProgressBarCore__indicationIconContainer","statusIndicator":"wds_1_166_0_CircularProgressBarCore__statusIndicator","arcsContainer":"wds_1_166_0_CircularProgressBarCore__arcsContainer","foreArc":"wds_1_166_0_CircularProgressBarCore__foreArc","backArc":"wds_1_166_0_CircularProgressBarCore__backArc"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -8,7 +8,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_165_0_CloseButton";
+var _namespace_ = "wds_1_166_0_CloseButton";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -16,7 +16,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_CloseButton__root"};
+module.exports.classes = {"root":"wds_1_166_0_CloseButton__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_165_0_Collapse";
+var _namespace_ = "wds_1_166_0_Collapse";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_Collapse__root"};
+module.exports.classes = {"root":"wds_1_166_0_Collapse__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/ColorInput/components/ColorViewer.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_165_0_ColorViewer";
+var _namespace_ = "wds_1_166_0_ColorViewer";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_ColorViewer__root","line":"wds_1_165_0_ColorViewer__line"};
+module.exports.classes = {"root":"wds_1_166_0_ColorViewer__root","line":"wds_1_166_0_ColorViewer__line"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/ColorInput/components/Hash.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_165_0_Hash";
+var _namespace_ = "wds_1_166_0_Hash";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_Hash__root","text-medium-normal":"wds_1_165_0_StylableTypography__text-medium-normal"};
+module.exports.classes = {"root":"wds_1_166_0_Hash__root","text-medium-normal":"wds_1_166_0_StylableTypography__text-medium-normal"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

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

@@ -1,10 +1,11 @@
 
 require("../Foundation/stylable/colors.st.css.js");
+
 const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js");
 
 
 
-var _namespace_ = "wds_1_165_0_ColorPicker";
+var _namespace_ = "wds_1_166_0_ColorPicker";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,12 +13,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_ColorPicker__root","children":"wds_1_165_0_ColorPicker__children"};
+module.exports.classes = {"root":"wds_1_166_0_ColorPicker__root","children":"wds_1_166_0_ColorPicker__children"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {}; 
+module.exports.vars = {"wds-color-text-standard-primary-light":"--wds-color-text-standard-primary-light","wds-color-picker-width":"--wds-color-picker-width","wds-color-picker-padding-horizontal":"--wds-color-picker-padding-horizontal","wds-color-picker-padding-vertical":"--wds-color-picker-padding-vertical","wds-popover-border":"--wds-popover-border"}; 
 
 
 

package/dist/cjs/ColorPicker/ColorPickerActions.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_165_0_ColorPickerActions";
+var _namespace_ = "wds_1_166_0_ColorPickerActions";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,12 +12,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_ColorPickerActions__root"};
+module.exports.classes = {"root":"wds_1_166_0_ColorPickerActions__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {}; 
+module.exports.vars = {"wds-color-picker-padding-horizontal":"--wds-color-picker-padding-horizontal","wds-color-picker-padding-vertical":"--wds-color-picker-padding-vertical","wds-space-200":"--wds-space-200"}; 
 
 
 

package/dist/cjs/ColorPicker/ColorPickerConverter.st.css.js

@@ -1,11 +1,12 @@
 
 require("../common/Focusable/Focusable.st.css.js");
 require("../Foundation/stylable/colors.st.css.js");
+
 const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js");
 
 
 
-var _namespace_ = "wds_1_165_0_ColorPickerConverter";
+var _namespace_ = "wds_1_166_0_ColorPickerConverter";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +14,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_ColorPickerConverter__root","colorInput":"wds_1_165_0_ColorPickerConverter__colorInput","preview":"wds_1_165_0_ColorPickerConverter__preview","distribute":"wds_1_165_0_ColorPickerConverter__distribute","distributedItem":"wds_1_165_0_ColorPickerConverter__distributedItem"};
+module.exports.classes = {"root":"wds_1_166_0_ColorPickerConverter__root","colorInput":"wds_1_166_0_ColorPickerConverter__colorInput","preview":"wds_1_166_0_ColorPickerConverter__preview","distribute":"wds_1_166_0_ColorPickerConverter__distribute","distributedItem":"wds_1_166_0_ColorPickerConverter__distributedItem"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {}; 
+module.exports.vars = {"wds-color-border-transparent-primary":"--wds-color-border-transparent-primary","wds-shadow-focus-standard":"--wds-shadow-focus-standard","wds-space-200":"--wds-space-200","wds-swatches-swatch-border-radius-medium":"--wds-swatches-swatch-border-radius-medium","wds-swatches-swatch-size-small":"--wds-swatches-swatch-size-small","wds-color-picker-padding-horizontal":"--wds-color-picker-padding-horizontal","wds-color-picker-padding-vertical":"--wds-color-picker-padding-vertical"}; 
 
 
 

package/dist/cjs/ColorPicker/ColorPickerHistory.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_165_0_ColorPickerHistory";
+var _namespace_ = "wds_1_166_0_ColorPickerHistory";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_ColorPickerHistory__root"};
+module.exports.classes = {"root":"wds_1_166_0_ColorPickerHistory__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/ColorPicker/ColorPickerHsb.st.css.js

@@ -1,10 +1,11 @@
 
 require("../Foundation/stylable/colors.st.css.js");
+
 const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js");
 
 
 
-var _namespace_ = "wds_1_165_0_ColorPickerHsb";
+var _namespace_ = "wds_1_166_0_ColorPickerHsb";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,12 +13,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_ColorPickerHsb__root","sticky":"wds_1_165_0_ColorPickerHsb__sticky","saturation":"wds_1_165_0_ColorPickerHsb__saturation","brightness":"wds_1_165_0_ColorPickerHsb__brightness","hue":"wds_1_165_0_ColorPickerHsb__hue","handle":"wds_1_165_0_ColorPickerHsb__handle"};
+module.exports.classes = {"root":"wds_1_166_0_ColorPickerHsb__root","sticky":"wds_1_166_0_ColorPickerHsb__sticky","saturation":"wds_1_166_0_ColorPickerHsb__saturation","brightness":"wds_1_166_0_ColorPickerHsb__brightness","hue":"wds_1_166_0_ColorPickerHsb__hue","handle":"wds_1_166_0_ColorPickerHsb__handle"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {}; 
+module.exports.vars = {"wds-color-fill-dark-primary":"--wds-color-fill-dark-primary"}; 
 
 
 

package/dist/cjs/ColorPicker/ColorPickerHue.st.css.js

@@ -1,11 +1,12 @@
 
 require("../Foundation/stylable/colors.st.css.js");
 require("../Foundation/stylable/shadows.st.css.js");
+
 const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js");
 
 
 
-var _namespace_ = "wds_1_165_0_ColorPickerHue";
+var _namespace_ = "wds_1_166_0_ColorPickerHue";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +14,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_ColorPickerHue__root","handle":"wds_1_165_0_ColorPickerHue__handle"};
+module.exports.classes = {"root":"wds_1_166_0_ColorPickerHue__root","handle":"wds_1_166_0_ColorPickerHue__handle"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {}; 
+module.exports.vars = {"wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-shadow-100":"--wds-shadow-100"}; 
 
 
 

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

@@ -7,7 +7,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_165_0_ComposerButton";
+var _namespace_ = "wds_1_166_0_ComposerButton";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -15,7 +15,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_165_0_ComposerButton__root","tooltip":"wds_1_165_0_ComposerButton__tooltip","label":"wds_1_165_0_ComposerButton__label","iconContainer":"wds_1_165_0_ComposerButton__iconContainer"};
+module.exports.classes = {"root":"wds_1_166_0_ComposerButton__root","tooltip":"wds_1_166_0_ComposerButton__tooltip","label":"wds_1_166_0_ComposerButton__label","iconContainer":"wds_1_166_0_ComposerButton__iconContainer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};