@konstructio/ui 0.1.2-alpha.99 → 0.1.3

package/dist/components/Filter/components/TextMultiSelect/TextMultiSelect.js

@@ -1,76 +1,73 @@
-import { t as o } from "../../../../Checkbox-BvRmHWxk.js";
-import { t as r } from "../../../../utils-COaoD3PI.js";
-import { Button as p } from "../../../Button/Button.js";
-import { t as y } from "../../../../chevron-down-T3Rx8Nc7.js";
-import { Badge as S } from "../../../Badge/Badge.js";
-import { filterButtonIconVariants as O, filterButtonVariants as A } from "../../Filter.variants.js";
-import { useBadgeMultiSelect as B } from "../BadgeDropdown/BadgeMultiSelect.hook.js";
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-var T = ({ options: l, label: h, position: c = "left", onApply: f, showSelectAll: x = !0, selectAllLabel: u = "All" }) => {
-  const { wrapperRef: g, isOpen: d, isAllSelected: s, selectedOptions: b, selectedCount: i, handleOpen: k, handleResetOptions: v, handleApplyOptions: N, handleSelectAll: C, handleSelectOption: w } = B({
-    onApply: f,
-    options: l
+import { t as y } from "../../../../chevron-down-BODx0Q7h.js";
+import { Badge as O } from "../../../Badge/Badge.js";
+import { Button as d } from "../../../Button/Button.js";
+import { t as m } from "../../../../Checkbox-DtgzySMh.js";
+import { filterButtonIconVariants as S, filterButtonVariants as w } from "../../Filter.variants.js";
+import { t as s } from "../../../../utils-DnIJruo0.js";
+import { useBadgeMultiSelect as B } from "../BadgeDropdown/hooks/useBadgeMultiSelect/useBadgeMultiSelect.js";
+import { FilterDropdown as A } from "../FilterDropdown/FilterDropdown.js";
+import { Fragment as j, jsx as e, jsxs as t } from "react/jsx-runtime";
+var E = ({ options: r, label: o, position: p = "left", onApply: h, showSelectAll: x = !0, selectAllLabel: c = "All" }) => {
+  const { isOpen: n, isAllSelected: g, selectedOptions: f, selectedCount: i, handleOpenChange: u, handleResetOptions: b, handleApplyOptions: C, handleSelectAll: k, handleSelectOption: N } = B({
+    onApply: h,
+    options: r
   });
-  return l.length === 0 ? null : /* @__PURE__ */ a("div", {
-    ref: g,
-    className: "relative",
-    children: [/* @__PURE__ */ a("button", {
-      className: r(A(), { "text-slate-700 dark:text-metal-50": d }),
-      onClick: k,
-      children: [
-        h,
-        i.length > 0 && /* @__PURE__ */ e(S, { label: i.length.toString() }),
-        /* @__PURE__ */ e(y, { className: r(O(), { "rotate-180 text-blue-600 dark:text-aurora-500": d }) })
-      ]
-    }), d && /* @__PURE__ */ a("div", {
-      className: r("absolute", "top-full", "mt-1", "bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-10", "border", "border-gray-200", "dark:bg-metal-800", "dark:border-metal-700", {
-        "left-0": c === "left",
-        "right-0": c === "right"
-      }),
-      children: [/* @__PURE__ */ e("div", {
-        className: "px-6 py-4",
-        children: /* @__PURE__ */ a("div", {
-          className: "flex flex-col gap-2",
-          children: [x && /* @__PURE__ */ a("div", {
+  return r.length === 0 ? null : /* @__PURE__ */ t(A, {
+    isOpen: n,
+    position: p,
+    contentClassName: "border border-gray-200",
+    triggerClassName: s(w(), { "text-slate-700 dark:text-metal-50": n }),
+    trigger: /* @__PURE__ */ t(j, { children: [
+      o,
+      i.length > 0 && /* @__PURE__ */ e(O, { label: i.length.toString() }),
+      /* @__PURE__ */ e(y, { className: s(S(), { "rotate-180 text-blue-600 dark:text-aurora-500": n }) })
+    ] }),
+    onOpenChange: u,
+    children: [/* @__PURE__ */ e("div", {
+      className: "px-6 py-4",
+      children: /* @__PURE__ */ t("div", {
+        className: "flex flex-col gap-2",
+        children: [x && /* @__PURE__ */ t("div", {
+          className: "flex gap-4",
+          children: [/* @__PURE__ */ e(m, {
+            checked: g,
+            "aria-label": c,
+            onChange: (a) => k(r, a)
+          }), /* @__PURE__ */ e("span", {
+            className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap",
+            children: c
+          })]
+        }), r.map((a) => {
+          const v = f.some((l) => l.id === a.id && !l.isRemoved);
+          return /* @__PURE__ */ t("div", {
             className: "flex gap-4",
-            children: [/* @__PURE__ */ e(o, {
-              defaultChecked: s,
-              onChange: (t) => C(l, t)
-            }, `select-all-${s}`), /* @__PURE__ */ e("span", {
+            children: [/* @__PURE__ */ e(m, {
+              checked: v,
+              "aria-label": a.label,
+              "data-label": a.id,
+              onChange: (l) => N(a, l)
+            }), /* @__PURE__ */ e("span", {
               className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap",
-              children: u
+              children: a.label
             })]
-          }), l.map((t) => {
-            const m = !!b.find((n) => n.id === t.id);
-            return /* @__PURE__ */ a("div", {
-              className: "flex gap-4",
-              children: [/* @__PURE__ */ e(o, {
-                defaultChecked: m,
-                "data-label": t.id,
-                onChange: (n) => w(t, n)
-              }, `${t.id}-${m}`), /* @__PURE__ */ e("span", {
-                className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap",
-                children: t.label
-              })]
-            }, t.id);
-          })]
-        })
-      }), /* @__PURE__ */ a("div", {
-        className: r("flex", "justify-center", "items-center", "gap-4", "px-6", "py-4", "border-t", "border-gray-200", "dark:border-metal-700"),
-        children: [/* @__PURE__ */ e(p, {
-          variant: "secondary",
-          appearance: "compact",
-          onClick: v,
-          children: "Reset"
-        }), /* @__PURE__ */ e(p, {
-          appearance: "compact",
-          onClick: N,
-          children: "Apply"
+          }, a.id);
         })]
+      })
+    }), /* @__PURE__ */ t("div", {
+      className: s("flex", "justify-center", "items-center", "gap-4", "px-6", "py-4", "border-t", "border-gray-200", "dark:border-metal-700"),
+      children: [/* @__PURE__ */ e(d, {
+        variant: "secondary",
+        appearance: "compact",
+        onClick: b,
+        children: "Reset"
+      }), /* @__PURE__ */ e(d, {
+        appearance: "compact",
+        onClick: C,
+        children: "Apply"
       })]
     })]
   });
 };
 export {
-  T as TextMultiSelect
+  E as TextMultiSelect
 };

package/dist/components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js

@@ -1,84 +1,79 @@
-import { t as a } from "../../../../utils-COaoD3PI.js";
-import { Button as p } from "../../../Button/Button.js";
-import { t as N } from "../../../../chevron-down-T3Rx8Nc7.js";
-import { Badge as w } from "../../../Badge/Badge.js";
-import { TimePicker as C } from "../../../TimePicker/TimePicker.js";
-import { filterButtonIconVariants as B, filterButtonVariants as j } from "../../Filter.variants.js";
-import { useTimeFilterDropdown as D } from "./TimeFilterDropdown.hook.js";
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-var V = ({ label: b, position: o = "left", format: r = "24", presets: i, showTimePicker: d = !0, onApply: h }) => {
-  const { appliedLabel: c, isOpen: n, selectedTime: x, selectedPresetLabel: m, wrapperRef: g, handleApply: f, handleOpen: u, handleSelectPreset: v, handleSelectCustom: y, handleReset: k } = D({
-    onApply: h,
+import { t as k } from "../../../../chevron-down-BODx0Q7h.js";
+import { Badge as N } from "../../../Badge/Badge.js";
+import { Button as s } from "../../../Button/Button.js";
+import { filterButtonIconVariants as C, filterButtonVariants as w } from "../../Filter.variants.js";
+import { TimePicker as B } from "../../../TimePicker/TimePicker.js";
+import { t as a } from "../../../../utils-DnIJruo0.js";
+import { FilterDropdown as D } from "../FilterDropdown/FilterDropdown.js";
+import { useTimeFilterDropdown as F } from "./hooks/useTimeFilterDropdown/useTimeFilterDropdown.js";
+import { Fragment as j, jsx as e, jsxs as l } from "react/jsx-runtime";
+var q = ({ label: p, position: g = "left", format: r = "24", presets: n, showTimePicker: i = !0, onApply: x }) => {
+  const { appliedLabel: c, isOpen: o, selectedTime: h, selectedPresetLabel: d, handleApply: b, handleOpenChange: u, handleSelectPreset: f, handleSelectCustom: y, handleReset: v } = F({
+    onApply: x,
     format: r
-  }), s = i && i.length > 0;
-  return /* @__PURE__ */ l("div", {
-    ref: g,
-    className: "relative",
-    children: [/* @__PURE__ */ l("button", {
-      className: a(j(), { "text-slate-700 dark:text-metal-100": n }),
-      onClick: u,
-      children: [
-        b,
-        c && /* @__PURE__ */ e(w, { label: c }),
-        /* @__PURE__ */ e(N, { className: a(B(), { "rotate-180 text-blue-600 dark:text-aurora-500": n }) })
-      ]
-    }), n && /* @__PURE__ */ l("div", {
-      className: a("absolute", "top-full", "mt-1", "bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-10", "border", "border-gray-200", "flex", "flex-col", "dark:bg-metal-800", "dark:border-metal-700", {
-        "left-0": o === "left",
-        "right-0": o === "right"
-      }),
-      children: [
-        /* @__PURE__ */ l("div", {
-          className: "flex",
-          children: [
-            s && /* @__PURE__ */ e("div", {
-              className: "flex flex-col gap-1 py-4 px-4 min-w-40",
-              children: i.map((t) => /* @__PURE__ */ e("button", {
-                type: "button",
-                className: a("text-left", "px-3", "py-1.5", "rounded", "cursor-pointer", "text-sm", "whitespace-nowrap", "transition-colors", "hover:bg-gray-100", "dark:hover:bg-metal-700", {
-                  "bg-blue-50 text-blue-600 dark:bg-metal-700 dark:text-aurora-500": m === t.label,
-                  "text-gray-700 dark:text-gray-300": m !== t.label
-                }),
-                onClick: () => v(t),
-                children: t.label
-              }, t.label))
-            }),
-            s && d && /* @__PURE__ */ e("div", { className: "w-px bg-gray-200 dark:bg-metal-700" }),
-            d && /* @__PURE__ */ e("div", {
-              className: "py-4 px-6",
-              children: /* @__PURE__ */ e("div", {
-                className: a({
-                  "w-35.5": r === "24",
-                  "w-52": r === "12"
-                }),
-                children: /* @__PURE__ */ e(C, {
-                  format: r,
-                  time: x,
-                  onChange: y,
-                  mode: "input"
-                })
+  }), m = n && n.length > 0;
+  return /* @__PURE__ */ l(D, {
+    isOpen: o,
+    position: g,
+    contentClassName: a("border", "border-gray-200", "flex", "flex-col"),
+    triggerClassName: a(w(), { "text-slate-700 dark:text-metal-100": o }),
+    trigger: /* @__PURE__ */ l(j, { children: [
+      p,
+      c && /* @__PURE__ */ e(N, { label: c }),
+      /* @__PURE__ */ e(k, { className: a(C(), { "rotate-180 text-blue-600 dark:text-aurora-500": o }) })
+    ] }),
+    onOpenChange: u,
+    children: [
+      /* @__PURE__ */ l("div", {
+        className: "flex",
+        children: [
+          m && /* @__PURE__ */ e("div", {
+            className: "flex flex-col gap-1 py-4 px-4 min-w-40",
+            children: n.map((t) => /* @__PURE__ */ e("button", {
+              type: "button",
+              className: a("text-left", "px-3", "py-1.5", "rounded", "cursor-pointer", "text-sm", "whitespace-nowrap", "transition-colors", "hover:bg-gray-100", "dark:hover:bg-metal-700", {
+                "bg-blue-50 text-blue-600 dark:bg-metal-700 dark:text-aurora-500": d === t.label,
+                "text-gray-700 dark:text-gray-300": d !== t.label
+              }),
+              onClick: () => f(t),
+              children: t.label
+            }, t.label))
+          }),
+          m && i && /* @__PURE__ */ e("div", { className: "w-px bg-gray-200 dark:bg-metal-700" }),
+          i && /* @__PURE__ */ e("div", {
+            className: "py-4 px-6",
+            children: /* @__PURE__ */ e("div", {
+              className: a({
+                "w-35.5": r === "24",
+                "w-52": r === "12"
+              }),
+              children: /* @__PURE__ */ e(B, {
+                format: r,
+                time: h,
+                onChange: y,
+                mode: "input"
               })
             })
-          ]
-        }),
-        /* @__PURE__ */ e("div", { className: "h-px bg-gray-200 dark:bg-metal-700" }),
-        /* @__PURE__ */ l("div", {
-          className: a("flex", "justify-end", "items-center", "gap-4", "px-6", "py-3"),
-          children: [/* @__PURE__ */ e(p, {
-            variant: "secondary",
-            appearance: "compact",
-            onClick: k,
-            children: "Reset"
-          }), /* @__PURE__ */ e(p, {
-            appearance: "compact",
-            onClick: f,
-            children: "Apply"
-          })]
-        })
-      ]
-    })]
+          })
+        ]
+      }),
+      /* @__PURE__ */ e("div", { className: "h-px bg-gray-200 dark:bg-metal-700" }),
+      /* @__PURE__ */ l("div", {
+        className: a("flex", "justify-end", "items-center", "gap-4", "px-6", "py-3"),
+        children: [/* @__PURE__ */ e(s, {
+          variant: "secondary",
+          appearance: "compact",
+          onClick: v,
+          children: "Reset"
+        }), /* @__PURE__ */ e(s, {
+          appearance: "compact",
+          onClick: b,
+          children: "Apply"
+        })]
+      })
+    ]
   });
 };
 export {
-  V as TimeFilterDropdown
+  q as TimeFilterDropdown
 };

package/dist/components/Filter/components/TimeFilterDropdown/hooks/index.js

@@ -0,0 +1,4 @@
+import { useTimeFilterDropdown as r } from "./useTimeFilterDropdown/useTimeFilterDropdown.js";
+export {
+  r as useTimeFilterDropdown
+};

package/dist/components/Filter/components/TimeFilterDropdown/hooks/useTimeFilterDropdown/useTimeFilterDropdown.js

@@ -0,0 +1,39 @@
+import { getFormattedTime as g } from "../../../../../TimePicker/utils/index.js";
+import { useFilterContext as w } from "../../../../contexts/filter.hook.js";
+import { sendOpenFilterEvent as x } from "../../../../events/index.js";
+import { useFilterDropdownSync as A } from "../../../../hooks/useFilterDropdownSync.js";
+import { useCallback as d, useId as D, useState as t } from "react";
+var j = ({ onApply: o, format: v = "24" }) => {
+  const { closeOnApply: c } = w(), l = D(), [b, s] = t(!1), [n, i] = t(), [r, p] = t(), [m, a] = t(), [h, f] = t(), S = h ?? (r ? g(r, v) : void 0), C = (e) => {
+    e && x(l), s(e);
+  }, T = (e) => {
+    i(e.value), a(e.label);
+  }, F = d((e) => {
+    i(e), a(void 0);
+  }, []), L = () => {
+    p(n), f(m), o?.(n), c && s(!1);
+  }, O = d(() => s(!1), []), u = d(() => {
+    i(void 0), p(void 0), a(void 0), f(void 0), o?.();
+  }, [o]), P = () => {
+    u(), c && s(!1);
+  };
+  return A({
+    id: l,
+    onClose: O,
+    onReset: u
+  }), {
+    id: l,
+    appliedLabel: S,
+    isOpen: b,
+    selectedTime: n,
+    selectedPresetLabel: m,
+    handleApply: L,
+    handleOpenChange: C,
+    handleSelectPreset: T,
+    handleSelectCustom: F,
+    handleReset: P
+  };
+};
+export {
+  j as useTimeFilterDropdown
+};

package/dist/components/Filter/components/index.js

@@ -1,14 +1,16 @@
 import { BadgeMultiSelect as t } from "./BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as e } from "./DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as i } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { ResetButton as l } from "./ResetButton/ResetButton.js";
-import { TextMultiSelect as n } from "./TextMultiSelect/TextMultiSelect.js";
-import { TimeFilterDropdown as a } from "./TimeFilterDropdown/TimeFilterDropdown.js";
+import { CustomDateRangeFilterDropdown as e } from "./CustomDateRangeFilterDropdown/CustomDateRangeFilterDropdown.js";
+import { DateFilterDropdown as i } from "./DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as l } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { ResetButton as n } from "./ResetButton/ResetButton.js";
+import { TextMultiSelect as a } from "./TextMultiSelect/TextMultiSelect.js";
+import { TimeFilterDropdown as u } from "./TimeFilterDropdown/TimeFilterDropdown.js";
 export {
   t as BadgeMultiSelect,
-  e as DateFilterDropdown,
-  i as DateRangeFilterDropdown,
-  l as ResetButton,
-  n as TextMultiSelect,
-  a as TimeFilterDropdown
+  e as CustomDateRangeFilterDropdown,
+  i as DateFilterDropdown,
+  l as DateRangeFilterDropdown,
+  n as ResetButton,
+  a as TextMultiSelect,
+  u as TimeFilterDropdown
 };

package/dist/components/Filter/contexts/filter.provider.js

@@ -1,9 +1,17 @@
-import { FilterContext as e } from "./filter.context.js";
-import { jsx as t } from "react/jsx-runtime";
-var v = ({ children: r, closeOnApply: o }) => /* @__PURE__ */ t(e.Provider, {
-  value: { closeOnApply: o },
-  children: r
-});
+import { FilterContext as m } from "./filter.context.js";
+import { useId as p } from "react";
+import { jsx as d } from "react/jsx-runtime";
+var a = ({ children: r, closeOnApply: e, resetScope: o, theme: t }) => {
+  const i = p();
+  return /* @__PURE__ */ d(m.Provider, {
+    value: {
+      closeOnApply: e,
+      resetScope: o ?? i,
+      theme: t
+    },
+    children: r
+  });
+};
 export {
-  v as FilterProvider
+  a as FilterProvider
 };

package/dist/components/Filter/events/index.js

@@ -1,8 +1,29 @@
-var e = /* @__PURE__ */ (function(t) {
+var s = /* @__PURE__ */ (function(t) {
+  return t.OPEN = "@konstructio/KonstructFilter/event-OPEN", t.RESET = "@konstructio/KonstructFilter/event-RESET", t;
+})({}), E = /* @__PURE__ */ (function(t) {
   return t.OPEN = "@konstrtuctio/KonstructFilter/event-OPEN", t.RESET = "@konstrtuctio/KonstructFilter/event-RESET", t;
-})({}), n = (t) => document.dispatchEvent(new CustomEvent(e.OPEN, { detail: t })), E = () => document.dispatchEvent(new CustomEvent(e.RESET));
+})({}), o = {
+  "@konstructio/KonstructFilter/event-OPEN": "@konstrtuctio/KonstructFilter/event-OPEN",
+  "@konstructio/KonstructFilter/event-RESET": "@konstrtuctio/KonstructFilter/event-RESET"
+}, c = "__konstructFilterDuplicate", u = (t, e) => {
+  document.dispatchEvent(new CustomEvent(t, { detail: e }));
+  const n = new CustomEvent(o[t], { detail: e });
+  Object.assign(n, { [c]: !0 }), document.dispatchEvent(n);
+}, i = (t) => {
+  u("@konstructio/KonstructFilter/event-OPEN", t);
+}, v = (t) => {
+  u("@konstructio/KonstructFilter/event-RESET", t);
+}, a = (t, e, n) => {
+  document.addEventListener(t, (r) => {
+    e(r);
+  }, n), document.addEventListener(o[t], (r) => {
+    c in r || e(r);
+  }, n);
+};
 export {
-  e as FilterEvent,
-  E as resetEvent,
-  n as sendOpenFilterEvent
+  s as FilterEvent,
+  E as LegacyFilterEvent,
+  a as addFilterEventListener,
+  v as resetEvent,
+  i as sendOpenFilterEvent
 };

package/dist/components/Filter/hooks/index.js

@@ -0,0 +1,6 @@
+import { useFilterDropdownSync as r } from "./useFilterDropdownSync.js";
+import { useLocale as m } from "./useLocale.js";
+export {
+  r as useFilterDropdownSync,
+  m as useLocale
+};

package/dist/components/Filter/hooks/useFilterDropdownSync.js

@@ -0,0 +1,26 @@
+import { useFilterContext as s } from "../contexts/filter.hook.js";
+import { FilterEvent as o, addFilterEventListener as a } from "../events/index.js";
+import { useEffect as d } from "react";
+var u = ({ id: i, onClose: r, onReset: n }) => {
+  const { resetScope: l } = s();
+  d(() => {
+    const t = new AbortController();
+    return a(o.OPEN, (e) => {
+      e.detail !== i && r();
+    }, { signal: t.signal }), a(o.RESET, (e) => {
+      e.detail != null && e.detail !== l || n();
+    }, { signal: t.signal }), document.addEventListener("visibilitychange", () => {
+      document.hidden && r();
+    }, { signal: t.signal }), () => {
+      t.abort();
+    };
+  }, [
+    i,
+    r,
+    n,
+    l
+  ]);
+};
+export {
+  u as useFilterDropdownSync
+};

package/dist/components/Filter/hooks/useLocale.js

@@ -0,0 +1,16 @@
+import { getLocale as o, loadLocaleMap as r } from "../utils/index.js";
+import { useEffect as s, useState as l } from "react";
+var u = (t) => {
+  const [, a] = l(!1);
+  return s(() => {
+    let e = !0;
+    return r().then(() => {
+      e && a(!0);
+    }), () => {
+      e = !1;
+    };
+  }, []), o(t);
+};
+export {
+  u as useLocale
+};

package/dist/components/Filter/utils/index.js

@@ -1,4 +1,8 @@
-import { t } from "../../../utils-Cc9GhtYC.js";
+import { o as t } from "../../../rolldown-runtime-B28h4lGi.js";
+var l = "en-US", r, e, p = () => (e || (e = import("../../../country-locale-map-BQYYErun.js").then((a) => /* @__PURE__ */ t(a.default, 1)).then((a) => {
+  r = a.default;
+})), e), u = (a = "US") => r?.getCountryByAlpha2(a)?.default_locale?.replace("_", "-") ?? l;
 export {
-  t as getLocale
+  u as getLocale,
+  p as loadLocaleMap
 };

package/dist/components/ImageUpload/ImageUpload.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../ImageUpload-DebL0hwF.js";
+import { t as a } from "../../ImageUpload-DZH9bDU2.js";
 export {
   a as ImageUpload
 };

package/dist/components/ImageUpload/ImageUpload.variants.js

@@ -1,4 +1,4 @@
-import { t } from "../../dist-Bcn6lMQe.js";
+import { t } from "../../dist-B9GE4SXf.js";
 var a = t([
   "flex",
   "flex-col",

package/dist/components/Input/Input.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../Input-BZG7N8m1.js";
+import { t as o } from "../../Input-C1Js3pbF.js";
 export {
   o as Input
 };

package/dist/components/Input/Input.variants.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../dist-Bcn6lMQe.js";
+import { t as e } from "../../dist-B9GE4SXf.js";
 var r = e([
   "bg-white",
   "border",
@@ -16,6 +16,7 @@ var r = e([
   "rounded",
   "text-slate-800",
   "text-sm",
+  "max-md:text-base",
   "transition-all",
   "w-full",
   "disabled:bg-gray-50",