@protonradio/proton-ui 0.11.15 → 0.11.16

package/dist/components/Text/TextEmphasis/TextEmphasis.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextEmphasis.es.js","sources":["../../../../src/components/Text/TextEmphasis/TextEmphasis.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode } from \"react\";\r\nimport \"./TextEmphasis.css\";\r\n\r\nimport { csx } from \"../../../utils\";\r\nimport { useTheme } from \"../../ThemeProvider\";\r\nimport { Tooltip, TooltipProps } from \"../../Tooltip/Tooltip\";\r\nimport {\r\n  handleInternalNavigation,\r\n  isUrlExternal,\r\n} from \"../../../utils/navigation\";\r\n\r\ninterface TextEmphasisProps {\r\n  /**\r\n   * The URL that the text emphasis should link to. Turns the element into an `a` tag.\r\n   */\r\n  to?: string;\r\n  /**\r\n   * The content to display within the text emphasis.\r\n   */\r\n  children: ReactNode;\r\n  /**\r\n   * Props to pass to the tooltip trigger. When provided, the text emphasis will be wrapped in a tooltip trigger.\r\n   * @see {@link TooltipProps}\r\n   */\r\n  tooltipProps?: Omit<TooltipProps, \"children\">;\r\n  /**\r\n   * A test ID.\r\n   */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\n/**\r\n * A component that displays text with emphasis. Provide tooltipProps to wrap the text in a tooltip trigger.\r\n *\r\n * API:\r\n *  - {@link TextEmphasisProps}\r\n */\r\nexport const TextEmphasis = ({\r\n  to,\r\n  children,\r\n  tooltipProps,\r\n  \"data-testid\": testId,\r\n}: TextEmphasisProps) => {\r\n  const { className: themeClassName } = useTheme();\r\n\r\n  const content = tooltipProps ? (\r\n    <Tooltip delay={50} {...tooltipProps}>\r\n      {children}\r\n    </Tooltip>\r\n  ) : (\r\n    children\r\n  );\r\n\r\n  if (to) {\r\n    const isExternal = isUrlExternal(to);\r\n    return (\r\n      <span\r\n        className={csx(\r\n          \"proton-TextEmphasis\",\r\n          tooltipProps && \"proton-TextEmphasis--tooltip\",\r\n          themeClassName\r\n        )}\r\n      >\r\n        <a\r\n          data-testid={testId}\r\n          href={to}\r\n          target={isExternal ? \"_blank\" : undefined}\r\n          rel={isExternal ? \"noopener noreferrer\" : undefined}\r\n          onClick={\r\n            !isExternal ? (e) => handleInternalNavigation(e, to) : undefined\r\n          }\r\n        >\r\n          {content}\r\n        </a>\r\n      </span>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <span\r\n      className={csx(\r\n        \"proton-TextEmphasis\",\r\n        tooltipProps && \"proton-TextEmphasis--tooltip\",\r\n        themeClassName\r\n      )}\r\n      data-testid={testId}\r\n    >\r\n      {content}\r\n    </span>\r\n  );\r\n};\r\n"],"names":["TextEmphasis","to","children","tooltipProps","testId","themeClassName","useTheme","content","jsx","Tooltip","isExternal","isUrlExternal","csx","e","handleInternalNavigation"],"mappings":";;;;;;AAuCO,MAAMA,IAAe,CAAC;AAAA,EAC3B,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAeC;AACjB,MAAyB;AACvB,QAAM,EAAE,WAAWC,EAAe,IAAIC,EAAS,GAEzCC,IAAUJ,IACbK,gBAAAA,EAAA,IAAAC,GAAA,EAAQ,OAAO,IAAK,GAAGN,GACrB,UAAAD,EACH,CAAA,IAEAA;AAGF,MAAID,GAAI;AACA,UAAAS,IAAaC,EAAcV,CAAE;AAEjC,WAAAO,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWI;AAAA,UACT;AAAA,UACAT,KAAgB;AAAA,UAChBE;AAAA,QACF;AAAA,QAEA,UAAAG,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAaJ;AAAA,YACb,MAAMH;AAAA,YACN,QAAQS,IAAa,WAAW;AAAA,YAChC,KAAKA,IAAa,wBAAwB;AAAA,YAC1C,SACGA,IAAsD,SAAzC,CAACG,MAAMC,EAAyBD,GAAGZ,CAAE;AAAA,YAGpD,UAAAM;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAGE,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWI;AAAA,QACT;AAAA,QACAT,KAAgB;AAAA,QAChBE;AAAA,MACF;AAAA,MACA,eAAaD;AAAA,MAEZ,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"TextEmphasis.es.js","sources":["../../../../src/components/Text/TextEmphasis/TextEmphasis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport \"./TextEmphasis.css\";\n\nimport { csx } from \"../../../utils\";\nimport { useTheme } from \"../../ThemeProvider\";\nimport { Tooltip, TooltipProps } from \"../../Tooltip/Tooltip\";\nimport {\n  handleInternalNavigation,\n  isUrlExternal,\n} from \"../../../utils/navigation\";\n\ninterface TextEmphasisProps {\n  /**\n   * The URL that the text emphasis should link to. Turns the element into an `a` tag.\n   */\n  to?: string;\n  /**\n   * The content to display within the text emphasis.\n   */\n  children: ReactNode;\n  /**\n   * Props to pass to the tooltip trigger. When provided, the text emphasis will be wrapped in a tooltip trigger.\n   * @see {@link TooltipProps}\n   */\n  tooltipProps?: Omit<TooltipProps, \"children\">;\n  /**\n   * A test ID.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A component that displays text with emphasis. Provide tooltipProps to wrap the text in a tooltip trigger.\n *\n * API:\n *  - {@link TextEmphasisProps}\n */\nexport const TextEmphasis = ({\n  to,\n  children,\n  tooltipProps,\n  \"data-testid\": testId,\n}: TextEmphasisProps) => {\n  const { className: themeClassName } = useTheme();\n\n  const content = tooltipProps ? (\n    <Tooltip delay={50} {...tooltipProps}>\n      {children}\n    </Tooltip>\n  ) : (\n    children\n  );\n\n  if (to) {\n    const isExternal = isUrlExternal(to);\n    return (\n      <span\n        className={csx(\n          \"proton-TextEmphasis\",\n          tooltipProps && \"proton-TextEmphasis--tooltip\",\n          themeClassName\n        )}\n      >\n        <a\n          data-testid={testId}\n          href={to}\n          target={isExternal ? \"_blank\" : undefined}\n          rel={isExternal ? \"noopener noreferrer\" : undefined}\n          onClick={\n            !isExternal ? (e) => handleInternalNavigation(e, to) : undefined\n          }\n        >\n          {content}\n        </a>\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={csx(\n        \"proton-TextEmphasis\",\n        tooltipProps && \"proton-TextEmphasis--tooltip\",\n        themeClassName\n      )}\n      data-testid={testId}\n    >\n      {content}\n    </span>\n  );\n};\n"],"names":["TextEmphasis","to","children","tooltipProps","testId","themeClassName","useTheme","content","jsx","Tooltip","isExternal","isUrlExternal","csx","e","handleInternalNavigation"],"mappings":";;;;;;AAuCO,MAAMA,IAAe,CAAC;AAAA,EAC3B,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAeC;AACjB,MAAyB;AACvB,QAAM,EAAE,WAAWC,EAAA,IAAmBC,EAAA,GAEhCC,IAAUJ,IACdK,gBAAAA,EAAAA,IAACC,GAAA,EAAQ,OAAO,IAAK,GAAGN,GACrB,UAAAD,EAAA,CACH,IAEAA;AAGF,MAAID,GAAI;AACN,UAAMS,IAAaC,EAAcV,CAAE;AACnC,WACEO,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWI;AAAA,UACT;AAAA,UACAT,KAAgB;AAAA,UAChBE;AAAA,QAAA;AAAA,QAGF,UAAAG,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAaJ;AAAA,YACb,MAAMH;AAAA,YACN,QAAQS,IAAa,WAAW;AAAA,YAChC,KAAKA,IAAa,wBAAwB;AAAA,YAC1C,SACGA,IAAsD,SAAzC,CAACG,MAAMC,EAAyBD,GAAGZ,CAAE;AAAA,YAGpD,UAAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AAEA,SACEC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWI;AAAA,QACT;AAAA,QACAT,KAAgB;AAAA,QAChBE;AAAA,MAAA;AAAA,MAEF,eAAaD;AAAA,MAEZ,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/ThemeProvider.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.cjs.js","sources":["../../src/components/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, {\r\n  createContext,\r\n  ReactNode,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n} from \"react\";\r\n\r\nimport { THEME_CLASSES } from \"../design\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\r\nimport { ProtonPalette, ProtonStyleSheet, ProtonTheme } from \"../design/types\";\r\nimport { generateStylesheet } from \"../design/generateStylesheet\";\r\n\r\ninterface ThemeContextType {\r\n  theme: ProtonTheme;\r\n  className: string;\r\n  style: ProtonStyleSheet;\r\n  palette: ProtonPalette;\r\n  hasPalette?: boolean;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport const useTheme = () => {\r\n  const context = useContext(ThemeContext);\r\n  if (context === undefined) {\r\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\r\n  }\r\n  return context;\r\n};\r\n\r\ninterface ThemeProviderProps {\r\n  theme: ProtonTheme;\r\n  children: ReactNode;\r\n  palette?: ProtonPalette;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n  theme,\r\n  children,\r\n  palette = LIGHT_PALETTE,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const themeClass = THEME_CLASSES[theme];\r\n  const themeVariables = useMemo(\r\n    () => generateStylesheet(palette, theme),\r\n    [palette, theme]\r\n  );\r\n\r\n  useEffect(() => {\r\n    // Apply the theme class and css variables to the container div so that it is only scoped\r\n    // to the ThemeProvider children.\r\n    if (containerRef.current) {\r\n      containerRef.current.className = themeClass;\r\n\r\n      Object.entries(themeVariables).forEach(([key, value]) => {\r\n        containerRef.current!.style.setProperty(key, value as string);\r\n      });\r\n    }\r\n  }, [theme, themeClass, palette, themeVariables]);\r\n\r\n  return (\r\n    <ThemeContext.Provider\r\n      value={{\r\n        theme,\r\n        style: themeVariables,\r\n        palette,\r\n        className: themeClass,\r\n        hasPalette: Boolean(palette),\r\n      }}\r\n    >\r\n      <div ref={containerRef}>{children}</div>\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","ThemeProvider","theme","children","palette","LIGHT_PALETTE","containerRef","useRef","themeClass","THEME_CLASSES","themeVariables","useMemo","generateStylesheet","useEffect","key","value","jsx"],"mappings":"oSAwBMA,EAAeC,EAAAA,cAA4C,MAAS,EAE7DC,EAAW,IAAM,CACtB,MAAAC,EAAUC,aAAWJ,CAAY,EACvC,GAAIG,IAAY,OACR,MAAA,IAAI,MAAM,8CAA8C,EAEzD,OAAAA,CACT,EAQaE,EAA8C,CAAC,CAAA,MAC1DC,EACA,SAAAC,EACA,QAAAC,EAAUC,EAAA,aACZ,IAAM,CACE,MAAAC,EAAeC,SAAuB,IAAI,EAC1CC,EAAaC,gBAAcP,CAAK,EAChCQ,EAAiBC,EAAA,QACrB,IAAMC,EAAmB,mBAAAR,EAASF,CAAK,EACvC,CAACE,EAASF,CAAK,CAAA,EAGjBW,OAAAA,EAAAA,UAAU,IAAM,CAGVP,EAAa,UACfA,EAAa,QAAQ,UAAYE,EAE1B,OAAA,QAAQE,CAAc,EAAE,QAAQ,CAAC,CAACI,EAAKC,CAAK,IAAM,CACvDT,EAAa,QAAS,MAAM,YAAYQ,EAAKC,CAAe,CAAA,CAC7D,IAEF,CAACb,EAAOM,EAAYJ,EAASM,CAAc,CAAC,EAG7CM,EAAA,kBAAA,IAACpB,EAAa,SAAb,CACC,MAAO,CAAA,MACLM,EACA,MAAOQ,EACP,QAAAN,EACA,UAAWI,EACX,WAAY,EAAQJ,CACtB,EAEA,SAACY,EAAA,kBAAA,IAAA,MAAA,CAAI,IAAKV,EAAe,SAAAH,EAAS,CAAA,CAAA,CAGxC"}
+{"version":3,"file":"ThemeProvider.cjs.js","sources":["../../src/components/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  createContext,\n  ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { THEME_CLASSES } from \"../design\";\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\nimport { ProtonPalette, ProtonStyleSheet, ProtonTheme } from \"../design/types\";\nimport { generateStylesheet } from \"../design/generateStylesheet\";\n\ninterface ThemeContextType {\n  theme: ProtonTheme;\n  className: string;\n  style: ProtonStyleSheet;\n  palette: ProtonPalette;\n  hasPalette?: boolean;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\nexport const useTheme = () => {\n  const context = useContext(ThemeContext);\n  if (context === undefined) {\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n  }\n  return context;\n};\n\ninterface ThemeProviderProps {\n  theme: ProtonTheme;\n  children: ReactNode;\n  palette?: ProtonPalette;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  theme,\n  children,\n  palette = LIGHT_PALETTE,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const themeClass = THEME_CLASSES[theme];\n  const themeVariables = useMemo(\n    () => generateStylesheet(palette, theme),\n    [palette, theme]\n  );\n\n  useEffect(() => {\n    // Apply the theme class and css variables to the container div so that it is only scoped\n    // to the ThemeProvider children.\n    if (containerRef.current) {\n      containerRef.current.className = themeClass;\n\n      Object.entries(themeVariables).forEach(([key, value]) => {\n        containerRef.current!.style.setProperty(key, value as string);\n      });\n    }\n  }, [theme, themeClass, palette, themeVariables]);\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        theme,\n        style: themeVariables,\n        palette,\n        className: themeClass,\n        hasPalette: Boolean(palette),\n      }}\n    >\n      <div ref={containerRef}>{children}</div>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","ThemeProvider","theme","children","palette","LIGHT_PALETTE","containerRef","useRef","themeClass","THEME_CLASSES","themeVariables","useMemo","generateStylesheet","useEffect","key","value","jsx"],"mappings":"oSAwBMA,EAAeC,EAAAA,cAA4C,MAAS,EAE7DC,EAAW,IAAM,CAC5B,MAAMC,EAAUC,EAAAA,WAAWJ,CAAY,EACvC,GAAIG,IAAY,OACd,MAAM,IAAI,MAAM,8CAA8C,EAEhE,OAAOA,CACT,EAQaE,EAA8C,CAAC,CAAA,MAC1DC,EACA,SAAAC,EACA,QAAAC,EAAUC,EAAAA,aACZ,IAAM,CACJ,MAAMC,EAAeC,EAAAA,OAAuB,IAAI,EAC1CC,EAAaC,EAAAA,cAAcP,CAAK,EAChCQ,EAAiBC,EAAAA,QACrB,IAAMC,EAAAA,mBAAmBR,EAASF,CAAK,EACvC,CAACE,EAASF,CAAK,CAAA,EAGjBW,OAAAA,EAAAA,UAAU,IAAM,CAGVP,EAAa,UACfA,EAAa,QAAQ,UAAYE,EAEjC,OAAO,QAAQE,CAAc,EAAE,QAAQ,CAAC,CAACI,EAAKC,CAAK,IAAM,CACvDT,EAAa,QAAS,MAAM,YAAYQ,EAAKC,CAAe,CAC9D,CAAC,EAEL,EAAG,CAACb,EAAOM,EAAYJ,EAASM,CAAc,CAAC,EAG7CM,EAAAA,kBAAAA,IAACpB,EAAa,SAAb,CACC,MAAO,CAAA,MACLM,EACA,MAAOQ,EACP,QAAAN,EACA,UAAWI,EACX,WAAY,EAAQJ,CAAO,EAG7B,SAAAY,EAAAA,kBAAAA,IAAC,MAAA,CAAI,IAAKV,EAAe,SAAAH,CAAA,CAAS,CAAA,CAAA,CAGxC"}

package/dist/components/ThemeProvider.es.js

@@ -1,10 +1,10 @@
 import { j as n } from "../node_modules/react/jsx-runtime.es.js";
