diff --git a/.theme3/components/css/dialog.ts b/.theme3/components/css/dialog.ts
new file mode 100644
index 0000000..b99dfc5
--- /dev/null
+++ b/.theme3/components/css/dialog.ts
@@ -0,0 +1,41 @@
+const css = ({ dt }: { dt: (token: string) => string }) => `
+/* Размеры диалога по умолчанию (default) */
+.p-dialog-extra.p-dialog {
+  min-width: ${dt('sizingDialog.extra.minWidth')};
+  max-width: ${dt('sizingDialog.extra.maxWidth')};
+}
+
+/* Размер SM (small) - для компактных диалогов */
+.p-dialog-sm-extra.p-dialog {
+  min-width: ${dt('sizingDialog.sm.extra.minWidth')};
+  max-width: ${dt('sizingDialog.sm.extra.maxWidth')};
+}
+
+/* Размер LG (large) - для диалогов с большим содержимым */
+.p-dialog-lg-extra.p-dialog {
+  min-width: ${dt('sizingDialog.lg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.lg.extra.maxWidth')};
+}
+
+/* Размер XLG (extra large) - для диалогов с максимальным содержимым */
+.p-dialog-xlg-extra.p-dialog {
+  min-width: ${dt('sizingDialog.xlg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.xlg.extra.maxWidth')};
+}
+
+.p-dialog .p-dialog-header {
+  border-bottom: ${dt('sizing.width.w-0.1')} solid ${dt('content.borderColor')};
+}
+
+.p-dialog .p-dialog-header .p-dialog-title {
+  display: flex;
+  align-items: center;
+  gap: ${dt('spacing.gap.gap-2')};
+}
+
+.p-dialog .p-dialog-footer {
+  flex-direction: row-reverse;
+}
+`;
+
+export default css;
diff --git a/.theme3/fonts/tt-fellows/TT_Fellows_DemiBold.woff2 b/.theme3/fonts/tt-fellows/TT_Fellows_DemiBold.woff2
new file mode 100644
index 0000000..ec67015
Binary files /dev/null and b/.theme3/fonts/tt-fellows/TT_Fellows_DemiBold.woff2 differ
diff --git a/.theme3/fonts/tt-fellows/TT_Fellows_DemiBold_Italic.woff2 b/.theme3/fonts/tt-fellows/TT_Fellows_DemiBold_Italic.woff2
new file mode 100644
index 0000000..bf6d066
Binary files /dev/null and b/.theme3/fonts/tt-fellows/TT_Fellows_DemiBold_Italic.woff2 differ
diff --git a/.theme3/fonts/tt-fellows/TT_Fellows_Regular.woff2 b/.theme3/fonts/tt-fellows/TT_Fellows_Regular.woff2
new file mode 100644
index 0000000..c4c6736
Binary files /dev/null and b/.theme3/fonts/tt-fellows/TT_Fellows_Regular.woff2 differ
diff --git a/angular.json b/angular.json
index 0cbea1d..f932264 100644
--- a/angular.json
+++ b/angular.json
@@ -17,6 +17,8 @@
         "build": {
           "builder": "@angular/build:application",
           "options": {
+            "outputPath": "dist/angular-ui-kit",
+            "index": "src/index.html",
             "browser": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
@@ -117,5 +119,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
\ No newline at end of file
diff --git a/documentation.json b/documentation.json
new file mode 100644
index 0000000..42dc70e
--- /dev/null
+++ b/documentation.json
@@ -0,0 +1,1587 @@
+{
+    "pipes": [],
+    "interfaces": [],
+    "injectables": [],
+    "guards": [],
+    "interceptors": [],
+    "classes": [],
+    "directives": [],
+    "components": [
+        {
+            "name": "ButtonBadgeComponent",
+            "id": "component-ButtonBadgeComponent-fab33f9afdb48c6fae49d289621dfd7234c7920f7d3f703dac62f523dd0852ba668326634ecf1aaddf69f2b1afbd505312415662d1865b6b360fbd9dec82dafc",
+            "file": "src/stories/components/button/examples/button-badge.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-button-badge",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "`<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3 items-end\">\n    <p-button label=\"Emails\" badge=\"8\" size=\"small\" />\n\n    <p-button label=\"Emails\" badge=\"8\" />\n\n    <p-button label=\"Emails\" badge=\"8\" size=\"large\" />\n\n    <p-button\n        label=\"Messages\"\n        icon=\"ti ti-users\"\n        badge=\"2\"\n        badgeClass=\"p-badge-contrast\"\n        outlined=\"true\" />\n  </div>\n</div>\n`",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "Button"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\nimport { StoryObj } from '@storybook/angular';\n\nconst template = `\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3 items-end\">\n    <p-button label=\"Emails\" badge=\"8\" size=\"small\" />\n\n    <p-button label=\"Emails\" badge=\"8\" />\n\n    <p-button label=\"Emails\" badge=\"8\" size=\"large\" />\n\n    <p-button\n        label=\"Messages\"\n        icon=\"ti ti-users\"\n        badge=\"2\"\n        badgeClass=\"p-badge-contrast\"\n        outlined=\"true\" />\n  </div>\n</div>\n`;\nconst styles = '';\n\n@Component({\n  selector: 'app-button-badge',\n  standalone: true,\n  imports: [Button],\n  template,\n  styles\n})\nexport class ButtonBadgeComponent {}\n\nexport const Badge: StoryObj = {\n  render: () => ({\n    template: `<app-button-badge></app-button-badge>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Badge кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-text',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonBadgeComponent {}\n        `\n      }\n    }\n  }\n};\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        },
+        {
+            "name": "ButtonBaseComponent",
+            "id": "component-ButtonBaseComponent-6af8a00394965f790f420544bff02db11acaf9dc0a8d25754bf7fb4eca0b1593e580fb507f53a98cc78fc785cc15586e7c1e378bbe02c80a0d007a7649cb86bf",
+            "file": "src/stories/components/button/examples/button-base.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-button-base",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "`<div class=\"bg-surface-ground p-4\">\n  <p-button\n    [label]=\"label\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    [size]=\"size\"\n    [rounded]=\"rounded\"\n    [outlined]=\"outlined\"\n    [text]=\"text\"\n    [icon]=\"icon\"\n    [iconPos]=\"iconPos\"\n    [badge]=\"badge\"\n    [severity]=\"severity\"\n  >\n  </p-button>\n</div>\n`",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [
+                {
+                    "name": "badge",
+                    "defaultValue": "''",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 42,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "disabled",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 34,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "icon",
+                    "defaultValue": "''",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 40,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "iconPos",
+                    "defaultValue": "null",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 41,
+                    "type": "\"left\" | \"right\" | null",
+                    "decorators": []
+                },
+                {
+                    "name": "label",
+                    "defaultValue": "''",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 33,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "loading",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 35,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "outlined",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 38,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "rounded",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 37,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "severity",
+                    "defaultValue": "null",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 43,
+                    "type": "\"success\" | \"info\" | \"warn\" | \"primary\" | \"help\" | \"danger\" | null",
+                    "decorators": []
+                },
+                {
+                    "name": "size",
+                    "defaultValue": "null",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 36,
+                    "type": "\"small\" | \"large\" | null",
+                    "decorators": []
+                },
+                {
+                    "name": "text",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 39,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "Button"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component, Input } from '@angular/core';\nimport { Button } from 'primeng/button';\nimport { StoryObj } from '@storybook/angular';\n\nconst template = `\n<div class=\"bg-surface-ground p-4\">\n  <p-button\n    [label]=\"label\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    [size]=\"size\"\n    [rounded]=\"rounded\"\n    [outlined]=\"outlined\"\n    [text]=\"text\"\n    [icon]=\"icon\"\n    [iconPos]=\"iconPos\"\n    [badge]=\"badge\"\n    [severity]=\"severity\"\n  >\n  </p-button>\n</div>\n`;\nconst styles = ``;\n\n@Component({\n  selector: 'app-button-base',\n  standalone: true,\n  imports: [Button],\n  template,\n  styles\n})\nexport class ButtonBaseComponent {\n  @Input() label = '';\n  @Input() disabled = false;\n  @Input() loading = false;\n  @Input() size: 'small' | 'large' | null = null;\n  @Input() rounded = false;\n  @Input() outlined = false;\n  @Input() text = false;\n  @Input() icon: string = '';\n  @Input() iconPos: 'left' | 'right' | null = null;\n  @Input() badge: string = '';\n  @Input() severity: 'success' | 'info' | 'warn' | 'primary' | 'help' | 'danger' | null = null;\n}\n\nexport const Base: StoryObj = {\n  render: (args) => ({\n    props: args,\n    template: `\n<app-button-base\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [loading]=\"loading\"\n  [size]=\"size\"\n  [rounded]=\"rounded\"\n  [outlined]=\"outlined\"\n  [text]=\"text\"\n  [icon]=\"icon\"\n  [iconPos]=\"iconPos\"\n  [badge]=\"badge\"\n  [severity]=\"severity\"\n>\n</app-button-base>`\n  }),\n  args: {\n    label: 'Base button',\n    disabled: false,\n    loading: false,\n    size: null,\n    rounded: false,\n    outlined: false,\n    text: false,\n    icon: '',\n    iconPos: null,\n    badge: '',\n    severity: null\n  },\n  argTypes: {\n    label: {\n      description: 'Текст кнопки.'\n    },\n    disabled: {\n      description: 'При наличии указывает, что компонент должен быть отключен.'\n    },\n    loading: {\n      description: 'Находится ли кнопка в состоянии загрузки.'\n    },\n    // TODO Добавить xlarge после фикса в либе.\n    size: {\n      description: 'Определяет размер кнопки.',\n      control: { type: 'select' },\n      options: [null, 'small', 'large'],\n      table: {\n        type: { summary: `'small' | 'large' | null` } // <-- тип в документации\n      }\n    },\n    rounded: {\n      description: 'При наличии делает кнопку с закругленными краями.'\n    },\n    outlined: {\n      description: 'При наличии делает кнопку с контуром без фона.'\n    },\n    text: {\n      description: 'При наличии делает кнопку текстовой без фона и границ.'\n    },\n    icon: {\n      description: 'Имя иконки для отображения в кнопке.'\n    },\n    iconPos: {\n      description: 'Позиция иконки относительно текста.',\n      control: { type: 'select' },\n      options: [null, 'left', 'right'],\n      table: {\n        type: { summary: `'left' | 'right' | null` }\n      }\n    },\n    badge: {\n      description: 'Текст для отображения в виде бейджа на кнопке.'\n    },\n    severity: {\n      description: 'Определяет цветовую схему кнопки.',\n      control: { type: 'select' },\n      options: [null, 'success', 'info', 'warn', 'primary', 'help', 'danger'],\n      table: {\n        type: {\n          summary: `'success' | 'info' | 'warn' | 'primary' | 'help' | 'danger' | null`\n        }\n      }\n    }\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: 'Стандартная кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-base',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonBaseComponent {\n  @Input() label = '';\n  @Input() disabled = false;\n  @Input() loading = false;\n  @Input() size: 'small' | 'large' | null = null;\n  @Input() rounded = false;\n}\n        `\n      }\n    }\n  }\n};\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        },
+        {
+            "name": "ButtonDisabledComponent",
+            "id": "component-ButtonDisabledComponent-08149394bbd9dbd2d50d65e9a92b7cbac68e072764309fc410968d2ef7c91352a365dc0e14dd6193f13ab6eaa25606e8f505fc0a1c17097427aa69d168736ab8",
+            "file": "src/stories/components/button/examples/button-disabled.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-button-disabled",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "`<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Submit\" icon=\"ti ti-check\" [disabled]=\"true\"/>\n  </div>\n</div>\n`",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "Button"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\nimport { StoryObj } from '@storybook/angular';\n\nconst template = `\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Submit\" icon=\"ti ti-check\" [disabled]=\"true\"/>\n  </div>\n</div>\n`;\nconst styles = '';\n\n@Component({\n  selector: 'app-button-disabled',\n  standalone: true,\n  imports: [Button],\n  template,\n  styles\n})\nexport class ButtonDisabledComponent {}\n\nexport const Disabled: StoryObj = {\n  render: () => ({\n    template: `<app-button-disabled></app-button-disabled>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Disabled кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-disabled',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonDisabledComponent {}\n        `\n      }\n    }\n  }\n};\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        },
+        {
+            "name": "ButtonIconComponent",
+            "id": "component-ButtonIconComponent-553ddfe0086eec00020f592a5e46510ee6019a96420a18f0fc74e8ac183c5cd0e7ec864d369e6d9f3b378c09c5553bd2f92f8a6c407390fe601668ef0e6909ca",
+            "file": "src/stories/components/button/examples/button-icon.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-button-icon",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "`<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button icon=\"ti ti-check\" />\n    <p-button label=\"Submit\" icon=\"ti ti-check\" />\n    <p-button label=\"Submit\" icon=\"ti ti-check\" iconPos=\"right\" />\n  </div>\n</div>\n`",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "Button"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\nimport { StoryObj } from '@storybook/angular';\n\nconst template = `\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button icon=\"ti ti-check\" />\n    <p-button label=\"Submit\" icon=\"ti ti-check\" />\n    <p-button label=\"Submit\" icon=\"ti ti-check\" iconPos=\"right\" />\n  </div>\n</div>\n`;\nconst styles = '';\n\n@Component({\n  selector: 'app-button-icon',\n  standalone: true,\n  imports: [Button],\n  template,\n  styles\n})\nexport class ButtonIconComponent {}\n\nexport const Icon: StoryObj = {\n  render: () => ({\n    template: `<app-button-icon></app-button-icon>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопки с иконками'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-icon',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonIconComponent {}\n        `\n      }\n    }\n  }\n};\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        },
+        {
+            "name": "ButtonLoadingComponent",
+            "id": "component-ButtonLoadingComponent-747831019d46f2ad5ee976a755845a807fe3d6fce93323c22753c42a300535885ea9570f93c580b2377de7ec8a16386caea5d52b5d8c5d87cf9ba97198870ace",
+            "file": "src/stories/components/button/examples/button-loading.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-button-loading",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "`<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Submit\" icon=\"ti ti-check\" [loading]=\"true\"/>\n  </div>\n</div>\n`",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "Button"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\nimport { StoryObj } from '@storybook/angular';\n\nconst template = `\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Submit\" icon=\"ti ti-check\" [loading]=\"true\"/>\n  </div>\n</div>\n`;\nconst styles = '';\n\n@Component({\n  selector: 'app-button-loading',\n  standalone: true,\n  imports: [Button],\n  template,\n  styles\n})\nexport class ButtonLoadingComponent {}\n\nexport const Loading: StoryObj = {\n  render: () => ({\n    template: `<app-button-loading></app-button-loading>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопка в состоянии загрузки'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-loading',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonLoadingComponent {}\n        `\n      }\n    }\n  }\n};\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        },
+        {
+            "name": "ButtonOutlinedComponent",
+            "id": "component-ButtonOutlinedComponent-2f780c950280808a263be91edeaa56e63eedc39495be6eca8bb7dcea5d56a09aea77d6cecdb9341715d1e1f7c582df95b46fd1321497a1536e21b716244a4a5a",
+            "file": "src/stories/components/button/examples/button-outlined.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-button-outlined",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "`<div class=\"bg-surface-ground p-4\">\n  <p-button label=\"Outlined button\" [outlined]=\"true\">\n  </p-button>\n</div>`",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "Button"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\nimport { StoryObj } from '@storybook/angular';\n\nconst template = `\n<div class=\"bg-surface-ground p-4\">\n  <p-button label=\"Outlined button\" [outlined]=\"true\">\n  </p-button>\n</div>`;\nconst styles = '';\n\n@Component({\n  selector: 'app-button-outlined',\n  standalone: true,\n  imports: [Button],\n  template,\n  styles\n})\nexport class ButtonOutlinedComponent {}\n\nexport const Outlined: StoryObj = {\n  render: () => ({\n    template: `<app-button-outlined></app-button-outlined>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Outlined кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-outlined',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonOutlinedComponent {}\n        `\n      }\n    }\n  }\n};\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        },
+        {
+            "name": "ButtonRoundedComponent",
+            "id": "component-ButtonRoundedComponent-75651107f6304e710142aef6f4f68ec0f1069847af847d954b7de576ea710779cec3f802adc8586bc9683100e14432e4c15d5d58fa2f7204d7e2e2d034db308a",
+            "file": "src/stories/components/button/examples/button-rounded.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-button-rounded",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "`<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Primary\" [rounded]=\"true\" />\n  </div>\n</div>\n`",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "Button"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\nimport { StoryObj } from '@storybook/angular';\n\nconst template = `\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Primary\" [rounded]=\"true\" />\n  </div>\n</div>\n`;\nconst styles = '';\n\n@Component({\n  selector: 'app-button-rounded',\n  standalone: true,\n  imports: [Button],\n  template,\n  styles\n})\nexport class ButtonRoundedComponent {}\n\nexport const Rounded: StoryObj = {\n  render: () => ({\n    template: `<app-button-rounded></app-button-rounded>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Скругленная кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-rounded',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonRoundedComponent {}\n        `\n      }\n    }\n  }\n};\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        },
+        {
+            "name": "ButtonSeverityComponent",
+            "id": "component-ButtonSeverityComponent-bceea86d34a4ff6c3637b6c4b0dfe628631cbeeacb8537089aaeb500fef8c51fbad4689c06a2de3d51f4f3510bc7520fd634f48cb91995dc93e187ab3099c6e5",
+            "file": "src/stories/components/button/examples/button-severity.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-button-severity",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "`<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex flex-col gap-4\">\n    <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\"/>\n      <p-button label=\"Danger\" severity=\"danger\" />\n      <p-button label=\"Warning\" severity=\"warn\" />\n      <p-button label=\"Success\" severity=\"success\" />\n      <p-button label=\"Info\" severity=\"info\" />\n      <p-button label=\"Help\" severity=\"help\" />\n    </div>\n\n      <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\" [rounded]=\"true\"/>\n      <p-button label=\"Danger\" [rounded]=\"true\" severity=\"danger\" />\n      <p-button label=\"Warning\" [rounded]=\"true\" severity=\"warn\" />\n      <p-button label=\"Success\" [rounded]=\"true\" severity=\"success\" />\n      <p-button label=\"Info\" [rounded]=\"true\" severity=\"info\" />\n      <p-button label=\"Help\" [rounded]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\" [text]=\"true\"/>\n      <p-button label=\"Danger\" [text]=\"true\" severity=\"danger\" />\n      <p-button label=\"Warning\" [text]=\"true\" severity=\"warn\" />\n      <p-button label=\"Success\" [text]=\"true\" severity=\"success\" />\n      <p-button label=\"Info\" [text]=\"true\" severity=\"info\" />\n      <p-button label=\"Help\" [text]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" />\n      <p-button icon=\"ti ti-file-alert\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" severity=\"help\" />\n    </div>\n\n     <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [outlined]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [outlined]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [outlined]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [outlined]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [outlined]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [outlined]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" [outlined]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" [outlined]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" [outlined]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" [outlined]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" [outlined]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" [outlined]=\"true\" severity=\"help\" />\n    </div>\n\n      <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" [text]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" [text]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" [text]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" [text]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" [text]=\"true\" severity=\"help\" />\n    </div>\n  </div>\n</div>\n`",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "Button"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\nimport { StoryObj } from '@storybook/angular';\n\nconst template = `\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex flex-col gap-4\">\n    <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\"/>\n      <p-button label=\"Danger\" severity=\"danger\" />\n      <p-button label=\"Warning\" severity=\"warn\" />\n      <p-button label=\"Success\" severity=\"success\" />\n      <p-button label=\"Info\" severity=\"info\" />\n      <p-button label=\"Help\" severity=\"help\" />\n    </div>\n\n      <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\" [rounded]=\"true\"/>\n      <p-button label=\"Danger\" [rounded]=\"true\" severity=\"danger\" />\n      <p-button label=\"Warning\" [rounded]=\"true\" severity=\"warn\" />\n      <p-button label=\"Success\" [rounded]=\"true\" severity=\"success\" />\n      <p-button label=\"Info\" [rounded]=\"true\" severity=\"info\" />\n      <p-button label=\"Help\" [rounded]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\" [text]=\"true\"/>\n      <p-button label=\"Danger\" [text]=\"true\" severity=\"danger\" />\n      <p-button label=\"Warning\" [text]=\"true\" severity=\"warn\" />\n      <p-button label=\"Success\" [text]=\"true\" severity=\"success\" />\n      <p-button label=\"Info\" [text]=\"true\" severity=\"info\" />\n      <p-button label=\"Help\" [text]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" />\n      <p-button icon=\"ti ti-file-alert\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" severity=\"help\" />\n    </div>\n\n     <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [outlined]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [outlined]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [outlined]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [outlined]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [outlined]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [outlined]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" [outlined]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" [outlined]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" [outlined]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" [outlined]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" [outlined]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" [outlined]=\"true\" severity=\"help\" />\n    </div>\n\n      <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" [text]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" [text]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" [text]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" [text]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" [text]=\"true\" severity=\"help\" />\n    </div>\n  </div>\n</div>\n`;\nconst styles = '';\n\n@Component({\n  selector: 'app-button-severity',\n  standalone: true,\n  imports: [Button],\n  template,\n  styles\n})\nexport class ButtonSeverityComponent {}\n\nexport const Severity: StoryObj = {\n  render: () => ({\n    template: `<app-button-severity></app-button-severity>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопки с разным Severity'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-severity',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonSeverityComponent {}\n        `\n      }\n    }\n  }\n};\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        },
+        {
+            "name": "ButtonSizesComponent",
+            "id": "component-ButtonSizesComponent-cd17928f6a96e0c2d4319065effc31fa54d37723ef053a6ee42aaac52a553f33c495e79ccd49b3caa116ad0a761224fecf5b2f4bec5e1683dd8aa5f78cc53746",
+            "file": "src/stories/components/button/examples/button-sizes.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-button-sizes",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "`<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3 items-end\">\n    <p-button label=\"Small\" icon=\"ti ti-check\" size=\"small\" />\n    <p-button label=\"Normal\" icon=\"ti ti-check\" />\n    <p-button label=\"Large\" icon=\"ti ti-check\" size=\"large\" />\n  <!--  <p-button label=\"xLarge\" icon=\"pi pi-check\" size=\"xlarge\" /> для xlarge необходимо перейти на class, т.к. опции xlarge у компонента нет.-->\n  </div>\n</div>\n`",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "Button"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { StoryObj } from '@storybook/angular';\nimport { Button } from 'primeng/button';\n\nconst template = `\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3 items-end\">\n    <p-button label=\"Small\" icon=\"ti ti-check\" size=\"small\" />\n    <p-button label=\"Normal\" icon=\"ti ti-check\" />\n    <p-button label=\"Large\" icon=\"ti ti-check\" size=\"large\" />\n  <!--  <p-button label=\"xLarge\" icon=\"pi pi-check\" size=\"xlarge\" /> для xlarge необходимо перейти на class, т.к. опции xlarge у компонента нет.-->\n  </div>\n</div>\n`;\n\nconst styles = '';\n\n@Component({\n  selector: 'app-button-sizes',\n  standalone: true,\n  imports: [Button],\n  template,\n  styles\n})\nexport class ButtonSizesComponent {}\n\nexport const Sizes: StoryObj = {\n  render: () => ({\n    template: `<app-button-sizes></app-button-sizes>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопки разных размеров'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-sizes',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonSizesComponent {}\n        `\n      }\n    }\n  }\n};\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        },
+        {
+            "name": "ButtonTextComponent",
+            "id": "component-ButtonTextComponent-9ec9afa71413a44df8de13324a927aa6ce9c0992a9a509345a5081da321472dde3882151e6e56589f4e751c0c6091d49fb74c41e9cc549be31a6e283b2f0d5c1",
+            "file": "src/stories/components/button/examples/button-text.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-button-text",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "`<div class=\"bg-surface-ground p-4\">\n  <p-button label=\"Primary text\" [text]=\"true\"></p-button>\n</div>\n`",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "Button"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\nimport { StoryObj } from '@storybook/angular';\n\nconst template = `\n<div class=\"bg-surface-ground p-4\">\n  <p-button label=\"Primary text\" [text]=\"true\"></p-button>\n</div>\n`;\nconst styles = '';\n\n@Component({\n  selector: 'app-button-text',\n  standalone: true,\n  imports: [Button],\n  template,\n  styles\n})\nexport class ButtonTextComponent {}\n\nexport const Text: StoryObj = {\n  render: () => ({\n    template: `<app-button-text></app-button-text>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Text кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-text',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonTextComponent {}\n        `\n      }\n    }\n  }\n};\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        }
+    ],
+    "modules": [],
+    "miscellaneous": {
+        "variables": [
+            {
+                "name": "Badge",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-badge.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj",
+                "defaultValue": "{\n  render: () => ({\n    template: `<app-button-badge></app-button-badge>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Badge кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-text',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonBadgeComponent {}\n        `\n      }\n    }\n  }\n}"
+            },
+            {
+                "name": "Base",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-base.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj",
+                "defaultValue": "{\n  render: (args) => ({\n    props: args,\n    template: `\n<app-button-base\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [loading]=\"loading\"\n  [size]=\"size\"\n  [rounded]=\"rounded\"\n  [outlined]=\"outlined\"\n  [text]=\"text\"\n  [icon]=\"icon\"\n  [iconPos]=\"iconPos\"\n  [badge]=\"badge\"\n  [severity]=\"severity\"\n>\n</app-button-base>`\n  }),\n  args: {\n    label: 'Base button',\n    disabled: false,\n    loading: false,\n    size: null,\n    rounded: false,\n    outlined: false,\n    text: false,\n    icon: '',\n    iconPos: null,\n    badge: '',\n    severity: null\n  },\n  argTypes: {\n    label: {\n      description: 'Текст кнопки.'\n    },\n    disabled: {\n      description: 'При наличии указывает, что компонент должен быть отключен.'\n    },\n    loading: {\n      description: 'Находится ли кнопка в состоянии загрузки.'\n    },\n    // TODO Добавить xlarge после фикса в либе.\n    size: {\n      description: 'Определяет размер кнопки.',\n      control: { type: 'select' },\n      options: [null, 'small', 'large'],\n      table: {\n        type: { summary: `'small' | 'large' | null` } // <-- тип в документации\n      }\n    },\n    rounded: {\n      description: 'При наличии делает кнопку с закругленными краями.'\n    },\n    outlined: {\n      description: 'При наличии делает кнопку с контуром без фона.'\n    },\n    text: {\n      description: 'При наличии делает кнопку текстовой без фона и границ.'\n    },\n    icon: {\n      description: 'Имя иконки для отображения в кнопке.'\n    },\n    iconPos: {\n      description: 'Позиция иконки относительно текста.',\n      control: { type: 'select' },\n      options: [null, 'left', 'right'],\n      table: {\n        type: { summary: `'left' | 'right' | null` }\n      }\n    },\n    badge: {\n      description: 'Текст для отображения в виде бейджа на кнопке.'\n    },\n    severity: {\n      description: 'Определяет цветовую схему кнопки.',\n      control: { type: 'select' },\n      options: [null, 'success', 'info', 'warn', 'primary', 'help', 'danger'],\n      table: {\n        type: {\n          summary: `'success' | 'info' | 'warn' | 'primary' | 'help' | 'danger' | null`\n        }\n      }\n    }\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: 'Стандартная кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-base',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonBaseComponent {\n  @Input() label = '';\n  @Input() disabled = false;\n  @Input() loading = false;\n  @Input() size: 'small' | 'large' | null = null;\n  @Input() rounded = false;\n}\n        `\n      }\n    }\n  }\n}"
+            },
+            {
+                "name": "Disabled",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-disabled.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj",
+                "defaultValue": "{\n  render: () => ({\n    template: `<app-button-disabled></app-button-disabled>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Disabled кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-disabled',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonDisabledComponent {}\n        `\n      }\n    }\n  }\n}"
+            },
+            {
+                "name": "Icon",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-icon.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj",
+                "defaultValue": "{\n  render: () => ({\n    template: `<app-button-icon></app-button-icon>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопки с иконками'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-icon',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonIconComponent {}\n        `\n      }\n    }\n  }\n}"
+            },
+            {
+                "name": "Loading",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-loading.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj",
+                "defaultValue": "{\n  render: () => ({\n    template: `<app-button-loading></app-button-loading>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопка в состоянии загрузки'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-loading',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonLoadingComponent {}\n        `\n      }\n    }\n  }\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/button.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta",
+                "defaultValue": "{\n  title: 'PrimeNG/Button',\n  tags: ['autodocs'],\n  decorators: [\n    moduleMetadata({\n      imports: [\n        ButtonModule,\n        ButtonBaseComponent,\n        ButtonSizesComponent,\n        ButtonRoundedComponent,\n        ButtonOutlinedComponent,\n        ButtonTextComponent,\n        ButtonIconComponent,\n        ButtonDisabledComponent,\n        ButtonLoadingComponent,\n        ButtonBadgeComponent,\n        ButtonSeverityComponent\n      ]\n    })\n  ],\n  parameters: {\n    docs: {\n      description: {\n        component: 'Компонент кнопки с различными стилями, состояниями и иконками'\n      }\n    }\n  }\n}"
+            },
+            {
+                "name": "Outlined",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-outlined.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj",
+                "defaultValue": "{\n  render: () => ({\n    template: `<app-button-outlined></app-button-outlined>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Outlined кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-outlined',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonOutlinedComponent {}\n        `\n      }\n    }\n  }\n}"
+            },
+            {
+                "name": "Rounded",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-rounded.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj",
+                "defaultValue": "{\n  render: () => ({\n    template: `<app-button-rounded></app-button-rounded>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Скругленная кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-rounded',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonRoundedComponent {}\n        `\n      }\n    }\n  }\n}"
+            },
+            {
+                "name": "Severity",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-severity.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj",
+                "defaultValue": "{\n  render: () => ({\n    template: `<app-button-severity></app-button-severity>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопки с разным Severity'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-severity',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonSeverityComponent {}\n        `\n      }\n    }\n  }\n}"
+            },
+            {
+                "name": "Sizes",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-sizes.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj",
+                "defaultValue": "{\n  render: () => ({\n    template: `<app-button-sizes></app-button-sizes>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопки разных размеров'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-sizes',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonSizesComponent {}\n        `\n      }\n    }\n  }\n}"
+            },
+            {
+                "name": "styles",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-badge.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "''"
+            },
+            {
+                "name": "styles",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-base.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "``"
+            },
+            {
+                "name": "styles",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-disabled.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "''"
+            },
+            {
+                "name": "styles",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-icon.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "''"
+            },
+            {
+                "name": "styles",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-loading.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "''"
+            },
+            {
+                "name": "styles",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-outlined.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "''"
+            },
+            {
+                "name": "styles",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-rounded.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "''"
+            },
+            {
+                "name": "styles",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-severity.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "''"
+            },
+            {
+                "name": "styles",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-sizes.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "''"
+            },
+            {
+                "name": "styles",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-text.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "''"
+            },
+            {
+                "name": "template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-badge.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3 items-end\">\n    <p-button label=\"Emails\" badge=\"8\" size=\"small\" />\n\n    <p-button label=\"Emails\" badge=\"8\" />\n\n    <p-button label=\"Emails\" badge=\"8\" size=\"large\" />\n\n    <p-button\n        label=\"Messages\"\n        icon=\"ti ti-users\"\n        badge=\"2\"\n        badgeClass=\"p-badge-contrast\"\n        outlined=\"true\" />\n  </div>\n</div>\n`"
+            },
+            {
+                "name": "template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-base.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <p-button\n    [label]=\"label\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    [size]=\"size\"\n    [rounded]=\"rounded\"\n    [outlined]=\"outlined\"\n    [text]=\"text\"\n    [icon]=\"icon\"\n    [iconPos]=\"iconPos\"\n    [badge]=\"badge\"\n    [severity]=\"severity\"\n  >\n  </p-button>\n</div>\n`"
+            },
+            {
+                "name": "template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-disabled.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Submit\" icon=\"ti ti-check\" [disabled]=\"true\"/>\n  </div>\n</div>\n`"
+            },
+            {
+                "name": "template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-icon.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button icon=\"ti ti-check\" />\n    <p-button label=\"Submit\" icon=\"ti ti-check\" />\n    <p-button label=\"Submit\" icon=\"ti ti-check\" iconPos=\"right\" />\n  </div>\n</div>\n`"
+            },
+            {
+                "name": "template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-loading.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Submit\" icon=\"ti ti-check\" [loading]=\"true\"/>\n  </div>\n</div>\n`"
+            },
+            {
+                "name": "template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-outlined.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <p-button label=\"Outlined button\" [outlined]=\"true\">\n  </p-button>\n</div>`"
+            },
+            {
+                "name": "template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-rounded.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Primary\" [rounded]=\"true\" />\n  </div>\n</div>\n`"
+            },
+            {
+                "name": "template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-severity.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex flex-col gap-4\">\n    <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\"/>\n      <p-button label=\"Danger\" severity=\"danger\" />\n      <p-button label=\"Warning\" severity=\"warn\" />\n      <p-button label=\"Success\" severity=\"success\" />\n      <p-button label=\"Info\" severity=\"info\" />\n      <p-button label=\"Help\" severity=\"help\" />\n    </div>\n\n      <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\" [rounded]=\"true\"/>\n      <p-button label=\"Danger\" [rounded]=\"true\" severity=\"danger\" />\n      <p-button label=\"Warning\" [rounded]=\"true\" severity=\"warn\" />\n      <p-button label=\"Success\" [rounded]=\"true\" severity=\"success\" />\n      <p-button label=\"Info\" [rounded]=\"true\" severity=\"info\" />\n      <p-button label=\"Help\" [rounded]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\" [text]=\"true\"/>\n      <p-button label=\"Danger\" [text]=\"true\" severity=\"danger\" />\n      <p-button label=\"Warning\" [text]=\"true\" severity=\"warn\" />\n      <p-button label=\"Success\" [text]=\"true\" severity=\"success\" />\n      <p-button label=\"Info\" [text]=\"true\" severity=\"info\" />\n      <p-button label=\"Help\" [text]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" />\n      <p-button icon=\"ti ti-file-alert\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" severity=\"help\" />\n    </div>\n\n     <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [outlined]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [outlined]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [outlined]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [outlined]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [outlined]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [outlined]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" [outlined]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" [outlined]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" [outlined]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" [outlined]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" [outlined]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" [outlined]=\"true\" severity=\"help\" />\n    </div>\n\n      <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" [text]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" [text]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" [text]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" [text]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" [text]=\"true\" severity=\"help\" />\n    </div>\n  </div>\n</div>\n`"
+            },
+            {
+                "name": "template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-sizes.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3 items-end\">\n    <p-button label=\"Small\" icon=\"ti ti-check\" size=\"small\" />\n    <p-button label=\"Normal\" icon=\"ti ti-check\" />\n    <p-button label=\"Large\" icon=\"ti ti-check\" size=\"large\" />\n  <!--  <p-button label=\"xLarge\" icon=\"pi pi-check\" size=\"xlarge\" /> для xlarge необходимо перейти на class, т.к. опции xlarge у компонента нет.-->\n  </div>\n</div>\n`"
+            },
+            {
+                "name": "template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-text.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <p-button label=\"Primary text\" [text]=\"true\"></p-button>\n</div>\n`"
+            },
+            {
+                "name": "Text",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/stories/components/button/examples/button-text.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj",
+                "defaultValue": "{\n  render: () => ({\n    template: `<app-button-text></app-button-text>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Text кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-text',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonTextComponent {}\n        `\n      }\n    }\n  }\n}"
+            }
+        ],
+        "functions": [],
+        "typealiases": [],
+        "enumerations": [],
+        "groupedVariables": {
+            "src/stories/components/button/examples/button-badge.component.ts": [
+                {
+                    "name": "Badge",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-badge.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj",
+                    "defaultValue": "{\n  render: () => ({\n    template: `<app-button-badge></app-button-badge>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Badge кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-text',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonBadgeComponent {}\n        `\n      }\n    }\n  }\n}"
+                },
+                {
+                    "name": "styles",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-badge.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "''"
+                },
+                {
+                    "name": "template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-badge.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3 items-end\">\n    <p-button label=\"Emails\" badge=\"8\" size=\"small\" />\n\n    <p-button label=\"Emails\" badge=\"8\" />\n\n    <p-button label=\"Emails\" badge=\"8\" size=\"large\" />\n\n    <p-button\n        label=\"Messages\"\n        icon=\"ti ti-users\"\n        badge=\"2\"\n        badgeClass=\"p-badge-contrast\"\n        outlined=\"true\" />\n  </div>\n</div>\n`"
+                }
+            ],
+            "src/stories/components/button/examples/button-base.component.ts": [
+                {
+                    "name": "Base",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-base.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj",
+                    "defaultValue": "{\n  render: (args) => ({\n    props: args,\n    template: `\n<app-button-base\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [loading]=\"loading\"\n  [size]=\"size\"\n  [rounded]=\"rounded\"\n  [outlined]=\"outlined\"\n  [text]=\"text\"\n  [icon]=\"icon\"\n  [iconPos]=\"iconPos\"\n  [badge]=\"badge\"\n  [severity]=\"severity\"\n>\n</app-button-base>`\n  }),\n  args: {\n    label: 'Base button',\n    disabled: false,\n    loading: false,\n    size: null,\n    rounded: false,\n    outlined: false,\n    text: false,\n    icon: '',\n    iconPos: null,\n    badge: '',\n    severity: null\n  },\n  argTypes: {\n    label: {\n      description: 'Текст кнопки.'\n    },\n    disabled: {\n      description: 'При наличии указывает, что компонент должен быть отключен.'\n    },\n    loading: {\n      description: 'Находится ли кнопка в состоянии загрузки.'\n    },\n    // TODO Добавить xlarge после фикса в либе.\n    size: {\n      description: 'Определяет размер кнопки.',\n      control: { type: 'select' },\n      options: [null, 'small', 'large'],\n      table: {\n        type: { summary: `'small' | 'large' | null` } // <-- тип в документации\n      }\n    },\n    rounded: {\n      description: 'При наличии делает кнопку с закругленными краями.'\n    },\n    outlined: {\n      description: 'При наличии делает кнопку с контуром без фона.'\n    },\n    text: {\n      description: 'При наличии делает кнопку текстовой без фона и границ.'\n    },\n    icon: {\n      description: 'Имя иконки для отображения в кнопке.'\n    },\n    iconPos: {\n      description: 'Позиция иконки относительно текста.',\n      control: { type: 'select' },\n      options: [null, 'left', 'right'],\n      table: {\n        type: { summary: `'left' | 'right' | null` }\n      }\n    },\n    badge: {\n      description: 'Текст для отображения в виде бейджа на кнопке.'\n    },\n    severity: {\n      description: 'Определяет цветовую схему кнопки.',\n      control: { type: 'select' },\n      options: [null, 'success', 'info', 'warn', 'primary', 'help', 'danger'],\n      table: {\n        type: {\n          summary: `'success' | 'info' | 'warn' | 'primary' | 'help' | 'danger' | null`\n        }\n      }\n    }\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: 'Стандартная кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-base',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonBaseComponent {\n  @Input() label = '';\n  @Input() disabled = false;\n  @Input() loading = false;\n  @Input() size: 'small' | 'large' | null = null;\n  @Input() rounded = false;\n}\n        `\n      }\n    }\n  }\n}"
+                },
+                {
+                    "name": "styles",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-base.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "``"
+                },
+                {
+                    "name": "template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-base.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <p-button\n    [label]=\"label\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    [size]=\"size\"\n    [rounded]=\"rounded\"\n    [outlined]=\"outlined\"\n    [text]=\"text\"\n    [icon]=\"icon\"\n    [iconPos]=\"iconPos\"\n    [badge]=\"badge\"\n    [severity]=\"severity\"\n  >\n  </p-button>\n</div>\n`"
+                }
+            ],
+            "src/stories/components/button/examples/button-disabled.component.ts": [
+                {
+                    "name": "Disabled",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-disabled.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj",
+                    "defaultValue": "{\n  render: () => ({\n    template: `<app-button-disabled></app-button-disabled>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Disabled кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-disabled',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonDisabledComponent {}\n        `\n      }\n    }\n  }\n}"
+                },
+                {
+                    "name": "styles",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-disabled.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "''"
+                },
+                {
+                    "name": "template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-disabled.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Submit\" icon=\"ti ti-check\" [disabled]=\"true\"/>\n  </div>\n</div>\n`"
+                }
+            ],
+            "src/stories/components/button/examples/button-icon.component.ts": [
+                {
+                    "name": "Icon",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-icon.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj",
+                    "defaultValue": "{\n  render: () => ({\n    template: `<app-button-icon></app-button-icon>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопки с иконками'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-icon',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonIconComponent {}\n        `\n      }\n    }\n  }\n}"
+                },
+                {
+                    "name": "styles",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-icon.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "''"
+                },
+                {
+                    "name": "template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-icon.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button icon=\"ti ti-check\" />\n    <p-button label=\"Submit\" icon=\"ti ti-check\" />\n    <p-button label=\"Submit\" icon=\"ti ti-check\" iconPos=\"right\" />\n  </div>\n</div>\n`"
+                }
+            ],
+            "src/stories/components/button/examples/button-loading.component.ts": [
+                {
+                    "name": "Loading",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-loading.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj",
+                    "defaultValue": "{\n  render: () => ({\n    template: `<app-button-loading></app-button-loading>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопка в состоянии загрузки'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-loading',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonLoadingComponent {}\n        `\n      }\n    }\n  }\n}"
+                },
+                {
+                    "name": "styles",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-loading.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "''"
+                },
+                {
+                    "name": "template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-loading.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Submit\" icon=\"ti ti-check\" [loading]=\"true\"/>\n  </div>\n</div>\n`"
+                }
+            ],
+            "src/stories/components/button/button.stories.ts": [
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta",
+                    "defaultValue": "{\n  title: 'PrimeNG/Button',\n  tags: ['autodocs'],\n  decorators: [\n    moduleMetadata({\n      imports: [\n        ButtonModule,\n        ButtonBaseComponent,\n        ButtonSizesComponent,\n        ButtonRoundedComponent,\n        ButtonOutlinedComponent,\n        ButtonTextComponent,\n        ButtonIconComponent,\n        ButtonDisabledComponent,\n        ButtonLoadingComponent,\n        ButtonBadgeComponent,\n        ButtonSeverityComponent\n      ]\n    })\n  ],\n  parameters: {\n    docs: {\n      description: {\n        component: 'Компонент кнопки с различными стилями, состояниями и иконками'\n      }\n    }\n  }\n}"
+                }
+            ],
+            "src/stories/components/button/examples/button-outlined.component.ts": [
+                {
+                    "name": "Outlined",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-outlined.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj",
+                    "defaultValue": "{\n  render: () => ({\n    template: `<app-button-outlined></app-button-outlined>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Outlined кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-outlined',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonOutlinedComponent {}\n        `\n      }\n    }\n  }\n}"
+                },
+                {
+                    "name": "styles",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-outlined.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "''"
+                },
+                {
+                    "name": "template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-outlined.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <p-button label=\"Outlined button\" [outlined]=\"true\">\n  </p-button>\n</div>`"
+                }
+            ],
+            "src/stories/components/button/examples/button-rounded.component.ts": [
+                {
+                    "name": "Rounded",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-rounded.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj",
+                    "defaultValue": "{\n  render: () => ({\n    template: `<app-button-rounded></app-button-rounded>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Скругленная кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-rounded',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonRoundedComponent {}\n        `\n      }\n    }\n  }\n}"
+                },
+                {
+                    "name": "styles",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-rounded.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "''"
+                },
+                {
+                    "name": "template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-rounded.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3\">\n    <p-button label=\"Primary\" [rounded]=\"true\" />\n  </div>\n</div>\n`"
+                }
+            ],
+            "src/stories/components/button/examples/button-severity.component.ts": [
+                {
+                    "name": "Severity",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-severity.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj",
+                    "defaultValue": "{\n  render: () => ({\n    template: `<app-button-severity></app-button-severity>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопки с разным Severity'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-severity',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonSeverityComponent {}\n        `\n      }\n    }\n  }\n}"
+                },
+                {
+                    "name": "styles",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-severity.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "''"
+                },
+                {
+                    "name": "template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-severity.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex flex-col gap-4\">\n    <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\"/>\n      <p-button label=\"Danger\" severity=\"danger\" />\n      <p-button label=\"Warning\" severity=\"warn\" />\n      <p-button label=\"Success\" severity=\"success\" />\n      <p-button label=\"Info\" severity=\"info\" />\n      <p-button label=\"Help\" severity=\"help\" />\n    </div>\n\n      <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\" [rounded]=\"true\"/>\n      <p-button label=\"Danger\" [rounded]=\"true\" severity=\"danger\" />\n      <p-button label=\"Warning\" [rounded]=\"true\" severity=\"warn\" />\n      <p-button label=\"Success\" [rounded]=\"true\" severity=\"success\" />\n      <p-button label=\"Info\" [rounded]=\"true\" severity=\"info\" />\n      <p-button label=\"Help\" [rounded]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button label=\"Primary\" [text]=\"true\"/>\n      <p-button label=\"Danger\" [text]=\"true\" severity=\"danger\" />\n      <p-button label=\"Warning\" [text]=\"true\" severity=\"warn\" />\n      <p-button label=\"Success\" [text]=\"true\" severity=\"success\" />\n      <p-button label=\"Info\" [text]=\"true\" severity=\"info\" />\n      <p-button label=\"Help\" [text]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" />\n      <p-button icon=\"ti ti-file-alert\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" severity=\"help\" />\n    </div>\n\n     <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [outlined]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [outlined]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [outlined]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [outlined]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [outlined]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [outlined]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" severity=\"help\" />\n    </div>\n\n    <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" [outlined]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" [outlined]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" [outlined]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" [outlined]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" [outlined]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" [outlined]=\"true\" severity=\"help\" />\n    </div>\n\n      <div class=\"flex gap-3 items-end\">\n      <p-button icon=\"ti ti-check\" [rounded]=\"true\" [text]=\"true\" />\n      <p-button icon=\"ti ti-file-alert\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n      <p-button icon=\"ti ti-bell\" [rounded]=\"true\" [text]=\"true\" severity=\"warn\" />\n      <p-button icon=\"ti ti-search\" [rounded]=\"true\" [text]=\"true\" severity=\"success\" />\n      <p-button icon=\"ti ti-user\" [rounded]=\"true\" [text]=\"true\" severity=\"info\" />\n      <p-button icon=\"ti ti-heart\" [rounded]=\"true\" [text]=\"true\" severity=\"help\" />\n    </div>\n  </div>\n</div>\n`"
+                }
+            ],
+            "src/stories/components/button/examples/button-sizes.component.ts": [
+                {
+                    "name": "Sizes",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-sizes.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj",
+                    "defaultValue": "{\n  render: () => ({\n    template: `<app-button-sizes></app-button-sizes>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Кнопки разных размеров'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-sizes',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonSizesComponent {}\n        `\n      }\n    }\n  }\n}"
+                },
+                {
+                    "name": "styles",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-sizes.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "''"
+                },
+                {
+                    "name": "template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-sizes.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <div class=\"flex gap-3 items-end\">\n    <p-button label=\"Small\" icon=\"ti ti-check\" size=\"small\" />\n    <p-button label=\"Normal\" icon=\"ti ti-check\" />\n    <p-button label=\"Large\" icon=\"ti ti-check\" size=\"large\" />\n  <!--  <p-button label=\"xLarge\" icon=\"pi pi-check\" size=\"xlarge\" /> для xlarge необходимо перейти на class, т.к. опции xlarge у компонента нет.-->\n  </div>\n</div>\n`"
+                }
+            ],
+            "src/stories/components/button/examples/button-text.component.ts": [
+                {
+                    "name": "styles",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-text.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "''"
+                },
+                {
+                    "name": "template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-text.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "`\n<div class=\"bg-surface-ground p-4\">\n  <p-button label=\"Primary text\" [text]=\"true\"></p-button>\n</div>\n`"
+                },
+                {
+                    "name": "Text",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/stories/components/button/examples/button-text.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj",
+                    "defaultValue": "{\n  render: () => ({\n    template: `<app-button-text></app-button-text>`\n  }),\n  parameters: {\n    docs: {\n      description: {\n        story: 'Text кнопка'\n      },\n      source: {\n        language: 'ts',\n        code: `\nimport { Component } from '@angular/core';\nimport { Button } from 'primeng/button';\n\n@Component({\n  selector: 'app-button-text',\n  standalone: true,\n  imports: [\n    Button\n  ],\n  template: ${template},\n  styles: ${styles}\n})\nexport class ButtonTextComponent {}\n        `\n      }\n    }\n  }\n}"
+                }
+            ]
+        },
+        "groupedFunctions": {},
+        "groupedEnumerations": {},
+        "groupedTypeAliases": {}
+    },
+    "routes": {
+        "name": "<root>",
+        "kind": "module",
+        "children": []
+    },
+    "coverage": {
+        "count": 0,
+        "status": "low",
+        "files": [
+            {
+                "filePath": "src/stories/components/button/button.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "meta",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-badge.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ButtonBadgeComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-badge.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Badge",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-badge.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "styles",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-badge.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-base.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ButtonBaseComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/12",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-base.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Base",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-base.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "styles",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-base.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-disabled.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ButtonDisabledComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-disabled.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Disabled",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-disabled.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "styles",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-disabled.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-icon.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ButtonIconComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-icon.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Icon",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-icon.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "styles",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-icon.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-loading.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ButtonLoadingComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-loading.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Loading",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-loading.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "styles",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-loading.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-outlined.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ButtonOutlinedComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-outlined.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Outlined",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-outlined.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "styles",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-outlined.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-rounded.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ButtonRoundedComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-rounded.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Rounded",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-rounded.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "styles",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-rounded.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-severity.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ButtonSeverityComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-severity.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Severity",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-severity.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "styles",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-severity.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-sizes.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ButtonSizesComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-sizes.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Sizes",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-sizes.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "styles",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-sizes.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-text.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ButtonTextComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-text.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "styles",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-text.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/stories/components/button/examples/button-text.component.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Text",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/assets/fonts/tt-fellows/TT_Fellows_DemiBold.woff2 b/src/assets/fonts/tt-fellows/TT_Fellows_DemiBold.woff2
new file mode 100644
index 0000000..ec67015
Binary files /dev/null and b/src/assets/fonts/tt-fellows/TT_Fellows_DemiBold.woff2 differ
diff --git a/src/assets/fonts/tt-fellows/TT_Fellows_DemiBold_Italic.woff2 b/src/assets/fonts/tt-fellows/TT_Fellows_DemiBold_Italic.woff2
new file mode 100644
index 0000000..bf6d066
Binary files /dev/null and b/src/assets/fonts/tt-fellows/TT_Fellows_DemiBold_Italic.woff2 differ
diff --git a/src/assets/fonts/tt-fellows/TT_Fellows_Regular.woff2 b/src/assets/fonts/tt-fellows/TT_Fellows_Regular.woff2
new file mode 100644
index 0000000..c4c6736
Binary files /dev/null and b/src/assets/fonts/tt-fellows/TT_Fellows_Regular.woff2 differ
diff --git a/src/prime-preset/components/css/avatar.ts b/src/prime-preset/components/css/avatar.ts
new file mode 100644
index 0000000..b975a1b
--- /dev/null
+++ b/src/prime-preset/components/css/avatar.ts
@@ -0,0 +1,7 @@
+const css = ({ dt }: any) => `
+.p-avatar {
+  border: 0.07142857142857142rem solid ${dt('avatar.extend.borderColor')};
+}
+`;
+
+export default css;
diff --git a/src/prime-preset/components/css/breadcrumb.ts b/src/prime-preset/components/css/breadcrumb.ts
new file mode 100644
index 0000000..814fe91
--- /dev/null
+++ b/src/prime-preset/components/css/breadcrumb.ts
@@ -0,0 +1,7 @@
+const css = ({ dt }: any) => `
+.p-breadcrumb .p-breadcrumb-list .p-breadcrumb-item .p-breadcrumb-item-link:hover {
+  background: ${dt('breadcrumb.extend.hoverBackground')};
+}
+`;
+
+export default css;
diff --git a/src/prime-preset/components/css/button.ts b/src/prime-preset/components/css/button.ts
new file mode 100644
index 0000000..db2f57b
--- /dev/null
+++ b/src/prime-preset/components/css/button.ts
@@ -0,0 +1,66 @@
+const css = ({ dt }: any) => `
+.p-button.p-component .p-button-label {
+  font-family: ${dt('fonts.fontFamily.heading')};
+}
+
+.p-component.p-button:focus-visible {
+  outline: none;
+  box-shadow: ${dt('focusRing.shadow')};
+}
+
+.p-button .p-button-icon {
+  font-size: ${dt('fonts.fontSize.xl')};
+}
+
+.p-button.p-button-lg .p-button-icon {
+  font-size: ${dt('fonts.fontSize.2xl')};
+}
+
+.p-component.p-button-secondary:disabled {
+  color: ${dt('button.extend.disabledColor')};
+  background: ${dt('button.extend.disabledBackground')};
+  mix-blend-mode: unset;
+  opacity: 1;
+}
+
+.p-button-link.p-button {
+  padding: ${dt('button.extend.extLink.paddingY')} ${dt('button.extend.extLink.paddingX')};
+}
+
+.p-button.p-button-link:not(:disabled):hover {
+  color: ${dt('button.extend.extLink.colorHover')};
+}
+
+.p-button.p-button-link:not(:disabled):hover .p-button-label {
+  text-decoration: none;
+}
+
+.p-button-lg.p-button-icon-only.p-button-link {
+  width: ${dt('button.extend.extLink.lg.iconOnlyWidth')};
+  height: ${dt('button.extend.extLink.lg.iconOnlyWidth')};
+}
+
+.p-button-link.p-button-icon-only.p-button {
+  width: ${dt('button.extend.extLink.base.iconOnlyWidth')};
+  height: ${dt('button.extend.extLink.base.iconOnlyWidth')};
+}
+
+.p-button-link.p-button-icon-only.p-button-sm {
+  width: ${dt('button.extend.extLink.sm.iconOnlyWidth')};
+  height: ${dt('button.extend.extLink.sm.iconOnlyWidth')};
+}
+
+.p-button-lg.p-button-icon-only {
+  height: ${dt('button.root.lg.iconOnlyWidth')};
+}
+
+.p-button-icon-only {
+  height: ${dt('button.root.iconOnlyWidth')};
+}
+
+.p-button-sm.p-button-icon-only {
+  height: ${dt('button.root.sm.iconOnlyWidth')};
+}
+`;
+
+export default css;
diff --git a/src/prime-preset/components/css/checkbox.ts b/src/prime-preset/components/css/checkbox.ts
new file mode 100644
index 0000000..a5d6adc
--- /dev/null
+++ b/src/prime-preset/components/css/checkbox.ts
@@ -0,0 +1,7 @@
+const css = ({ dt }: any) => `
+.p-checkbox {
+  border-width: ${dt('checkbox.root.extend.borderWidth')};
+}
+`;
+
+export default css;
diff --git a/src/prime-preset/components/css/confirmdialog.ts b/src/prime-preset/components/css/confirmdialog.ts
new file mode 100644
index 0000000..fe169bd
--- /dev/null
+++ b/src/prime-preset/components/css/confirmdialog.ts
@@ -0,0 +1,80 @@
+const css = ({ dt }: any) => `
+/* Размеры диалога по умолчанию (default) */
+.p-confirmdialog.p-dialog {
+  min-width: ${dt('sizingDialog.extra.minWidth')};
+  max-width: ${dt('sizingDialog.extra.maxWidth')};
+}
+
+/* Размер SM (small) - для компактных диалогов */
+.p-confirmdialog-sm.p-dialog {
+  min-width: ${dt('sizingDialog.sm.extra.minWidth')};
+  max-width: ${dt('sizingDialog.sm.extra.maxWidth')};
+}
+
+/* Размер LG (large) - для диалогов с большим содержимым */
+.p-confirmdialog-lg.p-dialog {
+  min-width: ${dt('sizingDialog.lg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.lg.extra.maxWidth')};
+}
+
+/* Размер XLG (extra large) - для диалогов с максимальным содержимым */
+.p-confirmdialog-xlg.p-dialog {
+  min-width: ${dt('sizingDialog.xlg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.xlg.extra.maxWidth')};
+}
+
+.p-dialog .p-dialog-header .p-dialog-title {
+  gap: ${dt('spacing.gap.gap-2')};
+}
+
+/* Стилизация иконки в заголовке диалога */
+.p-confirmdialog .p-dialog-header .p-icon {
+  display: inline-flex;
+  width: ${dt('fonts.fontSize.2xl')};
+  height: ${dt('fonts.fontSize.2xl')};
+}
+
+/* Размер шрифта для иконки (псевдоэлемент ::before) */
+.p-confirmdialog .p-dialog-header .p-icon::before {
+font-size: ${dt('fonts.fontSize.2xl')};
+}
+
+/* Расположение кнопок в футере диалога */
+.p-confirmdialog .p-dialog-footer {
+  justify-content: flex-end;
+  flex-direction: row-reverse;
+}
+
+/* Цвет иконки для severity="success" (успешное действие) */
+.p-confirmdialog[data-pc-severity="success"] .p-dialog-header .p-icon,
+.p-confirmdialog.p-confirm-dialog-accept .p-dialog-header .p-icon {
+  color: ${dt('confirmdialog.extend.extIcon.success')};
+}
+
+/* Цвет иконки для severity="info" (информационное сообщение) */
+.p-confirmdialog[data-pc-severity="info"] .p-dialog-header .p-icon,
+.p-confirmdialog.p-confirm-dialog-info .p-dialog-header .p-icon {
+  color: ${dt('confirmdialog.extend.extIcon.info')};
+}
+
+/* Цвет иконки для severity="warn" (предупреждение) */
+.p-confirmdialog[data-pc-severity="warn"] .p-dialog-header .p-icon,
+.p-confirmdialog.p-confirm-dialog-warn .p-dialog-header .p-icon {
+  color: ${dt('confirmdialog.extend.extIcon.warn')};
+}
+
+/* Цвет иконки для severity="help" (справка) */
+.p-confirmdialog[data-pc-severity="help"] .p-dialog-header .p-icon,
+.p-confirmdialog.p-confirm-dialog-help .p-dialog-header .p-icon {
+  color: ${dt('confirmdialog.extend.extIcon.help')};
+}
+
+/* Цвет иконки для severity="danger" или "error" (критическое действие) */
+.p-confirmdialog[data-pc-severity="danger"] .p-dialog-header .p-icon,
+.p-confirmdialog[data-pc-severity="error"] .p-dialog-header .p-icon,
+.p-confirmdialog.p-confirm-dialog-error .p-dialog-header .p-icon {
+  color: ${dt('confirmdialog.extend.extIcon.danger')};
+}
+`;
+
+export default css;
diff --git a/src/prime-preset/components/css/dialog.ts b/src/prime-preset/components/css/dialog.ts
new file mode 100644
index 0000000..4e9f2c4
--- /dev/null
+++ b/src/prime-preset/components/css/dialog.ts
@@ -0,0 +1,41 @@
+const css = ({ dt }: any) => `
+/* Размеры диалога по умолчанию (default) */
+.p-dialog-extra.p-dialog {
+  min-width: ${dt('sizingDialog.extra.minWidth')};
+  max-width: ${dt('sizingDialog.extra.maxWidth')};
+}
+
+/* Размер SM (small) - для компактных диалогов */
+.p-dialog-sm-extra.p-dialog {
+  min-width: ${dt('sizingDialog.sm.extra.minWidth')};
+  max-width: ${dt('sizingDialog.sm.extra.maxWidth')};
+}
+
+/* Размер LG (large) - для диалогов с большим содержимым */
+.p-dialog-lg-extra.p-dialog {
+  min-width: ${dt('sizingDialog.lg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.lg.extra.maxWidth')};
+}
+
+/* Размер XLG (extra large) - для диалогов с максимальным содержимым */
+.p-dialog-xlg-extra.p-dialog {
+  min-width: ${dt('sizingDialog.xlg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.xlg.extra.maxWidth')};
+}
+
+.p-dialog .p-dialog-header {
+  border-bottom: ${dt('sizing.width.w-0.1')} solid ${dt('content.borderColor')};
+}
+
+.p-dialog .p-dialog-header .p-dialog-title {
+  display: flex;
+  align-items: center;
+  gap: ${dt('spacing.gap.gap-2')};
+}
+
+.p-dialog .p-dialog-footer {
+  flex-direction: row-reverse;
+}
+`;
+
+export default css;
diff --git a/src/prime-preset/components/css/divider.ts b/src/prime-preset/components/css/divider.ts
new file mode 100644
index 0000000..8528d63
--- /dev/null
+++ b/src/prime-preset/components/css/divider.ts
@@ -0,0 +1,16 @@
+const css = ({ dt }: any) => `
+
+/* Дополнительная обертка для контента с иконками */
+.p-divider-content > div {
+  display: flex;
+  align-items: center;
+  gap: ${dt('spacing.gap.gap-2')};
+}
+
+/* Сброс margin для всех иконок внутри divider-content */
+.p-divider-content i {
+  margin: 0;
+}
+`;
+
+export default css;
diff --git a/src/prime-preset/css.ts b/src/prime-preset/css.ts
new file mode 100644
index 0000000..053f1b5
--- /dev/null
+++ b/src/prime-preset/css.ts
@@ -0,0 +1,32 @@
+import buttonCss from './components/css/button';
+import avatarCss from './components/css/avatar';
+import breadcrumbCss from './components/css/breadcrumb';
+import checkboxCss from './components/css/checkbox';
+import confirmdialogCss from './components/css/confirmdialog';
+import dialogCss from './components/css/dialog';
+import dividerCss from './components/css/divider';
+
+const css = ({ dt }: any) => `
+  ${buttonCss({ dt })}
+  ${avatarCss({ dt })}
+  ${breadcrumbCss({ dt })}
+  ${checkboxCss({ dt })}
+  ${confirmdialogCss({ dt })}
+  ${dialogCss({ dt })}
+  ${dividerCss({ dt })}
+  
+  .p-disabled, .p-component:disabled {
+    mix-blend-mode: luminosity;
+  }
+  
+  [class*="menu"].p-component {
+    border: none;
+  }
+  
+  [class*="menu"][class*="item"]:not(:has([class*="icon"])) [class*="item-content"] > [class*="item"] {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+`;
+
+export default css;
diff --git a/src/prime-preset/fonts/tt-fellows/TT_Fellows_DemiBold.woff2 b/src/prime-preset/fonts/tt-fellows/TT_Fellows_DemiBold.woff2
new file mode 100644
index 0000000..ec67015
Binary files /dev/null and b/src/prime-preset/fonts/tt-fellows/TT_Fellows_DemiBold.woff2 differ
diff --git a/src/prime-preset/fonts/tt-fellows/TT_Fellows_DemiBold_Italic.woff2 b/src/prime-preset/fonts/tt-fellows/TT_Fellows_DemiBold_Italic.woff2
new file mode 100644
index 0000000..bf6d066
Binary files /dev/null and b/src/prime-preset/fonts/tt-fellows/TT_Fellows_DemiBold_Italic.woff2 differ
diff --git a/src/prime-preset/fonts/tt-fellows/TT_Fellows_Regular.woff2 b/src/prime-preset/fonts/tt-fellows/TT_Fellows_Regular.woff2
new file mode 100644
index 0000000..c4c6736
Binary files /dev/null and b/src/prime-preset/fonts/tt-fellows/TT_Fellows_Regular.woff2 differ
diff --git a/src/prime-preset/primitive.ts b/src/prime-preset/primitive.ts
index eeadb16..2122fef 100644
--- a/src/prime-preset/primitive.ts
+++ b/src/prime-preset/primitive.ts
@@ -368,5 +368,137 @@ export default {
       '85': '3.357142857142857rem',
       auto: 'auto'
     }
+  },
+  spacing: {
+    padding: {
+      "p-0": "0",
+      "p-1": "0.25rem",
+      "p-2": "0.5rem",
+      "p-3": "0.75rem",
+      "p-4": "1rem",
+      "p-5": "1.25rem",
+      "p-6": "1.5rem",
+      "p-7": "1.75rem",
+      "p-8": "2rem",
+      "p-9": "2.25rem",
+      "p-10": "2.5rem",
+      "p-11": "2.75rem",
+      "p-12": "3rem",
+      "p-14": "3.5rem",
+      "p-16": "4rem",
+      "p-20": "5rem",
+      "p-24": "6rem",
+      "p-28": "7rem",
+      "p-32": "8rem",
+      "p-36": "9rem",
+      "p-40": "10rem"
+    },
+    gap: {
+      "gap-0": "0",
+      "gap-1": "0.25rem",
+      "gap-2": "0.5rem",
+      "gap-3": "0.75rem",
+      "gap-4": "1rem",
+      "gap-5": "1.25rem",
+      "gap-6": "1.5rem",
+      "gap-7": "1.75rem",
+      "gap-8": "2rem",
+      "gap-9": "2.25rem",
+      "gap-10": "2.5rem",
+      "gap-11": "2.75rem",
+      "gap-12": "3rem",
+      "gap-14": "3.5rem",
+      "gap-16": "4rem",
+      "gap-20": "5rem",
+      "gap-24": "6rem",
+      "gap-28": "7rem",
+      "gap-32": "8rem",
+      "gap-36": "9rem",
+      "gap-40": "10rem"
+    }
+  },
+  sizing: {
+    width: {
+      "w-0.1": "0.1rem",
+      "w-1": "1rem",
+      "w-2": "2rem",
+      "w-3": "3rem",
+      "w-4": "4rem",
+      "w-5": "5rem",
+      "w-6": "6rem",
+      "w-7": "7rem",
+      "w-8": "8rem",
+      "w-9": "9rem",
+      "w-10": "10rem",
+      "w-11": "11rem",
+      "w-12": "12rem",
+      "w-13": "13rem",
+      "w-14": "14rem",
+      "w-15": "15rem",
+      "w-16": "16rem",
+      "w-17": "17rem",
+      "w-18": "18rem",
+      "w-19": "19rem",
+      "w-20": "20rem",
+      "w-21": "21rem",
+      "w-22": "22rem",
+      "w-23": "23rem",
+      "w-24": "24rem",
+      "w-25": "25rem",
+      "w-26": "26rem",
+      "w-27": "27rem",
+      "w-28": "28rem",
+      "w-29": "29rem",
+      "w-30": "30rem",
+      "w-34": "34rem",
+      "w-45": "45rem",
+      "w-50": "50rem",
+      "w-54": "54rem",
+      "w-58": "58rem",
+      "w-60": "60rem"
+    },
+    height: {
+      "h-1": "1rem",
+      "h-2": "2rem",
+      "h-3": "3rem",
+      "h-4": "4rem",
+      "h-5": "5rem",
+      "h-6": "6rem",
+      "h-7": "7rem",
+      "h-8": "8rem",
+      "h-9": "9rem",
+      "h-10": "10rem",
+      "h-11": "11rem",
+      "h-12": "12rem",
+      "h-13": "13rem",
+      "h-14": "14rem",
+      "h-15": "15rem",
+      "h-16": "16rem",
+      "h-17": "17rem",
+      "h-18": "18rem",
+      "h-19": "19rem",
+      "h-20": "20rem",
+      "h-21": "21rem",
+      "h-22": "22rem",
+      "h-23": "23rem",
+      "h-24": "24rem",
+      "h-25": "25rem",
+      "h-26": "26rem",
+      "h-27": "27rem",
+      "h-28": "28rem",
+      "h-29": "29rem",
+      "h-30": "30rem",
+      "h-34": "34rem",
+      "h-45": "45rem",
+      "h-50": "50rem",
+      "h-54": "54rem",
+      "h-58": "58rem",
+      "h-60": "60rem"
+    }
+  },
+  opacity: {
+    '0': 0,
+    '50': 0.5,
+    '100': 1
   }
 };
diff --git a/src/prime-preset/semantic.ts b/src/prime-preset/semantic.ts
index 951a084..143f594 100644
--- a/src/prime-preset/semantic.ts
+++ b/src/prime-preset/semantic.ts
@@ -183,8 +183,12 @@ export default {
       shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
     }
   },
