@protonradio/proton-ui 0.13.0 → 0.13.1

package/dist/components/Text/TextEllipsis/TextEllipsis.es.js

@@ -1,14 +1,14 @@
-import { j as p } from "../../../node_modules/react/jsx-runtime.es.js";
+import { jsx as p } from "react/jsx-runtime";
 /* empty css                    */
 import { csx as r } from "../../../utils/string.es.js";
-const n = ({
+const x = ({
   children: i,
   maxWidth: s,
   singleLine: e = !0,
   lines: t = 1,
-  title: o,
-  "data-testid": l
-}) => /* @__PURE__ */ p.jsx(
+  title: l,
+  "data-testid": o
+}) => /* @__PURE__ */ p(
   "div",
   {
     className: r(
@@ -19,12 +19,12 @@ const n = ({
       maxWidth: s,
       WebkitLineClamp: t
     },
-    title: o,
-    "data-testid": l,
+    title: l,
+    "data-testid": o,
     children: i
   }
 );
 export {
-  n as TextEllipsis
+  x as TextEllipsis
 };
 //# sourceMappingURL=TextEllipsis.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextEllipsis.es.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n  /**\n   * The content to display within the text ellipsis.\n   */\n  children: ReactNode;\n\n  /**\n   * The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n   * When the container width is less than this value, text will be truncated with an ellipsis.\n   */\n  maxWidth?: string | number;\n\n  /**\n   * Whether to truncate the text to a single line. Default is true.\n   * If false, the text will wrap to multiple lines.\n   */\n  singleLine?: boolean;\n\n  /**\n   * The number of lines to show before truncating with an ellipsis.\n   * Only applies when singleLine is false.\n   */\n  lines?: number;\n\n  /**\n   * The title attribute to show on hover. If not provided and singleLine is true,\n   * the children will be used as the title (if children is a string).\n   */\n  title?: string;\n\n  /**\n   * Test id for the component.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A component that displays text with an ellipsis when it overflows its container.\n *\n * API:\n *  - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n  children,\n  maxWidth,\n  singleLine = true,\n  lines = 1,\n  title,\n  \"data-testid\": testId,\n}: TextEllipsisProps) => {\n  return (\n    <div\n      className={csx(\n        \"proton-TextEllipsis\",\n        singleLine || lines === 1\n          ? \"proton-TextEllipsis--single-line\"\n          : lines > 1\n            ? \"proton-TextEllipsis--multi-line\"\n            : \"\"\n      )}\n      style={{\n        maxWidth: maxWidth,\n        WebkitLineClamp: lines,\n      }}\n      title={title}\n      data-testid={testId}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":";;;AAgDO,MAAMA,IAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,eAAeC;AACjB,MAEIC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL,KAAcC,MAAU,IACpB,qCACAA,IAAQ,IACN,oCACA;AAAA,IAAA;AAAA,IAER,OAAO;AAAA,MACL,UAAAF;AAAA,MACA,iBAAiBE;AAAA,IAAA;AAAA,IAEnB,OAAAC;AAAA,IACA,eAAaC;AAAA,IAEZ,UAAAL;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"TextEllipsis.es.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n  /**\n   * The content to display within the text ellipsis.\n   */\n  children: ReactNode;\n\n  /**\n   * The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n   * When the container width is less than this value, text will be truncated with an ellipsis.\n   */\n  maxWidth?: string | number;\n\n  /**\n   * Whether to truncate the text to a single line. Default is true.\n   * If false, the text will wrap to multiple lines.\n   */\n  singleLine?: boolean;\n\n  /**\n   * The number of lines to show before truncating with an ellipsis.\n   * Only applies when singleLine is false.\n   */\n  lines?: number;\n\n  /**\n   * The title attribute to show on hover. If not provided and singleLine is true,\n   * the children will be used as the title (if children is a string).\n   */\n  title?: string;\n\n  /**\n   * Test id for the component.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A component that displays text with an ellipsis when it overflows its container.\n *\n * API:\n *  - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n  children,\n  maxWidth,\n  singleLine = true,\n  lines = 1,\n  title,\n  \"data-testid\": testId,\n}: TextEllipsisProps) => {\n  return (\n    <div\n      className={csx(\n        \"proton-TextEllipsis\",\n        singleLine || lines === 1\n          ? \"proton-TextEllipsis--single-line\"\n          : lines > 1\n            ? \"proton-TextEllipsis--multi-line\"\n            : \"\"\n      )}\n      style={{\n        maxWidth: maxWidth,\n        WebkitLineClamp: lines,\n      }}\n      title={title}\n      data-testid={testId}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":";;;AAgDO,MAAMA,IAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,eAAeC;AACjB,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL,KAAcC,MAAU,IACpB,qCACAA,IAAQ,IACN,oCACA;AAAA,IAAA;AAAA,IAER,OAAO;AAAA,MACL,UAAAF;AAAA,MACA,iBAAiBE;AAAA,IAAA;AAAA,IAEnB,OAAAC;AAAA,IACA,eAAaC;AAAA,IAEZ,UAAAL;AAAA,EAAA;AAAA;"}

package/dist/components/Text/TextEmphasis/TextEmphasis.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");;/* empty css                      */const m=require("../../ThemeProvider.cjs.js"),x=require("../../../utils/navigation.cjs.js"),p=require("../../Tooltip/ResponsiveTooltip.cjs.js"),c=require("../../../utils/string.cjs.js"),u=({to:e,children:r,tooltipProps:s,"data-testid":i})=>{const{className:a}=m.useTheme(),o=s?t.jsxRuntimeExports.jsx(p.ResponsiveTooltip,{delay:50,...s,children:r}):r;if(e){const n=x.isUrlExternal(e);return t.jsxRuntimeExports.jsx("span",{className:c.csx("proton-TextEmphasis",s&&"proton-TextEmphasis--tooltip",a),children:t.jsxRuntimeExports.jsx("a",{"data-testid":i,href:e,target:n?"_blank":void 0,rel:n?"noopener noreferrer":void 0,onClick:n?void 0:l=>x.handleInternalNavigation(l,e),children:o})})}return t.jsxRuntimeExports.jsx("span",{className:c.csx("proton-TextEmphasis",s&&"proton-TextEmphasis--tooltip",a),"data-testid":i,children:o})};exports.TextEmphasis=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");;/* empty css                      */const m=require("../../ThemeProvider.cjs.js"),c=require("../../../utils/navigation.cjs.js"),x=require("../../Tooltip/ResponsiveTooltip.cjs.js"),l=require("../../../utils/string.cjs.js"),p=({to:e,children:r,tooltipProps:s,"data-testid":i})=>{const{className:a}=m.useTheme(),o=s?t.jsx(x.ResponsiveTooltip,{delay:50,...s,children:r}):r;if(e){const n=c.isUrlExternal(e);return t.jsx("span",{className:l.csx("proton-TextEmphasis",s&&"proton-TextEmphasis--tooltip",a),children:t.jsx("a",{"data-testid":i,href:e,target:n?"_blank":void 0,rel:n?"noopener noreferrer":void 0,onClick:n?void 0:d=>c.handleInternalNavigation(d,e),children:o})})}return t.jsx("span",{className:l.csx("proton-TextEmphasis",s&&"proton-TextEmphasis--tooltip",a),"data-testid":i,children:o})};exports.TextEmphasis=p;
 //# sourceMappingURL=TextEmphasis.cjs.js.map

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,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"}
+{"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":"oVAwCaA,EAAe,CAAC,CAC3B,GAAAC,EACA,SAAAC,EACA,aAAAC,EACA,cAAeC,CACjB,IAAyB,CACvB,KAAM,CAAE,UAAWC,CAAA,EAAmBC,WAAA,EAEhCC,EAAUJ,EACdK,EAAAA,IAACC,oBAAA,CAAkB,MAAO,GAAK,GAAGN,EAC/B,SAAAD,CAAA,CACH,EAEAA,EAGF,GAAID,EAAI,CACN,MAAMS,EAAaC,EAAAA,cAAcV,CAAE,EACnC,OACEO,EAAAA,IAAC,OAAA,CACC,UAAWI,EAAAA,IACT,sBACAT,GAAgB,+BAChBE,CAAA,EAGF,SAAAG,EAAAA,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,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

@@ -1,46 +1,46 @@
-import { j as t } from "../../../node_modules/react/jsx-runtime.es.js";
+import { jsx as a } from "react/jsx-runtime";
 /* empty css                    */
 import { useTheme as l } from "../../ThemeProvider.es.js";
-import { isUrlExternal as x, handleInternalNavigation as c } from "../../../utils/navigation.es.js";
-import { ResponsiveTooltip as d } from "../../Tooltip/ResponsiveTooltip.es.js";
+import { isUrlExternal as c, handleInternalNavigation as d } from "../../../utils/navigation.es.js";
+import { ResponsiveTooltip as h } from "../../Tooltip/ResponsiveTooltip.es.js";
 import { csx as m } from "../../../utils/string.es.js";
-const N = ({
+const u = ({
   to: e,
-  children: r,
-  tooltipProps: s,
+  children: s,
+  tooltipProps: t,
   "data-testid": n
 }) => {
-  const { className: o } = l(), i = s ? /* @__PURE__ */ t.jsx(d, { delay: 50, ...s, children: r }) : r;
+  const { className: o } = l(), i = t ? /* @__PURE__ */ a(h, { delay: 50, ...t, children: s }) : s;
   if (e) {
-    const a = x(e);
-    return /* @__PURE__ */ t.jsx(
+    const r = c(e);
+    return /* @__PURE__ */ a(
       "span",
       {
         className: m(
           "proton-TextEmphasis",
-          s && "proton-TextEmphasis--tooltip",
+          t && "proton-TextEmphasis--tooltip",
           o
         ),
-        children: /* @__PURE__ */ t.jsx(
+        children: /* @__PURE__ */ a(
           "a",
           {
             "data-testid": n,
             href: e,
-            target: a ? "_blank" : void 0,
-            rel: a ? "noopener noreferrer" : void 0,
-            onClick: a ? void 0 : (p) => c(p, e),
+            target: r ? "_blank" : void 0,
+            rel: r ? "noopener noreferrer" : void 0,
+            onClick: r ? void 0 : (p) => d(p, e),
             children: i
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ a(
     "span",
     {
       className: m(
         "proton-TextEmphasis",
-        s && "proton-TextEmphasis--tooltip",
+        t && "proton-TextEmphasis--tooltip",
         o
       ),
       "data-testid": n,
@@ -49,6 +49,6 @@ const N = ({
   );
 };
 export {
-  N as TextEmphasis
+  u as TextEmphasis
 };
 //# sourceMappingURL=TextEmphasis.es.js.map

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,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;"}
+{"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,IACd,gBAAAK,EAACC,GAAA,EAAkB,OAAO,IAAK,GAAGN,GAC/B,UAAAD,EAAA,CACH,IAEAA;AAGF,MAAID,GAAI;AACN,UAAMS,IAAaC,EAAcV,CAAE;AACnC,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWI;AAAA,UACT;AAAA,UACAT,KAAgB;AAAA,UAChBE;AAAA,QAAA;AAAA,QAGF,UAAA,gBAAAG;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,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AAEA,SACE,gBAAAC;AAAA,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 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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),t=require("react"),l=require("../design/lightTheme/colors.cjs.js"),m=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},f=({theme:e,children:i,palette:r=l.LIGHT_PALETTE})=>{const s=t.useRef(null),o=T.THEME_CLASSES[e],n=t.useMemo(()=>m.generateStylesheet(r,e),[r,e]);return t.useEffect(()=>{s.current&&(s.current.className=o,Object.entries(n).forEach(([a,h])=>{s.current.style.setProperty(a,h)}))},[e,o,r,n]),c.jsx(u.Provider,{value:{theme:e,style:n,palette:r,className:o,hasPalette:!!r},children:c.jsx("div",{ref:s,children:i})})};exports.ThemeProvider=f;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,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"}
+{"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":"6QAwBMA,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,IAACpB,EAAa,SAAb,CACC,MAAO,CAAA,MACLM,EACA,MAAOQ,EACP,QAAAN,EACA,UAAWI,EACX,WAAY,EAAQJ,CAAO,EAG7B,SAAAY,EAAAA,IAAC,MAAA,CAAI,IAAKV,EAAe,SAAAH,CAAA,CAAS,CAAA,CAAA,CAGxC"}

package/dist/components/ThemeProvider.es.js

@@ -1,28 +1,28 @@
-import { j as n } from "../node_modules/react/jsx-runtime.es.js";
-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 = x(i);
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as f, useRef as a, useMemo as h, useEffect as l, useContext as T } from "react";
+import { LIGHT_PALETTE as d } from "../design/lightTheme/colors.es.js";
+import { generateStylesheet as E } from "../design/generateStylesheet.es.js";
+import { THEME_CLASSES as v } from "../design/theme.es.js";
+const c = f(void 0), b = () => {
+  const e = T(c);
   if (e === void 0)
     throw new Error("useTheme must be used within a ThemeProvider");
   return e;
-}, S = ({
+}, p = ({
   theme: e,
-  children: c,
-  palette: r = E
+  children: i,
+  palette: r = d
 }) => {
-  const o = f(null), t = d[e], s = h(
-    () => T(r, e),
+  const o = a(null), t = v[e], s = h(
+    () => E(r, e),
     [r, e]
   );
   return l(() => {
     o.current && (o.current.className = t, Object.entries(s).forEach(([m, u]) => {
       o.current.style.setProperty(m, u);
     }));
-  }, [e, t, r, s]), /* @__PURE__ */ n.jsx(
-    i.Provider,
+  }, [e, t, r, s]), /* @__PURE__ */ n(
+    c.Provider,
     {
       value: {
         theme: e,
@@ -31,12 +31,12 @@ const i = a(void 0), y = () => {
         className: t,
         hasPalette: !!r
       },
-      children: /* @__PURE__ */ n.jsx("div", { ref: o, children: c })
+      children: /* @__PURE__ */ n("div", { ref: o, children: i })
     }
   );
 };
 export {
-  S as ThemeProvider,
-  y as useTheme
+  p as ThemeProvider,
+  b as useTheme
 };
 //# sourceMappingURL=ThemeProvider.es.js.map

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;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;"}
+{"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,GAG7C,gBAAAM;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,MAAO;AAAA,MAG7B,UAAA,gBAAAY,EAAC,OAAA,EAAI,KAAKV,GAAe,UAAAH,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGxC;"}

package/dist/components/Tombstone/Tombstone.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");;/* empty css                   */const u=require("../ThemeProvider.cjs.js"),t=require("../../utils/color2k.cjs.js"),i=require("../../utils/string.cjs.js"),a=({width:o="100%",height:s="1.5rem",borderRadius:r="4px"})=>{const{hasPalette:n,palette:e}=u.useTheme(),m={"--tombstone-custom-background":e.PRIMARY.MEDIUM,"--tombstone-custom-primary":t.transparentize(e.PRIMARY.DARK,.9),"--tombstone-custom-secondary":t.transparentize(e.SECONDARY.DARK,.7)};return c.jsxRuntimeExports.jsx("div",{className:i.csx("proton-Tombstone",n&&"proton-Tombstone--custom"),style:{...m,width:o,height:s,borderRadius:r}})};exports.Tombstone=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime");;/* empty css                   */const u=require("../ThemeProvider.cjs.js"),t=require("../../utils/color2k.cjs.js"),i=require("../../utils/string.cjs.js"),a=({width:o="100%",height:s="1.5rem",borderRadius:r="4px"})=>{const{hasPalette:n,palette:e}=u.useTheme(),c={"--tombstone-custom-background":e.PRIMARY.MEDIUM,"--tombstone-custom-primary":t.transparentize(e.PRIMARY.DARK,.9),"--tombstone-custom-secondary":t.transparentize(e.SECONDARY.DARK,.7)};return m.jsx("div",{className:i.csx("proton-Tombstone",n&&"proton-Tombstone--custom"),style:{...c,width:o,height:s,borderRadius:r}})};exports.Tombstone=a;
 //# sourceMappingURL=Tombstone.cjs.js.map

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,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"}
+{"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":"iRA8BaA,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,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

@@ -1,35 +1,35 @@
-import { j as p } from "../../node_modules/react/jsx-runtime.es.js";
+import { jsx as p } from "react/jsx-runtime";
 /* empty css                 */
-import { useTheme as a } from "../ThemeProvider.es.js";
+import { useTheme as c } from "../ThemeProvider.es.js";
 import { transparentize as t } from "../../utils/color2k.es.js";
-import { csx as c } from "../../utils/string.es.js";
-const l = ({
-  width: s = "100%",
-  height: m = "1.5rem",
+import { csx as a } from "../../utils/string.es.js";
+const A = ({
+  width: m = "100%",
+  height: s = "1.5rem",
   borderRadius: e = "4px"
 }) => {
-  const { hasPalette: r, palette: o } = a(), n = {
+  const { hasPalette: r, palette: o } = c(), n = {
     "--tombstone-custom-background": o.PRIMARY.MEDIUM,
     "--tombstone-custom-primary": t(o.PRIMARY.DARK, 0.9),
     "--tombstone-custom-secondary": t(o.SECONDARY.DARK, 0.7)
   };
-  return /* @__PURE__ */ p.jsx(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: c(
+      className: a(
         "proton-Tombstone",
         r && "proton-Tombstone--custom"
       ),
       style: {
         ...n,
-        width: s,
-        height: m,
+        width: m,
+        height: s,
         borderRadius: e
       }
     }
   );
 };
 export {
-  l as Tombstone
+  A as Tombstone
 };
 //# sourceMappingURL=Tombstone.es.js.map

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,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;"}
+{"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,SACE,gBAAAI;AAAA,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 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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),f=require("./Tooltip.cjs.js"),q=require("../Popover/Popover.cjs.js"),R=require("../../hooks/useBreakpoint.cjs.js"),j=require("../../constants/breakpoint.cjs.js");function c({children:t,content:o,placement:r="top",align:i="center",arrow:s,delay:d=100,isDisabled:u,open:v,defaultOpen:p,onOpenChange:a,constrainWidth:T,disableTriggerClick:b,forceComponent:k="auto","data-testid":n}){const P=R.useBreakpoint(j.BREAKPOINTS.SMALL);if(o==="")return null;let e;switch(k){case"popover":e=!0;break;case"tooltip":e=!1;break;default:e=P;break}return e?l.jsx(q.Popover,{trigger:t,side:r,align:i,arrow:s,constrainWidth:T,isDisabled:u,open:v,defaultOpen:p,onOpenChange:a,"data-testid":n,children:o}):l.jsx(f.Tooltip,{children:t,content:o,placement:r,align:i,arrow:s,delay:d,isDisabled:u,defaultOpen:p,onOpenChange:a,disableTriggerClick:b,"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 { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS, type RadixSide } 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?: RadixSide;\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"}
+{"version":3,"file":"ResponsiveTooltip.cjs.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS, type RadixSide } 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?: RadixSide;\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":"uRA+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,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,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 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 c({
-  children: r,
-  content: t,
+import { jsx as u } from "react/jsx-runtime";
+import { Tooltip as b } from "./Tooltip.es.js";
+import { Popover as c } from "../Popover/Popover.es.js";
+import { useBreakpoint as R } from "../../hooks/useBreakpoint.es.js";
+import { BREAKPOINTS as n } from "../../constants/breakpoint.es.js";
+function x({
+  children: t,
+  content: r,
   placement: e = "top",
   align: i = "center",
-  arrow: s,
+  arrow: p,
   delay: l = 100,
-  isDisabled: p,
+  isDisabled: s,
   open: d,
   defaultOpen: a,
   onOpenChange: m,
   constrainWidth: v,
-  disableTriggerClick: x,
-  forceComponent: j = "auto",
-  "data-testid": u
+  disableTriggerClick: k,
+  forceComponent: P = "auto",
+  "data-testid": f
 }) {
-  const k = T(b.SMALL);
-  if (t === "") return null;
+  const T = R(n.SMALL);
+  if (r === "") return null;
   let o;
-  switch (j) {
+  switch (P) {
     case "popover":
       o = !0;
       break;
@@ -30,43 +30,43 @@ function c({
       o = !1;
       break;
     default:
-      o = k;
+      o = T;
       break;
   }
-  return o ? /* @__PURE__ */ f.jsx(
-    R,
+  return o ? /* @__PURE__ */ u(
+    c,
     {
-      trigger: r,
+      trigger: t,
       side: e,
       align: i,
-      arrow: s,
+      arrow: p,
       constrainWidth: v,
-      isDisabled: p,
+      isDisabled: s,
       open: d,
       defaultOpen: a,
       onOpenChange: m,
-      "data-testid": u,
-      children: t
+      "data-testid": f,
+      children: r
     }
-  ) : /* @__PURE__ */ f.jsx(
-    P,
+  ) : /* @__PURE__ */ u(
+    b,
     {
-      children: r,
-      content: t,
+      children: t,
+      content: r,
       placement: e,
       align: i,
-      arrow: s,
+      arrow: p,
       delay: l,
-      isDisabled: p,
+      isDisabled: s,
       defaultOpen: a,
       onOpenChange: m,
-      disableTriggerClick: x,
-      "data-testid": u
+      disableTriggerClick: k,
+      "data-testid": f
     }
   );
 }
-c.displayName = "ProtonUIResponsiveTooltip";
+x.displayName = "ProtonUIResponsiveTooltip";
 export {
-  c as ResponsiveTooltip
+  x 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 { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS, type RadixSide } 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?: RadixSide;\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;"}
+{"version":3,"file":"ResponsiveTooltip.es.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS, type RadixSide } 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?: RadixSide;\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,IAmBH,gBAAAC;AAAA,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,IA7BD,gBAAAiB;AAAA,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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),t=require("radix-ui"),w=require("../ThemeProvider.cjs.js"),y=require("../../utils/string.cjs.js"),R=require("../Overlay/Overlay.cjs.js");;/* empty css                 */;/* empty css                              */const j=l.forwardRef(({content:a,arrow:r,placement:o="top",align:c="center","data-testid":u},d)=>{const{style:i,className:s}=w.useTheme();return e.jsx(t.Tooltip.Content,{ref:d,side:o,align:c,className:y.csx("proton__Tooltip","proton-Elevation--glass",s),style:i,sideOffset:8,"data-testid":u,children:e.jsx(R.Overlay,{arrow:r&&e.jsx(t.Tooltip.Arrow,{width:8,height:8,children:e.jsx("svg",{width:8,height:8,viewBox:"0 0 8 8",children:e.jsx("path",{d:"M0 0 L4 4 L8 0"})})}),children:a})})});j.displayName="ProtonUITooltipContent";function v({arrow:a=!0,children:r,content:o,delay:c=100,placement:u="top",align:d="center",isDisabled:i,defaultOpen:s=!1,onOpenChange:f,disableTriggerClick:T,"data-testid":m}){const[p,x]=l.useState(s),n=l.useRef(!1),g=l.useRef(!1);if(o==="")return null;const q=h=>{h&&!n.current&&(g.current=!0),f&&f(h),n.current||x(h),n.current=!1};return e.jsx(t.Tooltip.Provider,{children:e.jsxs(t.Tooltip.Root,{open:p,defaultOpen:s,onOpenChange:q,delayDuration:c,children:[e.jsx(t.Tooltip.Trigger,{asChild:!0,children:T?e.jsx("span",{"aria-label":"Show tooltip",className:"proton__Tooltip-trigger",children:r}):e.jsx("div",{role:"button","aria-label":"Show tooltip","data-hovered":p,onClick:()=>{T||i||g.current||(n.current=!0,x(!p))},className:"proton__Tooltip-trigger",children:r})}),!i&&e.jsx(t.Tooltip.Portal,{children:e.jsx(j,{content:o,placement:u,align:d,arrow:a,"data-testid":m})})]})})}v.displayName="ProtonUITooltip";exports.Tooltip=v;
 //# 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 { CSSProperties, forwardRef, ReactNode, useRef, useState } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\n\nimport { Overlay } from \"../Overlay/Overlay\";\nimport \"./Tooltip.css\";\nimport \"../Elevation/Elevation.css\";\n\ntype TooltipContentProps = Pick<\n  TooltipProps,\n  \"content\" | \"arrow\" | \"placement\" | \"align\" | \"data-testid\"\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\n/** Radix `Tooltip.Content` `side` */\nexport type TooltipPlacement = RadixSide;\n/** Radix `Tooltip.Content` `align` */\nexport type TooltipAlign = RadixAlign;\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":"wXAiBA,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,yBA2EtB,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"}
+{"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\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\n\nimport { Overlay } from \"../Overlay/Overlay\";\nimport \"./Tooltip.css\";\nimport \"../Elevation/Elevation.css\";\n\ntype TooltipContentProps = Pick<\n  TooltipProps,\n  \"content\" | \"arrow\" | \"placement\" | \"align\" | \"data-testid\"\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\n/** Radix `Tooltip.Content` `side` */\nexport type TooltipPlacement = RadixSide;\n/** Radix `Tooltip.Content` `align` */\nexport type TooltipAlign = RadixAlign;\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":"8VAiBA,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,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,IAACG,EAAAA,QAAA,CACC,MACEX,GACEQ,EAAAA,IAACC,EAAAA,QAAa,MAAb,CAAmB,MAAO,EAAG,OAAQ,EACpC,SAAAD,EAAAA,IAAC,OAAI,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,eAAC,OAAA,CAAK,EAAE,gBAAA,CAAiB,CAAA,CAC3B,CAAA,CACF,EAIH,SAAAT,CAAA,CAAA,CACH,CAAA,CAGN,CACF,EAEAF,EAAe,YAAc,yBA2EtB,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,IAACC,EAAAA,QAAa,SAAb,CACC,SAAAkB,EAAAA,KAAClB,EAAAA,QAAa,KAAb,CACC,KAAMU,EACN,YAAAH,EACA,aAAcS,EACd,cAAeX,EAEf,SAAA,CAAAN,EAAAA,IAACC,EAAAA,QAAa,QAAb,CAAqB,QAAO,GAC1B,SAAAS,EACCV,EAAAA,IAAC,OAAA,CAAK,aAAW,eAAe,UAAU,0BACvC,SAAAK,EACH,EAEAL,EAAAA,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,IAACC,EAAAA,QAAa,OAAb,CACC,SAAAD,EAAAA,IAACX,EAAA,CACC,QAAAE,EACA,UAAAE,EACA,MAAAC,EACA,MAAAF,EACA,cAAaG,CAAA,CAAA,CACf,CACF,CAAA,CAAA,CAAA,EAGN,CAEJ,CAEAS,EAAQ,YAAc"}