-import { createContext as a, useContext as f, useRef as h, useMemo as l, useEffect as x } from "react";
+import { createContext as a, useRef as f, useMemo as h, useEffect as l, useContext as x } from "react";
 import { LIGHT_PALETTE as E } from "../design/lightTheme/colors.es.js";
 import { generateStylesheet as T } from "../design/generateStylesheet.es.js";
 import { THEME_CLASSES as d } from "../design/theme.es.js";
 const i = a(void 0), y = () => {
-  const e = f(i);
+  const e = x(i);
   if (e === void 0)
     throw new Error("useTheme must be used within a ThemeProvider");
   return e;
@@ -13,11 +13,11 @@ const i = a(void 0), y = () => {
   children: c,
   palette: r = E
 }) => {
-  const o = h(null), t = d[e], s = l(
+  const o = f(null), t = d[e], s = h(
     () => T(r, e),
     [r, e]
   );
-  return x(() => {
+  return l(() => {
     o.current && (o.current.className = t, Object.entries(s).forEach(([m, u]) => {
       o.current.style.setProperty(m, u);
     }));

package/dist/components/ThemeProvider.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.es.js","sources":["../../src/components/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, {\r\n  createContext,\r\n  ReactNode,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n} from \"react\";\r\n\r\nimport { THEME_CLASSES } from \"../design\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\r\nimport { ProtonPalette, ProtonStyleSheet, ProtonTheme } from \"../design/types\";\r\nimport { generateStylesheet } from \"../design/generateStylesheet\";\r\n\r\ninterface ThemeContextType {\r\n  theme: ProtonTheme;\r\n  className: string;\r\n  style: ProtonStyleSheet;\r\n  palette: ProtonPalette;\r\n  hasPalette?: boolean;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport const useTheme = () => {\r\n  const context = useContext(ThemeContext);\r\n  if (context === undefined) {\r\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\r\n  }\r\n  return context;\r\n};\r\n\r\ninterface ThemeProviderProps {\r\n  theme: ProtonTheme;\r\n  children: ReactNode;\r\n  palette?: ProtonPalette;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n  theme,\r\n  children,\r\n  palette = LIGHT_PALETTE,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const themeClass = THEME_CLASSES[theme];\r\n  const themeVariables = useMemo(\r\n    () => generateStylesheet(palette, theme),\r\n    [palette, theme]\r\n  );\r\n\r\n  useEffect(() => {\r\n    // Apply the theme class and css variables to the container div so that it is only scoped\r\n    // to the ThemeProvider children.\r\n    if (containerRef.current) {\r\n      containerRef.current.className = themeClass;\r\n\r\n      Object.entries(themeVariables).forEach(([key, value]) => {\r\n        containerRef.current!.style.setProperty(key, value as string);\r\n      });\r\n    }\r\n  }, [theme, themeClass, palette, themeVariables]);\r\n\r\n  return (\r\n    <ThemeContext.Provider\r\n      value={{\r\n        theme,\r\n        style: themeVariables,\r\n        palette,\r\n        className: themeClass,\r\n        hasPalette: Boolean(palette),\r\n      }}\r\n    >\r\n      <div ref={containerRef}>{children}</div>\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","ThemeProvider","theme","children","palette","LIGHT_PALETTE","containerRef","useRef","themeClass","THEME_CLASSES","themeVariables","useMemo","generateStylesheet","useEffect","key","value","jsx"],"mappings":";;;;;AAwBA,MAAMA,IAAeC,EAA4C,MAAS,GAE7DC,IAAW,MAAM;AACtB,QAAAC,IAAUC,EAAWJ,CAAY;AACvC,MAAIG,MAAY;AACR,UAAA,IAAI,MAAM,8CAA8C;AAEzD,SAAAA;AACT,GAQaE,IAA8C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAUC;AACZ,MAAM;AACE,QAAAC,IAAeC,EAAuB,IAAI,GAC1CC,IAAaC,EAAcP,CAAK,GAChCQ,IAAiBC;AAAA,IACrB,MAAMC,EAAmBR,GAASF,CAAK;AAAA,IACvC,CAACE,GAASF,CAAK;AAAA,EAAA;AAGjB,SAAAW,EAAU,MAAM;AAGd,IAAIP,EAAa,YACfA,EAAa,QAAQ,YAAYE,GAE1B,OAAA,QAAQE,CAAc,EAAE,QAAQ,CAAC,CAACI,GAAKC,CAAK,MAAM;AACvD,MAAAT,EAAa,QAAS,MAAM,YAAYQ,GAAKC,CAAe;AAAA,IAAA,CAC7D;AAAA,KAEF,CAACb,GAAOM,GAAYJ,GAASM,CAAc,CAAC,GAG7CM,gBAAAA,EAAA;AAAA,IAACpB,EAAa;AAAA,IAAb;AAAA,MACC,OAAO;AAAA,QACL,OAAAM;AAAA,QACA,OAAOQ;AAAA,QACP,SAAAN;AAAA,QACA,WAAWI;AAAA,QACX,YAAY,EAAQJ;AAAA,MACtB;AAAA,MAEA,UAACY,gBAAAA,EAAA,IAAA,OAAA,EAAI,KAAKV,GAAe,UAAAH,GAAS;AAAA,IAAA;AAAA,EAAA;AAGxC;"}
+{"version":3,"file":"ThemeProvider.es.js","sources":["../../src/components/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  createContext,\n  ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { THEME_CLASSES } from \"../design\";\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\nimport { ProtonPalette, ProtonStyleSheet, ProtonTheme } from \"../design/types\";\nimport { generateStylesheet } from \"../design/generateStylesheet\";\n\ninterface ThemeContextType {\n  theme: ProtonTheme;\n  className: string;\n  style: ProtonStyleSheet;\n  palette: ProtonPalette;\n  hasPalette?: boolean;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\nexport const useTheme = () => {\n  const context = useContext(ThemeContext);\n  if (context === undefined) {\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n  }\n  return context;\n};\n\ninterface ThemeProviderProps {\n  theme: ProtonTheme;\n  children: ReactNode;\n  palette?: ProtonPalette;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  theme,\n  children,\n  palette = LIGHT_PALETTE,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const themeClass = THEME_CLASSES[theme];\n  const themeVariables = useMemo(\n    () => generateStylesheet(palette, theme),\n    [palette, theme]\n  );\n\n  useEffect(() => {\n    // Apply the theme class and css variables to the container div so that it is only scoped\n    // to the ThemeProvider children.\n    if (containerRef.current) {\n      containerRef.current.className = themeClass;\n\n      Object.entries(themeVariables).forEach(([key, value]) => {\n        containerRef.current!.style.setProperty(key, value as string);\n      });\n    }\n  }, [theme, themeClass, palette, themeVariables]);\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        theme,\n        style: themeVariables,\n        palette,\n        className: themeClass,\n        hasPalette: Boolean(palette),\n      }}\n    >\n      <div ref={containerRef}>{children}</div>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","ThemeProvider","theme","children","palette","LIGHT_PALETTE","containerRef","useRef","themeClass","THEME_CLASSES","themeVariables","useMemo","generateStylesheet","useEffect","key","value","jsx"],"mappings":";;;;;AAwBA,MAAMA,IAAeC,EAA4C,MAAS,GAE7DC,IAAW,MAAM;AAC5B,QAAMC,IAAUC,EAAWJ,CAAY;AACvC,MAAIG,MAAY;AACd,UAAM,IAAI,MAAM,8CAA8C;AAEhE,SAAOA;AACT,GAQaE,IAA8C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAUC;AACZ,MAAM;AACJ,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAaC,EAAcP,CAAK,GAChCQ,IAAiBC;AAAA,IACrB,MAAMC,EAAmBR,GAASF,CAAK;AAAA,IACvC,CAACE,GAASF,CAAK;AAAA,EAAA;AAGjB,SAAAW,EAAU,MAAM;AAGd,IAAIP,EAAa,YACfA,EAAa,QAAQ,YAAYE,GAEjC,OAAO,QAAQE,CAAc,EAAE,QAAQ,CAAC,CAACI,GAAKC,CAAK,MAAM;AACvD,MAAAT,EAAa,QAAS,MAAM,YAAYQ,GAAKC,CAAe;AAAA,IAC9D,CAAC;AAAA,EAEL,GAAG,CAACb,GAAOM,GAAYJ,GAASM,CAAc,CAAC,GAG7CM,gBAAAA,EAAAA;AAAAA,IAACpB,EAAa;AAAA,IAAb;AAAA,MACC,OAAO;AAAA,QACL,OAAAM;AAAA,QACA,OAAOQ;AAAA,QACP,SAAAN;AAAA,QACA,WAAWI;AAAA,QACX,YAAY,EAAQJ;AAAA,MAAO;AAAA,MAG7B,UAAAY,gBAAAA,EAAAA,IAAC,OAAA,EAAI,KAAKV,GAAe,UAAAH,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGxC;"}

package/dist/components/Tombstone/Tombstone.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tombstone.cjs.js","sources":["../../../src/components/Tombstone/Tombstone.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport \"./Tombstone.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx, transparentize } from \"../../utils\";\r\n\r\nexport interface TombstoneProps {\r\n  /**\r\n   * The border radius of the tombstone.\r\n   * @default \"4px\"\r\n   */\r\n  borderRadius?: string;\r\n  /**\r\n   * The height of the tombstone.\r\n   * @default \"1.5rem\"\r\n   */\r\n  height?: string;\r\n  /**\r\n   * The width of the tombstone.\r\n   * @default \"100%\"\r\n   */\r\n  width?: string;\r\n}\r\n\r\n/**\r\n * A component that displays a loading tombstone. For use as a placeholder while loading content.\r\n *\r\n * API:\r\n *  - {@link TombstoneProps}\r\n */\r\nexport const Tombstone = ({\r\n  width = \"100%\",\r\n  height = \"1.5rem\",\r\n  borderRadius = \"4px\",\r\n}: TombstoneProps) => {\r\n  const { hasPalette, palette } = useTheme();\r\n\r\n  const style = {\r\n    \"--tombstone-custom-background\": palette.PRIMARY.MEDIUM,\r\n    \"--tombstone-custom-primary\": transparentize(palette.PRIMARY.DARK, 0.9),\r\n    \"--tombstone-custom-secondary\": transparentize(palette.SECONDARY.DARK, 0.7),\r\n  } as React.CSSProperties;\r\n\r\n  return (\r\n    <div\r\n      className={csx(\r\n        \"proton-Tombstone\",\r\n        hasPalette && \"proton-Tombstone--custom\"\r\n      )}\r\n      style={{\r\n        ...style,\r\n        width,\r\n        height,\r\n        borderRadius,\r\n      }}\r\n    />\r\n  );\r\n};\r\n"],"names":["Tombstone","width","height","borderRadius","hasPalette","palette","useTheme","style","transparentize","jsx","csx"],"mappings":"2SA8BaA,EAAY,CAAC,CACxB,MAAAC,EAAQ,OACR,OAAAC,EAAS,SACT,aAAAC,EAAe,KACjB,IAAsB,CACpB,KAAM,CAAE,WAAAC,EAAY,QAAAC,CAAQ,EAAIC,EAAS,SAAA,EAEnCC,EAAQ,CACZ,gCAAiCF,EAAQ,QAAQ,OACjD,6BAA8BG,EAAAA,eAAeH,EAAQ,QAAQ,KAAM,EAAG,EACtE,+BAAgCG,EAAAA,eAAeH,EAAQ,UAAU,KAAM,EAAG,CAAA,EAI1E,OAAAI,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWC,EAAA,IACT,mBACAN,GAAc,0BAChB,EACA,MAAO,CACL,GAAGG,EACH,MAAAN,EACA,OAAAC,EACA,aAAAC,CACF,CAAA,CAAA,CAGN"}
+{"version":3,"file":"Tombstone.cjs.js","sources":["../../../src/components/Tombstone/Tombstone.tsx"],"sourcesContent":["\"use client\";\n\nimport \"./Tombstone.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx, transparentize } from \"../../utils\";\n\nexport interface TombstoneProps {\n  /**\n   * The border radius of the tombstone.\n   * @default \"4px\"\n   */\n  borderRadius?: string;\n  /**\n   * The height of the tombstone.\n   * @default \"1.5rem\"\n   */\n  height?: string;\n  /**\n   * The width of the tombstone.\n   * @default \"100%\"\n   */\n  width?: string;\n}\n\n/**\n * A component that displays a loading tombstone. For use as a placeholder while loading content.\n *\n * API:\n *  - {@link TombstoneProps}\n */\nexport const Tombstone = ({\n  width = \"100%\",\n  height = \"1.5rem\",\n  borderRadius = \"4px\",\n}: TombstoneProps) => {\n  const { hasPalette, palette } = useTheme();\n\n  const style = {\n    \"--tombstone-custom-background\": palette.PRIMARY.MEDIUM,\n    \"--tombstone-custom-primary\": transparentize(palette.PRIMARY.DARK, 0.9),\n    \"--tombstone-custom-secondary\": transparentize(palette.SECONDARY.DARK, 0.7),\n  } as React.CSSProperties;\n\n  return (\n    <div\n      className={csx(\n        \"proton-Tombstone\",\n        hasPalette && \"proton-Tombstone--custom\"\n      )}\n      style={{\n        ...style,\n        width,\n        height,\n        borderRadius,\n      }}\n    />\n  );\n};\n"],"names":["Tombstone","width","height","borderRadius","hasPalette","palette","useTheme","style","transparentize","jsx","csx"],"mappings":"2SA8BaA,EAAY,CAAC,CACxB,MAAAC,EAAQ,OACR,OAAAC,EAAS,SACT,aAAAC,EAAe,KACjB,IAAsB,CACpB,KAAM,CAAE,WAAAC,EAAY,QAAAC,CAAA,EAAYC,WAAA,EAE1BC,EAAQ,CACZ,gCAAiCF,EAAQ,QAAQ,OACjD,6BAA8BG,EAAAA,eAAeH,EAAQ,QAAQ,KAAM,EAAG,EACtE,+BAAgCG,EAAAA,eAAeH,EAAQ,UAAU,KAAM,EAAG,CAAA,EAG5E,OACEI,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,IACT,mBACAN,GAAc,0BAAA,EAEhB,MAAO,CACL,GAAGG,EACH,MAAAN,EACA,OAAAC,EACA,aAAAC,CAAA,CACF,CAAA,CAGN"}

package/dist/components/Tombstone/Tombstone.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tombstone.es.js","sources":["../../../src/components/Tombstone/Tombstone.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport \"./Tombstone.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx, transparentize } from \"../../utils\";\r\n\r\nexport interface TombstoneProps {\r\n  /**\r\n   * The border radius of the tombstone.\r\n   * @default \"4px\"\r\n   */\r\n  borderRadius?: string;\r\n  /**\r\n   * The height of the tombstone.\r\n   * @default \"1.5rem\"\r\n   */\r\n  height?: string;\r\n  /**\r\n   * The width of the tombstone.\r\n   * @default \"100%\"\r\n   */\r\n  width?: string;\r\n}\r\n\r\n/**\r\n * A component that displays a loading tombstone. For use as a placeholder while loading content.\r\n *\r\n * API:\r\n *  - {@link TombstoneProps}\r\n */\r\nexport const Tombstone = ({\r\n  width = \"100%\",\r\n  height = \"1.5rem\",\r\n  borderRadius = \"4px\",\r\n}: TombstoneProps) => {\r\n  const { hasPalette, palette } = useTheme();\r\n\r\n  const style = {\r\n    \"--tombstone-custom-background\": palette.PRIMARY.MEDIUM,\r\n    \"--tombstone-custom-primary\": transparentize(palette.PRIMARY.DARK, 0.9),\r\n    \"--tombstone-custom-secondary\": transparentize(palette.SECONDARY.DARK, 0.7),\r\n  } as React.CSSProperties;\r\n\r\n  return (\r\n    <div\r\n      className={csx(\r\n        \"proton-Tombstone\",\r\n        hasPalette && \"proton-Tombstone--custom\"\r\n      )}\r\n      style={{\r\n        ...style,\r\n        width,\r\n        height,\r\n        borderRadius,\r\n      }}\r\n    />\r\n  );\r\n};\r\n"],"names":["Tombstone","width","height","borderRadius","hasPalette","palette","useTheme","style","transparentize","jsx","csx"],"mappings":";;;;;AA8BO,MAAMA,IAAY,CAAC;AAAA,EACxB,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AACjB,MAAsB;AACpB,QAAM,EAAE,YAAAC,GAAY,SAAAC,EAAQ,IAAIC,EAAS,GAEnCC,IAAQ;AAAA,IACZ,iCAAiCF,EAAQ,QAAQ;AAAA,IACjD,8BAA8BG,EAAeH,EAAQ,QAAQ,MAAM,GAAG;AAAA,IACtE,gCAAgCG,EAAeH,EAAQ,UAAU,MAAM,GAAG;AAAA,EAAA;AAI1E,SAAAI,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAN,KAAc;AAAA,MAChB;AAAA,MACA,OAAO;AAAA,QACL,GAAGG;AAAA,QACH,OAAAN;AAAA,QACA,QAAAC;AAAA,QACA,cAAAC;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Tombstone.es.js","sources":["../../../src/components/Tombstone/Tombstone.tsx"],"sourcesContent":["\"use client\";\n\nimport \"./Tombstone.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx, transparentize } from \"../../utils\";\n\nexport interface TombstoneProps {\n  /**\n   * The border radius of the tombstone.\n   * @default \"4px\"\n   */\n  borderRadius?: string;\n  /**\n   * The height of the tombstone.\n   * @default \"1.5rem\"\n   */\n  height?: string;\n  /**\n   * The width of the tombstone.\n   * @default \"100%\"\n   */\n  width?: string;\n}\n\n/**\n * A component that displays a loading tombstone. For use as a placeholder while loading content.\n *\n * API:\n *  - {@link TombstoneProps}\n */\nexport const Tombstone = ({\n  width = \"100%\",\n  height = \"1.5rem\",\n  borderRadius = \"4px\",\n}: TombstoneProps) => {\n  const { hasPalette, palette } = useTheme();\n\n  const style = {\n    \"--tombstone-custom-background\": palette.PRIMARY.MEDIUM,\n    \"--tombstone-custom-primary\": transparentize(palette.PRIMARY.DARK, 0.9),\n    \"--tombstone-custom-secondary\": transparentize(palette.SECONDARY.DARK, 0.7),\n  } as React.CSSProperties;\n\n  return (\n    <div\n      className={csx(\n        \"proton-Tombstone\",\n        hasPalette && \"proton-Tombstone--custom\"\n      )}\n      style={{\n        ...style,\n        width,\n        height,\n        borderRadius,\n      }}\n    />\n  );\n};\n"],"names":["Tombstone","width","height","borderRadius","hasPalette","palette","useTheme","style","transparentize","jsx","csx"],"mappings":";;;;;AA8BO,MAAMA,IAAY,CAAC;AAAA,EACxB,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AACjB,MAAsB;AACpB,QAAM,EAAE,YAAAC,GAAY,SAAAC,EAAA,IAAYC,EAAA,GAE1BC,IAAQ;AAAA,IACZ,iCAAiCF,EAAQ,QAAQ;AAAA,IACjD,8BAA8BG,EAAeH,EAAQ,QAAQ,MAAM,GAAG;AAAA,IACtE,gCAAgCG,EAAeH,EAAQ,UAAU,MAAM,GAAG;AAAA,EAAA;AAG5E,SACEI,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAN,KAAc;AAAA,MAAA;AAAA,MAEhB,OAAO;AAAA,QACL,GAAGG;AAAA,QACH,OAAAN;AAAA,QACA,QAAAC;AAAA,QACA,cAAAC;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/Tooltip/Tooltip.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactNode } from \"react\";\r\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx } from \"../../utils\";\r\nimport \"../Dialog/Dialog.css\";\r\nimport \"./Tooltip.css\";\r\n\r\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\r\n\r\nexport interface TooltipContentProps {\r\n  content: string | ReactNode;\r\n  arrow?: boolean;\r\n  placement?: TooltipPlacement;\r\n  \"data-testid\"?: string;\r\n}\r\n\r\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\r\n  ({ content, arrow, placement = \"top\", \"data-testid\": testId }, ref) => {\r\n    const { style, className } = useTheme();\r\n\r\n    return (\r\n      <RadixTooltip.Content\r\n        ref={ref}\r\n        side={placement}\r\n        className={csx(\"proton__Tooltip\", \"proton-Dialog\", className)}\r\n        style={style as React.CSSProperties}\r\n        sideOffset={8}\r\n        data-testid={testId}\r\n      >\r\n        {content}\r\n        {arrow && (\r\n          <RadixTooltip.Arrow\r\n            className={csx(\"proton__Tooltip-arrow\", className)}\r\n            width={8}\r\n            height={8}\r\n          >\r\n            <svg width={8} height={8} viewBox=\"0 0 8 8\">\r\n              <path d=\"M0 0 L4 4 L8 0\" />\r\n            </svg>\r\n          </RadixTooltip.Arrow>\r\n        )}\r\n      </RadixTooltip.Content>\r\n    );\r\n  }\r\n);\r\n\r\nTooltipContent.displayName = \"TooltipContent\";\r\n\r\nexport interface TooltipProps {\r\n  /**\r\n   * Whether to show an arrow pointing to the tooltip.\r\n   * @default true\r\n   */\r\n  arrow?: boolean;\r\n  /**\r\n   * The children to display in the tooltip.\r\n   */\r\n  children: React.ReactNode;\r\n  /**\r\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\r\n   */\r\n  content: string | React.ReactNode;\r\n  /**\r\n   * A test ID.\r\n   */\r\n  \"data-testid\"?: string;\r\n  /**\r\n   * The placement of the tooltip.\r\n   * @default \"bottom\"\r\n   */\r\n  placement?: TooltipPlacement;\r\n  /**\r\n   * Whether to disable the trigger click feature.\r\n   * This is useful when using an info only Tooltip that might wrap a clickable element.\r\n   */\r\n  disableTriggerClick?: boolean;\r\n  /**\r\n   * Whether the tooltip is disabled.\r\n   */\r\n  isDisabled?: boolean;\r\n  /**\r\n   * Delay before showing the tooltip (in milliseconds).\r\n   * @default 100\r\n   */\r\n  delay?: number;\r\n  /**\r\n   * Whether the tooltip is open by default.\r\n   * @default false\r\n   */\r\n  defaultOpen?: boolean;\r\n  /**\r\n   * The callback function to call when the tooltip is opened or closed.\r\n   */\r\n  onOpenChange?: (open: boolean) => void;\r\n}\r\n\r\n/**\r\n * A component that displays a tooltip when the user hovers over the trigger.\r\n * For mobile, use Popover instead.\r\n * API:\r\n *  - {@link TooltipProps}\r\n *\r\n * @example\r\n * ```tsx\r\n    <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\r\n      {children}\r\n    </Tooltip>\r\n * ```\r\n */\r\nexport function Tooltip({\r\n  arrow = true,\r\n  children,\r\n  content,\r\n  delay = 100,\r\n  placement = \"top\",\r\n  isDisabled,\r\n  defaultOpen = false,\r\n  onOpenChange,\r\n  disableTriggerClick,\r\n  \"data-testid\": testId,\r\n}: TooltipProps) {\r\n  const [isOpen, setIsOpen] = React.useState(defaultOpen);\r\n  const triggerClickRef = React.useRef<boolean>(false);\r\n  const hasHovered = React.useRef<boolean>(false);\r\n\r\n  if (content === \"\") return null;\r\n\r\n  const handleOpenChange = (openState: boolean) => {\r\n    // When opened via hover, we want to disable the trigger click feature as it causes\r\n    // the tooltip state to get out of sync with the trigger state.\r\n    if (openState && !triggerClickRef.current) hasHovered.current = true;\r\n\r\n    if (onOpenChange) onOpenChange(openState);\r\n\r\n    // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\r\n    // it again here.\r\n    if (!triggerClickRef.current) setIsOpen(openState);\r\n    triggerClickRef.current = false;\r\n  };\r\n\r\n  return (\r\n    <RadixTooltip.Provider>\r\n      <RadixTooltip.Root\r\n        open={isOpen}\r\n        defaultOpen={defaultOpen}\r\n        onOpenChange={handleOpenChange}\r\n        delayDuration={delay}\r\n      >\r\n        <RadixTooltip.Trigger asChild>\r\n          {disableTriggerClick ? (\r\n            <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\r\n              {children}\r\n            </span>\r\n          ) : (\r\n            <div\r\n              role=\"button\"\r\n              aria-label=\"Show tooltip\"\r\n              data-hovered={isOpen}\r\n              onClick={() => {\r\n                if (disableTriggerClick || isDisabled) return;\r\n\r\n                // Once hovered it's safe to assume the user isn't trying to use via a touch device,\r\n                // so we can safely disable the trigger click feature.\r\n                if (hasHovered.current) return;\r\n\r\n                triggerClickRef.current = true;\r\n                setIsOpen(!isOpen);\r\n              }}\r\n              className=\"proton__Tooltip-trigger\"\r\n            >\r\n              {children}\r\n            </div>\r\n          )}\r\n        </RadixTooltip.Trigger>\r\n        {!isDisabled && (\r\n          <RadixTooltip.Portal>\r\n            <TooltipContent\r\n              content={content}\r\n              placement={placement}\r\n              arrow={arrow}\r\n              data-testid={testId}\r\n            />\r\n          </RadixTooltip.Portal>\r\n        )}\r\n      </RadixTooltip.Root>\r\n    </RadixTooltip.Provider>\r\n  );\r\n}\r\n\r\nTooltip.displayName = \"Tooltip\";\r\n"],"names":["TooltipContent","React","content","arrow","placement","testId","ref","style","className","useTheme","jsxs","RadixTooltip","csx","jsx","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","triggerClickRef","hasHovered","handleOpenChange","openState"],"mappings":"iVAkBMA,EAAiBC,EAAM,WAC3B,CAAC,CAAE,QAAAC,EAAS,MAAAC,EAAO,UAAAC,EAAY,MAAO,cAAeC,CAAO,EAAGC,IAAQ,CACrE,KAAM,CAAE,MAAAC,EAAO,UAAAC,CAAU,EAAIC,EAAS,SAAA,EAGpC,OAAAC,EAAA,kBAAA,KAACC,EAAAA,QAAa,QAAb,CACC,IAAAL,EACA,KAAMF,EACN,UAAWQ,EAAA,IAAI,kBAAmB,gBAAiBJ,CAAS,EAC5D,MAAAD,EACA,WAAY,EACZ,cAAaF,EAEZ,SAAA,CAAAH,EACAC,GACCU,EAAA,kBAAA,IAACF,EAAAA,QAAa,MAAb,CACC,UAAWC,EAAAA,IAAI,wBAAyBJ,CAAS,EACjD,MAAO,EACP,OAAQ,EAER,SAACK,EAAA,kBAAA,IAAA,MAAA,CAAI,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,SAACA,EAAAA,kBAAAA,IAAA,OAAA,CAAK,EAAE,gBAAiB,CAAA,EAC3B,CAAA,CACF,CAAA,CAAA,CAAA,CAIR,CACF,EAEAb,EAAe,YAAc,iBA+DtB,SAASc,EAAQ,CACtB,MAAAX,EAAQ,GACR,SAAAY,EACA,QAAAb,EACA,MAAAc,EAAQ,IACR,UAAAZ,EAAY,MACZ,WAAAa,EACA,YAAAC,EAAc,GACd,aAAAC,EACA,oBAAAC,EACA,cAAef,CACjB,EAAiB,CACf,KAAM,CAACgB,EAAQC,CAAS,EAAIrB,EAAM,SAASiB,CAAW,EAChDK,EAAkBtB,EAAM,OAAgB,EAAK,EAC7CuB,EAAavB,EAAM,OAAgB,EAAK,EAE1C,GAAAC,IAAY,GAAW,OAAA,KAErB,MAAAuB,EAAoBC,GAAuB,CAG3CA,GAAa,CAACH,EAAgB,YAAoB,QAAU,IAE5DJ,KAA2BO,CAAS,EAInCH,EAAgB,SAASD,EAAUI,CAAS,EACjDH,EAAgB,QAAU,EAAA,EAI1B,OAAAV,EAAA,kBAAA,IAACF,EAAa,QAAA,SAAb,CACC,SAAAD,EAAA,kBAAA,KAACC,EAAAA,QAAa,KAAb,CACC,KAAMU,EACN,YAAAH,EACA,aAAcO,EACd,cAAeT,EAEf,SAAA,CAAAH,EAAA,kBAAA,IAACF,EAAa,QAAA,QAAb,CAAqB,QAAO,GAC1B,SAAAS,EACEP,EAAAA,kBAAAA,IAAA,OAAA,CAAK,aAAW,eAAe,UAAU,0BACvC,SAAAE,CACH,CAAA,EAEAF,EAAA,kBAAA,IAAC,MAAA,CACC,KAAK,SACL,aAAW,eACX,eAAcQ,EACd,QAAS,IAAM,CACTD,GAAuBH,GAIvBO,EAAW,UAEfD,EAAgB,QAAU,GAC1BD,EAAU,CAACD,CAAM,EACnB,EACA,UAAU,0BAET,SAAAN,CAAA,CAAA,EAGP,EACC,CAACE,GACCJ,EAAAA,kBAAAA,IAAAF,EAAAA,QAAa,OAAb,CACC,SAAAE,EAAA,kBAAA,IAACb,EAAA,CACC,QAAAE,EACA,UAAAE,EACA,MAAAD,EACA,cAAaE,CAAA,CAAA,EAEjB,CAAA,CAAA,CAGN,CAAA,CAAA,CAEJ,CAEAS,EAAQ,YAAc"}
+{"version":3,"file":"Tooltip.cjs.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils\";\nimport \"../Dialog/Dialog.css\";\nimport \"./Tooltip.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipContentProps {\n  content: string | ReactNode;\n  arrow?: boolean;\n  placement?: TooltipPlacement;\n  \"data-testid\"?: string;\n}\n\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\n  ({ content, arrow, placement = \"top\", \"data-testid\": testId }, ref) => {\n    const { style, className } = useTheme();\n\n    return (\n      <RadixTooltip.Content\n        ref={ref}\n        side={placement}\n        className={csx(\"proton__Tooltip\", \"proton-Dialog\", className)}\n        style={style as React.CSSProperties}\n        sideOffset={8}\n        data-testid={testId}\n      >\n        {content}\n        {arrow && (\n          <RadixTooltip.Arrow\n            className={csx(\"proton__Tooltip-arrow\", className)}\n            width={8}\n            height={8}\n          >\n            <svg width={8} height={8} viewBox=\"0 0 8 8\">\n              <path d=\"M0 0 L4 4 L8 0\" />\n            </svg>\n          </RadixTooltip.Arrow>\n        )}\n      </RadixTooltip.Content>\n    );\n  }\n);\n\nTooltipContent.displayName = \"TooltipContent\";\n\nexport interface TooltipProps {\n  /**\n   * Whether to show an arrow pointing to the tooltip.\n   * @default true\n   */\n  arrow?: boolean;\n  /**\n   * The children to display in the tooltip.\n   */\n  children: React.ReactNode;\n  /**\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\n   */\n  content: string | React.ReactNode;\n  /**\n   * A test ID.\n   */\n  \"data-testid\"?: string;\n  /**\n   * The placement of the tooltip.\n   * @default \"bottom\"\n   */\n  placement?: TooltipPlacement;\n  /**\n   * Whether to disable the trigger click feature.\n   * This is useful when using an info only Tooltip that might wrap a clickable element.\n   */\n  disableTriggerClick?: boolean;\n  /**\n   * Whether the tooltip is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Delay before showing the tooltip (in milliseconds).\n   * @default 100\n   */\n  delay?: number;\n  /**\n   * Whether the tooltip is open by default.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The callback function to call when the tooltip is opened or closed.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * A component that displays a tooltip when the user hovers over the trigger.\n * For mobile, use Popover instead.\n * API:\n *  - {@link TooltipProps}\n *\n * @example\n * ```tsx\n    <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\n      {children}\n    </Tooltip>\n * ```\n */\nexport function Tooltip({\n  arrow = true,\n  children,\n  content,\n  delay = 100,\n  placement = \"top\",\n  isDisabled,\n  defaultOpen = false,\n  onOpenChange,\n  disableTriggerClick,\n  \"data-testid\": testId,\n}: TooltipProps) {\n  const [isOpen, setIsOpen] = React.useState(defaultOpen);\n  const triggerClickRef = React.useRef<boolean>(false);\n  const hasHovered = React.useRef<boolean>(false);\n\n  if (content === \"\") return null;\n\n  const handleOpenChange = (openState: boolean) => {\n    // When opened via hover, we want to disable the trigger click feature as it causes\n    // the tooltip state to get out of sync with the trigger state.\n    if (openState && !triggerClickRef.current) hasHovered.current = true;\n\n    if (onOpenChange) onOpenChange(openState);\n\n    // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\n    // it again here.\n    if (!triggerClickRef.current) setIsOpen(openState);\n    triggerClickRef.current = false;\n  };\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        onOpenChange={handleOpenChange}\n        delayDuration={delay}\n      >\n        <RadixTooltip.Trigger asChild>\n          {disableTriggerClick ? (\n            <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\n              {children}\n            </span>\n          ) : (\n            <div\n              role=\"button\"\n              aria-label=\"Show tooltip\"\n              data-hovered={isOpen}\n              onClick={() => {\n                if (disableTriggerClick || isDisabled) return;\n\n                // Once hovered it's safe to assume the user isn't trying to use via a touch device,\n                // so we can safely disable the trigger click feature.\n                if (hasHovered.current) return;\n\n                triggerClickRef.current = true;\n                setIsOpen(!isOpen);\n              }}\n              className=\"proton__Tooltip-trigger\"\n            >\n              {children}\n            </div>\n          )}\n        </RadixTooltip.Trigger>\n        {!isDisabled && (\n          <RadixTooltip.Portal>\n            <TooltipContent\n              content={content}\n              placement={placement}\n              arrow={arrow}\n              data-testid={testId}\n            />\n          </RadixTooltip.Portal>\n        )}\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n\nTooltip.displayName = \"Tooltip\";\n"],"names":["TooltipContent","React","content","arrow","placement","testId","ref","style","className","useTheme","jsxs","RadixTooltip","csx","jsx","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","triggerClickRef","hasHovered","handleOpenChange","openState"],"mappings":"iVAkBMA,EAAiBC,EAAM,WAC3B,CAAC,CAAE,QAAAC,EAAS,MAAAC,EAAO,UAAAC,EAAY,MAAO,cAAeC,CAAA,EAAUC,IAAQ,CACrE,KAAM,CAAE,MAAAC,EAAO,UAAAC,CAAA,EAAcC,WAAA,EAE7B,OACEC,EAAAA,kBAAAA,KAACC,EAAAA,QAAa,QAAb,CACC,IAAAL,EACA,KAAMF,EACN,UAAWQ,EAAAA,IAAI,kBAAmB,gBAAiBJ,CAAS,EAC5D,MAAAD,EACA,WAAY,EACZ,cAAaF,EAEZ,SAAA,CAAAH,EACAC,GACCU,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,MAAb,CACC,UAAWC,EAAAA,IAAI,wBAAyBJ,CAAS,EACjD,MAAO,EACP,OAAQ,EAER,SAAAK,EAAAA,kBAAAA,IAAC,MAAA,CAAI,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,SAAAA,wBAAC,OAAA,CAAK,EAAE,gBAAA,CAAiB,CAAA,CAC3B,CAAA,CAAA,CACF,CAAA,CAAA,CAIR,CACF,EAEAb,EAAe,YAAc,iBA+DtB,SAASc,EAAQ,CACtB,MAAAX,EAAQ,GACR,SAAAY,EACA,QAAAb,EACA,MAAAc,EAAQ,IACR,UAAAZ,EAAY,MACZ,WAAAa,EACA,YAAAC,EAAc,GACd,aAAAC,EACA,oBAAAC,EACA,cAAef,CACjB,EAAiB,CACf,KAAM,CAACgB,EAAQC,CAAS,EAAIrB,EAAM,SAASiB,CAAW,EAChDK,EAAkBtB,EAAM,OAAgB,EAAK,EAC7CuB,EAAavB,EAAM,OAAgB,EAAK,EAE9C,GAAIC,IAAY,GAAI,OAAO,KAE3B,MAAMuB,EAAoBC,GAAuB,CAG3CA,GAAa,CAACH,EAAgB,YAAoB,QAAU,IAE5DJ,KAA2BO,CAAS,EAInCH,EAAgB,SAASD,EAAUI,CAAS,EACjDH,EAAgB,QAAU,EAC5B,EAEA,OACEV,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,SAAb,CACC,SAAAD,EAAAA,kBAAAA,KAACC,EAAAA,QAAa,KAAb,CACC,KAAMU,EACN,YAAAH,EACA,aAAcO,EACd,cAAeT,EAEf,SAAA,CAAAH,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,QAAb,CAAqB,QAAO,GAC1B,SAAAS,EACCP,EAAAA,kBAAAA,IAAC,OAAA,CAAK,aAAW,eAAe,UAAU,0BACvC,SAAAE,EACH,EAEAF,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,SACL,aAAW,eACX,eAAcQ,EACd,QAAS,IAAM,CACTD,GAAuBH,GAIvBO,EAAW,UAEfD,EAAgB,QAAU,GAC1BD,EAAU,CAACD,CAAM,EACnB,EACA,UAAU,0BAET,SAAAN,CAAA,CAAA,EAGP,EACC,CAACE,GACAJ,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,OAAb,CACC,SAAAE,EAAAA,kBAAAA,IAACb,EAAA,CACC,QAAAE,EACA,UAAAE,EACA,MAAAD,EACA,cAAaE,CAAA,CAAA,CACf,CACF,CAAA,CAAA,CAAA,EAGN,CAEJ,CAEAS,EAAQ,YAAc"}

