@indielayer/ui 1.12.1 → 1.13.0

package/lib/components/select/theme/Select.base.theme.js

@@ -1,25 +1,26 @@
-const t = {
+const s = {
   classes: {
     wrapper: "",
-    box: ({ props: e, data: s }) => {
-      const r = ["w-full border border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm"];
-      return !s.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-1.5 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), s.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
+    box: ({ props: e, data: t }) => {
+      const r = ["w-full border border-secondary-300 dark:border-secondary-700 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm"];
+      return !t.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-1.5 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), t.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), !e.multiple && !e.multipleCheckbox && r.push("truncate"), e.clearable ? r.push("pr-14") : r.push("pr-8"), r;
     },
     truncateCounter: "absolute right-0 cursor-pointer hover:bg-secondary-200 bg-secondary-100 text-secondary-800 rounded px-1 py-0.5 text-xs",
     content: "p-1",
     search: "p-1 mb-0.5",
     contentBody: "overflow-y-auto max-h-64 min-w-[280px]",
-    iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
+    iconWrapper: "absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none",
+    clearButton: "absolute top-1/2 -translate-y-1/2 right-5 flex items-center p-2",
     icon: ({ props: e }) => {
-      const s = [""];
-      return e.size === "sm" || e.size === "xs" ? s.push("h-3 w-3") : e.size === "lg" ? s.push("h-6 w-6") : e.size === "xl" ? s.push("h-7 w-7") : s.push("h-5 w-5"), e.disabled ? s.push("text-secondary-300 dark:text-secondary-500") : s.push("text-secondary-500 dark:text-secondary-400"), s;
+      const t = [];
+      return e.size === "sm" || e.size === "xs" ? t.push("h-3 w-3") : e.size === "lg" || e.size === "xl" ? t.push("h-5 w-5") : t.push("h-4 w-4"), e.disabled ? t.push("text-secondary-300 dark:text-secondary-500") : t.push("text-secondary-500 dark:text-secondary-400"), t;
     }
   },
-  styles: ({ colors: e, css: s }) => {
+  styles: ({ colors: e, css: t }) => {
     const r = e.getPalette("primary");
-    return s.get("border", r[500]);
+    return t.get("border", r[500]);
   }
-}, o = t;
+}, o = s;
 export {
   o as default
 };

package/lib/components/table/Table.vue.d.ts

@@ -57,6 +57,7 @@ export type TableHeader = {
     width?: string | number;
     truncate?: boolean;
     skeletonShape?: SkeletonShape;
+    tooltip?: string;
 };
 export type TableProps = ExtractPublicPropTypes<typeof tableProps>;
 type InternalClasses = 'wrapper' | 'table' | 'loadingWrapper';

package/lib/components/table/Table.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as K, mergeModels as S, useModel as Q, computed as x, ref as R, watch as U, openBlock as l, createElementBlock as r, mergeProps as C, unref as n, renderSlot as p, createElementVNode as f, normalizeStyle as H, normalizeClass as m, createVNode as v, withCtx as c, createBlock as g, createCommentVNode as $, Fragment as k, renderList as h, createTextVNode as O, toDisplayString as P } from "vue";
+import { defineComponent as K, mergeModels as S, useModel as Q, computed as x, ref as R, watch as U, openBlock as o, createElementBlock as r, mergeProps as C, unref as n, renderSlot as p, createElementVNode as f, normalizeStyle as H, normalizeClass as m, createVNode as v, withCtx as c, createBlock as g, createCommentVNode as $, Fragment as k, renderList as h, createTextVNode as O, toDisplayString as P } from "vue";
 import { useTheme as Y } from "../../composables/useTheme.js";
 import { useVirtualList as Z } from "../../composables/useVirtualList.js";
 import j from "./TableHead.vue.js";
@@ -8,9 +8,9 @@ import T from "./TableRow.vue.js";
 import _ from "./TableCell.vue.js";
 import te from "../spinner/Spinner.vue.js";
 import se from "../skeleton/Skeleton.vue.js";
