@audius/harmony 0.4.2 → 0.5.0

package/dist/utils/createImageIcon.js

@@ -1,91 +0,0 @@
-import { __assign } from '../_virtual/_tslib.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { useTheme } from '@emotion/react';
-import 'react';
-import { roundedHexClipPath } from '../icons/SVGDefs.js';
-import '../components/layout/Box/Box.js';
-import { Flex } from '../components/layout/Flex/Flex.js';
-import '../components/skeleton/Skeleton.js';
-import '../components/common/HiddenInput.js';
-import '../components/radio-group/RadioGroupContext.js';
-import '../components/text/Text.js';
-import '../components/input/TextInput/TextInput.js';
-import '../components/input/TextInput/types.js';
-import '../components/input/PasswordInput/PasswordInput.js';
-import '../components/input/TokenAmountInput/TokenAmountInput.js';
-import '../components/layout/Paper/Paper.js';
-import '../components/button/Button/Button.js';
-import '../components/button/PlainButton/PlainButton.js';
-import '@emotion/css';
-import { iconSizes } from '../foundations/spacing/spacing.js';
-import '../components/button/FollowButton/FollowButton.js';
-import '../components/button/IconButton/IconButton.js';
-import '../components/button/UnstyledButton.js';
-import '../components/button/FilterButton/FilterButton.js';
-import '../components/button/FilterButton/FilterButtonOption.js';
-import '@react-spring/web';
-import 'classnames';
-import '../components/text-link/TextLink.js';
-import '../components/switch/Switch.js';
-import '@juggle/resize-observer';
-import 'react-merge-refs';
-import 'react-use-measure';
-import '../components/scrollbar/Scrollbar.js';
-import '../components/popup/Popup.js';
-import '../components/popup-menu/PopupMenu.js';
-import '../components/modal/Modal.js';
-import '../components/modal/ModalContext.js';
-import 'react-spring/renderprops.cjs';
-import '../components/modal/ModalHeader.js';
-import '../components/modal/ModalFooter.js';
-import '../components/modal/types.js';
-import 'lodash';
-import 'numeral';
-import '../contexts/MediaContext.js';
-import 'color';
-import 'lottie-react';
-import '../components/pill/Pill.js';
-import '../components/select/Select/Select.js';
-import '../components/checkbox/Checkbox.js';
-import '../components/hover-card/HoverCard.js';
-import '../foundations/color/semantic.js';
-import '../foundations/color/color.js';
-import '../foundations/theme/theme.js';
-import '../hooks/useHotKeys.js';
-import '../components/internal/MenuItem.js';
-
-var HEXAGON_BORDER_INSET_SCALE = 0.99;
-var createImageIcon = function (src) {
-    var Icon = function (_a) {
-        var width = _a.width, height = _a.height, _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, style = _a.style, _c = _a.hex, hex = _c === void 0 ? false : _c;
-        var color = useTheme().color;
-        var finalWidth = width !== null && width !== void 0 ? width : (size ? iconSizes[size] : 20);
-        var finalHeight = height !== null && height !== void 0 ? height : (size ? iconSizes[size] : 20);
-        var image = (jsx("img", { src: src, width: finalWidth, height: finalHeight, css: {
-                clipPath: hex ? "url(#".concat(roundedHexClipPath, ")") : undefined,
-                display: 'block'
-            }, alt: '' }));
-        // If not hexagonal, return the image as-is
-        if (!hex) {
-            return (jsx("img", { src: src, width: finalWidth, height: finalHeight, className: className, style: style, css: {
-                    clipPath: hex ? "url(#".concat(roundedHexClipPath, ")") : undefined
-                }, alt: '' }));
-        }
-        // For hexagonal icons, wrap with border
-        return (jsxs(Flex, __assign({ className: className, style: style, css: {
-                position: 'relative',
-                width: finalWidth,
-                height: finalHeight,
-                display: 'inline-block'
-            } }, { children: [image, jsx("svg", __assign({ width: finalWidth, height: finalHeight, viewBox: '0 0 1 1', css: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        pointerEvents: 'none'
-                    } }, { children: jsx("g", __assign({ transform: "translate(".concat((1 - HEXAGON_BORDER_INSET_SCALE) / 2, ", ").concat((1 - HEXAGON_BORDER_INSET_SCALE) / 2, ") scale(").concat(HEXAGON_BORDER_INSET_SCALE, ")") }, { children: jsx("path", { d: 'M0.966 0.378C0.93 0.301 0.887 0.228 0.839 0.158L0.824 0.136C0.805 0.108 0.779 0.085 0.75 0.068C0.721 0.051 0.688 0.041 0.655 0.039L0.627 0.036C0.543 0.03 0.457 0.03 0.373 0.036L0.346 0.039C0.312 0.041 0.279 0.051 0.25 0.068C0.221 0.085 0.196 0.108 0.177 0.136L0.161 0.158C0.113 0.228 0.07 0.302 0.034 0.378L0.022 0.403C0.008 0.433 0 0.466 0 0.5C0 0.534 0.008 0.567 0.022 0.597L0.034 0.622C0.07 0.698 0.113 0.772 0.161 0.842L0.177 0.864C0.196 0.892 0.221 0.915 0.25 0.932C0.279 0.949 0.312 0.959 0.346 0.961L0.373 0.964C0.457 0.97 0.543 0.97 0.627 0.964L0.655 0.961C0.688 0.959 0.721 0.949 0.75 0.932C0.779 0.915 0.805 0.892 0.824 0.864L0.839 0.842C0.887 0.772 0.93 0.698 0.966 0.622L0.978 0.597C0.992 0.567 1 0.534 1 0.5C1 0.466 0.992 0.433 0.978 0.403L0.966 0.378Z', fill: 'none', opacity: 0.3, stroke: color.neutral.n950, strokeWidth: "".concat(1 / Math.max(finalWidth, finalHeight)) }) })) }))] })));
-    };
-    return Icon;
-};
-
-export { createImageIcon };
-//# sourceMappingURL=createImageIcon.js.map

