@protonradio/proton-ui 0.11.9 → 0.11.10-beta.2

package/dist/components/Table/Table.es.js

@@ -0,0 +1,89 @@
+import { j as a } from "../../node_modules/react/jsx-runtime.es.js";
+import { useMemo as p } from "react";
+import { parseTableChildren as m } from "./Collection/collectionParser.es.js";
+import { TableHeader as b, TableColumn as T, TableBody as u, TableRow as x, TableCell as h } from "./Collection/CompoundComponents.es.js";
+import { useTableCollection as y } from "./Collection/useTableCollection.es.js";
+/* empty css             */
+const _ = ({ children: s, name: i }) => {
+  const c = p(
+    () => m(s),
+    [s]
+  ), o = y(c);
+  return /* @__PURE__ */ a.jsxs(
+    "table",
+    {
+      className: "proton-Table",
+      role: "table",
+      "aria-rowcount": o.getTotalRowCount,
+      "aria-colcount": o.columns.length,
+      "aria-label": i,
+      children: [
+        /* @__PURE__ */ a.jsx("caption", { className: "proton-Table__caption", children: i }),
+        /* @__PURE__ */ a.jsx(
+          "thead",
+          {
+            className: "proton-Table__rowGroup--header",
+            role: "rowgroup",
+            style: o.isHeaderHidden ? { display: "none" } : void 0,
+            children: /* @__PURE__ */ a.jsx("tr", { className: "proton-Table__header-row", role: "row", "aria-rowindex": 1, children: o.columns.map((e, t) => /* @__PURE__ */ a.jsx(
+              "th",
+              {
+                className: "proton-Table__header",
+                role: "columnheader",
+                scope: "col",
+                "aria-colindex": t + 1,
+                "aria-sort": e.ariaSort,
+                children: e.header
+              },
+              e.key
+            )) })
+          }
+        ),
+        /* @__PURE__ */ a.jsx("tbody", { className: "proton-Table__body", role: "rowgroup", children: o.rows.map((e, t) => /* @__PURE__ */ a.jsx(
+          "tr",
+          {
+            className: "proton-Table__row",
+            role: "row",
+            "aria-rowindex": o.getRowAriaIndex(t),
+            onClick: e == null ? void 0 : e.onClick,
+            tabIndex: e != null && e.onClick ? 0 : void 0,
+            onKeyDown: e != null && e.onClick ? (l) => {
+              var r;
+              (l.key === "Enter" || l.key === " ") && (l.preventDefault(), (r = e.onClick) == null || r.call(e));
+            } : void 0,
+            children: o.columns.map((l, r) => {
+              const n = e.cells.find((d) => d.columnKey === l.key);
+              return /* @__PURE__ */ a.jsx(
+                "td",
+                {
+                  className: "proton-Table__cell",
+                  role: "cell",
+                  "aria-colindex": r + 1,
+                  colSpan: n == null ? void 0 : n.colSpan,
+                  children: (n == null ? void 0 : n.value) || ""
+                },
+                l.key
+              );
+            })
+          },
+          e.key
+        )) })
+      ]
+    }
+  );
+}, v = Object.assign(_, {
+  /** Table header: {@link TableHeaderProps} */
+  Header: b,
+  /** Table column: {@link TableColumnProps} */
+  Column: T,
+  /** Table body: {@link TableBodyProps} */
+  Body: u,
+  /** Table row: {@link TableRowProps} */
+  Row: x,
+  /** Table cell: {@link TableCellProps} */
+  Cell: h
+});
+export {
+  v as Table
+};
+//# sourceMappingURL=Table.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.es.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ReactElement, useMemo } from \"react\";\r\nimport { parseTableChildren } from \"./Collection/collectionParser\";\r\nimport {\r\n  TableHeader,\r\n  TableColumn,\r\n  TableBody,\r\n  TableRow,\r\n  TableCell,\r\n  TableHeaderProps,\r\n  TableColumnProps,\r\n  TableBodyProps,\r\n  TableRowProps,\r\n  TableCellProps,\r\n} from \"./Collection/CompoundComponents\";\r\nimport { useTableCollection } from \"./Collection/useTableCollection\";\r\nimport type {\r\n  TableData,\r\n  TableColumnData,\r\n  TableRowData,\r\n  TableCellData,\r\n} from \"./types\";\r\nimport \"./Table.css\";\r\n\r\nexport type { TableColumnData, TableCellData, TableRowData, TableData };\r\n\r\nexport interface TableProps {\r\n  children: [ReactElement<TableHeaderProps>, ReactElement<TableBodyProps>];\r\n  /** Table name/caption for accessibility. Provides essential context for screen readers about table content. */\r\n  name: string;\r\n}\r\n\r\nconst TableComponent = ({ children, name }: TableProps) => {\r\n  const tableData: TableData = useMemo(\r\n    () => parseTableChildren(children),\r\n    [children]\r\n  );\r\n  const collection = useTableCollection(tableData);\r\n\r\n  return (\r\n    <table\r\n      className=\"proton-Table\"\r\n      role=\"table\"\r\n      aria-rowcount={collection.getTotalRowCount}\r\n      aria-colcount={collection.columns.length}\r\n      aria-label={name}\r\n    >\r\n      <caption className=\"proton-Table__caption\">{name}</caption>\r\n\r\n      {/* Header */}\r\n      <thead\r\n        className=\"proton-Table__rowGroup--header\"\r\n        role=\"rowgroup\"\r\n        style={collection.isHeaderHidden ? { display: \"none\" } : undefined}\r\n      >\r\n        <tr className=\"proton-Table__header-row\" role=\"row\" aria-rowindex={1}>\r\n          {collection.columns.map((column, index) => (\r\n            <th\r\n              key={column.key}\r\n              className=\"proton-Table__header\"\r\n              role=\"columnheader\"\r\n              scope=\"col\"\r\n              aria-colindex={index + 1}\r\n              aria-sort={column.ariaSort}\r\n            >\r\n              {column.header}\r\n            </th>\r\n          ))}\r\n        </tr>\r\n      </thead>\r\n\r\n      {/* Body */}\r\n      <tbody className=\"proton-Table__body\" role=\"rowgroup\">\r\n        {collection.rows.map((row, rowIndex) => (\r\n          <tr\r\n            key={row.key}\r\n            className=\"proton-Table__row\"\r\n            role=\"row\"\r\n            aria-rowindex={collection.getRowAriaIndex(rowIndex)}\r\n            onClick={row?.onClick}\r\n            tabIndex={row?.onClick ? 0 : undefined}\r\n            onKeyDown={\r\n              row?.onClick\r\n                ? (e) => {\r\n                    if (e.key === \"Enter\" || e.key === \" \") {\r\n                      // Enable keyboard navigation\r\n                      e.preventDefault();\r\n                      row.onClick?.();\r\n                    }\r\n                  }\r\n                : undefined\r\n            }\r\n          >\r\n            {collection.columns.map((column, colIndex) => {\r\n              const cell = row.cells.find((c) => c.columnKey === column.key);\r\n              return (\r\n                <td\r\n                  key={column.key}\r\n                  className=\"proton-Table__cell\"\r\n                  role=\"cell\"\r\n                  aria-colindex={colIndex + 1}\r\n                  colSpan={cell?.colSpan}\r\n                >\r\n                  {cell?.value || \"\"}\r\n                </td>\r\n              );\r\n            })}\r\n          </tr>\r\n        ))}\r\n      </tbody>\r\n    </table>\r\n  );\r\n};\r\n\r\n/**\r\n * Base Table component that renders data in rows and columns using collections.\r\n *\r\n * - Built-in keyboard navigation for interactive rows.\r\n * - Full ARIA table semantics with proper roles, labels, and indices.\r\n *\r\n * API:\r\n *  - {@link TableProps}\r\n *\r\n * @example\r\n * ```tsx\r\n * <Table caption=\"Employee Directory\">\r\n *   <Table.Header>\r\n *     <Table.Column id=\"name\">Name</Table.Column>\r\n *   </Table.Header>\r\n *   <Table.Body>\r\n *     <Table.Row key=\"1\">\r\n *       <Table.Cell>Joe</Table.Cell>\r\n *     </Table.Row>\r\n *   </Table.Body>\r\n * </Table>\r\n * ```\r\n */\r\nconst Table = Object.assign(TableComponent, {\r\n  /** Table header: {@link TableHeaderProps} */\r\n  Header: TableHeader,\r\n  /** Table column: {@link TableColumnProps} */\r\n  Column: TableColumn,\r\n  /** Table body: {@link TableBodyProps} */\r\n  Body: TableBody,\r\n  /** Table row: {@link TableRowProps} */\r\n  Row: TableRow,\r\n  /** Table cell: {@link TableCellProps} */\r\n  Cell: TableCell,\r\n});\r\n\r\nexport { Table };\r\nexport type {\r\n  TableHeaderProps,\r\n  TableColumnProps,\r\n  TableBodyProps,\r\n  TableRowProps,\r\n  TableCellProps,\r\n};\r\n"],"names":["TableComponent","children","name","tableData","useMemo","parseTableChildren","collection","useTableCollection","jsxs","jsx","column","index","row","rowIndex","e","_a","colIndex","cell","c","Table","TableHeader","TableColumn","TableBody","TableRow","TableCell"],"mappings":";;;;;;AA+BA,MAAMA,IAAiB,CAAC,EAAE,UAAAC,GAAU,MAAAC,QAAuB;AACzD,QAAMC,IAAuBC;AAAA,IAC3B,MAAMC,EAAmBJ,CAAQ;AAAA,IACjC,CAACA,CAAQ;AAAA,EAAA,GAELK,IAAaC,EAAmBJ,CAAS;AAG7C,SAAAK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,iBAAeF,EAAW;AAAA,MAC1B,iBAAeA,EAAW,QAAQ;AAAA,MAClC,cAAYJ;AAAA,MAEZ,UAAA;AAAA,QAACO,gBAAAA,EAAA,IAAA,WAAA,EAAQ,WAAU,yBAAyB,UAAKP,GAAA;AAAA,QAGjDO,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAOH,EAAW,iBAAiB,EAAE,SAAS,OAAW,IAAA;AAAA,YAEzD,UAACG,gBAAAA,EAAA,IAAA,MAAA,EAAG,WAAU,4BAA2B,MAAK,OAAM,iBAAe,GAChE,UAAWH,EAAA,QAAQ,IAAI,CAACI,GAAQC,MAC/BF,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,iBAAeE,IAAQ;AAAA,gBACvB,aAAWD,EAAO;AAAA,gBAEjB,UAAOA,EAAA;AAAA,cAAA;AAAA,cAPHA,EAAO;AAAA,YASf,CAAA,GACH;AAAA,UAAA;AAAA,QACF;AAAA,QAGAD,gBAAAA,EAAAA,IAAC,SAAM,EAAA,WAAU,sBAAqB,MAAK,YACxC,UAAAH,EAAW,KAAK,IAAI,CAACM,GAAKC,MACzBJ,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,iBAAeH,EAAW,gBAAgBO,CAAQ;AAAA,YAClD,SAASD,KAAA,gBAAAA,EAAK;AAAA,YACd,UAAUA,KAAA,QAAAA,EAAK,UAAU,IAAI;AAAA,YAC7B,WACEA,KAAA,QAAAA,EAAK,UACD,CAACE,MAAM;;AACL,eAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAEjCA,EAAE,eAAe,IACjBC,IAAAH,EAAI,YAAJ,QAAAG,EAAA,KAAAH;AAAA,YAGJ,IAAA;AAAA,YAGL,UAAWN,EAAA,QAAQ,IAAI,CAACI,GAAQM,MAAa;AACtC,oBAAAC,IAAOL,EAAI,MAAM,KAAK,CAACM,MAAMA,EAAE,cAAcR,EAAO,GAAG;AAE3D,qBAAAD,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,iBAAeO,IAAW;AAAA,kBAC1B,SAASC,KAAA,gBAAAA,EAAM;AAAA,kBAEd,kCAAM,UAAS;AAAA,gBAAA;AAAA,gBANXP,EAAO;AAAA,cAAA;AAAA,YAOd,CAEH;AAAA,UAAA;AAAA,UA/BIE,EAAI;AAAA,QAiCZ,CAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAyBMO,IAAQ,OAAO,OAAOnB,GAAgB;AAAA;AAAA,EAE1C,QAAQoB;AAAA;AAAA,EAER,QAAQC;AAAA;AAAA,EAER,MAAMC;AAAA;AAAA,EAEN,KAAKC;AAAA;AAAA,EAEL,MAAMC;AACR,CAAC;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../node_modules/react/jsx-runtime.cjs.js");;/* empty css                      */const o=require("../../../utils/string.cjs.js"),p=({children:e,maxWidth:i,singleLine:s=!0,lines:t=1,title:l,"data-testid":r})=>n.jsxRuntimeExports.jsx("div",{className:o.csx("proton-TextEllipsis",s||t===1?"proton-TextEllipsis--single-line":t>1?"proton-TextEllipsis--multi-line":""),style:{maxWidth:i,WebkitLineClamp:t},title:l,"data-testid":r,children:e});exports.TextEllipsis=p;
+//# sourceMappingURL=TextEllipsis.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextEllipsis.cjs.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode } from \"react\";\r\nimport { csx } from \"../../../utils\";\r\nimport \"./TextEllipsis.css\";\r\n\r\ninterface TextEllipsisProps {\r\n  /**\r\n   * The content to display within the text ellipsis.\r\n   */\r\n  children: ReactNode;\r\n\r\n  /**\r\n   * The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\r\n   * When the container width is less than this value, text will be truncated with an ellipsis.\r\n   */\r\n  maxWidth?: string | number;\r\n\r\n  /**\r\n   * Whether to truncate the text to a single line. Default is true.\r\n   * If false, the text will wrap to multiple lines.\r\n   */\r\n  singleLine?: boolean;\r\n\r\n  /**\r\n   * The number of lines to show before truncating with an ellipsis.\r\n   * Only applies when singleLine is false.\r\n   */\r\n  lines?: number;\r\n\r\n  /**\r\n   * The title attribute to show on hover. If not provided and singleLine is true,\r\n   * the children will be used as the title (if children is a string).\r\n   */\r\n  title?: string;\r\n\r\n  /**\r\n   * A test ID.\r\n   */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\n/**\r\n * A component that displays text with an ellipsis when it overflows its container.\r\n *\r\n * API:\r\n *  - {@link TextEllipsisProps}\r\n */\r\nexport const TextEllipsis = ({\r\n  children,\r\n  maxWidth,\r\n  singleLine = true,\r\n  lines = 1,\r\n  title,\r\n  \"data-testid\": testId,\r\n}: TextEllipsisProps) => {\r\n  return (\r\n    <div\r\n      className={csx(\r\n        \"proton-TextEllipsis\",\r\n        singleLine || lines === 1\r\n          ? \"proton-TextEllipsis--single-line\"\r\n          : lines > 1\r\n            ? \"proton-TextEllipsis--multi-line\"\r\n            : \"\"\r\n      )}\r\n      style={{\r\n        maxWidth: maxWidth,\r\n        WebkitLineClamp: lines,\r\n      }}\r\n      title={title}\r\n      data-testid={testId}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":"uOAgDaA,EAAe,CAAC,CAC3B,SAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,MAAAC,EAAQ,EACR,MAAAC,EACA,cAAeC,CACjB,IAEIC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWC,EAAA,IACT,sBACAL,GAAcC,IAAU,EACpB,mCACAA,EAAQ,EACN,kCACA,EACR,EACA,MAAO,CACL,SAAAF,EACA,gBAAiBE,CACnB,EACA,MAAAC,EACA,cAAaC,EAEZ,SAAAL,CAAA,CAAA"}

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

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

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

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

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

