@artsy/palette 37.3.4 → 38.0.0-canary.1357.29988.0

package/dist/elements/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_helpers","_utils","_usePortal2","_Box","_reactFocusOn","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Dropdown","_ref","_ref$placement","placement","_ref$visible","visible","_visible","keepInDOM","children","_ref$offset","offset","dropdown","openDropdownByClick","rest","_useState","useState","_useState2","setVisible","useEffect","timeoutRef","useRef","onVisible","current","clearTimeout","setTimeout","onHide","activeRef","onToggleVisibility","_usePosition","usePosition","position","active","anchorRef","panelRef","tooltipRef","isFlipped","state","handleKeyDown","event","handleKeyUp","document","activeElement","contains","handleClick","tagName","toLowerCase","isClosableElement","element","closest","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","_useState3","_useState4","transition","setTransition","translation","useMemo","padding","anchorProps","onClick","onMouseEnter","onMouseLeave","_usePortal","usePortal","createPortal","createElement","Fragment","Container","tabIndex","ref","zIndex","display","style","visibility","Panel","bg","border","borderColor","opacity","transform","FocusOn","noIsolation","enabled","onClickOutside","exports","styled","Box","withConfig","displayName","componentId","FLAT_SHADOW"],"sources":["../../../src/elements/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport { Position, usePosition } from \"../../utils\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Box, BoxProps } from \"../Box\"\nimport { FocusOn } from \"react-focus-on\"\n\nexport interface DropdownActions {\n  /** Call to show dropdown */\n  onVisible(): void\n  /** Call to hide dropdown */\n  onHide(): void\n  /** Manipulate visible directly */\n  setVisible(value: boolean): void\n  /** Pass ref to element you want the dropdown to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n  /** Spread props on element you want the dropdown to be anchored to */\n  anchorProps: React.HTMLAttributes<HTMLElement>\n  /** Whether or not the dropdown is visible */\n  visible: boolean\n}\n\nexport interface DropdownProps extends BoxProps {\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  dropdown:\n    | React.ReactNode\n    | ((\n        dropdownActions: Pick<\n          DropdownActions,\n          \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n        >\n      ) => void)\n  /** Distance in pixels from anchor */\n  offset?: number\n  /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n  keepInDOM?: boolean\n  openDropdownByClick?: boolean\n  children: (dropdownActions: DropdownActions) => JSX.Element\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown: React.FC<DropdownProps> = ({\n  placement = \"top\",\n  visible: _visible = false,\n  keepInDOM,\n  children,\n  offset = 10,\n  dropdown,\n  openDropdownByClick,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const onVisible = () => {\n    timeoutRef.current && clearTimeout(timeoutRef.current)\n    timeoutRef.current = setTimeout(() => {\n      setVisible(true)\n    }, 50)\n  }\n\n  const onHide = () => {\n    timeoutRef.current && clearTimeout(timeoutRef.current)\n    timeoutRef.current = setTimeout(() => {\n      if (activeRef.current) return\n      setVisible(false)\n    }, 150)\n  }\n\n  const onToggleVisibility = () => {\n    if (visible) {\n      return onHide()\n    }\n\n    onVisible()\n  }\n\n  const {\n    anchorRef,\n    tooltipRef: panelRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 0,\n    active: visible,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    // Close dropdown when focus leaves element\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (!panelRef.current) return\n\n      if (\n        event.key === \"Tab\" &&\n        !(\n          panelRef.current === document.activeElement ||\n          panelRef.current.contains(document.activeElement)\n        )\n      ) {\n        onHide()\n      }\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (!panelRef.current || !openDropdownByClick) return\n      const target = event.target as Element\n      const tagName = target.tagName.toLowerCase()\n      let isClosableElement = tagName === \"a\"\n      let element: Element | null = target\n\n      // Find parent link element\n      if (!isClosableElement) {\n        element = target.closest(\"a\")\n        isClosableElement = !!element\n      }\n\n      if (isClosableElement && element && panelRef.current.contains(element)) {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    document.addEventListener(\"keyup\", handleKeyUp)\n    document.addEventListener(\"click\", handleClick)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n      document.removeEventListener(\"keyup\", handleKeyUp)\n      document.removeEventListener(\"click\", handleClick)\n    }\n  }, [panelRef, openDropdownByClick])\n\n  const activeRef = useRef(false)\n\n  const handleMouseEnter = () => {\n    activeRef.current = true\n  }\n\n  const handleMouseLeave = () => {\n    activeRef.current = false\n    onHide()\n  }\n\n  const [transition, setTransition] = useState(false)\n\n  // Wait for next tick so that animation runs\n  useEffect(() => {\n    setTimeout(() => {\n      setTransition(visible)\n    }, 0)\n  }, [visible])\n\n  const translation = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return `translateY(10px)`\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return `translateY(-10px)`\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return `translateX(10px)`\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return `translateX(-10px)`\n    }\n  }, [placement])\n\n  // Fills offset gap between anchor and panel to prevent mouseout\n  const padding = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n    }\n  }, [placement, isFlipped, offset])\n\n  const anchorProps: React.HTMLAttributes<HTMLElement> = {\n    \"aria-expanded\": visible,\n    \"aria-haspopup\": true,\n    ...(openDropdownByClick\n      ? {\n          onClick: onToggleVisibility,\n        }\n      : {\n          onMouseEnter: onVisible,\n          onMouseLeave: onHide,\n          onClick: onVisible,\n        }),\n  }\n\n  const { createPortal } = usePortal()\n\n  return (\n    <>\n      {children({\n        anchorRef: anchorRef as any,\n        anchorProps,\n        onVisible,\n        onHide,\n        setVisible,\n        visible,\n      })}\n\n      {(visible || keepInDOM) &&\n        createPortal(\n          <Container\n            aria-label=\"Press escape to close\"\n            tabIndex={0}\n            ref={panelRef as any}\n            zIndex={1}\n            display=\"inline-block\"\n            placement={placement}\n            style={{\n              ...(keepInDOM\n                ? { visibility: visible ? \"visible\" : \"hidden\" }\n                : {}),\n            }}\n            {...(openDropdownByClick\n              ? {}\n              : {\n                  onMouseEnter: handleMouseEnter,\n                  onMouseLeave: handleMouseLeave,\n                })}\n            {...padding}\n            {...rest}\n          >\n            <Panel\n              bg=\"white100\"\n              border=\"1px solid\"\n              borderColor=\"black10\"\n              style={\n                transition\n                  ? // In\n                    { opacity: 1, transform: \"translate(0)\" }\n                  : // Out\n                    {\n                      opacity: 0,\n                      transform: translation,\n                    }\n              }\n            >\n              <FocusOn noIsolation enabled={visible} onClickOutside={onHide}>\n                {typeof dropdown === \"function\"\n                  ? dropdown({ onVisible, onHide, setVisible, visible })\n                  : dropdown}\n              </FocusOn>\n            </Panel>\n          </Container>\n        )}\n    </>\n  )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n  position: fixed;\n  text-align: left;\n  outline: 0;\n`\n\nconst Panel = styled(Box)`\n  transition: opacity 250ms ease-out, transform 250ms ease-out;\n  box-shadow: ${FLAT_SHADOW};\n`\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_utils","_usePortal2","_Box","_reactFocusOn","_themeGet","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Dropdown","_ref","_ref$placement","placement","_ref$visible","visible","_visible","keepInDOM","children","_ref$offset","offset","dropdown","openDropdownByClick","rest","_useState","useState","_useState2","setVisible","useEffect","timeoutRef","useRef","onVisible","current","clearTimeout","setTimeout","onHide","activeRef","onToggleVisibility","_usePosition","usePosition","position","active","anchorRef","panelRef","tooltipRef","isFlipped","state","handleKeyDown","event","handleKeyUp","document","activeElement","contains","handleClick","tagName","toLowerCase","isClosableElement","element","closest","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","_useState3","_useState4","transition","setTransition","translation","useMemo","padding","anchorProps","onClick","onMouseEnter","onMouseLeave","_usePortal","usePortal","createPortal","createElement","Fragment","Container","tabIndex","ref","zIndex","display","style","visibility","Panel","bg","border","borderColor","opacity","transform","FocusOn","noIsolation","enabled","onClickOutside","exports","styled","Box","withConfig","displayName","componentId","themeGet"],"sources":["../../../src/elements/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Position, usePosition } from \"../../utils\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Box, BoxProps } from \"../Box\"\nimport { FocusOn } from \"react-focus-on\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface DropdownActions {\n  /** Call to show dropdown */\n  onVisible(): void\n  /** Call to hide dropdown */\n  onHide(): void\n  /** Manipulate visible directly */\n  setVisible(value: boolean): void\n  /** Pass ref to element you want the dropdown to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n  /** Spread props on element you want the dropdown to be anchored to */\n  anchorProps: React.HTMLAttributes<HTMLElement>\n  /** Whether or not the dropdown is visible */\n  visible: boolean\n}\n\nexport interface DropdownProps extends BoxProps {\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  dropdown:\n    | React.ReactNode\n    | ((\n        dropdownActions: Pick<\n          DropdownActions,\n          \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n        >\n      ) => void)\n  /** Distance in pixels from anchor */\n  offset?: number\n  /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n  keepInDOM?: boolean\n  openDropdownByClick?: boolean\n  children: (dropdownActions: DropdownActions) => JSX.Element\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown: React.FC<DropdownProps> = ({\n  placement = \"top\",\n  visible: _visible = false,\n  keepInDOM,\n  children,\n  offset = 10,\n  dropdown,\n  openDropdownByClick,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const onVisible = () => {\n    timeoutRef.current && clearTimeout(timeoutRef.current)\n    timeoutRef.current = setTimeout(() => {\n      setVisible(true)\n    }, 50)\n  }\n\n  const onHide = () => {\n    timeoutRef.current && clearTimeout(timeoutRef.current)\n    timeoutRef.current = setTimeout(() => {\n      if (activeRef.current) return\n      setVisible(false)\n    }, 150)\n  }\n\n  const onToggleVisibility = () => {\n    if (visible) {\n      return onHide()\n    }\n\n    onVisible()\n  }\n\n  const {\n    anchorRef,\n    tooltipRef: panelRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 0,\n    active: visible,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    // Close dropdown when focus leaves element\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (!panelRef.current) return\n\n      if (\n        event.key === \"Tab\" &&\n        !(\n          panelRef.current === document.activeElement ||\n          panelRef.current.contains(document.activeElement)\n        )\n      ) {\n        onHide()\n      }\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (!panelRef.current || !openDropdownByClick) return\n      const target = event.target as Element\n      const tagName = target.tagName.toLowerCase()\n      let isClosableElement = tagName === \"a\"\n      let element: Element | null = target\n\n      // Find parent link element\n      if (!isClosableElement) {\n        element = target.closest(\"a\")\n        isClosableElement = !!element\n      }\n\n      if (isClosableElement && element && panelRef.current.contains(element)) {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    document.addEventListener(\"keyup\", handleKeyUp)\n    document.addEventListener(\"click\", handleClick)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n      document.removeEventListener(\"keyup\", handleKeyUp)\n      document.removeEventListener(\"click\", handleClick)\n    }\n  }, [panelRef, openDropdownByClick])\n\n  const activeRef = useRef(false)\n\n  const handleMouseEnter = () => {\n    activeRef.current = true\n  }\n\n  const handleMouseLeave = () => {\n    activeRef.current = false\n    onHide()\n  }\n\n  const [transition, setTransition] = useState(false)\n\n  // Wait for next tick so that animation runs\n  useEffect(() => {\n    setTimeout(() => {\n      setTransition(visible)\n    }, 0)\n  }, [visible])\n\n  const translation = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return `translateY(10px)`\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return `translateY(-10px)`\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return `translateX(10px)`\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return `translateX(-10px)`\n    }\n  }, [placement])\n\n  // Fills offset gap between anchor and panel to prevent mouseout\n  const padding = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n    }\n  }, [placement, isFlipped, offset])\n\n  const anchorProps: React.HTMLAttributes<HTMLElement> = {\n    \"aria-expanded\": visible,\n    \"aria-haspopup\": true,\n    ...(openDropdownByClick\n      ? {\n          onClick: onToggleVisibility,\n        }\n      : {\n          onMouseEnter: onVisible,\n          onMouseLeave: onHide,\n          onClick: onVisible,\n        }),\n  }\n\n  const { createPortal } = usePortal()\n\n  return (\n    <>\n      {children({\n        anchorRef: anchorRef as any,\n        anchorProps,\n        onVisible,\n        onHide,\n        setVisible,\n        visible,\n      })}\n\n      {(visible || keepInDOM) &&\n        createPortal(\n          <Container\n            aria-label=\"Press escape to close\"\n            tabIndex={0}\n            ref={panelRef as any}\n            zIndex={1}\n            display=\"inline-block\"\n            placement={placement}\n            style={{\n              ...(keepInDOM\n                ? { visibility: visible ? \"visible\" : \"hidden\" }\n                : {}),\n            }}\n            {...(openDropdownByClick\n              ? {}\n              : {\n                  onMouseEnter: handleMouseEnter,\n                  onMouseLeave: handleMouseLeave,\n                })}\n            {...padding}\n            {...rest}\n          >\n            <Panel\n              bg=\"white100\"\n              border=\"1px solid\"\n              borderColor=\"black10\"\n              style={\n                transition\n                  ? // In\n                    { opacity: 1, transform: \"translate(0)\" }\n                  : // Out\n                    {\n                      opacity: 0,\n                      transform: translation,\n                    }\n              }\n            >\n              <FocusOn noIsolation enabled={visible} onClickOutside={onHide}>\n                {typeof dropdown === \"function\"\n                  ? dropdown({ onVisible, onHide, setVisible, visible })\n                  : dropdown}\n              </FocusOn>\n            </Panel>\n          </Container>\n        )}\n    </>\n  )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n  position: fixed;\n  text-align: left;\n  outline: 0;\n`\n\nconst Panel = styled(Box)`\n  transition: opacity 250ms ease-out, transform 250ms ease-out;\n  box-shadow: ${themeGet(\"colors.flatShadow\")};\n`\n"],"mappings":"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"}

