@lightsparkdev/ui 1.0.2 → 1.0.4

package/dist/components/typography/Title.d.ts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as _emotion_react from '@emotion/react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { F as FontColorKey } from '../../buttons-e4eb84a2.js';
+import { F as FontColorKey } from '../../themes-832e46b2.js';
 import { TokenSizeKey } from '../../styles/tokens/typography.js';
 import { ToNonTypographicReactNodesArgs } from '../../utils/toNonTypographicReactNodes.js';
 import '@emotion/css';
@@ -126,9 +126,9 @@ import '../../types/index.js';
 type TitleProps = {
     content?: ToNonTypographicReactNodesArgs | undefined | null;
     children?: string | undefined | null;
-    size?: TokenSizeKey;
+    size?: TokenSizeKey | undefined;
     color?: FontColorKey | undefined;
-    block?: boolean;
+    block?: boolean | undefined;
 };
 declare const Title: ({ content, color, size, children, block, }: TitleProps) => _emotion_react_jsx_runtime.JSX.Element;
 type StyledTitleStrongProps = {

package/dist/components/typography/Title.js

@@ -2,12 +2,12 @@
 import {
   StyledTitle,
   Title
-} from "../../chunk-CMQELZES.js";
-import "../../chunk-6H7PZJ2A.js";
+} from "../../chunk-AZOVE32P.js";
+import "../../chunk-4X67A2CS.js";
 import "../../chunk-OPV246QW.js";
 import "../../chunk-AAFUVYVP.js";
-import "../../chunk-VUXU77SU.js";
-import "../../chunk-KBYU4ZQ3.js";
+import "../../chunk-OUHQXQOJ.js";
+import "../../chunk-TNDSUTUN.js";
 import "../../chunk-EDN2QDCB.js";
 import "../../chunk-FT62PIPN.js";
 import "../../chunk-5ZDDVLS6.js";
@@ -122,8 +122,8 @@ import "../../chunk-VI6WTKMV.js";
 import "../../chunk-QW2INB5A.js";
 import "../../chunk-JLD7MGLC.js";
 import "../../chunk-DW6LFUI2.js";
-import "../../chunk-7NPHOJXD.js";
-import "../../chunk-A4JZESAS.js";
+import "../../chunk-CZFFMEAS.js";
+import "../../chunk-VNQE6KEX.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";

package/dist/components/typography/index.cjs

@@ -7459,6 +7459,10 @@ var baseTheme = __spreadProps(__spreadValues({}, baseThemeColors), {
   typography: getTypography("Lightspark" /* Lightspark */),
   hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
   buttons: defaultButtonsTheme,
+  badge: {
+    bg: "c05Neutral"
+  },
+  inputBackground: colors.white,
   loading: "LoadingSpinner"
 });
 var lightBaseTheme = baseTheme;
@@ -7495,7 +7499,11 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -7534,6 +7542,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"
@@ -7610,7 +7619,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -7618,7 +7630,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 */
@@ -7780,7 +7793,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 
@@ -7835,6 +7848,68 @@ var StyledContentTable = import_styled3.default.table`
   }
 `;
 
