@audius/harmony 0.4.0 → 0.4.2

package/dist/components/completion-check/CompletionCheck.js

@@ -8,8 +8,51 @@ import '@emotion/react';
 import '@emotion/css';
 import '../layout/Box/Box.js';
 import { Flex } from '../layout/Flex/Flex.js';
+import '../skeleton/Skeleton.js';
+import '../common/HiddenInput.js';
+import '../radio-group/RadioGroupContext.js';
+import '../text/Text.js';
+import '../input/TextInput/TextInput.js';
+import '../input/TextInput/types.js';
+import '../input/PasswordInput/PasswordInput.js';
+import '../input/TokenAmountInput/TokenAmountInput.js';
 import '../layout/Paper/Paper.js';
+import '../button/Button/Button.js';
+import '../button/PlainButton/PlainButton.js';
+import '../button/FollowButton/FollowButton.js';
+import '../button/IconButton/IconButton.js';
+import '../button/UnstyledButton.js';
+import '../button/FilterButton/FilterButton.js';
+import '../button/FilterButton/FilterButtonOption.js';
 import styles from './CompletionCheck.module.css.js';
+import '../text-link/TextLink.js';
+import '../switch/Switch.js';
+import '@juggle/resize-observer';
+import 'react-merge-refs';
+import 'react-use-measure';
+import '../scrollbar/Scrollbar.js';
+import '../popup/Popup.js';
+import '../popup-menu/PopupMenu.js';
+import '../modal/Modal.js';
+import '../modal/ModalContext.js';
+import 'react-spring/renderprops.cjs';
+import '../modal/ModalHeader.js';
+import '../modal/ModalFooter.js';
+import '../modal/types.js';
+import 'lodash';
+import 'numeral';
+import '../../contexts/MediaContext.js';
+import 'color';
+import 'lottie-react';
+import '../pill/Pill.js';
+import '../select/Select/Select.js';
+import '../checkbox/Checkbox.js';
+import '../hover-card/HoverCard.js';
+import '../../foundations/color/semantic.js';
+import '../../foundations/color/color.js';
+import '../../foundations/theme/theme.js';
+import '../../hooks/useHotKeys.js';
+import '../internal/MenuItem.js';
 
 var CompletionDefault = function () { return (jsx("div", { className: cn(styles.defaultCompletionIcon) })); };
 var CompletionEmpty = function () { return (jsx("div", { className: cn(styles.completionIcon, styles.emptyCompletionIcon) })); };
