@artsy/palette 31.0.0 → 31.2.0

package/dist/elements/Carousel/Carousel.d.ts

@@ -32,6 +32,7 @@ export interface CarouselProps extends BoxProps {
      * that cell widths can be calculated.
      */
     Cell?: React.ForwardRefExoticComponent<CarouselCellProps>;
+    paginateBy?: "page" | "cell";
     onChange?(index: number): void;
     onPageCountChange?(count: number): void;
 }

package/dist/elements/Carousel/Carousel.js

@@ -29,7 +29,7 @@ var _CarouselNavigation = require("./CarouselNavigation");
 
 var _paginate = require("./paginate");
 
-var _excluded = ["initialIndex", "children", "Previous", "Next", "Rail", "Cell", "onChange", "onPageCountChange"];
+var _excluded = ["initialIndex", "children", "Previous", "Next", "Rail", "Cell", "paginateBy", "onChange", "onPageCountChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -116,6 +116,8 @@ var Carousel = function Carousel(_ref) {
       Rail = _ref$Rail === void 0 ? CarouselRail : _ref$Rail,
       _ref$Cell = _ref.Cell,
       Cell = _ref$Cell === void 0 ? CarouselCell : _ref$Cell,
+      _ref$paginateBy = _ref.paginateBy,
+      paginateBy = _ref$paginateBy === void 0 ? "page" : _ref$paginateBy,
       onChange = _ref.onChange,
       onPageCountChange = _ref.onPageCountChange,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -155,7 +157,8 @@ var Carousel = function Carousel(_ref) {
     });
     setPages((0, _paginate.paginateCarousel)({
       viewport: viewport.clientWidth,
-      values: values
+      values: values,
+      paginateBy: paginateBy
     }));
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Carousel/Carousel.tsx"],"names":["RAIL_TRANSITION_MS","transition","CarouselRail","Box","defaultProps","as","display","CarouselCell","CELL_GAP_PADDING_AMOUNT","Container","Viewport","Carousel","initialIndex","children","Previous","CarouselPrevious","Next","CarouselNext","Rail","Cell","onChange","onPageCountChange","rest","containerRef","viewportRef","startRef","endRef","cells","Children","toArray","filter","isValidElement","map","child","ref","pages","setPages","initialCursor","max","length","index","handleNext","handlePrev","setCursor","init","viewport","current","values","clientWidth","window","addEventListener","removeEventListener","skipToEnd","focus","skipToStart","handleKeydown","key","contains","document","activeElement","offset","transform","i","isLast"],"mappings":"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","sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { ResponsiveValue, system } from \"styled-system\"\nimport { useCursor } from \"use-cursor\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Skip } from \"../Skip\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport {\n  CarouselNavigationProps,\n  CarouselNext,\n  CarouselPrevious,\n} from \"./CarouselNavigation\"\nimport { paginateCarousel } from \"./paginate\"\n\nconst RAIL_TRANSITION_MS = 500\n\nconst transition = system({ transition: true })\n\n/** CarouselRailProps */\nexport type CarouselRailProps = BoxProps & {\n  transition?: ResponsiveValue<string>\n}\n\n/** A `CarouselRail` slides back and forth within the viewport */\nexport const CarouselRail = styled(Box)<CarouselRailProps>`\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n  ${transition}\n`\n\nCarouselRail.defaultProps = {\n  as: \"ul\",\n  display: \"flex\",\n  transition: `transform ${RAIL_TRANSITION_MS}ms`,\n}\n\n/** CarouselCellProps */\nexport type CarouselCellProps = BoxProps\n\n/** A `CarouselCell` wraps a single child in the carousel */\nexport const CarouselCell = styled(Box)`\n  white-space: normal;\n`\n\nCarouselCell.defaultProps = {\n  as: \"li\",\n}\n\n/**\n * We share this spacing value with the `Swiper` component\n */\nexport const CELL_GAP_PADDING_AMOUNT: SpacingUnit[] = [1, 2]\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n`\n\nconst Viewport = styled(Box)`\n  width: 100%;\n  overflow: hidden;\n`\n\nexport interface CarouselProps extends BoxProps {\n  initialIndex?: number\n  children: React.ReactNode\n  Next?: typeof CarouselNext | React.FC<CarouselNavigationProps>\n  Previous?: typeof CarouselPrevious | React.FC<CarouselNavigationProps>\n  Rail?: typeof CarouselRail | React.FC<CarouselRailProps>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<CarouselCellProps>\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Carousel` accepts children or a series of children that are JSX elements.\n * It presents them in a horizontal rail and when the width exceeds the width\n * of the viewport, it presents navigation arrows and allows a user to page\n * through them.\n */\nexport const Carousel: React.FC<CarouselProps> = ({\n  initialIndex = 0,\n  children,\n  Previous = CarouselPrevious,\n  Next = CarouselNext,\n  Rail = CarouselRail,\n  Cell = CarouselCell,\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n  const startRef = useRef<HTMLButtonElement | null>(null)\n  const endRef = useRef<HTMLButtonElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const [pages, setPages] = useState([0])\n\n  const { index, handleNext, handlePrev, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: pages.length,\n  })\n\n  const init = () => {\n    const { current: viewport } = viewportRef\n    const values = cells.map(({ ref }) => ref.current!.clientWidth)\n    setPages(paginateCarousel({ viewport: viewport!.clientWidth, values }))\n  }\n\n  useEffect(() => {\n    init()\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [cells])\n\n  const skipToEnd = () => {\n    if (!endRef.current) return\n    endRef.current.focus()\n    setCursor(pages.length - 1)\n  }\n\n  const skipToStart = () => {\n    if (!startRef.current) return\n    startRef.current.focus()\n    setCursor(0)\n  }\n\n  const handleKeydown = ({ key }: KeyboardEvent) => {\n    if (!containerRef.current) return\n\n    // Only triggers keyboard navigation if component is in focus\n    if (!containerRef.current.contains(document.activeElement)) {\n      return\n    }\n\n    switch (key) {\n      case \"ArrowRight\":\n        handleNext()\n        break\n      case \"ArrowLeft\":\n        handlePrev()\n        break\n      default:\n        break\n    }\n  }\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => document.removeEventListener(\"keydown\", handleKeydown)\n  }, [handleKeydown])\n\n  useUpdateEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useUpdateEffect(() => {\n    onPageCountChange && onPageCountChange(pages.length)\n  }, [onPageCountChange, pages.length])\n\n  const offset = `-${pages[index]}px`\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Skip ref={startRef} onClick={skipToEnd} width=\"100%\" mb={1}>\n        Skip to end of content\n      </Skip>\n\n      <nav>\n        <Previous\n          onClick={handlePrev}\n          disabled={index === 0}\n          aria-label=\"Previous page\"\n        >\n          <ChevronIcon direction=\"left\" width={15} height={15} />\n        </Previous>\n\n        <Next\n          onClick={handleNext}\n          disabled={index === pages.length - 1}\n          aria-label=\"Next page\"\n        >\n          <ChevronIcon direction=\"right\" width={15} height={15} />\n        </Next>\n      </nav>\n\n      <Viewport ref={viewportRef as any}>\n        <Rail style={{ transform: `translateX(${offset})` }}>\n          {cells.map(({ child, ref }, i) => {\n            const isLast = i === cells.length - 1\n\n            return (\n              <Cell\n                key={i}\n                ref={ref}\n                pr={!isLast && (CELL_GAP_PADDING_AMOUNT as any)}\n              >\n                {child}\n              </Cell>\n            )\n          })}\n        </Rail>\n      </Viewport>\n\n      <Skip ref={endRef} onClick={skipToStart} width=\"100%\" mt={1}>\n        Skip to beginning of content\n      </Skip>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        Page {index + 1} of {pages.length}\n      </VisuallyHidden>\n    </Container>\n  )\n}\n"],"file":"Carousel.js"}
+{"version":3,"sources":["../../../src/elements/Carousel/Carousel.tsx"],"names":["RAIL_TRANSITION_MS","transition","CarouselRail","Box","defaultProps","as","display","CarouselCell","CELL_GAP_PADDING_AMOUNT","Container","Viewport","Carousel","initialIndex","children","Previous","CarouselPrevious","Next","CarouselNext","Rail","Cell","paginateBy","onChange","onPageCountChange","rest","containerRef","viewportRef","startRef","endRef","cells","Children","toArray","filter","isValidElement","map","child","ref","pages","setPages","initialCursor","max","length","index","handleNext","handlePrev","setCursor","init","viewport","current","values","clientWidth","window","addEventListener","removeEventListener","skipToEnd","focus","skipToStart","handleKeydown","key","contains","document","activeElement","offset","transform","i","isLast"],"mappings":"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","sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { ResponsiveValue, system } from \"styled-system\"\nimport { useCursor } from \"use-cursor\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Skip } from \"../Skip\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport {\n  CarouselNavigationProps,\n  CarouselNext,\n  CarouselPrevious,\n} from \"./CarouselNavigation\"\nimport { paginateCarousel } from \"./paginate\"\n\nconst RAIL_TRANSITION_MS = 500\n\nconst transition = system({ transition: true })\n\n/** CarouselRailProps */\nexport type CarouselRailProps = BoxProps & {\n  transition?: ResponsiveValue<string>\n}\n\n/** A `CarouselRail` slides back and forth within the viewport */\nexport const CarouselRail = styled(Box)<CarouselRailProps>`\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n  ${transition}\n`\n\nCarouselRail.defaultProps = {\n  as: \"ul\",\n  display: \"flex\",\n  transition: `transform ${RAIL_TRANSITION_MS}ms`,\n}\n\n/** CarouselCellProps */\nexport type CarouselCellProps = BoxProps\n\n/** A `CarouselCell` wraps a single child in the carousel */\nexport const CarouselCell = styled(Box)`\n  white-space: normal;\n`\n\nCarouselCell.defaultProps = {\n  as: \"li\",\n}\n\n/**\n * We share this spacing value with the `Swiper` component\n */\nexport const CELL_GAP_PADDING_AMOUNT: SpacingUnit[] = [1, 2]\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n`\n\nconst Viewport = styled(Box)`\n  width: 100%;\n  overflow: hidden;\n`\n\nexport interface CarouselProps extends BoxProps {\n  initialIndex?: number\n  children: React.ReactNode\n  Next?: typeof CarouselNext | React.FC<CarouselNavigationProps>\n  Previous?: typeof CarouselPrevious | React.FC<CarouselNavigationProps>\n  Rail?: typeof CarouselRail | React.FC<CarouselRailProps>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<CarouselCellProps>\n  paginateBy?: \"page\" | \"cell\"\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Carousel` accepts children or a series of children that are JSX elements.\n * It presents them in a horizontal rail and when the width exceeds the width\n * of the viewport, it presents navigation arrows and allows a user to page\n * through them.\n */\nexport const Carousel: React.FC<CarouselProps> = ({\n  initialIndex = 0,\n  children,\n  Previous = CarouselPrevious,\n  Next = CarouselNext,\n  Rail = CarouselRail,\n  Cell = CarouselCell,\n  paginateBy = \"page\",\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n  const startRef = useRef<HTMLButtonElement | null>(null)\n  const endRef = useRef<HTMLButtonElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const [pages, setPages] = useState([0])\n\n  const { index, handleNext, handlePrev, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: pages.length,\n  })\n\n  const init = () => {\n    const { current: viewport } = viewportRef\n    const values = cells.map(({ ref }) => ref.current!.clientWidth)\n\n    setPages(\n      paginateCarousel({\n        viewport: viewport!.clientWidth,\n        values,\n        paginateBy,\n      })\n    )\n  }\n\n  useEffect(() => {\n    init()\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [cells])\n\n  const skipToEnd = () => {\n    if (!endRef.current) return\n    endRef.current.focus()\n    setCursor(pages.length - 1)\n  }\n\n  const skipToStart = () => {\n    if (!startRef.current) return\n    startRef.current.focus()\n    setCursor(0)\n  }\n\n  const handleKeydown = ({ key }: KeyboardEvent) => {\n    if (!containerRef.current) return\n\n    // Only triggers keyboard navigation if component is in focus\n    if (!containerRef.current.contains(document.activeElement)) {\n      return\n    }\n\n    switch (key) {\n      case \"ArrowRight\":\n        handleNext()\n        break\n      case \"ArrowLeft\":\n        handlePrev()\n        break\n      default:\n        break\n    }\n  }\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => document.removeEventListener(\"keydown\", handleKeydown)\n  }, [handleKeydown])\n\n  useUpdateEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useUpdateEffect(() => {\n    onPageCountChange && onPageCountChange(pages.length)\n  }, [onPageCountChange, pages.length])\n\n  const offset = `-${pages[index]}px`\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Skip ref={startRef} onClick={skipToEnd} width=\"100%\" mb={1}>\n        Skip to end of content\n      </Skip>\n\n      <nav>\n        <Previous\n          onClick={handlePrev}\n          disabled={index === 0}\n          aria-label=\"Previous page\"\n        >\n          <ChevronIcon direction=\"left\" width={15} height={15} />\n        </Previous>\n\n        <Next\n          onClick={handleNext}\n          disabled={index === pages.length - 1}\n          aria-label=\"Next page\"\n        >\n          <ChevronIcon direction=\"right\" width={15} height={15} />\n        </Next>\n      </nav>\n\n      <Viewport ref={viewportRef as any}>\n        <Rail style={{ transform: `translateX(${offset})` }}>\n          {cells.map(({ child, ref }, i) => {\n            const isLast = i === cells.length - 1\n\n            return (\n              <Cell\n                key={i}\n                ref={ref}\n                pr={!isLast && (CELL_GAP_PADDING_AMOUNT as any)}\n              >\n                {child}\n              </Cell>\n            )\n          })}\n        </Rail>\n      </Viewport>\n\n      <Skip ref={endRef} onClick={skipToStart} width=\"100%\" mt={1}>\n        Skip to beginning of content\n      </Skip>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        Page {index + 1} of {pages.length}\n      </VisuallyHidden>\n    </Container>\n  )\n}\n"],"file":"Carousel.js"}