+// 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`
+  }
+};
+
 // src/styles/utils.tsx
 var import_react18 = require("@emotion/react");
 function pxToRems(rems, asNum = false) {
@@ -8050,6 +8125,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`
@@ -8247,52 +8323,52 @@ var StyledArticle = import_styled9.default.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 {
@@ -8308,9 +8384,9 @@ var StyledArticle = import_styled9.default.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};
     }
@@ -8319,23 +8395,23 @@ var StyledArticle = import_styled9.default.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!
@@ -8347,7 +8423,7 @@ var StyledArticle = import_styled9.default.article`
   }
 
   blockquote {
-    margin: ${"8px" /* xs */} 0;
+    margin: ${Spacing.px.xs} 0;
   }
 `;
 

package/dist/components/typography/index.d.cts

@@ -14,7 +14,7 @@ import 'react';
 import '@emotion/react';
 import '@emotion/react/jsx-runtime';
 import '../../styles/tokens/typography.cjs';
-import '../../buttons-b7f56076.js';
+import '../../themes-37e92940.js';
 import '@emotion/css';
 import '../../styles/colors.cjs';
 import '../../utils/toNonTypographicReactNodes.cjs';

package/dist/components/typography/index.d.ts

@@ -14,7 +14,7 @@ import 'react';
 import '@emotion/react';
 import '@emotion/react/jsx-runtime';
 import '../../styles/tokens/typography.js';
-import '../../buttons-e4eb84a2.js';
+import '../../themes-832e46b2.js';
 import '@emotion/css';
 import '../../styles/colors.js';
 import '../../utils/toNonTypographicReactNodes.js';

package/dist/components/typography/index.js

@@ -1,57 +1,56 @@
 "use client";
-import "../../chunk-B2VYAIYR.js";
 import {
   Article
-} from "../../chunk-55M7XHBZ.js";
-import "../../chunk-J7SV67XL.js";
-import {
-  Label,
-  StyledLabel
-} from "../../chunk-SKXCT2FQ.js";
+} from "../../chunk-UNFCVZ32.js";
+import "../../chunk-3R5KJDSL.js";
 import {
   LabelModerate,
   StyledLabelModerate
-} from "../../chunk-56QJRFP2.js";
+} from "../../chunk-V523QTZQ.js";
 import {
   LabelStrong
-} from "../../chunk-CZCPVHVB.js";
+} from "../../chunk-YRZ3VNBI.js";
 import {
   Overline,
   StyledOverline
-} from "../../chunk-UBYBILLK.js";
+} from "../../chunk-HPZVUEDJ.js";
 import {
   Code,
   StyledCode
-} from "../../chunk-GNVEN6UE.js";
+} from "../../chunk-7COKMITX.js";
 import {
   Display,
   displayElements,
   displaySelector
-} from "../../chunk-HRZNVE2K.js";
+} from "../../chunk-DIKOS5R6.js";
 import {
   StyledTitle,
   Title
-} from "../../chunk-CMQELZES.js";
+} from "../../chunk-AZOVE32P.js";
 import {
   Body,
   StyledBody
-} from "../../chunk-TM3C4LEG.js";
+} from "../../chunk-HVDX4OZJ.js";
 import {
   BodyStrong
-} from "../../chunk-HP4VPMN7.js";
+} from "../../chunk-OMY3WTAU.js";
 import {
   Headline,
   headlineElements,
   headlineSelector
-} from "../../chunk-PNSZAJL7.js";
+} from "../../chunk-OZQ5WPLN.js";
 import "../../chunk-YMNSXZ5D.js";
-import "../../chunk-6H7PZJ2A.js";
+import {
+  Label,
+  StyledLabel
+} from "../../chunk-7BSME2ZU.js";
+import "../../chunk-4X67A2CS.js";
 import "../../chunk-OPV246QW.js";
 import "../../chunk-AAFUVYVP.js";
-import "../../chunk-VUXU77SU.js";
-import "../../chunk-3XSQV5U4.js";
-import "../../chunk-KFX7US6Y.js";
-import "../../chunk-KBYU4ZQ3.js";
+import "../../chunk-OUHQXQOJ.js";
+import "../../chunk-E5DUKMCU.js";
+import "../../chunk-GQVNE3NU.js";
+import "../../chunk-TNDSUTUN.js";
 import "../../chunk-EDN2QDCB.js";
 import "../../chunk-FT62PIPN.js";
 import "../../chunk-5ZDDVLS6.js";
@@ -166,8 +165,8 @@ import "../../chunk-VI6WTKMV.js";
 import "../../chunk-QW2INB5A.js";
 import "../../chunk-JLD7MGLC.js";
 import "../../chunk-DW6LFUI2.js";
-import "../../chunk-7NPHOJXD.js";
-import "../../chunk-A4JZESAS.js";
+import "../../chunk-CZFFMEAS.js";
+import "../../chunk-VNQE6KEX.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";

package/dist/components/typography/renderTypography.cjs

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -71,6 +83,7 @@ __export(renderTypography_exports, {
   typographyMap: () => typographyMap
 });
 module.exports = __toCommonJS(renderTypography_exports);
+var import_react21 = __toESM(require("react"), 1);
 
 // src/components/typography/Body.tsx
 var import_styled3 = __toESM(require("@emotion/styled"), 1);
@@ -3594,6 +3607,10 @@ var baseTheme = __spreadProps(__spreadValues({}, baseThemeColors), {
   typography: getTypography("Lightspark" /* Lightspark */),
   hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
   buttons: defaultButtonsTheme,
+  badge: {
+    bg: "c05Neutral"
+  },
+  inputBackground: colors.white,
   loading: "LoadingSpinner"
 });
 var lightBaseTheme = baseTheme;
@@ -3630,7 +3647,11 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3669,6 +3690,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"
@@ -3745,7 +3767,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3753,7 +3778,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 */
@@ -7765,7 +7791,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 
@@ -7920,6 +7946,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`
@@ -8203,7 +8230,6 @@ var StyledTitle = import_styled12.default.span`
 `;
 
 // src/components/typography/renderTypography.tsx
