@indielayer/ui 1.4.0 → 1.5.1

package/lib/components/index.js

@@ -1,111 +1,112 @@
 import { default as a } from "./accordion/Accordion.vue.js";
-import { default as f } from "./accordion/AccordionItem.vue.js";
-import { default as d } from "./badge/Badge.vue.js";
-import { default as u } from "./breadcrumbs/Breadcrumbs.vue.js";
-import { default as s } from "./card/Card.vue.js";
-import { default as X } from "./carousel/Carousel.vue.js";
-import { default as i } from "./container/Container.vue.js";
-import { default as b } from "./divider/Divider.vue.js";
-import { default as g } from "./drawer/Drawer.vue.js";
-import { default as C } from "./form/Form.vue.js";
-import { default as P } from "./formGroup/FormGroup.vue.js";
-import { default as B } from "./image/Image.vue.js";
-import { default as k } from "./input/Input.vue.js";
-import { default as G } from "./menu/Menu.vue.js";
-import { default as M } from "./modal/Modal.vue.js";
-import { default as w } from "./notifications/Notifications.vue.js";
-import { default as H } from "./pagination/Pagination.vue.js";
-import { default as y } from "./popover/Popover.vue.js";
-import "./popover/Popover.vue2.js";
-import { default as j } from "./popover/PopoverContainer.vue.js";
-import { default as z } from "./progress/Progress.vue.js";
-import { default as J } from "./select/Select.vue.js";
-import { default as O } from "./skeleton/Skeleton.vue.js";
-import { default as U } from "./slider/Slider.vue.js";
-import { default as W } from "./stepper/Stepper.vue.js";
-import { default as Z } from "./tab/Tab.vue.js";
-import { default as $ } from "./tab/TabGroup.vue.js";
-import { default as oe } from "./table/Table.vue.js";
-import { default as ae } from "./textarea/Textarea.vue.js";
-import { default as fe } from "./themeProvider/ThemeProvider.vue.js";
-import { default as de } from "./toggle/Toggle.vue.js";
-import { default as ue } from "./tooltip/Tooltip.vue.js";
-import { default as se } from "./alert/Alert.vue.js";
-import { default as Xe } from "./avatar/Avatar.vue.js";
-import { default as ie } from "./button/Button.vue.js";
-import { default as be } from "./button/ButtonGroup.vue.js";
-import { default as ge } from "./carousel/CarouselSlide.vue.js";
-import { default as Ce } from "./checkbox/Checkbox.vue.js";
-import { default as Pe } from "./icon/Icon.vue.js";
-import { default as Be } from "./inputFooter/InputFooter.vue.js";
-import { default as ke } from "./label/Label.vue.js";
-import { default as Ge } from "./link/Link.vue.js";
-import { default as Me } from "./loader/Loader.vue.js";
-import { default as we } from "./menu/MenuItem.vue.js";
-import { default as He } from "./pagination/PaginationItem.vue.js";
-import { default as ye } from "./radio/Radio.vue.js";
-import { default as je } from "./scroll/Scroll.vue.js";
-import { default as ze } from "./spacer/Spacer.js";
-import { default as Je } from "./spinner/Spinner.vue.js";
-import { default as Oe } from "./table/TableBody.js";
-import { default as Ue } from "./table/TableCell.vue.js";
-import { default as We } from "./table/TableHead.vue.js";
-import { default as Ze } from "./table/TableHeader.vue.js";
-import { default as $e } from "./table/TableRow.vue.js";
-import { default as oo } from "./tag/Tag.vue.js";
+import { default as t } from "./accordion/AccordionItem.vue.js";
+import { default as l } from "./badge/Badge.vue.js";
+import { default as p } from "./breadcrumbs/Breadcrumbs.vue.js";
+import { default as m } from "./card/Card.vue.js";
+import { default as x } from "./carousel/Carousel.vue.js";
+import { default as n } from "./container/Container.vue.js";
+import { default as T } from "./divider/Divider.vue.js";
+import { default as c } from "./drawer/Drawer.vue.js";
+import { default as S } from "./form/Form.vue.js";
+import { default as I } from "./formGroup/FormGroup.vue.js";
+import { default as v } from "./image/Image.vue.js";
+import { default as A } from "./input/Input.vue.js";
+import { default as F } from "./menu/Menu.vue.js";
+import { default as L } from "./modal/Modal.vue.js";
+import { default as h } from "./notifications/Notifications.vue.js";
+import { default as D } from "./pagination/Pagination.vue.js";
+import { default as R } from "./progress/Progress.vue.js";
+import { default as N } from "./select/Select.vue.js";
+import { default as q } from "./skeleton/Skeleton.vue.js";
+import { default as E } from "./slider/Slider.vue.js";
+import { default as K } from "./stepper/Stepper.vue.js";
+import { default as Q } from "./tab/Tab.vue.js";
+import { default as V } from "./tab/TabGroup.vue.js";
+import { default as Y } from "./table/Table.vue.js";
+import { default as _ } from "./textarea/Textarea.vue.js";
+import { default as ee } from "./themeProvider/ThemeProvider.vue.js";
+import { default as ae } from "./toggle/Toggle.vue.js";
+import { default as te } from "./alert/Alert.vue.js";
+import { default as le } from "./avatar/Avatar.vue.js";
+import { default as pe } from "./button/Button.vue.js";
+import { default as me } from "./button/ButtonGroup.vue.js";
+import { default as xe } from "./carousel/CarouselSlide.vue.js";
+import { default as ne } from "./checkbox/Checkbox.vue.js";
+import { default as Te } from "./icon/Icon.vue.js";
+import { default as ce } from "./inputFooter/InputFooter.vue.js";
+import { default as Se } from "./label/Label.vue.js";
+import { default as Ie } from "./link/Link.vue.js";
+import { default as ve } from "./loader/Loader.vue.js";
+import { default as Ae } from "./menu/MenuItem.vue.js";
+import { default as Fe } from "./pagination/PaginationItem.vue.js";
+import { default as Le } from "./popover/Popover.vue.js";
+import { default as he } from "./popover/PopoverContainer.vue.js";
+import { default as De } from "./radio/Radio.vue.js";
+import { default as Re } from "./scroll/Scroll.vue.js";
+import { default as Ne } from "./spacer/Spacer.js";
+import { default as qe } from "./spinner/Spinner.vue.js";
+import { default as Ee } from "./table/TableBody.js";
+import { default as Ke } from "./table/TableCell.vue.js";
+import { default as Qe } from "./table/TableHead.vue.js";
+import { default as Ve } from "./table/TableHeader.vue.js";
+import { default as Ye } from "./table/TableRow.vue.js";
+import { default as _e } from "./tag/Tag.vue.js";
+import { default as eo } from "./tooltip/Tooltip.vue.js";
+import { default as ao } from "./tooltip/ToggleTip.vue.js";
 export {
   a as XAccordion,
-  f as XAccordionItem,
-  se as XAlert,
-  Xe as XAvatar,
-  d as XBadge,
-  u as XBreadcrumbs,
-  ie as XButton,
-  be as XButtonGroup,
-  s as XCard,
-  X as XCarousel,
-  ge as XCarouselSlide,
-  Ce as XCheckbox,
-  i as XContainer,
-  b as XDivider,
-  g as XDrawer,
-  C as XForm,
-  P as XFormGroup,
-  Pe as XIcon,
-  B as XImage,
-  k as XInput,
-  Be as XInputFooter,
-  ke as XLabel,
-  Ge as XLink,
-  Me as XLoader,
-  G as XMenu,
-  we as XMenuItem,
-  M as XModal,
-  w as XNotifications,
-  H as XPagination,
-  He as XPaginationItem,
-  y as XPopover,
-  j as XPopoverContainer,
-  z as XProgress,
-  ye as XRadio,
-  je as XScroll,
-  J as XSelect,
-  O as XSkeleton,
-  U as XSlider,
-  ze as XSpacer,
-  Je as XSpinner,
-  W as XStepper,
-  Z as XTab,
-  $ as XTabGroup,
-  oe as XTable,
-  Oe as XTableBody,
-  Ue as XTableCell,
-  We as XTableHead,
-  Ze as XTableHeader,
-  $e as XTableRow,
-  oo as XTag,
-  ae as XTextarea,
-  fe as XThemeProvider,
-  de as XToggle,
-  ue as XTooltip
+  t as XAccordionItem,
+  te as XAlert,
+  le as XAvatar,
+  l as XBadge,
+  p as XBreadcrumbs,
+  pe as XButton,
+  me as XButtonGroup,
+  m as XCard,
+  x as XCarousel,
+  xe as XCarouselSlide,
+  ne as XCheckbox,
+  n as XContainer,
+  T as XDivider,
+  c as XDrawer,
+  S as XForm,
+  I as XFormGroup,
+  Te as XIcon,
+  v as XImage,
+  A as XInput,
+  ce as XInputFooter,
+  Se as XLabel,
+  Ie as XLink,
+  ve as XLoader,
+  F as XMenu,
+  Ae as XMenuItem,
+  L as XModal,
+  h as XNotifications,
+  D as XPagination,
+  Fe as XPaginationItem,
+  Le as XPopover,
+  he as XPopoverContainer,
+  R as XProgress,
+  De as XRadio,
+  Re as XScroll,
+  N as XSelect,
+  q as XSkeleton,
+  E as XSlider,
+  Ne as XSpacer,
+  qe as XSpinner,
+  K as XStepper,
+  Q as XTab,
+  V as XTabGroup,
+  Y as XTable,
+  Ee as XTableBody,
+  Ke as XTableCell,
+  Qe as XTableHead,
+  Ve as XTableHeader,
+  Ye as XTableRow,
+  _e as XTag,
+  _ as XTextarea,
+  ee as XThemeProvider,
+  ae as XToggle,
+  ao as XToggleTip,
+  eo as XTooltip
 };

