@lightsparkdev/ui 0.0.0 → 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @lightsparkdev/ui
+
+## 0.0.2
+
+### Patch Changes
+
+- 35513da: Upgrade dependencies
+- 35513da: [ui] Fix getHeadlineText return
+- Updated dependencies [35513da]
+  - @lightsparkdev/core@1.0.12
+
+## 0.0.1
+
+### Patch Changes
+
+- 43dc882: Upgrade to Typescript 5, lint config changes
+- Updated dependencies [43dc882]
+  - @lightsparkdev/core@1.0.11

package/dist/chunk-2GX5Y72Y.js

@@ -0,0 +1,78 @@
+import {
+  themeOr
+} from "./chunk-Z4M2ODOW.js";
+
+// src/components/ProgressBar.tsx
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+var defaultProps = {
+  isSm: false,
+  stepDuration: 0.5
+};
+function ProgressBar({
+  background,
+  progressPercentage,
+  isSm = defaultProps.isSm,
+  stepDuration = defaultProps.stepDuration
+}) {
+  const [percentage, setPercentage] = useState(5);
+  if (progressPercentage === void 0) {
+    setTimeout(() => {
+      setPercentage(100);
+    }, 0);
+  }
+  useEffect(() => {
+    if (progressPercentage !== void 0) {
+      setPercentage(progressPercentage);
+    }
+  }, [progressPercentage]);
+  return /* @__PURE__ */ jsx(ProgressBarContainer, { isSm, children: /* @__PURE__ */ jsx(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ jsx(
+    BarBg,
+    {
+      background,
+      isSm,
+      percentage,
+      stepDuration
+    }
+  ) }) });
+}
+ProgressBar.defaultProps = defaultProps;
+var ProgressBarContainer = styled.div`
+  background-color: ${({ theme }) => themeOr(theme.c05Neutral, theme.c1Neutral)({ theme })};
+  border-radius: 16px;
+  box-sizing: border-box;
+  display: flex;
+  height: ${({ isSm }) => isSm ? "6px" : "16px"};
+  justify-content: flex-start;
+  width: 100%;
+  position: relative;
+`;
+var BarBg = styled.div`
+  border-radius: 16px;
+  width: ${({ percentage }) => 100 / percentage * 100}%;
+  height: 100%;
+
+  background: ${({ background }) => background ? background : `
+  linear-gradient(
+    90deg,
+    #000000 -25.9%,
+    #1b4077 14.55%,
+    #a152c7 82.22%,
+    #3f2e7e 115.32%
+  )`};
+`;
+var Bar = styled.div`
+  overflow: hidden;
+  border-radius: ${({ isSm }) => isSm ? "6px" : "16px"};
+  box-sizing: border-box;
+  display: inline-block;
+  height: ${({ isSm }) => isSm ? "6px" : "16px"};
+  width: ${(props) => props.percentage}%;
+  transition: width ${({ stepDuration }) => stepDuration}s
+    cubic-bezier(0.16, 0.3, 0.18, 1);
+`;
+
+export {
+  ProgressBar
+};

package/dist/{chunk-CQDQFIWT.js → chunk-345XTQ55.js}

@@ -1,17 +1,23 @@
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-Z4M2ODOW.js";
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-F4FIOIYM.js";
 
 // src/styles/fonts/typography/Title.tsx
 import styled from "@emotion/styled";
 import { jsx } from "@emotion/react/jsx-runtime";
-var Title = ({ children, color, size = "Medium" /* Medium */ }) => {
-  return /* @__PURE__ */ jsx(StyledTitle, { size, color, children });
+var Title = ({
+  children,
+  color,
+  size = "Medium" /* Medium */,
+  block = false
+}) => {
+  return /* @__PURE__ */ jsx(StyledTitle, { size, color, block, children });
 };
 var StyledTitle = styled.span`
+  ${({ block }) => block ? "display: block;" : ""}
   color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
   ${({ theme, size }) => {
   return size ? getTypographyString(theme.typography[theme.app].Title[size]) : "";

package/dist/{chunk-7NQH4LBZ.js → chunk-4Y2M2HEF.js}

@@ -1,9 +1,9 @@
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-Z4M2ODOW.js";
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-F4FIOIYM.js";
 
 // src/styles/fonts/typography/Body.tsx
 import styled from "@emotion/styled";

package/dist/chunk-5XTI555J.js

@@ -0,0 +1,57 @@
+import {
+  Icon
+} from "./chunk-HC4KIHUT.js";
+
+// src/components/ContentTable.tsx
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function ContentTable({
+  columns,
+  rows
+}) {
+  return /* @__PURE__ */ jsxs(StyledContentTable, { children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", {}),
+      columns.map((column) => /* @__PURE__ */ jsx("th", { children: column.title }, column.key))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: row.title }),
+      columns.map((column) => {
+        const value = row[column.key];
+        return /* @__PURE__ */ jsx("td", { children: value === true ? /* @__PURE__ */ jsx(Icon, { name: "CheckmarkCircleGreen", width: 16 }) : value }, column.key);
+      })
+    ] }, index)) })
+  ] });
+}
+var StyledContentTable = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid ${({ theme }) => theme.c1Neutral};
+  color: ${({ theme }) => theme.c6Neutral};
+
+  tr:last-child td:first-child {
+    border-bottom-left-radius: 10px;
+  }
+
+  tr:last-child td:last-child {
+    border-bottom-right-radius: 10px;
+  }
+
+  th,
+  td {
+    padding: 26px 12px;
+    border: 1px solid #e5e5e5;
+  }
+  th {
+    text-align: center;
+  }
+  td {
+    vertical-align: middle;
+    text-align: center;
+  }
+`;
+
+export {
+  ContentTable,
+  StyledContentTable
+};

package/dist/{chunk-FETTWCK3.js → chunk-6CJNPRC3.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-HC4KIHUT.js";
 
 // src/components/CurrencyAmount.tsx
 import { gql } from "@apollo/client";

package/dist/chunk-7VX4OOSZ.js

@@ -0,0 +1,29 @@
+import {
+  colors
+} from "./chunk-Z4M2ODOW.js";
+import {
+  getTypographyString
+} from "./chunk-F4FIOIYM.js";
+
+// src/styles/fonts/typography/Overline.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var Overline = ({
+  children,
+  color,
+  size = "Medium" /* Medium */
+}) => {
+  return /* @__PURE__ */ jsx(StyledOverline, { size, color, children });
+};
+var StyledOverline = styled.span`
+  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+  ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app].Overline[size]) : "";
+}}
+  cursor: inherit;
+`;
+
+export {
+  Overline,
+  StyledOverline
+};

