@indielayer/ui 1.3.0 → 1.5.0

package/lib/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './alert';
 export * from './avatar';
 export * from './badge';
@@ -6,11 +7,11 @@ export * from './button';
 export * from './card';
 export * from './carousel';
 export * from './checkbox';
-export * from './collapse';
 export * from './container';
 export * from './divider';
 export * from './drawer';
 export * from './form';
+export * from './formGroup';
 export * from './icon';
 export * from './image';
 export * from './input';
@@ -31,6 +32,7 @@ export * from './skeleton';
 export * from './slider';
 export * from './spacer';
 export * from './spinner';
+export * from './stepper';
 export * from './tab';
 export * from './table';
 export * from './tag';

package/lib/components/index.js

@@ -1,105 +1,112 @@
-import { default as r } from "./badge/Badge.vue.js";
-import { default as f } from "./breadcrumbs/Breadcrumbs.vue.js";
-import { default as d } from "./card/Card.vue.js";
-import { default as u } from "./carousel/Carousel.vue.js";
-import { default as s } from "./collapse/Collapse.vue.js";
-import { default as X } from "./container/Container.vue.js";
-import { default as i } from "./divider/Divider.vue.js";
-import { default as b } from "./drawer/Drawer.vue.js";
-import { default as C } from "./form/Form.vue.js";
-import { default as S } from "./image/Image.vue.js";
-import { default as P } from "./input/Input.vue.js";
-import { default as B } from "./menu/Menu.vue.js";
+import { default as a } from "./accordion/Accordion.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 A } from "./pagination/Pagination.vue.js";
-import { default as F } from "./popover/Popover.vue.js";
-import "./popover/Popover.vue2.js";
-import { default as H } from "./popover/PopoverContainer.vue.js";
-import { default as y } from "./progress/Progress.vue.js";
-import { default as j } from "./select/Select.vue.js";
-import { default as z } from "./skeleton/Skeleton.vue.js";
-import { default as J } from "./slider/Slider.vue.js";
-import { default as O } from "./tab/Tab.vue.js";
-import { default as U } from "./tab/TabGroup.vue.js";
-import { default as W } from "./table/Table.vue.js";
-import { default as Z } from "./textarea/Textarea.vue.js";
-import { default as $ } from "./themeProvider/ThemeProvider.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 re } from "./tooltip/Tooltip.vue.js";
-import { default as fe } from "./alert/Alert.vue.js";
-import { default as de } from "./avatar/Avatar.vue.js";
-import { default as ue } from "./button/Button.vue.js";
-import { default as se } from "./button/ButtonGroup.vue.js";
-import { default as Xe } from "./carousel/CarouselSlide.vue.js";
-import { default as ie } from "./checkbox/Checkbox.vue.js";
-import { default as be } from "./icon/Icon.vue.js";
-import { default as Ce } from "./inputFooter/InputFooter.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 Pe } from "./link/Link.vue.js";
-import { default as Be } from "./loader/Loader.vue.js";
-import { default as Le } from "./menu/MenuItem.vue.js";
-import { default as he } from "./pagination/PaginationItem.vue.js";
-import { default as Ae } from "./radio/Radio.vue.js";
-import { default as Fe } from "./scroll/Scroll.vue.js";
-import { default as He } from "./spacer/Spacer.js";
-import { default as ye } from "./spinner/Spinner.vue.js";
-import { default as je } from "./table/TableBody.js";
-import { default as ze } from "./table/TableCell.vue.js";
-import { default as Je } from "./table/TableHead.js";
-import { default as Oe } from "./table/TableHeader.vue.js";
-import { default as Ue } from "./table/TableRow.vue.js";
-import { default as We } from "./tag/Tag.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 {
-  fe as XAlert,
-  de as XAvatar,
-  r as XBadge,
-  f as XBreadcrumbs,
-  ue as XButton,
-  se as XButtonGroup,
-  d as XCard,
-  u as XCarousel,
-  Xe as XCarouselSlide,
-  ie as XCheckbox,
-  s as XCollapse,
-  X as XContainer,
-  i as XDivider,
-  b as XDrawer,
-  C as XForm,
-  be as XIcon,
-  S as XImage,
-  P as XInput,
-  Ce as XInputFooter,
+  a as XAccordion,
+  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,
-  Pe as XLink,
-  Be as XLoader,
-  B as XMenu,
-  Le as XMenuItem,
+  Ie as XLink,
+  ve as XLoader,
+  F as XMenu,
+  Ae as XMenuItem,
   L as XModal,
   h as XNotifications,
