@lightsparkdev/ui 1.0.2 → 1.0.3

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

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

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

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

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

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

package/dist/{chunk-CZCPVHVB.js → chunk-GSKTHUQJ.js}

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

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

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

package/dist/{chunk-5XZJEYHG.js → chunk-HGOGF6I7.js}

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

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

@@ -10,10 +10,10 @@ import {
 } from "./chunk-VI6WTKMV.js";
 import {
   rootFontSizePx
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   getFontColor
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.js";
 
 // src/components/Icon/Icon.tsx
 import styled from "@emotion/styled";
@@ -63,7 +63,7 @@ var IconContainer = styled.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 

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

@@ -61,7 +61,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -109,7 +110,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -148,6 +150,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -232,7 +235,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */

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

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

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

@@ -1,15 +1,15 @@
 import {
   Loading
-} from "./chunk-BMSSV6NX.js";
+} from "./chunk-5TTLUOJ5.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-LTCJ6LNO.js";
 import {
   flexCenter
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-7WDAN3OC.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   colors
 } from "./chunk-XUWFUTR4.js";

package/dist/{chunk-467PLJO3.js → chunk-JNNJVBHF.js}

@@ -1,9 +1,18 @@
 import {
   Button
-} from "./chunk-EV6PGQPM.js";
+} from "./chunk-SLKPLSJU.js";
+import {
+  UnstyledButton
+} from "./chunk-LTCJ6LNO.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  Icon
+} from "./chunk-I3FI3FNP.js";
+import {
+  standardFocusOutline
+} from "./chunk-PG2W2HVB.js";
 import {
   colors
 } from "./chunk-XUWFUTR4.js";
@@ -20,6 +29,9 @@ var Drawer = (props) => {
   const [grabbing, setGrabbing] = useState(false);
   const drawerContainerRef = useRef(null);
   const handleClose = () => {
+    if (props.nonDismissable) {
+      return;
+    }
     setIsOpen(false);
     setTimeout(() => {
       props.onClose && props.onClose();
@@ -29,6 +41,9 @@ var Drawer = (props) => {
   };
   const handleTouchMove = (event) => {
     var _a, _b;
+    if (props.nonDismissable) {
+      return;
+    }
     if (lastY === null) {
       setLastY(event.touches[0].clientY);
     } else {
@@ -45,9 +60,15 @@ var Drawer = (props) => {
     }
   };
   const handleTouchStart = () => {
+    if (props.nonDismissable) {
+      return;
+    }
     setGrabbing(true);
   };
   const handleTouchEnd = () => {
+    if (props.nonDismissable) {
+      return;
+    }
     setGrabbing(false);
     if (fractionVisible < 0.8) {
       handleClose();
@@ -75,16 +96,17 @@ var Drawer = (props) => {
         grabbing,
         ref: drawerContainerRef,
         children: [
-          props.grabber && /* @__PURE__ */ jsx(Grabber, { onClick: handleClose, children: /* @__PURE__ */ jsx(GrabberBar, {}) }),
-          props.closeButton && /* @__PURE__ */ jsx(CloseButtonContainer, { children: /* @__PURE__ */ jsx(
+          props.grabber && !props.nonDismissable && /* @__PURE__ */ jsx(Grabber, { onClick: handleClose, children: /* @__PURE__ */ jsx(GrabberBar, {}) }),
+          props.handleBack && /* @__PURE__ */ jsx(BackButtonContainer, { children: /* @__PURE__ */ jsx(
             Button,
             {
-              onClick: handleClose,
-              icon: "Close",
+              onClick: props.handleBack,
+              icon: "ChevronLeft",
               kind: "ghost",
-              size: "ExtraSmall"
+              size: "Small"
             }
           ) }),
+          props.closeButton && !props.nonDismissable && /* @__PURE__ */ jsx(CloseButtonContainer, { children: /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose, type: "button", children: /* @__PURE__ */ jsx(Icon, { name: "Close", width: 12 }) }) }),
           props.children
         ]
       }
@@ -117,6 +139,7 @@ var Background = styled.div`
 `;
 var DrawerContainer = styled.div`
   position: fixed;
+  max-height: 100dvh;
   width: 100%;
   background-color: ${({ theme }) => theme.bg};
   right: 0;
@@ -127,6 +150,7 @@ var DrawerContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding: ${"72px" /* 6xl */} ${"32px" /* xl */} ${"40px" /* 2xl */} ${"32px" /* xl */};
+  overflow-y: scroll;
 
   // Only smooth transition when not grabbing, otherwise dragging will feel very laggy
   ${(props) => props.grabbing && props.isOpen ? "" : "transition: transform 0.3s ease-in-out;"};
@@ -173,11 +197,32 @@ var CloseButtonContainer = styled.div`
   border-radius: 50%;
   background-color: ${colors.grayBlue94};
   padding: ${"8px" /* xs */};
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
 
   * > * {
     line-height: 14px;
   }
 `;
+var CloseButton = styled(UnstyledButton)`
+  ${standardFocusOutline}
+  width: 24px;
+  height: 24px;
+  justify-self: flex-end;
+`;
+var BackButtonContainer = styled.div`
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  border-radius: 50%;
+  padding: ${"8px" /* xs */};
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+`;
 var GrabberBar = styled.div`
   width: 36px;
   height: 5px;

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import {
   renderTypography
-} from "./chunk-DCFB5MJ7.js";
+} from "./chunk-VXKNN4SF.js";
 import {
   isExternalLinkNode,
   isIconNode,
@@ -8,7 +8,7 @@ import {
   isNextLinkNode,
   isTextNode,
   toNonTypographicReactNodes
-} from "./chunk-6H7PZJ2A.js";
+} from "./chunk-XDP7GCYE.js";
 import {
   __spreadProps,
   __spreadValues

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

@@ -3,40 +3,40 @@ import {
 } from "./chunk-JJC2AUQ3.js";
 import {
   TextButton
-} from "./chunk-HZ63YB4Y.js";
+} from "./chunk-2XUHQWCJ.js";
 import {
   toReactNodes
-} from "./chunk-UVGBD7XM.js";
+} from "./chunk-LIQSJ5R7.js";
 import {
   Dropdown
-} from "./chunk-GGEAODIA.js";
+} from "./chunk-XM2HQVUK.js";
 import {
   standardBorderColor
-} from "./chunk-S6AOKANU.js";
+} from "./chunk-6CNJ5ZCC.js";
 import {
   Badge,
   badgeVPadding
-} from "./chunk-RSAYBOK5.js";
+} from "./chunk-SEZEDINC.js";
 import {
   Heading,
   headingWithDefaults
-} from "./chunk-5H32AOXL.js";
+} from "./chunk-BHP5YL2N.js";
 import {
   Loading
-} from "./chunk-BMSSV6NX.js";
+} from "./chunk-5TTLUOJ5.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-LTCJ6LNO.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   standardBorderRadius,
   standardLineHeightEms
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

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

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

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

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

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

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

package/dist/{chunk-JOQCJPOA.js → chunk-N2NPIZCV.js}

@@ -1,38 +1,38 @@
 import {
   ToggleContainer
-} from "./chunk-L6S22JUU.js";
+} from "./chunk-SNFRMD6Z.js";
 import {
   InputSubtext,
   defaultTextInputTypography,
   inputSpacingPx,
   textInputPlaceholderColor,
   textInputStyle
-} from "./chunk-S6AOKANU.js";
+} from "./chunk-6CNJ5ZCC.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-4C2TISN7.js";
 import {
   CheckboxContainer
-} from "./chunk-CZQER3QD.js";
+} from "./chunk-E4DUADXU.js";
 import {
   Tooltip
-} from "./chunk-27SFWLPS.js";
+} from "./chunk-RPNTFEXE.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-LTCJ6LNO.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon,
   IconContainer
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   standardBorderRadius
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   getFontColor
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.js";
 import {
   __spreadValues
 } from "./chunk-LOPKRCGI.js";