package/dist/elements/HorizontalOverflow/HorizontalOverflow.js

@@ -31,8 +31,11 @@ var splitRailProps = (0, _splitProps.splitProps)((0, _styledSystem.compose)(_sty
 var Overlay = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "HorizontalOverflow__Overlay",
   componentId: "yzjfm6-0"
-})(["position:relative;&::after{display:block;content:\"\";position:absolute;top:0;right:0;bottom:0;width:", ";z-index:1;pointer-events:none;background:linear-gradient( to right,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100% );transition:opacity 250ms;opacity:", ";}"], (0, _themeGet.themeGet)("space.6"), function (_ref2) {
-  var atEnd = _ref2.atEnd;
+})(["position:relative;&::after{display:block;content:\"\";position:absolute;top:0;right:0;bottom:0;width:", ";z-index:1;pointer-events:none;", " transition:opacity 250ms;opacity:", ";}"], (0, _themeGet.themeGet)("space.6"), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.id === "v3" ? "background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);" : "background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);";
+}, function (_ref3) {
+  var atEnd = _ref3.atEnd;
   return atEnd ? 0 : 1;
 });
 var Viewport = (0, _styledComponents.default)(_Box.Box).withConfig({
@@ -43,9 +46,9 @@ var Rail = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "HorizontalOverflow__Rail",
   componentId: "yzjfm6-2"
 })(["white-space:nowrap;min-width:100%;height:100%;"]);