@@ -0,0 +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"),u=require("../../Tooltip/Tooltip.cjs.js"),x=require("../../../utils/navigation.cjs.js"),c=require("../../../utils/string.cjs.js"),p=({to:e,children:n,tooltipProps:s,"data-testid":i})=>{const{className:a}=m.useTheme(),o=s?t.jsxRuntimeExports.jsx(u.TooltipTrigger,{delay:50,closeDelay:75,...s,children:n}):n;if(e){const r=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:r?"_blank":void 0,rel:r?"noopener noreferrer":void 0,onClick:r?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=p;
+//# sourceMappingURL=TextEmphasis.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextEmphasis.cjs.js","sources":["../../../../src/components/Text/TextEmphasis/TextEmphasis.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode } from \"react\";\r\nimport \"./TextEmphasis.css\";\r\n\r\nimport { csx } from \"../../../utils\";\r\nimport { useTheme } from \"../../ThemeProvider\";\r\nimport { TooltipTrigger, TooltipTriggerProps } from \"../../Tooltip/Tooltip\";\r\nimport {\r\n  handleInternalNavigation,\r\n  isUrlExternal,\r\n} from \"../../../utils/navigation\";\r\n\r\ninterface TextEmphasisProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  /**\r\n   * The URL that the text emphasis should link to. Turns the element into an `a` tag.\r\n   */\r\n  to?: string;\r\n  /**\r\n   * The content to display within the text emphasis.\r\n   */\r\n  children: ReactNode;\r\n  /**\r\n   * Props to pass to the tooltip trigger. When provided, the text emphasis will be wrapped in a tooltip trigger.\r\n   */\r\n  tooltipProps?: Omit<TooltipTriggerProps, \"children\">;\r\n  /**\r\n   * A test ID.\r\n   */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\n/**\r\n * A component that displays text with emphasis. Provide tooltipProps to wrap the text in a tooltip trigger.\r\n *\r\n * API:\r\n *  - {@link TextEmphasisProps}\r\n *  - extends {@link React.HTMLAttributes}\r\n */\r\nexport const TextEmphasis = ({\r\n  to,\r\n  children,\r\n  tooltipProps,\r\n  \"data-testid\": testId,\r\n}: TextEmphasisProps) => {\r\n  const { className: themeClassName } = useTheme();\r\n\r\n  const content = tooltipProps ? (\r\n    <TooltipTrigger delay={50} closeDelay={75} {...tooltipProps}>\r\n      {children}\r\n    </TooltipTrigger>\r\n  ) : (\r\n    children\r\n  );\r\n\r\n  if (to) {\r\n    const isExternal = isUrlExternal(to);\r\n    return (\r\n      <span\r\n        className={csx(\r\n          \"proton-TextEmphasis\",\r\n          tooltipProps && \"proton-TextEmphasis--tooltip\",\r\n          themeClassName\r\n        )}\r\n      >\r\n        <a\r\n          data-testid={testId}\r\n          href={to}\r\n          target={isExternal ? \"_blank\" : undefined}\r\n          rel={isExternal ? \"noopener noreferrer\" : undefined}\r\n          onClick={\r\n            !isExternal ? (e) => handleInternalNavigation(e, to) : undefined\r\n          }\r\n        >\r\n          {content}\r\n        </a>\r\n      </span>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <span\r\n      className={csx(\r\n        \"proton-TextEmphasis\",\r\n        tooltipProps && \"proton-TextEmphasis--tooltip\",\r\n        themeClassName\r\n      )}\r\n      data-testid={testId}\r\n    >\r\n      {content}\r\n    </span>\r\n  );\r\n};\r\n"],"names":["TextEmphasis","to","children","tooltipProps","testId","themeClassName","useTheme","content","jsx","TooltipTrigger","isExternal","isUrlExternal","csx","e","handleInternalNavigation"],"mappings":"uWAuCaA,EAAe,CAAC,CAC3B,GAAAC,EACA,SAAAC,EACA,aAAAC,EACA,cAAeC,CACjB,IAAyB,CACvB,KAAM,CAAE,UAAWC,CAAe,EAAIC,EAAS,SAAA,EAEzCC,EAAUJ,EACdK,EAAA,kBAAA,IAACC,EAAe,eAAA,CAAA,MAAO,GAAI,WAAY,GAAK,GAAGN,EAC5C,SAAAD,CACH,CAAA,EAEAA,EAGF,GAAID,EAAI,CACA,MAAAS,EAAaC,gBAAcV,CAAE,EAEjC,OAAAO,EAAA,kBAAA,IAAC,OAAA,CACC,UAAWI,EAAA,IACT,sBACAT,GAAgB,+BAChBE,CACF,EAEA,SAAAG,EAAA,kBAAA,IAAC,IAAA,CACC,cAAaJ,EACb,KAAMH,EACN,OAAQS,EAAa,SAAW,OAChC,IAAKA,EAAa,sBAAwB,OAC1C,QACGA,EAAsD,OAAxCG,GAAMC,EAAyB,yBAAAD,EAAGZ,CAAE,EAGpD,SAAAM,CAAA,CACH,CAAA,CAAA,CAGN,CAGE,OAAAC,EAAA,kBAAA,IAAC,OAAA,CACC,UAAWI,EAAA,IACT,sBACAT,GAAgB,+BAChBE,CACF,EACA,cAAaD,EAEZ,SAAAG,CAAA,CAAA,CAGP"}

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

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

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

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

