Storybook + Taiga UI не импортируется функционал

Пытаюсь скрестить storybook с Taiga UI и на выходе работает половина функционала, то есть стили тайги storybook подцепляет, иконки тоже, а вот функционал не работает вообще, например пишу story для компонента input, и в тайге есть [tuiTextfieldCleaner] который добавляет иконку крестика и при нажатии value в инпуте должен подчищаться, так же есть tuiHintContent который добавляет иконку вопроса и при нажатии должен показываться текст подсказки, но при клике ничего не происхоидт. Однако например у инпута есть свойство [tuiTextfieldSize], где вводишь либо "s", "m", "l" и инпута меняется размер, это storybook цепляет. Подытоживая, storybook подтягивает стили, иконки но сам функционал не подхватывает.

Код:

// HTML

<tui-input
  [tuiTextfieldSize]="size"
  tuiHintContent="hint"
  [(ngModel)]="value"
  [ngStyle]="{ width: width }"
  (change)="onChange()"
  [tuiTextfieldCleaner]="showCleaner">
  <span>
    {{ placeholder }}
  </span>
</tui-input>

// компонент инпута

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TuiHint, TuiTextfield } from '@taiga-ui/core';
import { TuiInputModule, TuiTextfieldControllerModule } from '@taiga-ui/legacy';
import { FormsModule } from '@angular/forms';
import { TuiRoot } from '@taiga-ui/core';

@Component({
  selector: 'app-string',
  standalone: true,
  imports: [
    CommonModule,
    TuiHint,
    TuiTextfield,
    TuiInputModule,
    TuiTextfieldControllerModule,
    FormsModule,
    TuiRoot,
  ],
  templateUrl: './string.component.html',
  styleUrls: ['./string.component.scss'],
})
export class StringComponent {
  @Input() value: string = '';
  @Input() placeholder: string = '';
  @Input() showCleaner: boolean = true;
  @Input() size: string = '';
  @Input() hint: string = '';
  @Input() width: string = '';
  @Output() valueChange = new EventEmitter<string>();

  onChange() {
    this.valueChange.emit(this.value);
  }
}

// Story инпута

import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { StringComponent } from './string.component';
import { TuiHint, TuiTextfield } from '@taiga-ui/core';
import { TuiInputModule, TuiTextfieldControllerModule } from '@taiga-ui/legacy';

export default {
  title: 'Components/String',
  component: StringComponent,
  decorators: [
    moduleMetadata({
      imports: [
        TuiInputModule,
        TuiHint,
        TuiTextfield,
        TuiTextfieldControllerModule,
      ],
    }),
  ],
  argTypes: {
    value: { control: 'text' },
    placeholder: { control: 'text' },
    size: { control: 'text' },
    width: { control: 'text' },
    hint: { control: 'text' },
    showCleaner: { control: 'boolean' },
  },
} as Meta<StringComponent>;

const Template: StoryFn<StringComponent> = (args: any) => ({
  component: StringComponent,
  props: args,
});

export const Default = Template.bind({});
Default.args = {
  value: 'Default value',
  placeholder: 'Default placeholder',
  size: 'l',
  width: '400px',
  showCleaner: true,
  hint: 'default hint',
};

// Конфиги самой storybook

// main.ts

import type { StorybookConfig } from '@storybook/angular';
import * as path from 'path';

const config: StorybookConfig = {
  stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
  staticDirs: [
    {
      from: path.resolve(__dirname, '../node_modules/@taiga-ui/icons/src'),
      to: '/assets/taiga-ui/icons',
    },
  ],
};

export default config;

// preview.ts

import '!style-loader!css-loader!less-loader!@taiga-ui/core/styles/taiga-ui-theme.less';
import '!style-loader!css-loader!less-loader!@taiga-ui/core/styles/taiga-ui-fonts.less';
import '!style-loader!css-loader!less-loader!../src/styles.scss';

import { applicationConfig } from '@storybook/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TuiDialog, tuiIconsProvider } from '@taiga-ui/core';
import { TuiInputModule, TuiTextfieldControllerModule } from '@taiga-ui/legacy';
import { provideAnimations } from '@angular/platform-browser/animations';
import { importProvidersFrom } from '@angular/core';

export const decorators = [
  applicationConfig({
    providers: [
      provideAnimations(),
      {
        provide: tuiIconsProvider,
        useValue: {
          path: 'assets/taiga-ui/icons/',
        },
      },
      importProvidersFrom(
        BrowserAnimationsModule,
        TuiDialog,
        TuiInputModule,
        TuiTextfieldControllerModule
      ),
    ],
  }),
];

//tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true
  },
  "exclude": ["../**/*.spec.ts"],
  "include": [
    "../src/**/*.stories.ts",
    "../src/**/*.stories.js",
    "../src/**/*.stories.jsx",
    "../src/**/*.stories.tsx",
    "../src/**/*.stories.mdx",
    "*.js",
    "*.ts"
  ]
}