package/lib/components/input/Input.vue.d.ts

@@ -39,6 +39,7 @@ declare const inputProps: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -102,6 +103,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -163,6 +165,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/input/Input.vue.js

@@ -79,7 +79,8 @@ const U = { class: "relative" }, W = ["id", "disabled", "min", "max", "minlength
       class: a([
         r(E),
         r(s).wrapper
-      ])
+      ]),
+      tooltip: e.tooltip
     }, {
       default: j(() => [
         h("div", U, [
@@ -99,7 +100,7 @@ const U = { class: "relative" }, W = ["id", "disabled", "min", "max", "minlength
               r(s).input,
               e.type === "password" ? "pr-10" : "",
               // error
-              r(m) ? "border-red-500 dark:border-red-400 focus:outline-red-500" : "focus:outline-[color:var(--x-input-border)]",
+              r(m) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-input-border)]",
               {
                 "!pl-10": e.iconLeft,
                 "!pr-10": e.iconRight
@@ -139,7 +140,7 @@ const U = { class: "relative" }, W = ["id", "disabled", "min", "max", "minlength
         }, null, 8, ["error", "helper"]))
       ]),
       _: 3
-    }, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class"]));
+    }, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
   }
 });
 export {

package/lib/components/input/theme/Input.base.theme.js

@@ -1,17 +1,17 @@
-const s = {
+const o = {
   classes: {
     wrapper: "",
-    input: ({ props: r, data: t }) => {
-      const e = ["appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md"];
-      return !t.errorInternal && !r.disabled && e.push("hover:border-gray-400 dark:hover:border-gray-500"), r.size === "xs" ? e.push("px-2 py-1 text-xs") : r.size === "sm" ? e.push("px-2 py-2 text-sm") : r.size === "lg" ? e.push("px-4 py-3 text-lg") : r.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(r.disabled ? "bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed" : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"), e;
+    input: ({ props: r, data: s }) => {
+      const e = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md"];
+      return !s.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), r.size === "xs" ? e.push("px-2 py-1 text-xs") : r.size === "sm" ? e.push("px-2 py-2 text-sm") : r.size === "lg" ? e.push("px-4 py-3 text-lg") : r.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(r.disabled ? "bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed" : "bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
     },
-    icon: "text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0"
+    icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0"
   },
-  styles: ({ colors: r, props: t, css: e }) => {
-    const a = r.getPalette(t.color);
-    return e.get("border", a[400]);
+  styles: ({ colors: r, props: s, css: e }) => {
+    const t = r.getPalette(s.color);
+    return e.get("border", t[400]);
   }
-}, l = s;
+}, a = o;
 export {
-  l as default
+  a as default
 };

package/lib/components/input/theme/Input.carbon.theme.js

@@ -1,17 +1,17 @@
-const s = {
+const o = {
   classes: {
     wrapper: "",
-    input: ({ props: r, data: a }) => {
-      const e = ["appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4"];
-      return !a.errorInternal && !r.disabled && e.push("hover:border-gray-400 dark:hover:border-gray-500"), r.size === "xs" || r.size === "sm" ? e.push("py-1.5") : r.size === "lg" || r.size === "xl" ? e.push("py-3.5") : e.push("py-2.5"), r.disabled ? e.push("bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed") : r.readonly ? e.push("bg-white dark:bg-gray-900 text-gray-700") : e.push("bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200"), e;
+    input: ({ props: r, data: s }) => {
+      const e = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4"];
+      return !s.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), r.size === "xs" || r.size === "sm" ? e.push("py-1.5") : r.size === "lg" || r.size === "xl" ? e.push("py-3.5") : e.push("py-2.5"), r.disabled ? e.push("bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : r.readonly ? e.push("bg-white dark:bg-secondary-900 text-secondary-700") : e.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
     },
-    icon: "text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0"
+    icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0"
   },
-  styles: ({ colors: r, props: a, css: e }) => {
-    const t = r.getPalette(a.color);
-    return e.get("border", t[400]);
+  styles: ({ colors: r, props: s, css: e }) => {
+    const a = r.getPalette(s.color);
+    return e.get("border", a[400]);
   }
-}, l = s;
+}, t = o;
 export {
-  l as default
+  t as default
 };

package/lib/components/inputFooter/theme/InputFooter.base.theme.js

@@ -1,8 +1,8 @@
 const e = {
   classes: {
-    wrapper: "min-h-[1.3rem] text-sm mt-1",
-    helperText: "text-gray-500 dark:text-gray-400",
-    errorText: "text-red-500 dark:text-red-400"
+    wrapper: "min-h-[1.3rem] text-xs mt-1",
+    helperText: "text-secondary-500 dark:text-secondary-400",
+    errorText: "text-error-500 dark:text-error-400"
   }
 }, t = e;
 export {

package/lib/components/inputFooter/theme/InputFooter.carbon.theme.js

@@ -1,8 +1,8 @@
 const e = {
   classes: {
     wrapper: "text-xs mt-1",
-    helperText: "text-gray-500 dark:text-gray-400",
-    errorText: "text-red-500 dark:text-red-400"
+    helperText: "text-secondary-500 dark:text-secondary-400",
+    errorText: "text-error-500 dark:text-error-400"
   }
 }, t = e;
 export {

package/lib/components/label/Label.vue.d.ts

@@ -10,6 +10,7 @@ declare const labelProps: {
         type: StringConstructor;
         default: string;
     };
+    tooltip: StringConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
@@ -30,6 +31,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    tooltip: StringConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
@@ -45,6 +47,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    tooltip: StringConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";

package/lib/components/label/Label.vue.js

@@ -1,8 +1,9 @@
-import { defineComponent as u, openBlock as o, createBlock as t, resolveDynamicComponent as s, normalizeStyle as f, unref as l, normalizeClass as r, withCtx as n, createTextVNode as b, toDisplayString as y, createCommentVNode as g, renderSlot as B } from "vue";
+import { defineComponent as f, openBlock as o, createBlock as t, resolveDynamicComponent as s, normalizeStyle as b, unref as l, normalizeClass as n, withCtx as r, createElementVNode as y, toDisplayString as g, createCommentVNode as i, renderSlot as B } from "vue";
 import { useTheme as C } from "../../composables/useTheme.js";
-import { useCommon as i } from "../../composables/useCommon.js";
-const S = {
-  ...i.props(),
+import { useCommon as p } from "../../composables/useCommon.js";
+import S from "../tooltip/ToggleTip.vue.js";
+const k = {
+  ...p.props(),
   label: String,
   disabled: Boolean,
   required: Boolean,
@@ -11,32 +12,37 @@ const S = {
   tag: {
     type: String,
     default: "label"
-  }
-}, k = {
+  },
+  tooltip: String
+}, _ = {
   name: "XLabel",
   validators: {
-    ...i.validators()
+    ...p.validators()
   }
-}, w = /* @__PURE__ */ u({
-  ...k,
-  props: S,
+}, D = /* @__PURE__ */ f({
+  ..._,
+  props: k,
   setup(m) {
-    const p = m, { styles: d, classes: a, className: c } = C("Label", {}, p);
-    return (e, _) => (o(), t(s(e.tag), {
-      style: f(l(d)),
-      class: r([l(c), l(a).wrapper])
+    const d = m, { styles: c, classes: a, className: u } = C("Label", {}, d);
+    return (e, h) => (o(), t(s(e.tag), {
+      style: b(l(c)),
+      class: n([l(u), l(a).wrapper])
     }, {
-      default: n(() => [
+      default: r(() => [
         e.label ? (o(), t(s(e.tag === "fieldset" ? "legend" : "p"), {
           key: 0,
           title: e.label,
-          class: r(l(a).label)
+          class: n(l(a).label)
         }, {
-          default: n(() => [
-            b(y(e.label), 1)
+          default: r(() => [
+            y("span", null, g(e.label), 1),
+            e.tooltip ? (o(), t(S, {
+              key: 0,
+              content: e.tooltip
+            }, null, 8, ["content"])) : i("", !0)
           ]),
           _: 1
-        }, 8, ["title", "class"])) : g("", !0),
+        }, 8, ["title", "class"])) : i("", !0),
         B(e.$slots, "default")
       ]),
       _: 3
@@ -44,5 +50,5 @@ const S = {
   }
 });
 export {
-  w as default
+  D as default
 };

package/lib/components/label/theme/Label.base.theme.js

@@ -5,7 +5,7 @@ const s = {
       return t.isInsideForm && e.push("mb-3"), t.block && e.push("w-full"), e;
     },
     label: ({ props: t }) => {
-      const e = "font-medium text-gray-800 dark:text-gray-200 mb-1";
+      const e = "flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-200 mb-1";
       return t.size === "xs" ? e + " text-xs" : t.size === "sm" ? e + " text-sm" : t.size === "lg" ? e + " text-lg" : t.size === "xl" ? e + " text-xl" : e;
     }
   }

package/lib/components/label/theme/Label.carbon.theme.js

@@ -4,9 +4,9 @@ const s = {
       const e = ["block relative align-bottom focus:outline-none"];
       return t.isInsideForm && e.push("mb-8"), t.block && e.push("w-full"), e;
     },
-    label: "text-xs text-gray-500 dark:text-gray-200 mb-2"
+    label: "text-xs text-secondary-500 dark:text-secondary-200 mb-2"
   }
-}, l = s;
+}, o = s;
 export {
-  l as default
+  o as default
 };

package/lib/components/link/Link.vue.js

@@ -3,7 +3,7 @@ import o from "./Link.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: o
-}, c = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-37edea5a"]]);
+}, m = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-81a39d2b"]]);
 export {
-  c as default
+  m as default
 };

package/lib/components/link/Link.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as m, openBlock as n, createBlock as p, resolveDynamicComponent as u, normalizeStyle as d, unref as o, normalizeClass as c, withCtx as f, createElementBlock as k, renderSlot as t, createVNode as y } from "vue";
+import { defineComponent as m, openBlock as n, createBlock as p, resolveDynamicComponent as d, normalizeStyle as u, unref as o, normalizeClass as c, withCtx as f, createElementBlock as k, renderSlot as t, createVNode as y } from "vue";
 import { useColors as h } from "../../composables/useColors.js";
 import { useTheme as g } from "../../composables/useTheme.js";
 import { externalIcon as B } from "../../common/icons.js";
@@ -7,7 +7,7 @@ const C = {
   key: 0,
   class: "inline-flex items-center"
 }, $ = {
-  ...h.props("primary"),
+  ...h.props("secondary"),
   tag: {
     type: String,
     default: "a"
@@ -21,9 +21,9 @@ const C = {
   props: $,
   setup(s) {
     const l = s, { styles: r, classes: a, className: i } = g("Link", {}, l);
-    return (e, v) => (n(), p(u(e.to ? e.tag !== "a" ? e.tag : "router-link" : e.tag), {
+    return (e, v) => (n(), p(d(e.to ? e.tag !== "a" ? e.tag : "router-link" : e.tag), {
       to: e.to,
-      style: d(o(r)),
+      style: u(o(r)),
       class: c([
         o(i),
         e.$style.link,

package/lib/components/loader/theme/Loader.base.theme.js

@@ -2,7 +2,7 @@ const e = {
   classes: {
     wrapper: "inline-flex items-center justify-center",
     iconSuccess: "text-green-500",
-    iconError: "text-red-500",
+    iconError: "text-error-500",
     label: "mx-2 text-sm"
   }
 }, t = e;

package/lib/components/loader/theme/Loader.carbon.theme.js

@@ -2,7 +2,7 @@ const e = {
   classes: {
     wrapper: "inline-flex items-center justify-center",
     iconSuccess: "text-green-500",
-    iconError: "text-red-500",
+    iconError: "text-error-500",
     label: "mx-2 text-sm"
   }
 }, t = e;