package/dist/components/Tooltip/Tooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactNode } from \"react\";\r\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx } from \"../../utils\";\r\nimport \"../Dialog/Dialog.css\";\r\nimport \"./Tooltip.css\";\r\n\r\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\r\n\r\nexport interface TooltipContentProps {\r\n  content: string | ReactNode;\r\n  arrow?: boolean;\r\n  placement?: TooltipPlacement;\r\n  \"data-testid\"?: string;\r\n}\r\n\r\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\r\n  ({ content, arrow, placement = \"top\", \"data-testid\": testId }, ref) => {\r\n    const { style, className } = useTheme();\r\n\r\n    return (\r\n      <RadixTooltip.Content\r\n        ref={ref}\r\n        side={placement}\r\n        className={csx(\"proton__Tooltip\", \"proton-Dialog\", className)}\r\n        style={style as React.CSSProperties}\r\n        sideOffset={8}\r\n        data-testid={testId}\r\n      >\r\n        {content}\r\n        {arrow && (\r\n          <RadixTooltip.Arrow\r\n            className={csx(\"proton__Tooltip-arrow\", className)}\r\n            width={8}\r\n            height={8}\r\n          >\r\n            <svg width={8} height={8} viewBox=\"0 0 8 8\">\r\n              <path d=\"M0 0 L4 4 L8 0\" />\r\n            </svg>\r\n          </RadixTooltip.Arrow>\r\n        )}\r\n      </RadixTooltip.Content>\r\n    );\r\n  }\r\n);\r\n\r\nTooltipContent.displayName = \"TooltipContent\";\r\n\r\nexport interface TooltipProps {\r\n  /**\r\n   * Whether to show an arrow pointing to the tooltip.\r\n   * @default true\r\n   */\r\n  arrow?: boolean;\r\n  /**\r\n   * The children to display in the tooltip.\r\n   */\r\n  children: React.ReactNode;\r\n  /**\r\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\r\n   */\r\n  content: string | React.ReactNode;\r\n  /**\r\n   * A test ID.\r\n   */\r\n  \"data-testid\"?: string;\r\n  /**\r\n   * The placement of the tooltip.\r\n   * @default \"bottom\"\r\n   */\r\n  placement?: TooltipPlacement;\r\n  /**\r\n   * Whether to disable the trigger click feature.\r\n   * This is useful when using an info only Tooltip that might wrap a clickable element.\r\n   */\r\n  disableTriggerClick?: boolean;\r\n  /**\r\n   * Whether the tooltip is disabled.\r\n   */\r\n  isDisabled?: boolean;\r\n  /**\r\n   * Delay before showing the tooltip (in milliseconds).\r\n   * @default 100\r\n   */\r\n  delay?: number;\r\n  /**\r\n   * Whether the tooltip is open by default.\r\n   * @default false\r\n   */\r\n  defaultOpen?: boolean;\r\n  /**\r\n   * The callback function to call when the tooltip is opened or closed.\r\n   */\r\n  onOpenChange?: (open: boolean) => void;\r\n}\r\n\r\n/**\r\n * A component that displays a tooltip when the user hovers over the trigger.\r\n * For mobile, use Popover instead.\r\n * API:\r\n *  - {@link TooltipProps}\r\n *\r\n * @example\r\n * ```tsx\r\n    <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\r\n      {children}\r\n    </Tooltip>\r\n * ```\r\n */\r\nexport function Tooltip({\r\n  arrow = true,\r\n  children,\r\n  content,\r\n  delay = 100,\r\n  placement = \"top\",\r\n  isDisabled,\r\n  defaultOpen = false,\r\n  onOpenChange,\r\n  disableTriggerClick,\r\n  \"data-testid\": testId,\r\n}: TooltipProps) {\r\n  const [isOpen, setIsOpen] = React.useState(defaultOpen);\r\n  const triggerClickRef = React.useRef<boolean>(false);\r\n  const hasHovered = React.useRef<boolean>(false);\r\n\r\n  if (content === \"\") return null;\r\n\r\n  const handleOpenChange = (openState: boolean) => {\r\n    // When opened via hover, we want to disable the trigger click feature as it causes\r\n    // the tooltip state to get out of sync with the trigger state.\r\n    if (openState && !triggerClickRef.current) hasHovered.current = true;\r\n\r\n    if (onOpenChange) onOpenChange(openState);\r\n\r\n    // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\r\n    // it again here.\r\n    if (!triggerClickRef.current) setIsOpen(openState);\r\n    triggerClickRef.current = false;\r\n  };\r\n\r\n  return (\r\n    <RadixTooltip.Provider>\r\n      <RadixTooltip.Root\r\n        open={isOpen}\r\n        defaultOpen={defaultOpen}\r\n        onOpenChange={handleOpenChange}\r\n        delayDuration={delay}\r\n      >\r\n        <RadixTooltip.Trigger asChild>\r\n          {disableTriggerClick ? (\r\n            <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\r\n              {children}\r\n            </span>\r\n          ) : (\r\n            <div\r\n              role=\"button\"\r\n              aria-label=\"Show tooltip\"\r\n              data-hovered={isOpen}\r\n              onClick={() => {\r\n                if (disableTriggerClick || isDisabled) return;\r\n\r\n                // Once hovered it's safe to assume the user isn't trying to use via a touch device,\r\n                // so we can safely disable the trigger click feature.\r\n                if (hasHovered.current) return;\r\n\r\n                triggerClickRef.current = true;\r\n                setIsOpen(!isOpen);\r\n              }}\r\n              className=\"proton__Tooltip-trigger\"\r\n            >\r\n              {children}\r\n            </div>\r\n          )}\r\n        </RadixTooltip.Trigger>\r\n        {!isDisabled && (\r\n          <RadixTooltip.Portal>\r\n            <TooltipContent\r\n              content={content}\r\n              placement={placement}\r\n              arrow={arrow}\r\n              data-testid={testId}\r\n            />\r\n          </RadixTooltip.Portal>\r\n        )}\r\n      </RadixTooltip.Root>\r\n    </RadixTooltip.Provider>\r\n  );\r\n}\r\n\r\nTooltip.displayName = \"Tooltip\";\r\n"],"names":["TooltipContent","React","content","arrow","placement","testId","ref","style","className","useTheme","jsxs","RadixTooltip","csx","jsx","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","triggerClickRef","hasHovered","handleOpenChange","openState"],"mappings":";;;;;;;AAkBA,MAAMA,IAAiBC,EAAM;AAAA,EAC3B,CAAC,EAAE,SAAAC,GAAS,OAAAC,GAAO,WAAAC,IAAY,OAAO,eAAeC,EAAO,GAAGC,MAAQ;AACrE,UAAM,EAAE,OAAAC,GAAO,WAAAC,EAAU,IAAIC,EAAS;AAGpC,WAAAC,gBAAAA,EAAA;AAAA,MAACC,EAAa;AAAA,MAAb;AAAA,QACC,KAAAL;AAAA,QACA,MAAMF;AAAA,QACN,WAAWQ,EAAI,mBAAmB,iBAAiBJ,CAAS;AAAA,QAC5D,OAAAD;AAAA,QACA,YAAY;AAAA,QACZ,eAAaF;AAAA,QAEZ,UAAA;AAAA,UAAAH;AAAA,UACAC,KACCU,gBAAAA,EAAA;AAAA,YAACF,EAAa;AAAA,YAAb;AAAA,cACC,WAAWC,EAAI,yBAAyBJ,CAAS;AAAA,cACjD,OAAO;AAAA,cACP,QAAQ;AAAA,cAER,UAACK,gBAAAA,EAAA,IAAA,OAAA,EAAI,OAAO,GAAG,QAAQ,GAAG,SAAQ,WAChC,UAACA,gBAAAA,EAAAA,IAAA,QAAA,EAAK,GAAE,iBAAiB,CAAA,GAC3B;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAb,EAAe,cAAc;AA+DtB,SAASc,EAAQ;AAAA,EACtB,OAAAX,IAAQ;AAAA,EACR,UAAAY;AAAA,EACA,SAAAb;AAAA,EACA,OAAAc,IAAQ;AAAA,EACR,WAAAZ,IAAY;AAAA,EACZ,YAAAa;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAef;AACjB,GAAiB;AACf,QAAM,CAACgB,GAAQC,CAAS,IAAIrB,EAAM,SAASiB,CAAW,GAChDK,IAAkBtB,EAAM,OAAgB,EAAK,GAC7CuB,IAAavB,EAAM,OAAgB,EAAK;AAE1C,MAAAC,MAAY,GAAW,QAAA;AAErB,QAAAuB,IAAmB,CAACC,MAAuB;AAG/C,IAAIA,KAAa,CAACH,EAAgB,cAAoB,UAAU,KAE5DJ,OAA2BO,CAAS,GAInCH,EAAgB,WAASD,EAAUI,CAAS,GACjDH,EAAgB,UAAU;AAAA,EAAA;AAI1B,SAAAV,gBAAAA,EAAA,IAACF,EAAa,UAAb,EACC,UAAAD,gBAAAA,EAAA;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,MAAMU;AAAA,MACN,aAAAH;AAAA,MACA,cAAcO;AAAA,MACd,eAAeT;AAAA,MAEf,UAAA;AAAA,QAAAH,gBAAAA,EAAA,IAACF,EAAa,SAAb,EAAqB,SAAO,IAC1B,UAAAS,IACEP,gBAAAA,EAAAA,IAAA,QAAA,EAAK,cAAW,gBAAe,WAAU,2BACvC,UAAAE,EACH,CAAA,IAEAF,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,gBAAcQ;AAAA,YACd,SAAS,MAAM;AACb,cAAID,KAAuBH,KAIvBO,EAAW,YAEfD,EAAgB,UAAU,IAC1BD,EAAU,CAACD,CAAM;AAAA,YACnB;AAAA,YACA,WAAU;AAAA,YAET,UAAAN;AAAA,UAAA;AAAA,QAAA,GAGP;AAAA,QACC,CAACE,KACCJ,gBAAAA,EAAAA,IAAAF,EAAa,QAAb,EACC,UAAAE,gBAAAA,EAAA;AAAA,UAACb;AAAA,UAAA;AAAA,YACC,SAAAE;AAAA,YACA,WAAAE;AAAA,YACA,OAAAD;AAAA,YACA,eAAaE;AAAA,UAAA;AAAA,QAAA,GAEjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;AAEAS,EAAQ,cAAc;"}
+{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils\";\nimport \"../Dialog/Dialog.css\";\nimport \"./Tooltip.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipContentProps {\n  content: string | ReactNode;\n  arrow?: boolean;\n  placement?: TooltipPlacement;\n  \"data-testid\"?: string;\n}\n\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\n  ({ content, arrow, placement = \"top\", \"data-testid\": testId }, ref) => {\n    const { style, className } = useTheme();\n\n    return (\n      <RadixTooltip.Content\n        ref={ref}\n        side={placement}\n        className={csx(\"proton__Tooltip\", \"proton-Dialog\", className)}\n        style={style as React.CSSProperties}\n        sideOffset={8}\n        data-testid={testId}\n      >\n        {content}\n        {arrow && (\n          <RadixTooltip.Arrow\n            className={csx(\"proton__Tooltip-arrow\", className)}\n            width={8}\n            height={8}\n          >\n            <svg width={8} height={8} viewBox=\"0 0 8 8\">\n              <path d=\"M0 0 L4 4 L8 0\" />\n            </svg>\n          </RadixTooltip.Arrow>\n        )}\n      </RadixTooltip.Content>\n    );\n  }\n);\n\nTooltipContent.displayName = \"TooltipContent\";\n\nexport interface TooltipProps {\n  /**\n   * Whether to show an arrow pointing to the tooltip.\n   * @default true\n   */\n  arrow?: boolean;\n  /**\n   * The children to display in the tooltip.\n   */\n  children: React.ReactNode;\n  /**\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\n   */\n  content: string | React.ReactNode;\n  /**\n   * A test ID.\n   */\n  \"data-testid\"?: string;\n  /**\n   * The placement of the tooltip.\n   * @default \"bottom\"\n   */\n  placement?: TooltipPlacement;\n  /**\n   * Whether to disable the trigger click feature.\n   * This is useful when using an info only Tooltip that might wrap a clickable element.\n   */\n  disableTriggerClick?: boolean;\n  /**\n   * Whether the tooltip is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Delay before showing the tooltip (in milliseconds).\n   * @default 100\n   */\n  delay?: number;\n  /**\n   * Whether the tooltip is open by default.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The callback function to call when the tooltip is opened or closed.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * A component that displays a tooltip when the user hovers over the trigger.\n * For mobile, use Popover instead.\n * API:\n *  - {@link TooltipProps}\n *\n * @example\n * ```tsx\n    <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\n      {children}\n    </Tooltip>\n * ```\n */\nexport function Tooltip({\n  arrow = true,\n  children,\n  content,\n  delay = 100,\n  placement = \"top\",\n  isDisabled,\n  defaultOpen = false,\n  onOpenChange,\n  disableTriggerClick,\n  \"data-testid\": testId,\n}: TooltipProps) {\n  const [isOpen, setIsOpen] = React.useState(defaultOpen);\n  const triggerClickRef = React.useRef<boolean>(false);\n  const hasHovered = React.useRef<boolean>(false);\n\n  if (content === \"\") return null;\n\n  const handleOpenChange = (openState: boolean) => {\n    // When opened via hover, we want to disable the trigger click feature as it causes\n    // the tooltip state to get out of sync with the trigger state.\n    if (openState && !triggerClickRef.current) hasHovered.current = true;\n\n    if (onOpenChange) onOpenChange(openState);\n\n    // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\n    // it again here.\n    if (!triggerClickRef.current) setIsOpen(openState);\n    triggerClickRef.current = false;\n  };\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        onOpenChange={handleOpenChange}\n        delayDuration={delay}\n      >\n        <RadixTooltip.Trigger asChild>\n          {disableTriggerClick ? (\n            <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\n              {children}\n            </span>\n          ) : (\n            <div\n              role=\"button\"\n              aria-label=\"Show tooltip\"\n              data-hovered={isOpen}\n              onClick={() => {\n                if (disableTriggerClick || isDisabled) return;\n\n                // Once hovered it's safe to assume the user isn't trying to use via a touch device,\n                // so we can safely disable the trigger click feature.\n                if (hasHovered.current) return;\n\n                triggerClickRef.current = true;\n                setIsOpen(!isOpen);\n              }}\n              className=\"proton__Tooltip-trigger\"\n            >\n              {children}\n            </div>\n          )}\n        </RadixTooltip.Trigger>\n        {!isDisabled && (\n          <RadixTooltip.Portal>\n            <TooltipContent\n              content={content}\n              placement={placement}\n              arrow={arrow}\n              data-testid={testId}\n            />\n          </RadixTooltip.Portal>\n        )}\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n\nTooltip.displayName = \"Tooltip\";\n"],"names":["TooltipContent","React","content","arrow","placement","testId","ref","style","className","useTheme","jsxs","RadixTooltip","csx","jsx","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","triggerClickRef","hasHovered","handleOpenChange","openState"],"mappings":";;;;;;;AAkBA,MAAMA,IAAiBC,EAAM;AAAA,EAC3B,CAAC,EAAE,SAAAC,GAAS,OAAAC,GAAO,WAAAC,IAAY,OAAO,eAAeC,EAAA,GAAUC,MAAQ;AACrE,UAAM,EAAE,OAAAC,GAAO,WAAAC,EAAA,IAAcC,EAAA;AAE7B,WACEC,gBAAAA,EAAAA;AAAAA,MAACC,EAAa;AAAA,MAAb;AAAA,QACC,KAAAL;AAAA,QACA,MAAMF;AAAA,QACN,WAAWQ,EAAI,mBAAmB,iBAAiBJ,CAAS;AAAA,QAC5D,OAAAD;AAAA,QACA,YAAY;AAAA,QACZ,eAAaF;AAAA,QAEZ,UAAA;AAAA,UAAAH;AAAA,UACAC,KACCU,gBAAAA,EAAAA;AAAAA,YAACF,EAAa;AAAA,YAAb;AAAA,cACC,WAAWC,EAAI,yBAAyBJ,CAAS;AAAA,cACjD,OAAO;AAAA,cACP,QAAQ;AAAA,cAER,UAAAK,gBAAAA,EAAAA,IAAC,OAAA,EAAI,OAAO,GAAG,QAAQ,GAAG,SAAQ,WAChC,UAAAA,gBAAAA,MAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB,EAAA,CAC3B;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAb,EAAe,cAAc;AA+DtB,SAASc,EAAQ;AAAA,EACtB,OAAAX,IAAQ;AAAA,EACR,UAAAY;AAAA,EACA,SAAAb;AAAA,EACA,OAAAc,IAAQ;AAAA,EACR,WAAAZ,IAAY;AAAA,EACZ,YAAAa;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAef;AACjB,GAAiB;AACf,QAAM,CAACgB,GAAQC,CAAS,IAAIrB,EAAM,SAASiB,CAAW,GAChDK,IAAkBtB,EAAM,OAAgB,EAAK,GAC7CuB,IAAavB,EAAM,OAAgB,EAAK;AAE9C,MAAIC,MAAY,GAAI,QAAO;AAE3B,QAAMuB,IAAmB,CAACC,MAAuB;AAG/C,IAAIA,KAAa,CAACH,EAAgB,cAAoB,UAAU,KAE5DJ,OAA2BO,CAAS,GAInCH,EAAgB,WAASD,EAAUI,CAAS,GACjDH,EAAgB,UAAU;AAAA,EAC5B;AAEA,SACEV,gBAAAA,EAAAA,IAACF,EAAa,UAAb,EACC,UAAAD,gBAAAA,EAAAA;AAAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,MAAMU;AAAA,MACN,aAAAH;AAAA,MACA,cAAcO;AAAA,MACd,eAAeT;AAAA,MAEf,UAAA;AAAA,QAAAH,gBAAAA,EAAAA,IAACF,EAAa,SAAb,EAAqB,SAAO,IAC1B,UAAAS,IACCP,gBAAAA,EAAAA,IAAC,QAAA,EAAK,cAAW,gBAAe,WAAU,2BACvC,UAAAE,GACH,IAEAF,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,gBAAcQ;AAAA,YACd,SAAS,MAAM;AACb,cAAID,KAAuBH,KAIvBO,EAAW,YAEfD,EAAgB,UAAU,IAC1BD,EAAU,CAACD,CAAM;AAAA,YACnB;AAAA,YACA,WAAU;AAAA,YAET,UAAAN;AAAA,UAAA;AAAA,QAAA,GAGP;AAAA,QACC,CAACE,KACAJ,gBAAAA,EAAAA,IAACF,EAAa,QAAb,EACC,UAAAE,gBAAAA,EAAAA;AAAAA,UAACb;AAAA,UAAA;AAAA,YACC,SAAAE;AAAA,YACA,WAAAE;AAAA,YACA,OAAAD;AAAA,YACA,eAAaE;AAAA,UAAA;AAAA,QAAA,EACf,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;AAEAS,EAAQ,cAAc;"}

