@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/vueform/customization/tailwind.classes.js

@@ -1,2117 +0,0 @@
-/**
- * This file are not used,
- * to customize classes use classes.js in this directory,
- * use this file as a helper to view avaible classes for vueform
- *
- */
-
-const inputStates = {
-  default: ``
-    + `form-bg-input `
-    + `form-color-input `
-    + `form-border-color-input `
-    + `hover:form-bg-input-hover `
-    + `hover:form-color-input-hover `
-    + `hover:form-border-color-input-hover `
-    + `hover:form-shadow-input-hover `
-    + `focused:form-bg-input-focus `
-    + `focused:form-color-input-focus `
-    + `focused:form-border-color-input-focus `
-    + `focused:form-shadow-input-focus `
-    + `focused:form-ring `
-    + `focused-hover:form-shadow-input-hover`,
-  disabled: ``
-    + `form-bg-disabled `
-    + `form-color-disabled `
-    + `form-border-color-input`,
-  success: ``
-    + `form-bg-input-success `
-    + `form-color-input-success `
-    + `form-border-color-input-success `
-    + `hover:form-shadow-input-hover `
-    + `focused:form-shadow-input-focus `
-    + `focused:form-ring `
-    + `focused-hover:form-shadow-input-hover`,
-  danger: ``
-    + `form-bg-input-danger `
-    + `form-color-input-danger `
-    + `form-border-color-input-danger `
-    + `hover:form-shadow-input-hover `
-    + `focused:form-shadow-input-focus `
-    + `focused:form-ring `
-    + `focused-hover:form-shadow-input-hover`,
-}
-
-const checkboxStates = {
-  default: ``
-    + `form-bg-checkbox `
-    + `form-border-color-checkbox `
-    + `hover:form-bg-checkbox-hover `
-    + `hover:form-border-color-checkbox-hover `
-    + `hover:form-shadow-handles-hover `
-    + `focused:form-bg-checkbox-focus `
-    + `focused:form-border-color-checkbox-focus `
-    + `focused:form-shadow-handles-focus `
-    + `focused-hover:form-shadow-handles-hover `
-    + `checked:form-bg-primary `
-    + `checked:form-border-color-checked `
-    + `checked-hover:form-bg-primary `
-    + `checked-hover:form-border-color-checked `
-    + `checked-focused:form-bg-primary`,
-  disabled: ``
-    + `form-bg-disabled `
-    + `form-border-color-checkbox `
-    + `opacity-50 `
-    + `checked:form-bg-primary `
-    + `checked:form-border-color-checked`,
-  danger: ``
-    + `form-bg-checkbox-danger `
-    + `form-border-color-checkbox-danger `
-    + `hover:form-shadow-handles-hover `
-    + `focused:form-shadow-handles-focus `
-    + `focused-hover:form-shadow-handles-hover `
-    + `checked:form-bg-primary `
-    + `checked:form-border-color-checked`,
-}
-
-const checkbox = {
-  input: 'flex-shrink-0 appearance-none cursor-pointer outline-zero transition-input duration-200 border-solid form-border-width-checkbox focus:form-ring checked:form-bg-icon-check',
-  input_default: checkboxStates.default,
-  input_disabled: checkboxStates.disabled,
-  input_sm: 'form-w-checkbox-sm form-h-checkbox-sm form-radius-checkbox-sm form-mr-space-checkbox-sm rtl:mr-0 rtl:form-ml-space-checkbox-sm',
-  input_md: 'form-w-checkbox form-h-checkbox form-radius-checkbox form-mr-space-checkbox rtl:mr-0 rtl:form-ml-space-checkbox',
-  input_lg: 'form-w-checkbox-lg form-h-checkbox-lg form-radius-checkbox-lg form-mr-space-checkbox-lg rtl:mr-0 rtl:form-ml-space-checkbox-lg',
-  input_left: '!ml-0',
-  input_left_sm: '!form-mr-space-checkbox-sm',
-  input_left_md: '!form-mr-space-checkbox',
-  input_left_lg: '!form-mr-space-checkbox-lg',
-  input_right: '!mr-0',
-  input_right_sm: 'form-ml-space-checkbox-sm',
-  input_right_md: 'form-ml-space-checkbox',
-  input_right_lg: 'form-ml-space-checkbox-lg',
-  input_standalone: '!ml-0 !mr-0 !mt-0',
-  $input: (classes, { isDisabled, Size, standalone }) => ([
-    classes.input,
-    classes[`input_${Size}`],
-    !isDisabled  ? classes.input_default : classes.input_disabled,
-    standalone ? classes.input_standalone : null,
-  ]),
-}
-
-const radio = {
-  input: 'flex items-center justify-center flex-shrink-0 appearance-none cursor-pointer rounded-full outline-zero transition-input duration-200 border-solid form-border-width-radio form-shadow-input focus:form-ring checked:form-bg-icon-radio',
-  input_default: checkboxStates.default,
-  input_disabled: checkboxStates.disabled,
-  input_sm: 'form-w-checkbox-sm form-h-checkbox-sm form-mr-space-checkbox-sm rtl:mr-0 rtl:form-ml-space-checkbox-sm',
-  input_md: 'form-w-checkbox form-h-checkbox form-mr-space-checkbox rtl:mr-0 rtl:form-ml-space-checkbox',
-  input_lg: 'form-w-checkbox-lg form-h-checkbox-lg form-mr-space-checkbox-lg rtl:mr-0 rtl:form-ml-space-checkbox-lg',
-  input_left: '!ml-0',
-  input_left_sm: '!form-mr-space-checkbox-sm',
-  input_left_md: '!form-mr-space-checkbox',
-  input_left_lg: '!form-mr-space-checkbox-lg',
-  input_right: '!mr-0',
-  input_right_sm: 'form-ml-space-checkbox-sm',
-  input_right_md: 'form-ml-space-checkbox',
-  input_right_lg: 'form-ml-space-checkbox-lg',
-  input_standalone: '!ml-0 !mr-0 !mt-0',
-  $input: (classes, { isDisabled, Size, standalone }) => ([
-    classes.input,
-    classes[`input_${Size}`],
-    !isDisabled  ? classes.input_default : classes.input_disabled,
-    standalone ? classes.input_standalone : null,
-  ]),
-}
-
-const text = {
-  container: 'form-text-type',
-  inputContainer: 'w-full flex flex-1 transition-input duration-200 border-solid form-border-width-input form-shadow-input form-input-group group',
-  inputContainer_sm: 'form-radius-input-sm form-h-input-height-sm',
-  inputContainer_md: 'form-radius-input form-h-input-height',
-  inputContainer_lg: 'form-radius-input-lg form-h-input-height-lg',
-  inputContainer_focused: 'form-focus',
-  inputContainer_default: inputStates.default,
-  inputContainer_disabled: inputStates.disabled,
-  inputContainer_success: inputStates.success,
-  inputContainer_danger: inputStates.danger,
-  input: 'w-full bg-transparent h-full',
-  input_sm: 'form-p-input-sm form-radius-input-sm form-text-sm with-floating:form-p-input-floating-sm',
-  input_md: 'form-p-input form-radius-input form-text with-floating:form-p-input-floating',
-  input_lg: 'form-p-input-lg form-radius-input-lg form-text-lg with-floating:form-p-input-floating-lg',
-  input_enabled: 'border-0 form-color-input group-hover:form-color-input-hover form-autofill-default',
-  input_disabled: 'form-color-disabled',
-  input_focused: 'form-color-input-focus form-autofill-focus',
-  input_success: 'form-color-input-success form-autofill-success',
-  input_danger: 'form-color-input-danger form-autofill-danger',
-  $inputContainer: (classes, { isDisabled, Size, isSuccess, isDanger, focused }) => ([
-    classes.inputContainer,
-    classes[`inputContainer_${Size}`],
-    isDisabled ? classes.inputContainer_disabled : null,
-    !isDisabled && !isSuccess && !isDanger ? classes.inputContainer_default : null,
-    !isDisabled && focused ? classes.inputContainer_focused : null,
-    !isDisabled && isSuccess ? classes.inputContainer_success : null,
-    !isDisabled && isDanger ? classes.inputContainer_danger : null,
-  ]),
-  $input: (classes, { isDisabled, Size, isSuccess, isDanger, focused }) => ([
-    classes.input,
-    classes[`input_${Size}`],
-    isDisabled ? classes.input_disabled : null,
-    !isDisabled && !isSuccess && !isDanger && !focused  ? classes.input_enabled : null,
-    !isDisabled && focused && !isSuccess && !isDanger ? classes.input_focused : null,
-    !isDisabled && isDanger ? classes.input_danger : null,
-    !isDisabled && isSuccess ? classes.input_success : null,
-  ]),
-}
-
-const textarea = {
-  ...text,
-  inputContainer_sm: 'form-radius-large-sm',
-  inputContainer_md: 'form-radius-large',
-  inputContainer_lg: 'form-radius-large-lg',
-  input_sm: 'form-p-input-sm form-radius-large-sm form-text-sm with-floating:form-p-input-floating-sm',
-  input_md: 'form-p-input form-radius-large form-text with-floating:form-p-input-floating',
-  input_lg: 'form-p-input-lg form-radius-large-lg form-text-lg with-floating:form-p-input-floating-lg',
-}
-
-const editor = {
-  container: 'form-text-type',
-  input: 'border-solid transition-input duration-200 form-border-width-input form-shadow-input',
-  input_focused: 'form-focus',
-  input_default: inputStates.default,
-  input_disabled: 'form-bg-disabled form-color-disabled form-border-color-input form-editor-disabled',
-  input_success: inputStates.success,
-  input_danger: inputStates.danger,
-  input_sm: 'form-radius-large-sm form-editor-sm',
-  input_md: ' form-radius-large',
-  input_lg: 'form-radius-large-lg form-editor-lg',
-  $input: (classes, { isDisabled, focused, Size, isSuccess, isDanger }) => ([
-    classes.input,
-    classes[`input_${Size}`],
-    isDisabled ? classes.input_disabled : null,
-    !isDisabled && !isSuccess && !isDanger ? classes.input_default : null,
-    !isDisabled && focused ? classes.input_focused : null,
-    !isDisabled && isSuccess ? classes.input_success : null,
-    !isDisabled && isDanger ? classes.input_danger : null,
-  ]),
-}
-
-const select = {
-  container: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-zero transition-input duration-200 border-solid form-border-width-input form-shadow-input form-text-type',
-  container_default: inputStates.default,
-  container_disabled: inputStates.disabled,
-  container_success: inputStates.success,
-  container_danger: inputStates.danger,
-  container_sm: 'form-text-sm form-radius-input-sm form-min-h-input-height-sm',
-  container_md: 'form-text form-radius-input form-min-h-input-height',
-  container_lg: 'form-text-lg form-radius-input-lg form-min-h-input-height-lg',
-  containerDisabled: '',
-  containerOpen: '!rounded-b-none',
-  containerOpenTop: '!rounded-t-none',
-  containerActive: 'form-focus',
-  wrapper: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-zero',
-  wrapper_sm: 'form-min-h-input-height-inner-sm',
-  wrapper_md: 'form-min-h-input-height-inner',
-  wrapper_lg: 'form-min-h-input-height-inner-lg',
-  search: 'w-full h-full absolute inset-0 outline-zero appearance-none box-border border-0 bg-transparent form-color-input',
-  search_sm: 'form-text-sm form-radius-input-sm form-pl-input-sm form-pr-select-no-clear-sm with-floating:form-p-input-floating-sm rtl:form-pl-select-no-clear-sm rtl:form-pr-input-sm',
-  search_md: 'form-text form-radius-input form-pl-input form-pr-select-no-clear with-floating:form-p-input-floating rtl:form-pl-select-no-clear rtl:form-pr-input',
-  search_lg: 'form-text-lg form-radius-input-lg form-pl-input-lg form-pr-select-no-clear-lg with-floating:form-p-input-floating-lg rtl:form-pl-select-no-clear-lg rtl:form-pr-input-lg',
-  placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent form-color-placeholder rtl:left-auto rtl:right-0 rtl:pl-0',
-  placeholder_sm: 'form-pl-input-sm rtl:form-pr-input-sm',
-  placeholder_md: 'form-pl-input rtl:form-pr-input',
-  placeholder_lg: 'form-pl-input-lg rtl:form-pr-input-lg',
-  caret: 'mask-bg mask-form-caret form-bg-icon w-2.5 h-4 py-px box-content relative flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0',
-  caret_sm: 'form-mr-input-sm rtl:form-ml-input-sm',
-  caret_md: 'form-mr-input rtl:form-ml-input',
-  caret_lg: 'form-mr-input-lg rtl:form-ml-input-lg',
-  caretOpen: 'rotate-180 pointer-events-auto',
-  clear: 'relative opacity-50 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-100 rtl:pr-0 rtl:pl-3.5',
-  clear_sm: 'form-pr-input-sm rtl:form-pl-input-sm',
-  clear_md: 'form-pr-input rtl:form-pl-input',
-  clear_lg: 'form-pr-input-lg rtl:form-pl-input-lg',
-  clearIcon: 'mask-bg mask-form-remove form-bg-icon w-2.5 h-4 py-px box-content inline-block',
-  spinner: 'mask-bg mask-form-spinner form-bg-primary w-4 h-4 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0',
-  spinner_sm: 'form-mr-input-sm rtl:form-ml-input-sm',
-  spinner_md: 'form-mr-input rtl:form-ml-input',
-  spinner_lg: 'form-mr-input-lg rtl:form-ml-input-lg',
-  infinite: 'flex items-center justify-center w-full',
-  infinite_sm: 'form-min-h-input-height-sm',
-  infinite_md: 'form-min-h-input-height',
-  infinite_lg: 'form-min-h-input-height-lg',
-  infiniteSpinner: 'mask-bg mask-form-spinner form-bg-primary w-4 h-4 animate-spin flex-shrink-0 flex-grow-0',
-  dropdown: 'max-h-60 absolute z-999 -left-px -right-px bottom-0 transform form-shadow-dropdown form-border-width-dropdown border-solid form-border-color-input form-bg-input -mt-px overflow-y-scroll flex flex-col',
-  dropdown_sm: 'form-radius-input-b-sm',
-  dropdown_md: 'form-radius-input-b',
-  dropdown_lg: 'form-radius-input-b-lg',
-  dropdownBottom: 'translate-y-full',
-  dropdownTop: '-translate-y-full top-px bottom-auto !rounded-b-none !rounded-t',
-  dropdownTop_sm: 'form-radius-input-t-sm',
-  dropdownTop_md: 'form-radius-input-t',
-  dropdownTop_lg: 'form-radius-input-t-lg',
-  dropdownHidden: 'hidden',
-  options: 'flex flex-col p-0 m-0 list-none form-color-input',
-  optionsTop: '',
-  group: 'p-0 m-0',
-  groupLabel: 'flex box-border items-center justify-start text-left form-py-0.5input font-semibold form-bg-selected form-color-input filter brightness-90 cursor-default',
-  groupLabel_sm: 'form-px-input-sm form-text-small-sm',
-  groupLabel_md: 'form-px-input form-text-small',
-  groupLabel_lg: 'form-px-input-lg form-text-small-lg',
-  groupLabelPointable: 'cursor-pointer',
-  groupLabelPointed: 'brightness-95',
-  groupLabelSelected: 'form-bg-primary-darker !form-color-on-primary brightness-100',
-  groupLabelDisabled: 'form-bg-disabled form-color-disabled cursor-not-allowed',
-  groupLabelSelectedPointed: 'form-bg-primary-darker !form-color-on-primary brightness-100 opacity-90',
-  groupLabelSelectedDisabled: 'form-bg-primary-darker !form-color-on-primary brightness-100 opacity-50 cursor-not-allowed',
-  groupOptions: 'p-0 m-0',
-  option: 'flex items-center justify-start box-border text-left cursor-pointer',
-  option_sm: 'form-px-input-sm form-py-input-border-sm',
-  option_md: 'form-px-input form-py-input-border',
-  option_lg: 'form-px-input-lg form-py-input-border-lg',
-  optionPointed: 'form-color-input form-bg-selected',
-  optionSelected: 'form-bg-primary form-color-on-primary',
-  optionDisabled: 'form-color-disabled cursor-not-allowed',
-  optionSelectedPointed: 'form-color-on-primary form-bg-primary opacity-90',
-  optionSelectedDisabled: 'form-color-on-primary form-bg-primary opacity-50 cursor-not-allowed',
-  fakeInput: 'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-zero text-transparent',
-  assist: 'form-assistive-text',
-  spacer: 'box-content',
-  spacer_sm: 'form-h-input-height-inner-sm',
-  spacer_md: 'form-h-input-height-inner',
-  spacer_lg: 'form-h-input-height-inner-lg',
-  noOptions: 'form-color-muted',
-  noOptions_sm: 'form-p-input-sm',
-  noOptions_md: 'form-p-input',
-  noOptions_lg: 'form-p-input-lg',
-  noResults: 'form-color-muted',
-  noResults_sm: 'form-p-input-sm',
-  noResults_md: 'form-p-input',
-  noResults_lg: 'form-p-input-lg',
-  $container: (classes, { Size, isDanger, isSuccess, isDisabled }) => ([
-    classes.select.container,
-    classes.select[`container_${Size}`],
-    isDisabled ? classes.select.container_disabled : null,
-    !isDisabled && !isSuccess && !isDanger ? classes.select.container_default : null,
-    !isDisabled && isDanger ? classes.select.container_danger : null,
-    !isDisabled && isSuccess ? classes.select.container_success : null,
-  ]),
-  $wrapper: (classes, { Size }) => ([
-    classes.select.wrapper,
-    classes.select[`wrapper_${Size}`],
-  ]),
-  $search: (classes, { Size }) => ([
-    classes.select.search,
-    classes.select[`search_${Size}`],
-  ]),
-  $placeholder: (classes, { Size }) => ([
-    classes.select.placeholder,
-    classes.select[`placeholder_${Size}`],
-  ]),
-  $caret: (classes, { Size }) => ([
-    classes.select.caret,
-    classes.select[`caret_${Size}`],
-  ]),
-  $clear: (classes, { Size }) => ([
-    classes.select.clear,
-    classes.select[`clear_${Size}`],
-  ]),
-  $spinner: (classes, { Size }) => ([
-    classes.select.spinner,
-    classes.select[`spinner_${Size}`],
-  ]),
-  $dropdown: (classes, { Size, openDirection }) => ([
-    classes.select.dropdown,
-    classes.select[`dropdown_${Size}`],
-    openDirection === 'top' ? null : classes.select.dropdownBottom
-  ]),
-  $dropdownTop: (classes, { Size }) => ([
-    classes.select.dropdownTop,
-    classes.select[`dropdownTop_${Size}`],
-  ]),
-  $groupLabel: (classes, { Size }) => ([
-    classes.select.groupLabel,
-    classes.select[`groupLabel_${Size}`],
-  ]),
-  $option: (classes, { Size }) => ([
-    classes.select.option,
-    classes.select[`option_${Size}`],
-  ]),
-  $spacer: (classes, { Size }) => ([
-    classes.select.spacer,
-    classes.select[`spacer_${Size}`],
-  ]),
-  $noOptions: (classes, { Size }) => ([
-    classes.select.noOptions,
-    classes.select[`noOptions_${Size}`],
-  ]),
-  $noResults: (classes, { Size }) => ([
-    classes.select.noResults,
-    classes.select[`noResults_${Size}`],
-  ]),
-}
-
-const groupTabs = {
-  container: 'flex cursor-pointer',
-  wrapper: 'flex items-center justify-center w-full border-solid form-border-width-input',
-  wrapper_not_last: '!border-r-0',
-  wrapper_first: '',
-  wrapper_first_sm: 'form-radius-input-l-sm',
-  wrapper_first_md: 'form-radius-input-l',
-  wrapper_first_lg: 'form-radius-input-l-lg',
-  wrapper_last: '',
-  wrapper_last_sm: 'form-radius-input-r-sm',
-  wrapper_last_md: 'form-radius-input-r',
-  wrapper_last_lg: 'form-radius-input-r-lg',
-  wrapper_selected: 'form-bg-primary form-color-on-primary border-black border-opacity-15',
-  wrapper_unselected: 'form-bg-input form-color-input form-border-color-input hover:form-bg-input-hover hover:form-color-input-hover',
-  wrapper_disabled: 'opacity-50 pointer-events-none',
-  wrapper_sm: 'form-text-sm form-p-group-tabs-sm',
-  wrapper_md: 'form-text form-p-group-tabs',
-  wrapper_lg: 'form-text-lg form-p-group-tabs-lg',
-  input: 'hidden',
-  text: '',
-}
-
-const groupBlocks = {
-  container: 'flex cursor-pointer form-bg-input',
-  container_sm: 'form-radius-large-sm',
-  container_md: 'form-radius-large',
-  container_lg: 'form-radius-large',
-  wrapper: 'flex items-center w-full border-solid form-border-width-input form-border-color-input form-color-input',
-  wrapper_not_last: '!border-b-0',
-  wrapper_first: '',
-  wrapper_first_sm: 'form-radius-large-t-sm',
-  wrapper_first_md: 'form-radius-large-t',
-  wrapper_first_lg: 'form-radius-large-t-lg',
-  wrapper_last: '',
-  wrapper_last_sm: 'form-radius-large-b-sm',
-  wrapper_last_md: 'form-radius-large-b',
-  wrapper_last_lg: 'form-radius-large-b-lg',
-  wrapper_selected: 'form-bg-selected',
-  wrapper_unselected: 'form-bg-input',
-  wrapper_disabled: 'opacity-50',
-  wrapper_sm: 'px-4 py-2.5 form-text-sm form-p-group-blocks-sm',
-  wrapper_md: 'px-4 py-3 form-text form-p-group-blocks',
-  wrapper_lg: 'px-4 py-3.5 form-text-lg form-p-group-blocks-lg',
-  text_wrapper: 'ml-2',
-  text: '',
-  description: 'form-color-muted',
-  description_sm: 'form-text-small-sm -mt-0.5',
-  description_md: 'form-text-small -mt-0.5',
-  description_lg: 'form-text-small-lg -mt-0.5',
-  $container: (classes, { Size }) => ([
-    classes.container,
-    classes[`container_${Size}`],
-  ]),
-}
-
-export default {
-  // Elements
-  ButtonElement: {
-    container: 'form-text-type',
-    button: 'inline-block transition form-border-width-btn form-shadow-btn focus:outline-zero',
-    button_enabled: 'cursor-pointer transition-transform ease-linear focus:form-ring transform hover:scale-105',
-    button_disabled: 'opacity-60 cursor-not-allowed',
-    button_loading: 'form-color-transparent opacity-60 cursor-not-allowed',
-    button_loading_primary: 'form-bg-spinner-on-primary',
-    button_loading_secondary: 'form-bg-spinner-btn-secondary',
-    button_loading_danger: 'form-bg-spinner-white',
-    button_primary: 'form-bg-btn form-color-btn form-border-color-btn',
-    button_secondary: 'form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary',
-    button_danger: 'form-bg-btn-danger form-color-btn-danger form-border-color-btn-danger',
-    button_full: 'w-full',
-    button_not_full: '',
-    button_left: 'float-left',
-    button_center: 'flex mx-auto items-center justify-center',
-    button_right: 'float-right',
-    button_sm: 'form-p-btn-sm form-radius-btn-sm form-text-sm',
-    button_md: 'form-p-btn form-radius-btn form-text',
-    button_lg: 'form-p-btn-lg form-radius-btn-lg form-text-lg',
-    $button: (classes, { isDisabled, isLoading, buttonClass, Size, danger, secondary, full, align }) => ([
-      classes.button,
-      danger ? classes.button_danger : null,
-      secondary ? classes.button_secondary : null,
-      !danger && !secondary ? classes.button_primary : null,
-      classes[`button_${Size}`],
-      isDisabled ? classes.button_disabled : null,
-      !isDisabled && !isLoading ? classes.button_enabled : null,
-      isLoading ? classes.button_loading : null,
-      isLoading && danger ? classes.button_loading_danger : null,
-      isLoading && secondary ? classes.button_loading_secondary : null,
-      isLoading && !secondary && !danger ? classes.button_loading_primary : null,
-      full ? classes.button_full : classes.button_not_full,
-      align === 'left' ? classes.button_left : null,
-      align === 'center' ? classes.button_center : null,
-      align === 'right' ? classes.button_right : null,
-      buttonClass,
-    ]),
-  },
-  CaptchaElement: {
-    container: '',
-    wrapper: '',
-    captcha: '',
-  },
-  CheckboxElement: {
-    ...checkbox,
-    container: 'form-contains-link',
-    wrapper: 'flex',
-    wrapper_sm: 'form-text-sm',
-    wrapper_md: 'form-text',
-    wrapper_lg: 'form-text-lg',
-    wrapper_left: 'rtl:justify-end',
-    wrapper_right: 'justify-end rtl:justify-start',
-    input: checkbox.input + ' form-shadow-handles',
-    input_danger: checkboxStates.danger,
-    input_sm: checkbox.input_sm + ' form-mt-checkbox-sm',
-    input_md: checkbox.input_md + ' form-mt-checkbox',
-    input_lg: checkbox.input_lg + ' form-mt-checkbox-lg',
-    text: 'cursor-pointer',
-    text_left: 'rtl:-order-1',
-    text_right: '-order-1 rtl:order-none',
-    $wrapper: (classes, { Size, align }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-      align === 'left' ? classes.wrapper_left : null,
-      align === 'right' ? classes.wrapper_right : null,
-    ]),
-    $input: (classes, { isDisabled, Size, isDanger, align, standalone }) => ([
-      classes.input,
-      classes[`input_${Size}`],
-      !isDisabled && !isDanger ? classes.input_default : null,
-      isDisabled ? classes.input_disabled : null,
-      isDanger ? classes.input_danger : null,
-      align === 'left' ? [classes.input_left, classes[`input_left_${Size}`]] : null,
-      align === 'right' ? [classes.input_right, classes[`input_right_${Size}`]] : null,
-      standalone ? classes.input_standalone : null,
-    ]),
-    $text: (classes, { align }) => ([
-      classes.text,
-      align === 'left' ? classes.text_left : null,
-      align === 'right' ? classes.text_right : null,
-    ]),
-  },
-  CheckboxgroupElement: {
-    container: 'form-view-default',
-    wrapper: 'flex flex-col justify-start',
-    wrapper_sm: '',
-    wrapper_md: '',
-    wrapper_lg: '',
-    $wrapper: (classes, { Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`]
-    ]),
-  },
-  CheckboxgroupElement_tabs: {
-    container: 'form-text-type form-view-tabs',
-    wrapper: 'grid grid-flow-col form-shadow-input',
-    wrapper_sm: 'form-radius-large-sm',
-    wrapper_md: 'form-radius-large',
-    wrapper_lg: 'form-radius-large-lg',
-    $wrapper: (classes, { Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`]
-    ]),
-  },
-  CheckboxgroupElement_blocks: {
-    container: 'form-view-blocks',
-    wrapper: 'flex flex-col justify-start form-shadow-input',
-    wrapper_sm: 'form-radius-large-sm',
-    wrapper_md: 'form-radius-large',
-    wrapper_lg: 'form-radius-large-lg',
-    $wrapper: (classes, { Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`]
-    ]),
-  },
-  DateElement: {
-    inputWrapper: 'block w-full h-full',
-    ...text,
-  },
-  DatesElement: {
-    inputWrapper: 'block w-full h-full',
-    ...text,
-  },
-  EditorElement: {
-    ...editor,
-  },
-  FileElement: {
-    container: 'form-text-type',
-    container_removing: 'opacity-50',
-    button: 'form-border-width-btn form-shadow-btn inline-block transition focus:outline-zero',
-    button_enabled: 'form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary cursor-pointer transition-transform transform hover:scale-105 focus:form-ring',
-    button_disabled: 'opacity-50 cursor-not-allowed',
-    button_sm: 'form-p-btn-sm form-radius-btn-sm form-text-sm',
-    button_md: 'form-p-btn form-radius-btn form-text',
-    button_lg: 'form-p-btn-lg form-radius-btn-lg form-text-lg',
-    $container: (classes, { removing }) => ([
-      classes.container,
-      removing ? classes.container_removing : null,
-    ]),
-    $button: (classes, { isDisabled, preparing, Size }) => ([
-      classes.button,
-      classes[`button_${Size}`],
-      !isDisabled && !preparing ? classes.button_enabled : null,
-      isDisabled || preparing ? classes.button_disabled : null,
-    ]),
-  },
-  GridElement: {
-    container: '',
-    container_scrollable: 'overflow-x-auto',
-    grid: 'grid',
-    grid_sm: 'form-gap-gutter-sm',
-    grid_md: 'form-gap-gutter',
-    grid_lg: 'form-gap-gutter-lg',
-    grid_fit: 'w-fit',
-    grid_nofit: '',
-    cell: 'relative',
-    fieldWrapper: 'w-full h-full grid',
-    fieldWrapper_sm: 'form-min-h-input-height-sm',
-    fieldWrapper_md: 'form-min-h-input-height',
-    fieldWrapper_lg: 'form-min-h-input-height-lg',
-    fieldWrapper_left: 'text-left',
-    fieldWrapper_center: 'text-center',
-    fieldWrapper_right: 'text-right',
-    fieldWrapper_top: 'items-start',
-    fieldWrapper_middle: 'items-center',
-    fieldWrapper_bottom: 'items-end',
-    fieldWrapper_baseline: 'items-stretch',
-    textWrapper: 'w-full h-full flex break-words',
-    textWrapper_sm: 'form-min-h-input-height-sm form-p-input-sm',
-    textWrapper_md: 'form-min-h-input-height form-p-input',
-    textWrapper_lg: 'form-min-h-input-height-lg form-p-input-lg',
-    textWrapper_left: 'justify-start text-left',
-    textWrapper_center: 'justify-center text-center',
-    textWrapper_right: 'justify-end text-right',
-    textWrapper_justify: 'justify-stretch text-justify',
-    textWrapper_top: 'items-start',
-    textWrapper_middle: 'items-center',
-    textWrapper_bottom: 'items-end',
-    textWrapper_baseline: 'items-stretch',
-    text: 'w-full',
-    $container: (classes, { scrollable }) => ([
-      classes.container,
-      scrollable ? classes.container_scrollable : null,
-    ]),
-    $grid: (classes, { Size, align, fitWidth }) => ([
-      classes.grid,
-      classes[`grid_${Size}`],
-      fitWidth ? classes.grid_fit : classes.grid_nofit,
-    ]),
-    $cell: (classes, {  }) => () => ([
-      classes.cell,
-    ]),
-    $fieldWrapper: (classes, { Size }) => ({ schema, align, valign, rowIndex, colIndex }) => ([
-      classes.fieldWrapper,
-      classes[`fieldWrapper_${Size}`],
-      classes[`fieldWrapper_${align}`],
-      classes[`fieldWrapper_${valign}`],
-    ]),
-    $textWrapper: (classes, { Size }) => ({ align, valign, rowIndex, colIndex }) => ([
-      classes.textWrapper,
-      classes[`textWrapper_${Size}`],
-      classes[`textWrapper_${align}`],
-      classes[`textWrapper_${valign}`],
-    ]),
-  },
-  GroupElement: {
-    container: '',
-    wrapper: 'grid grid-cols-12',
-    wrapper_sm: 'form-gap-gutter-sm',
-    wrapper_md: 'form-gap-gutter',
-    wrapper_lg: 'form-gap-gutter-lg',
-    $wrapper: (classes, { Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`]
-    ]),
-  },
-  ListElement: {
-    container: '',
-    list: 'grid',
-    list_sm: 'form-gap-y-gutter-sm',
-    list_md: 'form-gap-y-gutter',
-    list_lg: 'form-gap-y-gutter-lg',
-    list_disabled: '',
-    list_sorting: '',
-    listItem: 'grid grid-cols-12 relative form-list-group ghost:opacity-60',
-    listItem_sm: 'form-gap-gutter-sm',
-    listItem_md: 'form-gap-gutter',
-    listItem_lg: 'form-gap-gutter-lg',
-    handle: 'absolute left-0 top-0 z-999 transform -translate-x-full cursor-grab active:cursor-grabbing opacity-0 transition list-group-hover:opacity-100',
-    handle_sm: 'form-w-input-height-sm form-h-input-height-sm',
-    handle_md: 'form-w-input-height form-h-input-height',
-    handle_lg: 'form-w-input-height-lg form-h-input-height-lg',
-    handleIcon: 'mask-bg mask-form-sort-handle form-bg-icon mask-size-2.8 block w-full h-full',
-    remove: 'absolute z-999 w-4 h-4 box-content p-0.5 top-px left-0 form-bg-passive rounded-full transform -translate-x-1/2 -translate-y-1/2 transition opacity-0 filter hover:brightness-90 list-group-hover:opacity-100 focus:opacity-100',
-    removeIcon: 'mask-bg mask-form-remove-light form-bg-passive-color mask-size-3 block w-full h-full',
-    add: 'inline-block form-bg-primary form-border-width-btn form-border-color-primary form-color-on-primary form-shadow-btn ease-linear transition-transform transform hover:scale-105 focus:form-ring',
-    add_sm: 'form-mt-gutter-sm form-radius-small-sm form-text-small-sm form-p-btn-small-sm',
-    add_md: 'form-mt-gutter form-radius-small form-text-small form-p-btn-small',
-    add_lg: 'form-mt-gutter-lg form-radius-small-lg form-text-small-lg form-p-btn-small-lg',
-    $list: (classes, { isDisabled, sorting, Size }) => ([
-      classes.list,
-      classes[`list_${Size}`],
-      isDisabled ? classes.list_disabled : null,
-      sorting ? classes.list_sorting : null,
-    ]),
-    $listItem: (classes, { Size }) => ([
-      classes.listItem,
-      classes[`listItem_${Size}`],
-    ]),
-    $handle: (classes, { Size }) => ([
-      classes.handle,
-      classes[`handle_${Size}`],
-    ]),
-    $add: (classes, { Size }) => ([
-      classes.add,
-      classes[`add_${Size}`],
-    ]),
-  },
-  LocationElement: {
-    ...text,
-  },
-  MatrixElement: {
-    container: '',
-    grid: 'grid',
-    grid_scrollable: 'grid overflow-auto',
-    headerFirst: '',
-    header: 'flex items-center justify-center text-center',
-    header_padding: 'px-2',
-    header_sticky: 'sticky top-0 backdrop-blur-3xl z-1',
-    header_not_sticky: '',
-    header_wrap: '',
-    header_nowrap: 'whitespace-nowrap',
-    header_sm: 'form-min-h-input-height-inner-sm',
-    header_md: 'form-min-h-input-height-inner',
-    header_lg: 'form-min-h-input-height-inner-lg',
-    headerRemove: '',
-    rowLabel: 'flex items-center pr-2',
-    rowLabel_sticky: 'sticky left-0 backdrop-blur-3xl z-1',
-    rowLabel_not_sticky: '',
-    rowLabel_wrap: '',
-    rowLabel_nowrap: 'whitespace-nowrap',
-    cell: 'grid items-center',
-    cell_sm: 'form-min-h-input-height-inner-sm',
-    cell_md: 'form-min-h-input-height-inner',
-    cell_lg: 'form-min-h-input-height-inner-lg',
-    cellWrapper: 'w-full h-full grid items-center',
-    cellWrapper_padding: 'px-2',
-    cellWrapper_centered: 'justify-center',
-    cellWrapper_error: '',
-    cellWrapper_success: '',
-    rowRemove: 'backdrop-blur-3xl sticky right-0 flex items-center justify-center w-10',
-    remove: 'w-4 h-4 box-content p-0.5 form-bg-passive rounded-full transition filter hover:brightness-90',
-    removeIcon: 'mask-bg mask-form-remove-light form-bg-passive-color mask-size-3 block w-full h-full',
-    add: 'inline-block form-bg-primary form-border-width-btn form-border-color-primary form-color-on-primary form-shadow-btn ease-linear transition-transform transform hover:scale-105 focus:form-ring',
-    add_sm: 'form-mt-gutter-sm form-radius-small-sm form-text-small-sm form-p-btn-small-sm',
-    add_md: 'form-mt-gutter form-radius-small form-text-small form-p-btn-small',
-    add_lg: 'form-mt-gutter-lg form-radius-small-lg form-text-small-lg form-p-btn-small-lg',
-    $grid: (classes, { scrollable }) => ([
-      classes.grid,
-      scrollable ? classes.grid_scrollable : null,
-    ]),
-    $header: (classes, { Size, padding, stickyCols, colWrap }) => ([
-      classes.header,
-      classes[`header_${Size}`],
-      padding ? classes.header_padding : null,
-      stickyCols ? classes.header_sticky : classes.header_not_sticky,
-      colWrap ? classes.header_wrap : classes.header_nowrap,
-    ]),
-    $rowLabel: (classes, { stickyRows, rowWrap }) => ([
-      classes.rowLabel,
-      stickyRows ? classes.rowLabel_sticky : classes.rowLabel_not_sticky,
-      rowWrap ? classes.rowLabel_wrap : classes.rowLabel_nowrap,
-    ]),
-    $cell: (classes, { Size }) => ([
-      classes.cell,
-      classes[`cell_${Size}`],
-    ]),
-    $cellWrapper: (classes, { padding, centered, cells$ }) => (type, name) => ([
-      classes.cellWrapper,
-      padding ? classes.cellWrapper_padding : null,
-      ['radio', 'checkbox', 'toggle'].includes(type) ? classes.cellWrapper_centered : null,
-      cells$[name]?.error ? classes.cellWrapper_error : null,
-      cells$[name]?.isSuccess ? classes.cellWrapper_success : null,
-    ]),
-    $add: (classes, { Size }) => ([
-      classes.add,
-      classes[`add_${Size}`],
-    ]),
-    $remove: (classes, { removeHover }) => ([
-      classes.remove,
-      removeHover ? classes.remove_hover : null
-    ]),
-  },
-  MultifileElement: {
-    container: 'form-text-type',
-    list: '',
-    list_sm: 'form-mt-gutter-sm',
-    list_md: 'form-mt-gutter',
-    list_lg: 'form-mt-gutter-lg',
-    list_file: 'grid',
-    list_file_sm: 'form-gap-y-0.5gutter-sm',
-    list_file_md: 'form-gap-y-0.5gutter',
-    list_file_lg: 'form-gap-y-0.5gutter-lg',
-    list_image: 'grid',
-    list_image_sm: 'form-gap-y-0.5gutter-sm',
-    list_image_md: 'form-gap-y-0.5gutter',
-    list_image_lg: 'form-gap-y-0.5gutter-lg',
-    list_gallery: 'flex flex-wrap',
-    list_gallery_sm: 'form-gap-0.5gutter-sm',
-    list_gallery_md: 'form-gap-0.5gutter',
-    list_gallery_lg: 'form-gap-0.5gutter-lg',
-    list_disabled: '',
-    list_sorting: '',
-    listItem: 'relative group ghost:opacity-60',
-    handle: '',
-    handle_file: 'absolute left-0 top-0 transform -translate-x-full cursor-grab active:cursor-grabbing opacity-0 transition group-hover:opacity-100',
-    handle_file_sm: 'form-w-input-height-sm form-h-input-height-sm',
-    handle_file_md: 'form-w-input-height form-h-input-height',
-    handle_file_lg: 'form-w-input-height-lg form-h-input-height-lg',
-    handle_image: 'absolute left-0 top-0 transform -translate-x-full cursor-grab active:cursor-grabbing opacity-0 transition group-hover:opacity-100',
-    handle_image_sm: 'form-w-input-height-sm form-h-input-height-sm',
-    handle_image_md: 'form-w-input-height form-h-input-height',
-    handle_image_lg: 'form-w-input-height-lg form-h-input-height-lg',
-    handle_gallery: 'absolute w-4 h-4 box-content top-0.5 left-0.5 mt-px ml-px form-bg-passive bg-center bg-no-repeat rounded-full transition opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing filter hover:brightness-90',
-    handle_gallery_sm: '',
-    handle_gallery_md: '',
-    handle_gallery_lg: '',
-    handleIcon: '',
-    handleIcon_file: 'mask-bg mask-form-sort-handle form-bg-icon mask-size-2.8 block w-full h-full',
-    handleIcon_image: 'mask-bg mask-form-sort-handle form-bg-icon mask-size-2.8 block w-full h-full',
-    handleIcon_gallery: 'mask-bg mask-form-arrows form-bg-input-color mask-size-3 block w-full h-full',
-    dnd: '',
-    button: 'inline-block transition form-border-width-btn focus:outline-zero',
-    button_enabled: 'form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary form-shadow-btn cursor-pointer transition-transform transform hover:scale-105 focus:form-ring',
-    button_disabled: 'opacity-50 cursor-not-allowed',
-    button_sm: 'form-p-btn-sm form-radius-btn-sm form-text-sm',
-    button_md: 'form-p-btn form-radius-btn form-text',
-    button_lg: 'form-p-btn-lg form-radius-btn-lg form-text-lg',
-    $list: (classes, { isDisabled, sorting, view, Size }) => ([
-      classes.list,
-      classes[`list_${Size}`],
-      isDisabled ? classes.list_disabled : null,
-      sorting ? classes.list_sorting : null,
-      classes[`list_${view}`],
-      classes[`list_${view}_${Size}`],
-    ]),
-    $handle: (classes, { view, Size }) => ([
-      classes.handle,
-      classes[`handle_${view}`],
-      classes[`handle_${view}_${Size}`],
-    ]),
-    $handleIcon: (classes, { view }) => ([
-      classes.handleIcon,
-      classes[`handleIcon_${view}`],
-    ]),
-    $button: (classes, { isDisabled, preparing, Size }) => ([
-      classes.button,
-      classes[`button_${Size}`],
-      !isDisabled && !preparing ? classes.button_enabled : null,
-      isDisabled || preparing ? classes.button_disabled : null,
-    ]),
-  },
-  MultiselectElement: {
-    container: 'form-text-type',
-    input: 'w-full form-p-input transition-input duration-200 border-solid form-border-width-input form-shadow-input',
-    input_default: inputStates.default,
-    input_disabled: inputStates.disabled,
-    input_success: inputStates.success,
-    input_danger: inputStates.danger,
-    input_sm: 'form-p-input-sm form-radius-large-sm form-text-sm with-floating:form-p-input-floating-sm',
-    input_md: 'form-p-input form-radius-large form-text with-floating:form-p-input-floating',
-    input_lg: 'form-p-input-lg form-radius-large-lg form-text-lg with-floating:form-p-input-floating-lg',
-    inputWrapper: '',
-    select: {
-      ...select,
-      multipleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent rtl:left-auto rtl:right-0 rtl:pl-0',
-      multipleLabel_sm: 'form-py-input-sm form-pl-input-sm form-radius-input-sm form-text-sm form-min-h-input-height-inner-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm',
-      multipleLabel_md: 'form-py-input form-pl-input form-radius-input form-text form-min-h-input-height-inner with-floating:form-p-input-floating rtl:form-pr-input',
-      multipleLabel_lg: 'form-py-input-lg form-pl-input-lg form-radius-input-lg form-text-lg form-min-h-input-height-inner-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg',
-      multipleLabel_caretClear_sm: 'form-pl-input-sm form-pr-select-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-sm',
-      multipleLabel_caretClear_md: 'form-pl-input form-pr-select with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select',
-      multipleLabel_caretClear_lg: 'form-pl-input-sm form-pr-select-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-sm',
-      multipleLabel_noCaret_sm: 'form-pl-input-sm form-pr-select-no-caret-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-no-caret-sm',
-      multipleLabel_noCaret_md: 'form-pl-input form-pr-select-no-caret with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select-no-caret',
-      multipleLabel_noCaret_lg: 'form-pl-input-lg form-pr-select-no-caret-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-select-no-caret-lg',
-      multipleLabel_noClear_sm: 'form-pl-input-sm form-pr-select-no-clear-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-no-clear-sm',
-      multipleLabel_noClear_md: 'form-pl-input form-pr-select-no-clear with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select-no-clear',
-      multipleLabel_noClear_lg: 'form-pl-input-lg form-pr-select-no-clear-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-select-no-clear-lg',
-      multipleLabel_noCaretClear_sm: 'form-pl-input-sm form-pr-input-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-input-sm',
-      multipleLabel_noCaretClear_md: 'form-pl-input form-pr-input with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-input',
-      multipleLabel_noCaretClear_lg: 'form-pl-input-lg form-pr-input-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-input-lg',
-      $multipleLabel: (classes, { Size, caret, canClear, }) => ([
-        classes.select.multipleLabel,
-        classes.select[`multipleLabel_${Size}`],
-        canClear && caret ? classes.select[`multipleLabel_caretClear_${Size}`] : null,
-        !caret && canClear ? classes.select[`multipleLabel_noCaret_${Size}`] : null,
-        !canClear && caret ? classes.select[`multipleLabel_noClear_${Size}`] : null,
-        !canClear && !caret ? classes.select[`multipleLabel_noCaretClear_${Size}`] : null,
-      ]),
-    },
-    $input: (classes, { isDisabled, Size, isDanger, isSuccess }) => ([
-      classes.input,
-      classes[`input_${Size}`],
-      isDisabled ? classes.input_disabled : null,
-      !isDisabled && !isSuccess && !isDanger ? classes.input_default : null,
-      !isDisabled && isDanger ? classes.input_danger : null,
-      !isDisabled && isSuccess ? classes.input_success : null,
-    ]),
-  },
-  ObjectElement: {
-    container: '',
-    wrapper: 'grid grid-cols-12',
-    wrapper_sm: 'form-gap-gutter-sm',
-    wrapper_md: 'form-gap-gutter',
-    wrapper_lg: 'form-gap-gutter-lg',
-    wrapper_embed: '!block',
-    $wrapper: (classes, { Size, embed }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-      embed ? classes.wrapper_embed : null,
-    ]),
-  },
-  PhoneElement: {
-    ...text,
-    optionsWrapper: 'flex items-center',
-    optionsWrapper_sm: 'form-ml-input-sm rtl:ml-0 rtl:form-mr-input-sm',
-    optionsWrapper_md: 'form-ml-input rtl:ml-0 rtl:form-mr-input',
-    optionsWrapper_lg: 'form-ml-input-lg rtl:ml-0 rtl:form-mr-input-lg',
-    option: 'flex items-center cursor-pointer py-1.25 px-3 whitespace-nowrap form-color-input',
-    option_active: 'form-bg-selected',
-    optionWrapper: 'flex items-center',
-    flag: 'bg-form-flags bg-[length:24px_4716px] overflow-hidden rounded-sm bg-no-repeat bg-[0px_0px] w-[24px] h-[16px]',
-    country: 'ml-3 rtl:ml-0 rtl:mr-3 font-semibold text-[15px] form-color-input flex',
-    number: 'ml-2 rtl:ml-0 rtl:mr-2 form-color-muted rtl:order-1',
-    placeholder: 'bg-form-flags bg-[length:24px_4716px] overflow-hidden bg-no-repeat rounded-sm bg-[0px_0px] w-[24px] h-[16px] opacity-60',
-    $optionsWrapper: (classes, { Size }) => ([
-      classes.optionsWrapper,
-      classes[`optionsWrapper_${Size}`],
-    ]),
-    $option: (classes) => (active) => ([
-      classes.option,
-      active ? classes.option_active : null
-    ]),
-  },
-  RadioElement: {
-    ...radio,
-    container: '',
-    wrapper: 'flex rtl:justify-start',
-    wrapper_sm: 'form-text-sm',
-    wrapper_md: 'form-text',
-    wrapper_lg: 'form-text-lg',
-    wrapper_left: 'rtl:justify-end',
-    wrapper_right: 'justify-end rtl:justify-start',
-    input: radio.input + ' form-shadow-handles',
-    input_danger: checkboxStates.danger,
-    input_sm: radio.input_sm + ' form-mt-checkbox-sm',
-    input_md: radio.input_md + ' form-mt-checkbox',
-    input_lg: radio.input_lg + ' form-mt-checkbox-lg',
-    text: 'cursor-pointer',
-    text_left: 'rtl:-order-1',
-    text_right: '-order-1 rtl:order-none',
-    $wrapper: (classes, { Size, align }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-      align === 'left' ? classes.wrapper_left : null,
-      align === 'right' ? classes.wrapper_right : null,
-    ]),
-    $input: (classes, { isDisabled, Size, isDanger, align, standalone }) => ([
-      classes.input,
-      classes[`input_${Size}`],
-      !isDisabled && !isDanger ? classes.input_default : null,
-      isDisabled ? classes.input_disabled : null,
-      isDanger ? classes.input_danger : null,
-      align === 'left' ? [classes.input_left, classes[`input_left_${Size}`]] : null,
-      align === 'right' ? [classes.input_right, classes[`input_right_${Size}`]] : null,
-      standalone ? classes.input_standalone : null,
-    ]),
-    $text: (classes, { align }) => ([
-      classes.text,
-      align === 'left' ? classes.text_left : null,
-      align === 'right' ? classes.text_right : null,
-    ]),
-  },
-  RadiogroupElement: {
-    container: 'form-view-default',
-    wrapper: 'flex flex-col justify-start',
-    wrapper_sm: '',
-    wrapper_md: '',
-    wrapper_lg: '',
-    $wrapper: (classes, { Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`]
-    ]),
-  },
-  RadiogroupElement_tabs: {
-    container: 'form-text-type form-view-tabs',
-    wrapper: 'grid grid-flow-col grid form-shadow-input',
-    wrapper_sm: 'form-radius-large-sm',
-    wrapper_md: 'form-radius-large',
-    wrapper_lg: 'form-radius-large-lg',
-    $wrapper: (classes, { Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`]
-    ]),
-  },
-  RadiogroupElement_blocks: {
-    container: 'form-view-blocks',
-    wrapper: 'flex flex-col justify-start form-shadow-input',
-    wrapper_sm: 'form-radius-large-sm',
-    wrapper_md: 'form-radius-large',
-    wrapper_lg: 'form-radius-large-lg',
-    $wrapper: (classes, { Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`]
-    ]),
-  },
-  SelectElement: {
-    container: 'form-text-type',
-    input: 'w-full transition-input duration-200 border-solid form-border-width-input form-shadow-input',
-    input_default: inputStates.default,
-    input_disabled: inputStates.disabled,
-    input_success: inputStates.success,
-    input_danger: inputStates.danger,
-    input_sm: 'form-py-input-sm form-pl-input-sm form-pr-select-no-clear-sm form-radius-input-sm form-text-sm form-min-h-input-height-inner-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-no-clear-sm',
-    input_md: 'form-py-input form-pl-input form-pr-select-no-clear form-radius-input form-text form-min-h-input-height-inner with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select-no-clear',
-    input_lg: 'form-py-input-lg form-pl-input-lg form-pr-select-no-clear-lg form-radius-input-lg form-text-lg form-min-h-input-height-inner-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-select-no-clear-lg',
-    inputWrapper: 'relative',
-    inputPlaceholder: 'absolute left-0 top-0 bottom-0 form-color-placeholder pointer-events-none flex items-center',
-    inputPlaceholder_sm: 'form-p-input-border-sm',
-    inputPlaceholder_md: 'form-p-input-border',
-    inputPlaceholder_lg: 'form-p-input-border-lg',
-    inputCaret: 'mask-bg mask-form-caret form-bg-icon w-2.5 h-4 py-px box-content absolute right-0 top-1/2 transform -translate-y-1/2 transition-transform transform pointer-events-none rtl:right-auto rtl:left-0',
-    inputCaret_sm: 'form-mr-input-sm rtl:mr-0 rtl:form-ml-input-sm',
-    inputCaret_md: 'form-mr-input rtl:mr-0 rtl:form-ml-input',
-    inputCaret_lg: 'form-mr-input-lg rtl:mr-0 rtl:form-ml-input-lg',
-    select: {
-      ...select,
-      singleLabel: 'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent box-border rtl:left-auto rtl:right-0 rtl:pl-0',
-      singleLabel_sm: 'form-py-input-sm form-pl-input-sm form-radius-input-sm form-text-sm form-min-h-input-height-inner-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm',
-      singleLabel_md: 'form-py-input form-pl-input form-radius-input form-text form-min-h-input-height-inner with-floating:form-p-input-floating rtl:form-pr-input',
-      singleLabel_lg: 'form-py-input-lg form-pl-input-lg form-radius-input-lg form-text-lg form-min-h-input-height-inner-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg',
-      singleLabel_caretClear_sm: 'form-pl-input-sm form-pr-select-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-sm',
-      singleLabel_caretClear_md: 'form-pl-input form-pr-select with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select',
-      singleLabel_caretClear_lg: 'form-pl-input-sm form-pr-select-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-sm',
-      singleLabel_noCaret_sm: 'form-pl-input-sm form-pr-select-no-caret-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-no-caret-sm',
-      singleLabel_noCaret_md: 'form-pl-input form-pr-select-no-caret with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select-no-caret',
-      singleLabel_noCaret_lg: 'form-pl-input-lg form-pr-select-no-caret-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-select-no-caret-lg',
-      singleLabel_noClear_sm: 'form-pl-input-sm form-pr-select-no-clear-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-no-clear-sm',
-      singleLabel_noClear_md: 'form-pl-input form-pr-select-no-clear with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select-no-clear',
-      singleLabel_noClear_lg: 'form-pl-input-lg form-pr-select-no-clear-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-select-no-clear-lg',
-      singleLabel_noCaretClear_sm: 'form-pl-input-sm form-pr-input-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-input-sm',
-      singleLabel_noCaretClear_md: 'form-pl-input form-pr-input with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-input',
-      singleLabel_noCaretClear_lg: 'form-pl-input-lg form-pr-input-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-input-lg',
-      singleLabelText: 'overflow-hidden block whitespace-nowrap max-w-full',
-      singleLabelText_truncate: 'overflow-ellipsis',
-      $singleLabel: (classes, { Size, caret, canClear }) => ([
-        classes.select.singleLabel,
-        classes.select[`singleLabel_${Size}`],
-        canClear && caret ? classes.select[`singleLabel_caretClear_${Size}`] : null,
-        !caret && canClear ? classes.select[`singleLabel_noCaret_${Size}`] : null,
-        !canClear && caret ? classes.select[`singleLabel_noClear_${Size}`] : null,
-        !canClear && !caret ? classes.select[`singleLabel_noCaretClear_${Size}`] : null,
-      ]),
-      $singleLabelText: (classes, { truncate }) => ([
-        classes.select.singleLabelText,
-        truncate ? classes.select[`singleLabelText_truncate`] : null,
-      ]),
-    },
-    $input: (classes, { isDisabled, Size, isSuccess, isDanger }) => ([
-      classes.input,
-      classes[`input_${Size}`],
-      isDisabled ? classes.input_disabled : null,
-      !isDisabled && !isSuccess && !isDanger ? classes.input_default : null,
-      !isDisabled && isDanger ? classes.input_danger : null,
-      !isDisabled && isSuccess ? classes.input_success : null,
-    ]),
-    $inputWrapper: (classes, { Size }) => ([
-      classes.inputWrapper,
-      classes[`inputWrapper_${Size}`],
-    ]),
-    $inputPlaceholder: (classes, { Size }) => ([
-      classes.inputPlaceholder,
-      classes[`inputPlaceholder_${Size}`],
-    ]),
-    $inputCaret: (classes, { Size }) => ([
-      classes.inputCaret,
-      classes[`inputCaret_${Size}`],
-    ]),
-  },
-  SignatureElement: {
-    container: '',
-    wrapper: 'transition-input form-border-width-input form-text relative w-full',
-    wrapper_sm: 'form-radius-large-sm',
-    wrapper_md: 'form-radius-large',
-    wrapper_lg: 'form-radius-large-lg',
-    wrapper_disabled: 'form-bg-disabled form-color-disabled form-border-color-input cursor-not-allowed pointer-events-none',
-    wrapper_enabled: 'form-bg-input form-color-input form-border-color-input focused:form-ring focused:form-border-color-input-focus',
-    wrapper_readonly: 'pointer-events-none',
-    line: 'absolute top-1/2 left-6 right-6 form-border-color-signature-hr',
-    loadedWrapper: 'absolute left-9 right-9 form-border-width-input border-transparent top-0 bottom-0 flex items-center justify-center',
-    loadedWrapper_disabled: 'opacity-50',
-    loadedWrapper_enabled: '',
-    loadedImg: 'max-h-full',
-    innerWrapper: '',
-    innerWrapper_disabled: 'opacity-50',
-    innerWrapper_enabled: '',
-    input: 'bg-transparent absolute top-1/2 left-0 right-0 transform -translate-y-1/2 pr-9 text-center indent-9 transition-colors h-[8.5rem] rtl:pr-0 rtl:pl-9',
-    input_invert: 'dark:filter dark:invert',
-    placeholder: 'absolute left-0 right-0 bottom-[50%] transform translate-y-1/2 pointer-events-none select-none form-color-placeholder text-center',
-    uploadContainer: 'absolute left-9 right-9 bottom-1/2 transform translate-y-1/2 transition-opacity',
-    uploadContainer_dragging: 'opacity-50',
-    uploadContainer_not_dragging: '',
-    uploadWrapper: 'flex flex-col items-center justify cente text-gray-400 text-center',
-    uploadWrapper_processing: 'opacity-60 pointer-events-none',
-    dndText: 'form-color-input',
-    uploadButton: 'inline-block transition form-border-width-btn form-shadow-btn focus:outline-zero form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary cursor-pointer transition-transform ease-linear focus:form-ring transform hover:scale-105 form-p-btn form-radius-btn form-text',
-    uploadPreview: 'max-w-full mx-auto',
-    pad: 'absolute inset-0',
-    pad_invert: 'dark:filter dark:invert',
-    colors: 'absolute bottom-5 left-1/2 transform -translate-x-1/2 flex flex-row gap-2',
-    color: 'transform transition-transform cursor-pointer rounded-full outline-none focus-visible:form-ring',
-    color_invert: 'dark:filter dark:invert',
-    color_active: 'scale-[1.4]',
-    color_inactive: 'hover:scale-[1.4]',
-    actions: 'absolute top-2 left-3 right-3 flex items-center justify-between opacity-50 transition-opacity z-1 select-none hover:opacity-100',
-    undosWrapper: 'absolute right-3 top-3 flex items-center justify-center gap-3 rtl:right-auto rtl:left-3',
-    undo: 'mask-bg mask-form-trix-undo form-bg-icon w-3 h-3',
-    undo_enabled: 'cursor-pointer focus-visible:opacity-80',
-    undo_disabled: 'opacity-50 cursor-not-allowed',
-    redo: 'mask-bg mask-form-trix-redo form-bg-icon w-3 h-3',
-    redo_enabled: 'cursor-pointer focus-visible:opacity-80',
-    redo_disabled: 'opacity-50 cursor-not-allowed',
-    clearWrapper: 'absolute top-1/2 transform -translate-y-1/2 right-4 text-sm',
-    clear: 'mask-bg mask-form-remove form-bg-input-color w-3 h-4 py-px box-content inline-block cursor-pointer focus-visible:opacity-60',
-    $wrapper: (classes, { isDisabled, readonly, Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-      isDisabled ? classes.wrapper_disabled : classes.wrapper_enabled,
-      readonly ? classes.wrapper_readonly : null,
-    ]),
-    $loadedWrapper: (classes, { isDisabled }) => ([
-      classes.loadedWrapper,
-      isDisabled ? classes.loadedWrapper_disabled : classes.loadedWrapper_enabled,
-    ]),
-    $innerWrapper: (classes, { isDisabled }) => ([
-      classes.innerWrapper,
-      isDisabled ? classes.innerWrapper_disabled : classes.innerWrapper_enabled,
-    ]),
-    $input: (classes, { invertColors, color }) => ([
-      classes.input,
-      invertColors.indexOf(color) !== -1 ? classes.input_invert : null,
-    ]),
-    $uploadContainer: (classes, { dragging }) => ([
-      classes.uploadContainer,
-      dragging ? classes.uploadContainer_dragging : classes.uploadContainer_not_dragging,
-    ]),
-    $uploadWrapper: (classes, { processing }) => ([
-      classes.uploadWrapper,
-      processing ? classes.uploadWrapper_processing : null,
-    ]),
-    $pad: (classes, { invertColors, color }) => ([
-      classes.pad,
-      invertColors.indexOf(color) !== -1 ? classes.pad_invert : null,
-    ]),
-    $color: (classes, { color, invertColors, mode }) => (c) => ([
-      classes.color,
-      c === color ? classes.color_active : classes.color_inactive,
-      invertColors.indexOf(c) !== -1 && mode !== 'upload' ? classes.color_invert : null,
-    ]),
-    $undo: (classes, { undosLeft }) => ([
-      classes.undo,
-      undosLeft ? classes.undo_enabled : classes.undo_disabled,
-    ]),
-    $redo: (classes, { redos }) => ([
-      classes.redo,
-      redos.length ? classes.redo_enabled : classes.redo_disabled,
-    ]),
-  },
-  SliderElement: {
-    container: '',
-    wrapper: '',
-    wrapper_sm: '',
-    wrapper_md: '',
-    wrapper_lg: '',
-    slider: {
-      target: 'relative box-border user-select-none touch-none tap-highlight-transparent touch-callout-none disabled:cursor-not-allowed disabled:opacity-50',
-      target_sm: 'form-my-slider-sm',
-      target_md: 'form-my-slider',
-      target_lg: 'form-my-slider-lg',
-      focused: 'slider-focused',
-      tooltipFocus: 'slider-tooltip-focus',
-      tooltipDrag: 'slider-tooltip-drag',
-      ltr: 'slider-ltr',
-      rtl: 'slider-rtl',
-      horizontal: 'slider-horizontal',
-      horizontal_sm: 'form-h-slider-horizontal-sm',
-      horizontal_md: 'form-h-slider-horizontal',
-      horizontal_lg: 'form-h-slider-horizontal-lg',
-      vertical: 'slider-vertical',
-      vertical_sm: 'form-h-slider-vertical-sm form-w-slider-vertical-sm',
-      vertical_md: 'form-h-slider-vertical form-w-slider-vertical',
-      vertical_lg: 'form-h-slider-vertical-lg form-w-slider-vertical-lg',
-      textDirectionRtl: 'slider-txt-rtl',
-      textDirectionLtr: 'slider-txt-ltr',
-      base: 'form-shadow-input w-full h-full relative z-1 form-bg-passive',
-      base_sm: 'form-radius-slider-sm',
-      base_md: 'form-radius-slider',
-      base_lg: 'form-radius-slider-lg',
-      connects: 'w-full h-full relative overflow-hidden z-0 form-radius-slider',
-      connects_sm: 'form-radius-slider-sm',
-      connects_md: 'form-radius-slider',
-      connects_lg: 'form-radius-slider-lg',
-      connect: 'absolute z-1 top-0 right-0 transform-origin-0 transform-style-flat h-full w-full form-bg-primary cursor-pointer tap:duration-300 tap:transition-transform disabled:cursor-not-allowed',
-      connect_sm: 'form-radius-slider-sm',
-      connect_md: 'form-radius-slider',
-      connect_lg: 'form-radius-slider-lg',
-      origin: 'slider-origin absolute z-1 top-0 right-0 transform-origin-0 transform-style-flat h-full w-full h:h-0 v:-top-full txt-rtl-h:left-0 txt-rtl-h:right-auto v:w-0 tap:duration-300 tap:transition-transform',
-      handle: 'absolute rounded-full transition-shadow border-0 cursor-grab txt-rtl-h:-left-2 txt-rtl-h:right-auto disabled:cursor-not-allowed disabled:pointer-events-none form-bg-slider-handle form-shadow-handles hover:form-shadow-handles-hover focus:form-shadow-handles-focus focused-hover:form-shadow-handles-hover focus:outline-zero focus:form-ring',
-      handle_sm: 'form-size-slider-handle-sm h:form-top-slider-handle-horizontal-sm h:form-right-slider-handle-horizontal-sm v:form-bottom-slider-handle-vertical-sm v:form-right-slider-handle-vertical-sm',
-      handle_md: 'form-size-slider-handle h:form-top-slider-handle-horizontal h:form-right-slider-handle-horizontal v:form-bottom-slider-handle-vertical v:form-right-slider-handle-vertical',
-      handle_lg: 'form-size-slider-handle-lg h:form-top-slider-handle-horizontal-lg h:form-right-slider-handle-horizontal-lg v:form-bottom-slider-handle-vertical-lg v:form-right-slider-handle-vertical-lg',
-      handleUpper: 'slider-handle-upper',
-      handleLower: 'slider-handle-lower',
-      touchArea: 'h-full w-full',
-      tooltip: 'absolute block font-semibold whitespace-nowrap min-w-5 text-center border form-border-color-slider-tooltip form-bg-primary form-color-on-primary transform tt-focus:hidden tt-focused:block tt-drag:hidden tt-dragging:block h:-translate-x-1/2 h:left-1/2 v:-translate-y-1/2 v:top-1/2 merge-h:translate-x-1/2 merge-v:translate-y-1/2 merge-h:left-auto merge-v:top-auto',
-      tooltip_sm: 'form-text-small-sm form-py-slider-tooltip-sm form-px-slider-tooltip-sm form-radius-small-sm',
-      tooltip_md: 'form-text-small form-py-slider-tooltip form-px-slider-tooltip form-radius-small',
-      tooltip_lg: 'form-text-small-lg form-py-slider-tooltip-lg form-px-slider-tooltip-lg form-radius-small-lg',
-      tooltipTop: 'form-slider-tooltip-top',
-      tooltipTop_sm: 'form-bottom-slider-tooltip-top-sm merge-h:form-bottom-slider-tooltip-top-merged-sm h:arrow-bottom-sm',
-      tooltipTop_md: 'form-bottom-slider-tooltip-top merge-h:form-bottom-slider-tooltip-top-merged h:arrow-bottom',
-      tooltipTop_lg: 'form-bottom-slider-tooltip-top-lg merge-h:form-bottom-slider-tooltip-top-merged-lg h:arrow-bottom-lg',
-      tooltipBottom: 'form-slider-tooltip-bottom',
-      tooltipBottom_sm: 'form-top-slider-tooltip-bottom-sm merge-h:form-top-slider-tooltip-bottom-merged-sm h:arrow-top-sm',
-      tooltipBottom_md: 'form-top-slider-tooltip-bottom merge-h:form-top-slider-tooltip-bottom-merged h:arrow-top',
-      tooltipBottom_lg: 'form-top-slider-tooltip-bottom-lg merge-h:form-top-slider-tooltip-bottom-merged-lg h:arrow-top-lg',
-      tooltipLeft: 'form-slider-tooltip-left',
-      tooltipLeft_sm: 'form-right-slider-tooltip-left-sm merge-v:form-right-slider-tooltip-left-merged-sm v:arrow-right-sm',
-      tooltipLeft_md: 'form-right-slider-tooltip-left merge-v:form-right-slider-tooltip-left-merged v:arrow-right',
-      tooltipLeft_lg: 'form-right-slider-tooltip-left-lg merge-v:form-right-slider-tooltip-left-merged-lg v:arrow-right-lg',
-      tooltipRight: 'form-slider-tooltip-right',
-      tooltipRight_sm: 'form-left-slider-tooltip-right-sm merge-v:form-left-slider-tooltip-right-merged-sm v:arrow-left-sm',
-      tooltipRight_md: 'form-left-slider-tooltip-right merge-v:form-left-slider-tooltip-right-merged v:arrow-left',
-      tooltipRight_lg: 'form-left-slider-tooltip-right-lg merge-v:form-left-slider-tooltip-right-merged-lg v:arrow-left-lg',
-      tooltipHidden: 'slider-tooltip-hidden',
-      active: 'slider-active cursor-grabbing',
-      draggable: 'cursor-ew-resize v:cursor-ns-resize',
-      tap: 'slider-state-tap',
-      drag: 'slider-state-drag',
-      $target: (classes, { Size }) => ([
-        classes.slider.target,
-        classes.slider[`target_${Size}`],
-      ]),
-      $horizontal: (classes, { Size }) => ([
-        classes.slider.horizontal,
-        classes.slider[`horizontal_${Size}`],
-      ]),
-      $vertical: (classes, { Size }) => ([
-        classes.slider.vertical,
-        classes.slider[`vertical_${Size}`],
-      ]),
-      $base: (classes, { Size }) => ([
-        classes.slider.base,
-        classes.slider[`base_${Size}`],
-      ]),
-      $connects: (classes, { Size }) => ([
-        classes.slider.connects,
-        classes.slider[`connects_${Size}`],
-      ]),
-      $connect: (classes, { Size }) => ([
-        classes.slider.connect,
-        classes.slider[`connect_${Size}`],
-      ]),
-      $handle: (classes, { Size }) => ([
-        classes.slider.handle,
-        classes.slider[`handle_${Size}`],
-      ]),
-      $tooltip: (classes, { Size }) => ([
-        classes.slider.tooltip,
-        classes.slider[`tooltip_${Size}`],
-      ]),
-      $tooltipTop: (classes, { Size }) => ([
-        classes.slider.tooltipTop,
-        classes.slider[`tooltipTop_${Size}`],
-      ]),
-      $tooltipBottom: (classes, { Size }) => ([
-        classes.slider.tooltipBottom,
-        classes.slider[`tooltipBottom_${Size}`],
-      ]),
-      $tooltipLeft: (classes, { Size }) => ([
-        classes.slider.tooltipLeft,
-        classes.slider[`tooltipLeft_${Size}`],
-      ]),
-      $tooltipRight: (classes, { Size }) => ([
-        classes.slider.tooltipRight,
-        classes.slider[`tooltipRight_${Size}`],
-      ]),
-    },
-    $wrapper: (classes, { Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-    ]),
-  },
-  StaticElement: {
-    container: 'form-contains-link',
-    content: '',
-    content_sm: 'form-text-sm',
-    content_md: 'form-text',
-    content_lg: 'form-text-lg',
-    content_top_1: 'form-mt-tag-1',
-    content_top_2: 'form-mt-tag-2',
-    content_top_3: 'form-mt-tag-3',
-    content_bottom_1: 'form-mb-tag-1',
-    content_bottom_2: 'form-mb-tag-2',
-    content_bottom_3: 'form-mb-tag-3',
-    tag: '',
-    tag_sm: '',
-    tag_md: '',
-    tag_lg: '',
-    tag_top_1: 'form-mt-tag-1',
-    tag_top_2: 'form-mt-tag-2',
-    tag_top_3: 'form-mt-tag-3',
-    tag_bottom_1: 'form-mb-tag-1',
-    tag_bottom_2: 'form-mb-tag-2',
-    tag_bottom_3: 'form-mb-tag-3',
-    tag_left: 'text-left',
-    tag_center: 'text-center',
-    tag_right: 'text-right',
-    tag_p: '',
-    tag_p_sm: '',
-    tag_p_md: '',
-    tag_p_lg: '',
-    tag_h1: 'font-bold',
-    tag_h1_sm: 'form-text-h1-mobile-sm md:form-text-h1-sm',
-    tag_h1_md: 'form-text-h1-mobile md:form-text-h1',
-    tag_h1_lg: 'form-text-h1-mobile-lg md:form-text-h1-lg',
-    tag_h2: 'font-bold',
-    tag_h2_sm: 'form-text-h2-mobile-sm md:form-text-h2-sm',
-    tag_h2_md: 'form-text-h2-mobile md:form-text-h2',
-    tag_h2_lg: 'form-text-h2-mobile-lg md:form-text-h2-lg',
-    tag_h3: 'font-bold',
-    tag_h3_sm: 'form-text-h3-mobile-sm md:form-text-h3-sm',
-    tag_h3_md: 'form-text-h3-mobile md:form-text-h3',
-    tag_h3_lg: 'form-text-h3-mobile-lg md:form-text-h3-lg',
-    tag_h4: 'font-bold',
-    tag_h4_sm: 'form-text-h4-mobile-sm md:form-text-h4-sm',
-    tag_h4_md: 'form-text-h4-mobile md:form-text-h4',
-    tag_h4_lg: 'form-text-h4-mobile-lg md:form-text-h4-lg',
-    tag_blockquote: 'form-border-width-blockquote form-border-color-blockquote',
-    tag_blockquote_sm: 'form-text-blockquote-sm form-p-blockquote-sm',
-    tag_blockquote_md: 'form-text-blockquote form-p-blockquote',
-    tag_blockquote_lg: 'form-text-blockquote-lg form-p-blockquote-lg',
-    tag_a: 'form-color-link form-decoration-link',
-    tag_a_sm: '',
-    tag_a_md: '',
-    tag_a_lg: '',
-    tag_hr: 'form-static-tag-hr-wrapper form-border-color-hr form-py-hr',
-    tag_img: 'form-static-tag-img',
-    $content: (classes, { Size, top, bottom }) => ([
-      classes.content,
-      classes[`content_${Size}`],
-      top >= 1 ? classes[`content_top_${top}`] : null,
-      bottom >= 1 ? classes[`content_bottom_${bottom}`] : null,
-    ]),
-    $tag: (classes, { Size, tag, align, top, bottom }) => ([
-      classes.tag,
-      classes[`tag_${Size}`],
-      classes[`tag_${tag}`],
-      classes[`tag_${tag}_${Size}`] || null,
-      align === 'left' ? classes.tag_left : null,
-      align === 'center' ? classes.tag_center : null,
-      align === 'right' ? classes.tag_right : null,
-      top >= 1 ? classes[`tag_top_${top}`] : null,
-      bottom >= 1 ? classes[`tag_bottom_${bottom}`] : null,
-    ]),
-  },
-  TagsElement: {
-    container: 'form-text-type',
-    select: {
-      ...select,
-      tags: 'flex-grow flex-shrink flex flex-wrap items-center min-w-0 rtl:pl-0',
-      tags_sm: 'form-pl-input-y-sm form-mt-space-tags-sm with-floating:form-p-tags-floating-sm rtl:form-pr-input-y-sm',
-      tags_md: 'form-pl-input-y form-mt-space-tags with-floating:form-p-tags-floating rtl:form-pr-input-y',
-      tags_lg: 'form-pl-input-y-lg form-mt-space-tags-lg with-floating:form-p-tags-floating-lg rtl:form-pr-input-y-lg',
-      tag: 'form-bg-tag form-color-tag form-border-width-tag form-border-color-tag font-semibold  flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:mr-0',
-      tag_sm: 'form-radius-input-tag-sm form-text-small-sm form-py-tag-sm form-pl-tag-sm form-mr-space-tags-sm form-mb-space-tags-sm rtl:form-pr-tag-sm rtl:form-ml-space-tags-sm',
-      tag_md: 'form-radius-input-tag form-text-small form-py-tag form-pl-tag form-mr-space-tags form-mb-space-tags rtl:form-pr-tag rtl:form-ml-space-tags',
-      tag_lg: 'form-radius-input-tag-lg form-text-small-lg form-py-tag-lg form-pl-tag-lg form-mr-space-tags-lg form-mb-space-tags-lg rtl:form-pr-tag-lg rtl:form-ml-space-tags-lg',
-      tagDisabled: 'opacity-50',
-      tagDisabled_sm: 'form-pr-tag-sm rtl:form-pl-tag-sm',
-      tagDisabled_md: 'form-pr-tag rtl:form-pl-tag',
-      tagDisabled_lg: 'form-pr-tag-lg rtl:form-pl-tag-lg',
-      tagWrapper: 'overflow-hidden overflow-ellipsis',
-      tagWrapper_nobreak: 'whitespace-nowrap',
-      tagWrapperBreak: 'whitespace-normal break-all',
-      tagRemove: 'flex items-center justify-center p-1 mx-0.5 hover:bg-black hover:bg-opacity-10 group',
-      tagRemove_sm: 'form-radius-input-tag-sm',
-      tagRemove_md: 'form-radius-input-tag',
-      tagRemove_lg: 'form-radius-input-tag-lg',
-      tagRemoveIcon: 'mask-bg mask-form-remove bg-current inline-block w-3 h-3',
-      tagsSearchWrapper: 'inline-block relative form-ml-space-tags form-mr-space-tags form-mb-space-tags flex-grow flex-shrink h-full max-w-full',
-      tagsSearchWrapper_sm: 'form-ml-space-tags-sm form-mr-space-tags-sm form-mb-space-tags-sm',
-      tagsSearchWrapper_md: 'form-ml-space-tags form-mr-space-tags form-mb-space-tags',
-      tagsSearchWrapper_lg: 'form-ml-space-tags-lg form-mr-space-tags-lg form-mb-space-tags-lg',
-      tagsSearch: 'absolute bg-transparent form-color-input inset-0 border-0 outline-zero appearance-none p-0 box-border w-full pr-2',
-      tagsSearch_sm: 'form-text-sm',
-      tagsSearch_md: 'form-text',
-      tagsSearch_lg: 'form-text-lg',
-      tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
-      $tags: (classes, { Size }) => ([
-        classes.select.tags,
-        classes.select[`tags_${Size}`],
-      ]),
-      $tag: (classes, { Size }) => ([
-        classes.select.tag,
-        classes.select[`tag_${Size}`],
-      ]),
-      $tagWrapper: (classes, { breakTags }) => ([
-        classes.select.tagWrapper,
-        !breakTags.value ? classes.select.tagWrapper_noBreak : null,
-      ]),
-      $tagDisabled: (classes, { Size }) => ([
-        classes.select.tagDisabled,
-        classes.select[`tagDisabled_${Size}`],
-      ]),
-      $tagRemove: (classes, { Size }) => ([
-        classes.select.tagRemove,
-        classes.select[`tagRemove_${Size}`],
-      ]),
-      $tagsSearchWrapper: (classes, { Size }) => ([
-        classes.select.tagsSearchWrapper,
-        classes.select[`tagsSearchWrapper_${Size}`],
-      ]),
-      $tagsSearch: (classes, { Size }) => ([
-        classes.select.tagsSearch,
-        classes.select[`tagsSearch_${Size}`],
-      ]),
-    }
-  },
-  TextareaElement: {
-    ...textarea,
-  },
-  TextElement: {
-    ...text,
-  },
-  ToggleElement: {
-    container: 'form-contains-link',
-    wrapper: 'flex items-start',
-    wrapper_left: 'rtl:justify-end',
-    wrapper_right: 'justify-end rtl:justify-start',
-    text: '',
-    text_sm: 'form-ml-space-checkbox-sm rtl:form-mr-space-checkbox-sm rtl:ml-0',
-    text_md: 'form-ml-space-checkbox rtl:form-mr-space-checkbox rtl:ml-0',
-    text_lg: 'form-ml-space-checkbox-lg rtl:form-mr-space-checkbox-lg rtl:ml-0',
-    text_left: 'rtl:-order-1 rtl:!mr-0',
-    text_left_sm: '!form-ml-space-checkbox-sm',
-    text_left_md: '!form-ml-space-checkbox',
-    text_left_lg: '!form-ml-space-checkbox-lg',
-    text_right: '!ml-0 -order-1 rtl:order-none',
-    text_right_sm: 'form-mr-space-checkbox-sm',
-    text_right_md: 'form-mr-space-checkbox',
-    text_right_lg: 'form-mr-space-checkbox-lg',
-    toggle: {
-      container: 'form-shadow-handles inline-block rounded-full outline-zero transition-input duration-200 ease-in-out focus:form-ring',
-      container_enabled: 'hover:form-shadow-handles-hover focus:form-shadow-handles-focus focused-hover:form-shadow-handles-hover',
-      container_disabled: 'cursor-not-allowed opacity-50',
-      toggle: 'flex rounded-full relative cursor-pointer transition-colors items-center box-content form-border-width-toggle leading-none',
-      toggle_sm: 'form-w-toggle-sm form-h-toggle-sm text-xs',
-      toggle_md: 'form-w-toggle form-h-toggle text-xs',
-      toggle_lg: 'form-w-toggle-lg form-h-toggle-lg text-0.5sm',
-      toggleOn: 'form-bg-primary form-border-color-primary justify-start form-color-on-primary',
-      toggleOff: 'form-bg-passive form-border-color-passive form-color-passive justify-end',
-      toggleOnDisabled: 'form-bg-primary form-border-color-primary justify-start form-color-on-primary',
-      toggleOffDisabled: 'form-bg-passive form-border-color-passive form-color-passive justify-end',
-      handle: 'inline-block form-bg-toggle-handle top-0 rounded-full absolute transition-all',
-      handle_sm: 'form-size-toggle-handle-sm',
-      handle_md: 'form-size-toggle-handle',
-      handle_lg: 'form-size-toggle-handle-lg',
-      handleOn: 'left-full transform -translate-x-full',
-      handleOff: 'left-0',
-      handleOnDisabled: 'left-full transform -translate-x-full',
-      handleOffDisabled: 'left-0',
-      label: 'text-center border-box whitespace-nowrap select-none',
-      label_sm: 'form-w-toggle-label-sm',
-      label_md: 'form-w-toggle-label',
-      label_lg: 'form-w-toggle-label-lg',
-      $container: (classes, { Size, isDisabled }) => ([
-        classes.toggle.container,
-        classes.toggle[`container_${Size}`],
-        !isDisabled ? classes.toggle.container_enabled : classes.toggle.container_disabled,
-      ]),
-      $toggle: (classes, { Size }) => ([
-        classes.toggle.toggle,
-        classes.toggle[`toggle_${Size}`],
-      ]),
-      $handle: (classes, { Size }) => ([
-        classes.toggle.handle,
-        classes.toggle[`handle_${Size}`],
-      ]),
-      $label: (classes, { Size }) => ([
-        classes.toggle.label,
-        classes.toggle[`label_${Size}`],
-      ]),
-    },
-    $text: (classes, { Size, align }) => ([
-      classes.text,
-      classes[`text_${Size}`],
-      align === 'left' ? [classes.text_left, classes[`text_left_${Size}`]] : null,
-      align === 'right' ? [classes.text_right, classes[`text_right_${Size}`]] : null,
-    ]),
-    $wrapper: (classes, { align }) => ([
-      classes.wrapper,
-      align === 'left' ? classes.wrapper_left : null,
-      align === 'right' ? classes.wrapper_right : null,
-    ]),
-  },
-  TTextareaElement: {
-    ...textarea,
-  },
-  TTextElement: {
-    ...text,
-  },
-  TEditorElement: {
-    ...editor,
-  },
-
-  // Wrappers
-  DatepickerWrapper: {
-    datepicker: '',
-    calendarContainer: ''
-  },
-  EditorWrapper: {
-    container: 'form-bg-input form-color-input',
-    container_hideBold: 'form-editor-hide-bold',
-    container_hideItalic: 'form-editor-hide-italic',
-    container_hideStrike: 'form-editor-hide-strike',
-    container_hideLink: 'form-editor-hide-link',
-    container_hideHeading: 'form-editor-hide-heading',
-    container_hideQuote: 'form-editor-hide-quote',
-    container_hideCode: 'form-editor-hide-code',
-    container_hideBulletList: 'form-editor-hide-bullet-list',
-    container_hideNumberList: 'form-editor-hide-number-list',
-    container_hideDecreaseNesting: 'form-editor-hide-decrease-nesting',
-    container_hideIncreaseNesting: 'form-editor-hide-increase-nesting',
-    container_hideAttach: 'form-editor-hide-attach',
-    container_hideUndo: 'form-editor-hide-undo',
-    container_hideRedo: 'form-editor-hide-redo',
-    $container: (classes, { hideTools }) => ([
-      classes.container,
-    ].concat(hideTools.map(t => classes[`container_hide${t.split('-').map(s=>s.charAt(0).toUpperCase()+s.slice(1)).join('')}`])))
-  },
-
-  // Components
-  ElementAddon: {
-    container: 'form-bg-addon form-color-addon flex items-center justify-center flex-grow-0 flex-shrink-0',
-    container_before: '',
-    container_after: 'order-2',
-    container_sm: '',
-    container_md: '',
-    container_lg: '',
-    container_before_sm: 'form-radius-input-l-sm form-pl-input-sm form-pr-space-addon-sm',
-    container_before_md: 'form-radius-input-l form-pl-input form-pr-space-addon',
-    container_before_lg: 'form-radius-input-l-lg form-pl-input-lg form-pr-space-addon-lg',
-    container_after_sm: 'form-radius-input-r-sm form-pr-input-sm form-pl-space-addon-sm',
-    container_after_md: 'form-radius-input-r form-pr-input form-pl-space-addon',
-    container_after_lg: 'form-radius-input-r-lg form-pr-input-lg form-pl-space-addon-lg',
-    wrapper: 'contents items-center justify-center',
-    $container: (classes, { type, Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-      classes[`container_${type}`],
-      classes[`container_${type}_${Size}`],
-    ]),
-  },
-  ElementAddonOptions: {
-    container: 'flex items-center',
-    container_disabled: 'cursor-default opacity-50 pointer-events-none',
-    wrapper: 'flex items-center transition-all form-color-input hover:form-bg-selected focus:form-bg-selected outline-none rounded cursor-pointer whitespace-nowrap',
-    wrapper_default: 'px-1 py-1',
-    wrapper_relaxed: 'px-3 py-1.75',
-    caret: 'mask-bg mask-form-caret form-bg-icon w-2.5 h-4 ml-2 rtl:ml-0 rtl:mr-2',
-    dropdown: 'form-bg-input form-shadow-dropdown form-border-width-dropdown rounded border-solid form-border-color-input fixed z-[1002] overflow-x-scroll max-h-[calc(100vh-2rem)]',
-    optionWrapper: '',
-    option: 'flex items-center form-color-input cursor-pointer py-1.25 px-3 whitespace-nowrap',
-    option_active: 'form-bg-selected',
-    $container: (classes, { Size, el$ }) => ([
-      classes.container,
-      el$.isDisabled || el$.readonly ? classes.container_disabled : null,
-    ]),
-    $wrapper: (classes, { relaxed }) => ([
-      classes.wrapper,
-      relaxed ? classes.wrapper_relaxed : classes.wrapper_default,
-    ]),
-    $option: (classes, { selected, pointed }) => (option) => ([
-      classes.option,
-      selected.index === option.index || pointed.index === option.index ? classes.option_active : null
-    ])
-  },
-  ElementDescription: {
-    container: 'form-color-muted',
-    container_sm: 'form-text-small-sm mt-0.5',
-    container_md: 'form-text-small mt-1',
-    container_lg: 'form-text-small-lg mt-1',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ]),
-  },
-  ElementError: {
-    container: 'form-color-danger block',
-    container_sm: 'form-text-small-sm mt-0.5',
-    container_md: 'form-text-small mt-1',
-    container_lg: 'form-text-small-lg mt-1',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ]),
-  },
-  ElementInfo: {
-    container: 'inline-block w-3.5 h-3.5 form-bg-info relative ml-1 cursor-pointer form-info-group',
-    wrapper: 'absolute z-1000 -mt-px opacity-0 invisible info-group-hover:opacity-100 info-group-hover:form-visible transition-opacity w-52 flex',
-    wrapper_left: 'right-5 -top-0.5 justify-end',
-    wrapper_right: 'left-5 -top-0.5 justify-start',
-    wrapper_top: 'left-1/2 transform -translate-x-1/2 bottom-8 justify-center',
-    wrapper_bottom: 'left-1/2 transform -translate-x-1/2 top-6 justify-center',
-    content: 'bg-black bg-opacity-90 text-white rounded-md form-text-small py-1 px-2.5 not-italic inline-block relative',
-    $wrapper: (classes, { position }) => ([
-      classes.wrapper,
-      classes[`wrapper_${position}`],
-    ]),
-  },
-  ElementLabel: {
-    container: 'flex items-start',
-    container_sm: 'form-text-sm',
-    container_md: 'form-text',
-    container_lg: 'form-text-lg',
-    container_vertical_sm: 'form-pb-gutter/3-sm form-pt-0 form-pr-0',
-    container_vertical_md: 'form-pb-gutter/3 form-pt-0 form-pr-0',
-    container_vertical_lg: 'form-pb-gutter/3-lg form-pt-0 form-pr-0',
-    container_vertical_sm_SM: 'sm:form-pb-gutter/3-sm sm:form-pt-0 sm:form-pr-0',
-    container_vertical_md_SM: 'sm:form-pb-gutter/3 sm:form-pt-0 sm:form-pr-0',
-    container_vertical_lg_SM: 'sm:form-pb-gutter/3-lg sm:form-pt-0 sm:form-pr-0',
-    container_vertical_sm_MD: 'md:form-pb-gutter/3-sm md:form-pt-0 md:form-pr-0',
-    container_vertical_md_MD: 'md:form-pb-gutter/3 md:form-pt-0 md:form-pr-0',
-    container_vertical_lg_MD: 'md:form-pb-gutter/3-lg md:form-pt-0 md:form-pr-0',
-    container_vertical_sm_LG: 'lg:form-pb-gutter/3-sm lg:form-pt-0 lg:form-pr-0',
-    container_vertical_md_LG: 'lg:form-pb-gutter/3 lg:form-pt-0 lg:form-pr-0',
-    container_vertical_lg_LG: 'lg:form-pb-gutter/3-lg lg:form-pt-0 lg:form-pr-0',
-    container_vertical_sm_XL: 'xl:form-pb-gutter/3-sm xl:form-pt-0 xl:form-pr-0',
-    container_vertical_md_XL: 'xl:form-pb-gutter/3 xl:form-pt-0 xl:form-pr-0',
-    container_vertical_lg_XL: 'xl:form-pb-gutter/3-lg xl:form-pt-0 xl:form-pr-0',
-    container_vertical_sm_2XL: '2xl:form-pb-gutter/3-sm 2xl:form-pt-0 2xl:form-pr-0',
-    container_vertical_md_2XL: '2xl:form-pb-gutter/3 2xl:form-pt-0 2xl:form-pr-0',
-    container_vertical_lg_2XL: '2xl:form-pb-gutter/3-lg 2xl:form-pt-0 2xl:form-pr-0',
-    container_horizontal_sm: 'form-pr-gutter-sm text-type:form-pt-input-border-sm pb-0',
-    container_horizontal_md: 'form-pr-gutter text-type:form-pt-input-border pb-0',
-    container_horizontal_lg: 'form-pr-gutter-lg text-type:form-pt-input-border-lg pb-0',
-    container_horizontal_sm_SM: 'sm:form-pr-gutter-sm sm:text-type:form-pt-input-border-sm sm:pb-0',
-    container_horizontal_md_SM: 'sm:form-pr-gutter sm:text-type:form-pt-input-border sm:pb-0',
-    container_horizontal_lg_SM: 'sm:form-pr-gutter-lg sm:text-type:form-pt-input-border-lg sm:pb-0',
-    container_horizontal_sm_MD: 'md:form-pr-gutter-sm md:text-type:form-pt-input-border-sm md:pb-0',
-    container_horizontal_md_MD: 'md:form-pr-gutter md:text-type:form-pt-input-border md:pb-0',
-    container_horizontal_lg_MD: 'md:form-pr-gutter-lg md:text-type:form-pt-input-border-lg md:pb-0',
-    container_horizontal_sm_LG: 'lg:form-pr-gutter-sm lg:text-type:form-pt-input-border-sm lg:pb-0',
-    container_horizontal_md_LG: 'lg:form-pr-gutter lg:text-type:form-pt-input-border lg:pb-0',
-    container_horizontal_lg_LG: 'lg:form-pr-gutter-lg lg:text-type:form-pt-input-border-lg lg:pb-0',
-    container_horizontal_sm_XL: 'xl:form-pr-gutter-sm xl:text-type:form-pt-input-border-sm xl:pb-0',
-    container_horizontal_md_XL: 'xl:form-pr-gutter xl:text-type:form-pt-input-border xl:pb-0',
-    container_horizontal_lg_XL: 'xl:form-pr-gutter-lg xl:text-type:form-pt-input-border-lg xl:pb-0',
-    container_horizontal_sm_2XL: '2xl:form-pr-gutter-sm 2xl:text-type:form-pt-input-border-sm 2xl:pb-0',
-    container_horizontal_md_2XL: '2xl:form-pr-gutter 2xl:text-type:form-pt-input-border 2xl:pb-0',
-    container_horizontal_lg_2XL: '2xl:form-pr-gutter-lg 2xl:text-type:form-pt-input-border-lg 2xl:pb-0',
-    wrapper: '',
-    $container: (classes, { el$, Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-      !el$.inline ? el$.columnsClasses.label : null,
-      el$.computedCols.default.label < 12 ? classes[`container_horizontal_${Size}`] : classes[`container_vertical_${Size}`],
-      ...(Object.keys(el$.computedCols).length > 1 ? (el$.$vueform.config.breakpoints||['sm', 'md', 'lg', 'xl', '2xl']).map((breakpoint) => {
-        if (!el$.computedCols[breakpoint]?.label) {
-          return null
-        }
-
-        return el$.computedCols[breakpoint].label < 12
-          ? classes[`container_horizontal_${Size}_${breakpoint.toUpperCase()}`].join(' ')
-          : classes[`container_vertical_${Size}_${breakpoint.toUpperCase()}`].join(' ')
-      }) : []),
-    ]),
-  },
-  ElementLabelFloating: {
-    container: 'label-floating relative pointer-events-none',
-    label: 'absolute z-1 leading-px text-0.5xs px-px transition-input duration-200 ease-in-out whitespace-nowrap in-input-group:-form-top-border-width-input-t',
-    label_enabled: 'form-bg-input form-color-floating',
-    label_disabled: 'form-bg-disabled form-color-floating',
-    label_danger: 'form-bg-input-danger form-color-floating-danger',
-    label_success: 'form-bg-input-success form-color-floating-success',
-    label_focused: 'form-bg-input-focus form-color-floating-focus',
-    label_sm: 'form-left-input-sm form-mt-floating-sm rtl:left-auto rtl:form-right-input-sm',
-    label_md: 'form-left-input form-mt-floating rtl:left-auto rtl:form-right-input',
-    label_lg: 'form-left-input-lg form-mt-floating-lg rtl:left-auto rtl:form-right-input-lg',
-    label_invisible: 'opacity-0 invisible',
-    label_visible: 'opacity-100 visible',
-    $label: (classes, { visible, Size, el$ }) => ([
-      classes.label,
-      classes[`label_${Size}`],
-      visible ? classes.label_visible : classes.label_invisible,
-      el$.focused && !el$.isDanger && !el$.isSuccess ? classes.label_focused : null,
-      !el$.isDisabled && !el$.isDanger && !el$.isSuccess ? classes.label_enabled : null,
-      el$.isDisabled ? classes.label_disabled : null,
-      el$.isDanger ? classes.label_danger : null,
-      el$.isSuccess ? classes.label_success : null,
-    ]),
-  },
-  ElementLayout: {
-    container: '',
-    container_sm: 'form-text-sm',
-    container_md: 'form-text',
-    container_lg: 'form-text-lg',
-    container_error: 'has-error',
-    outerWrapper: 'grid grid-cols-12',
-    innerContainer: 'flex-1 grid grid-cols-12',
-    innerWrapperBefore: 'col-span-12',
-    innerWrapper: '',
-    innerWrapperAfter: 'col-span-12',
-    $container: (classes, { el$, Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-      el$.columnsClasses.container,
-      el$.classes.container,
-      !el$.isStatic && el$.errors && !!el$.errors.length ? classes.container_error : null
-    ]),
-    $innerContainer:  (classes, { el$ }) => ([
-      classes.innerContainer,
-      el$.columnsClasses.innerContainer,
-    ]),
-    $innerWrapper:  (classes, { el$ }) => ([
-      classes.innerWrapper,
-      el$.columnsClasses.wrapper,
-    ]),
-  },
-  ElementLayoutInline: {
-    container: 'flex',
-    container_error: 'has-error',
-    $container: (classes, { el$ }) => ([
-      classes.container,
-      !el$.isStatic && el$.errors && !!el$.errors.length ? classes.container_error : null,
-      el$.classes.container,
-    ]),
-  },
-  ElementLoader: {
-    container: 'relative z-1 order-1',
-    loader: 'absolute w-4 h-4 right-full mask-bg mask-form-spinner form-bg-primary animate-spin',
-    loader_sm: 'form-top-input-border-sm form-mr-input-sm mt-0.5',
-    loader_md: 'form-top-input-border form-mr-input mt-1',
-    loader_lg: 'form-top-input-border-lg form-mr-input-lg mt-1',
-    $loader: (classes, { Size }) => ([
-      classes.loader,
-      classes[`loader_${Size}`],
-    ]),
-  },
-  ElementMessage: {
-    container: 'form-color-success block',
-    container_sm: 'form-text-small-sm mt-0.5',
-    container_md: 'form-text-small mt-1',
-    container_lg: 'form-text-small-lg mt-1',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ]),
-  },
-  ElementRequired: {
-    container: '',
-  },
-  ElementText: {
-    container: '',
-    container_before: '',
-    container_between: '',
-    container_after: '',
-    $container: (classes, { type }) => ([
-      classes.container,
-      classes[`container_${type}`]
-    ]),
-  },
-  FormElements: {
-    container: 'grid grid-cols-12',
-    container_sm: 'form-gap-x-gutter-sm form-gap-y-gutter-sm',
-    container_md: 'form-gap-x-gutter form-gap-y-gutter',
-    container_lg: 'form-gap-x-gutter-lg form-gap-y-gutter-lg',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`]
-    ]),
-  },
-  FormErrors: {
-    container: 'form-bg-danger form-color-danger',
-    container_sm: 'form-radius-input-sm form-text-sm form-mb-gutter-sm py-2 px-3',
-    container_md: 'form-radius-input form-text form-mb-gutter py-2 px-3',
-    container_lg: 'form-radius-input-lg form-text-lg form-mb-gutter-lg py-3 px-4',
-    error: '',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ])
-  },
-  FormLanguage: {
-    container: 'flex-grow flex-shrink w-full',
-    wrapper: 'block border-b-2 text-center',
-    wrapper_active: 'form-border-color-primary',
-    wrapper_inactive: 'border-transparent',
-    wrapper_valid: '',
-    wrapper_invalid: 'form-color-danger form-border-color-danger',
-    wrapper_sm: 'py-1.5 px-3.5',
-    wrapper_md: 'py-2 px-4',
-    wrapper_lg: 'py-2 px-4',
-    $wrapper: (classes, { selected, Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-      selected ? classes.wrapper_active : classes.wrapper_inactive
-    ]),
-  },
-  FormLanguages: {
-    container: 'flex items-center justify-between',
-    container_sm: 'form-mb-gutter form-text-sm',
-    container_md: 'form-mb-gutter-lg form-text',
-    container_lg: 'form-mb-gutter-lg form-text-lg',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ]),
-  },
-  FormMessages: {
-    container: 'form-bg-success form-color-success',
-    container_sm: 'form-radius-input-sm form-text-sm form-mb-gutter-sm py-2 px-3',
-    container_md: 'form-radius-input form-text form-mb-gutter py-2 px-3',
-    container_lg: 'form-radius-input-lg form-text-lg form-mb-gutter-lg py-3 px-4',
-    message: '',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ])
-  },
-  FormStep: {
-    container: 'form-step',
-    container_active: 'form-step-active',
-    container_inactive: '',
-    container_invalid: 'form-step-has-errors',
-    container_valid: '',
-    container_disabled: 'form-step-disabled',
-    container_enabled: '',
-    container_completed: 'form-step-completed',
-    container_incompleted: '',
-    container_pending: 'form-step-pending',
-    wrapper: '',
-    $container: (classes, { active, isDisabled, completed, invalid, pending }) => ([
-      classes.container,
-      active ? classes.container_active : classes.container_inactive,
-      isDisabled ? classes.container_disabled : classes.container_enabled,
-      completed ? classes.container_completed : classes.container_incompleted,
-      invalid ? classes.container_invalid : classes.container_valid,
-      pending ? classes.container_pending : null,
-    ]),
-  },
-  FormSteps: {
-    container: 'form-steps',
-    container_sm: 'form-mb-gutter form-text-sm',
-    container_md: 'form-mb-gutter-lg form-text',
-    container_lg: 'form-mb-gutter-lg form-text-lg',
-    wrapper: 'flex justify-between overflow-x-auto',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ]),
-  },
-  FormStepsControl: {
-    button: 'form-border-width-btn form-shadow-btn focus:form-ring focus:outline-zero disabled:pointer-events-none disabled:opacity-60 disabled:cursor-not-allowed',
-    button_previous: '',
-    button_previous_enabled: 'form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary transition-transform transform hover:scale-105',
-    button_previous_disabled: 'form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary opacity-60 pointer-events-none',
-    button_next: '',
-    button_next_enabled: 'form-bg-primary form-color-on-primary form-border-color-btn transition-transform transform hover:scale-105',
-    button_next_disabled: 'form-bg-primary form-color-on-primary form-border-color-btn opacity-60 pointer-events-none cursor-not-allowed',
-    button_next_loading: 'text-transparent form-bg-primary form-border-color-btn form-bg-spinner-on-primary opacity-60 pointer-events-none cursor-not-allowed',
-    button_finish: '',
-    button_finish_enabled: 'form-bg-primary form-color-on-primary form-border-color-btn transition-transform transform hover:scale-105',
-    button_finish_disabled: 'form-bg-primary form-color-on-primary form-border-color-btn opacity-60 pointer-events-none cursor-not-allowed',
-    button_finish_loading: 'text-transparent form-bg-primary form-border-color-btn form-bg-spinner-on-primary opacity-60 pointer-events-none cursor-not-allowed',
-    button_sm: 'form-p-btn-sm form-radius-btn-sm form-text-sm',
-    button_md: 'form-p-btn form-radius-btn form-text',
-    button_lg: 'form-p-btn-lg form-radius-btn-lg form-text-lg',
-    $button: (classes, { isDisabled, isLoading, type, Size }) => ([
-      classes.button,
-      classes[`button_${Size}`],
-      classes[`button_${type}`],
-      isDisabled && !isLoading ? classes[`button_${type}_disabled`] : null,
-      !isDisabled && !isLoading ? classes[`button_${type}_enabled`] : null,
-      isLoading ? classes[`button_${type}_loading`] : null,
-    ]),
-  },
-  FormStepsControls: {
-    container: 'flex justify-between',
-    container_sm: 'form-mt-gutter form-text-sm',
-    container_md: 'form-mt-gutter-lg form-text',
-    container_lg: 'form-mt-gutter-lg form-text-lg',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ]),
-  },
-  FormTab: {
-    container: 'cursor-pointer',
-    wrapper: 'block border-b-2',
-    wrapper_active: 'form-border-color-primary',
-    wrapper_inactive: 'border-transparent',
-    wrapper_valid: '',
-    wrapper_invalid: 'form-color-danger form-border-color-danger',
-    wrapper_sm: 'py-1.5 px-3.5',
-    wrapper_md: 'py-2 px-4',
-    wrapper_lg: 'py-2 px-4',
-    $container: (classes, {}) => ([
-      classes.container,
-    ]),
-    $wrapper: (classes, { active, invalid, Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-      active ? classes.wrapper_active : classes.wrapper_inactive,
-      invalid ? classes.wrapper_invalid : classes.wrapper_valid,
-    ]),
-  },
-  FormTabs: {
-    container: 'flex items-end',
-    container_sm: 'form-mb-gutter form-text-sm',
-    container_md: 'form-mb-gutter-lg form-text',
-    container_lg: 'form-mb-gutter-lg form-text-lg',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ]),
-  },
-  Vueform: {
-    form: '',
-  },
-
-  // Slots
-  CheckboxgroupCheckbox: {
-    ...checkbox,
-    container: 'flex cursor-pointer',
-    wrapper: 'flex cursor-pointer form-view-default',
-    text: '',
-    input: checkbox.input + ' form-shadow-handles',
-    input_sm: checkbox.input_sm + ' form-mt-checkbox-sm',
-    input_md: checkbox.input_md + ' form-mt-checkbox',
-    input_lg: checkbox.input_lg + ' form-mt-checkbox-lg',
-  },
-  CheckboxgroupCheckbox_tabs: {
-    ...groupTabs,
-    container: groupTabs.container + ' form-view-tabs',
-    $wrapper: (classes, { index, items, el$, value, isDisabled, Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-      index < Object.keys(items).length - 1 ? classes.wrapper_not_last : null,
-      index === 0 ? classes.wrapper_first : null,
-      index === 0 ? classes[`wrapper_first_${Size}`] : null,
-      index === Object.keys(items).length - 1 ? classes.wrapper_last : null,
-      index === Object.keys(items).length - 1 ? classes[`wrapper_last_${Size}`] : null,
-      el$.value && el$.value?.indexOf(value) !== -1 ? classes.wrapper_selected : classes.wrapper_unselected,
-      isDisabled ? classes.wrapper_disabled : null,
-    ])
-  },
-  CheckboxgroupCheckbox_blocks: {
-    ...checkbox,
-    ...groupBlocks,
-    container: groupBlocks.container + ' form-view-blocks',
-    $wrapper: (classes, { index, items, el$, value, isDisabled, Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-      index < Object.keys(items).length - 1 ? classes.wrapper_not_last : null,
-      index === 0 ? classes.wrapper_first : null,
-      index === 0 ? classes[`wrapper_first_${Size}`] : null,
-      index === Object.keys(items).length - 1 ? classes.wrapper_last : null,
-      index === Object.keys(items).length - 1 ? classes[`wrapper_last_${Size}`] : null,
-      el$.value && el$.value?.indexOf(value) !== -1 ? classes.wrapper_selected : classes.wrapper_unselected,
-      isDisabled ? classes.wrapper_disabled : null,
-    ]),
-    $description: (classes, { Size }) => ([
-      classes.description,
-      classes[`description_${Size}`],
-    ]),
-  },
-  DragAndDrop: {
-    container: 'form-shadow-input form-bg-input form-color-input form-border-width-input border-dashed w-full transition inline-flex flex-col items-center justify-center p-6 cursor-pointer text-center',
-    container_sm: 'form-radius-large-sm',
-    container_md: 'form-radius-large',
-    container_lg: 'form-radius-large-lg',
-    container_inactive: 'form-border-color-input',
-    container_active: 'form-border-color-primary',
-    container_enabled: '',
-    container_disabled: 'opacity-50 cursor-not-allowed',
-    icon: 'inline-block w-9 h-8 mask-bg mask-form-inbox-in form-bg-primary',
-    title: 'font-semibold mt-3',
-    description: '',
-    $container: (classes, { dragging, disabled, Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-      dragging ? classes.container_active : classes.container_inactive,
-      disabled ? classes.container_disabled : classes.container_enabled,
-    ]),
-  },
-  FilePreview: {
-    container: 'flex justify-center flex-col group relative',
-    container_sm: 'form-h-input-min-height-sm',
-    container_md: 'form-h-input-min-height',
-    container_lg: 'form-h-input-min-height-lg',
-    wrapper: 'flex justify-between items-center w-full',
-    file: 'flex items-center',
-    filenameLink: 'hover:underline',
-    filenameStatic: '',
-    actions: 'flex items-center',
-    percent: 'flex justify-between items-center text-sm form-color-muted group-hover:form-hidden',
-    upload: 'form-bg-primary form-color-on-primary form-radius-small text-xs py-0.5 px-1.5 ml-1.5 whitespace-nowrap transition-transform transform hover:scale-105 focus:form-ring',
-    progressBar: 'form-bg-passive h-0.75 absolute bottom-0 w-full',
-    progress: 'w-0 form-bg-primary transition-all ease-out duration-500 h-0.75',
-    warning: 'flex w-4 h-4 items-center justify-center form-bg-danger rounded-full group-hover:form-hidden',
-    warningIcon: 'mask-bg mask-form-exclamation-solid form-bg-danger-color mask-size-2.5 block w-full h-full',
-    uploaded: 'flex w-4 h-4 items-center justify-center form-bg-success rounded-full group-hover:form-hidden',
-    uploadedIcon: 'mask-bg mask-form-check-solid form-bg-success-color mask-size-2.5 block w-full h-full',
-    remove: 'flex w-4 h-4 items-center justify-center form-bg-passive form-color-passive rounded-full transition filter hover:brightness-90 form-hidden group-hover:form-inline-block',
-    removeIcon: 'mask-bg mask-form-remove-light form-bg-input-color mask-size-3 block w-full h-full',
-    assistiveText: 'form-assistive-text',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ])
-  },
-  FilePreview_image: {
-    container: 'flex justify-start flex-col group relative',
-    wrapper: 'flex justify-between items-center w-full',
-    image: 'form-shadow-input flex items-center form-bg-passive flex-grow-0 flex-shrink-0',
-    image_link: '',
-    image_static: '',
-    image_sm: 'form-radius-image-sm',
-    image_md: 'form-radius-image',
-    image_lg: 'form-radius-image-lg',
-    img: 'form-w-input-height form-h-input-height form-hide-empty-img object-cover',
-    img_sm: 'form-w-input-height-sm form-h-input-height-sm form-radius-image-sm',
-    img_md: 'form-w-input-height form-h-input-height form-radius-image',
-    img_lg: 'form-w-input-height-lg form-h-input-height-lg form-radius-image-lg',
-    file: 'flex items-center flex-grow flex-shrink ml-2.5',
-    filenameLink: 'hover:underline',
-    filenameStatic: '',
-    actions: 'flex items-center',
-    percent: 'flex justify-between items-center text-sm form-color-muted group-hover:form-hidden',
-    upload: 'form-bg-primary form-color-on-primary form-radius-small text-xs py-0.5 px-1.5 ml-1.5 whitespace-nowrap transition-transform transform hover:scale-105 focus:form-ring',
-    progressBar: 'form-bg-passive h-0.75 ml-2.5 absolute bottom-0 right-0',
-    progressBar_sm: 'form-left-input-height-sm',
-    progressBar_md: 'form-left-input-height',
-    progressBar_lg: 'form-left-input-height-lg',
-    progress: 'w-0 form-bg-primary transition-all ease-out duration-500 h-0.75',
-    warning: 'flex w-4 h-4 items-center justify-center form-bg-danger rounded-full group-hover:form-hidden',
-    warningIcon: 'mask-bg mask-form-exclamation-solid form-bg-danger-color mask-size-2.5 block w-full h-full',
-    uploaded: 'flex w-4 h-4 items-center justify-center form-bg-success rounded-full group-hover:form-hidden',
-    uploadedIcon: 'mask-bg mask-form-check-solid form-bg-success-color mask-size-2.5 block w-full h-full',
-    remove: 'flex w-4 h-4 items-center justify-center form-bg-passive form-color-passive rounded-full transition filter hover:brightness-90 form-hidden group-hover:form-inline-block',
-    removeIcon: 'mask-bg mask-form-remove-light form-bg-input-color mask-size-3 block w-full h-full',
-    assistiveText: 'form-assistive-text',
-    $image: (classes, { hasLink, Size }) => ([
-      classes.image,
-      classes[`image_${Size}`],
-      hasLink ? classes.image_link : classes.image_static
-    ]),
-    $img: (classes, { Size }) => ([
-      classes.img,
-      classes[`img_${Size}`],
-    ]),
-    $progressBar: (classes, { Size }) => ([
-      classes.progressBar,
-      classes[`progressBar_${Size}`],
-    ])
-  },
-  FilePreview_gallery: {
-    container: 'flex justify-start flex-col transition duration-500 relative group',
-    container_sm: 'form-w-gallery-sm form-h-gallery-sm',
-    container_md: 'form-w-gallery form-h-gallery',
-    container_lg: 'form-w-gallery-lg form-h-gallery-lg',
-    image: 'form-shadow-input w-full h-full form-bg-passive',
-    image_sm: 'form-radius-gallery-sm',
-    image_md: 'form-radius-gallery',
-    image_lg: 'form-radius-gallery-lg',
-    image_link: '',
-    image_static: '',
-    img: 'w-full h-full object-cover form-hide-empty-img',
-    img_sm: 'form-radius-gallery-sm',
-    img_md: 'form-radius-gallery',
-    img_lg: 'form-radius-gallery-lg',
-    overlay: 'absolute inset-0 bg-white bg-opacity-50 transition duration-300 opacity-0 invisible flex items-center justify-center p-3 form-radius-input group-hover:form-visible group-hover:opacity-100',
-    overlay_sm: 'form-radius-gallery-sm',
-    overlay_md: 'form-radius-gallery',
-    overlay_lg: 'form-radius-gallery-lg',
-    upload: 'relative z-1 form-bg-primary form-color-on-primary form-radius-small text-xs py-0.5 px-1.5 whitespace-nowrap transition-transform transform hover:scale-105 focus:form-ring',
-    progressBar: 'bg-white absolute left-1 right-1 bottom-1 h-0.75 z-1',
-    progress: 'w-0 form-bg-primary transition-all ease-out duration-500 h-0.75',
-    warning: 'absolute right-0.5 bottom-0.5 mr-px mb-px flex w-4 h-4 items-center justify-center form-bg-danger rounded-full',
-    warningIcon: 'mask-bg mask-form-exclamation-solid form-bg-danger-color mask-size-2.5 block w-full h-full',
-    uploaded: 'absolute right-0.5 bottom-0.5 mr-px mb-px flex w-4 h-4 items-center justify-center form-bg-success rounded-full',
-    uploadedIcon: 'mask-bg mask-form-check-solid form-bg-success-color mask-size-2.5 block w-full h-full',
-    remove: 'flex w-4 h-4 items-center justify-center form-bg-passive form-color-passive absolute top-0.5 right-0.5 mt-px mr-px form-hidden rounded-full transition filter hover:brightness-90 group-hover:form-inline-block ',
-    removeIcon: 'mask-bg mask-form-remove-light form-bg-input-color mask-size-3 block w-full h-full',
-    assistiveText: 'form-assistive-text',
-    $container: (classes, { Size }) => ([
-      classes.container,
-      classes[`container_${Size}`],
-    ]),
-    $image: (classes, { Size }) => ([
-      classes.image,
-      classes[`image_${Size}`],
-    ]),
-    $img: (classes, { Size }) => ([
-      classes.img,
-      classes[`img_${Size}`],
-    ]),
-    $overlay: (classes, { Size }) => ([
-      classes.overlay,
-      classes[`overlay_${Size}`],
-    ]),
-  },
-  RadiogroupRadio: {
-    ...radio,
-    container: 'flex cursor-pointer form-view-default',
-    text: '',
-    input: radio.input + ' form-shadow-handles',
-    input_sm: radio.input_sm + ' form-mt-checkbox-sm',
-    input_md: radio.input_md + ' form-mt-checkbox',
-    input_lg: radio.input_lg + ' form-mt-checkbox-lg',
-  },
-  RadiogroupRadio_tabs: {
-    ...groupTabs,
-    container: groupTabs.container + ' form-view-tabs',
-    $wrapper: (classes, { index, items, el$, value, isDisabled, Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-      index < Object.keys(items).length - 1 ? classes.wrapper_not_last : null,
-      index === 0 ? classes.wrapper_first : null,
-      index === 0 ? classes[`wrapper_first_${Size}`] : null,
-      index === Object.keys(items).length - 1 ? classes.wrapper_last : null,
-      index === Object.keys(items).length - 1 ? classes[`wrapper_last_${Size}`] : null,
-      el$.value == value ? classes.wrapper_selected : classes.wrapper_unselected,
-      isDisabled ? classes.wrapper_disabled : null,
-    ]),
-  },
-  RadiogroupRadio_blocks: {
-    ...radio,
-    ...groupBlocks,
-    container: groupBlocks.container + ' form-view-blocks',
-    $wrapper: (classes, { index, items, el$, value, isDisabled, Size }) => ([
-      classes.wrapper,
-      classes[`wrapper_${Size}`],
-      index < Object.keys(items).length - 1 ? classes.wrapper_not_last : null,
-      index === 0 ? classes.wrapper_first : null,
-      index === 0 ? classes[`wrapper_first_${Size}`] : null,
-      index === Object.keys(items).length - 1 ? classes.wrapper_last : null,
-      index === Object.keys(items).length - 1 ? classes[`wrapper_last_${Size}`] : null,
-      el$.value == value ? classes.wrapper_selected : classes.wrapper_unselected,
-      isDisabled ? classes.wrapper_disabled : null,
-    ]),
-    $description: (classes, { Size }) => ([
-      classes.description,
-      classes[`description_${Size}`],
-    ]),
-  },
-}