-var HorizontalOverflow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, forwardedRef) {
-  var children = _ref3.children,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+var HorizontalOverflow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, forwardedRef) {
+  var children = _ref4.children,
+    rest = _objectWithoutProperties(_ref4, _excluded);
   var ref = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     updateAtEnd();

package/dist/elements/HorizontalOverflow/HorizontalOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalOverflow.js","names":["_composeReactRefs","_interopRequireDefault","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_visuallyDisableScrollbar","_splitProps","_Box","_excluded","_excluded2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","splitRailProps","splitProps","compose","padding","justifyContent","border","Overlay","styled","Box","withConfig","displayName","componentId","themeGet","_ref2","atEnd","Viewport","visuallyDisableScrollbar","Rail","HorizontalOverflow","forwardRef","_ref3","forwardedRef","children","rest","ref","useRef","useEffect","updateAtEnd","window","addEventListener","removeEventListener","_splitRailProps","_splitRailProps2","railProps","_splitRailProps2$","_ref","boxProps","_useState","useState","_useState2","setAtEnd","current","_ref$current","scrollLeft","scrollWidth","clientWidth","Math","abs","createElement","composeRefs","onScroll","display","verticalAlign","exports"],"sources":["../../../src/elements/HorizontalOverflow/HorizontalOverflow.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  border,\n  BorderProps,\n  compose,\n  justifyContent,\n  JustifyContentProps,\n  padding,\n  PaddingProps,\n} from \"styled-system\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst splitRailProps = splitProps<\n  PaddingProps & JustifyContentProps & BorderProps\n>(compose(padding, justifyContent, border))\n\nconst Overlay = styled(Box)<{ atEnd: boolean }>`\n  position: relative;\n\n  /* Fade-out gradient */\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: ${themeGet(\"space.6\")};\n    z-index: 1;\n    pointer-events: none;\n    background: linear-gradient(\n      to right,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 1) 100%\n    );\n\n    /* Hide when scrolled all the way over */\n    transition: opacity 250ms;\n    opacity: ${({ atEnd }) => (atEnd ? 0 : 1)};\n  }\n`\n\nconst Viewport = styled(Box)`\n  height: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  ${visuallyDisableScrollbar}\n`\n\nconst Rail = styled(Box)`\n  white-space: nowrap;\n  min-width: 100%;\n  height: 100%;\n`\n\nexport type HorizontalOverflowProps = BoxProps & { children: React.ReactNode }\n\nexport const HorizontalOverflow: React.ForwardRefExoticComponent<\n  HorizontalOverflowProps & React.RefAttributes<HTMLDivElement>\n> = forwardRef(({ children, ...rest }, forwardedRef) => {\n  const ref = useRef<HTMLDivElement | null>()\n\n  useEffect(() => {\n    updateAtEnd()\n    window.addEventListener(\"resize\", updateAtEnd)\n    return () => {\n      window.removeEventListener(\"resize\", updateAtEnd)\n    }\n  }, [])\n\n  const [railProps, { ref: _ref, ...boxProps }] = splitRailProps(rest)\n\n  const [atEnd, setAtEnd] = useState(false)\n\n  const updateAtEnd = () => {\n    if (!ref.current) return\n\n    const {\n      current: { scrollLeft, scrollWidth, clientWidth },\n    } = ref\n\n    // Check if we're at the end of the scroll (within 1px)\n    if (Math.abs(scrollLeft + clientWidth - scrollWidth) <= 1) {\n      setAtEnd(true)\n      return\n    }\n\n    setAtEnd(false)\n  }\n\n  return (\n    <Overlay atEnd={atEnd} {...boxProps}>\n      <Viewport\n        ref={composeRefs(ref, forwardedRef) as any}\n        onScroll={updateAtEnd}\n      >\n        <Rail display=\"inline-flex\" verticalAlign=\"top\" {...railProps}>\n          {children}\n        </Rail>\n      </Viewport>\n    </Overlay>\n  )\n})\n\nHorizontalOverflow.displayName = \"HorizontalOverflow\"\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalOverflow.js","names":["_composeReactRefs","_interopRequireDefault","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_visuallyDisableScrollbar","_splitProps","_Box","_excluded","_excluded2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","splitRailProps","splitProps","compose","padding","justifyContent","border","Overlay","styled","Box","withConfig","displayName","componentId","themeGet","_ref2","theme","id","_ref3","atEnd","Viewport","visuallyDisableScrollbar","Rail","HorizontalOverflow","forwardRef","_ref4","forwardedRef","children","rest","ref","useRef","useEffect","updateAtEnd","window","addEventListener","removeEventListener","_splitRailProps","_splitRailProps2","railProps","_splitRailProps2$","_ref","boxProps","_useState","useState","_useState2","setAtEnd","current","_ref$current","scrollLeft","scrollWidth","clientWidth","Math","abs","createElement","composeRefs","onScroll","display","verticalAlign","exports"],"sources":["../../../src/elements/HorizontalOverflow/HorizontalOverflow.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  border,\n  BorderProps,\n  compose,\n  justifyContent,\n  JustifyContentProps,\n  padding,\n  PaddingProps,\n} from \"styled-system\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst splitRailProps = splitProps<\n  PaddingProps & JustifyContentProps & BorderProps\n>(compose(padding, justifyContent, border))\n\nconst Overlay = styled(Box)<{ atEnd: boolean }>`\n  position: relative;\n\n  /* Fade-out gradient */\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: ${themeGet(\"space.6\")};\n    z-index: 1;\n    pointer-events: none;\n    ${({ theme }) => {\n      return theme.id === \"v3\"\n        ? \"background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);\"\n        : \"background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);\"\n    }}\n    /* Hide when scrolled all the way over */\n    transition: opacity 250ms;\n    opacity: ${({ atEnd }) => (atEnd ? 0 : 1)};\n  }\n`\n\nconst Viewport = styled(Box)`\n  height: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  ${visuallyDisableScrollbar}\n`\n\nconst Rail = styled(Box)`\n  white-space: nowrap;\n  min-width: 100%;\n  height: 100%;\n`\n\nexport type HorizontalOverflowProps = BoxProps & { children: React.ReactNode }\n\nexport const HorizontalOverflow: React.ForwardRefExoticComponent<\n  HorizontalOverflowProps & React.RefAttributes<HTMLDivElement>\n> = forwardRef(({ children, ...rest }, forwardedRef) => {\n  const ref = useRef<HTMLDivElement | null>()\n\n  useEffect(() => {\n    updateAtEnd()\n    window.addEventListener(\"resize\", updateAtEnd)\n    return () => {\n      window.removeEventListener(\"resize\", updateAtEnd)\n    }\n  }, [])\n\n  const [railProps, { ref: _ref, ...boxProps }] = splitRailProps(rest)\n\n  const [atEnd, setAtEnd] = useState(false)\n\n  const updateAtEnd = () => {\n    if (!ref.current) return\n\n    const {\n      current: { scrollLeft, scrollWidth, clientWidth },\n    } = ref\n\n    // Check if we're at the end of the scroll (within 1px)\n    if (Math.abs(scrollLeft + clientWidth - scrollWidth) <= 1) {\n      setAtEnd(true)\n      return\n    }\n\n    setAtEnd(false)\n  }\n\n  return (\n    <Overlay atEnd={atEnd} {...boxProps}>\n      <Viewport\n        ref={composeRefs(ref, forwardedRef) as any}\n        onScroll={updateAtEnd}\n      >\n        <Rail display=\"inline-flex\" verticalAlign=\"top\" {...railProps}>\n          {children}\n        </Rail>\n      </Viewport>\n    </Overlay>\n  )\n})\n\nHorizontalOverflow.displayName = \"HorizontalOverflow\"\n"],"mappings":"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"}

