@lightsparkdev/ui 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

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

@@ -1,6 +1,6 @@
 import {
   getTypography
-} from "./chunk-F4FIOIYM.js";
+} from "./chunk-E4EXM4SY.js";
 import {
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";

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

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-HC4KIHUT.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-ABA75YLN.js → chunk-4I2ABBID.js}

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

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

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

package/dist/{chunk-AFAP6ZGM.js → chunk-4ZZHBSW4.js}

@@ -1,31 +1,31 @@
-import {
-  StyledCode
-} from "./chunk-EXB35D5E.js";
-import {
-  displaySelector
-} from "./chunk-C4OKXC6T.js";
 import {
   StyledTitle
-} from "./chunk-345XTQ55.js";
+} from "./chunk-FHNYQLMF.js";
 import {
   StyledBody
-} from "./chunk-4Y2M2HEF.js";
+} from "./chunk-LD5LZXUP.js";
+import {
+  StyledCode
+} from "./chunk-BCFRW7CV.js";
+import {
+  displaySelector
+} from "./chunk-SW6ZA7W2.js";
 import {
   ALL_HEADLINE_SELECTORS,
   headlineSelector
-} from "./chunk-7ZTWDJAE.js";
+} from "./chunk-4K2KAYVH.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-Z4MZOSEJ.js";
+} from "./chunk-SV5QPU7N.js";
 import {
   StyledContentTable
-} from "./chunk-5XTI555J.js";
+} from "./chunk-EZ4RHFY7.js";
 import {
   colors
-} from "./chunk-Z4M2ODOW.js";
+} from "./chunk-2VBDEO6M.js";
 import {
   getTypographyString
-} from "./chunk-F4FIOIYM.js";
+} from "./chunk-E4EXM4SY.js";
 
 // src/styles/fonts/typography/Article.tsx
 import styled from "@emotion/styled";
@@ -36,51 +36,51 @@ 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 0;
+    margin: ${"40px" /* 2xl */} 0;
   }
 
   img {
-    margin-top: 16px;
-    margin-bottom: 16px;
+    margin-top: ${"16px" /* md */};
+    margin-bottom: ${"16px" /* md */};
   }
 
   strong {
@@ -97,9 +97,9 @@ var Article = styled.article`
 
   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};
     }
@@ -108,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!
@@ -134,6 +134,10 @@ var Article = styled.article`
 
     ${overflowAutoWithoutScrollbars}
   }
