@rotki/ui-library 2.15.0 → 2.16.1

package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,226 @@
+import { tv } from "../../../utils/tv.js";
+import { useFormTextDetail } from "../../../utils/form-text-detail.js";
+import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
+import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref, useModel } from "vue";
+import { get, set } from "@vueuse/shared";
+//#region src/components/forms/switch/RuiSwitch.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-disabled",
+	"data-checked",
+	"data-error"
+];
+var _hoisted_2 = [
+	"checked",
+	"disabled",
+	"aria-invalid"
+];
+var _hoisted_3 = {
+	key: 0,
+	class: "text-rui-error"
+};
+var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiSwitch",
+	inheritAttrs: false,
+	__name: "RuiSwitch",
+	props: /* @__PURE__ */ mergeModels({
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		color: { default: () => void 0 },
+		size: { default: () => void 0 },
+		label: { default: "" },
+		hint: { default: "" },
+		errorMessages: { default: () => [] },
+		successMessages: { default: () => [] },
+		hideDetails: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const switchStyles = tv({
+			slots: {
+				wrapper: "relative flex gap-2 items-start cursor-pointer group/switch",
+				inner: "relative w-[2.6875rem] h-6 shrink-0",
+				input: "peer appearance-none relative w-full h-full rounded-full bg-rui-grey-400 dark:bg-rui-grey-700 transition-all duration-75 ease-in-out cursor-pointer",
+				toggle: [
+					"absolute w-5 h-5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none",
+					"bg-white left-0.5",
+					`before:content-[''] before:absolute before:size-10 before:bg-black dark:before:bg-white before:rounded-full`,
+					"before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:transition-all before:ease-in-out before:opacity-0",
+					"peer-active:before:opacity-20",
+					"group-hover/switch:shadow-1"
+				].join(" "),
+				label: "text-rui-text text-body-1"
+			},
+			variants: {
+				checked: {
+					true: { toggle: "left-[1.3125rem]" },
+					false: {}
+				},
+				disabled: { true: {
+					wrapper: "cursor-not-allowed",
+					input: "!bg-rui-grey-300 dark:!bg-rui-grey-800 cursor-not-allowed",
+					toggle: "!bg-rui-grey-500 dark:!bg-rui-grey-600 before:!content-none group-hover/switch:!shadow-none",
+					label: "text-rui-text-disabled"
+				} },
+				size: { sm: {
+					inner: "w-10 h-5 mt-0.5",
+					toggle: "w-4 h-4 before:size-6"
+				} },
+				validation: {
+					error: {
+						input: "!bg-rui-error dark:!bg-rui-error/[0.5]",
+						label: "text-rui-error",
+						toggle: "dark:!bg-rui-error"
+					},
+					success: {
+						input: "!bg-rui-success dark:!bg-rui-success/[0.5]",
+						label: "text-rui-success",
+						toggle: "dark:!bg-rui-success"
+					}
+				},
+				color: {
+					primary: {},
+					secondary: {},
+					error: {},
+					warning: {},
+					info: {},
+					success: {}
+				}
+			},
+			compoundVariants: [
+				{
+					checked: true,
+					disabled: false,
+					class: { input: "bg-black dark:bg-white" }
+				},
+				{
+					checked: true,
+					disabled: false,
+					class: { toggle: "dark:bg-black" }
+				},
+				{
+					checked: true,
+					disabled: false,
+					color: "primary",
+					class: {
+						input: "bg-rui-primary dark:bg-rui-primary/[0.5]",
+						toggle: "dark:bg-rui-primary"
+					}
+				},
+				{
+					checked: true,
+					disabled: false,
+					color: "secondary",
+					class: {
+						input: "bg-rui-secondary dark:bg-rui-secondary/[0.5]",
+						toggle: "dark:bg-rui-secondary"
+					}
+				},
+				{
+					checked: true,
+					disabled: false,
+					color: "error",
+					class: {
+						input: "bg-rui-error dark:bg-rui-error/[0.5]",
+						toggle: "dark:bg-rui-error"
+					}
+				},
+				{
+					checked: true,
+					disabled: false,
+					color: "warning",
+					class: {
+						input: "bg-rui-warning dark:bg-rui-warning/[0.5]",
+						toggle: "dark:bg-rui-warning"
+					}
+				},
+				{
+					checked: true,
+					disabled: false,
+					color: "info",
+					class: {
+						input: "bg-rui-info dark:bg-rui-info/[0.5]",
+						toggle: "dark:bg-rui-info"
+					}
+				},
+				{
+					checked: true,
+					disabled: false,
+					color: "success",
+					class: {
+						input: "bg-rui-success dark:bg-rui-success/[0.5]",
+						toggle: "dark:bg-rui-success"
+					}
+				},
+				{
+					size: "sm",
+					checked: true,
+					class: { toggle: "left-[1.375rem]" }
+				}
+			],
+			defaultVariants: {
+				checked: false,
+				disabled: false
+			}
+		});
+		const { hasError, validation } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
+		const ui = computed(() => switchStyles({
+			checked: get(modelValue),
+			disabled: __props.disabled,
+			size: __props.size,
+			validation: get(validation),
+			color: __props.color
+		}));
+		function input(event) {
+			const target = event.target;
+			if (target instanceof HTMLInputElement) set(modelValue, target.checked);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [createElementVNode("label", {
+				class: normalizeClass(unref(ui).wrapper()),
+				"data-disabled": __props.disabled || void 0,
+				"data-checked": modelValue.value || void 0,
+				"data-error": unref(hasError) ? "" : void 0
+			}, [createElementVNode("div", { class: normalizeClass(unref(ui).inner()) }, [createElementVNode("input", mergeProps({
+				checked: modelValue.value,
+				type: "checkbox",
+				class: unref(ui).input(),
+				disabled: __props.disabled,
+				"aria-invalid": unref(hasError)
+			}, unref(getNonRootAttrs)(_ctx.$attrs), { onInput: _cache[0] || (_cache[0] = ($event) => input($event)) }), null, 16, _hoisted_2), createElementVNode("div", { class: normalizeClass(unref(ui).toggle()) }, null, 2)], 2), __props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(unref(ui).label())
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, " ﹡ ")) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 10, _hoisted_1), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
+				key: 0,
+				class: "pt-1",
+				"error-messages": __props.errorMessages,
+				"success-messages": __props.successMessages,
+				hint: __props.hint
+			}, null, 8, [
+				"error-messages",
+				"success-messages",
+				"hint"
+			])) : createCommentVNode("", true)], 16);
+		};
+	}
+});
+//#endregion
+export { RuiSwitch_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiSwitch.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  disabled = false,\n  color = undefined,\n  size = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst switchStyles = tv({\n  slots: {\n    wrapper: 'relative flex gap-2 items-start cursor-pointer group/switch',\n    inner: 'relative w-[2.6875rem] h-6 shrink-0',\n    input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-grey-400 dark:bg-rui-grey-700 transition-all duration-75 ease-in-out cursor-pointer',\n    toggle: [\n      'absolute w-5 h-5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n      'bg-white left-0.5',\n      `before:content-[''] before:absolute before:size-10 before:bg-black dark:before:bg-white before:rounded-full`,\n      'before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:transition-all before:ease-in-out before:opacity-0',\n      'peer-active:before:opacity-20',\n      'group-hover/switch:shadow-1',\n    ].join(' '),\n    label: 'text-rui-text text-body-1',\n  },\n  variants: {\n    checked: {\n      true: {\n        toggle: 'left-[1.3125rem]',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        input: '!bg-rui-grey-300 dark:!bg-rui-grey-800 cursor-not-allowed',\n        toggle: '!bg-rui-grey-500 dark:!bg-rui-grey-600 before:!content-none group-hover/switch:!shadow-none',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    size: {\n      sm: {\n        inner: 'w-10 h-5 mt-0.5',\n        toggle: 'w-4 h-4 before:size-6',\n      },\n    },\n    validation: {\n      error: {\n        input: '!bg-rui-error dark:!bg-rui-error/[0.5]',\n        label: 'text-rui-error',\n        toggle: 'dark:!bg-rui-error',\n      },\n      success: {\n        input: '!bg-rui-success dark:!bg-rui-success/[0.5]',\n        label: 'text-rui-success',\n        toggle: 'dark:!bg-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Checked (no color): track + toggle dark mode\n    { checked: true, disabled: false, class: { input: 'bg-black dark:bg-white' } },\n    { checked: true, disabled: false, class: { toggle: 'dark:bg-black' } },\n\n    // Checked + color (light: track bg, dark: track bg/50 + toggle bg)\n    { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary/[0.5]', toggle: 'dark:bg-rui-primary' } },\n    { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary/[0.5]', toggle: 'dark:bg-rui-secondary' } },\n    { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error/[0.5]', toggle: 'dark:bg-rui-error' } },\n    { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning/[0.5]', toggle: 'dark:bg-rui-warning' } },\n    { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info/[0.5]', toggle: 'dark:bg-rui-info' } },\n    { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success/[0.5]', toggle: 'dark:bg-rui-success' } },\n\n    // Size sm + checked: different toggle position\n    { size: 'sm', checked: true, class: { toggle: 'left-[1.375rem]' } },\n  ],\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n  checked: get(modelValue),\n  disabled,\n  size,\n  validation: get(validation),\n  color,\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement)\n    set(modelValue, target.checked);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"modelValue || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"ui.inner()\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div :class=\"ui.toggle()\" />\n      </div>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/text-area/RuiTextArea.js

@@ -0,0 +1,7 @@
+import RuiTextArea_vue_vue_type_script_setup_true_lang_default from "./RuiTextArea.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/forms/text-area/RuiTextArea.vue
+var RuiTextArea_default = RuiTextArea_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiTextArea_default as default };
+
+//# sourceMappingURL=RuiTextArea.js.map

package/dist/components/forms/text-area/RuiTextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTextArea.js","names":[],"sources":["../../../../src/components/forms/text-area/RuiTextArea.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 { textAreaStyles, type TextAreaVariant } from '@/components/forms/text-area/text-area-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 TextAreaProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: TextAreaVariant;\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  noResize?: boolean;\n  minRows?: number | string;\n  maxRows?: number | string;\n  rowHeight?: number | string;\n  autoGrow?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextArea',\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  noResize = false,\n  minRows = 2,\n  rowHeight = 1.5,\n  maxRows = undefined,\n  autoGrow = false,\n  required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n  'click: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 textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst { focused } = useFocus(textarea);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\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 textAreaStyles>>(() => textAreaStyles({\n  variant,\n  dense,\n  disabled,\n  noResize,\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 wrapperStyle = 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\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n  const height = Number(rowHeight);\n  const min = Number(minRows);\n  const max = Number(maxRows);\n  const value: { minHeight: string; maxHeight?: string } = {\n    minHeight: `${min * height + 0.75}rem`,\n  };\n  if (max)\n    value.maxHeight = `${max * height + 0.75}rem`;\n\n  return value;\n});\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n  if (!autoGrow)\n    return;\n\n  const field = get(textarea);\n  const fieldValue = newVal ?? get(modelValue);\n  const fieldSizer = get(textareaSizer);\n  if (!(field && fieldSizer))\n    return;\n\n  nextTick(() => {\n    const sizerHeight = fieldSizer.scrollHeight;\n    const fieldHeight = field.scrollHeight;\n    let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n    if (oldVal && oldVal.length > fieldValue.length)\n      height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n    field.style.height = height;\n  });\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n  focus: () => get(textarea)?.focus(),\n  element: textarea,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"ui.wrapper()\"\n      :style=\"wrapperStyle\"\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 :class=\"ui.inputWrapper()\">\n        <textarea\n          v-if=\"autoGrow\"\n          ref=\"textareaSizer\"\n          :value=\"modelValue\"\n          :class=\"ui.textareaSizer()\"\n          :style=\"fieldStyles\"\n          aria-hidden=\"true\"\n          disabled\n          readonly\n        />\n        <textarea\n          ref=\"textarea\"\n          v-model=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.textarea()\"\n          :style=\"fieldStyles\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n        />\n        <label :class=\"ui.label()\">\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":""}

package/dist/components/forms/text-area/RuiTextArea.vue.d.ts

@@ -1,10 +1,11 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
 import type { RuiIcons } from '../../../icons/index.js';
-export interface Props {
+import { type TextAreaVariant } from '../../../components/forms/text-area/text-area-styles.js';
+export interface TextAreaProps {
     label?: string;
     placeholder?: string;
     disabled?: boolean;
-    variant?: 'default' | 'filled' | 'outlined';
+    variant?: TextAreaVariant;
     color?: ContextColorsType;
     textColor?: ContextColorsType;
     dense?: boolean;
@@ -23,7 +24,7 @@ export interface Props {
     autoGrow?: boolean;
     required?: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = TextAreaProps;
 type __VLS_Slots = {
     prepend?: () => any;
     append?: () => any;
@@ -32,7 +33,10 @@ type __VLS_ModelProps = {
     modelValue: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+    element: Readonly<globalThis.ShallowRef<HTMLTextAreaElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
     "click:clear": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,248 @@
+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 { usePrependAppendWidth } from "../../../composables/forms/use-prepend-append-width.js";
+import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
+import { textAreaStyles } from "./text-area-styles.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { useFocus, watchDebounced } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/forms/text-area/RuiTextArea.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["value"];
+var _hoisted_2 = [
+	"placeholder",
+	"disabled",
+	"readonly",
+	"aria-invalid"
+];
+var RuiTextArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiTextArea",
+	inheritAttrs: false,
+	__name: "RuiTextArea",
+	props: /* @__PURE__ */ mergeModels({
+		label: { default: "" },
+		placeholder: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		variant: { default: "default" },
+		color: { default: () => void 0 },
+		textColor: { default: () => void 0 },
+		dense: {
+			type: Boolean,
+			default: false
+		},
+		hint: { default: "" },
+		errorMessages: { default: () => [] },
+		successMessages: { default: () => [] },
+		hideDetails: {
+			type: Boolean,
+			default: false
+		},
+		prependIcon: { default: () => void 0 },
+		appendIcon: { default: () => void 0 },
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		noResize: {
+			type: Boolean,
+			default: false
+		},
+		minRows: { default: 2 },
+		maxRows: { default: () => void 0 },
+		rowHeight: { default: 1.5 },
+		autoGrow: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["click:clear"], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const emit = __emit;
+		const isHovered = ref(false);
+		const showClearButton = ref(false);
+		const prepend = useTemplateRef("prepend");
+		const append = useTemplateRef("append");
+		const textarea = useTemplateRef("textarea");
+		const textareaSizer = useTemplateRef("textareaSizer");
+		const { focused } = useFocus(textarea);
+		const { create: delayClearHide } = useTimeoutManager();
+		const { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);
+		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 effectiveTextColor = computed(() => {
+			if (get$1(hasError)) return "error";
+			if (get$1(hasSuccess)) return "success";
+			if (__props.textColor && !get$1(hasMessages)) return __props.textColor;
+		});
+		const effectiveColor = computed(() => get$1(validation) ?? __props.color);
+		const ui = computed(() => textAreaStyles({
+			variant: __props.variant,
+			dense: __props.dense,
+			disabled: __props.disabled,
+			noResize: __props.noResize,
+			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 wrapperStyle = computed(() => ({
+			"--prepend-w": get$1(prependWidth),
+			"--append-w": get$1(appendWidth)
+		}));
+		const legendText = computed(() => {
+			if (!get$1(active) || !__props.label) return "";
+			return __props.required ? `${__props.label} ﹡` : __props.label;
+		});
+		const fieldStyles = computed(() => {
+			const height = Number(__props.rowHeight);
+			const min = Number(__props.minRows);
+			const max = Number(__props.maxRows);
+			const value = { minHeight: `${min * height + .75}rem` };
+			if (max) value.maxHeight = `${max * height + .75}rem`;
+			return value;
+		});
+		function clearIconClicked() {
+			set$1(modelValue, "");
+			emit("click:clear");
+		}
+		function computeFieldHeight(newVal, oldVal) {
+			if (!__props.autoGrow) return;
+			const field = get$1(textarea);
+			const fieldValue = newVal ?? get$1(modelValue);
+			const fieldSizer = get$1(textareaSizer);
+			if (!(field && fieldSizer)) return;
+			nextTick(() => {
+				const sizerHeight = fieldSizer.scrollHeight;
+				const fieldHeight = field.scrollHeight;
+				let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;
+				if (oldVal && oldVal.length > fieldValue.length) height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;
+				field.style.height = height;
+			});
+		}
+		watch(focused, (value) => {
+			if (value) set$1(showClearButton, true);
+			else delayClearHide(() => set$1(showClearButton, false), 500);
+		});
+		watchDebounced(modelValue, computeFieldHeight, { debounce: 50 });
+		onMounted(computeFieldHeight);
+		__expose({
+			focus: () => get$1(textarea)?.focus(),
+			element: textarea
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [createElementVNode("div", {
+				class: normalizeClass(unref(ui).wrapper()),
+				style: normalizeStyle(unref(wrapperStyle)),
+				"data-id": "wrapper",
+				onMouseenter: _cache[2] || (_cache[2] = ($event) => isHovered.value = true),
+				onMouseleave: _cache[3] || (_cache[3] = ($event) => isHovered.value = false)
+			}, [
+				_ctx.$slots.prepend || __props.prependIcon ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "prepend",
+					ref: prepend,
+					class: normalizeClass(unref(ui).prepend()),
+					"data-id": "prepend"
+				}, [_ctx.$slots.prepend ? renderSlot(_ctx.$slots, "prepend", { key: 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),
+				createElementVNode("div", { class: normalizeClass(unref(ui).inputWrapper()) }, [
+					__props.autoGrow ? (openBlock(), createElementBlock("textarea", {
+						key: 0,
+						ref_key: "textareaSizer",
+						ref: textareaSizer,
+						value: modelValue.value,
+						class: normalizeClass(unref(ui).textareaSizer()),
+						style: normalizeStyle(unref(fieldStyles)),
+						"aria-hidden": "true",
+						disabled: "",
+						readonly: ""
+					}, null, 14, _hoisted_1)) : createCommentVNode("", true),
+					withDirectives(createElementVNode("textarea", mergeProps({
+						ref_key: "textarea",
+						ref: textarea,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+						placeholder: __props.placeholder || " ",
+						class: unref(ui).textarea(),
+						style: unref(fieldStyles),
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						"aria-invalid": unref(hasError)
+					}, unref(getNonRootAttrs)(_ctx.$attrs)), null, 16, _hoisted_2), [[vModelText, modelValue.value]]),
+					createElementVNode("label", { class: normalizeClass(unref(ui).label()) }, [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)], 2),
+					__props.variant === "outlined" ? (openBlock(), createElementBlock("fieldset", {
+						key: 1,
+						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", {
+					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[1] || (_cache[1] = 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", { key: 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)
+			], 38), !__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);
+		};
+	}
+});
+//#endregion
+export { RuiTextArea_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTextArea.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTextArea.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-area/RuiTextArea.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 { textAreaStyles, type TextAreaVariant } from '@/components/forms/text-area/text-area-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 TextAreaProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: TextAreaVariant;\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  noResize?: boolean;\n  minRows?: number | string;\n  maxRows?: number | string;\n  rowHeight?: number | string;\n  autoGrow?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextArea',\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  noResize = false,\n  minRows = 2,\n  rowHeight = 1.5,\n  maxRows = undefined,\n  autoGrow = false,\n  required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n  'click: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 textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst { focused } = useFocus(textarea);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\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 textAreaStyles>>(() => textAreaStyles({\n  variant,\n  dense,\n  disabled,\n  noResize,\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 wrapperStyle = 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\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n  const height = Number(rowHeight);\n  const min = Number(minRows);\n  const max = Number(maxRows);\n  const value: { minHeight: string; maxHeight?: string } = {\n    minHeight: `${min * height + 0.75}rem`,\n  };\n  if (max)\n    value.maxHeight = `${max * height + 0.75}rem`;\n\n  return value;\n});\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n  if (!autoGrow)\n    return;\n\n  const field = get(textarea);\n  const fieldValue = newVal ?? get(modelValue);\n  const fieldSizer = get(textareaSizer);\n  if (!(field && fieldSizer))\n    return;\n\n  nextTick(() => {\n    const sizerHeight = fieldSizer.scrollHeight;\n    const fieldHeight = field.scrollHeight;\n    let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n    if (oldVal && oldVal.length > fieldValue.length)\n      height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n    field.style.height = height;\n  });\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n  focus: () => get(textarea)?.focus(),\n  element: textarea,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"ui.wrapper()\"\n      :style=\"wrapperStyle\"\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 :class=\"ui.inputWrapper()\">\n        <textarea\n          v-if=\"autoGrow\"\n          ref=\"textareaSizer\"\n          :value=\"modelValue\"\n          :class=\"ui.textareaSizer()\"\n          :style=\"fieldStyles\"\n          aria-hidden=\"true\"\n          disabled\n          readonly\n        />\n        <textarea\n          ref=\"textarea\"\n          v-model=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.textarea()\"\n          :style=\"fieldStyles\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n        />\n        <label :class=\"ui.label()\">\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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"}