@tpc-mare/mare-ui-components-react 0.1.0

package/dist/shared/Button-AfMqNCme.js

@@ -0,0 +1,177 @@
+import { jsxs as f, jsx as m } from "react/jsx-runtime";
+import { P as z } from "./ProgressSpinner-B-lrS-tu.js";
+const x = {
+  left: "mare:-order-1",
+  right: "mare:order-1",
+  top: "mare:-order-1",
+  bottom: "mare:order-1"
+}, k = {
+  primary: "mare:stroke-on-accent",
+  secondary: "mare:stroke-default",
+  ghost: "mare:stroke-default",
+  danger: "mare:stroke-on-danger",
+  neutral: "mare:stroke-default"
+}, w = (e) => e === "bordered" ? `mare:data-severity-neutral:border mare:data-severity-neutral:border-strong
+			mare:data-severity-ghost:border mare:data-severity-ghost:border-strong mare:not-p-disabled:data-severity-ghost:hover:bg-transparent` : `
+			mare:not-p-disabled:not-data-link:[&[data-severity~='ghost']:active]:bg-active
+			mare:not-p-disabled:not-data-link:[&[data-severity~='danger']:active]:bg-danger-active`, $ = (e, a) => `
+	mare:group/button
+	mare:relative
+	mare:rounded-button mare:flex mare:items-center mare:justify-center
+	mare:cursor-pointer mare-p-button
+	mare:active:duration-150 mare:transition-[cubic-bezier(0.2,0,0,1)]
+
+	mare:data-severity-primary:bg-accent mare:data-severity-primary:text-on-accent mare:data-severity-primary:stroke-on-accent!
+	mare:data-severity-primary:border mare:data-severity-primary:border-transparent mare:not-p-disabled:data-severity-primary:hover:bg-accent-hover
+	mare:data-severity-secondary:bg-transparent mare:data-severity-secondary:text-default
+	mare:data-severity-secondary:border mare:data-severity-secondary:border-strong mare:not-p-disabled:data-severity-secondary:hover:bg-hover
+	mare:data-severity-secondary:not-data-link:active:bg-active!
+	mare:data-severity-ghost:bg-transparent mare:not-p-disabled:data-severity-ghost:hover:bg-hover
+	mare:data-severity-ghost:text-default
+	mare:data-severity-ghost:border mare:data-severity-ghost:border-transparent
+	mare:not-p-disabled:data-severity-ghost:not-data-link:active:bg-active
+	mare:data-severity-danger:bg-danger
+	mare:data-severity-danger:border mare:data-severity-danger:border-transparent
+	mare:data-severity-danger:text-on-accent
+	mare:not-p-disabled:data-severity-danger:hover:bg-danger-hover
+
+	mare:not-p-disabled:not-data-link:[&[data-severity~='primary']:active]:bg-accent-active
+	mare:not-p-disabled:not-data-link:[&[data-severity~='secondary']:active]:bg-active
+	mare:not-p-disabled:not-data-link:[&[data-severity~='danger']:active]:bg-danger-active
+
+	mare:data-severity-neutral:bg-default mare:data-severity-neutral:text-default
+	${w(e)}
+	mare:data-size-small:py-2.5 mare:data-size-small:px-3.5 mare:data-size-small:gap-1
+	mare:data-size-small:icon-only:rounded:p-2.5 mare:data-size-small:h-10 mare:data-size-small:icon-only:w-10  mare:data-size-small:icon-only:min-w-10
+
+	mare:data-size-xsmall:py-1.5 mare:data-size-xsmall:px-3 mare:data-size-xsmall:gap-1
+	mare:data-size-xsmall:icon-only:rounded:p-2.5 mare:data-size-xsmall:h-8 mare:data-size-xsmall:icon-only:w-8  mare:data-size-xsmall:icon-only:min-w-8
+
+	mare:data-size-medium:py-2.5 mare:data-size-medium:px-5.5
+	mare:data-size-medium:gap-1.5
+	mare:data-size-medium:icon-only:rounded:p-3.5 mare:data-size-medium:h-12 mare:data-size-medium:icon-only:w-12 mare:data-size-medium:icon-only:min-w-12
+
+	mare:data-size-large:py-4 mare:data-size-large:px-5.5
+	mare:data-size-large:gap-1.5
+	mare:data-size-large:icon-only:rounded:p-1.5 mare:data-size-large:h-14 mare:data-size-large:icon-only:w-14 mare:data-size-large:icon-only:min-w-14
+
+	mare:p-active:scale-95
+	mare:p-active:shadow-[0_2px_8px_0_rgba(0,0,0,0.16)]
+	mare:p-disabled:cursor-not-allowed
+	mare:not-p-loading:p-disabled:text-disabled
+	mare:not-p-loading:p-disabled:data-severity-primary:bg-disabled
+	mare:not-p-loading:p-disabled:data-severity-danger:bg-disabled
+	mare:not-p-loading:p-disabled:data-severity-secondary:border
+	mare:not-p-loading:p-disabled:data-severity-secondary:border-disabled-default
+	mare:p-loading:cursor-wait
+	mare:icon-only:rounded-full!
+	mare:rounded:rounded-full
+	mare:p-raised:shadow-[0_4px_16px_0_rgba(0,0,0,0.16)]
+
+	mare:data-link:bg-transparent
+	mare:data-link:border-0
+	mare:data-link:text-default
+	mare:data-link:hover:bg-transparent!
+	mare:data-link:hover:text-default
+	mare:data-link:p-0!
+	mare:data-link:p-disabled:border-none!
+	mare:data-link:h-auto
+	mare:p-disabled:data-link:bg-transparent!
+
+	${a ? "mare-p-link" : ""}
+
+	mare:data-link:data-size-xsmall:h-auto
+	mare:data-link:data-size-xsmall:gap-1.5
+
+	mare:data-link:data-size-small:h-auto
+	mare:data-link:data-size-small:gap-1.5
+
+	mare:data-link:data-size-medium:h-auto
+	mare:data-link:data-size-medium:gap-2
+
+	mare:data-link:data-size-large:h-auto
+	mare:data-link:data-size-large:gap-2
+`, _ = "mare:relative mare:inline-block mare:no-underline! mare:after:content-[''] mare:after:absolute mare:after:left-0 mare:after:-bottom-[4px] mare:after:h-[1px] mare:after:w-full mare:after:bg-inverse mare:after:origin-left mare:after:scale-x-[1] mare:after:transform-gpu mare:after:will-change-transform mare:after:transition-transform mare:after:duration-[500ms] mare:after:ease-[cubic-bezier(0.19,1,0.22,1)] mare:hover:after:scale-x-0 mare:hover:after:origin-right", L = (e) => {
+  const { isLink: a, animateLink: r, hiddenLabel: s, loading: d } = e;
+  return `mare:relative
+		${a ? "mare:data-size-xsmall:tpc-typography-label-s-underline" : "mare:data-size-xsmall:tpc-typography-label-s"}
+		${a ? "mare:data-size-small:tpc-typography-label-s-underline" : "mare:data-size-small:tpc-typography-label-s"}
+		${a ? "mare:data-size-medium:tpc-typography-label-m-underline" : "mare:data-size-medium:tpc-typography-label-m"}
+		${a ? "mare:data-size-large:tpc-typography-label-m-underline" : "mare:data-size-large:tpc-typography-label-m"}
+		${r && a ? _ : ""}
+		${s ? "mare:hidden" : ""} ${a ? "" : "mare:px-0.5"} ${d ? "mare:opacity-0" : ""}
+	`;
+}, j = (e, a, r) => a ? e === "xsmall" || e === "small" ? "small" : "medium" : e === "xsmall" ? r ? "medium" : "small" : "medium", N = {
+  small: 16,
+  medium: 20
+};
+function S({
+  label: e,
+  severity: a = "primary",
+  size: r = "medium",
+  variant: s = "solid",
+  iconOnly: d = !1,
+  disabled: l = !1,
+  loading: t = !1,
+  link: c = !1,
+  linkAnimation: y = !1,
+  icon: n,
+  iconPos: g = "left",
+  children: o,
+  type: b = "button",
+  ...u
+}) {
+  const i = c, v = !!e || !!o, h = d && !!n, p = N[j(r, i, d)];
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      type: b,
+      className: $(s, i),
+      "data-severity": a,
+      "data-size": r,
+      "data-icon-only": d ? "true" : void 0,
+      "data-disabled": l ? "true" : void 0,
+      "data-loading": t ? "true" : void 0,
+      "data-link": i ? "true" : void 0,
+      disabled: l || t,
+      "aria-busy": t || void 0,
+      ...u,
+      children: [
+        t && /* @__PURE__ */ m("span", { className: "mare:absolute mare:inset-0 mare:flex mare:items-center mare:justify-center", children: /* @__PURE__ */ m(
+          z,
+          {
+            circleClass: k[a],
+            className: "mare:size-5"
+          }
+        ) }),
+        n && /* @__PURE__ */ m(
+          "span",
+          {
+            className: `mare:inline-flex mare:shrink-0 mare:items-center mare:justify-center mare:[&>svg]:size-full! ${x[g]} ${t ? "mare:opacity-0" : ""}`,
+            style: {
+              width: `${p}px`,
+              height: `${p}px`
+            },
+            "aria-hidden": "true",
+            children: n
+          }
+        ),
+        v && /* @__PURE__ */ m(
+          "span",
+          {
+            className: L({
+              isLink: i,
+              animateLink: y,
+              hiddenLabel: h,
+              loading: t
+            }),
+            children: o ?? e
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  S as B
+};

package/dist/shared/Checkbox-DsM70wQl.js

@@ -0,0 +1,134 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Checkbox as a } from "@ark-ui/react/checkbox";
+import { C as f, M as x } from "./icons-DeVfnVLm.js";
+const v = `
+	mare:group/checkbox
+	mare:relative mare:inline-flex mare:items-center mare:gap-2
+	mare:select-none mare:cursor-pointer
+	mare:ark-disabled:cursor-default
+	mare:data-size-small:gap-1.5
+	mare:data-size-medium:gap-2
+	mare:data-size-large:gap-2.5
+`, y = `
+	mare:relative mare:inline-flex mare:items-center mare:justify-center
+	mare:shrink-0
+	mare:border-[1.5px] mare:border-strong mare:rounded-checkbox
+	mare:bg-transparent
+	mare:transition-colors mare:duration-150
+
+	mare:data-size-small:w-4.5 mare:data-size-small:h-4.5 mare:data-size-small:min-w-4.5 mare:data-size-small:min-h-4.5
+	mare:data-size-medium:w-6 mare:data-size-medium:h-6 mare:data-size-medium:min-w-6 mare:data-size-medium:min-h-6
+	mare:data-size-large:w-8 mare:data-size-large:h-8 mare:data-size-large:min-w-8 mare:data-size-large:min-h-8
+
+	mare:ark-checked:bg-accent mare:ark-checked:border-accent
+	mare:ark-indeterminate:bg-accent mare:ark-indeterminate:border-accent
+
+	mare:not-ark-disabled:hover:border-accent
+	mare:not-ark-disabled:ark-checked:hover:bg-accent-hover
+	mare:not-ark-disabled:ark-indeterminate:hover:bg-accent-hover
+
+	mare:ark-disabled:border-disabled!
+	mare:ark-disabled:ark-checked:bg-disabled! mare:ark-disabled:ark-checked:border-disabled!
+	mare:ark-disabled:ark-indeterminate:bg-disabled! mare:ark-disabled:ark-indeterminate:border-disabled!
+
+	mare:ark-invalid:border-danger
+	mare:ark-invalid:ark-checked:bg-danger mare:ark-invalid:ark-checked:border-danger
+	mare:ark-invalid:ark-indeterminate:bg-danger mare:ark-invalid:ark-indeterminate:border-danger
+`, i = `
+	mare:flex mare:items-center mare:justify-center
+	mare:w-full mare:h-full
+	mare:text-on-accent
+	mare:ark-disabled:text-disabled!
+`, t = `
+	mare:data-size-small:w-4 mare:data-size-small:h-4
+	mare:data-size-medium:w-5 mare:data-size-medium:h-5
+	mare:data-size-large:w-7 mare:data-size-large:h-7
+`, w = `
+	mare:text-default
+	mare:data-size-small:tpc-typography-body-s
+	mare:data-size-medium:tpc-typography-body-m
+	mare:data-size-large:tpc-typography-body-l
+	mare:ark-disabled:text-disabled
+`, C = `
+	mare:sr-only
+`;
+function M({
+  checked: s,
+  defaultChecked: l,
+  onCheckedChange: n,
+  children: d,
+  size: r = "small",
+  disabled: c = !1,
+  invalid: o = !1,
+  readOnly: b = !1,
+  required: k = !1,
+  name: h,
+  value: g = "on",
+  form: z,
+  id: u
+}) {
+  return /* @__PURE__ */ m(
+    a.Root,
+    {
+      checked: s,
+      defaultChecked: l,
+      onCheckedChange: (p) => {
+        n?.({ checked: p.checked });
+      },
+      disabled: c,
+      invalid: o,
+      readOnly: b,
+      required: k,
+      name: h,
+      value: g,
+      form: z,
+      id: u,
+      className: v,
+      "data-size": r,
+      children: [
+        /* @__PURE__ */ m(
+          a.Control,
+          {
+            className: y,
+            "data-size": r,
+            children: [
+              /* @__PURE__ */ e(a.Indicator, { className: i, children: /* @__PURE__ */ e(
+                f,
+                {
+                  className: t,
+                  "data-size": r
+                }
+              ) }),
+              /* @__PURE__ */ e(
+                a.Indicator,
+                {
+                  indeterminate: !0,
+                  className: i,
+                  children: /* @__PURE__ */ e(
+                    x,
+                    {
+                      className: t,
+                      "data-size": r
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        d && /* @__PURE__ */ e(
+          a.Label,
+          {
+            className: w,
+            "data-size": r,
+            children: d
+          }
+        ),
+        /* @__PURE__ */ e(a.HiddenInput, { className: C })
+      ]
+    }
+  );
+}
+export {
+  M as C
+};

package/dist/shared/Combobox-DeUG_muZ.js

@@ -0,0 +1,134 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { useState as T, useMemo as b } from "react";
+import { createListCollection as V, ComboboxRoot as _, ComboboxLabel as j, ComboboxControl as $, ComboboxTrigger as q, ComboboxClearTrigger as D, ComboboxPositioner as E, ComboboxContent as M, ComboboxInput as O, ComboboxEmpty as P, ComboboxItem as Q, ComboboxItemText as R, ComboboxItemIndicator as z } from "@ark-ui/react/combobox";
+import { a as A, b as B, S as F, C as G } from "./icons-DeVfnVLm.js";
+const H = {
+  small: "mare:h-10",
+  medium: "mare:h-12"
+}, f = {
+  small: "mare:tpc-typography-body-s",
+  medium: "mare:tpc-typography-body-m"
+}, J = (r) => `
+	mare:relative mare:flex mare:items-center mare:gap-2
+	${H[r]}
+	mare:px-3 mare:rounded-input mare:border mare:border-strong mare:bg-default
+	mare:focus-within:outline-solid mare:focus-within:outline-2 mare:focus-within:outline-accent mare:focus-within:-outline-offset-2
+	mare:ark-disabled:text-disabled mare:ark-disabled:border-disabled-default mare:ark-disabled:cursor-not-allowed
+	mare:data-[invalid]:outline-solid mare:data-[invalid]:outline-2 mare:data-[invalid]:outline-danger mare:data-[invalid]:-outline-offset-2
+`, p = "mare:flex mare:items-center mare:shrink-0 mare:text-weak mare:[&>svg]:size-5", K = (r) => `
+	mare:flex-auto mare:flex mare:items-center mare:cursor-pointer
+	mare:bg-transparent mare:text-left mare:truncate mare:text-default ${f[r]}
+`, U = `
+	mare:flex mare:items-center mare:gap-2 mare:mb-1 mare:px-3 mare:h-10
+	mare:rounded-input mare:border mare:border-strong mare:bg-default
+	mare:focus-within:outline-solid mare:focus-within:outline-2 mare:focus-within:outline-accent mare:focus-within:-outline-offset-2
+`, W = (r) => `
+	mare:flex-auto mare:bg-transparent mare:outline-none mare:text-default
+	mare:placeholder:text-weak ${f[r]}
+`, X = "mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:text-default mare:hover:text-weak", Y = "mare:flex mare:items-center mare:shrink-0 mare:text-lg mare:transition-transform mare:ark-open:rotate-180 mare:text-default", Z = `
+	mare:flex mare:flex-col mare:gap-0.5 mare:p-1
+	mare:rounded-input mare:border mare:border-default mare:bg-raised
+	mare:shadow-[0_2px_6px_0_rgba(0,0,0,0.16)]
+	mare:max-h-72 mare:overflow-y-auto
+	mare:min-w-[var(--reference-width)]
+	mare:z-50
+`, ee = `
+	mare:group/option mare:flex mare:items-center mare:justify-between mare:gap-2
+	mare:w-full mare:min-h-8 mare:py-2 mare:px-3 mare:cursor-pointer mare:rounded-menu-item
+	mare:tpc-typography-body-s mare:text-default
+	mare:ark-highlighted:bg-hover
+	mare:ark-selected:bg-accent-weak mare:ark-selected:text-accent
+	mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed
+`, ae = "mare:flex mare:items-center mare:text-accent", re = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak", te = "mare:tpc-typography-label-s mare:text-weak mare:mb-1.5 mare:block";
+function ie({
+  value: r = null,
+  onValueChange: h,
+  options: m,
+  placeholder: x = "Select…",
+  searchPlaceholder: g = "",
+  size: o = "small",
+  disabled: C = !1,
+  invalid: w = !1,
+  clearable: k = !1,
+  emptyText: y = "Sin resultados",
+  label: i,
+  leadingIcon: s,
+  triggerIcon: v,
+  checkIcon: N,
+  clearIcon: I,
+  renderOption: c
+}) {
+  const [l, d] = T(""), n = b(() => {
+    const e = l.trim().toLowerCase();
+    return e ? m.filter((L) => L.label.toLowerCase().includes(e)) : m;
+  }, [l, m]), S = b(
+    () => V({
+      items: n,
+      itemToValue: (e) => e.value,
+      itemToString: (e) => e.label,
+      isItemDisabled: (e) => !!e.disabled
+    }),
+    [n]
+  ), u = m.find((e) => e.value === r)?.label ?? null;
+  return /* @__PURE__ */ t(
+    _,
+    {
+      collection: S,
+      value: r == null ? [] : [r],
+      disabled: C,
+      invalid: w,
+      openOnClick: !0,
+      inputValue: l,
+      onValueChange: (e) => h?.(e.value[0] ?? null),
+      onInputValueChange: (e) => {
+        e.reason === "input-change" && d(e.inputValue);
+      },
+      onOpenChange: (e) => {
+        e.open || d("");
+      },
+      children: [
+        i && /* @__PURE__ */ a(j, { className: te, children: i }),
+        /* @__PURE__ */ t($, { className: J(o), children: [
+          s && /* @__PURE__ */ a("span", { className: p, children: s }),
+          /* @__PURE__ */ a(q, { className: K(o), children: u ? /* @__PURE__ */ a("span", { children: u }) : /* @__PURE__ */ a("span", { className: "mare:text-weak", children: x }) }),
+          k && /* @__PURE__ */ a(D, { className: X, children: I ?? /* @__PURE__ */ a(A, {}) }),
+          /* @__PURE__ */ a("span", { className: Y, children: v ?? /* @__PURE__ */ a(B, {}) })
+        ] }),
+        /* @__PURE__ */ a(E, { children: /* @__PURE__ */ t(M, { className: Z, children: [
+          /* @__PURE__ */ t("div", { className: U, children: [
+            /* @__PURE__ */ a(
+              O,
+              {
+                placeholder: g,
+                className: W(o)
+              }
+            ),
+            /* @__PURE__ */ a("span", { className: p, children: /* @__PURE__ */ a(F, {}) })
+          ] }),
+          /* @__PURE__ */ a(P, { className: re, children: y }),
+          n.map((e) => /* @__PURE__ */ t(
+            Q,
+            {
+              item: e,
+              className: ee,
+              children: [
+                /* @__PURE__ */ a(R, { children: c ? c(e) : e.label }),
+                /* @__PURE__ */ a(
+                  z,
+                  {
+                    className: ae,
+                    children: N ?? /* @__PURE__ */ a(G, {})
+                  }
+                )
+              ]
+            },
+            e.value
+          ))
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  ie as C
+};

package/dist/shared/DialogFooter-DLWy6Mln.js

@@ -0,0 +1,154 @@
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { Dialog as o } from "@ark-ui/react/dialog";
+import { Portal as w } from "@ark-ui/react/portal";
+import { B as n } from "./Button-AfMqNCme.js";
+import { c as _ } from "./icons-DeVfnVLm.js";
+const k = (e) => `
+	mare:fixed mare:inset-0 mare:z-40
+	${e ?? "mare:bg-overlay"}
+	mare:ark-open:[animation:mare-dialog-backdrop-enter_300ms_ease-out]
+	mare:ark-closed:[animation:mare-dialog-backdrop-exit_200ms_ease-in]
+`, y = `
+	mare:fixed mare:inset-0 mare:z-50
+	mare:flex mare:items-center mare:justify-center
+	mare:overflow-y-auto mare:px-0 mare:sm:px-10
+`, v = {
+  small: "mare:sm:w-[28rem] mare:sm:max-w-[28rem]",
+  medium: "mare:sm:w-[42rem] mare:sm:max-w-[42rem]",
+  large: "mare:sm:w-[64rem] mare:sm:max-w-[64rem]"
+}, N = (e) => `
+	mare:group/dialog mare:flex mare:flex-col
+	mare:w-full mare:max-w-full mare:max-w-screen ${v[e.size]}
+	mare:bg-default mare:text-default
+	mare:shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.10),0px_4px_6px_-2px_rgba(0,0,0,0.05)]
+	mare:fixed mare:sm:relative mare:bottom-0 mare:sm:bottom-auto mare:left-0 mare:sm:left-auto mare:right-0 mare:sm:right-auto
+	mare:rounded-t-tpc-sheet mare:sm:rounded-tpc-dialog
+	mare:max-h-[calc(100%-32px)] mare:sm:max-h-[calc(100%-80px)]
+	mare:outline-none
+	mare:ark-open:[animation:mare-dialog-enter-mobile_300ms_ease-out]
+	mare:ark-closed:[animation:mare-dialog-exit-mobile_200ms_ease-in]
+	mare:sm:ark-open:[animation:mare-dialog-enter-desktop_300ms_ease-out]
+	mare:sm:ark-closed:[animation:mare-dialog-exit-desktop_200ms_ease-in]
+	${e.fullScreen ? "mare:top-0 mare:rounded-t-none! mare:sm:rounded-tpc-dialog! mare:sm:top-auto mare:max-h-full mare:sm:max-h-[calc(100%-80px)]" : ""}
+`, $ = (e) => `
+	mare:overflow-y-auto mare:px-6 mare:pb-6
+	${e ? "mare:grow" : ""}
+`, C = (e) => `
+	mare:flex mare:w-full mare:items-center mare:justify-between mare:shrink-0
+	mare:h-14 mare:sm:h-16 mare:px-6
+	${e ? "mare:border-b mare:border-default" : ""}
+`, z = "mare:-ml-1.5", D = "mare:-mr-1.5", d = (e) => `
+	mare:grow mare:w-full mare:truncate mare:text-center
+	mare:tpc-typography-label-m mare:text-default
+	${e.hasRightIcon ? "" : "mare:mr-6.5"}
+	${e.hasLeftIcon ? "" : "mare:ml-6.5"}
+`, O = (e) => `
+	mare:flex mare:flex-col-reverse mare:gap-3 mare:justify-end mare:w-full
+	mare:px-6 mare:pb-4 mare:sm:pb-6
+	${e.layout === "row" ? "mare:sm:flex-row" : ""}
+	${e.border ? "mare:pt-3 mare:sm:pt-6 mare:border-t mare:border-t-default" : "mare:pt-0"}
+`;
+function P({
+  open: e,
+  onOpenChange: r,
+  size: m = "medium",
+  fullScreen: t = !1,
+  modal: s = !0,
+  closeOnEscape: l = !0,
+  dismissableMask: c = !0,
+  maskColor: u,
+  portalContainer: p,
+  header: x,
+  footer: f,
+  children: g,
+  "aria-label": h
+}) {
+  return /* @__PURE__ */ a(
+    o.Root,
+    {
+      open: e,
+      onOpenChange: (b) => r?.(b.open),
+      modal: s,
+      closeOnEscape: l,
+      closeOnInteractOutside: c,
+      "aria-label": h,
+      lazyMount: !0,
+      unmountOnExit: !0,
+      children: /* @__PURE__ */ i(w, { container: p, children: [
+        /* @__PURE__ */ a(o.Backdrop, { className: k(u) }),
+        /* @__PURE__ */ a(o.Positioner, { className: y, children: /* @__PURE__ */ i(
+          o.Content,
+          {
+            className: N({ size: m, fullScreen: t }),
+            children: [
+              x,
+              /* @__PURE__ */ a("div", { className: $(t), children: g }),
+              f
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function T({
+  title: e,
+  leftIcon: r = /* @__PURE__ */ a(_, {}),
+  rightIcon: m,
+  onLeftIconClick: t,
+  onRightIconClick: s,
+  border: l = !1
+}) {
+  return /* @__PURE__ */ i("div", { className: C(l), children: [
+    r ? /* @__PURE__ */ a("div", { className: z, children: /* @__PURE__ */ a(o.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ a(
+      n,
+      {
+        severity: "ghost",
+        iconOnly: !0,
+        size: "xsmall",
+        icon: r,
+        onClick: t
+      }
+    ) }) }) : null,
+    e ? /* @__PURE__ */ a(
+      o.Title,
+      {
+        className: d({
+          hasLeftIcon: !!r,
+          hasRightIcon: !!m
+        }),
+        children: e
+      }
+    ) : /* @__PURE__ */ a(
+      "span",
+      {
+        className: d({
+          hasLeftIcon: !!r,
+          hasRightIcon: !!m
+        })
+      }
+    ),
+    m ? /* @__PURE__ */ a("div", { className: D, children: /* @__PURE__ */ a(
+      n,
+      {
+        severity: "ghost",
+        iconOnly: !0,
+        size: "xsmall",
+        icon: m,
+        onClick: s
+      }
+    ) }) : null
+  ] });
+}
+function E({
+  layout: e = "row",
+  border: r = !1,
+  children: m
+}) {
+  return /* @__PURE__ */ a("div", { className: O({ layout: e, border: r }), children: m });
+}
+export {
+  P as D,
+  E as a,
+  T as b
+};