@lightsparkdev/ui 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lightsparkdev/ui
 
+## 0.0.3
+
+### Patch Changes
+
+- e77aa92: - Add spacing tokens for every component in Article
+  - Fix modal focus on previous focused element when closed
+
+## 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

package/dist/{chunk-ACZDUWPH.js → chunk-2VBDEO6M.js}

@@ -1,6 +1,6 @@
 import {
   getTypography
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-E4EXM4SY.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-FETTWCK3.js → chunk-3PB5DNAL.js}

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

package/dist/chunk-3XSQV5U4.js

@@ -0,0 +1,26 @@
+// src/styles/tokens/spacing.tsx
+var Spacing = /* @__PURE__ */ ((Spacing2) => {
+  Spacing2["4xs"] = "2px";
+  Spacing2["3xs"] = "4px";
+  Spacing2["2xs"] = "6px";
+  Spacing2["xs"] = "8px";
+  Spacing2["sm"] = "12px";
+  Spacing2["md"] = "16px";
+  Spacing2["lg"] = "24px";
+  Spacing2["xl"] = "32px";
+  Spacing2["2xl"] = "40px";
+  Spacing2["3xl"] = "48px";
+  Spacing2["4xl"] = "56px";
+  Spacing2["5xl"] = "64px";
+  Spacing2["6xl"] = "72px";
+  Spacing2["7xl"] = "80px";
+  Spacing2["8xl"] = "96px";
+  Spacing2["9xl"] = "112px";
+  Spacing2["10xl"] = "128px";
+  Spacing2["11xl"] = "160px";
+  return Spacing2;
+})(Spacing || {});
+
+export {
+  Spacing
+};

package/dist/chunk-4I2ABBID.js

@@ -0,0 +1,38 @@
+import {
+  colors
+} from "./chunk-2VBDEO6M.js";
+import {
+  getTypographyString
+} from "./chunk-E4EXM4SY.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-W4GDCWKZ.js → chunk-4K2KAYVH.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/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-2RF46PE5.js → chunk-4ZZHBSW4.js}

@@ -1,22 +1,31 @@
+import {
+  StyledTitle
+} from "./chunk-FHNYQLMF.js";
 import {
   StyledBody
-} from "./chunk-7NQH4LBZ.js";
+} from "./chunk-LD5LZXUP.js";
+import {
+  StyledCode
+} from "./chunk-BCFRW7CV.js";
 import {
   displaySelector
-} from "./chunk-LWTUQB7O.js";
+} from "./chunk-SW6ZA7W2.js";
 import {
   ALL_HEADLINE_SELECTORS,
   headlineSelector
-} from "./chunk-W4GDCWKZ.js";
+} from "./chunk-4K2KAYVH.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-LZHLWOXG.js";
+} from "./chunk-SV5QPU7N.js";
+import {
+  StyledContentTable
+} from "./chunk-EZ4RHFY7.js";
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-2VBDEO6M.js";
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-E4EXM4SY.js";
 
 // src/styles/fonts/typography/Article.tsx
 import styled from "@emotion/styled";
@@ -27,65 +36,70 @@ var Article = styled.article`
 
   ${headlineSelector("h1")} {
     margin: 0;
-    padding-bottom: 8px;
+    padding-bottom: ${"8px" /* xs */};
   }
 
   ${headlineSelector("h2")} {
-    padding-top: 32px;
-    padding-bottom: 8px;
+    padding-top: ${"40px" /* 2xl */};
+    padding-bottom: ${"8px" /* xs */};
     margin: 0;
   }
 
   ${headlineSelector("h3")} {
-    padding-top: 32px;
-    padding-bottom: 8px;
+    padding-top: ${"40px" /* 2xl */};
+    padding-bottom: ${"8px" /* xs */};
     margin: 0;
   }
 
   ${headlineSelector("h4")} {
-    padding-top: 16px;
-    padding-bottom: 8px;
+    padding-top: ${"40px" /* 2xl */};
+    padding-bottom: ${"8px" /* xs */};
     margin: 0;
   }
 
   ${headlineSelector("h5")} {
-    padding-top: 32px;
-    padding-bottom: 8px;
+    padding-top: ${"40px" /* 2xl */};
+    padding-bottom: ${"8px" /* xs */};
     margin: 0;
   }
 
   ${headlineSelector("h6")} {
-    padding-top: 32px;
-    padding-bottom: 8px;
+    padding-top: ${"40px" /* 2xl */};
+    padding-bottom: ${"8px" /* xs */};
     margin: 0;
   }
 
   ${StyledBody} {
-    margin-top: 12px;
-    margin-bottom: 12px;
+    margin-top: ${"8px" /* xs */};
+    margin-bottom: ${"8px" /* xs */};
+  }
+
+  ${StyledContentTable} {
+    margin: ${"40px" /* 2xl */} 0;
   }
 
   img {
-    margin-top: 16px;
-    margin-bottom: 16px;
+    margin-top: ${"16px" /* md */};
+    margin-bottom: ${"16px" /* md */};
   }
 
   strong {
     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};
   }
 
   ul,
   ol {
-    padding-left: 24px;
-    margin-top: 8px;
-    margin-bottom: 8px;
+    padding-left: ${"24px" /* lg */};
+    margin-top: ${"8px" /* xs */};
+    margin-bottom: ${"8px" /* xs */};
     *:not(a) {
       color: ${({ theme }) => theme.text};
     }
@@ -94,23 +108,23 @@ var Article = styled.article`
   li {
     ${({ theme }) => getTypographyString(theme.typography[theme.app].Body["Medium" /* Medium */])}
     :not(:last-child) {
-      margin-bottom: 4px;
+      margin-bottom: ${"4px" /* 3xs */};
     }
   }
 
   code:not([class|="language"]) {
     ${({ theme }) => getTypographyString(theme.typography[theme.app].Code["Medium" /* Medium */])}
     background: ${colors.uma.blue90};
-    padding: 2px 6px;
-    margin: 2px;
+    padding: ${"2px" /* 4xs */} ${"6px" /* 2xs */};
+    margin: ${"2px" /* 4xs */};
     border-radius: 4px;
   }
 
   pre[class|="language"] {
     border-radius: 8px;
     width: 100%;
-    padding: 16px 24px;
-    margin: 0;
+    padding: ${"16px" /* md */} ${"24px" /* lg */};
+    margin: ${"16px" /* md */} 0;
   }
 
   // Must match specificity of prismjs to get proper line height!
