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

package/dist/esm/elements/ResponsiveBox/ResponsiveBox.js

@@ -11,7 +11,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 { paddingBottom, scale } from "proportional-scale";
 import React from "react";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 
 /** ResponsiveBoxMaxDimensions */
 

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveBox.js","names":["paddingBottom","scale","React","Box","BoxProps","responsiveScale","args","maxWidth","width","aspectWidth","height","aspectHeight","rest","_objectWithoutProperties","_excluded","scaled","_objectSpread","concat","ResponsiveBox","_ref","children","_excluded2","createElement","_extends","position","overflow","style","aspectRatio","displayName"],"sources":["../../../../src/elements/ResponsiveBox/ResponsiveBox.tsx"],"sourcesContent":["import { paddingBottom, scale } from \"proportional-scale\"\nimport React from \"react\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** ResponsiveBoxMaxDimensions */\nexport type ResponsiveBoxMaxDimensions =\n  | {\n      maxWidth: number\n      maxHeight: number\n    }\n  | { maxWidth: number }\n  | { maxHeight: number }\n  | { maxWidth: \"100%\" }\n\nexport interface ResponsiveBoxAspectDimensions {\n  aspectWidth: number\n  aspectHeight: number\n}\n\nconst responsiveScale = (\n  args: ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions\n) => {\n  if (\"maxWidth\" in args && args.maxWidth === \"100%\") {\n    return {\n      maxWidth: \"100%\",\n      paddingBottom: paddingBottom({\n        width: args.aspectWidth,\n        height: args.aspectHeight,\n      }),\n    }\n  }\n\n  const { aspectWidth: width, aspectHeight: height, ...rest } = args\n  const scaled = scale({ width, height, ...rest })\n\n  return {\n    maxWidth: `${scaled.width}px`,\n    paddingBottom: scaled.paddingBottom,\n  }\n}\n\n/** ResponsiveBoxProps */\nexport type ResponsiveBoxProps = Omit<BoxProps, \"maxWidth\" | \"maxHeight\"> &\n  ResponsiveBoxAspectDimensions &\n  ResponsiveBoxMaxDimensions\n\n/** ResponsiveBox */\nexport const ResponsiveBox: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = ({\n  aspectWidth,\n  aspectHeight,\n  children,\n  ...rest\n}) => {\n  const scaled = responsiveScale({ aspectHeight, aspectWidth, ...rest })\n\n  return (\n    <Box\n      position=\"relative\"\n      width=\"100%\"\n      overflow=\"hidden\"\n      style={{\n        aspectRatio: `${aspectWidth} / ${aspectHeight}`,\n        maxWidth: scaled.maxWidth,\n      }}\n      {...rest}\n    >\n      {children}\n    </Box>\n  )\n}\n\nResponsiveBox.displayName = \"ResponsiveBox\"\n"],"mappings":";;;;;;;;;;;AAAA,SAASA,aAAa,EAAEC,KAAK,QAAQ,oBAAoB;AACzD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;;AAeA,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CACnBC,IAAgE,EAC7D;EACH,IAAI,UAAU,IAAIA,IAAI,IAAIA,IAAI,CAACC,QAAQ,KAAK,MAAM,EAAE;IAClD,OAAO;MACLA,QAAQ,EAAE,MAAM;MAChBP,aAAa,EAAEA,aAAa,CAAC;QAC3BQ,KAAK,EAAEF,IAAI,CAACG,WAAW;QACvBC,MAAM,EAAEJ,IAAI,CAACK;MACf,CAAC;IACH,CAAC;EACH;EAEA,IAAqBH,KAAK,GAAoCF,IAAI,CAA1DG,WAAW;IAAuBC,MAAM,GAAcJ,IAAI,CAAtCK,YAAY;IAAaC,IAAI,GAAAC,wBAAA,CAAKP,IAAI,EAAAQ,SAAA;EAClE,IAAMC,MAAM,GAAGd,KAAK,CAAAe,aAAA;IAAGR,KAAK,EAALA,KAAK;IAAEE,MAAM,EAANA;EAAM,GAAKE,IAAI,EAAG;EAEhD,OAAO;IACLL,QAAQ,KAAAU,MAAA,CAAKF,MAAM,CAACP,KAAK,OAAI;IAC7BR,aAAa,EAAEe,MAAM,CAACf;EACxB,CAAC;AACH,CAAC;;AAED;;AAKA;AACA,OAAO,IAAMkB,aAAoE,GAAG,SAAvEA,aAAoEA,CAAAC,IAAA,EAK3E;EAAA,IAJJV,WAAW,GAAAU,IAAA,CAAXV,WAAW;IACXE,YAAY,GAAAQ,IAAA,CAAZR,YAAY;IACZS,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACLR,IAAI,GAAAC,wBAAA,CAAAM,IAAA,EAAAE,UAAA;EAEP,IAAMN,MAAM,GAAGV,eAAe,CAAAW,aAAA;IAAGL,YAAY,EAAZA,YAAY;IAAEF,WAAW,EAAXA;EAAW,GAAKG,IAAI,EAAG;EAEtE,oBACEV,KAAA,CAAAoB,aAAA,CAACnB,GAAG,EAAAoB,QAAA;IACFC,QAAQ,EAAC,UAAU;IACnBhB,KAAK,EAAC,MAAM;IACZiB,QAAQ,EAAC,QAAQ;IACjBC,KAAK,EAAE;MACLC,WAAW,KAAAV,MAAA,CAAKR,WAAW,SAAAQ,MAAA,CAAMN,YAAY,CAAE;MAC/CJ,QAAQ,EAAEQ,MAAM,CAACR;IACnB;EAAE,GACEK,IAAI,GAEPQ,QAAQ,CACL;AAEV,CAAC;AAtBYF,aAAoE,CAAAU,WAAA;AAwBjFV,aAAa,CAACU,WAAW,GAAG,eAAe"}
+{"version":3,"file":"ResponsiveBox.js","names":["paddingBottom","scale","React","Box","responsiveScale","args","maxWidth","width","aspectWidth","height","aspectHeight","rest","_objectWithoutProperties","_excluded","scaled","_objectSpread","concat","ResponsiveBox","_ref","children","_excluded2","createElement","_extends","position","overflow","style","aspectRatio","displayName"],"sources":["../../../../src/elements/ResponsiveBox/ResponsiveBox.tsx"],"sourcesContent":["import { paddingBottom, scale } from \"proportional-scale\"\nimport React from \"react\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** ResponsiveBoxMaxDimensions */\nexport type ResponsiveBoxMaxDimensions =\n  | {\n      maxWidth: number\n      maxHeight: number\n    }\n  | { maxWidth: number }\n  | { maxHeight: number }\n  | { maxWidth: \"100%\" }\n\nexport interface ResponsiveBoxAspectDimensions {\n  aspectWidth: number\n  aspectHeight: number\n}\n\nconst responsiveScale = (\n  args: ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions\n) => {\n  if (\"maxWidth\" in args && args.maxWidth === \"100%\") {\n    return {\n      maxWidth: \"100%\",\n      paddingBottom: paddingBottom({\n        width: args.aspectWidth,\n        height: args.aspectHeight,\n      }),\n    }\n  }\n\n  const { aspectWidth: width, aspectHeight: height, ...rest } = args\n  const scaled = scale({ width, height, ...rest })\n\n  return {\n    maxWidth: `${scaled.width}px`,\n    paddingBottom: scaled.paddingBottom,\n  }\n}\n\n/** ResponsiveBoxProps */\nexport type ResponsiveBoxProps = Omit<BoxProps, \"maxWidth\" | \"maxHeight\"> &\n  ResponsiveBoxAspectDimensions &\n  ResponsiveBoxMaxDimensions\n\n/** ResponsiveBox */\nexport const ResponsiveBox: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = ({\n  aspectWidth,\n  aspectHeight,\n  children,\n  ...rest\n}) => {\n  const scaled = responsiveScale({ aspectHeight, aspectWidth, ...rest })\n\n  return (\n    <Box\n      position=\"relative\"\n      width=\"100%\"\n      overflow=\"hidden\"\n      style={{\n        aspectRatio: `${aspectWidth} / ${aspectHeight}`,\n        maxWidth: scaled.maxWidth,\n      }}\n      {...rest}\n    >\n      {children}\n    </Box>\n  )\n}\n\nResponsiveBox.displayName = \"ResponsiveBox\"\n"],"mappings":";;;;;;;;;;;AAAA,SAASA,aAAa,EAAEC,KAAK,QAAQ,oBAAoB;AACzD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG;;AAEZ;;AAeA,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CACnBC,IAAgE,EAC7D;EACH,IAAI,UAAU,IAAIA,IAAI,IAAIA,IAAI,CAACC,QAAQ,KAAK,MAAM,EAAE;IAClD,OAAO;MACLA,QAAQ,EAAE,MAAM;MAChBN,aAAa,EAAEA,aAAa,CAAC;QAC3BO,KAAK,EAAEF,IAAI,CAACG,WAAW;QACvBC,MAAM,EAAEJ,IAAI,CAACK;MACf,CAAC;IACH,CAAC;EACH;EAEA,IAAqBH,KAAK,GAAoCF,IAAI,CAA1DG,WAAW;IAAuBC,MAAM,GAAcJ,IAAI,CAAtCK,YAAY;IAAaC,IAAI,GAAAC,wBAAA,CAAKP,IAAI,EAAAQ,SAAA;EAClE,IAAMC,MAAM,GAAGb,KAAK,CAAAc,aAAA;IAAGR,KAAK,EAALA,KAAK;IAAEE,MAAM,EAANA;EAAM,GAAKE,IAAI,EAAG;EAEhD,OAAO;IACLL,QAAQ,KAAAU,MAAA,CAAKF,MAAM,CAACP,KAAK,OAAI;IAC7BP,aAAa,EAAEc,MAAM,CAACd;EACxB,CAAC;AACH,CAAC;;AAED;;AAKA;AACA,OAAO,IAAMiB,aAAoE,GAAG,SAAvEA,aAAoEA,CAAAC,IAAA,EAK3E;EAAA,IAJJV,WAAW,GAAAU,IAAA,CAAXV,WAAW;IACXE,YAAY,GAAAQ,IAAA,CAAZR,YAAY;IACZS,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACLR,IAAI,GAAAC,wBAAA,CAAAM,IAAA,EAAAE,UAAA;EAEP,IAAMN,MAAM,GAAGV,eAAe,CAAAW,aAAA;IAAGL,YAAY,EAAZA,YAAY;IAAEF,WAAW,EAAXA;EAAW,GAAKG,IAAI,EAAG;EAEtE,oBACET,KAAA,CAAAmB,aAAA,CAAClB,GAAG,EAAAmB,QAAA;IACFC,QAAQ,EAAC,UAAU;IACnBhB,KAAK,EAAC,MAAM;IACZiB,QAAQ,EAAC,QAAQ;IACjBC,KAAK,EAAE;MACLC,WAAW,KAAAV,MAAA,CAAKR,WAAW,SAAAQ,MAAA,CAAMN,YAAY,CAAE;MAC/CJ,QAAQ,EAAEQ,MAAM,CAACR;IACnB;EAAE,GACEK,IAAI,GAEPQ,QAAQ,CACL;AAEV,CAAC;AAtBYF,aAAoE,CAAAU,WAAA;AAwBjFV,aAAa,CAACU,WAAW,GAAG,eAAe"}

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

@@ -10,7 +10,7 @@ import styled from "styled-components";
 import { Box } from "../Box";
 import { Text } from "../Text";
 import { Image } from "../Image";
