@audius/harmony 0.4.0 → 0.4.3

package/dist/components/hint/Hint.js

@@ -8,13 +8,58 @@ 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 '../button/BaseButton/BaseButton.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.
  */
 var Hint = function (props) {
-    var _a = props.icon, Icon = _a === void 0 ? IconQuestionCircle : _a, children = props.children, actions = props.actions, other = __rest(props, ["icon", "children", "actions"]);
-    return (jsxs(Paper, __assign({ role: 'alert', backgroundColor: 'surface2', ph: 'l', pv: 'm', direction: 'column', gap: 'm', shadow: 'flat', border: 'strong' }, other, { children: [jsxs(Flex, __assign({ gap: 'l', alignItems: 'center' }, { children: [jsx(Icon, { size: 'l', color: 'default' }), jsx(Text, __assign({ variant: 'body', color: 'default' }, { children: children }))] })), actions ? (jsx(Flex, __assign({ pl: 'unit10', gap: 'l' }, { children: actions }))) : null] })));
+    var _a = props.icon, Icon = _a === void 0 ? IconQuestionCircle : _a, children = props.children, actions = props.actions, noIcon = props.noIcon, other = __rest(props, ["icon", "children", "actions", "noIcon"]);
+    return (jsxs(Paper, __assign({ role: 'alert', backgroundColor: 'surface2', ph: 'l', pv: 'm', direction: 'column', gap: 'm', shadow: 'flat', border: 'strong' }, other, { children: [jsxs(Flex, __assign({ gap: 'l', alignItems: 'center' }, { children: [noIcon ? null : jsx(Icon, { size: 'l', color: 'default' }), jsx(Text, __assign({ variant: 'body', color: 'default' }, { children: children }))] })), actions ? (jsx(Flex, __assign({ pl: 'unit10', gap: 'l' }, { children: actions }))) : null] })));
 };
 
 export { Hint };

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  noIcon?: boolean\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 {\n    icon: Icon = IconQuestionCircle,\n    children,\n    actions,\n    noIcon,\n    ...other\n  } = 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        {noIcon ? null : <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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;AAEG;AACI,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;AAEjC,IAAA,IAAA,EAKE,GAAA,KAAK,CALwB,IAAA,EAAzB,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,kBAAkB,GAAA,EAAA,EAC/B,QAAQ,GAIN,KAAK,SAJC,EACR,OAAO,GAGL,KAAK,CAHA,OAAA,EACP,MAAM,GAEJ,KAAK,CAAA,MAFD,EACH,KAAK,GACN,MAAA,CAAA,KAAK,EANH,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,CAML,CADS,CACD;IACT,QACEA,IAAC,CAAA,KAAK,EACJ,QAAA,CAAA,EAAA,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,EAAA,EACX,KAAK,EAAA,EAAA,QAAA,EAAA,CAETA,IAAC,CAAA,IAAI,aAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAC9B,EAAA,EAAA,QAAA,EAAA,CAAA,MAAM,GAAG,IAAI,GAAGC,GAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,EAClDA,GAAC,CAAA,IAAI,EAAC,QAAA,CAAA,EAAA,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,EAAA,EAAA,QAAA,EACjC,QAAQ,EAAA,CAAA,CACJ,KACF,EACN,OAAO,IACNA,IAAC,IAAI,EAAA,QAAA,CAAA,EAAC,EAAE,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EACtB,EAAA,EAAA,QAAA,EAAA,OAAO,EACH,CAAA,CAAA,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, onHover }: 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;AA6GxC,eAAO,MAAM,SAAS,iKAjEnB,cAAc,sDAiEgC,CAAA"}

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

