@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/details-card.js

@@ -0,0 +1,118 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/details-card.tsx
+function DetailsCard({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "article",
+		props: mergeProps({ className: cn("flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-canvas p-gdt-xl text-fg-primary", className) }, props),
+		render,
+		state: { slot: "details-card" }
+	});
+}
+function DetailsCardHeader({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex min-w-0 flex-col gap-1", className) }, props),
+		render
+	});
+}
+function DetailsCardTitle({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "h3",
+		props: mergeProps({ className: cn("text-gdt-md font-bold text-fg-primary", className) }, props),
+		render
+	});
+}
+function DetailsCardDescription({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		props: mergeProps({ className: cn("text-gdt-sm font-normal text-fg-secondary", className) }, props),
+		render
+	});
+}
+function DetailsCardBody({ className, orientation = "horizontal", render, showIcons = true, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			"data-icons": showIcons,
+			"data-orientation": orientation,
+			className: cn("group/details-card-body mt-gdt-md flex min-w-0 flex-col border-line-subtle border-t", className)
+		}, props),
+		render,
+		state: {
+			orientation,
+			showIcons,
+			slot: "details-card-body"
+		}
+	});
+}
+function DetailsCardRow({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("grid min-w-0 grid-cols-[1rem_minmax(0,1fr)_auto] items-center gap-x-2 border-line-subtle border-b py-3 last:border-b-0", "group-data-[orientation=vertical]/details-card-body:grid-cols-[1rem_minmax(0,1fr)] group-data-[orientation=vertical]/details-card-body:items-start group-data-[orientation=vertical]/details-card-body:gap-y-1", "group-data-[icons=false]/details-card-body:grid-cols-[minmax(0,1fr)_auto]", "group-[[data-icons=false][data-orientation=vertical]]/details-card-body:grid-cols-1", "group-data-[slot=details-card-row-group]/details-card-row-group:border-b-0", className) }, props),
+		render,
+		state: { slot: "details-card-row" }
+	});
+}
+function DetailsCardRowGroup({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			"data-slot": "details-card-row-group",
+			className: cn("group/details-card-row-group grid min-w-0 border-line-subtle border-b last:border-b-0", className)
+		}, props),
+		render,
+		state: { slot: "details-card-row-group" }
+	});
+}
+function DetailsCardIcon({ children, className, render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({
+			"aria-hidden": true,
+			children: children ?? /* @__PURE__ */ jsx(DetailsCardChevronIcon, {}),
+			className: cn("flex size-4 shrink-0 items-center justify-center text-fg-primary", "group-data-[icons=false]/details-card-body:hidden", className)
+		}, props),
+		render,
+		state: { slot: "details-card-icon" }
+	});
+}
+function DetailsCardLabel({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("min-w-0 text-gdt-sm font-normal text-fg-secondary", className) }, props),
+		render,
+		state: { slot: "details-card-label" }
+	});
+}
+function DetailsCardValue({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("min-w-0 justify-self-end text-right text-gdt-sm font-semibold text-fg-primary", "group-data-[orientation=vertical]/details-card-body:col-start-2 group-data-[orientation=vertical]/details-card-body:justify-self-start group-data-[orientation=vertical]/details-card-body:text-left", "group-[[data-icons=false][data-orientation=vertical]]/details-card-body:col-start-1", className) }, props),
+		render,
+		state: { slot: "details-card-value" }
+	});
+}
+function DetailsCardChevronIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		fill: "none",
+		focusable: "false",
+		height: "12",
+		viewBox: "0 0 12 12",
+		width: "12",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4.5 2.5 8 6 4.5 9.5",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1.5"
+		})
+	});
+}
+//#endregion
+export { DetailsCard, DetailsCardBody, DetailsCardDescription, DetailsCardHeader, DetailsCardIcon, DetailsCardLabel, DetailsCardRow, DetailsCardRowGroup, DetailsCardTitle, DetailsCardValue };

package/dist/dialog.d.ts

@@ -1,30 +1,29 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/dialog.d.ts
 declare function Dialog({ ...props }: Dialog$1.Root.Props): React.JSX.Element;
 declare function DialogTrigger({ ...props }: Dialog$1.Trigger.Props): React.JSX.Element;
 declare function DialogPortal({ ...props }: Dialog$1.Portal.Props): React.JSX.Element;
 declare function DialogClose({ ...props }: Dialog$1.Close.Props): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: Dialog$1.Backdrop.Props): React.JSX.Element;
 declare const dialogContentVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const dialogIconVariants: (props?: ({
-    size?: "auto" | "sm" | "md" | "lg" | null | undefined;
-    tone?: "danger" | "brand" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "auto" | "lg" | "md" | "sm" | null | undefined;
+  tone?: "brand" | "danger" | "neutral" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type DialogContentProps = Dialog$1.Popup.Props & VariantProps<typeof dialogContentVariants> & {
-    showCloseButton?: boolean;
+  showCloseButton?: boolean;
 };
 declare function DialogContent({ className, children, size, showCloseButton, ...props }: DialogContentProps): React.JSX.Element;
 declare function DialogIcon({ className, size, tone, ...props }: React.ComponentProps<"div"> & VariantProps<typeof dialogIconVariants>): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
-    showCloseButton?: boolean;
+  showCloseButton?: boolean;
 }): React.JSX.Element;
 declare function DialogTitle({ className, ...props }: Dialog$1.Title.Props): React.JSX.Element;
 declare function DialogDescription({ className, ...props }: Dialog$1.Description.Props): React.JSX.Element;
-
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogContentVariants, dialogIconVariants };
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogContentVariants, dialogIconVariants };

