@indielayer/ui 0.0.0-dev-20240129122517 → 0.0.0-dev-20240205224808

package/lib/components/badge/Badge.vue.js

@@ -1,12 +1,12 @@
 import { defineComponent as v, useSlots as z, computed as l, openBlock as o, createBlock as S, resolveDynamicComponent as B, normalizeStyle as n, unref as s, normalizeClass as i, withCtx as w, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
 import { useTheme as C } from "../../composables/useTheme.js";
-import { useCommon as m } from "../../composables/useCommon.js";
+import { useCommon as d } from "../../composables/useCommon.js";
 import { useColors as k } from "../../composables/useColors.js";
 const N = { class: "relative inline-block" }, X = {
   key: 0,
   class: "animate-ping opacity-75 absolute top-0 left-0 rounded-full h-full w-full z-10 bg-[color:var(--x-badge-bg)]"
 }, x = ["left", "right"], Y = ["top", "bottom"], $ = {
-  ...m.props(),
+  ...d.props(),
   ...k.props("primary"),
   tag: {
     type: String,
@@ -32,17 +32,17 @@ const N = { class: "relative inline-block" }, X = {
 }, E = {
   name: "XBadge",
   validators: {
-    ...m.validators(),
+    ...d.validators(),
     position: Y,
     align: x
   }
 }, D = /* @__PURE__ */ v({
   ...E,
   props: $,
-  setup(u) {
-    const t = u, d = z(), g = l(() => {
+  setup(m) {
+    const t = m, u = z(), g = l(() => {
       const e = [];
-      return t.position === "top" && e.push("top-0"), t.position === "bottom" && e.push("bottom-0"), t.align === "left" && e.push("left-0"), t.align === "right" && e.push("right-0"), d.content ? e.push("-m-[7.5%]") : t.outlined ? e.push("-m-[5%]") : e.push("-m-[3.5%]"), e;
+      return t.position === "top" && e.push("top-0"), t.position === "bottom" && e.push("bottom-0"), t.align === "left" && e.push("left-0"), t.align === "right" && e.push("right-0"), u.content ? e.push("-m-[7.5%]") : t.outlined ? e.push("-m-[5%]") : e.push("-m-[3.5%]"), e;
     }), c = l(() => {
       const e = {};
       return t.offsetX && (e[t.align === "left" ? "marginLeft" : "marginRight"] = t.offsetX + "px"), t.offsetY && (e[t.position === "top" ? "marginTop" : "marginBottom"] = t.offsetY + "px"), e;
@@ -62,7 +62,7 @@ const N = { class: "relative inline-block" }, X = {
             class: i(["absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]", [
               g.value,
               {
-                "border-2 border-gray-50 dark:border-gray-900": e.outlined
+                "border-2 border-secondary-50 dark:border-secondary-900": e.outlined
               }
             ]]),
             style: n(c.value)

package/lib/components/breadcrumbs/theme/Breadcrumbs.base.theme.js

@@ -2,7 +2,7 @@ const e = {
   classes: {
     wrapper: "flex items-center flex-wrap",
     item: "flex items-center last-of-type:font-semibold",
-    separator: "text-gray-400 mx-1.5"
+    separator: "text-secondary-400 mx-1.5"
   }
 }, t = e;
 export {

package/lib/components/button/Button.vue.js

@@ -1,9 +1,9 @@
 import o from "./Button.vue2.js";
 import s from "./Button.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const c = {
+const e = {
   $style: s
-}, m = /* @__PURE__ */ t(o, [["__cssModules", c], ["__scopeId", "data-v-46c0001b"]]);
+}, m = /* @__PURE__ */ t(o, [["__cssModules", e], ["__scopeId", "data-v-b25d6b6e"]]);
 export {
   m as default
 };

package/lib/components/button/Button.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as e, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
+import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as t, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
 import { useTheme as O } from "../../composables/useTheme.js";
 import { useColors as X } from "../../composables/useColors.js";
 import { useCommon as b } from "../../composables/useCommon.js";
@@ -34,42 +34,42 @@ const J = {
   validators: {
     ...b.validators()
   }
-}, eo = /* @__PURE__ */ D({
+}, to = /* @__PURE__ */ D({
   ...M,
   props: J,
   setup(y, { expose: v }) {
-    const t = y, g = I(null), s = T(q, {
+    const e = y, g = I(null), s = T(q, {
       isButtonGroup: !1,
       groupProps: {}
-    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || t.size), z = l(() => s.groupProps.flat || t.flat), k = l(() => t.color || s.groupProps.color), P = l(() => t.ghost || s.groupProps.ghost), S = l(() => t.light || s.groupProps.light), w = l(() => t.outlined || s.groupProps.outlined), i = l(() => t.disabled || s.groupProps.disabled), p = l(() => t.icon || t.iconLeft), C = V(), R = l(() => C.href ? "a" : t.to ? "router-link" : t.tag), L = l(() => ({
-      size: e(n),
-      flat: e(z),
-      color: e(k),
-      ghost: e(P),
-      light: e(S),
-      outlined: e(w),
-      disabled: e(i),
-      loading: t.loading,
-      block: t.block,
-      glow: t.glow,
-      iconLeft: e(p),
-      iconRight: t.iconRight,
-      rounded: t.rounded
+    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || e.size), z = l(() => s.groupProps.flat || e.flat), k = l(() => e.color || s.groupProps.color), P = l(() => e.ghost || s.groupProps.ghost), S = l(() => e.light || s.groupProps.light), w = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), C = V(), R = l(() => C.href ? "a" : e.to ? "router-link" : e.tag), L = l(() => ({
+      size: t(n),
+      flat: t(z),
+      color: t(k),
+      ghost: t(P),
+      light: t(S),
+      outlined: t(w),
+      disabled: t(i),
+      loading: e.loading,
+      block: e.block,
+      glow: e.glow,
+      iconLeft: t(p),
+      iconRight: e.iconRight,
+      rounded: e.rounded
     })), { className: G, classes: c, styles: $ } = O("Button", {}, L, {
       isButtonGroup: B
-    }), { focus: N, blur: j } = h(g);
-    return v({ focus: N, blur: j }), (o, Q) => (a(), r(A(R.value), {
+    }), { focus: j, blur: N } = h(g);
+    return v({ focus: j, blur: N }), (o, Q) => (a(), r(A(R.value), {
       ref_key: "elRef",
       ref: g,
       to: o.to,
       class: u([
-        e(G),
+        t(G),
         o.$style.button,
         o.glow && !i.value && !o.loading ? o.$style["button--glow"] : "",
-        e(c).wrapper,
+        t(c).wrapper,
         { "w-full": o.block }
       ]),
-      style: E(e($)),
+      style: E(t($)),
       "aria-busy": o.loading ? "true" : null,
       "aria-disabled": o.tag !== "button" && i.value ? "true" : null,
       disabled: i.value || o.loading,
@@ -84,14 +84,14 @@ const J = {
           status: o.loadingStatus
         }, null, 8, ["size", "label", "status"])) : d("", !0),
         m("div", {
-          class: u({ invisible: o.loading })
+          class: u(["inline-flex items-center justify-center", { invisible: o.loading }])
         }, [
           p.value ? (a(), r(f, {
             key: 0,
             size: n.value,
             icon: p.value,
             class: u([
-              e(c).iconLeft
+              t(c).iconLeft
             ])
           }, null, 8, ["size", "icon", "class"])) : d("", !0),
           m("span", null, [
@@ -103,7 +103,7 @@ const J = {
           size: n.value,
           icon: o.iconRight,
           class: u([
-            e(c).iconRight,
+            t(c).iconRight,
             { invisible: o.loading }
           ])
         }, null, 8, ["size", "icon", "class"])) : d("", !0)
@@ -113,5 +113,5 @@ const J = {
   }
 });
 export {
-  eo as default
+  to as default
 };

package/lib/components/button/theme/Button.base.theme.js

@@ -1,4 +1,4 @@
-const g = {
+const r = {
   classes: {
     wrapper({ props: e, slots: n, data: i }) {
       const d = ["relative transition duration-150 focus:outline-none inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none"];
@@ -8,8 +8,8 @@ const g = {
     iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
   },
   styles({ props: e, colors: n, css: i, data: d }) {
-    const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, l = [], r = e.color && e.light, b = !e.color && !e.ghost;
-    return e.glow && l.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), b ? e.disabled ? l.push(i.variables({
+    const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, l = [], b = e.color && e.light, g = !e.color && !e.ghost;
+    return e.glow && l.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), g ? e.disabled ? l.push(i.variables({
       bg: a[50],
       text: a[300],
       border: a[200],
@@ -31,7 +31,7 @@ const g = {
         hover: { bg: e.loading ? "" : a[700], border: a[600] },
         active: { bg: e.loading ? "" : a[600], border: a[500] }
       }
-    })) : r ? ((!e.outlined || e.disabled) && l.push(i.get("border", "transparent")), e.disabled ? l.push(i.variables({
+    })) : b ? ((!e.outlined || e.disabled) && l.push(i.get("border", "transparent")), e.disabled ? l.push(i.variables({
       bg: t[50],
       text: t[200],
       border: "transparent",
@@ -110,10 +110,10 @@ const g = {
       }
     }))) : (l.push(i.variables({
       text: "#fff",
-      border: d.isButtonGroup ? t[600] : "transparent",
+      border: t[600],
       dark: {
         text: "#fff",
-        border: d.isButtonGroup ? t[500] : "transparent"
+        border: t[500]
       }
     })), e.disabled ? l.push(i.variables({
       bg: t[100],
@@ -132,7 +132,7 @@ const g = {
       }
     }))), l;
   }
-}, u = g;
+}, u = r;
 export {
   u as default
 };

package/lib/components/card/theme/Card.base.theme.js

@@ -1,6 +1,6 @@
 const a = {
   classes: {
-    wrapper: ({ props: e }) => `rounded bg-white dark:bg-gray-800${e.flat ? "" : " shadow"}`
+    wrapper: ({ props: e }) => `bg-slate-50 dark:bg-slate-800 rounded-md ${e.flat ? "" : "shadow"}`
   }
 }, s = a;
 export {

package/lib/components/carousel/CarouselSlide.vue.d.ts

@@ -1,17 +1,28 @@
 import { type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
-declare const carouselSlideProps: {};
+declare const carouselSlideProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+};
 export type CarouselSlideProps = ExtractPublicPropTypes<typeof carouselSlideProps>;
 type InternalClasses = 'wrapper';
 export interface CarouselSlideTheme extends ThemeComponent<CarouselSlideProps, InternalClasses> {
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
-    [x: string]: unknown;
-}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
-    [x: string]: unknown;
-}>>>>, {
-    [x: number]: string;
-} | {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tag: string;
+}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/lib/components/carousel/CarouselSlide.vue.js

@@ -3,7 +3,7 @@ import o from "./CarouselSlide.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: o
-}, a = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-8d26c82a"]]);
+}, d = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-402870d3"]]);
 export {
-  a as default
+  d as default
 };

package/lib/components/carousel/CarouselSlide.vue2.js

@@ -1,25 +1,32 @@
-import { defineComponent as n, openBlock as c, createElementBlock as p, normalizeStyle as i, unref as e, normalizeClass as m, renderSlot as u } from "vue";
-import { useTheme as d } from "../../composables/useTheme.js";
-const f = {}, _ = {
-  name: "XCarouselSlide",
-  validators: {}
-}, h = /* @__PURE__ */ n({
-  ..._,
-  props: f,
+import { defineComponent as n, openBlock as c, createBlock as p, resolveDynamicComponent as i, normalizeStyle as u, unref as s, normalizeClass as m, withCtx as d, renderSlot as f } from "vue";
+import { useTheme as y } from "../../composables/useTheme.js";
+const C = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+}, S = {
+  name: "XCarouselSlide"
+}, k = /* @__PURE__ */ n({
+  ...S,
+  props: C,
   setup(l) {
-    const o = l, { styles: r, classes: t, className: a } = d("CarouselSlide", {}, o);
-    return (s, S) => (c(), p("div", {
-      style: i(e(r)),
+    const t = l, { styles: o, classes: a, className: r } = y("CarouselSlide", {}, t);
+    return (e, _) => (c(), p(i(e.tag), {
+      style: u(s(o)),
       class: m([
-        e(a),
-        s.$style["carousel-slide"],
-        e(t).wrapper
+        s(r),
+        e.$style["carousel-slide"],
+        s(a).wrapper
       ])
-    }, [
-      u(s.$slots, "default")
-    ], 6));
+    }, {
+      default: d(() => [
+        f(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style", "class"]));
   }
 });
 export {
-  h as default
+  k as default
 };

package/lib/components/checkbox/Checkbox.vue.d.ts

@@ -21,6 +21,7 @@ declare const checkboxProps: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -68,6 +69,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -112,6 +114,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;

package/lib/components/checkbox/Checkbox.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as P, ref as w, watch as m, unref as o, openBlock as i, createElementBlock as p, normalizeStyle as R, normalizeClass as u, createElementVNode as d, withKeys as T, withModifiers as H, withDirectives as O, mergeProps as U, toHandlers as X, vModelCheckbox as j, createBlock as V, renderSlot as C, toDisplayString as J, createCommentVNode as Q } from "vue";
+import { defineComponent as P, ref as w, watch as m, unref as a, openBlock as i, createElementBlock as p, normalizeStyle as R, normalizeClass as u, createElementVNode as d, withKeys as T, withModifiers as H, withDirectives as O, mergeProps as U, toHandlers as X, vModelCheckbox as j, createBlock as V, renderSlot as C, toDisplayString as J, createCommentVNode as Q } from "vue";
 import { useTheme as W } from "../../composables/useTheme.js";
 import { useCommon as I } from "../../composables/useCommon.js";
 import { useColors as Y } from "../../composables/useColors.js";
@@ -9,9 +9,9 @@ import x from "../inputFooter/InputFooter.vue.js";
 const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], le = {
   key: 1,
   name: "check-icon",
-  class: "w-2/3 h-[2px] bg-white dark:bg-gray-900"
-}, ae = /* @__PURE__ */ d("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1), oe = [
-  ae
+  class: "w-2/3 h-[2px] bg-white dark:bg-secondary-900"
+}, oe = /* @__PURE__ */ d("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1), ae = [
+  oe
 ], re = ["textContent"], ie = {
   ...I.props(),
   ...Y.props("primary"),
@@ -46,22 +46,22 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
       setError: E
     } = f(s, { focus: y, emit: v, withListeners: !1 });
     c ? (m(() => r.value, () => {
-      const e = o(r.value);
+      const e = a(r.value);
       e && Array.isArray(e) && e.includes(s.value) ? l.value = !0 : l.value = !1;
     }, { immediate: !0, deep: !0 }), m(() => l.value, (e) => {
       if (!s.value)
         return;
-      const a = o(r.value);
+      const o = a(r.value);
       if (e)
-        if (a && Array.isArray(a)) {
-          if (!a.includes(s.value)) {
-            const n = [...a, s.value];
+        if (o && Array.isArray(o)) {
+          if (!o.includes(s.value)) {
+            const n = [...o, s.value];
             r.setValue(n);
           }
         } else
           r.setValue([s.value]);
-      else if (a && Array.isArray(a) && a.includes(s.value)) {
-        const n = a.findIndex((D) => D === s.value), g = [...a];
+      else if (o && Array.isArray(o) && o.includes(s.value)) {
+        const n = o.findIndex((D) => D === s.value), g = [...o];
         g.splice(n, 1), r.setValue(g);
       }
     })) : (m(() => s.modelValue, (e) => {
@@ -76,23 +76,23 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
         }, 0);
       }
     }, { styles: L, classes: t, className: M } = W("Checkbox", {}, s, { checked: l, isInsideForm: S, isInsideFormGroup: c });
-    return B({ focus: y, blur: F, toggle: b, reset: q, validate: k, setError: E }), (e, a) => (i(), p("label", {
-      style: R(o(L)),
+    return B({ focus: y, blur: F, toggle: b, reset: q, validate: k, setError: E }), (e, o) => (i(), p("label", {
+      style: R(a(L)),
       class: u([
-        o(M),
-        o(t).wrapper
+        a(M),
+        a(t).wrapper
       ])
     }, [
       d("div", {
         ref_key: "elRef",
         ref: h,
-        class: u(o(t).content),
+        class: u(a(t).content),
         tabindex: "0",
         onKeypress: T(H(b, ["prevent", "stop"]), ["space"])
       }, [
         O(d("input", U({
           id: e.id,
-          "onUpdate:modelValue": a[0] || (a[0] = (n) => l.value = n),
+          "onUpdate:modelValue": o[0] || (o[0] = (n) => l.value = n),
           name: e.name,
           "aria-checked": e.indeterminate ? "mixed" : l.value ? "true" : "false",
           "aria-disabled": e.disabled ? "true" : void 0,
@@ -105,7 +105,7 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
         ]),
         d("div", {
           class: u([
-            o(t).box,
+            a(t).box,
             [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
           ])
         }, [
@@ -116,12 +116,12 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
           }, null, 8, ["size"])) : e.indeterminate ? (i(), p("span", le)) : C(e.$slots, "icon", { key: 2 }, () => [
             (i(), p("svg", {
               viewBox: "0 0 20 20",
-              class: u([o(t).icon, { "opacity-0": !l.value }])
-            }, oe, 2))
+              class: u([a(t).icon, { "opacity-0": !l.value }])
+            }, ae, 2))
           ])
         ], 2),
         d("div", {
-          class: u(o(t).label)
+          class: u(a(t).label)
         }, [
           e.label ? (i(), p("span", {
             key: 0,
@@ -129,9 +129,9 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
           }, null, 8, re)) : C(e.$slots, "default", { key: 1 })
         ], 2)
       ], 42, ee),
-      o(N) ? Q("", !0) : (i(), V(x, {
+      a(N) ? Q("", !0) : (i(), V(x, {
         key: 0,
-        error: o(G),
+        error: a(G),
         helper: e.helper
       }, null, 8, ["error", "helper"]))
     ], 6));

package/lib/components/checkbox/theme/Checkbox.base.theme.js

@@ -1,23 +1,23 @@
-const n = {
+const o = {
   classes: {
     wrapper: ({ data: r }) => {
       const e = ["inline-block relative cursor-pointer align-middle"];
-      return r.isInsideForm && e.push("mb-3"), e;
+      return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-4"), e;
     },
     box: ({ props: r }) => {
-      const e = ["rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
-      return r.size === "xs" || r.size === "sm" ? e.push("h-4 w-4") : r.size === "xl" ? e.push("h-6 w-6") : e.push("h-5 w-5"), e;
+      const e = ["rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
+      return r.size === "lg" ? e.push("h-5 w-5") : r.size === "xl" ? e.push("h-6 w-6") : e.push("h-4 w-4"), e;
     },
     content: ({ props: r }) => {
-      const e = ["flex items-center"];
+      const e = ["flex items-baseline"];
       return r.disabled && e.push("cursor-not-allowed"), e;
     },
     icon: ({ props: r }) => {
-      const e = ["fill-current text-white dark:text-gray-900"];
-      return r.size === "xs" || r.size === "sm" ? e.push("h-2 w-2") : r.size === "xl" ? e.push("h-4 w-4") : e.push("h-3 w-3"), e;
+      const e = ["fill-current text-white"];
+      return r.size === "lg" ? e.push("h-3 w-3") : r.size === "xl" ? e.push("h-4 w-4") : e.push("h-2.5 w-2.5"), e;
     },
     label: ({ props: r }) => {
-      const e = ["inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"];
+      const e = ["inline-block font-medium text-secondary-800 dark:text-secondary-200 pl-2"];
       return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
     }
   },
@@ -53,7 +53,7 @@ const n = {
       }
     })), r.glow && a.push(l.get("glow", e.getColorOpacity(t[500], 0.5)))), a);
   }
-}, o = n;
+}, n = o;
 export {
-  o as default
+  n as default
 };

package/lib/components/checkbox/theme/Checkbox.carbon.theme.js

@@ -13,11 +13,11 @@ const o = {
       return r.disabled && e.push("cursor-not-allowed"), e;
     },
     icon: ({ props: r }) => {
-      const e = ["fill-current text-white dark:text-gray-900"];
+      const e = ["fill-current text-white dark:text-secondary-900"];
       return r.size === "xs" || r.size === "sm" ? e.push("h-2 w-2") : r.size === "xl" ? e.push("h-3.5 w-3.5") : e.push("h-2.5 w-2.5"), e;
     },
     label: ({ props: r }) => {
-      const e = ["text-gray-800 dark:text-gray-200 pl-2 text-sm"];
+      const e = ["text-secondary-800 dark:text-secondary-200 pl-2 text-sm"];
       return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
     }
   },

package/lib/components/container/Container.vue.d.ts

@@ -5,6 +5,10 @@ declare const containerProps: {
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
 export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>;
 type InternalClasses = 'wrapper';
@@ -15,13 +19,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     tag: string;
+    fluid: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/container/Container.vue.js

@@ -1,20 +1,24 @@
-import { defineComponent as l, openBlock as c, createBlock as p, resolveDynamicComponent as i, normalizeStyle as m, unref as e, normalizeClass as f, withCtx as u, renderSlot as d } from "vue";
-import { useTheme as _ } from "../../composables/useTheme.js";
-const y = {
+import { defineComponent as r, openBlock as c, createBlock as p, resolveDynamicComponent as i, normalizeStyle as f, unref as e, normalizeClass as m, withCtx as u, renderSlot as d } from "vue";
+import { useTheme as y } from "../../composables/useTheme.js";
+const _ = {
   tag: {
     type: String,
     default: "div"
+  },
+  fluid: {
+    type: Boolean,
+    default: !1
   }
-}, C = { name: "XContainer" }, k = /* @__PURE__ */ l({
+}, C = { name: "XContainer" }, S = /* @__PURE__ */ r({
   ...C,
-  props: y,
+  props: _,
   setup(s) {
-    const o = s, { styles: n, classes: a, className: r } = _("Container", {}, o);
+    const o = s, { styles: a, classes: n, className: l } = y("Container", {}, o);
     return (t, g) => (c(), p(i(t.tag), {
-      style: m(e(n)),
-      class: f([
-        e(r),
-        e(a).wrapper
+      style: f(e(a)),
+      class: m([
+        e(l),
+        e(n).wrapper
       ])
     }, {
       default: u(() => [
@@ -25,5 +29,5 @@ const y = {
   }
 });
 export {
-  k as default
+  S as default
 };

package/lib/components/container/theme/Container.base.theme.js

@@ -1,8 +1,11 @@
-const e = {
+const a = {
   classes: {
-    wrapper: "max-w-screen-2xl mx-auto px-4 md:px-8"
+    wrapper: ({ props: s }) => {
+      const e = ["px-4 md:px-6"];
+      return s.fluid || e.push("max-w-screen-lg mx-auto"), e;
+    }
   }
-}, s = e;
+}, t = a;
 export {
-  s as default
+  t as default
 };