@lightsparkdev/ui 0.0.1 → 0.0.3

package/dist/chunk-EZ4RHFY7.js

@@ -0,0 +1,57 @@
+import {
+  Icon
+} from "./chunk-MYG24ZWT.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-CQDQFIWT.js → chunk-FHNYQLMF.js}

@@ -1,17 +1,23 @@
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-2VBDEO6M.js";
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-E4EXM4SY.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-K7MPHJNG.js → chunk-FRIQXHPR.js}

@@ -1,12 +1,12 @@
 import {
   UnstyledButton
-} from "./chunk-X6BI4STY.js";
+} from "./chunk-DHNWT2E5.js";
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-MYG24ZWT.js";
 import {
   StyledTooltip
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-XUGLVWSH.js";
 import {
   __async
 } from "./chunk-CIGAQ47A.js";

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

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

package/dist/chunk-LN7MMOXE.js

@@ -0,0 +1,29 @@
+import {
+  colors
+} from "./chunk-2VBDEO6M.js";
+import {
+  getTypographyString
+} from "./chunk-E4EXM4SY.js";
+
+// src/styles/fonts/typography/BodyStrong.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var BodyStrong = ({
+  children,
+  color,
+  size = "Medium" /* Medium */
+}) => {
+  return /* @__PURE__ */ jsx(StyledBodyStrong, { size, color, children });
+};
+var StyledBodyStrong = styled.span`
+  display: block;
+  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+  ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app]["Body Strong"][size]) : "";
+}}
+`;
+
+export {
+  BodyStrong,
+  StyledBodyStrong
+};

package/dist/{chunk-L7XFJWMY.js → chunk-MYG24ZWT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-LAMQKQU3.js";
 import {
   rootFontSizePx
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-XUGLVWSH.js";
 import {
   __async
 } from "./chunk-CIGAQ47A.js";

package/dist/{chunk-I4PO6FQP.js → chunk-MYKMYG6H.js}

@@ -1,9 +1,9 @@
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-2VBDEO6M.js";
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-E4EXM4SY.js";
 
 // src/styles/fonts/typography/LabelStrong.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-BZ5MKMI2.js → chunk-OLAFBUE5.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-MYG24ZWT.js";
 
 // src/components/Loading.tsx
 import styled from "@emotion/styled";

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

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

package/dist/{chunk-Y4RJ7WS4.js → chunk-PVUPVJ3F.js}

@@ -1,6 +1,6 @@
 import {
   CopyToClipboardButton
-} from "./chunk-K7MPHJNG.js";
+} from "./chunk-FRIQXHPR.js";
 
 // src/components/SecretContainer.tsx
 import styled from "@emotion/styled";

package/dist/chunk-RBYRXBPI.js

@@ -0,0 +1,29 @@
+import {
+  colors
+} from "./chunk-2VBDEO6M.js";
+import {
+  getTypographyString
+} from "./chunk-E4EXM4SY.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-4X3K3VRC.js → chunk-SUD5NOKE.js}

@@ -1,22 +1,22 @@
 import {
   Link
-} from "./chunk-LJYASIJC.js";
+} from "./chunk-6RXFA73Z.js";
 import {
   Loading
-} from "./chunk-BZ5MKMI2.js";
+} from "./chunk-OLAFBUE5.js";
 import {
   UnstyledButton
-} from "./chunk-X6BI4STY.js";
+} from "./chunk-DHNWT2E5.js";
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-MYG24ZWT.js";
 import {
   getFocusOutline
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-XUGLVWSH.js";
 import {
   colors,
   themeOr
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-2VBDEO6M.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-LZHLWOXG.js → chunk-SV5QPU7N.js}

@@ -1,6 +1,6 @@
 import {
   rootFontSizePx
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-XUGLVWSH.js";
 
 // src/styles/utils.tsx
 import { css } from "@emotion/react";

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

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

package/dist/{chunk-O27TAUAS.js → chunk-U6LQLAWI.js}

@@ -1,12 +1,12 @@
 import {
   Button
-} from "./chunk-4X3K3VRC.js";
+} from "./chunk-SUD5NOKE.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-LZHLWOXG.js";
+} from "./chunk-SV5QPU7N.js";
 import {
   standardContentInsetSmPx
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-XUGLVWSH.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-6AV4TE6I.js → chunk-VV7F7VVL.js}