package/dist/dialog.js

@@ -1,339 +1,136 @@
-// src/components/ui/dialog.tsx
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
-import { cva as cva2 } from "class-variance-authority";
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { Button } from "./button.js";
 import { XIcon } from "lucide-react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/button.tsx
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { Loader } from "lucide-react";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
-        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
-        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
-        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
-        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
-        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
-      },
-      size: {
-        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
-        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-10",
-        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
-        "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
-        "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "primary",
-  size,
-  isLoading = false,
-  children,
-  disabled = false,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const _disabled = disabled || isLoading;
-  return /* @__PURE__ */ jsxs(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
-      disabled: _disabled,
-      ...props,
-      children: [
-        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
-        " ",
-        children
-      ]
-    }
-  );
-}
-
-// src/components/ui/dialog.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/dialog.tsx
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx3(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		"data-slot": "dialog",
+		...props
+	});
 }
 function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx3(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx3(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
 }
 function DialogClose({ ...props }) {
-  return /* @__PURE__ */ jsx3(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
 }
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(
-    DialogPrimitive.Backdrop,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100 supports-backdrop-filter:backdrop-blur-xl",
-        className
-      ),
-      ...props
-    }
-  );
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: cn("fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100 supports-backdrop-filter:backdrop-blur-xl", className),
+		...props
+	});
 }