@@ -0,0 +1,109 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { memo, useRef, useEffect, 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 '../button/BaseButton/BaseButton.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, onHover = _a.onHover;
+    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;
+    // Call onHover callback when hover state changes
+    useEffect(function () {
+        onHover === null || onHover === void 0 ? void 0 : onHover(isVisible);
+    }, [isVisible, onHover]);
+    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();
+        handleClose();
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [handleClick, handleClose, onClick]);
+    return (jsxs(Flex, __assign({ ref: anchorRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: triggeredBy !== 'hover' ? handleClickInternal : undefined }, { children: [children, jsx(Popup, __assign({ shadow: 'far', anchorRef: anchorRef, isVisible: isVisible, onClose: handleClose, hideCloseButton: true, zIndex: 30000, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, { children: jsx(Paper, __assign({ className: className, border: 'strong', borderRadius: 'm', backgroundColor: 'white', direction: 'column', onClick: onClick, shadow: 'far' }, { 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, useEffect } 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  onHover\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  // Call onHover callback when hover state changes\n  useEffect(() => {\n    onHover?.(isVisible)\n  }, [isVisible, onHover])\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    handleClose()\n    onClick?.()\n  }, [handleClick, handleClose, 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='far'\n        anchorRef={anchorRef}\n        isVisible={isVisible}\n        onClose={handleClose}\n        hideCloseButton\n        zIndex={30000}\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n      >\n        <Paper\n          className={className}\n          border='strong'\n          borderRadius='m'\n          backgroundColor='white'\n          direction='column'\n          onClick={onClick}\n          shadow='far'\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, onClick, 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":"AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,eAAe,qDAMzB,oBAAoB,qDAoDtB,CAAA"}

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

@@ -0,0 +1,70 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useCallback } from 'react';
+import '../../foundations/color/semantic.js';
+import '../../foundations/color/color.js';
+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 '../button/BaseButton/BaseButton.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, onClick = _a.onClick, onClose = _a.onClose, iconRight = _a.iconRight;
+    var handleClick = useCallback(function (e) {
+        e.stopPropagation();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [onClick, onClose]);
+    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: handleClick })) : 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: handleClick })) : 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 { useCallback } from 'react'\n\nimport { 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  onClick,\n  onClose,\n  iconRight\n}: HoverCardHeaderProps) => {\n  const handleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      onClose?.()\n      onClick?.()\n    },\n    [onClick, onClose]\n  )\n\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={handleClick}\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={handleClick}\n        />\n      ) : null}\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;AAEG;AACI,IAAM,eAAe,GAAG,UAAC,EAMT,EAAA;AALrB,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,CAAA;AAET,IAAA,IAAM,WAAW,GAAG,WAAW,CAC7B,UAAC,CAAmB,EAAA;QAClB,CAAC,CAAC,eAAe,EAAE,CAAA;AACnB,QAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,EAAI,CAAA;AACX,QAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,EAAI,CAAA;AACb,KAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CACnB,CAAA;AAED,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,WAAW,EACpB,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,WAAW,EACpB,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,75 @@
+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;
+    /**
+     * Callback fired when hover state changes
+     * @param isHovered Whether the component is currently being hovered
+     */
+    onHover?: (isHovered: boolean) => void;
+};
+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 for when either icon in the header is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * 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;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,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;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;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

package/dist/components/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjD,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;AAE3C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;CAC3C,CAAA;AAED,KAAK,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;AAE5C,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,YAAY,GAAG,YAAY,CAAC,CAAA"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjD,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;AAE3C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;CAC3C,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;AAEnD,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,YAAY,GAAG,YAAY,CAAC,CAAA"}

package/dist/components/index.d.ts

@@ -32,6 +32,7 @@ export * from './select';
 export * from './icon-text';
 export * from './send-icon';
 export * from './checkbox';
+export * from './hover-card';
 export * from './internal/MenuItem';
 export * from './internal/Menu';
 export * from './internal/OptionKeyHandler';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAC5E,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,6BAA6B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAC5E,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,6BAA6B,CAAA"}

package/dist/components/input/PasswordInput/PasswordInput.js

@@ -7,13 +7,52 @@ import '../../button/PlainButton/PlainButton.js';
 import { IconVisibilityPublic, IconVisibilityHidden } from '../../../icons/utilityIcons.js';
 import '@emotion/react';
 import '@emotion/css';
-import '../../button/FollowButton/FollowButton.js';
+import '../../layout/Box/Box.js';
+import '../../layout/Flex/Flex.js';
+import '../../skeleton/Skeleton.js';
+import '../../common/HiddenInput.js';
+import '../../radio-group/RadioGroupContext.js';
+import '../../text/Text.js';
+import { TextInput } from '../TextInput/TextInput.js';
+import '../TextInput/types.js';
+import '../TokenAmountInput/TokenAmountInput.js';
+import '../../layout/Paper/Paper.js';
+import '@react-spring/web';
+import 'classnames';
+import '../../text-link/TextLink.js';
 import { IconButton } from '../../button/IconButton/IconButton.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';
+import '../../button/FollowButton/FollowButton.js';
 import '../../button/UnstyledButton.js';
 import '../../button/FilterButton/FilterButton.js';
 import '../../button/FilterButton/FilterButtonOption.js';
