@indielayer/ui 1.2.0 → 1.4.0

package/lib/components/popover/theme/Popover.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Popover.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/popover/theme/PopoverContainer.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { PopoverContainerTheme } from '../PopoverContainer.vue';
+declare const theme: PopoverContainerTheme;
+export default theme;

package/lib/components/popover/theme/PopoverContainer.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { PopoverContainerTheme } from '../PopoverContainer.vue';
+declare const theme: PopoverContainerTheme;
+export default theme;

package/lib/components/popover/theme/PopoverContainer.carbon.theme.js

@@ -0,0 +1,8 @@
+const r = {
+  classes: {
+    wrapper: "block w-full bg-gray-100 dark:bg-gray-700 shadow-lg border border-gray-200 dark:border-gray-800 text-sm"
+  }
+}, e = r;
+export {
+  e as default
+};

package/lib/components/progress/Progress.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const progressProps: {
     percentage: {
         type: NumberConstructor;
@@ -17,6 +18,9 @@ declare const progressProps: {
     };
 };
 export type ProgressProps = ExtractPublicPropTypes<typeof progressProps>;
+type InternalClasses = 'wrapper' | 'list' | 'item';
+export interface ProgressTheme extends ThemeComponent<ProgressProps, InternalClasses> {
+}
 declare const _default: import("vue").DefineComponent<{
     percentage: {
         type: NumberConstructor;
@@ -50,10 +54,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
 }>>, {
-    animate: boolean;
     color: string;
-    thick: boolean;
     percentage: number;
     gradient: boolean;
+    animate: boolean;
+    thick: boolean;
 }, {}>;
 export default _default;

package/lib/components/progress/Progress.vue.js

@@ -1,7 +1,6 @@
-import { defineComponent as d, openBlock as s, createElementBlock as n, normalizeStyle as t, unref as o, normalizeClass as a, createElementVNode as g, createCommentVNode as u } from "vue";
-import { useColors as c } from "../../composables/colors.js";
-import { useTheme as f } from "../../composables/theme.js";
-import h from "./Progress.theme.js";
+import { defineComponent as m, openBlock as s, createElementBlock as n, normalizeStyle as t, unref as a, normalizeClass as o, createElementVNode as g, createCommentVNode as u } from "vue";
+import { useColors as c } from "../../composables/useColors.js";
+import { useTheme as f } from "../../composables/useTheme.js";
 const y = {
   ...c.props("primary"),
   percentage: {
@@ -15,20 +14,20 @@ const y = {
     default: !0
   },
   thick: Boolean
-}, b = { name: "XProgress" }, N = /* @__PURE__ */ d({
-  ...b,
+}, h = { name: "XProgress" }, v = /* @__PURE__ */ m({
+  ...h,
   props: y,
   setup(r) {
-    const l = r, { styles: i, classes: p, className: m } = f("progress", h, l);
-    return (e, k) => (s(), n("div", {
-      style: t(o(i)),
-      class: a([
-        o(m),
-        o(p).wrapper
+    const l = r, { styles: i, classes: p, className: d } = f("Progress", {}, l);
+    return (e, b) => (s(), n("div", {
+      style: t(a(i)),
+      class: o([
+        a(d),
+        a(p).wrapper
       ])
     }, [
       g("div", {
-        class: a(["h-full", [
+        class: o(["h-full", [
           e.gradient ? "bg-gradient-to-r" : "bg-[color:var(--x-progress-bg)]",
           {
             "duration-150 transition-[width]": e.animate
@@ -38,7 +37,7 @@ const y = {
       }, null, 6),
       e.gradient ? (s(), n("div", {
         key: 0,
-        class: a(["absolute h-full bg-gray-100 dark:bg-gray-700 right-0 top-0", { "duration-150 transition-[width]": e.animate }]),
+        class: o(["absolute h-full bg-gray-100 dark:bg-gray-700 right-0 top-0", { "duration-150 transition-[width]": e.animate }]),
         style: t({
           width: `${100 - e.percentage}%`
         })
@@ -47,5 +46,5 @@ const y = {
   }
 });
 export {
-  N as default
+  v as default
 };

package/lib/components/progress/index.d.ts

@@ -1,3 +1,2 @@
 export { default as XProgress } from './Progress.vue';
-export type { ProgressProps } from './Progress.vue';
-export type { ProgressTheme } from './Progress.theme';
+export type { ProgressProps, ProgressTheme } from './Progress.vue';

package/lib/components/progress/theme/Progress.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { ProgressTheme } from '../Progress.vue';
+declare const theme: ProgressTheme;
+export default theme;

package/lib/components/progress/theme/Progress.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { ProgressTheme } from '../Progress.vue';
+declare const theme: ProgressTheme;
+export default theme;

package/lib/components/progress/theme/Progress.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Progress.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/radio/Radio.vue.d.ts

@@ -1,10 +1,10 @@
-import { type ExtractPublicPropTypes } from 'vue';
+import { type ExtractPublicPropTypes, type Ref } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const radioProps: {
-    value: (ArrayConstructor | ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor | FunctionConstructor)[];
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -12,30 +12,45 @@ declare const radioProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
+    hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 };
 export type RadioProps = ExtractPublicPropTypes<typeof radioProps>;
+type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content';
+type InternalExtraData = {
+    selected: Ref<boolean>;
+    isInsideForm: boolean;
+    isInsideFormGroup: boolean;
+};
+export interface RadioTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    value: (ArrayConstructor | ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor | FunctionConstructor)[];
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -43,19 +58,27 @@ 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[];
     };
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -66,11 +89,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validate: (val?: any) => boolean;
     setError: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    value: (ArrayConstructor | ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor | FunctionConstructor)[];
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -78,19 +100,27 @@ 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[];
     };
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -98,13 +128,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
+    glow: boolean;
     color: string;
-    size: import("../../composables/common").Size;
-    required: boolean;
+    size: import("../../composables/useCommon").Size;
     loading: boolean;
-    glow: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
+    required: boolean;
     validateOnInput: boolean;
+    hideFooter: boolean;
     rules: unknown[];
 }, {}>, {
     default?(_: {}): any;

package/lib/components/radio/Radio.vue2.js

@@ -1,117 +1,132 @@
-import { defineComponent as z, ref as I, computed as N, openBlock as a, createElementBlock as d, normalizeStyle as E, unref as l, normalizeClass as r, withKeys as R, withModifiers as q, createElementVNode as t, withDirectives as D, vModelRadio as K, createBlock as M, toDisplayString as X, createCommentVNode as v, renderSlot as j, createVNode as A } from "vue";
-import { useCommon as b } from "../../composables/common.js";
-import { useTheme as F } from "../../composables/theme.js";
-import { useColors as L } from "../../composables/colors.js";
-import { useInteractive as y } from "../../composables/interactive.js";
-import { useInputtable as u } from "../../composables/inputtable.js";
-import O from "../spinner/Spinner.vue.js";
-import P from "../helpers/InputError.js";
-import T from "./Radio.theme.js";
-const U = ["aria-selected", "aria-disabled"], G = ["name", "required", "disabled"], H = /* @__PURE__ */ t("circle", {
+import { defineComponent as D, ref as M, computed as P, unref as s, openBlock as o, createElementBlock as n, normalizeStyle as T, normalizeClass as r, withKeys as H, withModifiers as L, createElementVNode as a, withDirectives as O, mergeProps as U, toHandlers as X, vModelRadio as _, createBlock as h, toDisplayString as j, createCommentVNode as p, renderSlot as A } from "vue";
+import { useCommon as g } from "../../composables/useCommon.js";
+import { useTheme as J } from "../../composables/useTheme.js";
+import { useColors as Q } from "../../composables/useColors.js";
+import { useInteractive as w } from "../../composables/useInteractive.js";
+import { useInputtable as c } from "../../composables/useInputtable.js";
+import W from "../spinner/Spinner.vue.js";
+import Y from "../inputFooter/InputFooter.vue.js";
+const Z = ["aria-selected", "aria-disabled", "onKeypress"], x = ["id", "name", "required", "disabled"], ee = /* @__PURE__ */ a("circle", {
   cx: "10",
   cy: "10",
   r: "10"
-}, null, -1), J = [
-  H
-], Q = ["textContent"], W = {
-  ...b.props(),
-  ...L.props("primary"),
-  ...y.props(),
-  ...u.props(),
-  value: [String, Number, Boolean, Function, Object, Array],
-  label: String,
-  helper: String,
+}, null, -1), le = [
+  ee
+], se = ["textContent"], oe = {
+  ...g.props(),
+  ...Q.props("primary"),
+  ...w.props(),
+  ...c.props(),
+  value: [String, Number],
   glow: Boolean
-}, Y = {
+}, re = {
   name: "XRadio",
   validators: {
-    ...b.validators()
+    ...g.validators()
   }
-}, te = /* @__PURE__ */ z({
-  ...Y,
-  props: W,
-  emits: u.emits(!1),
-  setup(g, { expose: h, emit: p }) {
-    const o = g, m = I(null), i = N({
+}, ce = /* @__PURE__ */ D({
+  ...re,
+  props: oe,
+  emits: c.emits(!1),
+  setup(V, { expose: k, emit: I }) {
+    const l = V, d = I, f = M(null), { focus: v, blur: C } = w(f), {
+      errorInternal: $,
+      hideFooterInternal: z,
+      isInsideForm: B,
+      isInsideFormGroup: u,
+      isFirstValidation: R,
+      formGroup: m,
+      reset: F,
+      validate: b,
+      setError: N
+    } = c(l, { focus: v, emit: d, withListeners: !1 }), i = P({
       get() {
-        return o.value === o.modelValue;
+        const e = s(m.value);
+        return u ? e === l.value : l.value === l.modelValue;
       },
       set() {
-        p("update:modelValue", o.value);
+        d("update:modelValue", l.value), m.setValue(l.value);
       }
-    }), { focus: c, blur: w } = y(m), {
-      errorInternal: k,
-      reset: $,
-      validate: C,
-      setError: V
-    } = u(o, { focus: c, emit: p, withListeners: !1 }), { styles: B, classes: s, className: S } = F("radio", T, o, { selected: i });
-    return h({ focus: c, blur: w, reset: $, validate: C, setError: V }), (e, n) => (a(), d("label", {
+    });
+    function S() {
+      d("update:modelValue", l.value), m.setValue(l.value);
+    }
+    const q = {
+      input: () => {
+        u || setTimeout(() => {
+          l.validateOnInput && !R.value && b(l.modelValue);
+        }, 0);
+      }
+    }, { styles: E, classes: t, className: G } = J("Radio", {}, l, { selected: i, isInsideForm: B, isInsideFormGroup: u });
+    return k({ focus: v, blur: C, reset: F, validate: b, setError: N }), (e, y) => (o(), n("label", {
       ref_key: "elRef",
-      ref: m,
+      ref: f,
       tabindex: "0",
       "aria-selected": i.value ? "true" : "false",
       "aria-disabled": e.disabled || e.loading ? "true" : void 0,
-      style: E(l(B)),
+      style: T(s(E)),
       class: r([
-        l(S),
-        l(s).wrapper
+        s(G),
+        s(t).wrapper
       ]),
-      onKeypress: n[1] || (n[1] = R(q((f) => e.$emit("update:modelValue", e.value), ["prevent", "stop"]), ["space"]))
+      onKeypress: H(L(S, ["prevent", "stop"]), ["space"])
     }, [
-      t("div", {
+      a("div", {
         class: r(["flex items-center", { "cursor-not-allowed": e.disabled }])
       }, [
-        D(t("input", {
-          "onUpdate:modelValue": n[0] || (n[0] = (f) => i.value = f),
+        O(a("input", U({
+          id: e.id,
+          "onUpdate:modelValue": y[0] || (y[0] = (K) => i.value = K),
           name: e.name,
           required: e.required,
           disabled: e.disabled || e.loading,
           type: "radio",
           class: "invisible absolute"
-        }, null, 8, G), [
-          [K, i.value]
+        }, X(q, !0)), null, 16, x), [
+          [_, i.value]
         ]),
-        t("div", {
+        a("div", {
           class: r([
             e.$style.radio,
-            l(s).circle,
+            s(t).circle,
             [e.glow && !e.disabled && !e.loading ? e.$style["radio--glow"] : ""]
           ])
         }, [
-          e.loading ? (a(), M(O, {
+          e.loading ? (o(), h(W, {
             key: 0,
             size: e.size,
             class: "absolute"
-          }, null, 8, ["size"])) : (a(), d("svg", {
+          }, null, 8, ["size"])) : (o(), n("svg", {
             key: 1,
             viewBox: "0 0 20 20",
             class: r(["fill-current w-full", [
-              l(s).circleIcon,
+              s(t).circleIcon,
               e.$style.radio_circle
             ]])
-          }, J, 2))
+          }, le, 2))
         ], 2),
-        t("div", null, [
-          e.label ? (a(), d("div", {
+        a("div", null, [
+          e.label ? (o(), n("div", {
             key: 0,
-            class: r(l(s).label),
-            textContent: X(e.label)
-          }, null, 10, Q)) : v("", !0),
-          e.$slots.default ? (a(), d("div", {
+            class: r(s(t).label),
+            textContent: j(e.label)
+          }, null, 10, se)) : p("", !0),
+          e.$slots.default ? (o(), n("div", {
             key: 1,
-            class: r(l(s).content)
+            class: r(s(t).content)
           }, [
-            j(e.$slots, "default")
-          ], 2)) : v("", !0)
+            A(e.$slots, "default")
+          ], 2)) : p("", !0)
         ])
       ], 2),
-      A(l(P), {
-        error: l(k),
+      s(z) ? p("", !0) : (o(), h(Y, {
+        key: 0,
+        error: s($),
         helper: e.helper
-      }, null, 8, ["error", "helper"])
-    ], 46, U));
+      }, null, 8, ["error", "helper"]))
+    ], 46, Z));
   }
 });
 export {
-  te as default
+  ce as default
 };

package/lib/components/radio/index.d.ts

@@ -1,3 +1,2 @@
 export { default as XRadio } from './Radio.vue';
-export type { RadioProps } from './Radio.vue';
-export type { RadioTheme } from './Radio.theme';
+export type { RadioProps, RadioTheme } from './Radio.vue';

package/lib/components/radio/theme/Radio.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { RadioTheme } from '../Radio.vue';
+declare const theme: RadioTheme;
+export default theme;

package/lib/components/radio/theme/Radio.base.theme.js

@@ -0,0 +1,70 @@
+const a = {
+  classes: {
+    wrapper: ({ data: e }) => {
+      const t = ["inline-block relative cursor-pointer focus:outline-none group"];
+      return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-3"), t;
+    },
+    circle: ({ props: e }) => {
+      let t = "rounded-full flex justify-center items-center shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline";
+      return (e.size === "xs" || e.size === "sm") && (t += " h-4 w-4"), e.size === "xl" ? t += " h-6 w-6" : t += " h-5 w-5", t;
+    },
+    circleIcon: ({ props: e, data: t }) => {
+      const r = [];
+      return t.selected || r.push("opacity-0"), e.size === "sm" || e.size === "xs" ? r.push("h-2") : e.size === "lg" ? r.push("h-2.5") : e.size === "xl" ? r.push("h-3") : r.push("h-[0.6rem]"), r;
+    },
+    label: ({ props: e }) => {
+      let t = "font-medium text-gray-800 dark:text-gray-200 pl-2";
+      return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
+    },
+    content: ({ props: e }) => {
+      let t = "pl-2";
+      return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
+    }
+  },
+  styles: ({ props: e, colors: t, css: r, data: n }) => {
+    const l = t.getPalette("gray"), s = t.getPalette(e.color), i = [];
+    return e.loading ? r.variables({
+      bg: "transparent",
+      border: "transparent",
+      dark: {
+        bg: "transparent",
+        border: "transparent"
+      }
+    }) : (e.disabled ? n.selected ? i.push(r.variables({
+      bg: "transparent",
+      border: l[200],
+      circle: l[200],
+      dark: {
+        bg: "transparent",
+        border: l[700],
+        circle: l[700]
+      }
+    })) : i.push(r.variables({
+      bg: l[200],
+      border: l[200],
+      dark: {
+        bg: l[700],
+        border: l[700]
+      }
+    })) : (n.selected ? i.push(r.variables({
+      bg: "transparent",
+      border: s[500],
+      circle: s[500],
+      dark: {
+        bg: "transparent",
+        border: s[500],
+        circle: s[500]
+      }
+    })) : i.push(r.variables({
+      bg: "#fff",
+      border: e.glow ? s[300] : l[300],
+      dark: {
+        bg: l[900],
+        border: e.glow ? s[300] : l[300]
+      }
+    })), e.glow && i.push(r.get("glow", t.getColorOpacity(s[500], 0.5)))), i);
+  }
+}, u = a;
+export {
+  u as default
+};

package/lib/components/radio/theme/Radio.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { RadioTheme } from '../Radio.vue';
+declare const theme: RadioTheme;
+export default theme;

package/lib/components/radio/theme/Radio.carbon.theme.js

@@ -0,0 +1,64 @@
+const i = {
+  classes: {
+    wrapper: ({ data: e }) => {
+      const r = ["inline-block relative cursor-pointer focus:outline-none group"];
+      return e.isInsideForm && !e.isInsideFormGroup && r.push("mb-8"), r;
+    },
+    circle: ({ props: e }) => {
+      const r = ["rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline"];
+      return e.size === "xs" || e.size === "sm" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-5 w-5") : r.push("h-4 w-4"), r;
+    },
+    circleIcon: ({ props: e, data: r }) => {
+      const t = [];
+      return r.selected ? e.size === "lg" ? t.push("h-2.5") : e.size === "xl" ? t.push("h-3") : t.push("h-2") : t.push("opacity-0"), t;
+    },
+    label: "text-sm text-gray-800 dark:text-gray-200 pl-2",
+    content: "pl-2"
+  },
+  styles: ({ props: e, colors: r, css: t, data: n }) => {
+    const s = r.getPalette("gray"), l = r.getPalette(e.color), a = [];
+    return e.loading ? t.variables({
+      bg: "transparent",
+      border: "transparent",
+      dark: {
+        bg: "transparent",
+        border: "transparent"
+      }
+    }) : (e.disabled ? n.selected ? a.push(t.variables({
+      bg: "transparent",
+      border: s[200],
+      circle: s[200],
+      dark: {
+        bg: "transparent",
+        border: s[700],
+        circle: s[700]
+      }
+    })) : a.push(t.variables({
+      bg: s[200],
+      border: s[200],
+      dark: {
+        bg: s[700],
+        border: s[700]
+      }
+    })) : (n.selected ? a.push(t.variables({
+      bg: "transparent",
+      border: l[500],
+      circle: l[500],
+      dark: {
+        bg: "transparent",
+        border: l[500],
+        circle: l[500]
+      }
+    })) : a.push(t.variables({
+      bg: "#fff",
+      border: e.glow ? l[300] : s[900],
+      dark: {
+        bg: s[900],
+        border: e.glow ? l[300] : s[300]
+      }
+    })), e.glow && a.push(t.get("glow", r.getColorOpacity(l[500], 0.5)))), a);
+  }
+}, o = i;
+export {
+  o as default
+};