@protonradio/proton-ui 0.11.34 → 0.12.0

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

@@ -1 +1 @@
-{"version":3,"file":"TextEmphasis.cjs.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 { TooltipProps } from \"../../Tooltip/Tooltip\";\nimport {\n  handleInternalNavigation,\n  isUrlExternal,\n} from \"../../../utils/navigation\";\nimport { ResponsiveTooltip } from \"../../Tooltip/ResponsiveTooltip\";\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    <ResponsiveTooltip delay={50} {...tooltipProps}>\n      {children}\n    </ResponsiveTooltip>\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","ResponsiveTooltip","isExternal","isUrlExternal","csx","e","handleInternalNavigation"],"mappings":"iXAwCaA,EAAe,CAAC,CAC3B,GAAAC,EACA,SAAAC,EACA,aAAAC,EACA,cAAeC,CACjB,IAAyB,CACvB,KAAM,CAAE,UAAWC,CAAe,EAAIC,EAAS,SAAA,EAEzCC,EAAUJ,EACbK,EAAA,kBAAA,IAAAC,EAAA,kBAAA,CAAkB,MAAO,GAAK,GAAGN,EAC/B,SAAAD,CACH,CAAA,EAEAA,EAGF,GAAID,EAAI,CACA,MAAAS,EAAaC,gBAAcV,CAAE,EAEjC,OAAAO,EAAA,kBAAA,IAAC,OAAA,CACC,UAAWI,EAAA,IACT,sBACAT,GAAgB,+BAChBE,CACF,EAEA,SAAAG,EAAA,kBAAA,IAAC,IAAA,CACC,cAAaJ,EACb,KAAMH,EACN,OAAQS,EAAa,SAAW,OAChC,IAAKA,EAAa,sBAAwB,OAC1C,QACGA,EAAsD,OAAxCG,GAAMC,EAAyB,yBAAAD,EAAGZ,CAAE,EAGpD,SAAAM,CAAA,CACH,CAAA,CAAA,CAGN,CAGE,OAAAC,EAAA,kBAAA,IAAC,OAAA,CACC,UAAWI,EAAA,IACT,sBACAT,GAAgB,+BAChBE,CACF,EACA,cAAaD,EAEZ,SAAAG,CAAA,CAAA,CAGP"}
+{"version":3,"file":"TextEmphasis.cjs.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 { TooltipProps } from \"../../Tooltip/Tooltip\";\nimport {\n  handleInternalNavigation,\n  isUrlExternal,\n} from \"../../../utils/navigation\";\nimport { ResponsiveTooltip } from \"../../Tooltip/ResponsiveTooltip\";\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    <ResponsiveTooltip delay={50} {...tooltipProps}>\n      {children}\n    </ResponsiveTooltip>\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","ResponsiveTooltip","isExternal","isUrlExternal","csx","e","handleInternalNavigation"],"mappings":"iXAwCaA,EAAe,CAAC,CAC3B,GAAAC,EACA,SAAAC,EACA,aAAAC,EACA,cAAeC,CACjB,IAAyB,CACvB,KAAM,CAAE,UAAWC,CAAA,EAAmBC,WAAA,EAEhCC,EAAUJ,EACdK,EAAAA,kBAAAA,IAACC,oBAAA,CAAkB,MAAO,GAAK,GAAGN,EAC/B,SAAAD,CAAA,CACH,EAEAA,EAGF,GAAID,EAAI,CACN,MAAMS,EAAaC,EAAAA,cAAcV,CAAE,EACnC,OACEO,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAWI,EAAAA,IACT,sBACAT,GAAgB,+BAChBE,CAAA,EAGF,SAAAG,EAAAA,kBAAAA,IAAC,IAAA,CACC,cAAaJ,EACb,KAAMH,EACN,OAAQS,EAAa,SAAW,OAChC,IAAKA,EAAa,sBAAwB,OAC1C,QACGA,EAAsD,OAAxCG,GAAMC,EAAAA,yBAAyBD,EAAGZ,CAAE,EAGpD,SAAAM,CAAA,CAAA,CACH,CAAA,CAGN,CAEA,OACEC,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAWI,EAAAA,IACT,sBACAT,GAAgB,+BAChBE,CAAA,EAEF,cAAaD,EAEZ,SAAAG,CAAA,CAAA,CAGP"}

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\";\n\nimport { ReactNode } from \"react\";\nimport \"./TextEmphasis.css\";\n\nimport { csx } from \"../../../utils\";\nimport { useTheme } from \"../../ThemeProvider\";\nimport { TooltipProps } from \"../../Tooltip/Tooltip\";\nimport {\n  handleInternalNavigation,\n  isUrlExternal,\n} from \"../../../utils/navigation\";\nimport { ResponsiveTooltip } from \"../../Tooltip/ResponsiveTooltip\";\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    <ResponsiveTooltip delay={50} {...tooltipProps}>\n      {children}\n    </ResponsiveTooltip>\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","ResponsiveTooltip","isExternal","isUrlExternal","csx","e","handleInternalNavigation"],"mappings":";;;;;;AAwCO,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,EAAkB,OAAO,IAAK,GAAGN,GAC/B,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 { TooltipProps } from \"../../Tooltip/Tooltip\";\nimport {\n  handleInternalNavigation,\n  isUrlExternal,\n} from \"../../../utils/navigation\";\nimport { ResponsiveTooltip } from \"../../Tooltip/ResponsiveTooltip\";\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    <ResponsiveTooltip delay={50} {...tooltipProps}>\n      {children}\n    </ResponsiveTooltip>\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","ResponsiveTooltip","isExternal","isUrlExternal","csx","e","handleInternalNavigation"],"mappings":";;;;;;AAwCO,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,EAAkB,OAAO,IAAK,GAAGN,GAC/B,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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../node_modules/react/jsx-runtime.cjs.js"),t=require("react"),h=require("../design/lightTheme/colors.cjs.js"),l=require("../design/generateStylesheet.cjs.js"),T=require("../design/theme.cjs.js"),u=t.createContext(void 0),d=()=>{const e=t.useContext(u);if(e===void 0)throw new Error("useTheme must be used within a ThemeProvider");return e},x=({theme:e,children:i,palette:r=h.LIGHT_PALETTE})=>{const s=t.useRef(null),o=T.THEME_CLASSES[e],n=t.useMemo(()=>l.generateStylesheet(r,e),[r,e]);return t.useEffect(()=>{s.current&&(s.current.className=o,Object.entries(n).forEach(([a,m])=>{s.current.style.setProperty(a,m)}))},[e,o,r,n]),c.jsxRuntimeExports.jsx(u.Provider,{value:{theme:e,style:n,palette:r,className:o,hasPalette:!!r},children:c.jsxRuntimeExports.jsx("div",{ref:s,children:i})})};exports.ThemeProvider=x;exports.useTheme=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../node_modules/react/jsx-runtime.cjs.js"),t=require("react"),h=require("../design/lightTheme/colors.cjs.js"),l=require("../design/generateStylesheet.cjs.js"),T=require("../design/theme.cjs.js"),c=t.createContext(void 0),d=()=>{const e=t.useContext(c);if(e===void 0)throw new Error("useTheme must be used within a ThemeProvider");return e},x=({theme:e,children:i,palette:r=h.LIGHT_PALETTE})=>{const s=t.useRef(null),o=T.THEME_CLASSES[e],n=t.useMemo(()=>l.generateStylesheet(r,e),[r,e]);return t.useEffect(()=>{s.current&&(s.current.className=o,Object.entries(n).forEach(([m,a])=>{s.current.style.setProperty(m,a)}))},[e,o,r,n]),u.jsxRuntimeExports.jsx(c.Provider,{value:{theme:e,style:n,palette:r,className:o,hasPalette:!!r},children:u.jsxRuntimeExports.jsx("div",{ref:s,children:i})})};exports.ThemeProvider=x;exports.useTheme=d;
 //# sourceMappingURL=ThemeProvider.cjs.js.map

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