package/dist/utils/createImageIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createImageIcon.js","sources":["../../src/utils/createImageIcon.tsx"],"sourcesContent":["import type { CSSProperties, FC } from 'react'\n\nimport { useTheme } from '@emotion/react'\n\nimport { Flex } from '~harmony/components'\n\nimport { IconSize, iconSizes } from '../foundations/spacing'\nimport { roundedHexClipPath } from '../icons/SVGDefs'\n\nconst HEXAGON_BORDER_INSET_SCALE = 0.99\n\nexport type IconProps = {\n  width?: number | string\n  height?: number | string\n  size?: IconSize\n  className?: string\n  style?: CSSProperties\n  hex?: boolean\n}\n\nexport const createImageIcon = (src: string) => {\n  const Icon: FC<IconProps> = ({\n    width,\n    height,\n    size = 'm',\n    className,\n    style,\n    hex = false\n  }) => {\n    const { color } = useTheme()\n    const finalWidth =\n      width ?? (size ? iconSizes[size as keyof typeof iconSizes] : 20)\n    const finalHeight =\n      height ?? (size ? iconSizes[size as keyof typeof iconSizes] : 20)\n\n    const image = (\n      <img\n        src={src}\n        width={finalWidth}\n        height={finalHeight}\n        css={{\n          clipPath: hex ? `url(#${roundedHexClipPath})` : undefined,\n          display: 'block'\n        }}\n        alt=''\n      />\n    )\n\n    // If not hexagonal, return the image as-is\n    if (!hex) {\n      return (\n        <img\n          src={src}\n          width={finalWidth}\n          height={finalHeight}\n          className={className}\n          style={style}\n          css={{\n            clipPath: hex ? `url(#${roundedHexClipPath})` : undefined\n          }}\n          alt=''\n        />\n      )\n    }\n\n    // For hexagonal icons, wrap with border\n    return (\n      <Flex\n        className={className}\n        style={style}\n        css={{\n          position: 'relative',\n          width: finalWidth,\n          height: finalHeight,\n          display: 'inline-block'\n        }}\n      >\n        {image}\n        <svg\n          width={finalWidth}\n          height={finalHeight}\n          viewBox='0 0 1 1'\n          css={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            pointerEvents: 'none'\n          }}\n        >\n          <g\n            transform={`translate(${(1 - HEXAGON_BORDER_INSET_SCALE) / 2}, ${\n              (1 - HEXAGON_BORDER_INSET_SCALE) / 2\n            }) scale(${HEXAGON_BORDER_INSET_SCALE})`}\n          >\n            <path\n              d='M0.966 0.378C0.93 0.301 0.887 0.228 0.839 0.158L0.824 0.136C0.805 0.108 0.779 0.085 0.75 0.068C0.721 0.051 0.688 0.041 0.655 0.039L0.627 0.036C0.543 0.03 0.457 0.03 0.373 0.036L0.346 0.039C0.312 0.041 0.279 0.051 0.25 0.068C0.221 0.085 0.196 0.108 0.177 0.136L0.161 0.158C0.113 0.228 0.07 0.302 0.034 0.378L0.022 0.403C0.008 0.433 0 0.466 0 0.5C0 0.534 0.008 0.567 0.022 0.597L0.034 0.622C0.07 0.698 0.113 0.772 0.161 0.842L0.177 0.864C0.196 0.892 0.221 0.915 0.25 0.932C0.279 0.949 0.312 0.959 0.346 0.961L0.373 0.964C0.457 0.97 0.543 0.97 0.627 0.964L0.655 0.961C0.688 0.959 0.721 0.949 0.75 0.932C0.779 0.915 0.805 0.892 0.824 0.864L0.839 0.842C0.887 0.772 0.93 0.698 0.966 0.622L0.978 0.597C0.992 0.567 1 0.534 1 0.5C1 0.466 0.992 0.433 0.978 0.403L0.966 0.378Z'\n              fill='none'\n              opacity={0.3}\n              stroke={color.neutral.n950}\n              strokeWidth={`${\n                1 / Math.max(finalWidth as number, finalHeight as number)\n              }`}\n            />\n          </g>\n        </svg>\n      </Flex>\n    )\n  }\n  return Icon\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/utils/createResponsiveStyles.d.ts

@@ -1,52 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import { useMedia } from '../hooks/useMedia';
-type MediaContextType = ReturnType<typeof useMedia>;
-type ResponsiveStyleValue = CSSObject | ((media: MediaContextType) => CSSObject);
-type ResponsiveStyleConfig = {
-    base?: ResponsiveStyleValue;
-    mobile?: ResponsiveStyleValue;
-    tablet?: ResponsiveStyleValue;
-    desktop?: ResponsiveStyleValue;
-};
-type NamedResponsiveStylesConfig = {
-    [styleKey: string]: ResponsiveStyleConfig;
-};
-/**
- * Creates a single merged style object based on the current media breakpoints.
- * Applies base styles first, then overrides with styles for the active breakpoint
- * (mobile, tablet, or desktop). Style values can be objects or functions
- * receiving the media state for complex logic.
- *
- * Priority: base -> mobile -> tablet -> desktop (later stages override earlier ones)
- *
- * @param media - The media context object from useMedia()
- * @param config - Style configuration for different breakpoints
- * @returns A merged CSS object with styles applied according to breakpoints
- */
-export declare const createResponsiveStyle: (media: MediaContextType, config: ResponsiveStyleConfig) => CSSObject;
-/**
- * Creates multiple responsive style objects as a convenience for components
- * that need several different styled elements.
- *
- * Each style configuration follows the same pattern as createResponsiveStyle,
- * with base, mobile, tablet, and desktop style definitions.
- *
- * @example
- * ```
- * const styles = createResponsiveStyles(media, {
- *   buttonStyles: { base: {...}, mobile: {...} },
- *   headerStyles: { base: {...}, tablet: {...} }
- * })
- *
- * // Usage
- * <Button css={styles.buttonStyles}>Click me</Button>
- * <Header css={styles.headerStyles}>Title</Header>
- * ```
- *
- * @param media - The media context object from useMedia()
- * @param configs - Object with named style configurations
- * @returns Object with the same keys, but values processed into responsive styles
- */
-export declare const createResponsiveStyles: <T extends NamedResponsiveStylesConfig>(media: MediaContextType, configs: T) => { [K in keyof T]: CSSObject; };
-export {};
-//# sourceMappingURL=createResponsiveStyles.d.ts.map

package/dist/utils/createResponsiveStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createResponsiveStyles.d.ts","sourceRoot":"","sources":["../../src/utils/createResponsiveStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEnD,KAAK,oBAAoB,GAAG,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAC,CAAA;AAEhF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,KAAK,2BAA2B,GAAG;IACjC,CAAC,QAAQ,EAAE,MAAM,GAAG,qBAAqB,CAAA;CAC1C,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,qBAAqB,UACzB,gBAAgB,UACf,qBAAqB,KAC5B,SAqBF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,sBAAsB,iDAC1B,gBAAgB,+CAUxB,CAAA"}

package/dist/utils/createResponsiveStyles.js

@@ -1,68 +0,0 @@
-/**
- * Creates a single merged style object based on the current media breakpoints.
- * Applies base styles first, then overrides with styles for the active breakpoint
- * (mobile, tablet, or desktop). Style values can be objects or functions
- * receiving the media state for complex logic.
- *
- * Priority: base -> mobile -> tablet -> desktop (later stages override earlier ones)
- *
- * @param media - The media context object from useMedia()
- * @param config - Style configuration for different breakpoints
- * @returns A merged CSS object with styles applied according to breakpoints
- */
-var createResponsiveStyle = function (media, config) {
-    var finalStyles = {};
-    var applyStyles = function (styleSource) {
-        if (!styleSource)
-            return;
-        if (typeof styleSource === 'function') {
-            Object.assign(finalStyles, styleSource(media));
-        }
-        else if (typeof styleSource === 'object') {
-            Object.assign(finalStyles, styleSource);
-        }
-    };
-    // Apply base styles first
-    applyStyles(config.base);
-    // Apply breakpoint-specific styles, allowing overrides
-    if (media.isMobile)
-        applyStyles(config.mobile);
-    if (media.isTablet)
-        applyStyles(config.tablet);
-    if (media.isDesktop)
-        applyStyles(config.desktop);
-    return finalStyles;
-};
-/**
- * Creates multiple responsive style objects as a convenience for components
- * that need several different styled elements.
- *
- * Each style configuration follows the same pattern as createResponsiveStyle,
- * with base, mobile, tablet, and desktop style definitions.
- *
- * @example
- * ```
- * const styles = createResponsiveStyles(media, {
- *   buttonStyles: { base: {...}, mobile: {...} },
- *   headerStyles: { base: {...}, tablet: {...} }
- * })
- *
- * // Usage
- * <Button css={styles.buttonStyles}>Click me</Button>
- * <Header css={styles.headerStyles}>Title</Header>
- * ```
- *
- * @param media - The media context object from useMedia()
- * @param configs - Object with named style configurations
- * @returns Object with the same keys, but values processed into responsive styles
- */
-var createResponsiveStyles = function (media, configs) {
-    var result = {};
-    for (var key in configs) {
-        result[key] = createResponsiveStyle(media, configs[key]);
-    }
-    return result;
-};
-
-export { createResponsiveStyle, createResponsiveStyles };
-//# sourceMappingURL=createResponsiveStyles.js.map

package/dist/utils/createResponsiveStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createResponsiveStyles.js","sources":["../../src/utils/createResponsiveStyles.ts"],"sourcesContent":["import { CSSObject } from '@emotion/react'\n\nimport { useMedia } from '../hooks/useMedia'\n\n// Use ReturnType to get the actual MediaContextType from useMedia hook\ntype MediaContextType = ReturnType<typeof useMedia>\n\ntype ResponsiveStyleValue = CSSObject | ((media: MediaContextType) => CSSObject)\n\ntype ResponsiveStyleConfig = {\n  base?: ResponsiveStyleValue\n  mobile?: ResponsiveStyleValue\n  tablet?: ResponsiveStyleValue\n  desktop?: ResponsiveStyleValue\n}\n\ntype NamedResponsiveStylesConfig = {\n  [styleKey: string]: ResponsiveStyleConfig\n}\n\n/**\n * Creates a single merged style object based on the current media breakpoints.\n * Applies base styles first, then overrides with styles for the active breakpoint\n * (mobile, tablet, or desktop). Style values can be objects or functions\n * receiving the media state for complex logic.\n *\n * Priority: base -> mobile -> tablet -> desktop (later stages override earlier ones)\n *\n * @param media - The media context object from useMedia()\n * @param config - Style configuration for different breakpoints\n * @returns A merged CSS object with styles applied according to breakpoints\n */\nexport const createResponsiveStyle = (\n  media: MediaContextType,\n  config: ResponsiveStyleConfig\n): CSSObject => {\n  const finalStyles: CSSObject = {}\n\n  const applyStyles = (styleSource: ResponsiveStyleValue | undefined) => {\n    if (!styleSource) return\n    if (typeof styleSource === 'function') {\n      Object.assign(finalStyles, styleSource(media))\n    } else if (typeof styleSource === 'object') {\n      Object.assign(finalStyles, styleSource)\n    }\n  }\n\n  // Apply base styles first\n  applyStyles(config.base)\n\n  // Apply breakpoint-specific styles, allowing overrides\n  if (media.isMobile) applyStyles(config.mobile)\n  if (media.isTablet) applyStyles(config.tablet)\n  if (media.isDesktop) applyStyles(config.desktop)\n\n  return finalStyles\n}\n\n/**\n * Creates multiple responsive style objects as a convenience for components\n * that need several different styled elements.\n *\n * Each style configuration follows the same pattern as createResponsiveStyle,\n * with base, mobile, tablet, and desktop style definitions.\n *\n * @example\n * ```\n * const styles = createResponsiveStyles(media, {\n *   buttonStyles: { base: {...}, mobile: {...} },\n *   headerStyles: { base: {...}, tablet: {...} }\n * })\n *\n * // Usage\n * <Button css={styles.buttonStyles}>Click me</Button>\n * <Header css={styles.headerStyles}>Title</Header>\n * ```\n *\n * @param media - The media context object from useMedia()\n * @param configs - Object with named style configurations\n * @returns Object with the same keys, but values processed into responsive styles\n */\nexport const createResponsiveStyles = <T extends NamedResponsiveStylesConfig>(\n  media: MediaContextType,\n  configs: T\n): { [K in keyof T]: CSSObject } => {\n  const result = {} as { [K in keyof T]: CSSObject }\n\n  for (const key in configs) {\n    result[key] = createResponsiveStyle(media, configs[key])\n  }\n\n  return result\n}\n"],"names":[],"mappings":"AAoBA;;;;;;;;;;;AAWG;AACU,IAAA,qBAAqB,GAAG,UACnC,KAAuB,EACvB,MAA6B,EAAA;IAE7B,IAAM,WAAW,GAAc,EAAE,CAAA;IAEjC,IAAM,WAAW,GAAG,UAAC,WAA6C,EAAA;AAChE,QAAA,IAAI,CAAC,WAAW;YAAE,OAAM;AACxB,QAAA,IAAI,OAAO,WAAW,KAAK,UAAU,EAAE;YACrC,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA;AAC/C,SAAA;AAAM,aAAA,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;AAC1C,YAAA,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;AACxC,SAAA;AACH,KAAC,CAAA;;AAGD,IAAA,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;;IAGxB,IAAI,KAAK,CAAC,QAAQ;AAAE,QAAA,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAC9C,IAAI,KAAK,CAAC,QAAQ;AAAE,QAAA,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAC9C,IAAI,KAAK,CAAC,SAAS;AAAE,QAAA,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AAEhD,IAAA,OAAO,WAAW,CAAA;AACpB,EAAC;AAED;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACU,IAAA,sBAAsB,GAAG,UACpC,KAAuB,EACvB,OAAU,EAAA;IAEV,IAAM,MAAM,GAAG,EAAmC,CAAA;AAElD,IAAA,KAAK,IAAM,GAAG,IAAI,OAAO,EAAE;AACzB,QAAA,MAAM,CAAC,GAAG,CAAC,GAAG,qBAAqB,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;AACzD,KAAA;AAED,IAAA,OAAO,MAAM,CAAA;AACf;;;;"}

package/dist/utils/formatCount.d.ts

@@ -1,13 +0,0 @@
-/**
- * Formats a count into a more readable string representation.
- * For counts over 1000, it converts the number into a format with a suffix (K for thousands, M for millions, etc.)
- * For example:
- * - 375 => "375"
- * - 4,210 => "4.21K"
- * - 443,123 => "443K"
- * - 4,001,000 => "4M"
- * If the count is 0, it returns "0".
- * This function is pulled over from the common package because we don't use the common package in Harmony.
- */
-export declare const formatCount: (count: number) => string;
-//# sourceMappingURL=formatCount.d.ts.map

package/dist/utils/formatCount.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"formatCount.d.ts","sourceRoot":"","sources":["../../src/utils/formatCount.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,UAAW,MAAM,WAmBxC,CAAA"}

package/dist/utils/formatCount.js

@@ -1,42 +0,0 @@
-import numeral from 'numeral';
-
-/**
- * Formats a count into a more readable string representation.
- * For counts over 1000, it converts the number into a format with a suffix (K for thousands, M for millions, etc.)
- * For example:
- * - 375 => "375"
- * - 4,210 => "4.21K"
- * - 443,123 => "443K"
- * - 4,001,000 => "4M"
- * If the count is 0, it returns "0".
- * This function is pulled over from the common package because we don't use the common package in Harmony.
- */
-var formatCount = function (count) {
-    if (count >= 1000) {
-        var countStr = count.toString();
-        if (countStr.length % 3 === 0) {
-            return numeral(count).format('0a').toUpperCase();
-        }
-        else if (countStr.length % 3 === 1 && countStr[2] !== '0') {
-            return numeral(count).format('0.00a').toUpperCase();
-        }
-        else if (countStr.length % 3 === 1 && countStr[1] !== '0') {
-            return numeral(count).format('0.0a').toUpperCase();
-        }
-        else if (countStr.length % 3 === 2 && countStr[2] !== '0') {
-            return numeral(count).format('0.0a').toUpperCase();
-        }
-        else {
-            return numeral(count).format('0a').toUpperCase();
-        }
-    }
-    else if (!count) {
-        return '0';
-    }
-    else {
-        return "".concat(count);
-    }
-};
-
-export { formatCount };
-//# sourceMappingURL=formatCount.js.map

package/dist/utils/formatCount.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formatCount.js","sources":["../../src/utils/formatCount.ts"],"sourcesContent":["import numeral from 'numeral'\n\n/**\n * Formats a count into a more readable string representation.\n * For counts over 1000, it converts the number into a format with a suffix (K for thousands, M for millions, etc.)\n * For example:\n * - 375 => \"375\"\n * - 4,210 => \"4.21K\"\n * - 443,123 => \"443K\"\n * - 4,001,000 => \"4M\"\n * If the count is 0, it returns \"0\".\n * This function is pulled over from the common package because we don't use the common package in Harmony.\n */\nexport const formatCount = (count: number) => {\n  if (count >= 1000) {\n    const countStr = count.toString()\n    if (countStr.length % 3 === 0) {\n      return numeral(count).format('0a').toUpperCase()\n    } else if (countStr.length % 3 === 1 && countStr[2] !== '0') {\n      return numeral(count).format('0.00a').toUpperCase()\n    } else if (countStr.length % 3 === 1 && countStr[1] !== '0') {\n      return numeral(count).format('0.0a').toUpperCase()\n    } else if (countStr.length % 3 === 2 && countStr[2] !== '0') {\n      return numeral(count).format('0.0a').toUpperCase()\n    } else {\n      return numeral(count).format('0a').toUpperCase()\n    }\n  } else if (!count) {\n    return '0'\n  } else {\n    return `${count}`\n  }\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;AAUG;AACI,IAAM,WAAW,GAAG,UAAC,KAAa,EAAA;IACvC,IAAI,KAAK,IAAI,IAAI,EAAE;AACjB,QAAA,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;AACjC,QAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,EAAE;AAC7B,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAA;AACjD,SAAA;AAAM,aAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AAC3D,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAA;AACpD,SAAA;AAAM,aAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AAC3D,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAA;AACnD,SAAA;AAAM,aAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AAC3D,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAA;AACnD,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAA;AACjD,SAAA;AACF,KAAA;SAAM,IAAI,CAAC,KAAK,EAAE;AACjB,QAAA,OAAO,GAAG,CAAA;AACX,KAAA;AAAM,SAAA;QACL,OAAO,EAAA,CAAA,MAAA,CAAG,KAAK,CAAE,CAAA;AAClB,KAAA;AACH;;;;"}

package/dist/utils/formatTrackTimestamp.d.ts

@@ -1,6 +0,0 @@
-/**
- * Pretty formats a track timestamp.
- * Ex. input 65 -> output 1:05
- */
-export declare const formatTrackTimestamp: (timestampSecs: number) => string;
-//# sourceMappingURL=formatTrackTimestamp.d.ts.map

package/dist/utils/formatTrackTimestamp.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"formatTrackTimestamp.d.ts","sourceRoot":"","sources":["../../src/utils/formatTrackTimestamp.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,kBAAmB,MAAM,WAUzD,CAAA"}

package/dist/utils/formatTrackTimestamp.js

@@ -1,19 +0,0 @@
-/**
- * Pretty formats a track timestamp.
- * Ex. input 65 -> output 1:05
- */
-var formatTrackTimestamp = function (timestampSecs) {
-    var hours = Math.floor(timestampSecs / (60 * 60));
-    var minutes = Math.floor((timestampSecs / 60) % 60);
-    var seconds = "".concat(Math.floor(timestampSecs) % 60).padStart(2, '0');
-    if (hours > 0) {
-        var paddedMinutes = minutes.toString().padStart(2, '0');
-        return "".concat(hours, ":").concat(paddedMinutes, ":").concat(seconds);
-    }
-    else {
-        return "".concat(minutes, ":").concat(seconds);
-    }
-};
-
-export { formatTrackTimestamp };
-//# sourceMappingURL=formatTrackTimestamp.js.map

package/dist/utils/formatTrackTimestamp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formatTrackTimestamp.js","sources":["../../src/utils/formatTrackTimestamp.ts"],"sourcesContent":["/**\n * Pretty formats a track timestamp.\n * Ex. input 65 -> output 1:05\n */\nexport const formatTrackTimestamp = (timestampSecs: number) => {\n  const hours = Math.floor(timestampSecs / (60 * 60))\n  const minutes = Math.floor((timestampSecs / 60) % 60)\n  const seconds = `${Math.floor(timestampSecs) % 60}`.padStart(2, '0')\n  if (hours > 0) {\n    const paddedMinutes = minutes.toString().padStart(2, '0')\n    return `${hours}:${paddedMinutes}:${seconds}`\n  } else {\n    return `${minutes}:${seconds}`\n  }\n}\n"],"names":[],"mappings":"AAAA;;;AAGG;AACI,IAAM,oBAAoB,GAAG,UAAC,aAAqB,EAAA;AACxD,IAAA,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAA;AACnD,IAAA,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,EAAE,IAAI,EAAE,CAAC,CAAA;AACrD,IAAA,IAAM,OAAO,GAAG,EAAA,CAAA,MAAA,CAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,CAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;IACpE,IAAI,KAAK,GAAG,CAAC,EAAE;AACb,QAAA,IAAM,aAAa,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;AACzD,QAAA,OAAO,UAAG,KAAK,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,aAAa,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,OAAO,CAAE,CAAA;AAC9C,KAAA;AAAM,SAAA;AACL,QAAA,OAAO,EAAG,CAAA,MAAA,CAAA,OAAO,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,OAAO,CAAE,CAAA;AAC/B,KAAA;AACH;;;;"}

package/dist/utils/getScrollParent.d.ts

@@ -1,8 +0,0 @@
-/**
- * Gets the scroll parent of an HTML element
- * From SO: https://stackoverflow.com/a/42543908/11435157
- * @param node
- * @returns the scroll parent
- */
-export declare const getScrollParent: (node: HTMLElement) => Element | undefined;
-//# sourceMappingURL=getScrollParent.d.ts.map

package/dist/utils/getScrollParent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getScrollParent.d.ts","sourceRoot":"","sources":["../../src/utils/getScrollParent.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,SAAU,WAAW,wBAgChD,CAAA"}

package/dist/utils/getScrollParent.js

@@ -1,39 +0,0 @@
-/**
- * Gets the scroll parent of an HTML element
- * From SO: https://stackoverflow.com/a/42543908/11435157
- * @param node
- * @returns the scroll parent
- */
-var getScrollParent = function (node) {
-    var regex = /(auto|scroll)/;
-    var parents = function (_node, ps) {
-        if (_node.parentNode === null) {
-            return ps;
-        }
-        return parents(_node.parentNode, ps.concat([_node]));
-    };
-    var style = function (_node, prop) {
-        return getComputedStyle(_node, null).getPropertyValue(prop);
-    };
-    var overflow = function (_node) {
-        return style(_node, 'overflow') +
-            style(_node, 'overflow-y') +
-            style(_node, 'overflow-x');
-    };
-    var scroll = function (_node) { return regex.test(overflow(_node)); };
-    var scrollParent = function (_node) {
-        if (!_node.parentNode)
-            return;
-        var ps = parents(_node.parentNode, []);
-        for (var i = 0; i < ps.length; i += 1) {
-            if (scroll(ps[i])) {
-                return ps[i];
-            }
-        }
-        return document.scrollingElement || document.documentElement;
-    };
-    return scrollParent(node);
-};
-
-export { getScrollParent };
-//# sourceMappingURL=getScrollParent.js.map

package/dist/utils/getScrollParent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getScrollParent.js","sources":["../../src/utils/getScrollParent.ts"],"sourcesContent":["/**\n * Gets the scroll parent of an HTML element\n * From SO: https://stackoverflow.com/a/42543908/11435157\n * @param node\n * @returns the scroll parent\n */\nexport const getScrollParent = (node: HTMLElement) => {\n  const regex = /(auto|scroll)/\n  const parents = (_node: HTMLElement, ps: HTMLElement[]): HTMLElement[] => {\n    if (_node.parentNode === null) {\n      return ps\n    }\n    return parents(_node.parentNode as HTMLElement, ps.concat([_node]))\n  }\n\n  const style = (_node: HTMLElement, prop: string) =>\n    getComputedStyle(_node, null).getPropertyValue(prop)\n  const overflow = (_node: HTMLElement) =>\n    style(_node, 'overflow') +\n    style(_node, 'overflow-y') +\n    style(_node, 'overflow-x')\n  const scroll = (_node: HTMLElement) => regex.test(overflow(_node))\n\n  const scrollParent = (_node: HTMLElement) => {\n    if (!_node.parentNode) return\n\n    const ps = parents(_node.parentNode as HTMLElement, [])\n\n    for (let i = 0; i < ps.length; i += 1) {\n      if (scroll(ps[i])) {\n        return ps[i]\n      }\n    }\n\n    return document.scrollingElement || document.documentElement\n  }\n\n  return scrollParent(node)\n}\n"],"names":[],"mappings":"AAAA;;;;;AAKG;AACI,IAAM,eAAe,GAAG,UAAC,IAAiB,EAAA;IAC/C,IAAM,KAAK,GAAG,eAAe,CAAA;AAC7B,IAAA,IAAM,OAAO,GAAG,UAAC,KAAkB,EAAE,EAAiB,EAAA;AACpD,QAAA,IAAI,KAAK,CAAC,UAAU,KAAK,IAAI,EAAE;AAC7B,YAAA,OAAO,EAAE,CAAA;AACV,SAAA;AACD,QAAA,OAAO,OAAO,CAAC,KAAK,CAAC,UAAyB,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;AACrE,KAAC,CAAA;AAED,IAAA,IAAM,KAAK,GAAG,UAAC,KAAkB,EAAE,IAAY,EAAA;QAC7C,OAAA,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAA;AAApD,KAAoD,CAAA;IACtD,IAAM,QAAQ,GAAG,UAAC,KAAkB,EAAA;AAClC,QAAA,OAAA,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC;AACxB,YAAA,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC;AAC1B,YAAA,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC,CAAA;AAF1B,KAE0B,CAAA;AAC5B,IAAA,IAAM,MAAM,GAAG,UAAC,KAAkB,EAAA,EAAK,OAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA,EAAA,CAAA;IAElE,IAAM,YAAY,GAAG,UAAC,KAAkB,EAAA;QACtC,IAAI,CAAC,KAAK,CAAC,UAAU;YAAE,OAAM;QAE7B,IAAM,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,UAAyB,EAAE,EAAE,CAAC,CAAA;AAEvD,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;AACrC,YAAA,IAAI,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;AACjB,gBAAA,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;AACb,aAAA;AACF,SAAA;AAED,QAAA,OAAO,QAAQ,CAAC,gBAAgB,IAAI,QAAQ,CAAC,eAAe,CAAA;AAC9D,KAAC,CAAA;AAED,IAAA,OAAO,YAAY,CAAC,IAAI,CAAC,CAAA;AAC3B;;;;"}

package/dist/utils/index.d.ts

@@ -1,8 +0,0 @@
-export * from './formatTrackTimestamp';
-export * from './getScrollParent';
-export * from './modalState';
-export * from './styles';
-export * from './formatCount';
-export * from './createResponsiveStyles';
-export * from './makeResponsiveStyles';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA"}

package/dist/utils/makeResponsiveStyles.d.ts

@@ -1,48 +0,0 @@
-import { CSSObject, useTheme } from '@emotion/react';
-import { useMedia } from '../contexts/MediaContext';
-type MediaContext = ReturnType<typeof useMedia>;
-type Theme = ReturnType<typeof useTheme>;
-/**
- * StylesOptions provides common objects needed for responsive style creation
- */
-export type StylesOptions = {
-    media: MediaContext;
-    theme: Theme;
-};
-/**
- * Creates a custom hook for responsive styles that automatically injects
- * the media context and theme.
- *
- * Similar to makeStyles but specifically for responsive layout with built-in
- * media query support.
- *
- * @example
- * ```
- * // Define your styles
- * const useMyStyles = makeResponsiveStyles(({ media, theme }) => ({
- *   container: {
- *     base: { color: theme.colors.primary },
- *     mobile: { flexDirection: 'column' },
- *     tablet: { flexDirection: 'row' }
- *   },
- *   title: {
- *     base: { fontSize: theme.typography.xl },
- *     mobile: (currentMedia) => ({
- *       ...(currentMedia.isExtraSmall && { fontSize: theme.typography.l })
- *     })
- *   }
- * }))
- *
- * // Use in your component
- * function MyComponent() {
- *   const styles = useMyStyles()
- *   return <div css={styles.container}>...</div>
- * }
- * ```
- *
- * @param stylesCreator A function that takes media and theme objects and returns style configurations
- * @returns A custom hook that returns the processed styles
- */
-export declare const makeResponsiveStyles: <Styles extends Record<string, CSSObject>>(stylesCreator: (options: StylesOptions) => Record<string, any>) => () => Styles;
-export {};
-//# sourceMappingURL=makeResponsiveStyles.d.ts.map

package/dist/utils/makeResponsiveStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"makeResponsiveStyles.d.ts","sourceRoot":"","sources":["../../src/utils/makeResponsiveStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAInD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAC/C,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAExC;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,YAAY,CAAA;IACnB,KAAK,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,oBAAoB,sEACN,aAAa,KAAK,OAAO,MAAM,EAAE,GAAG,CAAC,iBAW/D,CAAA"}

package/dist/utils/makeResponsiveStyles.js

@@ -1,51 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { useMedia } from '../contexts/MediaContext.js';
-import { createResponsiveStyles } from './createResponsiveStyles.js';
-
-/**
- * Creates a custom hook for responsive styles that automatically injects
- * the media context and theme.
- *
- * Similar to makeStyles but specifically for responsive layout with built-in
- * media query support.
- *
- * @example
- * ```
- * // Define your styles
- * const useMyStyles = makeResponsiveStyles(({ media, theme }) => ({
- *   container: {
- *     base: { color: theme.colors.primary },
- *     mobile: { flexDirection: 'column' },
- *     tablet: { flexDirection: 'row' }
- *   },
- *   title: {
- *     base: { fontSize: theme.typography.xl },
- *     mobile: (currentMedia) => ({
- *       ...(currentMedia.isExtraSmall && { fontSize: theme.typography.l })
- *     })
- *   }
- * }))
- *
- * // Use in your component
- * function MyComponent() {
- *   const styles = useMyStyles()
- *   return <div css={styles.container}>...</div>
- * }
- * ```
- *
- * @param stylesCreator A function that takes media and theme objects and returns style configurations
- * @returns A custom hook that returns the processed styles
- */
-var makeResponsiveStyles = function (stylesCreator) {
-    // Return a hook that can be used in components
-    return function useStyles() {
-        var media = useMedia();
-        var theme = useTheme();
-        // Process the style configurations through createResponsiveStyles
-        var styleConfigs = stylesCreator({ media: media, theme: theme });
-        return createResponsiveStyles(media, styleConfigs);
-    };
-};
-
-export { makeResponsiveStyles };
-//# sourceMappingURL=makeResponsiveStyles.js.map

package/dist/utils/makeResponsiveStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"makeResponsiveStyles.js","sources":["../../src/utils/makeResponsiveStyles.ts"],"sourcesContent":["import { CSSObject, useTheme } from '@emotion/react'\n\nimport { useMedia } from '../contexts/MediaContext'\n\nimport { createResponsiveStyles } from './createResponsiveStyles'\n\ntype MediaContext = ReturnType<typeof useMedia>\ntype Theme = ReturnType<typeof useTheme>\n\n/**\n * StylesOptions provides common objects needed for responsive style creation\n */\nexport type StylesOptions = {\n  media: MediaContext\n  theme: Theme\n}\n\n/**\n * Creates a custom hook for responsive styles that automatically injects\n * the media context and theme.\n *\n * Similar to makeStyles but specifically for responsive layout with built-in\n * media query support.\n *\n * @example\n * ```\n * // Define your styles\n * const useMyStyles = makeResponsiveStyles(({ media, theme }) => ({\n *   container: {\n *     base: { color: theme.colors.primary },\n *     mobile: { flexDirection: 'column' },\n *     tablet: { flexDirection: 'row' }\n *   },\n *   title: {\n *     base: { fontSize: theme.typography.xl },\n *     mobile: (currentMedia) => ({\n *       ...(currentMedia.isExtraSmall && { fontSize: theme.typography.l })\n *     })\n *   }\n * }))\n *\n * // Use in your component\n * function MyComponent() {\n *   const styles = useMyStyles()\n *   return <div css={styles.container}>...</div>\n * }\n * ```\n *\n * @param stylesCreator A function that takes media and theme objects and returns style configurations\n * @returns A custom hook that returns the processed styles\n */\nexport const makeResponsiveStyles = <Styles extends Record<string, CSSObject>>(\n  stylesCreator: (options: StylesOptions) => Record<string, any>\n) => {\n  // Return a hook that can be used in components\n  return function useStyles(): Styles {\n    const media = useMedia()\n    const theme = useTheme()\n\n    // Process the style configurations through createResponsiveStyles\n    const styleConfigs = stylesCreator({ media, theme })\n    return createResponsiveStyles(media, styleConfigs) as Styles\n  }\n}\n"],"names":[],"mappings":";;;;AAiBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCG;AACI,IAAM,oBAAoB,GAAG,UAClC,aAA8D,EAAA;;AAG9D,IAAA,OAAO,SAAS,SAAS,GAAA;AACvB,QAAA,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;AACxB,QAAA,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;;AAGxB,QAAA,IAAM,YAAY,GAAG,aAAa,CAAC,EAAE,KAAK,EAAA,KAAA,EAAE,KAAK,EAAA,KAAA,EAAE,CAAC,CAAA;AACpD,QAAA,OAAO,sBAAsB,CAAC,KAAK,EAAE,YAAY,CAAW,CAAA;AAC9D,KAAC,CAAA;AACH;;;;"}

package/dist/utils/modalState.d.ts

@@ -1,2 +0,0 @@
-export type ModalState = 'opening' | 'open' | 'closing' | 'closed';
-//# sourceMappingURL=modalState.d.ts.map

package/dist/utils/modalState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"modalState.d.ts","sourceRoot":"","sources":["../../src/utils/modalState.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAA"}

package/dist/utils/styles.d.ts

@@ -1,7 +0,0 @@
-/** Converts a camelCased variable name such as `primaryDark1` to an
- * equivalent CSS variable name (`--primary-dark-1`). Useful for passing
- * values like color names to a component to be converted to a CSS
- * property set via `style`
- */
-export declare const toCSSVariableName: (name: string) => string;
-//# sourceMappingURL=styles.d.ts.map

package/dist/utils/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,SAAU,MAAM,WAE7C,CAAA"}

package/dist/utils/styles.js

@@ -1,13 +0,0 @@
-import { kebabCase } from 'lodash';
-
-/** Converts a camelCased variable name such as `primaryDark1` to an
- * equivalent CSS variable name (`--primary-dark-1`). Useful for passing
- * values like color names to a component to be converted to a CSS
- * property set via `style`
- */
-var toCSSVariableName = function (name) {
-    return "--harmony-".concat(kebabCase(name));
-};
-
-export { toCSSVariableName };
-//# sourceMappingURL=styles.js.map

package/dist/utils/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":["../../src/utils/styles.ts"],"sourcesContent":["import { kebabCase } from 'lodash'\n\n/** Converts a camelCased variable name such as `primaryDark1` to an\n * equivalent CSS variable name (`--primary-dark-1`). Useful for passing\n * values like color names to a component to be converted to a CSS\n * property set via `style`\n */\nexport const toCSSVariableName = (name: string) => {\n  return `--harmony-${kebabCase(name)}`\n}\n"],"names":[],"mappings":";;AAEA;;;;AAIG;AACI,IAAM,iBAAiB,GAAG,UAAC,IAAY,EAAA;AAC5C,IAAA,OAAO,oBAAa,SAAS,CAAC,IAAI,CAAC,CAAE,CAAA;AACvC;;;;"}