@audius/harmony 0.3.5 → 0.4.0

package/dist/components/modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal/ModalHeader.tsx"],"sourcesContent":["import { useContext, forwardRef, useCallback } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconClose } from '../../icons'\nimport { IconButton } from '../button'\n\nimport { ModalContext } from './ModalContext'\nimport styles from './ModalHeader.module.css'\nimport { ModalHeaderProps, ModalTitleProps } from './types'\n\n/**\n * Header component to be used inside modals\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(\n  function ModalHeader(\n    {\n      className,\n      onClose: onCloseProp,\n      dismissButtonClassName,\n      showDismissButton = true,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const { onClose } = useContext(ModalContext)\n\n    const handleClose = useCallback(() => {\n      onClose?.()\n      onCloseProp?.()\n    }, [onClose, onCloseProp])\n\n    return (\n      <div\n        className={cn(\n          styles.headerContainer,\n          { [styles.noDismissButton]: !showDismissButton },\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {showDismissButton ? (\n          <IconButton\n            aria-label='dismiss dialog'\n            className={cn(styles.dismissButton, dismissButtonClassName)}\n            icon={IconClose}\n            color='subdued'\n            size='s'\n            onClick={handleClose}\n          />\n        ) : null}\n        {children}\n      </div>\n    )\n  }\n)\n\n/**\n * Title component to be used inside modal headers\n */\nexport const ModalTitle = forwardRef<HTMLDivElement, ModalTitleProps>(\n  function ModalTitle(\n    {\n      subtitleClassName,\n      icon,\n      iconClassName,\n      title,\n      titleClassName,\n      subtitle,\n      titleId: titleIdProp,\n      subtitleId: subtitleIdProp,\n      ...props\n    },\n    ref\n  ) {\n    const modalContext = useContext(ModalContext)\n    const titleId = titleIdProp || modalContext.titleId\n    const subtitleId = subtitleIdProp || modalContext.subtitleId\n\n    return (\n      <>\n        <div className={styles.titleContainer} {...props} ref={ref}>\n          {icon == null ? null : (\n            <div className={cn(styles.icon, iconClassName)}>{icon}</div>\n          )}\n          <h2 id={titleId} className={cn(styles.title, titleClassName)}>\n            {title}\n          </h2>\n        </div>\n        {subtitle == null ? null : (\n          <div className={cn(styles.subtitleContainer, subtitleClassName)}>\n            <h3 id={subtitleId} className={styles.subtitle}>\n              {subtitle}\n            </h3>\n          </div>\n        )}\n      </>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal/ModalHeader.tsx"],"sourcesContent":["import { useContext, forwardRef, useCallback } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconClose } from '../../icons'\nimport { IconButton } from '../button'\n\nimport { ModalContext } from './ModalContext'\nimport styles from './ModalHeader.module.css'\nimport { ModalHeaderProps, ModalTitleProps } from './types'\n\n/**\n * Header component to be used inside modals\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(\n  function ModalHeader(\n    {\n      className,\n      onClose: onCloseProp,\n      dismissButtonClassName,\n      showDismissButton = true,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const { onClose } = useContext(ModalContext)\n\n    const handleClose = useCallback(() => {\n      onClose?.()\n      onCloseProp?.()\n    }, [onClose, onCloseProp])\n\n    return (\n      <div\n        className={cn(\n          styles.headerContainer,\n          { [styles.noDismissButton]: !showDismissButton },\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {showDismissButton ? (\n          <IconButton\n            aria-label='dismiss dialog'\n            className={cn(styles.dismissButton, dismissButtonClassName)}\n            icon={IconClose}\n            color='subdued'\n            size='s'\n            onClick={handleClose}\n          />\n        ) : null}\n        {children}\n      </div>\n    )\n  }\n)\n\n/**\n * Title component to be used inside modal headers\n */\nexport const ModalTitle = forwardRef<HTMLDivElement, ModalTitleProps>(\n  function ModalTitle(\n    {\n      subtitleClassName,\n      icon,\n      Icon,\n      iconClassName,\n      title,\n      titleClassName,\n      subtitle,\n      titleId: titleIdProp,\n      subtitleId: subtitleIdProp,\n      ...props\n    },\n    ref\n  ) {\n    const modalContext = useContext(ModalContext)\n    const titleId = titleIdProp || modalContext.titleId\n    const subtitleId = subtitleIdProp || modalContext.subtitleId\n\n    return (\n      <>\n        <div className={styles.titleContainer} {...props} ref={ref}>\n          {icon == null ? null : (\n            <div className={cn(styles.icon, iconClassName)}>{icon}</div>\n          )}\n          {Icon ? <Icon className={styles.icon} /> : null}\n          <h2 id={titleId} className={cn(styles.title, titleClassName)}>\n            {title}\n          </h2>\n        </div>\n        {subtitle == null ? null : (\n          <div className={cn(styles.subtitleContainer, subtitleClassName)}>\n            <h3 id={subtitleId} className={styles.subtitle}>\n              {subtitle}\n            </h3>\n          </div>\n        )}\n      </>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/components/modal/types.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { IconComponent } from '../icon';
 import { ScrollbarProps } from '../scrollbar';
 export declare enum Anchor {
     CENTER = "CENTER",
@@ -102,6 +103,7 @@ export type ModalProps = {
      * (only small currently implemented)
      */
     size?: 'small' | 'medium' | 'large';
+    className?: string;
 };
 export type ModalContentProps = ScrollbarProps;
 export type ModalHeaderProps = HTMLAttributes<HTMLDivElement> & {
@@ -112,7 +114,11 @@ export type ModalHeaderProps = HTMLAttributes<HTMLDivElement> & {
 };
 export type ModalTitleProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
     subtitleClassName?: string;
+    /**
+     * @deprecated use Icon prop instead
+     */
     icon?: ReactNode;
+    Icon?: IconComponent;
     iconClassName?: string;
     title: ReactNode;
     titleClassName?: string;

package/dist/components/modal/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,oBAAY,MAAM;IAChB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IAEnB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAErB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IAEf;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAE/B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IAIrB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IAEjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IAEjC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IAC5E,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,SAAS,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,oBAAY,MAAM;IAChB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IAEnB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAErB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IAEf;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAE/B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IAIrB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IAEjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IAEjC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IAC5E,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,SAAS,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA"}

package/dist/components/modal/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/modal/types.ts"],"sourcesContent":["import { HTMLAttributes, ReactNode } from 'react'\n\nimport { ScrollbarProps } from '../scrollbar'\n\nexport enum Anchor {\n  CENTER = 'CENTER',\n  TOP = 'TOP',\n  BOTTOM = 'BOTTOM'\n}\n\nexport type ModalProps = {\n  /**\n   * Optional unique key to assign to the modal.\n   * If not provided, it is auto-generated.\n   */\n  modalKey?: string\n\n  /**\n   * Modal contents\n   */\n  children: ReactNode\n\n  /**\n   * Callback fired when the modal is closed\n   * Should set isOpen accordingly\n   */\n  onClose: () => void\n\n  /**\n   * Callback fired when the modal children are removed from the dom.\n   */\n  onClosed?: () => void\n\n  /**\n   * Whether or not the modal is open\n   */\n  isOpen: boolean\n\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  showTitleHeader?: boolean\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  title?: ReactNode\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  subtitle?: string\n\n  /**\n   * Whether to dismiss on a click outside the modal\n   */\n  dismissOnClickOutside?: boolean\n\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  showDismissButton?: boolean\n\n  /**\n   * Manually set z-index.\n   *\n   * By default, the z-index is 10000 and the modal background shadow is\n   * set to z-index - 1 so that the modal appears on top of the shadow.\n   *\n   * If you would like to nest modals, it's important to increase the z-index by\n   * 2 for every modal so that the parent modal lives behind the child modal's shadow.\n   */\n  zIndex?: number\n\n  /** @deprecated */\n  allowScroll?: boolean\n\n  // Classnames\n\n  wrapperClassName?: string\n\n  /**\n   *  Set max-width on bodyClass to set the modal width\n   */\n  bodyClassName?: string\n\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  titleClassName?: string\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  subtitleClassName?: string\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  headerContainerClassName?: string\n\n  anchor?: Anchor\n  verticalAnchorOffset?: number\n\n  /**\n   * Horizontal padding between modal edges and viewport edge\n   */\n  horizontalPadding?: number\n\n  /**\n   * @deprecated in favor of composability - use ModalContent sub-component instead\n   */\n  contentHorizontalPadding?: number\n\n  /**\n   * Optional aria description for the dialog.\n   * If not provided, it is auto-generated.\n   */\n  'aria-describedby'?: string\n\n  /**\n   * Optional aria label for the dialog.\n   * If not provided, it is auto-generated.\n   */\n  'aria-labelledby'?: string\n  /**\n   * If provided, conform to standard modal widths\n   * (only small currently implemented)\n   */\n  size?: 'small' | 'medium' | 'large'\n}\n\nexport type ModalContentProps = ScrollbarProps\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement> & {\n  dismissButtonClassName?: string\n  showDismissButton?: boolean\n  onClose?: () => void\n  children: ReactNode\n}\n\nexport type ModalTitleProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n  subtitleClassName?: string\n  icon?: ReactNode\n  iconClassName?: string\n  title: ReactNode\n  titleClassName?: string\n  subtitle?: ReactNode\n  titleId?: string\n  subtitleId?: string\n}\n\nexport type ModalFooterProps = HTMLAttributes<HTMLDivElement>\n"],"names":[],"mappings":"IAIY,OAIX;AAJD,CAAA,UAAY,MAAM,EAAA;AAChB,IAAA,MAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,MAAA,CAAA,KAAA,CAAA,GAAA,KAAW,CAAA;AACX,IAAA,MAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACnB,CAAC,EAJW,MAAM,KAAN,MAAM,GAIjB,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/modal/types.ts"],"sourcesContent":["import { HTMLAttributes, ReactNode } from 'react'\n\nimport { IconComponent } from '../icon'\nimport { ScrollbarProps } from '../scrollbar'\n\nexport enum Anchor {\n  CENTER = 'CENTER',\n  TOP = 'TOP',\n  BOTTOM = 'BOTTOM'\n}\n\nexport type ModalProps = {\n  /**\n   * Optional unique key to assign to the modal.\n   * If not provided, it is auto-generated.\n   */\n  modalKey?: string\n\n  /**\n   * Modal contents\n   */\n  children: ReactNode\n\n  /**\n   * Callback fired when the modal is closed\n   * Should set isOpen accordingly\n   */\n  onClose: () => void\n\n  /**\n   * Callback fired when the modal children are removed from the dom.\n   */\n  onClosed?: () => void\n\n  /**\n   * Whether or not the modal is open\n   */\n  isOpen: boolean\n\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  showTitleHeader?: boolean\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  title?: ReactNode\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  subtitle?: string\n\n  /**\n   * Whether to dismiss on a click outside the modal\n   */\n  dismissOnClickOutside?: boolean\n\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  showDismissButton?: boolean\n\n  /**\n   * Manually set z-index.\n   *\n   * By default, the z-index is 10000 and the modal background shadow is\n   * set to z-index - 1 so that the modal appears on top of the shadow.\n   *\n   * If you would like to nest modals, it's important to increase the z-index by\n   * 2 for every modal so that the parent modal lives behind the child modal's shadow.\n   */\n  zIndex?: number\n\n  /** @deprecated */\n  allowScroll?: boolean\n\n  // Classnames\n\n  wrapperClassName?: string\n\n  /**\n   *  Set max-width on bodyClass to set the modal width\n   */\n  bodyClassName?: string\n\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  titleClassName?: string\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  subtitleClassName?: string\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  headerContainerClassName?: string\n\n  anchor?: Anchor\n  verticalAnchorOffset?: number\n\n  /**\n   * Horizontal padding between modal edges and viewport edge\n   */\n  horizontalPadding?: number\n\n  /**\n   * @deprecated in favor of composability - use ModalContent sub-component instead\n   */\n  contentHorizontalPadding?: number\n\n  /**\n   * Optional aria description for the dialog.\n   * If not provided, it is auto-generated.\n   */\n  'aria-describedby'?: string\n\n  /**\n   * Optional aria label for the dialog.\n   * If not provided, it is auto-generated.\n   */\n  'aria-labelledby'?: string\n  /**\n   * If provided, conform to standard modal widths\n   * (only small currently implemented)\n   */\n  size?: 'small' | 'medium' | 'large'\n  className?: string\n}\n\nexport type ModalContentProps = ScrollbarProps\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement> & {\n  dismissButtonClassName?: string\n  showDismissButton?: boolean\n  onClose?: () => void\n  children: ReactNode\n}\n\nexport type ModalTitleProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n  subtitleClassName?: string\n  /**\n   * @deprecated use Icon prop instead\n   */\n  icon?: ReactNode\n  Icon?: IconComponent\n  iconClassName?: string\n  title: ReactNode\n  titleClassName?: string\n  subtitle?: ReactNode\n  titleId?: string\n  subtitleId?: string\n}\n\nexport type ModalFooterProps = HTMLAttributes<HTMLDivElement>\n"],"names":[],"mappings":"IAKY,OAIX;AAJD,CAAA,UAAY,MAAM,EAAA;AAChB,IAAA,MAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,MAAA,CAAA,KAAA,CAAA,GAAA,KAAW,CAAA;AACX,IAAA,MAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACnB,CAAC,EAJW,MAAM,KAAN,MAAM,GAIjB,EAAA,CAAA,CAAA;;;;"}

package/dist/components/pill/Pill.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CSSObject } from '@emotion/react';
-import { BaseButtonProps } from "../button/BaseButton/types";
+import { BaseButtonProps } from '../button/BaseButton/types';
 export type PillProps = BaseButtonProps & {
     variant?: 'default' | 'active' | 'custom';
 };

package/dist/components/pill/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAA;AAGpD,OAAO,EAAE,eAAe,EAAE,mCAAmD;AAG7E,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACxC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;CAC1C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;sJA+DhB,CAAA"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAA;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAG5D,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACxC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;CAC1C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;sJA+DhB,CAAA"}

package/dist/components/pill/Pill.js

@@ -26,18 +26,18 @@ var Pill = forwardRef(function (props, ref) {
     };
     var textColors = {
         default: color.text.subdued,
-        active: color.text.staticWhite,
-        custom: color.text.staticWhite
+        active: color.text.white,
+        custom: color.text.white
     };
     var hoverTextColors = {
-        default: color.text.staticWhite,
-        active: color.text.staticWhite,
-        custom: color.text.staticWhite
+        default: color.text.white,
+        active: color.text.white,
+        custom: color.text.white
     };
     var buttonCss = {
         gap: spacing['2xs'],
         paddingInline: 6,
-        paddingBlock: spacing['2xs'],
+        paddingBlock: spacing.xs,
         borderWidth: 0,
         borderRadius: cornerRadius.circle,
         backgroundColor: backgroundColors[variant],

package/dist/components/pill/Pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","sources":["../../../src/components/pill/Pill.tsx"],"sourcesContent":["import { Ref, forwardRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { BaseButton } from '~harmony/components/button/BaseButton/BaseButton'\nimport { BaseButtonProps } from '~harmony/components/button/BaseButton/types'\nimport { Text } from '~harmony/components/text'\n\nexport type PillProps = BaseButtonProps & {\n  variant?: 'default' | 'active' | 'custom'\n}\n\n/**\n * The Pill button is located in the sidebar and is used to open the\n * Add Playlist/Add Folder popover menu.\n * It can also be used in the NEW pill in the notification card.\n */\nexport const Pill = forwardRef(\n  (props: PillProps, ref: Ref<HTMLButtonElement>) => {\n    const { variant = 'default', children, ...other } = props\n    const { onClick } = other\n    const { color, spacing, cornerRadius } = useTheme()\n\n    const backgroundColors = {\n      default: color.background.surface2,\n      active: color.background.accent,\n      custom: undefined\n    }\n\n    const hoverBackgroundColors = {\n      default: color.background.accent,\n      active: color.background.accent,\n      custom: undefined\n    }\n\n    const textColors = {\n      default: color.text.subdued,\n      active: color.text.staticWhite,\n      custom: color.text.staticWhite\n    }\n\n    const hoverTextColors = {\n      default: color.text.staticWhite,\n      active: color.text.staticWhite,\n      custom: color.text.staticWhite\n    }\n\n    const buttonCss: CSSObject = {\n      gap: spacing['2xs'],\n      paddingInline: 6,\n      paddingBlock: spacing['2xs'],\n      borderWidth: 0,\n      borderRadius: cornerRadius.circle,\n      backgroundColor: backgroundColors[variant],\n      color: textColors[variant],\n      '&:hover': {\n        backgroundColor: hoverBackgroundColors[variant],\n        color: hoverTextColors[variant]\n      },\n      pointerEvents: onClick ? 'auto' : 'none'\n    }\n\n    const iconCss = {\n      height: 10,\n      width: 10\n    }\n\n    return (\n      <BaseButton\n        ref={ref}\n        styles={{ button: buttonCss, icon: iconCss }}\n        asChild={!onClick}\n        {...other}\n      >\n        <Text variant='label' size='s'>\n          {children}\n        </Text>\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;;;AAYA;;;;AAIG;IACU,IAAI,GAAG,UAAU,CAC5B,UAAC,KAAgB,EAAE,GAA2B,EAAA;IACpC,IAAA,EAAA,GAA4C,KAAK,CAA9B,OAAA,EAAnB,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,KAAA,EAAE,QAAQ,GAAe,KAAK,CAAA,QAApB,EAAK,KAAK,GAAA,MAAA,CAAK,KAAK,EAAnD,CAAA,SAAA,EAAA,UAAA,CAA2C,CAAF,CAAU;AACjD,IAAA,IAAA,OAAO,GAAK,KAAK,CAAA,OAAV,CAAU;AACnB,IAAA,IAAA,EAAmC,GAAA,QAAQ,EAAE,EAA3C,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAe,CAAA;AAEnD,IAAA,IAAM,gBAAgB,GAAG;AACvB,QAAA,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;AAClC,QAAA,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM;AAC/B,QAAA,MAAM,EAAE,SAAS;KAClB,CAAA;AAED,IAAA,IAAM,qBAAqB,GAAG;AAC5B,QAAA,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM;AAChC,QAAA,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM;AAC/B,QAAA,MAAM,EAAE,SAAS;KAClB,CAAA;AAED,IAAA,IAAM,UAAU,GAAG;AACjB,QAAA,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;AAC3B,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;AAC9B,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;KAC/B,CAAA;AAED,IAAA,IAAM,eAAe,GAAG;AACtB,QAAA,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;AAC/B,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;AAC9B,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;KAC/B,CAAA;AAED,IAAA,IAAM,SAAS,GAAc;AAC3B,QAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC;AACnB,QAAA,aAAa,EAAE,CAAC;AAChB,QAAA,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC;AAC5B,QAAA,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,YAAY,CAAC,MAAM;AACjC,QAAA,eAAe,EAAE,gBAAgB,CAAC,OAAO,CAAC;AAC1C,QAAA,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;AAC1B,QAAA,SAAS,EAAE;AACT,YAAA,eAAe,EAAE,qBAAqB,CAAC,OAAO,CAAC;AAC/C,YAAA,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC;AAChC,SAAA;QACD,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM;KACzC,CAAA;AAED,IAAA,IAAM,OAAO,GAAG;AACd,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,KAAK,EAAE,EAAE;KACV,CAAA;AAED,IAAA,QACEA,GAAC,CAAA,UAAU,aACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,EAC5C,OAAO,EAAE,CAAC,OAAO,EACb,EAAA,KAAK,cAETA,GAAC,CAAA,IAAI,aAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAA,EAAA,EAAA,QAAA,EAC3B,QAAQ,EACJ,CAAA,CAAA,EAAA,CAAA,CACI,EACd;AACH,CAAC;;;;"}
+{"version":3,"file":"Pill.js","sources":["../../../src/components/pill/Pill.tsx"],"sourcesContent":["import { Ref, forwardRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { BaseButton } from '../button/BaseButton/BaseButton'\nimport { BaseButtonProps } from '../button/BaseButton/types'\nimport { Text } from '../text'\n\nexport type PillProps = BaseButtonProps & {\n  variant?: 'default' | 'active' | 'custom'\n}\n\n/**\n * The Pill button is located in the sidebar and is used to open the\n * Add Playlist/Add Folder popover menu.\n * It can also be used in the NEW pill in the notification card.\n */\nexport const Pill = forwardRef(\n  (props: PillProps, ref: Ref<HTMLButtonElement>) => {\n    const { variant = 'default', children, ...other } = props\n    const { onClick } = other\n    const { color, spacing, cornerRadius } = useTheme()\n\n    const backgroundColors = {\n      default: color.background.surface2,\n      active: color.background.accent,\n      custom: undefined\n    }\n\n    const hoverBackgroundColors = {\n      default: color.background.accent,\n      active: color.background.accent,\n      custom: undefined\n    }\n\n    const textColors = {\n      default: color.text.subdued,\n      active: color.text.white,\n      custom: color.text.white\n    }\n\n    const hoverTextColors = {\n      default: color.text.white,\n      active: color.text.white,\n      custom: color.text.white\n    }\n\n    const buttonCss: CSSObject = {\n      gap: spacing['2xs'],\n      paddingInline: 6,\n      paddingBlock: spacing.xs,\n      borderWidth: 0,\n      borderRadius: cornerRadius.circle,\n      backgroundColor: backgroundColors[variant],\n      color: textColors[variant],\n      '&:hover': {\n        backgroundColor: hoverBackgroundColors[variant],\n        color: hoverTextColors[variant]\n      },\n      pointerEvents: onClick ? 'auto' : 'none'\n    }\n\n    const iconCss = {\n      height: 10,\n      width: 10\n    }\n\n    return (\n      <BaseButton\n        ref={ref}\n        styles={{ button: buttonCss, icon: iconCss }}\n        asChild={!onClick}\n        {...other}\n      >\n        <Text variant='label' size='s'>\n          {children}\n        </Text>\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;;;AAYA;;;;AAIG;IACU,IAAI,GAAG,UAAU,CAC5B,UAAC,KAAgB,EAAE,GAA2B,EAAA;IACpC,IAAA,EAAA,GAA4C,KAAK,CAA9B,OAAA,EAAnB,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,KAAA,EAAE,QAAQ,GAAe,KAAK,CAAA,QAApB,EAAK,KAAK,GAAA,MAAA,CAAK,KAAK,EAAnD,CAAA,SAAA,EAAA,UAAA,CAA2C,CAAF,CAAU;AACjD,IAAA,IAAA,OAAO,GAAK,KAAK,CAAA,OAAV,CAAU;AACnB,IAAA,IAAA,EAAmC,GAAA,QAAQ,EAAE,EAA3C,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAe,CAAA;AAEnD,IAAA,IAAM,gBAAgB,GAAG;AACvB,QAAA,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;AAClC,QAAA,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM;AAC/B,QAAA,MAAM,EAAE,SAAS;KAClB,CAAA;AAED,IAAA,IAAM,qBAAqB,GAAG;AAC5B,QAAA,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM;AAChC,QAAA,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM;AAC/B,QAAA,MAAM,EAAE,SAAS;KAClB,CAAA;AAED,IAAA,IAAM,UAAU,GAAG;AACjB,QAAA,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;AAC3B,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK;AACxB,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK;KACzB,CAAA;AAED,IAAA,IAAM,eAAe,GAAG;AACtB,QAAA,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK;AACzB,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK;AACxB,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK;KACzB,CAAA;AAED,IAAA,IAAM,SAAS,GAAc;AAC3B,QAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC;AACnB,QAAA,aAAa,EAAE,CAAC;QAChB,YAAY,EAAE,OAAO,CAAC,EAAE;AACxB,QAAA,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,YAAY,CAAC,MAAM;AACjC,QAAA,eAAe,EAAE,gBAAgB,CAAC,OAAO,CAAC;AAC1C,QAAA,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;AAC1B,QAAA,SAAS,EAAE;AACT,YAAA,eAAe,EAAE,qBAAqB,CAAC,OAAO,CAAC;AAC/C,YAAA,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC;AAChC,SAAA;QACD,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM;KACzC,CAAA;AAED,IAAA,IAAM,OAAO,GAAG;AACd,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,KAAK,EAAE,EAAE;KACV,CAAA;AAED,IAAA,QACEA,GAAC,CAAA,UAAU,aACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,EAC5C,OAAO,EAAE,CAAC,OAAO,EACb,EAAA,KAAK,cAETA,GAAC,CAAA,IAAI,aAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAA,EAAA,EAAA,QAAA,EAC3B,QAAQ,EACJ,CAAA,CAAA,EAAA,CAAA,CACI,EACd;AACH,CAAC;;;;"}

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import { RefObject } from 'react';
 import PerfectScrollbar from 'react-perfect-scrollbar';
+export declare const useScrollbarRef: () => RefObject<HTMLElement> | 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.

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":";AAIA,OAAO,gBAAgB,MAAM,yBAAyB,CAAA;AAMtD;;;;;GAKG;AACH,eAAO,MAAM,SAAS;;;qJA0ErB,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,qCAE3B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS;;;qJA8ErB,CAAA"}

package/dist/components/scrollbar/Scrollbar.js

@@ -1,12 +1,18 @@
 import { __rest, __assign } from '../../_virtual/_tslib.js';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { forwardRef, useRef, useId, useEffect, useCallback } from 'react';
+import { createContext, forwardRef, useRef, useId, useEffect, useCallback, useContext } from 'react';
 import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import useMeasure from 'react-use-measure';
 import styles from './Scrollbar.module.css.js';
 
+var ScrollbarContext = createContext({
+    scrollBarRef: null
+});
+var useScrollbarRef = function () {
+    return useContext(ScrollbarContext).scrollBarRef;
+};
 /**
  * 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.
@@ -18,6 +24,7 @@ var Scrollbar = forwardRef(function (_a, forwardedRef) {
     // Do not remove:
     // useMeasure ref is required for infinite scrolling to work
     var ref = useMeasure({ polyfill: ResizeObserver })[0];
+    var containerRef = useRef(null);
     var timerRef = useRef(null);
     var reactId = useId();
     var elementId = id || reactId;
@@ -60,8 +67,8 @@ var Scrollbar = forwardRef(function (_a, forwardedRef) {
         }
     }, [isHidden, hideScrollbar]);
     var content = forward ? (children) : (jsx("div", __assign({ ref: ref, className: styles.scrollbar }, { children: children })));
-    return (jsx(PerfectScrollbar, __assign({}, props, { ref: forwardedRef, id: elementId, className: cn(styles.scrollbar, className), onMouseEnter: showScrollbar, onMouseLeave: hideScrollbar }, { children: content })));
+    return (jsx(ScrollbarContext.Provider, __assign({ value: { scrollBarRef: containerRef } }, { children: jsx(PerfectScrollbar, __assign({}, props, { ref: forwardedRef, containerRef: function (ref) { return (containerRef.current = ref); }, id: elementId, className: cn(styles.scrollbar, className), onMouseEnter: showScrollbar, onMouseLeave: hideScrollbar }, { children: content })) })));
 });
 
-export { Scrollbar };
+export { Scrollbar, useScrollbarRef };
 //# sourceMappingURL=Scrollbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import { useEffect, useRef, forwardRef, Ref, useCallback, useId } 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\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 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      <PerfectScrollbar\n        {...props}\n        ref={forwardedRef}\n        id={elementId}\n        className={cn(styles.scrollbar, className)}\n        onMouseEnter={showScrollbar}\n        onMouseLeave={hideScrollbar}\n      >\n        {content}\n      </PerfectScrollbar>\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\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/scrollbar/index.d.ts

@@ -1,3 +1,3 @@
-export { Scrollbar } from './Scrollbar';
+export { Scrollbar, useScrollbarRef } from './Scrollbar';
 export { type ScrollbarProps } from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/scrubber/Scrubber.js

@@ -16,8 +16,8 @@ var SCRUB_RELEASE_TIMEOUT_MS = 200;
  */
 var Scrubber = function (_a) {
     var _b;
-    var mediaKey = _a.mediaKey, isPlaying = _a.isPlaying, isDisabled = _a.isDisabled, isMobile = _a.isMobile, _c = _a.includeTimestamps, includeTimestamps = _c === void 0 ? true : _c, elapsedSeconds = _a.elapsedSeconds, totalSeconds = _a.totalSeconds, playbackRate = _a.playbackRate, getAudioPosition = _a.getAudioPosition, getTotalTime = _a.getTotalTime, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, includeExpandedTargets = _a.includeExpandedTargets, style = _a.style, className = _a.className;
-    var _d = useState(null), dragSeconds = _d[0], setDragSeconds = _d[1];
+    var mediaKey = _a.mediaKey, isPlaying = _a.isPlaying, isDisabled = _a.isDisabled, isMobile = _a.isMobile, _c = _a.includeTimestamps, includeTimestamps = _c === void 0 ? true : _c, elapsedSeconds = _a.elapsedSeconds, totalSeconds = _a.totalSeconds, _d = _a.playbackRate, playbackRate = _d === void 0 ? 1 : _d, getAudioPosition = _a.getAudioPosition, getTotalTime = _a.getTotalTime, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, includeExpandedTargets = _a.includeExpandedTargets, style = _a.style, className = _a.className;
+    var _e = useState(null), dragSeconds = _e[0], setDragSeconds = _e[1];
     var resetDragSeconds = function (isPlaying) {
         if (isPlaying) {
             setTimeout(function () { return setDragSeconds(null); }, SCRUB_RELEASE_TIMEOUT_MS);

package/dist/components/scrubber/Scrubber.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrubber.js","sources":["../../../src/components/scrubber/Scrubber.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nimport cn from 'classnames'\n\nimport { formatTrackTimestamp } from '~harmony/utils'\n\nimport styles from './Scrubber.module.css'\nimport { Slider } from './Slider'\nimport { ScrubberProps } from './types'\n\n/** Timeout applied when releasing the drag-handle before timestamps reset. */\nconst SCRUB_RELEASE_TIMEOUT_MS = 200\n\n/**\n * @beta - This component was directly ported from stems and subject to change\n * Wraps the `<Slider />` component and provides timestamp indicators.\n */\nexport const Scrubber = ({\n  mediaKey,\n  isPlaying,\n  isDisabled,\n  isMobile,\n  includeTimestamps = true,\n  elapsedSeconds,\n  totalSeconds,\n  playbackRate,\n  getAudioPosition,\n  getTotalTime,\n  onScrub,\n  onScrubRelease,\n  includeExpandedTargets,\n  style,\n  className\n}: ScrubberProps) => {\n  const [dragSeconds, setDragSeconds] = useState<number | null>(null)\n\n  const resetDragSeconds = (isPlaying: boolean) => {\n    if (isPlaying) {\n      setTimeout(() => setDragSeconds(null), SCRUB_RELEASE_TIMEOUT_MS)\n    }\n  }\n\n  const onHandleScrub = (seconds: number) => {\n    setDragSeconds(seconds)\n    if (onScrub) {\n      onScrub(seconds)\n    }\n  }\n\n  const onHandleScrubRelease = (seconds: number) => {\n    if (onScrubRelease) {\n      onScrubRelease(seconds)\n    }\n    resetDragSeconds(isPlaying)\n  }\n\n  useEffect(() => {\n    resetDragSeconds(isPlaying)\n  }, [isPlaying])\n\n  const timestampStart = dragSeconds !== null ? dragSeconds : elapsedSeconds\n\n  return (\n    <div\n      className={cn(styles.scrubber, {\n        [styles.isDisabled]: isDisabled,\n        [styles.isMobile]: isMobile,\n        className\n      })}\n    >\n      {includeTimestamps && (\n        <div className={styles.timestampStart}>\n          {formatTrackTimestamp(timestampStart)}\n        </div>\n      )}\n      <Slider\n        mediaKey={mediaKey}\n        isPlaying={isPlaying}\n        isDisabled={isDisabled}\n        isMobile={isMobile}\n        elapsedSeconds={elapsedSeconds}\n        totalSeconds={totalSeconds}\n        playbackRate={playbackRate}\n        onScrub={onHandleScrub}\n        getAudioPosition={getAudioPosition}\n        getTotalTime={getTotalTime}\n        onScrubRelease={onHandleScrubRelease}\n        includeExpandedTargets={includeExpandedTargets}\n        style={style}\n      />\n      {includeTimestamps && (\n        <div className={styles.timestampEnd}>\n          {formatTrackTimestamp(totalSeconds)}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Scrubber.js","sources":["../../../src/components/scrubber/Scrubber.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nimport cn from 'classnames'\n\nimport { formatTrackTimestamp } from '~harmony/utils'\n\nimport styles from './Scrubber.module.css'\nimport { Slider } from './Slider'\nimport { ScrubberProps } from './types'\n\n/** Timeout applied when releasing the drag-handle before timestamps reset. */\nconst SCRUB_RELEASE_TIMEOUT_MS = 200\n\n/**\n * @beta - This component was directly ported from stems and subject to change\n * Wraps the `<Slider />` component and provides timestamp indicators.\n */\nexport const Scrubber = ({\n  mediaKey,\n  isPlaying,\n  isDisabled,\n  isMobile,\n  includeTimestamps = true,\n  elapsedSeconds,\n  totalSeconds,\n  playbackRate = 1,\n  getAudioPosition,\n  getTotalTime,\n  onScrub,\n  onScrubRelease,\n  includeExpandedTargets,\n  style,\n  className\n}: ScrubberProps) => {\n  const [dragSeconds, setDragSeconds] = useState<number | null>(null)\n\n  const resetDragSeconds = (isPlaying: boolean) => {\n    if (isPlaying) {\n      setTimeout(() => setDragSeconds(null), SCRUB_RELEASE_TIMEOUT_MS)\n    }\n  }\n\n  const onHandleScrub = (seconds: number) => {\n    setDragSeconds(seconds)\n    if (onScrub) {\n      onScrub(seconds)\n    }\n  }\n\n  const onHandleScrubRelease = (seconds: number) => {\n    if (onScrubRelease) {\n      onScrubRelease(seconds)\n    }\n    resetDragSeconds(isPlaying)\n  }\n\n  useEffect(() => {\n    resetDragSeconds(isPlaying)\n  }, [isPlaying])\n\n  const timestampStart = dragSeconds !== null ? dragSeconds : elapsedSeconds\n\n  return (\n    <div\n      className={cn(styles.scrubber, {\n        [styles.isDisabled]: isDisabled,\n        [styles.isMobile]: isMobile,\n        className\n      })}\n    >\n      {includeTimestamps && (\n        <div className={styles.timestampStart}>\n          {formatTrackTimestamp(timestampStart)}\n        </div>\n      )}\n      <Slider\n        mediaKey={mediaKey}\n        isPlaying={isPlaying}\n        isDisabled={isDisabled}\n        isMobile={isMobile}\n        elapsedSeconds={elapsedSeconds}\n        totalSeconds={totalSeconds}\n        playbackRate={playbackRate}\n        onScrub={onHandleScrub}\n        getAudioPosition={getAudioPosition}\n        getTotalTime={getTotalTime}\n        onScrubRelease={onHandleScrubRelease}\n        includeExpandedTargets={includeExpandedTargets}\n        style={style}\n      />\n      {includeTimestamps && (\n        <div className={styles.timestampEnd}>\n          {formatTrackTimestamp(totalSeconds)}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/scrubber/types.d.ts

@@ -37,7 +37,7 @@ export type ScrubberProps = {
     /**
      * The speed that the media is being played at
      */
-    playbackRate: number;
+    playbackRate?: number;
     /**
      * Fired incrementally as the user drags the scrubber.
      */

package/dist/components/scrubber/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;OAKG;IACH,QAAQ,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;OAKG;IACH,cAAc,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAE1C;;OAEG;IACH,gBAAgB,EAAE,MAAM,MAAM,CAAA;IAE9B;;OAEG;IACH,YAAY,EAAE,MAAM,MAAM,CAAA;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IAED;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;OAKG;IACH,QAAQ,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;OAKG;IACH,cAAc,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAE1C;;OAEG;IACH,gBAAgB,EAAE,MAAM,MAAM,CAAA;IAE9B;;OAEG;IACH,YAAY,EAAE,MAAM,MAAM,CAAA;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IAED;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA"}

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

@@ -99,7 +99,7 @@ var Select = forwardRef(function Select(props, ref) {
                     }
                 }, variant: 'option' }, option, { onChange: handleChange, isActive: option.value === activeValue }), option.value)); }));
         } })));
-    return (jsxs(Flex, __assign({ ref: anchorRef }, { children: [jsx(TextInput, __assign({ ref: mergeRefs([ref, inputRef]), value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onClick: handleClick, "aria-haspopup": 'listbox', "aria-expanded": isOpen, autoComplete: 'off', endIcon: Icon, IconProps: { onClick: handleClickIcon }, elevateLabel: !!selectedOption, hidePlaceholder: !!selectedOption }, other)), selectedOption && !inputValue ? (jsx(MenuItem, __assign({ variant: 'option' }, selectedOption, { label: selectedLabel, onChange: function () { }, css: function (_a) {
+    return (jsxs(Flex, __assign({ ref: anchorRef }, { children: [jsx(TextInput, __assign({ ref: mergeRefs([ref, inputRef]), value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onClick: handleClick, "aria-haspopup": 'listbox', "aria-expanded": isOpen, autoComplete: 'off', endIcon: Icon, IconProps: { onClick: handleClickIcon }, elevateLabel: !!selectedOption && !props.hideLabel, hidePlaceholder: !!selectedOption }, other)), selectedOption && !inputValue ? (jsx(MenuItem, __assign({ variant: 'option' }, selectedOption, { label: selectedLabel, onChange: function () { }, css: function (_a) {
                     var spacing = _a.spacing;
                     return ({
                         position: 'absolute',

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 } = 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}\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: 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 } = 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 && !props.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: 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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"}

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

@@ -16,7 +16,7 @@ var SendIcon = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick;
     var _c = useTheme(), color = _c.color, motion = _c.motion;
     return (jsx(IconButton, { "aria-label": 'Send', icon: IconPaperAirplane, size: '2xl', onClick: onClick, css: {
-            cursor: 'pointer',
+            padding: 0,
             pointerEvents: disabled ? 'none' : 'all',
             opacity: disabled ? 0.5 : 1,
             path: {

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        cursor: 'pointer',\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,MAAM,EAAE,SAAS;YACjB,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/skeleton/Skeleton.d.ts

@@ -1,5 +1,8 @@
 import { BoxProps } from '../layout/Box';
-type SkeletonProps = BoxProps;
-export declare const Skeleton: (props: SkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+type SkeletonProps = BoxProps & {
+    /** If true, disables the shimmer animation */
+    noShimmer?: boolean;
+};
+export declare const Skeleton: ({ noShimmer, ...props }: SkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/skeleton/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAA;AAW7C,KAAK,aAAa,GAAG,QAAQ,CAAA;AAE7B,eAAO,MAAM,QAAQ,UAAW,aAAa,qDAmB5C,CAAA"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAA;AAW7C,KAAK,aAAa,GAAG,QAAQ,GAAG;IAC9B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,QAAQ,4BAA6B,aAAa,qDAmB9D,CAAA"}

package/dist/components/skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-import { __assign } from '../../_virtual/_tslib.js';
+import { __rest, __assign } from '../../_virtual/_tslib.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { keyframes, useTheme } from '@emotion/react';
 import { Box } from '../layout/Box/Box.js';
@@ -11,13 +11,14 @@ var shimmer = keyframes({
         backgroundPosition: 'left'
     }
 });
-var Skeleton = function (props) {
+var Skeleton = function (_a) {
+    var noShimmer = _a.noShimmer, props = __rest(_a, ["noShimmer"]);
     var color = useTheme().color;
     var color1 = color.neutral.n50;
     var color2 = color.neutral.n100;
     var css = {
         backgroundImage: "linear-gradient(\n      90deg,\n      ".concat(color1, " 0%,\n      ").concat(color1, " 32%,\n      ").concat(color2, " 46%,\n      ").concat(color2, " 54%,\n      ").concat(color1, " 68%,\n      ").concat(color2, " 100%\n    )"),
-        animation: "".concat(shimmer, " 1.5s forwards infinite ease"),
+        animation: noShimmer ? 'none' : "".concat(shimmer, " 1.5s forwards infinite ease"),
         backgroundSize: '400%'
     };
     return jsx(Box, __assign({ borderRadius: 's', css: css, "aria-busy": true }, props));

package/dist/components/skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import { keyframes, useTheme } from '@emotion/react'\n\nimport { Box, BoxProps } from '../layout/Box'\n\nconst shimmer = keyframes({\n  from: {\n    backgroundPosition: 'right'\n  },\n  to: {\n    backgroundPosition: 'left'\n  }\n})\n\ntype SkeletonProps = BoxProps\n\nexport const Skeleton = (props: SkeletonProps) => {\n  const { color } = useTheme()\n  const color1 = color.neutral.n50\n  const color2 = color.neutral.n100\n  const css = {\n    backgroundImage: `linear-gradient(\n      90deg,\n      ${color1} 0%,\n      ${color1} 32%,\n      ${color2} 46%,\n      ${color2} 54%,\n      ${color1} 68%,\n      ${color2} 100%\n    )`,\n    animation: `${shimmer} 1.5s forwards infinite ease`,\n    backgroundSize: '400%'\n  }\n\n  return <Box borderRadius='s' css={css} aria-busy {...props} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAIA,IAAM,OAAO,GAAG,SAAS,CAAC;AACxB,IAAA,IAAI,EAAE;AACJ,QAAA,kBAAkB,EAAE,OAAO;AAC5B,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,kBAAkB,EAAE,MAAM;AAC3B,KAAA;AACF,CAAA,CAAC,CAAA;AAIK,IAAM,QAAQ,GAAG,UAAC,KAAoB,EAAA;AACnC,IAAA,IAAA,KAAK,GAAK,QAAQ,EAAE,MAAf,CAAe;AAC5B,IAAA,IAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAA;AAChC,IAAA,IAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAA;AACjC,IAAA,IAAM,GAAG,GAAG;AACV,QAAA,eAAe,EAAE,wCAAA,CAAA,MAAA,CAEb,MAAM,EAAA,cAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EACR,cAAA,CAAA;QACF,SAAS,EAAE,EAAG,CAAA,MAAA,CAAA,OAAO,EAA8B,8BAAA,CAAA;AACnD,QAAA,cAAc,EAAE,MAAM;KACvB,CAAA;AAED,IAAA,OAAOA,GAAC,CAAA,GAAG,EAAC,QAAA,CAAA,EAAA,YAAY,EAAC,GAAG,EAAC,GAAG,EAAE,GAAG,EAAgB,WAAA,EAAA,IAAA,EAAA,EAAA,KAAK,EAAI,CAAA;AAChE;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import { keyframes, useTheme } from '@emotion/react'\n\nimport { Box, BoxProps } from '../layout/Box'\n\nconst shimmer = keyframes({\n  from: {\n    backgroundPosition: 'right'\n  },\n  to: {\n    backgroundPosition: 'left'\n  }\n})\n\ntype SkeletonProps = BoxProps & {\n  /** If true, disables the shimmer animation */\n  noShimmer?: boolean\n}\n\nexport const Skeleton = ({ noShimmer, ...props }: SkeletonProps) => {\n  const { color } = useTheme()\n  const color1 = color.neutral.n50\n  const color2 = color.neutral.n100\n  const css = {\n    backgroundImage: `linear-gradient(\n      90deg,\n      ${color1} 0%,\n      ${color1} 32%,\n      ${color2} 46%,\n      ${color2} 54%,\n      ${color1} 68%,\n      ${color2} 100%\n    )`,\n    animation: noShimmer ? 'none' : `${shimmer} 1.5s forwards infinite ease`,\n    backgroundSize: '400%'\n  }\n\n  return <Box borderRadius='s' css={css} aria-busy {...props} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAIA,IAAM,OAAO,GAAG,SAAS,CAAC;AACxB,IAAA,IAAI,EAAE;AACJ,QAAA,kBAAkB,EAAE,OAAO;AAC5B,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,kBAAkB,EAAE,MAAM;AAC3B,KAAA;AACF,CAAA,CAAC,CAAA;AAOK,IAAM,QAAQ,GAAG,UAAC,EAAsC,EAAA;AAApC,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EAAK,KAAK,GAAA,MAAA,CAAA,EAAA,EAArB,aAAuB,CAAF,CAAA;AACpC,IAAA,IAAA,KAAK,GAAK,QAAQ,EAAE,MAAf,CAAe;AAC5B,IAAA,IAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAA;AAChC,IAAA,IAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAA;AACjC,IAAA,IAAM,GAAG,GAAG;AACV,QAAA,eAAe,EAAE,wCAAA,CAAA,MAAA,CAEb,MAAM,EAAA,cAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EACR,cAAA,CAAA;QACF,SAAS,EAAE,SAAS,GAAG,MAAM,GAAG,EAAG,CAAA,MAAA,CAAA,OAAO,EAA8B,8BAAA,CAAA;AACxE,QAAA,cAAc,EAAE,MAAM;KACvB,CAAA;AAED,IAAA,OAAOA,GAAC,CAAA,GAAG,EAAC,QAAA,CAAA,EAAA,YAAY,EAAC,GAAG,EAAC,GAAG,EAAE,GAAG,EAAgB,WAAA,EAAA,IAAA,EAAA,EAAA,KAAK,EAAI,CAAA;AAChE;;;;"}

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

@@ -10,6 +10,7 @@ export declare const TextLink: (props: Omit<import("../text").TextProps, "varian
     noUnderlineOnHover?: boolean | undefined;
     isActive?: boolean | undefined;
     isExternal?: boolean | undefined;
+    ellipses?: boolean | undefined;
     applyHoverStylesToInnerSvg?: boolean | undefined;
 } & import("react").RefAttributes<"a">) => import("react").ReactElement<any, 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;;;;;;;;;wIA+EnB,CAAA"}
+{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../src/components/text-link/TextLink.tsx"],"names":[],"mappings":";AASA;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;wIAkFnB,CAAA"}

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

@@ -9,8 +9,8 @@ import { Text } from '../text/Text.js';
  * Also known as hyperlinks, these are words or phrases that can be clicked to navigate to a linked webpage.
  */
 var TextLink = forwardRef(function (props, ref) {
-    var _a = props.asChild, asChild = _a === void 0 ? false : _a, children = props.children, _b = props.variant, variant = _b === void 0 ? 'default' : _b, isActive = props.isActive, _c = props.isExternal, isExternal = _c === void 0 ? false : _c, onClick = props.onClick, textVariant = props.textVariant, showUnderline = props.showUnderline, noUnderlineOnHover = props.noUnderlineOnHover, applyHoverStylesToInnerSvg = props.applyHoverStylesToInnerSvg, disabled = props.disabled, other = __rest(props, ["asChild", "children", "variant", "isActive", "isExternal", "onClick", "textVariant", "showUnderline", "noUnderlineOnHover", "applyHoverStylesToInnerSvg", "disabled"]);
-    var _d = useTheme(), color = _d.color, spacing = _d.spacing, motion = _d.motion;
+    var _a = props.asChild, asChild = _a === void 0 ? false : _a, children = props.children, _b = props.variant, variant = _b === void 0 ? 'default' : _b, isActive = props.isActive, _c = props.isExternal, isExternal = _c === void 0 ? false : _c, _d = props.ellipses, ellipses = _d === void 0 ? false : _d, onClick = props.onClick, textVariant = props.textVariant, showUnderline = props.showUnderline, noUnderlineOnHover = props.noUnderlineOnHover, applyHoverStylesToInnerSvg = props.applyHoverStylesToInnerSvg, disabled = props.disabled, other = __rest(props, ["asChild", "children", "variant", "isActive", "isExternal", "ellipses", "onClick", "textVariant", "showUnderline", "noUnderlineOnHover", "applyHoverStylesToInnerSvg", "disabled"]);
+    var _e = useTheme(), color = _e.color, spacing = _e.spacing, motion = _e.motion;
     var variantColors = {
         default: color.link.default,
         subdued: color.link.subdued,
@@ -30,9 +30,9 @@ 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({ display: 'inline-flex', gap: spacing.s, color: variantColors[variant], textDecoration: 'none', transition: "color ".concat(motion.hover), cursor: 'pointer', pointerEvents: disabled ? 'none' : undefined }, (applyHoverStylesToInnerSvg && {
+    return (jsx(Text, __assign({ ref: ref, asChild: true, onClick: onClick, css: __assign(__assign(__assign(__assign(__assign({ display: '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) }
-        })), { ':hover': hoverStyles }), (isActive && __assign(__assign({}, hoverStyles), { textDecoration: 'none' }))), (showUnderline && hoverStyles)), variant: textVariant }, other, { children: asChild ? (jsx(Slot, { children: children })) : (jsx("a", __assign({ target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noreferrer' : undefined }, { children: children }))) })));
+        })), { ':hover': hoverStyles }), (isActive && __assign(__assign({}, hoverStyles), { textDecoration: 'none' }))), (showUnderline && hoverStyles)), (ellipses && { minWidth: 0 })), variant: textVariant, ellipses: ellipses }, other, { children: asChild ? (jsx(Slot, { children: children })) : (jsx("a", __assign({ target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noreferrer' : undefined }, { children: children }))) })));
 });
 
 export { TextLink };

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    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        display: '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      }}\n      variant={textVariant}\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      ref={ref}\n      asChild\n      onClick={onClick}\n      css={{\n        display: '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/text-link/types.d.ts

@@ -33,6 +33,11 @@ export type TextLinkProps = Omit<TextProps, 'variant' | 'onClick' | 'color'> & O
      * @default false
      */
     isExternal?: boolean;
+    /**
+     * Whether or not to apply text ellipsis styling.
+     * This will make the link block displayed which may affect how it flows in certain flex containers
+     */
+    ellipses?: boolean;
     /**
      * Whether or not to apply styling to inner svgs.
      * Some text links may include an icon that you wish to style similarly to the text

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/text-link/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC,GAC1E,IAAI,CACF,SAAS,CAAC,iBAAiB,CAAC,EAE5B,MAAM,GAAG,OAAO,GAAG,KAAK,CACzB,GAAG;IACF;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,SAAS,GACT,UAAU,GACV,WAAW,GACX,QAAQ,CAAA;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAElC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAA;CACrC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/text-link/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC,GAC1E,IAAI,CACF,SAAS,CAAC,iBAAiB,CAAC,EAE5B,MAAM,GAAG,OAAO,GAAG,KAAK,CACzB,GAAG;IACF;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,SAAS,GACT,UAAU,GACV,WAAW,GACX,QAAQ,CAAA;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAElC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAA;CACrC,CAAA"}

package/dist/foundations/shadows/shadows.d.ts

@@ -1,4 +1,4 @@
-export type ShadowOptions = 'near' | 'mid' | 'midInverted' | 'far' | 'emphasis' | 'special' | 'drop' | 'flat';
+export type ShadowOptions = 'near' | 'mid' | 'midInverted' | 'far' | 'emphasis' | 'special' | 'drop' | 'flat' | 'inset';
 export declare const shadows: {
     near: string;
     mid: string;
@@ -8,6 +8,7 @@ export declare const shadows: {
     special: string;
     flat: undefined;
     drop: string;
+    inset: string;
 };
 export type Shadows = typeof shadows;
 //# sourceMappingURL=shadows.d.ts.map