@lightsparkdev/ui 1.0.3 → 1.0.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lightsparkdev/ui
 
+## 1.0.5
+
+### Patch Changes
+
+- c17a851: - Update colors
+- Updated dependencies [c17a851]
+  - @lightsparkdev/core@1.2.0
+
+## 1.0.4
+
+### Patch Changes
+
+- 1028e1c: Adds numbers to Spacing in addition to px values, setDefaultReactNodesTypography
+
 ## 1.0.3
 
 ### Patch Changes

package/dist/{chunk-54EOEIEN.js → chunk-3DXU76SI.js}

@@ -1,9 +1,9 @@
 import {
   standardBorderRadius
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   themeOr
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 
 // src/components/ProgressBar.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-PQKVR2BR.js → chunk-42D2SXB2.js}

@@ -1,6 +1,6 @@
 import {
   textInputStyle
-} from "./chunk-6CNJ5ZCC.js";
+} from "./chunk-Q76C6FJ5.js";
 
 // src/components/CodeInput/SingleCodeInput.tsx
 import { css, useTheme } from "@emotion/react";

package/dist/{chunk-BSH6WRUZ.js → chunk-45BHB7K7.js}

@@ -1,13 +1,13 @@
 import {
   Pill
-} from "./chunk-J3YVJWRG.js";
+} from "./chunk-EHH4M2LZ.js";
 import {
   InputSubtext,
   inputBlockStyle
-} from "./chunk-6CNJ5ZCC.js";
+} from "./chunk-Q76C6FJ5.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 
 // src/components/FileInput.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-35PJW7RT.js → chunk-4EV5IUUJ.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-XDP7GCYE.js";
+} from "./chunk-HNK2KIC7.js";
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OPUCWQMK.js";
 
 // src/components/typography/Title.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-XM2HQVUK.js → chunk-4IHNUHE3.js}

@@ -3,24 +3,24 @@ import {
 } from "./chunk-VQVEZVAG.js";
 import {
   Link
-} from "./chunk-AAFUVYVP.js";
+} from "./chunk-SCIQSZSW.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-TN5UPDZG.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardFocusOutline
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   themeOr
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-X4TGLNCH.js → chunk-5JJUXAVA.js}

@@ -1,12 +1,12 @@
 import {
   Tooltip
-} from "./chunk-RPNTFEXE.js";
+} from "./chunk-H3UUVMZ3.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-TN5UPDZG.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 import {
   __async
 } from "./chunk-LOPKRCGI.js";

package/dist/{chunk-ILEZ6AWT.js → chunk-7EAO66LB.js}

@@ -6,25 +6,25 @@ import {
 } from "./chunk-E3FGOYEJ.js";
 import {
   toReactNodes
-} from "./chunk-LIQSJ5R7.js";
+} from "./chunk-AKGW3FMJ.js";
 import {
   Link
-} from "./chunk-AAFUVYVP.js";
+} from "./chunk-SCIQSZSW.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 import {
   getColor
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-XUWFUTR4.js";
+} from "./chunk-KPAVY3UH.js";
 
 // src/components/Banner/Banner.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-LIQSJ5R7.js → chunk-AKGW3FMJ.js}

@@ -1,6 +1,6 @@
 import {
   renderTypography
-} from "./chunk-VXKNN4SF.js";
+} from "./chunk-RQLRNKOP.js";
 import {
   isExternalLinkNode,
   isIconNode,
@@ -8,13 +8,14 @@ import {
   isNextLinkNode,
   isTextNode,
   toNonTypographicReactNodes
-} from "./chunk-XDP7GCYE.js";
+} from "./chunk-HNK2KIC7.js";
 import {
   __spreadProps,
   __spreadValues
 } from "./chunk-LOPKRCGI.js";
 
 // src/utils/toReactNodes.tsx
