@indielayer/ui 1.4.0 → 1.5.0

package/docs/pages/index.vue

@@ -1,51 +1,49 @@
 <template>
-  <div>
-    <section class="p-4 lg:p-8 max-w-4xl xl:max-w-7xl mx-auto">
-      <h2 class="text-4xl font-semibold">Getting Started</h2>
-      <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Tailwind CSS UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.</h1>
-      <x-divider class="mt-4 mb-8"/>
+  <h2 class="text-4xl font-semibold">Getting Started</h2>
+  <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Tailwind CSS UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.</h1>
+  <x-divider class="mt-4 mb-8"/>
 
-      <h3 class="text-2xl mb-4">Quickstart a new Vue 3 or Nuxt 3 project</h3>
-      <p class="my-4">
-        This following command will install and execute <x-link
-          external
-          href="https://github.com/indielayer/ui/tree/main/packages/create-ui"
-          target="_blank"
-          shadow
-          color="primary"
-        >@indielayer/create-ui</x-link>, the official Indielayer UI project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript.
-      </p>
-      <code-snippet :code="`npm init @indielayer/ui`" lang="bash"/>
-      <pre class="bg-slate-600 text-slate-50 text-xs mt-4 px-4 py-2 rounded-md">? Project type: › - Use arrow-keys. Return to submit.
+  <h3 class="text-2xl mb-4">Quickstart a new Vue 3 or Nuxt 3 project</h3>
+  <p class="my-4">
+    This following command will install and execute <x-link
+      external
+      href="https://github.com/indielayer/ui/tree/main/packages/create-ui"
+      target="_blank"
+      shadow
+      color="primary"
+    >@indielayer/create-ui</x-link>, the official Indielayer UI project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript.
+  </p>
+  <code-snippet :code="`npm init @indielayer/ui`" lang="bash"/>
+  <pre class="bg-slate-600 text-slate-50 text-xs mt-4 px-4 py-2 rounded-md">? Project type: › - Use arrow-keys. Return to submit.
 ❯   Vue 3
     Nuxt 3</pre>
 
-      <h3 class="text-2xl mt-16 mb-4 text-gray-500">Manual guide</h3>
-      <h3 class="text-2xl mb-4">1. Install via package manager</h3>
-      <multi-snippet
-        :snippets="[{
-          label: 'npm',
-          lang: 'bash',
-          code: 'npm install @indielayer/ui'
-        }, {
-          label: 'yarn',
-          lang: 'bash',
-          code: 'yarn add @indielayer/ui'
-        }, {
-          label: 'pnpm',
-          lang: 'bash',
-          code: 'pnpm add @indielayer/ui'
-        }]"
-      />
+  <h3 class="text-2xl mt-16 mb-4 text-gray-500">Manual guide</h3>
+  <h3 class="text-2xl mb-4">1. Install via package manager</h3>
+  <multi-snippet
+    :snippets="[{
+      label: 'npm',
+      lang: 'bash',
+      code: 'npm install @indielayer/ui'
+    }, {
+      label: 'yarn',
+      lang: 'bash',
+      code: 'yarn add @indielayer/ui'
+    }, {
+      label: 'pnpm',
+      lang: 'bash',
+      code: 'pnpm add @indielayer/ui'
+    }]"
+  />
 
-      <h3 class="text-2xl mt-8 mb-4">2. Setup TailwindCSS</h3>
-      <p>If you do not have Tailwind CSS 3 installed in your project, please see the <x-link href="https://tailwindcss.com/docs/guides/vite" external shadow color="primary">Tailwind 3 Vite install guide here</x-link> before proceeding.</p>
-      <p class="my-4">
-        Add Indielayer Tailwind CSS preset <b>tailwind.preset.js</b> to your Tailwind CSS configuration file tailwind.config.js and <b>purge css configurations.</b>
-      </p>
-      <code-snippet
-        lang="js"
-        :code="`// tailwind.config.js
+  <h3 class="text-2xl mt-8 mb-4">2. Setup TailwindCSS</h3>
+  <p>If you do not have Tailwind CSS 3 installed in your project, please see the <x-link href="https://tailwindcss.com/docs/guides/vite" external shadow color="primary">Tailwind 3 Vite install guide here</x-link> before proceeding.</p>
+  <p class="my-4">
+    Add Indielayer Tailwind CSS preset <b>tailwind.preset.js</b> to your Tailwind CSS configuration file tailwind.config.js and <b>purge css configurations.</b>
+  </p>
+  <code-snippet
+    lang="js"
+    :code="`// tailwind.config.js
 const colors = require('tailwindcss/colors')
 const indielayer = require('@indielayer/ui/tailwind.preset')
 
