@lightsparkdev/ui 0.0.5 → 0.0.6

package/dist/styles/fields.d.ts

@@ -2,8 +2,7 @@ import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
-import { Theme } from '@emotion/react';
-import { ThemeProp } from './colors.js';
+import { ThemeProp, WithTheme } from './colors.js';
 import '@emotion/css';
 import './fonts/typographyTokens.js';
 
@@ -21,44 +20,41 @@ declare const textInputPaddingPx = 12;
 declare const textInputPadding = "12px";
 declare const textInputBorderColor: ({ theme }: ThemeProp) => string;
 declare const textInputBorderColorFocused: ({ theme }: ThemeProp) => string;
-declare const textInputStyle: ({ theme, disabled, hasError, paddingLeftPx, paddingRightPx, }: {
-    theme: Theme;
+declare const textInputStyle: ({ theme, disabled, hasError, paddingLeftPx, paddingRightPx, }: WithTheme<{
     disabled: boolean;
     hasError: boolean;
     paddingLeftPx?: number | undefined;
     paddingRightPx?: number | undefined;
-}) => _emotion_react.SerializedStyles;
+}>) => _emotion_react.SerializedStyles;
 declare const FieldError: _emotion_styled.StyledComponent<{
-    theme?: Theme;
+    theme?: _emotion_react.Theme;
     as?: react.ElementType<any>;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const aboveFieldError: ({ theme, hasError, }: {
-    theme: Theme;
+declare const aboveFieldError: ({ theme, hasError, }: WithTheme<{
     hasError: boolean;
-}) => _emotion_react.SerializedStyles;
+}>) => _emotion_react.SerializedStyles;
 declare function InputSubtext({ text, hasError, }: {
     text?: string | undefined;
     hasError?: boolean;
 }): _emotion_react_jsx_runtime.JSX.Element;
 declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
-    theme?: Theme;
+    theme?: _emotion_react.Theme;
     as?: react.ElementType<any>;
 } & {
     hasError: boolean;
     visible: boolean;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const labelStyle: ({ theme, hasError, }: {
-    theme: Theme;
+declare const labelStyle: ({ theme, hasError, }: WithTheme<{
     hasError?: boolean;
-}) => _emotion_react.SerializedStyles;
+}>) => _emotion_react.SerializedStyles;
 declare const Label: _emotion_styled.StyledComponent<{
-    theme?: Theme;
+    theme?: _emotion_react.Theme;
     as?: react.ElementType<any>;
 } & {
     hasError?: boolean;
 }, react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
 declare const LabelDiv: _emotion_styled.StyledComponent<{
-    theme?: Theme;
+    theme?: _emotion_react.Theme;
     as?: react.ElementType<any>;
 } & {
     hasError?: boolean;

package/dist/styles/fields.js

@@ -1,14 +1,14 @@
 import {
   subtext
-} from "../chunk-XUGLVWSH.js";
-import {
-  z
-} from "../chunk-CLU2FRJZ.js";
+} from "../chunk-RFGKH3R6.js";
 import {
   themeOr
 } from "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
+import {
+  z
+} from "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 
 // src/styles/fields.tsx
@@ -45,7 +45,7 @@ var textInputStyle = ({
   return css`
   border-radius: ${textInputBorderRadiusPx}px;
   background-color: ${disabled ? theme.vlcNeutral : theme.bg};
-  pointer-events: ${disabled ? "none" : "auto"};
+  cursor: ${disabled ? "not-allowed" : "auto"};
   box-sizing: border-box;
   font-weight: ${textInputFontWeight};
 

package/dist/styles/fonts/typography/Article.cjs

@@ -1309,6 +1309,12 @@ var rootFontSizeRems = rootFontSizePx / 16;
 var standardContentInsetPx = 32;
 var standardContentInsetMdPx = 24;
 var standardContentInsetSmPx = 16;
+var standardBorderRadius = (radius) => {
+  const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
+  return `
+    border-radius: ${borderRadiusPx};
+  `;
+};
 var smContentInset = import_react4.css`
   ${bp.sm(`
     margin-left: auto;
@@ -1383,6 +1389,11 @@ var StyledContentTable = import_styled2.default.table`
   }
 `;
 
+// src/utils/emotion.tsx
+function select(component) {
+  return component.toString();
+}
+
 // src/styles/utils.tsx
 var import_react5 = require("@emotion/react");
 function pxToRems(rems, asNum = false) {
@@ -1474,7 +1485,7 @@ var StyledDisplay = import_styled5.default.span`
 }}
 `;
 function displaySelector(element) {
-  return `${element}${StyledDisplay.toString()}`;
+  return `${element}${select(StyledDisplay)}`;
 }
 
 // src/styles/fonts/typography/Headline.tsx
@@ -1496,7 +1507,7 @@ var StyledHeadline = import_styled6.default.span`
   }
 `;
 function headlineSelector(heading) {
-  return `${heading}${StyledHeadline.toString()}`;
+  return `${heading}${select(StyledHeadline)}`;
 }
 var ALL_HEADLINE_SELECTORS = HEADINGS.map(headlineSelector).join(",");
 
@@ -1552,12 +1563,12 @@ var Article = import_styled8.default.article`
     margin: 0;
   }
 
