@codeandfunction/callaloo 3.16.4 → 3.16.6

package/dist/assets/CLInputMessages.css

@@ -1 +1 @@
-.clll-form-field{position:relative;flex:none;display:inline-flex;flex-direction:column;flex-wrap:wrap;box-sizing:border-box}.clll-form-field.clll-form-field--fluid{width:100%}.clll-form-field.clll-form-field--haspill>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-form-field.clll-form-field--horizontal{display:flex;flex-direction:row}.clll-form-field.clll-form-field--horizontal.clll-form-field--haspill .clll-input__pill,.clll-form-field.clll-form-field--horizontal.clll-form-field--haspill .clll-input__spacer{width:50%}.clll-input__message{margin-top:var(--clll-unit-1);width:100%}.clll-input__message .clll-input__message__text{font-size:var(--clll-unit-3);font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;margin:0}
+.clll-form-field{position:relative;flex:none;display:inline-flex;flex-direction:column;flex-wrap:wrap;box-sizing:border-box}.clll-form-field.clll-form-field--fluid{width:100%}.clll-form-field.clll-form-field--haspill>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-form-field.clll-form-field--horizontal{display:flex;flex-direction:row}.clll-form-field.clll-form-field--horizontal.clll-form-field--haspill .clll-input__pill,.clll-form-field.clll-form-field--horizontal.clll-form-field--haspill .clll-input__spacer{width:50%}.clll-input__message{margin-top:var(--clll-unit-1);width:100%;color:var(--clll-input-message-color, inherit)}.clll-input__message .clll-input__message__text{font-size:var(--clll-unit-3);font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;margin:0}

package/dist/chunks/{CLA11yButton.vue_vue_type_style_index_0_lang-C9OzrJ6Y.js → CLA11yButton.vue_vue_type_style_index_0_lang-Drw6jsX_.js}

