@rotki/ui-library 2.27.0 → 3.0.0-beta.2

package/dist/components/forms/text-field/RuiTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTextField.js","names":[],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { textFieldStyles, type TextFieldVariant } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: TextFieldVariant;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  variant = 'default',\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst { focused } = useFocus(inputRef);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) || !!get(modelValue));\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n  variant,\n  dense,\n  disabled,\n  hovered: get(isHovered),\n  focused: get(focused),\n  active: get(active),\n  noLabel: !label,\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n  showLabel: !!label,\n}));\n\nconst labelStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n  if (!get(active) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement) {\n    set(modelValue, target.value);\n  }\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"ui.wrapper()\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <label\n          :class=\"ui.label()\"\n          :style=\"labelStyle\"\n        >\n          <span :class=\"ui.labelText()\">\n            {{ label }}\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          color=\"error\"\n          data-id=\"clear-btn\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon :name=\"appendIcon\" />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTextField.js","names":[],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textFieldStyles } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  /** Rich hint content under the field, in place of the `hint` text; error and success messages still take precedence. */\n  hint?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(inputRef);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst inputId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n  dense,\n  disabled,\n  readonly,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement) {\n    set(modelValue, target.value);\n  }\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"inputId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          :id=\"inputId\"\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    >\n      <template\n        v-if=\"$slots.hint\"\n        #hint\n      >\n        <slot name=\"hint\" />\n      </template>\n    </RuiFormTextDetail>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/text-field/RuiTextField.vue.d.ts

@@ -1,11 +1,12 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
 import type { RuiIcons } from '../../../icons/index.js';
