@audius/harmony 0.4.3 → 0.5.2

package/dist/components/popup-menu/PopupMenu.js

@@ -13,7 +13,7 @@ import { Popup } from '../popup/Popup.js';
 var PopupMenu = forwardRef(function PopupMenu(props, ref) {
     var items = props.items, onClose = props.onClose, renderMenu = props.renderMenu, renderTrigger = props.renderTrigger, dismissOnMouseLeave = props.dismissOnMouseLeave, hideCloseButton = props.hideCloseButton, title = props.title, className = props.className, zIndex = props.zIndex, containerRef = props.containerRef, anchorOrigin = props.anchorOrigin, transformOrigin = props.transformOrigin, id = props.id, fixed = props.fixed, overrideIconColor = props.overrideIconColor;
     var _a = useTheme(), spacing = _a.spacing, typography = _a.typography, color = _a.color;
-    var clickInsideRef = useRef();
+    var clickInsideRef = useRef(null);
     var anchorRef = useRef(null);
     var _b = useState(false), isPopupVisible = _b[0], setIsPopupVisible = _b[1];
     var triggerPopup = useCallback(function (onMouseEnter) {

package/dist/components/popup-menu/PopupMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupMenu.js","sources":["../../../src/components/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef, useState, MouseEvent } from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport cn from 'classnames'\n\nimport { Box } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Popup } from '../popup'\n\nimport { PopupMenuItem, PopupMenuProps } from './types'\n\n/**\n * A menu that shows on top of the UI. Ideal for overflow menus, dropdowns, etc\n */\nexport const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(\n  function PopupMenu(props, ref) {\n    const {\n      items,\n      onClose,\n      renderMenu,\n      renderTrigger,\n      dismissOnMouseLeave,\n      hideCloseButton,\n      title,\n      className,\n      zIndex,\n      containerRef,\n      anchorOrigin,\n      transformOrigin,\n      id,\n      fixed,\n      overrideIconColor\n    } = props\n\n    const { spacing, typography, color } = useTheme()\n    const clickInsideRef = useRef<any>()\n    const anchorRef = useRef<HTMLElement>(null)\n\n    const [isPopupVisible, setIsPopupVisible] = useState<boolean>(false)\n\n    const triggerPopup = useCallback(\n      (onMouseEnter?: boolean) => {\n        if (onMouseEnter && isPopupVisible) return\n        setIsPopupVisible(!isPopupVisible)\n      },\n      [isPopupVisible, setIsPopupVisible]\n    )\n\n    const handlePopupClose = useCallback(() => {\n      setIsPopupVisible(false)\n      if (onClose) onClose()\n    }, [setIsPopupVisible, onClose])\n\n    const handleMenuItemClick = useCallback(\n      (item: PopupMenuItem) => (e: MouseEvent<HTMLElement>) => {\n        e.stopPropagation()\n        item.onClick(e)\n        handlePopupClose()\n      },\n      [handlePopupClose]\n    )\n\n    const triggerId = id ? `${id}-trigger` : undefined\n\n    const triggerProps = {\n      'aria-controls': isPopupVisible ? id : undefined,\n      'aria-haspopup': true,\n      'aria-expanded': isPopupVisible ? ('true' as const) : undefined,\n      id: triggerId\n    }\n\n    const popupCss = {\n      margin: spacing.s,\n      padding: spacing.s,\n      border: `1px solid ${color.border.strong}`\n    }\n\n    const menuItemCss = {\n      fontSize: typography.size.m,\n      fontWeight: typography.weight.demiBold,\n      color: color.text.default,\n      cursor: 'pointer',\n      '&:hover': {\n        color: color.text.white,\n        background: color.secondary.s300,\n        path: {\n          fill: color.icon.white\n        }\n      },\n      '&.destructive': {\n        color: color.status.error,\n        '&:hover': {\n          background: color.status.error,\n          color: color.icon.white\n        }\n      }\n    }\n\n    const iconCss = {\n      path: {\n        fill: overrideIconColor ? undefined : color.text.default\n      }\n    }\n\n    return (\n      <Box ref={clickInsideRef}>\n        {renderTrigger(anchorRef, triggerPopup, triggerProps)}\n        <Popup\n          anchorRef={anchorRef}\n          checkIfClickInside={(target: EventTarget) => {\n            if (target instanceof Element && clickInsideRef) {\n              return clickInsideRef.current.contains(target)\n            }\n            return false\n          }}\n          isVisible={isPopupVisible}\n          showHeader={Boolean(title)}\n          hideCloseButton={hideCloseButton}\n          onClose={handlePopupClose}\n          ref={ref}\n          title={title ?? ''}\n          zIndex={zIndex}\n          containerRef={containerRef}\n          transformOrigin={transformOrigin}\n          anchorOrigin={anchorOrigin}\n          className={className}\n          css={popupCss}\n          dismissOnMouseLeave={dismissOnMouseLeave}\n          fixed={fixed}\n        >\n          {renderMenu ? (\n            renderMenu(items)\n          ) : (\n            <Box\n              as='ul'\n              role='menu'\n              aria-labelledby={triggerId}\n              tabIndex={-1}\n              css={{ all: 'unset' }}\n            >\n              {items.map((item, i) => (\n                <Flex\n                  as='li'\n                  key={typeof item.text === 'string' ? item.text : i}\n                  role='menuitem'\n                  className={cn(item.className, {\n                    destructive: item.destructive\n                  })}\n                  onClick={handleMenuItemClick(item)}\n                  tabIndex={i === 0 ? 0 : -1}\n                  css={menuItemCss}\n                  alignItems='center'\n                  gap='s'\n                  p='s'\n                  ph='m'\n                  borderRadius='s'\n                >\n                  {item.icon ? (\n                    <Flex\n                      css={iconCss}\n                      className={item.iconClassName}\n                      alignItems='center'\n                      justifyContent='center'\n                      w='unit5'\n                      h='unit5'\n                    >\n                      {item.icon}\n                    </Flex>\n                  ) : null}\n                  {item.text}\n                </Flex>\n              ))}\n            </Box>\n          )}\n        </Popup>\n      </Box>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"PopupMenu.js","sources":["../../../src/components/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef, useState, MouseEvent } from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport cn from 'classnames'\n\nimport { Box } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Popup } from '../popup'\n\nimport { PopupMenuItem, PopupMenuProps } from './types'\n\n/**\n * A menu that shows on top of the UI. Ideal for overflow menus, dropdowns, etc\n */\nexport const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(\n  function PopupMenu(props, ref) {\n    const {\n      items,\n      onClose,\n      renderMenu,\n      renderTrigger,\n      dismissOnMouseLeave,\n      hideCloseButton,\n      title,\n      className,\n      zIndex,\n      containerRef,\n      anchorOrigin,\n      transformOrigin,\n      id,\n      fixed,\n      overrideIconColor\n    } = props\n\n    const { spacing, typography, color } = useTheme()\n    const clickInsideRef = useRef<any>(null)\n    const anchorRef = useRef<HTMLElement>(null)\n\n    const [isPopupVisible, setIsPopupVisible] = useState<boolean>(false)\n\n    const triggerPopup = useCallback(\n      (onMouseEnter?: boolean) => {\n        if (onMouseEnter && isPopupVisible) return\n        setIsPopupVisible(!isPopupVisible)\n      },\n      [isPopupVisible, setIsPopupVisible]\n    )\n\n    const handlePopupClose = useCallback(() => {\n      setIsPopupVisible(false)\n      if (onClose) onClose()\n    }, [setIsPopupVisible, onClose])\n\n    const handleMenuItemClick = useCallback(\n      (item: PopupMenuItem) => (e: MouseEvent<HTMLElement>) => {\n        e.stopPropagation()\n        item.onClick(e)\n        handlePopupClose()\n      },\n      [handlePopupClose]\n    )\n\n    const triggerId = id ? `${id}-trigger` : undefined\n\n    const triggerProps = {\n      'aria-controls': isPopupVisible ? id : undefined,\n      'aria-haspopup': true,\n      'aria-expanded': isPopupVisible ? ('true' as const) : undefined,\n      id: triggerId\n    }\n\n    const popupCss = {\n      margin: spacing.s,\n      padding: spacing.s,\n      border: `1px solid ${color.border.strong}`\n    }\n\n    const menuItemCss = {\n      fontSize: typography.size.m,\n      fontWeight: typography.weight.demiBold,\n      color: color.text.default,\n      cursor: 'pointer',\n      '&:hover': {\n        color: color.text.white,\n        background: color.secondary.s300,\n        path: {\n          fill: color.icon.white\n        }\n      },\n      '&.destructive': {\n        color: color.status.error,\n        '&:hover': {\n          background: color.status.error,\n          color: color.icon.white\n        }\n      }\n    }\n\n    const iconCss = {\n      path: {\n        fill: overrideIconColor ? undefined : color.text.default\n      }\n    }\n\n    return (\n      <Box ref={clickInsideRef}>\n        {renderTrigger(anchorRef, triggerPopup, triggerProps)}\n        <Popup\n          anchorRef={anchorRef}\n          checkIfClickInside={(target: EventTarget) => {\n            if (target instanceof Element && clickInsideRef) {\n              return clickInsideRef.current.contains(target)\n            }\n            return false\n          }}\n          isVisible={isPopupVisible}\n          showHeader={Boolean(title)}\n          hideCloseButton={hideCloseButton}\n          onClose={handlePopupClose}\n          ref={ref}\n          title={title ?? ''}\n          zIndex={zIndex}\n          containerRef={containerRef}\n          transformOrigin={transformOrigin}\n          anchorOrigin={anchorOrigin}\n          className={className}\n          css={popupCss}\n          dismissOnMouseLeave={dismissOnMouseLeave}\n          fixed={fixed}\n        >\n          {renderMenu ? (\n            renderMenu(items)\n          ) : (\n            <Box\n              as='ul'\n              role='menu'\n              aria-labelledby={triggerId}\n              tabIndex={-1}\n              css={{ all: 'unset' }}\n            >\n              {items.map((item, i) => (\n                <Flex\n                  as='li'\n                  key={typeof item.text === 'string' ? item.text : i}\n                  role='menuitem'\n                  className={cn(item.className, {\n                    destructive: item.destructive\n                  })}\n                  onClick={handleMenuItemClick(item)}\n                  tabIndex={i === 0 ? 0 : -1}\n                  css={menuItemCss}\n                  alignItems='center'\n                  gap='s'\n                  p='s'\n                  ph='m'\n                  borderRadius='s'\n                >\n                  {item.icon ? (\n                    <Flex\n                      css={iconCss}\n                      className={item.iconClassName}\n                      alignItems='center'\n                      justifyContent='center'\n                      w='unit5'\n                      h='unit5'\n                    >\n                      {item.icon}\n                    </Flex>\n                  ) : null}\n                  {item.text}\n                </Flex>\n              ))}\n            </Box>\n          )}\n        </Popup>\n      </Box>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/scrollbar/Scrollbar.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import PerfectScrollbar from 'react-perfect-scrollbar';
-export declare const useScrollbarRef: () => RefObject<HTMLElement> | null;
+export declare const useScrollbarRef: () => RefObject<HTMLElement | null> | null;
 /**
  * A container with a custom scrollbar, meant to be used for small scrolling areas within a
  * page/view (e.g. a scrolling navigation bar), not the entire page itself.
@@ -10,5 +10,5 @@ export declare const useScrollbarRef: () => RefObject<HTMLElement> | null;
 export declare const Scrollbar: (props: import("react-perfect-scrollbar").ScrollBarProps & {
     forward?: boolean | undefined;
     isHidden?: boolean | undefined;
-} & import("react").RefAttributes<PerfectScrollbar>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+} & import("react").RefAttributes<PerfectScrollbar>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 //# sourceMappingURL=Scrollbar.d.ts.map

package/dist/components/scrollbar/Scrollbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,SAAS,EACV,MAAM,OAAO,CAAA;AAId,OAAO,gBAAgB,MAAM,yBAAyB,CAAA;AAYtD,eAAO,MAAM,eAAe,qCAE3B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS;;;qJA8ErB,CAAA"}
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,SAAS,EACV,MAAM,OAAO,CAAA;AAId,OAAO,gBAAgB,MAAM,yBAAyB,CAAA;AAYtD,eAAO,MAAM,eAAe,4CAE3B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS;;;yJA8ErB,CAAA"}

package/dist/components/scrollbar/Scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  forwardRef,\n  Ref,\n  useCallback,\n  useId,\n  createContext,\n  useContext,\n  RefObject\n} from 'react'\n\nimport { ResizeObserver } from '@juggle/resize-observer'\nimport cn from 'classnames'\nimport PerfectScrollbar from 'react-perfect-scrollbar'\nimport useMeasure from 'react-use-measure'\n\nimport styles from './Scrollbar.module.css'\nimport { ScrollbarProps } from './types'\n\nconst ScrollbarContext = createContext<{\n  scrollBarRef: RefObject<HTMLElement> | null\n}>({\n  scrollBarRef: null\n})\n\nexport const useScrollbarRef = () => {\n  return useContext(ScrollbarContext).scrollBarRef\n}\n\n/**\n * A container with a custom scrollbar, meant to be used for small scrolling areas within a\n * page/view (e.g. a scrolling navigation bar), not the entire page itself.\n * `Scrollbar` uses react-perfect-scrollbar (https://www.npmjs.com/package/react-perfect-scrollbar)\n * under the hood. For advanced use cases, refer to the documentation.\n */\nexport const Scrollbar = forwardRef(\n  (\n    { children, className, id, forward, isHidden, ...props }: ScrollbarProps,\n    forwardedRef: Ref<PerfectScrollbar>\n  ) => {\n    // Do not remove:\n    // useMeasure ref is required for infinite scrolling to work\n    const [ref] = useMeasure({ polyfill: ResizeObserver })\n    const containerRef = useRef<HTMLElement | null>(null)\n    const timerRef = useRef<NodeJS.Timeout | null>(null)\n    const reactId = useId()\n    const elementId = id || reactId\n\n    useEffect(() => {\n      return () => {\n        if (timerRef.current !== null) {\n          clearTimeout(timerRef.current)\n        }\n      }\n    }, [])\n\n    const hideScrollbar = useCallback(() => {\n      const element = document.getElementById(elementId)\n      if (element) {\n        element.classList.remove('scrollbar--hovered-visible')\n      }\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current)\n      }\n    }, [elementId, timerRef])\n\n    const showScrollbar = useCallback(() => {\n      if (isHidden) return\n      const element = document.getElementById(elementId)\n      if (element) {\n        element.classList.add('scrollbar--hovered-visible')\n      }\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current)\n      }\n      timerRef.current = setTimeout(() => {\n        const element = document.getElementById(elementId)\n        if (element) {\n          element.classList.remove('scrollbar--hovered-visible')\n        }\n      }, 1400)\n    }, [elementId, timerRef, isHidden])\n\n    useEffect(() => {\n      if (isHidden) {\n        hideScrollbar()\n      }\n    }, [isHidden, hideScrollbar])\n\n    const content = forward ? (\n      children\n    ) : (\n      <div ref={ref} className={styles.scrollbar}>\n        {children}\n      </div>\n    )\n\n    return (\n      <ScrollbarContext.Provider value={{ scrollBarRef: containerRef }}>\n        <PerfectScrollbar\n          {...props}\n          ref={forwardedRef}\n          containerRef={(ref) => (containerRef.current = ref)}\n          id={elementId}\n          className={cn(styles.scrollbar, className)}\n          onMouseEnter={showScrollbar}\n          onMouseLeave={hideScrollbar}\n        >\n          {content}\n        </PerfectScrollbar>\n      </ScrollbarContext.Provider>\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  forwardRef,\n  Ref,\n  useCallback,\n  useId,\n  createContext,\n  useContext,\n  RefObject\n} from 'react'\n\nimport { ResizeObserver } from '@juggle/resize-observer'\nimport cn from 'classnames'\nimport PerfectScrollbar from 'react-perfect-scrollbar'\nimport useMeasure from 'react-use-measure'\n\nimport styles from './Scrollbar.module.css'\nimport { ScrollbarProps } from './types'\n\nconst ScrollbarContext = createContext<{\n  scrollBarRef: RefObject<HTMLElement | null> | null\n}>({\n  scrollBarRef: null\n})\n\nexport const useScrollbarRef = () => {\n  return useContext(ScrollbarContext).scrollBarRef\n}\n\n/**\n * A container with a custom scrollbar, meant to be used for small scrolling areas within a\n * page/view (e.g. a scrolling navigation bar), not the entire page itself.\n * `Scrollbar` uses react-perfect-scrollbar (https://www.npmjs.com/package/react-perfect-scrollbar)\n * under the hood. For advanced use cases, refer to the documentation.\n */\nexport const Scrollbar = forwardRef(\n  (\n    { children, className, id, forward, isHidden, ...props }: ScrollbarProps,\n    forwardedRef: Ref<PerfectScrollbar>\n  ) => {\n    // Do not remove:\n    // useMeasure ref is required for infinite scrolling to work\n    const [ref] = useMeasure({ polyfill: ResizeObserver })\n    const containerRef = useRef<HTMLElement | null>(null)\n    const timerRef = useRef<NodeJS.Timeout | null>(null)\n    const reactId = useId()\n    const elementId = id || reactId\n\n    useEffect(() => {\n      return () => {\n        if (timerRef.current !== null) {\n          clearTimeout(timerRef.current)\n        }\n      }\n    }, [])\n\n    const hideScrollbar = useCallback(() => {\n      const element = document.getElementById(elementId)\n      if (element) {\n        element.classList.remove('scrollbar--hovered-visible')\n      }\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current)\n      }\n    }, [elementId, timerRef])\n\n    const showScrollbar = useCallback(() => {\n      if (isHidden) return\n      const element = document.getElementById(elementId)\n      if (element) {\n        element.classList.add('scrollbar--hovered-visible')\n      }\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current)\n      }\n      timerRef.current = setTimeout(() => {\n        const element = document.getElementById(elementId)\n        if (element) {\n          element.classList.remove('scrollbar--hovered-visible')\n        }\n      }, 1400)\n    }, [elementId, timerRef, isHidden])\n\n    useEffect(() => {\n      if (isHidden) {\n        hideScrollbar()\n      }\n    }, [isHidden, hideScrollbar])\n\n    const content = forward ? (\n      children\n    ) : (\n      <div ref={ref} className={styles.scrollbar}>\n        {children}\n      </div>\n    )\n\n    return (\n      <ScrollbarContext.Provider value={{ scrollBarRef: containerRef }}>\n        <PerfectScrollbar\n          {...props}\n          ref={forwardedRef}\n          containerRef={(ref) => (containerRef.current = ref)}\n          id={elementId}\n          className={cn(styles.scrollbar, className)}\n          onMouseEnter={showScrollbar}\n          onMouseLeave={hideScrollbar}\n        >\n          {content}\n        </PerfectScrollbar>\n      </ScrollbarContext.Provider>\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/segmented-control/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;GAGG;AACH,eAAO,MAAM,gBAAgB,yGA4K5B,CAAA"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;GAGG;AACH,eAAO,MAAM,gBAAgB,yGAsN5B,CAAA"}

package/dist/components/segmented-control/SegmentedControl.js

@@ -1,8 +1,7 @@
 import { __assign } from '../../_virtual/_tslib.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { useRef, createRef, useState, useEffect, Fragment } from 'react';
+import { useRef, createRef, useState, useEffect, useCallback, useLayoutEffect, Fragment } from 'react';
 import { ResizeObserver } from '@juggle/resize-observer';
-import { useSpring, animated } from '@react-spring/web';
 import cn from 'classnames';
 import { mergeRefs } from 'react-merge-refs';
 import useMeasure from 'react-use-measure';
@@ -20,19 +19,18 @@ var SegmentedControl = function (props) {
     var optionRefs = useRef(options.map(function (_) { return createRef(); }));
     var _d = useState((_c = (_b = options[0]) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : ''), localSelected = _d[0], setLocalSelected = _d[1];
     var _e = useState(0), maxOptionWidth = _e[0], setMaxOptionWidth = _e[1];
-    var selectedOption = selected || localSelected;
+    var selectedOption = selected !== null && selected !== void 0 ? selected : localSelected;
     var onSetSelected = function (option) {
         // Call props function if controlled
         if (onSelectOption)
             onSelectOption(option);
         setLocalSelected(option);
     };
-    var _f = useSpring(function () { return ({
-        to: { left: '0px', width: '0px' }
-    }); }), tabProps = _f[0], tabApi = _f[1];
+    // Background pill position - use state for direct control
+    var _f = useState({ left: 0, width: 0, ready: false, shouldAnimate: false }), pillStyle = _f[0], setPillStyle = _f[1];
     // Update refs when options change
     useEffect(function () {
-        optionRefs.current = options.map(function (_) { return createRef(); });
+        optionRefs.current = options.map(function (_, i) { var _a; return (_a = optionRefs.current[i]) !== null && _a !== void 0 ? _a : createRef(); });
     }, [options]);
     // Update localSelected if current selection is no longer valid
     useEffect(function () {
@@ -55,36 +53,66 @@ var SegmentedControl = function (props) {
     }), selectedRef = _g[0], bounds = _g[1];
     var _h = useState(false), forceRefresh = _h[0], setForceRefresh = _h[1];
     useEffect(function () {
-        setTimeout(function () {
-            setForceRefresh(!forceRefresh);
+        if (!forceRefreshAfterMs)
+            return;
+        var id = setTimeout(function () {
+            setForceRefresh(function (prev) { return !prev; });
         }, forceRefreshAfterMs);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    useEffect(function () {
-        var _a, _b;
+        return function () {
+            clearTimeout(id);
+        };
+    }, [forceRefreshAfterMs]);
+    // Track the last selected option to determine when to animate
+    var lastSelectedOption = useRef(null);
+    // Update pill position
+    var updatePillPosition = useCallback(function () {
+        var _a;
         var selectedRefIdx = options.findIndex(function (option) { return option.key === selectedOption; });
         if (selectedRefIdx === -1)
             selectedRefIdx = 0;
-        var _c = (_b = (_a = optionRefs.current[selectedRefIdx]) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : { clientWidth: 0, offsetLeft: 0 }, width = _c.clientWidth, left = _c.offsetLeft;
-        tabApi.start({
-            to: { left: "".concat(left, "px"), width: "".concat(width, "px") }
+        var selectedEl = (_a = optionRefs.current[selectedRefIdx]) === null || _a === void 0 ? void 0 : _a.current;
+        if (!selectedEl)
+            return;
+        var width = selectedEl.clientWidth;
+        var left = selectedEl.offsetLeft;
+        // Don't position if we don't have valid measurements
+        if (width === 0)
+            return;
+        // Determine if we should animate (only when user changes selection)
+        var isUserSelection = lastSelectedOption.current !== null &&
+            lastSelectedOption.current !== selectedOption;
+        setPillStyle(function (prev) {
+            // Skip if position hasn't changed
+            if (prev.left === left && prev.width === width && prev.ready) {
+                return prev;
+            }
+            return { left: left, width: width, ready: true, shouldAnimate: isUserSelection };
+        });
+        lastSelectedOption.current = selectedOption;
+    }, [selectedOption, options]);
+    // Run on mount and when dependencies change
+    useLayoutEffect(function () {
+        updatePillPosition();
+    }, [updatePillPosition, equalWidth, bounds, forceRefresh]);
+    // Also update after a short delay to handle any layout settling
+    useEffect(function () {
+        var id = requestAnimationFrame(function () {
+            updatePillPosition();
         });
-    }, [
-        options,
-        equalWidth,
-        selectedOption,
-        selected,
-        tabApi,
-        localSelected,
-        optionRefs,
-        bounds,
-        forceRefresh
-    ]);
+        return function () { return cancelAnimationFrame(id); };
+    }, [updatePillPosition]);
     return (jsxs("div", __assign({ className: cn(styles.tabs, className, (_a = {},
             _a[styles.containerFullWidth] = !!fullWidth,
             _a[styles.isMobile] = isMobile,
             _a[styles.disabled] = disabled,
-            _a)), role: 'radiogroup', "aria-label": label, "aria-labelledby": ariaLabelledBy }, { children: [jsx(animated.div, { className: styles.tabBackground, style: tabProps }), options.map(function (option, idx) {
+            _a)), role: 'radiogroup', "aria-label": label, "aria-labelledby": ariaLabelledBy }, { children: [jsx("div", { className: styles.tabBackground, style: {
+                    left: "".concat(pillStyle.left, "px"),
+                    width: "".concat(pillStyle.width, "px"),
+                    opacity: pillStyle.ready ? 1 : 0,
+                    transition: pillStyle.shouldAnimate
+                        ? 'left 0.3s cubic-bezier(0.34, 1.1, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.1, 0.64, 1)'
+                        : 'none'
+                } }), options.map(function (option, idx) {
                 var _a, _b;
                 var isOptionDisabled = disabled || option.disabled;
                 var isSelected = option.key === selectedOption;

package/dist/components/segmented-control/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { createRef, Fragment, useState, useRef, useEffect } from 'react'\n\nimport { ResizeObserver } from '@juggle/resize-observer'\nimport { useSpring, animated } from '@react-spring/web'\nimport cn from 'classnames'\nimport { mergeRefs } from 'react-merge-refs'\nimport useMeasure from 'react-use-measure'\n\nimport { Text } from '~harmony/components/text'\n\nimport styles from './SegmentedControl.module.css'\nimport { SegmentedControlProps } from './types'\n\n/**\n * A hybrid somewhere between a button group, radio buttons, and tabs;\n * segmented controls are used to switch between different options or views.\n */\nexport const SegmentedControl = <T extends string>(\n  props: SegmentedControlProps<T>\n) => {\n  const {\n    options,\n    selected,\n    onSelectOption,\n    className,\n    fullWidth,\n    isMobile,\n    disabled,\n    label,\n    'aria-labelledby': ariaLabelledBy,\n    equalWidth,\n    forceRefreshAfterMs\n  } = props\n  const optionRefs = useRef(options.map((_) => createRef<HTMLLabelElement>()))\n  const [localSelected, setLocalSelected] = useState(options[0]?.key ?? '')\n  const [maxOptionWidth, setMaxOptionWidth] = useState(0)\n\n  const selectedOption = selected || localSelected\n\n  const onSetSelected = (option: T) => {\n    // Call props function if controlled\n    if (onSelectOption) onSelectOption(option)\n    setLocalSelected(option)\n  }\n\n  const [tabProps, tabApi] = useSpring(() => ({\n    to: { left: '0px', width: '0px' }\n  }))\n\n  // Update refs when options change\n  useEffect(() => {\n    optionRefs.current = options.map((_) => createRef<HTMLLabelElement>())\n  }, [options])\n\n  // Update localSelected if current selection is no longer valid\n  useEffect(() => {\n    if (\n      options.length > 0 &&\n      !options.some((option) => option.key === localSelected)\n    ) {\n      setLocalSelected(options[0].key)\n    }\n  }, [options, localSelected])\n\n  useEffect(() => {\n    setMaxOptionWidth(\n      optionRefs.current.reduce((currentMax, ref) => {\n        const rect = ref.current?.getBoundingClientRect()\n        return Math.max(rect?.width ?? 0, currentMax)\n      }, 0)\n    )\n  }, [options])\n\n  // Watch for resizes and repositions so that we move and resize the slider appropriately\n  const [selectedRef, bounds] = useMeasure({\n    offsetSize: true,\n    polyfill: ResizeObserver\n  })\n\n  const [forceRefresh, setForceRefresh] = useState(false)\n  useEffect(() => {\n    setTimeout(() => {\n      setForceRefresh(!forceRefresh)\n    }, forceRefreshAfterMs)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    let selectedRefIdx = options.findIndex(\n      (option) => option.key === selectedOption\n    )\n    if (selectedRefIdx === -1) selectedRefIdx = 0\n\n    const { clientWidth: width, offsetLeft: left } = optionRefs.current[\n      selectedRefIdx\n    ]?.current ?? { clientWidth: 0, offsetLeft: 0 }\n\n    tabApi.start({\n      to: { left: `${left}px`, width: `${width}px` }\n    })\n  }, [\n    options,\n    equalWidth,\n    selectedOption,\n    selected,\n    tabApi,\n    localSelected,\n    optionRefs,\n    bounds,\n    forceRefresh\n  ])\n\n  return (\n    <div\n      className={cn(styles.tabs, className, {\n        [styles.containerFullWidth]: !!fullWidth,\n        [styles.isMobile]: isMobile,\n        [styles.disabled]: disabled\n      })}\n      role='radiogroup'\n      aria-label={label}\n      aria-labelledby={ariaLabelledBy}\n    >\n      <animated.div className={styles.tabBackground} style={tabProps} />\n      {options.map((option, idx) => {\n        const isOptionDisabled = disabled || option.disabled\n        const isSelected = option.key === selectedOption\n\n        return (\n          <Fragment key={option.key}>\n            <label\n              ref={\n                isSelected\n                  ? mergeRefs([optionRefs.current[idx], selectedRef])\n                  : optionRefs.current[idx]\n              }\n              className={cn(styles.tab, {\n                [styles.tabFullWidth]: !!fullWidth,\n                [styles.disabled]: !disabled && option.disabled,\n                [styles.isMobile]: isMobile\n              })}\n              style={\n                equalWidth && maxOptionWidth\n                  ? { width: `${maxOptionWidth}px` }\n                  : undefined\n              }\n            >\n              {option.leftIcon && (\n                <option.leftIcon\n                  size='s'\n                  color={isSelected ? 'default' : 'subdued'}\n                />\n              )}\n              {option.icon}\n              <input\n                type='radio'\n                checked={isSelected}\n                onChange={() => {\n                  onSetSelected(option.key)\n                }}\n                disabled={isOptionDisabled}\n              />\n              <Text\n                variant='body'\n                strength='strong'\n                color={isSelected ? 'default' : 'subdued'}\n                lineHeight='single'\n              >\n                {option.text}\n              </Text>\n            </label>\n            {idx !== options.length - 1 ? (\n              <div\n                className={cn(styles.separator, {\n                  [styles.invisible]:\n                    // Hide separator right of the selected option\n                    selectedOption === option.key ||\n                    // Hide separator right of the last option\n                    idx === options.length - 1 ||\n                    // Hide separator right of an option if the next one is selected\n                    selectedOption === options[idx + 1].key\n                })}\n              />\n            ) : null}\n          </Fragment>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import {\n  createRef,\n  Fragment,\n  useState,\n  useRef,\n  useEffect,\n  useLayoutEffect,\n  useCallback\n} from 'react'\n\nimport { ResizeObserver } from '@juggle/resize-observer'\nimport cn from 'classnames'\nimport { mergeRefs } from 'react-merge-refs'\nimport useMeasure from 'react-use-measure'\n\nimport { Text } from '~harmony/components/text'\n\nimport styles from './SegmentedControl.module.css'\nimport { SegmentedControlProps } from './types'\n\n/**\n * A hybrid somewhere between a button group, radio buttons, and tabs;\n * segmented controls are used to switch between different options or views.\n */\nexport const SegmentedControl = <T extends string>(\n  props: SegmentedControlProps<T>\n) => {\n  const {\n    options,\n    selected,\n    onSelectOption,\n    className,\n    fullWidth,\n    isMobile,\n    disabled,\n    label,\n    'aria-labelledby': ariaLabelledBy,\n    equalWidth,\n    forceRefreshAfterMs\n  } = props\n  const optionRefs = useRef(options.map((_) => createRef<HTMLLabelElement>()))\n  const [localSelected, setLocalSelected] = useState(options[0]?.key ?? '')\n  const [maxOptionWidth, setMaxOptionWidth] = useState(0)\n\n  const selectedOption = selected ?? localSelected\n\n  const onSetSelected = (option: T) => {\n    // Call props function if controlled\n    if (onSelectOption) onSelectOption(option)\n    setLocalSelected(option)\n  }\n\n  // Background pill position - use state for direct control\n  const [pillStyle, setPillStyle] = useState<{\n    left: number\n    width: number\n    ready: boolean\n    shouldAnimate: boolean\n  }>({ left: 0, width: 0, ready: false, shouldAnimate: false })\n\n  // Update refs when options change\n  useEffect(() => {\n    optionRefs.current = options.map(\n      (_, i) => optionRefs.current[i] ?? createRef<HTMLLabelElement>()\n    )\n  }, [options])\n\n  // Update localSelected if current selection is no longer valid\n  useEffect(() => {\n    if (\n      options.length > 0 &&\n      !options.some((option) => option.key === localSelected)\n    ) {\n      setLocalSelected(options[0].key)\n    }\n  }, [options, localSelected])\n\n  useEffect(() => {\n    setMaxOptionWidth(\n      optionRefs.current.reduce((currentMax, ref) => {\n        const rect = ref.current?.getBoundingClientRect()\n        return Math.max(rect?.width ?? 0, currentMax)\n      }, 0)\n    )\n  }, [options])\n\n  // Watch for resizes and repositions so that we move and resize the slider appropriately\n  const [selectedRef, bounds] = useMeasure({\n    offsetSize: true,\n    polyfill: ResizeObserver\n  })\n\n  const [forceRefresh, setForceRefresh] = useState(false)\n  useEffect(() => {\n    if (!forceRefreshAfterMs) return\n    const id = setTimeout(() => {\n      setForceRefresh((prev) => !prev)\n    }, forceRefreshAfterMs)\n    return () => {\n      clearTimeout(id)\n    }\n  }, [forceRefreshAfterMs])\n\n  // Track the last selected option to determine when to animate\n  const lastSelectedOption = useRef<string | null>(null)\n\n  // Update pill position\n  const updatePillPosition = useCallback(() => {\n    let selectedRefIdx = options.findIndex(\n      (option) => option.key === selectedOption\n    )\n    if (selectedRefIdx === -1) selectedRefIdx = 0\n\n    const selectedEl = optionRefs.current[selectedRefIdx]?.current\n    if (!selectedEl) return\n\n    const width = selectedEl.clientWidth\n    const left = selectedEl.offsetLeft\n\n    // Don't position if we don't have valid measurements\n    if (width === 0) return\n\n    // Determine if we should animate (only when user changes selection)\n    const isUserSelection =\n      lastSelectedOption.current !== null &&\n      lastSelectedOption.current !== selectedOption\n\n    setPillStyle((prev) => {\n      // Skip if position hasn't changed\n      if (prev.left === left && prev.width === width && prev.ready) {\n        return prev\n      }\n      return { left, width, ready: true, shouldAnimate: isUserSelection }\n    })\n\n    lastSelectedOption.current = selectedOption\n  }, [selectedOption, options])\n\n  // Run on mount and when dependencies change\n  useLayoutEffect(() => {\n    updatePillPosition()\n  }, [updatePillPosition, equalWidth, bounds, forceRefresh])\n\n  // Also update after a short delay to handle any layout settling\n  useEffect(() => {\n    const id = requestAnimationFrame(() => {\n      updatePillPosition()\n    })\n    return () => cancelAnimationFrame(id)\n  }, [updatePillPosition])\n\n  return (\n    <div\n      className={cn(styles.tabs, className, {\n        [styles.containerFullWidth]: !!fullWidth,\n        [styles.isMobile]: isMobile,\n        [styles.disabled]: disabled\n      })}\n      role='radiogroup'\n      aria-label={label}\n      aria-labelledby={ariaLabelledBy}\n    >\n      <div\n        className={styles.tabBackground}\n        style={{\n          left: `${pillStyle.left}px`,\n          width: `${pillStyle.width}px`,\n          opacity: pillStyle.ready ? 1 : 0,\n          transition: pillStyle.shouldAnimate\n            ? 'left 0.3s cubic-bezier(0.34, 1.1, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.1, 0.64, 1)'\n            : 'none'\n        }}\n      />\n      {options.map((option, idx) => {\n        const isOptionDisabled = disabled || option.disabled\n        const isSelected = option.key === selectedOption\n\n        return (\n          <Fragment key={option.key}>\n            <label\n              ref={\n                isSelected\n                  ? mergeRefs([optionRefs.current[idx], selectedRef])\n                  : optionRefs.current[idx]\n              }\n              className={cn(styles.tab, {\n                [styles.tabFullWidth]: !!fullWidth,\n                [styles.disabled]: !disabled && option.disabled,\n                [styles.isMobile]: isMobile\n              })}\n              style={\n                equalWidth && maxOptionWidth\n                  ? { width: `${maxOptionWidth}px` }\n                  : undefined\n              }\n            >\n              {option.leftIcon && (\n                <option.leftIcon\n                  size='s'\n                  color={isSelected ? 'default' : 'subdued'}\n                />\n              )}\n              {option.icon}\n              <input\n                type='radio'\n                checked={isSelected}\n                onChange={() => {\n                  onSetSelected(option.key)\n                }}\n                disabled={isOptionDisabled}\n              />\n              <Text\n                variant='body'\n                strength='strong'\n                color={isSelected ? 'default' : 'subdued'}\n                lineHeight='single'\n              >\n                {option.text}\n              </Text>\n            </label>\n            {idx !== options.length - 1 ? (\n              <div\n                className={cn(styles.separator, {\n                  [styles.invisible]:\n                    // Hide separator right of the selected option\n                    selectedOption === option.key ||\n                    // Hide separator right of the last option\n                    idx === options.length - 1 ||\n                    // Hide separator right of an option if the next one is selected\n                    selectedOption === options[idx + 1].key\n                })}\n              />\n            ) : null}\n          </Fragment>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/select/Select/Select.d.ts

@@ -18,5 +18,5 @@ export declare const Select: <Value extends string>(props: {
     InputProps?: Partial<import("../../input").TextInputProps> | undefined;
     menuProps?: (Partial<MenuProps> & Partial<import("../../internal/Menu").MenuContentProps>) | undefined;
     clearable?: boolean | undefined;
-} & Omit<import("../../input").TextInputProps, "children" | "value" | "onChange"> & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+} & Omit<import("../../input").TextInputProps, "children" | "value" | "onChange"> & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 //# sourceMappingURL=Select.d.ts.map

package/dist/components/select/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/Select/Select.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAqB,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAiBlE;;;;GAIG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;qOAwLjB,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/Select/Select.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAqB,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAiBlE;;;;GAIG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;yOA2LjB,CAAA"}

package/dist/components/select/Select/Select.js

@@ -10,9 +10,11 @@ import { TextInput } from '../../input/TextInput/TextInput.js';
 import '../../input/TextInput/types.js';
 import '../../input/PasswordInput/PasswordInput.js';
 import '../../input/TokenAmountInput/TokenAmountInput.js';
+import '../../input/TextArea/TextArea.js';
 import { useControlled } from '../../../hooks/useControlled.js';
-import { IconCloseAlt, IconCaretDown } from '../../../icons/utilityIcons.js';
 import '@emotion/css';
+import { IconCaretDown } from '../../../icons/individual/IconCaretDown.js';
+import { IconCloseAlt } from '../../../icons/individual/IconCloseAlt.js';
 import '../../layout/Box/Box.js';
 import { Flex } from '../../layout/Flex/Flex.js';
 import '../../skeleton/Skeleton.js';
@@ -55,6 +57,7 @@ import '../../../hooks/useHotKeys.js';
 import { MenuItem } from '../../internal/MenuItem.js';
 import { Menu, MenuContent } from '../../internal/Menu.js';
 import { OptionKeyHandler } from '../../internal/OptionKeyHandler.js';
+import 'react-dom';
 
 var messages = {
     noMatches: 'No matches'
@@ -144,7 +147,9 @@ var Select = forwardRef(function Select(props, ref) {
                         left: spacing.unit1,
                         opacity: isOpen ? 0.5 : 1
                     });
-                }, disabled: true }))) : null, jsx(Menu, __assign({ anchorRef: anchorRef, isVisible: isOpen, onClose: function () { return setIsOpen(false); } }, defaultMenuProps, { PaperProps: menuProps === null || menuProps === void 0 ? void 0 : menuProps.PaperProps }, { children: jsx(MenuContent, __assign({ maxHeight: menuProps === null || menuProps === void 0 ? void 0 : menuProps.maxHeight, width: menuProps === null || menuProps === void 0 ? void 0 : menuProps.width, scrollRef: scrollRef, MenuListProps: menuProps === null || menuProps === void 0 ? void 0 : menuProps.MenuListProps, "aria-label": (_c = selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : label) !== null && _c !== void 0 ? _c : props['aria-label'], "aria-activedescendant": selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label }, { children: children
+                }, disabled: true }))) : null, jsx(Menu, __assign({ anchorRef: anchorRef, isVisible: isOpen, onClose: function () { return setIsOpen(false); } }, defaultMenuProps, (menuProps && {
+                takeWidthOfAnchor: menuProps.takeWidthOfAnchor
+            }), { PaperProps: menuProps === null || menuProps === void 0 ? void 0 : menuProps.PaperProps }, { children: jsx(MenuContent, __assign({ maxHeight: menuProps === null || menuProps === void 0 ? void 0 : menuProps.maxHeight, width: menuProps === null || menuProps === void 0 ? void 0 : menuProps.width, scrollRef: scrollRef, MenuListProps: menuProps === null || menuProps === void 0 ? void 0 : menuProps.MenuListProps, "aria-label": (_c = selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : label) !== null && _c !== void 0 ? _c : props['aria-label'], "aria-activedescendant": selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label }, { children: children
                         ? children({ onChange: handleChange, options: optionElements })
                         : optionElements })) }))] })));
 });

package/dist/components/select/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select/Select.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useMemo,\n  Ref,\n  useEffect,\n  MouseEvent\n} from 'react'\n\nimport { mergeRefs } from 'react-merge-refs'\n\nimport { TextInput } from '~harmony/components/input'\n\nimport { useControlled } from '../../../hooks/useControlled'\nimport { IconCaretDown, IconCloseAlt } from '../../../icons'\nimport { Menu, MenuContent, MenuProps } from '../../internal/Menu'\nimport { MenuItem } from '../../internal/MenuItem'\nimport { OptionKeyHandler } from '../../internal/OptionKeyHandler'\nimport { Flex } from '../../layout'\nimport { Text } from '../../text'\n\nimport { SelectProps } from './types'\n\nconst messages = {\n  noMatches: 'No matches'\n}\n\nconst defaultMenuProps: Partial<MenuProps> = {\n  anchorOrigin: { horizontal: 'left', vertical: 'bottom' },\n  transformOrigin: { horizontal: 'left', vertical: 'top' }\n}\n\n/**\n * A form input used for selecting a value: when collapsed it shows the\n * currently selected option and when expanded, it shows a scrollable list\n * of predefined options for the user to choose from.\n */\nexport const Select = forwardRef(function Select<Value extends string>(\n  props: SelectProps<Value>,\n  ref: Ref<HTMLInputElement>\n) {\n  const {\n    value: valueProp,\n    options,\n    menuProps,\n    onChange,\n    onClick,\n    clearable,\n    children,\n    renderSelectedOptionLabel: renderSelectedOptionlabel,\n    ...other\n  } = props\n\n  const { label, hideLabel } = other\n\n  const [value, setValue] = useControlled({\n    controlledProp: valueProp,\n    defaultValue: null,\n    stateName: 'selection',\n    componentName: 'Select'\n  })\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const selectedOption = options.find((option) => option.value === value)\n  const selectedLabel = selectedOption\n    ? (renderSelectedOptionlabel?.(selectedOption) ??\n      selectedOption.label ??\n      selectedOption.value)\n    : ''\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const optionRefs = useRef<HTMLButtonElement[]>([])\n  const scrollRef = useRef<HTMLDivElement>(null)\n\n  const handleChange = useCallback(\n    (value: Value) => {\n      setValue(value)\n      setInputValue('')\n      onChange?.(value)\n      setIsOpen(false)\n    },\n    [onChange, setValue]\n  )\n\n  useEffect(() => {\n    if (isOpen) {\n      // Focus the input after the popup is open\n      setTimeout(() => {\n        inputRef.current?.focus({ preventScroll: true })\n      }, 0)\n    }\n  }, [isOpen])\n\n  const filteredOptions = useMemo(\n    () =>\n      options.filter(({ value, label }) => {\n        return (\n          !inputValue ||\n          label?.toLowerCase().includes(inputValue.toLowerCase()) ||\n          value.toLowerCase().includes(inputValue.toLowerCase())\n        )\n      }),\n    [options, inputValue]\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLInputElement>) => {\n      setIsOpen(true)\n      onClick?.(e)\n    },\n    [onClick]\n  )\n\n  const handleClickIcon = useCallback(\n    (e: MouseEvent<SVGSVGElement>) => {\n      e.stopPropagation()\n      e.preventDefault()\n      if (value !== null && clearable) {\n        setValue(null)\n        // @ts-ignore\n        onChange?.(null)\n      } else {\n        setIsOpen((isOpen: boolean) => !isOpen)\n      }\n    },\n    [value, clearable, setValue, onChange]\n  )\n\n  const Icon = value !== null && clearable ? IconCloseAlt : IconCaretDown\n\n  const optionElements = (\n    <OptionKeyHandler\n      options={filteredOptions}\n      disabled={!isOpen}\n      optionRefs={optionRefs}\n      scrollRef={scrollRef}\n      onChange={handleChange}\n    >\n      {(activeValue) =>\n        filteredOptions.length === 0 ? (\n          <Flex justifyContent='center'>\n            <Text variant='body' color='subdued' size='s'>\n              {messages.noMatches}\n            </Text>\n          </Flex>\n        ) : (\n          filteredOptions?.map((option, index) => (\n            <MenuItem\n              ref={(el) => {\n                if (optionRefs && optionRefs.current && el) {\n                  optionRefs.current[index] = el\n                }\n              }}\n              key={option.value}\n              variant='option'\n              {...option}\n              onChange={handleChange}\n              isActive={option.value === activeValue}\n            />\n          ))\n        )\n      }\n    </OptionKeyHandler>\n  )\n\n  return (\n    <Flex ref={anchorRef}>\n      <TextInput\n        ref={mergeRefs([ref, inputRef])}\n        value={inputValue}\n        onChange={(e) => setInputValue(e.target.value)}\n        onClick={handleClick}\n        aria-haspopup='listbox'\n        aria-expanded={isOpen}\n        autoComplete='off'\n        endIcon={Icon}\n        IconProps={{ onClick: handleClickIcon }}\n        elevateLabel={!!selectedOption && !hideLabel}\n        hidePlaceholder={!!selectedOption}\n        {...other}\n      />\n      {/* Overlay selected option */}\n      {selectedOption && !inputValue ? (\n        <MenuItem\n          variant='option'\n          {...selectedOption}\n          label={selectedLabel}\n          onChange={() => {}}\n          css={({ spacing }) => ({\n            position: 'absolute',\n            // Magic values to align the selected option with the input\n            top: (hideLabel ? spacing.unit3 : spacing.unit6) + 2,\n            left: spacing.unit1,\n            opacity: isOpen ? 0.5 : 1\n          })}\n          disabled\n        />\n      ) : null}\n      <Menu\n        anchorRef={anchorRef}\n        isVisible={isOpen}\n        onClose={() => setIsOpen(false)}\n        {...defaultMenuProps}\n        PaperProps={menuProps?.PaperProps}\n      >\n        <MenuContent\n          maxHeight={menuProps?.maxHeight}\n          width={menuProps?.width}\n          scrollRef={scrollRef}\n          MenuListProps={menuProps?.MenuListProps}\n          aria-label={selectedLabel ?? label ?? props['aria-label']}\n          aria-activedescendant={selectedOption?.label}\n        >\n          {children\n            ? children({ onChange: handleChange, options: optionElements })\n            : optionElements}\n        </MenuContent>\n      </Menu>\n    </Flex>\n  )\n})\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select/Select.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useMemo,\n  Ref,\n  useEffect,\n  MouseEvent\n} from 'react'\n\nimport { mergeRefs } from 'react-merge-refs'\n\nimport { TextInput } from '~harmony/components/input'\n\nimport { useControlled } from '../../../hooks/useControlled'\nimport { IconCaretDown, IconCloseAlt } from '../../../icons'\nimport { Menu, MenuContent, MenuProps } from '../../internal/Menu'\nimport { MenuItem } from '../../internal/MenuItem'\nimport { OptionKeyHandler } from '../../internal/OptionKeyHandler'\nimport { Flex } from '../../layout'\nimport { Text } from '../../text'\n\nimport { SelectProps } from './types'\n\nconst messages = {\n  noMatches: 'No matches'\n}\n\nconst defaultMenuProps: Partial<MenuProps> = {\n  anchorOrigin: { horizontal: 'left', vertical: 'bottom' },\n  transformOrigin: { horizontal: 'left', vertical: 'top' }\n}\n\n/**\n * A form input used for selecting a value: when collapsed it shows the\n * currently selected option and when expanded, it shows a scrollable list\n * of predefined options for the user to choose from.\n */\nexport const Select = forwardRef(function Select<Value extends string>(\n  props: SelectProps<Value>,\n  ref: Ref<HTMLInputElement>\n) {\n  const {\n    value: valueProp,\n    options,\n    menuProps,\n    onChange,\n    onClick,\n    clearable,\n    children,\n    renderSelectedOptionLabel: renderSelectedOptionlabel,\n    ...other\n  } = props\n\n  const { label, hideLabel } = other\n\n  const [value, setValue] = useControlled({\n    controlledProp: valueProp,\n    defaultValue: null,\n    stateName: 'selection',\n    componentName: 'Select'\n  })\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const selectedOption = options.find((option) => option.value === value)\n  const selectedLabel = selectedOption\n    ? (renderSelectedOptionlabel?.(selectedOption) ??\n      selectedOption.label ??\n      selectedOption.value)\n    : ''\n  const anchorRef = useRef<HTMLDivElement | null>(null)\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const optionRefs = useRef<HTMLButtonElement[]>([])\n  const scrollRef = useRef<HTMLDivElement | null>(null)\n\n  const handleChange = useCallback(\n    (value: Value) => {\n      setValue(value)\n      setInputValue('')\n      onChange?.(value)\n      setIsOpen(false)\n    },\n    [onChange, setValue]\n  )\n\n  useEffect(() => {\n    if (isOpen) {\n      // Focus the input after the popup is open\n      setTimeout(() => {\n        inputRef.current?.focus({ preventScroll: true })\n      }, 0)\n    }\n  }, [isOpen])\n\n  const filteredOptions = useMemo(\n    () =>\n      options.filter(({ value, label }) => {\n        return (\n          !inputValue ||\n          label?.toLowerCase().includes(inputValue.toLowerCase()) ||\n          value.toLowerCase().includes(inputValue.toLowerCase())\n        )\n      }),\n    [options, inputValue]\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLInputElement>) => {\n      setIsOpen(true)\n      onClick?.(e)\n    },\n    [onClick]\n  )\n\n  const handleClickIcon = useCallback(\n    (e: MouseEvent<SVGSVGElement>) => {\n      e.stopPropagation()\n      e.preventDefault()\n      if (value !== null && clearable) {\n        setValue(null)\n        // @ts-ignore\n        onChange?.(null)\n      } else {\n        setIsOpen((isOpen: boolean) => !isOpen)\n      }\n    },\n    [value, clearable, setValue, onChange]\n  )\n\n  const Icon = value !== null && clearable ? IconCloseAlt : IconCaretDown\n\n  const optionElements = (\n    <OptionKeyHandler\n      options={filteredOptions}\n      disabled={!isOpen}\n      optionRefs={optionRefs}\n      scrollRef={scrollRef}\n      onChange={handleChange}\n    >\n      {(activeValue) =>\n        filteredOptions.length === 0 ? (\n          <Flex justifyContent='center'>\n            <Text variant='body' color='subdued' size='s'>\n              {messages.noMatches}\n            </Text>\n          </Flex>\n        ) : (\n          filteredOptions?.map((option, index) => (\n            <MenuItem\n              ref={(el) => {\n                if (optionRefs && optionRefs.current && el) {\n                  optionRefs.current[index] = el\n                }\n              }}\n              key={option.value}\n              variant='option'\n              {...option}\n              onChange={handleChange}\n              isActive={option.value === activeValue}\n            />\n          ))\n        )\n      }\n    </OptionKeyHandler>\n  )\n\n  return (\n    <Flex ref={anchorRef}>\n      <TextInput\n        ref={mergeRefs([ref, inputRef])}\n        value={inputValue}\n        onChange={(e) => setInputValue(e.target.value)}\n        onClick={handleClick}\n        aria-haspopup='listbox'\n        aria-expanded={isOpen}\n        autoComplete='off'\n        endIcon={Icon}\n        IconProps={{ onClick: handleClickIcon }}\n        elevateLabel={!!selectedOption && !hideLabel}\n        hidePlaceholder={!!selectedOption}\n        {...other}\n      />\n      {/* Overlay selected option */}\n      {selectedOption && !inputValue ? (\n        <MenuItem\n          variant='option'\n          {...selectedOption}\n          label={selectedLabel}\n          onChange={() => {}}\n          css={({ spacing }) => ({\n            position: 'absolute',\n            // Magic values to align the selected option with the input\n            top: (hideLabel ? spacing.unit3 : spacing.unit6) + 2,\n            left: spacing.unit1,\n            opacity: isOpen ? 0.5 : 1\n          })}\n          disabled\n        />\n      ) : null}\n      <Menu\n        anchorRef={anchorRef}\n        isVisible={isOpen}\n        onClose={() => setIsOpen(false)}\n        {...defaultMenuProps}\n        {...(menuProps && {\n          takeWidthOfAnchor: menuProps.takeWidthOfAnchor\n        })}\n        PaperProps={menuProps?.PaperProps}\n      >\n        <MenuContent\n          maxHeight={menuProps?.maxHeight}\n          width={menuProps?.width}\n          scrollRef={scrollRef}\n          MenuListProps={menuProps?.MenuListProps}\n          aria-label={selectedLabel ?? label ?? props['aria-label']}\n          aria-activedescendant={selectedOption?.label}\n        >\n          {children\n            ? children({ onChange: handleChange, options: optionElements })\n            : optionElements}\n        </MenuContent>\n      </Menu>\n    </Flex>\n  )\n})\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/send-icon/SendIcon.js

@@ -3,9 +3,9 @@ import { useTheme } from '@emotion/react';
 import '../button/Button/Button.js';
 import '../button/PlainButton/PlainButton.js';
 import '../../_virtual/_tslib.js';
-import { IconPaperAirplane } from '../../icons/utilityIcons.js';
 import 'react';
 import '@emotion/css';
+import { IconPaperAirplane } from '../../icons/individual/IconPaperAirplane.js';
 import '../layout/Box/Box.js';
 import '../layout/Flex/Flex.js';
 import '../skeleton/Skeleton.js';
@@ -16,6 +16,7 @@ import '../input/TextInput/TextInput.js';
 import '../input/TextInput/types.js';
 import '../input/PasswordInput/PasswordInput.js';
 import '../input/TokenAmountInput/TokenAmountInput.js';
+import '../input/TextArea/TextArea.js';
 import '../layout/Paper/Paper.js';
 import '@react-spring/web';
 import 'classnames';
@@ -48,6 +49,7 @@ import '../../foundations/color/color.js';
 import '../../foundations/theme/theme.js';
 import '../../hooks/useHotKeys.js';
 import '../internal/MenuItem.js';
+import 'react-dom';
 import '../button/FollowButton/FollowButton.js';
 import '../button/UnstyledButton.js';
 import '../button/FilterButton/FilterButton.js';

package/dist/components/send-icon/SendIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendIcon.js","sources":["../../../src/components/send-icon/SendIcon.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react'\n\nimport { IconButton } from '~harmony/components/button'\nimport { IconPaperAirplane } from '~harmony/icons'\n\nimport { SendIconProps } from './types'\n\nexport const SendIcon = ({ disabled = false, onClick }: SendIconProps) => {\n  const { color, motion } = useTheme()\n\n  return (\n    <IconButton\n      aria-label='Send'\n      icon={IconPaperAirplane}\n      size='2xl'\n      onClick={onClick}\n      css={{\n        padding: 0,\n        pointerEvents: disabled ? 'none' : 'all',\n        opacity: disabled ? 0.5 : 1,\n        path: {\n          fill: color.primary.primary,\n          transition: motion.quick\n        },\n        ':hover path': {\n          fill: color.primary.p100\n        },\n        ':active path': {\n          fill: color.primary.p500\n        }\n      }}\n    />\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,IAAM,QAAQ,GAAG,UAAC,EAA4C,EAAA;AAA1C,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,QAAgB,EAAhB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAA,EAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,CAAA;IAC5C,IAAA,EAAA,GAAoB,QAAQ,EAAE,EAA5B,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAe,CAAA;AAEpC,IAAA,QACEA,GAAC,CAAA,UAAU,kBACE,MAAM,EACjB,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE;AACH,YAAA,OAAO,EAAE,CAAC;YACV,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAK;YACxC,OAAO,EAAE,QAAQ,GAAG,GAAG,GAAG,CAAC;AAC3B,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;gBAC3B,UAAU,EAAE,MAAM,CAAC,KAAK;AACzB,aAAA;AACD,YAAA,aAAa,EAAE;AACb,gBAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AACzB,aAAA;AACD,YAAA,cAAc,EAAE;AACd,gBAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AACzB,aAAA;AACF,SAAA,EAAA,CACD,EACH;AACH;;;;"}
+{"version":3,"file":"SendIcon.js","sources":["../../../src/components/send-icon/SendIcon.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react'\n\nimport { IconButton } from '~harmony/components/button'\nimport { IconPaperAirplane } from '~harmony/icons'\n\nimport { SendIconProps } from './types'\n\nexport const SendIcon = ({ disabled = false, onClick }: SendIconProps) => {\n  const { color, motion } = useTheme()\n\n  return (\n    <IconButton\n      aria-label='Send'\n      icon={IconPaperAirplane}\n      size='2xl'\n      onClick={onClick}\n      css={{\n        padding: 0,\n        pointerEvents: disabled ? 'none' : 'all',\n        opacity: disabled ? 0.5 : 1,\n        path: {\n          fill: color.primary.primary,\n          transition: motion.quick\n        },\n        ':hover path': {\n          fill: color.primary.p100\n        },\n        ':active path': {\n          fill: color.primary.p500\n        }\n      }}\n    />\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,IAAM,QAAQ,GAAG,UAAC,EAA4C,EAAA;AAA1C,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,QAAgB,EAAhB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAA,EAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,CAAA;IAC5C,IAAA,EAAA,GAAoB,QAAQ,EAAE,EAA5B,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAe,CAAA;AAEpC,IAAA,QACEA,GAAC,CAAA,UAAU,kBACE,MAAM,EACjB,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE;AACH,YAAA,OAAO,EAAE,CAAC;YACV,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAK;YACxC,OAAO,EAAE,QAAQ,GAAG,GAAG,GAAG,CAAC;AAC3B,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;gBAC3B,UAAU,EAAE,MAAM,CAAC,KAAK;AACzB,aAAA;AACD,YAAA,aAAa,EAAE;AACb,gBAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AACzB,aAAA;AACD,YAAA,cAAc,EAAE;AACd,gBAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AACzB,aAAA;AACF,SAAA,EAAA,CACD,EACH;AACH;;;;"}

package/dist/components/text/Text.d.ts

@@ -1,3 +1,3 @@
 import { ElementType } from 'react';
-export declare const Text: <TextComponentType extends ElementType = "p">(props: import("./types").BaseTextProps<TextComponentType> & Omit<import("react").ComponentProps<TextComponentType>, keyof import("./types").BaseTextProps<"p"> | "ref"> & import("react").RefAttributes<TextComponentType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const Text: <TextComponentType extends ElementType = "p">(props: import("./types").BaseTextProps<TextComponentType> & Omit<import("react").ComponentProps<TextComponentType>, keyof import("./types").BaseTextProps<"p"> | "ref"> & import("react").RefAttributes<TextComponentType>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 //# sourceMappingURL=Text.d.ts.map

package/dist/components/text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAKZ,MAAM,OAAO,CAAA;AA6Dd,eAAO,MAAM,IAAI,4WAgHhB,CAAA"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAKZ,MAAM,OAAO,CAAA;AA6Dd,eAAO,MAAM,IAAI,gXAgHhB,CAAA"}

package/dist/components/text-link/TextLink.d.ts

@@ -12,5 +12,5 @@ export declare const TextLink: (props: Omit<import("../text").TextProps, "varian
     isExternal?: boolean | undefined;
     ellipses?: boolean | undefined;
     applyHoverStylesToInnerSvg?: boolean | undefined;
-} & import("react").RefAttributes<"a">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+} & import("react").RefAttributes<"a">) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 //# sourceMappingURL=TextLink.d.ts.map

package/dist/components/text-link/TextLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../src/components/text-link/TextLink.tsx"],"names":[],"mappings":";AASA;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;wIAmFnB,CAAA"}
+{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../src/components/text-link/TextLink.tsx"],"names":[],"mappings":";AASA;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;4IAoFnB,CAAA"}

package/dist/components/text-link/TextLink.js

@@ -30,7 +30,7 @@ var TextLink = forwardRef(function (props, ref) {
     var hoverStyles = __assign({ textDecoration: noUnderlineOnHover ? 'none' : 'underline', color: variantHoverColors[variant] }, (applyHoverStylesToInnerSvg
         ? { path: { fill: variantHoverColors[variant] } }
         : {}));
-    return (jsx(Text, __assign({ ref: ref, asChild: true, onClick: onClick, css: __assign(__assign(__assign(__assign(__assign({ 
+    return (jsx(Text, __assign({ role: asChild ? undefined : props.href ? 'link' : 'button', ref: ref, asChild: true, onClick: onClick, css: __assign(__assign(__assign(__assign(__assign({ 
             // MaxLines requires a special webkit display to work, dont override here
             display: other.maxLines ? undefined : 'inline-flex', gap: spacing.s, color: variantColors[variant], textDecoration: 'none', transition: "color ".concat(motion.hover), cursor: 'pointer', pointerEvents: disabled ? 'none' : undefined }, (applyHoverStylesToInnerSvg && {
             path: { transition: "fill ".concat(motion.hover) }

package/dist/components/text-link/TextLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.js","sources":["../../../src/components/text-link/TextLink.tsx"],"sourcesContent":["import { Ref, forwardRef } from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { Text } from '../text'\n\nimport type { TextLinkProps } from './types'\n\n/**\n * Also known as hyperlinks, these are words or phrases that can be clicked to navigate to a linked webpage.\n */\nexport const TextLink = forwardRef((props: TextLinkProps, ref: Ref<'a'>) => {\n  const {\n    asChild = false,\n    children,\n    variant = 'default',\n    isActive,\n    isExternal = false,\n    ellipses = false,\n    onClick,\n    textVariant,\n    showUnderline,\n    noUnderlineOnHover,\n    applyHoverStylesToInnerSvg,\n    disabled,\n    ...other\n  } = props\n\n  const { color, spacing, motion } = useTheme()\n\n  const variantColors = {\n    default: color.link.default,\n    subdued: color.link.subdued,\n    visible: color.link.visible,\n    inverted: color.static.staticWhite,\n    secondary: color.secondary.secondary,\n    active: color.primary.primary\n  }\n\n  const variantHoverColors = {\n    default: color.primary.p300,\n    subdued: color.primary.p300,\n    visible: color.link.visible,\n    inverted: color.static.staticWhite,\n    secondary: color.secondary.secondary,\n    active: color.primary.primary\n  }\n\n  const hoverStyles = {\n    textDecoration: noUnderlineOnHover ? 'none' : 'underline',\n    color: variantHoverColors[variant],\n    ...(applyHoverStylesToInnerSvg\n      ? { path: { fill: variantHoverColors[variant] } }\n      : {})\n  }\n\n  return (\n    <Text\n      ref={ref}\n      asChild\n      onClick={onClick}\n      css={{\n        // MaxLines requires a special webkit display to work, dont override here\n        display: other.maxLines ? undefined : 'inline-flex',\n        gap: spacing.s,\n        color: variantColors[variant],\n        textDecoration: 'none',\n        transition: `color ${motion.hover}`,\n        cursor: 'pointer',\n        pointerEvents: disabled ? 'none' : undefined,\n        ...(applyHoverStylesToInnerSvg && {\n          path: { transition: `fill ${motion.hover}` }\n        }),\n        ':hover': hoverStyles,\n        ...(isActive && { ...hoverStyles, textDecoration: 'none' }),\n        ...(showUnderline && hoverStyles),\n        ...(ellipses && { minWidth: 0 })\n      }}\n      variant={textVariant}\n      ellipses={ellipses}\n      {...other}\n    >\n      {asChild ? (\n        <Slot>{children}</Slot>\n      ) : (\n        <a\n          target={isExternal ? '_blank' : undefined}\n          rel={isExternal ? 'noreferrer' : undefined}\n        >\n          {children}\n        </a>\n      )}\n    </Text>\n  )\n})\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"TextLink.js","sources":["../../../src/components/text-link/TextLink.tsx"],"sourcesContent":["import { Ref, forwardRef } from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { Text } from '../text'\n\nimport type { TextLinkProps } from './types'\n\n/**\n * Also known as hyperlinks, these are words or phrases that can be clicked to navigate to a linked webpage.\n */\nexport const TextLink = forwardRef((props: TextLinkProps, ref: Ref<'a'>) => {\n  const {\n    asChild = false,\n    children,\n    variant = 'default',\n    isActive,\n    isExternal = false,\n    ellipses = false,\n    onClick,\n    textVariant,\n    showUnderline,\n    noUnderlineOnHover,\n    applyHoverStylesToInnerSvg,\n    disabled,\n    ...other\n  } = props\n\n  const { color, spacing, motion } = useTheme()\n\n  const variantColors = {\n    default: color.link.default,\n    subdued: color.link.subdued,\n    visible: color.link.visible,\n    inverted: color.static.staticWhite,\n    secondary: color.secondary.secondary,\n    active: color.primary.primary\n  }\n\n  const variantHoverColors = {\n    default: color.primary.p300,\n    subdued: color.primary.p300,\n    visible: color.link.visible,\n    inverted: color.static.staticWhite,\n    secondary: color.secondary.secondary,\n    active: color.primary.primary\n  }\n\n  const hoverStyles = {\n    textDecoration: noUnderlineOnHover ? 'none' : 'underline',\n    color: variantHoverColors[variant],\n    ...(applyHoverStylesToInnerSvg\n      ? { path: { fill: variantHoverColors[variant] } }\n      : {})\n  }\n\n  return (\n    <Text\n      role={asChild ? undefined : props.href ? 'link' : 'button'}\n      ref={ref}\n      asChild\n      onClick={onClick}\n      css={{\n        // MaxLines requires a special webkit display to work, dont override here\n        display: other.maxLines ? undefined : 'inline-flex',\n        gap: spacing.s,\n        color: variantColors[variant],\n        textDecoration: 'none',\n        transition: `color ${motion.hover}`,\n        cursor: 'pointer',\n        pointerEvents: disabled ? 'none' : undefined,\n        ...(applyHoverStylesToInnerSvg && {\n          path: { transition: `fill ${motion.hover}` }\n        }),\n        ':hover': hoverStyles,\n        ...(isActive && { ...hoverStyles, textDecoration: 'none' }),\n        ...(showUnderline && hoverStyles),\n        ...(ellipses && { minWidth: 0 })\n      }}\n      variant={textVariant}\n      ellipses={ellipses}\n      {...other}\n    >\n      {asChild ? (\n        <Slot>{children}</Slot>\n      ) : (\n        <a\n          target={isExternal ? '_blank' : undefined}\n          rel={isExternal ? 'noreferrer' : undefined}\n        >\n          {children}\n        </a>\n      )}\n    </Text>\n  )\n})\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipProps } from './types';
+export declare const Tooltip: ({ children, className, color, disabled, mount, getPopupContainer, mouseEnterDelay, mouseLeaveDelay, placement, shouldDismissOnClick, shouldWrapContent, text, zIndex }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,SAAS,CAAA;AAkH7D,eAAO,MAAM,OAAO,2KAcjB,YAAY,qDAsTd,CAAA;AAED,eAAe,OAAO,CAAA"}