zudoku 0.55.1 → 0.56.0

package/src/lib/components/Layout.tsx

@@ -1,8 +1,6 @@
-import { Helmet } from "@zudoku/react-helmet-async";
 import { Suspense, useEffect, type ReactNode } from "react";
-import { Outlet, useLocation } from "react-router";
+import { Outlet } from "react-router";
 import { cn } from "../util/cn.js";
-import { joinUrl } from "../util/joinUrl.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
 import { useZudoku } from "./context/ZudokuContext.js";
@@ -19,8 +17,7 @@ const LoadingFallback = () => (
 );
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
-  const { meta, authentication, options } = useZudoku();
-  const location = useLocation();
+  const { authentication } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
@@ -32,22 +29,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   return (
     <>
-      <Helmet titleTemplate={meta?.title}>
-        {options.canonicalUrlOrigin && (
-          <link
-            rel="canonical"
-            href={joinUrl(
-              options.canonicalUrlOrigin,
-              options.basePath,
-              location.pathname,
-            )}
-          />
-        )}
-        {meta?.description && (
-          <meta name="description" content={meta.description} />
-        )}
-        {meta?.favicon && <link rel="icon" href={meta.favicon} />}
-      </Helmet>
       <Slot.Target name="layout-before-head" />
       <Header />
       <Slot.Target name="layout-after-head" />

package/src/lib/components/Meta.tsx

@@ -0,0 +1,32 @@
+import { Helmet } from "@zudoku/react-helmet-async";
+import type { PropsWithChildren } from "react";
+import { useLocation } from "react-router";
+import { joinUrl } from "../util/joinUrl.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+export const Meta = ({ children }: PropsWithChildren) => {
+  const { meta, options } = useZudoku();
+  const location = useLocation();
+
+  return (
+    <>
+      <Helmet titleTemplate={meta?.title} defaultTitle={meta?.defaultTitle}>
+        {options.canonicalUrlOrigin && (
+          <link
+            rel="canonical"
+            href={joinUrl(
+              options.canonicalUrlOrigin,
+              options.basePath,
+              location.pathname,
+            )}
+          />
+        )}
+        {meta?.description && (
+          <meta name="description" content={meta.description} />
+        )}
+        {meta?.favicon && <link rel="icon" href={meta.favicon} />}
+      </Helmet>
+      {children}
+    </>
+  );
+};

package/src/lib/components/context/ZudokuContext.ts

@@ -39,7 +39,7 @@ const getItemPath = (item: NavigationItem) => {
     case "link":
       return item.to;
     case "custom-page":
-      return item.path;
+      return joinUrl(item.path);
     default:
       return undefined;
   }

package/src/lib/components/index.ts

@@ -21,6 +21,7 @@ import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
 import { Layout as LayoutImport } from "./Layout.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
+import { Meta as MetaImport } from "./Meta.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
 import { StatusPage as StatusPageImport } from "./StatusPage.js";
 import { Typography as TypographyImport } from "./Typography.js";
@@ -43,6 +44,7 @@ export const Link = /*@__PURE__*/ LinkImport;
 export const BuildCheck = /*@__PURE__*/ BuildCheckImport;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
 export const Typography = /*@__PURE__*/ TypographyImport;
+export const Meta = /*@__PURE__*/ MetaImport;
 
 /** @deprecated Import from `zudoku/hooks` instead */
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;

package/src/lib/components/navigation/NavigationItem.tsx