package/dist/components/ThemeProvider.cjs.js

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

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

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

package/dist/components/ThemeProvider.es.js

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

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

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

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

@@ -0,0 +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;
+//# sourceMappingURL=Tombstone.cjs.js.map

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

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

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

@@ -0,0 +1,35 @@
+import { j as p } from "../../node_modules/react/jsx-runtime.es.js";
+/* empty css                 */
+import { useTheme as a } 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",
+  borderRadius: e = "4px"
+}) => {
+  const { hasPalette: r, palette: o } = a(), 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(
+    "div",
+    {
+      className: c(
+        "proton-Tombstone",
+        r && "proton-Tombstone--custom"
+      ),
+      style: {
+        ...n,
+        width: s,
+        height: m,
+        borderRadius: e
+      }
+    }
+  );
+};
+export {
+  l as Tombstone
+};
+//# sourceMappingURL=Tombstone.es.js.map

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),h=require("../../node_modules/react-aria-components/dist/OverlayArrow.cjs.js"),T=require("../../node_modules/react-aria-components/dist/Tooltip.cjs.js"),R=require("react-aria"),a=require("react"),d=require("../ThemeProvider.cjs.js");;/* empty css                        */;/* empty css                 */const m=require("../../utils/string.cjs.js");function v({children:t,arrow:n,...u}){const{style:r,className:o}=d.useTheme();return e.jsxRuntimeExports.jsxs(T.Tooltip,{...u,className:m.csx("proton__Tooltip","proton-Dialog",o),style:r,children:[n&&e.jsxRuntimeExports.jsx(h.OverlayArrow,{className:m.csx("proton__TooltipArrow",o),children:e.jsxRuntimeExports.jsx("svg",{width:8,height:8,viewBox:"0 0 8 8",children:e.jsxRuntimeExports.jsx("path",{d:"M0 0 L4 4 L8 0"})})}),t]})}function E({children:t,delay:n=500,closeDelay:u=500,isDisabled:r,defaultOpen:o,onOpenChange:x,disableTriggerClick:p,content:j,...g}){const[l,s]=a.useState(!1),i=a.useRef(!1),f=a.useRef(!1);return j===""?null:e.jsxRuntimeExports.jsxs(T.TooltipTrigger,{delay:n,closeDelay:u,isDisabled:r,isOpen:l,defaultOpen:o,onOpenChange:c=>{c&&!i.current&&(f.current=!0),x&&x(c),i.current||s(c),i.current=!1},children:[p?e.jsxRuntimeExports.jsx("span",{className:"proton__TooltipTrigger","aria-label":"Show tooltip",children:t}):e.jsxRuntimeExports.jsx(R.Focusable,{children:e.jsxRuntimeExports.jsx("div",{role:"button","aria-label":"Show tooltip",className:"proton__TooltipTrigger","data-hovered":l,onMouseEnter:()=>{r||s(!0)},onMouseLeave:()=>{r||s(!1)},onClick:()=>{p||r||f.current||(i.current=!0,s(!l))},children:t})}),e.jsxRuntimeExports.jsx(v,{...g,children:j})]})}exports.TooltipTrigger=E;
+//# sourceMappingURL=Tooltip.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.cjs.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  Tooltip as AriaTooltip,\r\n  TooltipProps as AriaTooltipProps,\r\n  TooltipTrigger as AriaTooltipTrigger,\r\n  Focusable,\r\n  OverlayArrow,\r\n  TooltipTriggerComponentProps,\r\n} from \"react-aria-components\";\r\n\r\nimport { useRef, useState } from \"react\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\nimport { csx } from \"../../utils\";\r\nimport \"../Dialog/Dialog.css\";\r\nimport \"./Tooltip.css\";\r\n\r\nexport interface TooltipProps extends Omit<AriaTooltipProps, \"children\"> {\r\n  children: React.ReactNode;\r\n  arrow?: boolean;\r\n}\r\n\r\nfunction Tooltip({ children, arrow, ...props }: TooltipProps) {\r\n  const { style, className } = useTheme();\r\n\r\n  return (\r\n    <AriaTooltip\r\n      {...props}\r\n      className={csx(\"proton__Tooltip\", \"proton-Dialog\", className)}\r\n      style={style as React.CSSProperties}\r\n    >\r\n      {arrow && (\r\n        <OverlayArrow className={csx(\"proton__TooltipArrow\", className)}>\r\n          <svg width={8} height={8} viewBox=\"0 0 8 8\">\r\n            <path d=\"M0 0 L4 4 L8 0\" />\r\n          </svg>\r\n        </OverlayArrow>\r\n      )}\r\n\r\n      {children}\r\n    </AriaTooltip>\r\n  );\r\n}\r\n\r\nexport interface TooltipTriggerProps\r\n  extends TooltipProps,\r\n    TooltipTriggerComponentProps {\r\n  children: React.ReactNode;\r\n  /**\r\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\r\n   */\r\n  content: string | React.ReactNode;\r\n  /**\r\n   * Whether to disable the trigger click feature.\r\n   */\r\n  disableTriggerClick?: boolean;\r\n}\r\n\r\n/**\r\n * Proton's TooltipTrigger component deviates from the Aria TooltipTrigger in that on mobile,\r\n * the trigger also opens the tooltip on click as well as hover & focus. This is to improve\r\n * accessibility and usability on mobile.\r\n *\r\n * If you wish to disable the trigger click feature, you can set the `disableTriggerClick` prop.\r\n * This is useful when using an info only Tooltip that might wrap a clickable element.\r\n *\r\n * API:\r\n *  - {@link TooltipTriggerProps}\r\n *  - extends {@link TooltipProps}\r\n *  - extends {@link TooltipTriggerComponentProps}\r\n *\r\n * @example\r\n * ```tsx\r\n    <TooltipTrigger content={...} placement=\"top\" arrow isDisabled={disabled}>\r\n      {children}\r\n    </TooltipTrigger>\r\n * ```\r\n */\r\nexport function TooltipTrigger({\r\n  children,\r\n  // trigger props\r\n  delay = 500,\r\n  closeDelay = 500,\r\n  isDisabled,\r\n  defaultOpen,\r\n  onOpenChange,\r\n  disableTriggerClick,\r\n  // tooltip props\r\n  content,\r\n  ...tooltipProps\r\n}: TooltipTriggerProps) {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const triggerClickRef = useRef<boolean>(false);\r\n  const hasHovered = useRef<boolean>(false);\r\n\r\n  if (content === \"\") return null;\r\n\r\n  return (\r\n    <AriaTooltipTrigger\r\n      delay={delay}\r\n      closeDelay={closeDelay}\r\n      isDisabled={isDisabled}\r\n      isOpen={isOpen}\r\n      defaultOpen={defaultOpen}\r\n      onOpenChange={(openState) => {\r\n        // When opened via hover, we want to disable the trigger click feature as it causes\r\n        // the tooltip state to get out of sync with the trigger state.\r\n        if (openState && !triggerClickRef.current) hasHovered.current = true;\r\n\r\n        if (onOpenChange) onOpenChange(openState);\r\n\r\n        // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\r\n        // it again here.\r\n        if (!triggerClickRef.current) setIsOpen(openState);\r\n        triggerClickRef.current = false;\r\n      }}\r\n    >\r\n      {disableTriggerClick ? (\r\n        <span className=\"proton__TooltipTrigger\" aria-label=\"Show tooltip\">\r\n          {children}\r\n        </span>\r\n      ) : (\r\n        <Focusable>\r\n          <div\r\n            role=\"button\"\r\n            aria-label=\"Show tooltip\"\r\n            className=\"proton__TooltipTrigger\"\r\n            data-hovered={isOpen}\r\n            onMouseEnter={() => {\r\n              if (!isDisabled) {\r\n                setIsOpen(true);\r\n              }\r\n            }}\r\n            onMouseLeave={() => {\r\n              if (!isDisabled) {\r\n                setIsOpen(false);\r\n              }\r\n            }}\r\n            onClick={() => {\r\n              if (disableTriggerClick || isDisabled) return;\r\n\r\n              // Once hovered it's safe to assume the user isn't trying to use via a touch device,\r\n              // so we can safely disable the trigger click feature.\r\n              if (hasHovered.current) return;\r\n\r\n              triggerClickRef.current = true;\r\n              setIsOpen(!isOpen);\r\n            }}\r\n          >\r\n            {children}\r\n          </div>\r\n        </Focusable>\r\n      )}\r\n      <Tooltip {...tooltipProps}>{content}</Tooltip>\r\n    </AriaTooltipTrigger>\r\n  );\r\n}\r\n"],"names":["Tooltip","children","arrow","props","style","className","useTheme","jsxs","AriaTooltip","csx","jsx","OverlayArrow","TooltipTrigger","delay","closeDelay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","content","tooltipProps","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","AriaTooltipTrigger","openState","Focusable"],"mappings":"4eAuBA,SAASA,EAAQ,CAAE,SAAAC,EAAU,MAAAC,EAAO,GAAGC,GAAuB,CAC5D,KAAM,CAAE,MAAAC,EAAO,UAAAC,CAAU,EAAIC,EAAS,SAAA,EAGpC,OAAAC,EAAA,kBAAA,KAACC,EAAA,QAAA,CACE,GAAGL,EACJ,UAAWM,EAAA,IAAI,kBAAmB,gBAAiBJ,CAAS,EAC5D,MAAAD,EAEC,SAAA,CACCF,GAAAQ,EAAA,kBAAA,IAACC,gBAAa,UAAWF,EAAA,IAAI,uBAAwBJ,CAAS,EAC5D,iCAAC,MAAI,CAAA,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,SAAAK,EAAAA,kBAAAA,IAAC,QAAK,EAAE,iBAAiB,EAC3B,CACF,CAAA,EAGDT,CAAA,CAAA,CAAA,CAGP,CAoCO,SAASW,EAAe,CAC7B,SAAAX,EAEA,MAAAY,EAAQ,IACR,WAAAC,EAAa,IACb,WAAAC,EACA,YAAAC,EACA,aAAAC,EACA,oBAAAC,EAEA,QAAAC,EACA,GAAGC,CACL,EAAwB,CACtB,KAAM,CAACC,EAAQC,CAAS,EAAIC,WAAS,EAAK,EACpCC,EAAkBC,SAAgB,EAAK,EACvCC,EAAaD,SAAgB,EAAK,EAEpC,OAAAN,IAAY,GAAW,KAGzBZ,EAAA,kBAAA,KAACoB,EAAA,eAAA,CACC,MAAAd,EACA,WAAAC,EACA,WAAAC,EACA,OAAAM,EACA,YAAAL,EACA,aAAeY,GAAc,CAGvBA,GAAa,CAACJ,EAAgB,YAAoB,QAAU,IAE5DP,KAA2BW,CAAS,EAInCJ,EAAgB,SAASF,EAAUM,CAAS,EACjDJ,EAAgB,QAAU,EAC5B,EAEC,SAAA,CACCN,EAAAR,EAAAA,kBAAAA,IAAC,QAAK,UAAU,yBAAyB,aAAW,eACjD,SAAAT,CACH,CAAA,EAEAS,EAAAA,kBAAAA,IAACmB,EAAAA,UACC,CAAA,SAAAnB,EAAA,kBAAA,IAAC,MAAA,CACC,KAAK,SACL,aAAW,eACX,UAAU,yBACV,eAAcW,EACd,aAAc,IAAM,CACbN,GACHO,EAAU,EAAI,CAElB,EACA,aAAc,IAAM,CACbP,GACHO,EAAU,EAAK,CAEnB,EACA,QAAS,IAAM,CACTJ,GAAuBH,GAIvBW,EAAW,UAEfF,EAAgB,QAAU,GAC1BF,EAAU,CAACD,CAAM,EACnB,EAEC,SAAApB,CAAA,CAAA,EAEL,EAEDS,EAAA,kBAAA,IAAAV,EAAA,CAAS,GAAGoB,EAAe,SAAQD,CAAA,CAAA,CAAA,CAAA,CAAA,CAG1C"}

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