package/dist/elements/Input/tokens.js

@@ -7,7 +7,7 @@ exports.INPUT_STATES = void 0;
 var _themeGet = require("@styled-system/theme-get");
 var _styledComponents = require("styled-components");
 var INPUT_STATES = {
-  default: (0, _styledComponents.css)(["font-size:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize")),
+  default: (0, _styledComponents.css)(["background-color:", ";font-size:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize")),
   focus: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";opacity:1;}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
   hover: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black100")),
   active: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),

package/dist/elements/Input/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","INPUT_STATES","default","css","themeGet","focus","hover","active","completed","disabled","error","exports"],"sources":["../../../src/elements/Input/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const INPUT_STATES: Record<State, any> = {\n  default: css`\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.black60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.black100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.blue60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.black30\")};\n    border-color: ${themeGet(\"colors.black30\")};\n    background-color: transparent;\n    /* For Safari: */\n    -webkit-text-fill-color: ${themeGet(\"colors.black30\")};\n    /* For iOS */\n    opacity: 1;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.black30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.black30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,IAAME,YAAgC,GAAG;EAC9CC,OAAO,MAAEC,qBAAG,mHACG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACtB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,CAE5D;EACDC,KAAK,MAAEF,qBAAG,qLACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAK1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAQpD;EACDE,KAAK,MAAEH,qBAAG,qFACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EAI3B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,CAEvC;EACDG,MAAM,MAAEJ,qBAAG,2KACA,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EAI3B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAQpD;EACDI,SAAS,MAAEL,qBAAG,iJACH,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAQpD;EACDK,QAAQ,MAAEN,qBAAG,iSACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAGf,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAK1C,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASxC,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDM,KAAK,MAAEP,qBAAG,sIACQ,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC;AASvD,CAAC;AAAAO,OAAA,CAAAV,YAAA,GAAAA,YAAA"}
+{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","INPUT_STATES","default","css","themeGet","focus","hover","active","completed","disabled","error","exports"],"sources":["../../../src/elements/Input/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const INPUT_STATES: Record<State, any> = {\n  default: css`\n    background-color: ${themeGet(\"colors.white100\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.black60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.black100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.blue60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.black30\")};\n    border-color: ${themeGet(\"colors.black30\")};\n    background-color: transparent;\n    /* For Safari: */\n    -webkit-text-fill-color: ${themeGet(\"colors.black30\")};\n    /* For iOS */\n    opacity: 1;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.black30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.black30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,IAAME,YAAgC,GAAG;EAC9CC,OAAO,MAAEC,qBAAG,yIACU,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EAClC,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACtB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,CAE5D;EACDC,KAAK,MAAEF,qBAAG,qLACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAK1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAQpD;EACDE,KAAK,MAAEH,qBAAG,qFACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EAI3B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,CAEvC;EACDG,MAAM,MAAEJ,qBAAG,2KACA,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EAI3B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAQpD;EACDI,SAAS,MAAEL,qBAAG,iJACH,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAQpD;EACDK,QAAQ,MAAEN,qBAAG,iSACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAGf,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAK1C,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASxC,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDM,KAAK,MAAEP,qBAAG,sIACQ,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC;AASvD,CAAC;AAAAO,OAAA,CAAAV,YAAA,GAAAA,YAAA"}

package/dist/elements/ModalDialog/ModalDialogContent.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ModalDialogContent = exports.ModalClose = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Clickable = require("../Clickable");
-var _shadow = require("../../helpers/shadow");
 var _Box = require("../Box");
 var _Flex = require("../Flex");
 var _Text = require("../Text");
@@ -16,6 +15,7 @@ var _useSentinelVisibility = require("../../utils/useSentinelVisibility");
 var _Spacer = require("../Spacer");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _themeGet = require("@styled-system/theme-get");
+var _Theme = require("../../Theme");
 var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "rightPanel", "title", "header"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -37,11 +37,13 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
   var _useSentinelVisibilit2 = (0, _useSentinelVisibility.useSentinelVisibility)(),
     bottomSentinel = _useSentinelVisibilit2.sentinel,
     isAtBottom = _useSentinelVisibilit2.isSentinelVisible;
+  var _useTheme = (0, _Theme.useTheme)(),
+    theme = _useTheme.theme;
   return /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
     bg: "white100",
     m: 2,
     style: {
-      boxShadow: _shadow.DROP_SHADOW
+      boxShadow: theme.colors.dropShadow
     }
   }, rest), leftPanel, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     flexDirection: "column",
