@mintlify/components 1.0.0 → 1.0.1

package/dist/components/code-group/language-dropdown.js

@@ -1,77 +1,77 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { useState as f } from "react";
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import { useState as b } from "react";
 import { cn as p } from "../../utils/cn.js";
 import { getDisplayName as d } from "../../utils/shiki/snippet-presets.js";
-import { DropdownMenu as b, DropdownMenuTrigger as l, DropdownMenuContent as v, DropdownMenuItem as w } from "./dropdown.js";
-import { LanguageIcon as y } from "./language-icon.js";
+import { DropdownMenu as l, DropdownMenuTrigger as v, DropdownMenuContent as w, DropdownMenuItem as g } from "./dropdown.js";
+import { LanguageIcon as x } from "./language-icon.js";
 import k from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.js";
 const S = ({
-  selectedLanguage: i,
-  setSelectedLanguage: x,
+  selectedLanguage: e,
+  setSelectedLanguage: h,
   languages: m,
   codeBlockTheme: r = "system"
 }) => {
-  const a = m.length > 1, [s, h] = f(!1);
-  return /* @__PURE__ */ n(b, { onOpenChange: h, open: s, children: [
-    /* @__PURE__ */ e(
-      l,
+  const s = m.length > 1, [n, y] = b(!1);
+  return /* @__PURE__ */ o(l, { onOpenChange: y, open: n, children: [
+    /* @__PURE__ */ i(
+      v,
       {
         className: "cursor-default select-none bg-transparent pb-1 font-medium text-xs dark:bg-transparent",
-        disabled: !a,
-        children: /* @__PURE__ */ n(
+        disabled: !s,
+        children: /* @__PURE__ */ o(
           "div",
           {
             className: p(
-              "flex items-center gap-1 rounded-[10px] border py-[5px] pr-1.5 pl-2.5 text-gray-500 dark:text-gray-400",
-              a ? "cursor-pointer" : "cursor-default",
-              a && r === "system" && "hover:bg-gray-200/50 hover:text-primary dark:hover:bg-gray-700/70 dark:hover:text-primary-light",
-              a && r === "dark" && "hover:bg-gray-700/70 hover:text-primary-light",
-              s && "border-gray-600/50 ring-1 dark:border-gray-400/50 dark:ring-gray-800/50",
-              s && r === "system" && "ring-gray-200/70",
-              s && r === "dark" && "ring-gray-800/50",
-              !s && "border-transparent"
+              "flex items-center gap-1 rounded-[10px] border py-[5px] pr-1.5 pl-2.5 text-stone-500 dark:text-stone-400",
+              s ? "cursor-pointer" : "cursor-default",
+              s && r === "system" && "hover:bg-stone-200/50 hover:text-primary dark:hover:bg-stone-700/70 dark:hover:text-primary-light",
+              s && r === "dark" && "hover:bg-stone-700/70 hover:text-primary-light",
+              n && "border-stone-600/50 ring-1 dark:border-stone-400/50 dark:ring-stone-800/50",
+              n && r === "system" && "ring-stone-200/70",
+              n && r === "dark" && "ring-stone-800/50",
+              !n && "border-transparent"
             ),
             children: [
-              /* @__PURE__ */ e(y, { language: i }),
-              /* @__PURE__ */ e("p", { className: "truncate font-medium", children: d(i) }),
-              a && /* @__PURE__ */ e(k, { className: "size-3.5 shrink-0" })
+              /* @__PURE__ */ i(x, { language: e }),
+              /* @__PURE__ */ i("p", { className: "truncate font-medium", children: d(e) }),
+              s && /* @__PURE__ */ i(k, { className: "size-3.5 shrink-0" })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ e(
-      v,
+    /* @__PURE__ */ i(
+      w,
       {
         align: "end",
         className: p(
           "min-w-[170px] overflow-y-auto border p-1",
-          r === "system" && "border-gray-200/70 bg-white dark:border-white/10 dark:bg-[#0F1117]",
+          r === "system" && "border-stone-200/70 bg-white dark:border-white/10 dark:bg-[#0F1117]",
           r === "dark" && "border-white/10 bg-[#0F1117]"
         ),
         sideOffset: 0,
-        children: m.map((t, o) => {
-          const g = t === i;
-          return /* @__PURE__ */ n(
-            w,
+        children: m.map((t, a) => {
+          const f = t === e;
+          return /* @__PURE__ */ o(
+            g,
             {
               className: p(
                 "flex items-center gap-1.5 py-1.5 text-xs",
                 r === "system" && "hover:bg-primary/10 hover:text-primary dark:hover:bg-primary-light/10 dark:hover:text-primary-light",
                 r === "dark" && "text-primary-light hover:bg-primary-light/10 hover:text-primary-light dark:text-primary-light",
-                t === i && r === "system" && "font-medium text-primary dark:text-primary-light",
-                t === i && r === "dark" && "font-medium text-primary-light dark:text-primary-light",
-                t !== i && r === "system" && "text-gray-500 dark:text-white/50",
-                t !== i && r === "dark" && "text-white/50"
+                t === e && r === "system" && "font-medium text-primary dark:text-primary-light",
+                t === e && r === "dark" && "font-medium text-primary-light dark:text-primary-light",
+                t !== e && r === "system" && "text-stone-500 dark:text-white/50",
+                t !== e && r === "dark" && "text-white/50"
               ),
-              isSelected: g,
-              onSelect: () => x(t, o),
+              isSelected: f,
+              onSelect: () => h(t, a),
               children: [
-                /* @__PURE__ */ e(y, { language: t }),
-                /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center font-medium", children: d(t) })
+                /* @__PURE__ */ i(x, { language: t }),
+                /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 items-center font-medium", children: d(t) })
               ]
             },
-            `Language${o}${t}`
+            `Language${a}${t}`
           );
         })
       }

package/dist/components/code-group/language-icon.d.ts

@@ -0,0 +1,7 @@
+type LanguageIconProps = {
+    language: string;
+    className?: string;
+};
+declare const LanguageIcon: ({ language, className }: LanguageIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export { LanguageIcon };
+//# sourceMappingURL=language-icon.d.ts.map

package/dist/components/code-group/language-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"language-icon.d.ts","sourceRoot":"","sources":["../../../src/components/code-group/language-icon.tsx"],"names":[],"mappings":"AAGA,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,yBAAyB,iBAAiB,mDAsB/D,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/color/color.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { ColorVariant } from './constants';
+type ColorProps = {
+    children: React.ReactNode;
+    variant: ColorVariant;
+    className?: string;
+};
+declare const Color: {
+    ({ children, variant, className }: ColorProps): import("react/jsx-runtime").JSX.Element;
+    Row: ({ children, title }: ColorRowProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ name, value }: ColorItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+type ColorRowProps = {
+    children: React.ReactNode;
+    title?: string;
+};
+/** @deprecated Use a single string value instead */
+type ColorItemValueLegacy = {
+    light: string;
+    dark: string;
+};
+type ColorItemProps = {
+    value: string | ColorItemValueLegacy;
+    name?: string;
+};
+export { Color };
+export type { ColorItemProps, ColorProps, ColorRowProps };
+//# sourceMappingURL=color.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/components/color/color.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,QAAA,MAAM,KAAK;uCAAsC,UAAU;+BAwBpB,aAAa;4BAwChB,cAAc;CA/CjD,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkCF,oDAAoD;AACpD,KAAK,oBAAoB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,GAAG,oBAAoB,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AA8GF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/color/color.js

@@ -1,29 +1,29 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { createContext as g, useState as C, useRef as w, useContext as y, useEffect as b } from "react";
-import { Classes as s } from "../../constants/selectors.js";
-import { useIsDarkTheme as k } from "../../hooks/use-is-dark-theme.js";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { createContext as C, useState as w, useRef as g, useContext as b, useEffect as k } from "react";
+import { Classes as i } from "../../constants/selectors.js";
+import { useIsDarkTheme as y } from "../../hooks/use-is-dark-theme.js";
 import { CheckIcon as N } from "../../icons/index.js";
-import { cn as n } from "../../utils/cn.js";
+import { cn as l } from "../../utils/cn.js";
 import { copyToClipboard as _ } from "../../utils/copy-to-clipboard.js";
 import { Tooltip as v } from "../tooltip/tooltip.js";
-const d = g("compact"), u = ({ children: r, variant: t, className: c }) => /* @__PURE__ */ e(d.Provider, { value: t, children: /* @__PURE__ */ e(
+const d = C("compact"), u = ({ children: o, variant: t, className: c }) => /* @__PURE__ */ e(d.Provider, { value: t, children: /* @__PURE__ */ e(
   "div",
   {
-    className: n(
-      s.Color,
+    className: l(
+      i.Color,
       "group flex py-6",
       t === "table" && "flex-col gap-6",
       t === "compact" && "flex-row flex-wrap gap-x-2 gap-y-4",
       c
     ),
     "data-variant": t,
-    children: r
+    children: o
   }
-) }), T = ({ children: r, title: t }) => /* @__PURE__ */ i(
+) }), T = ({ children: o, title: t }) => /* @__PURE__ */ s(
   "div",
   {
-    className: n(
-      s.ColorRow,
+    className: l(
+      i.ColorRow,
       "flex flex-col gap-2 md:flex-row md:items-center"
     ),
     children: [
@@ -35,7 +35,7 @@ const d = g("compact"), u = ({ children: r, variant: t, className: c }) => /* @_
           children: /* @__PURE__ */ e(
             "p",
             {
-              className: "m-0 truncate font-medium text-gray-900 text-sm tracking-[-0.1px] dark:text-gray-200",
+              className: "m-0 truncate font-medium text-sm text-stone-900 tracking-[-0.1px] dark:text-stone-200",
               "data-component-part": "color-row-title",
               title: t,
               children: t
@@ -48,28 +48,28 @@ const d = g("compact"), u = ({ children: r, variant: t, className: c }) => /* @_
         {
           className: "flex w-full gap-1 md:gap-2",
           "data-component-part": "color-row-items-container",
-          children: r
+          children: o
         }
       )
     ]
   }
-), I = ({ name: r, value: t }) => {
-  const [c, m] = C("idle"), l = w(null), { isDarkTheme: x } = k(), o = y(d);
-  b(() => () => {
-    l.current && clearTimeout(l.current);
+), I = ({ name: o, value: t }) => {
+  const [c, m] = w("idle"), n = g(null), { isDarkTheme: x } = y(), r = b(d);
+  k(() => () => {
+    n.current && clearTimeout(n.current);
   }, []);
   const a = typeof t == "string" ? t : t[x ? "dark" : "light"], f = async () => {
-    await _(a) !== "error" && (m("copied"), l.current && clearTimeout(l.current), l.current = setTimeout(() => m("idle"), 2e3));
+    await _(a) !== "error" && (m("copied"), n.current && clearTimeout(n.current), n.current = setTimeout(() => m("idle"), 2e3));
   }, p = /* @__PURE__ */ e(
     "button",
     {
-      "aria-label": r || `Color ${a}`,
+      "aria-label": o || `Color ${a}`,
       "aria-pressed": c === "copied",
       "aria-roledescription": c === "copied" ? "Copied" : "Copy",
-      className: n(
-        "relative flex cursor-copy items-center justify-center rounded-lg border border-neutral-200 dark:border-neutral-800",
-        o === "compact" && "aspect-square max-h-[104px]",
-        o === "table" && "aspect-square w-full md:h-10"
+      className: l(
+        "relative flex cursor-copy items-center justify-center rounded-lg border border-stone-200 dark:border-stone-800",
+        r === "compact" && "aspect-square max-h-[104px]",
+        r === "table" && "aspect-square w-full md:h-10"
       ),
       "data-component-part": "color-item-button",
       onClick: f,
@@ -79,7 +79,7 @@ const d = g("compact"), u = ({ children: r, variant: t, className: c }) => /* @_
         N,
         {
           "aria-hidden": !0,
-          className: n(
+          className: l(
             "pointer-events-none absolute inset-0 m-auto opacity-0 transition-opacity duration-100",
             "filter-[drop-shadow(0_0_2px_rgb(0_0_0/0.1))_drop-shadow(0_0_4px_rgb(0_0_0/0.1))] text-white dark:text-white",
             c === "copied" && "opacity-100"
@@ -88,30 +88,30 @@ const d = g("compact"), u = ({ children: r, variant: t, className: c }) => /* @_
       )
     }
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: n(
-        s.ColorItem,
-        o === "compact" && "flex shrink-0 flex-col gap-2",
-        o === "table" && "w-full max-w-[50px] md:max-w-[60px]"
+      className: l(
+        i.ColorItem,
+        r === "compact" && "flex shrink-0 flex-col gap-2",
+        r === "table" && "w-full max-w-[50px] md:max-w-[60px]"
       ),
       children: [
-        o === "table" ? /* @__PURE__ */ e(v, { title: a, children: p }) : p,
-        o === "compact" && /* @__PURE__ */ i("div", { className: "flex w-[104px] min-w-0 flex-col gap-0.5", children: [
-          r && /* @__PURE__ */ e(
+        r === "table" ? /* @__PURE__ */ e(v, { title: a, children: p }) : p,
+        r === "compact" && /* @__PURE__ */ s("div", { className: "flex w-[104px] min-w-0 flex-col gap-0.5", children: [
+          o && /* @__PURE__ */ e(
             "p",
             {
-              className: "m-0 truncate text-center font-medium text-gray-900 text-sm dark:text-gray-200",
+              className: "m-0 truncate text-center font-medium text-sm text-stone-900 dark:text-stone-200",
               "data-component-part": "color-item-name",
-              title: r,
-              children: r
+              title: o,
+              children: o
             }
           ),
           /* @__PURE__ */ e(
             "p",
             {
-              className: "m-0 truncate text-center font-mono text-gray-600 text-xs dark:text-gray-400",
+              className: "m-0 truncate text-center font-mono text-stone-600 text-xs dark:text-stone-400",
               "data-component-part": "color-item-value",
               title: a,
               children: a

package/dist/components/color/constants.d.ts

@@ -0,0 +1,5 @@
+declare const COLOR_VARIANTS: readonly ["compact", "table"];
+type ColorVariant = (typeof COLOR_VARIANTS)[number];
+export { COLOR_VARIANTS };
+export type { ColorVariant };
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/color/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/color/constants.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,cAAc,+BAAgC,CAAC;AACrD,KAAK,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,4 @@
+export type { ColorItemProps, ColorProps, ColorRowProps } from './color';
+export { Color } from './color';
+export type { ColorVariant } from './constants';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/columns/columns.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ColCount } from './constants';
+type ColumnsProps = {
+    children: React.ReactNode;
+    cols?: ColCount | `${ColCount}`;
+    className?: string;
+};
+declare const Columns: ({ children, className, cols }: ColumnsProps) => import("react/jsx-runtime").JSX.Element;
+export { Columns };
+export type { ColumnsProps };
+//# sourceMappingURL=columns.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../src/components/columns/columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,QAAQ,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,OAAO,GAAI,+BAAmC,YAAY,4CAgB/D,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/columns/constants.d.ts

@@ -0,0 +1,5 @@
+declare const COL_OPTIONS: readonly [1, 2, 3, 4];
+type ColCount = (typeof COL_OPTIONS)[number];
+export { COL_OPTIONS };
+export type { ColCount };
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/columns/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/columns/constants.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW,uBAAwB,CAAC;AAC1C,KAAK,QAAQ,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,3 @@
+export type { ColumnsProps } from './columns';
+export { Columns } from './columns';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/expandable/expandable.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, RefObject } from 'react';
+type ExpandableProps = {
+    title?: string;
+    defaultOpen?: boolean;
+    onChange?: (open: boolean) => void;
+    lazy?: boolean;
+    className?: string;
+    children?: ReactNode;
+    uniqueParamId?: string;
+    onMount?: () => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    openedText?: string;
+    closedText?: string;
+    hasScrolledToAnchorRef?: RefObject<boolean>;
+    anchor?: string;
+};
+declare const Expandable: ({ title, defaultOpen, onChange: onChangeProp, lazy, className, children, uniqueParamId, onMount, onOpen, onClose, openedText, closedText, hasScrolledToAnchorRef, anchor, }: ExpandableProps) => import("react/jsx-runtime").JSX.Element;
+export { Expandable };
+export type { ExpandableProps };
+//# sourceMappingURL=expandable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expandable.d.ts","sourceRoot":"","sources":["../../../src/components/expandable/expandable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAWf,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,6KAejB,eAAe,4CA8HjB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/expandable/expandable.js

@@ -1,74 +1,74 @@
 import { jsxs as p, jsx as x } from "react/jsx-runtime";
-import { useState as u, useLayoutEffect as j, useEffect as z, useId as B } from "react";
+import { useState as u, useLayoutEffect as j, useEffect as B, useId as z } from "react";
 import { Classes as H } from "../../constants/selectors.js";
 import { useExpandableMemory as I } from "../../hooks/use-expandable-memory.js";
-import { cn as a } from "../../utils/cn.js";
+import { cn as r } from "../../utils/cn.js";
 import { Icon as G } from "../icon/icon.js";
-const y = "expandable-content", J = "Hide", K = "Show", Q = "child attributes", P = ({
-  title: s = Q,
-  defaultOpen: n = !1,
-  onChange: g,
-  lazy: N,
-  className: T,
-  children: L,
-  uniqueParamId: r,
-  onMount: o,
+const N = "expandable-content", J = "Hide", K = "Show", Q = "child attributes", P = ({
+  title: n = Q,
+  defaultOpen: o = !1,
+  onChange: b,
+  lazy: T,
+  className: L,
+  children: v,
+  uniqueParamId: s,
+  onMount: a,
   onOpen: d,
   onClose: c,
-  openedText: v = J,
-  closedText: _ = K,
+  openedText: _ = J,
+  closedText: k = K,
   hasScrolledToAnchorRef: i,
   anchor: l
 }) => {
-  const b = !!r, {
-    ref: k,
-    isExpanded: D,
-    onManualToggle: S,
-    isInSessionStorage: w
-  } = I(r || "", n), [A, F] = u(n), U = !!(r && (l != null && l.includes(r))) && !(i != null && i.current), e = b ? (
+  const f = !!s, {
+    ref: D,
+    isExpanded: S,
+    onManualToggle: w,
+    isInSessionStorage: A
+  } = I(s || "", o), [y, F] = u(o), U = !!(s && (l != null && l.includes(s))) && !(i != null && i.current), e = f ? (
     // biome-ignore lint/style/noNestedTernary: TODO
     U ? !0 : (
       // biome-ignore lint/style/noNestedTernary: TODO
-      w ? D : n
+      A ? S : o
     )
-  ) : A, [m, f] = u(
-    e || !N
+  ) : y, [m, E] = u(
+    e || !T
   );
   j(() => {
-    e && !m && f(!0);
-  }, [e, m]), z(() => {
-    o == null || o();
+    e && !m && E(!0);
+  }, [e, m]), B(() => {
+    a == null || a();
   }, []);
   const C = (t) => {
-    f(!0), g && g(t), t ? d == null || d() : c == null || c();
+    E(!0), b && b(t), t ? d == null || d() : c == null || c();
   }, X = (t) => {
-    b ? S(t) : F(t), C(t);
-  }, $ = B(), E = `${s}-${$}-content`.replace(/\s+/g, "-");
+    f ? w(t) : F(t), C(t);
+  }, $ = z(), g = `${n}-${$}-content`.replace(/\s+/g, "-");
   return /* @__PURE__ */ p(
     "details",
     {
-      className: a(
+      className: r(
         H.Expandable,
         "mt-4 rounded-xl border-standard",
-        T
+        L
       ),
       "data-component-part": "expandable",
-      "data-testid": r ? `${r}-children` : void 0,
+      "data-testid": s ? `${s}-children` : void 0,
       onToggle: (t) => {
         const h = t.currentTarget.open;
         h !== e && X(h);
       },
       open: e,
-      ref: k,
+      ref: D,
       children: [
         /* @__PURE__ */ p(
           "summary",
           {
-            "aria-controls": E,
+            "aria-controls": g,
             "aria-expanded": e,
-            className: a(
+            className: r(
               "not-prose flex w-full cursor-pointer flex-row content-center items-center text-sm",
-              "rounded-t-xl px-3.5 py-3 text-gray-600 hover:bg-gray-50/50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-gray-200",
+              "rounded-t-xl px-3.5 py-3 text-stone-600 hover:bg-stone-50/50 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-white/5 dark:hover:text-stone-200",
               "list-none [&::-webkit-details-marker]:hidden",
               !e && "rounded-b-xl"
             ),
@@ -77,8 +77,8 @@ const y = "expandable-content", J = "Hide", K = "Show", Q = "child attributes",
               /* @__PURE__ */ x(
                 G,
                 {
-                  className: a(
-                    "size-2.5 bg-zinc-400 transition-transform",
+                  className: r(
+                    "size-2.5 bg-stone-400 transition-transform",
                     e && "rotate-90"
                   ),
                   "data-component-part": "expandable-icon",
@@ -86,9 +86,9 @@ const y = "expandable-content", J = "Hide", K = "Show", Q = "child attributes",
                 }
               ),
               /* @__PURE__ */ x("div", { className: "ml-3 text-left leading-tight", children: /* @__PURE__ */ p("p", { className: "m-0", contentEditable: !1, children: [
-                e ? v : _,
+                e ? _ : k,
                 " ",
-                s
+                n
               ] }) })
             ]
           }
@@ -96,18 +96,18 @@ const y = "expandable-content", J = "Hide", K = "Show", Q = "child attributes",
         /* @__PURE__ */ x(
           "div",
           {
-            className: a(
-              y,
-              "mx-3 border-gray-100 border-t px-2 dark:border-white/10"
+            className: r(
+              N,
+              "mx-3 border-stone-100 border-t px-2 dark:border-white/10"
             ),
-            "data-component-part": y,
-            id: E,
-            children: m && L
+            "data-component-part": N,
+            id: g,
+            children: m && v
           }
         )
       ]
     },
-    s
+    n
   );
 };
 export {

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

@@ -0,0 +1,3 @@
+export type { ExpandableProps } from './expandable';
+export { Expandable } from './expandable';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/frame/frame.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+type FrameProps = {
+    as: "div";
+    style: CSSProperties;
+    className: string;
+    children: ReactNode;
+    title?: string;
+    description?: string;
+    renderDescription?: (description: string) => ReactNode;
+};
+declare const Frame: ({ as: Component, title, description, renderDescription, style, className, children, }: FrameProps) => import("react/jsx-runtime").JSX.Element;
+export { Frame };
+export type { FrameProps };
+//# sourceMappingURL=frame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/components/frame/frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtD,KAAK,UAAU,GAAG;IAChB,EAAE,EAAE,KAAK,CAAC;IACV,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,SAAS,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,KAAK,GAAI,uFAQZ,UAAU,4CA6DZ,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}