-  ${StyledBody} {
+  ${select(StyledBody)} {
     margin-top: ${"8px" /* xs */};
     margin-bottom: ${"8px" /* xs */};
   }
 
-  ${StyledContentTable} {
+  ${select(StyledContentTable)} {
     margin: ${"40px" /* 2xl */} 0;
   }
 
@@ -1570,7 +1581,8 @@ var Article = import_styled8.default.article`
     font-weight: 700;
   }
 
-  *:not(${ALL_HEADLINE_SELECTORS},${StyledTitle},${StyledCode}) > a {
+  *:not(${ALL_HEADLINE_SELECTORS},${select(StyledTitle)},${select(StyledCode)})
+    > a {
     ${({ theme }) => getTypographyString(
   theme.typography[theme.app]["Label Strong"]["Large" /* Large */]
 )}
@@ -1604,7 +1616,7 @@ var Article = import_styled8.default.article`
   }
 
   pre[class|="language"] {
-    border-radius: 8px;
+    ${standardBorderRadius(8)}
     width: 100%;
     padding: ${"16px" /* md */} ${"24px" /* lg */};
     margin: ${"16px" /* md */} 0;

package/dist/styles/fonts/typography/Article.js

@@ -1,22 +1,23 @@
 "use client";
 import {
   Article
-} from "../../../chunk-4ZZHBSW4.js";
+} from "../../../chunk-VBWTKANQ.js";
 import "../../../chunk-FHNYQLMF.js";
 import "../../../chunk-LD5LZXUP.js";
 import "../../../chunk-BCFRW7CV.js";
-import "../../../chunk-SW6ZA7W2.js";
-import "../../../chunk-4K2KAYVH.js";
+import "../../../chunk-QGGOMPHZ.js";
+import "../../../chunk-4TFRLWCC.js";
+import "../../../chunk-YMNSXZ5D.js";
 import "../../../chunk-3XSQV5U4.js";
-import "../../../chunk-SV5QPU7N.js";
-import "../../../chunk-EZ4RHFY7.js";
-import "../../../chunk-MYG24ZWT.js";
+import "../../../chunk-UO6U7AYM.js";
+import "../../../chunk-K7D7A34K.js";
+import "../../../chunk-NZJCJJH5.js";
 import "../../../chunk-LAMQKQU3.js";
-import "../../../chunk-XUGLVWSH.js";
-import "../../../chunk-CLU2FRJZ.js";
+import "../../../chunk-RFGKH3R6.js";
 import "../../../chunk-2VBDEO6M.js";
 import "../../../chunk-E4EXM4SY.js";
 import "../../../chunk-JSGRNWSB.js";
+import "../../../chunk-CLU2FRJZ.js";
 import "../../../chunk-CIGAQ47A.js";
 export {
   Article

package/dist/styles/fonts/typography/Display.cjs

@@ -55,6 +55,11 @@ __export(Display_exports, {
 module.exports = __toCommonJS(Display_exports);
 var import_styled = __toESM(require("@emotion/styled"), 1);
 
+// src/utils/emotion.tsx
+function select(component) {
+  return component.toString();
+}
+
 // src/styles/colors.tsx
 var import_react = require("@emotion/react");
 
@@ -1192,7 +1197,7 @@ var StyledDisplay = import_styled.default.span`
 }}
 `;
 function displaySelector(element) {
-  return `${element}${StyledDisplay.toString()}`;
+  return `${element}${select(StyledDisplay)}`;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/styles/fonts/typography/Display.js

@@ -3,7 +3,8 @@ import {
   Display,
   ELEMENTS,
   displaySelector
-} from "../../../chunk-SW6ZA7W2.js";
+} from "../../../chunk-QGGOMPHZ.js";
+import "../../../chunk-YMNSXZ5D.js";
 import "../../../chunk-2VBDEO6M.js";
 import "../../../chunk-E4EXM4SY.js";
 import "../../../chunk-JSGRNWSB.js";

package/dist/styles/fonts/typography/Headline.cjs

@@ -58,6 +58,11 @@ module.exports = __toCommonJS(Headline_exports);
 var import_styled = __toESM(require("@emotion/styled"), 1);
 var import_react2 = __toESM(require("react"), 1);
 
+// src/utils/emotion.tsx
+function select(component) {
+  return component.toString();
+}
+
 // src/styles/colors.tsx
 var import_react = require("@emotion/react");
 
@@ -1243,7 +1248,7 @@ var StyledHeadline = import_styled.default.span`
   }
 `;
 function headlineSelector(heading) {
-  return `${heading}${StyledHeadline.toString()}`;
+  return `${heading}${select(StyledHeadline)}`;
 }
 var ALL_HEADLINE_SELECTORS = HEADINGS.map(headlineSelector).join(",");
 // Annotate the CommonJS export names for ESM import in node:

package/dist/styles/fonts/typography/Headline.js

@@ -5,7 +5,8 @@ import {
   Headline,
   getHeadlineText,
   headlineSelector
-} from "../../../chunk-4K2KAYVH.js";
+} from "../../../chunk-4TFRLWCC.js";
+import "../../../chunk-YMNSXZ5D.js";
 import "../../../chunk-2VBDEO6M.js";
 import "../../../chunk-E4EXM4SY.js";
 import "../../../chunk-JSGRNWSB.js";

package/dist/styles/fonts/typography/index.cjs

@@ -1320,6 +1320,12 @@ var rootFontSizeRems = rootFontSizePx / 16;
 var standardContentInsetPx = 32;
 var standardContentInsetMdPx = 24;
 var standardContentInsetSmPx = 16;
+var standardBorderRadius = (radius) => {
+  const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
+  return `
+    border-radius: ${borderRadiusPx};
+  `;
+};
 var smContentInset = import_react4.css`
   ${bp.sm(`
     margin-left: auto;
@@ -1394,6 +1400,11 @@ var StyledContentTable = import_styled2.default.table`
   }
 `;
 
+// src/utils/emotion.tsx
+function select(component) {
+  return component.toString();
+}
+
 // src/styles/utils.tsx
 var import_react5 = require("@emotion/react");
 function pxToRems(rems, asNum = false) {
@@ -1499,7 +1510,7 @@ var StyledDisplay = import_styled5.default.span`
 }}
 `;
 function displaySelector(element) {
-  return `${element}${StyledDisplay.toString()}`;
+  return `${element}${select(StyledDisplay)}`;
 }
 
 // src/styles/fonts/typography/Headline.tsx
@@ -1556,7 +1567,7 @@ var StyledHeadline = import_styled6.default.span`
   }
 `;
 function headlineSelector(heading) {
-  return `${heading}${StyledHeadline.toString()}`;
+  return `${heading}${select(StyledHeadline)}`;
 }
 var ALL_HEADLINE_SELECTORS = HEADINGS.map(headlineSelector).join(",");
 
@@ -1620,12 +1631,12 @@ var Article = import_styled8.default.article`
     margin: 0;
   }
 
-  ${StyledBody} {
+  ${select(StyledBody)} {
     margin-top: ${"8px" /* xs */};
     margin-bottom: ${"8px" /* xs */};
   }
 
-  ${StyledContentTable} {
+  ${select(StyledContentTable)} {
     margin: ${"40px" /* 2xl */} 0;
   }
 
@@ -1638,7 +1649,8 @@ var Article = import_styled8.default.article`
     font-weight: 700;
   }
 
-  *:not(${ALL_HEADLINE_SELECTORS},${StyledTitle},${StyledCode}) > a {
+  *:not(${ALL_HEADLINE_SELECTORS},${select(StyledTitle)},${select(StyledCode)})
+    > a {
     ${({ theme }) => getTypographyString(
   theme.typography[theme.app]["Label Strong"]["Large" /* Large */]
 )}
@@ -1672,7 +1684,7 @@ var Article = import_styled8.default.article`
   }
 
   pre[class|="language"] {
-    border-radius: 8px;
+    ${standardBorderRadius(8)}
     width: 100%;
     padding: ${"16px" /* md */} ${"24px" /* lg */};
     margin: ${"16px" /* md */} 0;

package/dist/styles/fonts/typography/index.js

@@ -1,3 +1,9 @@
+import {
+  Label
+} from "../../../chunk-OO5UJRAW.js";
+import {
+  LabelModerate
+} from "../../../chunk-4I2ABBID.js";
 import {
   LabelStrong
 } from "../../../chunk-MYKMYG6H.js";
@@ -6,7 +12,7 @@ import {
 } from "../../../chunk-RBYRXBPI.js";
 import {
   Article
-} from "../../../chunk-4ZZHBSW4.js";
+} from "../../../chunk-VBWTKANQ.js";
 import {
   Title
 } from "../../../chunk-FHNYQLMF.js";
@@ -21,26 +27,21 @@ import {
 } from "../../../chunk-BCFRW7CV.js";
 import {
   Display
-} from "../../../chunk-SW6ZA7W2.js";
-import {
-  Label
-} from "../../../chunk-OO5UJRAW.js";
-import {
-  LabelModerate
-} from "../../../chunk-4I2ABBID.js";
+} from "../../../chunk-QGGOMPHZ.js";
 import {
   Headline
-} from "../../../chunk-4K2KAYVH.js";
+} from "../../../chunk-4TFRLWCC.js";
+import "../../../chunk-YMNSXZ5D.js";
 import "../../../chunk-3XSQV5U4.js";
-import "../../../chunk-SV5QPU7N.js";
-import "../../../chunk-EZ4RHFY7.js";
-import "../../../chunk-MYG24ZWT.js";
+import "../../../chunk-UO6U7AYM.js";
+import "../../../chunk-K7D7A34K.js";
+import "../../../chunk-NZJCJJH5.js";
 import "../../../chunk-LAMQKQU3.js";
-import "../../../chunk-XUGLVWSH.js";
-import "../../../chunk-CLU2FRJZ.js";
+import "../../../chunk-RFGKH3R6.js";
 import "../../../chunk-2VBDEO6M.js";
 import "../../../chunk-E4EXM4SY.js";
 import "../../../chunk-JSGRNWSB.js";
+import "../../../chunk-CLU2FRJZ.js";
 import "../../../chunk-CIGAQ47A.js";
 export {
   Article,

package/dist/styles/global.cjs

@@ -1388,6 +1388,7 @@ var globalComponentStyles = ({ theme }) => import_react5.css`
     /* required for iOS https://bit.ly/3Q8syG8 */
     -webkit-text-size-adjust: none;
     text-size-adjust: none;
+    scroll-behavior: smooth;
   }
 
   body {
@@ -1468,7 +1469,7 @@ function GlobalStyles() {
 
     :root {
       ${cssVars.docHeight}: 100vh;
-      --rt-opacity: 1;
+      --rt-opacity: 1 !important;
     }
 
     html {

package/dist/styles/global.js

@@ -1,13 +1,13 @@
 import {
   GlobalStyles,
   globalComponentStyles
-} from "../chunk-YHSFWCFN.js";
+} from "../chunk-T33SBHYI.js";
 import "../chunk-IJVWYT5G.js";
-import "../chunk-XUGLVWSH.js";
-import "../chunk-CLU2FRJZ.js";
+import "../chunk-RFGKH3R6.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
+import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   GlobalStyles,

package/dist/styles/type.cjs

@@ -1519,7 +1519,7 @@ function Heading({
 }) {
   const StyledHeading = headings[type];
   const theme = (0, import_react6.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const heading = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     StyledHeading,
     {
       id,
@@ -1529,9 +1529,10 @@ function Heading({
       mbSm: m0 ? 0 : mbSm,
       light,
       theme,
-      children
+      children: id ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `#${id}`, css: { color: "inherit" }, children }) : children
     }
   );
+  return heading;
 }
 function headingWithDefaults(defaultProps) {
   return (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Heading, __spreadValues(__spreadValues({}, defaultProps), props));

package/dist/styles/type.d.cts

@@ -1,5 +1,9 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import _emotion_styled__default from '@emotion/styled';
+import './colors.cjs';
+import '@emotion/react';
+import '@emotion/css';
+import './fonts/typographyTokens.cjs';
 
 declare const HeadingTypes: readonly ["h1", "h2", "h3", "h4"];
 type HeadingType = (typeof HeadingTypes)[number];

package/dist/styles/type.d.ts

@@ -1,5 +1,9 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import _emotion_styled__default from '@emotion/styled';
+import './colors.js';
+import '@emotion/react';
+import '@emotion/css';
+import './fonts/typographyTokens.js';
 
 declare const HeadingTypes: readonly ["h1", "h2", "h3", "h4"];
 type HeadingType = (typeof HeadingTypes)[number];

package/dist/styles/type.js

@@ -2,14 +2,14 @@
 import {
   firstChild,
   pxToRems
-} from "../chunk-SV5QPU7N.js";
-import "../chunk-XUGLVWSH.js";
-import "../chunk-CLU2FRJZ.js";
+} from "../chunk-UO6U7AYM.js";
+import "../chunk-RFGKH3R6.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import {
   bp
 } from "../chunk-JSGRNWSB.js";
+import "../chunk-CLU2FRJZ.js";
 import {
   __spreadValues
 } from "../chunk-CIGAQ47A.js";
@@ -129,7 +129,7 @@ function Heading({
 }) {
   const StyledHeading = headings[type];
   const theme = useTheme();
-  return /* @__PURE__ */ jsx(
+  const heading = /* @__PURE__ */ jsx(
     StyledHeading,
     {
       id,
@@ -139,9 +139,10 @@ function Heading({
       mbSm: m0 ? 0 : mbSm,
       light,
       theme,
-      children
+      children: id ? /* @__PURE__ */ jsx("a", { href: `#${id}`, css: { color: "inherit" }, children }) : children
     }
   );
+  return heading;
 }
 function headingWithDefaults(defaultProps) {
   return (props) => /* @__PURE__ */ jsx(Heading, __spreadValues(__spreadValues({}, defaultProps), props));

package/dist/styles/utils.js

@@ -13,12 +13,12 @@ import {
   remsToPx,
   size,
   textCenter
-} from "../chunk-SV5QPU7N.js";
-import "../chunk-XUGLVWSH.js";
-import "../chunk-CLU2FRJZ.js";
+} from "../chunk-UO6U7AYM.js";
+import "../chunk-RFGKH3R6.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
+import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   absoluteCenter,

package/dist/utils/emotion.cjs

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/emotion.tsx
+var emotion_exports = {};
+__export(emotion_exports, {
+  select: () => select
+});
+module.exports = __toCommonJS(emotion_exports);
+function select(component) {
+  return component.toString();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  select
+});

package/dist/utils/emotion.d.cts

@@ -0,0 +1,5 @@
+declare function select(component: {
+    toString: () => string;
+}): string;
+
+export { select };

package/dist/utils/emotion.d.ts

@@ -0,0 +1,5 @@
+declare function select(component: {
+    toString: () => string;
+}): string;
+
+export { select };

package/dist/utils/emotion.js

@@ -0,0 +1,7 @@
+import {
+  select
+} from "../chunk-YMNSXZ5D.js";
+import "../chunk-CIGAQ47A.js";
+export {
+  select
+};