@@ -1 +1 @@
-{"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,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\";\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;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\";\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,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\";\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,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/ResponsiveTooltip.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../node_modules/react/jsx-runtime.cjs.js"),j=require("./Tooltip.cjs.js"),k=require("../Popover/Popover.cjs.js"),q=require("../../hooks/useBreakpoint.cjs.js"),m=require("../../constants/breakpoint.cjs.js");function l({children:t,content:o,placement:r="top",align:c="center",arrow:s,delay:v=100,isDisabled:i,open:d,defaultOpen:p,onOpenChange:u,constrainWidth:x,disableTriggerClick:P,forceComponent:R="auto","data-testid":a}){const T=q.useBreakpoint(m.BREAKPOINTS.SMALL);if(o==="")return null;let e;switch(R){case"popover":e=!0;break;case"tooltip":e=!1;break;default:e=T;break}if(!e){const f={children:t,content:o,placement:r,arrow:s??!0,delay:v,isDisabled:i,defaultOpen:p,onOpenChange:u,disableTriggerClick:P,"data-testid":a};return n.jsxRuntimeExports.jsx(j.Tooltip,{...f})}const b={trigger:t,children:o,side:r,align:c,arrow:s??!1,constrainWidth:x,isDisabled:i,open:d,defaultOpen:p,onOpenChange:u,"data-testid":a};return n.jsxRuntimeExports.jsx(k.Popover,{...b})}l.displayName="ResponsiveTooltip";exports.ResponsiveTooltip=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../../node_modules/react/jsx-runtime.cjs.js"),j=require("./Tooltip.cjs.js"),k=require("../Popover/Popover.cjs.js"),P=require("../../hooks/useBreakpoint.cjs.js"),f=require("../../constants/breakpoint.cjs.js");function c({children:o,content:t,placement:r="top",align:i="center",arrow:s,delay:d=100,isDisabled:u,open:v,defaultOpen:p,onOpenChange:a,constrainWidth:x,disableTriggerClick:R,forceComponent:T="auto","data-testid":n}){const b=P.useBreakpoint(f.BREAKPOINTS.SMALL);if(t==="")return null;let e;switch(T){case"popover":e=!0;break;case"tooltip":e=!1;break;default:e=b;break}return e?l.jsxRuntimeExports.jsx(k.Popover,{trigger:o,side:r,align:i,arrow:s,constrainWidth:x,isDisabled:u,open:v,defaultOpen:p,onOpenChange:a,"data-testid":n,children:t}):l.jsxRuntimeExports.jsx(j.Tooltip,{children:o,content:t,placement:r,align:i,arrow:s,delay:d,isDisabled:u,defaultOpen:p,onOpenChange:a,disableTriggerClick:R,"data-testid":n})}c.displayName="ProtonUIResponsiveTooltip";exports.ResponsiveTooltip=c;
 //# sourceMappingURL=ResponsiveTooltip.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveTooltip.cjs.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { Tooltip, TooltipProps, TooltipPlacement } from \"./Tooltip\";\nimport {\n  Popover,\n  PopoverProps,\n  PopoverSide,\n  PopoverAlign,\n} from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps {\n  /**\n   * The trigger element (wrapped by tooltip, or passed as trigger to popover).\n   */\n  children: ReactNode;\n  /**\n   * The content to display in the tooltip/popover.\n   */\n  content: string | ReactNode;\n  /**\n   * Placement/side of the tooltip/popover.\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement | PopoverSide;\n  /**\n   * Alignment for popover\n   * @note only used when rendered as popover, ignored for tooltip\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   * @default true for tooltip, false for popover\n   */\n  arrow?: boolean;\n  /**\n   * Delay before showing\n   * @note only used for tooltip, ignored for popover\n   * @default 100\n   */\n  delay?: number;\n  /**\n   * Whether the tooltip/popover is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Control open state (controlled mode).\n   * @note only used when rendered as Popover\n   */\n  open?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Constrain width to trigger (only used for popover).\n   */\n  constrainWidth?: boolean;\n  /**\n   * Disable trigger click feature (only used for tooltip).\n   * This is useful when using an info only Tooltip that might wrap a clickable element.\n   */\n  disableTriggerClick?: boolean;\n  /**\n   * Force a specific component type (useful for testing or edge cases).\n   * @default \"auto\"\n   */\n  forceComponent?: \"tooltip\" | \"popover\" | \"auto\";\n  /**\n   * Test ID.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile/touch devices.\n *\n * **Client/Server Rendering:**\n * To ensure proper hydration in SSR environments, this component\n * matches the server render by defaulting to Tooltip until client-side detection\n * completes. This prevents hydration mismatches while maintaining correct\n * behavior after the initial render.\n *\n * API:\n *  - {@link ResponsiveTooltipProps}\n */\nexport function ResponsiveTooltip({\n  children,\n  content,\n  placement = \"top\",\n  align = \"center\",\n  arrow,\n  delay = 100,\n  isDisabled,\n  open,\n  defaultOpen,\n  onOpenChange,\n  constrainWidth,\n  disableTriggerClick,\n  forceComponent = \"auto\",\n  \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n  if (content === \"\") return null;\n\n  let usePopover: boolean;\n  switch (forceComponent) {\n    case \"popover\":\n      usePopover = true;\n      break;\n    case \"tooltip\":\n      usePopover = false;\n      break;\n    default:\n      usePopover = isMobile;\n      break;\n  }\n\n  if (!usePopover) {\n    const tooltipProps: TooltipProps = {\n      children,\n      content,\n      placement,\n      arrow: arrow ?? true,\n      delay,\n      isDisabled,\n      defaultOpen,\n      onOpenChange,\n      disableTriggerClick,\n      \"data-testid\": testId,\n    };\n\n    return <Tooltip {...tooltipProps} />;\n  }\n\n  const popoverProps: PopoverProps = {\n    trigger: children,\n    children: content,\n    side: placement,\n    align,\n    arrow: arrow ?? false,\n    constrainWidth,\n    isDisabled,\n    open,\n    defaultOpen,\n    onOpenChange,\n    \"data-testid\": testId,\n  };\n\n  return <Popover {...popoverProps} />;\n}\n\nResponsiveTooltip.displayName = \"ResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","tooltipProps","jsx","Tooltip","popoverProps","Popover"],"mappings":"iTA8FO,SAASA,EAAkB,CAChC,SAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,MAAAC,EACA,MAAAC,EAAQ,IACR,WAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,eAAAC,EACA,oBAAAC,EACA,eAAAC,EAAiB,OACjB,cAAeC,CACjB,EAA2B,CACnB,MAAAC,EAAWC,EAAAA,cAAcC,EAAA,YAAY,KAAK,EAE5C,GAAAf,IAAY,GAAW,OAAA,KAEvB,IAAAgB,EACJ,OAAQL,EAAgB,CACtB,IAAK,UACUK,EAAA,GACb,MACF,IAAK,UACUA,EAAA,GACb,MACF,QACeA,EAAAH,EACb,KACJ,CAEA,GAAI,CAACG,EAAY,CACf,MAAMC,EAA6B,CACjC,SAAAlB,EACA,QAAAC,EACA,UAAAC,EACA,MAAOE,GAAS,GAChB,MAAAC,EACA,WAAAC,EACA,YAAAE,EACA,aAAAC,EACA,oBAAAE,EACA,cAAeE,CAAA,EAGV,OAAAM,EAAA,kBAAA,IAACC,EAAS,QAAA,CAAA,GAAGF,CAAc,CAAA,CACpC,CAEA,MAAMG,EAA6B,CACjC,QAASrB,EACT,SAAUC,EACV,KAAMC,EACN,MAAAC,EACA,MAAOC,GAAS,GAChB,eAAAM,EACA,WAAAJ,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,cAAeI,CAAA,EAGV,OAAAM,EAAA,kBAAA,IAACG,EAAS,QAAA,CAAA,GAAGD,CAAc,CAAA,CACpC,CAEAtB,EAAkB,YAAc"}