@@ -52,7 +54,7 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
     zIndex: 1,
     style: {
       transition: "box-shadow 250ms",
-      boxShadow: isAtTop ? _shadow.DROP_SHADOW : undefined
+      boxShadow: isAtTop ? theme.colors.dropShadow : undefined
     }
   }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     alignItems: "flex-start",
@@ -86,7 +88,7 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
     p: 2,
     style: {
       transition: "box-shadow 250ms",
-      boxShadow: isAtBottom ? _shadow.DROP_SHADOW : undefined
+      boxShadow: isAtBottom ? theme.colors.dropShadow : undefined
     }
   }, footer)), rightPanel);
 };

package/dist/elements/ModalDialog/ModalDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialogContent.js","names":["_react","_interopRequireDefault","require","_Clickable","_shadow","_Box","_Flex","_Text","_CloseIcon","_ArtsyLogoIcon","_useSentinelVisibility","_Spacer","_styledComponents","_themeGet","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_useSentinelVisibilit","useSentinelVisibility","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","createElement","Flex","bg","m","style","boxShadow","DROP_SHADOW","flexDirection","overflow","width","zIndex","transition","undefined","alignItems","justifyContent","Box","display","height","Spacer","y","Text","variant","lineClamp","hyphenate","ModalClose","onClick","px","pb","flex","WebkitOverflowScrolling","p","exports","displayName","props","Close","ml","fill","styled","Clickable","withConfig","componentId","themeGet"],"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { DROP_SHADOW } from \"../../helpers/shadow\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: string\n  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  return (\n    <Flex bg=\"white100\" m={2} style={{ boxShadow: DROP_SHADOW }} {...rest}>\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? DROP_SHADOW : undefined,\n          }}\n        >\n          <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n            {(title || hasLogo) && (\n              <Box m={2}>\n                {hasLogo && (\n                  <ArtsyLogoIcon display=\"block\" width={75} height={26} />\n                )}\n\n                {hasLogo && title && <Spacer y={2} />}\n\n                {title && (\n                  <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                    {title}\n                  </Text>\n                )}\n              </Box>\n            )}\n\n            <ModalClose onClick={onClose} />\n          </Flex>\n\n          {header && (\n            <Box px={2} pb={2}>\n              {header}\n            </Box>\n          )}\n        </Flex>\n\n        <Box\n          px={2}\n          pb={2}\n          flex={1}\n          overflow=\"auto\"\n          style={{ WebkitOverflowScrolling: \"touch\" }}\n        >\n          {topSentinel}\n          {children}\n          {bottomSentinel}\n        </Box>\n\n        {footer && (\n          <Box\n            p={2}\n            style={{\n              transition: \"box-shadow 250ms\",\n              boxShadow: isAtBottom ? DROP_SHADOW : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nexport type ModalCloseProps = ClickableProps\n\nexport const ModalClose: FC<ModalCloseProps> = (props) => {\n  return (\n    <Close p={2} ml=\"auto\" aria-label=\"Close\" {...props}>\n      <CloseIcon fill=\"currentColor\" display=\"block\" />\n    </Close>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.black100\")};\n\n  &:focus,\n  &.focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.black60\")};\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"ModalDialogContent.js","names":["_react","_interopRequireDefault","require","_Clickable","_Box","_Flex","_Text","_CloseIcon","_ArtsyLogoIcon","_useSentinelVisibility","_Spacer","_styledComponents","_themeGet","_Theme","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_useSentinelVisibilit","useSentinelVisibility","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","_useTheme","useTheme","theme","createElement","Flex","bg","m","style","boxShadow","colors","dropShadow","flexDirection","overflow","width","zIndex","transition","undefined","alignItems","justifyContent","Box","display","height","Spacer","y","Text","variant","lineClamp","hyphenate","ModalClose","onClick","px","pb","flex","WebkitOverflowScrolling","p","exports","displayName","props","Close","ml","fill","styled","Clickable","withConfig","componentId","themeGet"],"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: string\n  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  const { theme } = useTheme()\n\n  return (\n    <Flex\n      bg=\"white100\"\n      m={2}\n      style={{ boxShadow: theme.colors.dropShadow }}\n      {...rest}\n    >\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? theme.colors.dropShadow : undefined,\n          }}\n        >\n          <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n            {(title || hasLogo) && (\n              <Box m={2}>\n                {hasLogo && (\n                  <ArtsyLogoIcon display=\"block\" width={75} height={26} />\n                )}\n\n                {hasLogo && title && <Spacer y={2} />}\n\n                {title && (\n                  <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                    {title}\n                  </Text>\n                )}\n              </Box>\n            )}\n\n            <ModalClose onClick={onClose} />\n          </Flex>\n\n          {header && (\n            <Box px={2} pb={2}>\n              {header}\n            </Box>\n          )}\n        </Flex>\n\n        <Box\n          px={2}\n          pb={2}\n          flex={1}\n          overflow=\"auto\"\n          style={{ WebkitOverflowScrolling: \"touch\" }}\n        >\n          {topSentinel}\n          {children}\n          {bottomSentinel}\n        </Box>\n\n        {footer && (\n          <Box\n            p={2}\n            style={{\n              transition: \"box-shadow 250ms\",\n              boxShadow: isAtBottom ? theme.colors.dropShadow : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nexport type ModalCloseProps = ClickableProps\n\nexport const ModalClose: FC<ModalCloseProps> = (props) => {\n  return (\n    <Close p={2} ml=\"auto\" aria-label=\"Close\" {...props}>\n      <CloseIcon fill=\"currentColor\" display=\"block\" />\n    </Close>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.black100\")};\n\n  &:focus,\n  &.focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.black60\")};\n  }\n`\n"],"mappings":"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"}