@@ -73,12 +71,12 @@ module.exports = {
   },
   plugins: [],
 }`"
-      />
-      <h3 class="text-2xl mt-8 mb-4">3. Load the UI in your project</h3>
-      <h4 class="text-xl mt-8 mb-4">Load on a Vue 3 project</h4>
-      <code-snippet
-        lang="js"
-        :code="`import { createApp } from 'vue'
+  />
+  <h3 class="text-2xl mt-8 mb-4">3. Load the UI in your project</h3>
+  <h4 class="text-xl mt-8 mb-4">Load on a Vue 3 project</h4>
+  <code-snippet
+    lang="js"
+    :code="`import { createApp } from 'vue'
 import UI from '@indielayer/ui'
 
 const app = createApp(App)
@@ -86,27 +84,27 @@ const app = createApp(App)
 app.use(UI, {
   prefix: 'X',
 })`"
-      />
-      <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
-      <multi-snippet
-        class="my-4"
-        :snippets="[{
-          label: 'npm',
-          lang: 'bash',
-          code: 'npm install @indielayer/ui @vueuse/core floating-vue -D'
-        }, {
-          label: 'yarn',
-          lang: 'bash',
-          code: 'yarn add @indielayer/ui @vueuse/core floating-vue -D'
-        }, {
-          label: 'pnpm',
-          lang: 'bash',
-          code: 'pnpm add @indielayer/ui @vueuse/core floating-vue -D'
-        }]"
-      />
-      <code-snippet
-        lang="js"
-        :code="`import { colors } from '@indielayer/ui'
+  />
+  <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
+  <multi-snippet
+    class="my-4"
+    :snippets="[{
+      label: 'npm',
+      lang: 'bash',
+      code: 'npm install @indielayer/ui @vueuse/core floating-vue -D'
+    }, {
+      label: 'yarn',
+      lang: 'bash',
+      code: 'yarn add @indielayer/ui @vueuse/core floating-vue -D'
+    }, {
+      label: 'pnpm',
+      lang: 'bash',
+      code: 'pnpm add @indielayer/ui @vueuse/core floating-vue -D'
+    }]"
+  />
+  <code-snippet
+    lang="js"
+    :code="`import { colors } from '@indielayer/ui'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -137,11 +135,11 @@ export default defineNuxtConfig({
     },
   },
 })`"
-      />
-      <h3 class="text-2xl mt-8 mb-4">4. (optional) Load only the components you want</h3>
-      <code-snippet
-        lang="js"
-        :code="`import { createApp } from 'vue'
+  />
+  <h3 class="text-2xl mt-8 mb-4">4. (optional) Load only the components you want</h3>
+  <code-snippet
+    lang="js"
+    :code="`import { createApp } from 'vue'
 import { createUI, XButton, XAlert } from '@indielayer/ui'
 
 const app = createApp(App)