package/dist/components/Waveform/Waveform.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Waveform.cjs.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useEffect, useMemo, useRef, useState } from \"react\";\r\nimport { csx } from \"../../utils\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport \"./Waveform.css\";\r\nimport { WaveformBar } from \"./WaveformBar\";\r\n\r\nexport interface WaveformProps {\r\n  /**\r\n   * Array of normalized amplitude values (0-1) representing the waveform.\r\n   * If not provided, uses a sample sine wave.\r\n   */\r\n  data?: number[];\r\n\r\n  /**\r\n   * Current playback position in seconds.\r\n   */\r\n  currentTime?: number;\r\n\r\n  /**\r\n   * Test ID for testing purposes.\r\n   */\r\n  \"data-testid\"?: string;\r\n\r\n  /**\r\n   * Whether the entire waveform is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Reason for the waveform being disabled.\r\n   */\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * End time to display until in seconds.\r\n   */\r\n  endDuration?: number;\r\n\r\n  /**\r\n   * Click handler that receives the clicked position (0-1) and event.\r\n   */\r\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\r\n\r\n  /**\r\n   * Width in pixels of each waveform bar.\r\n   */\r\n  resolution?: number;\r\n\r\n  /**\r\n   * Whether to show timestamp markers.\r\n   */\r\n  showTimestamps?: boolean;\r\n\r\n  /**\r\n   * Start time to display from in seconds.\r\n   */\r\n  startDuration?: number;\r\n\r\n  /**\r\n   * Total duration of the audio in seconds.\r\n   */\r\n  totalDuration: number;\r\n}\r\n\r\nconst sampleWaveform = generateSampleWaveformData(100);\r\n\r\n/**\r\n * A waveform visualization component that displays audio data with interactive features.\r\n *\r\n * API:\r\n *  - {@link WaveformProps}\r\n */\r\nexport function Waveform({\r\n  data: waveformData,\r\n  resolution = 2,\r\n  startDuration,\r\n  endDuration,\r\n  currentTime = 0,\r\n  showTimestamps = false,\r\n  totalDuration,\r\n  disabled,\r\n  disabledMessage,\r\n  onClick,\r\n  \"data-testid\": testId,\r\n}: WaveformProps) {\r\n  const { className } = useTheme();\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\r\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const [hasAnimated, setHasAnimated] = useState(false);\r\n\r\n  const waveform = waveformData || sampleWaveform;\r\n\r\n  const spacing = resolution;\r\n\r\n  useEffect(() => {\r\n    if (!containerRef.current) return;\r\n\r\n    const processWaveform = (width: number) => {\r\n      const numBars = Math.floor(width / (resolution + spacing));\r\n      const processed = resampleData(waveform, numBars);\r\n      setProcessedWaveform(processed);\r\n    };\r\n\r\n    const initialWidth = containerRef.current.clientWidth;\r\n    processWaveform(initialWidth);\r\n\r\n    const resizeObserver = new ResizeObserver((entries) => {\r\n      if (entries && entries[0]) {\r\n        processWaveform(entries[0].contentRect.width);\r\n      }\r\n    });\r\n\r\n    resizeObserver.observe(containerRef.current);\r\n\r\n    return () => resizeObserver.disconnect();\r\n  }, [waveform, resolution, spacing]);\r\n\r\n  useEffect(() => {\r\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\r\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\r\n\r\n    return () => {\r\n      clearTimeout(visibilityTimer);\r\n      clearTimeout(animationTimer);\r\n    };\r\n  }, []);\r\n\r\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (!containerRef.current) return;\r\n    const rect = containerRef.current.getBoundingClientRect();\r\n    const x = e.clientX - rect.left;\r\n    const position = (x / rect.width) * totalDuration;\r\n    setHoverPosition(position);\r\n  };\r\n\r\n  const handleMouseLeave = () => {\r\n    setHoverPosition(null);\r\n  };\r\n\r\n  // Calculate the width of a single bar including spacing\r\n  const barTotalWidth = resolution + spacing;\r\n\r\n  // Find the nearest bar boundaries for start and end durations\r\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\r\n    const position = (time / totalDuration) * 100;\r\n    const barIndex =\r\n      direction === \"start\"\r\n        ? Math.floor((position / 100) * processedWaveform.length)\r\n        : Math.ceil((position / 100) * processedWaveform.length);\r\n\r\n    return (\r\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\r\n    );\r\n  };\r\n\r\n  const containerWidth = containerRef.current?.clientWidth;\r\n  const waveformMessage = useMemo(() => {\r\n    if (disabled && disabledMessage) return disabledMessage;\r\n    if (!waveformData) return \"Waveform Unavailable\";\r\n\r\n    return null;\r\n  }, [disabled, disabledMessage, waveformData]);\r\n\r\n  return (\r\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\r\n      {showTimestamps && (\r\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\r\n      )}\r\n      <div\r\n        ref={containerRef}\r\n        className=\"proton-Waveform__container\"\r\n        onMouseMove={handleMouseMove}\r\n        onMouseLeave={handleMouseLeave}\r\n        onClick={(e) => {\r\n          if (!containerRef.current || disabled) return;\r\n          const rect = containerRef.current.getBoundingClientRect();\r\n          const x = e.clientX - rect.left;\r\n          const position = (x / rect.width) * totalDuration;\r\n          onClick?.(position, e);\r\n        }}\r\n        data-disabled={disabled}\r\n        data-testid=\"waveform-container\"\r\n      >\r\n        {startDuration !== undefined && endDuration !== undefined && (\r\n          <div\r\n            className=\"proton-Waveform__active-region\"\r\n            style={{\r\n              left: containerRef.current\r\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\r\n                : \"0%\",\r\n              right: containerRef.current\r\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\r\n                : \"0%\",\r\n            }}\r\n          />\r\n        )}\r\n        {hoverPosition !== null && (\r\n          <div\r\n            className=\"proton-Waveform__hover-line\"\r\n            style={{\r\n              left: `${(hoverPosition / totalDuration) * 100}%`,\r\n            }}\r\n          />\r\n        )}\r\n        {processedWaveform.map((amplitude, index) => {\r\n          const position = (index / processedWaveform.length) * totalDuration;\r\n          const isBarOutsideActiveRegion =\r\n            startDuration !== undefined &&\r\n            endDuration !== undefined &&\r\n            (position < startDuration || position > endDuration);\r\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\r\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\r\n\r\n          return (\r\n            <WaveformBar\r\n              key={index}\r\n              amplitude={amplitude}\r\n              isDisabled={disabled || isBarOutsideActiveRegion}\r\n              isPlayed={isPlayed}\r\n              isHovered={isHovered}\r\n              isVisible={isVisible}\r\n              hasAnimated={hasAnimated}\r\n              resolution={resolution}\r\n              spacing={spacing}\r\n              index={index}\r\n            />\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      {waveformMessage && (\r\n        <div\r\n          className=\"proton-Waveform__bar-unavailable\"\r\n          style={{\r\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\r\n          }}\r\n        >\r\n          {waveformMessage}\r\n        </div>\r\n      )}\r\n\r\n      {showTimestamps && (\r\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction TimestampBlock({\r\n  direction,\r\n  seconds,\r\n}: {\r\n  direction: \"left\" | \"right\";\r\n  seconds: number;\r\n}) {\r\n  return (\r\n    <div\r\n      className={csx(\r\n        \"proton-Waveform__timestamp\",\r\n        `proton-Waveform__timestamp--${direction}`\r\n      )}\r\n    >\r\n      {formatTimestamp(seconds)}\r\n    </div>\r\n  );\r\n}\r\n\r\n/** Formats seconds into MM:SS timestamp string\r\n * @param {number} seconds - Number of seconds to format\r\n * @returns {string} Formatted timestamp string in MM:SS format\r\n */\r\n\r\nfunction formatTimestamp(seconds: number) {\r\n  const minutes = Math.floor(seconds / 60);\r\n  const remainingSeconds = Math.floor(seconds % 60);\r\n  return `${minutes}:${\r\n    remainingSeconds < 10 ? \"0\" : \"\"\r\n  }${remainingSeconds.toFixed(0)}`;\r\n}\r\n\r\n/** Takes an array of waveform data and rescales it to any length\r\n * @param {array} initialData - original waveform data\r\n * @param {number} finalArrayLength - How long do you want the returned array?\r\n * @param {number} height - Height of the waveform container\r\n */\r\n\r\nfunction resampleData(initialData: number[], finalArrayLength: number) {\r\n  const initialArrayLength = initialData.length;\r\n  // How many samples from the original data do we skip per new sample?\r\n  const step = initialArrayLength / finalArrayLength;\r\n\r\n  // Create new array with desired length\r\n  const resampledData = new Array(finalArrayLength)\r\n    .fill(0)\r\n    .map((_, newIndex) => {\r\n      // Calculate position in original array\r\n      const position = newIndex * step;\r\n      const leftIndex = Math.floor(position);\r\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\r\n\r\n      // Calculate weights for interpolation\r\n      const fraction = position - leftIndex;\r\n\r\n      // Linear interpolation between adjacent samples\r\n      const newVal =\r\n        initialData[leftIndex] * (1 - fraction) +\r\n        initialData[rightIndex] * fraction;\r\n\r\n      return newVal;\r\n    });\r\n\r\n  return scaleData(resampledData);\r\n}\r\n\r\n/** Takes an array of waveform data and scales it based on the desired pixel height\r\n * @param {array} data – Array of waveform data\r\n * @param {number} height - Height of the waveform container\r\n */\r\nfunction scaleData(data: number[]) {\r\n  const min = Math.min(...data);\r\n  const max = Math.max(...data);\r\n\r\n  return data.map((item) => {\r\n    // Normalize to 0-1 range first\r\n    const normalized = (item - min) / (max - min);\r\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\r\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\r\n  });\r\n}\r\n\r\n/** Generates a sample sine wave waveform data array\r\n * @param {number} length - Length of the waveform data array\r\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\r\n */\r\n\r\nfunction generateSampleWaveformData(length: number) {\r\n  return Array.from({ length }, (_, i) => {\r\n    const cycles = 6;\r\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\r\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\r\n    return Math.sin(phase) * 0.5 + 0.5;\r\n  });\r\n}\r\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","_","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","i","phase"],"mappings":"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"}
+{"version":3,"file":"Waveform.cjs.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { csx } from \"../../utils\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Waveform.css\";\nimport { WaveformBar } from \"./WaveformBar\";\n\nexport interface WaveformProps {\n  /**\n   * Array of normalized amplitude values (0-1) representing the waveform.\n   * If not provided, uses a sample sine wave.\n   */\n  data?: number[];\n\n  /**\n   * Current playback position in seconds.\n   */\n  currentTime?: number;\n\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n\n  /**\n   * Whether the entire waveform is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Reason for the waveform being disabled.\n   */\n  disabledMessage?: string;\n\n  /**\n   * End time to display until in seconds.\n   */\n  endDuration?: number;\n\n  /**\n   * Click handler that receives the clicked position (0-1) and event.\n   */\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Width in pixels of each waveform bar.\n   */\n  resolution?: number;\n\n  /**\n   * Whether to show timestamp markers.\n   */\n  showTimestamps?: boolean;\n\n  /**\n   * Start time to display from in seconds.\n   */\n  startDuration?: number;\n\n  /**\n   * Total duration of the audio in seconds.\n   */\n  totalDuration: number;\n}\n\nconst sampleWaveform = generateSampleWaveformData(100);\n\n/**\n * A waveform visualization component that displays audio data with interactive features.\n *\n * API:\n *  - {@link WaveformProps}\n */\nexport function Waveform({\n  data: waveformData,\n  resolution = 2,\n  startDuration,\n  endDuration,\n  currentTime = 0,\n  showTimestamps = false,\n  totalDuration,\n  disabled,\n  disabledMessage,\n  onClick,\n  \"data-testid\": testId,\n}: WaveformProps) {\n  const { className } = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasAnimated, setHasAnimated] = useState(false);\n\n  const waveform = waveformData || sampleWaveform;\n\n  const spacing = resolution;\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const processWaveform = (width: number) => {\n      const numBars = Math.floor(width / (resolution + spacing));\n      const processed = resampleData(waveform, numBars);\n      setProcessedWaveform(processed);\n    };\n\n    const initialWidth = containerRef.current.clientWidth;\n    processWaveform(initialWidth);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (entries && entries[0]) {\n        processWaveform(entries[0].contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [waveform, resolution, spacing]);\n\n  useEffect(() => {\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\n\n    return () => {\n      clearTimeout(visibilityTimer);\n      clearTimeout(animationTimer);\n    };\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const position = (x / rect.width) * totalDuration;\n    setHoverPosition(position);\n  };\n\n  const handleMouseLeave = () => {\n    setHoverPosition(null);\n  };\n\n  // Calculate the width of a single bar including spacing\n  const barTotalWidth = resolution + spacing;\n\n  // Find the nearest bar boundaries for start and end durations\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\n    const position = (time / totalDuration) * 100;\n    const barIndex =\n      direction === \"start\"\n        ? Math.floor((position / 100) * processedWaveform.length)\n        : Math.ceil((position / 100) * processedWaveform.length);\n\n    return (\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\n    );\n  };\n\n  const containerWidth = containerRef.current?.clientWidth;\n  const waveformMessage = useMemo(() => {\n    if (disabled && disabledMessage) return disabledMessage;\n    if (!waveformData) return \"Waveform Unavailable\";\n\n    return null;\n  }, [disabled, disabledMessage, waveformData]);\n\n  return (\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\n      {showTimestamps && (\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\n      )}\n      <div\n        ref={containerRef}\n        className=\"proton-Waveform__container\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onClick={(e) => {\n          if (!containerRef.current || disabled) return;\n          const rect = containerRef.current.getBoundingClientRect();\n          const x = e.clientX - rect.left;\n          const position = (x / rect.width) * totalDuration;\n          onClick?.(position, e);\n        }}\n        data-disabled={disabled}\n        data-testid=\"waveform-container\"\n      >\n        {startDuration !== undefined && endDuration !== undefined && (\n          <div\n            className=\"proton-Waveform__active-region\"\n            style={{\n              left: containerRef.current\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\n                : \"0%\",\n              right: containerRef.current\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\n                : \"0%\",\n            }}\n          />\n        )}\n        {hoverPosition !== null && (\n          <div\n            className=\"proton-Waveform__hover-line\"\n            style={{\n              left: `${(hoverPosition / totalDuration) * 100}%`,\n            }}\n          />\n        )}\n        {processedWaveform.map((amplitude, index) => {\n          const position = (index / processedWaveform.length) * totalDuration;\n          const isBarOutsideActiveRegion =\n            startDuration !== undefined &&\n            endDuration !== undefined &&\n            (position < startDuration || position > endDuration);\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\n\n          return (\n            <WaveformBar\n              key={index}\n              amplitude={amplitude}\n              isDisabled={disabled || isBarOutsideActiveRegion}\n              isPlayed={isPlayed}\n              isHovered={isHovered}\n              isVisible={isVisible}\n              hasAnimated={hasAnimated}\n              resolution={resolution}\n              spacing={spacing}\n              index={index}\n            />\n          );\n        })}\n      </div>\n\n      {waveformMessage && (\n        <div\n          className=\"proton-Waveform__bar-unavailable\"\n          style={{\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\n          }}\n        >\n          {waveformMessage}\n        </div>\n      )}\n\n      {showTimestamps && (\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\n      )}\n    </div>\n  );\n}\n\nfunction TimestampBlock({\n  direction,\n  seconds,\n}: {\n  direction: \"left\" | \"right\";\n  seconds: number;\n}) {\n  return (\n    <div\n      className={csx(\n        \"proton-Waveform__timestamp\",\n        `proton-Waveform__timestamp--${direction}`\n      )}\n    >\n      {formatTimestamp(seconds)}\n    </div>\n  );\n}\n\n/** Formats seconds into MM:SS timestamp string\n * @param {number} seconds - Number of seconds to format\n * @returns {string} Formatted timestamp string in MM:SS format\n */\n\nfunction formatTimestamp(seconds: number) {\n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  return `${minutes}:${\n    remainingSeconds < 10 ? \"0\" : \"\"\n  }${remainingSeconds.toFixed(0)}`;\n}\n\n/** Takes an array of waveform data and rescales it to any length\n * @param {array} initialData - original waveform data\n * @param {number} finalArrayLength - How long do you want the returned array?\n * @param {number} height - Height of the waveform container\n */\n\nfunction resampleData(initialData: number[], finalArrayLength: number) {\n  const initialArrayLength = initialData.length;\n  // How many samples from the original data do we skip per new sample?\n  const step = initialArrayLength / finalArrayLength;\n\n  // Create new array with desired length\n  const resampledData = new Array(finalArrayLength)\n    .fill(0)\n    .map((_, newIndex) => {\n      // Calculate position in original array\n      const position = newIndex * step;\n      const leftIndex = Math.floor(position);\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\n\n      // Calculate weights for interpolation\n      const fraction = position - leftIndex;\n\n      // Linear interpolation between adjacent samples\n      const newVal =\n        initialData[leftIndex] * (1 - fraction) +\n        initialData[rightIndex] * fraction;\n\n      return newVal;\n    });\n\n  return scaleData(resampledData);\n}\n\n/** Takes an array of waveform data and scales it based on the desired pixel height\n * @param {array} data – Array of waveform data\n * @param {number} height - Height of the waveform container\n */\nfunction scaleData(data: number[]) {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n\n  return data.map((item) => {\n    // Normalize to 0-1 range first\n    const normalized = (item - min) / (max - min);\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\n  });\n}\n\n/** Generates a sample sine wave waveform data array\n * @param {number} length - Length of the waveform data array\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\n */\n\nfunction generateSampleWaveformData(length: number) {\n  return Array.from({ length }, (_, i) => {\n    const cycles = 6;\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\n    return Math.sin(phase) * 0.5 + 0.5;\n  });\n}\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","_","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","i","phase"],"mappings":"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"}