-import { TextInput } from '../TextInput/TextInput.js';
-import '../TextInput/types.js';
+import '../../button/BaseButton/BaseButton.js';
 
 var messages = {
     hidePasswordInput: 'Hide password input',

package/dist/components/input/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../../src/components/input/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { useToggle } from 'react-use'\n\nimport { IconButton } from '~harmony/components/button'\nimport { IconVisibilityHidden, IconVisibilityPublic } from '~harmony/icons'\n\nimport { TextInput } from '../TextInput'\n\nimport type { PasswordInputProps } from './types'\n\nconst messages = {\n  hidePasswordInput: 'Hide password input',\n  showPasswordInput: 'Show password input'\n}\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, ref) => {\n    const { hideVisibilityToggle, ...restProps } = props\n    const [isPasswordVisible, toggleIsPasswordVisible] = useToggle(false)\n    const VisibilityIcon = isPasswordVisible\n      ? IconVisibilityPublic\n      : IconVisibilityHidden\n\n    return (\n      <TextInput\n        ref={ref}\n        type={isPasswordVisible ? 'text' : 'password'}\n        endAdornment={\n          hideVisibilityToggle ? null : (\n            <IconButton\n              icon={VisibilityIcon}\n              color='subdued'\n              onClick={toggleIsPasswordVisible}\n              aria-label={\n                isPasswordVisible\n                  ? messages.hidePasswordInput\n                  : messages.showPasswordInput\n              }\n              ripple\n            />\n          )\n        }\n        {...restProps}\n      />\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAWA,IAAM,QAAQ,GAAG;AACf,IAAA,iBAAiB,EAAE,qBAAqB;AACxC,IAAA,iBAAiB,EAAE,qBAAqB;CACzC,CAAA;IAEY,aAAa,GAAG,UAAU,CACrC,UAAC,KAAK,EAAE,GAAG,EAAA;IACD,IAAA,oBAAoB,GAAmB,KAAK,CAAxB,oBAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAA9C,CAAsC,sBAAA,CAAA,CAAF,CAAU;IAC9C,IAAA,EAAA,GAA+C,SAAS,CAAC,KAAK,CAAC,EAA9D,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAAoB,CAAA;IACrE,IAAM,cAAc,GAAG,iBAAiB;AACtC,UAAE,oBAAoB;UACpB,oBAAoB,CAAA;IAExB,QACEA,IAAC,SAAS,EAAA,QAAA,CAAA,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,iBAAiB,GAAG,MAAM,GAAG,UAAU,EAC7C,YAAY,EACV,oBAAoB,GAAG,IAAI,IACzBA,GAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAE,cAAc,EACpB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,uBAAuB,EAAA,YAAA,EAE9B,iBAAiB;kBACb,QAAQ,CAAC,iBAAiB;AAC5B,kBAAE,QAAQ,CAAC,iBAAiB,EAEhC,MAAM,EACN,IAAA,EAAA,CAAA,CACH,EAEC,EAAA,SAAS,CACb,CAAA,EACH;AACH,CAAC;;;;"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../../src/components/input/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { useToggle } from 'react-use'\n\nimport { IconButton } from '~harmony/components/button'\nimport { IconVisibilityHidden, IconVisibilityPublic } from '~harmony/icons'\n\nimport { TextInput } from '../TextInput'\n\nimport type { PasswordInputProps } from './types'\n\nconst messages = {\n  hidePasswordInput: 'Hide password input',\n  showPasswordInput: 'Show password input'\n}\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, ref) => {\n    const { hideVisibilityToggle, ...restProps } = props\n    const [isPasswordVisible, toggleIsPasswordVisible] = useToggle(false)\n    const VisibilityIcon = isPasswordVisible\n      ? IconVisibilityPublic\n      : IconVisibilityHidden\n\n    return (\n      <TextInput\n        ref={ref}\n        type={isPasswordVisible ? 'text' : 'password'}\n        endAdornment={\n          hideVisibilityToggle ? null : (\n            <IconButton\n              icon={VisibilityIcon}\n              color='subdued'\n              onClick={toggleIsPasswordVisible}\n              aria-label={\n                isPasswordVisible\n                  ? messages.hidePasswordInput\n                  : messages.showPasswordInput\n              }\n              ripple\n            />\n          )\n        }\n        {...restProps}\n      />\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAM,QAAQ,GAAG;AACf,IAAA,iBAAiB,EAAE,qBAAqB;AACxC,IAAA,iBAAiB,EAAE,qBAAqB;CACzC,CAAA;IAEY,aAAa,GAAG,UAAU,CACrC,UAAC,KAAK,EAAE,GAAG,EAAA;IACD,IAAA,oBAAoB,GAAmB,KAAK,CAAxB,oBAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAA9C,CAAsC,sBAAA,CAAA,CAAF,CAAU;IAC9C,IAAA,EAAA,GAA+C,SAAS,CAAC,KAAK,CAAC,EAA9D,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAAoB,CAAA;IACrE,IAAM,cAAc,GAAG,iBAAiB;AACtC,UAAE,oBAAoB;UACpB,oBAAoB,CAAA;IAExB,QACEA,IAAC,SAAS,EAAA,QAAA,CAAA,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,iBAAiB,GAAG,MAAM,GAAG,UAAU,EAC7C,YAAY,EACV,oBAAoB,GAAG,IAAI,IACzBA,GAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAE,cAAc,EACpB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,uBAAuB,EAAA,YAAA,EAE9B,iBAAiB;kBACb,QAAQ,CAAC,iBAAiB;AAC5B,kBAAE,QAAQ,CAAC,iBAAiB,EAEhC,MAAM,EACN,IAAA,EAAA,CAAA,CACH,EAEC,EAAA,SAAS,CACb,CAAA,EACH;AACH,CAAC;;;;"}

package/dist/components/input/TextInput/TextInput.d.ts

@@ -9,6 +9,7 @@ export declare const TextInput: (props: Omit<Omit<import("react").DetailedHTMLPr
     error?: boolean | undefined;
     hideLabel?: boolean | undefined;
     hidePlaceholder?: boolean | undefined;
+    onClear?: (() => void) | undefined;
     label: string;
     inputRootClassName?: string | undefined;
     helperText?: ReactNode;

package/dist/components/input/TextInput/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAA;AAWpD,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAA;AAE5D;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;qJAoOrB,CAAA"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAA;AAYpD,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAA;AAE5D;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;qJAsPrB,CAAA"}