@lightsparkdev/ui 1.0.3 → 1.0.4

package/dist/{chunk-BSH6WRUZ.js → chunk-KBLCFXNL.js}

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

package/dist/{chunk-LGKXPUSI.js → chunk-KJHREJHT.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-JJC2AUQ3.js";
 import {
   TextButton
-} from "./chunk-2XUHQWCJ.js";
+} from "./chunk-C4HNAZFZ.js";
 import {
   IconContainer
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-E4DUADXU.js → chunk-LFD2KVAB.js}

@@ -1,6 +1,6 @@
 import {
   standardLineHeightEms
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 
 // src/components/Checkbox.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-VXKNN4SF.js → chunk-LGXMGWLV.js}

@@ -1,39 +1,39 @@
-import {
-  Label
-} from "./chunk-BDZ46Z2I.js";
 import {
   LabelModerate
-} from "./chunk-B6S7Y4K7.js";
+} from "./chunk-V523QTZQ.js";
 import {
   LabelStrong
-} from "./chunk-GSKTHUQJ.js";
+} from "./chunk-YRZ3VNBI.js";
 import {
   Overline
-} from "./chunk-WGKUDRZ7.js";
+} from "./chunk-HPZVUEDJ.js";
 import {
   Code
-} from "./chunk-2AGBCGOW.js";
+} from "./chunk-7COKMITX.js";
 import {
   Display
-} from "./chunk-MRGHRTKA.js";
+} from "./chunk-DIKOS5R6.js";
 import {
   Title
-} from "./chunk-35PJW7RT.js";
+} from "./chunk-AZOVE32P.js";
 import {
   Body
-} from "./chunk-GWHKALYQ.js";
+} from "./chunk-HVDX4OZJ.js";
 import {
   BodyStrong
-} from "./chunk-WTMJTGW4.js";
+} from "./chunk-OMY3WTAU.js";
 import {
   Headline
-} from "./chunk-CRTTTIAD.js";
+} from "./chunk-OZQ5WPLN.js";
+import {
+  Label
+} from "./chunk-7BSME2ZU.js";
 import {
-  __spreadValues
+  __objRest
 } from "./chunk-LOPKRCGI.js";
 
 // src/components/typography/renderTypography.tsx
-import { jsx } from "@emotion/react/jsx-runtime";
+import React from "react";
 var typographyMap = {
   Display,
   Headline,
@@ -45,11 +45,12 @@ var typographyMap = {
   "Label Strong": LabelStrong,
   Overline,
   Code,
-  "Code Strong": () => /* @__PURE__ */ jsx("div", { children: "Unimplemented" })
+  "Code Strong": Code
 };
 var renderTypography = (type, props) => {
   const TypographyComponent = typographyMap[type];
-  return /* @__PURE__ */ jsx(TypographyComponent, __spreadValues({}, props));
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return React.createElement(TypographyComponent, rest, children);
 };
 
 export {

package/dist/{chunk-435FPPZK.js → chunk-LLGN3OM3.js}

@@ -1,12 +1,12 @@
 import {
   DocsHeadline
-} from "./chunk-BENSR2YW.js";
+} from "./chunk-5ON3ICVC.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-MWDDIXIP.js → chunk-MK2JFFUG.js}

@@ -1,6 +1,6 @@
 import {
   pxToRems
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-GQVNE3NU.js";
 
 // src/components/StatusIndicator.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-SLKPLSJU.js → chunk-MNMVZI7D.js}

@@ -1,9 +1,9 @@
-import {
-  renderTypography
-} from "./chunk-VXKNN4SF.js";
 import {
   Loading
-} from "./chunk-5TTLUOJ5.js";
+} from "./chunk-DNGAINGL.js";
+import {
+  renderTypography
+} from "./chunk-LGXMGWLV.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
@@ -12,23 +12,23 @@ import {
 } from "./chunk-AAFUVYVP.js";
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OUHQXQOJ.js";
 import {
   Tooltip
-} from "./chunk-RPNTFEXE.js";
+} from "./chunk-ZS7G6WIG.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   getFocusOutline
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   getBackgroundColor,
   isThemeOrColorKey
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   TokenSize
 } from "./chunk-ENBUKLVT.js";

package/dist/{chunk-WTMJTGW4.js → chunk-OMY3WTAU.js}

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

package/dist/{chunk-4C2TISN7.js → chunk-OUHQXQOJ.js}