package/dist/components/Waveform/Waveform.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Waveform.es.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useEffect, useMemo, useRef, useState } from \"react\";\r\nimport { csx } from \"../../utils\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport \"./Waveform.css\";\r\nimport { WaveformBar } from \"./WaveformBar\";\r\n\r\nexport interface WaveformProps {\r\n  /**\r\n   * Array of normalized amplitude values (0-1) representing the waveform.\r\n   * If not provided, uses a sample sine wave.\r\n   */\r\n  data?: number[];\r\n\r\n  /**\r\n   * Current playback position in seconds.\r\n   */\r\n  currentTime?: number;\r\n\r\n  /**\r\n   * Test ID for testing purposes.\r\n   */\r\n  \"data-testid\"?: string;\r\n\r\n  /**\r\n   * Whether the entire waveform is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Reason for the waveform being disabled.\r\n   */\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * End time to display until in seconds.\r\n   */\r\n  endDuration?: number;\r\n\r\n  /**\r\n   * Click handler that receives the clicked position (0-1) and event.\r\n   */\r\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\r\n\r\n  /**\r\n   * Width in pixels of each waveform bar.\r\n   */\r\n  resolution?: number;\r\n\r\n  /**\r\n   * Whether to show timestamp markers.\r\n   */\r\n  showTimestamps?: boolean;\r\n\r\n  /**\r\n   * Start time to display from in seconds.\r\n   */\r\n  startDuration?: number;\r\n\r\n  /**\r\n   * Total duration of the audio in seconds.\r\n   */\r\n  totalDuration: number;\r\n}\r\n\r\nconst sampleWaveform = generateSampleWaveformData(100);\r\n\r\n/**\r\n * A waveform visualization component that displays audio data with interactive features.\r\n *\r\n * API:\r\n *  - {@link WaveformProps}\r\n */\r\nexport function Waveform({\r\n  data: waveformData,\r\n  resolution = 2,\r\n  startDuration,\r\n  endDuration,\r\n  currentTime = 0,\r\n  showTimestamps = false,\r\n  totalDuration,\r\n  disabled,\r\n  disabledMessage,\r\n  onClick,\r\n  \"data-testid\": testId,\r\n}: WaveformProps) {\r\n  const { className } = useTheme();\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\r\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const [hasAnimated, setHasAnimated] = useState(false);\r\n\r\n  const waveform = waveformData || sampleWaveform;\r\n\r\n  const spacing = resolution;\r\n\r\n  useEffect(() => {\r\n    if (!containerRef.current) return;\r\n\r\n    const processWaveform = (width: number) => {\r\n      const numBars = Math.floor(width / (resolution + spacing));\r\n      const processed = resampleData(waveform, numBars);\r\n      setProcessedWaveform(processed);\r\n    };\r\n\r\n    const initialWidth = containerRef.current.clientWidth;\r\n    processWaveform(initialWidth);\r\n\r\n    const resizeObserver = new ResizeObserver((entries) => {\r\n      if (entries && entries[0]) {\r\n        processWaveform(entries[0].contentRect.width);\r\n      }\r\n    });\r\n\r\n    resizeObserver.observe(containerRef.current);\r\n\r\n    return () => resizeObserver.disconnect();\r\n  }, [waveform, resolution, spacing]);\r\n\r\n  useEffect(() => {\r\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\r\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\r\n\r\n    return () => {\r\n      clearTimeout(visibilityTimer);\r\n      clearTimeout(animationTimer);\r\n    };\r\n  }, []);\r\n\r\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (!containerRef.current) return;\r\n    const rect = containerRef.current.getBoundingClientRect();\r\n    const x = e.clientX - rect.left;\r\n    const position = (x / rect.width) * totalDuration;\r\n    setHoverPosition(position);\r\n  };\r\n\r\n  const handleMouseLeave = () => {\r\n    setHoverPosition(null);\r\n  };\r\n\r\n  // Calculate the width of a single bar including spacing\r\n  const barTotalWidth = resolution + spacing;\r\n\r\n  // Find the nearest bar boundaries for start and end durations\r\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\r\n    const position = (time / totalDuration) * 100;\r\n    const barIndex =\r\n      direction === \"start\"\r\n        ? Math.floor((position / 100) * processedWaveform.length)\r\n        : Math.ceil((position / 100) * processedWaveform.length);\r\n\r\n    return (\r\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\r\n    );\r\n  };\r\n\r\n  const containerWidth = containerRef.current?.clientWidth;\r\n  const waveformMessage = useMemo(() => {\r\n    if (disabled && disabledMessage) return disabledMessage;\r\n    if (!waveformData) return \"Waveform Unavailable\";\r\n\r\n    return null;\r\n  }, [disabled, disabledMessage, waveformData]);\r\n\r\n  return (\r\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\r\n      {showTimestamps && (\r\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\r\n      )}\r\n      <div\r\n        ref={containerRef}\r\n        className=\"proton-Waveform__container\"\r\n        onMouseMove={handleMouseMove}\r\n        onMouseLeave={handleMouseLeave}\r\n        onClick={(e) => {\r\n          if (!containerRef.current || disabled) return;\r\n          const rect = containerRef.current.getBoundingClientRect();\r\n          const x = e.clientX - rect.left;\r\n          const position = (x / rect.width) * totalDuration;\r\n          onClick?.(position, e);\r\n        }}\r\n        data-disabled={disabled}\r\n        data-testid=\"waveform-container\"\r\n      >\r\n        {startDuration !== undefined && endDuration !== undefined && (\r\n          <div\r\n            className=\"proton-Waveform__active-region\"\r\n            style={{\r\n              left: containerRef.current\r\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\r\n                : \"0%\",\r\n              right: containerRef.current\r\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\r\n                : \"0%\",\r\n            }}\r\n          />\r\n        )}\r\n        {hoverPosition !== null && (\r\n          <div\r\n            className=\"proton-Waveform__hover-line\"\r\n            style={{\r\n              left: `${(hoverPosition / totalDuration) * 100}%`,\r\n            }}\r\n          />\r\n        )}\r\n        {processedWaveform.map((amplitude, index) => {\r\n          const position = (index / processedWaveform.length) * totalDuration;\r\n          const isBarOutsideActiveRegion =\r\n            startDuration !== undefined &&\r\n            endDuration !== undefined &&\r\n            (position < startDuration || position > endDuration);\r\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\r\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\r\n\r\n          return (\r\n            <WaveformBar\r\n              key={index}\r\n              amplitude={amplitude}\r\n              isDisabled={disabled || isBarOutsideActiveRegion}\r\n              isPlayed={isPlayed}\r\n              isHovered={isHovered}\r\n              isVisible={isVisible}\r\n              hasAnimated={hasAnimated}\r\n              resolution={resolution}\r\n              spacing={spacing}\r\n              index={index}\r\n            />\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      {waveformMessage && (\r\n        <div\r\n          className=\"proton-Waveform__bar-unavailable\"\r\n          style={{\r\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\r\n          }}\r\n        >\r\n          {waveformMessage}\r\n        </div>\r\n      )}\r\n\r\n      {showTimestamps && (\r\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction TimestampBlock({\r\n  direction,\r\n  seconds,\r\n}: {\r\n  direction: \"left\" | \"right\";\r\n  seconds: number;\r\n}) {\r\n  return (\r\n    <div\r\n      className={csx(\r\n        \"proton-Waveform__timestamp\",\r\n        `proton-Waveform__timestamp--${direction}`\r\n      )}\r\n    >\r\n      {formatTimestamp(seconds)}\r\n    </div>\r\n  );\r\n}\r\n\r\n/** Formats seconds into MM:SS timestamp string\r\n * @param {number} seconds - Number of seconds to format\r\n * @returns {string} Formatted timestamp string in MM:SS format\r\n */\r\n\r\nfunction formatTimestamp(seconds: number) {\r\n  const minutes = Math.floor(seconds / 60);\r\n  const remainingSeconds = Math.floor(seconds % 60);\r\n  return `${minutes}:${\r\n    remainingSeconds < 10 ? \"0\" : \"\"\r\n  }${remainingSeconds.toFixed(0)}`;\r\n}\r\n\r\n/** Takes an array of waveform data and rescales it to any length\r\n * @param {array} initialData - original waveform data\r\n * @param {number} finalArrayLength - How long do you want the returned array?\r\n * @param {number} height - Height of the waveform container\r\n */\r\n\r\nfunction resampleData(initialData: number[], finalArrayLength: number) {\r\n  const initialArrayLength = initialData.length;\r\n  // How many samples from the original data do we skip per new sample?\r\n  const step = initialArrayLength / finalArrayLength;\r\n\r\n  // Create new array with desired length\r\n  const resampledData = new Array(finalArrayLength)\r\n    .fill(0)\r\n    .map((_, newIndex) => {\r\n      // Calculate position in original array\r\n      const position = newIndex * step;\r\n      const leftIndex = Math.floor(position);\r\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\r\n\r\n      // Calculate weights for interpolation\r\n      const fraction = position - leftIndex;\r\n\r\n      // Linear interpolation between adjacent samples\r\n      const newVal =\r\n        initialData[leftIndex] * (1 - fraction) +\r\n        initialData[rightIndex] * fraction;\r\n\r\n      return newVal;\r\n    });\r\n\r\n  return scaleData(resampledData);\r\n}\r\n\r\n/** Takes an array of waveform data and scales it based on the desired pixel height\r\n * @param {array} data – Array of waveform data\r\n * @param {number} height - Height of the waveform container\r\n */\r\nfunction scaleData(data: number[]) {\r\n  const min = Math.min(...data);\r\n  const max = Math.max(...data);\r\n\r\n  return data.map((item) => {\r\n    // Normalize to 0-1 range first\r\n    const normalized = (item - min) / (max - min);\r\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\r\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\r\n  });\r\n}\r\n\r\n/** Generates a sample sine wave waveform data array\r\n * @param {number} length - Length of the waveform data array\r\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\r\n */\r\n\r\nfunction generateSampleWaveformData(length: number) {\r\n  return Array.from({ length }, (_, i) => {\r\n    const cycles = 6;\r\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\r\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\r\n    return Math.sin(phase) * 0.5 + 0.5;\r\n  });\r\n}\r\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","_","i","phase"],"mappings":"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"}
+{"version":3,"file":"Waveform.es.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { csx } from \"../../utils\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Waveform.css\";\nimport { WaveformBar } from \"./WaveformBar\";\n\nexport interface WaveformProps {\n  /**\n   * Array of normalized amplitude values (0-1) representing the waveform.\n   * If not provided, uses a sample sine wave.\n   */\n  data?: number[];\n\n  /**\n   * Current playback position in seconds.\n   */\n  currentTime?: number;\n\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n\n  /**\n   * Whether the entire waveform is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Reason for the waveform being disabled.\n   */\n  disabledMessage?: string;\n\n  /**\n   * End time to display until in seconds.\n   */\n  endDuration?: number;\n\n  /**\n   * Click handler that receives the clicked position (0-1) and event.\n   */\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Width in pixels of each waveform bar.\n   */\n  resolution?: number;\n\n  /**\n   * Whether to show timestamp markers.\n   */\n  showTimestamps?: boolean;\n\n  /**\n   * Start time to display from in seconds.\n   */\n  startDuration?: number;\n\n  /**\n   * Total duration of the audio in seconds.\n   */\n  totalDuration: number;\n}\n\nconst sampleWaveform = generateSampleWaveformData(100);\n\n/**\n * A waveform visualization component that displays audio data with interactive features.\n *\n * API:\n *  - {@link WaveformProps}\n */\nexport function Waveform({\n  data: waveformData,\n  resolution = 2,\n  startDuration,\n  endDuration,\n  currentTime = 0,\n  showTimestamps = false,\n  totalDuration,\n  disabled,\n  disabledMessage,\n  onClick,\n  \"data-testid\": testId,\n}: WaveformProps) {\n  const { className } = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasAnimated, setHasAnimated] = useState(false);\n\n  const waveform = waveformData || sampleWaveform;\n\n  const spacing = resolution;\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const processWaveform = (width: number) => {\n      const numBars = Math.floor(width / (resolution + spacing));\n      const processed = resampleData(waveform, numBars);\n      setProcessedWaveform(processed);\n    };\n\n    const initialWidth = containerRef.current.clientWidth;\n    processWaveform(initialWidth);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (entries && entries[0]) {\n        processWaveform(entries[0].contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [waveform, resolution, spacing]);\n\n  useEffect(() => {\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\n\n    return () => {\n      clearTimeout(visibilityTimer);\n      clearTimeout(animationTimer);\n    };\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const position = (x / rect.width) * totalDuration;\n    setHoverPosition(position);\n  };\n\n  const handleMouseLeave = () => {\n    setHoverPosition(null);\n  };\n\n  // Calculate the width of a single bar including spacing\n  const barTotalWidth = resolution + spacing;\n\n  // Find the nearest bar boundaries for start and end durations\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\n    const position = (time / totalDuration) * 100;\n    const barIndex =\n      direction === \"start\"\n        ? Math.floor((position / 100) * processedWaveform.length)\n        : Math.ceil((position / 100) * processedWaveform.length);\n\n    return (\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\n    );\n  };\n\n  const containerWidth = containerRef.current?.clientWidth;\n  const waveformMessage = useMemo(() => {\n    if (disabled && disabledMessage) return disabledMessage;\n    if (!waveformData) return \"Waveform Unavailable\";\n\n    return null;\n  }, [disabled, disabledMessage, waveformData]);\n\n  return (\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\n      {showTimestamps && (\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\n      )}\n      <div\n        ref={containerRef}\n        className=\"proton-Waveform__container\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onClick={(e) => {\n          if (!containerRef.current || disabled) return;\n          const rect = containerRef.current.getBoundingClientRect();\n          const x = e.clientX - rect.left;\n          const position = (x / rect.width) * totalDuration;\n          onClick?.(position, e);\n        }}\n        data-disabled={disabled}\n        data-testid=\"waveform-container\"\n      >\n        {startDuration !== undefined && endDuration !== undefined && (\n          <div\n            className=\"proton-Waveform__active-region\"\n            style={{\n              left: containerRef.current\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\n                : \"0%\",\n              right: containerRef.current\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\n                : \"0%\",\n            }}\n          />\n        )}\n        {hoverPosition !== null && (\n          <div\n            className=\"proton-Waveform__hover-line\"\n            style={{\n              left: `${(hoverPosition / totalDuration) * 100}%`,\n            }}\n          />\n        )}\n        {processedWaveform.map((amplitude, index) => {\n          const position = (index / processedWaveform.length) * totalDuration;\n          const isBarOutsideActiveRegion =\n            startDuration !== undefined &&\n            endDuration !== undefined &&\n            (position < startDuration || position > endDuration);\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\n\n          return (\n            <WaveformBar\n              key={index}\n              amplitude={amplitude}\n              isDisabled={disabled || isBarOutsideActiveRegion}\n              isPlayed={isPlayed}\n              isHovered={isHovered}\n              isVisible={isVisible}\n              hasAnimated={hasAnimated}\n              resolution={resolution}\n              spacing={spacing}\n              index={index}\n            />\n          );\n        })}\n      </div>\n\n      {waveformMessage && (\n        <div\n          className=\"proton-Waveform__bar-unavailable\"\n          style={{\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\n          }}\n        >\n          {waveformMessage}\n        </div>\n      )}\n\n      {showTimestamps && (\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\n      )}\n    </div>\n  );\n}\n\nfunction TimestampBlock({\n  direction,\n  seconds,\n}: {\n  direction: \"left\" | \"right\";\n  seconds: number;\n}) {\n  return (\n    <div\n      className={csx(\n        \"proton-Waveform__timestamp\",\n        `proton-Waveform__timestamp--${direction}`\n      )}\n    >\n      {formatTimestamp(seconds)}\n    </div>\n  );\n}\n\n/** Formats seconds into MM:SS timestamp string\n * @param {number} seconds - Number of seconds to format\n * @returns {string} Formatted timestamp string in MM:SS format\n */\n\nfunction formatTimestamp(seconds: number) {\n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  return `${minutes}:${\n    remainingSeconds < 10 ? \"0\" : \"\"\n  }${remainingSeconds.toFixed(0)}`;\n}\n\n/** Takes an array of waveform data and rescales it to any length\n * @param {array} initialData - original waveform data\n * @param {number} finalArrayLength - How long do you want the returned array?\n * @param {number} height - Height of the waveform container\n */\n\nfunction resampleData(initialData: number[], finalArrayLength: number) {\n  const initialArrayLength = initialData.length;\n  // How many samples from the original data do we skip per new sample?\n  const step = initialArrayLength / finalArrayLength;\n\n  // Create new array with desired length\n  const resampledData = new Array(finalArrayLength)\n    .fill(0)\n    .map((_, newIndex) => {\n      // Calculate position in original array\n      const position = newIndex * step;\n      const leftIndex = Math.floor(position);\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\n\n      // Calculate weights for interpolation\n      const fraction = position - leftIndex;\n\n      // Linear interpolation between adjacent samples\n      const newVal =\n        initialData[leftIndex] * (1 - fraction) +\n        initialData[rightIndex] * fraction;\n\n      return newVal;\n    });\n\n  return scaleData(resampledData);\n}\n\n/** Takes an array of waveform data and scales it based on the desired pixel height\n * @param {array} data – Array of waveform data\n * @param {number} height - Height of the waveform container\n */\nfunction scaleData(data: number[]) {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n\n  return data.map((item) => {\n    // Normalize to 0-1 range first\n    const normalized = (item - min) / (max - min);\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\n  });\n}\n\n/** Generates a sample sine wave waveform data array\n * @param {number} length - Length of the waveform data array\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\n */\n\nfunction generateSampleWaveformData(length: number) {\n  return Array.from({ length }, (_, i) => {\n    const cycles = 6;\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\n    return Math.sin(phase) * 0.5 + 0.5;\n  });\n}\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","_","i","phase"],"mappings":"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"}