-var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 var typographyMap = {
   Display,
   Headline,
@@ -8215,11 +8241,12 @@ var typographyMap = {
   "Label Strong": LabelStrong,
   Overline,
   Code: Code2,
-  "Code Strong": () => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { children: "Unimplemented" })
+  "Code Strong": Code2
 };
 var renderTypography = (type, props) => {
   const TypographyComponent = typographyMap[type];
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TypographyComponent, __spreadValues({}, props));
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return import_react21.default.createElement(TypographyComponent, rest, children);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/typography/renderTypography.d.cts

@@ -3,12 +3,12 @@ import { OverlineProps } from './Overline.cjs';
 import { LabelStrongProps } from './LabelStrong.cjs';
 import { LabelModerateProps } from './LabelModerate.cjs';
 import { TitleProps } from './Title.cjs';
-import { F as FontColorKey } from '../../buttons-b7f56076.js';
+import { F as FontColorKey } from '../../themes-37e92940.js';
 import { TokenSizeKey, TypographyTypeKey } from '../../styles/tokens/typography.cjs';
 import { ToNonTypographicReactNodesArgs } from '../../utils/toNonTypographicReactNodes.cjs';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { DisplayProps } from './Display.cjs';
-import { ComponentProps } from 'react';
+import react__default, { ComponentProps } from 'react';
 import '@emotion/styled';
 import '@emotion/react';
 import '@emotion/css';
@@ -133,82 +133,82 @@ declare const typographyMap: {
     readonly Headline: ({ content, color, size, children, heading, id, display, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         heading?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
         id?: string | undefined;
-        display?: "flex" | "block" | "inline-flex";
+        display?: "block" | "flex" | "inline-flex";
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Title: ({ content, color, size, children, block, }: TitleProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Body: ({ content, color, size, children, block, tag, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
-        tag?: ("div" | "p" | "pre" | "span") | undefined;
+        tag?: ("span" | "p" | "pre" | "div") | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Body Strong": ({ content, children, color, size, block, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Label: ({ content, color, size, children, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Moderate": ({ content, color, size, children, }: LabelModerateProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Strong": ({ content, color, size, children, block, }: LabelStrongProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Overline: ({ content, color, size, children, }: OverlineProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Code: ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
-    readonly "Code Strong": () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly "Code Strong": ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
-type RenderTypographyArgs<T extends TypographyTypeKey = TypographyTypeKey> = {
+type RenderTypographyArgs<T extends TypographyTypeKey> = {
     type: T;
-    props?: ComponentProps<(typeof typographyMap)[T]>;
+    props: ComponentProps<(typeof typographyMap)[T]>;
 };
-declare const renderTypography: <T extends TypographyTypeKey>(type: T, props: ComponentProps<{
+declare const renderTypography: <T extends TypographyTypeKey>(type: T, props: react__default.ComponentProps<{
     readonly Display: ({ content, children, color, size, element, }: DisplayProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Headline: ({ content, color, size, children, heading, id, display, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         heading?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
         id?: string | undefined;
-        display?: "flex" | "block" | "inline-flex";
+        display?: "block" | "flex" | "inline-flex";
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Title: ({ content, color, size, children, block, }: TitleProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Body: ({ content, color, size, children, block, tag, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
-        tag?: ("div" | "p" | "pre" | "span") | undefined;
+        tag?: ("span" | "p" | "pre" | "div") | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Body Strong": ({ content, children, color, size, block, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Label: ({ content, color, size, children, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Moderate": ({ content, color, size, children, }: LabelModerateProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Strong": ({ content, color, size, children, block, }: LabelStrongProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Overline: ({ content, color, size, children, }: OverlineProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Code: ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
-    readonly "Code Strong": () => _emotion_react_jsx_runtime.JSX.Element;
-}[T]>) => _emotion_react_jsx_runtime.JSX.Element;
+    readonly "Code Strong": ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
+}[T]>) => react__default.FunctionComponentElement<DisplayProps>;
 
 export { RenderTypographyArgs, renderTypography, typographyMap };