-import { type TextFieldVariant } from './text-field-styles.js';
+import { type LabelPlacement } from '../../../composables/defaults/field.js';
 export interface TextFieldProps {
     label?: string;
     placeholder?: string;
     disabled?: boolean;
-    variant?: TextFieldVariant;
+    /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */
+    labelPlacement?: LabelPlacement;
     color?: ContextColorsType;
     textColor?: ContextColorsType;
     dense?: boolean;
@@ -23,6 +24,8 @@ type __VLS_Props = TextFieldProps;
 type __VLS_Slots = {
     prepend?: () => any;
     append?: () => any;
+    /** Rich hint content under the field, in place of the `hint` text; error and success messages still take precedence. */
+    hint?: () => any;
 };
 type __VLS_ModelProps = {
     modelValue: string;

package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js

@@ -1,16 +1,18 @@
+import { useLabelPlacement } from "../../../composables/defaults/field.js";
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { useFocus } from "../../../vendor/@vueuse/core/dist/index.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import RuiButton_default from "../../buttons/button/RuiButton.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
 import { useTimeoutManager } from "../../../composables/timeout-manager.js";
+import RuiFieldLabel_default from "../field-label/RuiFieldLabel.js";
 import { textFieldStyles } from "./text-field-styles.js";
-import { usePrependAppendWidth } from "../../../composables/forms/use-prepend-append-width.js";
 import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
-import { useFocus } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 //#region src/components/forms/text-field/RuiTextField.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"id",
 	"value",
 	"placeholder",
 	"disabled",
@@ -28,7 +30,7 @@ var RuiTextField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			type: Boolean,
 			default: false
 		},
-		variant: { default: "default" },
+		labelPlacement: { default: () => void 0 },
 		color: { default: () => void 0 },
 		textColor: { default: () => void 0 },
 		dense: {
@@ -71,83 +73,93 @@ var RuiTextField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		const emit = __emit;
 		const isHovered = ref(false);
 		const showClearButton = ref(false);
-		const prepend = useTemplateRef("prepend");
-		const append = useTemplateRef("append");
 		const inputRef = useTemplateRef("inputRef");
+		const generatedId = useId();
+		const attrs = useAttrs();
 		const { focused } = useFocus(inputRef);
-		const { create: delayClearHide } = useTimeoutManager();
-		const { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);
+		const placement = useLabelPlacement(() => __props.labelPlacement);
+		const { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();
 		const { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
-		const active = computed(() => get$1(focused) || !!get$1(modelValue));
-		const showClearIcon = computed(() => __props.clearable && !!get$1(modelValue) && !__props.disabled && !__props.readonly);
+		const inputId = computed(() => {
+			const id = attrs.id;
+			return typeof id === "string" && id ? id : generatedId;
+		});
+		const showClearIcon = computed(() => __props.clearable && !!get(modelValue) && !__props.disabled && !__props.readonly);
 		const effectiveTextColor = computed(() => {
-			if (get$1(hasError)) return "error";
-			if (get$1(hasSuccess)) return "success";
-			if (__props.textColor && !get$1(hasMessages)) return __props.textColor;
+			if (get(hasError)) return "error";
+			if (get(hasSuccess)) return "success";
+			if (__props.textColor && !get(hasMessages)) return __props.textColor;
 		});
-		const effectiveColor = computed(() => get$1(validation) ?? __props.color);
+		const effectiveColor = computed(() => get(validation) ?? __props.color);
 		const ui = computed(() => textFieldStyles({
-			variant: __props.variant,
 			dense: __props.dense,
 			disabled: __props.disabled,
-			hovered: get$1(isHovered),
-			focused: get$1(focused),
-			active: get$1(active),
-			noLabel: !__props.label,
-			color: get$1(effectiveColor),
-			textColor: get$1(effectiveTextColor),
-			validation: get$1(validation),
-			showLabel: !!__props.label
-		}));
-		const labelStyle = computed(() => ({
-			"--prepend-w": get$1(prependWidth),
-			"--append-w": get$1(appendWidth)
+			readonly: __props.readonly,
+			hovered: get(isHovered),
+			focused: get(focused),
+			color: get(effectiveColor),
+			textColor: get(effectiveTextColor),
+			validation: get(validation)
 		}));
-		const legendText = computed(() => {
-			if (!get$1(active) || !__props.label) return "";
-			return __props.required ? `${__props.label} ﹡` : __props.label;
-		});
 		function input(event) {
 			const target = event.target;
-			if (target instanceof HTMLInputElement) set$1(modelValue, target.value);
+			if (target instanceof HTMLInputElement) set(modelValue, target.value);
 		}
 		function clearIconClicked() {
-			set$1(modelValue, "");
+			set(modelValue, "");
 			emit("clear");
 		}
 		watch(focused, (value) => {
-			if (value) set$1(showClearButton, true);
-			else delayClearHide(() => set$1(showClearButton, false), 500);
+			if (value) {
+				cancelClearHide();
+				set(showClearButton, true);
+			} else delayClearHide(() => set(showClearButton, false), 500);
 		});
 		__expose({
 			setSelectionRange: (start, end) => {
-				get$1(inputRef)?.setSelectionRange(start, end);
+				get(inputRef)?.setSelectionRange(start, end);
 			},
-			focus: () => get$1(inputRef)?.focus(),
+			focus: () => get(inputRef)?.focus(),
 			element: inputRef
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [createElementVNode("div", {
-				class: normalizeClass(unref(ui).wrapper()),
-				"data-id": "wrapper",
-				onMouseenter: _cache[5] || (_cache[5] = ($event) => isHovered.value = true),
-				onMouseleave: _cache[6] || (_cache[6] = ($event) => isHovered.value = false)
-			}, [
-				_ctx.$slots.prepend || __props.prependIcon ? (openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [
+				__props.label ? (openBlock(), createBlock(RuiFieldLabel_default, {
 					key: 0,
-					ref_key: "prepend",
-					ref: prepend,
-					class: normalizeClass(unref(ui).prepend()),
-					"data-id": "prepend"
-				}, [_ctx.$slots.prepend ? renderSlot(_ctx.$slots, "prepend", {}, void 0, void 0, 0) : __props.prependIcon ? (openBlock(), createElementBlock("div", {
-					key: 1,
-					class: normalizeClass(unref(ui).icon())
-				}, [createVNode(RuiIcon_default, { name: __props.prependIcon }, null, 8, ["name"])], 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+					text: __props.label,
+					for: unref(inputId),
+					hidden: unref(placement) === "hidden",
+					required: __props.required,
+					disabled: __props.disabled
+				}, null, 8, [
+					"text",
+					"for",
+					"hidden",
+					"required",
+					"disabled"
+				])) : createCommentVNode("", true),
 				createElementVNode("div", {
-					class: normalizeClass(unref(ui).inputWrapper()),
-					onClick: _cache[3] || (_cache[3] = ($event) => emit("focus-input", $event))
+					class: normalizeClass(unref(ui).wrapper()),
+					"data-id": "wrapper",
+					onMouseenter: _cache[5] || (_cache[5] = ($event) => isHovered.value = true),
+					onMouseleave: _cache[6] || (_cache[6] = ($event) => isHovered.value = false)
 				}, [
-					createElementVNode("input", mergeProps({
+					_ctx.$slots.prepend || __props.prependIcon ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(ui).prepend()),
+						"data-id": "prepend"
+					}, [_ctx.$slots.prepend ? renderSlot(_ctx.$slots, "prepend", {}, void 0, void 0, 0) : __props.prependIcon ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(ui).icon())
+					}, [createVNode(RuiIcon_default, {
+						name: __props.prependIcon,
+						size: 18
+					}, null, 8, ["name"])], 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+					createElementVNode("div", {
+						class: normalizeClass(unref(ui).inputWrapper()),
+						onClick: _cache[3] || (_cache[3] = ($event) => emit("focus-input", $event))
+					}, [createElementVNode("input", mergeProps({
+						id: unref(inputId),
 						ref_key: "inputRef",
 						ref: inputRef,
 						value: modelValue.value,
@@ -160,57 +172,52 @@ var RuiTextField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						onInput: _cache[0] || (_cache[0] = ($event) => input($event)),
 						onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event)),
 						onRemove: _cache[2] || (_cache[2] = ($event) => emit("remove", $event))
-					}), null, 16, _hoisted_1),
-					createElementVNode("label", {
-						class: normalizeClass(unref(ui).label()),
-						style: normalizeStyle(unref(labelStyle))
-					}, [createElementVNode("span", { class: normalizeClass(unref(ui).labelText()) }, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						class: normalizeClass(unref(ui).required())
-					}, " ﹡ ", 2)) : createCommentVNode("", true)], 2)], 6),
-					__props.variant === "outlined" ? (openBlock(), createElementBlock("fieldset", {
+					}), null, 16, _hoisted_1), createElementVNode("fieldset", { class: normalizeClass(unref(ui).fieldset()) }, null, 2)], 2),
+					_ctx.$slots.append || __props.appendIcon || unref(showClearIcon) ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(ui).append()),
+						"data-id": "append"
+					}, [unref(showClearIcon) ? (openBlock(), createBlock(RuiButton_default, {
 						key: 0,
-						class: normalizeClass(unref(ui).fieldset())
-					}, [createElementVNode("legend", { class: normalizeClass(unref(ui).legend()) }, toDisplayString(unref(legendText)), 3)], 2)) : createCommentVNode("", true)
-				], 2),
-				_ctx.$slots.append || __props.appendIcon || unref(showClearIcon) ? (openBlock(), createElementBlock("div", {
+						class: normalizeClass([unref(ui).clearButton(), { hidden: !unref(showClearButton) }]),
+						variant: "text",
+						type: "button",
+						icon: "",
+						"data-id": "clear-btn",
+						"aria-label": "Clear",
+						tabindex: "-1",
+						onClick: _cache[4] || (_cache[4] = withModifiers(($event) => clearIconClicked(), ["stop"]))
+					}, {
+						default: withCtx(() => [createVNode(RuiIcon_default, {
+							name: "lu-x",
+							size: "16"
+						})]),
+						_: 1
+					}, 8, ["class"])) : createCommentVNode("", true), _ctx.$slots.append ? renderSlot(_ctx.$slots, "append", {}, void 0, void 0, 1) : __props.appendIcon ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: normalizeClass(unref(ui).icon())
+					}, [createVNode(RuiIcon_default, {
+						name: __props.appendIcon,
+						size: 18
+					}, null, 8, ["name"])], 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
+				], 34),
+				!__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
 					key: 1,
-					ref_key: "append",
-					ref: append,
-					class: normalizeClass(unref(ui).append()),
-					"data-id": "append"
-				}, [unref(showClearIcon) ? (openBlock(), createBlock(RuiButton_default, {
-					key: 0,
-					class: normalizeClass([unref(ui).clearButton(), { hidden: !unref(showClearButton) }]),
-					variant: "text",
-					type: "button",
-					icon: "",
-					color: "error",
-					"data-id": "clear-btn",
-					tabindex: "-1",
-					onClick: _cache[4] || (_cache[4] = withModifiers(($event) => clearIconClicked(), ["stop"]))
-				}, {
-					default: withCtx(() => [createVNode(RuiIcon_default, {
-						name: "lu-x",
-						size: "20"
-					})]),
-					_: 1
-				}, 8, ["class"])) : createCommentVNode("", true), _ctx.$slots.append ? renderSlot(_ctx.$slots, "append", {}, void 0, void 0, 1) : __props.appendIcon ? (openBlock(), createElementBlock("div", {
-					key: 2,
-					class: normalizeClass(unref(ui).icon())
-				}, [createVNode(RuiIcon_default, { name: __props.appendIcon }, null, 8, ["name"])], 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
-			], 34), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
-				key: 0,
-				class: normalizeClass(unref(ui).details()),
-				"error-messages": __props.errorMessages,
-				"success-messages": __props.successMessages,
-				hint: __props.hint
-			}, null, 8, [
-				"class",
-				"error-messages",
-				"success-messages",
-				"hint"
-			])) : createCommentVNode("", true)], 16);
+					class: normalizeClass(unref(ui).details()),
+					"error-messages": __props.errorMessages,
+					"success-messages": __props.successMessages,
+					hint: __props.hint
+				}, createSlots({ _: 2 }, [_ctx.$slots.hint ? {
+					name: "hint",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "hint")]),
+					key: "0"
+				} : void 0]), 1032, [
+					"class",
+					"error-messages",
+					"success-messages",
+					"hint"
+				])) : createCommentVNode("", true)
+			], 16);
 		};
 	}
 });

