@plasmicpkgs/react-slick 0.0.189 → 0.0.191

package/dist/react-slick.esm.js

@@ -1,6 +1,6 @@
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { Button } from 'antd';
-import React, { useState, useEffect, forwardRef, useRef } from 'react';
+import React, { forwardRef, useRef, useEffect, useState } from 'react';
 import Slider from 'react-slick';
 
 function _extends() {
@@ -31,102 +31,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 var _excluded = ["editingSlide", "initialSlide", "arrowColor", "className", "sliderScopeClassName"];
-function getSlideInfo(_ref) {
-  var _ref$rows = _ref.rows,
-    rows = _ref$rows === void 0 ? 1 : _ref$rows,
-    _ref$slidesPerRow = _ref.slidesPerRow,
-    slidesPerRow = _ref$slidesPerRow === void 0 ? 1 : _ref$slidesPerRow,
-    _ref$editingSlide = _ref.editingSlide,
-    editingSlide = _ref$editingSlide === void 0 ? 0 : _ref$editingSlide,
-    children = _ref.children;
-  var slidesCnt = Array.isArray(children) ? children.length : 1;
-  var slidesPerDot = rows * slidesPerRow;
-  var dotCount = Math.ceil(slidesCnt / slidesPerDot);
-  var currentDotIndex = editingSlide >= dotCount ? dotCount - 1 : editingSlide;
-  return {
-    currentDotIndex: currentDotIndex,
-    slidesPerDot: slidesPerDot,
-    dotCount: dotCount,
-    totalSlides: slidesCnt
-  };
-}
-function CurrentSlideDropdown(_ref2) {
-  var componentProps = _ref2.componentProps,
-    studioOps = _ref2.studioOps;
-  var _getSlideInfo = getSlideInfo(componentProps),
-    dotCount = _getSlideInfo.dotCount,
-    currentDotIndex = _getSlideInfo.currentDotIndex;
-  var options = Array.from({
-    length: dotCount
-  }, function (_, i) {
-    return i;
-  }).map(function (i) {
-    return React.createElement("option", {
-      key: i,
-      value: i.toString()
-    }, "Slide ", i);
-  });
-  var handleChange = function handleChange(e) {
-    studioOps.updateProps({
-      editingSlide: Number(e.target.value)
-    });
-  };
-  return React.createElement("div", {
-    style: {
-      width: "100%",
-      display: "flex",
-      flexDirection: "row",
-      gap: "10px",
-      justifyContent: "space-between"
-    }
-  }, React.createElement("div", null, "Current slide:"), React.createElement("select", {
-    defaultValue: currentDotIndex.toString(),
-    style: {
-      width: "100%"
-    },
-    onChange: handleChange,
-    value: currentDotIndex.toString()
-  }, options));
-}
-function NavigateSlides(_ref3) {
-  var componentProps = _ref3.componentProps,
-    studioOps = _ref3.studioOps;
-  var _getSlideInfo2 = getSlideInfo(componentProps),
-    dotCount = _getSlideInfo2.dotCount,
-    currentDotIndex = _getSlideInfo2.currentDotIndex;
-  return React.createElement("div", {
-    style: {
-      width: "100%",
-      display: "flex",
-      flexDirection: "row",
-      gap: "10px",
-      justifyContent: "space-between"
-    }
-  }, React.createElement(Button, {
-    style: {
-      width: "100%"
-    },
-    onClick: function onClick() {
-      var prevSlide = currentDotIndex === 0 ? dotCount - 1 : (currentDotIndex - 1) % dotCount;
-      studioOps.updateProps({
-        editingSlide: prevSlide
-      });
-    }
-  }, "Prev slide"), React.createElement(Button, {
-    style: {
-      width: "100%"
-    },
-    onClick: function onClick() {
-      var nextSlide = (currentDotIndex + 1) % dotCount;
-      studioOps.updateProps({
-        editingSlide: nextSlide
-      });
-    }
-  }, "Next slide"));
-}
-function OutlineMessage() {
-  return React.createElement("div", null, "* To re-arrange slides, use the Outline panel");
-}
 var sliderHelpers = {
   states: {
     currentSlide: {
@@ -136,417 +40,6 @@ var sliderHelpers = {
     }
   }
 };
-var sliderMeta = {
-  name: "hostless-slider",
-  displayName: "Slider Carousel",
-  importName: "SliderWrapper",
-  importPath: "@plasmicpkgs/react-slick",
-  description: "[See tutorial video](https://www.youtube.com/watch?v=GMgXLbNHX8c)",
-  actions: [{
-    type: "custom-action",
-    control: CurrentSlideDropdown
-  }, {
-    type: "custom-action",
-    control: NavigateSlides
-  }, {
-    type: "button-action",
-    label: "Append new slide",
-    onClick: function onClick(_ref4) {
-      var componentProps = _ref4.componentProps,
-        studioOps = _ref4.studioOps;
-      var _getSlideInfo3 = getSlideInfo(componentProps),
-        dotCount = _getSlideInfo3.dotCount,
-        slidesPerDot = _getSlideInfo3.slidesPerDot,
-        totalSlides = _getSlideInfo3.totalSlides;
-      var editingSlide = totalSlides % slidesPerDot ? dotCount - 1 : dotCount;
-      studioOps.appendToSlot({
-        type: "img",
-        src: "",
-        styles: {
-          maxWidth: "100%"
-        }
-      }, "children");
-      studioOps.updateProps({
-        editingSlide: editingSlide
-      });
-    }
-  }, {
-    type: "button-action",
-    label: "Delete current slide",
-    hidden: function hidden(ps) {
-      var _ps$children;
-      return ((_ps$children = ps.children) == null || (_ps$children = _ps$children.type) == null ? void 0 : _ps$children.name) === "CanvasSlotPlaceholder";
-    },
-    onClick: function onClick(_ref5) {
-      var componentProps = _ref5.componentProps,
-        studioOps = _ref5.studioOps;
-      var _getSlideInfo4 = getSlideInfo(componentProps),
-        currentDotIndex = _getSlideInfo4.currentDotIndex,
-        dotCount = _getSlideInfo4.dotCount,
-        slidesPerDot = _getSlideInfo4.slidesPerDot,
-        totalSlides = _getSlideInfo4.totalSlides;
-      studioOps.removeFromSlotAt(currentDotIndex * slidesPerDot, "children");
-      var newPos = currentDotIndex;
-      if (dotCount === 1) {
-        // not the only dot
-        newPos = 0;
-      } else if (currentDotIndex !== dotCount - 1) {
-        // not the last dot
-        if (slidesPerDot === 1) {
-          newPos = currentDotIndex - 1;
-        } else {
-          newPos = currentDotIndex;
-        }
-      } else {
-        // the last dot
-        newPos = totalSlides % slidesPerDot === 1 ? currentDotIndex - 1 : currentDotIndex;
-      }
-      studioOps.updateProps({
-        editingSlide: newPos
-      });
-    }
-  }, {
-    type: "custom-action",
-    control: OutlineMessage
-  }],
-  refActions: {
-    slickGoTo: {
-      displayName: "Jump to slide",
-      argTypes: [{
-        name: "index",
-        displayName: "Slide index",
-        type: "number"
-      }, {
-        name: "dontAnimate",
-        displayName: "Animate?",
-        type: "boolean"
-      }]
-    },
-    slickNext: {
-      displayName: "Go to Next slide",
-      argTypes: []
-    },
-    slickPause: {
-      displayName: "Pause",
-      argTypes: []
-    },
-    slickPlay: {
-      displayName: "Play",
-      argTypes: []
-    },
-    slickPrev: {
-      displayName: "Go to Previous slide",
-      argTypes: []
-    }
-  },
-  props: {
-    children: {
-      type: "slot",
-      defaultValue: /*#__PURE__*/[0, 1, 2].map(function (i) {
-        return {
-          type: "vbox",
-          children: {
-            type: "img",
-            src: "https://static1.plasmic.app/components/react-slick/slide" + (i + 1) + ".png",
-            styles: {
-              maxWidth: "100%"
-            }
-          }
-        };
-      })
-    },
-    editingSlide: {
-      displayName: "Currently edited slide",
-      type: "number",
-      description: "Switch to the specified slide (first is 0). Only affects the editor, not the final page.",
-      defaultValueHint: 0,
-      defaultValue: 0,
-      editOnly: true,
-      hidden: function hidden() {
-        return true;
-      }
-    },
-    accessibility: {
-      advanced: true,
-      displayName: "Accessibility",
-      type: "boolean",
-      description: "Enables tabbing and arrow key navigation",
-      defaultValueHint: true
-    },
-    adaptiveHeight: {
-      advanced: true,
-      displayName: "Adaptive Height",
-      type: "boolean",
-      description: "Adjust the slide's height automatically",
-      defaultValueHint: false
-    },
-    arrows: {
-      displayName: "Arrows",
-      type: "boolean",
-      description: "Show next/prev arrows",
-      defaultValueHint: true
-    },
-    sliderScopeClassName: {
-      type: "styleScopeClass",
-      scopeName: "slider"
-    },
-    arrowColor: {
-      type: "color",
-      description: "Color of next/prev arrow buttons",
-      defaultValueHint: "#000000",
-      hidden: function hidden(ps) {
-        return ps.arrows === undefined ? false : !ps.arrows;
-      }
-    },
-    autoplay: {
-      displayName: "Auto Play",
-      type: "boolean",
-      description: "Automatically start scrolling",
-      defaultValueHint: false
-    },
-    autoplaySpeed: {
-      displayName: "Auto Play Speed",
-      type: "number",
-      description: "Delay between each auto scroll, in milliseconds",
-      defaultValueHint: 3000,
-      hidden: function hidden(props) {
-        return !props.autoplay;
-      }
-    },
-    centerMode: {
-      displayName: "Center Mode",
-      type: "boolean",
-      description: "Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts",
-      defaultValueHint: false
-    },
-    centerPadding: {
-      displayName: "Center Padding",
-      type: "string",
-      description: "Side padding when in center mode (px or %)",
-      defaultValueHint: "50px",
-      hidden: function hidden(props) {
-        return !props.centerMode;
-      }
-    },
-    dots: {
-      displayName: "Dots",
-      type: "boolean",
-      description: "Show dots for each slide",
-      defaultValueHint: false
-    },
-    draggable: {
-      advanced: true,
-      displayName: "Draggable",
-      type: "boolean",
-      description: "Enables mouse dragging on desktop",
-      defaultValueHint: true
-    },
-    cssEase: {
-      advanced: true,
-      displayName: "Easing",
-      type: "string",
-      description: "Easing method for transition",
-      defaultValueHint: "linear"
-    },
-    /** Deprecated, this was apparently never working:
-     * https://github.com/akiran/react-slick/issues/363 */
-    easing: {
-      hidden: function hidden() {
-        return true;
-      },
-      advanced: true,
-      displayName: "Easing",
-      type: "string",
-      description: "Easing method for transition",
-      defaultValueHint: "linear"
-    },
-    fade: {
-      advanced: true,
-      displayName: "Fade",
-      type: "boolean",
-      description: "Cross-fade between slides",
-      defaultValueHint: false
-    },
-    focusOnSelect: {
-      advanced: true,
-      displayName: "Focus On Select",
-      type: "boolean",
-      description: "Go to slide on click",
-      defaultValueHint: false
-    },
-    infinite: {
-      displayName: "Infinite",
-      type: "boolean",
-      description: "Infinitely wrap around contents",
-      defaultValueHint: true
-    },
-    initialSlide: {
-      displayName: "Initial Slide",
-      type: "number",
-      description: "Index of the first visible slide (first is 0), accounting for multiple slides per view if applicable.",
-      defaultValueHint: 0,
-      defaultValue: 0
-    },
-    lazyLoad: {
-      advanced: true,
-      displayName: "Lazy Load",
-      type: "choice",
-      options: ["ondemand", "progressive"],
-      description: "Load images or render components on demand or progressively"
-    },
-    pauseOnDotsHover: {
-      displayName: "Pause On Dots Hover",
-      type: "boolean",
-      description: "Prevents autoplay while hovering on dots",
-      defaultValueHint: false
-    },
-    pauseOnFocus: {
-      displayName: "Pause On Focus",
-      type: "boolean",
-      description: "Prevents autoplay while focused on slides",
-      defaultValueHint: false
-    },
-    pauseOnHover: {
-      displayName: "Pause On Hover",
-      type: "boolean",
-      description: "Prevents autoplay while hovering on track",
-      defaultValueHint: true
-    },
-    rows: {
-      displayName: "Rows",
-      type: "number",
-      description: "Number of rows per slide (enables grid mode)",
-      defaultValueHint: 1
-    },
-    rtl: {
-      advanced: true,
-      displayName: "Reverse",
-      type: "boolean",
-      description: "Reverses the slide order",
-      defaultValueHint: false
-    },
-    // Looks like the `slide` prop is not being used to set the container tag:
-    // https://github.com/akiran/react-slick/issues/1318
-    // https://github.com/akiran/react-slick/pull/1885
-    // https://stackoverflow.com/questions/51492535/wrap-react-slick-li-slides-inside-ul
-    //
-    // slide: {
-    //   displayName: "Slide Tag",
-    //   type: "string",
-    //   description: 'Slide container element type',
-    //   defaultValueHint: "div",
-    // },
-    slidesPerRow: {
-      displayName: "Slides Per Row",
-      type: "number",
-      description: "Number of slides to display in grid mode, this is useful with rows option",
-      defaultValueHint: 1
-    },
-    slidesToScroll: {
-      advanced: true,
-      displayName: "Slides To Scroll",
-      type: "number",
-      description: "Number of slides to scroll at once",
-      defaultValueHint: 1
-    },
-    slidesToShow: {
-      advanced: true,
-      displayName: "Slides To Show",
-      type: "number",
-      description: "Number of slides to show in one frame",
-      defaultValueHint: 1
-    },
-    speed: {
-      advanced: true,
-      displayName: "Speed",
-      type: "number",
-      description: "Transition speed in milliseconds",
-      defaultValueHint: 500
-    },
-    swipe: {
-      advanced: true,
-      displayName: "Swipe",
-      type: "boolean",
-      description: "Enable swiping to change slides",
-      defaultValueHint: true
-    },
-    swipeToSlide: {
-      advanced: true,
-      displayName: "Swipe To Slide",
-      type: "boolean",
-      description: "Enable drag/swipe irrespective of 'slidesToScroll'",
-      defaultValueHint: false
-    },
-    touchMove: {
-      advanced: true,
-      displayName: "Touch Move",
-      type: "boolean",
-      description: "Enable slide moving on touch",
-      defaultValueHint: true
-    },
-    touchThreshold: {
-      advanced: true,
-      displayName: "Touch Threshold",
-      type: "number",
-      description: "Swipe distance threshold in pixels",
-      defaultValueHint: 5
-    },
-    useCSS: {
-      advanced: true,
-      displayName: "Use CSS",
-      type: "boolean",
-      description: "Enable/Disable CSS Transitions",
-      defaultValueHint: true
-    },
-    useTransform: {
-      advanced: true,
-      displayName: "Use Transform",
-      type: "boolean",
-      description: "Enable/Disable CSS Transforms",
-      defaultValueHint: true
-    },
-    variableWidth: {
-      advanced: true,
-      displayName: "Variable Width",
-      type: "boolean",
-      description: "Variable width slides",
-      defaultValueHint: false
-    },
-    vertical: {
-      advanced: true,
-      displayName: "Vertical",
-      type: "boolean",
-      description: "Vertical slide mode",
-      defaultValueHint: false
-    },
-    beforeChange: {
-      type: "eventHandler",
-      advanced: true,
-      argTypes: [{
-        name: "currentSlide",
-        type: "number"
-      }]
-    }
-  },
-  states: {
-    currentSlide: /*#__PURE__*/_extends({
-      type: "writable",
-      valueProp: "editingSlide",
-      onChangeProp: "beforeChange",
-      variableType: "number"
-    }, sliderHelpers.states.currentSlide)
-  },
-  componentHelpers: {
-    helpers: sliderHelpers,
-    importName: "sliderHelpers",
-    importPath: "@plasmicpkgs/react-slick"
-  },
-  defaultStyles: {
-    width: "stretch",
-    maxWidth: "100%",
-    flexDirection: "column"
-  }
-};
 function useDebounce(value, delay) {
   var _useState = useState(value),
     debouncedValue = _useState[0],
@@ -618,7 +111,7 @@ var SliderWrapper = /*#__PURE__*/forwardRef(function SliderWrapper_(props, userR
       }
     };
   }, []);
-  var css = "\n  ." + sliderScopeClassName + " .slick-arrow:before {\n      color: " + (arrowColor != null ? arrowColor : "black") + ";\n    }\n  ";
+  var css = "\n    ." + sliderScopeClassName + " .slick-arrow:before {\n      color: " + (arrowColor != null ? arrowColor : "black") + ";\n    }\n    ." + sliderScopeClassName + " .slick-slide img:only-child {\n      " + "\n      " + "\n      display: inline-block;\n      vertical-align: top;\n    }\n  ";
   return React.createElement(React.Fragment, null, React.createElement(Slider, Object.assign({
     className: className + " " + sliderScopeClassName,
     ref: slider
@@ -628,13 +121,520 @@ var SliderWrapper = /*#__PURE__*/forwardRef(function SliderWrapper_(props, userR
     }
   }));
 });
-function registerSlider(loader, customSliderMeta) {
+function registerSlider(loader) {
+  function getSlideInfo(_ref) {
+    var _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 1 : _ref$rows,
+      _ref$slidesPerRow = _ref.slidesPerRow,
+      slidesPerRow = _ref$slidesPerRow === void 0 ? 1 : _ref$slidesPerRow,
+      _ref$editingSlide = _ref.editingSlide,
+      editingSlide = _ref$editingSlide === void 0 ? 0 : _ref$editingSlide,
+      children = _ref.children;
+    var slidesCnt = Array.isArray(children) ? children.length : 1;
+    var slidesPerDot = rows * slidesPerRow;
+    var dotCount = Math.ceil(slidesCnt / slidesPerDot);
+    var currentDotIndex = editingSlide >= dotCount ? dotCount - 1 : editingSlide;
+    return {
+      currentDotIndex: currentDotIndex,
+      slidesPerDot: slidesPerDot,
+      dotCount: dotCount,
+      totalSlides: slidesCnt
+    };
+  }
+  function CurrentSlideDropdown(_ref2) {
+    var componentProps = _ref2.componentProps,
+      studioOps = _ref2.studioOps;
+    var _getSlideInfo = getSlideInfo(componentProps),
+      dotCount = _getSlideInfo.dotCount,
+      currentDotIndex = _getSlideInfo.currentDotIndex;
+    var options = Array.from({
+      length: dotCount
+    }, function (_, i) {
+      return i;
+    }).map(function (i) {
+      return React.createElement("option", {
+        key: i,
+        value: i.toString()
+      }, "Slide ", i);
+    });
+    var handleChange = function handleChange(e) {
+      studioOps.updateProps({
+        editingSlide: Number(e.target.value)
+      });
+    };
+    return React.createElement("div", {
+      style: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        gap: "10px",
+        justifyContent: "space-between"
+      }
+    }, React.createElement("div", null, "Current slide:"), React.createElement("select", {
+      defaultValue: currentDotIndex.toString(),
+      style: {
+        width: "100%"
+      },
+      onChange: handleChange,
+      value: currentDotIndex.toString()
+    }, options));
+  }
+  function NavigateSlides(_ref3) {
+    var componentProps = _ref3.componentProps,
+      studioOps = _ref3.studioOps;
+    var _getSlideInfo2 = getSlideInfo(componentProps),
+      dotCount = _getSlideInfo2.dotCount,
+      currentDotIndex = _getSlideInfo2.currentDotIndex;
+    return React.createElement("div", {
+      style: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        gap: "10px",
+        justifyContent: "space-between"
+      }
+    }, React.createElement(Button, {
+      style: {
+        width: "100%"
+      },
+      onClick: function onClick() {
+        var prevSlide = currentDotIndex === 0 ? dotCount - 1 : (currentDotIndex - 1) % dotCount;
+        studioOps.updateProps({
+          editingSlide: prevSlide
+        });
+      }
+    }, "Prev slide"), React.createElement(Button, {
+      style: {
+        width: "100%"
+      },
+      onClick: function onClick() {
+        var nextSlide = (currentDotIndex + 1) % dotCount;
+        studioOps.updateProps({
+          editingSlide: nextSlide
+        });
+      }
+    }, "Next slide"));
+  }
+  function OutlineMessage() {
+    return React.createElement("div", null, "* To re-arrange slides, use the Outline panel");
+  }
+  var sliderMeta = {
+    name: "hostless-slider",
+    displayName: "Slider Carousel",
+    importName: "SliderWrapper",
+    importPath: "@plasmicpkgs/react-slick",
+    description: "[See tutorial video](https://www.youtube.com/watch?v=GMgXLbNHX8c)",
+    actions: [{
+      type: "custom-action",
+      control: CurrentSlideDropdown
+    }, {
+      type: "custom-action",
+      control: NavigateSlides
+    }, {
+      type: "button-action",
+      label: "Append new slide",
+      onClick: function onClick(_ref4) {
+        var componentProps = _ref4.componentProps,
+          studioOps = _ref4.studioOps;
+        var _getSlideInfo3 = getSlideInfo(componentProps),
+          dotCount = _getSlideInfo3.dotCount,
+          slidesPerDot = _getSlideInfo3.slidesPerDot,
+          totalSlides = _getSlideInfo3.totalSlides;
+        var editingSlide = totalSlides % slidesPerDot ? dotCount - 1 : dotCount;
+        studioOps.appendToSlot({
+          type: "img",
+          src: "",
+          styles: {
+            maxWidth: "100%"
+          }
+        }, "children");
+        studioOps.updateProps({
+          editingSlide: editingSlide
+        });
+      }
+    }, {
+      type: "button-action",
+      label: "Delete current slide",
+      hidden: function hidden(ps) {
+        var _ps$children;
+        return ((_ps$children = ps.children) == null || (_ps$children = _ps$children.type) == null ? void 0 : _ps$children.name) === "CanvasSlotPlaceholder";
+      },
+      onClick: function onClick(_ref5) {
+        var componentProps = _ref5.componentProps,
+          studioOps = _ref5.studioOps;
+        var _getSlideInfo4 = getSlideInfo(componentProps),
+          currentDotIndex = _getSlideInfo4.currentDotIndex,
+          dotCount = _getSlideInfo4.dotCount,
+          slidesPerDot = _getSlideInfo4.slidesPerDot,
+          totalSlides = _getSlideInfo4.totalSlides;
+        studioOps.removeFromSlotAt(currentDotIndex * slidesPerDot, "children");
+        var newPos = currentDotIndex;
+        if (dotCount === 1) {
+          // not the only dot
+          newPos = 0;
+        } else if (currentDotIndex !== dotCount - 1) {
+          // not the last dot
+          if (slidesPerDot === 1) {
+            newPos = currentDotIndex - 1;
+          } else {
+            newPos = currentDotIndex;
+          }
+        } else {
+          // the last dot
+          newPos = totalSlides % slidesPerDot === 1 ? currentDotIndex - 1 : currentDotIndex;
+        }
+        studioOps.updateProps({
+          editingSlide: newPos
+        });
+      }
+    }, {
+      type: "custom-action",
+      control: OutlineMessage
+    }],
+    refActions: {
+      slickGoTo: {
+        displayName: "Jump to slide",
+        argTypes: [{
+          name: "index",
+          displayName: "Slide index",
+          type: "number"
+        }, {
+          name: "dontAnimate",
+          displayName: "Animate?",
+          type: "boolean"
+        }]
+      },
+      slickNext: {
+        displayName: "Go to Next slide",
+        argTypes: []
+      },
+      slickPause: {
+        displayName: "Pause",
+        argTypes: []
+      },
+      slickPlay: {
+        displayName: "Play",
+        argTypes: []
+      },
+      slickPrev: {
+        displayName: "Go to Previous slide",
+        argTypes: []
+      }
+    },
+    props: {
+      children: {
+        type: "slot",
+        defaultValue: [0, 1, 2].map(function (i) {
+          return {
+            type: "vbox",
+            children: {
+              type: "img",
+              src: "https://static1.plasmic.app/components/react-slick/slide" + (i + 1) + ".png",
+              styles: {
+                maxWidth: "100%"
+              }
+            }
+          };
+        })
+      },
+      editingSlide: {
+        displayName: "Currently edited slide",
+        type: "number",
+        description: "Switch to the specified slide (first is 0). Only affects the editor, not the final page.",
+        defaultValueHint: 0,
+        defaultValue: 0,
+        editOnly: true,
+        hidden: function hidden() {
+          return true;
+        }
+      },
+      accessibility: {
+        advanced: true,
+        displayName: "Accessibility",
+        type: "boolean",
+        description: "Enables tabbing and arrow key navigation",
+        defaultValueHint: true
+      },
+      adaptiveHeight: {
+        advanced: true,
+        displayName: "Adaptive Height",
+        type: "boolean",
+        description: "Adjust the slide's height automatically",
+        defaultValueHint: false
+      },
+      arrows: {
+        displayName: "Arrows",
+        type: "boolean",
+        description: "Show next/prev arrows",
+        defaultValueHint: true
+      },
+      sliderScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "slider"
+      },
+      arrowColor: {
+        type: "color",
+        description: "Color of next/prev arrow buttons",
+        defaultValueHint: "#000000",
+        hidden: function hidden(ps) {
+          return ps.arrows === undefined ? false : !ps.arrows;
+        }
+      },
+      autoplay: {
+        displayName: "Auto Play",
+        type: "boolean",
+        description: "Automatically start scrolling",
+        defaultValueHint: false
+      },
+      autoplaySpeed: {
+        displayName: "Auto Play Speed",
+        type: "number",
+        description: "Delay between each auto scroll, in milliseconds",
+        defaultValueHint: 3000,
+        hidden: function hidden(props) {
+          return !props.autoplay;
+        }
+      },
+      centerMode: {
+        displayName: "Center Mode",
+        type: "boolean",
+        description: "Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts",
+        defaultValueHint: false
+      },
+      centerPadding: {
+        displayName: "Center Padding",
+        type: "string",
+        description: "Side padding when in center mode (px or %)",
+        defaultValueHint: "50px",
+        hidden: function hidden(props) {
+          return !props.centerMode;
+        }
+      },
+      dots: {
+        displayName: "Dots",
+        type: "boolean",
+        description: "Show dots for each slide",
+        defaultValueHint: false
+      },
+      draggable: {
+        advanced: true,
+        displayName: "Draggable",
+        type: "boolean",
+        description: "Enables mouse dragging on desktop",
+        defaultValueHint: true
+      },
+      cssEase: {
+        advanced: true,
+        displayName: "Easing",
+        type: "string",
+        description: "Easing method for transition",
+        defaultValueHint: "linear"
+      },
+      /** Deprecated, this was apparently never working:
+       * https://github.com/akiran/react-slick/issues/363 */
+      easing: {
+        hidden: function hidden() {
+          return true;
+        },
+        advanced: true,
+        displayName: "Easing",
+        type: "string",
+        description: "Easing method for transition",
+        defaultValueHint: "linear"
+      },
+      fade: {
+        advanced: true,
+        displayName: "Fade",
+        type: "boolean",
+        description: "Cross-fade between slides",
+        defaultValueHint: false
+      },
+      focusOnSelect: {
+        advanced: true,
+        displayName: "Focus On Select",
+        type: "boolean",
+        description: "Go to slide on click",
+        defaultValueHint: false
+      },
+      infinite: {
+        displayName: "Infinite",
+        type: "boolean",
+        description: "Infinitely wrap around contents",
+        defaultValueHint: true
+      },
+      initialSlide: {
+        displayName: "Initial Slide",
+        type: "number",
+        description: "Index of the first visible slide (first is 0), accounting for multiple slides per view if applicable.",
+        defaultValueHint: 0,
+        defaultValue: 0
+      },
+      lazyLoad: {
+        advanced: true,
+        displayName: "Lazy Load",
+        type: "choice",
+        options: ["ondemand", "progressive"],
+        description: "Load images or render components on demand or progressively"
+      },
+      pauseOnDotsHover: {
+        displayName: "Pause On Dots Hover",
+        type: "boolean",
+        description: "Prevents autoplay while hovering on dots",
+        defaultValueHint: false
+      },
+      pauseOnFocus: {
+        displayName: "Pause On Focus",
+        type: "boolean",
+        description: "Prevents autoplay while focused on slides",
+        defaultValueHint: false
+      },
+      pauseOnHover: {
+        displayName: "Pause On Hover",
+        type: "boolean",
+        description: "Prevents autoplay while hovering on track",
+        defaultValueHint: true
+      },
+      rows: {
+        displayName: "Rows",
+        type: "number",
+        description: "Number of rows per slide (enables grid mode)",
+        defaultValueHint: 1
+      },
+      rtl: {
+        advanced: true,
+        displayName: "Reverse",
+        type: "boolean",
+        description: "Reverses the slide order",
+        defaultValueHint: false
+      },
+      // Looks like the `slide` prop is not being used to set the container tag:
+      // https://github.com/akiran/react-slick/issues/1318
+      // https://github.com/akiran/react-slick/pull/1885
+      // https://stackoverflow.com/questions/51492535/wrap-react-slick-li-slides-inside-ul
+      //
+      // slide: {
+      //   displayName: "Slide Tag",
+      //   type: "string",
+      //   description: 'Slide container element type',
+      //   defaultValueHint: "div",
+      // },
+      slidesPerRow: {
+        displayName: "Slides Per Row",
+        type: "number",
+        description: "Number of slides to display in grid mode, this is useful with rows option",
+        defaultValueHint: 1
+      },
+      slidesToScroll: {
+        advanced: true,
+        displayName: "Slides To Scroll",
+        type: "number",
+        description: "Number of slides to scroll at once",
+        defaultValueHint: 1
+      },
+      slidesToShow: {
+        advanced: true,
+        displayName: "Slides To Show",
+        type: "number",
+        description: "Number of slides to show in one frame",
+        defaultValueHint: 1
+      },
+      speed: {
+        advanced: true,
+        displayName: "Speed",
+        type: "number",
+        description: "Transition speed in milliseconds",
+        defaultValueHint: 500
+      },
+      swipe: {
+        advanced: true,
+        displayName: "Swipe",
+        type: "boolean",
+        description: "Enable swiping to change slides",
+        defaultValueHint: true
+      },
+      swipeToSlide: {
+        advanced: true,
+        displayName: "Swipe To Slide",
+        type: "boolean",
+        description: "Enable drag/swipe irrespective of 'slidesToScroll'",
+        defaultValueHint: false
+      },
+      touchMove: {
+        advanced: true,
+        displayName: "Touch Move",
+        type: "boolean",
+        description: "Enable slide moving on touch",
+        defaultValueHint: true
+      },
+      touchThreshold: {
+        advanced: true,
+        displayName: "Touch Threshold",
+        type: "number",
+        description: "Swipe distance threshold in pixels",
+        defaultValueHint: 5
+      },
+      useCSS: {
+        advanced: true,
+        displayName: "Use CSS",
+        type: "boolean",
+        description: "Enable/Disable CSS Transitions",
+        defaultValueHint: true
+      },
+      useTransform: {
+        advanced: true,
+        displayName: "Use Transform",
+        type: "boolean",
+        description: "Enable/Disable CSS Transforms",
+        defaultValueHint: true
+      },
+      variableWidth: {
+        advanced: true,
+        displayName: "Variable Width",
+        type: "boolean",
+        description: "Variable width slides",
+        defaultValueHint: false
+      },
+      vertical: {
+        advanced: true,
+        displayName: "Vertical",
+        type: "boolean",
+        description: "Vertical slide mode",
+        defaultValueHint: false
+      },
+      beforeChange: {
+        type: "eventHandler",
+        advanced: true,
+        argTypes: [{
+          name: "currentSlide",
+          type: "number"
+        }]
+      }
+    },
+    states: {
+      currentSlide: _extends({
+        type: "writable",
+        valueProp: "editingSlide",
+        onChangeProp: "beforeChange",
+        variableType: "number"
+      }, sliderHelpers.states.currentSlide)
+    },
+    componentHelpers: {
+      helpers: sliderHelpers,
+      importName: "sliderHelpers",
+      importPath: "@plasmicpkgs/react-slick"
+    },
+    defaultStyles: {
+      width: "stretch",
+      maxWidth: "100%",
+      flexDirection: "column"
+    }
+  };
   if (loader) {
-    loader.registerComponent(SliderWrapper, customSliderMeta != null ? customSliderMeta : sliderMeta);
+    loader.registerComponent(SliderWrapper, sliderMeta);
   } else {
-    registerComponent(SliderWrapper, customSliderMeta != null ? customSliderMeta : sliderMeta);
+    registerComponent(SliderWrapper, sliderMeta);
   }
 }
 
-export { SliderWrapper, registerSlider, sliderHelpers, sliderMeta, useDebounce };
+export { SliderWrapper, registerSlider, sliderHelpers };
 //# sourceMappingURL=react-slick.esm.js.map