@lightsparkdev/ui 1.0.2 → 1.0.4

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

@@ -1,9 +1,21 @@
 import {
   Button
-} from "./chunk-EV6PGQPM.js";
+} from "./chunk-MNMVZI7D.js";
+import {
+  UnstyledButton
+} from "./chunk-JAPRGAB7.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
+import {
+  Icon
+} from "./chunk-TNDSUTUN.js";
+import {
+  standardFocusOutline
+} from "./chunk-CZFFMEAS.js";
 import {
   colors
 } from "./chunk-XUWFUTR4.js";
@@ -20,6 +32,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 +44,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 +63,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 +99,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,16 +142,19 @@ var Background = styled.div`
 `;
 var DrawerContainer = styled.div`
   position: fixed;
+  max-height: 100dvh;
   width: 100%;
   background-color: ${({ theme }) => theme.bg};
   right: 0;
   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
   ${(props) => props.grabbing && props.isOpen ? "" : "transition: transform 0.3s ease-in-out;"};
@@ -158,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;
@@ -172,12 +200,33 @@ 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;
+  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: ${Spacing.px.xs};
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+`;
 var GrabberBar = styled.div`
   width: 36px;
   height: 5px;

package/dist/{chunk-2XRCGW74.js → chunk-KBLCFXNL.js}

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

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

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

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

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

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

@@ -1,39 +1,39 @@
-import {
-  Label
-} from "./chunk-SKXCT2FQ.js";
 import {
   LabelModerate
-} from "./chunk-56QJRFP2.js";
+} from "./chunk-V523QTZQ.js";
 import {
   LabelStrong
-} from "./chunk-CZCPVHVB.js";
+} from "./chunk-YRZ3VNBI.js";
 import {
   Overline
-} from "./chunk-UBYBILLK.js";
+} from "./chunk-HPZVUEDJ.js";
 import {
   Code
-} from "./chunk-GNVEN6UE.js";
+} from "./chunk-7COKMITX.js";
 import {
   Display
-} from "./chunk-HRZNVE2K.js";
+} from "./chunk-DIKOS5R6.js";
 import {
   Title
-} from "./chunk-CMQELZES.js";
+} from "./chunk-AZOVE32P.js";
 import {
   Body
-} from "./chunk-TM3C4LEG.js";
+} from "./chunk-HVDX4OZJ.js";
 import {
   BodyStrong
-} from "./chunk-HP4VPMN7.js";
+} from "./chunk-OMY3WTAU.js";
 import {
   Headline
-} from "./chunk-PNSZAJL7.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-37RRWSDE.js → chunk-LLGN3OM3.js}

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

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

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

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

@@ -1,9 +1,9 @@
-import {
-  renderTypography
-} from "./chunk-DCFB5MJ7.js";
 import {
   Loading
-} from "./chunk-BMSSV6NX.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-VUXU77SU.js";
+} from "./chunk-OUHQXQOJ.js";
 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 {
   getFocusOutline
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   getBackgroundColor,
   isThemeOrColorKey
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-VNQE6KEX.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-HP4VPMN7.js → chunk-OMY3WTAU.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/BodyStrong.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-VUXU77SU.js → chunk-OUHQXQOJ.js}

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

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

package/dist/{chunk-2H7TBKII.js → chunk-PDQVYUEW.js}

@@ -1,9 +1,9 @@
 import {
   toReactNodes
-} from "./chunk-UVGBD7XM.js";
+} from "./chunk-ZO35RX7V.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-JAPRGAB7.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
@@ -11,16 +11,16 @@ import {
   extend,
   flexCenter,
   pxToRems
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-TNDSUTUN.js";
 import {
   standardContentInset
-} 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-DNVKN2FG.js → chunk-QCHEDM2I.js}

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

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

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

package/dist/{chunk-XP3BAAUO.js → chunk-SZ4KKLYJ.js}

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

package/dist/{chunk-VYTN6ASZ.js → chunk-THTKSZSR.js}

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

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

@@ -10,10 +10,10 @@ import {
 } from "./chunk-VI6WTKMV.js";
 import {
   rootFontSizePx
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-CZFFMEAS.js";
 import {
   getFontColor
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-VNQE6KEX.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-SRHSJOES.js → chunk-TNISOOCF.js}

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

package/dist/{chunk-55M7XHBZ.js → chunk-UNFCVZ32.js}

@@ -1,31 +1,34 @@
 import {
   StyledContentTable
-} from "./chunk-J7SV67XL.js";
+} from "./chunk-3R5KJDSL.js";
 import {
   StyledCode
-} from "./chunk-GNVEN6UE.js";
+} from "./chunk-7COKMITX.js";
 import {
   displaySelector
-} from "./chunk-HRZNVE2K.js";
+} from "./chunk-DIKOS5R6.js";
 import {
   StyledTitle
-} from "./chunk-CMQELZES.js";
+} from "./chunk-AZOVE32P.js";
 import {
   StyledBody
-} from "./chunk-TM3C4LEG.js";
+} from "./chunk-HVDX4OZJ.js";
 import {
   ALL_HEADLINE_SELECTORS,
   headlineSelector
-} from "./chunk-PNSZAJL7.js";
+} from "./chunk-OZQ5WPLN.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-GQVNE3NU.js";
 import {
   standardBorderRadius
-} from "./chunk-7NPHOJXD.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-56QJRFP2.js → chunk-V523QTZQ.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/LabelModerate.tsx
 import styled from "@emotion/styled";