@indielayer/ui 1.3.0 → 1.4.0

package/lib/components/index.js

@@ -1,105 +1,111 @@
-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 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 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 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 { 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 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 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 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 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";
 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,
+  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,
-  be as XIcon,
-  S as XImage,
-  P as XInput,
-  Ce as XInputFooter,
-  Se as XLabel,
-  Pe as XLink,
-  Be as XLoader,
-  B as XMenu,
-  Le 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,
-  ae as XToggle,
-  re as XTooltip
+  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
 };

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,6 +31,8 @@ declare const inputProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -67,8 +68,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 +86,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,6 +94,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -127,8 +129,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 +147,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,6 +155,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -179,15 +182,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,40 +57,42 @@ 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
       ])
     }, {
-      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: [
@@ -116,23 +116,23 @@ 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
@@ -143,5 +143,5 @@ const Q = { class: "relative" }, U = ["disabled", "min", "max", "minlength", "ma
   }
 });
 export {
-  te as default
+  ae as default
 };

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

@@ -3,7 +3,7 @@ const s = {
     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;
+      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;
     },
     icon: "text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0"
   },

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

@@ -1,6 +1,6 @@
 const e = {
   classes: {
-    wrapper: "min-h-[1rem] text-sm mt-1",
+    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"
   }

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

@@ -1,6 +1,6 @@
 const e = {
   classes: {
-    wrapper: "min-h-[1rem] text-xs mt-1",
+    wrapper: "text-xs mt-1",
     helperText: "text-gray-500 dark:text-gray-400",
     errorText: "text-red-500 dark:text-red-400"
   }

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

@@ -51,11 +51,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         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;

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

@@ -1,11 +1,12 @@
-import t from "./Label.base.theme.js";
-var e;
-const a = {
+const s = {
   classes: {
-    wrapper: (e = t.classes) == null ? void 0 : e.wrapper,
+    wrapper: ({ props: t }) => {
+      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"
   }
-}, r = a;
+}, l = s;
 export {
-  r as default
+  l as default
 };

package/lib/components/link/Link.vue.d.ts

@@ -45,8 +45,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
 }>>, {
-    color: string;
     tag: string;
+    color: string;
     shadow: boolean;
     underline: boolean;
     external: boolean;

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
-}, m = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-170b7443"]]);
+}, c = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-37edea5a"]]);
 export {
-  m as default
+  c as default
 };

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

@@ -7,7 +7,7 @@ const C = {
   key: 0,
   class: "inline-flex items-center"
 }, $ = {
-  ...h.props(),
+  ...h.props("primary"),
   tag: {
     type: String,
     default: "a"

package/lib/components/link/theme/Link.base.theme.js

@@ -1,10 +1,10 @@
-const r = {
+const a = {
   classes: {
     wrapper: "transition duration-300 ease-in-out cursor-pointer inline-flex"
   },
-  styles: ({ colors: o, props: t, css: a }) => {
+  styles: ({ colors: o, props: t, css: r }) => {
     const e = o.getPalette(t.color || "gray");
-    return a.variables({
+    return r.variables({
       text: t.color ? e[600] : "",
       hover: {
         text: t.shadow ? "" : e[700]
@@ -19,7 +19,7 @@ const r = {
       }
     });
   }
-}, s = r;
+}, s = a;
 export {
   s as default
 };

package/lib/components/link/theme/Link.carbon.theme.js

@@ -1,5 +1,25 @@
-import e from "./Link.base.theme.js";
-const t = e, o = t;
+const a = {
+  classes: {
+    wrapper: "transition duration-300 ease-in-out cursor-pointer inline-flex text-sm"
+  },
+  styles: ({ colors: o, props: e, css: r }) => {
+    const t = o.getPalette(e.color || "gray");
+    return r.variables({
+      text: e.color ? t[600] : "",
+      hover: {
+        text: e.shadow ? "" : t[700]
+      },
+      shadow: t[100],
+      dark: {
+        text: e.color ? t[400] : "",
+        hover: {
+          text: t[300]
+        },
+        shadow: t[900]
+      }
+    });
+  }
+}, s = a;
 export {
-  o as default
+  s as default
 };

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

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