package/dist/elements/Carousel/Carousel.story.d.ts

@@ -88,3 +88,5 @@ export declare const NavigateViaProps: {
     };
 };
 export declare const ConditionalChildren: () => JSX.Element;
+export declare const PaginationByCell: () => JSX.Element;
+export declare const PaginationByCellWithVaryingWidths: () => JSX.Element;

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.VaryingWidths = exports.VaryingHeights = exports.TwoishPages = exports.SinglePage = exports.SingleOverflowingItem = exports.Simple = exports.NavigateViaProps = exports.MultipleOverflowingItems = exports.Multiple = exports.ManyPages = exports.InitialIndexOnMount = exports.DynamicItems = exports.CustomRailAndCells = exports.CustomArrows = exports.ConditionalChildren = exports.CarouselWithText = void 0;
+exports.default = exports.VaryingWidths = exports.VaryingHeights = exports.TwoishPages = exports.SinglePage = exports.SingleOverflowingItem = exports.Simple = exports.PaginationByCellWithVaryingWidths = exports.PaginationByCell = exports.NavigateViaProps = exports.MultipleOverflowingItems = exports.Multiple = exports.ManyPages = exports.InitialIndexOnMount = exports.DynamicItems = exports.CustomRailAndCells = exports.CustomArrows = exports.ConditionalChildren = exports.CarouselWithText = void 0;
 
 var _addonActions = require("@storybook/addon-actions");
 