+  opacity: {
+    default: '{opacity.100}',
+    muted: '{opacity.50}',
+    disabled: '{opacity.0}'
+  },
   transitionDuration: '0.2s',
-  disabledOpacity: '0.5',
   iconSizeMedium: '1rem',
   iconSizeLarge: '1.25rem',
   anchorGutter: '0.14285714285714285rem',
diff --git a/src/prime-preset/theme.preset.ts b/src/prime-preset/theme.preset.ts
index 29ae4eb..6f64bab 100644
--- a/src/prime-preset/theme.preset.ts
+++ b/src/prime-preset/theme.preset.ts
@@ -1,13 +1,11 @@
 import { definePreset } from '@primeng/themes';
 import Aura from '@primeng/themes/aura';
-// import * as components from './components.json';
-// import * as primitive from './primitive.json';
-// import * as semantic from './semantic.json';
 
 import components from './components';
 import primitive from './primitive';
 import semantic from './semantic';
+import css from './css';
 
-const Preset = definePreset(Aura, { components, primitive, semantic });
+const Preset = definePreset(Aura, { components, primitive, semantic, css });
 
 export default Preset;
diff --git a/src/stories/components/avatar/avatar.stories.ts b/src/stories/components/avatar/avatar.stories.ts
new file mode 100644
index 0000000..ff66e6f
--- /dev/null
+++ b/src/stories/components/avatar/avatar.stories.ts
@@ -0,0 +1,36 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { Avatar } from 'primeng/avatar';
+import { AvatarGroup } from 'primeng/avatargroup';
+
+import { AvatarBaseComponent, Base } from './examples/avatar-base.component';
+import { AvatarIconComponent, Icon } from './examples/avatar-icon.component';
+import { AvatarSizesComponent, Sizes } from './examples/avatar-sizes.component';
+import { AvatarGroupComponent, Group } from './examples/avatar-group.component';
+
+const meta: Meta = {
+  title: 'PrimeNG/Avatar',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Avatar,
+        AvatarGroup,
+        AvatarBaseComponent,
+        AvatarIconComponent,
+        AvatarSizesComponent,
+        AvatarGroupComponent
+      ]
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Компонент Avatar используется для представления пользователей с изображениями, иконками или текстом'
+      }
+    }
+  }
+};
+
+export default meta;
+
+export { Base, Icon, Sizes, Group };
diff --git a/src/stories/components/avatar/examples/avatar-base.component.ts b/src/stories/components/avatar/examples/avatar-base.component.ts
new file mode 100644
index 0000000..bac3b16
--- /dev/null
+++ b/src/stories/components/avatar/examples/avatar-base.component.ts
@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { Avatar } from 'primeng/avatar';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <div class="flex gap-3">
+    <p-avatar label="P" />
+    <p-avatar label="V" [style]="{ 'background-color': '#9c27b0', color: '#ffffff' }" />
+    <p-avatar label="U" [style]="{ 'background-color': '#673ab7', color: '#ffffff' }" />
+  </div>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-avatar-base',
+  standalone: true,
+  imports: [Avatar],
+  template,
+  styles
+})
+export class AvatarBaseComponent {}
+
+export const Base: StoryObj = {
+  render: () => ({
+    template: `<app-avatar-base></app-avatar-base>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовые аватары с буквами'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Avatar } from 'primeng/avatar';
+
+@Component({
+  selector: 'app-avatar-base',
+  standalone: true,
+  imports: [Avatar],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class AvatarBaseComponent {}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/avatar/examples/avatar-group.component.ts b/src/stories/components/avatar/examples/avatar-group.component.ts
new file mode 100644
index 0000000..50d8e0f
--- /dev/null
+++ b/src/stories/components/avatar/examples/avatar-group.component.ts
@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { Avatar } from 'primeng/avatar';
+import { AvatarGroup } from 'primeng/avatargroup';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <p-avatarGroup>
+    <p-avatar label="P" />
+    <p-avatar label="V" [style]="{ 'background-color': '#9c27b0', color: '#ffffff' }" />
+    <p-avatar label="U" [style]="{ 'background-color': '#673ab7', color: '#ffffff' }" />
+    <p-avatar label="+2" [style]="{ 'background-color': '#607d8b', color: '#ffffff' }" />
+  </p-avatarGroup>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-avatar-group',
+  standalone: true,
+  imports: [Avatar, AvatarGroup],
+  template,
+  styles
+})
+export class AvatarGroupComponent {}
+
+export const Group: StoryObj = {
+  render: () => ({
+    template: `<app-avatar-group></app-avatar-group>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Группа аватаров'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Avatar } from 'primeng/avatar';
+import { AvatarGroup } from 'primeng/avatargroup';
+
+@Component({
+  selector: 'app-avatar-group',
+  standalone: true,
+  imports: [Avatar, AvatarGroup],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class AvatarGroupComponent {}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/avatar/examples/avatar-icon.component.ts b/src/stories/components/avatar/examples/avatar-icon.component.ts
new file mode 100644
index 0000000..cae83f4
--- /dev/null
+++ b/src/stories/components/avatar/examples/avatar-icon.component.ts
@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { Avatar } from 'primeng/avatar';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <div class="flex gap-3">
+    <p-avatar icon="ti ti-user" />
+    <p-avatar icon="ti ti-user" [style]="{ 'background-color': '#9c27b0', color: '#ffffff' }" />
+    <p-avatar icon="ti ti-user" [style]="{ 'background-color': '#673ab7', color: '#ffffff' }" shape="circle" />
+  </div>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-avatar-icon',
+  standalone: true,
+  imports: [Avatar],
+  template,
+  styles
+})
+export class AvatarIconComponent {}
+
+export const Icon: StoryObj = {
+  render: () => ({
+    template: `<app-avatar-icon></app-avatar-icon>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Аватары с иконками'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Avatar } from 'primeng/avatar';
+
+@Component({
+  selector: 'app-avatar-icon',
+  standalone: true,
+  imports: [Avatar],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class AvatarIconComponent {}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/avatar/examples/avatar-sizes.component.ts b/src/stories/components/avatar/examples/avatar-sizes.component.ts
new file mode 100644
index 0000000..318ced3
--- /dev/null
+++ b/src/stories/components/avatar/examples/avatar-sizes.component.ts
@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { Avatar } from 'primeng/avatar';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <div class="flex gap-3 items-end">
+    <p-avatar label="XL" size="xlarge" />
+    <p-avatar label="L" size="large" />
+    <p-avatar label="N" />
+  </div>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-avatar-sizes',
+  standalone: true,
+  imports: [Avatar],
+  template,
+  styles
+})
+export class AvatarSizesComponent {}
+
+export const Sizes: StoryObj = {
+  render: () => ({
+    template: `<app-avatar-sizes></app-avatar-sizes>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Различные размеры аватаров'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Avatar } from 'primeng/avatar';
+
+@Component({
+  selector: 'app-avatar-sizes',
+  standalone: true,
+  imports: [Avatar],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class AvatarSizesComponent {}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/badge/badge.stories.ts b/src/stories/components/badge/badge.stories.ts
new file mode 100644
index 0000000..215f12f
--- /dev/null
+++ b/src/stories/components/badge/badge.stories.ts
@@ -0,0 +1,30 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { Badge } from 'primeng/badge';
+
+import { BadgeBaseComponent, Base } from './examples/badge-base.component';
+import { BadgeSizesComponent, Sizes } from './examples/badge-sizes.component';
+
+const meta: Meta = {
+  title: 'PrimeNG/Badge',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Badge,
+        BadgeBaseComponent,
+        BadgeSizesComponent
+      ]
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Компонент Badge используется для отображения числовых значений или статусов'
+      }
+    }
+  }
+};
+
+export default meta;
+
+export { Base, Sizes };
diff --git a/src/stories/components/badge/examples/badge-base.component.ts b/src/stories/components/badge/examples/badge-base.component.ts
new file mode 100644
index 0000000..f00686d
--- /dev/null
+++ b/src/stories/components/badge/examples/badge-base.component.ts
@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { Badge } from 'primeng/badge';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <div class="flex gap-3">
+    <p-badge value="2" />
+    <p-badge value="8" severity="success" />
+    <p-badge value="4" severity="info" />
+    <p-badge value="12" severity="warn" />
+    <p-badge value="3" severity="danger" />
+  </div>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-badge-base',
+  standalone: true,
+  imports: [Badge],
+  template,
+  styles
+})
+export class BadgeBaseComponent {}
+
+export const Base: StoryObj = {
+  render: () => ({
+    template: `<app-badge-base></app-badge-base>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовые бейджи с различными severity'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Badge } from 'primeng/badge';
+
+@Component({
+  selector: 'app-badge-base',
+  standalone: true,
+  imports: [Badge],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class BadgeBaseComponent {}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/badge/examples/badge-sizes.component.ts b/src/stories/components/badge/examples/badge-sizes.component.ts
new file mode 100644
index 0000000..4ffca7d
--- /dev/null
+++ b/src/stories/components/badge/examples/badge-sizes.component.ts
@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { Badge } from 'primeng/badge';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <div class="flex gap-3 items-center">
+    <p-badge value="2" size="xlarge" />
+    <p-badge value="4" size="large" />
+    <p-badge value="6" />
+    <p-badge value="8" size="small" />
+  </div>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-badge-sizes',
+  standalone: true,
+  imports: [Badge],
+  template,
+  styles
+})
+export class BadgeSizesComponent {}
+
+export const Sizes: StoryObj = {
+  render: () => ({
+    template: `<app-badge-sizes></app-badge-sizes>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Различные размеры бейджей'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Badge } from 'primeng/badge';
+
+@Component({
+  selector: 'app-badge-sizes',
+  standalone: true,
+  imports: [Badge],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class BadgeSizesComponent {}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/breadcrumb/breadcrumb.stories.ts b/src/stories/components/breadcrumb/breadcrumb.stories.ts
new file mode 100644
index 0000000..59dea43
--- /dev/null
+++ b/src/stories/components/breadcrumb/breadcrumb.stories.ts
@@ -0,0 +1,28 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { Breadcrumb } from 'primeng/breadcrumb';
+
+import { BreadcrumbBaseComponent, Base } from './examples/breadcrumb-base.component';
+
+const meta: Meta = {
+  title: 'PrimeNG/Breadcrumb',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Breadcrumb,
+        BreadcrumbBaseComponent
+      ]
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Компонент Breadcrumb отображает путь навигации для текущей страницы'
+      }
+    }
+  }
+};
+
+export default meta;
+
+export { Base };
diff --git a/src/stories/components/breadcrumb/examples/breadcrumb-base.component.ts b/src/stories/components/breadcrumb/examples/breadcrumb-base.component.ts
new file mode 100644
index 0000000..d46066c
--- /dev/null
+++ b/src/stories/components/breadcrumb/examples/breadcrumb-base.component.ts
@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { Breadcrumb } from 'primeng/breadcrumb';
+import { MenuItem } from 'primeng/api';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <p-breadcrumb [model]="items" [home]="home" />
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-breadcrumb-base',
+  standalone: true,
+  imports: [Breadcrumb],
+  template,
+  styles
+})
+export class BreadcrumbBaseComponent {
+  items: MenuItem[] = [
+    { label: 'Электроника' },
+    { label: 'Компьютеры' },
+    { label: 'Ноутбуки' }
+  ];
+  
+  home: MenuItem = { icon: 'ti ti-home', routerLink: '/' };
+}
+
+export const Base: StoryObj = {
+  render: () => ({
+    template: `<app-breadcrumb-base></app-breadcrumb-base>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый breadcrumb с навигацией'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Breadcrumb } from 'primeng/breadcrumb';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+  selector: 'app-breadcrumb-base',
+  standalone: true,
+  imports: [Breadcrumb],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class BreadcrumbBaseComponent {
+  items: MenuItem[] = [
+    { label: 'Электроника' },
+    { label: 'Компьютеры' },
+    { label: 'Ноутбуки' }
+  ];
+  
+  home: MenuItem = { icon: 'ti ti-home', routerLink: '/' };
+}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/card/examples/card-base.component.ts b/src/stories/components/card/examples/card-base.component.ts
new file mode 100644
index 0000000..8cb5715
--- /dev/null
+++ b/src/stories/components/card/examples/card-base.component.ts
@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+import { Card } from 'primeng/card';
+import { Button } from 'primeng/button';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <p-card header="Заголовок карточки" subheader="Подзаголовок" [style]="{ width: '360px' }">
+    <ng-template #header>
+      <img alt="Card" src="https://primefaces.org/cdn/primeng/images/usercard.png" />
+    </ng-template>
+    <p class="m-0">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae.
+    </p>
+    <ng-template #footer>
+      <div class="flex gap-2 justify-end">
+        <p-button label="Отмена" severity="secondary" [outlined]="true" />
+        <p-button label="Сохранить" />
+      </div>
+    </ng-template>
+  </p-card>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-card-base',
+  standalone: true,
+  imports: [Card, Button],
+  template,
+  styles
+})
+export class CardBaseComponent {}
+
+export const Base: StoryObj = {
+  render: () => ({
+    template: `<app-card-base></app-card-base>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовая карточка с заголовком, контентом и футером'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Card } from 'primeng/card';
+import { Button } from 'primeng/button';
+
+@Component({
+  selector: 'app-card-base',
+  standalone: true,
+  imports: [Card, Button],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class CardBaseComponent {}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/checkbox/checkbox.stories.ts b/src/stories/components/checkbox/checkbox.stories.ts
new file mode 100644
index 0000000..2c2f437
--- /dev/null
+++ b/src/stories/components/checkbox/checkbox.stories.ts
@@ -0,0 +1,32 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { Checkbox } from 'primeng/checkbox';
+import { FormsModule } from '@angular/forms';
+
+import { CheckboxBaseComponent, Base } from './examples/checkbox-base.component';
+import { CheckboxGroupComponent, Group } from './examples/checkbox-group.component';
+
+const meta: Meta = {
+  title: 'PrimeNG/Checkbox',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Checkbox,
+        FormsModule,
+        CheckboxBaseComponent,
+        CheckboxGroupComponent
+      ]
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Компонент Checkbox используется для выбора булевых значений или множественного выбора из списка'
+      }
+    }
+  }
+};
+
+export default meta;
+
+export { Base, Group };
diff --git a/src/stories/components/checkbox/examples/checkbox-base.component.ts b/src/stories/components/checkbox/examples/checkbox-base.component.ts
new file mode 100644
index 0000000..8be98ef
--- /dev/null
+++ b/src/stories/components/checkbox/examples/checkbox-base.component.ts
@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+import { Checkbox } from 'primeng/checkbox';
+import { FormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <div class="flex flex-col gap-3">
+    <div class="flex items-center gap-2">
+      <p-checkbox [(ngModel)]="checked1" [binary]="true" inputId="binary" />
+      <label for="binary">Согласен с условиями</label>
+    </div>
+    <div class="flex items-center gap-2">
+      <p-checkbox [(ngModel)]="checked2" [binary]="true" inputId="binary2" />
+      <label for="binary2">Подписаться на рассылку</label>
+    </div>
+  </div>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-checkbox-base',
+  standalone: true,
+  imports: [Checkbox, FormsModule],
+  template,
+  styles
+})
+export class CheckboxBaseComponent {
+  checked1: boolean = false;
+  checked2: boolean = true;
+}
+
+export const Base: StoryObj = {
+  render: () => ({
+    template: `<app-checkbox-base></app-checkbox-base>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовые чекбоксы'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Checkbox } from 'primeng/checkbox';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-checkbox-base',
+  standalone: true,
+  imports: [Checkbox, FormsModule],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class CheckboxBaseComponent {
+  checked1: boolean = false;
+  checked2: boolean = true;
+}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/checkbox/examples/checkbox-group.component.ts b/src/stories/components/checkbox/examples/checkbox-group.component.ts
new file mode 100644
index 0000000..0fd2dc8
--- /dev/null
+++ b/src/stories/components/checkbox/examples/checkbox-group.component.ts
@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { Checkbox } from 'primeng/checkbox';
+import { FormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <div class="flex flex-col gap-3">
+    <div class="font-semibold mb-2">Выберите категории</div>
+    <div class="flex items-center gap-2">
+      <p-checkbox [(ngModel)]="categories" name="category" value="Technology" inputId="category1" />
+      <label for="category1">Технологии</label>
+    </div>
+    <div class="flex items-center gap-2">
+      <p-checkbox [(ngModel)]="categories" name="category" value="Finance" inputId="category2" />
+      <label for="category2">Финансы</label>
+    </div>
+    <div class="flex items-center gap-2">
+      <p-checkbox [(ngModel)]="categories" name="category" value="Sports" inputId="category3" />
+      <label for="category3">Спорт</label>
+    </div>
+  </div>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-checkbox-group',
+  standalone: true,
+  imports: [Checkbox, FormsModule],
+  template,
+  styles
+})
+export class CheckboxGroupComponent {
+  categories: string[] = ['Technology'];
+}
+
+export const Group: StoryObj = {
+  render: () => ({
+    template: `<app-checkbox-group></app-checkbox-group>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Группа чекбоксов для множественного выбора'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Checkbox } from 'primeng/checkbox';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-checkbox-group',
+  standalone: true,
+  imports: [Checkbox, FormsModule],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class CheckboxGroupComponent {
+  categories: string[] = ['Technology'];
+}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/confirmdialog/confirmdialog.stories.ts b/src/stories/components/confirmdialog/confirmdialog.stories.ts
new file mode 100644
index 0000000..d7dd1e9
--- /dev/null
+++ b/src/stories/components/confirmdialog/confirmdialog.stories.ts
@@ -0,0 +1,32 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { Button } from 'primeng/button';
+import { ConfirmationService } from 'primeng/api';
+
+import { ConfirmDialogBaseComponent, Base } from './examples/confirmdialog-base.component';
+
+const meta: Meta = {
+  title: 'PrimeNG/ConfirmDialog',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        ConfirmDialog,
+        Button,
+        ConfirmDialogBaseComponent
+      ],
+      providers: [ConfirmationService]
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Компонент ConfirmDialog используется для подтверждения действий пользователя'
+      }
+    }
+  }
+};
+
+export default meta;
+
+export { Base };
diff --git a/src/stories/components/confirmdialog/examples/confirmdialog-base.component.ts b/src/stories/components/confirmdialog/examples/confirmdialog-base.component.ts
new file mode 100644
index 0000000..c625475
--- /dev/null
+++ b/src/stories/components/confirmdialog/examples/confirmdialog-base.component.ts
@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { Button } from 'primeng/button';
+import { ConfirmationService } from 'primeng/api';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <p-confirmDialog />
+  <p-button label="Удалить" severity="danger" (onClick)="confirm()" />
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-confirmdialog-base',
+  standalone: true,
+  imports: [ConfirmDialog, Button],
+  providers: [ConfirmationService],
+  template,
+  styles
+})
+export class ConfirmDialogBaseComponent {
+  constructor(private confirmationService: ConfirmationService) {}
+
+  confirm() {
+    this.confirmationService.confirm({
+      header: 'Подтверждение удаления',
+      message: 'Вы уверены, что хотите удалить этот элемент?',
+      icon: 'ti ti-alert-triangle',
+      acceptLabel: 'Да, удалить',
+      rejectLabel: 'Отмена',
+      accept: () => {
+        console.log('Удалено');
+      }
+    });
+  }
+}
+
+export const Base: StoryObj = {
+  render: () => ({
+    template: `<app-confirmdialog-base></app-confirmdialog-base>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый диалог подтверждения'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { Button } from 'primeng/button';
+import { ConfirmationService } from 'primeng/api';
+
+@Component({
+  selector: 'app-confirmdialog-base',
+  standalone: true,
+  imports: [ConfirmDialog, Button],
+  providers: [ConfirmationService],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class ConfirmDialogBaseComponent {
+  constructor(private confirmationService: ConfirmationService) {}
+
+  confirm() {
+    this.confirmationService.confirm({
+      header: 'Подтверждение удаления',
+      message: 'Вы уверены, что хотите удалить этот элемент?',
+      icon: 'ti ti-alert-triangle',
+      acceptLabel: 'Да, удалить',
+      rejectLabel: 'Отмена',
+      accept: () => {
+        console.log('Удалено');
+      }
+    });
+  }
+}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/dialog/dialog.stories.ts b/src/stories/components/dialog/dialog.stories.ts
new file mode 100644
index 0000000..c7e58c2
--- /dev/null
+++ b/src/stories/components/dialog/dialog.stories.ts
@@ -0,0 +1,30 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { Dialog } from 'primeng/dialog';
+import { Button } from 'primeng/button';
+
+import { DialogBaseComponent, Base } from './examples/dialog-base.component';
+
+const meta: Meta = {
+  title: 'PrimeNG/Dialog',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Dialog,
+        Button,
+        DialogBaseComponent
+      ]
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Компонент Dialog отображает контент в модальном окне поверх страницы'
+      }
+    }
+  }
+};
+
+export default meta;
+
+export { Base };
diff --git a/src/stories/components/dialog/examples/dialog-base.component.ts b/src/stories/components/dialog/examples/dialog-base.component.ts
new file mode 100644
index 0000000..d26dac4
--- /dev/null
+++ b/src/stories/components/dialog/examples/dialog-base.component.ts
@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+import { Dialog } from 'primeng/dialog';
+import { Button } from 'primeng/button';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <p-button label="Открыть диалог" (onClick)="visible = true" />
+  
+  <p-dialog 
+    header="Заголовок диалога" 
+    [(visible)]="visible" 
+    [modal]="true"
+    [style]="{ width: '25rem' }"
+  >
+    <p class="m-0">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <ng-template #footer>
+      <p-button label="Отмена" severity="secondary" (onClick)="visible = false" />
+      <p-button label="Сохранить" (onClick)="visible = false" />
+    </ng-template>
+  </p-dialog>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-dialog-base',
+  standalone: true,
+  imports: [Dialog, Button],
+  template,
+  styles
+})
+export class DialogBaseComponent {
+  visible: boolean = false;
+}
+
+export const Base: StoryObj = {
+  render: () => ({
+    template: `<app-dialog-base></app-dialog-base>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый модальный диалог'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Dialog } from 'primeng/dialog';
+import { Button } from 'primeng/button';
+
+@Component({
+  selector: 'app-dialog-base',
+  standalone: true,
+  imports: [Dialog, Button],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class DialogBaseComponent {
+  visible: boolean = false;
+}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/divider/divider.stories.ts b/src/stories/components/divider/divider.stories.ts
new file mode 100644
index 0000000..97038c7
--- /dev/null
+++ b/src/stories/components/divider/divider.stories.ts
@@ -0,0 +1,28 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { Divider } from 'primeng/divider';
+
+import { DividerBaseComponent, Base } from './examples/divider-base.component';
+
+const meta: Meta = {
+  title: 'PrimeNG/Divider',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Divider,
+        DividerBaseComponent
+      ]
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Компонент Divider используется для разделения контента'
+      }
+    }
+  }
+};
+
+export default meta;
+
+export { Base };
diff --git a/src/stories/components/divider/examples/divider-base.component.ts b/src/stories/components/divider/examples/divider-base.component.ts
new file mode 100644
index 0000000..9a1fb88
--- /dev/null
+++ b/src/stories/components/divider/examples/divider-base.component.ts
@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { Divider } from 'primeng/divider';
+import { StoryObj } from '@storybook/angular';
+
+const template = `
+<div class="bg-surface-ground p-4">
+  <div class="flex flex-col gap-4">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    
+    <p-divider />
+    
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    
+    <p-divider align="center">
+      <span class="text-sm">ИЛИ</span>
+    </p-divider>
+    
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+  </div>
+</div>
+`;
+
+const styles = '';
+
+@Component({
+  selector: 'app-divider-base',
+  standalone: true,
+  imports: [Divider],
+  template,
+  styles
+})
+export class DividerBaseComponent {}
+
+export const Base: StoryObj = {
+  render: () => ({
+    template: `<app-divider-base></app-divider-base>`
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый разделитель с текстом и без'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Divider } from 'primeng/divider';
+
+@Component({
+  selector: 'app-divider-base',
+  standalone: true,
+  imports: [Divider],
+  template: \`${template}\`,
+  styles: \`${styles}\`
+})
+export class DividerBaseComponent {}
+        `
+      }
+    }
+  }
+};
diff --git a/src/styles.scss b/src/styles.scss
index e6cb491..9366aa3 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,3 +3,24 @@
 @tailwind utilities;
 
 @import '@tabler/icons-webfont/dist/tabler-icons.min.css';
+
+@font-face {
+  font-family: 'TT Fellows';
+  src: url('/src/prime-preset/fonts/tt-fellows/TT_Fellows_Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'TT Fellows';
+  src: url('/src/prime-preset/fonts/tt-fellows/TT_Fellows_DemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'TT Fellows';
+  src: url('/src/prime-preset/fonts/tt-fellows/TT_Fellows_DemiBold_Italic.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+}