@artsy/palette 45.14.0-canary.1497.33070.0 → 45.14.0-canary.1497.33079.0

package/dist/esm/elements/Shelf/ShelfScrollBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShelfScrollBar.js","names":["themeGet","React","useEffect","useRef","useState","styled","useMutationObserver","Box","BoxProps","Clickable","useClickScroll","useDragScroll","ShelfScrollBar","memo","_ref","_viewport$scrollLeft","_viewport$scrollWidth","_viewport$clientWidth","_trackRef$current$cli","_trackRef$current","viewport","rest","_objectWithoutProperties","_excluded","_useState","scrollLeft","scrollWidth","clientWidth","_useState2","_slicedToArray","_useState2$","setScrollState","trackRef","thumbRef","trackWidth","current","_buildScrollBar","buildScrollBar","progress","requiresScrolling","thumbOffset","thumbWidth","updateScrollState","_viewport$scrollLeft2","_viewport$scrollWidth2","_viewport$clientWidth2","addEventListener","passive","window","removeEventListener","element","onMutate","mutations","_viewport$scrollLeft3","_viewport$scrollWidth3","_viewport$clientWidth3","hasMeaningfullyMutated","some","mutation","addedNodes","length","removedNodes","createElement","Track","_extends","ref","bg","role","TrackHitArea","Thumb","position","height","borderRadius","width","style","transform","concat","backfaceVisibility","HitArea","tabIndex","displayName","withConfig","componentId","_ref2","percentageVisible","percentageOffset","normalizedThumbWidth","normalizedThumbOffset"],"sources":["../../../../src/elements/Shelf/ShelfScrollBar.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { useMutationObserver } from \"../../utils/useMutationObserver\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { useClickScroll } from \"./useClickScroll\"\nimport { useDragScroll } from \"./useDragScroll\"\n\ninterface ShelfScrollBarProps extends BoxProps {\n  viewport?: HTMLDivElement | null\n}\n\n/**\n * A synthetic scrollbar\n */\nexport const ShelfScrollBar: React.FC<\n  React.PropsWithChildren<ShelfScrollBarProps>\n> = React.memo(({ viewport, ...rest }) => {\n  const [\n    { scrollLeft, scrollWidth, clientWidth },\n    setScrollState,\n  ] = useState<ScrollState>({\n    scrollLeft: viewport?.scrollLeft ?? 0,\n    scrollWidth: viewport?.scrollWidth ?? 1,\n    clientWidth: viewport?.clientWidth ?? 1,\n  })\n\n  const trackRef = useRef<HTMLDivElement | null>(null)\n  const thumbRef = useRef<HTMLButtonElement | null>(null)\n\n  const trackWidth = trackRef.current?.clientWidth ?? 1\n\n  const {\n    progress,\n    requiresScrolling,\n    thumbOffset,\n    thumbWidth,\n  } = buildScrollBar({ trackWidth, scrollLeft, scrollWidth, clientWidth })\n\n  // Update scrollState on scroll and resize\n  useEffect(() => {\n    if (!viewport) return\n\n    const updateScrollState = () => {\n      setScrollState({\n        scrollLeft: viewport?.scrollLeft ?? 0,\n        scrollWidth: viewport?.scrollWidth ?? 1,\n        clientWidth: viewport?.clientWidth ?? 1,\n      })\n    }\n\n    updateScrollState()\n\n    viewport.addEventListener(\"scroll\", updateScrollState, { passive: true })\n    window.addEventListener(\"resize\", updateScrollState)\n\n    return () => {\n      viewport.removeEventListener(\"scroll\", updateScrollState)\n      window.removeEventListener(\"resize\", updateScrollState)\n    }\n  }, [viewport])\n\n  useMutationObserver({\n    element: viewport,\n    onMutate: (mutations) => {\n      // Check to see if any of the mutations has either added or removed nodes\n      const hasMeaningfullyMutated = mutations.some((mutation) => {\n        return (\n          mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0\n        )\n      })\n\n      // Only update scroll state if something was added or removed\n      if (!hasMeaningfullyMutated) return\n\n      setScrollState({\n        scrollLeft: viewport?.scrollLeft ?? 0,\n        scrollWidth: viewport?.scrollWidth ?? 1,\n        clientWidth: viewport?.clientWidth ?? 1,\n      })\n    },\n  })\n\n  useDragScroll({\n    viewport,\n    thumbRef,\n    clientWidth,\n    scrollWidth,\n    scrollLeft,\n    trackWidth,\n  })\n\n  useClickScroll({\n    viewport,\n    thumbRef,\n    trackRef,\n    scrollWidth,\n    trackWidth,\n  })\n\n  return (\n    <Track\n      ref={trackRef as any}\n      bg=\"mono15\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={progress}\n      {...rest}\n    >\n      {/* Pads out hit area. Click events will propagate to underlying trackRef */}\n      <TrackHitArea />\n\n      {requiresScrolling && (\n        <Thumb\n          position=\"relative\"\n          bg=\"mono60\"\n          height=\"100%\"\n          borderRadius={3}\n          width={thumbWidth}\n          style={{\n            transform: `translateX(${thumbOffset}px)`,\n            backfaceVisibility: \"hidden\",\n          }}\n        >\n          <HitArea ref={thumbRef as any} tabIndex={-1} aria-label=\"Thumb\" />\n        </Thumb>\n      )}\n    </Track>\n  )\n})\n\nShelfScrollBar.displayName = \"ShelfScrollBar\"\n\nconst Track = styled(Box)`\n  position: relative;\n  height: 3px;\n  width: 100%;\n`\n\nconst TrackHitArea = styled(Box)`\n  position: absolute;\n  top: -10px;\n  bottom: -10px;\n  right: 0;\n  left: 0;\n  width: 100%;\n`\n\nconst Thumb = styled(Box)``\n\nconst HitArea = styled(Clickable)`\n  position: absolute;\n  top: -10px;\n  bottom: -10px;\n  width: 100%;\n  left: 0;\n  opacity: 0;\n  transition: opacity 250ms;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &:after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 100%;\n    background-color: ${themeGet(\"colors.mono100\")};\n    /*\n     * Positioning this using top/bottom and translate each have cross-browser\n     * issues in Safari. Using a hard-coded height/negative margin works on all browsers.\n     */\n    top: 50%;\n    margin-top: -1.5px;\n    height: 3px;\n  }\n`\n\ninterface ScrollState {\n  /** Left most scroll edge */\n  scrollLeft: number\n  /** Width of the underlying rail */\n  scrollWidth: number\n  /** Width of the viewport */\n  clientWidth: number\n}\n\nexport const buildScrollBar = ({\n  trackWidth,\n  scrollLeft,\n  scrollWidth,\n  clientWidth,\n}: ScrollState & {\n  /** Width of the scrollbar track */\n  trackWidth: number\n}) => {\n  const progress = (scrollLeft / (scrollWidth - clientWidth || 1)) * 100\n\n  // Sets up a scrollbar for viewport\n  const percentageVisible = clientWidth / scrollWidth\n  const thumbWidth = percentageVisible * clientWidth\n  const percentageOffset = scrollLeft / (scrollWidth - clientWidth || 1)\n\n  // Transform it down to whatever our actual track width is as\n  // it's always smaller than the target viewport.\n  const normalizedThumbWidth = (thumbWidth * trackWidth) / clientWidth\n  const normalizedThumbOffset =\n    percentageOffset * (trackWidth - normalizedThumbWidth)\n\n  const requiresScrolling = percentageVisible < 1\n\n  return {\n    requiresScrolling,\n    progress,\n    percentageVisible,\n    percentageOffset,\n    thumbWidth: normalizedThumbWidth,\n    thumbOffset: normalizedThumbOffset,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ShelfScrollBar.js","names":["themeGet","React","useEffect","useRef","useState","styled","useMutationObserver","Box","Clickable","useClickScroll","useDragScroll","ShelfScrollBar","memo","_ref","_viewport$scrollLeft","_viewport$scrollWidth","_viewport$clientWidth","_trackRef$current$cli","_trackRef$current","viewport","rest","_objectWithoutProperties","_excluded","_useState","scrollLeft","scrollWidth","clientWidth","_useState2","_slicedToArray","_useState2$","setScrollState","trackRef","thumbRef","trackWidth","current","_buildScrollBar","buildScrollBar","progress","requiresScrolling","thumbOffset","thumbWidth","updateScrollState","_viewport$scrollLeft2","_viewport$scrollWidth2","_viewport$clientWidth2","addEventListener","passive","window","removeEventListener","element","onMutate","mutations","_viewport$scrollLeft3","_viewport$scrollWidth3","_viewport$clientWidth3","hasMeaningfullyMutated","some","mutation","addedNodes","length","removedNodes","createElement","Track","_extends","ref","bg","role","TrackHitArea","Thumb","position","height","borderRadius","width","style","transform","concat","backfaceVisibility","HitArea","tabIndex","displayName","withConfig","componentId","_ref2","percentageVisible","percentageOffset","normalizedThumbWidth","normalizedThumbOffset"],"sources":["../../../../src/elements/Shelf/ShelfScrollBar.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { useMutationObserver } from \"../../utils/useMutationObserver\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { useClickScroll } from \"./useClickScroll\"\nimport { useDragScroll } from \"./useDragScroll\"\n\ninterface ShelfScrollBarProps extends BoxProps {\n  viewport?: HTMLDivElement | null\n}\n\n/**\n * A synthetic scrollbar\n */\nexport const ShelfScrollBar: React.FC<\n  React.PropsWithChildren<ShelfScrollBarProps>\n> = React.memo(({ viewport, ...rest }) => {\n  const [\n    { scrollLeft, scrollWidth, clientWidth },\n    setScrollState,\n  ] = useState<ScrollState>({\n    scrollLeft: viewport?.scrollLeft ?? 0,\n    scrollWidth: viewport?.scrollWidth ?? 1,\n    clientWidth: viewport?.clientWidth ?? 1,\n  })\n\n  const trackRef = useRef<HTMLDivElement | null>(null)\n  const thumbRef = useRef<HTMLButtonElement | null>(null)\n\n  const trackWidth = trackRef.current?.clientWidth ?? 1\n\n  const {\n    progress,\n    requiresScrolling,\n    thumbOffset,\n    thumbWidth,\n  } = buildScrollBar({ trackWidth, scrollLeft, scrollWidth, clientWidth })\n\n  // Update scrollState on scroll and resize\n  useEffect(() => {\n    if (!viewport) return\n\n    const updateScrollState = () => {\n      setScrollState({\n        scrollLeft: viewport?.scrollLeft ?? 0,\n        scrollWidth: viewport?.scrollWidth ?? 1,\n        clientWidth: viewport?.clientWidth ?? 1,\n      })\n    }\n\n    updateScrollState()\n\n    viewport.addEventListener(\"scroll\", updateScrollState, { passive: true })\n    window.addEventListener(\"resize\", updateScrollState)\n\n    return () => {\n      viewport.removeEventListener(\"scroll\", updateScrollState)\n      window.removeEventListener(\"resize\", updateScrollState)\n    }\n  }, [viewport])\n\n  useMutationObserver({\n    element: viewport,\n    onMutate: (mutations) => {\n      // Check to see if any of the mutations has either added or removed nodes\n      const hasMeaningfullyMutated = mutations.some((mutation) => {\n        return (\n          mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0\n        )\n      })\n\n      // Only update scroll state if something was added or removed\n      if (!hasMeaningfullyMutated) return\n\n      setScrollState({\n        scrollLeft: viewport?.scrollLeft ?? 0,\n        scrollWidth: viewport?.scrollWidth ?? 1,\n        clientWidth: viewport?.clientWidth ?? 1,\n      })\n    },\n  })\n\n  useDragScroll({\n    viewport,\n    thumbRef,\n    clientWidth,\n    scrollWidth,\n    scrollLeft,\n    trackWidth,\n  })\n\n  useClickScroll({\n    viewport,\n    thumbRef,\n    trackRef,\n    scrollWidth,\n    trackWidth,\n  })\n\n  return (\n    <Track\n      ref={trackRef as any}\n      bg=\"mono15\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={progress}\n      {...rest}\n    >\n      {/* Pads out hit area. Click events will propagate to underlying trackRef */}\n      <TrackHitArea />\n\n      {requiresScrolling && (\n        <Thumb\n          position=\"relative\"\n          bg=\"mono60\"\n          height=\"100%\"\n          borderRadius={3}\n          width={thumbWidth}\n          style={{\n            transform: `translateX(${thumbOffset}px)`,\n            backfaceVisibility: \"hidden\",\n          }}\n        >\n          <HitArea ref={thumbRef as any} tabIndex={-1} aria-label=\"Thumb\" />\n        </Thumb>\n      )}\n    </Track>\n  )\n})\n\nShelfScrollBar.displayName = \"ShelfScrollBar\"\n\nconst Track = styled(Box)`\n  position: relative;\n  height: 3px;\n  width: 100%;\n`\n\nconst TrackHitArea = styled(Box)`\n  position: absolute;\n  top: -10px;\n  bottom: -10px;\n  right: 0;\n  left: 0;\n  width: 100%;\n`\n\nconst Thumb = styled(Box)``\n\nconst HitArea = styled(Clickable)`\n  position: absolute;\n  top: -10px;\n  bottom: -10px;\n  width: 100%;\n  left: 0;\n  opacity: 0;\n  transition: opacity 250ms;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &:after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 100%;\n    background-color: ${themeGet(\"colors.mono100\")};\n    /*\n     * Positioning this using top/bottom and translate each have cross-browser\n     * issues in Safari. Using a hard-coded height/negative margin works on all browsers.\n     */\n    top: 50%;\n    margin-top: -1.5px;\n    height: 3px;\n  }\n`\n\ninterface ScrollState {\n  /** Left most scroll edge */\n  scrollLeft: number\n  /** Width of the underlying rail */\n  scrollWidth: number\n  /** Width of the viewport */\n  clientWidth: number\n}\n\nexport const buildScrollBar = ({\n  trackWidth,\n  scrollLeft,\n  scrollWidth,\n  clientWidth,\n}: ScrollState & {\n  /** Width of the scrollbar track */\n  trackWidth: number\n}) => {\n  const progress = (scrollLeft / (scrollWidth - clientWidth || 1)) * 100\n\n  // Sets up a scrollbar for viewport\n  const percentageVisible = clientWidth / scrollWidth\n  const thumbWidth = percentageVisible * clientWidth\n  const percentageOffset = scrollLeft / (scrollWidth - clientWidth || 1)\n\n  // Transform it down to whatever our actual track width is as\n  // it's always smaller than the target viewport.\n  const normalizedThumbWidth = (thumbWidth * trackWidth) / clientWidth\n  const normalizedThumbOffset =\n    percentageOffset * (trackWidth - normalizedThumbWidth)\n\n  const requiresScrolling = percentageVisible < 1\n\n  return {\n    requiresScrolling,\n    progress,\n    percentageVisible,\n    percentageOffset,\n    thumbWidth: normalizedThumbWidth,\n    thumbOffset: normalizedThumbOffset,\n  }\n}\n"],"mappings":"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"}

