@mintlify/components 1.0.0 → 1.0.2

package/dist/components/mermaid/mermaid.js

@@ -1,19 +1,20 @@
 import { jsxs as y, jsx as n } from "react/jsx-runtime";
 import C from "../../node_modules/.pnpm/mermaid@11.12.2/node_modules/mermaid/dist/mermaid.core.js";
-import { useState as l, useRef as T, useId as F, useEffect as c } from "react";
+import { useState as l, useRef as D, useId as F, useEffect as c } from "react";
 import { Classes as x } from "../../constants/selectors.js";
-import { useIsDarkTheme as Z } from "../../hooks/use-is-dark-theme.js";
+import { useIsDarkTheme as H } from "../../hooks/use-is-dark-theme.js";
 import { cn as I } from "../../utils/cn.js";
-import { usePanZoom as D } from "./use-pan-zoom.js";
-import { ZoomControls as H } from "./zoom-controls.js";
-const L = 120, K = ({
+import { makeMarkerIdsUnique as L } from "../../utils/make-marker-ids-unique.js";
+import { usePanZoom as Z } from "./use-pan-zoom.js";
+import { ZoomControls as q } from "./zoom-controls.js";
+const j = 120, A = 800, V = ({
   chart: u,
   className: f,
-  ariaLabel: O = "Mermaid diagram",
-  placement: w = "bottom-right",
+  ariaLabel: T = "Mermaid diagram",
+  placement: k = "bottom-right",
   actions: o
 }) => {
-  const [R, p] = l(""), [h, a] = l(null), [k, E] = l(!1), g = T(null), v = F(), { isDarkTheme: b } = Z(), { style: M, zoomIn: S, zoomOut: _, reset: s, pan: z, panStep: N } = D();
+  const [O, p] = l(""), [g, a] = l(null), [_, w] = l(!1), h = D(null), v = F(), { isDarkTheme: b } = H(), { style: E, zoomIn: M, zoomOut: R, reset: s, pan: S, panStep: N } = Z();
   return c(() => {
     s(), a(null);
   }, [s]), c(() => {
@@ -22,17 +23,23 @@ const L = 120, K = ({
       const m = {
         startOnLoad: !1,
         fontFamily: "inherit",
-        theme: b ? "dark" : "default"
+        theme: b ? "dark" : "default",
+        gantt: {
+          useWidth: A
+        }
       }, e = document.createElement("div");
       e.style.position = "absolute", e.style.left = "-9999px", e.style.top = "-9999px", document.body.appendChild(e);
       try {
         C.initialize(m);
-        const r = `mermaid-${v.replace(/:/g, "")}-${Date.now()}`, { svg: i } = await C.render(r, u, e);
-        t || (p(i), a(null));
+        const r = `mermaid-${v.replace(/:/g, "")}-${Date.now()}`, { svg: d } = await C.render(r, u, e);
+        if (!t) {
+          const z = L(d, r);
+          p(z), a(null);
+        }
       } catch (r) {
         if (console.error("Error while rendering mermaid", r), !t) {
-          const i = r instanceof Error ? r.message : "Failed to render diagram";
-          a(i), p("");
+          const d = r instanceof Error ? r.message : "Failed to render diagram";
+          a(d), p("");
         }
       } finally {
         document.body.removeChild(e);
@@ -43,19 +50,19 @@ const L = 120, K = ({
   }, [u, v, b]), c(() => {
     if (o !== void 0)
       return;
-    const t = g.current;
+    const t = h.current;
     if (!t)
       return;
-    const d = new ResizeObserver((m) => {
+    const i = new ResizeObserver((m) => {
       for (const e of m) {
         const r = e.contentRect.height;
-        E(r >= L);
+        w(r >= j);
       }
     });
-    return d.observe(t), () => {
-      d.disconnect();
+    return i.observe(t), () => {
+      i.disconnect();
     };
-  }, [o]), h ? /* @__PURE__ */ y(
+  }, [o]), g ? /* @__PURE__ */ y(
     "div",
     {
       className: I(
@@ -67,7 +74,7 @@ const L = 120, K = ({
       role: "alert",
       children: [
         /* @__PURE__ */ n("p", { className: "font-medium", "data-component-part": "mermaid-error-title", children: "Failed to render diagram" }),
-        /* @__PURE__ */ n("p", { className: "mt-1 text-xs", "data-component-part": "mermaid-error-message", children: h })
+        /* @__PURE__ */ n("p", { className: "mt-1 text-xs", "data-component-part": "mermaid-error-message", children: g })
       ]
     }
   ) : /* @__PURE__ */ y(
@@ -79,26 +86,26 @@ const L = 120, K = ({
         f
       ),
       children: [
-        (o === !0 || o === void 0 && k) && /* @__PURE__ */ n(
-          H,
+        (o === !0 || o === void 0 && _) && /* @__PURE__ */ n(
+          q,
           {
-            onPan: z,
+            onPan: S,
             onReset: s,
-            onZoomIn: S,
-            onZoomOut: _,
+            onZoomIn: M,
+            onZoomOut: R,
             panStep: N,
-            placement: w
+            placement: k
           }
         ),
         /* @__PURE__ */ n(
           "div",
           {
-            "aria-label": O,
-            dangerouslySetInnerHTML: { __html: R },
+            "aria-label": T,
+            dangerouslySetInnerHTML: { __html: O },
             "data-component-part": "mermaid-diagram",
-            ref: g,
+            ref: h,
             role: "img",
-            style: M
+            style: E
           }
         )
       ]
@@ -106,5 +113,5 @@ const L = 120, K = ({
   );
 };
 export {
-  K as Mermaid
+  V as Mermaid
 };

package/dist/components/mermaid/use-pan-zoom.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+type UsePanZoomReturn = {
+    style: CSSProperties;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    reset: () => void;
+    pan: (dx: number, dy: number) => void;
+    panStep: number;
+};
+declare const usePanZoom: () => UsePanZoomReturn;
+export { usePanZoom };
+export type { UsePanZoomReturn };
+//# sourceMappingURL=use-pan-zoom.d.ts.map

package/dist/components/mermaid/use-pan-zoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pan-zoom.d.ts","sourceRoot":"","sources":["../../../src/components/mermaid/use-pan-zoom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAkC,MAAM,OAAO,CAAC;AAa3E,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAIF,QAAA,MAAM,UAAU,QAAO,gBA8CtB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/mermaid/zoom-controls.d.ts

@@ -0,0 +1,13 @@
+import { MermaidPlacement } from './mermaid';
+type ZoomControlsProps = {
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onReset: () => void;
+    onPan: (dx: number, dy: number) => void;
+    panStep: number;
+    placement?: MermaidPlacement;
+};
+declare const ZoomControls: ({ onZoomIn, onZoomOut, onReset, onPan, panStep, placement, }: ZoomControlsProps) => import("react/jsx-runtime").JSX.Element;
+export { ZoomControls };
+export type { ZoomControlsProps };
+//# sourceMappingURL=zoom-controls.d.ts.map

package/dist/components/mermaid/zoom-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-controls.d.ts","sourceRoot":"","sources":["../../../src/components/mermaid/zoom-controls.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAqBlD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,8DAOnB,iBAAiB,4CA4DnB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/mermaid/zoom-controls.js

@@ -1,32 +1,32 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import { cn as d } from "../../utils/cn.js";
-import h from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-up.js";
-import s from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/zoom-in.js";
+import s from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-up.js";
+import h from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/zoom-in.js";
 import c from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-left.js";
 import u from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/rotate-ccw.js";
 import b from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-right.js";
-import g from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-import f from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/zoom-out.js";
-const t = ({
+import f from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+import p from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/zoom-out.js";
+const o = ({
   children: a,
   className: n,
   ...l
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ t(
   "button",
   {
     className: d(
-      "flex size-7 cursor-pointer touch-manipulation items-center justify-center rounded-md border border-gray-200 bg-white text-gray-900 transition-[transform] duration-100 hover:bg-gray-50 motion-safe:active:scale-95 dark:border-white/10 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 [&_svg]:size-4",
+      "flex size-7 cursor-pointer touch-manipulation items-center justify-center rounded-md border border-stone-200 bg-white text-stone-900 transition-[transform] duration-100 hover:bg-stone-50 motion-safe:active:scale-95 dark:border-white/10 dark:bg-stone-900 dark:text-white dark:hover:bg-stone-800 [&_svg]:size-4",
       n
     ),
     type: "button",
     ...l,
     children: a
   }
-), P = ({
+), N = ({
   onZoomIn: a,
   onZoomOut: n,
   onReset: l,
-  onPan: o,
+  onPan: r,
   panStep: e,
   placement: i
 }) => (
@@ -45,51 +45,51 @@ const t = ({
       "data-component-part": "zoom-controls",
       role: "group",
       children: [
-        /* @__PURE__ */ r("div", { "aria-hidden": "true", className: "pointer-events-none" }),
-        /* @__PURE__ */ r(
-          t,
+        /* @__PURE__ */ t("div", { "aria-hidden": "true", className: "pointer-events-none" }),
+        /* @__PURE__ */ t(
+          o,
           {
             "aria-label": "Pan up",
-            onClick: () => o(0, e),
+            onClick: () => r(0, e),
             title: "Pan up",
-            children: /* @__PURE__ */ r(h, { "aria-hidden": "true" })
+            children: /* @__PURE__ */ t(s, { "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ r(t, { "aria-label": "Zoom in", onClick: a, title: "Zoom in", children: /* @__PURE__ */ r(s, { "aria-hidden": "true" }) }),
-        /* @__PURE__ */ r(
-          t,
+        /* @__PURE__ */ t(o, { "aria-label": "Zoom in", onClick: a, title: "Zoom in", children: /* @__PURE__ */ t(h, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ t(
+          o,
           {
             "aria-label": "Pan left",
-            onClick: () => o(e, 0),
+            onClick: () => r(e, 0),
             title: "Pan left",
-            children: /* @__PURE__ */ r(c, { "aria-hidden": "true" })
+            children: /* @__PURE__ */ t(c, { "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ r(t, { "aria-label": "Reset view", onClick: l, title: "Reset view", children: /* @__PURE__ */ r(u, { "aria-hidden": "true" }) }),
-        /* @__PURE__ */ r(
-          t,
+        /* @__PURE__ */ t(o, { "aria-label": "Reset view", onClick: l, title: "Reset view", children: /* @__PURE__ */ t(u, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ t(
+          o,
           {
             "aria-label": "Pan right",
-            onClick: () => o(-e, 0),
+            onClick: () => r(-e, 0),
             title: "Pan right",
-            children: /* @__PURE__ */ r(b, { "aria-hidden": "true" })
+            children: /* @__PURE__ */ t(b, { "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ r("div", { "aria-hidden": "true", className: "pointer-events-none" }),
-        /* @__PURE__ */ r(
-          t,
+        /* @__PURE__ */ t("div", { "aria-hidden": "true", className: "pointer-events-none" }),
+        /* @__PURE__ */ t(
+          o,
           {
             "aria-label": "Pan down",
-            onClick: () => o(0, -e),
+            onClick: () => r(0, -e),
             title: "Pan down",
-            children: /* @__PURE__ */ r(g, { "aria-hidden": "true" })
+            children: /* @__PURE__ */ t(f, { "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ r(t, { "aria-label": "Zoom out", onClick: n, title: "Zoom out", children: /* @__PURE__ */ r(f, { "aria-hidden": "true" }) })
+        /* @__PURE__ */ t(o, { "aria-label": "Zoom out", onClick: n, title: "Zoom out", children: /* @__PURE__ */ t(p, { "aria-hidden": "true" }) })
       ]
     }
   )
 );
 export {
-  P as ZoomControls
+  N as ZoomControls
 };

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

@@ -0,0 +1,3 @@
+export type { PanelProps } from './panel';
+export { Panel } from './panel';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/panel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/panel/panel.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+type PanelProps = ComponentProps<"div">;
+declare const Panel: ({ children, className, ...props }: PanelProps) => import("react/jsx-runtime").JSX.Element;
+export { Panel };
+export type { PanelProps };
+//# sourceMappingURL=panel.d.ts.map

package/dist/components/panel/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/components/panel/panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAExC,QAAA,MAAM,KAAK,GAAI,mCAAmC,UAAU,4CAM3D,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,3 @@
+export type { PropertyProps } from './property';
+export { Property } from './property';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/property/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/property/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/property/param-head.d.ts

@@ -0,0 +1,5 @@
+import { PropertyProps } from './property';
+type ParamHeadProps = Omit<PropertyProps, "children">;
+declare const ParamHead: ({ name, type, location, required, deprecated, default: defaultValue, id, pre, post, onMount, navigateToHeaderAriaLabel, defaultLabel, requiredLabel, deprecatedLabel, }: ParamHeadProps) => import("react/jsx-runtime").JSX.Element | null;
+export { ParamHead };
+//# sourceMappingURL=param-head.d.ts.map

package/dist/components/property/param-head.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"param-head.d.ts","sourceRoot":"","sources":["../../../src/components/property/param-head.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,KAAK,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AAEtD,QAAA,MAAM,SAAS,GAAI,yKAehB,cAAc,mDA4HhB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/property/param-head.js

@@ -1,87 +1,87 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import P from "../../node_modules/.pnpm/@sindresorhus_slugify@2.2.1/node_modules/@sindresorhus/slugify/index.js";
 import { useRef as R, useState as _, useCallback as j, useEffect as u } from "react";
 import { LinkIcon as H } from "../../icons/index.js";
-import { cn as y } from "../../utils/cn.js";
+import { cn as k } from "../../utils/cn.js";
 import { copyToClipboard as O } from "../../utils/copy-to-clipboard.js";
 import { InfoPill as c, RequiredPill as $, DeprecatedPill as S } from "./pills.js";
 const F = ({
-  name: n,
+  name: o,
   type: m,
   location: p,
-  required: k,
-  deprecated: b,
-  default: t,
-  id: x,
-  pre: o,
-  post: d,
-  onMount: l,
-  navigateToHeaderAriaLabel: v,
+  required: b,
+  deprecated: x,
+  default: a,
+  id: v,
+  pre: s,
+  post: l,
+  onMount: n,
+  navigateToHeaderAriaLabel: y,
   defaultLabel: w,
   requiredLabel: N,
   deprecatedLabel: z
 }) => {
-  const f = R(null), [C, I] = _(!1), i = x ?? P(n ?? "", { decamelize: !0 }), g = j(() => {
+  const f = R(null), [C, I] = _(!1), i = v ?? P(o ?? "", { decamelize: !0 }), h = j(() => {
     i && (O(`${window.location.href.split("#")[0]}#${i}`), window.location.hash = i);
   }, [i]);
   return u(() => {
     const r = f.current;
     if (!r)
       return;
-    const a = () => {
+    const t = () => {
       const L = (r == null ? void 0 : r.offsetHeight) ?? 0;
       I(L > 28);
     };
-    a();
-    const h = new ResizeObserver(a);
-    return h.observe(r), () => {
-      h.unobserve(r);
+    t();
+    const g = new ResizeObserver(t);
+    return g.observe(r), () => {
+      g.unobserve(r);
     };
   }, []), u(() => {
-    l == null || l();
-  }, [l]), n == null ? null : /* @__PURE__ */ e(
+    n == null || n();
+  }, [n]), o == null ? null : /* @__PURE__ */ e(
     "div",
     {
-      className: y(
+      className: k(
         "group/param-head param-head relative flex break-all font-mono text-sm"
       ),
       id: i,
-      children: /* @__PURE__ */ e("div", { className: "mr-5 flex flex-1 flex-col content-start py-0.5", children: /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-2", children: [
-        i && /* @__PURE__ */ e("div", { className: "absolute -top-1.5 -left-9", children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ e("div", { className: "mr-5 flex flex-1 flex-col content-start py-0.5", children: /* @__PURE__ */ d("div", { className: "flex flex-wrap items-center gap-2", children: [
+        i && /* @__PURE__ */ e("div", { className: "absolute -top-1.5 -left-9", children: /* @__PURE__ */ d(
           "a",
           {
-            "aria-label": v,
+            "aria-label": y,
             className: "group/link flex items-center border-0 py-2 opacity-0 focus:opacity-100 focus:outline-0 group-hover/param-head:opacity-100",
             href: `#${i}`,
-            onClick: g,
+            onClick: h,
             children: [
               "​",
-              /* @__PURE__ */ e("div", { className: "flex size-6 items-center justify-center rounded-md bg-white text-gray-400 shadow-sm ring-1 ring-gray-400/30 hover:ring-gray-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-gray-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150", children: /* @__PURE__ */ e(H, {}) })
+              /* @__PURE__ */ e("div", { className: "flex size-6 items-center justify-center rounded-md bg-white text-stone-400 shadow-sm ring-1 ring-stone-400/30 hover:ring-stone-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-stone-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150", children: /* @__PURE__ */ e(H, {}) })
             ]
           }
         ) }),
-        o == null ? void 0 : o.map((r, a) => /* @__PURE__ */ e(
+        s == null ? void 0 : s.map((r, t) => /* @__PURE__ */ e(
           "div",
           {
-            className: "rounded-md bg-gray-100/50 px-2 py-0.5 text-gray-600 dark:bg-white/5 dark:text-gray-200",
+            className: "rounded-md bg-stone-100/50 px-2 py-0.5 text-stone-600 dark:bg-white/5 dark:text-stone-200",
             "data-component-part": "field-meta-pre",
             children: r
           },
-          a
+          t
         )),
         /* @__PURE__ */ e(
           "div",
           {
             className: "overflow-wrap-anywhere cursor-pointer font-semibold text-primary dark:text-primary-light",
             "data-component-part": "field-name",
-            onClick: g,
-            children: n
+            onClick: h,
+            children: o
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ d(
           "div",
           {
-            className: y(
+            className: k(
               "inline items-center gap-2 font-medium text-xs [&_div]:mr-2 [&_div]:inline",
               C ? "[&_div]:leading-6" : "[&_div]:leading-5"
             ),
@@ -90,20 +90,20 @@ const F = ({
             children: [
               m && /* @__PURE__ */ e(c, { children: m }),
               p && /* @__PURE__ */ e(c, { children: p }),
-              t != null && /* @__PURE__ */ e(c, { prefix: w, children: typeof t == "string" ? (
+              a != null && /* @__PURE__ */ e(c, { prefix: w, children: typeof a == "string" ? (
                 // biome-ignore lint/style/noNestedTernary: TODO
-                t === "" ? '""' : t
-              ) : JSON.stringify(t) }),
-              k && /* @__PURE__ */ e($, { label: N }),
-              b && /* @__PURE__ */ e(S, { label: z }),
-              d == null ? void 0 : d.map((r, a) => /* @__PURE__ */ e(
+                a === "" ? '""' : a
+              ) : JSON.stringify(a) }),
+              b && /* @__PURE__ */ e($, { label: N }),
+              x && /* @__PURE__ */ e(S, { label: z }),
+              l == null ? void 0 : l.map((r, t) => /* @__PURE__ */ e(
                 "div",
                 {
-                  className: "rounded-md bg-gray-100/50 px-2 py-0.5 text-gray-600 dark:bg-white/5 dark:text-gray-200",
+                  className: "rounded-md bg-stone-100/50 px-2 py-0.5 text-stone-600 dark:bg-white/5 dark:text-stone-200",
                   "data-component-part": "field-meta-post",
                   children: r
                 },
-                a
+                t
               ))
             ]
           }

package/dist/components/property/pills.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+type InfoPillProps = {
+    children: React.ReactNode;
+    prefix?: string;
+    className?: string;
+};
+declare const InfoPill: ({ children, prefix, className }: InfoPillProps) => import("react/jsx-runtime").JSX.Element;
+declare const RequiredPill: ({ label }: {
+    label?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+declare const DeprecatedPill: ({ label }: {
+    label?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export { InfoPill, RequiredPill, DeprecatedPill };
+//# sourceMappingURL=pills.d.ts.map

package/dist/components/property/pills.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pills.d.ts","sourceRoot":"","sources":["../../../src/components/property/pills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,iCAAiC,aAAa,4CAe/D,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,mDAalD,CAAC;AAEF,QAAA,MAAM,cAAc,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,mDAapD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/property/pills.js

@@ -1,26 +1,26 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { cn as n } from "../../utils/cn.js";
-const p = ({ children: e, prefix: t, className: a }) => /* @__PURE__ */ d(
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { cn as a } from "../../utils/cn.js";
+const l = ({ children: e, prefix: r, className: d }) => /* @__PURE__ */ n(
   "div",
   {
-    className: n(
-      "flex items-center gap-1 break-all rounded-md bg-gray-100/50 px-2 py-0.5 font-medium text-gray-600 dark:bg-white/5 dark:text-gray-200",
-      a
+    className: a(
+      "flex items-center gap-1 break-all rounded-md bg-stone-100/50 px-2 py-0.5 font-medium text-stone-600 dark:bg-white/5 dark:text-stone-200",
+      d
     ),
     "data-component-part": "field-info-pill",
     children: [
-      t && /* @__PURE__ */ r("span", { className: "text-gray-400 dark:text-gray-500", children: t }),
-      /* @__PURE__ */ r("span", { children: e })
+      r && /* @__PURE__ */ t("span", { className: "text-stone-400 dark:text-stone-500", children: r }),
+      /* @__PURE__ */ t("span", { children: e })
     ]
   }
-), m = ({ label: e }) => e ? /* @__PURE__ */ r(
+), p = ({ label: e }) => e ? /* @__PURE__ */ t(
   "div",
   {
     className: "whitespace-nowrap rounded-md bg-red-100/50 px-2 py-0.5 font-medium text-red-600 dark:bg-red-400/10 dark:text-red-300",
     "data-component-part": "field-required-pill",
     children: e
   }
-) : null, o = ({ label: e }) => e ? /* @__PURE__ */ r(
+) : null, m = ({ label: e }) => e ? /* @__PURE__ */ t(
   "div",
   {
     className: "whitespace-nowrap rounded-md bg-amber-100/50 px-2 py-0.5 font-medium text-amber-600 dark:bg-amber-400/10 dark:text-amber-300",
@@ -29,7 +29,7 @@ const p = ({ children: e, prefix: t, className: a }) => /* @__PURE__ */ d(
   }
 ) : null;
 export {
-  o as DeprecatedPill,
-  p as InfoPill,
-  m as RequiredPill
+  m as DeprecatedPill,
+  l as InfoPill,
+  p as RequiredPill
 };

package/dist/components/property/property.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+type PropertyProps = {
+    name: string;
+    type: string;
+    location?: string;
+    hidden?: boolean;
+    default?: unknown;
+    required?: boolean;
+    deprecated?: boolean;
+    children: ReactNode;
+    id?: string;
+    pre?: string[];
+    post?: string[];
+    className?: string;
+    onMount?: () => void;
+    navigateToHeaderAriaLabel?: string;
+    defaultLabel?: string;
+    requiredLabel?: string;
+    deprecatedLabel?: string;
+};
+declare const Property: ({ name, type, location, hidden, default: defaultValue, required, deprecated, children, id, pre, post, className, onMount, navigateToHeaderAriaLabel, defaultLabel, requiredLabel, deprecatedLabel, }: PropertyProps) => import("react/jsx-runtime").JSX.Element | null;
+export { Property };
+export type { PropertyProps };
+//# sourceMappingURL=property.d.ts.map

package/dist/components/property/property.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"property.d.ts","sourceRoot":"","sources":["../../../src/components/property/property.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAMhD,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAOF,QAAA,MAAM,QAAQ,GAAI,sMAkBf,aAAa,mDAmEf,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}