@dasidev/dasi-ui 1.0.0

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

@@ -0,0 +1,2117 @@
+/**
+ * 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}`],
+    ]),
+  },
+}