@@ -151,7 +149,5 @@ const UI = createUI({
 })
 
 app.use(UI)`"
-      />
-    </section>
-  </div>
+  />
 </template>

package/docs/pages/play.vue

@@ -1,19 +1,7 @@
-<script>
+<script setup lang="ts">
 
-export default {
-  components: {
-
-  },
-  data() {
-    return {
-
-    }
-  },
-}
 </script>
 
 <template>
-  <div class="p-10">
-    hello
-  </div>
+  <div>playground</div>
 </template>

package/docs/pages/typography.vue

@@ -57,39 +57,35 @@ const textClasses = {
 </script>
 
 <template>
-  <div>
-    <section class="p-4 lg:p-8 max-w-4xl xl:max-w-7xl mx-auto">
-      <h1 class="text-4xl font-semibold">Typography</h1>
-      <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Big letters, small letters, fonts and stuff</h2>
+  <h1 class="text-4xl font-semibold">Typography</h1>
+  <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Big letters, small letters, fonts and stuff</h2>
 
-      <x-divider class="mt-4 mb-8"/>
+  <x-divider class="mt-4 mb-8"/>
 
-      <div>
-        <div>Main font</div>
-        <div class="text-gray-500 dark:text-gray-400">Inter</div>
-        <div class="text-6xl mt-4">AaBbCc</div>
-      </div>
+  <div>
+    <div>Main font</div>
+    <div class="text-gray-500 dark:text-gray-400">Inter</div>
+    <div class="text-6xl mt-4">AaBbCc</div>
+  </div>
 
-      <div class="mt-10">
-        <table class="text-left w-full">
-          <tr>
-            <th class="py-2">Class</th>
-            <th>Size</th>
-            <th>Line Height</th>
-            <th>Preview</th>
-          </tr>
-          <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
-            <td class="py-2">{{ key }}</td>
-            <td class="text-secondary-500 font-light">{{ c.size }}</td>
-            <td class="text-secondary-500 font-light">{{ c.line }}</td>
-            <td :class="key" class="max-w-lg truncate">Preview text</td>
-          </tr>
-        </table>
-      </div>
+  <div class="mt-10">
+    <table class="text-left w-full">
+      <tr>
+        <th class="py-2">Class</th>
+        <th>Size</th>
+        <th>Line Height</th>
+        <th>Preview</th>
+      </tr>
+      <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
+        <td class="py-2">{{ key }}</td>
+        <td class="text-secondary-500 font-light">{{ c.size }}</td>
+        <td class="text-secondary-500 font-light">{{ c.line }}</td>
+        <td :class="key" class="max-w-lg truncate">Preview text</td>
+      </tr>
+    </table>
+  </div>
 
-      <div class="text-secondary-500 mt-4">
-        See more about Tailwind typography classes here -> <x-link href="https://tailwindcss.com/docs/font-size" target="_blank" underline>Tailwind Documentation</x-link>
-      </div>
-    </section>
+  <div class="text-secondary-500 mt-4">
+    See more about Tailwind typography classes here -> <x-link href="https://tailwindcss.com/docs/font-size" target="_blank" underline>Tailwind Documentation</x-link>
   </div>
 </template>

package/docs/router/index.ts

@@ -58,6 +58,8 @@ const routes: RouteRecordRaw[] = [{
 }, {
   path: '/play',
   component: PlayPage,
+}, {
+  path: '/:pathMatch(.*)*', name: 'NotFound', redirect: { name: 'getting-started' },
 }]
 
 const router = createRouter({

package/exports/tailwind.preset.js

@@ -28,7 +28,6 @@ module.exports = () => ({
         secondary: getColorVarPallete('secondary'),
         success: getColorVarPallete('success'),
         warning: getColorVarPallete('warning'),
-        danger: getColorVarPallete('error'),
         error: getColorVarPallete('error'),
       },
       borderColor: getColorVar('border'),

package/lib/components/accordion/theme/AccordionItem.base.theme.js

@@ -1,16 +1,16 @@
 const r = {
   classes: {
-    wrapper: ({ props: s, slots: i, data: e }) => {
-      const t = ["relative flex items-center w-full text-left"];
-      return e.isInsideAccordion && (i.default && (s.iconAlign === "left" ? t.push("pl-8 pr-4") : t.push("pr-8 pl-4"), t.push("py-2"), s.disabled || t.push("hover:bg-gray-50 dark:hover:bg-gray-600")), s.disabled || t.push("cursor-pointer")), t;
+    wrapper: ({ props: t, slots: i, data: e }) => {
+      const s = ["relative flex items-center w-full text-left"];
+      return e.isInsideAccordion && (i.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-50 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
     },
-    icon: ({ props: s, data: i }) => {
+    icon: ({ props: t, data: i }) => {
       const e = ["absolute flex transform transition-transform duration-150"];
-      return i.collapsed || e.push("rotate-180"), s.disabled && e.push("text-gray-300"), s.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
+      return i.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
     },
     content: "transition-[height] duration-150 overflow-y-hidden"
   }
-}, l = r;
+}, n = r;
 export {
-  l as default
+  n as default
 };

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/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/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

@@ -5,19 +5,19 @@ const o = {
       return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-3"), 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;
     }
   },

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/theme/Container.base.theme.js

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