@lightsparkdev/ui 1.0.3 → 1.0.5

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

@@ -1,37 +1,40 @@
 import {
   StyledContentTable
-} from "./chunk-K7FYXGOI.js";
+} from "./chunk-TMIBU4ME.js";
 import {
   StyledCode
-} from "./chunk-2AGBCGOW.js";
+} from "./chunk-ZR2TARGX.js";
 import {
   displaySelector
-} from "./chunk-MRGHRTKA.js";
+} from "./chunk-IXAXRBFS.js";
 import {
   StyledTitle
-} from "./chunk-35PJW7RT.js";
+} from "./chunk-4EV5IUUJ.js";
 import {
   StyledBody
-} from "./chunk-GWHKALYQ.js";
+} from "./chunk-PBLWYVQF.js";
 import {
   ALL_HEADLINE_SELECTORS,
   headlineSelector
-} from "./chunk-CRTTTIAD.js";
+} from "./chunk-BNHCCR3C.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-D4DFISYR.js";
 import {
   standardBorderRadius
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   getTypographyString
 } from "./chunk-ENBUKLVT.js";
 import {
   colors
-} from "./chunk-XUWFUTR4.js";
+} from "./chunk-KPAVY3UH.js";
 
 // src/components/typography/Article.tsx
 import styled from "@emotion/styled";
@@ -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-SLKPLSJU.js → chunk-NK7WH3TK.js}

@@ -1,34 +1,34 @@
-import {
-  renderTypography
-} from "./chunk-VXKNN4SF.js";
 import {
   Loading
-} from "./chunk-5TTLUOJ5.js";
+} from "./chunk-SIYZ5PZT.js";
+import {
+  renderTypography
+} from "./chunk-RQLRNKOP.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   Link
-} from "./chunk-AAFUVYVP.js";
+} from "./chunk-SCIQSZSW.js";
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OPUCWQMK.js";
 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 {
   getFocusOutline
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   getBackgroundColor,
   isThemeOrColorKey
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 import {
   TokenSize
 } from "./chunk-ENBUKLVT.js";

package/dist/{chunk-KX5QZXCD.js → chunk-NONMMIMQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-5KSG5D3I.js";
 import {
   TextInput
-} from "./chunk-N2NPIZCV.js";
+} from "./chunk-M7E2PMFK.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-Y7RQUJUS.js → chunk-NWPPTOKK.js}

@@ -1,9 +1,9 @@
 import {
   Heading
-} from "./chunk-BHP5YL2N.js";
+} from "./chunk-N67Y7GWR.js";
 import {
   ButtonRowContainer
-} from "./chunk-YIHC25WB.js";
+} from "./chunk-IIRG6R42.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
@@ -11,7 +11,7 @@ import {
   flexCenter,
   overflowAutoWithoutScrollbars,
   size
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-D4DFISYR.js";
 import {
   cardBorderRadiusPx,
   darkGradientBg,
@@ -19,10 +19,10 @@ import {
   standardBorderRadius,
   standardCardShadow,
   standardContentInset
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   themeOr
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 import {
   bp,
   useBreakpoints

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

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

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

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

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

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

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

package/dist/{chunk-6CNJ5ZCC.js → chunk-Q76C6FJ5.js}

@@ -1,16 +1,16 @@
 import {
   applyTypography
-} from "./chunk-4C2TISN7.js";
+} from "./chunk-OPUCWQMK.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   standardBorderRadius,
   subtext
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   themeOr
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-UAUAYQ3C.js";
 
 // src/styles/fields.tsx
 import { css } from "@emotion/react";

package/dist/{chunk-JNNJVBHF.js → chunk-QBRCVOJ4.js}

@@ -1,21 +1,24 @@
 import {
   Button
-} from "./chunk-SLKPLSJU.js";
+} from "./chunk-NK7WH3TK.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-TN5UPDZG.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 import {
   standardFocusOutline
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-YG5BANJH.js";
 import {
   colors
-} from "./chunk-XUWFUTR4.js";
+} from "./chunk-KPAVY3UH.js";
 
 // src/components/Drawer.tsx
 import styled from "@emotion/styled";
@@ -146,10 +149,11 @@ var DrawerContainer = styled.div`
   bottom: 0;
   transform: translateY(${(props) => `${props.totalDeltaY}px`});
   z-index: ${z.modalContainer};
-  border-radius: ${"24px" /* lg */} ${"24px" /* lg */} 0 0;
+  border-radius: ${Spacing.px.lg} ${Spacing.px.lg} 0 0;
   display: flex;
   flex-direction: column;
-  padding: ${"72px" /* 6xl */} ${"32px" /* xl */} ${"40px" /* 2xl */} ${"32px" /* xl */};
+  padding: ${Spacing.px["6xl"]} ${Spacing.px.xl} ${Spacing.px["2xl"]}
+    ${Spacing.px.xl};
   overflow-y: scroll;
 
   // Only smooth transition when not grabbing, otherwise dragging will feel very laggy
@@ -182,7 +186,7 @@ var Grabber = styled.div`
   top: 0;
   left: 0;
   width: 100%;
-  height: ${"24px" /* lg */};
+  height: ${Spacing.px.lg};
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -196,7 +200,7 @@ var CloseButtonContainer = styled.div`
   right: 20px;
   border-radius: 50%;
   background-color: ${colors.grayBlue94};
-  padding: ${"8px" /* xs */};
+  padding: ${Spacing.px.xs};
   height: 30px;
   width: 30px;
   display: flex;
@@ -217,7 +221,7 @@ var BackButtonContainer = styled.div`
   top: 20px;
   left: 20px;
   border-radius: 50%;
-  padding: ${"8px" /* xs */};
+  padding: ${Spacing.px.xs};
   height: 30px;
   width: 30px;
   display: flex;

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

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

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

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

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

package/dist/chunk-QTPYP3IK.js

@@ -0,0 +1,27 @@
+import {
+  Flex
+} from "./chunk-IL6J7EBZ.js";
+import {
+  Icon
+} from "./chunk-LAGOF7IU.js";
+import {
+  getColor
+} from "./chunk-UAUAYQ3C.js";
+
+// src/components/IconWithCircleBackground.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function IconWithCircleBackground({
+  iconName = "WarningSign"
+}) {
+  return /* @__PURE__ */ jsx(Flex, { center: true, children: /* @__PURE__ */ jsx(StyledIconWithCircleBackground, { children: /* @__PURE__ */ jsx(Icon, { name: iconName, width: 40, color: "grayBlue9" }) }) });
+}
+var StyledIconWithCircleBackground = styled.div`
+  background-color: ${({ theme }) => getColor(theme, "grayBlue94")};
+  border-radius: 50%;
+  padding: 20px;
+`;
+
+export {
+  IconWithCircleBackground
+};