@@ -1,6 +1,6 @@
 import {
   getFontColor
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   getTypographyString
 } from "./chunk-ENBUKLVT.js";

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

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

package/dist/{chunk-7FHOKVKJ.js → chunk-PDQVYUEW.js}

@@ -1,9 +1,9 @@
 import {
   toReactNodes
-} from "./chunk-LIQSJ5R7.js";
+} from "./chunk-ZO35RX7V.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
@@ -11,16 +11,16 @@ import {
   extend,
   flexCenter,
   pxToRems
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   standardContentInset
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   themeOr
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   colors
 } from "./chunk-XUWFUTR4.js";

package/dist/{chunk-ILEZ6AWT.js → chunk-QCHEDM2I.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-E3FGOYEJ.js";
 import {
   toReactNodes
-} from "./chunk-LIQSJ5R7.js";
+} from "./chunk-ZO35RX7V.js";
 import {
   Link
 } from "./chunk-AAFUVYVP.js";
@@ -15,10 +15,10 @@ import {
 } from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   getColor
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-DXA3WUSX.js → chunk-RESJONBZ.js}

@@ -1,9 +1,9 @@
 import {
   CopyToClipboardButton
-} from "./chunk-X4TGLNCH.js";
+} from "./chunk-242JGEN4.js";
 import {
   standardBorderRadius
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 
 // src/components/SecretContainer.tsx
 import styled from "@emotion/styled";

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

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

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

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

package/dist/{chunk-I3FI3FNP.js → chunk-TNDSUTUN.js}

@@ -10,10 +10,10 @@ import {
 } from "./chunk-VI6WTKMV.js";
 import {
   rootFontSizePx
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   getFontColor
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-VNQE6KEX.js";
 
 // src/components/Icon/Icon.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-PQKVR2BR.js → chunk-TNISOOCF.js}

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

package/dist/{chunk-4BFBANKF.js → chunk-UNFCVZ32.js}

@@ -1,31 +1,34 @@
 import {
   StyledContentTable
-} from "./chunk-K7FYXGOI.js";
+} from "./chunk-3R5KJDSL.js";
 import {
   StyledCode
-} from "./chunk-2AGBCGOW.js";
+} from "./chunk-7COKMITX.js";
 import {
   displaySelector
-} from "./chunk-MRGHRTKA.js";
+} from "./chunk-DIKOS5R6.js";
 import {
   StyledTitle
-} from "./chunk-35PJW7RT.js";
+} from "./chunk-AZOVE32P.js";
 import {
   StyledBody
-} from "./chunk-GWHKALYQ.js";
+} from "./chunk-HVDX4OZJ.js";
 import {
   ALL_HEADLINE_SELECTORS,
   headlineSelector
-} from "./chunk-CRTTTIAD.js";
+} from "./chunk-OZQ5WPLN.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   standardBorderRadius
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   getTypographyString
 } from "./chunk-ENBUKLVT.js";