+import { isObject } from "lodash-es";
 import { Fragment } from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
 function toReactNodes(toReactNodesArg) {
@@ -23,12 +24,11 @@ function toReactNodes(toReactNodesArg) {
     let content;
     if (!node) {
       return null;
-    } else if (typeof node !== "string" && "typography" in node && node.typography.type && node.typography.props) {
+    } else if (typeof node !== "string" && "typography" in node && node.typography.type) {
+      const props = node.typography.props || {};
       content = /* @__PURE__ */ jsx(Fragment, { children: renderTypography(
         node.typography.type,
-        Object.assign(node.typography.props, {
-          content: node
-        })
+        Object.assign(props, { content: node })
       ) }, `typography-${i}-${node.text.substr(0, 10)}`);
     } else {
       content = toNonTypographicReactNodes(node);
@@ -37,7 +37,7 @@ function toReactNodes(toReactNodesArg) {
   });
   return /* @__PURE__ */ jsx(Fragment, { children: reactNodes });
 }
-function setReactNodesTypography(nodesArg, nodesTypographyMap) {
+function setReactNodesTypography(nodesArg, nodesTypographyMap, replaceExistingTypography = true) {
   const nodes = Array.isArray(nodesArg) ? nodesArg : [nodesArg];
   const nodesWithTypography = nodes.map((node, i) => {
     if (isIconNode(node)) {
@@ -49,28 +49,32 @@ function setReactNodesTypography(nodesArg, nodesTypographyMap) {
           typography: nodesTypographyMap.text
         };
       }
-    } else if (isLinkNode(node)) {
+    } else if (!node) {
+      return node;
+    }
+    const useExistingTypography = !replaceExistingTypography && isObject(node) && "typography" in node ? node.typography : void 0;
+    if (isLinkNode(node)) {
       if (nodesTypographyMap.link) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.link
+          typography: useExistingTypography || nodesTypographyMap.link
         });
       }
     } else if (isExternalLinkNode(node)) {
       if (nodesTypographyMap.externalLink) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.externalLink
+          typography: useExistingTypography || nodesTypographyMap.externalLink
         });
       }
     } else if (isNextLinkNode(node)) {
       if (nodesTypographyMap.nextLink) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.nextLink
+          typography: useExistingTypography || nodesTypographyMap.nextLink
         });
       }
     } else if (isTextNode(node)) {
       if (nodesTypographyMap.text) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.text
+          typography: useExistingTypography || nodesTypographyMap.text
         });
       }
     }
@@ -89,9 +93,13 @@ function toReactNodesWithTypographyMap(nodesArg, nodesTypographyMap) {
   const nodes = toReactNodes(nodesWithTypography);
   return nodes;
 }
+function setDefaultReactNodesTypography(nodesArg, nodesTypographyMap) {
+  return setReactNodesTypography(nodesArg, nodesTypographyMap, false);
+}
 
 export {
   toReactNodes,
   setReactNodesTypography,
-  toReactNodesWithTypographyMap
+  toReactNodesWithTypographyMap,
+  setDefaultReactNodesTypography
 };

package/dist/{chunk-7N2PFDYE.js → chunk-AVV74PTP.js}

@@ -1,9 +1,9 @@
 import {
   SingleCodeInput
-} from "./chunk-PQKVR2BR.js";
+} from "./chunk-42D2SXB2.js";
 import {
   textInputBorderColor
-} from "./chunk-6CNJ5ZCC.js";
+} from "./chunk-Q76C6FJ5.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-SNFRMD6Z.js → chunk-AXNQ7BDD.js}

@@ -1,15 +1,15 @@
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-TN5UPDZG.js";
 import {
   standardLineHeightEms
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   themeOr
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 import {
   colors
-} from "./chunk-XUWFUTR4.js";
+} from "./chunk-KPAVY3UH.js";
 
 // src/components/Toggle.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-CRTTTIAD.js → chunk-BNHCCR3C.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   toNonTypographicReactNodes
-} from "./chunk-XDP7GCYE.js";
+} from "./chunk-HNK2KIC7.js";
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OPUCWQMK.js";
 
 // src/components/typography/Headline.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-UH5F35II.js → chunk-BRJKMY6Z.js}

@@ -1,12 +1,12 @@
 import {
   toReactNodes
-} from "./chunk-LIQSJ5R7.js";
+} from "./chunk-AKGW3FMJ.js";
 import {
   Tooltip
-} from "./chunk-RPNTFEXE.js";
+} from "./chunk-H3UUVMZ3.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 
 // src/components/InfoIconTooltip.tsx
 import { Fragment } from "react";

package/dist/{chunk-7WDAN3OC.js → chunk-D4DFISYR.js}

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

package/dist/chunk-E5DUKMCU.js

