@indielayer/ui 1.0.10 → 1.2.0

package/lib/components/form/Form.vue.d.ts

@@ -1,12 +1,33 @@
-import { type PropType } from 'vue';
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+declare const formProps: {
+    autoValidate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: BooleanConstructor;
+    errors: {
+        type: PropType<[FormError[], FormError]>;
+        default: () => never[];
+    };
+};
+export type FormProps = ExtractPublicPropTypes<typeof formProps>;
+export type FormInjection = {
+    registerInput: (name: string, focus: () => void, validate: () => boolean, setError: (val: string) => void) => void;
+    unregisterInput: (name: string) => void;
+    isInsideForm: boolean;
+};
 export type FormError = {
     field: string;
     msg: string;
 };
-export type Form = {
+export type FormInput = {
     name: string;
     focus: () => void;
-    validate: () => boolean;
+    validate: (val?: any) => boolean;
     setError: (val: string) => void;
 };
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
@@ -40,9 +61,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
     autoValidate: boolean;
     autoFocus: boolean;
+    disabled: boolean;
     errors: [FormError[], FormError];
 }, {}>, {
     default?(_: {}): any;

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

@@ -0,0 +1,79 @@
+import { defineComponent as y, provide as b, onMounted as _, watch as F, nextTick as V, openBlock as g, createElementBlock as E, normalizeStyle as I, unref as r, normalizeClass as v, createElementVNode as B, renderSlot as x } from "vue";
+import { injectFormKey as A } from "../../composables/keys.js";
+import { useTheme as k } from "../../composables/theme.js";
+import S from "./Form.theme.js";
+const j = ["disabled"], w = {
+  autoValidate: {
+    type: Boolean,
+    default: !0
+  },
+  autoFocus: {
+    type: Boolean,
+    default: !0
+  },
+  disabled: Boolean,
+  errors: {
+    type: [Array, Object],
+    default: () => []
+  }
+}, z = {
+  name: "XForm",
+  inheritAttrs: !1
+}, D = /* @__PURE__ */ y({
+  ...z,
+  props: w,
+  emits: ["submit"],
+  setup(l, { emit: d }) {
+    const i = l, s = [];
+    b(A, {
+      registerInput: (e, t, o, a) => {
+        const n = s.find((h) => h.name === e);
+        n ? (n.focus = t, n.validate = o, n.setError = a) : s.push({ name: e, focus: t, validate: o, setError: a });
+      },
+      unregisterInput: (e) => {
+        const t = s.findIndex((o) => o.name === e);
+        s.splice(t, 1);
+      },
+      isInsideForm: !0
+    }), _(() => {
+      i.autoFocus && s && s.length > 0 && s[0].focus();
+    }), F(() => i.errors, (e) => {
+      e && V(() => {
+        if (Array.isArray(e))
+          e.forEach((t) => {
+            const o = s.find((a) => a.name === t.field);
+            o && o.setError(t.msg);
+          });
+        else {
+          const t = s.find((o) => o.name === e.field);
+          t && t.setError(e.msg);
+        }
+      });
+    });
+    const f = () => {
+      let e = !0;
+      return s.forEach((t) => {
+        !t.validate() && e && (e = !1, t.focus && t.focus());
+      }), e;
+    }, u = (e) => {
+      e.preventDefault(), e.stopPropagation();
+      const t = i.autoValidate ? f() : !0;
+      d("submit", t);
+    }, { styles: c, classes: m, className: p } = k("form", S, i);
+    return (e, t) => (g(), E("form", {
+      style: I(r(c)),
+      class: v([
+        r(p),
+        r(m).wrapper
+      ]),
+      onSubmit: u
+    }, [
+      B("fieldset", { disabled: e.disabled }, [
+        x(e.$slots, "default")
+      ], 8, j)
+    ], 38));
+  }
+});
+export {
+  D as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./Form.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,3 @@
+export { default as XForm } from './Form.vue';
+export type { FormProps, FormError, FormInjection, FormInput } from './Form.vue';
+export type { FormTheme } from './Form.theme';

package/lib/components/helpers/InputError.js

@@ -0,0 +1,18 @@
+import { defineComponent as t, createVNode as e } from "vue";
+const n = /* @__PURE__ */ t({
+  name: "InputError",
+  props: {
+    error: String,
+    helper: String
+  },
+  setup(r) {
+    return () => r.error ? e("p", {
+      class: "text-sm text-red-500 dark:text-red-400 mt-1"
+    }, [r.error]) : r.helper ? e("p", {
+      class: "text-sm text-gray-500 dark:text-gray-400 mt-1"
+    }, [r.helper]) : "";
+  }
+});
+export {
+  n as default
+};

package/lib/components/icon/Icon.theme.d.ts

@@ -1,7 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: ({ props }: ThemeParams) => string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { IconProps } from './Icon.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<IconProps, InternalClasses> {
+}
+export interface IconTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<IconProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

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

@@ -0,0 +1,11 @@
+const t = {
+  classes: {
+    wrapper: ({ props: s }) => {
+      const e = "inline";
+      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";
+    }
+  }
+}, i = t;
+export {
+  i as default
+};

package/lib/components/icon/Icon.vue.d.ts

@@ -1,7 +1,25 @@
+import { type ExtractPublicPropTypes } from 'vue';
+declare const iconProps: {
+    icon: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    filled: BooleanConstructor;
+    viewBox: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type IconProps = ExtractPublicPropTypes<typeof iconProps>;
 declare const _default: import("vue").DefineComponent<{
     icon: {
         type: StringConstructor;
-        required: true;
+        required: boolean;
     };
     filled: BooleanConstructor;
     viewBox: {
@@ -16,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {
         type: StringConstructor;
-        required: true;
+        required: boolean;
     };
     filled: BooleanConstructor;
     viewBox: {
@@ -30,7 +48,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     size: import("../../composables/common").Size;
-    filled: boolean;
     viewBox: string;
+    filled: boolean;
 }, {}>;
 export default _default;

package/lib/components/icon/Icon.vue.js

@@ -0,0 +1,74 @@
+import { defineComponent as I, inject as T, ref as s, watchEffect as H, computed as L, normalizeStyle as h, unref as i, openBlock as x, createElementBlock as k, mergeProps as M, normalizeClass as O } from "vue";
+import { useCommon as y } from "../../composables/common.js";
+import { injectIconsKey as g } from "../../composables/keys.js";
+import { useTheme as z } from "../../composables/theme.js";
+import E from "./Icon.theme.js";
+const V = ["innerHTML"], G = ["stroke-linejoin", "stroke-linecap", "stroke", "fill", "viewBox", "innerHTML"], P = {
+  ...y.props(),
+  icon: {
+    type: String,
+    required: !0
+  },
+  filled: Boolean,
+  viewBox: {
+    type: String,
+    default: "0 0 24 24"
+  }
+}, W = {
+  name: "XIcon",
+  validators: {
+    ...y.validators()
+  }
+}, $ = /* @__PURE__ */ I({
+  ...W,
+  props: P,
+  setup(_) {
+    const o = _, a = T(g, () => ({})), r = s(!1), t = s(""), n = s(o.filled), u = s(o.viewBox), f = s({});
+    H(() => {
+      const e = a && o.icon && a[o.icon];
+      if (r.value = !1, t.value = e, e)
+        if (typeof e == "string")
+          if (e.startsWith("<svg")) {
+            r.value = !0;
+            const { content: c, attributes: l } = B(e);
+            f.value = l, t.value = c;
+          } else
+            r.value = !1, t.value = e;
+        else
+          typeof e == "object" && (t.value = e.icon, n.value = e.filled || o.filled, u.value = e.viewBox || e.viewbox || o.viewBox);
+      else
+        t.value = o.icon || "";
+    });
+    function B(e) {
+      e = e.trim();
+      const c = e.substring(e.indexOf(">") + 1, e.lastIndexOf("</svg>")), l = e.substring(e.indexOf("<svg") + 4, e.indexOf(">")).trim().match(/[\w-]+="[^"]*"/g), m = {};
+      return l == null || l.forEach((j) => {
+        const [w, C] = j.split("=");
+        ["height", "width", "class"].includes(w) || (m[w] = C.replace(/(^"|"$)/g, ""));
+      }), {
+        attributes: m,
+        content: c
+      };
+    }
+    const { styles: b, classes: p, className: v } = z("icon", E, o), d = L(() => h(i(b)));
+    return (e, c) => r.value ? (x(), k("svg", M({
+      key: 0,
+      style: d.value,
+      class: ["shrink-0", i(v), i(p).wrapper]
+    }, f.value, { innerHTML: t.value }), null, 16, V)) : (x(), k("svg", {
+      key: 1,
+      style: h(d.value),
+      xmlns: "http://www.w3.org/2000/svg",
+      class: O(["shrink-0", i(v), i(p).wrapper, { "stroke-2": !n.value }]),
+      "stroke-linejoin": n.value ? void 0 : "round",
+      "stroke-linecap": n.value ? void 0 : "round",
+      stroke: n.value ? void 0 : "currentColor",
+      fill: n.value ? "currentColor" : "none",
+      viewBox: u.value,
+      innerHTML: t.value
+    }, null, 14, G));
+  }
+});
+export {
+  $ as default
+};

package/lib/components/icon/Icon.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Icon.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,3 @@
+export { default as XIcon } from './Icon.vue';
+export type { IconProps } from './Icon.vue';
+export type { IconTheme } from './Icon.theme';

package/lib/components/image/Image.theme.d.ts

@@ -1,6 +1,10 @@
-declare const _default: {
-    classes: {
-        wrapper: string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { ImageProps } from './Image.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<ImageProps, InternalClasses> {
+}
+export interface ImageTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<ImageProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/image/Image.theme.js

@@ -0,0 +1,8 @@
+const e = {
+  classes: {
+    wrapper: ""
+  }
+}, s = e;
+export {
+  s as default
+};

package/lib/components/image/Image.vue.d.ts

@@ -1,3 +1,8 @@
+import { type ExtractPublicPropTypes } from 'vue';
+declare const imageProps: {
+    src: StringConstructor;
+};
+export type ImageProps = ExtractPublicPropTypes<typeof imageProps>;
 declare const _default: import("vue").DefineComponent<{
     src: StringConstructor;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/components/image/Image.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent as m, ref as i, watch as f, openBlock as A, createElementBlock as p, normalizeClass as u, unref as r, normalizeStyle as d } from "vue";
+import { useTheme as g } from "../../composables/theme.js";
+import _ from "./Image.theme.js";
+const h = ["src"], w = {
+  src: String
+}, k = { name: "XImage" }, D = /* @__PURE__ */ m({
+  ...k,
+  props: w,
+  setup(a) {
+    const s = a, t = i("data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=");
+    typeof window < "u" && Image && f(() => s.src, (o) => {
+      if (!o)
+        return;
+      const e = new Image();
+      e.onload = () => {
+        t.value = s.src;
+      }, e.onerror = () => {
+      }, e.src = o;
+    }, {
+      immediate: !0
+    });
+    const { styles: n, classes: c, className: l } = g("image", _, s);
+    return (o, e) => (A(), p("img", {
+      class: u([r(l), r(c).wrapper]),
+      style: d(r(n)),
+      src: t.value
+    }, null, 14, h));
+  }
+});
+export {
+  D as default
+};

package/lib/components/image/Image.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Image.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,3 @@
+export { default as XImage } from './Image.vue';
+export type { ImageProps } from './Image.vue';
+export type { ImageTheme } from './Image.theme';

package/lib/components/index.d.ts

@@ -1,45 +1,35 @@
-export { default as XAlert } from './alert/Alert.vue';
-export { default as XAvatar } from './avatar/Avatar.vue';
-export { default as XBadge } from './badge/Badge.vue';
-export { default as XBreadcrumbs } from './breadcrumbs/Breadcrumbs.vue';
-export { default as XButton } from './button/Button.vue';
-export { default as XButtonGroup } from './button/ButtonGroup.vue';
-export { default as XCard } from './card/Card.vue';
-export { default as XCheckbox } from './checkbox/Checkbox.vue';
-export { default as XCollapse } from './collapse/Collapse.vue';
-export { default as XContainer } from './container/Container.vue';
-export { default as XDivider } from './divider/Divider.vue';
-export { default as XDrawer } from './drawer/Drawer.vue';
-export { default as XForm } from './form/Form.vue';
-export { default as XIcon } from './icon/Icon.vue';
-export { default as XImage } from './image/Image.vue';
-export { default as XInput } from './input/Input.vue';
-export { default as XLink } from './link/Link.vue';
-export { default as XMenu } from './menu/Menu.vue';
-export { default as XMenuItem } from './menu/MenuItem.vue';
-export { default as XModal } from './modal/Modal.vue';
-export { default as XNotifications } from './notifications/Notifications.vue';
-export { default as XPagination } from './pagination/Pagination.vue';
-export { default as XPaginationItem } from './pagination/PaginationItem.vue';
-export { default as XPopover } from './popover/Popover.vue';
-export { default as XPopoverContainer } from './popover/PopoverContainer.vue';
-export { default as XProgress } from './progress/Progress.vue';
-export { default as XRadio } from './radio/Radio.vue';
-export { default as XScroll } from './scroll/Scroll.vue';
-export { default as XSelect } from './select/Select.vue';
-export { default as XSkeleton } from './skeleton/Skeleton.vue';
-export { default as XSlider } from './slider/Slider.vue';
-export { default as XSpacer } from './spacer/Spacer';
-export { default as XSpinner } from './spinner/Spinner.vue';
-export { default as XTable } from './table/Table.vue';
-export { default as XTableBody } from './table/TableBody';
-export { default as XTableCell } from './table/TableCell.vue';
-export { default as XTableHead } from './table/TableHead';
-export { default as XTableHeader } from './table/TableHeader.vue';
-export { default as XTableRow } from './table/TableRow.vue';
-export { default as XTab } from './tab/Tab.vue';
-export { default as XTabGroup } from './tab/TabGroup.vue';
-export { default as XTag } from './tag/Tag.vue';
-export { default as XTextarea } from './textarea/Textarea.vue';
-export { default as XToggle } from './toggle/Toggle.vue';
-export { default as XTooltip } from './tooltip/Tooltip.vue';
+export * from './alert';
+export * from './avatar';
+export * from './badge';
+export * from './breadcrumbs';
+export * from './button';
+export * from './card';
+export * from './checkbox';
+export * from './collapse';
+export * from './container';
+export * from './divider';
+export * from './drawer';
+export * from './form';
+export * from './icon';
+export * from './image';
+export * from './input';
+export * from './link';
+export * from './menu';
+export * from './modal';
+export * from './notifications';
+export * from './pagination';
+export * from './popover';
+export * from './progress';
+export * from './radio';
+export * from './scroll';
+export * from './select';
+export * from './skeleton';
+export * from './slider';
+export * from './spacer';
+export * from './spinner';
+export * from './tab';
+export * from './table';
+export * from './tag';
+export * from './textarea';
+export * from './toggle';
+export * from './tooltip';

package/lib/components/index.js

@@ -0,0 +1,92 @@
+import { default as o } from "./badge/Badge.vue.js";
+import { default as t } from "./breadcrumbs/Breadcrumbs.vue.js";
+import { default as l } from "./card/Card.vue.js";
+import { default as p } from "./collapse/Collapse.vue.js";
+import { default as m } from "./container/Container.vue.js";
+import { default as x } from "./divider/Divider.vue.js";
+import { default as n } from "./drawer/Drawer.vue.js";
+import { default as T } from "./form/Form.vue.js";
+import { default as g } from "./image/Image.vue.js";
+import { default as C } from "./input/Input.vue.js";
+import { default as B } from "./menu/Menu.vue.js";
+import { default as P } from "./modal/Modal.vue.js";
+import { default as k } from "./notifications/Notifications.vue.js";
+import { default as w } from "./pagination/Pagination.vue.js";
+import { default as D } from "./popover/PopoverContainer.vue.js";
+import { default as H } from "./progress/Progress.vue.js";
+import { default as h } from "./select/Select.vue.js";
+import { default as F } from "./skeleton/Skeleton.vue.js";
+import { default as N } from "./slider/Slider.vue.js";
+import { default as q } from "./tab/Tab.vue.js";
+import { default as E } from "./tab/TabGroup.vue.js";
+import { default as K } from "./table/Table.vue.js";
+import { default as Q } from "./textarea/Textarea.vue.js";
+import { default as V } from "./toggle/Toggle.vue.js";
+import { default as Y } from "./tooltip/Tooltip.vue.js";
+import { default as _ } from "./alert/Alert.vue.js";
+import { default as ee } from "./avatar/Avatar.vue.js";
+import { default as oe } from "./button/Button.vue.js";
+import { default as te } from "./button/ButtonGroup.vue.js";
+import { default as le } from "./checkbox/Checkbox.vue.js";
+import { default as pe } from "./icon/Icon.vue.js";
+import { default as me } from "./link/Link.vue.js";
+import { default as xe } from "./menu/MenuItem.vue.js";
+import { default as ne } from "./pagination/PaginationItem.vue.js";
+import { default as Te } from "./popover/Popover.vue.js";
+import { default as ge } from "./radio/Radio.vue.js";
+import { default as Ce } from "./scroll/Scroll.vue.js";
+import { default as Be } from "./spacer/Spacer.js";
+import { default as Pe } from "./spinner/Spinner.vue.js";
+import { default as ke } from "./table/TableBody.js";
+import { default as we } from "./table/TableCell.vue.js";
+import { default as De } from "./table/TableHead.js";
+import { default as He } from "./table/TableHeader.vue.js";
+import { default as he } from "./table/TableRow.vue.js";
+import { default as Fe } from "./tag/Tag.vue.js";
+export {
+  _ as XAlert,
+  ee as XAvatar,
+  o as XBadge,
+  t as XBreadcrumbs,
+  oe as XButton,
+  te as XButtonGroup,
+  l as XCard,
+  le as XCheckbox,
+  p as XCollapse,
+  m as XContainer,
+  x as XDivider,
+  n as XDrawer,
+  T as XForm,
+  pe as XIcon,
+  g as XImage,
+  C as XInput,
+  me as XLink,
+  B as XMenu,
+  xe as XMenuItem,
+  P as XModal,
+  k as XNotifications,
+  w as XPagination,
+  ne as XPaginationItem,
+  Te as XPopover,
+  D as XPopoverContainer,
+  H as XProgress,
+  ge as XRadio,
+  Ce as XScroll,
+  h as XSelect,
+  F as XSkeleton,
+  N as XSlider,
+  Be as XSpacer,
+  Pe as XSpinner,
+  q as XTab,
+  E as XTabGroup,
+  K as XTable,
+  ke as XTableBody,
+  we as XTableCell,
+  De as XTableHead,
+  He as XTableHeader,
+  he as XTableRow,
+  Fe as XTag,
+  Q as XTextarea,
+  V as XToggle,
+  Y as XTooltip
+};

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

@@ -1,11 +1,13 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: string;
-        label: ({ props }: ThemeParams) => string;
-        input: ({ props, data }: ThemeParams) => string[];
-        icon: string;
-    };
-    styles: ({ colors, props, css }: ThemeParams) => string;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { InputProps } from './Input.vue';
+type InternalClasses = 'wrapper' | 'label' | 'input' | 'icon';
+type InternalExtraData = {
+    errorInternal: any;
 };
-export default _default;
+interface InternalTheme extends ThemeComponent<InputProps, InternalClasses, InternalExtraData> {
+}
+export interface InputTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<InputProps, InternalClasses, InternalExtraData>>;
+}
+declare const theme: InternalTheme;
+export default theme;

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

@@ -0,0 +1,21 @@
+const s = {
+  classes: {
+    wrapper: "inline-block align-bottom text-left",
+    label: ({ props: e }) => {
+      const r = "font-medium text-gray-800 dark:text-gray-200 mb-1";
+      return e.size === "xs" ? r + " text-xs" : e.size === "sm" ? r + " text-sm" : e.size === "lg" ? r + " text-lg" : e.size === "xl" ? r + " text-xl" : r;
+    },
+    input: ({ props: e, data: r }) => {
+      const t = ["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 !r.errorInternal && !e.disabled && t.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" ? t.push("px-2 py-1 text-xs") : e.size === "sm" ? t.push("px-2 py-2 text-sm") : e.size === "lg" ? t.push("px-4 py-3 text-lg") : e.size === "xl" ? t.push("px-5 py-4 text-xl") : t.push("px-3 py-2"), t.push(e.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"), t;
+    },
+    icon: "text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0"
+  },
+  styles: ({ colors: e, props: r, css: t }) => {
+    const a = e.getPalette(r.color);
+    return t.get("border", a[400]);
+  }
+}, l = s;
+export {
+  l as default
+};