@nmorph/nmorph-ui-kit 2.2.36 → 2.2.38

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue2.js

@@ -1,14 +1,15 @@
 import './NmorphTimePicker.css';
-import { defineComponent as ee, ref as g, computed as n, watch as te } from "vue";
-import { NmorphComponentHeight as _ } from "../../../types/index.js";
-import { useI18n as oe } from "vue-i18n";
-import { useModifiers as $ } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as re } from "../nmorph-form/use-form-item-input.js";
-import ne from "../../../assets/icons/clock.svg.js";
-import le from "../../../assets/icons/circle-close.svg.js";
-import ue from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import se from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const Se = /* @__PURE__ */ ee({
+import { defineComponent as te, ref as y, computed as n, watch as oe } from "vue";
+import { NmorphComponentHeight as O } from "../../../types/index.js";
+import { useI18n as re } from "vue-i18n";
+import { useModifiers as H } from "../../../utils/create-modifiers.js";
+import { toCssSize as ne } from "../../../utils/common.js";
+import { useFormItemInput as le, useFormItemModel as ue } from "../nmorph-form/use-form-item-input.js";
+import se from "../../../assets/icons/clock.svg.js";
+import ae from "../../../assets/icons/circle-close.svg.js";
+import ie from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import de from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const Ne = /* @__PURE__ */ te({
   __name: "NmorphTimePicker",
   props: {
     modelValue: { type: [String, null], required: !1, default: null },
@@ -30,86 +31,87 @@ const Se = /* @__PURE__ */ ee({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur"],
-  setup(O, { expose: H, emit: k }) {
-    const t = O, s = k, { t: T } = oe(), { id: B, name: M, autocomplete: P, tabindex: z } = re(t), a = g(!1), c = g(!1), w = g(null), m = (e) => String(e).padStart(2, "0"), p = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
+  setup(M, { expose: k, emit: B }) {
+    const t = M, m = B, { t: I } = re(), { id: P, name: $, autocomplete: z, tabindex: D } = le(t), { modelValue: s, updateModelValue: p } = ue(
+      t,
+      (e) => m("update:model-value", e),
+      null
+    ), a = y(!1), f = y(!1), x = y(null), c = (e) => String(e).padStart(2, "0"), h = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
       if (!e) return null;
       const o = e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
       if (!o) return null;
-      const r = Number(o[1]), S = Number(o[2]), d = Number(o[3] || 0);
-      return r > 23 || S > 59 || d > 59 ? null : { hour: r, minute: S, second: d };
-    }, v = (e) => {
-      const o = `${m(e.hour)}:${m(e.minute)}`;
-      return t.showSeconds ? `${o}:${m(e.second)}` : o;
-    }, f = (e) => e.hour * 3600 + e.minute * 60 + e.second, y = n(() => i(t.minTime)), N = n(() => i(t.maxTime)), x = n(() => i(t.modelValue)), u = g(x.value || { hour: 0, minute: 0, second: 0 }), V = n(() => t.placeholder || T("pickATime"));
-    te(
-      () => t.modelValue,
-      (e) => {
-        const o = i(e);
-        o && (u.value = o);
-      }
-    );
-    const h = (e) => {
-      const o = f(e);
-      return !!(y.value && o < f(y.value) || N.value && o > f(N.value));
+      const r = Number(o[1]), g = Number(o[2]), d = Number(o[3] || 0);
+      return r > 23 || g > 59 || d > 59 ? null : { hour: r, minute: g, second: d };
+    }, N = (e) => {
+      const o = `${c(e.hour)}:${c(e.minute)}`;
+      return t.showSeconds ? `${o}:${c(e.second)}` : o;
+    }, v = (e) => e.hour * 3600 + e.minute * 60 + e.second, q = n(() => i(t.minTime)), T = n(() => i(t.maxTime)), C = n(() => i(s.value)), u = y(C.value || { hour: 0, minute: 0, second: 0 }), _ = n(() => t.placeholder || I("pickATime"));
+    oe(s, (e) => {
+      const o = i(e);
+      o && (u.value = o);
+    });
+    const S = (e) => {
+      const o = v(e);
+      return !!(q.value && o < v(q.value) || T.value && o > v(T.value));
     }, b = (e, o, r) => {
-      const S = p(r), d = /* @__PURE__ */ new Set();
-      for (let l = 0; l <= o; l += S) d.add(l);
-      return d.add(u.value[e]), Array.from(d).filter((l) => l >= 0 && l <= o).sort((l, q) => l - q).map((l) => {
-        const q = { ...u.value, [e]: l };
+      const g = h(r), d = /* @__PURE__ */ new Set();
+      for (let l = 0; l <= o; l += g) d.add(l);
+      return d.add(u.value[e]), Array.from(d).filter((l) => l >= 0 && l <= o).sort((l, w) => l - w).map((l) => {
+        const w = { ...u.value, [e]: l };
         return {
-          label: m(l),
+          label: c(l),
           value: l,
-          disabled: h(q)
+          disabled: S(w)
         };
       });
-    }, D = n(() => b("hour", 23, t.hourStep)), A = n(() => b("minute", 59, t.minuteStep)), F = n(() => b("second", 59, t.secondStep)), R = (e, o) => {
+    }, F = n(() => b("hour", 23, t.hourStep)), A = n(() => b("minute", 59, t.minuteStep)), R = n(() => b("second", 59, t.secondStep)), U = (e, o) => {
       const r = { ...u.value, [e]: o };
-      h(r) || (u.value = r, s("update:model-value", v(r)));
-    }, U = () => {
-      s("update:model-value", null), a.value = !1;
+      S(r) || (u.value = r, p(N(r)));
     }, j = () => {
-      a.value = !1;
+      p(null), a.value = !1;
     }, E = () => {
-      t.disabled || (a.value = !a.value);
+      a.value = !1;
     }, G = () => {
-      c.value = !0, s("focus");
+      t.disabled || (a.value = !a.value);
     }, J = () => {
-      c.value = !1, s("blur");
-    }, K = (e) => {
+      f.value = !0, m("focus");
+    }, K = () => {
+      f.value = !1, m("blur");
+    }, L = (e) => {
       const o = e.target, r = i(o.value);
-      !r || h(r) || (u.value = r, s("update:model-value", v(r)));
-    }, L = n(() => t.modelValue || V.value), Q = n(
-      () => t.showSeconds ? p(t.secondStep) : p(t.minuteStep) * 60
-    ), W = n(() => t.clearable && !!t.modelValue && !t.disabled), X = n(
-      () => $({
-        nmorph: [_[t.height]],
+      !r || S(r) || (u.value = r, p(N(r)));
+    }, Q = n(() => s.value || _.value), W = n(
+      () => t.showSeconds ? h(t.secondStep) : h(t.minuteStep) * 60
+    ), X = n(() => t.clearable && !!s.value && !t.disabled), Y = n(
+      () => H({
+        nmorph: [O[t.height]],
         "nmorph-time-picker": [
-          `${t.disabled && "disabled"}`,
-          `${a.value && "open"}`,
-          `${c.value && "focus"}`,
-          `${!t.modelValue && "placeholder"}`
+          t.disabled && "disabled",
+          a.value && "open",
+          f.value && "focus",
+          !s.value && "placeholder"
         ]
       })
-    ), Y = n(
-      () => $({
-        nmorph: [_[t.height]]
+    ), Z = n(
+      () => H({
+        nmorph: [O[t.height]]
       })
-    ), I = (e) => typeof e == "number" ? `${e}px` : e, Z = n(() => ({
-      ...t.width !== void 0 && { "--width": I(t.width) }
+    ), ee = n(() => ({
+      ...t.width !== void 0 && { "--width": ne(t.width) }
     }));
-    H({ inputDOMRef: w });
-    const C = { props: t, emit: s, t: T, id: B, name: M, autocomplete: P, tabindex: z, open: a, focused: c, inputDOMRef: w, pad: m, normalizeStep: p, parseTime: i, formatTime: v, timeToSeconds: f, minTimeParts: y, maxTimeParts: N, modelTimeParts: x, pickerValue: u, placeholderText: V, isOutsideRange: h, getUnitOptions: b, hourOptions: D, minuteOptions: A, secondOptions: F, selectUnit: R, clearHandler: U, closeHandler: j, toggleOpen: E, focusHandler: G, blurHandler: J, nativeInputHandler: K, displayValue: L, inputStep: Q, showClearButton: W, modifiers: X, optionHeightModifiers: Y, getCssSize: I, styles: Z, get NmorphDropdown() {
-      return se;
+    k({ inputDOMRef: x });
+    const V = { props: t, emit: m, t: I, id: P, name: $, autocomplete: z, tabindex: D, modelValue: s, updateModelValue: p, open: a, focused: f, inputDOMRef: x, pad: c, normalizeStep: h, parseTime: i, formatTime: N, timeToSeconds: v, minTimeParts: q, maxTimeParts: T, modelTimeParts: C, pickerValue: u, placeholderText: _, isOutsideRange: S, getUnitOptions: b, hourOptions: F, minuteOptions: A, secondOptions: R, selectUnit: U, clearHandler: j, closeHandler: E, toggleOpen: G, focusHandler: J, blurHandler: K, nativeInputHandler: L, displayValue: Q, inputStep: W, showClearButton: X, modifiers: Y, optionHeightModifiers: Z, styles: ee, get NmorphDropdown() {
+      return de;
     }, get NmorphIcon() {
-      return ue;
+      return ie;
     }, get NmorphIconCircleClose() {
-      return le;
+      return ae;
     }, get NmorphIconClock() {
-      return ne;
+      return se;
     } };
-    return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
+    return Object.defineProperty(V, "__isScriptSetup", { enumerable: !1, value: !0 }), V;
   }
 });
 export {
-  Se as default
+  Ne as default
 };

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue2.js

@@ -20,7 +20,7 @@ const Y = /* @__PURE__ */ E({
     w();
     const t = b, s = y, g = v(
       () => q({
-        "nmorph-backtop": [`${n.value && "show"}`, t.design]
+        "nmorph-backtop": [n.value && "show", t.design]
       })
     ), N = v(() => ({
       "--nmorph-backtop-right": `${t.right}px`,

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js

@@ -1,9 +1,10 @@
 import './NmorphDropdown.css';
-import { defineComponent as w, ref as q, toRef as r, computed as n, watch as b } from "vue";
-import { useModifiers as v } from "../../../utils/create-modifiers.js";
+import { defineComponent as w, ref as q, toRef as t, computed as l, watch as v } from "vue";
+import { useModifiers as b } from "../../../utils/create-modifiers.js";
+import { toCssSize as d } from "../../../utils/common.js";
 import { usePlacement as x } from "../../../hooks/use-placement.js";
 import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const k = /* @__PURE__ */ w({
+const B = /* @__PURE__ */ w({
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
@@ -25,46 +26,46 @@ const k = /* @__PURE__ */ w({
     hideShadow: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["on-outside-click", "on-escape-keydown"],
-  setup(f, { expose: m, emit: c }) {
-    m();
-    const e = f, l = c, i = q(null), { placementCoords: d, placementReady: a, adjustPlacement: s } = x({
-      initialPlacement: r(e, "placement"),
+  setup(p, { expose: f, emit: m }) {
+    f();
+    const e = p, r = m, i = q(null), { placementCoords: o, placementReady: n, adjustPlacement: a } = x({
+      initialPlacement: t(e, "placement"),
       contentDOMElement: i,
-      relativeElement: r(e, "relativeElement"),
-      yOffset: r(e, "yOffset"),
-      xOffset: r(e, "xOffset"),
-      enabled: r(e, "open")
-    }), y = n(
-      () => v({
-        "nmorph-dropdown": [`${!e.open && "closed"}`, `${e.hideShadow && "hide-shadow"}`]
+      relativeElement: t(e, "relativeElement"),
+      yOffset: t(e, "yOffset"),
+      xOffset: t(e, "xOffset"),
+      enabled: t(e, "open")
+    }), c = l(
+      () => b({
+        "nmorph-dropdown": [!e.open && "closed", e.hideShadow && "hide-shadow"]
       })
-    ), o = (t) => typeof t == "number" ? `${t}px` : t, u = n(
-      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
-    ), h = n(() => ({
-      "--nmorph-dropdown-width": u.value,
-      "--nmorph-dropdown-min-width": o(e.minWidth) || "auto",
-      "--nmorph-dropdown-max-width": o(e.maxWidth) || "none",
-      left: d.value.x,
-      top: d.value.y,
-      visibility: e.open && a.value ? "visible" : "hidden"
+    ), s = l(
+      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : d(e.width)
+    ), h = l(() => ({
+      "--nmorph-dropdown-width": s.value,
+      "--nmorph-dropdown-min-width": d(e.minWidth) || "auto",
+      "--nmorph-dropdown-max-width": d(e.maxWidth) || "none",
+      left: o.value.x,
+      top: o.value.y,
+      visibility: e.open && n.value ? "visible" : "hidden"
     }));
-    b(
+    v(
       () => e.open,
-      (t) => {
-        t && s();
+      (y) => {
+        y && a();
       },
       { flush: "post" }
     );
-    const p = { props: e, emit: l, dropdownDOMRef: i, placementCoords: d, placementReady: a, adjustPlacement: s, modifiers: y, getCssSize: o, width: u, dropdownStyle: h, outsideClickHandler: () => {
-      l("on-outside-click");
+    const u = { props: e, emit: r, dropdownDOMRef: i, placementCoords: o, placementReady: n, adjustPlacement: a, modifiers: c, width: s, dropdownStyle: h, outsideClickHandler: () => {
+      r("on-outside-click");
     }, escapeHandler: () => {
-      l("on-escape-keydown");
+      r("on-escape-keydown");
     }, get NmorphOverlay() {
       return O;
     } };
-    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
   }
 });
 export {
-  k as default
+  B as default
 };

package/dist/components/navigation/nmorph-tabs/NmorphTabs.vue2.js

@@ -15,7 +15,7 @@ const D = /* @__PURE__ */ b({
     d();
     const e = u, t = i, l = p(
       () => I({
-        "nmorph-tabs": [`${e.stretch && "stretch"}`]
+        "nmorph-tabs": [e.stretch && "stretch"]
       })
     ), m = (n) => {
       if (n.disabled) return;

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue2.js

@@ -22,7 +22,7 @@ const L = /* @__PURE__ */ _({
       () => t.zIndex
     ), w = i(
       () => F({
-        "nmorph-overlay": [`${t.show && "show"}`, `${t.transparent && "transparent"}`]
+        "nmorph-overlay": [t.show && "show", t.transparent && "transparent"]
       })
     ), k = i(() => t.disabledTeleport || !t.show || typeof document > "u"), x = () => {
       s("on-outside-click");

package/dist/hooks/use-common-styles.js

@@ -1,17 +1,17 @@
-import { nmorphCombined as p, nmorphInset as r, nmorphOutset as n, title1 as s, title2 as l, title3 as d, title4 as m, body1 as e, body2 as c, body3 as a, body4 as b } from "../utils/theme-style.js";
-const u = {
-  "nmorph-body-4": b,
-  "nmorph-body-3": a,
-  "nmorph-body-2": c,
+import { nmorphCombined as i, nmorphInset as s, nmorphOutset as h, title1 as d, title2 as l, title3 as p, title4 as c, body1 as e, body2 as b, body3 as r, body4 as m } from "../utils/theme-style.js";
+const v = {
+  "nmorph-body-4": m,
+  "nmorph-body-3": r,
+  "nmorph-body-2": b,
   "nmorph-body-1": e,
-  "nmorph-title-4": m,
-  "nmorph-title-3": d,
+  "nmorph-title-4": c,
+  "nmorph-title-3": p,
   "nmorph-title-2": l,
-  "nmorph-title-1": s,
-  "nmorph--shadow-outset": n,
-  "nmorph--shadow-inset": r,
-  "nmorph--shadow-combined": p
-}, v = () => {
+  "nmorph-title-1": d,
+  "nmorph--shadow-outset": h,
+  "nmorph--shadow-inset": s,
+  "nmorph--shadow-combined": i
+}, u = () => {
   let t = `
     :root {
       --font-size-tiny: 10px;
@@ -284,7 +284,7 @@ const u = {
     }
 
     .nmorph--thin-component.nmorph-native-input {
-      ${a()}
+      ${r()}
     }
 
     .nmorph-native-input:focus {
@@ -316,212 +316,6 @@ const u = {
       }
     }
 
-    .nmorph-avatar {
-      position: relative;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .nmorph-avatar--circle {
-      border-radius: var(--border-radius-circular);
-    }
-
-    .nmorph-avatar--square {
-      border-radius: var(--default-border-radius);
-    }
-
-    .nmorph-avatar > .nmorph-image {
-      position: absolute;
-      --width: var(--nmorph-avatar-size);
-      --height: var(--nmorph-avatar-size);
-      padding: var(--nmorph-avatar-image-padding);
-      border-radius: var(--nmorph-avatar-radius);
-    }
-
-    .nmorph-avatar.nmorph--shadow-combined {
-      border: var(--nmorph-avatar-frame-border) solid var(--nmorph-main-color);
-      background: var(--nmorph-main-color);
-      box-shadow: var(--nmorph-shadow-combined-dark);
-    }
-
-    .nmorph-avatar > .nmorph-image > img {
-      border-radius: var(--nmorph-avatar-image-radius);
-    }
-
-    .nmorph-avatar__initials {
-      color: var(--nmorph-text-color);
-      font-weight: 600;
-      line-height: 1;
-    }
-
-    .nmorph-avatar--preview {
-      cursor: pointer;
-    }
-
-    .nmorph-avatar--preview:hover > .nmorph-image {
-      filter: brightness(0.8);
-    }
-
-    .nmorph-image {
-      --width: auto;
-      --height: 100%;
-      width: var(--width);
-      height: var(--height);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .nmorph-image.nmorph--shadow-combined {
-      border: var(--nmorph-image-frame-border) solid var(--nmorph-main-color);
-    }
-
-    .nmorph-image img {
-      width: 100%;
-      height: 100%;
-      object-fit: var(--nmorph-image-fit);
-    }
-
-    .nmorph-image__loading,
-    .nmorph-image__load-failed {
-      padding: 1rem;
-    }
-
-    .nmorph-image--hide img {
-      width: 0;
-      height: 0;
-      opacity: 0;
-    }
-
-    .nmorph-text-input {
-      display: flex;
-      flex: 1 1 auto;
-      flex-direction: column;
-      align-items: flex-start;
-      min-width: 0;
-      --prepend-icon-indent: 8px;
-      --prepend-icon-size: 14px;
-    }
-
-    .nmorph-text-input__input-side {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      width: 100%;
-    }
-
-    .nmorph-text-input__prepend-icon {
-      position: absolute;
-      left: 0;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--prepend-icon-size);
-      min-width: var(--prepend-icon-size);
-      height: var(--prepend-icon-size);
-      min-height: var(--prepend-icon-size);
-      margin-left: var(--prepend-icon-indent);
-      pointer-events: none;
-    }
-
-    .nmorph-text-input__prepend-icon svg,
-    .nmorph-text-input__prepend-icon .nmorph-icon,
-    .nmorph-text-input__prepend-icon .nmorph-icon__content {
-      width: 100%;
-      min-width: 100%;
-      height: 100%;
-      min-height: 100%;
-    }
-
-    .nmorph-text-input__prepend-icon svg {
-      fill: var(--nmorph-text-color);
-      stroke-width: 0;
-    }
-
-    .nmorph-text-input__prepend-icon path {
-      stroke: var(--nmorph-text-color);
-    }
-
-    .nmorph-text-input input {
-      width: 100%;
-      height: var(--height);
-      text-indent: var(--nmorph-text-input-indentation);
-      border: none;
-      border-radius: var(--default-border-radius);
-      ${r()}
-    }
-
-    .nmorph-text-input--with-action input {
-      padding-right: calc(var(--height) + var(--indentation-03));
-    }
-
-    .nmorph-text-input input:focus {
-      ${n()}
-      background: var(--nmorph-accent-color);
-      outline: none;
-    }
-
-    .nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon svg {
-      fill: var(--nmorph-focus-text-color);
-    }
-
-    .nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon path {
-      stroke: var(--nmorph-focus-text-color);
-    }
-
-    .nmorph-text-input input:-webkit-autofill,
-    .nmorph-text-input input:-webkit-autofill:hover,
-    .nmorph-text-input input:-webkit-autofill:active {
-      -webkit-text-fill-color: var(--nmorph-text-color);
-      caret-color: var(--nmorph-text-color);
-      box-shadow: var(--nmorph-shadow-inset), inset 0 0 0 1000px var(--nmorph-main-color);
-    }
-
-    .nmorph-text-input input:-webkit-autofill:focus {
-      -webkit-text-fill-color: var(--nmorph-focus-text-color);
-      caret-color: var(--nmorph-focus-text-color);
-      box-shadow: var(--nmorph-shadow-outset), inset 0 0 0 1000px var(--nmorph-accent-color);
-      outline: none;
-    }
-
-    .nmorph-text-input input:disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    .nmorph-text-input__password-btn {
-      position: absolute;
-      right: 0;
-      height: 100%;
-    }
-
-    .nmorph-text-input__password-btn .nmorph-button__content {
-      padding: var(--indentation-03);
-    }
-
-    .nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn {
-      margin-top: var(--indentation-00);
-    }
-
-    .nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button {
-      --height: var(--thin-component);
-    }
-
-    .nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon {
-      --color: var(--nmorph-white-color);
-    }
-
-    .nmorph-text-input.nmorph-button.nmorph--focused
-      .nmorph-text-input__password-btn
-      .nmorph-button:not(:disabled, [loading='true']):hover
-      .nmorph-icon {
-      --color: var(--nmorph-white-color);
-    }
-
     .list-enter-active,
     .list-leave-active {
       transition: all var(--transition-02) ease;
@@ -563,74 +357,20 @@ const u = {
       }
     }
 
-    .nmorph-scroll {
-      --thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
-      color-scheme: var(--nmorph-scroll-color-scheme, light);
-    }
-
-    @-moz-document url-prefix() {
-      .nmorph-scroll {
-        scrollbar-color: var(--thumb-color) transparent;
-        scrollbar-width: thin;
-      }
-    }
-
-    .nmorph-scroll::-webkit-scrollbar {
-      width: var(--bar-width);
-      height: var(--bar-height);
-      background-color: transparent;
-      cursor: pointer;
-      transition: width ease-in-out 0.2s;
-    }
-
-    .nmorph-scroll::-webkit-scrollbar-button,
-    .nmorph-scroll::-webkit-scrollbar-button:single-button,
-    .nmorph-scroll::-webkit-scrollbar-button:double-button,
-    .nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,
-    .nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,
-    .nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,
-    .nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment {
-      display: none !important;
-      width: 0 !important;
-      min-width: 0 !important;
-      max-width: 0 !important;
-      height: 0 !important;
-      min-height: 0 !important;
-      max-height: 0 !important;
-      border: 0 !important;
-      background: transparent !important;
-      background-image: none !important;
-      -webkit-appearance: none;
-      appearance: none;
-    }
-
-    .nmorph-scroll::-webkit-scrollbar-track {
-      border-radius: var(--border-radius-40);
-      ${r()}
-    }
-
-    .nmorph-scroll::-webkit-scrollbar-thumb {
-      background-color: var(--thumb-color);
-      border-radius: var(--border-radius-40);
-    }
-
-    .nmorph-scroll::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
   `;
-  for (const [i, h] of Object.entries(u))
+  for (const [a, n] of Object.entries(v))
     t += `
-.${i} {
-  ${h()}
+.${a} {
+  ${n()}
 }
 `;
   return t;
 }, g = () => {
   if (typeof document > "u" || document.getElementById("nmorph-common-styles")) return;
   const o = document.createElement("style");
-  o.id = "nmorph-common-styles", o.innerHTML = v(), document.head.appendChild(o);
+  o.id = "nmorph-common-styles", o.innerHTML = u(), document.head.appendChild(o);
 };
 export {
-  v as getCommonStyles,
+  u as getCommonStyles,
   g as useCommonStyles
 };