@@ -0,0 +1,65 @@
+// src/styles/tokens/spacing.tsx
+var n = {
+  "4xs": 2,
+  "3xs": 4,
+  "2xs": 6,
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  "2xl": 40,
+  "3xl": 48,
+  "4xl": 56,
+  "5xl": 64,
+  "6xl": 72,
+  "7xl": 80,
+  "8xl": 96,
+  "9xl": 112,
+  "10xl": 128,
+  "11xl": 160
+};
+var Spacing = {
+  "4xs": n["4xs"],
+  "3xs": n["3xs"],
+  "2xs": n["2xs"],
+  xs: n.xs,
+  sm: n.sm,
+  md: n.md,
+  lg: n.lg,
+  xl: n.xl,
+  "2xl": n["2xl"],
+  "3xl": n["3xl"],
+  "4xl": n["4xl"],
+  "5xl": n["5xl"],
+  "6xl": n["6xl"],
+  "7xl": n["7xl"],
+  "8xl": n["8xl"],
+  "9xl": n["9xl"],
+  "10xl": n["10xl"],
+  "11xl": n["11xl"],
+  px: {
+    "4xs": `${n["4xs"]}px`,
+    "3xs": `${n["3xs"]}px`,
+    "2xs": `${n["2xs"]}px`,
+    xs: `${n.xs}px`,
+    sm: `${n.sm}px`,
+    md: `${n.md}px`,
+    lg: `${n.lg}px`,
+    xl: `${n.xl}px`,
+    "2xl": `${n["2xl"]}px`,
+    "3xl": `${n["3xl"]}px`,
+    "4xl": `${n["4xl"]}px`,
+    "5xl": `${n["5xl"]}px`,
+    "6xl": `${n["6xl"]}px`,
+    "7xl": `${n["7xl"]}px`,
+    "8xl": `${n["8xl"]}px`,
+    "9xl": `${n["9xl"]}px`,
+    "10xl": `${n["10xl"]}px`,
+    "11xl": `${n["11xl"]}px`
+  }
+};
+
+export {
+  Spacing
+};

package/dist/{chunk-YRNEIRHM.js → chunk-E6ZY35LN.js}

@@ -1,18 +1,18 @@
 import {
   CopyToClipboardButton
-} from "./chunk-X4TGLNCH.js";
+} from "./chunk-5JJUXAVA.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-D4DFISYR.js";
 import {
   standardBorderRadius
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   themeOr
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 import {
   colors
-} from "./chunk-XUWFUTR4.js";
+} from "./chunk-KPAVY3UH.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-J3YVJWRG.js → chunk-EHH4M2LZ.js}

@@ -1,18 +1,18 @@
 import {
   Loading
-} from "./chunk-5TTLUOJ5.js";
+} from "./chunk-SIYZ5PZT.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-TN5UPDZG.js";
 import {
   flexCenter
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-D4DFISYR.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 import {
   colors
-} from "./chunk-XUWFUTR4.js";
+} from "./chunk-KPAVY3UH.js";
 
 // src/components/Pill.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-XB4KQFK2.js → chunk-EKU5IWJW.js}

@@ -1,9 +1,9 @@
 import {
   GlobalStyles
-} from "./chunk-7IHNYMFQ.js";
+} from "./chunk-FE477HOE.js";
 import {
   themes
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 
 // src/components/LightsparkProvider.tsx
 import { ThemeProvider } from "@emotion/react";

package/dist/chunk-ERNTWEIJ.js

@@ -0,0 +1,74 @@
+import {
+  setDefaultReactNodesTypography,
+  toReactNodes
+} from "./chunk-AKGW3FMJ.js";
+import {
+  Icon
+} from "./chunk-LAGOF7IU.js";
+import {
+  standardBorderRadius
+} from "./chunk-YG5BANJH.js";
+import {
+  getColor
+} from "./chunk-UAUAYQ3C.js";
+
+// src/components/Badge.tsx
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Badge({
+  content: contentProp,
+  kind,
+  icon,
+  ml = 0,
+  mr = 0,
+  size = "sm",
+  block = false,
+  typography: typographyProp
+}) {
+  const typography = {
+    type: (typographyProp == null ? void 0 : typographyProp.type) || "Label Moderate",
+    props: {
+      size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
+      color: (typographyProp == null ? void 0 : typographyProp.color) || (kind === "danger" ? "danger" : "text")
+    }
+  };
+  const typographyMap = {
+    link: typography,
+    externalLink: typography,
+    text: typography,
+    nextLink: typography
+  };
+  let content = setDefaultReactNodesTypography(
+    contentProp,
+    typographyMap
+  );
+  content = toReactNodes(content);
+  return contentProp ? /* @__PURE__ */ jsxs(StyledBadge, { kind, ml, size, block, children: [
+    icon ? /* @__PURE__ */ jsx(Icon, { name: icon.name, width: 20, color: icon.color }) : null,
+    /* @__PURE__ */ jsx(BadgeContent, { children: content })
+  ] }) : null;
+}
+var badgeSmVPadding = 2;
+var badgeSmHPadding = 6;
+var StyledBadge = styled.div`
+  ${({ size }) => standardBorderRadius(size === "sm" ? 4 : 12)}
+  ${({ ml }) => ml === 0 ? "" : `margin-left: ${ml}px;`}
+
+  display: ${({ block }) => block ? "flex" : "inline-flex"};
+  gap: ${({ size }) => size === "sm" ? badgeSmHPadding : 12}px;
+  align-items: center;
+  padding: ${({ size }) => size === "sm" ? `${badgeSmVPadding}px ${badgeSmHPadding}px` : "12px 16px"};
+  background-color: ${({ theme, kind }) => {
+  if (kind === "danger") {
+    return getColor(theme, "red42a10");
+  } else {
+    return getColor(theme, theme.badge.bg);
+  }
+}};
+`;
+var BadgeContent = styled.div``;
+
+export {
+  Badge,
+  badgeSmVPadding
+};

package/dist/{chunk-7IHNYMFQ.js → chunk-FE477HOE.js}

@@ -4,10 +4,10 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   useThemeBg
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-B6S7Y4K7.js → chunk-GGWFUEDW.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-XDP7GCYE.js";
+} from "./chunk-HNK2KIC7.js";
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OPUCWQMK.js";
 
 // src/components/typography/LabelModerate.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-7YY6BH5O.js → chunk-GMEJR5XX.js}