@@ -120,6 +134,10 @@ var Article = styled.article`
 
     ${overflowAutoWithoutScrollbars}
   }
+
+  blockquote {
+    margin: ${"8px" /* xs */} 0;
+  }
 `;
 
 export {

package/dist/{chunk-XTEEADPV.js → chunk-6R6A5H4I.js}

@@ -1,32 +1,35 @@
 import {
   useLiveRef
 } from "./chunk-NBCCPGA4.js";
+import {
+  ProgressBar
+} from "./chunk-ZQTE53SK.js";
 import {
   Button
-} from "./chunk-4X3K3VRC.js";
+} from "./chunk-SUD5NOKE.js";
 import {
   overflowAutoWithoutScrollbars,
   pxToRems
-} from "./chunk-LZHLWOXG.js";
+} from "./chunk-SV5QPU7N.js";
 import {
   UnstyledButton
-} from "./chunk-X6BI4STY.js";
+} from "./chunk-DHNWT2E5.js";
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-MYG24ZWT.js";
 import {
   overlaySurface,
   smContentInset,
   standardContentInsetSmPx,
   standardFocusOutline
-} from "./chunk-QR7BKTM6.js";
+} from "./chunk-XUGLVWSH.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,8 +54,10 @@ function Modal({
   firstFocusRef,
   nonDismissable = false,
   autoFocus = true,
-  width
+  width = 460,
+  progressBar
 }) {
+  const visibleChangedRef = useRef(false);
   const nodeRef = useRef(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
   const ref = firstFocusRef || defaultFirstFocusRef;
@@ -62,6 +67,12 @@ function Modal({
   const modalContainerRef = useRef(null);
   const bp2 = useBreakpoints();
   const isSm = bp2.current("sm" /* sm */);
+  useEffect(() => {
+    if (visible !== visibleChangedRef.current) {
+      visibleChangedRef.current = visible;
+    }
+  }, [visible]);
+  const visibleChanged = visible !== visibleChangedRef.current;
   useEffect(() => {
     prevFocusedElement.current = document.activeElement;
     if (!nodeRef.current) {
@@ -115,14 +126,16 @@ function Modal({
   }, [onClose, visible, nonDismissable]);
   useLayoutEffect(() => {
     if (visible) {
-      prevFocusedElement.current = document.activeElement;
+      if (visibleChanged) {
+        prevFocusedElement.current = document.activeElement;
+      }
       if (typeof ref === "object" && (ref == null ? void 0 : ref.current) && autoFocus) {
         ref.current.focus();
       }
-    } else if (prevFocusedElement.current) {
+    } else if (visibleChanged && prevFocusedElement.current) {
       prevFocusedElement.current.focus();
     }
-  }, [visible, ref, autoFocus]);
+  }, [visible, visibleChanged, ref, autoFocus]);
   function onClickCloseButton(event) {
     event.stopPropagation();
     onClose();
@@ -154,6 +167,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 +274,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-LJYASIJC.js → chunk-6RXFA73Z.js}

@@ -1,6 +1,9 @@
+import {
+  isString
+} from "./chunk-LAMQKQU3.js";
 import {
   colors
-} from "./chunk-ACZDUWPH.js";
+} from "./chunk-2VBDEO6M.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-DE24BV2C.js → chunk-ANJDI74G.js}

@@ -1,9 +1,9 @@
 import {
   Headline
-} from "./chunk-W4GDCWKZ.js";
+} from "./chunk-4K2KAYVH.js";
 import {
   Icon
-} from "./chunk-L7XFJWMY.js";
+} from "./chunk-MYG24ZWT.js";
 import {
   __spreadProps,
   __spreadValues

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

@@ -1,19 +1,20 @@
 import {
   getTypographyString
-} from "./chunk-WVJNZRKF.js";
+} from "./chunk-E4EXM4SY.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
 };

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

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