@artsy/palette 44.0.1 → 44.2.0

package/dist/elements/Carousel/Carousel.story.js

@@ -11,6 +11,7 @@ var _Box = require("../Box");
 var _Clickable = require("../Clickable");
 var _Text = require("../Text");
 var _2 = require("./");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 var _excluded = ["widths", "heights"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -58,334 +59,429 @@ var Demo = function Demo(_ref) {
 };
 Demo.displayName = "Demo";
 var _default = exports.default = {
-  title: "Components/Carousel"
-};
-var Simple = exports.Simple = function Simple() {
-  return /*#__PURE__*/_react.default.createElement(Demo, null);
-};
-Simple.displayName = "Simple";
-var Multiple = exports.Multiple = function Multiple() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Demo, null), /*#__PURE__*/_react.default.createElement(Demo, null), /*#__PURE__*/_react.default.createElement(Demo, null));
-};
-var SinglePage = exports.SinglePage = function SinglePage() {
-  var widths = [250, 250];
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths
-  });
-};
-SinglePage.displayName = "SinglePage";
-SinglePage.story = {
-  name: "Single page"
-};
-var SingleOverflowingItem = exports.SingleOverflowingItem = function SingleOverflowingItem() {
-  var widths = [2000];
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths
-  });
-};
-SingleOverflowingItem.displayName = "SingleOverflowingItem";
-SingleOverflowingItem.story = {
-  name: "Single overflowing item"
-};
-var MultipleOverflowingItems = exports.MultipleOverflowingItems = function MultipleOverflowingItems() {
-  var widths = [100, 2000, 1000, 100, 1000];
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths
-  });
-};
-MultipleOverflowingItems.displayName = "MultipleOverflowingItems";
-MultipleOverflowingItems.story = {
-  name: "Multiple overflowing items"
+  title: "Components/Carousel",
+  component: _2.Carousel,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A carousel component for displaying a horizontally scrollable collection of items with navigation controls. Supports variable widths, heights, and custom styling."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
 };
-var TwoishPages = exports.TwoishPages = function TwoishPages() {
-  var widths = Array.from(Array(5)).map(function (_) {
-    return 250;
-  });
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths
-  });
+var Simple = exports.Simple = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Demo, null);
+  }
 };
-TwoishPages.displayName = "TwoishPages";
-TwoishPages.story = {
-  name: "Two-(ish) pages"
+var Multiple = exports.Multiple = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Demo, null), /*#__PURE__*/_react.default.createElement(Demo, null), /*#__PURE__*/_react.default.createElement(Demo, null));
+  }
 };
-var ManyPages = exports.ManyPages = function ManyPages() {
-  var widths = Array.from(Array(100)).map(function (_) {
-    return 250;
-  });
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths
-  });
+var SinglePage = exports.SinglePage = {
+  render: function render() {
+    var widths = [250, 250];
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths
+    });
+  }
 };
-ManyPages.displayName = "ManyPages";
-ManyPages.story = {
-  name: "Many pages"
+var SingleOverflowingItem = exports.SingleOverflowingItem = {
+  render: function render() {
+    var widths = [2000];
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with a single item that overflows the container width."
+      }
+    }
+  }
 };
-var VaryingWidths = exports.VaryingWidths = function VaryingWidths() {
-  var widths = Array.from(Array(25)).map(function (_, i) {
-    if (i % 15 === 0) return 400;
-    if (i % 5 === 0) return 300;
-    if (i % 3 === 0) return 333;
-    if (i % 2 === 0) return 275;
-    return 250;
-  });
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths
-  });
+var MultipleOverflowingItems = exports.MultipleOverflowingItems = {
+  render: function render() {
+    var widths = [100, 2000, 1000, 100, 1000];
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with multiple items of varying widths, some overflowing."
+      }
+    }
+  }
 };