@@ -55,52 +58,52 @@ var StyledArticle = styled.article`
 
   ${headlineSelector("h1")} {
     margin: 0;
-    padding-bottom: ${"8px" /* xs */};
+    padding-bottom: ${Spacing.px.xs};
   }
 
   ${headlineSelector("h2")} {
-    padding-top: ${"40px" /* 2xl */};
-    padding-bottom: ${"8px" /* xs */};
+    padding-top: ${Spacing.px["2xl"]};
+    padding-bottom: ${Spacing.px.xs};
     margin: 0;
   }
 
   ${headlineSelector("h3")} {
-    padding-top: ${"40px" /* 2xl */};
-    padding-bottom: ${"8px" /* xs */};
+    padding-top: ${Spacing.px["2xl"]};
+    padding-bottom: ${Spacing.px.xs};
     margin: 0;
   }
 
   ${headlineSelector("h4")} {
-    padding-top: ${"40px" /* 2xl */};
-    padding-bottom: ${"8px" /* xs */};
+    padding-top: ${Spacing.px["2xl"]};
+    padding-bottom: ${Spacing.px.xs};
     margin: 0;
   }
 
   ${headlineSelector("h5")} {
-    padding-top: ${"40px" /* 2xl */};
-    padding-bottom: ${"8px" /* xs */};
+    padding-top: ${Spacing.px["2xl"]};
+    padding-bottom: ${Spacing.px.xs};
     margin: 0;
   }
 
   ${headlineSelector("h6")} {
-    padding-top: ${"40px" /* 2xl */};
-    padding-bottom: ${"8px" /* xs */};
+    padding-top: ${Spacing.px["2xl"]};
+    padding-bottom: ${Spacing.px.xs};
     margin: 0;
   }
 
   ${select(StyledBody)} {
-    margin-top: ${"8px" /* xs */};
-    margin-bottom: ${"8px" /* xs */};
+    margin-top: ${Spacing.px.xs};
+    margin-bottom: ${Spacing.px.xs};
   }
 
   ${select(StyledContentTable)} {
-    margin: ${"40px" /* 2xl */} 0;
+    margin: ${Spacing.px["2xl"]} 0;
   }
 
   img,
   video {
-    margin-top: ${"16px" /* md */};
-    margin-bottom: ${"16px" /* md */};
+    margin-top: ${Spacing.px.md};
+    margin-bottom: ${Spacing.px.md};
   }
 
   strong {
@@ -116,9 +119,9 @@ var StyledArticle = styled.article`
 
   ul,
   ol {
-    padding-left: ${"24px" /* lg */};
-    margin-top: ${"8px" /* xs */};
-    margin-bottom: ${"8px" /* xs */};
+    padding-left: ${Spacing.px.lg};
+    margin-top: ${Spacing.px.xs};
+    margin-bottom: ${Spacing.px.xs};
     *:not(a) {
       color: ${({ theme }) => theme.text};
     }
@@ -127,23 +130,23 @@ var StyledArticle = styled.article`
   li {
     ${({ theme }) => getTypographyString(theme, "Body", "Medium")}
     :not(:last-child) {
-      margin-bottom: ${"4px" /* 3xs */};
+      margin-bottom: ${Spacing.px["3xs"]};
     }
   }
 
   code:not([class|="language"]) {
     ${({ theme }) => getTypographyString(theme, "Code", "Medium")}
     background: ${colors.grayBlue94};
-    padding: ${"2px" /* 4xs */} ${"6px" /* 2xs */};
-    margin: ${"2px" /* 4xs */};
+    padding: ${Spacing.px["4xs"]} ${Spacing.px["2xs"]};
+    margin: ${Spacing.px["4xs"]};
     border-radius: 4px;
   }
 
   pre[class|="language"] {
     ${standardBorderRadius(8)}
     width: 100%;
-    padding: ${"16px" /* md */} ${"24px" /* lg */};
-    margin: ${"16px" /* md */} 0;
+    padding: ${Spacing.px.md} ${Spacing.px.lg};
+    margin: ${Spacing.px.md} 0;
   }
 
   // Must match specificity of prismjs to get proper line height!
@@ -155,7 +158,7 @@ var StyledArticle = styled.article`
   }
 
   blockquote {
-    margin: ${"8px" /* xs */} 0;
+    margin: ${Spacing.px.xs} 0;
   }
 `;
 

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

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

package/dist/{chunk-IBZBPQMZ.js → chunk-VNQE6KEX.js}

@@ -61,8 +61,7 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning,
-  inputBackground: colors.white
+  warning: colors.warning
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -74,6 +73,10 @@ var baseTheme = __spreadProps(__spreadValues({}, baseThemeColors), {
   typography: getTypography("Lightspark" /* Lightspark */),
   hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
   buttons: defaultButtonsTheme,
+  badge: {
+    bg: "c05Neutral"
+  },
+  inputBackground: colors.white,
   loading: "LoadingSpinner"
 });
 var lightBaseTheme = baseTheme;
@@ -111,7 +114,10 @@ var darkBaseTheme = {
   warning: colors.warning,
   buttons: defaultButtonsTheme,
   loading: "LoadingSpinner",
-  inputBackground: colors.black
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -227,7 +233,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,

package/dist/{chunk-HGOGF6I7.js → chunk-VR2GLRXH.js}

@@ -1,6 +1,6 @@
 import {
   TextInput
-} from "./chunk-N2NPIZCV.js";
+} from "./chunk-ZCXGHQQF.js";
 import {
   addCommasToDigits,
   removeChars,

package/dist/chunk-VWD7T5MQ.js

@@ -0,0 +1,74 @@
+import {
+  setDefaultReactNodesTypography,
+  toReactNodes
+} from "./chunk-ZO35RX7V.js";
+import {
+  Icon
+} from "./chunk-TNDSUTUN.js";
+import {
+  standardBorderRadius
+} from "./chunk-CZFFMEAS.js";
+import {
+  getColor
+} from "./chunk-VNQE6KEX.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-54EOEIEN.js → chunk-VXH6GWGE.js}

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