+{"version":3,"file":"ResponsiveTooltip.cjs.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps, TooltipPlacement } from \"./Tooltip\";\nimport { Popover, PopoverProps, PopoverSide } from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n  extends Omit<TooltipProps, \"placement\">,\n    Omit<PopoverProps, \"trigger\" | \"children\" | \"side\"> {\n  /**\n   * Placement/side of the tooltip/popover.\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement | PopoverSide;\n  /**\n   * Force a specific component type.\n   * @default \"auto\"\n   */\n  forceComponent?: \"tooltip\" | \"popover\" | \"auto\";\n}\n\n/**\n * A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n *\n * API:\n *  - {@link ResponsiveTooltipProps}\n *  - @extends {@link TooltipProps} \n *  - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n  children,\n  content,\n  placement = \"top\",\n  align = \"center\",\n  arrow,\n  delay = 100,\n  isDisabled,\n  open,\n  defaultOpen,\n  onOpenChange,\n  constrainWidth,\n  disableTriggerClick,\n  forceComponent = \"auto\",\n  \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n  if (content === \"\") return null;\n\n  let usePopover: boolean;\n  switch (forceComponent) {\n    case \"popover\":\n      usePopover = true;\n      break;\n    case \"tooltip\":\n      usePopover = false;\n      break;\n    default:\n      usePopover = isMobile;\n      break;\n  }\n\n  if (!usePopover) {\n    return (\n      <Tooltip\n        children={children}\n        content={content}\n        placement={placement}\n        align={align}\n        arrow={arrow}\n        delay={delay}\n        isDisabled={isDisabled}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disableTriggerClick={disableTriggerClick}\n        data-testid={testId}\n      />\n    );\n  }\n\n  return (\n    <Popover\n      trigger={children}\n      side={placement}\n      align={align}\n      arrow={arrow}\n      constrainWidth={constrainWidth}\n      isDisabled={isDisabled}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-testid={testId}\n    >\n      {content}\n    </Popover>\n  );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":"iTA+BO,SAASA,EAAkB,CAChC,SAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,MAAAC,EACA,MAAAC,EAAQ,IACR,WAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,eAAAC,EACA,oBAAAC,EACA,eAAAC,EAAiB,OACjB,cAAeC,CACjB,EAA2B,CACzB,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAEhD,GAAIf,IAAY,GAAI,OAAO,KAE3B,IAAIgB,EACJ,OAAQL,EAAA,CACN,IAAK,UACHK,EAAa,GACb,MACF,IAAK,UACHA,EAAa,GACb,MACF,QACEA,EAAaH,EACb,KAAA,CAGJ,OAAKG,EAmBHC,EAAAA,kBAAAA,IAACC,EAAAA,QAAA,CACC,QAASnB,EACT,KAAME,EACN,MAAAC,EACA,MAAAC,EACA,eAAAM,EACA,WAAAJ,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,cAAaI,EAEZ,SAAAZ,CAAA,CAAA,EA7BDiB,EAAAA,kBAAAA,IAACE,EAAAA,QAAA,CACC,SAAApB,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAE,EACA,aAAAC,EACA,oBAAAE,EACA,cAAaE,CAAA,CAAA,CAqBrB,CAEAd,EAAkB,YAAc"}

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