-VaryingWidths.displayName = "VaryingWidths";
-VaryingWidths.story = {
-  name: "Varying widths"
+var TwoishPages = exports.TwoishPages = {
+  render: function render() {
+    var widths = Array.from(Array(5)).map(function (_) {
+      return 250;
+    });
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel spanning approximately two pages with 5 items."
+      }
+    }
+  }
 };
-var VaryingHeights = exports.VaryingHeights = function VaryingHeights() {
-  var widths = Array.from(Array(25)).map(function (_, i) {
-    if (i % 15 === 0) return 400;
-    if (i % 5 === 0) return 300;
-    if (i % 3 === 0) return 333;
-    if (i % 2 === 0) return 275;
-    return 250;
-  });
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths,
-    heights: [400, 300, 333, 275]
-  });
+var ManyPages = exports.ManyPages = {
+  render: function render() {
+    var widths = Array.from(Array(100)).map(function (_) {
+      return 250;
+    });
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with many items spanning multiple pages (100 items)."
+      }
+    }
+  }
 };
-VaryingHeights.displayName = "VaryingHeights";
-VaryingHeights.story = {
-  name: "Varying heights"
+var VaryingWidths = exports.VaryingWidths = {
+  render: function render() {
+    var widths = Array.from(Array(25)).map(function (_, i) {
+      if (i % 15 === 0) return 400;
+      if (i % 5 === 0) return 300;
+      if (i % 3 === 0) return 333;
+      if (i % 2 === 0) return 275;
+      return 250;
+    });
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with items of varying widths to demonstrate layout flexibility."
+      }
+    }
+  }
 };
-var DynamicItems = exports.DynamicItems = function DynamicItems() {
-  var _useState = (0, _react.useState)([300]),
-    _useState2 = _slicedToArray(_useState, 2),
-    widths = _useState2[0],
-    setWidths = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var interval = setInterval(function () {
-      setWidths(function (prevWidths) {
-        return [].concat(_toConsumableArray(prevWidths), [300]);
-      });
-    }, 500);
-    return function () {
-      return clearInterval(interval);
-    };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths
-  });
+var VaryingHeights = exports.VaryingHeights = {
+  render: function render() {
+    var widths = Array.from(Array(25)).map(function (_, i) {
+      if (i % 15 === 0) return 400;
+      if (i % 5 === 0) return 300;
+      if (i % 3 === 0) return 333;
+      if (i % 2 === 0) return 275;
+      return 250;
+    });
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths,
+      heights: [400, 300, 333, 275]
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with items of varying widths and heights."
+      }
+    }
+  }
 };
-DynamicItems.displayName = "DynamicItems";
-DynamicItems.story = {
-  name: "Dynamic items",
+var DynamicItems = exports.DynamicItems = {
+  render: function render() {
+    var _useState = (0, _react.useState)([300]),
+      _useState2 = _slicedToArray(_useState, 2),
+      widths = _useState2[0],
+      setWidths = _useState2[1];
+    (0, _react.useEffect)(function () {
+      var interval = setInterval(function () {
+        setWidths(function (prevWidths) {
+          return [].concat(_toConsumableArray(prevWidths), [300]);
+        });
+      }, 500);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths
+    });
+  },
   parameters: {
     chromatic: {
       disable: true
+    },
+    docs: {
+      description: {
+        story: "Carousel that dynamically adds items every 500ms to test layout updates."
+      }
     }
   }
 };
-var CustomArrows = exports.CustomArrows = function CustomArrows() {
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    Previous: function Previous(props) {
-      return /*#__PURE__*/_react.default.createElement(_2.CarouselPrevious, _extends({}, props, {
-        style: {
-          transform: "translateX(0)"
-        },
-        bg: "mono5",
-        color: "red100",
-        height: 300,
-        opacity: 0.75,
-        zIndex: 1
-      }));
-    },
-    Next: function Next(props) {
-      return /*#__PURE__*/_react.default.createElement(_2.CarouselNext, _extends({}, props, {
-        style: {
-          transform: "translateX(0)"
-        },
-        bg: "mono5",
-        color: "red100",
-        height: 300,
-        opacity: 0.75,
-        zIndex: 1
-      }));
+var CustomArrows = exports.CustomArrows = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      Previous: function Previous(props) {
+        return /*#__PURE__*/_react.default.createElement(_2.CarouselPrevious, _extends({}, props, {
+          style: {
+            transform: "translateX(0)"
+          },
+          bg: "mono5",
+          color: "red100",
+          height: 300,
+          opacity: 0.75,
+          zIndex: 1
+        }));
+      },
+      Next: function Next(props) {
+        return /*#__PURE__*/_react.default.createElement(_2.CarouselNext, _extends({}, props, {
+          style: {
+            transform: "translateX(0)"
+          },
+          bg: "mono5",
+          color: "red100",
+          height: 300,
+          opacity: 0.75,
+          zIndex: 1
+        }));
+      }
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with custom styled navigation arrows."
+      }
     }
-  });
-};
-CustomArrows.displayName = "CustomArrows";
-CustomArrows.story = {
-  name: "Custom arrows"
+  }
 };