package/dist/elements/MultiSelect/MultiSelect.js

@@ -170,7 +170,7 @@ MultiSelect.displayName = "MultiSelect";
 var Options = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "MultiSelect__Options",
   componentId: "amrkn0-0"
-})(["position:fixed;z-index:1;max-height:300px;text-align:left;box-shadow:", ";overflow-y:auto;-webkit-overflow-scrolling:touch;"], _helpers.DROP_SHADOW);
+})(["position:fixed;z-index:1;max-height:300px;text-align:left;box-shadow:", ";overflow-y:auto;-webkit-overflow-scrolling:touch;"], (0, _themeGet.themeGet)("colors.dropShadow"));
 var Container = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
   displayName: "MultiSelect__Container",
   componentId: "amrkn0-1"

package/dist/elements/MultiSelect/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_utils","_useUpdateEffect","_useWidthOf2","_Box","_Checkbox","_Select","_Text","_Tooltip","_Clickable","_RequiredField","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","MultiSelect","_ref","complete","description","disabled","error","focus","hover","_ref$name","options","required","title","onSelect","rest","_useState","useState","_useState2","visible","setVisible","_useState3","_useState4","selection","setSelection","useUpdateEffect","tooltipRef","current","anchorRef","onVisible","onHide","useEffect","handleKeydown","event","document","addEventListener","removeEventListener","_usePosition","usePosition","position","offset","active","_useWidthOf","useWidthOf","ref","width","useClickOutside","onClickOutside","when","type","handleSelect","option","selected","prevSelection","nextSelection","concat","filter","_ref2","createElement","Box","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","mt","onClick","lineHeight","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","map","Checkbox","height","px","includes","text","RequiredField","ml","exports","displayName","styled","withConfig","componentId","DROP_SHADOW","Clickable","themeGet","props","css","MULTISELECT_STATES","completed","caretMixin","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { DROP_SHADOW, FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { Clickable } from \"../Clickable\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onSelect?: (selection: Option[]) => void\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<MultiSelectProps> = ({\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onSelect,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n  const [selection, setSelection] = useState<Option[]>([])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const onVisible = () => setVisible(true)\n  const onHide = () => setVisible(false)\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: onHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={onVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1}>\n          {selection.length > 0 ? `${selection.length} selected` : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"white100\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.includes(option)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\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} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${DROP_SHADOW};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.black30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.white100\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n    \n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.white100\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_utils","_useUpdateEffect","_useWidthOf2","_Box","_Checkbox","_Select","_Text","_Tooltip","_Clickable","_RequiredField","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","MultiSelect","_ref","complete","description","disabled","error","focus","hover","_ref$name","options","required","title","onSelect","rest","_useState","useState","_useState2","visible","setVisible","_useState3","_useState4","selection","setSelection","useUpdateEffect","tooltipRef","current","anchorRef","onVisible","onHide","useEffect","handleKeydown","event","document","addEventListener","removeEventListener","_usePosition","usePosition","position","offset","active","_useWidthOf","useWidthOf","ref","width","useClickOutside","onClickOutside","when","type","handleSelect","option","selected","prevSelection","nextSelection","concat","filter","_ref2","createElement","Box","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","mt","onClick","lineHeight","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","map","Checkbox","height","px","includes","text","RequiredField","ml","exports","displayName","styled","withConfig","componentId","themeGet","Clickable","props","css","MULTISELECT_STATES","completed","caretMixin","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { Clickable } from \"../Clickable\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onSelect?: (selection: Option[]) => void\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<MultiSelectProps> = ({\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onSelect,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n  const [selection, setSelection] = useState<Option[]>([])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const onVisible = () => setVisible(true)\n  const onHide = () => setVisible(false)\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: onHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={onVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1}>\n          {selection.length > 0 ? `${selection.length} selected` : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"white100\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.includes(option)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\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} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${themeGet(\"colors.dropShadow\")};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.black30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.white100\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n    \n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.white100\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}

package/dist/elements/PhoneInput/PhoneInput.js

@@ -10,7 +10,6 @@ var _themeGet = require("@styled-system/theme-get");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
-var _helpers = require("../../helpers");
 var _utils = require("../../utils");
 var _Box = require("../Box");
 var _Input = require("../Input");
@@ -298,7 +297,7 @@ var SelectContainer = (0, _styledComponents.default)(_Box.Box).withConfig({
 var SelectDropdown = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "PhoneInput__SelectDropdown",
   componentId: "lj1bt9-2"
-})(["box-shadow:", ";z-index:1;background:", ";"], _helpers.DROP_SHADOW, (0, _themeGet.themeGet)("colors.white100"));
+})(["box-shadow:", ";z-index:1;background:", ";"], (0, _themeGet.themeGet)("colors.dropShadow"), (0, _themeGet.themeGet)("colors.white100"));
 var SelectOptions = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "PhoneInput__SelectOptions",
   componentId: "lj1bt9-3"