-var dialogContentVariants = cva2(
-  "group/dialog-content fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-5rem)] w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding p-(--dialog-padding) text-fg-primary shadow-(--elevation-e2-shadow) outline-none [--dialog-padding:1.25rem] transition-[opacity,transform] duration-200 ease-in-out data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-  {
-    variants: {
-      size: {
-        sm: "sm:w-90 sm:[--dialog-padding:1.5rem]",
-        md: "sm:w-105 sm:[--dialog-padding:1.5rem]",
-        lg: "sm:w-120 sm:[--dialog-padding:2rem]"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var dialogIconVariants = cva2(
-  "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      size: {
-        auto: "group-data-[size=sm]/dialog-content:size-10 group-data-[size=sm]/dialog-content:rounded-md group-data-[size=sm]/dialog-content:[&_svg:not([class*='size-'])]:size-6 group-data-[size=md]/dialog-content:size-12 group-data-[size=md]/dialog-content:rounded-[10px] group-data-[size=md]/dialog-content:[&_svg:not([class*='size-'])]:size-8 group-data-[size=lg]/dialog-content:size-14 group-data-[size=lg]/dialog-content:rounded-lg group-data-[size=lg]/dialog-content:[&_svg:not([class*='size-'])]:size-10",
-        sm: "size-10 rounded-md [&_svg:not([class*='size-'])]:size-6",
-        md: "size-12 rounded-[10px] [&_svg:not([class*='size-'])]:size-8",
-        lg: "size-14 rounded-lg [&_svg:not([class*='size-'])]:size-10"
-      },
-      tone: {
-        brand: "bg-surface-brand-subtle text-fg-brand",
-        danger: "bg-surface-danger-subtle text-status-danger",
-        neutral: "bg-surface-raised text-fg-primary"
-      }
-    },
-    defaultVariants: {
-      size: "auto",
-      tone: "brand"
-    }
-  }
-);
-function DialogContent({
-  className,
-  children,
-  size,
-  showCloseButton = true,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsxs2(DialogPortal, { children: [
-    /* @__PURE__ */ jsx3(DialogOverlay, {}),
-    /* @__PURE__ */ jsx3(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsxs2(
-      DialogPrimitive.Popup,
-      {
-        "data-slot": "dialog-content",
-        "data-size": resolvedSize,
-        className: cn(
-          dialogContentVariants({ size: resolvedSize }),
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsx3(
-            DialogPrimitive.Close,
-            {
-              "data-slot": "dialog-close",
-              render: /* @__PURE__ */ jsxs2(
-                Button,
-                {
-                  variant: "tertiary",
-                  className: "absolute -top-10 right-0 z-10",
-                  size: "icon-sm",
-                  children: [
-                    /* @__PURE__ */ jsx3(XIcon, {}),
-                    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
-                  ]
-                }
-              )
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
+const dialogContentVariants = cva("group/dialog-content fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-5rem)] w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding p-(--dialog-padding) text-fg-primary shadow-(--elevation-e2-shadow) outline-none [--dialog-padding:1.25rem] transition-[opacity,transform] duration-200 ease-in-out data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", {
+	variants: { size: {
+		sm: "sm:w-90 sm:[--dialog-padding:1.5rem]",
+		md: "sm:w-105 sm:[--dialog-padding:1.5rem]",
+		lg: "sm:w-120 sm:[--dialog-padding:2rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+const dialogIconVariants = cva("flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: {
+		size: {
+			auto: "group-data-[size=sm]/dialog-content:size-10 group-data-[size=sm]/dialog-content:rounded-md group-data-[size=sm]/dialog-content:[&_svg:not([class*='size-'])]:size-6 group-data-[size=md]/dialog-content:size-12 group-data-[size=md]/dialog-content:rounded-[10px] group-data-[size=md]/dialog-content:[&_svg:not([class*='size-'])]:size-8 group-data-[size=lg]/dialog-content:size-14 group-data-[size=lg]/dialog-content:rounded-lg group-data-[size=lg]/dialog-content:[&_svg:not([class*='size-'])]:size-10",
+			sm: "size-10 rounded-md [&_svg:not([class*='size-'])]:size-6",
+			md: "size-12 rounded-[10px] [&_svg:not([class*='size-'])]:size-8",
+			lg: "size-14 rounded-lg [&_svg:not([class*='size-'])]:size-10"
+		},
+		tone: {
+			brand: "bg-surface-brand-subtle text-fg-brand",
+			danger: "bg-surface-danger-subtle text-status-danger",
+			neutral: "bg-surface-raised text-fg-primary"
+		}
+	},
+	defaultVariants: {
+		size: "auto",
+		tone: "brand"
+	}
+});
+function DialogContent({ className, children, size, showCloseButton = true, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+			"data-slot": "dialog-content",
+			"data-size": resolvedSize,
+			className: cn(dialogContentVariants({ size: resolvedSize }), className),
+			...props,
+			children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
+				"data-slot": "dialog-close",
+				render: /* @__PURE__ */ jsxs(Button, {
+					variant: "tertiary",
+					className: "absolute -top-10 right-0 z-10",
+					size: "icon-sm",
+					children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Close"
+					})]
+				})
+			})]
+		})
+	})] });
 }
-function DialogIcon({
-  className,
-  size,
-  tone,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = !size || size === "auto" ? inheritedSize : size;
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      "data-slot": "dialog-icon",
-      className: cn(
-        dialogIconVariants({ size: resolvedSize, tone }),
-        className
-      ),
-      ...props
-    }
-  );
+function DialogIcon({ className, size, tone, ...props }) {
+	const inheritedSize = useComponentSize();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-icon",
+		className: cn(dialogIconVariants({
+			size: !size || size === "auto" ? inheritedSize : size,
+			tone
+		}), className),
+		...props
+	});
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-3", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-3", className),
+		...props
+	});
 }
-function DialogFooter({
-  className,
-  showCloseButton = false,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      "data-slot": "dialog-footer",
-      className: cn(
-        "mt-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end `**:data-[slot=button-link]:w-full **:data-[slot=button]:w-full sm:**:data-[slot=button-link]:w-auto sm:**:data-[slot=button]:w-auto",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        showCloseButton && /* @__PURE__ */ jsx3(
-          DialogPrimitive.Close,
-          {
-            render: /* @__PURE__ */ jsx3(Button, { variant: "tertiary-outline", children: "Close" })
-          }
-        )
-      ]
-    }
-  );
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		className: cn("mt-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end `**:data-[slot=button-link]:w-full **:data-[slot=button]:w-full sm:**:data-[slot=button-link]:w-auto sm:**:data-[slot=button]:w-auto", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { render: /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary-outline",
+			children: "Close"
+		}) })]
+	});
 }
 function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
-    DialogPrimitive.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn(
-        "text-gdt-h5 font-extrabold tracking-tight text-fg-primary",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-slot": "dialog-title",
+		className: cn("text-gdt-h5 font-extrabold tracking-tight text-fg-primary", className),
+		...props
+	});
 }
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(
-    DialogPrimitive.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn(
-        "text-gdt-sm text-fg-secondary *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-fg-primary",
-        className
-      ),
-      ...props
-    }
-  );
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-gdt-sm text-fg-secondary *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-fg-primary", className),
+		...props
+	});
 }
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogIcon,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-  dialogContentVariants,
-  dialogIconVariants
-};
-//# sourceMappingURL=dialog.js.map
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogContentVariants, dialogIconVariants };