@lightsparkdev/ui 1.0.8 → 1.0.10

package/dist/{chunk-24PXYMSU.js → chunk-VASG2BKI.js}

@@ -17,6 +17,7 @@ var FONT_FAMILIES = {
 };
 var LINE_HEIGHTS = {
   ["Lightspark" /* Lightspark */]: {
+    "8xl": "72px",
     "7xl": "72px",
     "6xl": "60px",
     "5xl": "44px",
@@ -31,6 +32,7 @@ var LINE_HEIGHTS = {
     xs: "16px"
   },
   ["LightsparkDocs" /* LightsparkDocs */]: {
+    "8xl": "72px",
     "7xl": "72px",
     "6xl": "60px",
     "5xl": "44px",
@@ -45,6 +47,9 @@ var LINE_HEIGHTS = {
     xs: "16px"
   },
   ["UmaAuthSdk" /* UmaAuthSdk */]: {
+    "8xl": "72px",
+    "7xl": "72px",
+    "6xl": "72px",
     "5xl": "72px",
     "4xl": "60px",
     "3xl": "44px",
@@ -57,6 +62,9 @@ var LINE_HEIGHTS = {
     xs: "20px"
   },
   ["UmameDocs" /* UmameDocs */]: {
+    "8xl": "72px",
+    "7xl": "72px",
+    "6xl": "72px",
     "5xl": "72px",
     "4xl": "60px",
     "3xl": "44px",
@@ -75,6 +83,7 @@ var LINE_HEIGHTS = {
     "5xl": "40px",
     "4xl": "36px",
     "3xl": "32px",
+    "2xs": "16px",
     "2xl": "28px",
     lg: "22px",
     md: "20px",
@@ -83,6 +92,12 @@ var LINE_HEIGHTS = {
     xs: "16px"
   }
 };
+var lineHeightKeys = Object.keys(
+  LINE_HEIGHTS.Lightspark
+);
+function getLineHeightFromKey(key, theme) {
+  return theme.typography.lineHeights[key];
+}
 var FONT_WEIGHTS = {
   main: {
     ExtraBold: 800,
@@ -4046,11 +4061,32 @@ var getTypographyString = (theme, typographyType, size) => {
   `;
   return typographyStr;
 };
+function getLineHeightForTypographyType(type, size, theme) {
+  const desktopTokenGroups = theme.typography.types["Desktop"];
+  const desktopTokenSizes = desktopTokenGroups[type];
+  if (!desktopTokenSizes) {
+    console.error(
+      `getLineHeightForTypographyType: Attempted to use a typography type "${type}" that does not exist in the current theme. Falling back to default tokens.`
+    );
+    return defaultTokens.lineHeight;
+  }
+  const desktopTokens = desktopTokenSizes[size];
+  if (!desktopTokens) {
+    console.error(
+      `getLineHeightForTypographyType: Attempted to use a typography size "${size}" that does not exist for typography type "${type}" in the current theme. Falling back to default tokens.`
+    );
+    return defaultTokens.lineHeight;
+  }
+  return desktopTokens.lineHeight;
+}
 
 export {
   TypographyGroup,
+  lineHeightKeys,
+  getLineHeightFromKey,
   TokenSize,
   TypographyType,
   getTypography,
-  getTypographyString
+  getTypographyString,
+  getLineHeightForTypographyType
 };

package/dist/chunk-VFDFLLP7.js

@@ -0,0 +1,416 @@
+import {
+  InfoIconTooltip
+} from "./chunk-RSTCESAL.js";
+import {
+  ClipboardTextField
+} from "./chunk-SAI5MDK3.js";
+import {
+  useClipboard
+} from "./chunk-NFQP7P3D.js";
+import {
+  ignoreSSRWarning,
+  lineClamp,
+  overflowAutoWithoutScrollbars
+} from "./chunk-HEXTPM3C.js";
+import {
+  Loading
+} from "./chunk-FFOE2R32.js";
+import {
+  Icon
+} from "./chunk-NGSQ2OOV.js";
+import {
+  standardBorderRadius,
+  standardContentInset
+} from "./chunk-YZM4ALKD.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  Link,
+  replaceParams,
+  useNavigate
+} from "./chunk-HJQIDDKT.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/Table/Table.tsx
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { isObject } from "lodash-es";
+import { Fragment, useCallback, useMemo } from "react";
+import { useTable } from "react-table";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+var isObjectCell = (value) => {
+  return isObject(value) && "text" in value && typeof value.text === "string";
+};
+var isLinkCell = (value) => {
+  return isObjectCell(value) && ("link" in value || "to" in value);
+};
+var isClipboardCell = (value) => {
+  return isObjectCell(value) && "canCopy" in value;
+};
+var isLinkAndClipboardCell = (value) => {
+  return isObjectCell(value) && ("link" in value || "to" in value) && "canCopy" in value;
+};
+var isMultilineCell = (value) => {
+  return isObjectCell(value) && "multiline" in value;
+};
+function Table({
+  columns,
+  data,
+  loading,
+  onClickRow,
+  emptyState,
+  clipboardCallbacks
+}) {
+  const navigate = useNavigate();
+  const { canWriteToClipboard, writeTextToClipboard } = useClipboard(clipboardCallbacks);
+  const onClickCopy = useCallback(
+    (value) => (event) => {
+      event.stopPropagation();
+      void writeTextToClipboard(value);
+    },
+    [writeTextToClipboard]
+  );
+  const mappedColumns = useMemo(
+    () => columns.map((column) => __spreadProps(__spreadValues({}, column), {
+      Header: typeof column.Header === "string" ? column.Header : /* @__PURE__ */ jsxs("div", { children: [
+        column.Header.name,
+        /* @__PURE__ */ jsx(
+          InfoIconTooltip,
+          {
+            id: `tooltip-${column.Header.name}`,
+            content: column.Header.tooltip || "",
+            verticalAlign: -2
+          }
+        )
+      ] }),
+      accessor: column.accessor.toString(),
+      Cell: ({ value }) => {
+        let content = value;
+        let icon = null;
+        if (isObjectCell(value)) {
+          icon = value.icon ? /* @__PURE__ */ jsx(Icon, { name: value.icon, width: 14, mr: 4, color: "c4Neutral" }) : null;
+          if (isMultilineCell(value)) {
+            content = /* @__PURE__ */ jsxs(LineClampSpan, { children: [
+              icon,
+              value.text
+            ] });
+          } else {
+            content = /* @__PURE__ */ jsxs(Fragment, { children: [
+              icon,
+              value.text
+            ] });
+          }
+        }
+        if (isLinkAndClipboardCell(value)) {
+          const copyButton = canWriteToClipboard && /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              onClick: onClickCopy(value.text),
+              role: "button",
+              tabIndex: 0,
+              children: /* @__PURE__ */ jsx(Icon, { name: "Copy", width: 16, mr: 12 })
+            }
+          );
+          return value.link ? /* @__PURE__ */ jsxs(LinkClipboardCell, { children: [
+            /* @__PURE__ */ jsxs(
+              HoverableLinkCell,
+              {
+                href: value.link,
+                target: "_blank",
+                rel: "noreferrer",
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "LinkIcon", width: 12 }),
+                  /* @__PURE__ */ jsx(LinkCellContent, { children: content })
+                ]
+              }
+            ),
+            copyButton
+          ] }) : value.to ? /* @__PURE__ */ jsxs(HoverableCellWrapper, { children: [
+            /* @__PURE__ */ jsxs(
+              Link,
+              {
+                to: value.to,
+                params: value.toParams,
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                children: [
+                  icon,
+                  /* @__PURE__ */ jsx(LinkCellContent, { children: value.text })
+                ]
+              }
+            ),
+            copyButton
+          ] }) : /* @__PURE__ */ jsx("span", { children: content });
+        } else if (isLinkCell(value)) {
+          return value.link ? /* @__PURE__ */ jsxs(
+            HoverableLinkCell,
+            {
+              href: value.link,
+              target: "_blank",
+              rel: "noreferrer",
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "LinkIcon", width: 12 }),
+                /* @__PURE__ */ jsx(LinkCellContent, { children: content })
+              ]
+            }
+          ) : value.to ? /* @__PURE__ */ jsx(HoverableCellWrapper, { children: /* @__PURE__ */ jsxs(
+            Link,
+            {
+              to: value.to,
+              params: value.toParams,
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              children: [
+                icon,
+                /* @__PURE__ */ jsx(LinkCellContent, { children: value.text })
+              ]
+            }
+          ) }) : /* @__PURE__ */ jsx("span", { children: content });
+        } else if (isClipboardCell(value)) {
+          let maxLines = 1;
+          let maxChars = void 0;
+          if (isMultilineCell(value)) {
+            maxLines = 2;
+          } else {
+            maxChars = value.maxChars || 16;
+          }
+          const ellipsisPosition = value.ellipsisPosition || "middle";
+          return /* @__PURE__ */ jsxs(HoverableCellWrapper, { children: [
+            icon,
+            /* @__PURE__ */ jsx(
+              ClipboardTextField,
+              {
+                value: value.text,
+                elide: maxChars ? {
+                  maxChars,
+                  ellipsisPosition
+                } : void 0,
+                stopPropagation: true,
+                maxLines,
+                icon: true,
+                iconSide: "right",
+                clipboardCallbacks
+              }
+            )
+          ] });
+        }
+        return /* @__PURE__ */ jsx("span", { children: content });
+      }
+    })),
+    [columns, canWriteToClipboard, onClickCopy, clipboardCallbacks]
+  );
+  const tableInstance = useTable({ columns: mappedColumns, data });
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;
+  function onClickDataRow(event, row) {
+    const onClickRowResult = onClickRow ? onClickRow(row) : null;
+    if (onClickRowResult) {
+      const newTabKey = event.metaKey || event.ctrlKey;
+      if ((onClickRowResult == null ? void 0 : onClickRowResult.link) || (onClickRowResult == null ? void 0 : onClickRowResult.to) && newTabKey) {
+        let link = onClickRowResult == null ? void 0 : onClickRowResult.link;
+        if (!link) {
+          link = replaceParams(onClickRowResult.to, onClickRowResult.params);
+        }
+        const target = newTabKey ? "_blank" : void 0;
+        window.open(link, target);
+      } else if (onClickRowResult == null ? void 0 : onClickRowResult.to) {
+        navigate(onClickRowResult.to, onClickRowResult.params);
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs(TableWrapper, { children: [
+    /* @__PURE__ */ jsxs(StyledTable, __spreadProps(__spreadValues({}, getTableProps()), { clickable: Boolean(onClickRow), children: [
+      /* @__PURE__ */ jsx("thead", {
+        // Loop over the header rows
+        children: headerGroups.map((headerGroup) => (
+          // Apply the header row props
+          /* @__PURE__ */ jsx("tr", __spreadProps(__spreadValues({}, headerGroup.getHeaderGroupProps()), {
+            // Loop over the headers in each row
+            children: headerGroup.headers.map((column) => (
+              // Apply the header cell props
+              /* @__PURE__ */ jsx("th", __spreadProps(__spreadValues({}, column.getHeaderProps()), {
+                // Render the header
+                children: column.render("Header")
+              }))
+            ))
+          }))
+        ))
+      }),
+      /* @__PURE__ */ jsx("tbody", __spreadProps(__spreadValues({}, getTableBodyProps()), {
+        // Loop over the table rows
+        children: rows.map((row) => {
+          prepareRow(row);
+          return (
+            // Apply the row props
+            /* @__PURE__ */ jsx(
+              "tr",
+              __spreadProps(__spreadValues({}, row.getRowProps()), {
+                onClick: (event) => onClickDataRow(event, row),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter") {
+                    onClickDataRow(event, row);
+                  }
+                },
+                tabIndex: 0,
+                // Loop over the rows cells
+                children: row.cells.map((cell) => {
+                  return /* @__PURE__ */ jsx("td", __spreadProps(__spreadValues({}, cell.getCellProps()), {
+                    // Render the cell contents
+                    children: cell.render("Cell")
+                  }));
+                })
+              })
+            )
+          );
+        })
+      }))
+    ] })),
+    emptyState,
+    loading && /* @__PURE__ */ jsx(Loading, {})
+  ] });
+}
+var TableWrapper = styled.div`
+  position: relative;
+  min-height: 300px;
+  ${overflowAutoWithoutScrollbars}
+`;
+var hoverCellStyles = css`
+  cursor: pointer;
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 0.6;
+  }
+`;
+var LinkCellContent = styled.span`
+  vertical-align: middle;
+`;
+var HoverableCellWrapper = styled.div`
+  ${hoverCellStyles}
+
+  display: flex !important;
+  gap: 4px;
+`;
+var LinkClipboardCell = styled.a`
+  ${hoverCellStyles}
+
+  color: ${({ theme }) => theme.hcNeutral};
+  display: flex !important;
+  gap: 4px;
+`;
+var HoverableLinkCell = styled.a`
+  ${hoverCellStyles}
+
+  color: ${({ theme }) => theme.hcNeutral};
+  display: flex !important;
+  gap: 4px;
+`;
+var CopyButton = styled.span`
+  overflow: hidden;
+  align-items: center;
+  cursor: pointer;
+  display: inline-table;
+`;
+var LineClampSpan = styled.span`
+  ${lineClamp(2)}
+`;
+var cellPaddingPx = 15;
+var StyledTable = styled.table`
+  position: relative;
+  border-spacing: 0;
+  width: 100%;
+
+  ${bp.lg(`
+    padding-left: ${standardContentInset.lgPx}px;
+    padding-right: ${standardContentInset.lgPx}px;
+  `)}
+  ${bp.sm(`
+    padding-left: ${standardContentInset.smPx}px;
+    padding-right: ${standardContentInset.smPx}px;
+  `)}
+  ${bp.minSmMaxLg(`
+    padding-left: ${standardContentInset.minSmMaxLgPx}px;
+    padding-right: ${standardContentInset.minSmMaxLgPx}px;
+  `)}
+
+  th {
+    max-width: 200px;
+    text-align: left;
+    padding: ${cellPaddingPx}px 0px;
+    border-bottom: 1px solid ${({ theme }) => theme.c1Neutral};
+    padding: ${cellPaddingPx}px;
+    &:first-of-type {
+      padding-left: 0px;
+    }
+    &:last-of-type {
+      padding-right: 0px;
+    }
+    &:last-of-type {
+      text-align: right;
+    }
+  }
+
+  tr {
+    cursor: ${({ clickable }) => clickable ? "pointer" : "default"};
+    position: relative;
+
+    &:hover td:first-child:before ${ignoreSSRWarning} {
+      ${standardBorderRadius(16)}
+      content: "";
+      position: absolute;
+      /* Position offsets inside trs do not properly follow relatively positioned
+         parents in Safari (see bug https://bit.ly/49dViWy), use margin instead: */
+      margin-top: 5px;
+      left: -12px;
+      width: calc(100% + 24px);
+      height: 32px;
+      border: 1px solid ${({ theme }) => theme.c1Neutral};
+      pointer-events: none;
+    }
+  }
+
+  td {
+    max-width: 200px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: 0 ${cellPaddingPx}px;
+    white-space: nowrap;
+    & > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: block;
+      padding: ${cellPaddingPx}px 0px;
+      & > * {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+      }
+    }
+    &:first-of-type {
+      padding-left: 0px;
+    }
+    &:last-of-type {
+      text-align: right;
+      padding-right: 0px;
+    }
+    & span:has(> ${LineClampSpan}),
+    & ${LineClampSpan} {
+      white-space: normal;
+    }
+  }
+`;
+
+export {
+  Table
+};

package/dist/chunk-VVA3TL2D.js

@@ -0,0 +1,90 @@
+import {
+  toReactNodes
+} from "./chunk-XSMF72UT.js";
+import {
+  isCurrencyAmountNode,
+  isIconNode,
+  isLinkNode,
+  isNextLinkNode,
+  isTextNode
+} from "./chunk-G5IVQ4O3.js";
+import {
+  isString
+} from "./chunk-EDN2QDCB.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/utils/toReactNodes/setReactNodesTypography.tsx
+import { ensureArray } from "@lightsparkdev/core";
+function isNonTypographicReactNode(node) {
+  return typeof node === "undefined" || node === null || isIconNode(node);
+}
+function setReactNodesTypography(nodesArg, typography, replaceExistingTypography = true) {
+  const nodes = ensureArray(nodesArg);
+  const nodesWithTypography = nodes.map((node) => {
+    if (isNonTypographicReactNode(node)) {
+      return node;
+    } else if (isLinkNode(node) && typography.link) {
+      return {
+        link: __spreadProps(__spreadValues({}, node.link), {
+          typography: replaceExistingTypography ? typography.link : node.link.typography || typography.link
+        })
+      };
+    } else if (isNextLinkNode(node) && typography.nextLink) {
+      return {
+        nextLink: __spreadProps(__spreadValues({}, node.nextLink), {
+          typography: replaceExistingTypography ? typography.nextLink : node.nextLink.typography || typography.nextLink
+        })
+      };
+    } else if (isCurrencyAmountNode(node) && typography.currencyAmount) {
+      return {
+        currencyAmount: __spreadProps(__spreadValues({}, node.currencyAmount), {
+          typography: typography.currencyAmount
+        })
+      };
+    } else if ((isTextNode(node) || isString(node)) && typography.text) {
+      return setTextNodeTypography(
+        node,
+        typography.text,
+        replaceExistingTypography
+      );
+    }
+    return node;
+  });
+  return nodesWithTypography;
+}
+function setTextNodeTypography(node, typography, replaceExistingTypography = true) {
+  if (isString(node)) {
+    return {
+      text: node,
+      typography
+    };
+  }
+  const useExistingTypography = !replaceExistingTypography && "typography" in node ? node.typography : void 0;
+  return __spreadProps(__spreadValues({}, node), {
+    typography: useExistingTypography || typography
+  });
+}
+function toReactNodesWithTypographyMap(nodesArg, nodesTypographyMap) {
+  if (!nodesArg) {
+    return null;
+  }
+  const nodesWithTypography = setReactNodesTypography(
+    nodesArg,
+    nodesTypographyMap
+  );
+  const nodes = toReactNodes(nodesWithTypography);
+  return nodes;
+}
+function setDefaultReactNodesTypography(nodesArg, nodesTypographyMap) {
+  return setReactNodesTypography(nodesArg, nodesTypographyMap, false);
+}
+
+export {
+  isNonTypographicReactNode,
+  setReactNodesTypography,
+  toReactNodesWithTypographyMap,
+  setDefaultReactNodesTypography
+};

package/dist/{chunk-5O6LWFY4.cjs → chunk-W3PPZLB6.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkAZRC3MXCcjs = require('./chunk-AZRC3MXC.cjs');
+var _chunkOVJZVL57cjs = require('./chunk-OVJZVL57.cjs');
 
 
-var _chunkG5HBO2FIcjs = require('./chunk-G5HBO2FI.cjs');
+var _chunkGEMBOYJDcjs = require('./chunk-GEMBOYJD.cjs');
 
 
-var _chunkZBBVZQKJcjs = require('./chunk-ZBBVZQKJ.cjs');
+var _chunkSEOJ475Zcjs = require('./chunk-SEOJ475Z.cjs');
 
 // src/components/typography/BodyStrong.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -23,7 +23,7 @@ var BodyStrong = ({
 }) => {
   let reactNodes = children || null;
   if (content) {
-    reactNodes = _chunkAZRC3MXCcjs.toNonTypographicReactNodes.call(void 0, content);
+    reactNodes = _chunkSEOJ475Zcjs.toReactNodesBase.call(void 0, content);
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     StyledBodyStrong,
@@ -39,8 +39,8 @@ var BodyStrong = ({
   );
 };
 var StyledBodyStrong = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkZBBVZQKJcjs.applyTypography.call(void 0, theme, "Body Strong", size, colorProp)}
-  ${_chunkG5HBO2FIcjs.typographyStyles}
+  ${({ theme, size, colorProp }) => _chunkGEMBOYJDcjs.applyTypography.call(void 0, theme, "Body Strong", size, colorProp)}
+  ${_chunkOVJZVL57cjs.typographyStyles}
 `;
 
 

package/dist/{chunk-XZKD27Y2.cjs → chunk-W5GHORWN.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkAZRC3MXCcjs = require('./chunk-AZRC3MXC.cjs');
+var _chunkOVJZVL57cjs = require('./chunk-OVJZVL57.cjs');
 
 
-var _chunkG5HBO2FIcjs = require('./chunk-G5HBO2FI.cjs');
+var _chunkGEMBOYJDcjs = require('./chunk-GEMBOYJD.cjs');
 
 
-var _chunkZBBVZQKJcjs = require('./chunk-ZBBVZQKJ.cjs');
+var _chunkSEOJ475Zcjs = require('./chunk-SEOJ475Z.cjs');
 
 // src/components/typography/Label.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -23,7 +23,7 @@ var Label = ({
 }) => {
   let reactNodes = children || null;
   if (content) {
-    reactNodes = _chunkAZRC3MXCcjs.toNonTypographicReactNodes.call(void 0, content);
+    reactNodes = _chunkSEOJ475Zcjs.toReactNodesBase.call(void 0, content);
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     StyledLabel,
@@ -39,8 +39,8 @@ var Label = ({
   );
 };
 var StyledLabel = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkZBBVZQKJcjs.applyTypography.call(void 0, theme, "Label", size, colorProp)}
-  ${_chunkG5HBO2FIcjs.typographyStyles}
+  ${({ theme, size, colorProp }) => _chunkGEMBOYJDcjs.applyTypography.call(void 0, theme, "Label", size, colorProp)}
+  ${_chunkOVJZVL57cjs.typographyStyles}
 `;