@indielayer/ui 1.4.0 → 1.5.0

package/lib/components/divider/Divider.vue.js

@@ -1,32 +1,32 @@
-import { defineComponent as p, openBlock as s, createElementBlock as o, normalizeStyle as r, unref as t, normalizeClass as a, createElementVNode as i, toDisplayString as u, createCommentVNode as v } from "vue";
+import { defineComponent as p, openBlock as o, createElementBlock as r, normalizeStyle as s, unref as t, normalizeClass as a, createElementVNode as n, toDisplayString as u, createCommentVNode as v } from "vue";
 import { useTheme as y } from "../../composables/useTheme.js";
 const h = ["textContent"], f = {
   label: String,
   vertical: Boolean
-}, g = { name: "XDivider" }, x = /* @__PURE__ */ p({
-  ...g,
+}, C = { name: "XDivider" }, x = /* @__PURE__ */ p({
+  ...C,
   props: f,
-  setup(n) {
-    const c = n, { styles: m, classes: l, className: d } = y("Divider", {}, c);
-    return (e, C) => (s(), o("div", {
-      style: r(t(m)),
+  setup(i) {
+    const c = i, { styles: d, classes: l, className: m } = y("Divider", {}, c);
+    return (e, b) => (o(), r("div", {
+      style: s(t(d)),
       class: a([
-        t(d),
+        t(m),
         t(l).wrapper
       ])
     }, [
-      i("div", {
+      n("div", {
         class: a(t(l).line),
-        style: r([
+        style: s([
           {
             width: e.vertical ? "1px" : "auto",
             height: e.vertical ? "auto" : "1px"
           }
         ])
       }, null, 6),
-      e.label ? (s(), o("div", {
+      e.label ? (o(), r("div", {
         key: 0,
-        class: a(["font-medium text-sm text-gray-600 dark:text-gray-300", [
+        class: a(["font-medium text-sm text-secondary-600 dark:text-secondary-300", [
           t(l).label,
           {
             "my-2": e.vertical,
@@ -35,9 +35,9 @@ const h = ["textContent"], f = {
         ]]),
         textContent: u(e.label)
       }, null, 10, h)) : v("", !0),
-      i("div", {
+      n("div", {
         class: a(t(l).line),
-        style: r([
+        style: s([
           {
             width: e.vertical ? "1px" : "auto",
             height: e.vertical ? "auto" : "1px"

package/lib/components/divider/theme/Divider.base.theme.js

@@ -1,8 +1,8 @@
 const t = {
   classes: {
     wrapper: ({ props: e }) => `flex justify-center items-center ${e.vertical ? "h-full flex-col" : "w-full"}`,
-    label: "font-medium text-sm text-gray-600 dark:text-gray-300",
-    line: "bg-gray-200 dark:bg-slate-700 flex-grow"
+    label: "font-medium text-sm text-secondary-600 dark:text-secondary-300",
+    line: "bg-secondary-200 dark:bg-secondary-700 flex-grow"
   }
 }, l = t;
 export {

package/lib/components/drawer/Drawer.vue.js

@@ -86,14 +86,14 @@ const ee = {
         return;
       }
       e.addEventListener("transitionend", o), setTimeout(() => {
-        t.backdrop && e.classList.add("bg-gray-500/30"), t.position === "top" ? e.style.top = "0" : t.position === "bottom" ? e.style.bottom = "0" : t.position === "left" ? e.style.left = "0" : t.position === "right" && (e.style.right = "0");
+        t.backdrop && e.classList.add("bg-slate-500/30"), t.position === "top" ? e.style.top = "0" : t.position === "bottom" ? e.style.bottom = "0" : t.position === "left" ? e.style.left = "0" : t.position === "right" && (e.style.right = "0");
       }, 1);
     }
     function R(e) {
     }
     function D(e, o) {
       e.addEventListener("transitionend", o), setTimeout(() => {
-        t.backdrop && e.classList.remove("bg-gray-500/30"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
+        t.backdrop && e.classList.remove("bg-slate-500/30"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
       }, 1);
     }
     function z(e) {

package/lib/components/drawer/theme/Drawer.base.theme.js

@@ -1,6 +1,6 @@
 const e = {
   classes: {
-    wrapper: "flex flex-col max-h-full bg-white dark:bg-gray-800",
+    wrapper: "flex flex-col max-h-full bg-white dark:bg-secondary-800",
     backdrop: "duration-150 ease-in-out"
   }
 }, a = e;

package/lib/components/form/Form.vue.js

@@ -3,7 +3,7 @@ import { injectFormKey as N } from "../../composables/keys.js";
 import { useTheme as T } from "../../composables/useTheme.js";
 const j = {
   key: 0,
-  class: "mb-10"
+  class: "mb-6"
 }, w = ["disabled"], z = {
   autoValidate: {
     type: Boolean,

package/lib/components/form/theme/Form.base.theme.js

@@ -1,12 +1,12 @@
-const t = {
+const e = {
   classes: {
     wrapper: "relative",
     content: "",
     title: "text-xl mb-1",
-    description: "text-gray-500",
+    description: "text-secondary-500",
     footer: "space-x-4 mt-4"
   }
-}, e = t;
+}, t = e;
 export {
-  e as default
+  t as default
 };

package/lib/components/form/theme/Form.carbon.theme.js

@@ -1,12 +1,12 @@
-const t = {
+const e = {
   classes: {
     wrapper: "relative",
     content: "grid",
     title: "text-xl mb-1",
-    description: "text-gray-500",
+    description: "text-secondary-500",
     footer: "grid grid-cols-2 gap-4 lg:flex mt-8"
   }
-}, e = t;
+}, t = e;
 export {
-  e as default
+  t as default
 };

package/lib/components/formGroup/FormGroup.vue.d.ts

@@ -22,6 +22,7 @@ declare const formGroupProps: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -67,6 +68,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -102,6 +104,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/formGroup/FormGroup.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as C, computed as k, provide as q, openBlock as m, createBlock as p, mergeProps as B, unref as o, toHandlers as N, withCtx as $, createElementVNode as w, normalizeClass as A, renderSlot as E, createCommentVNode as P } from "vue";
+import { defineComponent as C, computed as k, provide as q, openBlock as p, createBlock as m, mergeProps as B, unref as o, toHandlers as N, withCtx as $, createElementVNode as w, normalizeClass as A, renderSlot as E, createCommentVNode as P } from "vue";
 import { useTheme as j } from "../../composables/useTheme.js";
 import { useInteractive as z } from "../../composables/useInteractive.js";
 import { useInputtable as l } from "../../composables/useInputtable.js";
@@ -14,19 +14,19 @@ const S = {
   }
 }, T = {
   name: "XFormGroup"
-}, R = /* @__PURE__ */ C({
+}, U = /* @__PURE__ */ C({
   ...T,
   props: S,
   emits: l.emits(),
   setup(d, { expose: f, emit: c }) {
-    const r = d, s = [], V = k(() => typeof r.modelValue == "string" || typeof r.modelValue == "number" || Array.isArray(r.modelValue) ? r.modelValue : "");
+    const r = d, t = [], V = k(() => typeof r.modelValue == "string" || typeof r.modelValue == "number" || Array.isArray(r.modelValue) ? r.modelValue : "");
     q(H, {
-      registerInputGroup: (e, t) => {
-        s.push({ name: e, focus: t });
+      registerInputGroup: (e, s) => {
+        t.push({ name: e, focus: s });
       },
       unregisterInputGroup: (e) => {
-        const t = s.findIndex((g) => g.name === e);
-        s.splice(t, 1);
+        const s = t.findIndex((_) => _.name === e);
+        t.splice(s, 1);
       },
       setValue: (e) => {
         n("update:modelValue", e);
@@ -36,7 +36,7 @@ const S = {
     });
     function i() {
       var e;
-      (e = s[0]) == null || e.focus();
+      (e = t[0]) == null || e.focus();
     }
     const n = c, {
       errorInternal: a,
@@ -49,8 +49,8 @@ const S = {
       change: (e) => {
         r.validateOnInput && !b.value && u(r.modelValue);
       }
-    }, { styles: F, classes: G, className: _ } = j("FormGroup", {}, r, { errorInternal: a });
-    return f({ focus: i, blur, reset: h, validate: u, setError: v }), (e, t) => (m(), p(K, B({
+    }, { styles: F, classes: G, className: g } = j("FormGroup", {}, r, { errorInternal: a });
+    return f({ focus: i, blur, reset: h, validate: u, setError: v }), (e, s) => (p(), m(K, B({
       tag: "fieldset",
       style: o(F),
       disabled: e.disabled,
@@ -58,8 +58,9 @@ const S = {
       "is-inside-form": o(y),
       label: e.label,
       class: [
-        o(_)
-      ]
+        o(g)
+      ],
+      tooltip: e.tooltip
     }, N(I)), {
       default: $(() => [
         w("div", {
@@ -67,16 +68,16 @@ const S = {
         }, [
           E(e.$slots, "default")
         ], 2),
-        e.hideFooter ? P("", !0) : (m(), p(O, {
+        e.hideFooter ? P("", !0) : (p(), m(O, {
           key: 0,
           error: o(a),
           helper: e.helper
         }, null, 8, ["error", "helper"]))
       ]),
       _: 3
-    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class"]));
+    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
   }
 });
 export {
-  R as default
+  U as default
 };

package/lib/components/formGroup/theme/FormGroup.base.theme.js

@@ -2,7 +2,7 @@ const t = {
   classes: {
     wrapper: ({ props: s }) => {
       const e = [""];
-      return s.vertical ? e.push("grid gap-1") : e.push("flex gap-2"), e;
+      return s.vertical ? e.push("grid gap-1") : e.push("flex gap-4"), e;
     }
   }
 }, a = t;

package/lib/components/icon/theme/Icon.base.theme.js

@@ -2,7 +2,7 @@ const t = {
   classes: {
     wrapper: ({ props: s }) => {
       const e = "inline shrink-0";
-      return s.size === "xs" ? e + " h-3 w-3" : s.size === "sm" ? e + " h-4 w-4" : s.size === "lg" ? e + " h-6 w-6" : s.size === "xl" ? e + " h-9 w-9" : e + " h-5 w-5";
+      return s.size === "xs" ? e + " h-3 w-3" : s.size === "sm" ? e + " h-4 w-4" : s.size === "lg" ? e + " h-6 w-6" : s.size === "xl" ? e + " h-7 w-7" : e + " h-4 w-4";
     }
   }
 }, i = t;

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 {