@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

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

@@ -0,0 +1,478 @@
+var _excluded = ["widths", "heights"];
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { fn } from "@storybook/test";
+import React, { useEffect, useState } from "react";
+import { Box } from "../Box";
+import { Clickable } from "../Clickable";
+import { Text } from "../Text";
+import { Carousel, CarouselCell, CarouselNext, CarouselPrevious, CarouselProps, CarouselRail } from "./";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+var LOREM = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, adipisci. Voluptate voluptatum porro facere atque dolores est neque ipsam quaerat necessitatibus? Deleniti tempora assumenda accusantium, quia quo ad rem expedita!";
+var Demo = function Demo(_ref) {
+  var _ref$widths = _ref.widths,
+    widths = _ref$widths === void 0 ? Array.from(Array(10)).map(function (_) {
+      return 300;
+    }) : _ref$widths,
+    _ref$heights = _ref.heights,
+    heights = _ref$heights === void 0 ? [400] : _ref$heights,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Box, {
+    mx: [2, 4],
+    my: 2
+  }, /*#__PURE__*/React.createElement(Carousel, _extends({
+    onChange: fn()
+  }, rest), widths.map(function (width, i) {
+    return /*#__PURE__*/React.createElement(Clickable, {
+      key: i,
+      width: width,
+      height: heights[i % heights.length],
+      bg: "mono10",
+      border: "1px solid",
+      borderColor: "mono30",
+      p: 1,
+      textAlign: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, i + 1));
+  })));
+};
+Demo.displayName = "Demo";
+export default {
+  title: "Components/Carousel",
+  component: 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: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Simple = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Demo, null);
+  }
+};
+export var Multiple = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Demo, null), /*#__PURE__*/React.createElement(Demo, null), /*#__PURE__*/React.createElement(Demo, null));
+  }
+};
+export var SinglePage = {
+  render: function render() {
+    var widths = [250, 250];
+    return /*#__PURE__*/React.createElement(Demo, {
+      widths: widths
+    });
+  }
+};
+export var SingleOverflowingItem = {
+  render: function render() {
+    var widths = [2000];
+    return /*#__PURE__*/React.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with a single item that overflows the container width."
+      }
+    }
+  }
+};
+export var MultipleOverflowingItems = {
+  render: function render() {
+    var widths = [100, 2000, 1000, 100, 1000];
+    return /*#__PURE__*/React.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with multiple items of varying widths, some overflowing."
+      }
+    }
+  }
+};
+export var TwoishPages = {
+  render: function render() {
+    var widths = Array.from(Array(5)).map(function (_) {
+      return 250;
+    });
+    return /*#__PURE__*/React.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel spanning approximately two pages with 5 items."
+      }
+    }
+  }
+};
+export var ManyPages = {
+  render: function render() {
+    var widths = Array.from(Array(100)).map(function (_) {
+      return 250;
+    });
+    return /*#__PURE__*/React.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with many items spanning multiple pages (100 items)."
+      }
+    }
+  }
+};
+export var 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.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with items of varying widths to demonstrate layout flexibility."
+      }
+    }
+  }
+};
+export var 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.createElement(Demo, {
+      widths: widths,
+      heights: [400, 300, 333, 275]
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with items of varying widths and heights."
+      }
+    }
+  }
+};
+export var DynamicItems = {
+  render: function render() {
+    var _useState = useState([300]),
+      _useState2 = _slicedToArray(_useState, 2),
+      widths = _useState2[0],
+      setWidths = _useState2[1];
+    useEffect(function () {
+      var interval = setInterval(function () {
+        setWidths(function (prevWidths) {
+          return [].concat(_toConsumableArray(prevWidths), [300]);
+        });
+      }, 500);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement(Demo, {
+      widths: widths
+    });
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: "Carousel that dynamically adds items every 500ms to test layout updates."
+      }
+    }
+  }
+};
+export var CustomArrows = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Demo, {
+      Previous: function Previous(props) {
+        return /*#__PURE__*/React.createElement(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.createElement(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."
+      }
+    }
+  }
+};
+export var CustomRailAndCells = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Demo, {
+      widths: ["100%", "100%", "100%", "100%"]
+      // eslint-disable-next-line react/display-name
+      ,
+      Cell: /*#__PURE__*/React.forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(CarouselCell, _extends({}, props, {
+          ref: ref,
+          display: "inline-flex",
+          width: "100%",
+          pr: 0
+        }));
+      }),
+      Rail: function Rail(props) {
+        return /*#__PURE__*/React.createElement(CarouselRail, _extends({}, props, {
+          transition: "none",
+          display: "block"
+        }));
+      }
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with custom rail and cell components for advanced layouts."
+      }
+    }
+  }
+};
+export var CarouselWithText = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4],
+      my: 2
+    }, /*#__PURE__*/React.createElement(Carousel, null, /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM)));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel containing text content blocks instead of other components."
+      }
+    }
+  }
+};
+export var InitialIndexOnMount = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Demo, {
+      initialIndex: 3
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel that starts at a specific index (3) on mount."
+      }
+    }
+  }
+};
+export var NavigateViaProps = {
+  render: function render() {
+    var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      initialIndex = _useState4[0],
+      resetIndex = _useState4[1];
+    return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Demo, {
+      initialIndex: initialIndex,
+      onChange: resetIndex
+    }), /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      justifyContent: "space-around"
+    }, /*#__PURE__*/React.createElement(Clickable, {
+      onClick: function onClick() {
+        return resetIndex(0);
+      }
+    }, "Navigate to page 1"), /*#__PURE__*/React.createElement(Clickable, {
+      onClick: function onClick() {
+        return resetIndex(1);
+      }
+    }, "Navigate to page 2"), /*#__PURE__*/React.createElement(Clickable, {
+      onClick: function onClick() {
+        return resetIndex(2);
+      }
+    }, "Navigate to page 3"), /*#__PURE__*/React.createElement(Clickable, {
+      onClick: function onClick() {
+        return resetIndex(3);
+      }
+    }, "Navigate to page 4"), /*#__PURE__*/React.createElement(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."
+      }
+    }
+  }
+};
+export var ConditionalChildren = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4],
+      my: 2
+    }, /*#__PURE__*/React.createElement(Carousel, null, /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "1")), /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "2")), false && /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "3")), true && /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "4")), /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "5")), /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "6"))));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with conditionally rendered children to test dynamic content."
+      }
+    }
+  }
+};
+export var PaginationByCell = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Demo, {
+      paginateBy: "cell"
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Carousel with cell-based pagination instead of page-based."
+      }
+    }
+  }
+};
+export var 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.createElement(Demo, {
+      paginateBy: "cell",
+      widths: widths
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Cell-based pagination with items of varying widths."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Carousel.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.story.js","names":["fn","React","useEffect","useState","Box","Clickable","Text","Carousel","CarouselCell","CarouselNext","CarouselPrevious","CarouselProps","CarouselRail","STORYBOOK_PROPS_BLOCKLIST","LOREM","Demo","_ref","_ref$widths","widths","Array","from","map","_","_ref$heights","heights","rest","_objectWithoutProperties","_excluded","createElement","mx","my","_extends","onChange","width","i","key","height","length","bg","border","borderColor","p","textAlign","variant","displayName","title","component","tags","parameters","docs","description","controls","exclude","Simple","render","Multiple","Fragment","SinglePage","SingleOverflowingItem","story","MultipleOverflowingItems","TwoishPages","ManyPages","VaryingWidths","VaryingHeights","DynamicItems","_useState","_useState2","_slicedToArray","setWidths","interval","setInterval","prevWidths","concat","_toConsumableArray","clearInterval","chromatic","disable","CustomArrows","Previous","props","style","transform","color","opacity","zIndex","Next","CustomRailAndCells","Cell","forwardRef","ref","display","pr","Rail","transition","CarouselWithText","InitialIndexOnMount","initialIndex","NavigateViaProps","_useState3","_useState4","resetIndex","justifyContent","onClick","ConditionalChildren","PaginationByCell","paginateBy","PaginationByCellWithVaryingWidths"],"sources":["../../../../src/elements/Carousel/Carousel.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport {\n  Carousel,\n  CarouselCell,\n  CarouselNext,\n  CarouselPrevious,\n  CarouselProps,\n  CarouselRail,\n} from \"./\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst LOREM =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, adipisci. Voluptate voluptatum porro facere atque dolores est neque ipsam quaerat necessitatibus? Deleniti tempora assumenda accusantium, quia quo ad rem expedita!\"\n\nconst Demo = ({\n  widths = Array.from(Array(10)).map((_) => 300),\n  heights = [400],\n  ...rest\n}: {\n  widths?: Array<number | string>\n  heights?: number[]\n} & Omit<CarouselProps, \"children\">) => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel onChange={fn()} {...rest}>\n        {widths.map((width, i) => {\n          return (\n            <Clickable\n              key={i}\n              width={width}\n              height={heights[i % heights.length]}\n              bg=\"mono10\"\n              border=\"1px solid\"\n              borderColor=\"mono30\"\n              p={1}\n              textAlign=\"center\"\n            >\n              <Text variant=\"xs\">{i + 1}</Text>\n            </Clickable>\n          )\n        })}\n      </Carousel>\n    </Box>\n  )\n}\n\nexport default {\n  title: \"Components/Carousel\",\n  component: Carousel,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A carousel component for displaying a horizontally scrollable collection of items with navigation controls. Supports variable widths, heights, and custom styling.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Simple = {\n  render: () => <Demo />,\n}\n\nexport const Multiple = {\n  render: () => (\n    <>\n      <Demo />\n      <Demo />\n      <Demo />\n    </>\n  ),\n}\n\nexport const SinglePage = {\n  render: () => {\n    const widths = [250, 250]\n    return <Demo widths={widths} />\n  },\n}\n\nexport const SingleOverflowingItem = {\n  render: () => {\n    const widths = [2000]\n    return <Demo widths={widths} />\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Carousel with a single item that overflows the container width.\",\n      },\n    },\n  },\n}\n\nexport const MultipleOverflowingItems = {\n  render: () => {\n    const widths = [100, 2000, 1000, 100, 1000]\n    return <Demo widths={widths} />\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Carousel with multiple items of varying widths, some overflowing.\",\n      },\n    },\n  },\n}\n\nexport const TwoishPages = {\n  render: () => {\n    const widths = Array.from(Array(5)).map((_) => 250)\n    return <Demo widths={widths} />\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Carousel spanning approximately two pages with 5 items.\",\n      },\n    },\n  },\n}\n\nexport const ManyPages = {\n  render: () => {\n    const widths = Array.from(Array(100)).map((_) => 250)\n    return <Demo widths={widths} />\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Carousel with many items spanning multiple pages (100 items).\",\n      },\n    },\n  },\n}\n\nexport const VaryingWidths = {\n  render: () => {\n    const widths = Array.from(Array(25)).map((_, i) => {\n      if (i % 15 === 0) return 400\n      if (i % 5 === 0) return 300\n      if (i % 3 === 0) return 333\n      if (i % 2 === 0) return 275\n      return 250\n    })\n\n    return <Demo widths={widths} />\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Carousel with items of varying widths to demonstrate layout flexibility.\",\n      },\n    },\n  },\n}\n\nexport const VaryingHeights = {\n  render: () => {\n    const widths = Array.from(Array(25)).map((_, i) => {\n      if (i % 15 === 0) return 400\n      if (i % 5 === 0) return 300\n      if (i % 3 === 0) return 333\n      if (i % 2 === 0) return 275\n      return 250\n    })\n\n    return <Demo widths={widths} heights={[400, 300, 333, 275]} />\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Carousel with items of varying widths and heights.\",\n      },\n    },\n  },\n}\n\nexport const DynamicItems = {\n  render: () => {\n    const [widths, setWidths] = useState([300])\n    useEffect(() => {\n      const interval = setInterval(() => {\n        setWidths((prevWidths) => [...prevWidths, 300])\n      }, 500)\n      return () => clearInterval(interval)\n    }, [])\n\n    return <Demo widths={widths} />\n  },\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story:\n          \"Carousel that dynamically adds items every 500ms to test layout updates.\",\n      },\n    },\n  },\n}\n\nexport const CustomArrows = {\n  render: () => {\n    return (\n      <Demo\n        Previous={(props) => (\n          <CarouselPrevious\n            {...props}\n            style={{ transform: \"translateX(0)\" }}\n            bg=\"mono5\"\n            color=\"red100\"\n            height={300}\n            opacity={0.75}\n            zIndex={1}\n          />\n        )}\n        Next={(props) => {\n          return (\n            <CarouselNext\n              {...props}\n              style={{ transform: \"translateX(0)\" }}\n              bg=\"mono5\"\n              color=\"red100\"\n              height={300}\n              opacity={0.75}\n              zIndex={1}\n            />\n          )\n        }}\n      />\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Carousel with custom styled navigation arrows.\",\n      },\n    },\n  },\n}\n\nexport const CustomRailAndCells = {\n  render: () => {\n    return (\n      <Demo\n        widths={[\"100%\", \"100%\", \"100%\", \"100%\"]}\n        // eslint-disable-next-line react/display-name\n        Cell={React.forwardRef((props, ref) => {\n          return (\n            <CarouselCell\n              {...props}\n              ref={ref as any}\n              display=\"inline-flex\"\n              width=\"100%\"\n              pr={0}\n            />\n          )\n        })}\n        Rail={(props) => {\n          return <CarouselRail {...props} transition=\"none\" display=\"block\" />\n        }}\n      />\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Carousel with custom rail and cell components for advanced layouts.\",\n      },\n    },\n  },\n}\n\nexport const CarouselWithText = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Carousel>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n        </Carousel>\n      </Box>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Carousel containing text content blocks instead of other components.\",\n      },\n    },\n  },\n}\n\nexport const InitialIndexOnMount = {\n  render: () => {\n    return <Demo initialIndex={3} />\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Carousel that starts at a specific index (3) on mount.\",\n      },\n    },\n  },\n}\n\nexport const NavigateViaProps = {\n  render: () => {\n    const [initialIndex, resetIndex] = useState(0)\n    return (\n      <Box>\n        <Demo initialIndex={initialIndex} onChange={resetIndex} />\n        <Box display=\"flex\" justifyContent=\"space-around\">\n          <Clickable onClick={() => resetIndex(0)}>\n            Navigate to page 1\n          </Clickable>\n          <Clickable onClick={() => resetIndex(1)}>\n            Navigate to page 2\n          </Clickable>\n          <Clickable onClick={() => resetIndex(2)}>\n            Navigate to page 3\n          </Clickable>\n          <Clickable onClick={() => resetIndex(3)}>\n            Navigate to page 4\n          </Clickable>\n          <Clickable onClick={() => resetIndex(4)}>\n            Navigate to page 5\n          </Clickable>\n        </Box>\n      </Box>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Carousel with external navigation controls to jump to specific pages.\",\n      },\n    },\n  },\n}\n\nexport const ConditionalChildren = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Carousel>\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">1</Text>\n          </Box>\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">2</Text>\n          </Box>\n          {false && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">3</Text>\n            </Box>\n          )}\n          {true && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">4</Text>\n            </Box>\n          )}\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">5</Text>\n          </Box>\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">6</Text>\n          </Box>\n        </Carousel>\n      </Box>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Carousel with conditionally rendered children to test dynamic content.\",\n      },\n    },\n  },\n}\n\nexport const PaginationByCell = {\n  render: () => {\n    return <Demo paginateBy=\"cell\" />\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Carousel with cell-based pagination instead of page-based.\",\n      },\n    },\n  },\n}\n\nexport const PaginationByCellWithVaryingWidths = {\n  render: () => {\n    const widths = Array.from(Array(25)).map((_, i) => {\n      if (i % 15 === 0) return 400\n      if (i % 5 === 0) return 300\n      if (i % 3 === 0) return 333\n      if (i % 2 === 0) return 275\n      return 250\n    })\n\n    return <Demo paginateBy=\"cell\" widths={widths} />\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Cell-based pagination with items of varying widths.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Carousel/CarouselNavigation.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { space } from "../../helpers";
+import { SpacingUnit } from "../../Theme";
+import { Clickable, ClickableProps } from "../Clickable";
+import { themeGet } from "@styled-system/theme-get";
+var ARROW_WIDTH = [2, 4];
+var ARROW_TRANSITION_MS = 250;
+
+/** CarouselNavigationProps */
+
+var Arrow = styled(Clickable).withConfig({
+  displayName: "CarouselNavigation__Arrow",
+  componentId: "sc-16jrffs-0"
+})(["position:absolute;top:0;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:opacity ", "ms,color ", "ms;> svg{fill:currentColor;}&:hover,&:focus{outline:0;color:", ";}&:disabled{opacity:0;cursor:default;}"], ARROW_TRANSITION_MS, ARROW_TRANSITION_MS, themeGet("colors.mono100"));
+
+/**
+ * Set some easily overwriteable props using `defaultProps`
+ */
+Arrow.defaultProps = {
+  width: ARROW_WIDTH.map(function (value) {
+    return space(value);
+  }),
+  height: "100%",
+  color: "mono60"
+};
+
+/**
+ * Default next button
+ */
+export var CarouselNext = styled(Arrow).withConfig({
+  displayName: "CarouselNavigation__CarouselNext",
+  componentId: "sc-16jrffs-1"
+})(["right:0;transform:translateX(100%);"]);
+
+/**
+ * Default previous button
+ */
+export var CarouselPrevious = styled(Arrow).withConfig({
+  displayName: "CarouselNavigation__CarouselPrevious",
+  componentId: "sc-16jrffs-2"
+})(["left:0;transform:translateX(-100%);"]);
+//# sourceMappingURL=CarouselNavigation.js.map

package/dist/esm/elements/Carousel/CarouselNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselNavigation.js","names":["styled","space","SpacingUnit","Clickable","ClickableProps","themeGet","ARROW_WIDTH","ARROW_TRANSITION_MS","Arrow","withConfig","displayName","componentId","defaultProps","width","map","value","height","color","CarouselNext","CarouselPrevious"],"sources":["../../../../src/elements/Carousel/CarouselNavigation.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { space } from \"../../helpers\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nconst ARROW_WIDTH: SpacingUnit[] = [2, 4]\nconst ARROW_TRANSITION_MS = 250\n\n/** CarouselNavigationProps */\nexport type CarouselNavigationProps = ClickableProps\n\nconst Arrow = styled(Clickable)`\n  position: absolute;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  transition: opacity ${ARROW_TRANSITION_MS}ms, color ${ARROW_TRANSITION_MS}ms;\n\n  > svg {\n    fill: currentColor;\n  }\n\n  &:hover,\n  &:focus {\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n  }\n\n  &:disabled {\n    opacity: 0;\n    cursor: default;\n  }\n`\n\n/**\n * Set some easily overwriteable props using `defaultProps`\n */\nArrow.defaultProps = {\n  width: ARROW_WIDTH.map((value) => space(value)),\n  height: \"100%\",\n  color: \"mono60\",\n}\n\n/**\n * Default next button\n */\nexport const CarouselNext = styled(Arrow)`\n  right: 0;\n  transform: translateX(100%);\n`\n\n/**\n * Default previous button\n */\nexport const CarouselPrevious = styled(Arrow)`\n  left: 0;\n  transform: translateX(-100%);\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,KAAK;AACd,SAASC,WAAW;AACpB,SAASC,SAAS,EAAEC,cAAc;AAClC,SAASC,QAAQ,QAAQ,0BAA0B;AAEnD,IAAMC,WAA0B,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AACzC,IAAMC,mBAAmB,GAAG,GAAG;;AAE/B;;AAGA,IAAMC,KAAK,GAAGR,MAAM,CAACG,SAAS,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mQAQPJ,mBAAmB,EAAaA,mBAAmB,EAS9DF,QAAQ,CAAC,gBAAgB,CAAC,CAOtC;;AAED;AACA;AACA;AACAG,KAAK,CAACI,YAAY,GAAG;EACnBC,KAAK,EAAEP,WAAW,CAACQ,GAAG,CAAC,UAACC,KAAK;IAAA,OAAKd,KAAK,CAACc,KAAK,CAAC;EAAA,EAAC;EAC/CC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;AACT,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAGlB,MAAM,CAACQ,KAAK,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2CAGxC;;AAED;AACA;AACA;AACA,OAAO,IAAMQ,gBAAgB,GAAGnB,MAAM,CAACQ,KAAK,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2CAG5C"}

package/dist/esm/elements/Carousel/index.js

@@ -0,0 +1,4 @@
+export * from "./Carousel";
+export * from "./CarouselNavigation";
+export * from "./paginate";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Carousel/index.ts"],"sourcesContent":["export * from \"./Carousel\"\nexport * from \"./CarouselNavigation\"\nexport * from \"./paginate\"\n"],"mappings":"AAAA;AACA;AACA"}