@@ -445,4 +445,30 @@ var ConditionalChildren = function ConditionalChildren() {
 
 exports.ConditionalChildren = ConditionalChildren;
 ConditionalChildren.displayName = "ConditionalChildren";
+
+var PaginationByCell = function PaginationByCell() {
+  return /*#__PURE__*/_react.default.createElement(Demo, {
+    paginateBy: "cell"
+  });
+};
+
+exports.PaginationByCell = PaginationByCell;
+PaginationByCell.displayName = "PaginationByCell";
+
+var 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
+  });
+};
+
+exports.PaginationByCellWithVaryingWidths = PaginationByCellWithVaryingWidths;
+PaginationByCellWithVaryingWidths.displayName = "PaginationByCellWithVaryingWidths";
 //# sourceMappingURL=Carousel.story.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Carousel/Carousel.story.tsx"],"names":["LOREM","Demo","widths","Array","from","map","_","heights","rest","width","i","length","title","Simple","Multiple","SinglePage","story","name","SingleOverflowingItem","MultipleOverflowingItems","TwoishPages","ManyPages","VaryingWidths","VaryingHeights","DynamicItems","setWidths","interval","setInterval","prevWidths","clearInterval","parameters","chromatic","disable","CustomArrows","props","transform","CustomRailAndCells","React","forwardRef","ref","CarouselWithText","InitialIndexOnMount","NavigateViaProps","initialIndex","resetIndex","ConditionalChildren"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\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 \"./\"\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={action(\"onChange\")} {...rest}>\n        {widths.map((width, i) => {\n          return (\n            <Clickable\n              key={i}\n              width={width}\n              height={heights[i % heights.length]}\n              bg=\"black10\"\n              border=\"1px solid\"\n              borderColor=\"black30\"\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 { title: \"Components/Carousel\" }\n\nexport const Simple = () => {\n  return <Demo />\n}\n\nexport const Multiple = () => {\n  return (\n    <>\n      <Demo />\n      <Demo />\n      <Demo />\n    </>\n  )\n}\n\nexport const SinglePage = () => {\n  const widths = [250, 250]\n  return <Demo widths={widths} />\n}\n\nSinglePage.story = {\n  name: \"Single page\",\n}\n\nexport const SingleOverflowingItem = () => {\n  const widths = [2000]\n  return <Demo widths={widths} />\n}\n\nSingleOverflowingItem.story = {\n  name: \"Single overflowing item\",\n}\n\nexport const MultipleOverflowingItems = () => {\n  const widths = [100, 2000, 1000, 100, 1000]\n  return <Demo widths={widths} />\n}\n\nMultipleOverflowingItems.story = {\n  name: \"Multiple overflowing items\",\n}\n\nexport const TwoishPages = () => {\n  const widths = Array.from(Array(5)).map((_) => 250)\n  return <Demo widths={widths} />\n}\n\nTwoishPages.story = {\n  name: \"Two-(ish) pages\",\n}\n\nexport const ManyPages = () => {\n  const widths = Array.from(Array(100)).map((_) => 250)\n  return <Demo widths={widths} />\n}\n\nManyPages.story = {\n  name: \"Many pages\",\n}\n\nexport const VaryingWidths = () => {\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\nVaryingWidths.story = {\n  name: \"Varying widths\",\n}\n\nexport const VaryingHeights = () => {\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\nVaryingHeights.story = {\n  name: \"Varying heights\",\n}\n\nexport const DynamicItems = () => {\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\nDynamicItems.story = {\n  name: \"Dynamic items\",\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const CustomArrows = () => {\n  return (\n    <Demo\n      Previous={(props) => (\n        <CarouselPrevious\n          {...props}\n          style={{ transform: \"translateX(0)\" }}\n          bg=\"black5\"\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=\"black5\"\n            color=\"red100\"\n            height={300}\n            opacity={0.75}\n            zIndex={1}\n          />\n        )\n      }}\n    />\n  )\n}\n\nCustomArrows.story = {\n  name: \"Custom arrows\",\n}\n\nexport const CustomRailAndCells = () => {\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\nCustomRailAndCells.story = {\n  name: \"Custom rail and cells\",\n}\n\nexport const CarouselWithText = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel>\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n      </Carousel>\n    </Box>\n  )\n}\n\nCarouselWithText.story = {\n  name: \"Carousel with text\",\n}\n\nexport const InitialIndexOnMount = () => {\n  return <Demo initialIndex={3} />\n}\n\nInitialIndexOnMount.story = {\n  name: \"initialIndex on mount\",\n}\n\nexport const NavigateViaProps = () => {\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)}>Navigate to page 1</Clickable>\n        <Clickable onClick={() => resetIndex(1)}>Navigate to page 2</Clickable>\n        <Clickable onClick={() => resetIndex(2)}>Navigate to page 3</Clickable>\n        <Clickable onClick={() => resetIndex(3)}>Navigate to page 4</Clickable>\n        <Clickable onClick={() => resetIndex(4)}>Navigate to page 5</Clickable>\n      </Box>\n    </Box>\n  )\n}\n\nNavigateViaProps.story = {\n  name: \"Navigate via props\",\n}\n\nexport const ConditionalChildren = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel>\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">1</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">2</Text>\n        </Box>\n\n        {false && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">3</Text>\n          </Box>\n        )}\n\n        {true && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">4</Text>\n          </Box>\n        )}\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">5</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">6</Text>\n        </Box>\n      </Carousel>\n    </Box>\n  )\n}\n"],"file":"Carousel.story.js"}