package/dist/{chunk-TM2NGRD2.js → chunk-OKXC33OU.js}

@@ -1,6 +1,6 @@
 import {
   Label
-} from "./chunk-SKXCT2FQ.js";
+} from "./chunk-BDZ46Z2I.js";
 
 // src/components/Radio.tsx
 import styled from "@emotion/styled";

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

@@ -1,11 +1,10 @@
 import {
   themeOr
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.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-SRHSJOES.js → chunk-PQKVR2BR.js}

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

package/dist/{chunk-YRYVSAWS.js → chunk-QQSV7XJX.js}

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

package/dist/{chunk-27SFWLPS.js → chunk-RPNTFEXE.js}

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

package/dist/{chunk-RSAYBOK5.js → chunk-SEZEDINC.js}

@@ -1,13 +1,13 @@
 import {
   LabelModerate
-} from "./chunk-56QJRFP2.js";
+} from "./chunk-B6S7Y4K7.js";
 import {
   standardBorderRadius
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   getColor,
   isLight
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.js";
 
 // src/components/Badge.tsx
 import styled from "@emotion/styled";

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

@@ -1,9 +1,9 @@
 import {
   renderTypography
-} from "./chunk-DCFB5MJ7.js";
+} from "./chunk-VXKNN4SF.js";
 import {
   Loading
-} from "./chunk-BMSSV6NX.js";
+} from "./chunk-5TTLUOJ5.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
@@ -12,23 +12,23 @@ import {
 } from "./chunk-AAFUVYVP.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-4C2TISN7.js";
 import {
   Tooltip
-} from "./chunk-27SFWLPS.js";
+} from "./chunk-RPNTFEXE.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-LTCJ6LNO.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   getFocusOutline
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   getBackgroundColor,
   isThemeOrColorKey
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.js";
 import {
   TokenSize
 } from "./chunk-ENBUKLVT.js";
@@ -76,7 +76,7 @@ function getPaddingX(size, kind, isRound) {
 function getPadding({ paddingY, kind, size, iconSide, isRound }) {
   const paddingX = getPaddingX(size, kind, isRound);
   const paddingForIcon = 0;
-  return `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
+  return kind === "ghost" ? 0 : `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
 }
 function resolveBackgroundColorKey(theme, kind, defaultKey) {
   var _a;

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

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

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

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