@rotki/ui-library 2.9.0 → 2.10.0

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTextField.vue2.js","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 { logicAnd, logicNot } from '@vueuse/math';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { assert } from '@/utils/assert';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: 'default' | 'filled' | 'outlined';\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}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst props = withDefaults(defineProps<TextFieldProps>(), {\n  label: '',\n  placeholder: '',\n  disabled: false,\n  variant: 'default',\n  color: undefined,\n  textColor: undefined,\n  dense: false,\n  hint: '',\n  as: 'input',\n  errorMessages: () => [],\n  successMessages: () => [],\n  hideDetails: false,\n  prependIcon: undefined,\n  appendIcon: undefined,\n  readonly: false,\n  clearable: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'focus-input', event: Event): void;\n  (e: 'blur', event: Event): void;\n  (e: 'remove', value: unknown): void;\n  (e: 'clear'): void;\n}>();\n\nconst {\n  label,\n  clearable,\n  disabled,\n  readonly,\n  errorMessages,\n  successMessages,\n} = toRefs(props);\n\nfunction input(event: Event) {\n  const value = (event.target as HTMLInputElement).value;\n  set(modelValue, value);\n}\n\nconst labelWithQuote = computed(() => {\n  const labelVal = get(label);\n  if (!labelVal)\n    return '\"\\\\200B\"';\n\n  return `'  ${labelVal}  '`;\n});\n\nconst prepend = ref<HTMLDivElement>();\nconst append = ref<HTMLDivElement>();\nconst innerWrapper = ref<HTMLDivElement>();\nconst inputRef = ref<HTMLInputElement>();\n\nconst prependWidth = ref('0px');\nconst appendWidth = ref('0px');\n\nconst { width } = useElementBounding(innerWrapper);\n\nuseResizeObserver(prepend, (entries) => {\n  const [entry] = entries;\n  assert(entry);\n  const { width, left } = entry.contentRect;\n  set(prependWidth, `${width + left}px`);\n});\n\nuseResizeObserver(append, (entries) => {\n  const [entry] = entries;\n  assert(entry);\n  const { width, right } = entry.contentRect;\n  set(appendWidth, `${width + right}px`);\n});\n\nconst { hasError, hasSuccess, hasMessages } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n\nconst { focused } = useFocus(inputRef);\nconst focusedDebounced = refDebounced(focused, 500);\n\nconst showClearIcon = logicAnd(\n  clearable,\n  modelValue,\n  logicNot(disabled),\n  logicNot(readonly),\n);\n\nfunction clearIconClicked() {\n  set(modelValue, '');\n  emit('clear');\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=\"[\n        $style.wrapper,\n        $style[color ?? ''],\n        $style[variant ?? ''],\n        {\n          [$style.dense]: dense,\n          [$style.disabled]: disabled,\n          [$style['no-label']]: !label,\n          [$style['with-error'] ?? '']: hasError,\n          [$style['with-success'] ?? '']: hasSuccess && !hasError,\n          [$style[`text_${textColor}`] ?? '']: textColor && !hasMessages,\n        },\n      ]\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        class=\"flex items-center gap-1 shrink-0\"\n        :class=\"$style.prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"[$style.icon]\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div\n        ref=\"innerWrapper\"\n        class=\"flex flex-1 overflow-hidden\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"$style.input\"\n          :disabled=\"disabled\"\n          :dense=\"dense\"\n          :variant=\"variant\"\n          :readonly=\"readonly\"\n          :wrapper-width=\"width\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <label :class=\"$style.label\">\n          <span>\n            {{ label }}\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"$style.fieldset\"\n        >\n          <legend :class=\"{ [$style.show]: label }\" />\n        </fieldset>\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        class=\"flex items-center gap-1 shrink-0\"\n        :class=\"$style.append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"{ hidden: !focusedDebounced }\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          class=\"!p-2 clear-btn\"\n          color=\"error\"\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=\"[$style.icon]\"\n        >\n          <RuiIcon :name=\"appendIcon\" />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1 px-3\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n:global(.dark) {\n  .wrapper {\n    @apply bg-transparent;\n\n    .label {\n      @apply border-white/[0.42];\n\n      &:after {\n        @apply border-white;\n      }\n    }\n\n    .icon {\n      @apply text-white/[0.56];\n    }\n\n    &:hover {\n      .label {\n        @apply border-white;\n      }\n    }\n\n    &.filled {\n      .input {\n        &:focus {\n          + .label {\n            @apply bg-white/[0.13];\n          }\n        }\n      }\n\n      .label {\n        @apply bg-white/[0.09];\n      }\n    }\n\n    &.outlined {\n      .fieldset {\n        @apply border-white/[0.23];\n      }\n\n      &:not(.disabled) {\n        .input {\n          &:hover,\n          &:focus {\n            ~ .fieldset {\n              @apply border-white;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.wrapper {\n  @apply relative w-full flex items-center pt-3 rounded bg-white;\n\n  .input {\n    @apply leading-6 text-rui-text w-full bg-transparent py-1.5 pr-3 outline-0 outline-none transition-all placeholder:opacity-0 focus:placeholder:opacity-100;\n\n    &:focus {\n      @apply outline-0;\n      + .label {\n        @apply after:scale-x-100;\n      }\n    }\n\n    &:not(:placeholder-shown),\n    &:autofill,\n    &:-webkit-autofill,\n    &[data-has-value='true'],\n    &:focus {\n      + .label {\n        @apply text-xs leading-tight;\n        padding-left: var(--x-padding);\n        padding-right: var(--x-padding);\n      }\n    }\n\n    &:disabled {\n      @apply border-dotted;\n\n      &,\n      + .label {\n        @apply text-rui-text-disabled;\n      }\n\n      ~ .fieldset {\n        @apply border-dotted;\n      }\n    }\n  }\n\n  .label {\n    @apply left-0 text-base leading-[3.75] text-rui-text-secondary pointer-events-none absolute top-0 flex h-full w-full select-none transition-all duration-75 border-b border-black/[0.42];\n\n    --x-padding: 0px;\n    --prepend-width: v-bind(prependWidth);\n    --append-width: v-bind(appendWidth);\n\n    padding-left: calc(var(--x-padding) + var(--prepend-width, 0px));\n    padding-right: calc(var(--x-padding) + var(--append-width, 0px));\n\n    span {\n      @apply truncate transition-all duration-75;\n      content: v-bind(labelWithQuote);\n    }\n\n    &:after {\n      content: '';\n      @apply absolute bottom-0 left-0 block w-full scale-x-0 border-b-2 mb-[-1px] transition-transform duration-300 border-black;\n    }\n  }\n\n  &:hover {\n    .label {\n      @apply border-black;\n    }\n  }\n\n  .icon {\n    @apply text-black/[0.54];\n  }\n\n  .prepend {\n    &:not(:empty) {\n      @apply pr-2;\n    }\n  }\n\n  .append {\n    &:not(:empty) {\n      @apply pl-2;\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      .input {\n        &:focus {\n          + .label {\n            @apply text-rui-#{$color};\n          }\n        }\n      }\n\n      .label {\n        @apply after:border-rui-#{$color};\n      }\n\n      &.outlined {\n        &:not(.disabled) {\n          .input {\n            &:focus {\n              ~ .fieldset {\n                @apply border-rui-#{$color};\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &.text_#{$color},\n    &.with-#{$color} {\n      .prepend,\n      .append,\n      .input {\n        @apply text-rui-#{$color};\n      }\n\n      &:not(.disabled) .prepend svg,\n      &:not(.disabled) .append svg {\n        @apply text-rui-#{$color};\n      }\n    }\n  }\n\n  @each $color in 'error', 'success' {\n    &.with-#{$color} {\n      .input {\n        @apply border-rui-#{$color} #{!important};\n      }\n\n      .label {\n        @apply text-rui-#{$color} after:border-rui-#{$color} #{!important};\n      }\n\n      .fieldset {\n        @apply border-rui-#{$color} #{!important};\n      }\n    }\n  }\n\n  &.dense {\n    .input {\n      @apply py-1;\n    }\n\n    .label {\n      @apply leading-[3.5];\n    }\n  }\n\n  &.filled,\n  &.outlined {\n    @apply pt-0;\n\n    .prepend {\n      &:not(:empty) {\n        @apply pl-3 pr-0;\n      }\n    }\n\n    .append {\n      &:not(:empty) {\n        @apply pr-3 pl-0;\n      }\n    }\n\n    .input {\n      @apply px-3;\n    }\n\n    .label {\n      @apply leading-[3.5];\n      --x-padding: 0.75rem;\n    }\n  }\n\n  &.filled {\n    .input {\n      @apply py-4;\n\n      &:focus {\n        + .label {\n          @apply bg-black/[0.09];\n        }\n      }\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        + .label {\n          @apply leading-[1.5] pl-4;\n\n          padding-left: calc(var(--x-padding));\n          padding-right: calc(var(--x-padding));\n        }\n      }\n    }\n\n    .label {\n      @apply rounded-t bg-black/[0.06];\n    }\n\n    &.dense {\n      .input {\n        @apply pt-5 pb-1;\n      }\n\n      .label {\n        @apply leading-[3];\n      }\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        + .label {\n          @apply leading-[2.25];\n        }\n      }\n    }\n\n    &.no-label {\n      .input {\n        @apply py-4;\n      }\n\n      &.dense {\n        .input {\n          @apply py-3;\n        }\n      }\n    }\n  }\n\n  &.outlined {\n    .input {\n      @apply py-4 border-b-0;\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        @apply border-t-transparent;\n\n        + .label {\n          @apply leading-[0] pl-4 -mt-3;\n\n          span {\n            @apply pt-3;\n          }\n        }\n\n        ~ .fieldset {\n          legend {\n            &.show {\n              @apply px-2;\n            }\n            &:after {\n              content: v-bind(labelWithQuote);\n            }\n          }\n        }\n      }\n    }\n\n    .fieldset {\n      @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 pointer-events-none rounded border border-black/[0.23] px-2 transition-all -mt-2;\n\n      legend {\n        @apply opacity-0 text-xs max-w-full truncate;\n\n        &:before {\n          content: ' ';\n        }\n\n        &:after {\n          @apply truncate max-w-full leading-[0];\n          content: '\\200B';\n        }\n      }\n    }\n\n    &:not(.disabled) {\n      .input {\n        &:hover,\n        &:focus {\n          ~ .fieldset {\n            @apply border border-black;\n          }\n        }\n\n        &:focus {\n          ~ .fieldset {\n            @apply border-2;\n          }\n        }\n      }\n    }\n\n    .label {\n      @apply border-0 border-transparent;\n\n      &:after {\n        content: none !important;\n      }\n    }\n\n    &.dense {\n      .input {\n        @apply py-2;\n      }\n\n      .label {\n        @apply leading-[2.5];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useModel","width","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","$slots","_renderSlot","_createVNode","_mergeProps","_createBlock","RuiFormTextDetail"],"mappings":"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"}
+{"version":3,"file":"RuiTextField.vue2.js","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 { logicAnd, logicNot } from '@vueuse/math';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { assert } from '@/utils/assert';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: 'default' | 'filled' | 'outlined';\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 props = withDefaults(defineProps<TextFieldProps>(), {\n  label: '',\n  placeholder: '',\n  disabled: false,\n  variant: 'default',\n  color: undefined,\n  textColor: undefined,\n  dense: false,\n  hint: '',\n  as: 'input',\n  errorMessages: () => [],\n  successMessages: () => [],\n  hideDetails: false,\n  prependIcon: undefined,\n  appendIcon: undefined,\n  readonly: false,\n  clearable: false,\n  required: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'focus-input', event: Event): void;\n  (e: 'blur', event: Event): void;\n  (e: 'remove', value: unknown): void;\n  (e: 'clear'): void;\n}>();\n\nconst {\n  label,\n  clearable,\n  disabled,\n  readonly,\n  errorMessages,\n  successMessages,\n  required,\n} = toRefs(props);\n\nfunction input(event: Event) {\n  const value = (event.target as HTMLInputElement).value;\n  set(modelValue, value);\n}\n\nconst labelWithQuote = computed<string>(() => {\n  const labelVal = get(label);\n  if (!labelVal)\n    return '\"\\\\200B\"';\n\n  const asterisk = get(required) ? '﹡' : '';\n  return `'  ${labelVal}${asterisk}  '`;\n});\n\nconst prepend = ref<HTMLDivElement>();\nconst append = ref<HTMLDivElement>();\nconst innerWrapper = ref<HTMLDivElement>();\nconst inputRef = ref<HTMLInputElement>();\n\nconst prependWidth = ref('0px');\nconst appendWidth = ref('0px');\n\nconst { width } = useElementBounding(innerWrapper);\n\nuseResizeObserver(prepend, (entries) => {\n  const [entry] = entries;\n  assert(entry);\n  const { width, left } = entry.contentRect;\n  set(prependWidth, `${width + left}px`);\n});\n\nuseResizeObserver(append, (entries) => {\n  const [entry] = entries;\n  assert(entry);\n  const { width, right } = entry.contentRect;\n  set(appendWidth, `${width + right}px`);\n});\n\nconst { hasError, hasSuccess, hasMessages } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n\nconst { focused } = useFocus(inputRef);\nconst focusedDebounced = refDebounced(focused, 500);\n\nconst showClearIcon = logicAnd(\n  clearable,\n  modelValue,\n  logicNot(disabled),\n  logicNot(readonly),\n);\n\nfunction clearIconClicked() {\n  set(modelValue, '');\n  emit('clear');\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=\"[\n        $style.wrapper,\n        $style[color ?? ''],\n        $style[variant ?? ''],\n        {\n          [$style.dense]: dense,\n          [$style.disabled]: disabled,\n          [$style['no-label']]: !label,\n          [$style['with-error'] ?? '']: hasError,\n          [$style['with-success'] ?? '']: hasSuccess && !hasError,\n          [$style[`text_${textColor}`] ?? '']: textColor && !hasMessages,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        class=\"flex items-center gap-1 shrink-0\"\n        :class=\"$style.prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"[$style.icon]\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div\n        ref=\"innerWrapper\"\n        class=\"flex flex-1 overflow-hidden\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"$style.input\"\n          :disabled=\"disabled\"\n          :dense=\"dense\"\n          :variant=\"variant\"\n          :readonly=\"readonly\"\n          :wrapper-width=\"width\"\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 :class=\"$style.label\">\n          <span>\n            {{ label }}\n            <span\n              v-if=\"required\"\n              class=\"text-rui-error\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"$style.fieldset\"\n        >\n          <legend :class=\"{ [$style.show]: label }\" />\n        </fieldset>\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        class=\"flex items-center gap-1 shrink-0\"\n        :class=\"$style.append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"{ hidden: !focusedDebounced }\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          class=\"!p-2 clear-btn\"\n          color=\"error\"\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=\"[$style.icon]\"\n        >\n          <RuiIcon :name=\"appendIcon\" />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1 px-3\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n:global(.dark) {\n  .wrapper {\n    @apply bg-transparent;\n\n    .label {\n      @apply border-white/[0.42];\n\n      &:after {\n        @apply border-white;\n      }\n    }\n\n    .icon {\n      @apply text-white/[0.56];\n    }\n\n    &:hover {\n      .label {\n        @apply border-white;\n      }\n    }\n\n    &.filled {\n      .input {\n        &:focus {\n          + .label {\n            @apply bg-white/[0.13];\n          }\n        }\n      }\n\n      .label {\n        @apply bg-white/[0.09];\n      }\n    }\n\n    &.outlined {\n      .fieldset {\n        @apply border-white/[0.23];\n      }\n\n      &:not(.disabled) {\n        .input {\n          &:hover,\n          &:focus {\n            ~ .fieldset {\n              @apply border-white;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.wrapper {\n  @apply relative w-full flex items-center pt-3 rounded bg-white;\n\n  .input {\n    @apply leading-6 text-rui-text w-full bg-transparent py-1.5 pr-3 outline-0 outline-none transition-all placeholder:opacity-0 focus:placeholder:opacity-100;\n\n    &:focus {\n      @apply outline-0;\n      + .label {\n        @apply after:scale-x-100;\n      }\n    }\n\n    &:not(:placeholder-shown),\n    &:autofill,\n    &:-webkit-autofill,\n    &[data-has-value='true'],\n    &:focus {\n      + .label {\n        @apply text-xs leading-tight;\n        padding-left: var(--x-padding);\n        padding-right: var(--x-padding);\n      }\n    }\n\n    &:disabled {\n      @apply border-dotted;\n\n      &,\n      + .label {\n        @apply text-rui-text-disabled;\n      }\n\n      ~ .fieldset {\n        @apply border-dotted;\n      }\n    }\n  }\n\n  .label {\n    @apply left-0 text-base leading-[3.75] text-rui-text-secondary pointer-events-none absolute top-0 flex h-full w-full select-none transition-all duration-75 border-b border-black/[0.42];\n\n    --x-padding: 0px;\n    --prepend-width: v-bind(prependWidth);\n    --append-width: v-bind(appendWidth);\n\n    padding-left: calc(var(--x-padding) + var(--prepend-width, 0px));\n    padding-right: calc(var(--x-padding) + var(--append-width, 0px));\n\n    span {\n      @apply truncate transition-all duration-75;\n      content: v-bind(labelWithQuote);\n    }\n\n    &:after {\n      content: '';\n      @apply absolute bottom-0 left-0 block w-full scale-x-0 border-b-2 mb-[-1px] transition-transform duration-300 border-black;\n    }\n  }\n\n  &:hover {\n    .label {\n      @apply border-black;\n    }\n  }\n\n  .icon {\n    @apply text-black/[0.54];\n  }\n\n  .prepend {\n    &:not(:empty) {\n      @apply pr-2;\n    }\n  }\n\n  .append {\n    &:not(:empty) {\n      @apply pl-2;\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      .input {\n        &:focus {\n          + .label {\n            @apply text-rui-#{$color};\n          }\n        }\n      }\n\n      .label {\n        @apply after:border-rui-#{$color};\n      }\n\n      &.outlined {\n        &:not(.disabled) {\n          .input {\n            &:focus {\n              ~ .fieldset {\n                @apply border-rui-#{$color};\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &.text_#{$color},\n    &.with-#{$color} {\n      .prepend,\n      .append,\n      .input {\n        @apply text-rui-#{$color};\n      }\n\n      &:not(.disabled) .prepend svg,\n      &:not(.disabled) .append svg {\n        @apply text-rui-#{$color};\n      }\n    }\n  }\n\n  @each $color in 'error', 'success' {\n    &.with-#{$color} {\n      .input {\n        @apply border-rui-#{$color} #{!important};\n      }\n\n      .label {\n        @apply text-rui-#{$color} after:border-rui-#{$color} #{!important};\n      }\n\n      .fieldset {\n        @apply border-rui-#{$color} #{!important};\n      }\n    }\n  }\n\n  &.dense {\n    .input {\n      @apply py-1;\n    }\n\n    .label {\n      @apply leading-[3.5];\n    }\n  }\n\n  &.filled,\n  &.outlined {\n    @apply pt-0;\n\n    .prepend {\n      &:not(:empty) {\n        @apply pl-3 pr-0;\n      }\n    }\n\n    .append {\n      &:not(:empty) {\n        @apply pr-3 pl-0;\n      }\n    }\n\n    .input {\n      @apply px-3;\n    }\n\n    .label {\n      @apply leading-[3.5];\n      --x-padding: 0.75rem;\n    }\n  }\n\n  &.filled {\n    .input {\n      @apply py-4;\n\n      &:focus {\n        + .label {\n          @apply bg-black/[0.09];\n        }\n      }\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        + .label {\n          @apply leading-[1.5] pl-4;\n\n          padding-left: calc(var(--x-padding));\n          padding-right: calc(var(--x-padding));\n        }\n      }\n    }\n\n    .label {\n      @apply rounded-t bg-black/[0.06];\n    }\n\n    &.dense {\n      .input {\n        @apply pt-5 pb-1;\n      }\n\n      .label {\n        @apply leading-[3];\n      }\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        + .label {\n          @apply leading-[2.25];\n        }\n      }\n    }\n\n    &.no-label {\n      .input {\n        @apply py-4;\n      }\n\n      &.dense {\n        .input {\n          @apply py-3;\n        }\n      }\n    }\n  }\n\n  &.outlined {\n    .input {\n      @apply py-4 border-b-0;\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        @apply border-t-transparent;\n\n        + .label {\n          @apply leading-[0] pl-4 -mt-3;\n\n          span {\n            @apply pt-3;\n          }\n        }\n\n        ~ .fieldset {\n          legend {\n            &.show {\n              @apply px-2;\n            }\n            &:after {\n              content: v-bind(labelWithQuote);\n            }\n          }\n        }\n      }\n    }\n\n    .fieldset {\n      @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 pointer-events-none rounded border border-black/[0.23] px-2 transition-all -mt-2;\n\n      legend {\n        @apply opacity-0 text-xs max-w-full truncate;\n\n        &:before {\n          content: ' ';\n        }\n\n        &:after {\n          @apply truncate max-w-full leading-[0];\n          content: '\\200B';\n        }\n      }\n    }\n\n    &:not(.disabled) {\n      .input {\n        &:hover,\n        &:focus {\n          ~ .fieldset {\n            @apply border border-black;\n          }\n        }\n\n        &:focus {\n          ~ .fieldset {\n            @apply border-2;\n          }\n        }\n      }\n    }\n\n    .label {\n      @apply border-0 border-transparent;\n\n      &:after {\n        content: none !important;\n      }\n    }\n\n    &.dense {\n      .input {\n        @apply py-2;\n      }\n\n      .label {\n        @apply leading-[2.5];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useModel","width","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","$slots","_renderSlot","_createVNode","_mergeProps","_createTextVNode","_toDisplayString","_createBlock","RuiFormTextDetail"],"mappings":"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"}

