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

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","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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"}
+{"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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"}

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

@@ -7,12 +7,13 @@ 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 } from "../Text";
+import { Text, TextProps } 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","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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"}
+{"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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"}

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

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { border, color, compose, space, width } from "styled-system";
+import { border, BorderProps, color, ColorProps, compose, space, SpaceProps, width, WidthProps } 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","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"}
+{"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"}

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

@@ -12,8 +12,9 @@ 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 } from "../Box";
+import { Box, BoxProps } 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","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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"}
+{"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":";;;;;;;;;;AAAA,OAAOA,KAAK,IACVC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,YAAY;AACtC,SAASC,wBAAwB;AACjC,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,uBAAuB,EAAEC,gBAAgB;AAClD,SAASC,SAAS;AAClB,SAASC,SAAS;AAClB,SAASC,SAAS,EAAEC,aAAa;AACjC,SAASC,cAAc;;AAEvB;;AASA;AACA;AACA;AACA,OAAO,IAAMC,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAO3D;EAAA,IAAAC,eAAA,GAAAD,IAAA,CANJE,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,UAAU,GAAAA,eAAA;IAAAE,iBAAA,GAAAH,IAAA,CACvBI,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,IAAI,GAAAA,iBAAA;IAAAE,SAAA,GAAAL,IAAA,CACnBM,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,MAAM,GAAAA,SAAA;IACbE,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IACLC,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAEP,IAAMC,KAAK,GAAG5B,OAAO,CACnB;IAAA,OACEL,QAAQ,CAACkC,OAAO,CAACN,QAAQ,CAAC,CACvBO,MAAM,CAACjC,cAAc,CAAC,CACtBkC,GAAG,CAAC,UAACC,KAAK;MAAA,OAAM;QAAEA,KAAK,EAALA,KAAK;QAAEC,GAAG,eAAErC,SAAS;MAAkB,CAAC;IAAA,CAAC,CAAC;EAAA,GACjE,CAAC2B,QAAQ,CAAC,CACX;EAED,IAAMW,YAAY,GAAGjC,MAAM,CAAwB,IAAI,CAAC;EACxD,IAAMkC,WAAW,GAAGlC,MAAM,CAAwB,IAAI,CAAC;EAEvD,IAAAmC,SAAA,GAA8BlC,QAAQ,CAAC,KAAK,CAAC;IAAAmC,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAtCG,OAAO,GAAAF,UAAA;IAAEG,UAAU,GAAAH,UAAA;EAC1B,IAAAI,UAAA,GAA0BvC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAAAwC,UAAA,GAAAJ,cAAA,CAAAG,UAAA;IAAhCE,KAAK,GAAAD,UAAA;IAAEE,QAAQ,GAAAF,UAAA;EACtB,IAAAG,UAAA,GAA4B3C,QAAQ,CAAC,CAAC,CAAC;IAAA4C,UAAA,GAAAR,cAAA,CAAAO,UAAA;IAAhCE,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,IAAAG,UAAA,GAA8B/C,QAAQ,CAAC,IAAI,CAAC;IAAAgD,UAAA,GAAAZ,cAAA,CAAAW,UAAA;IAArCE,OAAO,GAAAD,UAAA;IAAEE,UAAU,GAAAF,UAAA;EAE1B,IAAMG,IAAI,GAAGvD,WAAW,CAAC,YAAM;IAC7B,IAAIoC,YAAY,CAACoB,OAAO,KAAK,IAAI,EAAE;IAEnC,IAAiBC,SAAS,GAAKrB,YAAY,CAAnCoB,OAAO;;IAEf;IACA,IAAME,MAAM,GAAG5B,KAAK,CAACG,GAAG,CAAC,UAAA0B,KAAA,EAAUC,CAAC,EAAK;MAAA,IAAbzB,GAAG,GAAAwB,KAAA,CAAHxB,GAAG;MAC7B;MACA;MACA,IAAIc,MAAM,KAAK,CAAC,KAAKW,CAAC,KAAK,CAAC,IAAIA,CAAC,KAAK9B,KAAK,CAAC+B,MAAM,GAAG,CAAC,CAAC,EAAE;QACvD,OAAOC,IAAI,CAACC,IAAI,CAAC5B,GAAG,CAACqB,OAAO,CAAEQ,WAAW,GAAGf,MAAM,CAAC;MACrD;MAEA,OAAOd,GAAG,CAACqB,OAAO,CAAEQ,WAAW;IACjC,CAAC,CAAC;IAEFlB,QAAQ,CACNnC,gBAAgB,CAAC;MACf;MACA;MACA;MACAsD,QAAQ,EAAER,SAAS,CAACO,WAAW;MAC/BN,MAAM,EAANA;IACF,CAAC,CAAC,CACH;;IAED;IACA,IAAAQ,qBAAA,GAAcT,SAAS,CAACU,qBAAqB,EAAE;MAAvCC,CAAC,GAAAF,qBAAA,CAADE,CAAC;IACTlB,SAAS,CAACkB,CAAC,CAAC;IAEZ1B,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC,EAAE,CAACZ,KAAK,EAAEmB,MAAM,CAAC,CAAC;EAEnBhD,SAAS,CAAC,YAAM;IACdsD,IAAI,EAAE;IAENc,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEf,IAAI,CAAC;IACvC,OAAO,YAAM;MACXc,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEhB,IAAI,CAAC;IAC5C,CAAC;EACH,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,IAAAiB,UAAA,GAAwClE,SAAS,CAAC;MAChDmE,GAAG,EAAE5B,KAAK,CAACgB;IACb,CAAC,CAAC;IAFaa,SAAS,GAAAF,UAAA,CAAhBG,KAAK;IAAaC,SAAS,GAAAJ,UAAA,CAATI,SAAS;;EAInC;EACA3E,SAAS,CAAC,YAAM;IACd,IAAIoC,WAAW,CAACmB,OAAO,KAAK,IAAI,EAAE;IAElC,IAAiBS,QAAQ,GAAK5B,WAAW,CAAjCmB,OAAO;IAEf,IAAMqB,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;MACpB,IAAMC,WAAW,GAAGjC,KAAK,CAACkC,IAAI,CAAC,UAACC,WAAW,EAAEpB,CAAC,EAAK;QAAA,IAAAqB,MAAA;QACjD,IAAMC,QAAQ,IAAAD,MAAA,GAAGpC,KAAK,CAACe,CAAC,GAAG,CAAC,CAAC,cAAAqB,MAAA,cAAAA,MAAA,GAAIE,QAAQ;QACzC,OACElB,QAAQ,CAACmB,UAAU,IAAIJ,WAAW,IAAIf,QAAQ,CAACmB,UAAU,GAAGF,QAAQ;MAExE,CAAC,CAAC;MAEFN,SAAS,CAAC/B,KAAK,CAACwC,OAAO,CAACP,WAAW,CAAE,CAAC;MACtCxB,UAAU,CAACW,QAAQ,CAACmB,UAAU,KAAK,CAAC,CAAC;IACvC,CAAC;IAEDnB,QAAQ,CAACK,gBAAgB,CAAC,QAAQ,EAAEO,OAAO,EAAE;MAAES,OAAO,EAAE;IAAK,CAAC,CAAC;IAC/D,OAAO,YAAM;MACXrB,QAAQ,CAACM,mBAAmB,CAAC,QAAQ,EAAEM,OAAO,CAAC;IACjD,CAAC;EACH,CAAC,EAAE,CAAChC,KAAK,EAAE+B,SAAS,CAAC,CAAC;;EAEtB;EACA3E,SAAS,CAAC,YAAM;IACdyB,QAAQ,IAAIA,QAAQ,CAACgD,SAAS,CAAC;EACjC,CAAC,EAAE,CAAChD,QAAQ,EAAEgD,SAAS,CAAC,CAAC;;EAEzB;EACA,IAAMa,YAAY,GAAG,SAAfA,YAAYA,CAAIZ,KAAa,EAAK;IACtC,IAAMa,SAAS,GAAG3C,KAAK,CAAC8B,KAAK,CAAC;IAC9Bc,QAAQ,CAACD,SAAS,CAAC;EACrB,CAAC;EAED,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAID,SAAiB,EAAK;IACtC,IAAInD,WAAW,CAACmB,OAAO,KAAK,IAAI,EAAE;IAElC,IAAiBS,QAAQ,GAAK5B,WAAW,CAAjCmB,OAAO;IAEf,IAAIS,QAAQ,CAACwB,QAAQ,EAAE;MACrBxB,QAAQ,CAACwB,QAAQ,CAAC;QAAEC,IAAI,EAAEF,SAAS;QAAEG,QAAQ,EAAE;MAAS,CAAC,CAAC;MAC1D;IACF;IAEA1B,QAAQ,CAACmB,UAAU,GAAGI,SAAS;EACjC,CAAC;;EAED;EACA;EACA;EACA;EACA,IAAMI,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACvBL,YAAY,CAACb,SAAS,GAAG,CAAC,CAAC;EAC7B,CAAC;EAED,IAAMmB,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACvB,IAAInB,SAAS,KAAK,CAAC,EAAE;MACnBe,QAAQ,CAAC,CAAC,CAAC;MACX;IACF;IAEAF,YAAY,CAACb,SAAS,GAAG,CAAC,CAAC;EAC7B,CAAC;EAED,oBACE9E,KAAA,CAAAkG,aAAA,CAACC,SAAS,EAAAC,QAAA;IAAC7D,GAAG,EAAEC;EAAoB,GAAKT,IAAI,gBAC3C/B,KAAA,CAAAkG,aAAA,CAACG,GAAG;IACFC,EAAE,EAAC;IACH;IACA;IAAA;IACAC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE;EAAE,gBAEjBvG,KAAA,CAAAkG,aAAA,CAACM,QAAQ;IACPC,OAAO,EAAER,UAAW;IACpBS,QAAQ,EAAEjD,OAAQ;IAClB,cAAW;EAAe,EAC1B,eAEFzD,KAAA,CAAAkG,aAAA,CAACS,IAAI;IACHF,OAAO,EAAET,UAAW;IACpBU,QAAQ,EAAE5B,SAAS,KAAK7B,KAAK,CAACgB,MAAM,GAAG,CAAE;IACzC,cAAW;EAAW,EACtB,CACE,eAENjE,KAAA,CAAAkG,aAAA,CAACjF;EACC;EACA;EACA;EACA;EAAA,EACK,CAAC4B,OAAO,GAAG;IAAEiD,IAAI,EAAE,IAAI;IAAEc,KAAK,EAAE,IAAI;IAAEC,UAAU,EAAE;EAAK,CAAC,GAAG,CAAC,CAAC,eAElE7G,KAAA,CAAAkG,aAAA,CAACY,QAAQ;IAACvE,GAAG,EAAEE;EAAmB,gBAChCzC,KAAA,CAAAkG,aAAA,CAACa,IAAI;IAACT,EAAE,EAAC,IAAI;IAACU,QAAQ,EAAC,UAAU;IAACxF,UAAU,EAAEA,UAAW;IAACyF,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC;EAAE,GAClE/E,KAAK,CAACG,GAAG,CAAC,UAAA6E,KAAA,EAAiBlD,CAAC,EAAK;IAAA,IAApB1B,KAAK,GAAA4E,KAAA,CAAL5E,KAAK;MAAEC,GAAG,GAAA2E,KAAA,CAAH3E,GAAG;IACtB,IAAM4E,OAAO,GAAGnD,CAAC,KAAK,CAAC;IACvB,IAAMoD,MAAM,GAAGpD,CAAC,KAAK9B,KAAK,CAAC+B,MAAM,GAAG,CAAC;IAErC,oBACEjE,KAAA,CAAAkG,aAAA,CAACmB,IAAI;MACHf,EAAE,EAAC,IAAI;MACPgB,GAAG,EAAEtD,CAAE;MACPzB,GAAG,EAAEA,GAAW;MAChBgF,EAAE,EAAEJ,OAAO,GAAG9D,MAAM,GAAGmE,SAAU;MACjCC,EAAE,EAAE,CAACL,MAAM,GAAGtG,uBAAuB,GAAGuC,MAAO;MAC/CqE,KAAK,EAAE;QAAEC,eAAe,EAAE/F;MAAK;IAAE,GAEhCU,KAAK,CACD;EAEX,CAAC,CAAC,CACG,CACE,CACD,EAEXZ,YAAY,iBAAI1B,KAAA,CAAAkG,aAAA,CAAC9E,cAAc;IAACiD,QAAQ,EAAE5B,WAAW,CAACmB;EAAQ,EAAG,CACxD;AAEhB,CAAC;AA7LYvC,KAAoD,CAAAuG,WAAA;AA+LjE,IAAMzB,SAAS,GAAG1F,MAAM,CAACG,GAAG,CAAC,CAAAiH,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,gIAe5B;AAED,IAAMzB,GAAG,GAAG5F,MAAM,CAACG,GAAG,CAAC,CAAAiH,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,6EAOtB;AAED,IAAMhB,QAAQ,GAAGrG,MAAM,CAACG,GAAG,CAAC,CAAAiH,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,kKASxBnH,wBAAwB,CAC3B;AAED,IAAMoG,IAAI,GAAGtG,MAAM,CAACG,GAAG,CAAC,CAAAiH,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,mIAUvB;AAED,IAAMT,IAAI,GAAG5G,MAAM,CAACG,GAAG,CAAC,CAAAiH,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,2BAEvB;AAED,IAAMnB,IAAI,GAAGlG,MAAM,CAACS,SAAS,CAAC,CAAA2G,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,uGAS7B;AAED,IAAMtB,QAAQ,GAAG/F,MAAM,CAACU,aAAa,CAAC,CAAA0G,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,sGASrC"}

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 } from "../Clickable";
+import { Clickable, ClickableProps } 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","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"}
+{"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"}

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 } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { Clickable } from "../Clickable";
 import { useClickScroll } from "./useClickScroll";
 import { useDragScroll } from "./useDragScroll";

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

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

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