-var CustomRailAndCells = exports.CustomRailAndCells = function CustomRailAndCells() {
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: ["100%", "100%", "100%", "100%"]
-    // eslint-disable-next-line react/display-name
-    ,
-    Cell: /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-      return /*#__PURE__*/_react.default.createElement(_2.CarouselCell, _extends({}, props, {
-        ref: ref,
-        display: "inline-flex",
-        width: "100%",
-        pr: 0
-      }));
-    }),
-    Rail: function Rail(props) {
-      return /*#__PURE__*/_react.default.createElement(_2.CarouselRail, _extends({}, props, {
-        transition: "none",
-        display: "block"
-      }));
+var CustomRailAndCells = exports.CustomRailAndCells = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: ["100%", "100%", "100%", "100%"]
+      // eslint-disable-next-line react/display-name
+      ,
+      Cell: /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_2.CarouselCell, _extends({}, props, {
+          ref: ref,
+          display: "inline-flex",
+          width: "100%",
+          pr: 0
+        }));
+      }),
+      Rail: function Rail(props) {
+        return /*#__PURE__*/_react.default.createElement(_2.CarouselRail, _extends({}, props, {
+          transition: "none",
+          display: "block"
+        }));
+      }
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with custom rail and cell components for advanced layouts."
+      }
     }
-  });
-};
-CustomRailAndCells.displayName = "CustomRailAndCells";
-CustomRailAndCells.story = {
-  name: "Custom rail and cells"
-};
-var CarouselWithText = exports.CarouselWithText = function CarouselWithText() {
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    mx: [2, 4],
-    my: 2
-  }, /*#__PURE__*/_react.default.createElement(_2.Carousel, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM)));
-};
-CarouselWithText.displayName = "CarouselWithText";
-CarouselWithText.story = {
-  name: "Carousel with text"
-};
-var InitialIndexOnMount = exports.InitialIndexOnMount = function InitialIndexOnMount() {
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    initialIndex: 3
-  });
-};
-InitialIndexOnMount.displayName = "InitialIndexOnMount";
-InitialIndexOnMount.story = {
-  name: "initialIndex on mount"
+  }
 };
-var NavigateViaProps = exports.NavigateViaProps = function NavigateViaProps() {
-  var _useState3 = (0, _react.useState)(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    initialIndex = _useState4[0],
-    resetIndex = _useState4[1];
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, null, /*#__PURE__*/_react.default.createElement(Demo, {
-    initialIndex: initialIndex,
-    onChange: resetIndex
-  }), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    display: "flex",
-    justifyContent: "space-around"
-  }, /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    onClick: function onClick() {
-      return resetIndex(0);
-    }
-  }, "Navigate to page 1"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    onClick: function onClick() {
-      return resetIndex(1);
-    }
-  }, "Navigate to page 2"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    onClick: function onClick() {
-      return resetIndex(2);
-    }
-  }, "Navigate to page 3"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    onClick: function onClick() {
-      return resetIndex(3);
+var CarouselWithText = exports.CarouselWithText = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4],
+      my: 2
+    }, /*#__PURE__*/_react.default.createElement(_2.Carousel, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM)));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel containing text content blocks instead of other components."
+      }
     }