+{"version":3,"sources":["../../../src/elements/Carousel/Carousel.story.tsx"],"names":["LOREM","Demo","widths","Array","from","map","_","heights","rest","width","i","length","title","Simple","Multiple","SinglePage","story","name","SingleOverflowingItem","MultipleOverflowingItems","TwoishPages","ManyPages","VaryingWidths","VaryingHeights","DynamicItems","setWidths","interval","setInterval","prevWidths","clearInterval","parameters","chromatic","disable","CustomArrows","props","transform","CustomRailAndCells","React","forwardRef","ref","CarouselWithText","InitialIndexOnMount","NavigateViaProps","initialIndex","resetIndex","ConditionalChildren","PaginationByCell","PaginationByCellWithVaryingWidths"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\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 \"./\"\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={action(\"onChange\")} {...rest}>\n        {widths.map((width, i) => {\n          return (\n            <Clickable\n              key={i}\n              width={width}\n              height={heights[i % heights.length]}\n              bg=\"black10\"\n              border=\"1px solid\"\n              borderColor=\"black30\"\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 { title: \"Components/Carousel\" }\n\nexport const Simple = () => {\n  return <Demo />\n}\n\nexport const Multiple = () => {\n  return (\n    <>\n      <Demo />\n      <Demo />\n      <Demo />\n    </>\n  )\n}\n\nexport const SinglePage = () => {\n  const widths = [250, 250]\n  return <Demo widths={widths} />\n}\n\nSinglePage.story = {\n  name: \"Single page\",\n}\n\nexport const SingleOverflowingItem = () => {\n  const widths = [2000]\n  return <Demo widths={widths} />\n}\n\nSingleOverflowingItem.story = {\n  name: \"Single overflowing item\",\n}\n\nexport const MultipleOverflowingItems = () => {\n  const widths = [100, 2000, 1000, 100, 1000]\n  return <Demo widths={widths} />\n}\n\nMultipleOverflowingItems.story = {\n  name: \"Multiple overflowing items\",\n}\n\nexport const TwoishPages = () => {\n  const widths = Array.from(Array(5)).map((_) => 250)\n  return <Demo widths={widths} />\n}\n\nTwoishPages.story = {\n  name: \"Two-(ish) pages\",\n}\n\nexport const ManyPages = () => {\n  const widths = Array.from(Array(100)).map((_) => 250)\n  return <Demo widths={widths} />\n}\n\nManyPages.story = {\n  name: \"Many pages\",\n}\n\nexport const VaryingWidths = () => {\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\nVaryingWidths.story = {\n  name: \"Varying widths\",\n}\n\nexport const VaryingHeights = () => {\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\nVaryingHeights.story = {\n  name: \"Varying heights\",\n}\n\nexport const DynamicItems = () => {\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\nDynamicItems.story = {\n  name: \"Dynamic items\",\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const CustomArrows = () => {\n  return (\n    <Demo\n      Previous={(props) => (\n        <CarouselPrevious\n          {...props}\n          style={{ transform: \"translateX(0)\" }}\n          bg=\"black5\"\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=\"black5\"\n            color=\"red100\"\n            height={300}\n            opacity={0.75}\n            zIndex={1}\n          />\n        )\n      }}\n    />\n  )\n}\n\nCustomArrows.story = {\n  name: \"Custom arrows\",\n}\n\nexport const CustomRailAndCells = () => {\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\nCustomRailAndCells.story = {\n  name: \"Custom rail and cells\",\n}\n\nexport const CarouselWithText = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel>\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n      </Carousel>\n    </Box>\n  )\n}\n\nCarouselWithText.story = {\n  name: \"Carousel with text\",\n}\n\nexport const InitialIndexOnMount = () => {\n  return <Demo initialIndex={3} />\n}\n\nInitialIndexOnMount.story = {\n  name: \"initialIndex on mount\",\n}\n\nexport const NavigateViaProps = () => {\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)}>Navigate to page 1</Clickable>\n        <Clickable onClick={() => resetIndex(1)}>Navigate to page 2</Clickable>\n        <Clickable onClick={() => resetIndex(2)}>Navigate to page 3</Clickable>\n        <Clickable onClick={() => resetIndex(3)}>Navigate to page 4</Clickable>\n        <Clickable onClick={() => resetIndex(4)}>Navigate to page 5</Clickable>\n      </Box>\n    </Box>\n  )\n}\n\nNavigateViaProps.story = {\n  name: \"Navigate via props\",\n}\n\nexport const ConditionalChildren = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel>\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">1</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">2</Text>\n        </Box>\n\n        {false && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">3</Text>\n          </Box>\n        )}\n\n        {true && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">4</Text>\n          </Box>\n        )}\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">5</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">6</Text>\n        </Box>\n      </Carousel>\n    </Box>\n  )\n}\n\nexport const PaginationByCell = () => {\n  return <Demo paginateBy=\"cell\" />\n}\n\nexport const PaginationByCellWithVaryingWidths = () => {\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"],"file":"Carousel.story.js"}

package/dist/elements/Carousel/paginate.d.ts

@@ -14,14 +14,18 @@ export declare const chunk: ({ viewport, values, }: {
 }) => number[];
 /** Align last page to the left or right */
 export declare type CarouselPaginationAlignment = "left" | "right";
