mada-design-system 0.5.10 → 0.5.12

package/index.es85.js

@@ -1,81 +1,6 @@
-import { clsx as s } from "./index.es102.js";
-import a from "./index.es119.js";
-import u from "./index.es176.js";
-import { strings as c } from "./index.es97.js";
-import { DateFormat as i } from "./index.es152.js";
-import l from "./index.es89.js";
-import { extendTailwindMerge as m } from "./index.es177.js";
-import { useToast as d } from "./index.es79.js";
-const g = m({
-  classGroups: {
-    "font-size": ["text-caption-01", "text-caption-02", "text-subtitle-01", "text-subtitle-02", "text-body-01", "text-body-02"]
-  }
-});
-function $(...t) {
-  return g(s(t));
-}
-const S = {
-  enRegex: /^[a-zA-Z- ]+$/,
-  arRegex: /^[\u0621-\u064A- ]+$/,
-  bothArAndEnRegexonlyLetters: /^[a-zA-Z-\u0621-\u064A ]+$/,
-  bothArAndEnRegexonlyLettersAndNumbers: /^[a-zA-Z0-9-\u0621-\u064A ]+$/,
-  enletterAndNumbersRegex: /^[a-zA-Z0-9]*$/,
-  mobileNumber: /^(5)(\d){8}$/,
-  TelPhone: /^(0096611)(\d){7}$/,
-  nationalId: /^1(\d){9}$/,
-  nationalOrResidentId: /^[12](\d){9}$/,
-  nonSaudianNationalId: /^2(\d){9}$/,
-  tags: /<[^>]*>?/gm,
-  specialCharcter: /[!@#$%^&*()_+\-'~<>/\\?|÷×]/,
-  arSpaceRegex: /^[\u0621-\u064A\s]+$/
-}, M = (t, e) => (!/^[0-9\u0660-\u0669]+$/.test(t.target.value) && t.target.value !== "" && (t.target.value = e), t.target.value = t.target.value.replace(/[٠١٢٣٤٥٦٧٨٩]/g, (n) => String(n.charCodeAt(0) - 1632)).replace(/[۰۱۲۳۴۵۶۷۸۹]/g, (n) => String(n.charCodeAt(0) - 1776)), t), w = (...t) => t.map(
-  (e) => e.split(" ").map((r) => process.env.NODE_ENV === "production" ? `er-${r}` : r).join(" ")
-).join(" "), y = () => {
-  const { lang: t } = l((e) => e);
-  return (e = "", r = "") => String(t).toLocaleLowerCase() === "ar" ? e : r || e;
-};
-function T(t, e) {
-  let r = null;
-  return function(...n) {
-    const o = () => {
-      r = null, t.apply(this, n);
-    };
-    r !== null && clearTimeout(r), r = setTimeout(o, e);
-  };
-}
-const v = (t) => new Intl.DateTimeFormat(t === "rtl" ? "ar" : "en", { day: "2-digit", month: "short", year: "numeric" }), R = (t) => new Intl.DateTimeFormat(t === "rtl" ? "ar" : "en", { timeStyle: "short" }), L = ({
-  date: t,
-  format: e,
-  isHijri: r = !1,
-  hasHijriFormat: n
-}) => {
-  const o = document.dir === "rtl";
-  switch (a.updateLocale(o ? "ar-sa" : "en", {}), e) {
-    case "short":
-      return a(t).format(o ? i.ArShort : i.EnShort);
-    case "mid":
-      return a(t).format("dddd");
-    case "long":
-      return r ? u(t, n ? "iDD/iMM/iYYYY" : void 0).format(o ? "iYYYY/iM/iD" : "iD/iM/iYYYY") : a(new Date(t ?? ""), "DD-MM-YYYY").format(o ? "YYYY/M/D" : "D/M/YYYY");
-  }
-}, N = (t) => {
-  const { toast: e } = d();
-  navigator.clipboard.writeText(t).then(() => {
-    e({
-      description: c.Shared.CopiedSuccessfully
-    });
-  });
-};
+import t from "react";
+import { AuthContext as o } from "./index.es92.js";
+const u = () => t.useContext(o);
 export {
-  $ as cn,
-  L as dateFormatter,
-  T as debounce,
-  v as formatter,
-  R as formatterTime,
-  M as handleArabicNumbers,
-  S as langRegex,
-  w as tw,
-  g as twMerge,
-  N as useShareLink,
-  y as useSwitchData
+  u as useOIDCAuth
 };

package/index.es86.js

@@ -1,34 +1,81 @@
-import { create as s } from "./index.es166.js";
-import f from "./index.es88.js";
-const m = ({ state: e }) => {
-  var o, i, n, t, l, r;
-  e.isDesktop && Number((o = e.fontSize) == null ? void 0 : o.substring(0, e.fontSize.length - 2)) < 12 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} + 1px)`), e.fontSize = (i = getComputedStyle(document.documentElement)) == null ? void 0 : i.getPropertyValue("font-size"), e.isMax = Number((n = e.fontSize) == null ? void 0 : n.substring(0, e.fontSize.length - 2)) >= 12, e.isMin = !1), !e.isDesktop && Number((t = e.fontSize) == null ? void 0 : t.substring(0, e.fontSize.length - 2)) < 10.2 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} + 0.7px)`), e.fontSize = (l = getComputedStyle(document.documentElement)) == null ? void 0 : l.getPropertyValue("font-size"), e.isMax = Number((r = e.fontSize) == null ? void 0 : r.substring(0, e.fontSize.length - 2)) >= 10.2, e.isMin = !1);
-}, c = ({ state: e }) => {
-  var o, i, n, t, l, r;
-  e.isDesktop && Number((o = e.fontSize) == null ? void 0 : o.substring(0, e.fontSize.length - 2)) > 8 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} - 1px)`), e.fontSize = (i = getComputedStyle(document.documentElement)) == null ? void 0 : i.getPropertyValue("font-size"), e.isMin = Number((n = e.fontSize) == null ? void 0 : n.substring(0, e.fontSize.length - 2)) <= 8, e.isMax = !1), !e.isDesktop && Number((t = e.fontSize) == null ? void 0 : t.substring(0, e.fontSize.length - 2)) > 7.4 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} - 0.7px)`), e.fontSize = (l = getComputedStyle(document.documentElement)) == null ? void 0 : l.getPropertyValue("font-size"), e.isMin = Number((r = e.fontSize) == null ? void 0 : r.substring(0, e.fontSize.length - 2)) <= 7.4, e.isMax = !1);
-}, u = s()(
-  f(
-    (e) => ({
-      isActive: !!localStorage.getItem("Colors"),
-      toggleColors: () => e((o) => (o.isActive ? localStorage.removeItem("Colors") : localStorage.setItem("Colors", "true"), { isActive: !o.isActive })),
-      isDesktop: window.innerWidth >= 640 || !1,
-      fontSize: window.innerWidth >= 640 ? "10px" : "8.8px",
-      isMax: !1,
-      isMin: !1,
-      increaseSize: () => e((o) => {
-        m({ state: o });
-      }),
-      decreaseSize: () => e((o) => {
-        c({ state: o });
-      }),
-      defaultSize: () => e((o) => {
-        var i;
-        o.isDesktop ? document.documentElement.style.setProperty("font-size", "10px") : document.documentElement.style.setProperty("font-size", "8.8px"), o.fontSize = (i = getComputedStyle(document.documentElement)) == null ? void 0 : i.getPropertyValue("font-size"), o.isMax = !1, o.isMin = !1;
-      })
-    }),
-    { name: "accessibilityTools" }
-  )
-), d = u;
+import { clsx as s } from "./index.es128.js";
+import a from "./index.es118.js";
+import u from "./index.es176.js";
+import { strings as c } from "./index.es98.js";
+import { DateFormat as i } from "./index.es152.js";
+import l from "./index.es90.js";
+import { extendTailwindMerge as m } from "./index.es177.js";
+import { useToast as d } from "./index.es80.js";
+const g = m({
+  classGroups: {
+    "font-size": ["text-caption-01", "text-caption-02", "text-subtitle-01", "text-subtitle-02", "text-body-01", "text-body-02"]
+  }
+});
+function $(...t) {
+  return g(s(t));
+}
+const S = {
+  enRegex: /^[a-zA-Z- ]+$/,
+  arRegex: /^[\u0621-\u064A- ]+$/,
+  bothArAndEnRegexonlyLetters: /^[a-zA-Z-\u0621-\u064A ]+$/,
+  bothArAndEnRegexonlyLettersAndNumbers: /^[a-zA-Z0-9-\u0621-\u064A ]+$/,
+  enletterAndNumbersRegex: /^[a-zA-Z0-9]*$/,
+  mobileNumber: /^(5)(\d){8}$/,
+  TelPhone: /^(0096611)(\d){7}$/,
+  nationalId: /^1(\d){9}$/,
+  nationalOrResidentId: /^[12](\d){9}$/,
+  nonSaudianNationalId: /^2(\d){9}$/,
+  tags: /<[^>]*>?/gm,
+  specialCharcter: /[!@#$%^&*()_+\-'~<>/\\?|÷×]/,
+  arSpaceRegex: /^[\u0621-\u064A\s]+$/
+}, M = (t, e) => (!/^[0-9\u0660-\u0669]+$/.test(t.target.value) && t.target.value !== "" && (t.target.value = e), t.target.value = t.target.value.replace(/[٠١٢٣٤٥٦٧٨٩]/g, (n) => String(n.charCodeAt(0) - 1632)).replace(/[۰۱۲۳۴۵۶۷۸۹]/g, (n) => String(n.charCodeAt(0) - 1776)), t), w = (...t) => t.map(
+  (e) => e.split(" ").map((r) => process.env.NODE_ENV === "production" ? `er-${r}` : r).join(" ")
+).join(" "), y = () => {
+  const { lang: t } = l((e) => e);
+  return (e = "", r = "") => String(t).toLocaleLowerCase() === "ar" ? e : r || e;
+};
+function T(t, e) {
+  let r = null;
+  return function(...n) {
+    const o = () => {
+      r = null, t.apply(this, n);
+    };
+    r !== null && clearTimeout(r), r = setTimeout(o, e);
+  };
+}
+const v = (t) => new Intl.DateTimeFormat(t === "rtl" ? "ar" : "en", { day: "2-digit", month: "short", year: "numeric" }), R = (t) => new Intl.DateTimeFormat(t === "rtl" ? "ar" : "en", { timeStyle: "short" }), L = ({
+  date: t,
+  format: e,
+  isHijri: r = !1,
+  hasHijriFormat: n
+}) => {
+  const o = document.dir === "rtl";
+  switch (a.updateLocale(o ? "ar-sa" : "en", {}), e) {
+    case "short":
+      return a(t).format(o ? i.ArShort : i.EnShort);
+    case "mid":
+      return a(t).format("dddd");
+    case "long":
+      return r ? u(t, n ? "iDD/iMM/iYYYY" : void 0).format(o ? "iYYYY/iM/iD" : "iD/iM/iYYYY") : a(new Date(t ?? ""), "DD-MM-YYYY").format(o ? "YYYY/M/D" : "D/M/YYYY");
+  }
+}, N = (t) => {
+  const { toast: e } = d();
+  navigator.clipboard.writeText(t).then(() => {
+    e({
+      description: c.Shared.CopiedSuccessfully
+    });
+  });
+};
 export {
-  d as default
+  $ as cn,
+  L as dateFormatter,
+  T as debounce,
+  v as formatter,
+  R as formatterTime,
+  M as handleArabicNumbers,
+  S as langRegex,
+  w as tw,
+  g as twMerge,
+  N as useShareLink,
+  y as useSwitchData
 };

package/index.es87.js

@@ -1,50 +1,34 @@
-import { create as r } from "./index.es166.js";
-import m from "./index.es88.js";
-const i = r()(
-  m(
-    (a) => ({
-      isAuthenticated: !!localStorage.getItem("nationalId") && !!localStorage.getItem("accessToken"),
-      accessToken: localStorage.getItem("accessToken") || void 0,
-      refreshToken: localStorage.getItem("refreshToken") || void 0,
-      nationalId: localStorage.getItem("nationalId"),
-      sessionExpired: !1,
-      user: {
-        firstName: "",
-        secondName: "",
-        thridName: "",
-        lastName: "",
-        Id: "",
-        roles: [],
-        email: "",
-        ssoEmail: "",
-        defaultRole: localStorage.getItem("defaultRole")
-      },
-      login: (e) => a(() => (localStorage.setItem("nationalId", e), { isAuthenticated: !0, nationalId: e, sessionExpired: !1 })),
-      setUser: (e) => a(() => (e.defaultRole && localStorage.setItem("defaultRole", e.defaultRole), localStorage.setItem("displayName", `${e.firstName} ${e.lastName}`), { user: e })),
-      updateUser: (e) => a((o) => (e.defaultRole && localStorage.setItem("defaultRole", e.defaultRole), e.firstName && e.lastName && localStorage.setItem("displayName", `${e.firstName} ${e.lastName}`), { user: { ...o == null ? void 0 : o.user, ...e } })),
-      logout: () => a((e) => {
-        var o, l;
-        return localStorage.removeItem("nationalId"), localStorage.removeItem("accessToken"), localStorage.removeItem("refreshToken"), localStorage.removeItem("displayName"), localStorage.removeItem("defaultRole"), localStorage.removeItem("jwt"), localStorage.removeItem("ERAlertHidden"), localStorage.removeItem("registrationStartDate"), localStorage.removeItem("registrationEndDate"), (l = (o = e == null ? void 0 : e.user) == null ? void 0 : o.roles) == null || l.map((t) => {
-          localStorage.removeItem(`${t}-evaluationCounter`), localStorage.removeItem(`${t}-evaluationSkipCounter`), localStorage.removeItem(`${t}-onBoardingSkipCounter`);
-        }), localStorage.removeItem("email"), {
-          isAuthenticated: !1,
-          nationalId: void 0,
-          user: { roles: [] },
-          accessToken: void 0,
-          refreshToken: void 0,
-          sessionExpired: !1
-        };
+import { create as s } from "./index.es166.js";
+import f from "./index.es89.js";
+const m = ({ state: e }) => {
+  var o, i, n, t, l, r;
+  e.isDesktop && Number((o = e.fontSize) == null ? void 0 : o.substring(0, e.fontSize.length - 2)) < 12 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} + 1px)`), e.fontSize = (i = getComputedStyle(document.documentElement)) == null ? void 0 : i.getPropertyValue("font-size"), e.isMax = Number((n = e.fontSize) == null ? void 0 : n.substring(0, e.fontSize.length - 2)) >= 12, e.isMin = !1), !e.isDesktop && Number((t = e.fontSize) == null ? void 0 : t.substring(0, e.fontSize.length - 2)) < 10.2 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} + 0.7px)`), e.fontSize = (l = getComputedStyle(document.documentElement)) == null ? void 0 : l.getPropertyValue("font-size"), e.isMax = Number((r = e.fontSize) == null ? void 0 : r.substring(0, e.fontSize.length - 2)) >= 10.2, e.isMin = !1);
+}, c = ({ state: e }) => {
+  var o, i, n, t, l, r;
+  e.isDesktop && Number((o = e.fontSize) == null ? void 0 : o.substring(0, e.fontSize.length - 2)) > 8 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} - 1px)`), e.fontSize = (i = getComputedStyle(document.documentElement)) == null ? void 0 : i.getPropertyValue("font-size"), e.isMin = Number((n = e.fontSize) == null ? void 0 : n.substring(0, e.fontSize.length - 2)) <= 8, e.isMax = !1), !e.isDesktop && Number((t = e.fontSize) == null ? void 0 : t.substring(0, e.fontSize.length - 2)) > 7.4 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} - 0.7px)`), e.fontSize = (l = getComputedStyle(document.documentElement)) == null ? void 0 : l.getPropertyValue("font-size"), e.isMin = Number((r = e.fontSize) == null ? void 0 : r.substring(0, e.fontSize.length - 2)) <= 7.4, e.isMax = !1);
+}, u = s()(
+  f(
+    (e) => ({
+      isActive: !!localStorage.getItem("Colors"),
+      toggleColors: () => e((o) => (o.isActive ? localStorage.removeItem("Colors") : localStorage.setItem("Colors", "true"), { isActive: !o.isActive })),
+      isDesktop: window.innerWidth >= 640 || !1,
+      fontSize: window.innerWidth >= 640 ? "10px" : "8.8px",
+      isMax: !1,
+      isMin: !1,
+      increaseSize: () => e((o) => {
+        m({ state: o });
       }),
-      setExpireSession: () => a(() => ({
-        sessionExpired: !0
-      })),
-      setDefaultRole: (e) => a((o) => {
-        e && (o != null && o.user) && (localStorage.setItem("defaultRole", e), o.user.defaultRole = e);
+      decreaseSize: () => e((o) => {
+        c({ state: o });
+      }),
+      defaultSize: () => e((o) => {
+        var i;
+        o.isDesktop ? document.documentElement.style.setProperty("font-size", "10px") : document.documentElement.style.setProperty("font-size", "8.8px"), o.fontSize = (i = getComputedStyle(document.documentElement)) == null ? void 0 : i.getPropertyValue("font-size"), o.isMax = !1, o.isMin = !1;
       })
     }),
-    { name: "auth" }
+    { name: "accessibilityTools" }
   )
-), c = i;
+), d = u;
 export {
-  c as default
+  d as default
 };

package/index.es88.js

@@ -1,10 +1,50 @@
-import { devtools as t } from "./index.es178.js";
-import { immer as s } from "./index.es179.js";
-const l = {
-  name: "Store",
-  enabled: !0,
-  serialize: { options: !1 }
-}, r = (e, o = l) => t(s(e), o), i = r;
+import { create as r } from "./index.es166.js";
+import m from "./index.es89.js";
+const i = r()(
+  m(
+    (a) => ({
+      isAuthenticated: !!localStorage.getItem("nationalId") && !!localStorage.getItem("accessToken"),
+      accessToken: localStorage.getItem("accessToken") || void 0,
+      refreshToken: localStorage.getItem("refreshToken") || void 0,
+      nationalId: localStorage.getItem("nationalId"),
+      sessionExpired: !1,
+      user: {
+        firstName: "",
+        secondName: "",
+        thridName: "",
+        lastName: "",
+        Id: "",
+        roles: [],
+        email: "",
+        ssoEmail: "",
+        defaultRole: localStorage.getItem("defaultRole")
+      },
+      login: (e) => a(() => (localStorage.setItem("nationalId", e), { isAuthenticated: !0, nationalId: e, sessionExpired: !1 })),
+      setUser: (e) => a(() => (e.defaultRole && localStorage.setItem("defaultRole", e.defaultRole), localStorage.setItem("displayName", `${e.firstName} ${e.lastName}`), { user: e })),
+      updateUser: (e) => a((o) => (e.defaultRole && localStorage.setItem("defaultRole", e.defaultRole), e.firstName && e.lastName && localStorage.setItem("displayName", `${e.firstName} ${e.lastName}`), { user: { ...o == null ? void 0 : o.user, ...e } })),
+      logout: () => a((e) => {
+        var o, l;
+        return localStorage.removeItem("nationalId"), localStorage.removeItem("accessToken"), localStorage.removeItem("refreshToken"), localStorage.removeItem("displayName"), localStorage.removeItem("defaultRole"), localStorage.removeItem("jwt"), localStorage.removeItem("ERAlertHidden"), localStorage.removeItem("registrationStartDate"), localStorage.removeItem("registrationEndDate"), (l = (o = e == null ? void 0 : e.user) == null ? void 0 : o.roles) == null || l.map((t) => {
+          localStorage.removeItem(`${t}-evaluationCounter`), localStorage.removeItem(`${t}-evaluationSkipCounter`), localStorage.removeItem(`${t}-onBoardingSkipCounter`);
+        }), localStorage.removeItem("email"), {
+          isAuthenticated: !1,
+          nationalId: void 0,
+          user: { roles: [] },
+          accessToken: void 0,
+          refreshToken: void 0,
+          sessionExpired: !1
+        };
+      }),
+      setExpireSession: () => a(() => ({
+        sessionExpired: !0
+      })),
+      setDefaultRole: (e) => a((o) => {
+        e && (o != null && o.user) && (localStorage.setItem("defaultRole", e), o.user.defaultRole = e);
+      })
+    }),
+    { name: "auth" }
+  )
+), c = i;
 export {
-  i as default
+  c as default
 };

package/index.es89.js

@@ -1,18 +1,10 @@
-import { create as n } from "./index.es166.js";
-import t from "./index.es88.js";
-const l = n()(
-  t(
-    (e) => ({
-      lang: localStorage.getItem("lang") ?? "ar",
-      dir: localStorage.getItem("lang") === "en" ? "ltr" : "rtl",
-      changeLang: (a) => e((o) => {
-        a !== o.lang && (localStorage.setItem("lang", a), window.location.pathname === "/login/verification" ? window.location.replace("/login") : window.location.reload());
-      })
-    }),
-    { name: "lanugage" }
-  )
-), i = l;
+import { devtools as t } from "./index.es178.js";
+import { immer as s } from "./index.es179.js";
+const l = {
+  name: "Store",
+  enabled: !0,
+  serialize: { options: !1 }
+}, r = (e, o = l) => t(s(e), o), i = r;
 export {
-  i as default,
-  l as useLanguage
+  i as default
 };

package/index.es9.js

@@ -1,198 +1,59 @@
-import { jsxs as f, Fragment as T, jsx as r } from "react/jsx-runtime";
-import { useSensor as O, useSensors as V, DndContext as _, closestCenter as q, DragOverlay as J, MouseSensor as K, TouchSensor as Q } from "./index.es106.js";
-import { SortableContext as U, useSortable as X, arrayMove as Y } from "./index.es107.js";
-import { useState as A } from "react";
-import { createPortal as W } from "react-dom";
-import { cn as j } from "./index.es85.js";
-import { strings as Z } from "./index.es97.js";
-import E from "./index.es3.js";
-import { Button as y } from "./index.es22.js";
-import { Separator as M } from "./index.es65.js";
-import { Stack as ee } from "./index.es42.js";
-import re from "./index.es108.js";
-import te from "./index.es109.js";
-import se from "./index.es110.js";
-import ie from "./index.es111.js";
-function De({
-  configs: s,
-  isEditMode: o,
-  componentMap: p,
-  onConfigChange: g,
-  onOrderChange: v,
-  onSave: c,
-  onCancel: D,
-  onReset: z,
-  onAdd: C,
-  isSidePanelShown: I,
-  isSaving: u
-}) {
-  const [d, w] = A(null), [S, k] = A(null), $ = O(K, {
-    activationConstraint: {
-      distance: 5
+import { jsx as s, jsxs as i } from "react/jsx-runtime";
+import { cva as h } from "./index.es105.js";
+import { forwardRef as o } from "react";
+import { cn as n } from "./index.es86.js";
+const x = h("grid border-b border-border-secondary", {
+  variants: {
+    variant: {
+      default: "[&>dt]:text-foreground-secondary",
+      list: "[&>dd]:text-card-foreground"
+    },
+    size: {
+      default: "text-body-01",
+      sm: "text-caption-01"
+    },
+    orientation: {
+      vertical: "grid-cols-1 gap-space-01",
+      horizental: "grid-cols-1   gap-space-02  sm:grid-cols-[min(50%,theme(spacing.80))_auto]"
+    },
+    lastItem: {
+      true: "border-none"
+    },
+    stretch: {
+      true: ""
+    },
+    padding: {
+      default: "p-space-04",
+      none: "p-space-00"
     }
-  }), B = O(Q, {
-    activationConstraint: {
-      delay: 100,
-      tolerance: 5
-    }
-  }), H = V($, B), P = (e) => {
-    w(e.active.id);
-  }, R = (e) => {
-    const { over: t } = e;
-    k(t ? t.id : null);
-  }, F = (e) => {
-    const { active: t, over: i } = e;
-    if (w(null), k(null), !i || t.id === i.id)
-      return;
-    if (i.id.toString().startsWith("placeholder-")) {
-      const l = parseInt(i.id.toString().split("-")[1]), h = s.find((m) => m.alias === t.id);
-      if (h && h.size === "half") {
-        const m = s.findIndex((L) => L.alias === t.id), N = [...s];
-        N.splice(l + 1, 0, ...N.splice(m, 1)), v(N);
-      }
-      return;
-    }
-    const a = s.findIndex((l) => l.alias === t.id), n = s.findIndex((l) => l.alias === i.id), b = Y(s, a, n);
-    v(b);
-  }, x = s.filter((e) => (e == null ? void 0 : e.isVisible) && p[e.alias]), G = Array(x.length).fill(0).map((e, t) => `placeholder-${t}`);
-  return /* @__PURE__ */ f(T, { children: [
-    u && W(
-      /* @__PURE__ */ r(
-        "div",
-        {
-          className: j(
-            "fixed inset-0 z-[60000] bg-black transition-all duration-200",
-            u ? "opacity-50" : "pointer-events-none opacity-0"
-          )
-        }
-      ),
-      document.body
-    ),
-    /* @__PURE__ */ f(
-      _,
-      {
-        sensors: H,
-        collisionDetection: q,
-        onDragStart: P,
-        onDragEnd: F,
-        onDragOver: R,
-        children: [
-          /* @__PURE__ */ r(U, { items: [...s.map((e) => e.alias), ...G], children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 items-center justify-center gap-space-04 px-space-04 pt-space-04 sm:grid-cols-2 sm:items-stretch sm:justify-stretch sm:px-space-06 xl:px-space-04", children: (() => {
-            let e = 0;
-            const t = [], i = s.find((a) => a.alias === d);
-            for (let a = 0; a < x.length; a++) {
-              const n = x[a], b = p[n.alias];
-              if (!b)
-                continue;
-              t.push(
-                /* @__PURE__ */ r(
-                  b,
-                  {
-                    config: n,
-                    isEditMode: o,
-                    onConfigChange: g,
-                    isOver: n.alias === S,
-                    isDragging: n.alias === d
-                  },
-                  n.alias
-                )
-              );
-              const l = n.size === "full" ? 2 : 1;
-              if (e += l, o && n.size === "half" && e % 2 === 1) {
-                const h = x[a + 1];
-                if (!h || h.size === "full") {
-                  const m = `placeholder-${a}`;
-                  t.push(
-                    /* @__PURE__ */ r(
-                      ae,
-                      {
-                        id: m,
-                        isEditMode: o,
-                        activeId: d,
-                        overId: S,
-                        draggedWidgetSize: i == null ? void 0 : i.size
-                      },
-                      m
-                    )
-                  ), e += 1;
-                }
-              }
-            }
-            return t;
-          })() }) }),
-          /* @__PURE__ */ r(J, { children: d && (() => {
-            const e = s.find((i) => i.alias === d);
-            if (!e)
-              return null;
-            const t = p[e.alias];
-            return t ? /* @__PURE__ */ r(
-              t,
-              {
-                config: e,
-                isEditMode: o,
-                onConfigChange: g,
-                isDragOverlay: !0,
-                isOver: e.alias === S,
-                isDragging: e.alias === d
-              },
-              e.alias
-            ) : null;
-          })() })
-        ]
-      }
-    ),
-    W(
-      /* @__PURE__ */ r(
-        "div",
-        {
-          className: `fixed bottom-4 left-0 right-0 flex justify-center transition-all duration-300 ${o ? "z-[50000] opacity-100" : "pointer-events-none opacity-0"}
-                    ${I ? "hidden xl:flex" : ""}
-                    `,
-          children: /* @__PURE__ */ f(
-            "div",
-            {
-              className: `flex transform items-center gap-space-04 rounded-full border-t bg-background-brand p-space-02 shadow-card-shadow transition-all duration-300 ${o ? "translate-y-[-10px]" : "translate-y-full"}`,
-              children: [
-                /* @__PURE__ */ f(ee, { gap: 4, alignItems: "center", children: [
-                  /* @__PURE__ */ r(y, { variant: "outline", colors: "gray", size: "icon-sm", onClick: D, children: /* @__PURE__ */ r(re, {}) }),
-                  /* @__PURE__ */ r(y, { variant: "outline", colors: "gray", size: "icon-sm", onClick: z, children: /* @__PURE__ */ r(te, {}) }),
-                  /* @__PURE__ */ r(M, { orientation: "vertical", className: "h-space-06" })
-                ] }),
-                /* @__PURE__ */ r(y, { variant: "outline", colors: "primary", size: "icon-sm", className: "xl:hidden", onClick: C, children: /* @__PURE__ */ r(se, {}) }),
-                /* @__PURE__ */ f(y, { variant: "default", onClick: c, size: "sm", colors: "primary", className: "gap-space-02", disabled: u, children: [
-                  /* @__PURE__ */ r(ie, { className: "size-space-05" }),
-                  Z.DragAndDrop.SaveCustomization,
-                  u && /* @__PURE__ */ r(E, {})
-                ] })
-              ]
-            }
-          )
-        }
-      ),
-      document.body
-    )
-  ] });
-}
-const ae = ({ id: s, isEditMode: o, activeId: p, overId: g, draggedWidgetSize: v }) => {
-  const c = v === "half", { attributes: D, listeners: z, isOver: C, setNodeRef: I } = X({
-    id: s,
-    disabled: !o || !c
-  });
-  return /* @__PURE__ */ r(
-    "div",
+  },
+  compoundVariants: [
     {
-      ref: I,
-      ...c ? D : {},
-      ...c ? z : {},
-      className: j(
-        "hidden sm:block",
-        "h-[440px] rounded-3 border-2 border-dashed transition-all duration-200",
-        C || g === s ? "border-primary" : "border-border",
-        !c && p ? "cursor-not-allowed" : "cursor-default"
-      )
+      orientation: "horizental",
+      stretch: !0,
+      className: "sm:grid-cols-2 sm:[&>dd]:text-end"
     }
-  );
-};
+  ],
+  defaultVariants: {
+    orientation: "horizental",
+    variant: "default",
+    padding: "default",
+    size: "default"
+  }
+}), b = o(({ children: e, className: t, ...a }, r) => /* @__PURE__ */ s("div", { ref: r, className: n("rounded-2 bg-background", t), ...a, children: e }));
+b.displayName = "Description";
+const N = o(
+  ({ icon: e, variant: t, title: a, children: r, orientation: d, stretch: c, lastItem: l, size: m, padding: p, className: u, ...f }, g) => /* @__PURE__ */ i("dl", { ref: g, className: n(x({ variant: t, orientation: d, size: m, stretch: c, lastItem: l, padding: p }), u), ...f, children: [
+    /* @__PURE__ */ i("dt", { className: "col-start-1 inline-flex items-center gap-space-01", children: [
+      e && /* @__PURE__ */ s(e, { className: "h-8 w-8 shrink-0" }),
+      a,
+      ":"
+    ] }),
+    /* @__PURE__ */ s("dd", { className: "line-clamp-1", children: r })
+  ] })
+);
+N.displayName = "DescriptionItem";
 export {
-  De as DraggableGrid
+  b as Description,
+  N as DescriptionItem
 };