+
+  blockquote {
+    margin: ${"8px" /* xs */} 0;
+  }
 `;
 
 export {

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

@@ -3,26 +3,26 @@ import {
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-2GX5Y72Y.js";
+} from "./chunk-ZQTE53SK.js";
 import {
   Button
-} from "./chunk-MQZEMU23.js";
+} from "./chunk-SUD5NOKE.js";
 import {
   overflowAutoWithoutScrollbars,
   pxToRems
-} from "./chunk-Z4MZOSEJ.js";
+} from "./chunk-SV5QPU7N.js";
 import {
   UnstyledButton
-} from "./chunk-RIU33XNS.js";
+} from "./chunk-DHNWT2E5.js";
 import {
   Icon
-} from "./chunk-HC4KIHUT.js";
+} from "./chunk-MYG24ZWT.js";
 import {
   overlaySurface,
   smContentInset,
   standardContentInsetSmPx,
   standardFocusOutline
-} from "./chunk-HZH77KO7.js";
+} from "./chunk-XUGLVWSH.js";
 import {
   z
 } from "./chunk-CLU2FRJZ.js";
@@ -57,6 +57,7 @@ function Modal({
   width = 460,
   progressBar
 }) {
+  const visibleChangedRef = useRef(false);
   const nodeRef = useRef(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
   const ref = firstFocusRef || defaultFirstFocusRef;
@@ -66,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) {
@@ -119,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();

package/dist/{chunk-I5KUI7TK.js → chunk-6RXFA73Z.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-LAMQKQU3.js";
 import {
   colors
-} from "./chunk-Z4M2ODOW.js";
+} from "./chunk-2VBDEO6M.js";
 
 // src/router.tsx
 import { omit } from "lodash-es";

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

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

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

@@ -1,6 +1,6 @@
 import {
   getTypographyString
-} from "./chunk-F4FIOIYM.js";
+} from "./chunk-E4EXM4SY.js";
 
 // src/styles/fonts/typography/Code.tsx
 import styled from "@emotion/styled";

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

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

package/dist/{chunk-F4FIOIYM.js → chunk-E4EXM4SY.js}

@@ -903,8 +903,6 @@ var getTypography = (customFontFamilies) => {
 var getTypographyString = (token) => {
   return Object.entries(token).map((entry) => {
     switch (entry[0]) {
-      case "paragraph-spacing":
-        return entry[1] === "default" ? "" : `margin-bottom: ${entry[1]};`;
       case "paragraph-indent":
         return `text-indent: ${entry[1]};`;
       case "text-case":

package/dist/{chunk-5XTI555J.js → chunk-EZ4RHFY7.js}

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

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

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

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

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

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

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

package/dist/{chunk-XU3F6HH6.js → chunk-LN7MMOXE.js}

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

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

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

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

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

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

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

package/dist/{chunk-BGOEN6S2.js → chunk-OO5UJRAW.js}

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

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

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

package/dist/{chunk-7VX4OOSZ.js → chunk-RBYRXBPI.js}

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

package/dist/{chunk-MQZEMU23.js → chunk-SUD5NOKE.js}

@@ -1,22 +1,22 @@
 import {
   Link
-} from "./chunk-I5KUI7TK.js";
+} from "./chunk-6RXFA73Z.js";
 import {
   Loading
-} from "./chunk-N7SP3C6R.js";
+} from "./chunk-OLAFBUE5.js";
 import {
   UnstyledButton
-} from "./chunk-RIU33XNS.js";
+} from "./chunk-DHNWT2E5.js";
 import {
   Icon
-} from "./chunk-HC4KIHUT.js";
+} from "./chunk-MYG24ZWT.js";
 import {
   getFocusOutline
-} from "./chunk-HZH77KO7.js";
+} from "./chunk-XUGLVWSH.js";
 import {
   colors,
   themeOr
-} from "./chunk-Z4M2ODOW.js";
+} from "./chunk-2VBDEO6M.js";
 import {
   __spreadProps,
   __spreadValues

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

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

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

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

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

@@ -1,12 +1,12 @@
 import {
   Button
-} from "./chunk-MQZEMU23.js";
+} from "./chunk-SUD5NOKE.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-Z4MZOSEJ.js";
+} from "./chunk-SV5QPU7N.js";
 import {
   standardContentInsetSmPx
-} from "./chunk-HZH77KO7.js";
+} from "./chunk-XUGLVWSH.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-IZBH5JX6.js → chunk-VV7F7VVL.js}

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

package/dist/{chunk-SMLXEMZE.js → chunk-WB6FFT7Y.js}

@@ -1,9 +1,9 @@
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-Z4MZOSEJ.js";
+} from "./chunk-SV5QPU7N.js";
 import {
   Icon
-} from "./chunk-HC4KIHUT.js";
+} from "./chunk-MYG24ZWT.js";
 
 // src/components/Collapsible.tsx
 import styled from "@emotion/styled";
@@ -17,7 +17,9 @@ function Collapsible({
   open,
   handleToggle,
   hamburger,
-  full
+  full,
+  buttonTextElement,
+  contentIndent = true
 }) {
   const [isOpen, setIsOpen] = useState(open);
   const handleClick = () => {
@@ -31,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 ? /* @__PURE__ */ jsx(Text, { color, children: 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`
@@ -99,8 +107,9 @@ 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;
 `;

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

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

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

@@ -5,7 +5,7 @@ import {
   colors,
   darkGradient,
   themeOr
-} from "./chunk-Z4M2ODOW.js";
+} from "./chunk-2VBDEO6M.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";