package/dist/{chunk-W4GDCWKZ.js → chunk-7ZTWDJAE.js}

@@ -1,9 +1,9 @@
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-Z4M2ODOW.js";
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-F4FIOIYM.js";
 
 // src/styles/fonts/typography/Headline.tsx
 import styled from "@emotion/styled";
@@ -23,7 +23,7 @@ var getHeadlineText = (element) => {
     return getHeadlineText(element[0]);
   }
   if (isReactNodeWithChildren(element)) {
-    getHeadlineText(element.props.children);
+    return getHeadlineText(element.props.children);
   }
   throw new Error(
     "Could not find text in Headline element: " + (element == null ? void 0 : element.toString())

package/dist/chunk-ABA75YLN.js

@@ -0,0 +1,38 @@
+import {
+  colors
+} from "./chunk-Z4M2ODOW.js";
+import {
+  getTypographyString
+} from "./chunk-F4FIOIYM.js";
+
+// src/styles/fonts/typography/LabelModerate.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var LabelModerate = ({
+  children,
+  color,
+  size = "Medium" /* Medium */
+}) => {
+  return /* @__PURE__ */ jsx(StyledLabelModerate, { size, color, children });
+};
+var StyledLabelModerate = styled.label`
+  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+  ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app]["Label Moderate"][size]) : "";
+}}
+  cursor: inherit;
+
+  * {
+    color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+    ${({ theme, size }) => {
+  return size ? getTypographyString(
+    theme.typography[theme.app]["Label Moderate"][size]
+  ) : "";
+}}
+  }
+`;
+
+export {
+  LabelModerate,
+  StyledLabelModerate
+};

package/dist/{chunk-2RF46PE5.js → chunk-AFAP6ZGM.js}

@@ -1,22 +1,31 @@
 import {
-  StyledBody
-} from "./chunk-7NQH4LBZ.js";
+  StyledCode
+} from "./chunk-EXB35D5E.js";
 import {
   displaySelector
-} from "./chunk-LWTUQB7O.js";
+} from "./chunk-C4OKXC6T.js";
+import {
+  StyledTitle
+} from "./chunk-345XTQ55.js";
+import {
+  StyledBody
+} from "./chunk-4Y2M2HEF.js";
 import {
   ALL_HEADLINE_SELECTORS,
   headlineSelector
-} from "./chunk-W4GDCWKZ.js";
+} from "./chunk-7ZTWDJAE.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-LZHLWOXG.js";
+} from "./chunk-Z4MZOSEJ.js";
+import {
+  StyledContentTable
+} from "./chunk-5XTI555J.js";
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-Z4M2ODOW.js";
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-F4FIOIYM.js";
 
 // src/styles/fonts/typography/Article.tsx
 import styled from "@emotion/styled";
@@ -65,6 +74,10 @@ var Article = styled.article`
     margin-bottom: 12px;
   }
 
+  ${StyledContentTable} {
+    margin: 40px 0;
+  }
+
   img {
     margin-top: 16px;
     margin-bottom: 16px;
@@ -74,10 +87,11 @@ var Article = styled.article`
     font-weight: 700;
   }
 
-  *:not(${ALL_HEADLINE_SELECTORS}) > a {
+  *:not(${ALL_HEADLINE_SELECTORS},${StyledTitle},${StyledCode}) > a {
     ${({ theme }) => getTypographyString(
   theme.typography[theme.app]["Label Strong"]["Large" /* Large */]
 )}
+    font-size: inherit;
     color: ${({ theme }) => theme.link};
   }
 

package/dist/{chunk-6RDG2DE3.js → chunk-BGOEN6S2.js}

@@ -1,9 +1,9 @@
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-Z4M2ODOW.js";
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-F4FIOIYM.js";
 
 // src/styles/fonts/typography/Label.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-LWTUQB7O.js → chunk-C4OKXC6T.js}

@@ -1,9 +1,9 @@
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-Z4M2ODOW.js";
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-F4FIOIYM.js";
 
 // src/styles/fonts/typography/Display.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-RUVXOYBL.js → chunk-EXB35D5E.js}

@@ -1,19 +1,20 @@
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-F4FIOIYM.js";
 
 // src/styles/fonts/typography/Code.tsx
 import styled from "@emotion/styled";
 import { jsx } from "@emotion/react/jsx-runtime";
 var Code = ({ children, size = "Medium" /* Medium */ }) => {
-  return /* @__PURE__ */ jsx(CodeStyles, { size, children });
+  return /* @__PURE__ */ jsx(StyledCode, { size, children });
 };
-var CodeStyles = styled.div`
+var StyledCode = styled.div`
   ${({ theme, size }) => {
   return size ? getTypographyString(theme.typography[theme.app].Code[size]) : "";
 }}
 `;
 
 export {
-  Code
+  Code,
+  StyledCode
 };