-  A as XPagination,
-  he as XPaginationItem,
-  F as XPopover,
-  H as XPopoverContainer,
-  y as XProgress,
-  Ae as XRadio,
-  Fe as XScroll,
-  j as XSelect,
-  z as XSkeleton,
-  J as XSlider,
-  He as XSpacer,
-  ye as XSpinner,
-  O as XTab,
-  U as XTabGroup,
-  W as XTable,
-  je as XTableBody,
-  ze as XTableCell,
-  Je as XTableHead,
-  Oe as XTableHeader,
-  Ue as XTableRow,
-  We as XTag,
-  Z as XTextarea,
-  $ as XThemeProvider,
+  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,
-  re as XTooltip
+  ao as XToggleTip,
+  eo as XTooltip
 };

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

@@ -5,8 +5,6 @@ declare const inputProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    helper: StringConstructor;
-    label: StringConstructor;
     dir: {
         type: PropType<"rtl" | "ltr">;
         default: string;
@@ -25,6 +23,7 @@ declare const inputProps: {
     };
     block: BooleanConstructor;
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -32,12 +31,15 @@ declare const inputProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -67,8 +69,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    helper: StringConstructor;
-    label: StringConstructor;
     dir: {
         type: PropType<"rtl" | "ltr">;
         default: string;
@@ -87,6 +87,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     block: BooleanConstructor;
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -94,12 +95,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -127,8 +131,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    helper: StringConstructor;
-    label: StringConstructor;
     dir: {
         type: PropType<"rtl" | "ltr">;
         default: string;
@@ -147,6 +149,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     block: BooleanConstructor;
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -154,12 +157,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -179,15 +185,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/useCommon").Size;
+    disabled: boolean;
     type: string;
-    required: boolean;
     color: string;
+    size: import("../../composables/useCommon").Size;
     block: boolean;
-    disabled: boolean;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
+    required: boolean;
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];

package/lib/components/input/Input.vue.js

@@ -1,24 +1,22 @@
-import { defineComponent as E, ref as h, watch as F, openBlock as l, createBlock as t, normalizeStyle as H, unref as r, normalizeClass as a, withCtx as X, createElementVNode as y, renderSlot as b, createCommentVNode as u, mergeProps as j, toHandlers as A } from "vue";
-import { useTheme as D } from "../../composables/useTheme.js";
-import { useColors as G } from "../../composables/useColors.js";
+import { defineComponent as F, ref as y, watch as H, openBlock as t, createBlock as l, normalizeStyle as X, unref as r, normalizeClass as a, withCtx as j, createElementVNode as h, renderSlot as b, createCommentVNode as u, mergeProps as A, toHandlers as D } from "vue";
+import { useTheme as G } from "../../composables/useTheme.js";
+import { useColors as J } from "../../composables/useColors.js";
 import { useCommon as v } from "../../composables/useCommon.js";
 import { useInputtable as f } from "../../composables/useInputtable.js";
 import { useInteractive as S } from "../../composables/useInteractive.js";
-import { eyeIcon as J, eyeVisibleIcon as K } from "../../common/icons.js";
-import M from "../label/Label.vue.js";
+import { eyeIcon as K, eyeVisibleIcon as M } from "../../common/icons.js";
+import O from "../label/Label.vue.js";
 import d from "../icon/Icon.vue.js";
-import O from "../inputFooter/InputFooter.vue.js";
-const Q = { class: "relative" }, U = ["disabled", "min", "max", "minlength", "maxlength", "dir", "name", "placeholder", "readonly", "type", "value"], W = {
+import Q from "../inputFooter/InputFooter.vue.js";
+const U = { class: "relative" }, W = ["id", "disabled", "min", "max", "minlength", "maxlength", "dir", "name", "placeholder", "readonly", "type", "value"], Y = {
   ...v.props(),
-  ...G.props("primary"),
+  ...J.props("primary"),
   ...S.props(),
   ...f.props(),
   showPasswordToggle: {
     type: Boolean,
     default: !0
   },
-  helper: String,
-  label: String,
   dir: {
     type: String,
     default: "ltr"
@@ -36,21 +34,21 @@ const Q = { class: "relative" }, U = ["disabled", "min", "max", "minlength", "ma
     default: "text"
   },
   block: Boolean
-}, Y = {
+}, Z = {
   name: "XInput",
   validators: {
     ...v.validators()
   }
-}, te = /* @__PURE__ */ E({
-  ...Y,
-  props: W,
+}, ae = /* @__PURE__ */ F({
+  ...Z,
+  props: Y,
   emits: f.emits(),
   setup(k, { expose: w, emit: z }) {
-    const o = k, N = z, c = h(null), n = h(o.type);
-    F(() => o.type, (e) => {
+    const o = k, N = z, c = y(null), n = y(o.type);
+    H(() => o.type, (e) => {
       n.value = e;
     });
-    function C(e) {
+    function I(e) {
       if (!e.target)
         return;
       const i = e.target;
@@ -59,47 +57,50 @@ const Q = { class: "relative" }, U = ["disabled", "min", "max", "minlength", "ma
         typeof o.min < "u" && p < Number(o.min) && (i.value = o.min.toString()), typeof o.max < "u" && p > Number(o.max) && (i.value = o.max.toString());
       }
     }
-    function I() {
+    function C() {
       n.value = n.value === "password" ? "text" : "password";
     }
     const { focus: g, blur: $ } = S(c), {
       errorInternal: m,
-      isInsideForm: R,
-      inputListeners: L,
-      reset: P,
-      validate: V,
-      setError: B
-    } = f(o, { focus: g, emit: N }), { styles: T, classes: s, className: q } = D("Input", {}, o, { errorInternal: m });
-    return w({ focus: g, blur: $, reset: P, validate: V, setError: B }), (e, i) => (l(), t(M, {
-      style: H(r(T)),
+      hideFooterInternal: R,
+      isInsideForm: L,
+      inputListeners: P,
+      reset: V,
+      validate: B,
+      setError: T
+    } = f(o, { focus: g, emit: N }), { styles: q, classes: s, className: E } = G("Input", {}, o, { errorInternal: m });
+    return w({ focus: g, blur: $, reset: V, validate: B, setError: T }), (e, i) => (t(), l(O, {
+      style: X(r(q)),
       block: e.block,
       disabled: e.disabled,
       required: e.required,
-      "is-inside-form": r(R),
+      "is-inside-form": r(L),
       label: e.label,
       class: a([
-        r(q),
+        r(E),
         r(s).wrapper
-      ])
+      ]),
+      tooltip: e.tooltip
     }, {
-      default: X(() => [
-        y("div", Q, [
+      default: j(() => [
+        h("div", U, [
           b(e.$slots, "prefix", {}, () => [
-            e.iconLeft ? (l(), t(d, {
+            e.iconLeft ? (t(), l(d, {
               key: 0,
               size: e.size,
               icon: e.iconLeft,
               class: a(["ml-2 left-1", r(s).icon])
             }, null, 8, ["size", "icon", "class"])) : u("", !0)
           ]),
-          y("input", j({
+          h("input", A({
+            id: e.id,
             ref_key: "elRef",
             ref: c,
             class: [
               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
@@ -116,32 +117,32 @@ const Q = { class: "relative" }, U = ["disabled", "min", "max", "minlength", "ma
             readonly: e.readonly,
             type: n.value,
             value: e.modelValue || ""
-          }, e.$attrs, A(r(L), !0), { onChange: C }), null, 16, U),
+          }, e.$attrs, D(r(P), !0), { onChange: I }), null, 16, W),
           b(e.$slots, "suffix", {}, () => [
-            e.iconRight ? (l(), t(d, {
+            e.iconRight ? (t(), l(d, {
               key: 0,
               size: e.size,
               icon: e.iconRight,
               class: a(["mr-2 right-1", r(s).icon])
-            }, null, 8, ["size", "icon", "class"])) : e.type === "password" && e.showPasswordToggle ? (l(), t(d, {
+            }, null, 8, ["size", "icon", "class"])) : e.type === "password" && e.showPasswordToggle ? (t(), l(d, {
               key: 1,
               size: e.size,
-              icon: n.value === "password" ? r(J) : r(K),
+              icon: n.value === "password" ? r(K) : r(M),
               class: a(["mr-2 right-1 cursor-pointer", r(s).icon]),
-              onClick: i[0] || (i[0] = (p) => I())
+              onClick: i[0] || (i[0] = (p) => C())
             }, null, 8, ["size", "icon", "class"])) : u("", !0)
           ])
         ]),
-        e.hideFooter ? u("", !0) : (l(), t(O, {
+        r(R) ? u("", !0) : (t(), l(Q, {
           key: 0,
           error: r(m),
           helper: e.helper
         }, 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 {
-  te as default
+  ae as default
 };

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-100 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-[1rem] 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: "min-h-[1rem] text-xs mt-1",
-    helperText: "text-gray-500 dark:text-gray-400",
-    errorText: "text-red-500 dark:text-red-400"
+    wrapper: "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/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,17 +47,18 @@ 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";
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/useCommon").Size;
-    required: boolean;
+    disabled: boolean;
     tag: string;
+    size: import("../../composables/useCommon").Size;
     block: boolean;
-    disabled: boolean;
+    required: boolean;
     isInsideForm: boolean;
 }, {}>, {
     default?(_: {}): any;