package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTextField.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { textFieldStyles, type TextFieldVariant } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: TextFieldVariant;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  variant = 'default',\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst { focused } = useFocus(inputRef);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) || !!get(modelValue));\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n  variant,\n  dense,\n  disabled,\n  hovered: get(isHovered),\n  focused: get(focused),\n  active: get(active),\n  noLabel: !label,\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n  showLabel: !!label,\n}));\n\nconst labelStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n  if (!get(active) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement) {\n    set(modelValue, target.value);\n  }\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"ui.wrapper()\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <label\n          :class=\"ui.label()\"\n          :style=\"labelStyle\"\n        >\n          <span :class=\"ui.labelText()\">\n            {{ label }}\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          color=\"error\"\n          data-id=\"clear-btn\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon :name=\"appendIcon\" />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTextField.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textFieldStyles } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  /** Rich hint content under the field, in place of the `hint` text; error and success messages still take precedence. */\n  hint?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(inputRef);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst inputId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n  dense,\n  disabled,\n  readonly,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement) {\n    set(modelValue, target.value);\n  }\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"inputId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          :id=\"inputId\"\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    >\n      <template\n        v-if=\"$slots.hint\"\n        #hint\n      >\n        <slot name=\"hint\" />\n      </template>\n    </RuiFormTextDetail>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,MAAM,aAAa,SAAmB,SAAA,YAAmB;EAqBzD,MAAM,OAAO;EAcb,MAAM,YAAY,IAAa,KAAK;EACpC,MAAM,kBAAkB,IAAa,KAAK;EAE1C,MAAM,WAAW,eAAiC,UAAU;EAE5D,MAAM,cAAc,MAAM;EAC1B,MAAM,QAAQ,SAAS;EAEvB,MAAM,EAAE,YAAY,SAAS,QAAQ;EACrC,MAAM,YAAY,wBAAwB,QAAA,cAAc;EACxD,MAAM,EAAE,OAAO,iBAAiB,QAAQ,mBAAmB,kBAAkB;EAC7E,MAAM,EAAE,UAAU,YAAY,aAAa,eAAe,wBAClD,QAAA,qBACA,QAAA,eACR;EAEA,MAAM,UAAU,eAAuB;GACrC,MAAM,KAAK,MAAM;GACjB,OAAO,OAAO,OAAO,YAAY,KAAK,KAAK;EAC7C,CAAC;EAED,MAAM,gBAAgB,eAAwB,QAAA,aAAa,CAAC,CAAC,IAAI,UAAU,KAAK,CAAC,QAAA,YAAY,CAAC,QAAA,QAAQ;EAEtG,MAAM,qBAAqB,eAA8C;GACvE,IAAI,IAAI,QAAQ,GACd,OAAO;GACT,IAAI,IAAI,UAAU,GAChB,OAAO;GACT,IAAI,QAAA,aAAa,CAAC,IAAI,WAAW,GAC/B,OAAO,QAAA;EAEX,CAAC;EAED,MAAM,iBAAiB,eAA8C,IAAI,UAAU,KAAK,QAAA,KAAK;EAE7F,MAAM,KAAK,eAAmD,gBAAgB;GAC5E,OAAI,QAAA;GACJ,UAAO,QAAA;GACP,UAAO,QAAA;GACP,SAAS,IAAI,SAAS;GACtB,SAAS,IAAI,OAAO;GACpB,OAAO,IAAI,cAAc;GACzB,WAAW,IAAI,kBAAkB;GACjC,YAAY,IAAI,UAAU;EAC5B,CAAC,CAAC;EAEF,SAAS,MAAM,OAAoB;GACjC,MAAM,SAAS,MAAM;GACrB,IAAI,kBAAkB,kBACpB,IAAI,YAAY,OAAO,KAAK;EAEhC;EAEA,SAAS,mBAAyB;GAChC,IAAI,YAAY,EAAE;GAClB,KAAK,OAAO;EACd;EAEA,MAAM,UAAU,UAAU;GACxB,IAAI,OAAO;IAET,gBAAgB;IAChB,IAAI,iBAAiB,IAAI;GAC3B,OAEE,qBAAqB,IAAI,iBAAiB,KAAK,GAAG,GAAG;EAEzD,CAAC;EAED,SAAa;GACX,oBAAoB,OAAe,QAAgB;IACjD,IAAI,QAAQ,CAAC,EAAE,kBAAkB,OAAO,GAAG;GAC7C;GACA,aAAa,IAAI,QAAQ,CAAC,EAAE,MAAM;GAClC,SAAS;EACX,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAwGM,OAAA,eAAA,mBAxGO,MAAA,YAAA,CAAY,CAACA,KAAAA,MAAM,CAAA,CAAA,GAAA;IAEtB,QAAA,SADR,UAAA,GAAA,YAOE,uBAAA;;KALC,MAAM,QAAA;KACN,KAAK,MAAA,OAAA;KACL,QAAQ,MAAA,SAAA,MAAS;KACjB,UAAU,QAAA;KACV,UAAU,QAAA;;;;;;;;IAEb,mBAgFM,OAAA;KA/EH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;KAClB,WAAQ;KACP,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;KACrB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;;KAGdC,KAAAA,OAAO,WAAW,QAAA,eAD1B,UAAA,GAAA,mBAkBM,OAAA;;MAhBH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,WAAQ;KAGAA,GAAAA,CAAAA,KAAAA,OAAO,UADf,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAEW,QAAA,eADb,UAAA,GAAA,mBAQM,OAAA;;MANH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;KAEf,GAAA,CAAA,YAGE,iBAAA;MAFC,MAAM,QAAA;MACN,MAAM;;KAIb,mBAmBM,OAAA;MAlBH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,aAAY,CAAA;MACtB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAgB,MAAM;KAElC,GAAA,CAAA,mBAaE,SAbF,WAaE;MAZC,IAAI,MAAA,OAAA;MACD,SAAA;MAAJ,KAAI;MACH,OAAO,WAAA;MACP,aAAa,QAAA,eAAW;MACxB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAK;MACf,UAAU,QAAA;MACV,UAAU,QAAA;MACV,gBAAc,MAAA,QAAA;KACP,GAAA,MAAA,eAAA,CAAe,CAACD,KAAAA,MAAM,GAAA;MAC7B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAM,MAAM;MACnB,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAS,MAAM;MACzB,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,MAAM;KAEhC,CAAA,GAAA,MAAA,IAAA,UAAA,GAAA,mBAAmC,YAAA,EAAxB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,CAAA;KAGvBC,KAAAA,OAAO,UAAU,QAAA,cAAc,MAAA,aAAA,KADvC,UAAA,GAAA,mBAkCM,OAAA;;MAhCH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;MACjB,WAAQ;KAGA,GAAA,CAAA,MAAA,aAAA,KADR,UAAA,GAAA,YAeY,mBAAA;;MAbT,OAAK,eAAA,CAAG,MAAA,EAAA,CAAE,CAAC,YAAW,GAAA,EAAA,QAAA,CAAe,MAAA,eAAA,EAAe,CAAA,CAAA;MACrD,SAAQ;MACR,MAAK;MACL,MAAA;MACA,WAAQ;MACR,cAAW;MACX,UAAS;MACR,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,iBAAgB,GAAA,CAAA,MAAA,CAAA;;MAE7B,SAAA,cAGE,CAHF,YAGE,iBAAA;OAFA,MAAK;OACL,MAAK;;;KAIDA,GAAAA,GAAAA,CAAAA,OAAAA,CAAAA,KAAAA,mBAAAA,IAAAA,IAAAA,GAAAA,KAAAA,OAAO,SADf,WAGE,KAAA,QAAA,UAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAEW,QAAA,cADb,UAAA,GAAA,mBAQM,OAAA;;MANH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;KAEf,GAAA,CAAA,YAGE,iBAAA;MAFC,MAAM,QAAA;MACN,MAAM;;;IAMN,CAAA,QAAA,eADT,UAAA,GAAA,YAaoB,2BAAA;;KAXjB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;KACjB,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA;IAGCA,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAO,OAAA;KACZ,MAAA;KAED,IAAA,cAAoB,CAApB,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA"}