@lightsparkdev/ui 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lightsparkdev/ui
 
+## 1.0.4
+
+### Patch Changes
+
+- 1028e1c: Adds numbers to Spacing in addition to px values, setDefaultReactNodesTypography
+
+## 1.0.3
+
+### Patch Changes
+
+- e647962: Updates to Button, CodeInput, Drawer, Icon, Modal, Video
+
 ## 1.0.2
 
 ### Patch Changes

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

@@ -1,12 +1,12 @@
 import {
   Tooltip
-} from "./chunk-27SFWLPS.js";
+} from "./chunk-ZS7G6WIG.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   __async
 } from "./chunk-LOPKRCGI.js";

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

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

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

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

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

@@ -1,12 +1,12 @@
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   standardLineHeightEms
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   themeOr
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   colors
 } from "./chunk-XUWFUTR4.js";

package/dist/{chunk-AI6DCUWK.js → chunk-4KURUJD2.js}

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

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

@@ -6,7 +6,7 @@ import {
 } from "./chunk-AAFUVYVP.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-TNDSUTUN.js";
 
 // src/utils/toNonTypographicReactNodes.tsx
 import { isObject } from "lodash-es";
@@ -44,6 +44,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`

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

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

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

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

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

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

package/dist/{chunk-SKXCT2FQ.js → chunk-7BSME2ZU.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-6H7PZJ2A.js";
+} from "./chunk-4X67A2CS.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-OUHQXQOJ.js";
 
 // src/components/typography/Label.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-GNVEN6UE.js → chunk-7COKMITX.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-6H7PZJ2A.js";
+} from "./chunk-4X67A2CS.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-OUHQXQOJ.js";
 
 // src/components/typography/Code.tsx
 import styled from "@emotion/styled";

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

@@ -1,9 +1,9 @@
 import {
   Heading
-} from "./chunk-5H32AOXL.js";
+} from "./chunk-BAGRU7JE.js";
 import {
   ButtonRowContainer
-} from "./chunk-D73OOC3E.js";
+} from "./chunk-WDJMAZFO.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
@@ -11,7 +11,7 @@ import {
   flexCenter,
   overflowAutoWithoutScrollbars,
   size
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   cardBorderRadiusPx,
   darkGradientBg,
@@ -19,10 +19,10 @@ import {
   standardBorderRadius,
   standardCardShadow,
   standardContentInset
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   themeOr
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   bp,
   useBreakpoints

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

@@ -6,21 +6,21 @@ import {
 } from "./chunk-AAFUVYVP.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardFocusOutline
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   themeOr
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

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

@@ -1,16 +1,16 @@
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-OUHQXQOJ.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   standardBorderRadius,
   subtext
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   themeOr
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-VNQE6KEX.js";
 
 // src/styles/fields.tsx
 import { css } from "@emotion/react";
@@ -81,7 +81,7 @@ var textInputStyle = ({
   var _a;
   return css`
   border-radius: ${textInputBorderRadiusPx}px;
-  background-color: ${disabled ? theme.vlcNeutral : theme.bg};
+  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
   cursor: ${disabled ? "not-allowed" : "auto"};
   box-sizing: border-box;
   font-weight: ${textInputFontWeight};

package/dist/{chunk-CMQELZES.js → chunk-AZOVE32P.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-6H7PZJ2A.js";
+} from "./chunk-4X67A2CS.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-OUHQXQOJ.js";
 
 // src/components/typography/Title.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-5H32AOXL.js → chunk-BAGRU7JE.js}

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

package/dist/{chunk-2JYYREVX.js → chunk-BPGBJRZE.js}

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

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

@@ -1,15 +1,15 @@
 import {
   CopyToClipboardButton
-} from "./chunk-SGSLTG65.js";
+} from "./chunk-242JGEN4.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   standardBorderRadius
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   themeOr
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   colors
 } from "./chunk-XUWFUTR4.js";

package/dist/{chunk-W3BAJ3HT.js → chunk-C3YODRA3.js}

@@ -3,40 +3,40 @@ import {
 } from "./chunk-JJC2AUQ3.js";
 import {
   TextButton
-} from "./chunk-HZ63YB4Y.js";
-import {
-  toReactNodes
-} from "./chunk-UVGBD7XM.js";
+} from "./chunk-C4HNAZFZ.js";
 import {
   Dropdown
-} from "./chunk-GGEAODIA.js";
+} from "./chunk-7RLDCOUT.js";
 import {
   standardBorderColor
-} from "./chunk-S6AOKANU.js";
+} from "./chunk-7RMHMFS2.js";
 import {
   Badge,
-  badgeVPadding
-} from "./chunk-RSAYBOK5.js";
+  badgeSmVPadding
+} from "./chunk-VWD7T5MQ.js";
+import {
+  toReactNodes
+} from "./chunk-ZO35RX7V.js";
 import {
   Heading,
   headingWithDefaults
-} from "./chunk-5H32AOXL.js";
+} from "./chunk-BAGRU7JE.js";
 import {
   Loading
-} from "./chunk-BMSSV6NX.js";
+} from "./chunk-DNGAINGL.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   standardBorderRadius,
   standardLineHeightEms
-} from "./chunk-7NPHOJXD.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-HZ63YB4Y.js → chunk-C4HNAZFZ.js}

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

package/dist/{chunk-7NPHOJXD.js → chunk-CZFFMEAS.js}

@@ -1,11 +1,10 @@
 import {
   themeOr
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-VNQE6KEX.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
-  colors,
   darkGradient
 } from "./chunk-XUWFUTR4.js";
 
@@ -121,11 +120,12 @@ var overlaySurfaceBorderColor = ({
 `;
 var overlaySurface = ({
   theme,
-  important = false
+  important = false,
+  border = true
 }) => css`
-  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
+  background-color: ${themeOr(theme.bg, theme.c1Neutral)({ theme })}
     ${important ? "!important" : ""};
-  border: 0.5px solid ${important ? "!important" : ""};
+  ${border ? `border: 0.5px solid ${important ? "!important" : ""};` : ""}
   ${overlaySurfaceBorderColor({ theme, important })};
   ${themeOr(
   `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,

package/dist/{chunk-HRZNVE2K.js → chunk-DIKOS5R6.js}

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

package/dist/{chunk-BMSSV6NX.js → chunk-DNGAINGL.js}

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

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

@@ -1,15 +1,15 @@
 import {
   Loading
-} from "./chunk-BMSSV6NX.js";
+} from "./chunk-DNGAINGL.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   flexCenter
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.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-OA3BZAST.js → chunk-GLEAWATH.js}

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

package/dist/{chunk-KFX7US6Y.js → chunk-GQVNE3NU.js}

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

package/dist/{chunk-UBYBILLK.js → chunk-HPZVUEDJ.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-6H7PZJ2A.js";
+} from "./chunk-4X67A2CS.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-OUHQXQOJ.js";
 
 // src/components/typography/Overline.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-TM3C4LEG.js → chunk-HVDX4OZJ.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-6H7PZJ2A.js";
+} from "./chunk-4X67A2CS.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-OUHQXQOJ.js";
 
 // src/components/typography/Body.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-6JFJDBV2.js → chunk-JAPRGAB7.js}

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