@@ -1,9 +1,9 @@
 import {
   renderTypography
-} from "./chunk-VXKNN4SF.js";
+} from "./chunk-RQLRNKOP.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 
 // src/components/TextIconAligner.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";

package/dist/{chunk-LOL5TJ3H.js → chunk-GMOJB7PP.js}

@@ -3,46 +3,46 @@ import {
 } from "./chunk-JJC2AUQ3.js";
 import {
   TextButton
-} from "./chunk-2XUHQWCJ.js";
-import {
-  toReactNodes
-} from "./chunk-LIQSJ5R7.js";
+} from "./chunk-LKJ7QTWL.js";
 import {
   Dropdown
-} from "./chunk-XM2HQVUK.js";
+} from "./chunk-4IHNUHE3.js";
 import {
   standardBorderColor
-} from "./chunk-6CNJ5ZCC.js";
+} from "./chunk-Q76C6FJ5.js";
 import {
   Badge,
-  badgeVPadding
-} from "./chunk-SEZEDINC.js";
+  badgeSmVPadding
+} from "./chunk-ERNTWEIJ.js";
+import {
+  toReactNodes
+} from "./chunk-AKGW3FMJ.js";
 import {
   Heading,
   headingWithDefaults
-} from "./chunk-BHP5YL2N.js";
+} from "./chunk-N67Y7GWR.js";
 import {
   Loading
-} from "./chunk-5TTLUOJ5.js";
+} from "./chunk-SIYZ5PZT.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-TN5UPDZG.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 import {
   standardBorderRadius,
   standardLineHeightEms
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-XUWFUTR4.js";
+} from "./chunk-KPAVY3UH.js";
 import {
   __spreadValues
 } from "./chunk-LOPKRCGI.js";
@@ -161,7 +161,7 @@ var PageSectionBoxActionRow = ({
         title ? /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsxs(PageSectionBoxTitle, { children: [
             title,
-            titleBadge ? /* @__PURE__ */ jsx(Badge, { text: titleBadge, ml: 4 }) : null
+            titleBadge ? /* @__PURE__ */ jsx(Badge, { content: titleBadge, ml: 4 }) : null
           ] }),
           description ? /* @__PURE__ */ jsx(PageSectionBoxDescription, { children: description }) : null
         ] }) : null,
@@ -283,7 +283,7 @@ var PageSectionBoxTitle = styled.div`
   align-items: center;
   font-size: ${({ lg }) => lg ? 14 : 12}px;
   font-weight: 600;
-  line-height: ${({ lg }) => standardLineHeightEms * (lg ? 14 : 12) + badgeVPadding * 2}px;
+  line-height: ${({ lg }) => standardLineHeightEms * (lg ? 14 : 12) + badgeSmVPadding * 2}px;
 `;
 var PageSectionBoxDescription = styled.div`
   color: ${({ theme }) => theme.mcNeutral};

package/dist/{chunk-RPNTFEXE.js → chunk-H3UUVMZ3.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-55OQPFLF.js";
 import {
   overlaySurface
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-WGKUDRZ7.js → chunk-HLZNFEDV.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-XDP7GCYE.js";
+} from "./chunk-HNK2KIC7.js";
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OPUCWQMK.js";
 
 // src/components/typography/Overline.tsx
 import styled from "@emotion/styled";