@lightsparkdev/ui 0.0.0 → 0.0.2

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

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

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

@@ -1,14 +1,14 @@
+import {
+  z
+} from "./chunk-CLU2FRJZ.js";
 import {
   colors,
   darkGradient,
   themeOr
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-Z4M2ODOW.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-LJYASIJC.js → chunk-I5KUI7TK.js}

@@ -1,6 +1,9 @@
+import {
+  isString
+} from "./chunk-LAMQKQU3.js";
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-Z4M2ODOW.js";
 
 // src/router.tsx
 import { omit } from "lodash-es";
@@ -37,6 +40,7 @@ function replaceParams(to, params) {
 }
 function Link({
   to,
+  externalLink,
   params,
   children,
   css,
@@ -46,8 +50,20 @@ function Link({
   blue = false,
   newTab = false
 }) {
-  let toStr = replaceParams(to, params);
-  toStr += hash ? `#${hash}` : "";
+  if (!isString(to) && !externalLink) {
+    throw new Error("Link must have either `to` or `externalLink` defined");
+  }
+  let toStr;
+  if (isString(to)) {
+    toStr = replaceParams(to, params);
+    toStr += hash ? `#${hash}` : "";
+  } else {
+    const definedExternalLink = externalLink;
+    if (!definedExternalLink.startsWith("http")) {
+      throw new Error("Link's externalLink must start with http");
+    }
+    toStr = definedExternalLink;
+  }
   return /* @__PURE__ */ jsx(
     RLink,
     {

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

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

package/dist/{chunk-XTEEADPV.js → chunk-JD7JHP46.js}

@@ -1,32 +1,35 @@
 import {
   useLiveRef
 } from "./chunk-NBCCPGA4.js";
+import {
+  ProgressBar
+} from "./chunk-2GX5Y72Y.js";
 import {
   Button
-} from "./chunk-4X3K3VRC.js";
+} from "./chunk-MQZEMU23.js";
 import {
   overflowAutoWithoutScrollbars,
   pxToRems
-} from "./chunk-LZHLWOXG.js";
+} from "./chunk-Z4MZOSEJ.js";
 import {
   UnstyledButton
-} from "./chunk-X6BI4STY.js";
+} from "./chunk-RIU33XNS.js";
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-HC4KIHUT.js";
 import {
   overlaySurface,
   smContentInset,
   standardContentInsetSmPx,
   standardFocusOutline
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-HZH77KO7.js";
+import {
+  z
+} from "./chunk-CLU2FRJZ.js";
 import {
   bp,
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
-import {
-  z
-} from "./chunk-CLU2FRJZ.js";
 
 // src/components/Modal.tsx
 import styled from "@emotion/styled";
@@ -51,7 +54,8 @@ function Modal({
   firstFocusRef,
   nonDismissable = false,
   autoFocus = true,
-  width
+  width = 460,
+  progressBar
 }) {
   const nodeRef = useRef(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
@@ -154,6 +158,13 @@ function Modal({
           !firstFocusRef && /* @__PURE__ */ jsx(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
           !(nonDismissable || ghost) && /* @__PURE__ */ jsx(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx(Icon, { name: "Close", width: 9 }) }),
           /* @__PURE__ */ jsxs(ModalContentInner, { ghost, children: [
+            progressBar ? /* @__PURE__ */ jsx("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ jsx(
+              ProgressBar,
+              {
+                progressPercentage: progressBar.progressPercentage,
+                isSm: progressBar.isSm
+              }
+            ) }) : null,
             title ? /* @__PURE__ */ jsx("h4", { children: title }) : null,
             description ? /* @__PURE__ */ jsx(Description, { children: description }) : null,
             /* @__PURE__ */ jsx("div", { children }),
@@ -254,7 +265,8 @@ var ModalContent = styled.div`
   ${smContentInset}
   ${(props) => props.ghost ? "" : overlaySurface}
   pointer-events: auto;
-  width: ${(props) => props.width || 430}px;
+  transition: width 0.25s ease-in;
+  width: ${(props) => props.width}px;
   max-width: 100%;
   max-height: 100%;
   border-radius: 16px;

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

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

package/dist/{chunk-4X3K3VRC.js → chunk-MQZEMU23.js}

@@ -1,22 +1,22 @@
 import {
   Link
-} from "./chunk-LJYASIJC.js";
+} from "./chunk-I5KUI7TK.js";
 import {
   Loading
-} from "./chunk-BZ5MKMI2.js";
+} from "./chunk-N7SP3C6R.js";
 import {
   UnstyledButton
-} from "./chunk-X6BI4STY.js";
+} from "./chunk-RIU33XNS.js";
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-HC4KIHUT.js";
 import {
   getFocusOutline
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-HZH77KO7.js";
 import {
   colors,
   themeOr
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-Z4M2ODOW.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-K7MPHJNG.js → chunk-N2J673NM.js}

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

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

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

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

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

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

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

package/dist/{chunk-X6BI4STY.js → chunk-RIU33XNS.js}

@@ -1,6 +1,6 @@
 import {
   standardFocusOutline
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-HZH77KO7.js";
 
 // src/components/UnstyledButton.tsx
 import styled from "@emotion/styled";

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

@@ -1,9 +1,9 @@
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-LZHLWOXG.js";
+} from "./chunk-Z4MZOSEJ.js";
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-HC4KIHUT.js";
 
 // src/components/Collapsible.tsx
 import styled from "@emotion/styled";
@@ -13,6 +13,7 @@ function Collapsible({
   children,
   className,
   text,
+  color,
   open,
   handleToggle,
   hamburger,
@@ -32,7 +33,7 @@ function Collapsible({
   const iconWidth = iconName === "Close" ? 12 : 14;
   return /* @__PURE__ */ jsxs(StyledCollapsible, { className, children: [
     /* @__PURE__ */ jsxs(StyledCollapsibleButton, { onClick: handleClick, children: [
-      text ? text : /* @__PURE__ */ jsx("div", {}),
+      text ? /* @__PURE__ */ jsx(Text, { color, children: text }) : /* @__PURE__ */ jsx("div", {}),
       /* @__PURE__ */ jsx(IconContainer, { isOpen, hamburger, children: /* @__PURE__ */ jsx(Icon, { width: iconWidth, name: iconName }) })
     ] }),
     /* @__PURE__ */ jsx(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ jsx(InnerPadding, { children }) })
@@ -103,6 +104,10 @@ var InnerPadding = styled.div`
   display: flex;
   flex-direction: column;
 `;
+var Text = styled.span`
+  ${(props) => props.color ? `color: ${props.color};` : ""}
+  line-height: inherit;
+`;
 
 export {
   Collapsible,

package/dist/{chunk-I4PO6FQP.js → chunk-WK4HZX53.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/LabelStrong.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-DE24BV2C.js → chunk-WLHM7GX2.js}

@@ -1,9 +1,9 @@
 import {
   Headline
-} from "./chunk-W4GDCWKZ.js";
+} from "./chunk-7ZTWDJAE.js";
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-HC4KIHUT.js";
 import {
   __spreadProps,
   __spreadValues

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

@@ -4,10 +4,10 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-HZH77KO7.js";
 import {
   useThemeBg
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-Z4M2ODOW.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-XU3F6HH6.js

@@ -0,0 +1,29 @@
+import {
+  colors
+} from "./chunk-Z4M2ODOW.js";
+import {
+  getTypographyString
+} from "./chunk-F4FIOIYM.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-ACZDUWPH.js → chunk-Z4M2ODOW.js}

@@ -1,6 +1,6 @@
 import {
   getTypography
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-F4FIOIYM.js";
 import {
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
@@ -162,7 +162,7 @@ var lightTheme = extend(lightBaseTheme, {
   }),
   nav: extendBase(lightBaseTheme, {
     text: colors.gray10,
-    secondary: colors.secondary
+    secondary: colors.gray40
   }),
   content: extendBase(lightBaseTheme, {
     bg: colors.white,

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

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