@@ -1,9 +1,9 @@
 import {
   GlobalStyles
-} from "./chunk-WVEK4LFA.js";
+} from "./chunk-YHSFWCFN.js";
 import {
   themes
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-2VBDEO6M.js";
 
 // src/components/LightsparkProvider.tsx
 import { ThemeProvider } from "@emotion/react";

package/dist/{chunk-7ENCWBAN.js → chunk-WB6FFT7Y.js}

@@ -1,9 +1,9 @@
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-LZHLWOXG.js";
+} from "./chunk-SV5QPU7N.js";
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-MYG24ZWT.js";
 
 // src/components/Collapsible.tsx
 import styled from "@emotion/styled";
@@ -13,10 +13,13 @@ function Collapsible({
   children,
   className,
   text,
+  color,
   open,
   handleToggle,
   hamburger,
-  full
+  full,
+  buttonTextElement,
+  contentIndent = true
 }) {
   const [isOpen, setIsOpen] = useState(open);
   const handleClick = () => {
@@ -30,12 +33,18 @@ function Collapsible({
   }, [open]);
   const iconName = hamburger ? isOpen ? "Close" : "StackedLines" : "Down";
   const iconWidth = iconName === "Close" ? 12 : 14;
+  let textElement = /* @__PURE__ */ jsx("div", {});
+  if (buttonTextElement) {
+    textElement = buttonTextElement;
+  } else if (text) {
+    textElement = /* @__PURE__ */ jsx(Text, { color, children: text });
+  }
   return /* @__PURE__ */ jsxs(StyledCollapsible, { className, children: [
     /* @__PURE__ */ jsxs(StyledCollapsibleButton, { onClick: handleClick, children: [
-      text ? text : /* @__PURE__ */ jsx("div", {}),
+      textElement,
       /* @__PURE__ */ jsx(IconContainer, { isOpen, hamburger, children: /* @__PURE__ */ jsx(Icon, { width: iconWidth, name: iconName }) })
     ] }),
-    /* @__PURE__ */ jsx(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ jsx(InnerPadding, { children }) })
+    /* @__PURE__ */ jsx(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ jsx(InnerPadding, { contentIndent, children }) })
   ] });
 }
 var StyledCollapsible = styled.div`
@@ -98,11 +107,16 @@ var CollapsingContainer = styled.div`
   }
 `;
 var InnerPadding = styled.div`
-  padding: 4px 0 4px 16px;
-  gap: 4px;
+  padding: ${"4px" /* 3xs */} 0 ${"4px" /* 3xs */}
+    ${(props) => props.contentIndent ? "16px" /* md */ : "0"};
+  gap: ${"2px" /* 4xs */};
   display: flex;
   flex-direction: column;
 `;
+var Text = styled.span`
+  ${(props) => props.color ? `color: ${props.color};` : ""}
+  line-height: inherit;
+`;
 
 export {
   Collapsible,

package/dist/{chunk-BKOTW3CK.js → chunk-WEPQ7LRL.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-MYG24ZWT.js";
 
 // src/components/TextIconAligner.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";

package/dist/{chunk-QR7BKTM6.js → chunk-XUGLVWSH.js}

@@ -1,14 +1,14 @@
+import {
+  z
+} from "./chunk-CLU2FRJZ.js";
 import {
   colors,
   darkGradient,
   themeOr
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-2VBDEO6M.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
-import {
-  z
-} from "./chunk-CLU2FRJZ.js";
 
 // src/styles/common.tsx
 import { css } from "@emotion/react";

package/dist/{chunk-WVEK4LFA.js → chunk-YHSFWCFN.js}

@@ -4,10 +4,10 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-XUGLVWSH.js";
 import {
   useThemeBg
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-2VBDEO6M.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
@@ -88,7 +88,7 @@ var globalComponentStyles = ({ theme }) => css`
   }
 
   strong {
-    font-weight: 600;
+    font-weight: 700;
   }
 `;
 function GlobalStyles() {

package/dist/chunk-ZQTE53SK.js

@@ -0,0 +1,78 @@
+import {
+  themeOr
+} from "./chunk-2VBDEO6M.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
+};