@@ -1,28 +1,28 @@
-import { j as u } from "../../node_modules/react/jsx-runtime.es.js";
-import { Tooltip as k } from "./Tooltip.es.js";
+import { j as f } from "../../node_modules/react/jsx-runtime.es.js";
+import { Tooltip as P } from "./Tooltip.es.js";
 import { Popover as R } from "../Popover/Popover.es.js";
 import { useBreakpoint as T } from "../../hooks/useBreakpoint.es.js";
 import { BREAKPOINTS as b } from "../../constants/breakpoint.es.js";
-function w({
-  children: t,
-  content: r,
+function c({
+  children: r,
+  content: t,
   placement: e = "top",
-  align: f = "center",
-  arrow: i,
+  align: i = "center",
+  arrow: s,
   delay: l = 100,
-  isDisabled: s,
+  isDisabled: p,
   open: d,
-  defaultOpen: p,
-  onOpenChange: a,
+  defaultOpen: a,
+  onOpenChange: m,
   constrainWidth: v,
-  disableTriggerClick: c,
-  forceComponent: n = "auto",
-  "data-testid": m
+  disableTriggerClick: x,
+  forceComponent: j = "auto",
+  "data-testid": u
 }) {
-  const x = T(b.SMALL);
-  if (r === "") return null;
+  const k = T(b.SMALL);
+  if (t === "") return null;
   let o;
-  switch (n) {
+  switch (j) {
     case "popover":
       o = !0;
       break;
@@ -30,41 +30,43 @@ function w({
       o = !1;
       break;
     default:
-      o = x;
+      o = k;
       break;
   }
-  if (!o) {
-    const j = {
-      children: t,
-      content: r,
+  return o ? /* @__PURE__ */ f.jsx(
+    R,
+    {
+      trigger: r,
+      side: e,
+      align: i,
+      arrow: s,
+      constrainWidth: v,
+      isDisabled: p,
+      open: d,
+      defaultOpen: a,
+      onOpenChange: m,
+      "data-testid": u,
+      children: t
+    }
+  ) : /* @__PURE__ */ f.jsx(
+    P,
+    {
+      children: r,
+      content: t,
       placement: e,
-      arrow: i ?? !0,
+      align: i,
+      arrow: s,
       delay: l,
-      isDisabled: s,
-      defaultOpen: p,
-      onOpenChange: a,
-      disableTriggerClick: c,
-      "data-testid": m
-    };
-    return /* @__PURE__ */ u.jsx(k, { ...j });
-  }
-  const P = {
-    trigger: t,
-    children: r,
-    side: e,
-    align: f,
-    arrow: i ?? !1,
-    constrainWidth: v,
-    isDisabled: s,
-    open: d,
-    defaultOpen: p,
-    onOpenChange: a,
-    "data-testid": m
-  };
-  return /* @__PURE__ */ u.jsx(R, { ...P });
+      isDisabled: p,
+      defaultOpen: a,
+      onOpenChange: m,
+      disableTriggerClick: x,
+      "data-testid": u
+    }
+  );
 }
-w.displayName = "ResponsiveTooltip";
+c.displayName = "ProtonUIResponsiveTooltip";
 export {
-  w as ResponsiveTooltip
+  c as ResponsiveTooltip
 };
 //# sourceMappingURL=ResponsiveTooltip.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveTooltip.es.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { Tooltip, TooltipProps, TooltipPlacement } from \"./Tooltip\";\nimport {\n  Popover,\n  PopoverProps,\n  PopoverSide,\n  PopoverAlign,\n} from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps {\n  /**\n   * The trigger element (wrapped by tooltip, or passed as trigger to popover).\n   */\n  children: ReactNode;\n  /**\n   * The content to display in the tooltip/popover.\n   */\n  content: string | ReactNode;\n  /**\n   * Placement/side of the tooltip/popover.\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement | PopoverSide;\n  /**\n   * Alignment for popover\n   * @note only used when rendered as popover, ignored for tooltip\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   * @default true for tooltip, false for popover\n   */\n  arrow?: boolean;\n  /**\n   * Delay before showing\n   * @note only used for tooltip, ignored for popover\n   * @default 100\n   */\n  delay?: number;\n  /**\n   * Whether the tooltip/popover is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Control open state (controlled mode).\n   * @note only used when rendered as Popover\n   */\n  open?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Constrain width to trigger (only used for popover).\n   */\n  constrainWidth?: boolean;\n  /**\n   * Disable trigger click feature (only used for tooltip).\n   * This is useful when using an info only Tooltip that might wrap a clickable element.\n   */\n  disableTriggerClick?: boolean;\n  /**\n   * Force a specific component type (useful for testing or edge cases).\n   * @default \"auto\"\n   */\n  forceComponent?: \"tooltip\" | \"popover\" | \"auto\";\n  /**\n   * Test ID.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile/touch devices.\n *\n * **Client/Server Rendering:**\n * To ensure proper hydration in SSR environments, this component\n * matches the server render by defaulting to Tooltip until client-side detection\n * completes. This prevents hydration mismatches while maintaining correct\n * behavior after the initial render.\n *\n * API:\n *  - {@link ResponsiveTooltipProps}\n */\nexport function ResponsiveTooltip({\n  children,\n  content,\n  placement = \"top\",\n  align = \"center\",\n  arrow,\n  delay = 100,\n  isDisabled,\n  open,\n  defaultOpen,\n  onOpenChange,\n  constrainWidth,\n  disableTriggerClick,\n  forceComponent = \"auto\",\n  \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n  if (content === \"\") return null;\n\n  let usePopover: boolean;\n  switch (forceComponent) {\n    case \"popover\":\n      usePopover = true;\n      break;\n    case \"tooltip\":\n      usePopover = false;\n      break;\n    default:\n      usePopover = isMobile;\n      break;\n  }\n\n  if (!usePopover) {\n    const tooltipProps: TooltipProps = {\n      children,\n      content,\n      placement,\n      arrow: arrow ?? true,\n      delay,\n      isDisabled,\n      defaultOpen,\n      onOpenChange,\n      disableTriggerClick,\n      \"data-testid\": testId,\n    };\n\n    return <Tooltip {...tooltipProps} />;\n  }\n\n  const popoverProps: PopoverProps = {\n    trigger: children,\n    children: content,\n    side: placement,\n    align,\n    arrow: arrow ?? false,\n    constrainWidth,\n    isDisabled,\n    open,\n    defaultOpen,\n    onOpenChange,\n    \"data-testid\": testId,\n  };\n\n  return <Popover {...popoverProps} />;\n}\n\nResponsiveTooltip.displayName = \"ResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","tooltipProps","jsx","Tooltip","popoverProps","Popover"],"mappings":";;;;;AA8FO,SAASA,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAA2B;AACnB,QAAAC,IAAWC,EAAcC,EAAY,KAAK;AAE5C,MAAAf,MAAY,GAAW,QAAA;AAEvB,MAAAgB;AACJ,UAAQL,GAAgB;AAAA,IACtB,KAAK;AACU,MAAAK,IAAA;AACb;AAAA,IACF,KAAK;AACU,MAAAA,IAAA;AACb;AAAA,IACF;AACe,MAAAA,IAAAH;AACb;AAAA,EACJ;AAEA,MAAI,CAACG,GAAY;AACf,UAAMC,IAA6B;AAAA,MACjC,UAAAlB;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAOE,KAAS;AAAA,MAChB,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,aAAAE;AAAA,MACA,cAAAC;AAAA,MACA,qBAAAE;AAAA,MACA,eAAeE;AAAA,IAAA;AAGV,WAAAM,gBAAAA,EAAA,IAACC,GAAS,EAAA,GAAGF,EAAc,CAAA;AAAA,EACpC;AAEA,QAAMG,IAA6B;AAAA,IACjC,SAASrB;AAAA,IACT,UAAUC;AAAA,IACV,MAAMC;AAAA,IACN,OAAAC;AAAA,IACA,OAAOC,KAAS;AAAA,IAChB,gBAAAM;AAAA,IACA,YAAAJ;AAAA,IACA,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAeI;AAAA,EAAA;AAGV,SAAAM,gBAAAA,EAAA,IAACG,GAAS,EAAA,GAAGD,EAAc,CAAA;AACpC;AAEAtB,EAAkB,cAAc;"}
+{"version":3,"file":"ResponsiveTooltip.es.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps, TooltipPlacement } from \"./Tooltip\";\nimport { Popover, PopoverProps, PopoverSide } from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n  extends Omit<TooltipProps, \"placement\">,\n    Omit<PopoverProps, \"trigger\" | \"children\" | \"side\"> {\n  /**\n   * Placement/side of the tooltip/popover.\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement | PopoverSide;\n  /**\n   * Force a specific component type.\n   * @default \"auto\"\n   */\n  forceComponent?: \"tooltip\" | \"popover\" | \"auto\";\n}\n\n/**\n * A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n *\n * API:\n *  - {@link ResponsiveTooltipProps}\n *  - @extends {@link TooltipProps} \n *  - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n  children,\n  content,\n  placement = \"top\",\n  align = \"center\",\n  arrow,\n  delay = 100,\n  isDisabled,\n  open,\n  defaultOpen,\n  onOpenChange,\n  constrainWidth,\n  disableTriggerClick,\n  forceComponent = \"auto\",\n  \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n  if (content === \"\") return null;\n\n  let usePopover: boolean;\n  switch (forceComponent) {\n    case \"popover\":\n      usePopover = true;\n      break;\n    case \"tooltip\":\n      usePopover = false;\n      break;\n    default:\n      usePopover = isMobile;\n      break;\n  }\n\n  if (!usePopover) {\n    return (\n      <Tooltip\n        children={children}\n        content={content}\n        placement={placement}\n        align={align}\n        arrow={arrow}\n        delay={delay}\n        isDisabled={isDisabled}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disableTriggerClick={disableTriggerClick}\n        data-testid={testId}\n      />\n    );\n  }\n\n  return (\n    <Popover\n      trigger={children}\n      side={placement}\n      align={align}\n      arrow={arrow}\n      constrainWidth={constrainWidth}\n      isDisabled={isDisabled}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-testid={testId}\n    >\n      {content}\n    </Popover>\n  );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":";;;;;AA+BO,SAASA,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAA2B;AACzB,QAAMC,IAAWC,EAAcC,EAAY,KAAK;AAEhD,MAAIf,MAAY,GAAI,QAAO;AAE3B,MAAIgB;AACJ,UAAQL,GAAA;AAAA,IACN,KAAK;AACH,MAAAK,IAAa;AACb;AAAA,IACF,KAAK;AACH,MAAAA,IAAa;AACb;AAAA,IACF;AACE,MAAAA,IAAaH;AACb;AAAA,EAAA;AAGJ,SAAKG,IAmBHC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASnB;AAAA,MACT,MAAME;AAAA,MACN,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,gBAAAM;AAAA,MACA,YAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAaI;AAAA,MAEZ,UAAAZ;AAAA,IAAA;AAAA,EAAA,IA7BDiB,gBAAAA,EAAAA;AAAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAApB;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,aAAAE;AAAA,MACA,cAAAC;AAAA,MACA,qBAAAE;AAAA,MACA,eAAaE;AAAA,IAAA;AAAA,EAAA;AAqBrB;AAEAd,EAAkB,cAAc;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),l=require("react"),e=require("radix-ui"),v=require("../ThemeProvider.cjs.js");;/* empty css                        */;/* empty css                 */const f=require("../../utils/string.cjs.js"),T=l.forwardRef(({content:a,arrow:r,placement:s="top","data-testid":u},p)=>{const{style:i,className:o}=v.useTheme();return t.jsxRuntimeExports.jsxs(e.Tooltip.Content,{ref:p,side:s,className:f.csx("proton__Tooltip","proton-Dialog",o),style:i,sideOffset:8,"data-testid":u,children:[a,r&&t.jsxRuntimeExports.jsx(e.Tooltip.Arrow,{className:f.csx("proton__Tooltip-arrow",o),width:8,height:8,children:t.jsxRuntimeExports.jsx("svg",{width:8,height:8,viewBox:"0 0 8 8",children:t.jsxRuntimeExports.jsx("path",{d:"M0 0 L4 4 L8 0"})})})]})});T.displayName="TooltipContent";function R({arrow:a=!0,children:r,content:s,delay:u=100,placement:p="top",isDisabled:i,defaultOpen:o=!1,onOpenChange:d,disableTriggerClick:j,"data-testid":g}){const[x,h]=l.useState(o),n=l.useRef(!1),m=l.useRef(!1);if(s==="")return null;const E=c=>{c&&!n.current&&(m.current=!0),d&&d(c),n.current||h(c),n.current=!1};return t.jsxRuntimeExports.jsx(e.Tooltip.Provider,{children:t.jsxRuntimeExports.jsxs(e.Tooltip.Root,{open:x,defaultOpen:o,onOpenChange:E,delayDuration:u,children:[t.jsxRuntimeExports.jsx(e.Tooltip.Trigger,{asChild:!0,children:j?t.jsxRuntimeExports.jsx("span",{"aria-label":"Show tooltip",className:"proton__Tooltip-trigger",children:r}):t.jsxRuntimeExports.jsx("div",{role:"button","aria-label":"Show tooltip","data-hovered":x,onClick:()=>{j||i||m.current||(n.current=!0,h(!x))},className:"proton__Tooltip-trigger",children:r})}),!i&&t.jsxRuntimeExports.jsx(e.Tooltip.Portal,{children:t.jsxRuntimeExports.jsx(T,{content:s,placement:p,arrow:a,"data-testid":g})})]})})}R.displayName="Tooltip";exports.Tooltip=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),l=require("react"),e=require("radix-ui"),v=require("../ThemeProvider.cjs.js"),q=require("../../utils/string.cjs.js"),w=require("../Overlay/Overlay.cjs.js");;/* empty css                 */;/* empty css                              */const R=l.forwardRef(({content:u,arrow:r,placement:o="top",align:a="center","data-testid":p},x)=>{const{style:s,className:i}=v.useTheme();return t.jsxRuntimeExports.jsx(e.Tooltip.Content,{ref:x,side:o,align:a,className:q.csx("proton__Tooltip","proton-Elevation--glass",i),style:s,sideOffset:8,"data-testid":p,children:t.jsxRuntimeExports.jsx(w.Overlay,{arrow:r&&t.jsxRuntimeExports.jsx(e.Tooltip.Arrow,{width:8,height:8,children:t.jsxRuntimeExports.jsx("svg",{width:8,height:8,viewBox:"0 0 8 8",children:t.jsxRuntimeExports.jsx("path",{d:"M0 0 L4 4 L8 0"})})}),children:u})})});R.displayName="ProtonUITooltipContent";function T({arrow:u=!0,children:r,content:o,delay:a=100,placement:p="top",align:x="center",isDisabled:s,defaultOpen:i=!1,onOpenChange:j,disableTriggerClick:h,"data-testid":g}){const[c,m]=l.useState(i),n=l.useRef(!1),f=l.useRef(!1);if(o==="")return null;const E=d=>{d&&!n.current&&(f.current=!0),j&&j(d),n.current||m(d),n.current=!1};return t.jsxRuntimeExports.jsx(e.Tooltip.Provider,{children:t.jsxRuntimeExports.jsxs(e.Tooltip.Root,{open:c,defaultOpen:i,onOpenChange:E,delayDuration:a,children:[t.jsxRuntimeExports.jsx(e.Tooltip.Trigger,{asChild:!0,children:h?t.jsxRuntimeExports.jsx("span",{"aria-label":"Show tooltip",className:"proton__Tooltip-trigger",children:r}):t.jsxRuntimeExports.jsx("div",{role:"button","aria-label":"Show tooltip","data-hovered":c,onClick:()=>{h||s||f.current||(n.current=!0,m(!c))},className:"proton__Tooltip-trigger",children:r})}),!s&&t.jsxRuntimeExports.jsx(e.Tooltip.Portal,{children:t.jsxRuntimeExports.jsx(R,{content:o,placement:p,align:x,arrow:u,"data-testid":g})})]})})}T.displayName="ProtonUITooltip";exports.Tooltip=T;
 //# sourceMappingURL=Tooltip.cjs.js.map

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\";\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,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 { CSSProperties, forwardRef, ReactNode, useRef, useState } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\n\nimport { Overlay } from \"../Overlay/Overlay\";\nimport \"./Tooltip.css\";\nimport \"../Elevation/Elevation.css\";\n\n/** Radix `Tooltip.Content` `side` */\nexport type TooltipPlacement = \"top\" | \"right\" | \"bottom\" | \"left\";\n/** Radix `Tooltip.Content` `align` */\nexport type TooltipAlign = \"start\" | \"center\" | \"end\";\n\nexport interface TooltipContentProps {\n  /** The content of the tooltip. */\n  content: string | ReactNode;\n  /** Whether to show an arrow pointing to the tooltip. */\n  arrow?: boolean;\n  /** The placement of the tooltip. */\n  placement?: TooltipPlacement;\n  /** The alignment of the tooltip.\n   *  @see {@link TooltipAlign}\n   *  @default \"center\"\n   * */\n  align?: TooltipAlign;\n  /** The test ID for the tooltip. */\n  \"data-testid\"?: string;\n}\n\nconst TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(\n  (\n    {\n      content,\n      arrow,\n      placement = \"top\",\n      align = \"center\",\n      \"data-testid\": testId,\n    },\n    ref,\n  ) => {\n    const { style, className } = useTheme();\n\n    return (\n      <RadixTooltip.Content\n        ref={ref}\n        side={placement}\n        align={align}\n        className={csx(\"proton__Tooltip\", \"proton-Elevation--glass\", className)}\n        style={style as CSSProperties}\n        sideOffset={8}\n        data-testid={testId}\n      >\n        <Overlay\n          arrow={\n            arrow && (\n              <RadixTooltip.Arrow width={8} height={8}>\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          }\n        >\n          {content}\n        </Overlay>\n      </RadixTooltip.Content>\n    );\n  },\n);\n\nTooltipContent.displayName = \"ProtonUITooltipContent\";\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: ReactNode;\n  /**\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\n   */\n  content: string | ReactNode;\n  /**\n   * A test ID.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Side of the trigger to place the tooltip.\n   * @see {@link TooltipPlacement}\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement;\n  /**\n   * Alignment along the side.\n   * @see {@link TooltipAlign}\n   * @default \"center\"\n   */\n  align?: TooltipAlign;\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  align = \"center\",\n  isDisabled,\n  defaultOpen = false,\n  onOpenChange,\n  disableTriggerClick,\n  \"data-testid\": testId,\n}: TooltipProps) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const triggerClickRef = useRef<boolean>(false);\n  const hasHovered = 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              align={align}\n              arrow={arrow}\n              data-testid={testId}\n            />\n          </RadixTooltip.Portal>\n        )}\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n\nTooltip.displayName = \"ProtonUITooltip\";\n"],"names":["TooltipContent","forwardRef","content","arrow","placement","align","testId","ref","style","className","useTheme","jsx","RadixTooltip","csx","Overlay","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","handleOpenChange","openState","jsxs"],"mappings":"wXAgCA,MAAMA,EAAiBC,EAAAA,WACrB,CACE,CACE,QAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,cAAeC,CAAA,EAEjBC,IACG,CACH,KAAM,CAAE,MAAAC,EAAO,UAAAC,CAAA,EAAcC,WAAA,EAE7B,OACEC,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,QAAb,CACC,IAAAL,EACA,KAAMH,EACN,MAAAC,EACA,UAAWQ,EAAAA,IAAI,kBAAmB,0BAA2BJ,CAAS,EACtE,MAAAD,EACA,WAAY,EACZ,cAAaF,EAEb,SAAAK,EAAAA,kBAAAA,IAACG,EAAAA,QAAA,CACC,MACEX,GACEQ,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,MAAb,CAAmB,MAAO,EAAG,OAAQ,EACpC,SAAAD,EAAAA,kBAAAA,IAAC,OAAI,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,iCAAC,OAAA,CAAK,EAAE,gBAAA,CAAiB,CAAA,CAC3B,CAAA,CACF,EAIH,SAAAT,CAAA,CAAA,CACH,CAAA,CAGN,CACF,EAEAF,EAAe,YAAc,yBAsEtB,SAASe,EAAQ,CACtB,MAAAZ,EAAQ,GACR,SAAAa,EACA,QAAAd,EACA,MAAAe,EAAQ,IACR,UAAAb,EAAY,MACZ,MAAAC,EAAQ,SACR,WAAAa,EACA,YAAAC,EAAc,GACd,aAAAC,EACA,oBAAAC,EACA,cAAef,CACjB,EAAiB,CACf,KAAM,CAACgB,EAAQC,CAAS,EAAIC,EAAAA,SAASL,CAAW,EAC1CM,EAAkBC,EAAAA,OAAgB,EAAK,EACvCC,EAAaD,EAAAA,OAAgB,EAAK,EAExC,GAAIxB,IAAY,GAAI,OAAO,KAE3B,MAAM0B,EAAoBC,GAAuB,CAG3CA,GAAa,CAACJ,EAAgB,YAAoB,QAAU,IAE5DL,KAA2BS,CAAS,EAInCJ,EAAgB,SAASF,EAAUM,CAAS,EACjDJ,EAAgB,QAAU,EAC5B,EAEA,OACEd,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,SAAb,CACC,SAAAkB,EAAAA,kBAAAA,KAAClB,EAAAA,QAAa,KAAb,CACC,KAAMU,EACN,YAAAH,EACA,aAAcS,EACd,cAAeX,EAEf,SAAA,CAAAN,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,QAAb,CAAqB,QAAO,GAC1B,SAAAS,EACCV,EAAAA,kBAAAA,IAAC,OAAA,CAAK,aAAW,eAAe,UAAU,0BACvC,SAAAK,EACH,EAEAL,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,SACL,aAAW,eACX,eAAcW,EACd,QAAS,IAAM,CACTD,GAAuBH,GAIvBS,EAAW,UAEfF,EAAgB,QAAU,GAC1BF,EAAU,CAACD,CAAM,EACnB,EACA,UAAU,0BAET,SAAAN,CAAA,CAAA,EAGP,EACC,CAACE,GACAP,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,OAAb,CACC,SAAAD,EAAAA,kBAAAA,IAACX,EAAA,CACC,QAAAE,EACA,UAAAE,EACA,MAAAC,EACA,MAAAF,EACA,cAAaG,CAAA,CAAA,CACf,CACF,CAAA,CAAA,CAAA,EAGN,CAEJ,CAEAS,EAAQ,YAAc"}

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

@@ -1,83 +1,88 @@
 import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
-import n from "react";
-import { Tooltip as o } from "radix-ui";
-import { useTheme as _ } from "../ThemeProvider.es.js";
-/* empty css                      */
+import { useState as w, useRef as j, forwardRef as C } from "react";
+import { Tooltip as r } from "radix-ui";
+import { useTheme as N } from "../ThemeProvider.es.js";
+import { csx as _ } from "../../utils/string.es.js";
+import { Overlay as y } from "../Overlay/Overlay.es.js";
 /* empty css               */
-import { csx as j } from "../../utils/string.es.js";
-const g = n.forwardRef(
-  ({ content: l, arrow: e, placement: s = "top", "data-testid": p }, d) => {
-    const { style: i, className: r } = _();
-    return /* @__PURE__ */ t.jsxs(
-      o.Content,
+/* empty css                            */
+const g = C(
+  ({
+    content: a,
+    arrow: o,
+    placement: e = "top",
+    align: l = "center",
+    "data-testid": p
+  }, d) => {
+    const { style: i, className: s } = N();
+    return /* @__PURE__ */ t.jsx(
+      r.Content,
       {
         ref: d,
-        side: s,
-        className: j("proton__Tooltip", "proton-Dialog", r),
+        side: e,
+        align: l,
+        className: _("proton__Tooltip", "proton-Elevation--glass", s),
         style: i,
         sideOffset: 8,
         "data-testid": p,
-        children: [
-          l,
-          e && /* @__PURE__ */ t.jsx(
-            o.Arrow,
-            {
-              className: j("proton__Tooltip-arrow", r),
-              width: 8,
-              height: 8,
-              children: /* @__PURE__ */ t.jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ t.jsx("path", { d: "M0 0 L4 4 L8 0" }) })
-            }
-          )
-        ]
+        children: /* @__PURE__ */ t.jsx(
+          y,
+          {
+            arrow: o && /* @__PURE__ */ t.jsx(r.Arrow, { width: 8, height: 8, children: /* @__PURE__ */ t.jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ t.jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+            children: a
+          }
+        )
       }
     );
   }
 );
-g.displayName = "TooltipContent";
-function N({
-  arrow: l = !0,
-  children: e,
-  content: s,
-  delay: p = 100,
-  placement: d = "top",
+g.displayName = "ProtonUITooltipContent";
+function R({
+  arrow: a = !0,
+  children: o,
+  content: e,
+  delay: l = 100,
+  placement: p = "top",
+  align: d = "center",
   isDisabled: i,
-  defaultOpen: r = !1,
-  onOpenChange: f,
-  disableTriggerClick: h,
+  defaultOpen: s = !1,
+  onOpenChange: h,
+  disableTriggerClick: m,
   "data-testid": T
 }) {
-  const [c, m] = n.useState(r), a = n.useRef(!1), x = n.useRef(!1);
-  if (s === "") return null;
-  const w = (u) => {
-    u && !a.current && (x.current = !0), f && f(u), a.current || m(u), a.current = !1;
+  const [c, u] = w(s), n = j(!1), x = j(!1);
+  if (e === "") return null;
+  const v = (f) => {
+    f && !n.current && (x.current = !0), h && h(f), n.current || u(f), n.current = !1;
   };
-  return /* @__PURE__ */ t.jsx(o.Provider, { children: /* @__PURE__ */ t.jsxs(
-    o.Root,
+  return /* @__PURE__ */ t.jsx(r.Provider, { children: /* @__PURE__ */ t.jsxs(
+    r.Root,
     {
       open: c,
-      defaultOpen: r,
-      onOpenChange: w,
-      delayDuration: p,
+      defaultOpen: s,
+      onOpenChange: v,
+      delayDuration: l,
       children: [
-        /* @__PURE__ */ t.jsx(o.Trigger, { asChild: !0, children: h ? /* @__PURE__ */ t.jsx("span", { "aria-label": "Show tooltip", className: "proton__Tooltip-trigger", children: e }) : /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ t.jsx(r.Trigger, { asChild: !0, children: m ? /* @__PURE__ */ t.jsx("span", { "aria-label": "Show tooltip", className: "proton__Tooltip-trigger", children: o }) : /* @__PURE__ */ t.jsx(
           "div",
           {
             role: "button",
             "aria-label": "Show tooltip",
             "data-hovered": c,
             onClick: () => {
-              h || i || x.current || (a.current = !0, m(!c));
+              m || i || x.current || (n.current = !0, u(!c));
             },
             className: "proton__Tooltip-trigger",
-            children: e
+            children: o
           }
         ) }),
-        !i && /* @__PURE__ */ t.jsx(o.Portal, { children: /* @__PURE__ */ t.jsx(
+        !i && /* @__PURE__ */ t.jsx(r.Portal, { children: /* @__PURE__ */ t.jsx(
           g,
           {
-            content: s,
-            placement: d,
-            arrow: l,
+            content: e,
+            placement: p,
+            align: d,
+            arrow: a,
             "data-testid": T
           }
         ) })
@@ -85,8 +90,8 @@ function N({
     }
   ) });
 }
-N.displayName = "Tooltip";
+R.displayName = "ProtonUITooltip";
 export {
-  N as Tooltip
+  R as Tooltip
 };
 //# sourceMappingURL=Tooltip.es.js.map