package/dist/components/Waveform/WaveformBar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"WaveformBar.cjs.js","sources":["../../../src/components/Waveform/WaveformBar.tsx"],"sourcesContent":["import { csx } from \"../../utils\";\r\n\r\ninterface WaveformBarProps {\r\n  amplitude: number;\r\n  isDisabled: boolean;\r\n  isPlayed: boolean;\r\n  isHovered: boolean;\r\n  isVisible: boolean;\r\n  hasAnimated: boolean;\r\n  resolution: number;\r\n  spacing: number;\r\n  index: number;\r\n}\r\n\r\nexport function WaveformBar({\r\n  amplitude,\r\n  isDisabled,\r\n  isPlayed,\r\n  isHovered,\r\n  isVisible,\r\n  hasAnimated,\r\n  resolution,\r\n  spacing,\r\n  index,\r\n}: WaveformBarProps) {\r\n  const barHeight = isVisible ? `${Math.max(amplitude * 100, 4)}%` : \"0%\";\r\n\r\n  return (\r\n    <div\r\n      className={csx(\"proton-Waveform__bar-wrapper\")}\r\n      style={{\r\n        width: `${resolution}px`,\r\n        marginRight: `${spacing}px`,\r\n      }}\r\n    >\r\n      <div\r\n        className={csx(\r\n          \"proton-Waveform__bar\",\r\n          \"proton-Waveform__bar--upper\",\r\n          isDisabled && \"proton-Waveform__bar--disabled\",\r\n          isPlayed && \"proton-Waveform__bar--played\",\r\n          isVisible && \"proton-Waveform__bar--visible\",\r\n          hasAnimated && \"proton-Waveform__bar--animated\"\r\n        )}\r\n        style={\r\n          {\r\n            \"--target-height\": `calc(${barHeight} / 2)`,\r\n            \"--index\": index,\r\n          } as React.CSSProperties\r\n        }\r\n      />\r\n      <div\r\n        className={csx(\r\n          \"proton-Waveform__bar\",\r\n          \"proton-Waveform__bar--lower\",\r\n          isDisabled && \"proton-Waveform__bar--disabled\",\r\n          isPlayed && \"proton-Waveform__bar--played\",\r\n          isVisible && \"proton-Waveform__bar--visible\",\r\n          hasAnimated && \"proton-Waveform__bar--animated\"\r\n        )}\r\n        style={\r\n          {\r\n            \"--target-height\": `calc(${barHeight} / 2)`,\r\n            \"--index\": index,\r\n          } as React.CSSProperties\r\n        }\r\n      />\r\n      {isHovered && !isDisabled && !isPlayed && (\r\n        <div\r\n          className=\"proton-Waveform__bar--hover\"\r\n          style={\r\n            {\r\n              \"--hover-height\": barHeight,\r\n            } as React.CSSProperties\r\n          }\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["WaveformBar","amplitude","isDisabled","isPlayed","isHovered","isVisible","hasAnimated","resolution","spacing","index","barHeight","jsxs","csx","jsx"],"mappings":"sLAcO,SAASA,EAAY,CAC1B,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EACA,WAAAC,EACA,QAAAC,EACA,MAAAC,CACF,EAAqB,CACb,MAAAC,EAAYL,EAAY,GAAG,KAAK,IAAIJ,EAAY,IAAK,CAAC,CAAC,IAAM,KAGjE,OAAAU,EAAA,kBAAA,KAAC,MAAA,CACC,UAAWC,MAAI,8BAA8B,EAC7C,MAAO,CACL,MAAO,GAAGL,CAAU,KACpB,YAAa,GAAGC,CAAO,IACzB,EAEA,SAAA,CAAAK,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWD,EAAA,IACT,uBACA,8BACAV,GAAc,iCACdC,GAAY,+BACZE,GAAa,gCACbC,GAAe,gCACjB,EACA,MACE,CACE,kBAAmB,QAAQI,CAAS,QACpC,UAAWD,CACb,CAAA,CAEJ,EACAI,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWD,EAAA,IACT,uBACA,8BACAV,GAAc,iCACdC,GAAY,+BACZE,GAAa,gCACbC,GAAe,gCACjB,EACA,MACE,CACE,kBAAmB,QAAQI,CAAS,QACpC,UAAWD,CACb,CAAA,CAEJ,EACCL,GAAa,CAACF,GAAc,CAACC,GAC5BU,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,MACE,CACE,iBAAkBH,CACpB,CAAA,CAEJ,CAAA,CAAA,CAAA,CAIR"}
+{"version":3,"file":"WaveformBar.cjs.js","sources":["../../../src/components/Waveform/WaveformBar.tsx"],"sourcesContent":["import { csx } from \"../../utils\";\n\ninterface WaveformBarProps {\n  amplitude: number;\n  isDisabled: boolean;\n  isPlayed: boolean;\n  isHovered: boolean;\n  isVisible: boolean;\n  hasAnimated: boolean;\n  resolution: number;\n  spacing: number;\n  index: number;\n}\n\nexport function WaveformBar({\n  amplitude,\n  isDisabled,\n  isPlayed,\n  isHovered,\n  isVisible,\n  hasAnimated,\n  resolution,\n  spacing,\n  index,\n}: WaveformBarProps) {\n  const barHeight = isVisible ? `${Math.max(amplitude * 100, 4)}%` : \"0%\";\n\n  return (\n    <div\n      className={csx(\"proton-Waveform__bar-wrapper\")}\n      style={{\n        width: `${resolution}px`,\n        marginRight: `${spacing}px`,\n      }}\n    >\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--upper\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--lower\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      {isHovered && !isDisabled && !isPlayed && (\n        <div\n          className=\"proton-Waveform__bar--hover\"\n          style={\n            {\n              \"--hover-height\": barHeight,\n            } as React.CSSProperties\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["WaveformBar","amplitude","isDisabled","isPlayed","isHovered","isVisible","hasAnimated","resolution","spacing","index","barHeight","jsxs","csx","jsx"],"mappings":"sLAcO,SAASA,EAAY,CAC1B,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EACA,WAAAC,EACA,QAAAC,EACA,MAAAC,CACF,EAAqB,CACnB,MAAMC,EAAYL,EAAY,GAAG,KAAK,IAAIJ,EAAY,IAAK,CAAC,CAAC,IAAM,KAEnE,OACEU,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,IAAI,8BAA8B,EAC7C,MAAO,CACL,MAAO,GAAGL,CAAU,KACpB,YAAa,GAAGC,CAAO,IAAA,EAGzB,SAAA,CAAAK,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWD,EAAAA,IACT,uBACA,8BACAV,GAAc,iCACdC,GAAY,+BACZE,GAAa,gCACbC,GAAe,gCAAA,EAEjB,MACE,CACE,kBAAmB,QAAQI,CAAS,QACpC,UAAWD,CAAA,CACb,CAAA,EAGJI,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWD,EAAAA,IACT,uBACA,8BACAV,GAAc,iCACdC,GAAY,+BACZE,GAAa,gCACbC,GAAe,gCAAA,EAEjB,MACE,CACE,kBAAmB,QAAQI,CAAS,QACpC,UAAWD,CAAA,CACb,CAAA,EAGHL,GAAa,CAACF,GAAc,CAACC,GAC5BU,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,8BACV,MACE,CACE,iBAAkBH,CAAA,CACpB,CAAA,CAEJ,CAAA,CAAA,CAIR"}

package/dist/components/Waveform/WaveformBar.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"WaveformBar.es.js","sources":["../../../src/components/Waveform/WaveformBar.tsx"],"sourcesContent":["import { csx } from \"../../utils\";\r\n\r\ninterface WaveformBarProps {\r\n  amplitude: number;\r\n  isDisabled: boolean;\r\n  isPlayed: boolean;\r\n  isHovered: boolean;\r\n  isVisible: boolean;\r\n  hasAnimated: boolean;\r\n  resolution: number;\r\n  spacing: number;\r\n  index: number;\r\n}\r\n\r\nexport function WaveformBar({\r\n  amplitude,\r\n  isDisabled,\r\n  isPlayed,\r\n  isHovered,\r\n  isVisible,\r\n  hasAnimated,\r\n  resolution,\r\n  spacing,\r\n  index,\r\n}: WaveformBarProps) {\r\n  const barHeight = isVisible ? `${Math.max(amplitude * 100, 4)}%` : \"0%\";\r\n\r\n  return (\r\n    <div\r\n      className={csx(\"proton-Waveform__bar-wrapper\")}\r\n      style={{\r\n        width: `${resolution}px`,\r\n        marginRight: `${spacing}px`,\r\n      }}\r\n    >\r\n      <div\r\n        className={csx(\r\n          \"proton-Waveform__bar\",\r\n          \"proton-Waveform__bar--upper\",\r\n          isDisabled && \"proton-Waveform__bar--disabled\",\r\n          isPlayed && \"proton-Waveform__bar--played\",\r\n          isVisible && \"proton-Waveform__bar--visible\",\r\n          hasAnimated && \"proton-Waveform__bar--animated\"\r\n        )}\r\n        style={\r\n          {\r\n            \"--target-height\": `calc(${barHeight} / 2)`,\r\n            \"--index\": index,\r\n          } as React.CSSProperties\r\n        }\r\n      />\r\n      <div\r\n        className={csx(\r\n          \"proton-Waveform__bar\",\r\n          \"proton-Waveform__bar--lower\",\r\n          isDisabled && \"proton-Waveform__bar--disabled\",\r\n          isPlayed && \"proton-Waveform__bar--played\",\r\n          isVisible && \"proton-Waveform__bar--visible\",\r\n          hasAnimated && \"proton-Waveform__bar--animated\"\r\n        )}\r\n        style={\r\n          {\r\n            \"--target-height\": `calc(${barHeight} / 2)`,\r\n            \"--index\": index,\r\n          } as React.CSSProperties\r\n        }\r\n      />\r\n      {isHovered && !isDisabled && !isPlayed && (\r\n        <div\r\n          className=\"proton-Waveform__bar--hover\"\r\n          style={\r\n            {\r\n              \"--hover-height\": barHeight,\r\n            } as React.CSSProperties\r\n          }\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["WaveformBar","amplitude","isDisabled","isPlayed","isHovered","isVisible","hasAnimated","resolution","spacing","index","barHeight","jsxs","csx","jsx"],"mappings":";;AAcO,SAASA,EAAY;AAAA,EAC1B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AACF,GAAqB;AACb,QAAAC,IAAYL,IAAY,GAAG,KAAK,IAAIJ,IAAY,KAAK,CAAC,CAAC,MAAM;AAGjE,SAAAU,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAI,8BAA8B;AAAA,MAC7C,OAAO;AAAA,QACL,OAAO,GAAGL,CAAU;AAAA,QACpB,aAAa,GAAGC,CAAO;AAAA,MACzB;AAAA,MAEA,UAAA;AAAA,QAAAK,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACAV,KAAc;AAAA,cACdC,KAAY;AAAA,cACZE,KAAa;AAAA,cACbC,KAAe;AAAA,YACjB;AAAA,YACA,OACE;AAAA,cACE,mBAAmB,QAAQI,CAAS;AAAA,cACpC,WAAWD;AAAA,YACb;AAAA,UAAA;AAAA,QAEJ;AAAA,QACAI,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACAV,KAAc;AAAA,cACdC,KAAY;AAAA,cACZE,KAAa;AAAA,cACbC,KAAe;AAAA,YACjB;AAAA,YACA,OACE;AAAA,cACE,mBAAmB,QAAQI,CAAS;AAAA,cACpC,WAAWD;AAAA,YACb;AAAA,UAAA;AAAA,QAEJ;AAAA,QACCL,KAAa,CAACF,KAAc,CAACC,KAC5BU,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OACE;AAAA,cACE,kBAAkBH;AAAA,YACpB;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"WaveformBar.es.js","sources":["../../../src/components/Waveform/WaveformBar.tsx"],"sourcesContent":["import { csx } from \"../../utils\";\n\ninterface WaveformBarProps {\n  amplitude: number;\n  isDisabled: boolean;\n  isPlayed: boolean;\n  isHovered: boolean;\n  isVisible: boolean;\n  hasAnimated: boolean;\n  resolution: number;\n  spacing: number;\n  index: number;\n}\n\nexport function WaveformBar({\n  amplitude,\n  isDisabled,\n  isPlayed,\n  isHovered,\n  isVisible,\n  hasAnimated,\n  resolution,\n  spacing,\n  index,\n}: WaveformBarProps) {\n  const barHeight = isVisible ? `${Math.max(amplitude * 100, 4)}%` : \"0%\";\n\n  return (\n    <div\n      className={csx(\"proton-Waveform__bar-wrapper\")}\n      style={{\n        width: `${resolution}px`,\n        marginRight: `${spacing}px`,\n      }}\n    >\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--upper\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--lower\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      {isHovered && !isDisabled && !isPlayed && (\n        <div\n          className=\"proton-Waveform__bar--hover\"\n          style={\n            {\n              \"--hover-height\": barHeight,\n            } as React.CSSProperties\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["WaveformBar","amplitude","isDisabled","isPlayed","isHovered","isVisible","hasAnimated","resolution","spacing","index","barHeight","jsxs","csx","jsx"],"mappings":";;AAcO,SAASA,EAAY;AAAA,EAC1B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AACF,GAAqB;AACnB,QAAMC,IAAYL,IAAY,GAAG,KAAK,IAAIJ,IAAY,KAAK,CAAC,CAAC,MAAM;AAEnE,SACEU,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAI,8BAA8B;AAAA,MAC7C,OAAO;AAAA,QACL,OAAO,GAAGL,CAAU;AAAA,QACpB,aAAa,GAAGC,CAAO;AAAA,MAAA;AAAA,MAGzB,UAAA;AAAA,QAAAK,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACAV,KAAc;AAAA,cACdC,KAAY;AAAA,cACZE,KAAa;AAAA,cACbC,KAAe;AAAA,YAAA;AAAA,YAEjB,OACE;AAAA,cACE,mBAAmB,QAAQI,CAAS;AAAA,cACpC,WAAWD;AAAA,YAAA;AAAA,UACb;AAAA,QAAA;AAAA,QAGJI,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACAV,KAAc;AAAA,cACdC,KAAY;AAAA,cACZE,KAAa;AAAA,cACbC,KAAe;AAAA,YAAA;AAAA,YAEjB,OACE;AAAA,cACE,mBAAmB,QAAQI,CAAS;AAAA,cACpC,WAAWD;AAAA,YAAA;AAAA,UACb;AAAA,QAAA;AAAA,QAGHL,KAAa,CAACF,KAAc,CAACC,KAC5BU,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OACE;AAAA,cACE,kBAAkBH;AAAA,YAAA;AAAA,UACpB;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/constants/breakpoint.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.cjs.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\r\n  SMALL: 576,\r\n  MEDIUM: 768,\r\n  LARGE: 992,\r\n  X_LARGE: 1200,\r\n};\r\n\r\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\r\n"],"names":["BREAKPOINTS"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}
+{"version":3,"file":"breakpoint.cjs.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  SMALL: 576,\n  MEDIUM: 768,\n  LARGE: 992,\n  X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["BREAKPOINTS"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}

package/dist/constants/breakpoint.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.es.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\r\n  SMALL: 576,\r\n  MEDIUM: 768,\r\n  LARGE: 992,\r\n  X_LARGE: 1200,\r\n};\r\n\r\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\r\n"],"names":["BREAKPOINTS"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}
+{"version":3,"file":"breakpoint.es.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  SMALL: 576,\n  MEDIUM: 768,\n  LARGE: 992,\n  X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["BREAKPOINTS"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}

package/dist/constants/placement.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"placement.cjs.js","sources":["../../src/constants/placement.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\r\n\r\nexport const placements: Placement[] = [\r\n  \"bottom\",\r\n  \"bottom left\",\r\n  \"bottom right\",\r\n  \"bottom start\",\r\n  \"bottom end\",\r\n  \"top\",\r\n  \"top left\",\r\n  \"top right\",\r\n  \"top start\",\r\n  \"top end\",\r\n  \"left\",\r\n  \"left top\",\r\n  \"left bottom\",\r\n  \"start\",\r\n  \"start top\",\r\n  \"start bottom\",\r\n  \"right\",\r\n  \"right top\",\r\n  \"right bottom\",\r\n  \"end\",\r\n  \"end top\",\r\n  \"end bottom\",\r\n];\r\n"],"names":["placements"],"mappings":"gFAEO,MAAMA,EAA0B,CACrC,SACA,cACA,eACA,eACA,aACA,MACA,WACA,YACA,YACA,UACA,OACA,WACA,cACA,QACA,YACA,eACA,QACA,YACA,eACA,MACA,UACA,YACF"}
+{"version":3,"file":"placement.cjs.js","sources":["../../src/constants/placement.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\n\nexport const placements: Placement[] = [\n  \"bottom\",\n  \"bottom left\",\n  \"bottom right\",\n  \"bottom start\",\n  \"bottom end\",\n  \"top\",\n  \"top left\",\n  \"top right\",\n  \"top start\",\n  \"top end\",\n  \"left\",\n  \"left top\",\n  \"left bottom\",\n  \"start\",\n  \"start top\",\n  \"start bottom\",\n  \"right\",\n  \"right top\",\n  \"right bottom\",\n  \"end\",\n  \"end top\",\n  \"end bottom\",\n];\n"],"names":["placements"],"mappings":"gFAEO,MAAMA,EAA0B,CACrC,SACA,cACA,eACA,eACA,aACA,MACA,WACA,YACA,YACA,UACA,OACA,WACA,cACA,QACA,YACA,eACA,QACA,YACA,eACA,MACA,UACA,YACF"}

package/dist/constants/placement.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"placement.es.js","sources":["../../src/constants/placement.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\r\n\r\nexport const placements: Placement[] = [\r\n  \"bottom\",\r\n  \"bottom left\",\r\n  \"bottom right\",\r\n  \"bottom start\",\r\n  \"bottom end\",\r\n  \"top\",\r\n  \"top left\",\r\n  \"top right\",\r\n  \"top start\",\r\n  \"top end\",\r\n  \"left\",\r\n  \"left top\",\r\n  \"left bottom\",\r\n  \"start\",\r\n  \"start top\",\r\n  \"start bottom\",\r\n  \"right\",\r\n  \"right top\",\r\n  \"right bottom\",\r\n  \"end\",\r\n  \"end top\",\r\n  \"end bottom\",\r\n];\r\n"],"names":["placements"],"mappings":"AAEO,MAAMA,IAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
+{"version":3,"file":"placement.es.js","sources":["../../src/constants/placement.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\n\nexport const placements: Placement[] = [\n  \"bottom\",\n  \"bottom left\",\n  \"bottom right\",\n  \"bottom start\",\n  \"bottom end\",\n  \"top\",\n  \"top left\",\n  \"top right\",\n  \"top start\",\n  \"top end\",\n  \"left\",\n  \"left top\",\n  \"left bottom\",\n  \"start\",\n  \"start top\",\n  \"start bottom\",\n  \"right\",\n  \"right top\",\n  \"right bottom\",\n  \"end\",\n  \"end top\",\n  \"end bottom\",\n];\n"],"names":["placements"],"mappings":"AAEO,MAAMA,IAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/design/colors.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs.js","sources":["../../src/design/colors.ts"],"sourcesContent":["import { ProtonColorScale, ProtonPalette } from \"./types\";\r\n\r\n/* Base Colors */\r\n\r\nexport const BACKGROUNDS = {\r\n  BLACK: \"#121212\",\r\n  WHITE: \"#FFFFFF\",\r\n};\r\n\r\nexport const BRAND: ProtonPalette[\"BRAND\"] = {\r\n  PRIMARY: \"#E26014\",\r\n  PRIMARY_LIGHT: \"#FBE5D7\",\r\n  PRIMARY_SUPER_LIGHT: \"#FFF7F0\",\r\n  SECONDARY: \"#2a9edb\",\r\n  SECONDARY_LIGHT: \"#b5d9ff\",\r\n  SECONDARY_SUPER_LIGHT: \"#d9e7fa\",\r\n};\r\n\r\nexport const BRAND_PRIMARY_SCALE: ProtonColorScale = {\r\n  SUPER_DARK: \"#2d1304\",\r\n  DARK: \"#5a2608\",\r\n  MEDIUM: \"#883a0c\",\r\n  MEDIUM_LIGHT: \"#b54d10\",\r\n  LIGHT: \"#e88043\",\r\n  LIGHTEST: \"#eea072\",\r\n  SUPER_LIGHT: \"#f9dfd0\",\r\n  WHITE: \"#fcfbfa\",\r\n};\r\n\r\n/* Semantic Colors */\r\n\r\nexport const DANGER: Partial<ProtonColorScale> = {\r\n  SUPER_DARK: \"#991b1b\",\r\n  DARK: \"#a80724\",\r\n  MEDIUM: \"#e23f5c\",\r\n  LIGHT: \"#f16880\",\r\n  SUPER_LIGHT: \"#ffe1e1\",\r\n};\r\n\r\nexport const WARNING: Partial<ProtonColorScale> = {\r\n  DARK: \"#8b5600\",\r\n  MEDIUM: \"#b37208\",\r\n  LIGHT: \"#ffac23\",\r\n  SUPER_LIGHT: \"#fff0c9\",\r\n};\r\n\r\nexport const SUCCESS: Partial<ProtonColorScale> = {\r\n  DARK: \"#247800\",\r\n  MEDIUM: \"#339a07\",\r\n  LIGHT: \"#66cf39\",\r\n  SUPER_LIGHT: \"#deffd1\",\r\n};\r\n"],"names":["BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE","DANGER","WARNING","SUCCESS"],"mappings":"gFAIO,MAAMA,EAAc,CACzB,MAAO,UACP,MAAO,SACT,EAEaC,EAAgC,CAC3C,QAAS,UACT,cAAe,UACf,oBAAqB,UACrB,UAAW,UACX,gBAAiB,UACjB,sBAAuB,SACzB,EAEaC,EAAwC,CACnD,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAIaC,EAAoC,CAC/C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAqC,CAChD,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAqC,CAChD,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf"}
+{"version":3,"file":"colors.cjs.js","sources":["../../src/design/colors.ts"],"sourcesContent":["import { ProtonColorScale, ProtonPalette } from \"./types\";\n\n/* Base Colors */\n\nexport const BACKGROUNDS = {\n  BLACK: \"#121212\",\n  WHITE: \"#FFFFFF\",\n};\n\nexport const BRAND: ProtonPalette[\"BRAND\"] = {\n  PRIMARY: \"#E26014\",\n  PRIMARY_LIGHT: \"#FBE5D7\",\n  PRIMARY_SUPER_LIGHT: \"#FFF7F0\",\n  SECONDARY: \"#2a9edb\",\n  SECONDARY_LIGHT: \"#b5d9ff\",\n  SECONDARY_SUPER_LIGHT: \"#d9e7fa\",\n};\n\nexport const BRAND_PRIMARY_SCALE: ProtonColorScale = {\n  SUPER_DARK: \"#2d1304\",\n  DARK: \"#5a2608\",\n  MEDIUM: \"#883a0c\",\n  MEDIUM_LIGHT: \"#b54d10\",\n  LIGHT: \"#e88043\",\n  LIGHTEST: \"#eea072\",\n  SUPER_LIGHT: \"#f9dfd0\",\n  WHITE: \"#fcfbfa\",\n};\n\n/* Semantic Colors */\n\nexport const DANGER: Partial<ProtonColorScale> = {\n  SUPER_DARK: \"#991b1b\",\n  DARK: \"#a80724\",\n  MEDIUM: \"#e23f5c\",\n  LIGHT: \"#f16880\",\n  SUPER_LIGHT: \"#ffe1e1\",\n};\n\nexport const WARNING: Partial<ProtonColorScale> = {\n  DARK: \"#8b5600\",\n  MEDIUM: \"#b37208\",\n  LIGHT: \"#ffac23\",\n  SUPER_LIGHT: \"#fff0c9\",\n};\n\nexport const SUCCESS: Partial<ProtonColorScale> = {\n  DARK: \"#247800\",\n  MEDIUM: \"#339a07\",\n  LIGHT: \"#66cf39\",\n  SUPER_LIGHT: \"#deffd1\",\n};\n"],"names":["BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE","DANGER","WARNING","SUCCESS"],"mappings":"gFAIO,MAAMA,EAAc,CACzB,MAAO,UACP,MAAO,SACT,EAEaC,EAAgC,CAC3C,QAAS,UACT,cAAe,UACf,oBAAqB,UACrB,UAAW,UACX,gBAAiB,UACjB,sBAAuB,SACzB,EAEaC,EAAwC,CACnD,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAIaC,EAAoC,CAC/C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAqC,CAChD,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAqC,CAChD,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf"}

package/dist/design/colors.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.es.js","sources":["../../src/design/colors.ts"],"sourcesContent":["import { ProtonColorScale, ProtonPalette } from \"./types\";\r\n\r\n/* Base Colors */\r\n\r\nexport const BACKGROUNDS = {\r\n  BLACK: \"#121212\",\r\n  WHITE: \"#FFFFFF\",\r\n};\r\n\r\nexport const BRAND: ProtonPalette[\"BRAND\"] = {\r\n  PRIMARY: \"#E26014\",\r\n  PRIMARY_LIGHT: \"#FBE5D7\",\r\n  PRIMARY_SUPER_LIGHT: \"#FFF7F0\",\r\n  SECONDARY: \"#2a9edb\",\r\n  SECONDARY_LIGHT: \"#b5d9ff\",\r\n  SECONDARY_SUPER_LIGHT: \"#d9e7fa\",\r\n};\r\n\r\nexport const BRAND_PRIMARY_SCALE: ProtonColorScale = {\r\n  SUPER_DARK: \"#2d1304\",\r\n  DARK: \"#5a2608\",\r\n  MEDIUM: \"#883a0c\",\r\n  MEDIUM_LIGHT: \"#b54d10\",\r\n  LIGHT: \"#e88043\",\r\n  LIGHTEST: \"#eea072\",\r\n  SUPER_LIGHT: \"#f9dfd0\",\r\n  WHITE: \"#fcfbfa\",\r\n};\r\n\r\n/* Semantic Colors */\r\n\r\nexport const DANGER: Partial<ProtonColorScale> = {\r\n  SUPER_DARK: \"#991b1b\",\r\n  DARK: \"#a80724\",\r\n  MEDIUM: \"#e23f5c\",\r\n  LIGHT: \"#f16880\",\r\n  SUPER_LIGHT: \"#ffe1e1\",\r\n};\r\n\r\nexport const WARNING: Partial<ProtonColorScale> = {\r\n  DARK: \"#8b5600\",\r\n  MEDIUM: \"#b37208\",\r\n  LIGHT: \"#ffac23\",\r\n  SUPER_LIGHT: \"#fff0c9\",\r\n};\r\n\r\nexport const SUCCESS: Partial<ProtonColorScale> = {\r\n  DARK: \"#247800\",\r\n  MEDIUM: \"#339a07\",\r\n  LIGHT: \"#66cf39\",\r\n  SUPER_LIGHT: \"#deffd1\",\r\n};\r\n"],"names":["BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE","DANGER","WARNING","SUCCESS"],"mappings":"AAIO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,OAAO;AACT,GAEaC,IAAgC;AAAA,EAC3C,SAAS;AAAA,EACT,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,uBAAuB;AACzB,GAEaC,IAAwC;AAAA,EACnD,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAIaC,IAAoC;AAAA,EAC/C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAqC;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAqC;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf;"}
+{"version":3,"file":"colors.es.js","sources":["../../src/design/colors.ts"],"sourcesContent":["import { ProtonColorScale, ProtonPalette } from \"./types\";\n\n/* Base Colors */\n\nexport const BACKGROUNDS = {\n  BLACK: \"#121212\",\n  WHITE: \"#FFFFFF\",\n};\n\nexport const BRAND: ProtonPalette[\"BRAND\"] = {\n  PRIMARY: \"#E26014\",\n  PRIMARY_LIGHT: \"#FBE5D7\",\n  PRIMARY_SUPER_LIGHT: \"#FFF7F0\",\n  SECONDARY: \"#2a9edb\",\n  SECONDARY_LIGHT: \"#b5d9ff\",\n  SECONDARY_SUPER_LIGHT: \"#d9e7fa\",\n};\n\nexport const BRAND_PRIMARY_SCALE: ProtonColorScale = {\n  SUPER_DARK: \"#2d1304\",\n  DARK: \"#5a2608\",\n  MEDIUM: \"#883a0c\",\n  MEDIUM_LIGHT: \"#b54d10\",\n  LIGHT: \"#e88043\",\n  LIGHTEST: \"#eea072\",\n  SUPER_LIGHT: \"#f9dfd0\",\n  WHITE: \"#fcfbfa\",\n};\n\n/* Semantic Colors */\n\nexport const DANGER: Partial<ProtonColorScale> = {\n  SUPER_DARK: \"#991b1b\",\n  DARK: \"#a80724\",\n  MEDIUM: \"#e23f5c\",\n  LIGHT: \"#f16880\",\n  SUPER_LIGHT: \"#ffe1e1\",\n};\n\nexport const WARNING: Partial<ProtonColorScale> = {\n  DARK: \"#8b5600\",\n  MEDIUM: \"#b37208\",\n  LIGHT: \"#ffac23\",\n  SUPER_LIGHT: \"#fff0c9\",\n};\n\nexport const SUCCESS: Partial<ProtonColorScale> = {\n  DARK: \"#247800\",\n  MEDIUM: \"#339a07\",\n  LIGHT: \"#66cf39\",\n  SUPER_LIGHT: \"#deffd1\",\n};\n"],"names":["BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE","DANGER","WARNING","SUCCESS"],"mappings":"AAIO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,OAAO;AACT,GAEaC,IAAgC;AAAA,EAC3C,SAAS;AAAA,EACT,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,uBAAuB;AACzB,GAEaC,IAAwC;AAAA,EACnD,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAIaC,IAAoC;AAAA,EAC/C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAqC;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAqC;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf;"}

package/dist/design/darkTheme/colors.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\r\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\r\n\r\nconst LIGHT_GRAY = \"#43464a\";\r\nexport const BORDER = LIGHT_GRAY;\r\nexport const ELEVATION = \"rgba(174, 175, 177, 0.2)\";\r\nexport const DARK_GRAYSCALE: ProtonColorScale = {\r\n  SUPER_DARK: \"#111212\",\r\n  DARK: \"#1e1f21\",\r\n  MEDIUM: \"#232629\",\r\n  MEDIUM_LIGHT: \"#2b2d30\",\r\n  LIGHT: LIGHT_GRAY,\r\n  LIGHTEST: \"#63676b\",\r\n  SUPER_LIGHT: \"#8a8e91\",\r\n  WHITE: \"#f7f9fb\",\r\n};\r\n\r\nexport const DARK_SECONDARY = {\r\n  SUPER_DARK: \"#142736\",\r\n  DARK: \"#22445d\",\r\n  MEDIUM: \"#306082\",\r\n  MEDIUM_LIGHT: \"#3e7ca8\",\r\n  LIGHT: \"#5795c1\",\r\n  LIGHTEST: \"#a2c4dd\",\r\n  SUPER_LIGHT: \"#dae7f1\",\r\n  WHITE: \"#f7f9fb\",\r\n};\r\n\r\nexport const DARK_PALETTE: ProtonPalette = {\r\n  BASE_COLOR: BACKGROUNDS.BLACK,\r\n  BRAND,\r\n  GRAYSCALE: DARK_GRAYSCALE,\r\n  PRIMARY: BRAND_PRIMARY_SCALE,\r\n  SECONDARY: DARK_SECONDARY,\r\n} as const;\r\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAGMA,EAAa,UACNC,EAASD,EACTE,EAAY,2BACZC,EAAmC,CAC9C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAOH,EACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAEaI,EAAiB,CAC5B,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAEaC,EAA8B,CACzC,WAAYC,EAAY,YAAA,MAAA,MACxBC,EAAA,MACA,UAAWJ,EACX,QAASK,EAAA,oBACT,UAAWJ,CACb"}
+{"version":3,"file":"colors.cjs.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst LIGHT_GRAY = \"#43464a\";\nexport const BORDER = LIGHT_GRAY;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.2)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n  SUPER_DARK: \"#111212\",\n  DARK: \"#1e1f21\",\n  MEDIUM: \"#232629\",\n  MEDIUM_LIGHT: \"#2b2d30\",\n  LIGHT: LIGHT_GRAY,\n  LIGHTEST: \"#63676b\",\n  SUPER_LIGHT: \"#8a8e91\",\n  WHITE: \"#f7f9fb\",\n};\n\nexport const DARK_SECONDARY = {\n  SUPER_DARK: \"#142736\",\n  DARK: \"#22445d\",\n  MEDIUM: \"#306082\",\n  MEDIUM_LIGHT: \"#3e7ca8\",\n  LIGHT: \"#5795c1\",\n  LIGHTEST: \"#a2c4dd\",\n  SUPER_LIGHT: \"#dae7f1\",\n  WHITE: \"#f7f9fb\",\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n  BASE_COLOR: BACKGROUNDS.BLACK,\n  BRAND,\n  GRAYSCALE: DARK_GRAYSCALE,\n  PRIMARY: BRAND_PRIMARY_SCALE,\n  SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAGMA,EAAa,UACNC,EAASD,EACTE,EAAY,2BACZC,EAAmC,CAC9C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAOH,EACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAEaI,EAAiB,CAC5B,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAEaC,EAA8B,CACzC,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,UAAWJ,EACX,QAASK,EAAAA,oBACT,UAAWJ,CACb"}

package/dist/design/darkTheme/colors.es.js

@@ -1,4 +1,4 @@
-import { BACKGROUNDS as A, BRAND as E, BRAND_PRIMARY_SCALE as I } from "../colors.es.js";
+import { BRAND_PRIMARY_SCALE as A, BRAND as E, BACKGROUNDS as I } from "../colors.es.js";
 const R = "#43464a", G = R, S = "rgba(174, 175, 177, 0.2)", D = {
   SUPER_DARK: "#111212",
   DARK: "#1e1f21",
@@ -18,10 +18,10 @@ const R = "#43464a", G = R, S = "rgba(174, 175, 177, 0.2)", D = {
   SUPER_LIGHT: "#dae7f1",
   WHITE: "#f7f9fb"
 }, _ = {
-  BASE_COLOR: A.BLACK,
+  BASE_COLOR: I.BLACK,
   BRAND: E,
   GRAYSCALE: D,
-  PRIMARY: I,
+  PRIMARY: A,
   SECONDARY: L
 };
 export {

package/dist/design/darkTheme/colors.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.es.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\r\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\r\n\r\nconst LIGHT_GRAY = \"#43464a\";\r\nexport const BORDER = LIGHT_GRAY;\r\nexport const ELEVATION = \"rgba(174, 175, 177, 0.2)\";\r\nexport const DARK_GRAYSCALE: ProtonColorScale = {\r\n  SUPER_DARK: \"#111212\",\r\n  DARK: \"#1e1f21\",\r\n  MEDIUM: \"#232629\",\r\n  MEDIUM_LIGHT: \"#2b2d30\",\r\n  LIGHT: LIGHT_GRAY,\r\n  LIGHTEST: \"#63676b\",\r\n  SUPER_LIGHT: \"#8a8e91\",\r\n  WHITE: \"#f7f9fb\",\r\n};\r\n\r\nexport const DARK_SECONDARY = {\r\n  SUPER_DARK: \"#142736\",\r\n  DARK: \"#22445d\",\r\n  MEDIUM: \"#306082\",\r\n  MEDIUM_LIGHT: \"#3e7ca8\",\r\n  LIGHT: \"#5795c1\",\r\n  LIGHTEST: \"#a2c4dd\",\r\n  SUPER_LIGHT: \"#dae7f1\",\r\n  WHITE: \"#f7f9fb\",\r\n};\r\n\r\nexport const DARK_PALETTE: ProtonPalette = {\r\n  BASE_COLOR: BACKGROUNDS.BLACK,\r\n  BRAND,\r\n  GRAYSCALE: DARK_GRAYSCALE,\r\n  PRIMARY: BRAND_PRIMARY_SCALE,\r\n  SECONDARY: DARK_SECONDARY,\r\n} as const;\r\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAGA,MAAMA,IAAa,WACNC,IAASD,GACTE,IAAY,4BACZC,IAAmC;AAAA,EAC9C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAOH;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAEaI,IAAiB;AAAA,EAC5B,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAEaC,IAA8B;AAAA,EACzC,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,WAAWJ;AAAA,EACX,SAASK;AAAA,EACT,WAAWJ;AACb;"}
+{"version":3,"file":"colors.es.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst LIGHT_GRAY = \"#43464a\";\nexport const BORDER = LIGHT_GRAY;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.2)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n  SUPER_DARK: \"#111212\",\n  DARK: \"#1e1f21\",\n  MEDIUM: \"#232629\",\n  MEDIUM_LIGHT: \"#2b2d30\",\n  LIGHT: LIGHT_GRAY,\n  LIGHTEST: \"#63676b\",\n  SUPER_LIGHT: \"#8a8e91\",\n  WHITE: \"#f7f9fb\",\n};\n\nexport const DARK_SECONDARY = {\n  SUPER_DARK: \"#142736\",\n  DARK: \"#22445d\",\n  MEDIUM: \"#306082\",\n  MEDIUM_LIGHT: \"#3e7ca8\",\n  LIGHT: \"#5795c1\",\n  LIGHTEST: \"#a2c4dd\",\n  SUPER_LIGHT: \"#dae7f1\",\n  WHITE: \"#f7f9fb\",\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n  BASE_COLOR: BACKGROUNDS.BLACK,\n  BRAND,\n  GRAYSCALE: DARK_GRAYSCALE,\n  PRIMARY: BRAND_PRIMARY_SCALE,\n  SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAGA,MAAMA,IAAa,WACNC,IAASD,GACTE,IAAY,4BACZC,IAAmC;AAAA,EAC9C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAOH;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAEaI,IAAiB;AAAA,EAC5B,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAEaC,IAA8B;AAAA,EACzC,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,WAAWJ;AAAA,EACX,SAASK;AAAA,EACT,WAAWJ;AACb;"}