@@ -1,19 +1,19 @@
-import { defineComponent as b, ref as p, computed as y, createElementBlock as k, openBlock as C, withKeys as B, normalizeClass as E, unref as s, renderSlot as x } from "vue";
-import { CLColors as A } from "../index.js";
-import { a as _ } from "./utils-Cm9XP0Vu.js";
-const g = ["data-testid", "tabindex"], w = /* @__PURE__ */ b({
+import { defineComponent as y, ref as b, computed as p, createElementBlock as k, openBlock as C, withKeys as B, normalizeStyle as E, normalizeClass as x, unref as d, renderSlot as A } from "vue";
+import { CLColors as _ } from "../index.js";
+import { a as g } from "./utils-cOhtsyeB.js";
+const h = ["data-testid", "tabindex"], w = /* @__PURE__ */ y({
   name: "CLA11yButton",
   __name: "CLA11yButton",
   props: {
-    color: { default: A.Neutral },
+    color: { default: _.Neutral },
     enabled: { type: Boolean, default: !1 },
     fluid: { type: Boolean, default: !0 },
     rounded: { type: Boolean, default: !0 },
     testId: { default: "clll-a11y__button" }
   },
   setup(e) {
-    const t = e, u = ["a", "button"], n = p(), i = "clll-a11y__button", f = y(() => [
-      i,
+    const t = e, i = ["a", "button"], n = b(), u = "clll-a11y__button", f = p(() => [
+      u,
       t.enabled ? "--enabled" : "",
       t.rounded ? "--rounded" : "",
       t.fluid ? "--fluid" : ""
@@ -23,21 +23,22 @@ const g = ["data-testid", "tabindex"], w = /* @__PURE__ */ b({
         ...n.value?.querySelectorAll("[data-expand-click-area]") ?? []
       ];
       if (r.length) {
-        const d = r[0], m = o ? u.includes(o.tagName.toLowerCase()) : null;
-        !o && d !== l.target && !m && d.click();
+        const s = r[0], m = o ? i.includes(o.tagName.toLowerCase()) : null;
+        !o && s !== l.target && !m && s.click();
       }
     };
     return (l, a) => (C(), k("div", {
       ref_key: "refExpandedArea",
       ref: n,
-      class: E([s(f), s(_)({ color: e.color })]),
+      class: x(d(f)),
       "data-testid": e.testId,
       tabindex: e.enabled ? 0 : void 0,
+      style: E(d(g)({ color: e.color })),
       onClick: c,
       onKeyup: B(c, ["enter"])
     }, [
-      x(l.$slots, "default")
-    ], 42, g));
+      A(l.$slots, "default")
+    ], 46, h));
   }
 });
 export {

package/dist/chunks/{CLButton.vue_vue_type_style_index_0_lang--MP4S4D4.js → CLButton.vue_vue_type_style_index_0_lang-CQipGQ26.js}

@@ -1,8 +1,8 @@
 import { defineComponent as C, useSlots as h, ref as S, computed as z, onMounted as B, nextTick as g, createBlock as n, openBlock as i, resolveDynamicComponent as L, normalizeStyle as k, normalizeClass as s, unref as l, withCtx as w, createCommentVNode as d, createElementBlock as A, renderSlot as R } from "vue";
-import { _ as c } from "./CLIcon.vue_vue_type_style_index_0_lang-B_341q_b.js";
-import { _ as T } from "./CLSpinner.vue_vue_type_style_index_0_lang-DyT8L74M.js";
+import { _ as c } from "./CLIcon.vue_vue_type_style_index_0_lang-R0Nhlutc.js";
+import { _ as T } from "./CLSpinner.vue_vue_type_style_index_0_lang-BQ1w9Ik9.js";
 import { CLColorVariants as I, CLButtonTypes as x, CLLinkTarget as M, CLSizes as o, CLIconSizes as m, CLColors as F, CLAlign as b, CLPosition as N } from "../index.js";
-import { b as V } from "./utils-Cm9XP0Vu.js";
+import { b as V } from "./utils-cOhtsyeB.js";
 import { useHasSlotContent as D } from "../composables/useHasSlotContent.js";
 const J = /* @__PURE__ */ C({
   name: "CLButton",
@@ -81,7 +81,7 @@ const J = /* @__PURE__ */ C({
       ref_key: "buttonRef",
       ref: u,
       "aria-label": e.ariaLabel,
-      class: s([l(y), l(V)({ color: e.color, variant: e.variant })]),
+      class: s(l(y)),
       "data-testid": e.testId,
       disabled: e.as === "button" ? e.busy || e.disabled : void 0,
       form: e.as === "button" ? e.form : void 0,
@@ -89,7 +89,7 @@ const J = /* @__PURE__ */ C({
       target: e.as === "a" ? e.target : void 0,
       title: e.title,
       type: e.as === "button" ? e.type : void 0,
-      style: k({ width: e.width, height: e.height }),
+      style: k({ width: e.width, height: e.height, ...l(V)({ color: e.color, variant: e.variant }) }),
       onClick: $
     }, {
       default: w(() => [

package/dist/chunks/CLCard.vue_vue_type_style_index_0_lang-CAjsSjd9.js

@@ -0,0 +1,248 @@
+import { defineComponent as I, useSlots as z, ref as v, computed as D, onMounted as F, nextTick as K, createElementBlock as r, openBlock as i, withKeys as M, normalizeStyle as k, normalizeClass as n, unref as l, createCommentVNode as d, createElementVNode as u, withDirectives as B, createVNode as q, vShow as A, createBlock as c, renderSlot as g, Fragment as G, withCtx as y, createTextVNode as b, toDisplayString as C } from "vue";
+import { _ as E } from "./CLHeading.vue_vue_type_style_index_0_lang-nUnSpm32.js";
+import { _ as j } from "./CLLink.vue_vue_type_style_index_0_lang-DCwTmOOz.js";
+import { _ as h } from "./CLSkeleton.vue_vue_type_style_index_0_lang--LtiFHSO.js";
+import { _ as J } from "./CLText.vue_vue_type_style_index_0_lang-BJoS9z9q.js";
+import { CLColorVariants as O, CLCardTypes as P, CLHeadingTypes as Q, CLHeadingLevels as U, CLLinkTarget as X, CLOverflow as Y, CLLoading as Z, CLColors as p, CLAlign as _, CLOrder as N, CLTextTypes as ee } from "../index.js";
+import { c as te } from "./utils-zJwcNHl4.js";
+import { useHasSlotContent as ae } from "../composables/useHasSlotContent.js";
+const le = ["data-testid", "tabindex"], ie = ["alt", "loading", "src"], ne = ["alt", "loading", "src"], de = ["aria-label", "href", "target"], ye = /* @__PURE__ */ I({
+  name: "CLCard",
+  __name: "CLCard",
+  props: {
+    active: { type: Boolean, default: !1 },
+    align: { default: _.Left },
+    ariaLabel: {},
+    borderRadius: {},
+    bordered: { type: Boolean, default: !0 },
+    busy: { type: Boolean, default: !1 },
+    byline: {},
+    color: { default: p.Neutral },
+    compact: { type: Boolean, default: !1 },
+    elevated: { type: Boolean, default: !1 },
+    forwardRef: {},
+    height: { default: "auto" },
+    href: {},
+    image: {},
+    imageAltText: { default: "" },
+    imageHeight: { default: "auto" },
+    imageLoading: { default: Z.Eager },
+    imageOrder: {},
+    imageWidth: { default: "auto" },
+    onClick: {},
+    overflow: { default: Y.Hidden },
+    padded: { type: Boolean, default: !0 },
+    rounded: { type: Boolean, default: !0 },
+    target: { default: X.Self },
+    testId: { default: "clll-card" },
+    title: {},
+    titleHLevel: { default: U.H2 },
+    titleType: { default: Q.SubSection },
+    truncateTitle: { type: Boolean, default: !1 },
+    type: { default: P.Medium },
+    variant: { default: O.Soft },
+    width: { default: "auto" }
+  },
+  setup(e) {
+    const t = "clll-card", a = e, L = ae(), w = z(), $ = v(), T = v(), R = ["a", "button"], m = v(), V = D(() => [
+      t,
+      `${t}--${a.type}`,
+      `${t}--${a.color}-${a.variant}`,
+      `${t}--${a.variant}`,
+      `${t}--align-${a.align}`,
+      a.rounded ? `${t}--rounded` : `${t}--box`,
+      a.bordered ? `${t}--bordered` : "",
+      a.borderRadius ? `${t}--${a.borderRadius}` : "",
+      a.busy ? `${t}--busy` : `${t}--ready`,
+      a.compact ? `${t}--compact` : `${t}--no-compact`,
+      a.title || a.byline ? `${t}--has-header` : `${t}--no-header`,
+      $.value ? `${t}--has-heading` : `${t}--no-heading`,
+      L.value ? `${t}--has-content` : `${t}--no-content`,
+      T.value ? `${t}--has-footer` : `${t}--no-footer`,
+      a.image ? `${t}--has-image` : `${t}--has-no-image`,
+      a.imageOrder ? `${t}--image-${a.imageOrder}` : "",
+      a.active ? `${t}--active` : `${t}--inactive`,
+      a.onClick ? `${t}--has-link` : "",
+      a.truncateTitle ? `${t}--has-truncated-title` : "",
+      a.elevated ? `${t}--elevated` : "",
+      a.overflow ? `${t}--overflow-${a.overflow}` : "",
+      a.padded ? "" : `${t}--no-padding`
+    ]), H = (o) => {
+      if (a.busy || !a.onClick) return;
+      const { target: s } = o, f = s ? s.closest("a,button") : void 0, x = [
+        ...m.value?.querySelectorAll("[data-expand-click-area]") ?? []
+      ];
+      if (x.length) {
+        const S = x[0], W = f ? R.includes(f.tagName.toLowerCase()) : null;
+        !f && S !== o.target && !W && S.click();
+      }
+    };
+    return F(async () => {
+      await K(), m.value && a.forwardRef?.(m.value), $.value = w?.heading, T.value = w?.footer;
+    }), (o, s) => (i(), r("div", {
+      ref_key: "refExpandedArea",
+      ref: m,
+      class: n(l(V)),
+      style: k({ ...l(te)({ color: e.color, variant: e.variant }), width: e.width, height: e.height, overflow: e.overflow }),
+      "data-testid": e.testId,
+      tabindex: e.onClick ? 0 : void 0,
+      onClick: H,
+      onKeyup: M(H, ["enter"])
+    }, [
+      e.image && (e.imageOrder === l(N).Before || !e.imageOrder) ? (i(), r("div", {
+        key: 0,
+        class: n(`${t}__image`),
+        style: k({ width: e.imageWidth, height: e.imageHeight })
+      }, [
+        B(q(l(h), {
+          width: e.imageWidth,
+          height: e.imageHeight,
+          rounded: !1
+        }, null, 8, ["width", "height"]), [
+          [A, e.busy]
+        ]),
+        B(u("img", {
+          alt: e.imageAltText,
+          class: n(`${t}__image__elem`),
+          loading: e.imageLoading,
+          src: e.image
+        }, null, 10, ie), [
+          [A, !e.busy]
+        ])
+      ], 6)) : d("", !0),
+      u("div", {
+        class: n(`${t}__content`)
+      }, [
+        u("div", {
+          class: n(`${t}__header`)
+        }, [
+          e.busy ? (i(), c(l(h), {
+            key: 0,
+            height: "28px"
+          })) : d("", !0),
+          e.busy ? (i(), c(l(h), {
+            key: 1,
+            width: "70%",
+            height: "16px"
+          })) : d("", !0),
+          !e.onClick && !e.href ? (i(), r(G, { key: 2 }, [
+            g(o.$slots, "heading"),
+            e.title && !e.busy ? (i(), c(l(E), {
+              key: 0,
+              align: e.align,
+              class: n(`${t}__heading`),
+              color: e.color,
+              level: e.titleHLevel,
+              truncate: e.truncateTitle,
+              type: e.titleType
+            }, {
+              default: y(() => [
+                b(C(e.title), 1)
+              ]),
+              _: 1
+            }, 8, ["align", "class", "color", "level", "truncate", "type"])) : d("", !0)
+          ], 64)) : e.title || l($) && (e.onClick || e.href) ? (i(), c(l(j), {
+            key: 3,
+            "aria-label": e.ariaLabel,
+            color: e.color,
+            href: e.href,
+            target: e.target,
+            "on-click": e.onClick,
+            "data-expand-click-area": ""
+          }, {
+            default: y(() => [
+              g(o.$slots, "heading"),
+              e.title && !e.busy ? (i(), c(l(E), {
+                key: 0,
+                align: e.align,
+                class: n(`${t}__heading`),
+                color: e.color,
+                level: e.titleHLevel,
+                truncate: e.truncateTitle,
+                type: e.titleType
+              }, {
+                default: y(() => [
+                  b(C(e.title), 1)
+                ]),
+                _: 1
+              }, 8, ["align", "class", "color", "level", "truncate", "type"])) : d("", !0)
+            ]),
+            _: 3
+          }, 8, ["aria-label", "color", "href", "target", "on-click"])) : d("", !0),
+          g(o.$slots, "byline"),
+          e.byline && !e.busy ? (i(), c(l(J), {
+            key: 4,
+            align: e.align,
+            class: n(`${t}__byline`),
+            color: e.color,
+            type: l(ee).Small
+          }, {
+            default: y(() => [
+              b(C(e.byline), 1)
+            ]),
+            _: 1
+          }, 8, ["align", "class", "color", "type"])) : d("", !0)
+        ], 2),
+        u("div", {
+          class: n(`${t}__slot`)
+        }, [
+          u("div", {
+            ref: "slot-content",
+            class: n([`${t}__slot-content`, { busy: e.busy }])
+          }, [
+            l(L) && e.busy ? (i(), c(l(h), {
+              key: 0,
+              width: "100%",
+              height: "100%"
+            })) : d("", !0),
+            u("div", null, [
+              g(o.$slots, "default")
+            ])
+          ], 2)
+        ], 2),
+        u("div", {
+          class: n(`${t}__footer`)
+        }, [
+          g(o.$slots, "footer")
+        ], 2)
+      ], 2),
+      e.image && e.imageOrder === l(N).After ? (i(), r("div", {
+        key: 1,
+        class: n(`${t}__image`),
+        style: k({ width: e.imageWidth, height: e.imageHeight })
+      }, [
+        e.busy ? (i(), c(l(h), {
+          key: 0,
+          width: e.imageWidth,
+          height: e.imageHeight,
+          rounded: !1
+        }, null, 8, ["width", "height"])) : d("", !0),
+        g(o.$slots, "image"),
+        e.busy ? d("", !0) : (i(), r("img", {
+          key: 1,
+          alt: e.imageAltText,
+          class: n(`${t}__image__elem`),
+          loading: e.imageLoading,
+          src: e.image
+        }, null, 10, ne))
+      ], 6)) : d("", !0),
+      !e.title && (e.onClick || e.href) ? (i(), r("a", {
+        key: 2,
+        "aria-label": e.ariaLabel,
+        class: "sr-only",
+        href: e.href,
+        target: e.target,
+        "data-expand-click-area": "",
+        onClick: s[0] || (s[0] = //@ts-ignore
+        (...f) => e.onClick && e.onClick(...f))
+      }, null, 8, de)) : d("", !0),
+      e.onClick && e.variant !== l(O).Ghost ? (i(), r("div", {
+        key: 3,
+        class: n(`${t}__hover-elem`)
+      }, null, 2)) : d("", !0)
+    ], 46, le));
+  }
+});
+export {
+  ye as _
+};

package/dist/chunks/{CLFormLabel.vue_vue_type_script_setup_true_lang-DNZdlItJ.js → CLFormLabel.vue_vue_type_script_setup_true_lang-CaHCD2xF.js}

@@ -1,5 +1,5 @@
 import { defineComponent as r, createElementBlock as i, openBlock as o, normalizeClass as a, createVNode as m, unref as d, withCtx as n, createTextVNode as c, toDisplayString as f } from "vue";
-import { _ as u } from "./CLText.vue_vue_type_style_index_0_lang-CG6043pv.js";
+import { _ as u } from "./CLText.vue_vue_type_style_index_0_lang-BJoS9z9q.js";
 import { CLSizes as l, CLTextTypes as t } from "../index.js";
 const b = ["for", "data-testid"], h = /* @__PURE__ */ r({
   name: "CLFormLabel",

package/dist/chunks/{CLHeading.vue_vue_type_style_index_0_lang-BO5OiCE-.js → CLHeading.vue_vue_type_style_index_0_lang-nUnSpm32.js}

@@ -1,7 +1,7 @@
-import { defineComponent as i, computed as r, createBlock as u, openBlock as f, resolveDynamicComponent as p, unref as o, normalizeClass as m, withCtx as g, renderSlot as C } from "vue";
+import { defineComponent as i, computed as r, createBlock as u, openBlock as f, resolveDynamicComponent as p, unref as o, normalizeStyle as m, normalizeClass as g, withCtx as C, renderSlot as y } from "vue";
 import { CLHeadingTypes as l, CLColors as $, CLAlign as L, CLHeadingLevels as n } from "../index.js";
-import { t as h } from "./utils-CPp2QUlb.js";
-const T = /* @__PURE__ */ i({
+import { t as h } from "./utils-C_e2F4X7.js";
+const b = /* @__PURE__ */ i({
   name: "CLHeading",
   __name: "CLHeading",
   props: {
@@ -34,17 +34,18 @@ const T = /* @__PURE__ */ i({
       `${t}--${e.type}`,
       e.bolder ? `${t}--bolder` : ""
     ]);
-    return (d, y) => (f(), u(p(o(s)), {
-      class: m([o(c), o(h)({ color: a.color })]),
-      "data-testid": a.testId
+    return (d, H) => (f(), u(p(o(s)), {
+      class: g(o(c)),
+      "data-testid": a.testId,
+      style: m(o(h)({ color: a.color }))
     }, {
-      default: g(() => [
-        C(d.$slots, "default")
+      default: C(() => [
+        y(d.$slots, "default")
       ]),
       _: 3
-    }, 8, ["class", "data-testid"]));
+    }, 8, ["class", "data-testid", "style"]));
   }
 });
 export {
-  T as _
+  b as _
 };

package/dist/chunks/CLIcon.vue_vue_type_style_index_0_lang-R0Nhlutc.js

@@ -0,0 +1,84 @@
+import { defineComponent as p, computed as v, onMounted as z, createElementBlock as a, openBlock as m, normalizeStyle as X, normalizeClass as u, unref as h, createElementVNode as w } from "vue";
+import { CLMode as f, CLColors as g, CLColorVariants as B, CLIconSizes as o } from "../index.js";
+import { g as I } from "./utils-CS9Gz4oX.js";
+import { useTheme as S } from "../composables/useTheme.js";
+import { i as x } from "./helper--hRjZVm6.js";
+const M = ({ color: e = g.Neutral }) => {
+  const { colors: c, darkMode: t } = S(), n = t.value ? f.Light : f.Dark;
+  return {
+    "--clll-icon-color": I({
+      color: e,
+      colors: c.value,
+      mode: n,
+      variant: B.Text
+    })?.textBody ?? "inherit"
+  };
+}, E = ["data-testid"], $ = ["height", "width"], b = ["href"], O = /* @__PURE__ */ p({
+  name: "CLIcon",
+  __name: "CLIcon",
+  props: {
+    color: { default: g.Neutral },
+    name: {},
+    size: { default: o.Small },
+    testId: { default: "clll-icon" }
+  },
+  setup(e) {
+    const c = e, t = "clll-icon", n = {
+      [o.Tiny]: 20,
+      [o.Small]: 24,
+      [o.Medium]: 28,
+      [o.Large]: 32,
+      [o.XL]: 36,
+      [o.XXL]: 40,
+      [o.XXXL]: 44,
+      [o.XXXXL]: 48
+    }, r = v(() => [
+      t,
+      `${t}--${c.name}`,
+      `${t}--${c.size}`
+    ]), L = async () => {
+      if (!x) return;
+      let i = document.getElementById("clll-icons");
+      if (!i)
+        try {
+          const d = (/* @__PURE__ */ Object.assign({
+            "/src/icons.svg": () => import("./icons-QRYZHNAf.js").then((C) => C.default)
+          }))["/src/icons.svg"];
+          if (!d) {
+            console.warn("[Callaloo] Icon sprite not found");
+            return;
+          }
+          const y = await d();
+          if (i = document.getElementById("clll-icons"), i) return;
+          const s = document.createElement("div");
+          s.id = "clll-icons", s.style.display = "none", s.innerHTML = y.toString(), document.readyState === "loading" ? window.addEventListener("DOMContentLoaded", () => {
+            document.body.insertBefore(s, document.body.childNodes[0]);
+          }) : document.body.insertBefore(s, document.body.childNodes[0]);
+        } catch (l) {
+          console.error("[Callaloo] Failed to load icon sprite:", l);
+        }
+    };
+    return z(() => {
+      L();
+    }), (i, l) => (m(), a("span", {
+      class: u(h(r)),
+      "data-testid": e.testId,
+      style: X({ ...h(M)({ color: e.color }), width: n[e.size] + "px", height: n[e.size] + "px" })
+    }, [
+      (m(), a("svg", {
+        "aria-hidden": "true",
+        class: u(`${t}-sprite`),
+        height: n[e.size],
+        width: n[e.size],
+        viewBox: "0 0 24 24"
+      }, [
+        w("use", {
+          href: `#${e.name}`
+        }, null, 8, b)
+      ], 10, $))
+    ], 14, E));
+  }
+});
+export {
+  O as _
+};

package/dist/chunks/CLInputMessages.vue_vue_type_style_index_0_lang-Bt5xgOT4.js

@@ -0,0 +1,153 @@
+import { defineComponent as T, createElementBlock as y, openBlock as L, normalizeClass as D, unref as q, renderSlot as G, Fragment as O, renderList as A, normalizeStyle as R, createElementVNode as z, toDisplayString as F } from "vue";
+import { CLOrientation as V, CLMode as u, CLColorVariants as n, CLColors as E } from "../index.js";
+import { useTheme as B } from "../composables/useTheme.js";
+import { g as k } from "./utils-CS9Gz4oX.js";
+const v = "clll-form-field", K = /* @__PURE__ */ T({
+  __name: "CLFormField",
+  props: {
+    fluid: { type: Boolean },
+    hasPill: { type: Boolean },
+    hasCharCounter: { type: Boolean },
+    orientation: {}
+  },
+  setup(e) {
+    return (i, d) => (L(), y("div", {
+      class: D([
+        v,
+        e.fluid || e.orientation === q(V).Horizontal ? `${v}--fluid` : `${v}--fixed`,
+        e.orientation ? `${v}--${e.orientation}` : "",
+        e.hasPill ? `${v}--haspill` : "",
+        e.hasCharCounter ? `${v}--hascharcounter` : ""
+      ])
+    }, [
+      G(i.$slots, "default")
+    ], 2));
+  }
+}), Q = ({ color: e, disabled: i, variant: d }) => {
+  const { borderRadius: o, colors: t, darkMode: s } = B(), a = s.value ? u.Dark : u.Light, c = d === n.Ghost, b = k({
+    color: e,
+    colors: t.value,
+    mode: a,
+    variant: n.Solid
+  }), l = k({
+    color: e,
+    colors: t.value,
+    mode: a,
+    variant: n.Outline
+  }), r = s.value ? "black" : "white", C = l?.border, f = l?.disabled, m = s.value ? "black" : b?.textDisabled, x = l?.focus, g = l?.focus, h = l?.text, p = l?.textDisabled, $ = S();
+  return {
+    "--clll-checkbox-bg": c ? "transparent" : r ?? "white",
+    "--clll-checkbox-border": c ? "transparent" : C ?? "transparent",
+    "--clll-checkbox-disabled-border": f ?? "transparent",
+    "--clll-checkbox-disabled-bg": m ?? "transparent",
+    "--clll-checkbox-checked-bg": r ?? "white",
+    "--clll-checkbox-focus-border": x ?? "transparent",
+    "--clll-checkbox-focus-shadow": g ?? "transparent",
+    "--clll-checkbox-icon-color": h ?? "inherit",
+    "--clll-checkbox-disabled-icon-color": p ?? "transparent",
+    "--clll-checkbox-indicator-color": h ?? "inherit",
+    "--clll-checkbox-disabled-indicator-color": p ?? "transparent",
+    "--clll-checkbox-theme-radius": o.value ? `var(--clll-${o.value})` : void 0,
+    "--clll-checkbox-outline-width": c ? "0px" : "2px",
+    "--clll-checkbox-required-asterisk-color": $ ?? "red"
+  };
+}, U = ({
+  color: e,
+  disabled: i,
+  readonly: d,
+  variant: o
+}) => {
+  const { borderRadius: t, colors: s, darkMode: a } = B(), c = a.value ? u.Dark : u.Light, b = o === n.Ghost, l = k({
+    color: e,
+    colors: s.value,
+    mode: c,
+    variant: n.Solid
+  }), r = k({
+    color: e,
+    colors: s.value,
+    mode: c,
+    variant: n.Outline
+  }), C = a.value ? "black" : "white", f = a.value ? "black" : l?.textDisabled, m = r?.border, x = r?.disabled, g = a.value ? "black" : l?.textDisabled, h = r?.focus, p = r?.focus, $ = r?.text, M = r?.focus, P = S();
+  return {
+    "--clll-input-bg": b ? "transparent" : C ?? "white",
+    "--clll-input-border": b ? "transparent" : m ?? "transparent",
+    "--clll-input-disabled-border": x ?? "transparent",
+    "--clll-input-disabled-bg": g ?? "transparent",
+    "--clll-input-readonly-border": x ?? "transparent",
+    "--clll-input-readonly-bg": g ?? "transparent",
+    "--clll-input-focus-border": h ?? "transparent",
+    "--clll-input-focus-shadow": p ?? "transparent",
+    "--clll-input-text": $ ?? "inherit",
+    "--clll-input-text-placeholder": M ?? "transparent",
+    "--clll-input-grouped-bg": f ?? "transparent",
+    "--clll-input-prefix-suffix-color": M ?? "transparent",
+    "--clll-input-theme-radius": t.value ? `var(--clll-${t.value})` : void 0,
+    "--clll-input-ghost-padding": b ? "0" : void 0,
+    "--clll-input-required-asterisk-color": P ?? "red"
+  };
+}, N = ({ color: e }) => {
+  const { colors: i, darkMode: d } = B(), o = d.value ? u.Dark : u.Light;
+  return {
+    "--clll-input-message-color": k({
+      color: e,
+      colors: i.value,
+      mode: o,
+      variant: n.Outline
+    })?.textBody ?? "inherit"
+  };
+}, W = ({ color: e, disabled: i, variant: d }) => {
+  const { borderRadius: o, colors: t, darkMode: s } = B(), a = s.value ? u.Dark : u.Light, c = d === n.Ghost, b = k({
+    color: e,
+    colors: t.value,
+    mode: a,
+    variant: n.Solid
+  }), l = k({
+    color: e,
+    colors: t.value,
+    mode: a,
+    variant: n.Outline
+  }), r = s.value ? "black" : "white", C = l?.border, f = l?.disabled, m = s.value ? "black" : b?.textDisabled, x = l?.focus, g = l?.focus, h = l?.text, p = l?.focus, $ = S();
+  return {
+    "--clll-select-bg": c ? "transparent" : r ?? "white",
+    "--clll-select-border": c ? "transparent" : C ?? "transparent",
+    "--clll-select-disabled-border": f ?? "transparent",
+    "--clll-select-disabled-bg": m ?? "transparent",
+    "--clll-select-focus-border": x ?? "transparent",
+    "--clll-select-focus-shadow": g ?? "transparent",
+    "--clll-select-text": h ?? "inherit",
+    "--clll-select-text-placeholder": p ?? "transparent",
+    "--clll-select-icon-color": h ?? "inherit",
+    "--clll-select-disabled-icon-color": p ?? "transparent",
+    "--clll-select-theme-radius": o.value ? `var(--clll-${o.value})` : void 0,
+    "--clll-select-ghost-padding": c ? "0" : void 0,
+    "--clll-select-required-asterisk-color": $ ?? "red"
+  };
+}, S = () => {
+  const { colors: e, darkMode: i } = B();
+  return i.value ? e.value.danger?.["400"] : e.value.danger?.["700"];
+}, w = "clll-input__message", X = /* @__PURE__ */ T({
+  __name: "CLInputMessages",
+  props: {
+    id: {},
+    messages: {},
+    messageType: { default: E.Neutral }
+  },
+  setup(e) {
+    return (i, d) => (L(!0), y(O, null, A(e.messages, (o, t) => (L(), y("span", {
+      key: `${e.id}-message-${t}`,
+      class: D([w, `${w}--${e.messageType}`]),
+      style: R(q(N)({ color: e.messageType }))
+    }, [
+      z("span", {
+        class: D([`${w}__text`])
+      }, F(o), 3)
+    ], 6))), 128));
+  }
+});
+export {
+  K as _,
+  X as a,
+  Q as c,
+  U as i,
+  W as s
+};