+export declare type CarouselPaginateBy = "page" | "cell";
+interface PaginateCarouselProps {
+    viewport: number;
+    values: number[];
+    alignment?: CarouselPaginationAlignment;
+    paginateBy?: CarouselPaginateBy;
+}
 /**
  * Creates an array of offsets based on the given viewport
  * @param viewport window width
  * @param values array of cell widths
  * @param alignment align last page to the left or right
  */
-export declare const paginateCarousel: ({ viewport, values, alignment, }: {
-    viewport: number;
-    values: number[];
-    alignment?: CarouselPaginationAlignment | undefined;
-}) => number[];
+export declare const paginateCarousel: ({ viewport, values, alignment, paginateBy, }: PaginateCarouselProps) => number[];
+export {};

package/dist/elements/Carousel/paginate.js

@@ -55,17 +55,52 @@ var chunk = function chunk(_ref) {
 
 exports.chunk = chunk;
 
+var paginateCarouselByCell = function paginateCarouselByCell(_ref2) {
+  var values = _ref2.values,
+      viewport = _ref2.viewport;
+  var sum = values.reduce(function (acc, curr) {
+    return acc + curr;
+  }, 0); // No need to paginate
+
+  if (sum <= viewport) {
+    return [0];
+  }
+
+  var offsets = compound(values);
+  var lastOffset = offsets[offsets.length - 1]; // Get the offset when the last cell is fully displayed
+  // and aligned to the right at the end of the carousel
+
+  var offsetToLastCell = lastOffset - viewport; // Ignore some offsets whose value exceeds the offset of the last cell
+  // when it is displayed and aligned to the right
+
+  var edges = offsets.filter(function (offset) {
+    return offsetToLastCell > offset;
+  });
+  return [0].concat(_toConsumableArray(edges), [offsetToLastCell]);
+};
 /**
  * Creates an array of offsets based on the given viewport
  * @param viewport window width
  * @param values array of cell widths
  * @param alignment align last page to the left or right
  */
-var paginateCarousel = function paginateCarousel(_ref2) {
-  var viewport = _ref2.viewport,
-      values = _ref2.values,
-      _ref2$alignment = _ref2.alignment,
-      alignment = _ref2$alignment === void 0 ? "right" : _ref2$alignment;
+
+
+var paginateCarousel = function paginateCarousel(_ref3) {
+  var viewport = _ref3.viewport,
+      values = _ref3.values,
+      _ref3$alignment = _ref3.alignment,
+      alignment = _ref3$alignment === void 0 ? "right" : _ref3$alignment,
+      _ref3$paginateBy = _ref3.paginateBy,
+      paginateBy = _ref3$paginateBy === void 0 ? "page" : _ref3$paginateBy;
+
+  if (paginateBy === "cell") {
+    return paginateCarouselByCell({
+      values: values,
+      viewport: viewport
+    });
+  }
+
   var offsets = chunk({
     viewport: viewport,
     values: values

package/dist/elements/Carousel/paginate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Carousel/paginate.ts"],"names":["compound","xs","reduce","p","n","concat","slice","chunk","viewport","values","acc","value","prev","length","paginateCarousel","alignment","offsets","edges","head","tail","pages"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,EAAD,EAA4B;AAClD;AACA,SAAOA,EAAE,CAACC,MAAH,CAAU,UAACC,CAAD,EAAIC,CAAJ;AAAA,WAAUD,CAAC,CAACE,MAAF,CAAS,CAAC,CAACF,CAAC,CAACG,KAAF,CAAQ,CAAC,CAAT,CAAD,IAAgB,CAAjB,IAAsBF,CAA/B,CAAV;AAAA,GAAV,EAAuD,EAAvD,CAAP;AACD,CAHM;AAKP;AACA;AACA;AACA;AACA;;;;;AACO,IAAMG,KAAK,GAAG,SAARA,KAAQ,OAMf;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AACJ,SAAOA,MAAM,CAACP,MAAP,CACL,UAACQ,GAAD,EAAMC,KAAN,EAAgB;AACd,QAAMC,IAAI,GAAGF,GAAG,CAACA,GAAG,CAACG,MAAJ,GAAa,CAAd,CAAhB;;AACA,QAAID,IAAI,GAAGD,KAAP,IAAgBH,QAApB,EAA8B;AAC5BE,MAAAA,GAAG,CAACA,GAAG,CAACG,MAAJ,GAAa,CAAd,CAAH,IAAuBF,KAAvB;AACA,aAAOD,GAAP;AACD;;AACD,wCAAWA,GAAX,IAAgBC,KAAhB;AACD,GARI,EASL,CAAC,CAAD,CATK,CAAP;AAWD,CAlBM;AAoBP;;;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAmB,QAQ1B;AAAA,MAPJN,QAOI,SAPJA,QAOI;AAAA,MANJC,MAMI,SANJA,MAMI;AAAA,8BALJM,SAKI;AAAA,MALJA,SAKI,gCALQ,OAKR;AACJ,MAAMC,OAAO,GAAGT,KAAK,CAAC;AAAEC,IAAAA,QAAQ,EAARA,QAAF;AAAYC,IAAAA,MAAM,EAANA;AAAZ,GAAD,CAArB,CADI,CAGJ;;AACA,MAAIO,OAAO,CAACH,MAAR,KAAmB,CAAvB,EAA0B;AACxB,WAAO,CAAC,CAAD,CAAP;AACD,GANG,CAQJ;;;AACA,MAAIE,SAAS,KAAK,OAAlB,EAA2B;AACzB,QAAME,KAAK,GAAGjB,QAAQ,CAACgB,OAAD,CAAtB;AACA,QAAME,IAAI,GAAGD,KAAK,CAACX,KAAN,CAAY,CAAZ,EAAe,CAAC,CAAhB,CAAb;AACA,QAAMa,IAAI,GAAGF,KAAK,CAACA,KAAK,CAACJ,MAAN,GAAe,CAAhB,CAAL,GAA0BL,QAAvC;AACA,YAAQ,CAAR,4BAAcU,IAAd,IAAoBC,IAApB;AACD,GAdG,CAgBJ;;;AACA,MAAMC,KAAK,GAAGpB,QAAQ,CAACgB,OAAD,CAAR,CAAkBV,KAAlB,CAAwB,CAAxB,EAA2B,CAAC,CAA5B,CAAd;AAEA,UAAQ,CAAR,4BAAcc,KAAd;AACD,CA5BM","sourcesContent":["/**\n * Sums all values, building from the previous\n * @param xs list of values to compound\n */\nexport const compound = (xs: number[]): number[] => {\n  // @ts-expect-error  MIGRATE_STRICT_MODE\n  return xs.reduce((p, n) => p.concat((+p.slice(-1) || 0) + n), [])\n}\n\n/**\n * Build an array of offsets\n * @param viewport window width\n * @param values array of cell widths\n */\nexport const chunk = ({\n  viewport,\n  values,\n}: {\n  viewport: number\n  values: number[]\n}) => {\n  return values.reduce(\n    (acc, value) => {\n      const prev = acc[acc.length - 1]\n      if (prev + value <= viewport) {\n        acc[acc.length - 1] += value\n        return acc\n      }\n      return [...acc, value]\n    },\n    [0]\n  )\n}\n\n/** Align last page to the left or right */\nexport type CarouselPaginationAlignment = \"left\" | \"right\"\n\n/**\n * Creates an array of offsets based on the given viewport\n * @param viewport window width\n * @param values array of cell widths\n * @param alignment align last page to the left or right\n */\nexport const paginateCarousel = ({\n  viewport,\n  values,\n  alignment = \"right\",\n}: {\n  viewport: number\n  values: number[]\n  alignment?: CarouselPaginationAlignment\n}) => {\n  const offsets = chunk({ viewport, values })\n\n  // Only a single page — no need to paginate\n  if (offsets.length === 1) {\n    return [0]\n  }\n\n  // Last page align right\n  if (alignment === \"right\") {\n    const edges = compound(offsets)\n    const head = edges.slice(0, -2)\n    const tail = edges[edges.length - 1] - viewport\n    return [0, ...head, tail]\n  }\n\n  // Last page align left\n  const pages = compound(offsets).slice(0, -1)\n\n  return [0, ...pages]\n}\n"],"file":"paginate.js"}
+{"version":3,"sources":["../../../src/elements/Carousel/paginate.ts"],"names":["compound","xs","reduce","p","n","concat","slice","chunk","viewport","values","acc","value","prev","length","paginateCarouselByCell","sum","curr","offsets","lastOffset","offsetToLastCell","edges","filter","offset","paginateCarousel","alignment","paginateBy","head","tail","pages"],"mappings":"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","sourcesContent":["/**\n * Sums all values, building from the previous\n * @param xs list of values to compound\n */\nexport const compound = (xs: number[]): number[] => {\n  // @ts-expect-error  MIGRATE_STRICT_MODE\n  return xs.reduce((p, n) => p.concat((+p.slice(-1) || 0) + n), [])\n}\n\n/**\n * Build an array of offsets\n * @param viewport window width\n * @param values array of cell widths\n */\nexport const chunk = ({\n  viewport,\n  values,\n}: {\n  viewport: number\n  values: number[]\n}) => {\n  return values.reduce(\n    (acc, value) => {\n      const prev = acc[acc.length - 1]\n      if (prev + value <= viewport) {\n        acc[acc.length - 1] += value\n        return acc\n      }\n      return [...acc, value]\n    },\n    [0]\n  )\n}\n\n/** Align last page to the left or right */\nexport type CarouselPaginationAlignment = \"left\" | \"right\"\n\nexport type CarouselPaginateBy = \"page\" | \"cell\"\n\ninterface PaginateCarouselProps {\n  viewport: number\n  values: number[]\n  alignment?: CarouselPaginationAlignment\n  paginateBy?: CarouselPaginateBy\n}\n\nconst paginateCarouselByCell = ({\n  values,\n  viewport,\n}: Pick<PaginateCarouselProps, \"values\" | \"viewport\">) => {\n  const sum = values.reduce((acc, curr) => acc + curr, 0)\n\n  // No need to paginate\n  if (sum <= viewport) {\n    return [0]\n  }\n\n  const offsets = compound(values)\n  const lastOffset = offsets[offsets.length - 1]\n\n  // Get the offset when the last cell is fully displayed\n  // and aligned to the right at the end of the carousel\n  const offsetToLastCell = lastOffset - viewport\n\n  // Ignore some offsets whose value exceeds the offset of the last cell\n  // when it is displayed and aligned to the right\n  const edges = offsets.filter((offset) => offsetToLastCell > offset)\n\n  return [0, ...edges, offsetToLastCell]\n}\n\n/**\n * Creates an array of offsets based on the given viewport\n * @param viewport window width\n * @param values array of cell widths\n * @param alignment align last page to the left or right\n */\nexport const paginateCarousel = ({\n  viewport,\n  values,\n  alignment = \"right\",\n  paginateBy = \"page\",\n}: PaginateCarouselProps) => {\n  if (paginateBy === \"cell\") {\n    return paginateCarouselByCell({ values, viewport })\n  }\n\n  const offsets = chunk({ viewport, values })\n\n  // Only a single page — no need to paginate\n  if (offsets.length === 1) {\n    return [0]\n  }\n\n  // Last page align right\n  if (alignment === \"right\") {\n    const edges = compound(offsets)\n    const head = edges.slice(0, -2)\n    const tail = edges[edges.length - 1] - viewport\n    return [0, ...head, tail]\n  }\n\n  // Last page align left\n  const pages = compound(offsets).slice(0, -1)\n\n  return [0, ...pages]\n}\n"],"file":"paginate.js"}

package/dist/elements/Expandable/Expandable.js

@@ -21,7 +21,7 @@ var _Flex = require("../Flex");
 
 var _Text = require("../Text");
 
-var _excluded = ["label", "expanded", "children", "disabled", "onClick"];
+var _excluded = ["label", "expanded", "children", "disabled", "onClick", "borderColor"];
 
 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); }
 
@@ -54,6 +54,8 @@ var Expandable = function Expandable(_ref) {
       children = _ref.children,
       disabled = _ref.disabled,
       onClick = _ref.onClick,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "black60" : _ref$borderColor,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(defaultExpanded),
@@ -79,7 +81,7 @@ var Expandable = function Expandable(_ref) {
     alignItems: "center",
     justifyContent: "space-between",
     borderTop: "1px solid",
-    borderColor: "black60",
+    borderColor: borderColor,
     pt: 1,
     disabled: disabled,
     "aria-expanded": expanded,
@@ -97,6 +99,7 @@ var Expandable = function Expandable(_ref) {
     height: 14,
     ml: 1,
     mr: 1,
+    fill: "currentColor",
     "aria-hidden": "true"
   })), expanded && (typeof children === "function" ? children({
     setExpanded: setExpanded,

package/dist/elements/Expandable/Expandable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","rest","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAO/C;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALMC,eAKN,QALJC,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,kBAAgC,qBAASL,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBK,WAAjB;;AAEA,uBAAmC,wBAAcD,IAAd,CAAnC;AAAA;AAAA,MAAOE,QAAP;AAAA,MAAiBC,cAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACHJ,IAAAA,WAAW,CAAC,UAACK,YAAD;AAAA,aAAkB,CAACA,YAAnB;AAAA,KAAD,CAAX;AACAP,IAAAA,OAAO,IAAIA,OAAO,CAACM,KAAD,CAAlB;AACD,GALD;;AAOA,sBACE,6BAAC,QAAD,EAASH,QAAT,eACE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,eAJjB;AAKE,IAAA,SAAS,EAAC,WALZ;AAME,IAAA,WAAW,EAAC,SANd;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEJ,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAEQ;AAVX,KAWMD,cAXN,gBAaE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,SAAS,EAAE,EAA1B;AAA8B,IAAA,OAAO,EAAC,MAAtC;AAA6C,IAAA,UAAU,EAAC;AAAxD,KACG,oBAAOT,KAAP,iBAAgB,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAAhB,GAA4DA,KAD/D,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAE,EAFT;AAGE,IAAA,MAAM,EAAE,EAHV;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAE,CALN;AAME,mBAAY;AANd,IAlBJ,CADF,EA8BGA,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEI,IAAAA,WAAW,EAAXA,WAAF;AAAeL,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA9BX,CADF;AAqCD,CAxDM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport interface ExpandableProps extends ClickableProps {\n  label?: string | JSX.Element\n  expanded?: boolean\n  children: React.ReactNode\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable: React.FC<ExpandableProps> = ({\n  label,\n  expanded: defaultExpanded,\n  children,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  const [boxProps, clickableProps] = splitBoxProps(rest)\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    setExpanded((prevExpanded) => !prevExpanded)\n    onClick && onClick(event)\n  }\n\n  return (\n    <Box {...boxProps}>\n      <Clickable\n        width=\"100%\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        borderTop=\"1px solid\"\n        borderColor=\"black60\"\n        pt={1}\n        disabled={disabled}\n        aria-expanded={expanded}\n        onClick={handleClick}\n        {...clickableProps}\n      >\n        <Flex flex={1} minHeight={40} display=\"flex\" alignItems=\"center\">\n          {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <ChevronIcon\n            direction={expanded ? \"up\" : \"down\"}\n            width={14}\n            height={14}\n            ml={1}\n            mr={1}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Clickable>\n\n      {expanded &&\n        (typeof children === \"function\"\n          ? children({ setExpanded, expanded })\n          : children)}\n    </Box>\n  )\n}\n"],"file":"Expandable.js"}
+{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","borderColor","rest","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAQ/C;AAAA,MAPJC,KAOI,QAPJA,KAOI;AAAA,MANMC,eAMN,QANJC,QAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,8BAFJC,WAEI;AAAA,MAFJA,WAEI,iCAFU,SAEV;AAAA,MADDC,IACC;;AACJ,kBAAgC,qBAASN,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBM,WAAjB;;AAEA,uBAAmC,wBAAcD,IAAd,CAAnC;AAAA;AAAA,MAAOE,QAAP;AAAA,MAAiBC,cAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACHJ,IAAAA,WAAW,CAAC,UAACK,YAAD;AAAA,aAAkB,CAACA,YAAnB;AAAA,KAAD,CAAX;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GALD;;AAOA,sBACE,6BAAC,QAAD,EAASH,QAAT,eACE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,eAJjB;AAKE,IAAA,SAAS,EAAC,WALZ;AAME,IAAA,WAAW,EAAEH,WANf;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEF,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAES;AAVX,KAWMD,cAXN,gBAaE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,SAAS,EAAE,EAA1B;AAA8B,IAAA,OAAO,EAAC,MAAtC;AAA6C,IAAA,UAAU,EAAC;AAAxD,KACG,oBAAOV,KAAP,iBAAgB,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAAhB,GAA4DA,KAD/D,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAE,EAFT;AAGE,IAAA,MAAM,EAAE,EAHV;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAE,CALN;AAME,IAAA,IAAI,EAAC,cANP;AAOE,mBAAY;AAPd,IAlBJ,CADF,EA+BGA,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEK,IAAAA,WAAW,EAAXA,WAAF;AAAeN,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA/BX,CADF;AAsCD,CA1DM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport interface ExpandableProps extends ClickableProps {\n  label?: string | JSX.Element\n  expanded?: boolean\n  children: React.ReactNode\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable: React.FC<ExpandableProps> = ({\n  label,\n  expanded: defaultExpanded,\n  children,\n  disabled,\n  onClick,\n  borderColor = \"black60\",\n  ...rest\n}) => {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  const [boxProps, clickableProps] = splitBoxProps(rest)\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    setExpanded((prevExpanded) => !prevExpanded)\n    onClick && onClick(event)\n  }\n\n  return (\n    <Box {...boxProps}>\n      <Clickable\n        width=\"100%\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        borderTop=\"1px solid\"\n        borderColor={borderColor}\n        pt={1}\n        disabled={disabled}\n        aria-expanded={expanded}\n        onClick={handleClick}\n        {...clickableProps}\n      >\n        <Flex flex={1} minHeight={40} display=\"flex\" alignItems=\"center\">\n          {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <ChevronIcon\n            direction={expanded ? \"up\" : \"down\"}\n            width={14}\n            height={14}\n            ml={1}\n            mr={1}\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </Clickable>\n\n      {expanded &&\n        (typeof children === \"function\"\n          ? children({ setExpanded, expanded })\n          : children)}\n    </Box>\n  )\n}\n"],"file":"Expandable.js"}

package/dist/elements/Expandable/Expandable.story.d.ts

@@ -3,3 +3,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => JSX.Element;
+export declare const ConfigurableColors: () => JSX.Element;

package/dist/elements/Expandable/Expandable.story.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.Default = exports.ConfigurableColors = void 0;
 
 var _addonActions = require("@storybook/addon-actions");
 
@@ -21,6 +21,8 @@ var _Expandable = require("./Expandable");
 
 var _Button = require("../Button");
 
+var _Box = require("../Box");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
@@ -77,4 +79,22 @@ var Default = function Default() {
 
 exports.Default = Default;
 Default.displayName = "Default";
+
+var ConfigurableColors = function ConfigurableColors() {
+  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    color: "white100",
+    bg: "black100"
+  }, /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{}, {
+      expanded: true
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_Expandable.Expandable, {
+    label: "Example",
+    maxWidth: 350,
+    borderColor: "black30"
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, "Expanded content"))));
+};
+
+exports.ConfigurableColors = ConfigurableColors;
+ConfigurableColors.displayName = "ConfigurableColors";
 //# sourceMappingURL=Expandable.story.js.map

package/dist/elements/Expandable/Expandable.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb","children","setExpanded"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AACEC,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,cAAc,EAAC;AAA9B,sBACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,eAEE,6BAAC,oBAAD;AACE,QAAA,cAAc,EAAC,WADjB;AAEE,QAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACdA,UAAAA,CAAC,CAACC,eAAF;AACA,oCAAO,kBAAP;AACD;AALH,sBAOE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,iBAPF,CAFF;AAFJ,KALM,EAqBN;AAAEC,MAAAA,EAAE,EAAE;AAAN,KArBM,EAsBN;AAAEL,MAAAA,QAAQ,EAAE,IAAZ;AAAkBK,MAAAA,EAAE,EAAE;AAAtB,KAtBM,EAuBN;AACEL,MAAAA,QAAQ,EAAE,IADZ;AAEEM,MAAAA,QAAQ,EAAE;AAAA,YAAGC,WAAH,QAAGA,WAAH;AAAA,4BACR,uDACE,6BAAC,UAAD,2BADF,eAEE,6BAAC,cAAD;AAAQ,UAAA,OAAO,EAAE;AAAA,mBAAMA,WAAW,CAAC,KAAD,CAAjB;AAAA;AAAjB,mBAFF,CADQ;AAAA;AAFZ,KAvBM;AADV,kBAmCE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE;AAAtC,kBACE,6BAAC,UAAD,2BADF,CAnCF,CADF;AAyCD,CA1CM;;;AAAMR,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Expandable, ExpandableProps } from \"./Expandable\"\nimport { Button } from \"../Button\"\n\nexport default {\n  title: \"Components/Expandable\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ExpandableProps>>\n      states={[\n        {},\n        { expanded: true },\n        { expanded: false, disabled: true },\n        { expanded: true, disabled: true },\n        {\n          label: (\n            <Flex flex={1} justifyContent=\"space-between\">\n              <Text variant=\"sm-display\">Heading</Text>\n              <Clickable\n                textDecoration=\"underline\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action(\"Secondary action\")\n                }}\n              >\n                <Text variant=\"sm-display\">Reset</Text>\n              </Clickable>\n            </Flex>\n          ),\n        },\n        { mb: 6 },\n        { expanded: true, mb: 6 },\n        {\n          expanded: true,\n          children: ({ setExpanded }) => (\n            <div>\n              <Text>Expanded content</Text>\n              <Button onClick={() => setExpanded(false)}>Close</Button>\n            </div>\n          ),\n        },\n      ]}\n    >\n      <Expandable label=\"Example\" maxWidth={350}>\n        <Text>Expanded content</Text>\n      </Expandable>\n    </States>\n  )\n}\n"],"file":"Expandable.story.js"}
+{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb","children","setExpanded","ConfigurableColors"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AACEC,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,cAAc,EAAC;AAA9B,sBACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,eAEE,6BAAC,oBAAD;AACE,QAAA,cAAc,EAAC,WADjB;AAEE,QAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACdA,UAAAA,CAAC,CAACC,eAAF;AACA,oCAAO,kBAAP;AACD;AALH,sBAOE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,iBAPF,CAFF;AAFJ,KALM,EAqBN;AAAEC,MAAAA,EAAE,EAAE;AAAN,KArBM,EAsBN;AAAEL,MAAAA,QAAQ,EAAE,IAAZ;AAAkBK,MAAAA,EAAE,EAAE;AAAtB,KAtBM,EAuBN;AACEL,MAAAA,QAAQ,EAAE,IADZ;AAEEM,MAAAA,QAAQ,EAAE;AAAA,YAAGC,WAAH,QAAGA,WAAH;AAAA,4BACR,uDACE,6BAAC,UAAD,2BADF,eAEE,6BAAC,cAAD;AAAQ,UAAA,OAAO,EAAE;AAAA,mBAAMA,WAAW,CAAC,KAAD,CAAjB;AAAA;AAAjB,mBAFF,CADQ;AAAA;AAFZ,KAvBM;AADV,kBAmCE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE;AAAtC,kBACE,6BAAC,UAAD,2BADF,CAnCF,CADF;AAyCD,CA1CM;;;AAAMR,O;;AA4CN,IAAMS,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC,sBACE,6BAAC,QAAD;AAAK,IAAA,KAAK,EAAC,UAAX;AAAsB,IAAA,EAAE,EAAC;AAAzB,kBACE,6BAAC,uBAAD;AAAkC,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAER,MAAAA,QAAQ,EAAE;AAAZ,KAAL;AAA1C,kBACE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE,GAAtC;AAA2C,IAAA,WAAW,EAAC;AAAvD,kBACE,6BAAC,UAAD,2BADF,CADF,CADF,CADF;AASD,CAVM;;;AAAMQ,kB","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Expandable, ExpandableProps } from \"./Expandable\"\nimport { Button } from \"../Button\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/Expandable\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ExpandableProps>>\n      states={[\n        {},\n        { expanded: true },\n        { expanded: false, disabled: true },\n        { expanded: true, disabled: true },\n        {\n          label: (\n            <Flex flex={1} justifyContent=\"space-between\">\n              <Text variant=\"sm-display\">Heading</Text>\n              <Clickable\n                textDecoration=\"underline\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action(\"Secondary action\")\n                }}\n              >\n                <Text variant=\"sm-display\">Reset</Text>\n              </Clickable>\n            </Flex>\n          ),\n        },\n        { mb: 6 },\n        { expanded: true, mb: 6 },\n        {\n          expanded: true,\n          children: ({ setExpanded }) => (\n            <div>\n              <Text>Expanded content</Text>\n              <Button onClick={() => setExpanded(false)}>Close</Button>\n            </div>\n          ),\n        },\n      ]}\n    >\n      <Expandable label=\"Example\" maxWidth={350}>\n        <Text>Expanded content</Text>\n      </Expandable>\n    </States>\n  )\n}\n\nexport const ConfigurableColors = () => {\n  return (\n    <Box color=\"white100\" bg=\"black100\">\n      <States<Partial<ExpandableProps>> states={[{}, { expanded: true }]}>\n        <Expandable label=\"Example\" maxWidth={350} borderColor=\"black30\">\n          <Text>Expanded content</Text>\n        </Expandable>\n      </States>\n    </Box>\n  )\n}\n"],"file":"Expandable.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "31.0.0",
+  "version": "31.2.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -174,5 +174,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "19af5e88070744f453802f9cac9733cee93c7dee"
+  "gitHead": "2bffc0d82a46005c2d3b007e25d88428060e630c"
 }