package/dist/esm/elements/ShowMore/ShowMore.js

@@ -9,8 +9,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 React, { Children, isValidElement, useState } from "react";
-import { Clickable, ClickableProps, splitClickableProps } from "../Clickable";
-import { Text, TextProps } from "../Text";
+import { Clickable, splitClickableProps } from "../Clickable";
+import { Text } from "../Text";
 export var INITIAL_ITEMS_TO_SHOW = 6;
 export var ShowMore = function ShowMore(_ref) {
   var _ref$initial = _ref.initial,

package/dist/esm/elements/ShowMore/ShowMore.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShowMore.js","names":["React","Children","isValidElement","useState","Clickable","ClickableProps","splitClickableProps","Text","TextProps","INITIAL_ITEMS_TO_SHOW","ShowMore","_ref","_ref$initial","initial","children","_ref$expanded","expanded","_ref$hideText","hideText","_ref$showMoreText","showMoreText","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isExpanded","setExpanded","nodes","toArray","filter","hasMore","length","_splitClickableProps","_splitClickableProps2","clickableProps","variant","createElement","Fragment","slice","_extends","onClick","visibility"],"sources":["../../../../src/elements/ShowMore/ShowMore.tsx"],"sourcesContent":["import React, { Children, isValidElement, useState } from \"react\"\nimport { Clickable, ClickableProps, splitClickableProps } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\n\nexport interface ShowMoreProps\n  extends ClickableProps,\n    Pick<TextProps, \"variant\"> {\n  children: React.ReactNode\n  initial?: number\n  expanded?: boolean\n  hideText?: string\n  showMoreText?: string\n}\n\nexport const INITIAL_ITEMS_TO_SHOW = 6\n\nexport const ShowMore: React.FC<React.PropsWithChildren<ShowMoreProps>> = ({\n  initial = INITIAL_ITEMS_TO_SHOW,\n  children,\n  expanded = false,\n  hideText = \"Hide\",\n  showMoreText = \"Show more\",\n  ...rest\n}) => {\n  const [isExpanded, setExpanded] = useState(expanded)\n  const nodes = Children.toArray(children).filter(isValidElement)\n  const hasMore = nodes.length > initial\n\n  const [clickableProps, { variant }] = splitClickableProps(rest)\n\n  return (\n    <>\n      {isExpanded ? nodes : nodes.slice(0, initial)}\n\n      {hasMore && (\n        <Clickable\n          onClick={() => setExpanded((visibility) => !visibility)}\n          {...clickableProps}\n        >\n          <Text variant={variant}>{isExpanded ? hideText : showMoreText}</Text>\n        </Clickable>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,OAAO;AACjE,SAASC,SAAS,EAAEC,cAAc,EAAEC,mBAAmB;AACvD,SAASC,IAAI,EAAEC,SAAS;AAYxB,OAAO,IAAMC,qBAAqB,GAAG,CAAC;AAEtC,OAAO,IAAMC,QAA0D,GAAG,SAA7DA,QAA0DA,CAAAC,IAAA,EAOjE;EAAA,IAAAC,YAAA,GAAAD,IAAA,CANJE,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAGH,qBAAqB,GAAAG,YAAA;IAC/BE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,aAAA,GAAAJ,IAAA,CACRK,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,aAAA,GAAAN,IAAA,CAChBO,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,MAAM,GAAAA,aAAA;IAAAE,iBAAA,GAAAR,IAAA,CACjBS,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,WAAW,GAAAA,iBAAA;IACvBE,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,IAAAC,SAAA,GAAkCrB,QAAQ,CAACa,QAAQ,CAAC;IAAAS,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAA7CG,UAAU,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAC9B,IAAMI,KAAK,GAAG5B,QAAQ,CAAC6B,OAAO,CAAChB,QAAQ,CAAC,CAACiB,MAAM,CAAC7B,cAAc,CAAC;EAC/D,IAAM8B,OAAO,GAAGH,KAAK,CAACI,MAAM,GAAGpB,OAAO;EAEtC,IAAAqB,oBAAA,GAAsC5B,mBAAmB,CAACe,IAAI,CAAC;IAAAc,qBAAA,GAAAT,cAAA,CAAAQ,oBAAA;IAAxDE,cAAc,GAAAD,qBAAA;IAAIE,OAAO,GAAAF,qBAAA,IAAPE,OAAO;EAEhC,oBACErC,KAAA,CAAAsC,aAAA,CAAAtC,KAAA,CAAAuC,QAAA,QACGZ,UAAU,GAAGE,KAAK,GAAGA,KAAK,CAACW,KAAK,CAAC,CAAC,EAAE3B,OAAO,CAAC,EAE5CmB,OAAO,iBACNhC,KAAA,CAAAsC,aAAA,CAAClC,SAAS,EAAAqC,QAAA;IACRC,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQd,WAAW,CAAC,UAACe,UAAU;QAAA,OAAK,CAACA,UAAU;MAAA,EAAC;IAAA;EAAC,GACpDP,cAAc,gBAElBpC,KAAA,CAAAsC,aAAA,CAAC/B,IAAI;IAAC8B,OAAO,EAAEA;EAAQ,GAAEV,UAAU,GAAGT,QAAQ,GAAGE,YAAY,CAAQ,CAExE,CACA;AAEP,CAAC"}
+{"version":3,"file":"ShowMore.js","names":["React","Children","isValidElement","useState","Clickable","splitClickableProps","Text","INITIAL_ITEMS_TO_SHOW","ShowMore","_ref","_ref$initial","initial","children","_ref$expanded","expanded","_ref$hideText","hideText","_ref$showMoreText","showMoreText","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isExpanded","setExpanded","nodes","toArray","filter","hasMore","length","_splitClickableProps","_splitClickableProps2","clickableProps","variant","createElement","Fragment","slice","_extends","onClick","visibility"],"sources":["../../../../src/elements/ShowMore/ShowMore.tsx"],"sourcesContent":["import React, { Children, isValidElement, useState } from \"react\"\nimport { Clickable, ClickableProps, splitClickableProps } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\n\nexport interface ShowMoreProps\n  extends ClickableProps,\n    Pick<TextProps, \"variant\"> {\n  children: React.ReactNode\n  initial?: number\n  expanded?: boolean\n  hideText?: string\n  showMoreText?: string\n}\n\nexport const INITIAL_ITEMS_TO_SHOW = 6\n\nexport const ShowMore: React.FC<React.PropsWithChildren<ShowMoreProps>> = ({\n  initial = INITIAL_ITEMS_TO_SHOW,\n  children,\n  expanded = false,\n  hideText = \"Hide\",\n  showMoreText = \"Show more\",\n  ...rest\n}) => {\n  const [isExpanded, setExpanded] = useState(expanded)\n  const nodes = Children.toArray(children).filter(isValidElement)\n  const hasMore = nodes.length > initial\n\n  const [clickableProps, { variant }] = splitClickableProps(rest)\n\n  return (\n    <>\n      {isExpanded ? nodes : nodes.slice(0, initial)}\n\n      {hasMore && (\n        <Clickable\n          onClick={() => setExpanded((visibility) => !visibility)}\n          {...clickableProps}\n        >\n          <Text variant={variant}>{isExpanded ? hideText : showMoreText}</Text>\n        </Clickable>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,OAAO;AACjE,SAASC,SAAS,EAAkBC,mBAAmB;AACvD,SAASC,IAAI;AAYb,OAAO,IAAMC,qBAAqB,GAAG,CAAC;AAEtC,OAAO,IAAMC,QAA0D,GAAG,SAA7DA,QAA0DA,CAAAC,IAAA,EAOjE;EAAA,IAAAC,YAAA,GAAAD,IAAA,CANJE,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAGH,qBAAqB,GAAAG,YAAA;IAC/BE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,aAAA,GAAAJ,IAAA,CACRK,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,aAAA,GAAAN,IAAA,CAChBO,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,MAAM,GAAAA,aAAA;IAAAE,iBAAA,GAAAR,IAAA,CACjBS,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,WAAW,GAAAA,iBAAA;IACvBE,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,IAAAC,SAAA,GAAkCnB,QAAQ,CAACW,QAAQ,CAAC;IAAAS,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAA7CG,UAAU,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAC9B,IAAMI,KAAK,GAAG1B,QAAQ,CAAC2B,OAAO,CAAChB,QAAQ,CAAC,CAACiB,MAAM,CAAC3B,cAAc,CAAC;EAC/D,IAAM4B,OAAO,GAAGH,KAAK,CAACI,MAAM,GAAGpB,OAAO;EAEtC,IAAAqB,oBAAA,GAAsC3B,mBAAmB,CAACc,IAAI,CAAC;IAAAc,qBAAA,GAAAT,cAAA,CAAAQ,oBAAA;IAAxDE,cAAc,GAAAD,qBAAA;IAAIE,OAAO,GAAAF,qBAAA,IAAPE,OAAO;EAEhC,oBACEnC,KAAA,CAAAoC,aAAA,CAAApC,KAAA,CAAAqC,QAAA,QACGZ,UAAU,GAAGE,KAAK,GAAGA,KAAK,CAACW,KAAK,CAAC,CAAC,EAAE3B,OAAO,CAAC,EAE5CmB,OAAO,iBACN9B,KAAA,CAAAoC,aAAA,CAAChC,SAAS,EAAAmC,QAAA;IACRC,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQd,WAAW,CAAC,UAACe,UAAU;QAAA,OAAK,CAACA,UAAU;MAAA,EAAC;IAAA;EAAC,GACpDP,cAAc,gBAElBlC,KAAA,CAAAoC,aAAA,CAAC9B,IAAI;IAAC6B,OAAO,EAAEA;EAAQ,GAAEV,UAAU,GAAGT,QAAQ,GAAGE,YAAY,CAAQ,CAExE,CACA;AAEP,CAAC"}

package/dist/esm/elements/Skeleton/Skeleton.js

@@ -12,10 +12,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { themeGet } from "@styled-system/theme-get";
 import React, { useMemo } from "react";
 import styled, { keyframes } from "styled-components";
-import { border, BorderProps } from "styled-system";
+import { border } from "styled-system";
 import { splitProps } from "../../utils/splitProps";
-import { Box, BoxProps } from "../Box";
-import { Text, TextProps } from "../Text";
+import { Box } from "../Box";
+import { Text } from "../Text";
 
 /** SkeletonProps */
 

package/dist/esm/elements/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":["themeGet","React","useMemo","styled","keyframes","border","BorderProps","splitProps","Box","BoxProps","Text","TextProps","SkeletonBox","withConfig","displayName","componentId","defaultProps","bg","splitBorderProps","SkeletonTextOverlay","toBlockCharacters","text","replace","toString","SkeletonText","_ref","children","rest","_objectWithoutProperties","_excluded","_splitBorderProps","_splitBorderProps2","_slicedToArray","borderProps","textProps","blocks","createElement","_extends","color","as","display","position","FADE_ANIMATION","SkeletonFade","Skeleton","_ref2","_excluded2","top","right","bottom","left"],"sources":["../../../../src/elements/Skeleton/Skeleton.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useMemo } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { border, BorderProps } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text, TextProps } from \"../Text\"\n\n/** SkeletonProps */\nexport type SkeletonBoxProps = BoxProps\n\n/** A mono10 Box */\nexport const SkeletonBox = styled(Box)``\nSkeletonBox.defaultProps = { bg: \"mono10\" }\nSkeletonBox.displayName = \"SkeletonBox\"\n\nconst splitBorderProps = splitProps<BorderProps>(border)\n\n/** SkeletonTextProps */\nexport type SkeletonTextProps = TextProps\n\nconst SkeletonTextOverlay = styled(SkeletonBox)`\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 0.25em);\n  transform: translateY(-50%);\n`\n\nconst toBlockCharacters = (text: React.ReactNode): string => {\n  if (typeof text === 'string') {\n    return text.replace(/\\S/g, '█')\n  }\n  if (typeof text === 'number') {\n    return text.toString().replace(/\\S/g, '█')\n  }\n  return '████████'\n}\n\n/**\n * Allows you to create boxes the exact dimensions of a given piece of text\n */\nexport const SkeletonText: React.FC<\n  React.PropsWithChildren<SkeletonTextProps>\n> = ({ children, ...rest }) => {\n  const [borderProps, textProps] = splitBorderProps(rest)\n  const blocks = useMemo(() => toBlockCharacters(children), [children])\n\n  return (\n    <Text color=\"transparent\" {...textProps}>\n      <Box as=\"span\" display=\"inline-flex\" position=\"relative\" aria-hidden=\"true\">\n        {blocks}\n\n        <SkeletonTextOverlay {...borderProps} />\n      </Box>\n    </Text>\n  )\n}\n\nconst FADE_ANIMATION = keyframes`\n  0% { opacity: 0.5; }\n  50% { opacity: 0; }\n  100% { opacity: 0.5; }\n`\n\nconst SkeletonFade = styled(Box)`\n  background-color: ${themeGet(\"colors.mono0\")};\n  animation: ${FADE_ANIMATION} 2s ease-in-out infinite;\n`\n\nexport type SkeletonProps = BoxProps\n\n/**\n * Animated wrapper for Skeletons\n */\nexport const Skeleton: React.FC<React.PropsWithChildren<SkeletonProps>> = ({\n  children,\n  ...rest\n}) => {\n  return (\n    <Box position=\"relative\" {...rest}>\n      {children}\n\n      <SkeletonFade position=\"absolute\" top={0} right={0} bottom={0} left={0} />\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Skeleton.js","names":["themeGet","React","useMemo","styled","keyframes","border","splitProps","Box","Text","SkeletonBox","withConfig","displayName","componentId","defaultProps","bg","splitBorderProps","SkeletonTextOverlay","toBlockCharacters","text","replace","toString","SkeletonText","_ref","children","rest","_objectWithoutProperties","_excluded","_splitBorderProps","_splitBorderProps2","_slicedToArray","borderProps","textProps","blocks","createElement","_extends","color","as","display","position","FADE_ANIMATION","SkeletonFade","Skeleton","_ref2","_excluded2","top","right","bottom","left"],"sources":["../../../../src/elements/Skeleton/Skeleton.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useMemo } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { border, BorderProps } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text, TextProps } from \"../Text\"\n\n/** SkeletonProps */\nexport type SkeletonBoxProps = BoxProps\n\n/** A mono10 Box */\nexport const SkeletonBox = styled(Box)``\nSkeletonBox.defaultProps = { bg: \"mono10\" }\nSkeletonBox.displayName = \"SkeletonBox\"\n\nconst splitBorderProps = splitProps<BorderProps>(border)\n\n/** SkeletonTextProps */\nexport type SkeletonTextProps = TextProps\n\nconst SkeletonTextOverlay = styled(SkeletonBox)`\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 0.25em);\n  transform: translateY(-50%);\n`\n\nconst toBlockCharacters = (text: React.ReactNode): string => {\n  if (typeof text === 'string') {\n    return text.replace(/\\S/g, '█')\n  }\n  if (typeof text === 'number') {\n    return text.toString().replace(/\\S/g, '█')\n  }\n  return '████████'\n}\n\n/**\n * Allows you to create boxes the exact dimensions of a given piece of text\n */\nexport const SkeletonText: React.FC<\n  React.PropsWithChildren<SkeletonTextProps>\n> = ({ children, ...rest }) => {\n  const [borderProps, textProps] = splitBorderProps(rest)\n  const blocks = useMemo(() => toBlockCharacters(children), [children])\n\n  return (\n    <Text color=\"transparent\" {...textProps}>\n      <Box as=\"span\" display=\"inline-flex\" position=\"relative\" aria-hidden=\"true\">\n        {blocks}\n\n        <SkeletonTextOverlay {...borderProps} />\n      </Box>\n    </Text>\n  )\n}\n\nconst FADE_ANIMATION = keyframes`\n  0% { opacity: 0.5; }\n  50% { opacity: 0; }\n  100% { opacity: 0.5; }\n`\n\nconst SkeletonFade = styled(Box)`\n  background-color: ${themeGet(\"colors.mono0\")};\n  animation: ${FADE_ANIMATION} 2s ease-in-out infinite;\n`\n\nexport type SkeletonProps = BoxProps\n\n/**\n * Animated wrapper for Skeletons\n */\nexport const Skeleton: React.FC<React.PropsWithChildren<SkeletonProps>> = ({\n  children,\n  ...rest\n}) => {\n  return (\n    <Box position=\"relative\" {...rest}>\n      {children}\n\n      <SkeletonFade position=\"absolute\" top={0} right={0} bottom={0} left={0} />\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/elements/Skip/Skip.js

@@ -4,7 +4,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 React from "react";
 import styled from "styled-components";
-import { Clickable, ClickableProps } from "../Clickable";
+import { Clickable } from "../Clickable";
 import { Text } from "../Text";
 import { visuallyHiddenMixin } from "../VisuallyHidden";
 var Container = styled(Clickable).withConfig({

package/dist/esm/elements/Skip/Skip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skip.js","names":["React","styled","Clickable","ClickableProps","Text","visuallyHiddenMixin","Container","withConfig","displayName","componentId","Skip","forwardRef","_ref","forwardedRef","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","ref","display","bg","p","variant"],"sources":["../../../../src/elements/Skip/Skip.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { visuallyHiddenMixin } from \"../VisuallyHidden\"\n\nconst Container = styled(Clickable)`\n  display: block;\n  text-decoration: underline;\n  outline: 0;\n\n  &:not(:focus):not(:active) {\n    ${visuallyHiddenMixin}\n  }\n`\n\n/**\n * Either a button or an anchor tag\n */\nexport type SkipProps =\n  | ClickableProps\n  | (ClickableProps & {\n      as: \"a\"\n      href: string\n    })\n\n/**\n * Skip link or button.\n * Utilize `as=\"a\"` for an anchor tag to link to landmark IDs.\n * Used, for example, to skip to content in the nav.\n * Is visually hidden until focused, which reveals it.\n */\nexport const Skip = React.forwardRef(\n  ({ children, ...rest }: SkipProps, forwardedRef) => {\n    return (\n      <Container\n        ref={forwardedRef as any}\n        display=\"block\"\n        bg=\"mono10\"\n        {...rest}\n      >\n        <Text p={1} variant=\"sm\">\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nSkip.displayName = \"Skip\"\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,EAAEC,cAAc;AAClC,SAASC,IAAI;AACb,SAASC,mBAAmB;AAE5B,IAAMC,SAAS,GAAGL,MAAM,CAACC,SAAS,CAAC,CAAAK,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2FAM7BJ,mBAAmB,CAExB;;AAED;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMK,IAAI,gBAAGV,KAAK,CAACW,UAAU,CAClC,UAAAC,IAAA,EAAmCC,YAAY,EAAK;EAAA,IAAjDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAKC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAClB,oBACEjB,KAAA,CAAAkB,aAAA,CAACZ,SAAS,EAAAa,QAAA;IACRC,GAAG,EAAEP,YAAoB;IACzBQ,OAAO,EAAC,OAAO;IACfC,EAAE,EAAC;EAAQ,GACPP,IAAI,gBAERf,KAAA,CAAAkB,aAAA,CAACd,IAAI;IAACmB,CAAC,EAAE,CAAE;IAACC,OAAO,EAAC;EAAI,GACrBV,QAAQ,CACJ,CACG;AAEhB,CAAC,CACF;AAEDJ,IAAI,CAACF,WAAW,GAAG,MAAM"}
+{"version":3,"file":"Skip.js","names":["React","styled","Clickable","Text","visuallyHiddenMixin","Container","withConfig","displayName","componentId","Skip","forwardRef","_ref","forwardedRef","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","ref","display","bg","p","variant"],"sources":["../../../../src/elements/Skip/Skip.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { visuallyHiddenMixin } from \"../VisuallyHidden\"\n\nconst Container = styled(Clickable)`\n  display: block;\n  text-decoration: underline;\n  outline: 0;\n\n  &:not(:focus):not(:active) {\n    ${visuallyHiddenMixin}\n  }\n`\n\n/**\n * Either a button or an anchor tag\n */\nexport type SkipProps =\n  | ClickableProps\n  | (ClickableProps & {\n      as: \"a\"\n      href: string\n    })\n\n/**\n * Skip link or button.\n * Utilize `as=\"a\"` for an anchor tag to link to landmark IDs.\n * Used, for example, to skip to content in the nav.\n * Is visually hidden until focused, which reveals it.\n */\nexport const Skip = React.forwardRef(\n  ({ children, ...rest }: SkipProps, forwardedRef) => {\n    return (\n      <Container\n        ref={forwardedRef as any}\n        display=\"block\"\n        bg=\"mono10\"\n        {...rest}\n      >\n        <Text p={1} variant=\"sm\">\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nSkip.displayName = \"Skip\"\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS;AAClB,SAASC,IAAI;AACb,SAASC,mBAAmB;AAE5B,IAAMC,SAAS,GAAGJ,MAAM,CAACC,SAAS,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2FAM7BJ,mBAAmB,CAExB;;AAED;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMK,IAAI,gBAAGT,KAAK,CAACU,UAAU,CAClC,UAAAC,IAAA,EAAmCC,YAAY,EAAK;EAAA,IAAjDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAKC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAClB,oBACEhB,KAAA,CAAAiB,aAAA,CAACZ,SAAS,EAAAa,QAAA;IACRC,GAAG,EAAEP,YAAoB;IACzBQ,OAAO,EAAC,OAAO;IACfC,EAAE,EAAC;EAAQ,GACPP,IAAI,gBAERd,KAAA,CAAAiB,aAAA,CAACd,IAAI;IAACmB,CAAC,EAAE,CAAE;IAACC,OAAO,EAAC;EAAI,GACrBV,QAAQ,CACJ,CACG;AAEhB,CAAC,CACF;AAEDJ,IAAI,CAACF,WAAW,GAAG,MAAM"}

package/dist/esm/elements/Spacer/Spacer.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 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 React from "react";
-import { Box, BoxProps } from "../../elements/Box";
+import { Box } from "../../elements/Box";
 /**
  * Used to inject space where it's needed.
  */

package/dist/esm/elements/Spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","names":["React","Box","BoxProps","Spacer","_ref","x","y","restProps","_objectWithoutProperties","_excluded","createElement","_extends","ml","mt","displayName"],"sources":["../../../../src/elements/Spacer/Spacer.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box, BoxProps } from \"../../elements/Box\"\n\nexport type SpacerProps = {\n  x?: BoxProps[\"ml\"]\n  y?: BoxProps[\"mt\"]\n} & React.HTMLAttributes<HTMLDivElement>\n\n/**\n * Used to inject space where it's needed.\n */\nexport const Spacer = ({ x, y, ...restProps }: SpacerProps) => {\n  return <Box {...restProps} ml={x} mt={y} />\n}\n\nSpacer.displayName = \"Spacer\"\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,QAAQ;AAOtB;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAA4C;EAAA,IAAtCC,CAAC,GAAAD,IAAA,CAADC,CAAC;IAAEC,CAAC,GAAAF,IAAA,CAADE,CAAC;IAAKC,SAAS,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACzC,oBAAOT,KAAA,CAAAU,aAAA,CAACT,GAAG,EAAAU,QAAA,KAAKJ,SAAS;IAAEK,EAAE,EAAEP,CAAE;IAACQ,EAAE,EAAEP;EAAE,GAAG;AAC7C,CAAC;AAFYH,MAAM,CAAAW,WAAA;AAInBX,MAAM,CAACW,WAAW,GAAG,QAAQ"}
+{"version":3,"file":"Spacer.js","names":["React","Box","Spacer","_ref","x","y","restProps","_objectWithoutProperties","_excluded","createElement","_extends","ml","mt","displayName"],"sources":["../../../../src/elements/Spacer/Spacer.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box, BoxProps } from \"../../elements/Box\"\n\nexport type SpacerProps = {\n  x?: BoxProps[\"ml\"]\n  y?: BoxProps[\"mt\"]\n} & React.HTMLAttributes<HTMLDivElement>\n\n/**\n * Used to inject space where it's needed.\n */\nexport const Spacer = ({ x, y, ...restProps }: SpacerProps) => {\n  return <Box {...restProps} ml={x} mt={y} />\n}\n\nSpacer.displayName = \"Spacer\"\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG;AAOZ;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAA4C;EAAA,IAAtCC,CAAC,GAAAD,IAAA,CAADC,CAAC;IAAEC,CAAC,GAAAF,IAAA,CAADE,CAAC;IAAKC,SAAS,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACzC,oBAAOR,KAAA,CAAAS,aAAA,CAACR,GAAG,EAAAS,QAAA,KAAKJ,SAAS;IAAEK,EAAE,EAAEP,CAAE;IAACQ,EAAE,EAAEP;EAAE,GAAG;AAC7C,CAAC;AAFYH,MAAM,CAAAW,WAAA;AAInBX,MAAM,CAACW,WAAW,GAAG,QAAQ"}

package/dist/esm/elements/Spinner/Spinner.js

@@ -10,8 +10,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 React, { useEffect, useState } from "react";
 import styled, { keyframes } from "styled-components";
-import { ResponsiveValue, variant } from "styled-system";
-import { Box, BoxProps } from "../Box";
+import { variant } from "styled-system";
+import { Box } from "../Box";
 var SPINNER_VARIANTS = {
   small: {
     width: 12.5,

package/dist/esm/elements/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","names":["React","useEffect","useState","styled","keyframes","ResponsiveValue","variant","Box","BoxProps","SPINNER_VARIANTS","small","width","height","top","left","medium","large","Spinner","_ref","_ref$position","position","_ref$delay","delay","_ref$size","size","_ref$color","color","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","show","setShow","timeout","setTimeout","clearTimeout","createElement","Bar","_extends","bg","displayName","spin","withConfig","componentId","variants","prop"],"sources":["../../../../src/elements/Spinner/Spinner.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst SPINNER_VARIANTS = {\n  small: {\n    width: 12.5,\n    height: 3,\n    // TODO: Remove `top` and `left`\n    top: \"calc(50% - 1.5px)\",\n    left: \"calc(50% - 6.25px)\",\n  },\n\n  medium: {\n    width: 20,\n    height: 4.8,\n    // TODO: Remove `top` and `left`\n    top: \"calc(50% - 2.4px)\",\n    left: \"calc(50% - 10px)\",\n  },\n\n  large: {\n    width: 25,\n    height: 6,\n    // TODO: Remove `top` and `left`\n    top: \"calc(50% - 3px)\",\n    left: \"calc(50% - 12.5px)\",\n  },\n} as const\n\nexport type SpinnerSize = keyof typeof SPINNER_VARIANTS\n\nexport interface SpinnerProps\n  extends Omit<BoxProps, \"size\" | \"width\" | \"height\"> {\n  /** Delay before spinner appears */\n  delay?: number\n  /** Size of the spinner */\n  size?: ResponsiveValue<SpinnerSize>\n  /** Color of the spinner */\n  color?: ResponsiveValue<string>\n}\n\n/** Generic Spinner component */\nexport const Spinner: React.FC<React.PropsWithChildren<SpinnerProps>> = ({\n  position = \"absolute\",\n  delay = 0,\n  size = \"large\",\n  color = \"mono100\",\n  ...rest\n}) => {\n  const [show, setShow] = useState(delay === 0)\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setShow(true)\n    }, delay)\n\n    return () => {\n      clearTimeout(timeout)\n    }\n  }, [delay])\n\n  if (!show) return null\n\n  return (\n    <Bar\n      bg={color ?? \"currentColor\"}\n      size={size}\n      position={position}\n      {...rest}\n    />\n  )\n}\n\nconst spin = keyframes`\n  100% {\n    transform: rotate(360deg)\n  }\n`\n\nconst Bar = styled(Box)`\n  animation: ${spin} 1s infinite linear;\n  ${variant({ variants: SPINNER_VARIANTS, prop: \"size\" })}\n`\n\nSpinner.displayName = \"Spinner\"\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,OAAOC,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AACrD,SAASC,eAAe,EAAEC,OAAO,QAAQ,eAAe;AACxD,SAASC,GAAG,EAAEC,QAAQ;AAEtB,IAAMC,gBAAgB,GAAG;EACvBC,KAAK,EAAE;IACLC,KAAK,EAAE,IAAI;IACXC,MAAM,EAAE,CAAC;IACT;IACAC,GAAG,EAAE,mBAAmB;IACxBC,IAAI,EAAE;EACR,CAAC;EAEDC,MAAM,EAAE;IACNJ,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,GAAG;IACX;IACAC,GAAG,EAAE,mBAAmB;IACxBC,IAAI,EAAE;EACR,CAAC;EAEDE,KAAK,EAAE;IACLL,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC;IACT;IACAC,GAAG,EAAE,iBAAiB;IACtBC,IAAI,EAAE;EACR;AACF,CAAU;AAcV;AACA,OAAO,IAAMG,OAAwD,GAAG,SAA3DA,OAAwDA,CAAAC,IAAA,EAM/D;EAAA,IAAAC,aAAA,GAAAD,IAAA,CALJE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,UAAU,GAAAA,aAAA;IAAAE,UAAA,GAAAH,IAAA,CACrBI,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,CAAC,GAAAA,UAAA;IAAAE,SAAA,GAAAL,IAAA,CACTM,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,OAAO,GAAAA,SAAA;IAAAE,UAAA,GAAAP,IAAA,CACdQ,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,SAAS,GAAAA,UAAA;IACdE,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAEP,IAAAC,SAAA,GAAwB5B,QAAQ,CAACoB,KAAK,KAAK,CAAC,CAAC;IAAAS,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAtCG,IAAI,GAAAF,UAAA;IAAEG,OAAO,GAAAH,UAAA;EAEpB9B,SAAS,CAAC,YAAM;IACd,IAAMkC,OAAO,GAAGC,UAAU,CAAC,YAAM;MAC/BF,OAAO,CAAC,IAAI,CAAC;IACf,CAAC,EAAEZ,KAAK,CAAC;IAET,OAAO,YAAM;MACXe,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,CAACb,KAAK,CAAC,CAAC;EAEX,IAAI,CAACW,IAAI,EAAE,OAAO,IAAI;EAEtB,oBACEjC,KAAA,CAAAsC,aAAA,CAACC,GAAG,EAAAC,QAAA;IACFC,EAAE,EAAEf,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,cAAe;IAC5BF,IAAI,EAAEA,IAAK;IACXJ,QAAQ,EAAEA;EAAS,GACfO,IAAI,EACR;AAEN,CAAC;AA7BYV,OAAwD,CAAAyB,WAAA;AA+BrE,IAAMC,IAAI,GAAGvC,SAAS,oCAIrB;AAED,IAAMmC,GAAG,GAAGpC,MAAM,CAACI,GAAG,CAAC,CAAAqC,UAAA;EAAAF,WAAA;EAAAG,WAAA;AAAA,+CACRF,IAAI,EACfrC,OAAO,CAAC;EAAEwC,QAAQ,EAAErC,gBAAgB;EAAEsC,IAAI,EAAE;AAAO,CAAC,CAAC,CACxD;AAED9B,OAAO,CAACyB,WAAW,GAAG,SAAS"}
+{"version":3,"file":"Spinner.js","names":["React","useEffect","useState","styled","keyframes","variant","Box","SPINNER_VARIANTS","small","width","height","top","left","medium","large","Spinner","_ref","_ref$position","position","_ref$delay","delay","_ref$size","size","_ref$color","color","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","show","setShow","timeout","setTimeout","clearTimeout","createElement","Bar","_extends","bg","displayName","spin","withConfig","componentId","variants","prop"],"sources":["../../../../src/elements/Spinner/Spinner.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst SPINNER_VARIANTS = {\n  small: {\n    width: 12.5,\n    height: 3,\n    // TODO: Remove `top` and `left`\n    top: \"calc(50% - 1.5px)\",\n    left: \"calc(50% - 6.25px)\",\n  },\n\n  medium: {\n    width: 20,\n    height: 4.8,\n    // TODO: Remove `top` and `left`\n    top: \"calc(50% - 2.4px)\",\n    left: \"calc(50% - 10px)\",\n  },\n\n  large: {\n    width: 25,\n    height: 6,\n    // TODO: Remove `top` and `left`\n    top: \"calc(50% - 3px)\",\n    left: \"calc(50% - 12.5px)\",\n  },\n} as const\n\nexport type SpinnerSize = keyof typeof SPINNER_VARIANTS\n\nexport interface SpinnerProps\n  extends Omit<BoxProps, \"size\" | \"width\" | \"height\"> {\n  /** Delay before spinner appears */\n  delay?: number\n  /** Size of the spinner */\n  size?: ResponsiveValue<SpinnerSize>\n  /** Color of the spinner */\n  color?: ResponsiveValue<string>\n}\n\n/** Generic Spinner component */\nexport const Spinner: React.FC<React.PropsWithChildren<SpinnerProps>> = ({\n  position = \"absolute\",\n  delay = 0,\n  size = \"large\",\n  color = \"mono100\",\n  ...rest\n}) => {\n  const [show, setShow] = useState(delay === 0)\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setShow(true)\n    }, delay)\n\n    return () => {\n      clearTimeout(timeout)\n    }\n  }, [delay])\n\n  if (!show) return null\n\n  return (\n    <Bar\n      bg={color ?? \"currentColor\"}\n      size={size}\n      position={position}\n      {...rest}\n    />\n  )\n}\n\nconst spin = keyframes`\n  100% {\n    transform: rotate(360deg)\n  }\n`\n\nconst Bar = styled(Box)`\n  animation: ${spin} 1s infinite linear;\n  ${variant({ variants: SPINNER_VARIANTS, prop: \"size\" })}\n`\n\nSpinner.displayName = \"Spinner\"\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,OAAOC,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AACrD,SAA0BC,OAAO,QAAQ,eAAe;AACxD,SAASC,GAAG;AAEZ,IAAMC,gBAAgB,GAAG;EACvBC,KAAK,EAAE;IACLC,KAAK,EAAE,IAAI;IACXC,MAAM,EAAE,CAAC;IACT;IACAC,GAAG,EAAE,mBAAmB;IACxBC,IAAI,EAAE;EACR,CAAC;EAEDC,MAAM,EAAE;IACNJ,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,GAAG;IACX;IACAC,GAAG,EAAE,mBAAmB;IACxBC,IAAI,EAAE;EACR,CAAC;EAEDE,KAAK,EAAE;IACLL,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC;IACT;IACAC,GAAG,EAAE,iBAAiB;IACtBC,IAAI,EAAE;EACR;AACF,CAAU;AAcV;AACA,OAAO,IAAMG,OAAwD,GAAG,SAA3DA,OAAwDA,CAAAC,IAAA,EAM/D;EAAA,IAAAC,aAAA,GAAAD,IAAA,CALJE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,UAAU,GAAAA,aAAA;IAAAE,UAAA,GAAAH,IAAA,CACrBI,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,CAAC,GAAAA,UAAA;IAAAE,SAAA,GAAAL,IAAA,CACTM,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,OAAO,GAAAA,SAAA;IAAAE,UAAA,GAAAP,IAAA,CACdQ,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,SAAS,GAAAA,UAAA;IACdE,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAEP,IAAAC,SAAA,GAAwB1B,QAAQ,CAACkB,KAAK,KAAK,CAAC,CAAC;IAAAS,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAtCG,IAAI,GAAAF,UAAA;IAAEG,OAAO,GAAAH,UAAA;EAEpB5B,SAAS,CAAC,YAAM;IACd,IAAMgC,OAAO,GAAGC,UAAU,CAAC,YAAM;MAC/BF,OAAO,CAAC,IAAI,CAAC;IACf,CAAC,EAAEZ,KAAK,CAAC;IAET,OAAO,YAAM;MACXe,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,CAACb,KAAK,CAAC,CAAC;EAEX,IAAI,CAACW,IAAI,EAAE,OAAO,IAAI;EAEtB,oBACE/B,KAAA,CAAAoC,aAAA,CAACC,GAAG,EAAAC,QAAA;IACFC,EAAE,EAAEf,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,cAAe;IAC5BF,IAAI,EAAEA,IAAK;IACXJ,QAAQ,EAAEA;EAAS,GACfO,IAAI,EACR;AAEN,CAAC;AA7BYV,OAAwD,CAAAyB,WAAA;AA+BrE,IAAMC,IAAI,GAAGrC,SAAS,oCAIrB;AAED,IAAMiC,GAAG,GAAGlC,MAAM,CAACG,GAAG,CAAC,CAAAoC,UAAA;EAAAF,WAAA;EAAAG,WAAA;AAAA,+CACRF,IAAI,EACfpC,OAAO,CAAC;EAAEuC,QAAQ,EAAErC,gBAAgB;EAAEsC,IAAI,EAAE;AAAO,CAAC,CAAC,CACxD;AAED9B,OAAO,CAACyB,WAAW,GAAG,SAAS"}

package/dist/esm/elements/Stack/Stack.js

@@ -1,6 +1,5 @@
 import styled from "styled-components";
-import { Box, BoxProps } from "../Box";
-import { ResponsiveValue } from "styled-system";
+import { Box } from "../Box";
 /**
  * `Stack` is `Box` with` display: flex` and `flex-direction: column`.
  * `gap` is required

package/dist/esm/elements/Stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","names":["styled","Box","BoxProps","ResponsiveValue","Stack","withConfig","displayName","componentId","defaultProps","display","flexDirection"],"sources":["../../../../src/elements/Stack/Stack.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport type StackProps = BoxProps & {\n  gap: ResponsiveValue<string | number>\n}\n\n/**\n * `Stack` is `Box` with` display: flex` and `flex-direction: column`.\n * `gap` is required\n */\nexport const Stack = styled(Box)<StackProps>``\n\nStack.defaultProps = {\n  display: \"flex\",\n  flexDirection: \"column\",\n}\n\nStack.displayName = \"Stack\"\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,eAAe,QAAQ,eAAe;AAM/C;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAGJ,MAAM,CAACC,GAAG,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAc;AAE9CH,KAAK,CAACI,YAAY,GAAG;EACnBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE;AACjB,CAAC;AAEDN,KAAK,CAACE,WAAW,GAAG,OAAO"}
+{"version":3,"file":"Stack.js","names":["styled","Box","Stack","withConfig","displayName","componentId","defaultProps","display","flexDirection"],"sources":["../../../../src/elements/Stack/Stack.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport type StackProps = BoxProps & {\n  gap: ResponsiveValue<string | number>\n}\n\n/**\n * `Stack` is `Box` with` display: flex` and `flex-direction: column`.\n * `gap` is required\n */\nexport const Stack = styled(Box)<StackProps>``\n\nStack.defaultProps = {\n  display: \"flex\",\n  flexDirection: \"column\",\n}\n\nStack.displayName = \"Stack\"\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG;AAOZ;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAGF,MAAM,CAACC,GAAG,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAc;AAE9CH,KAAK,CAACI,YAAY,GAAG;EACnBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE;AACjB,CAAC;AAEDN,KAAK,CAACE,WAAW,GAAG,OAAO"}

package/dist/esm/elements/StackableBorderBox/StackableBorderBox.js

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import styled from "styled-components";
-import { BorderBox, BorderBoxProps } from "../BorderBox";
+import { BorderBox } from "../BorderBox";
 /**
  * A stackable border box is a BorderBox that shares borders with its siblings.
  */

package/dist/esm/elements/StackableBorderBox/StackableBorderBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackableBorderBox.js","names":["styled","BorderBox","BorderBoxProps","StackableBorderBox","withConfig","displayName","componentId","defaultProps","_objectSpread"],"sources":["../../../../src/elements/StackableBorderBox/StackableBorderBox.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { BorderBox, BorderBoxProps } from \"../BorderBox\"\n\nexport type StackableBorderBoxProps = BorderBoxProps\n\n/**\n * A stackable border box is a BorderBox that shares borders with its siblings.\n */\nexport const StackableBorderBox = styled(BorderBox)<BorderBoxProps>`\n  &:not(:first-child) {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  &:not(:last-child) {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n`\n\nStackableBorderBox.displayName = \"StackableBorderBox\"\n\nStackableBorderBox.defaultProps = {\n  ...BorderBox.defaultProps,\n}\n"],"mappings":";;;;;;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,EAAEC,cAAc;AAIlC;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAGH,MAAM,CAACC,SAAS,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6KAUlD;AAEDH,kBAAkB,CAACE,WAAW,GAAG,oBAAoB;AAErDF,kBAAkB,CAACI,YAAY,GAAAC,aAAA,KAC1BP,SAAS,CAACM,YAAY,CAC1B"}
+{"version":3,"file":"StackableBorderBox.js","names":["styled","BorderBox","StackableBorderBox","withConfig","displayName","componentId","defaultProps","_objectSpread"],"sources":["../../../../src/elements/StackableBorderBox/StackableBorderBox.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { BorderBox, BorderBoxProps } from \"../BorderBox\"\n\nexport type StackableBorderBoxProps = BorderBoxProps\n\n/**\n * A stackable border box is a BorderBox that shares borders with its siblings.\n */\nexport const StackableBorderBox = styled(BorderBox)<BorderBoxProps>`\n  &:not(:first-child) {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  &:not(:last-child) {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n`\n\nStackableBorderBox.displayName = \"StackableBorderBox\"\n\nStackableBorderBox.defaultProps = {\n  ...BorderBox.defaultProps,\n}\n"],"mappings":";;;;;;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS;AAIlB;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACC,SAAS,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6KAUlD;AAEDH,kBAAkB,CAACE,WAAW,GAAG,oBAAoB;AAErDF,kBAAkB,CAACI,YAAY,GAAAC,aAAA,KAC1BN,SAAS,CAACK,YAAY,CAC1B"}

package/dist/esm/elements/Stepper/Stepper.js

@@ -9,7 +9,7 @@ import { BaseTab, BaseTabs } from "../BaseTabs";
 import { Box } from "../Box";
 import { Clickable } from "../Clickable";
 import { Flex } from "../Flex";
-import { TabProps, TabsProps, useTabs } from "../Tabs";
+import { useTabs } from "../Tabs";
 /** Stepper */
 export var Stepper = function Stepper(_ref) {
   var currentStepIndex = _ref.currentStepIndex,

package/dist/esm/elements/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","names":["React","CheckmarkIcon","ChevronRightIcon","BaseTab","BaseTabs","Box","Clickable","Flex","TabProps","TabsProps","useTabs","Stepper","_ref","currentStepIndex","disableNavigation","_ref$initialTabIndex","initialTabIndex","children","_ref$mb","mb","onChange","rest","_objectWithoutProperties","_excluded","_useTabs","tabs","activeTabIndex","handleClick","ref","createElement","Fragment","_extends","fill","map","tab","i","key","as","disabled","onClick","active","variant","justifyContent","alignItems","flex","color","undefined","child","props","name","width","height","ml","Step","_ref2"],"sources":["../../../../src/elements/Stepper/Stepper.tsx"],"sourcesContent":["import React from \"react\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<React.PropsWithChildren<StepperProps>> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  mb = 2,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} fill mb={mb} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant=\"sm\"\n              justifyContent=\"flex-start\"\n            >\n              <Flex alignItems=\"center\" justifyContent=\"space-between\" flex={1}>\n                <Flex alignItems=\"center\">\n                  <Box color={i > currentStepIndex ? \"mono30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i && (\n                    <CheckmarkIcon\n                      width={16}\n                      height={16}\n                      color=\"green100\"\n                      ml={1}\n                    />\n                  )}\n                </Flex>\n\n                <ChevronRightIcon fill=\"mono60\" height={10} ml={1} />\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {tabs[activeTabIndex].child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<React.PropsWithChildren<StepProps>> = ({\n  children,\n}) => <>{children}</>\n"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","names":["React","CheckmarkIcon","ChevronRightIcon","BaseTab","BaseTabs","Box","Clickable","Flex","useTabs","Stepper","_ref","currentStepIndex","disableNavigation","_ref$initialTabIndex","initialTabIndex","children","_ref$mb","mb","onChange","rest","_objectWithoutProperties","_excluded","_useTabs","tabs","activeTabIndex","handleClick","ref","createElement","Fragment","_extends","fill","map","tab","i","key","as","disabled","onClick","active","variant","justifyContent","alignItems","flex","color","undefined","child","props","name","width","height","ml","Step","_ref2"],"sources":["../../../../src/elements/Stepper/Stepper.tsx"],"sourcesContent":["import React from \"react\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<React.PropsWithChildren<StepperProps>> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  mb = 2,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} fill mb={mb} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant=\"sm\"\n              justifyContent=\"flex-start\"\n            >\n              <Flex alignItems=\"center\" justifyContent=\"space-between\" flex={1}>\n                <Flex alignItems=\"center\">\n                  <Box color={i > currentStepIndex ? \"mono30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i && (\n                    <CheckmarkIcon\n                      width={16}\n                      height={16}\n                      color=\"green100\"\n                      ml={1}\n                    />\n                  )}\n                </Flex>\n\n                <ChevronRightIcon fill=\"mono60\" height={10} ml={1} />\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {tabs[activeTabIndex].child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<React.PropsWithChildren<StepProps>> = ({\n  children,\n}) => <>{children}</>\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,SAASC,OAAO,EAAEC,QAAQ;AAC1B,SAASC,GAAG;AACZ,SAASC,SAAS;AAClB,SAASC,IAAI;AACb,SAA8BC,OAAO;AASrC;AACA,OAAO,IAAMC,OAAwD,GAAG,SAA3DA,OAAwDA,CAAAC,IAAA,EAQ/D;EAAA,IAPJC,gBAAgB,GAAAD,IAAA,CAAhBC,gBAAgB;IAChBC,iBAAiB,GAAAF,IAAA,CAAjBE,iBAAiB;IAAAC,oBAAA,GAAAH,IAAA,CACjBI,eAAe;IAAfA,eAAe,GAAAD,oBAAA,cAAG,CAAC,GAAAA,oBAAA;IACnBE,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IAAAC,OAAA,GAAAN,IAAA,CACRO,EAAE;IAAFA,EAAE,GAAAD,OAAA,cAAG,CAAC,GAAAA,OAAA;IACNE,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IACLC,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAEP,IAAAC,QAAA,GAAmDd,OAAO,CAAC;MACzDO,QAAQ,EAARA,QAAQ;MACRD,eAAe,EAAfA,eAAe;MACfI,QAAQ,EAARA;IACF,CAAC,CAAC;IAJMK,IAAI,GAAAD,QAAA,CAAJC,IAAI;IAAEC,cAAc,GAAAF,QAAA,CAAdE,cAAc;IAAEC,WAAW,GAAAH,QAAA,CAAXG,WAAW;IAAEC,GAAG,GAAAJ,QAAA,CAAHI,GAAG;EAM9C,oBACE1B,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,qBACE5B,KAAA,CAAA2B,aAAA,CAACvB,QAAQ,EAAAyB,QAAA;IAACH,GAAG,EAAEA,GAAI;IAACI,IAAI;IAACb,EAAE,EAAEA;EAAG,GAAKE,IAAI,GACtCI,IAAI,CAACQ,GAAG,CAAC,UAACC,GAAG,EAAEC,CAAC,EAAK;IACpB,oBACEjC,KAAA,CAAA2B,aAAA,CAACxB,OAAO;MACN+B,GAAG,EAAED,CAAE;MACPE,EAAE,EAAE7B,SAAU;MACdoB,GAAG,EAAEM,GAAG,CAACN,GAAW;MACpB,iBAAeO,CAAC,KAAKT,cAAe;MACpCY,QAAQ,EAAExB,iBAAiB,IAAIqB,CAAC,GAAGtB,gBAAiB;MACpD0B,OAAO,EAAEZ,WAAW,CAACQ,CAAC,CAAE;MACxBK,MAAM,EAAEL,CAAC,KAAKT,cAAe;MAC7Be,OAAO,EAAC,IAAI;MACZC,cAAc,EAAC;IAAY,gBAE3BxC,KAAA,CAAA2B,aAAA,CAACpB,IAAI;MAACkC,UAAU,EAAC,QAAQ;MAACD,cAAc,EAAC,eAAe;MAACE,IAAI,EAAE;IAAE,gBAC/D1C,KAAA,CAAA2B,aAAA,CAACpB,IAAI;MAACkC,UAAU,EAAC;IAAQ,gBACvBzC,KAAA,CAAA2B,aAAA,CAACtB,GAAG;MAACsC,KAAK,EAAEV,CAAC,GAAGtB,gBAAgB,GAAG,QAAQ,GAAGiC;IAAU,GACrDZ,GAAG,CAACa,KAAK,CAACC,KAAK,CAACC,IAAI,CACjB,EAELpC,gBAAgB,GAAGsB,CAAC,iBACnBjC,KAAA,CAAA2B,aAAA,CAAC1B,aAAa;MACZ+C,KAAK,EAAE,EAAG;MACVC,MAAM,EAAE,EAAG;MACXN,KAAK,EAAC,UAAU;MAChBO,EAAE,EAAE;IAAE,EAET,CACI,eAEPlD,KAAA,CAAA2B,aAAA,CAACzB,gBAAgB;MAAC4B,IAAI,EAAC,QAAQ;MAACmB,MAAM,EAAE,EAAG;MAACC,EAAE,EAAE;IAAE,EAAG,CAChD,CACC;EAEd,CAAC,CAAC,CACO,EAEV3B,IAAI,CAACC,cAAc,CAAC,CAACqB,KAAK,CAC1B;AAEP,CAAC;;AAED;;AAGA;AACA;AACA;AACA;AACA,OAAO,IAAMM,IAAkD,GAAG,SAArDA,IAAkDA,CAAAC,KAAA;EAAA,IAC7DrC,QAAQ,GAAAqC,KAAA,CAARrC,QAAQ;EAAA,oBACJf,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,QAAGb,QAAQ,CAAI;AAAA"}

package/dist/esm/elements/Sup/Sup.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Text, TextProps } from "../Text";
+import { Text } from "../Text";
 export var Sup = styled(Text).withConfig({
   displayName: "Sup",
   componentId: "sc-1g83qfs-0"

package/dist/esm/elements/Sup/Sup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sup.js","names":["styled","Text","TextProps","Sup","withConfig","displayName","componentId"],"sources":["../../../../src/elements/Sup/Sup.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Text, TextProps } from \"../Text\"\n\nexport type SupProps = TextProps\n\nexport const Sup = styled(Text)`\n  display: inline;\n  vertical-align: super;\n  font-size: 75% !important;\n  line-height: 0 !important; // Avoids shifting the line-height\n  font-weight: inherit !important;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,EAAEC,SAAS;AAIxB,OAAO,IAAMC,GAAG,GAAGH,MAAM,CAACC,IAAI,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6HAM9B"}
+{"version":3,"file":"Sup.js","names":["styled","Text","Sup","withConfig","displayName","componentId"],"sources":["../../../../src/elements/Sup/Sup.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Text, TextProps } from \"../Text\"\n\nexport type SupProps = TextProps\n\nexport const Sup = styled(Text)`\n  display: inline;\n  vertical-align: super;\n  font-size: 75% !important;\n  line-height: 0 !important; // Avoids shifting the line-height\n  font-weight: inherit !important;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI;AAIb,OAAO,IAAMC,GAAG,GAAGF,MAAM,CAACC,IAAI,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6HAM9B"}

package/dist/esm/elements/Swiper/Swiper.js

@@ -6,7 +6,7 @@ import React, { Children, createRef, isValidElement, useEffect, useMemo, useRef
 import styled from "styled-components";
 import { useCursor } from "use-cursor";
 import { visuallyDisableScrollbar } from "../../helpers/visuallyDisableScrollbar";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { CELL_GAP_PADDING_AMOUNT } from "../Carousel";
 import { activeIndex } from "./activeIndex";
 import { percentage } from "./percentage";

package/dist/esm/elements/Swiper/Swiper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swiper.js","names":["React","Children","createRef","isValidElement","useEffect","useMemo","useRef","styled","useCursor","visuallyDisableScrollbar","Box","BoxProps","CELL_GAP_PADDING_AMOUNT","activeIndex","percentage","Container","withConfig","displayName","componentId","SwiperRail","defaultProps","display","SwiperCell","Swiper","_ref","_ref$initialIndex","initialIndex","children","_ref$snap","snap","_ref$Rail","Rail","_ref$Cell","Cell","onChange","onPageCountChange","rest","_objectWithoutProperties","_excluded","containerRef","cells","toArray","filter","map","child","ref","_useCursor","initialCursor","max","length","index","cursor","setCursor","cell","current","scrollIntoView","inline","block","rail","handleScroll","progress","viewport","clientWidth","total","scrollWidth","left","scrollLeft","page","addEventListener","passive","removeEventListener","createElement","_extends","mx","my","as","_ref2","i","isLast","key","pr","undefined","style","scrollSnapAlign"],"sources":["../../../../src/elements/Swiper/Swiper.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useCursor } from \"use-cursor\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CELL_GAP_PADDING_AMOUNT } from \"../Carousel\"\nimport { activeIndex } from \"./activeIndex\"\nimport { percentage } from \"./percentage\"\n\nconst Container = styled(Box)`\n  display: flex;\n  height: 100%;\n  padding: 0;\n  list-style: none;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n  ${visuallyDisableScrollbar}\n`\n\n/** SwiperRailProps */\nexport type SwiperRailProps = BoxProps\n\n/** A `SwiperRail` slides back and forth within the viewport */\nexport const SwiperRail = styled(Box)<{ as?: React.ElementType }>`\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n`\n\nSwiperRail.defaultProps = {\n  display: \"flex\",\n}\n\n/** SwiperCellProps */\nexport type SwiperCellProps = BoxProps\n\n/** A `SwiperCell` wraps a single child in the carousel */\nexport const SwiperCell = styled(Box)<{ as?: React.ElementType }>`\n  white-space: normal;\n`\n\ntype ScrollSnapAlign = \"none\" | \"start\" | \"end\" | \"center\"\n\n/** SwiperProps */\nexport type SwiperProps = BoxProps & {\n  initialIndex?: number\n  snap?: ScrollSnapAlign\n  children: React.ReactNode\n  Rail?: typeof SwiperRail | React.FC<React.PropsWithChildren<SwiperRailProps>>\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<SwiperCellProps>\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Swiper` is like a `Carousel` but for touch devices. It accepts children\n * or a series of children that are JSX elements. It presents them in a\n * horizontal rail and when the width exceeds the width of the viewport, allows\n * for horitonzal swiping (or scrolling) with the option to snap to elements.\n */\nexport const Swiper: React.FC<React.PropsWithChildren<SwiperProps>> = ({\n  initialIndex = 0,\n  children,\n  snap = \"none\",\n  Rail = SwiperRail,\n  Cell = SwiperCell,\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | 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 { index, cursor, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: cells.length,\n  })\n\n  useEffect(() => {\n    /**\n     * If on initial mount there is an `initialIndex` other than `0`,\n     * scroll it into view. The dependency array is left empty as we explicitly\n     * only want this to run on mount, and ignore any updates to `initialIndex`,\n     * which are handled separately below.\n     */\n    if (initialIndex === 0) return\n    const cell = cells[initialIndex]\n    if (!cell) return\n    cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n  }, [])\n\n  useEffect(() => {\n    /**\n     * Since `cursor` tracks progress, if `cursor` and `initialIndex` are out\n     * of sync then that means the index has been changed programmatically\n     * and we should scroll the cell corresponding with that index into view.\n     */\n    if (initialIndex !== cursor) {\n      const cell = cells[initialIndex]\n      if (!cell) return\n      cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n    }\n  }, [initialIndex])\n\n  useEffect(() => {\n    // Not mounted\n    if (!containerRef.current) return\n\n    // No need to track progress\n    if (!onChange) return\n\n    const { current: rail } = containerRef\n\n    const handleScroll = () => {\n      const progress = percentage({\n        viewport: rail.clientWidth,\n        total: rail.scrollWidth,\n        left: rail.scrollLeft,\n      })\n\n      const page = activeIndex({ progress, length: cells.length })\n\n      setCursor(page)\n    }\n\n    rail.addEventListener(\"scroll\", handleScroll, { passive: true })\n    return () => {\n      rail.removeEventListener(\"scroll\", handleScroll)\n    }\n  }, [cells])\n\n  useEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useEffect(() => {\n    onPageCountChange && onPageCountChange(cells.length)\n  }, [onPageCountChange, cells.length])\n\n  return (\n    <Container ref={containerRef as any} mx={0} my={0} {...rest}>\n      <Rail as=\"ul\">\n        {cells.map(({ child, ref }, i) => {\n          const isLast = i === cells.length - 1\n\n          return (\n            <Cell\n              as=\"li\"\n              key={i}\n              ref={ref}\n              pr={!isLast ? CELL_GAP_PADDING_AMOUNT : undefined}\n              style={{ scrollSnapAlign: snap }}\n            >\n              {child}\n            </Cell>\n          )\n        })}\n      </Rail>\n    </Container>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Swiper.js","names":["React","Children","createRef","isValidElement","useEffect","useMemo","useRef","styled","useCursor","visuallyDisableScrollbar","Box","CELL_GAP_PADDING_AMOUNT","activeIndex","percentage","Container","withConfig","displayName","componentId","SwiperRail","defaultProps","display","SwiperCell","Swiper","_ref","_ref$initialIndex","initialIndex","children","_ref$snap","snap","_ref$Rail","Rail","_ref$Cell","Cell","onChange","onPageCountChange","rest","_objectWithoutProperties","_excluded","containerRef","cells","toArray","filter","map","child","ref","_useCursor","initialCursor","max","length","index","cursor","setCursor","cell","current","scrollIntoView","inline","block","rail","handleScroll","progress","viewport","clientWidth","total","scrollWidth","left","scrollLeft","page","addEventListener","passive","removeEventListener","createElement","_extends","mx","my","as","_ref2","i","isLast","key","pr","undefined","style","scrollSnapAlign"],"sources":["../../../../src/elements/Swiper/Swiper.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useCursor } from \"use-cursor\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CELL_GAP_PADDING_AMOUNT } from \"../Carousel\"\nimport { activeIndex } from \"./activeIndex\"\nimport { percentage } from \"./percentage\"\n\nconst Container = styled(Box)`\n  display: flex;\n  height: 100%;\n  padding: 0;\n  list-style: none;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n  ${visuallyDisableScrollbar}\n`\n\n/** SwiperRailProps */\nexport type SwiperRailProps = BoxProps\n\n/** A `SwiperRail` slides back and forth within the viewport */\nexport const SwiperRail = styled(Box)<{ as?: React.ElementType }>`\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n`\n\nSwiperRail.defaultProps = {\n  display: \"flex\",\n}\n\n/** SwiperCellProps */\nexport type SwiperCellProps = BoxProps\n\n/** A `SwiperCell` wraps a single child in the carousel */\nexport const SwiperCell = styled(Box)<{ as?: React.ElementType }>`\n  white-space: normal;\n`\n\ntype ScrollSnapAlign = \"none\" | \"start\" | \"end\" | \"center\"\n\n/** SwiperProps */\nexport type SwiperProps = BoxProps & {\n  initialIndex?: number\n  snap?: ScrollSnapAlign\n  children: React.ReactNode\n  Rail?: typeof SwiperRail | React.FC<React.PropsWithChildren<SwiperRailProps>>\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<SwiperCellProps>\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Swiper` is like a `Carousel` but for touch devices. It accepts children\n * or a series of children that are JSX elements. It presents them in a\n * horizontal rail and when the width exceeds the width of the viewport, allows\n * for horitonzal swiping (or scrolling) with the option to snap to elements.\n */\nexport const Swiper: React.FC<React.PropsWithChildren<SwiperProps>> = ({\n  initialIndex = 0,\n  children,\n  snap = \"none\",\n  Rail = SwiperRail,\n  Cell = SwiperCell,\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | 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 { index, cursor, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: cells.length,\n  })\n\n  useEffect(() => {\n    /**\n     * If on initial mount there is an `initialIndex` other than `0`,\n     * scroll it into view. The dependency array is left empty as we explicitly\n     * only want this to run on mount, and ignore any updates to `initialIndex`,\n     * which are handled separately below.\n     */\n    if (initialIndex === 0) return\n    const cell = cells[initialIndex]\n    if (!cell) return\n    cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n  }, [])\n\n  useEffect(() => {\n    /**\n     * Since `cursor` tracks progress, if `cursor` and `initialIndex` are out\n     * of sync then that means the index has been changed programmatically\n     * and we should scroll the cell corresponding with that index into view.\n     */\n    if (initialIndex !== cursor) {\n      const cell = cells[initialIndex]\n      if (!cell) return\n      cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n    }\n  }, [initialIndex])\n\n  useEffect(() => {\n    // Not mounted\n    if (!containerRef.current) return\n\n    // No need to track progress\n    if (!onChange) return\n\n    const { current: rail } = containerRef\n\n    const handleScroll = () => {\n      const progress = percentage({\n        viewport: rail.clientWidth,\n        total: rail.scrollWidth,\n        left: rail.scrollLeft,\n      })\n\n      const page = activeIndex({ progress, length: cells.length })\n\n      setCursor(page)\n    }\n\n    rail.addEventListener(\"scroll\", handleScroll, { passive: true })\n    return () => {\n      rail.removeEventListener(\"scroll\", handleScroll)\n    }\n  }, [cells])\n\n  useEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useEffect(() => {\n    onPageCountChange && onPageCountChange(cells.length)\n  }, [onPageCountChange, cells.length])\n\n  return (\n    <Container ref={containerRef as any} mx={0} my={0} {...rest}>\n      <Rail as=\"ul\">\n        {cells.map(({ child, ref }, i) => {\n          const isLast = i === cells.length - 1\n\n          return (\n            <Cell\n              as=\"li\"\n              key={i}\n              ref={ref}\n              pr={!isLast ? CELL_GAP_PADDING_AMOUNT : undefined}\n              style={{ scrollSnapAlign: snap }}\n            >\n              {child}\n            </Cell>\n          )\n        })}\n      </Rail>\n    </Container>\n  )\n}\n"],"mappings":"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"}

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

@@ -18,7 +18,7 @@ import { CarouselBar } from "../CarouselBar";
 import { Clickable } from "../Clickable";
 import { ProgressDots } from "../ProgressDots";
 import { Text } from "../Text";
-import { Swiper, SwiperCell, SwiperProps, SwiperRail } from "./";
+import { Swiper, SwiperCell, SwiperRail } from "./";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 var LOREM = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis dicta sunt nihil perspiciatis aperiam asperiores, earum facere repellendus in veniam, mollitia, ducimus delectus perferendis beatae facilis molestiae et ad quaerat!";
 var Demo = function Demo(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"Swiper.story.js","names":["React","useEffect","useState","Box","CarouselBar","Clickable","ProgressDots","Text","Swiper","SwiperCell","SwiperProps","SwiperRail","STORYBOOK_PROPS_BLOCKLIST","LOREM","Demo","_ref","_ref$widths","widths","Array","from","map","_","_ref$heights","heights","rest","_objectWithoutProperties","_excluded","createElement","mx","my","width","i","key","height","length","bg","border","borderColor","p","textAlign","variant","displayName","component","title","tags","parameters","docs","description","controls","exclude","Simple","render","WithHorizontalMargins","Fragment","SimpleWithLeftEdgeSnapping","snap","ProgressBarExample","_useState","_useState2","_slicedToArray","index","setIndex","progress","onChange","percentComplete","ProgressDotsExample","_useState3","_useState4","amount","activeIndex","CustomRailAndCells","Cell","forwardRef","props","ref","_extends","display","pr","Rail","DynamicItems","_useState5","_useState6","_useState7","_useState8","setWidths","interval","setInterval","prevWidths","concat","_toConsumableArray","clearInterval","chromatic","disable","SwiperWithText","InitialIndexOnMount","initialIndex","NavigateViaProps","_useState9","_useState10","resetIndex","justifyContent","onClick","OverwritingDefaultMargins","mt","ml","ConditionalChildren"],"sources":["../../../../src/elements/Swiper/Swiper.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { CarouselBar } from \"../CarouselBar\"\nimport { Clickable } from \"../Clickable\"\nimport { ProgressDots } from \"../ProgressDots\"\nimport { Text } from \"../Text\"\nimport { Swiper, SwiperCell, SwiperProps, SwiperRail } from \"./\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst LOREM =\n  \"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis dicta sunt nihil perspiciatis aperiam asperiores, earum facere repellendus in veniam, mollitia, ducimus delectus perferendis beatae facilis molestiae et ad quaerat!\"\n\nconst Demo = ({\n  widths = Array.from(Array(25)).map((_) => 300),\n  heights = [400],\n  ...rest\n}: {\n  widths?: Array<number | string>\n  heights?: number[]\n} & Omit<SwiperProps, \"children\">) => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper {...rest}>\n        {widths.map((width, i) => (\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      </Swiper>\n    </Box>\n  )\n}\n\nexport default {\n  component: Swiper,\n  title: \"Components/Swiper\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A swiper/carousel component with horizontal scrolling, navigation, and progress indicators.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Simple = {\n  render: () => <Demo />,\n}\n\nexport const WithHorizontalMargins = {\n  render: () => {\n    return (\n      <>\n        <Text>Should be flush with horizontal edges</Text>\n        <Demo mx={[-2, -4]} />\n      </>\n    )\n  },\n}\n\nexport const SimpleWithLeftEdgeSnapping = {\n  render: () => <Demo snap=\"start\" />,\n}\n\nexport const ProgressBarExample = {\n  render: () => {\n    const widths = Array.from(Array(10)).map((_) => 300)\n    const [index, setIndex] = useState(0)\n    const progress = (index * 100) / (widths.length - 1)\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <CarouselBar percentComplete={progress} />\n      </>\n    )\n  },\n}\n\nexport const ProgressDotsExample = {\n  render: () => {\n    const widths = Array.from(Array(10)).map((_) => 300)\n    const [index, setIndex] = useState(0)\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <ProgressDots\n          variant=\"dash\"\n          amount={widths.length}\n          activeIndex={index}\n        />\n      </>\n    )\n  },\n}\n\nexport const CustomRailAndCells = {\n  render: () => {\n    return (\n      <Demo\n        snap=\"start\"\n        widths={[\"100%\", \"100%\", \"100%\", \"100%\"]}\n        // eslint-disable-next-line react/display-name\n        Cell={React.forwardRef((props, ref) => {\n          return (\n            <SwiperCell\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 <SwiperRail {...props} display=\"block\" />\n        }}\n      />\n    )\n  },\n}\n\nexport const DynamicItems = {\n  render: () => {\n    const [index, setIndex] = useState(0)\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 (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <ProgressDots amount={widths.length} activeIndex={index} />\n      </>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const SwiperWithText = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Swiper>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n        </Swiper>\n      </Box>\n    )\n  },\n}\n\nexport const InitialIndexOnMount = {\n  render: () => <Demo initialIndex={3} />,\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        </Box>\n      </Box>\n    )\n  },\n}\n\nexport const OverwritingDefaultMargins = {\n  render: () => <Demo mt={6} ml={6} />,\n}\n\nexport const ConditionalChildren = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Swiper>\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">1</Text>\n          </Box>\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">2</Text>\n          </Box>\n\n          {false && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">3</Text>\n            </Box>\n          )}\n\n          {true && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">4</Text>\n            </Box>\n          )}\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">5</Text>\n          </Box>\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">6</Text>\n          </Box>\n        </Swiper>\n      </Box>\n    )\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"Swiper.story.js","names":["React","useEffect","useState","Box","CarouselBar","Clickable","ProgressDots","Text","Swiper","SwiperCell","SwiperRail","STORYBOOK_PROPS_BLOCKLIST","LOREM","Demo","_ref","_ref$widths","widths","Array","from","map","_","_ref$heights","heights","rest","_objectWithoutProperties","_excluded","createElement","mx","my","width","i","key","height","length","bg","border","borderColor","p","textAlign","variant","displayName","component","title","tags","parameters","docs","description","controls","exclude","Simple","render","WithHorizontalMargins","Fragment","SimpleWithLeftEdgeSnapping","snap","ProgressBarExample","_useState","_useState2","_slicedToArray","index","setIndex","progress","onChange","percentComplete","ProgressDotsExample","_useState3","_useState4","amount","activeIndex","CustomRailAndCells","Cell","forwardRef","props","ref","_extends","display","pr","Rail","DynamicItems","_useState5","_useState6","_useState7","_useState8","setWidths","interval","setInterval","prevWidths","concat","_toConsumableArray","clearInterval","chromatic","disable","SwiperWithText","InitialIndexOnMount","initialIndex","NavigateViaProps","_useState9","_useState10","resetIndex","justifyContent","onClick","OverwritingDefaultMargins","mt","ml","ConditionalChildren"],"sources":["../../../../src/elements/Swiper/Swiper.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { CarouselBar } from \"../CarouselBar\"\nimport { Clickable } from \"../Clickable\"\nimport { ProgressDots } from \"../ProgressDots\"\nimport { Text } from \"../Text\"\nimport { Swiper, SwiperCell, SwiperProps, SwiperRail } from \"./\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst LOREM =\n  \"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis dicta sunt nihil perspiciatis aperiam asperiores, earum facere repellendus in veniam, mollitia, ducimus delectus perferendis beatae facilis molestiae et ad quaerat!\"\n\nconst Demo = ({\n  widths = Array.from(Array(25)).map((_) => 300),\n  heights = [400],\n  ...rest\n}: {\n  widths?: Array<number | string>\n  heights?: number[]\n} & Omit<SwiperProps, \"children\">) => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper {...rest}>\n        {widths.map((width, i) => (\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      </Swiper>\n    </Box>\n  )\n}\n\nexport default {\n  component: Swiper,\n  title: \"Components/Swiper\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A swiper/carousel component with horizontal scrolling, navigation, and progress indicators.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Simple = {\n  render: () => <Demo />,\n}\n\nexport const WithHorizontalMargins = {\n  render: () => {\n    return (\n      <>\n        <Text>Should be flush with horizontal edges</Text>\n        <Demo mx={[-2, -4]} />\n      </>\n    )\n  },\n}\n\nexport const SimpleWithLeftEdgeSnapping = {\n  render: () => <Demo snap=\"start\" />,\n}\n\nexport const ProgressBarExample = {\n  render: () => {\n    const widths = Array.from(Array(10)).map((_) => 300)\n    const [index, setIndex] = useState(0)\n    const progress = (index * 100) / (widths.length - 1)\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <CarouselBar percentComplete={progress} />\n      </>\n    )\n  },\n}\n\nexport const ProgressDotsExample = {\n  render: () => {\n    const widths = Array.from(Array(10)).map((_) => 300)\n    const [index, setIndex] = useState(0)\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <ProgressDots\n          variant=\"dash\"\n          amount={widths.length}\n          activeIndex={index}\n        />\n      </>\n    )\n  },\n}\n\nexport const CustomRailAndCells = {\n  render: () => {\n    return (\n      <Demo\n        snap=\"start\"\n        widths={[\"100%\", \"100%\", \"100%\", \"100%\"]}\n        // eslint-disable-next-line react/display-name\n        Cell={React.forwardRef((props, ref) => {\n          return (\n            <SwiperCell\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 <SwiperRail {...props} display=\"block\" />\n        }}\n      />\n    )\n  },\n}\n\nexport const DynamicItems = {\n  render: () => {\n    const [index, setIndex] = useState(0)\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 (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <ProgressDots amount={widths.length} activeIndex={index} />\n      </>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const SwiperWithText = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Swiper>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n        </Swiper>\n      </Box>\n    )\n  },\n}\n\nexport const InitialIndexOnMount = {\n  render: () => <Demo initialIndex={3} />,\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        </Box>\n      </Box>\n    )\n  },\n}\n\nexport const OverwritingDefaultMargins = {\n  render: () => <Demo mt={6} ml={6} />,\n}\n\nexport const ConditionalChildren = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Swiper>\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">1</Text>\n          </Box>\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">2</Text>\n          </Box>\n\n          {false && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">3</Text>\n            </Box>\n          )}\n\n          {true && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">4</Text>\n            </Box>\n          )}\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">5</Text>\n          </Box>\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">6</Text>\n          </Box>\n        </Swiper>\n      </Box>\n    )\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Tabs/Tabs.js

@@ -13,7 +13,7 @@ import styled from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import { flattenChildren } from "../../helpers/flattenChildren";
 import { useUpdateEffect } from "../../utils/useUpdateEffect";
-import { BaseTabs, BaseTabsProps } from "../BaseTabs";
+import { BaseTabs } from "../BaseTabs";
 import { BaseTab } from "../BaseTabs";
 import { Clickable } from "../Clickable";
 import { usePrevious } from "../../utils/usePrevious";

package/dist/esm/elements/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","createRef","useCallback","useEffect","useMemo","useRef","useState","styled","themeGet","flattenChildren","useUpdateEffect","BaseTabs","BaseTabsProps","BaseTab","Clickable","usePrevious","useTabs","_ref","children","_ref$initialTabIndex","initialTabIndex","onChange","tabs","map","child","ref","previousInitialTabIndex","_useState","_useState2","_slicedToArray","activeTabIndex","setActiveTabIndex","safeActiveTabIndex","length","Math","min","_ref$current$scrollTo","_ref$current","current","tab","position","offsetLeft","scrollTo","call","left","behavior","handleClick","index","_tabs$index$child$pro","tabIndex","name","props","data","Container","withConfig","displayName","componentId","Tabs","_ref2","_tabs$activeTabIndex","_ref2$initialTabIndex","_ref2$mb","mb","rest","_objectWithoutProperties","_excluded","_useTabs","createElement","Fragment","_extends","i","key","onClick","flex","active","variant","Tab","_ref3"],"sources":["../../../../src/elements/Tabs/Tabs.tsx"],"sourcesContent":["import React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\nimport { usePrevious } from \"../../utils/usePrevious\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const previousInitialTabIndex = usePrevious(initialTabIndex)\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    // Only update if the `initialTabIndex` has changed externally\n    if (initialTabIndex === previousInitialTabIndex) return\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex, tabs])\n\n  // Compute a safe index for rendering (clamped to valid range)\n  // Ensures we never access an out-of-bounds index during removal\n  const safeActiveTabIndex =\n    tabs.length === 0 ? 0 : Math.min(activeTabIndex, tabs.length - 1)\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    if (tabs.length === 0 || safeActiveTabIndex >= tabs.length) return\n    const tab = tabs[safeActiveTabIndex].ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [safeActiveTabIndex, tabs.length])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTabIndex: safeActiveTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\nconst Container = styled(Clickable)`\n  &:focus-visible {\n    outline: none;\n    z-index: 2;\n    box-shadow: inset 0 0 0 1px ${themeGet(\"colors.blue100\")};\n  }\n`\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({\n  children,\n  initialTabIndex = 0,\n  mb = 2,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  if (tabs.length === 0) return null\n\n  return (\n    <>\n      <BaseTabs ref={ref} mb={mb} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Container\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant=\"sm\">\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Container>\n          )\n        })}\n      </BaseTabs>\n\n      {tabs[activeTabIndex]?.child}\n    </>\n  )\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<React.PropsWithChildren<TabProps>> = ({\n  children,\n}) => <>{children}</>\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["React","createRef","useCallback","useEffect","useMemo","useRef","useState","styled","themeGet","flattenChildren","useUpdateEffect","BaseTabs","BaseTab","Clickable","usePrevious","useTabs","_ref","children","_ref$initialTabIndex","initialTabIndex","onChange","tabs","map","child","ref","previousInitialTabIndex","_useState","_useState2","_slicedToArray","activeTabIndex","setActiveTabIndex","safeActiveTabIndex","length","Math","min","_ref$current$scrollTo","_ref$current","current","tab","position","offsetLeft","scrollTo","call","left","behavior","handleClick","index","_tabs$index$child$pro","tabIndex","name","props","data","Container","withConfig","displayName","componentId","Tabs","_ref2","_tabs$activeTabIndex","_ref2$initialTabIndex","_ref2$mb","mb","rest","_objectWithoutProperties","_excluded","_useTabs","createElement","Fragment","_extends","i","key","onClick","flex","active","variant","Tab","_ref3"],"sources":["../../../../src/elements/Tabs/Tabs.tsx"],"sourcesContent":["import React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\nimport { usePrevious } from \"../../utils/usePrevious\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const previousInitialTabIndex = usePrevious(initialTabIndex)\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    // Only update if the `initialTabIndex` has changed externally\n    if (initialTabIndex === previousInitialTabIndex) return\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex, tabs])\n\n  // Compute a safe index for rendering (clamped to valid range)\n  // Ensures we never access an out-of-bounds index during removal\n  const safeActiveTabIndex =\n    tabs.length === 0 ? 0 : Math.min(activeTabIndex, tabs.length - 1)\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    if (tabs.length === 0 || safeActiveTabIndex >= tabs.length) return\n    const tab = tabs[safeActiveTabIndex].ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [safeActiveTabIndex, tabs.length])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTabIndex: safeActiveTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\nconst Container = styled(Clickable)`\n  &:focus-visible {\n    outline: none;\n    z-index: 2;\n    box-shadow: inset 0 0 0 1px ${themeGet(\"colors.blue100\")};\n  }\n`\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({\n  children,\n  initialTabIndex = 0,\n  mb = 2,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  if (tabs.length === 0) return null\n\n  return (\n    <>\n      <BaseTabs ref={ref} mb={mb} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Container\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant=\"sm\">\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Container>\n          )\n        })}\n      </BaseTabs>\n\n      {tabs[activeTabIndex]?.child}\n    </>\n  )\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<React.PropsWithChildren<TabProps>> = ({\n  children,\n}) => <>{children}</>\n"],"mappings":"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"}