@@ -114,7 +114,7 @@ export const NavigationItem = ({
       );
     case "link":
     case "custom-page": {
-      const href = item.type === "link" ? item.to : item.path;
+      const href = item.type === "link" ? item.to : joinUrl(item.path);
       return !href.startsWith("http") ? (
         <AnchorLink
           to={{
@@ -124,7 +124,9 @@ export const NavigationItem = ({
           }}
           {...{ [DATA_ANCHOR_ATTR]: href.split("#")[1] }}
           className={navigationListItem({
-            isActive: href === [location.pathname, activeAnchor].join("#"),
+            isActive:
+              href ===
+              [location.pathname, activeAnchor].filter(Boolean).join("#"),
           })}
           onClick={onRequestClose}
         >

package/src/lib/components/navigation/utils.ts

@@ -58,18 +58,18 @@ export const useIsCategoryOpen = (category: NavigationCategory) => {
   const location = useLocation();
 
   return traverseNavigationItem(category, (item) => {
-    if (item.type === "category" && item.link) {
-      const categoryLinkPath = joinUrl(item.link.path);
-      if (categoryLinkPath === location.pathname) {
-        return true;
-      }
-    }
-
-    if (item.type === "doc") {
-      const docPath = joinUrl(item.path);
-      if (docPath === location.pathname) {
-        return true;
-      }
+    switch (item.type) {
+      case "category":
+        if (!item.link) {
+          return undefined;
+        }
+        return joinUrl(item.link.path) === location.pathname ? true : undefined;
+      case "custom-page":
+      case "doc":
+        return joinUrl(item.path) === location.pathname ? true : undefined;
+      case "link":
+      default:
+        return undefined;
     }
   });
 };

package/src/lib/core/ZudokuContext.ts

@@ -48,6 +48,7 @@ export type ApiKeyCache = "api-keys";
 
 type Metadata = Partial<{
   title: string;
+  defaultTitle?: string;
   description: string;
   logo: string;
   favicon: string;

package/src/lib/plugins/custom-pages/index.tsx

@@ -20,6 +20,9 @@ export const customPagesPlugin = (
         customPages.push({
           path: item.path,
           element: item.element,
+          handle: {
+            layout: item.layout ?? "default",
+          },
         });
       }
     });

package/src/lib/ui/CodeBlock.tsx

@@ -28,7 +28,7 @@ const IconToLanguageMap: Record<string, RegExp> = {
   toml: /toml/,
   gnubash: /(shell|bash|sh|zsh)/,
   python: /(py|python)/,
-  dotnet: /(cs|csharp|vb)/,
+  dotnet: /(^cs$|csharp|vb)/,
   rust: /(rs|rust)/,
   ruby: /(rb|ruby)/,
   php: /php/,
@@ -101,7 +101,7 @@ export const CodeBlock = ({
       </div>
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>code]:p-3 [&>code]:py-2",
+          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&_code]:p-3 [&_code]:py-2",
           props.className,
         )}
         ref={ref}

package/src/lib/ui/Dialog.tsx

@@ -1,7 +1,7 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
 
-import { XIcon } from "lucide-react";
+import { CircleIcon, XIcon } from "lucide-react";
 import { cn } from "../util/cn.js";
 
 const Dialog = DialogPrimitive.Root;
@@ -45,8 +45,17 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="absolute left-1 top-1 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <XIcon className="h-3 w-3" strokeWidth={2} />
+        <DialogPrimitive.Close className="absolute p-3 group -left-1.5 -top-1.5 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <CircleIcon
+            className="h-2 w-2 transition-all border border-transparent  group-hover:border-white/20 rounded-full group-hover:scale-180 group-hover:text-red-400"
+            strokeWidth={2}
+            fill="currentColor"
+          />
+          <XIcon
+            className="h-2 w-2 absolute top-3 left-3 text-transparent group-hover:text-red-800 transition-colors"
+            strokeWidth={2}
+            fill="currentColor"
+          />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       )}

package/lib/CodeBlock-CVT6z0PP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CodeBlock-CVT6z0PP.js","sources":["../src/lib/util/useCopyToClipboard.ts","../src/lib/ui/CodeBlock.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport const useCopyToClipboard = (timeout = 2000) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const copyToClipboard = useCallback(\n    (text: string) => {\n      void navigator.clipboard.writeText(text);\n      setIsCopied(true);\n\n      setTimeout(() => setIsCopied(false), timeout);\n    },\n    [timeout],\n  );\n\n  return [isCopied, copyToClipboard] as const;\n};\n","import { CheckIcon, CopyIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { useRef } from \"react\";\nimport { cn } from \"../util/cn.js\";\nimport { useCopyToClipboard } from \"../util/useCopyToClipboard.js\";\n\nexport type CodeBlockProps = {\n  className?: string;\n  noBackground?: boolean;\n  wrapLines?: boolean;\n  showLanguageIndicator?: boolean;\n  language?: string;\n  title?: string;\n  children?: ReactNode;\n  code?: ReactNode;\n  showCopy?: \"hover\" | \"always\" | \"never\";\n  disabled?: boolean;\n  showLineNumbers?: boolean;\n};\n\nconst IconToLanguageMap: Record<string, RegExp> = {\n  typescript: /(tsx?|typescript)/,\n  javascript: /(jsx?|javascript)/,\n  markdown: /(md|markdown)/,\n  mdx: /mdx/,\n  json: /json/,\n  yaml: /yaml/,\n  toml: /toml/,\n  gnubash: /(shell|bash|sh|zsh)/,\n  python: /(py|python)/,\n  dotnet: /(cs|csharp|vb)/,\n  rust: /(rs|rust)/,\n  ruby: /(rb|ruby)/,\n  php: /php/,\n  html5: /html?/,\n  css: /css/,\n};\n\nconst getIconUrl = (language?: string) => {\n  if (!language) return undefined;\n\n  const icon = Object.entries(IconToLanguageMap).find(([_, regex]) =>\n    regex.test(language),\n  );\n  return icon\n    ? `https://cdn.simpleicons.org/${icon[0]}/000/fff?viewbox=auto`\n    : undefined;\n};\n\nexport const CodeBlock = ({\n  children,\n  title = \"Code\",\n  language,\n  showCopy = \"hover\",\n  showLanguageIndicator,\n  showLineNumbers,\n  ...props\n}: CodeBlockProps) => {\n  const [isCopied, copyToClipboard] = useCopyToClipboard();\n  const ref = useRef<HTMLDivElement>(null);\n\n  if (!children) return null;\n\n  const iconUrl = showLanguageIndicator ? getIconUrl(language) : undefined;\n\n  return (\n    <div\n      className={cn(\n        \"border code-block-wrapper relative group bg-muted/50 rounded-md overflow-hidden\",\n        showLineNumbers && \"line-numbers\",\n      )}\n    >\n      <div className=\"border-b flex items-center h-10 font-sans bg-black/2\">\n        <div className=\"flex items-center gap-2 flex-1 text-sm w-full px-3\">\n          {iconUrl && <img src={iconUrl} className=\"h-3 max-w-4\" />}\n          {title}\n        </div>{\" \"}\n        {showCopy !== \"never\" && (\n          <button\n            type=\"button\"\n            aria-label=\"Copy code\"\n            title=\"Copy code\"\n            className={cn(\n              \"transition px-2 py-2 mx-1 rounded-sm\",\n              !isCopied && \"hover:bg-accent hover:brightness-95\",\n            )}\n            disabled={isCopied}\n            onClick={() => {\n              if (!ref.current?.textContent) return;\n\n              copyToClipboard(ref.current.textContent);\n            }}\n          >\n            {isCopied ? (\n              <CheckIcon className=\"text-emerald-600\" size={14} />\n            ) : (\n              <CopyIcon size={14} />\n            )}\n          </button>\n        )}\n      </div>\n      <div\n        className={cn(\n          \"code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>code]:p-3 [&>code]:py-2\",\n          props.className,\n        )}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["useCopyToClipboard","timeout","isCopied","setIsCopied","useState","copyToClipboard","useCallback","text","IconToLanguageMap","getIconUrl","language","icon","_","regex","CodeBlock","children","title","showCopy","showLanguageIndicator","showLineNumbers","props","ref","useRef","iconUrl","jsxs","cn","jsx","CheckIcon","CopyIcon"],"mappings":";;;;AAEO,MAAMA,IAAqB,CAACC,IAAU,QAAS;AACpD,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAkBC;AAAA,IACtB,CAACC,MAAiB;AAChB,MAAK,UAAU,UAAU,UAAUA,CAAI,GACvCJ,EAAY,EAAI,GAEhB,WAAW,MAAMA,EAAY,EAAK,GAAGF,CAAO;AAAA,IAC9C;AAAA,IACA,CAACA,CAAO;AAAA,EAAA;AAGV,SAAO,CAACC,GAAUG,CAAe;AACnC,GCIMG,IAA4C;AAAA,EAChD,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,KAAK;AACP,GAEMC,IAAa,CAACC,MAAsB;AACxC,MAAI,CAACA,EAAU;AAEf,QAAMC,IAAO,OAAO,QAAQH,CAAiB,EAAE;AAAA,IAAK,CAAC,CAACI,GAAGC,CAAK,MAC5DA,EAAM,KAAKH,CAAQ;AAAA,EAAA;AAErB,SAAOC,IACH,+BAA+BA,EAAK,CAAC,CAAC,0BACtC;AACN,GAEaG,IAAY,CAAC;AAAA,EACxB,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAN;AAAA,EACA,UAAAO,IAAW;AAAA,EACX,uBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAsB;AACpB,QAAM,CAAClB,GAAUG,CAAe,IAAIL,EAAA,GAC9BqB,IAAMC,EAAuB,IAAI;AAEvC,MAAI,CAACP,EAAU,QAAO;AAEtB,QAAMQ,IAAUL,IAAwBT,EAAWC,CAAQ,IAAI;AAE/D,SACEc,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAN,KAAmB;AAAA,MAAA;AAAA,MAGrB,UAAA;AAAA,QAAAK,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,wDACb,UAAA;AAAA,UAAAA,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,sDACZ,UAAA;AAAA,YAAAD,KAAWG,gBAAAA,EAAAA,IAAC,OAAA,EAAI,KAAKH,GAAS,WAAU,eAAc;AAAA,YACtDP;AAAA,UAAA,GACH;AAAA,UAAO;AAAA,UACNC,MAAa,WACZS,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,OAAM;AAAA,cACN,WAAWD;AAAA,gBACT;AAAA,gBACA,CAACvB,KAAY;AAAA,cAAA;AAAA,cAEf,UAAUA;AAAA,cACV,SAAS,MAAM;AACb,gBAAKmB,EAAI,SAAS,eAElBhB,EAAgBgB,EAAI,QAAQ,WAAW;AAAA,cACzC;AAAA,cAEC,UAAAnB,IACCwB,gBAAAA,EAAAA,IAACC,GAAA,EAAU,WAAU,oBAAmB,MAAM,GAAA,CAAI,IAElDD,gBAAAA,EAAAA,IAACE,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QAExB,GAEJ;AAAA,QACAF,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAL,EAAM;AAAA,YAAA;AAAA,YAER,KAAAC;AAAA,YAEC,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/Dialog-u9Uz9sTt.js

@@ -1,99 +0,0 @@
-import { j as s } from "./jsx-runtime-C5mzlN2N.js";
-import * as a from "@radix-ui/react-dialog";
-import * as l from "react";
-import { XIcon as c } from "lucide-react";
-import { c as i } from "./cn-dYga0KKN.js";
-const j = a.Root, b = a.Trigger, m = a.Portal, h = a.Close, n = l.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s.jsx(
-  a.Overlay,
-  {
-    ref: o,
-    className: i(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      e
-    ),
-    ...t
-  }
-));
-n.displayName = a.Overlay.displayName;
-const f = l.forwardRef(({ className: e, children: t, showCloseButton: o = !0, ...d }, r) => /* @__PURE__ */ s.jsxs(m, { children: [
-  /* @__PURE__ */ s.jsx(n, {}),
-  /* @__PURE__ */ s.jsxs(
-    a.Content,
-    {
-      ref: r,
-      className: i(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        e
-      ),
-      ...d,
-      children: [
-        t,
-        o && /* @__PURE__ */ s.jsxs(a.Close, { className: "absolute left-1 top-1 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ s.jsx(c, { className: "h-3 w-3", strokeWidth: 2 }),
-          /* @__PURE__ */ s.jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-f.displayName = a.Content.displayName;
-const p = ({
-  className: e,
-  ...t
-}) => /* @__PURE__ */ s.jsx(
-  "div",
-  {
-    className: i(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      e
-    ),
-    ...t
-  }
-);
-p.displayName = "DialogHeader";
-const g = ({
-  className: e,
-  ...t
-}) => /* @__PURE__ */ s.jsx(
-  "div",
-  {
-    className: i(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      e
-    ),
-    ...t
-  }
-);
-g.displayName = "DialogFooter";
-const x = l.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s.jsx(
-  a.Title,
-  {
-    ref: o,
-    className: i(
-      "text-lg font-semibold leading-none tracking-tight",
-      e
-    ),
-    ...t
-  }
-));
-x.displayName = a.Title.displayName;
-const u = l.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s.jsx(
-  a.Description,
-  {
-    ref: o,
-    className: i("text-sm text-muted-foreground", e),
-    ...t
-  }
-));
-u.displayName = a.Description.displayName;
-export {
-  j as D,
-  f as a,
-  x as b,
-  p as c,
-  u as d,
-  g as e,
-  h as f,
-  b as g
-};
-//# sourceMappingURL=Dialog-u9Uz9sTt.js.map

package/lib/Dialog-u9Uz9sTt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog-u9Uz9sTt.js","sources":["../src/lib/ui/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\n\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"../util/cn.js\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    showCloseButton?: boolean;\n  }\n>(({ className, children, showCloseButton = true, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close className=\"absolute left-1 top-1 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n          <XIcon className=\"h-3 w-3\" strokeWidth={2} />\n          <span className=\"sr-only\">Close</span>\n        </DialogPrimitive.Close>\n      )}\n    </DialogPrimitive.Content>\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className,\n    )}\n    {...props}\n  />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className,\n    )}\n    {...props}\n  />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","jsx","cn","DialogContent","children","showCloseButton","jsxs","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":";;;;;AAMA,MAAMA,IAASC,EAAgB,MAEzBC,IAAgBD,EAAgB,SAEhCE,IAAeF,EAAgB,QAE/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1BC,gBAAAA,EAAAA;AAAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAc,cAAcJ,EAAgB,QAAQ;AAEpD,MAAMW,IAAgBN,EAAM,WAK1B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,iBAAAC,IAAkB,IAAM,GAAGN,EAAA,GAASC,6BAC3DN,GAAA,EACC,UAAA;AAAA,EAAAO,gBAAAA,EAAAA,IAACL,GAAA,EAAc;AAAA,EACfU,gBAAAA,EAAAA;AAAAA,IAACd,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAK;AAAA,QACAC,KACCC,gBAAAA,EAAAA,KAACd,EAAgB,OAAhB,EAAsB,WAAU,kRAC/B,UAAA;AAAA,UAAAS,gBAAAA,EAAAA,IAACM,GAAA,EAAM,WAAU,WAAU,aAAa,GAAG;AAAA,UAC3CN,gBAAAA,EAAAA,IAAC,QAAA,EAAK,WAAU,WAAU,UAAA,QAAA,CAAK;AAAA,QAAA,EAAA,CACjC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAEJ,GACF,CACD;AACDE,EAAc,cAAcX,EAAgB,QAAQ;AAEpD,MAAMgB,IAAe,CAAC;AAAA,EACpB,WAAAV;AAAA,EACA,GAAGC;AACL,MACEE,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;AAEFS,EAAa,cAAc;AAE3B,MAAMC,IAAe,CAAC;AAAA,EACpB,WAAAX;AAAA,EACA,GAAGC;AACL,MACEE,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;AAEFU,EAAa,cAAc;AAE3B,MAAMC,IAAcb,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1BC,gBAAAA,EAAAA;AAAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDW,EAAY,cAAclB,EAAgB,MAAM;AAEhD,MAAMmB,IAAoBd,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1BC,gBAAAA,EAAAA;AAAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDY,EAAkB,cAAcnB,EAAgB,YAAY;"}