-  }, "Navigate to page 4"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    onClick: function onClick() {
-      return resetIndex(4);
+  }
+};
+var InitialIndexOnMount = exports.InitialIndexOnMount = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      initialIndex: 3
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel that starts at a specific index (3) on mount."
+      }
     }
-  }, "Navigate to page 5")));
+  }
 };
-NavigateViaProps.displayName = "NavigateViaProps";
-NavigateViaProps.story = {
-  name: "Navigate via props"
+var NavigateViaProps = exports.NavigateViaProps = {
+  render: function render() {
+    var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      initialIndex = _useState4[0],
+      resetIndex = _useState4[1];
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, null, /*#__PURE__*/_react.default.createElement(Demo, {
+      initialIndex: initialIndex,
+      onChange: resetIndex
+    }), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      display: "flex",
+      justifyContent: "space-around"
+    }, /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+      onClick: function onClick() {
+        return resetIndex(0);
+      }
+    }, "Navigate to page 1"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+      onClick: function onClick() {
+        return resetIndex(1);
+      }
+    }, "Navigate to page 2"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+      onClick: function onClick() {
+        return resetIndex(2);
+      }
+    }, "Navigate to page 3"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+      onClick: function onClick() {
+        return resetIndex(3);
+      }
+    }, "Navigate to page 4"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+      onClick: function onClick() {
+        return resetIndex(4);
+      }
+    }, "Navigate to page 5")));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with external navigation controls to jump to specific pages."
+      }
+    }
+  }
 };
-var ConditionalChildren = exports.ConditionalChildren = function ConditionalChildren() {
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    mx: [2, 4],
-    my: 2
-  }, /*#__PURE__*/_react.default.createElement(_2.Carousel, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "1")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "2")), false && /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "3")), true && /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "4")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "5")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "6"))));
+var ConditionalChildren = exports.ConditionalChildren = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4],
+      my: 2
+    }, /*#__PURE__*/_react.default.createElement(_2.Carousel, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "1")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "2")), false && /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "3")), true && /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "4")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "5")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "6"))));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with conditionally rendered children to test dynamic content."
+      }
+    }
+  }
 };
-ConditionalChildren.displayName = "ConditionalChildren";
-var PaginationByCell = exports.PaginationByCell = function PaginationByCell() {
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    paginateBy: "cell"
-  });
+var PaginationByCell = exports.PaginationByCell = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      paginateBy: "cell"
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with cell-based pagination instead of page-based."
+      }
+    }
+  }
 };
-PaginationByCell.displayName = "PaginationByCell";
-var PaginationByCellWithVaryingWidths = exports.PaginationByCellWithVaryingWidths = function PaginationByCellWithVaryingWidths() {
-  var widths = Array.from(Array(25)).map(function (_, i) {
-    if (i % 15 === 0) return 400;
-    if (i % 5 === 0) return 300;
-    if (i % 3 === 0) return 333;
-    if (i % 2 === 0) return 275;
-    return 250;
-  });
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    paginateBy: "cell",
-    widths: widths
-  });
+var PaginationByCellWithVaryingWidths = exports.PaginationByCellWithVaryingWidths = {
+  render: function render() {
+    var widths = Array.from(Array(25)).map(function (_, i) {
+      if (i % 15 === 0) return 400;
+      if (i % 5 === 0) return 300;
+      if (i % 3 === 0) return 333;
+      if (i % 2 === 0) return 275;
+      return 250;
+    });
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      paginateBy: "cell",
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Cell-based pagination with items of varying widths."
+      }
+    }
+  }
 };
-PaginationByCellWithVaryingWidths.displayName = "PaginationByCellWithVaryingWidths";
 //# sourceMappingURL=Carousel.story.js.map