-import le from "../icon/Icon.vue.js";
-import { chevronDownIcon as oe } from "../../common/icons.js";
-const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan: "999" }, de = ["onClick"], ue = { colspan: "999" }, pe = {
+import oe from "../icon/Icon.vue.js";
+import { chevronDownIcon as le } from "../../common/icons.js";
+const ie = { key: 1 }, ae = { colspan: "999" }, re = { key: 2 }, ne = { colspan: "999" }, de = ["onClick"], ue = { colspan: "999" }, pe = {
   headers: {
     type: Array,
     default: () => []
@@ -69,7 +69,7 @@ const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
   }),
   emits: /* @__PURE__ */ S(["update:sort", "click-row"], ["update:selected"]),
   setup(B, { emit: z }) {
-    const i = B, L = Q(B, "selected"), A = x(() => typeof L.value < "u");
+    const a = B, L = Q(B, "selected"), A = x(() => typeof L.value < "u");
     function V(e) {
       try {
         return JSON.parse(JSON.stringify(e));
@@ -77,60 +77,60 @@ const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
         return [];
       }
     }
-    const b = x(() => i.items), { list: M, containerProps: D, wrapperProps: E } = Z(
+    const b = x(() => a.items), { list: M, containerProps: D, wrapperProps: E } = Z(
       b,
       {
-        disabled: !i.virtualList,
-        itemHeight: i.virtualListItemHeight || 54,
-        topOffset: i.virtualListOffsetTop || 0,
-        bottomOffset: i.virtualListOffsetBottom || 0,
-        overscan: i.virtualListOverscan
+        disabled: !a.virtualList,
+        itemHeight: a.virtualListItemHeight || 54,
+        topOffset: a.virtualListOffsetTop || 0,
+        bottomOffset: a.virtualListOffsetBottom || 0,
+        overscan: a.virtualListOverscan
       }
     ), y = R([]);
     U(b, (e) => {
-      i.expandable && (y.value = V(e));
+      a.expandable && (y.value = V(e));
     }, { immediate: !0 });
     const J = z;
-    function X(e, o) {
+    function X(e, l) {
       if (e)
-        for (let t = 0; t < o.length; t++) {
-          const { 0: a, 1: s } = o[t].split(",");
-          if (e === a)
+        for (let t = 0; t < l.length; t++) {
+          const { 0: i, 1: s } = l[t].split(",");
+          if (e === i)
             return parseInt(s) > 0 ? 1 : -1;
         }
     }
     function F(e) {
-      const o = i.sort.slice(0);
+      const l = a.sort.slice(0);
       let t = !1;
-      for (let a = 0; a < o.length; a++) {
-        const { 0: s, 1: d } = o[a].split(",");
+      for (let i = 0; i < l.length; i++) {
+        const { 0: s, 1: d } = l[i].split(",");
         if (s === e.value) {
           if (t = !0, d === "-1") {
-            o.splice(a, 1, `${e.value},1`);
+            l.splice(i, 1, `${e.value},1`);
             break;
           } else if (d === "1") {
-            o.splice(a, 1);
+            l.splice(i, 1);
             break;
           }
         }
       }
-      t || o.push(`${e.value},-1`), J("update:sort", o);
+      t || l.push(`${e.value},-1`), J("update:sort", l);
     }
-    function W(e, o) {
-      if (!o)
+    function W(e, l) {
+      if (!l)
         return "";
-      const t = Array.isArray(o) ? o : o.match(/([^[.\]])+/g);
+      const t = Array.isArray(l) ? l : l.match(/([^[.\]])+/g);
       return (t == null ? void 0 : t.reduce((s, d) => s && s[d], e)) ?? "";
     }
-    const { styles: q, classes: w, className: G } = Y("Table", {}, i);
-    return (e, o) => (l(), r("div", C({
+    const { styles: q, classes: w, className: G } = Y("Table", {}, a);
+    return (e, l) => (o(), r("div", C({
       class: [n(G), n(w).wrapper]
     }, n(D)), [
       p(e.$slots, "title"),
       p(e.$slots, "actions"),
       f("div", C(n(E), {
         class: {
-          "!h-auto": i.loading
+          "!h-auto": a.loading
         }
       }), [
         f("table", {
@@ -139,17 +139,18 @@ const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
         }, [
           v(j, { "sticky-header": e.stickyHeader }, {
             default: c(() => [
-              e.expandable ? (l(), g(I, {
+              e.expandable ? (o(), g(I, {
                 key: 0,
                 width: "48",
                 class: "!p-0"
               })) : $("", !0),
-              (l(!0), r(k, null, h(e.headers, (t, a) => (l(), g(I, {
-                key: a,
+              (o(!0), r(k, null, h(e.headers, (t, i) => (o(), g(I, {
+                key: i,
                 "text-align": t.align,
                 sort: X(t.value, e.sort),
                 sortable: t.sortable,
                 width: t.width,
+                tooltip: t.tooltip,
                 onClick: (s) => t.sortable ? F(t) : null
               }, {
                 default: c(() => [
@@ -158,18 +159,18 @@ const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
                   ])
                 ]),
                 _: 2
-              }, 1032, ["text-align", "sort", "sortable", "width", "onClick"]))), 128))
+              }, 1032, ["text-align", "sort", "sortable", "width", "tooltip", "onClick"]))), 128))
             ]),
             _: 3
           }, 8, ["sticky-header"]),
           v(n(ee), null, {
             default: c(() => [
-              e.loading ? (l(!0), r(k, { key: 0 }, h(Number(e.loadingLines), (t, a) => (l(), g(T, {
-                key: a,
+              e.loading ? (o(!0), r(k, { key: 0 }, h(Number(e.loadingLines), (t, i) => (o(), g(T, {
+                key: i,
                 striped: e.striped
               }, {
                 default: c(() => [
-                  (l(!0), r(k, null, h(e.headers, (s, d) => (l(), g(_, {
+                  (o(!0), r(k, null, h(e.headers, (s, d) => (o(), g(_, {
                     key: d,
                     "text-align": s.align,
                     width: s.width,
@@ -191,18 +192,18 @@ const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
                   }, 1032, ["text-align", "width", "dense", "fixed"]))), 128))
                 ]),
                 _: 2
-              }, 1032, ["striped"]))), 128)) : e.error ? (l(), r("tr", ae, [
-                f("td", ie, [
+              }, 1032, ["striped"]))), 128)) : e.error ? (o(), r("tr", ie, [
+                f("td", ae, [
                   p(e.$slots, "error")
                 ])
-              ])) : !b.value || b.value.length === 0 ? (l(), r("tr", re, [
+              ])) : !b.value || b.value.length === 0 ? (o(), r("tr", re, [
                 f("td", ne, [
                   p(e.$slots, "empty")
                 ])
-              ])) : (l(!0), r(k, { key: 3 }, h(n(M), (t, a) => {
+              ])) : (o(!0), r(k, { key: 3 }, h(n(M), (t, i) => {
                 var s, d;
-                return l(), r(k, {
-                  key: e.keyProp ?? a
+                return o(), r(k, {
+                  key: e.keyProp ?? i
                 }, [
                   v(T, {
                     pointer: e.pointer,
@@ -211,7 +212,7 @@ const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
                     onClick: (u) => e.$emit("click-row", t.data, t.index)
                   }, {
                     default: c(() => [
-                      e.expandable ? (l(), g(_, {
+                      e.expandable ? (o(), g(_, {
                         key: 0,
                         width: "48",
                         class: "!p-1"
@@ -224,8 +225,8 @@ const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
                               class: m(["px-3 p-2", [e.dense ? "p-0.5" : "px-3 py-2"]]),
                               onClick: (N) => y.value[t.index].__expanded = !y.value[t.index].__expanded
                             }, [
-                              v(le, {
-                                icon: n(oe),
+                              v(oe, {
+                                icon: n(le),
                                 size: e.dense ? "xs" : "md",
                                 class: m(["transition-transform", {
                                   "rotate-180": (u = y.value[t.index]) == null ? void 0 : u.__expanded
@@ -236,15 +237,15 @@ const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
                         }),
                         _: 2
                       }, 1024)) : $("", !0),
-                      (l(!0), r(k, null, h(e.headers, (u, N) => (l(), g(_, {
+                      (o(!0), r(k, null, h(e.headers, (u, N) => (o(), g(_, {
                         key: N,
                         "text-align": u.align,
                         truncate: u.truncate,
                         width: u.width,
                         dense: e.dense,
-                        style: H([i.virtualList ? {
-                          height: `${i.virtualListItemHeight}px`,
-                          maxHeight: `${i.virtualListItemHeight}px`,
+                        style: H([a.virtualList ? {
+                          height: `${a.virtualListItemHeight}px`,
+                          maxHeight: `${a.virtualListItemHeight}px`,
                           overflow: "hidden",
                           whiteSpace: "nowrap"
                         } : {}])
@@ -261,7 +262,7 @@ const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
                     ]),
                     _: 2
                   }, 1032, ["pointer", "striped", "selected", "onClick"]),
-                  e.expandable ? (l(), r("tr", {
+                  e.expandable ? (o(), r("tr", {
                     key: 0,
                     class: m({ hidden: !((s = y.value[t.index]) != null && s.__expanded) })
                   }, [
@@ -280,7 +281,7 @@ const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
             ]),
             _: 3
           }),
-          e.loading ? (l(), r("div", {
+          e.loading ? (o(), r("div", {
             key: 0,
             class: m(n(w).loadingWrapper)
           }, [

package/lib/components/table/TableHeader.vue.d.ts

@@ -15,6 +15,7 @@ declare const tableHeaderProps: {
         default: string;
         validator: (value: string) => boolean;
     };
+    tooltip: StringConstructor;
 };
 export type TableHeaderSort = typeof validators.sort[number];
 export type TableHeaderAlign = typeof validators.textAlign[number];
@@ -33,6 +34,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         default: string;
         validator: (value: string) => boolean;
     };
+    tooltip: StringConstructor;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     sort: {
         type: PropType<1 | -1 | undefined>;
@@ -44,6 +46,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         default: string;
         validator: (value: string) => boolean;
     };
+    tooltip: StringConstructor;
 }>> & Readonly<{}>, {
     textAlign: "left" | "right" | "center" | "justify";
     sortable: boolean;

package/lib/components/table/TableHeader.vue.js

@@ -1,68 +1,77 @@
-import { defineComponent as f, openBlock as l, createElementBlock as r, normalizeStyle as g, unref as s, normalizeClass as u, renderSlot as v, Fragment as d, createElementVNode as n, createCommentVNode as k } from "vue";
+import { defineComponent as g, openBlock as o, createElementBlock as n, normalizeStyle as k, unref as s, normalizeClass as p, createElementVNode as r, renderSlot as c, createBlock as v, createCommentVNode as d, Fragment as u } from "vue";
 import { useTheme as b } from "../../composables/useTheme.js";
-const c = {
+import h from "../tooltip/ToggleTip.vue.js";
+const B = { class: "flex items-center gap-1 select-none" }, C = {
   key: 2,
   d: "m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"
 }, i = {
   sort: [1, -1, void 0],
   textAlign: ["left", "center", "right", "justify"]
-}, h = {
+}, N = {
   sort: {
     type: Number,
-    validator: (o) => i.sort.includes(o)
+    validator: (l) => i.sort.includes(l)
   },
   sortable: Boolean,
   textAlign: {
     type: String,
     default: "left",
-    validator: (o) => i.textAlign.includes(o)
-  }
-}, x = { name: "XTableHeader", validators: i }, N = /* @__PURE__ */ f({
-  ...x,
-  props: h,
-  setup(o) {
-    const p = o, { styles: m, classes: a, className: y } = b("TableHeader", {}, p);
-    return (t, e) => (l(), r("th", {
-      style: g(s(m)),
-      class: u([s(y), s(a).th, "group/th"])
+    validator: (l) => i.textAlign.includes(l)
+  },
+  tooltip: String
+}, S = { name: "XTableHeader", validators: i }, T = /* @__PURE__ */ g({
+  ...S,
+  props: N,
+  setup(l) {
+    const m = l, { styles: y, classes: a, className: f } = b("TableHeader", {}, m);
+    return (e, t) => (o(), n("th", {
+      style: k(s(y)),
+      class: p([s(f), s(a).th, "group/th"])
     }, [
-      v(t.$slots, "default"),
-      t.sortable ? (l(), r("svg", {
-        key: 0,
-        class: u([
-          s(a).sortIcon,
-          [t.sort && [1, -1].includes(t.sort) ? "" : "invisible group-hover/th:visible"]
-        ]),
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        "stroke-linejoin": "round",
-        "stroke-linecap": "round",
-        fill: "none",
-        role: "presentation"
-      }, [
-        t.sort === -1 ? (l(), r(d, { key: 0 }, [
-          e[0] || (e[0] = n("line", {
-            x1: "12",
-            y1: "5",
-            x2: "12",
-            y2: "19"
-          }, null, -1)),
-          e[1] || (e[1] = n("polyline", { points: "19 12 12 19 5 12" }, null, -1))
-        ], 64)) : t.sort === 1 ? (l(), r(d, { key: 1 }, [
-          e[2] || (e[2] = n("line", {
-            x1: "12",
-            y1: "19",
-            x2: "12",
-            y2: "5"
-          }, null, -1)),
-          e[3] || (e[3] = n("polyline", { points: "5 12 12 5 19 12" }, null, -1))
-        ], 64)) : (l(), r("path", c))
-      ], 2)) : k("", !0)
+      r("div", B, [
+        c(e.$slots, "default"),
+        e.tooltip ? (o(), v(h, {
+          key: 0,
+          content: e.tooltip
+        }, null, 8, ["content"])) : d("", !0),
+        e.sortable ? (o(), n("svg", {
+          key: 1,
+          class: p(["shrink-0", [
+            s(a).sortIcon,
+            [e.sort && [1, -1].includes(e.sort) ? "" : "invisible group-hover/th:visible"],
+            [e.sort !== -1 && e.sort !== 1 ? "text-secondary-400" : "text-primary-700"]
+          ]]),
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          "stroke-linejoin": "round",
+          "stroke-linecap": "round",
+          fill: "none",
+          role: "presentation"
+        }, [
+          e.sort === -1 ? (o(), n(u, { key: 0 }, [
+            t[0] || (t[0] = r("line", {
+              x1: "12",
+              y1: "5",
+              x2: "12",
+              y2: "19"
+            }, null, -1)),
+            t[1] || (t[1] = r("polyline", { points: "19 12 12 19 5 12" }, null, -1))
+          ], 64)) : e.sort === 1 ? (o(), n(u, { key: 1 }, [
+            t[2] || (t[2] = r("line", {
+              x1: "12",
+              y1: "19",
+              x2: "12",
+              y2: "5"
+            }, null, -1)),
+            t[3] || (t[3] = r("polyline", { points: "5 12 12 5 19 12" }, null, -1))
+          ], 64)) : (o(), n("path", C))
+        ], 2)) : d("", !0)
+      ])
     ], 6));
   }
 });
 export {
-  N as default
+  T as default
 };

package/lib/components/table/theme/TableHead.base.theme.js

@@ -1,7 +1,7 @@
 const s = {
   classes: {
     thead: ({ props: t }) => {
-      const e = ["align-bottom bg-secondary-50 dark:bg-secondary-700"];
+      const e = ["align-bottom bg-secondary-100 dark:bg-secondary-700"];
       return t.stickyHeader && e.push("sticky top-0 z-10"), e;
     },
     row: "text-sm text-secondary-700 dark:text-secondary-200 border-b"

package/lib/components/table/theme/TableHeader.base.theme.js

@@ -4,9 +4,9 @@ const s = {
       const t = ["relative p-2.5 font-medium"];
       return e.sortable && t.push("cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out"), e.textAlign === "left" && t.push("text-left"), e.textAlign === "right" && t.push("text-right"), e.textAlign === "center" && t.push("text-center"), e.textAlign === "justify" && t.push("text-justify"), t;
     },
-    sortIcon: ({ props: e }) => ["absolute stroke-2 w-3 h-3 top-3.5 right-0.5"]
+    sortIcon: ({ props: e }) => ["stroke-2 w-3 h-3"]
   }
-}, r = s;
+}, n = s;
 export {
-  r as default
+  n as default
 };

package/lib/components/table/theme/TableRow.base.theme.js

@@ -2,7 +2,7 @@ const s = {
   classes: {
     row: ({ props: r }) => {
       const e = [];
-      return r.selected && e.push("shadow-[inset_3px_0] shadow-primary-500"), r.striped ? e.push("even:bg-secondary-50 dark:even:bg-secondary-700") : e.push("border-b border-secondary-200 dark:border-secondary-700"), r.pointer && e.push("hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer"), e;
+      return r.selected && e.push("shadow-[inset_2px_0] shadow-primary-500"), r.striped ? e.push("even:bg-secondary-50 dark:even:bg-secondary-700") : e.push("border-b border-secondary-200 dark:border-secondary-700"), r.pointer && e.push("hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer"), e;
     }
   }
 }, o = s;