@@ -21,12 +64,13 @@ var completionComponents = {
     incomplete: CompletionEmpty
 };
 var CompletionCheck = function (props) {
-    var transitions = useTransition(props.value, {
+    var value = props.value, className = props.className;
+    var transitions = useTransition(value, {
         from: { x: 0 },
         enter: { x: 1 },
         leave: { x: 0 }
     });
-    return (jsxs(Flex, __assign({ alignItems: 'center', className: styles.container }, { children: [jsx(CompletionDefault, {}), transitions(function (style, value) {
+    return (jsxs(Flex, __assign({ alignItems: 'center', className: cn(styles.container, className) }, { children: [jsx(CompletionDefault, {}), transitions(function (style, value) {
                 if (completionComponents[value]) {
                     var CompletionIcon = completionComponents[value];
                     return (jsx(CompletionIcon, { iconStyles: {

package/dist/components/completion-check/CompletionCheck.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompletionCheck.js","sources":["../../../src/components/completion-check/CompletionCheck.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\n\nimport { useTransition, animated } from '@react-spring/web'\nimport cn from 'classnames'\n\nimport { IconValidationCheck, IconValidationX } from '~harmony/icons'\n\nimport { Flex } from '../layout'\n\nimport styles from './CompletionCheck.module.css'\nimport type { CompletionCheckProps } from './types'\n\nexport const CompletionDefault = () => (\n  <div className={cn(styles.defaultCompletionIcon)} />\n)\nexport const CompletionEmpty = () => (\n  <div className={cn(styles.completionIcon, styles.emptyCompletionIcon)} />\n)\n\ntype CompletionChangeIconProps = {\n  iconStyles: CSSProperties\n}\n\nexport const CompletionError = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.xIcon)}\n  >\n    {' '}\n    <IconValidationX size='s' />{' '}\n  </animated.div>\n)\nexport const CompletionSuccess = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.checkIcon)}\n  >\n    {' '}\n    <IconValidationCheck size='s' />\n  </animated.div>\n)\n\nconst completionComponents = {\n  complete: CompletionSuccess,\n  error: CompletionError,\n  incomplete: CompletionEmpty\n}\n\nexport const CompletionCheck = (props: CompletionCheckProps) => {\n  const transitions = useTransition(props.value, {\n    from: { x: 0 },\n    enter: { x: 1 },\n    leave: { x: 0 }\n  })\n  return (\n    <Flex alignItems='center' className={styles.container}>\n      <CompletionDefault />\n      {transitions((style, value) => {\n        if (completionComponents[value]) {\n          const CompletionIcon = completionComponents[value]\n          return (\n            <CompletionIcon\n              iconStyles={{\n                opacity: style.x.to({\n                  output: [0.3, 1]\n                }) as any,\n                transform: style.x\n                  .to({\n                    range: [0, 0.75, 1],\n                    output: [0, 1.2, 1]\n                  })\n                  .to((x) => `scale3d(${x}, ${x}, ${x})`) as any\n              }}\n            />\n          )\n        }\n        return null\n      })}\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"CompletionCheck.js","sources":["../../../src/components/completion-check/CompletionCheck.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\n\nimport { useTransition, animated } from '@react-spring/web'\nimport cn from 'classnames'\n\nimport { IconValidationCheck, IconValidationX } from '~harmony/icons'\n\nimport { Flex } from '../layout'\n\nimport styles from './CompletionCheck.module.css'\nimport type { CompletionCheckProps } from './types'\n\nexport const CompletionDefault = () => (\n  <div className={cn(styles.defaultCompletionIcon)} />\n)\nexport const CompletionEmpty = () => (\n  <div className={cn(styles.completionIcon, styles.emptyCompletionIcon)} />\n)\n\ntype CompletionChangeIconProps = {\n  iconStyles: CSSProperties\n}\n\nexport const CompletionError = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.xIcon)}\n  >\n    {' '}\n    <IconValidationX size='s' />{' '}\n  </animated.div>\n)\nexport const CompletionSuccess = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.checkIcon)}\n  >\n    {' '}\n    <IconValidationCheck size='s' />\n  </animated.div>\n)\n\nconst completionComponents = {\n  complete: CompletionSuccess,\n  error: CompletionError,\n  incomplete: CompletionEmpty\n}\n\nexport const CompletionCheck = (props: CompletionCheckProps) => {\n  const { value, className } = props\n  const transitions = useTransition(value, {\n    from: { x: 0 },\n    enter: { x: 1 },\n    leave: { x: 0 }\n  })\n  return (\n    <Flex alignItems='center' className={cn(styles.container, className)}>\n      <CompletionDefault />\n      {transitions((style, value) => {\n        if (completionComponents[value]) {\n          const CompletionIcon = completionComponents[value]\n          return (\n            <CompletionIcon\n              iconStyles={{\n                opacity: style.x.to({\n                  output: [0.3, 1]\n                }) as any,\n                transform: style.x\n                  .to({\n                    range: [0, 0.75, 1],\n                    output: [0, 1.2, 1]\n                  })\n                  .to((x) => `scale3d(${x}, ${x}, ${x})`) as any\n              }}\n            />\n          )\n        }\n        return null\n      })}\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/completion-check/types.d.ts

@@ -1,4 +1,5 @@
 export type CompletionCheckProps = {
     value: 'incomplete' | 'complete' | 'error';
+    className?: string;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/completion-check/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/completion-check/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,CAAA;CAC3C,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/completion-check/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,CAAA;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}

package/dist/components/expandable-nav-item/ExpandableNavItem.js

@@ -8,7 +8,50 @@ import { IconCaretRight } from '../../icons/utilityIcons.js';
 import '@emotion/css';
 import { Box } from '../layout/Box/Box.js';
 import { Flex } from '../layout/Flex/Flex.js';
+import '../skeleton/Skeleton.js';
+import '../common/HiddenInput.js';
+import '../radio-group/RadioGroupContext.js';
 import { Text } from '../text/Text.js';
+import '../input/TextInput/TextInput.js';
+import '../input/TextInput/types.js';
+import '../input/PasswordInput/PasswordInput.js';
+import '../input/TokenAmountInput/TokenAmountInput.js';
+import '../layout/Paper/Paper.js';
+import '../button/Button/Button.js';
+import '../button/PlainButton/PlainButton.js';
+import '../button/FollowButton/FollowButton.js';
+import '../button/IconButton/IconButton.js';
+import '../button/UnstyledButton.js';
+import '../button/FilterButton/FilterButton.js';
+import '../button/FilterButton/FilterButtonOption.js';
+import '@react-spring/web';
+import 'classnames';
+import '../text-link/TextLink.js';
+import '../switch/Switch.js';
+import 'react-merge-refs';
+import '../scrollbar/Scrollbar.js';
+import '../popup/Popup.js';
+import '../popup-menu/PopupMenu.js';
+import '../modal/Modal.js';
+import '../modal/ModalContext.js';
+import 'react-spring/renderprops.cjs';
+import '../modal/ModalHeader.js';
+import '../modal/ModalFooter.js';
+import '../modal/types.js';
+import 'lodash';
+import 'numeral';
+import '../../contexts/MediaContext.js';
+import 'color';
+import 'lottie-react';
+import '../pill/Pill.js';
+import '../select/Select/Select.js';
+import '../checkbox/Checkbox.js';
+import '../hover-card/HoverCard.js';
+import '../../foundations/color/semantic.js';
+import '../../foundations/color/color.js';
+import '../../foundations/theme/theme.js';
+import '../../hooks/useHotKeys.js';
+import '../internal/MenuItem.js';
 
 var ITEM_DEFAULT_WIDTH = '240px';
 var variants = {

package/dist/components/expandable-nav-item/ExpandableNavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableNavItem.js","sources":["../../../src/components/expandable-nav-item/ExpandableNavItem.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\n\nimport { useTheme, CSSObject } from '@emotion/react'\nimport { ResizeObserver } from '@juggle/resize-observer'\nimport useMeasure from 'react-use-measure'\n\nimport { HarmonyTheme } from '../../foundations/theme'\nimport { IconCaretRight } from '../../icons'\nimport { Box } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Text } from '../text'\n\nimport type { ExpandableNavItemProps, VariantConfigs } from './types'\n\nconst ITEM_DEFAULT_WIDTH = '240px'\n\nconst variants: VariantConfigs = {\n  default: {\n    textVariant: 'title',\n    textSize: 'l',\n    textStrength: 'weak',\n    iconSize: 'l',\n    gap: 'm'\n  },\n  compact: {\n    textVariant: 'body',\n    textSize: 's',\n    textStrength: undefined,\n    iconSize: 's',\n    gap: 'xs'\n  }\n}\n\nconst getStyles = (theme: HarmonyTheme, disabled?: boolean): CSSObject => {\n  const baseStyles: CSSObject = {\n    transition: `background-color ${theme.motion.hover}`,\n    opacity: disabled ? 0.5 : 1\n  }\n\n  return {\n    ...baseStyles,\n    '&:active': {\n      opacity: disabled ? 0.4 : 0.8,\n      transition: `opacity ${theme.motion.quick}`\n    }\n  }\n}\n\nexport const ExpandableNavItem = ({\n  label,\n  leftIcon: LeftIcon,\n  rightIcon,\n  defaultIsOpen = false,\n  nestedItems,\n  shouldPersistRightIcon = false,\n  shouldPersistDownArrow = false,\n  canUnfurl = true,\n  variant = 'default',\n  onClick,\n  disabled,\n  ...props\n}: ExpandableNavItemProps) => {\n  const [isOpen, setIsOpen] = useState(defaultIsOpen)\n  const [isHovered, setIsHovered] = useState(false)\n  const [isMainActive, setIsMainActive] = useState(false)\n  const theme = useTheme()\n\n  const [ref, bounds] = useMeasure({\n    polyfill: ResizeObserver\n  })\n\n  const handleMouseEnter = useCallback(() => setIsHovered(true), [])\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false)\n    setIsMainActive(false)\n  }, [])\n\n  const handleMainContainerMouseDown = useCallback(\n    () => setIsMainActive(true),\n    []\n  )\n  const handleMainContainerMouseUp = useCallback(\n    () => setIsMainActive(false),\n    []\n  )\n\n  const handleClick = useCallback(() => {\n    if (canUnfurl) {\n      setIsOpen(!isOpen)\n    }\n    onClick?.(!isOpen)\n  }, [canUnfurl, isOpen, onClick])\n\n  const styles = useMemo(\n    () => ({\n      ...getStyles(theme, disabled),\n      opacity: isMainActive ? 0.8 : disabled ? 0.5 : 1,\n      transition: `opacity ${theme.motion.quick}, background-color ${theme.motion.hover}`\n    }),\n    [theme, disabled, isMainActive]\n  )\n\n  const containerStyles = useMemo(\n    () => ({\n      width: '100%',\n      cursor: 'pointer',\n      transition: `background-color ${theme.motion.hover}`,\n      padding: `0 ${theme.spacing.s}px`,\n      '& > div:first-of-type': {\n        display: 'flex',\n        alignItems: 'center',\n        gap: theme.spacing.s,\n        padding: theme.spacing.s,\n        backgroundColor:\n          isHovered && !disabled ? theme.color.background.surface2 : undefined,\n        boxShadow:\n          isHovered && !disabled\n            ? `inset 0 0 0 1px ${theme.color.border.default}`\n            : undefined,\n        borderRadius: theme.cornerRadius.m,\n        width: '100%'\n      }\n    }),\n    [theme, isHovered, disabled]\n  )\n\n  const getIcon = useMemo(() => {\n    const isCaretVisibleWhenHovered = isHovered && canUnfurl\n    const isDownArrowPersistent = shouldPersistDownArrow && isOpen\n    const shouldShowCaret = isCaretVisibleWhenHovered || isDownArrowPersistent\n    return (\n      <>\n        {LeftIcon ? (\n          <LeftIcon\n            size={variants[variant].iconSize}\n            color='default'\n            css={{\n              transition: `opacity ${theme.motion.quick}`,\n              opacity: shouldShowCaret ? 0 : 1,\n              position: 'absolute'\n            }}\n          />\n        ) : null}\n        <IconCaretRight\n          size='s'\n          color='default'\n          css={{\n            transition: `transform ${theme.motion.expressive}, opacity ${theme.motion.quick}`,\n            transform: isOpen ? `rotate(90deg)` : undefined,\n            opacity: shouldShowCaret ? 1 : 0\n          }}\n        />\n      </>\n    )\n  }, [\n    isHovered,\n    canUnfurl,\n    shouldPersistDownArrow,\n    LeftIcon,\n    variant,\n    theme.motion.quick,\n    theme.motion.expressive,\n    isOpen\n  ])\n\n  const leftIcon = useMemo(() => {\n    if (!getIcon && !LeftIcon) return null\n\n    const dimensions = variant === 'compact' ? 'unit5' : 'unit6'\n\n    return (\n      <Flex\n        alignItems='center'\n        justifyContent='center'\n        h={dimensions}\n        w={dimensions}\n      >\n        {getIcon}\n      </Flex>\n    )\n  }, [getIcon, LeftIcon, variant])\n\n  const shouldShowRightIcon = isOpen || shouldPersistRightIcon\n\n  return (\n    <Flex direction='column' role='navigation' w='100%' {...props}>\n      <Flex\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        css={containerStyles}\n      >\n        <Flex w='100%'>\n          <Flex\n            alignItems='center'\n            flex={1}\n            gap='m'\n            css={styles}\n            onMouseDown={handleMainContainerMouseDown}\n            onMouseUp={handleMainContainerMouseUp}\n            onClick={handleClick}\n            role='button'\n            aria-expanded={isOpen}\n            aria-controls={`${label}-content`}\n            aria-label={`${label} navigation section`}\n          >\n            <Flex\n              alignItems='center'\n              gap={variants[variant].gap}\n              flex={1}\n              css={{\n                maxWidth: ITEM_DEFAULT_WIDTH,\n                transition: `opacity ${theme.motion.expressive}`\n              }}\n            >\n              {leftIcon}\n              <Text\n                variant={variants[variant].textVariant}\n                size={variants[variant].textSize}\n                strength={variants[variant].textStrength}\n                lineHeight='single'\n                color='default'\n                ellipses\n              >\n                {label}\n              </Text>\n            </Flex>\n          </Flex>\n          {shouldShowRightIcon ? (\n            <Box\n              onClick={(e) => e.stopPropagation()}\n              css={{\n                cursor: 'pointer',\n                opacity: disabled ? 0.5 : 1,\n                transition: `opacity ${theme.motion.quick}`\n              }}\n            >\n              {rightIcon}\n            </Box>\n          ) : null}\n        </Flex>\n      </Flex>\n      {nestedItems ? (\n        <Flex\n          direction='column'\n          css={{\n            transition: `height ${theme.motion.expressive}, opacity ${theme.motion.quick}`,\n            overflow: 'hidden',\n            opacity: isOpen ? 1 : 0\n          }}\n          style={{ height: isOpen ? bounds.height : 0 }}\n        >\n          <Flex\n            direction='column'\n            ref={ref}\n            id={`${label}-content`}\n            role='region'\n            aria-label={`${label} content`}\n          >\n            {nestedItems}\n          </Flex>\n        </Flex>\n      ) : null}\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"ExpandableNavItem.js","sources":["../../../src/components/expandable-nav-item/ExpandableNavItem.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\n\nimport { useTheme, CSSObject } from '@emotion/react'\nimport { ResizeObserver } from '@juggle/resize-observer'\nimport useMeasure from 'react-use-measure'\n\nimport { HarmonyTheme } from '../../foundations/theme'\nimport { IconCaretRight } from '../../icons'\nimport { Box } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Text } from '../text'\n\nimport type { ExpandableNavItemProps, VariantConfigs } from './types'\n\nconst ITEM_DEFAULT_WIDTH = '240px'\n\nconst variants: VariantConfigs = {\n  default: {\n    textVariant: 'title',\n    textSize: 'l',\n    textStrength: 'weak',\n    iconSize: 'l',\n    gap: 'm'\n  },\n  compact: {\n    textVariant: 'body',\n    textSize: 's',\n    textStrength: undefined,\n    iconSize: 's',\n    gap: 'xs'\n  }\n}\n\nconst getStyles = (theme: HarmonyTheme, disabled?: boolean): CSSObject => {\n  const baseStyles: CSSObject = {\n    transition: `background-color ${theme.motion.hover}`,\n    opacity: disabled ? 0.5 : 1\n  }\n\n  return {\n    ...baseStyles,\n    '&:active': {\n      opacity: disabled ? 0.4 : 0.8,\n      transition: `opacity ${theme.motion.quick}`\n    }\n  }\n}\n\nexport const ExpandableNavItem = ({\n  label,\n  leftIcon: LeftIcon,\n  rightIcon,\n  defaultIsOpen = false,\n  nestedItems,\n  shouldPersistRightIcon = false,\n  shouldPersistDownArrow = false,\n  canUnfurl = true,\n  variant = 'default',\n  onClick,\n  disabled,\n  ...props\n}: ExpandableNavItemProps) => {\n  const [isOpen, setIsOpen] = useState(defaultIsOpen)\n  const [isHovered, setIsHovered] = useState(false)\n  const [isMainActive, setIsMainActive] = useState(false)\n  const theme = useTheme()\n\n  const [ref, bounds] = useMeasure({\n    polyfill: ResizeObserver\n  })\n\n  const handleMouseEnter = useCallback(() => setIsHovered(true), [])\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false)\n    setIsMainActive(false)\n  }, [])\n\n  const handleMainContainerMouseDown = useCallback(\n    () => setIsMainActive(true),\n    []\n  )\n  const handleMainContainerMouseUp = useCallback(\n    () => setIsMainActive(false),\n    []\n  )\n\n  const handleClick = useCallback(() => {\n    if (canUnfurl) {\n      setIsOpen(!isOpen)\n    }\n    onClick?.(!isOpen)\n  }, [canUnfurl, isOpen, onClick])\n\n  const styles = useMemo(\n    () => ({\n      ...getStyles(theme, disabled),\n      opacity: isMainActive ? 0.8 : disabled ? 0.5 : 1,\n      transition: `opacity ${theme.motion.quick}, background-color ${theme.motion.hover}`\n    }),\n    [theme, disabled, isMainActive]\n  )\n\n  const containerStyles = useMemo(\n    () => ({\n      width: '100%',\n      cursor: 'pointer',\n      transition: `background-color ${theme.motion.hover}`,\n      padding: `0 ${theme.spacing.s}px`,\n      '& > div:first-of-type': {\n        display: 'flex',\n        alignItems: 'center',\n        gap: theme.spacing.s,\n        padding: theme.spacing.s,\n        backgroundColor:\n          isHovered && !disabled ? theme.color.background.surface2 : undefined,\n        boxShadow:\n          isHovered && !disabled\n            ? `inset 0 0 0 1px ${theme.color.border.default}`\n            : undefined,\n        borderRadius: theme.cornerRadius.m,\n        width: '100%'\n      }\n    }),\n    [theme, isHovered, disabled]\n  )\n\n  const getIcon = useMemo(() => {\n    const isCaretVisibleWhenHovered = isHovered && canUnfurl\n    const isDownArrowPersistent = shouldPersistDownArrow && isOpen\n    const shouldShowCaret = isCaretVisibleWhenHovered || isDownArrowPersistent\n    return (\n      <>\n        {LeftIcon ? (\n          <LeftIcon\n            size={variants[variant].iconSize}\n            color='default'\n            css={{\n              transition: `opacity ${theme.motion.quick}`,\n              opacity: shouldShowCaret ? 0 : 1,\n              position: 'absolute'\n            }}\n          />\n        ) : null}\n        <IconCaretRight\n          size='s'\n          color='default'\n          css={{\n            transition: `transform ${theme.motion.expressive}, opacity ${theme.motion.quick}`,\n            transform: isOpen ? `rotate(90deg)` : undefined,\n            opacity: shouldShowCaret ? 1 : 0\n          }}\n        />\n      </>\n    )\n  }, [\n    isHovered,\n    canUnfurl,\n    shouldPersistDownArrow,\n    LeftIcon,\n    variant,\n    theme.motion.quick,\n    theme.motion.expressive,\n    isOpen\n  ])\n\n  const leftIcon = useMemo(() => {\n    if (!getIcon && !LeftIcon) return null\n\n    const dimensions = variant === 'compact' ? 'unit5' : 'unit6'\n\n    return (\n      <Flex\n        alignItems='center'\n        justifyContent='center'\n        h={dimensions}\n        w={dimensions}\n      >\n        {getIcon}\n      </Flex>\n    )\n  }, [getIcon, LeftIcon, variant])\n\n  const shouldShowRightIcon = isOpen || shouldPersistRightIcon\n\n  return (\n    <Flex direction='column' role='navigation' w='100%' {...props}>\n      <Flex\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        css={containerStyles}\n      >\n        <Flex w='100%'>\n          <Flex\n            alignItems='center'\n            flex={1}\n            gap='m'\n            css={styles}\n            onMouseDown={handleMainContainerMouseDown}\n            onMouseUp={handleMainContainerMouseUp}\n            onClick={handleClick}\n            role='button'\n            aria-expanded={isOpen}\n            aria-controls={`${label}-content`}\n            aria-label={`${label} navigation section`}\n          >\n            <Flex\n              alignItems='center'\n              gap={variants[variant].gap}\n              flex={1}\n              css={{\n                maxWidth: ITEM_DEFAULT_WIDTH,\n                transition: `opacity ${theme.motion.expressive}`\n              }}\n            >\n              {leftIcon}\n              <Text\n                variant={variants[variant].textVariant}\n                size={variants[variant].textSize}\n                strength={variants[variant].textStrength}\n                lineHeight='single'\n                color='default'\n                ellipses\n              >\n                {label}\n              </Text>\n            </Flex>\n          </Flex>\n          {shouldShowRightIcon ? (\n            <Box\n              onClick={(e) => e.stopPropagation()}\n              css={{\n                cursor: 'pointer',\n                opacity: disabled ? 0.5 : 1,\n                transition: `opacity ${theme.motion.quick}`\n              }}\n            >\n              {rightIcon}\n            </Box>\n          ) : null}\n        </Flex>\n      </Flex>\n      {nestedItems ? (\n        <Flex\n          direction='column'\n          css={{\n            transition: `height ${theme.motion.expressive}, opacity ${theme.motion.quick}`,\n            overflow: 'hidden',\n            opacity: isOpen ? 1 : 0\n          }}\n          style={{ height: isOpen ? bounds.height : 0 }}\n        >\n          <Flex\n            direction='column'\n            ref={ref}\n            id={`${label}-content`}\n            role='region'\n            aria-label={`${label} content`}\n          >\n            {nestedItems}\n          </Flex>\n        </Flex>\n      ) : null}\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/components/hint/Hint.js

@@ -8,6 +8,50 @@ import { Text } from '../text/Text.js';
 import { IconQuestionCircle } from '../../icons/utilityIcons.js';
 import 'react';
 import '@emotion/css';
+import '../skeleton/Skeleton.js';
+import '../common/HiddenInput.js';
+import '../radio-group/RadioGroupContext.js';
+import '../input/TextInput/TextInput.js';
+import '../input/TextInput/types.js';
+import '../input/PasswordInput/PasswordInput.js';
+import '../input/TokenAmountInput/TokenAmountInput.js';
+import '../button/Button/Button.js';
+import '../button/PlainButton/PlainButton.js';
+import '../button/FollowButton/FollowButton.js';
+import '../button/IconButton/IconButton.js';
+import '../button/UnstyledButton.js';
+import '../button/FilterButton/FilterButton.js';
+import '../button/FilterButton/FilterButtonOption.js';
+import '@react-spring/web';
+import 'classnames';
+import '../text-link/TextLink.js';
+import '../switch/Switch.js';
+import '@juggle/resize-observer';
+import 'react-merge-refs';
+import 'react-use-measure';
+import '../scrollbar/Scrollbar.js';
+import '../popup/Popup.js';
+import '../popup-menu/PopupMenu.js';
+import '../modal/Modal.js';
+import '../modal/ModalContext.js';
+import 'react-spring/renderprops.cjs';
+import '../modal/ModalHeader.js';
+import '../modal/ModalFooter.js';
+import '../modal/types.js';
+import 'lodash';
+import 'numeral';
+import '../../contexts/MediaContext.js';
+import 'color';
+import 'lottie-react';
+import '../pill/Pill.js';
+import '../select/Select/Select.js';
+import '../checkbox/Checkbox.js';
+import '../hover-card/HoverCard.js';
+import '../../foundations/color/semantic.js';
+import '../../foundations/color/color.js';
+import '../../foundations/theme/theme.js';
+import '../../hooks/useHotKeys.js';
+import '../internal/MenuItem.js';
 
 /*
  * A way of informing the user of important details in line in a prominent way.

package/dist/components/hint/Hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.js","sources":["../../../src/components/hint/Hint.tsx"],"sourcesContent":["import { ReactNode } from 'react'\n\nimport type { IconComponent } from '~harmony/components/icon'\nimport { Flex } from '~harmony/components/layout'\nimport { Paper, PaperProps } from '~harmony/components/layout/Paper'\nimport { Text } from '~harmony/components/text'\nimport { IconQuestionCircle } from '~harmony/icons'\n\ntype HintProps = {\n  icon?: IconComponent\n  actions?: ReactNode\n} & PaperProps\n\n/*\n * A way of informing the user of important details in line in a prominent way.\n */\nexport const Hint = (props: HintProps) => {\n  const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props\n  return (\n    <Paper\n      role='alert'\n      backgroundColor='surface2'\n      ph='l'\n      pv='m'\n      direction='column'\n      gap='m'\n      shadow='flat'\n      border='strong'\n      {...other}\n    >\n      <Flex gap='l' alignItems='center'>\n        <Icon size='l' color='default' />\n        <Text variant='body' color='default'>\n          {children}\n        </Text>\n      </Flex>\n      {actions ? (\n        <Flex pl='unit10' gap='l'>\n          {actions}\n        </Flex>\n      ) : null}\n    </Paper>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAaA;;AAEG;AACI,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;IAC3B,IAAA,EAAA,GAAiE,KAAK,CAAA,IAAvC,EAAzB,IAAI,mBAAG,kBAAkB,GAAA,EAAA,EAAE,QAAQ,GAAwB,KAAK,SAA7B,EAAE,OAAO,GAAe,KAAK,CAApB,OAAA,EAAK,KAAK,GAAA,MAAA,CAAK,KAAK,EAAxE,CAAgE,MAAA,EAAA,UAAA,EAAA,SAAA,CAAA,CAAF,CAAU;IAC9E,QACEA,KAAC,KAAK,EAAA,QAAA,CAAA,EACJ,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,UAAU,EAC1B,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAC,GAAG,EACP,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,QAAQ,EACX,EAAA,KAAK,eAETA,IAAC,CAAA,IAAI,aAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAC/B,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,EACjCA,GAAC,CAAA,IAAI,aAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,EAAA,EAAA,QAAA,EACjC,QAAQ,EAAA,CAAA,CACJ,CACF,EAAA,CAAA,CAAA,EACN,OAAO,IACNA,GAAA,CAAC,IAAI,EAAC,QAAA,CAAA,EAAA,EAAE,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAA,EAAA,EAAA,QAAA,EACtB,OAAO,EAAA,CAAA,CACH,IACL,IAAI,CACF,EAAA,CAAA,CAAA,EACT;AACH;;;;"}
+{"version":3,"file":"Hint.js","sources":["../../../src/components/hint/Hint.tsx"],"sourcesContent":["import { ReactNode } from 'react'\n\nimport type { IconComponent } from '~harmony/components/icon'\nimport { Flex } from '~harmony/components/layout'\nimport { Paper, PaperProps } from '~harmony/components/layout/Paper'\nimport { Text } from '~harmony/components/text'\nimport { IconQuestionCircle } from '~harmony/icons'\n\ntype HintProps = {\n  icon?: IconComponent\n  actions?: ReactNode\n} & PaperProps\n\n/*\n * A way of informing the user of important details in line in a prominent way.\n */\nexport const Hint = (props: HintProps) => {\n  const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props\n  return (\n    <Paper\n      role='alert'\n      backgroundColor='surface2'\n      ph='l'\n      pv='m'\n      direction='column'\n      gap='m'\n      shadow='flat'\n      border='strong'\n      {...other}\n    >\n      <Flex gap='l' alignItems='center'>\n        <Icon size='l' color='default' />\n        <Text variant='body' color='default'>\n          {children}\n        </Text>\n      </Flex>\n      {actions ? (\n        <Flex pl='unit10' gap='l'>\n          {actions}\n        </Flex>\n      ) : null}\n    </Paper>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;AAEG;AACI,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;IAC3B,IAAA,EAAA,GAAiE,KAAK,CAAA,IAAvC,EAAzB,IAAI,mBAAG,kBAAkB,GAAA,EAAA,EAAE,QAAQ,GAAwB,KAAK,SAA7B,EAAE,OAAO,GAAe,KAAK,CAApB,OAAA,EAAK,KAAK,GAAA,MAAA,CAAK,KAAK,EAAxE,CAAgE,MAAA,EAAA,UAAA,EAAA,SAAA,CAAA,CAAF,CAAU;IAC9E,QACEA,KAAC,KAAK,EAAA,QAAA,CAAA,EACJ,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,UAAU,EAC1B,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAC,GAAG,EACP,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,QAAQ,EACX,EAAA,KAAK,eAETA,IAAC,CAAA,IAAI,aAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAC/B,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,EACjCA,GAAC,CAAA,IAAI,aAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,EAAA,EAAA,QAAA,EACjC,QAAQ,EAAA,CAAA,CACJ,CACF,EAAA,CAAA,CAAA,EACN,OAAO,IACNA,GAAA,CAAC,IAAI,EAAC,QAAA,CAAA,EAAA,EAAE,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAA,EAAA,EAAA,QAAA,EACtB,OAAO,EAAA,CAAA,CACH,IACL,IAAI,CACF,EAAA,CAAA,CAAA,EACT;AACH;;;;"}

package/dist/components/hover-card/HoverCard.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { HoverCardProps } from './types';
+export declare const HoverCard: import("react").MemoExoticComponent<({ children, className, content, onClose, onClick, anchorOrigin, transformOrigin, mouseEnterDelay, triggeredBy }: HoverCardProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=HoverCard.d.ts.map

package/dist/components/hover-card/HoverCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/HoverCard.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAqGxC,eAAO,MAAM,SAAS,wJA1DnB,cAAc,sDA0DgC,CAAA"}

package/dist/components/hover-card/HoverCard.js

@@ -0,0 +1,103 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { memo, useRef, useCallback } from 'react';
+import '@emotion/react';
+import '../layout/Box/Box.js';
+import { Flex } from '../layout/Flex/Flex.js';
+import '../skeleton/Skeleton.js';
+import '../common/HiddenInput.js';
+import '../radio-group/RadioGroupContext.js';
+import '../text/Text.js';
+import '../input/TextInput/TextInput.js';
+import '../input/TextInput/types.js';
+import '../input/PasswordInput/PasswordInput.js';
+import '../input/TokenAmountInput/TokenAmountInput.js';
+import { Paper } from '../layout/Paper/Paper.js';
+import '../button/Button/Button.js';
+import '../button/PlainButton/PlainButton.js';
+import '@emotion/css';
+import '../button/FollowButton/FollowButton.js';
+import '../button/IconButton/IconButton.js';
+import '../button/UnstyledButton.js';
+import '../button/FilterButton/FilterButton.js';
+import '../button/FilterButton/FilterButtonOption.js';
+import '@react-spring/web';
+import 'classnames';
+import '../text-link/TextLink.js';
+import '../switch/Switch.js';
+import '@juggle/resize-observer';
+import 'react-merge-refs';
+import 'react-use-measure';
+import '../scrollbar/Scrollbar.js';
+import { Popup } from '../popup/Popup.js';
+import '../popup-menu/PopupMenu.js';
+import '../modal/Modal.js';
+import '../modal/ModalContext.js';
+import 'react-spring/renderprops.cjs';
+import '../modal/ModalHeader.js';
+import '../modal/ModalFooter.js';
+import '../modal/types.js';
+import 'lodash';
+import 'numeral';
+import '../../contexts/MediaContext.js';
+import 'color';
+import 'lottie-react';
+import '../pill/Pill.js';
+import '../select/Select/Select.js';
+import '../checkbox/Checkbox.js';
+import '../../foundations/color/semantic.js';
+import '../../foundations/color/color.js';
+import '../../foundations/theme/theme.js';
+import '../../hooks/useHotKeys.js';
+import '../internal/MenuItem.js';
+import { useHoverDelay } from '../../hooks/useHoverDelay.js';
+
+var DEFAULT_ANCHOR_ORIGIN = {
+    horizontal: 'right',
+    vertical: 'center'
+};
+var DEFAULT_TRANSFORM_ORIGIN = {
+    horizontal: 'left',
+    vertical: 'center'
+};
+/**
+ * HoverCard is a component that displays content in a hover card/tooltip
+ * with a Paper container when the user hovers over the component's children.
+ *
+ * The hover card appears to the right of the child element and disappears when
+ * the user's mouse leaves either the trigger or the card.
+ *
+ * @example
+ * ```tsx
+ * <HoverCard
+ *   content={
+ *     <>
+ *       <SomeHeader />
+ *       <SomeBody />
+ *     </>
+ *   }
+ * >
+ *   <Text>Hover over me</Text>
+ * </HoverCard>
+ * ```
+ */
+var HoverCardComponent = function (_a) {
+    var children = _a.children, className = _a.className, content = _a.content, onClose = _a.onClose, onClick = _a.onClick, _b = _a.anchorOrigin, anchorOrigin = _b === void 0 ? DEFAULT_ANCHOR_ORIGIN : _b, _c = _a.transformOrigin, transformOrigin = _c === void 0 ? DEFAULT_TRANSFORM_ORIGIN : _c, _d = _a.mouseEnterDelay, mouseEnterDelay = _d === void 0 ? 0.5 : _d, _e = _a.triggeredBy, triggeredBy = _e === void 0 ? 'hover' : _e;
+    var anchorRef = useRef(null);
+    var _f = useHoverDelay(mouseEnterDelay, triggeredBy), isVisible = _f.isVisible, handleMouseEnter = _f.handleMouseEnter, handleMouseLeave = _f.handleMouseLeave, handleClick = _f.handleClick, clearTimer = _f.clearTimer, setIsHovered = _f.setIsHovered, setIsClicked = _f.setIsClicked;
+    var handleClose = useCallback(function () {
+        clearTimer();
+        setIsHovered(false);
+        setIsClicked(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [clearTimer, setIsHovered, setIsClicked, onClose]);
+    var handleClickInternal = useCallback(function () {
+        handleClick();
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [handleClick, onClick]);
+    return (jsxs(Flex, __assign({ ref: anchorRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: triggeredBy !== 'hover' ? handleClickInternal : undefined }, { children: [children, jsx(Popup, __assign({ shadow: 'near', anchorRef: anchorRef, isVisible: isVisible, onClose: handleClose, dismissOnMouseLeave: triggeredBy !== 'click', hideCloseButton: true, zIndex: 30000, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, { children: jsx(Paper, __assign({ className: className, borderRadius: 'm', backgroundColor: 'white', direction: 'column', onClick: onClick }, { children: content })) }))] })));
+};
+var HoverCard = memo(HoverCardComponent);
+
+export { HoverCard };
+//# sourceMappingURL=HoverCard.js.map

package/dist/components/hover-card/HoverCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.js","sources":["../../../src/components/hover-card/HoverCard.tsx"],"sourcesContent":["import { useRef, useCallback, memo } from 'react'\n\nimport { Flex, Paper, Popup } from '..'\nimport { useHoverDelay } from '../../hooks/useHoverDelay'\nimport { Origin } from '../popup/types'\n\nimport { HoverCardProps } from './types'\n\nconst DEFAULT_ANCHOR_ORIGIN: Origin = {\n  horizontal: 'right',\n  vertical: 'center'\n}\n\nconst DEFAULT_TRANSFORM_ORIGIN: Origin = {\n  horizontal: 'left',\n  vertical: 'center'\n}\n\n/**\n * HoverCard is a component that displays content in a hover card/tooltip\n * with a Paper container when the user hovers over the component's children.\n *\n * The hover card appears to the right of the child element and disappears when\n * the user's mouse leaves either the trigger or the card.\n *\n * @example\n * ```tsx\n * <HoverCard\n *   content={\n *     <>\n *       <SomeHeader />\n *       <SomeBody />\n *     </>\n *   }\n * >\n *   <Text>Hover over me</Text>\n * </HoverCard>\n * ```\n */\nconst HoverCardComponent = ({\n  children,\n  className,\n  content,\n  onClose,\n  onClick,\n  anchorOrigin = DEFAULT_ANCHOR_ORIGIN,\n  transformOrigin = DEFAULT_TRANSFORM_ORIGIN,\n  mouseEnterDelay = 0.5,\n  triggeredBy = 'hover'\n}: HoverCardProps) => {\n  const anchorRef = useRef<HTMLDivElement | null>(null)\n  const {\n    isVisible,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleClick,\n    clearTimer,\n    setIsHovered,\n    setIsClicked\n  } = useHoverDelay(mouseEnterDelay, triggeredBy)\n\n  const handleClose = useCallback(() => {\n    clearTimer()\n    setIsHovered(false)\n    setIsClicked(false)\n    onClose?.()\n  }, [clearTimer, setIsHovered, setIsClicked, onClose])\n\n  const handleClickInternal = useCallback(() => {\n    handleClick()\n    onClick?.()\n  }, [handleClick, onClick])\n\n  return (\n    <Flex\n      ref={anchorRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={triggeredBy !== 'hover' ? handleClickInternal : undefined}\n    >\n      {children}\n\n      <Popup\n        shadow='near'\n        anchorRef={anchorRef}\n        isVisible={isVisible}\n        onClose={handleClose}\n        dismissOnMouseLeave={triggeredBy !== 'click'}\n        hideCloseButton\n        zIndex={30000}\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n      >\n        <Paper\n          className={className}\n          borderRadius='m'\n          backgroundColor='white'\n          direction='column'\n          onClick={onClick}\n        >\n          {content}\n        </Paper>\n      </Popup>\n    </Flex>\n  )\n}\n\nexport const HoverCard = memo(HoverCardComponent)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/hover-card/HoverCard.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HoverCard } from './HoverCard';
+declare const meta: Meta<typeof HoverCard>;
+export default meta;
+type Story = StoryObj<typeof HoverCard>;
+export declare const Default: Story;
+export declare const WithCustomHeader: Story;
+//# sourceMappingURL=HoverCard.stories.d.ts.map

package/dist/components/hover-card/HoverCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/HoverCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAMhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA+B9B,CAAA"}

package/dist/components/hover-card/HoverCardHeader.d.ts

@@ -0,0 +1,6 @@
+import { HoverCardHeaderProps } from './types';
+/**
+ * A shared base component for hover card headers
+ */
+export declare const HoverCardHeader: ({ iconLeft, title, onClose, iconRight }: HoverCardHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HoverCardHeader.d.ts.map

package/dist/components/hover-card/HoverCardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/HoverCardHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,eAAe,4CAKzB,oBAAoB,qDA2CtB,CAAA"}

package/dist/components/hover-card/HoverCardHeader.js

@@ -0,0 +1,64 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import '../../foundations/color/semantic.js';
+import '../../foundations/color/color.js';
+import 'react';
+import '@emotion/react';
+import '../../foundations/theme/theme.js';
+import '../layout/Box/Box.js';
+import { Flex } from '../layout/Flex/Flex.js';
+import '../skeleton/Skeleton.js';
+import '../common/HiddenInput.js';
+import '../radio-group/RadioGroupContext.js';
+import { Text } from '../text/Text.js';
+import '../input/TextInput/TextInput.js';
+import '../input/TextInput/types.js';
+import '../input/PasswordInput/PasswordInput.js';
+import '../input/TokenAmountInput/TokenAmountInput.js';
+import '../layout/Paper/Paper.js';
+import '../button/Button/Button.js';
+import '../button/PlainButton/PlainButton.js';
+import '@emotion/css';
+import '../button/FollowButton/FollowButton.js';
+import { IconButton } from '../button/IconButton/IconButton.js';
+import '../button/UnstyledButton.js';
+import '../button/FilterButton/FilterButton.js';
+import '../button/FilterButton/FilterButtonOption.js';
+import '@react-spring/web';
+import 'classnames';
+import '../text-link/TextLink.js';
+import '../switch/Switch.js';
+import '@juggle/resize-observer';
+import 'react-merge-refs';
+import 'react-use-measure';
+import '../scrollbar/Scrollbar.js';
+import '../popup/Popup.js';
+import '../popup-menu/PopupMenu.js';
+import '../modal/Modal.js';
+import '../modal/ModalContext.js';
+import 'react-spring/renderprops.cjs';
+import '../modal/ModalHeader.js';
+import '../modal/ModalFooter.js';
+import '../modal/types.js';
+import 'lodash';
+import 'numeral';
+import '../../contexts/MediaContext.js';
+import 'color';
+import 'lottie-react';
+import '../pill/Pill.js';
+import '../select/Select/Select.js';
+import '../checkbox/Checkbox.js';
+import './HoverCard.js';
+import '../internal/MenuItem.js';
+import '../../hooks/useHotKeys.js';
+
+/**
+ * A shared base component for hover card headers
+ */
+var HoverCardHeader = function (_a) {
+    var iconLeft = _a.iconLeft, title = _a.title, onClose = _a.onClose, iconRight = _a.iconRight;
+    return (jsxs(Flex, __assign({ w: '100%', alignSelf: 'stretch', backgroundColor: 'surface1', borderBottom: 'default', p: 'xs', pl: 'xs', pr: 's', alignItems: 'center', justifyContent: 'space-between' }, { children: [jsxs(Flex, __assign({ alignSelf: 'stretch', alignItems: 'center', gap: 'xs' }, { children: [iconLeft ? (jsx(IconButton, { icon: iconLeft, color: 'subdued', size: 'l', "aria-label": '', onClick: onClose })) : null, jsx(Text, __assign({ variant: 'label', size: 's', color: 'default', textTransform: 'uppercase' }, { children: title }))] })), iconRight ? (jsx(IconButton, { icon: iconRight, color: 'subdued', size: 's', "aria-label": 'Close', onClick: onClose })) : null] })));
+};
+
+export { HoverCardHeader };
+//# sourceMappingURL=HoverCardHeader.js.map

package/dist/components/hover-card/HoverCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardHeader.js","sources":["../../../src/components/hover-card/HoverCardHeader.tsx"],"sourcesContent":["import { Flex, Text, IconButton } from '~harmony/index'\n\nimport { HoverCardHeaderProps } from './types'\n\n/**\n * A shared base component for hover card headers\n */\nexport const HoverCardHeader = ({\n  iconLeft,\n  title,\n  onClose,\n  iconRight\n}: HoverCardHeaderProps) => {\n  return (\n    <Flex\n      w='100%'\n      alignSelf='stretch'\n      backgroundColor='surface1'\n      borderBottom='default'\n      p='xs'\n      pl='xs'\n      pr='s'\n      alignItems='center'\n      justifyContent='space-between'\n    >\n      <Flex alignSelf='stretch' alignItems='center' gap='xs'>\n        {iconLeft ? (\n          <IconButton\n            icon={iconLeft}\n            color='subdued'\n            size='l'\n            aria-label={''}\n            onClick={onClose}\n          />\n        ) : null}\n        <Text\n          variant='label'\n          size='s'\n          color='default'\n          textTransform='uppercase'\n        >\n          {title}\n        </Text>\n      </Flex>\n      {iconRight ? (\n        <IconButton\n          icon={iconRight}\n          color='subdued'\n          size='s'\n          aria-label='Close'\n          onClick={onClose}\n        />\n      ) : null}\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;AAEG;AACI,IAAM,eAAe,GAAG,UAAC,EAKT,EAAA;QAJrB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,CAAA;AAET,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,CAAC,EAAC,MAAM,EACR,SAAS,EAAC,SAAS,EACnB,eAAe,EAAC,UAAU,EAC1B,YAAY,EAAC,SAAS,EACtB,CAAC,EAAC,IAAI,EACN,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,GAAG,EACN,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAAA,EAAA,EAAA,QAAA,EAAA,CAE9BA,KAAC,IAAI,EAAA,QAAA,CAAA,EAAC,SAAS,EAAC,SAAS,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EACnD,EAAA,EAAA,QAAA,EAAA,CAAA,QAAQ,IACPC,GAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,GAAG,EAAA,YAAA,EACI,EAAE,EACd,OAAO,EAAE,OAAO,EAChB,CAAA,IACA,IAAI,EACRA,GAAC,CAAA,IAAI,EACH,QAAA,CAAA,EAAA,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,SAAS,EACf,aAAa,EAAC,WAAW,gBAExB,KAAK,EAAA,CAAA,CACD,CACF,EAAA,CAAA,CAAA,EACN,SAAS,IACRA,GAAC,CAAA,UAAU,EACT,EAAA,IAAI,EAAE,SAAS,EACf,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,GAAG,EAAA,YAAA,EACG,OAAO,EAClB,OAAO,EAAE,OAAO,EAChB,CAAA,IACA,IAAI,CAAA,EAAA,CAAA,CACH,EACR;AACH;;;;"}

package/dist/components/hover-card/index.d.ts

@@ -0,0 +1,4 @@
+export { HoverCard } from './HoverCard';
+export { HoverCardHeader } from './HoverCardHeader';
+export type { HoverCardProps, HoverCardHeaderProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/hover-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/hover-card/types.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { TriggerType } from '../../hooks/useHoverDelay';
+import { IconComponent } from '../icon';
+import { Origin } from '../popup/types';
+export type HoverCardProps = {
+    /**
+     * Content displayed as the hover trigger
+     */
+    children: ReactNode;
+    /**
+     * Content displayed inside the hover card
+     */
+    content: ReactNode;
+    /**
+     * Optional CSS class name
+     */
+    className?: string;
+    /**
+     * Callback fired when the hover card is closed
+     */
+    onClose?: () => void;
+    /**
+     * Callback fired when the hover card is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Position of the anchor origin
+     * @default { horizontal: 'right', vertical: 'center' }
+     */
+    anchorOrigin?: Origin;
+    /**
+     * Position of the transform origin
+     * @default { horizontal: 'left', vertical: 'center' }
+     */
+    transformOrigin?: Origin;
+    /**
+     * Delay in seconds before the hover card appears after mouse enter
+     * @default 0.5
+     */
+    mouseEnterDelay?: number;
+    /**
+     * Whether to trigger the hover card on hover, click, or both
+     * @default 'hover'
+     */
+    triggeredBy?: TriggerType;
+};
+export type HoverCardHeaderProps = {
+    /**
+     * Optional icon to display on the left side of the header
+     */
+    iconLeft?: IconComponent;
+    /**
+     * Optional icon to display on the right side of the header
+     */
+    iconRight?: IconComponent;
+    /**
+     * The title to display in the header
+     */
+    title: string;
+    /**
+     * Optional callback when the close button is clicked.
+     * If not provided, the close button will be rendered as a non-interactive icon.
+     */
+    onClose?: () => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/hover-card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IAEnB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAA;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA"}

package/dist/components/icon.d.ts

@@ -5,6 +5,7 @@ import { IconSize } from '../foundations/spacing';
 type SVGBaseProps = SVGProps<SVGSVGElement>;
 export type IconProps = {
     color?: IconColors;
+    colorSecondary?: IconColors;
     size?: IconSize;
     sizeW?: IconSize;
     sizeH?: IconSize;
@@ -14,7 +15,7 @@ export type IconProps = {
     title?: string;
     onClick?: MouseEventHandler<SVGSVGElement>;
 };
-type SVGIconProps = SVGBaseProps & IconProps;
+export type SVGIconProps = SVGBaseProps & IconProps;
 export type IconComponent = ComponentType<SVGBaseProps | SVGIconProps>;
 export {};
 //# sourceMappingURL=icon.d.ts.map