-import { ResponsiveBox, ResponsiveBoxAspectDimensions, ResponsiveBoxMaxDimensions, ResponsiveBoxProps } from "./ResponsiveBox";
+import { ResponsiveBox } from "./ResponsiveBox";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 var Measure = function Measure(props) {
   var _useState = useState({

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveBox.story.js","names":["React","useEffect","useRef","useState","styled","Box","Text","Image","ResponsiveBox","ResponsiveBoxAspectDimensions","ResponsiveBoxMaxDimensions","ResponsiveBoxProps","STORYBOOK_PROPS_BLOCKLIST","Measure","props","_useState","width","height","_useState2","_slicedToArray","dimensions","setDimensions","ref","check","current","offsetWidth","offsetHeight","requestAnimationFrame","window","addEventListener","removeEventListener","createElement","p","variant","color","aspectWidth","aspectHeight","Fragment","maxHeight","maxWidth","join","displayName","EXAMPLE_ASPECTS","EXAMPLE_MAXIMUMS","component","title","tags","parameters","docs","description","controls","exclude","Basic","render","map","aspect","i","maximum","j","_extends","key","bg","my","story","MaxWidth100","Masonry","withConfig","componentId","ColumnsWithResponsiveImages","Array","fill","_","orientation","mb","lazyLoad","src","concat","srcSet"],"sources":["../../../../src/elements/ResponsiveBox/ResponsiveBox.story.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Image } from \"../Image\"\nimport {\n  ResponsiveBox,\n  ResponsiveBoxAspectDimensions,\n  ResponsiveBoxMaxDimensions,\n  ResponsiveBoxProps,\n} from \"./ResponsiveBox\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst Measure: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = (\n  props\n) => {\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n  const ref = useRef<null | HTMLDivElement>(null)\n\n  const check = () => {\n    if (!ref.current) return\n    setDimensions({\n      width: ref.current!.offsetWidth,\n      height: ref.current!.offsetHeight,\n    })\n  }\n\n  useEffect(() => {\n    requestAnimationFrame(check)\n    window.addEventListener(\"resize\", check)\n    return () => {\n      window.removeEventListener(\"resize\", check)\n    }\n  })\n\n  return (\n    <Box width=\"100%\" height=\"100%\" p={1} ref={ref as any}>\n      <Text variant=\"xs\" color=\"mono0\">\n        {props.aspectWidth}:{props.aspectHeight}\n        <br />\n        {(\"maxWidth\" in props || \"maxHeight\" in props) && (\n          <>\n            with max dimensions of{\" \"}\n            {[\n              (props as any).maxHeight || 0,\n              (props as any).maxWidth || \"_\",\n            ].join(\" × \")}\n            <br />\n          </>\n        )}\n        Renders @ {dimensions.width} × {dimensions.height}\n      </Text>\n    </Box>\n  )\n}\n\nconst EXAMPLE_ASPECTS: ResponsiveBoxAspectDimensions[] = [\n  { aspectWidth: 300, aspectHeight: 400 },\n  { aspectWidth: 400, aspectHeight: 300 },\n]\n\nconst EXAMPLE_MAXIMUMS: ResponsiveBoxMaxDimensions[] = [\n  { maxHeight: 200, maxWidth: 200 },\n  { maxHeight: 400, maxWidth: 400 },\n  { maxHeight: 400 },\n  { maxWidth: 400 },\n  { maxHeight: 600, maxWidth: 600 },\n  { maxHeight: 100, maxWidth: 600 },\n  { maxHeight: 1024, maxWidth: 1024 },\n]\n\nexport default {\n  component: ResponsiveBox,\n  title: \"Components/ResponsiveBox\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A responsive container that maintains aspect ratio and optionally constrains maximum dimensions.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Basic = {\n  render: () => (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) =>\n        EXAMPLE_MAXIMUMS.map((maximum, j) => {\n          return (\n            <ResponsiveBox\n              key={[i, j].join(\".\")}\n              {...aspect}\n              {...maximum}\n              bg=\"brand\"\n              my={2}\n            >\n              <Measure {...aspect} {...maximum} />\n            </ResponsiveBox>\n          )\n        })\n      )}\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Basic responsive boxes with various aspect ratios and maximum dimensions.\",\n      },\n    },\n  },\n}\n\nexport const MaxWidth100 = {\n  render: () => (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) => {\n        return (\n          <ResponsiveBox key={i} {...aspect} maxWidth=\"100%\" bg=\"brand\" my={2}>\n            <Measure {...aspect} maxWidth=\"100%\" />\n          </ResponsiveBox>\n        )\n      })}\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Responsive boxes constrained to 100% maximum width.\",\n      },\n    },\n  },\n}\n\nconst Masonry = styled(Box)`\n  column-count: 3;\n\n  * {\n    break-inside: avoid;\n  }\n`\n\nexport const ColumnsWithResponsiveImages = {\n  render: () => (\n    <Masonry>\n      {new Array(12).fill(0).map((_, i) => {\n        const orientation = i % 3 === 0 ? \"portrait\" : \"landscape\"\n        const width = orientation === \"portrait\" ? 200 : 300\n        const height = orientation === \"portrait\" ? 300 : 200\n\n        return (\n          // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome\n          <Box key={i}>\n            <ResponsiveBox\n              aspectWidth={width}\n              aspectHeight={height}\n              maxWidth=\"100%\"\n              bg=\"mono10\"\n              mb={2}\n            >\n              <Image\n                lazyLoad\n                width=\"100%\"\n                height=\"100%\"\n                src={`https://picsum.photos/seed/${i}/${width}/${height}`}\n                srcSet={`https://picsum.photos/seed/${i}/${width}/${height} 1x, https://picsum.photos/seed/${i}/${\n                  width * 2\n                }/${height * 2} 2x`}\n              />\n            </ResponsiveBox>\n          </Box>\n        )\n      })}\n    </Masonry>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Responsive images in a masonry layout with different orientations.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"ResponsiveBox.story.js","names":["React","useEffect","useRef","useState","styled","Box","Text","Image","ResponsiveBox","STORYBOOK_PROPS_BLOCKLIST","Measure","props","_useState","width","height","_useState2","_slicedToArray","dimensions","setDimensions","ref","check","current","offsetWidth","offsetHeight","requestAnimationFrame","window","addEventListener","removeEventListener","createElement","p","variant","color","aspectWidth","aspectHeight","Fragment","maxHeight","maxWidth","join","displayName","EXAMPLE_ASPECTS","EXAMPLE_MAXIMUMS","component","title","tags","parameters","docs","description","controls","exclude","Basic","render","map","aspect","i","maximum","j","_extends","key","bg","my","story","MaxWidth100","Masonry","withConfig","componentId","ColumnsWithResponsiveImages","Array","fill","_","orientation","mb","lazyLoad","src","concat","srcSet"],"sources":["../../../../src/elements/ResponsiveBox/ResponsiveBox.story.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Image } from \"../Image\"\nimport {\n  ResponsiveBox,\n  ResponsiveBoxAspectDimensions,\n  ResponsiveBoxMaxDimensions,\n  ResponsiveBoxProps,\n} from \"./ResponsiveBox\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst Measure: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = (\n  props\n) => {\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n  const ref = useRef<null | HTMLDivElement>(null)\n\n  const check = () => {\n    if (!ref.current) return\n    setDimensions({\n      width: ref.current!.offsetWidth,\n      height: ref.current!.offsetHeight,\n    })\n  }\n\n  useEffect(() => {\n    requestAnimationFrame(check)\n    window.addEventListener(\"resize\", check)\n    return () => {\n      window.removeEventListener(\"resize\", check)\n    }\n  })\n\n  return (\n    <Box width=\"100%\" height=\"100%\" p={1} ref={ref as any}>\n      <Text variant=\"xs\" color=\"mono0\">\n        {props.aspectWidth}:{props.aspectHeight}\n        <br />\n        {(\"maxWidth\" in props || \"maxHeight\" in props) && (\n          <>\n            with max dimensions of{\" \"}\n            {[\n              (props as any).maxHeight || 0,\n              (props as any).maxWidth || \"_\",\n            ].join(\" × \")}\n            <br />\n          </>\n        )}\n        Renders @ {dimensions.width} × {dimensions.height}\n      </Text>\n    </Box>\n  )\n}\n\nconst EXAMPLE_ASPECTS: ResponsiveBoxAspectDimensions[] = [\n  { aspectWidth: 300, aspectHeight: 400 },\n  { aspectWidth: 400, aspectHeight: 300 },\n]\n\nconst EXAMPLE_MAXIMUMS: ResponsiveBoxMaxDimensions[] = [\n  { maxHeight: 200, maxWidth: 200 },\n  { maxHeight: 400, maxWidth: 400 },\n  { maxHeight: 400 },\n  { maxWidth: 400 },\n  { maxHeight: 600, maxWidth: 600 },\n  { maxHeight: 100, maxWidth: 600 },\n  { maxHeight: 1024, maxWidth: 1024 },\n]\n\nexport default {\n  component: ResponsiveBox,\n  title: \"Components/ResponsiveBox\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A responsive container that maintains aspect ratio and optionally constrains maximum dimensions.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Basic = {\n  render: () => (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) =>\n        EXAMPLE_MAXIMUMS.map((maximum, j) => {\n          return (\n            <ResponsiveBox\n              key={[i, j].join(\".\")}\n              {...aspect}\n              {...maximum}\n              bg=\"brand\"\n              my={2}\n            >\n              <Measure {...aspect} {...maximum} />\n            </ResponsiveBox>\n          )\n        })\n      )}\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Basic responsive boxes with various aspect ratios and maximum dimensions.\",\n      },\n    },\n  },\n}\n\nexport const MaxWidth100 = {\n  render: () => (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) => {\n        return (\n          <ResponsiveBox key={i} {...aspect} maxWidth=\"100%\" bg=\"brand\" my={2}>\n            <Measure {...aspect} maxWidth=\"100%\" />\n          </ResponsiveBox>\n        )\n      })}\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Responsive boxes constrained to 100% maximum width.\",\n      },\n    },\n  },\n}\n\nconst Masonry = styled(Box)`\n  column-count: 3;\n\n  * {\n    break-inside: avoid;\n  }\n`\n\nexport const ColumnsWithResponsiveImages = {\n  render: () => (\n    <Masonry>\n      {new Array(12).fill(0).map((_, i) => {\n        const orientation = i % 3 === 0 ? \"portrait\" : \"landscape\"\n        const width = orientation === \"portrait\" ? 200 : 300\n        const height = orientation === \"portrait\" ? 300 : 200\n\n        return (\n          // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome\n          <Box key={i}>\n            <ResponsiveBox\n              aspectWidth={width}\n              aspectHeight={height}\n              maxWidth=\"100%\"\n              bg=\"mono10\"\n              mb={2}\n            >\n              <Image\n                lazyLoad\n                width=\"100%\"\n                height=\"100%\"\n                src={`https://picsum.photos/seed/${i}/${width}/${height}`}\n                srcSet={`https://picsum.photos/seed/${i}/${width}/${height} 1x, https://picsum.photos/seed/${i}/${\n                  width * 2\n                }/${height * 2} 2x`}\n              />\n            </ResponsiveBox>\n          </Box>\n        )\n      })}\n    </Masonry>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Responsive images in a masonry layout with different orientations.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Select/Select.js

@@ -10,10 +10,10 @@ 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 { themeGet } from "@styled-system/theme-get";
 import React, { forwardRef, useState } from "react";
-import styled, { css, ExecutionContext } from "styled-components";
+import styled, { css } from "styled-components";
 import { FORM_ELEMENT_TRANSITION } from "../../helpers";
 import { RequiredField } from "../../shared/RequiredField";
-import { Box, BoxProps, splitBoxProps } from "../Box";
+import { Box, splitBoxProps } from "../Box";
 import { Text } from "../Text";
 import { Tooltip } from "../Tooltip";
 import { SELECT_STATES } from "./tokens";

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["themeGet","React","forwardRef","useState","styled","css","ExecutionContext","FORM_ELEMENT_TRANSITION","RequiredField","Box","BoxProps","splitBoxProps","Text","Tooltip","SELECT_STATES","Select","_ref","ref","description","disabled","error","focus","hover","id","name","options","required","selected","title","onSelect","onChange","value","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","selectProps","_useState","_useState2","selectedOption","setSelectedOption","_useState3","_useState4","isFocused","setIsFocused","_useState5","_useState6","isHovered","setIsHovered","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","Container","mt","onMouseEnter","onMouseLeave","onFocus","onBlur","optionSelected","event","target","map","_ref2","text","key","StyledLabel","htmlFor","ml","displayName","resetMixin","caretMixin","_ref3","withConfig","componentId","props","default","completed","label"],"sources":["../../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useState } from \"react\"\nimport styled, { css, ExecutionContext } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n  value: string\n  text: string\n}\n\nexport interface SelectProps\n  extends BoxProps,\n    Omit<React.SelectHTMLAttributes<HTMLSelectElement>, \"onSelect\" | \"size\"> {\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  selected?: string\n  title?: string\n  onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select = forwardRef<HTMLElement, SelectProps>(\n  (\n    {\n      description,\n      disabled,\n      error,\n      focus,\n      hover,\n      id,\n      name,\n      options,\n      required,\n      selected,\n      title,\n      onSelect,\n      onChange,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, selectProps] = splitBoxProps(rest)\n    // due to :has not available in Firefox yet, we need to add the styles to the label using JS\n    const [selectedOption, setSelectedOption] = useState(selected || value)\n    const [isFocused, setIsFocused] = useState(false)\n    const [isHovered, setIsHovered] = useState(false)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Container\n          mt={!!title && !description ? 1 : 0}\n          disabled={!!disabled}\n          hover={!!hover || isHovered}\n          error={error!}\n          focus={!!focus || isFocused}\n          title={title}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          optionSelected={!!selectedOption}\n        >\n          <select\n            ref={ref as any}\n            id={id}\n            disabled={disabled}\n            name={name}\n            value={selected || value}\n            onChange={(event) => {\n              onSelect && onSelect(event.target.value)\n              onChange && onChange(event)\n              setSelectedOption(event.target.value)\n            }}\n            {...selectProps}\n          >\n            {options.map(({ value, text }) => {\n              return (\n                <option value={value} key={value}>\n                  {text}\n                </option>\n              )\n            })}\n          </select>\n\n          {!!title && (\n            <StyledLabel htmlFor={id}>\n              {title}\n\n              <span />\n            </StyledLabel>\n          )}\n        </Container>\n\n        {required && !(error && typeof error === \"string\") && (\n          <RequiredField mt={0.5} ml={1} disabled={disabled} />\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nSelect.displayName = \"Select\"\n\nconst resetMixin = css`\n  appearance: none;\n  background: none;\n  border: none;\n  outline: 0;\n  text-indent: 0.01px;\n  text-overflow: \"\";\n  border-radius: 0;\n\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 black;\n  }\n\n  option:not(:checked) {\n    color: black; /* prevent <option>s from becoming transparent as well */\n  }\n`\n\ninterface CaretProps extends ExecutionContext {\n  disabled?: boolean\n}\n\n/** Creates a small caret */\nexport const caretMixin = css`\n  &::after {\n    content: \"\";\n    cursor: inherit;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ${themeGet(\"space.1\")};\n    pointer-events: none;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 4px solid\n      ${({ disabled }: CaretProps) => {\n        return disabled ? themeGet(\"colors.mono10\") : themeGet(\"colors.mono100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"disabled\" | \"error\" | \"hover\" | \"focus\">\n  // adding optionSelected here to use it locally without adding it to the Select's props\n> & { optionSelected: boolean }\n\nconst Container = styled(Box)<ContainerProps>`\n  position: relative;\n  width: 100%;\n\n  > select {\n    ${resetMixin};\n    width: 100%;\n    /* 24px = space.1 + 4px-wide caret + space.1 */\n    padding: 0 24px 0 ${themeGet(\"space.1\")};\n    font-family: ${themeGet(\"fonts.sans\")};\n    border: 1px solid;\n    border-radius: 3px;\n    border-color: ${themeGet(\"colors.mono30\")};\n    cursor: pointer;\n    line-height: 1;\n    transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n    ${(props) => {\n      return css`\n        ${SELECT_STATES.default}\n\n        ${props.hover && SELECT_STATES.hover}\n        ${props.focus && SELECT_STATES.focus}\n        ${props.disabled && SELECT_STATES.disabled}\n        ${props.error && SELECT_STATES.error}\n\n        &:hover {\n          ${SELECT_STATES.hover}\n        }\n\n        &:focus {\n          ${SELECT_STATES.focus}\n        }\n\n        &:disabled {\n          cursor: default;\n          ${SELECT_STATES.disabled}\n        }\n\n        &:not(:focus):not(:has(option[value=\"\"]:checked)) {\n          ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n          ${props.error && SELECT_STATES.error}\n        }\n\n        &:not(:focus) {\n          // Firefox polyfill for :has\n          ${!!props.optionSelected &&\n          css`\n            ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n            ${props.error && SELECT_STATES.error}\n          `}\n        }\n\n        &:not(:focus):has(option[value=\"\"]:checked) {\n          ${props.title &&\n          css`\n            color: transparent;\n          `}\n        }\n\n        &:not(:focus) {\n          // Firefox polyfill for :has\n          ${props.title &&\n          !props.optionSelected &&\n          css`\n            color: transparent;\n          `}\n        }\n      `\n    }};\n  }\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, font-size, transform;\n  background-color: transparent;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["themeGet","React","forwardRef","useState","styled","css","FORM_ELEMENT_TRANSITION","RequiredField","Box","splitBoxProps","Text","Tooltip","SELECT_STATES","Select","_ref","ref","description","disabled","error","focus","hover","id","name","options","required","selected","title","onSelect","onChange","value","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","selectProps","_useState","_useState2","selectedOption","setSelectedOption","_useState3","_useState4","isFocused","setIsFocused","_useState5","_useState6","isHovered","setIsHovered","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","Container","mt","onMouseEnter","onMouseLeave","onFocus","onBlur","optionSelected","event","target","map","_ref2","text","key","StyledLabel","htmlFor","ml","displayName","resetMixin","caretMixin","_ref3","withConfig","componentId","props","default","completed","label"],"sources":["../../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useState } from \"react\"\nimport styled, { css, ExecutionContext } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n  value: string\n  text: string\n}\n\nexport interface SelectProps\n  extends BoxProps,\n    Omit<React.SelectHTMLAttributes<HTMLSelectElement>, \"onSelect\" | \"size\"> {\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  selected?: string\n  title?: string\n  onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select = forwardRef<HTMLElement, SelectProps>(\n  (\n    {\n      description,\n      disabled,\n      error,\n      focus,\n      hover,\n      id,\n      name,\n      options,\n      required,\n      selected,\n      title,\n      onSelect,\n      onChange,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, selectProps] = splitBoxProps(rest)\n    // due to :has not available in Firefox yet, we need to add the styles to the label using JS\n    const [selectedOption, setSelectedOption] = useState(selected || value)\n    const [isFocused, setIsFocused] = useState(false)\n    const [isHovered, setIsHovered] = useState(false)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Container\n          mt={!!title && !description ? 1 : 0}\n          disabled={!!disabled}\n          hover={!!hover || isHovered}\n          error={error!}\n          focus={!!focus || isFocused}\n          title={title}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          optionSelected={!!selectedOption}\n        >\n          <select\n            ref={ref as any}\n            id={id}\n            disabled={disabled}\n            name={name}\n            value={selected || value}\n            onChange={(event) => {\n              onSelect && onSelect(event.target.value)\n              onChange && onChange(event)\n              setSelectedOption(event.target.value)\n            }}\n            {...selectProps}\n          >\n            {options.map(({ value, text }) => {\n              return (\n                <option value={value} key={value}>\n                  {text}\n                </option>\n              )\n            })}\n          </select>\n\n          {!!title && (\n            <StyledLabel htmlFor={id}>\n              {title}\n\n              <span />\n            </StyledLabel>\n          )}\n        </Container>\n\n        {required && !(error && typeof error === \"string\") && (\n          <RequiredField mt={0.5} ml={1} disabled={disabled} />\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nSelect.displayName = \"Select\"\n\nconst resetMixin = css`\n  appearance: none;\n  background: none;\n  border: none;\n  outline: 0;\n  text-indent: 0.01px;\n  text-overflow: \"\";\n  border-radius: 0;\n\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 black;\n  }\n\n  option:not(:checked) {\n    color: black; /* prevent <option>s from becoming transparent as well */\n  }\n`\n\ninterface CaretProps extends ExecutionContext {\n  disabled?: boolean\n}\n\n/** Creates a small caret */\nexport const caretMixin = css`\n  &::after {\n    content: \"\";\n    cursor: inherit;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ${themeGet(\"space.1\")};\n    pointer-events: none;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 4px solid\n      ${({ disabled }: CaretProps) => {\n        return disabled ? themeGet(\"colors.mono10\") : themeGet(\"colors.mono100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"disabled\" | \"error\" | \"hover\" | \"focus\">\n  // adding optionSelected here to use it locally without adding it to the Select's props\n> & { optionSelected: boolean }\n\nconst Container = styled(Box)<ContainerProps>`\n  position: relative;\n  width: 100%;\n\n  > select {\n    ${resetMixin};\n    width: 100%;\n    /* 24px = space.1 + 4px-wide caret + space.1 */\n    padding: 0 24px 0 ${themeGet(\"space.1\")};\n    font-family: ${themeGet(\"fonts.sans\")};\n    border: 1px solid;\n    border-radius: 3px;\n    border-color: ${themeGet(\"colors.mono30\")};\n    cursor: pointer;\n    line-height: 1;\n    transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n    ${(props) => {\n      return css`\n        ${SELECT_STATES.default}\n\n        ${props.hover && SELECT_STATES.hover}\n        ${props.focus && SELECT_STATES.focus}\n        ${props.disabled && SELECT_STATES.disabled}\n        ${props.error && SELECT_STATES.error}\n\n        &:hover {\n          ${SELECT_STATES.hover}\n        }\n\n        &:focus {\n          ${SELECT_STATES.focus}\n        }\n\n        &:disabled {\n          cursor: default;\n          ${SELECT_STATES.disabled}\n        }\n\n        &:not(:focus):not(:has(option[value=\"\"]:checked)) {\n          ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n          ${props.error && SELECT_STATES.error}\n        }\n\n        &:not(:focus) {\n          // Firefox polyfill for :has\n          ${!!props.optionSelected &&\n          css`\n            ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n            ${props.error && SELECT_STATES.error}\n          `}\n        }\n\n        &:not(:focus):has(option[value=\"\"]:checked) {\n          ${props.title &&\n          css`\n            color: transparent;\n          `}\n        }\n\n        &:not(:focus) {\n          // Firefox polyfill for :has\n          ${props.title &&\n          !props.optionSelected &&\n          css`\n            color: transparent;\n          `}\n        }\n      `\n    }};\n  }\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, font-size, transform;\n  background-color: transparent;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}

package/dist/esm/elements/Select/tokens.js

@@ -1,6 +1,5 @@
 import { themeGet } from "@styled-system/theme-get";
-import { css, ExecutionContext } from "styled-components";
-import { State } from "./types";
+import { css } from "styled-components";
 export var SELECT_STATES = {
   default: css(["height:50px;font-size:", ";color:", ";border-color:", ";+ label{color:", ";font-size:", ";}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], themeGet("textVariants.sm-display.fontSize"), themeGet("colors.mono100"), themeGet("colors.mono30"), themeGet("colors.mono60"), themeGet("textVariants.sm-display.fontSize"), themeGet("textVariants.xs.fontSize"), function (_ref) {
     var optionSelected = _ref.optionSelected;

package/dist/esm/elements/Select/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["themeGet","css","ExecutionContext","State","SELECT_STATES","default","_ref","optionSelected","focus","_ref2","hover","_ref3","disabled","completed","_ref4","_ref5","error"],"sources":["../../../../src/elements/Select/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"./types\"\n\ninterface SelectProps extends ExecutionContext {\n  optionSelected?: boolean\n  disabled?: boolean\n}\n\nexport const SELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:has(option[value=\"\"]:checked) + label {\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      !optionSelected &&\n      css`\n        + label {\n          text-decoration: underline;\n        }\n      `}\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:has(option[value=\"\"]:checked):not(:disabled) + label {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected, disabled }: SelectProps) =>\n      !optionSelected &&\n      !disabled &&\n      css`\n        + label {\n          color: ${themeGet(\"colors.blue100\")};\n          text-decoration: underline;\n        }\n      `}\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    + label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,EAAEC,gBAAgB,QAAQ,mBAAmB;AACzD,SAASC,KAAK;AAOd,OAAO,IAAMC,aAAiC,GAAG;EAC/CC,OAAO,EAAEJ,GAAG,+NAEGD,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,EAK5CA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAM,IAAA;IAAA,IAAGC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IAAA,OACjBA,cAAc,IACdN,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDQ,KAAK,EAAEP,GAAG,mOACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAI/BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,EAajD,UAAAS,KAAA;IAAA,IAAGF,cAAc,GAAAE,KAAA,CAAdF,cAAc;IAAA,OACjB,CAACA,cAAc,IACfN,GAAG,yCAIF;EAAA,EACJ;EACDS,KAAK,EAAET,GAAG,qLACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,gBAAgB,CAAC,EAKnC,UAAAW,KAAA;IAAA,IAAGJ,cAAc,GAAAI,KAAA,CAAdJ,cAAc;MAAEK,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OAC3B,CAACL,cAAc,IACf,CAACK,QAAQ,IACTX,GAAG,qDAEUD,QAAQ,CAAC,gBAAgB,CAAC,CAGtC;EAAA,EACJ;EACDa,SAAS,EAAEZ,GAAG,+LACID,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAKrBA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAc,KAAA;IAAA,IAAGP,cAAc,GAAAO,KAAA,CAAdP,cAAc;IAAA,OACjBA,cAAc,IACdN,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDY,QAAQ,EAAEX,GAAG,+NACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAMrBA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAe,KAAA;IAAA,IAAGR,cAAc,GAAAQ,KAAA,CAAdR,cAAc;IAAA,OACjBA,cAAc,IACdN,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDgB,KAAK,EAAEf,GAAG,wDACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC;AAGxC,CAAC"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","SELECT_STATES","default","_ref","optionSelected","focus","_ref2","hover","_ref3","disabled","completed","_ref4","_ref5","error"],"sources":["../../../../src/elements/Select/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"./types\"\n\ninterface SelectProps extends ExecutionContext {\n  optionSelected?: boolean\n  disabled?: boolean\n}\n\nexport const SELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:has(option[value=\"\"]:checked) + label {\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      !optionSelected &&\n      css`\n        + label {\n          text-decoration: underline;\n        }\n      `}\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:has(option[value=\"\"]:checked):not(:disabled) + label {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected, disabled }: SelectProps) =>\n      !optionSelected &&\n      !disabled &&\n      css`\n        + label {\n          color: ${themeGet(\"colors.blue100\")};\n          text-decoration: underline;\n        }\n      `}\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    + label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAA0B,mBAAmB;AAQzD,OAAO,IAAMC,aAAiC,GAAG;EAC/CC,OAAO,EAAEF,GAAG,+NAEGD,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,EAK5CA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAI,IAAA;IAAA,IAAGC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IAAA,OACjBA,cAAc,IACdJ,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDM,KAAK,EAAEL,GAAG,mOACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAI/BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,EAajD,UAAAO,KAAA;IAAA,IAAGF,cAAc,GAAAE,KAAA,CAAdF,cAAc;IAAA,OACjB,CAACA,cAAc,IACfJ,GAAG,yCAIF;EAAA,EACJ;EACDO,KAAK,EAAEP,GAAG,qLACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,gBAAgB,CAAC,EAKnC,UAAAS,KAAA;IAAA,IAAGJ,cAAc,GAAAI,KAAA,CAAdJ,cAAc;MAAEK,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OAC3B,CAACL,cAAc,IACf,CAACK,QAAQ,IACTT,GAAG,qDAEUD,QAAQ,CAAC,gBAAgB,CAAC,CAGtC;EAAA,EACJ;EACDW,SAAS,EAAEV,GAAG,+LACID,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAKrBA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAY,KAAA;IAAA,IAAGP,cAAc,GAAAO,KAAA,CAAdP,cAAc;IAAA,OACjBA,cAAc,IACdJ,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDU,QAAQ,EAAET,GAAG,+NACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAMrBA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAa,KAAA;IAAA,IAAGR,cAAc,GAAAQ,KAAA,CAAdR,cAAc;IAAA,OACjBA,cAAc,IACdJ,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDc,KAAK,EAAEb,GAAG,wDACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC;AAGxC,CAAC"}

package/dist/esm/elements/SelectInput/SelectInput.js

@@ -15,13 +15,12 @@ import styled, { css } from "styled-components";
 import { height as systemHeight } from "styled-system";
 import { useContainsFocus, usePosition, useWidthOf } from "../../utils";
 import { Box, splitBoxProps } from "../Box";
-import { InputProps } from "../Input";
-import { Text, TextProps } from "../Text";
+import { Text } from "../Text";
 import { SELECT_INPUT_STATES } from "./tokens";
 import { RequiredField } from "../../shared/RequiredField";
-import { Option, SelectInputList } from "./SelectInputList";
+import { SelectInputList } from "./SelectInputList";
 import { caretMixin } from "../Select";
-import { Clickable, ClickableProps } from "../Clickable";
+import { Clickable } from "../Clickable";
 export var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var className = _ref.className,
     enableSearch = _ref.enableSearch,

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

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.js","names":["composeRefs","themeGet","React","useCallback","useMemo","useRef","useState","styled","css","height","systemHeight","useContainsFocus","usePosition","useWidthOf","Box","splitBoxProps","InputProps","Text","TextProps","SELECT_INPUT_STATES","RequiredField","Option","SelectInputList","caretMixin","Clickable","ClickableProps","SelectInput","forwardRef","_ref","forwardedRef","className","enableSearch","disabled","dropdownValue","error","focus","hover","label","inputValue","onSelect","options","required","selectWidth","optionTextMinWidth","rest","_objectWithoutProperties","_excluded","length","Error","inputRef","containerRef","defaultOption","find","option","value","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_useState","_useState2","open","setOpen","_useState3","_useState4","selectedOption","setSelectedOption","_usePosition","position","offset","active","flip","anchorRef","tooltipRef","_useWidthOf","ref","width","inputName","name","handleSelect","_inputRef$current","current","handleFocusChange","focused","_useContainsFocus","onChange","containsFocusRef","handleClose","createElement","_extends","SelectInputContainer","placeholder","SelectInputSelect","onClick","text","SelectInputInput","maxLength","SelectInputLabel","htmlFor","SelectInputDropdown","role","onClose","mt","ml","variant","mr","color","textAlign","displayName","withConfig","componentId","props","default","completed","p","_p$width","input"],"sources":["../../../../src/elements/SelectInput/SelectInput.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { useContainsFocus, usePosition, useWidthOf } from \"../../utils\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { InputProps } from \"../Input\"\nimport { Text, TextProps } from \"../Text\"\nimport { SELECT_INPUT_STATES } from \"./tokens\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Option, SelectInputList } from \"./SelectInputList\"\nimport { caretMixin } from \"../Select\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\nexport interface SelectInputProps extends Omit<InputProps, \"onSelect\"> {\n  active?: boolean\n  enableSearch?: boolean\n  disabled?: boolean\n  dropdownValue?: string\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  inputValue?: string\n  label: string\n  onSelect: (option: Option) => void\n  options: Option[]\n  required?: boolean\n  /** Controls the width of the left hand select dropdown UI */\n  selectWidth?: ClickableProps[\"width\"]\n  /** Controls the gap between the text and name labels in select options */\n  optionTextMinWidth?: TextProps[\"minWidth\"]\n}\n\nexport const SelectInput = React.forwardRef<HTMLInputElement, SelectInputProps>(\n  (\n    {\n      className,\n      enableSearch,\n      disabled,\n      dropdownValue,\n      error,\n      focus,\n      hover,\n      label,\n      inputValue,\n      onSelect,\n      options,\n      required,\n      selectWidth,\n      optionTextMinWidth,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    if (options.length === 0) {\n      throw new Error(\n        \"Palette SelectInput requires at least 1 option in the options prop\"\n      )\n    }\n\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const containerRef = useRef<HTMLDivElement | null>(null)\n\n    const defaultOption = useMemo(\n      () =>\n        dropdownValue &&\n        options.find((option) => option.value === dropdownValue),\n      [dropdownValue, options]\n    )\n\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [open, setOpen] = useState(false)\n    const [selectedOption, setSelectedOption] = useState(\n      defaultOption || options[0]\n    )\n\n    const { anchorRef, tooltipRef } = usePosition({\n      position: \"bottom\",\n      offset: 10,\n      active: open,\n      flip: false,\n    })\n\n    const { width } = useWidthOf({ ref: anchorRef })\n\n    const inputName = inputProps.name || \"palette-select-input\"\n\n    const handleSelect = (option: Option) => {\n      setSelectedOption(option)\n      setOpen(false)\n      inputRef.current?.focus()\n      onSelect?.(option)\n    }\n\n    const handleFocusChange = useCallback(\n      (focused: boolean) => {\n        if (focused || !open) return\n        setOpen(false)\n      },\n      [open]\n    )\n\n    // Handle closing the dropdown when clicking outside of the input\n    // or when focus leaves the input completely\n    const { ref: containsFocusRef } = useContainsFocus({\n      onChange: handleFocusChange,\n    })\n\n    const handleClose = () => {\n      setOpen(false)\n    }\n\n    return (\n      <Box\n        ref={composeRefs(containerRef, containsFocusRef) as any}\n        width=\"100%\"\n        className={className}\n        {...boxProps}\n      >\n        <SelectInputContainer\n          ref={anchorRef as any}\n          open={open}\n          hover={hover}\n          focus={focus}\n          error={error}\n          disabled={disabled}\n          placeholder={inputProps.placeholder}\n        >\n          <SelectInputSelect\n            data-testid=\"country-picker\"\n            disabled={disabled}\n            onClick={() => {\n              setOpen(!disabled && !open)\n            }}\n            width={selectWidth}\n          >\n            {selectedOption.text}\n          </SelectInputSelect>\n\n          <SelectInputInput\n            disabled={disabled}\n            ref={composeRefs(inputRef, forwardedRef)}\n            required={required}\n            name={inputName}\n            maxLength={25}\n            placeholder={inputProps.placeholder}\n            value={inputValue}\n            {...inputProps}\n          />\n\n          <SelectInputLabel htmlFor={inputName}>{label}</SelectInputLabel>\n        </SelectInputContainer>\n\n        {open && (\n          <SelectInputDropdown\n            ref={tooltipRef as any}\n            role=\"listbox\"\n            width={width}\n          >\n            <SelectInputList\n              options={options}\n              onSelect={handleSelect}\n              onClose={handleClose}\n              enableSearch={enableSearch}\n              optionTextMinWidth={optionTextMinWidth}\n            />\n          </SelectInputDropdown>\n        )}\n\n        {required && !(error && typeof error === \"string\") && (\n          <RequiredField mt={0.5} ml={1} disabled={disabled} />\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} mr={1} color=\"red100\" textAlign=\"right\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nSelectInput.displayName = \"SelectInput\"\n\ntype ContainerProps = Pick<\n  SelectInputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"placeholder\"\n> & { open: boolean }\n\nconst SelectInputContainer = styled(Box)<ContainerProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) => {\n    return css`\n      ${SELECT_INPUT_STATES.default}\n      ${props.hover && SELECT_INPUT_STATES.hover}\n      ${(props.focus || props.open) && SELECT_INPUT_STATES.focus}\n      ${props.disabled && SELECT_INPUT_STATES.disabled}\n      ${props.error && SELECT_INPUT_STATES.error}\n\n      &:hover {\n        /* Applies hover style if the dropdown is not visible or the input is disabled */\n        ${!props.open && !props.disabled && SELECT_INPUT_STATES.hover}\n      }\n\n      &:focus-within {\n        ${!props.disabled && SELECT_INPUT_STATES.focus}\n\n        &:has(input:not(:placeholder-shown)) {\n          ${SELECT_INPUT_STATES.active}\n          ${props.error && SELECT_INPUT_STATES.error};\n        }\n      }\n\n      &:has(input:not(:placeholder-shown)) {\n        ${!!props.placeholder && SELECT_INPUT_STATES.completed}\n        ${props.error && SELECT_INPUT_STATES.error};\n      }\n    `\n  }}\n`\n\nconst SelectInputSelect = styled(Clickable)<{ disabled?: boolean }>`\n  ${caretMixin}\n  display: flex;\n  align-items: center;\n  position: relative;\n  min-width: ${(p) => p.width ?? 120}px;\n  border: 1px solid;\n  border-right: 0;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 0 24px 0 ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border-radius: 3px 0 0 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, border-color 0.25s;\n  height: 50px;\n  font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n  color: ${themeGet(\"colors.mono100\")};\n  &:focus {\n    outline: none;\n    text-decoration: underline;\n    color: ${themeGet(\"colors.blue100\")};\n  }\n`\n\nconst SelectInputDropdown = styled(Box)`\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  background: ${themeGet(\"colors.mono0\")};\n  z-index: 1;\n  padding: ${themeGet(\"space.1\")};\n`\n\nconst SelectInputInput = styled.input`\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  outline: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 0 3px 3px 0;\n  transition: color 0.25s, border-color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n  color: ${themeGet(\"colors.mono100\")};\n  border-color: ${themeGet(\"colors.mono30\")};\n  ${systemHeight}\n\n  ::placeholder {\n    color: ${themeGet(\"colors.mono60\")};\n    transition: color 0.25s;\n  }\n`\n\nconst SelectInputLabel = styled.label`\n  position: absolute;\n  top: 0;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n  font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n  color: ${themeGet(\"colors.mono60\")};\n\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 0;\n    height: 2px;\n    width: 100%;\n    background-color: ${themeGet(\"colors.mono0\")};\n    z-index: -1;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"SelectInput.js","names":["composeRefs","themeGet","React","useCallback","useMemo","useRef","useState","styled","css","height","systemHeight","useContainsFocus","usePosition","useWidthOf","Box","splitBoxProps","Text","SELECT_INPUT_STATES","RequiredField","SelectInputList","caretMixin","Clickable","SelectInput","forwardRef","_ref","forwardedRef","className","enableSearch","disabled","dropdownValue","error","focus","hover","label","inputValue","onSelect","options","required","selectWidth","optionTextMinWidth","rest","_objectWithoutProperties","_excluded","length","Error","inputRef","containerRef","defaultOption","find","option","value","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_useState","_useState2","open","setOpen","_useState3","_useState4","selectedOption","setSelectedOption","_usePosition","position","offset","active","flip","anchorRef","tooltipRef","_useWidthOf","ref","width","inputName","name","handleSelect","_inputRef$current","current","handleFocusChange","focused","_useContainsFocus","onChange","containsFocusRef","handleClose","createElement","_extends","SelectInputContainer","placeholder","SelectInputSelect","onClick","text","SelectInputInput","maxLength","SelectInputLabel","htmlFor","SelectInputDropdown","role","onClose","mt","ml","variant","mr","color","textAlign","displayName","withConfig","componentId","props","default","completed","p","_p$width","input"],"sources":["../../../../src/elements/SelectInput/SelectInput.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { useContainsFocus, usePosition, useWidthOf } from \"../../utils\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { InputProps } from \"../Input\"\nimport { Text, TextProps } from \"../Text\"\nimport { SELECT_INPUT_STATES } from \"./tokens\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Option, SelectInputList } from \"./SelectInputList\"\nimport { caretMixin } from \"../Select\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\nexport interface SelectInputProps extends Omit<InputProps, \"onSelect\"> {\n  active?: boolean\n  enableSearch?: boolean\n  disabled?: boolean\n  dropdownValue?: string\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  inputValue?: string\n  label: string\n  onSelect: (option: Option) => void\n  options: Option[]\n  required?: boolean\n  /** Controls the width of the left hand select dropdown UI */\n  selectWidth?: ClickableProps[\"width\"]\n  /** Controls the gap between the text and name labels in select options */\n  optionTextMinWidth?: TextProps[\"minWidth\"]\n}\n\nexport const SelectInput = React.forwardRef<HTMLInputElement, SelectInputProps>(\n  (\n    {\n      className,\n      enableSearch,\n      disabled,\n      dropdownValue,\n      error,\n      focus,\n      hover,\n      label,\n      inputValue,\n      onSelect,\n      options,\n      required,\n      selectWidth,\n      optionTextMinWidth,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    if (options.length === 0) {\n      throw new Error(\n        \"Palette SelectInput requires at least 1 option in the options prop\"\n      )\n    }\n\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const containerRef = useRef<HTMLDivElement | null>(null)\n\n    const defaultOption = useMemo(\n      () =>\n        dropdownValue &&\n        options.find((option) => option.value === dropdownValue),\n      [dropdownValue, options]\n    )\n\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [open, setOpen] = useState(false)\n    const [selectedOption, setSelectedOption] = useState(\n      defaultOption || options[0]\n    )\n\n    const { anchorRef, tooltipRef } = usePosition({\n      position: \"bottom\",\n      offset: 10,\n      active: open,\n      flip: false,\n    })\n\n    const { width } = useWidthOf({ ref: anchorRef })\n\n    const inputName = inputProps.name || \"palette-select-input\"\n\n    const handleSelect = (option: Option) => {\n      setSelectedOption(option)\n      setOpen(false)\n      inputRef.current?.focus()\n      onSelect?.(option)\n    }\n\n    const handleFocusChange = useCallback(\n      (focused: boolean) => {\n        if (focused || !open) return\n        setOpen(false)\n      },\n      [open]\n    )\n\n    // Handle closing the dropdown when clicking outside of the input\n    // or when focus leaves the input completely\n    const { ref: containsFocusRef } = useContainsFocus({\n      onChange: handleFocusChange,\n    })\n\n    const handleClose = () => {\n      setOpen(false)\n    }\n\n    return (\n      <Box\n        ref={composeRefs(containerRef, containsFocusRef) as any}\n        width=\"100%\"\n        className={className}\n        {...boxProps}\n      >\n        <SelectInputContainer\n          ref={anchorRef as any}\n          open={open}\n          hover={hover}\n          focus={focus}\n          error={error}\n          disabled={disabled}\n          placeholder={inputProps.placeholder}\n        >\n          <SelectInputSelect\n            data-testid=\"country-picker\"\n            disabled={disabled}\n            onClick={() => {\n              setOpen(!disabled && !open)\n            }}\n            width={selectWidth}\n          >\n            {selectedOption.text}\n          </SelectInputSelect>\n\n          <SelectInputInput\n            disabled={disabled}\n            ref={composeRefs(inputRef, forwardedRef)}\n            required={required}\n            name={inputName}\n            maxLength={25}\n            placeholder={inputProps.placeholder}\n            value={inputValue}\n            {...inputProps}\n          />\n\n          <SelectInputLabel htmlFor={inputName}>{label}</SelectInputLabel>\n        </SelectInputContainer>\n\n        {open && (\n          <SelectInputDropdown\n            ref={tooltipRef as any}\n            role=\"listbox\"\n            width={width}\n          >\n            <SelectInputList\n              options={options}\n              onSelect={handleSelect}\n              onClose={handleClose}\n              enableSearch={enableSearch}\n              optionTextMinWidth={optionTextMinWidth}\n            />\n          </SelectInputDropdown>\n        )}\n\n        {required && !(error && typeof error === \"string\") && (\n          <RequiredField mt={0.5} ml={1} disabled={disabled} />\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} mr={1} color=\"red100\" textAlign=\"right\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nSelectInput.displayName = \"SelectInput\"\n\ntype ContainerProps = Pick<\n  SelectInputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"placeholder\"\n> & { open: boolean }\n\nconst SelectInputContainer = styled(Box)<ContainerProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) => {\n    return css`\n      ${SELECT_INPUT_STATES.default}\n      ${props.hover && SELECT_INPUT_STATES.hover}\n      ${(props.focus || props.open) && SELECT_INPUT_STATES.focus}\n      ${props.disabled && SELECT_INPUT_STATES.disabled}\n      ${props.error && SELECT_INPUT_STATES.error}\n\n      &:hover {\n        /* Applies hover style if the dropdown is not visible or the input is disabled */\n        ${!props.open && !props.disabled && SELECT_INPUT_STATES.hover}\n      }\n\n      &:focus-within {\n        ${!props.disabled && SELECT_INPUT_STATES.focus}\n\n        &:has(input:not(:placeholder-shown)) {\n          ${SELECT_INPUT_STATES.active}\n          ${props.error && SELECT_INPUT_STATES.error};\n        }\n      }\n\n      &:has(input:not(:placeholder-shown)) {\n        ${!!props.placeholder && SELECT_INPUT_STATES.completed}\n        ${props.error && SELECT_INPUT_STATES.error};\n      }\n    `\n  }}\n`\n\nconst SelectInputSelect = styled(Clickable)<{ disabled?: boolean }>`\n  ${caretMixin}\n  display: flex;\n  align-items: center;\n  position: relative;\n  min-width: ${(p) => p.width ?? 120}px;\n  border: 1px solid;\n  border-right: 0;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 0 24px 0 ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border-radius: 3px 0 0 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, border-color 0.25s;\n  height: 50px;\n  font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n  color: ${themeGet(\"colors.mono100\")};\n  &:focus {\n    outline: none;\n    text-decoration: underline;\n    color: ${themeGet(\"colors.blue100\")};\n  }\n`\n\nconst SelectInputDropdown = styled(Box)`\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  background: ${themeGet(\"colors.mono0\")};\n  z-index: 1;\n  padding: ${themeGet(\"space.1\")};\n`\n\nconst SelectInputInput = styled.input`\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  outline: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 0 3px 3px 0;\n  transition: color 0.25s, border-color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n  color: ${themeGet(\"colors.mono100\")};\n  border-color: ${themeGet(\"colors.mono30\")};\n  ${systemHeight}\n\n  ::placeholder {\n    color: ${themeGet(\"colors.mono60\")};\n    transition: color 0.25s;\n  }\n`\n\nconst SelectInputLabel = styled.label`\n  position: absolute;\n  top: 0;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n  font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n  color: ${themeGet(\"colors.mono60\")};\n\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 0;\n    height: 2px;\n    width: 100%;\n    background-color: ${themeGet(\"colors.mono0\")};\n    z-index: -1;\n  }\n`\n"],"mappings":"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"}

package/dist/esm/elements/SelectInput/SelectInputList.js

@@ -7,13 +7,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { createRef, useEffect, useMemo, useRef, useState } from "react";
 import { Input } from "../Input";
 import { Clickable } from "../Clickable";
-import { Text, TextProps } from "../Text";
+import { Text } from "../Text";
 import styled from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import { Box } from "../Box";
 import { useKeyboardListNavigation } from "use-keyboard-list-navigation";
 import { useMouseActivity } from "../../utils/useMouseActivity";
-import { SelectInputProps } from "./SelectInput";
 
 /**
  * The option structure for the list in the dropdown menu

package/dist/esm/elements/SelectInput/SelectInputList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputList.js","names":["React","createRef","useEffect","useMemo","useRef","useState","Input","Clickable","Text","TextProps","styled","themeGet","Box","useKeyboardListNavigation","useMouseActivity","SelectInputProps","SelectInputList","_ref","enableSearch","options","onSelect","onClose","_ref$optionTextMinWid","optionTextMinWidth","_useState","_useState2","_slicedToArray","query","setQuery","optionsWithRefs","map","option","ref","filteredOptionsWithRefs","filter","concat","name","toLowerCase","countryCode","includes","containerRef","_useKeyboardListNavig","list","waitForInteractive","onEnter","_ref2","element","event","preventDefault","stopPropagation","reset","set","index","_useMouseActivity","lastMouseMoveTimestamp","handleMouseEnter","i","now","performance","current","cursor","interactive","_option$ref","_option$ref$current","focus","handleKeyDown","e","key","createElement","autoFocus","placeholder","value","onChange","target","onKeyDown","SelectInputListOptions","_ref3","SelectInputListOption","role","onMouseEnter","onClick","tabIndex","variant","minWidth","text","displayName","withConfig","componentId"],"sources":["../../../../src/elements/SelectInput/SelectInputList.tsx"],"sourcesContent":["import React, { createRef, useEffect, useMemo, useRef, useState } from \"react\"\nimport { Input } from \"../Input\"\nimport { Clickable } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { Box } from \"../Box\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { useMouseActivity } from \"../../utils/useMouseActivity\"\nimport { SelectInputProps } from \"./SelectInput\"\n\n/**\n * The option structure for the list in the dropdown menu\n *\n * @interface Option\n * @property {string} `text` is the content that will be displayed as selected option\n * @property {string} `name` is the content that will be displayed in the dropdown list\n * @property {string} `value` is the value that will be passed to onSelect\n */\nexport interface Option {\n  text: string\n  name: string\n  value: string\n  countryCode?: string\n  flag?: string\n}\n\nexport interface SelectInputListProps {\n  enableSearch?: SelectInputProps[\"enableSearch\"]\n  options: Option[]\n  onSelect: (option: Option) => void\n  onClose: () => void\n  optionTextMinWidth?: TextProps[\"minWidth\"]\n}\n\nexport const SelectInputList = ({\n  enableSearch,\n  options,\n  onSelect,\n  onClose,\n  optionTextMinWidth = \"8ch\",\n}: SelectInputListProps) => {\n  const [query, setQuery] = useState(\"\")\n\n  const optionsWithRefs = useMemo(() => {\n    return options.map((option) => ({\n      option,\n      ref: createRef<HTMLButtonElement>(),\n    }))\n  }, [options])\n\n  const filteredOptionsWithRefs = useMemo(() => {\n    return optionsWithRefs.filter((option) =>\n      `${option.option.name.toLowerCase()} ${\n        option.option.countryCode\n      }`.includes(query.toLowerCase())\n    )\n  }, [optionsWithRefs, query])\n\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const { reset, set, index } = useKeyboardListNavigation({\n    ref: containerRef,\n    list: filteredOptionsWithRefs,\n    waitForInteractive: true,\n    onEnter: ({ element, event }) => {\n      event.preventDefault()\n      event.stopPropagation()\n\n      onSelect(element.option)\n      reset()\n    },\n  })\n\n  const { lastMouseMoveTimestamp } = useMouseActivity()\n\n  const handleMouseEnter = (i: number) => () => {\n    const now = performance.now()\n\n    // 50ms mouse move window\n    if (now - lastMouseMoveTimestamp.current < 50) {\n      set({ cursor: i, interactive: true })\n    }\n  }\n\n  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const option = filteredOptionsWithRefs[index]\n    option?.ref?.current?.focus()\n  }, [index, filteredOptionsWithRefs])\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (e.key) {\n      case \"Escape\":\n        reset()\n        onClose()\n        break\n    }\n  }\n\n  return (\n    <Box ref={containerRef}>\n      {enableSearch && (\n        <Input\n          autoFocus\n          placeholder=\"Search\"\n          value={query}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            reset()\n          }}\n          onKeyDown={handleKeyDown}\n        />\n      )}\n\n      <SelectInputListOptions>\n        {filteredOptionsWithRefs.map(({ option, ref }, i) => (\n          <SelectInputListOption\n            key={option.value}\n            ref={ref}\n            role=\"option\"\n            onMouseEnter={handleMouseEnter(i)}\n            onClick={() => {\n              onSelect(option)\n            }}\n            tabIndex={-1}\n          >\n            <Text variant=\"sm\" minWidth={optionTextMinWidth}>\n              {option.text}\n            </Text>\n\n            <Text variant=\"sm\">{option.name}</Text>\n          </SelectInputListOption>\n        ))}\n      </SelectInputListOptions>\n    </Box>\n  )\n}\n\nconst SelectInputListOption = styled(Clickable)`\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  gap: ${themeGet(\"space.0.5\")};\n  padding: ${themeGet(\"space.1\")} 0;\n  color: ${themeGet(\"colors.mono60\")};\n  &:focus {\n    color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n    outline: none;\n  }\n`\n\nconst SelectInputListOptions = styled(Box)`\n  max-height: 250px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n"],"mappings":"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"}
+{"version":3,"file":"SelectInputList.js","names":["React","createRef","useEffect","useMemo","useRef","useState","Input","Clickable","Text","styled","themeGet","Box","useKeyboardListNavigation","useMouseActivity","SelectInputList","_ref","enableSearch","options","onSelect","onClose","_ref$optionTextMinWid","optionTextMinWidth","_useState","_useState2","_slicedToArray","query","setQuery","optionsWithRefs","map","option","ref","filteredOptionsWithRefs","filter","concat","name","toLowerCase","countryCode","includes","containerRef","_useKeyboardListNavig","list","waitForInteractive","onEnter","_ref2","element","event","preventDefault","stopPropagation","reset","set","index","_useMouseActivity","lastMouseMoveTimestamp","handleMouseEnter","i","now","performance","current","cursor","interactive","_option$ref","_option$ref$current","focus","handleKeyDown","e","key","createElement","autoFocus","placeholder","value","onChange","target","onKeyDown","SelectInputListOptions","_ref3","SelectInputListOption","role","onMouseEnter","onClick","tabIndex","variant","minWidth","text","displayName","withConfig","componentId"],"sources":["../../../../src/elements/SelectInput/SelectInputList.tsx"],"sourcesContent":["import React, { createRef, useEffect, useMemo, useRef, useState } from \"react\"\nimport { Input } from \"../Input\"\nimport { Clickable } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { Box } from \"../Box\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { useMouseActivity } from \"../../utils/useMouseActivity\"\nimport { SelectInputProps } from \"./SelectInput\"\n\n/**\n * The option structure for the list in the dropdown menu\n *\n * @interface Option\n * @property {string} `text` is the content that will be displayed as selected option\n * @property {string} `name` is the content that will be displayed in the dropdown list\n * @property {string} `value` is the value that will be passed to onSelect\n */\nexport interface Option {\n  text: string\n  name: string\n  value: string\n  countryCode?: string\n  flag?: string\n}\n\nexport interface SelectInputListProps {\n  enableSearch?: SelectInputProps[\"enableSearch\"]\n  options: Option[]\n  onSelect: (option: Option) => void\n  onClose: () => void\n  optionTextMinWidth?: TextProps[\"minWidth\"]\n}\n\nexport const SelectInputList = ({\n  enableSearch,\n  options,\n  onSelect,\n  onClose,\n  optionTextMinWidth = \"8ch\",\n}: SelectInputListProps) => {\n  const [query, setQuery] = useState(\"\")\n\n  const optionsWithRefs = useMemo(() => {\n    return options.map((option) => ({\n      option,\n      ref: createRef<HTMLButtonElement>(),\n    }))\n  }, [options])\n\n  const filteredOptionsWithRefs = useMemo(() => {\n    return optionsWithRefs.filter((option) =>\n      `${option.option.name.toLowerCase()} ${\n        option.option.countryCode\n      }`.includes(query.toLowerCase())\n    )\n  }, [optionsWithRefs, query])\n\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const { reset, set, index } = useKeyboardListNavigation({\n    ref: containerRef,\n    list: filteredOptionsWithRefs,\n    waitForInteractive: true,\n    onEnter: ({ element, event }) => {\n      event.preventDefault()\n      event.stopPropagation()\n\n      onSelect(element.option)\n      reset()\n    },\n  })\n\n  const { lastMouseMoveTimestamp } = useMouseActivity()\n\n  const handleMouseEnter = (i: number) => () => {\n    const now = performance.now()\n\n    // 50ms mouse move window\n    if (now - lastMouseMoveTimestamp.current < 50) {\n      set({ cursor: i, interactive: true })\n    }\n  }\n\n  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const option = filteredOptionsWithRefs[index]\n    option?.ref?.current?.focus()\n  }, [index, filteredOptionsWithRefs])\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (e.key) {\n      case \"Escape\":\n        reset()\n        onClose()\n        break\n    }\n  }\n\n  return (\n    <Box ref={containerRef}>\n      {enableSearch && (\n        <Input\n          autoFocus\n          placeholder=\"Search\"\n          value={query}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            reset()\n          }}\n          onKeyDown={handleKeyDown}\n        />\n      )}\n\n      <SelectInputListOptions>\n        {filteredOptionsWithRefs.map(({ option, ref }, i) => (\n          <SelectInputListOption\n            key={option.value}\n            ref={ref}\n            role=\"option\"\n            onMouseEnter={handleMouseEnter(i)}\n            onClick={() => {\n              onSelect(option)\n            }}\n            tabIndex={-1}\n          >\n            <Text variant=\"sm\" minWidth={optionTextMinWidth}>\n              {option.text}\n            </Text>\n\n            <Text variant=\"sm\">{option.name}</Text>\n          </SelectInputListOption>\n        ))}\n      </SelectInputListOptions>\n    </Box>\n  )\n}\n\nconst SelectInputListOption = styled(Clickable)`\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  gap: ${themeGet(\"space.0.5\")};\n  padding: ${themeGet(\"space.1\")} 0;\n  color: ${themeGet(\"colors.mono60\")};\n  &:focus {\n    color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n    outline: none;\n  }\n`\n\nconst SelectInputListOptions = styled(Box)`\n  max-height: 250px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n"],"mappings":"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"}

package/dist/esm/elements/Separator/Separator.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { border, BorderProps, color, ColorProps, compose, space, SpaceProps, width, WidthProps } from "styled-system";
+import { border, color, compose, space, width } from "styled-system";
 /**
  * A horizontal divider whose width and spacing can be adjusted
  */

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":["styled","border","BorderProps","color","ColorProps","compose","space","SpaceProps","width","WidthProps","Separator","div","withConfig","displayName","componentId","defaultProps"],"sources":["../../../../src/elements/Separator/Separator.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport {\n  border,\n  BorderProps,\n  color,\n  ColorProps,\n  compose,\n  space,\n  SpaceProps,\n  width,\n  WidthProps,\n} from \"styled-system\"\n\nexport interface SeparatorProps\n  extends SpaceProps,\n    WidthProps,\n    BorderProps,\n    ColorProps {}\n\n/**\n * A horizontal divider whose width and spacing can be adjusted\n */\nexport const Separator = styled.div<SeparatorProps>`\n  border-width: 1px;\n  border-style: solid;\n  border-bottom-width: 0;\n  background-color: transparent;\n  border-color: currentColor;\n  margin: 0;\n  ${compose(space, width, border, color)};\n`\n\nSeparator.defaultProps = {\n  width: \"100%\",\n  color: \"mono10\",\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,WAAW,EACXC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,UAAU,QACL,eAAe;AAQtB;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGV,MAAM,CAACW,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wIAO/BT,OAAO,CAACC,KAAK,EAAEE,KAAK,EAAEP,MAAM,EAAEE,KAAK,CAAC,CACvC;AAEDO,SAAS,CAACK,YAAY,GAAG;EACvBP,KAAK,EAAE,MAAM;EACbL,KAAK,EAAE;AACT,CAAC"}
+{"version":3,"file":"Separator.js","names":["styled","border","color","compose","space","width","Separator","div","withConfig","displayName","componentId","defaultProps"],"sources":["../../../../src/elements/Separator/Separator.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport {\n  border,\n  BorderProps,\n  color,\n  ColorProps,\n  compose,\n  space,\n  SpaceProps,\n  width,\n  WidthProps,\n} from \"styled-system\"\n\nexport interface SeparatorProps\n  extends SpaceProps,\n    WidthProps,\n    BorderProps,\n    ColorProps {}\n\n/**\n * A horizontal divider whose width and spacing can be adjusted\n */\nexport const Separator = styled.div<SeparatorProps>`\n  border-width: 1px;\n  border-style: solid;\n  border-bottom-width: 0;\n  background-color: transparent;\n  border-color: currentColor;\n  margin: 0;\n  ${compose(space, width, border, color)};\n`\n\nSeparator.defaultProps = {\n  width: \"100%\",\n  color: \"mono10\",\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EAENC,KAAK,EAELC,OAAO,EACPC,KAAK,EAELC,KAAK,QAEA,eAAe;AAQtB;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wIAO/BP,OAAO,CAACC,KAAK,EAAEC,KAAK,EAAEJ,MAAM,EAAEC,KAAK,CAAC,CACvC;AAEDI,SAAS,CAACK,YAAY,GAAG;EACvBN,KAAK,EAAE,MAAM;EACbH,KAAK,EAAE;AACT,CAAC"}

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

@@ -12,9 +12,8 @@ import React, { Children, createRef, isValidElement, useCallback, useEffect, use
 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, paginateCarousel } from "../Carousel";
-import { FlexProps } from "../Flex";
 import { FullBleed } from "../FullBleed";
 import { ShelfNext, ShelfPrevious } from "./ShelfNavigation";
 import { ShelfScrollBar } from "./ShelfScrollBar";

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

@@ -1 +1 @@
-{"version":3,"file":"Shelf.js","names":["React","Children","createRef","isValidElement","useCallback","useEffect","useMemo","useRef","useState","styled","useCursor","visuallyDisableScrollbar","Box","BoxProps","CELL_GAP_PADDING_AMOUNT","paginateCarousel","FlexProps","FullBleed","ShelfNext","ShelfPrevious","ShelfScrollBar","Shelf","_ref","_ref$alignItems","alignItems","_ref$showProgress","showProgress","_ref$snap","snap","children","onChange","rest","_objectWithoutProperties","_excluded","cells","toArray","filter","map","child","ref","containerRef","viewportRef","_useState","_useState2","_slicedToArray","mounted","setMounted","_useState3","_useState4","pages","setPages","_useState5","_useState6","offset","setOffset","_useState7","_useState8","atStart","setAtStart","init","current","container","values","_ref2","i","length","Math","ceil","clientWidth","viewport","_container$getBoundin","getBoundingClientRect","x","window","addEventListener","removeEventListener","_useCursor","max","pageIndex","index","setCursor","handler","nearestPage","find","currentPage","_pages","nextPage","Infinity","scrollLeft","indexOf","passive","scrollToPage","xPosition","scrollTo","left","behavior","handleNext","handlePrev","createElement","Container","_extends","Nav","as","bottom","Previous","onClick","disabled","Next","right","marginLeft","Viewport","Rail","position","mb","_ref3","isFirst","isLast","Cell","key","pl","undefined","pr","style","scrollSnapAlign","displayName","withConfig","componentId"],"sources":["../../../../src/elements/Shelf/Shelf.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\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, paginateCarousel } from \"../Carousel\"\nimport { FlexProps } from \"../Flex\"\nimport { FullBleed } from \"../FullBleed\"\nimport { ShelfNext, ShelfPrevious } from \"./ShelfNavigation\"\nimport { ShelfScrollBar } from \"./ShelfScrollBar\"\n\n/** ShelfProps */\nexport type ShelfProps = BoxProps & {\n  alignItems?: FlexProps[\"alignItems\"]\n  showProgress?: boolean\n  snap?: \"none\" | \"start\" | \"end\" | \"center\"\n  children: JSX.Element | JSX.Element[]\n  onChange?(index: number): void\n}\n\n/**\n * A Shelf is a new kind of carousel...\n */\nexport const Shelf: React.FC<React.PropsWithChildren<ShelfProps>> = ({\n  alignItems = \"flex-end\",\n  showProgress = true,\n  snap = \"none\",\n  children,\n  onChange,\n  ...rest\n}) => {\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLLIElement>() })),\n    [children]\n  )\n\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n\n  const [mounted, setMounted] = useState(false)\n  const [pages, setPages] = useState([0])\n  const [offset, setOffset] = useState(0)\n  const [atStart, setAtStart] = useState(true)\n\n  const init = useCallback(() => {\n    if (containerRef.current === null) return\n\n    const { current: container } = containerRef\n\n    // Set page-stops\n    const values = cells.map(({ ref }, i) => {\n      // If we have an offset we actually want to subtract it from\n      // the first and last elements.\n      if (offset !== 0 && (i === 0 || i === cells.length - 1)) {\n        return Math.ceil(ref.current!.clientWidth - offset)\n      }\n\n      return ref.current!.clientWidth\n    })\n\n    setPages(\n      paginateCarousel({\n        // Here we use the container width instead of the viewport width.\n        // The viewport has been extended to the full width of the window;\n        // we want to scroll to the parent boundaries instead.\n        viewport: container.clientWidth,\n        values,\n      })\n    )\n\n    // Set offset to accomodate full-bleed and line up initially with page-margins\n    const { x } = container.getBoundingClientRect()\n    setOffset(x)\n\n    setMounted(true)\n  }, [cells, offset])\n\n  useEffect(() => {\n    init()\n\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [init])\n\n  const { index: pageIndex, setCursor } = useCursor({\n    max: pages.length,\n  })\n\n  // Keep page cursor in sync with scroll position\n  useEffect(() => {\n    if (viewportRef.current === null) return\n\n    const { current: viewport } = viewportRef\n\n    const handler = () => {\n      const nearestPage = pages.find((currentPage, i) => {\n        const nextPage = pages[i + 1] ?? Infinity\n        return (\n          viewport.scrollLeft >= currentPage && viewport.scrollLeft < nextPage\n        )\n      })\n\n      setCursor(pages.indexOf(nearestPage!))\n      setAtStart(viewport.scrollLeft === 0)\n    }\n\n    viewport.addEventListener(\"scroll\", handler, { passive: true })\n    return () => {\n      viewport.removeEventListener(\"scroll\", handler)\n    }\n  }, [pages, setCursor])\n\n  // Announce page changes\n  useEffect(() => {\n    onChange && onChange(pageIndex)\n  }, [onChange, pageIndex])\n\n  // Scroll to a specific page-stop\n  const scrollToPage = (index: number) => {\n    const xPosition = pages[index]\n    scrollTo(xPosition)\n  }\n\n  const scrollTo = (xPosition: number) => {\n    if (viewportRef.current === null) return\n\n    const { current: viewport } = viewportRef\n\n    if (viewport.scrollTo) {\n      viewport.scrollTo({ left: xPosition, behavior: \"smooth\" })\n      return\n    }\n\n    viewport.scrollLeft = xPosition\n  }\n\n  // One side-effect of scrolling to the next page index instead of\n  // setting it directly is that you can't scroll to the next one via click until\n  // you've arrived. We may want to reconsider this approach; though this is the\n  // simplest way to keep these values in sync with one another.\n  const handleNext = () => {\n    scrollToPage(pageIndex + 1)\n  }\n\n  const handlePrev = () => {\n    if (pageIndex === 0) {\n      scrollTo(0)\n      return\n    }\n\n    scrollToPage(pageIndex - 1)\n  }\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Nav\n        as=\"nav\"\n        // We can't position relative to the FullBleed rail —\n        // so offset the bottom by the bottom margin + the height of the scrollbar.\n        bottom={[23, 63]}\n      >\n        <Previous\n          onClick={handlePrev}\n          disabled={atStart}\n          aria-label=\"Previous page\"\n        />\n\n        <Next\n          onClick={handleNext}\n          disabled={pageIndex === pages.length - 1}\n          aria-label=\"Next page\"\n        />\n      </Nav>\n\n      <FullBleed\n        // To prevent any page jank we initially partially disable this component\n        // so that content is left aligned with the parent container and then once\n        // we have the offset and page values; we reset it to actually full-bleed.\n        // The `offset` will push the content up to the parent margin.\n        {...(!mounted ? { left: null, right: null, marginLeft: null } : {})}\n      >\n        <Viewport ref={viewportRef as any}>\n          <Rail as=\"ul\" position=\"relative\" alignItems={alignItems} mb={[2, 6]}>\n            {cells.map(({ child, ref }, i) => {\n              const isFirst = i === 0\n              const isLast = i === cells.length - 1\n\n              return (\n                <Cell\n                  as=\"li\"\n                  key={i}\n                  ref={ref as any}\n                  pl={isFirst ? offset : undefined}\n                  pr={!isLast ? CELL_GAP_PADDING_AMOUNT : offset}\n                  style={{ scrollSnapAlign: snap }}\n                >\n                  {child}\n                </Cell>\n              )\n            })}\n          </Rail>\n        </Viewport>\n      </FullBleed>\n\n      {showProgress && <ShelfScrollBar viewport={viewportRef.current} />}\n    </Container>\n  )\n}\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n\n  > nav {\n    transition: opacity 250ms;\n    transition-delay: 100ms;\n    opacity: 0;\n  }\n\n  &:hover {\n    > nav {\n      opacity: 1;\n    }\n  }\n`\n\nconst Nav = styled(Box)`\n  pointer-events: none;\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  left: 0;\n`\n\nconst Viewport = 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\nconst Rail = styled(Box)`\n  display: flex;\n  width: 100%;\n  height: 100%;\n  margin-top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n`\n\nconst Cell = styled(Box)`\n  white-space: normal;\n`\n\nconst Next = styled(ShelfNext)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: 0;\n\n  @media (hover: none) {\n    display: none;\n  }\n`\n\nconst Previous = styled(ShelfPrevious)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0;\n\n  @media (hover: none) {\n    display: none;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"Shelf.js","names":["React","Children","createRef","isValidElement","useCallback","useEffect","useMemo","useRef","useState","styled","useCursor","visuallyDisableScrollbar","Box","CELL_GAP_PADDING_AMOUNT","paginateCarousel","FullBleed","ShelfNext","ShelfPrevious","ShelfScrollBar","Shelf","_ref","_ref$alignItems","alignItems","_ref$showProgress","showProgress","_ref$snap","snap","children","onChange","rest","_objectWithoutProperties","_excluded","cells","toArray","filter","map","child","ref","containerRef","viewportRef","_useState","_useState2","_slicedToArray","mounted","setMounted","_useState3","_useState4","pages","setPages","_useState5","_useState6","offset","setOffset","_useState7","_useState8","atStart","setAtStart","init","current","container","values","_ref2","i","length","Math","ceil","clientWidth","viewport","_container$getBoundin","getBoundingClientRect","x","window","addEventListener","removeEventListener","_useCursor","max","pageIndex","index","setCursor","handler","nearestPage","find","currentPage","_pages","nextPage","Infinity","scrollLeft","indexOf","passive","scrollToPage","xPosition","scrollTo","left","behavior","handleNext","handlePrev","createElement","Container","_extends","Nav","as","bottom","Previous","onClick","disabled","Next","right","marginLeft","Viewport","Rail","position","mb","_ref3","isFirst","isLast","Cell","key","pl","undefined","pr","style","scrollSnapAlign","displayName","withConfig","componentId"],"sources":["../../../../src/elements/Shelf/Shelf.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\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, paginateCarousel } from \"../Carousel\"\nimport { FlexProps } from \"../Flex\"\nimport { FullBleed } from \"../FullBleed\"\nimport { ShelfNext, ShelfPrevious } from \"./ShelfNavigation\"\nimport { ShelfScrollBar } from \"./ShelfScrollBar\"\n\n/** ShelfProps */\nexport type ShelfProps = BoxProps & {\n  alignItems?: FlexProps[\"alignItems\"]\n  showProgress?: boolean\n  snap?: \"none\" | \"start\" | \"end\" | \"center\"\n  children: JSX.Element | JSX.Element[]\n  onChange?(index: number): void\n}\n\n/**\n * A Shelf is a new kind of carousel...\n */\nexport const Shelf: React.FC<React.PropsWithChildren<ShelfProps>> = ({\n  alignItems = \"flex-end\",\n  showProgress = true,\n  snap = \"none\",\n  children,\n  onChange,\n  ...rest\n}) => {\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLLIElement>() })),\n    [children]\n  )\n\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n\n  const [mounted, setMounted] = useState(false)\n  const [pages, setPages] = useState([0])\n  const [offset, setOffset] = useState(0)\n  const [atStart, setAtStart] = useState(true)\n\n  const init = useCallback(() => {\n    if (containerRef.current === null) return\n\n    const { current: container } = containerRef\n\n    // Set page-stops\n    const values = cells.map(({ ref }, i) => {\n      // If we have an offset we actually want to subtract it from\n      // the first and last elements.\n      if (offset !== 0 && (i === 0 || i === cells.length - 1)) {\n        return Math.ceil(ref.current!.clientWidth - offset)\n      }\n\n      return ref.current!.clientWidth\n    })\n\n    setPages(\n      paginateCarousel({\n        // Here we use the container width instead of the viewport width.\n        // The viewport has been extended to the full width of the window;\n        // we want to scroll to the parent boundaries instead.\n        viewport: container.clientWidth,\n        values,\n      })\n    )\n\n    // Set offset to accomodate full-bleed and line up initially with page-margins\n    const { x } = container.getBoundingClientRect()\n    setOffset(x)\n\n    setMounted(true)\n  }, [cells, offset])\n\n  useEffect(() => {\n    init()\n\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [init])\n\n  const { index: pageIndex, setCursor } = useCursor({\n    max: pages.length,\n  })\n\n  // Keep page cursor in sync with scroll position\n  useEffect(() => {\n    if (viewportRef.current === null) return\n\n    const { current: viewport } = viewportRef\n\n    const handler = () => {\n      const nearestPage = pages.find((currentPage, i) => {\n        const nextPage = pages[i + 1] ?? Infinity\n        return (\n          viewport.scrollLeft >= currentPage && viewport.scrollLeft < nextPage\n        )\n      })\n\n      setCursor(pages.indexOf(nearestPage!))\n      setAtStart(viewport.scrollLeft === 0)\n    }\n\n    viewport.addEventListener(\"scroll\", handler, { passive: true })\n    return () => {\n      viewport.removeEventListener(\"scroll\", handler)\n    }\n  }, [pages, setCursor])\n\n  // Announce page changes\n  useEffect(() => {\n    onChange && onChange(pageIndex)\n  }, [onChange, pageIndex])\n\n  // Scroll to a specific page-stop\n  const scrollToPage = (index: number) => {\n    const xPosition = pages[index]\n    scrollTo(xPosition)\n  }\n\n  const scrollTo = (xPosition: number) => {\n    if (viewportRef.current === null) return\n\n    const { current: viewport } = viewportRef\n\n    if (viewport.scrollTo) {\n      viewport.scrollTo({ left: xPosition, behavior: \"smooth\" })\n      return\n    }\n\n    viewport.scrollLeft = xPosition\n  }\n\n  // One side-effect of scrolling to the next page index instead of\n  // setting it directly is that you can't scroll to the next one via click until\n  // you've arrived. We may want to reconsider this approach; though this is the\n  // simplest way to keep these values in sync with one another.\n  const handleNext = () => {\n    scrollToPage(pageIndex + 1)\n  }\n\n  const handlePrev = () => {\n    if (pageIndex === 0) {\n      scrollTo(0)\n      return\n    }\n\n    scrollToPage(pageIndex - 1)\n  }\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Nav\n        as=\"nav\"\n        // We can't position relative to the FullBleed rail —\n        // so offset the bottom by the bottom margin + the height of the scrollbar.\n        bottom={[23, 63]}\n      >\n        <Previous\n          onClick={handlePrev}\n          disabled={atStart}\n          aria-label=\"Previous page\"\n        />\n\n        <Next\n          onClick={handleNext}\n          disabled={pageIndex === pages.length - 1}\n          aria-label=\"Next page\"\n        />\n      </Nav>\n\n      <FullBleed\n        // To prevent any page jank we initially partially disable this component\n        // so that content is left aligned with the parent container and then once\n        // we have the offset and page values; we reset it to actually full-bleed.\n        // The `offset` will push the content up to the parent margin.\n        {...(!mounted ? { left: null, right: null, marginLeft: null } : {})}\n      >\n        <Viewport ref={viewportRef as any}>\n          <Rail as=\"ul\" position=\"relative\" alignItems={alignItems} mb={[2, 6]}>\n            {cells.map(({ child, ref }, i) => {\n              const isFirst = i === 0\n              const isLast = i === cells.length - 1\n\n              return (\n                <Cell\n                  as=\"li\"\n                  key={i}\n                  ref={ref as any}\n                  pl={isFirst ? offset : undefined}\n                  pr={!isLast ? CELL_GAP_PADDING_AMOUNT : offset}\n                  style={{ scrollSnapAlign: snap }}\n                >\n                  {child}\n                </Cell>\n              )\n            })}\n          </Rail>\n        </Viewport>\n      </FullBleed>\n\n      {showProgress && <ShelfScrollBar viewport={viewportRef.current} />}\n    </Container>\n  )\n}\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n\n  > nav {\n    transition: opacity 250ms;\n    transition-delay: 100ms;\n    opacity: 0;\n  }\n\n  &:hover {\n    > nav {\n      opacity: 1;\n    }\n  }\n`\n\nconst Nav = styled(Box)`\n  pointer-events: none;\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  left: 0;\n`\n\nconst Viewport = 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\nconst Rail = styled(Box)`\n  display: flex;\n  width: 100%;\n  height: 100%;\n  margin-top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n`\n\nconst Cell = styled(Box)`\n  white-space: normal;\n`\n\nconst Next = styled(ShelfNext)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: 0;\n\n  @media (hover: none) {\n    display: none;\n  }\n`\n\nconst Previous = styled(ShelfPrevious)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0;\n\n  @media (hover: none) {\n    display: none;\n  }\n`\n"],"mappings":"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"}

package/dist/esm/elements/Shelf/ShelfNavigation.js

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { css } from "styled-components";
 import ChevronLeftIcon from "@artsy/icons/ChevronLeftIcon";
 import ChevronRightIcon from "@artsy/icons/ChevronRightIcon";
-import { Clickable, ClickableProps } from "../Clickable";
+import { Clickable } from "../Clickable";
 
 /** ShelfNavigationProps */
 

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

@@ -1 +1 @@
-{"version":3,"file":"ShelfNavigation.js","names":["themeGet","React","styled","css","ChevronLeftIcon","ChevronRightIcon","Clickable","ClickableProps","STATES","hover","focus","disabled","Arrow","withConfig","displayName","componentId","props","ShelfNext","createElement","width","height","ShelfPrevious"],"sources":["../../../../src/elements/Shelf/ShelfNavigation.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\n/** ShelfNavigationProps */\nexport interface ShelfNavigationProps extends ClickableProps {\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n}\n\nconst STATES = {\n  hover: css`\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n    box-shadow: ${themeGet(\"effects.dropShadow\")};\n  `,\n  focus: css`\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.brand\")};\n  `,\n  disabled: css`\n    opacity: 0;\n    cursor: default;\n  `,\n}\n\nconst Arrow = styled(Clickable)<ShelfNavigationProps>`\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 250ms, color 250ms, border-color 250ms,\n    box-shadow 0.25s ease;\n  color: ${themeGet(\"colors.mono60\")};\n  background-color: ${themeGet(\"colors.mono0\")};\n  border: 1px solid ${themeGet(\"colors.mono5\")};\n  border-radius: 50%;\n  pointer-events: auto;\n\n  > svg {\n    fill: currentColor;\n  }\n\n  ${(props) => {\n    return css`\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.disabled && STATES.focus}\n    `\n  }}\n\n  &:hover {\n    ${STATES.hover}\n  }\n  &:focus {\n    ${STATES.focus}\n  }\n\n  &:disabled {\n    ${STATES.disabled}\n  }\n`\n\n/**\n * Default next button\n */\nexport const ShelfNext: React.FC<\n  React.PropsWithChildren<ShelfNavigationProps>\n> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronRightIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n\n/**\n * Default previous button\n */\nexport const ShelfPrevious: React.FC<\n  React.PropsWithChildren<ShelfNavigationProps>\n> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronLeftIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,eAAe,MAAM,8BAA8B;AAC1D,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,SAASC,SAAS,EAAEC,cAAc;;AAElC;;AAOA,IAAMC,MAAM,GAAG;EACbC,KAAK,EAAEN,GAAG,4CAECH,QAAQ,CAAC,gBAAgB,CAAC,EACrBA,QAAQ,CAAC,oBAAoB,CAAC,CAC7C;EACDU,KAAK,EAAEP,GAAG,8CAECH,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,cAAc,CAAC,CACzC;EACDW,QAAQ,EAAER,GAAG;AAIf,CAAC;AAED,IAAMS,KAAK,GAAGV,MAAM,CAACI,SAAS,CAAC,CAAAO,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0WAUpBf,QAAQ,CAAC,eAAe,CAAC,EACdA,QAAQ,CAAC,cAAc,CAAC,EACxBA,QAAQ,CAAC,cAAc,CAAC,EAQ1C,UAACgB,KAAK,EAAK;EACX,OAAOb,GAAG,qBACNa,KAAK,CAACP,KAAK,IAAID,MAAM,CAACC,KAAK,EAC3BO,KAAK,CAACN,KAAK,IAAIF,MAAM,CAACE,KAAK,EAC3BM,KAAK,CAACL,QAAQ,IAAIH,MAAM,CAACE,KAAK;AAEpC,CAAC,EAGGF,MAAM,CAACC,KAAK,EAGZD,MAAM,CAACE,KAAK,EAIZF,MAAM,CAACG,QAAQ,CAEpB;;AAED;AACA;AACA;AACA,OAAO,IAAMM,SAEZ,GAAG,SAFSA,SAEZA,CAAID,KAAK,EAAK;EACb,oBACEf,KAAA,CAAAiB,aAAA,CAACN,KAAK,EAAKI,KAAK,eACdf,KAAA,CAAAiB,aAAA,CAACb,gBAAgB;IAACc,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,EAAG,CACrC;AAEZ,CAAC;AARYH,SAEZ,CAAAH,WAAA;AAQD;AACA;AACA;AACA,OAAO,IAAMO,aAEZ,GAAG,SAFSA,aAEZA,CAAIL,KAAK,EAAK;EACb,oBACEf,KAAA,CAAAiB,aAAA,CAACN,KAAK,EAAKI,KAAK,eACdf,KAAA,CAAAiB,aAAA,CAACd,eAAe;IAACe,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,EAAG,CACpC;AAEZ,CAAC;AARYC,aAEZ,CAAAP,WAAA"}
+{"version":3,"file":"ShelfNavigation.js","names":["themeGet","React","styled","css","ChevronLeftIcon","ChevronRightIcon","Clickable","STATES","hover","focus","disabled","Arrow","withConfig","displayName","componentId","props","ShelfNext","createElement","width","height","ShelfPrevious"],"sources":["../../../../src/elements/Shelf/ShelfNavigation.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\n/** ShelfNavigationProps */\nexport interface ShelfNavigationProps extends ClickableProps {\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n}\n\nconst STATES = {\n  hover: css`\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n    box-shadow: ${themeGet(\"effects.dropShadow\")};\n  `,\n  focus: css`\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.brand\")};\n  `,\n  disabled: css`\n    opacity: 0;\n    cursor: default;\n  `,\n}\n\nconst Arrow = styled(Clickable)<ShelfNavigationProps>`\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 250ms, color 250ms, border-color 250ms,\n    box-shadow 0.25s ease;\n  color: ${themeGet(\"colors.mono60\")};\n  background-color: ${themeGet(\"colors.mono0\")};\n  border: 1px solid ${themeGet(\"colors.mono5\")};\n  border-radius: 50%;\n  pointer-events: auto;\n\n  > svg {\n    fill: currentColor;\n  }\n\n  ${(props) => {\n    return css`\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.disabled && STATES.focus}\n    `\n  }}\n\n  &:hover {\n    ${STATES.hover}\n  }\n  &:focus {\n    ${STATES.focus}\n  }\n\n  &:disabled {\n    ${STATES.disabled}\n  }\n`\n\n/**\n * Default next button\n */\nexport const ShelfNext: React.FC<\n  React.PropsWithChildren<ShelfNavigationProps>\n> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronRightIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n\n/**\n * Default previous button\n */\nexport const ShelfPrevious: React.FC<\n  React.PropsWithChildren<ShelfNavigationProps>\n> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronLeftIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,eAAe,MAAM,8BAA8B;AAC1D,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,SAASC,SAAS;;AAElB;;AAOA,IAAMC,MAAM,GAAG;EACbC,KAAK,EAAEL,GAAG,4CAECH,QAAQ,CAAC,gBAAgB,CAAC,EACrBA,QAAQ,CAAC,oBAAoB,CAAC,CAC7C;EACDS,KAAK,EAAEN,GAAG,8CAECH,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,cAAc,CAAC,CACzC;EACDU,QAAQ,EAAEP,GAAG;AAIf,CAAC;AAED,IAAMQ,KAAK,GAAGT,MAAM,CAACI,SAAS,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0WAUpBd,QAAQ,CAAC,eAAe,CAAC,EACdA,QAAQ,CAAC,cAAc,CAAC,EACxBA,QAAQ,CAAC,cAAc,CAAC,EAQ1C,UAACe,KAAK,EAAK;EACX,OAAOZ,GAAG,qBACNY,KAAK,CAACP,KAAK,IAAID,MAAM,CAACC,KAAK,EAC3BO,KAAK,CAACN,KAAK,IAAIF,MAAM,CAACE,KAAK,EAC3BM,KAAK,CAACL,QAAQ,IAAIH,MAAM,CAACE,KAAK;AAEpC,CAAC,EAGGF,MAAM,CAACC,KAAK,EAGZD,MAAM,CAACE,KAAK,EAIZF,MAAM,CAACG,QAAQ,CAEpB;;AAED;AACA;AACA;AACA,OAAO,IAAMM,SAEZ,GAAG,SAFSA,SAEZA,CAAID,KAAK,EAAK;EACb,oBACEd,KAAA,CAAAgB,aAAA,CAACN,KAAK,EAAKI,KAAK,eACdd,KAAA,CAAAgB,aAAA,CAACZ,gBAAgB;IAACa,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,EAAG,CACrC;AAEZ,CAAC;AARYH,SAEZ,CAAAH,WAAA;AAQD;AACA;AACA;AACA,OAAO,IAAMO,aAEZ,GAAG,SAFSA,aAEZA,CAAIL,KAAK,EAAK;EACb,oBACEd,KAAA,CAAAgB,aAAA,CAACN,KAAK,EAAKI,KAAK,eACdd,KAAA,CAAAgB,aAAA,CAACb,eAAe;IAACc,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,EAAG,CACpC;AAEZ,CAAC;AARYC,aAEZ,CAAAP,WAAA"}

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

@@ -12,7 +12,7 @@ import { themeGet } from "@styled-system/theme-get";
 import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { useMutationObserver } from "../../utils/useMutationObserver";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { Clickable } from "../Clickable";
 import { useClickScroll } from "./useClickScroll";
 import { useDragScroll } from "./useDragScroll";