@@ -9,8 +9,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { Children, isValidElement, useState } from "react";
-import { Clickable, splitClickableProps } from "../Clickable";
-import { Text } from "../Text";
+import { Clickable, ClickableProps, splitClickableProps } from "../Clickable";
+import { Text, TextProps } from "../Text";
 export var INITIAL_ITEMS_TO_SHOW = 6;
 export var ShowMore = function ShowMore(_ref) {
   var _ref$initial = _ref.initial,

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
 import styled from "styled-components";
-import { Clickable } from "../Clickable";
+import { Clickable, ClickableProps } from "../Clickable";
 import { Text } from "../Text";
 import { visuallyHiddenMixin } from "../VisuallyHidden";
 var Container = styled(Clickable).withConfig({

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

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

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

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
-import { Box } from "../../elements/Box";
+import { Box, BoxProps } from "../../elements/Box";
 /**
  * Used to inject space where it's needed.
  */

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

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

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

@@ -10,8 +10,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useEffect, useState } from "react";
 import styled, { keyframes } from "styled-components";
-import { variant } from "styled-system";
-import { Box } from "../Box";
+import { ResponsiveValue, variant } from "styled-system";
+import { Box, BoxProps } from "../Box";
 var SPINNER_VARIANTS = {
   small: {
     width: 12.5,

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

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

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

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