@@ -0,0 +1,78 @@
+import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
+import { OverlayArrow as T } from "../../node_modules/react-aria-components/dist/OverlayArrow.es.js";
+import { TooltipTrigger as g, Tooltip as j } from "../../node_modules/react-aria-components/dist/Tooltip.es.js";
+import { Focusable as $ } from "react-aria";
+import { useState as _, useRef as x } from "react";
+import { useTheme as v } from "../ThemeProvider.es.js";
+/* empty css                      */
+/* empty css               */
+import { csx as d } from "../../utils/string.es.js";
+function w({ children: e, arrow: n, ...l }) {
+  const { style: o, className: t } = v();
+  return /* @__PURE__ */ r.jsxs(
+    j,
+    {
+      ...l,
+      className: d("proton__Tooltip", "proton-Dialog", t),
+      style: o,
+      children: [
+        n && /* @__PURE__ */ r.jsx(T, { className: d("proton__TooltipArrow", t), children: /* @__PURE__ */ r.jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ r.jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        e
+      ]
+    }
+  );
+}
+function k({
+  children: e,
+  // trigger props
+  delay: n = 500,
+  closeDelay: l = 500,
+  isDisabled: o,
+  defaultOpen: t,
+  onOpenChange: c,
+  disableTriggerClick: f,
+  // tooltip props
+  content: u,
+  ...h
+}) {
+  const [a, s] = _(!1), i = x(!1), m = x(!1);
+  return u === "" ? null : /* @__PURE__ */ r.jsxs(
+    g,
+    {
+      delay: n,
+      closeDelay: l,
+      isDisabled: o,
+      isOpen: a,
+      defaultOpen: t,
+      onOpenChange: (p) => {
+        p && !i.current && (m.current = !0), c && c(p), i.current || s(p), i.current = !1;
+      },
+      children: [
+        f ? /* @__PURE__ */ r.jsx("span", { className: "proton__TooltipTrigger", "aria-label": "Show tooltip", children: e }) : /* @__PURE__ */ r.jsx($, { children: /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            role: "button",
+            "aria-label": "Show tooltip",
+            className: "proton__TooltipTrigger",
+            "data-hovered": a,
+            onMouseEnter: () => {
+              o || s(!0);
+            },
+            onMouseLeave: () => {
+              o || s(!1);
+            },
+            onClick: () => {
+              f || o || m.current || (i.current = !0, s(!a));
+            },
+            children: e
+          }
+        ) }),
+        /* @__PURE__ */ r.jsx(w, { ...h, children: u })
+      ]
+    }
+  );
+}
+export {
+  k as TooltipTrigger
+};
+//# sourceMappingURL=Tooltip.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  Tooltip as AriaTooltip,\r\n  TooltipProps as AriaTooltipProps,\r\n  TooltipTrigger as AriaTooltipTrigger,\r\n  Focusable,\r\n  OverlayArrow,\r\n  TooltipTriggerComponentProps,\r\n} from \"react-aria-components\";\r\n\r\nimport { useRef, useState } from \"react\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\nimport { csx } from \"../../utils\";\r\nimport \"../Dialog/Dialog.css\";\r\nimport \"./Tooltip.css\";\r\n\r\nexport interface TooltipProps extends Omit<AriaTooltipProps, \"children\"> {\r\n  children: React.ReactNode;\r\n  arrow?: boolean;\r\n}\r\n\r\nfunction Tooltip({ children, arrow, ...props }: TooltipProps) {\r\n  const { style, className } = useTheme();\r\n\r\n  return (\r\n    <AriaTooltip\r\n      {...props}\r\n      className={csx(\"proton__Tooltip\", \"proton-Dialog\", className)}\r\n      style={style as React.CSSProperties}\r\n    >\r\n      {arrow && (\r\n        <OverlayArrow className={csx(\"proton__TooltipArrow\", className)}>\r\n          <svg width={8} height={8} viewBox=\"0 0 8 8\">\r\n            <path d=\"M0 0 L4 4 L8 0\" />\r\n          </svg>\r\n        </OverlayArrow>\r\n      )}\r\n\r\n      {children}\r\n    </AriaTooltip>\r\n  );\r\n}\r\n\r\nexport interface TooltipTriggerProps\r\n  extends TooltipProps,\r\n    TooltipTriggerComponentProps {\r\n  children: React.ReactNode;\r\n  /**\r\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\r\n   */\r\n  content: string | React.ReactNode;\r\n  /**\r\n   * Whether to disable the trigger click feature.\r\n   */\r\n  disableTriggerClick?: boolean;\r\n}\r\n\r\n/**\r\n * Proton's TooltipTrigger component deviates from the Aria TooltipTrigger in that on mobile,\r\n * the trigger also opens the tooltip on click as well as hover & focus. This is to improve\r\n * accessibility and usability on mobile.\r\n *\r\n * If you wish to disable the trigger click feature, you can set the `disableTriggerClick` prop.\r\n * This is useful when using an info only Tooltip that might wrap a clickable element.\r\n *\r\n * API:\r\n *  - {@link TooltipTriggerProps}\r\n *  - extends {@link TooltipProps}\r\n *  - extends {@link TooltipTriggerComponentProps}\r\n *\r\n * @example\r\n * ```tsx\r\n    <TooltipTrigger content={...} placement=\"top\" arrow isDisabled={disabled}>\r\n      {children}\r\n    </TooltipTrigger>\r\n * ```\r\n */\r\nexport function TooltipTrigger({\r\n  children,\r\n  // trigger props\r\n  delay = 500,\r\n  closeDelay = 500,\r\n  isDisabled,\r\n  defaultOpen,\r\n  onOpenChange,\r\n  disableTriggerClick,\r\n  // tooltip props\r\n  content,\r\n  ...tooltipProps\r\n}: TooltipTriggerProps) {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const triggerClickRef = useRef<boolean>(false);\r\n  const hasHovered = useRef<boolean>(false);\r\n\r\n  if (content === \"\") return null;\r\n\r\n  return (\r\n    <AriaTooltipTrigger\r\n      delay={delay}\r\n      closeDelay={closeDelay}\r\n      isDisabled={isDisabled}\r\n      isOpen={isOpen}\r\n      defaultOpen={defaultOpen}\r\n      onOpenChange={(openState) => {\r\n        // When opened via hover, we want to disable the trigger click feature as it causes\r\n        // the tooltip state to get out of sync with the trigger state.\r\n        if (openState && !triggerClickRef.current) hasHovered.current = true;\r\n\r\n        if (onOpenChange) onOpenChange(openState);\r\n\r\n        // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\r\n        // it again here.\r\n        if (!triggerClickRef.current) setIsOpen(openState);\r\n        triggerClickRef.current = false;\r\n      }}\r\n    >\r\n      {disableTriggerClick ? (\r\n        <span className=\"proton__TooltipTrigger\" aria-label=\"Show tooltip\">\r\n          {children}\r\n        </span>\r\n      ) : (\r\n        <Focusable>\r\n          <div\r\n            role=\"button\"\r\n            aria-label=\"Show tooltip\"\r\n            className=\"proton__TooltipTrigger\"\r\n            data-hovered={isOpen}\r\n            onMouseEnter={() => {\r\n              if (!isDisabled) {\r\n                setIsOpen(true);\r\n              }\r\n            }}\r\n            onMouseLeave={() => {\r\n              if (!isDisabled) {\r\n                setIsOpen(false);\r\n              }\r\n            }}\r\n            onClick={() => {\r\n              if (disableTriggerClick || isDisabled) return;\r\n\r\n              // Once hovered it's safe to assume the user isn't trying to use via a touch device,\r\n              // so we can safely disable the trigger click feature.\r\n              if (hasHovered.current) return;\r\n\r\n              triggerClickRef.current = true;\r\n              setIsOpen(!isOpen);\r\n            }}\r\n          >\r\n            {children}\r\n          </div>\r\n        </Focusable>\r\n      )}\r\n      <Tooltip {...tooltipProps}>{content}</Tooltip>\r\n    </AriaTooltipTrigger>\r\n  );\r\n}\r\n"],"names":["Tooltip","children","arrow","props","style","className","useTheme","jsxs","AriaTooltip","csx","jsx","OverlayArrow","TooltipTrigger","delay","closeDelay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","content","tooltipProps","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","AriaTooltipTrigger","openState","Focusable"],"mappings":";;;;;;;;;AAuBA,SAASA,EAAQ,EAAE,UAAAC,GAAU,OAAAC,GAAO,GAAGC,KAAuB;AAC5D,QAAM,EAAE,OAAAC,GAAO,WAAAC,EAAU,IAAIC,EAAS;AAGpC,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGL;AAAA,MACJ,WAAWM,EAAI,mBAAmB,iBAAiBJ,CAAS;AAAA,MAC5D,OAAAD;AAAA,MAEC,UAAA;AAAA,QACCF,KAAAQ,gBAAAA,EAAA,IAACC,KAAa,WAAWF,EAAI,wBAAwBJ,CAAS,GAC5D,gCAAC,OAAI,EAAA,OAAO,GAAG,QAAQ,GAAG,SAAQ,WAChC,UAAAK,gBAAAA,EAAAA,IAAC,UAAK,GAAE,kBAAiB,GAC3B,EACF,CAAA;AAAA,QAGDT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAoCO,SAASW,EAAe;AAAA,EAC7B,UAAAX;AAAA;AAAA,EAEA,OAAAY,IAAQ;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC;AAAA;AAAA,EAEA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAkBC,EAAgB,EAAK,GACvCC,IAAaD,EAAgB,EAAK;AAEpC,SAAAN,MAAY,KAAW,OAGzBZ,gBAAAA,EAAA;AAAA,IAACoB;AAAAA,IAAA;AAAA,MACC,OAAAd;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QAAAM;AAAA,MACA,aAAAL;AAAA,MACA,cAAc,CAACY,MAAc;AAG3B,QAAIA,KAAa,CAACJ,EAAgB,cAAoB,UAAU,KAE5DP,OAA2BW,CAAS,GAInCJ,EAAgB,WAASF,EAAUM,CAAS,GACjDJ,EAAgB,UAAU;AAAA,MAC5B;AAAA,MAEC,UAAA;AAAA,QACCN,IAAAR,gBAAAA,EAAAA,IAAC,UAAK,WAAU,0BAAyB,cAAW,gBACjD,UAAAT,EACH,CAAA,IAEAS,gBAAAA,EAAAA,IAACmB,GACC,EAAA,UAAAnB,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,WAAU;AAAA,YACV,gBAAcW;AAAA,YACd,cAAc,MAAM;AAClB,cAAKN,KACHO,EAAU,EAAI;AAAA,YAElB;AAAA,YACA,cAAc,MAAM;AAClB,cAAKP,KACHO,EAAU,EAAK;AAAA,YAEnB;AAAA,YACA,SAAS,MAAM;AACb,cAAIJ,KAAuBH,KAIvBW,EAAW,YAEfF,EAAgB,UAAU,IAC1BF,EAAU,CAACD,CAAM;AAAA,YACnB;AAAA,YAEC,UAAApB;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QAEDS,gBAAAA,EAAA,IAAAV,GAAA,EAAS,GAAGoB,GAAe,UAAQD,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../node_modules/react/jsx-runtime.cjs.js"),v=require("react"),H=require("../ThemeProvider.cjs.js");;/* empty css                  */const L=require("./WaveformBar.cjs.js"),$=require("../../utils/string.cjs.js"),X=K(100);function F({data:e,resolution:t=2,startDuration:s,endDuration:a,currentTime:m=0,showTimestamps:g=!1,totalDuration:l,disabled:f,disabledMessage:d,onClick:h,"data-testid":p}){var P;const{className:_}=H.useTheme(),o=v.useRef(null),[W,B]=v.useState([]),[j,b]=v.useState(null),[w,I]=v.useState(!1),[N,q]=v.useState(!1),y=e||X,M=t;v.useEffect(()=>{if(!o.current)return;const r=i=>{const x=Math.floor(i/(t+M)),R=G(y,x);B(R)},n=o.current.clientWidth;r(n);const c=new ResizeObserver(i=>{i&&i[0]&&r(i[0].contentRect.width)});return c.observe(o.current),()=>c.disconnect()},[y,t,M]),v.useEffect(()=>{const r=setTimeout(()=>I(!0),50),n=setTimeout(()=>q(!0),500);return()=>{clearTimeout(r),clearTimeout(n)}},[]);const A=r=>{if(!o.current)return;const n=o.current.getBoundingClientRect(),i=(r.clientX-n.left)/n.width*l;b(i)},z=()=>{b(null)},O=t+M,E=(r,n)=>{var x;const c=r/l*100;return(n==="start"?Math.floor(c/100*W.length):Math.ceil(c/100*W.length))*O/((x=o.current)==null?void 0:x.clientWidth)*100},V=(P=o.current)==null?void 0:P.clientWidth,S=v.useMemo(()=>f&&d?d:e?null:"Waveform Unavailable",[f,d,e]);return u.jsxRuntimeExports.jsxs("div",{className:$.csx("proton-Waveform",_),"data-testid":p,children:[g&&u.jsxRuntimeExports.jsx(T,{direction:"left",seconds:m}),u.jsxRuntimeExports.jsxs("div",{ref:o,className:"proton-Waveform__container",onMouseMove:A,onMouseLeave:z,onClick:r=>{if(!o.current||f)return;const n=o.current.getBoundingClientRect(),i=(r.clientX-n.left)/n.width*l;h==null||h(i,r)},"data-disabled":f,"data-testid":"waveform-container",children:[s!==void 0&&a!==void 0&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__active-region",style:{left:o.current?`calc(${E(s,"start")}%`:"0%",right:o.current?`calc(${100-E(a,"end")}% - 2px)`:"0%"}}),j!==null&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__hover-line",style:{left:`${j/l*100}%`}}),W.map((r,n)=>{const c=n/W.length*l,i=s!==void 0&&a!==void 0&&(c<s||c>a),x=m===0?!1:c<=m,R=j!==null&&c<=j;return u.jsxRuntimeExports.jsx(L.WaveformBar,{amplitude:r,isDisabled:f||i,isPlayed:x,isHovered:R,isVisible:w,hasAnimated:N,resolution:t,spacing:M,index:n},n)})]}),S&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__bar-unavailable",style:{fontSize:V<325?"0.85rem":"1rem"},children:S}),g&&u.jsxRuntimeExports.jsx(T,{direction:"right",seconds:l})]})}function T({direction:e,seconds:t}){return u.jsxRuntimeExports.jsx("div",{className:$.csx("proton-Waveform__timestamp",`proton-Waveform__timestamp--${e}`),children:U(t)})}function U(e){const t=Math.floor(e/60),s=Math.floor(e%60);return`${t}:${s<10?"0":""}${s.toFixed(0)}`}function G(e,t){const s=e.length,a=s/t,m=new Array(t).fill(0).map((g,l)=>{const f=l*a,d=Math.floor(f),h=Math.min(d+1,s-1),p=f-d;return e[d]*(1-p)+e[h]*p});return J(m)}function J(e){const t=Math.min(...e),s=Math.max(...e);return e.map(a=>{const m=(a-t)/(s-t);return Math.max(m*.8+.1,.1)})}function K(e){return Array.from({length:e},(t,s)=>{const m=s/(e-1)*6*2*Math.PI-Math.PI/2;return Math.sin(m)*.5+.5})}exports.Waveform=F;
+//# sourceMappingURL=Waveform.cjs.js.map

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

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