@lightsparkdev/ui 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lightsparkdev/ui
 
+## 1.0.4
+
+### Patch Changes
+
+- 1028e1c: Adds numbers to Spacing in addition to px values, setDefaultReactNodesTypography
+
 ## 1.0.3
 
 ### Patch Changes

package/dist/{chunk-X4TGLNCH.js → chunk-242JGEN4.js}

@@ -1,12 +1,12 @@
 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 {
   __async
 } from "./chunk-LOPKRCGI.js";

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

@@ -1,9 +1,9 @@
 import {
   SingleCodeInput
-} from "./chunk-PQKVR2BR.js";
+} from "./chunk-TNISOOCF.js";
 import {
   textInputBorderColor
-} from "./chunk-6CNJ5ZCC.js";
+} from "./chunk-7RMHMFS2.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-K7FYXGOI.js → chunk-3R5KJDSL.js}

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

package/dist/{chunk-SNFRMD6Z.js → chunk-4BERRPJN.js}

@@ -1,12 +1,12 @@
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   standardLineHeightEms
-} 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-LH7GLNMY.js → chunk-4KURUJD2.js}

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

package/dist/{chunk-XDP7GCYE.js → chunk-4X67A2CS.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-AAFUVYVP.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 
 // src/utils/toNonTypographicReactNodes.tsx
 import { isObject } from "lodash-es";

package/dist/{chunk-QQSV7XJX.js → chunk-5F7IOIWL.js}

@@ -1,6 +1,6 @@
 import {
   StatusIndicator
-} from "./chunk-MWDDIXIP.js";
+} from "./chunk-MK2JFFUG.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";

package/dist/{chunk-BENSR2YW.js → chunk-5ON3ICVC.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2NT4RAQ3.js";
 import {
   StyledHeadline
-} from "./chunk-CRTTTIAD.js";
+} from "./chunk-OZQ5WPLN.js";
 
 // src/components/documentation/DocsHeadline.tsx
 import React from "react";

package/dist/{chunk-XB4KQFK2.js → chunk-642OXLAD.js}

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

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

package/dist/{chunk-2AGBCGOW.js → chunk-7COKMITX.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/Code.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-Y7RQUJUS.js → chunk-7OJQZEVL.js}

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

package/dist/{chunk-XM2HQVUK.js → chunk-7RLDCOUT.js}

@@ -6,21 +6,21 @@ import {
 } from "./chunk-AAFUVYVP.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardFocusOutline
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   themeOr
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

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

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

package/dist/{chunk-35PJW7RT.js → chunk-AZOVE32P.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/Title.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-BHP5YL2N.js → chunk-BAGRU7JE.js}

@@ -1,7 +1,7 @@
 import {
   firstChild,
   pxToRems
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

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

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

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

@@ -1,15 +1,15 @@
 import {
   CopyToClipboardButton
-} from "./chunk-X4TGLNCH.js";
+} from "./chunk-242JGEN4.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   standardBorderRadius
-} 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-LOL5TJ3H.js → chunk-C3YODRA3.js}

@@ -3,40 +3,40 @@ import {
 } from "./chunk-JJC2AUQ3.js";
 import {
   TextButton
-} from "./chunk-2XUHQWCJ.js";
-import {
-  toReactNodes
-} from "./chunk-LIQSJ5R7.js";
+} from "./chunk-C4HNAZFZ.js";
 import {
   Dropdown
-} from "./chunk-XM2HQVUK.js";
+} from "./chunk-7RLDCOUT.js";
 import {
   standardBorderColor
-} from "./chunk-6CNJ5ZCC.js";
+} from "./chunk-7RMHMFS2.js";
 import {
   Badge,
-  badgeVPadding
-} from "./chunk-SEZEDINC.js";
+  badgeSmVPadding
+} from "./chunk-VWD7T5MQ.js";
+import {
+  toReactNodes
+} from "./chunk-ZO35RX7V.js";
 import {
   Heading,
   headingWithDefaults
-} from "./chunk-BHP5YL2N.js";
+} from "./chunk-BAGRU7JE.js";
 import {
   Loading
-} from "./chunk-5TTLUOJ5.js";
+} from "./chunk-DNGAINGL.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   standardBorderRadius,
   standardLineHeightEms
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.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-2XUHQWCJ.js → chunk-C4HNAZFZ.js}

@@ -1,18 +1,18 @@
 import {
   TextIconAligner
-} from "./chunk-7YY6BH5O.js";
+} from "./chunk-SZ4KKLYJ.js";
 import {
   Link
 } from "./chunk-AAFUVYVP.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   elide
 } from "./chunk-EDN2QDCB.js";
 import {
   getFocusOutline
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-PG2W2HVB.js → chunk-CZFFMEAS.js}

@@ -1,6 +1,6 @@
 import {
   themeOr
-} from "./chunk-IBZBPQMZ.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

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

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

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

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

@@ -1,15 +1,15 @@
 import {
   Loading
-} from "./chunk-5TTLUOJ5.js";
+} from "./chunk-DNGAINGL.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   flexCenter
-} from "./chunk-7WDAN3OC.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   colors
 } from "./chunk-XUWFUTR4.js";

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-EIFK352Q.js

@@ -0,0 +1,27 @@
+import {
+  Flex
+} from "./chunk-IL6J7EBZ.js";
+import {
+  Icon
+} from "./chunk-TNDSUTUN.js";
+import {
+  getColor
+} from "./chunk-VNQE6KEX.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-UH5F35II.js → chunk-GLEAWATH.js}

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

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

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

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

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

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

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

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

@@ -1,18 +1,21 @@
 import {
   Button
-} from "./chunk-SLKPLSJU.js";
+} from "./chunk-MNMVZI7D.js";
 import {
   UnstyledButton
-} from "./chunk-LTCJ6LNO.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   Icon
-} from "./chunk-I3FI3FNP.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   standardFocusOutline
-} from "./chunk-PG2W2HVB.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   colors
 } from "./chunk-XUWFUTR4.js";
@@ -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;