package/dist/{chunk-LH7GLNMY.js → chunk-QZMD3YHI.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 
 // src/components/CurrencyAmount.tsx
 import styled from "@emotion/styled";

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

@@ -1,39 +1,39 @@
-import {
-  Label
-} from "./chunk-BDZ46Z2I.js";
 import {
   LabelModerate
-} from "./chunk-B6S7Y4K7.js";
+} from "./chunk-GGWFUEDW.js";
 import {
   LabelStrong
-} from "./chunk-GSKTHUQJ.js";
+} from "./chunk-XLKL3DNK.js";
 import {
   Overline
-} from "./chunk-WGKUDRZ7.js";
+} from "./chunk-HLZNFEDV.js";
 import {
   Code
-} from "./chunk-2AGBCGOW.js";
+} from "./chunk-ZR2TARGX.js";
 import {
   Display
-} from "./chunk-MRGHRTKA.js";
+} from "./chunk-IXAXRBFS.js";
 import {
   Title
-} from "./chunk-35PJW7RT.js";
+} from "./chunk-4EV5IUUJ.js";
 import {
   Body
-} from "./chunk-GWHKALYQ.js";
+} from "./chunk-PBLWYVQF.js";
 import {
   BodyStrong
-} from "./chunk-WTMJTGW4.js";
+} from "./chunk-QON4D7N2.js";
 import {
   Headline
-} from "./chunk-CRTTTIAD.js";
+} from "./chunk-BNHCCR3C.js";
+import {
+  Label
+} from "./chunk-IH5SIRJL.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-7FHOKVKJ.js → chunk-RRXB5FQC.js}

@@ -1,9 +1,9 @@
 import {
   toReactNodes
-} from "./chunk-LIQSJ5R7.js";
+} from "./chunk-AKGW3FMJ.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-TN5UPDZG.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
@@ -11,19 +11,19 @@ import {
   extend,
   flexCenter,
   pxToRems
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-D4DFISYR.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 import {
   standardContentInset
-} 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-AAFUVYVP.js → chunk-SCIQSZSW.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-EDN2QDCB.js";
 import {
   colors
-} from "./chunk-XUWFUTR4.js";
+} from "./chunk-KPAVY3UH.js";
 
 // src/router.tsx
 import { omit } from "lodash-es";

package/dist/{chunk-5TTLUOJ5.js → chunk-SIYZ5PZT.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-LAGOF7IU.js";
 
 // src/components/Loading.tsx
 import { useTheme } from "@emotion/react";

package/dist/{chunk-K7FYXGOI.js → chunk-TMIBU4ME.js}

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

package/dist/{chunk-LTCJ6LNO.js → chunk-TN5UPDZG.js}

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

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

@@ -13,7 +13,7 @@ import {
   darkGradient,
   hcNeutralFromBg,
   isColorKey
-} from "./chunk-XUWFUTR4.js";
+} from "./chunk-KPAVY3UH.js";
 import {
   __spreadProps,
   __spreadValues
@@ -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 */,