package/dist/components/icons/IconBrowser.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/icons/LazyIcon.vue.d.ts

@@ -0,0 +1,10 @@
+import type { RuiIcons } from '../../icons/index.js';
+export interface LazyIconProps {
+    name: RuiIcons;
+    size?: number | string;
+}
+declare const __VLS_export: import("vue").DefineComponent<LazyIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LazyIconProps> & Readonly<{}>, {
+    size: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/style.css

@@ -801,6 +801,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -1117,6 +1120,9 @@ video {
 .min-h-\[2\.26rem\] {
   min-height: 2.26rem;
 }
+.min-h-\[2\.5em\] {
+  min-height: 2.5em;
+}
 .min-h-\[2\.625rem\] {
   min-height: 2.625rem;
 }
@@ -1272,6 +1278,9 @@ video {
 .max-w-full {
   max-width: 100%;
 }
+.max-w-md {
+  max-width: 28rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1331,6 +1340,10 @@ video {
   --tw-translate-y: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.-rotate-180 {
+  --tw-rotate: -180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-rotate-\[135deg\] {
   --tw-rotate: -135deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1545,6 +1558,9 @@ video {
 .text-wrap {
   text-wrap: wrap;
 }
+.break-all {
+  word-break: break-all;
+}
 .\!rounded {
   border-radius: 0.25rem !important;
 }
@@ -1569,6 +1585,9 @@ video {
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -1652,6 +1671,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgba(var(--rui-grey-200), var(--tw-border-opacity, 1));
 }
+.border-rui-grey-300 {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--rui-grey-300), var(--tw-border-opacity, 1));
+}
 .border-rui-primary {
   --tw-border-opacity: 1;
   border-color: rgba(var(--rui-primary-main), var(--tw-border-opacity, 1));
@@ -1772,6 +1795,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--rui-success-main), var(--tw-bg-opacity, 1));
 }
+.bg-rui-success\/10 {
+  background-color: rgba(var(--rui-success-main), 0.1);
+}
 .bg-rui-success\/\[0\.5\] {
   background-color: rgba(var(--rui-success-main), 0.5);
 }
@@ -2056,6 +2082,9 @@ video {
 .leading-none {
   line-height: 1;
 }
+.leading-tight {
+  line-height: 1.25;
+}
 .text-black\/\[\.54\] {
   color: rgb(0 0 0 / .54);
 }
@@ -2418,6 +2447,9 @@ video {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(140px\2c 1fr\)\)\] {
+  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
+}
 html,
 body,
 html * {
@@ -2441,6 +2473,11 @@ body {
   outline-offset: 2px;
 }
 
+.hover\:border-rui-primary:hover {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--rui-primary-main), var(--tw-border-opacity, 1));
+}
+
 .hover\:bg-\[\#121212\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
@@ -2514,6 +2551,12 @@ body {
   opacity: 0.8;
 }
 
+.hover\:shadow-sm:hover {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:brightness-110:hover {
   --tw-brightness: brightness(1.1);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2544,6 +2587,10 @@ body {
   --tw-ring-opacity: 0.5;
 }
 
+.focus-visible\:bg-rui-primary\/10:focus-visible {
+  background-color: rgba(var(--rui-primary-main), 0.1);
+}
+
 .focus-visible\:ring-0:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2621,6 +2668,11 @@ body {
   border-color: rgba(var(--rui-grey-800), var(--tw-divide-opacity, 1));
 }
 
+.dark\:border-rui-grey-700:is([data-theme="dark"] *) {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--rui-grey-700), var(--tw-border-opacity, 1));
+}
+
 .dark\:border-rui-grey-800:is([data-theme="dark"] *) {
   --tw-border-opacity: 1;
   border-color: rgba(var(--rui-grey-800), var(--tw-border-opacity, 1));
@@ -2641,6 +2693,16 @@ body {
   background-color: rgba(var(--rui-grey-300), var(--tw-bg-opacity, 1));
 }
 
+.dark\:bg-rui-grey-800:is([data-theme="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rui-grey-800), var(--tw-bg-opacity, 1));
+}
+
+.dark\:bg-rui-grey-900:is([data-theme="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rui-grey-900), var(--tw-bg-opacity, 1));
+}
+
 .dark\:bg-rui-primary:is([data-theme="dark"] *) {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--rui-primary-main), var(--tw-bg-opacity, 1));
@@ -3077,31 +3139,6 @@ to {
 ._rui-icon_z22yv_315._success_z22yv_330 {
   --tw-text-opacity: 1;
   color: rgba(var(--rui-success-main), var(--tw-text-opacity, 1));
-}._accordion_1s1ud_1 {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-._accordion_1s1ud_1._open_1s1ud_4 ._accordion__content_1s1ud_4 {
-  height: calc(var(--fcb53c98) * 1px);
-}
-._accordion_1s1ud_1._open_1s1ud_4 ._icon_1s1ud_7 {
-  --tw-rotate: -180deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-._accordion__content_1s1ud_4 {
-  height: 0px;
-  width: 100%;
-  flex-grow: 1;
-  overflow: hidden;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-._accordion_1s1ud_1 ._icon_1s1ud_7 {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
 }._wrapper_g0b28_1._has-label_g0b28_1 {
   position: relative;
   display: inline-flex;
@@ -5464,7 +5501,7 @@ to {
 
     background-color: rgb(46 46 46 / var(--tw-bg-opacity, 1))
 }
-.menu-container[data-v-649d1d22] {
+.menu-container[data-v-b1a30957] {
 
     width: 16rem;
 
@@ -5476,7 +5513,7 @@ to {
 
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
-.menu-header[data-v-649d1d22] {
+.menu-header[data-v-b1a30957] {
 
     display: flex;
 
@@ -5492,13 +5529,13 @@ to {
 
     color: rgb(31 41 55 / var(--tw-text-opacity, 1))
 }
-.menu-header[data-v-649d1d22]:is([data-theme="dark"] *) {
+.menu-header[data-v-b1a30957]:is([data-theme="dark"] *) {
 
     --tw-text-opacity: 1;
 
     color: rgb(229 231 235 / var(--tw-text-opacity, 1))
 }
-.menu-header[data-v-649d1d22] {
+.menu-header[data-v-b1a30957] {
 
     cursor: pointer;
 
@@ -5508,25 +5545,25 @@ to {
 
     border-color: rgba(var(--rui-grey-200), var(--tw-border-opacity, 1))
 }
-.menu-header[data-v-649d1d22]:hover {
+.menu-header[data-v-b1a30957]:hover {
 
     --tw-bg-opacity: 1;
 
     background-color: rgba(var(--rui-grey-100), var(--tw-bg-opacity, 1))
 }
-.menu-header[data-v-649d1d22]:is([data-theme="dark"] *) {
+.menu-header[data-v-b1a30957]:is([data-theme="dark"] *) {
 
     --tw-border-opacity: 1;
 
     border-color: rgba(var(--rui-grey-800), var(--tw-border-opacity, 1))
 }
-.menu-header[data-v-649d1d22]:hover:is([data-theme="dark"] *) {
+.menu-header[data-v-b1a30957]:hover:is([data-theme="dark"] *) {
 
     --tw-bg-opacity: 1;
 
     background-color: rgba(var(--rui-grey-800), var(--tw-bg-opacity, 1))
 }
-.month-grid[data-v-649d1d22] {
+.month-grid[data-v-b1a30957] {
 
     display: grid;
 
@@ -5536,7 +5573,7 @@ to {
 
     padding: 0.5rem
 }
-.year-grid[data-v-649d1d22] {
+.year-grid[data-v-b1a30957] {
 
     display: grid;
 
@@ -6991,8 +7028,8 @@ to {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 75ms;
   --x-padding: 0px;
-  --prepend-width: var(--e33098ac);
-  --append-width: var(--v04b6e3ba);
+  --prepend-width: var(--ee029486);
+  --append-width: var(--v5a045972);
   padding-left: calc(var(--x-padding) + var(--prepend-width, 0px));
   padding-right: calc(var(--x-padding) + var(--append-width, 0px));
 }
@@ -7003,7 +7040,7 @@ to {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 75ms;
-  content: var(--v16ccf914);
+  content: var(--v70a87b32);
 }
 ._wrapper_kdkbx_316 ._label_kdkbx_319:after {
   content: "";
@@ -7326,10 +7363,10 @@ to {
   padding-right: 0.5rem;
 }
 ._wrapper_kdkbx_316._outlined_kdkbx_337 ._input_kdkbx_331:-webkit-autofill ~ ._fieldset_kdkbx_337 legend:after {
-  content: var(--v16ccf914);
+  content: var(--v70a87b32);
 }
 ._wrapper_kdkbx_316._outlined_kdkbx_337 ._input_kdkbx_331:not(:placeholder-shown) ~ ._fieldset_kdkbx_337 legend:after, ._wrapper_kdkbx_316._outlined_kdkbx_337 ._input_kdkbx_331:autofill ~ ._fieldset_kdkbx_337 legend:after, ._wrapper_kdkbx_316._outlined_kdkbx_337 ._input_kdkbx_331:-webkit-autofill ~ ._fieldset_kdkbx_337 legend:after, ._wrapper_kdkbx_316._outlined_kdkbx_337 ._input_kdkbx_331[data-has-value=true] ~ ._fieldset_kdkbx_337 legend:after, ._wrapper_kdkbx_316._outlined_kdkbx_337 ._input_kdkbx_331:focus ~ ._fieldset_kdkbx_337 legend:after {
-  content: var(--v16ccf914);
+  content: var(--v70a87b32);
 }
 ._wrapper_kdkbx_316._outlined_kdkbx_337 ._fieldset_kdkbx_337{
   pointer-events: none;
@@ -7557,7 +7594,7 @@ to {
   line-height: 1rem;
 }
 ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78 ~ ._fieldset_xauli_16 legend:after {
-  content: var(--v11aaad1c);
+  content: var(--v865c54e4);
 }
 ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19)._opened_xauli_28 ._label_xauli_45, ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19)._opened_xauli_28._with-value_xauli_84 ._label_xauli_45, ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19):focus ._label_xauli_45, ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19):focus._with-value_xauli_84 ._label_xauli_45, ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19):focus-within ._label_xauli_45, ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19):focus-within._with-value_xauli_84 ._label_xauli_45{
   --tw-text-opacity: 1;
@@ -7924,7 +7961,7 @@ to {
   line-height: 1rem;
 }
 ._wrapper_118qp_2 ._activator_118qp_5._float_118qp_84 ~ ._fieldset_118qp_16 legend:after {
-  content: var(--v60b4ee20);
+  content: var(--a9f07354);
 }
 ._wrapper_118qp_2 ._activator_118qp_5._float_118qp_84._opened_118qp_28 ._label_118qp_45, ._wrapper_118qp_2 ._activator_118qp_5._float_118qp_84._opened_118qp_28._with-value_118qp_90 ._label_118qp_45, ._wrapper_118qp_2 ._activator_118qp_5._float_118qp_84:focus ._label_118qp_45, ._wrapper_118qp_2 ._activator_118qp_5._float_118qp_84:focus._with-value_118qp_90 ._label_118qp_45, ._wrapper_118qp_2 ._activator_118qp_5._float_118qp_84:focus-within ._label_118qp_45, ._wrapper_118qp_2 ._activator_118qp_5._float_118qp_84:focus-within._with-value_118qp_90 ._label_118qp_45{
   --tw-text-opacity: 1;
@@ -9116,7 +9153,7 @@ to {
   line-height: 1rem;
 }
 ._wrapper_1dvzu_2 ._activator_1dvzu_5._float_1dvzu_75 ~ ._fieldset_1dvzu_16 legend:after {
-  content: var(--v4b241235);
+  content: var(--ef71cdca);
 }
 ._wrapper_1dvzu_2 ._activator_1dvzu_5._float_1dvzu_75._opened_1dvzu_28 ._label_1dvzu_45, ._wrapper_1dvzu_2 ._activator_1dvzu_5._float_1dvzu_75._opened_1dvzu_28._with-value_1dvzu_81 ._label_1dvzu_45, ._wrapper_1dvzu_2 ._activator_1dvzu_5._float_1dvzu_75:focus ._label_1dvzu_45, ._wrapper_1dvzu_2 ._activator_1dvzu_5._float_1dvzu_75:focus._with-value_1dvzu_81 ._label_1dvzu_45{
   --tw-text-opacity: 1;
@@ -9836,12 +9873,12 @@ to {
   min-width: 0px;
 }
 ._wrapper_mju0y_315._vertical_mju0y_475 ._inner_mju0y_315 {
-  width: var(--v2618ea10);
-  height: var(--v31c435d5);
+  width: var(--v5a3a992e);
+  height: var(--ae30ee42);
   --tw-rotate: -90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   transform-origin: 0 0;
-  --tw-translate-y: var(--v2618ea10);
+  --tw-translate-y: var(--v5a3a992e);
 }
 ._wrapper_mju0y_315._vertical_mju0y_475 ._inner_mju0y_315 ._slider__thumb_label_mju0y_491 {
   margin-top: 1.5rem;
@@ -9861,8 +9898,8 @@ to {
   flex: 1 1 0%;
 }
 ._wrapper_mju0y_315 ._inner_mju0y_315 {
-  width: var(--v31c435d5);
-  height: var(--v2618ea10);
+  width: var(--ae30ee42);
+  height: var(--v5a3a992e);
   position: relative;
 }
 ._wrapper_mju0y_315 ._inner_mju0y_315 ._input_mju0y_507 {
@@ -9917,7 +9954,7 @@ to {
   border-radius: 9999px;
 }
 ._wrapper_mju0y_315 ._inner_mju0y_315 ._slider__container__track_mju0y_318 {
-  width: var(--v07d3ee6a);
+  width: var(--b5d1a6fe);
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-delay: 0s;
@@ -9933,13 +9970,13 @@ to {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 0 calc(var(--v9517d00a) / -2);
-  width: calc(100% + var(--v9517d00a));
+  margin: 0 calc(var(--v22bb2631) / -2);
+  width: calc(100% + var(--v22bb2631));
 }
 ._wrapper_mju0y_315 ._inner_mju0y_315 ._slider__ticks_mju0y_324 span {
   border-radius: 9999px;
-  width: calc(var(--v9517d00a));
-  height: calc(var(--v9517d00a));
+  width: calc(var(--v22bb2631));
+  height: calc(var(--v22bb2631));
 }
 ._wrapper_mju0y_315 ._inner_mju0y_315 ._slider__ticks_mju0y_324 span._highlighted_mju0y_324 {
   --tw-bg-opacity: 1;
@@ -9962,7 +9999,7 @@ to {
   --tw-shadow: 0px 3px 1px -2px var(--rui-shadow-primary), 0px 2px 2px var(--rui-shadow-secondary), 0px 1px 5px var(--rui-shadow-tertiary);
   --tw-shadow-colored: 0px 3px 1px -2px var(--tw-shadow-color), 0px 2px 2px var(--tw-shadow-color), 0px 1px 5px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  left: var(--v07d3ee6a);
+  left: var(--b5d1a6fe);
 }
 ._wrapper_mju0y_315 ._inner_mju0y_315 ._slider__thumb_mju0y_321:before {
   position: absolute;
@@ -9983,7 +10020,7 @@ to {
   content: "";
 }
 ._wrapper_mju0y_315 ._inner_mju0y_315 ._slider__thumb_label_mju0y_491 {
-  left: var(--v07d3ee6a);
+  left: var(--b5d1a6fe);
   visibility: hidden;
   opacity: 0;
   position: absolute;
@@ -10931,7 +10968,7 @@ to {
 }
 ._wrapper_1xhla_316 ._textarea_1xhla_328 {
   --x-padding: 0.75rem;
-  padding-right: calc(var(--x-padding) + var(--v0693e487)) !important;
+  padding-right: calc(var(--x-padding) + var(--v188749d2)) !important;
 }
 ._wrapper_1xhla_316 ._textarea_sizer_1xhla_356{
   pointer-events: none !important;
@@ -10946,7 +10983,7 @@ to {
   padding-bottom: 0.5rem !important;
   padding-left: 0.75rem !important;
   padding-right: 0.75rem !important;
-  padding-right: calc(var(--x-padding) + var(--v0693e487)) !important;
+  padding-right: calc(var(--x-padding) + var(--v188749d2)) !important;
 }
 ._wrapper_1xhla_316 ._textarea_1xhla_328:focus{
   outline-width: 0px;
@@ -11001,8 +11038,8 @@ to {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
   --x-padding: 0rem;
-  padding-left: calc(var(--x-padding) + var(--v6faa6706));
-  padding-right: calc(var(--x-padding) + var(--v0693e487));
+  padding-left: calc(var(--x-padding) + var(--v16b7dedc));
+  padding-right: calc(var(--x-padding) + var(--v188749d2));
 }
 ._wrapper_1xhla_316 ._label_1xhla_316:after {
   content: "";
@@ -11289,10 +11326,10 @@ to {
   line-height: 0;
 }
 ._wrapper_1xhla_316._outlined_1xhla_334 ._textarea_1xhla_328:-webkit-autofill ~ ._fieldset_1xhla_334 legend:after {
-  content: var(--v27a5adb2);
+  content: var(--v41348808);
 }
 ._wrapper_1xhla_316._outlined_1xhla_334 ._textarea_1xhla_328:not(:placeholder-shown) ~ ._fieldset_1xhla_334 legend:after, ._wrapper_1xhla_316._outlined_1xhla_334 ._textarea_1xhla_328:autofill ~ ._fieldset_1xhla_334 legend:after, ._wrapper_1xhla_316._outlined_1xhla_334 ._textarea_1xhla_328:-webkit-autofill ~ ._fieldset_1xhla_334 legend:after, ._wrapper_1xhla_316._outlined_1xhla_334 ._textarea_1xhla_328[data-has-value=true] ~ ._fieldset_1xhla_334 legend:after, ._wrapper_1xhla_316._outlined_1xhla_334 ._textarea_1xhla_328:focus ~ ._fieldset_1xhla_334 legend:after {
-  content: var(--v27a5adb2);
+  content: var(--v41348808);
 }
 ._wrapper_1xhla_316._outlined_1xhla_334 ._fieldset_1xhla_334{
   pointer-events: none;